:root { --ink:#15202b; --muted:#718095; --line:#dde4eb; --paper:#fff; --canvas:#eef2f5; --blue:#246bfe; --blue-soft:#eaf1ff; --orange:#f68c33; --red:#d84a4a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f6f8fa; font:14px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.topbar { height:64px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:720; letter-spacing:.15px; font-size:17px; }.brand-mark { display:grid; place-items:center; width:25px; height:25px; color:#fff; border-radius:8px; background:linear-gradient(135deg,#3f81ff,#1853db); font-size:15px; }.brand em { font-style:normal; padding:2px 6px; border-radius:4px; color:#4875ca; background:#edf3ff; font-size:9px; letter-spacing:1px; }
.header-actions { display:flex; gap:10px; }.primary,.secondary,.ghost,.tool,.danger { border:1px solid transparent; border-radius:7px; min-height:34px; padding:0 12px; font-weight:600; transition:.15s ease; }.primary { display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--blue); }.primary:hover { background:#1459e9; }.secondary,.tool { color:#334154; border-color:var(--line); background:#fff; }.secondary:hover,.tool:hover { border-color:#b3c4dc; background:#f9fbff; }.ghost { color:#526378; background:transparent; }.ghost:hover { background:#f2f5f8; }.upload-button { cursor:pointer; }.workspace { display:grid; grid-template-columns:245px minmax(420px,1fr) 286px; height:calc(100vh - 64px); min-height:570px; }.sidebar { min-width:0; background:#fff; }.left-panel { border-right:1px solid var(--line); display:flex; flex-direction:column; }.inspector { border-left:1px solid var(--line); padding:22px 18px; overflow:auto; }.side-heading { padding:21px 18px 16px; border-bottom:1px solid #edf0f3; }.eyebrow { margin:0 0 4px; color:#8090a3; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; } h1,h2,p { margin-top:0; } h2 { margin-bottom:4px; font-size:16px; }.side-heading span { color:var(--muted); font-size:12px; }.page-list { overflow-y:auto; padding:12px; flex:1; }.empty-list { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#9ca9b8; text-align:center; gap:6px; }.empty-illustration { border:1px dashed #bac6d3; border-radius:7px; padding:6px 10px; color:#a6b3c0; font-size:25px; }.page-list p { margin:0; font-size:12px; }.page-card { width:100%; border:1px solid var(--line); border-radius:7px; margin-bottom:11px; padding:7px; background:#fff; text-align:left; }.page-card.active { border-color:var(--blue); box-shadow:0 0 0 2px #e1ebff; }.page-card img { display:block; width:100%; max-height:164px; object-fit:contain; background:#f4f5f6; }.page-card span { display:block; margin-top:6px; color:#68778a; font-size:12px; }.privacy-note { padding:13px 15px; border-top:1px solid #edf0f3; color:#8290a0; font-size:11px; }.privacy-note span { font-size:14px; padding-right:4px; }.canvas-panel { min-width:0; display:flex; flex-direction:column; background:var(--canvas); }.tool-row { height:55px; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid #dfe5eb; background:#fff; }.mode-controls { display:flex; gap:6px; }.tool { min-height:30px; padding:0 10px; font-size:12px; }.tool.active { border-color:#adc8ff; background:var(--blue-soft); color:#1755d8; }.canvas-status { display:flex; align-items:center; gap:6px; margin-left:auto; color:#788799; font-size:12px; }.canvas-status span:first-child { width:7px; height:7px; border-radius:50%; background:#a0adba; }.canvas-status.ready span:first-child { background:#2fc37b; }.stage { position:relative; overflow:auto; flex:1; display:flex; justify-content:center; align-items:flex-start; padding:28px; }.welcome { align-self:center; max-width:470px; text-align:center; color:#66778a; }.welcome-icon { display:grid; place-items:center; margin:0 auto 17px; width:58px; height:58px; color:#3977ef; font-size:31px; background:#e7efff; border-radius:16px; }.welcome h1 { margin-bottom:8px; color:#223246; font-size:21px; }.welcome p { margin:0 auto 20px; }.welcome .large { min-height:40px; padding:0 18px; }.welcome small { display:block; margin-top:12px; color:#99a6b5; }.canvas-holder { width:min(100%, 970px); box-shadow:0 2px 16px #23314b25; line-height:0; }.canvas-holder canvas { display:block; width:100%; height:auto; cursor:crosshair; background:white; }.hidden { display:none; }.hint,.muted { color:#7a8999; font-size:12px; }.hint { margin:0; }.stats { display:grid; grid-template-columns:1fr 1fr; margin:18px 0 14px; padding:11px 0; border-top:1px solid #e9edf2; border-bottom:1px solid #e9edf2; }.stats div + div { padding-left:15px; border-left:1px solid #e4e9ee; }.stats strong,.stats span { display:block; }.stats strong { color:#29466e; font-size:18px; }.stats span { color:#8996a5; font-size:11px; }.zone-list { max-height:240px; overflow:auto; }.zone-row { width:100%; display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:8px; border:1px solid #e7ebef; border-radius:7px; background:#fff; text-align:left; }.zone-row.active { border-color:#9dbcff; background:#f2f6ff; }.zone-color { width:10px; height:10px; flex:0 0 auto; border-radius:50%; }.zone-row b { font-size:12px; }.zone-row small { margin-left:auto; color:#8a98a9; }.inspector-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }.inspector-actions button { min-height:32px; font-size:12px; }.danger { color:#b83f3f; border-color:#f1cccc; background:#fff; }.danger:disabled,.secondary:disabled,.primary:disabled { cursor:not-allowed; opacity:.45; }.save-section { margin-top:22px; padding-top:18px; border-top:1px solid #e8edf1; }.save-section label { display:block; margin-bottom:6px; color:#58697c; font-size:12px; font-weight:650; }.save-section input { width:100%; height:34px; margin-bottom:8px; padding:0 9px; outline:none; border:1px solid #d9e1e8; border-radius:6px; }.save-section input:focus { border-color:#8db2ff; box-shadow:0 0 0 2px #e6efff; }.full { width:100%; }.save-section .hint { margin-top:8px; }.toast { position:fixed; z-index:4; bottom:22px; left:50%; transform:translate(-50%,20px); opacity:0; padding:9px 14px; border-radius:8px; color:#fff; background:#24364b; box-shadow:0 4px 16px #0003; pointer-events:none; transition:.2s; }.toast.show { transform:translate(-50%,0); opacity:1; } dialog { width:min(900px,92vw); max-height:84vh; overflow:auto; padding:0; border:0; border-radius:12px; box-shadow:0 14px 60px #17233866; } dialog::backdrop { background:#15233b70; }.dialog-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 12px; }.dialog-head h2 { margin:0; }.icon-button { width:30px; height:30px; border:0; border-radius:6px; background:#edf1f5; color:#526174; font-size:22px; line-height:1; }.dialog-head + .hint { padding:0 22px 17px; }.crop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; padding:18px 22px 25px; background:#f4f6f8; }.crop-card { padding:8px; border:1px solid #dfe5eb; border-radius:7px; background:#fff; }.crop-card b { display:block; margin-bottom:6px; font-size:12px; }.crop-card canvas { display:block; width:100%; height:auto; border:1px solid #eef1f4; }
@media(max-width:930px) { .workspace { grid-template-columns:190px minmax(360px,1fr); }.inspector { display:none; } }
@media(max-width:620px) { .topbar { padding:0 12px; }.brand em,.ghost { display:none; }.workspace { grid-template-columns:1fr; }.left-panel { display:none; }.stage { padding:13px; }.mode-controls .tool:nth-child(1) { display:none; } }
.selected-editor { margin:-2px 0 12px; }.selected-editor label { display:block; margin-bottom:5px; color:#58697c; font-size:12px; font-weight:650; }.selected-editor input { width:100%; height:32px; padding:0 8px; border:1px solid #d9e1e8; border-radius:6px; outline:0; }.selected-editor input:focus { border-color:#8db2ff; box-shadow:0 0 0 2px #e6efff; }
.id-reader { margin:16px 0 13px; padding:14px 0; border-top:1px solid #e8edf1; border-bottom:1px solid #e8edf1; }.id-reader h3 { margin:0 0 5px; color:#33465b; font-size:14px; }.id-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:11px 0 8px; }.id-actions button,.id-reader > .full { min-height:32px; font-size:12px; }.recognition-rows { padding:0 22px 22px; }.recognition-row { display:grid; grid-template-columns:90px minmax(110px,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #edf0f3; }.recognition-row b { color:#2b548e; letter-spacing:1px; }.recognition-row span { color:#718095; font-size:12px; }
/* Workflow shell */
.app-nav { display:flex; align-self:stretch; align-items:stretch; gap:4px; margin-right:auto; margin-left:34px; }
.nav-item { border:0; border-bottom:3px solid transparent; padding:0 15px; color:#526174; background:transparent; font-weight:650; }
.nav-item:hover { color:#246bfe; background:#f7faff; }.nav-item.active { color:#246bfe; border-bottom-color:#246bfe; }
.app-shell { min-height:calc(100vh - 64px); }.screen { display:none; }.screen.active { display:block; }
.screen-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; max-width:1280px; margin:0 auto; padding:34px 36px 24px; }
.screen-head h1 { margin:0 0 6px; color:#1b2c40; font-size:26px; line-height:1.28; }.screen-head .subtle { max-width:760px; }.wide-head { padding-top:45px; }.subtle { margin:0; color:#748397; font-size:13px; }.large { min-height:42px; padding:0 18px; white-space:nowrap; }
.screen-head-actions { display:flex; flex:0 0 auto; align-items:center; gap:8px; }
.flow-rail { display:grid; grid-template-columns:1fr 46px 1fr 46px 1fr 46px 1fr; align-items:center; max-width:1180px; margin:0 auto 28px; padding:0 18px; }
.flow-rail > i { height:1px; background:#dce4ee; }.flow-step { display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center; min-height:67px; padding:9px 11px; border:1px solid #dfe6ee; border-radius:9px; background:#fff; }
.flow-step span { grid-row:1 / span 2; display:grid; place-items:center; width:29px; height:29px; color:#7a8a9b; border-radius:50%; background:#eef2f6; font-weight:750; }.flow-step b { color:#506175; font-size:13px; }.flow-step small { color:#8d9aaa; font-size:11px; }.flow-step.done { border-color:#a9dfc4; background:#f4fcf7; }.flow-step.done span { color:#fff; background:#2bb86f; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:18px; max-width:1180px; margin:0 auto; padding:0 18px; }.dashboard-card,.guide-card,.settings-card,.analysis-card { border:1px solid #e0e6ed; border-radius:11px; background:#fff; box-shadow:0 2px 10px #2d435408; }
.dashboard-card { min-height:224px; padding:24px; }.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.card-top h2 { margin:0; font-size:19px; }.badge { padding:4px 8px; border-radius:5px; font-size:12px; font-weight:700; white-space:nowrap; }.muted-badge { color:#718095; background:#edf1f5; }.warning-badge { color:#a56800; background:#fff3cf; }.success-badge { color:#168653; background:#ddf7e9; }
.mini-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin:25px 0 20px; border-top:1px solid #edf0f4; border-bottom:1px solid #edf0f4; }.mini-metrics div { padding:10px 12px; }.mini-metrics div + div { border-left:1px solid #edf0f4; }.mini-metrics b,.mini-metrics span { display:block; }.mini-metrics b { color:#29466e; font-size:20px; }.mini-metrics span { color:#8a98a8; font-size:11px; }
.roster-preview { display:flex; flex-direction:column; gap:5px; margin-top:18px; padding:11px; border-radius:7px; color:#526b83; background:#f6f9fc; font-size:12px; }.roster-preview small { color:#8a98a8; }.guide-card { display:flex; align-items:flex-start; gap:14px; max-width:1180px; margin:18px auto 48px; padding:17px 21px; }.guide-card b { color:#314860; }.guide-card p { margin:4px 0 0; color:#758498; font-size:13px; }.guide-icon { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:8px; color:#246bfe; background:#e9f1ff; font-size:21px; }

/* Processing */
.processing-screen.active { display:grid; grid-template-columns:245px minmax(480px,1fr) 300px; height:calc(100vh - 64px); min-height:610px; }.processing-inspector { padding:21px 17px; overflow:auto; border-left:1px solid var(--line); }.processing-inspector h2 { margin-bottom:5px; }.process-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin:18px 0; padding:12px 0; border-top:1px solid #e8edf1; border-bottom:1px solid #e8edf1; }.process-metrics div { min-width:0; text-align:center; }.process-metrics div + div { border-left:1px solid #e8edf1; }.process-metrics b,.process-metrics span { display:block; }.process-metrics b { color:#2b4d73; font-size:18px; }.process-metrics span { color:#8795a5; font-size:10px; }
.answer-sheet-setup,.editor-section,.recognition-section { margin-top:18px; padding-top:17px; border-top:1px solid #e8edf1; }.answer-sheet-setup label,.recognition-section label { display:block; margin:0 0 6px; color:#58697c; font-size:12px; font-weight:650; }.answer-sheet-setup select { width:100%; height:34px; padding:0 9px; color:#334154; border:1px solid #d9e1e8; border-radius:6px; background:#fff; outline:none; }.answer-sheet-setup select:focus { border-color:#8db2ff; box-shadow:0 0 0 2px #e6efff; }.setup-page-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }.setup-page-button { min-height:49px; padding:6px 8px; color:#556579; border:1px solid #d9e1e8; border-radius:6px; background:#fff; text-align:left; }.setup-page-button b,.setup-page-button small { display:block; }.setup-page-button b { color:#40566f; font-size:12px; }.setup-page-button small { margin-top:2px; color:#8795a5; font-size:11px; }.setup-page-button.active { border-color:#79a6ff; box-shadow:0 0 0 2px #e8f1ff; }.setup-page-button.ready { border-color:#9bd7ba; background:#f4fcf7; }.setup-page-button.ready small { color:#238859; }.setup-flow { margin:10px 0; padding:9px 10px; border-radius:6px; color:#5d7188; background:#f5f8fc; line-height:1.5; }.answer-sheet-setup .full + .full { margin-top:8px; }.process-button { margin-top:17px; }.processing-inspector > .full + .full { margin-top:8px; }
.editor-section .stats { margin:8px 0 12px; }.recognition-section .full { margin-top:9px; }.stage { min-height:0; }
.recognition-section input { width:100%; height:34px; margin:9px 0 8px; padding:0 9px; border:1px solid #d9e1e8; border-radius:6px; outline:none; }.recognition-section input:focus { border-color:#8db2ff; box-shadow:0 0 0 2px #e6efff; }
.split-zone { margin-top:11px; }.split-zone > label { display:block; margin-bottom:5px; color:#58697c; font-size:11px; font-weight:650; }.split-zone > input { width:64px; height:30px; margin:0 7px 0 0; padding:0 7px; border:1px solid #d9e1e8; border-radius:5px; }.split-zone > div { display:inline-flex; gap:5px; vertical-align:top; }.split-zone button { height:30px; padding:0 7px; font-size:11px; }.grid-split { padding-top:10px; border-top:1px dashed #e0e6ed; }.grid-split > input { width:43px; margin-right:3px; }.grid-split > span { color:#8492a1; font-size:11px; }.grid-split button { margin-left:5px; }

/* Settings */
.setup-screen,.analytics-screen,.marking-screen { min-height:calc(100vh - 64px); padding-bottom:42px; }.inline-warning { max-width:1208px; margin:0 auto 16px; padding:11px 15px; border:1px solid #f1d49d; border-radius:8px; color:#926000; background:#fff8e6; font-size:13px; }.settings-card,.analysis-card { max-width:1208px; margin:0 auto; }.settings-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid #e8edf1; }.settings-head h2,.analysis-card h2 { margin:0 0 3px; color:#30465f; font-size:16px; }.settings-actions { display:flex; gap:8px; }.question-settings { overflow:auto; }.settings-table,.analysis-table { width:100%; border-collapse:collapse; text-align:left; }.settings-table th,.settings-table td,.analysis-table th,.analysis-table td { padding:12px 14px; border-bottom:1px solid #e9edf1; vertical-align:middle; }.settings-table th,.analysis-table th { color:#718095; background:#fafbfd; font-size:12px; font-weight:700; white-space:nowrap; }.settings-table td { color:#41566f; font-size:13px; }.settings-table td b,.settings-table td small { display:block; }.settings-table td small,.analysis-table small { color:#8b98a7; font-size:10px; }.settings-table input,.settings-table select { width:100%; min-width:66px; height:32px; padding:0 7px; border:1px solid #d9e1e8; border-radius:5px; color:#42556b; background:#fff; }.settings-table input:disabled { color:#9da8b6; background:#f4f6f8; }.zone-chip { display:inline-block; padding:3px 6px; border-radius:4px; color:var(--zone); background:#f5f7fa; font-size:11px; }.response-list { display:flex; flex-wrap:wrap; gap:4px; min-width:118px; }.response-chip { display:inline-block; padding:3px 5px; border-radius:4px; color:#14734b; background:#e9f8ef; font-size:11px; white-space:nowrap; }.response-chip.uncertain { color:#9a6500; background:#fff3d6; }.response-muted { color:#9aa6b3; font-size:12px; }.screen-actions { display:flex; justify-content:flex-end; gap:10px; max-width:1208px; margin:20px auto; }

/* Exceptions */
.dialog-hint { padding:0 22px 17px; }.exception-rows { padding:0 22px 24px; }.exception-row { display:grid; grid-template-columns:132px minmax(180px,1fr) auto; gap:14px; align-items:center; padding:14px 0; border-top:1px solid #e9edf1; }.exception-page-preview { display:block; width:132px; padding:5px; color:#3564a5; border:1px solid #cedded; border-radius:7px; background:#f6faff; font-size:11px; font-weight:650; text-align:left; }.exception-page-preview:hover { border-color:#78a5ed; background:#edf5ff; }.exception-page-preview img { display:block; width:120px; height:86px; margin:0 0 5px; object-fit:cover; object-position:top; border:1px solid #dce5ef; background:#fff; }.exception-page-preview.unavailable { display:flex; align-items:center; min-height:78px; color:#8a97a5; border-color:#e2e7ec; background:#f7f8fa; font-weight:500; }.exception-main { display:grid; grid-template-columns:auto auto; gap:5px 8px; align-items:center; }.exception-main small { grid-column:1 / -1; color:#8a98a8; font-size:11px; }.exception-main p { grid-column:1 / -1; margin:0; color:#77879a; font-size:12px; }.exception-badge { padding:3px 6px; border-radius:4px; color:#aa6700; background:#fff2d4; font-size:11px; font-weight:700; }.exception-fix { display:flex; align-items:flex-end; gap:8px; }.exception-fix label { display:grid; gap:4px; color:#617287; font-size:11px; }.exception-fix input { width:150px; height:32px; padding:0 8px; border:1px solid #d9e1e8; border-radius:5px; }.compact { min-height:31px; padding:0 9px; font-size:12px; }.empty-dialog { padding:14px 0; color:#7e8d9d; }

/* Marking */
.marking-head { padding-bottom:17px; }.question-navigator { display:flex; gap:8px; overflow:auto; max-width:1208px; margin:0 auto 15px; padding:0 2px; }.question-tab { display:flex; align-items:center; gap:9px; min-width:max-content; padding:8px 11px; border:1px solid #dfe6ee; border-radius:7px; color:#52657a; background:#fff; }.question-tab small { color:#8c9aaa; }.question-tab.active { color:#1859d8; border-color:#a7c5ff; background:#eff5ff; }.empty-work { max-width:700px; margin:48px auto; text-align:center; color:#718196; }.empty-work h2 { margin:10px 0 6px; color:#34495f; }.empty-work p { margin:0 0 16px; }.marking-work { display:grid; grid-template-columns:220px minmax(380px,1fr) 220px; max-width:1208px; min-height:540px; margin:0 auto; border:1px solid #dfe6ee; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 10px #2d435408; }.candidate-list { border-right:1px solid #e4e9ee; overflow:auto; }.candidate-list-head { display:flex; justify-content:space-between; padding:15px; color:#50657d; border-bottom:1px solid #e6ebf0; }.candidate-list-head span { color:#246bfe; font-size:12px; }.candidate-row { display:flex; justify-content:space-between; width:100%; padding:12px 14px; border:0; border-bottom:1px solid #eff2f5; color:#50647a; background:#fff; text-align:left; }.candidate-row b { font-size:13px; }.candidate-row span { color:#8b98a7; font-size:12px; }.candidate-row.active { color:#1756d4; background:#edf4ff; }.answer-view { min-width:0; display:flex; flex-direction:column; background:#f6f8fa; }.answer-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid #e2e8ed; background:#fff; }.candidate-name,.answer-head small { display:block; }.candidate-name { color:#334a63; font-weight:750; }.answer-head small { color:#8291a2; font-size:11px; }.answer-actions { display:flex; gap:6px; }.answer-canvas-wrap { display:flex; align-items:flex-start; justify-content:center; flex:1; overflow:auto; padding:20px; }.answer-canvas-wrap canvas { max-width:100%; height:auto; box-shadow:0 1px 7px #253b5417; background:#fff; }.score-panel { padding:19px 16px; border-left:1px solid #e4e9ee; }.score-panel h2 { margin:0 0 6px; color:#334960; font-size:17px; }.score-panel label { display:block; margin:18px 0 5px; color:#5e7084; font-size:12px; font-weight:700; }.score-panel input { width:100%; height:40px; padding:0 10px; border:1px solid #a6c3ff; border-radius:6px; color:#2455a1; outline:none; font-size:18px; }.score-panel input[readonly] { color:#61778e; border-color:#d6dee7; background:#f7f9fb; }.score-max { display:block; margin-top:5px; color:#8a98a8; font-size:11px; }.quick-scores { display:flex; gap:6px; margin:13px 0; }.part-score-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; padding:10px; border:1px solid #dce8ff; border-radius:7px; background:#f5f8ff; }.part-score-inputs > p { grid-column:1 / -1; margin:0; color:#416294; font-size:12px; font-weight:700; }.part-score-inputs label { margin:0; color:#5f7390; font-size:11px; }.part-score-inputs label small { float:right; color:#8997a9; }.part-score-inputs input { height:34px; margin-top:4px; padding:0 7px; font-size:14px; }.score-panel .full + .full { margin-top:8px; }

/* Analytics */
.analysis-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1208px; margin:0 auto 16px; }.analysis-metrics article { padding:17px; border:1px solid #dfe6ee; border-radius:9px; background:#fff; box-shadow:0 2px 10px #2d435408; }.analysis-metrics b,.analysis-metrics span { display:block; }.analysis-metrics b { color:#2d4d73; font-size:22px; }.analysis-metrics span { margin-top:2px; color:#8492a1; font-size:12px; }.analysis-card { margin-bottom:16px; padding:20px 0 0; overflow:hidden; }.analysis-card h2 { padding:0 21px 15px; }.analysis-table-wrap { overflow:auto; }.analysis-table td { color:#4f6277; font-size:13px; white-space:nowrap; }.rate-bar { display:inline-block; width:92px; height:6px; margin-right:7px; overflow:hidden; vertical-align:middle; border-radius:10px; background:#e8edf2; }.rate-bar i { display:block; height:100%; border-radius:10px; background:#4c86f7; }

.exam-head-actions { display:flex; align-items:center; gap:9px; }.exam-library { max-width:1180px; margin:0 auto 18px; padding:17px 20px; border:1px solid #e0e6ed; border-radius:11px; background:#fff; box-shadow:0 2px 10px #2d435408; }.exam-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:13px; }.exam-library-head h2 { margin:0; color:#30465f; font-size:16px; }.exam-list { display:flex; flex-wrap:wrap; gap:9px; }.exam-project { display:grid; flex:1 1 220px; min-width:218px; grid-template-columns:1fr auto; gap:3px 9px; padding:12px; border:1px solid #dde5ed; border-radius:8px; color:#4e6278; background:#fbfcfe; text-align:left; }.exam-project.active { border-color:#9fc0ff; color:#205bc4; background:#eff5ff; }.exam-project b { font-size:14px; }.exam-project small { grid-column:1 / -1; color:#8492a1; font-size:11px; }.exam-project span { color:#2d8b5f; font-size:11px; }.dialog-form { padding:4px 22px 22px; }.dialog-form label { display:block; margin-bottom:6px; color:#52667d; font-size:12px; font-weight:700; }.dialog-form input { width:100%; height:38px; padding:0 10px; border:1px solid #a9c5ff; border-radius:6px; color:#334f6e; outline:none; }.dialog-form .hint { margin:9px 0 18px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }

/* Exam hub and independent workflow entry points */
.exam-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:14px; }.exam-card { min-width:0; padding:18px; border:1px solid #dde5ed; border-radius:9px; background:#fbfcfe; }.exam-card.current { border-color:#9fc0ff; box-shadow:0 0 0 2px #edf4ff; }.exam-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.exam-card h3 { margin:0 0 4px; color:#31485f; font-size:18px; }.exam-card-head small { color:#8b98a8; font-size:11px; }.status-pill { flex:0 0 auto; padding:4px 7px; border-radius:5px; color:#718095; background:#edf1f5; font-size:11px; font-weight:750; }.status-pill.blue { color:#1859d8; background:#eaf2ff; }.status-pill.success { color:#168653; background:#ddf7e9; }.status-pill.warning { color:#a56800; background:#fff3cf; }.exam-card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 10px; padding:11px 0; border-top:1px solid #e8edf2; border-bottom:1px solid #e8edf2; }.exam-card-metrics span { color:#8290a0; font-size:11px; }.exam-card-metrics b { display:block; overflow:hidden; color:#355474; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.exam-card-note { overflow:hidden; color:#748397; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.exam-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; }.text-action { min-height:30px; padding:0 3px; border:0; color:#246bfe; background:transparent; font-size:12px; font-weight:650; }.text-action:hover { text-decoration:underline; }.text-action:disabled { color:#a4afbb; cursor:not-allowed; text-decoration:none; }.hub-screen { min-height:calc(100vh - 64px); padding-bottom:44px; }.hub-list { display:grid; gap:12px; max-width:1000px; margin:0 auto; }.hub-card { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px 22px; border:1px solid #dfe6ee; border-radius:10px; background:#fff; box-shadow:0 2px 10px #2d435408; }.hub-card h2 { margin:0 0 5px; color:#30475f; font-size:18px; }.hub-card-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }.hub-empty { max-width:620px; margin:62px auto; color:#718196; text-align:center; }.hub-empty .empty-illustration { display:inline-block; }.hub-empty h2 { margin:11px 0 6px; color:#34495f; }.hub-empty p { margin:0 0 17px; }.analysis-hub-card .eyebrow { color:#5480ba; }
.delete-action { color:#c43f3f; }.delete-action:hover { color:#a92e2e; }
@media(max-width:1100px) { .app-nav { margin-left:10px; }.nav-item { padding:0 9px; }.processing-screen.active { grid-template-columns:205px minmax(400px,1fr) 270px; }.marking-work { margin:0 16px; grid-template-columns:190px minmax(330px,1fr) 200px; }.screen-head { padding-left:22px; padding-right:22px; }.dashboard-grid,.guide-card,.settings-card,.analysis-card,.analysis-metrics { margin-left:18px; margin-right:18px; }.flow-rail { margin-left:12px; margin-right:12px; } }
@media(max-width:820px) { .app-nav { display:flex; min-width:0; margin-left:8px; overflow:auto; }.nav-item { flex:0 0 auto; padding:0 8px; white-space:nowrap; }.processing-screen.active { grid-template-columns:1fr; height:auto; }.processing-screen .left-panel { display:none; }.processing-inspector { display:block; overflow:visible; border-top:1px solid var(--line); border-left:0; }.canvas-panel { min-height:560px; }.dashboard-grid { grid-template-columns:1fr; }.flow-rail { grid-template-columns:1fr; gap:8px; }.flow-rail > i { display:none; }.marking-work { grid-template-columns:160px minmax(300px,1fr); }.score-panel { grid-column:1 / -1; border-top:1px solid #e4e9ee; border-left:0; }.analysis-metrics { grid-template-columns:repeat(2,1fr); }.hub-list { margin-left:18px; margin-right:18px; } }
@media(max-width:580px) { .topbar { gap:8px; }.header-actions .ghost { display:none; }.brand em { display:none; }.processing-screen.active { grid-template-columns:1fr; }.screen-head { align-items:flex-start; flex-direction:column; padding:24px 16px 18px; }.screen-head h1 { font-size:22px; }.screen-head-actions { width:100%; flex-wrap:wrap; }.marking-work { margin:0 10px; grid-template-columns:1fr; }.candidate-list { max-height:180px; border-right:0; border-bottom:1px solid #e4e9ee; }.answer-view { min-height:300px; }.analysis-metrics,.dashboard-grid { margin-left:10px; margin-right:10px; }.settings-card,.analysis-card,.guide-card { margin-left:10px; margin-right:10px; }.flow-rail { padding:0 10px; }.exception-row { grid-template-columns:1fr; align-items:flex-start; }.settings-head { align-items:flex-start; gap:10px; flex-direction:column; }.exam-list { grid-template-columns:1fr; }.exam-card-metrics { gap:4px; }.hub-list { margin-left:10px; margin-right:10px; }.hub-card { align-items:flex-start; flex-direction:column; }.hub-card-actions { justify-content:flex-start; } }

.question-box-controls { margin-bottom:14px; padding:11px; border:1px solid #dfe7f1; border-radius:8px; background:#f7faff; }.question-box-controls > label,.question-box-controls select { display:block; width:100%; }.question-box-controls label { margin-bottom:5px; color:#58697c; font-size:12px; font-weight:650; }.question-box-controls select { height:34px; padding:0 8px; border:1px solid #cfdceb; border-radius:6px; color:#334154; background:#fff; }.question-box-controls select:disabled { color:#98a4b1; background:#f2f5f8; }.question-count-inline { display:grid; grid-template-columns:auto 58px 1fr; gap:6px; align-items:center; margin-top:9px; }.question-count-inline label { margin:0; white-space:nowrap; }.question-count-inline input { width:58px; height:30px; padding:0 7px; border:1px solid #d2dce9; border-radius:5px; }.question-count-inline button { min-height:30px; padding:0 8px; font-size:12px; }.question-box-controls .hint { margin:9px 0 0; line-height:1.45; }
.question-actions { flex-wrap:wrap; align-items:center; justify-content:flex-end; }.question-actions > label { display:flex; align-items:center; gap:5px; color:#617286; font-size:12px; font-weight:650; white-space:nowrap; }.question-actions input { width:58px; height:32px; padding:0 7px; border:1px solid #d9e1e8; border-radius:5px; }.zone-summary { display:flex; flex-wrap:wrap; gap:4px; min-width:110px; }.zone-summary .zone-chip { white-space:nowrap; }.zone-summary.missing { color:#ae6c00; font-size:12px; }.table-actions { display:flex; flex-direction:column; gap:5px; }.table-actions button { min-height:29px; padding:0 8px; font-size:11px; white-space:nowrap; }

/* The thumbnail rail is hidden on compact screens, so retain a direct way to
   inspect the second (and later) pages while calibrating a multi-page card. */
.page-picker { display:none; min-width:0; height:30px; padding:0 7px; border:1px solid var(--line); border-radius:6px; color:#45596f; background:#fff; font-size:12px; }
@media(max-width:820px) { .page-picker { display:block; max-width:132px; }.tool-row { height:auto; min-height:55px; flex-wrap:wrap; padding-top:7px; padding-bottom:7px; }.canvas-status { margin-left:0; } }
@media(max-width:580px) { .page-picker { max-width:104px; }.canvas-status { order:3; flex:1 0 100%; } }

.account-actions { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:#53667a; }
.login-screen { display:none; min-height:calc(100vh - 66px); place-items:center; padding:32px 16px; background:linear-gradient(145deg,#f6f9fd,#e9f0fb); }
.login-card { width:min(100%,420px); display:grid; gap:11px; padding:34px; border:1px solid #dbe5f1; border-radius:16px; background:#fff; box-shadow:0 18px 48px rgba(44,71,104,.13); }
.login-card .brand-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:#fff; background:var(--blue,#246bfe); font-size:23px; }
.login-card h1 { margin:0 0 4px; font-size:25px; }.login-card label { margin-top:4px; font-size:13px; font-weight:700; color:#45596f; }
.login-card input { height:42px; padding:0 11px; border:1px solid #cfd9e6; border-radius:8px; font:inherit; }.login-error { margin:4px 0 0; color:#b42318; font-size:13px; }
body.unauthenticated .app-shell,body.unauthenticated .app-nav,body.unauthenticated .header-actions { display:none; } body.unauthenticated .login-screen { display:grid; } body.authenticated .login-screen { display:none; }
@media(max-width:620px) { .account-actions { gap:5px; font-size:12px; }.account-actions .compact { padding:6px 8px; } }