/* =======================================================================
   Noodles Simulator — Global stylesheet
   Fully responsive refactor: fluid layout from 320px to 4K.
   Preserves every class name / color / animation referenced from JS + Razor.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. Design tokens
   -----------------------------------------------------------------------*/
:root {
    --content-max: 960px;
    --quiz-max: 900px;
    --dashboard-max: 1200px;

    --gutter-page: clamp(12px, 3vw, 28px);
    --gutter-card: clamp(12px, 2.4vw, 24px);
    --gap-sm: clamp(6px, 1.2vw, 10px);
    --gap-md: clamp(10px, 2vw, 16px);
    --gap-lg: clamp(14px, 2.6vw, 24px);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --tap-min: 44px;

    --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
    --fs-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
    --fs-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    --fs-md: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
    --fs-lg: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    --fs-xl: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    --fs-2xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);
}

/* -----------------------------------------------------------------------
   2. Responsive base / resets
   -----------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

img {
    -webkit-user-drag: none;
}

button {
    font-family: inherit;
}

a {
    word-break: break-word;
}

/* Soft tap feedback on interactive elements (replaces the harsh iOS grey flash). */
a,
button,
[role="button"],
.answer-btn,
.difficulty-card,
.footer-icon,
.top-bar-admin-link {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

/* -----------------------------------------------------------------------
   3. Utility classes referenced from JS / Razor (do not rename)
   -----------------------------------------------------------------------*/
.topbar-logout-form,
.test-end-form {
    margin: 0;
}

.modal-hidden {
    display: none;
}

.modal-open {
    display: flex !important;
}

.difficulty-modal-open {
    display: flex !important;
    pointer-events: auto;
    justify-content: center;
    align-items: flex-start;
}

#difficulty-modal.difficulty-modal-open {
    z-index: 8000;
}

.welcome-modal.difficulty-modal-open {
    z-index: 8500;
}

.welcome-modal-content {
    max-width: min(560px, 100%);
    max-height: min(92dvh, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: right;
    position: relative;
    border-color: rgba(76, 175, 80, 0.55);
    padding-bottom: 16px;
}

.welcome-modal-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.welcome-modal-badge {
    display: inline-block;
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.welcome-modal-title {
    text-align: right;
    margin-bottom: 8px;
}

.welcome-modal-subtitle {
    text-align: right;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.82);
}

.welcome-modal-features {
    margin-bottom: 20px;
}

.welcome-modal-recommend {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
    text-align: right;
}

.welcome-modal-recommend-title {
    margin: 0 0 8px;
    font-weight: 700;
    color: #a5d6a7;
    font-size: var(--fs-md);
}

.welcome-modal-recommend-lead {
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.55;
    font-size: var(--fs-sm);
}

.welcome-modal-recommend-body {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    font-size: var(--fs-sm);
}

.welcome-modal-course-list {
    margin-bottom: 12px;
    font-size: var(--fs-sm);
}

.welcome-modal-prereq {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.welcome-modal-testimonial {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-right: 3px solid #66bb6a;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0 8px 8px 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.55;
}

.welcome-modal-buttons {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.welcome-modal-cta {
    font-weight: 700;
}

#practice-options-modal.difficulty-modal-open {
    z-index: 7500;
}

.app-notice-modal.difficulty-modal-open {
    z-index: 6500;
}

.app-notice-content {
    max-width: 520px;
    max-height: min(85vh, 640px);
    overflow-y: auto;
}

.app-notice-list {
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 20px;
    padding: 0 1.2em 0 0;
    line-height: 1.65;
    font-size: var(--fs-md);
    text-align: right;
    list-style: disc;
}

.app-notice-list li {
    margin-bottom: 0.55em;
}

.app-notice-list li:last-child {
    margin-bottom: 0;
}

.app-notice-footer {
    margin-bottom: 16px !important;
    font-size: var(--fs-sm);
}

.feedback-modal.difficulty-modal-open {
    z-index: 6100;
}

.feedback-modal-content {
    max-width: min(520px, 100%);
}

.feedback-modal-subtitle {
    margin-bottom: 20px;
}

.feedback-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    direction: ltr;
}

.feedback-star {
    background: none;
    border: none;
    font-size: 2.25rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.feedback-star:hover,
.feedback-star.is-selected {
    color: #ffc107;
}

.feedback-star:hover {
    transform: scale(1.1);
}

.feedback-message-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.85);
}

.feedback-message-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font: inherit;
    resize: vertical;
    min-height: 96px;
}

.feedback-message-input:focus {
    outline: 2px solid rgba(76, 175, 80, 0.6);
    border-color: transparent;
}

.feedback-modal-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.feedback-modal-buttons .difficulty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.github-star-modal.difficulty-modal-open {
    z-index: 6050;
}

.github-star-modal-content {
    max-width: min(480px, 100%);
}

.github-star-modal-subtitle {
    margin-bottom: 24px;
}

.github-star-modal-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.feedback-rating-stars {
    color: #ffc107;
    letter-spacing: 2px;
    white-space: nowrap;
}

.footer-stats-toggle-open {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.footer-stats-toggle-closed {
    opacity: 0.7;
}

.difficulty-row-hidden {
    display: none;
}

.inline-form-reset {
    margin: 0;
}

/* -----------------------------------------------------------------------
   4. Page shell: body, background, sticky footer pattern
   -----------------------------------------------------------------------*/
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    text-rendering: optimizeLegibility;
    font-size: var(--fs-base);
    line-height: 1.5;
}

/* Make all direct children of body keep their natural height
   (no stretching), while letting the footer be pushed to the bottom. */
body > *:not(.site-footer):not(.site-footer-wrap):not(.background-gif) {
    flex: 0 0 auto;
}

.background-gif {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    opacity: 0.2;
    pointer-events: none;
}

/* -----------------------------------------------------------------------
   5. Top bar (sticky navigation)
   -----------------------------------------------------------------------*/
.top-bar {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
    padding-inline-start: max(clamp(8px, 2.5vw, 20px), env(safe-area-inset-left));
    padding-inline-end: max(clamp(8px, 2.5vw, 20px), env(safe-area-inset-right));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    isolation: isolate;
}

.top-bar-inner {
    width: 100%;
    max-width: var(--content-max);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.6vw, 16px);
    flex-wrap: wrap;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 0;
    flex-wrap: wrap;
}

.top-bar-spacer {
    height: 0;
    flex-shrink: 0;
}

.top-bar-admin-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.top-bar-admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--fs-xs);
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.top-bar-admin-link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.top-bar-admin-link:active {
    transform: scale(0.97);
}

.top-bar-admin-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   6. Logo header (between top bar and content)
   -----------------------------------------------------------------------*/
.logo-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(4px, 1vw, 10px);
    margin-bottom: 0;
    padding: 0 var(--gutter-page);
    z-index: 0;
    position: relative;
}

.logo-header-link {
    display: inline-block;
    max-width: 100%;
}

.logo-header img {
    max-height: clamp(110px, 22vw, 240px);
    max-width: 100%;
    width: auto;
    opacity: 1;
    visibility: visible;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

/* -----------------------------------------------------------------------
   7. Quiz container (main page wrapper)
   -----------------------------------------------------------------------*/
.quiz-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(var(--quiz-max), calc(100% - 2 * var(--gutter-page)));
    margin: clamp(8px, 1.5vh, 16px) auto clamp(16px, 3vh, 40px);
    padding: clamp(14px, 3vw, 24px);
    border-radius: var(--radius-lg);
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    animation: fadeIn 0.8s ease forwards;
}

.test-quiz-container {
    position: relative;
}

.quiz-container > img {
    width: 100%;
    max-width: 100%;
    max-height: min(58vh, calc(100dvh - 11rem));
    height: auto;
    margin-top: 10px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

/* Raw Q&A tiles — white question/answer cards; quiz chrome unchanged */
.quiz-container .quiz-main-image,
.quiz-container .test-main-question-image,
.quiz-container .review-main-question-image,
.quiz-container .question-view-main-image,
.test-quiz-container .test-main-question-image {
    background: #fff;
}

.quiz-container .answers,
.test-quiz-container .answers {
    gap: 10px;
    margin-top: 12px;
    justify-items: stretch;
}

.quiz-container .answers .answer-btn,
.test-quiz-container .answers .answer-btn {
    background: #fff;
    padding: 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px !important;
    border-radius: 8px;
    width: 100%;
}

.quiz-container .answers .answer-btn img,
.test-quiz-container .answers .answer-btn img {
    filter: grayscale(100%) brightness(90%) contrast(200%) saturate(0%);
    max-height: 96px;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------
   8. Answers grid (image-tile multiple choice)
   -----------------------------------------------------------------------*/
.answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 24px);
    margin-top: clamp(16px, 3vw, 30px);
    width: 100%;
    justify-items: center;
}

/* Below ~360px (very narrow phones), single column avoids
   sub-130px tiles where image content becomes unreadable. */
@media (max-width: 359.98px) {
    .answers {
        grid-template-columns: minmax(0, 1fr);
    }
}

button.answer-btn,
.answer-btn {
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease;
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
    padding: 0;
    display: block;
    box-shadow: none;
}

.answer-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.answer-btn img {
    max-width: 100%;
    max-height: clamp(120px, 24vw, 200px);
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin: 0 auto;
    transition: filter 0.3s ease;
    filter: grayscale(100%) brightness(90%) contrast(200%) saturate(0%);
    object-fit: contain;
}

.correct {
    outline: 3px solid #32cd32 !important;
    box-shadow: 0 0 15px #32cd32aa !important;
    filter: none !important;
}

.incorrect {
    outline: 3px solid #ff4c4c !important;
    box-shadow: 0 0 15px #ff4c4c88 !important;
    filter: none !important;
}

.answer-pulse {
    animation: answerPulse 0.6s ease;
}

.answer-shake {
    animation: answerShake 0.4s ease;
}

.answer-reveal-correct {
    animation: answerReveal 0.5s ease;
}

@keyframes answerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes answerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

@keyframes answerReveal {
    from { outline-color: transparent; }
    to { outline-color: #32cd32; }
}

.streak-badge {
    --streak-flame-size: 34px;
    position: relative;
    display: inline-block;
    width: var(--streak-flame-size);
    height: var(--streak-flame-size);
    margin: 0;
    padding: 0;
    line-height: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

.streak-badge[hidden] {
    display: none !important;
}

.streak-flame-bg {
    display: block;
    width: var(--streak-flame-size);
    height: var(--streak-flame-size);
    max-width: none;
    max-height: none;
    object-fit: fill;
}

.streak-badge-text {
    position: absolute;
    left: 50%;
    top: 74%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.streak-badge--hot {
    --streak-flame-size: 38px;
}

.streak-badge--hot .streak-badge-text {
    font-size: 13px;
}

.streak-badge--burst .streak-badge-text {
    animation: streakBadgeBurst 0.45s ease;
}

@keyframes streakBadgeBurst {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    40% { transform: translate(-50%, -50%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .streak-badge--burst .streak-badge-text {
        animation: none;
    }
}

.practice-mode-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    padding: 8px var(--gutter-page, 12px) 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.practice-mode-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow: visible;
}

.practice-mode-streak {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    line-height: 0;
}

.practice-mode-streak:has(#streak-badge[hidden]) {
    display: none;
}

.practice-mode-stack .practice-mode-badge {
    margin: 0;
}

.level-progress-live {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: min(100%, 420px);
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 999px;
    box-sizing: border-box;
}

.level-progress-live-label {
    flex: 0 0 auto;
    font-size: 0.62em;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.level-progress-live-label strong {
    color: #ffd700;
    font-weight: 700;
}

.level-progress-live-track {
    flex: 1 1 auto;
    min-width: 48px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    direction: ltr;
}

@property --xp-progress {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.level-progress-live-fill {
    width: var(--xp-progress, 0%);
    max-width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff9800);
    border-radius: 999px;
    transition: none;
}

.level-progress-live-fill--animate {
    transition: --xp-progress 0.45s ease;
}

.level-progress-live-fill--pulse {
    animation: xpBarPulse 0.65s ease;
}

@keyframes xpBarPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.45); box-shadow: 0 0 6px rgba(255, 215, 0, 0.45); }
}

.level-progress-live-meta {
    flex: 0 0 auto;
    font-size: 0.58em;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

@media (max-width: 420px) {
    .level-progress-live-meta {
        display: none;
    }

    .level-progress-live {
        width: min(100%, 280px);
    }
}

.practice-mode-badge {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 3px 10px;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8em;
    text-align: center;
}

.practice-mode-daily {
    margin-inline-start: 8px;
    opacity: 0.75;
}

.xp-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.xp-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.xp-level-label, .xp-points-label {
    white-space: nowrap;
    font-size: 0.85em;
    opacity: 0.9;
}
.practice-options-content {
    width: min(400px, 100%);
}

.practice-options-section-title {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    text-align: right;
}

.practice-options-section-title:not(:first-of-type) {
    margin-top: 20px;
}

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

.practice-option-btn {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: var(--fs-md);
    transition: background 0.2s, border-color 0.2s;
}

.practice-option-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.practice-option-btn.is-active {
    background: rgba(108, 92, 231, 0.35);
    border-color: #a29bfe;
    font-weight: 600;
}

.quiz-notify-stack {
    position: fixed;
    top: 72px;
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
}

.quiz-notify-card {
    pointer-events: auto;
    padding: 10px 14px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    font-size: var(--fs-sm, 0.85rem);
    line-height: 1.45;
    cursor: pointer;
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.quiz-notify-card--visible {
    transform: translateX(0);
    opacity: 1;
}

.quiz-notify-card--hide {
    transform: translateX(110%);
    opacity: 0;
}

.quiz-notify-card--achievement {
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 8px 28px rgba(255, 180, 0, 0.12);
}

.quiz-notify-card--levelUp {
    border-color: rgba(85, 239, 196, 0.55);
    box-shadow: 0 8px 28px rgba(85, 239, 196, 0.1);
}

.quiz-notify-title {
    margin: 0 0 4px;
    font-size: 0.78em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
}

.quiz-notify-message {
    margin: 0;
}

.quiz-notify-message strong {
    color: #ffd700;
    font-weight: 700;
}

.quiz-notify-card--levelUp .quiz-notify-message strong {
    color: #55efc4;
}

@media (max-width: 540px) {
    .quiz-notify-stack {
        top: auto;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        width: min(300px, calc(100vw - 16px));
        max-height: 40vh;
    }
}

.achievement-toast:not(.achievement-toast-inline) {
    display: none;
}

.achievement-toast-item {
    margin: 4px 0;
}

.test-progress-wrap {
    width: 100%;
    margin: 12px 0;
}

.test-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    overflow: hidden;
    direction: ltr;
}

.test-progress-fill {
    width: 0;
    max-width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00b894, #55efc4);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.test-progress-label {
    text-align: center;
    margin-top: 6px;
    font-size: 0.9em;
    opacity: 0.9;
}

.test-question-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    width: 100%;
}

.test-nav-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.test-nav-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.test-question-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    max-height: 88px;
    overflow-y: auto;
    padding: 2px;
}

.test-question-pill {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    cursor: pointer;
}

.test-question-pill.is-current {
    border-color: #55efc4;
    background: rgba(85, 239, 196, 0.2);
    color: #fff;
    font-weight: 700;
}

.test-question-pill.is-answered:not(.is-current) {
    border-color: rgba(85, 239, 196, 0.45);
    background: rgba(85, 239, 196, 0.12);
}

.test-nav-hint {
    text-align: center;
    font-size: 0.82em;
    opacity: 0.75;
    margin: 0 0 12px;
}

.test-question-pill.is-correct:not(.is-current) {
    border-color: rgba(50, 205, 50, 0.55);
    background: rgba(50, 205, 50, 0.15);
    color: #b8ffb8;
}

.test-question-pill.is-wrong:not(.is-current) {
    border-color: rgba(255, 76, 76, 0.55);
    background: rgba(255, 76, 76, 0.12);
    color: #ffb8b8;
}

.test-question-pill.is-unanswered:not(.is-current) {
    opacity: 0.65;
}

.test-results-progress-fill {
    background: linear-gradient(90deg, #32cd32, #55efc4);
}

.test-results-question-status.is-correct {
    color: #32cd32;
}

.test-results-question-status.is-wrong {
    color: #ff4c4c;
}

.test-results-question-status.is-unanswered {
    color: rgba(255, 255, 255, 0.65);
}

.test-results-nav-hint {
    margin-bottom: 14px;
}

.test-results-container .test-results-summary {
    margin: 4px 0 12px;
}


#answers-grid .answer-btn.is-selected {
    outline: 2px solid #55efc4;
    outline-offset: 2px;
}

.leaderboard-tab-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85em;
    margin: 0 0 12px;
}

.leaderboard-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    padding: 24px 12px;
    margin: 0;
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.leaderboard-tab {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
}

.leaderboard-tab.active {
    background: rgba(108, 92, 231, 0.5);
    border-color: #a29bfe;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.achievement-category {
    margin-top: 24px;
}

.achievement-category:first-of-type {
    margin-top: 16px;
}

.achievement-category-title {
    font-size: 1.1rem;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.daily-achievement-stats {
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.75);
}

.achievement-card {
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.achievement-card.unlocked {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.achievement-card.locked {
    opacity: 0.5;
}

.achievement-toast-inline {
    display: block;
    position: static;
    transform: none;
    margin: 16px 0;
    max-width: 100%;
    padding: 14px 20px;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #ffd700;
    border-radius: var(--radius-md);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}


.answer-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* On no-hover (touch) devices, remove scale to avoid sticky :hover states. */
@media (hover: none) {
    .answer-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* -----------------------------------------------------------------------
   9. Buttons (unified system)
   -----------------------------------------------------------------------*/
.btn,
.next-question-btn,
.main-btn,
.secondary-btn,
.report-submit-btn {
    padding: 12px 20px;
    font-size: var(--fs-sm);
    line-height: 1.2;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn:hover,
.next-question-btn:hover,
.main-btn:hover,
.secondary-btn:hover {
    transform: translateY(-1px);
}

.btn:active,
.next-question-btn:active,
.main-btn:active,
.secondary-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.btn:focus-visible,
.next-question-btn:focus-visible,
.main-btn:focus-visible,
.secondary-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.next-question-btn {
    background-color: #333;
    color: #fff;
}

.next-question-btn:hover {
    background-color: #555;
}

.main-btn {
    background-color: #4caf50;
    color: #fff;
}

.main-btn:hover {
    background-color: #45a049;
}

.secondary-btn {
    background-color: #008cba;
    color: #fff;
}

.secondary-btn:hover {
    background-color: #007bb5;
}

.next-question-btn-danger {
    background-color: #aa3333;
}

.next-question-btn-danger:hover {
    background-color: #902b2b;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2vw, 20px);
    margin-top: clamp(14px, 2.5vw, 24px);
    flex-wrap: wrap;
    width: 100%;
}

.practice-options-icon-btn {
    padding: 12px;
    min-width: var(--tap-min);
    width: var(--tap-min);
}

.practice-options-icon-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

@media (hover: none) {
    .btn:hover,
    .next-question-btn:hover,
    .main-btn:hover,
    .secondary-btn:hover {
        transform: none;
    }
}

/* Image answer buttons override the unified button look to remain visual tiles. */
.answer-btn {
    padding: 0 !important;
    display: block !important;
    box-shadow: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* -----------------------------------------------------------------------
   10. Forms & inputs
   -----------------------------------------------------------------------*/
.input-field {
    padding: 12px;
    margin-bottom: 15px;
    background: #333;
    border: 1px solid #555;
    border-radius: 8px;
    color: #fff;
    font-size: var(--fs-base);
    min-height: var(--tap-min);
    width: 100%;
}

.input-field:focus {
    border-color: #888;
    outline: none;
    background: #2b2b2b;
}

.error-message {
    color: #ff4c4c;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

/* -----------------------------------------------------------------------
   11. Quiz page (Index): meta + feedback + report form
   -----------------------------------------------------------------------*/
.quiz-meta {
    color: #111;
    text-align: center;
    line-height: 1.35;
    padding: 0 var(--gutter-page);
    margin: 0;
}

.quiz-meta-user {
    margin: clamp(6px, 1.5vw, 14px) 0 2px;
    font-size: var(--fs-md);
}

.quiz-meta-online {
    margin: 0 0 4px;
    font-size: var(--fs-sm);
}

.quiz-main-image {
    cursor: pointer;
}

.quiz-container.quiz-loading .quiz-main-image,
.quiz-container.quiz-loading .test-main-question-image,
.quiz-container.quiz-loading .answers {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.quiz-container.quiz-swapping .quiz-main-image,
.quiz-container.quiz-swapping #quiz-answer-form,
.quiz-container.quiz-swapping #answer-feedback {
    visibility: hidden;
}

.quiz-answer-feedback {
    margin-top: 15px;
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: center;
}

.quiz-answer-feedback.is-correct { color: #32cd32; }
.quiz-answer-feedback.is-incorrect { color: #ff4c4c; }

.question-explanation-panel {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.question-explanation-btn {
    width: auto;
    max-width: 100%;
}

.question-explanation-panel.is-loading-video .question-explanation-btn,
.question-explanation-panel.is-playing .question-explanation-btn {
    display: none !important;
}

.question-explanation-video-wrap {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 12px auto 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #0a0a0a;
    aspect-ratio: 16 / 9;
}

.question-explanation-close-btn {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.question-explanation-close-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    color: #ff6b6b;
}

.question-explanation-panel.is-loading-video .question-explanation-video-wrap {
    background: #111;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.question-explanation-panel.is-loading-video .question-explanation-video {
    opacity: 0.15;
}

.question-explanation-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

.question-explanation-rating {
    width: 100%;
    max-width: 640px;
    margin: 12px auto 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.question-explanation-rating-prompt {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.9);
}

.explanation-stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    /* ponytail: 1★ שמאל → 5★ ימין; מילוי רציף ב-hover לא תלוי ב-RTL של העמוד */
    direction: ltr;
}

.explanation-star-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    min-height: var(--tap-min);
    min-width: 36px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.explanation-star-btn.is-active {
    color: #ffd700;
    transform: scale(1.08);
}

.question-explanation-feedback {
    width: 100%;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #555;
    background: #2b2b2b;
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-sm);
    resize: vertical;
    min-height: 64px;
}

.question-explanation-rating-submit {
    margin-top: 6px;
    width: auto;
}

.question-explanation-rating-thanks {
    margin: 8px 0 0;
    color: #55efc4;
    font-size: var(--fs-sm);
}

.explanation-rating-urgent {
    color: #ff4c4c;
    font-weight: 700;
}

.explanation-rating-stars-display {
    letter-spacing: 1px;
    color: #ffd700;
}

.quiz-keyboard-hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.45);
}

.daily-complete-sub {
    opacity: 0.85;
    font-size: 0.95em;
}

.report-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: clamp(24px, 4vw, 40px) auto;
    padding: 0 var(--gutter-page);
    width: 100%;
}

.report-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(440px, 100%);
}

.report-label {
    font-weight: 700;
    text-align: center;
    color: #222;
}

.report-textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: var(--fs-base);
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.report-submit-btn {
    background-color: #ff9800;
    color: #222;
    font-size: var(--fs-md);
    padding: 12px 28px;
    width: 100%;
}

.report-submit-btn:hover {
    background-color: #f08f00;
}

/* -----------------------------------------------------------------------
   12. Test page (timed exam)
   -----------------------------------------------------------------------*/
.test-title {
    margin: 0 0 10px;
    font-size: var(--fs-xl);
}

.test-active-alert {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: clamp(10px, 2vw, 16px);
    margin-bottom: 15px;
    text-align: center;
    animation: shake 0.5s;
    width: 100%;
}

.test-active-alert-text {
    color: #856404;
}

.test-meta {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    color: #ccc;
    text-align: center;
}

.test-main-question-image,
.review-main-question-image,
.question-view-main-image {
    cursor: pointer;
}

/* -----------------------------------------------------------------------
   13. Test results (summary)
   -----------------------------------------------------------------------*/
.test-results-title {
    margin-top: 0;
    font-size: var(--fs-xl);
}

.test-results-summary {
    margin: 6px 0 16px;
    text-align: center;
    font-size: var(--fs-base);
    line-height: 1.6;
}

.test-results-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.test-results-item {
    display: flex;
    gap: clamp(10px, 2vw, 16px);
    align-items: flex-start;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    padding: clamp(10px, 2vw, 14px);
    border-radius: var(--radius-md);
    position: relative;
    width: 100%;
}

.test-results-review-link {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    text-decoration: none;
    background: #333;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease;
}

.test-results-review-link:hover {
    background: #555;
}

.test-results-question-image {
    width: clamp(140px, 28vw, 220px);
    max-height: 140px;
    border-radius: 8px;
    object-fit: contain;
    background: #111;
    flex: 0 0 auto;
}

.test-results-item-content {
    flex: 1 1 220px;
    min-width: 0;
}

.test-results-item-title {
    margin-bottom: 6px;
    font-weight: bold;
    font-size: var(--fs-base);
}

.test-results-item-title-correct { color: #32cd32; }
.test-results-item-title-incorrect { color: #ff4c4c; }

.test-results-answers {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    flex-wrap: wrap;
}

.test-results-answer-label {
    font-size: var(--fs-xs);
    color: #ccc;
    margin-bottom: 4px;
}

.result-ans {
    width: clamp(110px, 22vw, 160px);
    height: clamp(80px, 16vw, 120px);
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    display: block;
    overflow: hidden;
    filter: grayscale(100%) brightness(90%) contrast(200%) saturate(0%);
}

/* -----------------------------------------------------------------------
   14. Question view / Test review
   -----------------------------------------------------------------------*/
.question-view-answer-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.question-view-answer-image {
    margin: 0 auto;
}

.question-view-result {
    margin-top: 15px;
    font-size: var(--fs-md);
    font-weight: bold;
    text-align: center;
}

.question-view-result-correct { color: #32cd32; }
.question-view-result-incorrect { color: #ff4c4c; }

.back-to-quiz {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 1000;
    background-color: #333;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: var(--fs-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.back-to-quiz:hover {
    background-color: #555;
    transform: scale(1.05);
}

/* -----------------------------------------------------------------------
   15. Leaderboard
   -----------------------------------------------------------------------*/
/* Same card as .quiz-container but stretch children full width (quiz uses
   align-items: center which shrinks the table to content — looks tiny). */
.quiz-container.leaderboard-container {
    align-items: stretch;
}

.leaderboard-container {
    text-align: center;
    width: min(var(--quiz-max), calc(100% - 2 * var(--gutter-page)));
}

.leaderboard-title {
    margin-bottom: 8px;
    font-size: var(--fs-2xl);
}

.leaderboard-last-update {
    font-size: var(--fs-sm);
    color: #aaa;
    margin-bottom: 16px;
}

/* Scroll lives on the shell; the <table> stays display:table so columns span the card. */
.leaderboard-table-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    color: #fff;
    direction: ltr;
    font-size: var(--fs-md);
    table-layout: fixed;
}

.leaderboard-header-row {
    background-color: #333;
}

.leaderboard-cell-header,
.leaderboard-cell {
    padding: clamp(12px, 2.2vw, 18px) clamp(10px, 2vw, 16px);
    text-align: center;
    vertical-align: middle;
    direction: ltr;
    overflow-wrap: anywhere;
}

/* Rank — narrow; username — flexible; score — stable column */
.leaderboard-cell-header:nth-child(1),
.leaderboard-cell:nth-child(1) {
    width: 14%;
    white-space: nowrap;
}

.leaderboard-cell-header:nth-child(2),
.leaderboard-cell:nth-child(2) {
    width: 52%;
    white-space: normal;
}

.leaderboard-cell-header:nth-child(3),
.leaderboard-cell:nth-child(3) {
    width: 34%;
    white-space: nowrap;
}

.leaderboard-cell-header {
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.leaderboard-row-even { background-color: #222; }
.leaderboard-row-odd { background-color: #111; }
.leaderboard-online-user { color: #00ff00; }

/* -----------------------------------------------------------------------
   16. Login
   -----------------------------------------------------------------------*/
.login-container,
.login-panel {
    width: min(420px, calc(100% - 2 * var(--gutter-page)));
    margin: clamp(40px, 10vh, 100px) auto 0;
    padding: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 30px);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    text-align: center;
    color: #fff;
    animation: fadeIn 0.8s ease forwards;
}

.login-title {
    color: #fff;
    margin-bottom: 25px;
    font-size: var(--fs-xl);
}

.login-error-banned,
.login-error-regular {
    margin-bottom: 20px;
}

.login-error-banned { color: #ff0000; }
.login-error-regular { color: #ff4c4c; }

.login-fields {
    text-align: right;
}

.login-label {
    color: #fff;
}

.login-fields .input-field {
    width: 100%;
}

#username.input-field {
    margin-bottom: 20px;
}

#password.input-field {
    margin-bottom: 25px;
    direction: rtl;
}

.login-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.login-action-btn {
    flex: 1 1 140px;
}

/* -----------------------------------------------------------------------
   17. My exams
   -----------------------------------------------------------------------*/
.exams-container {
    direction: rtl;
    align-items: stretch;
}

.exams-title {
    text-align: center;
    margin: 0 0 24px;
    font-size: var(--fs-xl);
}

.exams-alert {
    margin-bottom: 20px;
}

.exam-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: clamp(12px, 2.4vw, 20px);
    margin-bottom: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.exam-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}

.exam-status {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.status-active { background: #4caf50; color: #fff; }
.status-completed { background: #2196f3; color: #fff; }
.status-expired { background: #ff9800; color: #fff; }

.exam-details {
    color: #ccc;
    font-size: var(--fs-sm);
    line-height: 1.8;
    word-break: break-word;
}

.exam-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.exam-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
}

.no-exams {
    text-align: center;
    padding: clamp(24px, 5vw, 40px);
    color: #999;
}

.exams-start-link {
    margin-top: 20px;
}

.token-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    color: #aaa;
    margin-top: 5px;
    display: inline-block;
    word-break: break-all;
    max-width: 100%;
}

.exams-footer-actions {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.exams-footer-actions .btn {
    flex: 0 1 auto;
    min-width: 160px;
}

/* -----------------------------------------------------------------------
   18. Stats page
   -----------------------------------------------------------------------*/
.stats-page {
    text-align: center;
    gap: 20px;
    margin-top: clamp(14px, 3vw, 32px);
    width: min(860px, calc(100% - 2 * var(--gutter-page)));
}

.stats-title {
    margin: 0;
    font-size: var(--fs-xl);
}

.stats-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-md);
}

.stats-section {
    width: min(760px, 100%);
    margin-inline: auto;
    text-align: right;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
}

.stats-section-title {
    margin: 0 0 12px;
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.92);
}

.stats-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.stats-metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.stats-metric-label {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.72);
}

.stats-level-card .stats-level-row {
    display: grid;
    gap: 8px;
}

.stats-xp-bar {
    margin: 0;
}

.stats-level-hint {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.65);
}

.stats-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-sm);
}

.stats-empty-hint {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--fs-sm);
}

.stats-table-shell {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.9);
}

.stats-table th,
.stats-table td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-table th {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    white-space: nowrap;
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

.stats-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.stats-secondary-link {
    text-decoration: none;
}

.stats-breakable {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* -----------------------------------------------------------------------
   19. Dashboard
   -----------------------------------------------------------------------*/
.dashboard-page {
    width: min(var(--dashboard-max), calc(100% - 2 * var(--gutter-page)));
    margin: clamp(20px, 4vh, 32px) auto clamp(28px, 5vh, 48px);
    padding: clamp(16px, 3vw, 28px);
    direction: rtl;
    color: #f1f1f1;
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.dashboard-title {
    margin: 0 0 20px;
    font-size: var(--fs-2xl);
}

.dashboard-section-title {
    margin: clamp(20px, 4vw, 34px) 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
    color: #ffd700;
    font-size: var(--fs-lg);
}

.dashboard-section-hint {
    margin: 0 0 12px;
    color: #b8b8b8;
    font-size: var(--fs-sm);
}

.dashboard-inline-link {
    color: #9ecbff;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}

.dashboard-inline-link:hover {
    text-decoration: underline;
}

.dashboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-tab {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #ddd;
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

.dashboard-tab.is-active {
    background: rgba(255, 215, 0, 0.16);
    border-color: rgba(255, 215, 0, 0.45);
    color: #ffd700;
}

.dashboard-tab-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.dashboard-tab-badge-hidden {
    display: none;
}

.dashboard-tab-panel {
    display: none;
}

.dashboard-tab-panel.is-active {
    display: block;
}

.dashboard-retention-row {
    margin-bottom: 8px;
}

.dashboard-health-widget {
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-weight: 700;
}

.dashboard-health-ok { color: #7dcea0; }
.dashboard-health-warn { color: #f5b041; }

.dashboard-health-time {
    font-size: var(--fs-xs);
    color: #aaa;
    font-weight: 500;
}

.dashboard-health-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.dashboard-health-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 12px;
    align-items: baseline;
    font-size: var(--fs-sm);
}

.dashboard-health-item.is-ok .dashboard-health-icon { color: #7dcea0; }
.dashboard-health-item.is-bad .dashboard-health-icon { color: #ec7063; }

.dashboard-health-name {
    color: #eee;
}

.dashboard-health-detail {
    color: #aaa;
    text-align: left;
    direction: ltr;
}

.dashboard-action-btn-sm {
    padding: 4px 10px;
    font-size: var(--fs-xs);
}

.dashboard-badge-ok {
    background: rgba(125, 206, 160, 0.18);
    color: #7dcea0;
}

.dashboard-last-update {
    font-size: var(--fs-xs);
    color: #c9c9c9;
}

.dashboard-alert {
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dashboard-alert-success {
    background-color: #28a428;
    color: #fff;
}

.dashboard-alert-inline { text-align: right; }
.dashboard-alert-soft-success { background: #d4edda; border: 2px solid #28a745; }
.dashboard-alert-soft-error { background: #f8d7da; border: 2px solid #dc3545; }
.dashboard-alert-text-success { color: #155724; }
.dashboard-alert-text-error { color: #721c24; }

.dashboard-stat-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-stat-row-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--fs-base);
}

.dashboard-stat-row-period {
    flex: 1 1 280px;
    min-width: 0;
}

.dashboard-stat-row li {
    margin: 0;
}

.dashboard-stat-row strong {
    color: #7ec8ff;
}

/* Horizontal scroll wrapper so tables never widen the page. */
.dashboard-table-shell {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    background: #1e1e1e;
    -webkit-overflow-scrolling: touch;
}

.dashboard-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin-top: 0;
    font-size: var(--fs-sm);
}

.dashboard-table th,
.dashboard-table td {
    padding: clamp(8px, 1.6vw, 12px);
    border-bottom: 1px solid #333;
    text-align: center;
    white-space: nowrap;
}

.dashboard-table th {
    background-color: #222;
    font-weight: 700;
    position: sticky;
    top: 0;
}

.dashboard-table tr:nth-child(even) {
    background-color: #191919;
}

.dashboard-table-wide {
    min-width: 960px;
}

.dashboard-sticky-col {
    position: sticky;
    right: 0;
    background: #1e1e1e;
    z-index: 1;
    text-align: right;
}

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

.dashboard-search {
    flex: 1 1 200px;
    min-width: 180px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #111;
    color: #f1f1f1;
    font-size: var(--fs-sm);
}

.dashboard-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-filter-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #222;
    color: #ddd;
    cursor: pointer;
    font-size: var(--fs-xs);
}

.dashboard-filter-btn.is-active {
    background: #2d4a22;
    border-color: #4caf50;
    color: #fff;
}

.dashboard-activity-toolbar {
    margin-bottom: 0.65rem;
}

.dashboard-activity-toolbar .dashboard-filter-group {
    flex-wrap: wrap;
}

.dashboard-activity-feed {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 12px 14px;
    max-height: 280px;
    overflow-y: auto;
}

.dashboard-activity-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #2a2a2a;
    font-size: var(--fs-sm);
}

.dashboard-activity-time {
    color: #999;
    min-width: 90px;
}

.dashboard-activity-message {
    color: #ddd;
}

.dashboard-activity-kind {
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: 6px;
    background: #333;
    color: #ccc;
    text-transform: lowercase;
}

.dashboard-activity-kind-answer { background: #1e3a5f; color: #9fd0ff; }
.dashboard-activity-kind-exam_start,
.dashboard-activity-kind-exam_complete,
.dashboard-activity-kind-exam_expired { background: #3d2e14; color: #ffd700; }
.dashboard-activity-kind-achievement { background: #2e1f3d; color: #e0b0ff; }
.dashboard-activity-kind-login { background: #1f3d2a; color: #9fdfb0; }
.dashboard-activity-kind-register,
.dashboard-activity-kind-level_up,
.dashboard-activity-kind-daily_complete,
.dashboard-activity-kind-practice_start,
.dashboard-activity-kind-progress_reset { background: #1f3d3d; color: #9fe0e0; }
.dashboard-activity-kind-question_report { background: #3d1f1f; color: #ffb0b0; }
.dashboard-activity-kind-admin_action { background: #3d1f2e; color: #ff9fc8; }
.dashboard-activity-kind-feedback_prompt,
.dashboard-activity-kind-feedback_submit,
.dashboard-activity-kind-feedback_later { background: #3d2a4a; color: #e8b4ff; }
.dashboard-activity-kind-github_star_prompt,
.dashboard-activity-kind-github_star_accept,
.dashboard-activity-kind-github_star_later { background: #2a3540; color: #ffd700; }
.dashboard-activity-kind-app_notice_prompt,
.dashboard-activity-kind-app_notice_dismiss { background: #3d2817; color: #ffb366; }

.dashboard-user-link {
    background: none;
    border: none;
    color: #7ec8ff;
    cursor: pointer;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
    font-size: inherit;
}

.dashboard-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    margin-left: 4px;
    vertical-align: middle;
}

.dashboard-status-online { color: #9fdfb0; }
.dashboard-status-offline { color: #999; }

.dashboard-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    margin: 0 2px;
}

.dashboard-badge-warn { background: #5c3d00; color: #ffd54f; }
.dashboard-badge-danger { background: #5c1a1a; color: #ff8a80; }

.dashboard-empty-hint,
.dashboard-empty-cell {
    color: #999;
    text-align: center;
    padding: 12px;
}

.dashboard-feedback-summary {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-sm);
}

.dashboard-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
    box-sizing: border-box;
}

body.dashboard-modal-open {
    overflow: hidden;
}

.dashboard-modal[hidden] {
    display: none;
}

.dashboard-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.dashboard-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 860px;
    max-height: min(90dvh, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    direction: rtl;
    box-sizing: border-box;
}

.dashboard-modal-header {
    flex: 0 0 auto;
    padding: 14px 16px 12px 40px;
    border-bottom: 1px solid #2e2e2e;
    background: #1a1a1a;
}

.dashboard-modal-close {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #aaa;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
    width: 26px;
    height: 26px;
    padding: 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.dashboard-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.dashboard-modal-title {
    margin: 0;
    padding: 0;
    color: #ffd700;
    font-size: var(--fs-lg);
    line-height: 1.35;
}

.dashboard-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    color: #e8e8e8;
    font-size: var(--fs-sm);
    padding: 14px 20px 20px;
}

.dashboard-modal-table-shell {
    margin-top: 0;
    max-width: 100%;
}

.dashboard-modal-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.dashboard-modal-table th,
.dashboard-modal-table td {
    white-space: normal;
    word-break: break-word;
}

.dashboard-modal-table th:first-child,
.dashboard-modal-table td:first-child {
    width: 38%;
    max-width: none;
}

.dashboard-num-cell {
    width: 3.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-time-cell {
    width: 6.5rem;
    white-space: nowrap;
    color: #aaa;
}

.dashboard-modal-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #2e2e2e;
}

.dashboard-modal-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.dashboard-detail-subtitle {
    margin: 0 0 10px;
    color: #ddd;
    font-size: var(--fs-base);
    font-weight: 700;
}

.dashboard-detail-count {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 6px;
    border-radius: 999px;
    background: #333;
    color: #bbb;
    font-size: var(--fs-xs);
    text-align: center;
}

.dashboard-user-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 640px) {
    .dashboard-user-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-user-stat {
    background: #222;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 10px 12px;
}

.dashboard-user-stat-label {
    display: block;
    color: #999;
    font-size: var(--fs-xs);
    margin-bottom: 4px;
}

.dashboard-user-stat-value {
    display: block;
    color: #f0f0f0;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
}

.dashboard-stat-ltr {
    unicode-bidi: plaintext;
}

.dashboard-table-compact {
    min-width: 0;
    font-size: var(--fs-xs);
}

.dashboard-question-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    vertical-align: middle;
}

.dashboard-question-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8e8e8;
}

.dashboard-result-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.dashboard-result-badge-ok {
    background: #1f3d28;
    color: #9fdfb0;
}

.dashboard-result-badge-bad {
    background: #3d1f1f;
    color: #ff9e9e;
}

.dashboard-achievement-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-achievement-chip {
    background: #262626;
    border: 1px solid #383838;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: var(--fs-xs);
    line-height: 1.2;
}

.dashboard-modal-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid #333;
    background: #1a1a1a;
}

.dashboard-action-btn {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #555;
    background: #2a2a2a;
    color: #eee;
    cursor: pointer;
    font-size: var(--fs-sm);
}

.dashboard-action-btn-danger {
    border-color: #8b2e2e;
    background: #3d1515;
}

/* -----------------------------------------------------------------------
   20. Difficulty management (Dashboard sub-panel)
   -----------------------------------------------------------------------*/
.difficulty-panel {
    background: #1e1e1e;
    padding: clamp(16px, 2.8vw, 24px);
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.difficulty-panel-header { margin-bottom: 20px; }
.difficulty-panel-title { margin: 0; color: #ffd700; font-size: var(--fs-lg); }
.difficulty-panel-range { margin: 5px 0; color: #999; font-size: var(--fs-xs); }
.difficulty-panel-hint { margin: 10px 0 0; color: #4caf50; font-size: var(--fs-xs); }

.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: clamp(12px, 2vw, 16px);
    margin-bottom: 20px;
}

.difficulty-card {
    appearance: none;
    padding: clamp(14px, 2.4vw, 20px);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    border: 2px solid transparent;
    width: 100%;
    color: inherit;
    font: inherit;
    min-height: var(--tap-min);
}

.difficulty-card.is-dimmed { opacity: 0.5; }
.difficulty-card.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}

.difficulty-card-easy { background: #2d5016; }
.difficulty-card-medium { background: #4d3800; }
.difficulty-card-hard { background: #4d1616; }

.difficulty-card-count {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.difficulty-card-count-easy { color: #4caf50; }
.difficulty-card-count-medium { color: #ffa726; }
.difficulty-card-count-hard { color: #ef5350; }

.difficulty-card-label {
    font-size: var(--fs-md);
    margin-top: 8px;
}

.difficulty-card-label-easy { color: #81c784; }
.difficulty-card-label-medium { color: #ffb74d; }
.difficulty-card-label-hard { color: #e57373; }

.difficulty-card-easy:hover {
    border-color: #4caf50;
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(76, 175, 80, 0.2);
}

.difficulty-card-medium:hover {
    border-color: #ffa726;
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(255, 167, 38, 0.2);
}

.difficulty-card-hard:hover {
    border-color: #ef5350;
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(239, 83, 80, 0.2);
}

.difficulty-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.difficulty-title {
    margin: 20px 0 10px;
    font-size: var(--fs-md);
}

.difficulty-table-container {
    max-height: 400px;
    overflow: auto;
    background: #111;
    padding: clamp(10px, 2vw, 15px);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.difficulty-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-xs);
    table-layout: fixed;
}

.difficulty-table thead { background: #222; }

.difficulty-table th,
.difficulty-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #333;
    text-align: center;
}

.difficulty-col-question,
.difficulty-question-cell {
    text-align: right !important;
}

.difficulty-col-question { width: 36%; }

.difficulty-question-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.difficulty-question-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.difficulty-question-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4caf50;
    text-decoration: none;
    font-size: var(--fs-base);
    transition: transform 0.2s ease, color 0.2s ease;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.difficulty-question-link:hover {
    color: #81c784;
    transform: scale(1.2);
}

.difficulty-question-link:focus-visible {
    outline: 2px solid rgba(129, 199, 132, 0.9);
    outline-offset: 2px;
}

.difficulty-badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    font-size: var(--fs-xs);
}

.difficulty-badge-easy { background: #4caf50; }
.difficulty-badge-medium { background: #ffa726; }
.difficulty-badge-hard { background: #ef5350; }
.difficulty-badge-default { background: #999; }

.difficulty-success { font-weight: 700; }
.difficulty-updated { font-size: var(--fs-xs); color: #999; }
.difficulty-count { text-align: center; color: #999; margin-top: 10px; font-size: var(--fs-xs); }

.difficulty-empty {
    text-align: center;
    padding: clamp(24px, 5vw, 40px);
    color: #999;
}

.difficulty-empty-note { font-size: var(--fs-sm); }

/* -----------------------------------------------------------------------
   21. Cheater (anti-cheat) page
   -----------------------------------------------------------------------*/
.cheater-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: rtl;
    text-align: center;
    width: min(700px, calc(100% - 2 * var(--gutter-page)));
    margin: clamp(40px, 12vh, 120px) auto 0;
    padding: clamp(20px, 4vw, 30px);
    border-radius: 16px;
    background-color: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    animation: fadeIn 1s ease forwards;
    z-index: 1;
    position: relative;
}

.cheater-container h1 {
    color: #ff4c4c;
    font-size: var(--fs-2xl);
    margin-bottom: 20px;
}

.cheater-container p {
    color: #1a1a1a;
    font-size: var(--fs-base);
    line-height: 1.7;
    margin: 0 0 12px;
    max-width: 36ch;
    text-align: center;
    unicode-bidi: plaintext;
}

.cheater-container .cheater-lead {
    max-width: 32ch;
}

.cheater-container a {
    margin-top: 25px;
    padding: 12px 22px;
    background-color: #ff4c4c;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.cheater-container a:hover {
    background-color: #cc0000;
}

/* -----------------------------------------------------------------------
   22. Modals (difficulty selector)
   -----------------------------------------------------------------------*/

/* Difficulty selector */
.difficulty-modal {
    display: none;
    pointer-events: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    overflow: auto;
    padding: clamp(16px, 4vw, 32px);
    animation: fadeIn 0.3s;
}

.difficulty-modal-content {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: min(460px, 100%);
    margin: clamp(20px, 8vh, 100px) auto;
    padding: clamp(20px, 4vw, 40px);
    border-radius: 15px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.3s;
    direction: rtl;
    position: relative;
    pointer-events: auto;
    z-index: 1;
}

.difficulty-modal-title {
    text-align: center;
    color: #fff;
    margin: 0 0 24px;
    font-size: var(--fs-xl);
}

.difficulty-modal-message {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 24px;
    line-height: 1.6;
    font-size: var(--fs-md);
    text-align: center;
}

.difficulty-buttons-single {
    justify-content: center;
}

.difficulty-buttons-single .difficulty-btn {
    min-width: 140px;
    cursor: pointer;
    border: none;
    font: inherit;
}

/* One-time announcement */
.notice-modal {
    display: none;
    pointer-events: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 6000;
    overflow: auto;
    padding: clamp(16px, 4vw, 32px);
    animation: fadeIn 0.3s;
}

.notice-modal.notice-modal-open {
    display: flex;
    pointer-events: auto;
    justify-content: center;
    align-items: center;
}

.notice-modal-content {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(76, 175, 80, 0.45);
    width: min(480px, 100%);
    margin: auto;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 15px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.3s;
    direction: rtl;
    position: relative;
    text-align: center;
}

.notice-modal-text {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 24px;
    line-height: 1.6;
    font-size: var(--fs-md);
}

.notice-modal-btn {
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 32px;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notice-modal-btn:hover {
    background: #43a047;
}

.app-dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.app-dialog-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 12px 32px;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.app-dialog-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
}

.difficulty-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.difficulty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: clamp(14px, 2.5vw, 18px);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: var(--fs-lg);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    min-height: 56px;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 2;
}

.difficulty-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.difficulty-easy:hover {
    border-color: #4caf50;
    box-shadow: 0 5px 20px rgba(76, 175, 80, 0.4);
}

.difficulty-medium:hover {
    border-color: #ffa726;
    box-shadow: 0 5px 20px rgba(255, 167, 38, 0.4);
}

.difficulty-hard:hover {
    border-color: #ef5350;
    box-shadow: 0 5px 20px rgba(239, 83, 80, 0.4);
}

.difficulty-text { font-size: clamp(1.1rem, 3vw, 1.5rem); }

.close-difficulty-modal {
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 10px;
    left: 18px;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.close-difficulty-modal:hover {
    color: #fff;
    transform: scale(1.2);
}

@media (hover: none) {
    .difficulty-btn:hover {
        transform: none;
    }
}

/* -----------------------------------------------------------------------
   23. Stats drawer (footer toggle)
   -----------------------------------------------------------------------*/
#stats-panel.stats-drawer {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: max-height 0.35s ease, opacity 0.3s ease;
    direction: rtl;
}

#stats-panel.stats-drawer.is-open {
    max-height: 132px;
    opacity: 1;
}

#stats-panel.stats-drawer.is-open.is-advanced-open {
    max-height: 220px;
}

.stats-drawer-advanced {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 16px 10px;
}

.stats-drawer-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 0 4px;
    background: none;
    border: none;
    color: #aaa;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.stats-drawer-advanced-toggle:hover {
    color: #ddd;
}

.stats-drawer-advanced-toggle[aria-expanded="true"] .stats-drawer-advanced-chevron {
    transform: rotate(180deg);
}

.stats-drawer-advanced-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
}

.stats-drawer-advanced-panel {
    text-align: center;
    padding-bottom: 4px;
}

.stats-drawer-advanced-hint {
    margin: 0 0 8px;
    color: #999;
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.stats-drawer-reset-form {
    margin: 0;
}

.stats-drawer-reset-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #8b3030;
    background: #3d1f1f;
    color: #ffb0b0;
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
}

.stats-drawer-reset-btn:hover {
    background: #522828;
}

.stats-drawer-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2.5vw, 24px);
    padding: 10px clamp(12px, 3vw, 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.stats-drawer-inner::-webkit-scrollbar {
    display: none;
}

.stats-drawer-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 48px;
}

.stats-drawer-value {
    font-size: var(--fs-md);
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.stats-drawer-label {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

.stats-drawer-sound {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-inline-start: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8em;
    cursor: pointer;
    white-space: nowrap;
}

.stats-drawer-sound input {
    accent-color: #a29bfe;
}

.stats-drawer-more-btn {
    flex: 0 0 auto;
    margin-inline-start: 8px;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(108, 92, 231, 0.35);
    border: 1px solid rgba(162, 155, 254, 0.45);
    color: #fff;
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.stats-drawer-more-btn:hover {
    background: rgba(108, 92, 231, 0.55);
    color: #fff;
}

.stats-question-link {
    color: #a29bfe;
    text-decoration: none;
}

.stats-question-link:hover {
    text-decoration: underline;
}

.site-footer-wrap {
    margin-top: auto;
    width: 100%;
}

.site-footer-wrap .site-footer {
    margin-top: 0;
}

/* -----------------------------------------------------------------------
   24. Code block safety (any <pre>/<code>/.code-block content)
   -----------------------------------------------------------------------*/
pre,
code,
.code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    max-width: 100%;
}

pre,
.code-block {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: pre;
    background: #0f0f10;
    color: #f1f1f1;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-sm);
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
    direction: ltr;
    text-align: left;
}

:not(pre) > code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.95em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* -----------------------------------------------------------------------
   25. Site footer (sticky-bottom via flex, not position:fixed)
   -----------------------------------------------------------------------*/
.site-footer {
    margin-top: auto;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-inline-start: max(clamp(12px, 3vw, 20px), env(safe-area-inset-left));
    padding-inline-end: max(clamp(12px, 3vw, 20px), env(safe-area-inset-right));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl;
    text-align: center;
    color: #fff;
    isolation: isolate;
    z-index: 10;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 20px);
    flex-wrap: wrap;
    max-width: 100%;
}

.footer-text {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    text-align: center;
    display: inline-block;
}

.site-footer > p {
    margin: 0 auto;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    text-align: center;
    display: inline-block;
    width: auto;
}

.site-footer a,
.site-footer > p a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.site-footer a:hover,
.site-footer > p a:hover {
    color: #fff !important;
}

.site-footer a:visited,
.site-footer > p a:visited {
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-icons {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.4vw, 12px);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-icon {
    color: rgba(255, 255, 255, 0.96) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.footer-icon:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.footer-icon:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.footer-icon svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    stroke: currentColor;
    opacity: 1;
    visibility: visible;
}

.top-bar .footer-icon,
.top-bar .footer-icon svg,
.site-footer .footer-icon,
.site-footer .footer-icon svg {
    color: #fff !important;
    stroke: currentColor !important;
}

.top-bar .footer-icons {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-text svg,
.site-footer > p svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
}

@media (hover: none) {
    .footer-icon:hover {
        transform: none;
    }
}

/* -----------------------------------------------------------------------
   26. Animations (preserve names — referenced by elements above)
   -----------------------------------------------------------------------*/
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

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

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

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

/* -----------------------------------------------------------------------
   27. Responsive cascade
       sm: 640  /  md: 768  /  lg: 1024  /  xl: 1280  /  2xl: 1536
   -----------------------------------------------------------------------*/

/* --- Tablet portrait & below --- */
@media (max-width: 1023.98px) {
    .dashboard-page {
        padding: clamp(14px, 2.6vw, 22px);
    }
}

/* --- Tablet portrait --- */
@media (max-width: 767.98px) {
    .top-bar {
        padding: 8px 12px;
    }

    .top-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .top-bar-left {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .top-bar-admin-links {
        justify-content: center;
        width: 100%;
    }

    .top-bar .footer-icons {
        justify-content: center;
        width: auto;
    }

    .difficulty-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* Stack the test-results image above content on narrow screens. */
    .test-results-item {
        flex-direction: column;
        align-items: stretch;
    }

    .test-results-question-image {
        width: 100%;
        max-height: 180px;
    }

    .test-results-review-link {
        top: 8px;
        inset-inline-end: 8px;
    }

    .button-row > * {
        flex: 1 1 160px;
    }

    .button-row .btn,
    .button-row .next-question-btn,
    .button-row form {
        width: 100%;
    }

    .button-row form .btn,
    .button-row form .next-question-btn {
        width: 100%;
    }
}

/* --- Small phones --- */
@media (max-width: 479.98px) {
    .top-bar-admin-link {
        font-size: 12px;
        padding: 8px 10px;
    }

    .top-bar .footer-icon,
    .site-footer .footer-icon {
        width: 38px;
        height: 38px;
    }

    .dashboard-table th,
    .dashboard-table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    .leaderboard-cell-header,
    .leaderboard-cell {
        padding: 10px 12px;
        font-size: var(--fs-sm);
    }

    .difficulty-panel {
        padding: 14px;
    }

    .exam-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .exam-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .exams-footer-actions .btn {
        width: 100%;
        min-width: 0;
    }

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

    .login-action-btn {
        flex: 1 1 auto;
        width: 100%;
    }

    .report-submit-btn {
        width: 100%;
        font-size: var(--fs-base);
    }

    .difficulty-modal-content {
        padding: 18px;
    }

    /* Stats drawer sits in footer flow on mobile — no floating panel. */
    #stats-panel.stats-drawer.is-open {
        max-height: 140px;
    }

    #stats-panel.stats-drawer.is-open.is-advanced-open {
        max-height: 230px;
    }
}

/* --- Wide desktops: roomier dashboard / quiz --- */
@media (min-width: 1280px) {
    .quiz-container {
        padding: 28px;
    }

    .dashboard-page {
        padding: 32px;
    }
}

/* --- Reduced motion (preserved) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .difficulty-card:hover,
    .difficulty-card-easy:hover,
    .difficulty-card-medium:hover,
    .difficulty-card-hard:hover,
    .difficulty-question-link:hover,
    .answer-btn:hover,
    .btn:hover,
    .next-question-btn:hover,
    .main-btn:hover,
    .secondary-btn:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* -----------------------------------------------------------------------
   28. Cross-platform polish
       - iOS form auto-zoom prevention
       - Custom scrollbars on scroll containers
       - Windows high-contrast / forced-colors
       - Print stylesheet
   -----------------------------------------------------------------------*/

/* iOS auto-zooms on focus when input font-size is below 16px. Lock to 16px on
   small touch viewports while keeping the desktop fluid sizing untouched. */
@media (max-width: 767.98px) {
    .input-field,
    .report-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* Slim, theme-matched scrollbars on horizontal/vertical scroll containers.
   Firefox uses scrollbar-width / scrollbar-color; WebKit uses ::-webkit-scrollbar. */
.dashboard-table-shell,
.difficulty-table-container,
.leaderboard-table-shell,
pre,
.code-block {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.dashboard-table-shell::-webkit-scrollbar,
.difficulty-table-container::-webkit-scrollbar,
.leaderboard-table-shell::-webkit-scrollbar,
pre::-webkit-scrollbar,
.code-block::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.dashboard-table-shell::-webkit-scrollbar-track,
.difficulty-table-container::-webkit-scrollbar-track,
.leaderboard-table-shell::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
.code-block::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-table-shell::-webkit-scrollbar-thumb,
.difficulty-table-container::-webkit-scrollbar-thumb,
.leaderboard-table-shell::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.code-block::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

.dashboard-table-shell::-webkit-scrollbar-thumb:hover,
.difficulty-table-container::-webkit-scrollbar-thumb:hover,
.leaderboard-table-shell::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
.code-block::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.38);
}

/* Windows high-contrast mode: ensure tiles, cards, and answer states remain
   distinguishable when colors are forced. */
@media (forced-colors: active) {
    .answer-btn,
    .difficulty-card,
    .exam-card,
    .login-container,
    .login-panel,
    .quiz-container,
    .dashboard-page,
    .exams-container,
    .cheater-container {
        border: 1px solid CanvasText;
    }

    .correct {
        outline: 3px solid Highlight !important;
        forced-color-adjust: none;
    }

    .incorrect {
        outline: 3px dashed Highlight !important;
        forced-color-adjust: none;
    }

    .btn,
    .next-question-btn,
    .main-btn,
    .secondary-btn,
    .report-submit-btn {
        border: 1px solid ButtonText;
    }
}

/* Print stylesheet: clean layout for printing test results, leaderboard, or
   admin tables. Drops chrome (top bar, footer, modals, decorative gif) and
   restores high-contrast colors. */
@media print {
    .top-bar,
    .top-bar-spacer,
    .site-footer,
    .background-gif,
    #stats-panel,
    .difficulty-modal,
    .button-row,
    .exams-footer-actions,
    .report-container,
    .back-to-quiz {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
    }

    body {
        min-height: 0 !important;
        padding: 0 !important;
    }

    .quiz-container,
    .exam-card,
    .test-results-item,
    .leaderboard-container,
    .dashboard-page,
    .exams-container,
    .stats-page,
    .difficulty-panel,
    .difficulty-table-container {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .dashboard-table th,
    .dashboard-table td,
    .difficulty-table th,
    .difficulty-table td,
    .leaderboard-cell,
    .leaderboard-cell-header {
        color: #000 !important;
        border-color: #999 !important;
        white-space: normal !important;
    }

    .dashboard-table tr:nth-child(even) {
        background: #f3f3f3 !important;
    }

    /* Drop the grayscale filter so printed answer thumbnails are readable. */
    .answer-btn img,
    .result-ans,
    .test-results-question-image {
        filter: none !important;
        background: #fff !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* Hide modal backdrops if they happen to be open. */
    .modal-open {
        display: none !important;
    }
}

/* System check (admin) */
.system-check-page .system-check-subtitle {
    color: #aaa;
    margin: -0.5rem 0 1rem;
    font-size: var(--fs-sm);
}

.system-check-banner {
    text-align: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.system-check-banner-ok {
    background: #1f3d2a;
    border-color: #28a745;
    color: #9fdfb0;
}

.system-check-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(22, 22, 22, 0.9) 100%);
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.system-check-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 44px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.system-check-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.system-check-btn-primary {
    background: linear-gradient(180deg, #45d392 0%, #2db87a 100%);
    color: #0a1f14;
    border-color: #5ee0a8;
    box-shadow: 0 2px 10px rgba(45, 184, 122, 0.35);
}

.system-check-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #52dba0 0%, #35c888 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(45, 184, 122, 0.45);
}

.system-check-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(45, 184, 122, 0.3);
}

.system-check-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.system-check-btn-primary.is-running .system-check-btn-icon {
    animation: system-check-spin 0.9s linear infinite;
}

.system-check-btn-secondary {
    background: #2c2c2c;
    color: #f0f0f0;
    border-color: #4a4a4a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.system-check-btn-secondary .system-check-btn-icon {
    transform: scaleX(-1);
}

.system-check-btn-secondary:hover {
    background: #383838;
    border-color: #666;
    color: #fff;
    transform: translateY(-1px);
}

.system-check-btn-secondary:active {
    transform: translateY(0);
    background: #262626;
}

.system-check-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

@keyframes system-check-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@media (hover: none) {
    .system-check-btn-primary:hover:not(:disabled),
    .system-check-btn-secondary:hover {
        transform: none;
    }
}

.system-check-table td:nth-child(3) {
    word-break: break-word;
    max-width: 420px;
}

.system-check-row-ok td:first-child {
    border-right: 3px solid #28a745;
}

.system-check-row-fail td:first-child {
    border-right: 3px solid #dc3545;
}

.system-check-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.system-check-badge-ok {
    background: #1f3d2a;
    color: #9fdfb0;
}

.system-check-badge-fail {
    background: #3d1f1f;
    color: #ffb0b0;
}

.system-check-badge-pending {
    background: #2a2a2a;
    color: #aaa;
}

.system-check-badge-running {
    background: #3d3a1f;
    color: #ffe08a;
    animation: system-check-pulse 1s ease-in-out infinite;
}

.system-check-badge-warn {
    background: #3d2f1f;
    color: #ffd59a;
}

.system-check-banner-running {
    background: #2a2a3d;
    border-color: #6c7cff;
    color: #c5ccff;
}

.system-check-banner-warn {
    background: #3d2f1f;
    border-color: #ffc107;
    color: #ffd59a;
}

.system-check-row-pending td:first-child {
    border-right: 3px solid #555;
}

.system-check-row-running td:first-child {
    border-right: 3px solid #ffc107;
}

.system-check-row-warn td:first-child {
    border-right: 3px solid #fd7e14;
}

.system-check-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 1rem;
    font-size: var(--fs-sm);
}

.system-check-summary-passed { color: #9fdfb0; }
.system-check-summary-warn { color: #ffd59a; }
.system-check-summary-fail { color: #ffb0b0; }

.system-check-progress-wrap {
    height: 6px;
    background: #2a2a2a;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.system-check-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #28a745, #6c7cff);
    transition: width 0.25s ease;
}

.system-check-detail {
    word-break: break-word;
    max-width: 420px;
}

.system-check-time {
    white-space: nowrap;
    color: #aaa;
    font-size: var(--fs-xs);
}

@keyframes system-check-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}