/* ACPV People Counter - foglio di stile
   Palette categorica validata per il daltonismo (validate_palette.js):
   piani = slot 1/2/3 blu/arancio/acqua, PASS su tutte le coppie in
   entrambi i temi. Entrate/uscite = coppia divergente blu/rosso.
   Il totale edificio NON usa uno slot categorico: e' inchiostro di
   enfasi, perche' il viola provato inizialmente risultava
   indistinguibile dal blu in protanopia (deltaE 1.9). */

/* ============================================================
   DESIGN TOKENS
   Palette categorica validata con validate_palette.js:
   piani = slot 1/2/3 (blu, arancio, acqua) - PASS all-pairs in
   entrambi i temi. Entrate/uscite = coppia divergente blu/rosso.
   ============================================================ */
.viz-root, body {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --plane:     #f4f4f1;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --grid:     #e1e0d9;
  --baseline: #c3c2b7;
  --border:   rgba(11,11,11,0.10);
  --border-strong: rgba(11,11,11,0.18);

  --floor-1: #2a78d6;   /* Basement */
  --floor-2: #eb6834;   /* Ground   */
  --floor-3: #1baf7a;   /* First    */

  --flow-in:  #2a78d6;
  --flow-out: #e34948;

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;

  --seq-0: #eef4fd; --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec;
  --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;

  --emphasis: #0b0b0b;          /* totale edificio: ink, non uno slot categorico */
  --emphasis-wash: rgba(11,11,11,0.07);
  --track: rgba(11,11,11,0.08);
  --shadow: 0 1px 2px rgba(11,11,11,.05), 0 8px 24px -12px rgba(11,11,11,.18);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root,
  :root:where(:not([data-theme="light"])) body {
    color-scheme: dark;
    --surface-1: #14161b; --surface-2: #191c22; --plane: #0c0e12;
    --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
    --grid: #24272e; --baseline: #383b42;
    --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18);
    --floor-1: #3987e5; --floor-2: #d95926; --floor-3: #199e70;
    --flow-in: #3987e5; --flow-out: #e66767;
    --seq-0: #1a1d24; --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf;
    --seq-4: #2a78d6; --seq-5: #3987e5; --seq-6: #6da7ec; --seq-7: #9ec5f4;
    --emphasis: #ffffff; --emphasis-wash: rgba(255,255,255,0.09);
    --track: rgba(255,255,255,0.10);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] .viz-root, :root[data-theme="dark"] body {
  color-scheme: dark;
  --surface-1: #14161b; --surface-2: #191c22; --plane: #0c0e12;
  --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781;
  --grid: #24272e; --baseline: #383b42;
  --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18);
  --floor-1: #3987e5; --floor-2: #d95926; --floor-3: #199e70;
  --flow-in: #3987e5; --flow-out: #e66767;
  --seq-0: #1a1d24; --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf;
  --seq-4: #2a78d6; --seq-5: #3987e5; --seq-6: #6da7ec; --seq-7: #9ec5f4;
  --emphasis: #ffffff; --emphasis-wash: rgba(255,255,255,0.09);
  --track: rgba(255,255,255,0.10);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-0.011em; }
button { font: inherit; color: inherit; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:20px;
  padding: 0 28px; height: 60px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:baseline; gap:10px; }
.brand-mark { font-weight:650; font-size:15px; letter-spacing:.02em; }
.brand-sep { color: var(--text-muted); }
.brand-site { color: var(--text-secondary); font-size:13px; }
.topbar-spacer { flex:1; }

.live-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px 5px 9px; border-radius:999px;
  border:1px solid var(--border); background: var(--surface-2);
  font-size:12px; color: var(--text-secondary);
}
.live-dot {
  width:7px; height:7px; border-radius:50%; background: var(--status-good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-good) 60%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-good) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; min-width:34px; padding:0 11px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:8px; cursor:pointer; font-size:13px;
  color: var(--text-secondary); transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.user-chip { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-secondary); }
.avatar {
  width:28px; height:28px; border-radius:50%;
  background: var(--emphasis-wash); border:1px solid var(--border);
  display:grid; place-items:center; font-size:11px; font-weight:650; color:var(--text-primary);
}

/* ---------- Layout ---------- */
.wrap { max-width: 1560px; margin:0 auto; padding: 22px 28px 72px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; flex-wrap:wrap; }
.page-title { font-size:22px; }
.page-sub { color: var(--text-secondary); font-size:13px; margin-top:3px; }

/* ---------- Coverage strip ---------- */
.coverage {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 16px; margin-bottom:16px;
  background: var(--surface-1); border:1px solid var(--border);
  border-left:3px solid var(--status-warning);
  border-radius:10px; font-size:13px; color: var(--text-secondary);
}
.coverage b { color: var(--text-primary); font-weight:600; }
.cov-item { display:flex; align-items:center; gap:7px; }
.cov-sep { width:1px; height:16px; background: var(--border); }
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.badge svg { width:12px; height:12px; }
.badge-good     { color: var(--status-good);     background: color-mix(in srgb, var(--status-good) 13%, transparent);     border-color: color-mix(in srgb, var(--status-good) 30%, transparent); }
.badge-warning  { color: var(--status-warning);  background: color-mix(in srgb, var(--status-warning) 15%, transparent);  border-color: color-mix(in srgb, var(--status-warning) 34%, transparent); }
.badge-serious  { color: var(--status-serious);  background: color-mix(in srgb, var(--status-serious) 15%, transparent);  border-color: color-mix(in srgb, var(--status-serious) 34%, transparent); }
.badge-critical { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 14%, transparent); border-color: color-mix(in srgb, var(--status-critical) 32%, transparent); }
.badge-neutral  { color: var(--text-secondary);  background: var(--emphasis-wash); border-color: var(--border); }
:root[data-theme="light"] .badge-warning { color:#8a5d00; }
:root[data-theme="light"] .badge-serious { color:#9a4a22; }

/* ---------- Filter row (una sola riga, sopra tutto) ---------- */
.filters {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:20px;
}
.seg {
  display:inline-flex; padding:3px; gap:2px;
  background: var(--surface-1); border:1px solid var(--border); border-radius:10px;
}
.seg button {
  border:0; background:transparent; cursor:pointer;
  padding:6px 13px; border-radius:7px; font-size:13px; color: var(--text-secondary);
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] { background: var(--emphasis-wash); color: var(--text-primary); font-weight:600; }
.filters-label { font-size:12px; color: var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-right:2px; }
.filters-spacer { flex:1; }
.stamp { font-size:12px; color: var(--text-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-1); border:1px solid var(--border);
  border-radius:14px; box-shadow: var(--shadow);
}
.card-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 18px 0;
}
.card-title { font-size:14px; font-weight:600; }
.card-sub { font-size:12px; color: var(--text-muted); margin-top:2px; max-width:62ch; }
.card-body { padding:12px 18px 18px; }

/* ---------- Hero ---------- */
.hero-grid {
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap:16px; margin-bottom:16px;
}
@media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; } }

.hero { padding:22px 24px 20px; display:flex; flex-direction:column; gap:20px; justify-content:space-between; }

/* distribuzione per piano: barra segmentata con gap 2px in colore superficie */
.dist { display:flex; flex-direction:column; gap:9px; }
.dist-head { display:flex; align-items:center; gap:7px; font-size:12px; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.dist-bar { display:flex; gap:2px; height:14px; }
.dist-bar span { height:100%; border-radius:3px; transition: flex-grow .5s cubic-bezier(.4,0,.2,1); }
.dist-legend { display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; color: var(--text-secondary); }
.dist-legend .li { display:flex; align-items:center; gap:7px; }
.dist-legend b { color: var(--text-primary); font-weight:650; }

/* strisce allarme */
.alert-row {
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  padding:11px 16px; margin-bottom:10px;
  border:1px solid var(--border); border-radius:10px;
  background: var(--surface-1); font-size:13px; color: var(--text-secondary);
}
.alert-row b { color: var(--text-primary); font-weight:600; }
.alert-row.lv-warning  { border-left:3px solid var(--status-warning); }
.alert-row.lv-critical { border-left:3px solid var(--status-critical); }
.alert-spacer { flex:1; }
.alert-meta { font-size:12px; color: var(--text-muted); }
.hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.hero-label { font-size:12.5px; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.hero-figure {
  font-size:76px; line-height:1; font-weight:650; letter-spacing:-0.035em;
  margin-top:10px; color: var(--text-primary);
  /* cifre proporzionali: mai tabular su un numero grande e isolato */
}
.hero-unit { font-size:17px; font-weight:500; color: var(--text-secondary); margin-left:10px; letter-spacing:0; }
.hero-note { font-size:12.5px; color: var(--text-muted); margin-top:8px; display:flex; align-items:center; gap:6px; }

.meter { display:flex; flex-direction:column; gap:7px; }
.meter-track {
  position:relative; height:10px; border-radius:999px; background: var(--track); overflow:hidden;
}
.meter-fill { height:100%; border-radius:999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.meter-mark { position:absolute; top:-3px; bottom:-3px; width:1.5px; background: var(--baseline); }
.meter-legend { display:flex; justify-content:space-between; font-size:11.5px; color: var(--text-muted); }
.meter-legend b { color: var(--text-secondary); font-weight:600; }

.kpi-col { display:grid; grid-template-rows: repeat(3,1fr); gap:16px; }
.stat { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.stat-label { font-size:13px; color: var(--text-primary); font-weight:600; }
.stat-value { font-size:36px; font-weight:650; letter-spacing:-0.03em; line-height:1; flex:none; }
.stat-delta { font-size:12px; margin-top:5px; color: var(--text-muted); display:flex; align-items:center; gap:5px; }
.stat-arrow { font-weight:700; }
.up   { color: var(--flow-in); }
.down { color: var(--flow-out); }

/* ---------- Floor cards ---------- */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:26px 0 12px; flex-wrap:wrap; }
.section-title { font-size:16px; }
.section-note { font-size:12.5px; color: var(--text-muted); }

.floors { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width: 1080px) { .floors { grid-template-columns:1fr; } }

.floor {
  padding:0; overflow:hidden; cursor:pointer; text-align:left; width:100%;
  border:1px solid var(--border); background: var(--surface-1);
  border-radius:14px; box-shadow: var(--shadow);
  transition: border-color .18s, transform .18s;
  position:relative;
}
.floor:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.floor:focus-visible { outline:2px solid var(--floor-c); outline-offset:2px; }
.floor[aria-expanded="true"] { border-color: var(--floor-c); }
.floor-accent { height:3px; background: var(--floor-c); }
.floor-in { padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; }
.floor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.floor-name { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.floor-key { width:10px; height:10px; border-radius:3px; background: var(--floor-c); flex:none; }
.floor-code { font-size:11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top:2px; }
.floor-val { display:flex; align-items:baseline; gap:9px; }
.floor-num { font-size:40px; font-weight:650; letter-spacing:-0.032em; line-height:1; }
.floor-cap { font-size:13px; color: var(--text-muted); }
.floor-flows { display:flex; gap:18px; font-size:12.5px; color: var(--text-secondary); }
.floor-flows span { display:flex; align-items:center; gap:6px; }
.flow-key { width:9px; height:2.5px; border-radius:2px; flex:none; }
.floor-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; color: var(--text-muted); }
.chev { transition: transform .2s; flex:none; }
.floor[aria-expanded="true"] .chev { transform: rotate(180deg); }

.drill { display:none; margin-top:-2px; }
.drill.open { display:block; }
.drill-card { border-top-left-radius:0; border-top-right-radius:0; margin-top:14px; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th, table.data td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.data th {
  font-size:11px; font-weight:600; color: var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--baseline);
  position:sticky; top:0; background: var(--surface-1);
}
table.data td.num { text-align:right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--emphasis-wash); }
table.data tbody tr:last-child td { border-bottom:0; }
.cam-key { display:inline-flex; align-items:center; gap:8px; }
.dot { width:7px; height:7px; border-radius:50%; flex:none; }

/* ---------- Charts ---------- */
.charts { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.charts .span-2 { grid-column: span 2; }
@media (max-width: 1080px) { .charts { grid-template-columns:1fr; } .charts .span-2 { grid-column: span 1; } }

.chart-tools { display:flex; align-items:center; gap:8px; flex:none; }
.mini-toggle {
  display:inline-flex; padding:2px; gap:2px;
  background: var(--plane); border:1px solid var(--border); border-radius:8px;
}
.mini-toggle button { border:0; background:transparent; cursor:pointer; padding:4px 9px; border-radius:6px; font-size:11.5px; color: var(--text-muted); }
.mini-toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-primary); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12); }

.legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color: var(--text-secondary); margin: 2px 0 6px; }
.legend-item { display:flex; align-items:center; gap:7px; }
.legend-line { width:14px; height:2.5px; border-radius:2px; flex:none; }
.legend-rect { width:11px; height:11px; border-radius:3px; flex:none; }

.plot { width:100%; display:block; overflow:visible; }
.plot text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.axis-label { font-size:11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.gridline { stroke: var(--grid); stroke-width:1; shape-rendering:crispEdges; }
.baseline-rule { stroke: var(--baseline); stroke-width:1; shape-rendering:crispEdges; }
.dlabel { font-size:11.5px; font-weight:600; fill: var(--text-primary); }
.dlabel-sub { font-size:11px; fill: var(--text-secondary); }
.crosshair { stroke: var(--baseline); stroke-width:1; pointer-events:none; }
.hit { fill: transparent; cursor: crosshair; }

.tooltip {
  position:fixed; z-index:200; pointer-events:none; opacity:0;
  transform: translate(-50%, -100%) translateY(-12px);
  background: var(--surface-2); border:1px solid var(--border-strong);
  border-radius:10px; padding:9px 11px; min-width:150px;
  box-shadow: 0 4px 8px rgba(0,0,0,.14), 0 14px 36px -14px rgba(0,0,0,.5);
  transition: opacity .1s;
}
.tooltip.on { opacity:1; }
.tt-head { font-size:11px; color: var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.tt-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; }
.tt-name { display:flex; align-items:center; gap:7px; font-size:12px; color: var(--text-secondary); }
.tt-val { font-size:13.5px; font-weight:650; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.heat-scale { display:flex; align-items:center; gap:9px; font-size:11.5px; color: var(--text-muted); margin-top:10px; }
.heat-ramp { display:flex; gap:2px; }
.heat-ramp i { width:20px; height:9px; border-radius:2px; display:block; }

.footnote { font-size:12px; color: var(--text-muted); margin-top:12px; line-height:1.55; }
.footnote b { color: var(--text-secondary); font-weight:600; }

.info {
  display:inline-grid; place-items:center; width:14px; height:14px; flex:none;
  border-radius:50%; border:1px solid var(--border-strong);
  font-size:9.5px; font-weight:700; color: var(--text-muted); cursor:help;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.demo-ribbon {
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--status-warning) 32%, transparent);
  color: var(--status-warning); font-size:11.5px; font-weight:600;
}
:root[data-theme="light"] .demo-ribbon { color:#8a5d00; }

/* ==========================================================
   Aggiunte dell'applicazione reale (assenti nel mockup)
   ========================================================== */

/* --- pagina di login --- */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; background: var(--plane); }
.auth-card { width:100%; max-width:400px; padding:32px; }
.auth-brand { display:flex; align-items:baseline; gap:9px; margin-bottom:6px; }
.auth-title { font-size:19px; margin-bottom:4px; }
.auth-sub { font-size:13px; color: var(--text-secondary); margin-bottom:26px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font-size:12.5px; color: var(--text-secondary); font-weight:600; }
.field input, .field select {
  height:40px; padding:0 12px; border-radius:9px; font: inherit;
  background: var(--surface-2); color: var(--text-primary);
  border:1px solid var(--border); outline:none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--floor-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--floor-1) 22%, transparent);
}
.field.inline { flex-direction:row; align-items:center; gap:9px; }
.field.inline input[type=checkbox] { width:16px; height:16px; }
.btn {
  height:40px; padding:0 18px; border-radius:9px; border:1px solid transparent;
  background: var(--floor-1); color:#fff; font-weight:600; font-size:14px;
  cursor:pointer; transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-ghost { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); }
.btn-danger { background: var(--status-critical); }
.btn-sm { height:32px; padding:0 12px; font-size:13px; }
.form-error {
  padding:10px 13px; border-radius:9px; font-size:13px; margin-bottom:16px;
  color: var(--status-critical);
  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--status-critical) 30%, transparent);
}
.form-ok {
  padding:10px 13px; border-radius:9px; font-size:13px; margin-bottom:16px;
  color: var(--status-good);
  background: color-mix(in srgb, var(--status-good) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--status-good) 30%, transparent);
}

/* --- stato connessione --- */
.live-dot.off { background: var(--status-critical); animation:none; }
.live-dot.wait { background: var(--status-warning); animation:none; }
.stale .card { opacity:.55; transition: opacity .2s; }

/* --- amministrazione --- */
.admin-grid { display:grid; gap:16px; }
.admin-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:14px; align-items:end; }
.nav-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.nav-tabs button {
  border:0; background:transparent; cursor:pointer; padding:10px 16px;
  font-size:14px; color: var(--text-secondary); border-bottom:2px solid transparent;
}
.nav-tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--floor-1); font-weight:600; }
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  padding:11px 18px; border-radius:10px; font-size:13.5px; z-index:300;
  background: var(--surface-2); border:1px solid var(--border-strong);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.6); opacity:0; transition: opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.on { opacity:1; transform:translateX(-50%) translateY(-6px); }
.toast.err { border-color: color-mix(in srgb, var(--status-critical) 45%, transparent); }
.empty { padding:34px; text-align:center; color: var(--text-muted); font-size:13.5px; }
.topnav-link {
  font-size:13px; color: var(--text-secondary); text-decoration:none;
  padding:6px 11px; border-radius:8px;
}
.topnav-link:hover { background: var(--emphasis-wash); color: var(--text-primary); }