/* ============================================================
   student_exercise.css
   Premium chrome shared by Teil 2/3 + Sprachteil 1/2
   (practice and exam). Augments teil1.css; reuses Bootstrap tokens.

   No logic, no scoring, no POST contracts depend on these styles.
   Only visual polish, focus rings, hover affordance, scoped helpers.
   ============================================================ */

/* ── Sticky header offset tokens ────────────────────────────
   Single source of truth so reading panels, word banks and
   anchor jumps never collide with the Bootstrap sticky navbar. */
:root {
    --se-header-offset: 4.75rem;   /* navbar height + breathing room  */
    --se-sticky-top:    calc(var(--se-header-offset) + .5rem);
}
html { scroll-padding-top: var(--se-header-offset); }

/* Student content column: prevent flex/grid blowout from long words/inline content. */
.student-content { min-width: 0; }
[id^="stmt-block-"],
[id^="q-block-"],
[id^="text-"],
[id^="blank-"] { scroll-margin-top: var(--se-header-offset); }

/* Reusable sticky panel — replaces inline style="top:5rem". */
.se-sticky-panel {
    position: sticky;
    top: var(--se-sticky-top);
    z-index: 2;
}

/* Viewport-aware reading body — only scrolls inside when the
   text would otherwise overflow the viewport. Short texts get
   no inner scrollbar at all (premium feel). */
.se-text-panel-body--reading {
    max-height: calc(100vh - var(--se-header-offset) - 4rem);
    overflow-y: auto;
}

/* ── Teil 3 per-text card stack (premium layout) ──────────── */
.se-text-stack {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
@media (min-width: 992px) {
    .se-text-stack--scroll {
        max-height: calc(100vh - var(--se-header-offset) - 3rem);
        overflow-y: auto;
        padding-right: .25rem;   /* room for scrollbar */
    }
}
.se-text-card {
    background: #fff;
    border: 1px solid var(--t1-border-soft, #e6e8ee);
    border-radius: .85rem;
    padding: .9rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.se-text-card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
    border-color: var(--t1-border, #d6dae3);
}
.se-text-card.is-correct { border-color: var(--t1-success-border, #86efac); box-shadow: 0 0 0 1px var(--t1-success-border, #86efac); }
.se-text-card.is-wrong   { border-color: var(--t1-danger-border,  #fca5a5); box-shadow: 0 0 0 1px var(--t1-danger-border,  #fca5a5); }
.se-text-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.se-text-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .15rem .55rem;
    font-weight: 700;
    font-size: .8rem;
    color: var(--t1-text, #1f2937);
    background: var(--t1-bg-tint, #f1f5f9);
    border-radius: .4rem;
    letter-spacing: .02em;
}
.se-text-stack-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--t1-text, #1f2937);
}
.se-text-stack-heading .se-text-stack-count {
    margin-inline-start: auto;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--t1-bg-tint, #f1f5f9);
    color: var(--t1-muted, #64748b);
}

/* Word bank body cap — keep chips reachable on short viewports. */
.se-wordbank-body--cap {
    max-height: calc(100vh - var(--se-header-offset) - 6rem);
    overflow-y: auto;
}

/* ── Mode pill alias (so exam markup can read as "exam-mode-pill") ── */
.exam-mode-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    border-radius: .5rem;
    border: 1px solid transparent;
}
.exam-mode-pill--basic {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border-color: var(--t1-success-soft);
}
.exam-mode-pill--modified {
    background: var(--t1-accent-soft);
    color: var(--t1-text);
    border-color: #d6e4ff;
}

/* ── Answered counter chip (quiet → success when complete) ── */
.se-answered-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--t1-text-muted);
    background: var(--t1-bg-tint);
    border: 1px solid var(--t1-bg-tint);
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
    white-space: nowrap;
}
.se-answered-count.is-complete {
    color: var(--t1-success-text);
    background: var(--t1-success-soft);
    border-color: var(--t1-success-soft);
}
.se-answered-count i {
    font-size: 1rem;
    line-height: 1;
}

/* ── Hairline divider in the unified controls bar ── */
.se-controls-bar {
    border-top: 1px solid var(--t1-bg-tint);
    padding-top: 1rem;
    margin-top: .25rem;
}
.se-divider {
    width: 1px;
    align-self: stretch;
    background: #dee2e6;
    margin: .15rem .25rem;
}

/* ── Polished MCQ option wrapper (T2 / SP1 / exam steps 2,4) ── */
.se-mcq-option {
    transition: border-color .15s ease, background .15s ease,
                box-shadow .15s ease, transform .12s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.se-mcq-option:hover {
    border-color: var(--t1-accent-soft);
    background: #f8fbff;
}
.se-mcq-option:focus-within {
    border-color: var(--t1-accent);
    background: #f0f5ff;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
.se-mcq-option.is-checked {
    border-color: var(--t1-accent);
    background: #e7f0ff;
}
/* Press feedback — confirms tap on touch devices where :hover is unreliable.
   Brief background flash + subtle scale-down. Works for mouse and touch. */
.se-mcq-option:active {
    background: #dbe7ff;
    border-color: #6ea8fe;
    transform: scale(.985);
    transition-duration: .05s;
}
.se-mcq-option.is-checked:active {
    background: #cfddff;
}

/* ── Polished select for Teil 3 (chip-row UX) ── */
.se-select {
    transition: border-color .15s ease, box-shadow .15s ease;
}
.se-select:focus {
    border-color: var(--t1-accent);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

/* Teil 3 chip-row — visible UI over a hidden native <select> */
.se-chip-group {
    display: block;
}
.se-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.se-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .8rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--t1-text);
    background: #fff;
    border: 1.5px solid var(--t1-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Ensure every tap inside a chip resolves to the button itself, so the
   entire chip surface (padding included) feels identical whether the
   user taps the label text or the chip padding. The button's native
   click handler still fires once via bubbling — no double-fire risk. */
.se-chip-label {
    pointer-events: none;
}
.se-chip:hover {
    border-color: var(--t1-accent-soft);
    background: #f0f5ff;
    color: var(--t1-accent);
}
.se-chip:focus-visible {
    outline: 0;
    border-color: var(--t1-accent);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2);
}
.se-chip.is-selected {
    border-color: var(--t1-accent);
    background: var(--t1-accent);
    color: #fff;
    box-shadow: 0 1px 3px rgba(13, 110, 253, .25);
}
.se-chip.is-selected:hover {
    background: var(--t1-accent-dk);
    border-color: var(--t1-accent-dk);
    color: #fff;
}
/* Press feedback — mirrors .se-mcq-option so taps feel responsive on touch
   devices where :hover is unreliable. Brief background/border flash plus the
   existing slight sink. Selected chips get a darker-blue flash since their
   resting state already has a solid blue fill. */
.se-chip:active {
    background: #dbe7ff;
    border-color: #6ea8fe;
    color: var(--t1-accent);
    transform: translateY(1px);
    transition-duration: .05s;
}
.se-chip.is-selected:active {
    background: #0a58ca;
    border-color: #0a58ca;
    color: #fff;
}

/* ── Sprachteil 2 cloze blanks (extracted from inline) ── */
.blank-slot {
    display: inline-flex;
    align-items: center;
    min-width: 110px;
    padding: .2rem .6rem;
    border-radius: .4rem;
    border: 2px dashed var(--t1-border);
    background: var(--t1-bg-canvas);
    cursor: pointer;
    font-size: .95rem;
    vertical-align: middle;
    transition: border-color .15s ease, background .15s ease,
                box-shadow .15s ease, transform .12s ease;
    line-height: 1.4;
    font-family: inherit;
    color: var(--t1-text-muted);
    margin: 1px 2px;
    -webkit-tap-highlight-color: transparent;
}
.blank-slot:hover {
    border-color: #6ea8fe;
    background: #f0f5ff;
}
.blank-slot:focus-visible {
    outline: 0;
    border-color: #fd7e14;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, .25);
}
.blank-slot.filled {
    border-style: solid;
    border-color: var(--t1-accent);
    background: #e7f0ff;
    color: var(--t1-accent);
    font-weight: 600;
}
.blank-slot.selected,
.blank-slot.filled.selected {
    border-color: #fd7e14;
    background: #fff3e0;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, .25);
    color: #fd7e14;
}
/* Press feedback — mirrors .se-chip / .se-mcq-option so taps feel responsive
   on touch devices where :hover is unreliable. Empty slots get a brief
   background/border flash; filled slots additionally sink slightly to match
   the chips. Selected slots get a darker-orange flash since their resting
   state already has the orange highlight. */
.blank-slot:active {
    border-color: #6ea8fe;
    background: #dbe7ff;
    transition-duration: .05s;
}
.blank-slot.filled:active {
    background: #cfddff;
    border-color: #6ea8fe;
    color: #0a58ca;
    transform: translateY(1px);
}
.blank-slot.selected:active,
.blank-slot.filled.selected:active {
    background: #ffe2bf;
    border-color: #fd7e14;
    color: #c05a00;
}

#word-bank .word-btn {
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}
#word-bank .word-btn:active { cursor: grabbing; }
#word-bank .word-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
#word-bank .word-btn.word-used {
    opacity: .4;
    pointer-events: none;
    cursor: not-allowed;
}
#word-bank .word-btn.word-active {
    border-color: #fd7e14 !important;
    background: #fff3e0 !important;
    color: #fd7e14 !important;
}
/* Press feedback — mirrors .se-chip so taps feel responsive on touch devices.
   Brief background/border flash plus a slight sink. Overrides Bootstrap's
   default outline-secondary :active styling for a chip-consistent feel.
   Active (orange-themed) buttons get a darker-orange flash. */
#word-bank .word-btn:active {
    background: #dbe7ff;
    border-color: #6ea8fe;
    color: #0a58ca;
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(13, 110, 253, .15);
    transition-duration: .05s;
}
#word-bank .word-btn.word-active:active {
    background: #ffe2bf !important;
    border-color: #fd7e14 !important;
    color: #c05a00 !important;
}

/* ── Drag-and-drop visual feedback ── */
.blank-slot.filled { cursor: grab; touch-action: none; }
.blank-slot.filled:active { cursor: grabbing; }
/* Allow horizontal scroll of the word bank to pass through to the browser,
   while letting the touch-drag handler claim vertical movement. */
#word-bank .word-btn { touch-action: pan-x; }
.blank-slot.dragging,
#word-bank .word-btn.dragging {
    opacity: .45;
}
.blank-slot.drag-over {
    border-style: solid;
    border-color: var(--t1-success);
    background: var(--t1-success-soft);
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .25);
    color: var(--t1-success);
}
#word-bank.drag-over {
    outline: 2px dashed var(--t1-success);
    outline-offset: 4px;
    border-radius: .5rem;
    background: rgba(25, 135, 84, .04);
}

/* Floating ghost element used by the touch drag-and-drop fallback.
   Cloned from the source button/slot, follows the finger via JS. */
.drag-touch-ghost {
    margin: 0 !important;
    transition: none !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .se-mcq-option,
    .se-answered-count,
    .blank-slot,
    .se-select,
    .se-chip,
    #word-bank .word-btn {
        transition: none !important;
    }
    #word-bank .word-btn:hover,
    #word-bank .word-btn:active { transform: none; }
    .se-chip:active { transform: none; }
    .se-mcq-option:hover,
    .se-mcq-option:active { transform: none; }
    .blank-slot:active,
    .blank-slot.filled:active { transform: none; }
}

/* ============================================================
   PREMIUM PASS — Task #11 additive layer
   Visible upgrade for Teil 2/3 + Sprachteil 1/2
   ============================================================ */

/* ── Premium MCQ answer-cards with letter pill (A/B/C/D)
      Applied to .se-mcq-option in Teil 2 / Sprachteil 1 / exam steps.
      Letters are CSS-counter driven, scoped per MCQ list container. ── */
.se-mcq-list {
    counter-reset: se-mcq-letter;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.se-mcq-option {
    counter-increment: se-mcq-letter;
    position: relative;
    padding: .85rem .9rem .85rem 3rem;
    border-radius: .65rem;
    border: 1.5px solid #dee2e6;
    background: #fff;
    min-height: 3.25rem;
    align-items: center !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    cursor: pointer;
}
.se-mcq-option::before {
    content: counter(se-mcq-letter, upper-alpha);
    position: absolute;
    inset-inline-start: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    color: var(--t1-text);
    background: var(--t1-bg-tint);
    border: 1.5px solid #dee2e6;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.se-mcq-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}
.se-mcq-option:hover::before {
    color: var(--t1-accent);
    border-color: var(--t1-accent-soft);
    background: #e7f0ff;
}
/* Press feedback (Premium pass override) — overrides the hover lift so the
   card visibly sinks when tapped, even if :hover is also matching. */
.se-mcq-option:active {
    transform: scale(.985);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.se-mcq-option:active::before {
    background: #cfe0ff;
    border-color: #6ea8fe;
    color: #0a58ca;
}
.se-mcq-option.is-checked:active::before {
    background: #0a58ca;
    border-color: #0a58ca;
    color: #fff;
}
.se-mcq-option.is-checked {
    border-color: var(--t1-accent);
    background: #eaf2ff;
    box-shadow: 0 4px 14px rgba(13, 110, 253, .14);
}
.se-mcq-option.is-checked::before {
    color: #fff;
    background: var(--t1-accent);
    border-color: var(--t1-accent);
}
.se-mcq-option .form-check-input {
    margin-inline-end: .25rem;
}
/* Hide the native radio dot — letter pill carries the "checked" affordance.
   Input stays focusable & submitted; we only hide its visual chrome. */
.se-mcq-option .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    box-shadow: none !important;
    pointer-events: none;
    position: absolute;
    opacity: 0;
}
.se-mcq-option label.form-check-label {
    cursor: pointer;
    font-size: .98rem;
    line-height: 1.45;
    margin: 0;
}
/* Review states keep their server-rendered list-group color but adopt the card shell */
.se-mcq-option.list-group-item-success { background: var(--t1-success-soft); border-color: var(--t1-success-soft); }
.se-mcq-option.list-group-item-danger  { background: #f8d7da; border-color: #f1aeb5; }

/* Scope the letter counter to forms — exam steps may stack multiple lists */
form .se-mcq-list { counter-reset: se-mcq-letter; }

/* ── Teil 3 chip-row v2: stronger weight + statement→pick link ── */
.se-chip {
    padding: .45rem .95rem;
    font-size: .92rem;
    min-height: 2.25rem;
}
.se-chip.is-selected {
    box-shadow: 0 2px 6px rgba(13, 110, 253, .3);
}
.se-chip-row { row-gap: .5rem; }
/* Subtle eyebrow showing the relationship between chip-row and statement */
.se-chip-group[data-se-chip-group]::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    background: #dee2e6;
    border-radius: 2px;
    margin: 0 0 .4rem;
}

/* ── Sprachteil 2 cloze: blank-slot polish + AA contrast on empty ── */
.blank-slot {
    color: var(--t1-text);              /* AA on var(--t1-bg-canvas), replaces var(--t1-text-muted) */
    font-weight: 500;
    min-height: 2rem;
}
.blank-slot.empty .blank-text { opacity: .55; }
.blank-slot.filled {
    box-shadow: 0 1px 4px rgba(13, 110, 253, .15);
}

/* Word bank: make it scannable on desktop, scrollable strip on mobile */
#word-bank .word-btn {
    font-weight: 500;
    padding: .45rem .7rem;
    min-height: 2.25rem;
}
@media (max-width: 991.98px) {
    /* Sticky strip beneath header on tablet/mobile */
    #word-bank {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .5rem;
        padding-bottom: .25rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    #word-bank .word-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* ── Mobile sticky controls bar (≤576px) ──
   Keeps "Check / Show solution / counter" visible without trapping scroll. */
@media (max-width: 575.98px) {
    .se-controls-bar {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: #fff;
        padding: .75rem .5rem;
        margin-inline: -.5rem;
        margin-top: 1rem;
        border-top: 1px solid var(--t1-bg-tint);
        box-shadow: 0 -4px 12px rgba(15, 23, 42, .06);
    }
    .se-mcq-option { padding-inline-start: 2.7rem; }
    .se-mcq-option::before { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
}

/* Ensure tap targets ≥44px on touch */
@media (hover: none) and (pointer: coarse) {
    .se-mcq-option { min-height: 3.5rem; }
    .se-chip       { min-height: 2.75rem; padding-block: .55rem; }
    .blank-slot    { min-height: 2.5rem; }
    #word-bank .word-btn { min-height: 2.5rem; }
}

/* Long German words — never overflow */
.se-mcq-option label.form-check-label,
.se-chip,
.blank-slot,
#word-bank .word-btn {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Visually-hidden live region for screen-reader announcements ── */
[data-se-live] {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Exam timer: shared amber + danger tiers, plus pulse ── */
#exam-timer.is-warning {
    color: #fd7e14 !important;
}
#exam-timer.is-danger {
    color: var(--t1-danger) !important;
    animation: se-timer-pulse 1.4s ease-in-out infinite;
}
@keyframes se-timer-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    #exam-timer.is-danger { animation: none; }
}

/* ── "Saving…" disabled state on submit ── */
.se-saving [type="submit"],
.se-saving button[name="correction"],
.se-saving button[name="show_solution"] {
    pointer-events: none;
    opacity: .7;
}
.se-saving [type="submit"] .se-saving-spinner {
    display: inline-block !important;
}
/* While the form is in saving state, hide the original button content
   (children AND raw text nodes). We zero out the button's font-size so
   any bare text disappears, hide non-overlay children explicitly, and
   re-enable a normal font-size only on the spinner + label we append. */
.se-saving button[data-saving-applied] {
    font-size: 0 !important;
}
.se-saving button[data-saving-applied] > *:not(.se-saving-spinner):not(.se-saving-label) {
    display: none !important;
}
.se-saving button[data-saving-applied] > .se-saving-spinner,
.se-saving button[data-saving-applied] > .se-saving-label {
    font-size: 1rem;
    vertical-align: middle;
}

/* ── RTL polish — flip directional affordances ── */
[dir="rtl"] .se-mcq-option { padding: .85rem 3rem .85rem .9rem; }
[dir="rtl"] .se-mcq-option::before { right: .8rem; left: auto; }
/* ── Teil 2 (Arabic/RTL): answer options are German (LTR text), so keep the
   existing letter marker at the LEFT/start of each option to match the German
   reading direction. Scoped to Teil 2 via .se-questions-scroll (standalone Teil 2
   and the Teil-2 exam step). Sprachteil 1 / other MCQ lists and LTR (EN/DE) are
   untouched. No new markers/letters are introduced — only the side is corrected. */
[dir="rtl"] .se-questions-scroll .se-mcq-option {
    direction: ltr;
    text-align: left;
    padding: .85rem .9rem .85rem 3rem;
}
[dir="rtl"] .se-questions-scroll .se-mcq-option::before { left: .8rem; right: auto; }
[dir="rtl"] .se-controls-bar > .ms-auto { margin-inline-start: 0 !important; margin-inline-end: auto; }
[dir="rtl"] .se-chip-group[data-se-chip-group]::before { margin-inline-start: 0; }

/* Make sure focus-visible never gets clipped on any chip/card/blank */
.se-mcq-option:focus-within,
.se-chip:focus-visible,
.blank-slot:focus-visible,
#word-bank .word-btn:focus-visible {
    outline-offset: 2px;
}

/* ============================================================
   TASK #25 — Premium UI/UX unification (Teil 1 token adoption)
   Token-aware overrides + new component chrome shared by
   Teil 2/3 + Sprachteil 1/2 (practice + exam) and the exam shell.
   No logic, no scoring contracts depend on this — pure visual
   layer routed through teil1.css design tokens (--t1-*).
   ============================================================ */

/* ── Token-aware overrides for existing chrome ─────────── */
.exam-mode-pill {
    border-radius: var(--t1-chip-radius);
}
.exam-mode-pill--basic {
    background: var(--t1-success-tint);
    color: var(--t1-success-text);
    border-color: var(--t1-success-soft);
}
.exam-mode-pill--modified {
    background: var(--t1-accent-tint);
    color: var(--t1-accent-dk);
    border-color: #d6e4ff;
}

.se-answered-count {
    color: var(--t1-text-muted);
    background: #f8fafc;
    border-color: var(--t1-border-soft);
}
.se-answered-count.is-complete {
    color: var(--t1-success-text);
    background: var(--t1-success-tint);
    border-color: var(--t1-success-soft);
    animation: se-counter-complete 1.2s ease-out;
}
@keyframes se-counter-complete {
    0%   { box-shadow: 0 0 0 0 var(--t1-success-ring); }
    70%  { box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

.se-controls-bar {
    border-top-color: var(--t1-border-soft);
}
.se-divider { background: var(--t1-border); }

/* ── MCQ option premium chrome — re-tinted to t1 indigo ── */
.se-mcq-option {
    border-color: var(--t1-border);
    box-shadow: var(--t1-shadow-xs);
    transition: border-color var(--t1-dur-fast) var(--t1-ease),
                background var(--t1-dur-fast) var(--t1-ease),
                box-shadow var(--t1-dur-med) var(--t1-ease),
                transform .12s ease;
}
.se-mcq-option:hover {
    border-color: #c7dbff;
    background: var(--t1-accent-tint);
    box-shadow: var(--t1-shadow-sm);
    transform: translateY(-1px);
}
.se-mcq-option::before {
    color: var(--t1-text-muted);
    background: #f1f5f9;
    border-color: var(--t1-border);
}
.se-mcq-option:hover::before {
    color: var(--t1-accent-dk);
    border-color: #c7dbff;
    background: var(--t1-accent-soft);
}
.se-mcq-option:focus-within {
    border-color: var(--t1-accent);
    background: var(--t1-accent-soft);
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}
.se-mcq-option.is-checked {
    border-color: var(--t1-accent);
    background: var(--t1-accent-soft);
    box-shadow: 0 4px 14px var(--t1-accent-ring);
}
.se-mcq-option.is-checked::before {
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-color: var(--t1-accent-dk);
    color: #fff;
    box-shadow: 0 3px 8px var(--t1-accent-ring),
                inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* ── Chip system using t1 tokens ───────────────────────── */
.se-chip {
    color: var(--t1-text);
    border-color: var(--t1-border);
}
.se-chip:hover {
    border-color: #c7dbff;
    background: var(--t1-accent-tint);
    color: var(--t1-accent-dk);
}
.se-chip:focus-visible {
    border-color: var(--t1-accent);
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}
.se-chip.is-selected {
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-color: var(--t1-accent-dk);
    box-shadow: 0 3px 10px var(--t1-accent-ring),
                inset 0 1px 0 rgba(255,255,255,.15);
}
.se-chip-group[data-se-chip-group]::before { background: var(--t1-border); }

/* Cloze blank slots — adopt t1 indigo for filled state */
.blank-slot {
    color: var(--t1-text);
    border-color: #cbd5e1;
    background: #f8fafc;
}
.blank-slot:hover {
    border-color: #c7dbff;
    background: var(--t1-accent-tint);
}
.blank-slot.filled {
    border-color: var(--t1-accent);
    background: var(--t1-accent-soft);
    color: var(--t1-accent-dk);
    box-shadow: 0 1px 4px var(--t1-accent-ring);
}

/* ── Banner family — replaces alert alert-warning/primary/info ── */
.se-banner {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: var(--t1-card-radius);
    border: 1px solid transparent;
    background: var(--t1-bg-canvas);
    color: var(--t1-text);
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    box-shadow: var(--t1-shadow-xs);
    position: relative;
    overflow: hidden;
}
.se-banner::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--t1-accent);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-banner > .bi:first-child,
.se-banner-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    color: var(--t1-accent);
    margin-top: .1rem;
}
.se-banner-body { flex: 1 1 auto; min-width: 0; }
.se-banner .btn-close {
    flex-shrink: 0;
    margin-inline-start: auto;
    opacity: .55;
}
.se-banner .btn-close:hover { opacity: 1; }
.se-banner--info {
    background: var(--t1-accent-tint);
    border-color: #d6e4ff;
    color: var(--t1-accent-dk);
}
.se-banner--info::before {
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
}
.se-banner--info > .bi:first-child,
.se-banner--info .se-banner-icon { color: var(--t1-accent); }

.se-banner--warning {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
    color: #78350f;
}
.se-banner--warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
.se-banner--warning > .bi:first-child,
.se-banner--warning .se-banner-icon { color: #b45309; }

.se-banner--success {
    background: var(--t1-success-tint);
    border-color: var(--t1-success-soft);
    color: var(--t1-success-text);
}
.se-banner--success::before {
    background: linear-gradient(180deg, var(--t1-success) 0%, #166534 100%);
}
.se-banner--success > .bi:first-child,
.se-banner--success .se-banner-icon { color: var(--t1-success); }

.se-banner--danger {
    background: var(--t1-danger-tint);
    border-color: #fecaca;
    color: var(--t1-danger-text);
}
.se-banner--danger::before {
    background: linear-gradient(180deg, var(--t1-danger) 0%, #991b1b 100%);
}
.se-banner--danger > .bi:first-child,
.se-banner--danger .se-banner-icon { color: var(--t1-danger); }

/* ── Result summary strip — replaces Bootstrap alert chrome ── */
.se-result-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem .75rem 1.15rem;
    border-radius: var(--t1-card-radius);
    border: 1px solid var(--t1-border-soft);
    background: var(--t1-bg-surface);
    box-shadow: var(--t1-shadow-xs);
    position: relative;
    overflow: hidden;
    font-size: .92rem;
    margin-bottom: .5rem;
}
.se-result-strip::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--t1-accent);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-result-strip-icon {
    width: 2rem; height: 2rem;
    border-radius: 9px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.se-result-strip-title {
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--t1-ink);
}
.se-result-strip-divider {
    color: var(--t1-text-subtle);
    margin: 0 .15rem;
}
.se-result-strip-stat {
    color: var(--t1-text);
    font-size: .92rem;
}
.se-result-strip-stat strong {
    font-weight: 700;
    color: var(--t1-ink);
}
.se-result-strip-welcome {
    flex: 1 1 100%;
    margin-top: .35rem;
    padding-inline-start: 2.65rem;
    color: var(--t1-text-muted);
    font-size: .88rem;
    line-height: 1.5;
}
.se-result-strip--strong {
    background: linear-gradient(180deg, #ffffff 0%, var(--t1-success-tint) 100%);
    border-color: #bbf7d0;
}
.se-result-strip--strong::before {
    background: linear-gradient(180deg, var(--t1-success) 0%, #166534 100%);
}
.se-result-strip--strong .se-result-strip-icon {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
}
.se-result-strip--medium {
    background: linear-gradient(180deg, #ffffff 0%, var(--t1-accent-tint) 100%);
    border-color: #d6e4ff;
}
.se-result-strip--medium::before {
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
}
.se-result-strip--medium .se-result-strip-icon {
    background: var(--t1-accent-soft);
    color: var(--t1-accent-dk);
}
.se-result-strip--weak {
    background: linear-gradient(180deg, #ffffff 0%, var(--t1-danger-tint) 100%);
    border-color: #fecaca;
    box-shadow: 0 1px 3px var(--t1-danger-ring);
}
.se-result-strip--weak::before {
    background: linear-gradient(180deg, var(--t1-danger) 0%, #991b1b 100%);
}
.se-result-strip--weak .se-result-strip-icon {
    background: var(--t1-danger-soft);
    color: var(--t1-danger-text);
}
.se-result-strip--empty {
    background: var(--t1-bg-canvas);
    border-color: var(--t1-border-soft);
    color: var(--t1-text-muted);
}
.se-result-strip--empty::before { background: var(--t1-text-subtle); }
.se-result-strip--empty .se-result-strip-icon {
    background: #f1f5f9;
    color: var(--t1-text-muted);
}

/* ── Question card (replaces card border-2 border-success/danger) ── */
.se-question-card {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--t1-dur-med) var(--t1-ease),
                border-color var(--t1-dur-med) var(--t1-ease);
}
.se-question-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-question-card:hover { box-shadow: var(--t1-shadow-sm); }
.se-question-card.is-correct::before {
    background: linear-gradient(180deg, var(--t1-success) 0%, #166534 100%);
}
.se-question-card.is-wrong::before {
    background: linear-gradient(180deg, var(--t1-danger) 0%, #991b1b 100%);
}
.se-question-head {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem 1rem .75rem 1.15rem;
    border-bottom: 1px solid var(--t1-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    min-height: 52px;
}
.se-question-num {
    display: inline-flex;
    width: 1.85rem; height: 1.85rem;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    border-radius: 9px;
    flex-shrink: 0;
    box-shadow: 0 3px 8px var(--t1-accent-ring),
                inset 0 -1px 0 rgba(0, 0, 0, .12);
    margin-top: 1px;
    direction: ltr; unicode-bidi: isolate;
}
.se-question-card.is-correct .se-question-num {
    background: linear-gradient(135deg, var(--t1-success) 0%, #166534 100%);
    box-shadow: 0 4px 10px var(--t1-success-ring), inset 0 -1px 0 rgba(0,0,0,.12);
}
.se-question-card.is-wrong .se-question-num {
    background: linear-gradient(135deg, var(--t1-danger) 0%, #991b1b 100%);
    box-shadow: 0 4px 10px var(--t1-danger-ring), inset 0 -1px 0 rgba(0,0,0,.12);
}
.se-question-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--t1-text);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.se-question-result {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    font-size: .78rem;
    padding: .3rem .7rem;
    border-radius: var(--t1-chip-radius);
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid transparent;
    flex-shrink: 0;
    line-height: 1;
}
.se-question-result.is-correct {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border-color: #bbf7d0;
}
.se-question-result.is-wrong {
    background: var(--t1-danger-soft);
    color: var(--t1-danger-text);
    border-color: #fecaca;
}
.se-question-body {
    padding: .9rem 1rem 1rem 1.15rem;
}

/* ── Feedback list — replaces list-group review markup ── */
.se-feedback-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}
.se-feedback-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border-radius: var(--t1-tile-radius);
    border: 1px solid var(--t1-border);
    background: var(--t1-bg-surface);
    font-size: .94rem;
    line-height: 1.45;
    color: var(--t1-text);
}
.se-feedback-item .bi {
    flex-shrink: 0;
    font-size: 1.05rem;
}
.se-feedback-item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.se-feedback-item.is-correct {
    background: var(--t1-success-tint);
    border-color: #bbf7d0;
    color: var(--t1-success-text);
    font-weight: 600;
}
.se-feedback-item.is-correct .bi { color: var(--t1-success); }
.se-feedback-item.is-wrong {
    background: var(--t1-danger-tint);
    border-color: #fecaca;
    color: var(--t1-danger-text);
}
.se-feedback-item.is-wrong .bi { color: var(--t1-danger); }
.se-feedback-item.is-neutral .bi { color: var(--t1-text-subtle); }
.se-feedback-badge {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    border-radius: var(--t1-chip-radius);
    background: var(--t1-danger-soft);
    color: var(--t1-danger-text);
    border: 1px solid #fecaca;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Inline answer pills (Teil 3 selected/correct chips) ── */
.se-answer-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-size: .82rem;
    font-weight: 700;
    border-radius: var(--t1-chip-radius);
    border: 1px solid transparent;
    line-height: 1.1;
}
.se-answer-pill .bi { font-size: .9rem; }
.se-answer-pill.is-correct {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border-color: #bbf7d0;
}
.se-answer-pill.is-wrong {
    background: var(--t1-danger-soft);
    color: var(--t1-danger-text);
    border-color: #fecaca;
}
.se-answer-arrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--t1-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.se-answer-arrow .bi { color: var(--t1-text-subtle); }

/* ── Explanation block (review mode) ─────────────────── */
.se-explanation {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid var(--t1-border-soft);
}
.se-explanation-icon {
    color: var(--t1-accent);
    flex-shrink: 0;
    font-size: 1rem;
    background: var(--t1-accent-soft);
    width: 1.85rem; height: 1.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-top: .1rem;
}
.se-explanation-body { flex: 1 1 auto; min-width: 0; }
.se-explanation-label {
    display: block;
    font-weight: 700;
    font-size: .72rem;
    margin-bottom: .25rem;
    color: var(--t1-ink);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.se-explanation-text {
    color: var(--t1-text);
    font-size: .92rem;
    line-height: 1.6;
}

/* ── Text panel (left column reading text) ───────────── */
.se-text-panel {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--t1-dur-med) var(--t1-ease);
}
.se-text-panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    z-index: 1;
}
.se-text-panel:hover { box-shadow: var(--t1-shadow-sm); }
.se-text-panel-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem .65rem 1.15rem;
    border-bottom: 1px solid var(--t1-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
}
.se-text-panel-icon {
    color: var(--t1-accent);
    background: var(--t1-accent-soft);
    width: 1.85rem; height: 1.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.se-text-panel-title {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
    color: var(--t1-ink);
    line-height: 1.25;
}
.se-text-panel-count {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    border-radius: var(--t1-chip-radius);
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    border: 1px solid var(--t1-border-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}
.se-text-panel-body {
    padding: 1rem 1.15rem 1.1rem;
    max-height: 72vh;
    overflow-y: auto;
}
.se-text-panel-body--list {
    padding: .85rem 1rem 1rem;
}
.se-text-passage {
    font-family: Georgia, "Source Serif Pro", "Iowan Old Style", serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--t1-text);
    background: #fbfaf6;
    border: 1px solid #ece6d6;
    border-radius: 10px;
    padding: .85rem 1.05rem;
    text-align: justify;
}
body.rtl .se-text-passage { font-family: inherit; }

/* Right-column section heading */
.se-section-heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--t1-ink);
}
.se-section-heading-icon {
    color: var(--t1-accent);
    background: var(--t1-accent-soft);
    width: 1.85rem; height: 1.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.se-section-heading-count {
    margin-inline-start: .25rem;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    border-radius: var(--t1-chip-radius);
    border: 1px solid var(--t1-border-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}

/* Theme badge under the page header */
.se-theme-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: var(--t1-chip-radius);
    background: var(--t1-accent-tint);
    color: var(--t1-accent-dk);
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid #d6e4ff;
}
.se-theme-badge .bi { color: var(--t1-accent); }

/* Try-again strip on practice pages (post-check) */
.se-postcheck-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .55rem .85rem;
    background: var(--t1-bg-canvas);
    border: 1px solid var(--t1-border-soft);
    border-radius: var(--t1-card-radius);
    margin-bottom: 1.25rem;
    box-shadow: var(--t1-shadow-xs);
}
.se-postcheck-actions .se-postcheck-hint {
    color: var(--t1-text-muted);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.se-postcheck-actions .se-postcheck-hint .bi { color: var(--t1-accent); }

/* ── Exam timer card (replaces Bootstrap card wrap) ── */
.se-timer-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem .65rem 1.15rem;
    background: linear-gradient(135deg, #ffffff 0%, var(--t1-accent-tint) 100%);
    border: 1px solid #d6e4ff;
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.se-timer-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-timer-card.is-warning {
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    border-color: #fde68a;
}
.se-timer-card.is-warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
.se-timer-card.is-danger {
    background: linear-gradient(135deg, #ffffff 0%, var(--t1-danger-tint) 100%);
    border-color: #fecaca;
}
.se-timer-card.is-danger::before {
    background: linear-gradient(180deg, var(--t1-danger) 0%, #991b1b 100%);
}
.se-timer-card-icon {
    width: 2.4rem; height: 2.4rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--t1-accent-soft);
    color: var(--t1-accent-dk);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.se-timer-card.is-warning .se-timer-card-icon {
    background: #fef3c7;
    color: #b45309;
}
.se-timer-card.is-danger .se-timer-card-icon {
    background: var(--t1-danger-soft);
    color: var(--t1-danger);
}
.se-timer-card-body { min-width: 0; }
.se-timer-card-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t1-text-muted);
    margin-bottom: .1rem;
}
.se-timer-card-value {
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.05;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    letter-spacing: .02em;
    color: var(--t1-ink);
    direction: ltr; unicode-bidi: isolate;
}
.se-timer-card.is-warning .se-timer-card-value { color: #b45309; }
.se-timer-card.is-danger .se-timer-card-value {
    color: var(--t1-danger);
    animation: se-timer-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .se-timer-card.is-danger .se-timer-card-value { animation: none; }
}

/* ── Cloze passage card (Sprachteil 2) ────────────────── */
.se-cloze-card {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    overflow: hidden;
    position: relative;
}
.se-cloze-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    z-index: 1;
}
.se-cloze-text {
    padding: 1.15rem 1.25rem 1.25rem 1.4rem;
    font-size: 1.02rem;
    line-height: 1.95;
    color: var(--t1-text);
}

/* ── Word bank panel — sticky on desktop ─────────────── */
.se-wordbank-panel {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    overflow: hidden;
    position: relative;
}
.se-wordbank-panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    z-index: 1;
}
@media (min-width: 992px) {
    .se-wordbank-panel { position: sticky; top: 5rem; }
}
.se-wordbank-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem .65rem 1.15rem;
    border-bottom: 1px solid var(--t1-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
}
.se-wordbank-icon {
    color: var(--t1-accent);
    background: var(--t1-accent-soft);
    width: 1.85rem; height: 1.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.se-wordbank-title {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
    color: var(--t1-ink);
    line-height: 1.25;
}
.se-wordbank-count {
    margin-inline-start: auto;
    padding: .15rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    border-radius: var(--t1-chip-radius);
    border: 1px solid var(--t1-border-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}
.se-wordbank-body {
    padding: .85rem 1rem 1rem 1.15rem;
}
.se-wordbank-hint {
    color: var(--t1-text-muted);
    font-size: .82rem;
    margin: 0 0 .65rem;
    line-height: 1.5;
}

/* ── Per-blank explanation tile (SP2 review) ─────────── */
.se-blank-tile {
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-tile-radius);
    padding: .85rem;
    background: var(--t1-bg-surface);
    height: 100%;
    transition: box-shadow var(--t1-dur-fast) var(--t1-ease),
                border-color var(--t1-dur-fast) var(--t1-ease);
}
.se-blank-tile:hover { box-shadow: var(--t1-shadow-xs); }
.se-blank-tile.is-correct {
    background: var(--t1-success-tint);
    border-color: #bbf7d0;
}
.se-blank-tile.is-wrong {
    background: var(--t1-danger-tint);
    border-color: #fecaca;
}
.se-blank-tile-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .55rem;
}
.se-blank-tile-num {
    width: 1.65rem; height: 1.65rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: .82rem;
    color: #fff;
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    box-shadow: 0 3px 8px var(--t1-accent-ring), inset 0 -1px 0 rgba(0, 0, 0, .12);
    flex-shrink: 0;
    direction: ltr; unicode-bidi: isolate;
}
.se-blank-tile.is-correct .se-blank-tile-num {
    background: linear-gradient(135deg, var(--t1-success) 0%, #166534 100%);
    box-shadow: 0 3px 8px var(--t1-success-ring), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.se-blank-tile.is-wrong .se-blank-tile-num {
    background: linear-gradient(135deg, var(--t1-danger) 0%, #991b1b 100%);
    box-shadow: 0 3px 8px var(--t1-danger-ring), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.se-blank-tile-status {
    font-size: .92rem;
    color: var(--t1-text);
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}
.se-blank-tile-kws {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .55rem;
}
.se-blank-tile-expl {
    font-size: .85rem;
    color: var(--t1-text-muted);
    line-height: 1.55;
}

/* ── Mobile readability tweaks ───────────────────────── */
@media (max-width: 575.98px) {
    .se-cloze-text  { font-size: .98rem; line-height: 1.9; padding: 1rem 1rem 1rem 1.15rem; }
    .se-question-head { padding: .65rem .8rem .65rem 1rem; }
    .se-question-body { padding: .8rem .85rem .85rem 1rem; }
    .se-text-panel-body { padding: .85rem .9rem; }
    .se-banner { padding: .75rem .85rem .75rem 1rem; }
    .se-result-strip { padding: .65rem .85rem .65rem 1rem; }
    .se-result-strip-welcome { padding-inline-start: 0; }
}

/* ── RTL polish — keep the accent rail on the leading edge ── */
[dir="rtl"] .se-banner::before,
[dir="rtl"] .se-result-strip::before,
[dir="rtl"] .se-question-card::before,
[dir="rtl"] .se-text-panel::before,
[dir="rtl"] .se-wordbank-panel::before,
[dir="rtl"] .se-cloze-card::before,
[dir="rtl"] .se-timer-card::before {
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Task 25 — supplementary unified components
   ───────────────────────────────────────────────────────────────── */

/* ── Text panel item (Teil 3 short texts list) ───────────────── */
.se-text-panel-item {
    padding: .85rem 1rem .9rem 1.15rem;
    border-bottom: 1px solid var(--t1-border-soft);
    position: relative;
    transition: background-color var(--t1-dur-fast) var(--t1-ease);
}
.se-text-panel-item:last-child { border-bottom: 0; }
.se-text-panel-item.is-correct {
    background: linear-gradient(90deg, var(--t1-success-tint) 0%, transparent 100%);
    box-shadow: inset 4px 0 0 var(--t1-success);
}
.se-text-panel-item.is-wrong {
    background: linear-gradient(90deg, var(--t1-danger-tint) 0%, transparent 100%);
    box-shadow: inset 4px 0 0 var(--t1-danger);
}
[dir="rtl"] .se-text-panel-item.is-correct { box-shadow: inset -4px 0 0 var(--t1-success); }
[dir="rtl"] .se-text-panel-item.is-wrong   { box-shadow: inset -4px 0 0 var(--t1-danger);  }

.se-text-panel-tag {
    flex-shrink: 0;
    margin-top: .15rem;
    padding: .25rem .6rem;
    font-weight: 700;
    font-size: .82rem;
    color: var(--t1-accent-dk);
    background: var(--t1-accent-soft);
    border: 1px solid var(--t1-accent-soft);
    border-radius: var(--t1-chip-radius);
    line-height: 1.2;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Inline cloze pill (SP2 inline correctness markers) ──────── */
.se-cloze-pair {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    vertical-align: middle;
}
.se-cloze-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: var(--t1-chip-radius);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    vertical-align: middle;
    border: 1px solid transparent;
    direction: ltr;
    unicode-bidi: isolate;
}
.se-cloze-pill .bi { font-size: .85rem; }
.se-cloze-pill.is-correct {
    background: var(--t1-success);
    color: #fff;
    border-color: var(--t1-success);
    box-shadow: 0 1px 3px var(--t1-success-ring);
}
.se-cloze-pill.is-wrong {
    background: var(--t1-danger);
    color: #fff;
    border-color: var(--t1-danger);
    box-shadow: 0 1px 3px var(--t1-danger-ring);
}
.se-cloze-pill.se-cloze-pill--soft.is-correct {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border-color: var(--t1-success-soft);
    box-shadow: none;
}

/* ── Per-blank tile sub-spans (was/fix) ─────────────────────── */
.se-blank-tile-was {
    text-decoration: line-through;
    color: var(--t1-danger);
    font-weight: 600;
    margin-inline-end: .25rem;
}
.se-blank-tile-fix {
    color: var(--t1-success-text);
    font-weight: 800;
    margin-inline-start: .25rem;
}
.se-blank-tile-status .bi { font-size: .9rem; vertical-align: -.08em; }
.se-blank-tile.is-correct .se-blank-tile-status .bi { color: var(--t1-success); }
.se-blank-tile.is-wrong   .se-blank-tile-status .bi { color: var(--t1-text-subtle); }

/* ============================================================
   TASK #32 — Final premium polish: shared shell components
   Additive layer. Templates can adopt these to replace any
   remaining Bootstrap-flavoured chrome (back link, empty state,
   landing/done/unavailable cards, step indicator, progress bar,
   word-bank correctness colours). All built on the existing
   --t1-* token palette, no logic or contracts depend on them.
   ============================================================ */

/* ── Unified back-link button ──────────────────────────── */
.se-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--t1-text);
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-chip-radius);
    text-decoration: none;
    box-shadow: var(--t1-shadow-xs);
    transition: border-color var(--t1-dur-fast) var(--t1-ease),
                background var(--t1-dur-fast) var(--t1-ease),
                color var(--t1-dur-fast) var(--t1-ease),
                box-shadow var(--t1-dur-med) var(--t1-ease),
                transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.se-back-link:hover,
.se-back-link:focus-visible {
    color: var(--t1-accent-dk);
    border-color: #c7dbff;
    background: var(--t1-accent-tint);
    box-shadow: var(--t1-shadow-sm);
    text-decoration: none;
}
.se-back-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}
.se-back-link:active {
    transform: translateY(1px);
}
.se-back-link .bi { font-size: .95rem; line-height: 1; }
[dir="rtl"] .se-back-link .bi-arrow-left::before { content: "\F138"; } /* bi-arrow-right */

/* ── Empty-state card ──────────────────────────────────── */
.se-empty-state {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-xs);
    padding: 2.5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.se-empty-state::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-text-subtle) 0%, var(--t1-text-muted) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    font-size: 1.85rem;
    margin-bottom: .9rem;
}
.se-empty-state-title {
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--t1-text);
    font-size: 1.05rem;
}
.se-empty-state-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

/* ── Landing card (intro / resume / done / unavailable) ── */
.se-landing-card {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-sm);
    padding: 2.75rem 1.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.se-landing-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
}
.se-landing-card--resume::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
.se-landing-card--locked::before {
    background: linear-gradient(180deg, var(--t1-text-subtle) 0%, var(--t1-text-muted) 100%);
}
.se-landing-card--celebration {
    background: linear-gradient(180deg, #ffffff 0%, var(--t1-success-tint) 100%);
    border-color: #bbf7d0;
    box-shadow: var(--t1-shadow-md);
}
.se-landing-card--celebration::before {
    background: linear-gradient(180deg, var(--t1-success) 0%, #166534 100%);
}
.se-landing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 18px;
    margin-bottom: 1rem;
    font-size: 2.4rem;
    background: var(--t1-accent-soft);
    color: var(--t1-accent-dk);
    box-shadow: 0 6px 18px var(--t1-accent-ring);
}
.se-landing-card--resume .se-landing-icon {
    background: #fef3c7;
    color: #b45309;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .25);
}
.se-landing-card--locked .se-landing-icon {
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    box-shadow: none;
}
.se-landing-card--celebration .se-landing-icon {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    box-shadow: 0 8px 24px var(--t1-success-ring);
    animation: se-landing-pop .55s var(--t1-ease) both;
}
@keyframes se-landing-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .se-landing-card--celebration .se-landing-icon { animation: none; }
}
.se-landing-title {
    margin: 0 0 .5rem;
    font-weight: 800;
    font-size: 1.55rem;
    color: var(--t1-ink);
    letter-spacing: -.01em;
}
.se-landing-card--celebration .se-landing-title {
    color: var(--t1-success-text);
}
.se-landing-subtitle {
    color: var(--t1-text-muted);
    font-size: .98rem;
    margin: 0 0 .35rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: center;
}
.se-landing-text {
    color: var(--t1-text-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 auto 1.5rem;
    max-width: 38rem;
}
.se-landing-points {
    margin: 0 0 1.5rem;
}
.se-landing-points-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t1-text-muted);
    margin: 0 0 .25rem;
}
.se-landing-points-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--t1-ink);
    line-height: 1.1;
    margin: 0;
    direction: ltr;
    unicode-bidi: isolate;
}
.se-landing-card--celebration .se-landing-points-value { color: var(--t1-success-text); }
.se-landing-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}
.se-landing-card .se-landing-header-strip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .85rem;
    margin-bottom: 1rem;
    background: var(--t1-bg-tint);
    color: var(--t1-text-muted);
    border: 1px solid var(--t1-border-soft);
    border-radius: var(--t1-chip-radius);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── Active exam-step card (replaces .card with bg-primary header) ── */
.se-exam-step-card {
    background: var(--t1-bg-surface);
    border: 1px solid var(--t1-border);
    border-radius: var(--t1-card-radius);
    box-shadow: var(--t1-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}
.se-exam-step-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    z-index: 1;
}
.se-exam-step-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem .8rem 1.25rem;
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    color: #fff;
    flex-wrap: wrap;
}
.se-exam-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.se-exam-step-meta { min-width: 0; flex: 1 1 auto; }
.se-exam-step-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .82;
    line-height: 1.1;
    margin-bottom: .1rem;
}
.se-exam-step-title {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    color: #fff;
}
.se-exam-step-mode {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: var(--t1-chip-radius);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
}
.se-exam-step-prev {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    margin-inline-start: auto;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--t1-chip-radius);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.se-exam-step-prev:hover,
.se-exam-step-prev:focus-visible {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    text-decoration: none;
}
.se-exam-step-prev:active { transform: translateY(1px); }
[dir="rtl"] .se-exam-step-prev .bi-arrow-left::before { content: "\F138"; }
.se-exam-step-body {
    padding: 1.1rem 1.15rem 1.25rem;
}

/* ── Step indicator (current / done / locked / ready) ── */
.se-step-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.se-step-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--t1-chip-radius);
    border: 1.5px solid var(--t1-border);
    background: var(--t1-bg-surface);
    color: var(--t1-text);
    text-decoration: none;
    box-shadow: var(--t1-shadow-xs);
    transition: border-color var(--t1-dur-fast) var(--t1-ease),
                background var(--t1-dur-fast) var(--t1-ease),
                color var(--t1-dur-fast) var(--t1-ease),
                box-shadow var(--t1-dur-med) var(--t1-ease),
                transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 2.25rem;
}
.se-step-pill .bi { font-size: 1rem; line-height: 1; }
a.se-step-pill:hover,
a.se-step-pill:focus-visible {
    border-color: #c7dbff;
    background: var(--t1-accent-tint);
    color: var(--t1-accent-dk);
    text-decoration: none;
    box-shadow: var(--t1-shadow-sm);
}
a.se-step-pill:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}
a.se-step-pill:active { transform: translateY(1px); }
.se-step-pill--current {
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    color: #fff;
    border-color: var(--t1-accent-dk);
    box-shadow: 0 4px 14px var(--t1-accent-ring),
                inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.se-step-pill--current:hover,
.se-step-pill--current:focus-visible {
    background: linear-gradient(135deg, var(--t1-accent-dk) 0%, #1e40af 100%);
    color: #fff;
    border-color: var(--t1-accent-dk);
}
.se-step-pill--done {
    background: var(--t1-success-tint);
    color: var(--t1-success-text);
    border-color: #bbf7d0;
}
a.se-step-pill--done:hover,
a.se-step-pill--done:focus-visible {
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border-color: var(--t1-success);
}
.se-step-pill--done .bi { color: var(--t1-success); }
.se-step-pill--locked {
    background: var(--t1-bg-canvas);
    color: var(--t1-text-subtle);
    border-color: var(--t1-border-soft);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .7;
}
.se-step-pill--locked .bi { color: var(--t1-text-subtle); }
.se-step-num {
    display: inline-flex;
    align-items: baseline;
    direction: ltr;
    unicode-bidi: isolate;
}
.se-step-list .se-step-done-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    margin-inline-start: .25rem;
    background: var(--t1-success-soft);
    color: var(--t1-success-text);
    border: 1px solid #bbf7d0;
    border-radius: var(--t1-chip-radius);
    font-size: .82rem;
    font-weight: 700;
}
.se-step-list .se-step-done-badge .bi { color: var(--t1-success); }

/* Mobile/small-screen step pill collapse — hide labels, keep icons + numbers */
@media (max-width: 575.98px) {
    .se-step-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
        scroll-snap-type: x proximity;
    }
    .se-step-pill {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: .45rem .65rem;
    }
    .se-step-list .se-step-done-badge {
        flex: 0 0 auto;
    }
}

/* ── Premium progress bar ──────────────────────────────── */
.se-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
    font-size: .82rem;
    color: var(--t1-text-muted);
}
.se-progress-meta-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
}
.se-progress-meta-value {
    font-weight: 700;
    color: var(--t1-ink);
    font-size: .9rem;
    direction: ltr;
    unicode-bidi: isolate;
}
.se-progress {
    height: 10px;
    background: var(--t1-bg-tint);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--t1-border-soft);
    position: relative;
}
.se-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-radius: 999px;
    transition: width .35s var(--t1-ease);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}
.se-progress-fill.is-complete {
    background: linear-gradient(90deg, var(--t1-success) 0%, #166534 100%);
}
[dir="rtl"] .se-progress-fill {
    background: linear-gradient(270deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
}
[dir="rtl"] .se-progress-fill.is-complete {
    background: linear-gradient(270deg, var(--t1-success) 0%, #166534 100%);
}

/* ── Word-bank correctness (token-aligned) ─────────────── */
#word-bank .word-btn.is-correct {
    background: var(--t1-success-soft) !important;
    color: var(--t1-success-text) !important;
    border-color: #86efac !important;
    box-shadow: 0 1px 3px var(--t1-success-ring) !important;
    font-weight: 600;
}
#word-bank .word-btn.is-correct .bi {
    color: var(--t1-success);
}
#word-bank .word-btn.is-wrong {
    background: var(--t1-danger-soft) !important;
    color: var(--t1-danger-text) !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 1px 3px var(--t1-danger-ring) !important;
    font-weight: 600;
}
#word-bank .word-btn.is-wrong .bi {
    color: var(--t1-danger);
}
#word-bank .word-btn.is-solution {
    background: var(--t1-success-tint) !important;
    color: var(--t1-success-text) !important;
    border-color: #bbf7d0 !important;
    font-weight: 600;
}
#word-bank .word-btn.is-solution .bi {
    color: var(--t1-success);
}
#word-bank .word-btn.is-neutral-locked {
    background: var(--t1-bg-canvas) !important;
    color: var(--t1-text-muted) !important;
    border-color: var(--t1-border) !important;
    box-shadow: none !important;
    opacity: .65;
}

/* ── Tablet portrait (768–991px) — give 2-col layouts breathing room ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .se-text-panel-body { max-height: 60vh; }
    .se-question-card .se-question-head { padding: .7rem .9rem .7rem 1.1rem; }
    .se-mcq-option { padding-inline-start: 2.85rem; min-height: 3.1rem; }
    .se-landing-card { padding: 2.25rem 1.5rem; }
    .se-landing-title { font-size: 1.4rem; }
    .se-landing-icon  { width: 4rem; height: 4rem; font-size: 2.1rem; }
    .se-exam-step-head { padding-block: .7rem; }
    .se-step-pill { padding: .4rem .75rem; font-size: .82rem; }
}

/* ── Mobile readability for new components ─────────────── */
@media (max-width: 575.98px) {
    .se-landing-card { padding: 1.85rem 1.1rem; }
    .se-landing-title { font-size: 1.25rem; }
    .se-landing-icon  { width: 3.5rem; height: 3.5rem; font-size: 1.85rem; }
    .se-landing-points-value { font-size: 1.55rem; }
    .se-empty-state { padding: 2rem 1rem; }
    .se-exam-step-head {
        padding: .7rem .85rem .7rem 1.1rem;
        gap: .65rem;
    }
    .se-exam-step-icon { width: 2rem; height: 2rem; font-size: 1.05rem; }
    .se-exam-step-title { font-size: .98rem; }
    .se-exam-step-prev { padding: .35rem .65rem; font-size: .78rem; }
    .se-exam-step-body { padding: .9rem .85rem 1rem; }
}

/* ── RTL polish for new accent-rail components ─────────── */
[dir="rtl"] .se-empty-state::before,
[dir="rtl"] .se-landing-card::before,
[dir="rtl"] .se-exam-step-card::before {
    border-start-start-radius: var(--t1-card-radius);
    border-end-start-radius: var(--t1-card-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}


/* ============================================================
   TASK #33 — Final unification pass
   Premium overrides for residual Bootstrap button chrome inside
   our four canonical action wrappers, plus token re-skin of the
   legacy raw-hex bootstrap-blue values still living in the older
   blocks above. STRICT no-behaviour-change refactor:
     · No selector targets a JS hook (verified: no .btn-* selector
       in student_exercise.js / main.js / teil1.js).
     · Bootstrap classes stay on the elements; only paint changes.
     · All scoped under .se-controls-bar / .se-landing-actions /
       .se-empty-state-actions / .se-postcheck-actions so unrelated
       Bootstrap buttons (sidebar, breadcrumbs, admin shells) are
       untouched.
   Adds nothing new to the JS contract surface.
   ============================================================ */

/* ── Unified secondary-action button language (token re-skin) ── */
.se-controls-bar .btn,
.se-landing-actions .btn,
.se-empty-state-actions .btn,
.se-postcheck-actions .btn {
    border-radius: var(--t1-chip-radius);
    font-weight: 600;
    letter-spacing: .01em;
    transition:
        background var(--t1-dur-fast) var(--t1-ease),
        border-color var(--t1-dur-fast) var(--t1-ease),
        color var(--t1-dur-fast) var(--t1-ease),
        box-shadow var(--t1-dur-med) var(--t1-ease),
        transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.se-controls-bar .btn:active,
.se-landing-actions .btn:active,
.se-empty-state-actions .btn:active,
.se-postcheck-actions .btn:active {
    transform: translateY(1px);
}

/* Primary — gradient indigo aligned with se-step-pill--current */
.se-controls-bar .btn-primary,
.se-landing-actions .btn-primary,
.se-empty-state-actions .btn-primary,
.se-postcheck-actions .btn-primary {
    background: linear-gradient(135deg, var(--t1-accent) 0%, var(--t1-accent-dk) 100%);
    border-color: var(--t1-accent-dk);
    color: #fff;
    box-shadow: 0 4px 14px var(--t1-accent-ring),
                inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.se-controls-bar .btn-primary:hover,
.se-controls-bar .btn-primary:focus-visible,
.se-landing-actions .btn-primary:hover,
.se-landing-actions .btn-primary:focus-visible,
.se-empty-state-actions .btn-primary:hover,
.se-empty-state-actions .btn-primary:focus-visible,
.se-postcheck-actions .btn-primary:hover,
.se-postcheck-actions .btn-primary:focus-visible {
    background: linear-gradient(135deg, var(--t1-accent-dk) 0%, #1e40af 100%);
    border-color: var(--t1-accent-dk);
    color: #fff;
    box-shadow: 0 6px 18px var(--t1-accent-ring),
                inset 0 -1px 0 rgba(0, 0, 0, .14);
}
.se-controls-bar .btn-primary:focus-visible,
.se-landing-actions .btn-primary:focus-visible,
.se-empty-state-actions .btn-primary:focus-visible,
.se-postcheck-actions .btn-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--t1-accent-ring),
                0 4px 14px var(--t1-accent-ring);
}
.se-controls-bar .btn-primary:disabled,
.se-landing-actions .btn-primary:disabled,
.se-empty-state-actions .btn-primary:disabled,
.se-postcheck-actions .btn-primary:disabled {
    background: var(--t1-bg-tint);
    border-color: var(--t1-border);
    color: var(--t1-text-muted);
    box-shadow: none;
    opacity: .8;
}

/* Outline-secondary — quiet token surface (Show solution / Try again / Prev) */
.se-controls-bar .btn-outline-secondary,
.se-landing-actions .btn-outline-secondary,
.se-empty-state-actions .btn-outline-secondary,
.se-postcheck-actions .btn-outline-secondary {
    background: var(--t1-bg-surface);
    border-color: var(--t1-border);
    color: var(--t1-text);
    box-shadow: var(--t1-shadow-xs);
}
.se-controls-bar .btn-outline-secondary:hover,
.se-controls-bar .btn-outline-secondary:focus-visible,
.se-landing-actions .btn-outline-secondary:hover,
.se-landing-actions .btn-outline-secondary:focus-visible,
.se-empty-state-actions .btn-outline-secondary:hover,
.se-empty-state-actions .btn-outline-secondary:focus-visible,
.se-postcheck-actions .btn-outline-secondary:hover,
.se-postcheck-actions .btn-outline-secondary:focus-visible {
    background: var(--t1-accent-tint);
    border-color: #c7dbff;
    color: var(--t1-accent-dk);
    box-shadow: var(--t1-shadow-sm);
}
.se-controls-bar .btn-outline-secondary:focus-visible,
.se-landing-actions .btn-outline-secondary:focus-visible,
.se-empty-state-actions .btn-outline-secondary:focus-visible,
.se-postcheck-actions .btn-outline-secondary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}

/* Outline-primary — solid-but-quiet token accent (Continue / Skip / Next) */
.se-controls-bar .btn-outline-primary,
.se-landing-actions .btn-outline-primary,
.se-empty-state-actions .btn-outline-primary,
.se-postcheck-actions .btn-outline-primary {
    background: var(--t1-bg-surface);
    border-color: var(--t1-accent);
    color: var(--t1-accent-dk);
    box-shadow: var(--t1-shadow-xs);
}
.se-controls-bar .btn-outline-primary:hover,
.se-controls-bar .btn-outline-primary:focus-visible,
.se-landing-actions .btn-outline-primary:hover,
.se-landing-actions .btn-outline-primary:focus-visible,
.se-empty-state-actions .btn-outline-primary:hover,
.se-empty-state-actions .btn-outline-primary:focus-visible,
.se-postcheck-actions .btn-outline-primary:hover,
.se-postcheck-actions .btn-outline-primary:focus-visible {
    background: var(--t1-accent-soft);
    border-color: var(--t1-accent-dk);
    color: var(--t1-accent-dk);
    box-shadow: var(--t1-shadow-sm);
}
.se-controls-bar .btn-outline-primary:focus-visible,
.se-landing-actions .btn-outline-primary:focus-visible,
.se-empty-state-actions .btn-outline-primary:focus-visible,
.se-postcheck-actions .btn-outline-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--t1-accent-ring);
}

/* Outline-success — used by post-check "View results"-style affordances */
.se-controls-bar .btn-outline-success,
.se-landing-actions .btn-outline-success,
.se-empty-state-actions .btn-outline-success,
.se-postcheck-actions .btn-outline-success {
    background: var(--t1-bg-surface);
    border-color: var(--t1-success);
    color: var(--t1-success-text);
    box-shadow: var(--t1-shadow-xs);
}
.se-controls-bar .btn-outline-success:hover,
.se-controls-bar .btn-outline-success:focus-visible,
.se-landing-actions .btn-outline-success:hover,
.se-landing-actions .btn-outline-success:focus-visible,
.se-empty-state-actions .btn-outline-success:hover,
.se-empty-state-actions .btn-outline-success:focus-visible,
.se-postcheck-actions .btn-outline-success:hover,
.se-postcheck-actions .btn-outline-success:focus-visible {
    background: var(--t1-success-tint);
    border-color: var(--t1-success);
    color: var(--t1-success-text);
    box-shadow: var(--t1-shadow-sm);
}

/* RTL — flip the back-arrow inside any premium-scoped button as well */
[dir="rtl"] .se-controls-bar .btn .bi-arrow-left::before,
[dir="rtl"] .se-landing-actions .btn .bi-arrow-left::before,
[dir="rtl"] .se-empty-state-actions .btn .bi-arrow-left::before,
[dir="rtl"] .se-postcheck-actions .btn .bi-arrow-left::before {
    content: "\F138"; /* bi-arrow-right */
}
[dir="rtl"] .se-controls-bar .btn .bi-arrow-right::before,
[dir="rtl"] .se-landing-actions .btn .bi-arrow-right::before,
[dir="rtl"] .se-empty-state-actions .btn .bi-arrow-right::before,
[dir="rtl"] .se-postcheck-actions .btn .bi-arrow-right::before {
    content: "\F12F"; /* bi-arrow-left */
}

/* Tablet portrait — give the unified button cluster room to breathe */
@media (min-width: 768px) and (max-width: 991.98px) {
    .se-controls-bar .btn,
    .se-landing-actions .btn,
    .se-empty-state-actions .btn,
    .se-postcheck-actions .btn {
        padding-block: .55rem;
    }
}
@media (max-width: 575.98px) {
    .se-landing-actions .btn,
    .se-empty-state-actions .btn,
    .se-postcheck-actions .btn {
        padding-inline: .9rem;
    }
}

/* ── Legacy hex hygiene — token re-skin for the older blocks ──
   Re-targets the same selectors used in lines 1-300 and 350-720
   so the raw bootstrap-blue values get aligned with the t1 palette
   in modern browsers. Kept in a single block at the end so any
   diff stays scoped and easy to revert. */

/* Hover/active blue tints → token accent surface */
.se-mcq-option:hover                  { background: var(--t1-accent-tint); }
.se-mcq-option:focus-within           { background: var(--t1-accent-soft); }
.se-mcq-option.is-checked             { background: var(--t1-accent-soft); }
.se-mcq-option:active                 { background: var(--t1-accent-soft); border-color: var(--t1-accent); }
.se-mcq-option.is-checked:active      { background: var(--t1-accent-soft); }

.se-chip                              { background: var(--t1-bg-surface); }
.se-chip:hover                        { background: var(--t1-accent-tint); border-color: #c7dbff; }
.se-chip.is-selected                  { color: #fff; }
.se-chip.is-selected:hover            { background: var(--t1-accent-dk); border-color: var(--t1-accent-dk); color: #fff; }
.se-chip:active                       { background: var(--t1-accent-soft); border-color: var(--t1-accent); color: var(--t1-accent-dk); }
.se-chip.is-selected:active           { background: var(--t1-accent-dk); border-color: var(--t1-accent-dk); color: #fff; }

.blank-slot:hover                     { background: var(--t1-accent-tint); border-color: #c7dbff; }
.blank-slot.filled                    { background: var(--t1-accent-soft); color: var(--t1-accent-dk); }
.blank-slot:active                    { background: var(--t1-accent-soft); border-color: var(--t1-accent); }
.blank-slot.filled:active             { background: var(--t1-accent-soft); border-color: var(--t1-accent); color: var(--t1-accent-dk); }

#word-bank .word-btn:active           { background: var(--t1-accent-soft); border-color: var(--t1-accent); color: var(--t1-accent-dk); }

.se-divider                           { background: var(--t1-border); }

/* Bootstrap review-state list-group-item-danger uses raw rose; align to token */
.se-mcq-option.list-group-item-danger { background: var(--t1-danger-tint); border-color: #fecaca; }
.se-mcq-option.list-group-item-success{ background: var(--t1-success-tint); border-color: #bbf7d0; }

/* Mobile-sticky controls bar surface — adopt token */
@media (max-width: 575.98px) {
    .se-controls-bar { background: var(--t1-bg-surface); }
}

/* End Task #33 */

/* ============================================================
   Task #34 — Final Premium Completion Pass
   --------------------------------------------------------------
   Adds:
     1. Canonical .se-btn button system (additive skin layered on
        top of Bootstrap .btn so existing JS selectors and POST
        contracts remain untouched).
     2. .se-banner-close — premium dismiss inside .se-banner.
     3. Word-bank chip base reskin (replaces visible
        .btn-outline-secondary look on Sprachteil 2 word buttons).
     4. Mobile (≤575px) controls layout reinforcement so the
        primary action gets full-width prominence and tap targets
        stay ≥44px.
     5. Tablet portrait (768–991px) refinement layer.
     6. RTL final polish (arrows, chips, numeric strip, counter).
     7. Light premium hover/focus polish on landing & lesen cards.

   Strictly visual. No logic, no contracts, no behavior change.
   ============================================================ */

/* ── 1. Canonical .se-btn system ──────────────────────────── */
.se-btn,
/* Auto-skin commonly-used Bootstrap pairs inside premium wrappers
   so we don't have to touch every single .btn instance. The .se-btn
   class is also explicitly added to swept buttons for clarity. */
.se-controls-bar      .btn,
.se-postcheck-actions .btn,
.se-landing-actions   .btn,
.se-empty-state-actions .btn,
.se-lesen-card        .btn,
.se-lesen-modal       .btn {
    --se-btn-bg:        var(--t1-accent, #2563eb);
    --se-btn-bg-hover:  var(--t1-accent-dk, #1d4ed8);
    --se-btn-fg:        #ffffff;
    --se-btn-border:    transparent;
    --se-btn-shadow:    0 1px 2px rgba(15, 23, 42, .06),
                        0 1px 3px rgba(37, 99, 235, .15);
    --se-btn-shadow-hv: 0 4px 12px rgba(37, 99, 235, .22),
                        0 2px 4px rgba(15, 23, 42, .08);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .55rem 1.05rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .005em;
    border-radius: .65rem;
    border: 1px solid var(--se-btn-border);
    background: var(--se-btn-bg);
    color: var(--se-btn-fg);
    box-shadow: var(--se-btn-shadow);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease,
                border-color   .18s ease,
                box-shadow     .18s ease,
                transform      .12s ease,
                color          .18s ease;
}
.se-btn:hover,
.se-controls-bar      .btn:hover,
.se-postcheck-actions .btn:hover,
.se-landing-actions   .btn:hover,
.se-empty-state-actions .btn:hover,
.se-lesen-card        .btn:hover,
.se-lesen-modal       .btn:hover {
    background: var(--se-btn-bg-hover);
    color: var(--se-btn-fg);
    box-shadow: var(--se-btn-shadow-hv);
    text-decoration: none;
}
.se-btn:focus-visible,
.se-controls-bar      .btn:focus-visible,
.se-postcheck-actions .btn:focus-visible,
.se-landing-actions   .btn:focus-visible,
.se-empty-state-actions .btn:focus-visible,
.se-lesen-card        .btn:focus-visible,
.se-lesen-modal       .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25),
                var(--se-btn-shadow-hv);
}
.se-btn:active,
.se-controls-bar      .btn:active,
.se-postcheck-actions .btn:active,
.se-landing-actions   .btn:active,
.se-empty-state-actions .btn:active,
.se-lesen-card        .btn:active,
.se-lesen-modal       .btn:active {
    transform: translateY(1px);
}
.se-btn[disabled],
.se-btn:disabled,
.se-controls-bar .btn[disabled],
.se-landing-actions .btn[disabled],
.se-lesen-card .btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Variants — explicit modifiers (preferred for new markup) */
.se-btn--primary {
    --se-btn-bg:       var(--t1-accent, #2563eb);
    --se-btn-bg-hover: var(--t1-accent-dk, #1d4ed8);
    --se-btn-fg:       #ffffff;
    --se-btn-border:   transparent;
}
.se-btn--secondary,
.se-btn--ghost {
    --se-btn-bg:       transparent;
    --se-btn-bg-hover: var(--t1-accent-tint, #eff4ff);
    --se-btn-fg:       var(--t1-text, #1e293b);
    --se-btn-border:   var(--t1-border, #e2e8f0);
    --se-btn-shadow:   none;
    --se-btn-shadow-hv: 0 1px 2px rgba(15, 23, 42, .06);
}
.se-btn--secondary:hover,
.se-btn--ghost:hover {
    color: var(--t1-accent-dk, #1d4ed8);
    border-color: var(--t1-accent, #2563eb);
}
.se-btn--retry,
.se-btn--solution {
    --se-btn-bg:       transparent;
    --se-btn-bg-hover: var(--t1-accent-tint, #eff4ff);
    --se-btn-fg:       var(--t1-accent-dk, #1d4ed8);
    --se-btn-border:   #c7dbff;
    --se-btn-shadow:   none;
    --se-btn-shadow-hv: 0 1px 2px rgba(15, 23, 42, .06);
}
.se-btn--danger {
    --se-btn-bg:       #dc2626;
    --se-btn-bg-hover: #b91c1c;
    --se-btn-fg:       #ffffff;
    --se-btn-border:   transparent;
}
.se-btn--upsell {
    --se-btn-bg:       #f59e0b;
    --se-btn-bg-hover: #d97706;
    --se-btn-fg:       #ffffff;
    --se-btn-border:   transparent;
}
.se-btn--success {
    --se-btn-bg:       var(--t1-success, #16a34a);
    --se-btn-bg-hover: var(--t1-success-dk, #15803d);
    --se-btn-fg:       #ffffff;
    --se-btn-border:   transparent;
}

/* Sizes */
.se-btn--sm {
    min-height: 2.15rem;
    padding: .4rem .8rem;
    font-size: .85rem;
    border-radius: .55rem;
}
.se-btn--lg {
    min-height: 3rem;
    padding: .75rem 1.4rem;
    font-size: 1.05rem;
    border-radius: .75rem;
}

/* Auto-map common Bootstrap variants when the button sits inside a
   premium wrapper so we don't need to chase every legacy class. */
.se-controls-bar .btn-outline-secondary,
.se-postcheck-actions .btn-outline-secondary,
.se-landing-actions .btn-outline-secondary,
.se-empty-state-actions .btn-outline-secondary,
.se-lesen-card .btn-outline-secondary {
    --se-btn-bg:       transparent;
    --se-btn-bg-hover: var(--t1-accent-tint, #eff4ff);
    --se-btn-fg:       var(--t1-text, #1e293b);
    --se-btn-border:   var(--t1-border, #e2e8f0);
    --se-btn-shadow:   none;
    --se-btn-shadow-hv: 0 1px 2px rgba(15, 23, 42, .06);
}
.se-controls-bar .btn-outline-primary,
.se-postcheck-actions .btn-outline-primary,
.se-landing-actions .btn-outline-primary,
.se-empty-state-actions .btn-outline-primary,
.se-lesen-card .btn-outline-primary,
.se-lesen-modal .btn-outline-primary {
    --se-btn-bg:       transparent;
    --se-btn-bg-hover: var(--t1-accent-tint, #eff4ff);
    --se-btn-fg:       var(--t1-accent-dk, #1d4ed8);
    --se-btn-border:   #c7dbff;
    --se-btn-shadow:   none;
    --se-btn-shadow-hv: 0 1px 2px rgba(15, 23, 42, .06);
}
.se-controls-bar .btn-outline-warning,
.se-lesen-card  .btn-outline-warning {
    --se-btn-bg:       transparent;
    --se-btn-bg-hover: rgba(245, 158, 11, .12);
    --se-btn-fg:       #b45309;
    --se-btn-border:   #fcd34d;
    --se-btn-shadow:   none;
    --se-btn-shadow-hv: 0 1px 2px rgba(15, 23, 42, .06);
}

/* Saving state — the existing .se-saving JS appends a spinner; make
   sure it still reads correctly with the new se-btn skin. */
.se-saving .se-btn[data-saving-applied],
.se-saving button[data-saving-applied] {
    pointer-events: none;
    opacity: .85;
}

/* ── 2. Premium banner close ──────────────────────────────── */
.se-banner .btn-close,
.se-banner .se-banner-close {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: inherit;
    opacity: .55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
    /* Override Bootstrap's background-image close icon to use a clean glyph */
    background-image: none;
    position: relative;
}
.se-banner .btn-close::before,
.se-banner .se-banner-close::before {
    content: "";
    width: .85rem;
    height: .85rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 2.5l11 11M13.5 2.5l-11 11' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
    display: inline-block;
}
.se-banner .btn-close:hover,
.se-banner .se-banner-close:hover {
    background-color: rgba(15, 23, 42, .08);
    opacity: 1;
}
.se-banner .btn-close:focus-visible,
.se-banner .se-banner-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .35);
    opacity: 1;
}
.se-banner .btn-close:active,
.se-banner .se-banner-close:active { transform: scale(.94); }

/* ── 3. Word-bank chip premium base ──────────────────────── */
/* The Sprachteil 2 word-bank buttons use .word-btn + (in interactive
   state) .btn-outline-secondary. Reskin the interactive base so it
   no longer reads as raw Bootstrap. State classes (.is-correct /
   .is-wrong / .is-solution / .is-neutral-locked) are unchanged and
   continue to win via cascade order. */
#word-bank .word-btn,
.word-bank .word-btn {
    background: var(--t1-bg-surface, #ffffff);
    border: 1px solid var(--t1-border, #e2e8f0);
    color: var(--t1-text, #1e293b);
    border-radius: .6rem;
    padding: .55rem .85rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: background-color .15s ease,
                border-color   .15s ease,
                color          .15s ease,
                box-shadow     .15s ease,
                transform      .12s ease;
}
#word-bank .word-btn.btn-outline-secondary,
.word-bank .word-btn.btn-outline-secondary {
    /* Neutralize the bootstrap outline-secondary look on the base
       interactive state. */
    background: var(--t1-bg-surface, #ffffff);
    border-color: var(--t1-border, #e2e8f0);
    color: var(--t1-text, #1e293b);
}
#word-bank .word-btn:hover:not(:disabled),
.word-bank .word-btn:hover:not(:disabled) {
    background: var(--t1-accent-tint, #eff4ff);
    border-color: #c7dbff;
    color: var(--t1-accent-dk, #1d4ed8);
    box-shadow: 0 2px 6px rgba(37, 99, 235, .12);
}
#word-bank .word-btn:focus-visible,
.word-bank .word-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* ── 4. Mobile (≤575px) controls reinforcement ───────────── */
@media (max-width: 575.98px) {
    .se-controls-bar {
        gap: .55rem;
        flex-wrap: wrap;
    }
    /* Primary actions get prominence on row 1 */
    .se-controls-bar > button[type="submit"][name="correction"],
    .se-controls-bar > button[type="submit"]:not([name]) {
        flex: 1 1 100%;
        order: -1;
        min-height: 2.85rem;
        font-size: 1rem;
    }
    .se-controls-bar .ms-auto {
        margin-inline-start: 0 !important;
        width: 100%;
        justify-content: stretch;
    }
    .se-controls-bar .ms-auto > .btn,
    .se-controls-bar .ms-auto > .se-btn {
        flex: 1 1 0;
        min-height: 2.6rem;
    }
    /* Landing / empty / postcheck — stack but keep the primary on top */
    .se-landing-actions,
    .se-empty-state-actions,
    .se-postcheck-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
    .se-landing-actions   .btn,
    .se-empty-state-actions .btn,
    .se-postcheck-actions .btn {
        width: 100%;
        min-height: 2.85rem;
    }
}

/* ── 5. Tablet portrait (768–991px) refinement layer ────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .se-step-list {
        gap: .35rem;
    }
    .se-timer-card,
    .se-progress-meta {
        font-size: .95rem;
    }
    .se-landing-card {
        padding: 2rem 1.5rem;
    }
    .se-controls-bar {
        gap: .5rem;
    }
}

/* ── 6. RTL final polish ──────────────────────────────────── */
[dir="rtl"] .se-controls-bar .ms-auto {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}
[dir="rtl"] .se-back-link .bi-arrow-left::before { content: "\F138"; /* bi-arrow-right */ }
[dir="rtl"] .bi-arrow-right.se-rtl-flip::before  { content: "\F12F"; /* bi-arrow-left  */ }
[dir="rtl"] .bi-arrow-left.se-rtl-flip::before   { content: "\F138"; /* bi-arrow-right */ }
[dir="rtl"] .se-postcheck-actions .bi-arrow-counterclockwise { transform: scaleX(-1); }
[dir="rtl"] #word-bank,
[dir="rtl"] .word-bank { direction: rtl; }
[dir="rtl"] .se-answered-count,
[dir="rtl"] .t1-answered-count { direction: ltr; } /* numeric pills stay LTR */

/* ── 7. Lesen hub — premium card hover polish ───────────── */
.se-lesen-card {
    background: #fff;
    border: 1px solid var(--t1-border, #e2e8f0);
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
    overflow: hidden;
}
.se-lesen-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08),
                0 2px 6px rgba(15, 23, 42, .05);
    border-color: #c7dbff;
    transform: translateY(-2px);
}
.se-lesen-upsell {
    background: linear-gradient(135deg,
                rgba(245, 158, 11, .08),
                rgba(245, 158, 11, .02));
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: .85rem;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* End Task #34 ============================================ */

/* ============================================================
   Medium Premium Pass — sticky mobile action bar, premium CTA,
   attention pulse, calmer SP2 result tones.
   Additive layer. Token-driven, RTL/reduced-motion safe.
   ============================================================ */

/* ── Premium primary CTA variant (additive) ──────────────── */
.se-btn.se-btn--premium {
    background-image: linear-gradient(135deg,
        var(--t1-accent, var(--bs-primary, #2563eb)) 0%,
        var(--t1-accent-dk, #1d4ed8) 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px -8px color-mix(in oklch,
                  var(--t1-accent, var(--bs-primary, #2563eb)) 70%, transparent),
                inset 0 -1px 0 rgba(0,0,0,.12);
    transition: transform var(--t1-dur-fast, .15s) var(--t1-ease, ease),
                box-shadow var(--t1-dur-fast, .15s) var(--t1-ease, ease),
                background-image var(--t1-dur-fast, .15s) var(--t1-ease, ease);
}
.se-btn.se-btn--premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in oklch,
                  var(--t1-accent, var(--bs-primary, #2563eb)) 80%, transparent),
                inset 0 -1px 0 rgba(0,0,0,.12);
}
.se-btn.se-btn--premium:focus-visible {
    outline: 2px solid var(--t1-accent-ring, rgba(37,99,235,.45));
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .se-btn.se-btn--premium { transition: none; }
    .se-btn.se-btn--premium:hover { transform: none; }
}

/* ── Attention pulse for first-unanswered scroll target ──── */
.se-attention {
    outline: 2px solid color-mix(in oklch,
                  var(--t1-accent, var(--bs-primary, #2563eb)) 60%, transparent);
    outline-offset: 4px;
    border-radius: var(--t1-radius-md, .5rem);
    transition: outline-color .8s ease;
}
@media (prefers-reduced-motion: reduce) {
    .se-attention { transition: none; }
}

/* ── Sticky mobile action bar ────────────────────────────── */
.se-mobile-actionbar {
    display: none;
}
@media (max-width: 575.98px) {
    .se-mobile-actionbar {
        position: fixed;
        inset-inline-start: 0;
        inset-inline-end: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .6rem .85rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--t1-bg-surface, #ffffff);
        border-top: 1px solid var(--t1-border, #e5e7eb);
        box-shadow: 0 -8px 22px -12px rgba(15,23,42,.18);
        font-size: .95rem;
    }
    .se-mobile-actionbar[aria-hidden="true"]:empty { display: none; }
    .se-mobile-actionbar .se-mobile-actionbar-counter {
        flex: 0 1 auto;
        min-width: 0;
        color: var(--t1-text-muted, #64748b);
        font-size: .82rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .se-mobile-actionbar .se-mobile-actionbar-spacer { flex: 1 1 auto; }
    .se-mobile-actionbar .se-btn,
    .se-mobile-actionbar .btn {
        flex: 0 0 auto;
        margin: 0;
    }
    body.has-se-mobile-actionbar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Calmer SP2 result tones (cloze pills + blank tiles) ── */
@supports (color: color-mix(in oklch, red, blue)) {
    .se-blank-tile.is-correct {
        background: color-mix(in oklch,
                      var(--t1-success, #16a34a) 12%,
                      var(--t1-bg-surface, #ffffff));
        border-color: color-mix(in oklch,
                      var(--t1-success, #16a34a) 38%, transparent);
    }
    .se-blank-tile.is-wrong {
        background: color-mix(in oklch,
                      var(--t1-danger, #dc2626) 10%,
                      var(--t1-bg-surface, #ffffff));
        border-color: color-mix(in oklch,
                      var(--t1-danger, #dc2626) 36%, transparent);
    }
    .se-cloze-pill.is-correct {
        background: color-mix(in oklch,
                      var(--t1-success, #16a34a) 14%,
                      var(--t1-bg-surface, #ffffff));
        color: var(--t1-success-text, #14532d);
        border-color: color-mix(in oklch,
                      var(--t1-success, #16a34a) 40%, transparent);
        box-shadow: none;
    }
    .se-cloze-pill.is-wrong {
        background: color-mix(in oklch,
                      var(--t1-danger, #dc2626) 12%,
                      var(--t1-bg-surface, #ffffff));
        color: var(--t1-danger-text, #7f1d1d);
        border-color: color-mix(in oklch,
                      var(--t1-danger, #dc2626) 38%, transparent);
        box-shadow: none;
    }
    .se-cloze-pill.se-cloze-pill--soft.is-correct {
        background: color-mix(in oklch,
                      var(--t1-success, #16a34a) 9%,
                      var(--t1-bg-surface, #ffffff));
        color: var(--t1-success-text, #14532d);
        border-color: color-mix(in oklch,
                      var(--t1-success, #16a34a) 30%, transparent);
    }
}
/* End Medium Premium Pass ===================================== */

/* ============================================================
   Lesen Teil 3 — advertisement-matching redesign (.t3-*)
   These rules only ever apply on student/teil3.php; the markup
   lives exclusively there, so they are inert on other pages.
   ============================================================ */
.t3-keyword-note{
    display:flex;align-items:center;gap:.5rem;
    margin:0 0 1rem;padding:.6rem .9rem;
    font-size:.86rem;color:var(--t1-text-muted,#64748b);
    background:var(--t1-accent-tint,#f6faff);
    border:1px solid var(--t1-border,#e2e8f0);
    border-radius:12px;
}
.t3-keyword-note i{color:var(--t1-accent,#2563eb);}

.t3-heading{
    display:flex;align-items:center;gap:.6rem;
    margin:0 0 1rem;font-size:1.05rem;font-weight:700;
    color:var(--t1-text,#1e293b);
}
.t3-heading-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:2rem;height:2rem;border-radius:10px;font-size:.95rem;
    color:var(--t1-accent,#2563eb);background:var(--t1-accent-soft,#eef4ff);
}
.t3-heading-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.6rem;height:1.6rem;padding:0 .5rem;border-radius:999px;
    font-size:.8rem;font-weight:700;
    color:var(--t1-text-muted,#64748b);
    background:var(--t1-bg-tint,#f1f5f9);
    border:1px solid var(--t1-border,#e2e8f0);
}

.t3-ads{margin-bottom:1.75rem;}
.t3-ads-hint{
    display:flex;align-items:center;gap:.5rem;
    margin:-.35rem 0 1rem;font-size:.84rem;
    color:var(--t1-text-muted,#64748b);
}
.t3-ads-hint i{color:var(--t1-accent,#2563eb);}

.t3-ads-grid{
    display:grid;gap:1rem;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
}

.t3-ad{
    display:flex;flex-direction:column;
    background:var(--t1-bg-surface,#fff);
    border:1.5px solid var(--t1-border,#e2e8f0);
    border-radius:var(--t1-card-radius,16px);
    box-shadow:var(--t1-shadow-sm,0 2px 4px rgba(15,23,42,.04));
    overflow:hidden;
    transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.t3-ad[role="button"]{cursor:grab;}
.t3-ad[role="button"]:hover{
    border-color:var(--t1-accent,#2563eb);
    box-shadow:0 8px 22px rgba(37,99,235,.12);
    transform:translateY(-2px);
}
.t3-ad[role="button"]:focus-visible{
    outline:none;border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-ad.is-dragging{opacity:.55;transform:scale(.98);cursor:grabbing;}
.t3-ad.is-linked{border-color:var(--t1-accent,#2563eb);}
.t3-ad.is-shake{animation:t3-shake .4s ease;}
@keyframes t3-shake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-4px);}
    75%{transform:translateX(4px);}
}

.t3-ad-head{
    display:flex;align-items:center;gap:.6rem;
    padding:.6rem .75rem;
    border-bottom:1px solid var(--t1-border,#e2e8f0);
    background:var(--t1-accent-tint,#f6faff);
}
.t3-ad-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.9rem;height:1.9rem;flex:0 0 auto;border-radius:9px;
    font-weight:800;font-size:.95rem;color:#fff;
    background:var(--t1-accent,#2563eb);
}
.t3-ad-badge--x{background:#64748b;}
.t3-ad-name{font-weight:700;font-size:.9rem;color:var(--t1-text,#1e293b);}
.t3-ad-grip{margin-inline-start:auto;color:var(--t1-text-muted,#94a3b8);font-size:1rem;}
.t3-ad-links{
    display:inline-flex;flex-wrap:wrap;gap:.25rem;
    margin-inline-start:auto;
}
.t3-ad-links + .t3-ad-grip{margin-inline-start:.4rem;}
.t3-ad-link{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;
    font-size:.72rem;font-weight:800;color:#fff;
    background:var(--t1-accent,#2563eb);
}
.t3-ad-body{
    padding:.75rem .85rem;font-size:.88rem;line-height:1.55;
    color:var(--t1-text,#1e293b);white-space:pre-line;
}
.t3-ad-body--none{
    display:flex;align-items:center;gap:.55rem;
    color:var(--t1-text-muted,#64748b);font-style:italic;
}
.t3-ad-body--none i{font-size:1.15rem;color:#94a3b8;}
.t3-ad--none{border-style:dashed;}
.t3-ad--none .t3-ad-head{background:var(--t1-bg-tint,#f1f5f9);}

/* correct highlight (checked mode) */
.t3-ad.is-correct{border-color:var(--t1-success,#15803d);}
.t3-ad.is-correct .t3-ad-head{background:var(--t1-success-soft,#dcfce7);}
.t3-ad.is-correct .t3-ad-badge{background:var(--t1-success,#15803d);}

/* statements */
.t3-stmts-list{display:flex;flex-direction:column;gap:.75rem;}
.t3-stmt{
    background:var(--t1-bg-surface,#fff);
    border:1.5px solid var(--t1-border,#e2e8f0);
    border-radius:var(--t1-card-radius,16px);
    box-shadow:var(--t1-shadow-sm,0 2px 4px rgba(15,23,42,.04));
    padding:.9rem 1rem;
    transition:border-color .18s ease,box-shadow .18s ease;
}
.t3-stmt.is-active{
    border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-stmt.is-filled{border-color:var(--t1-accent,#2563eb);}
.t3-stmt-main{
    display:flex;align-items:flex-start;gap:.65rem;flex-wrap:wrap;
}
.t3-stmt-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.85rem;height:1.85rem;flex:0 0 auto;border-radius:9px;
    font-weight:800;font-size:.9rem;
    color:var(--t1-accent,#2563eb);background:var(--t1-accent-soft,#eef4ff);
}
.t3-stmt-text{
    flex:1 1 240px;min-width:0;
    font-size:.92rem;line-height:1.55;color:var(--t1-text,#1e293b);
    padding-top:.15rem;
}

/* answer slot */
.t3-stmt-answer{
    display:flex;align-items:center;gap:.5rem;
    margin-top:.7rem;padding-inline-start:2.5rem;
}
.t3-slot{
    display:inline-flex;align-items:center;gap:.55rem;
    min-height:2.6rem;padding:.4rem .8rem;
    border:1.5px dashed var(--t1-border,#cbd5e1);
    border-radius:11px;background:var(--t1-bg-tint,#f8fafc);
    color:var(--t1-text-muted,#64748b);font-size:.88rem;font-weight:600;
    cursor:pointer;transition:all .16s ease;
}
.t3-slot:hover{border-color:var(--t1-accent,#2563eb);color:var(--t1-accent,#2563eb);}
.t3-slot:focus-visible{
    outline:none;border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-slot.is-dropTarget{
    border-style:solid;border-color:var(--t1-accent,#2563eb);
    background:var(--t1-accent-soft,#eef4ff);color:var(--t1-accent-dk,#1d4ed8);
}
.t3-stmt.is-filled .t3-slot{
    border-style:solid;border-color:var(--t1-accent,#2563eb);
    background:var(--t1-accent-soft,#eef4ff);
}
.t3-slot-empty{display:inline-flex;align-items:center;gap:.45rem;}
.t3-slot-filled{display:inline-flex;align-items:center;gap:.5rem;}
.t3-slot-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.55rem;height:1.55rem;border-radius:7px;
    font-weight:800;font-size:.82rem;color:#fff;
    background:var(--t1-accent,#2563eb);
}
.t3-slot-name{font-weight:700;color:var(--t1-accent-dk,#1d4ed8);}
.t3-slot-clear{
    display:inline-flex;align-items:center;justify-content:center;
    width:2rem;height:2rem;flex:0 0 auto;border:none;border-radius:8px;
    background:transparent;color:var(--t1-text-muted,#94a3b8);
    cursor:pointer;transition:all .15s ease;
}
.t3-slot-clear:hover{background:var(--t1-danger-soft,#fee2e2);color:var(--t1-danger,#dc2626);}

/* checked-mode statement results */
.t3-stmt--result.is-correct{border-inline-start:4px solid var(--t1-success,#15803d);}
.t3-stmt--result.is-wrong{border-inline-start:4px solid var(--t1-danger,#dc2626);}
.t3-stmt-verdict{
    display:inline-flex;align-items:center;gap:.35rem;
    margin-inline-start:auto;padding:.25rem .6rem;border-radius:999px;
    font-size:.78rem;font-weight:700;white-space:nowrap;
}
.t3-stmt-verdict.is-correct{color:var(--t1-success-text,#14532d);background:var(--t1-success-soft,#dcfce7);}
.t3-stmt-verdict.is-wrong{color:var(--t1-danger-text,#7f1d1d);background:var(--t1-danger-soft,#fee2e2);}
.t3-stmt-answers{
    display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
    margin-top:.7rem;padding-inline-start:2.5rem;
}
.t3-ans-pill{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.35rem .7rem;border-radius:10px;
    font-size:.84rem;font-weight:600;
    border:1px solid var(--t1-border,#e2e8f0);
    background:var(--t1-bg-surface,#fff);color:var(--t1-text,#1e293b);
}
.t3-ans-pill.is-correct{border-color:var(--t1-success,#86efac);background:var(--t1-success-soft,#dcfce7);color:var(--t1-success-text,#14532d);}
.t3-ans-pill.is-wrong{border-color:var(--t1-danger,#fca5a5);background:var(--t1-danger-soft,#fee2e2);color:var(--t1-danger-text,#7f1d1d);}
.t3-ans-lbl{font-weight:700;}
.t3-ans-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:6px;
    font-weight:800;font-size:.78rem;color:#fff;background:currentColor;
}
.t3-ans-pill .t3-ans-badge{color:#fff;}
.t3-ans-pill.is-correct .t3-ans-badge{background:var(--t1-success,#15803d);}
.t3-ans-pill.is-wrong .t3-ans-badge{background:var(--t1-danger,#dc2626);}
.t3-ans-arrow{color:var(--t1-text-muted,#94a3b8);}
.t3-explanation{margin-top:.75rem;margin-inline-start:2.5rem;}
.t3-controls{margin-top:1.5rem;}

@media (max-width:575.98px){
    .t3-ads-grid{grid-template-columns:1fr;}
    .t3-stmt-answer,.t3-stmt-answers,.t3-explanation{padding-inline-start:0;}
    .t3-stmt-verdict{margin-inline-start:0;}
}

/* RTL */
[dir="rtl"] .t3-ad-grip,[dir="rtl"] .t3-ad-links{margin-inline-start:auto;}
[dir="rtl"] .t3-stmt-verdict{margin-inline-start:auto;}

@media (prefers-reduced-motion:reduce){
    .t3-ad,.t3-slot,.t3-stmt{transition:none;}
    .t3-ad[role="button"]:hover{transform:none;}
    .t3-ad.is-shake{animation:none;}
}

/* ============================================================
   Lesen Teil 3 — v2 side-by-side board (Anzeigen ⇦ Situationen)
   Overrides the earlier single-column .t3-* rules. Statements
   are draggable; ad cards are drop targets; assignments render
   as chips inside the ad cards.
   ============================================================ */
.t3-board{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,360px);
    gap:1.5rem;align-items:start;
    margin-bottom:1.5rem;
}
.t3-ads{margin-bottom:0;}

/* right side panel */
.t3-stmts-panel{min-width:0;}
.t3-stmts-panel.is-sticky{position:sticky;top:1rem;}
.t3-stmts-panel.is-sticky .t3-panel-inner{
    max-height:calc(100vh - 2rem);
    overflow:auto;overflow-x:hidden;
    padding:.9rem;padding-inline-end:1rem;
    border:1px solid var(--t1-border,#e2e8f0);
    border-radius:var(--t1-card-radius,16px);
    background:var(--t1-accent-tint,#f6faff);
    box-shadow:var(--t1-shadow-sm,0 2px 4px rgba(15,23,42,.04));
}
.t3-stmts-panel .t3-heading{margin-bottom:.5rem;}
.t3-stmts-panel .t3-ads-hint{margin:0 0 .85rem;}

/* ad card = drop target */
.t3-ad[data-t3-drop]{cursor:pointer;}
.t3-ad[data-t3-drop]:hover{
    border-color:var(--t1-accent,#2563eb);
    box-shadow:0 8px 22px rgba(37,99,235,.12);
    transform:translateY(-2px);
}
.t3-ad[data-t3-drop]:focus-visible{
    outline:none;border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-ad.is-dropTarget{
    border-color:var(--t1-accent,#2563eb);border-style:solid;
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-ad.has-assigned{border-color:var(--t1-accent,#2563eb);}

/* assigned-chips area inside an ad card */
.t3-ad-assigned{
    display:flex;flex-direction:column;gap:.4rem;
    padding:.6rem .75rem;
    border-top:1px dashed var(--t1-border,#e2e8f0);
    background:var(--t1-accent-tint,#f6faff);
}
.t3-ad-drophint{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    padding:.35rem;font-size:.8rem;font-style:italic;
    color:var(--t1-text-muted,#94a3b8);
}
.t3-ad.is-dropTarget .t3-ad-drophint{color:var(--t1-accent,#2563eb);font-style:normal;}

.t3-chip{
    display:flex;align-items:center;gap:.5rem;
    padding:.4rem .5rem;border-radius:10px;
    background:var(--t1-bg-surface,#fff);
    border:1px solid var(--t1-accent-soft,#dbe7ff);
    box-shadow:0 1px 2px rgba(15,23,42,.05);
    animation:t3-chip-in .18s ease;
}
@keyframes t3-chip-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.t3-chip-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.5rem;height:1.5rem;flex:0 0 auto;border-radius:7px;
    font-weight:800;font-size:.8rem;color:#fff;
    background:var(--t1-accent,#2563eb);
}
.t3-chip-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.2;}
.t3-chip-title{font-size:.76rem;font-weight:700;color:var(--t1-accent-dk,#1d4ed8);}
.t3-chip-text{
    font-size:.78rem;color:var(--t1-text-muted,#64748b);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.t3-chip-remove{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.6rem;height:1.6rem;flex:0 0 auto;border:none;border-radius:7px;
    background:transparent;color:var(--t1-text-muted,#94a3b8);
    cursor:pointer;transition:all .15s ease;
}
.t3-chip-remove:hover{background:var(--t1-danger-soft,#fee2e2);color:var(--t1-danger,#dc2626);}

/* draggable Situation card */
.t3-stmt[data-t3-stmt]{cursor:grab;}
.t3-stmt[data-t3-stmt]:hover{
    border-color:var(--t1-accent,#2563eb);
    box-shadow:0 4px 14px rgba(37,99,235,.1);
}
.t3-stmt[data-t3-stmt]:focus-visible{
    outline:none;border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
}
.t3-stmt.is-dragging{opacity:.5;cursor:grabbing;}
.t3-stmt.is-active{
    border-color:var(--t1-accent,#2563eb);
    box-shadow:0 0 0 3px var(--t1-accent-soft,#eef4ff);
    background:var(--t1-accent-tint,#f6faff);
}
.t3-stmt.is-assigned{background:var(--t1-success-soft,#f0fdf4);border-color:#bbf7d0;}
.t3-stmt .t3-stmt-grip{margin-inline-start:auto;color:var(--t1-text-muted,#cbd5e1);font-size:1rem;}
.t3-stmt[data-t3-stmt] .t3-stmt-text{-webkit-line-clamp:4;line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}

.t3-stmt-foot{
    display:flex;align-items:center;gap:.5rem;
    margin-top:.6rem;padding-inline-start:2.5rem;
}
.t3-stmt-status{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.2rem .55rem;border-radius:999px;
    font-size:.78rem;font-weight:600;
    color:var(--t1-text-muted,#94a3b8);
    background:var(--t1-bg-tint,#f1f5f9);
}
.t3-stmt-status.is-set{
    color:var(--t1-accent-dk,#1d4ed8);
    background:var(--t1-accent-soft,#eef4ff);
}
.t3-stmt-status-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:5px;
    font-weight:800;font-size:.72rem;color:#fff;background:var(--t1-accent,#2563eb);
}
.t3-stmt-clear{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.8rem;height:1.8rem;flex:0 0 auto;border:none;border-radius:7px;
    background:transparent;color:var(--t1-text-muted,#94a3b8);
    cursor:pointer;transition:all .15s ease;
}
.t3-stmt-clear:hover{background:var(--t1-danger-soft,#fee2e2);color:var(--t1-danger,#dc2626);}

/* review mode: keep board side-by-side but no sticky/scroll box */
.t3-board--review .t3-stmts-panel .t3-panel-inner{max-height:none;overflow:visible;}

/* ── Tablet / mobile ─────────────────────────────────── */
@media (max-width:991.98px){
    .t3-board{grid-template-columns:1fr;gap:1rem;}
    /* Situationen become a sticky drawer pinned at the top */
    .t3-stmts-panel{order:-1;}
    .t3-stmts-panel.is-sticky{top:0;z-index:30;}
    .t3-stmts-panel.is-sticky .t3-panel-inner{
        max-height:44vh;
        border-radius:14px;
        background:var(--t1-bg-surface,#fff);
        box-shadow:0 6px 20px rgba(15,23,42,.12);
    }
    .t3-board--review .t3-stmts-panel{order:0;}
}
@media (max-width:575.98px){
    .t3-ads-grid{grid-template-columns:1fr;}
    .t3-stmt-foot{padding-inline-start:0;}
}

/* RTL */
[dir="rtl"] .t3-stmt .t3-stmt-grip{margin-inline-start:auto;}

/* ============================================================
   Lesen Teil 3 — v3 premium polish (Task 3.7)
   Applies to BOTH Lernen (.t3-board) and Prüfung (.t3-board--exam,
   which reuses the .t3-ad / .t3-ads-grid visuals). Scoped to .t3-*
   so Teil 1/2 and the Sprachbausteine remain untouched.
   ============================================================ */

/* Equal-height ad cards with a calm internal scroll for long copy */
.t3-ad{height:100%;}
.t3-ad-body{
    flex:1 1 auto;min-height:0;
    max-height:16rem;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--t1-border,#e2e8f0) transparent;
}
.t3-ad-body--none{flex:0 0 auto;max-height:none;overflow:visible;}
.t3-ad-body::-webkit-scrollbar{width:8px;}
.t3-ad-body::-webkit-scrollbar-track{background:transparent;}
.t3-ad-body::-webkit-scrollbar-thumb{
    background:var(--t1-border,#e2e8f0);border-radius:999px;
    border:2px solid transparent;background-clip:padding-box;
}
.t3-ad-body:hover::-webkit-scrollbar-thumb{background:#cbd5e1;background-clip:padding-box;}

/* Darker, clearer German reading text (Part E) — Teil 3 only */
.t3-ad-body,
.t3-ad-body.german-text{color:#0f172a;font-size:.92rem;line-height:1.7;}
.t3-stmt-text{color:#0f172a;}
.t3-stmt[data-t3-stmt] .t3-stmt-text{line-height:1.6;}

/* Situations panel — a touch more breathing room (Part B) */
.t3-stmts-panel.is-sticky .t3-panel-inner{padding:1.1rem;}
.t3-stmts-list{gap:.85rem;}

/* ── Prüfung Teil 3 board: ads main (2-per-row) + situations panel ── */
.t3-board--exam{
    grid-template-columns:minmax(0,1fr) minmax(340px,400px);
}
.t3-board--exam .t3-exam-stmts{display:flex;flex-direction:column;}
.t3-board--exam .t3-exam-stmts .se-question-card:last-of-type{margin-bottom:.5rem;}
.t3-board--exam .se-section-heading{margin-bottom:.85rem;}
.t3-board--exam .t3-heading{margin-bottom:.5rem;}
.t3-board--exam .se-controls-bar{margin-top:.75rem;}

@media (min-width:992px){
    /* Reference ads stay in view while answering; the column scrolls,
       not each card, so exam reading feels natural. */
    .t3-board--exam .t3-ads{
        position:sticky;top:4.5rem;
        max-height:calc(100vh - 5.5rem);
        overflow-y:auto;padding-inline-end:.35rem;
        scrollbar-width:thin;
        scrollbar-color:var(--t1-border,#e2e8f0) transparent;
    }
    .t3-board--exam .t3-ad-body{max-height:none;overflow:visible;}
    .t3-board--exam .t3-ads::-webkit-scrollbar{width:8px;}
    .t3-board--exam .t3-ads::-webkit-scrollbar-thumb{
        background:var(--t1-border,#e2e8f0);border-radius:999px;
        border:2px solid transparent;background-clip:padding-box;
    }
}
@media (max-width:991.98px){
    .t3-board--exam{grid-template-columns:1fr;}
    .t3-board--exam .t3-ads{order:-1;}
}

/* ============================================================
 * Rich learning content (admin CKEditor output) rendered inside
 * passage/statement containers. Plain-text content uses <br> and
 * is unaffected; these rules only shape sanitized rich HTML.
 * ============================================================ */
.se-text-passage p,
.t3-ad-body p,
.se-cloze-text p,
.hoeren-stmt__text p { margin: 0 0 0.75em; }
.se-text-passage p:last-child,
.t3-ad-body p:last-child,
.se-cloze-text p:last-child,
.hoeren-stmt__text p:last-child { margin-bottom: 0; }

.se-text-passage ul, .se-text-passage ol,
.t3-ad-body ul, .t3-ad-body ol,
.se-cloze-text ul, .se-cloze-text ol,
.hoeren-stmt__text ul, .hoeren-stmt__text ol { margin: 0 0 0.75em; padding-inline-start: 1.5em; }
.se-text-passage li,
.t3-ad-body li,
.se-cloze-text li,
.hoeren-stmt__text li { margin-bottom: 0.25em; }

.se-text-passage h3, .se-text-passage h4,
.t3-ad-body h3, .t3-ad-body h4,
.se-cloze-text h3, .se-cloze-text h4 { margin: 0 0 0.5em; font-weight: 700; line-height: 1.3; }
.se-text-passage h3, .t3-ad-body h3, .se-cloze-text h3 { font-size: 1.15em; }
.se-text-passage h4, .t3-ad-body h4, .se-cloze-text h4 { font-size: 1.05em; }

.se-text-passage a,
.t3-ad-body a,
.se-cloze-text a,
.hoeren-stmt__text a { color: inherit; text-decoration: underline; }

/* ============================================================
   Sprachbausteine Teil 1 — inline cloze blanks
   The passage marker "(N)" renders as an inline blank that mirrors
   the MCQ radios. Interactive (drop target) + review (state) modes.
   ============================================================ */
.sb-cloze { line-height: 2.15; }

.sb-cloze-blank {
    display: inline-flex;
    align-items: baseline;
    gap: .25em;
    white-space: nowrap;
    min-width: 2.6em;
    justify-content: center;
    padding: .05em .5em;
    margin: 0 .12em;
    border-radius: .5rem;
    border: 1.5px dashed var(--t1-accent, #3b6ef6);
    background: var(--t1-accent-tint, #eef3ff);
    color: var(--t1-accent-dk, #1e3a8a);
    font-weight: 600;
    cursor: pointer;
    vertical-align: baseline;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sb-cloze-blank:hover { background: var(--t1-accent-soft, #dbe6ff); }
.sb-cloze-blank:focus-visible {
    outline: 2px solid var(--t1-accent, #3b6ef6);
    outline-offset: 2px;
}
.sb-cloze-num  { font-size: .82em; opacity: .8; }
.sb-cloze-word { font-weight: 700; }
.sb-cloze-blank.is-filled {
    border-style: solid;
    background: var(--t1-accent-soft, #dbe6ff);
}
.sb-cloze-blank.is-filled .sb-cloze-num { display: none; }

/* Drag-and-drop feedback (desktop) */
.sb-cloze-blank.sb-drop-ok {
    border-color: #16a34a;
    background: #dcfce7;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.sb-cloze-blank.sb-drop-bad {
    border-color: #dc2626;
    background: #fee2e2;
    cursor: not-allowed;
}
.se-mcq-option.sb-dragging,
.form-check.sb-dragging { opacity: .6; }

@keyframes sbReject {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.sb-cloze-blank.sb-reject { animation: sbReject .3s ease; }

@keyframes sbFlash {
    0%   { box-shadow: 0 0 0 0 rgba(59, 110, 246, .5); }
    100% { box-shadow: 0 0 0 6px rgba(59, 110, 246, 0); }
}
.sb-flash { animation: sbFlash .8s ease; }

/* Review states */
.sb-cloze-blank.is-review { cursor: default; border-style: solid; }
.sb-cloze-blank.is-review.is-correct {
    border-color: #16a34a; background: #dcfce7; color: #166534;
}
.sb-cloze-blank.is-review.is-wrong {
    border-color: #dc2626; background: #fee2e2; color: #991b1b;
}
.sb-cloze-blank.is-review .sb-cloze-num { display: inline; font-size: .75em; }
.sb-cloze-correct { font-weight: 700; color: #166534; }
.sb-cloze-correct::before { content: "\2192\00a0"; opacity: .7; }

[dir="rtl"] .sb-cloze-correct::before { content: "\2190\00a0"; }

@media (prefers-reduced-motion: reduce) {
    .sb-cloze-blank.sb-reject,
    .sb-flash { animation: none; }
}

/* ============================================================
   PREMIUM ELEVATION LAYER  (additive, appended last)
   Elevates the shared exercise chrome for Lesen Teil 2/3 +
   Sprachbausteine Teil 1/2 across practice AND Prüfung, without
   changing any markup, scoring or POST contracts. All rules use
   existing class names, symmetric spacing (RTL-safe) and respect
   prefers-reduced-motion.
   ============================================================ */
:root {
    --se-elev-1: 0 1px 2px rgba(15, 23, 42, .05);
    --se-elev-2: 0 6px 20px -6px rgba(15, 23, 42, .14), 0 2px 6px -2px rgba(15, 23, 42, .08);
    --se-elev-3: 0 14px 40px -12px rgba(15, 23, 42, .22), 0 4px 12px -4px rgba(15, 23, 42, .10);
    --se-ring-primary: 0 0 0 3px rgba(13, 110, 253, .18);
    --se-radius-lg: 1rem;
    --se-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Reading + question cards: softer radius, layered depth, gentle hover lift */
.se-text-panel,
.se-question-card,
.se-text-card {
    border-radius: var(--se-radius-lg);
    box-shadow: var(--se-elev-1);
    transition: box-shadow .18s var(--se-ease), transform .18s var(--se-ease), border-color .18s var(--se-ease);
}
.se-question-card:hover,
.se-text-card:hover {
    box-shadow: var(--se-elev-2);
    transform: translateY(-1px);
}

/* Text panel header: subtle brand-tinted gradient for a premium masthead feel */
.se-text-panel-head {
    background: linear-gradient(180deg, rgba(13, 110, 253, .06), rgba(13, 110, 253, 0));
    border-radius: var(--se-radius-lg) var(--se-radius-lg) 0 0;
}
.se-text-panel-icon,
.se-section-heading-icon {
    box-shadow: var(--se-elev-1);
}

/* MCQ options: crisper affordance on hover / keyboard focus / checked */
.se-mcq-option {
    border-radius: .7rem;
    transition: border-color .15s var(--se-ease), background .15s var(--se-ease), box-shadow .15s var(--se-ease), transform .12s var(--se-ease);
}
.se-mcq-option:hover {
    border-color: rgba(13, 110, 253, .55);
    background: rgba(13, 110, 253, .04);
    transform: translateY(-1px);
}
.se-mcq-option:focus-within {
    box-shadow: var(--se-ring-primary);
    border-color: rgba(13, 110, 253, .7);
}
/* keep the selected option visually dominant even while hovered */
.se-mcq-option.is-checked:hover {
    transform: none;
    background: inherit;
}

/* Correction states: strengthen the left-edge signal on graded cards */
.se-question-card.is-correct { box-shadow: inset 4px 0 0 0 var(--t1-success-border, #86efac), var(--se-elev-1); }
.se-question-card.is-wrong   { box-shadow: inset 4px 0 0 0 var(--t1-danger-border,  #fca5a5), var(--se-elev-1); }
[dir="rtl"] .se-question-card.is-correct { box-shadow: inset -4px 0 0 0 var(--t1-success-border, #86efac), var(--se-elev-1); }
[dir="rtl"] .se-question-card.is-wrong   { box-shadow: inset -4px 0 0 0 var(--t1-danger-border,  #fca5a5), var(--se-elev-1); }

/* Feedback rows: rounder pills, clearer correct/wrong fills */
.se-feedback-item {
    border-radius: .7rem;
    transition: box-shadow .15s var(--se-ease), transform .12s var(--se-ease);
}
.se-feedback-item.is-correct { box-shadow: inset 0 0 0 1px var(--t1-success-border, #86efac); }
.se-feedback-item.is-wrong   { box-shadow: inset 0 0 0 1px var(--t1-danger-border,  #fca5a5); }

/* Inline cloze pills: soft depth so blanks read as interactive chips */
.sb-cloze-blank {
    border-radius: .55rem;
    box-shadow: var(--se-elev-1);
    transition: box-shadow .15s var(--se-ease), transform .12s var(--se-ease), border-color .15s var(--se-ease);
}
.sb-cloze-blank:not(.is-review):hover {
    transform: translateY(-1px);
    box-shadow: var(--se-elev-2);
}

/* Premium primary action: layered shadow + subtle sheen + hover lift */
.se-btn--premium {
    box-shadow: 0 6px 18px -6px rgba(13, 110, 253, .55), var(--se-elev-1);
    transition: box-shadow .18s var(--se-ease), transform .12s var(--se-ease), filter .15s var(--se-ease);
}
.se-btn--premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -8px rgba(13, 110, 253, .6), var(--se-elev-2);
    filter: saturate(1.05);
}

/* Sticky controls bar: give the action row a floating-panel feel */
.se-controls-bar {
    border-radius: var(--se-radius-lg);
    box-shadow: var(--se-elev-1);
}

@media (prefers-reduced-motion: reduce) {
    .se-question-card, .se-text-card, .se-mcq-option,
    .sb-cloze-blank, .se-feedback-item, .se-btn--premium {
        transition: none;
    }
    .se-question-card:hover, .se-text-card:hover,
    .se-mcq-option:hover, .sb-cloze-blank:not(.is-review):hover,
    .se-btn--premium:hover { transform: none; }
}
/* ── end PREMIUM ELEVATION LAYER ── */

/* ============================================================
   LESEN TEIL 2 — two-panel workspace refinement (additive)
   Premium custom scrollbars on the scrollable reading / text
   panels so the exam workspace never shows the default chunky
   OS scrollbar. Shared, safe: purely visual, no logic touched.
   ============================================================ */
.se-text-panel-body,
.se-text-panel-body--reading,
.se-text-stack--scroll,
.se-wordbank-body--cap {
    scrollbar-width: thin;
    scrollbar-color: var(--t1-border, #e2e8f0) transparent;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.se-text-panel-body::-webkit-scrollbar,
.se-text-panel-body--reading::-webkit-scrollbar,
.se-text-stack--scroll::-webkit-scrollbar,
.se-wordbank-body--cap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.se-text-panel-body::-webkit-scrollbar-track,
.se-text-panel-body--reading::-webkit-scrollbar-track,
.se-text-stack--scroll::-webkit-scrollbar-track,
.se-wordbank-body--cap::-webkit-scrollbar-track {
    background: transparent;
}
.se-text-panel-body::-webkit-scrollbar-thumb,
.se-text-panel-body--reading::-webkit-scrollbar-thumb,
.se-text-stack--scroll::-webkit-scrollbar-thumb,
.se-wordbank-body--cap::-webkit-scrollbar-thumb {
    background: var(--t1-border, #e2e8f0);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .15s ease;
}
.se-text-panel-body:hover::-webkit-scrollbar-thumb,
.se-text-panel-body--reading:hover::-webkit-scrollbar-thumb,
.se-text-stack--scroll:hover::-webkit-scrollbar-thumb,
.se-wordbank-body--cap:hover::-webkit-scrollbar-thumb {
    background: var(--t1-text-subtle, #94a3b8);
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    .se-text-panel-body,
    .se-text-panel-body--reading,
    .se-text-stack--scroll,
    .se-wordbank-body--cap { scroll-behavior: auto; }
}

/* ============================================================
   LESEN TEIL 2 — balanced two-panel exam workspace
   ------------------------------------------------------------
   Scoped to .se-teil2-workspace — a hook present ONLY on Lesen
   Teil 2 (Lernen #teil2-form and Prüfung step_2). The shared
   #exam-step-form id is used by exam steps 2–5, so it must NOT
   be used for Teil 2-specific layout; this dedicated class keeps
   steps 3/4/5 and every other Teil completely untouched.

   Goals: equal-height Reading (left) / Questions (right) panels
   that each scroll internally, a compact question stack with no
   large empty whitespace, premium scrollbars, and an RTL layout
   that keeps the same panel order (Reading left, Questions right)
   while inner Arabic text still reads right-to-left.
   ============================================================ */

/* ── RTL: lock panel order, restore inner text direction ──────
   Bootstrap reverses column order under [dir="rtl"]. We force the
   workspace row to LTR so Reading stays LEFT and Questions RIGHT,
   then re-apply RTL inside each column so labels/passage/pills read
   correctly (all existing [dir="rtl"] component rules still work). */
body.rtl .se-teil2-workspace { direction: ltr; }
body.rtl .se-teil2-workspace > [class*="col-"] { direction: rtl; }

/* German reading passage, questions and answer options always read left-to-right
   even when the surrounding UI is Arabic (RTL). Panel order and Arabic UI labels
   (headings, badges, buttons) are unaffected — only the German content flips. */
body.rtl .se-teil2-workspace .se-text-passage,
body.rtl .se-teil2-workspace .se-question-text,
body.rtl .se-teil2-workspace .se-mcq-option,
body.rtl .se-teil2-workspace .form-check-label,
body.rtl .se-teil2-workspace .se-feedback-item-text,
body.rtl .se-teil2-workspace .se-explanation-text {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;   /* embed German LTR runs cleanly inside Arabic UI */
}

/* Correction/review + question-head layout keeps the same side/order as EN/DE
   (state icon leading, "your answer" pill trailing, question number leading)
   even when the UI is Arabic. Only these German exercise blocks flip to LTR;
   Arabic UI chrome outside the workspace is unaffected. */
body.rtl .se-teil2-workspace .se-question-head,
body.rtl .se-teil2-workspace .se-mcq-list,
body.rtl .se-teil2-workspace .se-feedback-list,
body.rtl .se-teil2-workspace .se-feedback-item { direction: ltr; }

/* ── Compact, balanced question stack (Teil 2 only, all widths) ── */
.se-teil2-workspace .se-question-card { margin-bottom: .7rem; }
.se-teil2-workspace .se-question-head { padding: .58rem .9rem .58rem 1.05rem; min-height: 46px; }
.se-teil2-workspace .se-question-body { padding: .7rem .9rem .8rem 1.05rem; }
.se-teil2-workspace .se-mcq-list { margin-bottom: 0 !important; }

/* ── A3: stronger German readability (color + comfortable leading) ──
   Darker slate text for the German passage, question titles and answer
   options. Correction-state colors (green/red on .se-feedback-item) are
   intentionally NOT overridden here so right/wrong feedback stays legible. */
.se-teil2-workspace .se-text-passage {
    color: var(--sf-text, #0f172a);
    line-height: var(--sf-leading-reading, 1.75);
}
.se-teil2-workspace .se-question-text,
.se-teil2-workspace .se-mcq-option .form-check-label {
    color: var(--sf-text, #0f172a);
    line-height: 1.6;
}
/* Active answer options a touch heavier for presence; neutral (unselected)
   review options use full-strength slate so they are not washed out. The
   correction-state green/red text colors are intentionally NOT overridden. */
.se-teil2-workspace .se-mcq-option .form-check-label { font-weight: 500; }
.se-teil2-workspace .se-feedback-item.is-neutral .se-feedback-item-text {
    color: var(--sf-text, #0f172a);
}

/* ── Desktop: equal-height workspace with internal scrolling ──
   Below lg the workspace stacks and scrolls with the page (these
   rules are desktop-only), so mobile is unaffected. */
@media (min-width: 992px) {
    .se-teil2-workspace {
        /* Both columns share this height. A slim allowance below the sticky
           navbar is reserved for the page header + theme badge + banner; the
           workspace itself is kept tall so both panels have generous room. */
        /* Offset reserves room for the page header above AND the full-width
           action bar that now sits below the workspace (Task 3.3 Part C). */
        height: calc(100vh - var(--se-sticky-top) - 7rem);
        min-height: 30rem;      /* floor for short viewports */
    }
    .se-teil2-workspace > [class*="col-"] {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;          /* unlock flexbox overflow for inner scroll */
    }

    /* Left: reading panel fills the column; passage scrolls inside. */
    .se-teil2-workspace .se-sticky-panel {
        position: static;       /* no sticky needed inside a fixed workspace */
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .se-teil2-workspace .se-text-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .se-teil2-workspace .se-text-panel-body--reading {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;       /* height governed by the flex column */
        overflow-y: auto;
    }
    .se-teil2-workspace .se-text-panel-body--reading > .se-text-passage {
        min-height: 100%;       /* cream sheet fills the pane — no empty gap */
    }

    /* Right: heading (fixed) + scrollable questions + controls (fixed). */
    .se-teil2-workspace .se-section-heading { flex: 0 0 auto; margin-bottom: .75rem; }
    .se-teil2-workspace .se-questions-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-inline-end: .4rem;   /* room for the scrollbar */
    }
    .se-teil2-workspace .se-questions-scroll > .se-question-card:last-child {
        margin-bottom: .25rem;
    }
}

/* ── Full-width action bar below the two-panel workspace (Part C) ──
   The controls (Check / Show solution / progress / Next) now sit below
   both cards instead of inside the questions column, spanning full width. */
.se-teil2-actionbar {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--t1-border-soft);
}

/* ── Prüfung completion: per-part points breakdown (Part G) ── */
.se-result-breakdown-wrap { margin: .25rem auto 1.1rem; max-width: 22rem; text-align: start; }
.se-result-breakdown-title {
    font-size: var(--sf-text-sm, .875rem);
    font-weight: 600;
    color: var(--sf-text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
    text-align: center;
}
.se-result-breakdown { list-style: none; margin: 0; padding: 0; }
.se-result-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .85rem;
    border: 1px solid var(--t1-border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: .4rem;
    background: #fff;
}
.se-result-breakdown-part { font-weight: 600; color: var(--sf-text, #0f172a); }
.se-result-breakdown-pts {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--t1-accent, #4f46e5);
}

/* ── Premium thin scrollbar for the questions scroll area ── */
.se-teil2-workspace .se-questions-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--t1-border, #e2e8f0) transparent;
}
.se-teil2-workspace .se-questions-scroll::-webkit-scrollbar { width: 8px; }
.se-teil2-workspace .se-questions-scroll::-webkit-scrollbar-track { background: transparent; }
.se-teil2-workspace .se-questions-scroll::-webkit-scrollbar-thumb {
    background: var(--t1-border, #e2e8f0);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .15s ease;
}
.se-teil2-workspace .se-questions-scroll:hover::-webkit-scrollbar-thumb {
    background: var(--t1-text-subtle, #94a3b8);
    background-clip: padding-box;
}
/* ── end LESEN TEIL 2 two-panel workspace ── */

/* ============================================================
   Lesen Teil 3 — Task #4 UNIFIED premium workspace
   ------------------------------------------------------------
   One shared, Teil-3-scoped design for BOTH surfaces:
   Lernen (.t3-board) and Prüfung (.t3-board.t3-board--exam).
   Overrides the earlier v2/v3 blocks. Scoped strictly to the
   Teil 3 board (.t3-* / the .se-question-* inside it), so Teil
   1/2 and the Sprachbausteine remain untouched. No scoring or
   DOM-contract change — layout, scroll, direction, typography.
   ============================================================ */

/* Balanced two-column workspace: ads ~58% / situations ~42%
   (wider, more readable Situationen panel on desktop) */
.t3-board,
.t3-board--exam{
    display:grid;
    grid-template-columns:minmax(0,1.42fr) minmax(360px,1fr);
    gap:1.5rem;align-items:start;
    margin-bottom:1.5rem;
}
.t3-board .t3-ads{margin-bottom:0;}

/* Uniform ad cards — same frame/size incl. Advertisement X */
.t3-board .t3-ad{height:100%;}
.t3-board .t3-ad--none{border-style:solid;}
.t3-board .t3-ad--none .t3-ad-head{background:var(--t1-accent-tint,#f6faff);}

/* Remove competing per-card nested scroll — the ADS COLUMN is the
   single premium scroll container (desktop rule below). */
.t3-board .t3-ad-body{max-height:none;overflow:visible;}

/* Darker, clearer German typography (near slate-950) + contrast */
.t3-board .t3-ad-body,
.t3-board .t3-ad-body.german-text,
.t3-board .t3-stmt-text,
.t3-board .se-question-text,
.t3-board .se-question-text.german-text{
    color:#0f172a;font-size:.95rem;line-height:1.7;
}
.t3-board .t3-ad-name{color:#0f172a;}

/* Situations panel — wide, readable, premium (unify exam + lernen) */
.t3-board .t3-stmts-panel{min-width:0;}
.t3-board .t3-panel-inner{
    border:1px solid var(--t1-border,#e2e8f0);
    border-radius:var(--t1-card-radius,16px);
    background:var(--t1-accent-tint,#f6faff);
    box-shadow:var(--t1-shadow-sm,0 2px 4px rgba(15,23,42,.04));
    padding:1.1rem;
}
.t3-board--exam .t3-exam-stmts{display:flex;flex-direction:column;gap:.85rem;}

/* Keep at most 2 ad cards per row on desktop */
.t3-board .t3-ads-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;align-items:stretch;
}

/* ── Desktop: two independent premium scroll containers ── */
@media (min-width:992px){
    /* Advertisements: single sticky scroll container */
    .t3-board .t3-ads{
        position:sticky;top:1rem;
        max-height:calc(100dvh - 2rem);
        overflow-y:auto;overflow-x:hidden;
        padding-inline-end:.4rem;
        scrollbar-width:thin;
        scrollbar-color:var(--t1-border,#e2e8f0) transparent;
    }
    .t3-board .t3-ads::-webkit-scrollbar{width:8px;}
    .t3-board .t3-ads::-webkit-scrollbar-track{background:transparent;}
    .t3-board .t3-ads::-webkit-scrollbar-thumb{
        background:var(--t1-border,#e2e8f0);border-radius:999px;
        border:2px solid transparent;background-clip:padding-box;
    }
    .t3-board .t3-ads:hover::-webkit-scrollbar-thumb{background:#cbd5e1;background-clip:padding-box;}

    /* Situations: readable panel with its own premium scroll when long */
    .t3-board .t3-stmts-panel{position:sticky;top:1rem;}
    .t3-board .t3-stmts-panel .t3-panel-inner{
        max-height:calc(100dvh - 2rem);
        overflow-y:auto;overflow-x:hidden;
        scrollbar-width:thin;
        scrollbar-color:var(--t1-border,#e2e8f0) transparent;
    }

    /* Prüfung clears its sticky exam header/timer */
    .t3-board--exam .t3-ads{top:4.5rem;max-height:calc(100dvh - 5.5rem);}
    .t3-board--exam .t3-stmts-panel{top:4.5rem;}
    .t3-board--exam .t3-stmts-panel .t3-panel-inner{max-height:calc(100dvh - 5.5rem);}
}

/* Review mode: no fixed-height scroll boxes (full content visible) */
.t3-board--review .t3-ads,
.t3-board--review .t3-stmts-panel,
.t3-board--review .t3-stmts-panel .t3-panel-inner{
    position:static;max-height:none;overflow:visible;
}

/* ── Arabic RTL chrome, German exercise content LTR ──
   Keep the lettered advertisement grid + chip row in natural
   A/B/C/…/X order; german-text already forces body text LTR. */
[dir="rtl"] .t3-board .t3-ads-grid,
[dir="rtl"] .t3-board .se-chip-row{
    direction:ltr;
}

/* ── Prüfung Teil 3: meaningful answer options (letter + text preview) ──
   Display-only. The hidden <select> keeps the text-id values, so scoring
   and the POST contract are unchanged; only the chip label is enriched so
   options read as real choices, not letter-only "Anzeige A/B/C". */
.t3-board--exam .se-chip-row{
    display:flex;flex-direction:column;gap:.5rem;margin-top:.35rem;
}
.t3-board--exam .se-chip{
    display:flex;align-items:flex-start;gap:.6rem;width:100%;
    text-align:start;padding:.6rem .7rem;border-radius:12px;
    border:1px solid var(--sf-border,#e2e8f0);background:var(--sf-surface,#fff);
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.t3-board--exam .se-chip:hover{
    border-color:var(--sf-primary,#1d4ed8);
    background:var(--sf-primary-tint,#eff6ff);
}
.t3-board--exam .se-chip:focus-visible{
    outline:2px solid var(--sf-primary,#1d4ed8);outline-offset:2px;
}
.t3-board--exam .se-chip.is-selected{
    border-color:var(--sf-primary,#1d4ed8);
    background:var(--sf-primary-soft,#dbeafe);
    box-shadow:inset 0 0 0 1px var(--sf-primary,#1d4ed8);
}
.t3-board--exam .se-chip-badge{
    flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:8px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.85rem;
    background:var(--sf-primary,#1d4ed8);color:#fff;
}
.t3-board--exam .se-chip.is-selected .se-chip-badge{background:var(--sf-primary-strong,#1e3a8a);}
.t3-board--exam .se-chip-label{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.t3-board--exam .se-chip-title{font-weight:600;font-size:.85rem;color:#0f172a;}
.t3-board--exam .se-chip-preview{
    font-size:.82rem;line-height:1.45;color:#475569;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Responsive: clean single-column stacking (Advertisements FIRST) ── */
@media (max-width:991.98px){
    .t3-board,
    .t3-board--exam{grid-template-columns:1fr;gap:1.25rem;}
    .t3-board .t3-ads,
    .t3-board .t3-stmts-panel{position:static;max-height:none;overflow:visible;}
    .t3-board .t3-stmts-panel .t3-panel-inner{max-height:none;overflow:visible;padding:1.25rem;}
    .t3-board--exam .t3-ads{top:auto;}
    /* Advertisements FIRST, Situationen BELOW — on both Lernen and Prüfung */
    .t3-board .t3-ads{order:0;}
    .t3-board .t3-stmts-panel{order:1;}
    /* Advertisement cards: ONE per row on medium AND small screens */
    .t3-board .t3-ads-grid{grid-template-columns:1fr;}
}
/* ── end Teil 3 Task #4 unified workspace ── */

/* ============================================================
   SPRACHTEIL 1 — UNIFIED WORKSPACE REDESIGN (Task #8, additive)
   Shared by Lernen (student/sprachteil1.php) and Prüfung
   (includes/exam_steps/step_4.php). Reading + Tasks read as two
   matching panels; the Tasks list scrolls inside its own card with
   the shared thin scrollbar; inline cloze blanks read as clean
   "( _N_ )" widgets with breathing room; German passage typography
   is darker for contrast. Purely visual — no markup logic, scoring
   or POST contract depends on any of this. RTL-safe (logical
   properties + symmetric spacing); German stays LTR via .german-text.
   Source-order-last so it wins over the earlier .sb-cloze blocks.
   ============================================================ */

/* ── Tasks panel: a card that visually balances the reading panel ── */
.se-tasks-panel { min-width: 0; }
.se-text-panel--tasks { display: flex; flex-direction: column; }

/* ── Scroll model: bounded equal-height cards, Tasks scrolls inside ──
   The columns are NOT pinned — a position:sticky element taller than the
   viewport is what trapped the wheel and hid the controls in earlier revisions.
   Instead, on desktop both cards share ONE bounded height so they read as a
   balanced workspace, each card's BODY scrolls internally with the shared thin
   scrollbar, and the action controls live OUTSIDE the cards (below the row) so
   they are always reachable. The mouse wheel scrolls the card body it is over;
   at the body's top/bottom the page continues normally (default scroll
   chaining) — no trap, no freeze. Scoped to .se-sp1-workspace so Teil 1/2/3 and
   Sprachteil 2 (which also use .se-sticky-panel / .se-text-panel-body) are
   untouched. */
.se-sp1-workspace .se-sticky-panel { position: static; top: auto; z-index: auto; }

/* Mobile / tablet (<992px): stack and let each card flow with the page so the
   whole page scrolls naturally — no internal card scroll, no trap. */
.se-sp1-workspace .se-text-panel-body--reading,
.se-sp1-workspace .se-tasks-scroll {
    max-height: none;
    overflow: visible;
}

@media (min-width: 992px) {
    /* Equal-height columns with one shared, comfortable, bounded card height so
       Reading and Tasks align top and bottom and neither grows into a giant
       page column. */
    .se-sp1-workspace > [class*="col-"] { display: flex; flex-direction: column; }
    .se-sp1-workspace .se-sticky-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: clamp(36rem, 82vh, 56rem);
    }
    .se-sp1-workspace .se-text-panel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;            /* required so the inner body can scroll */
    }
    .se-sp1-workspace .se-text-panel-head { flex: 0 0 auto; }  /* head stays put */
    /* The card BODY is the only scroll region; it gets the shared thin scrollbar
       because it also carries .se-text-panel-body. */
    .se-sp1-workspace .se-text-panel-body--reading,
    .se-sp1-workspace .se-tasks-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        /* Re-enable scroll chaining: the base .se-text-panel-body rule sets
           overscroll-behavior:contain, which would trap the wheel at the card's
           top/bottom. For SP1 we WANT the page to keep scrolling past the card
           edge so the controls bar below the row is always reachable. */
        overscroll-behavior: auto;
    }
}

/* Controls bar now lives below the two-card workspace (a sibling of the row),
   never inside the Tasks scroll — so buttons are always reachable. */
.se-sp1-controls { margin-top: 1rem; }

/* ── Inline cloze blanks — cleaner, larger, with underline flanks ── */
.sb-cloze { line-height: 2.35; }
.sb-cloze-blank {
    min-width: 3.4em;
    padding-block: .12em;
    padding-inline: .55em;
    margin-inline: .3em;
    gap: .3em;
}
.sb-cloze-num {
    font-size: .95em;
    font-weight: 700;
    opacity: 1;
    letter-spacing: .01em;
}
/* Left / right underline flanks around the number — only while the blank
   is empty. They vanish automatically once filled because .sb-cloze-num
   becomes display:none in the .is-filled state. Symmetric = RTL-safe. */
.sb-cloze-blank:not(.is-review):not(.is-filled) .sb-cloze-num::before,
.sb-cloze-blank:not(.is-review):not(.is-filled) .sb-cloze-num::after {
    content: "";
    display: inline-block;
    width: .8em;
    height: 0;
    border-bottom: 2px solid currentColor;
    opacity: .55;
    vertical-align: middle;
    margin-inline: .12em;
}
.sb-cloze-word { font-weight: 700; letter-spacing: .01em; }

/* ── Darker, higher-contrast German reading typography ──
   Scoped to the Sprachteil 1 passage (.sb-cloze wraps the whole SP1
   reading text), so Teil 2/3 and Sprachteil 2 are untouched. */
.sb-cloze { color: #14213d; }

/* ── end SPRACHTEIL 1 UNIFIED WORKSPACE REDESIGN ── */


/* ============================================================
   SPRACHTEIL 2 UNIFIED CLOZE WORKSPACE REDESIGN (Task #10)
   One two-card workspace shared by Lernen (student/sprachteil2.php)
   and Prüfung (includes/exam_steps/step_5.php) Sprachteil 2:
     • Cloze Text card  → premium bounded internal scroll
     • Word Bank card   → FIXED height, no scroll, responsive
                          word TILES (~3 / 2 / 1 per row)
     • Action controls  → BELOW both cards (always reachable)
   Scoped to .se-sp2-workspace so Teil 1/2/3 and Sprachteil 1 are
   untouched. Pure visual layer — no answer logic, hidden inputs,
   data-word-id/-text, [BLANK_N] markers, option values, or scoring
   depend on any rule here.
   ============================================================ */

/* Word bank sits stably beside the cloze card. Neutralize any sticky
   so a taller-than-viewport panel can never pin and trap the wheel. */
.se-sp2-workspace .se-sticky-panel,
.se-sp2-workspace .se-wordbank-panel { position: static; top: auto; z-index: auto; }

/* Controls bar now lives below the two-card row (a sibling of .row),
   never inside a scroll region — so buttons are always reachable. */
.se-sp2-controls { margin-top: 1rem; }

/* ── Word Bank → responsive TILE grid (no internal scroll) ──
   Replaces the base #word-bank single-column d-grid AND the <992px
   horizontal-scroll strip, for SP2 only. auto-fill keeps ~3 tiles per
   row in the desktop sidebar, easing to 2 then 1 as space narrows. */
.se-sp2-workspace #word-bank {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .6rem;
    overflow: visible !important;
    padding-bottom: 0;
}
@media (max-width: 575.98px) {
    .se-sp2-workspace #word-bank {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Elegant word tiles — centered, equal, tactile. Click / drag / touch
   interaction is unchanged; only presentation differs. */
.se-sp2-workspace #word-bank .word-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 2.85rem;
    padding: .55rem .65rem;
    margin: 0;                 /* grid gap owns spacing */
    border-radius: var(--t1-tile-radius, .6rem);
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    scroll-snap-align: none;
}

/* Word Bank body never scrolls in SP2 — every tile always visible. */
.se-sp2-workspace .se-wordbank-body {
    max-height: none;
    overflow: visible;
}

/* ── Cloze Text card → premium bounded internal scroll ── */
@media (min-width: 992px) {
    .se-sp2-workspace > [class*="col-"] { display: flex; flex-direction: column; }
    .se-sp2-workspace .se-cloze-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: clamp(34rem, 78vh, 54rem);
    }
    .se-sp2-workspace .se-cloze-card .se-text-panel-head { flex: 0 0 auto; }
    /* The card BODY is the only scroll region; it keeps the shared thin
       scrollbar because it also carries .se-text-panel-body. */
    .se-sp2-workspace .se-cloze-card .se-text-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        /* Re-enable scroll chaining: base .se-text-panel-body sets
           overscroll-behavior:contain, which would trap the wheel at the
           card edge. SP2 wants the page to keep scrolling so the controls
           bar below the row is always reachable. */
        overscroll-behavior: auto;
    }
}

/* Mobile / tablet (<992px): stack and let the cloze body flow with the
   page — no internal card scroll, no trap, whole page scrolls naturally. */
@media (max-width: 991.98px) {
    .se-sp2-workspace .se-cloze-card .se-text-panel-body {
        max-height: none;
        overflow: visible;
    }
}
/* ── end SPRACHTEIL 2 UNIFIED CLOZE WORKSPACE REDESIGN ── */