*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--blue: #3B82F6;--blue-dk: #2563EB;--green: #10B981;--yellow: #F59E0B;--red: #EF4444;--bg: #F3F4F6;--surface: #FFFFFF;--border: #E5E7EB;--text: #111827;--muted: #6B7280;--radius: 12px;--safe-bottom: env(safe-area-inset-bottom, 0px)}@media(prefers-color-scheme:dark){:root{--bg: #111827;--surface: #1F2937;--border: #4B5563;--text: #F9FAFB;--muted: #9CA3AF;--input-bg: #111827}}html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg);min-height:100%;-webkit-font-smoothing:antialiased}#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;padding:0 1rem calc(1rem + var(--safe-bottom))}.topbar{display:flex;align-items:center;gap:.5rem;padding:1rem 0 .75rem;position:sticky;top:0;background:var(--bg);z-index:10}.topbar h1{font-size:1.25rem;font-weight:700;flex:1}.btn-ghost{background:none;border:none;color:var(--blue);font-size:.95rem;font-weight:500;cursor:pointer;padding:.25rem .5rem;border-radius:6px;white-space:nowrap}.btn-ghost:active{opacity:.7}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .25rem;text-align:center}.stat-value{font-size:1.4rem;font-weight:700;line-height:1;color:var(--blue)}.stat-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius);padding:.75rem 1.25rem;cursor:pointer;transition:opacity .1s,transform .1s;-webkit-tap-highlight-color:transparent}.btn:active{opacity:.85;transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--blue);color:#fff;width:100%}.btn-success{background:var(--green);color:#fff}.btn-warning{background:var(--yellow);color:#fff}.btn-danger{background:var(--red);color:#fff}.btn-outline{background:none;border:1.5px solid var(--border);color:var(--text)}.btn-sm{font-size:.85rem;padding:.4rem .75rem;border-radius:8px}.input-row{display:flex;gap:.5rem;margin-bottom:.75rem}input[type=text],input[type=email],input[type=password],textarea{background:var(--input-bg, var(--surface));border:1.5px solid var(--border);border-radius:var(--radius);padding:.65rem .85rem;font-size:1rem;color:var(--text);width:100%;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3b82f626}.input-label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.35rem;letter-spacing:.02em}textarea{resize:vertical;min-height:72px;font-family:inherit}.study-progress{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}.progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .3s ease}.progress-text{font-size:.8rem;color:var(--muted);white-space:nowrap}.study-word{text-align:center;font-size:2rem;font-weight:700;letter-spacing:-.02em;padding:2rem 1rem 1.5rem}.study-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem;animation:fadeIn .25s ease}.study-section-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem}.study-section p{line-height:1.6}.word-hi{color:var(--red);font-weight:600}.examples p+p{margin-top:.5rem}.tap-hint{text-align:center;color:var(--muted);font-size:.85rem;padding:1rem 0;cursor:pointer;-webkit-user-select:none;user-select:none}.rating-row{display:flex;gap:.5rem;margin-top:1rem;animation:fadeIn .25s ease}.rating-row .btn{flex:1}.filter-tabs{display:flex;gap:.375rem;margin-bottom:.875rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab{padding:.35rem .85rem;border-radius:99px;border:1.5px solid var(--border);background:none;color:var(--muted);font-size:.85rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}.tab.active{background:var(--blue);border-color:var(--blue);color:#fff}.word-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .1s}.word-item:active{opacity:.7}.word-item-word{font-weight:600;flex:1}.word-item-meta{font-size:.75rem;color:var(--muted)}.badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;border-radius:99px}.badge-new{background:#dbeafe;color:#1d4ed8}.badge-learning{background:#fef3c7;color:#92400e}.badge-learned{background:#d1fae5;color:#065f46}@media(prefers-color-scheme:dark){.badge-new{background:#1e3a5f;color:#93c5fd}.badge-learning{background:#451a03;color:#fcd34d}.badge-learned{background:#064e3b;color:#6ee7b7}}.field-block{margin-bottom:1rem}.field-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}.field-actions{margin-left:auto;display:flex;gap:.25rem}.edit-area-wrap{position:relative}.spinner-inline{display:none;position:absolute;right:.65rem;top:50%;transform:translateY(-50%);width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}.toast{position:fixed;bottom:calc(1.25rem + var(--safe-bottom));left:50%;transform:translate(-50%);background:#1f2937;color:#f9fafb;padding:.65rem 1.25rem;border-radius:99px;font-size:.875rem;font-weight:500;z-index:9999;pointer-events:none;white-space:nowrap;animation:slideUp .2s ease;max-width:90vw;text-align:center}.toast-error{background:var(--red)}.toast-success{background:var(--green)}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9998;gap:1rem}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.loading-overlay p{color:#fff;font-size:.95rem;font-weight:500}.complete-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:2rem 1rem}.complete-screen .big-emoji{font-size:4rem}.complete-screen h2{font-size:1.75rem;font-weight:700}.complete-screen p{color:var(--muted)}.divider{border:none;border-top:1px solid var(--border);margin:.75rem 0}.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}.empty p+p{margin-top:.5rem;font-size:.875rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}