:root{--primary:#4f46e5;--primary-light:#818cf8;--primary-dark:#3730a3;--primary-bg:#eef2ff;--accent:#f59e0b;--accent-bg:#fef3c7;--green:#10b981;--green-bg:#d1fae5;--red:#ef4444;--red-bg:#fee2e2;--blue:#3b82f6;--purple:#a855f7;--bg:#fafafc;--surface:#fff;--surface2:#f4f4f8;--border:#e5e7eb;--border2:#d1d5db;--text:#111827;--text2:#6b7280;--text3:#9ca3af;--r-sm:8px;--r:14px;--r-lg:20px;--r-xl:28px;--shadow:0 2px 16px #1118270f;--shadow-lg:0 12px 40px #1118271f;--shadow-primary:0 8px 24px #4f46e547}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{outline:none;font-family:inherit}a{color:inherit;text-decoration:none}ul{list-style:none}#root{min-height:100vh}.app-shell{min-height:100vh;display:flex}.app-main{flex-direction:column;flex:1;min-width:0;display:flex}.app-content{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:2rem 2.5rem}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:248px;height:100vh;display:flex;position:sticky;top:0}.sidebar-logo{align-items:center;gap:.6rem;padding:1.5rem 1.5rem 1.2rem;font-family:Sora,sans-serif;font-size:1.3rem;font-weight:800;display:flex}.sidebar-logo .dot{background:var(--accent);border-radius:50%;width:10px;height:10px}.sidebar-nav{flex-direction:column;flex:1;gap:.2rem;padding:.5rem .9rem;display:flex}.sidebar-section{color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:1rem .8rem .4rem;font-size:.68rem;font-weight:700}.nav-item{border-radius:var(--r-sm);color:var(--text2);text-align:left;align-items:center;gap:.8rem;width:100%;padding:.7rem .85rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:var(--primary-bg);color:var(--primary)}.nav-icon{text-align:center;width:22px;font-size:1.15rem}.sidebar-footer{border-top:1px solid var(--border);padding:1rem}.sidebar-user{border-radius:var(--r-sm);cursor:pointer;align-items:center;gap:.7rem;padding:.5rem;transition:background .2s;display:flex}.sidebar-user:hover{background:var(--surface2)}.mobile-header,.mobile-bottom-nav{display:none}.avatar{background:var(--primary-bg);color:var(--primary);object-fit:cover;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-family:Sora,sans-serif;font-weight:800;display:inline-flex}.avatar-xs{width:28px;height:28px;font-size:.7rem}.avatar-sm{width:38px;height:38px;font-size:.85rem}.avatar-md{width:52px;height:52px;font-size:1.1rem}.avatar-lg{width:84px;height:84px;font-size:1.8rem}.btn{border-radius:var(--r);justify-content:center;align-items:center;gap:.55rem;padding:.75rem 1.4rem;font-family:Sora,sans-serif;font-size:.92rem;font-weight:700;transition:all .18s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-secondary{background:var(--surface2);color:var(--text);border:1.5px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-ghost{color:var(--text2);background:0 0}.btn-ghost:hover{background:var(--surface2);color:var(--text)}.btn-green{background:var(--green);color:#fff}.btn-red{background:var(--red);color:#fff}.btn-block{width:100%}.btn-lg{border-radius:var(--r-lg);padding:1rem 2rem;font-size:1rem}.btn-sm{padding:.5rem 1rem;font-size:.82rem}.btn-icon{border-radius:50%;width:40px;height:40px;padding:0}.form-group{margin-bottom:1rem}.form-label{color:var(--text2);margin-bottom:.4rem;font-size:.8rem;font-weight:600;display:block}.form-input,.form-select,.form-textarea{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;color:var(--text);padding:.75rem 1rem;font-size:.94rem;transition:border-color .2s,background .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);background:var(--surface)}.form-input::placeholder{color:var(--text3)}.card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);padding:1.5rem}.card-hover{transition:transform .2s,box-shadow .2s}.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.page-title{margin-bottom:.3rem;font-family:Sora,sans-serif;font-size:1.7rem;font-weight:800}.page-sub{color:var(--text2);font-size:.92rem}.page-header{margin-bottom:2rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.quick-access-grid{grid-template-columns:repeat(4,1fr);gap:.8rem;display:grid}.quick-access-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);text-align:center;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .6rem;transition:all .2s;display:flex}.quick-access-card:hover{border-color:var(--primary-light);background:var(--primary-bg);transform:translateY(-2px)}.qa-icon{font-size:1.7rem}.qa-label{color:var(--text);font-size:.78rem;font-weight:600}.stat-card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);padding:1.3rem;position:relative;overflow:hidden}.stat-card:before{content:"";opacity:.12;border-radius:50%;width:90px;height:90px;position:absolute;top:-30px;right:-30px}.stat-card.c-primary:before{background:var(--primary)}.stat-card.c-accent:before{background:var(--accent)}.stat-card.c-green:before{background:var(--green)}.stat-card.c-purple:before{background:var(--purple)}.stat-icon{margin-bottom:.6rem;font-size:1.6rem}.stat-value{font-family:Sora,sans-serif;font-size:1.8rem;font-weight:800;line-height:1}.stat-label{color:var(--text2);margin-top:.3rem;font-size:.78rem;font-weight:500}.xp-bar-wrap{margin:.6rem 0}.xp-bar-labels{color:var(--text2);justify-content:space-between;margin-bottom:.4rem;font-size:.78rem;display:flex}.xp-bar{background:var(--surface2);border-radius:50px;height:10px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:50px;height:100%;transition:width .8s}.setup-grid{grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.5rem;display:grid}.mode-grid-3{grid-template-columns:1fr 1fr 1fr;gap:.9rem;display:grid}.mode-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);text-align:center;cursor:pointer;padding:1.6rem;transition:all .2s}.mode-card:hover{border-color:var(--primary-light)}.mode-card.selected{border-color:var(--primary);background:var(--primary-bg)}.mode-icon{margin-bottom:.6rem;font-size:2.4rem}.mode-title{margin-bottom:.3rem;font-family:Sora,sans-serif;font-size:1.05rem;font-weight:700}.mode-desc{color:var(--text2);font-size:.82rem}.count-selector{justify-content:center;align-items:center;gap:1rem;margin:1rem 0;display:flex}.count-btn{background:var(--surface2);border:1.5px solid var(--border);width:42px;height:42px;color:var(--text);border-radius:50%;font-size:1.2rem;font-weight:700;transition:all .2s}.count-btn:hover{background:var(--primary-bg);border-color:var(--primary);color:var(--primary)}.count-display{text-align:center;min-width:90px;font-family:Sora,sans-serif;font-size:2.2rem;font-weight:800}.count-presets{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.8rem;display:flex}.preset-chip{background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);border-radius:50px;padding:.4rem 1rem;font-size:.82rem;font-weight:600;transition:all .2s}.preset-chip:hover,.preset-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.practice-wrap{max-width:560px;margin:0 auto}.practice-progress{margin-bottom:2rem}.practice-progress-bar{background:var(--surface2);border-radius:50px;height:8px;margin-bottom:.6rem;overflow:hidden}.practice-progress-fill{background:var(--primary);border-radius:50px;height:100%;transition:width .3s}.practice-progress-text{color:var(--text2);justify-content:space-between;font-size:.82rem;display:flex}.word-card{background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--border);text-align:center;box-shadow:var(--shadow);flex-direction:column;justify-content:center;align-items:center;min-height:220px;margin-bottom:1.5rem;padding:3rem 2rem;display:flex;position:relative}.word-display{color:var(--text);margin-bottom:.6rem;font-family:Sora,sans-serif;font-size:2.6rem;font-weight:800}.word-display.phrase-display{max-width:440px;font-size:1.5rem;line-height:1.45}.word-hint{color:var(--text3);font-size:.85rem}.word-category-badge{background:var(--surface2);color:var(--text2);border-radius:50px;padding:.25rem .7rem;font-size:.7rem;font-weight:600;position:absolute;top:1.2rem;right:1.2rem}.answer-input-wrap{margin-bottom:1rem;position:relative}.answer-input{text-align:center;border:2px solid var(--border);border-radius:var(--r-lg);background:var(--surface);width:100%;padding:1.1rem 1.3rem;font-family:Sora,sans-serif;font-size:1.3rem;font-weight:600;transition:border-color .2s}.answer-input:focus{border-color:var(--primary)}.answer-input.correct{border-color:var(--green);background:var(--green-bg)}.answer-input.wrong{border-color:var(--red);background:var(--red-bg)}.speak-btn-wrap{flex-direction:column;align-items:center;gap:1rem;display:flex}.mic-btn{background:var(--primary);color:#fff;width:96px;height:96px;box-shadow:var(--shadow-primary);border-radius:50%;justify-content:center;align-items:center;font-size:2.2rem;transition:all .2s;display:flex;position:relative}.mic-btn:hover{transform:scale(1.05)}.mic-btn.listening{background:var(--red);animation:1.4s ease-in-out infinite pulse-mic}@keyframes pulse-mic{0%,to{box-shadow:0 0 #ef444480}50%{box-shadow:0 0 0 16px #ef444400}}.speak-transcript{color:var(--text2);min-height:1.6rem;font-size:1.1rem;font-weight:600}.speak-hint{color:var(--text3);font-size:.82rem}.listen-card{background:linear-gradient(135deg,var(--primary-bg) 0%,var(--surface) 100%)}.listen-play-btn{background:var(--primary);color:#fff;width:110px;height:110px;box-shadow:var(--shadow-primary);border-radius:50%;justify-content:center;align-items:center;margin-top:.6rem;font-size:2.6rem;transition:all .2s;display:flex}.listen-play-btn:hover:not(:disabled){transform:scale(1.06)}.listen-play-btn:disabled{opacity:.7;cursor:not-allowed}.listen-play-btn.playing{animation:1s ease-in-out infinite listenPulse}@keyframes listenPulse{0%,to{box-shadow:0 0 #4f46e566}50%{box-shadow:0 0 0 18px #4f46e500}}.feedback-banner{border-radius:var(--r);align-items:center;gap:.6rem;margin-bottom:1rem;padding:.9rem 1.2rem;font-size:.95rem;font-weight:600;animation:.3s feedbackIn;display:flex}@keyframes feedbackIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.feedback-banner.correct{background:var(--green-bg);color:#047857}.feedback-banner.wrong{background:var(--red-bg);color:#b91c1c}.practice-actions{gap:.8rem;display:flex}.result-wrap{text-align:center;max-width:520px;margin:0 auto;padding-top:1rem}.result-emoji{margin-bottom:1rem;font-size:4.5rem;animation:.6s cubic-bezier(.34,1.56,.64,1) resultPop}@keyframes resultPop{0%{transform:scale(0)rotate(-15deg)}to{transform:scale(1)rotate(0)}}.result-title{margin-bottom:.4rem;font-family:Sora,sans-serif;font-size:1.6rem;font-weight:800}.result-sub{color:var(--text2);margin-bottom:1.8rem;font-size:.92rem}.result-stats{grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.8rem;display:grid}.result-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem}.result-stat-value{font-family:Sora,sans-serif;font-size:1.5rem;font-weight:800}.result-stat-label{color:var(--text2);margin-top:.2rem;font-size:.75rem}.result-xp-banner{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:var(--r-lg);margin-bottom:1.5rem;padding:1.2rem}.result-xp-amount{font-family:Sora,sans-serif;font-size:1.8rem;font-weight:800}.achievement-toast{background:var(--accent-bg);border:1.5px solid var(--accent);border-radius:var(--r);text-align:left;align-items:center;gap:.8rem;margin-bottom:.8rem;padding:.9rem 1.1rem;display:flex}.achievement-icon{font-size:1.8rem}.review-list{text-align:left;margin-top:1.5rem}.review-item{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.7rem 0;display:flex}.review-item:last-child{border-bottom:none}.review-word{font-weight:700}.review-answer{color:var(--red);font-size:.85rem}.word-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;display:grid}.word-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;transition:all .2s}.word-item:hover{border-color:var(--primary-light)}.word-item-en{font-family:Sora,sans-serif;font-size:1.05rem;font-weight:700}.word-item-pt{color:var(--text2);margin-top:.2rem;font-size:.85rem}.mastery-dots{gap:.25rem;margin-top:.6rem;display:flex}.mastery-dot{background:var(--border);border-radius:50%;width:7px;height:7px}.mastery-dot.filled{background:var(--green)}.ach-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;display:grid}.ach-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);text-align:center;padding:1.3rem;transition:all .2s}.ach-card.locked{opacity:.4}.ach-card.unlocked{border-color:var(--accent);background:var(--accent-bg)}.ach-icon{margin-bottom:.5rem;font-size:2.2rem}.ach-label{margin-bottom:.2rem;font-size:.88rem;font-weight:700}.ach-desc{color:var(--text2);font-size:.74rem}.tabs{background:var(--surface2);border-radius:var(--r-sm);gap:.4rem;width:fit-content;margin-bottom:1.5rem;padding:.3rem;display:flex}.tab{color:var(--text2);border-radius:6px;padding:.55rem 1.1rem;font-size:.85rem;font-weight:600;transition:all .2s}.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px #00000014}.filter-bar{flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem;display:flex}.filter-chip{background:var(--surface2);border:1.5px solid var(--border);color:var(--text2);border-radius:50px;padding:.4rem .9rem;font-size:.8rem;font-weight:600;transition:all .2s}.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.auth-screen{background:linear-gradient(135deg,var(--primary-bg) 0%,#fff 60%);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-card{background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:420px;box-shadow:var(--shadow-lg);padding:2.5rem}.auth-logo{text-align:center;justify-content:center;align-items:center;gap:.5rem;margin-bottom:.3rem;font-family:Sora,sans-serif;font-size:1.8rem;font-weight:800;display:flex}.auth-sub{text-align:center;color:var(--text2);margin-bottom:1.8rem;font-size:.88rem}.auth-switch{text-align:center;color:var(--text2);margin-top:1.2rem;font-size:.85rem}.auth-switch span{color:var(--primary);cursor:pointer;font-weight:700}.toast-wrap{z-index:999;flex-direction:column;gap:.5rem;display:flex;position:fixed;top:1.2rem;right:1.2rem}.toast{background:var(--text);color:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);align-items:center;gap:.5rem;min-width:220px;padding:.8rem 1.2rem;font-size:.88rem;font-weight:500;animation:.3s toastIn;display:flex}.toast.ok{background:var(--green)}.toast.err{background:var(--red)}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.empty{text-align:center;padding:3rem 1.5rem}.empty-icon{opacity:.5;margin-bottom:.7rem;font-size:3rem}.empty-title{margin-bottom:.3rem;font-weight:700}.empty-desc{color:var(--text2);font-size:.85rem}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:22px;height:22px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-center{justify-content:center;align-items:center;min-height:300px;display:flex}.streak-badge{background:var(--accent-bg);color:#92400e;border-radius:50px;align-items:center;gap:.4rem;padding:.4rem .9rem;font-size:.85rem;font-weight:700;display:inline-flex}@media (width<=860px){.app-shell{flex-direction:column}.sidebar{display:none}.mobile-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:50;justify-content:space-between;align-items:center;padding:1rem 1.2rem;display:flex;position:sticky;top:0}.mobile-logo{font-family:Sora,sans-serif;font-size:1.2rem;font-weight:800}.app-content{padding:1.2rem 1.2rem 5rem}.mobile-bottom-nav{background:var(--surface);border-top:1px solid var(--border);z-index:50;grid-template-columns:repeat(4,1fr);height:64px;display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-nav-btn{color:var(--text3);flex-direction:column;justify-content:center;align-items:center;gap:.2rem;font-size:.65rem;font-weight:600;display:flex}.mobile-nav-btn.active{color:var(--primary)}.setup-grid,.mode-grid-3{grid-template-columns:1fr}.stats-grid,.quick-access-grid{grid-template-columns:repeat(2,1fr)}.result-stats{grid-template-columns:1fr;gap:.6rem}.word-card{padding:2rem 1.2rem}.word-display{font-size:2rem}}