* { box-sizing: border-box; }
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f3f6fb; color: #243044; }
header { background: #1f3b66; color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
.user-chip { color: #cfe0ff; font-size: 14px; }
.main { max-width: 1080px; margin: 18px auto; padding: 0 16px; }
.card { background: #fff; border: 1px solid #e2e8f2; border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
label { display: block; font-size: 13px; margin: 8px 0 4px; color: #40506a; }
input, select, button, textarea { font: inherit; }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 8px 10px; border: 1px solid #c8d2e2; border-radius: 7px; background: #fff;
}
button { background: #2e5fa3; color: #fff; border: 0; padding: 8px 15px; border-radius: 7px; cursor: pointer; }
button.secondary { background: #eef2f8; color: #243044; border: 1px solid #d4dce8; }
button.danger { background: #b3403a; }
button.small { padding: 4px 10px; font-size: 13px; }
.tabs { display: flex; gap: 6px; margin: 10px 0 16px; flex-wrap: wrap; }
.tabs button { background: #e7edf7; color: #2b4a7d; }
.tabs button.active { background: #2e5fa3; color: #fff; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.question { border: 1px solid #e3e9f3; border-radius: 8px; padding: 12px 14px; margin: 10px 0; background: #fbfcfe; }
.qhead { font-weight: 600; margin-bottom: 6px; }
.opt { display: block; padding: 5px 4px; }
.opt input { width: auto; margin-right: 7px; }
.notice { padding: 9px 12px; border-radius: 8px; margin: 8px 0; }
.notice.ok { background: #e5f4e9; color: #20613a; }
.notice.err { background: #fde8e8; color: #8b2520; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid #e0e6ef; padding: 7px 9px; text-align: left; vertical-align: top; }
th { background: #eef3fa; }
.toolbar { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
#auth { max-width: 420px; margin: 60px auto; }
.hidden { display: none !important; }
.score { font-size: 30px; color: #20613a; margin: 4px 0 12px; }
.timer { color: #fff; font-size: 15px; background: #173258; padding: 6px 14px; border-radius: 999px; }
.exam-area { max-width: 860px; margin: 18px auto; padding: 0 14px; }
.fixed-bar { position: sticky; top: 0; background: #1f3b66; color: #fff; padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.fixed-bar button { background: #3f7fcb; }
.opt-correct { background: #e5f4e9; }
footer { text-align: center; color: #8b96a9; padding: 24px; font-size: 12px; }