/* ============================================================================
   PerformanceXtra — "Performance Lab" theme
   Dark, athletic, high-contrast. Twin signal accents:
     · electric lime  → go / active / progress / done
     · warm ember     → create / generate / assign
   Type: Bricolage Grotesque (display) · Hanken Grotesk (body) · JetBrains Mono (data)
   ----------------------------------------------------------------------------
   Class & id names are preserved exactly so app.js keeps working.
   ============================================================================ */

  :root {
    /* signal accents */
    --accent: #c9f24e;          /* electric lime — primary / active / done */
    --accent-strong: #d6ff5c;
    --accent-dim: rgba(201,242,78,.14);
    --accent-ink: #14180a;      /* dark text that sits on lime */
    --ember: #ff6a3d;           /* warm — create / generate */
    --ember-strong: #ff7d54;
    --ember-dim: rgba(255,106,61,.14);
    --ember-ink: #1d0c05;

    /* legacy brand tokens kept as aliases (used across rendered markup) */
    --brand: #c9f24e;
    --brand-dark: #b7e63a;
    --brand-tint: rgba(201,242,78,.12);
    --accent-dark: #e85d2f;
    --success: #c9f24e;
    --success-tint: rgba(201,242,78,.12);

    /* ink surfaces */
    --bg: #0b0d12;
    --bg-2: #0e1118;
    --surface: #14171f;         /* panels / cards */
    --surface-2: #191d27;       /* nested / hover */
    --surface-3: #1f2430;

    /* text */
    --ink: #f1f4f8;
    --ink-soft: #aeb6c6;
    --muted: #97a1b4;   /* ≥5:1 on --surface, headroom for the .7rem mono labels */

    /* lines */
    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.15);
    --line-glow: rgba(201,242,78,.45);

    /* status (functional) */
    --danger: #ff5d6c;
    --warn: #f5c451;
    --danger-soft: #ffd1d7;
    --warn-soft: #ffe2a3;
    --danger-dim: rgba(255,93,108,.18);
    --warn-dim: rgba(245,196,81,.16);
    --danger-line: rgba(255,93,108,.34);
    --warn-line: rgba(245,196,81,.34);
    --info: #7dd3fc;
    --info-soft: #d6efff;
    --info-dim: rgba(125,211,252,.16);
    --info-line: rgba(125,211,252,.28);

    --space: 16px;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.45);
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 55px -16px rgba(0,0,0,.75);
    --shadow-glow: 0 0 0 1px rgba(201,242,78,.35), 0 14px 40px -10px rgba(201,242,78,.18);

    --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* signed-out / auth-gate surfaces — every value here is re-declared in the
       light theme block so the landing page flips cleanly. Dark = default. */
    --so-glow-1: rgba(201,242,78,.09);   /* single sign-in wash; companions removed with the glow field */
    --so-hero-bg: linear-gradient(180deg, rgba(20,23,31,.88), rgba(12,15,21,.92));
    --so-hero-border: rgba(255,255,255,.08);
    --so-hero-shadow: 0 28px 70px -30px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.05);
    --so-card-bg: linear-gradient(180deg, rgba(21,24,33,.96), rgba(17,20,28,.96));
    --so-card-shadow: 0 30px 80px -24px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.04);
    --so-preview-bg: linear-gradient(180deg, rgba(17,20,28,.96), rgba(10,12,17,.96));
    --so-preview-shadow: 0 24px 60px -34px rgba(0,0,0,.86), inset 0 1px 0 rgba(255,255,255,.04);
    --so-inset-bg: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
    --so-tile-bg: linear-gradient(180deg, rgba(29,33,44,.9), rgba(20,23,31,.94));
    --so-tile-bg-hover: linear-gradient(180deg, rgba(32,37,49,.96), rgba(22,25,34,.98));
    --so-tile-shadow-hover: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px -28px rgba(0,0,0,.9);
    --so-fill: rgba(255,255,255,.03);
    --so-fill-strong: rgba(255,255,255,.04);
    --so-hairline: rgba(255,255,255,.06);
    --so-moment-bg: linear-gradient(90deg, rgba(201,242,78,.08), rgba(255,255,255,.02) 42%, rgba(255,255,255,.02));
  }

  body[data-theme="light"] {
    --accent: #8db61f;
    --accent-strong: #7fa31a;
    --accent-dim: rgba(141,182,31,.16);
    --accent-ink: #0f1603;
    --ember: #e4572e;
    --ember-strong: #cf4c26;
    --ember-dim: rgba(228,87,46,.14);
    --ember-ink: #210d06;

    --bg: #f4f7fb;
    --bg-2: #ecf1f7;
    --surface: #ffffff;
    --surface-2: #f6f9fd;
    --surface-3: #eef3f9;

    --ink: #131a24;
    --ink-soft: #2f3d50;
    --muted: #4f6076;

    --line: rgba(20,29,44,.10);
    --line-strong: rgba(20,29,44,.20);
    --line-glow: rgba(141,182,31,.45);

    --danger-soft: #8a2433;
    --warn-soft: #7b5200;
    --danger-dim: rgba(228,87,46,.12);
    --warn-dim: rgba(180,124,8,.12);
    --danger-line: rgba(228,87,46,.22);
    --warn-line: rgba(180,124,8,.22);
    --info: #0f7ea8;
    --info-soft: #0d5d79;
    --info-dim: rgba(15,126,168,.1);
    --info-line: rgba(15,126,168,.2);

    --shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 10px rgba(0,0,0,.08);
    --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 55px -16px rgba(0,0,0,.18);

    /* signed-out / auth-gate surfaces — light theme.
       Panels become luminous white over a cool paper backdrop; shadows go
       blue-grey and airy instead of heavy black. */
    --so-glow-1: rgba(141,182,31,.09);
    --so-hero-bg: linear-gradient(180deg, #ffffff, #eef4fb);
    --so-hero-border: rgba(20,29,44,.10);
    --so-hero-shadow: 0 28px 70px -34px rgba(23,42,77,.22), inset 0 1px 0 rgba(255,255,255,.9);
    --so-card-bg: linear-gradient(180deg, #ffffff, #f4f8fd);
    --so-card-shadow: 0 30px 80px -32px rgba(23,42,77,.24), inset 0 1px 0 rgba(255,255,255,.9);
    --so-preview-bg: linear-gradient(180deg, #f8fbff, #eaf1f9);
    --so-preview-shadow: 0 24px 60px -38px rgba(23,42,77,.22), inset 0 1px 0 rgba(255,255,255,.9);
    --so-inset-bg: linear-gradient(180deg, rgba(23,42,77,.05), rgba(23,42,77,.02));
    --so-tile-bg: linear-gradient(180deg, #ffffff, #f1f6fc);
    --so-tile-bg-hover: linear-gradient(180deg, #ffffff, #e9f1fb);
    --so-tile-shadow-hover: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 38px -26px rgba(23,42,77,.20);
    --so-fill: rgba(23,42,77,.04);
    --so-fill-strong: rgba(23,42,77,.06);
    --so-hairline: rgba(20,29,44,.10);
    --so-moment-bg: linear-gradient(90deg, rgba(141,182,31,.16), rgba(23,42,77,.02) 42%, rgba(23,42,77,.02));
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html {
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
    background: var(--bg);
    /* --font-scale is set by the super-admin Appearance theme editor (default 1). */
    font-size: calc(100% * var(--font-scale, 1));
  }
  body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Atmosphere: one whisper-quiet brand-hue vignette behind everything. Deliberately
     restrained — PRODUCT.md rules out decorative gradient meshes/noise, so this is a
     single top-edge wash rather than a multi-color bloom. */
  body::before {
    content: "";
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(1100px 520px at 50% -14%, rgba(201,242,78,.05), transparent 62%),
      var(--bg);
  }
  body[data-theme="light"]::before {
    background:
      radial-gradient(1100px 520px at 50% -14%, rgba(141,182,31,.04), transparent 62%),
      var(--bg);
  }

  h1, h2, h3 { line-height: 1.12; margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
  a { color: var(--accent); text-underline-offset: 2px; }
  a:hover { color: var(--accent-strong); }
  button { font-family: inherit; }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  .container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Header ---------- */
  .app-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(12,15,21,.72);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--line);
  }
  body[data-theme="light"] .app-header { background: rgba(255,255,255,.82); }
  .app-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--accent);
    opacity: .55;
  }
  .header-top { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
  .brand-logo {
    width: 44px; height: 44px; border-radius: 13px; flex: none;
    background: linear-gradient(160deg, #1c2230, #11141b);
    color: var(--accent); display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .5px;
    border: 1px solid rgba(201,242,78,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 10px 22px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .brand-name { font-family: var(--display); font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; }
  .brand-tag { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

  .student-picker {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 5px 7px 5px 14px;
  }
  .student-picker label { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
  .student-picker select { min-width: 150px; border-radius: 999px; padding-block: 7px; }
  .student-count { font-size: .72rem; color: var(--muted); white-space: nowrap; padding-right: 8px; font-variant-numeric: tabular-nums; }

  /* ---------- Tabs ---------- */
  .tabs { display: flex; gap: 2px; }
  .tab {
    appearance: none; border: none; background: none; cursor: pointer; position: relative;
    padding: 13px 18px; font-size: .9rem; font-weight: 600; color: var(--ink-soft);
    letter-spacing: -.01em; transition: color .18s ease;
  }
  .tab::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
    background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
  }
  .tab:hover { color: var(--ink); }
  .tab.is-active { color: var(--accent); }
  .tab.is-active::after { transform: scaleX(1); }
  .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

  /* ---------- Generic controls ---------- */
  select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea {
    font: inherit; color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    padding: 10px 12px; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  /* Native date/time pickers: render their indicator for the active theme so the
     calendar glyph stays visible (dark UA on the dark field, light on the light field). */
  input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
  body[data-theme="light"] input[type="date"],
  body[data-theme="light"] input[type="datetime-local"],
  body[data-theme="light"] input[type="time"] { color-scheme: light; }
  select { cursor: pointer; }
  ::placeholder { color: var(--muted); }
  select:hover, input:hover { border-color: rgba(255,255,255,.24); }
  select:focus, input:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    background: var(--surface);
  }
  label { font-size: .76rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
  .field { display: flex; flex-direction: column; gap: 7px; }
  input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }

  .btn {
    appearance: none; cursor: pointer; font-weight: 600; font-size: .9rem; font-family: var(--font);
    border: 1px solid var(--line-strong);
    background: rgba(255,255,255,.04); color: var(--ink);
    padding: 10px 16px; border-radius: var(--radius-sm); display: inline-flex;
    align-items: center; gap: 8px; text-decoration: none; line-height: 1.2; white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .06s ease;
  }
  .btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn--primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.82);
  }
  .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); box-shadow: 0 14px 28px -18px rgba(0,0,0,.9); }
  .btn--accent {
    background: var(--ember); border-color: var(--ember); color: var(--ember-ink); font-weight: 700;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.82);
  }
  .btn--accent:hover { background: var(--ember-strong); border-color: var(--ember-strong); color: var(--ember-ink); box-shadow: 0 14px 28px -18px rgba(0,0,0,.9); }
  .btn--ghost { background: transparent; border-color: transparent; color: var(--accent); }
  .btn--ghost:hover { background: var(--accent-dim); border-color: transparent; }
  .btn--danger { color: var(--danger); }
  .btn--danger:hover { border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.1); }
  .btn--sm { padding: 7px 12px; font-size: .82rem; }
  .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

  main { padding: 32px 0 72px; }
  .view { display: none; }
  .view.is-active { display: block; }
  .view-intro { margin-bottom: 24px; max-width: 74ch; }
  .view-intro h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.035em; line-height: 1.02;
  }
  .view-intro p { margin: 10px 0 0; color: var(--ink-soft); font-size: 1.02rem; }

  /* choreographed entrance on tab activation */
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes fadein { from { opacity: 0; transform: translateY(7px) scale(.995); } to { opacity: 1; transform: none; } }
  .view.is-active > .view-intro { animation: rise .5s cubic-bezier(.2,.75,.2,1) both; }
  .view.is-active > .repo-toolbar,
  .view.is-active > .filters-toggle,
  .view.is-active > .filter-bar { animation: rise .5s cubic-bezier(.2,.75,.2,1) .05s both; }
  .view.is-active > .grid,
  .view.is-active > .builder-layout,
  .view.is-active > .students-layout,
  .view.is-active > .settings-layout,
  .view.is-active > #workouts-panel,
  .view.is-active > #progress-panel,
  .view.is-active > .note-banner { animation: rise .55s cubic-bezier(.2,.75,.2,1) .1s both; }

  /* ---------- Filter bar ---------- */
  .filter-bar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
  }
  .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; }
  .filter-grid > .field[data-filter-tier="advanced"] { transition: opacity .18s ease, transform .18s ease; }
  .filter-bar.is-condensed .filter-grid > .field[data-filter-tier="advanced"] { display: none; }
  .filter-search { grid-column: 1 / -1; }
  .filter-search input { font-size: 1rem; padding: 12px 14px; }
  .filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
  .result-count { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
  .result-count strong { color: var(--accent); font-variant-numeric: tabular-nums; }
  .filters-toggle { display: inline-flex; margin-bottom: 14px; }

  /* ---------- Card grid ---------- */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
  .card {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 13px;
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
    animation: fadein .3s ease both;
  }
  .card::before {
    content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(201,242,78,.75), rgba(255,106,61,.38)); opacity: 0; transition: opacity .2s;
  }
  .card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
  .card:hover::before { opacity: .65; }
  .card.is-done {
    border-color: rgba(201,242,78,.4);
    background: linear-gradient(180deg, var(--accent-dim), var(--surface) 55%);
  }
  .card.is-done::before { opacity: .9; background: linear-gradient(90deg, rgba(201,242,78,.9), rgba(201,242,78,.45)); }
  .card-head { display: flex; align-items: flex-start; gap: 10px; }
  .card-title { font-family: var(--display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
  .card-id { font-family: var(--mono); font-size: .72rem; color: var(--muted); font-weight: 500; margin-top: 4px; letter-spacing: .02em; }
  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip {
    font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: var(--surface-3); color: var(--ink-soft); white-space: nowrap; border: 1px solid var(--line);
  }
  .chip--topic { background: var(--accent-dim); color: var(--accent-strong); border-color: rgba(201,242,78,.25); }
  .chip--sub { background: var(--surface-2); color: var(--ink-soft); }
  .chip--meta { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
  .badge {
    font-family: var(--mono);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: 4px 9px; border-radius: 7px; white-space: nowrap; flex: none; border: 1px solid transparent;
  }
  .badge[data-type="Video"]      { background:rgba(255,93,108,.14); color:#ff8a93; border-color:rgba(255,93,108,.25); }
  .badge[data-type="Article"]    { background:rgba(96,165,250,.14); color:#93c5fd; border-color:rgba(96,165,250,.25); }
  .badge[data-type="Exercise"]   { background:var(--accent-dim); color:var(--accent-strong); border-color:rgba(201,242,78,.25); }
  .badge[data-type="Book"]       { background:rgba(245,196,81,.14); color:#f5d27e; border-color:rgba(245,196,81,.25); }
  .badge[data-type="Blog"]       { background:rgba(167,139,250,.14); color:#c4b5fd; border-color:rgba(167,139,250,.25); }
  .badge[data-type="Module"]     { background:rgba(232,121,249,.14); color:#f0abfc; border-color:rgba(232,121,249,.25); }
  .badge[data-type="Meditation"] { background:rgba(45,212,191,.14); color:#5eead4; border-color:rgba(45,212,191,.25); }
  .badge[data-type=""]           { background:var(--surface-3); color:var(--ink-soft); border-color:var(--line); }
  /* Light theme: the badge text colors above are tuned for dark surfaces and wash out
     on the light background. Re-pitch each to a darker ink of the same hue (≥4.5:1). */
  body[data-theme="light"] .badge[data-type="Video"]      { background:rgba(220,38,38,.10);  color:#b42318; border-color:rgba(220,38,38,.24); }
  body[data-theme="light"] .badge[data-type="Article"]    { background:rgba(37,99,235,.10);  color:#1d4ed8; border-color:rgba(37,99,235,.24); }
  body[data-theme="light"] .badge[data-type="Exercise"]   { background:rgba(141,182,31,.16); color:#4d6b0e; border-color:rgba(141,182,31,.32); }
  body[data-theme="light"] .badge[data-type="Book"]       { background:rgba(180,124,8,.12);  color:#8a5a06; border-color:rgba(180,124,8,.26); }
  body[data-theme="light"] .badge[data-type="Blog"]       { background:rgba(124,58,237,.10); color:#6d28d9; border-color:rgba(124,58,237,.24); }
  body[data-theme="light"] .badge[data-type="Module"]     { background:rgba(192,38,211,.09); color:#a21caf; border-color:rgba(192,38,211,.22); }
  body[data-theme="light"] .badge[data-type="Meditation"] { background:rgba(13,148,136,.11); color:#0f766e; border-color:rgba(13,148,136,.24); }
  /* Lime as TEXT on a light surface (~3:1) -> darker olive of the same hue for AA.
     Scoped to text usages only, so the primary-button hover fill is untouched. */
  body[data-theme="light"] .chip--topic,
  body[data-theme="light"] .chip--accent,
  body[data-theme="light"] .students-guide-kicker { color: #4d6b0e; }

  .card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; padding-top: 2px; }
  .no-link { font-size: .78rem; color: var(--muted); font-style: italic; }
  details.detail { border-top: 1px solid var(--line); padding-top: 10px; }
  details.detail > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--accent); list-style: none; user-select: none; }
  details.detail > summary::-webkit-details-marker { display: none; }
  details.detail > summary::before { content: "+ "; font-family: var(--mono); }
  details.detail[open] > summary::before { content: "− "; }
  .detail-block { margin-top: 12px; }
  .detail-label { font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
  .detail-text { white-space: pre-wrap; font-size: .9rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.6; }
  .done-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

  .empty-state { text-align: center; padding: 64px 20px; color: var(--ink-soft); }
  .empty-state h3 { font-size: 1.25rem; margin-bottom: 8px; }

  /* ---------- Workout builder ---------- */
  .builder-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
  .panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow-sm);
  }
  .panel h3 { font-size: 1.12rem; margin-bottom: 16px; letter-spacing: -.02em; }
  .builder-form { display: flex; flex-direction: column; gap: 16px; }
  .seg { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg-2); padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .seg label {
    flex: 1 1 auto; text-align: center; padding: 8px 6px; border-radius: 7px; cursor: pointer;
    font-size: .82rem; font-weight: 600; color: var(--ink-soft); transition: background .15s, color .15s;
  }
  .seg label:hover { color: var(--ink); }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg input:checked + span { color: var(--accent-ink); }
  .seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px -6px rgba(201,242,78,.7); }
  .seg label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .check { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--ink); cursor: pointer; }
  .check input { width: auto; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .builder-actions { display: flex; gap: 10px; margin-top: 6px; }

  .workout-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; }
  .workout-meta b { color: var(--ink); font-weight: 700; }
  .export-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .workout-item { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .workout-item:last-child { border-bottom: none; }
  .workout-num {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    background: var(--accent-dim); color: var(--accent-strong); font-family: var(--mono); font-weight: 700;
    display: grid; place-items: center; font-size: .9rem; border: 1px solid rgba(201,242,78,.25);
  }
  .workout-body { flex: 1; min-width: 0; }
  .workout-title { font-weight: 700; font-family: var(--display); letter-spacing: -.01em; }
  .workout-sub { font-size: .82rem; color: var(--ink-soft); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .warn {
    background: linear-gradient(180deg, var(--warn-dim), rgba(245,196,81,.08));
    border: 1px solid var(--warn-line);
    color: var(--warn-soft);
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    margin-bottom: 14px;
  }

  /* ---------- Students ---------- */
  .students-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); align-items: start; }
  .student-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
  .student-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
    transition: border-color .15s, background .15s, transform .15s ease;
  }
  .student-row:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-1px); }
  .student-row.is-active { border-color: rgba(201,242,78,.45); background: linear-gradient(180deg, rgba(201,242,78,.12), rgba(201,242,78,.06)); }
  .student-row .name { font-weight: 600; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
  .student-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
  .users-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
  }
  .users-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .users-group-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .users-group-count {
    font-family: var(--mono);
    font-size: .66rem;
    color: var(--muted);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .users-group-list { display: flex; flex-direction: column; }
  .users-group-list .student-row {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .users-group-list .student-row:first-child { border-top: 0; }
  .users-group-list .student-row:hover { transform: none; }
  .roster-refresh-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
  .add-student { display: flex; gap: 8px; }
  .progress-stat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
  .progress-stat .big { font-family: var(--display); font-size: 2.6rem; font-weight: 800; color: var(--accent); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  .progress-bar { height: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
  .progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .4s cubic-bezier(.2,.7,.2,1); }
  .breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  .bar-row { display: grid; grid-template-columns: 120px 1fr 38px; align-items: center; gap: 10px; font-size: .82rem; margin-bottom: 7px; }
  .bar-row .track { height: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .bar-row .track > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
  .bar-row .num { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .78rem; }
  .completed-list { display: flex; flex-direction: column; gap: 7px; max-height: 360px; overflow: auto; }
  .completed-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .86rem; background: var(--surface-2); }
  .completed-row .c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .completed-row .c-date { color: var(--muted); font-size: .74rem; font-family: var(--mono); white-space: nowrap; }
  .note-banner {
    background: linear-gradient(180deg, rgba(201,242,78,.08), var(--surface-2) 42%);
    border: 1px solid rgba(201,242,78,.22);
    color: var(--ink-soft);
    padding: 13px 17px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 0 rgba(201,242,78,.08);
  }
  .note-banner strong { color: var(--ink); }
  #students-guide { margin-bottom: 18px; }
  #needs-attention { margin-bottom: 18px; }
  .backup-bar { display: flex; gap: 10px; flex-wrap: wrap; }

  .warning-banner {
    background: linear-gradient(180deg, rgba(73,16,28,.92), rgba(49,13,21,.96));
    border-bottom: 1px solid var(--danger-line);
    color: var(--danger-soft);
    padding: 11px 18px;
    font-size: .85rem;
    text-align: center;
  }

  /* ---------- Toast ---------- */
  #toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
    background: var(--surface); color: var(--ink); padding: 13px 22px; border-radius: 999px; font-size: .88rem;
    font-weight: 600; box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-strong);
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: .8rem; text-align: center; letter-spacing: .02em; }
  .site-footer span { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* ---------- Responsive ---------- */
  @media (max-width: 880px) {
    .builder-layout, .students-layout, .settings-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 680px) {
    .container { padding: 0 16px; }
    .form-grid2 { grid-template-columns: 1fr; }
    .header-top { gap: 10px; }
    .brand-tag { display: none; }
    .tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 1 0 auto; padding: 12px 12px; font-size: .85rem; }
    .student-picker { width: 100%; }
    .student-picker select { flex: 1; }
    .breakdown { grid-template-columns: 1fr; }
    .bar-row { grid-template-columns: 100px 1fr 34px; }
    .view-intro h2 { font-size: 1.8rem; }
  }

  /* ---------- Roles / admin ---------- */
  .role-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .role-controls #logout-btn:not([hidden]),
  .role-controls #admin-login-btn:not([hidden]) { margin-left: 4px; }
  .admin-badge {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink);
    background: var(--accent); border: 1px solid var(--accent); padding: 5px 11px; border-radius: 999px;
  }
  .admin-badge.is-student { color: var(--ink-soft); background: var(--surface-3); border-color: var(--line-strong); }
  .btn--icon { border-radius: 999px; }
  .preview-banner {
    background: linear-gradient(180deg, var(--warn-dim), rgba(245,196,81,.08)); border-bottom: 1px solid var(--warn-line); color: var(--warn-soft);
    padding: 10px 18px; font-size: .85rem; text-align: center; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  }
  .preview-banner[hidden] { display: none; }
  .student-name-tag { font-weight: 700; color: var(--ink); padding: 4px 0; }
  body[data-role="student"] .admin-only { display: none !important; }

  /* ---------- Card admin controls ---------- */
  .card-admin { display: flex; gap: 7px; flex-wrap: wrap; width: 100%; border-top: 1px dashed var(--line-strong); padding-top: 11px; margin-top: 2px; }
  .card.is-hidden-activity { opacity: .55; }
  .tag-hidden { font-family: var(--mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--warn-soft); background:var(--warn-dim); padding:3px 8px; border-radius:6px; border:1px solid var(--warn-line); }
  .tag-custom { font-family: var(--mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--info-soft); background:var(--info-dim); padding:3px 8px; border-radius:6px; border:1px solid var(--info-line); }

  /* ---------- Modal ---------- */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(6,8,12,.66); z-index: 200;
    display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow: auto;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .modal-overlay[hidden] { display: none; }
  .modal {
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow);
    width: 100%; max-width: 600px; margin: auto; display: flex; flex-direction: column;
    animation: fadein .25s cubic-bezier(.2,.7,.2,1) both;
  }
  .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); }
  .modal-head h3 { font-size: 1.18rem; }
  .modal-close { appearance:none; border:none; background:none; cursor:pointer; font-size:1.6rem; line-height:1; color:var(--muted); padding:0 4px; transition: color .15s; }
  .modal-close:hover { color: var(--ink); }
  .modal-body { padding: 22px; }
  .modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .form-stack { display:flex; flex-direction:column; gap:16px; }
  .form-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  textarea { resize: vertical; min-height: 76px; }
  .field-hint { font-size:.78rem; color:var(--muted); line-height: 1.5; }

  /* ---------- Activity picker ---------- */
  .picker-list { border:1px solid var(--line); border-radius:var(--radius-sm); max-height:300px; overflow:auto; margin-top:12px; background: var(--bg-2); }
  .picker-row { display:flex; align-items:center; gap:11px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:.86rem; cursor:pointer; transition: background .12s; }
  .picker-row:last-child { border-bottom:none; }
  .picker-row:hover { background: var(--accent-dim); }
  .picker-row input { width:auto; flex:none; }
  .picker-row .p-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .picker-row .p-meta { color:var(--muted); font-size:.74rem; white-space:nowrap; font-family: var(--mono); }
  .picker-count { font-size:.82rem; color:var(--ink-soft); font-weight:600; margin-top:12px; }

  /* ---------- Assignments ---------- */
  .assignment { border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:14px; background:var(--surface-2); box-shadow: var(--shadow-sm); }
  .assignment-head { display:flex; align-items:flex-start; gap:10px; justify-content:space-between; }
  .assignment-title { font-weight:700; font-size:1.05rem; font-family: var(--display); letter-spacing: -.01em; }
  .assignment-note { font-size:.85rem; color:var(--ink-soft); margin-top:5px; white-space:pre-wrap; line-height: 1.5; }
  .assignment-meta { font-size:.74rem; color:var(--muted); margin-top:5px; font-family: var(--mono); }
  .assignment-bar { height:8px; background:var(--bg-2); border: 1px solid var(--line); border-radius:999px; overflow:hidden; margin:13px 0; }
  .assignment-bar > span { display:block; height:100%; background:var(--accent); transition: width .3s ease; }
  .assignment-status { font-size:.76rem; font-weight:700; color:var(--ink-soft); }
  .assignment-status.is-complete { color: var(--accent); }
  .assignment-actions { display:flex; gap:6px; flex:none; }
  .assign-item { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:.88rem; }
  .assign-item .ai-name { flex:1 1 200px; min-width:0; }
  .assign-item details.detail { flex-basis:100%; }
  .assign-item.is-done .ai-name { color: var(--muted); }
  .reflection-box, .reflection-read { flex-basis: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); padding: 10px 12px; margin-top: 2px; }
  .reflection-input { width: 100%; min-height: 88px; margin-top: 6px; border: none; background: transparent; color: var(--ink); resize: vertical; padding: 0; font-family: var(--font); font-size: .9rem; line-height: 1.6; }
  .reflection-input:focus { outline: none; background: transparent; box-shadow: none; }
  .reflection-box:focus-within { border-color: var(--line-strong); }
  .assignment-reflection:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(201,242,78,.25); }
  .reflection-status { margin-top: 6px; font-size: .74rem; color: var(--muted); }
  .assignment-reflection {
    margin-top: 14px;
    border-color: rgba(201,242,78,.22);
    background: linear-gradient(180deg, rgba(201,242,78,.07), var(--bg-2) 38%);
    box-shadow: inset 0 1px 0 rgba(201,242,78,.08);
  }

  /* ---------- Student workouts toolbar + condensed completed assignments ---------- */
  .workouts-toolbar { display:flex; justify-content:flex-end; margin-bottom:14px; }
  .completed-assignments { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; margin-top: 14px; }
  .completed-assignments-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-size: .86rem; }
  .completed-assignments-summary::-webkit-details-marker { display: none; }
  .completed-assignments-summary::before { content: "▸"; color: var(--muted); transition: transform .2s ease; margin-right: 2px; }
  .completed-assignments[open] > .completed-assignments-summary::before { transform: rotate(90deg); }
  .completed-assignments-summary .ca-title { font-weight: 700; color: var(--ink); flex: 1; }
  .completed-assignments-summary .ca-meta { color: var(--muted); font-size: .76rem; font-family: var(--mono); }
  .completed-assignments-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 14px; }

  /* ---------- Sections / toolbars ---------- */
  .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
  .section-head h3 { font-size:1.1rem; }
  .section-head-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .section-head--stacked { align-items: start; }
  .section-head-copy { display: grid; gap: 6px; min-width: 0; }
  .section-head-note { margin: 0; color: var(--ink-soft); font-size: .84rem; max-width: 56ch; }
  .asg-summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:-6px 0 14px; font-size:.82rem; color:var(--muted); font-family:var(--mono); }
  .asg-summary .asg-summary-item { color:var(--ink-soft); }
  .asg-summary .asg-summary-sep { color:var(--line); }
  .repo-toolbar { display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-bottom:16px; flex-wrap:wrap; }
  .settings-layout { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
  .settings-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

  /* ---------- Buttons: icon + block ---------- */
  .btn--icon { width: 34px; min-width: 34px; padding: 7px 0; justify-content: center; font-weight: 800; }
  .btn--block { width: 100%; justify-content: center; }
  .server-only[hidden], .local-only[hidden] { display: none !important; }

  /* ---------- Invite pill / student row ---------- */
  .name-wrap { display:flex; flex-direction:column; gap:2px; min-width:0; flex: 1; }
  .student-email { font-size:.78rem; color: var(--muted); word-break: break-all; font-family: var(--mono); line-height: 1.4; }
  .pill { font-family: var(--mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:999px; }
  .pill--pending { color:var(--warn); background:rgba(245,196,81,.12); border:1px solid rgba(245,196,81,.3); }
  .pill--active { color: var(--accent-strong); background: var(--accent-dim); border:1px solid rgba(201,242,78,.3); }

  /* ---------- Default-passcode nudge ---------- */
  .nudge-banner {
    background:rgba(245,196,81,.1); border-bottom:1px solid rgba(245,196,81,.3); color:var(--warn);
    padding:10px 18px; font-size:.85rem; text-align:center; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  }
  .nudge-banner[hidden] { display:none; }

  body[data-auth-shell="signed-out"] .app-header,
  body[data-auth-shell="signed-out"] main,
  body[data-auth-shell="signed-out"] .preview-banner,
  body[data-auth-shell="signed-out"] .nudge-banner,
  body[data-auth-shell="signed-out"] .site-footer {
    display: none !important;
  }

  /* ---------- Auth gate (sign-in) ----------
     One restrained brand-hue wash, matching the in-app atmosphere — no multi-color
     glow field (PRODUCT.md rules out decorative gradient polish). */
  .auth-gate {
    position: fixed; inset: 0; z-index: 300; overflow: auto;
    background:
      radial-gradient(1100px 520px at 50% -14%, var(--so-glow-1), transparent 62%),
      var(--bg);
    display: flex; align-items: center; justify-content: center; padding: 7vh 16px 24px;
  }
  .auth-theme-toggle {
    position: fixed; top: 16px; right: 16px; z-index: 320;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px;
    font-family: var(--mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 28px -16px rgba(0,0,0,.55);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.25,1,.5,1);
  }
  .auth-theme-toggle:hover {
    color: var(--ink);
    border-color: var(--line-glow);
    background: var(--accent-dim);
    transform: translateY(-1px);
  }
  .auth-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 680px) {
    .auth-theme-toggle { top: 10px; right: 10px; padding: 7px 11px; }
  }
  .auth-stack { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 760px; margin: auto; }
  .auth-stack--hybrid { max-width: 1180px; gap: clamp(24px, 3.5vw, 42px); align-items: stretch; }
  .auth-shell-top { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(320px, 420px); gap: clamp(18px, 3vw, 32px); align-items: start; width: 100%; }
  .signedout-hero {
    position: relative;
    background: var(--so-hero-bg);
    border: 1px solid var(--so-hero-border);
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow: var(--so-hero-shadow);
    padding: clamp(28px, 4.4vw, 48px);
  }
  .signedout-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(118% 78% at 100% -10%, var(--accent-dim), transparent 58%);
  }
  .signedout-hero > * { position: relative; z-index: 1; }
  .signedout-brand .auth-head { margin-bottom: 26px; }
  .signedout-kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-strong);
  }
  .signedout-kicker::before {
    content: ""; width: 26px; height: 1px; background: var(--accent-strong); border-radius: 999px;
  }
  .signedout-title {
    max-width: 13ch;
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: .95;
    letter-spacing: -.045em;
    margin: 0 0 20px;
  }
  .signedout-copy {
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: 1.02rem;
    margin: 0 0 24px;
  }
  .signedout-moment {
    display: grid; gap: 6px; align-items: start;
    margin: 0 0 22px; padding: 12px 14px;
    border-radius: var(--radius); border: 1px solid var(--accent-dim);
    background: var(--so-moment-bg);
  }
  .signedout-moment-label {
    font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong);
  }
  .signedout-moment-copy {
    color: var(--ink); font-size: .9rem; line-height: 1.55; max-width: 58ch;
  }
  .signedout-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .signedout-role {
    display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px;
    border-radius: 999px; border: 1px solid var(--line-strong); background: var(--so-fill);
    color: var(--ink-soft); font-size: .8rem; font-weight: 600;
    transition: transform .18s cubic-bezier(.25,1,.5,1), border-color .18s ease, background .18s ease, color .18s ease;
  }
  .signedout-role:hover {
    transform: translateY(-1px);
    border-color: var(--line-glow);
    background: var(--accent-dim);
    color: var(--ink);
  }
  .signedout-guide {
    margin-bottom: 22px; padding: 18px 18px 16px;
    border-radius: calc(var(--radius) + 2px); border: 1px solid var(--line);
    background: var(--so-inset-bg);
  }
  .signedout-guide-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .signedout-guide-title {
    margin: 0; font-family: var(--display); font-size: 1.02rem; line-height: 1.12; letter-spacing: -.02em;
  }
  .signedout-guide-meta {
    font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .signedout-guide-list {
    margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;
    counter-reset: signedout-guide;
  }
  .signedout-guide-step {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; align-items: start;
    color: var(--ink-soft); font-size: .92rem;
  }
  /* The bold lead and its description are separate grid items; pin both to the text
     column so the description can't fall into the 26px number column (where it would
     wrap one word per line). The number badge (::before) stays auto-placed in col 1. */
  .signedout-guide-step > * { grid-column: 2; }
  .signedout-guide-step::before {
    counter-increment: signedout-guide;
    content: counter(signedout-guide);
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 999px; background: var(--accent-dim); border: 1px solid rgba(201,242,78,.24);
    color: var(--accent-strong); font-family: var(--mono); font-size: .74rem; font-weight: 700;
  }
  .signedout-guide-step strong { color: var(--ink); }
  .signedout-actions {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px;
  }
  .signedout-actions .btn--primary::after {
    content: ">"; font-family: var(--mono); font-size: .82rem;
    transform: translateX(0); transition: transform .18s cubic-bezier(.25,1,.5,1);
  }
  .signedout-actions .btn--primary:hover::after,
  .signedout-actions .btn--primary:focus-visible::after {
    transform: translateX(2px);
  }
  .signedout-note {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    margin-bottom: 12px; color: var(--ink-soft); font-size: .9rem;
  }
  .signedout-note strong { color: var(--ink); }
  .auth-landing-custom[hidden] { display: none !important; }
  .auth-landing-custom {
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  }
  .auth-landing-custom .pb-hero { padding: 6px 0 0; text-align: left !important; }
  .auth-landing-custom .pb-hero-h { max-width: 14ch; font-size: clamp(1.5rem, 3vw, 2.35rem); }
  .auth-landing-custom .pb-text,
  .auth-landing-custom .pb-hero-sub { max-width: 58ch; }
  .auth-card {
    background: var(--so-card-bg); border-radius: var(--radius-lg);
    box-shadow: var(--so-card-shadow);
    width: 100%; max-width: 440px; padding: 28px 28px 30px; margin: auto;
    border: 1px solid var(--so-hero-border);
    animation: rise .6s cubic-bezier(.2,.75,.2,1) both;
  }
  .auth-head { display:flex; align-items:center; gap:13px; margin-bottom: 8px; }
  .auth-card-kicker { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-strong); margin-bottom: 10px; }
  .auth-title { font-family: var(--display); font-size: 1.7rem; letter-spacing: -.035em; margin: 0 0 8px; line-height: 1.05; }
  .auth-flow-guide {
    margin-top: 16px; padding: 14px 14px 12px;
    border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--so-fill);
  }
  .auth-flow-guide-title {
    margin-bottom: 10px; font-family: var(--mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong);
  }
  .auth-flow-guide-list {
    margin: 0; padding: 0; list-style: none; display: grid; gap: 8px;
    counter-reset: auth-flow;
  }
  .auth-flow-guide-step {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
    color: var(--ink-soft); font-size: .84rem; line-height: 1.5;
  }
  .auth-flow-guide-step::before {
    counter-increment: auth-flow;
    content: counter(auth-flow) ".";
    color: var(--ember-strong); font-family: var(--mono); font-size: .72rem; font-weight: 700; line-height: 1.7;
  }
  .auth-card .form-stack { margin-top: 22px; }
  .auth-card .btn--block { margin-top: 8px; padding: 13px 16px; font-size: .98rem; }
  .signedout-preview {
    width: 100%;
    background: var(--so-preview-bg);
    border: 1px solid var(--so-hero-border);
    border-radius: calc(var(--radius-lg) + 4px);
    box-shadow: var(--so-preview-shadow);
    padding: clamp(20px, 2.8vw, 28px);
  }
  .signedout-preview-head {
    display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .signedout-preview-kicker {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-strong); font-weight: 700; margin-bottom: 8px;
  }
  .signedout-preview-head h2 { font-size: clamp(1.35rem, 2.8vw, 2rem); letter-spacing: -.03em; margin: 0 0 6px; }
  .signedout-preview-copy { margin: 0; color: var(--ink-soft); max-width: 62ch; }
  .signedout-preview-meta {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .signedout-preview-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .signedout-preview-card {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 100%; padding: 16px;
    border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--so-tile-bg);
    box-shadow: inset 0 1px 0 var(--so-fill-strong);
    grid-column: span 4;
    transition: transform .2s cubic-bezier(.25,1,.5,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .signedout-preview-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-glow);
    background: var(--so-tile-bg-hover);
    box-shadow: var(--so-tile-shadow-hover);
  }
  .signedout-preview-card:first-child { grid-column: span 6; padding: 18px; }
  .signedout-preview-card:first-child .signedout-preview-summary { max-width: 48ch; }
  .signedout-preview-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
  .signedout-preview-card-title {
    font-family: var(--display); font-size: 1.02rem; line-height: 1.14; letter-spacing: -.02em; margin: 0;
  }
  .signedout-preview-eyebrow {
    font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-strong);
  }
  .signedout-preview-week {
    flex: none; padding: 4px 8px; border-radius: 999px; background: var(--so-fill-strong); border: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-family: var(--mono);
  }
  .signedout-preview-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .signedout-preview-chip {
    display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--so-fill); color: var(--ink-soft); font-size: .72rem; font-weight: 600;
  }
  .signedout-preview-chip--topic { background: var(--accent-dim); border-color: rgba(201,242,78,.2); color: var(--accent-strong); }
  .signedout-preview-chip--meta { color: var(--muted); }
  .signedout-preview-summary { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.58; }
  .signedout-preview-footer {
    margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--so-hairline);
  }
  .signedout-preview-hint { color: var(--muted); font-size: .76rem; }
  .signedout-preview-lock {
    display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--so-fill-strong); color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  }
  .signedout-preview-card:hover .signedout-preview-lock {
    background: var(--accent-dim);
    color: var(--accent-strong);
  }

  body[data-auth-shell="signed-out"] .auth-card .field-hint { color: var(--ink-soft); }

  @media (max-width: 980px) {
    .auth-shell-top { grid-template-columns: 1fr; }
    .auth-card { max-width: none; }
    .signedout-preview-card,
    .signedout-preview-card:first-child { grid-column: span 6; }
  }
  @media (max-width: 680px) {
    .auth-gate { padding: 22px 14px 18px; }
    .signedout-hero,
    .signedout-preview,
    .auth-card { padding-inline: 20px; }
    .signedout-title { max-width: 12ch; font-size: clamp(2rem, 9vw, 3rem); }
    .signedout-guide-step { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
    .signedout-preview-grid { grid-template-columns: 1fr; }
    .signedout-preview-card,
    .signedout-preview-card:first-child { grid-column: auto; }
  }

  /* ---------- Onboarding tour ---------- */
  .tour-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(6,8,12,.62); backdrop-filter: blur(2px); }
  .tour-highlight {
    position: relative; z-index: 401;
    box-shadow: 0 0 0 2px rgba(201,242,78,.92), 0 0 0 7px rgba(201,242,78,.14);
    border-radius: 10px;
  }
  .tour-tip {
    position: absolute; z-index: 402; width: min(330px, calc(100vw - 24px));
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px;
  }
  .tour-counter { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
  .tour-title { font-size: 1.08rem; margin: 6px 0 7px; }
  .tour-text { font-size: .88rem; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.55; }
  .tour-nav { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  .tour-nav .btn--ghost { margin-right: auto; }

  /* ---------- Touch targets ---------- */
  @media (pointer: coarse) {
    .btn, .tab, select, input, textarea { min-height: 44px; }
    .btn--sm { min-height: 40px; }
    .btn--icon { min-height: 40px; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  }

  /* ---------- Printable assignment ---------- */
  #print-area { position: absolute; left: -9999px; top: 0; width: 1px; }
  #print-area .pa-title { font-size: 1.4rem; margin-bottom: 4px; }
  #print-area .pa-sub { color: var(--ink-soft); font-size: .9rem; margin-bottom: 10px; }
  #print-area .pa-note { font-size: .92rem; margin: 0 0 14px; white-space: pre-wrap; }
  #print-area .pa-list { padding-left: 22px; }
  #print-area .pa-list > li { margin-bottom: 14px; }
  #print-area .pa-name { font-weight: 700; }
  #print-area .pa-meta { color: var(--ink-soft); font-size: .85rem; }
  #print-area .pa-link { font-size: .82rem; word-break: break-all; }

  /* ---------- Print: only the generated workout (force light for paper) ---------- */
  @media print {
    body { background: #f8f5ef; color: #1b1a18; }
    body * { visibility: hidden; }
    #workout-output, #workout-output * { visibility: visible; color: #1b1a18; }
    #workout-output { position: absolute; inset: 0; padding: 0; }
    .export-bar, .workout-item .done-btn { display: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; word-break: break-all; }
    body.printing-assignment > *:not(#print-area) { display: none !important; }
    body.printing-assignment #print-area { position: static; left: auto; width: auto; visibility: visible; color: #1b1a18; }
    body.printing-assignment #print-area * { visibility: visible; color: #1b1a18; }
  }

  /* ---------- Content / CMS (admin) ---------- */
  .cms-subnav { margin-bottom: 16px; width: max-content; max-width: 100%; }
  .cms-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0 18px; }
  .cms-search { flex: 1 1 240px; }
  .cms-toolbar-more { margin-left: auto; position: relative; }
  .cms-toolbar-more summary {
    list-style: none; cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--ink-soft); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--surface);
  }
  .cms-toolbar-more summary::-webkit-details-marker { display: none; }
  .cms-toolbar-more[open] summary { border-color: var(--line-strong); color: var(--ink); }
  .cms-toolbar-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 180px;
    padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--surface-2); box-shadow: var(--shadow-sm);
  }
  .cms-count { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
  .chip--accent { background: var(--accent-dim); color: var(--accent-strong); border-color: rgba(201,242,78,.25); }
  .cms-table-wrap { display: grid; gap: 12px; }
  .cms-window-note {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-size: .82rem;
  }

  /* No overflow:hidden here — it would clip the absolutely-positioned .cms-row-menu
     dropdown (design-system interaction rule). Round the end rows instead so the
     corners still read as a single rounded table. */
  .cms-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .cms-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 12px;
    padding: 14px 16px; border-top: 1px solid var(--line); background: var(--surface);
  }
  .cms-row:first-child { border-top: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .cms-row:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .cms-row:only-child { border-radius: var(--radius-sm); }
  .cms-row:hover { background: var(--surface-2); }
  .cms-row.is-hidden { opacity: .58; }
  .cms-cell--name { flex: 1 1 auto; min-width: 0; }
  .cms-cell--name strong { display: block; font-size: .96rem; line-height: 1.3; }
  .cms-meta { font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
  .cms-tags { display: flex; gap: 6px; flex-wrap: wrap; align-self: center; }
  .cms-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; align-items: start; justify-content: flex-end; }
  .cms-row-menu { position: relative; }
  .cms-row-menu summary {
    list-style: none; cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--ink-soft);
    padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  }
  .cms-row-menu summary::-webkit-details-marker { display: none; }
  .cms-row-menu[open] summary { border-color: var(--line); background: var(--surface-2); color: var(--ink); }
  .cms-row-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 4;
    display: flex; flex-direction: column; gap: 6px; min-width: 140px;
    padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--surface-2); box-shadow: var(--shadow-sm);
  }

  .cms-tax-group { padding: 16px 0; border-top: 1px solid var(--line); }
  .cms-tax-group:first-of-type { border-top: none; padding-top: 6px; }
  .cms-tax-list { display: flex; flex-direction: column; margin: 10px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .cms-tax-list .no-link { padding: 12px 14px; margin: 0; }
  .cms-tax-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--surface); }
  .cms-tax-row:first-child { border-top: none; }
  .cms-tax-row:hover { background: var(--surface-2); }
  .cms-tax-name { flex: 1 1 auto; font-weight: 600; min-width: 0; word-break: break-word; }
  .cms-tax-usage { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }
  .cms-tax-add { display: flex; gap: 8px; align-items: center; }
  .cms-tax-add input { flex: 1 1 auto; max-width: 320px; }

  /* duplicate-search panel inside the create-athlete / create-staff modals */
  .dupe-matches { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; max-height: 220px; overflow-y: auto; }
  .dupe-head { padding: 8px 12px; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--surface-2); }
  .dupe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); }
  .dupe-row.is-email { background: rgba(255,93,108,.12); }
  .dupe-row.is-name { background: rgba(245,196,81,.1); }
  .dupe-row .name { font-weight: 600; }
  .dupe-tier { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
  .dupe-coach { font-size: .72rem; color: var(--muted); }
  .dupe-flag { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--warn); }
  .dupe-flag--email { color: var(--danger); }
  .dupe-confirm { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 12px; cursor: pointer; }
  .dupe-confirm input { width: auto; }

  /* Students tab: "My students / All students" subtab + the org-wide directory pane */
  #students-subnav { margin: 4px 0 16px; width: max-content; max-width: 100%; }
  .all-students-search { width: 100%; max-width: 420px; margin: 4px 0 14px; }
  #all-students-list .student-row .name-wrap { gap: 2px 10px; }
  .team-stack { display: grid; gap: 18px; }
  .team-stack--superadmin { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); align-items: start; gap: clamp(18px, 2.4vw, 28px); }
  .team-side-stack { display: grid; gap: 18px; }
  .team-panel { padding: 22px; }
  .team-panel .student-list { margin-top: 12px; }
  .student-row-meta { font-size: .72rem; color: var(--muted); }

  /* clickable links inside coach-authored notes */
  .note-link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
  .howto-list { margin: 6px 0 2px; padding-left: 20px; font-size: .82rem; color: var(--ink-soft); line-height: 1.55; }
  .howto-list li { margin-bottom: 4px; }
  .btn.has-custom-link { border-color: var(--line-glow); }

  @media (max-width: 560px) {
    .cms-row, .cms-tax-row { display: flex; flex-wrap: wrap; }
    .cms-actions { width: 100%; }
    .cms-toolbar-more { margin-left: 0; }
    .cms-toolbar-panel,
    .cms-row-menu-panel { position: static; margin-top: 8px; width: 100%; }
  }

  @media (max-width: 880px) {
    .team-stack--superadmin { grid-template-columns: 1fr; }
    .student-row { grid-template-columns: 1fr; }
    .student-row-actions { align-items: flex-start; }
    .cms-row { grid-template-columns: 1fr; }
    .cms-tags, .cms-actions { justify-content: flex-start; }
  }

  /* ===================== Content scope switch ===================== */
  .cms-scope { margin-bottom: 12px; }

  /* ===================== CMS hub (WordPress-style admin shell) ===================== */
  .cms-hub { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
  .cms-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
  .cms-nav-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    text-align: left; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent; color: var(--ink-soft);
    font-size: .9rem; font-weight: 600; transition: background .12s, color .12s, border-color .12s;
  }
  .cms-nav-item:hover { background: var(--surface-2); color: var(--ink); }
  .cms-nav-item.is-active { background: var(--accent-dim); color: var(--accent-strong); border-color: rgba(201,242,78,.25); }
  .cms-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cms-nav-soon {
    font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
  }
  .cms-hub-body { min-width: 0; }
  .cms-dash, .cms-design { display: flex; flex-direction: column; gap: 16px; }
  .cms-design > .panel { margin: 0; }
  .cms-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .cms-dash-card {
    display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
    padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    transition: border-color .12s, transform .12s;
  }
  .cms-dash-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .cms-dash-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cms-dash-value { font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
  .cms-dash-label { font-size: .9rem; font-weight: 700; color: var(--ink); }
  .cms-dash-sub { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
  .cms-soon .field-hint { max-width: 60ch; }

  /* Brand: logo / favicon pickers */
  .brand-pick { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
  .brand-pick:first-of-type { border-top: 0; }
  .brand-pick-thumb {
    flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden;
  }
  .brand-pick-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .brand-pick-thumb .no-link { font-size: .74rem; }
  .brand-pick-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .brand-logo--img { width: auto; height: 44px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .brand-logo--img img { display: block; height: 100%; width: auto; max-width: 180px; object-fit: contain; }

  /* Typography: type-scale preview */
  .type-scale-preview { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
  .type-scale-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; line-height: 1.15; color: var(--ink); font-family: var(--display); }
  .type-scale-size { font-family: var(--mono); font-size: .66rem; color: var(--muted); flex: 0 0 auto; }

  /* Dimensions preview */
  .dim-preview { display: flex; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
  .dim-swatch { width: 96px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: .62rem; color: var(--muted); }
  .dim-gap { display: flex; }
  .dim-gap span { width: 22px; height: 40px; border-radius: 4px; background: var(--accent-dim); border: 1px solid rgba(201,242,78,.3); }

  @media (max-width: 720px) {
    .cms-hub { grid-template-columns: 1fr; gap: 14px; }
    .cms-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
    .cms-nav-item { width: auto; white-space: nowrap; }
    .cms-nav-soon { display: none; }
  }

  /* ===================== Appearance: theme editor ===================== */
  .appearance-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin: 12px 0 18px;
  }
  .appearance-field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
  .appearance-field > span { font-weight: 600; }
  .appearance-field input[type="color"] {
    width: 100%; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-2); cursor: pointer;
  }
  .appearance-field select,
  .appearance-field input[type="range"] { width: 100%; }
  .appearance-slider { display: flex; align-items: center; gap: 10px; }
  .appearance-slider input[type="range"] { flex: 1; }
  .appearance-val { font-family: var(--mono); font-size: .78rem; color: var(--ink); min-width: 48px; text-align: right; }
  .appearance-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }

  /* ===================== Appearance: page builder ===================== */
  .builder-section { margin: 16px 0; }
  .builder-palette { display: flex; flex-wrap: wrap; gap: 8px; }
  .builder-canvas { display: flex; flex-direction: column; gap: 10px; }
  .builder-block {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  }
  .builder-block-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .builder-block-summary { color: var(--ink-soft); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
  .builder-card-row { display: flex; gap: 8px; align-items: center; }
  .builder-card-row input { flex: 1; }
  .builder-preview {
    border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px;
    background: var(--bg-2); margin-top: 8px;
  }

  /* ===================== Page-block render (preview + published page) ===================== */
  .pb-hero { padding: 28px 8px; }
  .pb-hero-h { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 10px; }
  .pb-hero-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 16px; }
  .pb-heading { font-family: var(--display); margin: 18px 0 8px; }
  .pb-text { color: var(--ink-soft); margin: 0 0 12px; max-width: 70ch; }
  .pb-image { display: block; max-width: 100%; border-radius: var(--radius); margin: 10px 0; }
  .pb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 12px 0; }
  .pb-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .pb-card-icon { font-size: 1.6rem; margin-bottom: 6px; }
  .pb-button { margin: 12px 0; }
  /* New block types (Phase 4) */
  .pb-columns { display: grid; gap: 18px; margin: 14px 0; }
  .pb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pb-col-h { font-family: var(--display); font-size: 1.1rem; margin: 0 0 6px; }
  .pb-column p { color: var(--ink-soft); margin: 0; }
  .pb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
  .pb-gallery-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .pb-embed { margin: 16px 0; }
  .pb-embed-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
  .pb-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .pb-embed-cap { color: var(--muted); font-size: .82rem; margin: 6px 0 0; text-align: center; }
  .pb-quote { border-left: 3px solid var(--accent); margin: 16px 0; padding: 6px 0 6px 16px; }
  .pb-quote p { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin: 0 0 6px; }
  .pb-quote cite { color: var(--muted); font-size: .85rem; font-style: normal; }
  .pb-divider { margin: 22px 0; }
  .pb-divider--line { border-top: 1px solid var(--line); }
  .pb-divider--dots { text-align: center; letter-spacing: .5em; color: var(--muted); }
  .pb-cta { text-align: center; padding: 28px 18px; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
  .pb-cta-h { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 8px; }
  .pb-cta-sub { color: var(--ink-soft); margin: 0 0 16px; }
  .builder-col-edit { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
  .media-thumb--sm { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }

  /* Menu builder (Phase 2) */
  .menu-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
  .menu-row-fields { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; flex-wrap: wrap; }
  .menu-row-fields > * { flex: 1 1 120px; min-width: 0; }

  /* Check-in config (Phase 3) */
  .checkin-cfg-row { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 10px; }
  .checkin-cfg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .checkin-cfg-flags { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
  .setting-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .access-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 10px; cursor: pointer; }
  .access-row input[type="checkbox"] { margin-top: 3px; flex: none; }
  .access-row-title { font-weight: 600; color: var(--ink); }

  /* ===================== Check-ins, journal & wellbeing ===================== */
  .checkin-card .checkin-dim { margin: 14px 0; }
  .checkin-dim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
  .checkin-dim-label { font-weight: 600; }
  .checkin-dim-ends { color: var(--muted); font-size: .8rem; }
  .checkin-scale { display: flex; gap: 8px; }
  .checkin-dot {
    flex: 1 1 0; min-width: 0; padding: 12px 0; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
    font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  }
  .checkin-dot:hover { border-color: var(--line-strong); }
  .checkin-dot.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  /* The high end of the Stress scale is the tough end — a calm warm amber, never the
     celebratory lime the good ends get (and never an alarming red). */
  .checkin-dot--warm.is-on { background: var(--warn); border-color: var(--warn); color: #241b04; }
  .checkin-note { width: 100%; min-height: 72px; resize: vertical; }
  .checkin-streak { color: var(--ember); font-weight: 600; font-size: .85rem; }
  .checkin-history-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .ch-date { font-weight: 600; min-width: 60px; }
  .ch-scores { color: var(--ink-soft); }
  .ch-note { flex-basis: 100%; color: var(--muted); font-size: .85rem; }
  .journal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .journal-entry { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
  .journal-meta { color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
  .journal-body { white-space: pre-wrap; }
  .wellbeing-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .wb-chip { padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); }
  .assign-generator { margin: 4px 0 8px; }

  /* ===================== Messaging & coach notes ===================== */
  .msg-thread { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
  .msg { max-width: 80%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .msg-body { white-space: pre-wrap; }
  .msg-meta { font-size: .72rem; color: var(--muted); margin-top: 4px; }
  .msg--athlete { align-self: flex-start; background: var(--surface-2); }
  .msg--coach { align-self: flex-end; background: var(--accent-dim); border-color: rgba(201,242,78,.25); }
  .msg.is-unread { box-shadow: 0 0 0 2px var(--ember-dim); }
  .msg-compose { display: flex; gap: 8px; align-items: flex-end; }
  .msg-input { flex: 1 1 auto; min-height: 64px; width: 100%; resize: vertical; }
  .msg-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ember-dim); color: var(--ember); font-size: .72rem; font-weight: 600; margin-left: 8px; }

  /* ===================== Scheduling: due dates & needs-attention ===================== */
  .due-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
  .due-chip--overdue { background: rgba(255,93,108,.16); color: var(--danger); }
  .due-chip--soon { background: var(--ember-dim); color: var(--ember); }
  .attention-panel { margin-bottom: 16px; border-color: var(--line-strong); }
  .attention-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; }
  .attention-row:hover .attention-name { color: var(--accent); }
  .attention-name { font-weight: 600; }
  .attention-reasons { color: var(--ember); font-size: .82rem; }
  .student-stat { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
  .students-guide-panel { margin-bottom: 18px; border-color: rgba(201,242,78,.22); background: linear-gradient(180deg, rgba(201,242,78,.08), var(--surface) 34%); }
  .students-guide-kicker {
    font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-strong); margin-bottom: 10px;
  }
  .students-guide-head { display: grid; gap: 8px; margin-bottom: 14px; }
  .students-guide-head h3 { margin: 0; font-size: 1.18rem; }
  .students-guide-head p { margin: 0; color: var(--ink-soft); max-width: 64ch; }
  .students-guide-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: student-guide; }
  .students-guide-step {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
    color: var(--ink-soft); font-size: .9rem;
  }
  .students-guide-step::before {
    counter-increment: student-guide;
    content: counter(student-guide);
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
    background: var(--accent-dim); color: var(--accent-strong); font-family: var(--mono); font-size: .72rem; font-weight: 700;
    border: 1px solid rgba(201,242,78,.24);
  }
  .students-guide-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .students-next-step {
    display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
  }
  .students-next-step span { flex: 1 1 280px; }
  .student-row-meta { font-size: .72rem; color: var(--muted); }

  /* ===================== Athlete "Today" — tempo-spine workout home =====================
     Focus-first descent: the live item is the hero ("now", ember), finished work goes
     quiet (lime, checked), the rest waits ahead. The spine encodes sequence + time +
     progress. Built on the app's own tokens, so it tracks both themes. */
  #workouts-panel { --wk-x: 23px; }
  .wk-status { margin: 2px 0 28px; font-size: 1.04rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .wk-status b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .wk-status .wk-sep { color: var(--line-strong); }

  .wk { display: grid; gap: 44px; }
  .wk-set-head { margin-bottom: 4px; }
  .wk-set-title { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; line-height: 1.05; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .wk-set-meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .06em; margin-top: 9px; text-transform: uppercase; }
  .wk-coachnote-wrap { margin: 16px 0 0; }
  .wk-coachnote-from { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-strong); margin-bottom: 6px; }
  .wk-coachnote { font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }
  .wk-coachnote a { color: var(--accent-strong); }

  .wk-spine { margin-top: 26px; }
  .wk-spine-head { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px calc(var(--wk-x) + 41px); }

  .wk-rep { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding: 14px 0; align-items: start; }
  .wk-rep::before, .wk-rep::after { content: ""; position: absolute; left: var(--wk-x); width: 2px; background: var(--line-strong); transform: translateX(-1px); }
  .wk-rep::before { top: 0; height: 28px; }
  .wk-rep::after { top: 28px; bottom: -2px; }
  .wk-rep:first-of-type::before { display: none; }
  .wk-rep:last-of-type::after { display: none; }
  /* lit path: completed segments + the run into the live node glow lime */
  .wk-rep.wk-done::before, .wk-rep.wk-done::after, .wk-rep.wk-now::before { background: var(--accent); opacity: .5; }

  .wk-node { grid-column: 1; width: 14px; height: 14px; border-radius: 50%; margin-top: 21px; margin-left: calc(var(--wk-x) - 7px); background: var(--bg-2); border: 2px solid var(--line-strong); position: relative; z-index: 2; transition: background .3s ease, border-color .3s ease; }
  .wk-rep.wk-done .wk-node { background: var(--accent); border-color: var(--accent); }
  .wk-rep.wk-done .wk-node::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 7px; border: 1.7px solid var(--accent-ink); border-top: 0; border-left: 0; transform: rotate(42deg) translate(-.5px, -1px); }
  .wk-rep.wk-now .wk-node { width: 20px; height: 20px; margin-top: 18px; margin-left: calc(var(--wk-x) - 10px); background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 5px var(--ember-dim), 0 6px 18px -6px rgba(255,106,61,.6); animation: wk-pulse 2.6s cubic-bezier(.2,.7,.2,1) infinite; }
  @keyframes wk-pulse {
    0%, 100% { box-shadow: 0 0 0 5px var(--ember-dim), 0 6px 18px -6px rgba(255,106,61,.5); }
    50%      { box-shadow: 0 0 0 9px rgba(255,106,61,.05), 0 6px 18px -6px rgba(255,106,61,.26); }
  }

  .wk-body { grid-column: 2; min-width: 0; }
  .wk-time { font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .04em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .wk-time .wk-type { color: var(--ink-soft); }
  .wk-name { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
  .wk-rep.wk-done .wk-name, .wk-rep.wk-upcoming .wk-name { font-size: 1.05rem; color: var(--ink-soft); margin: 3px 0 5px; }
  .wk-rep.wk-done { opacity: .66; }
  .wk-rep.wk-upcoming .wk-blurb { color: var(--muted); font-size: .9rem; margin: 4px 0 10px; max-width: 58ch; line-height: 1.5; }

  .wk-doneline { display: flex; align-items: center; gap: 12px; font-size: .82rem; flex-wrap: wrap; }
  .wk-logged { font-style: italic; color: var(--muted); }
  .wk-doneline .wk-open { font-size: .74rem; padding: 3px 9px; }
  .wk-undo { appearance: none; background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; text-underline-offset: 3px; padding: 2px 0; }
  .wk-undo:hover { color: var(--ink-soft); text-decoration: underline; }
  .wk-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

  /* the live "now" — the hero. Node stays ON the spine; the body becomes a raised card. */
  .wk-rep.wk-now { margin: 10px 0; }
  .wk-rep.wk-now .wk-body { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 24px; box-shadow: var(--shadow-sm); position: relative; }
  .wk-rep.wk-now .wk-body::before { content: ""; position: absolute; left: -31px; top: 27px; width: 31px; height: 2px; background: var(--ember); opacity: .55; }
  .wk-eyebrow { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-strong); }
  .wk-rep.wk-now .wk-name { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.08; letter-spacing: -.02em; margin: 11px 0 10px; color: var(--ink); }
  .wk-rep.wk-now .wk-blurb { font-size: 1.02rem; color: var(--ink-soft); margin: 14px 0 0; max-width: 56ch; line-height: 1.55; }
  .wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
  .wk-rep.wk-upcoming .wk-actions { margin-top: 10px; }
  .wk-detail { margin-top: 14px; width: 100%; }

  /* the finish: this set's reflection */
  .wk-finish { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding: 22px 0 0; }
  .wk-finish::before { content: ""; position: absolute; left: var(--wk-x); top: -2px; width: 2px; height: 30px; background: var(--line-strong); transform: translateX(-1px); }
  .wk-flag { grid-column: 1; width: 16px; height: 16px; margin-left: calc(var(--wk-x) - 8px); margin-top: 21px; border-radius: 4px; background: var(--bg-2); border: 2px solid var(--line-strong); background-image: linear-gradient(45deg, var(--line-strong) 25%, transparent 25%, transparent 50%, var(--line-strong) 50%, var(--line-strong) 75%, transparent 75%); background-size: 7px 7px; }
  .wk-reflect { grid-column: 2; min-width: 0; }
  .wk-reflect-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .wk-reflect-prompt { font-style: italic; font-size: 1.12rem; color: var(--ink); margin: 8px 0 12px; line-height: 1.35; }
  .wk-reflect-input { width: 100%; min-height: 92px; resize: vertical; font: inherit; color: var(--ink); line-height: 1.6; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease; }
  .wk-reflect-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  .wk-reflect-status { margin-top: 8px; font-size: .78rem; color: var(--muted); }
  /* Per-activity reflection inside a spine rep — lighter and tighter than the end-of-set box,
     and not bound to the set grid's second column. */
  .wk-reflect--item { grid-column: auto; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
  .wk-reflect--item .wk-reflect-prompt { font-size: .95rem; font-style: italic; margin: 4px 0 8px; }
  .wk-reflect-input--item { min-height: 60px; padding: 10px 12px; font-size: .9rem; }

  /* Content-tab scope banner: names the library (Shared vs My) a super admin is editing. */
  .scope-banner { margin: 2px 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: .88rem; line-height: 1.5; }
  .scope-banner strong { font-weight: 700; }
  .scope-banner--global { border-color: var(--accent); background: var(--accent-dim); }
  .scope-banner--private { border-color: var(--line); background: var(--bg-2); }

  .wk-done-sets { margin-top: 40px; }
  .wk-done-sets .wk { gap: 32px; padding: 4px 2px; }

  .wk-empty { display: flex; gap: 16px; align-items: flex-start; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
  .wk-empty .wk-flag { flex: none; margin: 4px 0 0; grid-column: auto; }
  .wk-empty h3 { font-size: 1.2rem; margin-bottom: 6px; }
  .wk-empty p { color: var(--ink-soft); margin: 0; max-width: 52ch; }

  @media (max-width: 560px) {
    #workouts-panel { --wk-x: 19px; }
    .wk-rep, .wk-finish { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .wk-spine-head { margin-left: calc(var(--wk-x) + 31px); }
    .wk-rep.wk-now .wk-body { padding: 18px 18px 20px; }
    .wk-rep.wk-now .wk-body::before { left: -21px; width: 21px; }
  }

  /* ----------------------------- Editable site copy (content slots) -----------------------------
     Any node carrying data-slot is live, editable copy. For a super admin, a small ✎
     button is inserted right after the node (a sibling, so rehydrating the text never
     removes it). The button stays subtle until hovered/focused. */
  .slot-editable { position: relative; }
  .slot-edit-btn {
    appearance: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: middle;
    border: 1px solid var(--line-strong); border-radius: 6px;
    background: var(--bg-2); color: var(--muted); font-size: .72rem; line-height: 1;
    cursor: pointer; opacity: .45; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
  }
  .slot-edit-btn:hover, .slot-edit-btn:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
  .slot-edit-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Appearance → Site content panel */
  .content-group { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0; background: var(--bg-2); }
  .content-group > summary {
    cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: .92rem; color: var(--ink);
    list-style: none; display: flex; align-items: center; gap: 8px;
  }
  .content-group > summary::before { content: "▸"; font-size: .8em; color: var(--muted); transition: transform .15s ease; }
  .content-group[open] > summary::before { transform: rotate(90deg); }
  .content-group > summary::-webkit-details-marker { display: none; }
  .content-group > .form-stack { padding: 4px 16px 16px; }
  .slot-flag {
    display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim);
    border: 1px solid var(--accent); vertical-align: middle;
  }

  /* ----------------------------- Builder pages (multi-page CMS) -----------------------------
     Nav links shown on the signed-out gate for published pages, and the shared
     #view-page section that hosts a builder page inside the signed-in app. */
  .landing-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  .landing-nav-link {
    display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
    color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--line-strong); text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  .landing-nav-link:hover, .landing-nav-link:focus-visible { color: var(--accent); border-color: var(--accent); }
  .landing-nav-link.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
  #view-page .pb-page { max-width: 880px; margin: 0 auto; }

  /* ----------------------------- Rich text blocks (Editor.js output) ----------------------------- */
  .richtext-holder {
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--bg-2); padding: 8px 14px; min-height: 160px; color: var(--ink);
  }
  .richtext-holder .codex-editor__redactor { padding-bottom: 60px !important; }
  .pb-rich { line-height: 1.65; }
  .pb-rich .pb-rich-p { margin: 0 0 12px; color: var(--ink-soft); }
  .pb-rich .pb-rich-h { margin: 20px 0 10px; color: var(--ink); }
  .pb-rich .pb-rich-list { margin: 0 0 12px; padding-left: 26px; color: var(--ink-soft); }
  .pb-rich .pb-rich-list li { margin: 4px 0; }
  .pb-rich .pb-rich-quote {
    margin: 14px 0; padding: 10px 18px; border-left: 3px solid var(--accent);
    background: var(--bg-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic; color: var(--ink);
  }
  .pb-rich .pb-rich-quote cite { display: block; margin-top: 6px; font-size: .82rem; font-style: normal; color: var(--muted); }
  .pb-rich-delimiter { text-align: center; letter-spacing: .5em; color: var(--muted); margin: 18px 0; }
  .pb-rich a { color: var(--accent); text-underline-offset: 3px; }

  /* ----------------------------- Media library ----------------------------- */
  .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .media-card {
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2);
    overflow: hidden; display: flex; flex-direction: column; text-align: left;
  }
  .media-thumb { width: 100%; height: 120px; object-fit: cover; background: var(--surface); display: block; }
  .media-meta { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
  .media-name { font-size: .78rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .media-meta input { font-size: .78rem; padding: 6px 8px; }
  .media-card--pick { cursor: pointer; padding: 0; font: inherit; color: inherit; transition: border-color .15s ease; }
  .media-card--pick:hover, .media-card--pick:focus-visible { border-color: var(--accent); }
  .media-card--pick .media-name { padding: 8px 10px; }
  .media-grid--picker { max-height: 50vh; overflow-y: auto; }

  /* Page editor save-state flag */
  .page-flag { font-size: .74rem; color: var(--muted); }
  .page-flag--dirty { color: var(--warn); font-weight: 700; }