:root{--primary:#6c5ce7;--primary-light:#a29bfe;--primary-dark:#5541d9;--accent:#ff6b6b;--accent-light:#ffa07a;--success:#00b894;--warning:#fdcb6e;--bg:#f8f9ff;--bg-card:#fff;--text:#2d3436;--text-light:#636e72;--text-muted:#b2bec3;--border:#e8eaff;--shadow:0 4px 20px #6c5ce71a;--shadow-lg:0 8px 40px #6c5ce726;--radius:16px;--radius-sm:10px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:Nunito,Noto Sans KR,-apple-system,BlinkMacSystemFont,sans-serif}#root{flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:20px;display:flex}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s}button:active{transform:scale(.97)}.app{flex-direction:column;width:100%;max-width:480px;min-height:100dvh;display:flex}.api-key-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:40px 20px;display:flex}.api-key-screen h2{color:var(--text);font-size:20px}.api-key-screen p{color:var(--text-light);font-size:14px;line-height:1.5}.api-key-input{border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;max-width:360px;padding:14px 18px;font-family:monospace;font-size:14px;transition:border-color .2s}.api-key-input:focus{border-color:var(--primary);outline:none}.api-key-submit{background:var(--primary);color:#fff;border-radius:var(--radius-sm);padding:14px 40px;font-size:16px;font-weight:700}.api-key-submit:hover{background:var(--primary-dark)}.level-select{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:32px;padding:40px 20px;display:flex}.level-select .logo{margin-bottom:-10px;font-size:48px}.level-select h1{color:var(--primary);text-align:center;font-size:28px;font-weight:800;line-height:1.3}.level-select .subtitle{color:var(--text-light);margin-top:-20px;font-size:15px}.level-cards{flex-direction:column;gap:16px;width:100%;display:flex}.level-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);text-align:left;box-shadow:var(--shadow);padding:24px;transition:all .2s}.level-card:hover{border-color:var(--primary-light);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.level-card .level-badge{border-radius:20px;margin-bottom:10px;padding:4px 12px;font-size:12px;font-weight:700;display:inline-block}.level-card.basic .level-badge{color:#2e7d32;background:#e8f5e9}.level-card.intermediate .level-badge{color:#e65100;background:#fff3e0}.level-card .level-title{color:var(--text);margin-bottom:6px;font-size:18px;font-weight:700}.level-card .level-desc{color:var(--text-light);font-size:14px;line-height:1.4}.level-card .level-vocab{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.level-card .vocab-tag{background:var(--bg);color:var(--primary);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:600}.curriculum-intro{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:40px 20px;display:flex}.curriculum-intro .lesson-icon{font-size:64px}.curriculum-intro h2{color:var(--text);font-size:22px;font-weight:800}.curriculum-intro .lesson-title{color:var(--primary);font-size:18px;font-weight:700}.curriculum-intro .lesson-desc{color:var(--text-light);max-width:320px;font-size:15px;line-height:1.6}.vocab-list{flex-wrap:wrap;justify-content:center;gap:8px;max-width:320px;display:flex}.vocab-list .vocab-chip{background:var(--bg-card);border:1px solid var(--border);color:var(--primary);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600}.mode-selector{gap:10px;width:100%;max-width:360px;display:flex}.mode-btn{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;flex:1;align-items:center;gap:4px;padding:14px 10px;transition:all .2s;display:flex}.mode-btn:hover{border-color:var(--primary-light)}.mode-btn.active{border-color:var(--primary);background:#f0edff}.mode-btn .mode-icon{font-size:22px}.mode-btn .mode-name{color:var(--text);font-size:13px;font-weight:700}.mode-btn .mode-desc{color:var(--text-muted);font-size:11px}.mode-badge-small{color:#2e7d32;background:#e8f5e9;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.start-btn{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;border-radius:50px;margin-top:16px;padding:16px 48px;font-size:18px;font-weight:700;box-shadow:0 4px 15px #6c5ce74d}.start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px #6c5ce766}.back-link{color:var(--text-muted);background:0 0;margin-top:8px;font-size:14px}.back-link:hover{color:var(--text-light)}.conversation{flex-direction:column;flex:1;padding:20px;display:flex}.conv-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;display:flex}.conv-header .teacher-info{align-items:center;gap:10px;display:flex}.conv-header .teacher-avatar{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.conv-header .teacher-name{font-size:16px;font-weight:700}.conv-header .teacher-status{color:var(--success);font-size:12px;font-weight:600}.conv-header .turn-count{color:var(--text-muted);font-size:13px;font-weight:600}.conv-header .end-btn{color:var(--accent);border-radius:var(--radius-sm);border:1px solid var(--accent);background:0 0;padding:6px 12px;font-size:13px;font-weight:700}.conv-header .end-btn:hover{background:var(--accent);color:#fff}.messages{flex-direction:column;flex:1;gap:12px;padding-bottom:20px;display:flex;overflow-y:auto}.message{border-radius:var(--radius);max-width:85%;padding:12px 16px;font-size:15px;line-height:1.5;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message.ai{background:var(--bg-card);border:1px solid var(--border);color:var(--text);align-self:flex-start}.message.user{background:var(--primary);color:#fff;align-self:flex-end}.message.interim{opacity:.5;font-style:italic}.message.system{background:var(--warning);color:var(--text);border-radius:20px;align-self:center;padding:8px 16px;font-size:13px;font-weight:600}.mic-area{flex-direction:column;align-items:center;gap:12px;padding:20px 0;display:flex}.mic-select-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:40px 20px;display:flex}.mic-select-screen h3{color:var(--text);font-size:18px;font-weight:700}.mic-list{flex-direction:column;gap:8px;width:100%;max-width:360px;display:flex}.mic-option{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);text-align:left;color:var(--text);padding:12px 16px;font-size:14px;transition:all .2s}.mic-option:hover{border-color:var(--primary-light)}.mic-option.active{border-color:var(--primary);background:#f0edff;font-weight:700}.mic-ring{background:var(--primary);pointer-events:none;border-radius:50%;width:72px;height:72px;transition:transform .1s,opacity .2s;position:absolute}.mic-area{position:relative}.mic-btn{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:28px;display:flex;position:relative;box-shadow:0 4px 20px #6c5ce74d}.mic-btn.listening{background:var(--accent);animation:1.5s infinite pulse}.mic-btn.ai-speaking{background:var(--success);animation:1s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #6c5ce766}50%{box-shadow:0 0 0 15px #6c5ce700}}.mic-btn.listening{animation-name:pulse-red}@keyframes pulse-red{0%,to{box-shadow:0 0 #ff6b6b66}50%{box-shadow:0 0 0 15px #ff6b6b00}}.mic-btn.ai-speaking{animation-name:pulse-green}@keyframes pulse-green{0%,to{box-shadow:0 0 #00b89466}50%{box-shadow:0 0 0 15px #00b89400}}.mic-label{color:var(--text-muted);font-size:13px;font-weight:600}.connecting-msg{text-align:center;color:var(--text-light);padding:40px;font-size:15px}.connecting-msg .spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:24px;height:24px;margin-bottom:12px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.feedback{flex-direction:column;flex:1;align-items:center;gap:24px;padding:40px 20px;display:flex}.feedback .celebration{font-size:64px}.feedback h2{color:var(--text);font-size:24px;font-weight:800}.feedback-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:left;width:100%;box-shadow:var(--shadow);padding:20px}.feedback-card h3{align-items:center;gap:8px;margin-bottom:12px;font-size:15px;font-weight:700;display:flex}.feedback-card ul{flex-direction:column;gap:8px;list-style:none;display:flex}.feedback-card li{color:var(--text-light);padding-left:20px;font-size:14px;line-height:1.5;position:relative}.feedback-card li:before{content:"";border-radius:50%;width:8px;height:8px;position:absolute;top:8px;left:0}.feedback-card.good li:before{background:var(--success)}.feedback-card.improve li:before{background:var(--warning)}.feedback-summary{border-radius:var(--radius);width:100%;color:var(--primary-dark);background:#f0edff;padding:16px 20px;font-size:14px;line-height:1.6}.home-btn{background:var(--primary);color:#fff;border-radius:50px;margin-top:8px;padding:14px 40px;font-size:16px;font-weight:700}.home-btn:hover{background:var(--primary-dark)}.group-lobby{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:40px 20px;display:flex}.group-lobby h2{color:var(--text);font-size:24px;font-weight:800}.group-desc{color:var(--text-light);font-size:14px}.group-actions{gap:12px;width:100%;display:flex}.group-action-btn{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;flex:1;align-items:center;gap:6px;padding:20px 12px;transition:all .2s;display:flex}.group-action-btn:hover{border-color:var(--primary-light);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.group-action-btn .action-icon{font-size:32px}.group-action-btn .action-title{color:var(--text);font-size:16px;font-weight:700}.group-action-btn .action-desc{color:var(--text-muted);font-size:12px}.group-form{text-align:left;flex-direction:column;gap:12px;width:100%;display:flex}.group-form label{color:var(--text-light);margin-top:4px;font-size:13px;font-weight:700}.group-input{border:2px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-family:inherit;font-size:16px;transition:border-color .2s}.group-input:focus{border-color:var(--primary);outline:none}.group-input.code{text-align:center;letter-spacing:8px;font-family:monospace;font-size:24px;font-weight:700}.group-error{color:var(--accent);font-size:13px;font-weight:600}.scenario-select{gap:8px;display:flex}.scenario-option{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);flex:1;padding:10px;font-size:13px;font-weight:600;transition:all .2s}.scenario-option.active{border-color:var(--primary);background:#f0edff}.room-code{letter-spacing:8px;color:var(--primary);border-radius:var(--radius);background:#f0edff;padding:16px 32px;font-family:monospace;font-size:40px;font-weight:800}.student-list{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;display:flex}.student-badge{color:#2e7d32;background:#e8f5e9;border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600}.student-badge.waiting{background:var(--border);color:var(--text-muted);animation:1.5s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.message.other-student{color:var(--text);background:#e3f2fd;border:1px solid #bbdefb;align-self:flex-start}.msg-name{color:var(--text-muted);margin-bottom:4px;font-size:11px;font-weight:700}.level-card.group{border-style:dashed;border-color:#90caf9}.level-card.group:hover{border-color:#1565c0}