:root { --ink:#182229; --muted:#657078; --paper:#f6f3ec; --card:#fffdfa; --line:#dcd7cc; --accent:#176b5b; --accent-dark:#0f4e43; --warn:#965f17; }
* { box-sizing:border-box; }
html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, Segoe UI, Arial, sans-serif;
    line-height: 1.55;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem max(1rem,calc((100% - 1000px)/2)); background:#102d2a; color:white; }
.site-header a { color:white; text-decoration:none; margin-left:1rem; }
.site-header .brand { font-weight:800; margin-left:0; letter-spacing:.02em; }
.site-header nav { display:flex; align-items:center; gap:1rem; }
.site-footer {
    margin-top: auto;
    padding: 0.9rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #6f6a61;
    background: #e9e4d9;
    border-top: 1px solid #ddd5c8;
}
.portal-student-name { color:white; }
.portal-login-panel { max-width:420px; margin:2rem auto; }
.container { width:min(1000px,calc(100% - 2rem)); margin:2rem auto; }
h1 { font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.25rem); line-height:1.08; margin:.2rem 0 1.25rem; }
h2 { margin-top:2rem; }
.eyebrow { color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0; }
.hero { padding:3rem 0 2rem; max-width:720px; }
.button { display:inline-block; border:0; border-radius:.4rem; background:var(--accent); color:white; padding:.8rem 1.15rem; font-weight:750; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--accent-dark); }
.button.secondary { background:#dce9e6; color:var(--accent-dark); margin-left:.35rem; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.stats-grid,.score-panel { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin:1.5rem 0 2.5rem; }
.stat,.score-panel>div { background:var(--card); border:1px solid var(--line); border-radius:.7rem; padding:1.2rem; }
.stat strong,.score-panel strong { display:block; font-size:1.7rem; }.stat span,.score-panel span,.muted { color:var(--muted); }
a.stat-link { text-decoration:none; display:block; }
a.stat-link:hover,a.stat-link:focus-visible { border-color:var(--accent); outline:none; }
.list,.panel,.question-card { background:var(--card); border:1px solid var(--line); border-radius:.7rem; }
.list-row { display:flex; justify-content:space-between; color:var(--ink); text-decoration:none; padding:1rem; border-bottom:1px solid var(--line); }
.list-row:last-child { border:0; }.list-row small { color:var(--muted); }
.dashboard-section { margin:1.75rem 0; }
.dashboard-section h2 { font-size:1.15rem; margin-bottom:.6rem; }
.note-row { align-items:flex-start; gap:1rem; }
.note-row-actions { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; min-width:9rem; }
.note-row-actions form { margin:0; }
.note-row-actions details { text-align:right; }
.note-row-actions details summary { cursor:pointer; color:var(--muted); font-size:.85rem; text-decoration:underline; text-underline-offset:2px; }
.note-row-actions details[open] summary { color:var(--ink); }
.note-row-actions details form { margin-top:.5rem; display:flex; flex-direction:column; gap:.4rem; min-width:14rem; }
.note-row-actions textarea { width:100%; }
.student-note-preview { margin:.4rem 0; font-style:italic; color:var(--ink); }
.panel { padding:1.5rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-grid label { display:flex; flex-direction:column; gap:.35rem; font-weight:700; }
.form-grid .wide { grid-column:1/-1; }
input[type=text],input[type=number],input:not([type]) { width:100%; border:1px solid #aaa; border-radius:.35rem; padding:.7rem; font:inherit; }
select { border:1px solid #aaa; border-radius:.35rem; padding:.65rem; font:inherit; background:white; }
.action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin:1.5rem 0; }
.portal-action-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.action-card { color:var(--ink); text-decoration:none; display:flex; flex-direction:column; gap:.35rem; }
.action-card span { color:var(--muted); }
.note-tile { display:flex; flex-direction:column; gap:.5rem; }
.notes-add-section { border-top:3px solid var(--accent); margin-top:3rem; padding-top:1.5rem; }
.panel.danger { border:1px solid #d99a4e; background:#fff4df; margin:1.5rem 0; }
.panel.danger h2 { margin-top:0; color:var(--warn); }
.button.danger { background:var(--warn); }
.button.danger:hover { background:#7a4c12; }
.mapping-form { margin-top:1rem; }
.mapping-form fieldset { border:0; padding:0; margin:1rem 0; }
.skill-option { display:flex; gap:.6rem; padding:.45rem 0; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; align-items:end; }
.filter-grid label,.edit-form>label,.flag-panel label,.compact-form label { display:flex; flex-direction:column; gap:.3rem; font-weight:700; }
.filter-grid .check { flex-direction:row; align-items:center; }
.review-source-row { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; }
.review-source-pct { width:4.5rem; display:inline-block; }
textarea { width:100%; border:1px solid #aaa; border-radius:.35rem; padding:.7rem; font:inherit; resize:vertical; }
.metadata-grid { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; background:var(--card); border:1px solid var(--line); padding:1rem; }
.metadata-grid dt { font-weight:800; }.metadata-grid dd { margin:0; }
.status-actions,.button-row,.compact-form { display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; margin:1rem 0; }
.status-actions button { border:1px solid var(--line); border-radius:.35rem; padding:.5rem .7rem; cursor:pointer; }
.choice-summary { list-style:none; padding:0; }.choice-summary li { padding:.45rem 0; border-bottom:1px solid var(--line); }
.edit-form { display:grid; gap:1rem; }.preview-panel { border-top:3px solid var(--accent); margin-top:2rem; padding-top:1rem; }
.revision-card { margin:1rem 0; }.revision-card header { border-bottom:1px solid var(--line); padding-bottom:.6rem; }
.flag-widget { margin-top:1rem; }
.flag-trigger-row { display:flex; justify-content:flex-end; }
.flag-trigger { background:none; border:0; padding:.2rem 0; color:var(--muted); font-size:.8rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.flag-trigger:hover { color:var(--ink); }
.flag-panel { margin-top:.5rem; padding:.75rem; background:#f3f0e8; border-radius:.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; overflow:hidden; transition:opacity .18s ease; }
.flag-panel[hidden] { display:none; }
.flag-panel.is-closing { opacity:0; }
.flag-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:.5rem; }
.flag-confirmation { margin-top:.5rem; text-align:right; color:var(--accent-dark); font-size:.85rem; font-weight:700; }
.question-actions { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.question-actions .flag-widget { margin-top:0; }
.note-widget { flex:1 1 auto; }
.note-trigger { background:none; border:0; padding:.2rem 0; color:var(--muted); font-size:.8rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.note-trigger:hover { color:var(--ink); }
.note-panel { margin-top:.5rem; padding:.75rem; background:#f3f0e8; border-radius:.4rem; max-width:420px; transition:opacity .18s ease; }
.note-panel[hidden] { display:none; }
.note-panel label { display:flex; flex-direction:column; gap:.3rem; font-weight:700; }
.note-panel textarea { width:100%; }
.note-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
.note-indicator { margin:0 0 .6rem; color:var(--accent-dark); font-size:.85rem; font-weight:700; }
.autosave-status { margin:.5rem 0 0; text-align:right; color:var(--muted); font-size:.78rem; font-style:italic; }
.autosave-status.autosave-error { color:#8b2f24; font-style:normal; }
.connectivity-status { display:inline-block; margin:0 0 .5rem; padding:.25rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700; background:#eef0ea; color:var(--muted); }
.connectivity-status.is-checking { background:#eef3f6; color:#1f5a7a; }
.connectivity-status.is-offline,.connectivity-status.is-error { background:#f6e3df; color:#8b2f24; }
.connectivity-status.is-session-expired { background:#f7edd8; color:#8a5a12; }
.connectivity-detail { margin:0 0 .8rem; padding:.6rem .8rem; border-radius:.4rem; background:#f6e3df; color:#8b2f24; font-size:.88rem; }
.multi-tab-warning { margin:0 0 .8rem; padding:.6rem .8rem; border-radius:.4rem; background:#f7edd8; color:#8a5a12; font-size:.88rem; }
.student-note { white-space:pre-wrap; }
.source-picker { border:1px solid var(--line); border-radius:.6rem; padding:1rem; margin:0; }
.source-picker legend { font-weight:800; padding:0 .4rem; }
.source-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; }
.source-option { display:flex; align-items:flex-start; gap:.65rem; border:1px solid var(--line); border-radius:.5rem; padding:.85rem; background:var(--card); cursor:pointer; }
.source-option strong,.source-option small { display:block; }
.source-option small { color:var(--muted); margin-top:.2rem; }
.advanced-filter { border-top:1px solid var(--line); padding-top:.75rem; }
.advanced-filter summary { cursor:pointer; font-weight:750; }
.advanced-filter label { display:flex; flex-direction:column; gap:.35rem; margin-top:.75rem; }
.distribution { padding:0; list-style:none; max-width:600px; }
.distribution li { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:.55rem 0; }
.exam-toolbar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; background:rgba(246,243,236,.96); padding:.6rem 0; backdrop-filter:blur(6px); }
.exam-toolbar h1 { font-size:1.8rem; margin:0; }.timer { background:#102d2a; color:white; border-radius:.5rem; padding:.65rem 1rem; }
.floating-timer { position:fixed; top:1rem; right:1rem; z-index:60; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:.5rem; padding:.5rem .8rem; font-size:.9rem; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.12); }
@media(max-width:650px){.floating-timer{top:.5rem;right:.5rem;padding:.4rem .6rem;font-size:.8rem;}}
.question-card { padding:1.25rem; margin:1.25rem 0; }
.question-card>header { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:.7rem; font-weight:800; }
.question-card header small { color:var(--muted); }.question-text { font-size:1.08rem; margin:1rem 0; }
.choices { border:0; padding:0; margin:1rem 0; }.choices label { display:flex; gap:.65rem; align-items:flex-start; padding:.65rem; border-radius:.4rem; }.choices label:hover { background:#f0eee7; }
.question-figure { display:block; max-width:100%; max-height:620px; margin:1rem auto; object-fit:contain; }
.missing-figure { color:var(--warn); background:#fff4df; padding:.6rem; border-radius:.35rem; }
.choice-row { align-items:flex-start; }
.choice-content { display:flex; flex-direction:column; gap:.5rem; flex:1; min-width:0; }
.choice-figure { display:block; }
.choice-image { display:block; max-width:280px; max-height:220px; border-radius:.35rem; object-fit:contain; }
.submit { font-size:1.05rem; padding:1rem 1.4rem; }.flash { padding:1rem; border-radius:.4rem; margin-bottom:1rem; }.flash.error { background:#ffe4df; color:#76291d; }
#unanswered-dialog { max-width:32rem; width:calc(100% - 2rem); border:1px solid var(--line); border-radius:.7rem; padding:1.5rem; }
#unanswered-dialog::backdrop { background:rgba(16,45,42,.55); }
#unanswered-dialog h2 { margin-top:0; }
#unanswered-dialog [data-unanswered-list] { font-weight:800; }
.badge { display:inline-block; border-radius:99px; padding:.2rem .6rem; font-size:.75rem; font-weight:800; text-transform:uppercase; }.badge.correct{background:#d9f3e7;color:#155b44}.badge.incorrect{background:#ffe1dc;color:#8b2f24}.badge.skipped,.badge.flagged{background:#fff0cd;color:#76500f}.badge.neutral{background:#e4e7f0;color:#31395c;text-transform:none;font-weight:700}
.status-line { margin-top:.8rem; }.answer-summary { display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1rem; background:#f3f0e8; padding:1rem; }.answer-summary dt{font-weight:800}.answer-summary dd{margin:0}
.answer-choices { list-style:none; padding:0; margin:.85rem 0; display:grid; gap:.35rem; }
.answer-choice { display:flex; gap:.5rem; padding:.5rem .65rem; border-radius:.4rem; border:1px solid transparent; }
.answer-choice.correct-choice { background:#d9f3e7; border-color:#a9dfc4; }
.answer-choice.student-wrong-choice { background:#ffe1dc; border-color:#f3b8ad; }
.all-results { margin-top:2rem; }.all-results summary { cursor:pointer; font-weight:800; font-size:1.25rem; }.success-message { color:var(--accent); font-weight:700; }
.question-card.consolidate { background:#fff8ea; border-color:#f0dfa8; }
.review-progress-panel { background:var(--card); border:1px solid var(--line); border-radius:.7rem; padding:1rem 1.2rem; margin:1.5rem 0; }
.review-confirmation { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; gap:.5rem; flex-wrap:wrap; }
.review-priority-explanation { background:var(--card); border:1px solid var(--line); border-radius:.7rem; padding:1rem 1.2rem; margin:1rem 0; }
.review-priority-explanation summary { cursor:pointer; font-weight:800; }
.review-priority-explanation p { margin:.75rem 0 0; color:var(--ink); }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; background:var(--card); } th,td { padding:.7rem; border:1px solid var(--line); text-align:left; }
.flag-form { display:grid; grid-template-columns:minmax(110px,.5fr) minmax(160px,1fr) auto; gap:.4rem; }
.flag-form select,.flag-form input,.flag-form button { padding:.45rem; font:inherit; }
.circled { display:inline-flex; align-items:center; justify-content:center; min-width:1.35em; min-height:1.35em; border:1px solid currentColor; border-radius:50%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.local-admin-banner { background:#fff0cd; color:#76500f; border:1px solid #e8c37a; padding:.7rem 1rem; border-radius:.5rem; font-weight:800; margin-bottom:1rem; }
.figure-thumb { max-width:150px; max-height:100px; object-fit:contain; display:block; background:#f3f0e8; border:1px solid var(--line); border-radius:.3rem; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0; }
.compare-grid figure { margin:0; background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:.75rem; }
.zoom-frame { overflow:auto; max-height:480px; text-align:center; background:#f3f0e8; border-radius:.4rem; }
.zoom-frame img { max-width:100%; display:inline-block; margin:0 auto; transform-origin:top center; transition:transform .1s ease-out; }
.compare-grid figcaption { text-align:center; font-weight:700; margin-top:.5rem; color:var(--muted); }
.compare-grid .zoom-range { width:70%; vertical-align:middle; }
.compare-toolbar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.compare-slider { margin:1rem 0; }
.compare-slider-stack { position:relative; max-width:100%; overflow:hidden; border:1px solid var(--line); border-radius:.6rem; background:#f3f0e8; }
.compare-slider-stack img { display:block; width:100%; height:auto; }
.compare-slider-base { position:relative; }
.compare-slider-overlay { position:absolute; inset:0 auto 0 0; width:50%; overflow:hidden; border-right:2px solid var(--accent); }
.compare-slider-overlay img { position:absolute; top:0; left:0; width:auto; max-width:none; height:100%; }
.compare-slider-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.2rem; height:2.2rem; border-radius:50%; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; pointer-events:none; font-weight:800; }
.compare-slider input[type="range"] { width:100%; margin-top:.6rem; }
.button.small { padding:.4rem .7rem; font-size:.85rem; }
.button.small.secondary { background:#dce9e6; color:var(--accent-dark); }
.pagination { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.75rem 0; }
.pagination .disabled { opacity:.4; pointer-events:none; }
.pagination-current { background:var(--accent-dark); color:#fff; font-weight:800; }
.visually-hidden-admin-filter { display:none !important; }
.status-pill { display:inline-block; border-radius:99px; padding:.25rem .65rem; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.status-pill--pending { background:#e4e4e4; color:#4a4a4a; }
.status-pill--cleaned { background:#dbe9f7; color:#1f5a8a; }
.status-pill--needs_review { background:#ffe6c2; color:#8a4b06; }
.status-pill--accepted { background:#d9f3e7; color:#155b44; }
.status-pill--rejected { background:#ffe1dc; color:#8b2f24; }
.status-pill--applied { background:#dce4ff; color:#26308a; }
.status-pill--error { background:#f6c9d0; color:#7a1a2b; }
.status-pill--active { background:#d9f3e7; color:#155b44; }
.status-pill--archived { background:#e4e4e4; color:#4a4a4a; }
.batch-panel { margin-bottom:1.5rem; }
.batch-panel h2 { margin-top:0; }
.figure-gallery tbody tr:hover { background:#f6f3ea; }
@media(max-width:650px){.form-grid{grid-template-columns:1fr}.site-header nav a{display:block}.list-row{display:block}.exam-toolbar{align-items:flex-start}.answer-summary{grid-template-columns:1fr}.compare-grid{grid-template-columns:1fr}}