:root{--purple: #6C5CE7;--purple-light: #a29bfe;--purple-dark: #4a3ab5;--green: #00b894;--orange: #fd9644;--red: #e84393;--blue: #0984e3;--yellow: #fdcb6e;--gray: #636e72;--light: #f8f8ff;--white: #ffffff;--radius: 16px;--shadow: 0 4px 20px rgba(108,92,231,.15)}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f0f0ff,#e8f5ff);min-height:100vh;font-size:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:50px;border:none;cursor:pointer;font-size:15px;font-weight:600;transition:all .2s;text-decoration:none}.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover{background:var(--purple-dark);transform:translateY(-2px)}.btn-success{background:var(--green);color:#fff}.btn-orange{background:var(--orange);color:#fff}.btn-outline{background:transparent;border:2px solid var(--purple);color:var(--purple)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.card{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.page-title{font-size:22px;font-weight:700;color:#2d3436;margin-bottom:20px}.input{width:100%;padding:12px 16px;border:2px solid #e0e0f0;border-radius:12px;font-size:15px;outline:none;transition:border .2s}.input:focus{border-color:var(--purple)}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:50px;font-size:12px;font-weight:600}.badge-purple{background:#ede9fe;color:var(--purple)}.badge-green{background:#d1fae5;color:#059669}.badge-orange{background:#fff3cd;color:#d97706}.badge-red{background:#fee2e2;color:#dc2626}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--white);display:flex;border-top:1px solid #f0f0f0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 20px #00000014}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0;text-decoration:none;color:#b2bec3;font-size:11px;gap:4px;transition:color .2s}.bottom-nav a.active{color:var(--purple)}.bottom-nav .nav-icon{font-size:22px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes starPop{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(0)}}.fade-in{animation:fadeIn .4s ease}.bounce{animation:bounce .6s ease}.main-content{max-width:480px;margin:0 auto;padding:20px 16px 100px}@media (min-width: 768px){.main-content{max-width:700px;padding:30px 30px 40px}.bottom-nav{display:none}.sidebar{display:flex!important}}@media (min-width: 1024px){.main-content{max-width:820px}}.progress-bar{height:10px;border-radius:50px;background:#e0e0f0;overflow:hidden}.progress-fill{height:100%;border-radius:50px;background:var(--purple);transition:width .6s ease}.star{color:#fdcb6e}.star-empty{color:#dfe6e9}.option-btn{width:100%;text-align:left;padding:14px 18px;border-radius:12px;border:2px solid #e0e0f0;background:var(--white);cursor:pointer;font-size:15px;transition:all .2s;margin-bottom:10px;font-family:inherit}.option-btn:hover:not(:disabled){border-color:var(--purple);background:#faf0ff}.option-btn.correct{border-color:var(--green);background:#d1fae5;color:#065f46}.option-btn.wrong{border-color:var(--red);background:#fee2e2;color:#991b1b}.option-btn.selected{border-color:var(--purple);background:#ede9fe}.chat-bubble{max-width:85%;padding:12px 16px;border-radius:18px;margin-bottom:10px;font-size:14px;line-height:1.6;word-break:break-word}.chat-ai{background:var(--white);color:#2d3436;border-bottom-left-radius:4px;align-self:flex-start;box-shadow:0 2px 8px #00000014}.chat-user{background:var(--purple);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}.empty-state{text-align:center;padding:60px 20px;color:var(--gray)}.empty-icon{font-size:64px;margin-bottom:16px}.achievement-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;border-radius:12px;background:#fef9e7;border:1px solid #fdcb6e;font-size:11px;color:#856404;text-align:center}.achievement-icon{font-size:32px}.subject-math{background:#ede9fe;color:var(--purple)}.subject-chinese{background:#fce7f3;color:#be185d}.subject-english{background:#dbeafe;color:#1d4ed8}.subject-science{background:#d1fae5;color:#065f46}