:root{--color-bg:#f4fbff;--color-surface:#fff;--color-primary:#3478f6;--color-primary-dark:#1f4fa3;--color-success:#62b86f;--color-success-soft:#e8f8eb;--color-warning-soft:#fff6d8;--color-card-blue:linear-gradient(135deg, #64b5f6 0%, #2196f3 100%);--color-card-yellow:linear-gradient(135deg, #fff176 0%, #ffb300 100%);--color-card-pink:linear-gradient(135deg, #f06292 0%, #e91e63 100%);--color-card-green:linear-gradient(135deg, #81c784 0%, #4caf50 100%);--color-card-purple:linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);--color-card-orange:linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);--color-card-teal:linear-gradient(135deg, #4db6ac 0%, #009688 100%);--color-card-red:linear-gradient(135deg, #e57373 0%, #f44336 100%);--color-card-indigo:linear-gradient(135deg, #7986cb 0%, #3f51b5 100%);--text-main:#17315c;--text-muted:#5f6f89;--radius-card:28px;--radius-button:999px;--shadow-card-3d:0 6px 0 #17315c40, 0 12px 20px #17315c26;--shadow-card-3d-pressed:0 2px 0 #17315c40, 0 4px 8px #17315c26;--shadow-inset-candy:inset 0 4px 6px #fff9;--shadow-inset-candy-pressed:inset 0 2px 4px #fff6;--shadow-button:0 6px 0 #1f4fa3, 0 12px 20px #3478f64d;--shadow-button-pressed:0 2px 0 #1f4fa3, 0 4px 8px #3478f64d}.home-screen{flex-direction:column;align-items:center;width:100%;display:flex}.app-title{text-align:center;color:var(--text-main);margin-bottom:32px;font-size:40px;font-weight:800}.categories-grid{grid-template-columns:repeat(2,1fr);gap:20px;width:100%;max-width:800px;display:grid}.category-screen{flex-direction:column;width:100%;height:100%;display:flex}.words-grid{width:100%;max-width:1000px;margin:env(safe-area-inset-top,0px) auto 40px auto;grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.phrases-list{max-width:1000px;margin:0 auto}.bottom-action{padding:20px 0 env(safe-area-inset-bottom,0px) 0;justify-content:center;margin-top:auto;display:flex}@media (width>=768px){.categories-grid{gap:32px}.words-grid{grid-template-columns:repeat(2,1fr);gap:32px}.app-title{margin-bottom:48px;font-size:48px}.header-title{font-size:38px}.header-icon{font-size:42px}}.quiz-screen{flex-direction:column;align-items:center;width:100%;height:100%;display:flex}.quiz-prompt{text-align:center;color:var(--text-main);margin:24px 0 48px;font-size:40px;font-weight:800}.quiz-choices{grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:900px;margin:0 auto 48px;display:grid}@media (width<=600px){.quiz-choices{grid-template-columns:1fr}}.quiz-feedback-panel{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:120px;display:flex}.listen-again-btn{border-radius:var(--radius-button);background-color:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-card);padding:16px 32px;font-size:24px;font-weight:700;transition:transform .12s}.listen-again-btn:active{transform:scale(.95)}.feedback-message{flex-direction:column;align-items:center;gap:16px;animation:.3s fadeIn;display:flex}.feedback-text{font-size:32px;font-weight:800}.feedback-message.correct .feedback-text{color:var(--color-success)}.feedback-message.wrong .feedback-text{color:var(--text-muted)}.next-btn{border-radius:var(--radius-button);background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-button);padding:16px 40px;font-size:24px;font-weight:700;transition:transform .12s}.next-btn:active{transform:scale(.95)}.quiz-finished{flex:1;justify-content:center}.finished-actions{flex-direction:column;gap:20px;width:100%;max-width:400px;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpBounce{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;background-image:radial-gradient(#3478f614 3px,#0000 3px);background-size:32px 32px;font-family:ui-rounded,Nunito,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none;outline:none}#root{flex-direction:column;min-height:100vh;display:flex}@keyframes gentlePulse{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes breathe{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.cardBlue{background:var(--color-card-blue)}.cardYellow{background:var(--color-card-yellow)}.cardPink{background:var(--color-card-pink)}.cardGreen{background:var(--color-card-green)}.cardPurple{background:var(--color-card-purple)}.cardOrange{background:var(--color-card-orange)}.cardTeal{background:var(--color-card-teal)}.cardRed{background:var(--color-card-red)}.cardIndigo{background:var(--color-card-indigo)}.category-card{border-radius:var(--radius-card);box-shadow:var(--shadow-inset-candy), var(--shadow-card-3d);border:2px solid #fff3;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:140px;padding:24px 16px;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1);animation:.5s cubic-bezier(.175,.885,.32,1.275) backwards slideUpBounce;display:flex}.category-card:active{box-shadow:var(--shadow-inset-candy-pressed), var(--shadow-card-3d-pressed);transform:translateY(4px)scale(.98)}.category-icon{margin-bottom:12px;font-size:80px}.category-label{text-align:center;font-size:32px;font-weight:700;line-height:1.2}.subtitle-pill{color:color-mix(in srgb, var(--text-main) 70%, transparent);background-color:#fff6;border-radius:999px;align-self:center;margin-top:8px;padding:4px 12px;font-size:16px;font-weight:600}.word-card{border-radius:var(--radius-card);background-color:var(--color-surface);box-shadow:var(--shadow-inset-candy), var(--shadow-card-3d);border:2px solid #fff3;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:160px;padding:24px 16px;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1);animation:.5s cubic-bezier(.175,.885,.32,1.275) backwards slideUpBounce;display:flex}.word-card:active{box-shadow:var(--shadow-inset-candy-pressed), var(--shadow-card-3d-pressed);transform:translateY(4px)scale(.98)}.word-icon{margin-bottom:16px;font-size:96px}.word-label{text-align:center;font-size:28px;font-weight:700;line-height:1.2}.big-button{border-radius:var(--radius-button);border:2px solid #fff3;justify-content:center;align-items:center;gap:12px;width:100%;max-width:400px;margin:0 auto;padding:20px 40px;font-size:28px;font-weight:700;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1);display:flex}.big-button.primary{background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-inset-candy), var(--shadow-button);animation:3s ease-in-out infinite breathe}.big-button.primary:active{box-shadow:var(--shadow-inset-candy-pressed), var(--shadow-button-pressed);background-color:var(--color-primary-dark);animation:none;transform:translateY(4px)scale(.98)}.big-button.secondary{background-color:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-inset-candy), var(--shadow-card-3d)}.big-button.secondary:active{box-shadow:var(--shadow-inset-candy-pressed), var(--shadow-card-3d-pressed);transform:translateY(4px)scale(.98)}.app-shell{flex-direction:column;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:24px;display:flex}.quiz-choice-card{border-radius:var(--radius-card);background-color:var(--color-surface);box-shadow:var(--shadow-inset-candy), var(--shadow-card-3d);border:2px solid #fff3;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:160px;padding:24px 16px;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),background-color .2s;display:flex}.quiz-choice-card:not(:disabled):active{box-shadow:var(--shadow-inset-candy-pressed), var(--shadow-card-3d-pressed);transform:translateY(4px)scale(.98)}.quiz-choice-card:disabled{cursor:default}.correct-choice{background-color:var(--color-success-soft);box-shadow:0 0 0 6px var(--color-success);animation:.5s gentlePulse,.6s cubic-bezier(.175,.885,.32,1.275) correctBurst}@keyframes correctBurst{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.wrong-choice{background-color:var(--color-warning-soft);animation:.4s gentleShake}@keyframes gentleShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.routine-card{border-radius:var(--radius-card);background-color:var(--color-surface);box-shadow:var(--shadow-card);text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:120px;padding:32px 24px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;animation:.5s cubic-bezier(.175,.885,.32,1.275) backwards slideUpBounce;display:flex}.routine-card:active{box-shadow:var(--shadow-pressed);transform:scale(.94)}.routine-label-vi{color:var(--text-main);margin-bottom:8px;font-size:32px;font-weight:800}.routine-label-en{color:var(--text-muted);font-size:20px;font-weight:600}.word-image{object-fit:contain;width:200px;max-width:100%;height:200px;margin-bottom:16px}.category-image{object-fit:contain;width:180px;max-width:100%;height:180px;margin-bottom:12px}.app-header{z-index:100;width:100%;padding:calc(18px + env(safe-area-inset-top,0px)) 24px 18px 24px;background:color-mix(in srgb, var(--color-bg) 85%, transparent);-webkit-backdrop-filter:blur(16px);border-bottom:1.5px solid #17315c0f;grid-template-columns:56px 1fr 56px;align-self:stretch;align-items:center;margin:-24px -24px 32px;transition:padding .2s,box-shadow .2s,border-bottom-color .2s;display:grid;position:sticky;top:0}.app-header.is-scrolled{padding:calc(12px + env(safe-area-inset-top,0px)) 24px 12px 24px;border-bottom-color:#17315c1f;box-shadow:0 4px 20px #22437814}.header-left,.header-right{justify-content:center;align-items:center;min-height:56px;display:flex}.header-back-button{color:var(--color-primary);background-color:var(--color-surface);width:56px;height:56px;box-shadow:var(--shadow-card);border-radius:50%;justify-content:center;align-items:center;padding-bottom:4px;font-size:36px;line-height:1;transition:transform .12s,box-shadow .12s;display:flex}.header-back-button:active{box-shadow:var(--shadow-pressed);transform:scale(.92)}.header-center{text-align:center;justify-content:center;align-items:center;display:flex;overflow:hidden}.header-title{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;justify-content:center;align-items:center;gap:10px;margin:0;padding:0;font-size:32px;font-weight:800;line-height:1.2;display:flex;overflow:hidden}.header-icon{flex-shrink:0;font-size:36px}.header-progress-container{background-color:#17315c0d;height:6px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.header-progress-bar{background:linear-gradient(90deg, var(--color-primary) 0%, var(--color-success) 100%);border-radius:0 3px 3px 0;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.login-container{background-color:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:#fff;border-radius:32px;flex-direction:column;align-items:center;width:100%;max-width:400px;padding:40px 30px;display:flex;box-shadow:0 10px 30px #0000000d}.login-header{text-align:center;margin-bottom:30px}.login-icon{margin-bottom:15px;font-size:48px;display:inline-block}.login-header h1{color:var(--text-main);margin-bottom:8px;font-size:24px}.login-header p{color:var(--text-secondary);font-size:16px}.pin-display{gap:15px;margin-bottom:40px;display:flex}.pin-dot{background-color:#f0f0f0;border-radius:50%;width:20px;height:20px;transition:all .2s}.pin-dot.filled{background-color:var(--primary);transform:scale(1.2)}.pin-display.error{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.pin-display.error .pin-dot.filled{background-color:#ef4444}.numpad{grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:280px;display:grid}.numpad-btn{aspect-ratio:1;color:var(--text-main);cursor:pointer;background:#f8fafc;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:24px;font-weight:600;transition:all .1s;display:flex}.numpad-btn:active{background:#e2e8f0;transform:scale(.95)}.delete-btn{color:#64748b;background:0 0;font-size:20px}.delete-btn:active{background:#f1f5f9}.numpad-spacer{pointer-events:none}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}