/* Shared Stratos Flight Deck visual system.
   Single source of truth: one token block per theme, one component layer per page. */

/* ── Consolidated surfaces ──────────────────────────────────────────
   Cards, inner tiles and tables are defined here exactly once. The page
   class names below are aliases of the primitives, so the existing
   markup keeps working without carrying a second copy of the surface. */

.s-card, .card, .stat, .stat-tile, .section, .ac-card, .ach-card,
.dep-arr-card, .wx-section, #apt-header {
  background:var(--ui);
  border:1px solid var(--line);
  border-radius:var(--s-radius-sm);
  box-shadow:none;
}

.s-card__head h2, .s-card__head h3,
.card-head h2, .card-head h3,
.wx-section h2, .section h2, .dep-arr-card h3 {
  color:var(--acc);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ac-stat, .detail-cell, .raw-metar, .wstat {
  background:var(--ui2);
  border:1px solid var(--line);
  border-radius:var(--s-radius-xs);
}

.s-table, table.data { width:100%; border-collapse:collapse; }
.s-table th, table.data th {
  position:sticky; top:0; z-index:1;
  padding:8px 10px; text-align:left;
  font-size:var(--s-fs-2xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut);
  background:var(--ui2); border-bottom:1px solid var(--line);
}
.s-table td, table.data td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.s-table tr:last-child td, table.data tr:last-child td { border-bottom:0; }
.s-table th.num, .s-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.s-table-wrap, .table-wrap {
  overflow:auto; border:1px solid var(--line);
  border-radius:var(--s-radius-sm); overscroll-behavior:contain;
}
html,body {
  font-family:"Bahnschrift","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  color:var(--txt);
  background:radial-gradient(ellipse at 48% -15%,rgba(121,201,187,.09),transparent 54%),var(--bg);
}
button,input,select,textarea { font:inherit; }
button {
  color:var(--txt);
  background:var(--ui2);
  border:1px solid var(--coast);
  border-radius:10px;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
button:hover:not(:disabled) { border-color:var(--acc); box-shadow:0 5px 16px rgba(0,0,0,.16); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(0); }
button.on { background:var(--acc); color:#092127; border-color:var(--acc); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--acc); outline-offset:3px;
}
a { color:var(--acc); }
::selection { background:rgba(121,201,187,.28); color:var(--txt); }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Map / flight deck */
#app { background:var(--bg); }
.box {
  background:var(--ui);
  border:1px solid var(--coast);
  box-shadow:0 14px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
}
#sb { background:var(--ui); border-color:var(--coast); box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
#sb span { color:var(--acc); }
#q { color:var(--txt); }
#q::placeholder { color:var(--mut); }
#st { background:var(--ui); border-color:var(--coast); color:var(--mut); letter-spacing:.045em; }
#res { background:var(--ui); border-color:var(--coast); box-shadow:0 18px 44px rgba(0,0,0,.28); }
#res div { border-color:rgba(145,168,177,.16); }
#res div:hover { background:rgba(121,201,187,.1); color:var(--txt); }
#tabs { background:var(--ui); border-color:var(--coast); box-shadow:0 12px 34px rgba(0,0,0,.24); }
.tab { color:var(--mut); border-radius:11px; }
.tab:hover:not(:disabled) { color:var(--txt); background:rgba(121,201,187,.08); box-shadow:none; }
.tab.act { color:var(--acc); background:rgba(121,201,187,.12); }
.tab b { font-family:"Segoe UI Symbol",system-ui,sans-serif; }
#fab .fab { color:var(--txt); background:var(--ui); border-color:var(--coast); border-radius:14px; box-shadow:0 9px 24px rgba(0,0,0,.24); }
#fab .fab:hover { color:var(--acc); border-color:var(--acc); }
#fab .fab.on { background:var(--acc); color:#092127; }
#lay { background:var(--ui); border-color:var(--coast); box-shadow:0 18px 44px rgba(0,0,0,.28); }
#lay b { color:var(--acc); letter-spacing:.12em; }
#sheet { background:var(--ui); border-color:var(--coast); box-shadow:0 18px 48px rgba(0,0,0,.28); }
#sheet::before { background:var(--acc); opacity:.6; }
#fc { background:var(--ui); border-color:var(--coast); box-shadow:0 14px 36px rgba(0,0,0,.25); }
.fh { letter-spacing:.11em; }
.fr { font-variant-numeric:tabular-nums; }
.pb { height:5px; }
.pb u { background:var(--route); }
.fg b,.mg b { font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.seg { background:rgba(145,168,177,.1); }
.seg button { color:var(--mut); }
.seg button.on { background:var(--acc); color:#092127; }
.chips span,.pill { border:1px solid rgba(145,168,177,.16); background:rgba(145,168,177,.1); }
.pill.on { color:var(--grn); background:rgba(130,207,173,.12); border-color:rgba(130,207,173,.25); }
code,pre { background:rgba(5,16,23,.72); border:1px solid rgba(145,168,177,.14); color:var(--acc); }
table td,table th { border-color:rgba(145,168,177,.18); }
#cv { background:var(--ui); border-color:var(--coast); }
#ci { background:var(--bg); }
#chart { background:var(--bg); }
#tel { background:var(--ui); border-color:var(--coast); }
@media(min-width:768px) {
  #tabs { width:84px; top:12px; bottom:12px; padding:14px 7px; border-radius:0 18px 18px 0; gap:6px; }
  #tabs::before {
    content:"S"; width:42px; height:42px; flex:0 0 42px; margin:0 auto 12px;
    display:grid; place-items:center; border:1px solid var(--coast); border-radius:14px;
    background:linear-gradient(150deg,rgba(121,201,187,.19),rgba(121,201,187,.035));
    color:var(--acc); font-size:19px; font-weight:900; letter-spacing:-.08em;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
  }
  .tab { min-height:48px; font-size:10px; }
}
@media(max-width:767px) {
  #tabs { left:8px; right:8px; bottom:8px; border:1px solid var(--coast); border-radius:17px; padding:5px 6px max(5px,env(safe-area-inset-bottom)); }
  .tab { min-width:0; padding:6px 1px; font-size:10px; }
  #sheet { border-radius:17px; }
}

/* Weather Center */
#topbar {
  background:rgba(8,21,29,.94); border-color:var(--coast);
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
#topbar a.home { letter-spacing:.08em; }
#topbar h1 { color:var(--acc); letter-spacing:.13em; }
#search-wrap {
  width:min(1080px,calc(100% - 32px)); margin:16px auto 0;
  padding:10px; border:1px solid var(--coast); border-radius:14px;
  background:var(--ui); box-shadow:0 10px 30px rgba(0,0,0,.13);
}
#icao-input,.dep-arr-input {
  background:#091821; border:1px solid var(--coast); border-radius:10px; color:var(--txt);
}
#search-btn { background:var(--acc); color:#092127; border-radius:10px; }
#recent-strip {
  width:min(1080px,calc(100% - 32px)); margin:6px auto 0; padding:4px 2px;
  background:transparent; border:0;
}
.rec-chip { background:var(--ui2); border-color:var(--coast); color:var(--mut); border-radius:8px; }
.rec-chip:hover { color:var(--acc); border-color:var(--acc); }
#main { max-width:1080px; padding:18px 16px 28px; }
.apt-id { color:var(--acc); font:800 clamp(30px,5vw,46px)/1 "Bahnschrift","Segoe UI Variable","Segoe UI",sans-serif; letter-spacing:.055em; }
.wstat b { color:var(--txt); font-variant-numeric:tabular-nums; }
.notice { background:rgba(121,201,187,.07); border-color:rgba(121,201,187,.22); }
.taf-period { border-color:var(--coast); }
.taf-period.active { border-color:var(--acc); }
.taf-period::before { background:var(--coast); }
.taf-period.active::before { background:var(--acc); box-shadow:0 0 0 4px rgba(121,201,187,.13); }
.rwy-row { border-color:rgba(145,168,177,.17); }
#bottom-nav {
  z-index:20; margin-top:auto; padding:7px 12px max(7px,env(safe-area-inset-bottom));
  background:rgba(8,21,29,.95); border:1px solid var(--coast); border-radius:15px;
  box-shadow:0 12px 34px rgba(0,0,0,.25); backdrop-filter:blur(18px);
}
.bnav-item { padding:7px 4px; border-radius:10px; transition:color .16s ease,background .16s ease; }
.bnav-item:hover { background:rgba(121,201,187,.08); text-decoration:none; color:var(--txt); }
.bnav-item.act { color:var(--acc); background:rgba(121,201,187,.1); }
@media(min-width:768px) {
  #bottom-nav { width:min(720px,calc(100% - 32px)); margin:8px auto 14px; }
}
@media(max-width:480px) {
  #search-wrap { width:calc(100% - 20px); margin-top:10px; }
  #recent-strip { width:calc(100% - 24px); }
  #main { padding:14px 12px 22px; }
  .wx-section { padding:14px; }
}

/* Pilot Logbook */
#live-bar {
  width:min(1080px,calc(100% - 32px)); margin:12px auto 0; border:1px solid rgba(121,201,187,.25);
  border-radius:10px; background:rgba(121,201,187,.08); color:var(--mut);
}
#live-state-label { color:var(--acc); letter-spacing:.08em; }
#tab-bar {
  width:min(1080px,calc(100% - 32px)); margin:12px auto 0; padding:5px;
  gap:4px; border:1px solid var(--coast); border-radius:13px; background:var(--ui);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.tab-btn { border:0; border-radius:9px; border-bottom:0; padding:10px 15px; }
.tab-btn:hover:not(:disabled) { background:rgba(121,201,187,.08); box-shadow:none; transform:none; }
.tab-btn.act { color:var(--acc); background:rgba(121,201,187,.12); box-shadow:inset 0 0 0 1px rgba(121,201,187,.16); }
#main { max-width:1080px; padding:18px 16px 30px; }
.stat-tile { position:relative; overflow:hidden; }
.stat-tile::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--acc); opacity:.7; }
.ach-prog { background:rgba(145,168,177,.2); }
#detail-inner { background:var(--bg); border-color:var(--coast); box-shadow:0 -18px 56px rgba(0,0,0,.36); }
#profile-section input,#profile-section textarea,#profile-section select { background:#091821; border-color:var(--coast); }
.avatar-circle { background:rgba(121,201,187,.12); color:var(--acc); }
.topbar-btn,.save-btn,.share-btn { border-radius:9px; }
.save-btn { background:var(--acc); color:#092127; }
.share-btn { background:var(--ui2); border-color:var(--coast); }
@media(min-width:768px) {
  #detail-panel.show { align-items:center; justify-content:center; padding:24px; }
  #detail-inner { width:min(760px,100%); max-height:84dvh; border:1px solid var(--coast); border-radius:16px; }
}
@media(max-width:560px) {
  #tab-bar,#live-bar { width:calc(100% - 20px); }
  #tab-bar { gap:2px; }
  .tab-btn { padding:9px 11px; font-size:12px; }
  #main { padding:14px 12px 22px; }
}

/* ── STRATOS / Flight-deck visual pass ────────────────────────────── */
:root {
  --bg:#0a1421;
  --land:#101d2b;
  --coast:#2c3f55;
  --grid:rgba(150,180,215,.12);
  --ap:#e7b36c;
  --nav:#86bdb1;
  --route:#e7b36c;
  --own:#df827a;
  --txt:#e4ecf5;
  --ui:#0d1927;
  --ui2:#132132;
  --mut:#8b9db3;
  --trf:#9dc0e0;
  --acc:#4d9fe8;
  --red:#df827a;
  --grn:#5ec99a;
  --warn:#e7b36c;
  --mag:#9fb0d8;
  --line:rgba(140,170,205,.16);
  --focus:#e7b36c;
  color-scheme:dark;
  font-family:"Segoe UI Variable Text","Bahnschrift","Segoe UI",system-ui,sans-serif;
  font-synthesis:none;
}
:root[data-theme="day"] {
  --bg:#e7ecf2; --land:#f2f5f8; --coast:#a9b8c7; --grid:rgba(54,78,76,.14);
  --ap:#9a5f20; --nav:#276f66; --route:#a76820; --own:#ac5550;
  --txt:#16222e; --ui:#f7f9fb; --ui2:#e8eef5; --mut:#5d6f82;
  --trf:#2c5d84; --acc:#1f6fb8; --red:#a33d3a; --grn:#2f7d55;
  --warn:#915711; --mag:#715884; --line:rgba(46,70,100,.18); --focus:#9a5f20;
  color-scheme:light;
}
:root[data-theme="night"] {
  --bg:#0a1421; --land:#101d2b; --coast:#2c3f55; --grid:rgba(150,180,215,.12);
  --ap:#e7b36c; --nav:#86bdb1; --route:#e7b36c; --own:#df827a;
  --txt:#e4ecf5; --ui:#0d1927; --ui2:#132132; --mut:#8b9db3;
  --trf:#9dc0e0; --acc:#4d9fe8; --red:#df827a; --grn:#5ec99a;
  --warn:#e7b36c; --mag:#9fb0d8; --line:rgba(140,170,205,.16); --focus:#e7b36c;
  color-scheme:dark;
}
:root[data-theme="contrast"] {
  --bg:#000; --land:#080808; --coast:#fff; --grid:rgba(255,255,255,.36);
  --ap:#ff0; --nav:#0ff; --route:#ff0; --own:#fff;
  --txt:#fff; --ui:#000; --ui2:#171717; --mut:#e6e6e6;
  --trf:#7f7; --acc:#ff0; --red:#ff7777; --grn:#7f7;
  --warn:#ff0; --mag:#f7f; --line:rgba(255,255,255,.55); --focus:#ff0;
  color-scheme:dark;
}

html,body { background:var(--bg); color:var(--txt); }
body { letter-spacing:.005em; }
button,input,select,textarea { font-family:inherit; }
button { border-radius:4px; box-shadow:none; }
button:hover:not(:disabled) { transform:none; box-shadow:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--focus); outline-offset:3px;
}
::selection { background:var(--acc); color:var(--bg); }

/* Map: a quiet chart field with compact instrument controls. */
#app { background:var(--bg); }
.box,#sb,#tabs,#lay,#fc,#sheet,#cv,#tel {
  background:var(--ui); border:1px solid var(--line); box-shadow:0 8px 22px rgba(0,0,0,.16);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
#sb { border-radius:4px; }
#sb span { color:var(--acc); }
#q { color:var(--txt); }
#q::placeholder { color:var(--mut); }
#st { border-color:var(--line); border-radius:3px; color:var(--mut); letter-spacing:.07em; text-transform:uppercase; }
#res,#lay { border-color:var(--line); border-radius:4px; box-shadow:0 12px 28px rgba(0,0,0,.24); }
#res div { border-color:var(--line); }
#res div:hover,#lay button:hover { background:var(--ui2); color:var(--txt); }
#tabs { border-radius:5px; }
.tab { border-radius:3px; letter-spacing:.025em; }
.tab.act { background:var(--ui2); color:var(--acc); box-shadow:inset 2px 0 var(--acc); }
#tabs::before { border-radius:3px; background:var(--ui2); box-shadow:none; }
#fab .fab { border-radius:4px; border-color:var(--line); box-shadow:0 6px 14px rgba(0,0,0,.16); }
#fab .fab.on { background:var(--acc); color:var(--bg); }
#lay b,.fh { color:var(--acc); letter-spacing:.12em; }
#sheet,#fc { border-radius:5px; }
#sheet::before { width:30px; height:2px; border-radius:0; background:var(--acc); }
.fr { font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.pb { background:var(--ui2); }
.pb u { background:repeating-linear-gradient(90deg,var(--route) 0 8px,transparent 8px 11px); }
.chips span,.pill { border-radius:3px; }
.pill.on { color:var(--grn); }
#chart { background:var(--bg); }
#cv { border-radius:4px; }
#ci { background:var(--bg); }
@media(min-width:768px) {
  #tabs { border-radius:0 5px 5px 0; }
  #tabs::before { border-radius:3px; }
}
@media(max-width:767px) {
  #tabs { border-radius:5px; }
}

/* Weather: report-first hierarchy, with airport code and raw observation up front. */
#app:has(#search-wrap) { background:var(--bg); }
#topbar,#bottom-nav {
  background:var(--ui); border-color:var(--line); box-shadow:0 6px 18px rgba(0,0,0,.13);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
#topbar { min-height:54px; }
#topbar a.home { font-size:17px; letter-spacing:.13em; }
#topbar a.home span { color:var(--acc); }
#topbar h1 { color:var(--mut); letter-spacing:.14em; font-size:11px; }
#search-wrap { background:var(--bg); border-color:var(--line); border-radius:0; box-shadow:none; }
#icao-input,.dep-arr-input { background:var(--ui); border-color:var(--line); border-radius:3px; }
#icao-input:focus,.dep-arr-input:focus { border-color:var(--acc); box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 22%,transparent); }
#search-btn { background:var(--acc); color:var(--bg); border-radius:3px; }
#recent-strip { border-bottom:1px solid var(--line); }
.rec-chip { border-radius:3px; background:var(--ui); border-color:var(--line); }
#main { max-width:1120px; }
.dep-arr-card { border-left:2px solid var(--acc); }
#apt-header { border-left:3px solid var(--acc); display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.apt-id { color:var(--acc); font-weight:750; letter-spacing:.025em; }
.apt-name { font-size:17px; font-weight:650; }
.apt-sub,.obs-time { color:var(--mut); }
.cat-badge { border-radius:3px; padding:4px 9px; font-size:11px; letter-spacing:.09em; }
.raw-metar { color:var(--acc); }
.wx-section { padding:16px 18px; }
.wx-section h2 { font-size:11px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.decoded-row { border-color:var(--line); }
.dec-label,.dec-unit { color:var(--mut); }
.dec-val,.wstat b { font-variant-numeric:tabular-nums; }
.wstat span { color:var(--mut); letter-spacing:.1em; }
.notice { border-color:var(--line); border-radius:3px; }
.taf-period { border-color:var(--line); border-radius:2px; }
.taf-period::before { background:var(--line); }
.taf-period.active { border-color:var(--acc); }
.taf-period.active::before { background:var(--acc); box-shadow:none; }
.rwy-row { border-color:var(--line); }
.rwy-id { font-variant-numeric:tabular-nums; }
#bottom-nav { border-radius:4px; }
.bnav-item { border-radius:3px; }
.bnav-item.act { color:var(--acc); background:var(--ui2); }
@media(min-width:768px) {
  #bottom-nav { max-width:760px; }
}
@media(max-width:520px) {
  #apt-header { grid-template-columns:auto 1fr; }
  .apt-right { grid-column:1/-1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
}

/* Logbook: flight records read as a ledger, with tabular instrument figures. */
#app:has(#tab-bar) { background:var(--bg); }
#tab-bar { background:var(--ui); border-color:var(--line); border-radius:4px; box-shadow:none; }
.tab-btn { border-radius:2px; letter-spacing:.055em; }
.tab-btn.act { color:var(--acc); background:var(--ui2); box-shadow:inset 0 -2px var(--acc); }
#live-bar { background:var(--ui2); border-color:var(--line); border-left:2px solid var(--grn); border-radius:3px; }
#live-state-label { color:var(--grn); letter-spacing:.09em; }
#main { max-width:1120px; }
.stat-tile { padding:14px 16px; }
.stat-tile::before { width:2px; opacity:1; }
.stat-tile b,.detail-cell b { font-variant-numeric:tabular-nums; letter-spacing:-.045em; }
.stat-tile span { letter-spacing:.12em; }
.section { padding:16px 18px; }
.flight-row { border-color:var(--line); }
.flight-row:hover { background:var(--ui2); }
.fl-badge { background:var(--ui2); border-color:var(--line); color:var(--acc); border-radius:2px; font-variant-numeric:tabular-nums; }
.fl-route { letter-spacing:.01em; }
.fl-right,.fl-right b { font-variant-numeric:tabular-nums; }
.ac-card { border-left:2px solid var(--line); }
.ac-card:hover { border-color:var(--acc); transform:none; }
.ach-card.earned { border-color:var(--warn); }
.ach-card.locked { opacity:.72; }
.ach-prog { background:var(--ui2); }
#detail-panel.show { background:rgba(0,0,0,.68); }
#detail-inner { background:var(--ui); border:1px solid var(--line); border-radius:4px; box-shadow:0 16px 42px rgba(0,0,0,.35); }
#profile-section input,#profile-section textarea,#profile-section select { background:var(--bg); border-color:var(--line); border-radius:3px; }
#profile-section label { color:var(--mut); letter-spacing:.04em; }
.avatar-circle { background:var(--ui2); color:var(--acc); border:1px solid var(--line); }
.topbar-btn,.share-btn { border-radius:3px; }
.save-btn { background:var(--acc); color:var(--bg); border-radius:3px; }
.share-btn { background:var(--ui2); border-color:var(--line); }
.pilot-header { border-bottom:1px solid var(--line); }
.empty-block { color:var(--mut); }
#bottom-nav { border-radius:4px; }
.bnav-item { border-radius:3px; }
.bnav-item.act { color:var(--acc); background:var(--ui2); }
@media(min-width:768px) {
  #detail-panel.show { padding:24px; }
  #detail-inner { width:min(760px,100%); max-height:84dvh; }
}
@media(max-width:560px) {
  #tab-bar { overflow-x:auto; }
  .tab-btn { flex:0 0 auto; }
  #main { padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}

/* ── Design system primitives ────────────────────────────────────────
   Shared across every page. Namespaced .s-* so nothing collides with
   the existing page selectors. Additive: no page rule is overridden. */

:root {
  /* Spacing: 4px base, 8 steps. Use these instead of ad-hoc pixel gaps. */
  --s-space-1:4px;  --s-space-2:8px;  --s-space-3:12px; --s-space-4:16px;
  --s-space-5:20px; --s-space-6:24px; --s-space-7:32px; --s-space-8:48px;
  /* Radii: one small, one default, one large, one pill. */
  --s-radius-xs:2px; --s-radius-sm:4px; --s-radius-md:6px; --s-radius-lg:10px; --s-radius-pill:999px;
  /* Elevation: two levels only, kept subtle so panels stay flat over the map. */
  --s-elev-1:0 2px 8px rgba(0,0,0,.14);
  --s-elev-2:0 12px 30px rgba(0,0,0,.24);
  /* Type scale, 1.18 ratio. */
  --s-fs-2xs:10px; --s-fs-xs:11px; --s-fs-sm:12px; --s-fs-md:14px;
  --s-fs-lg:16px; --s-fs-xl:20px; --s-fs-2xl:28px; --s-fs-3xl:36px;
  --s-lh-tight:1.15; --s-lh-body:1.5;
  /* Motion: two durations, one ease. Nothing longer than 160ms. */
  --s-dur-1:90ms; --s-dur-2:160ms; --s-ease:cubic-bezier(.2,.7,.3,1);
  --s-hairline:1px solid var(--line);
}

.s-num { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.s-muted { color:var(--mut); }
.s-row { display:flex; align-items:center; gap:var(--s-space-2); }
.s-row--wrap { flex-wrap:wrap; }

.s-card {
  background:var(--ui); border:1px solid var(--line); border-radius:var(--s-radius-sm);
  box-shadow:var(--s-elev-1);
}
.s-card__head {
  display:flex; align-items:center; gap:var(--s-space-2);
  padding:var(--s-space-3) var(--s-space-4);
  border-bottom:1px solid var(--line);
}
.s-card__head h2, .s-card__head h3 {
  margin:0; font-size:var(--s-fs-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
}
.s-card__body { padding:var(--s-space-4); }

.s-section-title {
  margin:0 0 var(--s-space-3); font-size:var(--s-fs-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut);
}

/* Buttons: one base, three intents, one size modifier. */
.s-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-space-2);
  min-height:36px; padding:0 var(--s-space-3);
  font:inherit; font-size:var(--s-fs-sm); font-weight:600;
  color:var(--txt); background:var(--ui2); border:1px solid var(--line);
  border-radius:var(--s-radius-sm); cursor:pointer;
  transition:background-color var(--s-dur-2) var(--s-ease), border-color var(--s-dur-2) var(--s-ease);
}
.s-btn:hover:not(:disabled) { border-color:var(--acc); }
.s-btn:disabled { opacity:.55; cursor:not-allowed; }
.s-btn--primary { background:var(--acc); border-color:var(--acc); color:var(--bg); }
.s-btn--primary:hover:not(:disabled) { background:color-mix(in srgb,var(--acc) 86%,#fff); border-color:var(--acc); }
.s-btn--ghost { background:transparent; }
.s-btn--danger { color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,transparent); background:transparent; }
.s-btn--sm { min-height:28px; padding:0 var(--s-space-2); font-size:var(--s-fs-xs); }

.s-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; font-size:var(--s-fs-2xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--s-radius-xs);
  color:var(--mut); background:var(--ui2);
}
.s-badge--ok { color:var(--grn); border-color:color-mix(in srgb,var(--grn) 40%,transparent); }
.s-badge--warn { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); }
.s-badge--bad { color:var(--red); border-color:color-mix(in srgb,var(--red) 40%,transparent); }

.s-label {
  display:block; margin-bottom:6px; font-size:var(--s-fs-2xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
}
.s-field {
  width:100%; box-sizing:border-box; min-height:36px; padding:0 var(--s-space-3);
  font:inherit; font-size:var(--s-fs-md); color:var(--txt);
  background:var(--ui2); border:1px solid var(--line); border-radius:var(--s-radius-sm);
}
.s-field:focus {
  border-color:var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 22%,transparent);
  outline:none;
}
.s-field::placeholder { color:var(--mut); }

/* KPI block: the standard "one big number, one label" unit. */
.s-kpi { padding:var(--s-space-3) var(--s-space-4); }
.s-kpi__value {
  display:block; font-size:var(--s-fs-2xl); font-weight:750; line-height:var(--s-lh-tight);
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.s-kpi__label {
  display:block; margin-top:2px; font-size:var(--s-fs-2xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
}

/* States: every list gets one of these rather than a blank area. */
.s-empty, .s-error {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-space-2); padding:var(--s-space-7) var(--s-space-4);
  text-align:center; color:var(--mut); font-size:var(--s-fs-sm);
}
.s-error { color:var(--red); }
.s-error .s-btn { color:var(--txt); }
.s-skeleton {
  border-radius:var(--s-radius-xs);
  background:linear-gradient(90deg,var(--ui2) 0%,color-mix(in srgb,var(--ui2) 55%,var(--line)) 50%,var(--ui2) 100%);
  background-size:200% 100%;
  animation:s-skel 1.4s linear infinite;
}
@keyframes s-skel { from { background-position:100% 0; } to { background-position:-100% 0; } }

.s-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-space-2);
  padding:var(--s-space-3) var(--s-space-4);
  border-bottom:1px solid var(--line);
}
.s-scroll-x { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }

/* iPhone: respect the home indicator and the notch on every page. */
.s-safe-bottom { padding-bottom:calc(var(--s-space-3) + env(safe-area-inset-bottom,0px)); }
.s-safe-top { padding-top:calc(var(--s-space-3) + env(safe-area-inset-top,0px)); }

@media(max-width:560px) {
  .s-card__body, .s-kpi, .s-toolbar { padding:var(--s-space-3); }
  .s-kpi__value { font-size:var(--s-fs-xl); }
}
@media(prefers-reduced-motion:reduce) {
  .s-skeleton { animation:none; background:var(--ui2); }
  .s-btn { transition:none; }
}