:root{--primary:#2563eb;--primary-dark:#1e40af;--primary-light:#dbeafe;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--bg:#f9fafb;--surface:#fff;--border:#e5e7eb;--text:#111827;--muted:#6b7280;--shadow:0 8px 22px #2563eb17}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;color:var(--text);background:radial-gradient(circle at 100% 0,#eff6ff,#f9fafb 45%);margin:0;padding:0;font-family:Inter,Segoe UI,sans-serif}button,input,textarea{font:inherit}button,.bottom-nav a{transition:transform .14s,filter .18s,box-shadow .2s}button:active,.bottom-nav a:active{filter:brightness(.92)saturate(1.08);transform:translateY(1px)scale(.985)}.auth-page{place-items:center;min-height:100dvh;padding:24px;display:grid}.auth-card{background:var(--surface);border:1px solid var(--border);width:min(460px,100%);box-shadow:var(--shadow);border-radius:18px;flex-direction:column;gap:10px;padding:28px;display:flex}.auth-card .logo{object-fit:cover;border-radius:14px;width:58px;height:58px}.auth-card h1,.page h2{margin:0}.auth-card p,.page p{color:var(--muted);margin:0}.auth-card input,.page input,.page textarea{border:1px solid var(--border);background:#fff;border-radius:12px;width:100%;padding:11px 12px}.auth-card button,.page button{background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:12px;padding:11px 14px}.auth-card button:disabled,.page button:disabled{cursor:not-allowed;opacity:.7}.success-box{color:#166534;background:#dcfce7;border:1px solid #86efac;border-radius:10px;padding:8px 10px}.text-link{text-align:left;color:var(--primary)!important;background:0 0!important;padding:0!important}.auth-link{font-weight:600;text-decoration:none}.field-error{color:var(--error);margin-top:-6px;font-size:13px}.password-input-wrap{position:relative}.password-input-wrap input{padding-right:46px}.icon-button{place-items:center;width:34px;height:34px;display:grid;position:absolute;top:50%;right:8px;transform:translateY(-50%);color:var(--muted)!important;background:0 0!important;border:none!important;border-radius:10px!important;padding:0!important}.icon-button:hover{color:var(--text)!important;background:#f3f4f6!important}.otp-row{grid-template-columns:1fr auto;gap:8px;display:grid}.primary-button.pending{filter:saturate(.9);background:#7f95be!important}.primary-button.ready{background:var(--primary)!important}.error-box,.error-text{color:var(--error);background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:8px 10px}.shell{flex-direction:column;min-height:100dvh;display:flex}.shell-main{flex:1;width:min(1100px,100%);margin:0 auto;padding:18px 16px 90px}.bottom-nav{border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffeb;border-radius:14px;grid-template-columns:repeat(4,1fr);gap:4px;width:min(700px,100% - 24px);padding:6px;display:grid;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.bottom-nav a{color:var(--muted);text-align:center;border-radius:10px;padding:8px;font-size:14px;text-decoration:none}.bottom-nav a.active{color:#fff;background:var(--primary)}.page{flex-direction:column;gap:14px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:8px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand img{border-radius:10px;width:34px;height:34px}.credits-pill{color:#ea580c!important;background:linear-gradient(#fff7ed,#fed7aa)!important;border:1px solid #fdba74!important;border-radius:999px!important;padding:8px 12px!important}.credits-pill.danger{color:var(--error)!important;background:linear-gradient(#fee2e2,#fecaca)!important;border-color:#fca5a5!important}.hero-card,.level-card,.credit-overview,.profile-card,.boxed,.free-claim,.package-card,.teacher-card,.style-item,.activity-item,.video-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px}.hero-card{background:linear-gradient(145deg,#dbeafe,#bfdbfe);padding:18px}.hero-progress{justify-content:space-between;margin-top:10px;font-size:13px;display:flex}.search{border:1px solid var(--border);border-radius:12px;padding:12px}.category-row{gap:8px;display:flex;overflow:auto}.category-row button{white-space:nowrap;color:var(--text);border:1px solid var(--border);background:#fff}.category-row .active{background:var(--primary);border-color:var(--primary);color:#fff}.video-list,.activity-list,.menu-list,.package-list,.style-list{gap:12px;display:grid}.video-card{text-align:left;width:100%;overflow:hidden;color:inherit!important;padding:0!important}.video-card.disabled{opacity:.5}.video-thumb{min-height:168px;position:relative}.play{background:#ffffff38;border-radius:999px;place-items:center;width:60px;height:60px;margin:auto;display:grid;position:absolute;inset:0}.difficulty,.duration{border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;position:absolute}.difficulty{background:#fffffff2;top:10px;left:10px}.duration{color:#fff;background:#000000ad;bottom:10px;right:10px}.video-body{padding:14px}.video-body h3,.section-title,.recording-page h4{margin:0}.chips{flex-wrap:wrap;gap:7px;display:flex}.chips span{background:var(--primary-light);color:var(--primary);border-radius:999px;padding:4px 9px;font-size:12px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.stats-grid div{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:12px;padding:14px}.stats-grid b{font-size:24px;display:block}.stats-grid span{color:var(--muted);font-size:12px}.activity-item,.free-claim,.package-card,.profile-card,.menu-list button,.teacher-row,.record-row,.chat-input,.conversation-head{align-items:center;gap:10px;display:flex}.activity-item{justify-content:space-between;width:100%;color:inherit!important;background:#fff!important}.activity-item .score{background:var(--primary);color:#fff;border-radius:10px;place-items:center;width:44px;height:44px;font-weight:700;display:grid}.teacher-row{overflow:auto}.teacher-card,.style-item{color:inherit!important;background:#fff!important}.teacher-card.selected,.style-item.selected,.level-item.selected{border-color:var(--primary);background:#eff6ff!important}.teacher-card{text-align:left;min-width:130px}.style-item{text-align:left;width:100%}.cta{margin-top:6px}.profile-card{padding:14px}.avatar{background:var(--primary-light);width:58px;height:58px;color:var(--primary);border-radius:999px;place-items:center;font-size:25px;font-weight:700;display:grid}.menu-list button,.level-item,.package-card,.free-claim{width:100%;color:var(--text);border:1px solid var(--border);background:#fff;border-radius:12px;justify-content:space-between;padding:12px}.menu-list .danger{color:var(--error)}.video-player{background:#000;border-radius:12px;width:100%}.record-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.feedback-page .score-circle{border:10px solid #c7d2fe;border-radius:999px;place-items:center;width:146px;height:146px;margin:0 auto;display:grid}.feedback-page .score-circle b{font-size:40px}.score-breakdown{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.score-breakdown div{border:1px solid var(--border);background:#fff;border-radius:12px;justify-content:space-between;padding:12px;display:flex}.boxed{padding:12px}.conversation-page{min-height:calc(100dvh - 120px)}.conversation-head{border:1px solid var(--border);background:#fff;border-radius:12px;justify-content:space-between;padding:10px}.chat-list{border:1px solid var(--border);background:#fff;border-radius:12px;height:min(65dvh,600px);padding:12px;overflow:auto}.chat-bubble{border-radius:14px;max-width:80%;margin-bottom:10px;padding:10px 12px}.chat-bubble.user{background:var(--primary);color:#fff;margin-left:auto}.chat-bubble.assistant{background:#f3f4f6;margin-right:auto}.chat-input{gap:8px}.chat-input input{flex:1}@media (width<=900px){.stats-grid,.score-breakdown,.record-row{grid-template-columns:1fr}.chat-bubble{max-width:92%}.otp-row{grid-template-columns:1fr}}