:root{--primary-color: #FF8A65;--primary-light: #FFECE6;--primary-dark: #E67E22;--bg-color: #FFFDF9;--card-bg: #FFFFFF;--text-main: #4A3E3D;--text-muted: #8C7E7C;--green: #4CAF50;--green-light: #E8F5E9;--red: #FF5252;--red-light: #FFEBEE;--border-radius: 20px;--shadow: 0 10px 30px rgba(230, 126, 34, .06)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.app-container{max-width:1200px;margin:0 auto;padding:20px}.app-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--card-bg);padding:20px 30px;border-radius:var(--border-radius);box-shadow:var(--shadow);margin-bottom:24px}.logo-section{display:flex;align-items:center;gap:15px}.logo-icon{font-size:32px;background:var(--primary-light);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.logo-section h1{font-size:22px;color:var(--primary-dark);font-weight:800}.logo-section p{font-size:13px;color:var(--text-muted)}.nav-tabs{display:flex;gap:12px}.tab-btn{display:flex;align-items:center;gap:8px;padding:12px 22px;border:none;background:none;border-radius:14px;font-size:15px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.tab-btn:hover{background-color:#fff5f2;color:var(--primary-color);transform:translateY(-2px)}.tab-btn.active{background-color:var(--primary-color);color:#fff;box-shadow:0 4px 15px #ff8a654d}.app-main{min-height:500px}.practice-layout{display:grid;grid-template-columns:350px 1fr;gap:24px}@media (max-width: 900px){.practice-layout{grid-template-columns:1fr}}.sidebar-column{display:flex;flex-direction:column;gap:20px}.mascot-card{background-color:#fff9f5;border:2px dashed #FFD3C4;border-radius:var(--border-radius);padding:20px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow);position:relative}.mascot-avatar-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.mascot-avatar{font-size:44px;animation:float 3s ease-in-out infinite}.fire-halo{position:absolute;top:-10px;right:-10px;font-size:20px;animation:flamePulse 1s ease-in-out infinite alternate}@keyframes flamePulse{0%{transform:scale(.9) rotate(-5deg)}to{transform:scale(1.2) rotate(5deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.mascot-bubble{background-color:#fff;padding:12px 16px;border-radius:12px;position:relative;box-shadow:0 4px 12px #00000008;flex:1}.mascot-bubble:after{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%) rotate(45deg);width:16px;height:16px;background-color:#fff}.mascot-bubble p{font-size:13px;line-height:1.4;color:var(--text-main);font-weight:600}.notebook-style{position:relative;border-left:12px solid #E0D4C3!important}.notebook-rings{position:absolute;left:-20px;top:10%;bottom:10%;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;z-index:10}.notebook-rings span{width:24px;height:12px;background:linear-gradient(to right,#b0bec5,#eceff1);border-radius:6px;border:1px solid #90A4AE;box-shadow:0 2px 4px #00000026}.ai-generator-card{background-color:var(--card-bg);padding:24px;border-radius:var(--border-radius);box-shadow:var(--shadow);border:2px solid var(--primary-light)}.card-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.card-header h3{font-size:18px;color:var(--primary-dark)}.icon-sparkle{color:#ffb300;animation:spinSlow 4s linear infinite}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card-desc{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:20px}.ai-input-group{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.ai-input-group input{padding:14px;border:2px solid #FFE0D3;border-radius:12px;font-size:14px;outline:none;transition:border-color .3s}.ai-input-group input:focus{border-color:var(--primary-color)}.ai-btn{background-color:var(--primary-color);color:#fff;border:none;padding:14px;border-radius:12px;font-weight:700;cursor:pointer;font-size:15px;transition:background .2s,transform .1s}.ai-btn:hover{background-color:var(--primary-dark)}.ai-btn:active{transform:scale(.98)}.ai-btn:disabled{background-color:#e0e0e0;cursor:not-allowed}.quick-tags{font-size:12px;color:var(--text-muted)}.quick-tags span{display:block;margin-bottom:6px}.quick-tags button{background-color:#fdf2ee;border:none;padding:6px 12px;border-radius:20px;margin-right:6px;margin-bottom:6px;cursor:pointer;font-size:12px;color:var(--text-main);transition:all .2s}.quick-tags button:hover{background-color:var(--primary-light);transform:scale(1.05)}.shortcut-tips-card{background-color:#f8f9fa;border:1px solid #E9ECEF;border-radius:var(--border-radius);padding:16px}.shortcut-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:10px}.shortcut-list{display:flex;flex-direction:column;gap:8px}.shortcut-item{display:flex;justify-content:space-between;font-size:12px}.shortcut-item span:first-child{color:var(--text-muted)}.shortcut-item span:last-child{background-color:#fff;border:1px solid #DEE2E6;padding:2px 6px;border-radius:4px;font-family:monospace;font-weight:700;box-shadow:0 1px 2px #0000000d}.question-card{background-color:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden}.progress-bar-container{position:absolute;top:0;left:0;width:100%;height:6px;background-color:#f5f5f5}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff8a65,#ffb300);transition:width .4s cubic-bezier(.4,0,.2,1)}.question-header{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.header-right-badges{display:flex;align-items:center;gap:10px}.streak-badge-live{background:linear-gradient(45deg,#ff5252,#ff9800);color:#fff;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px;animation:pulse 1s infinite alternate}.flame-icon{animation:float 1s infinite alternate}.question-badge{background-color:var(--primary-light);color:var(--primary-dark);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700}.question-progress{font-size:14px;color:var(--text-muted)}.question-title{font-size:22px;line-height:1.6;color:var(--text-main);font-weight:700}.options-grid{display:flex;flex-direction:column;gap:12px}.option-btn{display:flex;align-items:center;padding:16px 20px;border:2px solid #F0EAE8;background-color:#fcfafa;border-radius:12px;cursor:pointer;text-align:left;font-size:16px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:relative}.option-btn:hover:not(:disabled){border-color:var(--primary-color);background-color:#fff9f7;transform:scale(1.01)}.option-btn.key-active{transform:scale(.97);background-color:var(--primary-light);border-color:var(--primary-color)}.option-index{background-color:#efeae8;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:15px;font-weight:700;font-size:14px;color:var(--text-main)}.option-text{flex:1}.keyboard-hint{font-size:11px;color:var(--text-muted);border:1px solid #DDD;padding:2px 6px;border-radius:4px;background-color:#fff;margin-left:10px}.option-btn.selected{border-color:var(--primary-color);background-color:var(--primary-light)}.option-btn.correct{border-color:var(--green);background-color:var(--green-light);box-shadow:0 4px 12px #4caf5026}.option-btn.wrong{border-color:var(--red);background-color:var(--red-light);box-shadow:0 4px 12px #ff525226}.option-btn.disabled{opacity:.6;cursor:not-allowed}.feedback-icon{margin-left:10px}.text-green{color:var(--green)}.text-red{color:var(--red)}.explanation-box{padding:20px;border-radius:12px;margin-top:10px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.explanation-box.bg-green{background-color:var(--green-light);border-left:5px solid var(--green)}.explanation-box.bg-red{background-color:var(--red-light);border-left:5px solid var(--red)}.explanation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.explanation-header h4{font-size:16px;font-weight:700}.explanation-box p{font-size:14px;line-height:1.6;margin-bottom:16px}.tts-btn{display:flex;align-items:center;gap:4px;background-color:#fff;border:1px solid #DDD;padding:4px 10px;border-radius:20px;font-size:12px;cursor:pointer;transition:background .2s}.tts-btn:hover{background-color:#f5f5f5}.next-btn{display:flex;align-items:center;gap:6px;background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer;margin-left:auto}.next-btn:hover{background-color:var(--primary-dark)}.wrongbook-layout{background-color:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow)}.wrongbook-header{margin-bottom:24px;border-bottom:2px solid #FDF2EE;padding-bottom:16px}.wrongbook-header h2{font-size:22px;color:var(--primary-dark)}.wrongbook-header p{font-size:14px;color:var(--text-muted)}.wrong-list{display:grid;grid-template-columns:1fr;gap:16px}.wrong-item-card{border:1px solid #F0EAE8;background-color:#fcfafa;padding:20px;border-radius:12px;transition:transform .2s}.wrong-item-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000005}.wrong-item-meta{display:flex;gap:10px;margin-bottom:10px}.wrong-tag{background-color:#efeae8;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700}.wrong-count-badge{background-color:var(--red-light);color:var(--red);padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700}.wrong-question-text{font-size:18px;margin-bottom:12px;line-height:1.5}.wrong-correct-answer{font-size:14px;color:var(--green);margin-bottom:8px}.wrong-explanation{font-size:14px;color:var(--text-muted);background-color:#f5f5f5;padding:10px;border-radius:6px;margin-bottom:16px}.wrong-actions{display:flex;gap:12px}.action-btn{display:flex;align-items:center;gap:6px;border:none;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer}.action-btn.challenge{background-color:var(--primary-light);color:var(--primary-dark)}.action-btn.delete{background-color:#eceff1;color:#546e7a}.action-btn.challenge:hover{background-color:#ffd3c4}.action-btn.delete:hover{background-color:#cfd8dc}.stats-layout{display:flex;flex-direction:column;gap:24px}.stats-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.stat-card{background-color:var(--card-bg);padding:24px;border-radius:var(--border-radius);box-shadow:var(--shadow);text-align:center}.stat-card h3{font-size:14px;color:var(--text-muted);margin-bottom:8px}.stat-number{font-size:32px;font-weight:800}.chart-card{background-color:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow)}.chart-card h3{font-size:18px;margin-bottom:6px}.chart-desc{font-size:13px;color:var(--text-muted);margin-bottom:24px}.svg-chart-container{width:100%;overflow-x:auto}.learning-chart{width:100%;max-width:600px;height:auto;display:block;margin:0 auto}.chart-text{font-size:11px;fill:var(--text-muted)}.chart-text-x{font-size:11px;fill:var(--text-main)}.chart-dot-val{font-size:10px;fill:var(--primary-dark);font-weight:700}.chart-dot-group circle{transition:r .2s ease;cursor:pointer}.chart-dot-group:hover circle{r:8}.loading-state-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;background-color:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);color:var(--text-main);gap:16px;border:2px dashed var(--primary-color);position:relative}.magic-wand{font-size:40px;animation:spellCast 1.5s ease-in-out infinite alternate}@keyframes spellCast{0%{transform:rotate(-15deg) translateY(0)}to{transform:rotate(25deg) translateY(-10px)}}.spinner{font-size:48px;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;background-color:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);color:var(--text-muted);gap:12px}.compass-icon{font-size:56px;animation:wobble 3s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}.gold-award{color:#ffd54f;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}