/* ============================================================
   Design options ("skins"). The default look is "Training log"
   (style.css). Each skin below swaps the tokens and fonts, and
   reshapes navigation and a few components. Chosen on #/design.
   Token blocks also match plain [data-skin] elements so the
   preview cards on the design page can show each palette.
   ============================================================ */

/* ================= 1. CLASSROOM: left rail, class banner ================= */
:root[data-skin="classroom"], [data-skin="classroom"] {
  --paper: #ffffff; --surface: #ffffff; --surface-2: #f1f3f4; --wash: #f8f9fa;
  --ink: #202124; --ink-2: #3c4043; --muted: #5f6368; --line: #dadce0; --line-strong: #bdc1c6;
  --accent: #137333; --accent-soft: #e6f4ea; --focus: #1a73e8;
  --banner: #137333;
  --font-display: "Roboto", "Segoe UI", Arial, sans-serif; --font-body: "Roboto", "Segoe UI", Arial, sans-serif;
  --r: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin="classroom"], :root:not([data-theme="light"]) [data-skin="classroom"] {
    --paper: #202124; --surface: #292a2d; --surface-2: #303134; --wash: #26272a;
    --ink: #e8eaed; --ink-2: #c4c7c5; --muted: #9aa0a6; --line: #3c4043; --line-strong: #5f6368;
    --accent: #81c995; --accent-soft: #1e3a29; --focus: #8ab4f8; --banner: #1e4d2b;
  }
}
:root[data-theme="dark"][data-skin="classroom"], :root[data-theme="dark"] [data-skin="classroom"] {
  --paper: #202124; --surface: #292a2d; --surface-2: #303134; --wash: #26272a;
  --ink: #e8eaed; --ink-2: #c4c7c5; --muted: #9aa0a6; --line: #3c4043; --line-strong: #5f6368;
  --accent: #81c995; --accent-soft: #1e3a29; --focus: #8ab4f8; --banner: #1e4d2b;
}
:root[data-skin="classroom"] h1, :root[data-skin="classroom"] h2, :root[data-skin="classroom"] h3 { font-weight: 500; letter-spacing: 0; }
:root[data-skin="classroom"] .slide.title-slide h1 { font-weight: 400; font-size: 2.8rem; line-height: 1.1; }
:root[data-skin="classroom"] .nav-ic { display: block; }
:root[data-skin="classroom"] .btn { border-radius: 20px; border-width: 1px; border-color: var(--line-strong); font-weight: 500; letter-spacing: .02em; }
:root[data-skin="classroom"] .btn.primary, :root[data-skin="classroom"] .btn.sel { background: var(--accent); border-color: var(--accent); color: var(--paper); }
:root[data-skin="classroom"] .topbar .btn.sel { background: var(--accent-soft); color: var(--ink); border-color: transparent; }
:root[data-skin="classroom"] .card { border-radius: 8px; }
:root[data-skin="classroom"] .callout { background: var(--surface-2); border-top: 0; border-radius: 8px; padding: 12px 16px; border-left: 0; }
:root[data-skin="classroom"] .callout > b:first-child { color: var(--accent); }
:root[data-skin="classroom"] .callout.try > b:first-child { color: var(--anaerobic); }
:root[data-skin="classroom"] .table thead th { text-transform: none; letter-spacing: 0; font-size: .78rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
:root[data-skin="classroom"] .eyebrow, :root[data-skin="classroom"] .slide-kicker { letter-spacing: .06em; }
:root[data-skin="classroom"] .page-head {
  background: var(--banner); color: #fff; border: 0; border-radius: 10px; padding: 32px 28px 24px; min-height: 190px;
  background-image: radial-gradient(circle at 88% 20%, rgba(255,255,255,.16) 0 70px, transparent 71px), radial-gradient(circle at 75% 110%, rgba(255,255,255,.1) 0 120px, transparent 121px);
}
:root[data-skin="classroom"] .page-head .eyebrow, :root[data-skin="classroom"] .page-head p, :root[data-skin="classroom"] .page-head .muted, :root[data-skin="classroom"] .page-head .cal-legend { color: rgba(255,255,255,.88); }
:root[data-skin="classroom"] .page-head .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
:root[data-skin="classroom"] .page-head .btn.primary, :root[data-skin="classroom"] .page-head .btn.sel { background: #fff; color: #137333; border-color: #fff; }
:root[data-skin="classroom"] .page-head input { background: #fff; color: #202124; border-color: #fff; }
:root[data-skin="classroom"] .seg { border-color: rgba(255,255,255,.7); border-radius: 20px; }
:root[data-skin="classroom"] .seg .btn + .btn { border-left-color: rgba(255,255,255,.7); }
:root[data-skin="classroom"] .lesson-list, :root[data-skin="classroom"] .q-list, :root[data-skin="classroom"] .quiz { border-top: 1px solid var(--line); }
:root[data-skin="classroom"] .lesson-row .dp { color: var(--accent); font-weight: 500; font-size: 2rem; }
:root[data-skin="classroom"] .now-strip { border: 1px solid var(--line); border-radius: 8px; }
:root[data-skin="classroom"] .now-strip a.is-today { background: var(--accent); }
:root[data-skin="classroom"] .cw-topic > header { border-bottom: 1px solid var(--accent); }
:root[data-skin="classroom"] .cw-topic h2 { color: var(--accent); font-size: 1.5rem; }
:root[data-skin="classroom"] .cw-ic { background: var(--accent); color: var(--paper); border: 0; }
:root[data-skin="classroom"] .cw-item.done .cw-ic { background: var(--line-strong); }
:root[data-skin="classroom"] .cw-sub .now { background: var(--accent); }
:root[data-skin="classroom"] .cw-topics button { border-left: 0; border-radius: 0 20px 20px 0; }
:root[data-skin="classroom"] .cw-topics button.sel { background: var(--accent-soft); color: var(--ink); }
:root[data-skin="classroom"] .progress > i { background: var(--accent); }
:root[data-skin="classroom"] .criteria th, :root[data-skin="classroom"] .verb-box { border-color: var(--line-strong); }
@media (min-width: 900px) {
  :root[data-skin="classroom"] body { padding-left: 248px; }
  :root[data-skin="classroom"] body.fullscreen { padding-left: 0; }
  :root[data-skin="classroom"] .topbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 248px; height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 18px 0 14px; border-bottom: 0; border-right: 1px solid var(--line); gap: 12px;
  }
  :root[data-skin="classroom"] .brand { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 24px 14px; border-bottom: 1px solid var(--line); }
  :root[data-skin="classroom"] .brand strong { font-family: var(--font-body); text-transform: none; font-weight: 500; font-size: 20px; letter-spacing: 0; }
  :root[data-skin="classroom"] .topnav { flex-direction: column; align-items: stretch; height: auto; flex: 1; gap: 2px; }
  :root[data-skin="classroom"] .topnav a { height: 46px; padding: 0 24px; gap: 18px; border-bottom: 0; margin: 0 12px 0 0; border-radius: 0 24px 24px 0; font-family: var(--font-body); font-weight: 500; font-size: 15px; }
  :root[data-skin="classroom"] .topnav a.active { background: var(--accent-soft); color: var(--ink); }
  :root[data-skin="classroom"] .topnav a.active .nav-ic { color: var(--accent); }
  :root[data-skin="classroom"] .topnav .sep { width: auto; height: 1px; margin: 8px 0; }
  :root[data-skin="classroom"] .topnav .btn { margin: 0 16px; text-align: left; }
  :root[data-skin="classroom"] .topnav #modeBtn { margin-top: auto; }
  :root[data-skin="classroom"] .topnav .btn.icon { width: auto; height: 38px; padding: 0 16px; display: block; }
  :root[data-skin="classroom"] .deck { min-height: 100vh; }
}
@media (max-width: 899px) {
  :root[data-skin="classroom"] body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  :root[data-skin="classroom"] .topbar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); border-bottom: 0; border-top: 1px solid var(--line); }
  :root[data-skin="classroom"] .brand, :root[data-skin="classroom"] .topnav .sep, :root[data-skin="classroom"] #modeBtn, :root[data-skin="classroom"] #helpBtn { display: none; }
  :root[data-skin="classroom"] .topnav { width: 100%; justify-content: space-around; }
  :root[data-skin="classroom"] .topnav a, :root[data-skin="classroom"] .topnav a[data-nav="home"] { display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 11.5px; padding: 0 6px; border-bottom: 0; font-family: var(--font-body); }
  :root[data-skin="classroom"] .topnav a.active { color: var(--accent); }
  :root[data-skin="classroom"] .deck { min-height: calc(100vh - 64px); }
}

/* ================= 2. POOL DECK: navy bar, lane-rope stripe, condensed caps ================= */
:root[data-skin="pool"], [data-skin="pool"] {
  --paper: #f3f8fb; --surface: #ffffff; --surface-2: #e5eff5; --wash: #ecf4f8;
  --ink: #0b2545; --ink-2: #29435f; --muted: #587089; --line: #d2e1ea; --line-strong: #9fbacd;
  --accent: #0b2545; --accent-soft: #dceaf3; --focus: #0077b6;
  --bar: #0b2545; --bar-ink: #ffffff; --lane: #ffc93c;
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --r: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin="pool"], :root:not([data-theme="light"]) [data-skin="pool"] {
    --paper: #061a2e; --surface: #0b243f; --surface-2: #123050; --wash: #091f37;
    --ink: #e6f1f8; --ink-2: #bcd2e3; --muted: #88a4bc; --line: #1b3a5a; --line-strong: #2e5679;
    --accent: #e6f1f8; --accent-soft: #143456; --focus: #4cc0f5; --bar: #020f1d; --bar-ink: #e6f1f8;
  }
}
:root[data-theme="dark"][data-skin="pool"], :root[data-theme="dark"] [data-skin="pool"] {
  --paper: #061a2e; --surface: #0b243f; --surface-2: #123050; --wash: #091f37;
  --ink: #e6f1f8; --ink-2: #bcd2e3; --muted: #88a4bc; --line: #1b3a5a; --line-strong: #2e5679;
  --accent: #e6f1f8; --accent-soft: #143456; --focus: #4cc0f5; --bar: #020f1d; --bar-ink: #e6f1f8;
}
:root[data-skin="pool"] h1, :root[data-skin="pool"] h2, :root[data-skin="pool"] h3, :root[data-skin="pool"] .q-stem { text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
:root[data-skin="pool"] h1 { font-weight: 800; }
:root[data-skin="pool"] .slide.title-slide h1 { font-size: 3.6rem; line-height: .95; }
:root[data-skin="pool"] .q-stem { text-transform: none; }
:root[data-skin="pool"] .topbar { background: var(--bar); color: var(--bar-ink); border-bottom: 0; height: 60px; }
:root[data-skin="pool"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: repeating-linear-gradient(90deg, #d62828 0 18px, #ffffff 18px 24px, #0077b6 24px 42px, #ffffff 42px 48px, #ffc93c 48px 66px, #ffffff 66px 72px); }
:root[data-skin="pool"] .brand, :root[data-skin="pool"] .brand small, :root[data-skin="pool"] .topnav a, :root[data-skin="pool"] .topbar .btn { color: var(--bar-ink); }
:root[data-skin="pool"] .brand strong { font-size: 26px; letter-spacing: .03em; }
:root[data-skin="pool"] .brand small { opacity: .7; }
:root[data-skin="pool"] .topnav a { text-transform: uppercase; font-size: 16px; letter-spacing: .06em; opacity: .8; }
:root[data-skin="pool"] .topnav a.active { opacity: 1; border-bottom-color: var(--lane); }
:root[data-skin="pool"] .topbar .btn:hover { background: rgba(255,255,255,.12); }
:root[data-skin="pool"] .topbar .btn.sel { background: var(--lane); color: #0b2545; }
:root[data-skin="pool"] .topnav .sep { background: rgba(255,255,255,.25); }
:root[data-skin="pool"] .page, :root[data-skin="pool"] .slide-wrap { padding-top: 40px; }
:root[data-skin="pool"] .btn { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
:root[data-skin="pool"] .lesson-row .dp { background: var(--ink); color: var(--paper); width: 4.6rem; height: 4.6rem; display: grid; place-items: center; font-size: 2rem; }
:root[data-skin="pool"] .lesson-row h3 { font-size: 1.5rem; }
:root[data-skin="pool"] .page-head { border-bottom: 4px solid var(--ink); }
:root[data-skin="pool"] .callout { border-top-width: 3px; }
:root[data-skin="pool"] .callout > b:first-child { font-size: .8rem; }
:root[data-skin="pool"] .cw-ic { border-radius: 2px; background: var(--ink); color: var(--paper); border: 0; }
:root[data-skin="pool"] .cw-topic > header { border-bottom-width: 4px; }
:root[data-skin="pool"] .cw-topic h2 { font-size: 1.7rem; }
:root[data-skin="pool"] .cw-sub .now { background: var(--lane); color: #0b2545; }
:root[data-skin="pool"] .now-strip a.is-today { background: var(--ink); }
:root[data-skin="pool"] .stat, :root[data-skin="pool"] .dial .letter { font-weight: 800; }
:root[data-skin="pool"] .card.acc { border-top-color: var(--ink); }
@media (max-width: 720px) {
  :root[data-skin="pool"] body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  :root[data-skin="pool"] .topnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bar); justify-content: space-around; border-top: 4px solid var(--lane); }
  :root[data-skin="pool"] .topnav a, :root[data-skin="pool"] .topnav a[data-nav="home"] { display: flex; font-size: 14px; }
  :root[data-skin="pool"] #modeBtn, :root[data-skin="pool"] #helpBtn, :root[data-skin="pool"] .topnav .sep { display: none; }
  :root[data-skin="pool"] .brand small { display: none; }
}

/* ================= 3. EXAM PAPER: serif, centred masthead, page on a desk ================= */
:root[data-skin="exam"], [data-skin="exam"] {
  --paper: #ecebe7; --surface: #ffffff; --surface-2: #f3f2ee; --wash: #f7f6f3;
  --ink: #141414; --ink-2: #333333; --muted: #66645f; --line: #d9d7d0; --line-strong: #a9a69e;
  --accent: #141414; --accent-soft: #f1efe9; --focus: #0b5cad; --pen: #b3191f;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-label: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --r: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-skin="exam"], :root:not([data-theme="light"]) [data-skin="exam"] {
    --paper: #121212; --surface: #1c1c1b; --surface-2: #252524; --wash: #1f1f1e;
    --ink: #eceae4; --ink-2: #cfccc4; --muted: #9c998f; --line: #34332f; --line-strong: #57554f;
    --accent: #eceae4; --accent-soft: #262523; --focus: #6aa6ec; --pen: #ff6b6b;
  }
}
:root[data-theme="dark"][data-skin="exam"], :root[data-theme="dark"] [data-skin="exam"] {
  --paper: #121212; --surface: #1c1c1b; --surface-2: #252524; --wash: #1f1f1e;
  --ink: #eceae4; --ink-2: #cfccc4; --muted: #9c998f; --line: #34332f; --line-strong: #57554f;
  --accent: #eceae4; --accent-soft: #262523; --focus: #6aa6ec; --pen: #ff6b6b;
}
:root[data-skin="exam"] h1, :root[data-skin="exam"] h2, :root[data-skin="exam"] h3, :root[data-skin="exam"] h4 { font-weight: 700; letter-spacing: -0.01em; }
:root[data-skin="exam"] h1 { font-weight: 600; }
:root[data-skin="exam"] .slide.title-slide h1 { font-weight: 600; font-size: 2.9rem; line-height: 1.08; }
:root[data-skin="exam"] .eyebrow, :root[data-skin="exam"] .slide-kicker, :root[data-skin="exam"] .btn, :root[data-skin="exam"] .pill, :root[data-skin="exam"] .chip,
:root[data-skin="exam"] .table thead th, :root[data-skin="exam"] .criteria th, :root[data-skin="exam"] .callout > b:first-child, :root[data-skin="exam"] .deck-head,
:root[data-skin="exam"] .deck-head .crumb, :root[data-skin="exam"] .topnav a, :root[data-skin="exam"] .cw-dt, :root[data-skin="exam"] .cw-sub, :root[data-skin="exam"] .marks,
:root[data-skin="exam"] .now-strip .when, :root[data-skin="exam"] .cal-lesson .d, :root[data-skin="exam"] .cw-topics button span { font-family: var(--font-label); }
:root[data-skin="exam"] .topbar { flex-direction: column; height: auto; padding: 16px 20px 0; gap: 8px; border-bottom: 3px double var(--ink); background: var(--surface); position: sticky; }
:root[data-skin="exam"] .brand { flex-direction: column; align-items: center; gap: 0; }
:root[data-skin="exam"] .brand strong { font-family: var(--font-display); text-transform: none; font-weight: 600; font-size: 24px; letter-spacing: 0; font-style: italic; }
:root[data-skin="exam"] .brand small { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
:root[data-skin="exam"] .topnav { height: 40px; }
:root[data-skin="exam"] .topnav a { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
:root[data-skin="exam"] .topnav a.active { border-bottom-color: var(--pen); color: var(--ink); }
:root[data-skin="exam"] .page { background: var(--surface); border: 1px solid var(--line); margin-top: 28px; margin-bottom: 40px; padding-inline: 48px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.06); }
:root[data-skin="exam"] .deck { background: var(--paper); }
:root[data-skin="exam"] .slide-wrap { padding-block: 28px; }
:root[data-skin="exam"] .slide { background: var(--surface); border: 1px solid var(--line); padding: 32px 44px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
:root[data-skin="exam"] .btn { border-width: 1px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
:root[data-skin="exam"] .card { border-color: var(--line-strong); }
:root[data-skin="exam"] .card.aer, :root[data-skin="exam"] .card.ana, :root[data-skin="exam"] .card.mix, :root[data-skin="exam"] .card.acc { border-top-width: 1px; border-top-color: var(--line-strong); }
:root[data-skin="exam"] .callout { border-top: 1px solid var(--ink); }
:root[data-skin="exam"] .callout.try, :root[data-skin="exam"] .callout.try > b:first-child { border-top-color: var(--pen); color: inherit; }
:root[data-skin="exam"] .callout.try > b:first-child { color: var(--pen); }
:root[data-skin="exam"] .lesson-row .dp { font-weight: 600; font-size: 1.6rem; border: 1.5px solid var(--ink); width: 4.2rem; height: 3.2rem; display: grid; place-items: center; }
:root[data-skin="exam"] .q-row .mk { font-weight: 600; font-size: 1.6rem; }
:root[data-skin="exam"] .marks { color: var(--pen); }
:root[data-skin="exam"] mark { background: none; text-decoration: underline wavy var(--pen); text-underline-offset: 4px; }
:root[data-skin="exam"] .criteria td { border: 1px solid var(--line-strong); }
:root[data-skin="exam"] .criteria th { border: 1px solid var(--line-strong); border-bottom: 2px solid var(--ink); background: var(--surface-2); }
:root[data-skin="exam"] .criteria tbody tr.pick td.mk { box-shadow: inset 4px 0 0 var(--pen); color: var(--pen); }
:root[data-skin="exam"] .stimulus { background: var(--surface); border: 1.5px solid var(--ink); }
:root[data-skin="exam"] .cw-ic { border-radius: 0; }
:root[data-skin="exam"] .cw-sub .now { background: var(--pen); color: #fff; }
:root[data-skin="exam"] .page-head { border-bottom: 3px double var(--ink); }
:root[data-skin="exam"] .now-strip a.is-today { background: var(--ink); }
:root[data-skin="exam"] .stat { font-weight: 600; }
:root[data-skin="exam"] .deck-foot { background: var(--surface); }
@media (max-width: 720px) {
  :root[data-skin="exam"] .page { padding-inline: 16px; margin-top: 12px; border-left: 0; border-right: 0; }
  :root[data-skin="exam"] .slide { padding: 18px 16px; }
  :root[data-skin="exam"] .topnav { overflow-x: auto; max-width: 100%; }
  :root[data-skin="exam"] .topnav a[data-nav="home"], :root[data-skin="exam"] #modeBtn { display: flex; }
}

/* Default "Training log" tokens, so its preview card can show them under any skin */
[data-skin="log"] {
  --paper: #ffffff; --surface: #ffffff; --surface-2: #f2f4f6; --wash: #f7f8f9;
  --ink: #0e1216; --ink-2: #39414a; --muted: #646d77; --line: #e0e4e8; --line-strong: #b8c0c8;
  --accent: #0e1216; --focus: #2a78d6; --r: 6px;
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-skin="log"] { --paper: #0f1215; --surface: #161a1e; --surface-2: #1f2429; --wash: #13171a; --ink: #eef1f4; --ink-2: #c9d0d6; --muted: #96a0aa; --line: #2a3036; --line-strong: #47505a; --accent: #eef1f4; }
}
:root[data-theme="dark"] [data-skin="log"] { --paper: #0f1215; --surface: #161a1e; --surface-2: #1f2429; --wash: #13171a; --ink: #eef1f4; --ink-2: #c9d0d6; --muted: #96a0aa; --line: #2a3036; --line-strong: #47505a; --accent: #eef1f4; }

/* preview mock on the design page */
.skin-mock { background: var(--paper); color: var(--ink); font-family: var(--font-body); min-height: 250px; display: flex; flex-direction: column; }
.skin-mock .mk-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bar, var(--surface)); color: var(--bar-ink, var(--ink)); border-bottom: 2px solid var(--ink); font-size: 12px; }
.skin-mock .mk-bar b { font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; }
.skin-mock .mk-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.skin-mock .mk-banner { background: var(--banner, transparent); color: var(--bannerink, inherit); }
.skin-mock h4 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; color: var(--ink); }
.skin-mock .mk-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.skin-mock .mk-note { border-top: 2px solid var(--ink); padding-top: 6px; font-size: 13px; color: var(--ink-2); }
.skin-mock .mk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.skin-mock .mk-btn { font-family: var(--font-display); font-size: 13px; padding: 5px 12px; border-radius: var(--r); border: 1.5px solid var(--accent); color: var(--accent); }
.skin-mock .mk-btn.p { background: var(--accent); color: var(--paper); }
.skin-mock .mk-stat { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-left: auto; }
.skin-mock[data-skin="classroom"] .mk-bar { background: var(--banner); color: #fff; border-bottom: 0; min-height: 56px; align-items: flex-end; }
.skin-mock[data-skin="classroom"] .mk-btn { border-radius: 20px; }
.skin-mock[data-skin="pool"] .mk-bar { border-bottom: 5px solid var(--lane); text-transform: uppercase; }
.skin-mock[data-skin="pool"] h4 { text-transform: uppercase; }
.skin-mock[data-skin="exam"] .mk-bar { justify-content: center; flex-direction: column; border-bottom: 3px double var(--ink); background: var(--surface); }
.skin-mock[data-skin="exam"] .mk-bar b { font-style: italic; }
.skin-mock[data-skin="exam"] .mk-body { background: var(--surface); margin: 10px 14px 14px; border: 1px solid var(--line); }
.skin-mock[data-skin="exam"] .mk-note { border-top-color: var(--pen); }