@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap";:root{--bg:#0a0a0a;--bg-2:#111;--bg-3:#1a1a1a;--surface:#161616;--surface-2:#1e1e1e;--border:#ffffff12;--border-hi:#00cfff47;--text:#f2f2f2;--text-2:#8a8a8a;--text-3:#4a4a4a;--accent:#00cfff;--accent-dim:#00cfff1f;--accent-glow:#00cfff2e;--green:#30d68c;--green-dim:#30d68c1f;--amber:#f5a623;--amber-dim:#f5a6231f;--red:#ff453a;--red-dim:#ff453a1f;--r:14px;--r-lg:20px;--r-xl:24px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font);font-feature-settings:"cv05", "cv11";background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea,select{font:inherit;touch-action:manipulation;color:inherit;background:0 0;border:none;outline:none}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:999px}.app-container{background:var(--bg);flex-direction:column;width:100%;max-width:480px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}.app-header{padding:calc(env(safe-area-inset-top) + 14px) 20px 14px;-webkit-backdrop-filter:blur(20px)saturate(180%);border-bottom:1px solid var(--border);z-index:10;background:#0a0a0ad1;flex-shrink:0;justify-content:space-between;align-items:center;display:flex;position:relative}.app-title{flex-direction:column;gap:2px;display:flex}.app-title span{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-size:10px;font-weight:700}.app-title h1{letter-spacing:-.03em;color:var(--text);font-size:19px;font-weight:700}.header-actions{align-items:center;gap:8px;display:flex}.pill{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-radius:999px;align-items:center;gap:5px;padding:6px 11px;font-size:13px;font-weight:600;display:inline-flex}.pill strong{color:var(--text);font-weight:700}.badge{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-radius:8px;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:600;display:inline-flex}.avatar{background:var(--accent);color:#0a0a0a;border-radius:10px;place-items:center;width:34px;height:34px;font-size:14px;font-weight:800;display:grid}.app-content{z-index:2;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.page-container{-webkit-overflow-scrolling:touch;width:100%;min-height:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;flex:1;gap:12px;display:flex;overflow-y:auto}.app-nav{padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);-webkit-backdrop-filter:blur(24px)saturate(200%);border-top:1px solid var(--border);z-index:10;background:#0a0a0ad9;flex-shrink:0;grid-template-columns:repeat(5,1fr);gap:4px;display:grid;position:relative}.nav-item{border-radius:var(--r);color:var(--text-3);cursor:pointer;letter-spacing:.01em;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 4px;font-size:10px;font-weight:600;transition:color .15s,background .15s;display:flex;position:relative}.nav-item svg{stroke-width:1.8px;width:22px;height:22px}.nav-item span{color:inherit}.nav-item.active{color:var(--accent)}.nav-item.active:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;bottom:3px}.nav-item:active{transform:scale(.94)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px}.card-strong{background:var(--surface-2);border-color:var(--border-hi)}.section-title{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.section-title h2,.section-title h3{letter-spacing:-.02em;font-size:16px;font-weight:700}.section-title p,.muted{color:var(--text-2);margin-top:2px;font-size:12px;line-height:1.5}.hero-card{flex-direction:column;gap:16px;display:flex}.hero-kicker{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700}.hero-card h2{letter-spacing:-.04em;color:var(--text);font-size:28px;font-weight:800;line-height:1.05}.hero-card>div>p{color:var(--text-2);margin-top:6px;font-size:14px;line-height:1.55}.stats-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.stat-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);flex-direction:column;gap:4px;padding:12px 10px;display:flex}.stat-card span{color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600}.stat-card strong{letter-spacing:-.04em;color:var(--text);font-size:22px;font-weight:800}.task-list,.roadmap-list,.stack{flex-direction:column;gap:8px;display:flex}.task-card,.lesson-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:left;width:100%;padding:14px 16px;transition:border-color .15s,background .15s}.task-card:active,.lesson-card:active{transform:scale(.99)}.task-card.done,.lesson-card.done{background:var(--green-dim);border-color:#30d68c40}.lesson-card.active{border-color:var(--border-hi);background:var(--accent-dim)}.lesson-card.locked{opacity:.42}.quick-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.quick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;text-align:left;flex-direction:column;gap:4px;padding:16px;transition:border-color .15s;display:flex}.quick-card strong{color:var(--text);font-size:14px;font-weight:700}.quick-card span{color:var(--text-2);font-size:11px;line-height:1.4}.quick-card:active{transform:scale(.97)}.progress-track{background:var(--bg-3);border-radius:999px;width:100%;height:6px;overflow:hidden}.progress-fill{border-radius:inherit;background:var(--accent);height:100%;transition:width .4s}.btn,.btn-primary,.btn-glass{border-radius:var(--r);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;min-height:50px;padding:12px 18px;font-size:15px;font-weight:600;transition:opacity .15s,transform .15s;display:inline-flex}.btn-primary{background:var(--accent);color:#0a0a0a;font-weight:700}.btn-glass{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}.btn:disabled,.btn-primary:disabled,.btn-glass:disabled{opacity:.35;cursor:not-allowed}.btn-primary:active,.btn-glass:active{opacity:.88;transform:scale(.98)}.input-field,.select-field{border-radius:var(--r);border:1px solid var(--border);background:var(--surface);width:100%;min-height:50px;color:var(--text);padding:12px 16px;font-size:16px;transition:border-color .15s,box-shadow .15s}.input-field:focus,.select-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input-field::placeholder{color:var(--text-3)}.segmented{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);grid-template-columns:repeat(2,1fr);gap:6px;padding:4px;display:grid}.segmented.three{grid-template-columns:repeat(3,1fr)}.segment{border-radius:calc(var(--r) - 2px);min-height:40px;color:var(--text-2);cursor:pointer;background:0 0;border:none;font-size:13px;font-weight:600;transition:background .15s,color .15s}.segment.active{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.bilingual-paragraph{color:var(--text);font-size:17px;line-height:1.85}.en-word{cursor:pointer;border-radius:4px;transition:background .1s}.en-word:active{background:var(--accent-dim)}.sentence-block{line-height:inherit}.vn-translation{color:var(--text-2);border-top:1px solid var(--border);padding-top:10px;font-size:14px;font-style:italic;line-height:1.6}.flashcard-container{perspective:1000px;cursor:pointer;width:100%;height:260px}.flashcard{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.23,1,.32,1);position:relative}.flashcard.flipped{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:var(--r-xl);border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;position:absolute}.card-front{background:var(--surface)}.card-back{background:var(--surface-2);justify-content:center;align-items:flex-start;transform:rotateY(180deg)}.animate-fade-up{animation:.22s both fadeUp}.animate-scale-in{animation:.2s both scaleIn}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media (width>=860px){body{background:#050505;justify-content:center;align-items:center;display:flex}.app-container{border:1px solid #ffffff17;border-radius:42px;max-width:430px;height:min(900px,96dvh);overflow:hidden;box-shadow:0 40px 100px #0009,0 0 0 1px #ffffff0a}.app-nav{border-radius:0 0 42px 42px}.stats-grid{grid-template-columns:repeat(4,1fr)}}:root{--primary:var(--accent);--secondary:var(--accent);--text-primary:var(--text);--text-secondary:var(--text-2);--text-muted:var(--text-3);--glass-border:var(--border);--glass-bg:var(--surface);--success:var(--green);--warning:var(--amber);--danger:var(--red);--radius-lg:var(--r-xl);--shadow-panel:none}@media (width<=375px){.page-container{gap:10px;padding:12px 12px 20px}.card{padding:14px}.hero-card h2{font-size:24px}.stats-grid{grid-template-columns:repeat(2,1fr)}}