/* Học Calisthenics — giao diện */
:root {
  --font: "Times New Roman", Times, "Liberation Serif", "Noto Serif", serif;
  --bg: #f6f3ea; --bg-2: #eef5ee; --surface: #ffffff; --surface-2: #fbfaf5; --surface-3: #f3f6f1;
  --ink: #1f2d2a; --ink-2: #364843; --muted: #5f6f69; --line: #e1e6dc; --line-2: #d3dbd0;
  --green: #2f7d5b; --green-ink: #1f6447; --green-soft: #ddefe3; --green-pastel: #a8d8b9;
  --blue: #2d6e96; --blue-soft: #e2eff8; --blue-pastel: #a9d2ec;
  --cream: #f4ecd8; --coral: #c85a40; --coral-soft: #fbe7e1; --amber: #9a6a1c; --amber-soft: #faefd6;
  --violet: #5f4fa0; --violet-soft: #ece8f7;
  --on-accent: #ffffff;
  --shadow-1: 0 1px 2px rgba(31, 45, 42, .05), 0 4px 14px rgba(31, 45, 42, .05);
  --shadow-2: 0 10px 34px rgba(31, 45, 42, .10);
  --radius: 18px; --radius-s: 12px;
  --fig-skin: #e6ae89; --fig-skin2: #cf9471; --fig-shirt: #4f9cc7; --fig-shirt2: #3b7ea5;
  --fig-short: #2f4a5b; --fig-short2: #243a48; --fig-shoe: #3b5468; --fig-shoe2: #2e4455;
  --fig-hair: #2a2522; --fig-eye: #2a2522;
  --eq: #7f949c; --post: #aab8bb; --wood: #dcc7a2; --woodline: #c8ae84; --wall: #dde5db; --floor: #c3d0c5;
  --mat: #cfe6d6; --area: #e9f2e9; --band: #e2876b; --strap: #a3b2b6; --fshadow: rgba(30, 60, 50, .08);
  --hl1: rgba(226, 98, 70, .78); --hl2: rgba(238, 166, 82, .62); --ghost: #6f9c8e;
  --fig-bg: linear-gradient(160deg, #f1f7f0 0%, #e6f1f7 100%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101715; --bg-2: #13201c; --surface: #17211e; --surface-2: #1b2723; --surface-3: #1f2c28;
    --ink: #e6eee9; --ink-2: #cbd8d2; --muted: #9aaea6; --line: #283631; --line-2: #33443e;
    --green: #7ccfa0; --green-ink: #9fe0bb; --green-soft: #1d3a2d; --green-pastel: #3f7d5c;
    --blue: #8cc3ea; --blue-soft: #1a2f3d; --blue-pastel: #3d6a87;
    --cream: #2a2a20; --coral: #f0947b; --coral-soft: #3a231d; --amber: #e5b866; --amber-soft: #352b17;
    --violet: #b6a8ee; --violet-soft: #2a2540; --on-accent: #0f1a16;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 12px 34px rgba(0, 0, 0, .4);
    --wall: #2a3732; --floor: #3b4b45; --mat: #233a30; --area: #1b2924; --wood: #8f7a58; --woodline: #a58d66;
    --eq: #93a8ae; --post: #5d6e70; --strap: #77878b; --fshadow: rgba(0, 0, 0, .25); --ghost: #7fb3a2;
    --fig-bg: linear-gradient(160deg, #18251f 0%, #172430 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101715; --bg-2: #13201c; --surface: #17211e; --surface-2: #1b2723; --surface-3: #1f2c28;
  --ink: #e6eee9; --ink-2: #cbd8d2; --muted: #9aaea6; --line: #283631; --line-2: #33443e;
  --green: #7ccfa0; --green-ink: #9fe0bb; --green-soft: #1d3a2d; --green-pastel: #3f7d5c;
  --blue: #8cc3ea; --blue-soft: #1a2f3d; --blue-pastel: #3d6a87;
  --cream: #2a2a20; --coral: #f0947b; --coral-soft: #3a231d; --amber: #e5b866; --amber-soft: #352b17;
  --violet: #b6a8ee; --violet-soft: #2a2540; --on-accent: #0f1a16;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 12px 34px rgba(0, 0, 0, .4);
  --wall: #2a3732; --floor: #3b4b45; --mat: #233a30; --area: #1b2924; --wood: #8f7a58; --woodline: #a58d66;
  --eq: #93a8ae; --post: #5d6e70; --strap: #77878b; --fshadow: rgba(0, 0, 0, .25); --ghost: #7fb3a2;
  --fig-bg: linear-gradient(160deg, #18251f 0%, #172430 100%);
  color-scheme: dark;
}

/* ---------- hình người ---------- */
.fig { display: block; width: 100%; height: 100%; }
.k-skin { stroke: var(--fig-skin); fill: var(--fig-skin); }
.k-skin2 { stroke: var(--fig-skin2); fill: var(--fig-skin2); }
.k-shirt { stroke: var(--fig-shirt); fill: var(--fig-shirt); }
.k-shirt2 { stroke: var(--fig-shirt2); fill: var(--fig-shirt2); }
.k-short { stroke: var(--fig-short); fill: var(--fig-short); }
.k-short2 { stroke: var(--fig-short2); fill: var(--fig-short2); }
.k-shoe { stroke: var(--fig-shoe); }
.k-shoe2 { stroke: var(--fig-shoe2); }
.k-torso { stroke-width: 2.5; stroke-linejoin: round; }
.k-headc { stroke: none; }
.k-hair { fill: var(--fig-hair); stroke: none; }
.k-eye { fill: var(--fig-eye); stroke: none; }
.k-mouth { stroke: var(--fig-eye); }
.k-shadow { fill: var(--fshadow); }
.k-floor { stroke: var(--floor); }
.k-wall { fill: var(--wall); }
.k-wood { fill: var(--wood); }
.k-woodline { stroke: var(--woodline); }
.k-mat { fill: var(--mat); }
.k-area { fill: var(--area); }
.k-eq, .k-pbar, .k-ring { stroke: var(--eq); }
.k-post { stroke: var(--post); }
.k-band { stroke: var(--band); }
.k-strap { stroke: var(--strap); }
.k-arrow { stroke: var(--green); }
.k-hl1 > * { fill: var(--hl1); stroke: var(--hl1); }
.k-hl2 > * { fill: var(--hl2); stroke: var(--hl2); }
.k-hl1, .k-hl2 { animation: hc-pulse 1.8s ease-in-out infinite; }
@keyframes hc-pulse { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
.k-ghost { opacity: .28; }
.k-ghost * { fill: var(--ghost) !important; stroke: var(--ghost) !important; }
.k-ghost .k-eye, .k-ghost .k-mouth { display: none; }