:root { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #202d38; background: #f1f4f5; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,430px); background: #f2f6f6; }
.login-identity { background: #143f50; color: white; padding: 11vh 9%; display: flex; flex-direction: column; justify-content: space-between; }
.brand-small { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.login-identity h1 { font-size: 38px; line-height: 1.35; margin: 0 0 18px; }
.login-identity p { color: #c2dcdd; margin: 0; font-size: 16px; }
.identity-rule { width: 56px; height: 4px; background: #eeaa52; margin-bottom: 26px; }
.login-form-wrap { align-self: center; padding: 42px; }
.login-form-wrap h2 { font-size: 25px; margin: 0 0 8px; }
.muted { color: #71808a; font-size: 14px; }
.login-form { margin-top: 34px; display: grid; gap: 17px; }
.login-form label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.login-form input { padding: 12px; border: 1px solid #bfccd0; border-radius: 4px; background: white; outline-color: #2078bf; }
.primary, .outline, .danger { border: 0; border-radius: 4px; padding: 11px 18px; font-weight: 600; }
.primary { background: #176ea7; color: white; }
.primary:hover { background: #135a89; }
.outline { border: 1px solid #b6c7cf; background: white; color: #2c5263; }
.danger { background: #eb6a18; color: white; }
.error { color: #a93325; min-height: 1.3em; font-size: 14px; }
.shell-header { background: #fff; border-bottom: 1px solid #dce5e7; padding: 0 5%; height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.shell-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; color: white; background: #165e70; border-radius: 4px; }
.header-actions { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.link-button { border: 0; background: transparent; color: #276d86; padding: 6px; }
.dashboard, .review { max-width: 1200px; margin: auto; padding: 40px 24px 70px; }
.dashboard h1, .review h1 { font-size: 26px; margin: 0 0 8px; }
.subject { margin-top: 36px; }
.subject-heading { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #326f7b; padding-bottom: 12px; }
.subject-heading h2 { margin: 0; font-size: 20px; }
.papers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.paper { text-align: left; min-height: 135px; padding: 19px; background: #fff; border: 1px solid #d9e2e3; border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }
.paper:hover:not(:disabled) { border-color: #277d8e; }
.paper-title { font-weight: 700; color: #233d47; font-size: 16px; }
.paper-status { margin-top: auto; color: #65777e; font-size: 14px; }
.paper-score { font-size: 21px; color: #145e73; font-weight: 700; }
.exam { height: 100dvh; min-height: 420px; display: flex; flex-direction: column; overflow: hidden; background: #eaf6da; }
.exam-header { background: #247bc1; color: white; min-height: 86px; display: grid; grid-template-columns: 230px minmax(0,1fr) 195px auto; align-items: center; padding: 0 20px 0 0; gap: 10px; }
.exam-header h1 { font-family: SimSun, serif; font-size: 18px; line-height: 1.35; margin: 0; }
.candidate { font-family: SimSun, serif; font-size: 14px; display: flex; align-items: center; min-width: 0; height: 86px; }
.candidate-avatar { width: 65px; height: 86px; position: relative; background: #e5e5e5; flex: none; overflow: hidden; margin-right: 10px; }
.candidate-avatar::before { content: ""; position: absolute; width: 39px; height: 42px; border-radius: 50%; top: 15px; left: 13px; background: #fafafa; }
.candidate-avatar::after { content: ""; position: absolute; width: 61px; height: 43px; border-radius: 50% 50% 0 0; top: 50px; left: 2px; background: #fafafa; }
.candidate-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-meta { display: grid; gap: 5px; font: 700 17px SimSun, serif; white-space: nowrap; }
.clock { font-weight: 700; white-space: nowrap; font-family: monospace; font-size: 17px; }
.exam-header .danger { font: 700 20px SimSun, serif; padding: 11px 12px; border-radius: 4px; }
.exam-header-actions { display: flex; align-items: center; gap: 6px; }
.exam-pause { border: 1px solid #c6e5f7; background: transparent; color: white; border-radius: 4px; padding: 10px; white-space: nowrap; }
.pause-screen { background: #eaf6da; }
.pause-header { background: #247bc1; color: white; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; }
.pause-cover { flex: 1; display: grid; place-items: center; padding: 24px; }
.pause-panel { width: min(100%, 420px); padding: 30px; background: white; border: 1px solid #cadcd1; border-radius: 4px; text-align: center; }
.pause-panel h1 { font-size: 22px; margin: 0 0 12px; }
.pause-panel p { color: #52656d; line-height: 1.7; }
.pause-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.exam-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0,1fr); }
.exam-layout.collapsed { grid-template-columns: minmax(0,1fr); }
.exam-nav { overflow: auto; padding: 12px 9px; border-right: 1px solid #d4e5ca; font-size: 13px; }
.progress { margin-bottom: 14px; display: flex; align-items: center; gap: 3px; white-space: nowrap; font-family: SimSun, serif; }
.progress-meter { height: 22px; position: relative; width: 121px; border: 1px solid #38a63f; background: #eaf6da; }
.progress-fill { position: absolute; inset: 0 auto 0 0; background: #a3dba1; }
.progress-label { position: relative; display: block; text-align: center; font-size: 12px; line-height: 20px; }
.nav-heading { color: #1b83c7; margin: 15px 0 8px; }
.number-grid { display: grid; grid-template-columns: repeat(5, 29px); gap: 12px 8px; }
.number { width: 29px; height: 29px; min-width: 0; padding: 0; background: white; color: #1474bb; border: 1px solid #2089d1; font: 12px SimSun, serif; }
.number.answered { background: #277fc5; color: white; }
.number.current { background: #ef741d; color: white; border-color: #ef741d; }
.number.marked { box-shadow: inset 0 0 0 2px #ef9c31; }
.exam-content { min-height: 0; display: flex; flex-direction: column; }
.instructions { border-bottom: 1px solid #d5dfc9; padding: 6px; font: 14px SimSun, serif; }
.question-scroll { overflow: auto; flex: 1; padding: 0 20px 30px 0; color: #111; font: 19px/1.8 SimSun, serif; }
.question-line { display: flex; gap: 20px; align-items: flex-start; }
.question-number { background: #a9cce9; font: 14px SimSun, serif; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.question-body { padding-top: 13px; }
.question-body { min-width: 0; max-width: 1050px; }
.case-area { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.case-material { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid #d5dfc9; }
.case-toolbar { min-height: 43px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 9px; padding: 5px 10px; }
.case-toolbar button { border: 0; background: #e4e7e7; color: #1687c9; font: 14px SimSun, serif; padding: 6px; white-space: nowrap; }
.case-material-scroll { overflow: auto; min-height: 0; flex: 1; padding: 10px 12px; color: #111; font: 19px/2.1 SimSun, serif; }
.case-material-scroll p { text-indent: 2em; }
.case-material-scroll mark { background: #fff18c; color: inherit; }
.case-area > .question-scroll { min-width: 0; min-height: 0; }
.case-area.rows { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(100px, 40%) minmax(0,1fr); }
.case-area.rows .case-material { border-right: 0; border-bottom: 1px solid #d5dfc9; }
.question-body p, .rich p { margin: 0 0 .5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.options { margin: 21px 0 0 12px; display: grid; gap: 6px; }
.option { display: flex; align-items: baseline; gap: 10px; }
.option-letter { flex: none; }
.option .rich { min-width: 0; }
.option .rich p:last-child { margin-bottom: 0; }
.rich img { max-width: 100%; height: auto; vertical-align: middle; }
.rich table { border-collapse: collapse; max-width: 100%; font-size: .9em; margin: 10px 0; }
.rich td, .rich th { border: 1px solid #85958a; padding: 5px 8px; }
.answer-strip { background: #50596c; color: white; min-height: 45px; padding: 0 12px; font: 14px SimSun, serif; display: flex; align-items: center; gap: 25px; }
.answer-prompt { white-space: nowrap; font-size: 15px; }
.answer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; }
.answer-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 38px; min-width: 40px; }
.answer-choice input { margin: 0; width: 13px; height: 13px; accent-color: #2078bf; }
.answer-candidate { margin-left: 40px; color: #ddd; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-status { margin-left: auto; color: #dce2ea; font-size: 12px; white-space: nowrap; }
.exam-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 33px 7px 17px; }
.action-group { display: flex; align-items: center; gap: 20px; }
.exam-actions .outline, .exam-actions .primary { width: 137px; height: 46px; font: 20px SimSun, serif; border: 1px solid #2187d0; }
.exam-actions .outline { color: #448dcc; background: #fff; }
.exam-actions .primary { background: #2180c5; }
.sidebar-toggle { border: 0; background: #2180c5; color: white; width: 15px; height: 46px; padding: 0; font: 28px SimSun, serif; }
.mark-button { color: #f4771b; background: white; border: 1px solid #f4771b; border-radius: 4px; width: 97px; height: 33px; padding: 0; white-space: nowrap; font: 14px SimSun, serif; }
.exam-settings { position: relative; }
.settings-button { border: 0; border-radius: 4px; background: #2180c5; color: white; width: 56px; height: 46px; font-size: 27px; line-height: 1; }
.settings-menu { position: absolute; right: 0; bottom: 52px; z-index: 3; width: 190px; background: #fff; border: 1px solid #9fb0bd; box-shadow: 0 3px 12px #0003; padding: 5px 0; }
.settings-menu button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 8px 12px; font-size: 13px; color: #344b59; }
.settings-menu button:hover, .settings-menu button.selected { background: #dceef9; color: #176aa5; }
.settings-separator { border-top: 1px solid #dce4e8; margin: 4px 0; }
.review-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.scoreband { margin-top: 28px; background: #fff; border-left: 4px solid #2b8a77; padding: 22px; display: flex; gap: 30px; align-items: center; }
.score-large { color: #176e69; font-size: 40px; font-weight: 700; white-space: nowrap; }
.stats { display: flex; flex-wrap: wrap; gap: 12px 30px; color: #536870; font-size: 14px; }
.filters { margin: 28px 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { border: 1px solid #cbd8db; background: #fff; padding: 8px 14px; border-radius: 3px; }
.filters button.active { background: #215f70; color: white; border-color: #215f70; }
.review-question { border-top: 1px solid #d6e1e2; padding: 24px 0; line-height: 1.7; }
.review-question h3 { font-size: 17px; margin: 0 0 12px; }
.review-options { margin: 12px 0; display: grid; gap: 4px; }
.answer-line { font-size: 14px; color: #415963; }
.answer-line strong { color: #176d66; }
.analysis { background: #e9f1ef; border-left: 3px solid #7dab9d; padding: 12px 16px; margin-top: 12px; }
.analysis-title { font-size: 13px; font-weight: 700; color: #356c62; margin-bottom: 5px; }
.modal-backdrop { position: fixed; inset: 0; background: #132c34a8; display: grid; place-items: center; padding: 20px; z-index: 5; }
.modal { background: white; border-radius: 5px; max-width: 460px; width: 100%; padding: 26px; }
.modal h2 { font-size: 20px; margin: 0 0 12px; }
.modal p { color: #52656d; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #243e46; color: white; padding: 10px 18px; border-radius: 4px; display: none; z-index: 8; max-width: 90vw; }
@media (max-width: 760px) {
 .login-shell { grid-template-columns: 1fr; }
 .login-identity { min-height: 260px; padding: 32px 25px; }
 .login-identity h1 { font-size: 28px; }
 .login-form-wrap { padding: 32px 25px; align-self: start; }
 .papers { grid-template-columns: 1fr 1fr; }
 .exam-header { grid-template-columns: minmax(0,1fr) auto; min-height: 80px; gap: 6px 12px; padding: 10px 12px; }
 .exam-header h1 { font-size: 15px; }
 .candidate { display: none; }
 .exam-meta { font-size: 12px; }
 .exam-meta > span:first-child { display: none; }
 .exam-header-actions { grid-column: 2; grid-row: 1 / 3; flex-wrap: wrap; justify-content: flex-end; max-width: 145px; }
 .exam-header .danger { font-size: 14px; padding: 7px 10px; }
 .exam-pause { font-size: 12px; padding: 6px; }
 .clock { font-size: 14px; }
 .exam-layout { grid-template-columns: 112px minmax(0,1fr); }
 .number-grid { grid-template-columns: repeat(3, 24px); gap: 5px; }
 .number { width: 24px; height: 24px; }
 .exam-nav { padding: 8px 5px; }
 .progress { white-space: normal; display: block; }
 .progress-meter { width: 100%; }
 .question-scroll { padding: 0 10px 14px 0; font-size: 17px; }
 .question-line { gap: 8px; }
 .question-number { width: 30px; height: 34px; }
 .question-body { padding-top: 7px; }
 .case-area { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(120px, 40%) minmax(0,1fr); }
 .case-material { border-right: 0; border-bottom: 1px solid #d5dfc9; }
 .case-toolbar { gap: 2px; padding: 3px; }
 .case-toolbar button { font-size: 12px; padding: 5px 3px; }
 .case-material-scroll { padding: 5px 8px; font-size: 16px; line-height: 1.7; }
 .case-area.rows { grid-template-rows: minmax(120px, 40%) minmax(0,1fr); }
 .answer-strip { min-height: 45px; padding: 3px 7px; gap: 5px; flex-wrap: wrap; }
 .answer-prompt { font-size: 12px; }
 .answer-controls { gap: 3px; flex-wrap: nowrap; }
 .answer-choice { min-width: 27px; gap: 3px; font-size: 12px; }
 .answer-candidate { display: none; }
 .save-status { flex-basis: 100%; margin-left: 0; text-align: right; }
 .exam-actions { padding: 7px 5px; flex-wrap: nowrap; gap: 3px; }
 .action-group { gap: 4px; }
 .exam-actions .outline, .exam-actions .primary { width: 55px; height: 38px; padding: 0; font-size: 14px; white-space: nowrap; }
 .sidebar-toggle { height: 38px; width: 13px; }
 .mark-button { width: 61px; }
 .settings-button { width: 34px; height: 38px; font-size: 22px; }
 .scoreband { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 420px) { .papers { grid-template-columns: 1fr; } .header-actions { gap: 4px; } }
@media (max-width: 400px) {
 .exam-layout { grid-template-columns: 84px minmax(0,1fr); }
 .exam-layout.collapsed { grid-template-columns: minmax(0,1fr); }
 .number-grid { grid-template-columns: repeat(2, 24px); }
 .exam-actions .outline, .exam-actions .primary { width: 51px; }
 .mark-button { width: 58px; }
}