/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-4vmc7ml9lq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4vmc7ml9lq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-pbm6viyt4x],
.components-reconnect-repeated-attempt-visible[b-pbm6viyt4x],
.components-reconnect-failed-visible[b-pbm6viyt4x],
.components-pause-visible[b-pbm6viyt4x],
.components-resume-failed-visible[b-pbm6viyt4x],
.components-rejoining-animation[b-pbm6viyt4x] {
    display: none;
}

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


#components-reconnect-modal[b-pbm6viyt4x] {
    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-pbm6viyt4x 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-pbm6viyt4x {
    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;
    }
}
/* /Components/Layout/SiteLayout.razor.rz.scp.css */
/* The centred column of every SiteLayout page: header, page and footer. A page with a narrower
   column of its own (/rezolvare, /confidentialitate) keeps it, centred inside this one.
   max-width is the CONTENT width (no global box-sizing), so 64rem holds the formula sheet's three
   20.5rem columns and their two 1rem gaps (63.5rem). Variables in wwwroot/app.css. */
.site-column[b-3lpowvsfvp] {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.site-header[b-3lpowvsfvp] {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.site-logo[b-3lpowvsfvp] {
    display: inline-flex;
    border-radius: 4px;
}

.site-logo:focus-visible[b-3lpowvsfvp] {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

.site-logo img[b-3lpowvsfvp] {
    display: block;
    height: 32px;
    width: auto;
}

.site-header .site-column[b-3lpowvsfvp] {
    display: flex;
    align-items: center;
}

.site-footer[b-3lpowvsfvp] {
    margin-top: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: #6b7280;
}

.site-footer p[b-3lpowvsfvp] { margin: 0; }

.site-footer a[b-3lpowvsfvp] { color: var(--brand); }
/* /Components/Pages/Admin/AdminHome.razor.rz.scp.css */
/* The recent admin actions (A10). Dense on purpose: it is a log, not a feature.
   Scoped CSS rewrites every selector to carry this component's scope attribute, so nothing
   here may be :root, html or body - those would become :root[b-xxxx] and match nothing.
   Custom properties live in wwwroot/app.css. */
.audit[b-1o1okx2g72] { list-style: none; padding: 0; font-size: 0.85rem; }
.audit li[b-1o1okx2g72] { padding: 0.25rem 0; border-bottom: 1px solid #eee; }
.audit time[b-1o1okx2g72] { color: #6b7280; font-variant-numeric: tabular-nums; }

/* A11: a published exam that cannot be started. Same red as the editor's validation box -
   this is a broken exam, not a hint. Literal colours for the reason in the comment above. */
.errors[b-1o1okx2g72] {
    background: #fbeaea;
    border: 1px solid #b32121;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0;
}

/* Decision §24: published problems per skill, which decides whether a practice sheet can be
   offered. Literal colours for the reason at the top of this file. */
.coverage-note[b-1o1okx2g72] { font-size: 0.9rem; color: #4b5563; max-width: 48rem; }
.coverage[b-1o1okx2g72] { border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; }
.coverage th[b-1o1okx2g72], .coverage td[b-1o1okx2g72] { padding: 0.25rem 0.6rem; border-bottom: 1px solid #eee; text-align: right; }
.coverage th:first-child[b-1o1okx2g72], .coverage td:first-child[b-1o1okx2g72] { text-align: left; }
.coverage .skill-name[b-1o1okx2g72] { color: #6b7280; }
.coverage tr[data-state="ok"]   td:nth-child(5)[b-1o1okx2g72] { color: #1a7f37; }
.coverage tr[data-state="thin"] td:nth-child(5)[b-1o1okx2g72] { color: #9a6700; }
.coverage tr[data-state="none"] td:nth-child(5)[b-1o1okx2g72] { color: #b32121; }
/* /Components/Pages/Admin/AdminStatistici.razor.rz.scp.css */
/* ROADMAP L12. Dense tables, literal colours: scoped CSS rewrites every selector with this
   component's attribute, so nothing here may be :root, html or body (they would match nothing).
   Custom properties live in wwwroot/app.css. */
.note[b-8i1bo84m7n] { max-width: 48rem; color: #4b5563; }
.hint[b-8i1bo84m7n] { font-size: 0.85rem; color: #6b7280; }
.notice[b-8i1bo84m7n] { color: #9a6700; }

.range[b-8i1bo84m7n] { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.8rem 0; }
.range .quick[b-8i1bo84m7n] { display: flex; gap: 0.6rem; font-size: 0.9rem; }

.summary[b-8i1bo84m7n] { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; max-width: 60rem; }
.summary dt[b-8i1bo84m7n] { font-weight: 600; }
.summary dd[b-8i1bo84m7n] { margin: 0; }
.summary .hint[b-8i1bo84m7n] { display: block; }

.scroll[b-8i1bo84m7n] { overflow-x: auto; }
table[b-8i1bo84m7n] { border-collapse: collapse; font-size: 0.85rem; margin-bottom: 0.6rem; font-variant-numeric: tabular-nums; }
th[b-8i1bo84m7n], td[b-8i1bo84m7n] { padding: 0.25rem 0.6rem; border-bottom: 1px solid #eee; text-align: right; white-space: nowrap; }
th:first-child[b-8i1bo84m7n], td:first-child[b-8i1bo84m7n] { text-align: left; }
.ai td:nth-child(2)[b-8i1bo84m7n] { text-align: left; }
.skill-name[b-8i1bo84m7n] { color: #6b7280; }
tr[data-empty] td[b-8i1bo84m7n] { color: #9ca3af; }

/* Papers started, as a bar behind the number: the shape of the month at a glance. */
.bar-cell[b-8i1bo84m7n] { position: relative; min-width: 6rem; }
.bar[b-8i1bo84m7n] { position: absolute; left: 0; top: 20%; height: 60%; background: #d6eceb; border-radius: 2px; }
.bar-cell .n[b-8i1bo84m7n] { position: relative; }

@media (max-width: 640px) {
    .summary[b-8i1bo84m7n] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/AdminTeorie.razor.rz.scp.css */
/* The theory list (§25). No :root rules here - scoped CSS would rewrite them to match nothing. */
.lead[b-yyvejx7mbj] { color: #4b5563; }
.theory-list[b-yyvejx7mbj] { border-collapse: collapse; font-size: 0.9rem; }
.theory-list th[b-yyvejx7mbj], .theory-list td[b-yyvejx7mbj] { padding: 0.3rem 0.7rem; border-bottom: 1px solid #eee; text-align: left; }
.theory-list .skill-name[b-yyvejx7mbj] { color: #6b7280; }
.theory-list tr[data-status="Draft"] td:nth-child(4)[b-yyvejx7mbj] { color: #9a6700; }
.theory-list tr[data-status="Published"] td:nth-child(4)[b-yyvejx7mbj] { color: #1a7f37; }
/* /Components/Pages/Admin/AdminTeorieTema.razor.rz.scp.css */
/* The draft banner over a theory preview (§25). No :root rules here - scoped CSS would rewrite
   them to match nothing; literal colours for that reason. */
.preview-bar[b-vrxj8tb3bj] {
    border: 2px dashed #9a6700;
    background: #fff8e6;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.25rem;
}
.preview-bar[data-status="Published"][b-vrxj8tb3bj] { border-style: solid; border-color: #1a7f37; background: #eaf6ec; }
.preview-bar p[b-vrxj8tb3bj] { margin: 0.25rem 0; }
.preview-bar .ok[b-vrxj8tb3bj] { color: #1a7f37; font-weight: 600; }
.preview-bar .refused[b-vrxj8tb3bj] { color: #b32121; font-weight: 600; }
.preview-bar form[b-vrxj8tb3bj] { margin-top: 0.4rem; }
.errors[b-vrxj8tb3bj] {
    background: #fbeaea;
    border: 1px solid #b32121;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/Admin/ProblemEditor.razor.rz.scp.css */
/* The preview is the thing that makes LaTeX writable: type, look, correct. */

.preview-label[b-94mgx9nsp9] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-top: 0.6rem;
}

/* The preview panel beside the form: the problem as the student sees it. */
.editor-preview[b-94mgx9nsp9] {
    padding: 0.75rem 1rem;
    border: 1px dashed #c7cede;
    border-radius: 6px;
    background: #fcfdff;
    line-height: 1.6;
}

/* Authored line breaks between a) and b) must survive, here and on the exam page. */
.latex-text[b-94mgx9nsp9] { white-space: pre-line; }

.field-row[b-94mgx9nsp9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.field-row label[b-94mgx9nsp9],
label[b-94mgx9nsp9] {
    display: block;
    font-size: 0.9rem;
}

textarea[b-94mgx9nsp9] {
    width: 100%;
    max-width: 44rem;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.errors[b-94mgx9nsp9] {
    background: #fbeaea;
    border: 1px solid #b32121;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0;
}

.warnings[b-94mgx9nsp9] {
    background: #fdf5e2;
    border: 1px solid #9a6700;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0;
}

.ok[b-94mgx9nsp9] { color: #1a7f37; font-weight: 600; }

.option-row[b-94mgx9nsp9], .step-row[b-94mgx9nsp9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.option-row .label[b-94mgx9nsp9] { width: 3rem; }
.option-row .text[b-94mgx9nsp9], .step-row .text[b-94mgx9nsp9] { flex: 1; max-width: 32rem; }
.step-row .points[b-94mgx9nsp9] { width: 5rem; }

.actions[b-94mgx9nsp9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.actions .primary[b-94mgx9nsp9] { font-weight: 600; }
.actions.retire .text[b-94mgx9nsp9] { flex: 1; max-width: 32rem; }

/* A11: publishing a new version is not "make this visible" - it retires another problem and
   moves every exam. The banner says so before the button is pressed. Plain colours, no
   :root custom properties: CSS isolation would rewrite :root and match nothing. */
.version-banner[b-94mgx9nsp9] {
    background: #eef4fb;
    border-left: 4px solid #2b5f8f;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0;
    font-size: 0.9rem;
}

.actions.version[b-94mgx9nsp9] { align-items: flex-start; }
.actions.version .hint[b-94mgx9nsp9] { max-width: 32rem; }

/* The audit trail for this problem (A10). Dense on purpose: it is a log, not a feature. */
.audit[b-94mgx9nsp9] { list-style: none; padding: 0; font-size: 0.85rem; }
.audit li[b-94mgx9nsp9] { padding: 0.25rem 0; border-bottom: 1px solid #eee; }
.audit time[b-94mgx9nsp9] { color: #6b7280; font-variant-numeric: tabular-nums; }
.audit .details[b-94mgx9nsp9] { color: #6b7280; margin-left: 0.4rem; }

.hint[b-94mgx9nsp9] { font-size: 0.85rem; color: #6b7280; }

/* Same reason as the exam page: pre-line must not reach inside a rendered formula. */
.latex-text .katex[b-94mgx9nsp9],
.latex-text .katex-display[b-94mgx9nsp9] {
    white-space: normal;
}

.figure-preview[b-94mgx9nsp9] { display: block; max-width: 100%; margin: 0.6rem 0; border: 1px solid #ddd; }

/* Only there to disable every control while an action runs (_busy) - it must not show. */
.editor-fields[b-94mgx9nsp9] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* The list's filters. */
.problem-filters[b-94mgx9nsp9] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.problem-filters input[b-94mgx9nsp9], .problem-filters select[b-94mgx9nsp9] { display: block; }

/* Form and preview side by side; the preview stays in view while the form scrolls. The page's
   column is widened by "wide-page" in app.css - a scoped file cannot reach SiteLayout's. */
.editor-split[b-94mgx9nsp9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.editor-preview[b-94mgx9nsp9] {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* Narrow screen: form, then preview, one under the other. */
@media (max-width: 64rem) {
    .editor-split[b-94mgx9nsp9] { grid-template-columns: minmax(0, 1fr); }
    .editor-preview[b-94mgx9nsp9] { position: static; max-height: none; overflow: visible; }
}

.preview-heading[b-94mgx9nsp9] { margin: 1rem 0 0.35rem; font-size: 0.95rem; }

.preview-options[b-94mgx9nsp9] { list-style: none; padding: 0; margin: 0.75rem 0; }
.preview-options li[b-94mgx9nsp9] { padding: 0.3rem 0.5rem; border-radius: 4px; margin-bottom: 0.25rem; }
.preview-options li.is-correct[b-94mgx9nsp9] { background: #e8f5ec; }
.preview-options .option-label[b-94mgx9nsp9] { font-weight: 600; margin-right: 0.35rem; }
.preview-options .correct-mark[b-94mgx9nsp9] { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 600; color: #1a7f37; }
.preview-misconception[b-94mgx9nsp9] { font-size: 0.85rem; color: #6b7280; margin-left: 1.6rem; }
.misconception-label[b-94mgx9nsp9] { font-weight: 600; margin-right: 0.3rem; }

.barem-preview[b-94mgx9nsp9] { border-collapse: collapse; width: 100%; }
.barem-preview th[b-94mgx9nsp9] { text-align: left; font-size: 0.8rem; color: #6b7280; font-weight: 600; padding: 0.2rem 0.5rem; }
.barem-preview td[b-94mgx9nsp9] { vertical-align: top; padding: 0.3rem 0.5rem; border-top: 1px solid #eee; }
.barem-preview .step-points[b-94mgx9nsp9] { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The skill select carries every skill's full name; in a column it must not push past it. */
.editor-form select[b-94mgx9nsp9] { max-width: 100%; }
/* /Components/Pages/Confidentialitate.razor.rz.scp.css */
/* The privacy notice. A long page of prose, so it is set for reading: one column, a measure
   a parent can follow, and headings that are easy to scan for the section they came for.

   NO :root / html / body rules here. CSS isolation rewrites every selector to carry this
   component's scope attribute, so ":root" becomes ":root[b-xxxx]" and matches nothing at all,
   silently. Custom properties live in wwwroot/app.css; this file only consumes them. */

.privacy-page[b-w1ky5bsmw3] {
    font-family: var(--font-ui);
    max-width: 44rem;
    margin: 2rem auto 3rem;
    /* No side padding: SiteLayout's column already has the gutter (--page-gutter). */
    line-height: 1.6;
    color: var(--brand-ink);
}

.privacy-page h1[b-w1ky5bsmw3] {
    font-size: 1.7rem;
    margin: 0 0 0.35rem;
}

.privacy-page h2[b-w1ky5bsmw3] {
    font-size: 1.2rem;
    margin: 2rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e5e7eb;
}

.privacy-page h3[b-w1ky5bsmw3] {
    font-size: 1.02rem;
    margin: 1.4rem 0 0.4rem;
}

.privacy-page p[b-w1ky5bsmw3] { margin: 0.6rem 0; }
.privacy-page ul[b-w1ky5bsmw3] { margin: 0.6rem 0; padding-left: 1.3rem; }
.privacy-page li[b-w1ky5bsmw3] { margin: 0.35rem 0; }

.privacy-page a[b-w1ky5bsmw3] { color: var(--brand); }

.privacy-page .updated[b-w1ky5bsmw3] {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.privacy-page .lead[b-w1ky5bsmw3] { font-size: 1.05rem; }

.privacy-page .muted[b-w1ky5bsmw3] {
    font-size: 0.93rem;
    color: #4b5563;
}

/* The operator has not filled the notice in. Shown in the page rather than logged: the
   person who can fix it is the person looking at it. */
.privacy-page .config-missing[b-w1ky5bsmw3] {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--bad);
    border-left-width: 6px;
    border-radius: 8px;
    background: var(--bad-bg);
}

.privacy-page .config-missing h2[b-w1ky5bsmw3] {
    margin: 0 0 0.4rem;
    padding: 0;
    border: 0;
    font-size: 1.1rem;
}

.privacy-page .config-missing p[b-w1ky5bsmw3] { margin: 0.4rem 0; }
.privacy-page .config-missing .how[b-w1ky5bsmw3] { font-size: 0.92rem; }

.privacy-page code[b-w1ky5bsmw3] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    background: #ffffffaa;
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
}

/* One missing value, in place, so it reads as a gap and not as an answer. */
.privacy-page .todo[b-w1ky5bsmw3] {
    color: var(--partial);
    background: var(--partial-bg);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
}

.privacy-page .todo-block[b-w1ky5bsmw3] {
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--partial);
    background: var(--partial-bg);
}

/* Training on input is the one thing in the notice a parent must not skim past. */
.privacy-page .providers .warn[b-w1ky5bsmw3] {
    display: block;
    margin-top: 0.2rem;
    color: var(--partial);
}

.privacy-page .retention[b-w1ky5bsmw3] {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0;
    font-size: 0.95rem;
}

.privacy-page .retention th[b-w1ky5bsmw3],
.privacy-page .retention td[b-w1ky5bsmw3] {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #e5e7eb;
}

.privacy-page .retention th[b-w1ky5bsmw3] { background: #f3f4f6; }
.privacy-page .retention td:first-child[b-w1ky5bsmw3] { width: 42%; }

.privacy-page .back[b-w1ky5bsmw3] {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

/* On a phone the two-column retention table stops being a table and becomes stacked pairs,
   which is the only way 42% of 22rem stays readable. */
@media (max-width: 30rem) {
    .privacy-page .retention thead[b-w1ky5bsmw3] { display: none; }
    .privacy-page .retention tr[b-w1ky5bsmw3] { display: block; padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; }
    .privacy-page .retention td[b-w1ky5bsmw3] { display: block; border: 0; padding: 0.15rem 0; }
    .privacy-page .retention td:first-child[b-w1ky5bsmw3] { width: auto; font-weight: 600; }
}
/* /Components/Pages/Confirmare.razor.rz.scp.css */
/* Email landing page. Same visual language as the result screen: a system font stack,
   a card with a coloured left edge, and the outcome stated in words rather than colour
   alone. */

.notice-page[b-rh84hzysmg] {
    font-family: var(--font-ui);
    max-width: 38rem;
    margin: 2rem auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e5e7eb;
    border-left-width: 6px;
    border-radius: 8px;
    background: #fafafa;
}

.notice-page[data-state="ok"][b-rh84hzysmg] { border-left-color: #1a7f37; background: #e8f5ec; }
.notice-page[data-state="warn"][b-rh84hzysmg] { border-left-color: #9a6700; background: #fdf5e2; }

.notice-page h1[b-rh84hzysmg] {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
}

.notice-page p[b-rh84hzysmg] { margin: 0.5rem 0; line-height: 1.55; }

.notice-page .muted[b-rh84hzysmg] { font-size: 0.9rem; color: #6b7280; }

.notice-page .back[b-rh84hzysmg] { margin-top: 1.1rem; font-size: 0.95rem; }
/* /Components/Pages/Dezabonare.razor.rz.scp.css */
/* Email landing page. Same visual language as the result screen: a system font stack,
   a card with a coloured left edge, and the outcome stated in words rather than colour
   alone. */

.notice-page[b-66bfmyho7c] {
    font-family: var(--font-ui);
    max-width: 38rem;
    margin: 2rem auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e5e7eb;
    border-left-width: 6px;
    border-radius: 8px;
    background: #fafafa;
}

.notice-page[data-state="ok"][b-66bfmyho7c] { border-left-color: #1a7f37; background: #e8f5ec; }
.notice-page[data-state="warn"][b-66bfmyho7c] { border-left-color: #9a6700; background: #fdf5e2; }

.notice-page h1[b-66bfmyho7c] {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
}

.notice-page p[b-66bfmyho7c] { margin: 0.5rem 0; line-height: 1.55; }

.notice-page .muted[b-66bfmyho7c] { font-size: 0.9rem; color: #6b7280; }

.notice-page .back[b-66bfmyho7c] { margin-top: 1.1rem; font-size: 0.95rem; }
/* /Components/Pages/Exercitii.razor.rz.scp.css */
/* The practice list. Colour variables live in wwwroot/app.css, never :root here. */

.practice-list[b-tsel46dtci] { max-width: 50rem; }
.lead[b-tsel46dtci] { color: #374151; }

.filter[b-tsel46dtci] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.filter a[b-tsel46dtci] {
    padding: 0.2rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: var(--brand);
    text-decoration: none;
    font-size: 0.9rem;
}
.filter a[aria-current="page"][b-tsel46dtci] { background: var(--brand); border-color: var(--brand); color: #fff; }

.status[b-tsel46dtci] {
    background: #fff8e6;
    border: 1px solid #9a6700;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
}

.practice-list ul[b-tsel46dtci] { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.practice-list li[b-tsel46dtci] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    scroll-margin-top: 1rem;
}
.practice-list li[data-offerable="nu"][b-tsel46dtci] { background: #f9fafb; }
.skill[b-tsel46dtci] { flex: 1 1 20rem; }
.actions[b-tsel46dtci] { display: flex; align-items: center; gap: 0.75rem; }
.actions form[b-tsel46dtci] { margin: 0; }
.actions a[b-tsel46dtci] { color: var(--brand); font-size: 0.9rem; }
.unavailable[b-tsel46dtci] { font-size: 0.85rem; color: #6b7280; }

.skill-code[b-tsel46dtci] {
    font-size: 0.8rem;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0 0.3rem;
    margin-right: 0.3rem;
}
.grades[b-tsel46dtci] { display: block; font-size: 0.8rem; color: #6b7280; margin-top: 0.1rem; }
/* /Components/Pages/Formule.razor.rz.scp.css */
/* The formula sheet page (§26). Colour variables live in wwwroot/app.css, never :root here. */

.formulas[b-wzwq5ok9xx] { max-width: 72rem; }
.lead[b-wzwq5ok9xx] { color: #374151; max-width: 50rem; }

.tools[b-wzwq5ok9xx] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.view[b-wzwq5ok9xx] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.view a[b-wzwq5ok9xx] {
    padding: 0.2rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: var(--brand);
    text-decoration: none;
    font-size: 0.9rem;
}
.view a[aria-current="page"][b-wzwq5ok9xx] { background: var(--brand); border-color: var(--brand); color: #fff; }

.print[b-wzwq5ok9xx] {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: #fff;
    color: var(--brand);
    cursor: pointer;
}

@media print {
    .lead[b-wzwq5ok9xx], .tools[b-wzwq5ok9xx] { display: none; }
    .formulas[b-wzwq5ok9xx] { max-width: none; }
    h1[b-wzwq5ok9xx] { font-size: 1.2rem; margin: 0 0 0.4rem; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The home page (redone 2026-10-03): a hero with an example of AI grading, the four things a
   student can do, how it works, how it is marked, the mock exams, a grade picker, the numbers.
   Airy on purpose: one message per section, generous space between them.

   NOTE: no :root, html or body rules here, ever. CSS isolation rewrites every selector to
   carry this component's scope attribute, so :root becomes :root[b-xxxx] and matches
   nothing - silently, with no warning. The colour variables are declared in
   wwwroot/app.css, which is where custom properties belong. See CLAUDE.md, Gotchas. */

.home[b-gu9t4h2hc6] {
    /* Width and side gutter come from SiteLayout's column; repeating them here would pad twice. */
    padding: 0 0 1rem;
    color: var(--brand-ink);
}

section[b-gu9t4h2hc6] { margin: 0 0 4rem; scroll-margin-top: 1rem; }
h2[b-gu9t4h2hc6] { font-size: 1.5rem; margin: 0 0 1.25rem; color: var(--brand-ink); }

/* Visually hidden, read aloud: the word behind a check or a cross. */
.sr[b-gu9t4h2hc6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The A11 refusal: a student who cannot start an exam has to see that something is wrong
   and that it is not their doing. */
.notice.problem[b-gu9t4h2hc6] {
    border-left: 4px solid var(--bad);
    background: var(--bad-bg);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 1.5rem 0 0;
}

/* Buttons and button-like links, in the brand teal. */
.btn[b-gu9t4h2hc6] {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
}
.btn:hover[b-gu9t4h2hc6] { background: #eef6f6; }
.btn.primary[b-gu9t4h2hc6] { background: var(--brand); color: #fff; }
.btn.primary:hover[b-gu9t4h2hc6] { background: #08494e; }
.btn:focus-visible[b-gu9t4h2hc6], .choice:focus-visible[b-gu9t4h2hc6], a:focus-visible[b-gu9t4h2hc6] { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- Hero: the message on the left, an example of the grading on the right. ---- */

.hero[b-gu9t4h2hc6] {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding: 3rem 0 1rem;
}
@media (min-width: 52rem) {
    .hero[b-gu9t4h2hc6] { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; padding-top: 4rem; }
}

.eyebrow[b-gu9t4h2hc6] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand);
}
/* The olive dot: a small accent, never text (too little contrast). */
.eyebrow[b-gu9t4h2hc6]::before {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--brand-accent);
}
.hero h1[b-gu9t4h2hc6] {
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
}
.lead[b-gu9t4h2hc6] { font-size: 1.125rem; line-height: 1.6; color: #374151; margin: 0 0 2rem; max-width: 36rem; }
.actions[b-gu9t4h2hc6] { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The example card. It is an illustration and says so in its caption. */
.example[b-gu9t4h2hc6] {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid #dbe9e9;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(10, 95, 102, 0.45);
    min-width: 0;
}
.example figcaption[b-gu9t4h2hc6] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 0.75rem;
}
.ex-problem[b-gu9t4h2hc6] { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; color: #4b5563; }
.ex-steps[b-gu9t4h2hc6] { list-style: none; padding: 0; margin: 0; }
.ex-steps li[b-gu9t4h2hc6] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid #eef0f2;
    font-size: 0.95rem;
}
.ex-text[b-gu9t4h2hc6] { min-width: 0; overflow-wrap: anywhere; }
.ex-pts[b-gu9t4h2hc6] { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.ex-steps li.ok .ex-pts[b-gu9t4h2hc6] { color: var(--ok); }
.ex-steps li.bad .ex-pts[b-gu9t4h2hc6] { color: var(--bad); }
.ex-steps li.bad .ex-text[b-gu9t4h2hc6] { color: #6b7280; }

.mark[b-gu9t4h2hc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
}
.mark svg[b-gu9t4h2hc6] { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mark.ok[b-gu9t4h2hc6] { background: var(--ok-bg); color: var(--ok); }
.mark.bad[b-gu9t4h2hc6] { background: var(--bad-bg); color: var(--bad); }

.ex-note[b-gu9t4h2hc6] {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--bad-bg);
    font-size: 0.88rem;
    line-height: 1.45;
}
.ex-total[b-gu9t4h2hc6] { margin: 1rem 0 0; text-align: right; font-size: 0.95rem; }

/* ---- Ce vrei să faci azi? ---- */

.choice-grid[b-gu9t4h2hc6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}
.choice[b-gu9t4h2hc6] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.25rem 1.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.choice:hover[b-gu9t4h2hc6] { border-color: var(--brand); box-shadow: 0 6px 18px -12px rgba(10, 95, 102, 0.6); }
.choice-title[b-gu9t4h2hc6] { font-size: 1.1rem; font-weight: 700; color: var(--brand); }
.choice-text[b-gu9t4h2hc6] { font-size: 0.95rem; line-height: 1.45; color: #4b5563; }
.choice.featured[b-gu9t4h2hc6] { background: var(--brand); border-color: var(--brand); }
.choice.featured .choice-title[b-gu9t4h2hc6], .choice.featured .choice-text[b-gu9t4h2hc6] { color: #fff; }
.choice.featured:hover[b-gu9t4h2hc6] { background: #08494e; }
.aside-link[b-gu9t4h2hc6] { margin: 1.25rem 0 0; }
.aside-link a[b-gu9t4h2hc6], .grade-links a[b-gu9t4h2hc6] { color: var(--brand); font-weight: 600; }

/* ---- Cum funcționează ---- */

.how-steps[b-gu9t4h2hc6] {
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin: 0;
}
.how-steps li[b-gu9t4h2hc6] {
    counter-increment: step;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: #4b5563;
    line-height: 1.5;
}
.how-steps li[b-gu9t4h2hc6]::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    background: #eef6f6;
    color: var(--brand);
    font-weight: 700;
}
.how-title[b-gu9t4h2hc6] { font-weight: 700; color: var(--brand-ink); font-size: 1.05rem; }

/* ---- Cum se notează ---- */

.score-rows[b-gu9t4h2hc6] { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; max-width: 46rem; }
.score-row[b-gu9t4h2hc6] {
    display: grid;
    gap: 0.2rem 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: #f7f9f9;
}
@media (min-width: 40rem) {
    .score-row[b-gu9t4h2hc6] { grid-template-columns: 15rem 1fr; align-items: baseline; }
}
.score-row.ai[b-gu9t4h2hc6] { background: #eef6f6; border-left: 4px solid var(--brand); }
.score-row dt[b-gu9t4h2hc6] { font-weight: 700; }
.score-row dd[b-gu9t4h2hc6] { margin: 0; color: #374151; }
.score-pts[b-gu9t4h2hc6] { margin-left: 0.35rem; font-weight: 600; color: var(--brand); }
.honest[b-gu9t4h2hc6] { max-width: 46rem; margin: 0; color: #4b5563; line-height: 1.55; }

/* ---- Simulări de examen ---- */

.exam-list[b-gu9t4h2hc6] { display: grid; gap: 1rem; }
.exam-card[b-gu9t4h2hc6] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    background: #fff;
}
.exam-card h3[b-gu9t4h2hc6] { margin: 0 0 0.4rem; font-size: 1.25rem; color: var(--brand-ink); }
.exam-card p[b-gu9t4h2hc6] { margin: 0 0 0.75rem; color: #4b5563; }
.facts[b-gu9t4h2hc6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.35rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #374151;
}
.facts li[b-gu9t4h2hc6]::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.exam-card form[b-gu9t4h2hc6] { margin: 0; }
.ai-note[b-gu9t4h2hc6] { font-size: 0.875rem; line-height: 1.5; color: #6b7280; max-width: 46rem; margin: 1rem 0 0; }

/* ---- În ce clasă ești? ---- */

.grade-list[b-gu9t4h2hc6] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}
.grade[b-gu9t4h2hc6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.grade-name[b-gu9t4h2hc6] { font-weight: 700; }
.grade-links[b-gu9t4h2hc6] { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.95rem; }

/* ---- Părinți, cifre ---- */

.closing[b-gu9t4h2hc6] { margin-bottom: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.parents[b-gu9t4h2hc6] { margin: 0 0 0.5rem; color: #374151; }
.counts[b-gu9t4h2hc6] { margin: 0; font-size: 0.9rem; color: #6b7280; }
/* /Components/Pages/Result.razor.rz.scp.css */
/*
    Results screen. The job of this stylesheet is one thing: let a student see in seconds
    which exercises went wrong, and jump to them. Everything else is secondary.

    Colour is never the only signal — every state also carries a mark (✓ ½ ✗ –) and a word
    ("corect", "parțial", "greșit", "nerezolvat"), because roughly one boy in twelve has a
    colour vision deficiency and this is a product for children.
*/

/* The --ok / --bad / --partial / --blank palette lives in wwwroot/app.css, NOT here.

   It used to be a :root block in this file, and never worked. Blazor CSS isolation rewrites
   every selector in a .razor.css file to carry the component's scope attribute, so :root
   became :root[b-xxxxxxxx] - which no element ever matches, because <html> is not rendered by
   this component. Every var(--ok) on the page was therefore undefined: borders fell back to
   currentColor (the grey boxes), backgrounds to transparent, and the "răspunsul tău" /
   "răspunsul corect" tags rendered as white text on nothing. The page only stayed usable
   because every state also carries a mark and a word.

   Rule: custom properties that must reach :root belong in a GLOBAL stylesheet. */

article[b-w2otuaacm5], section[b-w2otuaacm5], nav[b-w2otuaacm5], h1[b-w2otuaacm5], h2[b-w2otuaacm5], h3[b-w2otuaacm5], p[b-w2otuaacm5], ul[b-w2otuaacm5], dl[b-w2otuaacm5], table[b-w2otuaacm5] {
    font-family: var(--font-ui);
}

.score[b-w2otuaacm5] {
    font-size: 1.6rem;
    margin: 0.5rem 0;
}

.score .oficiu[b-w2otuaacm5] {
    font-size: 0.95rem;
    color: #555;
}

.ai-badge[b-w2otuaacm5] {
    background: #eef2ff;
    border-left: 3px solid #4f46e5;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* ---- summary strip ---------------------------------------------------- */

.summary[b-w2otuaacm5] {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.summary-row[b-w2otuaacm5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.summary-label[b-w2otuaacm5] {
    width: 9rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.chip[b-w2otuaacm5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid transparent;
}

.chip[data-state="correct"][b-w2otuaacm5] { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.chip[data-state="partial"][b-w2otuaacm5] { background: var(--partial-bg); color: var(--partial); border-color: var(--partial); }
.chip[data-state="wrong"][b-w2otuaacm5]   { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.chip[data-state="blank"][b-w2otuaacm5]   { background: var(--blank-bg); color: var(--blank); border-color: var(--blank); border-style: dashed; }

.tally[b-w2otuaacm5] {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tally-item[data-state="correct"][b-w2otuaacm5] { color: var(--ok); }
.tally-item[data-state="partial"][b-w2otuaacm5] { color: var(--partial); }
.tally-item[data-state="wrong"][b-w2otuaacm5]   { color: var(--bad); }
.tally-item[data-state="blank"][b-w2otuaacm5]   { color: var(--blank); }

/* ---- "only what went wrong" filter, no JavaScript --------------------- */

.only-wrong-toggle[b-w2otuaacm5] {
    margin-right: 0.4rem;
}

.only-wrong-label[b-w2otuaacm5] {
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
}

.only-wrong-toggle:checked ~ .results article[data-state="correct"][b-w2otuaacm5] {
    display: none;
}

/* Hide a whole subject once everything in it is correct, so the filter does not
   leave a trail of empty headings. */
.only-wrong-toggle:checked ~ .results section:not(:has(article:not([data-state="correct"])))[b-w2otuaacm5] {
    display: none;
}

/* ---- one problem ------------------------------------------------------ */

.result-problem[b-w2otuaacm5] {
    border: 1px solid #e5e7eb;
    border-left-width: 6px;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.85rem 0;
    scroll-margin-top: 1rem;   /* so the jump links do not bury the heading */
}

.result-problem[data-state="correct"][b-w2otuaacm5] { border-left-color: var(--ok); }
.result-problem[data-state="partial"][b-w2otuaacm5] { border-left-color: var(--partial); background: var(--partial-bg); }
.result-problem[data-state="wrong"][b-w2otuaacm5]   { border-left-color: var(--bad); background: var(--bad-bg); }
.result-problem[data-state="blank"][b-w2otuaacm5]   { border-left-color: var(--blank); background: var(--blank-bg); }

.result-problem h3[b-w2otuaacm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.mark[b-w2otuaacm5] {
    font-size: 1.2rem;
    font-weight: 700;
}

[data-state="correct"] .mark[b-w2otuaacm5] { color: var(--ok); }
[data-state="partial"] .mark[b-w2otuaacm5] { color: var(--partial); }
[data-state="wrong"] .mark[b-w2otuaacm5]   { color: var(--bad); }
[data-state="blank"] .mark[b-w2otuaacm5]   { color: var(--blank); }

.points[b-w2otuaacm5] { font-weight: 600; }

.state-label[b-w2otuaacm5] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid currentColor;
}

[data-state="correct"] .state-label[b-w2otuaacm5] { color: var(--ok); }
[data-state="partial"] .state-label[b-w2otuaacm5] { color: var(--partial); }
[data-state="wrong"] .state-label[b-w2otuaacm5]   { color: var(--bad); }
[data-state="blank"] .state-label[b-w2otuaacm5]   { color: var(--blank); }

.under-review[b-w2otuaacm5] {
    font-size: 0.8rem;
    background: #fff7ed;
    border: 1px solid #c2410c;
    color: #c2410c;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

/* Problem statements are authored with real line breaks between a) and b) - the same reason
   TakeExam.razor.css gives for its own .statement. This page shipped without the rule, so every
   Subiectul III item ran its sub-parts together mid-sentence here while the exam page showed them
   correctly. Two scoped stylesheets, one authored format: a page that renders QuestionText or
   ReferenceSolution needs this. */
.statement[b-w2otuaacm5] {
    margin: 0.5rem 0;
    white-space: pre-line;
}

.figure[b-w2otuaacm5] {
    display: block;
    max-width: min(100%, 420px);
    height: auto;
    margin: 0.5rem 0;
}

/* ---- answers ---------------------------------------------------------- */

.options[b-w2otuaacm5] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.options li[b-w2otuaacm5] {
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    border: 1px solid transparent;
    margin-bottom: 0.2rem;
}

.options li.is-correct[b-w2otuaacm5] {
    background: var(--ok-bg);
    border-color: var(--ok);
}

/* Chosen but not correct: the one the student needs to look at. */
.options li.is-chosen:not(.is-correct)[b-w2otuaacm5] {
    background: var(--bad-bg);
    border-color: var(--bad);
    text-decoration-color: var(--bad);
}

.tag[b-w2otuaacm5] {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tag.ok[b-w2otuaacm5]  { background: var(--ok); color: #fff; }
.tag.bad[b-w2otuaacm5] { background: var(--bad); color: #fff; }

.short-answer[b-w2otuaacm5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.75rem;
    margin: 0.5rem 0;
}

.short-answer dt[b-w2otuaacm5] { font-weight: 600; }
.short-answer dd[b-w2otuaacm5] { margin: 0; }
.short-answer dd.is-correct[b-w2otuaacm5] { color: var(--ok); font-weight: 600; }
.short-answer dd.is-wrong[b-w2otuaacm5]   { color: var(--bad); }

.steps[b-w2otuaacm5] {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.92rem;
}

.steps th[b-w2otuaacm5], .steps td[b-w2otuaacm5] {
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.steps th[b-w2otuaacm5] { background: #f9fafb; font-size: 0.8rem; text-transform: uppercase; }

.steps tr.is-correct td:first-child[b-w2otuaacm5] { border-left: 4px solid var(--ok); }
.steps tr.is-partial td:first-child[b-w2otuaacm5] { border-left: 4px solid var(--partial); }
.steps tr.is-wrong td:first-child[b-w2otuaacm5]   { border-left: 4px solid var(--bad); }

.step-points[b-w2otuaacm5] { white-space: nowrap; font-weight: 600; }

.blank-note[b-w2otuaacm5] { color: var(--blank); font-style: italic; }

.reference[b-w2otuaacm5] {
    margin: 0.6rem 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    background: #fff;
}

.reference summary[b-w2otuaacm5] { cursor: pointer; font-weight: 600; }

/* The reference solution is authored the same way, with a) and b) on their own lines. */
.reference div[b-w2otuaacm5] { white-space: pre-line; }

.wrong-grade[b-w2otuaacm5] { margin-top: 0.6rem; }

.feedback-sent[b-w2otuaacm5] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ok);
    background: var(--ok-bg);
    border: 1px solid var(--ok);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    display: inline-block;
}

.wrong-grade button[b-w2otuaacm5] {
    font-size: 0.8rem;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    color: #6b7280;
}

/* ---- weak spots and practice sheets (decision §24) -------------------- */

.weak-spots[b-w2otuaacm5],
.diagnosis[b-w2otuaacm5] {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-left: 6px solid var(--brand);
    border-radius: 8px;
}

.weak-spots h2[b-w2otuaacm5],
.diagnosis h2[b-w2otuaacm5] { margin-top: 0; }

.weak-note[b-w2otuaacm5] { color: #4b5563; font-size: 0.9rem; max-width: 44rem; }

.weak-spots ul[b-w2otuaacm5] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }

.weak-spots li[b-w2otuaacm5] {
    padding: 0.75rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.weak-head[b-w2otuaacm5] { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }

.weak-code[b-w2otuaacm5] {
    font-size: 0.8rem;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0 0.3rem;
}

.weak-points[b-w2otuaacm5] { margin: 0.3rem 0 0.5rem; }
.weak-unavailable[b-w2otuaacm5] { margin: 0; color: #6b7280; font-size: 0.9rem; }

.ladder[b-w2otuaacm5] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ladder li[b-w2otuaacm5] {
    display: flex;
    flex-direction: column;
    min-width: 7rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--blank);
    border-radius: 6px;
    background: var(--blank-bg);
}

.ladder li[data-state="correct"][b-w2otuaacm5] { border-color: var(--ok); background: var(--ok-bg); }
.ladder li[data-state="partial"][b-w2otuaacm5] { border-color: var(--partial); background: var(--partial-bg); }
.ladder li[data-state="wrong"][b-w2otuaacm5]   { border-color: var(--bad); background: var(--bad-bg); }
.ladder li[data-state="pending"][b-w2otuaacm5] { border-color: var(--pending); background: var(--pending-bg); }

.ladder-level[b-w2otuaacm5] { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; color: #4b5563; }
.ladder-points[b-w2otuaacm5] { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The one action this block exists for - styled like the solver's button, not left native. */
.weak-spots button[b-w2otuaacm5],
.practice-next button[b-w2otuaacm5] {
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.verdict[b-w2otuaacm5] { font-weight: 600; max-width: 44rem; }
.theory-link[b-w2otuaacm5] { margin: 0.2rem 0 0.5rem; }
.theory-link a[b-w2otuaacm5] { color: var(--brand); font-weight: 600; }
.verdict-note[b-w2otuaacm5] { font-size: 0.9rem; color: #4b5563; }
.practice-links[b-w2otuaacm5] { font-size: 0.9rem; }

/* ---- email capture ---------------------------------------------------- */

.email-capture[b-w2otuaacm5] {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.email-capture form[b-w2otuaacm5] { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }
.email-capture input[type="email"][b-w2otuaacm5] { padding: 0.5rem; }
.email-capture .marketing[b-w2otuaacm5] { font-size: 0.9rem; }
.email-capture .privacy[b-w2otuaacm5] { font-size: 0.8rem; }

/* What the student wrote, shown whole and in their own order. It is deliberately NOT
   interleaved with the barem table below it: the grader marks the problem as a whole,
   so there is no line-to-step correspondence to display, and pretending otherwise put
   a barem step's remark next to an unrelated line. */
.student-solution[b-w2otuaacm5] {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.student-solution h4[b-w2otuaacm5],
.barem-heading[b-w2otuaacm5] {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #4b5563;
}

.barem-heading[b-w2otuaacm5] { margin-top: 1rem; }

.student-line[b-w2otuaacm5] {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 0.3rem;
    white-space: pre-wrap;
}

.student-line:last-child[b-w2otuaacm5] { margin-bottom: 0; }

.line-no[b-w2otuaacm5] {
    flex: 0 0 auto;
    min-width: 1.4rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.barem-note[b-w2otuaacm5] {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: #4b5563;
}


/* ---- "necorectat": the grader did not assess this item ------------------------------
   Deliberately NOT red. Zero points at zero confidence means "not marked", and painting it as
   wrong told a student their correct solution was wrong. Blue reads as "information", and the
   ? mark carries the meaning for anyone who cannot tell the colours apart. */
.chip[data-state="pending"][b-w2otuaacm5]         { background: var(--pending-bg); color: var(--pending); border-color: var(--pending); border-style: dotted; }
.tally-item[data-state="pending"][b-w2otuaacm5]   { color: var(--pending); }
.result-problem[data-state="pending"][b-w2otuaacm5] { border-left-color: var(--pending); background: var(--pending-bg); }
[data-state="pending"] .mark[b-w2otuaacm5]        { color: var(--pending); }
[data-state="pending"] .state-label[b-w2otuaacm5] { color: var(--pending); }

.not-final[b-w2otuaacm5] {
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--pending);
    background: var(--pending-bg);
    border-radius: 4px;
}

/* ---- grilă options: correct vs. chosen must be unmistakable ------------------------ */
.options li[b-w2otuaacm5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.opt-mark[b-w2otuaacm5] {
    flex: 0 0 1.1rem;
    font-weight: 700;
    text-align: center;
}

.options li.is-correct .opt-mark[b-w2otuaacm5]                  { color: var(--ok); }
.options li.is-chosen:not(.is-correct) .opt-mark[b-w2otuaacm5]  { color: var(--bad); }

/* Heavier than a hairline, so the two states read at a glance rather than on inspection. */
.options li.is-correct[b-w2otuaacm5],
.options li.is-chosen:not(.is-correct)[b-w2otuaacm5] {
    border-width: 2px;
}

/* The named typical error behind the option the student picked. The li is a flex row, so
   this has to claim a full basis or it lands beside the option text. Indented to the option
   text, not the tick, so it reads as belonging to that answer. */
.options li[b-w2otuaacm5] { flex-wrap: wrap; }

.misconception[b-w2otuaacm5] {
    /* Indent with padding, not margin: a 100% basis plus a left margin overflows the box by
       exactly the margin, and the last word of a long line touches the border. */
    box-sizing: border-box;
    flex: 0 0 100%;
    padding: 0 0.2rem 0 1.6rem;
    margin: 0.3rem 0 0.1rem;
    font-size: 0.85rem;
    color: var(--bad);
}

/* Outcome of the email capture, shown after the redirect back to #trimite. */
.email-status[b-w2otuaacm5] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border-left: 4px solid;
    margin: 0.5rem 0;
}
.email-status.ok[b-w2otuaacm5]  { border-color: var(--ok);  background: var(--ok-bg); }
.email-status.bad[b-w2otuaacm5] { border-color: var(--bad); background: var(--bad-bg); }
/* /Components/Pages/Rezolvare.razor.rz.scp.css */
/* The solver page. One column, set for reading, like the privacy notice.

   NO :root / html / body rules here. CSS isolation rewrites every selector to carry this
   component's scope attribute, so ":root" would become ":root[b-xxxx]" and match nothing at
   all, silently. Custom properties live in wwwroot/app.css; this file only consumes them. */

.solver-page[b-ap81rt9wft] {
    font-family: var(--font-ui);
    max-width: 44rem;
    margin: 2rem auto 3rem;
    /* No side padding: SiteLayout's column already has the gutter (--page-gutter). */
    line-height: 1.6;
    color: var(--brand-ink);
}

.solver-page h1[b-ap81rt9wft] {
    font-size: 1.7rem;
    margin: 0 0 0.5rem;
}

.solver-page h2[b-ap81rt9wft] {
    font-size: 1.15rem;
    margin: 0 0 0.6rem;
}

.solver-page .lead[b-ap81rt9wft] {
    font-size: 1.05rem;
    margin: 0 0 1.4rem;
}

.solver-page a[b-ap81rt9wft] {
    color: var(--brand);
}

/* The disclosure (decision §10). Deliberately above the form and hard to skip: the condition
   on using a free-tier provider here is that the student reads this BEFORE typing. */
.disclosure[b-ap81rt9wft] {
    border: 1px solid #d7dee0;
    border-left: 4px solid var(--brand);
    border-radius: 6px;
    background: #f6f9f9;
    padding: 1rem 1.1rem 0.8rem;
    margin: 0 0 1.5rem;
}

.disclosure ul[b-ap81rt9wft] {
    margin: 0;
    padding-left: 1.2rem;
}

.disclosure li[b-ap81rt9wft] {
    margin: 0.35rem 0;
}

.disclosure .warn[b-ap81rt9wft] {
    color: #8a4b00;
}

.disclosure .more[b-ap81rt9wft] {
    margin: 0.8rem 0 0;
    font-size: 0.92rem;
}

/* --- the form ---------------------------------------------------------------- */

.solver-page label[b-ap81rt9wft] {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.solver-page .hint[b-ap81rt9wft] {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: #4b5563;
}

.solver-page .hint code[b-ap81rt9wft] {
    background: #eef2f2;
    border-radius: 3px;
    padding: 0.05rem 0.25rem;
}

.solver-page textarea[b-ap81rt9wft] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid #9aa7aa;
    border-radius: 6px;
    resize: vertical;
}

.solver-page button[b-ap81rt9wft] {
    margin-top: 0.75rem;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
}

/* --- answers ----------------------------------------------------------------- */

.solver-page .notice[b-ap81rt9wft] {
    margin: 1.2rem 0 0;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: var(--pending-bg);
    border: 1px solid #c7d7f7;
}

.solution[b-ap81rt9wft] {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e5e7eb;
}

.solution .ai-badge[b-ap81rt9wft] {
    display: inline-block;
    margin: 0 0 0.8rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background: var(--pending-bg);
    color: var(--pending);
}

.solution .steps[b-ap81rt9wft] {
    margin: 0;
    padding-left: 1.4rem;
}

.solution .steps li[b-ap81rt9wft] {
    margin: 0.7rem 0;
    /* The model's steps carry real line breaks, and HTML collapses them - the same trap that
       ran Subiectul III's a) and b) together on the result page. The text is still escaped;
       this only decides how its newlines are shown. */
    white-space: pre-line;
}

.solution .final-answer[b-ap81rt9wft] {
    margin: 1.1rem 0 0;
    padding: 0.7rem 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    background: var(--ok-bg);
    color: var(--ok);
    white-space: pre-line;
}

.solution .gone[b-ap81rt9wft] {
    margin-top: 1rem;
    font-size: 0.92rem;
    color: #4b5563;
}

.solver-page .back[b-ap81rt9wft] {
    margin-top: 2rem;
}
/* /Components/Pages/TakeExam.razor.rz.scp.css */
/* Exam page. Static SSR; behaviour lives in wwwroot/js/exam.js. */

.exam-header[b-x54db98463] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

/* The mark only, and not a link: nothing in the exam bar should lead away from the exam. */
.exam-mark[b-x54db98463] {
    display: block;
    width: 24px;
    height: 24px;
}

#timer[b-x54db98463] {
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 700;
}

/* A practice sheet's header, where the exam shows its clock (decision §24). */
.untimed[b-x54db98463] {
    font-size: 0.9rem;
    color: #4b5563;
}

.practice-intro[b-x54db98463] {
    color: #4b5563;
    max-width: 44rem;
}

#save-status[b-x54db98463] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-right: auto;
}

/* A refusal will not fix itself (exam.js classifyResponse), so it must not look like "salvat". */
#save-status.is-refused[b-x54db98463] {
    color: var(--bad);
    font-weight: 600;
}

#submit-exam[b-x54db98463] {
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.subject[b-x54db98463] {
    margin: 1.5rem 0;
}

.problem[b-x54db98463] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0.85rem 0;
}

.problem h3[b-x54db98463] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.points[b-x54db98463] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

/* Problem statements are authored with real line breaks between a) and b). HTML would
   collapse them and run the sub-parts together, which is how the paper stops looking
   like the paper. */
.statement[b-x54db98463] {
    white-space: pre-line;
    margin: 0.5rem 0;
    line-height: 1.6;
}

.figure[b-x54db98463] {
    display: block;
    max-width: min(100%, 420px);
    height: auto;
    margin: 0.75rem 0;
}

.options[b-x54db98463] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.options li[b-x54db98463] {
    margin-bottom: 0.25rem;
}

.options label[b-x54db98463] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

.options label:hover[b-x54db98463] {
    background: #f3f4f6;
}

input[data-role="short-answer"][b-x54db98463] {
    width: min(100%, 22rem);
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
}

.step[b-x54db98463] {
    margin-bottom: 0.5rem;
}

.step label[b-x54db98463] {
    display: block;
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 0.15rem;
}

.step textarea[b-x54db98463] {
    width: 100%;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}

button[data-role="add-step"][b-x54db98463] {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

/* pre-line above turns newlines into breaks, which is what we want for the authored
   a)/b) structure — but KaTeX's own output contains newlines too, and they must not
   become line breaks inside a formula. */
.statement .katex[b-x54db98463],
.statement .katex-display[b-x54db98463] {
    white-space: normal;
}

/* The fields are labelled "Rândul", not "Pasul", and this says why in the student's
   own words: a student who thinks each box must match a barem step spends exam time
   guessing a mapping that does not exist. The grader is told the same thing. */
.step-hint[b-x54db98463] {
    font-size: 0.85rem;
    color: #4b5563;
    margin: 0 0 0.5rem;
}
/* /Components/Pages/Teorie.razor.rz.scp.css */
/* The theory index (§25). Colour variables live in wwwroot/app.css, never :root here. */

.theory-index[b-wellim77z9] { max-width: 50rem; }
.lead[b-wellim77z9] { color: #374151; }

.theory-index ul[b-wellim77z9] { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.theory-index li[b-wellim77z9] { padding: 0.6rem 0.8rem; border: 1px solid #e5e7eb; border-radius: 6px; }
.theory-index li a[b-wellim77z9] { font-weight: 600; color: var(--brand); text-decoration: none; }
.theory-index li p[b-wellim77z9] { margin: 0.25rem 0 0; color: #4b5563; font-size: 0.9rem; }

.skill-code[b-wellim77z9] {
    font-size: 0.8rem;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0 0.3rem;
    margin-right: 0.3rem;
}

/* Pe clase / Pe domenii, and the grade jump links. */
.view[b-wellim77z9], .grades-nav[b-wellim77z9] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.view a[b-wellim77z9], .grades-nav a[b-wellim77z9] {
    padding: 0.2rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: var(--brand);
    text-decoration: none;
    font-size: 0.9rem;
}
.view a[aria-current="page"][b-wellim77z9] { background: var(--brand); border-color: var(--brand); color: #fff; }
.note[b-wellim77z9] { font-size: 0.9rem; color: #4b5563; }
.grade[b-wellim77z9] { scroll-margin-top: 1rem; }
.grades[b-wellim77z9] { display: inline-block; margin-left: 0.4rem; font-size: 0.8rem; color: #6b7280; }
.theory-index h3[b-wellim77z9] { font-size: 1rem; color: #4b5563; margin: 1rem 0 0.4rem; }
.theory-index .continued li[b-wellim77z9] { padding: 0.35rem 0.8rem; background: #f9fafb; }

/* The domain view's links to a skill's grade pages. */
.theory-index li p.grade-pages[b-wellim77z9] { font-size: 0.85rem; }
.grade-pages a[b-wellim77z9] { margin-left: 0.35rem; font-weight: 400; }
/* /Components/Pages/TeorieTema.razor.rz.scp.css */
/* The practice box under a theory page. The page itself is styled by Shared/TheoryView.razor.css.
   No :root rules here - scoped CSS would rewrite them to match nothing. */
.practice-box[b-pfg1hmfb4h] {
    max-width: 46rem;
    margin: 2rem 0;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--brand);
    border-radius: 8px;
    scroll-margin-top: 1rem;
}
.practice-box h2[b-pfg1hmfb4h] { margin-top: 0; }
.practice-box form[b-pfg1hmfb4h] { margin: 0.5rem 0; }
.practice-box .more[b-pfg1hmfb4h] { font-size: 0.9rem; }
.practice-box .more a[b-pfg1hmfb4h] { color: var(--brand); }
.status[b-pfg1hmfb4h] {
    background: #fff8e6;
    border: 1px solid #9a6700;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
}

/* Links between a skill's whole page and its grade pages, above the page. */
.by-grade[b-pfg1hmfb4h] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; max-width: 46rem; margin: 0 0 0.75rem; font-size: 0.9rem; }
.by-grade span[b-pfg1hmfb4h] { color: #4b5563; }
.by-grade a[b-pfg1hmfb4h] { padding: 0.15rem 0.6rem; border: 1px solid #d1d5db; border-radius: 999px; color: var(--brand); text-decoration: none; }
.by-grade a[aria-current="page"][b-pfg1hmfb4h] { background: var(--brand); border-color: var(--brand); color: #fff; }
/* /Components/Shared/FormulaSheet.razor.rz.scp.css */
/* The formula sheet (§26). Colour variables live in wwwroot/app.css, never :root here. */

.grade[b-ilwoz7gmlv] { scroll-margin-top: 1rem; margin-bottom: 2rem; }
.grade h2[b-ilwoz7gmlv] { font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }

/* The three areas side by side where there is room, stacked on a phone. 20.5rem leaves ~297px of
   content, and the widest formula line measured 291px; at 17rem a column narrowed to 254px and 27
   lines scrolled. min(…, 100%) keeps a 320px phone from overflowing the page. */
.areas[b-ilwoz7gmlv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20.5rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.area[b-ilwoz7gmlv] {
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--brand);
    border-radius: 6px;
    padding: 0.4rem 0.9rem 0.6rem;
}
.area[data-area="Geometrie"][b-ilwoz7gmlv] { border-top-color: var(--brand-accent); }
.area[data-area="Date"][b-ilwoz7gmlv] { border-top-color: #6b7280; }
.area h3[b-ilwoz7gmlv] { font-size: 1.05rem; margin: 0.4rem 0 0.2rem; }

.topic h4[b-ilwoz7gmlv] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4b5563;
    margin: 0.9rem 0 0.3rem;
}
.topic h4 .theory[b-ilwoz7gmlv] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-left: 0.4rem;
    color: var(--brand);
}

dl[b-ilwoz7gmlv] { margin: 0; }
.formula[b-ilwoz7gmlv] { padding: 0.35rem 0; border-bottom: 1px solid #f1f2f4; break-inside: avoid; }
.formula:last-child[b-ilwoz7gmlv] { border-bottom: 0; }
.formula dt[b-ilwoz7gmlv] { font-size: 0.9rem; font-weight: 600; }
.formula dd[b-ilwoz7gmlv] { margin: 0.1rem 0 0; }
/* A long formula scrolls inside its own line rather than widening the page on a phone. */
.formula .tex[b-ilwoz7gmlv] { overflow-x: auto; overflow-y: hidden; padding: 0.15rem 0; }
/* nowrap: KaTeX leaves a break opportunity after every relation, and a cheat-sheet line broken
   after "90° <" is misread. A line too long for a phone scrolls instead. */
.formula .tex .line[b-ilwoz7gmlv] { display: block; white-space: nowrap; padding: 0.1rem 0; }
.formula .note[b-ilwoz7gmlv] { font-size: 0.8rem; color: #4b5563; }

.draft[b-ilwoz7gmlv] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9a6700;
    border: 1px solid #e6c46a;
    border-radius: 4px;
    padding: 0 0.3rem;
    margin-left: 0.3rem;
}

/* The smallest phones (320px): a column of ~258px, under the widest line. Less padding and a
   slightly smaller formula bring every line back inside, rather than making it scroll. */
@media (max-width: 380px) {
    .area[b-ilwoz7gmlv] { padding-inline: 0.5rem; }
    .formula .tex[b-ilwoz7gmlv] { font-size: 0.9em; }
}

@media print {
    .grade[b-ilwoz7gmlv] { margin-bottom: 0; }
    /* Every grade starts its own sheet of paper. */
    .grade + .grade[b-ilwoz7gmlv] { break-before: page; }
    .areas[b-ilwoz7gmlv] { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .area[b-ilwoz7gmlv] { padding: 0.2rem 0.5rem; border-width: 1px; border-top-width: 2px; }
    .topic h4[b-ilwoz7gmlv] { margin-top: 0.5rem; }
    .topic h4 .theory[b-ilwoz7gmlv] { display: none; }
    .formula[b-ilwoz7gmlv] { padding: 0.15rem 0; }
    /* Paper cannot scroll: a line too long for a third of A4 wraps rather than being cut off. */
    .formula .tex[b-ilwoz7gmlv] { overflow: visible; }
    .formula .tex .line[b-ilwoz7gmlv] { white-space: normal; }
}
/* /Components/Shared/LatexHelp.razor.rz.scp.css */
/* Same shape as MathInputHelp, but for the author rather than the student. */

.latex-help[b-uwpdz8t067] {
    margin: 0.6rem 0 1rem;
    border: 1px solid #e0d7f0;
    border-radius: 8px;
    background: #faf8fe;
    font-size: 0.9rem;
    max-width: 44rem;
}

.latex-help > summary[b-uwpdz8t067] {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: #5b21b6;
    user-select: none;
}

.latex-help[open] > summary[b-uwpdz8t067] {
    border-bottom: 1px solid #e0d7f0;
}

.latex-help .lead[b-uwpdz8t067],
.latex-help .note[b-uwpdz8t067] {
    margin: 0.6rem 0.75rem;
    line-height: 1.6;
}

.latex-help .note[b-uwpdz8t067] {
    color: #4b5563;
    border-top: 1px solid #ece6f6;
    padding-top: 0.5rem;
}

.latex-help table[b-uwpdz8t067] {
    width: calc(100% - 1.5rem);
    margin: 0.5rem 0.75rem;
    border-collapse: collapse;
}

.latex-help th[b-uwpdz8t067],
.latex-help td[b-uwpdz8t067] {
    text-align: left;
    padding: 0.28rem 0.5rem;
    border-bottom: 1px solid #ece6f6;
}

.latex-help th[b-uwpdz8t067] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.latex-help code[b-uwpdz8t067] {
    background: #fff;
    border: 1px solid #e0d7f0;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    white-space: nowrap;
}
/* /Components/Shared/MathInputHelp.razor.rz.scp.css */
/* Collapsed by default: a student who already knows how to type does not need it in the
   way, and a student who does not can open it without leaving the exam. */

.math-help[b-5v390esgkg] {
    margin: 0.6rem 0 0;
    border: 1px solid #dbe3f0;
    border-radius: 8px;
    background: #f7f9fd;
    font-size: 0.9rem;
}

.math-help > summary[b-5v390esgkg] {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: #1e40af;
    user-select: none;
}

.math-help > summary:hover[b-5v390esgkg] {
    background: #eef3fc;
    border-radius: 8px;
}

.math-help[open] > summary[b-5v390esgkg] {
    border-bottom: 1px solid #dbe3f0;
    border-radius: 8px 8px 0 0;
}

.math-help .lead[b-5v390esgkg],
.math-help .note[b-5v390esgkg] {
    margin: 0.6rem 0.75rem;
    line-height: 1.5;
}

.math-help .note[b-5v390esgkg] {
    color: #4b5563;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
}

.math-help table[b-5v390esgkg] {
    width: calc(100% - 1.5rem);
    margin: 0.5rem 0.75rem;
    border-collapse: collapse;
}

.math-help th[b-5v390esgkg],
.math-help td[b-5v390esgkg] {
    text-align: left;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #e8edf6;
    vertical-align: top;
}

.math-help th[b-5v390esgkg] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.math-help code[b-5v390esgkg] {
    background: #fff;
    border: 1px solid #dbe3f0;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    font-size: 0.9em;
    white-space: nowrap;
}
/* /Components/Shared/TheoryView.razor.rz.scp.css */
/* A theory page (§25), shared by /teorie/{code} and the admin preview. No :root rules here - scoped CSS would rewrite them to match nothing
   (CLAUDE.md gotchas); the colour variables live in wwwroot/app.css. */

.theory[b-rm9ugk1p46] { max-width: 46rem; }

.crumbs[b-rm9ugk1p46] { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.25rem; }
.crumbs a[b-rm9ugk1p46] { color: var(--brand); }

.skill-code[b-rm9ugk1p46] {
    font-size: 0.8rem;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0 0.3rem;
}

.summary[b-rm9ugk1p46] { font-size: 1.05rem; color: #374151; }

.levels[b-rm9ugk1p46] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.levels a[b-rm9ugk1p46] {
    padding: 0.3rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    text-decoration: none;
    color: var(--brand);
    font-size: 0.9rem;
}

.levels a[data-level="easy"][b-rm9ugk1p46]   { border-color: var(--ok); }
.levels a[data-level="medium"][b-rm9ugk1p46] { border-color: var(--partial); }
.levels a[data-level="hard"][b-rm9ugk1p46]   { border-color: var(--bad); }
.levels a.practice[b-rm9ugk1p46] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Authored text keeps its line breaks (CLAUDE.md gotchas: every page rendering authored text
   needs this, and each scoped stylesheet has to say it again). */
.theory p[b-rm9ugk1p46] { white-space: pre-line; line-height: 1.6; }

section[b-rm9ugk1p46] { margin: 1.75rem 0; scroll-margin-top: 1rem; }
section h2[b-rm9ugk1p46] { margin-bottom: 0.5rem; }

.story[b-rm9ugk1p46] {
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.story h2[b-rm9ugk1p46] { margin-top: 0; }

.level[b-rm9ugk1p46] {
    padding-left: 1rem;
    border-left: 5px solid #d1d5db;
}
.level[data-level="easy"][b-rm9ugk1p46]   { border-left-color: var(--ok); }
.level[data-level="medium"][b-rm9ugk1p46] { border-left-color: var(--partial); }
.level[data-level="hard"][b-rm9ugk1p46]   { border-left-color: var(--bad); }

/* A worked example, set apart from the explanation around it. */
.example[b-rm9ugk1p46] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
}

.figure[b-rm9ugk1p46] { display: block; max-width: 100%; margin: 0.5rem 0; border: 1px solid #e5e7eb; border-radius: 4px; }

.mistakes p[b-rm9ugk1p46] { padding-left: 0.6rem; border-left: 3px solid var(--bad); }

.sources[b-rm9ugk1p46] { font-size: 0.9rem; color: #4b5563; }
.sources li[b-rm9ugk1p46] { margin-bottom: 0.3rem; }
.generated[b-rm9ugk1p46] { font-size: 0.8rem; color: #6b7280; }

.back[b-rm9ugk1p46] { margin-top: 2rem; font-size: 0.9rem; }