:root { color-scheme: light; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; color: #182033; background: #f3f6fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #dce5ff 0, transparent 34rem), #f3f6fc; }
button { font: inherit; cursor: pointer; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0; }
.eyebrow { color: #4b5fd7; font-size: .82rem; font-weight: 900; letter-spacing: .1em; margin: 0 0 10px; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.35rem); }
.subtitle { color: #63708a; line-height: 1.7; margin: 12px 0 32px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0 22px; }
.stat { background: #fff; border: 1px solid #e0e5f0; border-radius: 16px; padding: 18px; box-shadow: 0 8px 28px #2e3d6610; }
.stat span { display: block; color: #69758d; font-size: .86rem; }
.stat strong { display: block; color: #4357c3; font-size: 1.45rem; margin-top: 5px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.large { padding: 14px 20px; }
.exam-grid, .mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mode-grid { margin-bottom: 28px; }
.exam-card, .mode-card, .panel { background: #fff; border: 1px solid #e0e5f0; border-radius: 16px; box-shadow: 0 8px 28px #2e3d6610; }
.exam-card, .mode-card { padding: 20px; text-align: left; transition: transform .15s, border-color .15s; }
.exam-card:hover, .mode-card:hover { transform: translateY(-2px); border-color: #6878dc; }
.exam-card h2 { font-size: 1.05rem; line-height: 1.55; margin: 0; }
.exam-card p { color: #71809a; font-size: .9rem; margin: 10px 0 16px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-card strong, .mode-card strong { display: block; font-size: 1.05rem; line-height: 1.55; }
.exam-card span, .mode-card span { display: block; color: #71809a; margin-top: 10px; font-size: .9rem; }
.topline { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.back, .secondary, .quiet { background: transparent; color: #4253bd; border: 0; padding: 8px 0; font-weight: 700; }
.secondary { background: #eef0f6; border-radius: 10px; padding: 10px 14px; }
.quiet { color: #64708a; font-size: .88rem; }
.quiet:disabled { color: #aab2c2; cursor: not-allowed; }
.progress-text { color: #59657d; font-weight: 700; }
.bar { height: 8px; background: #e7eaf2; border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.bar > div { height: 100%; background: #586bd7; transition: width .2s; }
.panel { padding: clamp(20px, 4vw, 38px); }
.question-number { color: #5366cf; font-weight: 800; margin: 0 0 12px; }
.question { font-size: clamp(1.14rem, 2.5vw, 1.35rem); font-weight: 700; line-height: 1.75; margin: 0 0 24px; white-space: pre-wrap; }
.choices { display: grid; gap: 11px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px; text-align: left; border: 1px solid #d9dfec; border-radius: 12px; background: #fff; line-height: 1.55; }
.choice:hover { border-color: #8090e7; background: #f8f9ff; }
.choice.selected { border-color: #5266d2; background: #edf0ff; box-shadow: inset 0 0 0 1px #5266d2; }
.letter { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #edf0f7; color: #53627c; font-weight: 800; }
.selected .letter { color: #fff; background: #5266d2; }
.choice.correct { border-color: #44a873; background: #edfbf3; }
.choice.wrong { border-color: #df5d63; background: #fff1f1; }
.choice:disabled { cursor: default; }
.choice.correct .letter { color: #fff; background: #33a86d; }
.choice.wrong .letter { color: #fff; background: #df5d63; }
.feedback { margin: 18px 0 0; padding: 14px; border-radius: 10px; font-weight: 700; line-height: 1.55; }
.feedback.correct { color: #17683e; background: #edfbf3; }
.feedback.wrong { color: #a22f34; background: #fff1f1; }
.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.primary, .nav button { border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 800; }
.primary { background: #5367d6; color: #fff; }
.primary:hover { background: #4357c3; }
.primary:disabled { cursor: not-allowed; background: #aab2cb; }
.nav button { background: #eef0f6; color: #313b55; }
.nav button:disabled { opacity: .45; cursor: not-allowed; }
.jump { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.jump button { width: 32px; height: 32px; padding: 0; border: 1px solid #d8deeb; border-radius: 8px; color: #53617a; background: #fff; }
.jump .answered { background: #e8edff; color: #4052bd; border-color: #c9d2ff; }
.jump .current { outline: 2px solid #5367d6; outline-offset: 1px; }
.submit-row { display: flex; justify-content: flex-end; margin-top: 22px; }
.result { text-align: center; }
.result > h1 { color: #5064d4; font-size: clamp(2.7rem, 9vw, 4.5rem); }
.score { font-size: 1.25rem; color: #5064d4; font-weight: 900; margin: 10px 0; }
.review { margin-top: 28px; text-align: left; display: grid; gap: 10px; }
.review-item { border: 1px solid #e0e4ec; padding: 16px; border-radius: 12px; line-height: 1.55; }
.review-item.correct { border-left: 5px solid #33a86d; }
.review-item.wrong { border-left: 5px solid #df5d63; }
.review-item p { margin: 8px 0 0; color: #59657b; }
.review-item strong { color: #192033; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
@media (max-width: 560px) { .shell { width: min(100% - 24px, 920px); padding: 30px 0; } .stats { grid-template-columns: 1fr; } .panel { padding: 20px; } .nav { flex-wrap: wrap; } .nav button { flex: 1; } .topline { align-items: flex-start; flex-direction: column; } }