html,body{width:100%;min-height:100%;margin:0;padding:0}#root{width:100%;min-height:100vh}:root{--font-family:"Fredoka", "Quicksand", system-ui, -apple-system, sans-serif;--bg-gradient:linear-gradient(135deg, #e0f7fa 0%, #fff9db 100%);--text-main:#2d3436;--text-muted:#636e72;--color-primary:#0984e3;--color-secondary:#00cec9;--color-success:#2ed573;--color-danger:#ff4757;--color-warning:#ffa502;--card-shadow:0 12px 24px #00000014;--border-radius-large:24px;--border-radius-medium:16px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-gradient);color:var(--text-main);min-height:100vh;padding:20px;overflow-x:hidden}.app-container{flex-direction:column;max-width:1000px;min-height:90vh;margin:0 auto;display:flex}.app-nav-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-medium);background:#fffc;border:2px solid #fff9;justify-content:space-between;align-items:center;margin-bottom:25px;padding:15px 25px;display:flex;box-shadow:0 4px 15px #0000000a}.app-logo{color:#ff6b81;cursor:pointer;align-items:center;gap:8px;font-size:1.5rem;font-weight:700;display:flex}.back-to-dashboard-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#ff6b81;border:none;border-radius:50px;padding:10px 18px;font-weight:600;transition:all .2s;box-shadow:0 4px 10px #ff6b814d}.back-to-dashboard-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #ff6b8166}.unit-tabs{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:30px;display:flex}.tab-btn{color:var(--text-muted);font-family:var(--font-family);cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:50px;padding:12px 24px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.tab-btn:hover{border-color:var(--tab-theme-color,#74b9ff);color:var(--text-main);transform:translateY(-2px)}.tab-btn.active{background:var(--tab-theme-color,#74b9ff);color:#fff;border-color:var(--tab-theme-color,#74b9ff);transform:scale(1.05);box-shadow:0 8px 20px #0000001a}.dashboard-header{text-align:center;margin-bottom:30px}.dashboard-header h1{color:#2d3436;text-shadow:2px 2px #ffeaa7;margin-bottom:8px;font-size:2.8rem;font-weight:700}.dashboard-header .subtitle{color:var(--text-muted);font-size:1.1rem}.mascot-welcome{border-radius:var(--border-radius-large);box-shadow:var(--card-shadow);background:#fff;border:3px dashed #ffeaa7;flex-direction:column;align-items:center;margin-bottom:40px;padding:25px;display:flex;position:relative}.score-summary{background:#fff9db;border:2px solid #ffeaa7;border-radius:50px;gap:8px;margin-top:15px;padding:8px 20px;font-size:1.25rem;font-weight:600;display:flex}.score-value{color:#f1c40f;font-weight:700}.units-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;padding-bottom:50px;display:grid}.unit-card{border-radius:var(--border-radius-large);box-shadow:var(--card-shadow);cursor:pointer;background:#fff;border:3px solid #0000;flex-direction:column;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;overflow:hidden}.unit-card:hover{border-color:var(--card-theme-color);transform:translateY(-8px)scale(1.02);box-shadow:0 20px 35px #0000001f}.unit-card-color-strip{background:var(--card-theme-color);height:12px}.unit-card-body{flex-direction:column;flex-grow:1;padding:25px;display:flex}.unit-badge{color:#fff;border-radius:50px;align-self:flex-start;margin-bottom:12px;padding:4px 12px;font-size:.85rem;font-weight:600}.unit-title{color:var(--text-main);margin-bottom:10px;font-size:1.4rem;font-weight:700}.unit-description{color:var(--text-muted);flex-grow:1;margin-bottom:20px;font-size:.95rem;line-height:1.5}.unit-footer{border-top:2px dashed #f1f2f6;justify-content:space-between;align-items:center;margin-top:auto;padding-top:15px;display:flex}.unit-stars{align-items:center;gap:3px;display:flex}.star-icon{opacity:.2;font-size:1rem}.star-icon.active{opacity:1;animation:.3s pop}.stars-count{color:var(--text-muted);margin-left:4px;font-size:.8rem}.learn-btn{color:#fff;font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;padding:8px 16px;font-weight:600;transition:transform .2s}.unit-card:hover .learn-btn{transform:scale(1.08)}.mascot-container{flex-direction:column;align-items:center;max-width:500px;margin:15px auto;display:flex;position:relative}.speech-bubble{border-radius:var(--border-radius-medium);z-index:2;text-align:center;background:#fff;border:3px solid #2d3436;margin-bottom:15px;padding:15px 20px;position:relative;box-shadow:4px 4px #0000000d}.speech-bubble p{color:#2d3436;font-size:1.05rem;font-weight:600;line-height:1.4}.speech-bubble-arrow{content:"";border:15px solid #0000;border-top-color:#2d3436;border-bottom:0 solid #2d3436;width:0;display:block;position:absolute;bottom:-15px;left:50%;transform:translate(-50%)}.speech-bubble-arrow:after{content:"";border:12px solid #0000;border-top-color:#fff;border-bottom:0 solid #fff;width:0;display:block;position:absolute;bottom:3px;left:-12px}.mascot-svg-wrapper{transition:all .3s}.expression-listening{animation:1.5s infinite pulse-glow}.expression-correct{animation:.6s jump}.expression-wrong{animation:.5s shake}.expression-cheering{animation:.8s infinite alternate cheer}.lesson-tab-container,.speaking-tab-container,.writing-tab-container,.quiz-tab-container{border-radius:var(--border-radius-large);box-shadow:var(--card-shadow);background:#fff;border:3px solid #f1f2f6;margin-bottom:50px;padding:30px}.flashcard-wrapper{perspective:1000px;width:100%;max-width:400px;height:250px;margin:30px auto}.flashcard-card{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .6s cubic-bezier(.4,.2,.2,1);position:relative}.flashcard-card.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;border-radius:var(--border-radius-large);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:absolute;box-shadow:0 10px 20px #0000000d}.flashcard-front{background:#fff;border:4px solid #74b9ff}.flashcard-back{color:#fff;text-align:center;transform:rotateY(180deg)}.flashcard-tip{color:#0000004d;font-size:.75rem;font-weight:600;position:absolute;top:12px}.flashcard-back .flashcard-tip{color:#ffffffb3}.flashcard-emoji{margin-bottom:10px;font-size:4.5rem}.flashcard-word{letter-spacing:.5px;font-size:2.2rem;font-weight:700}.flashcard-ipa{color:var(--text-muted);font-size:1.1rem;font-style:italic}.flashcard-stars{margin-top:10px;font-size:1.2rem}.flashcard-meaning{margin-bottom:15px;font-size:2.2rem;font-weight:700}.flashcard-example{border-radius:var(--border-radius-medium);background:#fff3;max-width:90%;padding:12px 18px}.example-eng{margin-bottom:4px;font-size:1rem;font-style:italic;font-weight:600}.example-vie{opacity:.9;font-size:.85rem}.flashcard-controls{flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:30px;display:flex}.control-btn{font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;align-items:center;gap:8px;padding:14px 28px;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 10px #0000000d}.speak-btn{color:#d63031;background:#ffeaa7}.speak-sentence-btn{color:#2d3436;background:#dfe6e9}.mic-btn{color:#fff;background:#2ed573;position:relative;box-shadow:0 4px 15px #2ed5734d}.mic-btn.recording{background:#ff4757;animation:1.2s infinite pulse-recording;box-shadow:0 0 20px #ff475799}.control-btn:hover{transform:translateY(-3px);box-shadow:0 8px 15px #0000001a}.control-btn:active{transform:translateY(-1px)}.speech-result-box{border-radius:var(--border-radius-medium);text-align:center;background:#f1f2f6;border-left:5px solid #2ed573;max-width:450px;margin:10px auto 25px;padding:18px}.speech-result-heard{color:var(--text-muted);margin-bottom:6px;font-size:.95rem}.heard-text{color:#ff7675;font-style:italic;font-weight:700}.speech-result-accuracy{margin-bottom:10px;font-size:1.1rem}.result-stars{justify-content:center;gap:5px;font-size:1.5rem;display:flex}.result-stars .star{opacity:.2}.result-stars .star.active{opacity:1}.speech-error-box{color:#d63031;border-radius:var(--border-radius-medium);text-align:center;background:#ffe0e6;border:1px solid #ffccd5;max-width:450px;margin:10px auto 25px;padding:12px 20px;font-weight:600}.lesson-navigation,.speaking-navigation,.writing-navigation{border-top:2px dashed #f1f2f6;justify-content:space-between;align-items:center;margin-top:30px;padding-top:20px;display:flex}.nav-arrow-btn{color:var(--text-main);font-family:var(--font-family);cursor:pointer;background:#dfe6e9;border:none;border-radius:50px;padding:10px 20px;font-weight:600;transition:all .2s}.nav-arrow-btn:hover:not(:disabled){background:#b2bec3;transform:scale(1.05)}.nav-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.nav-dots{gap:10px;display:flex}.nav-dot{cursor:pointer;background:#dfe6e9;border-radius:50%;width:14px;height:14px;transition:all .2s;position:relative}.nav-dot.active{background:#74b9ff;transform:scale(1.3)}.nav-dot.completed{background:#2ed573}.nav-dot.completed:after{content:"✓";color:#fff;font-size:8px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sentence-display-card{border-radius:var(--border-radius-large);text-align:center;background:#f8f9fa;border:3px solid #74b9ff;max-width:550px;margin:30px auto;padding:30px;box-shadow:0 8px 15px #00000008}.sentence-visual{margin-bottom:15px;font-size:5rem}.sentence-target-text{color:#2d3436;margin-bottom:8px;font-size:1.8rem;font-weight:700}.sentence-meaning-text{color:var(--text-muted);font-size:1.1rem}.sentence-stars-banner{background:#e8f4fd;border-radius:50px;justify-content:center;align-items:center;gap:5px;width:fit-content;margin-top:18px;margin-left:auto;margin-right:auto;padding:6px 15px;display:flex}.sentence-stars-banner .star{opacity:.25}.sentence-stars-banner .star.active{opacity:1}.stars-label{color:#0984e3;margin-left:5px;font-size:.85rem;font-weight:600}.speaking-actions{justify-content:center;gap:15px;margin-bottom:25px;display:flex}.speaking-action-btn{font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;padding:15px 30px;font-size:1.1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 10px #0000000d}.speaking-action-btn.speak{color:#1e6b52;background:#a8e6cf}.speaking-action-btn.record{color:#fff;background:#2ed573;box-shadow:0 4px 15px #2ed5734d}.speaking-action-btn.record.recording{background:#ff4757;animation:1.2s infinite pulse-recording;box-shadow:0 0 20px #ff475799}.speaking-action-btn:hover{transform:translateY(-3px);box-shadow:0 8px 15px #0000001a}.writing-mode-switcher{justify-content:center;gap:15px;margin-bottom:25px;display:flex}.mode-btn{color:var(--text-muted);font-family:var(--font-family);cursor:pointer;background:#f1f2f6;border:none;border-radius:50px;padding:10px 20px;font-weight:600;transition:all .2s}.mode-btn.active{color:#d63031;background:#ffeaa7;transform:scale(1.05);box-shadow:0 4px 10px #fdcb6e4d}.writing-card{border-radius:var(--border-radius-large);text-align:center;background:#f8f9fa;border:3px solid #a55eea;max-width:500px;margin:25px auto;padding:30px;transition:all .3s}.card-error{border-color:var(--color-danger);background:#fff5f5}.card-success{border-color:var(--color-success);background:#f5fffa}.writing-illustrator{margin-bottom:10px;font-size:5.5rem}.writing-hint-meaning{color:var(--text-muted);margin-bottom:25px;font-size:1.15rem;font-weight:600}.user-letters-slots{justify-content:center;gap:8px;min-height:55px;margin-bottom:30px;display:flex}.letter-slot{border-radius:var(--border-radius-medium);width:50px;height:50px;color:var(--text-main);background:#fff;border:3px dashed #dfe6e9;justify-content:center;align-items:center;font-size:1.6rem;font-weight:700;transition:all .2s;display:flex;position:relative}.letter-slot.filled{border-style:solid;border-color:#2d3436;box-shadow:4px 4px #0000000d}.letter-slot.success{color:#fff;background:#2ed573;border-color:#2ed573}.letter-slot.error{color:#fff;background:#ff4757;border-color:#ff4757}.slot-remove-badge{color:#fff;text-align:center;background:#ff4757;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;line-height:14px;position:absolute;top:-6px;right:-6px}.scrambled-blocks-container{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}.letter-block{border-radius:var(--border-radius-medium);color:#fff;width:50px;height:50px;font-family:var(--font-family);cursor:pointer;background:#a55eea;border:3px solid #2d3436;font-size:1.6rem;font-weight:700;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:4px 4px #0000001a}.letter-block:hover:not(:disabled){transform:translateY(-4px)scale(1.05);box-shadow:4px 8px #0000001a}.letter-block:disabled{opacity:.3;box-shadow:none;cursor:not-allowed;transform:none}.reset-blocks-btn{color:var(--text-main);font-family:var(--font-family);cursor:pointer;background:#dfe6e9;border:none;border-radius:50px;margin-top:10px;padding:8px 16px;font-size:.85rem;font-weight:600}.typing-game-area{padding:10px 0}.typing-input-wrapper{flex-direction:column;align-items:center;gap:15px;display:flex}.typing-input{border-radius:var(--border-radius-medium);width:100%;max-width:320px;font-family:var(--font-family);text-align:center;border:3px solid #dfe6e9;outline:none;padding:15px;font-size:1.4rem;font-weight:700;transition:border-color .2s}.typing-input:focus{border-color:#a55eea}.typing-input.success{background:#f1fef5;border-color:#2ed573}.typing-input.error{background:#fff0f2;border-color:#ff4757}.typing-check-btn{color:#fff;font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;width:100%;max-width:200px;padding:12px 30px;font-size:1.1rem;font-weight:600;transition:all .2s}.typing-check-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.writing-success-stars{justify-content:center;align-items:center;gap:4px;margin-top:20px;display:flex}.writing-success-stars .star-gold{font-size:1.3rem;animation:.4s pop}.success-label{color:#2ed573;margin-left:6px;font-size:.9rem;font-weight:600}.quiz-progress-bar-wrapper{margin-bottom:25px}.quiz-progress-text{color:var(--text-muted);margin-bottom:8px;font-size:.95rem;font-weight:600}.quiz-progress-track{background:#f1f2f6;border-radius:50px;height:10px;overflow:hidden}.quiz-progress-fill{border-radius:50px;height:100%;transition:width .3s}.quiz-card{border-radius:var(--border-radius-large);background:#f8f9fa;border:3px solid #ffa502;margin-bottom:20px;padding:30px}.quiz-prompt{text-align:center;margin-bottom:25px;font-size:1.25rem;font-weight:600}.quiz-illustration{text-align:center;margin-bottom:25px;font-size:6rem}.quiz-audio-trigger-wrapper{justify-content:center;margin-bottom:30px;display:flex}.quiz-audio-btn{font-family:var(--font-family);color:#d35400;cursor:pointer;background:#ffeaa7;border:3px solid #f1c40f;border-radius:50px;padding:15px 35px;font-size:1.2rem;font-weight:700;transition:all .2s;box-shadow:0 4px 10px #f1c40f4d}.quiz-audio-btn:hover{transform:scale(1.05);box-shadow:0 6px 15px #f1c40f66}.quiz-choices-grid{grid-template-columns:1fr;gap:15px;margin-bottom:30px;display:grid}.choice-btn{border-radius:var(--border-radius-medium);font-family:var(--font-family);cursor:pointer;text-align:left;background:#fff;border:3px solid #dfe6e9;justify-content:space-between;align-items:center;padding:16px 20px;font-size:1.15rem;font-weight:600;transition:all .2s;display:flex}.choice-btn:hover:not(:disabled){border-color:#2d3436;transform:translateY(-2px)}.choice-btn.selected{background:#fff9db;border-color:#f1c40f}.choice-btn.correct{color:#20bf6b;background:#e3faf2;border-color:#2ed573}.choice-btn.wrong{color:#ff2a3b;background:#ffe5ec;border-color:#ff4757}.choice-btn.disabled{opacity:.6;cursor:not-allowed}.feedback-badge{font-size:1.3rem;font-weight:700}.quiz-submit-btn,.quiz-next-btn{color:#fff;width:100%;font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;padding:15px;font-size:1.15rem;font-weight:700;transition:transform .2s}.quiz-submit-btn:hover:not(:disabled),.quiz-next-btn:hover{transform:translateY(-2px)}.quiz-submit-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-result-container{flex-direction:column;align-items:center;padding:20px 0;display:flex}.quiz-result-card{border-radius:var(--border-radius-large);box-shadow:var(--card-shadow);text-align:center;background:#fff;border:3px solid #ff7675;width:100%;max-width:450px;margin-top:20px;padding:35px}.quiz-result-card h2{color:var(--text-main);margin-bottom:20px;font-size:1.8rem}.result-score-circle{background:#ffeef0;border:4px solid #ff7675;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;margin:0 auto 15px;display:flex}.big-score{color:#ff7675;font-size:3.5rem;font-weight:700}.score-denominator{color:var(--text-muted);align-self:flex-end;margin-bottom:25px;font-size:1.4rem}.score-desc{color:var(--text-muted);margin-bottom:25px;font-size:1rem;font-weight:600}.result-stars-display{justify-content:center;gap:8px;margin-bottom:30px;font-size:2.2rem;display:flex}.star-giant{opacity:.2}.star-giant.active{opacity:1}.restart-quiz-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#ff7675;border:none;border-radius:50px;padding:12px 30px;font-size:1.1rem;font-weight:600;box-shadow:0 4px 12px #ff76754d}.app-footer{text-align:center;color:var(--text-muted);margin-top:auto;padding:30px 0;font-size:.85rem}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse-recording{0%{box-shadow:0 0 #ff475766}70%{box-shadow:0 0 0 15px #ff475700}to{box-shadow:0 0 #ff475700}}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 2px #0984e366)}50%{filter:drop-shadow(0 0 15px #0984e3cc)}to{filter:drop-shadow(0 0 2px #0984e366)}}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-25px)}}@keyframes cheer{0%{transform:scale(1)rotate(-3deg)}to{transform:scale(1.05)rotate(3deg)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.1)}to{transform:scale(1)}}.animate-bounce-slow{animation:3s ease-in-out infinite float}.animate-pulse{animation:.4s ease-out pop}.animate-shake{animation:.4s shake}.animate-bounce-once{animation:.5s jump}.animate-fade-in{animation:.4s ease-out pop}.animate-slide-up{animation:.5s cubic-bezier(.19,1,.22,1) both slideUp}.animate-scale-up{animation:.5s cubic-bezier(.34,1.56,.64,1) both pop}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){body{padding:10px}.dashboard-header h1{font-size:2.1rem}.app-nav-header{padding:10px 15px}.unit-tabs{gap:8px}.tab-btn{padding:8px 16px;font-size:.9rem}.control-btn{padding:10px 20px;font-size:.95rem}.flashcard-wrapper{height:220px}.flashcard-word,.flashcard-meaning{font-size:1.8rem}}.assistant-widget-root{z-index:9999;position:fixed;bottom:25px;right:25px}.assistant-chat-head{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;padding:0;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:0 8px 25px #00bec966}.assistant-chat-head:hover{transform:scale(1.1)}.chat-head-helper-bubble{font-family:var(--font-family);color:var(--text-main);white-space:nowrap;background:#fff;border:2px solid #2d3436;border-radius:12px;padding:6px 12px;font-size:.75rem;font-weight:600;position:absolute;top:10px;right:75px;box-shadow:4px 4px #0000000d}.chat-head-helper-bubble:after{content:"";background:#fff;border-top:2px solid #2d3436;border-right:2px solid #2d3436;width:8px;height:8px;position:absolute;top:50%;right:-8px;transform:translateY(-50%)rotate(45deg)}.assistant-panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--border-radius-large);background:#fffffff2;border:3px solid #00bec9;flex-direction:column;gap:15px;width:320px;padding:20px;display:flex;position:absolute;bottom:75px;right:0;box-shadow:0 15px 35px #00000026}.assistant-panel-header{border-bottom:2px dashed #f1f2f6;justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.assistant-panel-header h3{color:#2d3436;font-size:1.1rem;font-weight:700}.panel-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.6rem;font-weight:700;line-height:1}.panel-close-btn:hover{color:var(--color-danger)}.assistant-intro{color:var(--text-muted);margin-bottom:5px;font-size:.8rem;line-height:1.4}.settings-section{flex-direction:column;gap:6px;display:flex}.settings-label{color:var(--text-main);justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;display:flex}.label-help{color:var(--text-muted);font-size:.7rem;font-weight:400}.voice-selector-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.voice-choice-btn{border-radius:var(--border-radius-medium);font-family:var(--font-family);cursor:pointer;background:#fff;border:2px solid #dfe6e9;flex-direction:column;align-items:center;gap:4px;padding:10px;font-size:.8rem;font-weight:700;transition:all .2s;display:flex}.voice-choice-btn:hover{border-color:#00bec9}.voice-choice-btn.selected{color:#008f97;background:#e6fafb;border-color:#00bec9;box-shadow:0 4px 10px #00bec91a}.choice-desc{color:var(--text-muted);font-size:.65rem;font-weight:400}.voice-choice-btn.selected .choice-desc{color:#00bec9}.api-key-input-wrapper,.test-voice-input-wrapper{gap:6px;width:100%;display:flex}.settings-input{font-family:var(--font-family);border:2px solid #dfe6e9;border-radius:10px;outline:none;flex-grow:1;padding:8px 12px;font-size:.85rem}.settings-input:focus{border-color:#00bec9}.settings-save-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#00bec9;border:none;border-radius:10px;padding:8px 16px;font-weight:600}.settings-test-btn{color:#d35400;font-family:var(--font-family);cursor:pointer;white-space:nowrap;background:#ffeaa7;border:none;border-radius:10px;padding:8px 14px;font-weight:600}.api-notice{color:var(--color-danger);font-size:.65rem;line-height:1.3}.read-bubble-btn{color:#0984e3;font-family:var(--font-family);cursor:pointer;background:#e8f4fd;border:1.5px solid #74b9ff;border-radius:50px;align-items:center;gap:4px;margin-top:8px;padding:4px 12px;font-size:.75rem;font-weight:600;transition:all .2s;display:inline-flex}.read-bubble-btn:hover{color:#fff;background:#0984e3}@media (width<=768px){.app-nav-header{text-align:center;flex-direction:column;align-items:center;gap:15px}}.voice-selector-column{flex-direction:column;gap:8px;display:flex}.voice-choice-row{font-family:var(--font-family);cursor:pointer;text-align:left;color:var(--text-main);background:#fff;border:2px solid #dfe6e9;border-radius:12px;width:100%;padding:10px 14px;font-size:.85rem;font-weight:600;transition:all .2s}.voice-choice-row:hover{border-color:#00bec9}.voice-choice-row.selected{color:#008f97;background:#e6fafb;border-color:#00bec9;box-shadow:0 4px 10px #00bec914}.settings-select{width:100%;font-family:var(--font-family);cursor:pointer;background:#fff;border:2px solid #dfe6e9;border-radius:10px;outline:none;padding:10px;font-size:.85rem}.settings-select:focus{border-color:#00bec9}.no-voices-notice{color:var(--color-danger);font-size:.75rem;font-style:italic}.ai-classroom-container{background:0 0;width:100%;margin-bottom:50px}.classroom-grid{grid-template-columns:300px 1fr;gap:25px;display:grid}.classroom-teacher-area{border-radius:var(--border-radius-large);box-shadow:var(--card-shadow);background:#fff;border:3px solid #00bec9;flex-direction:column;align-items:center;padding:25px 20px;display:flex}.classroom-controls{justify-content:center;width:100%;margin-top:20px;display:flex}.start-class-btn{color:#fff;font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;padding:14px 28px;font-size:1.15rem;font-weight:700;transition:transform .2s;box-shadow:0 6px 15px #00bec94d}.start-class-btn:hover{transform:scale(1.05)}.classroom-active-actions{flex-direction:column;gap:12px;width:100%;display:flex}.classroom-mic-btn{color:#fff;font-family:var(--font-family);cursor:pointer;text-align:center;background:#2ed573;border:none;border-radius:50px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 20px;font-size:1.1rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 15px #2ed5734d}.classroom-mic-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px #2ed57366}.classroom-mic-btn:disabled{cursor:not-allowed;box-shadow:none;background:#b2bec3;transform:none}.reset-class-btn{color:var(--text-main);font-family:var(--font-family);cursor:pointer;background:#dfe6e9;border:none;border-radius:50px;padding:10px;font-size:.85rem;font-weight:600;transition:background .2s}.reset-class-btn:hover{background:#b2bec3}.classroom-error-banner{color:#d63031;text-align:center;background:#ffe0e6;border:1px solid #ffccd5;border-radius:12px;margin-top:15px;padding:10px;font-size:.8rem;font-weight:600}.classroom-blackboard{width:100%;min-height:480px;display:flex}.blackboard-frame{background:#1e272e;border:12px solid #8b4513;border-radius:16px;flex-direction:column;flex-grow:1;padding:20px;display:flex;box-shadow:inset 0 0 20px #000c,0 10px 25px #00000040}.blackboard-title{text-align:center;color:#f1c40f;letter-spacing:1px;border-bottom:2px dashed #ffffff26;margin-bottom:15px;padding-bottom:8px;font-size:.95rem;font-weight:700}.blackboard-screen{flex-direction:column;flex-grow:1;max-height:380px;padding-right:10px;display:flex;overflow-y:auto}.blackboard-empty{text-align:center;color:#fff9;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;height:100%;padding:40px;display:flex}.empty-emoji{margin-bottom:15px;font-size:4.5rem}.blackboard-empty p{font-size:1.1rem;line-height:1.6}.chat-messages-log{flex-direction:column;gap:15px;width:100%;display:flex}.chat-bubble-row{width:100%;display:flex}.chat-bubble-row.model{justify-content:flex-start}.chat-bubble-row.user{justify-content:flex-end}.chat-bubble{max-width:80%;line-height:1.5;font-family:var(--font-family);border-radius:18px;padding:14px 18px;box-shadow:0 4px 10px #00000026}.chat-bubble-row.model .chat-bubble{color:#f5f6fa;background:#ffffff14;border:1.5px dashed #fff3;border-top-left-radius:0}.chat-bubble-row.user .chat-bubble{color:#fff;background:#00bec9;border-top-right-radius:0;box-shadow:0 4px 12px #00bec94d}.bubble-speaker{color:#f1c40f;margin-bottom:5px;font-size:.75rem;font-weight:700;display:block}.chat-bubble-row.user .bubble-speaker{color:#ffeaa7}.bubble-text{white-space:pre-wrap;letter-spacing:.3px;font-size:1rem}@media (width<=768px){.classroom-grid{grid-template-columns:1fr}.classroom-teacher-area{padding:15px}.classroom-blackboard{min-height:380px}}.voice-settings-inline-container{border-radius:var(--border-radius-large);width:100%;box-shadow:var(--card-shadow);background:#fff;border:3px solid #dfe6e9;margin-bottom:25px;transition:all .3s;overflow:hidden}.voice-settings-inline-container:hover{border-color:#00bec9}.voice-settings-toggle-btn{width:100%;font-family:var(--font-family);color:var(--text-main);cursor:pointer;background:#f8f9fa;border:none;outline:none;justify-content:space-between;align-items:center;padding:14px 20px;font-size:1rem;font-weight:700;transition:background .2s,color .2s;display:flex}.voice-settings-toggle-btn:hover{color:#fff;background:#00bec9}.voice-settings-inline-panel{background:#fff;border-top:2px solid #dfe6e9;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:20px;display:grid}.scenario-selection-area{text-align:center;padding:20px 10px}.scenario-selection-title{color:var(--text-main);margin-bottom:30px;font-size:1.4rem;font-weight:700;display:inline-block;position:relative}.scenario-selection-title:after{content:"";background:#00bec9;border-radius:2px;width:80px;height:4px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.scenarios-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;max-width:1200px;margin:0 auto;display:grid}.scenario-card{cursor:pointer;text-align:center;background:#fff;border-radius:16px;flex-direction:column;align-items:center;padding:25px;transition:all .3s cubic-bezier(.175,.885,.32,1.2);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0000000d}.scenario-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px #0000001f}.scenario-card-icon{border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;margin-bottom:20px;font-size:2.2rem;transition:transform .3s;display:flex}.scenario-card:hover .scenario-card-icon{transform:scale(1.15)rotate(5deg)}.scenario-card-title{margin-bottom:12px;font-size:1.25rem;font-weight:700}.scenario-card-desc{color:var(--text-muted);flex-grow:1;margin-bottom:25px;font-size:.95rem;line-height:1.5}.scenario-card-btn{color:#fff;font-family:var(--font-family);cursor:pointer;border:none;border-radius:50px;width:100%;margin-top:auto;padding:10px 24px;font-size:.95rem;font-weight:700;transition:all .2s;box-shadow:0 4px 10px #0000001a}.scenario-card-btn:hover{transform:scale(1.03);box-shadow:0 6px 15px #00000026}.scenario-header-inline{background:#fff;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;padding:15px 25px;display:flex;box-shadow:0 4px 15px #00000008}.scenario-header-left{align-items:center;gap:15px;display:flex}.scenario-back-btn{font-family:var(--font-family);color:var(--text-main);cursor:pointer;background:#f1f2f6;border:none;border-radius:50px;padding:10px 20px;font-size:.95rem;font-weight:700;transition:all .2s;box-shadow:0 2px 5px #0000000d}.scenario-back-btn:hover{background:#dfe6e9;transform:translate(-3px)}.scenario-info-title{margin:0;font-size:1.25rem;font-weight:700}.scenario-info-desc{color:var(--text-muted);margin:5px 0 0;font-size:.9rem}.classroom-active-actions{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.input-actions-container{align-items:center;gap:10px;width:100%;max-width:500px;display:flex}.classroom-mic-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#00bec9;border:none;border-radius:50px;flex-grow:1;justify-content:center;align-items:center;gap:8px;padding:14px 25px;font-size:1.05rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 15px #00bec94d}.classroom-mic-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00bec966}.classroom-mic-btn.recording{background:#ff7675;animation:1.5s infinite pulse-red;box-shadow:0 4px 15px #ff767566}@keyframes pulse-red{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}.message-text-input{font-family:var(--font-family);color:var(--text-main);background:#fff;border:2px solid #dfe6e9;border-radius:50px;outline:none;flex-grow:1;padding:12px 20px;font-size:.95rem;transition:border-color .2s}.message-text-input:focus{border-color:#00bec9}.message-send-btn{color:#fff;cursor:pointer;background:#2ecc71;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;transition:all .2s;display:flex;box-shadow:0 4px 10px #2ecc7133}.message-send-btn:hover{transform:scale(1.08);box-shadow:0 6px 15px #2ecc714d}.review-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#9b59b6;border:none;border-radius:50px;padding:10px 20px;font-size:.95rem;font-weight:700;transition:all .2s;box-shadow:0 4px 10px #9b59b633}.review-btn:hover{background:#8e44ad;transform:translateY(-2px);box-shadow:0 6px 15px #9b59b64d}.review-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000a6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.review-modal-content{color:#fff;background:#2c3e50;border:4px solid #f39c12;border-radius:20px;flex-direction:column;width:100%;max-width:650px;max-height:80vh;animation:.3s cubic-bezier(.175,.885,.32,1.2) modal-pop;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #0006}@keyframes modal-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.review-modal-header{background:#1a252f;border-bottom:2px dashed #f39c12;justify-content:space-between;align-items:center;padding:20px 25px;display:flex}.review-modal-title{color:#f39c12;margin:0;font-size:1.35rem;font-weight:700}.review-modal-close-btn{color:#bdc3c7;cursor:pointer;background:0 0;border:none;font-size:1.5rem;transition:color .2s}.review-modal-close-btn:hover{color:#e74c3c}.review-modal-body{padding:25px;font-size:1rem;line-height:1.6;overflow-y:auto}.review-modal-body p{margin:0 0 15px}.review-modal-body h2,.review-modal-body h3{color:#f1c40f;margin:20px 0 10px;font-weight:700}.review-modal-body h2:first-of-type{margin-top:0}.review-markdown-content{font-family:var(--font-family);white-space:pre-wrap}.review-markdown-content ul{margin-bottom:15px;padding-left:20px}.review-markdown-content li{margin-bottom:8px}.review-modal-footer{background:#1a252f;border-top:2px dashed #f39c12;justify-content:flex-end;padding:15px 25px;display:flex}.review-modal-done-btn{color:#fff;font-family:var(--font-family);cursor:pointer;background:#f39c12;border:none;border-radius:50px;padding:10px 25px;font-weight:700;transition:all .2s}.review-modal-done-btn:hover{background:#d35400;transform:scale(1.03)}