/* ════════════════════════════════════════════════════════════════
   NAADI AI — MOBILE APP STYLESHEET (styles-mobile.css)
   ─────────────────────────────────────────────────────────────────
   Structure:
     1. Design tokens        — mirrored 1:1 from the desktop styles.css
                               :root (Section 6 of the build spec).
                               Values are NOT invented here; they are the
                               same tokens the web app uses.
     2. Base / reset
     3. Auth pages           — copied verbatim from styles.css
     4. Buttons & utilities  — copied verbatim from styles.css
     5. Concept Studio picker— copied verbatim from styles.css
     6. Concept Studio journey (block card, tabs, panels, flashcards,
                               PYQ, done button…) — copied verbatim
     7. Signup extras + toasts — copied verbatim
     8. MOBILE SHELL          — new, mobile-only layout rules:
                               bottom tab bar, sticky journey top bar,
                               sticky prev/next footer, snap-scroll tab
                               strip, collapsible NAADI card, safe areas.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS (mirror of desktop :root — do not change) ── */
:root {
    /* fonts */
    --font-display: 'Sora', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ECG trace — one source of truth for the pulse geometry. Used as a
       mask by .spinner (the global loader) and by the Progress card. */
    --ecg-trace: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'><path d='M0 16H26L29.5 16L32.5 22.5L36.5 4.5L40.5 27.5L44 16H49L60 16C63 16 63.5 9.5 66.5 9.5C69.5 9.5 70 16 73 16H120' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    /* layout (mobile) */
    --topbar-h: 0px;
    /* journey top bar computes its own offset */
    --tabbar-h: 62px;
    /* bottom tab bar height (excl. safe area) */

    /* blues (app "g" scale) */
    --g50: #eef4fb;
    --g100: #dce8f6;
    --g200: #bcd2ec;
    --g400: #5d92cf;
    --g500: #2f6cb3;
    --g600: #1f5896;
    --g700: #173f6f;

    /* slates */
    --s50: #f8fafc;
    --s100: #f1f5f9;
    --s200: #e2e8f0;
    --s300: #cbd5e1;
    --s400: #94a3b8;
    --s500: #64748b;
    --s600: #475569;
    --s700: #334155;
    --s800: #1e293b;
    --s900: #0f172a;

    /* accents (+ derived -bg values, mirrored from styles.css) */
    --indigo: #0f6f8c;
    --indigo-bg: #e7f2f5;
    --amber: #c07c12;
    --amber-bg: #faf2e2;
    --red: #c43d3d;
    --red-bg: #f9ebeb;
    --pink: #1f5896;
    --purple: #155e63;
    --purple-bg: #e3f0f0;

    /* greens (used by toast + auth accents, mirrored) */
    --green-600: #16a34a;
    --amber-600: #d97706;

    /* safe areas (iOS notch / home indicator) */
    --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--s50);
    color: var(--s800);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

button {
    font-family: var(--font-body);
}

img {
    max-width: 100%;
}

/* touch pressed states (hover doesn't exist on touch) */
.btn:active,
.revise-class-btn:active,
.revise-subject-card:active,
.revise-chapter-item:active,
.revise-new-tab:active,
.revise-nav-btn:active:not(:disabled),
.mnav-item:active,
.rev-fc-btn:active,
.social-btn:active,
.btn-login:active,
.pw-toggle:active {
    transform: scale(.97);
    transition: transform .08s;
}


/* ════ 3. AUTH PAGES — copied verbatim from styles.css ════ */
.auth-page-body {
    min-height: 100vh;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-x: hidden;
    font-family: var(--font-body);
}

/* ── Animated background ── */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(31, 88, 150, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(21, 63, 111, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 60% 20%, rgba(93, 146, 207, 0.12) 0%, transparent 50%);
}

.auth-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: authGridDrift 25s linear infinite;
}

@keyframes authGridDrift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(48px, 48px);
    }
}

.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.18;
    animation: authOrbFloat var(--dur, 8s) ease-in-out infinite alternate;
}

.auth-orb-1 {
    width: 300px;
    height: 300px;
    background: #2f6cb3;
    top: -80px;
    left: -80px;
    --dur: 9s;
}

.auth-orb-2 {
    width: 200px;
    height: 200px;
    background: #5d92cf;
    bottom: 10%;
    right: -60px;
    --dur: 11s;
}

.auth-orb-3 {
    width: 150px;
    height: 150px;
    background: #1f5896;
    top: 40%;
    left: 10%;
    --dur: 7s;
}

@keyframes authOrbFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(20px, -20px) scale(1.05);
    }
}

/* ── Card ── */
.auth-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    width: 100%;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 36px 32px 32px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 32px 64px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
    animation: authCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

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

/* ── Logo ── */
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 28px;
}

.auth-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2f6cb3, #5d92cf);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 108, 179, 0.4);
    flex-shrink: 0;
}

.auth-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: -0.01em;
}

/* ── Headings ── */
.auth-heading {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    line-height: 1.2;
}

.auth-subheading {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 32px;
    font-weight: 400;
}

/* ── Form elements ── */
.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

.form-input-wrap {
    position: relative;
}

.form-input-wrap>i:first-of-type {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s;
}

.form-input-wrap:focus-within>i:first-of-type {
    color: #5d92cf;
}

.form-input {
    width: 100%;
    padding: 13px 14px 13px 40px;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: #fff;
    outline: none;
    transition: all 0.2s;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.form-input:focus {
    border-color: #5d92cf;
    background: rgba(93, 146, 207, 0.1);
    box-shadow: 0 0 0 3px rgba(93, 146, 207, 0.15);
}

/* Password show/hide toggle */
.pw-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.85rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    transition: color 0.2s;
}

.pw-toggle:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Forgot link ── */
.forgot-link {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5d92cf;
    text-decoration: none;
    margin-top: -8px;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.forgot-link:hover {
    color: #7daadb;
}

/* ── Login button ── */
.btn-login {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #2f6cb3 0%, #1f5896 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(47, 108, 179, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.btn-login:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(47, 108, 179, 0.5);
}

.btn-login:hover:not(:disabled)::before {
    opacity: 1;
}

.btn-login:active:not(:disabled) {
    transform: translateY(0);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Messages ── */
.msg-box {
    font-size: 0.82rem;
    padding: 11px 14px;
    border-radius: 10px;
    display: none;
    text-align: left;
    margin-top: 14px;
    animation: authMsgIn 0.25s ease;
    line-height: 1.5;
}

.msg-box.show {
    display: block;
}

@keyframes authMsgIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.msg-box.error {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.msg-box.success {
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ── Divider ── */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Social / Google button ── */
.social-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

/* ── Switch auth ── */
.switch-auth {
    text-align: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

.switch-auth a {
    color: #5d92cf;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.switch-auth a:hover {
    color: #7daadb;
}

/* ── Auth mobile ── */
@media (max-width: 480px) {
    .auth-container {
        align-items: flex-start;
        padding-top: 40px;
    }

    .auth-card {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    .auth-heading {
        font-size: 1.5rem;
    }
}

@media (max-width: 360px) {
    .auth-card {
        padding: 24px 18px;
    }
}


/* ════ Signup extras (role selector, loading overlay) — verbatim ════ */
.role-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 8px;
}

.role-option {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    color: #64748b;
}

.role-option.active {
    background: white;
    color: #16a34a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.switch-auth a {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
}

.btn-primary-auth {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: #16a34a;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Inter', sans-serif;
}

.btn-primary-auth:hover {
    background: #15803d;
}

.btn-primary-auth:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.error-msg {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 12px;
    display: none;
    padding: 10px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.success-msg {
    color: #16a34a;
    font-size: 0.85rem;
    margin-top: 12px;
    display: none;
    padding: 10px;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}

.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

.loading-overlay.active {
    display: flex;
}

.spinner-auth {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* ════ 4. BUTTONS & UTILITIES — verbatim ════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .92rem;
    transition: all .2s;
}

.btn-green {
    background: var(--g600);
    color: #fff;
}

.btn-green:hover {
    background: var(--g500);
}

.btn-dark {
    background: var(--s900);
    color: #fff;
}

.btn-dark:hover {
    background: var(--s800);
}

.btn-outline {
    background: #fff;
    color: var(--s700);
    border: 1.5px solid var(--s300);
}

.btn-outline:hover {
    background: var(--s50);
    border-color: var(--s400);
}

.btn-red {
    background: var(--red);
    color: #fff;
}

.btn-red:hover {
    opacity: .9;
}

.btn-purple {
    background: var(--purple);
    color: #fff;
}

.btn-purple:hover {
    opacity: .9;
}

.btn-sm {
    padding: 8px 16px;
    font-size: .82rem;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════
    LOADING & EMPTY STATES
.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════
    LOADING & EMPTY STATES
═══════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   ECG LOADER — global. Every `<div class="spinner"></div>` in the app
   (57 call sites across 10 files) becomes a live monitor trace. The
   markup is untouched: the trace is an SVG mask on the element, and a
   single ::before layer plays the pen.
 
   How it works: ::before is a box whose RIGHT edge is the writing head
   (a glow gradient welded to it) and whose LEFT edge is the erasing
   tail (a softer feather gradient welded to it). Phase 1 drives the
   right edge 0 → 100%. Phase 2 drives the left edge 0 → 100% with the
   right edge pinned. Both edges travel left→right — nothing rewinds.
 
   Colour inverts by surface. On dark, the head is white-hot. On light,
   white would vanish into the page, so the head runs the other way:
   the trail pales and the head condenses to a dense navy.
   ══════════════════════════════════════════════════════════════════ */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    color: var(--s500);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .01em;
}

.spinner {
    position: relative;
    width: 132px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    margin: 0 0 13px;
    background: none;

    /* light surface: pale trail, dense navy head */
    --ecg-body: #94b8de;
    --ecg-h1: rgba(93, 146, 207, .45);
    --ecg-h2: #4a7fbe;
    --ecg-h3: #1c4b8f;
    --ecg-h4: #0b2545;
    --ecg-t1: rgba(148, 184, 222, .9);
    --ecg-t2: rgba(148, 184, 222, .35);
    --ecg-dur: 3s;

    -webkit-mask-image: var(--ecg-trace);
    mask-image: var(--ecg-trace);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.spinner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;

    background-color: var(--ecg-body);
    background-image:
        /* 1 — the head, glowing at the box's right edge */
        linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            var(--ecg-h1) 40%,
            var(--ecg-h2) 66%,
            var(--ecg-h3) 86%,
            var(--ecg-h4) 100%),
        /* 2 — the tail feather, at the box's left edge */
        linear-gradient(90deg,
            var(--ecg-t1) 0%,
            var(--ecg-t2) 55%,
            rgba(93, 146, 207, 0) 100%);
    background-position: right center, left center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 0 100%;

    animation: ndEcgRun var(--ecg-dur) ease-in-out infinite;
}

@keyframes ndEcgRun {
    0% {
        left: 0;
        width: 0;
        background-size: 26px 100%, 0 100%;
    }

    /* head lands on the right edge */
    46% {
        left: 0;
        width: 100%;
        background-size: 26px 100%, 0 100%;
    }

    /* hold — the full waveform is legible for a beat */
    56% {
        left: 0;
        width: 100%;
        background-size: 26px 100%, 0 100%;
    }

    /* hand over: head glow off, tail feather on */
    58% {
        background-size: 0 100%, 18px 100%;
    }

    /* tail chases it out the same side */
    100% {
        left: 100%;
        width: 0;
        background-size: 0 100%, 18px 100%;
    }
}

/* Drop the loader onto a dark surface (hero band, journey bars).
   Here white IS the hottest thing on screen, so the head inverts. */
.loading-spinner.on-dark {
    color: rgba(255, 255, 255, .55);
}

.loading-spinner.on-dark .spinner {
    --ecg-body: rgba(147, 190, 255, .85);
    --ecg-h1: rgba(147, 190, 255, .6);
    --ecg-h2: #93beff;
    --ecg-h3: #dbeaff;
    --ecg-h4: #ffffff;
    --ecg-t1: rgba(219, 234, 255, .9);
    --ecg-t2: rgba(147, 190, 255, .35);
}

/* Compact inline variant (sheets, small panes). */
.loading-spinner.sm {
    padding: 28px 16px;
}

.loading-spinner.sm .spinner {
    width: 96px;
    height: 28px;
    margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .spinner::before {
        animation: none;
        left: 0;
        width: 100%;
        background-size: 0 100%, 0 100%;
    }
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--s400);
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: block;
}



/* ════ Subject grid — verbatim ════ */
/* ═══════════════════════════════════════════
STUDY MATERIAL BROWSER
═══════════════════════════════════════════ */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.subject-card-lg {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--s200);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}

.subject-card-lg:hover {
    border-color: var(--g400);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.subject-card-lg .icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.subject-card-lg h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.subject-card-lg p {
    font-size: .82rem;
    color: var(--s500);
}

/* ════ 5. CONCEPT STUDIO PICKER — verbatim ════ */
.revise-class-btn {
    padding: 14px 36px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    border: 2px solid var(--s200);
    background: #fff;
    color: var(--s600);
    cursor: pointer;
    transition: all .2s;
}

.revise-class-btn:hover {
    border-color: var(--g400);
    color: var(--g700);
}

.revise-class-btn.active {
    background: var(--s900);
    color: #fff;
    border-color: var(--s900);
}

.revise-subject-card {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
}

.revise-subject-card:hover {
    border-color: var(--g400);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.revise-subject-card .sub-icon {
    font-size: 2.8rem;
    margin-bottom: 12px;
}

.revise-subject-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.revise-subject-card p {
    font-size: .82rem;
    color: var(--s500);
}

.revise-chapter-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
}

.revise-chapter-item:hover {
    border-color: var(--g400);
    transform: translateX(4px);
}

.revise-chapter-num {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--indigo-bg);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    flex-shrink: 0;
}

.revise-chapter-info h4 {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
}

.revise-chapter-info p {
    font-size: .8rem;
    color: var(--s500);
    margin-top: 2px;
}

.revise-chapter-progress-bar {
    height: 4px;
    background: var(--s100);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.revise-chapter-progress-fill {
    height: 100%;
    background: var(--g500);
    border-radius: 2px;
    transition: width .4s ease;
}



/* ════ 6. CONCEPT STUDIO JOURNEY — verbatim ════ */
.revise-page-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 20px 60px;
    align-items: start;
}

@media (max-width: 900px) {
    .revise-page-layout {
        grid-template-columns: 1fr;
        padding: 12px 12px 48px;
    }

    .revise-manifesto-col {
        order: 1;
        position: static;
        /* NAADI panel: after block content on mobile */
    }
}

/* ── Journey topbar ── */
.revise-topbar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--s200);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.revise-topbar-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Row 1 wrapper: exit + title + % badge */
.revise-topbar-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    min-height: 48px;
}

.revise-topbar-pct {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 800;
    color: var(--g600);
    background: var(--g50);
    border: 1px solid var(--g200);
    padding: 3px 9px;
    border-radius: 7px;
    flex-shrink: 0;
    display: none;
}

@media (max-width: 768px) {
    .revise-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .revise-topbar-row1 {
        padding: 8px 14px;
        min-height: 46px;
    }

    .revise-topbar-title {
        font-size: .85rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .revise-topbar-pct {
        display: inline-flex;
    }

    .revise-topbar-stats {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding: 0 14px 8px;
        gap: 8px;
        border-top: 1px solid var(--s100);
    }

    .revise-topbar-stats::-webkit-scrollbar {
        display: none;
    }

    .revise-prog-track {
        width: 72px;
    }

    .revise-prog-label {
        font-size: .72rem;
    }

    .revise-stat-pill {
        font-size: .7rem;
        padding: 3px 8px;
    }
}

.revise-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--s100);
    color: var(--s600);
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--s200);
}

.revise-stat-pill.gold {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.revise-prog-track {
    width: 110px;
    height: 5px;
    background: var(--s200);
    border-radius: 3px;
    overflow: hidden;
}

.revise-prog-fill {
    height: 100%;
    background: var(--g500);
    border-radius: 3px;
    transition: width .8s ease;
}

.revise-prog-label {
    font-size: .78rem;
    color: var(--s500);
    font-weight: 600;
}

/* ── Block navigation bar ── */
.revise-block-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.revise-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s600);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all .2s;
}

.revise-nav-btn:hover:not(:disabled) {
    border-color: var(--g400);
    color: var(--g700);
    background: var(--g50);
}

.revise-nav-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.revise-nav-btn.primary {
    background: var(--g600);
    color: #fff;
    border-color: var(--g600);
}

.revise-nav-btn.primary:hover {
    background: var(--g500);
}

.revise-block-counter {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--s500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.revise-block-counter .cur {
    color: var(--s900);
    font-size: 1.1rem;
}

/* ── NEW block card — LIGHT THEME ── */
.revise-new-card {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 14px;
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
    animation: revNewCardIn .3s ease both;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

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

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

.revise-new-hd {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--s100);
    background: var(--s50);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.revise-new-num {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--g50);
    border: 1px solid var(--g200);
    color: var(--g700);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
}

.revise-new-hd-info {
    flex: 1;
}

.revise-new-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--s900);
    line-height: 1.35;
    margin-bottom: 3px;
}

.revise-new-sub {
    font-size: 12px;
    color: var(--s400);
}

.revise-new-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rnb {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.rnb-must {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.rnb-high {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid #fecaca;
}

.rnb-std {
    background: var(--s100);
    color: var(--s500);
    border: 1px solid var(--s200);
}

/* ── Phase tabs — light ── */
/* ── Section tabs: tile grid on mobile, horizontal bar on desktop ── */
.revise-new-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
    background: var(--s50);
    border-bottom: 1px solid var(--s200);
}

.revise-new-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px 8px;
    border-radius: 11px;
    border: 1.5px solid var(--s200);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--s600);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    transition: all .15s;
}

.revise-new-tab i {
    font-size: 15px !important;
    color: var(--s500);
    display: block;
    margin-bottom: 1px;
}

.revise-new-tab:hover {
    border-color: var(--g400);
    color: var(--g700);
    background: var(--g50);
}

.revise-new-tab:hover i {
    color: var(--g600);
}

.revise-new-tab.active {
    background: var(--g600);
    border-color: var(--g600);
    color: #fff;
}

.revise-new-tab.active i {
    color: #fff !important;
}

@media (min-width: 769px) {
    .revise-new-tabs {
        display: flex;
        grid-template-columns: unset;
        gap: 0;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .revise-new-tabs::-webkit-scrollbar {
        display: none;
    }

    .revise-new-tab {
        flex-direction: row;
        padding: 11px 16px;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        background: none;
        white-space: nowrap;
        gap: 6px;
        font-size: 12px;
        color: var(--s400);
        text-align: left;
        line-height: 1;
    }

    .revise-new-tab i {
        font-size: 11px !important;
        display: inline;
        color: inherit;
    }

    .revise-new-tab:hover {
        color: var(--s700);
        background: none;
        border-color: transparent;
    }

    .revise-new-tab.active {
        background: var(--g50);
        border-bottom-color: var(--g500);
        color: var(--g700);
    }

    .revise-new-tab.active i {
        color: var(--g700) !important;
    }
}

/* ── Phase panels — light ── */
.revise-new-panel {
    display: none;
    padding: 24px 22px;
    background: #fff;
}

.revise-new-panel.active {
    display: block;
    animation: revPanelIn .22s ease;
}

@keyframes revPanelIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* ── Section labels ── */
.rev-slbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--s400);
    margin: 20px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rev-slbl::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--s200);
}

.rev-slbl:first-child {
    margin-top: 0;
}

/* Understand panel */
.rev-headline {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--s900);
    line-height: 1.38;
    margin-bottom: 12px;
    padding-left: 14px;
    border-left: 3px solid var(--g500);
}

.rev-precision {
    font-size: 14px;
    color: var(--s600);
    line-height: 1.78;
    margin-bottom: 0;
}

.rev-def-box {
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: 9px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--s800);
    line-height: 1.65;
}

.rev-cond-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-cond-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--amber-bg);
    border: 1px solid #fde68a;
    border-radius: 9px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.6;
}

.rev-examtip {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    background: var(--g50);
    border: 1px solid var(--g200);
    border-left: 3px solid var(--g500);
    border-radius: 0 9px 9px 0;
}

.rev-etbadge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--g100);
    color: var(--g700);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: .04em;
}

.rev-ettext {
    font-size: 13px;
    color: var(--s800);
    line-height: 1.6;
}

/* Application panel */
.rev-scen-card {
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 18px;
}

.rev-scen-hd {
    background: var(--s100);
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--s500);
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--s200);
}

.rev-scen-body strong {
    color: var(--s900);
}

.rev-steps {
    display: flex;
    flex-direction: column;
}

.rev-step-row {
    display: flex;
    gap: 13px;
}

.rev-step-L {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 2px;
}

.rev-snum {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--indigo-bg);
    border: 1px solid #c7d2fe;
    color: var(--indigo);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
}

.rev-sline {
    width: 1px;
    flex: 1;
    background: var(--s200);
    margin: 5px 0;
    min-height: 14px;
}

.rev-step-txt {
    padding: 2px 0 20px;
    font-size: 14px;
    color: var(--s600);
    line-height: 1.7;
    flex: 1;
}

.rev-step-txt strong {
    color: var(--s900);
    font-weight: 600;
}

.rev-ans-box {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 11px;
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: 9px;
    font-size: 13px;
    color: var(--g700);
    line-height: 1.65;
}

.rev-caution-box {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--amber-bg);
    border: 1px solid #fde68a;
    border-radius: 9px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.65;
}

.rev-cue-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rev-cue-item {
    display: flex;
    gap: 10px;
    padding: 10px 13px;
    background: var(--indigo-bg);
    border: 1px solid #c7d2fe;
    border-radius: 9px;
    font-size: 13px;
    color: var(--indigo);
    line-height: 1.55;
}

.rev-cue-arr {
    font-weight: 700;
    flex-shrink: 0;
    color: var(--indigo);
}

.rev-trap-box {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--red-bg);
    border: 1px solid #fecaca;
    border-radius: 9px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.65;
}

.rev-examiner-box {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--purple-bg);
    border: 1px solid #c4b5fd;
    border-radius: 9px;
    font-size: 13px;
    color: var(--purple);
    line-height: 1.65;
}

/* ── Flashcards — light theme wrapper, dark card faces ── */
.rev-fc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.rev-fc-lbl {
    font-size: 13px;
    color: var(--s500);
    font-weight: 500;
}

.rev-fc-dots {
    display: flex;
    gap: 5px;
}

.rfd {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--s200);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.rfd.active {
    background: var(--g500);
    transform: scale(1.25);
}

.rfd.done {
    background: var(--indigo);
}

/* ── Flashcard flip container — key fix for hidden buttons ── */
.rev-fc-scene {
    perspective: 900px;
    cursor: pointer;
    user-select: none;
    /* REMOVED fixed min-height — let content drive height */
}

.rev-fc-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform .48s cubic-bezier(.4, 0, .2, 1);
    /* Height is set by JS after render to match front face */
}

.rev-fc-inner.flipped {
    transform: rotateY(180deg);
}

.rev-fc-face {
    border-radius: 12px;
    border: 1px solid var(--s200);
    padding: 22px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Front face: slightly dark to stand out from white page */
.rev-fc-front {
    background: var(--s900);
    border-color: var(--s700);
}

/* Back face: dark green */
.rev-fc-back {
    background: #052e16;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: rotateY(180deg);
    border-color: var(--g700);
}

.rev-fc-pills {
    display: flex;
    gap: 7px;
    margin-bottom: 13px;
    flex-wrap: wrap;
}

.rfp {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
}

.rfp-fill {
    background: rgba(34, 211, 238, .1);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, .28);
}

.rfp-mcq {
    background: rgba(99, 102, 241, .1);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, .28);
}

.rfp-concept {
    background: rgba(93, 146, 207, .12);
    color: var(--g400);
    border: 1px solid rgba(93, 146, 207, .30);
}

.rfp-app {
    background: rgba(245, 158, 11, .1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, .28);
}

.rfp-easy {
    background: rgba(93, 146, 207, .12);
    color: var(--g400);
    border: 1px solid rgba(93, 146, 207, .30);
}

.rfp-medium {
    background: rgba(245, 158, 11, .1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, .28);
}

.rfp-hard {
    background: rgba(239, 68, 68, .1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, .28);
}

.rev-fc-q {
    font-size: 15px;
    color: #f1f5f9;
    line-height: 1.68;
    margin-bottom: 10px;
    font-weight: 500;
}

.rev-fc-hint {
    font-size: 12px;
    color: var(--s500);
    text-align: center;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rev-fc-albl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 7px;
}

.rev-fc-ans {
    font-size: 14px;
    color: #f1f5f9;
    line-height: 1.7;
    margin-bottom: 13px;
    font-weight: 500;
}

.rev-fc-mis {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 9px;
    font-size: 12px;
    color: #f59e0b;
    line-height: 1.55;
}

/* ── "Got it / Review again" buttons — always visible below card ── */
.rev-fc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
    /* outside the flip container — always visible */
}

.rev-fc-btn {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s600);
    font-family: var(--font-body);
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.rev-fc-btn:hover {
    background: var(--s50);
    border-color: var(--s300);
}

.rev-fc-got {
    background: var(--g50) !important;
    color: var(--g700) !important;
    border-color: var(--g400) !important;
}

.rev-fc-got:hover {
    background: var(--g100) !important;
}

/* Visual map */
.rev-flow-wrap {
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 12px;
    padding: 20px;
    overflow-x: auto;
}

/* Done / Next button */
.rev-done-btn {
    width: 100%;
    padding: 15px;
    background: var(--g50);
    border: none;
    border-top: 1px solid var(--g200);
    border-radius: 0 0 14px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--g700);
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all .2s;
    letter-spacing: .01em;
}

.rev-done-btn:hover {
    background: var(--g100);
}

.rev-done-btn.done-state {
    background: var(--s50);
    color: var(--s400);
    border-top-color: var(--s200);
    cursor: default;
}

/* ── MANIFESTO COLUMN — light ── */
.revise-manifesto-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--topbar-h) + 60px);
}

.rev-mascot-card {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.rev-mascot-top {
    background: linear-gradient(135deg, var(--s900) 0%, #11233f 100%);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--s200);
    position: relative;
    overflow: hidden;
}

.rev-mascot-top::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 146, 207, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

.rev-mascot-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: none;

    margin-bottom: 8px;
}

@keyframes revMascotFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.rev-mascot-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--g400);
    letter-spacing: .03em;
}

.rev-mascot-tag {
    font-size: 11px;
    color: var(--s400);
    margin-top: 3px;
    text-align: center;
    line-height: 1.5;
}

.rev-mani-body {
    padding: 16px;
}

.rev-mani-intro {
    font-size: 12px;
    color: var(--s500);
    line-height: 1.65;
    margin-bottom: 14px;
    text-align: center;
}

.rev-mani-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-mani-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 9px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

.rev-mani-item:hover {
    border-color: var(--g400);
    background: var(--g50);
}

.rev-mani-item.rmi-active {
    border-color: var(--g400);
    background: var(--g50);
}

.rev-mani-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.rmi-amber {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.rmi-red {
    background: var(--red-bg);
    border: 1px solid #fecaca;
}

.rmi-indigo {
    background: var(--indigo-bg);
    border: 1px solid #c7d2fe;
}

.rmi-cyan {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
}

.rmi-green {
    background: var(--g50);
    border: 1px solid var(--g200);
}

.rev-mani-info {
    flex: 1;
}

.rev-mani-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--s800);
    margin-bottom: 2px;
}

.rev-mani-sub {
    font-size: 11px;
    color: var(--s400);
    line-height: 1.4;
}

.rev-mani-chev {
    color: var(--s400);
    font-size: 10px;
    margin-top: 3px;
    flex-shrink: 0;
    transition: transform .2s;
}

.rev-mani-item.rmi-active .rev-mani-chev {
    transform: rotate(90deg);
    color: var(--g600);
}

.rev-mani-popup {
    display: none;
    margin-top: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--g200);
    border-radius: 9px;
    font-size: 13px;
    color: var(--s600);
    line-height: 1.65;
    animation: revPopIn .2s ease;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.rev-mani-popup::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-left: 1px solid var(--g200);
    border-top: 1px solid var(--g200);
    transform: rotate(45deg);
}

.rev-mani-popup.rmp-open {
    display: block;
}

@keyframes revPopIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.rev-mani-popup-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--g700);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-mani-popup strong {
    color: var(--s900);
    font-weight: 600;
}

.rev-ask-btn {
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    background: var(--g50);
    border: 1px solid var(--g200);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--g700);
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s;
}

.rev-ask-btn:hover {
    background: var(--g100);
}

/* ── SVG flowchart text fix ── */
.rev-flow-wrap text {
    font-family: var(--font-body) !important;
}

/* ── Traps panel — keep dark for contrast ── */
.revise-new-panel[id*="-traps"] {
    background: var(--s900);
}

/* ── Stacked revision cards (replaces tabbed dark card) ── */

/* Each phase is its own white card */
.rvc-card {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
    transition: box-shadow .2s;
}

.rvc-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

/* Header card: left green border like other section cards */
.rvc-header-card {
    padding: 18px 20px;
    background: var(--s50);
    border-left: 4px solid var(--g500);
}

/* Traps card: left red border */
.rvc-traps-card {
    border-left: 4px solid var(--red);
}

/* Card section label: green pill + title */
.rvc-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--s50);
    border-bottom: 1px solid var(--s100);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    color: var(--s700);
}

.rvc-card-body {
    padding: 20px;
}

.rvc-traps-card .rvc-card-label {
    background: var(--red-bg);
    border-bottom-color: #fecaca;
}

/* Card body padding */

/* Mark done button — full width, green, below all cards */
.revise-mark-done-btn {
    width: 100%;
    padding: 15px;
    background: var(--g600);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
    letter-spacing: .01em;
}

.revise-mark-done-btn:hover {
    background: var(--g500);
}

.revise-mark-done-btn.done {
    background: var(--s100);
    color: var(--s500);
    cursor: default;
}

/* Each section inside a tab (Definition, Watch out, Formula etc.) */
.rvc-section-card {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: box-shadow .15s;
}

.rvc-section-card:last-child {
    margin-bottom: 0;
}

.rvc-section-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* Warning variant — amber left border */
.rvc-warn-card {
    border-left: 3px solid var(--amber);
}

/* Danger variant — red left border */
.rvc-danger-card {
    border-left: 3px solid var(--red);
}

/* Tip variant — green left border */
.rvc-tip-card {
    border-left: 3px solid var(--g500);
}

/* Section label inside a card — icon + text */
.rvc-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    color: var(--s700);
    margin-bottom: 0;
}

/* Empty state inside a tab */
.rvc-empty {
    padding: 20px;
    color: var(--s400);
    font-size: .9rem;
    text-align: center;
}

/* Mark done button — full width green below the whole block card */
.rev-done-btn:hover {
    background: var(--g100);
}

.rev-done-btn.done-state {
    background: var(--s50);
    color: var(--s400);
    border-top-color: var(--s200);
    cursor: default;
}

/* Override the old dark tab panel background */
.revise-new-panel {
    background: var(--s50) !important;
    padding: 16px 18px !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent any child from causing horizontal overflow (fixes PYQ zoom bug on iOS) */
.revise-new-panel * {
    max-width: 100%;
    word-break: break-word;
    box-sizing: border-box;
}

/* Flashcard action buttons — always in normal flow, never clipped */
.rev-fc-btn:hover {
    background: var(--s50);
    border-color: var(--s300);
}

.rev-fc-got:hover {
    background: var(--g100) !important;
}




/* ════ 7. TOASTS — verbatim ════ */
/* ── Toast notification ── */
#nd-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.nd-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: nd-toast-in 0.2s ease;
    max-width: 360px;
    text-align: center;
}

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

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

.nd-toast.fade-out {
    animation: nd-toast-out 0.25s ease forwards;
}

@keyframes nd-toast-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

.nd-toast.success {
    background: var(--green-600, #16a34a);
}

.nd-toast.error {
    background: var(--red, #c43d3d);
}

.nd-toast.info {
    background: var(--g600, #1f5896);
}

.nd-toast.warning {
    background: var(--amber-600, #d97706);
}

@media (max-width: 480px) {
    .nd-modal {
        border-radius: 12px;
    }

    .nd-modal-footer {
        flex-direction: column-reverse;
    }

    .nd-modal-footer .btn-outline {
        flex: 1;
    }

    .nd-summary-grid {
        flex-wrap: wrap;
    }

    #nd-toast-container {
        bottom: 80px;
        width: calc(100% - 32px);
    }

    .nd-toast {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   8. MOBILE SHELL — new mobile-only rules
   ════════════════════════════════════════════════════════════════ */

/* ── App views (views-as-divs + navigate(), same pattern as desktop) ── */
.view {
    display: none;
}

.view.active {
    display: block;
    animation: revPanelIn .22s ease;
}

/* ── App top bar (shell screens: dashboard / picker / coming soon) ── */
.m-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--s900);
    color: #fff;
    padding: calc(10px + var(--safe-top)) 14px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: calc(52px + var(--safe-top));
}

/* Three 44px icon buttons plus the logo leave the wordmark very little room
   on a narrow phone. They must never give up their tap target to make space —
   the wordmark yields instead (see .m-brand-text). */
.m-topbar .btn-icon {
    flex-shrink: 0;
}

/* ── Topbar brand (Home only) ──
   Values below are lifted verbatim from login.html's .lg2-brand-* so the
   wordmark and its pulse are pixel-identical across the two screens.
   The ECG spike sits at x=63-66 of the 100-unit viewBox — i.e. between
   NAADI and AI. Do not redraw this path; copy it. */
.m-topbar-brand {
    display: none;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.m-topbar-brand.show {
    display: flex;
}

#topbar-titleblock.hidden {
    display: none;
}

.m-brand-wordmark {
    position: relative;
    display: inline-block;
    /* A flex item shrinks by default. Letting this one shrink below its text
       width was what broke the mark: "NAADI AI" folded onto two lines, and the
       underline — absolutely positioned to the wordmark box — stretched across
       the full two-line block instead of tracking the word. */
    flex-shrink: 0;
}

.m-brand-text {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    /* Full 1.22rem from roughly 390px up, easing to 1.02rem on the narrowest
       handsets. The ECG spike is drawn at x=63-66 of a 100-unit viewBox, i.e.
       pinned to the gap between NAADI and AI, so the path only reads correctly
       while the wordmark is a single line — it must scale, never wrap. */
    font-size: clamp(1.02rem, 5vw, 1.22rem);
    white-space: nowrap;
    color: #fff;
    letter-spacing: .2px;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.m-brand-text span {
    color: #7db3ec;
}

.m-brand-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    width: 100%;
    height: 9px;
    overflow: visible;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

.m-brand-underline path {
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Narrow handsets (320-360px). Budget at 320px, the narrowest we support:
   320 - 20 padding - 24 gaps - 34 logo - 108 buttons = 134px for the wordmark,
   which needs ~104px at the 1.02rem floor. That ~30px of slack is what keeps
   "NAADI AI" on one line with the ECG tracking underneath it. Anything added
   to this bar in future has to come out of that 30px. */
@media (max-width: 360px) {
    .m-topbar {
        padding-left: 10px;
        padding-right: 10px;
        gap: 6px;
    }

    .m-topbar .btn-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: .88rem;
    }

    .m-topbar-logo {
        width: 32px;
        height: 32px;
    }
}

.m-topbar-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--g500), var(--g400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
}

.m-topbar-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-topbar-sub {
    font-size: .68rem;
    color: var(--s400);
    font-weight: 500;
}

.m-topbar .btn-icon {
    /* 40, not 44: three of these plus the logo were crowding the wordmark off
       its line. Still above the 36px minimum comfortable tap target, and the
       icon inside is unchanged, so they read the same. */
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: var(--s300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    cursor: pointer;
}

/* ── Main scroll area (leaves room for bottom bar) ── */
.m-main {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
    min-height: 100vh;
}

.m-main.no-tabbar {
    padding-bottom: 0;
}

/* ── Bottom tab bar ── */
.m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: #fff;
    border-top: 1px solid var(--s200);
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
}

.m-tabbar.hidden {
    display: none;
}

.mnav-item {
    flex: 1;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--s400);
    font-size: .62rem;
    font-weight: 600;
    font-family: var(--font-body);
    padding-top: 6px;
}

.mnav-item i {
    font-size: 1.05rem;
}

.mnav-item.active {
    color: var(--g600);
}

.mnav-item.active i {
    color: var(--g600);
}

/* ── Doctor nameboard / welcome (dashboard) ── */
.mdash-board {
    margin: 16px 16px 8px;
    background: var(--s900);
    border-radius: 16px;
    padding: 18px 18px 16px;
    color: #fff;
    border: 1px solid var(--s800);
}

.mdash-board .kicker {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g400);
    font-weight: 700;
    margin-bottom: 6px;
    font-family: var(--font-display);
}

.mdash-board h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.mdash-board p {
    font-size: .78rem;
    color: var(--s400);
    margin-top: 5px;
}

/* NOTE: the old .mdash-grid / .mdash-card tile grid was removed when Home
   was rebuilt as a live cockpit (see section 9 + home.js). .mdash-board and
   .mdash-section-label are KEPT — opd.js still uses both. */


.mdash-section-label {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s400);
    padding: 14px 18px 2px;
    font-family: var(--font-display);
}

/* ── Coming Soon view ── */
.m-coming-soon {
    padding: 24px 20px;
}

.m-coming-soon .empty-state {
    padding: 70px 16px;
}

/* ── Concept Studio picker: phone-width subject grid ── */
#view-quick-revise .subject-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

#view-quick-revise .revise-subject-card {
    padding: 22px 14px;
}

#view-quick-revise .revise-subject-card .sub-icon {
    font-size: 2.1rem;
}

.m-picker-wrap {
    padding: 20px 16px 30px;
}

.revise-class-btn {
    flex: 1;
    padding: 13px 10px;
    font-size: 1rem;
    min-height: 48px;
}

.revise-chapter-item {
    padding: 14px 14px;
    gap: 12px;
    min-height: 64px;
}

.revise-chapter-info h4 {
    font-size: .9rem;
}

/* ════════ JOURNEY (mobile) ════════ */

/* Sticky condensed top bar: row 1 = exit / title / %, row 2 = progress + pills */
.mrev-topbar {
    position: sticky;
    top: 0;
    z-index: 92;
    background: #fff;
    border-bottom: 1px solid var(--s200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding-top: var(--safe-top);
}

.mrev-topbar-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    min-height: 52px;
}

.mrev-exit-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1.5px solid var(--s300);
    background: #fff;
    color: var(--s600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    cursor: pointer;
}

.mrev-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: var(--s900);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrev-pct {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    color: var(--g600);
    background: var(--g50);
    border: 1px solid var(--g200);
    padding: 4px 9px;
    border-radius: 7px;
    flex-shrink: 0;
}

.mrev-topbar-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 9px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mrev-topbar-row2::-webkit-scrollbar {
    display: none;
}

.mrev-topbar-row2 .revise-prog-track {
    width: 84px;
    flex-shrink: 0;
}

.mrev-topbar-row2 .revise-prog-label {
    flex-shrink: 0;
    font-size: .72rem;
}

.mrev-topbar-row2 .revise-stat-pill {
    flex-shrink: 0;
    font-size: .68rem;
    padding: 3px 9px;
    white-space: nowrap;
}

/* Journey body: single column */
.mrev-body {
    padding: 12px 12px calc(84px + var(--safe-bottom));
    /* room for sticky footer */
    max-width: 640px;
    margin: 0 auto;
}

/* Collapsible NAADI AI card (replaces the desktop sidebar manifesto column) */
.mrev-naadi {
    background: var(--s900);
    border: 1px solid var(--s800);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mrev-naadi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    min-height: 52px;
}

.mrev-naadi-img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--s800);
    flex-shrink: 0;
}

.mrev-naadi-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    color: #fff;
}

.mrev-naadi-sub {
    font-size: .66rem;
    color: var(--s400);
    margin-top: 1px;
}

.mrev-naadi-chev {
    margin-left: auto;
    color: var(--s500);
    font-size: .8rem;
    transition: transform .2s;
}

.mrev-naadi.open .mrev-naadi-chev {
    transform: rotate(180deg);
}

.mrev-naadi-body {
    display: none;
    padding: 0 14px 14px;
}

.mrev-naadi.open .mrev-naadi-body {
    display: block;
}

.mrev-naadi .rev-mani-intro {
    font-size: .78rem;
    color: var(--s300);
    line-height: 1.6;
    margin-bottom: 10px;
}

/* NAADI tip items — dark-card variants of the desktop manifesto items */
.mrev-naadi .rev-mani-item {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    margin-bottom: 6px;
}

.mrev-naadi .rev-mani-title {
    color: #f1f5f9;
}

.mrev-naadi .rev-mani-sub {
    color: var(--s400);
}

.mrev-naadi .rev-mani-popup {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

.mrev-naadi .rev-mani-popup,
.mrev-naadi .rev-mani-popup * {
    color: var(--s300) !important;
}

.mrev-naadi .rev-mani-popup-title {
    color: #fff !important;
}

/* Tabs — horizontally scrollable snap strip (overrides the extracted grid rule) */
.revise-new-card .revise-new-tabs {
    display: flex;
    grid-template-columns: unset;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.revise-new-card .revise-new-tabs::-webkit-scrollbar {
    display: none;
}

.revise-new-card .revise-new-tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 11px 14px;
    min-height: 44px;
    min-width: 44px;
    white-space: nowrap;
    scroll-snap-align: center;
    font-size: 12px;
    border-radius: 10px;
    line-height: 1;
}

.revise-new-card .revise-new-tab i {
    display: inline;
    margin-bottom: 0;
    font-size: 13px !important;
}

/* Sticky footer: full-width Previous / Next */
.mrev-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 92;
    background: #fff;
    border-top: 1px solid var(--s200);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
    padding: 10px 12px calc(10px + var(--safe-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
}

.mrev-footer .revise-nav-btn {
    flex: 1;
    justify-content: center;
    min-height: 48px;
    font-size: .9rem;
}

.mrev-footer .revise-block-counter {
    flex-shrink: 0;
    padding: 0 4px;
}

/* Block card tweaks for narrow screens */
.revise-new-hd {
    padding: 14px 14px 12px;
    gap: 10px;
}

.revise-new-panel {
    padding: 14px 12px !important;
}

.rvc-section-card {
    padding: 14px 14px;
}

/* Flashcard: full viewport width, text reflows */
.rev-fc-q,
.rev-fc-ans {
    word-break: break-word;
}

#view-revise-journey .rev-fc-btn {
    min-height: 46px;
}

/* Done button comfortable for thumbs */
.rev-done-btn {
    min-height: 52px;
    font-size: .92rem;
}

/* "Practice N variant questions" quick-jump (jumps to the PYQ tab) */
.rev-practice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 28px);
    margin: 4px 14px 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--g50);
    color: var(--g700);
    border: 1.5px dashed var(--g400);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.rev-practice-btn:active {
    background: var(--g100);
}

/* AR / PYQ options: minimum touch size */
.revise-new-panel [id^="revAR-"][id*="-opt-"],
.revise-new-panel [id^="pyqopt-"],
.revise-new-panel [id^="varop-"] {
    min-height: 44px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   9. PRACTICE HUB — NEET Arena · PYQ Vault · AIR Rankings
   New mobile styles for the hub switcher, paper cards, custom test
   builder, the shared OMR test engine (pink NEET answer-sheet
   moment), question palette, results and leaderboards. Reuses the
   Section-1 tokens; the pink OMR accent mirrors the desktop
   .omr-sheet visual language (var(--pink) + #fce4ec tint).
   ════════════════════════════════════════════════════════════════ */

/* ── Segmented switcher (landing screens only) ── */
.ph-switch {
    position: sticky;
    top: calc(52px + var(--safe-top));
    z-index: 80;
    display: flex;
    gap: 6px;
    padding: 10px 16px 8px;
    background: var(--s50);
}

.ph-switch-pill {
    flex: 1;
    min-height: 40px;
    border: 1.5px solid var(--s200);
    border-radius: 999px;
    background: #fff;
    color: var(--s600);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 6px;
}

.ph-switch-pill i {
    font-size: .72rem;
}

.ph-switch-pill.active {
    background: var(--s900);
    border-color: var(--s900);
    color: #fff;
}

.ph-switch-pill:active {
    transform: scale(.97);
    transition: transform .08s;
}

/* ── Landing heroes ── */
.ph-hero {
    border-radius: 16px;
    padding: 18px;
    color: #fff;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--s900), var(--g700));
    border: 1px solid var(--s800);
}

.ph-hero.pyq {
    background: linear-gradient(135deg, var(--g700), var(--indigo));
}

.ph-hero.air {
    background: linear-gradient(135deg, var(--s900), var(--purple));
}

.ph-hero .kicker {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g400);
    font-weight: 700;
    margin-bottom: 6px;
    font-family: var(--font-display);
}

.ph-hero h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.25;
}

.ph-hero p {
    font-size: .78rem;
    color: var(--s300);
    margin-top: 6px;
    line-height: 1.45;
}

.ph-actions-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.ph-actions-row .btn {
    flex: 1;
    min-height: 44px;
    font-size: .78rem;
}

/* ── Paper cards (Arena + PYQ full-paper browse) ── */
.ph-year-group {
    margin-bottom: 16px;
}

.ph-year-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .8rem;
    color: var(--s500);
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.ph-paper-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
}

.ph-paper-card:active {
    transform: scale(.98);
    border-color: var(--g400);
    transition: transform .08s;
}

.ph-paper-code {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--g50);
    color: var(--g600);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-paper-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    color: var(--s800);
}

.ph-paper-card p {
    font-size: .72rem;
    color: var(--s500);
    margin-top: 3px;
}

.ph-paper-subjects {
    color: var(--s400) !important;
}

/* ── Small info chips ── */
.ph-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--s100);
    color: var(--s600);
    font-size: .64rem;
    font-weight: 700;
}

.ph-chip.blue {
    background: var(--g50);
    color: var(--g600);
}

.ph-chip.amber {
    background: var(--amber-bg);
    color: var(--amber);
}

.ph-chip.green {
    background: #e7f6ec;
    color: var(--green-600);
}

.ph-chip.review {
    background: var(--amber-bg);
    color: var(--amber);
}

/* ── PYQ landing sub-tabs (Full Papers / Custom Test) ── */
.ph-subtabs {
    display: flex;
    gap: 8px;
    margin: 12px 0 14px;
}

.ph-subtab {
    flex: 1;
    min-height: 44px;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    background: #fff;
    color: var(--s600);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.ph-subtab.active {
    background: var(--g600);
    border-color: var(--g600);
    color: #fff;
}

/* ── Custom test builder ── */
.ph-builder {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 16px 14px;
}

.ph-builder-group {
    margin-bottom: 14px;
}

.ph-builder-group label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .76rem;
    color: var(--s700);
    margin-bottom: 7px;
}

.ph-builder-group label span {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--s400);
    font-size: .68rem;
}

.ph-fchip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ph-fchip {
    min-height: 38px;
    padding: 6px 13px;
    border: 1.5px solid var(--s200);
    border-radius: 999px;
    background: #fff;
    color: var(--s600);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .76rem;
    cursor: pointer;
}

.ph-fchip.sm {
    min-height: 34px;
    padding: 4px 11px;
    font-size: .7rem;
}

.ph-fchip.active {
    background: var(--g600);
    border-color: var(--g600);
    color: #fff;
}

.ph-fchip:active {
    transform: scale(.96);
    transition: transform .08s;
}

.ph-chapter-box {
    max-height: 168px;
    overflow-y: auto;
    padding: 2px;
}

.ph-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s50);
    border: 1px dashed var(--s300);
    border-radius: 12px;
    padding: 12px;
    font-size: .8rem;
    color: var(--s600);
    min-height: 46px;
    margin-bottom: 12px;
}

.ph-start-btn {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--g600);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.ph-start-btn:disabled {
    background: var(--s300);
    cursor: not-allowed;
}

.ph-start-btn:active:not(:disabled) {
    transform: scale(.98);
    transition: transform .08s;
}

.ph-start-btn.danger {
    background: var(--red);
}

.ph-fineprint {
    font-size: .68rem;
    color: var(--s400);
    margin-top: 10px;
    line-height: 1.5;
    text-align: center;
}

/* ── Generic bottom sheet (category / OMR / palette / confirms) ── */
.ph-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(2px);
}

.ph-sheet-overlay.open {
    opacity: 1;
}

.ph-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 10px 16px calc(18px + var(--safe-bottom));
    transform: translateY(24px);
    transition: transform .2s ease;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .22);
}

.ph-sheet-overlay.open .ph-sheet {
    transform: translateY(0);
}

.ph-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--s300);
    margin: 4px auto 12px;
}

.ph-sheet-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--s800);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ph-sheet-sub {
    font-size: .78rem;
    color: var(--s500);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* ── Leaderboards ── */
.ph-lb-head {
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--s900), var(--g700));
    margin-bottom: 6px;
}

.ph-lb-head .kicker {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g400);
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 5px;
}

.ph-lb-head h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.ph-lb-head p {
    font-size: .74rem;
    color: var(--s300);
    margin-top: 4px;
}

.ph-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 12px 14px;
}

.ph-lb-row.me {
    border-color: var(--g500);
    background: var(--g50);
}

.ph-lb-rank {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--s100);
    color: var(--s600);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-lb-rank.gold {
    background: #fdf3d7;
    color: #b7791f;
}

.ph-lb-rank.silver {
    background: #eef1f5;
    color: #64748b;
}

.ph-lb-rank.bronze {
    background: #f6e8dc;
    color: #b45309;
}

.ph-lb-row h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .84rem;
    color: var(--s800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-lb-row p {
    font-size: .68rem;
    color: var(--s500);
    margin-top: 3px;
}

.ph-lb-marks {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ph-lb-marks b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--g600);
}

.ph-lb-marks span {
    font-size: .62rem;
    color: var(--s400);
    margin-top: 2px;
}

.ph-you-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--g600);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ── History rows ── */
.ph-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 13px 14px;
    cursor: pointer;
}

.ph-history-row:active {
    transform: scale(.98);
    border-color: var(--g400);
    transition: transform .08s;
}

.ph-history-row h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .84rem;
    color: var(--s800);
}

.ph-history-row p {
    font-size: .7rem;
    color: var(--s500);
    margin-top: 3px;
}

/* ── AIR Rankings "my standing" card ── */
.ph-air-mycard {
    background: linear-gradient(135deg, var(--g700), var(--g600));
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    margin-bottom: 6px;
}

.ph-air-mycard.empty {
    background: var(--s900);
}

.ph-air-mycard .kicker {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g200);
    font-weight: 700;
    font-family: var(--font-display);
}

.ph-air-mycard>p {
    font-size: .72rem;
    color: var(--g100);
    margin-top: 8px;
}

.ph-air-mystats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.ph-air-mystats div {
    text-align: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 8px 4px;
}

.ph-air-mystats b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .86rem;
}

.ph-air-mystats span {
    display: block;
    font-size: .56rem;
    color: var(--g100);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ════ TEST ENGINE — focused full-screen mode ════ */
.te-wrap {
    min-height: 100vh;
    background: var(--s50);
}

.te-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--s900);
    color: #fff;
    padding-top: var(--safe-top);
}

.te-topbar-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.te-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
    color: var(--s300);
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.te-icon-btn:active {
    transform: scale(.94);
    transition: transform .08s;
}

.te-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.te-title b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.te-title span {
    font-size: .62rem;
    color: var(--s400);
    margin-top: 1px;
}

.te-timer {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .8rem;
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d7e6f7;
}

.te-timer.warning {
    background: var(--red);
    color: #fff;
    animation: teTimerPulse 1s ease infinite;
}

@keyframes teTimerPulse {
    50% {
        opacity: .75;
    }
}

.te-subject-tabs {
    display: flex;
    gap: 6px;
    padding: 0 10px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.te-subject-tabs::-webkit-scrollbar {
    display: none;
}

.te-subject-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-height: 36px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: var(--s300);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .72rem;
    cursor: pointer;
}

.te-subject-tab.active {
    background: #fff;
    border-color: #fff;
    color: var(--s900);
}

.te-body {
    padding: 14px 14px calc(96px + var(--safe-bottom));
}

/* Question card */
.te-q-card {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 16px 14px;
}

.te-q-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.te-q-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: var(--g600);
}

.te-q-chapter {
    font-size: .68rem;
    color: var(--s400);
    margin-bottom: 10px;
}

.te-q-text {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--s800);
}

.te-q-img {
    display: block;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--s200);
    margin: 10px 0;
}

.te-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

/* Options are read-only on the question screen — commitment happens
   on the OMR sheet. .committed marks the locked choice afterwards. */
.te-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    padding: 11px 12px;
    background: var(--s50);
}

.te-option.committed {
    border-color: var(--pink);
    background: #fce4ec;
}

.te-opt-letter {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid var(--s300);
    color: var(--s600);
    font-weight: 700;
    font-size: .74rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.te-option.committed .te-opt-letter {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.te-opt-text {
    font-size: .86rem;
    line-height: 1.5;
    color: var(--s700);
}

.te-opt-img {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin-top: 6px;
}

.te-opt-lock {
    color: var(--pink);
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: 4px;
}

.te-commit-note,
.te-locked-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .72rem;
    line-height: 1.5;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 14px;
}

.te-commit-note {
    background: var(--g50);
    color: var(--g600);
}

.te-locked-note {
    background: #fce4ec;
    color: var(--pink);
}

/* Sticky footer: prev · mark-for-review · MARK ANSWER · next */
.te-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: #fff;
    border-top: 1px solid var(--s200);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--safe-bottom));
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
}

.te-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s600);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.te-nav-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.te-nav-btn:active:not(:disabled) {
    transform: scale(.94);
    transition: transform .08s;
}

.te-nav-btn.marked {
    background: var(--amber-bg);
    border-color: var(--amber);
    color: var(--amber);
}

.te-mark-answer-btn {
    flex: 1;
    min-height: 48px;
    border: 2px solid var(--pink);
    border-radius: 12px;
    background: var(--pink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}

.te-mark-answer-btn:active {
    transform: scale(.98);
    transition: transform .08s;
}

.te-mark-answer-btn.locked {
    background: #fce4ec;
    color: var(--pink);
}

/* ── OMR commit drawer — the pink NEET answer-sheet moment ── */
.omr-m-sheet {
    background: #fff;
    border: 2px solid var(--pink);
    border-radius: 12px;
    padding: 14px;
}

.omr-m-title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--pink);
    font-size: .88rem;
    letter-spacing: .08em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pink);
    margin-bottom: 10px;
}

.omr-m-instructions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: .64rem;
    color: var(--pink);
    margin-bottom: 12px;
    padding: 7px;
    border: 1px solid var(--pink);
    border-radius: 6px;
}

.omr-m-instructions span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.omr-m-recent {
    margin-bottom: 6px;
    opacity: .75;
}

.omr-m-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid #fce4ec;
}

.omr-m-row.mini {
    padding: 4px 10px;
}

.omr-m-row.live {
    background: #fce4ec;
    border-radius: 10px;
    border-bottom: none;
    padding: 14px 12px;
    margin-top: 4px;
}

.omr-m-qnum {
    min-width: 34px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .9rem;
    color: var(--s700);
    text-align: center;
}

.omr-m-row.mini .omr-m-qnum {
    font-size: .7rem;
    color: var(--s500);
}

.omr-m-bubbles {
    display: flex;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

.omr-m-bubble {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: .86rem;
    font-weight: 700;
    color: var(--pink);
    cursor: pointer;
    user-select: none;
    transition: background .12s, transform .12s;
    padding: 0;
}

.omr-m-bubble:active:not(.locked) {
    transform: scale(.9);
}

.omr-m-bubble.mini {
    width: 24px;
    height: 24px;
    font-size: .56rem;
    border-width: 1.5px;
    cursor: default;
}

.omr-m-bubble.filled {
    background: var(--s900);
    border-color: var(--s900);
    color: #fff;
}

.omr-m-bubble.locked {
    cursor: not-allowed;
}

.omr-m-bubble.locked:not(.filled) {
    opacity: .45;
}

.omr-m-lockicon {
    color: var(--pink);
    font-size: .66rem;
    opacity: .7;
}

.omr-m-note {
    text-align: center;
    font-size: .68rem;
    color: var(--s500);
    margin-top: 12px;
    line-height: 1.5;
}

.omr-m-note.locked {
    color: var(--pink);
    font-weight: 600;
}

/* ── Question palette drawer ── */
.te-pal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: .66rem;
    color: var(--s500);
    margin-bottom: 12px;
}

.te-pal-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.te-pal-dot {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    display: inline-block;
}

.te-pal-dot.answered {
    background: var(--green-600);
}

.te-pal-dot.unanswered {
    background: var(--red);
}

.te-pal-dot.marked {
    background: var(--amber);
}

.te-pal-dot.notvisited {
    background: var(--s200);
}

.te-pal-scroll {
    max-height: 46vh;
    overflow-y: auto;
}

.te-pal-subject {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    color: var(--s500);
    margin: 10px 0 7px;
}

.te-pal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 7px;
}

.te-pal-cell {
    min-height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s500);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .74rem;
    cursor: pointer;
}

.te-pal-cell.answered {
    background: var(--green-600);
    border-color: var(--green-600);
    color: #fff;
}

.te-pal-cell.unanswered {
    background: var(--red-bg);
    border-color: var(--red);
    color: var(--red);
}

.te-pal-cell.marked {
    background: var(--amber-bg);
    border-color: var(--amber);
    color: var(--amber);
}

.te-pal-cell.answered.marked {
    background: var(--green-600);
    border-color: var(--amber);
    color: #fff;
    box-shadow: 0 0 0 2px var(--amber-bg);
}

.te-pal-cell.notvisited {
    background: var(--s100);
    border-color: var(--s200);
    color: var(--s400);
}

/* ── Submit confirm counts ── */
.te-submit-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 6px 0 10px;
}

.te-submit-counts div {
    text-align: center;
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 12px;
    padding: 12px 6px;
}

.te-submit-counts b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--s800);
}

.te-submit-counts span {
    display: block;
    font-size: .62rem;
    color: var(--s500);
    margin-top: 3px;
}

/* ════ RESULTS ════ */
.res-hero {
    text-align: center;
    border-radius: 16px;
    padding: 24px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--s900), var(--g700));
    margin-bottom: 12px;
}

.res-hero.pyq {
    background: linear-gradient(135deg, var(--g700), var(--indigo));
}

.res-hero .kicker {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g400);
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 6px;
}

.res-hero h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.res-hero>p {
    font-size: .72rem;
    color: var(--s300);
    margin-top: 6px;
}

.res-score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.6rem;
    margin-top: 10px;
    line-height: 1;
}

.res-score span {
    font-size: 1.1rem;
    color: var(--s400);
    font-weight: 700;
}

.res-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.res-counts div {
    border-radius: 12px;
    padding: 10px 4px;
    background: rgba(255, 255, 255, .08);
}

.res-counts b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.res-counts .c b {
    color: #7ee2a8;
}

.res-counts .w b {
    color: #f8a5a5;
}

.res-counts .u b {
    color: var(--s300);
}

.res-counts span {
    display: block;
    font-size: .58rem;
    color: var(--s300);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* AIR prediction card */
.res-air-card {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
}

.res-air-card .kicker {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s400);
    font-weight: 700;
    font-family: var(--font-display);
}

.res-air-range {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--g600);
    margin-top: 8px;
}

.res-air-card>p {
    font-size: .72rem;
    color: var(--s500);
    margin-top: 5px;
}

.res-air-cats {
    margin-top: 12px;
}

.res-air-cats>span {
    display: block;
    font-size: .64rem;
    color: var(--s400);
    font-weight: 700;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.res-qualify {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    border-radius: 10px;
    padding: 9px;
    font-size: .74rem;
    font-weight: 700;
}

.res-qualify.yes {
    background: #e7f6ec;
    color: var(--green-600);
}

.res-qualify.no {
    background: var(--red-bg);
    color: var(--red);
}

/* College predictions (Arena results only) */
.res-ctx-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--amber-bg);
    color: var(--amber);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .7rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.res-college-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 12px 14px;
}

.res-college-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--s800);
    line-height: 1.35;
}

.res-college-card p {
    font-size: .66rem;
    color: var(--s500);
    margin-top: 3px;
}

.res-college-cutoff {
    color: var(--g600) !important;
    font-weight: 600;
}

/* Subject / mini breakdowns */
.res-subject-card {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 12px 14px;
}

.res-subject-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.res-subject-head h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .84rem;
    color: var(--s800);
}

.res-subject-head b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: var(--g600);
}

.res-subject-head b span {
    font-size: .68rem;
    color: var(--s400);
}

.res-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--s100);
}

.res-bar .c {
    background: var(--green-600);
}

.res-bar .w {
    background: var(--red);
}

.res-bar .u {
    background: var(--s200);
}

.res-subject-card>p {
    font-size: .68rem;
    color: var(--s500);
    margin-top: 7px;
}

.res-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.res-mini-card {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    padding: 11px 12px;
}

.res-mini-card b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .78rem;
    color: var(--s800);
}

.res-mini-card p {
    font-size: .66rem;
    color: var(--s500);
    margin-top: 4px;
}

.res-weak-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--amber-bg);
    border: 1px solid #f0e0c2;
    border-radius: 12px;
    padding: 11px 13px;
}

.res-weak-row i {
    color: var(--amber);
    flex-shrink: 0;
}

.res-weak-row h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .78rem;
    color: var(--s800);
}

.res-weak-row p {
    font-size: .66rem;
    color: var(--s500);
    margin-top: 2px;
}

/* Question review accordion */
.res-review-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.res-rev-item {
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    margin-bottom: 8px;
    overflow: hidden;
}

.res-rev-item.correct {
    border-left: 4px solid var(--green-600);
}

.res-rev-item.wrong {
    border-left: 4px solid var(--red);
}

.res-rev-item.unattempted {
    border-left: 4px solid var(--s300);
}

.res-rev-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.res-rev-state {
    font-size: 1rem;
    flex-shrink: 0;
}

.res-rev-item.correct .res-rev-state {
    color: var(--green-600);
}

.res-rev-item.wrong .res-rev-state {
    color: var(--red);
}

.res-rev-item.unattempted .res-rev-state {
    color: var(--s400);
}

.res-rev-head h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--s800);
}

.res-rev-head p {
    font-size: .64rem;
    color: var(--s500);
    margin-top: 2px;
}

.res-rev-marks {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .76rem;
    color: var(--s500);
}

.res-rev-marks.pos {
    color: var(--green-600);
}

.res-rev-marks.neg {
    color: var(--red);
}

.res-rev-caret {
    flex-shrink: 0;
    color: var(--s300);
    font-size: .72rem;
    transition: transform .16s;
}

.res-rev-item.open .res-rev-caret {
    transform: rotate(180deg);
}

.res-rev-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--s100);
}

.res-rev-item.open .res-rev-body {
    display: block;
    padding-top: 12px;
}

.res-rev-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--s50);
}

.res-rev-opt.correct {
    border-color: var(--green-600);
    background: #e7f6ec;
}

.res-rev-opt.mine-wrong {
    border-color: var(--red);
    background: var(--red-bg);
}

.res-rev-optexp {
    font-size: .7rem;
    color: var(--s500);
    margin-top: 6px;
    line-height: 1.5;
}

.res-rev-answers {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .72rem;
    color: var(--s500);
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--s50);
    border-radius: 10px;
}

.res-rev-answers b {
    color: var(--s800);
}

.res-rev-block {
    border-radius: 10px;
    padding: 11px 12px;
    margin-top: 10px;
    font-size: .76rem;
    line-height: 1.55;
}

.res-rev-block h5 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.res-rev-block ul {
    padding-left: 18px;
}

.res-rev-block li {
    margin-bottom: 4px;
}

.res-rev-block.exp {
    background: var(--g50);
    color: var(--s700);
}

.res-rev-block.exp h5 {
    color: var(--g600);
}

.res-rev-block.key {
    background: var(--indigo-bg);
    color: var(--s700);
}

.res-rev-block.key h5 {
    color: var(--indigo);
}

.res-rev-block.ncert {
    background: var(--purple-bg);
    color: var(--s700);
}

.res-rev-block.ncert h5 {
    color: var(--purple);
}

.res-rev-block.mistakes {
    background: var(--red-bg);
    color: var(--s700);
}

.res-rev-block.mistakes h5 {
    color: var(--red);
}

.res-rev-block.tip {
    background: var(--amber-bg);
    color: var(--s700);
}

.res-rev-block.tip h5 {
    color: var(--amber);
}

.res-rev-block.flash {
    background: var(--s100);
    color: var(--s700);
}

.res-rev-block.flash h5 {
    color: var(--s600);
}

/* ════════════════════════════════════════════════════════════════
   10. STUDY MATERIAL (PDF reader) + REVISION NOTES (notebooks)
   Reader chrome reuses the test engine's .te-icon-btn / .te-nav-btn
   tokens; the notebook aesthetic (spine colors, ruled paper, tag
   typography) is adapted from the desktop styles.css for ~380px.
   ════════════════════════════════════════════════════════════════ */

/* ── Study landing: coming-soon subject cards (Physics/Chemistry —
      actual current content state, mirrored from desktop) ── */
.revise-subject-card.sm-soon {
    position: relative;
    opacity: .82;
}

.revise-subject-card.sm-soon .soon-tag {
    display: inline-block;
    margin-top: 8px;
}

/* ════ PDF READER — focused full-screen mode ════ */
.pdfm-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--s700);
}

.pdfm-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--s900);
    color: #fff;
    padding: calc(8px + var(--safe-top)) 10px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdfm-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pdfm-title b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdfm-title span {
    font-size: .62rem;
    color: var(--s400);
    margin-top: 1px;
}

.pdfm-topbar .te-icon-btn.on {
    background: var(--amber);
    color: #fff;
}

.pdfm-stage {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    padding: 8px 8px calc(88px + var(--safe-bottom));
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pdfm-page-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin: auto;
}

#pdfm-canvas {
    display: block;
    box-shadow: 0 8px 24px rgba(15, 20, 34, .3);
    border-radius: 4px;
    background: #fff;
}

/* Saved-highlight overlay — fractional rects × current canvas size */
.pdfm-hl-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}

.pdfm-hl-rect {
    position: absolute;
    pointer-events: auto;
    opacity: .42;
    mix-blend-mode: multiply;
    border-radius: 2px;
    cursor: pointer;
}

/* PDF.js text layer — invisible selectable text over the canvas */
.pdfm-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    line-height: 1;
    z-index: 3;
}

.pdfm-text-layer span,
.pdfm-text-layer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    user-select: text;
    -webkit-user-select: text;
}

.pdfm-text-layer ::selection {
    background: rgba(255, 214, 0, .4);
    color: transparent;
}

/* ── Highlight color bar (appears on text selection, pinned above
      the toolbar — away from Android's own selection bubble) ── */
.pdfm-hl-bar {
    position: fixed;
    left: 50%;
    bottom: calc(76px + var(--safe-bottom));
    width: max-content;
    max-width: calc(100% - 24px);
    z-index: 96;
    background: var(--s900);
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 8px 24px rgba(15, 20, 34, .4);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .16s, transform .16s;
}

.pdfm-hl-bar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.pdfm-hl-bar-label {
    font-size: .64rem;
    color: var(--s400);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.pdfm-hl-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .3);
    cursor: pointer;
    flex-shrink: 0;
}

.pdfm-hl-swatch:active {
    transform: scale(.88);
    transition: transform .08s;
}

.pdfm-hl-bar-close {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: var(--s300);
    cursor: pointer;
    flex-shrink: 0;
}

.pdfm-hl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Bottom toolbar ── */
.pdfm-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: #fff;
    border-top: 1px solid var(--s200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 8px calc(9px + var(--safe-bottom));
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
}

.pdfm-tb-group {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.pdfm-toolbar .te-nav-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.pdfm-pageind {
    min-height: 38px;
    padding: 0 9px;
    border-radius: 11px;
    border: 1.5px solid var(--s200);
    background: var(--s50);
    color: var(--s700);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .72rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pdfm-note-btn {
    min-height: 38px;
    padding: 0 11px;
    border: none;
    border-radius: 11px;
    background: var(--g600);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.pdfm-note-btn:active {
    transform: scale(.96);
    transition: transform .08s;
}

/* ── Sidebar drawer: Highlights / Bookmarks / Notes ── */
.pdfm-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(15, 23, 42, .5);
    display: none;
}

.pdfm-sidebar-overlay.open {
    display: block;
}

.pdfm-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 88vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 24px rgba(15, 23, 42, .25);
    animation: pdfmSlideIn .18s ease;
    padding-top: var(--safe-top);
}

@keyframes pdfmSlideIn {
    from {
        transform: translateX(40px);
        opacity: .6;
    }

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

.pdfm-sb-tabs {
    display: flex;
    border-bottom: 1px solid var(--s200);
}

.pdfm-sb-tabs button {
    flex: 1;
    min-height: 48px;
    border: none;
    background: none;
    color: var(--s500);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
}

.pdfm-sb-tabs button.active {
    color: var(--g600);
    border-bottom-color: var(--g600);
}

.pdfm-sb-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
}

.pdfm-sb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 12px;
    border: 1px solid var(--s150, var(--s200));
    background: var(--s50);
    margin-bottom: 8px;
    cursor: pointer;
}

.pdfm-sb-row:active {
    transform: scale(.98);
    transition: transform .08s;
}

.pdfm-sb-snippet {
    font-size: .76rem;
    color: var(--s700);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pdfm-sb-meta {
    font-size: .62rem;
    color: var(--s400);
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pdfm-sb-del {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: var(--red-bg);
    color: var(--red);
    cursor: pointer;
    flex-shrink: 0;
}

.pdfm-sb-empty {
    text-align: center;
    color: var(--s400);
    font-size: .78rem;
    line-height: 1.6;
    padding: 40px 18px;
}

.pdfm-sb-empty i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--s300);
}

/* ── Reading modes (display-only preference) ── */
.pdfm-wrap.mode-light .pdfm-stage {
    background: var(--s700);
}

.pdfm-wrap.mode-sepia .pdfm-stage {
    background: #4a4238;
}

.pdfm-wrap.mode-sepia #pdfm-canvas {
    filter: sepia(.38) brightness(.99);
}

.pdfm-wrap.mode-dark .pdfm-stage {
    background: #0b1220;
}

.pdfm-wrap.mode-dark #pdfm-canvas {
    filter: invert(.92) hue-rotate(180deg);
}

/* ════ REVISION NOTES — notebook grid ════ */
.nb-count-pill {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--g50);
    color: var(--g600);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.nb-count-pill.full {
    background: var(--amber-bg);
    color: var(--amber);
}

.nb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nb-card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 15px 13px 13px 16px;
    cursor: pointer;
    overflow: hidden;
    animation: nbRise .42s backwards;
}

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

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

.nb-card::before {
    /* notebook spine, coloured per card */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--spine, var(--s300));
}

.nb-card::after {
    /* faint page-edge stack on the right — reads as a book */
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 0;
    width: 4px;
    background: repeating-linear-gradient(to right,
            rgba(15, 23, 42, .07) 0 1px, transparent 1px 2px);
}

.nb-card.spine-1 {
    --spine: var(--g600);
}

.nb-card.spine-2 {
    --spine: var(--indigo);
}

.nb-card.spine-3 {
    --spine: var(--amber);
}

.nb-card.spine-4 {
    --spine: var(--red);
}

.nb-card.spine-5 {
    --spine: var(--purple);
}

.nb-card.spine-6 {
    --spine: #0f766e;
}

.nb-card:active {
    transform: scale(.97);
    transition: transform .08s;
}

.nb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.nb-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--spine, var(--s400)) 14%, #fff);
    color: var(--spine, var(--s600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.nb-card-go {
    color: var(--s300);
    font-size: .8rem;
}

.nb-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .86rem;
    color: var(--s800);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nb-card p {
    font-size: .68rem;
    color: var(--s500);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nb-card p i {
    color: var(--spine, var(--s400));
    font-size: .62rem;
}

.nb-card.add-new {
    border-style: dashed;
    border-color: var(--s300);
    background: var(--s50);
}

.nb-card.add-new::before,
.nb-card.add-new::after {
    display: none;
}

.nb-card.add-new .nb-card-icon {
    background: var(--g50);
    color: var(--g600);
}

.nb-card.add-new.disabled {
    cursor: default;
    opacity: .8;
}

.nb-card.add-new.disabled .nb-card-icon {
    background: var(--amber-bg);
    color: var(--amber);
}

/* ════ Notebook detail — warm paper page ════ */
.nb-page {
    background: #fdfcf8;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 18px 14px 16px 22px;
    position: relative;
    overflow: hidden;
}

.nb-page::before {
    /* red margin line, classic notebook */
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: rgba(196, 61, 61, .35);
}

.nb-page-header {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--g600);
    margin-bottom: 16px;
}

.nb-page-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--s900);
}

.nb-page-header p {
    font-size: .72rem;
    color: var(--s500);
    margin-top: 4px;
}

.nb-empty {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    color: var(--s400);
    line-height: 1.6;
    padding: 16px 4px 20px;
}

/* ── Note entries (tag typography adapted from desktop) ── */
@keyframes nbNoteIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@keyframes nbNoteOut {
    to {
        opacity: 0;
        transform: scale(.96) translateX(-10px);
    }
}

.nb-note-entry {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-left: 4px solid var(--s300);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    padding: 12px 12px 10px 14px;
    margin-bottom: 12px;
    animation: nbNoteIn .3s backwards;
}

.nb-note-entry.nb-note-removing {
    animation: nbNoteOut .2s forwards;
}

.nb-note-entry.tag-general {
    border-left-color: #94a3b8;
}

.nb-note-entry.tag-definition {
    border-left-color: var(--g500);
}

.nb-note-entry.tag-formula {
    border-left-color: var(--indigo);
}

.nb-note-entry.tag-example {
    border-left-color: var(--amber);
}

.nb-note-entry.tag-important {
    border-left-color: var(--red);
}

.nb-note-entry.is-starred {
    background: #fffbe8;
    border-left-color: var(--amber) !important;
}

.nb-note-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.nb-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tag);
    background: #fff;
    border: 1px solid var(--s200);
    background: color-mix(in srgb, var(--tag) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--tag) 30%, #fff);
}

.nb-note-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    color: var(--s400);
    font-weight: 600;
}

.nb-star-ind {
    margin-left: auto;
    color: var(--amber);
    font-size: .82rem;
}

.nb-note-text {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.7;
    color: #16203a;
    white-space: pre-wrap;
    word-break: break-word;
}

.tag-definition .nb-note-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .92rem;
    font-style: italic;
    line-height: 1.75;
    color: #14532d;
}

.tag-formula .nb-note-text {
    font-family: var(--font-mono), 'Courier New', monospace;
    font-size: .86rem;
    line-height: 1.9;
    background: rgba(238, 242, 255, .6);
    border-radius: 6px;
    padding: 8px 10px;
    color: #312e81;
    letter-spacing: .02em;
}

.tag-example .nb-note-text,
.tag-important .nb-note-text {
    font-family: var(--font-body);
    font-size: .88rem;
    line-height: 1.65;
}

.tag-important .nb-note-text {
    color: #7f1d1d;
    font-weight: 600;
}

.nb-note-annotation {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--amber-bg);
    color: #8a6116;
    font-size: .76rem;
    line-height: 1.5;
    display: flex;
    gap: 7px;
    align-items: flex-start;
}

.nb-note-annotation i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: .66rem;
}

.nb-note-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 9px;
}

.nb-note-actions button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--s200);
    background: #fff;
    color: var(--s500);
    font-size: .78rem;
    cursor: pointer;
}

.nb-note-actions button:active {
    transform: scale(.92);
    transition: transform .08s;
}

.nb-note-actions button.danger {
    color: var(--red);
    border-color: var(--red-bg);
    background: var(--red-bg);
}

.nb-add-note-inline {
    width: 100%;
    min-height: 50px;
    border: 1.5px dashed var(--s300);
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    color: var(--g600);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.nb-add-note-inline:active {
    transform: scale(.98);
    transition: transform .08s;
}

/* ── Composer / inputs ── */
.nb-input {
    width: 100%;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    background: var(--s50);
    padding: 12px;
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--s800);
    resize: vertical;
}

.nb-input:focus {
    outline: none;
    border-color: var(--g500);
    background: #fff;
}

.nb-composer-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    color: var(--s600);
    margin: 12px 0 6px;
}

.nb-composer-label span {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--s400);
}

.nb-tag-pick {
    min-height: 36px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s600);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nb-tag-pick.active {
    border-color: var(--tag);
    background: #fff;
    background: color-mix(in srgb, var(--tag) 12%, #fff);
    color: var(--tag);
}

.nb-star-toggle {
    margin-top: 12px;
    min-height: 42px;
    width: 100%;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    background: #fff;
    color: var(--s500);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}

.nb-star-toggle.on {
    border-color: var(--amber);
    background: var(--amber-bg);
    color: var(--amber);
}

.btn.danger-outline {
    color: var(--red);
    border-color: var(--red-bg);
    background: var(--red-bg);
}

/* ════════════════════════════════════════════════════════════════
   OPD (adaptive chapter test engine) — hub, case sheet, chapter
   journey, match-the-following, results, intervention overlay.
   Uses only existing tokens (see :root). Appended by the OPD build.
   ════════════════════════════════════════════════════════════════ */

/* ── ph-start-btn variants used by OPD (danger already exists) ── */
.ph-start-btn.purple {
    background: var(--purple);
}

.ph-start-btn.purple:active:not(:disabled) {
    background: var(--purple);
    filter: brightness(.92);
}

.ph-start-btn.dark {
    background: var(--s800);
}

.ph-start-btn.dark:active:not(:disabled) {
    background: var(--s900);
}

/* ════════════════════════════════════════════════════════════════
   OPD v2 — hub, chapter journey, results, intervention overlay.
   Uses only existing :root tokens. Replaces the v1 OPD block.

   Colour is now SEMANTIC and fixed:
     red    = your error / what went wrong
     amber  = caution, traps, degraded state
     green  = correct, verified, confirmed
     indigo = reference material (NCERT, source)
     purple = AI
   In v1, red meant four different things and green meant three, so
   colour carried no information and was purely decorative.

   Every animation below no-ops under prefers-reduced-motion (see the
   guard block at the end). v1 had ZERO OPD-specific keyframes.
   ════════════════════════════════════════════════════════════════ */

/* ── shared motion primitives ── */
@keyframes opdRise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

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

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

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

@keyframes opdSkShimmer {
    to {
        background-position: 200% 0;
    }
}

@keyframes opdPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(47, 108, 179, .38);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(47, 108, 179, 0);
    }
}

@keyframes opdSparkDraw {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes opdOrbFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.04);
    }
}

@keyframes opdOrbHalo {

    0%,
    100% {
        opacity: .35;
        transform: scale(1);
    }

    50% {
        opacity: .7;
        transform: scale(1.25);
    }
}

@keyframes opdPopIn {
    0% {
        opacity: 0;
        transform: scale(.7);
    }

    60% {
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered container entrance. */
.opd-reveal>* {
    animation: opdRise .38s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-reveal>*:nth-child(1) {
    animation-delay: .02s;
}

.opd-reveal>*:nth-child(2) {
    animation-delay: .06s;
}

.opd-reveal>*:nth-child(3) {
    animation-delay: .1s;
}

.opd-reveal>*:nth-child(4) {
    animation-delay: .14s;
}

.opd-reveal>*:nth-child(5) {
    animation-delay: .18s;
}

.opd-reveal>*:nth-child(6) {
    animation-delay: .22s;
}

.opd-reveal>*:nth-child(7) {
    animation-delay: .26s;
}

.opd-reveal>*:nth-child(8) {
    animation-delay: .3s;
}

.opd-reveal>*:nth-child(n+9) {
    animation-delay: .34s;
}

/* ── skeletons ── */
.opd-sk {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--s100) 25%, var(--s50) 37%, var(--s100) 63%);
    background-size: 200% 100%;
    animation: opdSkShimmer 1.3s linear infinite;
}

.opd-sk-row {
    height: 52px;
    margin: 8px;
}

.opd-sk-pct {
    width: 44px;
    height: 18px;
}

.opd-sk-head {
    height: 96px;
    margin-bottom: 12px;
    border-radius: 16px;
}

.opd-sk-hero {
    height: 148px;
    margin-bottom: 14px;
    border-radius: 18px;
}

.opd-subject-col.skel .opd-subject-head {
    pointer-events: none;
}

/* ── ph-start-btn variants used by OPD (danger already exists) ── */
.ph-start-btn.purple {
    background: var(--purple);
}

.ph-start-btn.purple:active:not(:disabled) {
    background: var(--purple);
    filter: brightness(.92);
}

.ph-start-btn.dark {
    background: var(--s800);
}

.ph-start-btn.dark:active:not(:disabled) {
    background: var(--s900);
}

.ph-start-btn.mock {
    background: linear-gradient(135deg, var(--amber) 0%, #a8690f 100%);
}

.ph-start-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* ── back bar (replaces the full outline button) ── */
.opd-backbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 6px 8px 6px 0;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--s500);
    cursor: pointer;
    min-height: 40px;
    transition: color .15s, transform .15s;
}

.opd-backbar:active {
    color: var(--g600);
    transform: translateX(-2px);
}

.opd-backbar i {
    font-size: .74rem;
}

/* ── HUB: toolbar (search + filters) ── */
.opd-toolbar {
    margin-bottom: 12px;
}

.opd-search {
    position: relative;
    display: flex;
    align-items: center;
}

.opd-search>i {
    position: absolute;
    left: 13px;
    font-size: .82rem;
    color: var(--s400);
    pointer-events: none;
}

.opd-search input {
    width: 100%;
    min-height: 46px;
    padding: 10px 40px 10px 36px;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    background: #fff;
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--s800);
    transition: border-color .16s, box-shadow .16s;
    -webkit-appearance: none;
    appearance: none;
}

.opd-search input::-webkit-search-cancel-button {
    display: none;
}

.opd-search input:focus {
    outline: none;
    border-color: var(--g400);
    box-shadow: 0 0 0 3px rgba(47, 108, 179, .12);
}

.opd-search input::placeholder {
    color: var(--s400);
}

.opd-search-clear {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--s100);
    color: var(--s500);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .74rem;
}

.opd-search-clear.show {
    display: flex;
}

.opd-filters {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.opd-filters::-webkit-scrollbar {
    display: none;
}

.opd-fchip {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--s200);
    background: #fff;
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 600;
    color: var(--s500);
    cursor: pointer;
    min-height: 36px;
    transition: background .16s, border-color .16s, color .16s, transform .1s;
}

.opd-fchip:active {
    transform: scale(.96);
}

.opd-fchip b {
    font-weight: 800;
    margin-left: 2px;
    opacity: .75;
}

.opd-fchip.on {
    background: var(--s900);
    border-color: var(--s900);
    color: #fff;
}

.opd-fchip.wrong.on {
    background: var(--red);
    border-color: var(--red);
}

.opd-fchip.correct.on {
    background: var(--green-600);
    border-color: var(--green-600);
}

.opd-fchip.skipped.on {
    background: var(--s500);
    border-color: var(--s500);
}

.opd-searchcount {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s400);
    padding: 2px 2px 10px;
}

.opd-searchgroup {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 4px 8px 8px;
    /* deliberately NOT overflow:hidden — an overflow-hidden ancestor kills
       position:sticky on .opd-class-label. Nothing here needs clipping: the
       rows are inset by the padding and carry their own border-radius. */
}

/* ── HUB: subject accordions ── */
.opd-subject-col {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

/* the open card is the focal point of the hub */
.opd-subject-col.open {
    border-color: var(--g200);
    box-shadow: 0 6px 22px -12px rgba(23, 63, 111, .3);
}

.opd-subject-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    font-family: var(--font-body);
    cursor: pointer;
    min-height: 60px;
    text-align: left;
}

.opd-subject-head>i:first-child {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--g50);
    color: var(--g600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.opd-subject-col.open .opd-subject-head>i:first-child {
    background: var(--g500);
    color: #fff;
}

.opd-subject-name {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--s800);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* the honest caption: "4 of 44 cases opened" */
.opd-subject-name em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: .7rem;
    font-weight: 500;
    color: var(--s400);
}

.opd-subject-pct {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.opd-subject-pct b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--g600);
    font-variant-numeric: tabular-nums;
}

.opd-subject-pct em {
    font-style: normal;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s400);
}

.opd-subject-chevron {
    color: var(--s400);
    font-size: .8rem;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0;
}

.opd-subject-chevron.open {
    transform: rotate(180deg);
}

.opd-subject-bar {
    height: 4px;
    background: var(--s100);
    margin: 0 14px;
    border-radius: 2px;
    overflow: hidden;
}

.opd-subject-bar>div {
    height: 100%;
    background: linear-gradient(90deg, var(--g400), var(--g600));
    border-radius: 2px;
    transition: width .7s cubic-bezier(.16, 1, .3, 1);
}

/* height-animated accordion (was display:none/block) */
.opd-subject-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .26s cubic-bezier(.4, 0, .2, 1);
}

.opd-subject-body.open {
    max-height: none;
}

.opd-subject-inner {
    padding: 8px 8px 10px;
}

.opd-class-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s400);
    padding: 10px 8px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

/* ── HUB: Class XI / XII segmented toggle ── */
.opd-classseg {
    position: relative;
    display: flex;
    background: var(--s100);
    border-radius: 12px;
    padding: 3px;
    margin: 0 0 10px;
}

.opd-classseg-ind {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}

.opd-classseg-ind.right {
    transform: translateX(100%);
}

.opd-classseg button {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    background: none;
    padding: 10px 6px;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--s500);
    cursor: pointer;
    min-height: 42px;
    transition: color .2s;
}

.opd-classseg button.on {
    color: var(--s900);
    font-weight: 700;
}

/* ── HUB: case rows ── */
.opd-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opd-case-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    min-height: 56px;
    border-left: 3px solid transparent;
    transition: background .14s, border-color .2s, transform .1s;
}

.opd-case-row:active {
    background: var(--s50);
    transform: scale(.995);
}

/* three visually distinct states */
.opd-case-row.fresh {
    opacity: .72;
}

.opd-case-row.fresh:active {
    opacity: 1;
}

.opd-case-row.active {
    border-left-color: var(--g400);
    background: linear-gradient(90deg, var(--g50) 0%, rgba(255, 255, 255, 0) 60%);
}

.opd-case-row.strong {
    border-left-color: var(--green-600);
    background: linear-gradient(90deg, #f4fbf6 0%, rgba(255, 255, 255, 0) 60%);
}

/* Locked case rows are now TAPPABLE — they open the paywall rather
   than doing nothing. opacity:.5 + cursor:default was right when the
   row was inert; it reads as broken on something you are inviting the
   student to press. Muted but alive instead, and the dashed edge does
   the "locked" work that the fade used to.

   Shared with desktop: opd-desktop.js reuses opdCaseRowHtml verbatim
   inside .opddesk-casegrid, and opd-desktop.css already scopes its
   hover with :not(.locked). */

.opd-case-row.locked {
    border-style: dashed;
    cursor: pointer;
}

.opd-case-row.locked .opd-case-title {
    color: var(--s500, #64748b);
}

.opd-case-row.locked .opd-case-num {
    background: var(--s100, #f1f5f9);
    color: var(--s400, #94a3b8);
}

.opd-case-num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--s100);
    color: var(--s500);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.opd-case-row.active .opd-case-num {
    background: var(--g100);
    color: var(--g700);
}

.opd-case-row.strong .opd-case-num {
    background: #dcf3e4;
    color: var(--green-600);
}

.opd-case-info {
    flex: 1;
    min-width: 0;
}

/* R2 [7a.2]: long chapter names were truncated the same way. */
.opd-case-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--s700);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
}

.opd-case-row.active .opd-case-title,
.opd-case-row.strong .opd-case-title {
    color: var(--s900);
    font-weight: 700;
}

.opd-case-title mark {
    background: #fdf0c8;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.opd-case-sub {
    font-size: .7rem;
    color: var(--s400);
}

/* real progress from /api/chapters — replaces the dead phase strip */
.opd-case-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.opd-case-bar {
    width: 54px;
    height: 4px;
    background: var(--s200);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.opd-case-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.opd-case-bar i.good {
    background: var(--green-600);
}

.opd-case-bar i.warm {
    background: var(--g500);
}

.opd-case-tests {
    font-size: .68rem;
    color: var(--s400);
    font-weight: 600;
    white-space: nowrap;
}

.opd-case-level {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--s500);
    background: var(--s100);
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
}

.opd-case-pct {
    font-size: .82rem;
    font-weight: 700;
    color: var(--s300);
    min-width: 46px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.opd-case-pct.good {
    color: var(--green-600);
}

.opd-case-pct.warm {
    color: var(--amber);
}

.opd-case-pct.new {
    font-size: .7rem;
    font-weight: 700;
    color: var(--g500);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.opd-case-pct.new i {
    font-size: .62rem;
}

/* ── empty states ── */
.opd-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--s400);
}

.opd-empty.small {
    padding: 20px 12px;
}

.opd-empty>i {
    font-size: 1.6rem;
    color: var(--s300);
    margin-bottom: 8px;
    display: block;
}

.opd-empty h4 {
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
    color: var(--s600);
    margin: 0;
}

.opd-empty p {
    font-size: .78rem;
    margin: 5px 0 0;
    color: var(--s400);
}

/* ── CHAPTER head ── */
.opd-chapter-head {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 12px;
}

.opd-chapter-head h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--s900);
    line-height: 1.25;
    margin: 0;
}

.opd-chapter-head>p {
    font-size: .78rem;
    color: var(--s500);
    margin: 5px 0 0;
}

.opd-chapter-stats {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.opd-chapter-stats>div {
    flex: 1;
    background: var(--s50);
    border-radius: 12px;
    padding: 9px 10px;
    text-align: center;
}

.opd-chapter-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--s900);
    font-variant-numeric: tabular-nums;
}

.opd-chapter-stats span {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s400);
}

/* ── THE HERO: one card, one next action ── */
.opd-hero {
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--s200);
    background: #fff;
    position: relative;
    overflow: hidden;
}

.opd-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 9px;
}

.opd-hero h3 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--s900);
    margin: 0;
    line-height: 1.3;
}

.opd-hero p {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--s600);
    margin: 6px 0 0;
}

.opd-hero .ph-start-btn,
.opd-hero .btn-outline {
    margin-top: 13px;
    width: 100%;
}

.opd-hero-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.opd-hero-blurb {
    font-size: .7rem;
    color: var(--s400);
    font-weight: 500;
}

.opd-hero-spec {
    display: flex !important;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px !important;
}

.opd-hero-spec span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--s500);
}

.opd-hero-spec i {
    font-size: .7rem;
    color: var(--s400);
}

/* go = the normal "start your next test" state */
.opd-hero.go {
    border-color: var(--g200);
    background:
        radial-gradient(120% 100% at 100% 0%, var(--g50) 0%, rgba(255, 255, 255, 0) 60%),
        #fff;
}

.opd-hero.go .opd-hero-tag {
    background: var(--g50);
    color: var(--g600);
}

/* the unlock beat on a passed test */
.opd-hero.unlock .opd-hero-tag {
    background: #dcf3e4;
    color: var(--green-600);
    animation: opdPopIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-hero.red {
    border-color: #eccfcf;
    background:
        radial-gradient(120% 100% at 100% 0%, var(--red-bg) 0%, rgba(255, 255, 255, 0) 62%),
        #fff;
}

.opd-hero.red .opd-hero-tag {
    background: var(--red-bg);
    color: var(--red);
}

.opd-hero.green {
    border-color: #c9e8d5;
    background:
        radial-gradient(120% 100% at 100% 0%, #f0faf3 0%, rgba(255, 255, 255, 0) 62%),
        #fff;
}

.opd-hero.green .opd-hero-tag {
    background: #dcf3e4;
    color: var(--green-600);
}

.opd-hero.muted .opd-hero-tag {
    background: var(--s100);
    color: var(--s500);
}

.opd-hero.muted h3 {
    color: var(--s600);
}

/* ── quiet note (advice must NOT look like a blocker) ── */
.opd-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 14px;
    padding: 12px 13px;
    margin-top: 16px;
}

.opd-note>i {
    color: var(--s400);
    font-size: .88rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.opd-note b {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--s700);
    margin-bottom: 3px;
}

.opd-note p {
    font-size: .78rem;
    line-height: 1.55;
    color: var(--s500);
    margin: 0;
}

.opd-note.amber {
    background: var(--amber-bg);
    border-color: #ecdcb8;
}

.opd-note.amber>i {
    color: var(--amber);
}

.opd-note.amber b {
    color: var(--amber);
}

.opd-note.amber p {
    color: #7a5410;
}

/* ── phase chips ── */
.opd-phase-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: var(--s100);
    color: var(--s600);
    white-space: nowrap;
}

.opd-phase-chip i {
    font-size: .64rem;
}

.opd-phase-chip.foundation {
    background: #e6f3ea;
    color: #1d7a45;
}

.opd-phase-chip.skill {
    background: var(--g50);
    color: var(--g600);
}

.opd-phase-chip.mastery {
    background: var(--indigo-bg);
    color: var(--indigo);
}

.opd-phase-chip.neetsim {
    background: var(--amber-bg);
    color: var(--amber);
}

.opd-phase-chip.mock {
    background: #f6e7d2;
    color: #8a5610;
}

.opd-phase-chip.bonus {
    background: var(--purple-bg);
    color: var(--purple);
}

.opd-phase-chip.future {
    background: var(--s100);
    color: var(--s400);
}

/* ── JOURNEY ── */
.opd-journey {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 16px;
    padding: 12px;
}

.opd-journey-phase {
    padding: 6px 0 10px;
}

.opd-journey-phase+.opd-journey-phase {
    border-top: 1px dashed var(--s200);
    padding-top: 12px;
}

.opd-journey-phase.future {
    opacity: .58;
}

.opd-journey-phase-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.opd-journey-lock {
    font-size: .66rem;
    color: var(--s400);
}

.opd-journey-now {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g600);
    background: var(--g50);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}

.opd-journey-rule {
    flex: 1;
    height: 1px;
    background: var(--s200);
}

.opd-journey-blurb {
    font-size: .7rem;
    color: var(--s400);
    margin: 5px 0 0;
    line-height: 1.4;
}

/* R2 [2]: tiles now WRAP onto new lines. v2 forced one row per phase
   (overflow-x:auto + width:max-content), so Test 4 in Foundation sat
   off-screen to the right behind a side-scroll. */
.opd-journey-scroll {
    position: relative;
}

.opd-journey-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
    padding: 10px 0 2px;
}

.opd-tilewrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.opd-tile {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .12s, box-shadow .2s;
}

.opd-tile:active {
    transform: scale(.94);
}

.opd-tile b {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.opd-tile span {
    font-size: .58rem;
    font-weight: 600;
    opacity: .8;
    margin-top: 2px;
}

.opd-tile.good {
    background: #e6f5ec;
    border-color: #bfe6cd;
    color: var(--green-600);
}

.opd-tile.warm {
    background: var(--amber-bg);
    border-color: #ecdcb8;
    color: var(--amber);
}

.opd-tile.bad {
    background: var(--red-bg);
    border-color: #eccfcf;
    color: var(--red);
}

/* the next tile is the only thing that breathes */
.opd-tilewrap.wide .opd-tile {
    width: 76px;
    height: 76px;
    border-radius: 18px;
}

.opd-tile.next {
    background: linear-gradient(135deg, var(--g500), var(--g700));
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 6px 18px -8px rgba(31, 88, 150, .8);
    animation: opdPulse 2.6s ease-out infinite;
}

.opd-tile.next.mock {
    background: linear-gradient(135deg, var(--amber), #8a5610);
    box-shadow: 0 6px 18px -8px rgba(138, 86, 16, .8);
}

.opd-tile.lockstate {
    background: var(--s100);
    color: var(--s400);
    font-size: 1.05rem;
    border-color: var(--s200);
}

/* dashed ring — a filled dot read as "done" */
.opd-tile.placeholder {
    background: none;
    border: 2px dashed var(--s200);
    cursor: default;
}

.opd-tile.placeholder:active {
    transform: none;
}

.opd-tile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 5px;
    border-radius: 5px;
    color: #fff;
    pointer-events: none;
}

.opd-tile-badge.red {
    background: var(--red);
}

.opd-tile-badge.amber {
    background: var(--amber);
}

.opd-tile-label {
    font-size: .64rem;
    font-weight: 600;
    color: var(--s500);
    white-space: nowrap;
}

.opd-tile-label.strong {
    font-weight: 800;
    color: var(--s800);
}

.opd-tile-label.dim {
    color: var(--s300);
}

/* ── CONCEPTS ── */
.opd-focus {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--red-bg);
    border: 1px solid #eccfcf;
    border-radius: 14px;
    padding: 12px 13px;
    margin-bottom: 10px;
}

.opd-focus>i {
    color: var(--red);
    font-size: .9rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.opd-focus b {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    color: var(--red);
    margin-bottom: 2px;
}

.opd-focus p {
    font-size: .78rem;
    line-height: 1.5;
    color: #8a3232;
    margin: 0;
}

.opd-concepts {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 16px;
    overflow: hidden;
}

.opd-concept-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--s100);
}

.opd-concept-row:last-child {
    border-bottom: none;
}

.opd-concept-icon {
    font-size: .95rem;
    color: var(--s300);
    flex-shrink: 0;
}

.opd-concept-icon.good {
    color: var(--green-600);
}

.opd-concept-icon.warm {
    color: var(--amber);
}

.opd-concept-icon.bad {
    color: var(--red);
}

.opd-concept-main {
    flex: 1;
    min-width: 0;
}

/* R2 [7a]: was white-space:nowrap + ellipsis, so "Controlled oxidation of
   Alka…" lost the actual information. Two lines, then clamp. */
.opd-concept-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--s700);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    margin-bottom: 5px;
}

.opd-concept-bar {
    height: 5px;
    background: var(--s100);
    border-radius: 3px;
    overflow: hidden;
}

.opd-concept-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--s300);
    transition: width .65s cubic-bezier(.16, 1, .3, 1);
}

.opd-concept-bar i.good {
    background: var(--green-600);
}

.opd-concept-bar i.warm {
    background: var(--amber);
}

.opd-concept-bar i.bad {
    background: var(--red);
}

.opd-concept-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    min-height: 16px;
}

.opd-concept-status {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--s400);
}

.opd-concept-status.good {
    color: var(--green-600);
}

.opd-concept-status.warm {
    color: var(--amber);
}

.opd-concept-status.bad {
    color: var(--red);
}

.opd-concept-pct {
    font-size: .82rem;
    font-weight: 700;
    color: var(--s400);
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.opd-concept-pct.good {
    color: var(--green-600);
}

.opd-concept-pct.warm {
    color: var(--amber);
}

.opd-concept-pct.bad {
    color: var(--red);
}

.opd-concept-more {
    border-top: 1px solid var(--s100);
}

.opd-concept-more summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 12px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--s400);
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
}

.opd-concept-more summary::-webkit-details-marker {
    display: none;
}

.opd-concept-more summary i {
    font-size: .62rem;
    transition: transform .2s;
}

.opd-concept-more[open] summary i {
    transform: rotate(90deg);
}

.opd-concept-more[open] summary {
    border-bottom: 1px solid var(--s100);
}

/* ── sparkline (replaces the `40→55→70%` text run) ── */
.opd-spark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.opd-spark-svg {
    width: 62px;
    height: 20px;
    overflow: visible;
}

.opd-spark-line {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--s400);
}

.opd-spark-dot {
    fill: var(--s400);
}

.opd-spark.up .opd-spark-line,
.opd-spark.up .opd-spark-dot {
    stroke: var(--green-600);
    fill: var(--green-600);
}

.opd-spark.up .opd-spark-line {
    fill: none;
}

.opd-spark.down .opd-spark-line,
.opd-spark.down .opd-spark-dot {
    stroke: var(--red);
    fill: var(--red);
}

.opd-spark.down .opd-spark-line {
    fill: none;
}

.opd-spark-svg.draw .opd-spark-line {
    stroke-dasharray: 100;
    animation: opdSparkDraw .8s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-spark-svg.draw .opd-spark-dot {
    animation: opdPopIn .3s ease-out .7s both;
}

.opd-spark b {
    font-size: .64rem;
    font-weight: 800;
    color: var(--s400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.opd-spark b i {
    font-size: .56rem;
}

.opd-spark.up b {
    color: var(--green-600);
}

.opd-spark.down b {
    color: var(--red);
}

/* ── RESULTS hero + score ring ── */
.opd-res-hero {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: 20px;
    padding: 18px 16px 16px;
    margin-bottom: 14px;
    text-align: center;
}

.opd-res-hero.good {
    border-color: #c9e8d5;
}

.opd-res-hero.warm {
    border-color: #ecdcb8;
}

.opd-res-hero.bad {
    border-color: #eccfcf;
}

.opd-res-hero.archival {
    background: var(--s50);
}

.opd-res-phase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.opd-res-phase>span:last-child {
    font-size: .72rem;
    font-weight: 600;
    color: var(--s500);
}

.opd-res-ringwrap {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto;
}

.opd-ring {
    width: 128px;
    height: 128px;
    transform: rotate(-90deg);
}

.opd-ring-track {
    fill: none;
    stroke: var(--s100);
    stroke-width: 9;
}

.opd-ring-arc {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke: var(--s400);
}

.opd-ring-arc.go {
    stroke-dashoffset: var(--opd-ring-to) !important;
    transition: stroke-dashoffset 1s cubic-bezier(.16, 1, .3, 1) .1s;
}

.opd-ring.good .opd-ring-arc {
    stroke: var(--green-600);
}

.opd-ring.warm .opd-ring-arc {
    stroke: var(--amber);
}

.opd-ring.bad .opd-ring-arc {
    stroke: var(--red);
}

/* the pass-mark tick drawn on the ring */
.opd-ring-tick {
    stroke: var(--s900);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .45;
}

.opd-res-ringinner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.opd-res-ringinner b {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--s900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.opd-res-ringinner span {
    font-size: .74rem;
    font-weight: 600;
    color: var(--s400);
    margin-top: 3px;
}

.opd-res-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.opd-res-passline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--s500);
    background: var(--s100);
    border-radius: 999px;
    padding: 4px 10px;
}

.opd-res-passline i {
    font-size: .6rem;
    opacity: .7;
}

.opd-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--s100);
    color: var(--s500);
    font-variant-numeric: tabular-nums;
}

.opd-delta i {
    font-size: .6rem;
}

.opd-delta.up {
    background: #dcf3e4;
    color: var(--green-600);
}

.opd-delta.down {
    background: var(--red-bg);
    color: var(--red);
}

.opd-res-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.opd-res-meta {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.opd-res-meta>div {
    flex: 1;
    background: var(--s50);
    border-radius: 12px;
    padding: 8px 6px;
}

.opd-res-hero.archival .opd-res-meta>div {
    background: #fff;
}

.opd-res-meta b {
    display: block;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 800;
    color: var(--s900);
    font-variant-numeric: tabular-nums;
}

.opd-res-meta span {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--s400);
}

/* ── review filter strip ── */
.opd-revfilters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.opd-revfilters::-webkit-scrollbar {
    display: none;
}

/* ── review cards ── */
.opd-rev-item .res-rev-head h4 {
    font-size: .8rem;
}

/* 2-line clamp instead of a 70-char mid-word cut */
.opd-rev-snip {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--s500);
    margin: 2px 0 0;
}

.opd-ans-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

/* R2 [6]: .opd-ans is a flex container and the <img> was a flex ITEM.
   Flex items default to min-width:auto, which refuses to shrink below the
   image's intrinsic width — so max-width:100% was floored and wide figures
   blew out of the card. wrap + min-width:0 + a full-width basis for images
   fixes it at the source. */
.opd-ans {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
}

.opd-ans>* {
    min-width: 0;
}

.opd-ans .opd-opt-img {
    flex: 1 0 100%;
    margin-top: 4px;
}

.opd-ans i {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: .74rem;
}

.opd-ans.ok {
    color: var(--green-600);
}

.opd-ans.nok {
    color: var(--red);
}

.opd-ans.skip {
    color: var(--s400);
}

.opd-match-review-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--s200);
    font-size: .8rem;
    color: var(--s700);
}

.opd-match-review-row>div:last-child {
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

.opd-match-review-row .ok {
    color: var(--green-600);
}

.opd-match-review-row .nok {
    color: var(--red);
}

/* R3 [2]: List-I / List-II reference tables (review card). Match questions
   are ordinary MCQs — these are read-only reference, the answer is an option. */
.opd-match-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

.opd-match-col {
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 10px;
    padding: 8px;
    min-width: 0;
}

.opd-match-title {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s400);
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--s200);
    margin-bottom: 5px;
}

.opd-match-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 5px 4px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--s700);
    min-width: 0;
    overflow-wrap: anywhere;
}

.opd-match-key {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    background: var(--s200);
    color: var(--s600);
    font-size: .62rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.opd-match-key.alpha {
    background: var(--g100);
    color: var(--g700);
}

/* R3 [3]: the collapsed reminders under the v3 question. */
.opd-int-refs {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--s200);
}

.opd-int-refs-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s400);
    margin-bottom: 8px;
}

.opd-int-refs .opd-deeper {
    margin-top: 8px;
}

.opd-opt-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-top: 4px;
}

/* R2 [6.2]: blanket containment — any image anywhere in a review card, an
   x-box, an option row or the intervention overlay stays inside its frame. */
.opd-rev-item img,
.res-rev-body img,
.opd-x-box img,
.opd-optexpl img,
.opd-cracker img,
.opd-mnemonic img,
.opd-ncert img,
.opd-deeper img,
.opd-int-card img,
.opd-match-review-row img {
    max-width: 100% !important;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* R2 [6.4]: long unbroken strings (formulae, ids) can't push width either. */
.res-rev-body,
.opd-rev-item .res-rev-body,
.opd-optexpl,
.opd-x-box,
.opd-int-origtext,
.opd-int-qbox {
    min-width: 0;
    overflow-wrap: anywhere;
}

.opd-match-review-row>div {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── THE CRACKER — the punchline, first, and unmissable ── */
.opd-cracker {
    position: relative;
    background: linear-gradient(135deg, #fffaf0 0%, #fff 70%);
    border: 1px solid #ecdcb8;
    border-left: 4px solid var(--amber);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0;
}

.opd-cracker-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 5px;
}

.opd-cracker p {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--s900);
    margin: 0;
}

/* ── x-boxes (semantic colour, see header) ── */
.opd-x-box {
    border-radius: 10px;
    border: 1px solid var(--s200);
    border-left: 3px solid var(--s300);
    background: #fff;
    padding: 11px 12px;
    margin-top: 10px;
    font-size: .82rem;
}

.opd-x-box>b {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--s700);
    margin-bottom: 5px;
}

.opd-x-box>b i {
    font-size: .72rem;
}

.opd-x-box p {
    margin: 0;
    line-height: 1.6;
    color: var(--s600);
}

.opd-x-box p+p {
    margin-top: 6px;
}

.opd-x-box p.dim {
    color: var(--s400);
    font-size: .76rem;
}

.opd-x-box ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.opd-x-box li {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--s600);
    margin-bottom: 3px;
}

.opd-x-box.red {
    background: var(--red-bg);
    border-color: #eccfcf;
    border-left-color: var(--red);
}

.opd-x-box.red>b {
    color: var(--red);
}

.opd-x-box.green {
    background: #f4fbf6;
    border-color: #c9e8d5;
    border-left-color: var(--green-600);
}

.opd-x-box.green>b {
    color: var(--green-600);
}

.opd-x-box.amber {
    background: var(--amber-bg);
    border-color: #ecdcb8;
    border-left-color: var(--amber);
}

.opd-x-box.amber>b {
    color: var(--amber);
}

.opd-x-box.indigo {
    background: var(--indigo-bg);
    border-color: #c8dfe6;
    border-left-color: var(--indigo);
}

.opd-x-box.indigo>b {
    color: var(--indigo);
}

.opd-x-box.purple {
    background: var(--purple-bg);
    border-color: #c6e0e0;
    border-left-color: var(--purple);
}

.opd-x-box.purple>b {
    color: var(--purple);
}

.opd-x-box.plain {
    background: var(--s50);
    border-left-color: var(--s400);
}

/* key points get a checklist shape, not just a colour */
.opd-x-box.checklist ul {
    list-style: none;
    padding-left: 0;
}

.opd-x-box.checklist li {
    position: relative;
    padding-left: 20px;
}

.opd-x-box.checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: .64rem;
    color: var(--green-600);
}

/* ── traps (merged confusion_pairs + common_mistakes) ── */
.opd-confpair {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .6);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--s700);
}

.opd-confpair em {
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    color: var(--s400);
    margin: 0 4px;
    text-transform: uppercase;
}

.opd-confpair p {
    margin: 3px 0 0;
    color: var(--s500);
    font-size: .76rem;
    line-height: 1.5;
}

.opd-traplist {
    margin: 8px 0 0;
    padding-left: 18px;
}

.opd-traplist li {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--s600);
    margin-bottom: 3px;
}

/* ── mnemonic — a quoted shape ── */
.opd-mnemonic {
    background: var(--indigo-bg);
    border: 1px solid #c8dfe6;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
}

.opd-mnem-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 6px;
}

.opd-mnemonic blockquote {
    position: relative;
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--indigo);
    font-size: .88rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--s800);
}

.opd-mnemonic p {
    margin: 8px 0 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--s600);
}

/* ── NCERT — a book-page shape, and it comes LAST ── */
.opd-ncert {
    background:
        linear-gradient(90deg, #f6f2e8 0 22px, #fdfbf6 22px);
    border: 1px solid #e6ddc8;
    border-radius: 12px;
    padding: 12px 14px 10px 32px;
    margin-top: 10px;
    position: relative;
}

.opd-ncert::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #ddd0b0;
}

.opd-ncert-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a6d2f;
    margin-bottom: 5px;
}

.opd-ncert p {
    margin: 0;
    font-size: .84rem;
    line-height: 1.65;
    color: #4a3f28;
}

.opd-ncert footer {
    margin-top: 7px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a3936b;
}

/* ── the single "Go deeper" disclosure ── */
.opd-deeper {
    margin-top: 12px;
    border: 1px solid var(--s200);
    border-radius: 12px;
    background: var(--s50);
    overflow: hidden;
}

.opd-deeper summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    min-height: 44px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--s600);
}

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

.opd-deeper summary>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.opd-deeper summary>i {
    font-size: .68rem;
    color: var(--s400);
    transition: transform .22s;
}

.opd-deeper[open] summary>i {
    transform: rotate(180deg);
}

.opd-deeper[open] summary {
    border-bottom: 1px solid var(--s200);
}

.opd-deeper-body {
    padding: 4px 12px 12px;
    animation: opdRise .3s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-alloptions {
    margin-top: 10px;
}

/* ── option explanations ── */
.opd-optexpl {
    border-radius: 10px;
    border-left: 3px solid var(--s300);
    background: #fff;
    padding: 10px 12px;
    margin-top: 6px;
    font-size: .8rem;
    line-height: 1.55;
}

.opd-optexpl>b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.opd-optexpl.ok {
    background: #f4fbf6;
    border-left-color: var(--green-600);
}

.opd-optexpl.ok>b {
    color: var(--green-600);
}

.opd-optexpl.nok {
    background: #fff7f7;
    border-left-color: var(--red);
}

.opd-optexpl.nok>b {
    color: var(--red);
}

/* the student's own option — already explained above, not repeated */
.opd-optexpl.theirs {
    border-left-style: dashed;
}

.opd-optexpl p {
    margin: 4px 0 0;
    color: var(--s600);
}

.opd-optexpl p.dim {
    color: var(--s400);
    font-size: .74rem;
    font-style: italic;
}

/* ══ INTERVENTION OVERLAY ══ */
.opd-int-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .55);
    display: none;
    align-items: flex-end;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.opd-int-overlay.open {
    display: flex;
    animation: opdRise .22s ease-out;
}

.opd-int-card {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 0 16px 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
}

/* one progress indicator — v1 printed "Review 1 of 3" AND "1/3"
   side by side in the same header row */
.opd-int-rail {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 14px 0 10px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid var(--s100);
}

.opd-int-segs {
    display: flex;
    gap: 4px;
}

.opd-int-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--s200);
    transition: background .3s;
}

.opd-int-seg.done {
    background: var(--green-600);
}

.opd-int-seg.now {
    background: var(--g500);
}

.opd-int-railtext {
    display: block;
    margin-top: 7px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s400);
}

/* cross-fade between steps (v1 had six hard innerHTML cuts) */
#opd-int-content {
    padding-top: 14px;
}

#opd-int-content.leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease-in, transform .15s ease-in;
}

#opd-int-content.entering {
    animation: opdIntIn .26s cubic-bezier(.16, 1, .3, 1);
}

.opd-int-head {
    margin-bottom: 12px;
}

.opd-int-headtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.opd-int-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--g600);
    background: var(--g50);
    border-radius: 999px;
    padding: 5px 11px;
}

.opd-int-kicker.verify {
    color: var(--indigo);
    background: var(--indigo-bg);
}

.opd-int-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    color: var(--s500);
    cursor: pointer;
    min-height: 36px;
    padding: 4px 6px;
}

.opd-int-back i {
    font-size: .66rem;
}

.opd-int-concept {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--s900);
    line-height: 1.3;
    margin: 0;
}

/* real facts from the payload — replaces the static filler line */
.opd-int-facts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.opd-int-facts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .66rem;
    font-weight: 700;
    color: var(--s500);
    background: var(--s100);
    border-radius: 6px;
    padding: 3px 7px;
}

.opd-int-facts i {
    font-size: .6rem;
    opacity: .7;
}

/* says WHY the gate is mandatory instead of just trapping them */
.opd-int-why {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 9px 0 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--s400);
}

.opd-int-why i {
    font-size: .64rem;
}

.opd-int-orig {
    background: var(--red-bg);
    border: 1px solid #eccfcf;
    border-left: 3px solid var(--red);
    border-radius: 12px;
    padding: 13px 14px;
    margin-top: 10px;
}

.opd-int-origtag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 7px;
}

.opd-int-origtext {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--s800);
}

.opd-int-origans {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.opd-int-origans span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 7px;
    padding: 5px 9px;
    background: #fff;
}

.opd-int-origans .nok {
    color: var(--red);
}

.opd-int-origans .ok {
    color: var(--green-600);
}

.opd-int-histwrap {
    margin-top: 12px;
    background: var(--s50);
    border: 1px solid var(--s200);
    border-radius: 12px;
    padding: 11px 12px;
}

.opd-int-histtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s500);
    margin-bottom: 7px;
}

.opd-int-histrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: .76rem;
}

.opd-int-histrow i {
    color: var(--red);
    font-size: .68rem;
}

.opd-int-histrow b {
    color: var(--s700);
    font-weight: 800;
    min-width: 22px;
}

.opd-int-histrow span {
    color: var(--s500);
}

.opd-int-secttitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 800;
    color: var(--s600);
    margin: 12px 0 6px;
}

.opd-int-qbox {
    background: var(--indigo-bg);
    border: 1px solid #c8dfe6;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 4px;
}

.opd-int-qbox.purple {
    background: var(--purple-bg);
    border-color: #c6e0e0;
}

.opd-int-qbox p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--s900);
}

.opd-int-qhead {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 9px;
}

.opd-int-qhead p {
    margin: 0;
    font-size: .72rem;
    color: var(--s400);
    font-weight: 600;
}

.opd-int-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--s200);
    border-radius: 12px;
    margin-top: 8px;
    background: #fff;
    font-size: .84rem;
    line-height: 1.5;
    cursor: pointer;
    min-height: 50px;
    transition: border-color .14s, background .14s, transform .1s;
}

.opd-int-opt:active {
    transform: scale(.99);
}

.opd-int-opt.selected {
    border-color: var(--indigo);
    background: var(--indigo-bg);
}

.opd-int-opt.purple.selected {
    border-color: var(--purple);
    background: var(--purple-bg);
}

.opd-int-optletter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--s100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    flex-shrink: 0;
    transition: background .14s;
}

.opd-int-opt.selected .opd-int-optletter {
    background: #fff;
}

.opd-int-cta {
    margin-top: 16px;
}

.opd-int-cta .ph-start-btn {
    width: 100%;
}

/* the caption that used to be a whole box above the button */
.opd-int-ctanote {
    margin: 8px 2px 0;
    font-size: .72rem;
    line-height: 1.55;
    color: var(--s400);
    text-align: center;
}

.opd-int-ctanote em {
    font-style: italic;
    color: var(--s500);
}

.opd-int-resulthead {
    text-align: center;
    margin-bottom: 16px;
}

.opd-int-resulthead i {
    font-size: 2.6rem;
    margin-bottom: 8px;
    animation: opdPopIn .42s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-int-resulthead.ok i,
.opd-int-resulthead.ok h2 {
    color: var(--green-600);
}

.opd-int-resulthead.nok i,
.opd-int-resulthead.nok h2 {
    color: var(--red);
}

.opd-int-resulthead h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
}

.opd-int-resulthead p {
    font-size: .8rem;
    color: var(--s500);
    margin: 5px 0 0;
}

.opd-int-success {
    text-align: center;
    padding: 40px 10px 20px;
}

.opd-int-success i {
    font-size: 3.2rem;
    color: var(--green-600);
    animation: opdPopIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

.opd-int-success h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--s900);
    margin: 14px 0 0;
}

.opd-int-success p {
    font-size: .84rem;
    color: var(--s500);
    margin: 6px 0 0;
}

.opd-int-success .ph-start-btn {
    margin-top: 20px;
    width: 100%;
}

/* ── AI tutor ── */
.opd-int-aitag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* purple = genuinely AI-generated */
.opd-int-aitag.ai {
    background: var(--purple-bg);
    color: var(--purple);
}

/* blue = computed from the student's real attempt history */
.opd-int-aitag.derived {
    background: var(--g50);
    color: var(--g600);
}

/* grey = boilerplate, and it says so — never dressed as AI */
.opd-int-aitag.generic {
    background: var(--s100);
    color: var(--s500);
}

/* R2 [1.3]: verdict chip — "one specific mix-up" vs "not landed yet" must
   not read identically. */
.opd-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.opd-verdict i {
    font-size: .6rem;
}

.opd-verdict.partial {
    background: var(--amber-bg);
    color: var(--amber);
}

.opd-verdict.total {
    background: var(--red-bg);
    color: var(--red);
}

/* R2 [5.1]: the "N other concepts weren't covered by this test" line. */
.opd-subnote {
    margin: 8px 2px 0;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--s400);
}

.opd-int-analyse {
    text-align: center;
    padding: 56px 16px;
}

.opd-int-analyse-orb {
    position: relative;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--indigo));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    animation: opdOrbFloat 2.4s ease-in-out infinite;
}

.opd-int-analyse-orb::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: var(--purple-bg);
    z-index: -1;
    animation: opdOrbHalo 2.4s ease-in-out infinite;
}

.opd-int-analyse h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--s800);
    margin: 0;
}

.opd-int-analyse p {
    font-size: .8rem;
    color: var(--s400);
    margin: 6px 0 0;
}

.opd-int-qloading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 0;
    font-size: .78rem;
    color: var(--s400);
    font-weight: 600;
}

/* ── reduced motion: everything above degrades to static ── */
@media (prefers-reduced-motion: reduce) {

    .opd-reveal>*,
    .opd-deeper-body,
    .opd-int-resulthead i,
    .opd-int-success i,
    .opd-hero.unlock .opd-hero-tag,
    #opd-int-content.entering,
    .opd-int-overlay.open,
    .opd-spark-svg.draw .opd-spark-line,
    .opd-spark-svg.draw .opd-spark-dot {
        animation: none !important;
    }

    .opd-tile.next,
    .opd-int-analyse-orb,
    .opd-int-analyse-orb::after,
    .opd-sk {
        animation: none !important;
    }

    .opd-subject-body,
    .opd-subject-bar>div,
    .opd-case-bar i,
    .opd-concept-bar i,
    .opd-ring-arc.go,
    .opd-classseg-ind,
    #opd-int-content.leaving {
        transition: none !important;
    }

    .opd-spark-svg.draw .opd-spark-line {
        stroke-dasharray: none;
    }
}

/* ── MATCH-THE-FOLLOWING (test engine, OPD questions) ──
   R3: read-only reference tables. The click-to-match UI is gone: it printed
   "[object Object]" (list entries are {id,text} objects) and built its mapping
   from POSITION ({"1":"A"...}) while correct_mapping is keyed by list ID
   ({"A":"ii"...}), so backend.py:2575 graded every match question wrong no
   matter what the student did. They are ordinary MCQs now. */
.te-match-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 4px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--s700);
    min-width: 0;
    overflow-wrap: anywhere;
}

.te-match-row .te-match-key {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--s200);
    color: var(--s600);
    font-size: .66rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.te-match-row .te-match-key.alpha {
    background: var(--g100);
    color: var(--g700);
}

.te-opd-chips {
    display: flex;
    gap: 6px;
    padding: 0 12px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.te-opd-chips .ph-chip {
    flex-shrink: 0;
}

.te-match-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.te-match-col-title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s400);
    margin-bottom: 6px;
}

.te-match-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1.5px solid var(--s200);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 6px;
    font-size: .84rem;
    cursor: pointer;
    min-height: 48px;
}

.te-match-item.locked {
    cursor: default;
}

.te-match-item.selected {
    border-color: var(--indigo);
    background: var(--indigo-bg);
}

.te-match-item.matched {
    border-color: #bfe6cd;
    background: #f4fbf6;
}

.te-match-item.right.used {
    opacity: .5;
}

.te-match-key {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--s100);
    color: var(--s600);
    font-weight: 700;
    font-size: .76rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.te-match-key.alpha {
    border-radius: 50%;
}

.te-match-text {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.te-match-arrow {
    font-weight: 800;
    color: var(--green-600);
    font-size: .82rem;
    flex-shrink: 0;
}

.te-match-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--indigo-bg);
    color: var(--indigo);
    font-size: .78rem;
    line-height: 1.5;
}

/* ── OMR drawer: match rows + locked-mapping mini text ── */
.omr-m-mapping {
    font-size: .72rem;
    font-weight: 700;
    color: var(--s600);
    letter-spacing: .03em;
}

.omr-m-matchgrid {
    margin: 10px 0 4px;
}

.omr-m-matchrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px dashed #e7bebe;
}

.omr-m-matchrow:last-child {
    border-bottom: none;
}

.omr-m-matchrow .omr-m-qnum {
    flex: 0 0 auto;
}

.omr-m-matchval {
    flex: 1;
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    color: var(--s300);
    letter-spacing: .1em;
}

.omr-m-matchrow.set .omr-m-matchval {
    color: var(--s800);
}

/* ════════════════════════════════════════════════════════════════
   9. HOME (home.js) + LIBRARY switcher
   The old .mdash-* tile grid is retired (rules kept above, unused).
   ════════════════════════════════════════════════════════════════ */

/* ── Library: the segmented switcher holder sits above each pane and
      reuses .ph-switch / .ph-switch-pill from practice-v2.css ── */
.lib-switch-holder:empty {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════
   HOME v2 (.hm-*)
   ─────────────────────────────────────────────────────────────────
   One dark HERO BAND (greeting + chips + Progress to Doctor) fused to
   the navy .m-topbar, then light content. The band reuses login.html's
   exact hero grammar — ink #0B1220, 28px drift grid, ECG trace, scrim,
   masked doctor photo — so Home and Login read as one product.

   Local system (nothing here invents a token; all colour comes from
   the :root scale at the top of this file):
     ink      #0B1220 ...... the ONE dark. Same as login, same as the
                             topbar in body.home-mode. No second black.
     radii    22 / 16 / 12 / 999
     spacing  4pt scale only (4 8 12 16 20 24 32)
     type     floor .72rem, five sizes
     motion   press .12s · entry stagger 55ms · all reduced-motion safe
   ══════════════════════════════════════════════════════════════════ */

/* Home fuses its hero into the top bar: the bar becomes the same ink,
   so the band reads as one surface that the page scrolls under. */
body.home-mode .m-topbar {
    background: var(--hm-ink, #0B1220);
}

/* ── Shared primitives ───────────────────────────────────────────── */

/* Reset first: every tappable on Home is a real <button>, so it is
   keyboard reachable. .hm-card below re-adds the border it needs. */
.hm-btn {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.hm-press {
    transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
}

.hm-press:active {
    transform: scale(.985);
}

.hm-press:focus-visible {
    outline: 2px solid var(--g400);
    outline-offset: 2px;
}

.hm-press.on-dark:focus-visible {
    outline-color: #7db3ec;
}

/* Entry stagger — set --i on each block in paint order. */
@keyframes hmIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.hm-in {
    animation: hmIn .4s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

/* Skeletons — geometry matches the real thing, so nothing jumps. */
@keyframes hmSk {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.hm-sk {
    border-radius: 8px;
    background-image: linear-gradient(90deg, var(--s100) 20%, var(--s200) 40%, var(--s100) 60%);
    background-size: 300% 100%;
    animation: hmSk 1.5s ease infinite;
}

.hm-sk.on-dark {
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, .05) 20%,
            rgba(255, 255, 255, .13) 40%,
            rgba(255, 255, 255, .05) 60%);
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.hm-wrap {
    --hm-ink: #0B1220;
    --hm-r-lg: 22px;
    --hm-r-md: 16px;
    --hm-r-sm: 12px;
    --hm-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px -8px rgba(15, 23, 42, .14);
    --hm-sh-2: 0 2px 6px rgba(15, 23, 42, .06), 0 16px 34px -14px rgba(15, 39, 71, .3);
    /* .m-main already reserves the tab bar + safe area. Reserving it
       twice left 110px of dead air under the quote. */
    padding-bottom: 8px;
}

.hm-body {
    padding: 0 16px;
}

.hm-card {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: var(--hm-r-md);
    box-shadow: var(--hm-sh-1);
}

.hm-section-label {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--s500);
    margin: 24px 4px 12px;
}

/* ══ 1. HERO BAND — greeting + chips + Progress to Doctor ══════════ */
.hm-hero {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 20px;
    border-radius: 0 0 var(--hm-r-lg) var(--hm-r-lg);
    background: radial-gradient(120% 90% at 78% 0%, #1b3a63 0%, #0f2547 42%, #0B1220 80%);
    box-shadow: 0 18px 38px -20px rgba(11, 18, 32, .7);
}

.hm-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: hm-drift 26s linear infinite;
}

@keyframes hm-drift {
    to {
        transform: translate(28px, 28px);
    }
}

.hm-hero-pulse {
    position: absolute;
    top: 30%;
    left: -5%;
    width: 110%;
    height: 78px;
    z-index: 0;
    opacity: .16;
    pointer-events: none;
}

.hm-hero-pulse path {
    fill: none;
    stroke: #7db3ec;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 260 1400;
    animation: hm-trace 6.5s linear infinite;
}

@keyframes hm-trace {
    from {
        stroke-dashoffset: 1660;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Doctor photo, right third, masked to nothing before it reaches the
   copy. Missing file → onerror hides it and the gradient carries. */
.hm-hero-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 64%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    z-index: 0;
    opacity: .38;
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .45) 46%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .45) 46%, #000 100%);
}

.hm-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(110% 80% at 0% 0%, rgba(11, 18, 32, .82) 0%, rgba(11, 18, 32, 0) 58%),
        linear-gradient(180deg, rgba(11, 18, 32, .28) 0%, rgba(11, 18, 32, 0) 34%, rgba(11, 18, 32, .62) 100%);
}

.hm-hero-inner {
    position: relative;
    z-index: 2;
}

/* ── Greeting row ── */
.hm-greet {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hm-greet-text {
    flex: 1;
    min-width: 0;
}

.hm-greet .kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7db3ec;
    margin-bottom: 4px;
}

.hm-greet h2 {
    font-family: var(--font-display);
    /* Fluid, and it wraps to a second line rather than truncating: real
       students are called Aarthi Raghavan, not Bob. */
    font-size: clamp(1.2rem, 5.4vw, 1.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-chips {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.hm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hm-chip b {
    font-family: var(--font-display);
    color: #fff;
}

.hm-chip.exam span {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.hm-chip.streak.live {
    background: rgba(196, 61, 61, .2);
    border-color: rgba(244, 163, 163, .32);
    color: #f4a3a3;
}

.hm-chip.streak.live b {
    color: #ffd9d9;
}

.hm-chip.streak.live i {
    animation: hm-pulse 1.7s ease-in-out infinite;
}

@keyframes hm-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    45% {
        transform: scale(1.22);
        opacity: .8;
    }
}

/* Inside a <button> every child is a <span>, so the ones that used to be
   <div>s need their box back. */
.hm-scale-head,
.hm-scale-track,
.hm-scale-foot,
.hm-scale-badge,
.hm-scale-head-info,
.hm-scale-label,
.hm-scale-rank,
.hm-scale-pct,
.hm-scale-fill,
.hm-rc-body,
.hm-rc-kicker,
.hm-rc-title,
.hm-rc-sub,
.hm-rc-chips,
.hm-focus-info,
.hm-focus-name,
.hm-focus-meta,
.hm-quote-text {
    display: block;
}

.hm-scale-pct em {
    font-style: normal;
}

/* ── Progress to Doctor (inside the band — no second dark card) ── */
.hm-scale {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--hm-r-sm);
}

.hm-scale-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hm-scale-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--hm-r-sm);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--g500), var(--g400));
    box-shadow: 0 8px 22px -6px rgba(47, 108, 179, .8);
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-scale-head-info {
    flex: 1;
    min-width: 0;
}

.hm-scale-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

.hm-scale-rank {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-scale-pct {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 16px rgba(93, 146, 207, .5);
}

.hm-scale-pct span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .4);
}

.hm-scale-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    margin: 0 9px 16px;
}

.hm-scale-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--g500), #7db3ec);
    box-shadow: 0 0 14px rgba(125, 179, 236, .55);
    width: 0;
    transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

/* Ticks carry no title= — a hover tooltip is invisible on a phone.
   The ladder they mark is spelled out in the breakdown sheet. */
.hm-scale-tick {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%);
}

.hm-scale-tick.reached {
    background: #fff;
    box-shadow: 0 0 0 1.5px rgba(125, 179, 236, .5);
}

.hm-scale-marker {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--g400);
    /* left is calc(9px + (100% - 18px) * pct/100) — inset by its own
       radius, so the dot can never clip at 0% or 100%. */
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(93, 146, 207, .22), 0 2px 8px rgba(0, 0, 0, .4);
    left: 9px;
    transition: left 1s cubic-bezier(.22, 1, .36, 1);
}

.hm-scale-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}

.hm-scale-foot b {
    color: #fff;
    font-weight: 700;
}

.hm-scale-more {
    color: #7db3ec;
    font-weight: 700;
    flex-shrink: 0;
}

.hm-scale-more i {
    font-size: .6rem;
    margin-left: 2px;
}

/* Network failure takes the scale's slot — the student was already
   looking there — and stays inside the band's ink. */
.hm-scale-error {
    text-align: center;
    padding-bottom: 4px;
}

.hm-scale-error>i {
    font-size: 1.4rem;
    color: #f4a3a3;
}

.hm-scale-error-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .92rem;
    color: #fff;
    margin-top: 10px;
}

.hm-scale-error-sub {
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
    margin-top: 6px;
    line-height: 1.5;
}

.hm-scale-retry {
    margin-top: 16px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--hm-r-sm);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: var(--font-body);
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.hm-scale-retry:focus-visible {
    outline: 2px solid #7db3ec;
    outline-offset: 2px;
}

/* ── Breakdown sheet ── */
.hm-sheet {
    padding-bottom: 4px;
}

.hm-sheet h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--s900);
}

.hm-sheet-sub {
    font-size: .8rem;
    color: var(--s500);
    line-height: 1.6;
    margin: 6px 0 16px;
}

.hm-comp {
    margin-bottom: 16px;
}

.hm-comp.muted {
    opacity: .55;
}

.hm-comp-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--s700);
    margin-bottom: 8px;
}

.hm-comp-top i {
    width: 16px;
    margin-right: 6px;
    color: var(--g500);
}

.hm-comp-top b {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--s900);
}

.hm-comp-track {
    height: 8px;
    border-radius: 999px;
    background: var(--s200);
    overflow: hidden;
}

.hm-comp-track>i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--g500), var(--g400));
}

.hm-comp-note {
    font-size: .72rem;
    color: var(--s500);
    margin-top: 6px;
    line-height: 1.5;
}

/* Rank ladder — the labels the ticks used to hide in a title= */
.hm-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 16px;
}

.hm-ladder-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--s100);
    border: 1px solid var(--s200);
    color: var(--s500);
}

.hm-ladder-item.reached {
    background: var(--g50);
    border-color: var(--g200);
    color: var(--g700);
    font-weight: 700;
}

.hm-ladder-item i {
    font-size: .62rem;
}

/* ══ 2. CONTINUE — resume cards ═══════════════════════════════════ */
.hm-resume {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-resume-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.hm-resume-card:active {
    border-color: var(--g400);
}

/* Empty state: solid and tinted. Never dashed — a dashed border is a
   wireframe cue, and this is the first thing a new student ever sees. */
.hm-resume-card.empty {
    background: linear-gradient(180deg, #fff 0%, var(--g50) 100%);
    border-color: var(--g100);
}

.hm-rc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--hm-r-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--g50);
    color: var(--g600);
    border: 1px solid var(--g100);
}

.hm-rc-icon.opd {
    background: var(--indigo-bg);
    color: var(--indigo);
    border-color: transparent;
}

.hm-rc-icon.arena {
    background: var(--amber-bg);
    color: var(--amber);
    border-color: transparent;
}

/* conic-gradient progress ring, driven by --p (0-100) */
.hm-rc-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--g600) calc(var(--p) * 1%), var(--s200) 0);
}

.hm-rc-ring span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    color: var(--g700);
}

.hm-rc-ring span i {
    font-size: .62rem;
    font-style: normal;
    color: var(--s400);
}

.hm-rc-body {
    flex: 1;
    min-width: 0;
}

/* The ward name only. The icon already sits in the squircle to the
   left — printing it twice in one card was noise. */
.hm-rc-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s500);
    margin-bottom: 3px;
}

.hm-rc-title {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--s900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-rc-sub {
    font-size: .78rem;
    color: var(--s500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-rc-chips {
    margin-top: 8px;
}

/* One accent for every "next action" chip, whatever the ward. The ward
   colour lives in the squircle; repeating it here made three brands. */
.hm-rc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
}

.hm-rc-chip.open {
    background: var(--g50);
    color: var(--g600);
    border: 1px solid var(--g100);
}

.hm-rc-chip.locked {
    background: var(--s100);
    color: var(--s500);
    border: 1px solid var(--s200);
}

.hm-rc-go {
    color: var(--s400);
    font-size: .8rem;
    flex-shrink: 0;
}

.hm-rc-cta {
    font-size: .78rem;
    font-weight: 700;
    color: var(--g600);
    flex-shrink: 0;
}

.hm-rc-cta i {
    font-size: .65rem;
    margin-left: 4px;
}

/* ══ 3. FOCUS AREAS ═══════════════════════════════════════════════ */
.hm-focus {
    padding: 4px 0;
    overflow: hidden;
}

.hm-focus-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 0;
}

/* Dividers go BETWEEN rows, never after the last one. (:last-of-type
   would match the toggle — it is a <button> too — and leave row 3's
   border stacked on the toggle's, drawing a 2px line.) */
.hm-focus-row+.hm-focus-row {
    border-top: 1px solid var(--s100);
}

.hm-focus-row:active {
    background: var(--s50);
    transform: none;
}

.hm-focus-row.hidden {
    display: none;
}

/* --m is the mastery score and it is now REAL: the dot ramps
   red → amber → green with it. 15% and 68% no longer look identical. */
.hm-focus-dot {
    --hue: calc(min(var(--m, 0), 78) * 1.15);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: hsl(var(--hue) 62% 46%);
    box-shadow: 0 0 0 3px hsl(var(--hue) 62% 46% / .16);
}

.hm-focus-info {
    flex: 1;
    min-width: 0;
}

.hm-focus-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--s800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-focus-meta {
    font-size: .72rem;
    color: var(--s500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-focus-pct {
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 800;
    color: var(--s700);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.hm-focus-go {
    color: var(--s400);
    font-size: .7rem;
}

.hm-focus-toggle {
    border-top: 1px solid var(--s100);
    min-height: 44px;
    padding: 12px;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--g600);
}

.hm-focus-toggle i {
    font-size: .6rem;
    margin-left: 4px;
}

.hm-focus-empty {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #fff 0%, var(--s50) 100%);
}

.hm-focus-empty>i {
    color: var(--green-600);
    font-size: 1.2rem;
    margin-top: 2px;
}

.hm-focus-empty b {
    font-family: var(--font-display);
    font-size: .95rem;
    color: var(--s900);
}

.hm-focus-empty p {
    font-size: .78rem;
    color: var(--s500);
    margin-top: 4px;
    line-height: 1.5;
}

/* ══ 4. STATS STRIP ═══════════════════════════════════════════════ */
.hm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 24px;
}

.hm-stat {
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: var(--hm-r-sm);
    padding: 12px 4px;
    text-align: center;
    box-shadow: var(--hm-sh-1);
}

.hm-stat i {
    font-size: .8rem;
    color: var(--g400);
    margin-bottom: 6px;
    display: block;
}

.hm-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--s900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hm-stat span {
    display: block;
    font-size: .72rem;
    color: var(--s500);
    margin-top: 5px;
    font-weight: 600;
}

/* Freshness + manual refresh — the data is live, so say when. */
.hm-updated {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 44px;
    margin: 12px auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--s500);
}

.hm-updated i {
    font-size: .68rem;
}

.hm-updated b {
    color: var(--g600);
    font-weight: 700;
}

.hm-updated.spinning i {
    animation: hm-spin .8s linear infinite;
}

@keyframes hm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ══ 5. QUOTE — last, not wedged between the live modules ═════════ */
.hm-quote {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 18px 18px 20px;
    background: #fff;
    border: 1px solid var(--s200);
    border-radius: var(--hm-r-md);
    box-shadow: var(--hm-sh-1);
}

.hm-quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--g400), var(--g600));
}

.hm-quote-mark {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 2.1rem;
    color: var(--s100);
}

.hm-quote-text,
.hm-quote-author {
    position: relative;
    z-index: 1;
    transition: opacity .22s ease, transform .22s ease;
}

.hm-quote.fading .hm-quote-text,
.hm-quote.fading .hm-quote-author {
    opacity: 0;
    transform: translateY(4px);
}

.hm-quote-text {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--s800);
}

.hm-quote-author {
    display: block;
    margin-top: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--g600);
}

.hm-quote-next {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--s500);
}

/* ── Reduced motion: every animation and transition on Home ── */
@media (prefers-reduced-motion: reduce) {

    .hm-hero-grid,
    .hm-hero-pulse path,
    .hm-chip.streak.live i,
    .hm-updated.spinning i,
    .hm-sk {
        animation: none;
    }

    .hm-in {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hm-sk {
        background: var(--s100);
    }

    .hm-sk.on-dark {
        background: rgba(255, 255, 255, .08);
    }

    .hm-scale-fill,
    .hm-scale-marker,
    .hm-press,
    .hm-quote-text,
    .hm-quote-author {
        transition: none;
    }

    .hm-press:active {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   CLAIM PAGE (parent password setup) — matches the auth pages
   Paste this at the END of styles-mobile.css
   ══════════════════════════════════════════════════════════════════ */

/* Loading / error / success message blocks */
.claim-state {
    text-align: center;
    padding: 24px 8px;
}

.claim-state i {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.claim-state.err i {
    color: #ef6b6b;
}

.claim-state.ok i {
    color: #34d399;
}

.claim-state h2 {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.claim-state p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

/* "You'll be tracking [child]" card */
.claim-child {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
    margin: 4px 0 22px;
}

.claim-child .ini {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--g500, #2f6cb3), var(--g600, #1f5896));
    color: #fff;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-weight: 700;
    font-size: 1rem;
}

.claim-child .who {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    margin-bottom: 2px;
}

.claim-child .nm {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

/* Password hint under the field */
.pw-req {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    padding-left: 2px;
}

/* Utility used by the page's show/hide logic */
.hidden {
    display: none !important;
}

/* Error text must stay legible on the dark card */
.claim-state.err h2,
.claim-state.err #error-title {
    color: #fff;
}

.claim-state.err p,
.claim-state.err #error-body {
    color: rgba(255, 255, 255, 0.85);
}

/* ══════════════════════════════════════════════════════════════════
   STUDY MATERIAL — REDESIGN  (sm-* namespace, additive only)
   Landing = subject colour identity; chapter list = standard app
   template (blue/indigo). No existing .revise-* rules are modified,
   so Quick Revise & Concept Studio are unaffected.
   ══════════════════════════════════════════════════════════════════ */

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

/* ── hero ── */
.sm-hero {
    margin-bottom: 4px;
}

.sm-hero h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--s900);
    letter-spacing: -.02em;
}

.sm-hero p {
    color: var(--s500);
    font-size: .84rem;
    line-height: 1.5;
    margin-top: 4px;
}

/* ── animated Class 11 / 12 toggle ── */
.sm-cls-toggle {
    position: relative;
    display: flex;
    background: var(--s100);
    border-radius: 14px;
    padding: 4px;
    margin: 18px 0 20px;
}

.sm-cls-toggle button {
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    padding: 11px;
    color: var(--s500);
    cursor: pointer;
    transition: color .22s;
}

.sm-cls-toggle button.on {
    color: var(--s900);
}

.sm-cls-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
    transition: transform .28s cubic-bezier(.3, 1.2, .5, 1);
}

.sm-cls-toggle.two .sm-cls-pill {
    transform: translateX(100%);
}

/* ── section label ── */
.sm-sec-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s400);
    margin: 0 0 11px 2px;
}

/* ── "Continue reading" strip (brand blue, both screens) ── */
.sm-continue {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--g600);
    border-radius: 16px;
    padding: 15px;
    color: #fff;
    overflow: hidden;
    margin-bottom: 18px;
    cursor: pointer;
    transition: transform .12s;
}

.sm-continue:active {
    transform: scale(.98);
}

.sm-continue::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 130px;
    height: 130px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
}

.sm-continue-ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.sm-continue-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.sm-continue-k {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .82;
}

.sm-continue-t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    margin: 2px 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-continue-bar {
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.sm-continue-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: #fff;
}

.sm-continue-pg {
    font-size: .62rem;
    opacity: .86;
    margin-top: 5px;
}

.sm-continue-go {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ── subject cards (colour identity) ── */
.sm-subj-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sm-subj-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    animation: smRise .5s forwards;
    transition: transform .12s;
}

.sm-subj-card:active {
    transform: scale(.98);
}

.sm-subj-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--sm-c);
}

.sm-subj-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--sm-c-bg);
    color: var(--sm-c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.sm-subj-info {
    flex: 1;
    min-width: 0;
}

.sm-subj-info h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--s900);
}

.sm-subj-info p {
    font-size: .74rem;
    color: var(--s500);
    margin-top: 2px;
}

.sm-subj-prog {
    margin-top: 9px;
    height: 5px;
    border-radius: 99px;
    background: var(--s100);
    overflow: hidden;
}

.sm-subj-prog i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--sm-c);
}

.sm-subj-chev {
    color: var(--s300);
    font-size: .9rem;
    flex-shrink: 0;
}

/* subject colour tokens (green has no app token → literal hex) */
.sm-subj-card.sm-bio {
    --sm-c: #16a34a;
    --sm-c-bg: #e8f6ee;
}

.sm-subj-card.sm-phy {
    --sm-c: var(--g600);
    --sm-c-bg: var(--g50);
}

.sm-subj-card.sm-chem {
    --sm-c: var(--amber);
    --sm-c-bg: var(--amber-bg);
}

/* locked (coming-soon) */
.sm-subj-card.locked {
    background: var(--s50);
    border-style: dashed;
    cursor: default;
}

.sm-subj-card.locked::before {
    opacity: .4;
}

.sm-subj-card.locked .sm-subj-ico {
    background: var(--s100);
    color: var(--s400);
}

.sm-subj-card.locked .sm-subj-info h3 {
    color: var(--s500);
}

.sm-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--s100);
    color: var(--s500);
    font-weight: 700;
    font-size: .6rem;
    padding: 4px 9px;
    border-radius: 99px;
    margin-top: 7px;
}

/* ── chapter list (standard blue/indigo template) ── */
.sm-ch-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.sm-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--s200);
    background: #fff;
    color: var(--s600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s;
}

.sm-back-btn:active {
    transform: scale(.94);
}

.sm-ch-head-t h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.12rem;
    color: var(--s900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sm-ch-head-t p {
    font-size: .76rem;
    color: var(--s500);
    margin-top: 2px;
}

.sm-ch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sm-ch-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1.5px solid var(--s200);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    animation: smRise .45s forwards;
    transition: transform .12s;
}

.sm-ch-row:active {
    transform: scale(.99);
}

.sm-ch-num {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--indigo-bg);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sm-ch-row.done .sm-ch-num {
    background: var(--g600);
    color: #fff;
}

/* Locked revision sheet — listed, not hidden, and still tappable so it
   opens the paywall. Mirrors .cs2-chapter-row.locked in Concept Studio. */
.sm-ch-row.locked {
    background: var(--s50);
    border-color: var(--s200);
}

.sm-ch-row.locked .sm-ch-info h4 {
    color: var(--s600);
}

.sm-ch-num.sm-ch-lock {
    background: var(--s200);
    color: var(--s500);
    font-size: .95rem;
}

.sm-ch-unlock {
    flex-shrink: 0;
    align-self: center;
    background: var(--g600);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.sm-ch-info {
    flex: 1;
    min-width: 0;
}

.sm-ch-info h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem;
    color: var(--s800);
    line-height: 1.3;
}

.sm-ch-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.sm-ch-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    color: var(--s500);
    font-weight: 600;
}

.sm-ch-chip.done {
    color: var(--g600);
}

.sm-ch-chip.live {
    color: var(--indigo);
}

.sm-ch-prog {
    margin-top: 8px;
    height: 4px;
    border-radius: 99px;
    background: var(--s100);
    overflow: hidden;
}

.sm-ch-prog i {
    display: block;
    height: 100%;
    background: var(--g500);
    border-radius: 99px;
}

.sm-ch-chev {
    color: var(--s300);
    font-size: .85rem;
    flex-shrink: 0;
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .sm-subj-card,
    .sm-ch-row {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .sm-cls-pill {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   REVISION NOTES + READER — batch additions (additive only)
   ══════════════════════════════════════════════════════════════════ */

/* Selection action bar: Note + Copy alongside highlight colours */
.pdfm-hl-bar-div {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .16);
    flex-shrink: 0;
}

.pdfm-hl-act {
    min-height: 32px;
    padding: 0 11px;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.pdfm-hl-act.icon {
    padding: 0;
    width: 32px;
    justify-content: center;
}

.pdfm-hl-act:active {
    transform: scale(.94);
    transition: transform .08s;
}

/* Download notebook — primary button */
.nb-download-btn {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: var(--g600);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.nb-download-btn:active {
    transform: scale(.97);
    transition: transform .08s;
}

/* Library switcher — notebook count badge on the Revision Notes pill */
.lib-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
    font-size: .64rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {

    .nb-card,
    .nb-note-entry {
        animation: none;
    }

    .nb-note-entry.nb-note-removing {
        animation: none;
        opacity: 0;
    }
}

/* PDF reader — directional page-turn transition */
@keyframes pgInFwd {
    from {
        opacity: .35;
        transform: translateX(16px);
    }

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

@keyframes pgInBack {
    from {
        opacity: .35;
        transform: translateX(-16px);
    }

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

.pdfm-page-wrap.pg-in-fwd {
    animation: pgInFwd .24s ease;
}

.pdfm-page-wrap.pg-in-back {
    animation: pgInBack .24s ease;
}

@media (prefers-reduced-motion: reduce) {

    .pdfm-page-wrap.pg-in-fwd,
    .pdfm-page-wrap.pg-in-back {
        animation: none;
    }
}

/* ── Desktop-only element guard ──────────────────────────────────
   Elements marked .dsk-only exist in app.html purely for the ≥1024px
   layout (the sidebar brand). styles-desktop.css reveals them inside
   its own media query; on phones they must never render. */
.dsk-only {
    display: none;
}