/* ============================================================================
   Personal Health Agent — "Neon Grid"

   Dark-only by design. The old light theme was removed in favour of a glow
   intensity switch (data-glow="full" | "calm") — a light mode fights the
   whole direction. Everything animated is gated behind prefers-reduced-motion.
   ============================================================================ */

:root {
  /* Base */
  --bg:#05060A;
  --bg-2:#08090F;
  --surface:#0D0F1A;
  --surface-2:#12162374;
  --surface-3:#161B2B;
  --border:#1E2333;
  --border-strong:#2C3450;

  /* Neon */
  --magenta:#FF2E88;
  --cyan:#00E5FF;
  --acid:#7CFF3D;
  --violet:#8B5CF6;
  --orange:#FF7A2F;

  --magenta-soft:rgba(255,46,136,0.14);
  --cyan-soft:rgba(0,229,255,0.12);
  --acid-soft:rgba(124,255,61,0.12);
  --violet-soft:rgba(139,92,246,0.14);

  /* Type */
  --text:#E8ECFF;
  --muted:#8A93B8;
  --muted-2:#5C6488;

  --danger:#FF4D6A;
  --danger-soft:rgba(255,77,106,0.14);
  --warn:#FFC53D;
  --ok:var(--acid);

  --radius:14px;
  --radius-sm:10px;
  --sidebar-w:252px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Glow strength — dialled down by data-glow="calm" */
  --glow-a:0.55;
  --glow-b:0.30;
  --scan-op:0.045;
  --grid-op:0.85;
}

:root[data-glow="calm"] {
  --glow-a:0.22;
  --glow-b:0.10;
  --scan-op:0;
  --grid-op:0.18;
}

* { box-sizing:border-box; }
html, body { height:100%; }

body {
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
}

/* Ambient wash — two soft neon pools behind everything. */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(60vw 50vh at 12% -5%, rgba(139,92,246,0.16), transparent 70%),
    radial-gradient(55vw 45vh at 95% 8%, rgba(255,46,136,0.12), transparent 70%),
    radial-gradient(70vw 60vh at 50% 110%, rgba(0,229,255,0.09), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.scanlines {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,var(--scan-op)) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; font-size:15px; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--violet); }
::-webkit-scrollbar-track { background:transparent; }

::selection { background:var(--magenta); color:#fff; }

/* ---------- Layout ----------
   The shell is a fixed-height viewport so the inner panes do the scrolling.
   Without this the document scrolls and the chat composer can't stay pinned. */
.app { display:flex; height:100dvh; overflow:hidden; position:relative; z-index:2; }

.sidebar {
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg, rgba(13,15,26,0.92), rgba(5,6,10,0.92));
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:20px 14px 16px;
  backdrop-filter:blur(12px);
}

.brand { display:flex; align-items:center; gap:11px; padding:0 8px 20px; }
.brand h1 { font-size:15px; margin:0; letter-spacing:0.02em; font-weight:700; }
.brand p { margin:2px 0 0; font-size:11px; color:var(--muted-2); letter-spacing:0.14em; text-transform:uppercase; font-family:var(--mono); }

.logo {
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--violet), var(--magenta));
  box-shadow:0 0 18px rgba(255,46,136,var(--glow-a));
  flex:0 0 34px;
}
.logo svg { width:19px; height:19px; stroke:#fff; }

#navDesktop { display:flex; flex-direction:column; gap:3px; }

.nav-item {
  display:flex; align-items:center; gap:11px;
  width:100%; padding:10px 12px;
  background:transparent; border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--muted); font-size:14px; font-weight:500;
  text-align:left; position:relative;
  transition:color .16s, background .16s, border-color .16s;
}
.nav-item svg { width:18px; height:18px; flex:0 0 18px; transition:transform .2s, filter .2s; }
.nav-item:hover { color:var(--text); background:var(--surface-3); }
.nav-item:hover svg { transform:translateX(1px) scale(1.06); }
.nav-item.active {
  color:#fff;
  background:linear-gradient(90deg, var(--violet-soft), transparent);
  border-color:var(--border-strong);
}
.nav-item.active::before {
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--magenta));
  border-radius:2px;
  box-shadow:0 0 10px rgba(0,229,255,var(--glow-a));
}
.nav-item.active svg { filter:drop-shadow(0 0 5px rgba(0,229,255,var(--glow-a))); }

.nav-spacer { flex:1; }
.nav-foot { font-size:11px; color:var(--muted-2); line-height:1.5; padding:12px 10px 0; border-top:1px solid var(--border); }

.main { flex:1; min-width:0; display:flex; flex-direction:column; height:100%; min-height:0; }

.topbar {
  display:none; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(5,6,10,0.85); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:15px; margin:0; font-weight:700; letter-spacing:0.02em; }

.view { display:none; flex:1; min-height:0; flex-direction:column; }
.view.active { display:flex; }
.view-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.container { max-width:860px; margin:0 auto; padding:26px 22px 60px; }

/* ---------- Common bits ---------- */
.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.ph-text { flex:1; min-width:220px; }
.ph-text h2 { margin:0 0 5px; font-size:22px; letter-spacing:-0.01em; font-weight:700; }
.ph-text p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }

.section-label {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted-2); font-family:var(--mono);
  margin:26px 0 11px;
}
.section-label.sm { margin:0 0 9px; }
.section-label::after {
  content:''; flex:1; height:1px; order:-1;
  background:linear-gradient(90deg, var(--border-strong), transparent);
  margin-left:10px; order:99;
}

.card {
  background:linear-gradient(180deg, rgba(18,22,35,0.72), rgba(13,15,26,0.72));
  border:1px solid var(--border);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.card.pad { padding:16px; }
.card::before {
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,var(--glow-b)), transparent);
}

.stack { display:flex; flex-direction:column; gap:10px; }

.muted { color:var(--muted); }
.muted.sm, .sm.muted { font-size:12.5px; }
.center { text-align:center; }
.ok-text { color:var(--acid); }
.hint { color:var(--muted-2); font-weight:400; }

.row-actions { display:flex; gap:9px; align-items:center; margin-top:4px; }
.row-actions.wrap { flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px;
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600;
  transition:transform .12s, box-shadow .16s, border-color .16s, background .16s;
}
.btn svg { width:15px; height:15px; }
.btn:hover { border-color:var(--violet); box-shadow:0 0 16px rgba(139,92,246,var(--glow-b)); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

.btn.primary {
  background:linear-gradient(120deg, var(--violet), var(--magenta));
  border-color:transparent; color:#fff;
  box-shadow:0 0 20px rgba(255,46,136,var(--glow-b));
}
.btn.primary:hover { box-shadow:0 0 28px rgba(255,46,136,var(--glow-a)); }

.btn.danger { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; box-shadow:0 0 18px rgba(255,77,106,var(--glow-a)); }

.btn.subtle { background:transparent; border-color:var(--border); color:var(--muted); }
.btn.subtle:hover { color:var(--text); border-color:var(--border-strong); }

.btn.sm { padding:7px 11px; font-size:12.5px; }
.btn.sm svg { width:14px; height:14px; }

.icon-btn {
  width:36px; height:36px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--muted);
  transition:color .16s, border-color .16s, box-shadow .16s;
  flex:0 0 36px;
}
.icon-btn svg { width:17px; height:17px; }
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); }
.icon-btn.accent { color:var(--cyan); border-color:rgba(0,229,255,0.35); }
.icon-btn.accent:hover { box-shadow:0 0 16px rgba(0,229,255,var(--glow-a)); border-color:var(--cyan); }

/* ---------- Pills ---------- */
.pill {
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  font-family:var(--mono);
  border:1px solid var(--border-strong); color:var(--muted);
  vertical-align:middle;
}
.pill.active, .pill.ok { background:var(--acid-soft); color:var(--acid); border-color:rgba(124,255,61,0.4); }
.pill.monitoring, .pill.warn { background:rgba(255,197,61,0.12); color:var(--warn); border-color:rgba(255,197,61,0.4); }
.pill.resolved, .pill.tag { background:var(--surface-3); color:var(--muted); }
.pill.bad { background:var(--danger-soft); color:var(--danger); border-color:rgba(255,77,106,0.4); }
.pill.rx { background:var(--cyan-soft); color:var(--cyan); border-color:rgba(0,229,255,0.35); }
.pill.supplement { background:var(--acid-soft); color:var(--acid); border-color:rgba(124,255,61,0.35); }
.pill.working { background:var(--violet-soft); color:var(--violet); border-color:rgba(139,92,246,0.4); animation:pulse 1.4s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }

/* ---------- Glitch heading ---------- */
.glitch { position:relative; display:inline-block; }
.glitch::before, .glitch::after {
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  clip-path:inset(0 0 0 0);
  pointer-events:none;
}
.glitch::before { color:var(--cyan); transform:translate(-1.5px,0); opacity:.7; animation:glitchA 3.4s infinite steps(1); }
.glitch::after  { color:var(--magenta); transform:translate(1.5px,0); opacity:.7; animation:glitchB 3.9s infinite steps(1); }

@keyframes glitchA {
  0%,92%,100% { clip-path:inset(0 0 100% 0); }
  93% { clip-path:inset(12% 0 62% 0); }
  95% { clip-path:inset(48% 0 30% 0); }
  97% { clip-path:inset(72% 0 8% 0); }
}
@keyframes glitchB {
  0%,88%,100% { clip-path:inset(0 0 100% 0); }
  89% { clip-path:inset(30% 0 52% 0); }
  92% { clip-path:inset(66% 0 18% 0); }
}

/* ---------- Today ---------- */
.today-hero {
  position:relative; overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:34px 22px 30px;
  margin-bottom:20px;
  min-height:150px;
  background:linear-gradient(140deg, rgba(139,92,246,0.22), rgba(5,6,10,0.55) 55%, rgba(255,46,136,0.16));
  box-shadow:inset 0 0 60px -20px rgba(139,92,246,0.5);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.hero-text { position:relative; z-index:2; }
.hero-date { margin:0 0 6px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan); }
.today-hero h2 { margin:0; font-size:30px; font-weight:800; letter-spacing:-0.02em; }
.hero-actions { position:relative; z-index:2; }

/* Perspective grid horizon — a synthwave plane receding toward the top.
   transform-origin is the box bottom, so the box must sit flush to the hero's
   bottom edge or the rotated plane lands below the clip and vanishes. */
.grid-horizon {
  position:absolute; left:-30%; right:-30%; bottom:0; height:72%;
  opacity:var(--grid-op);
  background-image:
    linear-gradient(to right, rgba(0,229,255,0.85) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,46,136,0.7) 1px, transparent 1px);
  background-size:58px 58px;
  transform:perspective(200px) rotateX(66deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 45%, transparent 90%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 45%, transparent 90%);
  animation:gridRoll 6s linear infinite;
  pointer-events:none;
}
@keyframes gridRoll { from { background-position:0 0 } to { background-position:0 58px } }

/* Sleep is the headline metric and carries a ring, so it takes the full first
   row; HRV / resting HR / steps share the row beneath. */
.vitals { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.vitals > .vital:first-child { grid-column:1 / -1; }

.vital {
  background:linear-gradient(180deg, rgba(18,22,35,0.78), rgba(13,15,26,0.78));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 15px 15px;
  position:relative; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.vital:hover { transform:translateY(-2px); }
.vital::after {
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.65;
}
.vital.a-violet  { color:var(--violet); }
.vital.a-cyan    { color:var(--cyan); }
.vital.a-magenta { color:var(--magenta); }
.vital.a-acid    { color:var(--acid); }
.vital:hover { box-shadow:0 0 26px -6px currentColor; border-color:currentColor; }

.v-head { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; }
.v-head svg { width:14px; height:14px; }
.v-head span { color:var(--muted); }

.v-body { display:flex; align-items:center; gap:14px; margin-top:12px; }
.v-figures { min-width:0; flex:1; }
.v-value {
  font-size:26px; font-weight:800; letter-spacing:-0.02em; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap;
}
.v-sub { font-size:11.5px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; line-height:1.5; }

.delta { font-family:var(--mono); font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:999px; }
.delta.good { color:var(--acid); background:var(--acid-soft); }
.delta.bad  { color:var(--orange); background:rgba(255,122,47,0.14); }
.delta.flat { color:var(--muted); background:var(--surface-3); }
.delta.none { color:var(--muted-2); }

/* Rings */
.ring-wrap { position:relative; flex:0 0 auto; }
.ring { transform:rotate(-90deg); display:block; }
.ring-track { stroke:var(--border); }
.ring-val { transition:stroke-dashoffset 1.1s cubic-bezier(.22,.9,.28,1); filter:drop-shadow(0 0 6px currentColor); }
.ring-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring-center b { display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.ring-center i { display:block; font-style:normal; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); font-family:var(--mono); }

/* Sleep stages */
.stage-card { padding:14px 15px; margin-top:12px; }
.stage-bar { display:flex; height:9px; border-radius:6px; overflow:hidden; background:var(--surface-3); }
.stage-bar i { display:block; height:100%; }
.stage-bar i.deep  { background:linear-gradient(90deg,#4C1D95,#8B5CF6); }
.stage-bar i.rem   { background:linear-gradient(90deg,#8B5CF6,#00E5FF); }
.stage-bar i.light { background:linear-gradient(90deg,#00E5FF,#1E3A5F); }
.stage-bar i.awake { background:#2C3450; }
.stage-key { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--muted); }
.stage-key span { display:flex; align-items:center; gap:5px; }
.stage-key i { width:8px; height:8px; border-radius:2px; display:block; }
.stage-key i.deep { background:#8B5CF6; }
.stage-key i.rem { background:#00E5FF; }
.stage-key i.light { background:#1E3A5F; }

/* Sparklines */
.spark-card { padding:14px 15px; margin-top:12px; }
.spark-row { display:flex; align-items:center; gap:12px; padding:5px 0; }
.spark-label { font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); width:48px; flex:0 0 48px; }
.spark { flex:1; height:26px; min-width:0; }
.spark-val { font-family:var(--mono); font-size:12px; color:var(--text); width:62px; text-align:right; flex:0 0 62px; }

/* Briefing */
.briefing-card { padding:18px 20px; }
.briefing-idle { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 10px; text-align:center; color:var(--muted); }
.briefing-idle svg { width:24px; height:24px; color:var(--violet); }
.briefing-foot { margin-top:14px; padding-top:11px; border-top:1px solid var(--border); font-size:11px; color:var(--muted-2); font-family:var(--mono); letter-spacing:0.08em; }
.briefing-foot.live { display:flex; align-items:center; gap:7px; color:var(--violet); }
.briefing-foot.live svg { width:13px; height:13px; animation:spin 2.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }

/* Today's stack */
.stack-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; font-size:12.5px; color:var(--muted); }
.streak { display:flex; align-items:center; gap:5px; color:var(--acid); font-family:var(--mono); font-size:11.5px; }
.streak svg { width:13px; height:13px; }

.dose-list { display:flex; flex-direction:column; }
.dose {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 16px; background:transparent; border:0;
  border-top:1px solid var(--border); text-align:left; color:var(--text);
  transition:background .16s;
}
.dose:hover { background:var(--surface-3); }
.dose-check {
  width:22px; height:22px; flex:0 0 22px; border-radius:7px;
  border:1.5px solid var(--border-strong); display:grid; place-items:center;
  transition:all .18s;
}
.dose-check svg { width:13px; height:13px; opacity:0; transform:scale(.5); transition:all .18s; }
.dose.on .dose-check { background:linear-gradient(135deg, var(--acid), var(--cyan)); border-color:transparent; box-shadow:0 0 14px rgba(124,255,61,var(--glow-a)); }
.dose.on .dose-check svg { opacity:1; transform:scale(1); color:#05060A; }
.dose-body b { display:block; font-size:14px; font-weight:600; }
.dose.on .dose-body b { color:var(--muted); text-decoration:line-through; }
.dose-body i { display:block; font-style:normal; font-size:11.5px; color:var(--muted-2); margin-top:2px; }

/* Daily strip (Trends) */
.daily-strip { display:flex; align-items:flex-end; gap:5px; height:70px; margin:16px 0 8px; }
.ds-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.ds-bar { width:100%; min-height:3px; border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--cyan), var(--violet)); box-shadow:0 0 8px rgba(0,229,255,var(--glow-b)); }
.ds-col span { font-family:var(--mono); font-size:9px; color:var(--muted-2); }

/* ---------- Records ---------- */
.record {
  display:flex; align-items:flex-start; gap:12px;
  background:linear-gradient(180deg, rgba(18,22,35,0.6), rgba(13,15,26,0.6));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 15px;
  transition:border-color .18s, box-shadow .18s;
}
.record:hover { border-color:var(--border-strong); box-shadow:0 0 22px -10px var(--violet); }
.record.clickable { cursor:pointer; }
.r-body { flex:1; min-width:0; }
.r-title { font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.r-sub { font-size:12.5px; color:var(--muted); margin-top:4px; }
.r-notes { font-size:12.5px; color:var(--muted-2); margin-top:8px; white-space:pre-wrap; line-height:1.55; }
.r-notes.err { color:var(--danger); }
.r-actions { display:flex; gap:6px; flex:0 0 auto; }

.ctx-toggle { display:flex; align-items:center; gap:9px; margin-top:11px; font-size:12.5px; color:var(--muted); }

.banner {
  display:flex; gap:13px; align-items:flex-start;
  background:linear-gradient(120deg, var(--violet-soft), transparent);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px;
}
.b-icon { color:var(--violet); }
.b-icon svg { width:20px; height:20px; }
.b-text { font-size:13px; line-height:1.55; }
.b-text b { font-size:13.5px; }
.b-text span { color:var(--muted); }

.empty {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:38px 20px; text-align:center;
  color:var(--muted-2); font-size:13.5px;
  border:1px dashed var(--border-strong); border-radius:var(--radius);
}
.empty svg { width:26px; height:26px; opacity:.6; }
.empty p { margin:0; font-size:12.5px; max-width:360px; }
.empty.neon { border-color:rgba(139,92,246,0.3); background:radial-gradient(60% 80% at 50% 0%, var(--violet-soft), transparent 70%); }
.empty.sm { padding:24px 16px; }

.notice { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.55; }
.notice svg { width:17px; height:17px; flex:0 0 17px; color:var(--warn); margin-top:2px; }

.error-note { display:flex; gap:9px; align-items:flex-start; color:var(--danger); font-size:13.5px; }
.error-note svg { width:16px; height:16px; flex:0 0 16px; margin-top:2px; }

.kv { display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted-2); width:150px; flex:0 0 150px; font-size:12.5px; }

.mono-note {
  font-family:var(--mono); font-size:11.5px; line-height:1.6;
  color:var(--muted-2); margin-top:13px;
  padding:10px 12px; background:rgba(0,0,0,0.25);
  border-left:2px solid var(--border-strong); border-radius:0 8px 8px 0;
}
.mono-note code { color:var(--cyan); }
.mono-note b { color:var(--acid); }

/* ---------- Forms ---------- */
.field { margin-bottom:13px; }
.field label { display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px; letter-spacing:0.04em; }
.field input, .field select, .field textarea {
  width:100%; padding:10px 12px;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--text);
  transition:border-color .16s, box-shadow .16s;
}
.field textarea { min-height:86px; resize:vertical; line-height:1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,0.12), 0 0 18px rgba(0,229,255,var(--glow-b));
}
.field input.copyable { cursor:pointer; color:var(--cyan); font-family:var(--mono); font-size:12.5px; }
.field-note { font-size:11.5px; color:var(--muted-2); line-height:1.55; margin-top:7px; }
.field-note b { color:var(--warn); font-weight:700; }
.field-note code { font-family:var(--mono); color:var(--cyan); font-size:11px; }
.field-row { display:flex; gap:11px; }
.field-row .field { flex:1; }

.toggle { position:relative; display:inline-block; flex:0 0 auto; }
.toggle input { position:absolute; opacity:0; width:0; height:0; }
.toggle .track {
  display:block; width:38px; height:21px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border-strong);
  transition:all .2s; cursor:pointer;
}
.toggle .knob {
  position:absolute; top:3px; left:3px;
  width:15px; height:15px; border-radius:50%;
  background:var(--muted); transition:all .2s;
}
.toggle input:checked + .track { background:linear-gradient(90deg, var(--violet), var(--magenta)); border-color:transparent; box-shadow:0 0 14px rgba(255,46,136,var(--glow-b)); }
.toggle input:checked + .track .knob { left:20px; background:#fff; }

/* ---------- Dropzone ---------- */
.dropzone {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:34px 20px; margin-bottom:18px;
  border:1.5px dashed var(--border-strong); border-radius:var(--radius);
  cursor:pointer; text-align:center;
  background:radial-gradient(70% 100% at 50% 0%, var(--cyan-soft), transparent 70%);
  transition:border-color .2s, box-shadow .2s;
}
.dropzone:hover, .dropzone.drag { border-color:var(--cyan); box-shadow:0 0 30px -8px var(--cyan); }
.dropzone svg { width:26px; height:26px; color:var(--cyan); }
.dz-title { font-size:14.5px; font-weight:600; }
.dz-sub { font-size:12.5px; color:var(--muted-2); }

.doc-text { max-height:58vh; overflow:auto; }

/* ---------- Chat ---------- */
.chat-head {
  display:flex; align-items:center; gap:10px;
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(5,6,10,0.8); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:15;
}
.ch-title {
  flex:1; min-width:0; font-size:14px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}

.chat-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.chat-inner { max-width:800px; margin:0 auto; padding:24px 20px 10px; display:flex; flex-direction:column; gap:20px; }

.chat-welcome { text-align:center; padding:44px 10px 20px; }
.wlogo {
  width:54px; height:54px; margin:0 auto 18px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--violet), var(--magenta));
  box-shadow:0 0 34px rgba(255,46,136,var(--glow-a));
}
.wlogo svg { width:27px; height:27px; stroke:#fff; }
.chat-welcome h2 { font-size:25px; margin:0 0 9px; font-weight:800; letter-spacing:-0.02em; }
.chat-welcome p { color:var(--muted); font-size:13.5px; max-width:460px; margin:0 auto 26px; line-height:1.6; }

.suggestions { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:10px; max-width:640px; margin:0 auto; }
.suggestion {
  text-align:left; padding:13px 14px;
  background:linear-gradient(180deg, rgba(18,22,35,0.7), rgba(13,15,26,0.7));
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--muted); font-size:12.5px; line-height:1.5;
  transition:border-color .18s, box-shadow .18s, transform .18s, color .18s;
}
.suggestion b {
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:6px;
}
.suggestion:hover { color:var(--text); border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 0 24px -8px var(--cyan); }

.msg { display:flex; gap:12px; }
.avatar {
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.06em;
}
.msg.user .avatar { background:var(--surface-3); color:var(--muted); border:1px solid var(--border-strong); }
.msg.assistant .avatar { background:linear-gradient(135deg, var(--violet), var(--magenta)); box-shadow:0 0 14px rgba(255,46,136,var(--glow-b)); }
.msg.assistant .avatar svg { width:16px; height:16px; stroke:#fff; }

.bubble { flex:1; min-width:0; }
.who { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.msg.assistant .who { color:var(--magenta); }

.msg .content { font-size:14.5px; line-height:1.68; }
.msg.user .content { white-space:pre-wrap; }

.content.cursor::after {
  content:''; display:inline-block; width:8px; height:15px;
  background:var(--cyan); margin-left:3px; vertical-align:-2px;
  animation:blink .9s steps(1) infinite;
  box-shadow:0 0 8px var(--cyan);
}
@keyframes blink { 0%,50% { opacity:1 } 51%,100% { opacity:0 } }

.msg-atts { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.att-img { max-width:200px; max-height:200px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); display:block; }

/* Composer */
.composer-wrap {
  border-top:1px solid var(--border);
  background:rgba(5,6,10,0.88); backdrop-filter:blur(14px);
  padding:12px 20px calc(env(safe-area-inset-bottom) + 14px);
}
.composer-inner { max-width:800px; margin:0 auto; }

.ctx-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted-2); font-family:var(--mono);
  letter-spacing:0.04em; margin-bottom:8px;
}
.ctx-chip svg { width:12px; height:12px; color:var(--cyan); }

.attach-tray { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
.chip-file {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 8px 5px 6px; max-width:200px;
  background:var(--surface-3); border:1px solid var(--border-strong);
  border-radius:9px; font-size:11.5px; color:var(--muted);
}
.chip-file img { width:22px; height:22px; object-fit:cover; border-radius:5px; flex:0 0 22px; }
.chip-file svg { width:14px; height:14px; flex:0 0 14px; color:var(--cyan); }
.chip-file > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-file button { background:none; border:0; color:var(--muted-2); display:grid; place-items:center; padding:0; }
.chip-file button svg { width:12px; height:12px; }
.chip-file button:hover { color:var(--danger); }
.chip-file.static { background:transparent; }

.composer {
  display:flex; align-items:flex-end; gap:8px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:7px 8px 7px 10px;
  transition:border-color .18s, box-shadow .18s;
}
.composer:focus-within { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,0.1), 0 0 26px -10px var(--cyan); }

.attach-btn {
  width:32px; height:32px; flex:0 0 32px; border-radius:9px;
  background:transparent; border:0; color:var(--muted-2);
  display:grid; place-items:center; transition:color .16s;
}
.attach-btn svg { width:17px; height:17px; }
.attach-btn:hover { color:var(--cyan); }

#chatInput {
  flex:1; min-width:0; border:0; background:transparent; color:var(--text);
  resize:none; outline:none; padding:7px 0; max-height:170px; line-height:1.55;
}
#chatInput::placeholder { color:var(--muted-2); }

.send-btn {
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  border:0; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--violet), var(--magenta));
  color:#fff; transition:box-shadow .18s, opacity .18s;
}
.send-btn svg { width:16px; height:16px; grid-area:1/1; }
.send-btn .i-stop { display:none; }
.send-btn.stop .i-send { display:none; }
.send-btn.stop .i-stop { display:block; }
.send-btn:hover:not(:disabled) { box-shadow:0 0 20px rgba(255,46,136,var(--glow-a)); }
.send-btn:disabled { opacity:.35; }

.disclaimer { text-align:center; font-size:10.5px; color:var(--muted-2); margin-top:9px; font-family:var(--mono); letter-spacing:0.03em; }

/* ---------- History drawer ---------- */
.drawer { position:fixed; inset:0; z-index:60; pointer-events:none; }
.drawer.open { pointer-events:auto; }
.drawer-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,0.6);
  opacity:0; transition:opacity .22s; backdrop-filter:blur(2px);
}
.drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel {
  position:absolute; top:0; bottom:0; left:0; width:min(340px, 86vw);
  background:linear-gradient(180deg, #0B0D16, #05060A);
  border-right:1px solid var(--border-strong);
  transform:translateX(-100%); transition:transform .26s cubic-bezier(.22,.9,.28,1);
  display:flex; flex-direction:column;
  box-shadow:14px 0 50px rgba(0,0,0,0.5);
}
.drawer.open .drawer-panel { transform:translateX(0); }

.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 16px) 14px 12px 18px;
  border-bottom:1px solid var(--border);
}
.drawer-head h3 { margin:0; font-size:15px; font-weight:700; }

.drawer-search { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border); }
.drawer-search svg { width:15px; height:15px; color:var(--muted-2); flex:0 0 15px; }
.drawer-search input {
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); font-size:13.5px;
}
.drawer-search input::placeholder { color:var(--muted-2); }

.drawer-list { flex:1; overflow-y:auto; padding:10px 10px 24px; }
.hist-group { margin-bottom:16px; }
.hist-label {
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted-2); padding:0 8px 7px;
}
.hist-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .16s;
  border:1px solid transparent;
}
.hist-item:hover { background:var(--surface-3); }
.hist-item.active { background:linear-gradient(90deg, var(--violet-soft), transparent); border-color:var(--border-strong); }
.hi-body { flex:1; min-width:0; }
.hi-body b { display:block; font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hi-body i { display:block; font-style:normal; font-size:10.5px; color:var(--muted-2); margin-top:2px; font-family:var(--mono); }
.hi-actions { display:flex; gap:2px; opacity:0; transition:opacity .16s; flex:0 0 auto; }
.hist-item:hover .hi-actions, .hist-item.active .hi-actions { opacity:1; }
.hi-actions button {
  width:26px; height:26px; display:grid; place-items:center;
  background:none; border:0; color:var(--muted-2); border-radius:6px;
}
.hi-actions button svg { width:13px; height:13px; }
.hi-actions button:hover { color:var(--text); background:var(--surface); }
.hi-actions button[data-delchat]:hover { color:var(--danger); }

/* ---------- Report live ---------- */
.report-live { background:linear-gradient(180deg, rgba(18,22,35,0.75), rgba(13,15,26,0.75)); border:1px solid var(--border-strong); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; }
.rl-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:14px; color:var(--muted); }
.rl-head svg { width:16px; height:16px; color:var(--violet); }
.badge-live { font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--magenta); animation:pulse 1.4s ease-in-out infinite; }

/* ---------- Prose ---------- */
.prose { font-size:14.5px; line-height:1.68; }
.prose > *:first-child { margin-top:0; }
.prose > *:last-child { margin-bottom:0; }
.prose h2 {
  font-size:14px; margin:22px 0 9px; font-weight:700;
  color:var(--cyan); font-family:var(--mono);
  letter-spacing:0.1em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--border);
}
.prose h3 { font-size:14px; margin:18px 0 7px; font-weight:700; color:var(--text); }
.prose p { margin:0 0 12px; }
.prose ul, .prose ol { margin:0 0 12px; padding-left:20px; }
.prose li { margin-bottom:6px; }
.prose li::marker { color:var(--magenta); }
.prose strong { color:#fff; font-weight:650; }
.prose em { color:var(--muted); }
.prose code {
  font-family:var(--mono); font-size:12.5px;
  background:rgba(0,0,0,0.4); padding:2px 5px; border-radius:5px; color:var(--acid);
}
.prose pre { background:rgba(0,0,0,0.4); padding:13px; border-radius:var(--radius-sm); overflow-x:auto; border:1px solid var(--border); }
.prose pre code { background:none; padding:0; }
.prose blockquote { margin:0 0 12px; padding-left:13px; border-left:2px solid var(--violet); color:var(--muted); }
.prose a { color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(0,229,255,0.35); }
.prose a:hover { border-bottom-color:var(--cyan); }
.prose table { width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13px; display:block; overflow-x:auto; }
.prose th, .prose td { padding:7px 10px; border:1px solid var(--border); text-align:left; }
.prose th { background:var(--surface-3); font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.prose hr { border:0; border-top:1px solid var(--border); margin:18px 0; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,0.68); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open { display:flex; }
.modal {
  width:100%; max-width:520px; max-height:88vh;
  background:linear-gradient(180deg, #11141F, #0A0C14);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  display:flex; flex-direction:column;
  box-shadow:0 26px 70px rgba(0,0,0,0.6), 0 0 60px -30px var(--violet);
  animation:modalIn .2s cubic-bezier(.22,.9,.28,1);
}
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.98) } to { opacity:1; transform:none } }
.modal-head { padding:17px 20px 13px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:0; font-size:15.5px; font-weight:700; }
.modal-body { padding:18px 20px; overflow-y:auto; flex:1; }
.modal-foot { padding:13px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:9px; }
.modal-note { margin:4px 0; color:var(--muted); font-size:13.5px; line-height:1.6; }
.modal-meta { font-size:11.5px; color:var(--muted-2); margin-bottom:13px; font-family:var(--mono); }

/* ---------- Toast ---------- */
#toast {
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 84px);
  transform:translate(-50%, 18px);
  background:#11141F; border:1px solid var(--border-strong);
  color:var(--text); padding:11px 17px; border-radius:11px;
  font-size:13px; font-weight:500; z-index:100;
  opacity:0; pointer-events:none; transition:all .24s cubic-bezier(.22,.9,.28,1);
  max-width:min(440px, 90vw); text-align:center; line-height:1.5;
  box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 24px -12px var(--cyan);
}
#toast.show { opacity:1; transform:translate(-50%, 0); }
#toast.err { border-color:var(--danger); box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 24px -10px var(--danger); }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { display:none; }
.more-sheet { display:none; }

@media (max-width: 860px) {
  .sidebar { display:none; }
  .topbar { display:flex; }
  .container { padding:20px 16px 90px; }
  .chat-inner { padding:20px 16px 10px; }
  .composer-wrap { padding:12px 16px calc(env(safe-area-inset-bottom) + 76px); }
  .today-hero h2 { font-size:25px; }

  .bottom-nav {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(5,6,10,0.92); backdrop-filter:blur(18px);
    border-top:1px solid var(--border);
    padding:7px 4px calc(env(safe-area-inset-bottom) + 7px);
  }
  .bottom-nav button {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:0; color:var(--muted-2); font-size:9.5px;
    font-family:var(--mono); letter-spacing:0.05em; padding:5px 2px;
    position:relative; transition:color .16s;
  }
  .bottom-nav button svg { width:19px; height:19px; transition:transform .2s, filter .2s; }
  .bottom-nav button.active { color:var(--cyan); }
  .bottom-nav button.active svg { transform:translateY(-1px); filter:drop-shadow(0 0 6px rgba(0,229,255,var(--glow-a))); }
  .bottom-nav button.active::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:22px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--cyan), var(--magenta));
    box-shadow:0 0 8px var(--cyan);
  }

  .more-sheet { display:block; position:fixed; inset:0; z-index:70; pointer-events:none; }
  .more-sheet.open { pointer-events:auto; }
  .ms-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); opacity:0; transition:opacity .22s; }
  .more-sheet.open .ms-backdrop { opacity:1; }
  .ms-panel {
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(180deg, #0B0D16, #05060A);
    border-top:1px solid var(--border-strong);
    border-radius:18px 18px 0 0;
    padding:10px 12px calc(env(safe-area-inset-bottom) + 18px);
    transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.9,.28,1);
  }
  .more-sheet.open .ms-panel { transform:translateY(0); }
  .ms-handle { width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:4px auto 12px; }

  /* Two columns leaves the third small card orphaned on its own row —
     let it span instead so the grid reads as deliberate. */
  .vitals { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vitals > .vital:last-child { grid-column:1 / -1; }
  .v-value { font-size:22px; }
  .kv { flex-direction:column; gap:3px; }
  .kv .k { width:auto; flex:none; }
  .field-row { flex-direction:column; gap:0; }
  .page-head .btn { width:100%; justify-content:center; }
}

@media (max-width: 400px) {
  .vitals { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vitals > .vital:first-child { grid-column:1 / -1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .grid-horizon { animation:none; }
  .glitch::before, .glitch::after { display:none; }
  .scanlines { display:none; }
}

/* ===========================================================================
   Storage durability panel
   =========================================================================== */
.warn-text { color: var(--warn); }

.section-label.sub {
  font-size: 11px;
  margin-top: 18px;
  opacity: .8;
}

.kv-grid {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.kv-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface);
}
.kv-grid span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.kv-grid code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  text-align: right;
  word-break: break-all;
}

.snap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.snap-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snap-meta b { font-size: 12.5px; color: var(--text); }
.snap-meta span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
}

/* ===========================================================================
   UV index card
   Band colour drives the whole card via --uv, so the surface, glow, marker
   and numerals all shift together as the index climbs.
   =========================================================================== */
.uv-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  --uv: var(--acid);
  --uv-soft: rgba(124, 255, 61, 0.14);
}
.uv-card.uv-low       { --uv: #7CFF3D; --uv-soft: rgba(124,255,61,.14); }
.uv-card.uv-moderate  { --uv: #FFC53D; --uv-soft: rgba(255,197,61,.15); }
.uv-card.uv-high      { --uv: #FF7A2F; --uv-soft: rgba(255,122,47,.16); }
.uv-card.uv-veryhigh  { --uv: #FF2E88; --uv-soft: rgba(255,46,136,.16); }
.uv-card.uv-extreme   { --uv: #B14DFF; --uv-soft: rgba(177,77,255,.20); }

/* Top rule lives on the card's own background, not ::before — the HUD corner
   brackets need ::before, and a filled 16px box is what you get otherwise. */
.uv-card {
  background-image: linear-gradient(90deg, transparent, var(--uv), transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top center;
}
.uv-glow {
  position: absolute;
  top: -55%; right: -22%;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--uv-soft) 0%, transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

.uv-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.uv-head svg { width: 15px; height: 15px; color: var(--uv); }
.uv-refresh { margin-left: auto; width: 26px; height: 26px; }
.uv-refresh svg { width: 13px; height: 13px; }

.uv-body {
  display: flex; align-items: center; gap: 18px;
  margin: 14px 0 6px;
  position: relative;
}
.uv-readout { flex: 0 0 auto; text-align: center; min-width: 92px; }
.uv-value {
  font-size: 46px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--uv);
  text-shadow: 0 0 calc(22px * var(--glow-a)) var(--uv);
}
.uv-band {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uv);
  padding: 3px 8px;
  border: 1px solid var(--uv);
  border-radius: 999px;
  display: inline-block;
  background: var(--uv-soft);
}
.uv-detail { min-width: 0; }
.uv-advice { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.uv-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.uv-meta b { color: var(--text); font-weight: 600; }
.uv-meta .dim { color: var(--muted-2); }

/* Scale ------------------------------------------------------------------ */
.uv-scale { position: relative; margin-top: 14px; padding-bottom: 14px; }
.uv-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #7CFF3D 0%, #FFC53D 27%, #FF7A2F 52%, #FF2E88 72%, #B14DFF 100%);
  opacity: .82;
}
.uv-marker {
  position: absolute; top: -4px;
  transform: translateX(-50%);
  transition: left .5s cubic-bezier(.22,1,.36,1);
}
.uv-marker i {
  display: block; width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--uv);
  box-shadow: 0 0 calc(12px * var(--glow-a)) var(--uv);
}
.uv-ticks {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--muted-2);
}

.uv-foot {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.uv-foot .dim { color: var(--muted-2); }

.uv-empty { margin-top: 10px; }
.uv-empty p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

.uv-skeleton { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.uv-skeleton i {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-3), var(--border), var(--surface-3));
  background-size: 200% 100%;
  animation: uvShimmer 1.3s ease-in-out infinite;
}
.uv-skeleton i:first-child { height: 40px; width: 55%; }
@keyframes uvShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .uv-marker { transition: none; }
  .uv-skeleton i { animation: none; }
}

/* ===========================================================================
   Sync diagnostics
   =========================================================================== */
.diag-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.diag-row {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-2);
  border-radius: var(--radius-sm);
}
.diag-ok       { border-left-color: var(--acid); }
.diag-empty    { border-left-color: var(--muted-2); }
.diag-unmapped { border-left-color: var(--warn); }
.diag-error    { border-left-color: var(--danger); }

.diag-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.diag-top b { font-size: 13px; color: var(--text); }
.diag-badge {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid currentColor;
}
.diag-ok .diag-badge       { color: var(--acid); }
.diag-empty .diag-badge    { color: var(--muted-2); }
.diag-unmapped .diag-badge { color: var(--warn); }
.diag-error .diag-badge    { color: var(--danger); }

.diag-stats {
  margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.diag-stats code { color: var(--cyan); }
.diag-msg { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.diag-sample { margin-top: 8px; }
.diag-sample summary {
  cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; color: var(--cyan);
}
.diag-sample pre {
  margin: 8px 0 0;
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 10px; line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 220px;
  overflow: auto;
}

/* ===========================================================================
   Body composition
   =========================================================================== */
.bm-hero { position: relative; overflow: hidden; padding: 16px; }
.bm-hero-glow {
  position: absolute; top: -60%; left: -10%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.12) 0%, transparent 68%);
  filter: blur(16px); pointer-events: none;
}
.bm-stats {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px;
}
@media (min-width: 560px) { .bm-stats { grid-template-columns: repeat(4, 1fr); } }
.bm-stat { display: flex; flex-direction: column; gap: 4px; position: relative; }
.bm-stat span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.bm-stat b {
  font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.bm-stat b em {
  font-style: normal; font-size: 13px; font-weight: 500;
  color: var(--muted); margin-left: 2px;
}
.bm-derived {
  font-style: normal;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); opacity: .85;
}

.bm-split {
  display: flex; height: 8px; margin-top: 16px;
  border-radius: 999px; overflow: hidden; background: var(--surface-3);
}
.bm-split i { display: block; height: 100%; }
.bm-split i.lean {
  background: linear-gradient(90deg, var(--acid), var(--cyan));
  box-shadow: 0 0 calc(10px * var(--glow-a)) var(--acid);
}
.bm-split i.fat { flex: 1; background: var(--magenta); opacity: .55; }
.bm-split-key {
  display: flex; gap: 16px; margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.bm-split-key i {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 5px;
}
.bm-split-key i.lean { background: var(--acid); }
.bm-split-key i.fat  { background: var(--magenta); }
.bm-asof {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-2);
}

.bm-chart { margin-top: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.bm-chart svg { width: 100%; height: 130px; display: block; overflow: visible; }
.bm-chart-empty {
  margin-top: 14px; padding: 18px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); text-align: center;
}
.bm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.bm-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.bm-leg i { width: 9px; height: 9px; border-radius: 50%; }
.bm-leg b { color: var(--text); font-weight: 600; }
.bm-leg em { font-style: normal; font-size: 10px; }
.bm-leg em.good { color: var(--acid); }
.bm-leg em.bad  { color: var(--warn); }
.bm-leg em.flat { color: var(--muted-2); }
.bm-range {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; color: var(--muted-2);
}

/* ===========================================================================
   Vaccinations
   =========================================================================== */
.vx-alert {
  padding: 14px 16px;
  border-left: 3px solid var(--warn);
  background: linear-gradient(90deg, rgba(255,197,61,.07), transparent 60%);
}
.vx-alert-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warn);
}
.vx-alert-head svg { width: 15px; height: 15px; }
.vx-alert ul { margin: 10px 0 0; padding-left: 18px; }
.vx-alert li { font-size: 13px; color: var(--text); margin-bottom: 4px; }

.vx-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 7px;
  border-radius: 999px; border: 1px solid currentColor;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500;
}
.vx-overdue { color: var(--danger); }
.vx-due     { color: var(--warn); }
.vx-soon    { color: var(--cyan); }
.vx-ok      { color: var(--muted-2); }
.mono-inline { font-family: var(--mono); font-size: 10.5px; }

/* ===========================================================================
   Dictation mic
   =========================================================================== */
.mic-btn {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .12s;
}
.mic-btn:hover { color: var(--text); border-color: var(--cyan); }
.mic-btn:active { transform: scale(.94); }
.mic-btn svg { width: 17px; height: 17px; }

.mic-btn.listening {
  color: var(--bg);
  border-color: var(--magenta);
  background: var(--magenta);
  box-shadow: 0 0 calc(16px * var(--glow-a)) var(--magenta);
}
.mic-btn.listening .i-mic { display: none; }

/* Waveform replaces the icon while recording. */
.mic-wave { display: none; align-items: center; gap: 2px; height: 16px; }
.mic-btn.listening .mic-wave { display: flex; }
.mic-wave i {
  display: block; width: 2.5px; height: 5px;
  border-radius: 2px; background: var(--bg);
  animation: micWave .9s ease-in-out infinite;
}
.mic-wave i:nth-child(2) { animation-delay: .15s; }
.mic-wave i:nth-child(3) { animation-delay: .3s; }
.mic-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes micWave {
  0%, 100% { height: 5px; }
  50%      { height: 15px; }
}

/* Halo pulse on the composer while dictating. */
.composer.dictating {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta-soft),
              0 0 calc(24px * var(--glow-a)) var(--magenta-soft);
  animation: dictatePulse 2.2s ease-in-out infinite;
}
@keyframes dictatePulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--magenta-soft), 0 0 calc(18px * var(--glow-a)) var(--magenta-soft); }
  50%      { box-shadow: 0 0 0 1px var(--magenta-soft), 0 0 calc(34px * var(--glow-a)) var(--magenta-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .mic-wave i { animation: none; height: 10px; }
  .composer.dictating { animation: none; }
}

/* ===========================================================================
   "EXTRA" — atmospheric layer

   Everything here is decorative and must stay that way: it hangs off
   pointer-events:none overlays and ::before/::after, so removing this whole
   block changes nothing functional. All of it scales with --glow-a and
   --scan-op, so data-glow="calm" quiets it, and every animation collapses
   under prefers-reduced-motion.
   =========================================================================== */

/* --- CRT sweep: a single bright scanline drifting down the viewport ------- */
.crt-sweep {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--scan-op) * 9);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 229, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 46, 136, 0.05) 58%,
    transparent 100%
  );
  animation: crtSweep 7.5s linear infinite;
  will-change: transform;
}
@keyframes crtSweep {
  from { transform: translateY(-140px); }
  to   { transform: translateY(100vh); }
}

/* --- Vignette: pulls the eye to the middle, deepens the black ------------- */
.vignette {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* --- HUD corner brackets -------------------------------------------------
   Four L-shaped corners drawn with two elements and a pair of gradients, so
   no extra DOM is needed on the cards themselves. --------------------------- */
.hud { position: relative; }
.hud::before,
.hud::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
  z-index: 3;
  opacity: calc(.35 + var(--glow-a) * .65);
}
.hud::before {
  top: 7px; left: 7px;
  border-top: 1.5px solid var(--cyan);
  border-left: 1.5px solid var(--cyan);
  filter: drop-shadow(0 0 4px var(--cyan));
}
.hud::after {
  bottom: 7px; right: 7px;
  border-bottom: 1.5px solid var(--magenta);
  border-right: 1.5px solid var(--magenta);
  filter: drop-shadow(0 0 4px var(--magenta));
}
/* Tint the UV card's brackets to its current band colour. */
.uv-card.hud::before,
.uv-card.hud::after {
  border-color: var(--uv);
  filter: drop-shadow(0 0 4px var(--uv));
  background: none;
}

/* --- Hero: travelling neon edge ------------------------------------------ */
.today-hero {
  --edge: conic-gradient(from var(--edge-angle, 0deg),
          transparent 0turn, var(--cyan) .08turn, transparent .18turn,
          transparent .5turn, var(--magenta) .58turn, transparent .68turn);
}
.today-hero::before,
.today-hero::after { z-index: 4; }

.hero-text h2 {
  /* Chromatic split, layered under the existing .glitch animation. */
  text-shadow:
    calc(-1px * var(--glow-a)) 0 rgba(0, 229, 255, .45),
    calc(1px * var(--glow-a)) 0 rgba(255, 46, 136, .45);
}

/* --- Cards lift and light their edge on hover ---------------------------- */
.card {
  transition: transform .18s cubic-bezier(.22, 1, .36, 1),
              border-color .18s, box-shadow .18s;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 8px 26px -14px rgba(0, 0, 0, .9),
                0 0 calc(22px * var(--glow-b)) rgba(0, 229, 255, .16);
  }
}

/* --- Active nav item: a breathing glow ----------------------------------- */
.bottom-nav button.active svg,
.nav-item.active svg {
  filter: drop-shadow(0 0 calc(7px * var(--glow-a)) currentColor);
  animation: navBreathe 3.2s ease-in-out infinite;
}
@keyframes navBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* --- Big numerals get a faint flicker, like a powered display ------------- */
.uv-value,
.bm-stat b,
.v-value {
  animation: neonFlicker 9s steps(1) infinite;
}
@keyframes neonFlicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .82; }
  98%           { opacity: 1; }
  99%           { opacity: .9; }
}

/* --- Modal gets a scan-in ------------------------------------------------ */
.modal { position: relative; overflow: hidden; }
.modal::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 229, 255, .10), transparent 22%);
}

/* --- Honour the calm switch and reduced motion --------------------------- */
:root[data-glow="calm"] .crt-sweep { display: none; }
:root[data-glow="calm"] .hud::before,
:root[data-glow="calm"] .hud::after { opacity: .3; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .crt-sweep { animation: none; display: none; }
  .bottom-nav button.active svg,
  .nav-item.active svg { animation: none; }
  .uv-value, .bm-stat b, .v-value { animation: none; }
  .card { transition: none; }
  @media (hover: hover) { .card:hover { transform: none; } }
}

/* ===========================================================================
   v2.2 "OVERCLOCK" — a louder, more experimental layer over Neon Grid.

   Ticker, uplink panel, holographic card edges, chamfered tags, numbered
   section headers, film grain. Decorative except the uplink strip, which is
   the sync status. Same contract as above: scales with --glow-a / --scan-op,
   quiets under data-glow="calm", stops under prefers-reduced-motion.
   =========================================================================== */

:root {
  --chamfer: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --stripe: repeating-linear-gradient(-45deg, rgba(124,255,61,.9) 0 6px, transparent 6px 12px);
}

/* --- Film grain: SVG turbulence, no image request ------------------------ */
body::after {
  content: '';
  position: fixed; inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--scan-op) * 1.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* --- Hero: bigger, skewed, with a slashed stripe ------------------------- */
.today-hero h2 {
  font-size: clamp(30px, 8.5vw, 44px);
  font-style: italic;
  letter-spacing: -0.035em;
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.hero-date::before {
  content: '';
  display: inline-block;
  width: 26px; height: 8px;
  margin-right: 9px;
  vertical-align: 1px;
  background: var(--stripe);
  opacity: .85;
}

/* --- Ticker: the headline numbers on a running tape ---------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  margin: -8px 0 14px;
  padding: 7px 0;
  border-block: 1px solid rgba(124,255,61,.28);
  background: linear-gradient(90deg, rgba(124,255,61,.07), rgba(0,229,255,.05), rgba(255,46,136,.07));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--acid);
  text-shadow: 0 0 calc(8px * var(--glow-a)) rgba(124,255,61,.7);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: inline-flex; gap: 16px;
  white-space: nowrap;
  animation: tape 26s linear infinite;
}
.ticker-track i { color: var(--magenta); font-style: normal; opacity: .8; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Uplink panel: sync status as a terminal readout --------------------- */
.uplink {
  position: relative;
  margin-bottom: 16px;
  padding: 11px 12px 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(90deg, rgba(0,229,255,.07), transparent 60%),
    rgba(8,9,15,.85);
  font-family: var(--mono);
  clip-path: var(--chamfer);
  overflow: hidden;
}
.uplink.has-err { border-left-color: var(--danger); }
.up-row { display: flex; align-items: center; gap: 9px; }
.up-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 calc(10px * var(--glow-a) + 2px) var(--acid);
  animation: pulse 2.4s ease-in-out infinite;
}
.uplink.has-err .up-led { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.uplink.syncing .up-led { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation-duration: .5s; }
.up-title { font-size: 10.5px; letter-spacing: .28em; color: var(--text); font-weight: 700; }
.up-status { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.up-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .2em;
  color: #05060A;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  clip-path: var(--chamfer);
  box-shadow: 0 0 18px -4px var(--cyan);
  transition: filter .15s, transform .15s;
}
.up-sync svg { width: 13px; height: 13px; }
.up-sync:active { transform: scale(.95); }
.up-sync:disabled { background: var(--surface-3); color: var(--cyan); cursor: default; }
.uplink.syncing .up-sync svg { animation: spin 1s linear infinite; }

/* A scan bar that runs across the panel while a sync is in flight. */
.uplink.syncing::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.16), transparent);
  animation: uplinkScan 1.1s linear infinite;
  pointer-events: none;
}
@keyframes uplinkScan { from { left: -35%; } to { left: 100%; } }

.up-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.up-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 7px;
  font-size: 10.5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  clip-path: var(--chamfer);
  min-width: 0;
}
.up-chip i { width: 6px; height: 6px; flex: none; background: currentColor; box-shadow: 0 0 6px currentColor; }
.up-chip b { color: var(--text); font-weight: 700; letter-spacing: .08em; }
.up-chip em { margin-left: auto; font-style: normal; color: currentColor; }
.up-chip.live  { color: var(--acid); border-color: rgba(124,255,61,.35); }
.up-chip.lag   { color: var(--warn); border-color: rgba(255,197,61,.35); }
.up-chip.stale { color: var(--orange); border-color: rgba(255,122,47,.45); background: rgba(255,122,47,.06); }
.up-chip.dead  { color: var(--muted-2); }
.up-chip.err   { color: var(--danger); border-color: rgba(255,77,106,.5); background: var(--danger-soft); }
.up-chip.stale i, .up-chip.err i { animation: blink 1s steps(1) infinite; }

.up-note {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  font: 11.5px/1.45 var(--font);
  color: var(--muted);
  text-align: left;
  background: none; border: 0;
}
.up-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--violet); }
.up-note.err { color: var(--danger); cursor: pointer; }
.up-note.err svg { color: var(--danger); }

/* --- Vitals: holographic edge that slowly orbits ------------------------- */
@property --holo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.vital::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--holo),
    transparent 0 60%, currentColor 72%, #fff 76%, var(--magenta) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(.25 + var(--glow-a) * .9);
  animation: holo 7s linear infinite;
  pointer-events: none;
}
.vital:nth-child(2)::before { animation-delay: -1.7s; }
.vital:nth-child(3)::before { animation-delay: -3.4s; }
.vital:nth-child(4)::before { animation-delay: -5.1s; }
@keyframes holo { to { --holo: 360deg; } }

.v-value {
  text-shadow:
    calc(-1.5px * var(--glow-a)) 0 rgba(0,229,255,.55),
    calc(1.5px * var(--glow-a)) 0 rgba(255,46,136,.55);
}
.v-head span {
  padding: 2px 6px;
  background: rgba(255,255,255,.04);
  clip-path: var(--chamfer);
}

/* --- Section labels: numbered channels ----------------------------------- */
#todayContainer { counter-reset: chan; }
#todayContainer > .section-label::before {
  counter-increment: chan;
  content: 'CH.0' counter(chan);
  color: var(--magenta);
  margin-right: 2px;
  text-shadow: 0 0 calc(8px * var(--glow-a)) var(--magenta);
}

/* --- Briefing: terminal chrome + tag-style headings ---------------------- */
.briefing-card { position: relative; padding-top: 34px; }
.briefing-card::before {
  content: '> BRIEFING.LOG';
  position: absolute; top: 0; left: 0; right: 0;
  padding: 6px 12px;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .24em;
  color: var(--violet);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(139,92,246,.16), transparent);
}
.briefing-card .prose h2 {
  display: inline-block;
  margin: 18px 0 8px;
  padding: 4px 12px 4px 10px;
  font: 800 11px/1.3 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #05060A;
  background: var(--acid);
  clip-path: var(--chamfer);
  box-shadow: 0 0 16px -4px var(--acid);
}
.briefing-card .prose h2:first-child { margin-top: 2px; }
.briefing-card .prose h2:nth-of-type(2) { background: var(--cyan); }
.briefing-card .prose h2:nth-of-type(3) { background: var(--magenta); }
.briefing-card .prose h2:nth-of-type(4) { background: var(--warn); }

.stale-banner {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 9px 11px;
  font: 12.5px/1.4 var(--font);
  color: var(--warn);
  text-align: left;
  background: repeating-linear-gradient(-45deg, rgba(255,197,61,.10) 0 8px, rgba(255,197,61,.04) 8px 16px);
  border: 1px solid rgba(255,197,61,.45);
  clip-path: var(--chamfer);
  cursor: pointer;
}
.stale-banner svg { width: 15px; height: 15px; flex: none; }
.stale-banner b { text-decoration: underline; text-underline-offset: 3px; }

/* Waiting state: three equaliser bars instead of a static icon. */
.briefing-idle.waiting b { color: var(--text); }
.wait-glyph { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.wait-glyph span {
  width: 6px; height: 100%;
  background: linear-gradient(to top, var(--violet), var(--cyan));
  box-shadow: 0 0 10px -2px var(--cyan);
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite;
}
.wait-glyph span:nth-child(2) { animation-delay: -.35s; }
.wait-glyph span:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.idle-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 380px) {
  .up-chips { grid-template-columns: repeat(2, 1fr); }
}

/* --- Calm + reduced motion ----------------------------------------------- */
:root[data-glow="calm"] body::after { display: none; }
:root[data-glow="calm"] .vital::before { animation: none; opacity: .18; }
:root[data-glow="calm"] .ticker-track { animation-duration: 60s; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .ticker-track, .vital::before, .up-led, .wait-glyph span,
  .uplink.syncing::after, .uplink.syncing .up-sync svg,
  .up-chip.stale i, .up-chip.err i { animation: none; }
  .today-hero h2 { transform: none; }
}