/* ===========================================================================
   Design tokens — single source of truth for brand & semantic colors.
   These mirror hex literals that were previously hardcoded ~100x in this file.
   Values are intentionally MODE-INVARIANT (no dark override) so the sweep that
   introduced them changed no rendered color. Rebrand = edit here.
   NOTE: surfaces and per-component dark-mode twins still use their own values —
   that consolidation is a separate, later step.

   COLOR STORY (the rule — keep new UI consistent with it):
     • BLUE  (--ejtaaz-primary)  = navigation & chrome: navbar, links, the path
       entry/continue hero, the bottom-tab FAB. "Where you go."
     • GREEN — two intentional roles, do NOT mix them:
         --ejtaaz-success (calm)  = semantic correct/positive everywhere
           (admin badges, toasts, review "correct", score-ring high, stats up).
         --ejtaaz-lesson  (bright) = the playful answer-LOOP commit/progress
           only (تحقّق/متابعة lesson bar, lesson progress). "You committed."
     • AMBER/ORANGE = streaks, quests, sales, "needs work". RED = wrong/danger.
   =========================================================================== */
:root {
    --ejtaaz-primary:        #0d6efd;   /* nav & chrome (see color story above) */
    --ejtaaz-primary-dark:   #0a58ca;   /* hover / active / gradient end */
    --ejtaaz-success:        #198754;   /* semantic correct/positive (calm green) */
    --ejtaaz-danger:         #dc3545;
    --ejtaaz-warning:        #ffc107;
    --ejtaaz-orange:         #fd7e14;
    --ejtaaz-purple:         #6f42c1;
    /* Lesson answer-loop green scale (bright commit green — NOT semantic success) */
    --ejtaaz-lesson:         #58cc02;
    --ejtaaz-lesson-600:     #46a302;
    --ejtaaz-lesson-700:     #2e8000;
    /* Wrong-answer reds */
    --ejtaaz-wrong:          #ff4b4b;
    --ejtaaz-wrong-dark:     #b02a37;
}

body {
    font-family: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
    background: #f5f7fb;
    color: #2d3748;
    font-size: 16px;
    line-height: 1.7;
    /* Inherited by every text container — long unbroken strings (law
       articles, Gemini feedback, pasted URLs) wrap instead of pushing
       the page wider than the viewport. */
    overflow-wrap: break-word;
}

/* Layout guardrails: technical strings (codes, JSON payloads in the audit
   log, tokens) may have no break opportunities at all — allow breaking
   anywhere rather than overflowing. Media never exceeds its container. */
code, kbd, pre { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; }
img, video, canvas { max-width: 100%; }

/* Phones: bump up size for easier Arabic reading on small screens, and
   guarantee form inputs are ≥16px so iOS Safari doesn't auto-zoom on focus. */
@media (max-width: 640px) {
    body { font-size: 17px; line-height: 1.75; }
    .form-control, .form-select { font-size: 16px; }
    .btn { font-size: 1rem; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.15rem; }
}

/* Honor users who asked the OS to minimize motion — disables the hover
   lift on cards and the scroll-top / FAB transitions. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .subject-tile:hover { transform: none; }
}

/* Smooth theme transition. Applied only to color surfaces — NOT to
   transform/opacity, which would muddle hover lifts on subject tiles.
   The transition is short enough that no one notices on normal use but
   long enough to soften the jump when clicking the theme toggle. */
body, .card, .card-header, .alert, .navbar, .dropdown-menu,
.option-row, .feedback-section, .score-pill, .timer-badge,
.modal-content, footer, .tag-chip {
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease;
}
/* But respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    body, .card, .card-header, .alert, .navbar, .dropdown-menu,
    .option-row, .feedback-section, .score-pill, .timer-badge,
    .modal-content, footer, .tag-chip {
        transition: none;
    }
}

/* Keyboard-only focus ring. Mouse clicks won't trigger it (no ring on
   click), but Tab/Shift+Tab navigation reveals a clear outline so
   keyboard users can see where they are. */
:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .55);
    outline-offset: 2px;
}
.option-row:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .25);
}

/* Dark mode: Bootstrap's default .text-muted is dim on our darker
   background. Bump up contrast so secondary text stays readable. */
[data-bs-theme="dark"] {
    --bs-secondary-color: rgba(230, 232, 235, 0.72);
    --bs-secondary-bg: #1a1f26;
    --bs-tertiary-bg: #14181d;
    --bs-border-color: #2a3038;
    --bs-emphasis-color: #f1f3f5;
}
[data-bs-theme="dark"] .text-muted {
    color: rgba(230, 232, 235, 0.72) !important;
}
/* `.bg-light` panels are jarringly bright in dark mode → soften. The
   inner `.text-dark` text needs to follow, but only inside `.bg-light`;
   stand-alone `.text-dark` on `.bg-warning` badges (a common Bootstrap
   pattern) must stay dark for contrast on yellow. */
[data-bs-theme="dark"] .bg-light {
    background-color: #1a1f26 !important;
    color: #e6e8eb !important;
}
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-light.text-dark {
    color: #e6e8eb !important;
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    background-color: #14181d !important;
    color: #e6e8eb !important;
    border-color: #2a3038 !important;
}
/* Alert variants in dark mode: keep the meaning (color hint on the side)
   but tone down the bright pastel fills. */
[data-bs-theme="dark"] .alert-info {
    background-color: #14283a; color: #b6d4fe; border-color: #1e3a5c;
}
[data-bs-theme="dark"] .alert-success {
    background-color: #14331f; color: #b9e2c5; border-color: #1e5a35;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: #3a2c14; color: #ffd591; border-color: #5c4517;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: #3b1a1f; color: #f1b7bd; border-color: #5c2730;
}

/* Colored card borders are too saturated against the dark body bg.
   Tone them down so they read as accents, not neon. */
[data-bs-theme="dark"] .border-info    { border-color: #2c4d80 !important; }
[data-bs-theme="dark"] .border-success { border-color: #1e5a35 !important; }
[data-bs-theme="dark"] .border-warning { border-color: #5c4517 !important; }
[data-bs-theme="dark"] .border-danger  { border-color: #5c2730 !important; }
[data-bs-theme="dark"] .border-primary { border-color: #2c4d80 !important; }

/* `.bg-info.bg-opacity-10` etc. produce 10% of the (now-light) theme
   color over a dark body bg — collapses to nearly invisible. Use a
   higher-alpha translucent fill so card headers stay legible. Text
   colors (text-info/success/…) we leave to Bootstrap, which already
   shifts them to lighter shades in dark mode. */
[data-bs-theme="dark"] .bg-info.bg-opacity-10    { background-color: rgba(110, 223, 246, .12) !important; }
[data-bs-theme="dark"] .bg-success.bg-opacity-10 { background-color: rgba(117, 183, 152, .14) !important; }
[data-bs-theme="dark"] .bg-warning.bg-opacity-10 { background-color: rgba(255, 218, 106, .14) !important; }
[data-bs-theme="dark"] .bg-danger.bg-opacity-10  { background-color: rgba(234, 134, 143, .14) !important; }

.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 600;
}

/* ===== Dark theme overrides ===== */
/* Bootstrap 5.3 already darkens cards/tables/forms/dropdowns/navbar via
   data-bs-theme="dark". This block fixes the custom classes above (and
   below) whose colors were hardcoded. */
[data-bs-theme="dark"] body {
    background: #0f1419;
    color: #e6e8eb;
}
[data-bs-theme="dark"] .card {
    background-color: #1a1f26;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .card-header {
    background: #1a1f26;
    border-bottom-color: #2a3038;
    color: #e6e8eb;
}
[data-bs-theme="dark"] footer.bg-light {
    background-color: #14181d !important;
    border-top-color: #2a3038 !important;
}
[data-bs-theme="dark"] footer.bg-light .text-muted {
    color: #8a929c !important;
}

/* (Removed a redundant `.btn { border-radius:8px; font-weight:500 }` here —
   both properties were fully overridden by the Duolingo-skin `.btn` later in
   this file. The skin's radius/weight now apply without being shadowed.) */

.btn-lg {
    border-radius: 10px;
}

.subject-tile {
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.subject-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.kind-card {
    border-inline-start: 4px solid var(--bs-primary);
}

.option-row {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.option-row:hover {
    border-color: var(--bs-primary);
    background: #f8f9ff;
}

.option-row.selected {
    border-color: var(--bs-primary);
    background: #e7f0ff;
}

.option-row.correct {
    border-color: var(--ejtaaz-success);
    background: #d1e7dd;
}

.option-row.wrong {
    border-color: var(--ejtaaz-danger);
    background: #f8d7da;
}

[data-bs-theme="dark"] .option-row {
    border-color: #2a3038;
    background: #1a1f26;
    color: #e6e8eb;
}
[data-bs-theme="dark"] .option-row:hover {
    border-color: var(--bs-primary);
    background: #1d2530;
}
[data-bs-theme="dark"] .option-row.selected {
    border-color: var(--bs-primary);
    background: #1b3354;
}
[data-bs-theme="dark"] .option-row.correct {
    border-color: var(--ejtaaz-success);
    background: #14331f;
    color: #b9e2c5;
}
[data-bs-theme="dark"] .option-row.wrong {
    border-color: var(--ejtaaz-danger);
    background: #3b1a1f;
    color: #f1b7bd;
}

.composition-textarea {
    min-height: 320px;
    font-size: 1.05rem;
    line-height: 1.9;
    font-family: inherit;
}

.word-counter {
    font-size: 0.95rem;
    color: #6c757d;
}

.word-counter.warn {
    color: #a64b00;  /* darkened from var(--ejtaaz-orange) (~2.6:1) to pass WCAG AA on white */
}

.word-counter.ok {
    color: var(--ejtaaz-success);
}

.score-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    background: #e7f0ff;
    color: var(--ejtaaz-primary);
}

.feedback-section {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 12px;
    border-inline-start: 4px solid var(--ejtaaz-primary);
}

.feedback-section.strengths {
    border-inline-start-color: var(--ejtaaz-success);
}

.feedback-section.improvements {
    border-inline-start-color: var(--ejtaaz-orange);
}

.feedback-section.suggestions {
    border-inline-start-color: var(--ejtaaz-purple);
}

/* Gemini feedback bullet lists (strengths / improvements / suggested phrases).
   Stored as "- item" markdown and now rendered via the `md_bullets` filter as
   a real <ul> instead of raw text with literal dashes. */
.fb-bullets {
    padding-inline-start: 1.25rem;
    margin-bottom: 0;
}
.fb-bullets li {
    margin-bottom: .3rem;
}
.fb-bullets li:last-child {
    margin-bottom: 0;
}

[data-bs-theme="dark"] .score-pill {
    background: #1b3354;
    color: #8ab4ff;
}
[data-bs-theme="dark"] .feedback-section {
    background: #1a1f26;
    color: #e6e8eb;
}
[data-bs-theme="dark"] .word-counter { color: #9aa3ad; }

.timer-badge {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    border: 2px solid var(--ejtaaz-primary);
    color: var(--ejtaaz-primary);
    font-weight: 700;
}
[data-bs-theme="dark"] .timer-badge {
    background: #1a1f26;
    color: #8ab4ff;
    border-color: #8ab4ff;
}

.login-card {
    max-width: 420px;
    margin: clamp(20px, 6vh, 60px) auto;
}

/* Theme-aware backdrop for "saving…" / "grading…" full-screen overlays.
   Replaces inline `style="background: rgba(255,255,255,0.95)"` which
   stayed white in dark mode and flashed the whole screen. */
.loading-overlay {
    background: rgba(255, 255, 255, 0.94);
}
[data-bs-theme="dark"] .loading-overlay {
    background: rgba(15, 20, 25, 0.94);
}

.login-logo {
    font-size: 3rem;
    color: var(--ejtaaz-primary);
}

/* Social sign-in: compact divider + circular provider icon (Google).
   Replaces the full-width button with a lighter, recognizable mark. */
.social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    margin: 1rem 0 .75rem;
}
.social-divider::before,
.social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: box-shadow .15s ease, transform .15s ease;
}
.btn-social:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
    transform: translateY(-1px);
}
.btn-social:focus-visible {
    outline: 2px solid var(--ejtaaz-primary);
    outline-offset: 2px;
}
/* Keep the white plate (Google brand) even in dark mode for the colored G. */
[data-bs-theme="dark"] .btn-social {
    border-color: rgba(255, 255, 255, .25);
}

.criteria-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.criteria-bar .label {
    width: 140px;
    font-weight: 500;
}
@media (max-width: 480px) {
    .criteria-bar .label { width: 105px; font-size: .85rem; }
}

.criteria-bar .progress {
    flex-grow: 1;
    height: 22px;
    background: #e9ecef;
}
[data-bs-theme="dark"] .criteria-bar .progress {
    background: #2a3038;
}

/* Per-card "request help" button injected by exam-question-tracker.js */
.ask-assistant-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .65rem;
    margin-bottom: .5rem;
    background: linear-gradient(135deg, #e7f1ff 0%, #d8e7ff 100%);
    color: #084298;
    border: 1px solid #b6d4fe;
    border-radius: 999px;
    font-size: .8rem; font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.ask-assistant-btn:hover {
    background: linear-gradient(135deg, #d3e4ff 0%, #b6d4fe 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(13,110,253,.18);
}
.ask-assistant-btn:active { transform: translateY(0); }
.ask-assistant-btn i { font-size: .9rem; }
@media (max-width: 480px) {
    .ask-assistant-btn { font-size: .75rem; padding: .2rem .5rem; }
}
[data-bs-theme="dark"] .ask-assistant-btn {
    background: linear-gradient(135deg, #1b3354 0%, #224372 100%);
    color: #b6d4fe;
    border-color: #2c4d80;
}
[data-bs-theme="dark"] .ask-assistant-btn:hover {
    background: linear-gradient(135deg, #224372 0%, #2c4d80 100%);
    color: #d8e7ff;
}

/* ===== Exam toolkit: question navigator + flag-for-review ===== */
.q-navigator {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .4rem 0 .2rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.q-chip {
    flex: 0 0 auto;
    min-width: 34px;
    height: 30px;
    padding: 0 .4rem;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .85rem;
    font-weight: 600;
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}
.q-chip:hover { border-color: var(--bs-primary); }
.q-chip.answered {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.q-chip.flagged::after {
    content: "";
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--ejtaaz-warning);
    border: 2px solid var(--bs-body-bg);
}
.q-chip.active { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
/* Fallback position when a page has no sticky header to host the palette */
.q-navigator-floating {
    position: fixed;
    bottom: 0; right: 0; left: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .4rem .75rem;
    z-index: 1070;
}

.exam-q-card { scroll-margin-top: 120px; }
.exam-q-card.flagged { border-inline-start: 4px solid var(--ejtaaz-warning); }

.flag-btn {
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    padding: .1rem .4rem;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
}
.flag-btn:hover { color: var(--ejtaaz-warning); }
.flag-btn.on i { color: var(--ejtaaz-warning); }

.q-shortcuts-hint { font-size: .75rem; margin-top: .1rem; }
.q-shortcuts-hint kbd {
    font-size: .7rem;
    padding: .1rem .35rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-radius: 4px;
}
@media (max-width: 767px) { .q-shortcuts-hint { display: none; } }

/* ===== Avatars ===== */
.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    background: var(--bs-secondary-bg);
}
.avatar-letter { color: #fff; font-weight: 700; }
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: .5rem;
}
.avatar-option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    font-size: 1.7rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.avatar-option:hover { transform: scale(1.08); border-color: var(--bs-primary); }
.avatar-option:has(input:checked) {
    border-color: var(--bs-primary);
    background: rgba(13, 110, 253, .08);
}
.avatar-default-letter {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #6c757d; color: #fff;
    font-size: 1.05rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ===== Dashboard engagement hero ===== */
.hero-tile { border-inline-start: 4px solid var(--bs-warning); }
.streak-flame {
    width: 58px; height: 58px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.streak-flame.lit {
    color: #fff;
    background: radial-gradient(circle at 50% 65%, #ff9f1a 0%, var(--ejtaaz-orange) 55%, var(--ejtaaz-danger) 100%);
    animation: flame-pulse 1.8s ease-in-out infinite;
}
@keyframes flame-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, .45); }
    50%      { box-shadow: 0 0 0 10px rgba(253, 126, 20, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .streak-flame.lit { animation: none; }
}
.goal-ring { position: relative; flex-shrink: 0; }
.goal-ring svg circle { transition: stroke-dashoffset .6s ease; }
.goal-ring-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}

/* ===== Locked feature tiles & nav (conversion tease) ===== */
.tile-locked {
    position: relative;
    border-inline-start-color: var(--bs-secondary) !important;
    filter: grayscale(.45);
    opacity: .85;
}
.tile-locked:hover { filter: grayscale(0); opacity: 1; }
.tile-lock-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--bs-warning);
    color: #212529;
    font-size: .7rem; font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
}
.nav-locked { opacity: .75; }
.nav-locked .lock-ic { font-size: .65rem; vertical-align: super; color: var(--ejtaaz-warning); }

/* ===== XP pop on result pages ===== */
.xp-pop {
    display: inline-block;
    background: linear-gradient(135deg, var(--ejtaaz-warning) 0%, var(--ejtaaz-orange) 100%);
    color: #212529;
    font-weight: 800;
    font-size: 1.15rem;
    padding: .35rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(253, 126, 20, .35);
    animation: xp-pop-in .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes xp-pop-in {
    from { transform: scale(.3); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .xp-pop { animation: none; } }

/* ===== Upsell card ===== */
.upsell-card {
    border: 1px solid rgba(255, 193, 7, .5);
    background: linear-gradient(135deg, rgba(255, 193, 7, .07) 0%, rgba(253, 126, 20, .07) 100%);
}

/* ===== Packages page conversion elements ===== */
.pkg-featured {
    position: relative;
    border: 2px solid var(--ejtaaz-warning) !important;
    box-shadow: 0 6px 24px rgba(255, 193, 7, .25);
    overflow: visible;
}
@media (min-width: 1200px) {
    .pkg-featured { transform: scale(1.03); z-index: 2; }
}
.pkg-featured-ribbon {
    position: absolute;
    top: -13px;
    right: 50%;
    transform: translateX(50%);
    background: linear-gradient(135deg, var(--ejtaaz-warning) 0%, var(--ejtaaz-orange) 100%);
    color: #212529;
    font-size: .75rem;
    font-weight: 800;
    padding: .2rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(253, 126, 20, .4);
}
.pkg-trust span { white-space: nowrap; }

/* ===== League tier hero band ===== */
.league-hero {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: #fff;
    border-radius: 18px;
    padding: .9rem 1.2rem;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .15);
}
.league-hero .lh-icon { font-size: 2.2rem; }
.league-hero-t0 { background: linear-gradient(135deg, #8d5524, #b87333); }
.league-hero-t1 { background: linear-gradient(135deg, #6c757d, #aeb6bf); }
.league-hero-t2 { background: linear-gradient(135deg, #f5a623, #ff7e00); }
.league-hero-t3 { background: linear-gradient(135deg, #00b4d8, #7b2ff7); }

/* ===== Weekly leaderboard ===== */
.podium-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .75rem;
}
.podium-col {
    text-align: center;
    width: 130px;
    max-width: 28vw; /* 3 columns + gaps must fit a 360px phone */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.podium-crown {
    position: absolute;
    top: -22px;
    font-size: 1.3rem;
    animation: crown-bob 2.2s ease-in-out infinite;
}
@keyframes crown-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-4px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .podium-crown { animation: none; } }
.podium-medal { font-size: 2rem; }
.podium-name { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-xp { font-size: .75rem; color: var(--bs-secondary-color); }
.podium-bar {
    height: 46px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg, var(--bs-secondary-bg)) 100%);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    margin-top: .35rem;
}
.podium-col.first .podium-bar {
    height: 74px;
    background: linear-gradient(180deg, rgba(255, 193, 7, .35) 0%, rgba(255, 193, 7, .12) 100%);
    border-color: rgba(255, 193, 7, .6);
}
.podium-col.me .podium-name { color: var(--bs-primary); }
.lb-rank {
    min-width: 30px;
    text-align: center;
    font-weight: 800;
    color: var(--bs-secondary-color);
}
.lb-rank.top { color: var(--ejtaaz-orange); }
.lb-me {
    background: rgba(13, 110, 253, .07);
    border-inline-start: 4px solid var(--bs-primary);
}
[data-bs-theme="dark"] .lb-me { background: rgba(13, 110, 253, .15); }
.lb-promote { background: rgba(25, 135, 84, .06); }
.lb-demote { background: rgba(220, 53, 69, .06); }
[data-bs-theme="dark"] .lb-promote { background: rgba(25, 135, 84, .14); }
[data-bs-theme="dark"] .lb-demote { background: rgba(220, 53, 69, .14); }

/* ════════════════════════════════════════════════════════════════════
   EJTAAZ DESIGN SYSTEM v2 — Duolingo-inspired skin
   Chunky rounded shapes, 3D pressable buttons, lively tiles, calm cards.
   Loaded after Bootstrap so these override its defaults globally.
   ════════════════════════════════════════════════════════════════════ */

/* --- Cards: soft, rounded, breathing --- */
.card {
    border-radius: 16px;
    border-color: var(--bs-border-color);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.card .card-header {
    border-top-right-radius: 16px !important;
    border-top-left-radius: 16px !important;
    background: transparent;
    font-weight: 700;
}
.list-group-flush > .list-group-item:last-child { border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; }

/* --- Buttons: the Duolingo 3D press --- */
.btn {
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
    transition: transform .06s ease, box-shadow .06s ease, filter .15s ease;
    border-width: 0;
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.btn:active, .btn.active {
    transform: translateY(4px);
    box-shadow: 0 0 0 rgba(0, 0, 0, .18) !important;
}
.btn-link, .btn-close, .nav-link.btn { box-shadow: none; }
.btn-link:active { transform: none; }
.btn[class*="btn-outline-"] {
    border-width: 2px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .10);
}
/* keep tiny utility buttons flat */
.btn-sm { box-shadow: 0 3px 0 rgba(0, 0, 0, .14); border-radius: 11px; }

/* --- Pills, progress, badges --- */
.progress { border-radius: 99px; overflow: hidden; }
.progress-bar { border-radius: 99px; transition: width .5s ease; }
.badge { border-radius: 8px; font-weight: 700; }

/* --- Tiles lift on hover --- */
.subject-tile, .kind-card, .law-card {
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: 16px;
}
.subject-tile:hover, .kind-card:hover, .law-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
}

/* --- Headings: bolder, friendlier --- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 800; }

/* --- Page transitions: native cross-fade where supported, CSS fallback --- */
@view-transition { navigation: auto; }
@keyframes page-in {
    /* End on `transform: none` (not translateY(0)). With fill-mode `both`,
       translateY(0) would leave a persistent transform on the content
       container, which becomes the containing block for position:fixed
       descendants — trapping Bootstrap modals BEHIND their backdrop
       (visible but unclickable). `none` plays the same rise then clears. */
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
main > .container { animation: page-in .22s ease both; }
@media (prefers-reduced-motion: reduce) {
    main > .container { animation: none; }
    @view-transition { navigation: none; }
}

/* --- Entrance pop for hero elements --- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }   /* clear transform — see page-in note */
}
.pop-in { animation: rise-in .3s ease both; }
@media (prefers-reduced-motion: reduce) { .pop-in { animation: none; } }

/* --- Subject tiles: per-subject icon chip --- */
.subj-ic {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin-inline-end: .65rem;
    flex-shrink: 0;
}

/* --- Friendly empty states with the mascot --- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}
.empty-mascot {
    border-radius: 20px;
    opacity: .92;
    box-shadow: 0 6px 18px rgba(13, 110, 253, .18);
}
.empty-state-ic {
    display: block;
    font-size: 2.6rem;
    color: var(--bs-secondary-color);
    opacity: .6;
    margin-bottom: .25rem;
}

/* --- Auth pages: brand + ambience --- */
.brand-mark {
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .25);
}
.value-chip {
    background: var(--bs-secondary-bg);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-weight: 600;
}
.login-card { border-radius: 22px; }
/* soft ambient blobs behind auth pages */
body:has(.login-card)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(420px circle at 12% 8%, rgba(13, 110, 253, .10), transparent 60%),
        radial-gradient(380px circle at 88% 92%, rgba(255, 193, 7, .10), transparent 60%);
}
/* In dark mode a single faint blob on near-black reads as stark; lay a gentle,
   even blue→ink wash so the auth page feels intentional and cohesive. */
[data-bs-theme="dark"] body:has(.login-card)::before {
    background:
        radial-gradient(620px circle at 15% 0%, rgba(13, 110, 253, .22), transparent 60%),
        radial-gradient(520px circle at 90% 100%, rgba(111, 66, 193, .18), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0e1626 100%);
}

/* --- Score ring (conic gradient, no JS) --- */
.score-ring {
    --p: 0;
    --ring: var(--ejtaaz-success);
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%),
                               var(--bs-secondary-bg) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.score-ring.score-high { --ring: var(--ejtaaz-success); }
.score-ring.score-mid  { --ring: var(--ejtaaz-warning); }
.score-ring.score-low  { --ring: var(--ejtaaz-danger); }
.score-ring-inner {
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(16, 24, 40, .06);
}

/* --- The big CONTINUE hero --- */
.continue-hero {
    background: linear-gradient(135deg, var(--ejtaaz-primary) 0%, var(--ejtaaz-primary-dark) 100%);
    border-radius: 20px;
    color: #fff;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .28);
}
.continue-hero .ch-label { font-size: .8rem; opacity: .85; }
.continue-hero .ch-title { font-size: 1.15rem; font-weight: 800; }
.continue-hero .btn {
    background: #fff; color: var(--ejtaaz-primary-dark);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
    white-space: nowrap;
}

/* Hearts in the top strip flash a soft warning when nearly empty. */
.hearts-strip.hearts-low { animation: hearts-pulse 1.6s ease-in-out infinite; }
@keyframes hearts-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .hearts-strip.hearts-low { animation: none; } }

/* In-lesson hearts pill — the only visible brake while focus mode hides the
   top .stat-strip (body.in-lesson). Self-contained so updateHearts() never
   writes the live count into a hidden node. */
.lesson-hearts {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--ejtaaz-danger);
    background: rgba(220, 53, 69, .12);
}
.lesson-hearts .bi { font-size: .9rem; }
.lesson-hearts.hearts-low { animation: hearts-pulse 1.6s ease-in-out infinite; }
.lesson-hearts.hearts-empty {           /* out of hearts: muted, no alarm pulse */
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .lesson-hearts { color: #ff8a8a; background: rgba(255, 75, 75, .18); }
@media (prefers-reduced-motion: reduce) { .lesson-hearts.hearts-low { animation: none; } }

/* --- Top stat strip (trainees, all pages) --- */
.stat-strip {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    padding: .35rem .75rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 800;
    font-size: .9rem;
}
.stat-strip a { color: var(--bs-body-color); text-decoration: none; display: flex; align-items: center; gap: .25rem; }
.stat-strip a:hover { transform: scale(1.06); }
.notif-bell { position: relative; }
.notif-badge {
    position: absolute; top: -6px; inset-inline-end: -8px;
    background: var(--bs-danger, #dc3545); color: #fff;
    font-size: .62rem; line-height: 1; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
/* --- Notification inbox --- */
.min-w-0 { min-width: 0; }
.notif-list .notif-icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ijtaz-primary-soft, #ede7fb); color: var(--bs-primary, #7c3aed);
    font-size: 1.1rem;
}
.notif-list .list-group-item { align-items: center; }
.notif-list .notif-unread { background: var(--ijtaz-primary-soft, #f3effc); }
.notif-list .notif-dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: var(--bs-primary, #7c3aed); align-self: center;
}

/* --- Mobile bottom tab bar --- */
.tabbar {
    position: fixed;
    bottom: 0; right: 0; left: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
    z-index: 1060;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
}
.tabbar a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.3;
}
.tabbar a i, .tabbar a .tb-ic { font-size: 1.25rem; display: block; }
.tabbar a.active { color: var(--bs-primary); }
.tabbar .tb-main {
    margin-top: -18px;
}
.tabbar .tb-main .tb-ic {
    width: 52px; height: 52px;
    margin: 0 auto 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ejtaaz-primary), var(--ejtaaz-primary-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 0 #073c8c, 0 6px 16px rgba(13, 110, 253, .4);
}
.tabbar .tb-main:active .tb-ic { transform: translateY(3px); box-shadow: 0 1px 0 #073c8c; }
/* Only on phones; leave room for it + keep FABs above it */
body.has-tabbar { padding-bottom: 76px; }
@media (min-width: 992px) {
    .tabbar { display: none; }
    body.has-tabbar { padding-bottom: 0; }
}
@media (max-width: 991px) {
    body.has-tabbar .fab-assistant { bottom: 86px; }
    body.has-tabbar .scroll-top-btn { bottom: 86px; }
}

/* ===== Confidence self-report ===== */
.conf-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}
.conf-btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 999px;
    font-size: .75rem;
    padding: .15rem .6rem;
}
.conf-btn.on {
    border-color: var(--bs-primary);
    background: rgba(13, 110, 253, .12);
    font-weight: 700;
}

/* ===== Attendance calendar ===== */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: .3rem;
}
.cal-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.cal-day.active { background: var(--bs-success); color: #fff; }
.cal-day.frozen { background: rgba(13, 202, 240, .25); }
.cal-day.future { opacity: .35; }
.cal-day.today { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* ===== Golden avatar frame (XP store) ===== */
.avatar-circle.gold-frame {
    box-shadow: 0 0 0 3px var(--ejtaaz-warning), 0 0 10px rgba(255, 193, 7, .55);
}

/* ===== Install nudge bar ===== */
.install-nudge {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .35rem .75rem;
    font-size: .85rem;
}
.install-nudge a { color: var(--bs-body-color); }
.install-nudge button {
    background: none; border: 0;
    color: var(--bs-secondary-color);
    font-size: 1.1rem; line-height: 1;
}

/* ===== Seasonal sale banner ===== */
.sale-banner {
    background: linear-gradient(90deg, var(--ejtaaz-orange) 0%, var(--ejtaaz-danger) 100%);
    padding: .45rem .75rem;
    text-align: center;
    font-size: .9rem;
}
.sale-banner a, .sale-banner a:hover { color: #fff; }
.sale-countdown { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ===== Question factory ===== */
.qf-article {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: .25rem .5rem;
    cursor: pointer;
    margin-bottom: 0;
}
.qf-article:hover { border-color: var(--bs-primary); }
.qf-article.qf-covered { opacity: .65; }

/* ===== Learning path — the winding Duolingo trail ===== */
.path-map {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1rem 0 2rem;
}
.path-map::before {
    content: "";
    position: absolute;
    top: 24px; bottom: 24px;
    right: calc(50% - 2px);
    border-right: 4px dashed var(--bs-border-color);
}
.path-node-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform .15s ease;
}
.path-node-row.side-r { transform: translateX(-72px); }
.path-node-row.side-l { transform: translateX(72px); }
@media (max-width: 420px) {
    .path-node-row.side-r { transform: translateX(-52px); }
    .path-node-row.side-l { transform: translateX(52px); }
}
.path-node {
    --p: 0;
    width: 78px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--bs-warning) calc(var(--p) * 1%),
                               var(--bs-secondary-bg) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
    transition: transform .1s ease, box-shadow .1s ease;
}
.path-node:hover { transform: translateY(-2px); }
.path-node:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.15); }
.path-node-inner {
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--bs-body-color);
}
/* Essay nodes read as a distinct (purple) step vs. the (amber) quiz nodes. */
.path-node.node-essay {
    background: conic-gradient(var(--ejtaaz-purple) calc(var(--p) * 1%), var(--bs-secondary-bg) 0);
}
.path-node.node-essay .path-node-inner { color: var(--ejtaaz-purple); }
.path-node.done { background: var(--bs-success); }
.path-node.done .path-node-inner { background: var(--bs-success); color: #fff; }
.path-node.current {
    animation: node-pulse 1.8s ease-in-out infinite;
}
.path-node.current .path-node-inner { color: var(--bs-primary); }
@keyframes node-pulse {
    0%, 100% { box-shadow: 0 5px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(13, 110, 253, .45); }
    50%      { box-shadow: 0 5px 0 rgba(0,0,0,.15), 0 0 0 12px rgba(13, 110, 253, 0); }
}
@media (prefers-reduced-motion: reduce) { .path-node.current { animation: none; } }
.path-node.readonly { background: var(--bs-secondary-bg); }
.path-node.finish {
    background: linear-gradient(135deg, #f5a623, #ff7e00);
    cursor: default;
}
.path-node.finish .path-node-inner { background: transparent; font-size: 1.9rem; }
.path-node.finish:not(.done) { filter: grayscale(.7); opacity: .8; }
.path-node-label {
    text-align: center;
    margin-top: .4rem;
    max-width: 220px;
}

/* ===== Daily chest ===== */
.chest-shake { animation: chest-shake 2.4s ease-in-out infinite; }
@keyframes chest-shake {
    0%, 86%, 100% { transform: rotate(0); }
    88% { transform: rotate(-10deg); }
    90% { transform: rotate(9deg); }
    92% { transform: rotate(-7deg); }
    94% { transform: rotate(5deg); }
    96% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .chest-shake { animation: none; } }

/* ===== League tier strip ===== */
.league-strip {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.league-tier {
    text-align: center;
    padding: .55rem .95rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    min-width: 86px;
    opacity: .55;
}
.league-tier.current {
    opacity: 1;
    border: 2px solid var(--ejtaaz-warning);
    background: rgba(255, 193, 7, .08);
    box-shadow: 0 3px 12px rgba(255, 193, 7, .2);
}
[data-bs-theme="dark"] .league-tier.current { background: rgba(255, 193, 7, .14); }
.league-tier.locked { filter: grayscale(.65); }
.league-icon { font-size: 1.5rem; line-height: 1.2; }
.league-name { font-size: .8rem; font-weight: 700; }
.league-you { font-size: .65rem; color: #7a5c00; font-weight: 800; }  /* darkened gold for WCAG AA on white */
[data-bs-theme="dark"] .league-you { color: var(--ejtaaz-warning); }

/* ===== Learning path: sticky unit banner (Duolingo-style) =====
   Sits flush against the top edge while the trainee scrolls the trail,
   showing where they are. The "المواد" button is separated by a thin
   divider line, like Duolingo's lesson-list button. */
.path-sticky {
    position: sticky;
    top: 56px;           /* sit just below the now-sticky navbar */
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    background: linear-gradient(135deg, var(--ejtaaz-primary) 0%, var(--ejtaaz-primary-dark) 100%);
    color: #fff;
    border-radius: 14px;
    padding: .6rem 1rem;
    box-shadow: 0 3px 10px rgba(16, 24, 40, .18);
    margin-bottom: .75rem;
}
.path-sticky .ps-label { font-size: .72rem; opacity: .85; font-weight: 700; }
.path-sticky .ps-title {
    font-weight: 800;
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.path-sticky .ps-btn {
    background: transparent;
    color: #fff;
    box-shadow: none;
    border: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, .35);
    border-radius: 0;
    padding-inline-start: .9rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.path-sticky .ps-btn:hover { color: #ffd34d; }

/* ===== Learning path: section header banners (Duolingo-style) ===== */
.path-section {
    margin: 1.4rem 0 .4rem;
    padding: .8rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ejtaaz-purple) 0%, #5a32a3 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 14px rgba(111, 66, 193, .25);
    position: relative;
    z-index: 1;
}
.path-section.current { background: linear-gradient(135deg, var(--ejtaaz-primary) 0%, var(--ejtaaz-primary-dark) 100%); box-shadow: 0 4px 14px rgba(13,110,253,.3); }
.path-section.done    { background: linear-gradient(135deg, var(--ejtaaz-lesson-600) 0%, #2f7a00 100%); box-shadow: 0 4px 14px rgba(70,163,2,.25); }
.path-section .psec-num { font-size: .72rem; opacity: .85; font-weight: 700; letter-spacing: .5px; }
.path-section .psec-title { font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.path-section .psec-prog {
    display: inline-block; margin-top: .25rem;
    background: rgba(255,255,255,.2); border-radius: 999px;
    padding: .05rem .7rem; font-size: .76rem; font-weight: 700;
}

/* Reading stop — a slim chip under the section header. */
.path-read { text-align: center; margin: .1rem 0 -.2rem; position: relative; z-index: 1; }
.path-read a {
    display: inline-block;
    font-size: .82rem; font-weight: 700;
    color: var(--bs-secondary-color);
    text-decoration: none;
    background: var(--bs-secondary-bg);
    border-radius: 999px;
    padding: .25rem .9rem;
}
.path-read a:hover { color: var(--bs-primary); }

/* ===== Learning path: unit dividers between trail segments ===== */
.path-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: .2rem 0 -.4rem;
    position: relative;
    z-index: 1;
}
.path-divider::before,
.path-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-border-color);
}
.path-divider a, .path-divider span {
    font-size: .82rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-align: center;
    max-width: 70%;
}
.path-divider a:hover { color: var(--bs-primary); }

/* ===== Learning path: "jump to my unit" floating button ===== */
.path-jump-btn {
    position: fixed;
    bottom: 22px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 1050;
    border: 0;
    border-radius: 999px;
    padding: .45rem 1.15rem;
    font-weight: 800;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ejtaaz-primary), var(--ejtaaz-primary-dark));
    box-shadow: 0 4px 0 #073c8c, 0 8px 20px rgba(13, 110, 253, .4);
}
.path-jump-btn:active {
    transform: translateX(50%) translateY(3px);
    box-shadow: 0 1px 0 #073c8c;
}
@media (max-width: 991px) {
    body.has-tabbar .path-jump-btn { bottom: 88px; }
}

/* ===== Daily quests (Duolingo-style rows with chests) ===== */
.quest-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .55rem;
}
.quest-ic {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--bs-secondary-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.quest-mid { flex: 1; min-width: 0; }
.quest-bar {
    position: relative;
    height: 16px;
    border-radius: 99px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
    margin-top: .15rem;
}
.quest-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ejtaaz-warning), var(--ejtaaz-orange));
    transition: width .5s ease;
}
.quest-count {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem;
    font-weight: 800;
    color: var(--bs-body-color);
}
.quest-chest { flex-shrink: 0; filter: grayscale(1); opacity: .55; }
.quest-chest.done { filter: none; opacity: 1; }
.quest-reward-chip {
    background: rgba(255, 193, 7, .15);
    color: #7a5c00;  /* darkened gold for WCAG AA on the light chip */
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
[data-bs-theme="dark"] .quest-reward-chip { color: var(--ejtaaz-warning); }

/* ===== Profile hero (إحصائياتي → الملف الشخصي) ===== */
.profile-hero {
    background: linear-gradient(135deg, var(--ejtaaz-primary) 0%, #0a3d8f 100%);
    color: #fff;
    border-radius: 20px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .25);
}
.profile-hero .ph-name { font-weight: 800; font-size: 1.25rem; line-height: 1.3; }
.profile-hero .ph-sub { font-size: .78rem; opacity: .85; }
.profile-hero .ph-chip {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.profile-hero .btn {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 0;
    box-shadow: none;
    font-size: .8rem;
}
.profile-hero .btn:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* ===== Overview stat cards (نظرة عامة) ===== */
.ov-card {
    border: 2px solid var(--bs-border-color);
    border-radius: 14px;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    background: var(--bs-body-bg);
}
.ov-card .ov-ic { font-size: 1.45rem; flex-shrink: 0; }
.ov-card .ov-num { font-weight: 800; font-size: 1.12rem; line-height: 1.25; }
.ov-card .ov-label { font-size: .72rem; color: var(--bs-secondary-color); }

/* ===== Achievement shields (إنجازات بمستويات) ===== */
.ach-tile {
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease;
}
.ach-tile:hover { transform: translateY(-2px); }
.ach-head {
    position: relative;
    padding: .9rem 0 1.1rem;
    color: #fff;
    font-size: 2rem;
    background: var(--ach-c, #6c757d);
}
.ach-head::after {
    /* soft radial sheen so flat colors read as "badge art" */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px circle at 50% 0%, rgba(255, 255, 255, .28), transparent 70%);
    pointer-events: none;
}
.ach-lv {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: rgba(0, 0, 0, .35);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    padding: .05rem .55rem;
    white-space: nowrap;
}
.ach-body { padding: .6rem .5rem .75rem; display: flex; flex-direction: column; flex: 1; }
.ach-title { font-weight: 800; font-size: .88rem; }
.ach-desc { font-size: .68rem; color: var(--bs-secondary-color); }
.ach-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
    margin-top: auto;
}
.ach-progress > div { height: 100%; border-radius: 99px; background: var(--ach-c, #6c757d); }
.ach-count { font-size: .66rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.ach-tile.locked .ach-head { filter: grayscale(1); opacity: .55; }
.ach-tile.locked .ach-title { color: var(--bs-secondary-color); }
.ach-tile.maxed { border-color: rgba(255, 193, 7, .65); box-shadow: 0 3px 12px rgba(255, 193, 7, .2); }

/* ===== Word-count progress (composition lesson) ===== */
.word-progress {
    height: 8px;
    border-radius: 99px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}
.word-progress .wp-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--ejtaaz-orange);                 /* below the target → amber */
    transition: width .3s ease, background .3s ease;
}
.word-progress .wp-fill.ok   { background: var(--ejtaaz-lesson); }   /* within range → green */
.word-progress .wp-fill.over { background: var(--ejtaaz-danger); }   /* past the max → red */

/* ===== Lesson prompt block (writing exercises: essay / composition) ===== */
.lesson-prompt {
    background: var(--bs-secondary-bg);
    border-inline-start: 4px solid var(--bs-info);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.lesson-prompt.lp-success { border-inline-start-color: var(--bs-success); }

/* Perfect-lesson badge inside the summary band. */
.perfect-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-weight: 800;
    font-size: .95rem;
}

/* ===== End-of-lesson summary screen (Duolingo-style) ===== */
.lesson-summary {
    /* Darker success green: white text on the old var(--ejtaaz-lesson) was ~2.1:1 (fails
       WCAG AA even for large text). This pair keeps white ≥4.5:1. */
    background: linear-gradient(135deg, var(--ejtaaz-lesson-700) 0%, #1f6200 100%);
    color: #fff;
    border-radius: 22px;
    padding: 1.6rem 1.25rem;
    text-align: center;
    box-shadow: 0 10px 28px rgba(70, 163, 2, .3);
    max-width: 600px;        /* focused hero — don't stretch full width */
    margin-inline: auto;
}
.lesson-summary.ls-mid {
    background: linear-gradient(135deg, var(--ejtaaz-warning), var(--ejtaaz-orange));
    box-shadow: 0 10px 28px rgba(253, 126, 20, .3);
}
.lesson-summary.ls-low {
    background: linear-gradient(135deg, #5b7bb0, #3a5a8a);
    box-shadow: 0 10px 28px rgba(58, 90, 138, .3);
}
.lesson-summary .ls-emoji { font-size: 3rem; line-height: 1; }
.lesson-summary h3 { color: #fff; }
.lesson-summary .ls-sub { opacity: 1; font-size: .85rem; }  /* full opacity: .9 white eroded contrast below AA */
.ls-tiles .ls-tile {
    background: rgba(255, 255, 255, .17);
    border-radius: 14px;
    padding: .6rem .35rem;
    height: 100%;
}
.ls-tiles .ls-num { font-weight: 800; font-size: 1.2rem; line-height: 1.15; }
.ls-tiles .ls-label { font-size: .68rem; opacity: .92; }
.lesson-summary .btn-light { color: #2a6f00; font-weight: 800; }
.lesson-summary.ls-mid .btn-light { color: #9a4d00; }
.lesson-summary.ls-low .btn-light { color: #2a4a78; }
.lesson-summary .btn-ghost {
    background: rgba(255, 255, 255, .18); color: #fff; border: 0; font-weight: 700;
}
.lesson-summary .btn-ghost:hover { background: rgba(255, 255, 255, .3); color: #fff; }

/* ===== Lesson flow (Duolingo-style one-question-at-a-time) ===== */
/* During a lesson the site chrome (top nav, points strip, bottom tabs,
   assistant FAB) hides for full focus — the lesson has its own header
   (progress + timer + exit ×). */
body.in-lesson .navbar,
body.in-lesson .stat-strip,
body.in-lesson .tabbar,
body.in-lesson .fab-assistant { display: none !important; }
body.in-lesson.has-tabbar { padding-bottom: 0; }

/* Canonical lesson-progress base: the trainee fill (.lesson-progress > div) and
   the public taste-exam fill (.lesson-progress-bar) both build on this. Track is
   theme-aware via --bs-secondary-bg, so no separate dark twin is needed. */
.lesson-progress {
    height: 14px;
    border-radius: 99px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}
.lesson-progress > div {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ejtaaz-lesson), var(--ejtaaz-lesson-600));
    transition: width .35s ease;
}
/* Lesson choices behave like Duolingo cards: a touch of depth, lift on hover,
   a little pop when selected. (Scoped to .lesson-options so the static review
   pages that reuse .option-row are unaffected.) */
.lesson-options .option-row {
    font-size: 1.05rem;
    padding: 14px 16px;
    box-shadow: 0 2px 0 var(--bs-border-color);
}
.lesson-options .option-row:hover { transform: translateY(-2px); }
.lesson-options .option-row.selected {
    box-shadow: 0 2px 0 var(--bs-primary);
    animation: opt-pop .2s ease;
}
@keyframes opt-pop { 50% { transform: scale(1.03); } }
.lesson-options.locked .option-row { pointer-events: none; }
.lesson-options.locked .option-row:hover { transform: none; }
/* The "how confident?" row is irrelevant once the answer is checked. */
.lesson-options.locked ~ .conf-row { display: none !important; }

/* The big bottom feedback + action bar. */
.lesson-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1100;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
    transition: background .2s ease;
}
.lesson-bar.correct { background: #d7ffb8; border-top-color: var(--ejtaaz-lesson); }
.lesson-bar.wrong   { background: #ffdfe0; border-top-color: var(--ejtaaz-wrong); }
[data-bs-theme="dark"] .lesson-bar.correct { background: #14331f; border-top-color: var(--ejtaaz-lesson-600); }
[data-bs-theme="dark"] .lesson-bar.wrong   { background: #3b1a1f; border-top-color: var(--ejtaaz-wrong); }
.lesson-bar .lb-verdict { font-weight: 800; font-size: 1.05rem; }
.lesson-bar.correct .lb-verdict { color: #3a7d00; }
.lesson-bar.wrong   .lb-verdict { color: #c0252b; }
[data-bs-theme="dark"] .lesson-bar.correct .lb-verdict { color: #9be870; }
[data-bs-theme="dark"] .lesson-bar.wrong   .lb-verdict { color: #ff9ca0; }
.lesson-bar .lb-detail { font-size: .9rem; overflow-wrap: anywhere; }
.lesson-bar .btn-lesson {
    border: 0; border-radius: 14px; font-weight: 800;
    padding: .7rem 1.4rem; color: #fff;
    background: var(--ejtaaz-lesson); box-shadow: 0 4px 0 var(--ejtaaz-lesson-600);
    white-space: nowrap;
}
.lesson-bar.wrong .btn-lesson { background: var(--ejtaaz-wrong); box-shadow: 0 4px 0 #d33; }
.btn-lesson:disabled { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); box-shadow: 0 4px 0 var(--bs-border-color); }
.btn-lesson:not(:disabled):active { transform: translateY(4px); box-shadow: none; }
/* Lesson fills the viewport: header stays at the top, the question is centered
   in the space above the bottom action bar (which is fixed to the viewport).
   Removes the mid-page float + dead gap seen on short questions. */
body.in-lesson main { display: flex; flex-direction: column; }
body.in-lesson main > .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 132px;          /* clear the fixed action bar */
}
body.in-lesson main > .container > form { margin-block: auto; }
/* Bottom-sheet feel: the bar lifts and the verdict slides up when it appears. */
.lesson-bar.correct, .lesson-bar.wrong { animation: lb-rise .3s ease; }
@keyframes lb-rise { from { transform: translateY(10px); } to { transform: translateY(0); } }
.lesson-bar #lbFeedback { animation: lb-feedback-up .3s ease both; }
@keyframes lb-feedback-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .lesson-options .option-row:hover { transform: none; }
    .lesson-options .option-row.selected,
    .lesson-bar.correct, .lesson-bar.wrong,
    .lesson-bar #lbFeedback { animation: none; }
}

/* Consecutive-correct streak toast. */
.combo-toast {
    position: fixed; top: 18%; inset-inline: 0;
    text-align: center; z-index: 1200; pointer-events: none;
}
.combo-toast span {
    display: inline-block;
    background: linear-gradient(135deg, var(--ejtaaz-warning), var(--ejtaaz-orange));
    color: #1b1b1b; font-weight: 800;
    padding: .5rem 1.3rem; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(253,126,20,.4);
    animation: combo-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes combo-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .combo-toast span { animation: none; } }

/* ===== Community activity feed (الموجز الاجتماعي) ===== */
.feed-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    margin-bottom: .7rem;
}
.feed-item.feed-me {
    border-color: rgba(13, 110, 253, .4);
    background: rgba(13, 110, 253, .04);
}
[data-bs-theme="dark"] .feed-item.feed-me { background: rgba(13, 110, 253, .12); }
.feed-body { flex: 1; min-width: 0; }
.feed-line { line-height: 1.6; }
.feed-line .feed-name { font-weight: 800; }
.feed-when { font-size: .72rem; color: var(--bs-secondary-color); }
.feed-pct {
    display: inline-block;
    font-weight: 800;
    color: var(--ejtaaz-success);
    background: rgba(25, 135, 84, .12);
    border-radius: 999px;
    padding: 0 .5rem;
}
.feed-like-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--bs-secondary-bg);
    border: 0;
    border-radius: 999px;
    padding: .3rem .7rem;
    font-weight: 700;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    transition: transform .12s ease, background .12s ease, color .12s ease;
}
.feed-like-btn:hover { transform: translateY(-1px); }
.feed-like-btn.liked { color: #e0245e; background: rgba(224, 36, 94, .12); }
.feed-like-btn:disabled { opacity: .6; cursor: default; }
.feed-like-btn .like-pop { animation: like-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes like-pop { from { transform: scale(.5); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .feed-like-btn .like-pop { animation: none; } }

/* ===== Inset panels: highlighted sub-blocks inside result cards
   (model answer, expanded explanation). Replaces card-in-card framing
   with a light start-accented panel — one visual language for results. */
.inset-panel {
    border-inline-start: 3px solid var(--bs-info);
    background: rgba(13, 202, 240, .07);
    border-radius: 10px;
    padding: .65rem .85rem;
    margin-top: .75rem;
}
.inset-panel.ip-success {
    border-inline-start-color: var(--bs-success);
    background: rgba(25, 135, 84, .07);
}
.inset-panel .ip-head {
    font-weight: 700;
    color: var(--bs-info);
    margin-bottom: .3rem;
}
.inset-panel.ip-success .ip-head { color: var(--bs-success); }
[data-bs-theme="dark"] .inset-panel { background: rgba(13, 202, 240, .12); }
[data-bs-theme="dark"] .inset-panel.ip-success { background: rgba(25, 135, 84, .14); }

/* ===== Print: results & laws come out clean on paper ===== */
@media print {
    nav.navbar, footer, .btn, button,
    .fab-assistant, .assistant-drawer, .assistant-backdrop,
    .theme-toggle, .theme-toggle-floating, .scroll-top-btn,
    .q-navigator, .q-shortcuts-hint, .flag-btn,
    .ask-assistant-btn, .alert-dismissible .btn-close { display: none !important; }
    main { padding: 0 !important; }
    body { background: #fff !important; }
    .card {
        box-shadow: none !important;
        border: 1px solid #bbb !important;
        break-inside: avoid;
    }
    a { text-decoration: none !important; color: inherit !important; }
}

/* ---------- National Report ("أنت مقابل المتوسط الوطني") ---------- */
.nat-hero-grid {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.nat-ring {
    width: 132px; height: 132px;
    border-radius: 50%;
    display: grid; place-items: center;
    /* readiness sweep on a translucent track — sits on the gradient hero */
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.28) 0);
    flex-shrink: 0;
}
.nat-ring-inner {
    width: 104px; height: 104px;
    border-radius: 50%;
    background: rgba(0,0,0,.20);
    display: grid; place-items: center;
    color: #fff; text-align: center;
}
.nat-ring-num { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.nat-ring-cap { font-size: .8rem; opacity: .85; margin-top: 2px; }
.nat-pct-card {
    background: rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    color: #fff;
    max-width: 250px;
}
.nat-pct-big { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.nat-pct-cap { font-size: .92rem; opacity: .94; margin-top: .4rem; }

.nat-cmp { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.nat-cmp-lbl { width: 48px; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); flex-shrink: 0; }
.nat-cmp-val { width: 46px; text-align: left; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.nat-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(128,128,128,.22); overflow: hidden; }
.nat-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.nat-fill.nat { background: #9aa0a6; }
.nat-fill.you { background: var(--ejtaaz-primary); }
.nat-fill.you.above { background: var(--ejtaaz-success); }
.nat-fill.you.below { background: var(--ejtaaz-danger); }
.nat-fill.you.par { background: var(--ejtaaz-orange); }
.nat-delta { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.nat-delta.nat-above { color: var(--ejtaaz-success); }
.nat-delta.nat-below { color: var(--ejtaaz-danger); }
.nat-delta.nat-par { color: #6c757d; font-weight: 600; }

/* "Wrong only" filter on the mixed-exam review: hide correct cards on toggle. */
#mcqReviewList.wrong-only .mcq-correct { display: none; }

/* Full-width segmented controls: equal-width buttons (Bootstrap btn-group
   sizes to content by default, so a 4-option selector like the assignment
   "نوع الاختبار" can look uneven). Makes every w-100 group's buttons even. */
.btn-group.w-100 > .btn { flex: 1 1 0; }

/* Short form pages (login/register/join/create…) center their card vertically
   on tablet/desktop so it doesn't float at the top of a tall empty screen.
   Phones keep top-alignment (better with the on-screen keyboard). */
@media (min-width: 768px) {
    body.form-page main {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ---------- Cold-start splash (Duolingo-style brand intro) ---------- */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--ejtaaz-primary) 0%, #063a8a 100%);
    /* a beat of brand, then whisk away to reveal the app */
    animation: splash-out .55s ease .95s forwards;
}
/* Subsequent navigations this session: never show it (no flash). */
html.splash-done .splash-screen { display: none; }
.splash-inner {
    text-align: center;
    animation: splash-pop .6s cubic-bezier(.2, .8, .3, 1.5) both;
}
.splash-logo {
    width: 104px;
    height: 104px;
    border-radius: 26px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .32);
}
.splash-name {
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    margin-top: .85rem;
    letter-spacing: .5px;
}
@keyframes splash-pop {
    0%   { transform: scale(.4) translateY(8px); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes splash-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); visibility: hidden; }
}
/* Respect reduced-motion: a quiet fade, no bounce/zoom. */
@media (prefers-reduced-motion: reduce) {
    .splash-screen { animation: splash-fade .35s ease .6s forwards; }
    .splash-inner { animation: none; }
    @keyframes splash-fade { to { opacity: 0; visibility: hidden; } }
}

/* ---------- Toast notifications (animated flash messages) ---------- */
.toast-stack {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(92vw, 460px);
    pointer-events: none;          /* clicks pass through the gaps */
}

/* Skip-to-content link: hidden until keyboard focus (Bootstrap
   .visually-hidden-focusable handles the reveal), then a branded pill at the
   top-start corner. Targets <main id="main" tabindex="-1">. */
.skip-link {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2000;                 /* above navbar + fixed chrome */
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--ejtaaz-primary);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.skip-link:focus, .skip-link:focus-visible { color: #fff; outline: 3px solid #fff; outline-offset: 2px; }
/* The skip target is programmatically focused; suppress the box outline that
   would otherwise frame the entire <main>. */
main#main:focus { outline: none; }

.ejtaaz-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 14px;
    padding: .8rem 1rem;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
    border-inline-start: 5px solid var(--bs-secondary);
    animation: toast-in .35s cubic-bezier(.2, .8, .3, 1.3) both;
}
.ejtaaz-toast.toast-hide { animation: toast-out .3s ease forwards; }
.toast-ic { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.toast-msg { flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.5; }
.toast-x {
    border: 0; background: transparent; padding: 0 .15rem;
    font-size: 1.5rem; line-height: 1; color: inherit; opacity: .45; cursor: pointer;
    flex-shrink: 0;
}
.toast-x:hover { opacity: 1; }
.toast-success { border-inline-start-color: var(--ejtaaz-success); } .toast-success .toast-ic { color: var(--ejtaaz-success); }
.toast-danger  { border-inline-start-color: var(--ejtaaz-danger); } .toast-danger  .toast-ic { color: var(--ejtaaz-danger); }
.toast-warning { border-inline-start-color: var(--ejtaaz-orange); } .toast-warning .toast-ic { color: var(--ejtaaz-orange); }
.toast-info    { border-inline-start-color: var(--ejtaaz-primary); } .toast-info    .toast-ic { color: var(--ejtaaz-primary); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-18px) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
    .ejtaaz-toast { animation: none; }
    .ejtaaz-toast.toast-hide { animation: none; opacity: 0; }
}

/* Review callouts: long "hard question / knowledge-illusion" notes read as a
   tinted bordered box, not an awkward stretched pill badge. */
.review-note {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    border-radius: 10px;
    padding: .55rem .8rem;
    font-size: .9rem;
    line-height: 1.6;
    border-inline-start: 4px solid var(--bs-secondary);
    background: var(--bs-secondary-bg);
}
.review-note .rn-ic { flex-shrink: 0; font-size: 1.05rem; line-height: 1.6; }
.review-note.note-hard { border-inline-start-color: var(--ejtaaz-danger); background: rgba(220, 53, 69, .08); }
.review-note.note-illusion { border-inline-start-color: var(--ejtaaz-orange); background: rgba(253, 126, 20, .10); }

/* Content width: Bootstrap's stepped fixed-width container left wide empty
   side-margins on tablets/iPad (only ~81% of a 1180px viewport was used, with
   110px of dead space each side). From sm up, use up to 95% of the viewport
   (capped at 1320px for readable line length); phones (<sm) stay full-width.
   Smooth, far less wasted margin, never narrower than before on tablets.
   Lesson/auth/path pages keep their own tighter inner max-widths. */
@media (min-width: 576px) {
    main > .container { max-width: min(1320px, 95vw); }
}

/* ════════════════════════════════════════════════════════════════════
   Design-review fixes (2026-06) — contrast (WCAG AA) + responsive polish.
   Trainee UI only. See commit message for the audit rationale.
   ════════════════════════════════════════════════════════════════════ */

/* Primary top navbar: Bootstrap's default link color is rgba(255,255,255,.55)
   = 2.36:1 on var(--ejtaaz-primary) (fails WCAG AA). Use full white so the primary nav is
   legible; brand/active were already white. */
.navbar.bg-primary {
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}

/* Leaderboard tier strip: 4 medals (86px each + gaps) overflowed a 390px
   phone by ~2px, wrapping the 4th onto its own row (broken-looking ladder).
   Below sm, let the four share one row at equal width. Desktop unchanged. */
@media (max-width: 575.98px) {
    .league-strip { gap: .4rem; flex-wrap: nowrap; }
    .league-tier  { flex: 1 1 0; min-width: 0; }
}

/* Amber summary banner (medium-score lesson + national-report "preparing"
   hero): white text on var(--ejtaaz-warning) was ~1.6:1 (illegible). Dark warm text on
   bright amber is the accessible, on-brand choice (same as btn-warning). */
.lesson-summary.ls-mid { color: #5a3a00; }
.lesson-summary.ls-mid h3 { color: #5a3a00; }
.lesson-summary.ls-mid .ls-sub { opacity: .92; }
.lesson-summary.ls-mid .btn-ghost { color: #5a3a00; }

/* League hero band + sale banner: white text sits on light metal/orange
   gradients (silver ~2.0:1, gold ~2.0:1, sale-orange ~2.6:1). A soft dark
   shadow lifts real-world legibility on the light stops without changing the
   medal/brand colors. */
.league-hero, .sale-banner { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* Top navbar overflow (iPad-landscape / wide tablets): the bar expands at
   ≥lg, and for admins it holds ~20 links whose single row (~1870px) far
   exceeds an iPad-landscape viewport — overflowing the page horizontally and
   leaving a stray scroll gap on the side. Let the nav wrap to extra rows
   instead of overflowing; a trainee's short nav still fits on one row and
   only wraps if it genuinely can't. */
.navbar.bg-primary .navbar-collapse { flex-wrap: wrap; }
.navbar.bg-primary .navbar-nav { flex-wrap: wrap; }

/* ===== Public taste exam — lesson mode (one question at a time) ===== */
.lesson-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bs-body-bg);
    padding: .75rem 0 .5rem;
    margin-bottom: .5rem;
}
.lesson-count {
    font-weight: 700;
    font-size: .9rem;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
}
/* Public taste-exam progress fill. Reuses the single `.lesson-progress` base
   from the lesson section above — there used to be a SECOND `.lesson-progress`
   base here (different height/track + its own dark twin) that collided, plus a
   second lesson-green gradient. Consolidated: one base, one lesson green. */
.lesson-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ejtaaz-lesson), var(--ejtaaz-lesson-600));
    border-radius: 999px;
    transition: width .35s ease;
}
/* Lock a checked card's options visually without `disabled` (which would drop
   the answer from the form). The radio stays checked + submittable. */
.exam-q-card.checked .option-row { pointer-events: none; }
.option-row.opt-correct {
    background: #d7f5c2;
    border-color: var(--ejtaaz-lesson-700) !important;
    box-shadow: inset 0 0 0 2px var(--ejtaaz-lesson-700);
}
.option-row.opt-wrong {
    background: #fde0e0;
    border-color: var(--ejtaaz-wrong-dark) !important;
    box-shadow: inset 0 0 0 2px var(--ejtaaz-wrong-dark);
}
[data-bs-theme="dark"] .option-row.opt-correct { background: rgba(46, 128, 0, .25); }
[data-bs-theme="dark"] .option-row.opt-wrong { background: rgba(176, 42, 55, .25); }
.lesson-foot {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem 0 1rem;
    margin-top: 1rem;
}
.lesson-verdict {
    text-align: center;
    font-weight: 800;
    min-height: 1.5rem;
    margin-bottom: .5rem;
}
.lesson-verdict.is-correct { color: var(--ejtaaz-lesson-700); }
.lesson-verdict.is-wrong { color: var(--ejtaaz-wrong-dark); }
[data-bs-theme="dark"] .lesson-verdict.is-correct { color: #7bd44a; }
[data-bs-theme="dark"] .lesson-verdict.is-wrong { color: #ff8a93; }

/* --- Celebration Screens: full-screen milestone ceremony overlay --- */
.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;                 /* above navbar, toasts (1090), drawer, FABs */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 20, 25, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.celebration-overlay[hidden] { display: none; }   /* author rule beats .overlay's display:flex */
.celebration-card {
    background: var(--bs-body-bg, #fff);
    border-radius: 22px;
    padding: 2rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.celebration-icon {
    width: 84px; height: 84px;
    margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ejtaaz-warning) 0%, var(--ejtaaz-orange) 100%);
    color: #fff;
    font-size: 2.4rem;
    box-shadow: 0 8px 20px rgba(253, 126, 20, .4);
}
.celebration-title { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; }
.celebration-body { color: var(--bs-secondary-color); margin-bottom: 1.5rem; }
.celebration-cta { width: 100%; }      /* reuses .btn-lesson (Duo-green pill) */
.celebration-skip {
    display: block; margin: .75rem auto 0;
    background: none; border: 0; color: var(--bs-secondary-color);
    font-size: .9rem; text-decoration: underline;
}
[data-bs-theme="dark"] .celebration-card { background: #1a1f26; }