:root { --blue:#214d74; --blue-dark:#163650; --blue-soft:#e8f2f8; --amber:#a75f10; }
.junior-body { background:#f5f8fa; }
.junior-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem clamp(1rem,4vw,3rem); background:rgba(255,255,255,.96); border-bottom:1px solid rgba(33,77,116,.12); backdrop-filter:blur(14px); }
.junior-mark { background:var(--blue); }
.junior-header-actions { display:flex; align-items:center; gap:1rem; }
.junior-home { text-decoration:none; }
.junior-main { width:min(1180px,calc(100% - 2rem)); margin:0 auto; padding:clamp(2rem,5vw,4rem) 0 5rem; }
.junior-hero { max-width:800px; margin-bottom:2rem; }
.junior-hero h1,.practice-shell h1 { margin:.2rem 0 .7rem; font-family:"Noto Serif TC","PMingLiU",serif; font-size:clamp(2.1rem,5vw,4rem); line-height:1.2; }
.junior-hero > p:last-child,.muted { color:var(--muted); }
.set-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.set-card { display:flex; flex-direction:column; min-height:250px; padding:1.6rem; background:white; border:1px solid rgba(33,77,116,.14); border-radius:22px; box-shadow:0 14px 40px rgba(25,55,77,.08); }
.set-card .set-subject { display:inline-flex; align-self:flex-start; padding:.2rem .7rem; color:var(--blue); background:var(--blue-soft); border-radius:999px; font-weight:800; font-size:.85rem; }
.set-card h2 { margin:.8rem 0 .5rem; font-size:1.55rem; line-height:1.35; }
.set-card p { color:var(--muted); margin:.2rem 0; }
.set-card button { margin-top:auto; min-height:52px; border:0; border-radius:13px; background:var(--blue); color:white; font:inherit; font-weight:800; cursor:pointer; }
.set-card button:hover { background:var(--blue-dark); }
.practice-shell { max-width:960px; margin:0 auto; }
.text-button { padding:.5rem 0; color:var(--blue); background:none; border:0; font:inherit; font-weight:800; cursor:pointer; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.mode-grid button { display:flex; flex-direction:column; gap:.3rem; min-height:135px; padding:1.4rem; text-align:left; background:white; border:1px solid rgba(33,77,116,.16); border-radius:18px; cursor:pointer; box-shadow:0 10px 26px rgba(25,55,77,.06); }
.mode-grid button:hover { border-color:var(--blue); transform:translateY(-2px); }
.mode-grid strong { font-size:1.25rem; color:var(--blue-dark); }
.mode-grid span { color:var(--muted); }
.quiz-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:1.2rem; align-items:start; }
.quiz-side,.quiz-card,.result-card { background:white; border:1px solid rgba(33,77,116,.13); border-radius:22px; box-shadow:0 14px 40px rgba(25,55,77,.07); }
.quiz-side { position:sticky; top:98px; padding:1.2rem; }
.quiz-stats { display:flex; justify-content:space-between; gap:.6rem; margin:.8rem 0 1rem; }
.quiz-stats span { color:var(--muted); font-size:.9rem; }
.question-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; max-height:360px; overflow:auto; }
.question-nav button { aspect-ratio:1; border:1px solid rgba(33,77,116,.18); border-radius:9px; background:#f4f7f9; cursor:pointer; font-weight:800; }
.question-nav button.current { background:var(--blue); color:white; }
.question-nav button.answered { border-color:#4b8d63; background:#eaf5ed; }
.question-nav button.current.answered { background:var(--blue); }
.submit-button { justify-content:center; width:100%; margin-top:1rem; border:0; cursor:pointer; }
.quiz-card { min-height:520px; padding:clamp(1.3rem,4vw,2.4rem); }
.question-heading { display:flex; justify-content:space-between; gap:1rem; color:var(--blue); font-weight:900; }
.question-tags { color:var(--muted); font-size:.82rem; font-weight:600; text-align:right; }
.question-prompt { margin:1.5rem 0; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.75; font-weight:700; white-space:normal; }
.choice-list { display:grid; gap:.75rem; }
.choice { display:grid; grid-template-columns:42px 1fr; gap:.8rem; align-items:center; width:100%; padding:.85rem 1rem; text-align:left; background:#fbfcfd; border:2px solid #dbe4e9; border-radius:14px; cursor:pointer; font:inherit; }
.choice .letter { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e8eef2; font-weight:900; }
.choice.selected { border-color:var(--blue); background:#edf5fa; }
.choice.correct { border-color:#31834e; background:#ecf8f0; }
.choice.wrong { border-color:#b2473a; background:#fff0ee; }
.choice:disabled { cursor:default; color:inherit; }
.explanation-box { margin-top:1.2rem; padding:1.1rem 1.2rem; background:#fff8e8; border-left:5px solid #c5842b; border-radius:12px; }
.explanation-box strong { color:#815414; }
.quiz-actions { display:flex; justify-content:space-between; gap:.8rem; margin-top:2rem; }
.quiz-actions button,.secondary-button { min-height:48px; padding:.65rem 1.1rem; border:1px solid rgba(33,77,116,.25); border-radius:12px; background:white; color:var(--blue-dark); font:inherit; font-weight:800; cursor:pointer; }
.result-card { max-width:720px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem); text-align:center; }
.score-ring { display:grid; place-items:center; width:190px; height:190px; margin:1.2rem auto; border:12px solid #dbe9f1; border-radius:50%; background:#f6fbfd; }
.score-ring strong { font-size:2.7rem; color:var(--blue); line-height:1; }
.score-ring span { color:var(--muted); }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:1.4rem; }
.result-actions .primary-button { border:0; cursor:pointer; }
.page-message { position:fixed; inset:auto 1rem 1rem auto; z-index:50; max-width:430px; padding:1rem 1.2rem; color:white; background:#7a3029; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.18); }
@media (max-width:820px) { .quiz-layout{grid-template-columns:1fr}.quiz-side{position:static}.question-nav{grid-template-columns:repeat(10,1fr);max-height:none}.submit-button{margin-top:1rem}.quiz-side .text-button{display:none} }
@media (max-width:650px) { .junior-header #student-name{display:none}.set-grid,.mode-grid{grid-template-columns:1fr}.junior-main{width:min(100% - 1rem,1180px);padding-top:1.2rem}.question-nav{grid-template-columns:repeat(6,1fr)}.quiz-card{padding:1rem;min-height:0}.question-heading{flex-direction:column;gap:.2rem}.question-tags{text-align:left}.choice{grid-template-columns:36px 1fr;padding:.75rem}.choice .letter{width:34px;height:34px}.quiz-actions button{flex:1}.result-actions{flex-direction:column}.result-actions button{width:100%;justify-content:center}.junior-header{padding:.7rem}.junior-header .brand strong{font-size:1.03rem} }