:root {
    --acca-red: #C12420;
    --acca-orange: #E58A13;
    --bg-header: #EAEAEA;
    --bg-main: #EFEFEF;
    --bg-footer-top: #5C5C5C;
    --bg-footer-bottom: #3B3B3B;
    --border-color: #CCCCCC;
    --text-dark: #333333;
    --text-light: #FFFFFF;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radio-purple: #3B2C6F;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.exam-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* Header Styles */
.exam-header {
    display: flex;
    height: 80px;
    background-color: var(--bg-header);
    border-bottom: 2px solid #D6D6D6;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    align-items: stretch;
    z-index: 10;
}

.header-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 15px;
    border-left: 2px solid #FFFFFF;
    font-size: 13px;
}

.header-logo {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.logo-box {
    background-color: var(--acca-red);
    color: var(--text-light);
    font-weight: bold;
    font-size: 24px;
    padding: 10px 15px;
    letter-spacing: 1px;
}

.header-question-info {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    min-width: 180px;
}

.header-timer {
    align-items: center;
    min-width: 120px;
}

.timer-text {
    font-size: 16px;
    margin-top: 5px;
}

.font-bold {
    font-weight: bold;
}

.header-progress {
    flex-grow: 1;
    align-items: center;
    padding-top: 10px;
}

.progress-container {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin-bottom: 5px;
}

.progress-bar-bg {
    background-color: #BDBDBD;
    height: 22px;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    background-color: #5A5A5A;
    height: 100%;
    width: 0%;
    transition: width 0.3s;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 22px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.progress-details-link {
    color: var(--acca-orange);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-title {
    color: var(--acca-orange);
    font-weight: bold;
    font-size: 15px;
    flex-grow: 1;
}

.header-exit {
    align-items: center;
    cursor: pointer;
    min-width: 80px;
    border-right: 2px solid #FFFFFF;
}

.exit-icon-box {
    background-color: var(--text-dark);
    color: var(--acca-orange);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.exit-icon { font-size: 18px; }
.exit-text { color: var(--acca-orange); font-size: 12px; font-weight: bold; }

/* Main Content Area */
.exam-main {
    flex-grow: 1;
    padding: 50px 10%;
    overflow-y: auto;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}

.question-container {
    width: 100%;
    padding: 0 clamp(14px, 3vw, 40px);
}

.question-text {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.4;
    white-space: pre-line;
}

.options-list {
    display: flex;
    flex-direction: column;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dotted var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.option-item:first-child {
    border-top: 1px dotted var(--border-color);
}

.option-item:hover {
    background-color: #E6E6E6;
}

.custom-radio {
    margin-right: 15px;
    width: 18px;
    height: 18px;
    border: 1px solid #888;
    border-radius: 50%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.custom-radio.selected {
    border-color: #888;
}

.custom-radio.selected::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--radio-purple);
    border-radius: 50%;
}

.option-text {
    font-size: 15px;
}

/* Footer Styles */
.exam-footer {
    height: 80px;
    background: linear-gradient(to bottom, var(--bg-footer-top), var(--bg-footer-bottom));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.footer-left, .footer-right {
    display: flex;
    gap: 30px;
}

.footer-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    outline: none;
}

.circle-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #2A2A2A;
    color: var(--acca-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

.footer-btn:active .circle-icon {
    transform: scale(0.95);
}

.footer-btn:hover .circle-icon {
    background-color: #1A1A1A;
}

.help-icon {
    font-weight: bold;
    font-size: 20px;
    font-family: var(--font-main);
}

.nav-icon {
    background-color: #D22630;
    color: #FFF;
}
.footer-btn:hover .nav-icon {
    background-color: #A01B22;
}

.btn-label {
    color: var(--acca-orange);
    font-size: 13px;
    font-weight: bold;
}

/* Modals & Overlays */
.modal-overlay {
    position: fixed;
    top: 80px; /* Below header */
    left: 0;
    width: 100%;
    height: calc(100vh - 160px); /* Between header and footer */
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--kkd-card);
    border: 1px solid var(--kkd-line);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 20px;
    max-height: 90%;
    overflow-y: auto;
}

.progress-modal-content {
    width: 600px;
}

.exit-modal-content {
    width: 400px;
    background-color: var(--kkd-card);
    color: var(--kkd-ink);
    text-align: center;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 14px;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

.legend-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}

.legend-icon.complete {
    background-color: var(--acca-orange);
}

.legend-icon.incomplete {
    border: 2px solid #D22630;
    background-color: transparent;
}

.legend-icon.flagged-icon {
    color: #555;
    background: none;
    font-size: 18px;
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.grid-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    position: relative;
}

.grid-item .circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0;
}

.grid-item .circle.complete {
    background-color: var(--acca-orange);
    color: #FFF;
}

.grid-item .circle.incomplete {
    border: 2px solid #D22630;
    color: var(--text-dark);
}

.grid-item .flag {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #555;
    font-size: 14px;
}

.modal-btn {
    padding: 8px 20px;
    background-color: #E0E0E0;
    border: 1px solid #999;
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

.modal-btn:hover {
    background-color: #D0D0D0;
}

.confirm-btn {
    border: 2px solid #000;
}

.text-center { text-align: center; }

/* Results Screen */
.results-screen {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #FFF;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}

.results-content {
    text-align: center;
    width: 100%;
    padding: 0 clamp(14px, 3vw, 40px);
}

.results-content h2 {
    margin-bottom: 20px;
    color: var(--acca-red);
}

.results-score {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Exam Selection Screen */
.selection-screen {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background: linear-gradient(135deg, #dce6f1 0%, #e8edf2 50%, #dce6f1 100%);
    padding: 0;
    overflow-y: auto;
}

.selection-content {
    background: var(--kkd-card);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    width: 100%;
    text-align: center;
}

.selection-title {
    color: var(--acca-red);
    margin-bottom: 10px;
    font-size: 28px;
}

.selection-subtitle {
    color: var(--text-color);
    margin-bottom: 30px;
    font-size: 16px;
}

.exam-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
    text-align: left;
}

/* ── Selection screen header ── */
.sel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 20px 0;
    gap: 16px;
    flex-wrap: wrap;
}

.sel-header-left {
    flex: 1;
    min-width: 0;
}

.sel-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.sel-user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff8ee;
    border: 1.5px solid #E58A13;
    border-radius: 20px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dark);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sel-user-icon {
    font-size: 18px !important;
    color: #E58A13;
    flex-shrink: 0;
}

/* Profile icon: the user's auto-generated avatar emoji in a circle. */
.profile-emoji {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: #F7F1E6; border: 2px solid #D97B1B;
    font-size: 17px; line-height: 1; overflow: hidden;
}
.profile-emoji img { width: 100%; height: 100%; border-radius: 50%; display: block; }

.sel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: filter 0.15s;
}

.sel-btn:hover { filter: brightness(0.9); }
.sel-btn .material-icons { font-size: 20px; }

.sel-btn-green { background: #4CAF50; }
.sel-btn-dark  { background: #333; }
.sel-btn-red   { background: #C62828; box-shadow: 0 4px 10px rgba(198,40,40,0.25); }

.exam-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-left: 4px solid var(--acca-red);
    border-radius: 8px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
}

.exam-card:hover {
    border-color: var(--acca-red);
    border-left-color: var(--acca-orange);
    background: var(--kkd-card);
    box-shadow: 0 6px 20px rgba(193, 36, 32, 0.12);
    transform: translateY(-3px);
}

.exam-card h3 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.exam-card p {
    color: #888;
    font-size: 13px;
    margin: 0;
    font-weight: 600;
}

/* Feedback Container */
.feedback-container {
    margin-top: 25px;
    padding: 15px 20px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    animation: fadeIn 0.3s ease-in-out;
}

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

.feedback-icon {
    font-size: 24px;
    margin-top: 2px;
}

.feedback-content h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.feedback-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
}

/* Correct state */
.feedback-container.correct {
    background-color: #1d5c34;
    border-left: 5px solid #28a745;
}
.feedback-container.correct .feedback-icon {
    color: #28a745;
}
.feedback-container.correct h4 {
    color: #fff;
}
.feedback-container.correct .feedback-content p { color: #e8f5ec; }

/* Incorrect state */
.feedback-container.incorrect {
    background-color: #7c212b;
    border-left: 5px solid #dc3545;
}
.feedback-container.incorrect .feedback-icon {
    color: #dc3545;
}
.feedback-container.incorrect h4 {
    color: #fff;
}
.feedback-container.incorrect .feedback-content p { color: #f9e8ea; }

/* Option highlighting */
.option-item.correct-answer {
    border-color: #28a745;
    background-color: #1d5c34;
}
.option-item.correct-answer .option-text { color: #fff; }
.option-item.correct-answer .custom-radio {
    border-color: #28a745;
    background-color: #28a745;
}

.option-item.wrong-answer {
    border-color: #dc3545;
    background-color: #7c212b;
}
.option-item.wrong-answer .option-text { color: #fff; }
.option-item.wrong-answer .custom-radio {
    border-color: #dc3545;
    background-color: #dc3545;
}

/* Ledger & Lantern visual system: editorial study desk, warm paper surfaces, navy structure, and saffron progress cues. */
:root {
    --kkd-ink: #17233A;
    --kkd-ink-soft: #52607A;
    --kkd-paper: #F8F3E8;
    --kkd-canvas: #EEE7D9;
    --kkd-saffron: #D97B1B;
    --kkd-mint: #DDE8DF;
    --kkd-line: #DCD2C1;
    --kkd-rose: #EAD8D0;
    --kkd-card: #FFFDF8;
    --kkd-input: #FFFFFF;
}

body {
    background: var(--kkd-canvas);
    color: var(--kkd-ink);
}

#selection-screen,
#mock-selection-screen,
#pdf-screen {
    background:
        radial-gradient(circle at 8% 14%, rgba(217,123,27,.16), transparent 23rem),
        radial-gradient(circle at 92% 84%, rgba(82,96,122,.13), transparent 29rem),
        linear-gradient(135deg, #F8F3E8 0%, #EEE5D6 100%);
    padding: 0;
}

#selection-screen .selection-content,
#mock-selection-screen .selection-content,
#pdf-screen .selection-content {
    max-width: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.portal-shell {
    overflow: hidden;
    border: 0;
    background: rgba(255,253,248,.84);
    box-shadow: none;
}

.portal-toolbar {
    min-height: 86px;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--kkd-line);
    background: rgba(255,253,248,.94);
}

.portal-brand,
.sel-header-right {
    display: flex;
    align-items: center;
}

.portal-brand { gap: 13px; }

.portal-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--kkd-ink);
    font-family: var(--font-main);
    font-size: 24px;
    line-height: 1;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.08);
}
button.portal-mark { border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 24px; }
button.portal-mark:hover { filter: brightness(1.12); }

.portal-kicker,
.eyebrow,
.ledger-label,
.mock-card-kicker {
    color: var(--kkd-saffron);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
}

.portal-name {
    margin: 2px 0 0;
    font-family: var(--font-main);
    color: var(--kkd-ink);
    font-size: 20px;
    line-height: 1.1;
}

.sel-header-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.sel-user-badge {
    color: var(--kkd-ink);
    border: 1px solid var(--kkd-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sel-user-icon { color: var(--kkd-saffron) !important; }

.sel-btn {
    min-height: 38px;
    padding: 8px 11px;
    color: var(--kkd-ink);
    border: 1px solid var(--kkd-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms cubic-bezier(.23, 1, .32, 1), color 160ms cubic-bezier(.23, 1, .32, 1);
}

.sel-btn:hover { filter: none; transform: translateY(-1px); background: var(--kkd-ink); color: #fff; }
.sel-btn:active { transform: scale(.97); }
.sel-btn-material { background: var(--kkd-mint); border-color: var(--kkd-mint); }
.sel-btn-blog { background: var(--kkd-rose); border-color: var(--kkd-rose); }
.sel-btn-dark { background: var(--kkd-ink); border-color: var(--kkd-ink); color: #fff; }
.sel-btn-quiet { width: 38px; padding: 8px; justify-content: center; }
.sel-btn-bell { background: var(--kkd-card); position: relative; }
.announce-badge {
    position: absolute; top: -7px; right: -7px;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: #c0392b; color: #fff; border-radius: 10px;
    font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.announce-badge[hidden] { display: none; }

/* ── Announcements panel ─────────────────────────────── */
.announce-panel {
    position: fixed; top: 76px; right: 18px; z-index: 12000;
    width: min(380px, calc(100vw - 36px)); max-height: min(70vh, 520px);
    display: flex; flex-direction: column;
    background: var(--kkd-paper, #FFFDF8);
    border: 1px solid #e5d9c3; border-radius: 4px;
    box-shadow: 0 18px 50px rgba(23,35,58,.28);
    overflow: hidden;
}
.announce-panel[hidden] { display: none; }
.announce-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; background: var(--kkd-ink, #17233A); color: #fff;
}
.announce-panel-head h3 {
    margin: 0; font-family: var(--font-main); font-size: 16px;
    display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.announce-panel-head h3 .material-icons { color: var(--kkd-saffron, #D97B1B); }
.announce-panel-close {
    background: transparent; border: 0; color: #fff; cursor: pointer;
    display: flex; padding: 4px; border-radius: 4px;
}
.announce-panel-close:hover { background: rgba(255,255,255,.14); }
.announce-list { overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.announce-empty { text-align: center; color: #8a8a8a; padding: 26px 10px; font-size: 14px; }
.announce-item {
    border: 1px solid #e8ddc8; border-left: 4px solid var(--kkd-saffron, #D97B1B);
    background: var(--kkd-card); border-radius: 3px; padding: 12px 14px;
}
.announce-item.unread { background: #fdf6ea; }
.announce-item h4 { margin: 0 0 6px; font-size: 14.5px; color: var(--kkd-ink, #17233A); }
.announce-item p { margin: 0 0 8px; font-size: 13.5px; color: #4c586c; line-height: 1.55; white-space: pre-line; }
.announce-item time { font-size: 11.5px; color: #9a9a9a; letter-spacing: .04em; }
.announce-item a {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    color: #b56a2a; font-size: 13px; font-weight: 700; text-decoration: none;
}
.announce-item a:hover { text-decoration: underline; }

/* ── Announcement toast ──────────────────────────────── */
.announce-toast {
    position: fixed; left: 18px; bottom: 92px; z-index: 12001;
    width: min(360px, calc(100vw - 36px));
    display: flex; align-items: center; gap: 12px;
    background: var(--kkd-ink, #17233A); color: #fff;
    border-left: 4px solid var(--kkd-saffron, #D97B1B);
    border-radius: 4px; padding: 13px 14px;
    box-shadow: 0 14px 40px rgba(23,35,58,.35);
    animation: announce-slide-in .3s ease-out;
}
.announce-toast[hidden] { display: none; }
@keyframes announce-slide-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.announce-toast-icon { color: var(--kkd-saffron, #D97B1B); font-size: 26px; flex: none; }
.announce-toast-body { flex: 1; min-width: 0; }
.announce-toast-kicker {
    margin: 0 0 2px; font-size: 10px; font-weight: 800;
    letter-spacing: .14em; color: var(--kkd-saffron, #D97B1B);
}
.announce-toast-title {
    margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.announce-toast-view {
    flex: none; background: var(--kkd-saffron, #D97B1B); color: #fff;
    border: 0; border-radius: 3px; padding: 8px 14px;
    font-weight: 700; font-size: 13px; cursor: pointer;
}
.announce-toast-dismiss {
    flex: none; background: transparent; border: 0; color: #b9c2d4;
    cursor: pointer; display: flex; padding: 4px;
}

/* ── Community chat ──────────────────────────────────── */
.sel-btn-chat { background: #eef3e9; border-color: #cdd9bd; }
.chat-shell {
    width: 100%; padding: 0; display: flex; flex-direction: column;
    height: 88vh; background: var(--kkd-paper, #FFFDF8); text-align: left;
    border: 1px solid #e5d9c3; border-radius: 4px;
    box-shadow: 0 10px 30px rgba(23,35,58,.12); overflow: hidden;
}
.chat-toolbar { padding: 16px 22px; border-bottom: 1px solid #e5d9c3; }
.chat-lede { margin: 0; padding: 12px 22px; font-size: 13px; color: #6b7690; border-bottom: 1px solid #efe6d2; }
.chat-messages {
    flex: 1; overflow-y: auto; padding: 18px 22px; display: flex;
    flex-direction: column; gap: 12px; min-height: 200px; background: var(--kkd-card);
}
.chat-empty { text-align: center; color: #8a8a8a; padding: 40px 0; font-style: italic; }
.chat-msg { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; max-width: 82%; }
.chat-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.them { align-self: flex-start; }
.chat-msg-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.chat-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; line-height: 1; background: #F7F1E6;
    border: 2px solid #D97B1B; box-shadow: 0 2px 5px rgba(25,50,74,.15);
    overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.chat-quote-avatar {
    width: 18px; height: 18px; border-radius: 50%;
    vertical-align: -4px; margin-right: 2px;
}
.chat-msg.me .chat-avatar { border-color: var(--kkd-ink); }
.chat-meta {
    font-size: 11px; color: #8a8a8a; margin-bottom: 3px; padding: 0 4px;
    display: flex; align-items: center; gap: 6px;
}
.chat-msg.me .chat-meta { align-self: flex-end; }
.chat-meta strong { color: #4c586c; }
.chat-admin-badge {
    background: var(--kkd-saffron, #D97B1B); color: #fff; font-size: 10px;
    font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 3px;
}
.chat-bubble {
    padding: 10px 14px; border-radius: 4px; font-size: 14.5px; line-height: 1.5;
    word-break: break-word; background: var(--kkd-card); color: var(--kkd-ink);
    border: 1px solid var(--kkd-line); border-left: 4px solid #c9bfa9;
}
.chat-msg.me .chat-bubble {
    background: var(--kkd-ink, #17233A); color: #fff; border: 1px solid var(--kkd-ink, #17233A);
    border-left: 4px solid var(--kkd-saffron, #D97B1B);
}
[data-theme="dark"] .logo-box { background: #2D3B59; color: #EAE3D0; }
[data-theme="dark"] .chat-msg.me .chat-bubble {
    background: #2D3B59; color: #EAE3D0; border-color: #2D3B59;
    border-left: 4px solid var(--kkd-saffron, #D97B1B);
}
.chat-quote {
    border-left: 3px solid var(--kkd-saffron, #D97B1B); background: rgba(217,123,27,.1);
    border-radius: 3px; padding: 7px 10px; margin-bottom: 7px; font-size: 12.5px;
}
.chat-msg.me .chat-quote { background: rgba(255,255,255,.12); }
.chat-quote strong { display: block; font-size: 11.5px; color: #b56a2a; margin-bottom: 2px; }
.chat-msg.me .chat-quote strong { color: #f0b96a; }
.chat-quote p { margin: 0; opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-actions { display: flex; gap: 4px; margin-top: 3px; padding: 0 4px; }
.chat-msg.me .chat-actions { align-self: flex-end; }
.chat-action {
    background: transparent; border: 0; color: #a0a8bb; cursor: pointer;
    font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
    gap: 3px; padding: 2px 4px; border-radius: 3px;
}
.chat-action:hover { color: var(--kkd-saffron, #D97B1B); background: rgba(217,123,27,.08); }
.chat-action .material-icons { font-size: 14px; }
.chat-action.danger:hover { color: #c0392b; background: rgba(192,57,43,.08); }
.chat-reply-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 22px;
    background: #fdf6ea; border-top: 1px solid #efe0c2; color: #4c586c;
}
.chat-reply-bar[hidden] { display: none; }
.chat-reply-bar > .material-icons { color: var(--kkd-saffron, #D97B1B); }
.chat-reply-preview { flex: 1; min-width: 0; }
.chat-reply-preview strong { font-size: 12px; color: #b56a2a; }
.chat-reply-preview p {
    margin: 2px 0 0; font-size: 13px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
}
.chat-reply-cancel {
    background: transparent; border: 0; color: #8a8a8a; cursor: pointer;
    display: flex; padding: 4px;
}
.chat-input-row { display: flex; gap: 10px; align-items: center; padding: 14px 22px 6px; }
.chat-input {
    flex: 1; padding: 12px 16px; border: 1px solid #d9cdb2; border-radius: 4px;
    font-size: 15px; box-sizing: border-box; outline: none; font-family: inherit;
    background: var(--kkd-card); color: var(--kkd-ink); min-width: 0;
}
.chat-input::placeholder { color: var(--kkd-ink-soft); opacity: .8; }
.chat-input:focus { border-color: var(--kkd-saffron, #D97B1B); box-shadow: 0 0 0 2px rgba(217,123,27,.15); }
.chat-send {
    background: var(--kkd-saffron, #D97B1B); color: #fff; border: none; border-radius: 4px;
    padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.chat-send:hover { background: #b56a2a; }
.chat-send .material-icons { font-size: 18px; }
.chat-load-more {
    align-self: center; background: var(--kkd-card); border: 1px solid #d9cdb2; border-radius: 20px;
    color: #7a6a4f; font-size: 12.5px; font-weight: 700; padding: 7px 18px;
    cursor: pointer; margin-bottom: 4px; flex: none;
}
.chat-load-more:hover { border-color: var(--kkd-saffron, #D97B1B); color: var(--kkd-saffron, #D97B1B); }
.chat-hint { margin: 0; padding: 8px 22px 14px; font-size: 12px; color: #c0392b; }
.chat-hint[hidden] { display: none; }

/* ── Visitor meter (self-hosted, Ledger & Lantern) ───── */
.visitor-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--kkd-ink, #17233A); color: #fff; border-radius: 4px;
    padding: 10px 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.visitor-badge .material-icons { color: var(--kkd-saffron, #D97B1B); font-size: 26px; }
.visitor-badge-num {
    font-size: 24px; font-weight: 800; color: #F5B942;
    font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
}
.visitor-badge-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #b9c2d4;
}

/* ── Visitor meter, mini version (main page only, subtle) ─ */
.sel-footnote {
    display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
    padding: 20px 0 8px; font-size: 12px; color: #9aa3b5;
}
.sel-footnote .material-icons { font-size: 15px; color: #c0a06a; }
.sel-footnote strong { color: #7a6a4f; font-variant-numeric: tabular-nums; }
.sel-footnote-dev { color: #9aa3b5; }
.sel-footnote-dev strong { color: #7a6a4f; }

.practice-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 44px;
    padding: 54px 60px 52px;
    overflow: hidden;
    background: var(--kkd-ink);
}

.practice-hero::before {
    position: absolute;
    right: 28%;
    bottom: -74px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    content: '';
}

.hero-copy { position: relative; z-index: 1; max-width: 720px; }
.hero-copy .eyebrow { color: #F6B356; }
.hero-copy h2,
.pathway-heading h2,
.mock-intro h2 {
    font-family: var(--font-main);
    font-weight: 600;
}

.hero-copy h2 {
    max-width: 690px;
    margin: 10px 0 14px;
    color: #FFFDF8;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.hero-copy > p:last-child {
    max-width: 620px;
    color: rgba(255,255,255,.73);
    font-size: 16px;
    line-height: 1.65;
}

.library-ledger {
    position: relative;
    z-index: 1;
    align-self: end;
    padding: 22px;
    color: var(--kkd-ink);
    background: var(--kkd-paper);
    box-shadow: 8px 8px 0 rgba(217,123,27,.82);
}

.library-ledger strong { display: block; margin-top: 12px; font-family: var(--font-main); font-size: 45px; line-height: 1; }
.library-ledger > span { color: var(--kkd-ink-soft); font-size: 13px; font-weight: 600; }
.ledger-rule { height: 1px; margin: 19px 0 13px; background: var(--kkd-line); }
.library-ledger > p:last-child { color: var(--kkd-ink); font-size: 12px; font-weight: 700; }

.pathway-section { padding: 45px 60px 60px; }
.pathway-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.pathway-heading h2 { margin-top: 7px; color: var(--kkd-ink); font-size: 32px; letter-spacing: -.025em; }
.selection-subtitle { max-width: 300px; margin: 0; color: var(--kkd-ink-soft); font-size: 13px; line-height: 1.55; text-align: right; }

.exam-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.exam-card {
    min-height: 206px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--kkd-line);
    border-left: 1px solid var(--kkd-line);
    border-radius: 0;
    background: var(--kkd-card);
    box-shadow: none;
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1), border-color 200ms cubic-bezier(.23, 1, .32, 1);
}
.exam-card:hover { border-color: var(--kkd-ink); border-left-color: var(--kkd-ink); background: var(--kkd-card); box-shadow: 6px 6px 0 var(--kkd-saffron); transform: translate(-2px, -2px); }
.exam-card-top { display: flex; align-items: center; justify-content: space-between; }
.subject-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--subject-color); background: color-mix(in srgb, var(--subject-color) 12%, white); font-size: 20px; }
.exam-card-code { color: var(--kkd-ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.exam-card h3 { margin: 21px 0 7px; color: var(--kkd-ink); font-family: var(--font-main); font-size: 22px; line-height: 1.12; }
.exam-card p { margin: 0; color: var(--kkd-ink-soft); font-size: 12px; font-weight: 500; line-height: 1.5; }
.exam-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--kkd-line); color: var(--kkd-ink-soft); font-size: 11px; font-weight: 700; }
.card-action { display: flex; align-items: center; gap: 3px; color: var(--kkd-saffron); }
.card-action .material-icons { font-size: 16px; }

.mock-shell { min-height: 680px; }
.back-control { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--kkd-ink); border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.back-control:hover { color: var(--kkd-saffron); }
.back-control .material-icons { font-size: 18px; }
.mock-intro { padding: 54px 60px 30px; border-bottom: 1px solid var(--kkd-line); background: linear-gradient(115deg, #F6EFE1 0%, #FFFDF8 70%); }
.mock-intro .selection-title { margin: 9px 0; color: var(--kkd-ink); font-size: clamp(34px, 4vw, 52px); letter-spacing: -.035em; }
.mock-intro .selection-subtitle { max-width: 590px; color: var(--kkd-ink-soft); text-align: left; }
.mock-options { padding: 30px 60px 60px; }
.mock-options .exam-card { position: relative; min-height: 180px; padding: 22px; overflow: hidden; }
.mock-card-index { position: absolute; top: 14px; right: 16px; color: rgba(23,35,58,.12); font-family: var(--font-main); font-size: 54px; font-weight: 700; line-height: 1; }
.mock-options .exam-card h3 { margin: 7px 0 0; }
.mock-card-bottom { display: flex; gap: 12px; margin-top: auto; padding-top: 15px; color: var(--kkd-ink-soft); font-size: 11px; font-weight: 700; }
.mock-card-bottom span + span { padding-left: 12px; border-left: 1px solid var(--kkd-line); }
.mock-card-start { display: flex; align-items: center; gap: 3px; margin-top: 17px; color: var(--kkd-saffron); font-size: 12px; font-weight: 700; }

/* ── Study Materials Library (Ledger & Lantern) ───────────────────────────── */
.pdf-intro { padding: 38px 48px 6px; border-bottom: 1px solid var(--kkd-line); background: linear-gradient(115deg, #F6EFE1 0%, #FFFDF8 70%); }
.pdf-intro h2 { margin-top: 7px; color: var(--kkd-ink); font-family: var(--font-main); font-weight: 600; font-size: 32px; letter-spacing: -.025em; }
.pdf-lede { max-width: 640px; margin: 10px 0 0; color: var(--kkd-ink-soft); font-size: 14px; line-height: 1.6; }
.pdf-note { display: flex; align-items: center; gap: 9px; max-width: 640px; margin: 18px 0 26px; padding: 12px 16px; background: var(--kkd-paper); border: 1px solid var(--kkd-line); border-left: 4px solid var(--kkd-saffron); color: var(--kkd-ink-soft); font-size: 12.5px; line-height: 1.5; }
.pdf-note .material-icons { color: var(--kkd-saffron); font-size: 18px; flex: none; }
.pdf-note code { background: rgba(23,35,58,.07); padding: 2px 6px; font-size: 12px; }
.pdf-body { padding: 24px 48px 44px; }
.pdf-nav { width: 100%; margin-bottom: 24px; }
.pdf-level-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pdf-cat-row { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 4px; }
.pdf-tab { padding: 8px 18px; font-family: var(--font-main); font-size: 13px; font-weight: 700; border: 1px solid; border-radius: 0; background: transparent; cursor: pointer; transition: background-color .18s, color .18s, transform .18s; }
.pdf-tab.small { padding: 6px 14px; font-size: 12px; }
.pdf-tab:hover { transform: translateY(-1px); }
.pdf-tab:not(.is-active):hover { background: rgba(23,35,58,.06); }
.pdf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: 100%; }
@media (max-width: 1400px) { .pdf-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .pdf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .pdf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pdf-grid { grid-template-columns: 1fr; } }
.pdf-card { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: var(--kkd-card); border: 1px solid var(--kkd-line); border-left: 4px solid var(--kkd-saffron); transition: transform .2s ease, box-shadow .2s ease; }
.pdf-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23,35,58,.12); }
.pdf-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pdf-tag { padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.pdf-tag-cat { background: var(--kkd-mint); color: var(--kkd-ink); }
.pdf-title { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; color: var(--kkd-ink); font-size: 14px; font-weight: 700; line-height: 1.45; }
.pdf-title .material-icons { min-width: 22px; margin-top: 1px; color: var(--kkd-saffron); font-size: 20px; }
.pdf-actions { display: flex; gap: 8px; margin-top: auto; }
.pdf-view-btn, .pdf-dl-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; font-family: var(--font-main); font-size: 13px; font-weight: 700; border-radius: 0; cursor: pointer; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s; }
.pdf-view-btn { background: transparent; color: var(--kkd-ink); border: 1px solid var(--kkd-line); }
.pdf-view-btn:hover { background: var(--kkd-ink); border-color: var(--kkd-ink); color: #fff; }
.pdf-view-btn .material-icons { font-size: 16px; }
.pdf-dl-btn { background: var(--kkd-ink); color: #fff; border: 1px solid var(--kkd-ink); }
[data-theme="dark"] .pdf-dl-btn { background: #2D3B59; border-color: #2D3B59; color: #EAE3D0; }
[data-theme="dark"] .pdf-dl-btn:hover { background: #3a4a6b; border-color: #3a4a6b; }
.pdf-dl-btn:hover { background: var(--kkd-saffron); border-color: var(--kkd-saffron); }
.pdf-dl-btn .material-icons { font-size: 16px; }
.pdf-empty { grid-column: 1 / -1; width: 100%; padding: 48px 0; color: var(--kkd-ink-soft); font-size: 14px; text-align: center; }

/* ── PDF viewer modal (Ledger & Lantern) ──────────────────────────────────── */
.pdf-viewer-overlay { position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; background: rgba(23,35,58,.85); }
.pdf-viewer-frame { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: var(--kkd-card); }
.pdf-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--kkd-ink); color: #fff; }
.pdf-viewer-title { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; margin: 0; color: #fff; font-family: var(--font-main); font-size: 17px; font-weight: 600; }
.pdf-viewer-title .material-icons { color: #F6B356; }
#pdf-viewer-title-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pdf-viewer-actions { display: flex; align-items: center; gap: 10px; }
.pdf-external-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--kkd-saffron); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s; }
.pdf-external-btn:hover { background: #b86414; }
.pdf-viewer-close { padding: 9px 16px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); font-family: var(--font-main); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s; }
.pdf-viewer-close:hover { background: rgba(255,255,255,.14); }
.pdf-viewer-container { display: flex; flex: 1; flex-direction: column; align-items: center; overflow: hidden; background: var(--kkd-card); }
.pdf-viewer-loading { display: flex; align-items: center; gap: 8px; margin-top: 50px; color: var(--kkd-ink); font-size: 16px; font-weight: 600; }
.pdf-viewer-loading .material-icons { color: var(--kkd-saffron); animation: spin 1s linear infinite; }
.pdf-viewer-tip { width: 100%; box-sizing: border-box; padding: 10px; background: var(--kkd-paper); border-bottom: 1px solid var(--kkd-line); color: #955318; font-size: 13px; font-weight: 600; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.mock-card-start .material-icons { font-size: 16px; }

.exam-container { height: 100vh; background: var(--kkd-canvas); }
.exam-header { min-height: 84px; height: auto; border-bottom: 1px solid var(--kkd-line); background: var(--kkd-card); box-shadow: 0 2px 12px rgba(23,35,58,.05); }
.header-panel { border-left: 1px solid var(--kkd-line); color: var(--kkd-ink-soft); font-size: 11px; }
.header-logo { padding: 0 24px; }.logo-box { padding: 9px 13px; background: var(--kkd-ink); font-family: var(--font-main); font-size: 22px; }.header-question-info { gap: 10px; min-width: 175px; }.header-title { color: var(--kkd-ink); font-size: 13px; }.header-timer { min-width: 134px; color: var(--kkd-ink); }.timer-text { color: var(--kkd-saffron); font-size: 18px; }.progress-bar-bg { height: 8px; border-radius: 0; background: var(--kkd-line); }.progress-bar-fill { background: var(--kkd-saffron); }.progress-text { position: static; margin-top: 7px; color: var(--kkd-ink-soft); font-size: 10px; line-height: 1; text-shadow: none; }.progress-container { margin: 0; }.progress-details-link { margin-top: 8px; color: var(--kkd-ink); }.header-exit { min-width: 84px; }.exit-icon-box { width: 32px; height: 32px; margin-bottom: 3px; color: var(--kkd-saffron); background: var(--kkd-ink); }.exit-text { color: var(--kkd-ink); }
.exam-main { padding: 56px clamp(14px, 3vw, 40px); background: radial-gradient(circle at 90% 10%, rgba(217,123,27,.10), transparent 21rem); box-shadow: none; }
.question-container { max-width: none; width: 100%; padding: 42px 44px; border: 1px solid var(--kkd-line); background: var(--kkd-card); box-shadow: 12px 12px 0 rgba(23,35,58,.08); }
.question-text { color: var(--kkd-ink); font-family: var(--font-main); font-size: clamp(22px, 2.6vw, 31px); font-weight: 600; line-height: 1.28; }
.option-item { gap: 14px; margin-top: 10px; padding: 15px 17px; border: 1px solid var(--kkd-line); border-radius: 0; background: var(--kkd-card); }.option-item:first-child { border-top: 1px solid var(--kkd-line); }.option-item:hover { border-color: var(--kkd-ink); background: #F7F1E6; }.custom-radio { width: 20px; height: 20px; margin-right: 0; border-color: var(--kkd-ink-soft); }.custom-radio.selected { border-color: var(--kkd-saffron); }.custom-radio.selected::after { width: 10px; height: 10px; background: var(--kkd-saffron); }.option-text { color: var(--kkd-ink); font-size: 15px; line-height: 1.45; }
.feedback-container { border-radius: 0; }.feedback-container.correct { border-left-color: #2F805F; background: #1d5c34; }.feedback-container.incorrect { border-left-color: #C34A4A; background: #7c212b; }.option-item.correct-answer { border-color: #2F805F; background: #1d5c34; }.option-item.correct-answer .option-text { color: #fff; }.option-item.wrong-answer { border-color: #C34A4A; background: #7c212b; }.option-item.wrong-answer .option-text { color: #fff; }
/* Ledger & Lantern exam controls: quiet navy surfaces, saffron emphasis, and compact mobile-safe labels. */
.exam-footer { height: 88px; padding: 0 40px; border-top: 1px solid var(--kkd-line); background: var(--kkd-card); box-shadow: 0 -2px 12px rgba(23,35,58,.04); }.circle-icon { color: var(--kkd-saffron); background: var(--kkd-ink); box-shadow: none; }.nav-icon { background: var(--kkd-saffron); }.btn-label { color: var(--kkd-ink); }.footer-btn:hover .circle-icon { background: #283757; }.footer-btn:hover .nav-icon { background: #B66210; }
.share-question-btn .share-icon { background: var(--kkd-saffron); color: var(--kkd-ink); }
.share-question-btn:hover .share-icon { background: #B66210; color: #FFFDF8; }
	.share-question-btn .btn-label { white-space: nowrap; }
	.social-share-btn .btn-label { white-space: nowrap; }
	.social-share-btn .circle-icon { font-size: 17px; }
	.whatsapp-share-btn .circle-icon { background: #2F805F; color: #FFFDF8; }
	.whatsapp-share-btn:hover .circle-icon { background: #246448; }
	.x-share-btn .circle-icon { background: var(--kkd-ink); color: #FFFDF8; }
	.x-share-btn:hover .circle-icon { background: #283757; }
	.btn-x-mark { font-family: Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 1; }
	@media (max-width: 760px) {
	    .exam-footer { padding: 0 16px; }
	    .footer-left, .footer-right { gap: 14px; }
	}
	@media (max-width: 560px) {
	    .share-question-btn .btn-label, .social-share-btn .btn-label { font-size: 10px; }
	    .share-question-btn .circle-icon, .social-share-btn .circle-icon { width: 30px; height: 30px; }
	    .footer-left, .footer-right { gap: 8px; }
	}

.modal-overlay { background: rgba(23,35,58,.54); }.modal-content { border: 1px solid var(--kkd-line); box-shadow: 10px 10px 0 rgba(217,123,27,.5); }.results-screen { top: 0; height: 100vh; padding-top: 0; align-items: center; background: rgba(23,35,58,.78); }.results-content { min-width: min(560px, calc(100vw - 40px)); padding: 48px; background: var(--kkd-card); box-shadow: 12px 12px 0 var(--kkd-saffron); }.results-content h2 { color: var(--kkd-ink); font-family: var(--font-main); font-size: 34px; }

@media (max-width: 900px) {
    .portal-toolbar, .pathway-heading { align-items: flex-start; flex-direction: column; }
    .sel-header-right { justify-content: flex-start; }
    .practice-hero { grid-template-columns: 1fr; gap: 30px; padding: 42px 34px; }
    .library-ledger { width: min(100%, 300px); }
    .pathway-section, .mock-intro { padding-left: 34px; padding-right: 34px; }
    .pdf-intro, .pdf-body { padding-left: 34px; padding-right: 34px; }
    .mock-options { padding-left: 34px; padding-right: 34px; }
    .selection-subtitle { text-align: left; }
    .exam-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    #selection-screen, #mock-selection-screen, #pdf-screen { padding: 0; }
    .portal-toolbar { padding: 17px 20px; }.sel-header-right { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }.sel-header-right > * { min-width: 0; }.sel-user-badge { order: -1; grid-column: 1 / -1; width: auto; justify-content: center; }.sel-btn { flex: none; width: 100%; justify-content: flex-start; }.sel-btn-quiet { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .practice-hero { padding: 38px 24px 34px; }.hero-copy h2 { font-size: 38px; }.pathway-section, .mock-intro { padding: 34px 24px; }.pdf-intro { padding: 30px 24px 4px; }.pdf-intro h2 { font-size: 27px; }.pdf-body { padding: 20px 24px 34px; }.mock-options { padding: 22px 24px 34px; }.pathway-heading h2 { font-size: 29px; }.exam-options { grid-template-columns: 1fr; }.exam-card { min-height: 185px; }
    .exam-main { padding: 20px 14px; }.question-container { padding: 28px 22px; box-shadow: 5px 5px 0 rgba(23,35,58,.08); }.question-text { font-size: 24px; }.exam-footer { height: 78px; padding: 0 18px; }.footer-left { display: none; }.footer-right { width: 100%; justify-content: space-between; gap: 0; }.header-panel { flex: 1 1 33%; }.header-title { display: none; }.header-logo { width: auto; }.exam-header { justify-content: flex-start; }.header-progress { order: 3; flex-basis: 100%; padding: 10px 20px; }
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
    .exam-container {
        height: auto;
        min-height: 100vh;
    }
    .exam-header {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-logo {
        width: 100%;
        justify-content: center;
        padding: 15px 0;
    }
    .header-panel {
        border-left: none;
        border-bottom: 1px solid #ddd;
        flex: 1 1 50%;
        min-width: 50%;
        padding: 15px;
        text-align: center;
        align-items: center;
    }
    .header-progress {
        flex: 1 1 100%;
        min-width: 100%;
    }
    .header-title {
        flex: 1 1 100%;
        min-width: 100%;
        border-bottom: none;
    }
    .header-exit {
        flex: 1 1 100%;
        min-width: 100%;
        border-right: none;
    }
    .exam-main {
        padding: 20px 15px;
        overflow-y: visible;
    }
    .exam-footer {
        height: auto;
        padding: 20px 15px;
        flex-direction: column;
        gap: 20px;
    }
    .footer-left, .footer-right {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }
    .selection-screen {
        padding: 20px 10px;
    }
    .selection-content {
        padding: 25px 15px;
    }
    .selection-title {
        font-size: 20px;
    }
    .sel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .sel-header-right {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sel-user-badge {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .sel-btn {
        flex: 1;
        justify-content: center;
        min-width: calc(33% - 6px);
        padding: 9px 8px;
        font-size: 12px;
    }
    .question-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .progress-modal-content {
        width: 95%;
    }
    .exam-options {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Firebase Auth UI Styles
   ========================================== */

.auth-tabs {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--acca-orange);
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 11px 0;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-main);
    border: none;
    cursor: pointer;
    background-color: var(--kkd-card);
    color: var(--acca-orange);
    transition: background 0.2s, color 0.2s;
    letter-spacing: 0.5px;
}

.auth-tab-active {
    background-color: var(--acca-orange);
    color: #fff;
}

.auth-form {
    display: block;
}

.auth-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #ccc;
    background-color: var(--kkd-input);
    border-radius: 5px;
    font-size: 15px;
    font-family: var(--font-main);
    margin-bottom: 11px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    outline: none;
    color: var(--text-dark);
}

.auth-input:focus {
    border-color: var(--acca-orange);
}

.auth-btn {
    width: 100%;
    padding: 12px;
    background-color: var(--acca-orange);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-main);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin-top: 4px;
}

.auth-btn:hover:not(:disabled) {
    background-color: #c97b0f;
}

.auth-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.auth-msg {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: none;
    line-height: 1.5;
}

.auth-error {
    background-color: #fdecea;
    color: #C12420;
    border: 1px solid #f5c6c4;
}

.auth-success {
    background-color: #eaf6ea;
    color: #2e7d32;
    border: 1px solid #b9ddb9;
}

.auth-link {
    font-size: 13px;
    color: var(--acca-orange);
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-main);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px 0 14px;
    color: #aaa;
    font-size: 13px;
    font-family: var(--font-main);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.auth-divider span {
    padding: 0 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--kkd-card);
    color: #444;
    border: 1.5px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.google-btn:hover {
    background: #f7f7f7;
    border-color: #bbb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Ledger & Lantern login/blog correction: editorial study-desk surfaces, navy structure, saffron action cues, and accessible mobile spacing. */
.login-portal {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(24, 50, 72, 0.11);
    background: rgba(255, 253, 248, 0.98);
}
.login-portal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: var(--kkd-saffron, #e5a13a);
}
.login-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -8px 0 22px;
    text-align: left;
}
.login-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    flex: 0 0 46px;
    border-radius: 14px 14px 14px 3px;
    background: var(--kkd-navy, #183248);
    color: #f6c36b;
    font-family: var(--font-main);
    font-size: 27px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(24, 50, 72, 0.18);
}
.login-eyebrow {
    margin: 0 0 3px;
    color: var(--kkd-saffron-deep, #9a641d);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}
.login-identity-label {
    margin: 0;
    color: var(--kkd-ink-soft, #65727c);
    font-size: 12px;
    line-height: 1.35;
}
.login-portal .selection-title {
    max-width: 360px;
    margin: 0 auto 12px;
    color: var(--kkd-navy, #183248);
    font-family: var(--font-main);
    font-size: clamp(28px, 5vw, 38px);
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.login-portal .selection-subtitle {
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
    color: var(--kkd-ink-soft, #65727c);
    line-height: 1.6;
}
.public-blog-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(154, 100, 29, 0.3);
    border-radius: 10px;
    background: #fff8e9;
    color: var(--kkd-saffron-deep, #8b5b18);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease, box-shadow 160ms ease;
}
.public-blog-link:hover {
    transform: translateY(-2px);
    background: #fff1cf;
    box-shadow: 0 8px 18px rgba(154, 100, 29, 0.12);
}
.public-blog-link:active { transform: scale(0.98); }
.public-blog-link .material-icons { font-size: 18px; }
.public-blog-arrow { margin-left: auto; font-size: 17px !important; }
/* Crawlable resource links on the login screen (SEO internal linking). */
.login-seo-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; font-size: 12.5px; }
.login-seo-links a { color: var(--kkd-ink-soft); text-decoration: none; border-bottom: 1px dotted var(--kkd-line); padding-bottom: 1px; }
.login-seo-links a:hover { color: var(--kkd-saffron); border-bottom-style: solid; }
.login-seo-links span { color: var(--kkd-line); }
[data-theme="dark"] .login-seo-links a { color: #b9c2d4; }
.blogs-page {
    background: var(--kkd-paper);
}
.blogs-content {
    border: 1px solid var(--kkd-line);
    background: var(--kkd-card);
    text-align: left;
}
.blogs-heading { flex: 1; padding-right: 18px; }
.blogs-heading h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 7px;
    color: var(--kkd-ink);
    font-family: var(--font-main);
    font-size: clamp(24px, 4vw, 34px);
    letter-spacing: -0.02em;
    line-height: 1.08;
}
.blogs-heading h2 .material-icons { color: var(--kkd-saffron-deep, #9a641d); font-size: 27px; }
.blogs-heading p:last-child { margin: 0; color: var(--kkd-ink-soft, #65727c); font-size: 13px; line-height: 1.55; }
@media (max-width: 560px) {
    .login-portal { padding: 28px 20px; }
    .blogs-content { padding: 24px 18px; }
    .blogs-content > div:first-child { align-items: flex-start !important; }
    .blogs-heading { padding-right: 8px; }
    .blogs-heading h2 { font-size: 25px; }
}

/* Ledger & Lantern spacing correction: compact page shells, content-sized selection states, and tighter editorial rhythm without changing the intentional full-screen exam interface. */
#selection-screen,
#mock-selection-screen,
#pdf-screen {
    min-height: auto;
    padding: 18px;
}
#selection-screen .selection-content,
#mock-selection-screen .selection-content,
#pdf-screen .selection-content {
    min-height: 0;
}
.portal-toolbar {
    min-height: 72px;
    padding: 14px 26px;
}
.pathway-section {
    padding: 34px 48px 42px;
}
.exam-card {
    min-height: 188px;
    padding: 18px;
}
.mock-shell {
    min-height: 0;
}
.mock-intro {
    padding: 38px 48px 24px;
}
.mock-options {
    padding: 22px 48px 42px;
}
.login-portal {
    min-height: 0;
}
.blogs-content {
    min-height: 0;
}
@media (max-width: 900px) {
    .pathway-section {
        padding: 32px 34px 38px;
    }
    .mock-intro {
        padding: 34px 34px 24px;
    }
    .mock-options {
        padding: 20px 34px 36px;
    }
}
@media (max-width: 620px) {
    #selection-screen,
    #mock-selection-screen,
    #pdf-screen {
        padding: 12px;
    }
    .portal-toolbar {
        min-height: 64px;
        padding: 14px 18px;
    }
    .pathway-section {
        padding: 28px 24px 34px;
    }
    .mock-intro {
        padding: 30px 24px 22px;
    }
    .mock-options {
        padding: 18px 24px 32px;
    }
}
/* Ledger & Lantern learner insights: an editorial study ledger with compact metrics, clear hierarchy, warm paper surfaces, and responsive stacking. */
.sel-user-name {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    max-width: 126px;
    overflow: hidden;
    padding: 2px 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.sel-user-name:hover { color: var(--kkd-saffron-deep, #9a641d); }
.sel-user-name:focus-visible,
.learner-insights-close:focus-visible,
.insights-close-action:focus-visible { outline: 3px solid rgba(200,120,36,.38); outline-offset: 3px; }

.learner-insights-overlay {
    z-index: 10020;
    padding: 18px;
    background: rgba(24, 50, 72, .54);
}
.learner-insights-modal-content {
    width: min(960px, 100%);
    max-height: min(780px, calc(100vh - 36px));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--kkd-line, #d8d2c5);
    border-radius: 0;
    background: var(--kkd-paper, #fffdf8);
    box-shadow: 0 28px 80px rgba(24,50,72,.24);
}
.learner-insights-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px 22px;
    border-bottom: 1px solid var(--kkd-line, #d8d2c5);
    background: linear-gradient(115deg, #fffdf8 0%, #f7f0e4 100%);
}
.learner-insights-header h2 {
    margin: 3px 0 6px;
    color: var(--kkd-ink, #183248);
    font-family: var(--font-main);
    font-size: clamp(26px, 4vw, 36px);
    letter-spacing: -.025em;
    line-height: 1;
}
.learner-insights-header p:last-child { margin: 0; color: var(--kkd-ink-soft, #65727c); font-size: 13px; line-height: 1.5; }
.learner-insights-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--kkd-line, #d8d2c5);
    border-radius: 50%;
    background: rgba(255,255,255,.58);
    color: var(--kkd-ink, #183248);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms cubic-bezier(.23, 1, .32, 1);
}
.learner-insights-close:hover { transform: rotate(8deg); background: var(--kkd-card); }
.learner-insights-body { padding: 22px 30px 26px; }
.learner-insights-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-left: 4px solid var(--kkd-saffron, #c87824);
    background: #f4ecdf;
}
.learner-insights-identity > .material-icons { color: var(--kkd-saffron-deep, #9a641d); font-size: 28px; }
.insights-learner-avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 3px solid #D97B1B; box-shadow: 0 4px 12px rgba(25, 50, 74, .22);
    background: #F7F1E6; cursor: zoom-in;
}
/* Profile-picture upload button in the Learner Insights modal. */
.insights-avatar-btn {
    position: relative; padding: 0; border: 0; background: none; cursor: pointer;
    border-radius: 50%; flex-shrink: 0; line-height: 0;
}
.insights-avatar-btn:disabled { opacity: .6; cursor: wait; }
.insights-avatar-btn .insights-learner-avatar { cursor: pointer; display: block; }
.insights-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24, 50, 72, .55); color: #fff;
    opacity: 0; transition: opacity .18s ease;
}
.insights-avatar-overlay .material-icons { font-size: 26px; }
.insights-avatar-btn:hover .insights-avatar-overlay,
.insights-avatar-btn:focus-visible .insights-avatar-overlay { opacity: 1; }
.insights-avatar-remove {
    margin-top: 4px; padding: 2px 0; border: 0; background: none; cursor: pointer;
    color: #b3402e; font-size: 12px; text-decoration: underline; text-align: left;
}
.insights-avatar-remove:disabled { opacity: .6; cursor: wait; }
.learner-insights-identity div { display: grid; gap: 3px; min-width: 0; }
.learner-insights-identity strong { color: var(--kkd-ink, #183248); font-family: var(--font-main); font-size: 19px; }
.learner-insights-identity span:not(.material-icons) { color: var(--kkd-ink-soft, #65727c); font-size: 12px; }
.insights-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.insight-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 13px;
    border: 1px solid var(--kkd-line, #d8d2c5);
    background: rgba(255,255,255,.7);
}
.insight-metric > .material-icons { flex: 0 0 auto; color: var(--kkd-saffron-deep, #9a641d); font-size: 22px; }
.insight-metric div { display: grid; min-width: 0; gap: 2px; }
.insight-metric strong { color: var(--kkd-ink, #183248); font-family: var(--font-main); font-size: 24px; line-height: 1; }
.insight-metric span:last-child { color: var(--kkd-ink-soft, #65727c); font-size: 11px; line-height: 1.25; }
.learner-insights-columns { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr); gap: 18px; margin-top: 22px; }
.insights-section { min-width: 0; padding: 17px; border: 1px solid var(--kkd-line, #d8d2c5); background: rgba(255,255,255,.5); }
.insights-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.insights-section-heading .eyebrow { margin-bottom: 4px; }
.insights-section-heading h3 { margin: 0; color: var(--kkd-ink, #183248); font-family: var(--font-main); font-size: 21px; line-height: 1.05; }
.insights-section-note { color: var(--kkd-ink-soft, #65727c); font-size: 11px; white-space: nowrap; }
.insights-paper-list, .insights-activity-list { display: grid; gap: 9px; }
.insights-paper-row { display: grid; gap: 6px; }
.insights-paper-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.insights-paper-meta strong { color: var(--kkd-ink, #183248); }
.insights-paper-meta span { color: var(--kkd-saffron-deep, #9a641d); font-weight: 800; }
.insights-progress-track { height: 6px; overflow: hidden; background: #e8e0d2; }
.insights-progress-fill { height: 100%; background: var(--kkd-saffron, #c87824); transition: width 220ms cubic-bezier(.23, 1, .32, 1); }
.insights-paper-detail { color: var(--kkd-ink-soft, #65727c); font-size: 11px; }
.insights-activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(216,210,197,.8); }
.insights-activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.insights-activity-icon { color: var(--kkd-saffron-deep, #9a641d); font-size: 19px; }
.insights-activity-copy { display: grid; gap: 2px; min-width: 0; }
.insights-activity-copy strong { overflow: hidden; color: var(--kkd-ink, #183248); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.insights-activity-copy span, .insights-activity-time { color: var(--kkd-ink-soft, #65727c); font-size: 11px; }
.insights-activity-time { white-space: nowrap; }
.insights-empty-state { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--kkd-saffron, #c87824); background: #fff9ef; }
.insights-empty-state[hidden] { display: none; }
.insights-empty-state > .material-icons { color: var(--kkd-saffron-deep, #9a641d); font-size: 25px; }
.insights-empty-state strong { color: var(--kkd-ink, #183248); font-size: 13px; }
.insights-empty-state p { margin: 3px 0 0; color: var(--kkd-ink-soft, #65727c); font-size: 12px; line-height: 1.45; }
.learner-insights-footer { display: flex; align-items: center; gap: 7px; padding: 13px 30px; border-top: 1px solid var(--kkd-line, #d8d2c5); color: var(--kkd-ink-soft, #65727c); font-size: 11px; }
.learner-insights-footer > .material-icons { color: var(--kkd-saffron-deep, #9a641d); font-size: 16px; }
.insights-close-action { margin-left: auto; border: 1px solid var(--kkd-ink, #183248); padding: 8px 14px; background: var(--kkd-ink, #183248); color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.insights-close-action:hover { background: var(--kkd-saffron-deep, #9a641d); border-color: var(--kkd-saffron-deep, #9a641d); }
@media (max-width: 760px) {
    .learner-insights-overlay { padding: 10px; }
    .learner-insights-modal-content { max-height: calc(100vh - 20px); }
    .learner-insights-header, .learner-insights-body { padding-left: 18px; padding-right: 18px; }
    .learner-insights-footer { padding-left: 18px; padding-right: 18px; }
    .insights-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .learner-insights-columns { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .learner-insights-header { gap: 10px; padding-top: 20px; padding-bottom: 18px; }
    .learner-insights-header h2 { font-size: 28px; }
    .insight-metric { padding: 12px 10px; }
    .insight-metric strong { font-size: 21px; }
    .insights-section { padding: 14px; }
    .learner-insights-footer { align-items: flex-start; flex-wrap: wrap; }
    .insights-close-action { margin-left: 0; }
}

/* ── Avatar zoom lightbox ─────────────────────────────────────────── */
.chat-avatar img, #header-profile-emoji img, .chat-quote-avatar { cursor: zoom-in; }
.avatar-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    animation: avatarZoomIn .18s ease-out;
}
.avatar-lightbox[hidden] { display: none; }
.avatar-lightbox-backdrop {
    position: absolute; inset: 0; background: rgba(23, 35, 58, .82);
    backdrop-filter: blur(3px); cursor: zoom-out;
}
.avatar-lightbox-img {
    position: relative; max-width: 82vmin; max-height: 82vmin;
    width: 320px; height: 320px; object-fit: cover;
    border-radius: 28px; border: 4px solid #D97B1B;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5); background: var(--kkd-card);
}
.avatar-lightbox-close {
    position: absolute; top: 18px; right: 22px;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: #D97B1B; color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.avatar-lightbox-close:hover { background: #b5650f; }
@keyframes avatarZoomIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ==========================================
   Fit-to-screen exam attempt (no page scroll)
   The question, its options and the answer
   explanation always fit the viewport on
   desktop and mobile. JS may shrink
   --exam-fit (down to 0.70) for long items.
   ========================================== */
.exam-container {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    --exam-fit: 1;
}
.exam-header {
    flex: 0 0 auto;
}
.exam-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(10px, 2.4vh, 36px) clamp(12px, 4vw, 10%);
}
.question-container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 1020px;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(12px, 2.6vh, 38px) clamp(14px, 3vw, 44px);
}
.question-text {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: calc(clamp(15px, 2.6vh, 26px) * var(--exam-fit));
    line-height: 1.35;
    margin-bottom: clamp(8px, 1.8vh, 22px);
}
.options-list {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: clamp(2px, 0.7vh, 8px);
}
.option-item {
    padding: clamp(5px, 1vh, 10px) 0;
}
.option-text {
    font-size: calc(clamp(13px, 2vh, 16px) * var(--exam-fit));
    line-height: 1.35;
}
.custom-radio {
    width: 16px;
    height: 16px;
    margin-right: 12px;
}
.feedback-container {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    margin-top: clamp(8px, 1.6vh, 18px);
    padding: clamp(8px, 1.5vh, 14px) clamp(10px, 2vw, 18px);
    gap: 10px;
}
.feedback-icon {
    font-size: calc(clamp(18px, 2.6vh, 24px) * var(--exam-fit));
}
.feedback-content h4 {
    font-size: calc(clamp(14px, 2.1vh, 18px) * var(--exam-fit));
    margin: 0 0 4px 0;
}
.feedback-content p {
    font-size: calc(clamp(12px, 1.9vh, 15px) * var(--exam-fit));
    line-height: 1.45;
}
.exam-footer {
    flex: 0 0 auto;
}
/* Overflow tail: the question text (with tables) and the answer
   explanation get an internal scroll; the card stays fixed to the
   viewport and options/buttons stay on screen. */
.exam-container.exam-min-fit .question-text,
.exam-container.exam-min-fit .feedback-container {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Compact exam chrome on mobile so the question fits */
@media (max-width: 768px) {
    .exam-header {
        min-height: 0;
        flex-wrap: wrap;
    }
    .exam-header .header-panel {
        border-left: none;
        border-bottom: none;
        text-align: left;
    }
    .exam-header .header-logo {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: 8px 4px 8px 10px;
    }
    .exam-header .logo-box {
        font-size: 15px;
        padding: 6px 10px;
    }
    .exam-header .header-question-info {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1px;
        padding: 6px 8px;
        font-size: 11px;
    }
    .exam-header .header-timer {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        align-items: flex-end;
        padding: 6px 8px;
        font-size: 10px;
    }
    .exam-header .timer-text {
        font-size: 14px;
        margin-top: 1px;
    }
    .exam-header .header-exit {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 6px 10px 6px 4px;
        border-right: none;
    }
    .exam-header .exit-icon-box {
        width: 26px;
        height: 26px;
        margin-bottom: 0;
    }
    .exam-header .exit-icon { font-size: 15px; }
    .exam-header .exit-text { font-size: 10px; }
    .exam-header .header-progress {
        flex: 1 1 100%;
        min-width: 100%;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 2px 12px 8px;
    }
    .exam-header .progress-container {
        flex: 1 1 auto;
        max-width: none;
        margin-bottom: 0;
    }
    .exam-header .progress-bar-bg { height: 10px; }
    .exam-header .progress-text { line-height: 10px; font-size: 9px; }
    .exam-header .progress-details-link { font-size: 10px; white-space: nowrap; }
    .exam-header .header-title { display: none; }
    .exam-footer {
        height: auto;
        min-height: 62px;
        padding: 6px 8px;
        flex-direction: row;
        gap: 0;
    }
    .exam-footer .footer-left { display: none; }
    .exam-footer .footer-right {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 2px;
    }
    .exam-footer .footer-btn {
        gap: 2px;
        padding: 2px;
        min-width: 0;
    }
    .exam-footer .circle-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
    }
    .exam-footer .btn-label {
        font-size: 9px;
        white-space: nowrap;
    }
}
/* Hide the WhatsApp channel popup while a mock is being attempted
   so it never covers exam buttons. */
.kkd-exam-active .kkd-whatsapp-channel { display: none; }

/* Hide the floating channel popups while the community chat is open
   so they never cover the chat typing field. */
.kkd-chat-active .kkd-whatsapp-channel,
.kkd-chat-active .kkd-telegram-channel { display: none; }

/* ── Public Result Board (selection screen) ───────────────────────────── */
.result-board-section { margin-top: 30px; }

/* ── Homepage marketplace strip (below mocks) ───────────────────────── */
.mk-home-section { padding: 34px 48px 10px; }
.mk-home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mk-home-viewall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--kkd-saffron); font-size: 13.5px; font-weight: 800; text-decoration: none; padding-bottom: 6px; }
.mk-home-viewall:hover { text-decoration: underline; }
.mk-home-list { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.mk-home-loading { text-align: center; color: var(--kkd-ink-soft); font-size: 13px; padding: 18px 12px; }
.mk-home-item { flex: 0 0 auto; width: 208px; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: var(--kkd-card); border: 1px solid var(--kkd-line); border-radius: 12px; padding: 0; cursor: pointer; font-family: var(--font-main); transition: border-color .15s ease, box-shadow .15s ease; overflow: hidden; }
.mk-home-item:hover { border-color: var(--kkd-saffron); box-shadow: 0 8px 18px rgba(24,50,72,.10); }
.mk-home-thumb { width: 100%; height: 118px; overflow: hidden; background: var(--kkd-canvas); display: grid; place-items: center; font-size: 34px; }
.mk-home-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-home-info { padding: 10px 12px 2px; min-width: 0; }
.mk-home-info strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--kkd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-home-info small { display: block; font-size: 11.5px; color: var(--kkd-ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-home-price { padding: 6px 12px 12px; font-size: 14px; font-weight: 800; color: var(--kkd-saffron); white-space: nowrap; }
@media (max-width: 900px) { .mk-home-section { padding: 32px 34px 8px; } }
@media (max-width: 620px) {
    .mk-home-section { padding: 28px 24px 6px; }
    .mk-home-item { width: 172px; }
    .mk-home-thumb { height: 100px; }
}
[data-theme="dark"] .mk-home-item { border-color: #2D3B59; }
[data-theme="dark"] .mk-home-item:hover { border-color: var(--kkd-saffron); }
[data-theme="dark"] .mk-home-thumb { background: #1A2540; }

/* ── Free video lectures (homepage category) ────────────────────────── */
.vl-group-sub { font-size: 12.5px; color: var(--kkd-ink-soft); margin: 4px 0 0; line-height: 1.4; }
.vl-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--kkd-line); background: var(--kkd-card); color: var(--kkd-ink); font-family: var(--font-main); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vl-back .material-icons { font-size: 18px; }
.vl-listrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: var(--kkd-card); border: 1px solid var(--kkd-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.vl-listrow:hover { border-color: #D97B1B; }
.vl-listrow.open { border-color: #D97B1B; box-shadow: 0 8px 18px rgba(24,50,72,.12); }
.vl-bignum { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 10px; background: #17233A; color: #FFFDF8; font-size: 18px; font-weight: 800; display: grid; place-items: center; }
.vl-listtitle { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--kkd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-listtitle b { color: #D97B1B; font-weight: 800; }
.vl-rowgo { color: #D97B1B; font-size: 26px; flex: 0 0 auto; }
.vl-playerwrap { position: relative; flex: 1 1 100%; margin-top: 6px; border-radius: 10px; overflow: hidden; background: #0d1526; }
.vl-playerwrap iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.vl-playerwrap:fullscreen { border-radius: 0; margin-top: 0; background: #000; display: flex; flex-direction: column; justify-content: center; }
.vl-playerwrap:fullscreen iframe { aspect-ratio: auto; flex: 1; min-height: 0; }
.vl-playerbar { display: flex; gap: 8px; padding: 8px 10px; background: #0d1526; }
.vl-pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,253,248,.35); background: transparent; color: #FFFDF8; font-family: var(--font-main); font-size: 13px; font-weight: 700; cursor: pointer; }
.vl-pbtn .material-icons { font-size: 18px; }
.vl-pbtn:disabled { opacity: .5; cursor: default; }
.vl-pbtn:active { background: rgba(217,123,27,.25); }
.vl-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: #17233A; color: #FFFDF8; font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9999; max-width: 88vw; text-align: center; }
.vl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.result-board-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--kkd-card); border: 1px solid #E7DCC8; border-radius: 6px;
}
.rb-rank { font-size: 15px; min-width: 30px; text-align: center; font-weight: 800; color: #955318; }
.rb-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: #E9DFC9; }
.rb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-who strong { font-size: 13px; color: var(--kkd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-who small { font-size: 11px; color: #8a8fa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-score { font-size: 15px; font-weight: 800; color: var(--kkd-ink); }
.rb-pill { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rb-pill.pass { background: #e8f5e9; color: #2e7d32; }
.rb-pill.fail { background: #fdecea; color: #c62828; }
@media (max-width: 560px) {
  .rb-who small { display: none; }
}

/* Result board LIVE indicator */
.rb-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #2e7d32;
  background: #e8f5e9; border-radius: 999px; padding: 3px 9px;
}
.rb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2e7d32; animation: rb-pulse 1.6s ease-in-out infinite; }
@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Push notification soft prompt ───────────────────────────────────── */


/* Hide floating channel pills on the login / registration screen */
body.kkd-on-login .kkd-whatsapp-channel,
body.kkd-on-login .kkd-telegram-wrap,
body.kkd-on-login .kkd-telegram-channel { display: none !important; }

/* ── Push permission prompt: clean card, bottom on mobile ── */
.kkd-push-prompt{position:fixed;z-index:150000;display:flex;align-items:center;gap:12px;background:#17233a;color:#f5efe4;border:1px solid #d97b1b;border-radius:16px;padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.4);font-family:var(--font-main);animation:kkd-push-slide .3s ease-out;left:50%;transform:translateX(-50%);bottom:24px;top:auto;max-width:min(440px,calc(100vw - 32px));}
@keyframes kkd-push-slide{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}
.kkd-push-prompt .material-icons{color:#d97b1b;font-size:30px;flex-shrink:0;background:rgba(217,123,27,.14);border-radius:50%;padding:8px;}
.kkd-push-prompt-text{display:flex;flex-direction:column;line-height:1.4;font-size:13px;flex:1;min-width:0;}
.kkd-push-prompt-text strong{font-size:15px;margin-bottom:2px;}
.kkd-push-prompt-text span{color:#c8bfae;font-size:12.5px;}
.kkd-push-enable{background:#d97b1b;color:#fff;border:none;border-radius:10px;font-weight:700;padding:10px 18px;cursor:pointer;white-space:nowrap;font-size:14px;flex-shrink:0;}
.kkd-push-enable:hover{background:#e88f2e;}
.kkd-push-dismiss{background:rgba(255,255,255,.08);border:none;color:#f5efe4;font-size:14px;cursor:pointer;padding:8px;flex-shrink:0;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;}
.kkd-push-dismiss:hover{background:rgba(255,255,255,.16);}
@media (min-width: 561px){
.kkd-push-prompt{top:16px;bottom:auto;}
@keyframes kkd-push-slide{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
}

/* ── Mobile student-friendly tuning ──────────────────────────────────
   Phone-only layout & readability settings. No theme changes — same
   colors, same typefaces; only spacing, sizing and touch behavior. */
@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    html, body { overflow-x: clip; }

    /* iOS Safari auto-zooms the page when a sub-16px field is tapped. */
    .auth-input, .chat-input, #formula-bar,
    .crq-task textarea, textarea, select { font-size: 16px; }

    /* Chat gets the whole phone screen instead of an 88vh box. */
    .chat-shell { height: calc(100vh - 36px); height: calc(100dvh - 36px); }
    .chat-input-row {
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Exam footer: real touch targets, clear of the home indicator. */
    .exam-footer { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
    .exam-footer .footer-btn { padding: 8px 10px; }
    .exam-footer .btn-label { font-size: 10px; }

    /* Updates open as a thumb-friendly bottom sheet on phones. */
    .announce-panel {
        top: auto; left: 12px; right: 12px; width: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        max-height: 72vh; max-height: 72dvh;
    }
}
@media (max-width: 620px) {
    /* One swipeable action row instead of a tall 2-column button grid,
       so students reach the content faster. */
    .sel-header-right {
        display: flex; flex-wrap: nowrap; align-items: stretch;
        gap: 8px; width: 100%; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding-bottom: 2px;
    }
    .sel-header-right::-webkit-scrollbar { display: none; }
    .sel-header-right > * { flex: 0 0 auto; min-width: 0; }
    .sel-user-badge { order: -1; max-width: 46%; justify-content: flex-start; }
    .sel-btn { width: auto; }
    .sel-btn-quiet { width: auto; }

    .chat-shell { height: calc(100vh - 24px); height: calc(100dvh - 24px); }
}

/* ── Mobile paper dashboard (Fusion-style, Ledger & Lantern theme) ─────────
   Phone-only. Desktop keeps the existing toolbar + mock-intro untouched. */
.kkd-m-appbar, .kkd-m-dash, .kkd-m-drawer, .kkd-m-scrim { display: none; }

@media (max-width: 640px) {
    #mock-selection-screen .portal-toolbar { display: none; }
    #mock-selection-screen .mock-intro { display: none; }
    /* Home screen: toolbar actions live only in the drawer now — the dark
       app bar (burger + brand + dp) replaces the whole toolbar on phones. */
    #selection-screen .portal-toolbar { display: none; }

    /* Dark app bar */
    .kkd-m-appbar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 60;
        background: #17233A; color: #fff;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
        margin: 0 -15px;
    }
    .kkd-m-burger {
        background: none; border: none; color: #fff; padding: 6px;
        display: grid; place-items: center; cursor: pointer; min-width: 40px; min-height: 40px;
    }
    .kkd-m-brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
    .kkd-m-mark {
        width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px;
        background: #D97B1B; color: #17233A;
        font-family: var(--font-main); font-weight: 700; font-size: 19px;
        display: grid; place-items: center;
    }
    .kkd-m-brandtext { font-family: var(--font-main); font-weight: 700; font-size: 19px; letter-spacing: .01em; line-height: 1; }
    .kkd-m-brandtext small { display: block; font-family: inherit; font-weight: 400; font-size: 10px; letter-spacing: .18em; opacity: .75; margin-top: 3px; }
    .kkd-m-dp {
        width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; overflow: hidden;
        border: 2px solid #D97B1B; background: var(--kkd-card); padding: 0; cursor: pointer;
    }
    .kkd-m-dp img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Welcome + paper pill */
    .kkd-m-dash { display: block; padding: 20px 0 0; }
    .kkd-m-welcome { font-family: var(--font-main); font-size: 26px; line-height: 1.2; color: var(--kkd-ink); margin: 0 0 5px; }
    .kkd-m-tagline { color: #5b6675; font-size: 14px; margin: 0 0 16px; }
    .kkd-m-paper-pill {
        display: flex; align-items: center; gap: 12px;
        background: var(--kkd-card); border: 1px solid #e7e0d2; border-radius: 14px;
        padding: 12px 14px; box-shadow: 0 2px 10px rgba(23, 35, 58, .06);
    }
    .kkd-m-paper-code {
        background: #17233A; color: #fff; font-weight: 800; font-size: 15px;
        border-radius: 10px; padding: 9px 13px; flex: 0 0 auto;
    }
    .kkd-m-paper-name { font-weight: 600; color: var(--kkd-ink); font-size: 15px; }

    /* 2×2 stat cards */
    .kkd-m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
    .kkd-m-stat {
        background: var(--kkd-card); border: 1px solid #e7e0d2; border-radius: 16px;
        padding: 14px; box-shadow: 0 2px 10px rgba(23, 35, 58, .06); min-width: 0;
    }
    .kkd-m-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
    .kkd-m-stat-ic .material-icons { font-size: 24px; }
    .kkd-m-ic-ink { background: #e8edf5; color: var(--kkd-ink); }
    .kkd-m-ic-saffron { background: #f7e8d3; color: #b25f0e; }
    .kkd-m-ic-green { background: #e4f2e7; color: #2e7d32; }
    .kkd-m-stat p { margin: 0 0 2px; font-size: 13px; color: #5b6675; }
    .kkd-m-stat strong { font-family: var(--font-main); font-size: 27px; color: var(--kkd-ink); line-height: 1.1; }
    .kkd-m-stat small { display: block; font-size: 12px; color: #8a93a1; margin-top: 6px; text-align: right; }
    .kkd-m-bar { display: block; height: 6px; background: #eef0f3; border-radius: 3px; margin-top: 8px; overflow: hidden; }
    .kkd-m-bar i { display: block; height: 100%; background: #D97B1B; border-radius: 3px; transition: width .4s ease; }

    /* WhatsApp channel banner */
    .kkd-m-wa {
        background: #e9f7ee; border: 1px solid #cfe8d6; border-radius: 16px;
        padding: 16px; margin: 4px 0 20px;
    }
    .kkd-m-wa-title { color: #14532d; font-weight: 800; font-size: 16px; margin: 0 0 4px; }
    .kkd-m-wa-sub { color: #2f5d3a; font-size: 13px; margin: 0 0 12px; }
    .kkd-m-wa-btn {
        display: inline-flex; align-items: center; gap: 8px;
        background: #22c55e; color: #fff; font-weight: 700; font-size: 15px;
        padding: 10px 20px; border-radius: 10px; text-decoration: none;
        min-height: 44px;
    }
    .kkd-m-wa-btn svg { width: 20px; height: 20px; fill: #fff; }
    .kkd-m-wa-btn:active { background: #16a34a; }

    /* Hamburger drawer */
    .kkd-m-scrim {
        display: block; position: fixed; inset: 0; z-index: 90;
        background: rgba(15, 22, 38, .55);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
    }
    .kkd-m-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 91;
        width: min(300px, 84vw);
        background: var(--kkd-card);
        transform: translateX(-104%); transition: transform .28s ease;
        box-shadow: 4px 0 24px rgba(23, 35, 58, .25);
        padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(14px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    body.kkd-m-drawer-open { overflow: hidden; }
    body.kkd-m-drawer-open .kkd-m-scrim { opacity: 1; visibility: visible; }
    body.kkd-m-drawer-open .kkd-m-drawer { transform: none; }
    .kkd-m-drawer-head {
        display: flex; align-items: center; gap: 12px;
        padding: 2px 16px 14px; border-bottom: 1px solid #eee4d2; margin-bottom: 6px;
    }
    .kkd-m-drawer-head img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #D97B1B; object-fit: cover; }
    .kkd-m-drawer-who { flex: 1; min-width: 0; }
    .kkd-m-drawer-who strong { display: block; color: #17233A; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kkd-m-drawer-who small { color: #8a93a1; font-size: 11px; letter-spacing: .12em; }
    .kkd-m-drawer-close { background: none; border: none; color: var(--kkd-ink); padding: 8px; cursor: pointer; }
    .kkd-m-drawer > button, .kkd-m-drawer > a {
        display: flex; align-items: center; gap: 13px;
        padding: 13px 18px; background: none; border: none; cursor: pointer;
        color: var(--kkd-ink); font-size: 15px; font-weight: 600; font-family: inherit;
        text-decoration: none; text-align: left; min-height: 48px;
    }
    .kkd-m-drawer > button .material-icons, .kkd-m-drawer > a .material-icons { color: #D97B1B; font-size: 22px; }
    .kkd-m-drawer > button:active, .kkd-m-drawer > a:active { background: #f4ecdf; }
}

/* ── Mobile login: fixed viewport, no page scroll ───────────────────────── */
.login-visitor-box {
    margin-top: 32px;
    text-align: center;
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
}
/* ── Full-screen split login: fills the viewport, no page scroll, no empty sides ── */
#access-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    background: #17233a;
}
#access-screen .login-portal {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    background: var(--kkd-card);
    overflow: hidden;
}
#access-screen .login-portal::before { display: none; }

/* Left: brand panel fills the old "empty side" */
.login-brand {
    position: relative;
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 48px 60px;
    overflow: hidden;
    color: #f7f1e6;
    background:
        radial-gradient(110% 85% at 12% 6%, rgba(229,161,58,.17) 0%, rgba(229,161,58,0) 55%),
        linear-gradient(150deg, #24344f 0%, #17233a 55%, #101a2c 100%);
}
.login-brand::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 6px;
    background: linear-gradient(180deg, #e5a13a, #d97b1b);
}
#access-screen .login-identity { margin: 0; }
#access-screen .login-eyebrow { color: #f6c36b; }
#access-screen .login-identity-label { color: rgba(247,241,230,.72); }
.login-headline {
    margin: 0;
    max-width: 520px;
    color: #fffdf8;
    font-family: var(--font-main);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}
.login-sub {
    margin: 0;
    max-width: 460px;
    color: rgba(247,241,230,.78);
    font-size: 15px;
    line-height: 1.6;
}
.login-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.login-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(247,241,230,.88);
}
.login-points .material-icons {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(229,161,58,.16);
    border: 1px solid rgba(229,161,58,.45);
    color: #f6c36b;
    font-size: 20px;
}
.login-points strong { color: #fffdf8; }
.login-brand-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 6px;
}
.login-brand-foot .public-blog-link {
    width: auto;
    margin: 0;
    background: rgba(229,161,58,.14);
    border-color: rgba(229,161,58,.5);
    color: #f6c36b;
}
.login-brand-foot .visitor-badge { padding: 8px 16px; }

/* Right: form column */
.login-formwrap {
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--kkd-card);
}
.login-form-inner { width: 100%; max-width: 400px; }

/* Phones/tablets: stacked, compact, still no page scroll */
@media (max-width: 900px) {
    #access-screen .login-portal { flex-direction: column; }
    .login-brand {
        flex: 0 0 auto;
        gap: 10px;
        padding: 22px 22px 18px;
        justify-content: flex-start;
    }
    .login-brand::after {
        top: auto; bottom: 0; left: 0; right: 0;
        width: auto; height: 5px;
        background: linear-gradient(90deg, #e5a13a, #d97b1b);
    }
    .login-headline { font-size: 24px; max-width: none; }
    .login-sub, .login-points { display: none; }
    .login-brand-foot { margin-top: 2px; gap: 10px 12px; }
    .login-brand-foot .public-blog-link { padding: 8px 12px; font-size: 12px; }
    .login-brand-foot .visitor-badge { padding: 6px 12px; }
    .login-brand-foot .visitor-badge .material-icons { font-size: 20px; }
    .login-brand-foot .visitor-badge-num { font-size: 18px; }
    .login-formwrap {
        flex: 1 1 auto;
        align-items: flex-start;
        padding: 22px 20px 26px;
        scrollbar-width: none;
    }
    .login-formwrap::-webkit-scrollbar { display: none; }
    .login-form-inner { max-width: 440px; margin: 0 auto; }
    #access-screen .auth-input { font-size: 16px; }
}

/* ── Exam level category tiles (Knowledge / Skills) ─────────────────────── */
.kkd-cat-tiles { display: flex; gap: 12px; margin: 6px 0 20px; }
.kkd-cat-tile {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--kkd-card);
  border: 1px solid #E7DCC8;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-main);
  color: var(--kkd-ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.kkd-cat-tile strong { font-size: 17px; font-weight: 700; }
.kkd-cat-tile small { font-size: 12px; color: #8a93a1; white-space: nowrap; }
.kkd-cat-tile:hover { border-color: #D97B1B; box-shadow: 0 2px 10px rgba(23, 35, 58, .08); }
.kkd-cat-tile.active { background: #17233A; border-color: var(--kkd-ink); color: #FFFDF8; box-shadow: 0 4px 14px rgba(23, 35, 58, .25); }
.kkd-cat-tile.active small { color: #d8a75f; }

/* ── Coming-soon panel for papers whose bank is still being prepared ───── */
.kkd-coming-soon-panel {
  grid-column: 1 / -1;
  text-align: center;
  padding: 52px 24px;
  background: var(--kkd-card);
  border: 1px dashed #c9bfa9;
  border-radius: 12px;
  color: #586275;
}
.kkd-coming-soon-panel .material-icons { font-size: 42px; color: #D97B1B; }
.kkd-coming-soon-panel h3 { font-family: var(--font-main); color: #17233A; font-size: 22px; margin: 12px 0 8px; }
.kkd-coming-soon-panel p { max-width: 520px; margin: 0 auto; font-size: 14px; line-height: 1.6; }
.crq-card-ref { margin: 4px 0 0; font-size: 13px; color: #586275; }

@media (max-width: 640px) {
  .kkd-cat-tiles { gap: 8px; margin: 2px 0 4px; }
  .kkd-cat-tile { padding: 12px 14px; border-radius: 12px; }
  .kkd-cat-tile strong { font-size: 15px; }
  .kkd-cat-tile small { font-size: 11px; }
}

/* ── Mobile home dashboard (Fusion-style, Ledger & Lantern theme) ──────────
   Phone-only. Desktop keeps the existing hero + pathway cards untouched. */
.kkd-m-home-dash { display: none; }

/* ── Battle Mode banner (home page, all screens) ───────────────────────── */
.bt-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 18px 0 4px; padding: 20px 22px; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, #7f1d1d 0%, #b91c1c 55%, #dc2626 100%);
  box-shadow: 0 12px 28px rgba(127, 29, 29, .30);
  overflow: hidden; position: relative;
}
.bt-banner::after {
  content: "⚔️"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%) rotate(-12deg);
  font-size: 120px; opacity: .14; pointer-events: none;
}
.bt-banner-kicker {
  margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #fecaca;
}
.bt-banner h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #fff; }
.bt-banner-tx p { margin: 0; font-size: 14px; color: #fee2e2; }
.bt-banner-btn {
  flex: 0 0 auto; border: none; cursor: pointer; border-radius: 999px;
  background: #fff; color: #991b1b; font-weight: 800; font-size: 15px;
  padding: 13px 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  position: relative; z-index: 1;
}
.bt-banner-btn:active { transform: scale(.96); }
@media (max-width: 640px) {
  .bt-banner { flex-direction: column; align-items: stretch; text-align: left; padding: 18px; margin: 14px 0 2px; }
  .bt-banner h2 { font-size: 22px; }
  .bt-banner-btn { width: 100%; text-align: center; }
}

@media (max-width: 640px) {
    .kkd-m-home-dash { display: block; padding: 18px 0 0; }
    #selection-screen .practice-hero { display: none; }
    #selection-screen .pathway-heading:not(.rb-heading) { display: none; }
    #selection-screen .pathway-section { padding: 4px 0 10px; }

    .kkd-m-papers-title { font-family: var(--font-main); font-size: 20px; color: var(--kkd-ink); margin: 18px 0 12px; }
    .kkd-m-papers-title small { display: block; font-size: 12px; color: #8a93a1; font-weight: 400; font-family: inherit; margin-top: 3px; }

    /* Paper cards become a numbered row list (01–07), like the reference */
    #selection-screen #exam-options { counter-reset: kkd-paper; display: flex; flex-direction: column; gap: 10px; }
    #selection-screen .exam-card {
        counter-increment: kkd-paper;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "num code arrow"
            "num name arrow"
            "num meta arrow";
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        min-height: 0;
        padding: 13px 14px;
        text-align: left;
        background: var(--kkd-card);
        border: 1px solid #e7e0d2;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(23, 35, 58, .06);
    }
    #selection-screen .exam-card::before {
        grid-area: num;
        content: counter(kkd-paper, decimal-leading-zero);
        width: 36px; height: 36px;
        border-radius: 10px;
        background: #17233A;
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 13px;
    }
    #selection-screen .exam-card-top { grid-area: code; display: block; }
    #selection-screen .subject-icon { display: none; }
    #selection-screen .exam-card-code { font-size: 11px; color: #b25f0e; letter-spacing: .1em; }
    #selection-screen .exam-card h3 { grid-area: name; margin: 0; font-size: 16px; }
    #selection-screen .exam-card p { display: none; }
    #selection-screen .exam-card-bottom { display: contents; }
    #selection-screen .exam-card-bottom > span:first-child { grid-area: meta; font-size: 11px; color: #8a93a1; font-weight: 600; }
    #selection-screen .card-action { grid-area: arrow; font-size: 0; color: #D97B1B; }
    #selection-screen .card-action .material-icons { font-size: 24px; }
    #selection-screen .exam-card:hover { transform: none; box-shadow: 0 2px 10px rgba(23, 35, 58, .1); }
}

/* ── Materials banner (phone home dashboard, above the WhatsApp banner) ─── */
.kkd-m-materials { display: none; }
@media (max-width: 640px) {
    .kkd-m-materials {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 0 10px;
        padding: 14px;
        border: none;
        border-radius: 14px;
        background: #17233A;
        color: #fff;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(23, 35, 58, .25);
    }
    .kkd-m-materials:active { transform: scale(.99); }
    .kkd-m-materials-ic {
        flex: 0 0 42px;
        width: 42px; height: 42px;
        border-radius: 12px;
        background: #D97B1B;
        display: grid;
        place-items: center;
    }
    .kkd-m-materials-ic .material-icons { color: #17233A; font-size: 24px; }
    .kkd-m-materials-tx { flex: 1; min-width: 0; }
    .kkd-m-materials-tx strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
    .kkd-m-materials-tx small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
    .kkd-m-materials-go { color: #D97B1B; font-size: 24px; }
}

/* ═══════════ Light / dark theme ═══════════ */
[data-theme="dark"] {
    --kkd-ink: #EAE3D0;
    --kkd-ink-soft: #9AA6BE;
    --kkd-paper: #1A2540;
    --kkd-canvas: #0D1526;
    --kkd-card: #1A2540;
    --kkd-input: #0F1A30;
    --kkd-line: #2D3B59;
    --kkd-mint: #1D2E4A;
    --kkd-rose: #33304A;
    --bg-main: #0D1526;
    --bg-header: #152039;
    --text-dark: #EAE3D0;
    --border-color: #2D3B59;
}
/* Ink-based dark panels keep a deep background in dark mode */
[data-theme="dark"] .portal-mark,
[data-theme="dark"] .practice-hero,
[data-theme="dark"] .sel-btn-dark,
[data-theme="dark"] .x-share-btn .circle-icon,
[data-theme="dark"] .exam-footer .circle-icon { background-color: #0F1A30; }
[data-theme="dark"] .sel-btn-dark { color: #EAE3D0; border-color: #0F1A30; }
[data-theme="dark"] .sel-btn:hover { background: #0F1A30; color: #EAE3D0; }
/* Screen backgrounds */
[data-theme="dark"] #selection-screen,
[data-theme="dark"] #mock-selection-screen,
[data-theme="dark"] #pdf-screen,
[data-theme="dark"] #study-screen {
    background:
        radial-gradient(circle at 8% 14%, rgba(217,123,27,.13), transparent 23rem),
        radial-gradient(circle at 92% 84%, rgba(154,166,190,.09), transparent 29rem),
        linear-gradient(135deg, #0D1526 0%, #111C33 100%);
}
[data-theme="dark"] .portal-shell { background: rgba(26,37,64,.94); border: 0; box-shadow: none; }
[data-theme="dark"] .portal-toolbar { background: rgba(21,32,57,.97); }
[data-theme="dark"] .sel-user-badge { background: #1A2540; }
[data-theme="dark"] .sel-btn-chat { background: #1D2E4A; border-color: #2D3B59; }
[data-theme="dark"] .sel-btn-bell { background: #1A2540; }
[data-theme="dark"] .mock-intro,
[data-theme="dark"] .pdf-intro { background: linear-gradient(115deg, #141F38 0%, #1A2540 70%); }
[data-theme="dark"] .option-item:hover { background: #22304F; }
[data-theme="dark"] .result-board-row,
[data-theme="dark"] .kkd-cat-tile { border-color: #2D3B59; }
[data-theme="dark"] .kkd-cat-tile small { color: #9AA6BE; }
[data-theme="dark"] .kkd-cat-tile.active { background: #D97B1B; border-color: #D97B1B; color: #17233A; }
[data-theme="dark"] .kkd-cat-tile.active small { color: #5b3a12; }
[data-theme="dark"] .kkd-coming-soon-panel { border-color: #3A4A6E; color: #9AA6BE; }
[data-theme="dark"] .auth-input { border-color: #3A4A6E; }
[data-theme="dark"] .auth-input::placeholder { color: #7C8AA5; }
[data-theme="dark"] .google-btn { border-color: #3A4A6E; }
[data-theme="dark"] .announce-item.unread { background: #1E2C49; }
[data-theme="dark"] .chat-toolbar { border-color: #2D3B59; }
[data-theme="dark"] .chat-lede { color: #9AA6BE; border-color: #2D3B59; }
[data-theme="dark"] .chat-reply-bar { background: #141F38; border-color: #2D3B59; color: #9AA6BE; }
[data-theme="dark"] .exam-main { background: radial-gradient(circle at 90% 10%, rgba(217,123,27,.08), transparent 21rem); }
/* Sweep: hardcoded light backgrounds that clashed with light dark-mode text */
[data-theme="dark"] .exam-card { background: #1A2540; border-color: #2D3B59; }
[data-theme="dark"] .exam-card p { color: #9AA6BE; }
[data-theme="dark"] .insights-empty-state { background: #1A2540; border-color: var(--kkd-saffron, #c87824); }
[data-theme="dark"] .login-visitor-box { background-color: #1A2540; border-color: #2D3B59; }
[data-theme="dark"] .modal-btn { background-color: #2D3B59; border-color: #3A4A6E; color: #EAE3D0; }
[data-theme="dark"] .modal-btn:hover { background-color: #3A4A6E; }
/* Quiz correct/wrong states: light tint backgrounds are unreadable in dark mode —
   use dark translucent fills so the light text stays legible. */
[data-theme="dark"] .option-item.correct-answer { background-color: rgba(40,167,69,.22); border-color: #28a745; }
[data-theme="dark"] .option-item.correct-answer .option-text { color: #EAE3D0; }
[data-theme="dark"] .option-item.wrong-answer { background-color: rgba(220,53,69,.22); border-color: #dc3545; }
[data-theme="dark"] .option-item.wrong-answer .option-text { color: #EAE3D0; }
[data-theme="dark"] .feedback-container.correct { background-color: rgba(40,167,69,.16); border-left-color: #28a745; }
[data-theme="dark"] .feedback-container.correct h4 { color: #8be0a4; }
[data-theme="dark"] .feedback-container.correct .feedback-icon { color: #8be0a4; }
[data-theme="dark"] .feedback-container.incorrect { background-color: rgba(220,53,69,.16); border-left-color: #dc3545; }
[data-theme="dark"] .feedback-container.incorrect h4 { color: #f2a0a8; }
[data-theme="dark"] .feedback-container.incorrect .feedback-icon { color: #f2a0a8; }
/* Theme toggle: floating button on the login screen */
.kkd-theme-fab {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(229,161,58,.55);
    background: rgba(23,35,58,.55); color: #f6c36b; cursor: pointer;
}
.kkd-theme-fab:hover { background: rgba(23,35,58,.85); }

/* ── Admin panel: full-screen + theme matching ─────────────────────────────── */
#admin-screen.admin-fullscreen-wrap .selection-content,
#admin-screen .admin-fullscreen {
  --admin-card: #ffffff;
  --admin-ink: #333333;
  --admin-ink-soft: #666666;
  --admin-line: #dddddd;
  --admin-soft-bg: #f8f9fa;
}
[data-theme="dark"] #admin-screen .admin-fullscreen {
  --admin-card: #1d2733;
  --admin-ink: #f1f5f9;
  --admin-ink-soft: #94a3b8;
  --admin-line: #334155;
  --admin-soft-bg: #16202c;
}
/* Dark-mode overrides for the admin's legacy inline styles */
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="background:white"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="background: white"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="background-color:white"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="background-color: white"] {
  background-color: #1d2733 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="#f8f9fa"] {
  background-color: #16202c !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen thead th {
  color: #e2e8f0 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="#fafafa"] {
  background-color: #1d2733 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="#f1f3f5"] {
  background-color: #2b3a4d !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen h2,
[data-theme="dark"] #admin-screen .admin-fullscreen h3,
[data-theme="dark"] #admin-screen .admin-fullscreen h4 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#333"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #333"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#444"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #444"] {
  color: #f1f5f9 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#666"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #666"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#888"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #888"] {
  color: #94a3b8 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#17233A"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #17233A"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color:#17233a"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="color: #17233a"] {
  color: #f1f5f9 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen input,
[data-theme="dark"] #admin-screen .admin-fullscreen select,
[data-theme="dark"] #admin-screen .admin-fullscreen textarea {
  background: #16202c !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="border-bottom: 1px solid #ddd"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="border:1px solid #ddd"],
[data-theme="dark"] #admin-screen .admin-fullscreen [style*="border: 1px solid #ddd"] {
  border-color: #334155 !important;
}
.rb-add{border:1px solid var(--kkd-line,#E8DCC8);background:#fff;border-radius:8px;width:26px;height:26px;font-size:15px;line-height:1;cursor:pointer;color:var(--kkd-ink-soft,#5F6675);flex:none}
.rb-add:hover{background:#FFF6E3;color:#D97B1B;border-color:#D97B1B}

/* PM skills: question text (with tables) is always internally scrollable,
   so long content is never clipped even if the fit check mismeasures. */
body.kkd-skills-active .question-text {
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* PM skills: use the full viewport for table-heavy questions */
body.kkd-skills-active .question-container {
    max-width: none;
}
body.kkd-skills-active .exam-main {
    padding-left: clamp(8px, 2vw, 28px);
    padding-right: clamp(8px, 2vw, 28px);
    padding-top: clamp(6px, 1.2vh, 16px);
    padding-bottom: clamp(6px, 1.2vh, 16px);
}
body.kkd-skills-active .question-container {
    padding: clamp(8px, 1.6vh, 20px) clamp(10px, 2vw, 28px);
}

/* ── Unified notification center ── */
.notif-tabs {
    display: flex; gap: 6px; padding: 10px 12px 0; flex: none;
}
.notif-tab {
    border: 1.5px solid var(--kkd-line, #e0d8c8); background: transparent;
    color: var(--kkd-ink-soft, #5b5b5b); font-size: 12.5px; font-weight: 700;
    padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.notif-tab-active { background: #D97B1B; border-color: #D97B1B; color: #fff; }
.notif-item {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--kkd-card, #FFFDF8); border: 1px solid var(--kkd-line, #e0d8c8);
    border-radius: 12px; padding: 12px 14px;
}
.notif-item.unread { border-left: 4px solid #D97B1B; }
.notif-ic { color: #D97B1B; font-size: 22px; flex: none; margin-top: 2px; }
.notif-body { flex: 1; min-width: 0; }
.notif-body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.notif-body p { margin: 0 0 4px; font-size: 13px; opacity: 0.85; }
.notif-body time { font-size: 11px; opacity: 0.6; }
.notif-body a { font-size: 12.5px; color: #D97B1B; font-weight: 700; }
.notif-actions { display: flex; gap: 8px; flex: none; align-self: center; }
.notif-btn {
    border: 1.5px solid #D97B1B; background: transparent; color: #D97B1B;
    font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.notif-btn-accept { background: #D97B1B; color: #fff; }
.notif-btn-accept:hover { background: #B8670F; }
[data-theme="dark"] .notif-item { background: #1A2540; border-color: #2D3B59; }
[data-theme="dark"] .notif-tab { color: #c9c2b2; border-color: #2D3B59; }
[data-theme="dark"] .notif-tab-active { color: #fff; }