:root{
  --bg:#0e1116;
  --bg2:#121723;
  --text:#e7ecf3;
  --muted:#a7b0c0;
  --card:#151b26;
  --accent:#ff6a00;
  --accent-2:#ff8c3a;
  --good:#35c759;
  --moderate:#ffd60a;
  --usg:#ffa114;
  --unhealthy:#ff453a;
  --very-unhealthy:#c2185b;
  --hazardous:#6d2b8f;
  --border:#202838;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg);color:var(--text);
}
.app-header{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg2),var(--bg));}
.logo{filter:drop-shadow(0 0 6px rgba(255,106,0,.25))}
.titles h1{font-size:1.1rem;margin:.1rem 0}
.subtitle{margin:0;color:var(--muted);font-size:.9rem}
.container{max-width:980px;margin:1.2rem auto;padding:0 1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin:1rem 0;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.card h2{margin:.2rem 0 1rem 0;font-size:1.1rem}
.alert{border-radius:10px;padding:.8rem 1rem;margin:1rem 0}
.alert.error{background:#2a1b1d;border:1px solid #6b1f28}
.alert.info{background:#172229;border:1px solid #1c3b4b}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.field{grid-column:span 12}
.field.checkbox{display:flex;align-items:end}
@media(min-width:680px){
  .field:nth-child(1){grid-column:span 6}
  .field:nth-child(2),.field:nth-child(3),.field:nth-child(4){grid-column:span 2}
  .field:nth-child(5){grid-column:span 3}
  .field:nth-child(6){grid-column:span 3}
  .field:nth-child(7){grid-column:span 3}
  .field:nth-child(8){grid-column:span 3}
}
label{display:block;margin:0 0 .3rem;color:var(--muted)}
input,select,button{font:inherit}
input,select{width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:#0b0f14;color:var(--text);outline:none}
input:focus,select:focus{border-color:#2d3f60;box-shadow:0 0 0 3px rgba(45,63,96,.35)}
small{display:block;color:var(--muted);opacity:.8;margin-top:.25rem}
.with-btn{display:flex;gap:.5rem}
.with-btn input{flex:1}
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}
button{border:none;border-radius:10px;padding:.6rem .8rem;color:#fff;background:#1f2937;cursor:pointer}
button.primary{background:linear-gradient(45deg,var(--accent),var(--accent-2));}
button.ghost{background:transparent;border:1px dashed var(--border);color:var(--text)}
button.small{font-size:.85rem;padding:.35rem .55rem;border-radius:8px}
button.copied{outline:2px solid var(--accent)}
.muted{color:var(--muted)}
.tile{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.tile{grid-template-columns:1fr auto}}
.tile-main .row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .2rem;border-bottom:1px dashed var(--border)}
.tile-main .row:last-child{border-bottom:none}
.tile-main .label{color:var(--muted)}
.tile-main .value{font-weight:600}
.tile-main .aqi.good{color:var(--good)}
.tile-main .aqi.moderate{color:var(--moderate)}
.tile-main .aqi.usg{color:var(--usg)}
.tile-main .aqi.unhealthy{color:var(--unhealthy)}
.tile-main .aqi.very-unhealthy{color:var(--very-unhealthy)}
.tile-main .aqi.hazardous{color:var(--hazardous)}
.tile-map{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.copy-wrap{width:100%;display:flex;justify-content:flex-end}
.history{display:flex;flex-direction:column;gap:.45rem}
.h-row{display:grid;grid-template-columns:120px 1fr 120px 120px;gap:.6rem;align-items:center}
.h-row .aqi{justify-self:end}
.h-row .fires{justify-self:end}
.app-footer{display:flex;gap:.6rem;align-items:center;justify-content:center;color:var(--muted);padding:2rem 1rem}
.app-footer .sep{opacity:.35}