/* Jiayou — Hevy's structure, its own skin.
 *
 * Palette: warm off-white ground, rose accent, sage for "done", muted plum ink. Closer to
 * the soft Morandi-ish tones common in Chinese lifestyle apps than to the blue-on-black of
 * a barbell tracker. Dark mode follows the phone, since evening sessions are the norm.
 */

:root {
  --bg: #fcf8f6;
  --surface: #ffffff;
  --surface-2: #f6efec;
  --line: #ece0da;
  --ink: #2e2733;
  --ink-dim: #8b8291;
  --accent: #e0647f;         /* rose */
  --accent-ink: #ffffff;
  --accent-soft: #fdeaef;
  --good: #6fb49a;           /* sage */
  --good-soft: #e6f2ed;
  --warn: #d9913f;
  --figure-bg: #ffffff;
  --figure-ink: #3a3340;
  --figure-far: #b9aeb8;
  --figure-floor: #e7dcd7;
  --media-stage: #251b25;
  --media-stage-edge: #3b2a38;
  --journey-deep: #322238;
  --journey-mid: #65405d;
  --journey-glow: #f0a36f;
  --shadow: 0 1px 2px rgba(46,39,51,.05), 0 6px 18px rgba(46,39,51,.05);
  --radius: 16px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);


  /* Liquid-glass surfaces. Safari has no backdrop-filter: url(), so the SVG refraction
     Apple uses is unavailable — this is the achievable subset: heavy blur, boosted
     saturation, a translucent fill, and a specular highlight along the top edge. */
  --glass-fill: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.52));
  --glass-edge: rgba(255,255,255,.75);
  --glass-spec: rgba(255,255,255,.95);
  --glass-shadow: 0 10px 34px rgba(46,39,51,.16);
  --glass-blur: blur(30px) saturate(190%);

  color-scheme: light;
}

/* Theme resolves in three states: no data-theme follows the phone; data-theme="dark" or
   "light" is an explicit choice made in Settings and wins over the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --bg: #17131a;
      --surface: #221c26;
      --surface-2: #2c2431;
      --line: #392f3f;
      --ink: #f3edf2;
      --ink-dim: #a396a8;
      --accent: #ec7b93;
      --accent-ink: #2a1119;
      --accent-soft: #38222b;
      --good: #7cc0a8;
      --good-soft: #23342e;
      --warn: #e0a45c;
      /* Movement art stays on a light card even at night: line drawings need the contrast. */
      --figure-bg: #f4eff2;
      --figure-ink: #2e2733;
      --figure-far: #9c8fa0;
      --figure-floor: #d9cdd5;
      --media-stage: #120e14;
      --media-stage-edge: #352636;
      --journey-deep: #2b1d33;
      --journey-mid: #71445e;
      --journey-glow: #f1a871;
      --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.22);
      color-scheme: dark;
      --glass-fill: linear-gradient(rgba(255,255,255,.11), rgba(255,255,255,.05));
      --glass-edge: rgba(255,255,255,.16);
      --glass-spec: rgba(255,255,255,.30);
      --glass-shadow: 0 10px 34px rgba(0,0,0,.46);
      --glass-blur: blur(30px) saturate(180%);
  }
}

:root[data-theme="dark"] {
    --bg: #17131a;
    --surface: #221c26;
    --surface-2: #2c2431;
    --line: #392f3f;
    --ink: #f3edf2;
    --ink-dim: #a396a8;
    --accent: #ec7b93;
    --accent-ink: #2a1119;
    --accent-soft: #38222b;
    --good: #7cc0a8;
    --good-soft: #23342e;
    --warn: #e0a45c;
    /* Movement art stays on a light card even at night: line drawings need the contrast. */
    --figure-bg: #f4eff2;
    --figure-ink: #2e2733;
    --figure-far: #9c8fa0;
    --figure-floor: #d9cdd5;
    --media-stage: #120e14;
    --media-stage-edge: #352636;
    --journey-deep: #2b1d33;
    --journey-mid: #71445e;
    --journey-glow: #f1a871;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.22);
    color-scheme: dark;
    --glass-fill: linear-gradient(rgba(255,255,255,.11), rgba(255,255,255,.05));
    --glass-edge: rgba(255,255,255,.16);
    --glass-spec: rgba(255,255,255,.30);
    --glass-shadow: 0 10px 34px rgba(0,0,0,.46);
    --glass-blur: blur(30px) saturate(180%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
        "Hiragino Sans GB", system-ui, sans-serif;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}
html[lang^="zh"] body { line-height: 1.6; }

.app { min-height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ------------------------------------------------------------- layout --- */

.screen {
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 110px);
  max-width: 640px; width: 100%; margin: 0 auto;
  min-height: 100dvh;   /* Home and Profile are short; without this they sat in a void. */
}

.topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.topline h1 { font-size: 28px; margin: 0; letter-spacing: -0.03em; font-weight: 700; }
.topline .sub { color: var(--ink-dim); font-size: 13px; }
html[lang^="zh"] .topline h1,
html[lang^="zh"] .sectionhead,
html[lang^="zh"] .exname { letter-spacing: 0; font-weight: 720; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.muted { color: var(--ink-dim); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.sectionhead { font-size: 20px; font-weight: 700; margin: 22px 0 10px; letter-spacing: -0.02em; }

/* --------------------------------------------------------- journey UI --- */

.journey-card {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff8f5; border-radius: 22px; padding: 18px; margin: 2px 0 20px;
  background: linear-gradient(135deg, var(--journey-deep), var(--journey-mid));
  box-shadow: 0 14px 30px rgba(63, 37, 59, .2);
}
.journey-card::before {
  content: ""; position: absolute; z-index: -1; width: 170px; height: 170px; right: -74px; top: -86px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--journey-glow) 70%, transparent), transparent 68%);
}
.journey-orb { position: absolute; z-index: -1; left: 42%; bottom: -72px; width: 135px; height: 135px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.journey-top, .quest-row, .journey-stats { display: flex; align-items: center; }
.journey-top { justify-content: space-between; gap: 14px; }
.journey-kicker { font-size: 12px; letter-spacing: .1em; opacity: .72; text-transform: uppercase; }
html[lang^="zh"] .journey-kicker { letter-spacing: .06em; text-transform: none; }
.journey-rank { margin-top: 2px; font-size: 21px; font-weight: 740; letter-spacing: -.02em; }
.level-pill { flex: none; border-radius: 99px; padding: 7px 10px; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.quest-row { gap: 11px; margin-top: 19px; }
.quest-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 13px; color: var(--journey-deep); background: var(--journey-glow); font-size: 18px; box-shadow: 0 5px 12px rgba(0,0,0,.16); }
.journey-muted { color: rgba(255,248,245,.72); margin-top: 2px; }
.quest-track { height: 7px; overflow: hidden; margin: 13px 0 14px; border-radius: 99px; background: rgba(255,255,255,.18); }
.quest-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffcf84, var(--journey-glow)); transition: width .35s ease; }
.journey-stats { justify-content: space-between; gap: 12px; }
.journey-stats > div { display: grid; gap: 2px; }
.journey-stats > div:last-child { text-align: right; }
.journey-stats b { font-size: 13px; }
.journey-stats span { color: rgba(255,248,245,.64); font-size: 11px; }
.completion-reward {
  display: flex; align-items: center; gap: 11px; margin: 18px auto 0; padding: 12px 14px;
  max-width: 310px; border-radius: 16px; color: var(--ink); background: var(--accent-soft);
}
.completion-reward > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.completion-reward b { font-size: 14px; }

/* -------------------------------------------------------------- inputs -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 14px; padding: 15px 20px;
  font-weight: 620; font-size: 16px; width: 100%;
  transition: opacity .12s ease;
}
.btn:active { opacity: .75; }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.ghost { background: none; color: var(--ink-dim); }
.btn.slim { padding: 9px 14px; font-size: 15px; width: auto; border-radius: 20px; }

/* Back, settings and close. A filled circle at the 44px Apple minimum: the previous dim
   chevron was both hard to see and hard to hit. */
.iconbtn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  font-size: 20px; line-height: 1;
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--shadow);
}
.iconbtn:active { background: var(--line); }
.iconbtn.back { font-size: 26px; padding-bottom: 3px; }
.btn:disabled { opacity: .4; }

input[type="text"], input[type="password"], input[type="number"], textarea {
  width: 100%; background: var(--surface-2); border: none;
  border-radius: 12px; padding: 13px 14px;
  font-size: 16px; /* below 16px iOS zooms the viewport on focus */
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

label.field { display: block; margin-bottom: 12px; }
label.field .lbl { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }

/* ---------------------------------------------------------------- nav --- */

/* Full width rather than a centred pill: at three tabs the pill was too narrow for the
   Chinese labels, which wrapped 首页 onto two lines. Each tab now takes an equal third. */
/* Content dissolves into the bar instead of stopping short of it, which is what made the
   glass look like it was hanging on screens with little content. */
.tabbar-scrim {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
  height: calc(var(--safe-b) + 132px);
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 58%, transparent 100%);
  pointer-events: none;
}

.tabbar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--safe-b) + 10px); z-index: 40;
  display: flex; gap: 4px; padding: 6px;
  border-radius: 26px;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-shadow);
}
.tabbar button {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 6px; border-radius: 21px;
  font-size: 14px; color: var(--ink-dim); font-weight: 560;
  white-space: nowrap;   /* never let a two-character label break in half */
}
.tabbar button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.tabbar .glyph { font-size: 16px; line-height: 1; }

/* ------------------------------------------------------------- figure --- */

.figure { width: 100%; height: 100%; display: block; }
/* A hairline in the card colour separates overlapping limbs, so a leg in front of the
   torso still reads as a leg instead of merging into one silhouette. */
.fig-body { fill: var(--figure-ink); stroke: var(--figure-bg); stroke-width: 0.6; stroke-linejoin: round; }
.fig-far { fill: var(--figure-far); stroke: var(--figure-bg); stroke-width: 0.6; }
.fig-floor { stroke: var(--figure-floor); stroke-width: 2; stroke-linecap: round; }

/* Silhouette frames, tinted through a mask so the art follows the palette. */
.art { position: relative; width: 100%; height: 100%; }
.art-frame {
  position: absolute; inset: 0;
  background-color: var(--figure-ink);
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  opacity: 0;
  transition: opacity .1s linear;
}
.art-frame.on { opacity: 1; }
.art-media { width: 100%; height: 100%; object-fit: contain; display: block; }
.art-stream {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit;
  background: var(--media-stage);
}
.art-stream .art-media { object-fit: cover; }

.figure-box { background: var(--figure-bg); border-radius: var(--radius); aspect-ratio: 5 / 6; padding: 10px; }
.thumb {
  width: 46px; height: 46px; flex: none;
  background: var(--surface-2); border-radius: 14px; padding: 3px; overflow: hidden;
}
.thumb .fig-floor { display: none; }
.thumb .art-stream { background: var(--media-stage); }
.thumb .art-stream .art-media { object-fit: cover; }

/* ------------------------------------------------------------ avatars --- */

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 680; font-size: 16px;
}
.avatar.big { width: 76px; height: 76px; font-size: 30px; }

/* --------------------------------------------------------- workout UI --- */

.workout { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; }
.wk-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-t) + 10px) 14px 10px;
  border-bottom: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-spec);
  position: sticky; top: 0; z-index: 5;
}
.wk-body { flex: 1; overflow-y: auto; padding: 14px 16px calc(var(--safe-b) + 120px); -webkit-overflow-scrolling: touch; }
.elapsed { font-variant-numeric: tabular-nums; }

.card.about { border: 1px solid var(--accent-soft); }

.credit { font-size: 11px; text-align: center; margin: 4px 0 0; opacity: .45; }
.credit a { color: inherit; text-decoration: none; }
.card.about .iconbtn { box-shadow: none; }

.card.guided { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.blockhead { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); margin: 20px 0 8px; }
html[lang^="zh"] .blockhead { letter-spacing: .05em; }

.exblock { margin-bottom: 16px; }
.exhead { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.exname-sm { font-weight: 620; font-size: 16px; color: var(--accent); }
.exhead .info { color: var(--ink-dim); font-size: 15px; }
.exmenu {
  color: var(--ink-dim); font-size: 20px; line-height: 1;
  padding: 6px 10px; border-radius: 8px; flex: none;
}
.exmenu:active { background: var(--surface-2); }

.setrows { display: flex; flex-direction: column; gap: 6px; }
.setrow {
  display: grid; grid-template-columns: 34px 1fr 44px;
  align-items: center; gap: 10px;
  background: var(--surface); border-radius: 12px; padding: 11px 12px;
  box-shadow: var(--shadow);
}
.setrow.on { background: var(--good-soft); box-shadow: none; }
.setrow.collapsed { grid-template-columns: 1fr 44px; padding: 13px 14px; }
.setno { color: var(--ink-dim); font-weight: 620; font-variant-numeric: tabular-nums; }
.settarget { font-variant-numeric: tabular-nums; }
.check {
  width: 34px; height: 34px; border-radius: 10px; justify-self: end;
  background: var(--surface-2); color: #fff;
  border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.check[aria-checked="true"] { background: var(--good); border-color: var(--good); }

.restbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px);
  background: var(--accent); color: var(--accent-ink); border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; box-shadow: 0 6px 20px rgba(224,100,127,.3);
}
.restbar .n { font-variant-numeric: tabular-nums; font-size: 19px; }
.restbar .btn.ghost { color: var(--accent-ink); opacity: .85; }

/* --------------------------------------------------------- exercise sheet */

.sheet { position: fixed; inset: 0; z-index: 120; background: rgba(46,39,51,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-end; }
.sheet-panel {
  width: 100%; max-height: 92%;
  border-radius: 26px 26px 0 0; padding: 10px 18px calc(var(--safe-b) + 20px);
  overflow-y: auto;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-shadow);
}
/* The sheet floats over content, so its own surface needs to stay legible. */
.sheet-panel .figure-box { background: var(--figure-bg); }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 14px; }
.sheet-fig {
  height: auto; aspect-ratio: 16 / 10; padding: 0; margin-bottom: 18px;
  overflow: hidden; background: var(--media-stage); border: 1px solid var(--media-stage-edge);
  border-radius: 20px; box-shadow: 0 12px 28px rgba(35, 22, 34, .16);
}
.sheet-fig > .art,
.sheet-fig > .art-stream,
.sheet-fig > .figure { width: 100%; height: 100%; }
.sheet-fig > .art:not(.art-stream),
.sheet-fig > .figure { padding: 12px; }
.sheet-copy { padding: 0 2px; }
.exercise-eyebrow {
  margin-bottom: 5px; color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
html[lang^="zh"] .exercise-eyebrow { letter-spacing: .03em; text-transform: none; }
.sheet-source {
  display: inline-block; margin: 16px 0; color: var(--accent); font-size: 13px;
  font-weight: 650; text-decoration: none;
}
.sheet-source:active { opacity: .7; }
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.howto li { font-size: 15px; }

/* ------------------------------------------------------- guided player --- */

.player {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 12px) 18px calc(var(--safe-b) + 16px);
}
.player.resting { background: var(--good-soft); }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player-head .blockname { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.progressbar { height: 4px; background: var(--line); border-radius: 3px; margin: 12px 0 4px; }
.progressbar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.player-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; }
.player .figure-box { flex: 1; min-height: 0; aspect-ratio: auto; }
.exname { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.extarget { font-size: 15px; color: var(--ink-dim); margin: 2px 0 0; }
.cues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.cues li { font-size: 14px; color: var(--ink-dim); padding-left: 15px; position: relative; }
.cues li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); }
.bigcount { font-size: 74px; font-weight: 250; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: center; margin: 0; }
/* A count-up is information, not a deadline — it should not shout like the countdown. */
.bigcount.counting-up { color: var(--ink-dim); font-size: 56px; }

.restlabel { text-align: center; color: var(--good); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.player-foot { display: flex; gap: 10px; padding-top: 12px; }

.seg { display: flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 9px; border-radius: 10px; font-size: 15px; color: var(--ink-dim); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 640; }

/* ---------------------------------------------------------------- feed --- */

.post { background: var(--surface); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.post-title { font-size: 18px; font-weight: 680; margin: 0 0 10px; }
.post-stats { display: flex; gap: 30px; margin-bottom: 12px; }
.post-stats .k { font-size: 12px; color: var(--ink-dim); }
.post-stats .v { font-size: 16px; font-weight: 640; font-variant-numeric: tabular-nums; }
.post-ex { display: flex; align-items: center; gap: 11px; padding: 5px 0; }
.post-actions { display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.post-actions button { padding: 9px 12px; border-radius: 10px; color: var(--ink-dim); font-size: 14px; }
.post-actions button.liked { color: var(--accent); font-weight: 620; }
.comment { font-size: 14px; margin-top: 8px; padding: 9px 12px; background: var(--surface-2); border-radius: 12px; }
.comment b { font-weight: 620; }
.divider { border-top: 1px solid var(--line); margin: 12px 0; }

/* ------------------------------------------------------------- profile --- */

.stats3 { display: flex; gap: 26px; }
.stats3 .n { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats3 .k { font-size: 12px; color: var(--ink-dim); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--surface); border-radius: var(--radius);
  padding: 16px; display: flex; align-items: center; gap: 10px; font-weight: 600;
  box-shadow: var(--shadow); color: var(--ink);
}

.bars { display: flex; align-items: flex-end; gap: 7px; height: 120px; padding-top: 8px; }
.bars .b { flex: 1; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 3px; }
.bars .b.empty { background: var(--surface-2); }
.barlabels { display: flex; gap: 7px; margin-top: 6px; }
.barlabels span { flex: 1; text-align: center; font-size: 10px; color: var(--ink-dim); }

.listrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.listrow:last-child { border-bottom: none; }
.exercise-source { color: var(--accent); font-size: 12px; margin-top: 3px; font-weight: 620; }
html[lang^="zh"] .listrow { gap: 14px; padding: 14px 0; }

.toggle { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.toggle:last-child { border-bottom: none; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; transition: background .18s ease; flex: none; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------------------------------------------------------------- who --- */

.who { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 24px; gap: 12px; max-width: 460px; margin: 0 auto; }
.whocard {
  background: var(--surface); border-radius: var(--radius);
  padding: 18px; display: flex; align-items: center; gap: 14px;
  border: 2px solid transparent; box-shadow: var(--shadow); width: 100%;
  color: var(--ink); text-align: left;
}
.whocard[aria-pressed="true"] { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }