:root {
  --ink:#1d2935; --muted:#6e7881; --paper:#f4f1e9; --card:#fffdf8;
  --green:#397862; --green-dark:#285b49; --lime:#dbe8a5; --line:#ddd9cf;
  --amber:#c58435; --shadow:0 18px 45px rgba(37,55,47,.12);
}
* { box-sizing:border-box; }
html { background:#d9d6cd; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { color:inherit; cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid rgba(57,120,98,.32); outline-offset:2px; }
.app-shell { min-height:100dvh; max-width:760px; margin:0 auto; padding-bottom:100px; background:var(--paper); }
.topbar { display:grid; grid-template-columns:44px 1fr 46px; align-items:center; gap:12px; padding:18px 20px 14px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:50% 50% 44% 56%; background:var(--ink); color:#fff; font-family:Georgia,serif; font-size:22px; font-weight:700; transform:rotate(-5deg); }
.brand-copy p { margin:0 0 2px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.brand-copy h1 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:20px; letter-spacing:.02em; }
.progress-ring { --progress:0deg; display:grid; place-items:center; width:44px; height:44px; padding:3px; border:0; border-radius:50%; background:conic-gradient(var(--green) var(--progress),#d8d8ce 0); }
.progress-ring::before { content:""; grid-area:1/1; width:36px; height:36px; border-radius:50%; background:var(--paper); }
.progress-ring span { grid-area:1/1; z-index:1; font-size:10px; font-weight:800; }
.hero { position:relative; overflow:hidden; margin:8px 16px 18px; padding:28px 24px 24px; border-radius:28px; color:#f9faf5; background:var(--green); box-shadow:0 18px 40px rgba(44,73,61,.16); }
.hero-orbit { position:absolute; right:-30px; top:-58px; width:170px; height:170px; border:32px solid rgba(219,232,165,.22); border-radius:50%; }
.hero::before { content:""; position:absolute; right:70px; bottom:-38px; width:86px; height:86px; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.hero-kicker { margin:0 0 10px; color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.14em; }
.hero h2 { position:relative; z-index:1; margin:0 0 25px; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(26px,7vw,39px); line-height:1.27; font-weight:600; letter-spacing:.01em; }
.progress-track { position:relative; z-index:1; height:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.2); }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--lime); transition:width .35s ease; }
.progress-copy { position:relative; z-index:1; margin:9px 0 0; color:rgba(255,255,255,.72); font-size:12px; } .progress-copy strong { color:#fff; }
.tools { position:sticky; z-index:5; top:0; padding:8px 0 4px; background:linear-gradient(var(--paper) 85%,transparent); }
.search-box { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:7px; margin:0 16px 12px; padding:0 14px; height:46px; border:1px solid var(--line); border-radius:15px; background:rgba(255,253,248,.9); box-shadow:0 6px 20px rgba(50,57,50,.05); }
.search-box>span { color:var(--green); font-family:Georgia,serif; font-size:25px; transform:rotate(-15deg); }
.search-box input { min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; }
.search-box input::placeholder { color:#999c96; }
.search-box kbd { padding:2px 7px; border:1px solid #d9d7cf; border-radius:6px; background:#eeece5; color:#888b84; font-size:11px; }
.topic-row { display:flex; gap:8px; overflow-x:auto; padding:0 16px 14px; scrollbar-width:none; } .topic-row::-webkit-scrollbar { display:none; }
.topic { flex:0 0 auto; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; }
.topic span { margin-left:3px; opacity:.65; font-size:10px; }
.topic.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.question-list { padding:8px 16px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:5px 2px 13px; }
.section-heading div { display:flex; align-items:baseline; gap:9px; }
.section-heading h2 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:22px; }
.section-number { color:var(--green); font-family:Georgia,serif; font-style:italic; }
.section-heading>span { color:var(--muted); font-size:12px; }
.question-card { margin-bottom:10px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,248,.76); transition:border-color .2s,box-shadow .2s,background .2s; }
.question-card.open { border-color:#8fae9e; box-shadow:0 10px 24px rgba(45,69,59,.08); background:var(--card); }
.question-card.mastered:not(.open) { border-left:4px solid #83a67b; }
.question-trigger { display:grid; grid-template-columns:32px 1fr 30px; align-items:center; gap:10px; width:100%; padding:16px 14px; border:0; background:transparent; text-align:left; }
.card-index { align-self:start; padding-top:20px; color:#a5a69f; font-family:Georgia,serif; font-size:13px; font-style:italic; }
.question-main { display:grid; gap:7px; min-width:0; }
.question-main strong { min-width:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.question-main code { padding:1px 4px; border-radius:4px; background:#e7e5dc; color:#315f4e; font-family:"SFMono-Regular",Consolas,monospace; font-size:.86em; white-space:normal; overflow-wrap:anywhere; }
.meta-row { display:flex; gap:8px; align-items:center; color:#979a94; font-size:10px; white-space:nowrap; overflow:hidden; }
.meta-row>span:last-child { overflow:hidden; text-overflow:ellipsis; }
.tag { flex:0 0 auto; width:max-content; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.toggle { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#ece9df; font-size:20px; font-weight:300; } .open .toggle { background:var(--lime); }
.answer-panel { min-width:0; margin:0 14px 16px 55px; }
.answer-body { min-width:0; overflow:hidden; padding:15px 16px; border-left:3px solid var(--green); border-radius:0 12px 12px 0; background:#edf1e5; color:#3f4d46; font-size:14px; line-height:1.75; overflow-wrap:anywhere; }
.answer-body p { margin:0 0 10px; } .answer-body p:last-child { margin-bottom:0; }
.answer-body ul,.answer-body ol { margin:7px 0 12px; padding-left:1.25rem; } .answer-body li { margin:4px 0; }
.answer-body code { max-width:100%; padding:1px 5px; border-radius:5px; background:#dde5d7; color:#244d3e; font-family:"SFMono-Regular",Consolas,monospace; font-size:.9em; white-space:normal; overflow-wrap:anywhere; }
.answer-label { display:inline-flex; width:auto; max-width:100%; padding:3px 7px; border-radius:5px; background:var(--green); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; }
.note-block { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:8px; margin:12px 0 2px; padding:10px 11px; border:1px solid #d7c88d; border-radius:10px; background:#f7f0d7; color:#5e5125; }
.note-block span { margin-top:2px; padding:2px 6px; border-radius:5px; background:#c4933f; color:#fff; font-size:9px; font-weight:800; letter-spacing:.08em; }
.note-block p { min-width:0; margin:0; overflow-wrap:anywhere; }
.code-block { position:relative; margin:12px -4px; overflow:hidden; border-radius:10px; background:#19252d; }
.code-block>span { position:absolute; right:9px; top:7px; color:#8fa2aa; font-size:9px; text-transform:uppercase; }
.code-block pre { margin:0; padding:18px 14px; overflow-x:auto; color:#d9e6de; font:12px/1.65 "SFMono-Regular",Consolas,monospace; }
.code-block code { padding:0; background:transparent; color:inherit; font-size:inherit; white-space:pre; overflow-wrap:normal; }
.card-actions { display:flex; flex-wrap:wrap; gap:7px; padding-top:10px; }
.card-actions button { flex:1 1 auto; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#f5f2ea; color:#68716d; font-size:11px; }
.card-actions button.active { border-color:#b9a35c; background:#f5edc9; color:#715c20; font-weight:700; }
.card-actions button.weak { border-color:#d3a260; background:#fae9d0; color:#8b5718; }
.card-actions button.known { border-color:#8aaf9e; background:#dcebe3; color:#28634c; }
.load-more { display:block; width:100%; margin:14px 0 2px; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--green); font-weight:700; font-size:13px; }
.empty-state,.error-state { padding:50px 20px; text-align:center; color:var(--muted); }
.empty-state>span { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 15px; border:1px dashed #a8ada5; border-radius:50%; font:italic 28px Georgia,serif; }
.empty-state h3,.error-state strong { color:var(--ink); font-family:Georgia,"Noto Serif SC",serif; font-size:19px; }
.empty-state p,.error-state p { margin:8px 0; font-size:13px; }
.error-state button { margin-top:10px; padding:9px 15px; border:0; border-radius:10px; background:var(--ink); color:#fff; }
.bottom-nav { position:fixed; z-index:10; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); width:min(430px,calc(100% - 28px)); padding:8px; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:rgba(29,41,53,.95); box-shadow:0 18px 45px rgba(20,30,38,.3); backdrop-filter:blur(16px); transform:translateX(-50%); }
.bottom-nav button { display:grid; place-items:center; gap:3px; padding:7px 4px; border:0; border-radius:15px; background:transparent; color:#aeb6ba; font-size:10px; }
.bottom-nav button span { font-size:19px; line-height:1; }
.bottom-nav button.selected { color:var(--ink); background:var(--lime); font-weight:800; }
.progress-dialog { width:min(430px,calc(100% - 32px)); padding:27px 22px 22px; border:0; border-radius:25px; background:var(--card); color:var(--ink); box-shadow:0 28px 80px rgba(22,33,28,.34); }
.progress-dialog::backdrop { background:rgba(18,27,31,.48); backdrop-filter:blur(3px); }
.dialog-close { position:absolute; right:14px; top:12px; width:34px; height:34px; border:0; border-radius:50%; background:#eeeae0; font-size:20px; }
.dialog-kicker { margin:0; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.14em; }
.progress-dialog h2 { margin:5px 0 20px; font:600 26px Georgia,"Noto Serif SC",serif; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-grid div { display:grid; gap:4px; padding:16px 5px; border-radius:14px; background:#f0eee7; text-align:center; }
.stat-grid strong { color:var(--green); font:italic 25px Georgia,serif; } .stat-grid span { color:var(--muted); font-size:10px; }
.primary-action { width:100%; margin-top:18px; padding:13px; border:0; border-radius:13px; background:var(--green); color:#fff; font-weight:700; }
noscript { display:block; padding:20px; text-align:center; }
@media (min-width:761px) { body { padding:24px 0; } .app-shell { min-height:calc(100dvh - 48px); border-radius:32px; box-shadow:0 24px 70px rgba(37,42,39,.16); } .hero { padding:35px 34px 28px; } .question-list,.topic-row { padding-left:24px; padding-right:24px; } .search-box { margin-left:24px; margin-right:24px; } }
@media (max-width:380px) { .answer-panel { margin-left:14px; } .question-trigger { grid-template-columns:26px 1fr 28px; gap:7px; } .hero { padding-left:20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }