/* ── FINAL CLEAN DESIGN TOKENS: first-version shape + clinical blue colour ───────── */

      [data-theme=dark] {
        --bg: #070d1c;
        --bg2: #0e1830;
        --bg3: #0b1428;
        --bg4: #16224a;
        --tx: #e8eefc;
        --tx2: #93b4e6;
        --tx3: #7186b3;
        --ac: #60a5fa;
        --acl: #122044;
        --ach: #93c5fd;
        --ac2: #2563eb;
        --bdr: #213352;
        --bdr2: #2f4a78;
        --rdl: #2c0f0f;
        --gnl: #052e16;
        --aml: #1c1002;
        --pul: #1e1040;
        --cyl: #082030;
        --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .55);
        --shadow-lg: 0 6px 14px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .65);
        --shadow-xl: 0 10px 22px rgba(0, 0, 0, .6), 0 28px 64px rgba(0, 0, 0, .7);
      }

      /* ── RESET ─────────────────────────────────────────────────────────── */
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box
      }

      /* ── DESIGN TOKENS ─────────────────────────────────────────────────── */

      html {
        scroll-behavior: smooth
      }

      body {
        font-family: var(--font);
        background: var(--bg);
        color: var(--tx);
        line-height: 1.75;
        font-size: 15.5px;
        -webkit-font-smoothing: antialiased;
        min-height: 100vh
      }

      /* ── NAV BAR ─────────────────────────────────────────────────────────── */
      .nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--bdr);
        padding: 0 28px;
        display: flex;
        align-items: center;
        height: var(--nav-h);
        gap: 14px;
        box-shadow: 0 1px 0 var(--bdr), 0 4px 20px rgba(15, 23, 42, .05);
      }

      .logo {
        font-family: var(--serif);
        font-size: 19px;
        color: var(--ac);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
        letter-spacing: -.3px;
        font-weight: 400;
        text-decoration: none;
      }

      .logo-text {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.4px;
        background: linear-gradient(135deg, var(--ac), var(--ac2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .search-wrap input {
        width: 100%;
        padding: 9px 14px 9px 40px;
        border: 1.5px solid var(--bdr);
        border-radius: 99px;
        background: var(--bg3);
        color: var(--tx);
        font: 14px/1 var(--font);
        outline: 0;
        transition: .2s;
      }

      .search-wrap input:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px var(--acl);
        background: var(--bg2)
      }

      .search-wrap svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        color: var(--tx3)
      }

      .nbtn {
        height: 36px;
        padding: 0 16px;
        border-radius: 99px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        font: 12px/1 var(--font);
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all .18s;
        white-space: nowrap;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
      }

      .nbtn:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
        box-shadow: 0 2px 8px rgba(37, 99, 235, .15)
      }

      .menu-btn {
        display: none;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
      }

      /* ── LAYOUT ──────────────────────────────────────────────────────────── */

      .sidebar {
        width: 264px;
        flex-shrink: 0;
        background: var(--bg2);
        border-right: 1px solid var(--bdr);
        padding: 12px 8px;
        position: sticky;
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        transition: transform .25s;
      }

      .main {
        flex: 1;
        min-width: 0;
        padding: 32px 40px 48px;
        max-width: 960px
      }

      /* ── SIDEBAR ITEMS ───────────────────────────────────────────────────── */
      .sb-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: var(--tx3);
        padding: 16px 12px 5px;
      }

      .sb-item .cnt {
        font-size: 10px;
        font-weight: 700;
        background: var(--bg4);
        color: var(--tx3);
        border-radius: 99px;
        padding: 2px 7px;
        margin-left: auto;
      }

      /* ── ANIMATION ───────────────────────────────────────────────────────── */

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

        to {
          opacity: 1;
          transform: none
        }
      }

      /* ── HOME ────────────────────────────────────────────────────────────── */
      .hero {
        text-align: center;
        padding: 48px 0 16px
      }

      .hero h1 {
        font-family: var(--serif);
        font-size: 38px;
        letter-spacing: -.6px;
        margin-bottom: 8px;
        line-height: 1.1;
        background: linear-gradient(135deg, var(--tx) 0%, var(--ac) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      [data-theme=dark] .hero h1 {
        background: linear-gradient(135deg, #f1f5f9, var(--ac));
        -webkit-background-clip: text;
        background-clip: text
      }

      .hero p {
        color: var(--tx3);
        font-size: 15px;
        max-width: 500px;
        margin: 0 auto;
        line-height: 1.7
      }

      .home-search {
        max-width: 540px;
        margin: 24px auto 0;
        position: relative
      }

      .home-search input {
        width: 100%;
        padding: 15px 120px 15px 48px;
        border: 2px solid var(--bdr);
        border-radius: var(--r);
        background: var(--bg2);
        color: var(--tx);
        font: 16px var(--font);
        outline: 0;
        transition: .2s;
        box-shadow: var(--shadow);
      }

      .home-search button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, var(--ac), var(--ac2));
        color: #fff;
        border: 0;
        border-radius: var(--rs);
        padding: 9px 18px;
        font: 13px/1 var(--font);
        font-weight: 700;
        cursor: pointer;
        transition: opacity .15s;
        box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
      }

      .sys-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        max-width: 800px;
        margin: 32px auto;
      }

      .sys-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 20px;
        padding: 22px 14px 16px;
        text-align: center;
        cursor: pointer;
        transition: all .22s cubic-bezier(.34, 1.56, .64, 1);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .sys-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        border-radius: 20px 20px 0 0
      }

      .sys-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent 60%, rgba(255, 255, 255, .05));
        pointer-events: none;
      }

      .sys-card:hover {
        box-shadow: var(--shadow-xl);
        transform: translateY(-6px) scale(1.02);
        border-color: transparent;
      }

      .sys-card h3 {
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.4;
        color: var(--tx)
      }

      .sys-card p {
        font-size: 12px;
        color: var(--tx3);
        margin-top: 3px;
        font-weight: 500
      }

      /* ── SYSTEM PAGE ─────────────────────────────────────────────────────── */

      .sys-header h1 {
        font-family: var(--serif);
        font-size: 26px;
        letter-spacing: -.3px;
        margin-bottom: 3px
      }

      .topic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px
      }

      .topic-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 14px;
        padding: 15px 18px;
        cursor: pointer;
        transition: all .18s;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: var(--shadow);
      }

      /* ── BACK LINK ───────────────────────────────────────────────────────── */

      /* ── TOPIC PAGE ──────────────────────────────────────────────────────── */
      .tp-title {
        font-family: var(--serif);
        font-size: 30px;
        letter-spacing: -.4px;
        margin-bottom: 8px;
        line-height: 1.2;
      }

      /* ── SECTION BOXES ───────────────────────────────────────────────────── */
      .sbox {
        margin-bottom: 24px;
        border-radius: 16px;
        border: 1px solid var(--bdr);
        overflow: hidden;
        background: var(--bg2);
        box-shadow: 0 1px 4px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
        transition: box-shadow .15s;
      }

      .sbox-h {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px 22px;
        font-weight: 700;
        font-size: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, .07);
        letter-spacing: .01em;
      }

      .sbox-body {
        padding: 4px 0 8px
      }

      .sbox-body li {
        padding: 12px 24px 12px 52px;
        position: relative;
        color: var(--tx2);
        border-bottom: 1px solid var(--bg4);
        list-style: none;
        font-size: 14.5px;
        line-height: 1.9;
      }

      /* Drug / label blocks — "LABEL: content" items */
      .drug-block {
        padding: 14px 24px 14px 22px;
        margin: 0;
        border-bottom: 1px solid var(--bg4);
        font-size: 14.5px;
        line-height: 1.9;
        background: transparent;
      }

      .drug-lbl {
        font-weight: 700;
        color: var(--ac);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .drug-txt {
        color: var(--tx2);
        font-size: 14.5px;
        line-height: 1.9;
        padding-left: 14px
      }

      /* Sub-bullets inside drug blocks */

      /* Section colour variants */

      .s-rf {
        border-color: var(--rdb)
      }

      .s-tx {
        border-color: var(--gnb)
      }

      [data-theme=dark] .s-cx .sbox-h {
        background: #2c1e0a;
        color: #fbbf24
      }

      /* Drug family group card inside counselling sections */

      .group-card-hdr {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        font-weight: 700;
        font-size: 0.78rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--ac);
        background: var(--acl);
        border-bottom: 1.5px solid var(--ac)
      }

      .group-card-body .drug-block {
        border-radius: 8px;
        margin: 0
      }

      .group-card-body .sbox {
        margin: 0;
        border-radius: 8px
      }

      [data-theme=dark] .group-card {
        border-color: #60a5fa
      }

      [data-theme=dark] .group-card-hdr {
        background: #1e3a5f;
        color: #93c5fd;
        border-color: #60a5fa
      }

      /* At the Station section */

      [data-theme=dark] .s-osce .sbox-h {
        background: #134e4a;
        color: #93c5fd
      }

      [data-theme=dark] .s-req .sbox-h {
        background: #2c1e0a;
        color: #fcd34d
      }

      /* ── MONITORING ──────────────────────────────────────────────────────── */

      /* ── TL;DR ───────────────────────────────────────────────────────────── */

      /* ── RELATED TOPICS ──────────────────────────────────────────────────── */

      /* ── DDI / INTERACTION CHECKER ───────────────────────────────────────── */

      /* ── QUICK REV ───────────────────────────────────────────────────────── */
      body.qrev .s-def,
      body.qrev .s-cau,
      body.qrev .s-sym,
      body.qrev .s-rf,
      body.qrev .s-dx,
      body.qrev .s-req,
      body.qrev .s-proc,
      body.qrev .s-abbr,
      body.qrev .s-tx2,
      body.qrev .s-cx,
      body.qrev .s-ref,
      body.qrev .s-ext,
      body.qrev .s-mon,
      body.qrev .related-section,
      body.qrev .calc-widget,
      body.qrev .sbox-body li.sub-item {
        display: none
      }

      body.qrev .tldr {
        border-width: 2px
      }

      body.qrev .s-tx {
        border: 2px solid var(--gn);
        box-shadow: 0 0 0 4px rgba(5, 150, 105, .1)
      }

      /* ── SADMANS / PRINT CARD ────────────────────────────────────────────── */

      /* ── SEARCH / MISC ───────────────────────────────────────────────────── */
      .cnt {
        font-size: 10px;
        font-weight: 700;
        background: var(--bg4);
        color: var(--tx3);
        border-radius: 99px;
        padding: 2px 7px
      }

      .search-disc {
        font-size: 12px;
        color: var(--tx3);
        margin-top: 8px;
        padding: 8px 12px;
        background: var(--aml);
        border-radius: 8px;
        border-left: 3px solid var(--am)
      }

      /* ── RESPONSIVE ──────────────────────────────────────────────────────── */
      @media(max-width:900px) {
        .main {
          padding: 20px 20px 80px
        }

        .sys-grid {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
        }
      }

      @media(max-width:768px) {

        .nav {
          padding: 0 14px;
          gap: 8px
        }

        .logo-text {
          display: none
        }

        .search-wrap {
          max-width: none
        }

        .nbtn span {
          display: none
        }

        .nbtn {
          padding: 0 10px;
          gap: 0
        }

        .menu-btn {
          display: flex;
          align-items: center;
          justify-content: center
        }

        .sidebar {
          position: fixed;
          top: var(--nav-h);
          left: 0;
          bottom: 0;
          height: auto;
          z-index: 95;
          transform: translateX(-100%);
          box-shadow: var(--shadow-xl)
        }

        .sidebar.open {
          transform: none
        }

        .overlay {
          display: block;
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s
        }

        .overlay.open {
          opacity: 1;
          pointer-events: auto
        }

        .layout {
          display: block
        }

        .main {
          padding: 16px 14px 32px;
          max-width: 100%
        }

        .tp-title {
          font-size: 24px
        }

        .mon-grid {
          grid-template-columns: 1fr
        }

        #qrev-banner {
          margin: 14px 14px 0;
          font-size: .9rem
        }
      }

      /* ═══ INTERACTION CHECKER ═══════════════════════════════════════════ */

      .ic-input {
        flex: 1;
        min-width: 160px;
        padding: 11px 16px;
        border: 2px solid var(--bdr);
        border-radius: var(--r);
        background: var(--bg3);
        color: var(--tx);
        font: 14.5px var(--font);
        outline: 0;
        transition: .2s
      }

      .ic-input:focus {
        border-color: var(--pu);
        box-shadow: 0 0 0 3px var(--pul)
      }

      .ic-swap:hover {
        background: var(--acl);
        border-color: var(--ac)
      }

      .ic-clear {
        padding: 8px 14px;
        border-radius: 99px;
        border: 1.5px solid var(--bdr);
        background: var(--bg3);
        color: var(--tx3);
        font: 12px var(--font);
        cursor: pointer;
        transition: .15s;
        white-space: nowrap
      }

      .ic-clear:hover {
        border-color: var(--rd);
        color: var(--rd)
      }

      /* ═══ CALCULATOR HUB ═════════════════════════════════════════════════ */

      /* ═══ CREDIT FOOTER ══════════════════════════════════════════════════ */

      /* ─── Quiz Mode ─────────────────────────────────────── */

      .qz-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: var(--r);
        padding: 24px;
        box-shadow: var(--shadow)
      }

      .qz-sys-tag {
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700
      }

      .qz-type-tag {
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 600;
        background: var(--bg3);
        color: var(--tx2);
        border: 1px solid var(--bdr)
      }

      .qz-btn-got {
        flex: 1;
        padding: 13px;
        background: #059669;
        color: #fff;
        border: 0;
        border-radius: var(--rs);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s
      }

      .qz-btn-miss {
        flex: 1;
        padding: 13px;
        background: var(--bg3);
        color: var(--tx2);
        border: 1.5px solid var(--bdr);
        border-radius: var(--rs);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s
      }

      /* ─── OSCE Station Generator ────────────────────────────────────── */

      .osce-cat-btn:hover {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff;
        transform: translateY(-1px)
      }

      .osce-cat-btn.selected {
        border-color: var(--accent);
        background: var(--accent);
        color: #fff
      }

      .osce-station {
        background: var(--bg2);
        border-radius: 18px;
        border: 1.5px solid var(--bdr);
        overflow: hidden;
        margin-bottom: 20px;
        animation: fadeIn .3s ease
      }

      .osce-scenario {
        font-size: 15px;
        line-height: 1.75;
        color: var(--tx);
        white-space: pre-line;
        padding: 16px;
        background: var(--bg);
        border-radius: 12px;
        border: 1px solid var(--bdr);
        margin-bottom: 20px
      }

      .osce-timer-display.ok {
        color: #059669
      }

      .osce-timer-btn {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--tx)
      }

      .osce-timer-btn.primary {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent)
      }

      .osce-timer-btn:hover {
        opacity: .85
      }

      .osce-answer-box {
        margin-bottom: 20px
      }

      .osce-answer-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px
      }

      .osce-answer-textarea {
        width: 100%;
        min-height: 130px;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        color: var(--tx);
        font-size: 14px;
        line-height: 1.7;
        resize: vertical;
        font-family: inherit;
        box-sizing: border-box;
        transition: border-color .2s
      }

      .osce-answer-textarea:focus {
        outline: none;
        border-color: var(--accent)
      }

      .osce-answer-textarea::placeholder {
        color: var(--tx3);
        opacity: .7
      }

      .osce-compare-box {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 20px;
        display: none
      }

      .osce-compare-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 10px
      }

      .osce-compare-inner {
        font-size: 14px;
        line-height: 1.75;
        color: var(--tx);
        white-space: pre-wrap;
        word-break: break-word
      }

      @keyframes shake {

        0%,
        100% {
          transform: translateX(0)
        }

        25% {
          transform: translateX(-6px)
        }

        75% {
          transform: translateX(6px)
        }
      }

      @keyframes revealMsgIn {
        from {
          opacity: 0;
          transform: translateY(-8px)
        }

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

      @keyframes revealMsgOut {
        from {
          opacity: 1
        }

        to {
          opacity: 0
        }
      }

      .osce-reveal-msg {
        background: #fef3c7;
        border: 1.5px solid #f59e0b;
        color: #92400e;
        border-radius: 10px;
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px
      }

      .osce-finish-btn {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1.5px solid #f59e0b;
        background: #fef3c722;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #b45309;
        transition: all .15s
      }

      .osce-finish-btn:hover {
        background: #fef3c7;
        border-color: #d97706
      }

      /* ── Study tools ─────────────────────────────────────────────── */

      .osce-bookmark-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 999px;
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
        padding: 6px 12px;
        color: var(--tx2);
        transition: all .15s;
        white-space: nowrap
      }

      .osce-bookmark-btn:hover {
        border-color: #f59e0b;
        color: #b45309;
        transform: translateY(-1px)
      }

      .osce-bookmark-btn.active {
        background: #fffbeb;
        border-color: #f59e0b;
        color: #b45309
      }

      .osce-notes-box {
        margin-bottom: 20px
      }

      .osce-notes-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px
      }

      .osce-notes-textarea {
        width: 100%;
        min-height: 75px;
        padding: 12px 14px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        font-size: 13px;
        line-height: 1.6;
        resize: vertical;
        font-family: inherit;
        box-sizing: border-box;
        transition: border-color .2s
      }

      .osce-notes-textarea:focus {
        outline: none;
        border-color: #f59e0b
      }

      .osce-notes-textarea::placeholder {
        color: var(--tx3);
        opacity: .6
      }

      .osce-notes-meta {
        margin-top: 6px;
        font-size: 11.5px;
        color: var(--tx3);
        min-height: 15px;
        transition: color .2s
      }

      .osce-notes-meta.saving { color: #f59e0b }
      .osce-notes-meta.saved { color: #16a34a }

      .osce-rating-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 12px 0 6px;
        border-top: 1px solid var(--bdr);
        margin-top: 8px
      }

      .osce-rating-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--tx3)
      }

      .osce-rating-btn {
        padding: 6px 14px;
        border-radius: 20px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: var(--tx2);
        transition: all .15s
      }

      .osce-rating-btn:hover {
        border-color: var(--accent)
      }

      .osce-rating-btn.easy.active {
        background: #dcfce7;
        border-color: #16a34a;
        color: #15803d
      }

      .osce-rating-btn.medium.active {
        background: #fef3c7;
        border-color: #d97706;
        color: #b45309
      }

      .osce-rating-btn.hard.active {
        background: #fee2e2;
        border-color: #dc2626;
        color: #b91c1c
      }

      .osce-badge {
        font-size: 10.5px;
        padding: 2px 8px;
        border-radius: 99px;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap
      }

      .osce-badge.done {
        background: #dcfce7;
        color: #15803d
      }

      .osce-badge.bookmarked {
        background: #fef3c733;
        color: #b45309;
        border: 1px solid #f59e0b44
      }

      .osce-badge.easy {
        background: #dcfce7;
        color: #15803d
      }

      .osce-badge.medium {
        background: #fef3c7;
        color: #b45309
      }

      .osce-badge.hard {
        background: #fee2e2;
        color: #b91c1c
      }

      .osce-filter-btn.active {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
      }

      .osce-stat:last-child {
        border-right: none
      }

      .osce-mark-header:hover {
        background: var(--bg2)
      }

      .osce-mark-section {
        margin-bottom: 14px
      }

      .osce-mark-section-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 6px
      }

      .osce-mark-item:last-child {
        border-bottom: 0
      }

      .osce-mark-check:checked {
        background: var(--accent);
        border-color: var(--accent);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px
      }

      .osce-mark-item label {
        cursor: pointer;
        flex: 1
      }

      .osce-score-text {
        font-size: 12px;
        color: var(--tx3);
        text-align: right
      }

      .osce-action-btn {
        flex: 1;
        min-width: 140px;
        padding: 13px 18px;
        border-radius: 12px;
        border: 0;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all .15s
      }

      .osce-action-btn.primary {
        background: linear-gradient(135deg, #7c3aed, #4f6ef7);
        color: #fff;
        box-shadow: 0 4px 14px #7c3aed33
      }

      .osce-action-btn.secondary {
        background: var(--bg2);
        color: var(--tx);
        border: 1.5px solid var(--bdr)
      }

      .osce-action-btn:hover {
        transform: translateY(-1px);
        opacity: .92
      }

      /* Pre-built station mode cards */

      .osce-pb-card:hover .osce-pb-focus,
      .osce-pb-card:hover .osce-pb-arrow {
        color: #fff9
      }

      .osce-pb-card:hover .osce-pb-num {
        background: #fff2;
        color: #fff
      }

      .osce-pb-arrow {
        grid-row: span 2;
        font-size: 16px;
        color: var(--tx3);
        margin-left: 8px
      }

      .osce-brief-box {
        font-size: 14.5px;
        line-height: 1.85;
        color: var(--tx);
        padding: 20px 22px;
        background: var(--bg);
        border-radius: 12px;
        border: 1.5px solid var(--bdr);
        margin-bottom: 20px;
        border-left: 4px solid var(--accent)
      }

      .osce-brief-box p:last-child {
        margin-bottom: 0
      }

      .osce-guidelines-box {
        background: linear-gradient(135deg, #1e3a8a11, #0891b211);
        border: 1.5px solid #1e3a8a33;
        border-radius: 12px;
        padding: 14px 16px;
        margin: 14px 0
      }

      .osce-guidelines-title {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #1e3a8a;
        margin-bottom: 8px
      }

      .osce-guidelines-text {
        font-size: 13px;
        line-height: 1.65;
        color: var(--tx)
      }

      /* ── RICH TEXT FORMATTER BADGES (used by fmt() function) ─────────────── */
      .step-badge {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, var(--ac), var(--ac2));
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 99px;
        letter-spacing: .06em;
        text-transform: uppercase;
        margin-right: 4px;
        vertical-align: middle;
        box-shadow: 0 1px 4px rgba(37, 99, 235, .25);
      }

      [data-theme=dark] .warn-ref {
        background: #3b0f0f;
        color: #f87171;
        border-color: #7f1d1d
      }

      [data-theme=dark] .g-ref {
        background: #1e3a5f;
        color: #93c5fd;
        border-color: #1d4ed8
      }

      /* ── OSCE TOPIC LABELS ────────────────────────────────────────────────── */
      .osce-lbl {
        color: var(--cy)
      }

      .osce-txt {
        color: var(--tx2);
        font-size: 14.5px;
        line-height: 1.9;
        padding: 4px 0
      }

      /* ── DRUG CARD (counselling-appendix) ────────────────────────────────── */
      .drug-card .sbox-h {
        background: linear-gradient(135deg, #fffbeb, #fef3c7);
        color: #92400e
      }

      [data-theme=dark] .drug-card .sbox-h {
        background: linear-gradient(135deg, #2c1e0a, #3b2008);
        color: #fcd34d
      }

      /* ── FONT SIZE VARIANTS ───────────────────────────────────────────────── */
      body.fs-sm {
        font-size: 13.5px
      }

      body.fs-lg {
        font-size: 17.5px
      }

      body.fs-sm .sbox-body li,
      body.fs-sm .drug-txt,
      body.fs-sm .drug-block {
        font-size: 13px
      }

      body.fs-lg .sbox-body li,
      body.fs-lg .drug-txt,
      body.fs-lg .drug-block {
        font-size: 16px
      }

      body.fs-sm .tp-title {
        font-size: 24px
      }

      body.fs-lg .tp-title {
        font-size: 34px
      }

      #fsBtn {
        min-width: 38px
      }

      /* ── COUNSELLING SEARCH BAR ──────────────────────────────────────────── */
      .counsel-search-wrap {
        position: relative;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
      }

      .counsel-search-wrap svg {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--tx3);
        pointer-events: none;
        flex-shrink: 0;
      }

      .counsel-search-wrap input {
        width: 100%;
        padding: 13px 44px 13px 46px;
        border: 2px solid var(--bdr);
        border-radius: var(--r);
        background: var(--bg2);
        color: var(--tx);
        font: 15px var(--font);
        outline: 0;
        box-shadow: var(--shadow);
        transition: .2s;
      }

      .counsel-search-wrap input:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 4px var(--acl), var(--shadow)
      }

      .counsel-search-wrap input::placeholder {
        color: var(--tx3)
      }

      #csi-clear {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        color: var(--tx3);
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        transition: .15s;
      }

      #csi-clear:hover {
        background: var(--rdl);
        color: var(--rd);
        border-color: var(--rdb)
      }

      #csr {
        margin-bottom: 8px
      }

      .counsel-results {
        display: flex;
        flex-direction: column;
        gap: 8px
      }

      .counsel-result-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 14px 18px;
        cursor: pointer;
        transition: all .15s;
        box-shadow: var(--shadow);
      }

      .counsel-result-card:hover {
        border-color: var(--ac);
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
      }

      .counsel-result-drug {
        font-size: 15px;
        font-weight: 700;
        color: var(--tx);
        margin-bottom: 5px
      }

      .counsel-result-meta {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 6px
      }

      .counsel-result-group {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        background: var(--acl);
        color: var(--ac);
        padding: 2px 8px;
        border-radius: 99px;
      }

      .counsel-result-topic {
        font-size: 10.5px;
        font-weight: 600;
        background: var(--bg4);
        color: var(--tx3);
        padding: 2px 8px;
        border-radius: 99px;
      }

      .counsel-result-snippet {
        font-size: 13px;
        color: var(--tx3);
        line-height: 1.55
      }

      .counsel-no-results {
        text-align: center;
        padding: 40px 20px;
        color: var(--tx3)
      }

      .counsel-no-results p {
        font-size: 14px;
        margin-top: 8px
      }

      /* ── Counselling Drug Detail Modal ── */
      #counsel-drug-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 9999;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        animation: cdm-fade .2s ease;
      }

      #counsel-drug-modal.open {
        display: flex
      }

      @keyframes cdm-fade {
        from {
          opacity: 0
        }

        to {
          opacity: 1
        }
      }

      .cdm-inner {
        background: var(--bg);
        width: 100%;
        max-width: 780px;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 22px 22px 0 0;
        padding: 28px 28px 40px;
        position: relative;
        animation: cdm-slide .25s cubic-bezier(.32, 1, .32, 1);
      }

      @keyframes cdm-slide {
        from {
          transform: translateY(60px);
          opacity: .5
        }

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

      .cdm-close {
        position: absolute;
        top: 18px;
        right: 18px;
        background: var(--bg3);
        border: 1.5px solid var(--bdr);
        border-radius: 9px;
        padding: 6px 14px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: var(--tx2);
        transition: .15s;
      }

      .cdm-close:hover {
        background: var(--rdl);
        color: var(--rd);
        border-color: var(--rdb)
      }

      .cdm-handle {
        width: 40px;
        height: 4px;
        background: var(--bdr);
        border-radius: 99px;
        margin: 0 auto 22px
      }

      .cdm-group {
        display: inline-block;
        background: var(--acl);
        color: var(--ac);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        padding: 3px 12px;
        border-radius: 99px;
        margin-bottom: 10px;
      }

      .cdm-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--tx);
        margin: 0 0 16px;
        padding-right: 64px;
        line-height: 1.3;
      }

      .cdm-body {
        font-size: 14.5px;
        line-height: 1.85;
        color: var(--tx2);
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 18px 20px;
        margin-bottom: 18px;
      }

      .cdm-topic-btn {
        display: block;
        width: 100%;
        margin-top: 12px;
        background: linear-gradient(135deg, var(--ac), var(--ac2));
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: .15s;
        letter-spacing: .02em;
      }

      .cdm-moa {
        background: linear-gradient(135deg, #e8f4fd, #d4eef9);
        border: 1.5px solid #90cdf4;
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 16px;
      }

      body.dark .drug-moa-block {
        background: linear-gradient(135deg, #1a2d40, #1e3a5f);
        border-color: #2b4d70;
      }

      body.dark .drug-moa-hdr {
        color: #63b3ed;
      }

      body.dark .drug-moa-text {
        color: #e2e8f0;
      }

      .cdm-moa-hdr {
        font-size: 13px;
        font-weight: 800;
        color: #2b6cb0;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 8px;
      }

      .cdm-moa-text {
        font-size: 14.5px;
        line-height: 1.8;
        color: #2d3748;
        margin: 0;
      }

      @media(prefers-color-scheme:dark) {
        .cdm-moa {
          background: linear-gradient(135deg, #1a2d40, #1e3a5f);
          border-color: #2b4d70;
        }

        .cdm-moa-hdr {
          color: #63b3ed;
        }

        .cdm-moa-text {
          color: #e2e8f0;
        }
      }

      body.dark .cdm-moa {
        background: linear-gradient(135deg, #1a2d40, #1e3a5f);
        border-color: #2b4d70;
      }

      body.dark .cdm-moa-hdr {
        color: #63b3ed;
      }

      body.dark .cdm-moa-text {
        color: #e2e8f0;
      }

      .cdm-topic-btn:hover {
        opacity: .9;
        transform: translateY(-1px)
      }

      /* ════════════════════════════════════════════════════════════
   CLEAN PAPER THEME — Warm cream minimal study aesthetic
   ════════════════════════════════════════════════════════════ */

      /* ── TYPOGRAPHY ──────────────────────────────────────────── */

      /* Dark mode — deep sepia */

      /* ── BODY — paper texture via subtle noise ───────────────── */
      body {
        font-family: var(--font);
        background: var(--bg);
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
        color: var(--tx);
        font-size: 15px;
        line-height: 1.75;
        -webkit-font-smoothing: antialiased;
        min-height: 100vh;
      }

      /* ── NAVBAR ─────────────────────────────────────────────── */
      .nav {
        background: rgba(244, 247, 252, .9);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border-bottom: 1px solid var(--bdr);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 2px 18px rgba(29, 78, 216, .07);
        padding: 0 28px;
        gap: 14px;
        height: var(--nav-h);
      }

      /* ── LOGO ─────────────────────────────────────────────── */
      .logo .logo-icon {
        width: 32px;
        height: 32px;
        border-radius: 11px;
        background: var(--grad-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(30, 58, 138, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
      }

      .logo-text {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -.3px;
        background: var(--grad-ink);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* ── NAV SEARCH ──────────────────────────────────────── */
      .search-wrap input {
        background: var(--bg3);
        border: 1.5px solid var(--bdr);
        border-radius: 10px;
        font-size: 13.5px;
        color: var(--tx);
        box-shadow: inset 0 1px 3px rgba(60, 40, 10, .05);
        transition: all .2s;
      }

      .search-wrap input:focus {
        border-color: var(--ac);
        background: var(--bg2);
        box-shadow: 0 0 0 3px rgba(3, 105, 161, .12);
      }

      .search-wrap input::placeholder {
        color: var(--tx3);
      }

      /* ── NAV BUTTONS ─────────────────────────────────────── */
      .nbtn {
        border-radius: 9px;
        font-size: 12px;
        font-weight: 600;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        transition: all .18s;
        box-shadow: 0 1px 3px rgba(60, 40, 10, .05);
      }

      .nbtn:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
        box-shadow: 0 2px 8px rgba(3, 105, 161, .12);
      }

      .nbtn.on {
        background: var(--grad-sage);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 10px rgba(74, 124, 89, .3);
      }

      /* ── SIDEBAR ─────────────────────────────────────────── */
      .sidebar {
        background: var(--bg2);
        border-right: 1px solid var(--bdr);
        box-shadow: 2px 0 12px rgba(60, 40, 10, .04);
      }

      .sb-label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--tx3);
        padding: 18px 14px 5px;
      }

      .sb-label+.sb-label,
      .sb-item~.sb-label {
        margin-top: 4px;
        border-top: 1px solid var(--bdr);
        padding-top: 14px;
      }

      .sb-item .cnt {
        font-size: 10px;
        font-weight: 700;
        background: var(--bg4);
        color: var(--tx3);
        border-radius: 99px;
        padding: 2px 7px;
        margin-left: auto;
      }

      .sb-item .em {
        font-size: 15px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
      }

      /* ── HERO ─────────────────────────────────────────────── */
      .hero {
        text-align: center;
        padding: 52px 0 20px;
        position: relative;
      }

      .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 560px;
        height: 300px;
        background: radial-gradient(ellipse, rgba(29, 78, 216, .08) 0%, transparent 70%);
        pointer-events: none;
      }

      .hero h1 {
        font-family: var(--serif);
        font-size: 42px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -.5px;
        line-height: 1.1;
        margin-bottom: 10px;
        color: var(--tx);
        background: none;
        -webkit-text-fill-color: var(--tx);
      }

      .hero h1 em,
      .hero h1 span {
        background: var(--grad-ink);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-style: normal;
      }

      .hero p {
        color: var(--tx2);
        font-size: 15px;
        line-height: 1.7;
        max-width: 480px;
        margin: 0 auto;
      }

      /* ── HOME SEARCH ──────────────────────────────────────── */
      .home-search {
        max-width: 520px;
        margin: 26px auto 0;
      }

      .home-search input {
        border-radius: 12px;
        padding: 15px 130px 15px 50px;
        font-size: 15px;
        font-family: var(--font);
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        box-shadow: var(--shadow-lg), inset 0 1px 3px rgba(60, 40, 10, .04);
        transition: all .22s;
      }

      .home-search input:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px rgba(3, 105, 161, .12), var(--shadow-lg);
        outline: none;
      }

      .home-search button {
        border-radius: 9px;
        padding: 9px 20px;
        font-size: 12.5px;
        font-weight: 700;
        font-family: var(--font);
        letter-spacing: .04em;
        text-transform: uppercase;
        background: var(--grad-ink);
        color: #fff;
        border: none;
        box-shadow: 0 3px 12px rgba(3, 105, 161, .25);
        transition: all .18s;
      }

      /* ── SYSTEM CARDS ─────────────────────────────────────── */
      .sys-grid {
        gap: 12px;
        margin: 32px auto;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      }

      .sys-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 16px;
        padding: 22px 14px 18px;
        text-align: center;
        cursor: pointer;
        box-shadow: var(--shadow);
        transition: all .22s;
        position: relative;
        overflow: hidden;
      }

      .sys-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-ink);
        opacity: 0;
        transition: opacity .2s;
      }

      .sys-card:hover {
        box-shadow: var(--shadow-xl);
        transform: translateY(-5px);
        border-color: var(--ac);
      }

      .sys-card:hover::before {
        opacity: 1;
      }

      .sys-card .em {
        font-size: 30px;
        display: block;
        margin-bottom: 10px;
        transition: transform .22s;
      }

      .sys-card:hover .em {
        transform: scale(1.14) translateY(-2px);
      }

      .sys-card h3 {
        font-size: 13px;
        font-weight: 600;
        color: var(--tx);
        line-height: 1.35;
      }

      .sys-card p {
        font-size: 11.5px;
        color: var(--tx3);
        margin-top: 3px;
        font-weight: 400;
      }

      /* ── SYSTEM PAGE HEADER ───────────────────────────────── */
      .sys-header {
        padding: 22px 0 22px;
        border-bottom: 1.5px solid var(--bdr);
        margin-bottom: 26px;
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .sys-header .em {
        font-size: 36px;
        width: 58px;
        height: 58px;
        background: var(--bg3);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow);
        flex-shrink: 0;
      }

      .sys-header h1 {
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -.3px;
        margin-bottom: 3px;
        color: var(--tx);
      }

      .sys-header p {
        font-size: 13.5px;
        color: var(--tx2);
      }

      /* ── TOPIC CARDS ──────────────────────────────────────── */
      .topic-grid {
        gap: 8px;
      }

      .topic-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 12px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        box-shadow: var(--shadow);
        transition: all .18s;
      }

      .topic-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
        border-color: var(--ac);
      }

      .topic-card .arr {
        color: var(--tx3);
        font-size: 13px;
        transition: all .15s;
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--bg4);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .topic-card:hover .arr {
        background: var(--ac);
        color: #fff;
        transform: translateX(2px);
      }

      /* ── BACK BUTTON ──────────────────────────────────────── */

      .back:hover {
        color: var(--ac);
        border-color: var(--ac);
        background: var(--acl);
      }

      /* ── TOPIC TITLE ──────────────────────────────────────── */
      .tp-title {
        font-family: var(--serif);
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.4px;
        margin-bottom: 8px;
        line-height: 1.2;
        color: var(--tx);
      }

      /* ── SECTION BOXES ────────────────────────────────────── */
      .sbox {
        margin-bottom: 18px;
        border-radius: 13px;
        border: 1.5px solid var(--bdr);
        overflow: hidden;
        background: var(--bg2);
        box-shadow: var(--shadow);
        transition: box-shadow .15s;
      }

      .sbox:hover {
        box-shadow: var(--shadow-lg);
      }

      .sbox-h {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 13px 20px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .01em;
        border-bottom: 1px solid rgba(0, 0, 0, .07);
        background: var(--bg3);
      }

      .sbox-h .em {
        font-size: 17px;
      }

      .sbox-body li {
        padding: 11px 22px 11px 48px;
        position: relative;
        color: var(--tx2);
        border-bottom: 1px solid var(--bg4);
        font-size: 14px;
        line-height: 1.85;
        list-style: none;
        transition: background .12s;
      }

      .sbox-body li:hover {
        background: rgba(156, 74, 26, .03);
      }

      /* ── SECTION COLOUR VARIANTS ──────────────────────────── */
      .s-def .sbox-h {
        background: var(--bg3);
        color: var(--tx2);
      }

      .s-tx {
        border-color: rgba(74, 124, 89, .35);
      }

      .s-tx .sbox-h {
        background: linear-gradient(135deg, var(--gnl), rgba(74, 124, 89, .04));
        color: var(--gn);
      }

      .s-tx .sbox-body li::before {
        background: var(--gn);
      }

      .s-rf {
        border-color: rgba(155, 44, 44, .3);
      }

      .s-rf .sbox-h {
        background: linear-gradient(135deg, var(--rdl), rgba(155, 44, 44, .04));
        color: var(--rd);
      }

      .s-rf .sbox-body li::before {
        background: var(--rd);
      }

      .s-dx .sbox-h {
        background: linear-gradient(135deg, var(--acl), rgba(156, 74, 26, .04));
        color: var(--ac);
      }

      .s-cau .sbox-h {
        background: linear-gradient(135deg, var(--pul), rgba(107, 79, 160, .04));
        color: var(--pu);
      }

      .s-sym .sbox-h {
        background: linear-gradient(135deg, var(--aml), rgba(138, 106, 0, .04));
        color: var(--am);
      }

      .s-tx2 .sbox-h {
        background: var(--bg3);
        color: var(--tx2);
      }

      .s-cx .sbox-h {
        background: linear-gradient(135deg, var(--aml), rgba(138, 106, 0, .04));
        color: var(--am);
      }

      .s-ref .sbox-h {
        background: linear-gradient(135deg, var(--pul), rgba(107, 79, 160, .04));
        color: var(--pu);
      }

      .s-ext .sbox-h {
        background: var(--bg3);
        color: var(--tx3);
      }

      .s-osce {
        border-color: rgba(46, 110, 122, .35);
      }

      .s-osce .sbox-h {
        background: linear-gradient(135deg, #e6f6f8, rgba(46, 110, 122, .04));
        color: var(--cy);
      }

      .s-osce .sbox-body li::before {
        background: var(--cy);
      }

      .s-req {
        border-color: rgba(138, 106, 0, .3);
      }

      .s-req .sbox-h {
        background: linear-gradient(135deg, var(--aml), rgba(138, 106, 0, .05));
        color: var(--am);
      }

      .s-req .sbox-body li::before {
        background: var(--am);
      }

      .s-proc {
        border-color: rgba(3, 105, 161, .25);
      }

      .s-proc .sbox-h {
        background: linear-gradient(135deg, var(--acl), rgba(156, 74, 26, .04));
        color: var(--ac);
      }

      .s-proc .sbox-body li::before {
        background: var(--ac);
      }

      .s-abbr {
        border-color: rgba(107, 79, 160, .25);
      }

      .s-abbr .sbox-h {
        background: linear-gradient(135deg, var(--pul), rgba(107, 79, 160, .04));
        color: var(--pu);
      }

      .s-abbr .sbox-body li::before {
        background: var(--pu);
      }

      .s-mon {
        border-color: rgba(46, 110, 122, .3);
      }

      .s-mon .sbox-h {
        background: linear-gradient(135deg, var(--cyl), rgba(46, 110, 122, .04));
        color: var(--cy);
      }

      /* ── DRUG / LABEL BLOCKS ──────────────────────────────── */
      .drug-block {
        padding: 13px 22px 13px 20px;
        border-bottom: 1px solid var(--bg4);
        font-size: 14px;
        line-height: 1.85;
      }

      .drug-block:last-child {
        border-bottom: none;
      }

      .drug-lbl {
        font-weight: 700;
        color: var(--ac);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 7px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .drug-lbl::before {
        content: '▸';
        opacity: .5;
        font-size: 10px;
      }

      .drug-txt {
        color: var(--tx2);
        font-size: 14px;
        line-height: 1.85;
        padding-left: 12px;
      }

      .item-bullets {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
      }

      .item-bullets li {
        padding: 7px 0 7px 26px;
        position: relative;
        border-bottom: 1px solid var(--bg4);
        color: var(--tx2);
        font-size: 13.5px;
        line-height: 1.8;
      }

      .item-bullets li:last-child {
        border-bottom: none;
      }

      .item-bullets li::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 17px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--ac);
        opacity: .5;
      }

      /* ── GROUP CARDS ──────────────────────────────────────── */
      .group-card {
        border: 1.5px solid var(--ac);
        border-radius: 10px;
        margin: 12px 0 4px;
        overflow: hidden;
      }

      .group-card-hdr {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        font-weight: 700;
        font-size: .77rem;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--ac);
        background: var(--acl);
        border-bottom: 1.5px solid var(--ac);
      }

      .group-card-body {
        padding: 7px 9px;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }

      /* ── TL;DR ────────────────────────────────────────────── */
      .tldr {
        margin-bottom: 16px;
        border-radius: 12px;
        border: 1.5px solid var(--bdr);
        overflow: hidden;
        background: var(--bg2);
        box-shadow: var(--shadow);
      }

      .tldr summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        cursor: pointer;
        font-weight: 700;
        font-size: 14px;
        background: linear-gradient(135deg, var(--acl), rgba(192, 124, 62, .06));
        color: var(--ac);
      }

      .tldr summary::-webkit-details-marker {
        display: none;
      }

      .tldr-body {
        padding: 14px 20px;
        font-size: 14.5px;
        color: var(--tx2);
        line-height: 1.8;
      }

      /* ── RELATED CHIPS ────────────────────────────────────── */
      .related-section {
        margin-top: 22px;
        padding-top: 16px;
        border-top: 1px solid var(--bdr);
      }

      .related-section h4 {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--tx3);
        margin-bottom: 10px;
      }

      .related-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }

      .related-chip {
        padding: 5px 13px;
        border-radius: 99px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--tx2);
        cursor: pointer;
        transition: all .15s;
        box-shadow: 0 1px 3px rgba(60, 40, 10, .05);
      }

      .related-chip:hover {
        background: var(--acl);
        border-color: var(--ac);
        color: var(--ac);
        transform: translateY(-1px);
      }

      /* ── MONITORING ───────────────────────────────────────── */
      .mon-block {
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--bdr);
      }

      .mon-block:last-child {
        border: 0;
        margin: 0;
        padding: 0;
      }

      .mon-title {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ac);
        margin-bottom: 8px;
      }

      .mon-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 8px;
      }

      .mon-col h4 {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--tx3);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 6px;
      }

      .mon-col ul {
        list-style: none;
        padding: 0;
      }

      .mon-col li {
        font-size: 13.5px;
        padding: 3px 0 3px 16px;
        color: var(--tx2);
        position: relative;
        border: 0;
      }

      .mon-col li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        color: var(--gn);
        font-size: 11px;
        font-weight: 700;
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
      }

      .mon-col p {
        font-size: 13.5px;
        line-height: 1.75;
        color: var(--tx2);
      }

      .mon-alert {
        background: var(--rdl);
        border: 1px solid var(--rdb);
        border-radius: 9px;
        padding: 9px 13px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--rd);
        margin: 8px 0;
      }

      .mon-link {
        display: inline-block;
        margin-top: 6px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ac);
        text-decoration: none;
      }

      .mon-link:hover {
        text-decoration: underline;
      }

      /* ── SADMANS CARD ─────────────────────────────────────── */
      .sadmans-card {
        background: var(--grad-ink);
        color: #fff;
        border-radius: 14px;
        padding: 18px 22px;
        margin: 0 0 14px;
        box-shadow: 0 6px 24px rgba(3, 105, 161, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
      }

      /* ── INTERACTION CHECKER ──────────────────────────────── */

      .ic-input {
        flex: 1;
        min-width: 160px;
        padding: 11px 15px;
        border: 1.5px solid var(--bdr);
        border-radius: 10px;
        background: var(--bg3);
        color: var(--tx);
        font: 14px var(--font);
        outline: 0;
        transition: .2s;
      }

      .ic-input:focus {
        border-color: var(--pu);
        box-shadow: 0 0 0 3px rgba(107, 79, 160, .12);
        background: var(--bg2);
      }

      .ic-swap:hover {
        background: var(--acl);
        border-color: var(--ac);
      }

      .ic-clear {
        padding: 8px 14px;
        border-radius: 99px;
        border: 1.5px solid var(--bdr);
        background: var(--bg3);
        color: var(--tx3);
        font: 12px var(--font);
        cursor: pointer;
        transition: .15s;
      }

      .ic-clear:hover {
        border-color: var(--rd);
        color: var(--rd);
      }

      .ic-card:hover {
        box-shadow: var(--shadow-lg);
      }

      .sev-contraindicated {
        background: var(--rdl);
        color: #7d1a1a;
        border: 1px solid var(--rdb);
      }

      .sev-major {
        background: #fff3e6;
        color: #8a4000;
        border: 1px solid #f5c08a;
      }

      .sev-moderate {
        background: var(--aml);
        color: var(--am);
        border: 1px solid #e8ce80;
      }

      .sev-minor {
        background: var(--gnl);
        color: var(--gn);
        border: 1px solid var(--gnb);
      }

      .ic-filt-btn:hover:not(.on) {
        border-color: var(--ac);
        color: var(--ac);
      }

      /* ── CALCULATORS ──────────────────────────────────────── */
      .hub-calc-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 13px;
        margin-bottom: 10px;
        overflow: hidden;
        transition: .15s;
        box-shadow: var(--shadow);
      }

      .hub-calc-card:hover {
        box-shadow: var(--shadow-lg);
      }

      .hub-calc-card[open] {
        border-color: var(--ac);
      }

      .hub-calc-card summary {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        cursor: pointer;
        font-weight: 600;
        font-size: 14px;
        color: var(--tx);
        list-style: none;
        user-select: none;
      }

      .hub-calc-card summary::-webkit-details-marker {
        display: none;
      }

      .hub-calc-card[open] summary {
        background: var(--acl);
        color: var(--ac);
      }

      .hub-calc-sub {
        font-size: 12px;
        font-weight: 400;
        color: var(--tx3);
        margin-left: auto;
      }

      .hub-calc-body {
        padding: 16px 18px;
        border-top: 1px solid var(--bdr);
      }

      .c-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
      }

      .c-row label {
        font-size: 13px;
        font-weight: 500;
        color: var(--tx2);
      }

      .c-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .c-inp {
        width: 100%;
        padding: 8px 11px;
        border: 1.5px solid var(--bdr);
        border-radius: 8px;
        font: 13.5px var(--font);
        color: var(--tx);
        background: var(--bg3);
        outline: 0;
        transition: .2s;
      }

      .c-inp:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px rgba(3, 105, 161, .12);
      }

      .c-sfx {
        font-size: 12px;
        color: var(--tx3);
        white-space: nowrap;
      }

      .c-go {
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 12px;
        background: var(--grad-ink);
        color: #fff;
        border: none;
        border-radius: 9px;
        font: 600 13.5px var(--font);
        cursor: pointer;
        transition: .15s;
        box-shadow: 0 3px 10px rgba(156, 74, 26, .22);
      }

      .c-go:hover {
        opacity: .9;
        transform: translateY(-1px);
      }

      .c-res {
        display: none;
        margin-top: 12px;
        padding: 12px 15px;
        border-radius: 9px;
        border: 2px solid var(--ac);
        background: var(--acl);
        font-size: 13.5px;
        line-height: 1.8;
        color: var(--tx);
      }

      /* ── QUIZ MODE ────────────────────────────────────────── */
      .qz-wrap {
        max-width: 640px;
        padding: 0 4px;
      }

      .qz-hero {
        padding: 20px 0 14px;
        text-align: center;
      }

      .qz-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }

      .qz-chip {
        padding: 6px 13px;
        border-radius: 99px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        color: var(--tx2);
        transition: all .15s;
      }

      .qz-chip.active {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac);
        box-shadow: 0 2px 8px rgba(156, 74, 26, .22);
      }

      .qz-chip:hover:not(.active) {
        border-color: var(--ac);
        color: var(--ac);
      }

      .qz-type-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 20px;
      }

      .qz-tchip {
        padding: 5px 12px;
        border-radius: 99px;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        font-size: 12px;
        cursor: pointer;
        color: var(--tx3);
        transition: .15s;
      }

      .qz-tchip.active {
        background: var(--pu);
        color: #fff;
        border-color: var(--pu);
      }

      .qz-got {
        color: var(--gn);
        font-weight: 700;
      }

      .qz-miss {
        color: var(--rd);
        font-weight: 700;
      }

      .qz-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 24px;
        box-shadow: var(--shadow-lg);
      }

      .qz-sys-tag {
        padding: 4px 11px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
      }

      .qz-type-tag {
        padding: 4px 11px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 600;
        background: var(--bg4);
        color: var(--tx2);
        border: 1px solid var(--bdr);
      }

      .qz-btn-got {
        flex: 1;
        padding: 12px;
        background: var(--grad-sage);
        color: #fff;
        border: 0;
        border-radius: 10px;
        font: 700 14.5px var(--font);
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(74, 124, 89, .25);
        transition: .15s;
      }

      .qz-btn-got:hover {
        background: #047857;
        opacity: .88;
        transform: translateY(-1px);
      }

      .qz-btn-miss {
        flex: 1;
        padding: 12px;
        background: var(--bg3);
        color: var(--tx2);
        border: 1.5px solid var(--bdr);
        border-radius: 10px;
        font: 700 14.5px var(--font);
        cursor: pointer;
        transition: .15s;
      }

      .qz-btn-miss:hover {
        background: var(--bdr);
      }

      .qz-sum-bar {
        height: 10px;
        background: var(--bg4);
        border-radius: 99px;
        overflow: hidden;
        max-width: 300px;
        margin: 0 auto 8px;
      }

      .qz-sum-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 22px;
        flex-wrap: wrap;
      }

      /* ── OSCE STATION GENERATOR ───────────────────────────── */

      .osce-cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 9px;
        margin: 18px 0 22px;
      }

      .osce-cat-btn {
        padding: 11px 10px;
        border-radius: 11px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--tx);
        text-align: center;
        transition: all .15s;
        line-height: 1.3;
        font: 600 12.5px var(--font);
      }

      .osce-cat-btn:hover,
      .osce-cat-btn.selected {
        border-color: var(--ac);
        background: var(--acl);
        color: var(--ac);
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(3, 105, 161, .15);
      }

      .osce-station {
        background: var(--bg2);
        border-radius: 16px;
        border: 1.5px solid var(--bdr);
        overflow: hidden;
        margin-bottom: 18px;
        box-shadow: var(--shadow-lg);
        animation: fadeIn .3s ease;
      }

      .osce-type-badge {
        padding: 4px 11px;
        border-radius: 99px;
        font-size: 11.5px;
        font-weight: 700;
        background: var(--grad-ink);
        color: #fff;
        white-space: nowrap;
      }

      .osce-time-badge {
        padding: 4px 11px;
        border-radius: 99px;
        font-size: 11.5px;
        font-weight: 700;
        background: var(--bg4);
        color: var(--tx2);
        border: 1px solid var(--bdr);
        white-space: nowrap;
      }

      .osce-topic-label {
        font-size: 12.5px;
        color: var(--tx3);
        margin-left: auto;
      }

      .osce-scenario {
        font-size: 14.5px;
        line-height: 1.8;
        color: var(--tx);
        white-space: pre-line;
        padding: 14px 16px;
        background: var(--bg3);
        border-radius: 10px;
        border: 1px solid var(--bdr);
        margin-bottom: 18px;
      }

      /* ── DDI BADGES ───────────────────────────────────────── */
      .ddi-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 12px;
        padding: 15px 18px;
        margin-bottom: 10px;
        box-shadow: var(--shadow);
        transition: .15s;
      }

      .ddi-card:hover {
        box-shadow: var(--shadow-lg);
      }

      .ddi-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
      }

      .ddi-major {
        background: var(--rdl);
        color: #7d1a1a;
        border: 1px solid var(--rdb);
      }

      .ddi-moderate {
        background: var(--aml);
        color: var(--am);
        border: 1px solid #e8ce80;
      }

      .ddi-minor {
        background: var(--gnl);
        color: var(--gn);
        border: 1px solid var(--gnb);
      }

      /* ── QREV BANNER ──────────────────────────────────────── */
      #qrev-banner {
        display: none;
      }

      body.qrev.view-topic #qrev-banner {
        display: block;
        background: var(--grad-sage);
        color: #fff;
        text-align: center;
        font-weight: 700;
        font-size: .95rem;
        padding: 13px 22px;
        border-radius: 12px;
        margin: 18px 28px 0;
        letter-spacing: .01em;
        box-shadow: 0 4px 14px rgba(74, 124, 89, .25);
      }

      /* ── CREDIT FOOTER ────────────────────────────────────── */

      .credit-card {
        display: inline-block;
        background: var(--bg2);
        border-radius: 14px;
        padding: 18px 30px;
        box-shadow: var(--shadow);
        max-width: 520px;
        border: 1.5px solid var(--bdr);
      }

      /* ── SEARCH DISC ──────────────────────────────────────── */
      .search-disc {
        font-size: 12px;
        color: var(--tx3);
        margin-top: 8px;
        padding: 7px 11px;
        background: var(--aml);
        border-radius: 8px;
        border-left: 3px solid var(--am);
      }

      /* ── PAGE TRANSITIONS ─────────────────────────────────── */

      .page.active {
        display: block;
      }

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

        to {
          opacity: 1;
          transform: none;
        }
      }

      /* ── SCROLLBAR ────────────────────────────────────────── */
      ::-webkit-scrollbar {
        width: 4px;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        background: var(--bdr2);
        border-radius: 9px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--ac);
      }

      /* ── FOCUS ────────────────────────────────────────────── */
      :focus-visible {
        outline: 2px solid var(--ac);
        outline-offset: 2px;
        border-radius: 4px;
      }

      /* ── LAYOUT ───────────────────────────────────────────── */

      .main {
        flex: 1;
        min-width: 0;
        padding: 32px 40px 48px;
        max-width: 960px;
      }

      .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(30, 26, 20, .5);
        z-index: 90;
        backdrop-filter: blur(2px);
      }

      /* ── RESPONSIVE ───────────────────────────────────────── */
      @media (max-width: 900px) {
        .main {
          padding: 20px 20px 80px;
        }

        .sys-grid {
          grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        }
      }

      @media (max-width: 768px) {

        .nav {
          padding: 0 14px;
          gap: 8px;
        }

        .logo-text {
          display: none;
        }

        .search-wrap {
          max-width: none;
        }

        .nbtn span {
          display: none;
        }

        .nbtn {
          padding: 0 10px;
          gap: 0;
        }

        .menu-btn {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .sidebar {
          position: fixed;
          top: var(--nav-h);
          left: 0;
          bottom: 0;
          height: auto;
          z-index: 95;
          transform: translateX(-100%);
          box-shadow: var(--shadow-xl);
        }

        .sidebar.open {
          transform: none;
        }

        .overlay {
          display: block;
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s;
        }

        .overlay.open {
          opacity: 1;
          pointer-events: auto;
        }

        .layout {
          display: block;
        }

        .main {
          padding: 16px 14px 32px;
          max-width: 100%;
        }

        .tp-title {
          font-size: 24px;
        }

        .mon-grid {
          grid-template-columns: 1fr;
        }

        #qrev-banner {
          margin: 14px 14px 0;
          font-size: .88rem;
        }
      }

      .em {
        display: none;
      }

      .group-card-hdr::before {
        content: '';
        font-size: .88rem;
        display: none;
      }

      /* ── DEVELOPED FEATURE STYLES, cleaned into the main stylesheet ── */

      /* Clean Quiz Mode redesign */
      .qz-wrap.qz-clean {
        max-width: 980px;
        margin: 0 auto;
        padding: 10px 8px 48px;
      }

      .qz-clean .qz-hero {
        text-align: left;
        padding: 6px 0 18px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: end;
      }

      .qz-clean-title {
        font-family: var(--serif);
        font-size: 34px;
        margin: 0 0 6px;

        color: var(--tx);
      }

      .qz-clean-sub {
        font-size: 15px;
        margin: 0;
        color: var(--tx3);

      }

      .qz-clean-home {
        align-self: start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        font-weight: 700;
        cursor: pointer;
      }

      .qz-clean-panel {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 16px;
        padding: 16px;
        box-shadow: var(--shadow);
        margin-bottom: 18px;
      }

      .qz-clean-controls {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 12px;
        align-items: end;
      }

      .qz-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .qz-field span {
        font-size: 11px;

        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--tx3);
      }

      .qz-select {
        width: 100%;
        height: 44px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        color: var(--tx);
        padding: 0 12px;
        font: 600 14px var(--font);
        outline: none;
      }

      .qz-select:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px rgba(156, 74, 26, .12);
      }

      .qz-shuffle-btn {
        height: 44px;
        padding: 0 18px;
        border-radius: 10px;
        border: 0;
        background: var(--grad-ink);
        color: #fff;
        font: 800 14px var(--font);
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(156, 74, 26, .22);
      }

      .qz-progress-wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 14px;
      }

      .qz-progress-bar {
        height: 8px;
        background: var(--bg3);
        border-radius: 999px;
        overflow: hidden;
        margin: 0;
      }

      .qz-progress-fill {
        height: 100%;
        background: var(--grad-ink);
        border-radius: 999px;
        transition: width .5s cubic-bezier(.22,1,.36,1);
      }

      .qz-counter {
        font-size: 13px;
        color: var(--tx3);
        margin-bottom: 16px;
        text-align: right;
        margin: 0;
        font: 700 13px var(--font);
        white-space: nowrap;
      }

      .qz-score-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }

      .qz-score-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        font: 700 12px var(--font);
      }

      .qz-score-pill.good {
        color: var(--gn);
        background: var(--gnl);
        border-color: var(--gnb);
      }

      .qz-score-pill.miss {
        color: var(--rd);
        background: var(--rdl);
        border-color: var(--rdb);
      }

      .qz-card {
        border-radius: 20px;
        padding: 0;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }

      .qz-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 22px;
        border-bottom: 1px solid var(--bdr);
        background: linear-gradient(135deg, var(--bg2), var(--bg3));
      }

      .qz-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 13px;
        margin: 0;
      }

      .qz-sys-tag,
      .qz-type-tag {
        padding: 5px 10px;
        border-radius: 999px;
        font: 800 11.5px var(--font);
        letter-spacing: .02em;
      }

      .qz-card-body {
        padding: 26px 28px 28px;
      }

      .qz-topic {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--tx3);
        margin-bottom: 5px;
        font-weight: 700;
        margin: 0 0 10px;
        font: 800 12px var(--font);
      }

      .qz-question {
        font-size: 25px;
        font-weight: 750;
        color: var(--tx);
        line-height: 1.5;
        margin-bottom: 20px;
        font-family: var(--font);
        margin: 0 0 22px;
      }

      .qz-answer {
        margin-top: 18px;
        padding: 18px 18px 10px;
        background: var(--bg);
        border-radius: 14px;
        border: 1.5px solid var(--bdr);
      }

      .qz-answer::before {
        content: 'Answer';
        display: block;
        margin-bottom: 10px;
        font: 800 12px var(--font);
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--tx3);
      }

      .qz-ans-list {
        margin: 0;
        padding-left: 18px;
        padding: 0;
        list-style: none;
        column-count: 1;
      }

      .qz-ans-list li {
        margin-bottom: 7px;
        line-height: 1.6;
        color: var(--tx);
        font-size: 16px;
        position: relative;
        margin: 0;
        padding: 10px 0 10px 22px;
        border-bottom: 1px solid var(--bdr);
      }

      .qz-ans-list li:last-child {
        border-bottom: 0;
      }

      .qz-ans-list li::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 1.15em;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ac);
        opacity: .75;
      }

      .qz-actions {
        display: flex;
        gap: 12px;
        margin-top: 18px;
      }

      .qz-btn-got,
      .qz-btn-miss {
        flex: 1;
        min-height: 48px;
        border-radius: 12px;
        font: 800 15px var(--font);
        cursor: pointer;
      }

      .qz-btn-got {
        background: var(--grad-sage);
        color: #fff;
        border: 0;
      }

      .qz-btn-miss {
        background: var(--bg3);
        color: var(--tx2);
        border: 1.5px solid var(--bdr);
      }

      .qz-summary {
        text-align: center;
        padding: 42px 28px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
      }

      .qz-summary h2 {
        font-family: var(--font);
        font-size: 28px;
      }

      .qz-sum-icon {
        font-size: 3.5rem;
        margin-bottom: 12px;
        display: none;
      }

      .qz-sum-score {
        font-size: 44px;
        font-weight: 700;
        color: var(--ac);
        margin: 12px 0;
        font-family: var(--font);
      }

      .qz-sum-actions .qz-reveal-btn,
      .qz-sum-actions .qz-btn-miss {
        max-width: 220px;
      }

      body[data-theme="dark"] .qz-clean-home,
      body[data-theme="dark"] .qz-clean-panel,
      body[data-theme="dark"] .qz-card,
      body[data-theme="dark"] .qz-summary,
      body[data-theme="dark"] .qz-score-pill,
      body[data-theme="dark"] .qz-answer {
        background: #0d1c2a;
        border-color: #1e2d40;
        color: #f5efe6;
      }

      body[data-theme="dark"] .qz-card-top {
        background: #261f18;
        border-bottom-color: #1e2d40;
      }

      body[data-theme="dark"] .qz-select {
        background: #0a1628;
        color: #f5efe6;
        border-color: #1e3a52;
      }

      body[data-theme="dark"] .qz-tchip,
      body[data-theme="dark"] .qz-chip {
        background: #0d1c2a;
        color: #f5efe6;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .qz-question,
      body[data-theme="dark"] .qz-ans-list li,
      body[data-theme="dark"] .qz-summary h2 {
        color: #f5efe6;
      }

      body[data-theme="dark"] .qz-topic,
      body[data-theme="dark"] .qz-counter,
      body[data-theme="dark"] .qz-clean-sub,
      body[data-theme="dark"] .qz-field span,
      body[data-theme="dark"] .qz-answer::before {
        color: #93c5fd;
      }

      @media (max-width: 760px) {
        .qz-clean .qz-hero {
          grid-template-columns: 1fr;
        }

        .qz-clean-controls {
          grid-template-columns: 1fr;
        }

        .qz-progress-wrap {
          grid-template-columns: 1fr;
        }

        .qz-counter {
          text-align: left;
        }

        .qz-card-body {
          padding: 22px 20px 24px;
        }

        .qz-question {}

        .qz-actions {
          flex-direction: column;
        }
      }

      /* Clinical photo cards — only shown where a suitable open-license image is attached. */
      .clinical-panel {
        margin: 0 0 22px;
        border-radius: 16px;
        border: 1px solid var(--bdr);
        background: var(--bg2);
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
      }

      .clinical-panel .sbox-h {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, var(--acl), rgba(156, 74, 26, .08));
        color: var(--ac);
      }

      .clinical-note {
        font-size: 12px;

        font-weight: 600;
        color: var(--tx3);
      }

      .clinical-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--ac);
      }

      .clinical-source span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .clinical-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .72);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
      }

      .clinical-modal-inner {
        max-width: min(980px, 96vw);
        max-height: 92vh;
        overflow: auto;
        background: var(--bg2);
        color: var(--tx);
        border: 1px solid var(--bdr);
        border-radius: 18px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
      }

      .clinical-modal-img {
        display: block;
        width: 100%;
        max-height: 68vh;
        object-fit: contain;
        background: #111;
      }

      .clinical-modal-body {
        padding: 16px 18px 18px;
      }

      .clinical-modal-title {
        font-size: 19px;

        font-weight: 800;
        margin: 0 0 8px;
        color: var(--tx);
      }

      .clinical-modal-copy {
        font-size: 15px;

        color: var(--tx2);
        margin: 0 0 12px;
      }

      .clinical-modal-meta {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;

        color: var(--tx3);
      }

      .clinical-modal-meta a {
        color: var(--ac);
        font-weight: 800;
        text-decoration: none;
      }

      .clinical-modal-meta a:hover {
        text-decoration: underline
      }

      .clinical-close {
        font-size: 13px;
        position: sticky;
        top: 0;
        float: right;
        margin: 10px 10px -46px 0;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, .35);
        background: rgba(0, 0, 0, .55);
        color: #fff;
        border-radius: 999px;

        font-weight: 800;
        padding: 8px 12px;
        cursor: pointer;
      }

      body[data-theme="dark"] .clinical-panel,
      body[data-theme="dark"] .clinical-card,
      body[data-theme="dark"] .clinical-modal-inner {
        background: #0d1c2a;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .clinical-panel .sbox-h {
        background: #0f1e30;
        color: #f4f7fc;
      }

      body[data-theme="dark"] .clinical-title,
      body[data-theme="dark"] .clinical-modal-title {
        color: #f4f7fc;
      }

      body[data-theme="dark"] .clinical-look,
      body[data-theme="dark"] .clinical-modal-copy {
        color: #f5efe6;
      }

      body[data-theme="dark"] .clinical-note,
      body[data-theme="dark"] .clinical-modal-meta {
        color: #93c5fd;
      }

      body[data-theme="dark"] .clinical-source {
        background: #f5efe6;
        color: #0a1628;
        border-color: #f5efe6;
      }

      @media(max-width:700px) {
        .clinical-grid {
          grid-template-columns: 1fr
        }

        .clinical-note {
          display: none
        }
      }

      /* Make clinical thumbnails smaller and stop single-image topics from stretching too wide. */

      @media (max-width:640px) {
      }

      /* ── INHALER DEVICE GALLERY ─────────────────────────────────────────── */
      .ig-wrap {
        max-width: 1040px;
        padding: 0 4px 48px;
      }

      .ig-hero {
        padding: 24px 0 18px;
        border-bottom: 1px solid var(--bdr);
        margin-bottom: 20px;
      }

      .ig-hero h1 {
        font-family: var(--serif);
        font-size: 30px;
        margin: 0 0 6px;
        color: var(--tx);
      }

      .ig-hero p {
        font-size: 15px;
        color: var(--tx2);
        max-width: 820px;
        line-height: 1.55;
      }

      .ig-group-title {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tx3);
        margin: 26px 0 12px;
      }

      .ig-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 18px;
      }

      .ig-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .ig-fig {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 12px;
        border-bottom: 1px solid var(--bdr);
      }

      .ig-fig svg {
        width: 200px;
        height: 217px;
        display: block;
        overflow: visible;
      }

      .ig-body {
        padding: 14px 16px 16px;
      }

      .ig-name {
        font-weight: 800;
        font-size: 15px;
        color: var(--tx);
        line-height: 1.3;
        margin-bottom: 3px;
      }

      .ig-type {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--accent, #1f6fb2);
        margin-bottom: 8px;
      }

      .ig-feature {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--tx);
        background: var(--bg3);
        border-radius: 8px;
        padding: 7px 10px;
        margin-bottom: 9px;
        line-height: 1.4;
      }

      .ig-feature-dot {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #185fa5;
        margin-top: 4px;
      }

      .ig-note {
        font-size: 13px;
        color: var(--tx2);
        line-height: 1.5;
      }

      .ig-disc {
        font-size: 11.5px;
        color: var(--tx3);
        margin-top: 22px;
        padding: 12px 14px;
        background: var(--bg3);
        border-radius: 12px;
        line-height: 1.5;
      }

      /* Interaction checker — cleaner, more useful, and safer for OSCE practice. */
      .ic-wrap {
        max-width: 980px;
        padding: 0 4px 40px;
      }

      .ic-hero {
        padding: 24px 0 18px;
        border-bottom: 1px solid var(--bdr);
        margin-bottom: 18px;
      }

      .ic-hero h1 {
        font-family: var(--serif);
        font-size: 30px;
        letter-spacing: -.3px;
        margin-bottom: 4px;
        color: var(--tx);
        margin: 0 0 6px;
      }

      .ic-hero p {
        font-size: 15px;
        color: var(--tx2);
        line-height: 1.6;
        max-width: 780px;
      }

      .ic-panel {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 16px;
        margin-bottom: 14px;
      }

      .ic-panel-title {
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        font-weight: 800;
        color: var(--tx);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 10px;
      }

      .ic-panel-title span:last-child {
        font-size: 12px;
        color: var(--tx3);
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;

      }

      .ic-search-row {
        display: grid;
        gap: 10px;
        align-items: center;
        margin-bottom: 8px;
        flex-wrap: wrap;
        grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) auto;
      }

      .ic-input,
      .ic-list-box {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--bdr);
        border-radius: 12px;
        background: var(--bg);
        color: var(--tx);
        font: 15px var(--font);
        outline: none;
        transition: border-color .18s, box-shadow .18s, background .18s;
      }

      .ic-input {
        padding: 12px 14px;
      }

      .ic-list-box {
        min-height: 86px;
        resize: vertical;
        padding: 12px 14px;

      }

      .ic-input:focus,
      .ic-list-box:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px rgba(156, 74, 26, .13);
        background: var(--bg2);
      }

      .ic-swap {
        font-size: 20px;
        cursor: pointer;
        padding: 6px;
        border-radius: 50%;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        line-height: 1;
        transition: .15s;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--tx);
      }

      .ic-clear,
      .ic-check-btn {
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        color: var(--tx);
        font: 700 13px var(--font);
        padding: 11px 14px;
        cursor: pointer;
        white-space: nowrap;
      }

      .ic-check-btn {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac);
      }

      .ic-clear:hover,
      .ic-swap:hover {
        border-color: var(--ac);
        background: var(--acl);
        color: var(--ac);
      }

      .ic-list-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .ic-hint {
        font-size: 12.5px;
        color: var(--tx3);
        margin-bottom: 10px;
        margin: 8px 0 10px;
      }

      .ic-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 16px;
      }

      .ic-sug-chip {
        padding: 6px 11px;
        background: var(--acl);
        border: 1px solid rgba(156, 74, 26, .25);
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        color: var(--ac);
        transition: .15s;
      }

      .ic-sug-chip:hover {
        background: var(--ac);
        color: #fff;
      }

      .ic-sev-filter {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 14px;
        margin: 10px 0 14px;
        align-items: center;
      }

      .ic-filt-btn {
        padding: 7px 11px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid var(--bdr);
        background: var(--bg);
        color: var(--tx2);
        transition: .15s;
      }

      .ic-filt-btn.on {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac);
      }

      .ic-summary {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        margin: 0 0 12px;
        color: var(--tx2);

      }

      .ic-count {
        font-size: 13px;
        color: var(--tx2);
        margin-bottom: 12px;
        margin: 0;
      }

      .ic-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 14px;
        padding: 15px 17px;
        margin-bottom: 10px;
        transition: .15s;
        box-shadow: var(--shadow);
        border-left: 5px solid var(--ac);
      }

      .ic-card.ic-contraindicated {
        border-left-color: #b91c1c;
      }

      .ic-card.ic-major {
        border-left-color: #c2410c;
      }

      .ic-card.ic-moderate {
        border-left-color: #b45309;
      }

      .ic-card.ic-minor {
        border-left-color: #059669;
      }

      .ic-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 9px;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .ic-drugs {
        font-size: 16px;
        font-weight: 800;
        color: var(--tx);
      }

      .ic-drug-name {
        color: var(--ac);
      }

      .ic-match-note {
        font-size: 12px;
        color: var(--tx3);
        margin-top: 3px;
      }

      .sev-badge {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
      }

      .ic-section {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.6;
        margin: 9px 0;
        color: var(--tx2);
      }

      .ic-section strong {
        color: var(--tx);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        display: block;
        margin-bottom: 3px;
      }

      .ic-empty {
        text-align: center;
        padding: 38px 18px;
        color: var(--tx3);
        border: 1px dashed var(--bdr);
        background: var(--bg2);
        border-radius: 14px;
      }

      .ic-empty p {
        font-size: 14px;
        margin-top: 8px;
        margin: 8px 0 0;
      }

      .ic-warning {
        font-size: 12px;

        color: var(--tx3);
        margin-top: 12px;
        padding: 11px 12px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        border-radius: 10px;
      }

      body[data-theme="dark"] .ic-panel,
      body[data-theme="dark"] .ic-card,
      body[data-theme="dark"] .ic-empty {
        background: #0d1c2a;
        border-color: #1e2d40;
        color: #f5efe6;
      }

      body[data-theme="dark"] .ic-input,
      body[data-theme="dark"] .ic-list-box,
      body[data-theme="dark"] .ic-clear,
      body[data-theme="dark"] .ic-swap,
      body[data-theme="dark"] .ic-filt-btn {
        background: #0a1628;
        border-color: #1e3a52;
        color: #f5efe6;
      }

      body[data-theme="dark"] .ic-section,
      body[data-theme="dark"] .ic-section *,
      body[data-theme="dark"] .ic-hero p,
      body[data-theme="dark"] .ic-summary,
      body[data-theme="dark"] .ic-count,
      body[data-theme="dark"] .ic-hint,
      body[data-theme="dark"] .ic-match-note,
      body[data-theme="dark"] .ic-warning {
        color: #f5efe6;
      }

      @media(max-width:760px) {
        .ic-search-row {
          grid-template-columns: 1fr;
        }

        .ic-swap {
          justify-self: center;
          transform: rotate(90deg);
        }
      }

      .clinical-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 220px));
        gap: 14px;
        padding: 16px 18px 18px;
        justify-content: flex-start;
        align-items: start;
      }

      .clinical-card {
        display: block;
        width: 100%;
        text-align: left;
        border: 1px solid var(--bdr);
        background: var(--bg);
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        padding: 0;
        box-shadow: var(--shadow);
        color: var(--tx);
        transition: transform .15s, box-shadow .15s, border-color .15s;
        max-width: 220px;
      }

      .clinical-card img {
        display: block;
        width: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        background: var(--bg3);
        height: 145px;
      }

      .clinical-card-body {
        padding: 10px 11px 11px;
      }

      .clinical-title {
        font-size: 14px;
        display: block;
        font-weight: 800;
        color: var(--tx);
        margin-bottom: 6px;
      }

      .clinical-look {
        font-size: 13px;
        color: var(--tx2);
        margin: 0 0 8px;
      }

      .clinical-source {
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-weight: 700;
        color: var(--ac);
        background: var(--acl);
        border: 1px solid rgba(156, 74, 26, .18);
        border-radius: 999px;
        padding: 4px 7px;
        max-width: 100%;
      }

      @media (max-width:640px) {
        .clinical-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .clinical-card {
                max-width: none;
        }

        .clinical-card img {
                height: 132px;
        }
      }

      /* OSCE Station Practice — cleaner layout and usability fixes */
      .osce-wrap {
        max-width: 1040px;
        margin: 0 auto;
        padding: 0 8px 44px;
      }

      .osce-hero {
        padding: 18px 0 14px;
        text-align: left;
        border-bottom: 1px solid var(--bdr);
        margin-bottom: 18px;
      }

      .osce-hero h2 {
        margin: 0 0 6px;
        font-size: 1.75rem;
        font-weight: 700;
        font-family: var(--serif);
        color: var(--tx);
        letter-spacing: -.02em;
      }

      .osce-hero p {
        margin: 0;
        color: var(--tx2);
        font-size: 15px;
        margin-top: 4px;
      }

      .osce-stats-bar {
        display: grid;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        background: transparent;
        border-radius: 0;
        border: 0;
        overflow: visible;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 16px 0 18px;
      }

      .osce-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14px 12px;
        flex: 1;
        min-width: 0;
        border-right: 1px solid var(--bdr);
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        box-shadow: var(--shadow);
      }

      .osce-stat-val {
        font-size: 1.45rem;
        font-weight: 800;
        color: var(--tx)
      }

      .osce-stat-lbl {
        font-size: 11px;
        color: var(--tx3);
        margin-top: 3px;
        letter-spacing: .03em;
        text-transform: uppercase;
        font-weight: 600
      }

      .osce-mode-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
        margin: 20px 0;
        margin-top: 18px;
      }

      .osce-mode-card {
        background: linear-gradient(180deg, var(--bg2), var(--bg));
        border: 1.5px solid var(--bdr);
        border-radius: 18px;
        padding: 18px 18px 16px;
        cursor: pointer;
        text-align: left;
        transition: all .18s;
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: relative;
        overflow: hidden;
        min-height: 172px;
        box-shadow: var(--shadow);
      }

      .osce-mode-card:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }

      .osce-mode-card::after {
        content: "";
        position: absolute;
        right: -32px;
        top: -32px;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: currentColor;
        opacity: .055;
        pointer-events: none;
      }

      .osce-mode-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        margin-bottom: 8px;
        font-weight: 900;
        letter-spacing: .02em;
      }

      .osce-mode-icon::before {
        font-size: 14px;
      }

      .osce-mode-card:nth-child(1) .osce-mode-icon::before {
        content: "CA";
      }

      .osce-mode-card:nth-child(2) .osce-mode-icon::before {
        content: "PH";
      }

      .osce-mode-card:nth-child(3) .osce-mode-icon::before {
        content: "CO";
      }

      .osce-mode-card:nth-child(4) .osce-mode-icon::before {
        content: "PP";
      }

      .osce-mode-card:nth-child(5) .osce-mode-icon::before {
        content: "DC";
      }

      .osce-mode-card:nth-child(6) .osce-mode-icon::before {
        content: "RG";
      }

      .osce-mode-title {
        font-size: 1.04rem;
        font-weight: 800;
        color: var(--tx);
        margin-bottom: 2px
      }

      .osce-mode-desc {
        font-size: 13.5px;
        color: var(--tx2);
        line-height: 1.5;
        flex: 1
      }

      .osce-mode-count {
        font-size: 12px;
        font-weight: 800;
        color: var(--ac);
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        width: max-content;
        padding: 5px 10px;
        border-radius: 999px;
        background: var(--acl);
        border: 1px solid rgba(156, 74, 26, .18);
      }

      .osce-filter-bar {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
        margin: 10px 0 16px
      }

      .osce-filter-btn {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: var(--tx2);
        transition: all .15s
      }

      .osce-pb-grid {
        display: grid;
        flex-direction: column;
        gap: 10px;
        margin: 8px 0;
        grid-template-columns: 1fr
      }

      .osce-pb-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 14px 16px;
        cursor: pointer;
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 4px 12px;
        align-items: center;
        transition: all .15s;
        width: 100%;
        box-sizing: border-box;
        color: var(--tx);
        box-shadow: var(--shadow);
      }

      .osce-pb-card:hover {
        border-color: var(--ac);
        background: var(--accent);
        color: #fff;
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px)
      }

      .osce-pb-num {
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        grid-row: 1 / span 2;
        align-self: center;
        white-space: nowrap
      }

      .osce-pb-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--tx)
      }

      .osce-pb-focus {
        font-size: 13px;
        color: var(--tx2);
        grid-row: 1 / span 2;
        align-self: center
      }

      .osce-pb-badges {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
        margin-top: 5px;
        grid-column: 2
      }

      .osce-badge.bookmarked::before {
        content: "Bookmarked";
      }

      .osce-bookmark-btn::before {
        font-size: 14px;
        content: "☆";
      }

      .osce-bookmark-btn.active::before {
        content: "★";
        color: #f59e0b;
      }

      .osce-station {
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
        background: var(--bg2);
      }

      .osce-station-head {
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        border-bottom: 1.5px solid var(--bdr);
        position: relative;
        background: var(--bg3)
      }

      .osce-body {
        padding: 22px
      }

      .osce-section-title {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--tx3);
        margin: 0 0 9px;
      }

      .osce-brief-box,
      .osce-scenario {
        font-size: 15px;
        background: var(--bg);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 18px 20px;

        color: var(--tx);
      }

      .osce-patient-chip {
        display: inline-block;
        background: var(--bg3);
        color: var(--tx);
        padding: 3px 10px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 9px;
        border: 1px solid var(--bdr)
      }

      .osce-answer-textarea,
      .osce-notes-textarea {
        font-size: 15px;
        background: var(--bg);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;

      }

      .osce-answer-textarea {
        min-height: 160px
      }

      .osce-timer {
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(180deg, var(--bg), var(--bg2));
        border-radius: 14px;
        border: 1.5px solid var(--bdr);
        padding: 14px 18px;
        margin-bottom: 20px;
      }

      .osce-timer-display {
        font-size: 1.8rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        min-width: 94px;
        letter-spacing: .02em;
        transition: color .3s
      }

      .osce-timer-btns {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-wrap: wrap
      }

      .osce-timer-btn,
      .osce-finish-btn {
        border-radius: 999px;
        padding: 9px 14px;
        font-weight: 800
      }

      .osce-finish-btn {
        display: inline-flex;
        background: #fef3c7;
        color: #92400e;
        border-color: #f59e0b;
      }

      .osce-mark-reveal {
        background: var(--bg);
        border-radius: 16px;
        border: 1.5px solid var(--bdr);
        overflow: hidden;
        margin-bottom: 20px;
      }

      .osce-mark-header {
        padding: 15px 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        font-size: 15px;
        user-select: none;
        background: var(--bg2);
        border-bottom: 1px solid var(--bdr);
      }

      .osce-mark-body {
        padding: 16px 18px
      }

      .osce-mark-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--bdr);
        font-size: 14.5px;
        line-height: 1.5;
        color: var(--tx);

      }

      .osce-mark-check {
        width: 18px;
        height: 18px;
        min-width: 18px;
        border-radius: 4px;
        border: 2px solid var(--bdr);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background: var(--bg2);
        margin-top: 2px;
        transition: all .1s;
        accent-color: var(--ac)
      }

      .osce-mark-item.checked label {
        text-decoration: none;
        color: var(--tx);
        font-weight: 600
      }

      .osce-score-bar {
        height: 12px;
        background: var(--bg3);
        border-radius: 999px;
        margin: 12px 0 6px;
        overflow: hidden;
        margin-top: 14px
      }

      .osce-score-fill {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #dc2626, #f59e0b, #16a34a);
        transition: width .4s ease
      }

      .osce-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 18px
      }

      .osce-action-btn {
        border-radius: 999px;
        padding: 12px 16px;
        min-width: 150px
      }

      body[data-theme="dark"] .osce-mode-card,
      body[data-theme="dark"] .osce-stat,
      body[data-theme="dark"] .osce-pb-card,
      body[data-theme="dark"] .osce-station,
      body[data-theme="dark"] .osce-mark-reveal,
      body[data-theme="dark"] .osce-mark-header,
      body[data-theme="dark"] .osce-timer,
      body[data-theme="dark"] .osce-brief-box,
      body[data-theme="dark"] .osce-scenario,
      body[data-theme="dark"] .osce-answer-textarea,
      body[data-theme="dark"] .osce-notes-textarea {
        background: #0d1c2a;
        border-color: #1e2d40;
        color: #f5efe6;
      }

      body[data-theme="dark"] .osce-mode-desc,
      body[data-theme="dark"] .osce-pb-focus,
      body[data-theme="dark"] .osce-hero p {
        color: #93b4e6
      }

      body[data-theme="dark"] .osce-mode-count {
        background: #0c2a3e;
        color: #93b4e6;
        border-color: #1e3a8a
      }

      @media(max-width:720px) {
        .osce-stats-bar {
          grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .osce-pb-card {
          grid-template-columns: 1fr auto
        }

        .osce-pb-num {
          grid-column: 1;
          grid-row: auto;
          width: max-content
        }

        .osce-pb-title,
        .osce-pb-focus,
        .osce-pb-badges {
          grid-column: 1 / -1
        }

        .osce-pb-arrow {
          grid-column: 2;
          grid-row: 1
        }

        .osce-timer {
          align-items: flex-start;
          flex-direction: column
        }

        .osce-timer-btns {
          margin-left: 0;
          width: 100%
        }

        .osce-timer-btn,
        .osce-finish-btn {
          flex: 1;
          justify-content: center
        }
      }

      /* OSCE Station Practice content upgrade */
      .osce-content-panel {
        margin: 18px 0 20px;
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 14px;
      }

      .osce-content-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        padding: 15px 16px;
        box-shadow: var(--shadow);
      }

      .osce-content-card h4 {
        font-size: 13px;
        margin: 0 0 10px;

        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--tx);
      }

      .osce-content-card p {
        font-size: 14px;
        margin: 0 0 10px;

        color: var(--tx2);
      }

      .osce-content-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
        column-count: 1;
      }

      .osce-content-card li {
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 0;
        padding: 7px 0;
        border-bottom: 1px solid var(--bg4);

        color: var(--tx2);
      }

      .osce-content-card li:last-child {
        border-bottom: 0
      }

      .osce-content-card li::before {
        content: "";
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
        margin-top: .65em;
        border-radius: 50%;
        background: var(--ac);
        opacity: .85;
        position: static;
      }

      .osce-mini-tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 10px;
      }

      .osce-mini-tag {
        font-size: 11.5px;
        display: inline-flex;
        align-items: center;
        padding: 4px 9px;
        border-radius: 999px;
        background: var(--acl);
        color: var(--ac);
        border: 1px solid rgba(156, 74, 26, .18);

        font-weight: 800;
      }

      .osce-model-answer {
        margin: 16px 0 14px;
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        background: linear-gradient(135deg, var(--bg2), var(--bg3));
        overflow: hidden;
      }

      .osce-model-answer-h {
        font-size: 13px;
        padding: 12px 16px;

        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        background: var(--acl);
        color: var(--ac);
        border-bottom: 1px solid var(--bdr);
      }

      .osce-model-answer-body {
        padding: 12px 16px 14px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 12px;
      }

      .osce-model-group {
        background: var(--bg);
        border: 1px solid var(--bdr);
        border-radius: 12px;
        padding: 11px 12px;
      }

      .osce-model-group h5 {
        font-size: 12px;
        margin: 0 0 8px;

        font-weight: 800;
        color: var(--tx);
        letter-spacing: .04em;
        text-transform: uppercase;
      }

      .osce-model-group ul {
        margin: 0;
        padding: 0;
        list-style: none;
        column-count: 1
      }

      .osce-model-group li {
        font-size: 13.5px;
        margin: 0;
        padding: 6px 0;
        border-bottom: 1px solid var(--bg4);

        color: var(--tx2);
      }

      .osce-model-group li:last-child {
        border-bottom: 0
      }

      .osce-student-task-box {
        margin: 0 0 16px;
        padding: 14px 16px;
        border-radius: 13px;
        border: 1.5px solid var(--ac);
        background: var(--acl);
        color: var(--tx);
      }

      .osce-student-task-box strong {
        color: var(--tx)
      }

      .osce-student-task-box p {
        font-size: 14.5px;
        margin: 0;
        color: var(--tx)
      }

      body[data-theme="dark"] .osce-content-card,
      body[data-theme="dark"] .osce-model-group,
      body[data-theme="dark"] .osce-model-answer {
        background: #0d1c2a;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .osce-content-card li,
      body[data-theme="dark"] .osce-model-group li {
        border-bottom-color: rgba(255, 255, 255, .08)
      }

      body[data-theme="dark"] .osce-mini-tag,
      body[data-theme="dark"] .osce-model-answer-h,
      body[data-theme="dark"] .osce-student-task-box {
        background: #0f2035;
        color: #e6edfb;
        border-color: #1d4ed8;
      }

      body[data-theme="dark"] .osce-content-card h4,
      body[data-theme="dark"] .osce-model-group h5,
      body[data-theme="dark"] .osce-content-card p,
      body[data-theme="dark"] .osce-content-card li,
      body[data-theme="dark"] .osce-model-group li,
      body[data-theme="dark"] .osce-student-task-box p,
      body[data-theme="dark"] .osce-student-task-box strong {
        color: #f5efe6
      }

      @media(max-width:860px) {
        .osce-content-panel {
          grid-template-columns: 1fr
        }
      }

      /* Make body-system topic lists show side-by-side cards instead of a single vertical stack. */
      .topic-grid,
      #cst-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: stretch;
      }

      .topic-grid>.topic-card,
      #cst-grid>.topic-card {
        width: auto;
        max-width: none;
      }

      @media (min-width: 1380px) {

        .topic-grid,
        #cst-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (max-width: 900px) {

        .topic-grid,
        #cst-grid {
          grid-template-columns: 1fr;
        }
      }

      body[data-theme="dark"] .home-logo-img {
        filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
      }

      #oscFinishBtn {
        display: none;
      }

      #oscRevealBtn.is-locked {
        opacity: .45;
        cursor: not-allowed;
        filter: grayscale(.25);
      }

      #oscRevealBtn.is-ready {
        opacity: 1;
        cursor: pointer;
        filter: none;
      }

      @keyframes shake {

        0%,
        100% {
          transform: translateX(0)
        }

        25% {
          transform: translateX(-4px)
        }

        75% {
          transform: translateX(4px)
        }
      }

      .rev-sheet-modal {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, .56);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 26px 18px;
        overflow: auto;
      }

      .rev-sheet-shell {
        width: min(880px, 96vw);
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 20px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
        overflow: hidden;
        color: var(--tx);
      }

      .rev-sheet-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        padding: 12px 14px;
        border-bottom: 1px solid var(--bdr);
        background: var(--bg3);
        position: sticky;
        top: 0;
        z-index: 2;
      }

      .rev-action-btn {
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        border-radius: 999px;
        padding: 8px 14px;
        font: 800 12px/1 var(--font);
        cursor: pointer;
      }

      .rev-action-btn.primary {
        background: var(--tx);
        color: var(--bg2);
        border-color: var(--tx);
      }

      .rev-sheet-paper {
        font-family: Georgia, 'Times New Roman', serif;
        background: #fff;
        color: #111;
        padding: 34px 38px 28px;
      }

      /* decorative bits hidden in the minimal design */
      .rev-sheet-paper .rev-star,
      .rev-sheet-paper .rev-ico,
      .rev-sheet-paper .rev-emoji {
        display: none;
      }

      /* ── masthead ── */
      .rev-sheet-top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-end;
        margin-bottom: 22px;
        padding: 0 0 14px;
        border-radius: 0;
        background: none;
        border: 0;
        border-bottom: 4px double #111;
      }

      .rev-top-left {
        min-width: 0
      }

      .rev-kicker {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        letter-spacing: .22em;
        text-transform: uppercase;
        font-weight: 700;
        color: #666;
        margin-bottom: 7px;
      }

      .rev-sheet-paper h1 {
        font-size: 30px;
        font-family: Georgia, 'Times New Roman', serif;
        font-weight: 700;
        letter-spacing: -.01em;
        margin: 0 0 7px;
        color: #111;
        line-height: 1.08;
      }

      .rev-tag {
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #444;
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
      }

      .rev-sheet-meta {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-align: right;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #666;
        min-width: 118px;
        line-height: 1.7;
        flex: 0 0 auto;
      }

      .rev-sheet-meta strong {
        color: #111;
        font-size: 11.5px;
        letter-spacing: .02em;
      }

      .rev-brand {
        font-weight: 800;
        color: #111;
      }

      /* ── body: two columns with a hairline rule ── */
      .rev-sheet-grid {
        display: block;
        columns: 2;
        column-gap: 36px;
        column-rule: 1px solid #d5d9df;
      }

      .rev-sheet-section {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0 0 22px;
        overflow: visible;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .rev-sheet-section.full {
        column-span: all;
      }

      .rev-sheet-section h2 {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12.5px;
        margin: 0 0 10px;
        padding: 0 0 7px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #111;
        background: none;
      }

      .rev-sheet-section h2::before {
        content: '';
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        background: #111;
      }

      .rev-sheet-section ul {
        margin: 0;
        padding: 0 0 0 17px;
      }

      .rev-sheet-section li {
        font-size: 13.5px;
        color: #1a1a1a;
        margin: 0 0 7px;
        padding: 0;
        border: 0;
        line-height: 1.5;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
      }

      .rev-sheet-section li::marker {
        color: #8a919b;
        font-size: 11px;
      }

      .rev-empty {
        font-size: 12.5px;
        margin: 0;
        padding: 0;
        color: #777;
        font-style: italic
      }

      /* colour accents per section */
      .rev-c-blue h2   { border-bottom: 2px solid #1d4ed8; }
      .rev-c-green h2  { border-bottom: 2px solid #15803d; }
      .rev-c-purple h2 { border-bottom: 2px solid #7e22ce; }
      .rev-c-red h2    { border-bottom: 2px solid #b91c1c; }
      .rev-c-amber h2  { border-bottom: 2px solid #b45309; }
      .rev-c-blue h2::before   { background: #1d4ed8; }
      .rev-c-green h2::before  { background: #15803d; }
      .rev-c-purple h2::before { background: #7e22ce; }
      .rev-c-red h2::before    { background: #b91c1c; }
      .rev-c-amber h2::before  { background: #b45309; }

      /* footer note */
      .rev-warning {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10.5px;
        margin-top: 8px;
        border: 0;
        border-top: 1.5px solid #111;
        border-radius: 0;
        padding: 11px 0 0;
        background: none;
        color: #555;
        line-height: 1.55;
      }

      .rev-warning strong {
        color: #111;
        text-transform: uppercase;
        letter-spacing: .04em;
      }

      /* ── dark theme variant ── */
      body[data-theme="dark"] .rev-sheet-paper {
        background: #0e1726;
        color: #dfe6f0;
      }

      body[data-theme="dark"] .rev-sheet-top {
        border-bottom-color: #d7e0ec;
      }

      body[data-theme="dark"] .rev-kicker { color: #8fa0b8; }

      body[data-theme="dark"] .rev-sheet-paper h1 { color: #f2f6fc; }

      body[data-theme="dark"] .rev-tag { color: #a8b6cc; }

      body[data-theme="dark"] .rev-sheet-meta { color: #8fa0b8; }

      body[data-theme="dark"] .rev-sheet-meta strong { color: #f2f6fc; }

      body[data-theme="dark"] .rev-brand { color: #f2f6fc; }

      body[data-theme="dark"] .rev-sheet-grid { column-rule-color: #2a3a52; }

      body[data-theme="dark"] .rev-sheet-section h2 { color: #f2f6fc; }

      body[data-theme="dark"] .rev-sheet-section h2::before { background: #f2f6fc; }

      body[data-theme="dark"] .rev-sheet-section li { color: #cfd8e6; }

      body[data-theme="dark"] .rev-sheet-section li::marker { color: #5c6b82; }

      body[data-theme="dark"] .rev-empty { color: #8fa0b8; }

      body[data-theme="dark"] .rev-c-blue h2   { border-bottom-color: #60a5fa; }
      body[data-theme="dark"] .rev-c-green h2  { border-bottom-color: #4ade80; }
      body[data-theme="dark"] .rev-c-purple h2 { border-bottom-color: #c084fc; }
      body[data-theme="dark"] .rev-c-red h2    { border-bottom-color: #f87171; }
      body[data-theme="dark"] .rev-c-amber h2  { border-bottom-color: #fbbf24; }
      body[data-theme="dark"] .rev-c-blue h2::before   { background: #60a5fa; }
      body[data-theme="dark"] .rev-c-green h2::before  { background: #4ade80; }
      body[data-theme="dark"] .rev-c-purple h2::before { background: #c084fc; }
      body[data-theme="dark"] .rev-c-red h2::before    { background: #f87171; }
      body[data-theme="dark"] .rev-c-amber h2::before  { background: #fbbf24; }

      body[data-theme="dark"] .rev-warning {
        border-top-color: #d7e0ec;
        color: #9fb0c6;
      }

      body[data-theme="dark"] .rev-warning strong { color: #f2f6fc; }

      body[data-theme="dark"] .rev-sheet-shell {
        background: #0d1c2a;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .rev-sheet-actions {
        background: #0a1628;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .print-sheet-btn {
        background: #0f2035;
        color: #f5efe6;
        border-color: #1e3a52;
      }

      body[data-theme="dark"] .print-sheet-btn:hover {
        background: #0f1f35;
        color: #e6edfb;
        border-color: #1d4ed8;
      }

      @media (max-width:720px) {
        .rev-sheet-grid {
          columns: 1;
        }

        .rev-sheet-top {
          flex-direction: column;
        }

        .rev-sheet-meta {
          text-align: left;
        }
      }

      @media print {
        /* v26: minimal report-style one-page revision sheet — single A4, ink-saver */
        body.printing-revision > *:not(#revisionSheetModal) {
          display: none !important;
        }

        html:has(body.printing-revision) {
          background: #fff !important;
        }

        body.printing-revision {
          margin: 0 !important;
          min-height: 0 !important;
          background: #fff !important;
        }

        body.printing-revision #revisionSheetModal {
          position: static !important;
          display: block !important;
          padding: 0 !important;
          background: #fff !important;
          overflow: visible !important;
        }

        body.printing-revision .rev-sheet-shell {
          width: 210mm;
          margin: 0 auto;
          box-shadow: none;
          border: 0;
          border-radius: 0;
          background: #fff;
          overflow: visible;
        }

        body.printing-revision .rev-sheet-actions {
          display: none !important;
        }

        body.printing-revision .rev-sheet-paper {
          box-sizing: border-box;
          width: 210mm;
          height: 296mm;
          max-height: 296mm;
          overflow: hidden;
          position: relative;
          padding: 13mm 14mm 24mm;
          background: #fff !important;
          color: #111;
          font-family: Georgia, 'Times New Roman', serif;
          page-break-after: avoid;
          break-after: avoid-page;
        }

        /* ── masthead: classic report head with double rule ── */
        body.printing-revision .rev-sheet-top {
          background: none !important;
          border: 0;
          border-bottom: 4px double #111;
          border-radius: 0;
          padding: 0 0 3.5mm;
          margin-bottom: 5.5mm;
          align-items: flex-end;
        }

        body.printing-revision .rev-star,
        body.printing-revision .rev-emoji {
          display: none !important;
        }

        body.printing-revision .rev-kicker {
          color: #666;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 7.5pt;
          font-weight: 700;
          letter-spacing: .22em;
          margin-bottom: 4px;
        }

        body.printing-revision .rev-sheet-paper h1 {
          color: #111;
          font-family: Georgia, 'Times New Roman', serif;
          font-size: 22pt;
          font-weight: 700;
          letter-spacing: -.01em;
          margin: 0 0 4px;
        }

        body.printing-revision .rev-tag {
          color: #444;
          background: none;
          border: 0;
          border-radius: 0;
          padding: 0;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 8pt;
          font-weight: 700;
          letter-spacing: .12em;
          text-transform: uppercase;
        }

        body.printing-revision .rev-sheet-meta {
          color: #666;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 7.5pt;
          line-height: 1.6;
          letter-spacing: .04em;
          text-transform: uppercase;
        }

        body.printing-revision .rev-sheet-meta strong {
          color: #111;
          font-size: 8.5pt;
          letter-spacing: .02em;
        }

        body.printing-revision .rev-brand {
          color: #111;
          font-weight: 800;
        }

        /* ── body: two newspaper columns with a hairline rule ── */
        body.printing-revision .rev-sheet-grid {
          display: block;
          columns: 2;
          column-gap: 9mm;
          column-rule: .5pt solid #c9ced6;
        }

        body.printing-revision .rev-sheet-section {
          background: none !important;
          border: 0;
          border-radius: 0;
          padding: 0;
          margin: 0 0 5.5mm;
          break-inside: avoid;
          page-break-inside: avoid;
          overflow: visible;
        }

        body.printing-revision .rev-sheet-section h2 {
          background: none !important;
          color: #111;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9.5pt;
          font-weight: 800;
          letter-spacing: .08em;
          text-transform: uppercase;
          padding: 0 0 4px;
          margin: 0 0 6px;
        }

        body.printing-revision .rev-ico {
          display: none;
        }

        body.printing-revision .rev-sheet-section h2::before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-inline-end: 7px;
          background: #111;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }

        body.printing-revision .rev-c-blue h2   { border-bottom: 1.5pt solid #1d4ed8; }
        body.printing-revision .rev-c-green h2  { border-bottom: 1.5pt solid #15803d; }
        body.printing-revision .rev-c-purple h2 { border-bottom: 1.5pt solid #7e22ce; }
        body.printing-revision .rev-c-red h2    { border-bottom: 1.5pt solid #b91c1c; }
        body.printing-revision .rev-c-amber h2  { border-bottom: 1.5pt solid #b45309; }
        body.printing-revision .rev-c-blue h2::before   { background: #1d4ed8; }
        body.printing-revision .rev-c-green h2::before  { background: #15803d; }
        body.printing-revision .rev-c-purple h2::before { background: #7e22ce; }
        body.printing-revision .rev-c-red h2::before    { background: #b91c1c; }
        body.printing-revision .rev-c-amber h2::before  { background: #b45309; }

        body.printing-revision .rev-sheet-section ul {
          padding: 0 0 0 13px;
          margin: 0;
        }

        body.printing-revision .rev-sheet-section li {
          font-size: 9pt;
          line-height: 1.42;
          margin: 0 0 4px;
          color: #1a1a1a;
          text-align: justify;
          text-justify: inter-word;
          hyphens: auto;
        }

        body.printing-revision .rev-sheet-section li::marker {
          color: #8a919b;
          font-size: 8pt;
        }

        body.printing-revision .rev-empty {
          font-size: 8.5pt;
          padding: 0;
          color: #777;
        }

        /* ── footer: quiet note under a rule ── */
        body.printing-revision .rev-warning {
          position: absolute;
          bottom: 9mm;
          left: 14mm;
          right: 14mm;
          background: none !important;
          border: 0;
          border-top: 1pt solid #111;
          border-radius: 0;
          color: #555;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 7.5pt;
          line-height: 1.5;
          margin: 0;
          padding: 2mm 0 0;
        }

        body.printing-revision .rev-warning strong {
          color: #111;
          letter-spacing: .04em;
          text-transform: uppercase;
        }

        body.printing-revision .rev-sheet-paper,
        body.printing-revision .rev-sheet-section,
        body.printing-revision .rev-sheet-section h2 {
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
      }

      /* ── v24: general print — clean printout of the current view (topics, stations) ──
   Only applies when NOT printing the dedicated revision sheet, so it won't
   clash with the existing revision-sheet print rules above. */
      @media print {

        body:not(.printing-revision) .nav,
        body:not(.printing-revision) nav,
        body:not(.printing-revision) #sidebar,
        body:not(.printing-revision) .sidebar,
        body:not(.printing-revision) #overlay,
        body:not(.printing-revision) .at-skip-link,
        body:not(.printing-revision) .fab,
        body:not(.printing-revision) [class*="-actions"] {
          display: none !important;
        }

        body:not(.printing-revision) .layout {
          display: block !important;
        }

        body:not(.printing-revision) #mainContent {
          display: block !important;
          width: 100% !important;
          max-width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          overflow: visible !important;
          height: auto !important;
          background: #fff !important;
          color: #111 !important;
        }

        body:not(.printing-revision) {
          background: #fff !important;
        }

        body:not(.printing-revision) .card,
        body:not(.printing-revision) [class*="-card"],
        body:not(.printing-revision) section {
          break-inside: avoid;
          page-break-inside: avoid;
        }

        @page {
          margin: 14mm;
        }
      }

      /* ════════════════════════════════════════════════════════════════════
         UNIFIED FLASHCARD ENGINE (fcx-) — flip animation, spaced repetition,
         keyboard + touch UX. Self-contained; powers both the topic-flashcard
         button and the planner study-cards button. Dark-mode aware via tokens.
         ════════════════════════════════════════════════════════════════════ */
      .fcx-wrap {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        -webkit-user-select: none;
        user-select: none;
      }

      /* Top bar: progress + deck stats */
      .fcx-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 13px;
        font-weight: 700;
        color: var(--tx2);
      }

      .fcx-progress {
        flex: 1;
        height: 8px;
        border-radius: 99px;
        background: var(--bg3);
        overflow: hidden;
      }

      .fcx-progress-fill {
        height: 100%;
        width: 0%;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--ac2), var(--ac));
        transition: width .35s cubic-bezier(.22, 1, .36, 1);
      }

      .fcx-count {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }

      .fcx-due {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 9px;
        border-radius: 99px;
        background: var(--aml);
        color: var(--am);
        border: 1px solid var(--bdr);
        font-size: 12px;
      }

      /* The 3D flip card */
      .fcx-scene {
        perspective: 1600px;
        width: 100%;
      }

      .fcx-card {
        position: relative;
        width: 100%;
        min-height: 280px;
        cursor: pointer;
        transform-style: preserve-3d;
        transition: transform .55s cubic-bezier(.22, 1, .36, 1);
        outline: none;
      }

      .fcx-card.is-flipped {
        transform: rotateY(180deg);
      }

      .fcx-card:focus-visible {
        outline: none;
      }

      .fcx-card:focus-visible .fcx-face {
        box-shadow: 0 0 0 3px var(--ac2), var(--shadow-xl);
      }

      .fcx-face {
        position: absolute;
        inset: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        box-shadow: var(--shadow-lg);
        padding: 22px 22px 18px;
        overflow: auto;
        transition: box-shadow .2s ease;
      }

      .fcx-face-front {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
      }

      .fcx-face-back {
        transform: rotateY(180deg);
        background: var(--bg2);
      }

      /* ── Robust content-swap flashcard (replaces the 3D flip; no stacked
            back-face / preserve-3d that could cache a stuck layer) ── */
      .fcx-card2 {
        position: relative;
        width: 100%;
        min-height: 240px;
        cursor: pointer;
        border-radius: 20px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        box-shadow: var(--shadow-lg);
        padding: 22px 22px 18px;
        outline: none;
        display: block;
      }

      .fcx-card2 .fcx-face2 {
        display: flex;
        flex-direction: column;
      }

      /* show front by default, hide back; swap when .showback */
      .fcx-card2 .fcx-face-back2 {
        display: none;
      }

      .fcx-card2.showback .fcx-face-front2 {
        display: none;
      }

      .fcx-card2.showback .fcx-face-back2 {
        display: flex;
      }

      .fcx-card2.showback {
        background: var(--bg2);
      }

      .fcx-card2:not(.showback) {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
      }

      /* subtle reveal animation on the visible face */
      @keyframes fcxFaceIn {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: none; }
      }

      .fcx-card2 .fcx-face2 {
        animation: fcxFaceIn .2s ease both;
      }

      .fcx-card2:focus-visible {
        box-shadow: 0 0 0 3px var(--ac2), var(--shadow-xl);
      }

      .fcx-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--ac);
        margin-bottom: 14px;
      }

      .fcx-meta .fcx-topic {
        color: var(--tx3);
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
        margin-left: auto;
        font-size: 11.5px;
      }

      .fcx-q {
        font-family: 'Lora', Georgia, serif;
        font-size: 20px;
        line-height: 1.45;
        color: var(--tx);
        margin: auto 0;
      }

      .fcx-a-label {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--gn);
        margin-bottom: 10px;
      }

      .fcx-a {
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--tx);
      }

      .fcx-a ul {
        margin: 0;
        padding-left: 20px;
      }

      .fcx-a li {
        margin-bottom: 7px;
      }

      .fcx-a li:last-child {
        margin-bottom: 0;
      }

      .fcx-hint {
        margin-top: 14px;
        font-size: 12px;
        color: var(--tx3);
        text-align: center;
      }

      /* Grading buttons (spaced repetition) */
      .fcx-grade {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .fcx-gbtn {
        appearance: none;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        border-radius: 12px;
        padding: 11px 8px 9px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-weight: 800;
        font-size: 14px;
        color: var(--tx);
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      }

      .fcx-gbtn small {
        font-weight: 600;
        font-size: 10.5px;
        color: var(--tx3);
      }

      .fcx-gbtn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
      }

      .fcx-gbtn.again {
        border-color: var(--rdb);
      }

      .fcx-gbtn.again:hover {
        background: var(--rdl);
        border-color: var(--rd);
      }

      .fcx-gbtn.hard {
        border-color: var(--bdr2);
      }

      .fcx-gbtn.hard:hover {
        background: var(--aml);
        border-color: var(--am);
      }

      .fcx-gbtn.good {
        border-color: var(--gnb);
      }

      .fcx-gbtn.good:hover {
        background: var(--gnl);
        border-color: var(--gn);
      }

      .fcx-gbtn kbd {
        font-family: inherit;
        font-size: 10px;
        color: var(--tx3);
        border: 1px solid var(--bdr);
        border-radius: 5px;
        padding: 0 4px;
        margin-top: 1px;
      }

      /* Primary reveal button (shown on front) */
      .fcx-reveal {
        appearance: none;
        width: 100%;
        border: none;
        border-radius: 12px;
        padding: 13px;
        cursor: pointer;
        font-weight: 800;
        font-size: 15px;
        color: #fff;
        background: linear-gradient(180deg, var(--ac2), var(--ac));
        box-shadow: var(--shadow);
        transition: transform .12s ease, box-shadow .12s ease;
      }

      .fcx-reveal:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
      }

      /* Bottom toolbar */
      .fcx-toolbar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .fcx-tbtn {
        appearance: none;
        border: 1px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        border-radius: 10px;
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background .12s ease, border-color .12s ease;
      }

      .fcx-tbtn:hover {
        background: var(--bg3);
        border-color: var(--bdr2);
      }

      /* Completion screen */
      .fcx-done {
        text-align: center;
        padding: 12px 6px 4px;
      }

      .fcx-done-emoji {
        font-size: 44px;
        line-height: 1;
        margin-bottom: 10px;
      }

      .fcx-done-h {
        font-size: 22px;
        font-weight: 800;
        color: var(--tx);
        margin-bottom: 6px;
      }

      .fcx-done-stats {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin: 16px 0 20px;
        flex-wrap: wrap;
      }

      .fcx-stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .fcx-stat b {
        font-size: 24px;
        font-variant-numeric: tabular-nums;
      }

      .fcx-stat span {
        font-size: 11.5px;
        color: var(--tx3);
        text-transform: uppercase;
        letter-spacing: .03em;
        font-weight: 700;
      }

      .fcx-stat.good b {
        color: var(--gn);
      }

      .fcx-stat.again b {
        color: var(--rd);
      }

      .fcx-done-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .fcx-empty {
        text-align: center;
        color: var(--tx3);
        padding: 30px 10px;
        font-size: 15px;
      }

      /* Subtle entrance animation when a new card mounts */
      @keyframes fcxIn {
        from {
          opacity: 0;
          transform: translateY(8px) scale(.985);
        }

        to {
          opacity: 1;
          transform: none;
        }
      }

      .fcx-scene.fcx-anim .fcx-card {
        animation: fcxIn .28s ease both;
      }

      /* Mobile */
      @media (max-width: 480px) {
        .fcx-q {
          font-size: 18px;
        }

        .fcx-face {
          padding: 18px 16px 14px;
        }

        .fcx-card {
          min-height: 240px;
        }

        .fcx-gbtn {
          font-size: 13px;
        }
      }

      /* Dark-mode fine-tuning */
      body[data-theme="dark"] .fcx-face-front {
        background: linear-gradient(160deg, var(--bg2), #12283f);
      }

      body[data-theme="dark"] .fcx-due {
        background: rgba(217, 119, 6, .14);
      }

      /* ── Mini quiz (MCQ + recall) ── */
      .quiz-mcq-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
        padding: 22px;
        display: flex;
        flex-direction: column;
      }

      .quiz-q {
        font-family: 'Lora', Georgia, serif;
        font-size: 18.5px;
        line-height: 1.45;
        color: var(--tx);
        margin: 4px 0 16px;
      }

      .quiz-opts {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

      .quiz-opt {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        text-align: left;
        appearance: none;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        border-radius: 12px;
        padding: 12px 14px;
        cursor: pointer;
        font-size: 14.5px;
        line-height: 1.4;
        color: var(--tx);
        transition: border-color .12s ease, background .12s ease, transform .1s ease;
      }

      .quiz-opt:hover:not(:disabled) {
        border-color: var(--ac2);
        transform: translateY(-1px);
      }

      .quiz-opt:disabled {
        cursor: default;
      }

      .quiz-opt-key {
        flex: 0 0 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: var(--bg3);
        color: var(--ac);
        font-weight: 800;
        font-size: 13px;
      }

      .quiz-opt.correct {
        border-color: var(--gn);
        background: var(--gnl);
      }

      .quiz-opt.correct .quiz-opt-key {
        background: var(--gn);
        color: #fff;
      }

      .quiz-opt.wrong {
        border-color: var(--rd);
        background: var(--rdl);
      }

      .quiz-opt.wrong .quiz-opt-key {
        background: var(--rd);
        color: #fff;
      }

      .quiz-opt.dim {
        opacity: .55;
      }

      .quiz-feedback {
        margin-top: 14px;
        padding: 10px 13px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 13.5px;
      }

      .quiz-feedback.ok {
        background: var(--gnl);
        color: var(--gn);
        border: 1px solid var(--gnb);
      }

      .quiz-feedback.no {
        background: var(--rdl);
        color: var(--rd);
        border: 1px solid var(--rdb);
      }

      @media (max-width: 480px) {
        .quiz-q {
          font-size: 17px;
        }

        .quiz-opt {
          font-size: 13.5px;
        }
      }

      /* ── Quiz / flashcard visual polish (v24) ── */
      .qz-card {
        border-radius: 18px !important;
        box-shadow: var(--shadow-lg) !important;
        border-color: var(--bdr) !important;
        transition: box-shadow .2s ease, transform .2s ease;
      }

      .qz-card:hover {
        box-shadow: var(--shadow-xl) !important;
      }

      .pw-fc-card {
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 18px;
        padding: 22px;
        box-shadow: var(--shadow-lg);
        transition: box-shadow .2s ease;
      }

      .pw-fc-card:hover {
        box-shadow: var(--shadow-xl);
      }

      .qz-reveal-btn {
        display: block;
        width: 100%;
        padding: 13px;
        background: var(--grad-ink);
        color: #fff;
        border: 0;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
        letter-spacing: .01em;
        font: 800 15px var(--font);
        box-shadow: 0 4px 14px rgba(156, 74, 26, .22);
        min-height: 50px;
      }

      .qz-reveal-btn:hover {
        opacity: .88;
        transform: translateY(-1px);
      }

      /* ── Topic page: collapsible sections + modern cards (v24) ── */

      .sbox-collapsible:hover {
        box-shadow: var(--shadow-lg);
      }

      .sbox-collapsible>.sbox-h:focus-visible {
        outline: 3px solid var(--ac2);
        outline-offset: -3px;
      }

      .sbox-chev {
        margin-left: auto;
        font-size: 1.1rem;
        line-height: 1;
        transition: transform .2s ease;
        opacity: .7;
      }

      .sbox-collapsible.collapsed .sbox-chev {
        transform: rotate(-90deg);
      }

      .sbox-collapsible.collapsed>.sbox-body {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
      }

      .sbox-allctl {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin: 4px 0 12px;
      }

      .sbox-allbtn {
        height: 32px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        font-weight: 700;
        font-size: .8rem;
        cursor: pointer;
        font-family: var(--font);
      }

      .sbox-allbtn:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
      }

      /* ── Sidebar tail: utility links (Backup, Shortcuts) (v24) ── */
      .sb-tail {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--bdr);
      }

      .sb-tail-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        font-size: .85rem;
        font-weight: 600;
        color: var(--tx3);
        cursor: pointer;
        border-radius: 8px;
        transition: background .14s, color .14s;
      }

      .sb-tail-item:hover {
        background: var(--acl);
        color: var(--ac);
      }

      /* ── Study streak + daily goal banner (v24) ── */
      .streak-banner {
        max-width: 860px;
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        gap: 16px;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 14px 18px;
      }

      .streak-flame {
        width: 44px;
        height: 44px;
        flex: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg3);
        color: var(--tx3);
      }

      .streak-flame.on {
        background: #fff3e0;
        color: #f57c00;
      }

      [data-theme="dark"] .streak-flame.on {
        background: #3a2410;
        color: #fb923c;
      }

      .streak-flame svg {
        width: 24px;
        height: 24px;
      }

      .streak-text {
        flex: none;
        min-width: 120px;
      }

      .streak-n {
        font-weight: 800;
        font-size: 1rem;
        color: var(--tx);
      }

      .streak-sub {
        font-size: .78rem;
        color: var(--tx3);
        margin-top: 2px;
      }

      .streak-goal {
        flex: 1;
        min-width: 120px;
      }

      .streak-goal-top {
        display: flex;
        justify-content: space-between;
        font-size: .78rem;
        font-weight: 700;
        color: var(--tx2);
        margin-bottom: 6px;
      }

      .streak-goal-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
      }

      .streak-goal-bar>span {
        display: block;
        height: 100%;
        background: var(--grad-ink, var(--ac));
        border-radius: 999px;
        transition: width .4s ease;
      }

      @media(max-width:560px) {
        .streak-banner {
          flex-wrap: wrap;
        }

        .streak-goal {
          flex: 1 0 100%;
        }
      }

      /* ── Achievements (v24) ── */
      .ach-wrap {
        max-width: 820px;
        margin: 0 auto;
        padding: 8px 0 48px;
      }

      .ach-hero {
        margin-bottom: 22px;
      }

      .ach-h1 {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 700;
        color: var(--tx);
        margin: 0 0 6px;
        letter-spacing: -.3px;
      }

      .ach-sub {
        color: var(--tx2);
        font-size: .95rem;
        margin: 0 0 14px;
      }

      .ach-top-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
      }

      .ach-top-bar>span {
        display: block;
        height: 100%;
        background: var(--grad-ink, var(--ac));
        border-radius: 999px;
        transition: width .4s ease;
      }

      .ach-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
      }

      .ach-card {
        display: flex;
        align-items: center;
        gap: 13px;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        padding: 14px 16px;
        box-shadow: var(--shadow);
        opacity: .62;
        transition: opacity .2s, transform .15s, box-shadow .2s;
      }

      .ach-card.earned {
        opacity: 1;
        border-color: var(--bdr2);
      }

      .ach-card.earned:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
      }

      .ach-ico {
        width: 42px;
        height: 42px;
        flex: none;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg3);
        color: var(--tx3);
      }

      .ach-card.earned .ach-ico {
        background: var(--acl);
        color: var(--ac);
      }

      .ach-ico svg {
        width: 22px;
        height: 22px;
      }

      .ach-meta {
        flex: 1;
        min-width: 0;
      }

      .ach-title {
        font-weight: 800;
        font-size: .95rem;
        color: var(--tx);
      }

      .ach-hint {
        font-size: .8rem;
        color: var(--tx3);
        margin-top: 2px;
      }

      .ach-bar {
        height: 5px;
        border-radius: 999px;
        background: var(--bg3);
        overflow: hidden;
        margin-top: 7px;
      }

      .ach-bar>span {
        display: block;
        height: 100%;
        background: var(--ac);
        opacity: .5;
        border-radius: 999px;
      }

      .ach-state {
        width: 24px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gn);
      }

      .ach-state svg {
        width: 20px;
        height: 20px;
      }

      .ach-toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 10001;
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg2);
        border: 1px solid var(--bdr2);
        border-left: 4px solid var(--ac);
        border-radius: 14px;
        padding: 12px 16px;
        box-shadow: var(--shadow-xl);
        transform: translateY(20px);
        opacity: 0;
        transition: transform .3s ease, opacity .3s ease;
        max-width: 300px;
      }

      .ach-toast.show {
        transform: translateY(0);
        opacity: 1;
      }

      .ach-toast-ico {
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 10px;
        background: var(--acl);
        color: var(--ac);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ach-toast-ico svg {
        width: 20px;
        height: 20px;
      }

      .ach-toast-k {
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--tx3);
      }

      .ach-toast-t {
        font-weight: 800;
        color: var(--tx);
        font-size: .95rem;
      }

      @media(max-width:560px) {
        .ach-grid {
          grid-template-columns: 1fr;
        }

        .ach-toast {
          left: 16px;
          right: 16px;
          max-width: none;
        }
      }

      /* ════════════════════════════════════════════════════════════════════
         ACHIEVEMENTS v2 — tiers, XP/level, stats header, celebration
         ════════════════════════════════════════════════════════════════════ */
      .ach-wrap {
        max-width: 880px;
      }

      /* Hero / stats header */
      .ach-hero {
        background: linear-gradient(150deg, var(--bg2), var(--bg3));
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        padding: 20px 22px;
        box-shadow: var(--shadow-lg);
        margin-bottom: 26px;
      }

      .ach-hero-top {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .ach-level-badge {
        flex: none;
        width: 66px;
        height: 66px;
        border-radius: 18px;
        background: var(--grad-ink, var(--ac));
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(29, 78, 216, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
      }

      .ach-level-n {
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
        font-family: var(--serif);
      }

      .ach-level-lbl {
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: .1em;
        opacity: .85;
        margin-top: 2px;
      }

      .ach-hero-txt {
        flex: 1;
        min-width: 0;
      }

      .ach-xp-bar {
        height: 9px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
        margin-top: 4px;
      }

      .ach-xp-bar>span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--grad-ink, var(--ac));
        transition: width .5s cubic-bezier(.22, 1, .36, 1);
      }

      .ach-xp-lbl {
        font-size: 11px;
        color: var(--tx3);
        margin-top: 5px;
        font-weight: 600;
      }

      .ach-stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 18px;
      }

      .ach-stat {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 12px;
        padding: 10px 8px;
        text-align: center;
      }

      .ach-stat-big {
        font-size: 16px;
        font-weight: 800;
        color: var(--tx);
        font-variant-numeric: tabular-nums;
      }

      .ach-stat-small {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--tx3);
        font-weight: 700;
        margin-top: 2px;
      }

      .ach-next {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--acl);
        border: 1px solid var(--bdr2);
      }

      .ach-next-ico {
        width: 38px;
        height: 38px;
        flex: none;
        border-radius: 10px;
        background: var(--bg2);
        color: var(--ac);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ach-next-ico svg {
        width: 20px;
        height: 20px;
      }

      .ach-next-k {
        font-weight: 800;
        font-size: 13.5px;
        color: var(--tx);
      }

      .ach-next-h {
        font-size: 12px;
        color: var(--tx2);
        margin-top: 1px;
      }

      .ach-next-pct {
        margin-left: auto;
        font-weight: 800;
        font-size: 15px;
        color: var(--ac);
        font-variant-numeric: tabular-nums;
      }

      /* Category sections */
      .ach-cat {
        margin-bottom: 26px;
      }

      .ach-cat-h {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 11px;
      }

      .ach-cat-h>span:first-child {
        font-weight: 800;
        font-size: 15px;
        color: var(--tx);
        letter-spacing: -.2px;
      }

      .ach-cat-count {
        font-size: 12px;
        color: var(--tx3);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      /* Tiered cards */
      .ach-card {
        align-items: flex-start;
        position: relative;
        overflow: hidden;
      }

      .ach-card.locked {
        opacity: .68;
      }

      .ach-card .ach-ico {
        position: relative;
      }

      .ach-tick {
        position: absolute;
        right: -5px;
        bottom: -5px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--gn);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--bg2);
      }

      .ach-tick svg {
        width: 11px;
        height: 11px;
      }

      .ach-title-row {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .ach-tier-chip {
        font-size: 9.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 1px 6px;
        border-radius: 5px;
        flex: none;
      }

      .ach-prog-lbl {
        font-size: 10.5px;
        color: var(--tx3);
        margin-top: 4px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      .ach-earned-lbl {
        font-size: 10.5px;
        color: var(--gn);
        margin-top: 5px;
        font-weight: 800;
      }

      /* Tier accents (left bar + icon + chip) */
      .ach-card.t-bronze {
        border-left: 3px solid #b08d57;
      }

      .ach-card.t-silver {
        border-left: 3px solid #9aa7b4;
      }

      .ach-card.t-gold {
        border-left: 3px solid #e0a52e;
      }

      .ach-card.t-platinum {
        border-left: 3px solid var(--ac);
      }

      .ach-card.t-bronze.earned .ach-ico {
        background: #f4e9da;
        color: #8a6a39;
      }

      .ach-card.t-silver.earned .ach-ico {
        background: #eef1f5;
        color: #5d6b7a;
      }

      .ach-card.t-gold.earned .ach-ico {
        background: #fbf0d4;
        color: #a9781a;
      }

      .ach-card.t-platinum.earned .ach-ico {
        background: var(--acl);
        color: var(--ac);
      }

      .ach-tier-chip {
        background: var(--bg3);
        color: var(--tx3);
      }

      .ach-card.t-bronze .ach-tier-chip {
        background: #f4e9da;
        color: #8a6a39;
      }

      .ach-card.t-silver .ach-tier-chip {
        background: #eef1f5;
        color: #5d6b7a;
      }

      .ach-card.t-gold .ach-tier-chip {
        background: #fbf0d4;
        color: #a9781a;
      }

      .ach-card.t-platinum .ach-tier-chip {
        background: var(--acl);
        color: var(--ac);
      }

      /* Gold/platinum earned cards get a subtle shine */
      .ach-card.t-gold.earned::after,
      .ach-card.t-platinum.earned::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform: skewX(-18deg);
        animation: achShine 4.5s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes achShine {
        0%, 60% { left: -60%; }
        100% { left: 130%; }
      }

      body[data-theme="dark"] .ach-card.t-bronze.earned .ach-ico,
      body[data-theme="dark"] .ach-card.t-bronze .ach-tier-chip {
        background: #2a2114;
        color: #cda66a;
      }

      body[data-theme="dark"] .ach-card.t-silver.earned .ach-ico,
      body[data-theme="dark"] .ach-card.t-silver .ach-tier-chip {
        background: #1c2330;
        color: #aab6c4;
      }

      body[data-theme="dark"] .ach-card.t-gold.earned .ach-ico,
      body[data-theme="dark"] .ach-card.t-gold .ach-tier-chip {
        background: #2c2410;
        color: #e0a52e;
      }

      /* Celebratory toast accents by tier */
      .ach-toast {
        gap: 13px;
      }

      .ach-toast.t-gold {
        border-left-color: #e0a52e;
      }

      .ach-toast.t-platinum {
        border-left-color: var(--ac);
      }

      .ach-toast-body {
        flex: 1;
      }

      .ach-toast.show .ach-toast-ico {
        animation: achPop .5s cubic-bezier(.22, 1.4, .4, 1) both;
      }

      @keyframes achPop {
        0% { transform: scale(.4); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
      }

      .ach-stats-row {
        gap: 8px;
      }

      @media(max-width:560px) {
        .ach-stats-row {
          grid-template-columns: repeat(2, 1fr);
        }

        .ach-level-badge {
          width: 56px;
          height: 56px;
        }
      }

      /* ── Topic readability: emphasise treatment steps, mute secondary asides (v24) ── */
      .rx-line {
        font-weight: 800;
        color: var(--ac);
        letter-spacing: .01em;
      }

      .aside {
        color: var(--tx3);
      }

      [data-theme="dark"] .aside {
        color: var(--tx3);
      }

      /* ── Topic reading flow: force single-column so reading order is top-to-bottom (v24) ──
   The topic content used multi-column grids (topic-grid, mini-point-grid,
   checklist-grid) which split one list across two columns and scrambled the
   reading order. Single column = always clear where to start and stop. */
      .sbox .topic-grid,
      .sbox-body .topic-grid,
      .topic-grid {
        grid-template-columns: 1fr !important;
      }

      .sbox .mini-point-grid,
      .mini-point-grid {
        grid-template-columns: 1fr !important;
      }

      .sbox .checklist-grid,
      .checklist-grid {
        grid-template-columns: 1fr !important;
      }

      .sbox-body>ul>li {
        margin-bottom: 8px;
      }

      /* ═══════════════════════════════════════════════════════════════════════════
   TOPIC STUDY PAGE — polish (v24)
   Refines the screen students read most: a proper masthead, colour-coded
   collapsible section cards, a cleaner pathway bar and tools.
   ═══════════════════════════════════════════════════════════════════════════ */

      /* masthead: bigger serif title with a gradient accent rule under it */
      .tp-title {
        font-family: var(--serif);
        font-size: 30px;
        line-height: 1.15;
        font-weight: 700;
        color: var(--tx);
        letter-spacing: -.4px;
        margin: 6px 0 0;
      }

      /* a thin gradient divider that sits after the category chip */
      .tp-cat::after {
        content: "";
      }

      .topic-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 18px 0 22px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--bdr);
      }

      /* print button: token-based so it works in light AND dark */

      /* collapsible section cards: carry the section colour onto a left border + header */
      .sbox-collapsible {
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        overflow: hidden;
        margin-bottom: 12px;
        box-shadow: var(--shadow);
        transition: box-shadow .15s;
        background: var(--bg2);
        border-left-width: 4px;
        border-left-style: solid;
        border-left-color: var(--bdr2);
      }

      .sbox-collapsible.s-rf,
      .sbox-collapsible.s-ref {
        border-left-color: var(--rd);
      }

      .sbox-collapsible.s-tx,
      .sbox-collapsible.s-tx2 {
        border-left-color: var(--gn);
      }

      .sbox-collapsible.s-cx {
        border-left-color: var(--am);
      }

      .sbox-collapsible.s-dx {
        border-left-color: var(--ac);
      }

      .sbox-collapsible.s-sym {
        border-left-color: var(--am);
      }

      .sbox-collapsible.s-cau {
        border-left-color: var(--pu);
      }

      .sbox-collapsible.s-mon {
        border-left-color: var(--cy);
      }

      .sbox-collapsible>.sbox-h {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        padding: 13px 16px;
        font-weight: 800;
        margin: 0;
        font-size: 13.5px;
        letter-spacing: .04em;
        text-transform: uppercase;
      }

      .sbox-collapsible>.sbox-body {
        max-height: 6000px;
        overflow: hidden;
        transition: max-height .28s ease, opacity .2s ease, padding .2s ease;
        opacity: 1;
        padding: 14px 16px 16px;
        font-size: 15px;
        line-height: 1.6;
      }

      /* drug-MOA block: token-based (was hardcoded dark — broke in light mode) */
      .drug-moa-block {
        background: linear-gradient(135deg, var(--acl), var(--bg3)) !important;
        border: 1px solid var(--bdr2) !important;
        border-radius: 12px;
        padding: 12px 14px;
        margin: 0 24px 12px;
      }

      .drug-moa-hdr {
        font-size: 12px;
        font-weight: 800;
        color: var(--ac) !important;
        letter-spacing: .05em;
        text-transform: uppercase;
        margin-bottom: 7px;
      }

      .drug-moa-text {
        font-size: 14px;
        line-height: 1.55;
        color: var(--tx) !important;
        margin: 0;
        margin-top: 4px;
      }

      /* pathway bar: a touch more polish */

      /* ── OSCE: clickable Bookmarked stat card (v24) ── */
      .osce-stat-clickable {
        cursor: pointer;
        transition: background .15s, transform .12s, box-shadow .15s;
        border-radius: 12px;
      }

      .osce-stat-clickable:hover {
        background: var(--acl);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
      }

      .osce-stat-clickable:hover .osce-stat-val,
      .osce-stat-clickable:hover .osce-stat-lbl {
        color: var(--ac);
      }

      .osce-stat-clickable:focus-visible {
        outline: 3px solid var(--ac2);
        outline-offset: 2px;
      }

      /* ── OSCE station: red-flag / critical-fail scoring (v24) ── */
      .osce-mark-critical-sec {
        border: 1px solid var(--rdb);
        border-radius: var(--rs);
        padding: 8px 10px;
        background: var(--rdl);
      }

      .osce-critical-tag {
        display: inline-block;
        font-size: .62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #fff;
        background: var(--rd);
        padding: 2px 7px;
        border-radius: 5px;
        margin-left: 6px;
        vertical-align: middle;
      }

      .osce-mark-item-critical>label {
        font-weight: 600;
      }

      .osce-flag-ico {
        font-size: .95em;
      }

      .osce-verdict {
        margin-top: 10px;
        padding: 11px 14px;
        border-radius: 10px;
        font-weight: 800;
        font-size: .95rem;
        line-height: 1.45;
        display: none;
      }

      .osce-verdict.pass {
        display: block;
        background: var(--gnl);
        color: var(--gn);
        border: 1px solid var(--gnb);
      }

      .osce-verdict.border {
        display: block;
        background: var(--aml);
        color: var(--am);
        border: 1px solid var(--am);
      }

      .osce-verdict.fail {
        display: block;
        background: var(--rdl);
        color: var(--rd);
        border: 1px solid var(--rdb);
      }

      /* ── OSCE smarter self-marking: skill feedback panel ── */
      .osce-feedback {
        margin-top: 14px;
        padding: 14px 16px;
        border: 1px solid var(--bdr);
        border-radius: 12px;
        background: var(--bg2);
        box-shadow: var(--shadow);
      }

      .osce-fb-h {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tx2);
        margin-bottom: 12px;
      }

      .osce-fb-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 9px;
      }

      .osce-fb-grp {
        flex: 0 0 42%;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--tx);
      }

      .osce-fb-bar {
        flex: 1;
        height: 8px;
        border-radius: 99px;
        background: var(--bg3);
        overflow: hidden;
      }

      .osce-fb-bar-fill {
        display: block;
        height: 100%;
        border-radius: 99px;
        transition: width .35s ease;
      }

      .osce-fb-bar-fill.good {
        background: var(--gn);
      }

      .osce-fb-bar-fill.partial {
        background: var(--am);
      }

      .osce-fb-bar-fill.poor {
        background: var(--rd);
      }

      .osce-fb-num {
        flex: 0 0 auto;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        color: var(--tx3);
        font-weight: 700;
      }

      .osce-fb-advice {
        margin-top: 12px;
        padding: 11px 13px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.5;
        background: var(--acl);
        color: var(--tx);
        border: 1px solid var(--bdr);
      }

      .osce-fb-advice.good {
        background: var(--gnl);
        border-color: var(--gnb);
      }

      .osce-fb-advice.crit {
        background: var(--rdl);
        border-color: var(--rdb);
      }

      .osce-fb-advice em {
        font-style: normal;
        font-weight: 700;
        color: var(--ach);
      }

      /* ── OSCE in-station UX polish ── */
      .osce-timer-display.warn {
        color: var(--am) !important;
      }

      .osce-timer-display.danger {
        color: var(--rd) !important;
        animation: oscePulse 1s ease-in-out infinite;
      }

      @keyframes oscePulse {
        0%, 100% {
          opacity: 1;
        }

        50% {
          opacity: .55;
        }
      }

      .osce-kbd-hint {
        margin-top: 8px;
        font-size: 11.5px;
        color: var(--tx3);
        text-align: center;
      }

      .osce-kbd-hint kbd {
        font: inherit;
        border: 1px solid var(--bdr);
        border-radius: 5px;
        padding: 0 5px;
        margin: 0 1px;
      }

      /* ── Numeracy Test Simulator (v24) ── */
      .cp-mock-btn {
        background: var(--grad-ink, var(--ac)) !important;
        color: #fff !important;
        border-color: var(--ac) !important;
        font-weight: 800 !important;
      }

      .cp-mock-btn:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
      }

      .nsim-wrap {
        max-width: 780px;
        margin: 0 auto;
        padding: 8px 0 48px;
      }

      .nsim-hero {
        text-align: center;
        margin-bottom: 22px;
      }

      .nsim-title {
        font-family: var(--serif);
        font-size: 1.9rem;
        font-weight: 700;
        color: var(--tx);
        margin: 0 0 6px;
      }

      .nsim-sub {
        color: var(--tx2);
        font-size: .98rem;
        margin: 0;
      }

      .nsim-panel {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        box-shadow: var(--shadow);
        padding: 20px;
        margin-bottom: 18px;
      }

      .nsim-panel-h {
        font-weight: 800;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--tx3);
        margin-bottom: 14px;
      }

      .nsim-sec-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
      }

      .nsim-sec {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        background: var(--bg);
        border: 1.5px solid var(--bdr);
        border-radius: var(--rs);
        padding: 13px 14px;
        cursor: pointer;
        transition: border-color .15s, background .15s, transform .12s;
        font-family: var(--font);
      }

      .nsim-sec:hover {
        border-color: var(--bdr2);
        transform: translateY(-1px);
      }

      .nsim-sec.on {
        border-color: var(--ac);
        background: var(--acl);
      }

      .nsim-sec-name {
        flex: 1;
        font-weight: 700;
        color: var(--tx);
        font-size: .92rem;
      }

      .nsim-sec-n {
        font-size: .72rem;
        font-weight: 700;
        color: var(--tx3);
      }

      .nsim-sec-check {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        font-weight: 900;
        color: #fff;
        background: var(--ac);
        opacity: 0;
        transition: opacity .15s;
      }

      .nsim-sec.on .nsim-sec-check {
        opacity: 1;
      }

      .nsim-setup-foot {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }

      .nsim-mini {
        height: 38px;
        padding: 0 16px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font);
      }

      .nsim-mini:hover:not(:disabled) {
        border-color: var(--ac);
        color: var(--ac);
      }

      .nsim-mini.primary {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac);
      }

      .nsim-mini:disabled {
        opacity: .4;
        cursor: not-allowed;
      }

      .nsim-startbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        padding: 16px 20px;
        box-shadow: var(--shadow);
      }

      .nsim-note {
        color: var(--tx2);
        font-size: .9rem;
        flex: 1;
        min-width: 200px;
      }

      .nsim-start {
        height: 48px;
        padding: 0 26px;
        border: 0;
        border-radius: 14px;
        background: var(--grad-ink, var(--ac));
        color: #fff;
        font-weight: 800;
        font-size: 1rem;
        cursor: pointer;
        box-shadow: var(--shadow);
        font-family: var(--font);
      }

      .nsim-start:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
      }

      .nsim-start:disabled {
        opacity: .45;
        cursor: not-allowed;
      }

      /* test */
      .nsim-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .nsim-prog {
        color: var(--tx2);
        font-size: .9rem;
      }

      .nsim-clock {
        font-family: var(--serif);
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--gn);
        font-variant-numeric: tabular-nums;
        min-width: 84px;
        text-align: right;
      }

      .nsim-clock.low {
        color: var(--rd);
      }

      .nsim-progress {
        height: 8px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
        margin-bottom: 16px;
      }

      .nsim-progress>span {
        display: block;
        height: 100%;
        background: var(--grad-ink, var(--ac));
        border-radius: 999px;
        transition: width .25s;
      }

      .nsim-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        box-shadow: var(--shadow);
        padding: 24px;
        margin-bottom: 14px;
      }

      .nsim-q {
        font-size: 1.12rem;
        line-height: 1.55;
        color: var(--tx);
        font-weight: 600;
        margin-bottom: 18px;
      }

      .nsim-opts {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .nsim-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        background: var(--bg);
        border: 1.5px solid var(--bdr);
        border-radius: var(--rs);
        padding: 14px 16px;
        cursor: pointer;
        transition: border-color .14s, background .14s;
        font-family: var(--font);
        font-size: .98rem;
        color: var(--tx);
      }

      .nsim-opt:hover {
        border-color: var(--bdr2);
      }

      .nsim-opt.sel {
        border-color: var(--ac);
        background: var(--acl);
      }

      .nsim-opt-l {
        width: 30px;
        height: 30px;
        flex: none;
        border-radius: 8px;
        background: var(--bg3);
        color: var(--tx2);
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nsim-opt.sel .nsim-opt-l {
        background: var(--ac);
        color: #fff;
      }

      .nsim-opt-t {
        flex: 1;
      }

      .nsim-nav {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
      }

      .nsim-submit {
        height: 44px;
        padding: 0 22px;
        border: 0;
        border-radius: 12px;
        background: var(--gn);
        color: #fff;
        font-weight: 800;
        cursor: pointer;
        font-family: var(--font);
        box-shadow: var(--shadow);
      }

      .nsim-submit:hover {
        filter: brightness(1.05);
      }

      .nsim-dots {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
      }

      .nsim-dot {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx2);
        font-weight: 700;
        font-size: .82rem;
        cursor: pointer;
        font-family: var(--font);
      }

      .nsim-dot.done {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
      }

      .nsim-dot.cur {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac);
      }

      /* results */
      .nsim-result-card {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: var(--r);
        box-shadow: var(--shadow-lg);
        padding: 30px;
        text-align: center;
        margin-bottom: 24px;
      }

      .nsim-score {
        font-family: var(--serif);
        font-size: 2.6rem;
        font-weight: 900;
        line-height: 1;
      }

      .nsim-pct {
        font-size: 1.2rem;
        font-weight: 800;
        margin-top: 4px;
      }

      .nsim-result-msg {
        color: var(--tx);
        margin-top: 10px;
        font-weight: 600;
      }

      .nsim-result-meta {
        color: var(--tx3);
        font-size: .85rem;
        margin-top: 4px;
      }

      .nsim-result-actions {
        margin-top: 18px;
      }

      .nsim-rv-title {
        font-family: var(--serif);
        font-size: 1.3rem;
        color: var(--tx);
        margin: 0 0 14px;
      }

      .nsim-rv {
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-left: 4px solid var(--bdr);
        border-radius: var(--rs);
        padding: 16px 18px;
        margin-bottom: 12px;
      }

      .nsim-rv.ok {
        border-left-color: var(--gn);
      }

      .nsim-rv.no {
        border-left-color: var(--rd);
      }

      .nsim-rv-h {
        font-weight: 800;
        font-size: .82rem;
        color: var(--tx2);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .nsim-rv-i {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: .75rem;
        font-weight: 900;
      }

      .nsim-rv.ok .nsim-rv-i {
        background: var(--gn);
      }

      .nsim-rv.no .nsim-rv-i {
        background: var(--rd);
      }

      .nsim-rv-q {
        color: var(--tx);
        font-weight: 600;
        margin-bottom: 10px;
      }

      .nsim-rv-opt {
        padding: 6px 10px;
        border-radius: 8px;
        color: var(--tx2);
        font-size: .92rem;
        margin-bottom: 4px;
      }

      .nsim-rv-opt.right {
        background: var(--gnl);
        color: var(--tx);
      }

      .nsim-rv-opt.wrong {
        background: var(--rdl);
        color: var(--tx);
      }

      .nsim-tag {
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 1px 6px;
        border-radius: 5px;
        margin-left: 6px;
      }

      .nsim-tag.ok {
        background: var(--gn);
        color: #fff;
      }

      .nsim-tag.no {
        background: var(--rd);
        color: #fff;
      }

      .nsim-rv-skip {
        color: var(--am);
        font-size: .82rem;
        font-weight: 700;
        margin: 6px 0;
      }

      .nsim-rv-w {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--bdr);
        color: var(--tx2);
        font-size: .9rem;
        line-height: 1.5;
      }

      @media(max-width:560px) {
        .nsim-sec-grid {
          grid-template-columns: 1fr;
        }

        .nsim-startbar {
          flex-direction: column;
          align-items: stretch;
        }

        .nsim-start {
          width: 100%;
        }
      }

      /* Daily Random 10 — timed mixed quiz */

      .daily10-home-btn {
        border-color: #2563eb;
        box-shadow: 0 3px 12px rgba(37, 99, 235, .12);
      }

      .d10-wrap {
        max-width: 980px;
        margin: 0 auto;
        padding: 8px 0 40px;
      }

      .d10-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--bdr);
      }

      .d10-kicker {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--tx3);
        margin-bottom: 5px;
      }

      .d10-title {
        font-family: var(--serif);
        font-size: 2rem;
        margin: 0;
        color: var(--tx);
      }

      .d10-sub {
        font-size: 15px;
        color: var(--tx2);
        margin: 6px 0 0;
      }

      .d10-home {
        height: 42px;
        padding: 0 18px;
        border-radius: 12px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        font-weight: 800;
        cursor: pointer;
      }

      .d10-home:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
      }

      .d10-panel,
      .d10-card,
      .d10-summary,
      .d10-empty {
        border: 1.5px solid var(--bdr);
        background: linear-gradient(180deg, var(--bg2), var(--bg));
        border-radius: 18px;
        box-shadow: var(--shadow);
      }

      .d10-panel {
        padding: 18px;
        margin-bottom: 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: center;
      }

      .d10-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin: 14px 0 0;
      }

      .d10-stat {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        padding: 12px;
        background: rgba(224, 242, 254, .42);
      }

      .d10-stat strong {
        font-size: 1.25rem;
        display: block;
        color: var(--tx);
        margin-bottom: 4px;
      }

      .d10-stat span {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 800;
        color: var(--tx3);
      }

      .d10-start {
        height: 48px;
        padding: 0 22px;
        border: 0;
        border-radius: 14px;
        background: #111;
        color: #fff;
        font-weight: 900;
        letter-spacing: .02em;
        cursor: pointer;
        box-shadow: var(--shadow);
      }

      .d10-start:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
      }

      .d10-topbar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        margin-bottom: 14px;
      }

      .d10-progress {
        height: 12px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
      }

      .d10-progress-fill {
        height: 100%;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        border-radius: 999px;
        transition: width .25s ease;
      }

      .d10-timer {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-end;
      }

      .d10-clock {
        font-family: var(--serif);
        font-size: 1.55rem;
        font-weight: 900;
        color: #059669;
        min-width: 78px;
        text-align: right;
        font-variant-numeric: tabular-nums;
      }

      .d10-clock.low {
        color: #dc2626;
      }

      .d10-mini-btn {
        height: 36px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        color: var(--tx);
        font-weight: 800;
        cursor: pointer;
      }

      .d10-mini-btn:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl);
      }

      .d10-score-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 12px;
      }

      .d10-pill {
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--bdr);
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 800;
        background: var(--bg2);
        color: var(--tx2);
      }

      .d10-pill.good {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
      }

      .d10-pill.miss {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
      }

      .d10-card {
        padding: 22px;
      }

      .d10-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
      }

      .d10-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .d10-tag {
        font-size: 12px;
        display: inline-flex;
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 900;
        background: var(--acl);
        color: var(--ac);
        border: 1px solid rgba(156, 74, 26, .18);
      }

      .d10-num {
        font-size: 12px;
        font-weight: 900;
        color: var(--tx3);
        text-transform: uppercase;
        letter-spacing: .08em;
      }

      .d10-topic {
        font-size: 14px;
        font-weight: 900;
        color: var(--tx3);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: .06em;
      }

      .d10-question {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--tx);
        margin: 0 0 18px;
      }

      .d10-reveal {
        width: 100%;
        min-height: 48px;
        border-radius: 14px;
        border: 0;
        background: var(--tx);
        color: var(--bg);
        font-weight: 900;
        cursor: pointer;
        margin: 0 0 14px;
      }

      .d10-answer {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg2);
        padding: 14px 18px;
        margin-top: 10px;
      }

      .d10-answer ul {
        margin: 0;
        padding-left: 18px;
      }

      .d10-answer li {
        margin: 6px 0;
        color: var(--tx2);
      }

      .d10-actions {
        display: flex;
        gap: 10px;
        margin-top: 14px;
      }

      .d10-actions button {
        flex: 1;
        min-height: 46px;
        border-radius: 14px;
        border: 0;
        font-weight: 900;
        cursor: pointer;
      }

      .d10-actions .known {
        background: #059669;
        color: #fff;
      }

      .d10-actions .weak {
        background: #f4f7fc;
        color: var(--tx);
        border: 1.5px solid var(--bdr);
      }

      .d10-summary {
        padding: 22px;
      }

      .d10-score-big {
        font-family: var(--serif);
        font-size: 3rem;
        font-weight: 900;
        color: var(--tx);
        margin: 8px 0;
      }

      .d10-summary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 16px 0;
      }

      .d10-box {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        padding: 14px;
        background: var(--bg2);
      }

      .d10-box h3 {
        font-size: 15px;
        margin: 0 0 10px;
        color: var(--tx);
      }

      .d10-box ul {
        margin: 0;
        padding-left: 18px;
      }

      .d10-box li {
        margin: 6px 0;
        color: var(--tx2);
      }

      .d10-history-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
      }

      .d10-history-item {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid var(--bdr);
        border-radius: 12px;
        padding: 10px 12px;
        background: var(--bg2);
        color: var(--tx2);
      }

      .d10-timeup {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #991b1b;
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 800;
        margin-bottom: 12px;
      }

      body[data-theme="dark"] .d10-panel,
      body[data-theme="dark"] .d10-card,
      body[data-theme="dark"] .d10-summary,
      body[data-theme="dark"] .d10-empty,
      body[data-theme="dark"] .d10-box,
      body[data-theme="dark"] .d10-history-item,
      body[data-theme="dark"] .d10-answer {
        background: #0d1c2a;
        border-color: #1e2d40;
        color: #f5efe6;
      }

      body[data-theme="dark"] .d10-stat {
        background: #0a1628;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .d10-start {
        background: #f5efe6;
        color: #0a1628;
      }

      body[data-theme="dark"] .d10-reveal {
        background: #f5efe6;
        color: #0a1628;
      }

      body[data-theme="dark"] .d10-actions .weak {
        background: #0f1e30;
        color: #f5efe6;
        border-color: #1e2d40;
      }

      body[data-theme="dark"] .d10-pill.good {
        background: #06291d;
        color: #a7f3d0;
        border-color: #065f46;
      }

      body[data-theme="dark"] .d10-pill.miss {
        background: #3a1010;
        color: #fecaca;
        border-color: #7f1d1d;
      }

      body[data-theme="dark"] .d10-timeup {
        background: #3a1010;
        color: #fecaca;
        border-color: #7f1d1d;
      }

      @media(max-width:760px) {

        .d10-hero,
        .d10-panel,
        .d10-topbar,
        .d10-summary-grid {
          grid-template-columns: 1fr;
        }

        .d10-stats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .d10-actions {
          flex-direction: column;
        }

        .d10-timer {
          justify-content: flex-start;
        }
      }

      /* ── Sidebar progress bars ─────────────────── */

      /* ── OSCE Pitfalls section ──────────────────── */
      .s-pitfall {
        border-left: 4px solid #f59e0b;
      }

      .s-pitfall .sbox-h {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
      }

      .s-pitfall ul {
        margin: 0;
        padding-left: 1.2em;
      }

      .s-pitfall li {
        margin-bottom: .5em;
        color: var(--tx, #111);
      }

      /* ── Confidence toggle ──────────────────────── */
      .topic-conf-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 16px 0 8px;
        padding: 12px 16px;
        background: var(--bg2, #f9fafb);
        border-radius: 10px;
        border: 1px solid var(--bg3, #e5e7eb);
      }

      .conf-btn {
        font-size: 13px;
        padding: 7px 16px;
        border-radius: 8px;
        border: 2px solid var(--bg3, #e5e7eb);
        background: #fff;
        cursor: pointer;
        font-weight: 600;
        transition: .2s;
      }

      .conf-btn.conf-yes {
        background: #d1fae5;
        border-color: #10b981;
        color: #065f46;
      }

      .conf-btn.nw-btn {
        border-color: #fcd34d;
      }

      .conf-btn.nw-btn.nw-yes {
        background: #fef3c7;
        border-color: #f59e0b;
        color: #92400e;
      }

      .conf-btn:hover {
        filter: brightness(.96);
      }

      .conf-hint {
        font-size: 12px;
        color: var(--tx3, #9ca3af);
      }

      /* ── Red Flags mode ─────────────────────────── */
      .nbtn.rf-on {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fca5a5;
      }

      body.rfmode .sbox:not(.s-rf):not(.s-ref):not(.s-pitfall) {
        opacity: .35;
        pointer-events: none;
      }

      body.rfmode .s-pitfall,
      .body.rfmode .s-rf,
      .body.rfmode .s-ref {
        opacity: 1;
        pointer-events: auto;
      }

      /* ═══ FINAL COLOUR OVERRIDE — Clinical Blue-White ═══ */
      html,
      body {
        background: #f4f7fc;
        color: #0a1f44;
      }

      .nav {
        background: rgba(240, 249, 255, 0.95);
        border-bottom-color: #c7d7f0;
      }

      .sidebar {
        background: #ffffff;
        border-right-color: #c7d7f0;
      }

      /* ══ FINAL THEME OVERRIDE — Deep Clinical Navy (bold redesign) ══ */

      /* Light mode variables */

      /* Dark mode variables */
      [data-theme="dark"],
      [data-theme=dark] {
        --bg: #070d1c;
        --bg2: #0e1830;
        --bg3: #0b1428;
        --bg4: #16224a;
        --tx: #e8eefc;
        --tx2: #93b4e6;
        --tx3: #7186b3;
        --ac: #60a5fa;
        --acl: #122044;
        --ach: #93c5fd;
        --ac2: #2563eb;
        --bdr: #213352;
        --bdr2: #2f4a78;
        --aml: #1c1a00;
        --master-border: #2f4a78;
      }

      /* Light mode layout */
      html,
      body {
        background: #ffffff;
        color: #0a1f44;
      }

      [data-theme="dark"] html,
      [data-theme="dark"] body,
      [data-theme=dark] body {
        background: #0a1628;
        color: #e6edfb;
      }

      .nav {
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid #c7d7f0;
      }

      .sidebar {
        background: #ffffff;
        border-right: 1px solid #c7d7f0;
      }

      [data-theme=dark] .sidebar {
        background: #0f2035;
        border-right-color: #1e3a52;
      }

      .main,
      #mainContent {
        background: #ffffff;
      }

      [data-theme=dark] .main,
      [data-theme=dark] #mainContent {
        background: #0a1628;
      }

      /* Inputs */
      .home-search input,
      .professional-search input,
      #qi,
      #si {
        background: #ffffff;
        border-color: #c7d7f0;
        color: #0a1f44;
      }

      [data-theme=dark] .home-search input,
      [data-theme=dark] #qi,
      [data-theme=dark] #si {
        background: #0f2035;
        border-color: #1e3a52;
        color: #e6edfb;
      }

      /* Disclaimer box */
      .home-disc,
      .search-disc {
        background: #f4f7fc;
        border-color: #c7d7f0;
        color: #1d4ed8;
      }

      [data-theme=dark] .home-disc,
      [data-theme=dark] .search-disc {
        background: #0d1c30;
        border-color: #1e3a52;
        color: #93b4e6;
      }

      /* Action buttons */

      [data-theme=dark] .home-action-btn {
        background: #0f2035;
        border-color: #1e3a52;
        color: #93b4e6;
      }

      [data-theme=dark] .home-action-btn.primary {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
      }

      /* Search button */
      .home-search button,
      .professional-search button {
        font-family: var(--font);
        background: #1d4ed8;
        color: #ffffff;
        border: none;

        font-weight: 500;
        letter-spacing: 0.03em;
      }

      .home-search button:hover {
        opacity: .9;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(156, 74, 26, .3);
        background: #1e3a8a;
      }

      /* Hero tighten */
      .hero.professional-home {
        padding-top: 32px;
        padding-bottom: 24px;
      }

      /* Global font */
      body,
      .nav,
      .sidebar,
      .main,
      button,
      input {
        font-family: var(--font);
      }

      h1,
      h2,
      h3,
      .tp-title,
      .logo-text {
        font-family: 'DM Sans', var(--font);

        font-weight: 600;
        letter-spacing: -0.02em;
      }

      /* Cards and sections */
      .sys-card,
      .topic-card {
        background: #ffffff;
        border-color: #c7d7f0;
      }

      [data-theme=dark] .sys-card,
      [data-theme=dark] .topic-card {
        background: #0f2035;
        border-color: #1e3a52;
      }

      .sbox {
        background: #ffffff;
      }

      [data-theme=dark] .sbox {
        background: #0f2035;
      }

      /* Sidebar items */

      [data-theme=dark] .sb-item {
        color: #e6edfb;
      }

      [data-theme=dark] .sb-item.active {
        background: #1d4ed8;
        color: #ffffff;
      }

      /* Sidebar polish */

      .sb-item:hover .sb-progress-pct {
        opacity: 1;
      }

      .sb-progress-pct:not([data-zero="true"]) {
        opacity: 1;
      }

      .sb-progress-fill:not([style*="width: 0"])~.sb-progress-pct {
        opacity: 1;
      }

      .sb-label,
      .sb-lab {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: #6b84b4;
        text-transform: uppercase;
      }

      .cnt {
        font-size: 11px;
        background: #e6edfb;
        color: #1d4ed8;
        font-weight: 600;
      }

      [data-theme=dark] .cnt {
        background: #1e3a52;
        color: #93b4e6;
      }

      [data-theme=dark] .sb-label,
      [data-theme=dark] .sb-lab {
        color: #3a7fa0;
      }

      /* Nav polish */
      .logo-text {
        font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      .logo-sub,
      .logo-tagline {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #6b84b4;
        text-transform: uppercase;
      }

      .nbtn {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        padding: 6px 14px;
      }

      /* Hero polish */

      .home-kicker,
      [class*="kicker"] {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 11px;
        letter-spacing: 0.12em;
        font-weight: 600;
        color: #1d4ed8;
        text-transform: uppercase;
      }

      .hero h1,
      .home-title {
        font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 700;
        letter-spacing: -0.03em;
        color: #0a1f44;
      }

      [data-theme=dark] .hero h1,
      [data-theme=dark] .home-title {
        color: #e6edfb;
      }

      .hero p,
      .home-subtitle {
        font-size: 15px;
        color: #1d4ed8;
        font-weight: 400;
      }

      /* Section headings */

      /* System cards */
      .sys-card {
        border: 1.5px solid #c7d7f0;
        border-radius: 12px;
        transition: all .15s;
      }

      .sys-card:hover {
        border-color: #1d4ed8;
        box-shadow: 0 4px 16px rgba(3, 105, 161, .12);
        transform: translateY(-2px);
      }

      [data-theme=dark] .sys-card {
        border-color: #1e3a52;
      }

      [data-theme=dark] .sys-card:hover {
        border-color: #60a5fa;
      }

      /* Topic page */
      .tp-title {
        font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      .sbox-h {
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      /* Progress bar — visible, based on confidence not visits */

      .sb-progress-bar {
        flex: 1;
        height: 3px;
        background: #e6edfb;
        border-radius: 99px;
        overflow: hidden;
      }

      .sb-progress-fill {
        height: 100%;
        background: var(--grad-ink);
        border-radius: 999px;
        transition: width .5s cubic-bezier(.22,1,.36,1);
      }

      .sb-progress-pct {
        font-size: 10px;
        color: #1d4ed8;
        min-width: 26px;
        text-align: right;
        opacity: 0;
        transition: opacity .2s;
        display: inline;
      }

      [data-theme=dark] .sb-progress-bar {
        background: #1e3a52;
      }

      [data-theme=dark] .sb-progress-fill {
        background: var(--grad-ink);
      }

      [data-theme=dark] .sb-progress-pct {
        color: #93b4e6;
      }

      /* Mark as Confident — dark mode fix */
      [data-theme=dark] .conf-btn {
        background: #0f2035;
        border-color: #2a4f70;
        color: #93b4e6;
      }

      [data-theme=dark] .conf-btn.conf-yes {
        background: #052e16;
        border-color: #10b981;
        color: #6ee7b7;
      }

      [data-theme=dark] .topic-conf-row {
        background: #0d1c30;
        border-color: #1e3a52;
      }

      [data-theme=dark] .conf-hint {
        color: #3a7fa0;
      }

      /* Remove left blue border line from sections */
      .sbox,
      .s-rf,
      .s-ref,
      .s-tx,
      .s-tx2,
      .s-def,
      .s-dx,
      .s-cx,
      .s-pitfall,
      .s-checklist,
      [class^="s-"] {
        border-left: none;
      }

      /* Fix horizontal overflow — wrap all text */
      .sbox-body,
      .sbox-body p,
      .sbox-body li,
      .sbox-body ul,
      .drug-txt,
      .osce-txt,
      .drug-block {
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
      }

      .main,
      #mainContent {
        overflow-x: hidden;
      }

      .sbox {
        overflow: hidden;
      }

      /* ════ PRESCRIPTION LAW — unified type scale ════
   Base: 14px / 1.7 line-height, Inter throughout
   Labels: 13px 600 weight, #1d4ed8
   Body:   14px 400 weight, #1e293b
   No font-size variation beyond these two levels
   ═══════════════════════════════════════════════ */

      /* Recovered-section sub-heading (── Route & Timing ──) */
      .pl-subhead {
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #1d4ed8;
        margin: 14px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid #c7d7f0;
      }

      /* Table */
      .pl-table-wrap {
        overflow-x: auto;
        margin: 14px 0 18px;
        border-radius: 10px;
        border: 1.5px solid #c7d7f0;
      }

      .pl-table {
        width: 100%;
        border-collapse: collapse;
      }

      .pl-table thead {
        background: #1d4ed8;
      }

      .pl-table tr:last-child td {
        border-bottom: none;
      }

      .pl-table tr:hover td {
        background: #f8fbff;
      }

      .pl-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 99px;
        font-weight: 700;
      }

      .pl-slevel {
        color: #6b84b4;
        margin-top: 2px;
      }

      .pl-s1 {
        background: #fee2e2;
        color: #991b1b;
      }

      .pl-s2 {
        background: #fef3c7;
        color: #92400e;
      }

      .pl-s3 {
        background: #fef9c3;
        color: #854d0e;
      }

      .pl-s4 {
        background: #dcfce7;
        color: #166534;
      }

      .pl-s5 {
        background: #e6edfb;
        color: #1e3a8a;
      }

      .pl-note {
        background: #eff6ff;
        border-left: 3px solid #1d4ed8;
        padding: 10px 14px;
        border-radius: 0 8px 8px 0;
        color: #0a1f44;
        margin: 10px 0;
      }

      /* Checklist */

      .pl-check-row:last-child {
        border-bottom: none;
      }

      .pl-check-label {
        font-weight: 600;
        color: #0a1f44;
        margin-bottom: 4px;
      }

      .pl-check-body {
        font-weight: 400;
        color: #1e293b;
      }

      /* Alerts */

      .pl-alert-row:last-child {
        margin-bottom: 0;
      }

      .pl-alert-label {
        font-weight: 700;
        color: #991b1b;
        margin-bottom: 5px;
      }

      .pl-alert-body {
        font-weight: 400;
        color: #1e293b;
      }

      /* Procedures */

      .pl-proc-label {
        font-weight: 700;
        color: #1d4ed8;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: .04em;
      }

      .pl-proc-body {
        font-weight: 400;
        color: #1e293b;
      }

      .pl-proc-list li:last-child {
        margin-bottom: 0;
      }

      /* Concepts */

      .pl-concept-card:last-child {
        margin-bottom: 0;
      }

      .pl-concept-label {
        font-weight: 700;
        color: #1d4ed8;
        margin-bottom: 5px;
      }

      .pl-concept-body {
        font-weight: 400;
        color: #1e293b;
      }

      /* Dark mode */
      [data-theme=dark] .pl-table thead {
        background: #1e3a8a;
      }

      [data-theme=dark] .pl-table td {
        border-bottom-color: #1e3a52;
        color: #cbd5e1;
      }

      [data-theme=dark] .pl-table tr:hover td {
        background: #0d1c30;
      }

      [data-theme=dark] .pl-table-wrap {
        border-color: #1e3a52;
      }

      [data-theme=dark] .pl-check-row {
        border-bottom-color: #1e3a52;
      }

      [data-theme=dark] .pl-check-label {
        color: #e6edfb;
      }

      [data-theme=dark] .pl-check-body {
        color: #cbd5e1;
      }

      [data-theme=dark] .pl-alert-label {
        color: #fca5a5;
      }

      [data-theme=dark] .pl-alert-body {
        color: #cbd5e1;
      }

      [data-theme=dark] .pl-proc-row {
        border-bottom-color: #1e3a52;
      }

      [data-theme=dark] .pl-proc-label {
        color: #93b4e6;
      }

      [data-theme=dark] .pl-proc-body,
      [data-theme=dark] .pl-proc-list li {
        color: #cbd5e1;
      }

      [data-theme=dark] .pl-concept-card {
        background: #0d1c30;
        border-color: #1e3a52;
      }

      [data-theme=dark] .pl-concept-label {
        color: #93b4e6;
      }

      [data-theme=dark] .pl-concept-body {
        color: #cbd5e1;
      }

      [data-theme=dark] .pl-note {
        background: #0c2a3e;
        border-left-color: #60a5fa;
        color: #e6edfb;
      }

      [data-theme=dark] .pl-slevel {
        color: #3a7fa0;
      }

      /* ════ GLOBAL TOPIC BODY — one consistent type scale ════
   Applies to ALL topic pages, not just prescription law.
   14px / 1.75 / Inter — no exceptions.
   ════════════════════════════════════════════════════ */
      .drug-block,
      .drug-block * {}

      .drug-lbl,
      .drug-lbl * {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .drug-txt,
      .drug-txt * {
        padding-left: 0;
      }

      .osce-lbl,
      .osce-lbl * {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .osce-txt,
      .osce-txt * {}

      .sbox-body p,
      .sbox-body li,
      .sbox-body span:not(.key-term):not(.g-ref):not(.warn-ref):not(.step-badge) {}

      .key-term {
        font-weight: 700;
        color: var(--tx);
        background: var(--bg4);
        padding: 0 4px;
        border-radius: 4px;
        font-size: .92em;}

      .g-ref {
        display: inline-block;
        background: var(--acl);
        color: var(--ac);
        border: 1px solid rgba(37, 99, 235, .2);
        padding: 1px 7px;
        border-radius: 99px;
        font-size: 10.5px;
        font-weight: 700;
        vertical-align: middle;}

      .warn-ref {
        display: inline-block;
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fca5a5;
        padding: 1px 7px;
        border-radius: 99px;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        vertical-align: middle;}

      /* ═══════════════════════════════════════════════════════════════════════
   FINAL INTEGRATED SHAPE SYSTEM — fixed sidebar + boxed topic sections
   ═══════════════════════════════════════════════════════════════════════ */
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
        min-height: 100%
      }

      body {
        font-family: var(--font);
        font-size: 15px;
        line-height: 1.68;
        color: var(--tx);
        background: var(--bg);
        background-image: none
      }

      button,
      input,
      textarea,
      select {
        font-family: var(--font)
      }

      .logo,
      .logo-text,
      .hero h1,
      .tp-title,
      .sys-header h1,
      .sbox-h,
      .group-card-hdr {
        font-family: var(--serif)
      }

      /* Navbar: original clean proportions */
      .nav {
        position: sticky;
        top: 0;
        z-index: 120;
        height: var(--nav-h);
        min-height: var(--nav-h);
        padding: 0 28px;
        gap: 14px;
        background: rgba(240, 249, 255, .94);
        border-bottom: 1px solid var(--bdr);
        box-shadow: 0 1px 0 var(--bdr), 0 4px 18px rgba(3, 105, 161, .06)
      }

      [data-theme=dark] .nav {
        background: rgba(15, 32, 53, .94);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 2px 16px rgba(0, 0, 0, .5);
        border-bottom-color: #1e3a52
      }

      .logo img,
      .logo-img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        object-fit: contain
      }

      .logo-text {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.3px;
        color: var(--ac);
        background: none;
        -webkit-text-fill-color: currentColor
      }

      .search-wrap {
        flex: 1;
        max-width: 420px;
        position: relative;
        margin: 0 24px
      }

      .search-wrap input {
        height: 38px;
        border-radius: 10px;
        font-size: 13.5px;
        padding: 9px 14px 9px 40px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr)
      }

      .nav-btns {
        display: flex;
        gap: 8px;
        margin-left: auto
      }

      .nbtn,
      .menu-btn {
        height: 36px;
        min-height: 36px;
        padding: 0 16px;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 600;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        color: var(--tx2);
        box-shadow: var(--shadow)
      }

      .nbtn:hover,
      .menu-btn:hover {
        border-color: var(--ac);
        color: var(--ac);
        background: var(--acl)
      }

      /* Desktop app frame: sidebar is fixed, full-height, and never cuts off mid-page */
      @media (min-width:761px) {
        .layout {
          display: block;
          min-height: calc(100vh - var(--nav-h));
          background: linear-gradient(90deg, var(--bg2) 0 264px, var(--bg) 264px)
        }

        .sidebar {
          position: fixed;
          left: 0;
          top: var(--nav-h);
          bottom: 0;
          width: 264px;
          height: auto;
          min-height: 0;
          z-index: 90;
          overflow-y: auto;
          flex: none;
          background: var(--bg2);
          border-right: 1px solid var(--bdr);
          padding: 12px 8px;
          box-shadow: none
        }

        .main {
          display: block;
          width: calc(100% - 264px);
          max-width: none;
          margin: 0 0 0 264px;
          padding: 32px 40px 56px;
          background: var(--bg);
          min-height: calc(100vh - var(--nav-h))
        }

        .page {
          max-width: 960px;
          margin: 0 auto
        }

        #home.page {
          max-width: 1040px
        }
      }

      /* Sidebar compactness */
      .sidebar::-webkit-scrollbar {
        width: 4px
      }

      .sidebar::-webkit-scrollbar-thumb {
        background: var(--bdr2);
        border-radius: 9px
      }

      .sb-label {
        font-size: 9px;
        letter-spacing: 2px;
        padding: 18px 14px 5px;
        color: var(--tx3)
      }

      .sb-item .cnt,
      .cnt {
        font-size: 10px;
        font-weight: 700;
        background: var(--bg4);
        color: var(--tx3);
        border-radius: 99px;
        min-width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center
      }

      .sb-item.active .cnt {
        background: rgba(255, 255, 255, .22);
        color: #fff
      }

      /* Homepage: first-version scale, logo kept */
      .hero,
      .professional-home {
        text-align: center;
        padding: 44px 0 14px;
        margin: 0 auto;
        max-width: 760px
      }

      .home-logo-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 12px;
        margin-bottom: 12px
      }

      .home-logo-img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        filter: drop-shadow(0 6px 14px rgba(3, 105, 161, .18))
      }

      .home-kicker {
        font-family: var(--font);
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--tx2);
        margin: 6px 0 8px;
        font-weight: 700
      }

      .hero h1 {
        font-family: var(--serif);
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -.5px;
        font-weight: 700;
        color: var(--tx);
        background: none;
        -webkit-text-fill-color: var(--tx);
        margin-bottom: 8px
      }

      .hero p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--tx2);
        max-width: 580px;
        margin: 12px auto 0
      }

      .home-search,
      .professional-search {
        position: relative;
        display: flex;
        align-items: center;
        max-width: 640px;
        margin: 22px auto 24px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 14px;
        box-shadow: var(--shadow);
        padding: 0
      }

      /* ── Live search dropdown ── */
      .live-results {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 60;
        background: var(--bg2);
        border: 1px solid var(--bdr2);
        border-radius: 14px;
        box-shadow: var(--shadow-xl);
        overflow: hidden;
        max-height: 60vh;
        overflow-y: auto;
        text-align: left;
      }

      .live-results.show {
        display: block;
      }

      .live-item {
        padding: 11px 16px;
        cursor: pointer;
        border-bottom: 1px solid var(--bdr);
        transition: background .12s ease;
      }

      .live-item:last-of-type {
        border-bottom: none;
      }

      .live-item:hover,
      .live-item.sel {
        background: var(--acl);
      }

      .live-item-main {
        display: flex;
        align-items: baseline;
        gap: 10px;
      }

      .live-item-title {
        font-weight: 700;
        font-size: 14.5px;
        color: var(--tx);
        flex: 1;
        min-width: 0;
      }

      .live-item-cat {
        font-size: 11px;
        color: var(--tx3);
        font-weight: 600;
        white-space: nowrap;
        flex: none;
      }

      .live-item-snip {
        font-size: 12px;
        color: var(--tx2);
        line-height: 1.45;
        margin-top: 3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .live-foot {
        padding: 10px 16px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ac);
        cursor: pointer;
        background: var(--bg3);
        text-align: center;
      }

      .live-foot:hover {
        background: var(--acl);
      }

      .live-empty {
        padding: 18px 16px;
        text-align: center;
        color: var(--tx3);
        font-size: 13.5px;
      }

      .home-search svg {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--tx3);
        pointer-events: none;
        z-index: 1
      }

      .home-search input {
        flex: 1 1 auto;
        width: 100%;
        height: 54px;
        border: 0;
        background: transparent;
        color: var(--tx);
        font-size: 15px;
        outline: 0;
        padding: 0 14px 0 50px
      }

      .home-search input::placeholder {
        color: var(--tx3)
      }

      .home-search button {
        flex: 0 0 auto;
        margin-right: 8px;
        height: 40px;
        border: 0;
        border-radius: 10px;
        padding: 0 22px;
        background: var(--grad-ink);
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(3, 105, 161, .22)
      }

      .search-disc,
      .home-disc {
        max-width: 860px;
        margin: 0 auto 12px;
        padding: 10px 14px;
        border-radius: 10px;
        background: var(--aml);
        color: var(--tx3);
        font-size: 12px;
        line-height: 1.5;
        text-align: left;
        border-left: 3px solid var(--am)
      }

      .home-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        display: grid;
        gap: 12px;
        max-width: 860px;
        margin: 0 auto 12px
      }

      .home-actions-tools {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        margin: 0 auto 26px
      }

      .home-action-btn span {
        color: inherit
      }

      /* Body-system cards: original elegant proportions */
      .sys-grid,
      .professional-systems {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        max-width: 860px;
        margin: 0 auto 34px
      }

      .sys-card,
      .professional-card {
        min-height: 118px;
        padding: 18px 18px 16px;
        border-radius: 16px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        box-shadow: var(--shadow);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--tx);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
      }

      .sys-card:hover,
      .professional-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--ac)
      }

      .sys-card::before,
      .sys-card::after {
        display: none
      }

      .sys-card h3,
      .professional-card h3 {
        font-family: var(--font);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 800;
        margin: 0 0 8px;
        color: var(--tx)
      }

      .sys-card p,
      .professional-card p {
        font-size: 13px;
        line-height: 1.5;
        color: var(--tx3);
        margin: 0
      }

      .card-arrow,
      .arr {
        font-size: 17px;
        color: var(--tx2);
        margin-top: 8px
      }

      /* Topic pages: each content section has a real card, not loose page text */
      .back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        color: var(--tx2);
        cursor: pointer;
        margin-bottom: 22px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        transition: all .15s;
        box-shadow: var(--shadow);
        text-decoration: none;
        height: 36px
      }

      .tp-title,
      .sys-header h1 {
        font-family: var(--serif);
        font-size: 34px;
        line-height: 1.12;
        letter-spacing: -.5px;
        color: var(--tx);
        margin-bottom: 10px
      }

      .tp-cat {
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 26px;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--rd);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg3);
        padding: 0 14px;
        border-radius: 999px;
        border: 1.5px solid var(--bdr);
        margin: 12px 0 18px;
        border-width: 1px;
        box-shadow: var(--shadow);
        height: 32px
      }

      .topic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 12px;
        margin-top: 18px
      }

      .topic-card {
        min-height: 76px;
        border-radius: 14px;
        padding: 16px 18px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
      }

      .topic-card h3 {
        font-size: 15.5px;
        font-weight: 600;
        flex: 1;
        line-height: 1.35;
        color: var(--tx);
        margin: 0
      }

      .sbox {
        border-radius: 16px;
        border: 1.5px solid var(--bdr);
        background: var(--bg2);
        box-shadow: var(--shadow);
        margin: 0 0 18px;
        overflow: hidden
      }

      .sbox-h {
        font-family: var(--serif);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .03em;
        padding: 14px 18px;
        background: var(--bg3);
        border-bottom: 1px solid var(--bdr);
        color: var(--tx)
      }

      .sbox-body {
        padding: 16px 18px
      }

      .sbox-body li {
        position: relative;
        list-style: none;
        font-size: 14.8px;
        line-height: 1.65;
        margin: 0;
        padding: 10px 0 10px 24px;
        color: var(--tx);
        border-bottom: 1px solid rgba(186, 230, 253, .55)
      }

      .sbox-body li:last-child {
        border-bottom: 0
      }

      .sbox-body li::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 20px;
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: var(--ac);
        opacity: .7
      }

      .sbox p {
        font-size: 14.8px;
        line-height: 1.7;
        color: var(--tx)
      }

      .print-sheet-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1.5px solid var(--bdr2) !important;
        background: var(--bg2) !important;
        color: var(--ac) !important;
        border-radius: 10px !important;
        padding: 0 16px;
        font: 700 13px/1 var(--font);
        cursor: pointer;
        box-shadow: var(--shadow);
        transition: all .15s;
        font-weight: 700 !important;
        height: 36px;
        font-size: 13px
      }

      .print-sheet-btn:hover {
        border-color: var(--ac) !important;
        background: var(--acl) !important;
        color: var(--ac);
        transform: translateY(-1px)
      }

      /* OSCE checklist: proper boxed grid, no merged words like OpenConfirm */
      .s-checklist {
        border-color: var(--bdr2);
        background: linear-gradient(180deg, var(--bg2), rgba(224, 242, 254, .35))
      }

      .s-checklist .sbox-h {
        background: #e6edfb;
        color: #0a1f44;
        border-bottom: 1px solid rgba(3, 105, 161, .18);
        text-transform: uppercase;
        letter-spacing: .08em
      }

      .s-checklist .sbox-body {
        padding: 18px
      }

      .check-note {
        margin: 0 0 14px;
        padding: 0;
        color: var(--tx3);
        font-size: 13px;
        line-height: 1.5
      }

      .checklist-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
      }

      .checklist-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 10px;
        min-height: 84px;
        padding: 14px 15px;
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg2);
        box-shadow: 0 1px 3px rgba(3, 105, 161, .05)
      }

      .checklist-card .inline-lbl {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border: 1px solid rgba(3, 105, 161, .16);
        border-radius: 999px;
        background: var(--acl);
        color: var(--ac);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        padding: 7px 9px;
        margin: 0
      }

      .checklist-card .item-sentence {
        display: block;
        color: var(--tx);
        font-size: 14px;
        line-height: 1.55;
        padding-top: 1px
      }

      .checklist-card .item-copy {
        display: contents
      }

      /* Dashboard: under body-system cards only, zeroed for sharing */
      .exam-dashboard,
      .readiness-dashboard {
        max-width: 860px;
        margin: 10px auto 36px;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 16px
      }

      .exam-dashboard .stat-value,
      .readiness-dashboard .stat-value {
        font-size: 20px;
        font-weight: 800;
        color: var(--tx)
      }

      .nw-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px
      }

      .nw-link {
        display: inline-block;
        font-size: 12px;
        padding: 3px 9px;
        border-radius: 999px;
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #f59e0b;
        text-decoration: none;
        cursor: pointer
      }

      .nw-link:hover {
        filter: brightness(.96)
      }

      .nw-more {
        display: inline-block;
        margin-top: 6px;
        font-size: 11.5px;
        color: var(--tx3)
      }

      [data-theme=dark] .nw-link {
        background: #3a2c08;
        color: #fcd34d;
        border-color: #92400e
      }

      /* Dark theme */

      .mini-panel {
        border-color: var(--bdr2);
        background: linear-gradient(180deg, var(--bg2), rgba(224, 242, 254, .24));
        margin: 18px 0
      }

      .mini-panel .sbox-h {
        background: #e6edfb;
        color: #0a1f44;
        border-bottom: 1px solid rgba(3, 105, 161, .18);
        text-transform: uppercase;
        letter-spacing: .08em
      }

      .mini-panel .sbox-body {
        padding: 16px 18px
      }

      .mini-point-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
      }

      .mini-point-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 10px;
        min-height: 74px;
        padding: 13px 15px;
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg2);
        box-shadow: 0 1px 3px rgba(3, 105, 161, .05)
      }

      .mini-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border: 1px solid rgba(3, 105, 161, .16);
        border-radius: 999px;
        background: var(--acl);
        color: var(--ac);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        padding: 7px 9px;
        margin-top: 1px
      }

      .mini-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--tx3);
        margin-top: 8px;
        opacity: .9
      }

      .mini-copy {
        display: block;
        color: var(--tx);
        font-size: 14px;
        line-height: 1.55;
        padding-top: 1px
      }

      .osce-trap-panel .sbox-h {
        color: #0c4a6e
      }

      .critical-fail-panel .sbox-h {
        color: #7f1d1d;
        background: #fee2e2;
        border-bottom-color: #fecaca
      }

      .critical-fail-panel {
        border-color: #fecaca;
        background: linear-gradient(180deg, var(--bg2), rgba(254, 226, 226, .3))
      }

      .guidance-check-panel .sbox-h {
        color: #064e3b;
        background: #dcfce7;
        border-bottom-color: #bbf7d0
      }

      .guidance-check-panel {
        border-color: #bbf7d0;
        background: linear-gradient(180deg, var(--bg2), rgba(220, 252, 231, .3))
      }

      body[data-theme="dark"] {
        background: var(--bg);
        color: var(--tx)
      }

      body[data-theme="dark"] .layout {
        background: linear-gradient(90deg, var(--bg2) 0 264px, var(--bg) 264px)
      }

      body[data-theme="dark"] .main {
        background: var(--bg)
      }

      body[data-theme="dark"] .sidebar,
      body[data-theme="dark"] .home-action-btn:not(.primary),
      body[data-theme="dark"] .sys-card,
      body[data-theme="dark"] .professional-card,
      body[data-theme="dark"] .topic-card,
      body[data-theme="dark"] .sbox,
      body[data-theme="dark"] .home-search,
      body[data-theme="dark"] .checklist-card,
      body[data-theme="dark"] .mini-point-card {
        background: var(--bg2);
        color: var(--tx);
        border-color: var(--bdr)
      }

      body[data-theme="dark"] .home-action-btn.primary,
      body[data-theme="dark"] .home-search button {
        color: #061521;
        background: linear-gradient(135deg, #93b4e6, #60a5fa)
      }

      body[data-theme="dark"] .search-disc {
        background: #10243a;
        color: #9bd8f6;
        border-left-color: #60a5fa
      }

      body[data-theme="dark"] .sbox-h,
      body[data-theme="dark"] .s-checklist .sbox-h,
      body[data-theme="dark"] .mini-panel .sbox-h,
      body[data-theme="dark"] .critical-fail-panel .sbox-h,
      body[data-theme="dark"] .guidance-check-panel .sbox-h {
        background: #10243a;
        color: #e6edfb;
        border-bottom-color: #1e3a52
      }

      body[data-theme="dark"] .check-note {
        color: #93c5fd
      }

      body[data-theme="dark"] .checklist-card .inline-lbl,
      body[data-theme="dark"] .mini-pill {
        background: #0c2a3e;
        color: #93b4e6;
        border-color: #1e3a52
      }

      body[data-theme="dark"] .mini-copy {
        color: var(--tx)
      }

      @media (max-width:1100px) and (min-width:761px) {
        .layout {
          background: linear-gradient(90deg, var(--bg2) 0 240px, var(--bg) 240px)
        }

        .sidebar {
          width: 240px
        }

        .main {
          width: calc(100% - 240px);
          margin-left: 240px;
          padding: 28px 28px 44px
        }

        body[data-theme="dark"] .layout {
          background: linear-gradient(90deg, var(--bg2) 0 240px, var(--bg) 240px)
        }

        .sys-grid,
        .professional-systems {
          grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .checklist-grid {
          grid-template-columns: 1fr
        }
      }

      @media (max-width:760px) {

        .main {
          max-width: none;
          width: 100%;
          margin: 0;
          padding: 24px 16px 38px
        }

        .page {
          max-width: none
        }

        .logo {
          flex: 1 1 auto;
          min-width: 0
        }

        .logo-text {
          font-size: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis
        }

        .search-wrap {
          order: 3;
          flex: 1 0 100%;
          max-width: none;
          margin: 3px 0 0
        }

        .search-wrap input {
          height: 38px
        }

        .nav-btns {
          margin-left: 0;
          gap: 6px
        }

        .nbtn,
        .menu-btn {
          height: 34px;
          min-height: 34px;
          padding: 0 10px;
          font-size: 11.5px
        }

        .menu-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center
        }

        .hero,
        .professional-home {
          padding: 28px 0 10px
        }

        .home-logo-img {
          width: 58px;
          height: 58px
        }

        .home-kicker {
          font-size: 10px
        }

        .hero h1 {
          font-size: 30px
        }

        .hero p {
          font-size: 14px;
          line-height: 1.6
        }

        .home-search {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 12px;
          margin: 18px auto 18px
        }

        .home-search svg {
          left: 24px;
          top: 37px
        }

        .home-search input {
          height: 44px;
          padding: 0 12px 0 42px;
          border: 1.5px solid var(--bdr);
          border-radius: 10px;
          background: var(--bg2)
        }

        .home-search button {
          position: static;
          width: 100%;
          height: 42px
        }

        .home-action-btn {
          min-height: 48px
        }

        .sys-grid,
        .professional-systems,
        .topic-grid {
          grid-template-columns: 1fr;
          gap: 11px
        }

        .sys-card,
        .professional-card {
          min-height: 96px
        }

        .tp-title,
        .sys-header h1 {
          font-size: 28px
        }

        .sbox-body {
          padding: 14px 15px
        }

        .sbox li,
        .sbox p {
          font-size: 14px
        }

        .checklist-grid,
        .mini-point-grid {
          grid-template-columns: 1fr
        }

        .checklist-card,
        .mini-point-card {
          grid-template-columns: 1fr;
          min-height: 0
        }

        .checklist-card .inline-lbl,
        .mini-pill {
          width: max-content
        }

        .mini-panel .sbox-body {
          padding: 14px 15px
        }
      }

      /* === LEGAL VALIDITY & CONTROLLED DRUGS — final fixed card layout === */
      .pl-section {
        border: 1.5px solid #8fd3ff;
        border-radius: 14px;
        background: #ffffff;
        margin: 18px 0 22px;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(3, 105, 161, .08);
      }

      .pl-sec-h {
        padding: 12px 18px;
        background: #e8f6ff;
        color: #1e3a8a;
        font-family: var(--font-head);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .055em;
        text-transform: uppercase;
        border-bottom: 1.5px solid #c7d7f0;
      }

      .pl-sec-body {
        padding: 16px 18px;
        font-size: 14px;
        line-height: 1.65;
        color: #172033;
      }

      .pl-sec-body>p {
        margin: 0 0 10px;
      }

      .pl-sec-body>p:last-child {
        margin-bottom: 0;
      }

      .pl-checklist {
        display: grid;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .pl-check-row {
        display: flex;
        gap: 11px;
        padding: 12px 14px;
        border-bottom: 1px solid #e8f4fd;
        align-items: flex-start;
        border: 1px solid #d7efff;
        background: #fbfdff;
        border-radius: 11px;
        margin: 0;
      }

      .pl-check-box {
        color: #1d4ed8;
        flex-shrink: 0;
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: #e8f6ff;
        flex: 0 0 auto;
        font-size: 13px;
      }

      .pl-check-label,
      .pl-proc-label,
      .pl-concept-label {
        font-size: 13px;
        line-height: 1.35;
      }

      .pl-check-body,
      .pl-proc-body,
      .pl-concept-body,
      .pl-alert-body {
        font-size: 14px;
        line-height: 1.6;
      }

      .pl-proc-row {
        padding: 13px 14px;
        border-bottom: 1px solid #e8f4fd;
        border: 1px solid #d7efff;
        background: #fbfdff;
        border-radius: 11px;
        margin-bottom: 10px;
      }

      .pl-proc-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .pl-proc-list {
        margin: 2px 0 0;
        padding-left: 18px;
      }

      .pl-proc-list li {
        font-weight: 400;
        color: #1e293b;
        margin-bottom: 5px;
        padding-left: 4px;
      }

      .pl-alert-row {
        padding: 12px 14px;
        margin-bottom: 10px;
        background: #fff7f7;
        border-radius: 11px;
        border-left: 4px solid #dc2626;
        border: 1px solid #fecaca;
      }

      .pl-concept-card {
        background: #fbfdff;
        border: 1px solid #d7efff;
        border-radius: 11px;
        padding: 12px 14px;
        margin-bottom: 10px;
      }

      .pl-table th {
        padding: 10px 14px;
        text-align: left;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #fff;
        font-size: 12px;
      }

      .pl-table td {
        padding: 10px 14px;
        border-bottom: 1px solid #e6edfb;
        vertical-align: top;
        color: #1e293b;
        font-size: 13.5px;
        line-height: 1.55;
      }

      [data-theme=dark] .pl-section {
        background: #0b1628;
        border-color: #1e3a52;
        box-shadow: none;
      }

      [data-theme=dark] .pl-sec-h {
        background: #0d2a40;
        color: #93b4e6;
        border-bottom-color: #1e3a52;
      }

      [data-theme=dark] .pl-sec-body {
        color: #dbeafe;
      }

      [data-theme=dark] .pl-check-row,
      [data-theme=dark] .pl-proc-row,
      [data-theme=dark] .pl-concept-card {
        background: #0d1c30;
        border-color: #1e3a52;
      }

      [data-theme=dark] .pl-check-box {
        background: #102b42;
        color: #93b4e6;
      }

      [data-theme=dark] .pl-alert-row {
        background: #2b1111;
        border-left-color: #f87171;
        border-color: #7f1d1d;
      }

      /* === FINAL FIX: CONNECTED HEADER + FULL-HEIGHT SIDEBAR + RESTORED TOPIC TRACKER === */

      html,
      body {
        min-height: 100%;
        margin: 0;
        overflow-x: hidden;
      }

      body {
        background: var(--bg);
      }

      .nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--nav-h) !important;
        min-height: var(--nav-h) !important;
        z-index: 300 !important;
        border-bottom: 1px solid var(--bdr) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 1px 0 var(--bdr), 0 4px 18px rgba(3, 105, 161, .06) !important;
      }

      .nav::after {
        content: "";
        position: absolute;
        left: var(--sidebar-w);
        top: 0;
        bottom: -1px;
        width: 1px;
        background: var(--bdr);
        pointer-events: none;
      }

      body[data-theme="dark"] .nav {
        background: rgba(15, 32, 53, .96) !important;
      }

      .layout {
        display: block !important;
        min-height: 100vh !important;
        padding-top: var(--nav-h) !important;
        background: linear-gradient(90deg, var(--bg2) 0 var(--sidebar-w), var(--bg) var(--sidebar-w)) !important;
      }

      .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: var(--nav-h) !important;
        bottom: 0 !important;
        width: var(--sidebar-w) !important;
        height: calc(100vh - var(--nav-h)) !important;
        min-height: 0 !important;
        z-index: 220 !important;
        overflow-y: auto !important;
        background: var(--bg2) !important;
        border-right: 1px solid var(--bdr) !important;
        border-top: 0 !important;
        padding: 12px 8px 18px !important;
        box-shadow: none !important;
        transform: none !important;
      }

      .layout>aside.sidebar+div {
        margin-left: var(--sidebar-w) !important;
        width: calc(100% - var(--sidebar-w)) !important;
        min-width: 0 !important;
        flex: none !important;
      }

      .layout>aside.sidebar+div>.main,
      #mainContent {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 32px 40px 56px !important;
        background: var(--bg) !important;
        min-height: calc(100vh - var(--nav-h)) !important;
      }

      .page {
        display: none;
        animation: fadeIn .2s ease;
        max-width: 960px;
        margin: 0 auto;
      }

      #home.page {
        max-width: 1040px;
      }

      .credit-footer {
        text-align: center;
        padding: 40px 24px 32px;
        margin-top: 40px;
        border-top: 2px solid var(--bg4);
        margin-left: 0 !important;
      }

      .sb-item:first-child {
        margin-top: 0 !important;
      }

      .sb-progress-wrap {
        display: none !important;
        align-items: center;
        gap: 6px;
        margin-top: 3px;
      }

      .tracker-kicker {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 4px;
      }

      .tracker-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .tracker-stat {
        padding: 14px 12px;
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg3);
        text-align: center;
      }

      .tracker-stat .stat-value {
        display: block;
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
        color: var(--tx);
        margin-bottom: 6px;
      }

      .tracker-stat .stat-label {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--tx3);
      }

      .tracker-progress {
        height: 8px;
        margin-top: 13px;
        border-radius: 999px;
        background: var(--bg3);
        border: 1px solid var(--bdr);
        overflow: hidden;
      }

      .tracker-progress span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--ac), var(--ac2));
      }

      body[data-theme="dark"] .topic-tracker-card {
        background: var(--bg2);
        border-color: var(--bdr);
        box-shadow: none;
      }

      body[data-theme="dark"] .tracker-stat {
        background: var(--bg3);
        border-color: var(--bdr);
      }

      body[data-theme="dark"] .tracker-reset-pill {
        background: var(--bg3);
        border-color: var(--bdr);
      }

      @media (max-width:1100px) and (min-width:761px) {
        :root {
          --sidebar-w: 240px;
        }

        .layout>aside.sidebar+div>.main,
        #mainContent {
          padding: 28px 28px 44px !important;
        }

        .tracker-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width:760px) {
        :root {
          --sidebar-w: 280px;
        }

        .nav {
                height: auto !important;
                min-height: 60px !important;
                padding: 8px 12px;
                gap: 8px;
                flex-wrap: wrap !important;
                position: sticky !important;
                top: 0 !important;
        }

        .nav::after {
          display: none !important;
        }

        .layout {
                display: block;
                background: var(--bg) !important;
                padding-top: 0 !important;
        }

        .layout>aside.sidebar+div {
          margin-left: 0 !important;
          width: 100% !important;
        }

        .sidebar {
                position: fixed;
                left: -290px !important;
                top: 60px !important;
                bottom: 0 !important;
                width: 280px !important;
                height: calc(100vh - 60px) !important;
                min-height: 0;
                z-index: 320 !important;
                transition: left .2s ease !important;
                background: var(--bg2);
                box-shadow: var(--shadow-xl) !important;
        }

        .sidebar.open {
                left: 0 !important;
                transform: none !important;
        }

        .layout>aside.sidebar+div>.main,
        #mainContent {
          padding: 24px 16px 38px !important;
        }

        .tracker-head {
          flex-direction: column;
          align-items: stretch;
        }

        .tracker-reset-pill {
          width: max-content;
        }

        .tracker-grid {
          grid-template-columns: 1fr;
        }
      }

      /* === FINAL FIX: dashboard details restored, no shared-copy label === */
      .topic-tracker-card {
        max-width: 1040px !important;
        margin: 18px auto 46px !important;
        padding: 18px !important;
        background: var(--bg2);
        border: 1.5px solid var(--bdr);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(3, 105, 161, .08);
      }

      .tracker-head {
        display: flex;
        align-items: flex-start !important;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 16px !important;
      }

      .tracker-head h2 {
        font-family: var(--serif);
        font-size: 22px !important;
        line-height: 1.15;
        margin: 0;
        color: var(--tx);
        letter-spacing: .01em;
      }

      .tracker-reset-pill {
        display: none !important;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 6px 10px;
        border-radius: 999px;
        background: var(--acl);
        border: 1px solid var(--bdr);
        color: var(--tx2);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
      }

      .tracker-extra {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--bdr);
      }

      .tracker-extra-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 12px;
      }

      .tracker-extra-head h3 {
        font-family: var(--serif);
        font-size: 17px;
        margin: 0 0 4px;
        color: var(--tx);
        letter-spacing: .01em;
      }

      .tracker-extra-head p {
        margin: 0;
        color: var(--tx3);
        font-size: 12.5px;
        line-height: 1.45;
        max-width: 720px;
      }

      .tracker-system-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .tracker-system-card {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg3);
        padding: 11px 12px;
      }

      .tracker-system-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 9px;
      }

      .tracker-system-top span {
        font-size: 12.5px;
        font-weight: 800;
        color: var(--tx);
        line-height: 1.2;
      }

      .tracker-system-top strong {
        font-size: 12px;
        color: var(--ac);
        background: var(--acl);
        border: 1px solid var(--bdr);
        border-radius: 999px;
        padding: 4px 8px;
        white-space: nowrap;
      }

      .tracker-system-bar {
        height: 7px;
        border-radius: 999px;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        overflow: hidden;
      }

      .tracker-system-bar span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--ac), var(--ac2));
      }

      .tracker-system-foot {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 8px;
        font-size: 11px;
        font-weight: 700;
        color: var(--tx3);
      }

      .tracker-mini-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
      }

      .tracker-mini-card {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg2);
        padding: 12px;
      }

      .tracker-mini-card span {
        display: block;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 5px;
      }

      .tracker-mini-card strong {
        display: block;
        font-size: 15px;
        font-weight: 900;
        color: var(--tx);
        margin-bottom: 4px;
      }

      .tracker-mini-card p {
        margin: 0;
        color: var(--tx3);
        font-size: 12px;
        line-height: 1.45;
      }

      body[data-theme="dark"] .tracker-system-card,
      body[data-theme="dark"] .tracker-mini-card {
        background: var(--bg3);
        border-color: var(--bdr);
      }

      body[data-theme="dark"] .tracker-system-top strong {
        background: var(--bg2);
        border-color: var(--bdr);
      }

      @media (max-width:1100px) and (min-width:761px) {
        .tracker-system-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .tracker-mini-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width:760px) {
        .topic-tracker-card {
          padding: 14px !important;
          margin: 14px auto 34px !important;
        }

        .tracker-system-grid,
        .tracker-mini-grid {
          grid-template-columns: 1fr;
        }

        .tracker-extra-head {
          display: block;
        }

        .tracker-system-foot {
          flex-direction: column;
          gap: 2px;
        }
      }

      /* === READABLE TOPIC CARDS FIX ===
   Turns dense treatment/counselling bullets into compact readable cards. */
      .sbox-body>ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .sbox-body li.note-point {
        display: block;
        position: relative;
        min-height: 0;
        margin: 0;
        padding: 13px 15px 13px 36px;
        border: 1px solid var(--bdr);
        border-radius: 14px;
        background: var(--bg2);
        box-shadow: 0 1px 4px rgba(3, 105, 161, .05);
        color: var(--tx);
        font-size: 14.2px;
        line-height: 1.55;
      }

      [data-theme=dark] .sbox-body li.note-point {
        background: var(--bg3);
        box-shadow: none;
      }

      .sbox-body li.note-point::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 22px;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--ac);
        opacity: .65;
      }

      .sbox-body li.note-point:last-child {
        border-bottom: 1px solid var(--bdr)
      }

      .sbox-body li.note-point .item-copy {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
      }

      .sbox-body li.note-point .inline-lbl {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 220px;
        white-space: normal;
        border: 1px solid rgba(3, 105, 161, .16);
        border-radius: 999px;
        background: var(--acl);
        color: var(--ac);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.15;
        padding: 6px 9px;
        margin-top: 1px;
      }

      .sbox-body li.note-point .item-sentence {
        display: block;
        min-width: 0;
        color: var(--tx);
        font-size: 14.2px;
        line-height: 1.55;
      }

      /* Ordered step lists (inhaler technique etc.) */
      .sbox-body .step-lead {
        font-weight: 700;
        color: var(--tx);
        font-size: 14.4px;
        margin: 4px 2px 10px;
        line-height: 1.5;
      }

      .sbox-body ol.step-list {
        list-style: none;
        counter-reset: step;
        margin: 0 0 6px;
        padding: 0;
        display: grid;
        gap: 8px;
      }

      .sbox-body ol.step-list>li {
        counter-increment: step;
        position: relative;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 10px;
        padding: 11px 14px 11px 46px;
        color: var(--tx);
        font-size: 14px;
        line-height: 1.5;
      }

      .sbox-body ol.step-list>li::before {
        content: counter(step);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--accent, #1f6fb2);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        border-radius: 50%;
      }

      .sbox-body li.note-point .key-term,
      .sbox-body li.note-point b {
        background: rgba(186, 230, 253, .7);
        border-radius: 5px;
        padding: 0 4px;
        color: #0c4a6e;
        font-weight: 800;
      }

      [data-theme=dark] .sbox-body li.note-point .key-term,
      [data-theme=dark] .sbox-body li.note-point b {
        background: rgba(56, 138, 221, .22);
        color: #bfdbfe;
      }

      .sbox-body li.note-point .warn-ref {
        white-space: normal
      }

      .sbox-body .drug-block {
        border: 1px solid var(--bdr);
        border-radius: 14px;
        margin: 0 0 12px;
        background: var(--bg2);
        box-shadow: 0 1px 4px rgba(3, 105, 161, .05)
      }

      [data-theme=dark] .sbox-body .drug-block {
        background: var(--bg3);
        box-shadow: none
      }

      @media (max-width:1100px) {
        .sbox-body>ul {
          grid-template-columns: 1fr
        }
      }

      @media (max-width:760px) {
        .sbox-body>ul {
          grid-template-columns: 1fr;
          gap: 10px
        }

        .sbox-body li.note-point {
          padding: 12px 13px 12px 32px;
          font-size: 13.8px
        }

        .sbox-body li.note-point .item-copy {
          display: block
        }

        .sbox-body li.note-point .inline-lbl {
          margin: 0 0 7px;
          max-width: 100%
        }

        .sbox-body li.note-point .item-sentence {
          font-size: 13.8px
        }
      }

      body.dark .sbox-body li.note-point,
      body.dark .sbox-body .drug-block {
        background: rgba(15, 23, 42, .74);
        border-color: rgba(125, 211, 252, .28)
      }

      /* ════════ LEARNING PATHWAY ════════ */
      .pw-anchor {
        display: block;
        height: 0;
        width: 0;
        overflow: hidden
      }

      .pathway {
        border-radius: var(--r);
        box-shadow: var(--shadow);
        margin: 18px 0 22px;
        padding: 16px 18px;
        border: 1px solid var(--bdr2);
        background: var(--grad-paper)
      }

      .pathway-head {
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 12px
      }

      .pathway-title {
        font-size: 16px;
        font-family: var(--serif);
        font-weight: 700;
        color: var(--tx)
      }

      .pathway-sub {
        font-size: 12.5px;
        color: var(--tx3)
      }

      .pathway-steps {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap
      }

      .pw-arrow {
        color: var(--tx3);
        font-size: 14px;
        flex: 0 0 auto
      }

      .pw-btn {
        font-family: var(--font);
        cursor: pointer;
        border: 1px solid var(--bdr2);
        background: var(--bg2);
        color: var(--tx);
        border-radius: var(--rs);
        padding: 9px 14px;
        font-size: 13.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all .15s ease;
        line-height: 1.1
      }

      .pw-btn:hover {
        border-color: var(--ac);
        color: var(--ach);
        box-shadow: 0 2px 8px rgba(3, 105, 161, .14);
        transform: translateY(-1px)
      }

      .pw-step .pw-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--acl);
        color: var(--ac);
        font-size: 12px;
        font-weight: 700;
        flex: 0 0 auto
      }

      .pw-step:hover .pw-n {
        background: var(--ac);
        color: #fff
      }

      .pw-weak {
        border-color: var(--am);
        color: var(--am)
      }

      .pw-weak:hover {
        border-color: var(--am);
        color: #fff;
        background: var(--am)
      }

      .pw-weak-on {
        background: var(--am);
        color: #fff;
        border-color: var(--am)
      }

      .pw-weak-on:hover {
        background: var(--am);
        color: #fff
      }

      .pw-primary {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac)
      }

      .pw-primary:hover {
        background: var(--ach);
        color: #fff;
        border-color: var(--ach)
      }

      .pw-good {
        border-color: var(--gn);
        color: var(--gn)
      }

      .pw-good:hover {
        background: var(--gn);
        color: #fff;
        border-color: var(--gn)
      }

      .pw-bad {
        border-color: var(--rd);
        color: var(--rd)
      }

      .pw-bad:hover {
        background: var(--rd);
        color: #fff;
        border-color: var(--rd)
      }

      @keyframes pwFlash {
        0% {
          box-shadow: 0 0 0 0 rgba(3, 105, 161, .55)
        }

        100% {
          box-shadow: 0 0 0 14px rgba(3, 105, 161, 0)
        }
      }

      .pw-flash {
        animation: pwFlash 1s ease-out 1;
        border-radius: var(--r)
      }

      @media(max-width:640px) {
        .pathway-steps {
          gap: 6px
        }

        .pw-arrow {
          display: none
        }

        .pw-btn {
          padding: 8px 11px;
          font-size: 12.5px
        }
      }

      /* ── Pathway modal (flashcards & mini quiz) ── */
      .pw-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(4, 18, 35, .55);
        backdrop-filter: blur(3px)
      }

      .pw-modal {
        width: 100%;
        max-width: 560px;
        max-height: 88vh;
        overflow: auto;
        background: var(--bg2);
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        box-shadow: var(--shadow-xl)
      }

      .pw-modal-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid var(--bdr);
        font-family: var(--serif);
        font-weight: 700;
        font-size: 15px;
        color: var(--tx);
        position: sticky;
        top: 0;
        background: var(--bg2);
        z-index: 1
      }

      .pw-modal-x {
        border: none;
        background: none;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        color: var(--tx3);
        padding: 0 4px
      }

      .pw-modal-x:hover {
        color: var(--rd)
      }

      .pw-modal-body {
        padding: 20px 18px
      }

      .pw-modal-empty {
        color: var(--tx3);
        text-align: center;
        padding: 24px 8px;
        font-size: 14px
      }

      .pw-fc-card {
        display: flex;
        flex-direction: column;
        gap: 14px
      }

      .pw-fc-meta {
        color: var(--ac) !important;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em
      }

      .pw-fc-q {
        font-size: 18px !important;
        line-height: 1.5 !important;
        font-weight: 600;
        color: var(--tx)
      }

      .pw-fc-ans {
        font-size: 14.5px;
        color: var(--tx);
        line-height: 1.55;
        background: var(--acl);
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        padding: 14px 16px;
        margin: 0
      }

      ul.pw-fc-ans {
        padding: 14px 16px 14px 32px
      }

      ul.pw-fc-ans li {
        margin: 0 0 6px
      }

      ul.pw-fc-ans li:last-child {
        margin: 0
      }

      .pw-fc-reveal {
        align-self: flex-start
      }

      .pw-modal-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 6px
      }

      .pw-fc-done {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center
      }

      .pw-fc-done-h {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 20px;
        color: var(--tx)
      }

      .pw-fc-done p {
        color: var(--tx3);
        font-size: 14px;
        margin: 0
      }

      /* ════════ DARK THEME — pathway + remaining gaps ════════ */
      body[data-theme="dark"] .pathway {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .pw-btn {
        background: var(--bg3);
        color: var(--tx);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .pw-btn:hover {
        border-color: var(--ac);
        color: var(--ach)
      }

      body[data-theme="dark"] .pw-step .pw-n {
        background: var(--acl);
        color: var(--ach)
      }

      body[data-theme="dark"] .pw-step:hover .pw-n {
        background: var(--ac);
        color: #061521
      }

      body[data-theme="dark"] .pw-primary {
        background: var(--ac);
        color: #061521;
        border-color: var(--ac)
      }

      body[data-theme="dark"] .pw-modal {
        background: var(--bg2);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .pw-modal-hdr {
        background: var(--bg2);
        border-bottom-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .pw-fc-ans {
        background: var(--bg3);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .pw-weak,
      body[data-theme="dark"] .pw-weak-on {
        color: #fde68a
      }

      body[data-theme="dark"] .pw-weak-on {
        background: #3a2c08;
        border-color: #92400e
      }

      /* prescription-law step badges stay legible on dark */
      body[data-theme="dark"] .pl-s1 {
        background: #3a1212;
        color: #fca5a5
      }

      body[data-theme="dark"] .pl-s2 {
        background: #3a2c08;
        color: #fcd34d
      }

      body[data-theme="dark"] .pl-s4 {
        background: #052e1a;
        color: #86efac
      }

      body[data-theme="dark"] .pl-s5 {
        background: #0c2a3e;
        color: #93b4e6
      }

      body[data-theme="dark"] .osce-reveal-msg {
        background: #3a2c08;
        border-color: #92400e;
        color: #fcd34d
      }

      body[data-theme="dark"] .pl-table-wrap {
        border-color: var(--bdr2)
      }

      /* catch any element still painting a hard light surface in dark mode */
      body[data-theme="dark"] .pl-checklist,
      body[data-theme="dark"] .pl-check-item,
      body[data-theme="dark"] .pl-proc-step,
      body[data-theme="dark"] .pl-def,
      body[data-theme="dark"] .rev-sheet-section,
      body[data-theme="dark"] .warn-ref {
        background: var(--bg3);
        color: var(--tx);
        border-color: var(--bdr)
      }

      /* ════════ iPHONE / iOS SAFARI ════════ */
      html {
        -webkit-text-size-adjust: 100%
      }

      * {
        -webkit-tap-highlight-color: rgba(3, 105, 161, .18)
      }

      html,
      body {
        overflow-x: hidden;
        max-width: 100%
      }

      @supports(padding:max(0px)) {
        .nav {
          padding-left: max(12px, env(safe-area-inset-left));
          padding-right: max(12px, env(safe-area-inset-right))
        }

        .main {
          padding-left: max(16px, env(safe-area-inset-left));
          padding-right: max(16px, env(safe-area-inset-right));
          padding-bottom: max(38px, env(safe-area-inset-bottom))
        }

        .sidebar {
          padding-bottom: env(safe-area-inset-bottom)
        }
      }

      @media(max-width:760px) {

        /* never let content force a sideways scroll */
        .main,
        .page,
        .sbox,
        .sbox-body,
        .pathway,
        .pl-section,
        .pl-table-wrap {
          max-width: 100%
        }

        .sbox-body,
        .pl-table-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch
        }

        /* iOS zooms in when an input font is <16px on focus — keep >=16px */
        input,
        select,
        textarea,
        .home-search input,
        .search-wrap input {
          font-size: 16px
        }

        /* comfortable tap targets */
        .pw-btn,
        .home-action-btn,
        .nbtn,
        .menu-btn,
        .sb-item,
        .sys-card,
        .card-arrow {
          min-height: 44px
        }

        .home-actions {
                grid-template-columns: 1fr;
                gap: 10px;
                margin-bottom: 22px
        }

        /* full-width, scrollable modal on small screens */
        .pw-modal-overlay {
          padding: 0;
          align-items: flex-end
        }

        .pw-modal {
          max-width: 100%;
          max-height: 92vh;
          border-radius: 18px 18px 0 0;
          padding-bottom: env(safe-area-inset-bottom)
        }

        .pathway-steps {
          gap: 8px
        }

        .pw-btn {
          flex: 1 1 auto;
          justify-content: center
        }
      }

      @media(max-width:420px) {
        .hero h1 {
          font-size: 26px
        }

        .pw-fc-q {
          font-size: 16px
        }

        .pw-modal-body {
          padding: 16px 14px
        }
      }

      /* ════════ WEAK TOPICS PAGE ════════ */
      .tracker-stat-clickable,
      .tracker-mini-clickable {
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
      }

      .tracker-stat-clickable:hover,
      .tracker-mini-clickable:hover {
        transform: translateY(-2px);
        border-color: var(--am);
        box-shadow: var(--shadow-lg)
      }

      .tracker-stat-clickable:focus-visible,
      .tracker-mini-clickable:focus-visible {
        outline: 2px solid var(--ac);
        outline-offset: 2px
      }

      .mini-open,
      .nw-viewall {
        color: var(--am);
        font-weight: 700;
        font-size: 11.5px
      }

      .nw-viewall {
        display: block;
        margin-top: 8px
      }

      .wt-head {
        margin: 6px 0 18px
      }

      .wt-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--am)
      }

      .wt-title {
        font-family: var(--serif);
        font-size: 32px;
        font-weight: 700;
        color: var(--tx);
        margin: 4px 0 6px
      }

      .wt-sub {
        color: var(--tx3);
        font-size: 14.5px;
        line-height: 1.5;
        max-width: 640px;
        margin: 0
      }

      .wt-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 0 22px
      }

      .wt-empty {
        text-align: center;
        padding: 48px 20px;
        border: 1px dashed var(--bdr2);
        border-radius: var(--r);
        background: var(--grad-paper)
      }

      .wt-empty-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 800;
        background: var(--gnl);
        color: var(--gn);
        border: 2px solid var(--gnb)
      }

      .wt-empty h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--tx);
        margin: 0 0 8px
      }

      .wt-empty p {
        color: var(--tx3);
        font-size: 14px;
        max-width: 460px;
        margin: 0 auto 18px;
        line-height: 1.55
      }

      .wt-group {
        margin: 0 0 22px
      }

      .wt-group-h {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 16px;
        color: var(--tx);
        margin: 0 0 10px
      }

      .wt-group-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 auto
      }

      .wt-group-cnt {
        margin-left: auto;
        font-family: var(--font);
        font-size: 12px;
        font-weight: 700;
        color: var(--am);
        background: var(--aml);
        border: 1px solid var(--am);
        border-radius: 999px;
        padding: 2px 10px
      }

      .wt-list {
        display: flex;
        flex-direction: column;
        gap: 8px
      }

      .wt-row {
        display: flex;
        align-items: stretch;
        gap: 8px
      }

      .wt-row-main {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        text-align: left;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg2);
        color: var(--tx);
        padding: 13px 16px;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 600;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
      }

      .wt-row-main:hover {
        transform: translateY(-1px);
        border-color: var(--ac);
        box-shadow: var(--shadow);
        color: var(--ach)
      }

      .wt-row-go {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ac);
        flex: 0 0 auto
      }

      .wt-row-x {
        flex: 0 0 auto;
        width: 44px;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg2);
        color: var(--tx3);
        font-size: 15px;
        font-weight: 700;
        transition: all .15s ease
      }

      .wt-row-x:hover {
        background: var(--rdl);
        color: var(--rd);
        border-color: var(--rdb)
      }

      body[data-theme="dark"] .wt-row-main,
      body[data-theme="dark"] .wt-row-x {
        background: var(--bg2);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .wt-row-x:hover {
        background: #2c0f0f;
        color: #fca5a5;
        border-color: #7f1d1d
      }

      body[data-theme="dark"] .wt-empty {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .wt-empty-icon {
        background: #052e16;
        color: #86efac;
        border-color: #166534
      }

      body[data-theme="dark"] .wt-group-cnt {
        background: #3a2c08;
        color: #fcd34d;
        border-color: #92400e
      }

      body[data-theme="dark"] .mini-open,
      body[data-theme="dark"] .nw-viewall {
        color: #fcd34d
      }

      @media(max-width:760px) {
        .wt-title {
          font-size: 26px
        }

        .wt-row-x {
          width: 48px
        }
      }

      /* ════════ CALCULATION PRACTICE ════════ */
      .cp-head {
        margin: 6px 0 16px
      }

      .cp-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ac)
      }

      .cp-title {
        font-family: var(--serif);
        font-size: 32px;
        font-weight: 700;
        color: var(--tx);
        margin: 4px 0 6px
      }

      .cp-sub {
        color: var(--tx3);
        font-size: 14.5px;
        line-height: 1.5;
        max-width: 640px;
        margin: 0
      }

      .cp-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 0 0 18px
      }

      .cp-filter-lbl {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--tx3)
      }

      .cp-select {
        font-family: var(--font);
        font-size: 14px;
        font-weight: 600;
        color: var(--tx);
        background: var(--bg2);
        border: 1px solid var(--bdr2);
        border-radius: var(--rs);
        padding: 9px 12px;
        cursor: pointer;
        max-width: 100%
      }

      .cp-progress-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin: 0 0 10px;
        font-size: 13px;
        color: var(--tx3);
        font-weight: 600
      }

      .cp-score {
        color: var(--ac)
      }

      .cp-card {
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        background: var(--bg2);
        box-shadow: var(--shadow);
        padding: 20px 20px 18px
      }

      .cp-sec {
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tx3);
        margin: 0 0 10px
      }

      .cp-q {
        font-size: 16.5px;
        font-weight: 600;
        color: var(--tx);
        line-height: 1.55;
        margin: 0 0 16px
      }

      .cp-opts {
        display: flex;
        flex-direction: column;
        gap: 9px
      }

      .cp-opt {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        text-align: left;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg);
        color: var(--tx);
        padding: 12px 14px;
        font-family: var(--font);
        font-size: 14.5px;
        line-height: 1.45;
        transition: border-color .14s ease, background .14s ease, transform .14s ease
      }

      .cp-opt:not([disabled]):hover {
        border-color: var(--ac);
        transform: translateY(-1px)
      }

      .cp-opt-letter {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 13px;
        background: var(--acl);
        color: var(--ac);
        margin-top: 1px
      }

      .cp-opt-text {
        flex: 1 1 auto
      }

      .cp-opt-mark {
        flex: 0 0 auto;
        font-weight: 800;
        font-size: 16px;
        margin-left: 6px
      }

      .cp-opt.cp-correct {
        border-color: var(--gn);
        background: var(--gnl)
      }

      .cp-opt.cp-correct .cp-opt-letter {
        background: var(--gn);
        color: #fff
      }

      .cp-opt.cp-correct .cp-opt-mark {
        color: var(--gn)
      }

      .cp-opt.cp-wrong {
        border-color: var(--rd);
        background: var(--rdl)
      }

      .cp-opt.cp-wrong .cp-opt-letter {
        background: var(--rd);
        color: #fff
      }

      .cp-opt.cp-wrong .cp-opt-mark {
        color: var(--rd)
      }

      .cp-opt.cp-dim {
        opacity: .6
      }

      .cp-opt[disabled] {
        cursor: default
      }

      .cp-reveal {
        margin: 16px 0 0;
        border-radius: var(--rs);
        padding: 14px 16px;
        border: 1px solid var(--bdr)
      }

      .cp-reveal-ok {
        background: var(--gnl);
        border-color: var(--gnb)
      }

      .cp-reveal-no {
        background: var(--rdl);
        border-color: var(--rdb)
      }

      .cp-reveal-head {
        font-weight: 700;
        font-size: 14.5px;
        color: var(--tx);
        margin: 0 0 10px
      }

      .cp-working {
        font-size: 14px;
        line-height: 1.6;
        color: var(--tx)
      }

      .cp-working-h {
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tx3);
        margin: 0 0 6px
      }

      .cp-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 16px 0 0
      }

      .cp-summary {
        text-align: center;
        padding: 40px 20px;
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        background: var(--grad-paper)
      }

      .cp-summary-pct {
        font-family: var(--serif);
        font-size: 46px;
        font-weight: 700;
        color: var(--ac);
        line-height: 1
      }

      .cp-summary h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--tx);
        margin: 10px 0 6px
      }

      .cp-summary p {
        color: var(--tx3);
        font-size: 14px;
        margin: 0 0 18px
      }

      /* dark */
      body[data-theme="dark"] .cp-card {
        background: var(--bg2);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .cp-opt {
        background: var(--bg3);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .cp-opt-letter {
        background: var(--acl);
        color: var(--ach)
      }

      body[data-theme="dark"] .cp-opt.cp-correct {
        background: #052e1a;
        border-color: #166534
      }

      body[data-theme="dark"] .cp-opt.cp-correct .cp-opt-letter {
        background: var(--gn);
        color: #04150b
      }

      body[data-theme="dark"] .cp-opt.cp-wrong {
        background: #2c0f0f;
        border-color: #7f1d1d
      }

      body[data-theme="dark"] .cp-reveal-ok {
        background: #052e1a;
        border-color: #166534
      }

      body[data-theme="dark"] .cp-reveal-no {
        background: #2c0f0f;
        border-color: #7f1d1d
      }

      body[data-theme="dark"] .cp-select {
        background: var(--bg2);
        color: var(--tx);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .cp-summary {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
        border-color: var(--bdr2)
      }

      @media(max-width:760px) {
        .cp-title {
          font-size: 26px
        }

        .cp-card {
          padding: 16px 15px
        }

        .cp-q {
          font-size: 15.5px
        }

        .cp-toolbar {
          gap: 8px
        }

        .cp-filter-lbl {
          flex: 1 1 100%
        }

        .cp-select {
          flex: 1 1 auto
        }
      }

      /* ════════ FEEDBACK PAGE ════════ */
      #feedbackBtn .fb-ico {
        display: inline-flex;
        vertical-align: middle
      }

      /* keep nav-button icons visible even when labels are hidden on mobile
         (.nbtn .nav-ico is more specific than the "@media .nbtn span{display:none}" rule) */
      .nbtn .nav-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .nbtn .nav-ico svg {
        display: block;
        width: 16px;
        height: 16px;
      }

      .fb-head {
        margin: 6px 0 16px
      }

      .fb-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ac)
      }

      .fb-title {
        font-family: var(--serif);
        font-size: 32px;
        font-weight: 700;
        color: var(--tx);
        margin: 4px 0 6px
      }

      .fb-sub {
        color: var(--tx3);
        font-size: 14.5px;
        line-height: 1.5;
        max-width: 600px;
        margin: 0
      }

      .fb-card {
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        background: var(--bg2);
        box-shadow: var(--shadow);
        padding: 22px 22px 20px;
        max-width: 620px
      }

      .fb-label {
        display: block;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--tx);
        margin: 0 0 16px
      }

      .fb-opt {
        font-weight: 400;
        color: var(--tx3)
      }

      .fb-input {
        display: block;
        width: 100%;
        margin-top: 7px;
        box-sizing: border-box;
        font-family: var(--font);
        font-size: 15px;
        color: var(--tx);
        background: var(--bg);
        border: 1px solid var(--bdr2);
        border-radius: var(--rs);
        padding: 11px 13px;
        transition: border-color .15s ease, box-shadow .15s ease
      }

      .fb-input:focus {
        outline: none;
        border-color: var(--ac);
        box-shadow: 0 0 0 3px var(--acl)
      }

      .fb-select {
        cursor: pointer
      }

      .fb-textarea {
        resize: vertical;
        min-height: 120px;
        line-height: 1.5
      }

      .fb-meta {
        font-size: 12.5px;
        color: var(--tx3);
        margin: 0 0 14px
      }

      .fb-error {
        background: var(--rdl);
        border: 1px solid var(--rdb);
        color: var(--rd);
        border-radius: var(--rs);
        padding: 10px 13px;
        font-size: 13.5px;
        font-weight: 600;
        margin: 0 0 14px
      }

      .fb-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap
      }

      /* dark */
      body[data-theme="dark"] .fb-card {
        background: var(--bg2);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .fb-input {
        background: var(--bg3);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .fb-input:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px var(--acl)
      }

      body[data-theme="dark"] .fb-error {
        background: #2c0f0f;
        border-color: #7f1d1d;
        color: #fca5a5
      }

      @media(max-width:760px) {
        .fb-title {
          font-size: 26px
        }

        .fb-card {
          padding: 18px 16px
        }

        .fb-input {
          font-size: 16px
        }

        /* avoid iOS zoom on focus */
      }

      /* ════════ PLAYLISTS ════════ */
      .pw-playlist {
        border-color: var(--ac);
        color: var(--ac)
      }

      .pw-playlist:hover {
        background: var(--ac);
        color: #fff;
        border-color: var(--ac)
      }

      .pl-head {
        margin: 6px 0 16px
      }

      .pl-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ac)
      }

      .pl-h1 {
        font-family: var(--serif);
        font-size: 32px;
        font-weight: 700;
        color: var(--tx);
        margin: 4px 0 8px
      }

      .pl-sub {
        color: var(--tx3);
        font-size: 14.5px;
        line-height: 1.5;
        max-width: 620px;
        margin: 0
      }

      .pl-privacy-note {
        margin-top: 10px;
        font-size: 13.5px
      }

      .pl-inline-link {
        display: inline;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ac);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px
      }

      .pl-inline-link:hover {
        color: var(--ac2)
      }

      .pl-newbar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 0 22px;
        max-width: 620px
      }

      .pl-input {
        flex: 1 1 240px;
        box-sizing: border-box;
        font-family: var(--font);
        font-size: 15px;
        color: var(--tx);
        background: var(--bg);
        border: 1px solid var(--bdr2);
        border-radius: var(--rs);
        padding: 11px 13px
      }

      .pl-input:focus {
        outline: none;
        border-color: var(--ac);
        box-shadow: 0 0 0 3px var(--acl)
      }

      .pl-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px
      }

      .pl-card {
        cursor: pointer;
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        background: var(--bg2);
        box-shadow: var(--shadow);
        padding: 16px 18px;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
      }

      .pl-card:hover {
        transform: translateY(-2px);
        border-color: var(--ac);
        box-shadow: var(--shadow-lg)
      }

      .pl-card-top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        margin: 0 0 12px
      }

      .pl-card-top h3 {
        font-family: var(--serif);
        font-size: 17px;
        font-weight: 700;
        color: var(--tx);
        margin: 0;
        line-height: 1.25
      }

      .pl-card-cnt {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--tx3)
      }

      .pl-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--bg4);
        overflow: hidden
      }

      .pl-bar>span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--grad-ink);
        transition: width .3s ease
      }

      .pl-bar-lg {
        height: 10px;
        margin: 8px 0 6px;
        max-width: 520px
      }

      .pl-card-foot {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--tx3);
        margin-top: 8px;
        font-weight: 600
      }

      .pl-prog-line {
        font-size: 13px;
        color: var(--tx3);
        font-weight: 600
      }

      .pl-toolbar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 0 20px
      }

      .pl-empty {
        text-align: center;
        padding: 46px 20px;
        border: 1px dashed var(--bdr2);
        border-radius: var(--r);
        background: var(--grad-paper)
      }

      .pl-empty-icon {
        font-size: 40px;
        color: var(--ac);
        line-height: 1;
        margin-bottom: 8px
      }

      .pl-empty h2 {
        font-family: var(--serif);
        font-size: 21px;
        color: var(--tx);
        margin: 0 0 6px
      }

      .pl-empty p {
        color: var(--tx3);
        font-size: 14px;
        max-width: 440px;
        margin: 0 auto;
        line-height: 1.55
      }

      .pl-list {
        display: flex;
        flex-direction: column;
        gap: 8px
      }

      .pl-row {
        display: flex;
        align-items: stretch;
        gap: 8px
      }

      .pl-reorder {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 0 0 auto
      }

      .pl-move {
        width: 30px;
        flex: 1;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: 6px;
        background: var(--bg2);
        color: var(--tx3);
        font-size: 9px;
        line-height: 1;
        transition: all .12s ease
      }

      .pl-move:hover:not([disabled]) {
        border-color: var(--ac);
        color: var(--ac)
      }

      .pl-move[disabled] {
        opacity: .35;
        cursor: default
      }

      .pl-row-main {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
        text-align: left;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg2);
        color: var(--tx);
        padding: 12px 14px;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 600;
        transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease
      }

      .pl-row-main:hover {
        transform: translateY(-1px);
        border-color: var(--ac);
        box-shadow: var(--shadow);
        color: var(--ach)
      }

      .pl-row-dot {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--bdr2);
        border: 1px solid var(--bdr2)
      }

      .pl-row-dot.pl-dot-on {
        background: var(--gn);
        border-color: var(--gn)
      }

      .pl-row-title {
        flex: 1 1 auto
      }

      .pl-row-go {
        flex: 0 0 auto;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ac)
      }

      .pl-row-x {
        flex: 0 0 auto;
        width: 42px;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg2);
        color: var(--tx3);
        font-size: 14px;
        font-weight: 700;
        transition: all .14s ease
      }

      .pl-row-x:hover {
        background: var(--rdl);
        color: var(--rd);
        border-color: var(--rdb)
      }

      /* add-to-playlist picker */
      .pl-pick-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 16px;
        max-height: 46vh;
        overflow: auto
      }

      .pl-pick-row {
        display: flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
        text-align: left;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg);
        color: var(--tx);
        padding: 11px 13px;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 600;
        transition: all .14s ease
      }

      .pl-pick-row:hover {
        border-color: var(--ac)
      }

      .pl-pick-on {
        border-color: var(--gn);
        background: var(--gnl)
      }

      .pl-pick-check {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: var(--gn);
        background: var(--bg2);
        border: 1px solid var(--bdr2)
      }

      .pl-pick-on .pl-pick-check {
        background: var(--gn);
        color: #fff;
        border-color: var(--gn)
      }

      .pl-pick-name {
        flex: 1 1 auto
      }

      .pl-pick-cnt {
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--tx3);
        font-weight: 600
      }

      .pl-pick-empty {
        color: var(--tx3);
        text-align: center;
        padding: 18px 8px;
        font-size: 14px
      }

      .pl-pick-new {
        display: flex;
        gap: 8px;
        flex-wrap: wrap
      }

      .pl-pick-new .pl-input {
        flex: 1 1 180px
      }

      /* bookmark icon on topic cards */
      .topic-card {
        position: relative
      }

      .tc-pl-icon {
        position: absolute;
        top: 10px;
        right: 40px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--tx3);
        border-radius: 8px;
        transition: color .14s ease, background .14s ease
      }

      .tc-pl-icon:hover {
        color: var(--ac);
        background: var(--acl)
      }

      .tc-pl-icon.tc-pl-on {
        color: var(--ac)
      }

      .tc-pl-icon.tc-pl-on svg {
        fill: var(--ac)
      }

      /* dark */
      body[data-theme="dark"] .pl-card,
      body[data-theme="dark"] .pl-row-main,
      body[data-theme="dark"] .pl-row-x,
      body[data-theme="dark"] .pl-move,
      body[data-theme="dark"] .pl-pick-row {
        background: var(--bg2);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .pl-input {
        background: var(--bg3);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .pl-bar {
        background: var(--bg4)
      }

      body[data-theme="dark"] .pl-pick-on {
        background: #052e1a;
        border-color: #166534
      }

      body[data-theme="dark"] .pl-row-x:hover {
        background: #2c0f0f;
        color: #fca5a5;
        border-color: #7f1d1d
      }

      body[data-theme="dark"] .pl-empty {
        background: linear-gradient(160deg, var(--bg2), var(--bg3));
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .tc-pl-icon:hover {
        background: var(--acl)
      }

      @media(max-width:760px) {
        .pl-h1 {
          font-size: 26px
        }

        .pl-grid {
          grid-template-columns: 1fr
        }

        .pl-input {
          font-size: 16px
        }

        .tc-pl-icon {
          right: 36px
        }
      }

      #mainContent {
        position: relative
      }

      /* home top-right playlists panel */
      .plhp {
        width: 100%;
        max-width: 860px;
        margin: 8px auto 26px;
        box-sizing: border-box;
        border: 1px solid var(--bdr2);
        border-radius: var(--r);
        background: var(--bg2);
        box-shadow: var(--shadow);
        padding: 18px 20px;
        text-align: left
      }

      .plhp-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 10px
      }

      .plhp-title {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 15px;
        color: var(--tx)
      }

      .plhp-empty {
        text-align: center;
        color: var(--tx3)
      }

      .plhp-empty svg {
        color: var(--ac);
        margin: 2px 0 6px
      }

      .plhp-empty p {
        font-size: 12.5px;
        line-height: 1.5;
        margin: 0 0 12px
      }

      .plhp-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
        margin: 0 0 12px
      }

      .plhp-row {
        display: block;
        width: 100%;
        text-align: left;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg);
        padding: 9px 11px;
        transition: border-color .14s ease, transform .14s ease
      }

      .plhp-row:hover {
        border-color: var(--ac);
        transform: translateY(-1px)
      }

      .plhp-row-top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        margin: 0 0 6px
      }

      .plhp-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--tx);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .plhp-cnt {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        color: var(--tx3)
      }

      .plhp-bar {
        display: block;
        height: 6px;
        border-radius: 999px;
        background: var(--bg4);
        overflow: hidden
      }

      .plhp-bar>span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--grad-ink)
      }

      .plhp-more {
        font-size: 11.5px;
        color: var(--tx3);
        margin: 0 0 10px;
        text-align: center
      }

      .plhp-btn {
        width: 100%;
        justify-content: center
      }

      body[data-theme="dark"] .plhp {
        background: var(--bg2);
        border-color: var(--bdr2)
      }

      body[data-theme="dark"] .plhp-row {
        background: var(--bg3);
        border-color: var(--bdr)
      }

      body[data-theme="dark"] .plhp-bar {
        background: var(--bg4)
      }

      @media(max-width:1300px) {
        .plhp {
          max-width: 100%
        }
      }

      @media(max-width:760px) {
        .plhp {
          max-width: 100%
        }
      }

      /* feedback success state */
      .fb-success {
        text-align: center;
        padding: 30px 16px
      }

      .fb-success-ico {
        width: 56px;
        height: 56px;
        margin: 0 auto 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 800;
        background: var(--gnl);
        color: var(--gn);
        border: 2px solid var(--gnb)
      }

      .fb-success h2 {
        font-family: var(--serif);
        font-size: 22px;
        color: var(--tx);
        margin: 0 0 6px
      }

      .fb-success p {
        color: var(--tx3);
        font-size: 14px;
        margin: 0 0 18px
      }

      body[data-theme="dark"] .fb-success-ico {
        background: #052e16;
        color: #86efac;
        border-color: #166534
      }

      /* ════════ INFECTIONS HUB ════════ */
      .infx-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px
      }

      .infx-box {
        border: 1.5px solid var(--bdr2);
        border-top: 4px solid var(--ac);
        border-radius: var(--r);
        background: var(--bg2);
        box-shadow: var(--shadow);
        padding: 14px 16px 12px;
        break-inside: avoid
      }

      .infx-box-hdr {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 10px
      }

      .infx-ico {
        font-size: 18px;
        line-height: 1
      }

      .infx-box-title {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 16px;
        color: var(--tx);
        flex: 1 1 auto
      }

      .infx-box-cnt {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: var(--ac);
        border-radius: 999px;
        padding: 2px 9px
      }

      .infx-bar {
        height: 6px;
        border-radius: 999px;
        background: var(--bg4);
        overflow: hidden;
        margin: 0 0 12px
      }

      .infx-bar>span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--ac)
      }

      .infx-topics {
        display: flex;
        flex-direction: column;
        gap: 6px
      }

      .infx-topic {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        text-align: left;
        cursor: pointer;
        border: 1px solid var(--bdr);
        border-radius: var(--rs);
        background: var(--bg);
        color: var(--tx);
        padding: 9px 11px;
        font-family: var(--font);
        font-size: 13.6px;
        font-weight: 600;
        transition: border-color .14s ease, transform .14s ease, background .14s ease
      }

      .infx-topic:hover {
        border-color: var(--ac);
        transform: translateX(2px)
      }

      .infx-dot {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bdr2)
      }

      .infx-dot.on {
        background: var(--gn)
      }

      .infx-topic-t {
        flex: 1 1 auto;
        line-height: 1.3
      }

      body[data-theme="dark"] .infx-box {
        background: var(--bg2);
        border-color: var(--bdr2);
        border-top-color: var(--ac)
      }

      body[data-theme="dark"] .infx-topic {
        background: var(--bg3);
        border-color: var(--bdr);
        color: var(--tx)
      }

      body[data-theme="dark"] .infx-bar {
        background: var(--bg4)
      }

      @media(max-width:760px) {
        .infx-grid {
          grid-template-columns: 1fr
        }
      }

      /* ── v24: accessibility — visible keyboard focus + skip link + reduced motion ── */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:focus-visible,
      [role="button"]:focus-visible {
        outline: 3px solid var(--ac2, #2563eb);
        outline-offset: 2px;
        border-radius: 6px;
      }

      .at-skip-link {
        position: absolute;
        left: 8px;
        top: -60px;
        z-index: 9999;
        background: var(--ac, #1d4ed8);
        color: #fff;
        padding: 10px 16px;
        border-radius: 8px;
        font: 600 14px/1 var(--font, system-ui, sans-serif);
        text-decoration: none;
        transition: top .15s ease;
      }

      .at-skip-link:focus {
        top: 8px;
      }

      @media(prefers-reduced-motion:reduce) {

        *,
        *::before,
        *::after {
          animation-duration: .001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001ms !important;
          scroll-behavior: auto !important;
        }
      }

      /* ═══════════════════════════════════════════════════════════════════════════
   v24 VISUAL REFRESH — appended last so it layers cleanly over the base styles.
   Keeps the clinical-blue identity; adds depth, gradient accents, per-system
   colour, and richer hover/press feedback across the app.
   ═══════════════════════════════════════════════════════════════════════════ */

      /* — softer, deeper shadow scale — */
      :root {
        --bg: #f4f7fc;
        --bg2: #ffffff;
        --bg3: #eaf1fb;
        --bg4: #d6e4f7;
        --tx: #0a1f44;
        --tx2: #1e3a8a;
        --tx3: #6b84b4;
        --ac: #1d4ed8;
        --acl: #e6edfb;
        --ach: #1e3a8a;
        --ac2: #2563eb;
        --rd: #dc2626;
        --rdl: #fef2f2;
        --rdb: #fca5a5;
        --gn: #059669;
        --gnl: #ecfdf5;
        --gnb: #6ee7b7;
        --am: #d97706;
        --aml: #eef3fc;
        --pu: #7c3aed;
        --pul: #f5f3ff;
        --cy: #0891b2;
        --cyl: #ecfeff;
        --bdr: #c7d7f0;
        --bdr2: #93b4e6;
        --r: 18px;
        --rs: 12px;
        --font: 'Instrument Sans', system-ui, sans-serif;
        --serif: 'Lora', Georgia, serif;
        --shadow: 0 1px 2px rgba(3, 105, 161, .04), 0 3px 10px rgba(3, 105, 161, .06);
        --shadow-lg: 0 6px 14px rgba(3, 105, 161, .08), 0 18px 40px rgba(3, 105, 161, .12);
        --shadow-xl: 0 10px 22px rgba(3, 105, 161, .10), 0 30px 64px rgba(3, 105, 161, .16);
        --grad-ink: linear-gradient(135deg, #1d4ed8, #2563eb 60%, #2563eb);
        --grad-sage: linear-gradient(135deg, var(--gn), #10b981);
        --grad-paper: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 100%);
        --nav-h: 64px;
        --accent: var(--ac);
        --master-border: #93b4e6;
        --sidebar-w: 264px;
      }

      /* — top nav: subtle frosted depth — */
      .nav {
        backdrop-filter: saturate(1.2) blur(6px);
      }

      .nbtn {
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s, background .15s;
        border-radius: 11px;
      }

      .nbtn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
      }

      /* — home hero: gradient headline + breathing room — */
      .professional-home h1,
      .hero h1 {
        background: var(--grad-ink);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: var(--ac);
        letter-spacing: -.5px;
      }

      /* — section titles: a small accent rule — */
      .home-section-title {
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: var(--tx);
        margin-bottom: 14px;
        max-width: 860px;
        margin: 4px auto 12px;
        position: relative;
        padding-left: 2px;
      }

      /* — mode tiles (Quiz, Stations, Numeracy, etc.) — */
      .home-action-btn {
        font-family: var(--font);
        background: linear-gradient(180deg, var(--bg2), var(--bg) 140%);
        border: 1px solid var(--bdr);
        color: var(--tx);
        font-weight: 700;
        appearance: none;
        border-radius: 16px;
        min-height: 52px;
        padding: 14px 16px;
        font-size: 14.5px;
        line-height: 1.2;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: var(--shadow);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
        letter-spacing: .1px;
      }

      .home-action-btn:hover {
        background: #e6edfb;
        border-color: var(--bdr2);
        color: #1d4ed8;
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
      }

      .home-action-btn:active {
        transform: translateY(-1px);
      }

      .home-action-btn.primary {
        background: var(--grad-ink);
        border-color: transparent;
        color: #fff;
        font-weight: 600;
        box-shadow: 0 6px 18px rgba(3, 105, 161, .28);
      }

      .home-action-btn.primary:hover {
        box-shadow: 0 10px 26px rgba(3, 105, 161, .36);
        filter: brightness(1.03);
      }

      /* — body-system cards: per-system colour accent — */
      .sys-card.professional-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid var(--bdr);
        background:
          radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--sys, #1d4ed8) 9%, transparent), transparent 60%),
          var(--bg2);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      }

      .sys-card.professional-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--sys, var(--ac));
        opacity: .9;
        border-radius: 18px 18px 0 0;
      }

      .sys-card.professional-card h3 {
        transition: color .18s;
      }

      .sys-card.professional-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px color-mix(in srgb, var(--sys, #1d4ed8) 22%, transparent);
        border-color: color-mix(in srgb, var(--sys, #1d4ed8) 45%, var(--bdr));
      }

      .sys-card.professional-card:hover h3 {
        color: var(--sys, var(--ac));
      }

      .card-arrow {
        transition: transform .2s ease;
        color: var(--sys, var(--tx3));
      }

      .sys-card.professional-card:hover .card-arrow {
        transform: translateX(4px);
      }

      /* — sidebar items: smoother active/hover — */
      .sb-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        margin: 1px 0;
        border-radius: 10px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: var(--tx2);
        transition: background .14s, color .14s, transform .12s;
        font-family: var(--font);
        position: relative;
        padding-bottom: 18px;
        min-height: 37px;
      }

      .sb-item:hover {
        background: var(--acl);
        color: var(--ac);
      }

      .sb-item.active {
        background: var(--acl);
        color: var(--ac);
        font-weight: 700;
        box-shadow: inset 3px 0 0 var(--ac);
      }

      /* — readiness dashboard: lift it — */
      .readiness-dashboard {
        border-radius: 20px;
        border: 1px solid var(--bdr);
        box-shadow: var(--shadow-lg);
      }

      /* — generic cards across practice screens get consistent rounding/lift — */
      .qz-card,
      .pw-fc-card,
      .nsim-card,
      .osce-station,
      .cp-card {
        border-radius: 18px;
      }

      /* — search bar: a touch more presence — */
      .search-wrap input,
      #si {
        transition: box-shadow .15s, border-color .15s;
      }

      .search-wrap input:focus,
      #si:focus {
        box-shadow: 0 0 0 4px var(--acl);
      }

      /* — buttons everywhere: consistent press feel — */
      .pw-btn,
      .osce-action-btn,
      .nsim-mini,
      .sbox-allbtn {
        transition: transform .14s ease, box-shadow .14s ease, filter .14s, border-color .14s, background .14s, color .14s;
      }

      .pw-btn:active,
      .osce-action-btn:active {
        transform: translateY(1px);
      }
    

      /* === Epilepsy-style topic flow override ===
         Keeps the readable study-flow: one authored point stays intact,
         with clear bullets rather than fragmented micro-cards. */
      .sbox-body>ul {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
      }

      .sbox-body li.note-point,
      body.dark .sbox-body li.note-point,
      [data-theme=dark] .sbox-body li.note-point {
        display: block !important;
        border: 0 !important;
        border-bottom: 1px solid var(--bg4) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 9px 0 9px 24px !important;
        margin: 0 !important;
        color: var(--tx2) !important;
        font-size: 14.8px !important;
        line-height: 1.7 !important;
      }

      .sbox-body li.note-point:last-child {
        border-bottom: 0 !important;
      }

      .sbox-body li.note-point::before {
        left: 4px !important;
        top: 19px !important;
        width: 7px !important;
        height: 7px !important;
        border-radius: 999px !important;
        background: var(--ac) !important;
        opacity: .75 !important;
      }

      .sbox-body li.note-point .item-copy {
        display: inline !important;
      }

      .sbox-body li.note-point .inline-lbl {
        display: inline !important;
        max-width: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--tx) !important;
        font-size: inherit !important;
        font-weight: 800 !important;
        line-height: inherit !important;
        padding: 0 !important;
        margin: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
      }

      .sbox-body li.note-point .inline-lbl::after {
        content: ': ';
      }

      .sbox-body li.note-point .item-sentence {
        display: inline !important;
        color: var(--tx2) !important;
        font-size: inherit !important;
        line-height: inherit !important;
      }