:root {
  --bg: #0a0e12;
  --bg-elevated: #12181c;
  --surface-1: #12181c;
  --surface-2: #171f24;
  --surface-1-rgb: 18,24,28;
  --surface-2-rgb: 23,31,36;
  --border: rgba(51, 200, 204, 0.12);
  --border-soft: rgba(255,255,255,0.06);
  --text-primary: #dde3e5;
  --text-secondary: #7e8e95;
  --text-muted: #5a686e;
  --gridline: rgba(255,255,255,0.06);
  --baseline: rgba(255,255,255,0.14);

  --cyan: #33c8cc;
  --cyan-dim: #23888c;
  --cyan-glow: rgba(51, 200, 204, 0.42);
  --violet: #8069d6;
  --magenta: #cf5cb8;

  --series-1: #33c8cc;
  --series-2: #8069d6;
  --gradient-bar: linear-gradient(90deg, var(--violet) 0%, #3f8ff0 55%, var(--cyan) 100%);
  --gradient-glow: rgba(63,143,240,0.36);

  --good: #34bd7c;
  --warning: #dba52c;
  --serious: #e6824b;
  --critical: #e6516a;

  --surface-translucent: rgba(10,14,18,0.88);
  --nav-translucent: rgba(14,20,24,0.88);

  --card-radius: 5px;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* No-op for the default skin (equals --font-display) — only a skin like
     Shinobi Core below gives headline-styled elements a distinct typeface
     from body/label text. */
  --font-headline: var(--font-display);
}

/* "Bright Core" light theme — same variable names, so every component
   already built against these tokens repaints automatically. Font stack
   is kept as system sans/mono (not Sora/JetBrains Mono webfonts) so the
   app has zero external font requests and keeps working fully offline. */
:root[data-theme="light"] {
  --bg: #f0f3f5;
  --bg-elevated: #fbfcfd;
  --surface-1: #fbfcfd;
  --surface-2: #eceff1;
  --surface-1-rgb: 251,252,253;
  --surface-2-rgb: 236,239,241;
  --border: rgba(10, 163, 189, 0.2);
  --border-soft: #e2e8f0;
  --text-primary: #262a2c;
  --text-secondary: #475356;
  --text-muted: #707c80;
  --gridline: rgba(25, 28, 30, 0.08);
  --baseline: #bcc9cd;

  --cyan: #0aa3bd;
  --cyan-dim: #0c6d7e;
  --cyan-glow: rgba(10, 163, 189, 0.24);
  --violet: #6a41c2;
  --magenta: #ab1a41;

  --series-1: #0aa3bd;
  --series-2: #6a41c2;
  --gradient-bar: linear-gradient(90deg, var(--violet) 0%, #3f8ff0 55%, var(--cyan) 100%);
  --gradient-glow: rgba(63, 143, 240, 0.22);

  --good: #16805c;
  --warning: #a35714;
  --serious: #b04a1c;
  --critical: #a82929;

  --surface-translucent: rgba(240,243,245,0.88);
  --nav-translucent: rgba(251,252,253,0.88);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root { --user-font-scale: 1; }
html {
  /* Text Size setting (Settings > Appearance) — scales every rem-based
     font-size in the app together. Bounded 90%-115% by the slider itself. */
  font-size: calc(16px * var(--user-font-scale));
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: 100px;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 600px 300px at 20% 0%, rgba(45,226,230,0.07), transparent 60%),
    radial-gradient(ellipse 500px 260px at 90% 10%, rgba(128,105,214,0.06), transparent 60%),
    url('icons/bg-pattern.svg');
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 320px 320px;
  background-attachment: fixed, fixed, fixed;
}
/* A custom background photo shows through as the base layer — the radial
   gradients + pattern above stay on top (their low opacity lets the photo's
   own color read through), only the flat --bg color underneath is dropped. */
body.has-custom-bg { background-color: transparent; }

.custom-bg-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.custom-bg-layer[hidden] { display: none; }
/* Fit/Contain mode leaves letterbox gaps around the image (whichever axis
   doesn't match the screen's aspect ratio) — this shows the SAME photo
   behind it, scaled to fully cover and heavily blurred, so the gaps read
   as an extension of the photo's own colors instead of a flat, likely-
   mismatched average tint. Same technique Spotify/YouTube Music use for
   art that doesn't fill its frame. inset is well past -24px specifically
   because a strong blur needs a lot of overscanned source to avoid a
   visible soft edge/vignette at the screen boundary. */
.custom-bg-backdrop {
  position: absolute;
  inset: -60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(40px) brightness(0.75) saturate(1.15);
  transform: scale(1.15);
}
.custom-bg-backdrop[hidden] { display: none; }
.custom-bg-image {
  position: absolute;
  inset: -24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.custom-bg-overlay {
  position: absolute;
  inset: 0;
  /* Uses the theme's own dark/light surface anchor rather than a hardcoded
     #000 — dims toward black on dark themes, washes toward white on light
     ones, so text stays legible over a custom background either way. */
  background: var(--surface-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 600px 300px at 20% 0%, rgba(10,163,189,0.08), transparent 60%),
    radial-gradient(ellipse 500px 260px at 90% 10%, rgba(106,65,194,0.06), transparent 60%),
    url('icons/bg-pattern-light.svg');
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 320px 320px;
  background-attachment: fixed, fixed, fixed;
}

/* ---------------- Splash screen ---------------- */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 24px;
  text-align: center;
  transition: opacity 0.4s ease;
}
.splash-screen.splash-hide { opacity: 0; pointer-events: none; }
.splash-logo {
  width: 96px;
  height: 96px;
  border-radius: 20%;
  object-fit: cover;
  filter: drop-shadow(0 0 18px var(--cyan-glow));
  animation: splash-pulse 1.8s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.splash-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 320px;
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
}

/* ---------------- Header ---------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-translucent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.header-right { display: flex; align-items: center; gap: 8px; }
.brand-logo { display: block; filter: drop-shadow(0 0 6px var(--cyan-glow)); }
.app-header h1 {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
}
.app-header-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#app { padding: 16px; max-width: 640px; margin: 0 auto; }

.tab-panel { display: flex; flex-direction: column; gap: 14px; }
.tab-panel[hidden] { display: none; }

/* ---------------- Hero ---------------- */
.hero-card {
  position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 18px;
}
.sys-version {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}
.hero-sub { color: var(--text-secondary); font-size: 0.85rem; margin: 6px 0 0; line-height: 1.4; }
.accent-text { color: var(--cyan); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row .chip { margin-top: 12px; flex: 1 1 130px; min-width: 0; }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 6px;
}
.hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
}
.hero-title .accent {
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title-shrink { font-size: 70%; }
/* Welcome-back greeting: stacked on two lines instead of inline, both
   scaled down another 90% from their previous sizes. The name line stays
   nowrap/hidden-overflow as a safety net — fitHeroNameToWidth() in app.js
   shrinks its font-size with JS when a long name would otherwise overflow,
   only kicking in when needed so short names stay at full size. */
.hero-welcome-line { display: block; font-size: 63%; font-weight: 700; }
.hero-name-line {
  display: block;
  font-size: 90%;
  margin-top: 1px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 12px;
  margin-top: 12px;
}
.chip-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chip-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  font-size: 0.95rem;
}
.chip--id { flex: 1 1 auto; }
.chip--id .chip-value { font-size: 0.8rem; letter-spacing: 0.03em; }
.chip-copy-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  margin-left: auto;
}
.chip-copy-btn:hover { color: var(--cyan); }
.chip-copy-btn.is-copied { color: var(--good); }

.section-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 6px 2px -4px;
  color: var(--text-secondary);
}
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 -4px; }
.section-title-row .section-title { margin: 0; }
.section-title--neon { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }
.unit-switch { display: flex; border: 1px solid var(--border-soft); border-radius: 5px; overflow: hidden; flex: none; }
.unit-switch-btn {
  background: var(--surface-2);
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
.unit-switch-btn.is-active { background: var(--cyan); color: #04181a; }

/* ---------------- Current date & time card ---------------- */
.datetime-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.datetime-info { flex: 7; min-width: 0; }
.datetime-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.datetime-date {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.datetime-clock {
  font-family: var(--font-mono);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan-glow);
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.datetime-divider { width: 1px; align-self: stretch; background: var(--border-soft); flex: none; }
.datetime-tz-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.wx-location-btn { filter: none; }
.wx-location-dot {
  width: 12px;
  height: 12px;
  display: block;
}
.wx-location-dot circle {
  fill: var(--magenta);
  filter: drop-shadow(0 0 4px rgba(207,92,184,0.7));
}
.weather-widget {
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.weather-widget .datetime-label { justify-content: center; margin-bottom: 3px; }
.weather-icon { font-size: 1.4rem; line-height: 1; cursor: pointer; }
.weather-temp { cursor: pointer; }
.weather-icon .wx-icon { width: 24px; height: 24px; display: block; }
.weather-temp {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}
.weather-location-results { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; max-height: 240px; overflow-y: auto; }
.weather-location-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 10px 12px;
  cursor: pointer;
}
.weather-location-row:hover { border-color: var(--cyan); }

/* ---------------- Rings ---------------- */
.ring-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ring-row--3 { grid-template-columns: repeat(3, 1fr); }
.ring-row--3 .ring-card { padding: 10px 4px; }
.ring-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ring-card svg { display: block; }
.ring-card--flush { background: none; border: none; padding: 6px 0 0; }
.bio-scan-row { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 6px; }
.bio-scan-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.bio-scan-col .chart-card-head { justify-content: center; }
.bio-scan-col .chart-card-title { font-size: 0.8rem; }
.bio-orb { cursor: pointer; }
.bio-orb-desc { text-align: justify; margin-top: 6px; }
.ring-track { stroke: var(--gridline); fill: none; }
.ring-fill { stroke: var(--cyan); fill: none; stroke-linecap: round; filter: drop-shadow(0 0 5.5px var(--cyan-glow)); transition: stroke-dashoffset 0.6s ease; }
.ring-fill.violet { stroke: var(--violet); filter: drop-shadow(0 0 5.5px rgba(128,105,214,0.605)); }
.ring-fill.magenta { stroke: var(--magenta); filter: drop-shadow(0 0 5.5px rgba(207,92,184,0.605)); }
.ring-value {
  font-size: 1.5rem;
  font-weight: 800;
  fill: var(--text-primary);
}
.ring-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.ring-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
  margin-top: 2px;
}

/* ---------------- Stat tiles ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }

.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px 12px;
  text-align: center;
}
.stat-tile--hero { padding: 20px 12px; }
.stat-tile-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  font-family: var(--font-mono);
}
.stat-tile--hero .stat-tile-value { font-size: 2.2rem; color: var(--cyan); text-shadow: 0 0 14px var(--cyan-glow); }
.stat-tile-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Compact variant — Avg steps/BMI row and Weight change (trend weight) row */
.stat-grid--3 .stat-tile { padding: 8px 8px; }
.stat-grid--3 .stat-tile-value { font-size: 1.15rem; }
.stat-grid--3 .stat-tile-label { font-size: 0.58rem; margin-top: 3px; }

/* Compact variant — Training tab Workouts (7d) / Total sets (7d) row */
.stat-grid--compact .stat-tile { padding: 9px 8px; }
.stat-grid--compact .stat-tile-value { font-size: 1.2rem; }
.stat-grid--compact .stat-tile-label { font-size: 0.6rem; margin-top: 3px; }

.perf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.perf-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.perf-tile-head { display: flex; align-items: center; justify-content: space-between; }
.perf-tile-label { font-size: 0.8rem; color: var(--text-secondary); }
.perf-tile-value { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.perf-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.perf-spark-bar { flex: 1; min-height: 3px; border-radius: 2px 2px 0 0; opacity: 0.4; transition: height 0.3s ease; }
.perf-spark-bar.is-today { opacity: 1; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.status-good { background: var(--good); color: var(--good); }
.status-warning { background: var(--warning); color: var(--warning); }
.status-serious { background: var(--serious); color: var(--serious); }
.status-critical { background: var(--critical); color: var(--critical); }
.status-muted { background: var(--text-muted); color: var(--text-muted); }

/* ---------------- Chart card ---------------- */
.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px;
}
.chart-card--neon {
  border-color: var(--cyan);
  animation: quick-log-throb 2.4s ease-in-out infinite;
}
@keyframes quick-log-throb {
  0%, 100% { box-shadow: 0 0 8px var(--cyan-glow), 0 0 2px var(--cyan); }
  50% { box-shadow: 0 0 22px var(--cyan-glow), 0 0 6px var(--cyan); }
}
@media (prefers-reduced-motion: reduce) {
  .chart-card--neon { animation: none; box-shadow: 0 0 10px var(--cyan-glow), 0 0 2px var(--cyan); }
}
.chart-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.chart-card-title { font-weight: 700; font-size: 0.95rem; }
#digitalIdCard, #adjustedBmiTile, #stepsCaloriesTitle { cursor: pointer; }
.chart-card-sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.weight-chart { position: relative; width: 100%; }
.weight-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-top: 8px;
  flex-wrap: wrap;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 12px; height: 2px; display: inline-block; }
.legend-dash { border-top: 2px dashed var(--series-2); width: 12px; height: 0; }
.chart-toggle-link {
  background: none;
  border: none;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
  z-index: 5;
}
.empty-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 4px;
}

/* Bar chart (sleep architecture style) */
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.volume-linechart { width: 100%; height: 90px; display: block; overflow: visible; }
.volume-linechart circle { cursor: pointer; }
.empty-note .btn { margin-top: 10px; display: inline-flex; width: auto; }
.bar-chart-col { flex: 1; background: var(--gridline); border-radius: 3px 3px 1px 1px; min-height: 3px; position: relative; }
.bar-chart-col.has-value { background: var(--cyan-dim); }
.bar-chart-labels { display: flex; gap: 4px; margin-top: 6px; }
.bar-chart-labels span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-muted); }
.sleep-stats-row { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }

/* Dual bar chart (Steps vs Calories) */
.dual-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100px;
  position: relative;
}
.dual-bar-chart::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 76.9%;
  border-top: 1px dashed var(--baseline);
}
.dual-bar-day {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 100%;
}
.dual-bar { width: 40%; height: 100%; display: flex; flex-direction: column-reverse; }
.dual-bar-base { min-height: 2px; border-radius: 0 0 1px 1px; }
.dual-bar-base:last-child { border-radius: 2px 2px 1px 1px; }
.dual-bar-over { border-radius: 2px 2px 0 0; background: var(--warning); box-shadow: 0 0 6px rgba(219,165,44,0.55); }
.dual-bar--steps .dual-bar-base { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.dual-bar--calories .dual-bar-base { background: var(--violet); box-shadow: 0 0 6px rgba(128,105,214,0.4); }
.sleep-stats-row .stat-tile-value { font-size: 1.1rem; margin-top: 2px; }

/* ---------------- Goal progress bar ---------------- */
.goal-track {
  position: relative;
  height: 6px;
  background: var(--gridline);
  border-radius: 4px;
  margin: 30px 6px 14px;
}
.goal-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--gradient-bar);
  border-radius: 4px;
  box-shadow: 0 0 8px var(--gradient-glow);
}
.goal-marker {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}
.goal-marker::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 2px;
  height: 8px;
  background: var(--baseline);
  transform: translateX(-50%);
}
.goal-now-lowest-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 6px;
}
.goal-now {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cyan);
}
.goal-lowest {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--warning);
}

/* ---------------- Status pill / badge ---------------- */
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(45,226,230,0.12);
  color: var(--cyan);
  border: 1px solid rgba(45,226,230,0.3);
}
.pill.violet { background: rgba(128,105,214,0.14); color: var(--violet); border-color: rgba(128,105,214,0.32); }

/* ---------------- Forms ---------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.field > span { font-weight: 600; color: var(--text-primary); }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  font-size: 1rem;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  width: 100%;
}
#sessionTemplateSelect, #cardioType { padding: 7px 8px; font-size: 0.86rem; }
.field input[type="date"],
.field input[type="time"] { color-scheme: dark; }
.date-picker-trigger { cursor: pointer; caret-color: transparent; }
.field input.date-picker-trigger { padding: 7px 9px; font-size: 0.86rem; }
.date-picker-trigger::-webkit-calendar-picker-indicator { display: none; }
.food-diary-date-picker .date-picker-trigger::-webkit-calendar-picker-indicator { display: none; }
.mission-log-day.is-selected { background: var(--cyan); color: #04181a; font-weight: 800; box-shadow: 0 0 8px var(--cyan-glow); }
button.mission-log-day {
  background: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
button.mission-log-day:hover { border-color: var(--cyan); }
.field input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 9px;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: var(--gridline);
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan-glow), 0 0 3px var(--cyan);
  margin-top: -3.5px;
  cursor: pointer;
}
.field input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: var(--gridline);
}
.field input[type="range"]::-moz-range-progress {
  height: 2px;
  border-radius: 2px;
  background: var(--gridline);
}
.field input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan-glow), 0 0 3px var(--cyan);
  cursor: pointer;
}
.field output {
  align-self: flex-start;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--cyan);
}
.slider-endpoints {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: -4px;
}
.field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.field--checkbox input { width: 18px; height: 18px; flex: none; accent-color: var(--cyan); }
.field--checkbox span { font-weight: 500; color: var(--text-primary); }
.assessment-checklist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.assessment-checklist .field--checkbox { padding: 2px 0; }
.assessment-checklist .field--checkbox span { font-size: 0.86rem; }

.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

.period-field-group { margin-bottom: 10px; }
.period-field-group .field-row { margin-top: 4px; }

.field-group {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 12px;
  margin: 0 0 4px;
  background: var(--surface-1);
}
.field-group legend {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 0 4px;
}
.field-group-heading {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin: 0 0 10px;
}

/* Compact variant — Training tab Session templates fieldset */
.field-group--compact { padding: 10px; }
.field-group--compact legend { font-size: 0.66rem; padding: 0 3px; }
.field-group--compact .mod-tag { margin-bottom: 2px; }
.field-group--compact .field-group-heading { margin: 0 0 6px; font-size: 0.86rem; }
.field-group--compact .field { margin-bottom: 8px; gap: 3px; }
.field-group--compact .field > span { font-size: 0.78rem; }
.field-group--compact .field input[type="text"],
.field-group--compact .field input[type="number"],
.field-group--compact .field input[type="date"],
.field-group--compact .field select { padding: 7px 8px; font-size: 0.86rem; }
.field-group--compact .btn-row { gap: 8px; }
.field-group--compact .btn-row .btn,
.field-group--compact > .btn { padding: 8px 10px; font-size: 0.8rem; min-width: 0; }
.field-group--compact .save-note { margin-top: 4px; font-size: 0.76rem; }
.field-group--compact .section-title-row { margin: 0 0 4px; }
.field-group--compact .field input[type="date"].date-picker-trigger,
.field-group--compact .input-unit-wrap input { padding: 7px 8px; font-size: 0.86rem; }
.field-group--compact .extraHabitInput { padding: 7px 8px; font-size: 0.86rem; margin-bottom: 0; }
.field-group--compact .proto-row { gap: 6px; margin-bottom: 6px; }
.field-group--compact .proto-index { font-size: 0.6rem; }
.field-group--compact .hint { font-size: 0.72rem; margin: 4px 0 6px; }
.field-group .extraHabitInput {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-family: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.08)), var(--surface-2);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35),
    0 1px 4px rgba(0,0,0,0.22);
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  width: 100%;
}
.btn--ghost { background: transparent; border-color: var(--border); color: var(--cyan); }
.btn--file { cursor: pointer; }
.btn--sm { padding: 8px 12px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn--danger { color: var(--critical); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row .btn { flex: 1; min-width: 140px; }

.ai-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  border-top-color: var(--cyan);
  animation: ai-spinner-spin 0.7s linear infinite;
}
.ai-spinner[hidden] { display: none; }
@keyframes ai-spinner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-spinner { animation-duration: 1.6s; }
}
.ai-photo-preview {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.ai-photo-preview[hidden] { display: none; }

.quick-log-btn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-log-btn {
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 14px 4px 12px;
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: normal;
}
.quick-log-icon { filter: drop-shadow(0 0 4px var(--cyan-glow)); }

.save-note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--good); min-height: 1.1em; text-align: center; }
.hint { font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 4px; line-height: 1.4; }
.hint--accent { color: var(--cyan); background: var(--surface-2); border: 1px solid var(--cyan-dim); border-radius: 5px; padding: 8px 10px; }
.hint--warning { color: var(--warning); background: var(--surface-2); border: 1px solid var(--warning); border-radius: 5px; padding: 6px 10px; }
.hint--sm { font-size: 0.68rem; margin: 3px 0 0; line-height: 1.35; }
.skinfold-grid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.skinfold-grid .field { margin-bottom: 0; gap: 2px; }
.skinfold-grid .field > span { font-size: 0.78rem; }
.skinfold-grid .field input[type="number"] { padding: 7px 8px; font-size: 0.9rem; }
.skinfold-grid .hint--sm { margin: 0; }
.caliper-entry-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 8px 12px; font-size: 0.82rem; }
.caliper-entry-chevron { transition: transform 0.2s ease; flex: none; }
.caliper-entry-toggle[aria-expanded="true"] .caliper-entry-chevron { transform: rotate(180deg); }
.caliper-entry-panel { margin-top: 8px; }
.caliper-entry-panel > .hint { margin: 0 0 6px; font-size: 0.74rem; }
.caliper-entry-panel .btn--primary { padding: 9px 14px; font-size: 0.84rem; }
.caliper-entry-panel > .mod-tag:not(:first-child) { margin-top: 20px; }

.computed-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px;
  margin-top: 4px;
}
.computed-card h3 { margin: 0 0 10px; font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.computed-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.computed-list dt { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.computed-list dd { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cyan); font-family: var(--font-mono); }
.target-icon { color: var(--text-muted); font-size: 1rem; }
.fuel-status-head-right { display: flex; align-items: center; gap: 8px; }
.fuel-status-head-right .icon-btn { padding: 4px 7px; }

/* ---------------- Gradient bars (Fuel status, Goal progress) ---------------- */
.gradient-bar {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: visible;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.gradient-bar--sm { height: 2px; }
.gradient-bar-fill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: var(--gradient-bar);
  box-shadow: 0 0 11px var(--gradient-glow);
  transition: width 0.5s ease;
}
.gradient-bar-dot {
  position: absolute;
  top: 50%;
  right: -4.5px;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan-glow), 0 0 3px var(--cyan);
}
.fuel-status-card { display: flex; flex-direction: column; gap: 8px; }
.fuel-status-title { margin: 2px 0 4px; font-size: 1.05rem; font-weight: 800; }
.fuel-cal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.fuel-cal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.fuel-cal-ring { display: flex; flex-direction: column; align-items: center; text-align: center; flex: none; }
.fuel-water-col { display: flex; flex-direction: column; align-items: center; justify-content: space-between; align-self: stretch; gap: 4px; flex: none; }
.fuel-macro-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--text-secondary); min-width: 0; }
.fuel-macro-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fuel-macro-legend strong { color: var(--text-primary); font-family: var(--font-mono); }
.macro-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.macro-dot.macro-protein { background: var(--cyan); }
.macro-dot.macro-carbs { background: var(--violet); }
.macro-dot.macro-fat { background: var(--warning); }
.gradient-stat-row { margin-top: 10px; }
.gradient-stat-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--cyan);
  margin-bottom: 6px;
}
.gradient-stat-row-head strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.95rem; }
.gradient-stat-row-head span span { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; }
.dashed-empty {
  border: 1px dashed var(--border-soft);
  border-radius: 5px;
  padding: 20px 16px;
  text-align: center;
}
.dashed-empty-icon { font-size: 1.4rem; color: var(--text-muted); margin-bottom: 8px; }
.dashed-empty p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0 0 8px; }
.dashed-empty strong { color: var(--text-primary); }
.link-btn {
  background: none; border: none; color: var(--cyan);
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; text-decoration: underline; cursor: pointer; padding: 4px;
}
.input-unit-wrap { position: relative; }
.input-unit-wrap input { padding-right: 52px !important; }
.input-unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none;
}
.input-unit-wrap .input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.9rem; pointer-events: none;
}
.input-unit-wrap:has(.input-icon) input { padding-left: 40px !important; }

/* ---------------- Custom habit protocol rows ---------------- */
.proto-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.proto-index {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; flex: none; width: 62px;
}
.proto-row .extraHabitInput { flex: 1; min-width: 0; }
.proto-delete {
  flex: none; background: rgba(255,77,106,0.12); border: 1px solid rgba(255,77,106,0.3);
  border-radius: 5px; color: var(--critical); padding: 8px 10px; cursor: pointer; font-size: 0.85rem;
}
.proto-delete:hover { background: rgba(255,77,106,0.2); }

.form-flavor-note {
  font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted);
  text-align: center; margin: 6px 0 0; text-transform: uppercase; letter-spacing: 0.03em;
}

/* ---------------- History table ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--card-radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.76rem; white-space: nowrap; font-family: var(--font-mono); }
th, td { padding: 8px 10px; text-align: left; font-variant-numeric: tabular-nums; }
thead th { color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--gridline); position: sticky; top: 0; background: var(--surface-1); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.04em; }
tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

.btn--finish {
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.08)), var(--surface-2);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35),
    0 1px 4px rgba(0,0,0,0.22);
  color: var(--warning);
  text-shadow: 0 0 6px rgba(219,165,44,0.6);
  height: 46px;
}

/* ---------------- Outdoor activity tracker (Training) ---------------- */
.cardio-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; margin: 10px 0; }
.cardio-stat { text-align: center; }
.cardio-stat-value { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }
.cardio-stat-label { font-family: var(--font-mono); font-size: 0.52rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 1px; }
.cardio-route-sketch {
  width: 100%;
  aspect-ratio: 2 / 1;
  height: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  margin-bottom: 10px;
}
/* Deliberately bigger than the route sketch it replaces, not matched to
   it — pulled up with a negative margin so it visually pops out over the
   hint text above once Stop & Save reveals the real map, instead of just
   swapping in at the same small footprint. */
.cardio-map-view {
  position: relative;
  z-index: 5;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  margin-top: -36px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.cardio-map-view[hidden] { display: none; }
.cardio-map-zoom-row { display: flex; gap: 8px; margin-bottom: 10px; }
.cardio-map-zoom-btn {
  flex: 1;
  padding: 8px 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--cyan);
}
.cardio-map-style-btn {
  flex: 1;
  padding: 8px 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cardio-history { display: flex; flex-direction: column; gap: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.cardio-history-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 0.78rem;
}
.cardio-history-row:last-child { border-bottom: none; }
.cardio-history-date { color: var(--text-muted); flex: none; width: 76px; }
.cardio-history-type { flex: 1; text-transform: capitalize; color: var(--text-primary); font-weight: 700; }
.cardio-history-dist { color: var(--cyan); }
.cardio-history-dur { color: var(--text-secondary); }
.cardio-history-delete {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.cardio-history-delete:hover { border-color: var(--critical); color: var(--critical); }

/* ---------------- Exercise cards (Training) ---------------- */
.exercise-cards { display: flex; flex-direction: column; gap: 12px; }
.ex-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: var(--card-radius);
  padding: 12px;
}
.ex-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ex-card-title { font-weight: 700; font-size: 0.95rem; color: var(--warning); flex: 1; }
.ex-card-rest {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary);
}
.ex-card-rest select {
  background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-soft);
  border-radius: 5px; font-family: var(--font-mono); font-size: 0.72rem; padding: 3px 4px;
}
.ex-unit-toggle { display: flex; border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; flex: none; }
.ex-unit-btn {
  background: var(--surface-2);
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  cursor: pointer;
}
.ex-unit-btn.is-active { background: var(--cyan); color: #04181a; }
.ex-card-menu-wrap { position: relative; }
.ex-card-remove { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 8px; }
.ex-card-remove:hover { color: var(--critical); }
.ex-card-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 130px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.ex-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 10px 14px;
  cursor: pointer;
}
.ex-menu-item:hover { background: var(--surface-1); }
.ex-menu-delete { color: var(--critical); }
.ex-card-notes {
  width: 100%; font-size: 0.85rem; padding: 8px 10px; margin-bottom: 8px;
  border-radius: 5px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-secondary);
  font-family: inherit;
}
.ex-sets-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.78rem; }
.ex-sets-table th {
  color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.04em;
  padding: 4px 4px; text-align: center;
}
.ex-sets-table th:first-child, .ex-sets-table td:first-child { text-align: left; }
.ex-sets-table td { padding: 4px; text-align: center; vertical-align: middle; }
.ex-set-prev { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.ex-sets-table input[type="number"] {
  width: 100%; min-width: 0; text-align: center; padding: 6px 2px; font-size: 0.85rem;
  border-radius: 5px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-primary);
  font-family: var(--font-mono);
}
.ex-set-check {
  width: 30px; height: 30px; border-radius: 5px; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.95rem; cursor: pointer;
}
.ex-set-check.is-done { background: var(--cyan); border-color: transparent; color: #04181a; box-shadow: 0 0 8px var(--cyan-glow); }
.ex-set-remove { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 2px 6px; }
tr.is-complete .ex-set-prev { color: var(--text-secondary); }
.ex-add-set { width: 100%; margin-top: 8px; }

.pr-board { display: flex; flex-direction: column; gap: 5px; }
.pr-board-row {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-board-name { font-weight: 700; font-size: 0.76rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-board-compare { display: flex; align-items: center; gap: 5px; flex: none; }
.pr-board-value { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.pr-board-value--current { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.pr-board-arrow { color: var(--text-muted); font-size: 0.78rem; }
.pr-board-delta {
  flex: none; text-align: right; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; min-width: 58px;
}
.pr-board-delta.is-up { color: var(--good); }
.pr-board-delta.is-down { color: var(--critical); }

.new-protocol-box {
  border: 1px dashed var(--border-soft);
  border-radius: var(--card-radius);
  padding: 14px;
}
.new-protocol-box .field { margin-bottom: 10px; }
.new-protocol-box input[type="text"] { text-align: center; }
.new-protocol-box .btn { width: 100%; }

/* ---------------- Workout summary ---------------- */
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.summary-ex-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 5px;
  padding: 10px 12px; margin-bottom: 8px;
}
.summary-ex-name { font-weight: 700; font-size: 0.88rem; }
.summary-ex-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.pr-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 4px 8px; border-radius: 5px;
  background: rgba(240,180,41,0.16); color: var(--warning); border: 1px solid rgba(240,180,41,0.35);
  white-space: nowrap;
}

/* ---------------- Nexus presence ---------------- */
.nexus-presence {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  margin: -4px 0 4px;
}
.nexus-presence strong { color: var(--text-primary); }
.nexus-presence .status-dot { margin-right: 5px; }

/* ---------------- Finished session summary ---------------- */
.session-done-card {
  background: var(--surface-1);
  border: 1px solid var(--good);
  border-radius: var(--card-radius);
  padding: 20px;
  text-align: center;
}
.session-done-title { font-size: 1.05rem; font-weight: 800; color: var(--good); margin: 0 0 4px; }
.session-done-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 14px; }
.session-done-actions { display: flex; gap: 8px; }
.session-done-actions .btn { flex: 1; min-width: 0; }

/* ---------------- Per-exercise rest timer ---------------- */
.ex-rest-timer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}
.ex-rest-timer.is-active { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.ex-rest-timer.is-done { color: var(--critical); text-shadow: 0 0 8px rgba(255,77,106,0.6); }

/* ---------------- Rest-complete toast ---------------- */
.rest-toast {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--surface-1);
  border: 1px solid var(--cyan);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 10px 16px;
  border-radius: 5px;
  box-shadow: 0 0 16px var(--cyan-glow);
  max-width: 90vw;
  text-align: center;
  animation: rest-toast-in 0.25s ease;
}
@keyframes rest-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------- Nav bar ---------------- */
.tab-bar {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 12px; right: 12px;
  max-width: 616px;
  margin: 0 auto;
  display: flex;
  background: var(--nav-translucent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
  z-index: 20;
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 9px 2px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
}
.tab-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}
.tab-btn span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tab-btn.is-active { color: var(--cyan); }
.tab-btn.is-active svg { filter: drop-shadow(0 0 5px var(--cyan-glow)); }
.tab-btn.is-active span { text-shadow: 0 0 10px var(--cyan-glow); }
.tab-btn { position: relative; }
.tab-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--critical);
  box-shadow: 0 0 5px var(--critical);
}
.tab-dot[hidden] { display: none; }
.tab-dot--public { margin-left: 2px; }
.tab-dot--dm { margin-left: 11px; background: var(--good); box-shadow: 0 0 5px var(--good); }

/* ---------------- Beta lock ---------------- */
.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2,4,5,0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lock-overlay[hidden] { display: none; }
.lock-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 50px rgba(45,226,230,0.18);
}
.lock-icon {
  font-size: 2.6rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px var(--cyan-glow));
}
.lock-icon--logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.lock-card h2 {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cyan);
  margin: 0 0 10px;
}
.lock-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.lock-card .btn-row .btn { min-width: 0; }

/* ---------------- Fitness Journey mode gate / transition popups ---------------- */
.lock-card--wide { max-width: 420px; }
.mode-choice-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mode-choice-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  color: var(--text-primary);
}
.mode-choice-btn:hover, .mode-choice-btn:active { border-color: var(--cyan); }
.mode-choice-head { display: flex; align-items: center; gap: 8px; }
.mode-choice-icon { flex: none; width: 26px; height: 26px; display: block; object-fit: contain; }
.mode-choice-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan);
}
.mode-choice-desc { font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary); }
.mode-transition-feature-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mode-transition-feature-list li {
  font-size: 0.84rem;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}
.mode-transition-feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--good, var(--cyan));
  font-weight: 700;
}

/* Locked-but-visible sections (e.g. Bio measurements before Warrior Mode) —
   dimmed for a "locked" look, but NOT pointer-events:none: taps still need
   to reach the gated entry-point buttons inside so they can show the
   "complete the conditions first" toast instead of doing nothing. */
.mode-locked-visual { opacity: 0.45; filter: grayscale(0.5); }
.mode-lock-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 6px;
}

/* ---------------- Exercise hold timer popup (Dead Hang, etc.) ---------------- */
.timer-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(2,4,5,0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.timer-popup-overlay[hidden] { display: none; }
.timer-popup-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px 24px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 50px rgba(45,226,230,0.18);
  position: relative;
}
.timer-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
}
.timer-popup-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cyan);
  margin: 0 0 16px;
}
/* A large tappable circle (~3cm / 114px at a 96dpi reference) instead of
   plain text — Dead Hang and other timed holds are typically done with
   the phone set down at a distance, not held, so this needs to read
   clearly from a few feet away and be an easy, big target to tap without
   looking closely. Tapping it (see handleTimerDisplayTap in app.js) does
   whatever the current phase calls for — start, skip the countdown ahead
   to 2s, or stop — same as the Start/Stop buttons below it. */
.timer-popup-display {
  width: 114px;
  height: 114px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 3px solid var(--border-soft);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.timer-popup-display:active { transform: scale(0.96); }
.timer-popup-display.is-counting-in {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 24px var(--cyan-glow);
}
.timer-popup-display.is-running {
  color: var(--bg);
  background: var(--accent, var(--cyan));
  border-color: var(--accent, var(--cyan));
  box-shadow: 0 0 24px var(--cyan-glow);
}
.timer-popup-actions .btn { width: 100%; }
.ex-set-timer-btn {
  width: 100%;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
}
.ex-set-timer-btn.is-set {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ---------------- Terminal module tags ---------------- */
.mod-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

/* ---------------- Rank list (Nexus) ---------------- */
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-expand-btn {
  background: none;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 6px;
  flex: none;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.rank-expand-btn[hidden] { display: none; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  border-left: 2px solid transparent;
}
.rank-row.is-top { border-left-color: var(--cyan); background: rgba(45,226,230,0.08); }
.rank-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); width: 20px; }
.rank-mode-icon { flex: none; width: 22px; height: 22px; display: block; }
.rank-name { flex: 1; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.rank-digital-id { font-weight: 400; font-size: 0.68rem; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: normal; margin-left: 4px; }
.rank-value { font-family: var(--font-mono); font-weight: 700; color: var(--cyan); font-size: 0.85rem; }

/* ---------------- Public chat (Nexus) ---------------- */
.chat-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
  margin-bottom: 10px;
}
.chat-expand-btn {
  background: none;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 6px;
  flex: none;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
#chatCard.is-expanded {
  position: fixed;
  inset: 4vh 3vw;
  z-index: 300;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}
#chatCard.is-expanded .chat-list { flex: 1; max-height: none; }
/* Messenger/Viber-style bubbles — outline only (no fill), own messages
   right-aligned, received messages left-aligned. Kept as compact as
   possible: no avatars, name label only shown for other people's
   messages in a group room (skipped for your own bubbles and for 1:1
   DMs, where the header already names who you're talking to). */
.chat-row { display: flex; flex-direction: column; max-width: 80%; }
.chat-row--own { align-self: flex-end; align-items: flex-end; }
.chat-row--other { align-self: flex-start; align-items: flex-start; }
.chat-name { display: block; color: var(--cyan); font-weight: 700; font-size: 0.6rem; margin: 0 0 2px 8px; }
.chat-name-link { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.chat-bubble {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px 9px;
  background: transparent;
}
.chat-row--own .chat-bubble { border-color: var(--cyan); border-bottom-right-radius: 3px; }
.chat-row--other .chat-bubble { border-color: var(--violet); border-bottom-left-radius: 3px; }
.chat-msg { color: var(--text-primary); font-size: 0.78rem; line-height: 1.35; word-break: break-word; }
.chat-msg-unsent { font-style: italic; color: var(--text-muted); }
.chat-time { font-family: var(--font-mono); font-size: 0.56rem; color: var(--text-muted); flex: none; white-space: nowrap; }
/* Overlapping badge on the bubble's bottom corner — bottom-right for
   received messages, bottom-left for your own (mirrored, per request). */
.chat-reactions {
  position: absolute;
  bottom: -8px;
  display: flex;
  margin: 0;
  z-index: 1;
}
.chat-row--other .chat-reactions { right: -2px; }
.chat-row--own .chat-reactions { left: -2px; }
.chat-reaction-pill {
  font-size: 0.58rem;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 0 4px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.chat-reaction-pill.is-mine { border-color: var(--cyan); }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input {
  flex: 1;
  font-size: 0.9rem;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
}
.chat-input-row .btn { width: 48px; padding: 10px; }
.chat-attach-btn { width: 40px; flex: none; padding: 10px 0; }

.chat-pending-image {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-pending-image[hidden] { display: none; }
.chat-pending-image img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--cyan);
}
.chat-pending-image button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* Image attachments inside a bubble stack above the text/time row instead
   of sitting inline with it (the bubble is normally a single-line
   inline-flex row — see .chat-bubble above). */
.chat-bubble--has-image { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-row--own .chat-bubble--has-image { align-items: flex-end; }
.chat-msg-image {
  display: block;
  max-height: 140px;
  max-width: 100%;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}

.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 4, 6, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.chat-lightbox[hidden] { display: none; }
.chat-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; border: 1px solid var(--cyan); }

/* ---------------- Group chat ---------------- */
.chat-head-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.chat-bell-wrap { position: relative; }
.chat-bell-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--cyan);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.chat-bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--critical);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 5px var(--critical);
}
.chat-bell-badge[hidden] { display: none; }
.chat-bell-dm-dot {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 5px var(--good);
  border: 1.5px solid var(--surface-1);
}
.chat-bell-dm-dot[hidden] { display: none; }
.chat-invites-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 260px;
  max-width: 80vw;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-invites-popover[hidden] { display: none; }

/* ---------------- Nexus announcement ---------------- */
.announcement-menu-wrap { position: relative; }
.announcement-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.announcement-menu[hidden] { display: none; }
.announcement-menu-item {
  background: none;
  border: none;
  color: var(--text-primary);
  text-align: left;
  font-size: 0.8rem;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.announcement-menu-item:hover { background: var(--surface-2); color: var(--cyan); }
.announcement-marquee-wrap {
  overflow: hidden;
  margin: 8px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.global-announcement-strip {
  overflow: hidden;
  padding: 7px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.global-announcement-strip[hidden] { display: none; }
.global-announcement-strip .announcement-marquee-text { font-size: 0.72rem; }
.announcement-marquee {
  display: flex;
  width: max-content;
  animation: announcement-scroll 18s linear infinite;
}
.announcement-marquee-text {
  white-space: nowrap;
  padding-right: 56px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
@keyframes announcement-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-marquee { animation: none; }
}
.chat-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  border-left: 2px solid var(--warning);
}
.chat-invite-row span { flex: 1 1 100%; font-size: 0.8rem; }
.chat-invite-row .btn { padding: 6px 10px; font-size: 0.76rem; }
.chat-room-row { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.chat-room-row select {
  flex: 0 0 46%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.74rem;
}
.chat-room-row .btn { flex: none; padding: 6px 10px; font-size: 0.74rem; }
.chat-room-menu-wrap { position: relative; flex: none; }
.chat-room-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.chat-room-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 170px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.chat-room-menu[hidden] { display: none; }
.chat-room-menu-item {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.chat-room-menu-item:hover { background: var(--surface-2); }
.chat-room-menu-item--danger { color: var(--critical); }
.chat-room-menu-item:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.5; }
.chat-room-menu-item:disabled:hover { background: none; }
.chat-new-group {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 10px;
}
.chat-new-group[hidden] { display: none; }
.chat-new-group .input-unit-wrap { display: flex; gap: 6px; }
.chat-new-group .input-unit-wrap input { flex: 1; }
.chat-user-menu {
  position: fixed;
  z-index: 310;
  width: 220px;
  max-width: 80vw;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.chat-user-menu[hidden] { display: none; }
.chat-reaction-menu {
  position: fixed;
  z-index: 310;
  min-width: 220px;
  max-width: 86vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.chat-reaction-menu[hidden] { display: none; }
.chat-reaction-emoji-row { display: flex; gap: 4px; padding-bottom: 4px; }
.chat-reaction-emoji-btn {
  flex: 1;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
}
.chat-reaction-emoji-btn:hover { background: var(--surface-2); }
.chat-reaction-emoji-btn.is-active { border-color: var(--cyan); background: var(--surface-2); }
.chat-user-menu-name {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 2px 4px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.new-group-invite-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.invite-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan);
}
.invite-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 2px; }

/* ---------------- Theme toggle ---------------- */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 2px 0 18px;
}
.theme-icon { font-size: 1.25rem; line-height: 1; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background 0.2s ease;
}
.switch input:checked + .switch-track { background: var(--cyan); border-color: transparent; box-shadow: 0 0 10px var(--cyan-glow); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); background: #04181a; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------------- Body measurement guide ---------------- */
.measure-guide { display: flex; justify-content: center; }
.measure-guide img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
}
.measure-entry-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  background: rgba(6, 20, 26, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--cyan-dim);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  filter: drop-shadow(0 0 8px var(--cyan-glow));
  transition: background 0.15s ease;
}
.measure-entry-btn:hover { background: rgba(6, 20, 26, 0.72); }

/* ---------------- Temporal mission log (calendar) ---------------- */
.mission-log-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.settings-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.share-result-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; color: var(--cyan); }
.entity-identity-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }

/* ---------------- Alarm tone picker ---------------- */
.tone-picker-compact { display: flex; align-items: center; gap: 8px; }
.tone-picker-compact select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-size: 0.88rem;
}
.tone-preview-btn {
  flex: none;
  width: 34px;
  padding: 6px 0;
  color: var(--cyan);
  border-color: var(--border-soft);
}
.mission-log-legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}
.mission-log-legend .status-dot { margin-right: 5px; }
.mission-log-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mission-log-nav button {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--cyan);
  font-size: 1.1rem;
  line-height: 1;
  padding: 5px 14px;
  cursor: pointer;
}
.mission-log-nav span {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.mission-log-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}
.mission-log-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mission-log-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  border-radius: 50%;
  border: 1px solid transparent;
}
.mission-log-day.is-muted { color: var(--text-muted); opacity: 0.35; }
.mission-log-day.is-workout {
  border-color: var(--cyan);
  color: var(--cyan);
  font-weight: 700;
  box-shadow: 0 0 6px var(--cyan-glow);
}
.mission-log-day.is-today { background: var(--surface-2); font-weight: 800; }
.mission-log-day.is-period { position: relative; }
.mission-log-period-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--critical);
  box-shadow: 0 0 4px var(--critical);
}
.mission-log-day.is-has-data { position: relative; }
.mission-log-data-dot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan-glow);
}
.mission-log-day.is-reset { position: relative; cursor: pointer; }
.mission-log-reset-dot {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 4px var(--warning);
}

/* ---------------- Footer (Nexus) ---------------- */
.app-footer {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.footer-action-row {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}
.footer-share-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  cursor: pointer;
  filter: drop-shadow(0 0 4px var(--cyan-glow));
}
.footer-brand-name {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  margin-top: 10px;
}
.footer-tagline {
  color: var(--cyan);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 10px 0 0;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.footer-col h4 {
  margin: 0 0 2px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
}
.footer-link, .footer-link-static, .footer-link-btn {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: default;
}
.footer-link, .footer-link-btn { cursor: pointer; }
.footer-link:hover, .footer-link-btn:hover { color: var(--cyan); }

/* ---------------- Contact Us ---------------- */
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.legal-doc { font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); }
.legal-doc .legal-updated { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-bottom: 14px; }
.legal-doc h3 { font-size: 0.92rem; color: var(--cyan); margin: 18px 0 6px; }
.legal-doc h3:first-of-type { margin-top: 0; }
.legal-doc h4 { font-size: 0.85rem; color: var(--text-primary); margin: 14px 0 4px; }
.legal-doc p { margin: 0 0 8px; }
.legal-doc ul { margin: 0 0 8px; padding-left: 20px; }
.legal-doc li { margin-bottom: 4px; }
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 12px 14px;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  font-size: 0.88rem;
}

/* ---------------- Modal (More panel) ---------------- */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 150; display: flex; align-items: flex-end;
}
.sheet-overlay[hidden] { display: none; }
.sheet-overlay--stacked { z-index: 160; }
/* Full-screen variant — same solid background as the app's own full-page
   sections (Settings/System Menu), not a translucent-backdrop bottom
   sheet, so there's no dim gap around the panel and everything reads
   clearly against one continuous surface. */
.sheet-overlay--fullscreen { align-items: stretch; background: var(--bg); }
.sheet-overlay--fullscreen .sheet {
  height: 100%; max-height: none;
  border-radius: 0; border-top: none;
  padding-top: calc(16px + env(safe-area-inset-top));
}
.sheet-overlay--fullscreen .sheet-handle { display: none; }
#datePickerOverlay { z-index: 170; padding-left: 18px; padding-right: 18px; }

/* ---------------- Admin Command Center (slide-out drawer) ---------------- */
/* Tab visibility is gated to isAdminLoggedIn() in refreshDigitalIdOverrideVisibility()
   — it never shows for a regular user. Visual bar is an 8mm-diameter semicircle
   bump (30px diameter / 15px radius at a 96dpi CSS reference) — a true semicircle
   comes from a box exactly radius-wide and diameter-tall with both same-side
   corners fully rounded by that radius. The tap/drag hit target (the button
   itself) is padded out wider than the visible bump since 15px alone is under
   any comfortable touch-target minimum. */
.admin-drawer-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 400;
  width: 26px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s ease;
}
.admin-drawer-tab[hidden] { display: none; }
.admin-drawer-tab:active { cursor: grabbing; }
/* Press-and-hold-2s-then-drag reposition (see initAdminDrawer in app.js) —
   the pulse/glow signals the tab has been "picked up" and is now following
   the finger freely (vertically; horizontally it snaps to whichever edge
   the pointer is nearer), distinct from the plain short-drag-to-open
   gesture which never adds this class. */
.admin-drawer-tab.is-repositioning {
  transform: translateY(-50%) scale(1.18);
}
.admin-drawer-tab.is-repositioning .admin-drawer-tab-bar {
  box-shadow: 0 0 18px var(--cyan-glow), 0 0 6px var(--cyan);
}
/* Docked to the left edge instead of the default right — mirrors the bump
   shape (rounded corners + arrow flip to the other side) so it still reads
   as "poking out from this edge" rather than a right-edge shape stranded
   on the wrong side. */
.admin-drawer-tab--left { justify-content: flex-start; }
.admin-drawer-tab--left .admin-drawer-tab-bar {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 0 0 10px var(--cyan-glow), 1px 0 3px rgba(0,0,0,0.3);
}
.admin-drawer-tab--left.is-repositioning .admin-drawer-tab-bar {
  box-shadow: 0 0 18px var(--cyan-glow), 0 0 6px var(--cyan);
}
.admin-drawer-tab--left .admin-drawer-tab-bar::after { content: '›'; left: 58%; }
.admin-drawer-tab-bar {
  width: 15px;
  height: 30px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-dim));
  box-shadow: 0 0 10px var(--cyan-glow), -1px 0 3px rgba(0,0,0,0.3);
  position: relative;
}
.admin-drawer-tab-bar::after {
  content: '‹';
  position: absolute;
  top: 50%; left: 42%;
  transform: translate(-50%, -52%);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.admin-drawer-backdrop {
  position: fixed; inset: 0;
  z-index: 399;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.admin-drawer-backdrop[hidden] { display: none; }
.admin-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.admin-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(86vw, 380px);
  z-index: 400;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.admin-drawer[hidden] { display: none; }
.admin-drawer.is-open { transform: translateX(0); }
.admin-drawer.is-dragging { transition: none; }
.admin-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.admin-drawer-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.admin-drawer-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.admin-drawer-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Log Out has no widget of its own — this proxy button stays in the DOM
   (its existing click listener is wired to this exact ID elsewhere in
   app.js) purely as a click-forwarding target for the pill's Log Out icon,
   never shown directly. Post Announcement / Assign Targets / Media Sync
   ARE shown directly, as real buttons inside #adminBroadcastToolsSection. */
.admin-drawer-hidden-proxies { display: none; }
.admin-drawer-launcher-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-drawer-launcher-list .announcement-menu-item {
  display: block;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 10px 12px;
}

/* Focused-section mode: opening the panel via a pill icon hides every
   other admin-drawer-section so only the tapped feature shows — layered
   on top of (not replacing) each section's own admin-login-gated [hidden]. */
.admin-drawer-section.is-not-focused { display: none; }

/* Rotatable icon arc — opened by the edge tab. A semicircle of icons on a
   virtual full circle (see computeAdminArcRadius/layoutAdminDrawerArc in
   app.js): each icon's on-screen x/y is computed from its angle and set
   via inline transform, so this container is just a positioning anchor
   (its own box has no visible background) — the circular hit area
   (pointer-events:auto in .is-open) is what lets a drag started anywhere
   in the gaps between icons rotate the arc, not just a drag started on an
   icon itself. Only the icon nearest the front (angle ~0, i.e. "most
   left") is interactive and grown — see .is-focused — the rest are
   rotate-into-view only. Width/height/right are set inline by JS, not
   here — the radius (and so the container size) scales with icon count so
   the "one icon space apart" spacing holds as icons are added, capped to
   a floor so it doesn't look cramped with only a few. Default values below
   are just a safe pre-JS fallback. */
.admin-drawer-pill {
  position: fixed;
  top: 50%;
  right: -170px;
  transform: translateY(-50%);
  width: 340px;
  height: 340px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, right 0.2s ease, left 0.2s ease;
}
/* Anchored to the tab's actual (possibly dragged) position by
   positionAdminDrawerPill/layoutAdminDrawerArc in app.js every time it
   opens — this default only matters before that first inline top/left/right
   is ever set. */
.admin-drawer-pill--left { left: -170px; right: auto; }
.admin-drawer-pill[hidden] { display: none; }
.admin-drawer-pill.is-open { opacity: 1; pointer-events: auto; }
.admin-drawer-pill-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.admin-drawer-pill-item.is-focused {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan-glow);
}
/* Small readout naming the currently-focused (blown-up) icon, kept in sync
   with it every layout pass — including live while dragging/rotating. */
.admin-drawer-arc-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-9999px, -9999px);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  pointer-events: none;
}

.donation-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.donation-overlay[hidden] { display: none; }
.donation-card {
  background: var(--surface-1);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--card-radius);
  box-shadow: 0 0 24px var(--cyan-glow);
  padding: 24px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  position: relative;
}
.donation-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 8px var(--cyan-glow));
}
.donation-message {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px;
  line-height: 1.4;
}
.donation-btn-row { display: flex; gap: 10px; }
.donation-btn-row .btn { flex: 1; }
.donation-btn-ignore { color: var(--text-muted); }
.donation-qr-view { position: relative; }
.donation-qr-close { position: absolute; top: -12px; right: -8px; }
.ad-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ad-splash-overlay[hidden] { display: none; }
.ad-splash-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--card-radius);
  box-shadow: 0 0 30px var(--cyan-glow);
  max-width: 360px;
  width: 100%;
  overflow: hidden;
}
.ad-splash-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(10,14,18,0.7);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: not-allowed;
}
.ad-splash-close .ad-splash-x-icon { display: none; }
.ad-splash-close.is-ready {
  cursor: pointer;
  color: var(--text-primary);
  border-color: var(--cyan);
  background: var(--surface-2);
}
.ad-splash-close.is-ready .ad-splash-countdown { display: none; }
.ad-splash-close.is-ready .ad-splash-x-icon { display: block; }
.ad-splash-link { display: block; color: inherit; text-decoration: none; }
.ad-splash-eyebrow {
  margin: 16px 20px 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ad-splash-image { display: block; width: 100%; max-height: 260px; object-fit: cover; background: var(--surface-2); }
.ad-splash-name { margin: 14px 20px 2px; font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.ad-splash-cta { margin: 0 20px 18px; font-size: 0.82rem; color: var(--cyan); }

/* 2x4 grid of up to 8 ads shown at once, instead of one random pick */
.ad-splash-card--grid { max-width: 420px; max-height: 86vh; overflow-y: auto; }
.ad-splash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 4px 16px 18px;
}
.ad-splash-grid-item {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ad-splash-grid-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-2); }
.ad-splash-grid-name {
  display: block;
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-manager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  margin-top: 8px;
}
.ad-manager-thumb { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; background: var(--surface-2); flex: none; }
.ad-manager-info { flex: 1; min-width: 0; }
.ad-manager-name { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-manager-link { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ad-manager-inactive { opacity: 0.5; }
.ad-manager-actions { display: flex; gap: 4px; flex: none; }
.ad-manager-actions .btn { padding: 6px 10px; font-size: 0.75rem; }

.sync-log-summary {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 10px;
}
.sync-log-header, .sync-log-row {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.6fr 1.3fr;
  gap: 8px;
  padding: 7px 8px;
  align-items: center;
}
.sync-log-header {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
}
.sync-log-row {
  font-size: 0.78rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
}
.sync-log-row:nth-child(even) { background: var(--surface-2); }
.sync-log-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-log-row .sync-log-id { font-weight: 700; color: var(--cyan); font-family: monospace; }
.sync-log-row .sync-log-muted { color: var(--text-muted); }

.media-sync-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.media-sync-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-sync-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-muted); font-size: 0.72rem; text-align: center; padding: 0 16px;
}
.media-sync-empty svg { opacity: 0.6; }
.media-sync-menu-wrap { position: absolute; top: 8px; right: 8px; }
.media-sync-name-tag {
  position: absolute; top: 8px; left: 8px;
  max-width: 70%;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.media-sync-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.media-sync-foot-text { display: flex; flex-direction: column; min-width: 0; }
.media-sync-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.media-sync-sub { font-size: 0.7rem; color: var(--text-muted); }
.media-sync-browse-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 7px 12px; font-size: 0.78rem;
}

.media-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.media-mode-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}
.media-mode-card svg { color: var(--text-muted); }
.media-mode-card.is-selected { border-color: var(--cyan); color: var(--text-primary); }
.media-mode-card.is-selected svg { color: var(--cyan); }
.media-mode-dot {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); display: none;
}
.media-mode-card.is-selected .media-mode-dot { display: block; }

.media-sync-url-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.media-sync-url-index {
  flex: none; width: 20px; text-align: center; font-family: var(--font-mono);
  font-size: 0.68rem; color: var(--text-muted);
}
.media-sync-url-input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 9px 10px; color: var(--text-primary); font-size: 0.82rem;
}
.media-sync-url-input:focus { border-color: var(--cyan); outline: none; }
.media-sync-url-delete { flex: none; color: var(--text-muted); }
.media-sync-url-delete:hover { color: var(--critical); border-color: var(--critical); }

.media-timing-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 0.7rem; color: var(--text-muted); }
.media-timing-value { color: var(--cyan); font-weight: 700; font-family: var(--font-mono); font-size: 0.8rem; }
.media-timing-row + input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 9px;
  margin-top: 4px;
}
.media-timing-row + input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--gridline); }
.media-timing-row + input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 9px var(--cyan-glow), 0 0 3px var(--cyan);
  margin-top: -3.5px; cursor: pointer;
}
.media-timing-row + input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--gridline); }
.media-timing-row + input[type="range"]::-moz-range-thumb {
  width: 9px; height: 9px; border: none; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan-glow), 0 0 3px var(--cyan); cursor: pointer;
}

.prep-meal-category-tabs { display: flex; gap: 6px; margin: 8px 0 12px; }
.prep-meal-category-tab {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 7px 4px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.prep-meal-category-tab.is-selected { border-color: var(--cyan); color: var(--cyan); background: var(--surface-3, var(--surface-2)); }

.prep-meal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.prep-meal-row:last-child { border-bottom: none; }
.prep-meal-row { cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.prep-meal-row.is-selected { background: var(--surface-2); border-bottom-color: transparent; }
.prep-meal-row.is-selected .prep-meal-info { border-left-color: var(--cyan); }
/* Container (not the <img> itself) so the zoomed/panned image clips to the
   thumbnail box — a transformed img can't clip itself. */
.prep-meal-thumb {
  flex: none; width: 42px; height: 42px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  overflow: hidden;
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
}
.prep-meal-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#btnFoodPrepsExpand svg { transition: transform 0.15s ease; }
#btnFoodPrepsExpand.is-expanded svg { transform: rotate(180deg); }
#btnPrepMealManagerExpand.is-expanded svg { transform: rotate(180deg); }
/* Collapsed: just the first 3 rows, no scrolling. Expanded: a viewport
   sized for ~8 rows, with a normal scrollbar for anything beyond that —
   the manager list can run well past 8 meals. */
#prepMealManagerList.prep-meal-manager-list--expanded { max-height: 600px; overflow-y: auto; padding-right: 4px; }
.prep-meal-info { min-width: 0; flex: 1; border-left: 2px solid var(--cyan); padding-left: 10px; }
.prep-meal-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prep-meal-name { font-weight: 700; font-size: 0.86rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-meal-author-badge {
  flex: none; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 4px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-soft);
}
.prep-meal-author-badge.is-admin { color: var(--warning); border-color: var(--warning); }
.prep-meal-author-badge.is-self { color: var(--cyan); border-color: var(--cyan); }
.prep-meal-author-badge.is-pending { color: var(--critical); border-color: var(--critical); }
.prep-meal-ingredients { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prep-meal-amount-col { flex: none; display: flex; align-items: center; gap: 6px; }
.prep-meal-amount { font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
.prep-meal-amount-cal { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); text-align: right; }
.prep-meal-macros-head { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.prep-meal-macros-head-bar { width: 3px; height: 14px; background: var(--cyan); border-radius: 2px; }

.ad-manager-row.prep-meal-manager-row { align-items: flex-start; }

.prep-meal-detail-image { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-soft); }
.prep-meal-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.prep-meal-serving-row { margin-top: 10px; }
.prep-meal-detail-extra-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 0.82rem; color: var(--text-secondary);
}
.prep-meal-detail-extra-row strong { color: var(--text-primary); font-family: var(--font-mono); }
.prep-meal-detail-list { padding-left: 20px; margin: 4px 0 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.prep-meal-detail-list li { margin-bottom: 4px; }

.prep-meal-crop-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--cyan-dim);
  cursor: grab;
  touch-action: none;
  margin-bottom: 8px;
}
.prep-meal-crop-frame:active { cursor: grabbing; }
/* Matches the real boot logo's rendered shape — a small 96x96, 20%-rounded
   square (see .splash-logo) — instead of the default 16:9, so the framing
   preview (including the 0.3x-3x resize) shows exactly what ends up on the
   loading screen instead of implying it fills the whole phone screen. */
.prep-meal-crop-frame--icon { aspect-ratio: 1 / 1; max-width: 160px; border-radius: 20%; margin-left: auto; margin-right: auto; }
.prep-meal-crop-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.prep-meal-thumb-preview {
  position: fixed;
  z-index: 500;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 2px var(--cyan);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.prep-meal-thumb-preview.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.prep-meal-thumb-preview img { width: 100%; height: 100%; object-fit: cover; }

.donation-qr-message {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 4px;
  line-height: 1.4;
  padding-right: 18px;
}
.donation-qr-img {
  width: 100%;
  max-width: 260px;
  border-radius: 8px;
  margin: 8px auto 12px;
  display: block;
}

.update-available-note {
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: rgba(219,165,44,0.1);
  border: 1px solid rgba(219,165,44,0.35);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
}
.update-available-note[hidden] { display: none; }
.app-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(5,10,14,0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  text-align: center;
}
.app-update-overlay p {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-shadow: 0 0 6px var(--cyan-glow);
}
.app-update-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--cyan);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px var(--cyan-glow));
  animation: app-update-spin 0.9s linear infinite;
}
@keyframes app-update-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-update-spinner { animation: none; }
}

/* ---------------- Food Diary ---------------- */
.meal-section { margin-bottom: 18px; }
.meal-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.meal-section-title { font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.meal-icon { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 3px var(--cyan-glow)); }
.meal-section-total { font-family: var(--font-mono); font-size: 0.78rem; color: var(--cyan); }
.meal-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.meal-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.meal-item-info { flex: 1; min-width: 0; }
.meal-item-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-item-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.meal-item-move {
  flex: none;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.72rem;
  padding: 5px;
  font-family: inherit;
}
.meal-item-remove { flex: none; background: none; border: none; color: var(--critical); font-size: 1rem; cursor: pointer; padding: 4px; }
.meal-item-edit-btn { flex: none; background: none; border: none; color: var(--cyan); font-size: 0.95rem; cursor: pointer; padding: 4px; }
.add-food-btn {
  width: 100%;
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.08)), var(--surface-2);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35),
    0 1px 4px rgba(0,0,0,0.22);
  color: var(--cyan);
}

.meal-item-row--edit { align-items: stretch; }
.meal-item-edit-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.meal-item-edit-form input[type="text"],
.meal-item-edit-form input[type="number"] {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 6px 8px;
  min-width: 0;
  width: 100%;
}
.meal-item-edit-form .field-row input { flex: 1; }
.meal-item-edit-form .field-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.meal-edit-calories-label { display: flex !important; align-items: center; gap: 4px; margin-bottom: 2px; }
.meal-edit-chain-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.meal-edit-chain-btn .chain-link-line { transition: stroke-dasharray 0.15s; }
.meal-edit-chain-btn.is-locked { color: var(--warning); }
.meal-edit-chain-btn.is-locked .chain-link-line { stroke-dasharray: 1.6 1.6; }

/* Frosted-glass / embossed-thin surface — used where neon line icons need a
   subtle, translucent seat rather than a flat solid block. No backdrop-filter
   (was blur(7px)): dozens of these render at once across the app, and live
   backdrop blur at that scale caused real input lag and paint glitches on
   mid-range mobile hardware — a solid-ish gradient reads the same without
   the per-frame compositing cost. */
.glass-emboss {
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.08)), var(--surface-2);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35),
    0 1px 4px rgba(0,0,0,0.22);
}
.diet-algo-btn { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); width: 100%; }
.diet-icon { flex: none; filter: drop-shadow(0 0 3px var(--cyan-glow)); }

.food-diary-date-nav { display: flex; align-items: center; gap: 4px; }
.food-diary-date-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.8rem;
}
.food-diary-date-picker input[type="date"] {
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0;
  width: 108px;
  color-scheme: dark;
}
.cal-icon { width: 15px; height: 15px; flex: none; filter: drop-shadow(0 0 3px var(--cyan-glow)); }
.icon-btn {
  flex: none;
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--cyan); color: var(--cyan); }

.water-orb-glass-tag { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); margin: 0; }
.water-pill-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.water-pill-tags { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.water-pill-tags .mod-tag { margin: 0; }
.water-pill {
  position: relative;
  width: 32px;
  height: 158px;
  border-radius: 16px;
  border: 2px solid var(--border-soft);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  flex: none;
}
.water-pill-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(180deg, #2de2e6, #1f6fd6);
  transition: height 0.4s ease;
}
.water-pill-btns { display: flex; flex-direction: column; gap: 6px; }
.water-orb-arrow-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.water-orb-arrow-btn--up { color: var(--cyan); border-color: var(--cyan-dim); }
.water-orb-arrow-btn:hover { border-color: var(--cyan); }
.water-orb-arrow-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.water-orb-target-label { text-align: center; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin: 0; white-space: nowrap; }
.water-orb-auto-tag { color: var(--cyan); text-transform: uppercase; letter-spacing: 0.04em; }

.food-search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.food-search-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
}
.food-search-result-row:hover { border-color: var(--cyan); }
.food-search-result-row--ai {
  background: var(--surface-1);
  border-style: dashed;
  border-color: var(--violet);
}
.food-search-result-row--ai:hover { border-color: var(--violet); }
.food-search-result-row--ai .food-result-name { color: var(--violet); }
.food-result-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.food-result-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.food-result-kcal { flex: none; font-family: var(--font-mono); color: var(--cyan); font-size: 0.82rem; }
.exercise-result-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.exercise-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.exercise-tag--muscle { color: var(--cyan); border-color: var(--cyan-dim); }

.selected-food-card {
  background: var(--surface-2);
  border: 1px solid var(--cyan);
  border-radius: 5px;
  padding: 12px;
  margin-top: 12px;
}
.selected-food-name { font-weight: 700; margin: 2px 0 8px; }
.selected-food-preview { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); margin: 6px 0 10px; }

.barcode-video {
  width: 100%;
  border-radius: 5px;
  background: #000;
  margin-top: 10px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.sheet {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 5px 5px 0 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.sheet-handle { width: 36px; height: 4px; background: var(--border-soft); border-radius: 4px; margin: 0 auto 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet-head h2 { font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; color: var(--cyan); }
.sheet-close { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; padding: 4px 8px; }

/* ================================================================== */
/* SKIN: Shinobi Core — brutalist / manga-panel reskin.                */
/* Self-hosted fonts (offline-first, matches this app's existing        */
/* zero-external-request policy for the light theme) — see fonts/.      */
/* ================================================================== */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-narrow.woff2') format('woff2');
}
@font-face {
  font-family: 'Shinobi Montserrat';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('fonts/montserrat-heavy.woff2') format('woff2');
}

/* Dark (default when this skin is selected, i.e. no data-theme="light"). */
:root[data-skin="shinobi-core"] {
  --bg: #1b110a;
  --bg-elevated: #281d15;
  --surface-1: #241912;
  --surface-2: #281d15;
  --surface-1-rgb: 36,25,18;
  --surface-2-rgb: 40,29,21;
  --border: #a58c7b;
  --border-soft: #564334;
  --text-primary: #f3dfd1;
  --text-secondary: #ddc1ae;
  --text-muted: #a58c7b;
  --gridline: rgba(165, 140, 123, 0.25);
  --baseline: #a58c7b;

  --cyan: #ffb77f;
  --cyan-dim: #914c00;
  --cyan-glow: rgba(255, 138, 0, 0.42);
  --violet: #c4c5db;
  --magenta: #ffb4ab;

  --series-1: #ffb77f;
  --series-2: #c4c5db;
  --gradient-bar: linear-gradient(90deg, #c4c5db 0%, #ffb77f 100%);
  --gradient-glow: rgba(255, 138, 0, 0.36);

  --good: #8bb26a;
  --warning: #e8b339;
  --serious: #d1652f;
  --critical: #ffb4ab;

  --surface-translucent: rgba(27, 17, 10, 0.9);
  --nav-translucent: rgba(21, 12, 6, 0.92);

  --card-radius: 0;
  --font-mono: 'Archivo Narrow', ui-monospace, monospace;
  --font-display: 'Archivo Narrow', system-ui, sans-serif;
  --font-headline: 'Shinobi Montserrat', system-ui, sans-serif;
}

/* Light — the same "manga page" logic as the brand brief's ink-on-paper
   panels: warm paper surfaces, black ink text/borders, orange as the one
   spot color. Not given explicit tokens in the brand brief (only one,
   dark, palette was supplied) — derived to fit the same design language. */
:root[data-skin="shinobi-core"][data-theme="light"] {
  --bg: #f5ede3;
  --bg-elevated: #fffaf3;
  --surface-1: #fffaf3;
  --surface-2: #ede1d1;
  --surface-1-rgb: 255,250,243;
  --surface-2-rgb: 237,225,209;
  --border: #1b110a;
  --border-soft: #d8c9b3;
  --text-primary: #1b110a;
  --text-secondary: #4a3a2c;
  --text-muted: #7c6b58;
  --gridline: rgba(27, 17, 10, 0.1);
  --baseline: #cbb89e;

  --cyan: #d9720a;
  --cyan-dim: #a85400;
  --cyan-glow: rgba(217, 114, 10, 0.28);
  --violet: #46485a;
  --magenta: #b3261e;

  --series-1: #d9720a;
  --series-2: #46485a;
  --gradient-bar: linear-gradient(90deg, #46485a 0%, #d9720a 100%);
  --gradient-glow: rgba(217, 114, 10, 0.24);

  --good: #3f6b21;
  --warning: #8a5a00;
  --serious: #a13d0f;
  --critical: #ba1a1a;

  --surface-translucent: rgba(245, 237, 227, 0.92);
  --nav-translucent: rgba(255, 250, 243, 0.94);
}

/* Structural brutalist treatment: sharp corners everywhere (the base
   stylesheet has ~60 scattered hardcoded border-radius values, hence the
   blanket override rather than hunting each one down), thick ink borders,
   hard-offset shadows instead of soft glow, loud uppercase headlines.
   Entirely scoped to this skin — the default skin's rounded, glow-heavy
   look is untouched. */
[data-skin="shinobi-core"] * {
  border-radius: 0 !important;
}
[data-skin="shinobi-core"] .hero-title,
[data-skin="shinobi-core"] .chart-card-title,
[data-skin="shinobi-core"] .section-title,
[data-skin="shinobi-core"] .app-header h1,
[data-skin="shinobi-core"] .sheet-head h2,
[data-skin="shinobi-core"] .field-group-heading {
  font-family: var(--font-headline);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
[data-skin="shinobi-core"] .hero-card,
[data-skin="shinobi-core"] .chart-card,
[data-skin="shinobi-core"] .stat-tile,
[data-skin="shinobi-core"] .ring-card,
[data-skin="shinobi-core"] .computed-card {
  border-width: 3px;
  border-style: solid;
  box-shadow: 5px 5px 0 0 var(--text-primary);
}
[data-skin="shinobi-core"] .btn {
  border-width: 3px;
  border-style: solid;
  border-color: var(--text-primary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 0 var(--text-primary);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
[data-skin="shinobi-core"] .btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 0 var(--text-primary);
}
[data-skin="shinobi-core"] .btn--primary {
  background: var(--cyan);
  color: var(--bg);
  text-shadow: none;
}
[data-skin="shinobi-core"] input,
[data-skin="shinobi-core"] select,
[data-skin="shinobi-core"] textarea {
  border-width: 2px !important;
  border-style: solid;
  border-color: var(--text-primary);
}
[data-skin="shinobi-core"] input:focus,
[data-skin="shinobi-core"] select:focus,
[data-skin="shinobi-core"] textarea:focus {
  border-width: 3px !important;
  outline: none;
}
[data-skin="shinobi-core"] .tab-bar {
  border-top: 3px solid var(--text-primary);
  backdrop-filter: none;
  background: var(--nav-translucent);
}
[data-skin="shinobi-core"] .app-header {
  border-bottom: 3px solid var(--text-primary);
  backdrop-filter: none;
}

/* ================================================================== */
/* SKIN: Grand Core — Solarpunk-Futuristic neo-brutalism. Hyper-rounded */
/* "inflated" shapes (opposite direction from Shinobi Core's sharp      */
/* corners), chunky hard-offset shadows, pill-shaped interactive        */
/* elements, frosted-glass nav bars. Self-hosted fonts, see fonts/.     */
/* Brand brief only supplied a light palette (explicitly the intended   */
/* default mode) — that goes in the [data-theme="light"] slot below;    */
/* the bare/dark slot is a derived companion so the skin still works    */
/* with the light/dark toggle like every other skin in this app.        */
/* ================================================================== */
@font-face {
  font-family: 'Grand Core Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/sora.woff2') format('woff2');
}
@font-face {
  font-family: 'Grand Core Grotesk';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Grand Core Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
}

/* Dark (default when this skin is selected, i.e. no data-theme="light")
   — derived; keeps the same vivid accent hues as the light palette but
   inverts the surfaces so the toggle stays meaningful. */
:root[data-skin="grand-core"] {
  --bg: #14181a;
  --bg-elevated: #1c2124;
  --surface-1: #1c2124;
  --surface-2: #232a2d;
  --surface-1-rgb: 28,33,36;
  --surface-2-rgb: 35,42,45;
  --border: #3e4850;
  --border-soft: rgba(255,255,255,0.08);
  --text-primary: #f3f0ef;
  --text-secondary: #bdc8d1;
  --text-muted: #8a949c;
  --gridline: rgba(255,255,255,0.08);
  --baseline: rgba(255,255,255,0.16);

  --cyan: #82cfff;
  --cyan-dim: #00aeef;
  --cyan-glow: rgba(130, 207, 255, 0.4);
  --violet: #79ff5b;
  --magenta: #ff6b6b;

  --series-1: #82cfff;
  --series-2: #79ff5b;
  --gradient-bar: linear-gradient(90deg, #79ff5b 0%, #82cfff 100%);
  --gradient-glow: rgba(130, 207, 255, 0.35);

  --good: #79ff5b;
  --warning: #e9c400;
  --serious: #e0973c;
  --critical: #ff6b6b;

  --surface-translucent: rgba(20, 24, 26, 0.88);
  --nav-translucent: rgba(18, 21, 23, 0.9);

  --card-radius: 24px;
  --font-mono: 'Grand Core Mono', ui-monospace, monospace;
  --font-display: 'Grand Core Grotesk', system-ui, sans-serif;
  --font-headline: 'Grand Core Sora', system-ui, sans-serif;
}

/* Light — the brand brief's actual "Grand Core" palette, verbatim. */
:root[data-skin="grand-core"][data-theme="light"] {
  --bg: #fcf9f8;
  --bg-elevated: #ffffff;
  --surface-1: #f6f3f2;
  --surface-2: #f0eded;
  --surface-1-rgb: 246,243,242;
  --surface-2-rgb: 240,237,237;
  --border: #bdc8d1;
  --border-soft: #e5e2e1;
  --text-primary: #1c1b1b;
  --text-secondary: #3e4850;
  --text-muted: #6e7881;
  --gridline: rgba(28, 27, 27, 0.08);
  --baseline: rgba(28, 27, 27, 0.18);

  --cyan: #00aeef;
  --cyan-dim: #00658d;
  --cyan-glow: rgba(0, 174, 239, 0.35);
  --violet: #2ae500;
  --magenta: #ba1a1a;

  --series-1: #00aeef;
  --series-2: #2ae500;
  --gradient-bar: linear-gradient(90deg, #2ae500 0%, #00aeef 100%);
  --gradient-glow: rgba(0, 174, 239, 0.3);

  --good: #106e00;
  --warning: #bfa100;
  --serious: #b5650a;
  --critical: #ba1a1a;

  --surface-translucent: rgba(252, 249, 248, 0.85);
  --nav-translucent: rgba(255, 255, 255, 0.88);
}

/* Structural: hyper-rounded "inflated" shapes everywhere (opposite of
   Shinobi Core's sharp corners), then interactive elements get pushed all
   the way to a full pill per the brand's "Interactive Elements" rule.
   Entirely scoped to this skin. */
[data-skin="grand-core"] * {
  border-radius: var(--card-radius) !important;
}
[data-skin="grand-core"] .btn,
[data-skin="grand-core"] input,
[data-skin="grand-core"] select,
[data-skin="grand-core"] .chip,
[data-skin="grand-core"] .pill {
  border-radius: 9999px !important;
}
[data-skin="grand-core"] textarea {
  border-radius: var(--card-radius) !important;
}
[data-skin="grand-core"] .hero-title,
[data-skin="grand-core"] .chart-card-title,
[data-skin="grand-core"] .section-title,
[data-skin="grand-core"] .app-header h1,
[data-skin="grand-core"] .sheet-head h2,
[data-skin="grand-core"] .field-group-heading {
  font-family: var(--font-headline);
  letter-spacing: -0.01em;
}
[data-skin="grand-core"] .hero-card,
[data-skin="grand-core"] .chart-card,
[data-skin="grand-core"] .stat-tile,
[data-skin="grand-core"] .ring-card,
[data-skin="grand-core"] .computed-card {
  border-width: 3px;
  border-style: solid;
  border-color: var(--text-primary);
  box-shadow: 4px 4px 0 0 var(--text-primary);
}
[data-skin="grand-core"] .btn {
  border-width: 3px;
  border-style: solid;
  border-color: var(--text-primary);
  font-weight: 700;
  box-shadow: 4px 4px 0 0 var(--text-primary);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
[data-skin="grand-core"] .btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--text-primary);
}
[data-skin="grand-core"] .btn--primary {
  background: var(--critical);
  color: #fff;
  text-shadow: none;
}
[data-skin="grand-core"] input,
[data-skin="grand-core"] select,
[data-skin="grand-core"] textarea {
  border-width: 3px !important;
  border-style: solid;
  border-color: var(--text-primary);
}
[data-skin="grand-core"] .chip,
[data-skin="grand-core"] .pill {
  border-width: 2px;
  border-style: solid;
  border-color: var(--text-primary);
  font-family: var(--font-mono);
}
[data-skin="grand-core"] .tab-bar {
  border-width: 3px;
  border-color: var(--text-primary);
  backdrop-filter: blur(20px);
}
[data-skin="grand-core"] .app-header {
  border-bottom-width: 3px;
  border-color: var(--text-primary);
  backdrop-filter: blur(20px);
}

/* ================================================================== */
/* SKIN: Sovereign Core — Cyber-Brutalist "System Interface" (dark      */
/* fantasy / game-HUD). Sharp 0px corners, thin 1-2px neon-cyan strokes */
/* and glow instead of drop shadows, chamfered "blade" buttons.         */
/* The brand brief itself only supplied a dark palette, but a follow-up */
/* tonal-ramp reference gave enough to derive a light companion too —   */
/* see the [data-theme="light"] block below. Reuses Sora/JetBrains Mono */
/* already fetched for Grand Core, plus one extra                      */
/* regular-weight Sora file for body text (the headline weight alone    */
/* reads too bold at body size). Per instruction: hairline borders      */
/* throughout, ~0.3-0.6mm (roughly 1-2px at typical mobile density),    */
/* never the thick 3px+ strokes the other two skins use.                */
/* ================================================================== */
@font-face {
  font-family: 'Sovereign Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sora-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Sovereign Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/sora.woff2') format('woff2');
}
@font-face {
  font-family: 'Sovereign Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
}

:root[data-skin="sovereign-core"] {
  --bg: #0a0e14;
  --bg-elevated: #10141a;
  --surface-1: #10141a;
  --surface-2: #181c22;
  --surface-1-rgb: 16,20,26;
  --surface-2-rgb: 24,28,34;
  --border: #3b494b;
  --border-soft: #1c222b;
  --text-primary: #dfe2eb;
  --text-secondary: #b9cacb;
  --text-muted: #849495;
  --gridline: rgba(223, 226, 235, 0.06);
  --baseline: rgba(223, 226, 235, 0.14);

  --cyan: #00f0ff;
  --cyan-dim: #006970;
  --cyan-glow: rgba(0, 240, 255, 0.4);
  --violet: #0070ff;
  --magenta: #7000ff;

  --series-1: #00f0ff;
  --series-2: #0070ff;
  --gradient-bar: linear-gradient(90deg, #0070ff 0%, #00f0ff 100%);
  --gradient-glow: rgba(0, 240, 255, 0.3);

  --good: #00f0ff;
  --warning: #7000ff;
  --serious: #d5455a;
  --critical: #ffb4ab;

  --surface-translucent: rgba(10, 14, 20, 0.88);
  --nav-translucent: rgba(16, 20, 26, 0.9);

  --card-radius: 0;
  --font-mono: 'Sovereign Mono', ui-monospace, monospace;
  --font-display: 'Sovereign Sora', system-ui, sans-serif;
  --font-headline: var(--font-display);
}

/* Light — derived from the same three seed hues' tonal ramps (cyan/blue/
   purple) shown in the follow-up palette reference. Pure #00f0ff has
   almost no contrast on white, so light mode pulls from the DARK end of
   each ramp for anything used as text/icon/border/fill (matching the
   reference's "Primary" button swatch, which is a dark teal, not neon
   cyan) — the vivid tones stay reserved for the dark variant's glow
   effects, which don't read the same way on a light surface anyway.
   Shape language (sharp corners, chamfered buttons, hairline borders)
   is unchanged — only the token values differ here. */
:root[data-skin="sovereign-core"][data-theme="light"] {
  --bg: #fafbfc;
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f0f2f5;
  --surface-1-rgb: 255,255,255;
  --surface-2-rgb: 240,242,245;
  --border: #d0d5db;
  --border-soft: #e8eaed;
  --text-primary: #0a0e14;
  --text-secondary: #3e4850;
  --text-muted: #6e7881;
  --gridline: rgba(10, 14, 20, 0.06);
  --baseline: rgba(10, 14, 20, 0.14);

  --cyan: #00838f;
  --cyan-dim: #005f66;
  --cyan-glow: rgba(0, 131, 143, 0.22);
  --violet: #0058cc;
  --magenta: #5b00cc;

  --series-1: #00838f;
  --series-2: #0058cc;
  --gradient-bar: linear-gradient(90deg, #0058cc 0%, #00838f 100%);
  --gradient-glow: rgba(0, 131, 143, 0.18);

  --good: #00838f;
  --warning: #5b00cc;
  --serious: #a8324a;
  --critical: #ba1a1a;

  --surface-translucent: rgba(255, 255, 255, 0.85);
  --nav-translucent: rgba(255, 255, 255, 0.9);
}

[data-skin="sovereign-core"] * {
  border-radius: 0 !important;
}
[data-skin="sovereign-core"] .hero-title,
[data-skin="sovereign-core"] .app-header h1 {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px var(--cyan-glow);
}
[data-skin="sovereign-core"] .chart-card-title,
[data-skin="sovereign-core"] .section-title,
[data-skin="sovereign-core"] .sheet-head h2,
[data-skin="sovereign-core"] .field-group-heading {
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-skin="sovereign-core"] .hero-card,
[data-skin="sovereign-core"] .chart-card,
[data-skin="sovereign-core"] .stat-tile,
[data-skin="sovereign-core"] .ring-card,
[data-skin="sovereign-core"] .computed-card {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  box-shadow: none;
}
[data-skin="sovereign-core"] .btn {
  border-width: 1px;
  border-style: solid;
  border-color: var(--cyan-dim);
  background: transparent;
  color: var(--cyan);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: box-shadow 0.15s ease;
}
[data-skin="sovereign-core"] .btn--primary {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 16px var(--cyan-glow);
  /* Chamfered "blade" corners on System Actions per the brief. */
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
[data-skin="sovereign-core"] .btn--primary:active {
  box-shadow: 0 0 24px var(--cyan-glow);
}
[data-skin="sovereign-core"] input,
[data-skin="sovereign-core"] select,
[data-skin="sovereign-core"] textarea {
  background: var(--bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--cyan-dim) !important;
}
[data-skin="sovereign-core"] input:focus,
[data-skin="sovereign-core"] select:focus,
[data-skin="sovereign-core"] textarea:focus {
  border-bottom-width: 2px !important;
  border-bottom-color: var(--cyan) !important;
  outline: none;
  box-shadow: 0 4px 8px -4px var(--cyan-glow);
}
[data-skin="sovereign-core"] .chip,
[data-skin="sovereign-core"] .pill {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
/* These navigation/action buttons borrow the Digital ID chip's card look
   (filled surface, plain border) instead of the transparent glass-outline
   treatment every other .btn gets on this skin. */
[data-skin="sovereign-core"] #btnOpenStartDayLog,
[data-skin="sovereign-core"] #btnOpenEndDayLog,
[data-skin="sovereign-core"] #btnOpenWeekendLog,
[data-skin="sovereign-core"] #btnOpenTrainingLogQuick,
[data-skin="sovereign-core"] #btnOpenFuelLogQuick,
[data-skin="sovereign-core"] #btnOpenCommunityQuick,
[data-skin="sovereign-core"] #btnOpenMissionLog,
[data-skin="sovereign-core"] #btnToggleActivityHistory,
[data-skin="sovereign-core"] #btnOpenFuelLog,
[data-skin="sovereign-core"] #btnOpenFoodDiary,
[data-skin="sovereign-core"] #btnRequestAssessment,
[data-skin="sovereign-core"] #btnOpenBioLog,
[data-skin="sovereign-core"] #btnOpenEntityIdentity,
[data-skin="sovereign-core"] #btnOpenSettings,
[data-skin="sovereign-core"] #btnToggleDailyReview,
[data-skin="sovereign-core"] #btnToggleWeeklyReview,
[data-skin="sovereign-core"] #btnBackup,
[data-skin="sovereign-core"] #btnClearAllData,
[data-skin="sovereign-core"] #btnToggleHistoryLogs {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: none;
}
[data-skin="sovereign-core"] .tab-bar {
  border-width: 1px;
  border-color: var(--cyan-dim);
  backdrop-filter: blur(20px);
}
[data-skin="sovereign-core"] .app-header {
  border-bottom-width: 1px;
  border-bottom-color: var(--cyan-dim);
  backdrop-filter: blur(20px);
}

/* ================================================================== */
/* SKIN: Hashira Core — Taisho-era Japanese aesthetic meets brutalist   */
/* precision (Demon Slayer-adjacent "breathing style" HUD). Sharp 0px   */
/* corners, katana-cut clipped corners on signature elements, a         */
/* crimson-to-orange "tempered blade" gradient top border on cards,     */
/* thin hairline strokes throughout (~0.3-0.6mm / 1-2px, never the      */
/* brief's literal 4px — kept consistent with Sovereign Core's line     */
/* weight per instruction). Reuses the Sora/JetBrains Mono files        */
/* already fetched for the other skins — no new font downloads.         */
/* Brief only gave a dark palette; light is derived as a "washi paper"  */
/* companion (warm cream instead of stark white, fitting the brief's    */
/* own ink-on-paper language) with the same crimson/orange/yellow       */
/* accents darkened for contrast.                                       */
/* ================================================================== */
@font-face {
  font-family: 'Hashira Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sora-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Hashira Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/sora.woff2') format('woff2');
}
@font-face {
  font-family: 'Hashira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
}

/* Dark (default when this skin is selected, i.e. no data-theme="light"). */
:root[data-skin="hashira-core"] {
  --bg: #0a0a0b;
  --bg-elevated: #1a1a1c;
  --surface-1: #1a1a1c;
  --surface-2: #201f20;
  --surface-1-rgb: 26,26,28;
  --surface-2-rgb: 32,31,32;
  --border: #5c4040;
  --border-soft: rgba(255, 255, 255, 0.06);
  --text-primary: #f2f2f7;
  --text-secondary: #e5bdbd;
  --text-muted: #ab8888;
  --gridline: rgba(242, 242, 247, 0.06);
  --baseline: rgba(242, 242, 247, 0.14);

  --cyan: #be002f;
  --cyan-dim: #680015;
  --cyan-glow: rgba(190, 0, 47, 0.4);
  --violet: #ff571a;
  --magenta: #e9c400;

  --series-1: #be002f;
  --series-2: #ff571a;
  --gradient-bar: linear-gradient(90deg, #ff571a 0%, #be002f 100%);
  --gradient-glow: rgba(190, 0, 47, 0.35);

  --good: #ff571a;
  --warning: #e9c400;
  --serious: #ff4d00;
  --critical: #ffb4ab;

  --surface-translucent: rgba(10, 10, 11, 0.88);
  --nav-translucent: rgba(19, 19, 20, 0.9);

  --card-radius: 0;
  --font-mono: 'Hashira Mono', ui-monospace, monospace;
  --font-display: 'Hashira Sora', system-ui, sans-serif;
  --font-headline: var(--font-display);
}

/* Light — "washi paper" companion, not given in the brief. */
:root[data-skin="hashira-core"][data-theme="light"] {
  --bg: #f7f3ee;
  --bg-elevated: #fffcf8;
  --surface-1: #fffcf8;
  --surface-2: #f0e9e0;
  --surface-1-rgb: 255,252,248;
  --surface-2-rgb: 240,233,224;
  --border: #d4b8b8;
  --border-soft: #e8ded4;
  --text-primary: #1a1213;
  --text-secondary: #5c4040;
  --text-muted: #8a6a6a;
  --gridline: rgba(26, 18, 19, 0.08);
  --baseline: rgba(26, 18, 19, 0.16);

  --cyan: #92002f;
  --cyan-dim: #680015;
  --cyan-glow: rgba(146, 0, 47, 0.22);
  --violet: #cc4400;
  --magenta: #8a6d00;

  --series-1: #92002f;
  --series-2: #cc4400;
  --gradient-bar: linear-gradient(90deg, #cc4400 0%, #92002f 100%);
  --gradient-glow: rgba(146, 0, 47, 0.18);

  --good: #cc4400;
  --warning: #8a6d00;
  --serious: #b23a00;
  --critical: #ba1a1a;

  --surface-translucent: rgba(247, 243, 238, 0.85);
  --nav-translucent: rgba(255, 252, 248, 0.9);
}

/* Structural: sharp corners everywhere, katana-cut clipped corners on
   signature elements (primary buttons, hero card), tempered-blade
   gradient top border on cards, hairline strokes. Entirely scoped to
   this skin. */
[data-skin="hashira-core"] * {
  border-radius: 0 !important;
}
[data-skin="hashira-core"] .hero-title,
[data-skin="hashira-core"] .app-header h1 {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
[data-skin="hashira-core"] .chart-card-title,
[data-skin="hashira-core"] .section-title,
[data-skin="hashira-core"] .sheet-head h2,
[data-skin="hashira-core"] .field-group-heading {
  font-family: var(--font-headline);
  font-weight: 700;
}
[data-skin="hashira-core"] .hero-card,
[data-skin="hashira-core"] .chart-card,
[data-skin="hashira-core"] .stat-tile,
[data-skin="hashira-core"] .ring-card,
[data-skin="hashira-core"] .computed-card {
  border: 1px solid var(--border);
  /* "Tempered blade" edge: crimson-to-orange gradient, restricted to just
     the top side via zero border-image-width on the other three. */
  border-image: linear-gradient(90deg, var(--cyan), var(--violet)) 1;
  border-image-width: 2px 0 0 0;
  box-shadow: none;
}
[data-skin="hashira-core"] .hero-card {
  /* Katana-cut: top-right corner sheared at 45deg — the "Signature" tier. */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
[data-skin="hashira-core"] .btn {
  border-width: 1px;
  border-style: solid;
  border-color: var(--text-primary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
[data-skin="hashira-core"] .btn--primary {
  background: var(--cyan);
  color: var(--text-primary);
  border-color: var(--cyan);
  box-shadow: 2px 2px 0 0 var(--violet);
  /* Katana-cut top-right corner, the brief's "Signature" button treatment. */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
[data-skin="hashira-core"] .btn--primary:active {
  background: var(--violet);
  border-color: var(--magenta);
}
[data-skin="hashira-core"] input,
[data-skin="hashira-core"] select,
[data-skin="hashira-core"] textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--cyan) !important;
}
[data-skin="hashira-core"] input:focus,
[data-skin="hashira-core"] select:focus,
[data-skin="hashira-core"] textarea:focus {
  border-bottom-color: var(--magenta) !important;
  outline: none;
  box-shadow: 0 4px 6px -4px var(--magenta);
}
[data-skin="hashira-core"] .chip,
[data-skin="hashira-core"] .pill {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
[data-skin="hashira-core"] .tab-bar {
  border-width: 1px;
  border-color: var(--cyan);
  backdrop-filter: blur(14px);
}
[data-skin="hashira-core"] .app-header {
  border-bottom-width: 2px;
  border-bottom-color: var(--cyan);
  backdrop-filter: blur(14px);
}

/* ================================================================== */
/* SKIN: Asanoha Digital — "Kawaii-futurism." Soft pink-tinted surfaces */
/* with charcoal-black 2px borders (sticker/manga-panel look, no        */
/* shadow at rest), Deep Magenta primary + Bamboo Green secondary, a    */
/* moderate 8px "rounded-geometric" radius (softer than Sovereign/      */
/* Hashira's sharp 0px, tighter than Grand Core's hyper-round 24px).    */
/* Interactive elements shift 2px with a hard magenta shadow only on    */
/* press, per the brief's "physical pop-out" spec. Hairline borders     */
/* elsewhere kept thin per instruction; the 2px card/button borders     */
/* here are the brief's own explicit spec, not the thick 3-4px style    */
/* the earlier brutalist skins use. Reuses Space Grotesk already        */
/* fetched for Grand Core; Syne + Plus Jakarta Sans are new downloads.  */
/* Brief only gave a light palette (its stated default) — dark is a     */
/* derived companion, consistent with every other skin in this app.    */
/* ================================================================== */
@font-face {
  font-family: 'Asanoha Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/syne.woff2') format('woff2');
}
@font-face {
  font-family: 'Asanoha Jakarta';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Asanoha Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk.woff2') format('woff2');
}

/* Dark (default when this skin is selected, i.e. no data-theme="light")
   — derived; keeps the same magenta/green accents, inverted surfaces. */
:root[data-skin="asanoha-digital"] {
  --bg: #1a1416;
  --bg-elevated: #221a1d;
  --surface-1: #221a1d;
  --surface-2: #2a2023;
  --surface-1-rgb: 34,26,29;
  --surface-2-rgb: 42,32,35;
  --border: #4a383d;
  --border-soft: rgba(255, 255, 255, 0.07);
  --text-primary: #f7efeb;
  --text-secondary: #eabbc0;
  --text-muted: #a98d92;
  --gridline: rgba(247, 239, 235, 0.07);
  --baseline: rgba(247, 239, 235, 0.16);

  --cyan: #ffb1c3;
  --cyan-dim: #970046;
  --cyan-glow: rgba(255, 177, 195, 0.4);
  --violet: #96d947;
  --magenta: #ff8fa3;

  --series-1: #ffb1c3;
  --series-2: #96d947;
  --gradient-bar: linear-gradient(90deg, #96d947 0%, #ffb1c3 100%);
  --gradient-glow: rgba(255, 177, 195, 0.35);

  --good: #96d947;
  --warning: #ff8fa3;
  --serious: #e0567a;
  --critical: #ffb4ab;

  --surface-translucent: rgba(26, 20, 22, 0.88);
  --nav-translucent: rgba(24, 18, 20, 0.9);

  --card-radius: 8px;
  --font-mono: 'Asanoha Grotesk', ui-monospace, monospace;
  --font-display: 'Asanoha Jakarta', system-ui, sans-serif;
  --font-headline: 'Asanoha Syne', system-ui, sans-serif;
}

/* Light — the brief's actual palette, verbatim (its stated default). */
:root[data-skin="asanoha-digital"][data-theme="light"] {
  --bg: #fff8f5;
  --bg-elevated: #ffffff;
  --surface-1: #faf2ee;
  --surface-2: #f4ece8;
  --surface-1-rgb: 250,242,238;
  --surface-2-rgb: 244,236,232;
  --border: #e0bec4;
  --border-soft: #eee7e3;
  --text-primary: #1e1b19;
  --text-secondary: #594046;
  --text-muted: #8d7075;
  --gridline: rgba(30, 27, 25, 0.06);
  --baseline: rgba(30, 27, 25, 0.16);

  --cyan: #970046;
  --cyan-dim: #7a0038;
  --cyan-glow: rgba(151, 0, 70, 0.28);
  --violet: #416e00;
  --magenta: #c9184a;

  --series-1: #970046;
  --series-2: #416e00;
  --gradient-bar: linear-gradient(90deg, #416e00 0%, #970046 100%);
  --gradient-glow: rgba(151, 0, 70, 0.22);

  --good: #416e00;
  --warning: #c9184a;
  --serious: #a3123f;
  --critical: #ba1a1a;

  --surface-translucent: rgba(255, 248, 245, 0.88);
  --nav-translucent: rgba(255, 255, 255, 0.9);
}

/* Structural: rounded-geometric 8px everywhere, charcoal-black 2px
   borders with NO shadow at rest (sticker/manga-panel look), then a
   hard magenta offset shadow + 2px shift only while pressed — the
   brief's "physical pop-out" interactive state. Entirely scoped to
   this skin. */
[data-skin="asanoha-digital"] * {
  border-radius: var(--card-radius) !important;
}
[data-skin="asanoha-digital"] .hero-title,
[data-skin="asanoha-digital"] .chart-card-title,
[data-skin="asanoha-digital"] .section-title,
[data-skin="asanoha-digital"] .app-header h1,
[data-skin="asanoha-digital"] .sheet-head h2,
[data-skin="asanoha-digital"] .field-group-heading {
  font-family: var(--font-headline);
  letter-spacing: -0.01em;
}
[data-skin="asanoha-digital"] .hero-card,
[data-skin="asanoha-digital"] .chart-card,
[data-skin="asanoha-digital"] .stat-tile,
[data-skin="asanoha-digital"] .ring-card,
[data-skin="asanoha-digital"] .computed-card {
  border-width: 2px;
  border-style: solid;
  border-color: var(--text-primary);
  box-shadow: none;
}
[data-skin="asanoha-digital"] .btn {
  border-width: 2px;
  border-style: solid;
  border-color: var(--text-primary);
  font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-skin="asanoha-digital"] .btn:active {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--cyan);
}
[data-skin="asanoha-digital"] .btn--primary {
  background: var(--cyan);
  color: var(--bg);
  text-shadow: none;
}
[data-skin="asanoha-digital"] input,
[data-skin="asanoha-digital"] select,
[data-skin="asanoha-digital"] textarea {
  border-width: 2px !important;
  border-style: solid;
  border-color: var(--text-primary);
  background: var(--bg-elevated) !important;
}
[data-skin="asanoha-digital"] input:focus,
[data-skin="asanoha-digital"] select:focus,
[data-skin="asanoha-digital"] textarea:focus {
  border-color: var(--cyan) !important;
  outline: none;
}
[data-skin="asanoha-digital"] .chip,
[data-skin="asanoha-digital"] .pill {
  border-width: 1px;
  border-style: solid;
  border-color: var(--violet);
  color: var(--violet);
  font-family: var(--font-mono);
}
[data-skin="asanoha-digital"] .tab-bar {
  border-width: 2px;
  border-color: var(--text-primary);
  backdrop-filter: none;
}
[data-skin="asanoha-digital"] .app-header {
  border-bottom-width: 2px;
  border-bottom-color: var(--text-primary);
  backdrop-filter: none;
}

/* ================================================================== */
/* SKIN: Steampunk Core — Victorian mechanical engineering meets */
/* HUD telemetry. "Heavy machinery as interface": cast-iron panels,     */
/* copper/gold metal accents, rivets at every card corner, machined     */
/* (etched/extruded) controls. Courier New stands in for Courier Prime  */
/* (label-tech role) — a system-font-safe equivalent with the same      */
/* typewriter/blueprint character, no extra font file to self-host.     */
/* Dark is the intended mode (every surface token in the source spec is */
/* near-black); light is a derived companion so the toggle still works. */
/* ================================================================== */
:root[data-skin="steampunk-core"] {
  --bg: #131313;
  --bg-elevated: #1c1b1b;
  --surface-1: #1c1b1b;
  --surface-2: #20201f;
  --surface-1-rgb: 28,27,27;
  --surface-2-rgb: 32,32,31;
  --border: #a18d7f;
  --border-soft: #534438;
  --text-primary: #e5e2e1;
  --text-secondary: #d8c2b2;
  --text-muted: #a18d7f;
  --gridline: rgba(161, 141, 127, 0.25);
  --baseline: #a18d7f;

  --cyan: #ffb779;
  --cyan-dim: #8e4e00;
  --cyan-glow: rgba(255, 183, 121, 0.4);
  --violet: #e9c349;
  --magenta: #ffb4ab;

  --series-1: #ffb779;
  --series-2: #e9c349;
  --gradient-bar: linear-gradient(90deg, #cd7f32 0%, #ffb779 55%, #e9c349 100%);
  --gradient-glow: rgba(255, 183, 121, 0.36);

  --good: #8bb26a;
  --warning: #e9c349;
  --serious: #d17c46;
  --critical: #ffb4ab;

  --surface-translucent: rgba(19, 19, 19, 0.92);
  --nav-translucent: rgba(14, 14, 14, 0.94);

  --card-radius: 4px;
  --font-mono: 'Courier New', ui-monospace, monospace;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-headline: 'Sora', system-ui, sans-serif;

  --rivet-highlight: #6b5a4a;
  --rivet-mid: #3a2f26;
  --rivet-shadow: #131313;
}
:root[data-skin="steampunk-core"][data-theme="light"] {
  --bg: #e8e2da;
  --bg-elevated: #f4efe8;
  --surface-1: #f4efe8;
  --surface-2: #ddd4c6;
  --surface-1-rgb: 244,239,232;
  --surface-2-rgb: 221,212,198;
  --border: #6c5c4c;
  --border-soft: #b8a891;
  --text-primary: #2a2118;
  --text-secondary: #4c3c2c;
  --text-muted: #6c5c4c;
  --gridline: rgba(42, 33, 24, 0.14);
  --baseline: #b8a891;

  --cyan: #8e4e00;
  --cyan-dim: #6c3a00;
  --cyan-glow: rgba(142, 78, 0, 0.24);
  --violet: #8a6b00;
  --magenta: #93000a;

  --series-1: #8e4e00;
  --series-2: #8a6b00;
  --gradient-bar: linear-gradient(90deg, #8e4e00 0%, #cd7f32 55%, #af8d11 100%);
  --gradient-glow: rgba(142, 78, 0, 0.2);

  --good: #3f6b21;
  --warning: #7a5c00;
  --serious: #a13d0f;
  --critical: #93000a;

  --surface-translucent: rgba(232, 226, 218, 0.92);
  --nav-translucent: rgba(244, 239, 232, 0.94);

  --rivet-highlight: #d8c9b3;
  --rivet-mid: #a8987f;
  --rivet-shadow: #6c5c4c;
}

[data-skin="steampunk-core"] .hero-title,
[data-skin="steampunk-core"] .chart-card-title,
[data-skin="steampunk-core"] .section-title,
[data-skin="steampunk-core"] .app-header h1,
[data-skin="steampunk-core"] .sheet-head h2,
[data-skin="steampunk-core"] .field-group-heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.08);
}
/* Rivets: four machined screw-heads, one per corner, laid in as a
   background-image stack (no extra markup) — a radial gradient per rivet,
   positioned via background-position, sized small and never repeating. */
[data-skin="steampunk-core"] .hero-card,
[data-skin="steampunk-core"] .chart-card,
[data-skin="steampunk-core"] .stat-tile,
[data-skin="steampunk-core"] .ring-card,
[data-skin="steampunk-core"] .computed-card {
  position: relative;
  border: 1px solid var(--border-soft);
  border-top-color: rgba(255,255,255,0.1);
  border-bottom-color: rgba(0,0,0,0.6);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  background-image:
    radial-gradient(circle at 35% 35%, var(--rivet-highlight) 0%, var(--rivet-mid) 55%, var(--rivet-shadow) 100%),
    radial-gradient(circle at 35% 35%, var(--rivet-highlight) 0%, var(--rivet-mid) 55%, var(--rivet-shadow) 100%),
    radial-gradient(circle at 35% 35%, var(--rivet-highlight) 0%, var(--rivet-mid) 55%, var(--rivet-shadow) 100%),
    radial-gradient(circle at 35% 35%, var(--rivet-highlight) 0%, var(--rivet-mid) 55%, var(--rivet-shadow) 100%);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: 9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
}
/* Section headings get a small etched gear beside them — the one purely
   decorative flourish, kept small and muted so it reads as detailing
   rather than clutter. */
[data-skin="steampunk-core"] .chart-card-title::before,
[data-skin="steampunk-core"] .hero-title::before {
  content: '\2699';
  display: inline-block;
  margin-right: 6px;
  color: var(--text-muted);
  font-size: 0.85em;
  opacity: 0.7;
}
/* Buttons: polished copper on primary (gradient bevel, brighter "filament"
   glow on hover/press feedback), sunken machined iron on everything else. */
[data-skin="steampunk-core"] .btn {
  border-radius: var(--card-radius);
  border: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
[data-skin="steampunk-core"] .btn--primary {
  background: linear-gradient(180deg, #ffdcc1 0%, #ffb779 30%, #cd7f32 72%, #8e4e00 100%);
  border-color: #6c3a00;
  color: #2e1500;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -3px 6px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.4);
  transition: box-shadow 0.15s ease, transform 0.08s ease;
}
[data-skin="steampunk-core"] .btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.24), 0 0 14px var(--cyan-glow), 0 2px 6px rgba(0,0,0,0.4);
}
[data-skin="steampunk-core"] .btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
}
[data-skin="steampunk-core"] .btn:not(.btn--primary) {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.05);
}
/* Inputs: etched into the panel — deep inner shadow, glowing amber text,
   polished-gold border on focus (vs. the resting weathered-copper one). */
[data-skin="steampunk-core"] input,
[data-skin="steampunk-core"] select,
[data-skin="steampunk-core"] textarea {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  color: var(--cyan);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
}
[data-skin="steampunk-core"] input:focus,
[data-skin="steampunk-core"] select:focus,
[data-skin="steampunk-core"] textarea:focus {
  border-color: var(--violet);
  outline: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 0 0 1px var(--violet);
}
[data-skin="steampunk-core"] .chip,
[data-skin="steampunk-core"] .pill {
  border-radius: var(--card-radius);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
[data-skin="steampunk-core"] .mod-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}
[data-skin="steampunk-core"] .switch-track {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
[data-skin="steampunk-core"] .switch input:checked + .switch-track {
  background: linear-gradient(180deg, #ffb779 0%, #cd7f32 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 10px var(--cyan-glow);
}
[data-skin="steampunk-core"] .tab-bar {
  border-top: 2px solid var(--border-soft);
  background: var(--nav-translucent);
  backdrop-filter: none;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
}
[data-skin="steampunk-core"] .app-header {
  border-bottom: 2px solid var(--border-soft);
  background: var(--nav-translucent);
  backdrop-filter: none;
}

.sheet-section { margin-bottom: 22px; }
.sheet-section--compact { margin-bottom: 14px; }
.sheet-section--compact .field-group-heading { margin: 0 0 6px; font-size: 0.86rem; }
.sheet-section--compact .hint { font-size: 0.72rem; margin: 5px 0 3px; line-height: 1.35; }
.sheet-section--compact .btn-row { gap: 8px; margin: 6px 0; }
.sheet-section--compact .btn-row .btn { padding: 9px 12px; font-size: 0.8rem; min-width: 110px; }
.sheet-section--compact .section-title-row { margin: 4px 0 -2px; }

/* ---------------- Custom background upload (Settings) ---------------- */
.opacity-preview-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.opacity-preview-swatch {
  position: relative;
  flex: none;
  width: 64px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Stands in for a custom background photo sitting behind your widgets —
   the fill layer on top is what the sliders actually control. */
.opacity-preview-swatch-bg {
  position: absolute;
  inset: 0;
  background-image: url('icons/icon-192.png');
  background-size: cover;
  background-position: center;
}
.opacity-preview-swatch-fill {
  position: absolute;
  inset: 0;
  background: rgba(var(--surface-1-rgb), 1);
}
.opacity-preview-swatch span {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.bg-upload-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bg-settings-group { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.bg-crop-wrap { margin: 4px 0 8px; }
.bg-crop-preview {
  width: 100%;
  /* Phone-screen proportions instead of a fixed short rectangle — this
     photo becomes the app's whole background, so the preview should
     reflect that shape rather than an arbitrary wide crop. */
  aspect-ratio: 9 / 19.5;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: grab;
  touch-action: none;
  margin-top: 6px;
  background-color: var(--surface-2);
}
.bg-crop-preview:active { cursor: grabbing; }

/* Widget Box Fill Transparency (Settings > Custom Background) — fades the
   solid fill behind cards/widgets so a background photo shows through them
   too, not just the page behind them. --widget-fill-alpha defaults to 1
   (fully opaque, i.e. unchanged from normal appearance) and is set by JS
   from the slider. Deliberately NOT color-mix(): older iOS Safari (e.g.
   iOS 15) doesn't parse it and drops the whole declaration, leaving the
   box fully transparent with no way to fix it from the slider. rgba() fed
   by a plain R,G,B custom property per theme/skin is supported by every
   browser that understands CSS custom properties at all. */
:root { --widget-fill-alpha: 1; --widget-opacity: 1; }
/* Both sliders fade the card's FILL only, via a ::before layer placed
   behind the real content (z-index: -1) — never the real element's own
   `opacity`, which would cascade onto every descendant and wash out
   buttons, input fields, and text inside along with it (CSS opacity can't
   be "undone" by a child). Border stays on the real element, fully opaque,
   for a crisp edge regardless of either slider. Header, footer, nav bar,
   and the chat card are deliberately excluded below and stay fully solid. */
.chart-card, .stat-tile, .ring-card, .computed-card, .hero-card,
.datetime-card, .ex-card, .session-done-card, .cardio-history, .selected-food-card {
  position: relative;
  background: none;
}
.chart-card::before, .stat-tile::before, .ring-card::before, .computed-card::before, .hero-card::before,
.datetime-card::before, .ex-card::before, .session-done-card::before, .cardio-history::before, .selected-food-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: var(--widget-opacity);
}
.chart-card::before, .stat-tile::before, .ring-card::before, .computed-card::before,
.datetime-card::before, .ex-card::before, .session-done-card::before, .cardio-history::before {
  background: rgba(var(--surface-1-rgb), var(--widget-fill-alpha));
}
.selected-food-card::before {
  background: rgba(var(--surface-2-rgb), var(--widget-fill-alpha));
}
.hero-card::before {
  background: linear-gradient(160deg,
    rgba(var(--surface-2-rgb), var(--widget-fill-alpha)),
    rgba(var(--surface-1-rgb), var(--widget-fill-alpha)));
}

/* Chatroom is excluded entirely from both sliders — always solid. */
#chatCard { background: var(--surface-1); }
#chatCard::before { content: none; }

/* ================================================================
   Desktop Shell (wellness.winfinityfitness.com only)
   Scoped entirely by #wdsShell's own display toggle below — every other
   rule in this block uses wds- prefixed classes that don't exist anywhere
   else in the app, so none of it can ever affect the mobile layout or the
   plain GitHub Pages URL even if this file loads there. Reuses the app's
   own color/font tokens (:root above) so it stays visually consistent with
   the native app rather than introducing a second design language.
   ================================================================ */
#wdsShell { display: none; }
html.wf-desktop-shell #wdsShell {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--bg);
  font-family: var(--font-display);
  overflow-y: auto;
}

/* ---------- Sign-in gate ---------- */
.wds-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(51,200,204,0.10), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 100%, rgba(128,105,214,0.08), transparent 60%);
}
.wds-gate-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.wds-gate-logo { width: 56px; height: 56px; margin-bottom: 14px; }
.wds-gate-title {
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.wds-gate-title span { color: var(--cyan); }
.wds-gate-sub { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 22px; }
.wds-gate-field { display: block; text-align: left; margin-bottom: 18px; }
.wds-gate-field span {
  display: block; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.wds-gate-field input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 6px;
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 0.92rem;
}
.wds-gate-field input:focus { outline: none; border-color: var(--cyan); }
.wds-gate-btn {
  width: 100%; padding: 12px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--gradient-bar); color: #060a0d; font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.wds-gate-btn:hover { filter: brightness(1.08); }
.wds-gate-note { color: var(--text-muted); font-size: 0.72rem; margin: 16px 0 0; line-height: 1.5; }

/* ---------- Top nav ---------- */
.wds-topnav {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 28px; background: var(--nav-translucent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 5;
}
.wds-topnav-brand { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; letter-spacing: 0.05em; color: var(--cyan); font-weight: 800; white-space: nowrap; }
.wds-topnav-tabs { display: flex; gap: 4px; flex: 1; }
.wds-topnav-tab {
  background: none; border: none; color: var(--text-secondary); font-size: 0.72rem;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.wds-topnav-tab svg { flex-shrink: 0; opacity: 0.85; }
.wds-topnav-tab:hover { color: var(--text-primary); background: var(--surface-2); }
.wds-topnav-tab.is-active { color: var(--cyan); background: var(--surface-2); }
.wds-topnav-tab.is-active svg { opacity: 1; }
.wds-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--critical); display: inline-block; }
.wds-topnav-user { display: flex; align-items: center; gap: 14px; position: relative; }
.wds-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; position: relative;
}
.wds-icon-btn:hover { color: var(--cyan); border-color: var(--border); }
.wds-bell-badge {
  position: absolute; top: -3px; right: -3px; background: var(--critical); color: #fff;
  font-size: 0.6rem; font-weight: 700; border-radius: 50%; width: 15px; height: 15px;
  display: grid; place-items: center; font-family: var(--font-mono);
}
.wds-notif-pop {
  position: absolute; top: 42px; right: 44px; width: 260px; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.wds-notif-item { font-size: 0.78rem; color: var(--text-secondary); margin: 0; padding: 8px 6px; border-bottom: 1px solid var(--border-soft); }
.wds-notif-item:last-child { border-bottom: none; }
.wds-notif-item strong { color: var(--text-primary); }
.wds-user-chip { display: flex; align-items: center; gap: 10px; }
.wds-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-bar);
  color: #060a0d; font-weight: 700; display: grid; place-items: center; font-size: 0.85rem;
  flex-shrink: 0;
}
.wds-user-avatar--sm { width: 26px; height: 26px; font-size: 0.72rem; flex-shrink: 0; }
.wds-user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.wds-user-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.wds-user-name { font-size: 0.78rem; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-family: var(--font-mono); }
.wds-logout-btn {
  background: transparent; border: 1px solid var(--border-soft); color: var(--text-secondary);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 20px; cursor: pointer; font-family: var(--font-display);
  white-space: nowrap;
}
.wds-logout-btn:hover { color: var(--text-primary); border-color: var(--border); background: var(--surface-2); }

/* ---------- Main / grid ---------- */
.wds-main { max-width: 1240px; margin: 0 auto; padding: 24px 28px 60px; }
.wds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wds-grid--nexus { grid-template-columns: 280px 1fr 260px; align-items: start; }

.wds-card {
  background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--card-radius, 8px);
  padding: 18px 20px; grid-column: span 1;
}
.wds-card--wide { grid-column: span 2; }
.wds-card--gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.wds-card-title { font-size: 0.82rem; letter-spacing: 0.03em; color: var(--text-secondary); margin: 0 0 12px; font-weight: 600; text-transform: uppercase; }
.wds-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.wds-card-head .wds-card-title { margin: 0; }
.wds-card-sub { color: var(--text-muted); font-size: 0.72rem; }
.wds-card-foot { font-size: 0.76rem; margin: 4px 0 0; }
.wds-foot-good { color: var(--good); }
.wds-foot-warning { color: var(--warning); }

/* Tile row spans the full grid width as its own flex strip */
.wds-tile-row { grid-column: span 4; display: flex; gap: 18px; }
.wds-tile-row--wide { grid-column: span 4; }
.wds-tile {
  flex: 1; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: var(--card-radius, 8px);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.wds-tile-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.wds-tile-value { font-family: var(--font-mono); font-size: 1.25rem; color: var(--text-primary); font-weight: 600; }
.wds-tile-sub { font-size: 0.72rem; }

/* Gauge (conic-gradient ring) */
.wds-gauge {
  --pct: 50;
  width: 116px; height: 116px; border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid; place-items: center; position: relative;
}
.wds-gauge--warning { background: conic-gradient(var(--warning) calc(var(--pct) * 1%), var(--surface-2) 0); }
.wds-gauge::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface-1); }
.wds-gauge-value { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 1.5rem; color: var(--text-primary); font-weight: 700; }
.wds-gauge-value small { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

/* Protocol card */
.wds-card--protocol { grid-column: span 2; }
.wds-protocol-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wds-protocol-head .wds-card-title { margin: 0; }
.wds-protocol-name { font-size: 1.05rem; color: var(--text-primary); font-weight: 600; margin: 2px 0 12px; }
.wds-pill {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; font-family: var(--font-mono);
}
.wds-pill--cyan { background: rgba(51,200,204,0.14); color: var(--cyan); }
.wds-pill--locked { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.wds-progress { height: 7px; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.wds-progress-fill { height: 100%; background: var(--gradient-bar); border-radius: 20px; }
.wds-protocol-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.74rem; color: var(--text-secondary); font-family: var(--font-mono); }

/* Line/area chart */
.wds-linechart { width: 100%; height: 150px; display: block; }
.wds-gridlines line { stroke: var(--gridline); stroke-width: 1; }

/* Bar chart */
.wds-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.wds-bars--sleep { height: 150px; }
.wds-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.wds-bar { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--gradient-bar); min-height: 4px; }
.wds-bar--today { background: var(--cyan); }
.wds-bar--future { background: var(--surface-2); }
.wds-bar-col span { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }

/* Teaser card */
.wds-card--teaser { display: flex; gap: 16px; align-items: center; }
.wds-teaser-img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; opacity: 0.9; }
.wds-teaser-body .wds-card-title { margin: 8px 0 4px; }
.wds-mini-btn {
  margin-top: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--cyan);
  font-size: 0.76rem; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.wds-mini-btn:hover { background: rgba(51,200,204,0.1); }

/* Hero card (Training) */
.wds-card--hero {
  background: linear-gradient(135deg, rgba(128,105,214,0.16), rgba(51,200,204,0.10)), var(--surface-1);
  padding: 26px 28px;
}
.wds-hero-title { font-size: 1.4rem; margin: 6px 0 4px; color: var(--text-primary); }
.wds-hero-btn { width: auto; padding: 10px 22px; margin-top: 14px; }

/* Week strip */
.wds-weekstrip { display: flex; gap: 10px; }
.wds-weekday {
  flex: 1; text-align: center; padding: 12px 6px; border-radius: 6px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--text-secondary);
  border: 1px solid transparent;
}
.wds-weekday strong { font-size: 0.8rem; color: var(--text-primary); }
.wds-weekday--push strong { color: var(--cyan); }
.wds-weekday--pull strong { color: var(--violet); }
.wds-weekday--legs strong { color: var(--magenta); }
.wds-weekday--cardio strong { color: var(--good); }
.wds-weekday--rest strong { color: var(--text-muted); }
.wds-weekday--active { border-color: var(--cyan); background: rgba(51,200,204,0.08); }

/* Forecast list */
.wds-forecast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wds-forecast-list li { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-secondary); }
.wds-forecast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; }

/* Nutrition */
.wds-macro-row { display: flex; flex-direction: column; gap: 14px; }
.wds-macro-head { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; font-family: var(--font-mono); }
.wds-fuel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wds-fuel-list li { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary); padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.wds-fuel-list li:last-child { border-bottom: none; padding-bottom: 0; }
.wds-fuel-list li span:first-child { color: var(--text-primary); }
.wds-slider-track { position: relative; height: 6px; border-radius: 20px; background: var(--surface-2); margin: 20px 4px 8px; }
.wds-slider-fill { position: absolute; inset: 0; width: 35%; border-radius: 20px; background: var(--gradient-bar); }
.wds-slider-knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(51,200,204,0.2); }
.wds-slider-labels { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-muted); }

.wds-marker-row { display: flex; flex-direction: column; gap: 14px; }

/* Nexus */
.wds-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wds-lb-list li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; font-size: 0.84rem; }
.wds-lb-rank { width: 20px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }
.wds-lb-name { flex: 1; color: var(--text-primary); }
.wds-lb-score { color: var(--cyan); font-family: var(--font-mono); font-weight: 600; }
.wds-lb-self { background: rgba(51,200,204,0.08); }
.wds-lb-self .wds-lb-name { color: var(--cyan); font-weight: 600; }

.wds-card--feed { display: flex; flex-direction: column; }
.wds-feed { display: flex; flex-direction: column; gap: 16px; }
.wds-feed-post { display: flex; gap: 10px; }
.wds-feed-body p { margin: 0 0 6px; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.4; }
.wds-feed-body p:first-child { margin-bottom: 4px; }
.wds-feed-body strong { color: var(--text-primary); }
.wds-feed-time { color: var(--text-muted); font-size: 0.72rem; margin-left: 6px; }
.wds-feed-actions { display: flex; gap: 14px; font-size: 0.74rem; color: var(--text-muted); }
.wds-feed-compose { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.wds-feed-compose input {
  flex: 1; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-secondary); font-family: var(--font-display); font-size: 0.82rem;
}
.wds-feed-compose input:disabled, .wds-feed-compose button:disabled { opacity: 0.5; cursor: not-allowed; }

.wds-spotlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wds-spotlight-list li { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-secondary); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .wds-grid { grid-template-columns: repeat(2, 1fr); }
  .wds-card--wide, .wds-tile-row, .wds-card--protocol { grid-column: span 2; }
  .wds-grid--nexus { grid-template-columns: 1fr; }
  .wds-tile-row { flex-wrap: wrap; }
  .wds-tile { min-width: 140px; }
}
@media (max-width: 680px) {
  .wds-topnav { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .wds-topnav-tabs { order: 3; width: 100%; overflow-x: auto; }
  .wds-main { padding: 18px 16px 40px; }
  .wds-grid, .wds-grid--nexus { grid-template-columns: 1fr; }
  .wds-card--wide, .wds-tile-row, .wds-card--protocol { grid-column: span 1; }
}