/* /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);
}
/* /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: 44px;
    height: 44px;
    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-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;
}

.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;
}

.handwriting-readonly .handwriting-hint[b-9grbaqyksf] {
    display: none !important;
}
/* /UI_Components/InteractiveChatBuilder.razor.rz.scp.css */
.interactive-builder[b-36u1n783l0] {
    --chat-height: 34rem;
}

.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: 20rem;
    max-height: 27rem;
    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;
    }
}
/* /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/PdfAnswerBoxEditor.razor.rz.scp.css */
.pdf-box-editor[b-4m6n47hxnq] {
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    overflow: hidden;
    background: var(--examin-surface);
}

.pdf-editor-toolbar[b-4m6n47hxnq] {
    background: var(--examin-surface);
}

.pdf-editor-layout[b-4m6n47hxnq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 720px;
}

.pdf-render-host[b-4m6n47hxnq] {
    position: relative;
    overflow: auto;
    padding: 12px;
    background: var(--surface-subtle);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pdf-page-stage[b-4m6n47hxnq] {
    position: relative;
    flex: 0 0 auto;
    background: white;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .22);
}

.pdf-page-canvas[b-4m6n47hxnq] {
    display: block;
    direction: ltr;
}

.pdf-answer-layer[b-4m6n47hxnq] {
    position: absolute;
    inset: 0;
    touch-action: none;
}

.pdf-answer-layer.adding[b-4m6n47hxnq] {
    cursor: crosshair;
    background: rgba(13, 148, 136, .06);
}

.pdf-answer-layer[b-4m6n47hxnq]  .pdf-editor-box {
    position: absolute;
    min-width: 48px;
    min-height: 28px;
    background: rgba(255, 255, 255, .82);
    border: 2px solid var(--primary-700);
    border-radius: 4px;
    cursor: move;
    box-sizing: border-box;
    color: var(--ink-primary);
}

.pdf-answer-layer[b-4m6n47hxnq]  .pdf-editor-box.selected {
    border-color: var(--primary-700);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

.pdf-answer-layer[b-4m6n47hxnq]  .pdf-editor-box-label {
    position: absolute;
    top: 2px;
    left: 5px;
    right: 24px;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-answer-layer[b-4m6n47hxnq]  .pdf-editor-box-hint {
    position: absolute;
    top: 1px;
    right: 5px;
    font-size: 11px;
    opacity: .65;
}

.pdf-answer-layer[b-4m6n47hxnq]  .pdf-editor-resize {
    position: absolute;
    width: 14px;
    height: 14px;
    right: -2px;
    bottom: -2px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 45%, var(--primary-700) 46%, var(--primary-700) 62%, transparent 63%);
}

.pdf-box-inspector[b-4m6n47hxnq] {
    background: var(--examin-surface);
}

.pdf-type-icon[b-4m6n47hxnq] {
    display: inline-block;
    min-width: 1.25rem;
    direction: ltr;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.pdf-loading-state[b-4m6n47hxnq],
.pdf-error-state[b-4m6n47hxnq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--examin-surface);
    z-index: 5;
}

.pdf-error-state[b-4m6n47hxnq] {
    display: none;
    color: var(--bs-danger-text-emphasis);
}

.pdf-ready .pdf-loading-state[b-4m6n47hxnq] {
    display: none;
}

.pdf-error .pdf-loading-state[b-4m6n47hxnq] {
    display: none;
}

.pdf-error .pdf-error-state[b-4m6n47hxnq] {
    display: flex;
}

@media (max-width: 991.98px) {
    .pdf-editor-layout[b-4m6n47hxnq] {
        grid-template-columns: 1fr;
    }

    .pdf-box-inspector[b-4m6n47hxnq] {
        border-left: 0 !important;
        border-top: 1px solid var(--bs-border-color);
    }
}
/* /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/PdfTypedExam.razor.rz.scp.css */
.pdf-typed-exam[b-1j5femgbgu] {
    min-height: 0;
    background: var(--bs-secondary-bg);
}

.pdf-student-toolbar[b-1j5femgbgu] {
    background: var(--examin-surface);
    flex-shrink: 0;
    z-index: 2;
}

.pdf-student-host[b-1j5femgbgu] {
    position: relative;
    min-height: 420px;
    overflow: auto;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--surface-subtle);
}

.pdf-page-stage[b-1j5femgbgu] {
    position: relative;
    flex: 0 0 auto;
    background: white;
    box-shadow: 0 5px 22px rgba(15, 23, 42, .24);
}

.pdf-page-canvas[b-1j5femgbgu] {
    display: block;
    direction: ltr;
}

.pdf-answer-layer[b-1j5femgbgu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pdf-typed-box[b-1j5femgbgu] {
    position: absolute;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .94);
    border: 1.5px solid #0d9488;
    border-radius: 4px;
    padding: 17px 3px 3px;
    pointer-events: auto;
    overflow: hidden;
}

.pdf-typed-box:focus-within[b-1j5femgbgu] {
    border-color: var(--primary-700);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
    z-index: 2;
}

.pdf-typed-box label[b-1j5femgbgu] {
    position: absolute;
    top: 1px;
    left: 5px;
    right: 5px;
    height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f766e;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
}

.pdf-typed-box textarea[b-1j5femgbgu],
.pdf-typed-box input[b-1j5femgbgu] {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    outline: 0;
    resize: none;
    padding: 2px 4px;
    background: transparent;
    color: #111827;
    font: 13px/1.25 Rubik, Arial, sans-serif;
    direction: auto;
}

.pdf-number-unit[b-1j5femgbgu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(54px, .55fr);
    height: 100%;
    direction: ltr;
}

.pdf-number-unit .pdf-unit-input[b-1j5femgbgu] {
    border-inline-start: 1px solid rgba(15, 118, 110, .28);
    font-weight: 600;
}

.pdf-typed-box textarea[readonly][b-1j5femgbgu],
.pdf-typed-box input[readonly][b-1j5femgbgu] {
    cursor: default;
}

.pdf-typed-box.pdf-response-handwriting[b-1j5femgbgu] {
    padding: 17px 0 0;
    background: rgba(255, 255, 255, .88);
}

.pdf-loading-state[b-1j5femgbgu],
.pdf-error-state[b-1j5femgbgu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--examin-surface);
    z-index: 5;
}

.pdf-error-state[b-1j5femgbgu] {
    display: none;
    color: var(--bs-danger-text-emphasis);
}

.pdf-ready .pdf-loading-state[b-1j5femgbgu],
.pdf-error .pdf-loading-state[b-1j5femgbgu] {
    display: none;
}

.pdf-error .pdf-error-state[b-1j5femgbgu] {
    display: flex;
}
/* /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; }
}
/* /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-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;
}

/* Flat green, not a gradient — the mock used a gradient here and the shipped app
   does not. */
.examin-crest[b-290aeqbmp6] {
    width: 38px;
    height: 38px;
    background: var(--primary-700);
    color: #fff;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: var(--fs-lg);
    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.active {
    color: var(--primary-900);
}

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

@media (min-width: 768px) {
    .examin-content[b-290aeqbmp6] {
        padding: 2rem 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 */
/* Public landing page.

   Rebuilt 2026-09-09 in Quizora's marketing language (the shipped app's
   .root-landing / .root-hero / .root-workflow family). The page it replaces was
   a separate visual world from the rest of the product: an indigo-and-violet
   gradient hero, Segoe UI, and about a hundred hard-coded hexes with no relation
   to the brand. A visitor met one design here and a different one after signing
   in.

   Everything below references the design tokens. Section rhythm follows the
   shipped site: a tall centred hero over the cream canvas, then alternating
   paper and canvas bands, one dark green band for the workflow, and a quiet
   footer. */

.lp[b-j23p4vd1w4] {
    min-height: 100vh;
    /* The two brand washes the shipped landing page opens with — a mint bloom
       top-start and a warmer one further down, over the cream canvas. */
    background:
        radial-gradient(circle at 13% 8%, #DFF2E6 0, transparent 30%),
        radial-gradient(circle at 92% 28%, #F4DDD3 0, transparent 26%),
        var(--canvas-bg);
}

/* ---------- Nav ---------- */
.lp-nav[b-j23p4vd1w4] {
    max-width: 1180px;
    height: 84px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lp-brand[b-j23p4vd1w4] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
}

.lp-brand-mark[b-j23p4vd1w4] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--primary-700);
    color: #fff;
    font-size: var(--fs-lg);
    box-shadow: 0 8px 18px rgba(37, 122, 89, .22);
}

.lp-brand strong[b-j23p4vd1w4] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
}

.lp-nav-links[b-j23p4vd1w4] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lp-nav-links a[b-j23p4vd1w4] {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.lp-nav-links a:hover[b-j23p4vd1w4] { color: var(--primary-900); }

.lp-nav-links a.lp-nav-cta[b-j23p4vd1w4] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    color: var(--primary-900);
    padding: 9px 15px;
}

/* ---------- Hero ---------- */
.lp-hero[b-j23p4vd1w4] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 86px 24px 74px;
    text-align: center;
}

.lp-kicker[b-j23p4vd1w4] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-pill);
    background: var(--primary-100);
    color: var(--primary-900);
    padding: 6px 12px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .04em;
}

.lp-hero h1[b-j23p4vd1w4] {
    margin: 16px 0 20px;
    font-size: clamp(44px, 7vw, 78px);
    font-weight: var(--fw-black);
    line-height: .98;
    letter-spacing: -.045em;
}

.lp-hero h1 em[b-j23p4vd1w4] {
    color: var(--primary-700);
    font-style: normal;
}

.lp-hero > p[b-j23p4vd1w4] {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ink-muted);
    font-size: var(--fs-md);
    line-height: 1.8;
}

.lp-hero-actions[b-j23p4vd1w4] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.lp-hero-actions a[b-j23p4vd1w4] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--radius-sm);
    padding: 10px 22px;
    text-decoration: none;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-sm);
    background: var(--primary-700);
    color: #fff;
    box-shadow: var(--shadow-primary);
    transition: var(--transition-fast);
}

.lp-hero-actions a:hover[b-j23p4vd1w4] { background: var(--primary-900); transform: translateY(-1px); }

.lp-hero-actions a.secondary[b-j23p4vd1w4] {
    border: 1px solid var(--border-light);
    background: var(--surface-card);
    color: var(--primary-900);
    box-shadow: none;
}

.lp-hero-actions a.secondary:hover[b-j23p4vd1w4] { background: var(--surface-card); border-color: var(--border-strong); }

/* Four proof points in one bordered strip, straight from the shipped site. */
.lp-strip[b-j23p4vd1w4] {
    max-width: 1040px;
    margin: 48px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.lp-strip span[b-j23p4vd1w4] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 66px;
    padding: 8px 10px;
    border-inline-start: 1px solid var(--border-light);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-align: center;
}

.lp-strip span:first-child[b-j23p4vd1w4] { border-inline-start: 0; }
.lp-strip i[b-j23p4vd1w4] { color: var(--primary-700); font-size: var(--fs-md); }

/* ---------- Section scaffolding ---------- */
.lp-section[b-j23p4vd1w4] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 92px 24px;
}

.lp-section-paper[b-j23p4vd1w4] {
    max-width: none;
    background: var(--surface-card);
    border-block: 1px solid var(--border-light);
}

.lp-section-paper > *[b-j23p4vd1w4] { max-width: 1120px; margin-inline: auto; }

.lp-heading[b-j23p4vd1w4] {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.lp-heading h2[b-j23p4vd1w4] {
    margin: 12px 0 14px;
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: var(--fw-black);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.lp-heading p[b-j23p4vd1w4] {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-base);
    line-height: 1.8;
}

.lp-eyebrow[b-j23p4vd1w4] {
    color: var(--primary-700);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* ---------- Benefit grid ---------- */
.lp-benefits[b-j23p4vd1w4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.lp-benefits article[b-j23p4vd1w4] {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    padding: 27px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.lp-benefits article:hover[b-j23p4vd1w4] {
    transform: translateY(-4px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
}

/* One mint tile per card. The page it replaces gave every card a different
   pastel — violet, blue, green, amber, pink, orange — which read as decoration
   rather than meaning, the same mistake the dashboard tiles made. */
.lp-benefit-icon[b-j23p4vd1w4] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: var(--fs-lg);
    margin-bottom: 18px;
}

.lp-benefits h3[b-j23p4vd1w4] {
    margin: 0 0 9px;
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
}

.lp-benefits p[b-j23p4vd1w4] {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

/* ---------- Workflow band (dark green) ---------- */
.lp-workflow[b-j23p4vd1w4] {
    max-width: none;
    background: var(--primary-900);
    color: #fff;
}

.lp-workflow .lp-heading[b-j23p4vd1w4] { max-width: 760px; }
.lp-workflow .lp-heading h2[b-j23p4vd1w4] { color: #fff; }
.lp-workflow .lp-heading p[b-j23p4vd1w4] { color: rgba(255, 255, 255, .67); }
.lp-workflow .lp-eyebrow[b-j23p4vd1w4] { color: #83D8AE; }

.lp-workflow ol[b-j23p4vd1w4] {
    max-width: 1072px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    list-style: none;
}

.lp-workflow li[b-j23p4vd1w4] {
    min-height: 180px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 13px;
    align-content: start;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
    padding: 26px 23px;
}

.lp-workflow li:first-child[b-j23p4vd1w4] { border-inline-start: 0; }

.lp-workflow li > b[b-j23p4vd1w4] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    color: #A9E4C7;
    font-size: var(--fs-xs);
}

.lp-workflow li > span[b-j23p4vd1w4] { display: grid; }
.lp-workflow strong[b-j23p4vd1w4] { font-size: var(--fs-md); }

.lp-workflow small[b-j23p4vd1w4] {
    margin-top: 7px;
    color: rgba(255, 255, 255, .67);
    font-size: var(--fs-2xs);
    line-height: 1.7;
}

/* ---------- Institution picker ---------- */
.lp-schools[b-j23p4vd1w4] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.lp-school[b-j23p4vd1w4] {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 240px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-smooth);
}

.lp-school:hover[b-j23p4vd1w4] {
    transform: translateY(-2px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
}

.lp-school img[b-j23p4vd1w4] { height: 40px; width: auto; object-fit: contain; flex-shrink: 0; }

/* .lp-school-mark is display:grid, which would beat the [hidden] attribute. */
.lp-school [hidden][b-j23p4vd1w4] { display: none !important; }

.lp-school-mark[b-j23p4vd1w4] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--primary-100);
    color: var(--primary-700);
    font-size: var(--fs-md);
}

.lp-school b[b-j23p4vd1w4] { display: block; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.lp-school small[b-j23p4vd1w4] { color: var(--ink-muted); font-size: var(--fs-2xs); }

.lp-empty[b-j23p4vd1w4] { text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); }

/* ---------- Closing band ---------- */
.lp-final[b-j23p4vd1w4] {
    max-width: none;
    padding-block: 110px;
    background: radial-gradient(circle at 50% 15%, #E7F4EC 0, transparent 48%), #F9F7F1;
    text-align: center;
}

.lp-final .lp-heading[b-j23p4vd1w4] { margin-bottom: 28px; }

/* ---------- Footer ---------- */
.lp-footer[b-j23p4vd1w4] {
    max-width: 1120px;
    min-height: 110px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--border-light);
}

.lp-footer small[b-j23p4vd1w4] { color: var(--ink-muted); font-size: var(--fs-2xs); }

@media (max-width: 768px) {
    .lp-nav[b-j23p4vd1w4] { height: auto; padding-block: 16px; flex-wrap: wrap; }
    .lp-hero[b-j23p4vd1w4] { padding: 56px 20px 48px; }
    .lp-section[b-j23p4vd1w4] { padding: 60px 20px; }
    .lp-strip[b-j23p4vd1w4] { grid-template-columns: repeat(2, 1fr); }
    .lp-strip span:nth-child(odd)[b-j23p4vd1w4] { border-inline-start: 0; }
    .lp-workflow li[b-j23p4vd1w4] { border-inline-start: 0; }
}
/* /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. */