:root {
  --industrial-page: #e7f0f8;
  --ink: #142c47;
  --muted: #203c55;
  --primary: #1b65ba;
  --cyan: #65d2f2;
  --red: #b4332b;
  --line: rgba(105,155,205,.28);
  --glass-surface: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-radius: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --card-gap: 6px;
}
* { box-sizing: border-box; }
html { background: var(--industrial-page); }
body { margin:0; min-width:320px; min-height:100vh; background:transparent; isolation:isolate; color:var(--ink); font:14px/1.6 "Microsoft YaHei","PingFang SC",sans-serif; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.52; cursor:default; }
button,a { transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s; }
:focus-visible { outline:3px solid #237edb; outline-offset:3px; }
[hidden] { display:none!important; }
.industrial-background { --background-photo-height:800px; --background-edge-fade:180px; position:fixed; z-index:-2; inset:0; overflow:hidden; pointer-events:none; background:var(--industrial-page); isolation:isolate; }
.industrial-background-photo { position:absolute; top:0; right:0; left:0; height:var(--background-photo-height); overflow:hidden; }
.industrial-background-image { position:absolute; inset:-3%; background:url('/assets/exam-blue-v1.png') center 48% / cover no-repeat; transform-origin:55% 46%; animation:ambient-breath 24s ease-in-out infinite; will-change:transform; }
.industrial-background-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(233,244,255,.22),rgba(233,244,255,.32)); }
.industrial-background::after { content:""; position:absolute; top:calc(var(--background-photo-height) - var(--background-edge-fade)); right:0; left:0; height:calc(var(--background-edge-fade) + 2px); background:linear-gradient(180deg,rgba(231,240,248,0) 0%,rgba(231,240,248,.15) 28%,rgba(231,240,248,.7) 68%,var(--industrial-page) calc(100% - 2px),var(--industrial-page) 100%); }
@keyframes ambient-breath { 0%,100% { transform:translate3d(-.5%,.2%,0) scale(1.03); } 50% { transform:translate3d(.7%,-.5%,0) scale(1.055); } }
.glass-card,.stat-card,.category,.question-card,.admin-panel,.state { background:linear-gradient(135deg,rgba(255, 255, 255, 0.16),rgba(255, 255, 255, 0.08)); border:1px solid var(--glass-border); border-radius:var(--glass-radius); backdrop-filter:blur(24px) saturate(1.08) brightness(1.08); -webkit-backdrop-filter:blur(24px) saturate(1.08) brightness(1.08); box-shadow:0 0 0 1px rgba(125,218,245,.16),0 8px 22px rgba(59,118,178,.13),0 20px 44px rgba(47,118,190,.09),inset 0 1px 0 rgba(255, 255, 255, 0.8),inset 0 -1px 0 rgba(122,215,247,.32); }
.sidebar { position:fixed; inset:24px auto 24px 24px; width:204px; padding:24px 14px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; font-size:25px; font-weight:750; letter-spacing:3px; }
.brand small { display:block; color:var(--muted); font-size:11px; letter-spacing:1px; font-weight:400; margin-top:2px; }
.brand-icon { display:grid; place-items:center; width:44px; height:48px; color:var(--primary); }
.brand-icon svg { width:34px; height:34px; }
.sidebar .brand { padding:0 9px; }
.sidebar nav { display:grid; gap:var(--space-2); margin-top:36px; }
.icon { display:inline-grid; width:24px; height:24px; flex:0 0 24px; place-items:center; }
.icon svg { width:22px; height:22px; }
.nav { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 12px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted); text-align:left; }
.nav:hover { background:rgba(255,255,255,.26); }
.nav.active { color:#164f91; border-color:rgba(82,162,226,.34); background:rgba(187,224,255,.38); box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.nav b { margin-left:auto; min-width:22px; padding:0 5px; border-radius:6px; background:rgba(72,138,205,.12); font:600 11px/22px monospace; text-align:center; }
.app-main { margin-left:252px; padding:0 24px; max-width:1340px; }
.topbar { min-height:92px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
h1 { margin:0; font-size:clamp(23px,2.1vw,30px); letter-spacing:-.6px; font-weight:700; }
h2 { margin:0; font-size:18px; font-weight:650; }
p { line-height:1.8; }
.user-button { min-height:44px; padding:10px 18px; border:1px solid rgba(70,135,195,.28); border-radius:12px; background:rgba(255,255,255,.18); backdrop-filter:blur(18px); color:#204b7c; font-size:12px; white-space:nowrap; }
.user-button:hover { background:rgba(255,255,255,.34); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--card-gap); }
.stat-card { display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:12px; padding:18px; min-width:0; }
.metric-icon { display:grid; place-items:center; width:50px; height:50px; color:#256db4; border:1px solid rgba(102,181,226,.5); border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 6px 18px rgba(35,121,196,.1); }
.metric-icon svg { width:25px; height:25px; }
.metric-copy { min-width:0; }
.metric-copy span { font-size:11px; color:var(--muted); display:block; white-space:nowrap; }
.metric-copy strong { display:block; font-family:"Consolas","SFMono-Regular",monospace; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; font-size:clamp(23px,2.1vw,32px); line-height:1.2; margin-top:5px; letter-spacing:-1px; white-space:nowrap; }
.workspace { margin-top:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.muted { color:var(--muted); font-size:12px; }
.categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); margin-bottom:8px; }
.category { position:relative; min-height:88px; padding:17px 20px; color:var(--ink); text-align:left; min-width:0; }
.category:hover { transform:translateY(-3px); border-color:rgba(55,143,211,.6); }
.category.active { border-color:rgba(33,117,188,.72); box-shadow:inset 3px 0 0 #247bc8,0 8px 22px rgba(59,118,178,.13),inset 0 1px 0 rgba(255,255,255,.8); }
.category strong { display:block; font-size:15px; margin-bottom:5px; font-weight:650; }
.category small { color:var(--muted); font-size:11px; }
.filter-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px; margin-bottom:8px; }
.type-bar { display:flex; gap:var(--space-2); }
.type { min-height:44px; border:1px solid transparent; border-radius:10px; padding:10px 16px; background:transparent; color:var(--muted); white-space:nowrap; }
.type.active { color:#174d87; background:rgba(176,218,253,.5); border-color:rgba(64,138,207,.28); font-weight:650; }
.type:hover { background:rgba(255,255,255,.24); }
.chapter-filter { display:flex; align-items:center; gap:10px; flex:1; max-width:490px; min-width:220px; }
.chapter-filter label { margin:0!important; white-space:nowrap; font-size:12px; }
.chapter-filter select { min-width:0; font-size:12px; }
.question-card { padding:24px; }
.question-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.tag { display:inline-block; padding:4px 9px; background:rgba(156,205,248,.35); border:1px solid rgba(108,169,218,.3); border-radius:6px; color:#193e64; }
.chapter-tag { margin-right:auto; }
.stem { font-size:17px; line-height:1.85; white-space:pre-wrap; margin:22px 0; overflow-wrap:anywhere; color:#102a48; }
.options { display:grid; gap:var(--space-2); }
.option { display:flex; align-items:baseline; gap:12px; min-height:52px; border:1px solid rgba(255,255,255,.6); padding:13px 16px; border-radius:12px; background:rgba(255,255,255,.1); cursor:pointer; line-height:1.7; transition:background-color .2s,border-color .2s,box-shadow .2s; }
.option:hover { background:rgba(255,255,255,.28); border-color:rgba(60,135,210,.5); }
.option.selected { background:rgba(148,202,253,.32); border-color:rgba(39,119,196,.7); box-shadow:inset 3px 0 0 #2678c7; }
.option:focus-within { outline:2px solid #237edb; outline-offset:2px; }
.option input { accent-color:var(--primary); width:17px; height:17px; flex:0 0 17px; }
.option-key { color:#193e64; font-family:Consolas,monospace; font-size:17px; }
.option > span:last-child { min-width:0; overflow-wrap:anywhere; }
.question-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:22px; }
.question-actions > .muted { margin-right:auto; }
.primary { border:1px solid #1a60aa; border-radius:11px; min-height:44px; padding:10px 22px; background:linear-gradient(145deg,#337ece,#175b9f); box-shadow:0 5px 14px rgba(36,109,186,.2),inset 0 1px 0 rgba(255,255,255,.35); color:white; font-weight:600; }
.primary:hover { box-shadow:0 8px 18px rgba(36,109,186,.3); transform:translateY(-1px); }
.secondary,.ghost { min-height:44px; padding:10px 16px; color:#204e7b; border-radius:11px; border:1px solid rgba(68,130,185,.32); background:rgba(255,255,255,.16); }
.secondary:hover,.ghost:hover { background:rgba(255,255,255,.32); }
.ghost { border-color:transparent; background:transparent; }
.answer-box { margin-top:20px; padding:18px 20px; border:1px solid rgba(255,255,255,.6); border-left:3px solid #508dbc; border-radius:12px; background:rgba(213,236,253,.24); line-height:1.8; }
.answer-box strong { font-size:13px; color:#164b80; }
.answer-box p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; margin:8px 0 18px; }
.error { color:#a52b25; font-size:12px; line-height:1.7; }
.state { text-align:center; padding:40px 20px; }
.state strong { display:block; font-size:18px; }
.state p { font-size:12px; color:var(--muted); margin:10px 0; }
footer { display:flex; justify-content:flex-end; padding:20px 4px 24px; font-size:12px; color:#365d83; }
footer a { display:inline-flex; min-height:44px; align-items:center; padding:0 12px; border-radius:10px; }
footer a:hover { background:rgba(255,255,255,.28); }
label:not(.option) { display:block; font-size:12px; margin:18px 0 8px; }
input:not([type=radio]):not([type=checkbox]),textarea,select { width:100%; min-height:44px; padding:11px 12px; color:var(--ink); background:rgba(255,255,255,.32); border:1px solid rgba(88,139,181,.35); border-radius:10px; }
input::placeholder,textarea::placeholder { color:#536a80; opacity:1; }
textarea { resize:vertical; min-height:180px; line-height:1.8; }
select option { background:#f3f8fc; color:#183c62; }
#toast { position:fixed; z-index:30; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); background:#143557; color:white; padding:12px 20px; border-radius:12px; display:none; box-shadow:0 6px 18px rgba(20,50,80,.2); font-size:13px; }
.login-open { overflow:hidden; }
dialog#login-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; color:#4a261b; overflow:auto; background:#f4e5d8; isolation:isolate; }
#login-dialog::backdrop { background:rgba(80,32,25,.3); }
.login-background { position:fixed; z-index:-1; inset:0; pointer-events:none; background:#f4e5d8; }
.login-background-photo { position:absolute; inset:0; overflow:hidden; }
.login-background-image { position:absolute; inset:-2%; background:url('/assets/login-red-gold-v1.png') left center / cover no-repeat; animation:ambient-breath 26s ease-in-out infinite; transform-origin:27% 50%; will-change:transform; }
body:has(#login-dialog[open]) .industrial-background-image { animation-play-state:paused; }
.login-layout { position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:flex-end; padding:70px 8vw; }
.login-card { width:420px; max-width:100%; padding:32px; --glass-border:rgba(255,242,221,.76); background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08)); box-shadow:0 0 0 1px rgba(227,181,130,.2),0 16px 40px rgba(110,49,24,.12),inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.login-brand { font-size:29px; margin-bottom:28px; }
.login-brand .brand-icon { color:#9e3122; }
.login-brand small,.login-card .muted,.privacy-note { color:#48261b; }
.login-card h2 { font-size:24px; margin:0; }
.login-card .muted { margin:6px 0 24px; }
.login-card input { color:#4a261b; border-color:rgba(142,87,51,.28); background:rgba(255,255,255,.22); }
.login-card input::placeholder { color:#60351f; }
.code-row { display:flex; align-items:stretch; gap:var(--space-2); }
.code-row input { min-width:0; }
.code-row button { flex-shrink:0; white-space:nowrap; padding:10px 12px; font-size:12px; }
.login-card .secondary { color:#813620; border-color:rgba(154,74,46,.35); }
.login-card .primary { background:linear-gradient(145deg,#b0442f,#8b291b); border-color:#8b291b; box-shadow:0 5px 15px rgba(143,46,24,.16),inset 0 1px 0 rgba(255,232,191,.35); }
.full { width:100%; }
#login-error { min-height:20px; margin:12px 0; }
.privacy-note { display:block; font-size:11px; margin-top:16px; line-height:1.7; }
.dialog-close { position:absolute; z-index:3; top:24px; right:24px; display:flex; align-items:center; gap:6px; color:#6c3524; background:rgba(255,235,211,.84); border-color:rgba(122,68,35,.22); }
.admin-main { max-width:1120px; margin:0 auto; padding:0 24px; }
.admin-main header { display:flex; justify-content:space-between; align-items:center; min-height:92px; gap:12px; }
.admin-main .intro { padding:16px 0; }
.admin-panel { padding:24px; margin-top:8px; }
.admin-panel h2 { margin-bottom:12px; }
.admin-row { display:flex; align-items:flex-end; flex-wrap:wrap; gap:var(--space-2); }
.admin-row > div { flex:1; min-width:180px; }
.review-card { padding:20px 0; border-top:1px solid rgba(93,149,196,.25); }
.review-top { display:flex!important; align-items:center; flex-wrap:wrap; gap:10px; }
.review-top input { width:18px; height:18px; accent-color:var(--primary); }
.review-card pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
.review-card textarea { min-height:90px; }
summary { cursor:pointer; min-height:44px; padding:12px 0; color:#19558e; }
.question-image { display:block; width:auto; max-width:100%; height:auto; margin:16px 0; }
@supports not (backdrop-filter:blur(24px)) { .glass-card,.stat-card,.category,.question-card,.admin-panel,.state { background:#eaf2fa; } .login-card { background:#f6e7d8; } }
@media(max-width:1100px) { .sidebar { width:180px; left:16px; } .app-main { margin-left:212px; padding:0 20px; } .stat-card { gap:8px; padding:14px 12px; grid-template-columns:40px minmax(0,1fr); } .metric-icon { width:40px; height:40px; } .metric-copy strong { font-size:25px; } .metric-copy span { font-size:10px; } .chapter-filter { max-width:none; } .login-layout { padding-right:5vw; } .login-card { width:390px; } }
@media(max-width:780px) { .sidebar { position:relative; inset:auto; width:auto; margin:16px; padding:12px 16px; flex-direction:row; align-items:center; gap:16px; } .sidebar .brand { padding:0; font-size:23px; } .sidebar .brand-icon { width:32px; height:38px; } .sidebar .brand-icon svg { width:30px; } .sidebar nav { margin:0 0 0 auto; display:flex; gap:var(--space-2); } .nav { width:auto; padding:10px; white-space:nowrap; gap:6px; font-size:12px; } .nav .icon { display:none; } .app-main { margin:0; padding:0 16px; } .topbar { min-height:70px; } .filter-row { gap:8px; } .chapter-filter { min-width:180px; } .industrial-background { --background-photo-height:760px; --background-edge-fade:150px; } .industrial-background-image { background-position:48% center; } }
@media(max-width:540px) { .sidebar { margin:12px 12px 0; padding:12px; gap:8px; } .brand small { font-size:9px; letter-spacing:0; } .sidebar .brand { gap:6px; font-size:22px; } .sidebar .brand-icon { width:24px; } .sidebar .brand-icon svg { width:24px; } .nav { padding:8px; min-height:44px; border-radius:9px; font-size:11px; } .nav b { display:none; } .app-main { padding:0 12px; } h1 { font-size:23px; } .user-button { font-size:11px; padding:10px 12px; } .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-card { grid-template-columns:42px minmax(0,1fr); padding:14px 12px; gap:10px; } .metric-icon { width:42px; height:42px; } .metric-copy span { font-size:11px; } .metric-copy strong { font-size:28px; } .workspace { margin-top:20px; } .categories { grid-template-columns:1fr; } .category { min-height:72px; padding:13px 16px; } .category strong { font-size:14px; } .filter-row { padding:10px; } .type-bar { width:100%; gap:8px; } .type { flex:1; padding:10px 8px; font-size:12px; } .chapter-filter { width:100%; max-width:none; flex:auto; padding:0 4px; } .question-card { padding:18px 16px; } .stem { font-size:16px; margin:20px 0; } .option { padding:12px; gap:10px; } .question-actions { gap:8px; } .question-actions > .muted { width:100%; } .question-actions .primary { padding:10px 16px; } .question-actions .ghost,.question-actions .secondary { padding:10px 12px; } .chapter-tag { max-width:calc(100% - 60px); } .answer-box { padding:16px; } .admin-main { padding:0 12px; } .admin-panel { padding:18px; } .admin-row { flex-direction:column; align-items:stretch; } .admin-row > div { width:100%; } .admin-main header .brand { font-size:25px; } .login-layout { display:block; padding:310px 16px 32px; min-height:100dvh; } .login-card { width:100%; padding:24px; } .login-brand { margin-bottom:18px; } .login-background-photo { inset:0 0 auto; height:360px; } .login-background-image { inset:0; background-size:auto 360px; background-position:left top; } .login-background::after { content:""; position:absolute; top:290px; height:72px; left:0; right:0; background:linear-gradient(180deg,rgba(244,229,216,0),#f4e5d8 calc(100% - 2px),#f4e5d8 100%); } .dialog-close { top:258px; right:16px; min-width:44px; padding:8px 10px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .industrial-background-image,.login-background-image { animation:none; transform:none; will-change:auto; } *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

.login-card :focus-visible,.dialog-close:focus-visible { outline-color:#9a3e29; }

@media (min-width:541px) and (max-width:1100px), (min-width:541px) and (max-aspect-ratio:4/3) {
  .login-background-photo { inset:0 0 auto; height:calc(100vw * .5628); }
  .login-background-image { inset:0; background-size:100% auto; background-position:left top; }
  .login-background::after { content:""; position:absolute; top:calc(100vw * .5628 - 70px); height:72px; left:0; right:0; background:linear-gradient(180deg,rgba(244,229,216,0),#f4e5d8 calc(100% - 2px),#f4e5d8 100%); }
}