.quiz-body { min-height: 100vh; background: linear-gradient(180deg, #f7f3e8 0%, #fffdf8 45%); }
.quiz-header { position: sticky; }
.quiz-nav { display:flex; gap:.55rem; align-items:center; }
.ghost-button, .text-button { min-height:44px; padding:.55rem .9rem; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.ghost-button:hover, .text-button:hover { background:#edf4e5; }
.quiz-shell { width:min(1120px, calc(100% - 2rem)); margin:0 auto; padding:clamp(2rem,5vw,4.5rem) 0 5rem; }
.view[hidden], .panel[hidden] { display:none !important; }
.centered-panel { min-height:55vh; display:grid; place-items:center; align-content:center; gap:1rem; }
.spinner { width:44px; height:44px; border:4px solid #dbe7d6; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.quiz-intro { max-width:850px; margin-bottom:2rem; }
.quiz-intro h1, .quiz-topbar h1, .result-card h1 { margin:.1rem 0 .7rem; font-family:"Noto Serif TC","PMingLiU",serif; font-size:clamp(2rem,5vw,3.5rem); line-height:1.2; }
.quiz-intro p:last-child { color:var(--muted); }
.quiz-intro.compact { margin-top:1rem; }
.unit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.unit-card { display:flex; flex-direction:column; min-height:220px; padding:1.35rem; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 14px 36px rgba(26,61,48,.09); }
.unit-card.available { background:linear-gradient(145deg,#eef6e8,#deedd2); border-color:rgba(47,104,79,.25); }
.unit-card.disabled { opacity:.7; background:#f3f2ec; }
.unit-number { color:#a64b24; font-weight:900; letter-spacing:.08em; }
.unit-card h2 { margin:.45rem 0 .55rem; font-size:1.35rem; line-height:1.3; }
.unit-card p { margin:0; color:var(--muted); }
.unit-card button { margin-top:auto; min-height:48px; padding:.65rem 1rem; border:0; border-radius:13px; font:inherit; font-weight:900; cursor:pointer; }
.unit-card.available button { color:#fff; background:var(--green); }
.unit-card.available button:hover { background:var(--green-dark); }
.unit-card.disabled button { color:#6c746f; background:#e2e2dc; cursor:not-allowed; }
.station-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.station-card { padding:1.6rem; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.station-card h2 { margin:.2rem 0 .6rem; font-size:1.45rem; }
.station-card p { color:var(--muted); }
.station-card button { width:100%; min-height:52px; margin-top:.7rem; border:0; border-radius:14px; color:#fff; background:var(--ink); font:inherit; font-weight:900; cursor:pointer; }
.quiz-topbar { display:flex; justify-content:space-between; gap:1.2rem; align-items:flex-end; }
.quiz-topbar h1 { font-size:clamp(1.6rem,4vw,2.6rem); }
.progress-stats { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.progress-stats span { padding:.35rem .7rem; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:.9rem; font-weight:800; }
.progress-track { height:9px; margin:1rem 0 1.2rem; overflow:hidden; border-radius:999px; background:#e7e9e3; }
.progress-track span { display:block; height:100%; width:0; background:var(--green); transition:width .25s ease; }
.question-card { padding:clamp(1.25rem,4vw,2.2rem); border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.question-meta { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.difficulty-badge { padding:.2rem .55rem; border-radius:999px; background:#edf4e5; color:var(--green-dark); font-weight:900; }
.question-card h2 { margin:1rem 0 1.2rem; font-size:clamp(1.3rem,3vw,1.8rem); line-height:1.55; white-space:pre-wrap; }
.options-list { display:grid; gap:.75rem; }
.option-button { width:100%; display:flex; align-items:flex-start; gap:.8rem; padding:1rem; text-align:left; border:2px solid #e3e7e1; border-radius:15px; background:#fff; color:var(--ink); font:inherit; cursor:pointer; }
.option-button:hover:not(:disabled), .option-button.selected { border-color:#7da064; background:#f3f8ee; }
.option-button .key { flex:0 0 32px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#eef0ea; font-weight:900; }
.option-button.correct { border-color:#4d8d5a; background:#e8f5e9; }
.option-button.wrong { border-color:#bd4a3e; background:#fff0ed; }
.option-button:disabled { cursor:default; }
.confirm-button, .next-button { width:100%; min-height:54px; margin-top:1.1rem; border:0; border-radius:14px; font:inherit; font-weight:900; cursor:pointer; }
.confirm-button { color:#fff; background:var(--green); }
.confirm-button:disabled { background:#adb8b1; cursor:not-allowed; }
.next-button { color:#fff; background:#a64b24; }
.feedback-box { margin-top:1rem; padding:1rem 1.1rem; border-radius:15px; }
.feedback-box.correct { background:#e9f6e8; border:1px solid #a8cca8; }
.feedback-box.wrong { background:#fff1ed; border:1px solid #e0b3a9; }
.feedback-box h3 { margin:0 0 .45rem; }
.feedback-box p { margin:.35rem 0; }
.feedback-box .wrong-reason { padding-top:.6rem; margin-top:.6rem; border-top:1px solid rgba(0,0,0,.09); }
.result-card { max-width:900px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow); text-align:center; }
.result-numbers { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin:1.5rem 0; }
.result-numbers div { padding:1rem; background:#f3f6ef; border-radius:16px; }
.result-numbers strong { display:block; font-size:2rem; color:var(--green-dark); }
.result-numbers span { color:var(--muted); font-size:.9rem; }
.result-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:1.5rem; }
.result-actions button { min-height:50px; border-radius:13px; font:inherit; font-weight:900; cursor:pointer; }
.primary-action { border:0; color:#fff; background:var(--green); }
.secondary-action { border:1px solid var(--line); color:var(--ink); background:#fff; }
.save-note { color:var(--muted); min-height:1.5rem; }
@media (max-width:900px) { .unit-grid{grid-template-columns:repeat(2,1fr)} .quiz-topbar{align-items:flex-start;flex-direction:column}.progress-stats{justify-content:flex-start} }
@media (max-width:620px) { .quiz-shell{width:min(100% - 1rem,1120px);padding-top:1.2rem}.quiz-header{padding-left:.7rem;padding-right:.7rem}.quiz-nav{gap:.3rem}.ghost-button{padding:.45rem .65rem}.brand small{display:none}.unit-grid,.station-grid,.result-actions{grid-template-columns:1fr}.unit-card{min-height:180px}.result-numbers{grid-template-columns:repeat(2,1fr)}.option-button{padding:.85rem}.question-card{border-radius:18px}.progress-stats span{font-size:.8rem} }
@media (prefers-reduced-motion: reduce) { .spinner{animation:none}.progress-track span{transition:none} }