:root{--orange:#FF9F43;--green:#26C281;--blue:#54A0FF;--cream:#FFFBF2;--ink:#3a3a3a;--muted:#9a9a9a;--line:#eee}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;background:var(--cream);color:var(--ink)}button{font-family:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.app{min-height:100%;max-width:1100px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--orange);color:#fff;position:sticky;top:0;z-index:10}.topbar h1{font-size:18px;margin:0}.topbar .actions{display:flex;gap:10px}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:16px;padding:20px;text-align:center}.card{background:#fff;border-radius:20px;box-shadow:0 6px 24px #0000000f;padding:20px}.btn{border:none;border-radius:16px;background:var(--orange);color:#fff;font-size:18px;font-weight:700;padding:13px 24px}.btn:disabled{opacity:.45}.btn.block{width:100%}.btn.ghost{background:#fff;color:var(--orange);border:2px solid var(--orange)}.btn.sm{font-size:15px;padding:9px 14px;border-radius:12px}.input{font-size:16px;padding:12px 14px;border:1px solid #ddd;border-radius:12px;width:100%}.row{display:flex;gap:10px;align-items:center}.muted{color:var(--muted)}.hint{color:var(--orange);font-size:14px}.grid{display:grid;gap:14px;padding:16px}.grid.g3{grid-template-columns:repeat(3,1fr)}.grid.g4{grid-template-columns:repeat(4,1fr)}@media(min-width:600px){.grid.g3{grid-template-columns:repeat(4,1fr)}.grid.g4{grid-template-columns:repeat(6,1fr)}}.charcard{aspect-ratio:1;background:#fff;border:1px solid #e6e6e6;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;-webkit-user-select:none;user-select:none}.charcard.sel{background:#ffe7c2;border:3px solid var(--orange);color:#e8590c}.charcard.wrong{background:#fde2e1;border:3px solid #e74c3c}.charcard.correct{background:#d5f5e3;border:3px solid var(--green);color:#1e8449}@media(min-width:600px){.charcard{font-size:56px}}.shelf{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.book{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 16px #0000000f}.book .cover{aspect-ratio:1;background:#fff3e0;display:flex;align-items:center;justify-content:center;font-size:48px}.book .cover img{width:100%;height:100%;object-fit:cover;display:block}.book .meta{padding:10px}.book .title{font-weight:700;font-size:15px}.book .new{color:var(--muted);font-size:12px;margin-top:2px}.reader{display:flex;gap:24px;padding:16px}@media(max-width:720px){.reader{flex-direction:column}}.reader .illus{flex:1}.reader .illus img{width:100%;border-radius:16px;aspect-ratio:1;object-fit:cover;background:#fff3e0}.reader .side{flex:1;display:flex;flex-direction:column;justify-content:center}.sentence{font-size:42px;line-height:1.7;letter-spacing:2px}@media(max-width:720px){.sentence{font-size:32px}}.ch{cursor:pointer;border-radius:8px;padding:2px 3px;transition:background .15s}.ch:hover{background:#ffe0b2}.ch.newchar{color:#e8590c;border-bottom:4px solid var(--orange)}.ch.active{background:#ffcc80}.pager{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;gap:10px}.pageno{font-weight:700;color:var(--orange)}.loading{display:flex;align-items:center;justify-content:center;min-height:70vh;color:var(--muted)}.tip{color:#bbb;font-size:13px;margin-top:10px}.bigchar{width:200px;height:200px;background:#fff;border:2px solid #ffd9a8;border-radius:28px;display:flex;align-items:center;justify-content:center;font-size:120px}.chip{border:1px solid #ddd;border-radius:999px;padding:7px 14px;background:#fff;font-size:15px}.chip.on{background:#ffe7c2;border-color:var(--orange);color:#e8590c}.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}