:root { --ink:#15261e; --muted:#5b6b62; --line:#dfe7e1; --paper:#f7faf7; --card:#fff; --green:#256a4e; --lime:#d6ef9b; --mint:#e8f3ec; --violet:#e8e4f7; --red:#b8544a; --shadow:0 16px 40px rgba(21,38,30,.07); }
[data-theme="dark"] { --ink:#e2ede6; --muted:#8a9f90; --line:#2a3d32; --paper:#0f1c15; --card:#162a1e; --green:#6ec99a; --lime:#3a6b1e; --mint:#1a3324; --violet:#2a2545; --red:#e87c6e; --shadow:0 16px 40px rgba(0,0,0,.25); }
[data-theme="dark"] .site-header { background:#09100b; }
[data-theme="dark"] .hero { background:#0d1a12; }
[data-theme="dark"] .quiz-option:hover, [data-theme="dark"] .quiz-option:has(input:checked) { background:#1a3324; }
[data-theme="dark"] .answer-box { background:#1a2e20; }
[data-theme="dark"] .tip-card { background:#1a3324; border-color:#2a4a35; }
[data-theme="dark"] .flash.success { background:#1a3324; color:#6ec99a; }
[data-theme="dark"] .flash.error { background:#3a1a1a; color:#e87c6e; }
[data-theme="dark"] .flash.info { background:#1a1a3a; color:#8a8ae0; }
[data-theme="dark"] .score-ring { border-color:#3a6b1e; border-left-color:rgba(58,107,30,.25); }
[data-theme="dark"] .result-hero { background:#0d1a12; }
[data-theme="dark"] .wrong-count { background:#3a1a1a; }
[data-theme="dark"] .timer-display { background:#3a1a1a; }
[data-theme="dark"] .reading-strip { background:#1a3324; border-color:#2a4a35; }[data-theme="dark"] .button-danger { background:#3a1a1a; }.merge-list { display:grid; gap:8px; }.merge-option { display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:13px; padding:12px 14px; cursor:pointer; }.merge-option:has(input:checked) { border-color:var(--green); background:var(--mint); }.merge-option input { accent-color:var(--green); width:18px; height:18px; }.merge-option span { flex:1; }.merge-option b { display:block; font-size:14px; }.merge-option small { color:var(--muted); font-size:12px; }.backup-card { display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; }.backup-card b { font-size:15px; }.backup-card p { margin:4px 0 0; font-size:13px; }.backup-actions { display:flex; align-items:center; gap:10px; }.restore-form { display:flex; align-items:center; gap:8px; }.restore-form input[type="file"] { max-width:190px; font-size:12px; color:var(--muted); }
@media print { .site-header, .main-nav, .theme-toggle, .page-actions, .reading-strip, .toolbar, .pagination, .site-footer, .quiz-footer, .quiz-note, .quiz-top, .star-button, form, .button { display:none !important; } body { background:#fff; color:#000; } .read-card, .result-row { break-inside:avoid; border:1px solid #ddd; box-shadow:none; } .answer-box { background:#f5f5f5; } .page-shell { padding:0 16px; } .read-card h2 { font-size:14px; } .option-preview { font-size:12px; } .pagination { display:none !important; } }
[data-theme="dark"] .search-form input, [data-theme="dark"] .setup-card input, [data-theme="dark"] .setup-card select, [data-theme="dark"] .setup-card textarea, [data-theme="dark"] .round-form select { background:#162a1e; border-color:#2a4a35; color:#e2ede6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
.site-header { background:var(--ink); color:#fff; }
.header-inner { max-width:1080px; margin:auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; letter-spacing:.04em; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--lime); color:var(--ink); font-weight:800; }
.brand b, .brand small { display:block; line-height:1.2; }.brand b { font-size:17px; }.brand small { color:#a9b9af; font-size:11px; margin-top:3px; }
.main-nav { display:flex; gap:6px; align-items:center; font-size:14px; }.main-nav a { padding:8px 12px; color:#ccd8d0; }.main-nav a:hover { color:#fff; }.main-nav .nav-add { color:var(--ink); background:var(--lime); border-radius:999px; font-weight:700; }.theme-toggle { border:1px solid #33493a; background:#15261e; color:#ccd8d0; border-radius:10px; padding:6px 10px; cursor:pointer; font-size:15px; line-height:1; }[data-theme="dark"] .theme-toggle { border-color:#3a4d40; background:#0f1c15; }
.page-shell { max-width:1080px; margin:0 auto; padding:42px 24px 72px; }.hero { background:var(--ink); color:#fff; border-radius:26px; padding:42px 44px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; min-height:245px; position:relative; overflow:hidden; }.hero:after { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(214,239,155,.12); right:14%; top:-120px; }.hero > * { position:relative; z-index:1; }.hero h1 { font-size:clamp(32px,5vw,48px); line-height:1.18; margin:5px 0 14px; letter-spacing:-.04em; }.hero-copy { color:#b8c7bd; max-width:560px; margin:0; }.eyebrow { color:var(--green); font-size:11px; letter-spacing:.16em; font-weight:800; margin:0 0 8px; }.hero .eyebrow, .result-hero .eyebrow { color:var(--lime); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; border-radius:12px; padding:11px 17px; font-weight:750; font-size:14px; transition:.2s ease; }.button:hover { transform:translateY(-1px); }.button-primary { background:var(--green); color:#fff; }.button-light { background:#fff; color:var(--ink); }.button-quiet { background:var(--mint); color:var(--green); }.full-button { width:100%; margin-top:12px; padding:14px; }.icon-link { display:grid; place-items:center; width:39px; height:39px; background:var(--ink); color:#fff; border-radius:12px; }.text-link, .back-link { color:var(--green); font-weight:750; font-size:14px; }.back-link { display:inline-block; margin-bottom:28px; }.muted { color:var(--muted); }.intro { max-width:650px; margin-bottom:28px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 46px; }.stat-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; }.stat-card span, .stat-card small { color:var(--muted); font-size:13px; }.stat-card strong { font-size:32px; margin:0 5px 0 0; letter-spacing:-.04em; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:34px 0 16px; }.section-heading h2 { margin:0; font-size:24px; letter-spacing:-.03em; }.head-links { display:flex; gap:16px; align-items:center; }.head-links .text-link { white-space:nowrap; }.page-actions { display:flex; gap:8px; align-items:center; }.button-danger { background:#fff0ed; color:var(--red); }.bank-grid { display:grid; gap:12px; }.bank-card { display:flex; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }.bank-icon { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--mint); color:var(--green); font-weight:850; font-size:21px; }.bank-icon.violet { background:var(--violet); color:#665d9b; }.bank-main { flex:1; min-width:0; }.bank-main h3 { margin:2px 0 2px; font-size:17px; }.bank-main p { color:var(--muted); margin:0; font-size:13px; }.chip { display:inline-block; background:var(--mint); color:var(--green); padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; }.bank-actions { display:flex; gap:8px; align-items:center; }.recent-heading { margin-top:50px; }.recent-list, .record-table { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }.recent-row, .record-row { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }.recent-row:last-child, .record-row:last-child { border-bottom:0; }.recent-row > span:nth-child(2), .record-row > span:first-child { flex:1; }.recent-row b, .record-row b { display:block; font-size:14px; }.recent-row small, .record-row small { display:block; color:var(--muted); font-size:12px; }.recent-row strong { font-size:19px; }.recent-row strong small, .record-score small { display:inline; margin-left:2px; }.recent-dot { width:9px; height:9px; background:var(--lime); border-radius:50%; }.empty-state { background:var(--card); border:1px dashed #bdd0c2; color:var(--muted); text-align:center; padding:28px; border-radius:18px; }
.page-top { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.page-top h1, .narrow-page h1 { font-size:clamp(28px,5vw,40px); letter-spacing:-.04em; line-height:1.2; margin:0 0 6px; }.toolbar { display:flex; align-items:end; gap:12px; margin-bottom:16px; }.search-form { display:flex; gap:8px; flex:1; }.search-form input { flex:1; }.round-form label { display:grid; gap:5px; color:var(--muted); font-size:12px; }.round-form select { min-width:120px; }.toolbar-count { color:var(--muted); font-size:13px; white-space:nowrap; }.reading-strip { background:var(--mint); border:1px solid #d3e7d8; border-radius:16px; padding:14px 16px; margin-bottom:16px; }.reading-main { width:100%; }.reading-label { font-size:13px; color:#43534b; margin-bottom:7px; }.reading-label b { color:var(--green); }.reading-strip .progress { margin:0 0 8px; }.reading-strip .text-link { font-size:13px; }.mini-progress { background:#dfe9e1; height:5px; border-radius:99px; margin:7px 0 4px; overflow:hidden; }.mini-progress span { display:block; height:100%; background:var(--green); border-radius:99px; }.read-note { color:var(--muted); font-size:12px; margin:0; }.question-list { display:grid; gap:12px; }.read-card, .setup-card, .tip-card, .quiz-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 8px 24px rgba(21,38,30,.025); }.question-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.question-number { display:grid; place-items:center; min-width:30px; height:30px; border-radius:10px; color:var(--green); background:var(--mint); font-weight:850; }.type-label { margin-left:auto; }.star-button { border:0; background:transparent; color:#8a978e; cursor:pointer; font-size:19px; line-height:1; }.star-button.active { color:#e7b834; }.read-card h2 { font-size:17px; line-height:1.65; margin:14px 0; }.option-preview { display:grid; gap:7px; color:#52635a; font-size:14px; }.option-preview div { display:flex; gap:8px; }.option-preview b { color:var(--green); width:22px; }.tag-row { display:flex; gap:6px; margin-top:10px; }.tag-chip { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:2px 10px; font-size:11px; cursor:pointer; font-weight:750; }.tag-chip:hover { border-color:var(--green); color:var(--green); }.tag-chip.on { background:var(--mint); border-color:var(--green); color:var(--green); }.read-card details { border-top:1px solid var(--line); margin-top:17px; padding-top:12px; }.read-card summary, details summary { color:var(--green); cursor:pointer; font-size:13px; font-weight:750; }.answer-box { background:#f4f8f4; border-radius:12px; padding:12px 14px; margin-top:10px; font-size:14px; }.answer-box p { margin:7px 0 0; color:#53635a; }.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin:24px 0; color:var(--muted); font-size:13px; flex-wrap:wrap; }.pagination a { color:var(--green); font-weight:750; display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); }.pagination a:hover { border-color:var(--green); }.pagination a.active { background:var(--green); color:#fff; border-color:var(--green); }.pagination .page-gap { color:var(--muted); padding:0 2px; }.pagination .page-jump { display:inline-flex; gap:6px; margin-left:8px; }.pagination .page-jump input { width:58px; padding:6px 8px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); font-size:13px; }.pagination .page-jump button { padding:6px 11px; }@media (max-width:700px){ .pagination { gap:5px; }.pagination a { min-width:30px; height:30px; padding:0 7px; font-size:12px; } }
.narrow-page { max-width:680px; margin:0 auto; }.setup-card { display:grid; gap:18px; }.setup-card label { display:grid; gap:7px; font-size:13px; font-weight:750; }.setup-card input, .setup-card select, .setup-card textarea, .search-form input { width:100%; border:1px solid #cad8cd; border-radius:11px; padding:12px 13px; background:#fbfdfb; color:var(--ink); outline:0; }.setup-card input:focus, .setup-card select:focus, .setup-card textarea:focus, .search-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,118,88,.12); }.form-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.tip-card { margin-top:14px; display:flex; gap:12px; background:var(--mint); border-color:#cfe4d5; box-shadow:none; }.tip-card b { font-size:14px; }.tip-card p { margin:4px 0 0; font-size:13px; color:#53635a; }.tip-icon { flex:0 0 27px; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--green); font-weight:850; }.divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }.divider:before, .divider:after { content:""; height:1px; background:var(--line); flex:1; }
.quiz-page { max-width:720px; margin:0 auto; }.quiz-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px; }.quiz-top .back-link { margin:0; }.quiz-top b { color:var(--ink); }.timer-display { font-weight:850; color:var(--red); font-variant-numeric:tabular-nums; padding:3px 10px; border-radius:8px; background:#fff0ed; font-size:14px; }.progress { background:#dfe9e1; height:7px; border-radius:99px; margin:13px 0 20px; overflow:hidden; }.progress span { height:100%; display:block; background:var(--green); border-radius:99px; }.quiz-card { padding:30px; }.quiz-card h1 { font-size:24px; line-height:1.55; letter-spacing:-.025em; margin:20px 0 25px; }.quiz-options { display:grid; gap:10px; }.quiz-option { display:flex; align-items:flex-start; gap:11px; border:1px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; color:#43534b; }.quiz-option:hover, .quiz-option:has(input:checked) { border-color:var(--green); background:#f1f8f2; }.quiz-option input { margin-top:5px; accent-color:var(--green); }.quiz-option.answer-correct { border-color:var(--green); background:var(--mint); animation:pop .35s ease; }.quiz-option.answer-wrong { border-color:var(--red); background:#fff0ed; animation:shake .35s ease; }.quiz-option.answer-correct .option-key { color:var(--green); }.quiz-option.answer-wrong .option-key { color:var(--red); }.quiz-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:50; padding:12px 22px; border-radius:999px; font-weight:850; font-size:15px; opacity:0; transition:opacity .25s ease; pointer-events:none; box-shadow:var(--shadow); }.quiz-toast.ok { background:var(--green); color:#fff; }.quiz-toast.no { background:var(--red); color:#fff; }@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.03)} 100%{transform:scale(1)} }@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }.option-key { color:var(--green); font-weight:850; min-width:20px; }.answer-input { display:grid; gap:9px; color:var(--muted); font-size:13px; }.answer-input textarea { resize:vertical; }.check-row { display:flex; gap:8px; margin-top:12px; color:var(--green); font-size:13px; }.check-row input { accent-color:var(--green); }.quiz-footer { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:28px; padding-top:18px; }.quiz-footer button:disabled { opacity:.4; cursor:not-allowed; transform:none; }.quiz-note { text-align:center; color:var(--muted); font-size:12px; margin:14px 0; }
.result-page { max-width:800px; margin:0 auto; }.result-hero { text-align:center; background:var(--ink); color:#fff; border-radius:26px; padding:34px 24px; margin-bottom:38px; }.result-hero h1 { margin:0; font-size:26px; }.score-ring { width:126px; height:126px; border:9px solid var(--lime); border-left-color:rgba(214,239,155,.25); border-radius:50%; display:flex; align-items:baseline; justify-content:center; gap:3px; margin:22px auto 10px; padding-top:31px; }.score-ring strong { font-size:37px; line-height:1; }.score-ring span { color:#c8dbb0; }.result-hero > p:not(.eyebrow) { color:#bdcbbf; }.result-actions { display:flex; justify-content:center; gap:9px; margin-top:22px; }.result-list { display:grid; gap:10px; }.result-row { display:flex; gap:13px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:16px; padding:16px; }.result-row.correct { border-left-color:var(--green); }.result-status { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#fbe8e5; color:var(--red); font-weight:850; }.correct .result-status { background:var(--mint); color:var(--green); }.result-body { flex:1; min-width:0; }.result-body h3 { font-size:15px; line-height:1.6; margin:10px 0 6px; }.result-body p { color:var(--muted); font-size:13px; margin:0; }.result-body b { color:var(--ink); }.result-body details { margin-top:10px; }
.record-score { background:var(--mint); color:var(--green); border-radius:10px; padding:7px 11px; font-weight:850; }.wrong-heading { margin-top:48px; }.wrong-list { display:grid; gap:10px; }.wrong-card { display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }.wrong-card > span:nth-child(2) { flex:1; min-width:0; }.wrong-card b, .wrong-card small { display:block; }.wrong-card b { font-size:13px; }.wrong-card small { color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:12px; }.wrong-count { width:42px; height:42px; display:grid; place-items:center; align-content:center; border-radius:12px; background:#fff0ed; color:var(--red); font-weight:850; line-height:1.05; }.wrong-count small { font-size:9px; }.chart-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }.trend-chart { width:100%; height:190px; display:block; }.trend-chart line, .trend-chart circle { stroke:var(--green); }.chart-caption { color:var(--muted); font-size:12px; margin-top:10px; }.type-grid { margin:0 0 14px; }.bank-acc-table { margin-top:0; }.acc-row { display:flex; align-items:center; gap:14px; }.acc-row > span:first-child { flex:0 0 38%; min-width:0; }.acc-track { flex:1; background:#dfe9e1; height:9px; border-radius:99px; overflow:hidden; }.acc-track span { display:block; height:100%; background:var(--green); border-radius:99px; }[data-theme="dark"] .acc-track { background:#2a4a35; }.heatmap { display:grid; grid-template-columns:repeat(28, 1fr); gap:5px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }.heat-cell { aspect-ratio:1; border-radius:5px; background:var(--line); }.heat-cell.heat-1 { background:#cfe3d0; }.heat-cell.heat-2 { background:#7fba8f; }.heat-cell.heat-3 { background:#3f8f5f; }.heat-cell.heat-4 { background:#1e6b3e; }[data-theme="dark"] .heat-cell { background:#2a4632; }.heat-legend { display:flex; align-items:center; gap:4px; justify-content:flex-end; color:var(--muted); font-size:11px; margin-top:8px; }.heat-legend .heat-cell { width:14px; height:14px; border-radius:4px; }.heat-legend span { margin:0 3px; }.site-footer { color:#8a998e; text-align:center; font-size:12px; padding:0 24px 28px; }.flash-stack { display:grid; gap:8px; margin-bottom:18px; }.flash { padding:12px 15px; border-radius:12px; font-size:13px; }.flash.success { background:#e8f5e9; color:#28643f; }.flash.error { background:#fff0ed; color:#9e4036; }.flash.info { background:#eef0fb; color:#5b568b; }
@media (max-width:700px) { .header-inner { padding:14px 16px; }.main-nav { gap:0; }.main-nav a { padding:8px 6px; font-size:12px; }.main-nav a:not(.nav-add) { font-size:0; }.main-nav a:not(.nav-add):first-child:after { content:'總覽'; font-size:12px; }.main-nav a:not(.nav-add):nth-child(2):after { content:'小考'; font-size:12px; }.main-nav a:not(.nav-add):nth-child(3):after { content:'紀錄'; font-size:12px; }.main-nav .nav-add { padding:8px 10px; font-size:12px; }.page-shell { padding:26px 16px 56px; }.hero { padding:27px 22px; min-height:0; display:block; border-radius:20px; }.hero h1 { font-size:33px; }.hero .button { margin-top:24px; width:100%; }.stat-grid { gap:8px; margin-bottom:34px; }.stat-card { padding:13px 11px; }.stat-card strong { font-size:25px; }.stat-card span, .stat-card small { font-size:11px; }.section-heading { margin-top:32px; }.section-heading h2 { font-size:21px; }.bank-card { padding:13px; gap:11px; align-items:flex-start; }.bank-icon { flex-basis:40px; width:40px; height:40px; font-size:17px; border-radius:12px; }.bank-main h3 { font-size:15px; line-height:1.45; }.bank-actions { margin-left:auto; align-self:center; }.bank-actions .button { padding:8px 10px; font-size:12px; }.icon-link { width:33px; height:33px; border-radius:10px; }.page-top { display:block; }.page-top .button { margin-top:8px; }.toolbar { display:block; }.search-form { margin-bottom:9px; }.round-form { margin-bottom:9px; }.round-form select { width:100%; }.toolbar-count { font-size:12px; }.read-card, .setup-card, .tip-card { padding:17px; border-radius:16px; }.read-card h2 { font-size:15px; }.form-two { gap:8px; }.quiz-card { padding:21px 17px; border-radius:17px; }.quiz-card h1 { font-size:20px; margin:17px 0 20px; }.quiz-option { padding:12px; font-size:14px; }.quiz-footer .button { padding:10px 11px; font-size:13px; }.result-hero { border-radius:20px; padding:28px 16px; }.result-actions { flex-wrap:wrap; }.result-row { padding:13px 11px; }.wrong-card { padding:12px; }.wrong-card > span:last-child { font-size:13px; }.back-link { margin-bottom:22px; } }

[data-theme="dark"] .quiz-option { color:var(--ink); }
[data-theme="dark"] .quiz-option.answer-correct { background:#1a3324; border-color:var(--green); }
[data-theme="dark"] .quiz-option.answer-wrong { background:#3a1a1a; border-color:var(--red); }
[data-theme="dark"] .option-preview { color:#b9c7bf; }
[data-theme="dark"] .reading-label { color:#a9b9af; }
[data-theme="dark"] .reading-label b { color:var(--green); }
[data-theme="dark"] .tip-card p { color:#a9b9af; }
[data-theme="dark"] .bank-icon.violet { background:#241f3d; color:#b9adf0; }
[data-theme="dark"] .progress { background:#1f3a2b; }
[data-theme="dark"] .mini-progress { background:#1f3a2b; }
[data-theme="dark"] .button-light { background:var(--mint); color:var(--green); }