/* Soft Warm Orange Theme - style.css */

/* root colors */
:root{
  --primary:#ff7a1a;    /* warm orange */
  --accent:#ff9f4a;     /* lighter orange */
  --hot:#ef4444;        /* red */
  --muted:#7b6f65;
  --card-bg: rgba(255,255,255,0.95);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;background:linear-gradient(180deg,#fff7ed,#fff3e6);color:#2b240f}

/* hero */
.hero{
  position:relative;padding:56px 20px 36px;text-align:center;background:linear-gradient(90deg, rgba(255,122,26,0.12), rgba(255,159,74,0.08));
  overflow:hidden;
}
.hero-inner h1{margin:0;font-size:1.8rem;color:var(--primary)}
.lead{color:var(--muted);margin-top:8px}

/* soft heat orbs */
.heat-orb{position:absolute;border-radius:50%;filter:blur(36px);opacity:0.12}
.heat-orb-1{width:320px;height:320px;right:-70px;top:-40px;background:radial-gradient(circle,#ffb380,#ff7a1a)}
.heat-orb-2{width:220px;height:220px;left:-40px;bottom:-30px;background:radial-gradient(circle,#ffd7ad,#ff9f4a)}

/* wrapper & cards */
.wrap{max-width:1100px;margin:20px auto;padding:0 16px}
.card{background:var(--card-bg);border-radius:12px;padding:16px;margin:18px 0;box-shadow:0 10px 30px rgba(43,33,22,0.05)}
.muted{color:var(--muted)}
.small{font-size:0.9rem}

/* grid layout for map/controls */
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.col{padding:6px}

/* map */
.map{height:420px;border-radius:10px;border:1px solid rgba(0,0,0,0.06)}
.map-stats{margin-top:10px;font-weight:700;color:#372510}

/* legend */
.legend{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sw{display:inline-block;width:18px;height:12px;border-radius:4px;margin-right:8px;vertical-align:middle}
.sw-low{background:#b6f0d9}  /* light green */
.sw-mid{background:#ffd7a8}  /* light orange */
.sw-high{background:#ffb3a0} /* pale red */

/* control actions */
.control-actions{display:flex;gap:8px;margin-top:12px}
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;transition:transform .16s ease,box-shadow .16s}
.btn:hover{transform:translateY(-4px)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:#432d1d}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 22px rgba(255,122,26,0.14)}
.btn{background:#fff;color:#5c3b20}

/* form */
.form .row{display:flex;gap:10px;margin-bottom:10px}
.form input, .form select{padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);width:100;background:linear-gradient(180deg,#fff,#fffef8)}
.form-actions{margin-top:8px}

/* table */
.table-wrap{overflow-x:auto;margin-top:12px}
.survey-table{width:100%;border-collapse:collapse}
.survey-table th, .survey-table td{padding:8px;border-bottom:1px solid rgba(0,0,0,0.04);text-align:center;font-size:0.95rem}
.survey-table th{background:linear-gradient(180deg,#fff8f0,#fffdfb)}
.survey-table td{background:transparent}

/* charts */
.charts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
canvas{background:linear-gradient(180deg,#fff,#fffbf5);border-radius:10px;padding:8px;box-shadow:0 8px 22px rgba(43,33,22,0.04)}

/* footer */
.footer{text-align:center;color:#432d1d;font-size:0.95rem;padding:8px}

/* responsiveness */
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:1fr}
  .heat-orb-1{display:none}
}