:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --text: #0f172a;
  --muted: #64748b;
  --soft: #94a3b8;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --indigo: #4f46e5;
  --slate: #0f172a;
  --emerald: #059669;
  --teal: #0d9488;
  --red: #dc2626;
  --amber: #d97706;
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.07);
  --radius: 18px;
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Manrope, Inter, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 32rem), var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
button, input, select, textarea { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.noscript { padding: 1rem; background: #fee2e2; color: #991b1b; font-weight: 800; text-align: center; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: min(100% - 2rem, 1280px); margin-inline: auto; }
.main { flex: 1; padding: 2rem 0 3rem; }
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), #4338ca); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-sm); font-size: 1.25rem; flex: 0 0 auto; }
.brand h1 { margin: 0; font-size: clamp(.84rem, 2vw, 1rem); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { margin: .22rem 0 0; font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.role-switch { display: flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 14px; background: #f1f5f9; }
.role-btn { padding: .52rem .85rem; border-radius: 10px; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 900; cursor: pointer; transition: .2s ease; white-space: nowrap; }
.role-btn.is-active { background: #fff; color: var(--text); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.footer { margin-top: auto; background: #fff; border-top: 1px solid var(--line-soft); padding: 1.5rem 0; color: var(--soft); font-size: .76rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100; max-width: min(460px, calc(100vw - 2rem)); background: #0f172a; color: #fff; padding: .95rem 1.1rem; border-radius: 14px; box-shadow: 0 24px 70px rgba(15,23,42,.35); font-size: .78rem; font-weight: 800; display: flex; gap: .6rem; align-items: center; animation: fadeIn .18s ease; }
.toast::before { content: ""; width: .45rem; height: .45rem; border-radius: 99px; background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,.14); }
.card, .glass { background: var(--surface-glass); border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { background: #fff; border-color: var(--line-soft); }
.panel { padding: clamp(1.25rem, 2vw, 2rem); }
.stack { display: grid; gap: 1.5rem; }
.stack-lg { display: grid; gap: 2.5rem; }
.center { text-align: center; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.hero-title { font-size: clamp(2rem, 5vw, 3.8rem); line-height: .95; margin: 0; }
.section-title { font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.05; margin: 0; color: var(--text); }
.muted { color: var(--muted); }
.soft { color: var(--soft); }
.small { font-size: .82rem; }
.xsmall { font-size: .72rem; }
.kicker { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .32rem .72rem; background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.grid { display: grid; gap: 1.25rem; }
.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)); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.82); color: var(--text); border-radius: 13px; padding: .83rem .95rem; font-size: .86rem; outline: 0; transition: .18s ease; }
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(37,99,235,.12); background: #fff; }
.label { display: block; font-size: .67rem; color: #475569; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .48rem; }
.field { display: grid; gap: .2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 13px; padding: .82rem 1.05rem; font-size: .78rem; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease; border: 1px solid transparent; text-align: center; }
.btn:active { transform: scale(.985); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--indigo)); box-shadow: 0 12px 24px rgba(37,99,235,.22); }
.btn-primary:hover { box-shadow: 0 18px 30px rgba(37,99,235,.28); }
.btn-dark { background: #0f172a; color: #fff; }
.btn-dark:hover { background: #020617; }
.btn-emerald { color: #fff; background: linear-gradient(135deg, var(--emerald), var(--teal)); box-shadow: 0 12px 24px rgba(5,150,105,.18); }
.btn-soft { background: #f8fafc; color: #334155; border-color: var(--line); }
.btn-soft:hover { background: #fff; border-color: #cbd5e1; }
.btn-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-amber { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-sm { padding: .55rem .72rem; border-radius: 10px; font-size: .68rem; }
.btn-full { width: 100%; }
.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .27rem .58rem; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line); background: #f8fafc; color: #475569; }
.badge-blue { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.badge-green { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.badge-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.table-wrap { overflow: auto; border-radius: 16px; border: 1px solid var(--line-soft); background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: .9rem .95rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .78rem; vertical-align: top; }
th { color: #64748b; background: #f8fafc; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
tr:last-child td { border-bottom: 0; }
.hr { height: 1px; background: var(--line-soft); margin: 1rem 0; }
.category-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; transition: .22s ease; }
.category-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 28px 70px rgba(15,23,42,.1); }
.category-card::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: #eff6ff; top: -48px; right: -48px; filter: blur(14px); z-index: 0; }
.category-card > * { position: relative; z-index: 1; }
.iconbox { width: 42px; height: 42px; border-radius: 12px; background: #eff6ff; color: var(--blue); display: grid; place-items: center; font-size: 1.1rem; font-weight: 900; }
.profile-avatar { width: 56px; height: 56px; border-radius: 16px; background: #dbeafe; color: #1d4ed8; display: grid; place-items: center; font-weight: 900; font-size: 1.25rem; flex: 0 0 auto; }
.exam-param { background: linear-gradient(145deg, #1e3a8a, #312e81 76%); color: #fff; border-radius: var(--radius); padding: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.exam-param::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 999px; background: rgba(255,255,255,.08); right: -70px; bottom: -70px; filter: blur(9px); }
.exam-param > * { position: relative; z-index: 1; }
.warn-box { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: var(--radius); padding: 1.1rem; }
.progress { width: 100%; height: .42rem; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .25s ease; }
.option { min-height: 54px; width: 100%; display: flex; align-items: flex-start; gap: .85rem; text-align: left; border: 1px solid var(--line); background: #fff; color: #334155; padding: .95rem 1rem; border-radius: 14px; cursor: pointer; transition: .16s ease; }
.option:hover { background: #f8fafc; }
.option.is-selected { border-color: var(--blue); background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.11); color: #1e3a8a; font-weight: 800; }
.option-letter { width: 22px; height: 22px; border-radius: 7px; background: #f1f5f9; color: #64748b; border: 1px solid var(--line); display: grid; place-items: center; font-size: .7rem; font-weight: 900; flex: 0 0 auto; margin-top: .08rem; }
.option.is-selected .option-letter { background: var(--blue); color: #fff; border-color: var(--blue); }
.timer { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 14px; background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .08em; }
.timer.is-alarm { background: #fef2f2; color: #b91c1c; border-color: #fecaca; animation: pulse 1s infinite; }
.auth-card { max-width: 440px; margin: 3rem auto; }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.tab-btn { padding: .7rem .82rem; border-radius: 13px; background: #f8fafc; border: 1px solid var(--line); color: #475569; font-size: .72rem; font-weight: 900; cursor: pointer; transition: .16s ease; }
.tab-btn.is-active { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: var(--shadow-sm); }
.admin-top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1.25rem; }
.stat { padding: 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.stat-value { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 900; margin: .35rem 0 0; }
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(2,6,23,.58); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1rem; animation: fadeIn .16s ease; }
.modal { width: min(100%, 760px); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.5); }
.modal-head { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-body { padding: 1.25rem; }
.close-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #f8fafc; color: #334155; cursor: pointer; border: 1px solid var(--line); }
.report-card { background: #fcfdfb; border: 3px solid #0f172a; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(15,23,42,.16); color:#0f172a; }
.report-topbar { height: 18px; background: #0f172a; display: grid; place-items: center; }
.report-topbar::after { content:""; height: 4px; width: 94%; background: rgba(255,255,255,.35); }
.report-body { padding: clamp(1.2rem, 3vw, 2.6rem); }
.report-title { text-align: center; border-bottom: 3px solid #0f172a; padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.ledger { border: 2px solid #0f172a; border-radius: 14px; overflow: hidden; }
.ledger table { min-width: 0; }
.ledger th { background: #0f172a; color: #fff; }
.ledger td { border-color: #0f172a; }
.stamp { display: inline-grid; place-items: center; min-width: 220px; padding: 1rem; border: 3px solid currentColor; border-radius: 14px; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: #fff; transform: rotate(-2deg); }
.stamp.pass { color: #059669; box-shadow: 4px 4px 0 #10b981; }
.stamp.fail { color: #dc2626; box-shadow: 4px 4px 0 #dc2626; transform: rotate(2deg); }
.receipt-card { max-width: 720px; margin: 0 auto; }
.receipt-frame { background: #fff; border: 2px solid #0f172a; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px rgba(15,23,42,.16); }
.receipt-stripe { height: 12px; background: #4f46e5; }
.receipt-stamp { border: 3px solid #059669; color: #059669; border-radius: 14px; padding: .85rem; font-weight: 900; text-align: center; transform: rotate(-3deg); background: #fff; box-shadow: var(--shadow-sm); }
.email-body-preview { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; overflow: auto; max-height: 420px; font-size: .85rem; }
.empty { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); }
.split-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.mobile-cards { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .65; } }
.animate-in { animation: fadeIn .2s ease both; }
@media (max-width: 980px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-top { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .container { width: min(100% - 1rem, 1280px); }
  .main { padding: 1rem 0 2rem; }
  .header-inner { min-height: auto; padding: .7rem 0; flex-direction: column; align-items: stretch; }
  .brand { justify-content: center; }
  .role-switch { width: 100%; }
  .role-btn { flex: 1; padding-inline: .55rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .panel { padding: 1rem; }
  .footer-inner { justify-content: center; text-align: center; }
  .desktop-table { display: none; }
  .mobile-cards { display: grid; gap: .9rem; }
  .toast { right: 1rem; left: 1rem; bottom: 1rem; }
  .split-actions .btn { flex: 1; }
  .report-body { padding: 1rem; }
  .stamp { min-width: 0; width: 100%; }
}
button:disabled { pointer-events: none; }
.modal-wide { width: min(100%, 1120px); max-height: calc(100vh - 2rem); overflow: auto; background:#fff; border-radius:22px; box-shadow:0 40px 100px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.5); }
code { background:#f1f5f9; color:#334155; border-radius:6px; padding:.1rem .3rem; }
.brand { border:0; background:transparent; cursor:pointer; text-align:left; }
.tab-btn { display:flex; width:100%; align-items:center; }
@media (max-width: 1024px) { #admin-workspace-grid, section[style*="grid-template-columns:minmax(220px,1fr)"] { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) { article.card.panel > .grid[style*="grid-template-columns:220px"] { grid-template-columns: 1fr !important; } article.card.panel > .grid[style*="grid-template-columns:220px"] > div:first-child { border-right:0 !important; border-bottom:1px solid #1e293b; padding-right:0 !important; padding-bottom:1rem; } }
@media print { .header,.footer,.toast,.split-actions,.modal-head { display:none !important; } body { background:#fff; } .main,.container { width:100%; padding:0; margin:0; } .report-card { box-shadow:none; border-radius:0; } .modal-backdrop { position:static; background:#fff; display:block; padding:0; } .modal,.modal-wide { box-shadow:none; border:0; width:100%; max-height:none; } }

/* Theme switcher + stable timer refinements */
.header-actions { display:flex; align-items:center; gap:.75rem; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:13px; padding:.62rem .85rem; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.74rem; font-weight:900; cursor:pointer; box-shadow:var(--shadow-sm); transition:.18s ease; white-space:nowrap; }
.theme-toggle:hover { transform:translateY(-1px); border-color:#bfdbfe; }
.timer-wrap { display:grid; justify-items:end; gap:.25rem; min-width: 176px; }
.timer-label { font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); min-height: .75rem; }
.timer { justify-content:center; min-width: 150px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.success-orb { width:72px; height:72px; margin:0 auto .5rem; border-radius:24px; display:grid; place-items:center; background:linear-gradient(135deg,#10b981,#0d9488); color:#fff; font-size:2rem; font-weight:900; box-shadow:0 18px 40px rgba(5,150,105,.22); }

html[data-theme="dark"] {
  --bg:#020617;
  --surface:#0f172a;
  --surface-soft:#111c2f;
  --surface-glass:rgba(15,23,42,.82);
  --text:#e5eefb;
  --muted:#94a3b8;
  --soft:#64748b;
  --line:#334155;
  --line-soft:#1e293b;
  --shadow:0 22px 70px rgba(0,0,0,.35);
  --shadow-sm:0 12px 32px rgba(0,0,0,.28);
}
html[data-theme="dark"] body { background:radial-gradient(circle at top left, rgba(79,70,229,.22), transparent 34rem), var(--bg); color:var(--text); }
html[data-theme="dark"] .header { background:rgba(2,6,23,.84); border-bottom-color:var(--line); }
html[data-theme="dark"] .footer,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-wide,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .email-body-preview,
html[data-theme="dark"] .receipt-frame { background:var(--surface); color:var(--text); border-color:var(--line-soft); }
html[data-theme="dark"] .glass { background:var(--surface-glass); border-color:rgba(148,163,184,.18); }
html[data-theme="dark"] .role-switch,
html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .close-btn,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] code { background:#111827; color:var(--text); border-color:var(--line); }
html[data-theme="dark"] .role-btn.is-active,
html[data-theme="dark"] .tab-btn.is-active { background:#2563eb; color:#fff; border-color:#2563eb; }
html[data-theme="dark"] .option { background:#0b1220; border-color:var(--line); color:#dbeafe; }
html[data-theme="dark"] .option:hover { background:#111827; }
html[data-theme="dark"] .option.is-selected { background:rgba(37,99,235,.2); color:#bfdbfe; }
html[data-theme="dark"] th,
html[data-theme="dark"] [style*="background:#f8fafc"] { background:#111827 !important; color:#cbd5e1 !important; }
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] .section-title { color:var(--text) !important; }
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .badge-blue { background:rgba(37,99,235,.16); border-color:rgba(147,197,253,.24); color:#bfdbfe; }
html[data-theme="dark"] .badge,
html[data-theme="dark"] .timer { background:#111827; border-color:var(--line); color:#dbeafe; }
html[data-theme="dark"] .timer.is-alarm,
html[data-theme="dark"] .badge-red { background:rgba(220,38,38,.16); border-color:rgba(248,113,113,.32); color:#fecaca; }
html[data-theme="dark"] .warn-box,
html[data-theme="dark"] .btn-amber { background:rgba(217,119,6,.14); color:#fde68a; border-color:rgba(251,191,36,.28); }
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .ledger,
html[data-theme="dark"] .stamp { background:#f8fafc; color:#0f172a; }
html[data-theme="dark"] .report-card .muted,
html[data-theme="dark"] .report-card [style*="color:#64748b"] { color:#475569 !important; }
html[data-theme="dark"] .receipt-stamp { background:var(--surface); }
html[data-theme="dark"] .theme-toggle { background:#111827; color:#f8fafc; border-color:var(--line); }
@media (max-width: 720px) {
  .header-actions { flex-direction:column; align-items:stretch; width:100%; }
  .theme-toggle { width:100%; }
  .timer-wrap { justify-items:start; width:100%; min-width:0; }
  .timer { width:100%; min-width:0; }
}


/* Clear typography and selected-card print output */
#app { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
.report-card, .report-card table, .report-card td, .report-card th { font-family: var(--font-sans); }
.report-card .display { font-family: var(--font-display); }
#print-root { display:none; }

@media print {
  @page { size: A4; margin: 12mm; }
  body.printing-report { background:#fff !important; }
  body.printing-report > :not(#print-root) { display:none !important; }
  body.printing-report #print-root { display:block !important; width:100%; margin:0; padding:0; }
  body.printing-report #print-root .print-page { width:100%; max-width:980px; margin:0 auto; }
  body.printing-report #print-root .report-card { box-shadow:none !important; border-radius:14px !important; break-inside:avoid; page-break-inside:avoid; }
  body.printing-report #print-root .report-body { padding:18px !important; }
  body.printing-report #print-root .report-title h2 { font-size:32px !important; line-height:1.05 !important; }
}

/* Classic color mode */
html[data-theme="classic"] {
  --bg:#f7f1e6;
  --surface:#fffaf0;
  --surface-soft:#f3ead9;
  --surface-glass:rgba(255,250,240,.88);
  --text:#1f2933;
  --muted:#6b5f4a;
  --soft:#9a8a70;
  --line:#dfcfb7;
  --line-soft:#eadcc8;
  --blue:#8b5e34;
  --blue-dark:#6f4518;
  --indigo:#3f2f25;
  --slate:#2f261d;
  --emerald:#4f7f52;
  --teal:#5f7d62;
  --red:#a3372a;
  --amber:#b45309;
  --shadow:0 22px 60px rgba(63,47,37,.12);
  --shadow-sm:0 10px 26px rgba(63,47,37,.10);
}
html[data-theme="classic"] body { background:radial-gradient(circle at top left, rgba(180,83,9,.15), transparent 32rem), linear-gradient(180deg,#f7f1e6,#efe3cf); color:var(--text); }
html[data-theme="classic"] .header { background:rgba(255,250,240,.9); border-bottom-color:var(--line); }
html[data-theme="classic"] .footer,
html[data-theme="classic"] .card,
html[data-theme="classic"] .stat,
html[data-theme="classic"] .empty,
html[data-theme="classic"] .modal,
html[data-theme="classic"] .modal-wide,
html[data-theme="classic"] .modal-head,
html[data-theme="classic"] .table-wrap,
html[data-theme="classic"] .email-body-preview,
html[data-theme="classic"] .receipt-frame { background:var(--surface); color:var(--text); border-color:var(--line-soft); }
html[data-theme="classic"] .brand-mark,
html[data-theme="classic"] .btn-primary { background:linear-gradient(135deg,#8b5e34,#3f2f25); box-shadow:0 14px 28px rgba(139,94,52,.18); }
html[data-theme="classic"] .role-switch,
html[data-theme="classic"] .btn-soft,
html[data-theme="classic"] .tab-btn,
html[data-theme="classic"] .close-btn,
html[data-theme="classic"] .input,
html[data-theme="classic"] .select,
html[data-theme="classic"] .textarea,
html[data-theme="classic"] code { background:#fff7e8; color:var(--text); border-color:var(--line); }
html[data-theme="classic"] .role-btn.is-active,
html[data-theme="classic"] .tab-btn.is-active { background:#3f2f25; color:#fffaf0; border-color:#3f2f25; }
html[data-theme="classic"] .kicker,
html[data-theme="classic"] .badge-blue { background:#f6ead8; color:#6f4518; border-color:#eadcc8; }
html[data-theme="classic"] .badge,
html[data-theme="classic"] .timer { background:#fff7e8; border-color:var(--line); color:#6f4518; }
html[data-theme="classic"] .badge-green { background:#eef6e8; color:#3f6f3f; border-color:#d8eacc; }
html[data-theme="classic"] .badge-red { background:#fff0eb; color:#9f2f24; border-color:#f3c7bc; }
html[data-theme="classic"] .badge-amber,
html[data-theme="classic"] .btn-amber,
html[data-theme="classic"] .warn-box { background:#fff4dc; color:#8a4b0f; border-color:#f3d49c; }
html[data-theme="classic"] .option { background:#fffaf0; border-color:var(--line); color:#3f2f25; }
html[data-theme="classic"] .option:hover { background:#fff4dc; }
html[data-theme="classic"] .option.is-selected { background:#f6ead8; color:#4a2d16; border-color:#b45309; }
html[data-theme="classic"] .exam-param { background:linear-gradient(145deg,#3f2f25,#6f4518 78%); }
html[data-theme="classic"] th,
html[data-theme="classic"] [style*="background:#f8fafc"] { background:#f7efe2 !important; color:#6b5f4a !important; }
html[data-theme="classic"] [style*="color:#0f172a"],
html[data-theme="classic"] .section-title { color:var(--text) !important; }
html[data-theme="classic"] .report-card,
html[data-theme="classic"] .ledger,
html[data-theme="classic"] .stamp { background:#fffaf0; color:#1f2933; border-color:#dfcfb7; }
html[data-theme="classic"] .report-topbar { background:linear-gradient(90deg,#3f2f25,#b45309,#3f2f25); }
html[data-theme="classic"] .report-card .muted,
html[data-theme="classic"] .report-card [style*="color:#64748b"] { color:#6b5f4a !important; }
html[data-theme="classic"] .theme-toggle { background:#fff7e8; color:#4a2d16; border-color:var(--line); }
.final-result-row td { background:#0f172a !important; color:#fff !important; font-weight:900; }
html[data-theme="classic"] .final-result-row td { background:#3f2f25 !important; color:#fffaf0 !important; }
html[data-theme="dark"] .final-result-row td { background:#020617 !important; color:#f8fafc !important; }
.final-score-box { background:linear-gradient(180deg,#ffffff,#f8fafc); }
html[data-theme="classic"] .final-score-box { background:linear-gradient(180deg,#fffaf0,#f7efe2); }
html[data-theme="dark"] .final-score-box { background:#f8fafc !important; color:#0f172a !important; }

/* AI generator category picker improvements */
.ai-selected-row { display: grid; gap: 1rem; }
.ai-category-helper { display: grid; gap: .8rem; padding: .95rem; border: 1px solid var(--line-soft); border-radius: 18px; background: rgba(248,250,252,.72); }
.ai-category-search { min-height: 44px; }
.ai-category-grid { display: flex; flex-wrap: wrap; gap: .55rem; max-height: 220px; overflow: auto; padding-right: .25rem; }
.ai-category-pill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 999px; padding: .65rem .85rem; font-size: .76rem; font-weight: 850; cursor: pointer; transition: .18s ease; box-shadow: 0 6px 18px rgba(15,23,42,.05); }
.ai-category-pill:hover { transform: translateY(-1px); border-color: #bfdbfe; box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.ai-category-pill.is-active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--indigo)); border-color: transparent; box-shadow: 0 14px 28px rgba(37,99,235,.22); }
.ai-category-pill em { font-style: normal; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; opacity: .74; }
html[data-theme="dark"] .ai-category-helper { background: rgba(15,23,42,.54); border-color: rgba(148,163,184,.18); }
html[data-theme="dark"] .ai-category-pill { background: rgba(15,23,42,.84); border-color: rgba(148,163,184,.24); color: #e2e8f0; }
html[data-theme="classic"] .ai-category-helper { background: rgba(255,249,238,.74); border-color: #eadcc8; }
html[data-theme="classic"] .ai-category-pill { background: #fffaf0; border-color: #eadcc8; color: #3a2718; }
html[data-theme="classic"] .ai-category-pill.is-active { background: linear-gradient(135deg, #7c4a1e, #b0742e); color:#fff; }
@media (max-width: 760px) { .ai-category-grid { max-height: 260px; } .ai-category-pill { width: 100%; justify-content: space-between; border-radius: 14px; } }

/* v7 bulk question management */
.bulk-panel { border-style: dashed; }
.admin-top.compact { margin-bottom: .85rem; }
.bulk-grid { align-items: end; }
.bulk-apply-row { align-self: end; }
.select-col { width: 48px; text-align: center; }
.select-col input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.row-selected { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
html[data-theme="dark"] .row-selected { background: rgba(96,165,250,.12); }
html[data-theme="classic"] .row-selected { background: rgba(166,124,47,.12); }
@media (max-width: 720px) {
  .bulk-grid { grid-template-columns: 1fr; }
}

/* v9 exam count alignment */
.exam-selection-note {
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: .85rem 1rem;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.5;
}
html[data-theme="dark"] .exam-selection-note { background: rgba(96,165,250,.10); border-color: rgba(148,163,184,.22); }
html[data-theme="classic"] .exam-selection-note { background: rgba(166,124,47,.10); border-color: #eadcc8; }

/* v10 anti-cheat monitoring */
.anti-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(37, 99, 235, .18);
  background: rgba(37, 99, 235, .08);
  color: #1d4ed8;
  border-radius: 999px;
  padding: .38rem .65rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.anti-cheat-banner {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  border-radius: 16px;
  padding: .85rem 1rem;
  font-weight: 850;
  line-height: 1.5;
  box-shadow: 0 14px 28px rgba(245, 158, 11, .12);
}
.security-box {
  border-radius: 16px;
  padding: 1rem;
  line-height: 1.55;
  border: 1px solid var(--line-soft);
}
.security-box.is-clear {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #065f46;
}
.security-box.is-flagged {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.security-head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}
.security-log {
  display: grid;
  gap: .45rem;
}
.security-log p {
  margin: 0;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(146, 64, 14, .16);
  font-size: .84rem;
}
.security-log span {
  display: block;
  margin-top: .25rem;
  color: #78716c;
  font-size: .72rem;
}
html[data-theme="dark"] .anti-chip {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.24);
  color: #bfdbfe;
}
html[data-theme="dark"] .anti-cheat-banner,
html[data-theme="dark"] .security-box.is-flagged {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.3);
  color: #fde68a;
}
html[data-theme="dark"] .security-box.is-clear {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
  color: #bbf7d0;
}
html[data-theme="dark"] .security-log p { background: rgba(15,23,42,.56); border-color: rgba(245,158,11,.22); }
html[data-theme="dark"] .security-log span { color: #cbd5e1; }
html[data-theme="classic"] .anti-chip {
  background: #fff4dc;
  border-color: #f3d49c;
  color: #7c4a1e;
}
html[data-theme="classic"] .anti-cheat-banner,
html[data-theme="classic"] .security-box.is-flagged {
  background: #fff4dc;
  border-color: #f3d49c;
  color: #7c4a1e;
}
html[data-theme="classic"] .security-box.is-clear {
  background: #eef6e8;
  border-color: #d8eacc;
  color: #3f6f3f;
}
@media print {
  .security-log p { break-inside: avoid; }
}

/* v12 category selection manager */
.category-table th:first-child,
.category-table td:first-child { width: 135px; }
.switch-line { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:.82rem; color:var(--text); cursor:pointer; white-space:nowrap; }
.switch-line input { width:18px; height:18px; accent-color:var(--blue); cursor:pointer; }
.muted-row { opacity:.62; }
.muted-row strong { color:var(--muted); }