*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f5f0e8;--bg-card: #faf8f4;--ink: #1a1a2e;--ink-light: #4a4a5e;--ink-muted: #8a8a9e;--accent: #c4553a;--accent-hover: #a8432c;--green: #3a7d44;--amber: #c49a3a;--red: #c4553a;--blue: #3a6fc4;--radius: 12px;--shadow: 0 2px 16px rgba(26, 26, 46, .08);--shadow-lg: 0 8px 32px rgba(26, 26, 46, .12);--font-hanzi: "Noto Serif SC", serif;--font-body: "Inter", system-ui, sans-serif}html,body{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#root{min-height:100%;max-width:480px;margin:0 auto;padding:24px 16px 40px}h1,h2{font-family:var(--font-body);font-weight:600}.login{display:flex;flex-direction:column;align-items:center;padding-top:20vh;gap:32px}.login-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.home{display:flex;flex-direction:column;align-items:center;padding-top:20vh;gap:32px;position:relative}.app-title{text-align:center}.title-hanzi{display:block;font-family:var(--font-hanzi);font-size:3.5rem;font-weight:700;letter-spacing:.08em;color:var(--ink)}.title-sub{display:block;font-size:1rem;font-weight:500;color:var(--ink-muted);letter-spacing:.2em;text-transform:uppercase;margin-top:4px}.stats-bar{display:flex;gap:32px}.stat{text-align:center}.stat-number{display:block;font-size:1.75rem;font-weight:600;color:var(--ink)}.stat-label{font-size:.8rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em}.stat-due{cursor:pointer}.stat-due .stat-number{color:var(--accent)}.home-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.btn-browse{background:var(--amber);color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px}.btn-browse:hover{background:#b08830}.btn-browse-char{font-family:var(--font-hanzi);font-size:2rem;font-weight:700;line-height:1.2}.btn-browse-sub{font-size:.75rem;font-weight:400;opacity:.85}.btn{border:none;cursor:pointer;font-family:var(--font-body);font-size:.95rem;font-weight:500;border-radius:var(--radius);padding:12px 20px;transition:all .15s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-large{padding:16px 24px;font-size:1.05rem}.btn-primary{background:var(--ink);color:var(--bg)}.btn-primary:hover:not(:disabled){background:#2a2a4e}.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}.btn-secondary:hover{background:var(--ink);color:var(--bg)}.btn-ghost{background:transparent;color:var(--ink-light)}.btn-ghost:hover{color:var(--ink);background:#1a1a2e0d}.btn-autofill{background:var(--accent);color:#fff;white-space:nowrap}.btn-autofill:hover:not(:disabled){background:var(--accent-hover)}.flashcard-container{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}.flashcard{width:100%;max-width:360px;aspect-ratio:3 / 4;perspective:1000px;cursor:pointer;position:relative}.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);background:var(--bg-card);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;transition:transform .5s ease}.flashcard-front{transform:rotateY(0)}.flashcard-back{transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.hanzi-display{font-family:var(--font-hanzi);font-size:5rem;font-weight:700;color:var(--ink);line-height:1.2}.tap-hint{position:absolute;bottom:20px;font-size:.75rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.15em}.back-content{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;overflow-y:auto;max-height:100%;width:100%}.hanzi-reminder{font-family:"Noto Serif SC",serif;font-size:2rem;color:var(--ink)}.pinyin{font-size:1.5rem;font-weight:500;color:var(--accent)}.translation{font-size:1.2rem;color:var(--ink)}.word-box,.context{display:flex;flex-direction:column;gap:4px;padding:12px;background:#1a1a2e08;border-radius:8px;width:100%}.context-clickable{cursor:pointer;position:relative;transition:background .15s}.context-clickable:hover{background:#1a1a2e12}.context-clickable:hover .context-speaker{opacity:.6}.context-clickable.speaking .context-speaker{opacity:1;animation:pulse-speak 1s ease-in-out infinite}.context-zh{font-family:var(--font-hanzi);font-style:normal;font-size:1.05rem;color:var(--ink)}.context-en{font-style:italic;font-size:.85rem;color:var(--ink-muted)}.context-speaker{position:absolute;top:8px;right:8px;font-size:.75rem;opacity:.3;transition:opacity .15s}.rating-buttons{display:flex;gap:8px;width:100%;max-width:360px}.rate-btn{flex:1;border:none;cursor:pointer;font-family:var(--font-body);font-size:.85rem;font-weight:600;padding:14px 8px;border-radius:var(--radius);color:#fff;transition:opacity .15s}.rate-btn:active{opacity:.85}.rate-again{background:var(--red)}.rate-good{background:var(--green)}.btn-speak{background:none;border:none;cursor:pointer;font-size:1.5rem;padding:4px 8px;border-radius:8px;color:var(--ink-muted);transition:color .15s,background .15s;line-height:1;flex-shrink:0}.btn-speak:hover{color:var(--accent);background:#1a1a2e0f}.btn-speak.speaking{color:var(--accent);animation:pulse-speak 1s ease-in-out infinite}.btn-speak-sm{font-size:1rem;padding:2px 6px}@keyframes pulse-speak{0%,to{opacity:1}50%{opacity:.4}}.review-session{display:flex;flex-direction:column;align-items:center;padding-top:12vh;gap:20px}.review-progress{font-size:.85rem;color:var(--ink-muted);letter-spacing:.1em}.review-back{margin-top:16px}.session-empty,.session-complete{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.empty-icon,.complete-icon{font-size:2.5rem}.empty-sub,.complete-sub{color:var(--ink-muted);font-size:.9rem}.add-word{display:flex;flex-direction:column;gap:16px}.add-word h2{margin-bottom:4px}.form-row{display:flex;gap:8px}.hanzi-row .input-hanzi{flex:1;font-family:var(--font-hanzi);font-size:1.3rem}.input-field,.input-hanzi{width:100%;padding:12px 14px;font-family:var(--font-body);font-size:.95rem;border:1.5px solid rgba(26,26,46,.15);border-radius:var(--radius);background:var(--bg-card);color:var(--ink);outline:none;transition:border-color .15s}.input-field:focus,.input-hanzi:focus{border-color:var(--ink)}textarea.input-field{resize:vertical;line-height:1.5}.error-msg{color:var(--red);font-size:.85rem}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.word-list{display:flex;flex-direction:column;gap:16px}.list-header{display:flex;justify-content:space-between;align-items:center}.empty-list{color:var(--ink-muted);text-align:center;padding:40px 0}.words{list-style:none;display:flex;flex-direction:column;gap:2px}.word-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg-card);border-radius:var(--radius);cursor:pointer;transition:box-shadow .15s}.word-item:hover{box-shadow:var(--shadow)}.word-main{display:flex;align-items:baseline;gap:12px;flex:1;min-width:0}.word-hanzi{font-family:var(--font-hanzi);font-size:1.3rem;font-weight:700;flex-shrink:0}.word-pinyin{font-size:.9rem;color:var(--accent);flex-shrink:0}.word-translation{font-size:.85rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.word-actions{display:flex;gap:4px;flex-shrink:0;margin-left:8px}.btn-icon{background:none;border:none;cursor:pointer;font-size:.9rem;padding:4px 8px;border-radius:6px;color:var(--ink-muted)}.btn-icon:hover{background:#1a1a2e0f}.btn-listen:hover{color:var(--accent)}.btn-listen.speaking{color:var(--accent);animation:pulse-speak 1s ease-in-out infinite}.btn-delete:hover{color:var(--red)}.btn-confirm-del{color:var(--red);font-weight:600}.list-footer{display:flex;justify-content:center;margin-top:8px}.browse-cards{display:flex;flex-direction:column;gap:16px;margin-top:16px}.browse-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;text-align:center;cursor:pointer;position:relative;transition:box-shadow .2s,opacity .2s}.browse-card:active{box-shadow:var(--shadow-lg)}.browse-card-speak{position:absolute;top:12px;right:12px}.browse-hanzi{display:block;font-family:var(--font-hanzi);font-size:2.5rem;font-weight:700;color:var(--ink);margin-bottom:8px}.browse-pinyin{display:block;font-size:1rem;color:var(--accent);margin-bottom:4px}.browse-translation{display:block;font-size:.9rem;color:var(--ink-muted)}.browse-detail{display:flex;flex-direction:column;gap:24px}.browse-detail-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:10vh;text-align:center}.browse-detail-hanzi-section{padding:24px;background:#1a1a2e08;border-radius:8px;text-align:center}.browse-detail-hanzi{font-family:var(--font-hanzi);font-size:4rem;font-weight:700;color:var(--ink)}.browse-detail-pinyin{font-size:1.5rem;font-weight:500;color:var(--accent)}.browse-detail-translation{font-size:1.2rem;color:var(--ink)}.gear-btn{position:absolute;top:16px;right:16px;background:transparent;border:none;font-size:1.4rem;color:var(--ink-muted);cursor:pointer;padding:8px}.gear-btn:hover{color:var(--ink)}.settings-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;margin:32px auto 0}.btn-danger{background:var(--red);color:#fff}.settings-section{margin-bottom:32px}.settings-section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);margin-bottom:12px}