/* Figtree, Bricolage Grotesque and JetBrains Mono, served from here rather than from Google.

   This line used to point at fonts.googleapis.com, which meant every visitor announced themselves
   to Google before a pixel of the site had rendered - and it was the first thing in the first
   stylesheet, so it blocked rendering on a third party's uptime too. The files are in lib/fonts
   now; see the README there for what they are and how to add a weight. */
@import url('lib/fonts/fonts.css');

html, body {
    font-family: 'Figtree', 'Segoe UI', sans-serif;
    /* A solid color under the gradient: a gradient is an image, so on its own it leaves the
       base transparent and whatever the browser paints behind the page shows through wherever
       the document does not reach. */
    background-color: #e6eaec;
    color: #1a1b1f;
}

:root {
    --reference-panel-width: clamp(510px, calc(44vw + 120px), 900px);
}

a, .btn-link {
    color: #0a7e7e;
}

.btn-primary {
    color: #fff;
    background-color: #0c2448;
    border-color: #0a1f3d;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0c9c9c;
}

.content {
    padding-top: 1.1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    padding: 32px;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.reference-panel {
    background: #f8fafc;
    border-right: 1px solid #cbd5e1;
    box-shadow: 18px 0 48px rgba(15, 23, 42, 0.26);
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 180ms ease, visibility 180ms ease;
    visibility: hidden;
    width: var(--reference-panel-width);
    z-index: 50;
}

.reference-panel.open {
    transform: translateX(0);
    visibility: visible;
}

.reference-panel-header {
    align-items: center;
    background: #0c2448;
    color: #f8fafc;
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

.reference-panel-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.reference-panel-subtitle {
    color: #cbd5e1;
    font-size: 0.84rem;
    margin-top: 2px;
}

.reference-panel-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.reference-close {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #f8fafc;
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.reference-open-tab {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    color: #f8fafc;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    padding: 0 12px;
    text-decoration: none;
}

.reference-open-tab:hover {
    background: rgba(255, 255, 255, 0.18);
}

.reference-frame {
    border: 0;
    flex: 1;
    width: 100%;
}

.reference-panel-tab {
    background: #0c2448;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 8px 22px rgba(15, 23, 42, 0.28);
    color: #f8fafc;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    left: 0;
    letter-spacing: 0.08em;
    padding: 12px 10px;
    position: fixed;
    text-transform: uppercase;
    top: 132px;
    transition: left 180ms ease;
    writing-mode: vertical-rl;
    z-index: 51;
}

.reference-panel-tab.open {
    left: var(--reference-panel-width);
}

.template-panel {
    background: #11131a;
    color: #f9f5ef;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(14, 15, 22, 0.25);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 64px);
    box-sizing: border-box;
    position: sticky;
    top: 32px;
}

.panel-header h1 {
    font-size: 1.6rem;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.panel-header .subtitle {
    font-size: 0.95rem;
    color: #b6bdca;
}

.template-search {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0f1118;
    color: #f1f1f6;
}

.template-search::placeholder {
    color: #7f8796;
}

.template-filter-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto 1fr;
}

.filter-label {
    color: #c7cedb;
    font-size: 0.88rem;
    font-weight: 600;
}

.template-filter-select {
    background: #0f1118;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #f1f1f6;
    padding: 8px 10px;
    width: 100%;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-right: 6px;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.template-list::-webkit-scrollbar {
    width: 8px;
}

.template-list::-webkit-scrollbar-track {
    background: transparent;
}

.template-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
}

.template-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.template-category {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-category-button {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.template-category-button:hover .template-category-label {
    color: #ffd28d;
}

.template-category-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f0b04e;
}

.category-count {
    min-width: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #b6bdca;
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 7px;
}

.category-chevron {
    color: #f0b04e;
    font-size: 0.82rem;
}

.template-category-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-category-body.collapsed {
    display: none;
}

.template-subcategory-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b6bdca;
    padding: 6px 4px 0 4px;
}

.template-card {
    background: #1a1d27;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.template-title {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: inherit;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.template-title-text {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.error-indicator {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.36);
    border-radius: 999px;
    color: #fca5a5;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    text-transform: uppercase;
}

.correct-indicator {
    background: rgba(52, 211, 153, 0.13);
    border: 1px solid rgba(52, 211, 153, 0.34);
    border-radius: 999px;
    color: #86efac;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    text-transform: uppercase;
}

.archived-indicator {
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    text-transform: uppercase;
}

.fixed-indicator {
    background: rgba(244, 183, 64, 0.16);
    border: 1px solid rgba(244, 183, 64, 0.42);
    border-radius: 999px;
    color: #f4b740;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    white-space: nowrap;
}

.difficulty-indicator {
    background: rgba(96, 165, 250, 0.13);
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 999px;
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    text-transform: uppercase;
}

.image-indicator {
    background: rgba(45, 212, 191, 0.14);
    border: 1px solid rgba(45, 212, 191, 0.4);
    border-radius: 999px;
    font-size: 0.62rem;
    line-height: 1;
    padding: 2px 6px;
}

.exam-badge {
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}
.exam-badge-tfs {
    background: rgba(96, 165, 250, 0.13);
    border: 1px solid rgba(96, 165, 250, 0.34);
    color: #93c5fd;
}
.exam-badge-hvac {
    background: rgba(45, 212, 191, 0.13);
    border: 1px solid rgba(45, 212, 191, 0.4);
    color: #5eead4;
}
.exam-badge-mdm {
    background: rgba(232, 121, 249, 0.13);
    border: 1px solid rgba(232, 121, 249, 0.4);
    color: #f0abfc;
}

.template-title:hover {
    background: rgba(255, 255, 255, 0.04);
}

.chevron {
    transition: transform 200ms ease;
}

.chevron.expanded {
    transform: rotate(180deg);
}

.template-body {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease;
    overflow: hidden;
}

.template-body.expanded {
    max-height: 440px;
    opacity: 1;
    transform: translateY(0);
}

.template-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px 16px;
}

.template-tag {
    border-radius: 999px;
    background: rgba(240, 176, 78, 0.12);
    border: 1px solid rgba(240, 176, 78, 0.28);
    color: #f4c675;
    font-size: 0.76rem;
    padding: 3px 7px;
}

.template-empty {
    color: #b6bdca;
    font-size: 0.92rem;
    padding: 12px 4px;
}

.template-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 16px 16px;
    flex-wrap: wrap;
}

.control-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: #e7e7ee;
}

.correct-check {
    color: #bdf5d8;
}

.control-label {
    font-size: 0.92rem;
    color: #c7cedb;
}

.seed-input {
    width: 120px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #0f1118;
    color: #f1f1f6;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.run-button {
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background: #f0b04e;
    color: #1c1405;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(240, 176, 78, 0.25);
}

.run-button:hover {
    filter: brightness(1.05);
}

.archive-button {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #cbd5e1;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.archive-button:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* When archived, the button reactivates — make it read as the "on" state. */
.archive-button.is-archived {
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.4);
    color: #86efac;
}

.error-editor {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px 16px;
}

.error-label {
    color: #c7cedb;
    font-size: 0.82rem;
    font-weight: 700;
}

.error-input {
    background: #0f1118;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #f1f1f6;
    font-family: 'Figtree', 'Segoe UI', sans-serif;
    font-size: 0.88rem;
    line-height: 1.35;
    min-height: 72px;
    padding: 8px 10px;
    resize: vertical;
    width: 100%;
}

.error-input::placeholder {
    color: #7f8796;
}

.error-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.save-error-button,
.clear-error-button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 10px;
}

.save-error-button {
    background: #f0b04e;
    color: #1c1405;
}

.clear-error-button {
    background: rgba(255, 255, 255, 0.08);
    color: #d9deea;
}

.clear-error-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.error-save-message {
    color: #9fb0c7;
    font-size: 0.78rem;
}

.result-panel {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(19, 24, 32, 0.12);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Only the problem content scrolls — the absolutely-positioned solution slide-out is a sibling,
   so it stays put and scrolls internally (via .solution-body). The page itself never scrolls. */
.result-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.result-empty {
    font-size: 1.1rem;
    color: #6a7280;
    padding: 40px;
    border-radius: 20px;
    border: 1px dashed #c9d1db;
    background: rgba(255, 255, 255, 0.7);
}

.result-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e2e6ee;
    padding-bottom: 12px;
}

.result-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-meta {
    display: flex;
    gap: 16px;
    font-size: 0.9rem;
    color: #667085;
}

.result-section {
    margin-top: 20px;
}

.result-section h2 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.link-button {
    background: none;
    border: none;
    color: #1f4aa8;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-button:hover {
    text-decoration: underline;
}

.prompt {
    white-space: pre-wrap;
    line-height: 1.5;
    background: #fbfbfd;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e5e9f0;
    max-width:760px;
}

.prompt-text {
    display: inline;
}

.prompt-math {
    background: transparent;
    /*padding: 2px 6px;*/
    border-radius: 6px;
    margin: 0 2px;
}

.prompt-block {
    display: block;
    margin: 10px 0;
}

/* A reading passage inside a prompt: a white card with a left rule, set apart from the stem
   that follows it, the way the digital SAT keeps the text in its own column. Rendered by
   SatPromptParts, so it is styled here rather than in a component's scoped sheet. */
.prompt-passage {
    display: block;
    margin: 0 0 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-left: 3px solid #64748b;
    border-radius: 0 10px 10px 0;
    color: #1e293b;
    line-height: 1.6;
    white-space: normal;
}

/* The underlined run of a passage, for "function of the underlined sentence" items. Offset so
   the rule clears descenders and reads as the test's underline, not a link. */
/* Inline emphasis runs from PromptMarkup. Global on purpose: the runs render inside SatPromptParts,
   a child component, so a page's scoped stylesheet cannot reach them. */
.prompt-strong { font-weight: 700; }
.prompt-em { font-style: italic; }

.prompt-underline {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* A student's research notes, shown above a synthesis question. Same card as the passage; the
   prompt box is pre-wrap, so the list resets white-space or the list items pick up gaps. */
.prompt-notes {
    display: block;
    margin: 10px 0 14px;
    padding: 12px 16px 12px 36px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-left: 3px solid #64748b;
    border-radius: 0 10px 10px 0;
    color: #1e293b;
    line-height: 1.6;
    white-space: normal;
}

.prompt-notes li {
    margin: 2px 0;
}

/* A data table above a quantitative-evidence question. Digits right-aligned and tabular so a
   column can be read down; text cells stay left. */
.prompt-table {
    border-collapse: collapse;
    margin: 0 0 14px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    font-size: .95rem;
    white-space: normal;
}

.prompt-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: #1e293b;
    padding: 6px 10px;
}

.prompt-table th,
.prompt-table td {
    padding: 6px 12px;
    border: 1px solid #e5e9f0;
    text-align: left;
    white-space: nowrap;
}

.prompt-table th {
    background: #f1f5f9;
    font-weight: 600;
}

.prompt-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.solution-text .prompt-block .katex-display,
.solution-text .prompt-block .katex-display .katex-html
 {
    text-align: left;
}

.katex .base {
    padding-bottom: 6px;
}

.answer-list {
    padding-left: 20px;
    margin: 0;
    list-style: none;
}

.answer-item {
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.answer-item:hover {
    background: #f3f6fb;
    border-color: #c6d2ea;
    transform: translateY(-1px);
}

.answer-item.selected {
    background: #e7eefc;
    border-color: #8aa6e6;
}

.solution-panel {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 620px;
    max-width: 90%;
    height: calc(100% - 48px);
    background: white;
    color: black;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(12, 13, 20, 0.35);
    transform: translateX(120%);
    transition: transform 220ms ease;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.solution-panel.open {
    transform: translateX(0);
}

.solution-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.solution-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.solution-body {
    padding: 16px 18px;
    overflow-y: auto;
}

.solution-final {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.handbook-references {
    background: #f8fafc;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    color: #0f172a;
    margin: 18px 0 0;
    padding: 12px 14px;
}

.handbook-references-title {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.handbook-references ul {
    margin: 0;
    padding-left: 18px;
}

.handbook-references li {
    margin-bottom: 7px;
}

.handbook-references li:last-child {
    margin-bottom: 0;
}

.handbook-reference-link {
    background: none;
    border: 0;
    color: #1f4aa8;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.handbook-reference-note {
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.4;
    margin-top: 3px;
}

.solution-steps {
    padding-left: 16px;
    margin: 0;
}

.solution-steps li {
    margin-bottom: 10px;
}

.solution-text {
    margin-bottom: 6px;
}

.proof-link {
    background: none;
    border: none;
    color: #1f4aa8;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.proof-link:hover {
    color: #15316e;
}

.proof-link-inline {
    background: none;
    border: none;
    color: #1f4aa8;
    cursor: pointer;
    display: inline;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.proof-link-inline:hover {
    color: #15316e;
}

.handbook-link-inline {
    background: none;
    border: none;
    color: #1f4aa8;
    cursor: pointer;
    display: inline;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.handbook-link-inline:hover {
    color: #15316e;
}

.proof-modal-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, 0.48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1000;
}

.proof-modal {
    background: white;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.38);
    color: black;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 760px);
    max-width: 880px;
    overflow: hidden;
    width: min(92vw, 880px);
}

.proof-modal-header {
    align-items: center;
    border-bottom: 1px solid #e5e9f0;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 18px;
}

.proof-modal-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

.proof-modal-close {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.25rem;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}

.proof-modal-close:hover {
    background: #e2e8f0;
}

.proof-modal-body {
    line-height: 1.55;
    overflow-y: auto;
    padding: 18px;
}

.proof-references {
    margin-top: 18px;
}

.proof-image {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin: 0 0 16px;
    overflow: hidden;
    padding: 12px;
}

.proof-image img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 360px;
    max-width: 100%;
    object-fit: contain;
}

.proof-video { margin: 0 0 16px; background: #0f172a; border-radius: 14px; overflow: hidden; }
.proof-video video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.proof-video figcaption { color: #475569; font-size: 0.88rem; padding: 8px 12px; background: #f8fafc; text-align: center; }

.proof-image figcaption {
    color: #475569;
    font-size: 0.88rem;
    margin-top: 10px;
    text-align: center;
}

.proof-modal-body .prompt-block .katex-display,
.proof-modal-body .prompt-block .katex-display .katex-html {
    text-align: left;
}

.solution-latex {
    color: #f0b04e;
}

@media (max-width: 900px) {
    :root {
        --reference-panel-width: calc(100vw - 22px);
    }

    .app-shell {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .template-panel {
        max-height: none;
        position: static;
    }

    .result-panel {
        order: 2;
    }

    .solution-panel {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 0;
        left: 10px;
        width: auto;
        max-width: none;
        height: min(72dvh, 640px);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateY(110%);
    }

    .solution-panel.open {
        transform: translateY(0);
    }
}