: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;
  cursor: pointer;
}
.sys-version:focus-visible { outline: 1px solid var(--good); outline-offset: 3px; border-radius: 2px; }
.sys-version.has-update::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  margin-right: 5px;
  vertical-align: middle;
  box-shadow: 0 0 4px var(--good);
}
.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;
}
/* Tappable title that toggles a description hint below it (see
   wireAutoHideHint in app.js) — a subtle dotted underline is the only
   visual cue it does something, so it doesn't look like every other
   plain section heading. */
.is-hint-trigger { cursor: pointer; border-bottom: 1px dotted var(--border); width: fit-content; }

/* 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;
}

/* ---------------- Entity Identity photo ---------------- */
.entity-photo-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.entity-photo-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 700; font-size: 1.3rem; display: grid; place-items: center; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.entity-photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.entity-photo-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
#setupPhotoLockHint { margin: 0; max-width: 220px; }
#setupPhotoNote { margin: 0; }

/* ---------------- 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; min-width: 0; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.rank-digital-id {
  display: block; font-weight: 400; font-size: 0.68rem; font-family: var(--font-mono);
  color: var(--text-muted); letter-spacing: normal; margin-left: 0; white-space: nowrap;
}
.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-row { display: flex; align-items: center; gap: 4px; margin: 0 0 2px 0; }
.chat-name-row .chat-name { margin: 0; }
.wds-chat-msg-avatar {
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-soft);
  display: grid; place-items: center; font-size: 0.55rem; font-weight: 700; color: var(--text-secondary);
  flex: none; cursor: pointer;
}
.chat-name-link { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
/* Bubble + timestamp sit side by side, time OUTSIDE the bubble on the
   inner edge (opposite whichever side the bubble itself hugs) — own
   messages hug the right, so their time sits just to the LEFT of the
   bubble; received messages hug the left, so their time sits to the
   RIGHT. Same DOM order (bubble then time) for both; row-reverse on the
   own variant is what flips the visual side without duplicating markup. */
.chat-bubble-line { display: flex; align-items: flex-end; gap: 5px; max-width: 100%; }
.chat-row--own .chat-bubble-line { flex-direction: row-reverse; }
/* Filled, rounded "pill" bubbles (Messenger's own format/sizing) instead
   of the previous outlined/transparent HUD-style box — own messages fill
   with the theme's own gradient, received messages fill with a neutral
   surface, rather than importing Messenger's blue/gray. */
.chat-bubble {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  border: none;
  border-radius: 18px;
  padding: 8px 13px;
}
.chat-row--own .chat-bubble { background: var(--gradient-bar); border-bottom-right-radius: 4px; }
.chat-row--own .chat-msg { color: #060a0d; }
.chat-row--other .chat-bubble { background: var(--surface-2); border-bottom-left-radius: 4px; }
.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; padding-bottom: 4px; }
/* "Seen by" row — desktop-only, under the most recent message only. */
.wds-chat-seen-row { display: flex; align-self: flex-end; margin: 2px 4px 0 0; }
.wds-chat-seen-avatar {
  width: 15px; height: 15px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--surface-1);
  display: grid; place-items: center; font-size: 0.5rem; font-weight: 700; color: var(--text-secondary);
  margin-left: -5px;
}
.wds-chat-seen-avatar:first-child { margin-left: 0; }
/* 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;
}
/* Always bottom-right of the bubble, own or received — matches the feed
   post reaction summary's fixed bottom-right placement instead of
   flipping sides by sender. */
.chat-reactions { right: -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; }
/* Desktop-only link preview (see wdsExtractVideoEmbed) — a public
   YouTube/Facebook video URL already in the message text expands into the
   platform's own embed player, capped to a compact fixed width so it can't
   dominate the chat card. */
.chat-bubble--has-video { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-row--own .chat-bubble--has-video { align-items: flex-end; }
.chat-video-embed { width: 260px; max-width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; }
.chat-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Feed posts run full-width like an attached photo (.wds-post-image),
   unlike the deliberately compact chat-bubble sizing above. */
.wds-feed-post .chat-video-embed, .wds-profile-grid-tile .chat-video-embed { width: 100%; }
.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;
  /* #wdsShell (the desktop dashboard) sits at z-index 999999 and covers
     the whole viewport — without outranking it here, the lightbox was
     genuinely opening (hidden was correctly cleared) but rendered
     completely underneath the shell, invisible on the desktop site even
     though it worked fine on mobile (no #wdsShell there to compete with). */
  z-index: 1000000;
  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); }
.chat-lightbox-close {
  position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-primary);
  font-size: 1rem; cursor: pointer; z-index: 501;
}

/* ---------------- 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. A full circle (same 8mm/30px
   diameter the old half-circle edge bump used) sitting just inside the
   edge instead of clipped by it — matches the web dashboard's own
   quick-access dial (logo inside a circle) rather than a strip poking out
   of the screen. */
.admin-drawer-tab {
  position: fixed;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  z-index: 400;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  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 — a full circle
   looks identical either way, so this variant only needs to flip which
   side the container itself hugs. */
.admin-drawer-tab--left { right: auto; left: 4px; }
.admin-drawer-tab-bar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: var(--surface-1);
  box-shadow: 0 0 10px var(--cyan-glow), 0 2px 6px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.admin-drawer-tab-bar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; pointer-events: none; }
/* Same universal border-radius reset (Grand Core/Nezuko Digital) the web
   dial had to fight — ID/class-scoped !important keeps both the tab and
   every arc icon circular under any skin. */
#adminDrawerTab .admin-drawer-tab-bar,
#adminDrawerTab .admin-drawer-tab-bar img,
.admin-drawer-pill-item { border-radius: 50% !important; }

.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;
  color: var(--text-primary) !important;
  border: none !important;
  border-bottom: 1px solid var(--cyan-dim) !important;
}
/* Sync PIN fields specifically get a white box (not just visible text on
   the theme's own dark background) — easy to mistake for empty/disabled
   otherwise, and this is a security-relevant field worth making obvious. */
[data-skin="sovereign-core"] #webSyncPinInput,
[data-skin="sovereign-core"] #webSyncOldPinInput {
  background: #ffffff !important;
  color: #111111 !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; }

/* ================================================================== */
/* SKIN: Default Core — "Minimalist." Fourth rebuild: strips every
   transparency and glow effect the app's shared component CSS drives off
   --surface-translucent/--nav-translucent/--cyan-glow/--gradient-glow, so
   this skin renders those effects as fully opaque/inert everywhere they're
   used (box-shadow, text-shadow, filter: drop-shadow, backdrop-filter)
   without needing per-component overrides — cards stay on the shared
   .wds-card/.chart-card rules, which already fill flat with var(--surface-1)
   and pick up nothing extra from this skin. Dark mode is a cool, neutral
   dark; light mode is pure clean white. Plain system sans-serif only, no
   custom display font. Pairs with the Digital/Minimalist mode toggle
   (Settings > Theme) — selecting Minimalist just applies this skin.

   THE APP DEFAULT — see initSkinSelector's fallback in app.js. */
/* ================================================================== */
:root[data-skin="default-core"] {
  --bg: #0a0d10;
  --bg-elevated: #12161a;
  --surface-1: #12161a;
  --surface-2: #171c21;
  --surface-1-rgb: 18,22,26;
  --surface-2-rgb: 23,28,33;
  --border: rgba(255,255,255,0.12);
  --border-soft: rgba(255,255,255,0.07);
  --text-primary: #e4e7e9;
  --text-secondary: #8a949a;
  --text-muted: #5c666c;
  --gridline: rgba(255,255,255,0.06);
  --baseline: rgba(255,255,255,0.14);

  --cyan: #3fb8c4;
  --cyan-dim: #2a7d86;
  --cyan-glow: rgba(0,0,0,0);
  --violet: #7c74c9;
  --magenta: #b95fa8;

  --series-1: #3fb8c4;
  --series-2: #7c74c9;
  --gradient-bar: linear-gradient(90deg, var(--violet) 0%, #4a8fce 55%, var(--cyan) 100%);
  --gradient-glow: rgba(0,0,0,0);

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

  --surface-translucent: #0a0d10;
  --nav-translucent: #12161a;

  --card-radius: 8px;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
  --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-headline: var(--font-display);
}
:root[data-skin="default-core"][data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f5f6;
  --surface-1-rgb: 255,255,255;
  --surface-2-rgb: 244,245,246;
  --border: rgba(0,0,0,0.12);
  --border-soft: #e6e8ea;
  --text-primary: #24282a;
  --text-secondary: #4a5457;
  --text-muted: #737c80;
  --gridline: rgba(25, 28, 30, 0.08);
  --baseline: #c7ced1;

  --cyan: #0b8fa3;
  --cyan-dim: #0c6d7e;
  --cyan-glow: rgba(0,0,0,0);
  --violet: #5d47ab;
  --magenta: #9c1c47;

  --series-1: #0b8fa3;
  --series-2: #5d47ab;
  --gradient-bar: linear-gradient(90deg, var(--violet) 0%, #4a8fce 55%, var(--cyan) 100%);
  --gradient-glow: rgba(0,0,0,0);

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

  --surface-translucent: #ffffff;
  --nav-translucent: #ffffff;
}
/* No decorative body pattern/radial glow — plain flat background only,
   this skin specifically (every other skin keeps its own body look). */
[data-skin="default-core"] body { background-image: none !important; }
/* No glass/blur surfaces anywhere in this skin — every popup, sheet, and
   translucent nav bar renders fully opaque instead. */
[data-skin="default-core"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------------- 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;
}

/* Messenger Shell (messenger.winfinityfitness.com) — full-viewport, mobile
   only, same isolation approach as #wdsShell above. */
#wdsMessengerShell { display: none; }
html.wf-messenger-shell #wdsMessengerShell {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--bg);
  font-family: var(--font-display);
}
.wdm-status { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--text-secondary); }
.wdm-app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wdm-header { padding: 16px 16px 8px; }
.wdm-header strong { font-size: 1.4rem; color: var(--text-primary); }
.wdm-search-wrap { position: relative; margin: 4px 16px 8px; }
.wdm-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.wdm-search {
  width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 20px; padding: 10px 14px 10px 34px; color: var(--text-primary); font-size: 0.9rem;
}
.wdm-tabs { display: flex; gap: 4px; padding: 0 16px 8px; border-bottom: 1px solid var(--border-soft); }
.wdm-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
  padding: 8px 10px; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.wdm-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.wdm-thread-list { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }

/* Opening a thread still reuses the existing floating chat-popup component
   (see wdsOpenChatPopup) rather than a rebuilt conversation view — that
   redesign (bubbles/reactions/replies) is a separate follow-up. This just
   makes that same component fill the screen instead of floating at
   300x400 bottom-right, so it's usable on a phone in the meantime. */
html.wf-messenger-shell .wds-chat-popups-wrap { position: fixed; inset: 0; z-index: 1000000; flex-direction: column; right: auto; bottom: auto; }
html.wf-messenger-shell .wds-chat-popup { width: 100%; height: 100%; border-radius: 0; }

/* ---------- 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%);
}
/* Shown instead of .wds-gate for the split second a remembered session is
   auto-resuming on reload (see the inline script in <head> and
   initDesktopShell's auto-resume block in app.js) — the plain sign-in
   card flashing on every refresh for someone already signed in reads as
   broken. Hidden by default; html.wf-resume-session swaps the two. */
.wds-reload-splash {
  display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
html.wf-resume-session #wdsGate { display: none !important; }
html.wf-resume-session .wds-reload-splash { display: flex !important; }
.wds-reload-splash-logo { width: 64px; height: 64px; border-radius: 16px; animation: wds-reload-pulse 1.4s ease-in-out infinite; }
@keyframes wds-reload-pulse {
  0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); }
}
.wds-reload-splash-label {
  margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .wds-reload-splash-logo { animation: none; }
}
.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; }
.wds-gate-error { color: var(--critical); font-size: 0.78rem; margin: 12px 0 0; line-height: 1.4; }
.wds-gate-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
  color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.wds-gate-divider::before, .wds-gate-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.wds-gate-btn--ghost {
  background: none; border: 1px solid var(--border); color: var(--text-primary); font-weight: 600;
}
.wds-gate-btn--ghost:hover { background: var(--surface-2); filter: none; }
/* Persistent reminder while in guest mode (see enterGuestDashboard/
   wdsGuestMode in app.js) — sits above the topnav so it's visible no
   matter which part of the dashboard is scrolled into view. */
.wds-guest-banner {
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft); color: var(--text-secondary);
  font-size: 0.76rem; text-align: center; padding: 8px 16px; line-height: 1.4;
}
.wds-guest-banner strong { color: var(--cyan); }
/* Theme popup — see index.html comment above #wdsThemePopup. */
.wds-theme-popup {
  position: fixed; inset: 0; z-index: 500; background: rgba(5,10,14,0.85);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wds-theme-popup[hidden] { display: none; }
.wds-theme-popup-card {
  width: 100%; max-width: 260px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.wds-theme-popup-row { margin-top: 8px !important; font-size: 0.8rem; }
.wds-theme-popup-select { padding: 6px 8px; font-size: 0.78rem; }

/* ---------- 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: 250;
}
.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; cursor: pointer; }
.wds-topnav-brand img { width: 24px; height: 24px; flex-shrink: 0; }
/* WINFINITY stacked above the version number — plain, unobtrusive, matches
   FT's own .sys-version look. On mobile the WINFINITY line hides (see the
   860px breakpoint below) and align-self:flex-end there keeps the version
   text sitting at the bottom of the logo instead of vertically centered. */
.wds-topnav-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.wds-topnav-version {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 400; letter-spacing: 0.02em;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.wds-topnav-version:hover, .wds-topnav-version:focus-visible { color: var(--cyan); outline: none; }
.wds-topnav-version.has-update::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--good); margin-right: 5px; vertical-align: middle; box-shadow: 0 0 4px var(--good);
}
.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: none; background: transparent;
  color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; position: relative; filter: drop-shadow(0 0 3px var(--cyan-glow));
}
.wds-icon-btn:hover { color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan-glow)); }
.wds-icon-btn.is-spinning svg { animation: wds-spin 0.7s linear infinite; }
@keyframes wds-spin { to { transform: rotate(360deg); } }
.wds-bell-badge {
  position: absolute; top: 2px; right: 2px; background: var(--good);
  border-radius: 50%; width: 9px; height: 9px; border: 1.5px solid var(--surface-1);
}
.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); }

/* Messenger-style Chats panel (opened from the header chat icon). */
.wds-chat-list-pop { width: 320px; max-height: 70vh; display: flex; flex-direction: column; padding: 12px; }
.wds-chat-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wds-chat-list-head strong { font-size: 0.92rem; color: var(--text-primary); }
.wds-chat-list-search-wrap { position: relative; margin-bottom: 8px; }
.wds-chat-list-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.wds-chat-list-search {
  width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 20px; padding: 8px 14px 8px 32px; color: var(--text-primary); font-size: 0.8rem;
}
.wds-chat-list-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.wds-chat-list-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
  padding: 7px 8px; font-size: 0.76rem; font-weight: 600; cursor: pointer;
}
.wds-chat-list-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.wds-chat-list-items { overflow-y: auto; flex: 1; min-height: 0; }
.wds-chat-thread-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer;
}
/* Friends list / friend-request cards (Profile Page + notifications). */
.wds-friend-item { display: flex; align-items: center; gap: 10px; padding: 6px; }
.wds-friend-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.wds-friend-name { flex: 1; font-size: 0.82rem; color: var(--text-primary); font-weight: 600; }
.wds-people-search-id { display: block; font-size: 0.68rem; color: var(--text-muted); font-weight: 400; font-family: var(--font-mono); }
.wds-friend-actions { display: flex; gap: 6px; }
.wds-notif-item-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Nexus Leaderboard — 3rd column sidebar, below Notifications. Same
   .rank-list/.rank-row markup mobile's own Nexus tab uses (via
   renderRankList), just under compact section headers instead of full
   .chart-card wrappers since this is a narrow sidebar, not a whole tab. */
.wds-leaderboard-card { margin-top: 14px; }
.wds-lb-section-head {
  display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary);
}
.wds-lb-section-head:first-of-type { margin-top: 4px; }
.wds-leaderboard-card .rank-expand-btn { background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 0.85rem; }
.wds-chat-thread-item:hover { background: var(--surface-2); }
.wds-chat-thread-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 700; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0;
}
.wds-chat-thread-avatar--group { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-soft); }
.wds-chat-thread-body { flex: 1; min-width: 0; }
.wds-chat-thread-name { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.wds-chat-thread-item.is-unread .wds-chat-thread-name { color: var(--text-primary); font-weight: 700; }
.wds-chat-thread-preview {
  font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wds-chat-thread-item.is-unread .wds-chat-thread-preview { color: var(--text-primary); font-weight: 600; }
.wds-chat-thread-time { font-size: 0.66rem; color: var(--text-muted); flex-shrink: 0; }
.wds-chat-thread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
/* Nexus Com — pinned first in every thread list (wdsChatThreadList), 🌐
   instead of an avatar/initial, highlighted so it still reads as the
   official public room even though it's structurally just another entry. */
.wds-chat-thread-item--pinned { background: var(--surface-2); border-left: 2px solid var(--accent); }
.wds-chat-thread-item--pinned:hover { background: var(--surface-2); filter: brightness(1.08); }
.wds-chat-thread-item--pinned .wds-chat-thread-avatar {
  background: var(--gradient-bar); box-shadow: 0 0 6px var(--cyan-glow); font-size: 1.2rem;
}

/* Floating Messenger-style popup windows, stacked bottom-right. */
.wds-chat-popups-wrap {
  position: fixed; right: 76px; bottom: 0; z-index: 260; display: flex; gap: 10px;
  align-items: flex-end; pointer-events: none; flex-direction: row-reverse;
}
.wds-chat-popup {
  width: 300px; height: 400px; background: var(--surface-1); border: 1px solid var(--border-soft);
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.4); display: flex; flex-direction: column;
  pointer-events: auto; overflow: hidden;
}
.wds-chat-popup-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft); background: var(--surface-2); flex-shrink: 0;
}
.wds-chat-popup-head-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 800; font-size: 0.78rem; display: grid; place-items: center; flex-shrink: 0;
}
.wds-chat-popup--pinned .wds-chat-popup-head { border-bottom-color: var(--accent); box-shadow: inset 0 0 12px var(--cyan-glow); }
.wds-chat-popup--pinned .wds-chat-popup-head-avatar { font-size: 1rem; box-shadow: 0 0 6px var(--cyan-glow); }
.wds-chat-popup-head strong, .wds-chat-popup-head h3 { flex: 1; font-size: 0.82rem; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wds-chat-popup-close, .wds-chat-popup-minimize { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.wds-chat-popup-close:hover, .wds-chat-popup-minimize:hover { color: var(--cyan); }
/* Minimizing hides the whole floating window (not just its body) — the
   bottom-right contact rail's own avatar chip (.wds-chat-contact-avatar,
   driven by the same underlying .wds-chat-popup elements still being in
   the DOM) is the only visual left representing it as "still open". */
.wds-chat-popup.is-minimized { display: none; }
.wds-chat-popup-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.wds-chat-popup-input-row { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.wds-chat-popup-input-row input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 18px;
  padding: 8px 13px; color: var(--text-primary); font-size: 0.78rem;
}
.wds-chat-popup-attach-btn {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: none; border: none;
  color: var(--cyan); cursor: pointer; font-size: 0.95rem; display: grid; place-items: center;
}
.wds-chat-popup-attach-btn:hover { background: var(--surface-2); }
.wds-chat-popup-pending-image {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; flex-shrink: 0;
}
.wds-chat-popup-pending-image[hidden] { display: none; }
.wds-chat-popup-pending-image img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--cyan);
}
.wds-chat-popup-pending-image button {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-primary); font-size: 10px; line-height: 1; cursor: pointer;
}
@media (max-width: 900px) {
  .wds-chat-popups-wrap { right: 4px; }
  .wds-chat-popup { width: calc(100vw - 8px); }
}

/* Right-edge contact rail — quick-access avatars for your existing DM
   threads (Facebook's own "Active Contacts" strip). Clicking one opens
   or focuses that DM's popup window. */
.wds-chat-contact-rail {
  position: fixed; right: 8px; bottom: 12px; z-index: 259; display: flex; flex-direction: column;
  gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 0;
}
.wds-chat-contact-avatar {
  position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--gradient-bar); color: #060a0d; font-weight: 700; font-size: 1rem;
  display: grid; place-items: center; border: 2px solid var(--surface-1); box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.wds-chat-contact-avatar .wds-chat-thread-dot {
  position: absolute; left: -1px; bottom: -1px; background: var(--good); box-shadow: 0 0 0 2px var(--surface-1);
}
.wds-chat-contact-avatar.is-open { border-color: var(--cyan); }
.wds-chat-contact-avatar--pinned { box-shadow: 0 0 8px var(--cyan-glow), 0 2px 10px rgba(0,0,0,0.3); font-size: 1.15rem; }
.wds-chat-contact-avatar-close {
  position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-soft);
  font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.wds-chat-contact-avatar-close:hover { background: var(--critical); color: #fff; border-color: var(--critical); }
.wds-user-chip { display: flex; align-items: center; gap: 10px; }
.wds-admin-badge {
  background: var(--gradient-bar); color: #060a0d; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px;
}
.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; background-size: cover; background-position: center;
}
.wds-user-mode-icon {
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--border); display: grid; place-items: center; padding: 5px;
  box-sizing: border-box; flex-shrink: 0; cursor: pointer; overflow: hidden;
}
.wds-user-mode-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wds-user-mode-icon--photo { padding: 0; border-color: var(--accent); }
.wds-user-mode-icon--photo img { object-fit: cover; border-radius: 50%; }
.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; display: inline-flex; align-items: center; gap: 6px;
}
.wds-logout-icon { flex-shrink: 0; }
.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; }

/* ---------- Unified single-page layout (replaces the tabbed wds-main) ---------- */
.wds-topnav-spacer { flex: 1; }
.wds-unified {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  gap: 18px;
  max-width: 1500px;
  min-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 50px;
  align-items: start;
}
html.wf-desktop-shell body { overflow-x: auto; }
.wds-uni-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Facebook-style icon strip above the composer (Home/Reels/Marketplace/
   Groups/Games). Sits in normal flow at the top of the center column, so
   it inherits .wds-uni-col's own gap instead of needing its own margins. */
.wds-nexus-icon-tabs {
  display: flex; justify-content: space-around; background: var(--surface-1);
  border: 1px solid var(--border-soft); border-radius: 10px; padding: 4px 6px;
}
.wds-nexus-icon-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 0; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); cursor: pointer;
}
.wds-nexus-icon-tab:hover { color: var(--text-primary); }
.wds-nexus-icon-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.wds-uni-left, .wds-uni-right { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.wds-uni-right { display: flex; flex-direction: column; }
/* The Nexus Leaderboard is now the only card in the right column (the
   separate Notifications card was removed — the bell icon's own dropdown
   covers that) — let it grow to fill the column's full sticky height. */
.wds-uni-right .wds-leaderboard-card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.wds-gauge--mini { width: 76px; height: 76px; }
.wds-gauge--mini .wds-gauge-value { font-size: 1.05rem; }
.wds-gauge--mini .wds-gauge-value small { font-size: 0.62rem; }
.wds-linechart--mini { height: 60px; }

.wds-mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wds-mini-stat { display: flex; flex-direction: column; gap: 2px; }
.wds-mini-stat span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.wds-mini-stat strong { font-family: var(--font-mono); font-size: 0.92rem; color: var(--text-primary); font-weight: 700; }
.wds-mini-stat small { font-size: 0.66rem; color: var(--text-secondary); }

/* My Day story row — Instagram/Facebook-style vertical-rectangle preview
   cards (not circular rings): each card shows the story's own image or
   gradient+text as a live preview, with the poster's name pinned at the
   bottom. A dashed empty card means "no story yet, tap to add"; a solid
   border means an active story, tap to view it. */
.wds-myday-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; margin-bottom: 14px; }
.wds-myday-item {
  position: relative; flex-shrink: 0; width: 92px; height: 148px; border-radius: 12px;
  overflow: hidden; cursor: pointer; background: var(--surface-2); border: 2px solid var(--border-soft);
  box-sizing: border-box;
}
.wds-myday-item--has-story { border-color: var(--accent); }
.wds-myday-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wds-myday-thumb-text {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px;
  text-align: center; font-size: 0.74rem; font-weight: 600; line-height: 1.3; color: #fff; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(128,105,214,0.9), rgba(51,200,204,0.75));
}
/* "Your Day" before you've posted anything — reads as your profile
   picture (an avatar-style tinted circle, not a live preview) so it's
   visually distinct from every other tile, which shows real content. */
.wds-myday-item--create { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wds-myday-create-avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), rgba(128,105,214,0.85));
  color: #fff; font-weight: 800; font-size: 1.3rem;
}
.wds-myday-avatar-badge {
  position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-primary); display: grid; place-items: center;
  font-weight: 700; font-size: 0.72rem; box-shadow: 0 0 0 2px var(--accent); z-index: 1;
}
.wds-myday-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; font-size: 0.68rem; font-weight: 700;
  color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wds-myday-item--create .wds-myday-name {
  position: static; background: none; color: var(--text-secondary); text-align: center; padding: 6px 4px 0;
}
.wds-myday-add-badge {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 1.1rem; box-shadow: 0 0 0 2px var(--surface-1), 0 0 6px var(--cyan-glow); z-index: 1;
}
.wds-myday-item--create .wds-myday-add-badge { position: static; margin-top: 6px; }

/* Invisible full-screen click-catcher behind the dial button/menu — see
   the HTML comment above #wdsDialBackdrop for why this replaced the old
   document-click-target check. z-index sits below both .wds-dial-btn
   (400) and .wds-dial-menu (399, which is what the arc catcher and dial
   items live inside), so any of those still win a click at their own
   position; this only ever catches a click that landed on neither. */
.wds-dial-backdrop { position: fixed; inset: 0; z-index: 398; background: transparent; }
.wds-dial-backdrop[hidden] { display: none; }

/* Quick-access dial — movable circular launcher + radial icon menu.
   Default position (bottom-right corner) comes from right/bottom here;
   once dragged, JS switches it to explicit left/top (see wdsApplyDialPosition
   in app.js), and "reset to default" just clears those inline styles so
   this rule takes back over. */
.wds-dial-btn {
  /* Above every chat surface (Global Chat 258, contact rail 259, DM
     popups 260) so it's never obscured/unclickable while any of those are
     open — the whole point of it being reachable from anywhere. */
  position: fixed; z-index: 400; right: 24px; bottom: 24px; width: 56px; height: 56px;
  border-radius: 50%; border: 2px solid var(--border); background: var(--surface-1); cursor: grab;
  display: flex; align-items: center; justify-content: center; padding: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5); touch-action: none;
}
.wds-dial-btn img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; pointer-events: none; }
/* A couple of skins (Grand Core, Nezuko Digital) force border-radius on
   literally every element via a `[data-skin="..."] * { ... !important }`
   reset — ID selectors beat that regardless of !important-vs-!important
   source order, so the dial stays circular under every skin instead of
   inheriting whatever card-radius that skin uses. */
#wdsDialBtn, #wdsDialBtn img, #wdsDialMenu .wds-dial-item { border-radius: 50% !important; }
/* Narrow (mobile) viewports match the mobile app's own drawer: smaller
   (8mm launcher, 6mm arc icons) AND fixed to one corner — vertically
   centered on the right edge, same spot the mobile app's own drawer tab
   sits by default — with no free-drag repositioning (see
   wdsIsDialMobileViewport in app.js, which also skips restoring any
   saved desktop drag position here). */
@media (max-width: 860px) {
  .wds-dial-btn {
    width: 8mm; height: 8mm; top: 50%; right: 4px; bottom: auto; left: auto;
    transform: translateY(-50%); cursor: pointer;
  }
  .wds-dial-item { width: 6mm; height: 6mm; }
  .wds-dial-item svg { width: 13px; height: 13px; }
}
.wds-dial-btn:active { cursor: grabbing; }
.wds-dial-btn.is-dragging { box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: none; }
.wds-dial-btn.wds-dial-reset-pulse { animation: wds-dial-pulse 0.4s ease; }
@keyframes wds-dial-pulse {
  0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); }
}
.wds-dial-menu { position: fixed; z-index: 399; inset: 0; pointer-events: none; }
.wds-dial-menu.wds-dial-no-transition .wds-dial-item { transition: none !important; }
.wds-dial-item {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  background: var(--surface-1); border: 1px solid var(--border-soft); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4); transform: translate(-50%, -50%) scale(0);
  opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease;
}
.wds-dial-item span { display: none; }
.wds-dial-menu.is-open .wds-dial-item { pointer-events: auto; transform: translate(-50%, -50%) scale(1); opacity: 1; }
.wds-dial-item:hover { background: var(--surface-2); color: var(--accent); }
.wds-dial-item.is-focused { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow); color: var(--cyan); }
/* Mobile-viewport arc drag catcher — invisible, sits behind the icons
   (see index.html comment above #wdsDialArcCatcher). */
.wds-dial-arc-catcher {
  position: fixed; border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: auto; touch-action: none; background: transparent; z-index: 1;
}
.wds-dial-arc-catcher[hidden] { display: none; }
.wds-dial-item { z-index: 2; }

/* Story composer/viewer overlays over a dark backdrop. */
.wds-story-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(5,10,14,0.85);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wds-story-modal {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  width: 100%; max-width: 420px; padding: 18px; position: relative; max-height: 85vh; overflow-y: auto;
}
.wds-story-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wds-story-modal-head strong { font-size: 0.9rem; color: var(--text-primary); }
/* Keeps the centered title visually centered against the close button on
   the opposite side (same width as .wds-icon-btn). */
.wds-story-modal-head-spacer { width: 30px; height: 1px; flex-shrink: 0; }

/* Story create flow — a full phone-portrait canvas, matching the native
   "Create story" pattern: widget picker up top, canvas fills the middle,
   a dedicated camera shortcut floats bottom-right. Photo selection hands
   off to the device's own gallery/camera picker — a website can't read a
   user's photo library directly, so this is the closest legitimate match
   to an in-app gallery grid. */
.wds-story-create {
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px;
  height: min(88vh, 720px); padding: 16px; overflow: hidden;
}
.wds-story-widget-row { display: flex; gap: 8px; flex-shrink: 0; }
.wds-story-widget-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
  border-radius: 12px; border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.wds-story-widget-icon { font-size: 1.15rem; }

/* Background/tint swatch row — fills the whole canvas when there's no
   photo yet; becomes a color *tint* blended over the photo once one is
   chosen (the first, crossed-out swatch clears the tint). Same row for
   font choices and text colors below the canvas. */
.wds-story-bg-row, .wds-story-font-row, .wds-story-color-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px; flex-shrink: 0; scrollbar-width: none;
}
.wds-story-bg-row::-webkit-scrollbar, .wds-story-font-row::-webkit-scrollbar, .wds-story-color-row::-webkit-scrollbar { display: none; }
.wds-story-bg-swatch {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-soft); cursor: pointer; padding: 0;
}
.wds-story-bg-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent); }
.wds-story-bg-swatch--none {
  background: var(--surface-2) !important; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.7rem; line-height: 1;
}
.wds-story-photo-zoom-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 0.8rem; }
.wds-story-photo-zoom-row input[type="range"] { flex: 1; }
.wds-story-link-row { display: flex; gap: 8px; flex-shrink: 0; }
.wds-story-link-row input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 8px 10px; color: var(--text-primary); font-size: 0.8rem; font-family: var(--font-display);
}
.wds-story-link-preview { flex-shrink: 0; }
.wds-story-link-preview .wds-link-preview-card { margin-top: 0; }
/* Attached link on a posted story — a real, tappable card sitting above
   the tap-to-advance zones (z-index 2, same layer as the head/actions/
   reply row), never baked into the flattened background image. */
.wds-story-link-attach { padding: 0 14px; position: relative; z-index: 2; }
.wds-story-link-attach .wds-link-preview-card { margin-top: 0; }

.wds-story-create-canvas {
  flex: 1; position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center;
}
.wds-story-create-canvas .empty-note { padding: 0 24px; text-align: center; position: relative; z-index: 0; }

/* Photo layer — pannable/zoomable: the image sits centered at 1x scale
   (covering the canvas like object-fit:cover) then gets extra
   translate+scale on top from drag/zoom-slider input, applied in
   wdsApplyPhotoTransform (app.js). */
.wds-story-photo-layer { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; z-index: 0; }
.wds-story-photo-layer:active { cursor: grabbing; }
.wds-story-photo-layer img {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover;
  transform: translate(-50%, -50%); pointer-events: none;
}
.wds-story-blend-layer { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.55; z-index: 1; }
.wds-story-image-remove {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(5,10,14,0.6); color: #fff; border: none; cursor: pointer; font-size: 0.8rem;
}

/* Draggable/resizable/rotatable text layers. The outer .wds-story-text-item
   only translates (stays axis-aligned) so its move/resize/rotate handles
   stay easy to grab regardless of rotation — only .wds-story-text-inner
   (the actual glyphs) rotates, via a separate transform on the child. */
.wds-story-text-layers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wds-story-text-item {
  position: absolute; pointer-events: none; transform: translate(-50%, -50%); max-width: 80%;
}
.wds-story-text-inner {
  display: inline-block; pointer-events: auto; touch-action: none; cursor: text;
  text-align: center; line-height: 1.25; white-space: pre-wrap; word-break: break-word; outline: none;
}
.wds-story-text-inner:empty::before { content: 'Type something'; opacity: 0.6; }
.wds-story-text-inner[data-style="pill"] { background: rgba(0,0,0,0.45); border-radius: 12px; padding: 0.3em 0.6em; }
.wds-story-text-inner[data-style="outline"] { -webkit-text-stroke: 0.04em; }
.wds-story-text-item.is-active .wds-story-text-inner { box-shadow: 0 0 0 1.5px dashed rgba(255,255,255,0.7); }
.wds-story-text-handle {
  display: none; position: absolute; width: 26px; height: 26px; border-radius: 50%; pointer-events: auto;
  background: var(--accent); color: var(--surface-1); align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.4); z-index: 2; touch-action: none;
}
.wds-story-text-item.is-active .wds-story-text-handle { display: flex; }
.wds-story-text-handle--move { top: -13px; left: -13px; cursor: move; }
.wds-story-text-handle--resize { bottom: -13px; right: -13px; cursor: nwse-resize; }
.wds-story-text-handle--rotate { top: -13px; right: -13px; cursor: grab; }

.wds-story-camera-fab {
  position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--surface-1); border: none; font-size: 1.25rem; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 4;
}

/* Font/color/style toolbar for whichever text layer is currently selected. */
.wds-story-text-toolbar { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.wds-story-toolbar-row { display: flex; align-items: center; gap: 8px; }
.wds-story-font-swatch {
  flex: none; width: 40px; height: 32px; border-radius: 8px; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-primary); font-size: 0.95rem; cursor: pointer;
}
.wds-story-font-swatch.is-active { border-color: var(--accent); color: var(--accent); }
.wds-story-color-swatch {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.wds-story-color-swatch.is-active { border-color: var(--accent); }
.wds-story-style-btn, .wds-story-text-delete-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2);
  color: var(--text-secondary); font-size: 0.72rem; padding: 6px 10px; cursor: pointer;
}
.wds-story-viewer { padding: 0; max-width: 380px; background: #000; }
/* Full screen on phones — creating and viewing a My Day story take over
   the whole viewport, matching the native app's own full-bleed feel,
   instead of a centered dialog with visible backdrop on the sides.
   Reactors/Sharers/ShareCompose/etc. keep the normal centered-modal
   treatment; this only targets these two story overlays. */
@media (max-width: 640px) {
  #wdsStoryComposerOverlay, #wdsStoryViewerOverlay { padding: 0; }
  #wdsStoryComposerOverlay .wds-story-modal, #wdsStoryViewerOverlay .wds-story-modal {
    max-width: none; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
  }
  #wdsStoryComposerOverlay .wds-story-create { max-width: none; width: 100%; height: 100%; }
}
.wds-story-viewer-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(5,10,14,0.6); border: none;
}
.wds-story-content { display: flex; flex-direction: column; position: relative; }
/* Progress row + head + actions sit above the tap zones (z-index 2 vs 1)
   so Remove/the avatar/name stay clickable — only the media area itself
   is covered by the left/right advance zones. */
.wds-story-progress-row { display: flex; gap: 4px; padding: 8px 10px 0; position: relative; z-index: 2; }
.wds-story-progress-seg { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.wds-story-progress-fill { height: 100%; width: 0%; background: #fff; border-radius: 2px; }
.wds-story-progress-fill.is-complete { width: 100%; }
/* A transition wouldn't animate here — it only fires on a style change to
   an element already in the DOM, not on initial insertion with the
   target class already applied, which is what happens every time this
   row gets rebuilt via innerHTML. A CSS animation plays automatically on
   insertion instead, so it stays in sync with the real 5s auto-advance
   timer in JS (wdsRenderCurrentStory/WDS_STORY_DURATION_MS). */
.wds-story-progress-fill.is-active { animation: wds-story-progress-fill-anim 5s linear forwards; }
@keyframes wds-story-progress-fill-anim {
  from { width: 0%; }
  to { width: 100%; }
}
.wds-story-content-head { display: flex; align-items: center; gap: 10px; padding: 14px; position: relative; z-index: 2; }
.wds-story-content-head strong { display: block; font-size: 0.84rem; color: #fff; }
.wds-story-content-head span { font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.wds-story-content-image { width: 100%; max-height: 70vh; object-fit: contain; background: #000; display: block; }
.wds-story-content-text {
  padding: 40px 24px; font-size: 1.1rem; color: #fff; text-align: center; line-height: 1.5;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(128,105,214,0.35), rgba(51,200,204,0.25));
}
.wds-story-content-actions { padding: 10px 14px 16px; display: flex; justify-content: flex-end; position: relative; z-index: 2; }
/* Reply bar — message input + quick-tap emoji, Facebook/Instagram's own
   "reply to a story" convention. Same z-index treatment as the actions
   row above (sits above the tap zones so typing/tapping an emoji here
   doesn't also advance the story). */
.wds-story-reply-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px 16px;
  position: relative; z-index: 2;
}
.wds-story-reply-input {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px; padding: 8px 14px; color: #fff; font-size: 0.8rem; font-family: var(--font-display);
}
.wds-story-reply-input::placeholder { color: rgba(255,255,255,0.6); }
.wds-story-quick-reacts { display: flex; gap: 2px; flex-shrink: 0; }
.wds-story-quick-reacts button {
  background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 2px; line-height: 1;
}
.wds-story-quick-reacts button:hover { transform: scale(1.2); }
.wds-story-reply-sent { color: #fff; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
/* Facebook/Instagram-style tap-to-advance — left half steps back, right
   half steps forward. Sits under the head/actions/reply row (z-index 1)
   so those stay clickable, but covers the media area to catch taps
   there. */
.wds-story-tap-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; cursor: pointer; }
.wds-story-tap-zone--left { left: 0; }
.wds-story-tap-zone--right { right: 0; }

/* Composer */
.wds-composer { display: flex; gap: 10px; align-items: flex-start; }
.wds-composer-box { flex: 1; }
.wds-composer-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 10px 16px; color: var(--text-primary); font-size: 0.84rem; box-sizing: border-box;
  font-family: var(--font-display); resize: vertical; min-height: 40px;
}
.wds-composer-input:focus { outline: none; border-color: var(--border); }
.wds-composer-input::placeholder { color: var(--text-muted); }
/* Multi-photo strip — one .wds-composer-pending-image-item per selected
   image, each individually removable, wrapping onto new rows past a few. */
.wds-composer-pending-image { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wds-composer-pending-image-item { position: relative; }
.wds-composer-pending-image-item img { max-height: 100px; border-radius: 8px; display: block; }
.wds-composer-pending-image-item button {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--critical); color: #fff; border: none; cursor: pointer; font-size: 0.7rem;
}
.wds-composer-actions { display: flex; gap: 6px; margin-top: 10px; }
.wds-composer-action-btn {
  flex: 1; background: none; border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px;
  color: var(--text-secondary); font-size: 0.74rem; cursor: pointer;
}
.wds-composer-action-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.wds-composer-post-btn { flex: none; padding: 7px 20px; background: var(--gradient-bar); color: #060a0d; font-weight: 700; border: none; }
.wds-composer-post-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Link preview card — a pasted URL in the feed composer or a posted
   message unfurls into this (see link-preview Edge Function). Direct
   image/video URLs render as plain media instead (no card chrome). */
.wds-link-preview-card {
  position: relative; display: block; border: 1px solid var(--border-soft); border-radius: 10px;
  overflow: hidden; text-decoration: none; color: inherit; background: var(--surface-2); margin-top: 10px;
}
a.wds-link-preview-card:hover { border-color: var(--border); }
.wds-link-preview-img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.wds-link-preview-body { padding: 10px 12px; }
.wds-link-preview-site { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 3px; }
.wds-link-preview-title { display: block; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 3px; }
.wds-link-preview-desc { margin: 0; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wds-link-preview-remove {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(5,10,14,0.75); color: #fff; border: none; cursor: pointer; font-size: 0.7rem; line-height: 1;
}

/* Feed list */
.wds-feed-list { display: flex; flex-direction: column; gap: 14px; }
.wds-feed-post { display: flex; flex-direction: column; gap: 10px; }
.wds-feed-post[data-deleted="1"] { opacity: 0.6; }
.wds-post-head { display: flex; align-items: center; gap: 10px; }
.wds-post-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-soft);
  display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); flex-shrink: 0;
}
.wds-post-meta { flex: 1; min-width: 0; }
.wds-post-meta strong { display: block; font-size: 0.84rem; color: var(--text-primary); }
.wds-post-meta span { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); }
.wds-post-unsend-btn { background: none; border: none; color: var(--text-muted); font-size: 0.68rem; cursor: pointer; padding: 4px 8px; }
.wds-post-unsend-btn:hover { color: var(--critical); }
.wds-post-visibility-select {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px;
  color: var(--text-secondary); font-size: 0.68rem; padding: 3px 4px; margin-right: 4px;
}
.wds-post-body { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.wds-post-body a { color: var(--cyan); text-decoration: none; }
.wds-post-body a:hover { text-decoration: underline; }
.wds-post-body.is-unsent { font-style: italic; color: var(--text-muted); }
.wds-post-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; display: block; }
/* Multi-image collage — 2 side by side, 3 as one big + two stacked, 4+ as
   a 2x2 grid (the last tile gets a "+N" overlay past 4 photos). */
.wds-post-gallery { display: grid; gap: 3px; border-radius: 8px; overflow: hidden; }
.wds-post-gallery.wds-gallery-2 { grid-template-columns: 1fr 1fr; }
.wds-post-gallery.wds-gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.wds-post-gallery.wds-gallery-3 .wds-gallery-tile:first-child { grid-row: span 2; }
.wds-post-gallery.wds-gallery-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.wds-gallery-tile { position: relative; overflow: hidden; }
.wds-post-gallery.wds-gallery-2 .wds-gallery-tile,
.wds-post-gallery.wds-gallery-4 .wds-gallery-tile,
.wds-post-gallery.wds-gallery-3 .wds-gallery-tile:not(:first-child) { aspect-ratio: 1; }
.wds-post-gallery.wds-gallery-3 .wds-gallery-tile:first-child { min-height: 100%; }
.wds-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.wds-gallery-overflow {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; cursor: pointer;
}
.wds-post-actions { display: flex; gap: 4px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.wds-post-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; color: var(--text-secondary); font-size: 0.76rem; padding: 6px; border-radius: 6px; cursor: pointer;
}
.wds-post-action-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.wds-post-action-btn.is-liked { color: var(--magenta); }
/* ⋮ post menu trigger — sits at the end of .wds-post-head, replacing what
   used to be an always-visible text "Remove" button for own posts only. */
.wds-post-menu-btn {
  margin-left: auto; flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  padding: 4px; border-radius: 6px; cursor: pointer; display: flex; align-items: center;
}
.wds-post-menu-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.wds-post-edit-box { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.wds-post-edit-box textarea {
  width: 100%; min-height: 60px; background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 8px 10px; color: var(--text-primary); font-size: 0.84rem;
  font-family: var(--font-display); resize: vertical; box-sizing: border-box;
}
.wds-post-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

.wds-post-comments { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.wds-post-comment { display: flex; gap: 8px; }
.wds-post-comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-soft);
  display: grid; place-items: center; font-weight: 700; font-size: 0.68rem; flex-shrink: 0;
}
.wds-post-comment-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wds-post-comment-bubble { background: var(--surface-2); border-radius: 12px; padding: 6px 12px; }
.wds-post-comment-bubble strong { display: block; font-size: 0.72rem; color: var(--text-primary); }
.wds-post-comment-bubble span { font-size: 0.8rem; color: var(--text-secondary); }
.wds-post-comment-actions { display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.wds-post-comment-actions > span { font-size: 0.66rem; color: var(--text-muted); }
.wds-comment-action-btn {
  background: none; border: none; color: var(--text-muted); font-size: 0.68rem; font-weight: 700;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 3px;
}
.wds-comment-action-btn:hover { color: var(--text-primary); }
.wds-comment-action-btn.is-liked { color: var(--magenta); }
.wds-reaction-cluster { font-size: 0.72rem; letter-spacing: -0.2em; }
/* Reactions (left) + comment count (right) share one row directly under
   the post body/media, Facebook-style — the reaction cluster is
   clickable (opens wdsShowReactors, "who reacted with what"). */
.wds-post-stats-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--text-muted); padding: 4px 2px 0;
}
.wds-reaction-summary { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.wds-reaction-summary:hover { text-decoration: underline; }
.wds-reaction-summary .wds-reaction-cluster { font-size: 0.82rem; }
.wds-post-comment-count { cursor: pointer; }
.wds-post-comment-count:hover { text-decoration: underline; }
.wds-post-stats-right { display: flex; gap: 10px; }
.wds-post-share-count { cursor: pointer; }
.wds-post-share-count:hover { text-decoration: underline; }
.wds-reactor-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.wds-reactor-emoji { font-size: 1.15rem; width: 22px; text-align: center; flex-shrink: 0; }
.wds-reactor-name { font-size: 0.82rem; color: var(--text-primary); font-weight: 600; cursor: pointer; }
.wds-reactor-name:hover { text-decoration: underline; }
.wds-reactor-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; overflow-x: auto; }
.wds-reactor-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
  padding: 7px 10px; font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wds-reactor-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Shared-post embed — quoted card under a share's own caption. */
.wds-shared-post-embed { border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px; margin-top: 4px; }
.wds-shared-post-embed .wds-post-head { margin-bottom: 6px; }
.wds-shared-post-missing { color: var(--text-muted); font-size: 0.8rem; font-style: italic; padding: 10px; }

/* Nested comment replies — one level deep, indented under their parent. */
.wds-post-comment--reply { margin-left: 38px; }
.wds-post-comment-replies { display: flex; flex-direction: column; gap: 10px; margin-left: 0; margin-top: 6px; }
.wds-comment-view-replies {
  background: none; border: none; color: var(--text-secondary); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; margin: 4px 0 0 38px; padding: 0;
}
.wds-comment-view-replies:hover { color: var(--text-primary); }
.wds-post-reply-compose { display: flex; gap: 8px; margin: 6px 0 0 38px; }
.wds-post-reply-compose input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 20px;
  padding: 6px 12px; color: var(--text-primary); font-size: 0.76rem; font-family: var(--font-display);
}
.wds-post-reply-compose button {
  background: var(--gradient-bar); border: none; border-radius: 50%; width: 26px; height: 26px;
  color: #060a0d; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.wds-post-comment-compose { display: flex; gap: 8px; margin-top: 2px; }
.wds-post-comment-compose input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 20px;
  padding: 7px 14px; color: var(--text-primary); font-size: 0.78rem; font-family: var(--font-display);
}
.wds-post-comment-compose button {
  background: var(--gradient-bar); border: none; border-radius: 50%; width: 30px; height: 30px;
  color: #060a0d; font-weight: 800; cursor: pointer; flex-shrink: 0;
}

@media (max-width: 1400px) {
  .wds-unified { grid-template-columns: 22% 1fr 26%; }
}

/* Mobile view of the desktop wellness dashboard — feed-only, no
   horizontal scroll. The stats/notifications columns are desktop
   furniture that doesn't fit a phone screen; only the center feed makes
   sense there. */
@media (max-width: 860px) {
  html.wf-desktop-shell body { overflow-x: hidden; }
  .wds-unified {
    display: block; min-width: 0; max-width: 100%; margin: 0; padding: 12px 8px 40px;
  }
  .wds-uni-left, .wds-uni-right { display: none; }
  .wds-uni-center { width: 100%; }
  .wds-topnav-brand-label { display: none; }
  .wds-topnav-brand-text { align-self: flex-end; }
  .wds-user-meta { display: none; }
  .wds-logout-label { display: none; }
  .wds-logout-btn { padding: 9px; border-radius: 50%; }
}

.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; }

/* Profile Page — full-screen overlay standing in for a routed page. Starts
   below the top nav (which stays fixed above every overlay in this app, see
   .wds-topnav's z-index) instead of inset:0, so the Back/Edit Cover Photo
   controls at its own top edge never end up hidden underneath it. */
.wds-profile-page {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--bg-body, var(--surface-1)); overflow-y: auto;
}
.wds-profile-cover {
  height: 440px; background: var(--gradient-bar); background-size: cover; background-position: center;
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px;
  overflow: hidden;
}
/* touch-action:none only while actually repositioning — applied to the
   whole cover unconditionally, it was suppressing tap/click gesture
   synthesis for every child on touch devices, including the "Edit Cover
   Photo" button itself (that's what broke it opening the file picker). */
.wds-profile-cover--repositioning { cursor: grab; touch-action: none; }
.wds-profile-cover--repositioning:active { cursor: grabbing; }
.wds-profile-cover-error { margin: 8px 0 0; padding: 0 28px; box-sizing: border-box; }
.wds-profile-cover-hint {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0;
  background: rgba(5,10,14,0.55); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 0.74rem;
  pointer-events: none;
}
.wds-profile-back {
  background: rgba(5,10,14,0.55); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  border-radius: 8px; padding: 8px 14px; font-size: 0.8rem; cursor: pointer;
}
.wds-profile-cover-edit {
  align-self: flex-end; background: rgba(5,10,14,0.55); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  border-radius: 8px; padding: 8px 14px; font-size: 0.8rem; cursor: pointer;
}
/* Save-position state swaps to a plain icon button (matches the topnav's
   own minimalist stroke-icon style) instead of a colored emoji+label. */
.wds-profile-cover .wds-icon-btn { align-self: flex-end; background: rgba(5,10,14,0.55); border-color: rgba(255,255,255,0.25); color: #fff; }
.wds-profile-cover .wds-icon-btn:hover { color: var(--cyan); }
/* Header/body/cover share the same full-width span and horizontal
   padding as .wds-topnav (28px) so the cover photo, avatar, Personal
   Details card, composer card, and navbar all line up on the same
   left/right edges instead of the cards sitting in a narrower centered
   column while the cover bleeds edge-to-edge. */
.wds-profile-header {
  display: flex; align-items: flex-end; gap: 18px; position: relative; z-index: 1;
  margin: -84px 0 0; padding: 0 28px; box-sizing: border-box;
  /* The header's negative top-margin makes it visually overlap the
     cover photo's bottom edge (avatar-over-cover is the intended look),
     but that means its own empty space — not just its buttons — was
     sitting on top of the cover's own Edit Cover Photo button and
     silently absorbing clicks meant for it. Making the header itself
     click-through, and re-enabling clicks only on its actual buttons,
     fixes that without having to hand-tune geometry so nothing overlaps. */
  pointer-events: none;
}
.wds-profile-header button { pointer-events: auto; }
.wds-profile-avatar-wrap { position: relative; flex-shrink: 0; }
.wds-profile-avatar {
  width: 128px; height: 128px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 800; font-size: 2.6rem; display: grid; place-items: center; flex-shrink: 0;
  border: 4px solid var(--surface-1); background-size: cover; background-position: center;
}
/* The "+" badge that replaced the old fixed "+ Add to Story" button —
   opens a 2-item menu (Add Story / Add Shout) instead of a single action. */
.wds-profile-avatar-add {
  position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-bar); color: #060a0d; border: 3px solid var(--surface-1);
  font-size: 1.3rem; font-weight: 800; line-height: 1; display: grid; place-items: center;
  cursor: pointer; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wds-profile-avatar-add:hover { filter: brightness(1.08); }
.wds-profile-avatar-add-menu { position: absolute; left: 0; bottom: -8px; transform: translateY(100%); z-index: 5; }
/* Shout — a small speech-bubble tucked above the avatar, own or viewed
   profile alike. Persistent (no expiry) unlike Stories. */
.wds-profile-shout-bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin: 0 0 8px;
  max-width: 220px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 7px 12px; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 10px rgba(0,0,0,0.25); pointer-events: none;
}
.wds-profile-shout-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--surface-1);
}
.wds-profile-identity { padding-bottom: 8px; }
.wds-profile-identity h2 {
  margin: 0 0 2px; font-size: 1.7rem; font-weight: 800;
  background: var(--gradient-bar); background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* The gradient fill is the SAME gradient the cover falls back to (and
     often close to whatever a custom cover photo looks like too), so the
     name needs a real outline to stay readable over any cover — a thin
     -webkit-text-stroke traces the actual glyph edges directly, unlike
     the previous text-shadow simulation, which turned out too faint to
     read against a bright cover in some themes. paint-order keeps the
     stroke from eating into the gradient fill on top of it. */
  -webkit-text-stroke: 0.4px var(--surface-1);
  paint-order: stroke fill;
}
.wds-profile-identity p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.wds-profile-viewed-actions { display: flex; gap: 8px; padding-bottom: 8px; margin-left: auto; }
@media (max-width: 720px) {
  .wds-profile-viewed-actions { margin-left: 0; }
}
/* Tab bar — All / Photos / Friends, under the header, above the two-column
   body. Facebook-style underline-active tabs. */
.wds-profile-tabs {
  display: flex; gap: 4px; padding: 0 28px; margin: 18px 0 0; border-bottom: 1px solid var(--border-soft);
}
.wds-profile-tab {
  background: none; border: none; border-bottom: 3px solid transparent; color: var(--text-secondary);
  padding: 10px 14px; font-size: 0.86rem; font-weight: 700; cursor: pointer;
}
.wds-profile-tab:hover { color: var(--text-primary); }
.wds-profile-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.wds-profile-tab-panel { display: flex; flex-direction: column; gap: 16px; }
.wds-profile-photos-head { display: flex; align-items: center; justify-content: space-between; }
.wds-profile-photos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
}
.wds-profile-photo-tile {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-2);
}
.wds-profile-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wds-profile-friends-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.wds-profile-friend-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-1); cursor: pointer;
}
.wds-profile-friend-card:hover { background: var(--surface-2); }
.wds-profile-friend-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-bar); color: #060a0d;
  font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; background-size: cover; background-position: center;
}
.wds-profile-friend-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); text-align: center; }
.wds-composer-action-btn--danger { color: var(--critical); border-color: var(--critical); }
.wds-composer-action-btn--danger:hover { background: var(--critical); color: #fff; }
[data-view-profile] { cursor: pointer; }
.wds-post-meta strong[data-view-profile]:hover,
.wds-post-comment-bubble strong[data-view-profile]:hover,
.wds-friend-item[data-view-profile]:hover .wds-friend-name { text-decoration: underline; }
.wds-profile-body {
  display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin: 24px 0; padding: 0 28px;
  box-sizing: border-box;
}
.wds-profile-side { display: flex; flex-direction: column; gap: 16px; }
.wds-profile-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wds-profile-detail-list li { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary); gap: 10px; }
.wds-profile-detail-list li strong { color: var(--text-primary); font-weight: 600; text-align: right; }
.wds-profile-main { display: flex; flex-direction: column; gap: 16px; }
/* Right-edge-aligned to match the composer card's own 20px inner padding
   (.wds-card padding: 18px 20px) above it — this row sits bare in
   .wds-profile-main with no padding of its own, so without matching that
   inset here its buttons would overshoot past the Post button's edge. */
.wds-profile-posts-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-wrap: wrap; gap: 8px; }
.wds-profile-posts-controls { display: flex; gap: 8px; align-items: center; }
.wds-wall-permission-label {
  display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-secondary);
}
.wds-wall-permission-label select {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 4px 6px; color: var(--text-primary); font-size: 0.72rem;
}
.wds-profile-view-toggle { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); }
.wds-profile-view-btn {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
  padding: 8px 4px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.wds-profile-view-btn.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.wds-profile-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wds-profile-grid-tile {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-2);
}
.wds-profile-grid-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wds-profile-grid-text {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px;
  text-align: center; font-size: 0.7rem; font-weight: 600; color: #fff; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(128,105,214,0.9), rgba(51,200,204,0.75));
}
@media (max-width: 720px) {
  .wds-profile-body { grid-template-columns: 1fr; }
  .wds-profile-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 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-mini-btn's default margin-top (meant for standalone buttons below
   other content) misaligns it inside a flex input row — and without a
   fixed shrink behavior it could still get squeezed by a long placeholder
   in a narrow popup. Neutralize both, scoped to DM/group popup send rows
   so it doesn't touch .wds-mini-btn elsewhere. */
.wds-chat-popup-input-row .wds-mini-btn { margin-top: 0; flex-shrink: 0; }

.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); }

/* Menu tab */
.wds-menu-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.84rem; color: var(--text-secondary); }
.wds-menu-row:last-of-type { border-bottom: none; }
.wds-menu-row strong { color: var(--text-primary); font-family: var(--font-mono); }
.wds-menu-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wds-menu-links a { color: var(--cyan); text-decoration: none; font-size: 0.84rem; }
.wds-menu-links a:hover { text-decoration: underline; }

/* ---------- 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; }
}