/* =====================================================================
   theme.css (2.12.0): one visual system for the whole app.
   Dark glass cards, one accent (#A0BDD2) for every active state,
   aligned controls, and calm hover feedback. Loads after style.css.
   ===================================================================== */
:root{
  --ft-accent:#A0BDD2;
  --ft-accent-soft:rgba(160,189,210,.16);
  --ft-accent-line:rgba(160,189,210,.45);
  --ft-glass:rgba(255,255,255,.035);
  --ft-glass-strong:rgba(255,255,255,.06);
  --ft-line:1px solid rgba(255,255,255,.08);
  --ft-blur:blur(18px) saturate(140%);
  --ft-radius:24px;
  --ft-ease:cubic-bezier(.2,.7,.2,1);
}
/* ---------- Glass cards: subtle border, soft blur, clean padding ---------- */
.st-card,.panel,.stat,.gstage,.hero,.hm-side,.sk-kpi,.pc-card,.nt-card,.wx-day,.pc-item,.wx-panel,.garden-panel,.focus-map,.week-weather,.card,.pm-side>.sound,.pm-side>.stats,.pc-show a{
  border:var(--ft-line);
  border-radius:var(--ft-radius);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:var(--ft-blur);
  backdrop-filter:var(--ft-blur);
  box-shadow:0 22px 48px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .3s var(--ft-ease),box-shadow .3s var(--ft-ease),border-color .3s var(--ft-ease);
}
@media (hover:hover){
  .panel:hover,.stat:hover,.pc-card:hover,.wx-day:hover,.sk-kpi:hover,.garden-panel:hover{
    transform:translateY(-2px);
    border-color:rgba(160,189,210,.22);
    box-shadow:0 26px 52px -30px rgba(0,0,0,.7),0 0 0 1px rgba(160,189,210,.08);
  }
}
.st-card,.panel,.card,.pc-cat,.wx-panel{min-width:0;overflow-wrap:anywhere}
/* ---------- One accent for every active state ---------- */
.navbtn[aria-current="page"],
.mode[aria-selected="true"],
[aria-pressed="true"]{
  background:linear-gradient(135deg,#d4e4f0,var(--ft-accent))!important;
  color:#0d1318!important;
  border-color:transparent!important;
  box-shadow:0 10px 26px -12px rgba(160,189,210,.55)!important;
}
.navbtn[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--ft-accent),0 10px 26px -14px rgba(160,189,210,.45)!important; }
.navbtn[aria-current="page"] svg{ color:#0d1318; }
/* ---------- Icons use the accent ---------- */
.navbtn svg,.nav svg{ color:inherit; }
.stat-ico,.wx-hero-ico{ color:var(--ft-accent); }
/* ---------- Buttons: calm, precise, animated ---------- */
button{ transition:background-color .2s var(--ft-ease),color .2s var(--ft-ease),border-color .2s var(--ft-ease),box-shadow .25s var(--ft-ease),transform .18s var(--ft-ease); }
button:active:not(:disabled){ transform:scale(.97); }
.gm-btn,.wx-go,.st-btn,.wx-save,.td-use{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }
/* ---------- Weather: aligned search row and stacked details ---------- */
.wx-search{ align-items:stretch; }
.wx-search input{ height:42px; box-sizing:border-box; }
.wx-go{ height:42px; min-height:42px; }
.wx-body{ gap:16px; }
.wx-now{ align-items:center; }
.wx-days{ align-items:stretch; }
.wx-day{ justify-content:center; }
/* ---------- Text: no collisions ---------- */
p,li,small,span,b,h1,h2,h3{ overflow-wrap:anywhere; }
.lead,.gh .lead{ line-height:1.55; max-width:62ch; }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
.panel-head h2,.st-card h2{ margin-bottom:10px; }