@font-face { font-family: "Sarabun"; src: url("../fonts/Sarabun-Regular.ttf") format("truetype"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("../fonts/Sarabun-SemiBold.ttf") format("truetype"); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
    --blue-950: #082f49;
    --blue-900: #0c4a6e;
    --blue-800: #075985;
    --blue-700: #0369a1;
    --blue-600: #0284c7;
    --blue-500: #0ea5e9;
    --blue-100: #e0f2fe;
    --blue-50: #f0f9ff;
    --ink: #102a43;
    --muted: #627d98;
    --line: #d9eaf5;
    --surface: #ffffff;
    --bg: #f4f9fc;
    --success: #14804a;
    --success-bg: #e7f7ee;
    --warning: #a15c00;
    --warning-bg: #fff4d6;
    --danger: #c12b38;
    --danger-bg: #feecef;
    --shadow: 0 16px 40px rgba(14, 80, 117, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 165, 233, .12), transparent 24rem),
        linear-gradient(180deg, #fafdff 0, var(--bg) 24rem);
    font-family: "Sarabun", Tahoma, sans-serif;
    line-height: 1.55;
}
a { color: var(--blue-700); text-decoration: none; }
button, input, select { font: inherit; }

.topbar {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: 72px;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    gap: 28px;
    color: white;
    background: linear-gradient(125deg, var(--blue-950), var(--blue-700));
    box-shadow: 0 8px 25px rgba(8, 47, 73, .18);
}
.brand { display: flex; align-items: center; gap: 11px; color: white; flex: 0 0 auto; }
.brand-mark {
    display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 2px;
    position: relative; overflow: hidden !important; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; background: white;
    box-shadow: 0 3px 12px rgba(2, 24, 43, .28);
}
.brand-mark img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 50%; object-fit: cover; }
.brand strong, .brand small { display: block; line-height: 1.2; }
.brand strong { font-size: 18px; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: #bae6fd; font-size: 11px; }
.main-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.main-nav a { padding: 9px 11px; border-radius: 9px; color: #dff4ff; font-size: 14px; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: white; background: rgba(255,255,255,.14); }
.user-menu { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blue-900); background: var(--blue-100); font-weight: 700; }
.logout-link { padding-left: 9px; color: #bae6fd; border-left: 1px solid rgba(255,255,255,.25); }
.nav-toggle { display: none; margin-left: auto; border: 0; background: transparent; color: white; font-size: 25px; }

.page-shell { width: min(1180px, calc(100% - 32px)); min-height: calc(100vh - 130px); margin: 32px auto 48px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--blue-600); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; color: var(--blue-950); font-size: clamp(27px, 4vw, 38px); line-height: 1.25; }
h2 { color: var(--blue-950); font-size: 22px; }
h3 { color: var(--blue-900); font-size: 17px; }
.lead { max-width: 760px; margin-bottom: 0; color: var(--muted); }

.card {
    padding: 24px; border: 1px solid rgba(180, 216, 235, .78); border-radius: 18px;
    background: rgba(255,255,255,.96); box-shadow: var(--shadow);
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.card-header h2, .card-header h3, .card-header p { margin-bottom: 0; }
.card-header p { color: var(--muted); font-size: 14px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 20px; }
.stat-card { position: relative; overflow: hidden; min-height: 135px; }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -28px; top: -28px; border-radius: 50%; background: var(--blue-100); }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { margin: 8px 0 2px; color: var(--blue-900); font-size: 34px; font-weight: 700; line-height: 1; }
.stat-note { color: var(--blue-600); font-size: 12px; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 600; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(3,105,161,.16); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); }
.btn-outline { color: var(--blue-700); border-color: #9cd6f4; background: white; }
.btn-danger { color: white; background: var(--danger); }
.btn-sm { min-height: 34px; padding: 6px 11px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.field { display: grid; gap: 7px; }
.field label { color: var(--blue-950); font-size: 13px; font-weight: 600; }
.form-control { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); border: 1px solid #bed9e8; border-radius: 10px; outline: none; background: white; }
.form-control:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(14,165,233,.11); }
.form-hint { color: var(--muted); font-size: 12px; }
.filter-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; }
.filter-checkbox { display: flex; min-height: 44px; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.upload-zone { padding: 30px; border: 2px dashed #9ccfe8; border-radius: 15px; text-align: center; background: var(--blue-50); }
.upload-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; color: white; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); font-size: 26px; }
.file-name { display: block; margin: 9px 0; color: var(--blue-800); font-size: 13px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.data-table { width: 100%; border-collapse: collapse; background: white; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eaf2f7; vertical-align: middle; }
.data-table th { color: var(--blue-900); background: var(--blue-50); font-size: 12px; font-weight: 700; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafdff; }
.empty-state { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty-icon { display: block; margin-bottom: 9px; font-size: 38px; opacity: .7; }

.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-info { color: var(--blue-800); background: var(--blue-100); }
.badge-muted { color: #536777; background: #eef3f6; }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.alert { padding: 14px 16px; border: 1px solid; border-radius: 12px; }
.alert-info { color: var(--blue-900); border-color: #a9dbf5; background: var(--blue-50); }
.alert-warning { color: var(--warning); border-color: #f2d383; background: var(--warning-bg); }
.alert-danger { color: var(--danger); border-color: #f6bec5; background: var(--danger-bg); }
.alert-success { color: var(--success); border-color: #a9dfc0; background: var(--success-bg); }
.rescan-mode-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rescan-mode-notice > div { flex: 1 1 520px; }

.toast { position: fixed; z-index: 100; top: 86px; right: 22px; width: min(420px, calc(100% - 44px)); padding: 15px 46px 15px 17px; border-radius: 13px; background: white; box-shadow: 0 18px 45px rgba(8,47,73,.2); transition: .3s; }
.toast-success { border-left: 5px solid var(--success); }
.toast-warning { border-left: 5px solid #e7a525; }
.toast-danger { border-left: 5px solid var(--danger); }
.toast button { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.toast-hide { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.quick-link { display: block; min-height: 150px; padding: 22px; border-radius: 17px; color: var(--ink); background: white; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(14,80,117,.07); transition: .18s; }
.quick-link:hover { transform: translateY(-3px); border-color: #8ed3f4; box-shadow: var(--shadow); }
.quick-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 15px; border-radius: 13px; color: var(--blue-800); background: var(--blue-100); font-size: 21px; }
.quick-link strong { display: block; margin-bottom: 5px; color: var(--blue-950); }
.quick-link small { color: var(--muted); }

.auth-page { min-height: 100vh; background: radial-gradient(circle at 18% 12%, rgba(64,91,180,.22), transparent 26rem), radial-gradient(circle at 88% 88%, rgba(8,132,187,.12), transparent 30rem), #08111f; }
.auth-page .topbar, .auth-page .footer { display: none; }
.auth-page .page-shell { display: grid; place-items: center; width: 100%; min-height: 100vh; margin: 0; padding: clamp(24px, 5vw, 58px); }
.login-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, 1.02fr); width: min(1080px, 100%); min-height: 650px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: #fff; box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.login-shell-register { min-height: 760px; }
.login-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 58px 52px; color: white; text-align: center; background: linear-gradient(150deg, #102653 0%, #173f7d 52%, #3152a2 100%); }
.login-art::before { position: absolute; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; top: -185px; right: -155px; box-shadow: 0 0 0 42px rgba(255,255,255,.035), 0 0 0 86px rgba(255,255,255,.025); }
.login-art::after { position: absolute; width: 210px; height: 210px; border-radius: 50%; content: ""; bottom: -125px; left: -90px; background: radial-gradient(circle, rgba(114,211,255,.22), rgba(114,211,255,0) 69%); }
.login-art > * { position: relative; z-index: 1; }
.login-art-logo { display: grid; place-items: center; width: 100%; margin: 0 auto 15px; }
.login-art-logo img { display: block; width: 116px; height: 116px; object-fit: contain; border: 7px solid rgba(239,247,255,.88); border-radius: 50%; background: white; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 14px 34px rgba(0,14,38,.34), 0 0 38px rgba(142,211,255,.22); }
.login-art .login-art-college { margin: 0 0 22px; color: #d8edff; text-align: center; letter-spacing: .02em; }
.login-art h1 { margin: 0; color: white; font-size: clamp(31px, 3vw, 40px); line-height: 1.18; letter-spacing: -.025em; }
.login-art > p:not(.login-art-college) { max-width: 420px; margin: 14px auto 0; color: #cbe5f8; }
.login-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 34px; }
.login-feature { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(5px); }
.login-feature span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; color: #d8f2ff; }
.login-feature strong { font-size: 13px; }
.login-feature small, .login-feature br { display: none; }
.login-form { position: relative; display: grid; align-content: center; overflow: hidden; padding: 62px 66px 46px; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); }
.login-form::before { position: absolute; width: 240px; height: 240px; border-radius: 50%; content: ""; top: -145px; right: -105px; background: linear-gradient(145deg, rgba(49,82,162,.12), rgba(14,165,233,.035)); }
.login-form > * { position: relative; z-index: 1; }
.login-form > .eyebrow { margin: 0 0 9px; color: #496385; text-align: center; letter-spacing: .15em; }
.login-form h2 { margin: 0; color: #101b2d; text-align: center; font-size: 32px; line-height: 1.2; }
.login-form > p:not(.eyebrow) { margin: 8px 0 30px; color: var(--muted); text-align: center; }
.login-form form { display: grid; gap: 16px; }
.login-form .field { gap: 7px; }
.login-form .field label { color: #20334c; font-weight: 650; }
.login-form .form-control { min-height: 51px; border-color: #cbdced; border-radius: 13px; background: #f4f7fc; box-shadow: inset 0 1px 1px rgba(15,39,72,.025); }
.login-form .form-control:focus { border-color: #4777d3; background: #fff; box-shadow: 0 0 0 4px rgba(71,119,211,.12); }
.login-form .btn-primary { min-height: 52px; margin-top: 4px; border: 0; border-radius: 13px; background: linear-gradient(100deg, #236eb7, #3947cf); box-shadow: 0 12px 24px rgba(47,78,183,.22); }
.login-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(47,78,183,.28); }
.login-register-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3ebf3; color: var(--muted); }
.login-register-link .btn { flex: 0 0 auto; border-radius: 11px; }
.auth-panel-meta { display: grid; gap: 3px; margin-top: 28px; color: #7b8da2; text-align: center; font-size: 11px; }
.login-shell-register .login-form { padding-top: 42px; padding-bottom: 34px; }
.login-shell-register .login-form form { gap: 12px; }
.login-shell-register .login-form > p:not(.eyebrow) { margin-bottom: 20px; }
.login-shell-register .auth-panel-meta { margin-top: 18px; }

.review-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 22px; align-items: start; min-height: 0; }
.sticky-review { position: sticky; top: 88px; display: flex; flex-direction: column; height: calc(100vh - 108px); max-height: calc(100vh - 108px); min-height: 0; overflow: hidden; }
.review-evidence-card { min-width: 0; }
.scan-image { display: block; width: 100%; max-height: 66vh; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #e8eef2; }
.issue-list { display: grid; gap: 13px; }
.issue-card { padding: 14px; border: 1px solid #edd496; border-radius: 12px; background: #fffbef; }
.issue-card.is-normal { border-color: #d9eaf5; background: #fbfdff; }
.issue-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review-answer-scroll { display: grid; flex: 1 1 auto; gap: 9px; min-height: 0; max-height: none; padding: 2px 7px 2px 1px; overflow-y: auto; scrollbar-gutter: stable; }
.review-answer-scroll::-webkit-scrollbar { width: 9px; }
.review-answer-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #8ec8e5; background-clip: padding-box; }
.review-answer-scroll::-webkit-scrollbar-track { background: #eef8fd; }
.review-audit-note { margin: 12px 0; font-size: 12px; }
.review-edit-reason { flex: 0 0 auto; margin-top: 10px; }
.choice-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 10px; }
.choice-row-edit { grid-template-columns: repeat(6, minmax(40px, 1fr)); }
.choice-option input { position: absolute; opacity: 0; }
.choice-option span { display: grid; place-items: center; height: 42px; border: 1px solid #bed9e8; border-radius: 9px; background: white; cursor: pointer; font-weight: 600; }
.choice-option input:checked + span { color: white; border-color: var(--blue-700); background: var(--blue-700); box-shadow: 0 0 0 3px rgba(14,165,233,.13); }
.choice-blank span { color: var(--muted); font-size: 11px; }
.review-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.review-view-tabs .btn.active { color: white; border-color: var(--blue-700); background: var(--blue-700); }
.review-evidence-warning { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px; font-size: 12px; }
.review-evidence-warning .btn { flex: 0 0 auto; background: #fff; }
.answer-sheet-reconstruction { max-height: 66vh; overflow-y: auto; padding: 18px; border: 1px solid #b9d9e9; border-radius: 12px; background: #fff; }
.reconstruction-heading { padding-bottom: 11px; text-align: center; border-bottom: 1px solid var(--line); }
.reconstruction-heading strong, .reconstruction-heading span { display: block; }
.reconstruction-heading strong { color: var(--blue-950); font-size: 18px; }
.reconstruction-heading span { color: var(--muted); font-size: 12px; }
.reconstruction-student { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; padding: 13px 0; color: var(--ink); font-size: 12px; }
.reconstruction-student span { overflow-wrap: anywhere; border-bottom: 1px dotted #91a7b5; }
.reconstruction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; padding: 16px 8px 4px; border-top: 1px solid var(--line); }
.reconstruction-column { display: grid; align-content: start; gap: 8px; }
.reconstruction-row { display: grid; grid-template-columns: 30px repeat(5, 29px); align-items: center; justify-content: center; gap: 7px; min-height: 34px; }
.reconstruction-row > b { color: #526d82; text-align: right; font-size: 12px; line-height: 1; }
.reconstruction-row > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #9eb4c2; border-radius: 50%; font-size: 12px; line-height: 1; }
.reconstruction-row > span.selected { color: white; border-color: var(--blue-700); background: var(--blue-700); box-shadow: 0 0 0 2px rgba(14,165,233,.13); }
.reconstruction-row.has-error { border-radius: 5px; background: #fff5d9; }
.answer-key-header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.answer-key-actions { display: flex; gap: 9px; align-items: center; }
.answer-key-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px 20px; padding: 20px 4px 4px; }
.key-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-width: 0; }
.key-number { color: #64748b; text-align: right; font-size: 13px; font-weight: 700; }
.key-choices { display: grid; grid-template-columns: repeat(5, 34px); gap: 6px; }
.key-item.is-free .key-choices { opacity: .4; }
.key-item.is-free .key-choice span { cursor: not-allowed; }
.key-choice { position: relative; display: block; width: 34px; height: 34px; }
.key-choice input { position: absolute; opacity: 0; pointer-events: none; }
.key-choice span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d8e1e8; border-radius: 50%; background: #fff; color: #64748b; cursor: pointer; font-size: 13px; font-weight: 700; transition: .15s ease; }
.key-choice input:focus-visible + span { outline: 3px solid rgba(22,163,74,.18); outline-offset: 2px; }
.key-choice input:checked + span { border-color: #168f47; background: #168f47; color: #fff; box-shadow: 0 4px 10px rgba(22,143,71,.22); }
.answer-key-save { justify-content: flex-end; }
.btn-success { color: #fff; border-color: #168f47; background: #168f47; }
.btn-success:hover { border-color: #10743a; background: #10743a; }
.guideline-list { display: grid; gap: 15px; margin: 0; padding-left: 24px; }
.guideline-list li { padding-left: 5px; color: var(--blue-700); }
.guideline-list strong, .guideline-list span { display: block; }
.guideline-list strong { color: var(--blue-950); }
.guideline-list span { color: var(--muted); font-size: 13px; }
.scanner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 20px; align-items: start; }
.scan-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.scan-methods > div { padding: 13px 14px; border: 1px solid #b9d9e9; border-radius: 12px; background: var(--blue-50); }
.scan-methods .scan-method-wide { grid-column: 1 / -1; border-color: #7dd3fc; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.scan-methods strong, .scan-methods span { display: block; }
.scan-methods strong { color: var(--blue-800); }
.scan-methods span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.scan-run-options { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 15px; padding: 12px 14px; border: 1px solid #9bcfe6; border-radius: 12px; background: #f8fcff; }
.scan-run-options strong, .scan-run-options span { display: block; }
.scan-run-options strong { color: var(--blue-950); font-size: 13px; }
.scan-run-options span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.scan-run-mode { display: flex; flex: 0 0 auto; gap: 6px; padding: 4px; border-radius: 10px; background: var(--blue-100); }
.scan-run-mode .btn { color: var(--blue-800); border-color: transparent; background: transparent; }
.scan-run-mode .btn.active { color: #fff; background: var(--blue-700); box-shadow: 0 3px 9px rgba(3,105,161,.22); }
.verification-result { margin: 12px 0 0; }
.device-scan-status { display: block; margin-top: 7px; color: var(--blue-700); font-size: 11px; font-weight: 600; }
.device-scan-status.is-ready { color: var(--success); }
.device-scan-status.is-error { color: var(--danger); }
.queue-status { margin-top: 12px; padding: 9px 12px; color: var(--blue-800); border-radius: 9px; background: var(--blue-50); font-size: 13px; font-weight: 600; }
.omr-batch-runner { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #9bcfe6; border-radius: 14px; background: #f8fcff; }
.omr-batch-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.omr-batch-header strong, .omr-batch-header span { display: block; }
.omr-batch-header strong { color: var(--blue-900); }
.omr-batch-header span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.omr-batch-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #dbeef7; }
.omr-batch-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-700), #16a34a); transition: width .25s ease; }
.omr-batch-list { display: grid; gap: 7px; max-height: 320px; overflow: auto; padding-right: 3px; }
.omr-batch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #d7e7ef; border-radius: 10px; background: #fff; }
.omr-batch-item strong, .omr-batch-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omr-batch-item strong { color: var(--ink); font-size: 12px; }
.omr-batch-item span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.omr-batch-item-status { min-width: 94px; color: var(--blue-800); text-align: right; font-size: 11px; font-weight: 700; }
.omr-batch-item.is-saved { border-color: #86d3a5; background: #f2fbf5; }
.omr-batch-item.is-review { border-color: #f0c96a; background: #fffaf0; }
.omr-batch-item.is-error { border-color: #f0a4aa; background: #fff5f6; }
.omr-batch-item.is-duplicate { border-color: #b7c6d0; background: #f7f9fa; }
.omr-batch-item-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 5px; }
.omr-batch-item-actions a, .omr-batch-item-actions button { padding: 3px 7px; border: 1px solid #9bcfe6; border-radius: 7px; color: var(--blue-800); background: #fff; font: inherit; font-size: 10px; cursor: pointer; text-decoration: none; }
.rectifier-upload-card { overflow: hidden; }
.rectifier-dropzone { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 7px; padding: 28px; border: 2px dashed #94c9e2; border-radius: 14px; color: var(--blue-900); background: linear-gradient(145deg, #f8fcff, #edf8fd); text-align: center; transition: .18s ease; }
.rectifier-dropzone.is-dragging { border-color: var(--blue-600); background: #e0f4ff; box-shadow: inset 0 0 0 3px rgba(14,165,233,.1); }
.rectifier-dropzone > span { max-width: 680px; color: var(--muted); font-size: 12px; }
.rectifier-dropzone .actions { justify-content: center; margin-top: 10px; }
.rectifier-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding: 11px 13px; border-radius: 11px; color: var(--blue-800); background: var(--blue-50); font-size: 13px; font-weight: 600; }
.rectifier-results { display: grid; gap: 16px; }
.rectifier-empty { display: grid; min-height: 210px; place-items: center; color: var(--muted); border: 2px dashed #c7dce7; border-radius: 13px; background: #fbfdff; }
.rectifier-result { display: grid; gap: 12px; padding: 14px; border: 1px solid #b9d9e9; border-radius: 13px; background: #fbfdff; }
.rectifier-result.has-error { border-color: #efb7bd; background: #fffafb; }
.rectifier-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.rectifier-result-heading strong, .rectifier-result-heading span { display: block; }
.rectifier-result-heading strong { color: var(--blue-950); overflow-wrap: anywhere; }
.rectifier-result-heading div > span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.rectifier-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.rectifier-compare figure { min-width: 0; margin: 0; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.rectifier-compare figcaption { margin-bottom: 7px; color: var(--blue-800); font-size: 12px; font-weight: 700; }
.rectifier-compare img, .rectifier-image-placeholder { display: grid; width: 100%; height: 260px; place-items: center; object-fit: contain; border-radius: 8px; color: var(--muted); background: #eaf2f6; font-size: 12px; }
.rectifier-item-actions { display: flex; justify-content: flex-end; }
.rectifier-batch-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding: 14px; border: 1px solid #93d2af; border-radius: 12px; background: #effaf3; }
.rectifier-batch-actions strong, .rectifier-batch-actions span { display: block; }
.rectifier-batch-actions strong { color: #17613a; }
.rectifier-batch-actions span { margin-top: 3px; color: #51705f; font-size: 11px; }
.graded-room-section { margin-bottom: 20px; }
.graded-results-table td { vertical-align: middle; }
.result-thumb-link { display: block; width: 94px; height: 64px; overflow: hidden; border: 1px solid #b9d9e9; border-radius: 8px; background: var(--blue-50); }
.result-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .18s ease; }
.result-thumb-link:hover .result-thumb { transform: scale(1.06); }
.result-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.result-row-actions form { margin: 0; }
.score-emphasis { color: var(--blue-900); font-size: 16px; white-space: nowrap; }
.saved-result-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.saved-result-actions form { margin: 0; }
.source-scan-preview { margin-top: 15px; padding: 12px; border: 1px solid #b9d9e9; border-radius: 13px; background: #f8fcff; }
.source-scan-preview-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.source-scan-preview-heading strong, .source-scan-preview-heading span { display: block; }
.source-scan-preview-heading strong { color: var(--blue-950); }
.source-scan-preview-heading div > span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.source-scan-preview .scan-canvas { max-height: 480px; margin-top: 10px; background: #edf4f8; }
.scope-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.scope-switch label { padding: 12px 14px; color: var(--blue-900); border: 1px solid #b9d9e9; border-radius: 11px; background: var(--blue-50); cursor: pointer; font-weight: 600; }
.scope-switch input { margin-right: 7px; accent-color: var(--blue-700); }
.print-legend { display: grid; gap: 12px; }
.print-legend > div { display: grid; grid-template-columns: 78px 1fr; gap: 13px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.print-legend p { margin: 0; color: var(--muted); font-size: 13px; }
.print-legend strong { color: var(--blue-950); }
.legend-mark { display: grid; place-items: center; min-height: 42px; padding: 5px; border: 2px solid currentColor; border-radius: 9px; font-weight: 800; }
.legend-mark.correct, .legend-mark.score { color: #0369a1; }
.legend-mark.wrong { color: #be1824; }
.camera-preview, .scan-canvas { width: 100%; max-height: 70vh; margin-top: 15px; object-fit: contain; border: 1px solid var(--line); border-radius: 13px; background: #dce9f0; }
.camera-capture-options { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding: 11px 13px; border: 1px solid #b9d9e9; border-radius: 12px; background: #f8fcff; }
.camera-capture-options strong, .camera-capture-options span { display: block; }
.camera-capture-options strong { color: var(--blue-950); font-size: 13px; }
.camera-capture-options span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.camera-mode-switch { display: flex; flex: 0 0 auto; gap: 6px; padding: 4px; border-radius: 10px; background: var(--blue-100); }
.camera-mode-switch .btn { color: var(--blue-800); border-color: transparent; background: transparent; }
.camera-mode-switch .btn.active { color: #fff; background: var(--blue-700); box-shadow: 0 3px 9px rgba(3,105,161,.22); }
.camera-stage { position: relative; width: 100%; margin-top: 15px; overflow: hidden; border-radius: 13px; background: #071722; aspect-ratio: 16 / 9; }
.camera-stage .camera-preview { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; border: 0; border-radius: 0; }
.camera-sheet-guide { position: absolute; top: 50%; left: 50%; width: 86%; aspect-ratio: 1.428 / 1; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.94); border-radius: 10px; box-shadow: 0 0 0 999px rgba(3,18,28,.38), inset 0 0 0 1px rgba(8,127,170,.8); pointer-events: none; }
.camera-sheet-guide::before, .camera-sheet-guide::after { content: ''; position: absolute; width: 34px; height: 34px; border-color: #20c7ff; border-style: solid; }
.camera-sheet-guide::before { top: -4px; left: -4px; border-width: 5px 0 0 5px; border-radius: 10px 0 0; }
.camera-sheet-guide::after { right: -4px; bottom: -4px; border-width: 0 5px 5px 0; border-radius: 0 0 10px; }
.camera-sheet-guide span { position: absolute; bottom: -38px; left: 50%; width: max-content; max-width: 95vw; transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; color: #fff; background: rgba(4,35,52,.85); font-size: 11px; font-weight: 700; }
.camera-guide-point { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; color: #fff; border: 3px solid #fff; border-radius: 50%; background: rgba(220,38,38,.78); box-shadow: 0 0 0 5px rgba(220,38,38,.2); font-size: 11px; font-style: normal; font-weight: 800; transition: .2s ease; }
.camera-guide-tr { top: -14px; right: -14px; }
.camera-guide-bl { bottom: -14px; left: -14px; }
.camera-guide-br { right: -14px; bottom: -14px; }
.camera-guide-point.is-detected, .camera-stage.is-aligned .camera-guide-point { background: rgba(22,163,74,.94); box-shadow: 0 0 0 6px rgba(22,163,74,.24); }
.camera-stage.is-aligned .camera-sheet-guide { border-color: #5ee98f; box-shadow: 0 0 0 999px rgba(3,18,28,.3), inset 0 0 0 2px rgba(22,163,74,.72); }
.camera-alignment-status { position: absolute; top: 12px; left: 50%; z-index: 3; width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%); padding: 7px 12px; overflow: hidden; color: #fff; border-radius: 999px; background: rgba(127,29,29,.88); font-size: 11px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.camera-alignment-status.is-ready { background: rgba(20,110,59,.93); }
body.camera-scanner-active, body.scan-review-active { overflow: hidden; }
.camera-scanner-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 100%; height: 100vh; height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 0, rgba(14,165,233,.25), transparent 36%), linear-gradient(145deg, #06131d, #092b42 65%, #064b70); }
.camera-scanner-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 5px 2px 11px; }
.camera-scanner-header strong, .camera-scanner-header span { display: block; }
.camera-scanner-header strong { color: #fff; font-size: clamp(18px, 3.6vw, 27px); }
.camera-scanner-header span { max-width: 70vw; margin-top: 2px; overflow: hidden; color: #b9dff0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.camera-close-button { flex: 0 0 auto; padding: 10px 15px; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 13px; background: rgba(255,255,255,.08); font: inherit; font-weight: 700; cursor: pointer; }
.camera-scanner-overlay .camera-capture-options { margin: 0 0 10px; padding: 8px 11px; color: #fff; border-color: rgba(125,211,252,.35); background: rgba(3,28,43,.66); backdrop-filter: blur(8px); }
.camera-scanner-overlay .camera-capture-options strong { color: #fff; }
.camera-scanner-overlay .camera-capture-options span { color: #b9dff0; }
.camera-scanner-overlay .camera-mode-switch { background: rgba(255,255,255,.1); }
.camera-scanner-overlay .camera-mode-switch .btn { color: #d7f1fc; }
.camera-scanner-overlay .camera-mode-switch .btn.active { color: #fff; background: linear-gradient(135deg, #6d36f4, #08aeea); }
.camera-scanner-overlay .camera-stage { min-height: 0; height: 100%; margin: 0; aspect-ratio: auto !important; border: 1px solid rgba(125,211,252,.4); border-radius: 19px; box-shadow: 0 18px 50px rgba(0,0,0,.36); }
.camera-scanner-overlay .camera-stage .camera-preview { object-fit: contain; }
.camera-scanner-overlay .camera-sheet-guide { width: 86%; max-width: 1180px; max-height: calc(100% - 68px); border-width: 2px; border-color: rgba(255,255,255,.82); box-shadow: 0 0 0 999px rgba(0,7,12,.43), inset 0 0 0 1px rgba(32,199,255,.48); }
.camera-scanner-overlay .camera-sheet-guide::before, .camera-scanner-overlay .camera-sheet-guide::after { width: 48px; height: 48px; border-color: #20c7ff; border-width: 7px 0 0 7px; filter: drop-shadow(0 0 7px rgba(32,199,255,.75)); }
.camera-scanner-overlay .camera-sheet-guide::after { border-width: 0 7px 7px 0; }
.camera-scanner-overlay .camera-stage.is-aligned .camera-sheet-guide::before, .camera-scanner-overlay .camera-stage.is-aligned .camera-sheet-guide::after { border-color: #34ef8b; filter: drop-shadow(0 0 9px rgba(52,239,139,.9)); }
.camera-scanner-overlay .camera-guide-point { width: 34px; height: 34px; border-width: 3px; font-size: 13px; }
.camera-scanner-overlay .camera-guide-tr { top: -17px; right: -17px; }
.camera-scanner-overlay .camera-guide-bl { bottom: -17px; left: -17px; }
.camera-scanner-overlay .camera-guide-br { right: -17px; bottom: -17px; }
.camera-scanner-overlay .camera-sheet-guide span { bottom: -42px; font-size: 12px; }
.camera-scan-line { position: absolute; top: 24%; left: 7%; z-index: 2; display: none; width: 86%; height: 2px; border-radius: 50%; background: linear-gradient(90deg, transparent, #34ef8b 12%, #d8ffe8 50%, #34ef8b 88%, transparent); box-shadow: 0 0 12px #34ef8b; pointer-events: none; }
.camera-stage.is-aligned .camera-scan-line { display: block; animation: camera-scan-line 1.6s ease-in-out infinite alternate; }
@keyframes camera-scan-line { from { top: 25%; opacity: .65; } to { top: 76%; opacity: 1; } }
.camera-scanner-overlay .camera-alignment-status { top: 13px; max-width: calc(100% - 30px); padding: 8px 13px; font-size: 12px; }
.camera-scanner-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; padding-top: 12px; }
.camera-scanner-controls:has(.camera-capture-button.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camera-scanner-controls .btn { min-height: 50px; border-radius: 14px; font-size: 13px; font-weight: 800; }
.camera-stop-button { color: #ffd7dc; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.camera-gallery-button { color: #e4f7ff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.camera-capture-button { display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border: 0; background: linear-gradient(135deg, #6d36f4, #08aeea); box-shadow: 0 9px 24px rgba(14,165,233,.28); }
.camera-capture-button > span { display: block; width: 23px; height: 23px; border: 3px solid #fff; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
.camera-capture-button:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }
.scan-review-modal { position: fixed; inset: 0; z-index: 1210; display: grid; place-items: center; padding: 18px; background: rgba(2,12,20,.76); backdrop-filter: blur(7px); }
.scan-review-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; width: min(940px, 100%); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow: hidden; border: 1px solid rgba(125,211,252,.48); border-radius: 22px; background: #fff; box-shadow: 0 24px 90px rgba(0,0,0,.43); }
.scan-review-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 17px 19px; color: #fff; background: linear-gradient(120deg, #6c31f3, #078bcf 72%, #18bfe7); }
.scan-review-header strong, .scan-review-header span { display: block; }
.scan-review-header strong { font-size: clamp(20px, 4vw, 31px); }
.scan-review-header span { margin-top: 2px; color: #e6f6ff; font-size: 12px; }
.scan-review-header button { padding: 9px 14px; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: rgba(255,255,255,.1); font: inherit; font-weight: 700; cursor: pointer; }
.scan-review-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 10px 14px; background: #f6fbfe; border-bottom: 1px solid #d9e8ef; }
.scan-review-stats span { display: flex; align-items: baseline; justify-content: center; gap: 5px; color: #60798b; font-size: 11px; }
.scan-review-stats b { color: var(--blue-900); font-size: 20px; }
.scan-review-image { min-height: 0; padding: 12px; overflow: auto; background: #eaf2f6; }
.scan-review-image canvas { display: block; width: 100%; height: auto; margin: auto; border-radius: 12px; background: #fff; box-shadow: 0 7px 24px rgba(15,46,63,.14); }
.scan-review-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 18px; padding: 11px 14px 4px; color: #536b7c; font-size: 11px; }
.scan-review-legend span { display: inline-flex; align-items: center; gap: 6px; }
.review-ring { width: 15px; height: 15px; border: 3px solid #94a3b8; border-radius: 50%; }
.review-ring.correct { border-color: #16a34a; }
.review-ring.wrong { border-color: #dc2626; }
.review-ring.key { border-color: #16a34a; border-style: dashed; }
.review-ring.unclear { border-color: #d97706; }
.scan-review-actions { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 12px 14px 15px; }
.scan-review-actions .btn { min-height: 45px; }
.warped-placeholder { display: grid; place-items: center; min-height: 260px; color: var(--muted); border: 2px dashed #b9d9e9; border-radius: 13px; background: var(--blue-50); }
.process-steps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.process-steps li { display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: 10px; color: var(--muted); }
.process-steps li > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 50%; color: var(--blue-800); background: var(--blue-100); font-size: 12px; font-weight: 700; }
.process-steps strong, .process-steps small { display: block; }
.process-steps strong { color: var(--ink); font-size: 13px; }
.process-steps small { font-size: 11px; }
.process-steps li.active { background: var(--blue-50); }
.process-steps li.active > span { color: white; background: var(--blue-600); animation: pulse 1.2s infinite; }
.process-steps li.done > span { color: white; background: var(--success); }
.process-steps li.failed > span { color: white; background: var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(14,165,233,.14); } }
.result-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.result-summary > .result-score { background: #e8f8ef; }
.result-summary > div { padding: 11px; border-radius: 10px; text-align: center; background: var(--blue-50); }
.result-summary span, .result-summary strong { display: block; }
.result-summary span { color: var(--muted); font-size: 11px; }
.result-summary strong { color: var(--blue-900); font-size: 24px; }
.review-live-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #9fd8b8; border-radius: 11px; color: #17613a; background: #ecf9f1; }
.review-live-score span { font-size: 12px; font-weight: 600; }
.review-live-score strong { font-size: 22px; white-space: nowrap; }
.approval-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; color: #17613a; background: #ecf9f1; }
.approval-score span { font-size: 12px; }
.approval-score strong { font-size: 18px; }
.reserve-identity { display: grid; gap: 11px; margin-bottom: 14px; padding: 14px; border: 1px solid #f6c768; border-radius: 12px; background: #fffaf0; }
.reserve-identity strong, .reserve-identity span { display: block; }
.reserve-identity strong { color: #92400e; }
.reserve-identity span { margin-top: 3px; color: #8a6542; font-size: 12px; }
.reserve-identity-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.answer-preview { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 12px; }
.answer-chip { display: grid; place-items: center; min-height: 35px; padding: 3px; border-radius: 6px; color: #708698; background: #f0f4f7; font-size: 11px; }
.answer-chip b { font-size: 8px; font-weight: 500; }
.answer-chip.answered { color: var(--success); background: var(--success-bg); }
.answer-chip.correct { color: var(--success); background: var(--success-bg); }
.answer-chip.wrong { color: var(--danger); background: var(--danger-bg); }
.answer-chip.free { color: #805b00; background: #fff3c4; }
.answer-chip.suggested { color: #946200; border-color: #f4d58a; background: #fff7dc; }
.answer-chip.error { color: var(--danger); background: var(--danger-bg); }
.answer-preview-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.answer-preview-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.legend-dot.correct { background: var(--success); }
.legend-dot.wrong, .legend-dot.unreadable { background: var(--danger); }
.legend-dot.free { background: #d6a620; }
.room-result-section + .room-result-section { margin-top: 18px; }
.result-answer-details { min-width: 155px; }
.result-answer-details summary { color: var(--blue-700); cursor: pointer; font-size: 12px; font-weight: 600; }
.report-answer-grid { display: grid; grid-template-columns: repeat(10, minmax(31px, 1fr)); gap: 4px; width: min(420px, 70vw); max-height: 190px; margin: 8px 0; padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; }
.result-edit-link { margin-top: 7px; white-space: nowrap; }
.result-state-note { display: block; max-width: 180px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.result-row-voided { opacity: .72; background: #fff8f9; }
.json-preview { max-height: 260px; overflow: auto; padding: 11px; border-radius: 9px; color: #d9f4ff; background: var(--blue-950); font: 11px/1.45 Consolas, monospace; white-space: pre-wrap; }
.next-scan-prompt { display: grid; gap: 11px; margin-top: 14px; padding: 14px; border: 1px solid #86c7e5; border-radius: 12px; background: linear-gradient(135deg, #f0f9ff, #e8f7ff); }
.next-scan-prompt strong, .next-scan-prompt span { display: block; }
.next-scan-prompt strong { color: var(--blue-900); }
.next-scan-prompt span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.next-scan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.duplicate-result { display: grid; gap: 11px; margin-top: 13px; padding: 14px; border: 1px solid #f0bd55; border-radius: 12px; background: #fff8e8; }
.duplicate-result strong, .duplicate-result span { display: block; }
.duplicate-result strong { color: #8a4b00; }
.duplicate-result span { margin-top: 3px; color: #876744; font-size: 12px; }
.duplicate-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-management-card { margin-top: 22px; }
.result-management-actions { display: grid; gap: 12px; }
.lifecycle-form { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 10px; align-items: center; }
.lifecycle-approve-form { grid-template-columns: auto minmax(240px, 1fr) auto; }
.result-history { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.result-history summary { color: var(--blue-800); cursor: pointer; font-weight: 700; }
.result-history-list { display: grid; gap: 9px; margin-top: 12px; }
.result-history-list article { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; }
.result-history-list strong, .result-history-list span { display: block; }
.result-history-list span { color: var(--muted); font-size: 12px; }
.result-history-list p { margin: 5px 0 0; color: var(--ink); font-size: 13px; }

.footer { min-height: 74px; padding: 14px 4vw; display: grid; grid-template-columns: minmax(210px, .9fr) minmax(360px, 1.6fr) auto; align-items: center; gap: 14px 24px; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,255,255,.82); font-size: 12px; }
.footer-identity { display: grid; gap: 2px; }
.footer-identity strong { color: var(--blue-950); font-size: 13px; }
.footer-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer-details strong { color: var(--ink); font-weight: 600; }
.footer-time { text-align: right; white-space: nowrap; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-muted { color: var(--muted); }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 12px; }
.hidden { display: none !important; }

@media (max-width: 1240px) {
    .topbar { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
    .nav-toggle { display: block; }
    .main-nav { display: none; order: 4; width: 100%; flex-wrap: wrap; }
    .main-nav.open { display: flex; }
    .user-name { display: none; }
}
@media (max-width: 800px) {
    .grid-4, .grid-3, .grid-2, .review-layout, .login-shell, .scanner-grid { grid-template-columns: 1fr; }
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .auth-page .page-shell { padding: 20px; }
    .auth-page .login-shell { max-width: 560px; min-height: 0; }
    .auth-page .login-art { display: block; padding: 28px 24px 25px; }
    .auth-page .login-art h1, .auth-page .login-art > p:not(.login-art-college), .auth-page .login-features { display: none; }
    .auth-page .login-art-logo { margin-bottom: 10px; }
    .auth-page .login-art-logo img { width: 88px; height: 88px; border-width: 5px; }
    .auth-page .login-art .login-art-college { margin: 0; }
    .auth-page .login-form { padding: 40px 34px 30px; }
    .answer-key-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .page-heading { align-items: stretch; flex-direction: column; }
    .footer { grid-template-columns: 1fr; text-align: center; }
    .footer-details { justify-content: center; }
    .footer-time { text-align: center; }
    .scan-methods { grid-template-columns: 1fr; }
    .omr-batch-item { grid-template-columns: 1fr; align-items: start; }
    .omr-batch-item-status { text-align: left; }
    .omr-batch-item-actions { justify-content: flex-start; }
    .camera-capture-options, .scan-run-options, .rectifier-toolbar, .rectifier-batch-actions { align-items: stretch; flex-direction: column; }
    .scan-run-mode { display: grid; grid-template-columns: 1fr 1fr; }
    .camera-scanner-overlay .camera-capture-options { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
    .camera-scanner-overlay .camera-capture-options > div:first-child span { display: none; }
    .camera-mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
    .camera-scanner-overlay .camera-sheet-guide { width: 88%; }
    .rectifier-compare { grid-template-columns: 1fr; }
    .rectifier-compare img, .rectifier-image-placeholder { height: auto; min-height: 190px; max-height: 48vh; }
    .sticky-review { position: static; height: auto; max-height: none; overflow: visible; }
    .review-answer-scroll { max-height: 65vh; }
    .reconstruction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-evidence-warning { align-items: stretch; flex-direction: column; }
    .lifecycle-form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .page-shell { width: min(100% - 20px, 1180px); margin-top: 20px; }
    .auth-page .page-shell { width: 100%; margin: 0; padding: 12px; }
    .topbar { padding-left: 12px; padding-right: 12px; }
    .brand small, .logout-link { display: none; }
    .card { padding: 17px; border-radius: 14px; }
    .filter-bar { grid-template-columns: 1fr; }
    .reserve-identity-form { grid-template-columns: 1fr; }
    .next-scan-actions { grid-template-columns: 1fr; }
    .camera-scanner-overlay { padding: max(8px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)); }
    .camera-scanner-header { padding-bottom: 8px; }
    .camera-scanner-header span { max-width: 62vw; }
    .camera-close-button { padding: 8px 11px; }
    .camera-scanner-overlay .camera-capture-options { margin-bottom: 7px; padding: 6px 7px; }
    .camera-scanner-overlay .camera-mode-switch .btn { min-height: 34px; padding: 6px; font-size: 11px; }
    .camera-scanner-overlay .camera-sheet-guide { width: 90%; }
    .camera-scanner-overlay .camera-sheet-guide span { bottom: -36px; max-width: 86vw; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .camera-scanner-controls { gap: 7px; padding-top: 8px; }
    .camera-scanner-controls .btn { min-height: 46px; padding: 8px 5px; font-size: 11px; }
    .camera-capture-button > span { width: 19px; height: 19px; }
    .scan-review-modal { padding: 0; }
    .scan-review-dialog { width: 100%; max-height: 100vh; max-height: 100dvh; border: 0; border-radius: 0; }
    .scan-review-header { padding: max(13px, env(safe-area-inset-top)) 14px 13px; }
    .scan-review-header button { padding: 8px 11px; }
    .scan-review-stats { gap: 3px; padding: 8px; }
    .scan-review-stats b { font-size: 17px; }
    .scan-review-stats span { gap: 3px; font-size: 9px; }
    .scan-review-image { padding: 8px; }
    .scan-review-legend { gap: 7px 12px; padding: 9px 9px 3px; font-size: 10px; }
    .scan-review-actions { padding: 9px max(9px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)); }
    .login-form { padding: 28px 22px; }
    .answer-key-grid { grid-template-columns: 1fr; }
    .answer-key-actions { align-items: stretch; flex-direction: column; }
    .reconstruction-student, .reconstruction-grid { grid-template-columns: 1fr; }
}