:root{--bg: #fff6ea;--bg-grad: radial-gradient(1100px 600px at 80% -10%, #ffe7c7 0%, transparent 60%), radial-gradient(900px 520px at 0% 110%, #d6f3ee 0%, transparent 55%);--ink: #3c3127;--ink-soft: #8a7a68;--paper: #fffdf8;--coral: #ff6f5e;--coral-dark: #e8533f;--teal: #2bb3a3;--teal-dark: #1c8d80;--gold: #f6b545;--line: #ecdfca;--shadow: 0 18px 40px -18px rgba(90, 60, 30, .45);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0}html,body{height:100%}body{background-color:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;color:var(--ink);-webkit-font-smoothing:antialiased}#app{min-height:100%;max-width:720px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:14px}.logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(150deg,var(--coral),var(--gold));color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 20px -8px #ff6f5eb3}.brand-text h1{font-size:24px;letter-spacing:1px}.tagline{font-size:13px;color:var(--ink-soft);margin-top:2px}.topbar-right{display:flex;align-items:center;gap:12px}.badge{display:flex;flex-direction:column;align-items:center;padding:8px 18px;border-radius:16px;background:var(--paper);border:2px solid var(--teal);box-shadow:var(--shadow);line-height:1.1}.badge-label{font-size:11px;color:var(--ink-soft)}.badge-num{font-size:30px;font-weight:800;color:var(--teal-dark)}.badge-unit{font-size:11px;color:var(--ink-soft)}.btn{font-family:inherit;font-size:15px;font-weight:700;border:none;border-radius:14px;padding:12px 22px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.btn:active{transform:translateY(1px) scale(.98)}.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 22px -10px #ff6f5ee6}.btn-primary:hover{background:var(--coral-dark)}.btn-soft{background:#fff;color:var(--teal-dark);border:2px solid var(--teal)}.btn-soft:hover{background:#effaf8}.btn-ghost{background:transparent;color:var(--ink-soft);border:2px solid var(--line)}.btn-ghost:hover{color:var(--ink);border-color:var(--ink-soft)}.btn-sm{font-size:13px;padding:8px 14px;border-radius:11px}.import-view{display:flex;flex-direction:column;gap:18px}.dropzone{background:var(--paper);border:3px dashed var(--line);border-radius:22px;padding:40px 24px;text-align:center;transition:border-color .15s ease,background .15s ease}.dropzone.over{border-color:var(--coral);background:#fff1ec}.dropzone-icon{font-size:44px}.dropzone-title{font-size:18px;font-weight:700;margin-top:8px}.dropzone-hint{font-size:13px;color:var(--ink-soft);margin-top:6px}.paste-area{display:flex;flex-direction:column;gap:10px}.paste-area label{font-size:14px;font-weight:700;color:var(--ink-soft)}.paste-area textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:12px 14px;min-height:110px;resize:vertical}.paste-area textarea:focus{outline:none;border-color:var(--teal)}.paste-actions{display:flex;gap:10px;flex-wrap:wrap}.import-error{color:var(--coral-dark);font-size:14px;font-weight:700;background:#ffeae6;border-radius:12px;padding:10px 14px}.ai-note{font-size:12px;color:var(--ink-soft);line-height:1.6}.done-view{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);padding:48px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.done-emoji{font-size:56px}.done-view h2{font-size:22px}.done-view p{color:var(--ink-soft);font-size:14px}.done-view .btn{margin-top:8px}.study{display:flex;flex-direction:column;align-items:center;gap:20px}.progress{font-size:14px;color:var(--ink-soft)}.progress strong{color:var(--coral-dark);font-size:17px}.card{width:min(440px,88vw);height:300px;perspective:1400px;cursor:pointer}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.45,.05,.25,1)}.study.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:26px;background:var(--paper);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}.card-front{border:3px solid var(--gold)}.card-back{border:3px solid var(--teal);transform:rotateY(180deg)}.face-tag{position:absolute;top:14px;left:18px;font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:1px}.hanzi{font-size:140px;font-weight:700;line-height:1;color:var(--ink)}.hanzi-sm{font-size:60px;font-weight:700;color:var(--ink)}.face-hint{font-size:13px;color:var(--ink-soft)}.pinyin-row{display:flex;align-items:center;gap:12px}.pinyin{font-size:40px;font-weight:700;color:var(--teal-dark);letter-spacing:1px}.speaker{font-size:22px;width:46px;height:46px;border-radius:50%;border:2px solid var(--teal);background:#fff;cursor:pointer;transition:transform .12s ease,background .12s ease}.speaker:hover{background:#effaf8}.speaker:active{transform:scale(.92)}.examples{font-size:16px;color:var(--ink-soft)}.grades{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.grade-hint{font-size:13px;color:var(--ink-soft)}.grade-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(440px,88vw)}.grade-btn{font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:14px;border:2px solid var(--line);background:var(--paper);cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.grade-btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px #5a3c1e99}.grade-btn:active{transform:translateY(0) scale(.97)}.gk{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}.grade-1 .gk{background:var(--coral)}.grade-2 .gk{background:var(--gold)}.grade-3 .gk{background:#6aa9e0}.grade-4 .gk{background:var(--teal)}.grade-1:hover{border-color:var(--coral)}.grade-2:hover{border-color:var(--gold)}.grade-3:hover{border-color:#6aa9e0}.grade-4:hover{border-color:var(--teal)}.gl{font-size:15px;font-weight:800;color:var(--ink)}.gd{font-size:11px;color:var(--ink-soft)}kbd{font-family:inherit;font-size:.85em;font-weight:700;background:#fff;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:1px 6px;color:var(--ink)}.appfoot{margin-top:auto;text-align:center;font-size:12px;color:var(--ink-soft);padding-top:10px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:14px;box-shadow:var(--shadow);z-index:50;max-width:90vw}@media (max-width: 480px){.hanzi{font-size:108px}.pinyin{font-size:32px}}