/* =============================================================================
   Soigneur themes — load AFTER /static/base.css.
   Activate with <html data-theme="A|B|C">; optional data-mode="day|night".
   Day/Night: every colour token is written once as light-dark(DAY, NIGHT).
   Which side is used follows color-scheme (see "Day / Night" below): with no
   data-mode it is "light dark", so the device's prefers-color-scheme decides
   with no script and no flash; data-mode="day|night" (written by the server
   from the soigneur_mode cookie) forces one side. Native palettes: A = night,
   B and C = day.
     A  Performance Lab           dark instrument panel, condensed numerals, mono labels
     B  Personal Wellness Studio  light, spacious, serif numerals, large photos
     C  Adaptive Health OS        light canvas, dark chrome, modular tiles, coach panel
   Fonts are self-hosted (China: no Google Fonts). 5 woff2 files, all OFL-1.1.
   New custom properties (all themes):
     --surface-2     inset tile / input background
     --border        hairline borders (replaces base.css #2a3540 / #222c35)
     --border-strong outlines of secondary buttons and inputs
     --accent-ink    text colour on an --accent fill
     --danger-ink    text colour on a --danger fill
     --star          favourite star colour
     --font-ui       body / controls
     --font-num      numerals and display headings
     --font-label    small labels (dt, th, captions)
     --chrome / --chrome-text   tab bar and sidebar (theme C)
     --tabbar        tab bar / sidebar background (A, B)
     --alert-*, --notice-*, --coach-*, --ok-bg, --danger-soft*, --thumb-empty*,
     --hover, --grid-line, --bar-from, --shadow   tinted fills that differ by day/night
   ============================================================================= */

/* ---------- Fonts (files live in /static/fonts/) ---------- */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); }

/* ---------- Day / Night ---------- */
html[data-theme] { color-scheme: light dark; }
html[data-theme][data-mode="day"] { color-scheme: light; }
html[data-theme][data-mode="night"] { color-scheme: dark; }

/* Shared: every theme gets a visible keyboard focus ring and tabular numerals. */
html[data-theme] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-theme] .stats dd, html[data-theme] .big, html[data-theme] .table, html[data-theme] .sets,
html[data-theme] .num, html[data-theme] .facts dd { font-variant-numeric: tabular-nums; }
html[data-theme] .chart { height: auto; aspect-ratio: 320 / 140; max-width: 720px; } /* uniform scale: labels and dots stay round */
html[data-theme] .chart polyline { vector-effect: non-scaling-stroke; }
html[data-theme] .chart.chart-sm { aspect-ratio: 320 / 72; } /* compact sparkline (Today trends) */
html[data-theme] .chart line { vector-effect: non-scaling-stroke; }
@media (min-width: 900px) { html[data-theme] .chart-label { font-size: 6px; } } /* chart renders ~2.2x wider on desktop */
html[data-theme] .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* odd stat count: last one spans */
html[data-theme] .demo > p { margin: 0; }
html[data-theme] .facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-theme] .facts dd .small { display: block; white-space: nowrap; }
html[data-theme] .ex { color: var(--text); }
html[data-theme] .star { color: var(--star); }
html[data-theme] .stack > p { margin: 0; }
html[data-theme] .alert > p:first-child, html[data-theme] .alert > ul { margin-top: 0; }
html[data-theme] .alert > :last-child { margin-bottom: 0; }
html[data-theme] .sets th:not(:first-child) { text-align: center; }


/* =============================================================================
   A — PERFORMANCE LAB
   Instrument panel: graphite, hairline cells, amber readout, condensed numerals,
   mono labels. Signature: stats rendered as a ruled readout grid; segmented LED bars.
   ============================================================================= */
/* Day = the same panel in daylight: aluminium greys, burnt-amber readout. */
html[data-theme="A"] {
  --bg: light-dark(#e8ebef, #080b0f); --surface: light-dark(#f7f8fa, #10151b); --surface-2: light-dark(#eef1f4, #161d25);
  --text: light-dark(#0b0f14, #e8edf2); --muted: light-dark(#4a5462, #93a0b0);
  --accent: light-dark(#9e5200, #ffb224); --accent-ink: light-dark(#ffffff, #1a1200);
  --danger: light-dark(#b3261e, #ff6b6b); --danger-ink: light-dark(#ffffff, #1a0505);
  --border: light-dark(#d0d6dd, #232d39); --border-strong: light-dark(#7d8794, #5a6777); --star: var(--accent);
  --tabbar: light-dark(#f1f3f6, #0b0f14); --grid-line: light-dark(rgba(11, 15, 20, .045), rgba(255, 255, 255, .022));
  --radius: 6px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
html[data-theme="A"] body {
  font-family: var(--font-ui);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--bg);
}
html[data-theme="A"] .top h1 {
  font: 600 2.4rem/1 var(--font-num); text-transform: uppercase; letter-spacing: .01em;
}
html[data-theme="A"] .top h1::after {
  content: ""; display: block; width: 32px; height: 3px; margin-top: 10px; background: var(--accent);
}
html[data-theme="A"] .card { border: 1px solid var(--border); padding: 14px 16px 16px; }
html[data-theme="A"] .card h2 {
  font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
html[data-theme="A"] .card h2::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
html[data-theme="A"] .card h2 small { margin-left: auto; font-size: 1em; letter-spacing: .06em; }
/* An h2 that names an exercise (workout form/view) stays big. */
html[data-theme="A"] .card h2:has(a) { font: 600 1.5rem/1.1 var(--font-num); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
html[data-theme="A"] .card h2:has(a)::before { display: none; }
html[data-theme="A"] .card h2 a { color: var(--text); text-decoration: none; }

/* Readout grid: 1px gaps over the border colour draw the cell rules. */
html[data-theme="A"] .stats { gap: 1px; background: var(--border); border: 1px solid var(--border); }
html[data-theme="A"] .stats > div { background: var(--surface); padding: 10px 12px 12px; }
html[data-theme="A"] .stats dt, html[data-theme="A"] .facts dt {
  font: 500 .68rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
html[data-theme="A"] .stats dd { font: 600 2.15rem/1.05 var(--font-num); margin-top: 4px; letter-spacing: .005em; }
html[data-theme="A"] .stats dd small {
  font: 500 .66rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
  margin-left: 4px; vertical-align: .55em;
}
html[data-theme="A"] .stats + .muted { margin: 12px 0 0; font: 500 .78rem/1.4 var(--font-label); }
html[data-theme="A"] .big { font: 600 4.75rem/.95 var(--font-num); color: var(--accent); letter-spacing: -.005em; }
html[data-theme="A"] .big + .muted { font: 500 .75rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 0; }
html[data-theme="A"] .card.muted { background: transparent; border-style: dashed; font: 500 .82rem/1.5 var(--font-label); }
html[data-theme="A"] .card.muted p { margin: 0; }
html[data-theme="A"] main > p.muted.center { font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em; }
html[data-theme="A"] .small { font-family: var(--font-label); font-size: .72rem; }

/* Controls */
html[data-theme="A"] label { font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
html[data-theme="A"] input, html[data-theme="A"] select, html[data-theme="A"] textarea {
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text);
  font: 400 1rem/1.4 var(--font-ui); text-transform: none; letter-spacing: 0;
}
html[data-theme="A"] input:focus, html[data-theme="A"] select:focus, html[data-theme="A"] textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
html[data-theme="A"] button, html[data-theme="A"] .button-link {
  border-radius: 4px; font: 600 1.15rem/1 var(--font-num); text-transform: uppercase; letter-spacing: .06em;
  background: var(--accent); color: var(--accent-ink);
}
html[data-theme="A"] button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
html[data-theme="A"] button.icon { background: transparent; color: var(--text); border: 1px solid var(--border-strong); font: 500 1rem/1 var(--font-label); }
html[data-theme="A"] button.icon.danger { color: var(--danger); }
html[data-theme="A"] button.danger-fill { background: var(--danger); color: var(--danger-ink); }
html[data-theme="A"] a { color: var(--accent); }
html[data-theme="A"] .alert { border: 0; border-left: 3px solid var(--danger); border-radius: 2px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
html[data-theme="A"] .notice { border-left: 3px solid var(--accent); border-radius: 2px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
html[data-theme="A"] .notice-link { color: var(--accent); font: 600 1.2rem/1.2 var(--font-num); text-transform: uppercase; letter-spacing: .03em; }
html[data-theme="A"] fieldset { border-color: var(--border-strong); border-radius: 4px; }
html[data-theme="A"] legend { font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; }
html[data-theme="A"] .check { font: 400 .95rem/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--text); }
html[data-theme="A"] .check input { accent-color: var(--accent); }
html[data-theme="A"] details summary { font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em; }

/* Tab bar / sidebar */
html[data-theme="A"] .tabs { background: var(--tabbar); border-top: 1px solid var(--border); }
html[data-theme="A"] .tabs a { font: 600 .9rem/1 var(--font-num); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
html[data-theme="A"] .tabs a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

/* Lists, gym */
html[data-theme="A"] .list { gap: 0; }
html[data-theme="A"] .list > li + li { border-top: 1px solid var(--border); }
html[data-theme="A"] .ex { min-height: 68px; }
html[data-theme="A"] .ex-name { font: 600 1.2rem/1.15 var(--font-num); text-transform: uppercase; letter-spacing: .02em; }
html[data-theme="A"] .ex-text .muted { font: 500 .7rem/1.5 var(--font-label); text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="A"] .thumb { border-radius: 3px; }
html[data-theme="A"] .thumb-empty { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--border) 6px 7px); }
html[data-theme="A"] .pager { font: 500 .78rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .06em; }
html[data-theme="A"] .pager a { min-height: 44px; display: grid; place-items: center; }
html[data-theme="A"] .demo-frames .frame img { border-radius: 3px; }
html[data-theme="A"] .demo-frames figcaption { font: 500 .7rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; }
html[data-theme="A"] .demo-nav { gap: 0; }
html[data-theme="A"] .demo-nav label { border-radius: 0; border-color: var(--border-strong); color: var(--text); }
html[data-theme="A"] .demo-nav label + label { border-left: 0; }
html[data-theme="A"] #demo-0:checked ~ .demo-nav label[for="demo-0"], html[data-theme="A"] #demo-1:checked ~ .demo-nav label[for="demo-1"],
html[data-theme="A"] #demo-2:checked ~ .demo-nav label[for="demo-2"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-theme="A"] .demo-empty { border-color: var(--border-strong); font-family: var(--font-label); font-size: .8rem; }
html[data-theme="A"] .facts { gap: 1px; background: var(--border); border: 1px solid var(--border); }
html[data-theme="A"] .facts > div { background: var(--surface); padding: 8px 10px; }
html[data-theme="A"] .facts dd { font-weight: 600; }
html[data-theme="A"] .steps { list-style: none; padding: 0; counter-reset: step; gap: 12px; }
html[data-theme="A"] .steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; }
html[data-theme="A"] .steps li::before { content: counter(step, decimal-leading-zero); font: 600 1.3rem/1.2 var(--font-num); color: var(--accent); }
html[data-theme="A"] .links { gap: 1px; background: var(--border); padding: 0; overflow: hidden; }
html[data-theme="A"] .links a { flex: 1; background: var(--surface); font: 600 1rem/1 var(--font-num); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }

/* Tables: mono, right-aligned numbers */
html[data-theme="A"] .table, html[data-theme="A"] .sets { font: 500 .82rem/1.4 var(--font-label); }
html[data-theme="A"] .table th, html[data-theme="A"] .sets th {
  font: 500 .66rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--border-strong); padding: 6px 4px;
}
html[data-theme="A"] .table th:not(:first-child), html[data-theme="A"] .table td:not(:first-child) { text-align: right; }
html[data-theme="A"] .table td { border-top-color: var(--border); padding: 8px 4px; }
html[data-theme="A"] .sets td:first-child { color: var(--accent); font: 600 1.15rem/1 var(--font-num); }
html[data-theme="A"] .num { font: 500 1rem/1 var(--font-label); padding: 8px 2px; }

/* Bars as LED segments; chart on a graticule */
html[data-theme="A"] .bars { gap: 8px; }
html[data-theme="A"] .bars li { grid-template-columns: 96px 1fr 44px; font: 500 .74rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .04em; }
html[data-theme="A"] .bars li > .muted { text-align: right; color: var(--text); }
html[data-theme="A"] .bar { height: 14px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 7px); }
html[data-theme="A"] .chart-card { color: var(--accent); }
html[data-theme="A"] .chart {
  border-bottom: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 12.5% 100%;
}
html[data-theme="A"] .chart-label { font-family: var(--font-label); fill: var(--muted); }
html[data-theme="A"] .legend { font: 500 .72rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .06em; }

@media (min-width: 900px) {
  html[data-theme="A"] .tabs { border-right: 1px solid var(--border); box-shadow: none; }
  html[data-theme="A"] .tabs .brand { font: 600 1.6rem/1 var(--font-num); text-transform: uppercase; letter-spacing: .04em; color: var(--text); padding: 8px 12px 24px; }
  html[data-theme="A"] .tabs a { border-radius: 2px; font-size: 1.05rem; }
  html[data-theme="A"] .tabs a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  html[data-theme="A"] .top h1 { font-size: 3rem; }
}


/* =============================================================================
   B — PERSONAL WELLNESS STUDIO
   Quiet, spacious, light. Cool mist paper, spruce accent, Instrument Serif for
   titles and numerals, Hanken Grotesk for reading. Signature: numbers set as
   large serif figures; exercise photos run edge to edge in their card.
   ============================================================================= */
/* Night = the studio after dark: deep spruce-black paper, pale sage accent. */
html[data-theme="B"] {
  --bg: light-dark(#f1f4f2, #0e1412); --surface: light-dark(#ffffff, #161e1b); --surface-2: light-dark(#f4f7f5, #1d2723);
  --text: light-dark(#18201d, #e6ede9); --muted: light-dark(#59645f, #9eaca5);
  --accent: light-dark(#2b5a4b, #8fcbb3); --accent-ink: light-dark(#ffffff, #0b1a14);
  --danger: light-dark(#b42318, #ff8f80); --danger-ink: light-dark(#ffffff, #200704);
  --border: light-dark(#e1e7e3, #26312c); --border-strong: light-dark(#808b86, #63736b); --star: light-dark(#a8741a, #e2b45c);
  --tabbar: light-dark(rgba(255, 255, 255, .9), rgba(22, 30, 27, .9));
  --alert-bg: light-dark(#fbecea, #3b1c19); --alert-text: light-dark(#6e1610, #ffd2cb);
  --notice-bg: light-dark(#e4eee9, #1b3229); --notice-text: light-dark(#1d3f34, #cdeadb);
  --thumb-empty: light-dark(#e8eeea, #1d2723); --thumb-empty-2: light-dark(#d7e1db, #27342e);
  --bar-from: light-dark(#8fb3a5, #3d6b5a); --shadow: light-dark(#182820, #000000);
  --radius: 26px;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-label: var(--font-ui);
}
html[data-theme="B"] body { font: 400 16px/1.6 var(--font-ui); background: var(--bg); color: var(--text); }
html[data-theme="B"] .top { padding: max(28px, env(safe-area-inset-top)) 22px 10px; }
html[data-theme="B"] .top h1 { font: 400 3.1rem/1 var(--font-num); letter-spacing: -.012em; }
html[data-theme="B"] main { gap: 18px; padding: 12px 16px 24px; }
html[data-theme="B"] .card {
  padding: 24px 22px; border: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 4%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--shadow) 18%, transparent);
}
html[data-theme="B"] .card h2 { font: 400 1.65rem/1.15 var(--font-num); margin: 0 0 18px; letter-spacing: -.005em; }
html[data-theme="B"] .card h2 small { display: block; margin: 6px 0 0; font: 500 .74rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
html[data-theme="B"] .card h2 a { color: var(--text); text-decoration: none; }
html[data-theme="B"] .stats { gap: 22px 18px; }
html[data-theme="B"] .stats > div { border-top: 1px solid var(--border); padding-top: 12px; }
html[data-theme="B"] .stats dt, html[data-theme="B"] .facts dt {
  font: 500 .72rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
html[data-theme="B"] .stats dd { font: 400 2.5rem/1.05 var(--font-num); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; }
html[data-theme="B"] .stats dd small { display: block; font: 500 .8rem/1.4 var(--font-ui); color: var(--accent); margin-top: 4px; }
html[data-theme="B"] .stats + .muted { margin: 20px 0 0; }
html[data-theme="B"] .big { font: 400 5rem/.95 var(--font-num); letter-spacing: -.02em; }
html[data-theme="B"] .big + .muted { margin: 12px 0 0; }
html[data-theme="B"] .card.muted { background: transparent; box-shadow: none; border: 1px solid var(--border-strong); text-align: center; font: 400 1.35rem/1.35 var(--font-num); color: var(--muted); }
html[data-theme="B"] .card.muted p { margin: 0; }
/* A form that is only one button (Sync now, Log out) sits bare on the page. */
html[data-theme="B"] form.card:has(> button:only-child) { background: transparent; box-shadow: none; padding: 0 2px; }
html[data-theme="B"] .small { font-size: .82rem; }

/* Controls: pills and soft fields */
html[data-theme="B"] label { font: 500 .85rem/1.4 var(--font-ui); color: var(--muted); gap: 6px; }
html[data-theme="B"] input, html[data-theme="B"] select, html[data-theme="B"] textarea {
  min-height: 52px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); font: 400 1rem/1.4 var(--font-ui); padding: 10px 14px;
}
html[data-theme="B"] input:focus, html[data-theme="B"] select:focus, html[data-theme="B"] textarea:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-theme="B"] button, html[data-theme="B"] .button-link {
  min-height: 52px; border-radius: 999px; font: 600 1rem/1 var(--font-ui); letter-spacing: .01em;
  background: var(--accent); color: var(--accent-ink);
}
html[data-theme="B"] button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
html[data-theme="B"] button.icon { min-height: 44px; height: 44px; width: 44px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; }
html[data-theme="B"] button.icon.danger { color: var(--danger); }
html[data-theme="B"] button.danger-fill { background: var(--danger); color: var(--danger-ink); }
html[data-theme="B"] .row { gap: 10px; }
html[data-theme="B"] .row > button { padding: 0 22px; }
html[data-theme="B"] a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
html[data-theme="B"] .alert { border: 0; border-radius: 18px; background: var(--alert-bg); color: var(--alert-text); padding: 14px 18px; }
html[data-theme="B"] .notice { border-radius: 18px; background: var(--notice-bg); color: var(--notice-text); padding: 14px 18px; }
html[data-theme="B"] .notice-link { color: var(--accent); font: 400 1.35rem/1.3 var(--font-num); }
html[data-theme="B"] fieldset { border: 1px solid var(--border); border-radius: 18px; padding: 10px 16px; }
html[data-theme="B"] legend { font: 500 .85rem/1.4 var(--font-ui); padding: 0 6px; }
html[data-theme="B"] .check { color: var(--text); font-weight: 400; }
html[data-theme="B"] .check input { accent-color: var(--accent); }
html[data-theme="B"] details summary { font-weight: 500; }

/* Tab bar: frosted, quiet, dot under the active label */
html[data-theme="B"] .tabs {
  background: var(--tabbar); border-top: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
html[data-theme="B"] .tabs a { font: 500 .74rem/1 var(--font-ui); letter-spacing: .02em; color: var(--muted); align-content: center; gap: 6px; }
html[data-theme="B"] .tabs a::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
html[data-theme="B"] .tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
html[data-theme="B"] .tabs a[aria-current="page"]::after { background: var(--accent); }
html[data-theme="B"] .tabs .brand::after { display: none; }

/* Gym: large clear photos, calm lists */
html[data-theme="B"] .list { gap: 2px; }
html[data-theme="B"] .list > li + li { border-top: 1px solid var(--border); }
html[data-theme="B"] .ex { min-height: 84px; gap: 16px; padding: 10px 0; }
html[data-theme="B"] .ex-name { font: 400 1.3rem/1.2 var(--font-num); }
html[data-theme="B"] .ex-text .muted { font-size: .85rem; }
html[data-theme="B"] .thumb { width: 64px; height: 64px; border-radius: 18px; }
html[data-theme="B"] .thumb-empty { background: linear-gradient(135deg, var(--thumb-empty), var(--thumb-empty-2)); }
html[data-theme="B"] .card:has(> .demo) { padding: 8px 8px 18px; }
html[data-theme="B"] .demo { gap: 12px; }
html[data-theme="B"] .demo > p, html[data-theme="B"] .demo-nav { margin-inline: 14px; }
html[data-theme="B"] .demo-frames .frame img { border-radius: 20px; }
html[data-theme="B"] .demo-frames figcaption { font: 400 1.1rem/1.3 var(--font-num); color: var(--muted); margin: 10px 14px 0; }
html[data-theme="B"] .demo-nav { gap: 6px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
html[data-theme="B"] .demo-nav label { border: 0; border-radius: 999px; color: var(--muted); font-weight: 500; }
html[data-theme="B"] #demo-0:checked ~ .demo-nav label[for="demo-0"], html[data-theme="B"] #demo-1:checked ~ .demo-nav label[for="demo-1"],
html[data-theme="B"] #demo-2:checked ~ .demo-nav label[for="demo-2"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow) 14%, transparent); }
html[data-theme="B"] .demo-empty { border-color: var(--border-strong); border-radius: 20px; min-height: 220px; font: 400 1.2rem/1.3 var(--font-num); }
html[data-theme="B"] .facts { gap: 18px 16px; }
html[data-theme="B"] .facts dd { font-size: 1.02rem; margin-top: 2px; }
html[data-theme="B"] .steps { list-style: none; padding: 0; counter-reset: step; gap: 16px; }
html[data-theme="B"] .steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; align-items: baseline; }
html[data-theme="B"] .steps li::before { content: counter(step); font: 400 1.8rem/1 var(--font-num); color: var(--accent); }
html[data-theme="B"] .links { justify-content: space-between; gap: 8px; }
html[data-theme="B"] .links a { flex: 1; border-radius: 999px; background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 500; }

/* Tables and charts */
html[data-theme="B"] .table, html[data-theme="B"] .sets { font-size: .95rem; }
html[data-theme="B"] .table th, html[data-theme="B"] .sets th { font: 500 .7rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 6px 4px 10px; }
html[data-theme="B"] .table th:not(:first-child), html[data-theme="B"] .table td:not(:first-child) { text-align: right; }
html[data-theme="B"] .table td { border-top-color: var(--border); padding: 12px 4px; }
html[data-theme="B"] .sets td:first-child { font: 400 1.3rem/1 var(--font-num); color: var(--muted); }
html[data-theme="B"] .sets td { padding: 4px 3px; }
html[data-theme="B"] .num { min-height: 48px; padding: 8px 2px; border-radius: 12px; }
html[data-theme="B"] .bars { gap: 14px; }
html[data-theme="B"] .bars li { grid-template-columns: 104px 1fr 40px; font-size: .9rem; }
html[data-theme="B"] .bars li > .muted { text-align: right; }
html[data-theme="B"] .bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--bar-from), var(--accent)); }
html[data-theme="B"] .chart-card { color: var(--accent); }
html[data-theme="B"] .chart { border-bottom: 1px solid var(--border); }
html[data-theme="B"] .chart-label { font-family: var(--font-ui); fill: var(--muted); }

@media (min-width: 900px) {
  html[data-theme="B"] main { padding: 12px 32px 56px; gap: 22px; }
  html[data-theme="B"] .top { padding: 48px 32px 16px; }
  html[data-theme="B"] .top h1 { font-size: 4.2rem; }
  html[data-theme="B"] .tabs { background: var(--bg); border-right: 1px solid var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: max(32px, env(safe-area-inset-top)); }
  html[data-theme="B"] .tabs .brand { font: 400 2rem/1 var(--font-num); color: var(--text); padding: 8px 14px 32px; }
  html[data-theme="B"] .tabs a { font-size: 1rem; border-radius: 999px; padding: 0 16px; }
  html[data-theme="B"] .tabs a::after { display: none; }
  html[data-theme="B"] .tabs a[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 6%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--shadow) 25%, transparent); }
  html[data-theme="B"] .card { padding: 30px 30px; }
  html[data-theme="B"] .stats dd { font-size: 2.9rem; }
  html[data-theme="B"] .big { font-size: 6rem; }
}


/* =============================================================================
   C — ADAPTIVE HEALTH OS
   Light canvas framed by dark chrome. Every reading is its own tile; card
   headers are small module labels; the coach slot is a tinted cobalt panel.
   Manrope throughout, heavy weights for figures. Signature: tiles inside cards
   (stats, facts, list rows) plus the labelled Coach panel.
   ============================================================================= */
/* Night = dark canvas, still framed by an even darker chrome; periwinkle-cobalt accent. */
html[data-theme="C"] {
  --bg: light-dark(#e7eaf0, #0e1320); --surface: light-dark(#ffffff, #171e2e); --surface-2: light-dark(#f2f4f8, #1f2739);
  --text: light-dark(#0f1523, #e8ecf4); --muted: light-dark(#535d70, #9da8bc);
  --accent: light-dark(#2f45d8, #8b9cff); --accent-ink: light-dark(#ffffff, #0a1140);
  --danger: light-dark(#c4282f, #ff8086); --danger-ink: light-dark(#ffffff, #2a0508);
  --ok: light-dark(#0b6e4c, #6fdcae); --ok-bg: light-dark(#dcf1e7, #133628);
  --border: light-dark(#d9dee7, #28324a); --border-strong: light-dark(#7b869a, #5d6983); --star: light-dark(#b26a00, #f2a93b);
  --chrome: light-dark(#111725, #05070d); --chrome-text: light-dark(#aeb7c8, #9aa4b8);
  --coach-bg: light-dark(#e3e8ff, #1b2353); --coach-border: light-dark(#c9d2fb, #2f3d8c); --coach-text: light-dark(#1b2a8f, #ccd4ff);
  --danger-soft: light-dark(#fdecec, #3a161a); --danger-soft-border: light-dark(#f6cfd1, #5e252b);
  --alert-bg: light-dark(#fdeeee, #33161a); --alert-border: light-dark(#f3c9cb, #5e252b); --alert-text: light-dark(#7d151b, #ffccce);
  --notice-bg: light-dark(#e3f5ec, #0f3125); --notice-border: light-dark(#bfe4d3, #1e5a43); --notice-text: light-dark(#0b5a3f, #b6ecd4);
  --thumb-empty: light-dark(#dfe4ee, #263048); --hover: light-dark(#e9edf5, #252e44);
  --radius: 20px;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: var(--font-ui);
  --font-label: var(--font-ui);
}
html[data-theme="C"] body { font: 500 16px/1.5 var(--font-ui); background: var(--bg); color: var(--text); }
html[data-theme="C"] .top h1 { font: 800 1.9rem/1.1 var(--font-ui); letter-spacing: -.03em; }
html[data-theme="C"] main { gap: 10px; }
html[data-theme="C"] .card { border: 1px solid var(--border); padding: 14px; }
html[data-theme="C"] .card h2 {
  font: 700 .75rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  margin: 2px 2px 12px; display: flex; align-items: center; gap: 8px;
}
html[data-theme="C"] .card h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
html[data-theme="C"] .card h2 small { margin-left: auto; font-weight: 600; letter-spacing: .04em; }
html[data-theme="C"] .card h2:has(a) { font: 800 1.15rem/1.25 var(--font-ui); text-transform: none; letter-spacing: -.01em; color: var(--text); }
html[data-theme="C"] .card h2 a { color: var(--text); text-decoration: none; }
html[data-theme="C"] .stats { gap: 8px; }
html[data-theme="C"] .stats > div { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
html[data-theme="C"] .stats dt, html[data-theme="C"] .facts dt { font: 600 .76rem/1.3 var(--font-ui); color: var(--muted); }
html[data-theme="C"] .stats dd { font: 800 1.6rem/1.15 var(--font-ui); letter-spacing: -.025em; margin-top: 4px; }
html[data-theme="C"] .stats dd small {
  display: inline-block; vertical-align: .3em; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  font: 700 .7rem/1.4 var(--font-ui); letter-spacing: .02em; color: var(--ok); background: var(--ok-bg);
}
html[data-theme="C"] .stats + .muted { margin: 10px 2px 0; font-size: .9rem; }
html[data-theme="C"] .big { font: 800 3.4rem/1 var(--font-ui); letter-spacing: -.04em; padding: 6px 2px 0; }
html[data-theme="C"] .big + .muted { margin: 8px 2px 0; font-size: .9rem; }
/* Coach panel (today: the "daily plan" slot). Recommended future class: .coach */
html[data-theme="C"] .card.muted, html[data-theme="C"] .coach {
  background: var(--coach-bg); border-color: var(--coach-border); color: var(--coach-text); font-weight: 600;
}
html[data-theme="C"] .card.muted::before, html[data-theme="C"] .coach::before {
  content: "Coach"; display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 700 .72rem/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
}
html[data-theme="C"] .card.muted p { margin: 0; }
html[data-theme="C"] .small { font-size: .8rem; }

/* Controls */
html[data-theme="C"] label { font: 600 .82rem/1.3 var(--font-ui); color: var(--muted); gap: 6px; }
html[data-theme="C"] input, html[data-theme="C"] select, html[data-theme="C"] textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  font: 600 1rem/1.4 var(--font-ui);
}
html[data-theme="C"] input:focus, html[data-theme="C"] select:focus, html[data-theme="C"] textarea:focus { background: var(--surface); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-theme="C"] button, html[data-theme="C"] .button-link {
  border-radius: 12px; font: 700 1rem/1 var(--font-ui); background: var(--accent); color: var(--accent-ink); min-height: 48px;
}
html[data-theme="C"] button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
html[data-theme="C"] button.icon { min-height: 44px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
html[data-theme="C"] button.icon.danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft-border); }
html[data-theme="C"] button.danger-fill { background: var(--danger); color: var(--danger-ink); }
html[data-theme="C"] a { color: var(--accent); font-weight: 700; text-decoration: none; }
html[data-theme="C"] .alert { border: 1px solid var(--alert-border); border-radius: 14px; background: var(--alert-bg); color: var(--alert-text); padding: 12px 14px 12px 40px; position: relative; font-weight: 600; }
html[data-theme="C"] .alert::before { content: "!"; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: var(--danger-ink); font: 800 .75rem/1 var(--font-ui); }
html[data-theme="C"] .alert p:first-child { margin-top: 0; }
html[data-theme="C"] .notice { border: 1px solid var(--notice-border); border-radius: 14px; background: var(--notice-bg); color: var(--notice-text); padding: 12px 14px; font-weight: 600; }
html[data-theme="C"] .notice-link { background: var(--chrome); color: #fff; border-color: var(--chrome); }
html[data-theme="C"] fieldset { border: 1px solid var(--border); border-radius: 14px; }
html[data-theme="C"] legend { font: 600 .82rem/1.3 var(--font-ui); padding: 0 6px; }
html[data-theme="C"] .check { color: var(--text); }
html[data-theme="C"] .check input { accent-color: var(--accent); }
html[data-theme="C"] details summary { font-weight: 700; }

/* Dark chrome: tab bar with a pill on the active tab */
html[data-theme="C"] .tabs { background: var(--chrome); border-top: 0; padding-inline: 6px; }
html[data-theme="C"] .tabs a { font: 700 .72rem/1 var(--font-ui); color: var(--chrome-text); min-height: 48px; margin: 6px 2px; border-radius: 14px; }
html[data-theme="C"] .tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }

/* Gym: rows are tiles */
html[data-theme="C"] .list { gap: 6px; }
html[data-theme="C"] .ex { background: var(--surface-2); border-radius: 14px; padding: 8px 12px 8px 8px; min-height: 64px; }
html[data-theme="C"] .ex:not(:has(.thumb)) { padding-left: 14px; }
html[data-theme="C"] .ex-name { font-weight: 800; color: var(--text); letter-spacing: -.01em; }
html[data-theme="C"] .ex-text .muted { font-weight: 600; font-size: .85rem; }
html[data-theme="C"] .ex::after { content: "›"; margin-left: auto; color: var(--muted); font: 700 1.4rem/1 var(--font-ui); }
html[data-theme="C"] .thumb { width: 52px; height: 52px; border-radius: 10px; }
html[data-theme="C"] .thumb-empty { background: var(--thumb-empty); }
html[data-theme="C"] .list > .row-between { gap: 6px; }
html[data-theme="C"] .pager a { min-height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: 12px; background: var(--surface-2); }
html[data-theme="C"] .demo-frames .frame img { border-radius: 14px; }
html[data-theme="C"] .demo-frames figcaption { font-weight: 700; font-size: .8rem; }
html[data-theme="C"] .demo-nav { gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 14px; }
html[data-theme="C"] .demo-nav label { border: 0; border-radius: 10px; font-weight: 700; color: var(--muted); }
html[data-theme="C"] #demo-0:checked ~ .demo-nav label[for="demo-0"], html[data-theme="C"] #demo-1:checked ~ .demo-nav label[for="demo-1"],
html[data-theme="C"] #demo-2:checked ~ .demo-nav label[for="demo-2"] { background: var(--chrome); color: #fff; }
html[data-theme="C"] .demo-empty { border-color: var(--border-strong); border-radius: 14px; background: var(--surface-2); }
html[data-theme="C"] .facts { gap: 8px; }
html[data-theme="C"] .facts > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
html[data-theme="C"] .facts dd { font-weight: 700; }
html[data-theme="C"] .steps { list-style: none; padding: 0; counter-reset: step; gap: 10px; }
html[data-theme="C"] .steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
html[data-theme="C"] .steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 .8rem/1 var(--font-ui); }
html[data-theme="C"] .links { gap: 6px; padding: 6px; }
html[data-theme="C"] .links a { flex: 1; border-radius: 12px; background: var(--surface-2); color: var(--text); }

/* Tables & charts */
html[data-theme="C"] .table, html[data-theme="C"] .sets { font-size: .92rem; border-collapse: separate; border-spacing: 0; }
html[data-theme="C"] .table th, html[data-theme="C"] .sets th { font: 700 .72rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 8px; }
html[data-theme="C"] .table th:not(:first-child), html[data-theme="C"] .table td:not(:first-child) { text-align: right; }
html[data-theme="C"] .table td { border-top: 0; padding: 9px 8px; font-weight: 600; }
html[data-theme="C"] .table tbody tr:nth-child(odd) td { background: var(--surface-2); }
html[data-theme="C"] .table tbody tr td:first-child { border-radius: 10px 0 0 10px; }
html[data-theme="C"] .table tbody tr td:last-child { border-radius: 0 10px 10px 0; }
html[data-theme="C"] .sets td { padding: 3px; }
html[data-theme="C"] .sets td:first-child { font-weight: 800; color: var(--muted); text-align: center; }
html[data-theme="C"] .num { padding: 8px 2px; font-weight: 700; }
html[data-theme="C"] .bars { gap: 10px; }
html[data-theme="C"] .bars li { grid-template-columns: 100px 1fr 40px; font-weight: 600; font-size: .9rem; }
html[data-theme="C"] .bars li > .muted { text-align: right; color: var(--text); font-weight: 800; }
html[data-theme="C"] .bar { height: 12px; border-radius: 6px; background: var(--accent); }
html[data-theme="C"] .chart-card { color: var(--accent); }
html[data-theme="C"] .chart { background: var(--surface-2); border-radius: 14px; }
html[data-theme="C"] .chart-label { font-family: var(--font-ui); font-weight: 700; fill: var(--muted); }

@media (min-width: 900px) {
  html[data-theme="C"] .tabs { padding: max(20px, env(safe-area-inset-top)) 14px 20px; }
  html[data-theme="C"] .tabs .brand { color: #ffffff; font: 800 1.3rem/1 var(--font-ui); letter-spacing: -.02em; padding: 10px 12px 24px; }
  html[data-theme="C"] .tabs a { margin: 0; font-size: .95rem; border-radius: 12px; min-height: 44px; }
  html[data-theme="C"] .tabs a:hover { color: #ffffff; background: rgba(255, 255, 255, .06); }
  html[data-theme="C"] .tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
  html[data-theme="C"] .top h1 { font-size: 2.4rem; }
  html[data-theme="C"] main { gap: 14px; }
  html[data-theme="C"] .card { padding: 18px; }
}

/* ---------- Appearance: header Day/Night toggle and Profile segmented control ---------- */
html[data-theme] .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
html[data-theme] .top h1 { min-width: 0; }
html[data-theme] .mode-toggle { margin: 0; flex: none; }
html[data-theme] .top .mode-toggle button {
  width: auto; min-width: 44px; min-height: 44px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px;
  font: 600 .8rem/1 var(--font-ui); letter-spacing: .02em; text-transform: none;
}
html[data-theme] .top .mode-toggle button:hover { color: var(--text); }
html[data-theme] .mode-toggle svg { flex: none; }
/* Single-column desktop pages: keep the header (and its toggle) on the content column. */
@media (min-width: 900px) { html[data-theme] body:not(.grid):not(.bare) .top { max-width: 760px; } }
html[data-theme="A"] .top .mode-toggle button { border-radius: 4px; font: 500 .68rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .1em; }
html[data-theme="C"] .top .mode-toggle button { border-radius: 12px; font-weight: 700; background: var(--surface); border-color: var(--border-strong); }
html[data-theme] .appearance h3 { margin: 0; }
html[data-theme] .mode-options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px;
  border: 1px solid var(--border-strong); border-radius: 14px;
}
html[data-theme] .mode-options button { width: 100%; min-height: 44px; padding: 0 8px; background: transparent; color: var(--text); border: 0; border-radius: 10px; }
html[data-theme] .mode-options button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
html[data-theme="A"] .mode-options { border-radius: 4px; }
html[data-theme="A"] .mode-options button { border-radius: 2px; }
html[data-theme="B"] .mode-options, html[data-theme="B"] .mode-options button { border-radius: 999px; }

/* ---------- Motion (only when the user allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] button, html[data-theme] .button-link, html[data-theme] .tabs a, html[data-theme] .ex,
  html[data-theme] .demo-nav label, html[data-theme] input, html[data-theme] select, html[data-theme] textarea {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  html[data-theme] button:active { transform: translateY(1px); }
  html[data-theme="C"] .ex:hover { background: var(--hover); }
  html[data-theme="B"] .ex:hover .ex-name { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: none !important; animation: none !important; }
}