:root {
  color-scheme: light;
  --ink: #172d40;
  --ink-soft: #526579;
  --muted: #8292a2;
  --line: #e7edf1;
  --surface: #ffffff;
  --canvas: #f5f7f8;
  --navy: #102a3e;
  --navy-deep: #0c2032;
  --teal: #2f9281;
  --teal-dark: #237566;
  --teal-pale: #e7f5f1;
  --amber: #d18a26;
  --amber-pale: #fff3dc;
  --red: #c95555;
  --red-pale: #fff0ef;
  --blue-pale: #edf4fb;
  --shadow: 0 16px 48px rgba(20, 42, 58, .08);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(47, 146, 129, .35); outline-offset: 2px;
}
a { color: inherit; }
.loading-screen { display: grid; min-height: 100vh; align-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px 14px 14px 4px; background: var(--teal); color: white; font: 800 24px Manrope, sans-serif; }
.loading-screen .brand-mark { width: 54px; height: 54px; font-size: 30px; }

.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 1fr) minmax(440px, 1.05fr); background: white; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 680px; padding: 48px clamp(36px, 6vw, 90px); color: white; background: radial-gradient(ellipse at 85% 20%, rgba(80, 161, 144, .27), transparent 38%), linear-gradient(145deg, #173950 0%, #102a3e 48%, #0c2032 100%); }
.login-art::before, .login-art::after { position: absolute; content: ""; pointer-events: none; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.login-art::before { width: 680px; height: 680px; right: -310px; top: 21%; }
.login-art::after { width: 480px; height: 480px; right: -210px; top: 31%; }
.brand-lockup, .login-copy, .login-art-footer { position: relative; z-index: 1; }
.brand-lockup { display: flex; align-items: center; gap: 13px; font: 700 14px Manrope, sans-serif; letter-spacing: .01em; }
.brand-lockup .brand-mark { color: #0e2b3c; background: #d5efdf; }
.brand-lockup small { display: block; margin-top: 3px; color: #a9c5cc; font: 500 11px "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.login-copy { max-width: 510px; margin: auto 0; padding: 80px 0; }
.eyebrow { color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.login-art .eyebrow { color: #80cbb8; }
.login-copy h1 { margin: 16px 0 18px; font: 800 clamp(38px, 5vw, 66px)/1.08 Manrope, sans-serif; letter-spacing: -.055em; }
.login-copy p { max-width: 390px; margin: 0; color: #b7c8ce; font-size: 16px; line-height: 1.75; }
.login-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.login-benefit { display: flex; gap: 11px; align-items: center; color: #d8e6e5; font-size: 12px; }
.benefit-icon { display: grid; flex: 0 0 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #8ed3c2; }
.login-art-footer { color: #8ba4af; font-size: 11px; }
.login-panel { display: grid; place-items: center; padding: 44px 28px; }
.login-card { width: min(100%, 416px); }
.login-card h2 { margin: 11px 0 8px; font: 800 34px Manrope, sans-serif; letter-spacing: -.045em; }
.login-card > p { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 11px; background: #f6f8f9; }
.role-tab { min-height: 39px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-size: 13px; font-weight: 600; }
.role-tab.active { color: var(--ink); background: white; box-shadow: 0 2px 6px rgba(16, 42, 62, .09); }
.field { display: grid; gap: 7px; margin: 0 0 17px; }
.field label { color: #45596a; font-size: 12px; font-weight: 600; }
.field input, .field textarea, .field select, .input { width: 100%; min-height: 45px; padding: 11px 13px; border: 1px solid #dfe6eb; border-radius: 8px; outline: none; color: var(--ink); background: white; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { border-color: #75b8aa; box-shadow: 0 0 0 3px rgba(47,146,129,.1); }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: #a1adb7; }
.field textarea { min-height: 90px; resize: vertical; }
.login-error { min-height: 19px; margin: -4px 0 12px; color: var(--red); font-size: 12px; }
.btn { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: white; font-size: 12px; font-weight: 700; transition: transform .12s, background .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { color: white; background: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-dark { color: white; background: var(--navy); }
.btn-dark:hover { background: #1b4058; }
.btn-light { border-color: var(--line); background: white; }
.btn-light:hover { background: #f7f9fa; }
.btn-danger { color: var(--red); background: var(--red-pale); }
.btn-warning { color: #94600e; background: var(--amber-pale); }
.btn-small { min-height: 32px; padding: 0 10px; font-size: 11px; }
.btn-full { width: 100%; min-height: 48px; margin-top: 3px; font-size: 13px; }
.demo-note { margin-top: 23px; padding: 13px 14px; border: 1px solid #e8edef; border-radius: 9px; color: #778897; background: #fafbfb; font-size: 11px; line-height: 1.75; }
.demo-note strong { color: #3e5868; }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; min-height: 0; flex-direction: column; overflow-y: auto; padding: 22px 15px 16px; color: #e1ecec; background: var(--navy); }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 1px 9px 26px; font: 700 12px Manrope, sans-serif; }
.sidebar-brand .brand-mark { width: 37px; height: 37px; font-size: 21px; }
.sidebar-brand small { display: block; margin-top: 3px; color: #91aab3; font: 500 10px "DM Sans", sans-serif; letter-spacing: .1em; }
.nav-caption { padding: 13px 11px 8px; color: #77929e; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.side-nav { display: grid; gap: 3px; }
.nav-item { display: flex; min-height: 41px; align-items: center; gap: 12px; padding: 0 11px; border: 0; border-radius: 7px; color: #acc0c6; background: transparent; text-align: left; font-size: 12px; font-weight: 600; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: rgba(65,154,136,.24); }
.nav-icon { display: grid; width: 18px; place-items: center; color: #8caab2; font-size: 15px; }
.nav-item.active .nav-icon { color: #86d4bc; }
.nav-badge { min-width: 20px; margin-left: auto; padding: 3px 6px; border-radius: 12px; color: #f0c878; background: rgba(209,138,38,.18); text-align: center; font-size: 9px; }
.sidebar-spacer { flex: 1; }
.sidebar-exam-card { margin: 10px 4px 15px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.045); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #60d3a6; box-shadow: 0 0 0 4px rgba(96,211,166,.12); }
.sidebar-exam-card .live-label { margin-left: 8px; color: #83d3b5; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-exam-card strong { display: block; margin-top: 10px; color: #e8f0f0; font-size: 11px; }
.sidebar-exam-card small { display: block; margin-top: 5px; color: #8da7af; font-size: 10px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 13px 7px 4px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 11px; color: #326d63; background: #d8eee4; font-size: 11px; font-weight: 700; }
.sidebar-user-name { min-width: 0; flex: 1; }
.sidebar-user-name strong { display: block; overflow: hidden; color: #ecf2f1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-name small { color: #90a6ae; font-size: 10px; }
.logout-btn { padding: 7px; border: 0; color: #91aab3; background: none; font-size: 16px; }
.logout-btn:hover { color: white; }
.main-shell { min-width: 0; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; min-height: 67px; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.breadcrumb { color: var(--muted); font-size: 11px; }
.breadcrumb strong { color: var(--ink); font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.connection { display: flex; align-items: center; gap: 7px; color: #718696; font-size: 10px; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #46aa83; }
.connection-dot.offline { background: var(--red); }
.topbar-date { padding-left: 14px; border-left: 1px solid var(--line); color: #768894; font-size: 10px; }
.content { width: min(1440px, 100%); margin: 0 auto; padding: 29px 32px 48px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.page-heading h1 { margin: 4px 0 6px; font: 800 25px Manrope, sans-serif; letter-spacing: -.04em; }
.page-heading p { margin: 0; color: #80909c; font-size: 12px; }
.heading-actions { display: flex; gap: 8px; align-items: center; }
.panel { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 3px 12px rgba(16,42,62,.025); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; border-bottom: 1px solid #edf1f3; }
.panel-header h2, .panel-header h3 { margin: 0; font: 700 13px Manrope, sans-serif; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 18px 19px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.stat-card { min-height: 112px; padding: 16px 17px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #768896; font-size: 10px; }
.stat-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: var(--teal); background: var(--teal-pale); font-size: 13px; }
.stat-icon.amber { color: var(--amber); background: var(--amber-pale); }
.stat-icon.blue { color: #5584ac; background: var(--blue-pale); }
.stat-icon.red { color: var(--red); background: var(--red-pale); }
.stat-value { margin-top: 9px; font: 800 25px Manrope, sans-serif; letter-spacing: -.05em; }
.stat-note { margin-top: 2px; color: #99a6af; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); gap: 15px; }
.exam-overview { display: flex; align-items: center; gap: 15px; padding: 17px 19px; }
.exam-subject-icon { display: grid; flex: 0 0 47px; height: 47px; place-items: center; border-radius: 13px; color: #398779; background: #e6f4f0; font-size: 18px; }
.exam-overview-main { min-width: 0; flex: 1; }
.exam-overview-main h3 { margin: 0 0 4px; font: 700 13px Manrope, sans-serif; }
.exam-overview-main p { margin: 0; color: #82929e; font-size: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: #39856b; background: #e8f5ed; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-pill.draft { color: #758594; background: #f0f3f5; }
.status-pill.closed { color: var(--red); background: var(--red-pale); }
.status-pill.active { color: #39856b; background: #e8f5ed; }
.status-pill.away { color: #966818; background: #fff4df; }
.status-pill.not_started { color: #7e8d99; background: #f0f3f5; }
.status-pill.submitted { color: #5381a3; background: var(--blue-pale); }
.status-pill.on_hold, .status-pill.access_suspended { color: #966818; background: #fff4df; }
.status-pill.attended, .status-pill.no_live_exam, .status-pill.not_assigned { color: #758594; background: #f0f3f5; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 11px; }
.section-title h2 { margin: 0; font: 700 13px Manrope, sans-serif; }
.section-title small { color: var(--muted); font-size: 10px; }
.paper-list { display: grid; gap: 9px; }
.paper-row { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 13px; border: 1px solid #edf1f3; border-radius: 9px; }
.paper-subject { display: grid; flex: 0 0 37px; height: 37px; place-items: center; border-radius: 10px; color: #438d7f; background: #eaf5f2; font: 700 12px Manrope, sans-serif; }
.paper-copy { min-width: 0; flex: 1; }
.paper-copy strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.paper-copy small { display: block; margin-top: 4px; color: #8b9aa5; font-size: 9px; }
.paper-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.paper-marking-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.paper-marking-summary > div { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.paper-marking-summary small { color: var(--muted); font-size: 9px; }
.paper-marking-summary strong { color: var(--ink); font-size: 11px; }
.paper-preview-questions { display: grid; gap: 12px; }
.paper-preview-question { padding: 17px 19px; }
.paper-preview-question > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paper-preview-question > header strong { font: 700 12px Manrope, sans-serif; }
.paper-preview-question > header span { color: var(--muted); font-size: 10px; }
.paper-preview-prompt { margin: 13px 0; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.paper-preview-options { display: grid; gap: 7px; padding: 0; list-style: none; }
.paper-preview-options li { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); font-size: 10px; }
.paper-preview-options li.correct { border-color: #bfe0d5; color: #286e5f; background: #f0f8f5; }
.paper-preview-options li > span { font-weight: 700; }
.paper-preview-options li > strong { margin-left: auto; font-size: 9px; }
.paper-preview-answer { display: grid; gap: 5px; padding: 11px; border: 1px solid #bfe0d5; border-radius: 7px; background: #f0f8f5; }
.paper-preview-answer small { color: #5b8679; font-size: 9px; }
.paper-preview-answer strong { color: #286e5f; font-size: 11px; }
.paper-preview-question > footer { display: flex; flex-wrap: wrap; gap: 7px 17px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #edf1f3; color: var(--muted); font-size: 9px; }
.status-pill.held { color: #966818; background: #fff4df; }
.student-list-tabs { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 15px; border-bottom: 1px solid #eff2f3; }
.student-management-table { min-width: 700px; }
.student-management-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.student-status-table { min-width: 1180px; }
.notice { padding: 14px 16px; border: 1px solid #dcece6; border-radius: 9px; color: #426d63; background: #f2faf6; font-size: 11px; line-height: 1.7; }
.notice strong { color: #286d5c; }
.notice.warning { border-color: #f2e4c9; color: #8d6929; background: #fffaf0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 11px 14px; color: #8c9aa4; background: #fbfcfc; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 12px 14px; border-top: 1px solid #eff2f4; color: #526473; font-size: 10px; white-space: nowrap; }
.data-table td strong { color: #253b4c; font-size: 10px; }
.student-cell { display: flex; align-items: center; gap: 9px; }
.student-alert-count { color: #a56d16; font-size: 10px; font-weight: 700; }
.student-alert-detail { overflow: hidden; max-width: 230px; margin-top: 4px; color: #8997a0; font-size: 9px; text-overflow: ellipsis; }
.student-alert-none { color: #9aa7af; font-size: 10px; }
.mini-avatar { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 9px; color: #487969; background: #e8f4ed; font-size: 9px; font-weight: 700; }
.warning-cell { color: var(--amber); }
.empty-state { padding: 30px 16px; color: #8b9aa5; text-align: center; font-size: 11px; line-height: 1.7; }
.empty-state strong { display: block; margin-bottom: 4px; color: #40586a; font-size: 12px; }
.chart-wrap { display: flex; align-items: center; gap: 22px; padding: 21px; }
.donut { display: grid; flex: 0 0 115px; height: 115px; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) var(--progress, 0%), #eaf0f1 0); }
.donut-hole { display: grid; width: 81px; height: 81px; align-content: center; justify-items: center; border-radius: 50%; background: white; }
.donut-hole strong { font: 800 20px Manrope, sans-serif; }
.donut-hole small { margin-top: 3px; color: #8a9aa5; font-size: 9px; }
.legend { display: grid; width: 100%; gap: 12px; }
.legend-row { display: flex; align-items: center; justify-content: space-between; color: #7a8b97; font-size: 10px; }
.legend-label { display: flex; align-items: center; gap: 7px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.legend-dot.away { background: #e3aa50; }
.legend-dot.submitted { background: #608bb3; }
.legend-dot.pending { background: #d9e1e4; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-link { display: grid; min-height: 72px; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: #556b7a; background: white; text-align: left; font-size: 10px; font-weight: 600; }
.quick-link:hover { border-color: #a6d4c9; background: #f8fcfa; }
.quick-link span:first-child { color: var(--teal); font-size: 15px; }
.live-indicator { display: inline-flex; align-items: center; gap: 8px; color: #508e7a; font-size: 10px; }
.live-indicator .live-dot { width: 6px; height: 6px; }
.monitor-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #eff2f3; }
.search-input { width: min(250px, 100%); min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; font-size: 10px; }
.filter-select { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: #617482; background: white; font-size: 10px; }
.toolbar-group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.activity-list { display: grid; gap: 0; }
.activity-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border-bottom: 1px solid #f0f3f4; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { display: grid; flex: 0 0 27px; height: 27px; place-items: center; border-radius: 8px; color: #b27b21; background: #fff4de; font-size: 11px; }
.activity-copy { min-width: 0; flex: 1; color: #6b7e8a; font-size: 10px; line-height: 1.5; }
.activity-copy strong { color: #344c5c; }
.activity-copy small { display: block; margin-top: 3px; color: #a0adb5; font-size: 9px; }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(11,28,42,.49); backdrop-filter: blur(3px); }
.modal { overflow: hidden; width: min(760px, 100%); max-height: min(92vh, 930px); border: 1px solid rgba(255,255,255,.45); border-radius: 14px; background: white; box-shadow: 0 24px 100px rgba(9,24,36,.28); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0 0 5px; font: 800 17px Manrope, sans-serif; letter-spacing: -.03em; }
.modal-header p { margin: 0; color: var(--muted); font-size: 10px; }
.modal-close { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #6b7d8a; background: #f2f5f6; font-size: 18px; }
.modal-body { overflow: auto; max-height: calc(92vh - 142px); padding: 19px 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--line); background: #fbfcfc; }
.builder-meta { display: grid; grid-template-columns: 1.3fr 1fr .65fr 1fr; gap: 11px; }
.builder-question { margin-top: 13px; padding: 14px; border: 1px solid #e8edef; border-radius: 10px; background: #fcfdfd; }
.builder-question-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.builder-question-top strong { font: 700 11px Manrope, sans-serif; }
.builder-question-top span { color: #9aa8b1; font-size: 9px; }
.builder-grid { display: grid; grid-template-columns: 1fr 170px; gap: 11px; }
.builder-question .field { margin-bottom: 10px; }
.builder-question .field label { font-size: 10px; }
.builder-question .field input, .builder-question .field textarea, .builder-question .field select { min-height: 37px; padding: 8px 10px; font-size: 11px; }
.builder-question .field textarea { min-height: 65px; }
.option-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.option-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 27px; align-items: end; gap: 5px; }
.option-remove { width: 27px; min-height: 34px; margin-bottom: 10px; padding: 0; color: #8d9ba4; font-size: 15px; }
.question-image-preview { max-width: 160px; max-height: 100px; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; }
.file-field { color: #8a9aa5; font-size: 9px; }
.modal-add-question { width: 100%; margin-top: 12px; border: 1px dashed #cdd9dd; color: #5c7e7b; background: #f9fcfb; }
.modal-error { margin-right: auto; align-self: center; color: var(--red); font-size: 10px; }
.paper-editor-panel .panel-body { padding: 22px; }
.paper-editor-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fbfcfc; }
.paper-editor-footer .modal-error { flex: 1 1 100%; }
.field[hidden] { display: none; }
.assignment-modal { width: min(560px, 100%); }
.focus-alert-modal { width: min(620px, 100%); }
.focus-alert-history { display: grid; gap: 8px; }
.result-details { min-width: 150px; }
.result-details summary { color: var(--teal-dark); cursor: pointer; font-size: 10px; font-weight: 700; }
.result-details[open] { min-width: 520px; }
.result-details .table-wrap { margin-top: 8px; }
.result-question-table { min-width: 600px; }
.result-question-table td { white-space: normal; }
.assignment-student-list { display: grid; max-height: 260px; gap: 2px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.assignment-student { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.assignment-student:hover { background: #f6f9f8; }
.assignment-student input { accent-color: var(--teal); }
.assignment-student strong, .assignment-student small { display: block; }
.assignment-student strong { color: #40586a; font-size: 11px; }
.assignment-student small { margin-top: 3px; color: #8a9aa5; font-size: 9px; }
.exam-student-shell { min-height: 100vh; background: #f5f7f8; }
.exam-topbar { display: flex; min-height: 67px; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--line); background: white; }
.exam-top-brand { display: flex; align-items: center; gap: 10px; font: 700 12px Manrope, sans-serif; }
.exam-top-brand .brand-mark { width: 35px; height: 35px; font-size: 20px; }
.exam-user { display: flex; align-items: center; gap: 10px; color: #657887; font-size: 10px; }
.exam-user .avatar { width: 31px; height: 31px; flex-basis: 31px; }
.exam-layout { display: grid; width: min(1130px, calc(100% - 44px)); grid-template-columns: 230px minmax(0, 1fr); gap: 18px; margin: 27px auto 50px; }
.exam-rail { align-self: start; }
.exam-countdown { padding: 17px; text-align: center; }
.exam-countdown small { display: block; color: #8899a5; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.timer { margin: 8px 0 4px; color: #173c50; font: 800 27px Manrope, sans-serif; letter-spacing: .04em; }
.timer.urgent { color: var(--red); }
.exam-countdown span { color: #9aa7af; font-size: 9px; }
.question-nav { margin-top: 12px; padding: 15px; }
.question-nav h3 { margin: 0 0 11px; font: 700 11px Manrope, sans-serif; }
.question-nav-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.question-jump { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #e5ebee; border-radius: 7px; color: #71828e; background: white; font-size: 9px; }
.question-jump.answered { border-color: #bfe0d5; color: #357a68; background: #edf7f3; }
.question-jump.current { border-color: #448f80; color: white; background: #448f80; }
.question-jump.current.answered { color: white; background: #448f80; }
.question-nav-legend { display: flex; flex-wrap: wrap; gap: 9px 13px; margin-top: 13px; color: #91a0aa; font-size: 8px; }
.legend-swatch { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border: 1px solid #dfe6e9; border-radius: 2px; vertical-align: middle; }
.legend-swatch.done { border-color: #bfe0d5; background: #edf7f3; }
.exam-main { min-width: 0; }
.exam-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 22px; }
.exam-heading h1 { margin: 4px 0 6px; font: 800 19px Manrope, sans-serif; letter-spacing: -.035em; }
.exam-heading p { margin: 0; color: #8a9aa5; font-size: 10px; }
.progress-wrap { min-width: 105px; text-align: right; }
.progress-wrap strong { display: block; color: #476571; font-size: 10px; }
.progress-track { overflow: hidden; width: 105px; height: 5px; margin-top: 8px; border-radius: 6px; background: #edf1f2; }
.progress-fill { height: 100%; border-radius: inherit; background: #53a38d; transition: width .2s; }
.question-card { margin-top: 13px; padding: 23px; }
.teacher-message-list { display: grid; gap: 8px; margin-top: 11px; }
.teacher-message:empty { display: none; }
.teacher-message { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid #f0dfbd; border-radius: 9px; background: #fffaf0; }
.teacher-message-icon { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 8px; color: #966216; background: #ffedc8; font-size: 12px; font-weight: 800; }
.teacher-message-copy { min-width: 0; flex: 1; }
.teacher-message-copy strong { color: #80591f; font-size: 10px; }
.teacher-message-copy p { margin: 4px 0; color: #634f32; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.teacher-message-copy time { color: #a28d6b; font-size: 9px; }
.focus-warning-list { display: grid; gap: 8px; margin-top: 8px; }
.focus-warning { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border: 1px solid #f1d5d2; border-radius: 9px; background: #fff7f5; }
.focus-warning-icon { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 8px; color: #a64943; background: #ffe6e2; font-size: 12px; font-weight: 800; }
.focus-warning-copy { min-width: 0; flex: 1; }
.focus-warning-copy strong { color: #91433d; font-size: 10px; }
.focus-warning-copy p { margin: 4px 0; color: #714d49; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.focus-warning-copy small { display: block; color: #987b76; font-size: 9px; line-height: 1.5; }
.focus-warning-copy time { display: block; margin-top: 4px; color: #ad8e88; font-size: 9px; }
.question-label { color: #8a9aa4; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.question-prompt { margin: 12px 0 18px; font: 700 17px/1.55 Manrope, sans-serif; letter-spacing: -.025em; }
.question-image { display: block; max-width: min(100%, 570px); max-height: 330px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; }
.answer-options { display: grid; gap: 9px; }
.answer-option { display: flex; min-height: 49px; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid #e8edef; border-radius: 8px; color: #566a78; background: white; text-align: left; font-size: 11px; transition: border .12s, background .12s; }
.answer-option:hover { border-color: #a6d3c7; background: #f9fcfb; }
.answer-option.selected { border-color: #70b29f; color: #286e5f; background: #f0f8f5; }
.option-key { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border: 1px solid #e5ebee; border-radius: 7px; color: #81919d; background: white; font-size: 9px; font-weight: 700; }
.answer-option.selected .option-key { border-color: #a9d6c9; color: #347d6b; background: #e4f3ed; }
.exam-text-answer { min-height: 130px !important; font-size: 12px !important; }
.question-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 20px; }
.question-footer-right { display: flex; gap: 8px; }
.exam-bottom-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #9aa7af; font-size: 9px; }
.submit-bar { position: sticky; z-index: 4; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px max(24px, calc((100% - 1130px)/2)); border-top: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }
.save-state { color: #82939d; font-size: 9px; }
.save-state.saving { color: var(--amber); }
.save-state.saved { color: #4a917b; }
.student-home { display: grid; width: min(780px, calc(100% - 36px)); gap: 16px; margin: 60px auto; }
.student-welcome { padding: 28px; }
.student-welcome h1 { margin: 9px 0 7px; font: 800 25px Manrope, sans-serif; letter-spacing: -.04em; }
.student-welcome p { color: #81919c; font-size: 12px; line-height: 1.65; }
.student-exam-card { display: flex; align-items: center; gap: 15px; padding: 19px; }
.student-exam-copy { min-width: 0; flex: 1; }
.student-exam-copy strong { display: block; font: 700 13px Manrope, sans-serif; }
.student-exam-copy small { display: block; margin-top: 5px; color: #85949f; font-size: 10px; }
.result-card { padding: 30px; text-align: center; }
.result-score { margin: 15px 0 5px; color: #307b69; font: 800 46px Manrope, sans-serif; letter-spacing: -.06em; }
.result-pending-icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 22px auto 14px; border: 1px solid #d5ebe1; border-radius: 18px; color: #327b68; background: #edf7f2; font-size: 23px; }
.result-card h2 { margin: 0; font: 700 16px Manrope, sans-serif; }
.result-card p { color: #83929d; font-size: 11px; }
.toast-region { position: fixed; z-index: 100; top: 18px; right: 18px; display: grid; width: min(360px, calc(100vw - 36px)); gap: 8px; pointer-events: none; }
.toast { padding: 12px 14px; border: 1px solid #e4ece8; border-left: 3px solid var(--teal); border-radius: 8px; color: #385a55; background: white; box-shadow: var(--shadow); font-size: 11px; animation: toast-in .18s ease-out; }
.toast.error { border-left-color: var(--red); color: #874747; }
.toast.warning { border-left-color: var(--amber); color: #805c1e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

@media (max-width: 1040px) {
  .app-shell { grid-template-columns: 205px minmax(0,1fr); }
  .content { padding-right: 22px; padding-left: 22px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-art { min-height: 265px; padding: 24px; }
  .login-copy { margin: 40px 0 16px; padding: 0; }
  .login-copy h1 { max-width: 420px; margin: 9px 0; font-size: 34px; }
  .login-copy p, .login-benefits, .login-art-footer { display: none; }
  .login-panel { padding: 32px 22px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 12; top: auto; right: 0; bottom: 0; left: 0; display: block; height: auto; padding: 5px 9px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); }
  .sidebar-brand, .nav-caption, .sidebar-exam-card, .sidebar-user, .sidebar-spacer { display: none; }
  .side-nav { display: flex; justify-content: space-around; gap: 2px; }
  .nav-item { display: grid; min-width: 58px; min-height: 50px; justify-items: center; align-content: center; gap: 3px; padding: 3px 5px; font-size: 8px; }
  .side-nav { justify-content: flex-start; overflow-x: auto; }
  .nav-item { flex: 0 0 58px; }
  .nav-icon { width: auto; font-size: 15px; }
  .nav-badge { position: absolute; margin: -18px 0 0 28px; }
  .topbar { min-height: 57px; padding: 0 15px; }
  .topbar-date { display: none; }
  .content { padding: 21px 14px 82px; }
  .page-heading { align-items: center; }
  .page-heading h1 { font-size: 21px; }
  .page-heading p { max-width: 250px; font-size: 10px; line-height: 1.5; }
  .heading-actions .btn { min-height: 34px; padding: 0 9px; font-size: 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 99px; padding: 12px; }
  .stat-value { font-size: 22px; }
  .panel-header { padding: 14px; }
  .panel-body { padding: 14px; }
  .paper-editor-panel .panel-body { padding: 14px; }
  .paper-editor-footer { padding: 12px 14px; }
  .paper-marking-summary { grid-template-columns: 1fr 1fr; }
  .paper-marking-summary > div:last-child { grid-column: 1 / -1; }
  .exam-overview { flex-wrap: wrap; padding: 14px; }
  .exam-overview .btn { width: 100%; }
  .chart-wrap { flex-direction: column; }
  .monitor-toolbar { align-items: flex-start; }
  .modal-backdrop { padding: 8px; }
  .modal-header, .modal-body { padding-right: 15px; padding-left: 15px; }
  .modal-footer { padding-right: 15px; padding-left: 15px; }
  .builder-meta { grid-template-columns: 1fr 1fr; }
  .builder-meta .field:first-child { grid-column: 1 / -1; }
  .builder-grid { grid-template-columns: 1fr; }
  .exam-topbar { min-height: 57px; padding: 0 14px; }
  .exam-layout { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 11px; margin: 14px auto 85px; }
  .exam-rail { display: contents; }
  .exam-countdown { position: sticky; z-index: 3; top: 57px; order: -1; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; text-align: left; }
  .exam-countdown small { font-size: 8px; }
  .timer { margin: 0; font-size: 18px; }
  .exam-countdown span { display: none; }
  .question-nav { order: 0; margin-top: 0; padding: 11px; }
  .question-nav h3 { display: none; }
  .question-nav-grid { grid-template-columns: repeat(10,1fr); }
  .question-jump { width: 27px; height: 27px; justify-self: center; }
  .question-nav-legend { display: none; }
  .exam-main { display: contents; }
  .exam-heading { order: -2; padding: 15px; }
  .exam-heading h1 { font-size: 16px; }
  .progress-wrap { min-width: 80px; }
  .progress-track { width: 80px; }
  .question-card { order: 1; margin-top: 0; padding: 17px; }
  .question-prompt { font-size: 15px; }
  .answer-option { min-height: 45px; }
  .submit-bar { padding: 10px 12px; }
  .submit-bar .btn { min-height: 35px; padding: 0 10px; font-size: 10px; }
  .save-state { max-width: 110px; line-height: 1.4; }
  .student-home { margin: 25px auto; }
}
@media (max-width: 420px) {
  .nav-item { min-width: 48px; font-size: 7px; }
  .question-nav-grid { grid-template-columns: repeat(8,1fr); }
  .paper-actions { justify-content: flex-start; width: 100%; }
  .paper-row { flex-wrap: wrap; }
  .question-footer { flex-wrap: wrap; }
  .login-copy h1 { font-size: 29px; }
}