/*
 * se-gym.css
 *
 * Presentation rules live in CSS modules, not inline HTML style blocks.
 * Keep light mode, dark mode (html.dark-mode), and print behavior together
 * with the component/page rules they affect.
 */

/* Extracted from se-gym.html. */

    #se-gym-app {
      max-width: min(100%, 1720px);
      width: 100%;
      margin: 0 auto;
      padding: 12px 10px 20px;
      font-family: 'Inter', 'Helvetica Neue', sans-serif;
      box-sizing: border-box;
    }

    body.se-gym-page.se-gym-workout-active #se-gym-app {
      max-width: min(100%, 1900px);
    }

    body.se-gym-page.se-gym-workout-active {
      overflow-x: clip;
    }

    body.se-gym-page.se-gym-workout-active .intro-header {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      border: 0;
      box-shadow: none;
      white-space: nowrap;
    }

    body.se-gym-page.se-gym-workout-active #main-content {
      padding-top: 8px;
      padding-bottom: 12px;
    }

    #se-gym-app *,
    #se-gym-app *::before,
    #se-gym-app *::after {
      box-sizing: border-box;
    }

    #se-gym-app h1 {
      color: var(--color-primary, #2774AE);
      font-weight: 700;
      margin-top: 0;
    }

    #se-gym-app h2 {
      color: var(--color-primary, #2774AE);
      font-weight: 700;
      margin-top: var(--sp-2xl, 30px);
      margin-bottom: var(--sp-lg, 15px);
      border-bottom: 2px solid var(--color-divider, #e1e4e8);
      padding-bottom: var(--sp-sm, 8px);
    }

    #gym-entrance {
      --gym-ucla-blue: #1F6EBD;
      --gym-ucla-blue-dark: #002F52;
      --gym-ucla-blue-light: #7FB6F0;
      --gym-ucla-gold: #FFD100;
      --gym-ucla-gold-dark: #B38B00;
      --gym-ink: #17324d;
      --gym-paper: #f7fbff;
      --gym-soft-blue: #c9e6ff;
      --gym-soft-gold: #fff3b8;
      --gym-skin: #c77f54;
      --gym-skin-shadow: #965c3c;
      --gym-skin-light: #e7aa78;
      --gym-hair: #202936;
      --gym-hair-highlight: #4f769a;
      --gym-outline: #062a43;
      --gym-cape: #002F52;
      --gym-cape-shadow: #001F38;
      --gym-cape-stop-top: #3B8AD8;
      --gym-cape-stop-bottom: #001F38;
      --gym-svg-shadow: rgba(0, 47, 82, 0.22);
    }

    .gym-entrance-main {
      max-width: 760px;
      margin: 0 auto;
    }

    #gym-workout {
      max-width: 860px;
      margin: 0 auto;
    }

    body.se-gym-page.se-gym-workout-active #sidebar {
      display: none !important;
    }

    body.se-gym-page.se-gym-workout-active #sidebar-toggle {
      display: none !important;
    }

    .gym-entrance-visual {
      color: var(--gym-ucla-blue);
      overflow: visible;
      pointer-events: none;
      user-select: none;
    }

    .gym-entrance-visual-mobile {
      display: block;
      max-width: min(100%, 520px);
      margin: -8px auto 12px;
    }

    .gym-entrance-visual-left,
    .gym-entrance-visual-right {
      display: none;
    }

    .gym-topic-hero-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    .se-gym-hero-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
      opacity: 0;
      filter: drop-shadow(0 14px 24px rgba(0, 47, 82, 0.16));
    }
    .se-gym-hero-svg[data-hero-avatar-ready="true"] {
      opacity: 1;
    }

    html.dark-mode .post-content .se-gym-hero-svg,
    html.dark-mode #gym-entrance .se-gym-hero-svg,
    html.dark-mode #gym-workout .se-gym-hero-svg {
      filter:
        drop-shadow(0 0 2px rgba(139, 184, 232, 0.72))
        drop-shadow(0 0 7px rgba(31, 110, 189, 0.34))
        drop-shadow(0 16px 24px rgba(0, 0, 0, 0.52)) !important;
    }

    /* Body-type visual differences come from SVG body-shape geometry swaps + silhouette overlays;
       no whole-image distortion. We keep only a tiny height adjustment for petite/tall so they
       read as overall shorter/taller without warping the figure. */
    .se-gym-hero-svg[data-hero-body] { transform-box: view-box; transform-origin: 400px 320px; }
    .se-gym-hero-svg[data-hero-body="petite"]    { transform: scale(0.92, 0.92); }
    .se-gym-hero-svg[data-hero-body="petite-curved"] { transform: scale(0.94, 0.94); }
    .se-gym-hero-svg[data-hero-body="short-soft"] { transform: scale(0.94, 0.96); }
    .se-gym-hero-svg[data-hero-body="short-curved"] { transform: scale(0.95, 0.96); }
    .se-gym-hero-svg[data-hero-body="tall"]      { transform: scale(1, 1.07); }
    .se-gym-hero-svg[data-hero-body="tall-curved"] { transform: scale(1, 1.06); }
    .se-gym-hero-svg[data-hero-body="tall-soft"] { transform: scale(1, 1.06); }
    .se-gym-hero-svg[data-hero-body="lean"]      { transform: scale(0.97, 1.04); }
    .se-gym-hero-svg [data-hero-slot="head-shape"],
    .se-gym-hero-svg [data-hero-slot="face-clear"] {
      filter:
        drop-shadow(0 0 0.8px var(--hero-skin-highlight, rgba(255, 226, 185, 0.35)))
        drop-shadow(0 1px 1px var(--hero-feature-shadow, rgba(0, 47, 82, 0.18)));
    }
    .se-gym-hero-svg [data-hero-slot="hair"],
    .se-gym-hero-svg [data-hero-slot="hairline"],
    .se-gym-hero-svg [data-hero-slot="hair-root"] {
      filter:
        drop-shadow(0 0 1.2px var(--hero-hair-rim, rgba(255, 226, 185, 0.4)))
        drop-shadow(0 1px 1px var(--hero-hair-shadow, rgba(0, 47, 82, 0.22)));
    }
    .se-gym-hero-svg [data-hero-slot="eyebrow"],
    .se-gym-hero-svg [data-hero-slot="eye-shape"],
    .se-gym-hero-svg [data-hero-slot="nose-shape"],
    .se-gym-hero-svg [data-hero-slot="mouth-style"],
    .se-gym-hero-svg [data-hero-slot="face-feature"],
    .se-gym-hero-svg [data-hero-slot="facial-hair"],
    .se-gym-hero-svg [data-hero-slot="accessory"] {
      filter:
        drop-shadow(0 0 0.45px var(--hero-feature-rim, rgba(255, 226, 185, 0.45)))
        drop-shadow(0 0.8px 0.8px var(--hero-feature-shadow, rgba(0, 0, 0, 0.2)));
    }
    .se-gym-hero-svg [data-hero-slot="head-shape"] path[fill*="--hero-face-line"],
    .se-gym-hero-svg [data-hero-slot="head-features"] path[stroke*="--hero-face-line"] {
      opacity: var(--hero-contour-opacity, .18);
    }
    .se-gym-hero-svg [data-hero-slot="hair"] path[stroke*="--hero-hair-rim"],
    .se-gym-hero-svg [data-hero-slot="hairline"] path[stroke*="--hero-hair-rim"],
    .se-gym-hero-svg [data-hero-slot="hair-root"] path[stroke*="--hero-hair-rim"] {
      opacity: var(--hero-hair-detail-opacity, .5);
    }
    .se-gym-hero-svg [data-hero-slot="face-feature"] path[stroke*="--hero-face-line"],
    .se-gym-hero-svg [data-hero-slot="face-feature"] circle[fill*="--hero-face-line"] {
      opacity: var(--hero-subtle-line-opacity, .34);
    }

    /* ===== Hero customizer modal ===== */
    .hero-cust-modal[hidden] { display: none; }
    #customize-hero-btn[hidden] { display: none !important; }
    body.hero-cust-modal-open { overflow: hidden; }
    body.hero-cust-modal-open #gym-entrance [data-gym-hero-svg],
    body.hero-cust-modal-open #gym-entrance [data-gym-hero-svg] *,
    body.hero-cust-modal-open #gym-workout [data-gym-hero-svg],
    body.hero-cust-modal-open #gym-workout [data-gym-hero-svg] *,
    body.hero-cust-modal-open #gym-entrance .gym-topic-hero-svg,
    body.hero-cust-modal-open #gym-entrance .gym-topic-hero-svg *,
    body.hero-cust-modal-open #gym-workout .gym-topic-hero-svg,
    body.hero-cust-modal-open #gym-workout .gym-topic-hero-svg * {
      animation-play-state: paused !important;
    }
    .hero-cust-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .hero-cust-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
    }
    .hero-cust-box {
      position: relative;
      background: var(--color-bg, #ffffff);
      color: var(--color-text, #111111);
      border-radius: 12px;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
      max-width: 1500px;
      width: 100%;
      max-height: calc(100vh - 2rem);
      overflow: auto;
      padding: 1.5rem;
      border: 1px solid var(--color-border, #d0d4da);
      scroll-padding-top: var(--hero-cust-scroll-padding-top, 1rem);
    }
    html.dark-mode .hero-cust-box {
      background: #1d2230;
      color: #e9ecf2;
      border-color: #3a4250;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    }
    .hero-cust-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 40px;
      height: 40px;
      min-width: 40px;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      background: var(--color-bg, #ffffff);
      color: var(--color-text, #111111);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font: inherit;
      padding: 0;
    }
    .hero-cust-close:hover {
      background: rgba(31, 110, 189, 0.08);
    }
    html.dark-mode .hero-cust-close {
      background: #2a3142;
      color: #e9ecf2;
      border-color: #3a4250;
    }
    html.dark-mode .hero-cust-close:hover {
      background: #354060;
    }
    .hero-cust-title {
      margin: 0 3rem 0.5rem 0;
      font-size: 1.4em;
    }
    .hero-cust-desc {
      margin: 0 0 1rem 0;
      font-size: 0.95em;
      opacity: 0.85;
    }
    .hero-cust-layout {
      display: grid;
      grid-template-columns: minmax(360px, 640px) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }
    .hero-cust-preview-pane {
      position: sticky;
      top: 0;
      z-index: 2;
      align-self: start;
      background: var(--color-bg, #ffffff);
      padding-bottom: 0.75rem;
    }
    html.dark-mode .hero-cust-preview-pane {
      background: #1d2230;
    }
    .hero-cust-preview {
      background: linear-gradient(180deg, #eaf2fb 0%, #d0e4f7 100%);
      border-radius: 10px;
      padding: 0.75rem;
      border: 1px solid var(--color-border, #d0d4da);
    }
    html.dark-mode .hero-cust-preview {
      background: linear-gradient(180deg, #2a3344 0%, #1a2230 100%);
      border-color: #3a4250;
    }
    .hero-cust-preview .se-gym-hero-svg {
      width: 100%;
      max-height: min(72vh, 720px);
      filter: drop-shadow(0 6px 12px rgba(0, 47, 82, 0.18));
    }
    .hero-cust-history {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em;
      align-items: center;
      justify-content: center;
      margin-top: 0.65em;
    }
    .hero-cust-history .gym-btn {
      min-width: 6.8em;
      white-space: nowrap;
    }
    .hero-cust-history .gym-btn:disabled {
      cursor: not-allowed;
      opacity: 0.58;
      box-shadow: none;
    }
    @media (max-height: 680px) {
      .hero-cust-preview .se-gym-hero-svg { max-height: min(48vh, 380px); }
    }
    @media (max-width: 1080px) {
      #se-gym-app .hero-cust-tune-row {
        grid-template-columns: 1fr;
      }
      #se-gym-app .hero-cust-tune-reset {
        justify-self: start;
      }
    }
    @media (max-width: 720px) {
      .hero-cust-box {
        --hero-cust-scroll-padding-top: clamp(190px, 36vh, 286px);
        padding: 1rem;
      }
      .hero-cust-layout { grid-template-columns: 1fr; }
      .hero-cust-preview-pane {
        position: sticky;
        top: 0;
        z-index: 4;
        margin: 0 -0.25rem 0.75rem;
        padding: 0.35rem 0.25rem 0.55rem;
        border-bottom: 1px solid var(--color-border, #d0d4da);
      }
      html.dark-mode .hero-cust-preview-pane {
        border-bottom-color: #3a4250;
      }
      .hero-cust-preview {
        max-width: 260px;
        margin: 0 auto;
        padding: 0.35rem;
      }
      .hero-cust-history {
        margin-top: 0.45em;
      }
      .hero-cust-history .gym-btn {
        min-height: 40px;
      }
      .hero-cust-preview .se-gym-hero-svg { max-height: min(28vh, 220px); }
      .hero-cust-status {
        margin-top: 0.35rem;
        text-align: center;
      }
      .hero-cust-form input,
      .hero-cust-form select,
      .hero-cust-form button,
      .hero-cust-form textarea,
      .hero-cust-form fieldset {
        scroll-margin-top: var(--hero-cust-scroll-padding-top);
      }
      #se-gym-app .hero-cust-color-tools {
        margin-left: 0;
      }
      #se-gym-app .hero-cust-hsl-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
      }
      #se-gym-app .hero-cust-color-palette {
        grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
      }
      #se-gym-app .hero-cust-choice-picker {
        margin-left: 0;
      }
      #se-gym-app .hero-cust-tune-row {
        grid-template-columns: 1fr;
      }
      #se-gym-app .hero-cust-tune-controls {
        grid-template-columns: 1fr;
      }
      #se-gym-app .hero-cust-tune-stepper {
        grid-template-columns: max-content minmax(0, 1fr) minmax(3em, max-content) max-content;
      }
      #se-gym-app .hero-cust-tune-button {
        width: auto;
        height: 40px;
        min-width: 4.6em;
      }
      #se-gym-app .hero-cust-tune-value {
        min-height: 40px;
      }
      #se-gym-app .hero-cust-tune-reset {
        justify-self: start;
      }
    }
    @media (max-width: 720px) and (max-height: 680px) {
      .hero-cust-box { --hero-cust-scroll-padding-top: clamp(160px, 34vh, 230px); }
      .hero-cust-preview {
        max-width: 210px;
      }
      .hero-cust-preview .se-gym-hero-svg { max-height: min(24vh, 170px); }
    }
    .hero-cust-status {
      margin: 0.75rem 0 0 0;
      min-height: 1.2em;
      font-size: 0.95em;
    }
    .hero-cust-status-error { color: #b21f1f; font-weight: 600; }
    html.dark-mode .hero-cust-status-error { color: #ff8a8a; }
    .hero-cust-fieldset {
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      padding: 0.75rem 1rem 1rem 1rem;
      margin: 0 0 1rem 0;
    }
    html.dark-mode .hero-cust-fieldset { border-color: #3a4250; }
    .hero-cust-fieldset legend {
      padding: 0 0.4rem;
      font-weight: 600;
      font-size: 1em;
    }
    .hero-cust-control {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 0.4rem 0;
      flex-wrap: wrap;
    }
    .hero-cust-control-stacked {
      align-items: stretch;
    }
    .hero-cust-control label,
    .hero-cust-control-label {
      flex: 1 1 8em;
      min-width: 8em;
      font-size: inherit;
    }
    .hero-cust-control input[type="color"] {
      width: 64px;
      min-height: 38px;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font: inherit;
    }
    .hero-cust-color-tools {
      display: grid;
      gap: 0.5rem;
      flex: 1 1 100%;
      margin-left: calc(8em + 0.75rem);
      min-width: 0;
    }
    .hero-cust-color-value {
      justify-self: start;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 6px;
      padding: 0.18em 0.45em;
      color: #333b45;
      background: rgba(255, 255, 255, 0.72);
      font: inherit;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .hero-cust-color-entry {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      justify-self: start;
      max-width: 100%;
    }
    .hero-cust-color-entry label {
      color: #333b45;
      font: inherit;
      font-weight: 700;
      line-height: 1.25;
    }
    .hero-cust-color-palette {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
      gap: 0.35rem;
      width: 100%;
    }
    .hero-cust-color-swatch {
      position: relative;
      min-width: 34px;
      min-height: 34px;
      border: 2px solid #6f7b88;
      border-radius: 8px;
      cursor: pointer;
      padding: 0;
      background: var(--hero-cust-swatch, #ffffff);
      font: inherit;
    }
    .hero-cust-color-swatch:hover {
      border-color: #2774AE;
      box-shadow: 0 0 0 2px rgba(39, 116, 174, 0.18);
    }
    .hero-cust-color-swatch[aria-pressed="true"] {
      border-color: #003B5C;
      box-shadow: 0 0 0 3px rgba(39, 116, 174, 0.34);
    }
    .hero-cust-color-swatch[aria-pressed="true"]::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0.5em;
      height: 0.85em;
      border: solid #ffffff;
      border-width: 0 0.18em 0.18em 0;
      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.86));
      transform: translate(-50%, -58%) rotate(45deg);
    }
    .hero-cust-hsl-controls {
      display: grid;
      gap: 0.4rem;
      width: 100%;
    }
    .hero-cust-hsl-row {
      display: grid;
      grid-template-columns: minmax(7em, 10em) minmax(0, 1fr);
      gap: 0.65rem;
      align-items: center;
    }
    .hero-cust-hsl-row label {
      min-width: 0;
      color: #333b45;
      font-size: 0.95em;
      font-weight: 700;
    }
    .hero-cust-hsl-row output {
      display: block;
      margin-top: 0.12em;
      color: #333b45;
      font: inherit;
      font-weight: 600;
    }
    .hero-cust-hsl-row input[type="range"] {
      width: 100%;
      min-height: 38px;
      accent-color: var(--color-primary, #2774AE);
      --hero-cust-range-bg: linear-gradient(90deg, #000000, #ffffff);
      --hero-cust-range-border: rgba(31, 41, 55, 0.45);
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      font: inherit;
    }
    .hero-cust-hsl-row input[type="range"]::-webkit-slider-runnable-track {
      height: 1em;
      border: 1px solid var(--hero-cust-range-border);
      border-radius: 999px;
      background: var(--hero-cust-range-bg);
    }
    .hero-cust-hsl-row input[type="range"]::-moz-range-track {
      height: 1em;
      border: 1px solid var(--hero-cust-range-border);
      border-radius: 999px;
      background: var(--hero-cust-range-bg);
    }
    .hero-cust-hsl-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      margin-top: calc((1em - 24px) / 2);
      border: 2px solid #ffffff;
      border-radius: 50%;
      background: #1f2933;
      box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.85), 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    .hero-cust-hsl-row input[type="range"]::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      background: #1f2933;
      box-shadow: 0 0 0 1px rgba(31, 41, 55, 0.85), 0 1px 3px rgba(0, 0, 0, 0.35);
    }
    html.dark-mode .hero-cust-color-value {
      background: #252c3b;
      border-color: #3a4250;
      color: #e9ecf2;
    }
    html.dark-mode .hero-cust-color-entry label,
    html.dark-mode .hero-cust-hsl-row label,
    html.dark-mode .hero-cust-hsl-row output {
      color: #e9ecf2;
    }
    html.dark-mode .hero-cust-color-swatch {
      border-color: #8d98a5;
    }
    html.dark-mode .hero-cust-color-swatch:hover {
      border-color: #8BB8E8;
      box-shadow: 0 0 0 2px rgba(139, 184, 232, 0.24);
    }
    html.dark-mode .hero-cust-color-swatch[aria-pressed="true"] {
      border-color: #d7ecff;
      box-shadow: 0 0 0 3px rgba(139, 184, 232, 0.38);
    }
    html.dark-mode .hero-cust-hsl-row input[type="range"] {
      --hero-cust-range-border: rgba(230, 244, 255, 0.58);
    }
    html.dark-mode .hero-cust-hsl-row input[type="range"]::-webkit-slider-thumb {
      border-color: #f2f7ff;
      background: #111827;
      box-shadow: 0 0 0 1px rgba(230, 244, 255, 0.86), 0 1px 4px rgba(0, 0, 0, 0.7);
    }
    html.dark-mode .hero-cust-hsl-row input[type="range"]::-moz-range-thumb {
      border-color: #f2f7ff;
      background: #111827;
      box-shadow: 0 0 0 1px rgba(230, 244, 255, 0.86), 0 1px 4px rgba(0, 0, 0, 0.7);
    }
    .hero-cust-control select,
    .hero-cust-control input[type="text"] {
      min-height: 38px;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      padding: 0.3em 0.6em;
      background: var(--color-bg, #ffffff);
      color: var(--color-text, #111111);
      font: inherit;
      flex: 1 1 10em;
      min-width: 10em;
    }
    html.dark-mode .hero-cust-control select,
    html.dark-mode .hero-cust-control input[type="text"] {
      background: #2a3142;
      color: #e9ecf2;
      border-color: #3a4250;
    }
    .hero-cust-control input.hero-cust-color-value[type="text"] {
      flex: initial;
      width: 8.8em;
      min-width: 8.8em;
      max-width: 100%;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .hero-cust-choice-picker {
      flex: 1 1 100%;
      display: grid;
      gap: 0.75em;
      margin-left: calc(8em + 0.75em);
      min-width: 0;
    }
    .hero-cust-choice-section {
      display: grid;
      gap: 0.45em;
      min-width: 0;
    }
    .hero-cust-choice-section-title,
    .hero-cust-checkbox-heading {
      margin: 0;
      color: #17324d;
      font: inherit;
      font-weight: 700;
      line-height: 1.25;
    }
    .hero-cust-choice-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr));
      gap: 0.55em;
      min-width: 0;
    }
    .hero-cust-choice-button {
      position: relative;
      display: grid;
      grid-template-rows: 82px auto;
      gap: 0.35em;
      min-height: 118px;
      min-width: 0;
      padding: 0.45em;
      border: 2px solid #7d8a98;
      border-radius: 8px;
      background: #ffffff;
      color: #1f2933;
      cursor: pointer;
      font: inherit;
      line-height: 1.2;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 59, 92, 0.08);
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .hero-cust-choice-button:hover {
      border-color: #2774AE;
      background: #f4f9ff;
      box-shadow: 0 7px 14px rgba(0, 59, 92, 0.13);
      transform: translateY(-1px);
    }
    .hero-cust-choice-button[aria-pressed="true"] {
      border-color: #003B5C;
      background: #eaf4ff;
      box-shadow: inset 0 0 0 2px rgba(39, 116, 174, 0.34), 0 8px 16px rgba(0, 59, 92, 0.14);
    }
    .hero-cust-choice-preview {
      --hero-cust-choice-preview-bg-top: #eaf2fb;
      --hero-cust-choice-preview-bg-bottom: #d0e4f7;
      --hero-cust-choice-preview-border: #b5c3d1;
      position: relative;
      display: block;
      min-width: 0;
      height: 82px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--hero-cust-choice-preview-border);
      background: linear-gradient(
        180deg,
        var(--hero-cust-choice-preview-bg-top) 0%,
        var(--hero-cust-choice-preview-bg-bottom) 100%
      );
    }
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::before,
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::before {
      inset: 0;
      background:
        radial-gradient(circle at 50% 34%, rgba(39, 116, 174, 0.22) 0 18%, transparent 19%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(208, 228, 247, 0.82));
    }
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::after {
      left: 50%;
      top: 50%;
      width: 2.2em;
      height: 2.2em;
      border: 0.22em solid rgba(0, 59, 92, 0.38);
      border-top-color: rgba(39, 116, 174, 0.82);
      border-radius: 999px;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.68);
    }
    .hero-cust-choice-preview .se-gym-hero-svg,
    .hero-cust-choice-preview .se-gym-hero-choice-preview-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview .se-gym-hero-svg,
    .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview .se-gym-hero-choice-preview-img {
      visibility: hidden;
    }
    .hero-cust-choice-check {
      position: absolute;
      top: 0.35em;
      right: 0.35em;
      display: none;
      width: 1.45em;
      height: 1.45em;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #003B5C;
      color: #ffffff;
      font-weight: 800;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
      line-height: 1;
    }
    .hero-cust-choice-check::before {
      content: "";
      width: 0.46em;
      height: 0.78em;
      border: solid currentColor;
      border-width: 0 0.18em 0.18em 0;
      transform: rotate(45deg) translate(-0.04em, -0.08em);
    }
    .hero-cust-choice-button[aria-pressed="true"] .hero-cust-choice-check {
      display: inline-flex;
    }
    .hero-cust-choice-label {
      min-width: 0;
      overflow-wrap: anywhere;
      font: inherit;
      font-weight: 600;
    }
    .hero-cust-tune-list {
      display: grid;
      gap: 0.7em;
    }
    .hero-cust-tune-row {
      display: grid;
      grid-template-columns: minmax(8em, 0.24fr) minmax(0, 1fr) auto;
      gap: 0.65em;
      align-items: center;
      padding: 0.65em;
      border: 1px solid #b7c5d3;
      border-radius: 8px;
      background: #f7fbff;
      color: #1f2933;
    }
    .hero-cust-tune-name {
      font: inherit;
      font-weight: 700;
      color: #17324d;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .hero-cust-tune-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
      gap: 0.55em;
      min-width: 0;
    }
    .hero-cust-tune-stepper {
      display: grid;
      grid-template-columns: max-content minmax(8em, 1fr) minmax(3em, max-content) max-content;
      gap: 0.25em;
      align-items: center;
      min-width: 0;
    }
    .hero-cust-tune-axis {
      grid-column: 1 / -1;
      font: inherit;
      font-size: 0.9em;
      font-weight: 700;
      color: #4b5563;
      line-height: 1.2;
    }
    .hero-cust-tune-range {
      min-width: 0;
      width: 100%;
      height: 34px;
      margin: 0;
      accent-color: #2774AE;
      cursor: pointer;
      font: inherit;
    }
    .hero-cust-tune-button {
      width: auto;
      height: 34px;
      min-width: 4.6em;
      border: 1px solid #7d8a98;
      border-radius: 8px;
      background: #ffffff;
      color: #17324d;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.55em;
      font: inherit;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }
    .hero-cust-tune-button:hover:not(:disabled) {
      border-color: #2774AE;
      background: #eaf4ff;
      color: #003B5C;
    }
    .hero-cust-tune-button:disabled {
      cursor: not-allowed;
      opacity: 0.52;
    }
    .hero-cust-tune-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.6em;
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid #a7b5c4;
      background: #ffffff;
      color: #1f2933;
      font: inherit;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .hero-cust-tune-reset {
      min-width: 5.4em;
      min-height: 34px;
      border: 1px solid #7d8a98;
      border-radius: 8px;
      background: #ffffff;
      color: #17324d;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      padding: 0.25em 0.65em;
      align-self: end;
      white-space: nowrap;
    }
    .hero-cust-tune-reset:hover {
      border-color: #2774AE;
      background: #eaf4ff;
      color: #003B5C;
    }
    .hero-cust-control input:focus,
    .hero-cust-control select:focus,
    .hero-cust-control button:focus,
    .hero-cust-close:focus,
    .hero-cust-quickbtn:focus,
    .hero-cust-history button:focus,
    .hero-cust-actions button:focus,
    .hero-cust-tune-button:focus,
    .hero-cust-tune-reset:focus,
    .hero-cust-radio-group input[type="radio"]:focus,
    .hero-cust-checkbox-group input[type="checkbox"]:focus {
      outline: 3px solid var(--focus-color, #2774AE);
      outline-offset: var(--focus-offset, 2px);
    }
    .hero-cust-radio-group,
    .hero-cust-checkbox-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
      gap: 0.5rem;
    }
    .hero-cust-checkbox-group {
      flex: 1 1 100%;
    }
    .hero-cust-checkbox-heading {
      grid-column: 1 / -1;
      margin-top: 0.2em;
    }
    .hero-cust-radio-group label,
    .hero-cust-checkbox-group label {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      min-height: 44px;
      font: inherit;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      padding: 0.42em 0.55em;
      background: rgba(255, 255, 255, 0.62);
      line-height: 1.25;
    }
    .hero-cust-radio-group label:hover,
    .hero-cust-checkbox-group label:hover {
      border-color: #2774AE;
      background: rgba(31, 110, 189, 0.08);
    }
    .hero-cust-radio-group label:has(input[type="radio"]:checked),
    .hero-cust-checkbox-group label:has(input[type="checkbox"]:checked) {
      border-color: #2774AE;
      background: rgba(39, 116, 174, 0.14);
      box-shadow: inset 0 0 0 1px rgba(39, 116, 174, 0.28);
    }
    .hero-cust-radio-group input[type="radio"],
    .hero-cust-checkbox-group input[type="checkbox"] {
      flex: 0 0 auto;
      width: 1.05em;
      height: 1.05em;
    }
    .hero-cust-checkbox-group label.hero-cust-accessory-choice {
      position: relative;
      display: grid;
      grid-template-rows: 82px auto;
      align-items: stretch;
      gap: 0.35em;
      min-height: 130px;
      min-width: 0;
      padding: 0.45em;
      border: 2px solid #7d8a98;
      border-radius: 8px;
      background: #ffffff;
      color: #1f2933;
      line-height: 1.2;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 59, 92, 0.08);
    }
    .hero-cust-checkbox-group label.hero-cust-accessory-choice:hover {
      border-color: #2774AE;
      background: #f4f9ff;
      box-shadow: 0 7px 14px rgba(0, 59, 92, 0.13);
    }
    .hero-cust-checkbox-group label.hero-cust-accessory-choice:has(input[type="checkbox"]:checked) {
      border-color: #003B5C;
      background: #eaf4ff;
      box-shadow: inset 0 0 0 2px rgba(39, 116, 174, 0.34), 0 8px 16px rgba(0, 59, 92, 0.14);
    }
    .hero-cust-checkbox-group label.hero-cust-accessory-choice:focus-within {
      outline: 3px solid var(--focus-color, #2774AE);
      outline-offset: var(--focus-offset, 2px);
    }
    .hero-cust-checkbox-group label.hero-cust-accessory-choice input[type="checkbox"] {
      position: absolute;
      top: 0.5em;
      left: 0.5em;
      z-index: 2;
      width: 24px;
      height: 24px;
      margin: 0;
      accent-color: #003B5C;
    }
    .hero-cust-accessory-label {
      min-width: 0;
      overflow-wrap: anywhere;
      font: inherit;
      font-weight: 600;
    }
    html.dark-mode .hero-cust-radio-group label,
    html.dark-mode .hero-cust-checkbox-group label {
      background: #252c3b;
      border-color: #3a4250;
    }
    html.dark-mode .hero-cust-choice-section-title,
    html.dark-mode .hero-cust-checkbox-heading {
      color: #e6f4ff;
    }
    html.dark-mode .hero-cust-choice-button {
      background: #252c3b;
      color: #e9ecf2;
      border-color: #596579;
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
    }
    html.dark-mode .hero-cust-choice-button:hover {
      border-color: #8BB8E8;
      background: #30394d;
      box-shadow: 0 7px 16px rgba(0, 0, 0, 0.44);
    }
    html.dark-mode .hero-cust-choice-button[aria-pressed="true"] {
      border-color: #d7ecff;
      background: #2f405d;
      box-shadow: inset 0 0 0 2px rgba(139, 184, 232, 0.38), 0 8px 16px rgba(0, 0, 0, 0.44);
    }
    html.dark-mode .hero-cust-choice-preview {
      --hero-cust-choice-preview-bg-top: #657a90;
      --hero-cust-choice-preview-bg-bottom: #5e7389;
      --hero-cust-choice-preview-border: #6b7f98;
    }
    html.dark-mode .hero-cust-choice-preview .se-gym-hero-svg,
    html.dark-mode .hero-cust-choice-preview .se-gym-hero-choice-preview-img {
      filter:
        drop-shadow(0 0.05em 0.05em rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 0.08em rgba(255, 255, 255, 0.2));
    }
    html.dark-mode .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::before {
      background:
        radial-gradient(circle at 50% 34%, rgba(139, 184, 232, 0.24) 0 18%, transparent 19%),
        linear-gradient(180deg, rgba(48, 57, 77, 0.86), rgba(26, 34, 48, 0.9));
    }
    html.dark-mode .hero-cust-choice-button[data-choice-pending="true"] .hero-cust-choice-preview::after {
      border-color: rgba(215, 236, 255, 0.32);
      border-top-color: rgba(139, 184, 232, 0.9);
      box-shadow: 0 0 0 0.12em rgba(6, 29, 49, 0.72);
    }
    html.dark-mode .hero-cust-choice-check {
      background: #d7ecff;
      color: #061d31;
      border-color: #1d2230;
    }
    html.dark-mode .hero-cust-tune-row {
      background: #252c3b;
      color: #e9ecf2;
      border-color: #4c596d;
    }
    html.dark-mode .hero-cust-tune-name {
      color: #e6f4ff;
    }
    html.dark-mode .hero-cust-tune-axis {
      color: #c7d0da;
    }
    html.dark-mode .hero-cust-tune-button,
    html.dark-mode .hero-cust-tune-reset,
    html.dark-mode .hero-cust-tune-value {
      background: #1d2230;
      color: #e9ecf2;
      border-color: #6b778c;
    }
    html.dark-mode .hero-cust-tune-range {
      accent-color: #8BB8E8;
    }
    html.dark-mode .hero-cust-tune-button:hover:not(:disabled),
    html.dark-mode .hero-cust-tune-reset:hover {
      border-color: #8BB8E8;
      background: #30394d;
      color: #f2f7ff;
    }
    html.dark-mode .hero-cust-radio-group label:hover,
    html.dark-mode .hero-cust-checkbox-group label:hover {
      border-color: #8BB8E8;
      background: #30394d;
    }
    html.dark-mode .hero-cust-radio-group label:has(input[type="radio"]:checked),
    html.dark-mode .hero-cust-checkbox-group label:has(input[type="checkbox"]:checked) {
      border-color: #8BB8E8;
      background: #2f405d;
      box-shadow: inset 0 0 0 1px rgba(139, 184, 232, 0.36);
    }
    html.dark-mode .hero-cust-checkbox-group label.hero-cust-accessory-choice {
      background: #252c3b;
      color: #e9ecf2;
      border-color: #596579;
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
    }
    html.dark-mode .hero-cust-checkbox-group label.hero-cust-accessory-choice:hover {
      border-color: #8BB8E8;
      background: #30394d;
      box-shadow: 0 7px 16px rgba(0, 0, 0, 0.44);
    }
    html.dark-mode .hero-cust-checkbox-group label.hero-cust-accessory-choice:has(input[type="checkbox"]:checked) {
      border-color: #d7ecff;
      background: #2f405d;
      box-shadow: inset 0 0 0 2px rgba(139, 184, 232, 0.38), 0 8px 16px rgba(0, 0, 0, 0.44);
    }
    html.dark-mode .hero-cust-checkbox-group label.hero-cust-accessory-choice input[type="checkbox"] {
      accent-color: #8BB8E8;
    }
    .hero-cust-emblem-row {
      display: flex;
      gap: 0.5rem;
      flex: 1 1 12em;
      flex-wrap: wrap;
    }
    .hero-cust-emblem-row input[type="text"] {
      flex: 1 1 6em;
      min-width: 6em;
      font-size: 1.2em;
    }
    .hero-cust-hint {
      font-size: 0.9em;
      color: #4f555c;
      margin: 0.3rem 0 0.3rem 0;
      flex-basis: 100%;
    }
    html.dark-mode .hero-cust-hint {
      color: #c7d0da;
    }
    .hero-cust-hint kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      background: #f6f8fa;
      border: 1px solid #8d98a5;
      border-radius: 4px;
      color: #1f2933;
      padding: 0.05em 0.35em;
      font-size: 0.92em;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    }
    html.dark-mode .hero-cust-hint kbd {
      background: #252c3b;
      border-color: #8d98a5;
      color: #f2f5f8;
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    }
    .hero-cust-quickpick {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      flex-basis: 100%;
    }
    .hero-cust-quickbtn {
      font-size: 1.3em;
      width: 40px;
      height: 40px;
      min-width: 40px;
      border: 1px solid var(--color-border, #d0d4da);
      border-radius: 8px;
      background: var(--color-bg, #ffffff);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .hero-cust-quickbtn:hover { background: rgba(31, 110, 189, 0.08); }
    html.dark-mode .hero-cust-quickbtn {
      background: #2a3142;
      border-color: #3a4250;
      color: #e9ecf2;
    }
    html.dark-mode .hero-cust-quickbtn:hover { background: #354060; }
    .hero-cust-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-top: 1rem;
    }
    .hero-cust-actions-top {
      margin: 0 3rem 1rem 0;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--color-border, #d0d4da);
    }
    html.dark-mode .hero-cust-actions-top {
      border-bottom-color: #3a4250;
    }
    .hero-cust-action-spacer {
      flex: 1 1 auto;
      min-width: 1rem;
    }
    .hero-cust-actions button {
      min-height: 38px;
    }
    #hero-customizer-section { margin-top: 1.5rem; }
    #customize-hero-disabled-note { font-size: 0.95em; color: #4f5b6b; opacity: 1; }
    html.dark-mode #customize-hero-disabled-note { color: #d7deea; }
    #customize-hero-btn:not([hidden]) ~ #customize-hero-disabled-note { display: none; }

    .gym-topic-hero-svg .gym-floor ellipse {
      fill: rgba(39, 116, 174, 0.13);
    }

    .gym-topic-hero-svg .backdrop-ray {
      display: none;
    }

    .gym-topic-hero-svg .backdrop-ring {
      display: none;
    }

    .gym-topic-hero-svg .backdrop-ring-soft {
      display: none;
    }

    .gym-topic-hero-svg .gym-motion-ghost rect,
    .gym-topic-hero-svg .gym-motion-ghost circle {
      display: none;
    }

    .gym-topic-hero-svg .gym-motion-ghost-top {
      display: none;
    }

    .gym-topic-hero-svg .gym-bar {
      fill: var(--gym-ink);
      filter: drop-shadow(0 3px 3px rgba(0, 47, 82, 0.28));
    }

    .gym-visual--male .gym-bar {
      fill: url(#gym-bar-metal-male);
    }

    .gym-visual--female .gym-bar {
      fill: url(#gym-bar-metal-female);
    }

    .gym-visual--mobile .gym-bar {
      fill: url(#gym-bar-metal-mobile);
    }

    .gym-topic-hero-svg .gym-bar-highlight {
      fill: rgba(255, 255, 255, 0.65);
    }

    html.dark-mode .gym-topic-hero-svg .gym-bar-highlight {
      fill: rgba(255, 255, 255, 0.42);
    }

    .gym-topic-hero-svg .gym-collar {
      fill: var(--gym-ucla-gold);
      stroke: var(--gym-ucla-gold-dark);
      stroke-width: 2;
    }

    .gym-topic-hero-svg .topic-plate circle {
      stroke: var(--gym-ink);
      stroke-width: 4;
    }

    .gym-topic-hero-svg .topic-plate {
      filter: none;
    }

    .gym-topic-hero-svg .topic-plate .plate-bevel {
      display: none;
    }

    .gym-topic-hero-svg .topic-plate path,
    .gym-topic-hero-svg .topic-plate rect,
    .gym-topic-hero-svg .topic-plate ellipse {
      fill: none;
      stroke: var(--gym-ink);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .topic-plate .plate-bevel,
    .gym-topic-hero-svg .topic-plate .plate-highlight {
      stroke-width: 3;
    }

    .gym-topic-hero-svg .topic-plate .plate-inner-ring {
      display: none;
    }

    .gym-topic-hero-svg .topic-plate .plate-highlight {
      stroke: rgba(255, 255, 255, 0.78);
      stroke-width: 3;
      opacity: 0.85;
    }

    .gym-topic-hero-svg .topic-plate-git circle:first-child,
    .gym-topic-hero-svg .topic-plate-uml circle:first-child {
      fill: var(--gym-soft-blue);
    }

    .gym-visual--male .topic-plate-git circle:first-child,
    .gym-visual--male .topic-plate-uml circle:first-child {
      fill: url(#gym-blue-plate-male);
    }

    .gym-visual--female .topic-plate-git circle:first-child,
    .gym-visual--female .topic-plate-uml circle:first-child {
      fill: url(#gym-blue-plate-female);
    }

    .gym-visual--mobile .topic-plate-git circle:first-child,
    .gym-visual--mobile .topic-plate-uml circle:first-child {
      fill: url(#gym-blue-plate-mobile);
    }

    .gym-topic-hero-svg .topic-plate-testing circle:first-child,
    .gym-topic-hero-svg .topic-plate-code circle:first-child {
      fill: var(--gym-soft-gold);
    }

    .gym-visual--male .topic-plate-testing circle:first-child,
    .gym-visual--male .topic-plate-code circle:first-child {
      fill: url(#gym-gold-male);
    }

    .gym-visual--female .topic-plate-testing circle:first-child,
    .gym-visual--female .topic-plate-code circle:first-child {
      fill: url(#gym-gold-female);
    }

    .gym-visual--mobile .topic-plate-testing circle:first-child,
    .gym-visual--mobile .topic-plate-code circle:first-child {
      fill: url(#gym-gold-mobile);
    }

    .gym-topic-hero-svg .topic-plate-agile circle:first-child,
    .gym-topic-hero-svg .topic-plate-data circle:first-child {
      fill: #dff4f2;
    }

    .gym-topic-hero-svg .topic-plate-git circle:not(:first-child):not(.plate-inner-ring) {
      fill: var(--gym-ucla-blue-dark);
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 1.4;
    }

    html.dark-mode .gym-topic-hero-svg .topic-plate-git circle:not(:first-child):not(.plate-inner-ring) {
      fill: var(--gym-ink);
      stroke: var(--gym-ink);
    }

    .gym-topic-hero-svg .skin {
      fill: none;
      stroke: var(--gym-skin);
      stroke-width: 17;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .arm-highlight {
      fill: none;
      stroke: rgba(255, 232, 191, 0.42);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .bicep {
      fill: var(--gym-skin);
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.6;
    }

    .gym-topic-hero-svg .bicep-shine {
      fill: rgba(255, 232, 191, 0.55);
      stroke: none;
    }

    html.dark-mode .gym-topic-hero-svg .bicep-shine {
      fill: rgba(255, 232, 191, 0.32);
    }

    .gym-topic-hero-svg .hand-grip {
      fill: var(--gym-skin);
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.8;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .hand-knuckles {
      fill: none;
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.3;
      stroke-linecap: round;
      opacity: 0.75;
    }

    .gym-topic-hero-svg .glove-cuff {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .hand,
    .gym-topic-hero-svg .ear,
    .gym-topic-hero-svg .skin-fill {
      fill: var(--gym-skin);
      stroke: var(--gym-skin-shadow);
      stroke-width: 2;
    }

    .gym-topic-hero-svg .face-front {
      stroke-width: 2.2;
    }

    .gym-topic-hero-svg .cheek {
      display: block;
      fill: #ff8a8a;
      stroke: none;
      opacity: 0.42;
    }

    html.dark-mode .gym-topic-hero-svg .cheek {
      fill: #ff9aa6;
      opacity: 0.36;
    }

    .gym-topic-hero-svg .chin {
      display: none;
    }

    .gym-topic-hero-svg .eye-sparkle {
      fill: #ffffff;
      stroke: none;
    }

    .gym-topic-hero-svg .suit {
      fill: var(--gym-ucla-blue);
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 4.5;
      stroke-linejoin: round;
      filter: drop-shadow(0 4px 5px rgba(0, 59, 92, 0.18));
    }

    .gym-visual--male .suit {
      fill: url(#gym-suit-male);
    }

    .gym-visual--female .suit {
      fill: url(#gym-suit-female);
    }

    .gym-visual--mobile .suit {
      fill: url(#gym-suit-mobile);
    }

    .gym-topic-hero-svg .suit-highlight {
      fill: rgba(139, 184, 232, 0.24);
      stroke: none;
    }

    .gym-topic-hero-svg .abdomen-panel {
      fill: var(--gym-ucla-blue);
      stroke: var(--gym-ucla-gold);
      stroke-width: 2.2;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .abdomen-line {
      fill: none;
      stroke: rgba(0, 59, 92, 0.58);
      stroke-width: 2;
      stroke-linecap: round;
      opacity: 0.72;
    }

    .gym-topic-hero-svg .hip-panel {
      fill: var(--gym-ucla-blue-dark);
      stroke: var(--gym-ucla-gold);
      stroke-width: 3;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .suit-side-panel {
      fill: rgba(0, 59, 92, 0.38);
      stroke: rgba(139, 184, 232, 0.28);
      stroke-width: 1.4;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .suit-gloss {
      fill: none;
      stroke: rgba(255, 255, 255, 0.28);
      stroke-width: 3;
      stroke-linecap: round;
      opacity: 0.82;
    }

    .gym-topic-hero-svg .shoulder-pad {
      fill: var(--gym-ucla-gold);
      stroke: var(--gym-outline);
      stroke-width: 2;
    }

    .gym-topic-hero-svg .shoulder-cape {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.92;
    }

    .gym-topic-hero-svg .chest-shield {
      fill: var(--gym-ucla-gold);
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 3;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .chest-bolt {
      fill: var(--gym-ucla-blue-dark);
      stroke: none;
    }

    .gym-topic-hero-svg .chest-mark {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .belt {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 8;
      stroke-linecap: round;
    }

    .gym-topic-hero-svg .belt-buckle {
      fill: var(--gym-ucla-blue-dark);
      stroke: var(--gym-ucla-gold);
      stroke-width: 2.4;
    }

    .gym-topic-hero-svg .cape {
      fill: var(--gym-cape);
      opacity: 0.95;
      filter: drop-shadow(0 8px 8px rgba(0, 59, 92, 0.16));
    }

    .gym-visual--male .cape {
      fill: url(#gym-cape-male);
    }

    .gym-visual--female .cape {
      fill: url(#gym-cape-female);
    }

    .gym-visual--mobile .cape {
      fill: url(#gym-cape-mobile);
    }

    .gym-topic-hero-svg .cape-right {
      fill: var(--gym-cape-shadow);
    }

    .gym-topic-hero-svg .cape-clasp {
      fill: var(--gym-ucla-gold);
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 2;
    }

    .gym-topic-hero-svg .cape-fold {
      fill: none;
      stroke: rgba(139, 184, 232, 0.32);
      stroke-width: 4;
      stroke-linecap: round;
      opacity: 0.7;
    }

    .gym-topic-hero-svg .hair {
      fill: var(--gym-hair);
    }

    .gym-topic-hero-svg .hair-shadow {
      fill: rgba(0, 59, 92, 0.38);
    }

    .gym-topic-hero-svg .hair-female {
      fill: var(--gym-hair);
    }

    .gym-topic-hero-svg .hair-front {
      filter: drop-shadow(0 2px 1px rgba(0, 59, 92, 0.2));
    }

    .gym-topic-hero-svg .hair-lock {
      fill: var(--gym-hair);
      stroke: var(--gym-hair-highlight);
      stroke-width: 1.4;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .hair-shine {
      fill: none;
      stroke: rgba(139, 184, 232, 0.7);
      stroke-width: 2;
      stroke-linecap: round;
      opacity: 0.72;
    }

    .gym-topic-hero-svg .neck {
      fill: var(--gym-skin-shadow);
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 1.5;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .brow {
      fill: none;
      stroke: var(--gym-ink);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.68;
    }

    .gym-topic-hero-svg .eye {
      fill: var(--gym-ink);
      stroke: none;
    }

    .gym-topic-hero-svg .eye-white {
      display: none;
    }

    .gym-topic-hero-svg .lash {
      fill: none;
      stroke: var(--gym-ink);
      stroke-width: 1.5;
      stroke-linecap: round;
      opacity: 0.72;
    }

    .gym-topic-hero-svg .nose {
      fill: none;
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.52;
    }

    .gym-topic-hero-svg .leg,
    .gym-topic-hero-svg .leg-thigh,
    .gym-topic-hero-svg .leg-shin {
      fill: none;
      stroke: var(--gym-ucla-blue-dark);
      stroke-width: 17;
      stroke-linecap: round;
    }

    .gym-topic-hero-svg .pectoral-line {
      fill: none;
      stroke: rgba(0, 47, 82, 0.42);
      stroke-width: 2.6;
      stroke-linecap: round;
      opacity: 0.55;
    }

    html.dark-mode .gym-topic-hero-svg .pectoral-line {
      stroke: rgba(255, 255, 255, 0.32);
    }

    .gym-topic-hero-svg .lat-flare {
      fill: none;
      stroke: rgba(0, 47, 82, 0.38);
      stroke-width: 2;
      stroke-linecap: round;
      opacity: 0.5;
    }

    html.dark-mode .gym-topic-hero-svg .lat-flare {
      stroke: rgba(255, 255, 255, 0.28);
    }

    .gym-topic-hero-svg .eye-white {
      display: block;
      fill: #ffffff;
      stroke: var(--gym-ink);
      stroke-width: 0.9;
    }

    html.dark-mode .gym-topic-hero-svg .eye-white {
      fill: #f5fbff;
      stroke: rgba(0, 0, 0, 0.4);
    }

    .gym-topic-hero-svg .eye {
      stroke: none;
    }

    .gym-topic-hero-svg .hero-mask {
      fill: var(--gym-ucla-blue-dark);
      stroke: var(--gym-ucla-gold);
      stroke-width: 1.4;
      stroke-linejoin: round;
      opacity: 0.95;
    }

    html.dark-mode .gym-topic-hero-svg .hero-mask {
      fill: #002F52;
      stroke: var(--gym-ucla-gold);
    }

    .gym-topic-hero-svg .mouth {
      fill: none;
      stroke: var(--gym-skin-shadow);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.92;
    }

    .gym-topic-hero-svg .brow {
      stroke-width: 2.2;
      opacity: 0.78;
    }

    .gym-topic-hero-svg .eye-lashes {
      fill: none;
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.4;
      stroke-linecap: round;
      opacity: 0.85;
    }

    .gym-topic-hero-svg .lipstick {
      fill: #d04a5e;
      stroke: none;
      opacity: 0.55;
    }

    html.dark-mode .gym-topic-hero-svg .lipstick {
      fill: #e85a72;
      opacity: 0.6;
    }

    .gym-topic-hero-svg .gym-spark {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 2.2;
      stroke-linecap: round;
      opacity: 0.85;
    }

    html.dark-mode .gym-topic-hero-svg .gym-spark {
      stroke: var(--gym-ucla-gold);
      opacity: 0.92;
    }

    .gym-topic-hero-svg .gym-spark-burst {
      transform-box: fill-box;
      transform-origin: center;
      animation: gym-sparkle 1800ms ease-in-out infinite both;
    }

    .gym-visual--mobile .gym-spark-burst {
      animation-delay: 120ms;
    }

    @keyframes gym-sparkle {
      0%, 30%, 70%, 100% {
        opacity: 0.4;
        transform: scale(0.85);
      }
      45%, 60% {
        opacity: 1;
        transform: scale(1.1);
      }
    }

    .gym-topic-hero-svg .face-detail {
      fill: none;
      stroke: var(--gym-skin-shadow);
      stroke-width: 1.7;
      stroke-linecap: round;
      opacity: 0.58;
    }

    .gym-topic-hero-svg .boot {
      fill: none;
      stroke: var(--gym-ucla-gold);
      stroke-width: 8;
      stroke-linecap: round;
    }

    .gym-topic-hero-svg .boot-fill {
      fill: var(--gym-ucla-gold);
      stroke: var(--gym-outline);
      stroke-width: 2.4;
      stroke-linejoin: round;
    }

    .gym-topic-hero-svg .boot-highlight {
      fill: none;
      stroke: rgba(255, 255, 255, 0.48);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .gym-topic-hero-svg .gym-motion-lines path {
      fill: none;
      stroke: var(--gym-ucla-gold-dark);
      stroke-width: 4;
      stroke-linecap: round;
      opacity: 0.72;
    }

    .gym-lift-group {
      transform-box: fill-box;
      transform-origin: center;
      animation: gym-topic-lift 1800ms linear infinite both;
    }

    .gym-lift-mobile {
      animation-delay: 120ms;
    }

    .gym-hero-body .cape,
    .gym-motion-lines,
    .gym-motion-ghost {
      transform-box: fill-box;
      transform-origin: 50% 0%;
    }

    .gym-hero-body .cape-main {
      animation: gym-cape-flow 1800ms ease-in-out infinite both;
    }

    .gym-hero-body .cape-trail-1 {
      animation: gym-cape-flow 1800ms ease-in-out infinite both;
      animation-delay: -120ms;
      opacity: 0.55;
    }

    .gym-hero-body .cape-trail-2 {
      animation: gym-cape-flow 1800ms ease-in-out infinite both;
      animation-delay: -240ms;
      opacity: 0.32;
    }

    .gym-visual--mobile .cape-main {
      animation-delay: 120ms;
    }

    .gym-visual--mobile .cape-trail-1 {
      animation-delay: 0ms;
    }

    .gym-topic-hero-svg .cape-trail {
      filter: blur(0.6px);
    }

    .bicep {
      transform-box: fill-box;
      transform-origin: center;
    }

    .bicep-left {
      animation: gym-bicep-flex-left 1800ms ease-in-out infinite both;
    }

    .bicep-right {
      animation: gym-bicep-flex-right 1800ms ease-in-out infinite both;
    }

    .gym-visual--female .bicep-left,
    .gym-visual--female .bicep-right {
      animation-delay: 260ms;
    }

    .gym-visual--mobile .bicep-left,
    .gym-visual--mobile .bicep-right {
      animation-delay: 120ms;
    }

    .leg-shin-pivot {
      transform-box: fill-box;
      transform-origin: 0 0;
    }

    .leg-shin-pivot-left {
      animation: gym-knee-bend-left 1800ms ease-in-out infinite both;
    }

    .leg-shin-pivot-right {
      animation: gym-knee-bend-right 1800ms ease-in-out infinite both;
    }

    .gym-visual--female .leg-shin-pivot-left,
    .gym-visual--female .leg-shin-pivot-right {
      animation-delay: 260ms;
    }

    .gym-motion-lines {
      animation: gym-lines-pulse 1800ms ease-in-out infinite both;
    }

    .gym-motion-ghost {
      animation: none;
    }

    .gym-backdrop {
      transform-box: fill-box;
      transform-origin: center;
      animation: gym-backdrop-breathe 3600ms ease-in-out infinite both;
    }

    .gym-visual--female .gym-motion-lines,
    .gym-visual--female .gym-motion-ghost,
    .gym-visual--female .gym-backdrop {
      animation-delay: 260ms;
    }

    .gym-visual--mobile .gym-motion-lines,
    .gym-visual--mobile .gym-motion-ghost,
    .gym-visual--mobile .gym-backdrop {
      animation-delay: 120ms;
    }

    @keyframes gym-topic-lift {
      0% {
        transform: translateY(8px) rotate(-0.5deg);
        animation-timing-function: cubic-bezier(.32, 0, .67, 0);
      }
      12% {
        transform: translateY(14px) rotate(-1deg);
        animation-timing-function: cubic-bezier(.55, 0, .1, 1);
      }
      50% {
        transform: translateY(-15px) rotate(0.6deg);
        animation-timing-function: cubic-bezier(.4, 0, .6, 1);
      }
      62% {
        transform: translateY(-12px) rotate(0.8deg);
        animation-timing-function: cubic-bezier(.55, 0, .35, 1);
      }
      78% {
        transform: translateY(10px) rotate(-0.3deg);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
      }
      88% {
        transform: translateY(11px) rotate(-0.6deg);
        animation-timing-function: cubic-bezier(.4, 0, .6, 1);
      }
      100% {
        transform: translateY(8px) rotate(-0.5deg);
      }
    }

    @keyframes gym-cape-flow {
      0% {
        transform: translateY(0) rotate(-1.5deg);
      }
      62% {
        transform: translateY(6px) rotate(2.5deg);
      }
      100% {
        transform: translateY(0) rotate(-1.5deg);
      }
    }

    @keyframes gym-bicep-flex-left {
      0%, 12% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(1, 1.32);
      }
      78%, 100% {
        transform: scale(1, 1);
      }
    }

    @keyframes gym-bicep-flex-right {
      0%, 12% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(1, 1.32);
      }
      78%, 100% {
        transform: scale(1, 1);
      }
    }

    .gym-visual--mobile .bicep-left,
    .gym-visual--mobile .bicep-right {
      animation-name: gym-bicep-flex-mobile;
    }

    @keyframes gym-bicep-flex-mobile {
      0%, 12% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(1, 1.18);
      }
      78%, 100% {
        transform: scale(1, 1);
      }
    }

    @keyframes gym-knee-bend-left {
      0% {
        transform: rotate(0deg);
      }
      12% {
        transform: rotate(-8deg);
      }
      50% {
        transform: rotate(2deg);
      }
      78%, 100% {
        transform: rotate(0deg);
      }
    }

    @keyframes gym-knee-bend-right {
      0% {
        transform: rotate(0deg);
      }
      12% {
        transform: rotate(8deg);
      }
      50% {
        transform: rotate(-2deg);
      }
      78%, 100% {
        transform: rotate(0deg);
      }
    }

    @keyframes gym-lines-pulse {
      0%, 100% {
        opacity: 0.42;
        transform: translateY(8px);
      }
      45%, 62% {
        opacity: 0.86;
        transform: translateY(-5px);
      }
    }

    @keyframes gym-ghost-pulse {
      0%, 100% {
        opacity: 0.64;
      }
      45%, 62% {
        opacity: 0.36;
      }
    }

    @keyframes gym-backdrop-breathe {
      0%, 100% {
        opacity: 0.74;
        transform: scale(0.98);
      }
      50% {
        opacity: 1;
        transform: scale(1.02);
      }
    }

    @media (min-width: 1180px) {
      #gym-entrance {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 760px) minmax(180px, 1fr);
        gap: clamp(6px, 0.75vw, 12px);
        align-items: start;
      }

      .gym-entrance-main {
        max-width: 760px;
        min-width: 0;
      }

      .gym-entrance-visual-mobile {
        display: none;
      }

      .gym-entrance-visual-left,
      .gym-entrance-visual-right {
        display: block;
        position: sticky;
        top: 92px;
        align-self: start;
        padding-top: 8px;
      }
    }

    /* Difficult Questions gym */
    .difficult-heading {
      color: #dc3545 !important;
      border-bottom-color: #dc3545 !important;
    }

    .difficult-gym-item {
      border-color: #dc3545 !important;
      background: #fff5f5 !important;
    }

    .difficult-gym-item:hover {
      border-color: #c82333 !important;
    }

    .difficult-gym-item.in-gym {
      border-color: #dc3545 !important;
      background: #ffe0e0 !important;
    }

    .difficult-badge {
      background: #dc3545 !important;
      color: white !important;
    }

    .difficult-add-btn.in-gym {
      background: #dc3545 !important;
      border-color: #dc3545 !important;
    }

    .difficult-stat {
      font-size: 0.9em;
      /* WCAG 1.4.3: parent .difficult-gym-item bg is #fff5f5; on hover/.in-gym
         it darkens to #ffe0e0. #dc3545 → 4.23:1 / 3.66:1 (FAIL).
         #a02832 → 5.92:1 on #fff5f5, 4.96:1 on #ffe0e0 (PASS). Dark-mode
         override at line ~566 already uses #ff6b6b → 6.75:1 on #121212. */
      color: #a02832;
      margin-left: 6px;
    }

    /* Toggle label */
    .toggle-label {
      font-weight: 600;
      color: #333;
      font-size: 0.95em;
    }

    html.dark-mode .toggle-label {
      color: #e0e0e0;
    }

    /* Info button & tooltip */
    .info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #2774AE;
      color: #fff;
      border: 2px solid #005587;
      padding: 0;
      font-size: 0.95em;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      user-select: none;
      margin-left: 4px;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0, 59, 92, 0.18);
    }

    .info-btn:hover,
    .info-btn:focus {
      background: #005587;
      outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
      outline-offset: var(--focus-offset, 2px);
    }

    .info-btn:focus:not(:focus-visible) {
      outline: none;
    }

    .info-btn:focus-visible {
      outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
      outline-offset: var(--focus-offset, 2px);
    }

    .info-tooltip {
      display: none;
      position: absolute;
      left: -20px;
      top: calc(100% + 8px);
      transform: none;
      background: #333;
      color: #fff;
      font-size: 1.2em;
      font-weight: 400;
      padding: var(--sp-sm, 8px) var(--sp-md, 12px);
      border-radius: var(--radius-md, 8px);
      width: 240px;
      max-width: 85vw;
      line-height: 1.4;
      z-index: 100;
      pointer-events: auto;
      box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.25));
    }

    .info-tooltip::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 24px;
      border: 6px solid transparent;
      border-bottom-color: #333;
    }

    .info-btn:hover + .info-tooltip,
    .info-btn:focus + .info-tooltip,
    .info-btn.active + .info-tooltip {
      display: block;
    }

    html.dark-mode .info-btn {
      background: #005587;
      border-color: #8BB8E8;
      color: #fff;
    }

    html.dark-mode .info-btn:hover,
    html.dark-mode .info-btn:focus {
      background: #144f7a;
    }

    /* Dark-mode focus color is provided by --focus-color via cascade. */

    /* Confirm Modal */
    .confirm-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 200;
    }

    .confirm-modal-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--color-surface, #fff);
      border-radius: var(--radius-lg, 12px);
      padding: var(--sp-xl, 24px) 28px;
      z-index: 201;
      box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.25));
      max-width: 360px;
      width: min(90vw, 360px);
      text-align: center;
    }

    .confirm-modal-box p {
      margin: 0 0 20px;
      font-size: 1em;
      font-weight: 600;
      color: #333;
      line-height: 1.5;
    }

    .confirm-modal-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    html.dark-mode .confirm-modal-box {
      background: #2a2a2a;
    }

    html.dark-mode .confirm-modal-box p {
      color: #e0e0e0;
    }

    html.dark-mode .difficult-heading {
      color: #ff6b6b !important;
      border-bottom-color: #ff6b6b !important;
    }

    html.dark-mode .difficult-section-header {
      border-bottom-color: #ff6b6b;
    }

    html.dark-mode .difficult-gym-item {
      background: #2d1a1a !important;
      border-color: #dc3545 !important;
    }

    html.dark-mode .difficult-gym-item.in-gym {
      background: #3d1a1a !important;
    }

    .gym-subtitle {
      color: #4b5563;
      margin: 0 0 12px;
      line-height: 1.55;
      font-weight: 600;
      text-wrap: pretty;
    }

    .gym-start-row {
      display: flex;
      justify-content: center;
      margin: 6px auto 10px;
    }

    .gym-controls-start-row {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }

    .gym-start-btn {
      width: min(100%, 320px);
      min-height: 52px;
      border: 2px solid #8BB8E8;
      font-weight: 800;
      font-size: 1.08em;
      text-transform: uppercase;
      letter-spacing: 0;
      box-shadow: 0 12px 26px rgba(39, 116, 174, 0.28), inset 0 -4px 0 rgba(0, 47, 82, 0.2);
    }

    .gym-topic-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 auto 18px;
      padding: 8px 10px;
      border: 1px solid rgba(39, 116, 174, 0.22);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 245, 252, 0.92));
      box-shadow: 0 10px 22px rgba(0, 59, 92, 0.1);
      width: fit-content;
      max-width: 100%;
    }

    .gym-topic-token {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid #17324d;
      color: #17324d;
      background: #ffffff;
      box-shadow: inset 0 -5px 0 rgba(0, 59, 92, 0.08), 0 4px 10px rgba(0, 59, 92, 0.13);
      flex: 0 0 auto;
    }

    .gym-topic-token::after {
      content: '';
      position: absolute;
      inset: 5px 7px auto 7px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.68);
      transform: rotate(-15deg);
    }

    .gym-topic-token i {
      position: relative;
      z-index: 1;
      font-size: 1.05em;
    }

    .gym-topic-token.topic-code,
    .gym-topic-token.topic-testing {
      background: linear-gradient(145deg, #fff7b0, #FFD100 62%, #B38B00);
    }

    .gym-topic-token.topic-design,
    .gym-topic-token.topic-data {
      background: linear-gradient(145deg, #ffffff, #dbeeff 58%, #8BB8E8);
    }

    .gym-topic-token.topic-process {
      background: linear-gradient(145deg, #ffffff 0 38%, #dbeeff 38% 72%, #8BB8E8 72% 100%);
    }

    .milestone-banner {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 18px;
      font-weight: 600;
      text-align: left;
      font-size: 1.05em;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      border: 1.5px solid #2774AE;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 247, 255, 0.98));
      box-shadow: 0 14px 30px rgba(0, 59, 92, 0.14);
    }

    .milestone-banner::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, #2774AE 0%, #2774AE 44%, #FFD100 44%, #FFD100 56%, #2774AE 56%, #2774AE 100%);
    }

    .milestone-banner::after {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      right: -80px;
      top: -90px;
      border-radius: 50%;
      background: rgba(255, 209, 0, 0.16);
      pointer-events: none;
    }

    .milestone-banner.milestone-bronze {
      color: #543400;
      border-color: #b8752b;
    }

    .milestone-banner.milestone-silver {
      color: #26323f;
      border-color: #7d8b9a;
    }

    .milestone-banner.milestone-gold {
      color: #3f3000;
      border-color: #b38b00;
    }

    .milestone-banner.milestone-diamond {
      color: #003B5C;
      border-color: #2774AE;
      box-shadow: 0 16px 34px rgba(39, 116, 174, 0.22);
    }

    .milestone-icon {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: linear-gradient(145deg, #fff7b0, #FFD100 62%, #B38B00);
      border: 2px solid #17324d;
      color: #17324d;
      box-shadow: inset 0 -5px 0 rgba(0, 59, 92, 0.12), 0 6px 14px rgba(0, 59, 92, 0.16);
      flex: 0 0 auto;
      font-size: 1.2em;
    }

    .milestone-text {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .milestone-text strong {
      color: #17324d;
      font-size: 1.08em;
      line-height: 1.25;
    }

    .milestone-text span {
      color: #4b5563;
      line-height: 1.35;
    }

    /* Controls */
    #gym-controls {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 249, 253, 0.99));
      border: 1.5px solid #2774AE;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 22px;
      box-shadow: 0 18px 38px rgba(0, 59, 92, 0.15);
    }

    #gym-controls::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, #2774AE 0%, #2774AE 44%, #FFD100 44%, #FFD100 56%, #2774AE 56%, #2774AE 100%);
    }

    .controls-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .toggle-copy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      position: relative;
      min-width: 0;
    }

    #gym-controls .toggle-row:not(.max-cards-row) {
      padding: 8px 10px;
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(237, 247, 255, 0.86));
      border: 1px solid #c7d9ea;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .toggle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #2774AE;
      color: #ffffff;
      box-shadow: inset 0 -3px 0 rgba(0, 59, 92, 0.22);
      flex: 0 0 auto;
    }

    .controls-row label {
      font-weight: 600;
      font-size: 1.1em;
      color: #333;
    }

    .controls-row input[type="number"] {
      width: 80px;
      min-height: 38px;
      padding: 6px 10px;
      border: 1.5px solid #767676;
      border-radius: 6px;
      font-size: 0.95em;
      font-weight: 600;
      color: #333;
      text-align: center;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .controls-row input[type="number"]:focus {
      border-color: #2774AE;
      box-shadow: 0 0 0 3px rgba(39, 116, 174, 0.15);
    }

    .timed-practice-toggle-row {
      justify-content: space-between;
      margin-top: 10px;
    }

    .toggle-row-balanced {
      justify-content: space-between;
    }

    .max-cards-row {
      justify-content: space-between;
      margin-top: 14px;
    }

    .max-cards-label {
      margin: 0;
      text-transform: uppercase;
    }

    .max-cards-controls {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      max-width: 120px;
    }

    .max-cards-controls input[type="number"] {
      width: 100%;
    }

    .gym-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 2px solid #e1e4e8;
      padding-bottom: 8px;
      margin-top: 30px;
      margin-bottom: 15px;
    }

    #gym-entrance h2 .section-heading-icon,
    .gym-section-header h2 .section-heading-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75em;
      height: 1.75em;
      margin-right: 0.35em;
      border-radius: 50%;
      background: #2774AE;
      color: #ffffff;
      font-size: 0.68em;
      vertical-align: middle;
      box-shadow: inset 0 -3px 0 rgba(0, 59, 92, 0.22);
    }

    .gym-section-header h2 {
      margin: 0;
      border-bottom: none !important;
      padding-bottom: 0 !important;
    }

    .difficult-section-header {
      border-bottom-color: #c0392b;
      margin-top: 0;
    }

    #tutorial-progress-section {
      border-top: 1px solid #e1e4e8;
      padding-top: 18px;
      margin-top: 30px;
    }

    .tutorial-progress-actions {
      gap: 10px;
      flex-wrap: wrap;
    }

    .timed-practice-panel {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid #9aa4b2;
      border-radius: 8px;
      background: #ffffff;
    }

    .timed-practice-panel[hidden],
    .timed-practice-field[hidden],
    .timed-practice-clock[hidden] {
      display: none !important;
    }

    .timed-practice-mode-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .timed-practice-mode-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      margin: 0;
      color: #333;
      font-size: 1.1em;
      font-weight: 600;
      line-height: 1.35;
    }

    .timed-practice-mode-option input {
      width: 1.35em;
      height: 1.35em;
      min-width: 24px;
      min-height: 24px;
      margin: 0;
      accent-color: var(--color-primary, #2774AE);
      flex-shrink: 0;
    }

    .timed-practice-fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .timed-practice-field label {
      display: block;
      margin-bottom: 6px;
      color: #333;
      font-weight: 600;
      font-size: 0.95em;
    }

    .timed-practice-field input[type="number"] {
      width: 100%;
      min-height: 38px;
      padding: 6px 10px;
      border: 1.5px solid #767676;
      border-radius: 6px;
      box-sizing: border-box;
      background: #fff;
      color: #333;
      font: inherit;
      font-weight: 600;
    }

    .timed-practice-field input[type="number"]:focus {
      border-color: #2774AE;
      box-shadow: 0 0 0 3px rgba(39, 116, 174, 0.15);
      outline: none;
    }

    .gym-summary-text {
      margin: 8px 0 0 0;
      font-size: 0.9em;
      color: #666;
    }

    .gym-summary-text.gym-status-error {
      color: #8a1f11;
      font-weight: 600;
    }

    /* Buttons */
    .gym-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: var(--sp-sm, 8px) var(--sp-lg, 18px);
      border: none;
      border-radius: var(--radius-md, 8px);
      font-weight: 600;
      font-size: 0.95em;
      line-height: 1.2;
      min-height: 38px;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }

    .gym-btn.primary {
      background: var(--color-primary, #2774AE);
      color: var(--color-text-on-primary, white);
      box-shadow: 0 7px 16px rgba(0, 59, 92, 0.16);
    }

    .gym-btn.danger {
      background: var(--color-error, #b81e2c);
      color: #fff;
    }

    .gym-btn.danger:hover:not(:disabled) {
      background: var(--color-error-hover, #94121e);
    }

    .gym-btn.primary:hover:not(:disabled) {
      background: var(--color-primary-hover, #1e5c8a);
    }

    .gym-start-btn:hover:not(:disabled) {
      box-shadow: 0 14px 30px rgba(39, 116, 174, 0.34), inset 0 -4px 0 rgba(0, 47, 82, 0.24);
    }

    .gym-btn.primary:disabled {
      background: #a1c2db;
      color: #17324d;
      cursor: not-allowed;
      box-shadow: none;
    }

    .gym-start-btn:disabled {
      border-color: #9db7cc;
      box-shadow: none;
    }

    .gym-btn.secondary {
      background: var(--color-divider, #e1e4e8);
      color: #333;
      border: 1px solid #c8d0d8;
    }

    .gym-btn.secondary:hover {
      background: #d1d5da;
    }

    /* Gym Items */
    .gym-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 14px 16px 18px;
      border: 1px solid #afc1d1;
      border-radius: 8px;
      margin-bottom: var(--sp-sm, 8px);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 254, 0.98));
      box-shadow: 0 9px 20px rgba(0, 59, 92, 0.09);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      overflow: hidden;
    }

    .gym-item::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 5px;
      background: #2774AE;
    }

    .gym-item[data-type="flashcard"]::before {
      background: #FFD100;
    }

    .gym-item[data-type="difficult"]::before {
      background: #b81e2c;
    }

    .gym-item:hover {
      border-color: var(--color-primary, #2774AE);
      box-shadow: 0 14px 26px rgba(0, 59, 92, 0.15);
      transform: translateY(-1px);
    }

    .gym-item.in-gym {
      border-color: #2774AE;
      background: linear-gradient(180deg, #f8fbff, #eef7ff);
    }

    .gym-item.in-gym::before {
      background: #FFD100;
    }

    .gym-item-info {
      flex: 1;
      min-width: 0;
    }

    .gym-item-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 0.95em;
      font-weight: 700;
      text-transform: uppercase;
      margin-right: var(--sp-sm, 8px);
      border: 1px solid transparent;
      line-height: 1.2;
    }

    .quiz-badge {
      background: var(--color-primary, #2774AE);
      color: var(--color-text-on-primary, white);
      border-color: #17324d;
    }

    .flashcard-badge {
      background: var(--color-accent, #FFD100);
      color: var(--color-text-on-accent, #333);
      border-color: #8a6a00;
    }

    .gym-item-title {
      font-size: 1em;
      color: #17324d;
      overflow-wrap: anywhere;
    }

    .gym-item-count {
      font-size: 0.9em;
      color: #555;
      margin-left: 4px;
    }

    .gym-item-desc {
      margin: 4px 0 0;
      font-size: 0.9em;
      color: #666;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .gym-add-btn {
      background: #ffffff;
      border: 2px solid var(--color-border-strong, #767676);
      border-radius: var(--radius-circle, 50%);
      width: 38px;
      height: 38px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #555;
      font-size: 16px;
      transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
      flex-shrink: 0;
      padding: 0;
      margin-left: 0;
      box-shadow: 0 3px 8px rgba(0, 59, 92, 0.1);
    }

    .gym-add-btn:hover {
      border-color: var(--color-primary, #2774AE);
      color: var(--color-primary, #2774AE);
      background: #eef7ff;
      box-shadow: 0 5px 12px rgba(39, 116, 174, 0.18);
    }

    .gym-add-btn.in-gym {
      background: var(--color-primary, #2774AE);
      border-color: var(--color-primary, #2774AE);
      color: var(--color-text-on-primary, white);
    }

    .gym-add-btn.in-gym:hover {
      background: #dc3545;
      border-color: #dc3545;
    }

    .empty-gym-msg {
      color: #4b5563;
      font-style: italic;
      padding: 18px;
      text-align: center;
      border: 1.5px dashed #9db7cc;
      border-radius: 8px;
      background: linear-gradient(180deg, #ffffff, #f4f9fd);
    }

    #available-quizzes,
    #available-flashcards,
    #gym-selected,
    #difficult-gym-container {
      display: grid;
      gap: 12px;
    }

    #gym-selected {
      margin-top: 12px;
    }

    #available-quizzes .gym-item,
    #available-flashcards .gym-item,
    #gym-selected .gym-item,
    #difficult-gym-container .gym-item {
      margin-bottom: 0;
    }

    /* Workout */
    #gym-workout {
      padding-top: 10px;
    }

    .workout-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      max-width: 860px;
      margin: 0 auto;
    }

    .timed-practice-clock {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border: 1px solid #2774AE;
      border-radius: 8px;
      background: linear-gradient(180deg, #f7fbff, #e6f3fb);
      color: #17324d;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 8px 18px rgba(0, 59, 92, 0.1);
    }

    .timed-practice-clock-label {
      font-weight: 700;
    }

    .timed-practice-clock-value {
      font-size: 1.2em;
      font-weight: 800;
      letter-spacing: 0;
    }

    .timed-practice-extend-btn {
      min-height: 32px;
      border: 1px solid #2774AE;
      border-radius: 6px;
      background: #ffffff;
      color: #17324d;
      cursor: pointer;
      font: inherit;
      font-weight: 600;
      padding: 4px 8px;
    }

    .timed-practice-extend-btn:hover {
      background: #d8ebf7;
    }

    .timed-practice-extend-btn:focus-visible {
      outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
      outline-offset: var(--focus-offset, 2px);
    }

    .timed-practice-clock.is-warning {
      background: #fff4d6;
      border-color: #8a5a00;
      color: #4b3500;
    }

    .timed-practice-clock.is-warning .timed-practice-extend-btn {
      border-color: #8a5a00;
      color: #4b3500;
    }

    .timed-practice-clock.is-expired {
      background: #fdecea;
      border-color: #b1281e;
      color: #69140f;
    }

    .timed-practice-clock.is-expired .timed-practice-extend-btn {
      border-color: #b1281e;
      color: #69140f;
    }

    .workout-progress-bar {
      height: 12px;
      background: #dbeeff;
      border: 1px solid #bfd4e5;
      border-radius: 999px;
      margin: 18px auto;
      max-width: 860px;
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0, 59, 92, 0.12);
    }

    .workout-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #2774AE 0 76%, #FFD100 76% 100%);
      transition: width 0.4s ease;
    }

    #workout-card-area {
      max-width: 860px;
      margin: 0 auto;
      min-width: 0;
    }

    .workout-stage {
      max-width: 860px;
      margin: 0 auto;
    }

    .workout-hero-visual {
      display: none;
      pointer-events: none;
      user-select: none;
      min-width: 0;
      width: 100%;
    }

    .workout-hero-visual .se-gym-hero-svg {
      max-height: min(84vh, 820px);
      width: 100%;
    }

    #gym-workout.workout-results-active .workout-stage {
      display: none;
    }

    @media (min-width: 1180px) {
      #gym-workout.workout-hero-enabled {
        max-width: min(100%, 1900px);
      }

      #gym-workout.workout-hero-enabled .workout-stage {
        display: grid;
        grid-template-columns: minmax(380px, 1fr) minmax(0, 560px) minmax(380px, 1fr);
        gap: clamp(10px, 1.5vw, 24px);
        align-items: start;
        max-width: min(100%, 1900px);
      }

      #gym-workout.workout-hero-enabled .workout-hero-visual {
        display: block;
        position: sticky;
        top: 76px;
        align-self: start;
        padding-top: 6px;
      }

      #gym-workout.workout-hero-enabled .workout-hero-visual-left {
        justify-self: end;
      }

      #gym-workout.workout-hero-enabled .workout-hero-visual-right {
        justify-self: start;
      }

      #gym-workout.workout-results-active.workout-hero-enabled .workout-stage {
        display: none;
      }
    }

    .workout-source-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.95em;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.2;
      margin: 0;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
    }

    /* Difficulty badge — same color tokens as the SEBook quiz/flashcards
       includes (kept in lockstep with `_includes/quiz.html`).
       Color-coded but always carries a text label so meaning never depends
       on color alone (WCAG 1.4.1). */
    .workout-quiz-card .quiz-difficulty,
    .workout-flashcard .quiz-difficulty {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.95em;
      font-weight: 700;
      line-height: 1.2;
      margin: 0;
      border: 1px solid transparent;
      vertical-align: middle;
    }
    .workout-quiz-card .quiz-difficulty-prefix,
    .workout-flashcard .quiz-difficulty-prefix {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0;
      opacity: 0.85;
    }
    .workout-quiz-card .quiz-difficulty.is-pre-answer,
    .workout-flashcard .quiz-difficulty.is-pre-answer {
      display: none;
    }
    .workout-quiz-card .quiz-difficulty-basic,
    .workout-flashcard .quiz-difficulty-basic {
      background: #e6f4ea; color: #14532d; border-color: #98c8a8;
    }
    .workout-quiz-card .quiz-difficulty-intermediate,
    .workout-flashcard .quiz-difficulty-intermediate {
      background: #e0ecf6; color: #173a5e; border-color: #97b8d6;
    }
    .workout-quiz-card .quiz-difficulty-advanced,
    .workout-flashcard .quiz-difficulty-advanced {
      background: #fdf0d8; color: #5a3500; border-color: #d6a35c;
    }
    .workout-quiz-card .quiz-difficulty-expert,
    .workout-flashcard .quiz-difficulty-expert {
      background: #fbe2e2; color: #5a0d10; border-color: #d29193;
    }
    html.dark-mode .workout-quiz-card .quiz-difficulty-basic,
    html.dark-mode .workout-flashcard .quiz-difficulty-basic {
      background: #1a3a2a; color: #b8f0c8; border-color: #2f6a4a;
    }
    html.dark-mode .workout-quiz-card .quiz-difficulty-intermediate,
    html.dark-mode .workout-flashcard .quiz-difficulty-intermediate {
      background: #15283f; color: #b8d6f3; border-color: #3d6a99;
    }
    html.dark-mode .workout-quiz-card .quiz-difficulty-advanced,
    html.dark-mode .workout-flashcard .quiz-difficulty-advanced {
      background: #3a2a08; color: #fbd99a; border-color: #886433;
    }
    html.dark-mode .workout-quiz-card .quiz-difficulty-expert,
    html.dark-mode .workout-flashcard .quiz-difficulty-expert {
      background: #3d1a1a; color: #ffc7c7; border-color: #8a3d3d;
    }

    /* Difficulty filter (workout selection) */
    .difficulty-filter {
      position: relative;
      margin-top: 14px;
      padding: 16px 14px 14px;
      border: 1.5px solid #9db7cc;
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.98));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .difficulty-filter legend {
      padding: 0 8px;
      font-weight: 700;
      font-size: 0.98em;
      color: #17324d;
      text-transform: uppercase;
      letter-spacing: 0;
      background: #ffffff;
      border-radius: 999px;
    }
    .difficulty-filter-help {
      margin: 2px 0 12px;
      font-size: 0.92em;
      color: #4b5563;
      line-height: 1.4;
    }
    .difficulty-filter-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
      gap: 10px;
    }
    .difficulty-filter-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      min-height: 42px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.95em;
      font-weight: 700;
      color: #333;
      border: 1px solid #c8d6e2;
      background: #ffffff;
      box-shadow: 0 4px 10px rgba(0, 59, 92, 0.07);
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .difficulty-filter-option:hover {
      border-color: #2774AE;
      box-shadow: 0 6px 14px rgba(0, 59, 92, 0.12);
    }
    .difficulty-filter-option:has(input:checked) {
      background: #eef7ff;
      border-color: #2774AE;
    }
    .difficulty-filter-option input[type="checkbox"] {
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      margin: 0;
      accent-color: var(--color-primary, #2774AE);
      flex-shrink: 0;
    }
    .difficulty-filter-option:focus-within {
      outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
      outline-offset: 2px;
    }
    .difficulty-filter-swatch {
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid currentColor;
      flex-shrink: 0;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    }
    .difficulty-filter-text {
      min-width: 0;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .difficulty-filter-basic .difficulty-filter-swatch { background: #B9D9EB; color: #173a5e; }
    .difficulty-filter-intermediate .difficulty-filter-swatch { background: #97b8d6; color: #173a5e; }
    .difficulty-filter-advanced .difficulty-filter-swatch { background: #d6a35c; color: #5a3500; }
    .difficulty-filter-expert .difficulty-filter-swatch { background: #d29193; color: #5a0d10; }
    html.dark-mode .difficulty-filter {
      background: linear-gradient(180deg, #202833, #171d25);
      border-color: #46566a;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    html.dark-mode .difficulty-filter legend {
      color: #e6f4ff;
      background: #202833;
    }
    html.dark-mode .difficulty-filter-help {
      color: #c8c8d8;
    }
    html.dark-mode .difficulty-filter-option {
      color: #e0e0e0;
      background: #111827;
      border-color: #46566a;
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32);
    }
    html.dark-mode .difficulty-filter-option:hover {
      border-color: #8BB8E8;
      box-shadow: 0 7px 16px rgba(0, 0, 0, 0.42);
    }
    html.dark-mode .difficulty-filter-option:has(input:checked) {
      background: #18314a;
      border-color: #8BB8E8;
    }
    html.dark-mode .difficulty-filter-basic .difficulty-filter-swatch { background: #8BB8E8; color: #061d31; }
    html.dark-mode .difficulty-filter-intermediate .difficulty-filter-swatch { background: #3d6a99; color: #b8d6f3; }
    html.dark-mode .difficulty-filter-advanced .difficulty-filter-swatch { background: #886433; color: #fbd99a; }
    html.dark-mode .difficulty-filter-expert .difficulty-filter-swatch { background: #8a3d3d; color: #ffc7c7; }

    /* Workout-results performance breakdown — overall row, then one row
       per difficulty bucket that had ≥1 card. Each row shows a small
       2-slice pie chart (correct / incorrect) and the textual stat so
       meaning never depends on color alone (WCAG 1.4.1). */
    .workout-breakdown {
      margin: var(--sp-xl, 24px) auto 0;
      padding: 14px 16px;
      max-width: 520px;
      text-align: left;
      border: 1px solid var(--color-divider, #e1e4e8);
      border-radius: var(--radius-md, 8px);
      background: var(--color-surface-2, #f8f9fa);
    }
    .workout-breakdown-heading {
      margin: 0 0 10px;
      font-size: 1.05em;
      color: var(--color-primary, #2774AE);
      font-weight: 700;
    }
    .workout-breakdown-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .workout-breakdown-row {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 6px 8px;
      border-radius: 6px;
    }
    .workout-breakdown-row.is-overall {
      font-weight: 700;
      background: rgba(39, 116, 174, 0.08);
    }
    .workout-breakdown-pie {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      /* Two-slice pie via conic-gradient: correct slice in level color,
         remainder in neutral grey for "incorrect or unanswered". */
      background: conic-gradient(var(--pie-correct, #1f7a3d) calc(var(--pie-pct, 0) * 1%),
                                 var(--pie-rest, #c8ccd1) 0);
      border: 1px solid var(--color-border, #c8ccd1);
      flex-shrink: 0;
    }
    /* Per-level pie color matches the difficulty chip text color so the
       pie reads as the same "tone" as the chip beside it. */
    .workout-breakdown-row.level-basic { --pie-correct: #1f7a3d; }
    .workout-breakdown-row.level-intermediate { --pie-correct: #2774AE; }
    .workout-breakdown-row.level-advanced { --pie-correct: #b85b00; }
    .workout-breakdown-row.level-expert { --pie-correct: #b81e2c; }
    .workout-breakdown-row.level-untagged { --pie-correct: #555; }
    .workout-breakdown-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.95em;
      color: var(--color-text, #1f2328);
    }
    .workout-breakdown-stat {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--color-text, #1f2328);
    }
    .workout-breakdown-row.is-empty .workout-breakdown-stat,
    .workout-breakdown-row.is-empty .workout-breakdown-label {
      color: #6a737d;
      font-weight: 500;
    }
    html.dark-mode .workout-breakdown {
      background: #252525;
      border-color: #444;
    }
    html.dark-mode .workout-breakdown-heading {
      color: #4da3ff;
    }
    html.dark-mode .workout-breakdown-row.is-overall {
      background: rgba(77, 163, 255, 0.12);
    }
    html.dark-mode .workout-breakdown-label,
    html.dark-mode .workout-breakdown-stat {
      color: #e0e0e0;
    }
    html.dark-mode .workout-breakdown-row.is-empty .workout-breakdown-stat,
    html.dark-mode .workout-breakdown-row.is-empty .workout-breakdown-label {
      color: #b0b0b0;
    }
    html.dark-mode .workout-breakdown-pie {
      border-color: #555;
      background: conic-gradient(var(--pie-correct, #4fa34f) calc(var(--pie-pct, 0) * 1%),
                                 var(--pie-rest, #555) 0);
    }
    html.dark-mode .workout-breakdown-row.level-basic { --pie-correct: #4fa34f; }
    html.dark-mode .workout-breakdown-row.level-intermediate { --pie-correct: #5fa8d3; }
    html.dark-mode .workout-breakdown-row.level-advanced { --pie-correct: #e0a35a; }
    html.dark-mode .workout-breakdown-row.level-expert { --pie-correct: #ff8585; }
    html.dark-mode .workout-breakdown-row.level-untagged { --pie-correct: #b0b0b0; }

    /* Workout Quiz Card */
    .workout-quiz-card {
      position: relative;
      background:
        radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.18) 0 88px, transparent 90px),
        linear-gradient(180deg, #ffffff, #f6faff);
      border: 1.5px solid #6fa4d4;
      border-radius: 8px;
      padding: 22px;
      margin: 18px 0;
      box-shadow: 0 18px 40px rgba(0, 59, 92, 0.16);
      animation: fadeIn 0.4s ease;
    }

    .workout-quiz-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 6px;
      border-radius: 8px 8px 0 0;
      background: linear-gradient(90deg, #2774AE 0 44%, #FFD100 44% 56%, #2774AE 56% 100%);
    }

    .workout-quiz-card > * {
      position: relative;
      z-index: 1;
    }

    .workout-quiz-card .quiz-card-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
    }

    .workout-quiz-card .question-text {
      font-size: 1.08em;
      font-weight: 600;
      margin: 0 0 16px;
      padding: 14px 16px;
      line-height: 1.35;
      color: #17324d;
      border: 1px solid #c8d6e2;
      border-left: 5px solid #2774AE;
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(238, 247, 255, 0.92), rgba(255, 255, 255, 0.72));
    }

    .workout-quiz-card .question-text p,
    .workout-quiz-card .option-content p,
    .workout-quiz-card .explanation-text p {
      margin: 0;
    }

    .workout-quiz-card .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .workout-quiz-card .quiz-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-height: 58px;
      padding: 12px 14px;
      border: 1.5px solid #9ab4cc;
      border-radius: 8px;
      background: linear-gradient(180deg, #ffffff, #fbfdff);
      text-align: left;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      cursor: pointer;
      font-size: 0.95em;
      line-height: 1.35;
      min-width: 0;
      width: 100%;
      box-shadow: 0 5px 14px rgba(0, 59, 92, 0.06);
    }

    .workout-quiz-card .quiz-option:hover:not([disabled]):not(.selected) {
      border-color: #2774AE;
      background: linear-gradient(180deg, #f7fbff, #eef7ff);
      box-shadow: 0 10px 24px rgba(0, 59, 92, 0.14);
      transform: translateY(-1px);
    }

    .workout-quiz-card .quiz-option.selected {
      border-color: #2774AE;
      background: linear-gradient(180deg, #eaf5ff, #f7fbff);
      box-shadow: 0 0 0 2px rgba(39, 116, 174, 0.18), 0 10px 24px rgba(0, 59, 92, 0.14);
    }

    .workout-quiz-card .quiz-option.correct {
      border-color: #1f7a35;
      background: linear-gradient(180deg, #edfff3, #e6ffed);
      color: #155724;
    }

    .workout-quiz-card .quiz-option.incorrect {
      border-color: #dc3545;
      background: linear-gradient(180deg, #fff7f8, #ffeef0);
      color: #721c24;
    }

    .workout-quiz-card .quiz-option.correct::after,
    .workout-quiz-card .quiz-option.incorrect::after {
      margin-left: auto;
      padding-left: 12px;
      font-weight: 800;
      font-size: 1.1em;
      line-height: 1;
    }

    .workout-quiz-card .quiz-option.correct::after { content: "✓"; }
    .workout-quiz-card .quiz-option.incorrect::after { content: "✗"; }

    /* Per-option clarification (hidden by default; revealed when wrongly answered) */
    .workout-quiz-card .option-feedback {
      margin: 2px 0 8px 50px;
      padding: 10px 12px;
      border-left: 3px solid #d97706;
      background: #fff7ed;
      border-radius: 8px;
      font-size: 0.92em;
      line-height: 1.35;
      color: #7c2d12;
    }
    .workout-quiz-card .option-feedback p { margin: 0; }
    .workout-quiz-card .option-feedback p + p { margin-top: 4px; }
    .workout-quiz-card .option-feedback code {
      background: rgba(217, 119, 6, 0.15);
      padding: 1px 4px;
      border-radius: 3px;
    }
    .workout-quiz-card .option-feedback.is-hidden { display: none; }
    html.dark-mode .workout-quiz-card .option-feedback {
      background: rgba(217, 119, 6, 0.12);
      color: #fed7aa;
      border-left-color: #ea8a14;
    }
    html.dark-mode .workout-quiz-card .option-feedback code {
      background: rgba(217, 119, 6, 0.25);
      color: #fde9c8;
    }

    .workout-quiz-card .option-checkbox {
      display: none;
      width: 20px;
      height: 20px;
      border: 2px solid #6b879d;
      border-radius: 5px;
      margin-top: 5px;
      flex-shrink: 0;
      transition: all 0.2s;
      background: white;
    }

    .workout-quiz-card[data-type="multiple"] .option-checkbox {
      display: block;
    }

    .workout-quiz-card .quiz-option.selected .option-checkbox {
      background: var(--color-primary, #2774AE);
      border-color: var(--color-primary, #2774AE);
    }

    .workout-quiz-card .quiz-option.selected .option-checkbox::after {
      content: '';
      display: block;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      margin: 1px 5px;
    }

    .workout-quiz-card .option-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(145deg, #f7fbff, #dbeeff);
      border: 1px solid #8BB8E8;
      font-weight: 800;
      color: #17324d;
      flex-shrink: 0;
      line-height: 1;
      box-shadow: inset 0 -3px 0 rgba(0, 59, 92, 0.08);
    }

    .workout-quiz-card .option-content {
      min-width: 0;
      overflow-wrap: anywhere;
      padding-top: 2px;
    }

    .workout-quiz-card .submit-answer-btn,
    .workout-quiz-card .next-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--color-primary, #2774AE);
      color: var(--color-text-on-primary, white);
      border: none;
      padding: 10px 18px;
      border-radius: var(--radius-md, 8px);
      font-weight: 700;
      margin-top: 14px;
      margin-left: auto;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
      width: auto;
      min-width: 170px;
      max-width: 100%;
      font-size: 0.95em;
      min-height: 42px;
      box-shadow: 0 7px 16px rgba(0, 59, 92, 0.18);
    }

    .workout-quiz-card .quiz-action-row {
      display: flex;
      justify-content: flex-end;
    }

    .workout-quiz-card .submit-answer-btn:disabled {
      background: #a1c2db;
      color: #17324d;
      cursor: not-allowed;
      box-shadow: none;
    }

    .workout-quiz-card .submit-answer-btn:hover:not(:disabled),
    .workout-quiz-card .next-btn:hover {
      background: var(--color-primary-hover, #1e5c8a);
      transform: translateY(-1px);
    }

    .workout-quiz-card .quiz-explanation {
      margin-top: 16px;
      padding: 14px 16px;
      background: linear-gradient(180deg, #f8fbff, #eef7ff);
      border: 1.5px solid #8BB8E8;
      border-left: 5px solid #2774AE;
      border-radius: 8px;
      font-size: 0.95em;
      line-height: 1.45;
      color: #17324d;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .workout-quiz-card .explanation-title {
      font-weight: 700;
      color: #17324d;
      margin-bottom: var(--sp-sm, 8px);
      font-size: 0.95em;
      text-transform: uppercase;
    }

    .workout-quiz-card .quiz-correct-answers {
      display: none;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      font-weight: 600;
      color: #17324d;
      flex-wrap: wrap;
    }

    .workout-quiz-card .correct-label-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 30px;
      background: #FFD100;
      color: #061d31;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.95em;
      border: 1px solid #b38b00;
    }

    .workout-quiz-card .optional-answer-note {
      margin-left: 8px;
      font-size: 0.9em;
      font-weight: 700;
      color: #666;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text code,
    #main-content #se-gym-app .workout-quiz-card .option-content code,
    #main-content #se-gym-app .workout-quiz-card .explanation-text code,
    #main-content #se-gym-app .workout-flashcard .flashcard-question code,
    #main-content #se-gym-app .workout-flashcard .flashcard-answer code,
    #main-content #se-gym-app .workout-flashcard .flashcard-explanation code {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text img,
    #main-content #se-gym-app .workout-quiz-card .question-text svg,
    #main-content #se-gym-app .workout-quiz-card .option-content img,
    #main-content #se-gym-app .workout-quiz-card .option-content svg,
    #main-content #se-gym-app .workout-quiz-card .explanation-text img,
    #main-content #se-gym-app .workout-quiz-card .explanation-text svg {
      max-width: 100%;
      height: auto;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text .highlighter-rouge,
    #main-content #se-gym-app .workout-quiz-card .option-content .highlighter-rouge,
    #main-content #se-gym-app .workout-quiz-card .explanation-text .highlighter-rouge,
    #main-content #se-gym-app .workout-flashcard .flashcard-question .highlighter-rouge,
    #main-content #se-gym-app .workout-flashcard .flashcard-answer .highlighter-rouge,
    #main-content #se-gym-app .workout-flashcard .flashcard-explanation .highlighter-rouge {
      max-width: 100%;
      min-width: 0;
      overflow-x: auto;
      text-align: left;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text pre,
    #main-content #se-gym-app .workout-quiz-card .option-content pre,
    #main-content #se-gym-app .workout-quiz-card .explanation-text pre,
    #main-content #se-gym-app .workout-flashcard .flashcard-question pre,
    #main-content #se-gym-app .workout-flashcard .flashcard-answer pre,
    #main-content #se-gym-app .workout-flashcard .flashcard-explanation pre {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 8px 0 0;
      border-color: #d0d7de;
      background: #f6f8fa;
      color: #24292f;
      overflow-x: auto;
      white-space: pre;
      overflow-wrap: normal;
      word-break: normal;
      text-align: left;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text pre code,
    #main-content #se-gym-app .workout-quiz-card .option-content pre code,
    #main-content #se-gym-app .workout-quiz-card .explanation-text pre code,
    #main-content #se-gym-app .workout-flashcard .flashcard-question pre code,
    #main-content #se-gym-app .workout-flashcard .flashcard-answer pre code,
    #main-content #se-gym-app .workout-flashcard .flashcard-explanation pre code {
      display: block;
      min-width: max-content;
      border: 0;
      padding: 0;
      background: transparent;
      white-space: pre;
      overflow-wrap: normal;
      word-break: normal;
    }

    #main-content #se-gym-app .workout-quiz-card .question-text pre code span,
    #main-content #se-gym-app .workout-quiz-card .option-content pre code span,
    #main-content #se-gym-app .workout-quiz-card .explanation-text pre code span,
    #main-content #se-gym-app .workout-flashcard .flashcard-question pre code span,
    #main-content #se-gym-app .workout-flashcard .flashcard-answer pre code span,
    #main-content #se-gym-app .workout-flashcard .flashcard-explanation pre code span {
      white-space: inherit;
    }

    /* ── Parsons Problem Styles ─────────────────────────────────────── */
    .parsons-container { margin-top: 12px; }
    .parsons-label { font-size: 0.9em; color: #666; margin-bottom: 8px; }
    .parsons-bank, .parsons-target {
      min-height: 48px; padding: var(--sp-sm, 8px); border-radius: var(--radius-md, 8px);
      display: flex; flex-direction: column; gap: var(--sp-xs, 4px);
    }
    .parsons-bank { background: #f5f5f8; border: 1px dashed var(--color-border-strong, #6a737d); }
    .parsons-target { background: #f0f8f0; border: 2px dashed var(--color-success, #1f7a3d); }
    .parsons-separator { text-align: center; padding: 6px; color: #555; font-size: 0.9em; }
    .parsons-line {
      display: inline-flex; align-items: center; gap: var(--sp-sm, 8px);
      padding: 6px 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border-strong, #767676);
      border-radius: var(--radius-sm, 4px);
      cursor: grab; font-size: 0.9em; transition: border-color 0.2s, background 0.2s;
      user-select: none; min-width: 0;
    }
    .parsons-line:hover { border-color: var(--color-primary, #2774AE); background: #e8f0ff; }
    .parsons-line.dragging { opacity: 0.4; }
    .parsons-line code {
      font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.92em;
      white-space: pre; color: #333; background: transparent !important; 
      padding: 0 !important; border: none !important;
    }
    .parsons-grip { color: #555; font-size: 0.9em; flex-shrink: 0; }
    .parsons-line.parsons-correct { border-color: var(--color-success, #1f7a3d); background: #e6ffed; }
    .parsons-line.parsons-incorrect { border-color: #dc3545; background: #ffeef0; }
    .parsons-line.parsons-correct::before,
    .parsons-line.parsons-incorrect::before {
      font-weight: 800;
      min-width: 1em;
      text-align: center;
    }
    .parsons-line.parsons-correct::before { content: "✓"; }
    .parsons-line.parsons-incorrect::before { content: "✗"; }
    .parsons-actions { display: flex; gap: var(--sp-sm, 8px); margin-top: var(--sp-md, 10px); flex-wrap: wrap; }
    .parsons-check-btn, .parsons-reset-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: var(--sp-sm, 6px) var(--sp-lg, 16px); border-radius: var(--radius-md, 8px); border: none; cursor: pointer;
      font-size: 0.95em; font-weight: 600; min-height: 38px;
    }
    .parsons-check-btn { background: var(--color-primary, #2774AE); color: var(--color-text-on-primary, white); }
    .parsons-check-btn:hover:not(:disabled) { background: var(--color-primary-hover, #1e5c8a); }
    .parsons-reset-btn { background: #eee; color: #333; }
    .parsons-reset-btn:hover:not(:disabled) { background: #ddd; }
    .parsons-check-btn:disabled, .parsons-reset-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .parsons-container.parsons-inline .parsons-bank,
    .parsons-container.parsons-inline .parsons-target {
      flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center;
    }
    .parsons-container.parsons-inline .parsons-line { padding: 4px 10px; }
    .parsons-container.parsons-inline .parsons-line code { white-space: nowrap; }
    .parsons-container.parsons-inline .parsons-target { min-height: 40px; }
    .quiz-correct-answers code {
      font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.95em;
      background: #f0f0f5; padding: 1px 4px; border-radius: 2px;
    }

    /* Workout Flashcard */
    .workout-flashcard {
      background: var(--color-surface, #ffffff);
      border: 1px solid var(--color-divider, #e1e4e8);
      border-radius: var(--radius-lg, 12px);
      padding: var(--sp-md, 12px);
      margin: var(--sp-md, 12px) 0;
      box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05));
      text-align: center;
      animation: fadeIn 0.4s ease;
    }

    .workout-flashcard .flashcard-question {
      font-size: 1.15em;
      font-weight: 600;
      margin-bottom: var(--sp-md, 12px);
      line-height: 1.25;
      color: var(--color-text, #1a1a1a);
      min-height: 40px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
    }

    .workout-flashcard .flashcard-question p,
    .workout-flashcard .flashcard-answer p,
    .workout-flashcard .flashcard-explanation p {
      margin: 0;
    }

    .workout-flashcard .flashcard-answer-container {
      margin-top: var(--sp-md, 10px);
      padding: var(--sp-md, 10px) var(--sp-lg, 15px);
      background: var(--color-surface-2, #f8f9fa);
      border-radius: var(--radius-md, 8px);
      border-top: 2px solid var(--color-accent, #FFD100);
      animation: slideDown 0.3s ease;
      font-size: 0.95em;
      line-height: 1.3;
    }

    .workout-flashcard .flashcard-answer {
      font-size: 1.2em;
      color: var(--color-primary, #2774AE);
      margin-bottom: var(--sp-md, 12px);
    }

    .workout-flashcard .flashcard-answer strong,
    .workout-flashcard .flashcard-answer b {
      font-weight: 800 !important;
    }

    .workout-flashcard .flashcard-explanation {
      font-size: 1em;
      color: #666;
      line-height: 1.5;
    }

    .workout-flashcard .flashcard-actions {
      margin-top: 12px;
    }

    .workout-flashcard .show-answer-btn {
      background: var(--color-primary, #2774AE);
      color: var(--color-text-on-primary, white);
      border: none;
      padding: var(--sp-sm, 8px) var(--sp-lg, 16px);
      border-radius: var(--radius-md, 8px);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      font-size: 0.9em;
      min-height: 38px;
    }

    .workout-flashcard .show-answer-btn:hover {
      background: var(--color-primary-hover, #1e5c8a);
    }

    .workout-flashcard .assessment-buttons {
      display: flex;
      justify-content: center;
      gap: var(--sp-xl, 20px);
    }

    .workout-flashcard .assess-btn {
      width: 45px;
      height: 45px;
      border-radius: var(--radius-circle, 50%);
      border: none;
      font-size: 20px;
      color: var(--color-text-on-primary, white);
      cursor: pointer;
      transition: transform 0.2s, background 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .workout-flashcard .assess-btn:hover {
      transform: scale(1.1);
    }

    .workout-flashcard .correct-btn {
      background: var(--color-success, #1f7a3d);
    }

    .workout-flashcard .correct-btn:hover {
      background: var(--color-success-hover, #186430);
    }

    .workout-flashcard .incorrect-btn {
      background: #dc3545;
    }

    .workout-flashcard .incorrect-btn:hover {
      background: #c82333;
    }

    /* Workout Results */
    .workout-results-content {
      text-align: center;
      padding: 32px 0;
    }

    #gym-workout.workout-results-active {
      padding-top: 0;
    }

    #gym-workout.workout-results-active .workout-header-row,
    #gym-workout.workout-results-active .workout-progress-bar {
      display: none;
    }

    #gym-workout.workout-results-active .workout-results-content {
      padding: 8px 0 12px;
    }

    #gym-workout.workout-results-active .workout-results-content h2 {
      margin: 0 0 8px;
      padding-bottom: 0;
      border-bottom: 0;
      font-size: clamp(1.55em, 3vw, 2em);
    }

    .workout-results-hero {
      width: min(280px, 72vw);
      margin: 0 auto 12px;
      aspect-ratio: 640 / 665;
      pointer-events: none;
    }

    #gym-workout.workout-results-active .workout-results-hero {
      width: min(260px, 34vh, 56vw);
      margin-bottom: 8px;
    }

    .workout-results-hero .se-gym-hero-svg {
      max-height: 230px;
    }

    .workout-score-display {
      font-size: 2em;
      font-weight: 800;
      margin: var(--sp-xl, 20px) 0;
      color: var(--color-primary, #2774AE);
    }

    #gym-workout.workout-results-active .workout-score-display {
      margin: 8px 0 6px;
      font-size: clamp(1.55em, 3vw, 2em);
    }

    #gym-workout.workout-results-active #workout-summary {
      margin: 0 0 10px;
    }

    #gym-workout.workout-results-active .workout-breakdown {
      margin-top: 10px;
      padding: 12px 14px;
    }

    #gym-workout.workout-results-active .workout-breakdown-heading {
      margin-bottom: 8px;
    }

    #gym-workout.workout-results-active .workout-breakdown-list {
      gap: 6px;
    }

    #gym-workout.workout-results-active .workout-breakdown-row {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .workout-results-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    #gym-workout.workout-results-active .workout-results-actions {
      margin-top: 12px;
    }

    #gym-workout.workout-results-active .workout-result-shortcut-hint {
      margin-top: 8px;
    }

    @media (max-height: 820px) and (min-width: 760px) {
      body.se-gym-page.se-gym-workout-active #se-gym-app {
        padding-top: 8px;
        padding-bottom: 10px;
      }

      #gym-workout.workout-results-active .workout-results-content {
        padding-top: 20px;
      }

      #gym-workout.workout-results-active .workout-results-hero {
        width: min(210px, 29vh, 50vw);
      }

      #gym-workout.workout-results-active .workout-score-display {
        margin-top: 6px;
        margin-bottom: 4px;
      }

      #gym-workout.workout-results-active #workout-summary {
        margin-bottom: 8px;
      }

      #gym-workout.workout-results-active .workout-breakdown {
        padding: 10px 12px;
      }

      #gym-workout.workout-results-active .workout-breakdown-list {
        gap: 4px;
      }

      #gym-workout.workout-results-active .workout-breakdown-row {
        padding-top: 4px;
        padding-bottom: 4px;
      }

      #gym-workout.workout-results-active .workout-results-actions {
        margin-top: 10px;
      }
    }

    #se-gym-app .quiz-shortcuts-hint,
    #se-gym-app .quiz-next-shortcut-hint,
    #se-gym-app .parsons-shortcuts-hint,
    #se-gym-app .flashcard-shortcuts-hint,
    #se-gym-app .workout-result-shortcut-hint {
      margin: 12px 0 0;
      color: #555;
      font-size: 0.9em;
      line-height: 1.5;
      text-align: center;
    }

    #se-gym-app .quiz-shortcuts-hint kbd,
    #se-gym-app .quiz-next-shortcut-hint kbd,
    #se-gym-app .parsons-shortcuts-hint kbd,
    #se-gym-app .flashcard-shortcuts-hint kbd,
    #se-gym-app .workout-result-shortcut-hint kbd {
      display: inline-block;
      min-width: 1.6em;
      padding: 1px 6px;
      border: 1px solid #767676;
      border-radius: 4px;
      background: #f6f8fa;
      color: #24292e;
      font-size: 0.92em;
      font-family: inherit;
      font-weight: 700;
      text-align: center;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    }

    #se-gym-app .quiz-shortcut-pair {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin: 0 2px;
    }

    #se-gym-app .key-sep {
      color: #666;
    }

    #se-gym-app .parsons-shortcut-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-width: 1.6em;
      min-height: 1.6em;
      margin-right: 8px;
      padding: 1px 6px;
      border: 1px solid #767676;
      border-radius: 4px;
      background: #f6f8fa;
      color: #24292e;
      font-size: 0.9em;
      font-weight: 700;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Gym emoji burst ─────────────────────────────────────────────────
       Emoji pieces pop out of the results panel and float upward.
       The host is position:fixed and sized to the anchor rect so pieces
       can escape the card bounds. Each piece uses --tx / --ty / --rot as
       its target, set per-piece by JS.                                   */
    .gym-emoji-host {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
    }
    .gym-emoji-piece {
      position: absolute;
      font-size: 1.8em;
      line-height: 1;
      opacity: 0;
      transform: translate(0,0) scale(0) rotate(0deg);
      animation: gym-emoji-fly 1800ms cubic-bezier(.22,.61,.36,1) forwards;
      user-select: none;
    }
    @keyframes gym-emoji-fly {
      0%   { opacity: 0;   transform: translate(0,0) scale(0) rotate(0deg); }
      10%  { opacity: 1;   transform: translate(calc(var(--tx)*.15), calc(var(--ty)*.15)) scale(1.6) rotate(calc(var(--rot)*.1)); }
      25%  { opacity: 1;   transform: translate(calc(var(--tx)*.4),  calc(var(--ty)*.4  - 12px)) scale(1.15) rotate(calc(var(--rot)*.3)); }
      55%  { opacity: 1;   transform: translate(calc(var(--tx)*.8),  calc(var(--ty)*.8  - 28px)) scale(1.0)  rotate(calc(var(--rot)*.7)); }
      80%  { opacity: .8;  transform: translate(var(--tx), calc(var(--ty) - 10px)) scale(.95) rotate(calc(var(--rot)*.9)); }
      100% { opacity: 0;   transform: translate(calc(var(--tx) + var(--drift,0px)), calc(var(--ty) + 50px)) scale(.8) rotate(var(--rot)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .gym-emoji-host  { display: none !important; }
      .gym-emoji-piece { animation: none !important; }
      .workout-progress-fill,
      .workout-quiz-card,
      .workout-quiz-card .quiz-option,
      .workout-quiz-card .submit-answer-btn,
      .workout-quiz-card .next-btn {
        animation: none !important;
        transition: none !important;
      }

      .workout-quiz-card .quiz-option:hover:not([disabled]),
      .workout-quiz-card .submit-answer-btn:hover:not(:disabled),
      .workout-quiz-card .next-btn:hover {
        transform: none !important;
      }
    }

    .hidden {
      display: none !important;
    }

    /* Dark Mode */
    html.dark-mode #se-gym-app {
      color: #e0e0e0;
    }

    html.dark-mode #gym-entrance {
      --gym-ucla-blue: #2A82C5;
      --gym-ucla-blue-dark: #0F4C7B;
      --gym-ucla-blue-light: #6FB1E8;
      --gym-ucla-gold: #FFD100;
      --gym-ucla-gold-dark: #B38B00;
      --gym-ink: #0c1d2e;
      --gym-paper: #172534;
      --gym-soft-blue: #c9e6ff;
      --gym-soft-gold: #fff3b8;
      --gym-skin: #c77f54;
      --gym-skin-shadow: #8a5635;
      --gym-skin-light: #e7aa78;
      --gym-hair: #3a2818;
      --gym-hair-highlight: #6b4730;
      --gym-outline: #0c1d2e;
      --gym-cape: #1a5b94;
      --gym-cape-shadow: #0a2f54;
      --gym-cape-stop-top: #3585c8;
      --gym-cape-stop-bottom: #0a2f54;
      --gym-svg-shadow: rgba(91, 168, 232, 0.28);
    }

    html.dark-mode .post-content .gym-topic-hero-svg,
    html.dark-mode #gym-entrance .gym-topic-hero-svg {
      filter: none !important;
    }

    html.dark-mode .gym-topic-hero-svg .suit-highlight {
      display: none;
    }

    html.dark-mode .gym-topic-hero-svg .suit-side-panel {
      fill: rgba(255, 255, 255, 0.06);
      stroke: rgba(255, 255, 255, 0.18);
    }

    html.dark-mode .gym-topic-hero-svg .suit-gloss {
      stroke: rgba(255, 255, 255, 0.18);
    }

    html.dark-mode .gym-topic-hero-svg .lat-flare,
    html.dark-mode .gym-topic-hero-svg .pectoral-line {
      stroke: rgba(255, 255, 255, 0.22);
    }

    html.dark-mode .gym-topic-hero-svg .arm-highlight {
      stroke: rgba(255, 220, 180, 0.25);
    }

    html.dark-mode .gym-topic-hero-svg .skin,
    html.dark-mode .gym-topic-hero-svg .hand,
    html.dark-mode .gym-topic-hero-svg .ear,
    html.dark-mode .gym-topic-hero-svg .skin-fill,
    html.dark-mode .gym-topic-hero-svg .hand-grip {
      fill: var(--gym-skin);
      stroke: var(--gym-skin-shadow);
    }

    html.dark-mode .gym-topic-hero-svg .topic-plate-agile circle:first-child,
    html.dark-mode .gym-topic-hero-svg .topic-plate-data circle:first-child {
      fill: #174f55;
    }

    html.dark-mode .gym-topic-hero-svg .gym-floor ellipse {
      fill: rgba(139, 184, 232, 0.16);
    }

    html.dark-mode .gym-topic-hero-svg .abdomen-panel {
      fill: var(--gym-ucla-blue);
      stroke: rgba(255, 209, 0, 0.78);
    }

    html.dark-mode .gym-topic-hero-svg .abdomen-line {
      stroke: rgba(255, 255, 255, 0.48);
    }

    html.dark-mode .gym-topic-hero-svg .hair,
    html.dark-mode .gym-topic-hero-svg .hair-female,
    html.dark-mode .gym-topic-hero-svg .hair-front,
    html.dark-mode .gym-topic-hero-svg .hair-lock {
      fill: #3a2818;
    }

    html.dark-mode .gym-topic-hero-svg .hair-shadow {
      fill: rgba(0, 0, 0, 0.42);
    }

    html.dark-mode .gym-topic-hero-svg .hair-shine {
      stroke: rgba(255, 220, 150, 0.45);
    }


    @media (prefers-reduced-motion: reduce) {
      .gym-lift-group,
      .gym-hero-body .cape,
      .gym-hero-body .cape-main,
      .gym-hero-body .cape-trail-1,
      .gym-hero-body .cape-trail-2,
      .leg-shin-pivot,
      .leg-shin-pivot-left,
      .leg-shin-pivot-right,
      .gym-spark-burst,
      .gym-motion-lines,
      .gym-motion-ghost,
      .gym-backdrop {
        animation: none !important;
      }

      .gym-motion-ghost,
      .gym-motion-lines {
        opacity: 0.42;
      }

      .gym-item {
        transition: none !important;
      }

      .gym-item:hover {
        transform: none;
      }
    }

    html.dark-mode #se-gym-app h1,
    html.dark-mode #se-gym-app h2 {
      color: #FFD100;
      border-bottom-color: #444;
    }

    html.dark-mode .gym-section-header,
    html.dark-mode #tutorial-progress-section {
      border-bottom-color: #444;
      border-top-color: #444;
    }

    html.dark-mode .gym-subtitle {
      color: #d5dce8;
    }

    html.dark-mode .gym-topic-strip {
      background: linear-gradient(180deg, rgba(24, 34, 48, 0.98), rgba(14, 22, 32, 0.98));
      border-color: rgba(139, 184, 232, 0.48);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
    }

    html.dark-mode .gym-topic-token {
      border-color: #d7ecff;
      color: #061d31;
      box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.38);
    }

    html.dark-mode #gym-entrance h2 .section-heading-icon,
    html.dark-mode .gym-section-header h2 .section-heading-icon {
      background: #8BB8E8;
      color: #061d31;
      box-shadow: inset 0 -3px 0 rgba(0, 59, 92, 0.28);
    }

    html.dark-mode .gym-summary-text {
      color: #c8c8d8;
    }

    html.dark-mode .gym-summary-text.gym-status-error {
      color: #ffb4a8;
    }

    html.dark-mode .milestone-banner {
      background:
        radial-gradient(circle at 96% 0%, rgba(139, 184, 232, 0.18) 0 70px, transparent 72px),
        linear-gradient(180deg, #102d47, #0b2338);
      color: #eaf6ff;
      border-color: #8BB8E8;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(139, 184, 232, 0.18);
    }

    html.dark-mode .milestone-banner::before {
      background: linear-gradient(90deg, #8BB8E8 0%, #8BB8E8 44%, #FFD100 44%, #FFD100 56%, #8BB8E8 56%, #8BB8E8 100%);
    }

    html.dark-mode .milestone-banner::after {
      background: radial-gradient(circle, rgba(139, 184, 232, 0.24) 0 36%, rgba(139, 184, 232, 0.1) 37% 58%, transparent 59%);
      border: 1px solid rgba(139, 184, 232, 0.18);
    }

    html.dark-mode .milestone-icon {
      background: linear-gradient(145deg, #fff7b0, #FFD100 62%, #B38B00);
      border-color: #d7ecff;
      color: #061d31;
      box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 8px 18px rgba(0, 0, 0, 0.34);
    }

    html.dark-mode .milestone-text strong {
      color: #fff6c2;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
    }

    html.dark-mode .milestone-text span {
      color: #d9ecff;
    }

    html.dark-mode .milestone-banner.milestone-bronze {
      background:
        radial-gradient(circle at 96% 0%, rgba(216, 155, 88, 0.2) 0 70px, transparent 72px),
        linear-gradient(180deg, #2f2419, #1f1a15);
      border-color: #d89b58;
    }

    html.dark-mode .milestone-banner.milestone-bronze .milestone-text strong {
      color: #ffe2ba;
    }

    html.dark-mode .milestone-banner.milestone-silver {
      background:
        radial-gradient(circle at 96% 0%, rgba(215, 236, 255, 0.18) 0 70px, transparent 72px),
        linear-gradient(180deg, #263446, #172231);
      border-color: #b8c6d4;
    }

    html.dark-mode .milestone-banner.milestone-silver .milestone-text strong {
      color: #f0f6ff;
    }

    html.dark-mode .milestone-banner.milestone-gold {
      background:
        radial-gradient(circle at 96% 0%, rgba(255, 209, 0, 0.18) 0 70px, transparent 72px),
        linear-gradient(180deg, #342b08, #171d25);
      border-color: #FFD100;
    }

    html.dark-mode .milestone-banner.milestone-gold .milestone-text strong,
    html.dark-mode .milestone-banner.milestone-diamond .milestone-text strong {
      color: #FFD100;
    }

    html.dark-mode .milestone-banner.milestone-diamond {
      background:
        radial-gradient(circle at 96% 0%, rgba(139, 184, 232, 0.24) 0 70px, transparent 72px),
        linear-gradient(180deg, #102f4d, #071d31);
      border-color: #8BB8E8;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(139, 184, 232, 0.22);
    }

    html.dark-mode #gym-controls {
      background: linear-gradient(180deg, #202833, #171d25);
      border-color: #8BB8E8;
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
    }

    html.dark-mode #gym-controls .toggle-row:not(.max-cards-row) {
      background: linear-gradient(180deg, rgba(139, 184, 232, 0.1), rgba(17, 31, 49, 0.72));
      border-color: rgba(139, 184, 232, 0.28);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html.dark-mode .toggle-icon {
      background: #8BB8E8;
      color: #061d31;
    }

    html.dark-mode .controls-row label {
      color: #e0e0e0;
    }

    html.dark-mode .controls-row input[type="number"] {
      background: #1a1a1a;
      border-color: #444;
      color: #e0e0e0;
    }

    html.dark-mode .timed-practice-panel {
      background: #1f1f1f;
      border-color: #555;
      color: #e0e0e0;
    }

    html.dark-mode .timed-practice-mode-option,
    html.dark-mode .timed-practice-field label {
      color: #e0e0e0;
    }

    html.dark-mode .timed-practice-field input[type="number"] {
      background: #1a1a1a;
      border-color: #737373;
      color: #e0e0e0;
    }

    html.dark-mode .timed-practice-field input[type="number"]:focus {
      border-color: #4da3ff;
      box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.25);
    }

    html.dark-mode .timed-practice-clock {
      background: #102333;
      border-color: #4da3ff;
      color: #e6f4ff;
    }

    html.dark-mode .timed-practice-extend-btn {
      background: #1f1f1f;
      border-color: #4da3ff;
      color: #e6f4ff;
    }

    html.dark-mode .timed-practice-extend-btn:hover {
      background: #29384a;
    }

    html.dark-mode .timed-practice-clock.is-warning {
      background: #332500;
      border-color: #d19a00;
      color: #ffe4a3;
    }

    html.dark-mode .timed-practice-clock.is-warning .timed-practice-extend-btn {
      border-color: #d19a00;
      color: #ffe4a3;
    }

    html.dark-mode .timed-practice-clock.is-expired {
      background: #341a18;
      border-color: #f5a8a3;
      color: #ffd3d0;
    }

    html.dark-mode .timed-practice-clock.is-expired .timed-practice-extend-btn {
      border-color: #f5a8a3;
      color: #ffd3d0;
    }

    html.dark-mode .gym-item {
      background: linear-gradient(180deg, #202833, #171d25);
      border-color: #46566a;
      color: #e0e0e0;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
    }

    html.dark-mode .gym-item:hover {
      border-color: #4da3ff;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.48);
    }

    html.dark-mode .gym-item-title {
      color: #f0f7ff;
    }

    html.dark-mode .gym-item.in-gym {
      border-color: #B9D9EB;
      background: linear-gradient(180deg, #114166, #08283f);
      box-shadow: 0 0 0 1px rgba(185, 217, 235, 0.28), 0 16px 32px rgba(0, 0, 0, 0.54);
    }

    html.dark-mode .gym-item.in-gym::before {
      background: #FFD100;
      width: 7px;
    }

    html.dark-mode .gym-item.in-gym .gym-item-title {
      color: #ffffff;
    }

    html.dark-mode .gym-item.in-gym .gym-item-desc,
    html.dark-mode .gym-item.in-gym .gym-item-count {
      color: #d9ecff;
    }

    html.dark-mode .gym-item-desc {
      color: #aaa;
    }

    html.dark-mode .gym-item-count {
      color: #aaa;
    }

    html.dark-mode .empty-gym-msg {
      color: #c8c8d8;
      border-color: #46566a;
      background: linear-gradient(180deg, #202833, #171d25);
    }

    html.dark-mode .gym-add-btn {
      background: #111827;
      border-color: #6b7d92;
      color: #d5dce8;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.38);
    }

    html.dark-mode .gym-add-btn:hover {
      background: #18314a;
      border-color: #8BB8E8;
      color: #B9D9EB;
    }

    html.dark-mode .gym-add-btn.in-gym {
      background: #B9D9EB;
      border-color: #e6f4ff;
      color: #061d31;
      box-shadow: 0 0 0 1px rgba(185, 217, 235, 0.22), 0 6px 14px rgba(0, 0, 0, 0.44);
    }

    html.dark-mode .gym-add-btn.in-gym:hover {
      background: #ff8585;
      border-color: #ffd3d0;
      color: #0a0a14;
    }

    html.dark-mode .workout-quiz-card {
      background:
        radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.16) 0 88px, transparent 90px),
        linear-gradient(180deg, #111f31, #0f1722);
      border-color: #8BB8E8;
      color: #e6f4ff;
      box-shadow: 0 20px 42px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(139, 184, 232, 0.16);
    }

    html.dark-mode .workout-quiz-card::before {
      background: linear-gradient(90deg, #8BB8E8 0 44%, #FFD100 44% 56%, #8BB8E8 56% 100%);
    }

    html.dark-mode .workout-quiz-card .question-text {
      color: #f0f7ff;
      border-color: #31455d;
      border-left-color: #FFD100;
      background: linear-gradient(180deg, rgba(32, 52, 75, 0.88), rgba(20, 40, 63, 0.72));
    }

    html.dark-mode .workout-quiz-card .quiz-option {
      background: linear-gradient(180deg, #172536, #132131);
      border-color: #46566a;
      color: #e6f4ff;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    }

    html.dark-mode .workout-quiz-card .quiz-option:hover:not([disabled]):not(.selected) {
      border-color: #8BB8E8;
      background: linear-gradient(180deg, #20344b, #172b40);
      box-shadow: 0 9px 22px rgba(0, 0, 0, 0.42);
    }

    html.dark-mode .workout-quiz-card .quiz-option.selected {
      border-color: #8BB8E8;
      background: linear-gradient(180deg, #1b3a58, #18314a);
      box-shadow: 0 0 0 2px rgba(139, 184, 232, 0.24), 0 9px 22px rgba(0, 0, 0, 0.42);
    }

    html.dark-mode .workout-quiz-card .submit-answer-btn:disabled {
      background: #46566a;
      color: #d9ecff;
    }

    html.dark-mode .workout-quiz-card .quiz-option.correct {
      border-color: #28a745;
      background: linear-gradient(180deg, #214a34, #1a3a2a);
      color: #98fb98;
    }

    html.dark-mode .workout-quiz-card .quiz-option.incorrect {
      border-color: #dc3545;
      background: linear-gradient(180deg, #4b2020, #3d1a1a);
      color: #ffbaba;
    }

    html.dark-mode .workout-quiz-card .option-label {
      background: linear-gradient(145deg, #17314c, #0b1f33);
      border-color: #8BB8E8;
      color: #d9ecff;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.26);
    }

    html.dark-mode .workout-quiz-card .option-checkbox {
      background: #0b1f33;
      border-color: #8BB8E8;
    }

    html.dark-mode .workout-quiz-card .quiz-explanation {
      background: linear-gradient(180deg, #182f49, #14283f);
      border-color: #8BB8E8;
      border-left-color: #FFD100;
      color: #e6f4ff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    html.dark-mode .workout-quiz-card .explanation-title {
      color: #FFD100;
    }

    html.dark-mode .workout-quiz-card .quiz-correct-answers {
      color: #d9ecff;
    }

    html.dark-mode .workout-quiz-card .correct-label-badge {
      background: #FFD100;
      color: #061d31;
      border-color: #fff6c2;
    }

    html.dark-mode .workout-quiz-card .optional-answer-note {
      color: #b0b0b8;
    }

    html.dark-mode .workout-flashcard {
      background: #1a1a1a;
      border-color: #333;
      color: #e0e0e0;
    }

    html.dark-mode .workout-flashcard .flashcard-question {
      color: #ffffff;
    }

    html.dark-mode .workout-flashcard .flashcard-answer-container {
      background: #252525;
      border-top-color: #FFD100;
    }

    html.dark-mode .workout-flashcard .flashcard-answer {
      color: #FFD100;
    }

    html.dark-mode #main-content #se-gym-app .workout-quiz-card .question-text pre,
    html.dark-mode #main-content #se-gym-app .workout-quiz-card .option-content pre,
    html.dark-mode #main-content #se-gym-app .workout-quiz-card .explanation-text pre,
    html.dark-mode #main-content #se-gym-app .workout-flashcard .flashcard-question pre,
    html.dark-mode #main-content #se-gym-app .workout-flashcard .flashcard-answer pre,
    html.dark-mode #main-content #se-gym-app .workout-flashcard .flashcard-explanation pre {
      background: #1f2328;
      border-color: #555;
      color: #e6edf3;
    }

    html.dark-mode .workout-progress-bar {
      background: #172536;
      border-color: #46566a;
    }

    html.dark-mode .workout-progress-fill {
      background: linear-gradient(90deg, #8BB8E8 0 76%, #FFD100 76% 100%);
    }

    html.dark-mode .workout-results-content {
      color: #e0e0e0;
    }

    html.dark-mode .workout-score-display {
      color: #4da3ff;
    }

    html.dark-mode #se-gym-app .quiz-shortcuts-hint,
    html.dark-mode #se-gym-app .quiz-next-shortcut-hint,
    html.dark-mode #se-gym-app .parsons-shortcuts-hint,
    html.dark-mode #se-gym-app .flashcard-shortcuts-hint,
    html.dark-mode #se-gym-app .workout-result-shortcut-hint {
      color: #c8c8d8;
    }

    html.dark-mode #se-gym-app .quiz-shortcuts-hint kbd,
    html.dark-mode #se-gym-app .quiz-next-shortcut-hint kbd,
    html.dark-mode #se-gym-app .parsons-shortcuts-hint kbd,
    html.dark-mode #se-gym-app .flashcard-shortcuts-hint kbd,
    html.dark-mode #se-gym-app .workout-result-shortcut-hint kbd {
      background: #252525;
      border-color: #737373;
      color: #e0e0e0;
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    }

    html.dark-mode #se-gym-app .key-sep {
      color: #b0b0b0;
    }

    html.dark-mode #se-gym-app .parsons-shortcut-label {
      background: #252525;
      border-color: #737373;
      color: #e0e0e0;
    }

    html.dark-mode .gym-btn.secondary {
      background: #333;
      color: #e0e0e0;
      border-color: #555;
    }

    html.dark-mode .gym-btn.secondary:hover {
      background: #444;
    }

    html.dark-mode .gym-btn.primary {
      box-shadow: 0 7px 16px rgba(0, 0, 0, 0.34);
    }

    html.dark-mode .gym-start-btn {
      border-color: #8BB8E8;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46), 0 0 18px rgba(139, 184, 232, 0.2), inset 0 -4px 0 rgba(0, 0, 0, 0.24);
    }

    html.dark-mode .gym-btn.primary:disabled {
      background: #46566a;
      color: #d9ecff;
      box-shadow: none;
    }

    html.dark-mode .gym-start-btn:disabled {
      border-color: #5d7188;
      box-shadow: none;
    }

    html.dark-mode .gym-btn.danger {
      background: var(--color-error, #ff8585);
      color: #0a0a14;
    }

    html.dark-mode .gym-btn.danger:hover:not(:disabled) {
      background: var(--color-error-hover, #ffa3a3);
      color: #0a0a14;
    }

    /* Parsons Dark Mode */
    html.dark-mode .parsons-label { color: #aaa; }
    html.dark-mode .parsons-bank { background: #1a1a1a; border-color: #444; }
    html.dark-mode .parsons-target { background: #1a2e1a; border-color: #28a745; }
    html.dark-mode .parsons-line { background: #252525; border-color: #737373; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    html.dark-mode .parsons-line:hover { border-color: #4da3ff; background: #2c2c2c; }
    html.dark-mode .parsons-line code { color: #e0e0e0; }
    html.dark-mode .parsons-grip { color: #b8b8c8; }
    html.dark-mode .parsons-separator { color: #b8b8c8; }
    html.dark-mode .parsons-line.parsons-correct { border-color: #28a745; background: #1a3a2a; }
    html.dark-mode .parsons-line.parsons-incorrect { border-color: #dc3545; background: #3d1a1a; }
    html.dark-mode .parsons-line.parsons-correct code { color: #98fb98; }
    html.dark-mode .parsons-line.parsons-incorrect code { color: #ffbaba; }
    html.dark-mode .parsons-reset-btn { background: #333; color: #e0e0e0; }
    html.dark-mode .parsons-reset-btn:hover:not(:disabled) { background: #444; }
    html.dark-mode .quiz-correct-answers code { background: #252525; color: #ffd54f; }

    /* Touch-first hit areas for phones, tablets, and hybrid devices. */
    @media (any-pointer: coarse) {
      .gym-btn,
      .workout-quiz-card .submit-answer-btn,
      .workout-quiz-card .next-btn,
      .workout-flashcard .show-answer-btn,
      .parsons-check-btn,
      .parsons-reset-btn,
      .timed-practice-extend-btn {
        min-height: 44px;
      }

      .controls-row input[type="number"],
      .timed-practice-field input[type="number"] {
        min-height: 44px;
      }

      .gym-add-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }

      .info-btn {
        width: 44px;
        height: 44px;
      }

      #se-gym-app .switch {
        width: 44px;
        height: 44px;
      }

      #se-gym-app .switch .slider {
        top: 10px;
        bottom: 10px;
      }

      .difficulty-filter-option,
      .timed-practice-mode-option,
      .tutorial-io-item,
      .workout-quiz-card .quiz-option,
      .parsons-line {
        min-height: 44px;
      }

      .difficulty-filter-option input[type="checkbox"],
      .timed-practice-mode-option input,
      .tutorial-io-item input[type="checkbox"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
      }
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
      #se-gym-app {
        padding: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
      }

      body.se-gym-page.se-gym-workout-active #main-content {
        padding: 2px !important;
      }

      body.se-gym-page.se-gym-workout-active #main-content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      body.se-gym-page.se-gym-workout-active #se-gym-app {
        padding: 2px;
        padding-left: max(2px, env(safe-area-inset-left));
        padding-right: max(2px, env(safe-area-inset-right));
      }

      body.se-gym-page.se-gym-workout-active #gym-workout {
        padding-top: 0;
      }

      #gym-controls {
        padding: 12px;
      }

      .controls-row:not(.toggle-row) {
        flex-direction: column;
        align-items: stretch;
      }

      .toggle-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px 12px;
      }

      .toggle-copy {
        align-items: flex-start;
      }

      .toggle-row .toggle-label {
        font-size: 1em;
      }

      .info-tooltip {
        left: 0;
        width: min(78vw, 300px);
      }

      .controls-row input[type="number"],
      .timed-practice-field input[type="number"] {
        width: 100%;
      }

      .max-cards-row {
        grid-template-columns: 1fr;
      }

      .max-cards-controls {
        display: block;
        width: 100%;
        max-width: none;
      }

      .difficulty-filter {
        padding: 10px;
      }

      .difficulty-filter-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .gym-section-header {
        align-items: stretch;
        flex-direction: column;
      }

      .gym-section-header .gym-btn {
        width: 100%;
      }

      .gym-item {
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
      }

      .gym-item-badge,
      .gym-item-title,
      .gym-item-count {
        display: block;
      }

      .gym-item-badge {
        width: fit-content;
        margin-right: 0;
        margin-bottom: 4px;
      }

      .gym-item-count {
        margin-left: 0;
        margin-top: 2px;
      }

      .gym-add-btn {
        margin-left: 0;
      }

      .workout-header-row {
        align-items: stretch;
        gap: 4px;
      }

      .workout-header-row > * {
        width: 100%;
      }

      #back-to-library-btn {
        justify-content: center;
        padding: 4px 8px;
      }

      .workout-progress-bar {
        height: 6px;
        margin: 4px auto 6px;
      }

      .timed-practice-clock {
        justify-content: space-between;
      }

      .workout-quiz-card,
      .workout-flashcard {
        margin: 4px 0;
        padding: 8px 6px 6px;
      }

      .workout-quiz-card::before {
        height: 4px;
      }

      .workout-quiz-card {
        background:
          radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.16) 0 64px, transparent 66px),
          linear-gradient(180deg, #ffffff, #f7fbff);
      }

      html.dark-mode .workout-quiz-card {
        background:
          radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.14) 0 64px, transparent 66px),
          linear-gradient(180deg, #111f31, #0f1722);
      }

      .workout-quiz-card .quiz-card-meta {
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 5px;
      }

      .workout-source-badge,
      .workout-quiz-card .quiz-difficulty,
      .workout-flashcard .quiz-difficulty {
        padding: 3px 8px;
      }

      .workout-source-badge,
      .workout-quiz-card .quiz-difficulty {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .workout-quiz-card .question-text {
        font-size: 1em;
        line-height: 1.28;
        margin-bottom: 6px;
        padding: 6px 8px;
        border-left-width: 4px;
      }

      #main-content #se-gym-app .workout-quiz-card .question-text .uml-folder-tree-diagram-container {
        padding: 4px 0 0;
      }

      .workout-quiz-card .quiz-options {
        gap: 6px;
      }

      .workout-quiz-card .quiz-option {
        align-items: flex-start;
        gap: 6px;
        min-height: 44px;
        padding: 6px 8px;
      }

      .workout-quiz-card .option-label {
        width: 28px;
        height: 28px;
        font-size: 0.9em;
      }

      .workout-quiz-card .option-checkbox {
        width: 20px;
        height: 20px;
        margin-top: 4px;
      }

      .workout-quiz-card .option-content {
        line-height: 1.28;
        padding-top: 0;
      }

      .workout-quiz-card .option-feedback {
        margin-left: 0;
      }

      .workout-flashcard .flashcard-question {
        min-height: 0;
        margin-bottom: 6px;
        gap: 6px;
        line-height: 1.2;
      }

      .workout-flashcard .flashcard-answer-container {
        margin-top: 6px;
        padding: 8px;
      }

      .workout-flashcard .flashcard-answer {
        margin-bottom: 6px;
      }

      .workout-flashcard .flashcard-actions {
        margin-top: 8px;
      }

      #se-gym-app .quiz-shortcuts-hint,
      #se-gym-app .quiz-next-shortcut-hint,
      #se-gym-app .parsons-shortcuts-hint,
      #se-gym-app .flashcard-shortcuts-hint {
        margin-top: 6px;
        line-height: 1.3;
      }

      .workout-quiz-card .quiz-action-row {
        display: block;
      }

      .workout-quiz-card .submit-answer-btn,
      .workout-quiz-card .next-btn {
        margin-left: 0;
        min-width: 0;
        width: 100%;
      }

      .workout-quiz-card .quiz-correct-answers {
        align-items: flex-start;
        flex-wrap: wrap;
        line-height: 1.4;
      }

      .parsons-container:not(.parsons-inline) .parsons-line {
        width: 100%;
      }

      .parsons-line code,
      .parsons-container.parsons-inline .parsons-line code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .parsons-actions > button {
        flex: 1 1 140px;
        min-height: 44px;
      }

      .parsons-line {
        max-width: 100%;
        overflow-x: auto;
      }

      .parsons-bank,
      .parsons-target {
        padding: 10px;
      }

      .workout-breakdown {
        max-width: 100%;
        padding: 12px;
      }

      .workout-breakdown-row {
        grid-template-columns: 36px minmax(0, 1fr);
      }

      .workout-breakdown-stat {
        grid-column: 2;
      }

      .workout-results-actions .gym-btn,
      .tutorial-progress-actions .gym-btn,
      .tutorial-io-modal-actions .gym-btn {
        width: 100%;
      }

      .tutorial-io-modal-actions > span {
        display: none;
      }

      .tutorial-io-item {
        align-items: flex-start;
      }

      .tutorial-io-item-meta {
        display: block;
        margin-left: 0;
      }
    }

    @media (max-width: 420px) {
      .workout-quiz-card,
      .workout-flashcard {
        padding: 8px 6px 6px;
      }

      .workout-quiz-card .quiz-option {
        gap: 6px;
        padding: 6px 8px;
      }

      .workout-quiz-card .option-label {
        width: 26px;
        height: 26px;
      }

      .workout-quiz-card .option-checkbox {
        width: 18px;
        height: 18px;
      }

      .workout-quiz-card .quiz-difficulty-prefix {
        display: none;
      }

      .confirm-modal-btns {
        flex-direction: column;
      }

      .confirm-modal-btns .gym-btn {
        width: 100%;
      }
    }

    @media (max-width: 360px) {
      #se-gym-app {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
      }

      .workout-quiz-card .quiz-option {
        min-height: 44px;
      }
    }

    .pd-inactive {
      /* Inactive groups are made inert/aria-hidden in JS. Avoid opacity here:
         muting colors keeps the disabled state visible without lowering text
         contrast across the whole subtree. */
      pointer-events: none;
      user-select: none;
    }

    #gym-controls-body.pd-inactive {
      filter: grayscale(1) saturate(0.3);
    }

    #gym-controls-body.pd-inactive .toggle-row:not(.max-cards-row),
    #gym-controls-body.pd-inactive .difficulty-filter {
      background: linear-gradient(180deg, #f7f8fa, #eef2f5);
      border-color: #9aa6b2;
      box-shadow: none;
    }

    #gym-controls-body.pd-inactive .toggle-icon {
      background: #6b7280;
      color: #ffffff;
      box-shadow: none;
    }

    #gym-controls-body.pd-inactive .difficulty-filter legend {
      background: #f7f8fa;
      color: #374151;
    }

    #gym-controls-body.pd-inactive .difficulty-filter-help,
    #gym-controls-body.pd-inactive .gym-summary-text {
      color: #4b5563;
    }

    #gym-controls-body.pd-inactive .difficulty-filter-option {
      background: #f7f8fa;
      border-color: #9aa6b2;
      color: #333333;
      box-shadow: none;
    }

    html.dark-mode #gym-controls-body.pd-inactive {
      filter: grayscale(1) saturate(0.25);
    }

    html.dark-mode #gym-controls-body.pd-inactive .toggle-row:not(.max-cards-row),
    html.dark-mode #gym-controls-body.pd-inactive .difficulty-filter {
      background: linear-gradient(180deg, #20252d, #171c23);
      border-color: #687386;
      box-shadow: none;
    }

    html.dark-mode #gym-controls-body.pd-inactive .toggle-icon {
      background: #8a94a3;
      color: #06111d;
      box-shadow: none;
    }

    html.dark-mode #gym-controls-body.pd-inactive .difficulty-filter legend {
      background: #20252d;
      color: #e6edf6;
    }

    html.dark-mode #gym-controls-body.pd-inactive .difficulty-filter-help,
    html.dark-mode #gym-controls-body.pd-inactive .gym-summary-text {
      color: #cdd5df;
    }

    html.dark-mode #gym-controls-body.pd-inactive .difficulty-filter-option {
      background: #171c23;
      border-color: #687386;
      color: #e6edf6;
      box-shadow: none;
    }

    /* Tutorial Progress Import/Export modal */
    .tutorial-io-modal-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 10px;
      padding: 22px 26px;
      z-index: 201;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      max-width: 520px;
      width: min(92vw, 520px);
      max-height: calc(100vh - 48px);
      max-height: calc(100dvh - 48px);
      display: flex;
      flex-direction: column;
    }

    .tutorial-io-modal-title {
      margin: 0 0 8px;
      color: #2774AE;
      font-weight: 700;
      font-size: 1.15em;
    }

    .tutorial-io-modal-desc {
      margin: 0 0 14px;
      font-size: 0.9em;
      color: #555;
      line-height: 1.4;
    }

    .tutorial-io-list {
      flex: 1;
      overflow-y: auto;
      border: 1px solid #e1e4e8;
      border-radius: 8px;
      padding: 6px 4px;
      background: #fafbfc;
      min-height: 60px;
      max-height: 45vh;
    }

    .tutorial-io-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.95em;
      color: #222;
    }

    .tutorial-io-item:hover {
      background: #eef3f8;
    }

    .tutorial-io-item input[type="checkbox"] {
      margin: 0;
      flex-shrink: 0;
      width: 16px;
      height: 16px;
    }

    .tutorial-io-item-title {
      font-weight: 600;
    }

    .tutorial-io-item-meta {
      color: #777;
      font-size: 0.9em;
      margin-left: 4px;
    }

    .tutorial-export-empty-msg {
      color: #666;
      font-style: italic;
    }

    .tutorial-io-modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      flex-wrap: wrap;
      align-items: center;
    }

    html.dark-mode .tutorial-io-modal-box {
      background: #2a2a2a;
    }

    html.dark-mode .tutorial-io-modal-title {
      color: #79b8e3;
    }

    html.dark-mode .tutorial-io-modal-desc {
      color: #c8c8c8;
    }

    html.dark-mode .tutorial-io-list {
      background: #1f1f1f;
      border-color: #444;
    }

    html.dark-mode .tutorial-io-item {
      color: #e0e0e0;
    }

    html.dark-mode .tutorial-io-item:hover {
      background: #333;
    }

    html.dark-mode .tutorial-io-item-meta {
      color: #aaa;
    }

    html.dark-mode .tutorial-export-empty-msg {
      color: #c8c8c8;
    }

    @media (max-width: 600px) {
      .tutorial-io-modal-box {
        width: calc(100vw - 24px);
        padding: 18px;
      }

      .tutorial-io-item {
        align-items: flex-start;
      }

      .tutorial-io-item-meta {
        display: block;
        margin-left: 0;
      }

      .tutorial-io-modal-actions .gym-btn {
        width: 100%;
      }

      .tutorial-io-modal-actions > span {
        display: none;
      }
    }