:root { --ink:#22213a; --muted:#6f7087; --paper:#fffdf8; --coral:#ff5a45; --yellow:#ffc857; --mint:#d6f2e7; --purple:#6557d7; --line:#ebe8e2; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(160deg,#fff7e5 0%,#f7f4ff 55%,#fff 100%); font-family:ui-rounded,"Nunito",system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(100%,600px); min-height:100vh; margin:auto; padding:18px 20px calc(91px + env(safe-area-inset-bottom)); }
.topbar,.hero-row,.progress-label,.card-label,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:900; text-decoration:none; letter-spacing:-.5px; }
.brand-mark { display:grid; width:36px; aspect-ratio:1; place-items:center; border-radius:12px; color:white; background:var(--coral); box-shadow:0 4px 0 #cf3f2f; font-size:20px; }
.xp-pill { padding:8px 11px; border:1px solid #f1db9f; border-radius:999px; background:#fff5cd; color:#8b5b00; font-size:13px; }
.view { display:none; padding-top:28px; }
.view.active { display:block; animation:rise .22s ease-out; }
.hero-row { align-items:flex-start; }
.eyebrow { margin:0 0 7px; color:var(--coral); font-size:11px; font-weight:900; letter-spacing:1.3px; }
h1 { margin:0; max-width:360px; font-size:clamp(32px,9vw,45px); line-height:.98; letter-spacing:-2px; }
.subhead { margin:12px 0 0; color:var(--muted); line-height:1.45; }
.streak-badge { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:4px; min-width:75px; padding:9px; border-radius:18px; background:#fff; box-shadow:0 6px 18px #4c456d12; }
.streak-badge strong { font-size:19px; }.streak-badge small { grid-column:1/-1; color:var(--muted); font-size:10px; text-align:center; }
.difficulty-picker { margin-top:22px; padding:14px; border:1px solid #ebe5dd; border-radius:18px; background:#fffcf7; }.picker-label { margin:0; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:1px; }.picker-label + p { margin:4px 0 11px; color:var(--muted); font-size:12px; }
.difficulty-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.difficulty { min-height:35px; border:1px solid #e7e1db; border-radius:10px; background:#fff; color:var(--muted); font-size:11px; font-weight:900; }.difficulty.active { border-color:var(--coral); background:var(--coral); color:#fff; box-shadow:0 3px 0 #d44234; }
.progress-block { margin:27px 0 18px; }.progress-label { margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:800; }
.progress-track { height:9px; overflow:hidden; border-radius:20px; background:#eae7ef; }.progress-track div { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--coral),#ff9a58); transition:width .35s ease; }
.card { border:1px solid #f0ede8; border-radius:25px; background:#fff; box-shadow:0 9px 28px #4236670d; }
.sentence-card { min-height:243px; padding:18px; text-align:center; }.card-label { color:var(--muted); font-size:11px; font-weight:800; text-align:left; }
.icon-button { border:0; border-radius:10px; background:#f7f4ef; padding:7px; }.hanzi { margin:28px 0 6px; font-family:"Noto Serif CJK SC","Songti SC",serif; font-size:clamp(37px,11vw,55px); line-height:1.15; }.pinyin { min-height:22px; margin:0; color:var(--purple); font-weight:700; }
.reveal-button { margin-top:16px; border:0; border-bottom:1px dashed var(--purple); background:none; color:var(--purple); font-size:13px; font-weight:800; }.translation { margin:14px 0 0; color:var(--muted); font-size:15px; }
.nuance-card { margin-top:25px; padding:18px; }.nuance-sentence { margin:18px 0 0; padding:12px 14px; border-radius:13px; background:#f7f5ff; font-family:"Noto Serif CJK SC","Songti SC",serif; font-size:20px; font-weight:700; }.nuance-sentence + .nuance-sentence { margin-top:8px; }.nuance-question { margin:20px 0 0; font-size:17px; line-height:1.35; }
.nuance-picker { margin-top:20px; }
.answers { display:grid; gap:10px; margin:16px 0; }.answer { display:flex; align-items:center; gap:13px; width:100%; padding:15px; border:1.5px solid var(--line); border-radius:17px; background:#fff; color:var(--ink); text-align:left; font-weight:700; transition:transform .12s,border-color .12s,background .12s; }.answer:not(:disabled):active { transform:scale(.98); }.answer:hover:not(:disabled) { border-color:#bdb7e4; }.answer:disabled { cursor:default; }.choice-letter { display:grid; flex:none; width:24px; height:24px; place-items:center; border-radius:8px; background:#f3f1ef; color:var(--muted); font-size:12px; }.answer.correct { border-color:#42b883; background:#edfff5; }.answer.wrong { border-color:#ff897b; background:#fff1ee; }
.feedback { display:flex; align-items:center; gap:10px; margin-top:16px; padding:13px; border-radius:18px; background:var(--mint); }.feedback[hidden] { display:none; }.feedback > span { font-size:24px; }.feedback strong { font-size:14px; }.feedback p { margin:2px 0 0; color:#386a57; font-size:12px; }.feedback button { margin-left:auto; border:0; border-radius:12px; background:#247754; color:#fff; padding:10px 13px; font-size:13px; font-weight:900; white-space:nowrap; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:25px 0 15px; }.stat-card { display:grid; gap:3px; padding:13px 9px; border-radius:19px; background:#fff; text-align:center; box-shadow:0 5px 17px #4236670d; }.stat-card span { font-size:20px; }.stat-card strong { font-size:22px; }.stat-card small,.section-heading p { color:var(--muted); font-size:11px; }
.activity-card,.stats-view .card { margin-top:14px; padding:18px; }.section-heading { align-items:flex-start; }.section-heading h2 { margin:0; font-size:16px; }.section-heading p { margin:4px 0 0; }.section-heading > span { padding:5px 8px; border-radius:9px; background:#fff3d3; color:#956400; font-size:11px; font-weight:900; }
.activity-days { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:18px; }.day { display:grid; gap:5px; justify-items:center; color:var(--muted); font-size:10px; font-weight:800; }.day-dot { width:27px; height:27px; border-radius:10px; background:#f0edf0; }.day.active .day-dot { background:var(--coral); box-shadow:0 3px 0 #d44234; }
.review-list { display:grid; gap:9px; margin:15px 0 0; padding:0; list-style:none; }.review-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:9px; border-bottom:1px solid var(--line); }.review-list li:last-child { border:0; padding-bottom:0; }.review-hanzi { font-family:"Noto Serif CJK SC",serif; font-weight:900; }.review-list small { color:var(--muted); text-align:right; }.empty { color:var(--muted); font-size:13px; }
.bottom-nav { position:fixed; z-index:2; bottom:0; left:50%; display:flex; width:min(100%,600px); transform:translateX(-50%); padding:9px 28px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid #edeaf0; background:#fffc; backdrop-filter:blur(12px); justify-content:space-around; }.nav-item { display:grid; gap:3px; border:0; background:none; color:#9895a3; font-size:11px; font-weight:800; }.nav-item span { font-size:19px; }.nav-item.active { color:var(--coral); }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }