:root{
  --bg:#0b0b0c; --fg:#f6f7f9; --muted:#9aa0a6; --card:#121317;
  --grad1:#2b6bef; --grad2:#4f8cff; --accent:#4f8cff; --accent-fg:#fff;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --good:#19a974; --fair:#5cb85c; --mod:#f0ad4e; --poor:#d9534f; --vpoor:#8b0000;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f7f9fc; --fg:#0b0b0c; --muted:#5f6368; --card:#ffffff; --shadow:0 10px 24px rgba(0,0,0,.08); }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}

header,main{padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom) 16px}

.logo{width:84px;height:84px}
.logo.small{width:28px;height:28px;margin-right:10px}

.hero{
  padding-top:18px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(43,107,239,.22), rgba(43,107,239,0) 60%);
  backdrop-filter:saturate(140%) blur(6px);
  position:sticky;top:0;z-index:2;
}
.hero-row{display:flex;align-items:center;gap:10px}
.badge{margin-left:auto;background:#19a974;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px}

.home-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.home-chip{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:8px 12px;box-shadow:var(--shadow);max-width:100%;font:10px system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.home-name{max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick{margin-left:4px;opacity:.9}
.icon{filter: saturate(1.2)}
.home-actions{display:flex;gap:8px}
.chip{border:0;border-radius:999px;padding:8px 12px;background:#2a2d33;color:var(--fg);cursor:pointer;font:10px/ system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.chip.ghost{background:transparent;border:1px solid rgba(255,255,255,.15);font:10px system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
[aria-disabled="true"]{pointer-events:none;opacity:.6}
@media (prefers-color-scheme:light){ .chip{background:#e9eefc;color:#0b0b0c} .chip.ghost{background:#fff;border-color:#e6e6e6} }

/* Compact header once Home is set */
.home-set .home-chip{padding:6px 10px;font-size:14px}
.home-set .home-actions .chip{display:none}
.home-set #btnEditHome{display:inline-block}
.home-set .hero{padding-bottom:4px}

/* Content */
.app-main{padding-top:8px}
.card{
  background:var(--card);border-radius:var(--radius);padding:8px;margin:8px 0;box-shadow:var(--shadow)
}
.card.accent{border:1px solid rgba(79,140,255,.4)}
.grid{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:740px){.grid{grid-template-columns:1fr 1fr}}

.cta-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;padding:12px 16px;border-radius:14px;cursor:pointer;background:#2a2d33;color:var(--fg);font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--grad1),var(--grad2));color:var(--accent-fg)}
.btn.tiny{padding:8px 12px;border-radius:12px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.15)}
@media (prefers-color-scheme:light){ .btn{background:#e9eefc;color:#0b0b0c} .btn.ghost{background:#fff;border-color:#e6e6e6} }

.input{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:transparent;color:var(--fg);padding:0 12px;min-width:220px}
@media (prefers-color-scheme:light){ .input{border-color:#d7dbe6;background:#fff;color:#0b0b0c} }
.search-wrap{display:flex;gap:8px;align-items:center}

.small{font-size:.875rem}.muted{color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pill{background:#1f2330;color:#cbd1dc;border-radius:999px;padding:6px 10px;font-size:12px}
@media (prefers-color-scheme:light){.pill{background:#eef2ff;color:#3b4a7a}}

/* AQI badge colour */
.aqi{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:12px;margin-left:6px}
.aqi.g{background:var(--good);color:#fff}
.aqi.f{background:var(--fair);color:#fff}
.aqi.m{background:var(--mod);color:#000}
.aqi.p{background:var(--poor);color:#fff}
.aqi.v{background:var(--vpoor);color:#fff}

.action-row{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.link{color:#9ab6ff;text-decoration:none;border-bottom:1px dashed #9ab6ff}
@media (prefers-color-scheme:light){.link{color:#2b6bef;border-bottom-color:#2b6bef}}

.fab{position:fixed;right:16px;bottom:84px;display:grid;place-items:center;
  width:52px;height:33px;border-radius:16px;background:linear-gradient(90deg,var(--grad1),var(--grad2));
  color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--shadow);z-index:3}
.fab-secondary{bottom:146px;background:#2a2d33}
@media (prefers-color-scheme:light){ .fab-secondary{background:#0b0b0c;color:#fff} }
/* Slightly tighter header */
.hero{
  padding-top:14px;
  padding-bottom:4px;
}

/* Reduce section gaps + padding a touch */
.app-main{ padding-top:8px; }
.card{ margin:8px 0; padding:14px; }          /* was 12px/16px */
.grid{ gap:8px; }                              /* was 12px */
.action-row{ margin-top:6px; gap:8px; }       /* was 10px/10px */
.cta-wrap{ gap:8px; }                         /* was 12px */
.chips{ gap:4px; margin-top:6px; }            /* was 6px/8px */
.home-row{ margin-top:6px; gap:6px; }         /* was 10px/8px */

/* Keep a little more breathing room on wider screens */
@media (min-width: 740px) {
  .card { margin:10px 0; padding:16px; }
  .grid { gap:10px; }
}

/* --- Colored buttons & chips for "needed" actions --- */
:root{
  --ok:#1db954;           /* success */
  --warn:#f0ad4e;         /* warning */
  --danger:#ff4d4f;       /* danger */
  --accent2:#7aa2ff;      /* secondary/accent */
}

/* base already defined: .btn { ... } */
.btn--primary{ background:linear-gradient(90deg,var(--grad1),var(--grad2)); color:#fff; }
.btn--success{ background:var(--ok); color:#000; font-weight:800; }
.btn--warning{ background:var(--warn); color:#000; font-weight:800; }
.btn--danger{  background:var(--danger); color:#fff; font-weight:800; }
.btn--accent{  background:var(--accent2); color:#000; font-weight:800; }

.btn.is-disabled,
[aria-disabled="true"]{
  opacity:.55; pointer-events:none; filter:saturate(.2);
}

/* Gentle attention pulse when something needs doing */
.needs-attention{
  position:relative;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform:translateZ(0) scale(1); box-shadow:0 0 0 rgba(79,140,255,.0); }
  50%{ transform:translateZ(0) scale(1.03); box-shadow:0 0 24px rgba(79,140,255,.35); }
  100%{ transform:translateZ(0) scale(1); box-shadow:0 0 0 rgba(79,140,255,.0); }
}

/* Optional colored chips (for your header actions if you want) */
.chip--success{ background:var(--ok); color:#000; }
.chip--warning{ background:var(--warn); color:#000; }
.chip--accent{  background:var(--accent2); color:#000; }
.chip.is-disabled{ opacity:.55; pointer-events:none; filter:saturate(.2); }

/* Tighten spacing slightly so bold colors don’t feel crowded */
.card{ margin:8px 0; padding:14px; }
.grid{ gap:8px; }
/* SVGs inside FABs */
.fab svg{ width:24px; height:24px; fill:#fff }

/* Tooltip bubble */
.tooltip{
  position:fixed; z-index:4; pointer-events:none;
  padding:8px 10px; border-radius:10px; font-size:12px;
  background:rgba(0,0,0,.9); color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.4);
  transform:translate(-50%,-12px);
}
@media (prefers-color-scheme:light){
  .tooltip{ background:rgba(20,20,22,.95); color:#fff }
}
.tooltip::after{
  content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(0,0,0,.9);
}

/* Map container */
.map-wrap{ position:relative; }
#map{
  width:100%;
  height:60vh;                    /* simple, reliable height */
  min-height:360px;
  position:relative;
}