:root { color-scheme: dark; font-family: "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif; background: #101824; color: #eff4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #24364a 0, #101824 46rem); }
button, input { font: inherit; }
.shell { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 54px 0 36px; }
.hero { margin-bottom: 28px; }
.eyebrow { color: #d8b36c; font-size: .88rem; letter-spacing: .16em; margin: 0 0 9px; }
h1, h2 { margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; }
h2 { font-size: 1.5rem; }
.subtitle { color: #bac9d6; line-height: 1.7; margin: 12px 0 0; }
.panel, .result { background: rgba(18, 30, 43, .9); border: 1px solid rgba(205, 181, 124, .24); border-radius: 16px; box-shadow: 0 16px 42px rgba(0, 0, 0, .18); }
.exam-panel, .result, .admin, #id-panel { padding: 22px; }
.loading { color: #c9d5df; padding: 40px 0; text-align: center; }
.hidden { display: none !important; }
.exam-topline { display: flex; justify-content: space-between; align-items: center; color: #bdcbd7; font-size: .93rem; }
.pill { border: 1px solid #6e5d3e; color: #edce8e; border-radius: 999px; padding: 4px 10px; }
.progress-track { height: 5px; overflow: hidden; background: #314454; border-radius: 4px; margin: 14px 0 26px; }
.progress-track span { display: block; width: 0; height: 100%; background: #e0b76e; transition: width .2s; }
.question-number { color: #e4bf78; font-weight: 700; margin: 0 0 12px; }
.prompt { white-space: pre-line; font-size: 1.08rem; line-height: 1.8; margin: 0 0 18px; }
.options { display: grid; gap: 10px; }
.option { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: left; color: #e8edf2; background: #172737; border: 1px solid #34495b; border-radius: 10px; cursor: pointer; line-height: 1.6; }
.option:hover, .option.selected { border-color: #d6b16c; background: #3a3223; }
.option-key { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #192432; background: #d7e0e7; font-weight: 700; font-family: system-ui, sans-serif; }
.selected .option-key { background: #e2b86b; }
.button { border: 1px solid transparent; border-radius: 10px; cursor: pointer; padding: 11px 16px; font-weight: 700; transition: .16s ease; }
.button.primary { display: block; width: 100%; margin-top: 24px; background: #d9b268; color: #17202a; }
.button.primary:hover { background: #f2cf8c; }
.button.primary:disabled { cursor: not-allowed; opacity: .5; }
.button.secondary { background: transparent; border-color: #475c70; color: #d0dbe4; }
#id-panel { margin-top: 20px; }
#id-panel p { color: #bdcbd7; line-height: 1.7; }
label { display: block; color: #d3dee7; margin: 18px 0 8px; }
input { width: 100%; background: #122131; color: #f4f7fa; border: 1px solid #4c6378; border-radius: 10px; padding: 12px; }
.error { min-height: 1.3em; color: #f19292; margin: 10px 0 0; }
.result { margin-top: 20px; }
.result > p { color: #c7d4df; }
.wrong-item { border-top: 1px solid #405265; padding: 18px 0 0; margin-top: 18px; }
.wrong-item .prompt { font-size: 1rem; margin-bottom: 9px; }
.answer-detail { color: #f1c878; line-height: 1.6; margin: 0; }
.admin { margin-top: 20px; }
.admin-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.login-form { margin-top: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.stat-box { padding: 14px; border-radius: 10px; background: #172737; }
.stat-box span { display: block; color: #a9bdcc; font-size: .85rem; }
.stat-box strong { display: block; font-size: 1.35rem; margin-top: 4px; color: #f0cc87; }
table { width: 100%; border-collapse: collapse; font-family: "Microsoft YaHei", sans-serif; font-size: .92rem; }
th, td { padding: 11px 8px; border-bottom: 1px solid #3a4e62; text-align: left; }
th { color: #e5c381; font-weight: 600; }
details summary { color: #f0cc87; cursor: pointer; white-space: nowrap; }
.admin-wrong { min-width: 260px; border-top: 1px solid #3a4e62; margin-top: 9px; padding-top: 9px; line-height: 1.55; }
.admin-wrong p { margin: 0 0 6px; white-space: pre-line; }
.admin-wrong p:last-child { color: #f0cc87; }
.admin-options { margin: 8px 0 0; padding-left: 19px; color: #bfd0df; }
.admin-options li { margin: 4px 0; }
.admin-options .chosen { color: #f09595; }
.admin-options .correct { color: #9cdeae; }
.admin-options .chosen.correct { color: #9cdeae; }
footer { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 28px; }
footer a { color: #8fa6ba; font-size: .82rem; text-decoration: none; }
@media (max-width: 620px) { .shell { width: min(100% - 20px, 820px); padding-top: 30px; } .exam-panel, .result, .admin, #id-panel { padding: 17px; } .prompt { font-size: 1rem; } .stat-grid { grid-template-columns: 1fr; } table { font-size: .8rem; } th, td { padding: 9px 5px; } }