/* /UI_Components/ActivityAiHelperTab.razor.rz.scp.css */
.helper-builder[b-y7s41pzf5i] {
    --helper-height: 42rem;
}

.helper-builder .card[b-y7s41pzf5i] {
    min-height: var(--helper-height);
    overflow: hidden;
}

.helper-config[b-y7s41pzf5i] {
    max-height: var(--helper-height);
}

.helper-enable[b-y7s41pzf5i] {
    padding: 1rem 1rem 1rem 3.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

[dir="rtl"] .helper-enable[b-y7s41pzf5i] {
    padding: 1rem 3.25rem 1rem 1rem;
}

.preset-grid[b-y7s41pzf5i],
.restriction-grid[b-y7s41pzf5i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.preset-card[b-y7s41pzf5i],
.restriction-card[b-y7s41pzf5i] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .5rem;
    align-items: center;
    padding: .65rem;
    text-align: start;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
}

.preset-card small[b-y7s41pzf5i],
.restriction-card small[b-y7s41pzf5i] {
    grid-column: 1 / -1;
    color: var(--bs-secondary-color);
    line-height: 1.25;
}

.preset-card:hover[b-y7s41pzf5i],
.restriction-card:hover[b-y7s41pzf5i],
.preset-card.selected[b-y7s41pzf5i],
.restriction-card.selected[b-y7s41pzf5i] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.preset-card.selected[b-y7s41pzf5i],
.restriction-card.selected[b-y7s41pzf5i] {
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.advanced-settings summary[b-y7s41pzf5i] {
    cursor: pointer;
    color: var(--bs-primary-text-emphasis);
}

.tester-card[b-y7s41pzf5i] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 575.98px) {
    .preset-grid[b-y7s41pzf5i],
    .restriction-grid[b-y7s41pzf5i] {
        grid-template-columns: 1fr;
    }
}
/* /UI_Components/ActivityBuildTab.razor.rz.scp.css */
/* ---------- Floating "Generate with AI" shortcut — docked to the bottom-right corner
   regardless of RTL/LTR, like a chat-widget launcher, so the AI tab is always one tap
   away without needing to open the drawer and pick a tab first. ---------- */
.build-ai-fab[b-4kjw3fggkh] {
    position: fixed;
    bottom: 2rem;
    /* Logical, so the button lands on the reading-end side in both directions
       instead of always on the physical right. */
    inset-inline-end: 2rem;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-700);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:var(--fs-xl);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.build-ai-fab:hover[b-4kjw3fggkh] {
    background: var(--primary-900);
    transform: scale(1.08);
    box-shadow: 0 12px 26px rgba(37, 122, 89, .3);
}

/* ---------- Small "optional" badge — unobtrusive alternative to "(optional)" in the label text ---------- */
.build-optional-badge[b-4kjw3fggkh] {
    display: inline-block;
    font-size:var(--fs-2xs);
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: .05rem .5rem;
    margin-inline-start: .3rem;
    vertical-align: middle;
}

/* ---------- Add-questions side drawer (offcanvas-style, left-anchored) ----------
   Anchored to the physical left edge regardless of RTL/LTR. Wide (not the classic
   ~560px offcanvas width) so AI generation's 3-column layout still gets real room,
   but still a drawer — edge-anchored with a visible backdrop, not a centered
   full-screen takeover. */
.build-drawer-backdrop[b-4kjw3fggkh] {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 20, .45);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.build-drawer-backdrop.open[b-4kjw3fggkh] {
    opacity: 1;
    pointer-events: auto;
}

.build-drawer[b-4kjw3fggkh] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* Starts narrower (40vw) so the exam's already-added questions stay visible behind
       it as a peek/reference — drag the resize handle wider when actively working the
       AI 3-column layout. 320px floor matches the drag-resizer's own minimum. */
    width: max(320px, 40vw);
    z-index: 1051;
    background: var(--examin-surface);
    box-shadow: 8px 0 28px rgba(0, 0, 0, .25);
    transform: translateX(-100%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
}

.build-drawer.open[b-4kjw3fggkh] {
    transform: translateX(0);
}

.build-drawer-resize-handle[b-4kjw3fggkh] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5px;
    width: 10px;
    cursor: col-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-drawer-resize-handle[b-4kjw3fggkh]::after {
    content: "";
    width: 3px;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--bs-border-color);
    animation: build-drawer-handle-hint-b-4kjw3fggkh 0.8s ease-in-out 3;
}

.build-drawer-resize-handle:hover[b-4kjw3fggkh]::after {
    background: var(--bs-secondary);
    animation: none;
}

/* One-time hint on load — since the drawer starts open, nudge the eye toward the
   draggable edge a few times, then settle back to the normal resting color. */
@keyframes build-drawer-handle-hint-b-4kjw3fggkh {
    0%, 100% { background: var(--bs-border-color); box-shadow: none; }
    50% { background: var(--bs-secondary); box-shadow: 0 0 6px var(--bs-secondary); }
}

/* ---------- Source tabs — a compact pill tray, sized to its own content (not
   stretched to fill whatever container it's in) so it sits naturally above the
   settings/search inputs below it rather than spanning the full drawer width. ---------- */
.build-source-tabs[b-4kjw3fggkh] {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    gap: .35rem;
    padding: .3rem;
    border-radius: .75rem;
    background: var(--bs-secondary-bg);
    margin-bottom: 1rem;
}

.build-source-tabs button[b-4kjw3fggkh] {
    border: 0;
    background: transparent;
    border-radius: .55rem;
    padding: .5rem .85rem;
    cursor: pointer;
    font-size:var(--fs-xs);
    font-weight: 600;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.build-source-tabs button.active[b-4kjw3fggkh] {
    background: var(--examin-surface);
    color: var(--bs-primary-text-emphasis);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

/* ---------- Existing-form format: settings column beside the live form ----------
   Same split as a tool's settings: a narrow column of green-outlined cards on the start
   side, the form as a student gets it taking the rest. */
.url-build[b-4kjw3fggkh] {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.url-build-side[b-4kjw3fggkh] {
    flex: 0 0 20rem;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: var(--fs-2xs);
}

.url-build-preview[b-4kjw3fggkh] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    overflow: hidden;
}

.url-build-empty[b-4kjw3fggkh] {
    height: 100%;
    min-height: 44rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 991.98px) {
    .url-build[b-4kjw3fggkh] { flex-direction: column; }
    .url-build-side[b-4kjw3fggkh] { flex-basis: auto; }
}
/* /UI_Components/ActivityPhaseNav.razor.rz.scp.css */
/* This header renders on every activity page (Build / Resources / Tools / AI /
   Settings / Run / Check / Review), so it is the most-seen chrome in the app after
   the topbar.

   Rewritten 2026-09-09 against the design tokens. What was here before was a stack
   of overrides built for a dark navy bar: .btn-primary was inverted to white,
   .btn-outline-primary was forced to a pale blue (#8FB3DE), and outline-success /
   outline-warning were pinned to the old dark-mode hexes — all guarded by
   :root:not([data-bs-theme="dark"]). The bar is a light paper surface now and dark
   mode was removed, so every one of those rules was actively making buttons worse
   (pale blue text on a near-white bar). Buttons here now look exactly like buttons
   everywhere else, which is the point. */

.phase-nav-bar[b-4vfmpemra3] {
    /* Paper, with the course's own accent as a barely-there wash so the bar still
       carries the course identity that the accent stripe on its edge announces. */
    background-color: color-mix(in srgb, var(--phase-accent, var(--primary-700)) 6%, var(--surface-card));
    color: var(--ink-primary);
    border-bottom-color: var(--border-light) !important;
    box-shadow: var(--shadow-xs);
}

.phase-nav-bar .text-muted[b-4vfmpemra3] {
    color: var(--ink-muted) !important;
}

.phase-nav-bar2[b-4vfmpemra3] {
    background-color: var(--surface-card);
}

/* ---------- Build-phase tabs / Publish pill ---------- */
.phase-pill[b-4vfmpemra3] {
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    white-space: nowrap;
    border: 1px solid var(--border-light);
    font-weight: var(--fw-semibold);
    background: var(--surface-subtle);
    color: var(--ink-secondary);
    transition: var(--transition-fast);
}

.phase-pill:hover[b-4vfmpemra3] {
    background: #fff;
    border-color: var(--border-strong);
    color: var(--ink-primary);
}

/* The active tab lifts onto white, the way the segmented control in the mock's
   header does — it must NOT be a solid brand fill, because the Publish CTA sitting
   two elements away already is one, and two solid emerald pills on one bar leaves
   no primary action. */
.phase-pill-active[b-4vfmpemra3] {
    background: #fff;
    border-color: var(--border-light);
    color: var(--primary-900);
    font-weight: var(--fw-heavy);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}

.phase-pill-active:hover[b-4vfmpemra3] {
    background: #fff;
    color: var(--primary-900);
}

/* ---------- State stepper (Run/Check pages) ---------- */
.step-circle[b-4vfmpemra3] {
    border: 2px solid var(--border-medium);
    background: transparent;
}

.step-icon[b-4vfmpemra3] {
    color: var(--border-strong);
    font-size: var(--fs-base);
}

.step-label[b-4vfmpemra3] {
    color: var(--ink-muted);
    font-weight: var(--fw-medium);
}

.step-connector[b-4vfmpemra3] {
    background: var(--border-medium);
}

.step-connector-past[b-4vfmpemra3] {
    background: var(--primary-400);
}

/* Past steps — a solid brand fill with a surface-coloured "cutout" icon, so the
   contrast holds without hand-picking a second colour. */
.step-past .step-circle[b-4vfmpemra3] {
    background: var(--primary-600);
    border-color: var(--primary-600);
}
.step-past .step-icon[b-4vfmpemra3] { color: var(--surface-card); }
.step-past .step-label[b-4vfmpemra3] { color: var(--ink-muted); }

/* Current step — tone set per state from the semantic accents, with a soft ring so
   the active step reads as the one thing on the stepper that is happening now. */
.step-success-current[b-4vfmpemra3]   { --tone-fg: var(--accent-green);  --tone-ring: var(--accent-green-bg); }
.step-primary-current[b-4vfmpemra3]   { --tone-fg: var(--primary-700);   --tone-ring: var(--primary-100); }
.step-secondary-current[b-4vfmpemra3] { --tone-fg: var(--ink-secondary); --tone-ring: var(--surface-subtle); }

.step-success-current .step-circle[b-4vfmpemra3],
.step-primary-current .step-circle[b-4vfmpemra3],
.step-secondary-current .step-circle[b-4vfmpemra3] {
    background: var(--tone-fg);
    border-color: var(--tone-fg);
    box-shadow: 0 0 0 4px var(--tone-ring);
}
.step-success-current .step-icon[b-4vfmpemra3],
.step-primary-current .step-icon[b-4vfmpemra3],
.step-secondary-current .step-icon[b-4vfmpemra3] {
    color: var(--surface-card);
}
.step-success-current .step-label[b-4vfmpemra3],
.step-primary-current .step-label[b-4vfmpemra3],
.step-secondary-current .step-label[b-4vfmpemra3] {
    color: var(--tone-fg);
    font-weight: var(--fw-heavy);
}
/* /UI_Components/AuthShell.razor.rz.scp.css */
.auth-shell[b-b36udu1gmb] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 2rem 1rem;
}

.auth-card[b-b36udu1gmb] {
    display: flex;
    width: 100%;
    max-width: 860px;
    background: var(--surface-card);
    color: var(--bs-body-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.auth-brand[b-b36udu1gmb] {
    flex: 0 0 38%;
    background: var(--primary-900);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 2rem;
}

.auth-brand-mark[b-b36udu1gmb] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.auth-brand-word[b-b36udu1gmb] {
    font-size:var(--fs-xl);
    font-weight: 800;
}

.auth-brand-tag[b-b36udu1gmb] {
    color: var(--examin-sidebar-fg-soft, rgba(255, 255, 255, .75));
    font-size:var(--fs-sm);
    margin: .5rem 0 0;
    max-width: 22ch;
    line-height: 1.5;
}

.auth-school[b-b36udu1gmb] {
    margin-bottom: 1.5rem;
}

.auth-school-logo[b-b36udu1gmb] {
    display: block;
    max-height: 56px;
    max-width: 180px;
    object-fit: contain;
}

.auth-school-name[b-b36udu1gmb] {
    font-weight: 700;
}

.auth-panel[b-b36udu1gmb] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 2.5rem 2rem;
    min-width: 0;
}

.auth-panel-inner[b-b36udu1gmb] {
    width: 100%;
}

@media (max-width: 767.98px) {
    .auth-card[b-b36udu1gmb] {
        flex-direction: column;
        max-width: 420px;
    }

    .auth-brand[b-b36udu1gmb] {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding: 1.25rem 1.5rem;
    }

    .auth-brand-mark[b-b36udu1gmb] {
        width: 32px;
        height: 32px;
        margin-bottom: 0;
    }

    .auth-brand-tag[b-b36udu1gmb] {
        display: none;
    }

    .auth-panel[b-b36udu1gmb] {
        padding: 1.75rem 1.5rem;
    }
}
/* /UI_Components/CroppedFrame.razor.rz.scp.css */
.cropped-frame[b-wzulxiumxc] {
    position: relative;
    overflow: hidden;
    direction: ltr;
    min-height: 0;
}

.cropped-frame iframe[b-wzulxiumxc] {
    display: block;
    border: 0;
}
/* /UI_Components/HandwritingPad.razor.rz.scp.css */
.handwriting-pad[b-9grbaqyksf] {
    min-height: 260px;
    background: #f8fafc;
    overflow: hidden;
}

.handwriting-toolbar[b-9grbaqyksf] {
    background: var(--examin-surface, #fff);
    color: var(--bs-body-color);
    flex-shrink: 0;
    z-index: 2;
}

.handwriting-color-button[b-9grbaqyksf] {
    position: relative;
    overflow: hidden;
}

.handwriting-color-button input[b-9grbaqyksf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.handwriting-size[b-9grbaqyksf] {
    width: 76px;
    margin: 0;
}

/* The desk the sheet lies on, which scrolls when the sheet is taller or wider than the pad. */
.handwriting-scroll[b-9grbaqyksf] {
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: #e8ecf1;
}

/* A sheet of A4, portrait: always this shape, so ink stored against its width and height sits
   in the same place at any size. Its width is the zoom; its height follows. */
.handwriting-sheet[b-9grbaqyksf] {
    width: 100%;
    aspect-ratio: 210 / 297;
    margin: 0 auto;
    min-height: 0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}

.handwriting-surface[b-9grbaqyksf] {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    touch-action: none;
    background-color: #fffef8;
}

/* Paper drawn in proportion to the sheet - an 8 mm rule, 5 mm squares, millimetre paper in 2 mm
   and 10 mm - so it grows and shrinks with the sheet. */
.handwriting-paper-lined .handwriting-surface[b-9grbaqyksf] {
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(99, 129, 166, .28) calc(100% - 1px));
    background-size: 100% calc(100% / 37.125);
}

.handwriting-paper-grid .handwriting-surface[b-9grbaqyksf] {
    background-image:
        linear-gradient(to bottom, rgba(99, 129, 166, .2) 1px, transparent 1px),
        linear-gradient(to right, rgba(99, 129, 166, .2) 1px, transparent 1px);
    background-size: calc(100% / 42) calc(100% / 59.4);
}

.handwriting-paper-mm .handwriting-surface[b-9grbaqyksf] {
    background-color: #fffffb;
    background-image:
        linear-gradient(to bottom, rgba(196, 120, 90, .38) 1px, transparent 1px),
        linear-gradient(to right, rgba(196, 120, 90, .38) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(196, 120, 90, .15) 1px, transparent 1px),
        linear-gradient(to right, rgba(196, 120, 90, .15) 1px, transparent 1px);
    background-size:
        calc(100% / 21) calc(100% / 29.7),
        calc(100% / 21) calc(100% / 29.7),
        calc(100% / 105) calc(100% / 148.5),
        calc(100% / 105) calc(100% / 148.5);
}

/* Squares, with an x-axis and a y-axis crossing in the middle of the sheet. */
.handwriting-paper-axes .handwriting-surface[b-9grbaqyksf] {
    background-image:
        linear-gradient(to right, transparent calc(50% - 1px), rgba(31, 41, 55, .7) calc(50% - 1px), rgba(31, 41, 55, .7) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom, transparent calc(50% - 1px), rgba(31, 41, 55, .7) calc(50% - 1px), rgba(31, 41, 55, .7) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom, rgba(99, 129, 166, .2) 1px, transparent 1px),
        linear-gradient(to right, rgba(99, 129, 166, .2) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, calc(100% / 42) calc(100% / 59.4), calc(100% / 42) calc(100% / 59.4);
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

.handwriting-paper-blank .handwriting-surface[b-9grbaqyksf] {
    background-image: none;
}

.handwriting-ink[b-9grbaqyksf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.handwriting-ink path[b-9grbaqyksf] {
    pointer-events: fill;
}

.handwriting-zoom-label[b-9grbaqyksf] {
    min-width: 3rem;
    font-size: var(--fs-2xs);
    color: var(--ink-secondary);
    text-decoration: none;
}

.handwriting-loading[b-9grbaqyksf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 254, 248, .88);
}

.handwriting-surface.handwriting-ready .handwriting-loading[b-9grbaqyksf] {
    display: none;
}

.handwriting-pad.handwriting-compact[b-9grbaqyksf] {
    min-height: 0;
    background: transparent;
}

.handwriting-compact .handwriting-toolbar[b-9grbaqyksf] {
    min-height: 25px;
    padding: 1px 2px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
}

.handwriting-compact .handwriting-toolbar .btn[b-9grbaqyksf] {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .3rem;
    --bs-btn-font-size:var(--fs-2xs);
    min-height: 22px;
}

.handwriting-compact .handwriting-thickness[b-9grbaqyksf],
.handwriting-compact .vr[b-9grbaqyksf] {
    display: none !important;
}

.handwriting-compact .handwriting-surface[b-9grbaqyksf],
.handwriting-readonly .handwriting-surface[b-9grbaqyksf] {
    min-height: 0;
    background-color: transparent;
}

.handwriting-readonly .handwriting-surface[b-9grbaqyksf] {
    cursor: default;
}

/* What an empty page says. Shown only while the page has no strokes on it, drawn under the ink and
   deaf to the pointer, so the first stroke goes straight through it and takes it away. A checked
   paper never shows it: an empty page there means nothing was written. */
.handwriting-hint[b-9grbaqyksf] {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    pointer-events: none;
    color: var(--ink-tertiary, #9aa7b2);
    font-size: var(--fs-sm);
    text-align: center;
}

.handwriting-surface.handwriting-empty .handwriting-hint[b-9grbaqyksf] {
    display: flex;
}

/* A pen tablet drawn with a few sums on it, faded back so it reads as the paper's, not the student's. */
.handwriting-hint-art[b-9grbaqyksf] {
    width: min(220px, 55%);
    height: auto;
    opacity: .6;
}

.handwriting-readonly .handwriting-hint[b-9grbaqyksf] {
    display: none !important;
}

/* The formula the selection was recognised as: large, over the page, with its copy button. */
.handwriting-formula[b-9grbaqyksf] { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; background: var(--surface-card, #fff); }
.handwriting-formula-view[b-9grbaqyksf] { flex: 1 1 auto; font-size: 1.8rem; border: 0; background: transparent; min-width: 0; }

/* The page looked at as black with light writing: the sheet and what is on it turned over in one go,
   hues turned back so a red pen is still red. Display only - nothing stored changes. */
.handwriting-dark .handwriting-scroll[b-9grbaqyksf] {
    background: #0b0f14;
}

.handwriting-dark .handwriting-surface[b-9grbaqyksf] {
    filter: invert(1) hue-rotate(180deg);
}
/* /UI_Components/InteractiveChatBuilder.razor.rz.scp.css */
.chat-build[b-36u1n783l0] {
    --chat-height: 34rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* Settings on the start side (right in RTL), the live example takes the rest. */
.chat-build-side[b-36u1n783l0] {
    /* Wider than a plain settings rail: the fields are the work here, the chat is only a sample. */
    flex: 0 0 clamp(20rem, 45%, 28rem);
    width: clamp(20rem, 45%, 28rem);
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    font-size: var(--fs-2xs);
}

.chat-build-main[b-36u1n783l0] {
    flex: 1 1 0;
    min-width: 0;
}

/* White raised panels with a thin brand-green edge, like the quiz cards. */
.chat-build-side .tool-card[b-36u1n783l0] {
    min-width: 0;
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
}

.chat-build-side .tool-card-title[b-36u1n783l0] {
    border-bottom-color: var(--primary-200);
}

.chat-build-main > .chat-workspace > .card-header[b-36u1n783l0] {
    background: var(--surface-card);
    border-bottom-color: var(--border-light);
}

.chat-tone-groups[b-36u1n783l0] { display: flex; flex-direction: column; gap: .35rem; }
.chat-tone-row[b-36u1n783l0] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.chat-tone-label[b-36u1n783l0] { flex: 0 0 4.2rem; color: var(--ink-secondary); }
.chat-tone-badge[b-36u1n783l0] {
    padding: .1rem .55rem;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--ink-primary);
    font-size: var(--fs-2xs);
    cursor: pointer;
}
.chat-tone-badge:hover:not(:disabled)[b-36u1n783l0] { border-color: var(--primary-500); }
.chat-tone-badge.is-active[b-36u1n783l0] {
    background: var(--primary-100);
    border-color: var(--primary-500);
    color: var(--primary-900);
    font-weight: 700;
}

.chat-mix[b-36u1n783l0] { display: flex; flex-direction: column; gap: .3rem; }
.chat-mix-row[b-36u1n783l0] { display: flex; align-items: center; gap: .4rem; }
.chat-mix-name[b-36u1n783l0] { flex: 1 1 0; min-width: 0; }
.chat-mix-count[b-36u1n783l0] { min-width: 1.2rem; text-align: center; font-weight: 700; }
.chat-mix-pct[b-36u1n783l0] { min-width: 2.4rem; text-align: end; color: var(--ink-secondary); }
.chat-mix-total[b-36u1n783l0] { color: var(--ink-secondary); border-top: 1px solid var(--border-light); padding-top: .3rem; }
.chat-pair[b-36u1n783l0] { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.chat-brief-preview[b-36u1n783l0] {
    max-height: 5.2rem;
    overflow: hidden;
    padding: .35rem .5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm, .35rem);
    background: var(--surface-subtle);
    color: var(--ink-primary);
    white-space: pre-line;
    text-overflow: ellipsis;
}

.chat-flash[b-36u1n783l0] { animation: chat-flash-b-36u1n783l0 2.4s ease-out; }
@keyframes chat-flash-b-36u1n783l0 {
    0% { background-color: var(--primary-100); box-shadow: 0 0 0 .2rem var(--primary-200); }
    100% { background-color: transparent; box-shadow: none; }
}

.chat-missing[b-36u1n783l0] {
    padding: .5rem .65rem;
    border: 1px solid var(--accent-amber-border);
    border-radius: var(--radius-md);
    background: var(--accent-amber-bg);
    color: var(--accent-amber);
}

.chat-build-fields[b-36u1n783l0] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Side by side in a wide window; in a small one the cards take the full width and the chat drops below. */
@media (max-width: 859.98px) {
    .chat-build[b-36u1n783l0] { flex-direction: column; }
    .chat-build-side[b-36u1n783l0], .chat-build-main[b-36u1n783l0] { flex-basis: auto; width: 100%; }
}

.chat-workspace[b-36u1n783l0] {
    min-height: var(--chat-height);
    overflow: hidden;
}

.chat-workspace .card-body[b-36u1n783l0] {
    min-height: 0;
}

.chat-scroll[b-36u1n783l0] {
    min-height: 24rem;
    max-height: 32rem;
    overflow-y: auto;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--bs-secondary) 5%, transparent), transparent 55%),
        var(--bs-body-bg);
}

.chat-avatar[b-36u1n783l0] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chat-avatar.designer[b-36u1n783l0] {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.chat-avatar.preview[b-36u1n783l0] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}

.chat-row[b-36u1n783l0] {
    display: flex;
    margin-bottom: .7rem;
}

.chat-row.assistant[b-36u1n783l0] {
    justify-content: flex-start;
}

.chat-row.user[b-36u1n783l0] {
    justify-content: flex-end;
}

.chat-bubble[b-36u1n783l0] {
    max-width: 86%;
    padding: .65rem .8rem;
    border-radius: .9rem;
    white-space: pre-wrap;
    line-height: 1.42;
    font-size:var(--fs-base);
    overflow-wrap: anywhere;
}

.chat-bubble.chat-rich[b-36u1n783l0] {
    white-space: normal;
    min-width: 0;
}

/* Markdown is rendered dynamically, so ::deep is required for scoped styles.
   Each prose block determines its own direction; technical blocks remain LTR. */
.chat-bubble.chat-rich[b-36u1n783l0]  p,
.chat-bubble.chat-rich[b-36u1n783l0]  li,
.chat-bubble.chat-rich[b-36u1n783l0]  h1,
.chat-bubble.chat-rich[b-36u1n783l0]  h2,
.chat-bubble.chat-rich[b-36u1n783l0]  h3,
.chat-bubble.chat-rich[b-36u1n783l0]  h4,
.chat-bubble.chat-rich[b-36u1n783l0]  blockquote,
.chat-bubble.chat-rich[b-36u1n783l0]  td,
.chat-bubble.chat-rich[b-36u1n783l0]  th {
    unicode-bidi: plaintext;
    text-align: start;
}

.chat-bubble.chat-rich[b-36u1n783l0]  p:last-child,
.chat-bubble.chat-rich[b-36u1n783l0]  ul:last-child,
.chat-bubble.chat-rich[b-36u1n783l0]  ol:last-child,
.chat-bubble.chat-rich[b-36u1n783l0]  pre:last-child,
.chat-bubble.chat-rich[b-36u1n783l0]  blockquote:last-child,
.chat-bubble.chat-rich[b-36u1n783l0]  table:last-child {
    margin-bottom: 0;
}

.chat-bubble.chat-rich[b-36u1n783l0]  pre {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    white-space: pre;
    overflow-x: auto;
    max-height: 22rem;
}

.chat-bubble.chat-rich[b-36u1n783l0]  :not(pre) > code {
    direction: ltr;
    unicode-bidi: isolate;
}

.chat-bubble.chat-rich[b-36u1n783l0]  blockquote {
    margin-inline: 0;
    padding-inline-start: .75rem;
    border-inline-start: .2rem solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.chat-bubble.chat-rich[b-36u1n783l0]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: .65rem;
    border-collapse: collapse;
}

.chat-bubble.chat-rich[b-36u1n783l0]  th,
.chat-bubble.chat-rich[b-36u1n783l0]  td {
    padding: .3rem .5rem;
    border: 1px solid var(--bs-border-color);
}

.chat-row.assistant .chat-bubble[b-36u1n783l0] {
    background: var(--bs-tertiary-bg);
    border-start-start-radius: .25rem;
}

.chat-row.user .chat-bubble[b-36u1n783l0] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-end-end-radius: .25rem;
}

.btn-xs[b-36u1n783l0] {
    padding: .12rem .42rem;
    font-size:var(--fs-2xs);
}

details > summary[b-36u1n783l0] {
    cursor: pointer;
    list-style: none;
}

details > summary[b-36u1n783l0]::-webkit-details-marker {
    display: none;
}

.typing[b-36u1n783l0] {
    display: flex;
    gap: .25rem;
    align-items: center;
    min-height: 2rem;
}

.typing span[b-36u1n783l0] {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--bs-secondary);
    animation: chat-pulse-b-36u1n783l0 1.1s infinite ease-in-out;
}

.typing span:nth-child(2)[b-36u1n783l0] { animation-delay: .15s; }
.typing span:nth-child(3)[b-36u1n783l0] { animation-delay: .3s; }

@keyframes chat-pulse-b-36u1n783l0 {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 1199.98px) {
    .chat-scroll[b-36u1n783l0] {
        max-height: 24rem;
    }
}

/* The live example stays in view while the settings beside it scroll. */
@media (min-width: 860px) {
    .chat-build-main[b-36u1n783l0] {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
    }

    .chat-build-main .chat-scroll[b-36u1n783l0] {
        min-height: 16rem;
        max-height: calc(100vh - 24rem);
    }
}
/* /UI_Components/InteractiveChatRunner.razor.rz.scp.css */
.chat-run[b-1ipetruccf] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
}

.chat-run-head[b-1ipetruccf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-sm);
}

.chat-run-title[b-1ipetruccf] { font-weight: 700; color: var(--ink-primary); }
.chat-run-sub[b-1ipetruccf] { font-weight: 400; color: var(--ink-secondary); }
.chat-run-turns[b-1ipetruccf] { color: var(--ink-secondary); font-size: var(--fs-xs); }

.chat-run-scroll[b-1ipetruccf] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--bs-secondary) 5%, transparent), transparent 55%),
        var(--bs-body-bg);
}

.chat-run-foot[b-1ipetruccf] {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border-light);
}

.chat-run-hint[b-1ipetruccf] { font-size: var(--fs-2xs); }

.chat-row[b-1ipetruccf] { display: flex; margin-bottom: .7rem; }
.chat-row.assistant[b-1ipetruccf] { justify-content: flex-start; }
.chat-row.user[b-1ipetruccf] { justify-content: flex-end; }

.chat-bubble[b-1ipetruccf] {
    max-width: 86%;
    padding: .65rem .8rem;
    border-radius: .9rem;
    line-height: 1.42;
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
    white-space: normal;
    min-width: 0;
}

.chat-row.assistant .chat-bubble[b-1ipetruccf] {
    background: var(--bs-tertiary-bg);
    border-start-start-radius: .25rem;
}

.chat-row.user .chat-bubble[b-1ipetruccf] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-end-end-radius: .25rem;
}

/* Markdown is rendered dynamically, so ::deep is required for scoped styles.
   Each prose block determines its own direction; technical blocks remain LTR. */
.chat-bubble[b-1ipetruccf]  p,
.chat-bubble[b-1ipetruccf]  li,
.chat-bubble[b-1ipetruccf]  h1,
.chat-bubble[b-1ipetruccf]  h2,
.chat-bubble[b-1ipetruccf]  h3,
.chat-bubble[b-1ipetruccf]  h4,
.chat-bubble[b-1ipetruccf]  blockquote,
.chat-bubble[b-1ipetruccf]  td,
.chat-bubble[b-1ipetruccf]  th {
    unicode-bidi: plaintext;
    text-align: start;
}

.chat-bubble[b-1ipetruccf]  p:last-child,
.chat-bubble[b-1ipetruccf]  ul:last-child,
.chat-bubble[b-1ipetruccf]  ol:last-child,
.chat-bubble[b-1ipetruccf]  pre:last-child {
    margin-bottom: 0;
}

.chat-bubble[b-1ipetruccf]  pre {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    white-space: pre;
    overflow-x: auto;
    max-height: 22rem;
}

.chat-bubble[b-1ipetruccf]  :not(pre) > code {
    direction: ltr;
    unicode-bidi: isolate;
}

.typing[b-1ipetruccf] { display: flex; gap: .25rem; align-items: center; min-height: 2rem; }

.typing span[b-1ipetruccf] {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: var(--bs-secondary);
    animation: chat-run-pulse-b-1ipetruccf 1.1s infinite ease-in-out;
}

.typing span:nth-child(2)[b-1ipetruccf] { animation-delay: .15s; }
.typing span:nth-child(3)[b-1ipetruccf] { animation-delay: .3s; }

@keyframes chat-run-pulse-b-1ipetruccf {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}
/* /UI_Components/LabExamBuilder.razor.rz.scp.css */
.lab-exam-builder[b-nzx8455oyk] {
    --lab-line: var(--bs-border-color);
}

.lab-build-workspace[b-nzx8455oyk] {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 1rem;
    max-width: none;
    align-items: start;
}

.lab-parameters-pane[b-nzx8455oyk],
.lab-output-pane[b-nzx8455oyk] {
    min-width: 0;
}

.lab-parameters-pane[b-nzx8455oyk] {
    position: sticky;
    top: calc(var(--examin-topbar-h) + 112px);
}

.lab-parameters-pane .lab-brief-card[b-nzx8455oyk],
.lab-output-pane .lab-editor-card[b-nzx8455oyk] {
    margin-bottom: 0 !important;
}

/* The brief is the control rail: one clear field per row, as in the question-builder
   reference, rather than narrow two-column inputs inside an already narrow sidebar. */
.lab-parameters-pane .row > [class*="col-"][b-nzx8455oyk] {
    flex: 0 0 100%;
    width: 100%;
}

.lab-output-empty[b-nzx8455oyk] {
    min-height: min(84vh, 940px);
    border: 1px dashed var(--lab-line);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .65rem;
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.lab-output-empty i[b-nzx8455oyk] {
    font-size: 2.5rem;
    color: var(--bs-primary);
}

.lab-output-empty strong[b-nzx8455oyk] {
    color: var(--bs-body-color);
    font-size: var(--fs-lg);
}

.lab-output-empty p[b-nzx8455oyk] {
    max-width: 28rem;
    margin: 0;
}

.lab-layout-only.build-3col-grid[b-nzx8455oyk] {
    grid-template-columns: 350px minmax(0, 1fr);
}

.lab-layout-only > .build-3col-col1[b-nzx8455oyk],
.lab-layout-only > .build-3col-col2[b-nzx8455oyk] {
    min-height: min(88vh, 1000px);
}

/* Tabs sit above the rail; align the first right-side panel with the output surface. */
.lab-layout-only > .lab-output-pane[b-nzx8455oyk] {
    margin-top: 2.35rem;
}

@media (max-width: 992px) {
    .lab-layout-only.build-3col-grid[b-nzx8455oyk] {
        grid-template-columns: 1fr;
    }

    .lab-layout-only > .lab-output-pane[b-nzx8455oyk] { margin-top: 0; }
}

.lab-exam-builder :is(.card, .border)[b-nzx8455oyk] {
    border-color: var(--lab-line) !important;
}

.lab-editor-card[b-nzx8455oyk] {
    border-color: var(--lab-line);
    overflow: hidden;
}

/* The activity output is a reading surface first: unit navigation above a single,
   uninterrupted document.  The detailed legacy editor remains available outside
   the layout-only lab composer. */
.lab-flat-output[b-nzx8455oyk] {
    min-height: min(84vh, 940px);
    background: var(--bs-body-bg);
    border: 1px solid var(--lab-line);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.lab-flat-header[b-nzx8455oyk] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem .75rem;
    border-bottom: 1px solid var(--lab-line);
}

.lab-flat-kicker[b-nzx8455oyk] {
    display: block;
    color: var(--bs-primary);
    font-size: var(--fs-2xs);
    font-weight: 750;
    letter-spacing: .08em;
}

.lab-flat-header h2[b-nzx8455oyk] {
    margin: .12rem 0 0;
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-base);
    font-weight: 750;
}

.lab-unit-tabs[b-nzx8455oyk] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .7rem 1.4rem;
    border-bottom: 1px solid var(--lab-line);
}

.lab-unit-tabs button[b-nzx8455oyk] {
    border: 1px solid color-mix(in srgb, var(--bs-primary) 30%, transparent);
    border-radius: .5rem;
    padding: .28rem .85rem;
    background: transparent;
    color: var(--bs-primary);
    font-size: var(--fs-2xs);
    font-weight: 750;
    line-height: 1.2;
}

.lab-unit-tabs button:hover[b-nzx8455oyk] {
    background: var(--bs-primary-bg-subtle);
}

.lab-unit-tabs button.is-active[b-nzx8455oyk] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-body-bg);
    box-shadow: 0 .2rem .45rem rgb(0 0 0 / 10%);
}

.lab-flat-document[b-nzx8455oyk] {
    padding: 1rem 1.4rem 2.5rem;
}

.lab-flat-document > h1[b-nzx8455oyk] {
    margin: 0 0 .55rem;
    color: var(--bs-primary-text-emphasis);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.lab-flat-summary[b-nzx8455oyk],
.lab-flat-intro[b-nzx8455oyk] {
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    line-height: 1.85;
}

.lab-flat-summary[b-nzx8455oyk] { margin: 0 0 1.2rem; }

.lab-flat-section[b-nzx8455oyk] {
    border-top: 1px solid var(--lab-line);
    padding-top: 1.25rem;
}

.lab-flat-section-heading[b-nzx8455oyk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.lab-flat-section-heading > h2[b-nzx8455oyk] {
    margin: 0;
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-xl);
    font-weight: 800;
}

.lab-section-duration[b-nzx8455oyk] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    white-space: nowrap;
}

.lab-flat-intro[b-nzx8455oyk] { margin: 0 0 1rem; }

.lab-flat-step[b-nzx8455oyk] {
    padding: 1.05rem 0;
    border-top: 1px solid color-mix(in srgb, var(--lab-line) 85%, transparent);
}

.lab-flat-step-heading[b-nzx8455oyk] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
}

.lab-flat-step-heading > span[b-nzx8455oyk] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.lab-flat-step h3[b-nzx8455oyk] {
    margin: 0;
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-lg);
    font-weight: 750;
}

.lab-flat-instruction[b-nzx8455oyk] {
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    line-height: 1.85;
}

.lab-flat-instruction :is(p, ul, ol, pre, table)[b-nzx8455oyk] { margin: 0 0 .75rem; }
.lab-flat-instruction pre[b-nzx8455oyk] {
    direction: ltr;
    padding: .85rem 1rem;
    border-radius: .65rem;
    background: #11231e;
    color: #f5fffb;
    text-align: left;
}

.lab-flat-action[b-nzx8455oyk] {
    margin-top: .8rem;
    padding: .7rem .85rem;
    border-inline-start: 3px solid var(--bs-primary);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
}

.lab-flat-action strong[b-nzx8455oyk] { color: var(--bs-primary-text-emphasis); }
.lab-flat-action p[b-nzx8455oyk] { margin: .25rem 0 0; line-height: 1.7; }

.lab-unit-summary[b-nzx8455oyk] {
    margin-top: 1.6rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 24%, var(--lab-line));
    border-radius: .8rem;
    background: var(--bs-primary-bg-subtle);
}

.lab-unit-summary header[b-nzx8455oyk] { margin-bottom: .8rem; }
.lab-unit-summary h2[b-nzx8455oyk] { margin: .18rem 0; color: var(--bs-primary-text-emphasis); font-size: var(--fs-lg); font-weight: 800; }
.lab-unit-summary header p[b-nzx8455oyk] { margin: 0; color: var(--bs-secondary-color); font-size: var(--fs-sm); }
.lab-unit-summary-closing[b-nzx8455oyk] { margin: 0 0 .8rem; line-height: 1.75; }
.lab-unit-summary-deliverable[b-nzx8455oyk] { border-inline-start: 3px solid var(--bs-primary); padding-inline-start: .75rem; margin-bottom: .8rem; font-size: var(--fs-sm); }
.lab-unit-summary-deliverable p[b-nzx8455oyk] { margin: .2rem 0 0; }
.lab-unit-summary-questions[b-nzx8455oyk] { display: grid; gap: .55rem; margin: 0 0 .9rem; padding-inline-start: 1.35rem; font-size: var(--fs-sm); }

.lab-output-revision[b-nzx8455oyk] {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-primary));
}

.lab-output-revision .lab-field-help[b-nzx8455oyk] { font-size: var(--fs-xs); }

.lab-editor-header[b-nzx8455oyk] {
    background: var(--bs-primary-bg-subtle);
    border-bottom: 1px solid var(--lab-line);
    padding: .7rem 1rem;
}

.lab-brief-body[b-nzx8455oyk] {
    padding-top: 0;
}

.lab-parameter-section[b-nzx8455oyk] {
    min-height: 0;
}

.lab-tabs-panel[b-nzx8455oyk] {
    padding: .35rem var(--space-2) !important;
}

/* The compact tab row keeps the right-hand authoring rail navigable as its brief grows. */
.lab-authoring-tabs[b-nzx8455oyk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 0;
    min-height: 1.65rem;
    margin: 0;
    background: transparent;
    border: 0;
}

.lab-authoring-tabs button[b-nzx8455oyk] {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .07rem .025rem;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .64rem;
    font-weight: 650;
    line-height: 1.15;
}

.lab-authoring-tabs button:hover[b-nzx8455oyk] {
    background: transparent;
    border-color: color-mix(in srgb, var(--bs-primary) 30%, transparent);
    color: var(--bs-primary);
}

.lab-authoring-tabs button.is-active[b-nzx8455oyk] {
    background: var(--bs-body-bg);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    color: var(--bs-primary);
    box-shadow: none;
}

.lab-skill-options[b-nzx8455oyk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .5rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
}

.lab-skill-options label[b-nzx8455oyk] { display: flex; align-items: center; gap: .3rem; }

.lab-evidence-options[b-nzx8455oyk] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
}

.lab-evidence-options label[b-nzx8455oyk] { display: flex; align-items: center; gap: .3rem; }

.lab-evidence-requirements[b-nzx8455oyk] {
    display: grid;
    gap: .35rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
}

.lab-evidence-requirements label[b-nzx8455oyk] { display: flex; align-items: center; gap: .3rem; }

/* Matches the collapsible section headers used by the quiz AI rail. */
.aigen-sec-label[b-nzx8455oyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #999;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.aigen-sec-label[b-nzx8455oyk]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e9ecef;
}

.aigen-sec-toggle[b-nzx8455oyk] {
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    text-align: start;
    cursor: pointer;
    color: var(--bs-secondary);
}

.aigen-sec-toggle:hover[b-nzx8455oyk] {
    color: var(--primary-900);
}

.aigen-sec-caret[b-nzx8455oyk] {
    font-size: var(--fs-2xs);
}

.aigen-sec-toggle[aria-expanded="false"][b-nzx8455oyk] {
    margin-bottom: 0;
}

.lab-field-status[b-nzx8455oyk] {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 500;
}

.lab-field-status.required[b-nzx8455oyk] {
    color: var(--bs-danger-text-emphasis);
    font-weight: 700;
}

.lab-summary-mode-help[b-nzx8455oyk],
.lab-field-help[b-nzx8455oyk] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .4rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    line-height: 1.55;
}

.lab-summary-mode-help i[b-nzx8455oyk],
.lab-field-help i[b-nzx8455oyk] { color: var(--bs-primary); margin-top: .08rem; }

.lab-brief-card .card-body[b-nzx8455oyk],
.lab-editor-card .card-body[b-nzx8455oyk] {
    padding: 1.15rem;
}

.lab-generate-button[b-nzx8455oyk] {
    margin-top: 1rem;
    font-weight: 600;
}

.lab-editor-meta[b-nzx8455oyk] {
    padding: .85rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--lab-line);
}

.lab-studio-grid[b-nzx8455oyk] {
    align-items: stretch;
}

.lab-outline-pane[b-nzx8455oyk] {
    border-inline-start: 1px solid var(--lab-line);
    max-height: 70vh;
    overflow-y: auto;
    padding-left: 1rem;
}

.lab-section-card[b-nzx8455oyk] {
    background: var(--bs-body-bg);
}

.lab-section-head[b-nzx8455oyk] {
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--lab-line);
}

.lab-section-head input[b-nzx8455oyk] {
    max-width: 100% !important;
}

.lab-step-nav[b-nzx8455oyk] {
    min-height: 2.35rem;
}

.lab-step-nav.btn-outline-secondary[b-nzx8455oyk] {
    color: var(--bs-body-color);
    border-color: transparent;
    background: transparent;
}

.lab-step-nav.btn-outline-secondary:hover[b-nzx8455oyk] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.lab-step-nav.btn-primary[b-nzx8455oyk] {
    box-shadow: none;
}

.lab-step-nav > span:first-child[b-nzx8455oyk] {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .72rem;
    font-weight: 800;
}

.lab-step-nav.btn-primary > span:first-child[b-nzx8455oyk] {
    background: rgb(255 255 255 / 20%);
    color: white;
}

.lab-add-section[b-nzx8455oyk] {
    width: 100%;
    border-style: dashed;
}

.lab-final-proof[b-nzx8455oyk] {
    background: var(--bs-tertiary-bg);
}

.lab-step-pane[b-nzx8455oyk] {
    min-height: 28rem;
}

.lab-step-editor[b-nzx8455oyk] {
    min-height: 100%;
    background: var(--bs-body-bg);
}

.lab-step-editor > :first-child[b-nzx8455oyk] {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--lab-line);
}

@media (max-width: 991.98px) {
    .lab-build-workspace[b-nzx8455oyk] {
        grid-template-columns: 1fr;
    }

    .lab-parameters-pane[b-nzx8455oyk] {
        position: static;
    }

    .lab-outline-pane[b-nzx8455oyk] {
        border-inline-start: 0;
        border-bottom: 1px solid var(--lab-line);
        max-height: none;
        overflow: visible;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
}
/* /UI_Components/MathDocument.razor.rz.scp.css */
.math-doc[b-du9r3xvwez] {
    min-height: 260px;
    overflow: hidden;
    background: var(--examin-surface, #fff);
}

.math-doc-toolbar[b-du9r3xvwez] {
    background: var(--examin-surface, #fff);
    flex-shrink: 0;
    z-index: 2;
}

.math-doc-glyph[b-du9r3xvwez] {
    font-family: "Cambria Math", "Times New Roman", serif;
    font-style: italic;
}

.math-doc-palette[b-du9r3xvwez] {
    width: min(20rem, 90vw);
}

.math-doc-grid[b-du9r3xvwez] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
    gap: 4px;
}

.math-doc-grid.is-symbols[b-du9r3xvwez] {
    grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
}

.math-doc-cell[b-du9r3xvwez] {
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: var(--fs-base);
    padding: 4px 2px;
    line-height: 1.2;
}

/* The desk the page lies on, and the page: the width of a sheet, so a line breaks where it
   would on paper, whatever the width of the pane. */
.math-doc-desk[b-du9r3xvwez] {
    min-height: 0;
    overflow: auto;
    padding: 12px;
    background: #e8ecf1;
}

.math-doc-page[b-du9r3xvwez] {
    max-width: 52rem;
    min-height: 100%;
    margin-inline: auto;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    cursor: text;
}

.math-doc-page[b-du9r3xvwez]  .ProseMirror {
    min-height: 20rem;
    outline: none;
    font-size: var(--fs-base);
    line-height: 1.8;
}

.math-doc-page[b-du9r3xvwez]  .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: inline-start;
    height: 0;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.math-doc-page[b-du9r3xvwez]  table {
    border-collapse: collapse;
    margin: .5rem 0;
}

.math-doc-page[b-du9r3xvwez]  td,
.math-doc-page[b-du9r3xvwez]  th {
    border: 1px solid #cbd5e1;
    padding: .25rem .5rem;
    min-width: 3rem;
    vertical-align: top;
}

/* A formula in the line: sits on the text's baseline, and shows its box only while written in. */
.math-doc-page[b-du9r3xvwez]  math-field.live-math {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 1.05em;
    vertical-align: middle;
    background: transparent;
    direction: ltr;
}

.math-doc-page[b-du9r3xvwez]  math-field.live-math::part(menu-toggle),
.math-doc-page[b-du9r3xvwez]  math-field.live-math::part(virtual-keyboard-toggle) {
    display: none;
}

.math-doc-page[b-du9r3xvwez]  math-field.live-math:hover {
    border-color: #dbe4ee;
}

.math-doc-page[b-du9r3xvwez]  .is-editing > math-field.live-math {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 5%, #fff);
}

/* A formula on a line of its own, centred. */
.math-doc-page[b-du9r3xvwez]  .live-math-display {
    display: flex;
    justify-content: center;
    margin: .5rem 0;
}

.math-doc-page[b-du9r3xvwez]  .live-math-display math-field {
    display: inline-block;
    min-width: 3em;
    font-size: 1.2em;
}

.math-doc-page[b-du9r3xvwez]  .ProseMirror-selectednode {
    outline: none;
}

.math-doc-hint[b-du9r3xvwez] {
    flex-shrink: 0;
    background: var(--examin-surface, #fff);
}
/* /UI_Components/PdfDocumentRunner.razor.rz.scp.css */
.sheet-run[b-bf1gxzemgv] {
    display: flex;
    height: 100%;
    min-height: 0;
}

.sheet-run-answers[b-bf1gxzemgv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
}

.sheet-run-head[b-bf1gxzemgv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.sheet-run-head-title[b-bf1gxzemgv] {
    font-size: var(--fs-sm);
    color: var(--ink-primary);
}

.sheet-run-save[b-bf1gxzemgv] {
    margin-inline-start: auto;
    font-size: var(--fs-xs);
    color: var(--ink-secondary);
}

.sheet-run-list[b-bf1gxzemgv] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* The answers' scrollbar on their outer edge, away from the paper: the list scrolls in the other
   direction from the page, and what is in it reads in the page's own. */
.sheet-run-list:dir(rtl)[b-bf1gxzemgv] { direction: ltr; }
.sheet-run-list:dir(ltr)[b-bf1gxzemgv] { direction: rtl; }
.sheet-run-list > :dir(rtl)[b-bf1gxzemgv] { direction: rtl; }
.sheet-run-list > :dir(ltr)[b-bf1gxzemgv] { direction: ltr; }

.sheet-slot[b-bf1gxzemgv] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: var(--space-3);
}

/* The whole box takes a click, not only the first line of it. */
.sheet-slot[b-bf1gxzemgv]  .ProseMirror {
    min-height: 5rem;
}

/* One document for the whole paper: a page to write on, not a box. */
.sheet-slot.is-single[b-bf1gxzemgv]  .ProseMirror {
    min-height: 60vh;
}

.sheet-slot.is-single[b-bf1gxzemgv]  .answer-pad {
    height: 70vh;
}

.sheet-slot.is-answered[b-bf1gxzemgv] {
    border-color: var(--primary-200);
}

.sheet-slot-head[b-bf1gxzemgv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.sheet-slot-num[b-bf1gxzemgv] {
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    color: var(--ink-primary);
}

.sheet-slot-page[b-bf1gxzemgv] {
    padding: 0;
    font-size: var(--fs-xs);
    text-decoration: none;
}

.sheet-slot-points[b-bf1gxzemgv] {
    margin-inline-start: auto;
    font-size: var(--fs-xs);
    color: var(--ink-secondary);
}

.sheet-slot-done[b-bf1gxzemgv] {
    color: var(--primary-700);
}

/* Typing or handwriting, for a question that takes both: two tabs over the one answer shown. */
.sheet-answer-tabs[b-bf1gxzemgv] {
    display: flex;
    gap: .25rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--border-light);
}
.sheet-answer-tab[b-bf1gxzemgv] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .3rem .75rem;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, .35rem) var(--radius-sm, .35rem) 0 0;
    background: transparent;
    color: var(--ink-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.sheet-answer-tab:hover[b-bf1gxzemgv] { color: var(--ink-primary); }
.sheet-answer-tab.is-active[b-bf1gxzemgv] {
    border-color: var(--border-light);
    border-bottom-color: var(--surface-card);
    background: var(--surface-card);
    color: var(--primary-700, var(--bs-primary));
}
.sheet-answer-dot[b-bf1gxzemgv] {
    width: .45rem;
    height: .45rem;
    margin-inline-start: .35rem;
    border-radius: 50%;
    background: var(--primary-500, var(--bs-primary));
}
/* /UI_Components/PdfMathInput.razor.rz.scp.css */
.pdf-math-input-host[b-yq28f7c9wk] {
    width: 100%;
    height: 100%;
    min-height: 0;
    direction: ltr;
}

.pdf-math-input-host[b-yq28f7c9wk]  math-field {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    outline: 0;
    padding: .4rem .55rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    direction: ltr;
    font-size: 16px;
    --caret-color: var(--primary-700);
    --text-color: var(--bs-body-color);
    --smart-fence-color: var(--bs-body-color);
    --selection-background-color: rgba(37, 99, 235, .18);
    --contains-highlight-background-color: rgba(13, 148, 136, .12);
}

.pdf-math-input-host[b-yq28f7c9wk]  math-field::part(menu-toggle) {
    display: none;
}

.pdf-math-input-host[b-yq28f7c9wk]  math-field[read-only] {
    cursor: default;
}
/* /UI_Components/PdfSheetCompose.razor.rz.scp.css */
/* The paper takes the middle and wants the room; the basket holds a few small fields per line. */
/* Two columns: the rail and the paper - no summary panel, the rail is one, so the paper gets the room. */
.sheet-compose.build-3col-grid.build-3col-with-basket[b-3lan3whit3] {
    grid-template-columns: 400px minmax(0, 1fr);
}

/* Grid items default to their content's width at the least; on a narrow screen that pushes the
   rail past the edge. Each column may shrink to the one it is given. */
.sheet-compose > *[b-3lan3whit3] {
    min-width: 0;
}

/* The rail holds the answer list now, which can run longer than the window; a sticky rail that
   tall would leave its end out of reach. It scrolls with the page; the paper stays in view. */
.sheet-compose.build-3col-grid.build-3col-with-basket > .build-3col-col1[b-3lan3whit3] {
    position: static;
}

.sheet-compose-paper[b-3lan3whit3] {
    padding: 0 !important;
    overflow: hidden;
    height: calc(100vh - 7rem);
    min-height: 480px;
    position: sticky;
    top: 5rem;
}

.sheet-compose-empty[b-3lan3whit3] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    text-align: center;
    color: var(--ink-secondary);
}

.sheet-compose-empty > .bi[b-3lan3whit3] {
    font-size: var(--fs-3xl);
    opacity: .4;
}

.sheet-compose-drop[b-3lan3whit3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    text-align: center;
    cursor: pointer;
}

.sheet-compose-drop:hover[b-3lan3whit3] {
    border-color: var(--primary-500);
}

.sheet-compose-drop.is-busy[b-3lan3whit3] {
    cursor: progress;
}

.sheet-compose-drop > .bi[b-3lan3whit3] {
    font-size: var(--fs-2xl);
    opacity: .5;
}

.sheet-compose-name[b-3lan3whit3] {
    min-width: 0;
}

.sheet-compose-file[b-3lan3whit3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sheet-compose-file > .bi[b-3lan3whit3] {
    font-size: var(--fs-xl);
}

.sheet-compose-single[b-3lan3whit3] {
    padding: var(--space-3);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    margin-bottom: var(--space-3);
}

.sheet-compose-confirm[b-3lan3whit3] {
    padding: var(--space-2);
    border: 1px solid var(--accent-amber-border);
    background: var(--accent-amber-bg);
    border-radius: var(--radius-sm);
}

/* One line per question: its number, how it is answered, the page it is on, and a menu for the
   rest - the number is what the eye runs down, so it leads and is the heaviest thing in the row. */
.sheet-compose-list[b-3lan3whit3] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    overflow-x: hidden;
}

.sheet-compose-row[b-3lan3whit3] {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.sheet-compose-row:last-child[b-3lan3whit3] {
    border-bottom: 0;
}

.sheet-compose-line[b-3lan3whit3] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.sheet-compose-label[b-3lan3whit3] {
    width: 3.25rem;
    flex-shrink: 0;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--ink-primary);
}

.sheet-compose-label:hover[b-3lan3whit3] {
    border-color: var(--border-medium);
}

.sheet-compose-label:focus[b-3lan3whit3] {
    outline: none;
    border-color: var(--primary-500);
    background: var(--surface-card);
}

.sheet-compose-points[b-3lan3whit3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
}

.sheet-compose-points input[b-3lan3whit3] {
    width: 3.25rem;
    padding: 2px 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-primary);
    -moz-appearance: textfield;
}

.sheet-compose-points input[b-3lan3whit3]::-webkit-inner-spin-button,
.sheet-compose-points input[b-3lan3whit3]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sheet-compose-points input:focus[b-3lan3whit3] {
    outline: none;
    border-color: var(--primary-500);
}

.sheet-compose-total[b-3lan3whit3] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--primary-800);
}

.sheet-compose-total.is-off[b-3lan3whit3] {
    color: var(--accent-amber);
}

.sheet-compose-mode[b-3lan3whit3],
.sheet-compose-page[b-3lan3whit3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--ink-secondary);
    font-size: var(--fs-2xs);
    white-space: nowrap;
}

.sheet-compose-mode:hover[b-3lan3whit3],
.sheet-compose-page:hover[b-3lan3whit3] {
    border-color: var(--primary-400);
    color: var(--primary-800);
}

.sheet-compose-more[b-3lan3whit3] {
    padding: 0 4px;
    color: var(--ink-muted);
}

@media (max-width: 992px) {
    .sheet-compose.build-3col-grid.build-3col-with-basket[b-3lan3whit3] {
        grid-template-columns: 1fr;
    }

    .sheet-compose-paper[b-3lan3whit3] {
        position: static;
        height: 70vh;
    }

    .sheet-compose-list[b-3lan3whit3] {
        max-height: none;
    }
}

/* Where the questions (or the solution) come from: three equal ways in, one under the other. */
.sheet-source-options[b-3lan3whit3] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.sheet-source-option[b-3lan3whit3] {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    margin: 0;
    padding: .6rem .75rem;
    text-align: start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, .5rem);
    background: var(--surface-card, #fff);
    color: var(--ink-primary);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sheet-source-option:hover:not(:disabled)[b-3lan3whit3] {
    border-color: var(--primary-500, var(--bs-primary));
    background: color-mix(in srgb, var(--bs-primary) 5%, var(--surface-card, #fff));
}
.sheet-source-option:disabled[b-3lan3whit3],
.sheet-source-option.is-busy[b-3lan3whit3] { opacity: .6; cursor: default; }
.sheet-source-option > .bi[b-3lan3whit3] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm, .35rem);
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    color: var(--primary-700, var(--bs-primary));
    font-size: 1.05rem;
}
.sheet-source-option-text[b-3lan3whit3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.sheet-source-tag[b-3lan3whit3] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: .4rem;
    color: var(--primary-700, var(--bs-primary));
}
.sheet-compose-icon[b-3lan3whit3] { color: var(--primary-700, var(--bs-primary)); }
.sheet-source-option.is-open[b-3lan3whit3] { border-color: var(--primary-500, var(--bs-primary)); }
.sheet-source-paste[b-3lan3whit3] { resize: vertical; font-size: var(--fs-xs); min-height: 7rem; }
.sheet-shape[b-3lan3whit3] { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.sheet-list-make[b-3lan3whit3] {
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    margin-bottom: var(--space-3);
}
.sheet-list-make.is-waiting[b-3lan3whit3] { opacity: .75; }
.sheet-list-count[b-3lan3whit3] { width: 4.5rem; flex: none; text-align: center; }
.sheet-list-make .btn-primary[b-3lan3whit3] { box-shadow: none; }
.sheet-list-or[b-3lan3whit3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
    color: var(--ink-secondary);
    font-size: var(--fs-2xs);
}
.sheet-list-or[b-3lan3whit3]::before, .sheet-list-or[b-3lan3whit3]::after { content: ""; flex: 1; border-top: 1px solid var(--border-light); }

.sheet-source-advice summary[b-3lan3whit3] { cursor: pointer; color: var(--primary-700, var(--bs-primary)); }
.sheet-source-advice ul[b-3lan3whit3] { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; color: var(--ink-secondary); }
.sheet-source-advice li[b-3lan3whit3] { display: flex; gap: .5rem; align-items: baseline; }
.sheet-source-advice li > .bi[b-3lan3whit3] { color: var(--ink-muted); flex: none; }
/* /UI_Components/PdfSheetViewer.razor.rz.scp.css */
.pdf-sheet[b-ossiefi9rj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--canvas-bg);
}

.pdf-sheet-bar[b-ossiefi9rj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.pdf-sheet-title[b-ossiefi9rj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-sheet-pages[b-ossiefi9rj] {
    font-size: var(--fs-xs);
    color: var(--ink-secondary);
    white-space: nowrap;
}

.pdf-sheet-tools[b-ossiefi9rj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.pdf-sheet-zoom[b-ossiefi9rj] {
    min-width: 4rem;
    font-variant-numeric: tabular-nums;
}

.pdf-sheet-scroll[b-ossiefi9rj] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.pdf-sheet-leaves[b-ossiefi9rj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    min-width: min-content;
}

.pdf-sheet-leaves[b-ossiefi9rj]  .pdf-sheet-page {
    flex-shrink: 0;
    background: #fff;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.pdf-sheet-leaves[b-ossiefi9rj]  .pdf-sheet-page canvas {
    display: block;
}

.pdf-sheet-state[b-ossiefi9rj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: var(--ink-secondary);
}
/* /UI_Components/QuizBasket.razor.rz.scp.css */
/* The paper window: its head, then the viewer filling the rest. */
.quiz-basket-paper-head[b-u82njll359] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.quiz-basket-paper[b-u82njll359] {
    flex: 1 1 auto;
    min-height: 0;
}

/* A PDF paper's summary: label over value, three short facts. */
.quiz-basket-sheet[b-u82njll359] {
    margin: var(--space-2) 0 var(--space-2);
    display: grid;
    gap: 2px var(--space-2);
    font-size: var(--fs-xs);
}

.quiz-basket-sheet dt[b-u82njll359] {
    font-weight: var(--fw-semibold);
    color: var(--ink-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-1);
}

.quiz-basket-sheet dd[b-u82njll359] {
    margin: 0;
    padding-inline-start: 20px;
    color: var(--ink-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /UI_Components/RichContentEditor.razor.rz.scp.css */
.pdf-document-editor-shell[b-2o0eauxy9f] {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    overflow: hidden;
    background: var(--bs-secondary-bg);
}

.pdf-document-toolbar[b-2o0eauxy9f] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--examin-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.pdf-document-toolbar select[b-2o0eauxy9f] { width: auto; min-width: 8.5rem; }

/* Toolbar buttons are flat, not bordered. Twenty-odd Bootstrap outline buttons in one
   wrapping row draw twenty-odd boxes, which is most of why the toolbar read as busy.
   A background appears on hover and stays on when the state is on. */
.rc-tool[b-2o0eauxy9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .35rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.rc-tool:hover:not(:disabled)[b-2o0eauxy9f] { background: var(--bs-tertiary-bg); }
.rc-tool:focus-visible[b-2o0eauxy9f] { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.rc-tool:disabled[b-2o0eauxy9f] { opacity: .45; cursor: default; }

/* The pressed state, driven by what the editor reports for the current selection. */
.rc-tool-on[b-2o0eauxy9f] {
    background: var(--primary-900);
    border-color: var(--primary-900);
    color: #fff;
}

.rc-tool-on:hover:not(:disabled)[b-2o0eauxy9f] { background: var(--primary-800); }

/* Insert actions that open a panel rather than toggle a mark. */
.rc-tool-accent[b-2o0eauxy9f] { color: var(--primary-700); }
.rc-tool-accent:hover:not(:disabled)[b-2o0eauxy9f] { background: var(--primary-100); }

.rc-tool-recording[b-2o0eauxy9f] {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

/* Related controls sit together, and the seam between groups is a rule rather than a
   free-floating divider element, so it survives the row wrapping. Logical properties
   keep it on the correct side in both directions. */
.rc-group[b-2o0eauxy9f] {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}

.rc-group + .rc-group[b-2o0eauxy9f] {
    border-inline-start: 1px solid var(--bs-border-color);
    padding-inline-start: .45rem;
    margin-inline-start: .1rem;
}
.toolbar-divider[b-2o0eauxy9f] { width: 1px; height: 1.65rem; background: var(--bs-border-color); margin: 0 .15rem; }

.toolbar-color-swatch[b-2o0eauxy9f] {
    width: 1.85rem;
    height: 1.85rem;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .35rem;
    background: var(--examin-surface);
    cursor: pointer;
}
.toolbar-color-swatch[b-2o0eauxy9f]::-webkit-color-swatch-wrapper { padding: 0; }
.toolbar-color-swatch[b-2o0eauxy9f]::-webkit-color-swatch { border: none; border-radius: .15rem; }

.pdf-document-formula-panel[b-2o0eauxy9f] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--examin-surface));
    color: var(--bs-body-color);
}

.pdf-document-formula-input[b-2o0eauxy9f] { height: 3.25rem; }

.pdf-document-mermaid-panel[b-2o0eauxy9f] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--examin-surface));
    color: var(--bs-body-color);
}

.pdf-document-mermaid-body[b-2o0eauxy9f] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: .6rem;
}

.pdf-document-mermaid-input[b-2o0eauxy9f] {
    direction: ltr;
    font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
    font-size:var(--fs-sm);
    resize: vertical;
}

.pdf-document-mermaid-preview[b-2o0eauxy9f] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: .5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .35rem;
    background: var(--examin-surface);
}

.pdf-document-mermaid-preview svg[b-2o0eauxy9f] { max-width: 100%; height: auto; }
.pdf-document-mermaid-preview.has-error[b-2o0eauxy9f] { color: var(--bs-danger-text-emphasis); font-size:var(--fs-sm); direction: ltr; text-align: start; }

.pdf-document-tool-panel[b-2o0eauxy9f],
.pdf-document-voice-panel[b-2o0eauxy9f] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .65rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--examin-surface));
}

.pdf-document-quick-panel[b-2o0eauxy9f] {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.5fr) auto;
    gap: 1rem;
    padding: .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--examin-surface));
}

/* Whichever panel is open (table/quick-insert/voice/formula) sits directly below the
   sticky toolbar in DOM order — pin it too, at an offset equal to the compact toolbar's
   own height, so its rows/columns inputs stay reachable while the editable content below
   scrolls, instead of scrolling out of view along with that content. */
.is-compact .pdf-document-formula-panel[b-2o0eauxy9f],
.is-compact .pdf-document-tool-panel[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel[b-2o0eauxy9f] {
    position: sticky;
    top: 2.25rem;
    z-index: 1;
}

.quick-insert-section + .quick-insert-section[b-2o0eauxy9f] {
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--bs-border-color);
}

.table-size-input[b-2o0eauxy9f] { width: 4.25rem; }

.is-compact .table-size-input[b-2o0eauxy9f] {
    width: 2.75rem;
    padding: .15rem .35rem;
    font-size:var(--fs-sm);
}

/* The table/quick-insert/voice/formula panels reused the same buttons/labels/badges as the
   full paper-mode editor (default Bootstrap .btn-sm sizing) — oversized next to the shrunk
   compact toolbar directly above them. Match that same smaller proportion here too. */
.is-compact .pdf-document-tool-panel[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel[b-2o0eauxy9f],
.is-compact .pdf-document-formula-panel[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel[b-2o0eauxy9f] {
    padding: .35rem .5rem;
    gap: .3rem;
}

.is-compact .pdf-document-tool-panel .btn[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel .btn[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel .btn[b-2o0eauxy9f],
.is-compact .pdf-document-formula-panel .btn[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel .btn[b-2o0eauxy9f] {
    padding: .15rem .4rem;
    font-size:var(--fs-sm);
}

.is-compact .pdf-document-tool-panel strong[b-2o0eauxy9f],
.is-compact .pdf-document-tool-panel label[b-2o0eauxy9f],
.is-compact .pdf-document-tool-panel .small[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel strong[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel label[b-2o0eauxy9f],
.is-compact .pdf-document-quick-panel .small[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel strong[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel label[b-2o0eauxy9f],
.is-compact .pdf-document-voice-panel .small[b-2o0eauxy9f],
.is-compact .pdf-document-formula-panel strong[b-2o0eauxy9f],
.is-compact .pdf-document-formula-panel label[b-2o0eauxy9f],
.is-compact .pdf-document-formula-panel .small[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel strong[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel label[b-2o0eauxy9f],
.is-compact .pdf-document-mermaid-panel .small[b-2o0eauxy9f] {
    font-size:var(--fs-sm);
}
.formula-preset[b-2o0eauxy9f] { direction: auto; }

.voice-formula-preview[b-2o0eauxy9f] {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) minmax(180px, auto);
    align-items: center;
    gap: .5rem;
}

.voice-math-preview-host[b-2o0eauxy9f]  math-field {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: var(--examin-surface);
    padding-inline: .5rem;
}

.pdf-document-voice-panel[b-2o0eauxy9f] { display: block; }

.dictation-live-text[b-2o0eauxy9f] {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    min-height: 2.5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    background: var(--examin-surface);
}

.pdf-document-paper[b-2o0eauxy9f] {
    padding: clamp(.65rem, 2vw, 1.5rem);
    overflow: auto;
}

.pdf-document-page[b-2o0eauxy9f] {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 820px);
    min-height: 600px;
    margin: 0 auto;
    background: #fff;
    color: #172033;
    box-shadow: 0 3px 18px rgba(15, 23, 42, .15);
}

.pdf-document-editable[b-2o0eauxy9f] {
    box-sizing: border-box;
    width: 100%;
    min-height: 600px;
    padding: clamp(1.5rem, 4vw, 3rem);
    outline: none;
    background: transparent;
    font: 16px/1.3 Rubik, Arial, sans-serif;
    direction: auto;
}

.pdf-document-editable[b-2o0eauxy9f]  .ProseMirror {
    outline: none;
}

.pdf-document-editable:empty[b-2o0eauxy9f]::before {
    content: attr(data-placeholder);
    color: var(--ink-faint);
    pointer-events: none;
}

.pdf-document-editable.is-rtl-placeholder:empty[b-2o0eauxy9f] {
    text-align: right;
}

/* dir="auto" on the editable root only resolves ONE direction for the whole element and
   cascades it to every child via ordinary CSS inheritance — it does NOT give each paragraph
   its own independent auto-detection. So a Latin/number-only line typed after a Hebrew line
   inherits Hebrew's RTL and misaligns. unicode-bidi: plaintext is the CSS equivalent of
   dir="auto" but applies PER ELEMENT, so each block below detects its own direction from
   its own first strong character, matching what a user typing line-by-line actually expects.
   Scoped to [dir="auto"] specifically — unicode-bidi: plaintext ignores the dir attribute
   entirely per spec, so applying it universally would silently defeat the RTL/LTR toolbar
   buttons' explicit dir="rtl"/"ltr" override on any block, re-detecting from content instead. */
.pdf-document-editable[b-2o0eauxy9f]  :is(p, div, h1, h2, h3, li, blockquote)[dir="auto"] { unicode-bidi: plaintext; }
.pdf-document-editable[b-2o0eauxy9f]  :is(h1, h2, h3) { margin-block: .8em .35em; }
.pdf-document-editable[b-2o0eauxy9f]  p { margin-block: .2em; }
.pdf-document-editable[b-2o0eauxy9f]  table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.pdf-document-editable[b-2o0eauxy9f]  :is(td, th) { min-width: 5rem; padding: .5rem; border: 1px solid var(--border-medium); }
.pdf-document-editable[b-2o0eauxy9f]  img { max-width: 100%; height: auto; cursor: pointer; }
/* Resizable image NodeView (ts-src/rich-editor/extensions/resizable-image.ts) — the resize
   handle only needs to be reachable while the node is selected; deleting is already free via
   ProseMirror's default Backspace-on-NodeSelection behavior, no UI needed for that. */
.pdf-document-editable[b-2o0eauxy9f]  .rich-image-wrap { position: relative; display: inline-block; max-width: 100%; }
.pdf-document-editable[b-2o0eauxy9f]  .rich-image-wrap img { display: block; }
.pdf-document-editable[b-2o0eauxy9f]  .rich-image-resize-handle {
    position: absolute;
    inset-inline-end: -.35rem;
    bottom: -.35rem;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--primary-700);
    border: 1px solid #fff;
    cursor: nwse-resize;
    display: none;
}
.pdf-document-editable[b-2o0eauxy9f]  .rich-image-wrap.is-selected { outline: 2px solid var(--primary-700); outline-offset: 2px; }
.pdf-document-editable[b-2o0eauxy9f]  .rich-image-wrap.is-selected .rich-image-resize-handle { display: block; }
.pdf-document-editable[b-2o0eauxy9f]  pre {
    direction: ltr;
    background: #1e1e2e;
    color: #e5e7eb;
    border-radius: .4rem;
    padding: .75rem;
    margin-block: .6em;
    overflow-x: auto;
    font-size:var(--fs-sm);
    line-height: 1.5;
}
/* Mirrors .build-md :not(pre) > code in app.css (the read-only display's inline-code style) so
   the live editor doesn't look plain/unstyled next to how the content actually renders.
   color: inherit (not Bootstrap's hardcoded pink) so a <font color> ancestor can still win. */
.pdf-document-editable[b-2o0eauxy9f]  :not(pre) > code {
    font-size: .82em;
    direction: ltr;
    unicode-bidi: isolate;
    color: inherit;
}
.pdf-document-editable[b-2o0eauxy9f]  :not(pre) > code:not(:has(> font[color])) { color: var(--bs-danger-text-emphasis); }
.pdf-document-editable[b-2o0eauxy9f]  pre code {
    font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
    white-space: pre;
}
.pdf-document-editable[b-2o0eauxy9f]  .mermaid-diagram-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin-block: .6em;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: var(--bs-tertiary-bg);
    cursor: pointer;
}
.pdf-document-editable[b-2o0eauxy9f]  .mermaid-diagram-block svg { max-width: 100%; height: auto; }
.pdf-document-editable[b-2o0eauxy9f]  .mermaid-diagram-block.has-error { color: var(--bs-danger-text-emphasis); font-size:var(--fs-sm); direction: ltr; }
.pdf-document-editable[b-2o0eauxy9f]  .mermaid-diagram-block.is-selected { outline: 2px solid var(--primary-700); outline-offset: 2px; }

.pdf-document-editable[b-2o0eauxy9f]  math-field {
    display: inline-block;
    min-width: 3.5rem;
    min-height: 2rem;
    line-height: 2rem;
    border: 1px solid var(--border-medium);
    background: #dbe4f0;
    color: var(--ink-primary);
    border-radius: .25rem;
    padding-inline: .3rem;
    vertical-align: middle;
    --text-color: var(--ink-primary);
    --smart-fence-color: var(--ink-primary);
}

.is-readonly[b-2o0eauxy9f] { border: 0; border-radius: 0; height: 100%; }
.is-readonly .pdf-document-paper[b-2o0eauxy9f] { height: 100%; padding: 1rem; }
.is-readonly .pdf-document-page[b-2o0eauxy9f],
.is-readonly .pdf-document-editable[b-2o0eauxy9f] { min-height: 100%; }

/* ---------- Compact/themed mode — for a question-body form, not a simulated PDF page.
   The default look above is a deliberate literal white "printed page" (fixed 820px width,
   600px min-height, hardcoded paper colors) — right for the PDF/document exam preview,
   wrong for a small themed field in a form. This drops the page-box illusion entirely and
   uses the app's own theme tokens (so it also matches dark mode, which the paper look
   never did — it's intentionally paper-colored regardless of theme). ---------- */
/* Base .pdf-document-editor-shell sets overflow:hidden to clip rounded corners — but
   overflow:hidden also counts as a "scroll container" for position:sticky purposes even
   when nothing actually overflows it, which traps the toolbar/panels' sticky positioning
   against this shell instead of letting it reach the real scrolling ancestor further up
   (the question-list panel). Compact mode has no paper box-shadow to protect anyway, so
   drop the clip here in exchange for sticky actually working. */
.pdf-document-editor-shell.is-compact[b-2o0eauxy9f] {
    overflow: visible;
}

.is-compact .pdf-document-toolbar[b-2o0eauxy9f] {
    padding: .3rem;
    gap: .2rem;
}

.is-compact .rc-tool[b-2o0eauxy9f] {
    min-width: 1.6rem;
    height: 1.7rem;
    padding: .15rem .35rem;
    font-size: var(--fs-sm);
}

.is-compact .toolbar-divider[b-2o0eauxy9f] {
    height: 1.3rem;
}

.is-compact .pdf-document-paper[b-2o0eauxy9f] {
    padding: 0;
}

.is-compact .pdf-document-page[b-2o0eauxy9f] {
    width: 100%;
    min-height: 6rem;
    margin: 0;
    background: var(--examin-surface);
    color: var(--bs-body-color);
    box-shadow: none;
}

.is-compact .pdf-document-editable[b-2o0eauxy9f] {
    min-height: 3rem;
    padding: .75rem 1rem;
    font-size:var(--fs-md);
}

.is-compact .pdf-document-editable:empty[b-2o0eauxy9f]::before {
    color: var(--bs-secondary-color);
}

.is-compact .pdf-document-editable[b-2o0eauxy9f]  :is(td, th) {
    border-color: var(--bs-border-color);
}

.is-compact .pdf-document-editable[b-2o0eauxy9f]  math-field {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    --text-color: var(--bs-body-color);
    --smart-fence-color: var(--bs-body-color);
}

@media (max-width: 760px) {
    .pdf-document-formula-panel[b-2o0eauxy9f] { align-items: stretch; flex-direction: column; }
    .pdf-document-mermaid-panel[b-2o0eauxy9f] { align-items: stretch; flex-direction: column; }
    .pdf-document-mermaid-body[b-2o0eauxy9f] { grid-template-columns: 1fr; }
    .pdf-document-quick-panel[b-2o0eauxy9f] { grid-template-columns: 1fr; }
    .quick-insert-section + .quick-insert-section[b-2o0eauxy9f] { padding-inline-start: 0; border-inline-start: 0; }
    .voice-formula-preview[b-2o0eauxy9f] { grid-template-columns: 1fr; }
    .pdf-document-page[b-2o0eauxy9f],
    .pdf-document-editable[b-2o0eauxy9f] { min-height: 460px; }
    .pdf-document-editable[b-2o0eauxy9f] { padding: 1.25rem; }
}

/* The pad for writing a formula by hand, in the formula panel: a short board, not a page. */
.formula-hand-pad[b-2o0eauxy9f] { height: 260px; border: 1px solid var(--border-light); border-radius: .5rem; overflow: hidden; }



/* A formula picked up whole in the text - by a click - is outlined, so it is plain that the formula button
   will open it. */
.pdf-document-editable[b-2o0eauxy9f]  .ProseMirror-selectednode { outline: 2px solid var(--primary-500, #3fab80); outline-offset: 2px; border-radius: 4px; }

/* A writing area that starts at a useful height and has a handle at its corner, to drag it taller or
   shorter. The page and the writing inside it fill the area, so a click anywhere in it is a click in the text. */
/* The box is closed all round: a firmer line, and the writing inside it follows the box's rounded
   bottom corners instead of poking square over them. */
.is-resizable.pdf-document-editor-shell[b-2o0eauxy9f] {
    border-color: var(--border-medium, #b9c6bd);
}

.is-resizable .pdf-document-toolbar[b-2o0eauxy9f] {
    border-radius: calc(.6rem - 1px) calc(.6rem - 1px) 0 0;
}

.is-resizable .pdf-document-paper[b-2o0eauxy9f] {
    border-radius: 0 0 calc(.6rem - 1px) calc(.6rem - 1px);
    display: flex;
    flex-direction: column;
    resize: vertical;
    height: 11rem;
    min-height: 7rem;
    max-height: 85vh;
}

.is-resizable .pdf-document-page[b-2o0eauxy9f] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.is-resizable .pdf-document-editable[b-2o0eauxy9f] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.is-resizable .pdf-document-editable[b-2o0eauxy9f]  .ProseMirror {
    flex: 1;
}
/* /UI_Components/StudentAiHelperPanel.razor.rz.scp.css */
.student-helper[b-omin8wkouc] {
    width: 24rem;
    max-width: 42vw;
    min-width: 20rem;
    background: var(--bs-body-bg);
    border-inline-start: 1px solid var(--bs-border-color);
    box-shadow: 0 0 1.2rem rgba(0, 0, 0, .12);
}

.helper-avatar[b-omin8wkouc] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}

.helper-context[b-omin8wkouc],
.student-helper footer[b-omin8wkouc] {
    background: var(--bs-tertiary-bg);
}

.helper-disclosure[b-omin8wkouc] {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border-bottom: 1px solid var(--bs-warning-border-subtle);
}

.helper-messages[b-omin8wkouc] {
    min-height: 0;
}

.helper-message[b-omin8wkouc] {
    max-width: 88%;
    min-width: 0;
    padding: .6rem .75rem;
    border-radius: .8rem;
    font-size:var(--fs-sm);
    overflow-wrap: anywhere;
}

.helper-message.user[b-omin8wkouc] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-end-end-radius: .2rem;
}

.helper-message.assistant[b-omin8wkouc] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-start-start-radius: .2rem;
}

.btn-xs[b-omin8wkouc] {
    padding: .12rem .42rem;
    font-size:var(--fs-2xs);
}

@media (max-width: 767.98px) {
    .student-helper[b-omin8wkouc] {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        z-index: 30;
        border: 0;
    }
}
/* /UI_Components/TopLayerDialog.razor.rz.scp.css */
.ex-top-layer[b-caqzlzjrz8] {
    width: min(1100px, 94vw);
    height: 90vh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ex-top-layer[open][b-caqzlzjrz8] {
    display: flex;
    flex-direction: column;
}

.ex-top-layer[b-caqzlzjrz8]::backdrop {
    background: rgba(0, 0, 0, .45);
}

/* The whole window, edge to edge. */
.ex-top-layer.is-full[b-caqzlzjrz8] {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
/* /UI_Components/VoiceMathEditor.razor.rz.scp.css */
.voice-math-editor[b-28djopx08l] {
    min-height: 430px;
    background: var(--examin-surface, #fff);
    color: var(--bs-body-color);
    overflow: hidden;
}

.voice-math-toolbar[b-28djopx08l] {
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.voice-math-local-badge[b-28djopx08l] {
    color: #0f766e;
    background: rgba(13, 148, 136, .11);
    border: 1px solid rgba(13, 148, 136, .24);
}

.voice-math-main[b-28djopx08l] {
    min-width: 0;
}

.voice-math-compose[b-28djopx08l] {
    background: color-mix(in srgb, var(--examin-surface, #fff) 94%, #14b8a6);
}

.voice-math-source[b-28djopx08l] {
    min-height: 62px;
    resize: vertical;
}

.voice-math-listening[b-28djopx08l] {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #b91c1c;
}

.voice-math-pulse[b-28djopx08l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .5);
    animation: voice-math-pulse-b-28djopx08l 1.4s infinite;
}

@keyframes voice-math-pulse-b-28djopx08l {
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.voice-math-preview[b-28djopx08l] {
    background: var(--bs-body-bg);
}

.voice-math-document[b-28djopx08l] {
    background: var(--bs-tertiary-bg);
}

.voice-math-empty[b-28djopx08l] {
    border-style: dashed !important;
    background: var(--examin-surface, #fff);
}

.voice-math-block[b-28djopx08l] {
    background: var(--examin-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.voice-math-assistant[b-28djopx08l] {
    width: 290px;
    min-width: 250px;
    background: color-mix(in srgb, var(--surface-card) 92%, var(--primary-700));
}

.voice-math-question[b-28djopx08l] {
    background: var(--examin-surface, #fff);
    border-inline-start: 3px solid var(--primary-700) !important;
}

.voice-math-question .btn[b-28djopx08l] {
    white-space: normal;
}

.voice-math-source-fragment[b-28djopx08l] {
    background: rgba(139, 92, 246, .09);
    color: var(--bs-emphasis-color);
    border: 1px solid rgba(139, 92, 246, .2);
}

.voice-math-dictionary summary[b-28djopx08l] {
    cursor: pointer;
    color: var(--bs-secondary-color);
}

.voice-math-dictionary-row[b-28djopx08l] {
    background: var(--examin-surface, #fff);
    border: 1px solid var(--bs-border-color);
}

.voice-math-editor[b-28djopx08l]  .pdf-math-input-host math-field {
    width: 100%;
    min-height: 44px;
    padding: .45rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--examin-surface, #fff);
    color: var(--bs-body-color);
    direction: ltr;
    font-size:var(--fs-lg);
}

@media (max-width: 900px) {
    .voice-math-body[b-28djopx08l] {
        flex-direction: column;
        overflow: auto;
    }

    .voice-math-main[b-28djopx08l] {
        flex: none;
    }

    .voice-math-assistant[b-28djopx08l] {
        width: 100%;
        min-width: 0;
        min-height: 240px;
        border-inline-start: 0 !important;
        border-top: 1px solid var(--bs-border-color);
    }

    .voice-math-document[b-28djopx08l] {
        min-height: 250px;
    }
}
/* /UI_Layouts/ActivityLayout.razor.rz.scp.css */
.exam-shell[b-g8qru2nrfy] {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* dynamic viewport height — handles mobile browser chrome */
    overflow: hidden;
}

.exam-header[b-g8qru2nrfy] {
    height: 48px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.exam-body[b-g8qru2nrfy] {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 1rem;
}

/* Blazor error strip */
#blazor-error-ui[b-g8qru2nrfy] {
    background: #b32121;
    color: white;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    font-size:var(--fs-base);
}

#blazor-error-ui .reload[b-g8qru2nrfy] {
    color: #ffe;
    font-weight: 600;
    margin-inline-start: .5rem;
}

#blazor-error-ui .dismiss[b-g8qru2nrfy] {
    cursor: pointer;
    position: absolute;
    inset-inline-end: .75rem;
    top: .5rem;
    font-weight: 700;
}
/* /UI_Layouts/DemoLayout.razor.rz.scp.css */
/* Blazor error strip — hidden until Blazor's JS reveals it on an actual error */
#blazor-error-ui[b-j347igenmo] {
    background: #b32121;
    color: white;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    font-size:var(--fs-base);
}

#blazor-error-ui .reload[b-j347igenmo] {
    color: #ffe;
    font-weight: 600;
    margin-inline-start: .5rem;
}

#blazor-error-ui .dismiss[b-j347igenmo] {
    cursor: pointer;
    position: absolute;
    inset-inline-end: .75rem;
    top: .5rem;
    font-weight: 700;
}
/* /UI_Layouts/MainLayout.razor.rz.scp.css */
/* Skip-to-content link — invisible until keyboard-focused, then shown as a
   proper button pinned to the top so a keyboard user can bypass the sidebar
   nav without needing to tab through every link on every page load. */
.visually-hidden-focusable:focus[b-290aeqbmp6],
.visually-hidden-focusable:focus-within[b-290aeqbmp6] {
    position: fixed !important;
    top: .5rem;
    inset-inline-start: .5rem;
    z-index: 10000;
    background: var(--primary-700);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
}

/* Blazor error strip */
#blazor-error-ui[b-290aeqbmp6] {
    background: var(--bs-danger);
    color: white;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    font-size: var(--fs-sm);
    box-shadow: 0 -2px 6px rgba(0,0,0,.3);
}

#blazor-error-ui .reload[b-290aeqbmp6] {
    color: #ffe;
    font-weight: 600;
    margin-inline-start: .5rem;
}

#blazor-error-ui .dismiss[b-290aeqbmp6] {
    cursor: pointer;
    position: absolute;
    inset-inline-end: .75rem;
    top: .5rem;
    font-weight: 700;
}

/* Public (NotAuthorized) content — same footprint as the old single navbar layout */
.examin-public-content[b-290aeqbmp6] {
    min-height: calc(100vh - 56px);
}

/* ---------- Authenticated app shell: sidebar + topbar ---------- */
.examin-app-shell[b-290aeqbmp6] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .examin-app-shell[b-290aeqbmp6] {
        flex-direction: row;
    }
}

.examin-sidebar[b-290aeqbmp6] {
    /* flex-shrink:0 is the actual fix — .examin-sidebar is a flex child of .examin-app-shell
       (row direction at lg+) next to .examin-main (flex:1 1 auto). A bare `width` on a flex
       item is only a flex-basis hint, still shrinkable by default (flex-shrink:1) — so wide
       page content (e.g. school-admin/profile's form) was squeezing the sidebar down to as
       little as 137px, measured live, vs. the 205px on a page with narrower content. Neither
       matched the declared 240px. Found 2026-07-29 via direct computed-width comparison
       across pages, not visually — the difference wasn't obvious from a single screenshot. */
    width: 240px;
    flex-shrink: 0;
}

/* At the lg breakpoint .offcanvas-lg itself is plain `display:block` (Bootstrap only makes it
   flex below the breakpoint), so its `.offcanvas-body` child — despite being `display:flex`
   itself — never receives a real height from its block parent and collapses to content size.
   Force it to actually fill the (flex-stretched) height of .examin-sidebar. */
.examin-sidebar .offcanvas-body[b-290aeqbmp6] {
    min-height: 100%;
}

/* Bootstrap also forces .offcanvas-lg/.offcanvas-body background to transparent!important
   at the lg breakpoint (so the offcanvas can sit inline as a plain container) — so the
   sidebar's actual color lives one level deeper, on this wrapper, instead of fighting !important. */
.sidebar-fill[b-290aeqbmp6] {
    background: var(--examin-sidebar-bg);
    color: var(--examin-sidebar-fg, #fff);
    min-height: 100%;
}

.sidebar-brand[b-290aeqbmp6] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.1rem 1.25rem;
    color: var(--examin-sidebar-fg, #fff);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    text-decoration: none;
}

.sidebar-brand:hover[b-290aeqbmp6] {
    color: #fff;
}

.sidebar-brand-mark[b-290aeqbmp6] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.offcanvas-brand-mark[b-290aeqbmp6] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    vertical-align: middle;
}

.sidebar-nav[b-290aeqbmp6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .5rem .75rem 1rem;
}

/* NavLink is a framework component — it doesn't forward the scoped-CSS attribute onto the
   <a> it renders, so a plain `.sidebar-link` rule here silently never matches. `::deep`
   is Blazor's documented escape hatch for styling markup produced by a child component. */
.sidebar-nav[b-290aeqbmp6]  .sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--examin-sidebar-fg-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.sidebar-nav[b-290aeqbmp6]  .sidebar-link:hover {
    background: rgba(255,255,255,.08);
    color: var(--examin-sidebar-fg, #fff);
}

.sidebar-nav[b-290aeqbmp6]  .sidebar-link.active {
    background: var(--examin-sidebar-active, rgba(255,255,255,.16));
    color: #fff;
}

.sidebar-divider[b-290aeqbmp6] {
    border: none;
    border-top: 1px solid rgba(255,255,255,.14);
    margin: .5rem 1rem;
}

.examin-main[b-290aeqbmp6] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Institutional header. Sticky: the activity list runs long and the school
   context, language and logout should stay reachable without scrolling back. */
.examin-topbar[b-290aeqbmp6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--examin-topbar-h);
    padding: .6rem 1rem;
    /* Translucent paper + blur, the way the shipped app's topbar is built, so
       content scrolling underneath stays faintly visible instead of hard-cut. */
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--ink-primary);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 900;
}

/* Brand lockup: crest + wordmark + the tenant this session belongs to. The slug
   used to appear only in the page <title>, so a teacher with two schools open in
   two tabs could not tell them apart from the page itself. */
.examin-brand[b-290aeqbmp6] {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.examin-crest[b-290aeqbmp6] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 8px 18px rgba(37, 122, 89, .22);
}

.examin-brand-text[b-290aeqbmp6] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.examin-brand-text strong[b-290aeqbmp6] {
    font-size: var(--fs-base);
    font-weight: var(--fw-heavy);
    color: var(--ink-primary);
}

.examin-brand-tenant[b-290aeqbmp6] {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: var(--primary-700);
}

/* Identity cluster. An initial in a circle reads faster than a full email
   address, and the address stays available as the element's title. */
.examin-user[b-290aeqbmp6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.examin-avatar[b-290aeqbmp6] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--primary-100);
    border: 1px solid var(--primary-200);
    color: var(--primary-900);
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
}

.examin-user-meta[b-290aeqbmp6] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.examin-user-name[b-290aeqbmp6] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--ink-primary);
    max-width: 16rem;
}

.examin-user-role[b-290aeqbmp6] {
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    max-width: 16rem;
}

/* NavLink renders its own <a>, so ::deep is needed to reach the underline the
   active tab draws — same escape hatch as the sidebar links above. */
.examin-topbar[b-290aeqbmp6]  .ex-tab {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md, 6px);
    transition: var(--transition-fast);
}

.examin-topbar[b-290aeqbmp6]  .ex-tab:hover {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
    color: var(--ink-primary);
}

.examin-topbar[b-290aeqbmp6]  .ex-tab.active {
    color: var(--primary-900);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
    font-weight: var(--fw-heavy, 700);
}

.examin-topbar[b-290aeqbmp6]  .ex-tab.active i {
    color: var(--primary-700);
}

.examin-topbar[b-290aeqbmp6]  .ex-tab.active::after {
    content: "";
    position: absolute;
    inset-inline: 0.5rem;
    bottom: -1px;
    height: 3px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--primary-700);
}

.examin-content[b-290aeqbmp6] {
    flex: 1 1 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .examin-content[b-290aeqbmp6] {
        padding: 1.5rem 2.25rem 3rem;
    }
}
/* /UI_Layouts/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ws70dqf3jg],
.components-reconnect-repeated-attempt-visible[b-ws70dqf3jg],
.components-reconnect-failed-visible[b-ws70dqf3jg],
.components-pause-visible[b-ws70dqf3jg],
.components-resume-failed-visible[b-ws70dqf3jg],
.components-rejoining-animation[b-ws70dqf3jg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-retrying[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-failed[b-ws70dqf3jg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ws70dqf3jg] {
    display: block;
}


#components-reconnect-modal[b-ws70dqf3jg] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ws70dqf3jg 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ws70dqf3jg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ws70dqf3jg 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ws70dqf3jg]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ws70dqf3jg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ws70dqf3jg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ws70dqf3jg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ws70dqf3jg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ws70dqf3jg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ws70dqf3jg] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ws70dqf3jg] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ws70dqf3jg] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ws70dqf3jg] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ws70dqf3jg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ws70dqf3jg] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ws70dqf3jg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ws70dqf3jg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ws70dqf3jg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /UI_Pages/Demo/TeacherDashboardMock.razor.rz.scp.css */
/* Quizora-inspired skin — cream/mint/green, one fixed look, no dark-mode variant on purpose. */

.mock-shell[b-chj1q7eo4b] {
    --mock-ink: #18342a;
    --mock-muted: #6d7d75;
    --mock-green: #257a59;
    --mock-green-dark: #17533d;
    --mock-mint: #e1f2e8;
    --mock-cream: #f5f3ec;
    --mock-paper: #fffefa;
    --mock-line: #dce4de;
    --mock-coral: #e98d72;

    min-height: 100vh;
    background: var(--mock-cream);
    color: var(--mock-ink);
    font-family: "Heebo", Arial, sans-serif;
    padding-bottom: 60px;
}

.mock-banner[b-chj1q7eo4b] {
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mock-green-dark);
    background: var(--mock-mint);
    border-bottom: 1px solid var(--mock-line);
    padding: 7px 12px;
}

/* ── Topbar ─────────────────────────────────────────────────────────── */

.mock-topbar[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--mock-paper);
    border-bottom: 1px solid var(--mock-line);
    padding: 12px 28px;
    flex-wrap: wrap;
}

.mock-brand[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mock-brand-mark[b-chj1q7eo4b] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mock-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.mock-brand div[b-chj1q7eo4b] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mock-brand strong[b-chj1q7eo4b] {
    font-size: 1.02rem;
}

.mock-brand small[b-chj1q7eo4b] {
    color: var(--mock-muted);
    font-size: .72rem;
}

.mock-nav[b-chj1q7eo4b] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mock-nav button[b-chj1q7eo4b] {
    border: 0;
    background: transparent;
    color: var(--mock-muted);
    font-family: inherit;
    font-weight: 700;
    font-size: .82rem;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.mock-nav button:hover[b-chj1q7eo4b] {
    background: var(--mock-mint);
    color: var(--mock-green-dark);
}

.mock-nav button.active[b-chj1q7eo4b] {
    background: var(--mock-green);
    color: #fff;
}

.mock-user[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.mock-avatar[b-chj1q7eo4b] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mock-mint);
    color: var(--mock-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
}

.mock-user div[b-chj1q7eo4b] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mock-user strong[b-chj1q7eo4b] {
    font-size: .84rem;
}

.mock-user small[b-chj1q7eo4b] {
    color: var(--mock-muted);
    font-size: .68rem;
}

.mock-signout[b-chj1q7eo4b] {
    border: 1px solid var(--mock-line);
    background: transparent;
    color: var(--mock-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: .8rem;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
}

.mock-signout:hover[b-chj1q7eo4b] {
    background: var(--mock-mint);
}

/* ── Main / hero ────────────────────────────────────────────────────── */

.mock-main[b-chj1q7eo4b] {
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 28px 0;
}

.mock-hero[b-chj1q7eo4b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.mock-kicker[b-chj1q7eo4b] {
    display: inline-block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mock-green);
    margin-bottom: 6px;
}

.mock-hero-copy h1[b-chj1q7eo4b] {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 4px;
}

.mock-hero-copy p[b-chj1q7eo4b] {
    color: var(--mock-muted);
    margin: 0;
    font-size: .92rem;
}

.mock-stats[b-chj1q7eo4b] {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
}

.mock-stats article[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mock-paper);
    border: 1px solid var(--mock-line);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(24, 52, 42, .05);
}

.mock-stats strong[b-chj1q7eo4b] {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.mock-stats span[b-chj1q7eo4b] {
    color: var(--mock-muted);
    font-size: .7rem;
    font-weight: 600;
}

.mock-stat-icon[b-chj1q7eo4b] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.mock-stat-icon.live[b-chj1q7eo4b] { background: var(--mock-green-dark); color: #fff; }
.mock-stat-icon.grading[b-chj1q7eo4b] { background: #fbe6de; color: var(--mock-coral); }
.mock-stat-icon.total[b-chj1q7eo4b] { background: var(--mock-mint); color: var(--mock-green); }
.mock-stat-icon.courses[b-chj1q7eo4b] { background: #eee7f6; color: #7c4a9e; }

/* ── Toolbar ────────────────────────────────────────────────────────── */

.mock-toolbar[b-chj1q7eo4b] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    background: var(--mock-paper);
    border: 1px solid var(--mock-line);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 20px;
}

.mock-search[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mock-cream);
    border-radius: 999px;
    padding: 7px 14px;
    max-width: 260px;
    flex: 1 1 200px;
}

.mock-search i[b-chj1q7eo4b] {
    color: var(--mock-muted);
    font-size: .85rem;
}

.mock-search input[b-chj1q7eo4b] {
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: .82rem;
    color: var(--mock-ink);
    width: 100%;
}

.mock-chips[b-chj1q7eo4b] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mock-chips button[b-chj1q7eo4b] {
    border: 1px solid var(--mock-line);
    background: transparent;
    color: var(--mock-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: .76rem;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.mock-chips button:hover[b-chj1q7eo4b] {
    border-color: var(--mock-green);
    color: var(--mock-green-dark);
}

.mock-chips button.active[b-chj1q7eo4b] {
    background: var(--mock-green);
    border-color: var(--mock-green);
    color: #fff;
}

/* ── Course cards ───────────────────────────────────────────────────── */

.mock-courses[b-chj1q7eo4b] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mock-course-card[b-chj1q7eo4b] {
    background: var(--mock-paper);
    border: 1px solid var(--mock-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(24, 52, 42, .04);
}

.mock-course-head[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mock-line);
    flex-wrap: wrap;
}

.mock-course-dot[b-chj1q7eo4b] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mock-course-head strong[b-chj1q7eo4b] {
    font-size: .92rem;
}

.mock-course-badge[b-chj1q7eo4b] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--mock-muted);
    background: var(--mock-paper);
    border: 1px solid var(--mock-line);
    border-radius: 999px;
    padding: 2px 9px;
}

.mock-course-count[b-chj1q7eo4b],
.mock-course-total[b-chj1q7eo4b] {
    font-size: .74rem;
    color: var(--mock-muted);
}

.mock-course-total[b-chj1q7eo4b] {
    margin-inline-start: auto;
}

.mock-empty-row[b-chj1q7eo4b] {
    padding: 18px 16px;
    color: var(--mock-muted);
    font-size: .82rem;
    text-align: center;
}

.mock-activity-row[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mock-line);
}

.mock-activity-row:last-child[b-chj1q7eo4b] {
    border-bottom: 0;
}

.mock-activity-icon[b-chj1q7eo4b] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}

.mock-activity-main[b-chj1q7eo4b] {
    flex: 1 1 auto;
    min-width: 0;
}

.mock-activity-title[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .88rem;
}

.mock-activity-title span:first-child[b-chj1q7eo4b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-activity-meta[b-chj1q7eo4b] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--mock-muted);
    font-size: .72rem;
    margin-top: 3px;
}

.mock-activity-meta i[b-chj1q7eo4b] {
    margin-inline-end: 4px;
    opacity: .7;
}

.mock-badge[b-chj1q7eo4b] {
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

.mock-badge.draft[b-chj1q7eo4b] { background: var(--mock-cream); color: var(--mock-muted); border: 1px solid var(--mock-line); }
.mock-badge.ready[b-chj1q7eo4b] { background: var(--mock-mint); color: var(--mock-green-dark); }
.mock-badge.grading[b-chj1q7eo4b] { background: #fbe6de; color: #b95a3c; }
.mock-badge.graded[b-chj1q7eo4b] { background: #fff; color: var(--mock-green); border: 1px solid var(--mock-green); }
.mock-badge.live[b-chj1q7eo4b] { background: var(--mock-green-dark); color: #fff; }

.mock-activity-action[b-chj1q7eo4b] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: .78rem;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
}

.mock-activity-action.green[b-chj1q7eo4b] { background: var(--mock-green); color: #fff; }
.mock-activity-action.coral[b-chj1q7eo4b] { background: var(--mock-coral); color: #fff; }
.mock-activity-action.outline[b-chj1q7eo4b] { background: transparent; color: var(--mock-ink); border: 1px solid var(--mock-line); }

@media (max-width: 720px) {
    .mock-stats[b-chj1q7eo4b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .mock-topbar[b-chj1q7eo4b] {
        justify-content: center;
    }

    .mock-user[b-chj1q7eo4b] {
        margin-inline-start: 0;
    }
}
/* /UI_Pages/Home.razor.rz.scp.css */
/* Styles for Home.razor have been migrated to wwwroot/css/marketing.css */
/* /UI_Pages/Teacher/ActivityCreate.razor.rz.scp.css */
/* One field, so the panel should not run the full width of a desktop screen. */
.ex-create-narrow[b-s0sryf7txy] {
    max-width: 620px;
}
/* /UI_Pages/Teacher/AiActivityGenerator.razor.rz.scp.css */
/* .build-3col-grid / .build-3col-col2 / .build-results-empty now live in wwwroot/app.css
   (global) — shared with WebContentLab, which needs the same 2-column layout. */
/* /UI_Pages/Teacher/SchoolDesignSettings.razor.rz.scp.css */
/* The settings column and the showcase beside it come from the shared tool-settings layout
   (app.css: .tool-edit-body.is-side, .tool-card, .tool-field). These are this page's own pieces. */

.school-design-actions[b-q2txudug9i] {
    display: flex;
    gap: .5rem;
    margin-top: .85rem;
}
.school-design-actions .btn-primary[b-q2txudug9i] { flex: 1 1 auto; }

/* A color: the picker and its hex value on one line. */
.school-design-color[b-q2txudug9i] {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.school-design-color .form-control-color[b-q2txudug9i] {
    flex: 0 0 2.25rem;
    height: 1.9rem;
    padding: .15rem;
}

.school-design-logo[b-q2txudug9i] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-start;
    padding: .35rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.school-design-logo img[b-q2txudug9i] {
    height: 2.5rem;
    max-width: 10rem;
    object-fit: contain;
}

/* The showcase is the school's whole design, so it runs its full length rather than in a window. */
.school-design-preview[b-q2txudug9i] {
    min-width: 0;
}
.school-design-preview-bar[b-q2txudug9i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-card);
    font-size: var(--fs-sm);
}
/* /UI_Pages/Teacher/SchoolTemplateSettings.razor.rz.scp.css */
/* The settings column and the paper beside it come from the shared tool-settings layout
   (app.css: .tool-edit-body.is-side, .tool-card, .tool-field). These are this page's own pieces. */

.school-template-actions[b-m0kn8an3s9] {
    display: flex;
    gap: .5rem;
    margin-top: .85rem;
}
.school-template-actions .btn-primary[b-m0kn8an3s9] { flex: 1 1 auto; }

.school-template-preview[b-m0kn8an3s9] {
    min-width: 0;
}
.school-template-preview-bar[b-m0kn8an3s9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-card);
    font-size: var(--fs-sm);
}

/* The paper is a whole page of its own; it scrolls inside its frame, as a printed page would turn. */
.school-template-paper[b-m0kn8an3s9] {
    display: block;
    width: 100%;
    height: min(80vh, 60rem);
    border: 0;
}