/* ═══════════════════════════════════════════════════════
   SAT-Style Quiz Template — Shared CSS
   用法：在 HTML 引入 <link rel="stylesheet" href="/common/sat-quiz.css">
   ═══════════════════════════════════════════════════════ */

/* ═══ Reset & Base ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Noto Sans TC','Segoe UI','Helvetica Neue',sans-serif;
  background:#FAFAF8; color:#1A1A18; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ═══ SAT Dark Toolbar ═══ */
.sat-toolbar { position:sticky; top:0; z-index:200; display:flex; align-items:center;
  justify-content:space-between; padding:.5rem 1rem; background:#1a1a2e; color:#fff;
  font-size:.82rem; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.sat-toolbar .section-info { display:flex; align-items:center; gap:.6rem; }
.sat-toolbar .section-label { font-weight:700; font-size:.9rem; letter-spacing:.02em; }
.sat-toolbar .section-sub { color:rgba(255,255,255,.6); font-size:.75rem; }
.sat-toolbar .toolbar-center { display:flex; align-items:center; gap:1rem; }
.sat-toolbar .toolbar-right { display:flex; align-items:center; gap:.75rem; }

.timer-box { display:flex; align-items:center; gap:.4rem; padding:.3rem .7rem;
  background:rgba(255,255,255,.1); border-radius:6px; font-variant-numeric:tabular-nums; }
.timer-box .timer-icon { font-size:.9rem; }
.timer-box .timer-val { font-weight:700; font-size:.95rem; letter-spacing:.05em; }
.timer-box.warning { background:rgba(239,68,68,.3); animation:pulse-warn 1s infinite; }
@keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:.7} }

.hide-timer-btn { background:none; border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.7);
  font-size:.7rem; padding:.2rem .5rem; border-radius:4px; cursor:pointer; font-family:inherit; }
.hide-timer-btn:hover { background:rgba(255,255,255,.1); }

.quit-btn { background:none; border:1.5px solid #d1d5db; color:#94a3b8;
  font-size:.78rem; padding:.4rem .8rem; border-radius:6px; cursor:pointer;
  font-family:inherit; transition:all .15s; white-space:nowrap; }
.quit-btn:hover { background:rgba(239,68,68,.08); border-color:#ef4444; color:#ef4444; }

/* ═══ Directions Banner ═══ */
.directions-bar { background:#e8f0fe; border-bottom:1px solid #c5d5ea; padding:.5rem 1.5rem;
  font-size:.78rem; color:#3a5a8c; display:flex; align-items:center; gap:.5rem; }
.directions-bar .dir-icon { font-weight:700; }

/* ═══ Main Content ═══ */
.sat-main { max-width:800px; margin:0 auto; padding:2rem 1.5rem 7rem; min-height:calc(100vh - 120px); }

/* ═══ Question Card ═══ */
.q-container { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.08);
  padding:2rem 2rem 1.5rem; margin-bottom:1rem; }
.q-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .6rem; margin-bottom:1.2rem; }
.q-num { font-size:.85rem; font-weight:700; color:#64748b; }
.q-meta-extra { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; flex:1; }
.q-flag-btn { margin-left:auto; }
.q-flag-btn { display:flex; align-items:center; gap:.3rem; background:none; border:1.5px solid #d1d5db;
  padding:.35rem .7rem; border-radius:6px; cursor:pointer; font-size:.78rem; color:#64748b;
  font-family:inherit; transition:all .15s; }
.q-flag-btn:hover { border-color:#f59e0b; color:#f59e0b; }
.q-flag-btn.flagged { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,.08); }
.q-flag-btn .flag-icon { font-size:.9rem; }

.q-text { font-size:1.05rem; line-height:1.75; margin-bottom:1.5rem; color:#1a1a2e; }
.q-text .blank { display:inline-block; min-width:6rem; border-bottom:2px solid #3b82f6;
  text-align:center; margin:0 .15rem; }

/* ═══ Answer Options (SAT Bubble Style) ═══ */
.options-list { display:flex; flex-direction:column; gap:.6rem; }
.opt-row { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem;
  border:2px solid #e2e8f0; border-radius:10px; cursor:pointer; transition:all .15s;
  position:relative; }
.opt-row:hover { border-color:#93c5fd; background:#f0f7ff; }
.opt-row.selected { border-color:#3b82f6; background:#eff6ff; }
.opt-row.correct { border-color:#22c55e; background:#f0fdf4; }
.opt-row.wrong { border-color:#ef4444; background:#fef2f2; }
.opt-row.eliminated { opacity:.35; text-decoration:line-through; border-style:dashed; }
.opt-row.disabled { pointer-events:none; }

.opt-bubble { width:2rem; height:2rem; border-radius:50%; border:2px solid #94a3b8;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  color:#64748b; flex-shrink:0; transition:all .15s; margin-top:.05rem; }
.opt-row.selected .opt-bubble { background:#3b82f6; border-color:#3b82f6; color:#fff; }
.opt-row.correct .opt-bubble { background:#22c55e; border-color:#22c55e; color:#fff; }
.opt-row.wrong .opt-bubble { background:#ef4444; border-color:#ef4444; color:#fff; }

.opt-text { font-size:.95rem; line-height:1.5; flex:1; padding-top:.15rem; }

.opt-elim { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); width:1.4rem; height:1.4rem;
  border-radius:50%; border:1px solid #d1d5db; display:flex; align-items:center; justify-content:center;
  font-size:.65rem; color:#94a3b8; cursor:pointer; background:#fff; opacity:0; transition:opacity .15s; }
.opt-row:hover .opt-elim { opacity:1; }
.opt-elim:hover { border-color:#ef4444; color:#ef4444; background:#fef2f2; }

/* ═══ Explanation ═══ */
.explanation-box { margin-top:1rem; padding:1rem 1.2rem; background:#f8fafc; border:1px solid #e2e8f0;
  border-radius:8px; font-size:.88rem; line-height:1.7; color:#334155; white-space:pre-wrap;
  display:none; }
.explanation-box.show { display:block; }
.explanation-box .exp-icon { font-weight:700; display:block; margin-bottom:.3rem; }
.explanation-box .exp-icon.correct { color:#22c55e; }
.explanation-box .exp-icon.wrong { color:#ef4444; }

/* ═══ Bottom Navigation Bar ═══ */
.sat-bottombar { position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:#1a1a2e; padding:.5rem 1rem; box-shadow:0 -2px 8px rgba(0,0,0,.3); }
.bottom-inner { max-width:800px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:.5rem; }

.nav-btn { padding:.5rem 1.2rem; border:none; border-radius:6px; font-size:.85rem;
  font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.nav-btn.primary { background:#3b82f6; color:#fff; }
.nav-btn.primary:hover { background:#2563eb; }
.nav-btn.primary:disabled { background:#475569; cursor:default; }
.nav-btn.secondary { background:rgba(255,255,255,.1); color:#fff; }
.nav-btn.secondary:hover { background:rgba(255,255,255,.15); }
.nav-btn.secondary:disabled { opacity:.4; cursor:default; }
.nav-btn.finish { background:#22c55e; color:#fff; }
.nav-btn.finish:hover { background:#16a34a; }

/* Question Map Toggle */
.qmap-toggle { background:none; border:1.5px solid rgba(255,255,255,.3); color:#fff;
  padding:.4rem .8rem; border-radius:6px; font-size:.78rem; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:.3rem; }
.qmap-toggle:hover { background:rgba(255,255,255,.1); }

/* ═══ Question Map Panel ═══ */
.qmap-overlay { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.5);
  display:none; align-items:flex-end; justify-content:center; }
.qmap-overlay.show { display:flex; }
.qmap-panel { background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:600px;
  max-height:60vh; padding:1.5rem; overflow-y:auto; }
.qmap-title { font-size:1rem; font-weight:700; margin-bottom:.75rem; display:flex;
  align-items:center; justify-content:space-between; }
.qmap-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:#64748b; padding:.3rem; }
.qmap-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(2.5rem, 1fr)); gap:.4rem; }
.qmap-cell { width:2.5rem; height:2.5rem; border-radius:6px; border:2px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .15s; color:#64748b; background:#fff; position:relative; }
.qmap-cell:hover { border-color:#3b82f6; }
.qmap-cell.current { border-color:#3b82f6; background:#eff6ff; color:#3b82f6; }
.qmap-cell.answered { background:#3b82f6; border-color:#3b82f6; color:#fff; }
.qmap-cell.flagged-cell::after { content:'🚩'; position:absolute; font-size:.5rem; top:-.1rem; right:-.1rem; }
.qmap-cell.flagged-cell { border-color:#f59e0b; }
.qmap-cell.answered.flagged-cell { background:#f59e0b; border-color:#f59e0b; }
.qmap-legend { display:flex; gap:1rem; margin-top:.75rem; font-size:.72rem; color:#64748b; }
.qmap-legend span { display:flex; align-items:center; gap:.3rem; }
.legend-dot { width:.7rem; height:.7rem; border-radius:3px; }

/* ═══ Start Screen ═══ */
.start-screen { text-align:center; padding:3rem 1.5rem; }
.start-screen .sat-logo { font-size:3rem; margin-bottom:1rem; }
.start-screen h1 { font-size:1.6rem; font-weight:700; color:#1a1a2e; margin-bottom:.5rem; }
.start-screen .start-sub { color:#64748b; font-size:.95rem; margin-bottom:2rem; }
.start-screen .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
  max-width:360px; margin:0 auto 2rem; text-align:left; }
.info-item { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:.75rem 1rem; }
.info-item .info-label { font-size:.72rem; color:#94a3b8; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; }
.info-item .info-val { font-size:1.05rem; font-weight:700; color:#1a1a2e; }
.start-btn { padding:.8rem 2.5rem; background:#3b82f6; color:#fff; border:none; border-radius:8px;
  font-size:1.05rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
.start-btn:hover { background:#2563eb; }

/* Unit picker */
.unit-picker { display:flex; gap:.5rem; justify-content:center; margin-bottom:1.5rem; flex-wrap:wrap; }
.unit-chip { padding:.5rem 1rem; border:2px solid #e2e8f0; border-radius:8px; background:#fff;
  font-size:.88rem; font-weight:600; cursor:pointer; transition:all .15s; font-family:inherit; color:#64748b; }
.unit-chip:hover { border-color:#93c5fd; }
.unit-chip.active { border-color:#3b82f6; background:#eff6ff; color:#3b82f6; }

/* ═══ Results Screen ═══ */
.results-screen { text-align:center; padding:2rem 1.5rem; }
.results-screen .score-circle { width:140px; height:140px; border-radius:50%; margin:0 auto 1.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:6px solid; }
.score-circle.great { border-color:#22c55e; color:#22c55e; }
.score-circle.good { border-color:#3b82f6; color:#3b82f6; }
.score-circle.low { border-color:#ef4444; color:#ef4444; }
.score-circle .score-num { font-size:2.2rem; font-weight:700; line-height:1; }
.score-circle .score-pct { font-size:.85rem; font-weight:600; }
.results-screen .result-msg { font-size:1.1rem; font-weight:600; color:#1a1a2e; margin-bottom:.3rem; }
.results-screen .result-detail { font-size:.88rem; color:#64748b; margin-bottom:1.5rem; }
.result-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }

.wrong-review { text-align:left; margin-top:1rem; }
.wrong-review h3 { font-size:.9rem; color:#ef4444; margin-bottom:.75rem; font-weight:700; }
.wr-item { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:.75rem 1rem;
  margin-bottom:.5rem; font-size:.88rem; }
.wr-item .wr-q { font-weight:600; margin-bottom:.3rem; color:#1a1a2e; }
.wr-item .wr-yours { color:#ef4444; }
.wr-item .wr-correct { color:#22c55e; font-weight:600; }

/* ═══ Desktop: Split Layout (769px+) ═══ */
@media(min-width:769px) {
  .sat-main { max-width:1100px; }
  .q-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0 2rem;
    padding: 2rem 2.5rem;
  }
  .q-meta {
    grid-column: 1 / -1;
  }
  .q-text {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid #e2e8f0;
    padding-right: 2rem;
    margin-bottom: 0;
    overflow-y: auto;
    max-height: 60vh;
  }
  .options-list {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .explanation-box {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ═══ Responsive: Tablet (768px) ═══ */
@media(max-width:768px) {
  .sat-main { max-width:100%; padding:1.5rem 1.2rem 7rem; }
  .q-container { padding:1.5rem 1.2rem 1.2rem; }
  .q-text { font-size:1rem; }
  .opt-text { font-size:.9rem; }
  .start-screen h1 { font-size:1.4rem; }
  .qmap-panel { max-width:100%; border-radius:12px 12px 0 0; }
}

/* ═══ Responsive: Phone (480px) ═══ */
@media(max-width:480px) {
  .sat-main { padding:.8rem .6rem 6.5rem; }
  .q-container { padding:1rem .8rem .8rem; border-radius:8px; }

  .sat-toolbar { padding:.35rem .5rem; font-size:.72rem; gap:.3rem; }
  .sat-toolbar .section-info { gap:.3rem; }
  .sat-toolbar .section-label { font-size:.78rem; }
  .sat-toolbar .section-sub { display:none; }
  .timer-box { padding:.25rem .5rem; }
  .timer-box .timer-val { font-size:.8rem; }
  .hide-timer-btn { font-size:.65rem; padding:.15rem .35rem; }

  .directions-bar { padding:.4rem .8rem; font-size:.72rem; }

  .q-meta { margin-bottom:.8rem; }
  .q-num { font-size:.78rem; }
  .q-flag-btn { padding:.25rem .5rem; font-size:.72rem; }
  .q-text { font-size:.92rem; line-height:1.65; margin-bottom:1rem; }
  .q-text .blank { min-width:4rem; }

  .opt-row { padding:.7rem .8rem; gap:.6rem; border-radius:8px; }
  .opt-bubble { width:1.8rem; height:1.8rem; font-size:.78rem; }
  .opt-text { font-size:.88rem; }
  .opt-elim { width:1.6rem; height:1.6rem; font-size:.6rem; opacity:1; }

  .explanation-box { padding:.8rem; font-size:.82rem; }

  .sat-bottombar { padding:.4rem .5rem; }
  .bottom-inner { gap:.3rem; }
  .nav-btn { padding:.45rem .8rem; font-size:.8rem; }
  .qmap-toggle { padding:.35rem .6rem; font-size:.72rem; }

  .qmap-panel { padding:1rem; }
  .qmap-grid { grid-template-columns:repeat(auto-fill, minmax(2.2rem, 1fr)); gap:.3rem; }
  .qmap-cell { width:2.2rem; height:2.2rem; font-size:.75rem; border-radius:5px; }

  .start-screen { padding:2rem .8rem; }
  .start-screen .sat-logo { font-size:2.5rem; }
  .start-screen h1 { font-size:1.2rem; }
  .start-screen .start-sub { font-size:.85rem; margin-bottom:1.2rem; }
  .unit-picker { gap:.35rem; }
  .unit-chip { padding:.4rem .7rem; font-size:.8rem; }
  .info-grid { grid-template-columns:1fr 1fr; gap:.5rem; }
  .info-item { padding:.5rem .7rem; }
  .info-item .info-label { font-size:.65rem; }
  .info-item .info-val { font-size:.9rem; }
  .start-btn { padding:.7rem 2rem; font-size:.95rem; }

  .results-screen { padding:1.5rem .8rem; }
  .score-circle { width:110px; height:110px; border-width:5px; }
  .score-circle .score-num { font-size:1.8rem; }
  .score-circle .score-pct { font-size:.78rem; }
  .results-screen .result-msg { font-size:.95rem; }
  .results-screen .result-detail { font-size:.82rem; }
  .result-actions { gap:.4rem; }
  .result-actions .nav-btn { padding:.4rem .8rem; font-size:.8rem; }
  .wr-item { padding:.6rem .75rem; font-size:.82rem; }
}

/* ═══ Responsive: Very small (360px) ═══ */
@media(max-width:360px) {
  .sat-toolbar .toolbar-center { gap:.4rem; }
  .hide-timer-btn { display:none; }
  .opt-row { padding:.6rem .6rem; }
  .info-grid { grid-template-columns:1fr !important; }
  .result-actions { flex-direction:column; }
  .result-actions .nav-btn { width:100%; justify-content:center; }
}

/* ═══ Safe area (notch phones) ═══ */
@supports(padding: env(safe-area-inset-bottom)) {
  .sat-bottombar { padding-bottom:calc(.5rem + env(safe-area-inset-bottom)); }
  .sat-toolbar { padding-top:calc(.5rem + env(safe-area-inset-top)); }
}

/* ═══ Landscape phone ═══ */
@media(max-height:500px) and (orientation:landscape) {
  .sat-main { padding-top:.5rem; padding-bottom:5rem; }
  .q-container { padding:.8rem; }
  .q-text { font-size:.88rem; margin-bottom:.8rem; }
  .opt-row { padding:.5rem .7rem; }
  .start-screen .sat-logo { font-size:2rem; margin-bottom:.5rem; }
  .start-screen h1 { font-size:1.1rem; }
}