/* ============================================================
   SQE1 Lex Prep — Component Styles
   Cards, badges, quiz, flashcards, slides
   ============================================================ */

/* ── Cards ────────────────────────────────────────────────── */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    transition: border-color 0.2s var(--ease-out),
                box-shadow 0.25s var(--ease-out),
                transform 0.2s var(--ease-out),
                background 0.2s var(--ease-out);
}

.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: var(--card-hover-lift);
}

/* Card accent top-bars */
.card[class*="card-accent-"] {
    position: relative;
    overflow: hidden;
}

.card[class*="card-accent-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.card-accent-purple::before {
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

.card-accent-green::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.card-accent-amber::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.card-accent-pink::before {
    background: linear-gradient(90deg, #ec4899, #f472b6);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
}

.card-value {
    font-family: 'Baloo 2', cursive;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--accent);
}

.card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Stat cards ──────────────────────────────────────────── */

.stat-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease-out),
                box-shadow 0.25s var(--ease-out),
                transform 0.2s var(--ease-out);
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.stat-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: var(--card-hover-lift);
}

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

.stat-card:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.stat-card .stat-value {
    font-family: 'Baloo 2', cursive;
    font-size: 36px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Badges ──────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-not_started {
    background: var(--bg-secondary, #374151);
    color: var(--text-muted, #9CA3AF);
    border: 1px solid rgba(156, 163, 175, 0.25);
}
.badge-not_started::before {
    content: "○";
    margin-right: 4px;
    font-size: 9px;
    opacity: 0.7;
}
.badge-critical { background: var(--red-bg); color: var(--red); }
.badge-high { background: var(--amber-bg); color: var(--amber); }
.badge-medium { background: var(--blue-bg); color: var(--blue); }
.badge-maintain { background: var(--green-bg); color: var(--green-dark); }

.badge-flk1 { background: var(--blue-bg); color: var(--accent); }
.badge-flk2 { background: var(--blue-bg); color: var(--accent); }

.badge-verified { background: var(--green-bg); color: var(--green-dark); }
.badge-unverified { background: var(--amber-bg); color: var(--amber); }
.badge-flagged { background: var(--red-bg); color: var(--red); }

/* P6.H — provenance badges shared across flashcards / cases / statutes:
   `.badge-auto` is amber and means "auto-extracted, no human stamp yet".
   `.badge-needswriting` is amber and means "auto-extracted AND explicitly
   marked as needing review". `.badge-verified` (above) is green and means
   "human-reviewed". The three classes together replace the old per-section
   badge dialects so a green pill always carries the same meaning. */
.badge-auto { background: var(--amber-bg); color: var(--amber); }
.badge-needswriting { background: var(--amber-bg); color: var(--amber); border: 1px dashed rgba(245,158,11,0.4); }

/* C5: shared "Practice" pill — Recent Sessions and Library card now both
   reach for the same class instead of redefining the colours inline. */
.badge-practice { background: var(--purple-bg); color: var(--purple); }

/* ── Subject cards (dashboard) ───────────────────────────── */

.subject-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out),
                box-shadow 0.25s var(--ease-out),
                transform 0.2s var(--ease-out),
                background 0.2s var(--ease-out);
    position: relative;
}

.subject-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
    background: var(--card-hover);
    transform: var(--card-hover-lift);
    border-left: 3px solid var(--accent);
}

.subject-card:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.subject-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.subject-card .subject-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

.subject-card .subject-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.subject-card .subject-stats span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.subject-card .status-bar {
    height: 3px;
    border-radius: 2px;
    margin-top: 12px;
}

.subject-coverage {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
    border: 1px solid transparent;
}

.subject-coverage-limited {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border-color: color-mix(in srgb, var(--amber) 25%, transparent);
}

.subject-coverage-minimal {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 25%, transparent);
}

.status-not_started { background: var(--text-muted, #9CA3AF); }
.status-critical { background: var(--red); }
.status-high { background: var(--amber); }
.status-medium { background: var(--blue); }
.status-maintain { background: var(--green); }

/* ── Notes browser ───────────────────────────────────────── */

.notes-layout {
    display: grid;
    grid-template-columns: 220px 240px 1fr;
    gap: 0;
    height: calc(100vh - 120px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

.notes-panel {
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.notes-panel:last-child {
    border-right: none;
}

.notes-panel-header {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.notes-list-item {
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}

.notes-list-item:hover {
    background: var(--bg);
}

.notes-list-item.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 500;
}

.notes-list-item .item-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

.note-content {
    padding: 24px;
    overflow-y: auto;
    line-height: 1.7;
    font-size: 14px;
}

.infinite-scroll-sentinel {
    grid-column: 1 / -1;
    padding: 16px;
    text-align: center;
}

.note-content h1, .note-content h2, .note-content h3 {
    margin-top: 20px;
    margin-bottom: 8px;
}

.note-content p {
    margin-bottom: 12px;
}

.note-content .note-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* ── Search ──────────────────────────────────────────────── */

.search-bar {
    position: relative;
    margin-bottom: 16px;
}

.search-bar input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--card);
}

.search-bar svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* Fenced code blocks (```lang … ```) — give Mermaid and other diagram sources
   a distinct monospace container so they don't read as broken prose. */
pre.code-block {
    background: var(--bg, #f6f8fa);
    border: 1px solid var(--border, #e1e4e8);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 12px 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
}
pre.code-block .code-block-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: var(--text-muted, #6a737d);
    font-family: var(--font-sans, system-ui, sans-serif);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border, #e1e4e8);
}
pre.code-block > code {
    display: block;
    background: transparent !important;
    padding: 0 !important;
    color: inherit;
    white-space: pre;
}

/* D56: reader width preference variants — swap the content column's max-width */
.note-reader[data-width="narrow"] .note-reader-content { max-width: 640px; }
.note-reader[data-width="comfortable"] .note-reader-content { max-width: 820px; }
.note-reader[data-width="wide"] .note-reader-content { max-width: 1100px; }

.search-results {
    max-height: 60vh;
    overflow-y: auto;
    /* D34: make the results float as a proper overlay with a clear boundary
       from the underlying subject list, so the layering stops reading as
       "content stacked on content". */
    position: relative;
    z-index: 5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    margin-top: 8px;
    margin-bottom: 16px;
}

.search-results-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
    align-items: baseline;
    background: var(--bg);
}

.search-results-header .search-results-count {
    font-weight: 600;
    color: var(--text);
}

.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
}

.search-result-item:hover {
    background: var(--bg);
}

.search-result-item .result-title {
    font-size: 14px;
    font-weight: 500;
}

.search-result-item .result-preview {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

.search-result-item .result-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Slide presenter ─────────────────────────────────────── */

.slide-presenter {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.slide-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-wrap: wrap;
}

.slide-toolbar select {
    min-width: 300px;
    flex: 1 1 300px;
    max-width: 520px;
}

.slide-progress-bar {
    height: 3px;
    background: var(--border);
}

.slide-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-gradient);
    transition: width 0.3s ease;
}

.slide-main-area {
    display: flex;
    flex: 1;
    min-height: 500px;
    max-height: calc(100vh - 160px);
    overflow: hidden;
}

.slide-thumbnails {
    width: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--bg);
    transition: width 0.2s, min-width 0.2s;
    align-self: stretch;
}

.slide-thumbnails:not(:empty) {
    width: 180px;
    min-width: 180px;
}

.slide-thumb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    font-size: 12px;
    line-height: 1.4;
}

.slide-thumb:hover {
    background: var(--accent-light);
}

.slide-thumb.active {
    border-left-color: var(--teal);
    background: var(--teal-bg);
    font-weight: 600;
}

.slide-thumb-num {
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
    min-width: 18px;
}

.slide-thumb-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-secondary);
}

.slide-viewport {
    min-height: 0;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    flex: 1;
    background: var(--card);
    transition: opacity 0.2s ease;
}

.slide-transitioning {
    opacity: 0.3;
}

.slide-content {
    max-width: 740px;
    width: 100%;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}

.slide-content h2 {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--teal);
    line-height: var(--leading-snug, 1.45);
    letter-spacing: -0.01em;
}

.slide-accent-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), #10B981);
    border-radius: 2px;
    margin-bottom: 20px;
}

.slide-body-rich {
    font-size: 17px;
    line-height: 1.65;
    max-width: var(--measure-reading, 68ch);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.slide-body-rich .rendered-content {
    font-size: inherit;
    line-height: inherit;
}

.slide-body-rich p { margin: 0 0 12px; }
.slide-body-rich ul,
.slide-body-rich ol { margin: 0 0 14px 20px; padding: 0; }
.slide-body-rich li { margin-bottom: 6px; }

.slide-number-watermark {
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-family: 'Baloo 2', cursive;
    font-size: 72px;
    font-weight: 800;
    color: var(--border);
    opacity: 0.3;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.slide-content .slide-body {
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.slide-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-nav button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
}

.slide-nav button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.slide-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slide-counter {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

.slide-notes-panel {
    padding: 16px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.slide-notes-panel.visible {
    display: block;
}

.slide-presenter.fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    border-radius: 0;
}

.slide-presenter.fullscreen .slide-viewport {
    min-height: calc(100vh - 120px);
}

.slide-presenter.fullscreen .slide-thumbnails {
    display: none;
}

@media (max-width: 768px) {
    .slide-thumbnails {
        display: none;
    }
    .slide-viewport {
        padding: 24px;
    }
    .slide-content h2 {
        font-size: 22px;
    }
    .slide-number-watermark {
        font-size: 48px;
    }
}

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

.quiz-setup {
    max-width: 560px;
    margin: 0 auto;
}

.quiz-setup .mode-option {
    padding: 18px 18px 18px 52px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out),
                background 0.2s var(--ease-out),
                box-shadow 0.2s var(--ease-out),
                transform 0.12s var(--ease-out);
    position: relative;
    background: var(--card);
}

.quiz-setup .mode-option::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--card);
    transition: border-color 0.2s var(--ease-out);
}

.quiz-setup .mode-option::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 27px;
    transform: scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 0.2s var(--ease-out);
}

.quiz-setup .mode-option:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.quiz-setup .mode-option:hover::before {
    border-color: var(--accent);
}

.quiz-setup .mode-option.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.quiz-setup .mode-option.selected::before {
    border-color: var(--accent);
}

.quiz-setup .mode-option.selected::after {
    transform: scale(1);
}

.quiz-setup .mode-option h3 {
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text);
}

.quiz-setup .mode-option p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.quiz-setup .mode-option.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.35);
}
.quiz-setup .mode-option.is-disabled:hover { border-color: var(--border); transform: none; }
.btn.is-disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.35); }
.btn.is-toggled, .btn[aria-pressed="true"] { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

.quiz-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
}

.quiz-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.quiz-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border-light);
    border-radius: 999px;
    margin: 0 16px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 999px;
    transition: width 0.4s var(--ease-out);
}

.quiz-question {
    padding: 28px 28px 12px;
}

.quiz-stem {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 22px;
    color: var(--text);
    max-width: 68ch;
}

.quiz-option {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out),
                background 0.2s var(--ease-out),
                box-shadow 0.2s var(--ease-out),
                transform 0.12s var(--ease-out);
    font-size: 15.5px;
    line-height: 1.6;
    overflow: hidden;
    background: var(--card);
}

.quiz-option:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.quiz-option:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.quiz-option.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-light);
}

.quiz-option.correct {
    border-color: var(--green-dark);
    background: var(--green-bg);
    box-shadow: 0 0 0 2px var(--green-bg);
    animation: correctPop 0.45s var(--ease-out);
}

.quiz-option.incorrect {
    border-color: var(--red);
    background: var(--red-bg);
    box-shadow: 0 0 0 2px var(--red-bg);
    animation: shake 0.35s var(--ease-out);
}

@keyframes answer-fade {
    0% { opacity: 0.7; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.quiz-option .option-letter {
    width: 52px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', cursive;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    flex-shrink: 0;
    transition: background 0.2s var(--ease-out),
                color 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out);
    border-right: 1.5px solid var(--border);
}

.quiz-option .option-text {
    padding: 14px 20px;
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--text);
}

.quiz-option:hover .option-letter {
    background: var(--accent-light);
    color: var(--accent);
    border-right-color: var(--accent);
}

.quiz-option.selected .option-letter {
    background: var(--accent);
    color: var(--text-inverse);
    border-right-color: var(--accent);
}

.quiz-option.correct .option-letter {
    background: var(--green-dark);
    color: var(--text-inverse);
    border-right-color: var(--green-dark);
}

.quiz-option.correct .option-letter::after {
    content: ' \2714';
    font-size: 13px;
    margin-left: 3px;
    font-family: inherit;
}

.quiz-option.incorrect .option-letter {
    background: var(--red);
    color: var(--text-inverse);
    border-right-color: var(--red);
}

.quiz-option.incorrect .option-letter::after {
    content: ' \2718';
    font-size: 13px;
    margin-left: 3px;
    font-family: inherit;
}

.quiz-explanation {
    padding: 22px 28px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    font-size: 15px;
    line-height: 1.7;
    transition: border-left-color 0.2s var(--ease-out);
    color: var(--text-secondary);
}

.quiz-explanation .explanation-text {
    color: var(--text);
    max-width: 68ch;
}

.quiz-explanation.correct { border-left-color: var(--green-dark); }
.quiz-explanation.incorrect { border-left-color: var(--red); }

/* Result banner: unambiguous correct/incorrect confirmation. */
.quiz-result-banner {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 18px 22px;
    margin: 0 0 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    font-size: 15px;
    line-height: 1.4;
    animation: resultBannerIn 0.25s ease-out;
}

.quiz-result-banner .result-mark {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.quiz-result-banner .result-label {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.quiz-result-banner .result-detail {
    grid-column: 2 / -1;
    font-size: 14px;
    opacity: 0.92;
}

.quiz-result-banner.correct {
    background: var(--green-bg);
    border-color: var(--green-dark);
    color: var(--green-dark);
}
.quiz-result-banner.correct .result-mark { background: var(--green-dark); }

.quiz-result-banner.incorrect {
    background: var(--red-bg);
    border-color: var(--red);
    color: var(--red);
}
.quiz-result-banner.incorrect .result-mark { background: var(--red); }

@keyframes resultBannerIn {
    0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-result-banner { animation: none; }
}

/* Legacy explanation-icon retained as no-op for any cached HTML. */
.quiz-explanation .explanation-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.quiz-explanation .explanation-icon.correct { color: var(--green-dark); }
.quiz-explanation .explanation-icon.incorrect { color: var(--red); }

/* ── Subject breakdown chart ─────────────────────────── */

.subject-breakdown {
    margin-top: 24px;
}

.subject-breakdown-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.subject-breakdown-row .sbd-name {
    width: 180px;
    flex-shrink: 0;
    font-weight: 500;
}

.subject-breakdown-row .sbd-bar {
    flex: 1;
    height: 20px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 12px;
}

.subject-breakdown-row .sbd-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.subject-breakdown-row .sbd-value {
    width: 50px;
    text-align: right;
    font-weight: 600;
    font-size: 12px;
}

/* ── Subject filter chips for quiz ───────────────────── */

.subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
}

.subject-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s var(--ease-out),
                background 0.18s var(--ease-out),
                color 0.18s var(--ease-out),
                transform 0.12s var(--ease-out);
    background: var(--card);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.subject-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

.subject-chip:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.subject-chip.active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(84,72,217,0.22);
}

.quiz-explanation h4 {
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
}

.quiz-explanation .explanation-text {
    margin-bottom: 12px;
}

.quiz-explanation .source-link {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}

.quiz-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.quiz-timer {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    padding: 4px 14px;
    border-radius: 8px;
    background: var(--bg);
    letter-spacing: 0.5px;
}

/* ── Flashcards ──────────────────────────────────────────── */

.flashcard-container {
    perspective: 1200px;
    max-width: 680px;
    margin: 0 auto;
}

.flashcard {
    width: 100%;
    min-height: 340px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard-face {
    width: 100%;
    min-height: 340px;
    backface-visibility: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px 56px;
    text-align: center;
    overflow-y: auto;
}

.flashcard-front {
    /* Front face stays in flow so card grows with content */
    position: relative;
    font-size: 19px;
    line-height: 1.65;
    background: linear-gradient(135deg, var(--card) 0%, rgba(224,231,255,0.35) 100%);
    border-top: 4px solid var(--accent);
    color: var(--text);
}

.flashcard-back {
    /* Back face overlays the front */
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    font-size: 16px;
    line-height: 1.7;
    background: linear-gradient(135deg, var(--card) 0%, var(--green-bg) 100%);
    border-top: 4px solid var(--green);
    color: var(--text);
}

.flashcard-front #card-front-text,
.flashcard-back #card-back-text {
    max-width: 62ch;
}

/* Card type top-border colors */
.flashcard-face[data-type="case"] { border-top-color: var(--blue); }
.flashcard-face[data-type="statute"] { border-top-color: var(--amber); }
.flashcard-face[data-type="rule"] { border-top-color: var(--green); }
.flashcard-face[data-type="definition"] { border-top-color: var(--accent); }
.flashcard-face[data-type="comparison"] { border-top-color: #7C3AED; }
.flashcard-face[data-type="trap"] { border-top-color: var(--red); }

.flashcard-type {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--border-light);
    border: 1px solid var(--border);
}

.flashcard-face[data-type="case"]       .flashcard-type { background: var(--blue-bg);   color: var(--blue);   border-color: rgba(59,130,246,0.35); }
.flashcard-face[data-type="statute"]    .flashcard-type { background: var(--amber-bg);  color: var(--amber);  border-color: rgba(245,158,11,0.35); }
.flashcard-face[data-type="rule"]       .flashcard-type { background: var(--green-bg);  color: var(--green-dark); border-color: rgba(34,197,94,0.35); }
.flashcard-face[data-type="definition"] .flashcard-type { background: var(--accent-light); color: var(--accent); border-color: rgba(79,70,229,0.35); }
.flashcard-face[data-type="comparison"] .flashcard-type { background: var(--purple-bg); color: var(--purple); border-color: rgba(124,58,237,0.35); }
.flashcard-face[data-type="trap"]       .flashcard-type { background: var(--red-bg);    color: var(--red);    border-color: rgba(220,38,38,0.35); }

/* P6.H — provenance badge sits in the top-right corner so the type chip and
   source badge share the same row visually (the type chip is absolute top-left). */
.flashcard-meta-row { display: contents; }
.flashcard-source-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.flashcard-source-badge.badge-auto { background: var(--amber-bg); color: var(--amber); }
.flashcard-source-badge.badge-verified { background: var(--green-bg); color: var(--green-dark); }
.flashcard-source-badge:empty { display: none; }

.flashcard-hint {
    position: absolute;
    bottom: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Cloze rendering (front blank + back highlight) ─────── */

.fc-cloze-sentence {
    max-width: 56ch;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text);
}

.cloze-blank {
    display: inline-block;
    min-width: 88px;
    height: 1.1em;
    margin: 0 4px;
    border-bottom: 3px solid var(--accent);
    vertical-align: -4px;
    background: linear-gradient(180deg, transparent 70%, var(--accent-light) 70%);
    border-radius: 2px;
}

.fc-back-answer {
    font-family: 'Baloo 2', cursive;
    font-size: 34px;
    font-weight: 800;
    color: var(--green-dark);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.fc-back-context {
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 12px 14px;
    background: var(--callout-bg);
    border-left: 3px solid var(--green);
    border-radius: 6px;
    text-align: left;
}

.cloze-answer {
    background: var(--green-bg);
    color: var(--green-dark);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    border-bottom: 2px solid var(--green-dark);
}

/* ── Flashcard Mode Toggle ─────────────────────────────────── */

.fc-mode-toggle {
    display: flex;
    gap: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    width: fit-content;
}

.fc-mode-btn {
    padding: 6px 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.fc-mode-btn.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 1px 4px rgba(79,70,229,0.3);
}

.fc-mode-btn:not(.active):hover {
    color: var(--text);
    background: var(--accent-light);
}

/* ── Flashcard Browse Navigation ──────────────────────────── */

.fc-browse-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 12px;
}

/* ── Flashcard Ratings ────────────────────────────────────── */

.flashcard-ratings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.flashcard-ratings.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ratings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ratings-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.rating-btn {
    padding: 12px 24px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.rating-btn:hover { transform: translateY(-2px); }
.rating-btn:active { transform: translateY(0) scale(0.95); }
.rating-btn.again { color: var(--red); border-color: var(--red); }
.rating-btn.again:hover { background: var(--red-bg); box-shadow: 0 4px 12px rgba(220,38,38,0.2); }
.rating-btn.hard { color: var(--amber); border-color: var(--amber); }
.rating-btn.hard:hover { background: var(--amber-bg); box-shadow: 0 4px 12px rgba(245,158,11,0.2); }
.rating-btn.good { color: var(--blue); border-color: var(--blue); }
.rating-btn.good:hover { background: var(--blue-bg); box-shadow: 0 4px 12px rgba(59,130,246,0.2); }
.rating-btn.easy { color: var(--green-dark); border-color: var(--green-dark); }
.rating-btn.easy:hover { background: var(--green-bg); box-shadow: 0 4px 12px rgba(21,217,11,0.2); }

.flashcard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.flashcard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.fc-forecast {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 24px;
}

.fc-forecast-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.fc-forecast-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
    gap: 4px;
    align-items: end;
    min-height: 72px;
}

.fc-forecast-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    position: relative;
    min-height: 60px;
}

.fc-forecast-bar {
    width: 100%;
    max-width: 18px;
    background: color-mix(in srgb, var(--accent) 65%, transparent);
    border-radius: 2px 2px 0 0;
    transition: height 0.2s ease;
}

.fc-forecast-cell.today .fc-forecast-bar {
    background: var(--accent);
}

.fc-forecast-cell.overdue .fc-forecast-bar {
    background: var(--amber, #F59E0B);
}

.fc-forecast-cell.overdue .fc-forecast-day {
    color: var(--amber, #F59E0B);
    font-weight: 700;
}

.fc-catchup-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fc-catchup-btn:hover,
.fc-catchup-btn:focus {
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

.fc-forecast-day {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.fc-forecast-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    min-height: 12px;
}

/* ── Tabs ────────────────────────────────────────────────── */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Table ───────────────────────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}

.data-table tr:hover td {
    background: var(--bg);
}

/* ── Filter bar ──────────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s var(--ease-out),
                background 0.18s var(--ease-out),
                color 0.18s var(--ease-out),
                transform 0.12s var(--ease-out),
                box-shadow 0.18s var(--ease-out);
    background: var(--card);
    color: var(--text-secondary);
}

.filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.filter-chip:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.06s;
}
.filter-chip.active {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(84,72,217,0.22);
}

/* ── Analytics ───────────────────────────────────────────── */

.heatmap-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    animation: fadeInUp 0.3s ease-out both;
    border-bottom: 1px solid var(--border-light);
}

.heatmap-label {
    width: 200px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.heatmap-bar {
    flex: 1;
    height: 24px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.heatmap-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.heatmap-value {
    width: 50px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    margin-left: 12px;
}

/* ── Comparison cards ────────────────────────────────────── */

.comparison-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}

.comparison-side {
    padding: 16px;
}

.comparison-side:first-child {
    border-right: 1px solid var(--border);
}

.comparison-vs {
    grid-column: span 2;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* ── Trap cards ──────────────────────────────────────────── */

.trap-card {
    border-left: 3px solid var(--red);
    padding: 16px;
    background: var(--card);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.trap-card .trap-trigger {
    font-size: 13px;
    color: var(--red);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trap-chip-unverified {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}

.trap-card .trap-mistake {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.trap-card .trap-correct {
    font-size: 13px;
    color: var(--green-dark);
}

/* ── Source type icons ───────────────────────────────────── */

.source-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.source-badge.organised_chapter { background: rgba(139,92,246,0.12); color: var(--purple); }
.source-badge.raw_note { background: var(--blue-bg); color: var(--accent); }
.source-badge.revision_slide { background: var(--green-bg); color: var(--green-dark); }
.source-badge.lecture_transcript { background: var(--amber-bg); color: var(--amber); }
.source-badge.exam_technique { background: var(--red-bg); color: var(--red); }
.source-badge.revision_pack { background: var(--amber-bg); color: var(--amber); }
.source-badge.action_plan { background: var(--blue-bg); color: var(--accent); }
.source-badge.study_notes_src { background: rgba(16,185,129,0.12); color: var(--green); }
.source-badge.prep_material,
.source-badge.session_material,
.source-badge.review_material,
.source-badge.lecture_material { background: rgba(245,158,11,0.12); color: var(--amber); }
/* ── Quiz Flow Cards (Question Bank vs Mock Exam) ──────────── */

.quiz-flow-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 700px;
    margin: 0 auto 24px;
}

.flow-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow);
}

.flow-card:active { transform: scale(0.98); }
.flow-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.flow-card-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.flow-card-content h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.flow-card-content p {
    font-size: 13px;
    color: var(--text-secondary);
}

.flow-card-arrow {
    font-size: 20px;
    color: var(--text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.flow-card:hover .flow-card-arrow {
    color: var(--accent);
}

/* ── Quiz Flow Config Panel ─────────────────────────────────── */

.quiz-flow-config {
    max-width: 600px;
    margin: 0 auto;
}

.flow-config-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.flow-config-header h3 {
    font-size: 20px;
}

/* ── Bank Mode Options ──────────────────────────────────────── */

.bank-mode-options .mode-option {
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--card);
}

.bank-mode-options .mode-option:hover:not(.selected) {
    border-color: var(--border-strong, var(--border));
    background: var(--surface-alt, var(--card));
}

.bank-mode-options .mode-option.selected {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.bank-mode-options .mode-option h3 {
    font-size: 14px;
    margin-bottom: 2px;
}

.bank-mode-options .mode-option p {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Paper Selector (FLK1 / FLK2) ──────────────────────────── */

.paper-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.paper-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card);
}

.paper-option:hover {
    border-color: var(--accent);
}

.paper-option.selected {
    border-color: var(--accent);
    background: var(--accent-light);
}

.paper-option .badge {
    font-size: 13px;
    padding: 6px 14px;
    flex-shrink: 0;
}

.paper-option h3 {
    font-size: 14px;
    margin-bottom: 2px;
}

.paper-option p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── Pre-Exam Screen ────────────────────────────────────────── */

.pre-exam-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.pre-exam-card {
    text-align: center;
    max-width: 500px;
    padding: 48px 40px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.pre-exam-card h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.pre-exam-card h2 {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 24px;
}

.pre-exam-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
}

.pre-exam-stat {
    text-align: center;
}

.pre-exam-stat-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
}

.pre-exam-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.pre-exam-rules {
    text-align: left;
    padding: 16px 20px;
    background: var(--bg);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.pre-exam-rules h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pre-exam-rules ul {
    list-style: none;
    padding: 0;
}

.pre-exam-rules li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
    padding-left: 16px;
    position: relative;
}

.pre-exam-rules li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ── Timer toggle label ─────────────────────────────────────── */

.timer-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── Button large variant ───────────────────────────────────── */

.btn-lg {
    padding: 12px 32px;
    font-size: 16px;
}

/* ── Quiz counter label ─────────────────────────────────────── */

.quiz-counter-label {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Quintile result with pass/fail ─────────────────────────── */

.quintile-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quintile-pass-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quintile-pass-text.pass {
    color: var(--green-dark);
}

.quintile-pass-text.fail {
    color: var(--red);
}

/* ── Practice Dashboard ────────────────────────────────────── */

.quick-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.quick-start-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}
.quick-start-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.quick-start-card.review-due { border-top: 3px solid var(--amber); }
.quick-start-card.weak-areas { border-top: 3px solid var(--red); }
.quick-start-card.quick-random { border-top: 3px solid var(--accent); }
.quick-start-icon { font-size: 24px; flex-shrink: 0; width: 36px; text-align: center; }
.quick-start-body { flex: 1; min-width: 0; }
.quick-start-body h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.quick-start-body p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.4; }
.quick-start-arrow { color: var(--text-muted); font-size: 18px; }

.quiz-vitals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.quiz-vital { text-align: center; }
.quiz-vital-value { font-family: 'Baloo 2', cursive; font-size: 26px; font-weight: 700; line-height: 1.2; }
.quiz-vital-dim { font-size: 16px; opacity: 0.5; font-weight: 400; }
.quiz-vital-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }

.mastery-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.mastery-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
    text-align: center;
    min-height: 64px;
}
.mastery-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.mastery-cell-name { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--text-secondary); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mastery-cell-pct { font-family: 'Baloo 2', cursive; font-size: 18px; font-weight: 700; line-height: 1; }
.mastery-cell.unattempted { background: var(--bg-subtle); }
.mastery-cell.unattempted .mastery-cell-pct { color: var(--text-muted); }
.mastery-cell.band-green { background: var(--green-bg); }
.mastery-cell.band-green .mastery-cell-pct { color: var(--green-dark); }
.mastery-cell.band-amber { background: var(--amber-bg, rgba(201, 122, 9, 0.1)); }
.mastery-cell.band-amber .mastery-cell-pct { color: var(--amber); }
.mastery-cell.band-red { background: var(--red-bg); }
.mastery-cell.band-red .mastery-cell-pct { color: var(--red); }

.session-card-list { display: flex; flex-direction: column; gap: 8px; }
.session-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.session-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.session-donut-mini { flex-shrink: 0; }
.session-card-body { flex: 1; min-width: 0; }

/* Topic tree */
.topic-tree { margin-top: 12px; }
.topic-group { margin-bottom: 8px; }
.topic-group-label { margin-bottom: 4px; padding-left: 4px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 8px; }
.topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: var(--text-secondary);
}
.topic-chip:hover:not(.is-disabled) { border-color: var(--accent); }
.topic-chip.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.topic-chip.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Count presets */
.count-presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.preset-btn {
    padding: 6px 14px;
    font-size: 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-weight: 500;
    color: var(--text);
}
.preset-btn:hover { border-color: var(--accent); }
.preset-btn.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.count-presets input[type="number"] {
    padding: 6px 10px;
    font-size: 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
}

/* SR widget */
.sr-widget { border-left: 4px solid var(--amber); }
.sr-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}
.sr-stat-value {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.sr-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 2px;
}
.sr-progress-bar {
    height: 8px;
    background: var(--border-light);
    border-radius: 999px;
    overflow: hidden;
}
.sr-progress-fill {
    height: 100%;
    background: var(--green);
    border-radius: 999px;
    transition: width 0.6s var(--ease-out);
}

@media (max-width: 900px) {
    .mastery-grid { grid-template-columns: repeat(4, 1fr); }
    .quiz-vitals { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
    .mastery-grid { grid-template-columns: repeat(2, 1fr); }
    .quick-start-grid { grid-template-columns: 1fr; }
}

/* ── Results overhaul ──────────────────────────────────────── */

.comparison-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.comparison-delta {
    font-weight: 700;
    font-size: 15px;
    padding: 2px 10px;
    border-radius: 999px;
}
.comparison-delta.delta-up { background: var(--green-bg); color: var(--green-dark); }
.comparison-delta.delta-down { background: var(--red-bg); color: var(--red); }

.time-histogram {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding: 0 8px;
}
.time-hist-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.time-bar {
    width: 100%;
    max-width: 48px;
    background: var(--accent);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.4s var(--ease-out);
}
.time-bar-count { font-size: 12px; font-weight: 700; margin-top: 4px; color: var(--text); }
.time-bar-label { font-size: 10px; color: var(--text-muted); text-align: center; }

.recommendation-card {
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--red);
    border-radius: var(--radius-sm);
}

.review-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.review-card-list { display: flex; flex-direction: column; gap: 6px; }
.review-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.review-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s;
}
.review-card-header:hover { background: var(--bg-subtle); }
.review-card-chevron {
    margin-left: auto;
    transition: transform 0.15s;
    color: var(--text-muted);
}
.review-card.expanded .review-card-chevron { transform: rotate(-90deg); }
.review-card-body {
    display: none;
    padding: 12px 14px;
    border-top: 1px solid var(--border-light);
}
.review-card.expanded .review-card-body { display: block; }

/* ── In-quiz enhancements ──────────────────────────────────── */

.confidence-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 0;
}
.conf-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.conf-btn:hover { border-color: var(--accent); transform: scale(1.1); }
.conf-btn.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.quiz-pause-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-lg);
}
.quiz-card { position: relative; }
.pause-overlay-content { text-align: center; color: var(--text-inverse, #fff); }
.pause-overlay-content h3 { margin: 0 0 4px; font-size: 20px; }

.streak-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--amber), #ef4444);
    color: #fff;
    border-radius: 999px;
    animation: streakPop 0.3s var(--ease-out);
}
@keyframes streakPop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Review navigation ──────────────────────────────────────── */

.review-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .quiz-flow-cards {
        grid-template-columns: 1fr;
    }

    .flow-card {
        padding: 16px;
    }

    .flow-card-icon {
        font-size: 24px;
    }

    .pre-exam-card {
        padding: 24px 20px;
    }

    .pre-exam-stats {
        gap: 24px;
    }

    .pre-exam-stat-value {
        font-size: 28px;
    }

    .paper-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── Wrong MCQ Panel ────────────────────────────────────────── */

.wrong-mcq-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wrong-mcq-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wrong-mcq-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.wrong-mcq-item:last-child {
    border-bottom: none;
}

.wrong-mcq-preview {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.wrong-mcq-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Mock Exam: Navigation Bar ─────────────────────────────── */

.question-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.btn-flag {
    color: var(--amber);
    border-color: var(--amber);
}

.btn-flag:hover, .btn-flag.active {
    background: var(--amber-bg);
    color: var(--amber);
}

.btn-flag.active {
    background: var(--amber);
    color: white;
}

/* ── Mock Exam: Question Grid ──────────────────────────────── */

.question-grid-container {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.question-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.qgrid-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.qgrid-btn:hover {
    border-color: var(--accent);
}

.qgrid-btn.current {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.qgrid-btn.answered {
    background: var(--green-bg);
    border-color: var(--green);
    color: var(--green-dark);
}

.qgrid-btn.answered.current {
    background: var(--accent);
    color: white;
}

.qgrid-btn.flagged {
    border-color: var(--amber);
    position: relative;
}

.qgrid-btn.flagged::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--amber);
    border-radius: 50%;
}

/* ── Mock Timer ─────────────────────────────────────────────── */

.mock-timer-countdown {
    font-weight: 700;
    font-size: 16px;
}

.timer-warning {
    color: var(--amber) !important;
    animation: pulse-slow 2s ease-in-out infinite;
}

.timer-danger {
    color: var(--red) !important;
    font-size: 18px;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Score/Time Panel (Results) ─────────────────────────────── */

.score-time-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .score-time-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Quintile Badge ─────────────────────────────────────────── */

.quintile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto;
}

.quintile-badge-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: white;
}

/* ── Module Breakdown ───────────────────────────────────────── */

.module-breakdown-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

.module-breakdown-name {
    width: 180px;
    flex-shrink: 0;
    font-weight: 500;
}

.module-breakdown-bar-wrap {
    flex: 1;
    height: 24px;
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin: 0 12px;
    position: relative;
}

.module-breakdown-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.module-breakdown-value {
    width: 100px;
    text-align: right;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Flagged badge ──────────────────────────────────────────── */

.badge-flagged {
    background: var(--amber-bg);
    color: var(--amber);
}

.badge-disputed {
    background: var(--red-bg);
    color: var(--red);
}

.badge-ai-verified {
    background: var(--green-bg);
    color: var(--green-dark);
}

.badge-ai-low-conf {
    background: var(--amber-bg);
    color: var(--amber);
}

/* ── Dashboard: Feature Grid (Phase 5) ─────────────────────── */

.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-stats-row .stat-card {
    text-align: center;
    position: relative;
}

/* Subtle gradient accents on dashboard stat cards — re-rendered via tokens so
   they adapt to both light + dark mode. */
.dashboard-stats-row .stat-card:nth-child(1) {
    background: linear-gradient(140deg, var(--card) 55%, var(--accent-soft));
}
.dashboard-stats-row .stat-card:nth-child(2) {
    background: linear-gradient(140deg, var(--card) 55%, var(--green-bg));
}
.dashboard-stats-row .stat-card:nth-child(3) {
    background: linear-gradient(140deg, var(--card) 55%, var(--blue-bg));
}

.stat-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    margin-bottom: 4px;
    pointer-events: none;
}

/* Show on hover (desktop) */
.stat-card:hover .stat-tooltip {
    display: block;
}

/* Show when toggled via tap (touch devices) */
.stat-tooltip.show {
    display: block;
}

/* Info button for touch-friendly tooltip toggle */
.stat-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
    font-style: italic;
    font-family: serif;
}

.stat-info-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

/* Section divider for dashboard sections */
.dashboard-section-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

@media (min-width: 1280px) {
    .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1600px) {
    .feature-grid { grid-template-columns: repeat(6, 1fr); }
}

.grid-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out),
                box-shadow 0.25s var(--ease-out),
                transform 0.2s var(--ease-out),
                background 0.2s var(--ease-out);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Colored top borders for each feature grid card */
.feature-grid .grid-card:nth-child(1)  { border-top-color: var(--blue); }
.feature-grid .grid-card:nth-child(2)  { border-top-color: var(--amber); }
.feature-grid .grid-card:nth-child(3)  { border-top-color: var(--green); }
.feature-grid .grid-card:nth-child(4)  { border-top-color: var(--green); }
.feature-grid .grid-card:nth-child(5)  { border-top-color: var(--purple); }
.feature-grid .grid-card:nth-child(6)  { border-top-color: var(--accent); }
.feature-grid .grid-card:nth-child(7)  { border-top-color: var(--teal); }
.feature-grid .grid-card:nth-child(8)  { border-top-color: var(--text-secondary); }
.feature-grid .grid-card:nth-child(9)  { border-top-color: var(--red); }
.feature-grid .grid-card:nth-child(10) { border-top-color: var(--orange); }
.feature-grid .grid-card:nth-child(11) { border-top-color: var(--blue); }
.feature-grid .grid-card:nth-child(12) { border-top-color: var(--amber); }

.grid-card:active { transform: translateY(0) scale(0.99); }
.grid-card:hover {
    border-color: var(--accent);
    background: var(--card-hover);
    box-shadow: var(--shadow-lg);
    transform: var(--card-hover-lift);
}

.grid-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.grid-card-icon {
    font-size: 30px;
    margin-bottom: 12px;
    transition: transform 0.25s var(--ease-out);
    line-height: 1;
}

.grid-card:hover .grid-card-icon {
    transform: scale(1.12) rotate(-3deg);
}

.grid-card-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
}

.grid-card-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .dashboard-stats-row {
        grid-template-columns: 1fr;
    }
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Countdown Widget (Phase 5) ─────────────────────────────── */

.countdown-widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.countdown-days {
    font-size: 56px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -2px;
}

.countdown-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Rules View (Phase 6) ───────────────────────────────────── */

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

.rule-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s, transform 0.15s;
}

.rule-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.rule-text {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 8px;
}

.rule-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.rule-type-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.rule-type-badge.principle { background: var(--blue-bg); color: var(--accent); }
.rule-type-badge.definition { background: var(--green-bg); color: var(--green-dark); }
.rule-type-badge.test { background: var(--amber-bg); color: var(--amber); }
.rule-type-badge.exception { background: var(--red-bg); color: var(--red); }

.rule-save-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.rule-save-btn:hover {
    border-color: var(--accent);
}

.rule-save-btn.saved {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ── Note read indicators (Phase 8) ─────────────────────────── */

.read-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}

.read-indicator.read {
    background: var(--green-bg);
    color: var(--green-dark);
}

.read-indicator.unread {
    background: var(--border);
    color: var(--text-muted);
}

/* ── Analytics: SVG chart ────────────────────────────────────── */

.perf-chart-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    min-height: 200px;
}

.svg-chart {
    width: 100%;
    height: auto;
    max-height: 220px;
}

.svg-chart text {
    font-family: inherit;
}

/* ── Analytics: Session History ──────────────────────────────── */

.session-history-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    background: var(--card);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.session-history-row:hover {
    box-shadow: var(--shadow-md);
}

.session-row-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.session-row-main:hover {
    background: var(--bg);
}

.session-row-date {
    font-size: 13px;
    color: var(--text-secondary);
    width: 90px;
    flex-shrink: 0;
}

.session-row-type {
    width: 80px;
    flex-shrink: 0;
}

.session-row-score {
    font-size: 16px;
    font-weight: 700;
    width: 60px;
    flex-shrink: 0;
}

.session-row-detail {
    flex: 1;
    font-size: 13px;
    color: var(--text-muted);
}

.session-row-expand {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.mcq-mock-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mcq-mock-toggle .toggle-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: var(--card);
    color: var(--text-secondary);
    border: none;
    transition: all 0.15s;
}

.mcq-mock-toggle .toggle-btn.active {
    background: var(--accent);
    color: white;
}

.mcq-mock-toggle .toggle-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}

/* ── Study Planner ────────────────────────────────────────── */

.study-planner-timeline {
    position: relative;
}

.plan-phase-group {
    margin-bottom: 32px;
}

.plan-phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

/* P9 fix #1: phase badge contrast.
   In light mode the colour tokens are saturated (--blue = #2663E8) so white
   text passes ≥4.5:1. In dark mode the same tokens are pastel (--blue =
   #6BA8FF) so white only reaches 2.4:1 — switch to dark text. The result is
   ≥7:1 in both modes. */
.plan-phase-badge {
    display: inline-block;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    color: #FFFFFF;
    letter-spacing: 0.01em;
}
.plan-phase-badge.foundation { background: var(--blue); }
.plan-phase-badge.priority { background: var(--amber); }
.plan-phase-badge.consolidation { background: var(--green); }
.plan-phase-badge.revision { background: var(--red); }
[data-theme="dark"] .plan-phase-badge { color: #0F1116; }
[data-theme="dark"] .plan-phase-badge.revision { color: #0F1116; }

.plan-week-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.plan-week-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.plan-week-card.completed {
    border-left-color: var(--green);
    opacity: 0.7;
}

.plan-week-card.completed .plan-week-num,
.plan-week-card.completed .plan-week-subjects {
    text-decoration: line-through;
    color: var(--text-muted);
}

.plan-week-card.overdue {
    border-left-color: var(--red);
    background: color-mix(in srgb, var(--red) 5%, var(--card));
}

.plan-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.plan-week-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.plan-week-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    cursor: pointer;
}

.plan-week-num {
    font-weight: 600;
    font-size: 14px;
}

.plan-week-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-week-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.plan-subject-chip {
    /* P9 fix A2: chip text uses --accent-strong (#B7B2FF in dark mode), and the
       background tint is bumped to 0.28 opacity so the contrast composite
       reaches ≥4.5:1. Light mode tokens already pass. */
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-light);
    color: var(--accent-strong);
    border-radius: 12px;
}
[data-theme="dark"] .plan-subject-chip {
    background: rgba(141, 134, 251, 0.28);
    color: #DAD6FF;
}

.plan-week-targets {
    display: flex;
    gap: 12px;
}

.plan-week-notes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── Plan Week Edit Form ─────────────────────────────────── */

.plan-week-edit {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-week-edit label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.plan-week-edit select,
.plan-week-edit input,
.plan-week-edit textarea {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.plan-week-edit textarea {
    resize: vertical;
    min-height: 48px;
}

.plan-week-edit .plan-edit-row {
    display: flex;
    gap: 10px;
}

.plan-week-edit .plan-edit-row label {
    flex: 1;
}

.plan-week-edit .plan-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.planner-progress-bar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.planner-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.planner-depth-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.planner-depth-label {
    padding: 0 6px;
    white-space: nowrap;
}

.planner-depth-chip {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.planner-depth-chip:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.planner-depth-chip.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    font-weight: 600;
}

@media (max-width: 768px) {
    .plan-week-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .plan-week-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Module Accordion (Quiz Results) ──────────────────────── */

.module-accordion {
    border-bottom: 1px solid var(--border);
}

.module-accordion:last-child {
    border-bottom: none;
}

.accordion-chevron {
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s;
    font-size: 12px;
}

.module-accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 24px;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.module-accordion-body.open {
    max-height: 500px;
    padding: 8px 0 12px 24px;
}

.topic-breakdown-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
}

.topic-breakdown-name {
    min-width: 120px;
    color: var(--text-secondary);
    font-size: 12px;
}

/* ── Session Expand Panel (Analytics History) ─────────────── */

.session-expand-panel {
    padding: 16px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.session-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
    margin-bottom: 12px;
}

.session-row-expand {
    transition: transform 0.2s;
}

/* ── Module Detail Panel (Analytics) ──────────────────────── */

.topic-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.topic-stat-row:last-child {
    border-bottom: none;
}

.topic-stat-name {
    min-width: 140px;
    font-size: 13px;
    font-weight: 500;
}

.module-clickable:hover {
    background: var(--bg);
    border-radius: 4px;
}

.module-question-list {
    max-height: 400px;
    overflow-y: auto;
}

.module-question-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.module-question-item:last-child {
    border-bottom: none;
}

/* ── Mock History Cards ───────────────────────────────────── */

/* ── Curated Mock Cards ─────────────────────────────────── */

.curated-mocks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.curated-mock-paper-group {
    margin-bottom: 4px;
}

.curated-mock-paper-heading {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 12px 0 6px;
}
.curated-mock-paper-heading:first-child { margin-top: 0; }

.curated-mock-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.15s;
}
.curated-mock-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.curated-mock-info { flex: 1; min-width: 0; }
.curated-mock-title { font-weight: 600; font-size: 14px; }
.curated-mock-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.curated-mock-actions { display: flex; gap: 6px; flex-shrink: 0; }

.mock-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mock-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.15s;
}

.mock-history-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    cursor: pointer;
}

.mock-history-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.resit-btn, .resit-analytics-btn {
    flex-shrink: 0;
}

.mock-pool-tracker {
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mock-pool-row {
    display: flex;
    gap: 24px;
}
.mock-pool-paper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mock-pool-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.mock-pool-nums {
    font-size: 13px;
    color: var(--text-muted);
}
.mock-pool-bar {
    height: 6px;
    background: var(--border-light, var(--border));
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
}
.mock-pool-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 999px;
    transition: width 0.4s ease;
}
@media (max-width: 600px) {
    .mock-pool-row { flex-direction: column; gap: 12px; }
}

.mock-history-score {
    font-size: 20px;
    font-weight: 700;
    min-width: 50px;
}

.mock-history-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Subtopic Chips (Notes) ───────────────────────────────── */

.subtopic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.subtopic-chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.subtopic-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.subtopic-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ── Rule Expand/Collapse ─────────────────────────────────── */

.rule-text-collapsed {
    max-height: 80px;
    overflow: hidden;
    position: relative;
}

.rule-text-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, var(--card));
}

.rule-expand-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 0;
    margin-top: 4px;
}

.rule-expand-btn:hover {
    text-decoration: underline;
}

/* ── Loading Skeleton ─────────────────────────────────────── */

@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

.skeleton {
    background: var(--border);
    border-radius: 4px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: var(--border);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line:last-child {
    width: 60%;
}

.skeleton-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
}

/* ── Empty State (consistent pattern) ─────────────────────── */

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

.empty-state h3 {
    margin-bottom: 8px;
    color: var(--text);
}

.empty-state p {
    margin-bottom: 16px;
    font-size: 14px;
}

/* ── Favourites View ─────────────────────────────────────── */

.favourites-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.favourites-toolbar .form-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
}

.favourite-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.favourite-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.favourite-card-body {
    flex: 1;
    min-width: 0;
}

.favourite-card-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.favourite-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.favourite-actions {
    flex-shrink: 0;
}

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

.btn-danger:hover {
    background: var(--red);
    color: white;
}

.btn-danger-muted {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--border);
}

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

@media (max-width: 768px) {
    .favourites-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .favourite-card {
        flex-direction: column;
    }
    .favourite-actions {
        align-self: flex-end;
    }
}

/* ── Study Planner Action Links ──────────────────────────── */

.plan-action-links {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.plan-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.plan-action-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

/* ── Analytics: Trend Indicator ──────────────────────────── */

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.trend-indicator.improving {
    color: var(--green-dark);
}

.trend-indicator.declining {
    color: var(--red);
}

.trend-indicator.stable {
    color: var(--text-muted);
}

/* ── Analytics: Score Histogram ──────────────────────────── */

.score-histogram {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
}

.histogram-bar {
    flex: 1;
    min-width: 0;
    border-radius: 4px 4px 0 0;
    transition: background 0.2s, height 0.4s ease;
}

.histogram-labels {
    display: flex;
    gap: 2px;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.histogram-labels span {
    flex: 1;
    text-align: center;
}

/* ── Entrance Animations ────────────────────────────────── */

.card, .stat-card {
    animation: fadeInUp 0.4s ease-out both;
}

.feature-grid .grid-card { animation: fadeInUp 0.4s ease-out both; }
.feature-grid .grid-card:nth-child(1) { animation-delay: 0s; }
.feature-grid .grid-card:nth-child(2) { animation-delay: 0.04s; }
.feature-grid .grid-card:nth-child(3) { animation-delay: 0.08s; }
.feature-grid .grid-card:nth-child(4) { animation-delay: 0.12s; }
.feature-grid .grid-card:nth-child(5) { animation-delay: 0.16s; }
.feature-grid .grid-card:nth-child(6) { animation-delay: 0.20s; }
.feature-grid .grid-card:nth-child(7) { animation-delay: 0.24s; }
.feature-grid .grid-card:nth-child(8) { animation-delay: 0.28s; }
.feature-grid .grid-card:nth-child(9) { animation-delay: 0.32s; }
.feature-grid .grid-card:nth-child(10) { animation-delay: 0.36s; }
.feature-grid .grid-card:nth-child(11) { animation-delay: 0.40s; }
.feature-grid .grid-card:nth-child(12) { animation-delay: 0.44s; }

.dashboard-stats-row .stat-card:nth-child(1) { animation-delay: 0s; }
.dashboard-stats-row .stat-card:nth-child(2) { animation-delay: 0.06s; }
.dashboard-stats-row .stat-card:nth-child(3) { animation-delay: 0.12s; }

.quiz-option {
    animation: slideInRight 0.3s ease-out both;
}
.quiz-option:nth-child(1) { animation-delay: 0s; }
.quiz-option:nth-child(2) { animation-delay: 0.05s; }
.quiz-option:nth-child(3) { animation-delay: 0.10s; }
.quiz-option:nth-child(4) { animation-delay: 0.15s; }
.quiz-option:nth-child(5) { animation-delay: 0.20s; }

.quiz-option.correct {
    animation: correctPop 0.4s ease;
}

.quiz-option.incorrect {
    animation: shake 0.3s ease;
}

.nav-item.active {
    transition: all 0.25s ease;
}

/* ── Donut Chart ────────────────────────────────────────── */

.donut-chart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donut-chart svg {
    transform: rotate(-90deg);
}

.donut-chart .donut-center {
    position: absolute;
    text-align: center;
}

.donut-chart .donut-center .donut-pct {
    font-family: 'Baloo 2', cursive;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.donut-chart .donut-center .donut-label {
    font-size: 11px;
    color: var(--text-muted);
}

.donut-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Grid Card Icon Circle ──────────────────────────────── */

.grid-card-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    transition: transform 0.2s;
}

.grid-card:hover .grid-card-icon-circle {
    transform: scale(1.1);
}

.grid-card-icon-circle svg {
    width: 22px;
    height: 22px;
}

/* ── Countdown Gradient ─────────────────────────────────── */

.countdown-gradient {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

.countdown-gradient .countdown-days {
    font-family: 'Baloo 2', cursive;
    font-size: 64px;
    font-weight: 800;
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

.countdown-gradient .countdown-label {
    color: rgba(255,255,255,0.85);
}

/* ── Well Done Banner ───────────────────────────────────── */

.well-done-banner {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: scaleIn 0.4s ease-out;
    font-family: 'Baloo 2', cursive;
    font-size: 20px;
    font-weight: 700;
}

.well-done-banner.pass {
    background: var(--green-bg);
    color: var(--green-dark);
    border: 1px solid var(--green);
}

.well-done-banner.fail {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid var(--red);
}

/* ── Nav Section Divider ────────────────────────────────── */

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 12px;
}

/* ── Full-Screen Note Reader ──────────────────────────────── */

.heading-anchor {
    display: none;
}

.note-reader {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    animation: slideInRight 0.3s ease-out;
}

.note-reader-progress {
    height: 3px;
    background: var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.note-reader-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-gradient);
    transition: width 0.15s ease;
}

.note-reader-topbar {
    position: sticky;
    top: 3px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--card);
    border-bottom: 2px solid var(--purple);
    box-shadow: var(--shadow);
}

.note-reader-back {
    flex-shrink: 0;
}

.note-reader-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.note-reader-position {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.note-reader-body {
    display: flex;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.note-reader-toc {
    width: 220px;
    min-width: 220px;
    padding: 20px 16px;
    border-right: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    background: var(--bg);
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    transition: width 0.2s, min-width 0.2s, padding 0.2s, opacity 0.2s;
}

.note-reader-toc.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.note-reader-toc-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.note-reader-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.note-reader-toc li {
    margin-bottom: 4px;
}

.note-reader-toc li.toc-indent {
    padding-left: 16px;
}
.note-reader-toc li.toc-indent-2 {
    padding-left: 32px;
    font-size: 0.85em;
}

.note-reader-toc a {
    display: block;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1.4;
}

.note-reader-toc a:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.note-reader-content {
    flex: 1;
    max-width: var(--measure-reading);
    margin: 0 auto;
    padding: 40px 44px 96px;
    background: var(--card);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.02);
}

.note-reader-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, var(--purple-bg) 0%, transparent 100%);
    padding: 8px 12px;
    border-radius: 6px;
}

.note-reader-h1 {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--text);
}

.note-reader-rendered {
    font-size: 16.5px;
    line-height: 1.85;
}

.note-reader-rendered .rendered-content p {
    margin-bottom: 14px;
    line-height: 1.8;
}

.note-reader-rendered .rendered-content h2,
.note-reader-rendered .rendered-content h3 {
    scroll-margin-top: 80px;
}

.note-reader-rendered .rendered-content h2 {
    font-family: 'Baloo 2', cursive;
    font-size: 20px;
    margin: 28px 0 10px;
    color: var(--text);
    border-bottom: 2px solid var(--purple);
    padding-bottom: 8px;
}

.note-reader-rendered .rendered-content h3 {
    font-size: 17px;
    margin: 22px 0 8px;
    border-left: 3px solid var(--purple);
    padding-left: 12px;
}

.note-reader-rendered .rendered-content .statute-ref {
    background: var(--accent-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--accent);
}

.note-reader-rendered .rendered-content .case-ref {
    color: var(--green-dark);
    font-weight: 500;
    background: var(--green-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-style: italic;
}

.note-reader-rendered .content-blockquote {
    border-left-width: 4px;
    border-left-color: var(--purple);
}

.note-reader-rendered .callout {
    padding: 18px 20px;
    border-radius: 10px;
}

.note-reader-mark-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.note-reader-mark-read:hover {
    border-color: var(--green);
    color: var(--green);
}
.note-reader-mark-read.is-read {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    border-color: var(--green);
}
.note-reader-mark-read.is-read:hover {
    background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
.note-reader-mark-read:disabled {
    opacity: 0.5;
    pointer-events: none;
}
@media (max-width: 600px) {
    .mark-read-label { display: none; }
    .note-reader-mark-read { padding: 4px 8px; }
}

.note-reader-listen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.note-reader-listen:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.note-reader-listen.is-playing {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: var(--accent);
}
.listen-icon {
    font-size: 10px;
}
@media (max-width: 600px) {
    .listen-label { display: none; }
    .note-reader-listen { padding: 4px 8px; }
}

.note-reader-nav-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

.related-notes-section {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.related-notes-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.related-note-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}

.related-note-link:hover {
    background: var(--accent-light);
}

/* Mobile: hide TOC, reduce padding */
@media (max-width: 768px) {
    .note-reader-toc {
        display: none;
    }
    .note-reader-content {
        padding: 16px;
    }
    .note-reader-h1 {
        font-size: 22px;
    }
    .note-reader-rendered {
        font-size: 15px;
    }
    #reader-toc-toggle {
        display: none;
    }
}

/* ── Progress Ring (Dashboard) ────────────────────────────── */

.progress-ring-container {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 4;
}

.progress-ring-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    animation: drawCircle 1s ease-out forwards;
}

.progress-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-ring-value {
    font-family: 'Baloo 2', cursive;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

/* ── Toast Notifications ───────────────────────────────────── */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    transform: translateX(120%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 360px;
}

.toast-visible {
    transform: translateX(0);
}

.toast-exit {
    opacity: 0;
    transform: translateX(120%);
}

.toast-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.toast-success { border-left: 4px solid var(--green-dark); }
.toast-success .toast-icon { color: var(--green-dark); }
.toast-error { border-left: 4px solid var(--red); }
.toast-error .toast-icon { color: var(--red); }
.toast-info { border-left: 4px solid var(--blue); }
.toast-info .toast-icon { color: var(--blue); }
.toast-warn { border-left: 4px solid var(--amber); }
.toast-warn .toast-icon { color: var(--amber); }

/* ── Gauge Widget ──────────────────────────────────────────── */

.gauge-container {
    position: relative;
    width: 120px;
    height: 70px;
    margin: 0 auto;
}

.gauge-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease;
}

.gauge-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.gauge-value {
    font-family: 'Baloo 2', cursive;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.gauge-sublabel {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ── Module question expand (analytics drill-down) ──────── */

.module-question-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.module-question-item:last-child {
    border-bottom: none;
}

/* ── Quiz Question Source Badges ────────────────────────── */

.q-source-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.q-source-sra { background: #065F46; color: #D1FAE5; }
.q-source-revision { background: var(--blue-bg); color: var(--accent); }

/* ── Source Bank Selector (Quiz Config) ─────────────────── */

.source-bank-selector { margin: 1rem 0; }
.source-bank-selector .config-label { font-weight: 600; margin-bottom: 0.5rem; display: block; }
.bank-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bank-chips small { opacity: 0.7; font-size: 0.75rem; }

/* ── Dark Mode: Source Badges ──────────────────────────── */

[data-theme="dark"] .source-badge.study_notes_src { background: rgba(124,58,237,0.25); color: #C4B5FD; }

/* ── Confetti Celebration ──────────────────────────────── */

@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    top: -10px;
    animation: confetti-fall 2.5s ease-in forwards;
}

.confetti-piece:nth-child(odd) { border-radius: 50%; }
.confetti-piece:nth-child(even) { border-radius: 2px; }

/* ── Heatmap Row Stagger ───────────────────────────────── */

.heatmap-row:nth-child(1) { animation-delay: 0s; }
.heatmap-row:nth-child(2) { animation-delay: 0.04s; }
.heatmap-row:nth-child(3) { animation-delay: 0.08s; }
.heatmap-row:nth-child(4) { animation-delay: 0.12s; }
.heatmap-row:nth-child(5) { animation-delay: 0.16s; }
.heatmap-row:nth-child(6) { animation-delay: 0.20s; }
.heatmap-row:nth-child(7) { animation-delay: 0.24s; }
.heatmap-row:nth-child(8) { animation-delay: 0.28s; }
.heatmap-row:nth-child(9) { animation-delay: 0.32s; }
.heatmap-row:nth-child(10) { animation-delay: 0.36s; }
.heatmap-row:nth-child(11) { animation-delay: 0.40s; }
.heatmap-row:nth-child(12) { animation-delay: 0.44s; }
.heatmap-row:nth-child(13) { animation-delay: 0.48s; }
.heatmap-row:nth-child(14) { animation-delay: 0.52s; }

/* ============================================================
   AI Tutor
   ============================================================ */

.tutor-scope-row {
    margin: 0 0 10px 0;
}

.tutor-scope-chip {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light, rgba(0, 123, 255, 0.08));
    border: 1px solid var(--border);
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.tutor-controls {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tutor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.tutor-toggle input[type="checkbox"] { accent-color: var(--accent); }

.tutor-challenge {
    border-left: 4px solid #9333ea;
    background: rgba(147, 51, 234, 0.06);
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 12px;
}
.tutor-challenge p { margin: 4px 0; font-size: 14px; line-height: 1.5; }

.tutor-select {
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    min-width: 200px;
}

.tutor-suggestions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.tutor-suggestions-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tutor-chip {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.tutor-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.tutor-input-area {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.tutor-input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    transition: border-color 0.2s;
}

.tutor-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.tutor-ask-btn {
    padding: 12px 24px;
    white-space: nowrap;
}

.tutor-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ── Answer Card ──────────────────────────────────────── */

.tutor-answer-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tutor-query-echo {
    padding: 14px 20px;
    background: var(--bg-secondary, var(--card));
    border: 1.5px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 15px;
}

.tutor-meta {
    display: inline-block;
    margin-left: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.tutor-section {
    padding: 16px 20px;
    border: 1.5px solid var(--border);
    border-top: none;
    background: var(--card);
}

.tutor-section:last-child,
.tutor-feedback {
    border-radius: 0 0 var(--radius) var(--radius);
}

.tutor-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--accent);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light, var(--border));
}

/* Definition section */
.tutor-def-term {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.tutor-def-body {
    font-size: 14px;
    line-height: 1.6;
}

/* Principle section */
.tutor-principle-body {
    font-size: 14px;
    line-height: 1.6;
}

/* Authorities */
.tutor-authority-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tutor-authority {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}

.tutor-authority:last-child {
    border-bottom: none;
}

.tutor-authority-badge {
    margin-right: 8px;
}

.tutor-year {
    color: var(--text-secondary);
    font-size: 13px;
}

.tutor-citation-ref {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 4px;
}

.tutor-authority-principle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Exam Traps */
.tutor-trap-warning {
    border-left: 4px solid var(--amber) !important;
    background: var(--amber-bg);
}

.tutor-trap-warning .tutor-section-header {
    color: var(--amber);
}

.tutor-trap-item {
    font-size: 14px;
    line-height: 1.6;
}

.tutor-trap-item + .tutor-trap-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.tutor-trap-mistake {
    margin: 4px 0;
}

.tutor-trap-correct {
    margin: 4px 0;
}

/* Comparisons */
.tutor-comparison-item + .tutor-comparison-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.tutor-comparison-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.tutor-comparison-vs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
}

.tutor-comp-a, .tutor-comp-b {
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--accent-light);
    font-weight: 500;
}

.tutor-comp-vs {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.tutor-comparison-diff {
    font-size: 13px;
    line-height: 1.6;
}

.tutor-comparison-confusion {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Study Notes */
.tutor-note-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}

.tutor-note-item:last-child {
    border-bottom: none;
}

.tutor-note-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--accent);
    font-weight: 500;
    font-size: 14px;
}

.tutor-note-link:hover {
    text-decoration: underline;
}

.tutor-note-preview {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Practice Questions */
.tutor-question-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}

.tutor-question-item:last-child {
    border-bottom: none;
}

.tutor-question-text {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
}

.tutor-question-explanation {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tutor-question-meta {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.tutor-practice-links {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tutor-practice-link {
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.tutor-practice-link:hover {
    text-decoration: underline;
}

/* Citation badge */
.tutor-citation {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent-light);
    color: var(--accent);
    text-decoration: none;
    transition: background 0.15s;
}

.tutor-citation:hover {
    background: var(--accent);
    color: white;
}

/* Feedback row */
.tutor-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1.5px solid var(--border);
    border-top: none;
    background: var(--card);
    font-size: 13px;
    color: var(--text-secondary);
}

.tutor-fb-btn {
    padding: 4px 10px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s;
}

.tutor-fb-btn:hover {
    border-color: var(--accent);
    transform: scale(1.15);
}

.tutor-fb-thanks {
    color: var(--green-dark, var(--green));
    font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {
    .tutor-input-area {
        flex-direction: column;
    }

    .tutor-ask-btn {
        width: 100%;
    }

    .tutor-suggestions {
        gap: 6px;
    }

    .tutor-chip {
        font-size: 12px;
        padding: 4px 10px;
    }

    .tutor-comparison-vs {
        flex-direction: column;
        gap: 4px;
    }
}


/* ── Onboarding Tutorial ─────────────────────────────────── */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    transition: background 0.3s ease;
}
.onboarding-spotlight {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    z-index: 10001;
    transition: all 0.3s ease;
    pointer-events: none;
}
.onboarding-tooltip {
    position: fixed;
    z-index: 10002;
    background: #1e1b2e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 340px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    color: #f0f0f5;
}
[data-theme="light"] .onboarding-tooltip {
    background: #faf7f2;
    border-color: rgba(120,90,50,0.15);
    color: #2c2417;
    box-shadow: 0 12px 40px rgba(80,60,30,0.15);
}
.onboarding-tooltip.onboarding-centered {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    max-width: 420px;
    text-align: center;
}
.onboarding-step-count {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #8b5cf6);
    margin-bottom: 6px;
}
.onboarding-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.onboarding-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin-bottom: 18px;
}
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.onboarding-nav {
    display: flex;
    gap: 8px;
}
.onboarding-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    cursor: pointer;
    transition: all 0.15s ease;
}
.onboarding-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}
.onboarding-btn-primary {
    background: var(--accent, #7c3aed);
    color: #fff;
    border-color: var(--accent, #7c3aed);
}
.onboarding-btn-primary:hover {
    background: var(--accent-hover, #6d28d9);
    border-color: var(--accent-hover, #6d28d9);
}
.onboarding-skip {
    opacity: 0.5;
    border: none;
}
.onboarding-skip:hover {
    opacity: 1;
}

/* ── Settings Panel ──────────────────────────────────────── */
.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
}
.settings-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9001;
    background: #1e1b2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px 28px;
    width: 440px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    color: #f0f0f5;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .settings-panel {
    background: #faf7f2;
    border-color: rgba(120,90,50,0.15);
    color: #2c2417;
    box-shadow: 0 16px 48px rgba(80,60,30,0.15);
}
.settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.settings-head h2 {
    font-size: 20px;
    font-weight: 700;
}
.settings-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
}
.settings-close:hover { color: var(--text); }
.settings-section {
    margin-bottom: 20px;
}
.settings-section h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #8b5cf6);
    margin-bottom: 12px;
}
.settings-field {
    margin-bottom: 14px;
}
.settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.settings-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.settings-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    min-width: 0;
}
.settings-input:focus {
    outline: none;
    border-color: var(--accent);
}
.settings-range {
    flex: 1;
    accent-color: var(--accent, #7c3aed);
}
.settings-range-val {
    font-size: 13px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    color: var(--text-secondary);
}
.settings-msg {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
}
.settings-msg-ok { color: var(--green); }
.settings-msg-err { color: var(--red); }
.settings-plan-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.btn-upgrade {
    font-size: 12px;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Report Menu ─────────────────────────────────────────── */
.report-menu {
    margin-top: 8px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.report-menu-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 100%;
    margin-bottom: 2px;
}
.report-menu button {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
}
.report-menu button:hover {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 8%, transparent);
}

/* ── Study Notes v2 — two-pane browse ──────────────────────── */
.notes2-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
.notes2-toolbar-scope {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
    min-height: 18px;
}
.notes2-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.notes2-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}
.notes2-search svg { color: var(--text-muted); flex-shrink: 0; }
.notes2-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
}
.notes2-source-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.notes2-source-chips::-webkit-scrollbar { height: 4px; }
.notes2-source-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.notes2-source-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
                border-color 0.15s var(--ease-out), transform 0.12s var(--ease-out),
                box-shadow 0.15s var(--ease-out);
    white-space: nowrap;
}
.notes2-source-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}
.notes2-source-chip:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.06s;
}
.notes2-source-chip.active {
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    border-color: var(--accent);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(84,72,217,0.22);
}
[data-theme="dark"] .notes2-source-chip.active {
    background: #4A40C4;
    color: #FFFFFF;
    border-color: #4A40C4;
}

.notes2-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
    min-height: calc(100vh - 170px);
}
.notes2-sidebar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.notes2-side-section + .notes2-side-section { border-top: 1px solid var(--border-light); }
.notes2-side-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 1;
}
.notes2-side-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-left: 2px solid transparent;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.notes2-side-item:hover {
    background: var(--bg);
    border-left-color: var(--accent);
}
.notes2-side-item:active {
    background: var(--accent-soft);
    transition-duration: 0.06s;
}
.notes2-side-item.active {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 600;
    border-left-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-light);
}
.notes2-side-item.active .notes2-side-count { color: var(--accent); }
.notes2-side-name { font-size: 13.5px; line-height: 1.3; }
.notes2-side-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.notes2-side-bar {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    margin-top: 2px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.notes2-side-bar .fill { display: block; height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.notes2-side-bar .fill.band-green { background: var(--green); }
.notes2-side-bar .fill.band-amber { background: var(--amber, #f59e0b); }
.notes2-side-bar .fill.band-red { background: var(--red); }

.notes2-main {
    min-width: 0;
}

/* Landing */
.notes2-landing-head { margin-bottom: 20px; }
.notes2-landing-head h1 { font-size: 28px; margin-bottom: 4px; }
.notes2-section { margin-bottom: 28px; }
.notes2-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.notes2-recent-grid,
.notes2-subject-grid,
.notes2-suggest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.notes2-recent-card,
.notes2-subject-card,
.notes2-suggest-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
}
.notes2-recent-card:hover,
.notes2-subject-card:hover,
.notes2-suggest-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.notes2-recent-title { font-weight: 600; font-size: 14px; line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notes2-recent-meta { font-size: 12px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.notes2-recent-meta .dot { opacity: 0.5; }
.notes2-recent-progress { margin-top: 10px; height: 3px; background: var(--border-light); border-radius: 2px; overflow: hidden; }
.notes2-recent-progress .fill { height: 100%; background: var(--accent); }

.notes2-subject-name,
.notes2-suggest-name { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.notes2-subject-meta,
.notes2-suggest-meta { font-size: 12px; color: var(--text-secondary); }
.notes2-subject-bar {
    margin-top: 8px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.notes2-subject-bar .fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.notes2-subject-bar .fill.band-green { background: var(--green); }
.notes2-subject-bar .fill.band-amber { background: var(--amber, #f59e0b); }
.notes2-subject-bar .fill.band-red { background: var(--red); }

/* Subject view */
.notes2-subject-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}
.notes2-subject-head h1 { font-size: 26px; margin: 4px 0 6px; }
.notes2-crumb { font-size: 12px; color: var(--text-muted); }
.notes2-crumb a { color: var(--text-secondary); text-decoration: none; }
.notes2-crumb a:hover { color: var(--accent); }
.notes2-crumb .sep { margin: 0 6px; opacity: 0.6; }
.notes2-subject-head-bar {
    flex: 0 0 220px;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.notes2-subject-head-bar .fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.notes2-topic-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.notes2-pill {
    padding: 6px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.notes2-pill:hover { border-color: var(--accent); color: var(--accent); }
.notes2-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.notes2-pill small { opacity: 0.75; margin-left: 4px; font-size: 12px; }

.notes2-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.notes2-note-card {
    text-align: left;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.notes2-note-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.notes2-note-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.notes2-note-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notes2-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.notes2-read-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.notes2-read-dot.read {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

@media (max-width: 860px) {
    .notes2-layout { grid-template-columns: 1fr; }
    .notes2-sidebar { position: static; max-height: none; }
    .notes2-subject-head { flex-direction: column; align-items: flex-start; }
    .notes2-subject-head-bar { width: 100%; flex: 0 0 auto; }
}

/* ── The Lex Library ─────────────────────────────────────── */

.lex-library-hero {
    margin-bottom: 32px;
}
.lex-library-hero h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.lex-library-hero .lex-subtitle {
    color: var(--text-muted);
    font-size: 14px;
}

.lex-paper-section { margin-bottom: 28px; }
.lex-paper-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
    padding-left: 2px;
}

.lex-volume-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.lex-volume-card {
    display: flex;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lex-volume-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.lex-volume-spine {
    width: 4px;
    flex-shrink: 0;
    background: var(--accent);
}
.lex-volume-spine.flk2 { background: var(--purple, #8b5cf6); }
.lex-volume-body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}
.lex-volume-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lex-volume-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.lex-volume-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.lex-volume-bar .fill {
    height: 100%;
    border-radius: 2px;
    min-width: 3px;
    background: var(--accent);
    transition: width 0.3s ease;
}

/* ── Accordion: chapter-index ── */

.lex-outline { display: flex; flex-direction: column; gap: 2px; }

.lex-chapter {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
}
.lex-chapter + .lex-chapter { margin-top: 0; }

.lex-chapter-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    text-align: left;
    transition: background 0.1s;
}
.lex-chapter-header:hover { background: var(--hover, rgba(255,255,255,0.03)); }

.lex-chapter-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.lex-chapter.open .lex-chapter-num {
    background: var(--accent);
    color: #fff;
}

.lex-chapter-info { flex: 1; min-width: 0; }
.lex-chapter-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.lex-chapter-stats {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.lex-chapter-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.lex-chapter.open .lex-chapter-chevron { transform: rotate(90deg); }

.lex-chapter-body {
    display: none;
    border-top: 1px solid var(--border);
}
.lex-chapter.open .lex-chapter-body { display: block; }

.lex-note-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px 9px 54px;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    cursor: pointer;
    font: inherit;
    color: var(--text);
    text-align: left;
    transition: background 0.1s;
}
.lex-note-row:last-child { border-bottom: none; }
.lex-note-row:hover { background: var(--hover, rgba(255,255,255,0.03)); }

.lex-note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    background: transparent;
}
.lex-note-dot.read {
    background: var(--green);
    border-color: var(--green);
}

.lex-note-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}

.lex-source-badge {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
}
.lex-source-badge.core { background: rgba(99,102,241,0.12); color: #818cf8; }
.lex-source-badge.workshop { background: rgba(245,158,11,0.10); color: #fbbf24; }
.lex-source-badge.personal { background: rgba(34,197,94,0.10); color: #4ade80; }

[data-theme="light"] .lex-source-badge.core { color: #4f46e5; }
[data-theme="light"] .lex-source-badge.workshop { color: #b45309; }
[data-theme="light"] .lex-source-badge.personal { color: #16a34a; }

.lex-note-words {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Lex Library: subject header ── */
.lex-subject-header {
    margin-bottom: 20px;
}
.lex-subject-header h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    font-style: italic;
    margin: 4px 0 6px;
}
.lex-subject-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.lex-subject-bar {
    flex: 1;
    max-width: 240px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.lex-subject-bar .fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

/* ── Lex Library mobile ── */
@media (max-width: 860px) {
    .lex-volume-grid { grid-template-columns: 1fr; }
    .lex-note-row { padding-left: 16px; }
    .lex-note-words { display: none; }
    .lex-library-hero h1 { font-size: 26px; }
}

/* ============================================================
   Design polish layer — unified radius, shadows, rhythm, chips
   (appended last to win the cascade where it needs to)
   ============================================================ */

:root {
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
}

/* Card surface: one radius, one shadow */
.card,
.stat-card,
.subject-card,
.grid-card,
.focus-card {
    border-radius: var(--radius);
}

/* Page header: softer, more room */
.page-header {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.page-header h1 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 6px;
}

.page-header p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 72ch;
}

/* Section heading rhythm */
h2 { margin-bottom: 6px; }
h3 { margin-bottom: 4px; }

/* Section separators inside pages */
.section + .section,
.page-section + .page-section {
    margin-top: var(--space-8);
}

/* Empty states: less harsh, more inviting */
.empty-state {
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 48px 24px;
}
.empty-state h3 {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}
.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 48ch;
    margin: 4px auto 0;
}

/* Filter bar: more air, consistent alignment */
.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Chips: tighter radius family, clearer hover */
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
}
.filter-chip:hover:not(.is-disabled):not(.active) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}
.filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(79,70,229,0.25);
}
.filter-chip.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Subject chip — same shape, neutral colour */
.subject-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.subject-chip:hover:not(.is-disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}
.subject-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.subject-chip.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Consistent link style */
a.link, .link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.12s;
}
a.link:hover, .link:hover {
    border-bottom-color: var(--accent);
}

/* Buttons: consistent min-height + rhythm */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    min-height: 36px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.btn-lg { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover {
    background: var(--border-light);
    color: var(--text);
}
.btn-secondary {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

/* Tighter, clearer badges */
.badge {
    border-radius: 999px;
    padding: 2px 10px;
    letter-spacing: 0.03em;
}

/* Two-pane detail: breathe a little more */
.pane-detail {
    padding: 28px 32px;
    border-radius: var(--radius-lg);
}
.pane-list {
    border-radius: var(--radius);
    padding: 10px;
}
.pane-list-item {
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

/* Breadcrumbs: slightly lighter */
.breadcrumbs {
    font-size: 13px;
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: var(--text-secondary);
}
.breadcrumbs a:hover {
    color: var(--accent);
}

/* Consistent rendered content surface */
.rendered-content {
    line-height: 1.7;
    color: var(--text);
}
.rendered-content p { margin-bottom: 12px; }
.rendered-content ul, .rendered-content ol { margin: 10px 0 14px; }

/* Key-value metadata row */
.kv-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 16px;
    font-size: 14px;
    line-height: 1.6;
}
.kv-row > dt { color: var(--text-muted); font-weight: 500; }
.kv-row > dd { color: var(--text); }

/* Focus-visible contrast on chips + cards */
.filter-chip:focus-visible,
.subject-chip:focus-visible,
.pane-list-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Softer hover lift for all clickable cards */
.card:hover,
.stat-card:hover,
.subject-card:hover,
.grid-card:hover {
    transform: translateY(-2px);
}

/* ============================================================
   Dashboard coherence — Today's Brief hero + vitals + readiness
   ============================================================ */

.dashboard-greeting h1 {
    font-family: var(--font-display, inherit);
    font-size: clamp(26px, 3.2vw, 36px);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.dashboard-greeting p {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 62ch;
}

.todays-brief {
    position: relative;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 28px 24px;
    margin: 20px 0 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.todays-brief::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px; width: 100%;
    background: var(--accent-gradient);
    opacity: 0.85;
}
.todays-brief.brief-empty::before,
.todays-brief.brief-weakest::before {
    background: linear-gradient(90deg, var(--amber) 0%, var(--accent) 100%);
}
.todays-brief.brief-done::before {
    background: linear-gradient(90deg, var(--green) 0%, var(--green-dark, var(--green)) 100%);
}
.brief-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.todays-brief.brief-done .brief-eyebrow { color: var(--green); }
.todays-brief.brief-weakest .brief-eyebrow,
.todays-brief.brief-empty .brief-eyebrow { color: var(--amber, #D97706); }
.brief-headline { margin-bottom: 12px; }
.brief-subject {
    font-family: var(--font-display, inherit);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.15;
}
.brief-week {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}
.brief-note {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text);
    margin: 14px 0 16px;
    line-height: 1.55;
}
.brief-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 18px;
    align-items: center;
}
.brief-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.brief-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.brief-actions .btn { min-height: 40px; }
.brief-planner-link {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    padding: 8px 4px;
    transition: color 140ms var(--ease-out, ease);
}
.brief-planner-link:hover { color: var(--accent); }

/* Other angles today — pill links to alternative rotating briefs. */
.brief-other-angles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.brief-other-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
}
.brief-other-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 140ms var(--ease-out, ease), transform 140ms var(--ease-out, ease);
    line-height: 1.25;
}
.brief-other-pill:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.brief-other-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.brief-other-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 640px) {
    .todays-brief { padding: 20px 18px; }
    .brief-planner-link { margin-left: 0; }
    .brief-actions .btn { flex: 1 1 auto; min-width: 140px; }
    .brief-other-angles { margin-top: 14px; padding-top: 10px; }
}

/* Vitals strip — compact horizontal summary */
.vitals-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 8px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.vitals-cell {
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}
.vitals-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vitals-value {
    font-family: var(--font-display, inherit);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--text);
}
.vitals-value.is-good { color: var(--green); }
.vitals-value.is-warn { color: var(--amber, #D97706); }
.vitals-suffix {
    font-family: var(--font-body, inherit);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
    letter-spacing: 0;
}
.vitals-hint {
    font-size: 12px;
    color: var(--text-muted);
}
.vitals-divider {
    width: 1px;
    background: var(--border);
    margin: 8px 0;
}
@media (max-width: 900px) {
    .vitals-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 14px;
    }
    .vitals-divider { display: none; }
    .vitals-cell { border-bottom: 1px solid var(--border); padding: 10px 12px; }
    .vitals-cell:nth-last-child(-n+2) { border-bottom: none; }
}

/* Readiness row — FLK1/FLK2 gauges */
.readiness-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.readiness-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform 160ms var(--ease-out, ease), box-shadow 160ms var(--ease-out, ease);
}
.readiness-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.readiness-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
}
.readiness-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
}
.readiness-sub {
    font-size: 12px;
    color: var(--text-muted);
}
.readiness-footnote {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 640px) {
    .readiness-row { grid-template-columns: 1fr; }
}

/* Section header pairs — h2 with a subtitle */
.section-header {
    margin: 24px 0 14px;
}
.section-header h2 {
    font-family: var(--font-display, inherit);
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.section-sub {
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 68ch;
    margin: 0;
}

/* Priority ledger — heatmap with a calmer surface */
.priority-ledger .heatmap-row:last-child { border-bottom: none; }

/* Exam-date setter when no sitting is set */
.exam-date-setter {
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin: 0 0 24px;
}
.exam-date-head {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 10px;
}
.exam-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.exam-date-row select,
.exam-date-row input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    min-height: 40px;
}
.exam-date-row select:focus,
.exam-date-row input[type="date"]:focus {
    outline: 2px solid var(--color-focus, var(--accent));
    outline-offset: 2px;
    border-color: var(--accent);
}
.exam-date-sep { color: var(--text-muted); font-size: 12px; }

@media (max-width: 640px) {
    .exam-date-row { flex-direction: column; align-items: stretch; }
    .exam-date-row .btn { width: 100%; }
}

/* ============================================================
   Slides — mode pills + callouts (planner-driven)
   ============================================================ */

.slides-mode-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 16px;
}
.slides-mode-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    min-height: 64px;
    transition: background 140ms var(--ease-out, ease), border-color 140ms var(--ease-out, ease), transform 140ms var(--ease-out, ease);
    font-family: inherit;
    color: var(--text);
}
.slides-mode-pill:hover:not(.disabled) {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.slides-mode-pill.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.slides-mode-pill.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: transparent;
    border-style: dashed;
}
.slides-mode-pill .pill-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.slides-mode-pill.disabled .pill-kicker { color: var(--text-muted); }
.slides-mode-pill .pill-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.slides-mode-pill:focus-visible {
    outline: 2px solid var(--color-focus, var(--accent));
    outline-offset: 2px;
}
@media (max-width: 720px) {
    .slides-mode-bar { grid-template-columns: 1fr; }
}

.slides-callout {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.slides-callout.callout-locked { border-left-color: var(--amber, #D97706); background: var(--accent-soft); }
.slides-callout.callout-revision { border-left-color: var(--red, #DC2626); }
.slides-callout.callout-browse { border-left-color: var(--text-muted); }
.slides-callout .callout-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
.slides-callout.callout-locked .callout-eyebrow { color: var(--amber, #D97706); }
.slides-callout.callout-revision .callout-eyebrow { color: var(--red, #DC2626); }
.slides-callout.callout-browse .callout-eyebrow { color: var(--text-muted); }
.slides-callout .callout-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 2px;
}
.slides-callout .callout-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}
.slides-callout .callout-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
.slides-callout kbd {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

/* ============================================================
   Polish — 2026.04.19 design pass
   Cases, Statutes, Quiz, Notes breadcrumbs, section rhythm
   ============================================================ */

/* ── Cases list card — parties dominate, citation in tabular small-caps ── */
.case-list-item {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.case-list-parties {
    font-family: 'Baloo 2', cursive;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    letter-spacing: -0.01em;
}
.case-list-item.active .case-list-parties { color: var(--accent); }
.case-list-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.case-list-citation {
    /* P9 fix #7: drop uppercase. Citations preserve original mixed case for
       OSCOLA conformance. */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.case-list-subject {
    color: var(--text-muted);
    font-weight: 500;
}
.case-list-subject::before {
    content: "·";
    padding-right: 8px;
    color: var(--border-strong);
}

/* ── Case detail — parties dominant, citation small-caps, ratio italic ── */
.case-detail-heading { flex: 1; min-width: 0; }
.case-parties {
    font-family: 'Baloo 2', cursive;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 8px;
}
.case-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.case-citation {
    /* P9 fix #7: drop text-transform:uppercase. Legal citation style is mixed
       case ([1990] Ch 433, not [1990] CH 433). The previous all-caps form was
       not OSCOLA-conformant and read as amateurish. */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.case-court, .case-year {
    font-weight: 500;
    color: var(--text-secondary);
}
.case-meta-sep {
    color: var(--border-strong);
    font-weight: 400;
}
.case-meta-chip { margin-left: 4px; }

/* Ratio: italic, quoted feel */
.case-field-ratio .case-field-value {
    font-style: italic;
    font-size: 15px;
    color: var(--text);
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    line-height: 1.65;
}

/* Significance: muted callout */
.case-field-significance .case-field-value {
    background: var(--callout-bg);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--text-muted);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Generic case-field spacing */
.case-field + .case-field { margin-top: 14px; }
.case-field-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* ── Statutes: tighter hierarchy, section numbers monospace ── */
.statute-tree { gap: 10px; }

.statute-act {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 180ms var(--ease-out, ease), border-color 180ms var(--ease-out, ease);
}
.statute-act:hover { border-color: var(--border-strong); }
.statute-act.open { box-shadow: var(--shadow); border-color: var(--border-strong); }

.statute-act-header {
    padding: 14px 18px !important;
}
.statute-act-title {
    font-family: 'Baloo 2', cursive;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
}
.statute-act-meta {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted) !important;
}

.statute-section {
    padding: 12px 14px !important;
    border-color: var(--border-light) !important;
    background: var(--card) !important;
    transition: border-color 140ms var(--ease-out, ease), background 140ms var(--ease-out, ease);
}
.statute-section:hover {
    border-color: var(--border-strong) !important;
    background: var(--bg-subtle) !important;
}

.statute-section-head strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
    text-transform: uppercase;
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 4px;
}

.statute-section-body {
    font-size: 13.5px !important;
    line-height: var(--leading-snug) !important;
    color: var(--text) !important;
    margin-top: 4px;
}

.statute-section-meta {
    margin-top: 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
}

.statute-ext-link a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Quiz: flow cards — elevation parity + stronger h3 hierarchy ── */
.flow-card {
    padding: 22px 24px !important;
    border-width: 1px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 180ms var(--ease-out, ease),
                box-shadow 220ms var(--ease-out, ease),
                transform 180ms var(--ease-out, ease) !important;
}
.flow-card:hover {
    box-shadow: var(--shadow) !important;
    transform: translateY(-1px) !important;
}
.flow-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    line-height: 1 !important;
}
.flow-card-content h3 {
    font-family: 'Baloo 2', cursive;
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px !important;
}
.flow-card-content p {
    font-size: 13px !important;
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

.bank-mode-options .mode-option {
    padding: 14px 18px !important;
    border-radius: var(--radius-sm) !important;
}
.bank-mode-options .mode-option h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--text);
}
.bank-mode-options .mode-option p {
    font-size: 12.5px !important;
    line-height: var(--leading-snug);
}
.bank-mode-options .mode-option.selected h3 { color: var(--accent); }

.paper-option {
    padding: 18px 22px !important;
    box-shadow: var(--shadow-sm);
}
.paper-option h3 {
    font-family: 'Baloo 2', cursive;
    font-size: 15.5px !important;
    letter-spacing: -0.01em;
    font-weight: 700 !important;
}

/* ── Notes breadcrumbs ── */
.notes2-crumb {
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted) !important;
    padding: 0 0 6px;
}
.notes2-crumb a {
    color: var(--text-secondary) !important;
    font-weight: 600;
    transition: color 140ms ease;
}
.notes2-crumb a:hover { color: var(--accent) !important; }
.notes2-crumb .sep {
    margin: 0 6px !important;
    color: var(--border-strong);
    opacity: 0.6 !important;
}

/* ── Dashboard: section rhythm — consistent 24/32 cadence ── */
.section-header {
    margin-top: 32px !important;
}
.section-header:first-of-type { margin-top: 24px !important; }
.vitals-strip + .readiness-row { margin-top: 0; }
.dashboard-section-divider {
    margin: 32px 0 !important;
    border-top-color: var(--border-light) !important;
}

/* Pane-detail: a tiny bit more breathing room for case briefs */
.pane-detail {
    padding: 24px !important;
}
.case-detail-header {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom-color: var(--border-light) !important;
}

/* ============================================================
   RAG Revision Tracker
   ============================================================ */

.rag-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.rag-source-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rag-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.rag-tab:hover { border-color: var(--border-strong); }
.rag-tab.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.rag-tab.is-active .rag-tab-counts { color: var(--accent); opacity: 0.85; }
.rag-tab-label {
    font-family: 'Baloo 2', var(--font-display, system-ui);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
}
.rag-tab-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.rag-filters { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rag-filters .form-input, .rag-filters .form-select { min-width: 180px; }

.rag-progress {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rag-progress-bar {
    flex: 1;
    min-width: 200px;
    height: 10px;
    background: var(--surface-alt, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.rag-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #22c55e);
    border-radius: 999px;
    transition: width .25s ease;
}
.rag-progress-fill[data-empty="1"] {
    display: none;
}
.rag-progress-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rag-progress-meta strong { color: var(--text); font-size: 16px; }

.rag-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.rag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.rag-dot.rag-red,      .rag-inline.rag-red      { --rag-bg: #ef4444; }
.rag-dot.rag-amber,    .rag-inline.rag-amber    { --rag-bg: #f59e0b; }
.rag-dot.rag-green,    .rag-inline.rag-green    { --rag-bg: #10b981; }
.rag-dot.rag-unmarked                           { --rag-bg: #94a3b8; }
.rag-dot { background: var(--rag-bg); }

.rag-inline {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: var(--rag-bg);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.rag-subjects { display: flex; flex-direction: column; gap: 10px; }
.rag-subject {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
}
.rag-subject-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.rag-subject-head:hover { background: var(--surface-alt, #f8fafc); }
.rag-subject-title {
    flex: 1;
    font-family: 'Baloo 2', var(--font-display, system-ui);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
}
.rag-subject-chips,
.rag-section-chips { display: inline-flex; gap: 6px; align-items: center; }
.rag-chevron {
    display: inline-block;
    width: 14px;
    color: var(--text-secondary);
    transition: transform .15s ease;
}
.rag-subject.is-open > .rag-subject-head .rag-chevron,
.rag-section.is-open > .rag-section-head .rag-chevron { transform: rotate(90deg); }
.rag-subject-body {
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt, #fbfbfd);
}

.rag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--rag-bg, #94a3b8);
}
.rag-chip.rag-red   { background: #ef4444; }
.rag-chip.rag-amber { background: #f59e0b; }
.rag-chip.rag-green { background: #10b981; }
.rag-chip.rag-muted {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.rag-section { border-bottom: 1px solid var(--border-light); }
.rag-section:last-child { border-bottom: none; }
.rag-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 28px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.rag-section-head:hover { background: var(--surface, #fff); }
.rag-section-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: .1px;
}

.rag-topic-list {
    list-style: none;
    margin: 0;
    padding: 4px 18px 12px 42px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rag-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.45;
    font-size: 14px;
    transition: background .1s ease;
}
.rag-topic:hover { background: var(--surface-hover, rgba(0,0,0,.03)); }
.rag-topic[data-status="red"]   { box-shadow: inset 3px 0 0 #ef4444; padding-left: 12px; }
.rag-topic[data-status="amber"] { box-shadow: inset 3px 0 0 #f59e0b; padding-left: 12px; }
.rag-topic[data-status="green"] { box-shadow: inset 3px 0 0 #10b981; padding-left: 12px; }

.rag-topic-text { flex: 1; }
.rag-topic-disclaimer {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 6px 10px;
}
.rag-topic-heading {
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 10px 4px;
}

.rag-status-group { display: inline-flex; gap: 4px; }
.rag-status-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s ease;
    font-family: inherit;
}
.rag-status-btn:hover { transform: translateY(-1px); }
.rag-status-btn.rag-status-red.is-active   { background: #ef4444; color: #fff; border-color: #ef4444; }
.rag-status-btn.rag-status-amber.is-active { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.rag-status-btn.rag-status-green.is-active { background: #10b981; color: #fff; border-color: #10b981; }

@media (max-width: 720px) {
    .rag-topic { flex-wrap: wrap; }
    .rag-status-group { margin-left: auto; }
    .rag-topic-list { padding-left: 24px; padding-right: 10px; }
    .rag-section-head { padding-left: 18px; }
}

/* ============================================================
   Rule cards — clickable + layman preview
   ============================================================ */

.rule-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out, ease),
                box-shadow 0.2s var(--ease-out, ease),
                transform 0.15s var(--ease-out, ease);
}
.rule-card-clickable:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.rule-card-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rule-plain-english-preview {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    font-style: italic;
}

.rule-meta-subject { color: var(--text-muted); }

.rule-verify-chip { margin-left: auto; }
.rule-verify-chip-muted {
    color: var(--text-muted);
    background: var(--card);
    border: 1px solid var(--border-light);
}

/* ============================================================
   Rule detail view
   ============================================================ */

.rule-detail-hero {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.rule-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.rule-detail-title {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 14px;
}

.rule-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rule-source-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
    background: var(--bg-subtle, var(--surface-alt, var(--bg)));
    border-color: var(--border);
}

.rule-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.rule-detail-body {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
}

.rule-quoted {
    margin: 0 0 20px;
    padding: 16px 22px;
    border-left: 4px solid var(--accent);
    background: var(--callout-bg, var(--bg-subtle, var(--surface-alt, transparent)));
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    border-radius: var(--radius-sm);
}
.rule-quoted .rendered-content p { margin-bottom: 0; }

.rule-plain-english {
    background: var(--bg-subtle, var(--surface-alt, var(--bg)));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.rule-plain-english-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.rule-plain-english-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}
.rule-plain-english-missing {
    color: var(--text-muted);
    font-style: italic;
}

.rule-authority {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}
.rule-authority-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.rule-authority-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.01em;
    word-break: break-word;
}
.rule-authority-value:hover { text-decoration: underline; }
.rule-authority-stamp {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.rule-side-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.rule-side-rail-block {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.rule-side-rail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.rule-side-rail-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle, transparent);
    border: 1px solid var(--border-light);
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rule-side-rail-item:last-child { margin-bottom: 0; }
.rule-side-rail-item:hover {
    border-color: var(--accent);
    background: var(--card);
}
.rule-side-rail-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    margin-bottom: 4px;
}
.rule-side-rail-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    align-items: center;
}
.rule-side-rail-preview {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.rule-side-rail-preview mark {
    background: var(--amber-bg, rgba(245, 158, 11, 0.18));
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}
.rule-side-rail-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 900px) {
    .rule-detail-layout {
        grid-template-columns: 1fr;
    }
    .rule-side-rail {
        position: static;
    }
    .rule-detail-body {
        padding: 20px 22px;
    }
}


/* ── Login Screen ─────────────────────────────────────────── */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 16px;
}

/* Floating theme toggle on the login screen, anchored top-right of the
   viewport so it stays visible across all signup steps without competing
   with the card layout. Reuses the existing .theme-toggle visual rules
   from the in-app toggle; only positioning differs. */
.login-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
}

/* Step 4 plan-selection cards. Vertical stack of three large click
   targets so a new user can scan options without scrolling. */
.login-plans {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 8px;
}

.login-plan-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.login-plan-card:hover,
.login-plan-card:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}

.login-plan-card[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-plan-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.login-plan-price {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.login-plan-blurb {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.login-plan-discount,
.upgrade-discount {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 2px;
}

.login-card {
    width: min(440px, 100%);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px 36px;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 28px;
}
.login-icon {
    width: 56px;
    height: auto;
    border-radius: 10px;
}
.login-brand-text {
    display: flex;
    flex-direction: column;
}
.login-brand-name {
    font-family: 'Baloo 2', cursive;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
}
.login-brand-name em {
    font-style: normal;
    color: var(--accent);
}
.login-brand-sub {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.sidebar-icon {
    width: 36px;
    height: auto;
    border-radius: 6px;
}

/* Theme-aware logo swap. The template ships the light-mode asset in
   the <img src>, so light mode falls through with no replacement; the
   `content: url(...)` rule overrides the rendered image (not the src
   attribute) when [data-theme="dark"] is set on <html>. Supported in
   all modern browsers; the layout dimensions above still apply. */
html[data-theme="dark"] .login-icon,
html[data-theme="dark"] .sidebar-icon {
    content: url('/static/img/logo-full-dark.png?v=20260523');
}
.sidebar-brand .logo {
    margin: 0;
    line-height: 1.1;
}
.sidebar-brand .logo em {
    font-style: normal;
}
.sidebar-brand .logo-sub {
    margin-top: 0;
}

.login-tabs {
    display: flex;
    gap: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 20px;
}
.login-tab {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}
.login-tab.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 1px 4px rgba(79,70,229,0.3);
}
.login-tab:hover:not(.active) {
    color: var(--text);
}

.login-step-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 16px;
}

.login-field {
    margin-bottom: 16px;
}
.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.login-field input,
.login-field select {
    width: 100%;
    padding: 10px 14px;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
.login-field input:focus,
.login-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.login-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg);
}
.login-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.login-tc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    cursor: pointer;
}

.login-tc input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.login-tc-text a {
    color: var(--accent);
    text-decoration: underline;
}

.login-tc-text a:hover {
    color: var(--accent-hover);
}

.login-divider {
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.login-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-date-row select { flex: 1; }
.login-date-row input[type="date"] { flex: 1; }
.login-date-sep {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.login-submit {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
}

.login-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--red-bg);
    border: 1px solid var(--red);
    border-radius: 8px;
    color: var(--red-dark);
    font-size: 13px;
}


/* ── Sidebar User ─────────────────────────────────────────── */

.sidebar-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    font-size: 13px;
}
.sidebar-username {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.18s ease;
}
.btn-link:hover {
    color: var(--accent);
}

/* ── Sidebar legal-docs footer ────────────────────────────── */
/* Small, subtle links to Privacy / Cookies / Terms at the bottom
   of the sidebar. Sits below the nav, doesn't compete for attention. */
.sidebar-footer {
    margin-top: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 11px;
    color: var(--text-muted);
}
.sidebar-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}
.sidebar-footer a:hover {
    color: var(--accent);
}


/* ── Flashcard Grid (User CRUD) ───────────────────────────── */

.fc-create-form {
    padding: 24px;
}
.fc-form-row + .fc-form-row {
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}
.fc-form-row:focus-within label {
    color: var(--accent);
}
.fc-form-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text);
}
.fc-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fc-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.fc-form-row select,
.fc-form-row textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.2s ease;
    resize: vertical;
}
.fc-form-row select:focus,
.fc-form-row textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.fc-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

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

.fc-grid-card {
    padding: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.fc-grid-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.01);
}
.fc-grid-card:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}

.fc-grid-card-badge {
    display: flex;
}
.badge-flk-subject {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--accent-soft);
    color: var(--accent);
}

.fc-grid-card-front {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.fc-grid-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.btn-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.fc-flip-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--teal-bg);
}
.fc-edit-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-bg);
}
.fc-delete-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-bg);
}


/* ── Flashcard Flip Overlay ───────────────────────────────── */

.fc-flip-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
}
.fc-flip-overlay.visible {
    opacity: 1;
}
.fc-flip-overlay .flashcard-container {
    transform: scale(0.92);
    transition: transform 0.35s var(--ease-out);
}
.fc-flip-overlay.visible .flashcard-container {
    transform: scale(1);
}
.fc-flip-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.fc-flip-overlay .flashcard-container {
    position: relative;
    z-index: 1;
}

.fc-preview-nav-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}
.fc-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
}
.fc-nav-btn:hover:not([disabled]) {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.08);
}
.fc-nav-btn:active:not([disabled]) {
    transform: scale(0.95);
    transition-duration: 0.06s;
}
.fc-nav-btn[disabled] {
    opacity: 0.25;
    cursor: default;
}
.fc-preview-counter {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .fc-nav-btn { width: 36px; height: 36px; }
    .fc-preview-nav-wrap { gap: 8px; }
}

.fc-preview-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.fc-preview-text {
    font-size: 17px;
    line-height: 1.6;
    max-width: 52ch;
    white-space: pre-wrap;
}

/* ── Exam Date Setter (dual) ──────────────────────────────── */

.kpi-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.18s ease, background 0.18s ease;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.6;
}
.kpi-edit-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
    opacity: 1;
}

.exam-date-pair {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.exam-date-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.exam-date-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .login-card {
        padding: 28px 20px 24px;
    }
    .login-date-row {
        flex-direction: column;
        gap: 6px;
    }
    .login-date-sep {
        display: none;
    }
    .fc-grid {
        grid-template-columns: 1fr;
    }
    .exam-date-row {
        flex-direction: column;
        gap: 6px;
    }
    .exam-date-sep {
        display: none;
    }
}

/* ── Leaderboard ──────────────────────────────────────────── */

.leaderboard-header {
    margin-bottom: 28px;
}

.leaderboard-header .editorial-display {
    font-size: 38px;
}

.leaderboard-header .lede {
    max-width: 60ch;
}

.leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-list--inset {
    margin-top: 12px;
    gap: 8px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.leaderboard-row:hover {
    transform: var(--card-hover-lift);
    box-shadow: var(--shadow-sm);
}

.leaderboard-row--you {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-left-width: 4px;
}

.leaderboard-row--podium {
    border-color: var(--border-strong);
}

.leaderboard-row--rank1 {
    padding: 20px 22px;
    background: linear-gradient(90deg, var(--amber-bg) 0%, var(--card) 65%);
    border-color: var(--amber);
    box-shadow: var(--shadow-sm);
}

.leaderboard-row--rank2 {
    background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--card) 60%);
}

.leaderboard-row--rank3 {
    background: linear-gradient(90deg, var(--orange-bg) 0%, var(--card) 60%);
}

.leaderboard-row--rank1.leaderboard-row--you,
.leaderboard-row--rank2.leaderboard-row--you,
.leaderboard-row--rank3.leaderboard-row--you {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.leaderboard-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border-radius: 50%;
}

.leaderboard-rank--podium {
    color: var(--text);
    background: var(--card);
    border: 2px solid var(--border-strong);
}

.leaderboard-row--rank1 .leaderboard-rank--podium {
    width: 44px;
    height: 44px;
    font-size: 20px;
    color: var(--amber-dark);
    border-color: var(--amber);
    background: var(--amber-bg);
}

.leaderboard-row--rank2 .leaderboard-rank--podium {
    color: var(--text);
    border-color: var(--border-strong);
}

.leaderboard-row--rank3 .leaderboard-rank--podium {
    color: var(--orange);
    border-color: var(--orange);
    background: var(--orange-bg);
}

.leaderboard-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-row--rank1 .leaderboard-name {
    font-size: 16px;
    font-weight: 600;
}

.leaderboard-you-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    color: var(--accent);
    background: var(--accent-light);
    border-radius: 999px;
}

.leaderboard-accuracy-pill {
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.leaderboard-row--rank1 .leaderboard-accuracy-pill {
    font-size: 15px;
    padding: 5px 14px;
}

.leaderboard-answered {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
}

.leaderboard-answered-suffix {
    color: var(--text-muted);
}

.leaderboard-neighbours {
    margin-top: 28px;
    padding: 18px 20px;
}

.leaderboard-neighbours-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.leaderboard-neighbours-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leaderboard-neighbours-rank {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.leaderboard-qualify-card {
    margin-top: 28px;
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.leaderboard-qualify-text h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.leaderboard-qualify-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.leaderboard-empty {
    text-align: center;
}

/* Settings opt-out toggle hook (settings.js binds to .leaderboard-opt-out-toggle) */
.leaderboard-opt-out-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
}

.leaderboard-opt-out-row .leaderboard-opt-out-text {
    flex: 1;
}

.leaderboard-opt-out-row .leaderboard-opt-out-text strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 2px;
}

.leaderboard-opt-out-row .leaderboard-opt-out-text span {
    color: var(--text-secondary);
    font-size: 13px;
}

@media (max-width: 720px) {
    .leaderboard-header .editorial-display {
        font-size: 28px;
    }
    .leaderboard-row {
        grid-template-columns: 44px 1fr auto;
        gap: 12px;
        padding: 12px 14px;
    }
    .leaderboard-row--rank1 {
        padding: 14px 16px;
    }
    .leaderboard-answered {
        grid-column: 2 / 4;
        text-align: left;
        min-width: 0;
    }
    .leaderboard-answered-suffix {
        display: none;
    }
}

/* ── Quiz: paper source selector + free-tier quota UI ─────── */
/* Phase 2.5 replacement for the meaningless "All Sources" pill.
   SQE1 has only two papers; the selector is FLK1 / FLK2 / Both. */
.paper-source-selector {
    margin: 16px 0 18px;
}
.paper-source-selector .config-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.paper-source-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.paper-source-chips .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.paper-source-chips .filter-chip small {
    font-weight: 500;
    opacity: 0.7;
}
.paper-source-chips .filter-chip:hover {
    color: var(--text);
}
.paper-source-chips .filter-chip.active {
    background: var(--accent);
    color: #fff;
}
.paper-source-chips .filter-chip.active small { opacity: 0.85; }

/* Free-tier remaining-quota banner shown at the top of the
   Question Bank config so the user knows what they're working with
   before they pick a quiz length. */
.quota-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-light, var(--border));
    color: var(--text);
}
.quota-banner-icon {
    font-size: 18px;
    line-height: 1.2;
    color: var(--accent);
    flex: 0 0 auto;
}
.quota-banner-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.5;
}
.quota-banner-body strong:first-child {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}
.quota-banner-empty {
    background: color-mix(in srgb, var(--red, #dc2626) 12%, transparent);
    border-color: color-mix(in srgb, var(--red, #dc2626) 30%, transparent);
}
.quota-banner-empty .quota-banner-icon,
.quota-banner-empty .quota-banner-body strong:first-child {
    color: var(--red, #dc2626);
}

/* Upgrade-required screen rendered when the free-tier quota is
   already exhausted at start time (server returns 403). */
.quiz-upgrade-screen {
    max-width: 520px;
    margin: clamp(40px, 8vw, 96px) auto;
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
}
.quiz-upgrade-icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--accent);
}
.quiz-upgrade-screen h2 {
    font-size: 24px;
    margin: 0 0 8px;
}
.quiz-upgrade-screen p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}
.quiz-upgrade-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Mid-quiz limit-hit banner inside the explanation block. */
.quiz-limit-banner {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.quiz-limit-banner strong {
    color: var(--accent);
    margin-right: 4px;
}

/* Visual flag for the Next-button-turned-Upgrade-CTA. */
.btn.btn-upgrade {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn.btn-upgrade:hover {
    background: var(--accent-hover, var(--accent));
}