@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-dark:#0f172a;--bg-gradient:linear-gradient(135deg, #1e1b4b, #0f172a, #172554);--primary:#8b5cf6;--primary-hover:#7c3aed;--secondary:#ec4899;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--text-main:#f8fafc;--text-muted:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-main);background-size:400% 400%;justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;animation:15s infinite gradientBG;display:flex}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#root{width:100%;max-width:900px;padding:2rem}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:24px;padding:3rem;animation:.6s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 25px 50px -12px #00000080}.brand-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.brand-header img{object-fit:contain;background:#fff;border-radius:10px;width:min(260px,70%);max-height:105px;padding:.65rem}.logout-button{width:auto;color:var(--text-muted);border:1px solid var(--glass-border);background:#00000040;padding:.6rem .85rem;font-size:.85rem}.auth-panel{max-width:620px;margin:0 auto}.auth-panel .brand-header{justify-content:center}.login-card{text-align:center;border:1px solid var(--glass-border);background:#0000003d;border-radius:16px;max-width:460px;margin:0 auto;padding:2rem}.login-card>svg{color:#c4b5fd}.login-card h1{margin:.75rem 0;font-size:2rem}.login-card form{gap:.85rem;display:grid}.login-card input{border:1px solid var(--glass-border);color:#fff;width:100%;font:inherit;background:#0000004d;border-radius:10px;outline:none;padding:.9rem}.login-card input:focus{border-color:var(--primary)}.password-field{position:relative}.password-field input{padding-right:3.25rem}.password-toggle{width:auto;color:var(--text-muted);background:0 0;padding:.45rem;position:absolute;top:50%;right:.45rem;transform:translateY(-50%)}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}h1{background:linear-gradient(90deg,#c084fc,#ec4899);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:800}.subtitle{text-align:center;color:var(--text-muted);margin-bottom:3rem;font-size:1.1rem}.grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.card{border:1px solid var(--glass-border);background:#0003;border-radius:16px;padding:1.5rem;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px -10px #8b5cf64d}h2{align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.5rem;display:flex}.prompt-box{border-left:4px solid var(--primary);background:#ffffff08;border-radius:8px;margin-bottom:1.5rem;padding:1rem;font-size:1.1rem;font-style:italic}button{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem;font-family:inherit;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}button:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:linear-gradient(to right, var(--primary), var(--secondary));color:#fff;box-shadow:0 4px 15px #8b5cf666}.muted{color:var(--text-muted);margin-bottom:1rem;font-size:.95rem}.success-note{text-align:center;color:#4ade80;margin:1rem 0}.success-note:before{content:"✓ "}.field-row{color:var(--text-muted);align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.field-row select{color:#fff;border:1px solid var(--glass-border);background:#0000004d;border-radius:8px;padding:.5rem}.mode-selector{grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:2rem;display:grid}.mode-selector button,.route-link{color:var(--text-muted);border:1px solid var(--glass-border);background:#00000040;font-size:.95rem}.route-link{text-align:center;border-radius:12px;padding:1rem;font-weight:600;text-decoration:none}.mode-selector button.active{color:#fff;border-color:var(--primary);background:#8b5cf638}.roleplay-layout{gap:1.25rem;display:grid}.scenario-banner,.conversation-header,.processing{align-items:center;gap:.75rem;display:flex}.scenario-banner{color:#fde68a;background:#f59e0b1a;border:1px solid #f59e0b59;border-radius:12px;padding:1rem}.setup-card,.call-ready{width:100%;max-width:620px;margin:0 auto}.setup-card .btn-primary{margin-top:1rem}.context-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.context-grid label,.context-field{color:var(--text-muted);gap:.45rem;margin-bottom:1rem;font-size:.9rem;display:grid}.context-grid input,.context-field input{border:1px solid var(--glass-border);color:#fff;width:100%;font:inherit;background:#0000004d;border-radius:10px;outline:none;padding:.8rem}.context-grid input:focus,.context-field input:focus{border-color:var(--primary)}.context-field textarea{min-height:80px;margin-bottom:0}.demo-instructions{color:var(--text-muted);background:#3b82f61a;border:1px solid #3b82f640;border-radius:12px;gap:.55rem;margin:.5rem 0 1.5rem;padding:1rem;font-size:.9rem;display:grid}.demo-instructions strong{color:#bfdbfe}.demo-instructions span:before{content:"• ";color:#60a5fa}.consent-check{color:var(--text-muted);align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;line-height:1.45;display:flex}.consent-check input{margin-top:.25rem;transform:scale(1.2)}.call-ready{text-align:center}.call-ready h2{justify-content:center;margin-top:.75rem}.pronunciation-note{color:#c4b5fd;margin-bottom:1rem}.original-voice-player{text-align:left;background:#0c070373;border:1px solid #f59e0b4d;border-radius:12px;gap:.65rem;margin:1rem 0 1.25rem;padding:1rem;display:grid}.original-voice-player p{color:var(--text-muted);font-size:.9rem}.language-confirmation{text-align:left;background:#78350f33;border:1px solid #f59e0b5c;border-radius:12px;gap:.65rem;margin:1rem 0 1.25rem;padding:1rem;display:grid}.language-confirmation p,.language-confirmation label{color:var(--text-muted);font-size:.9rem}.language-confirmation blockquote{background:#0c070373;border-left:3px solid #f59e0b;border-radius:6px;padding:.75rem}.language-confirmation label{gap:.45rem;display:grid}.language-confirmation select{width:100%;color:var(--text-main);font:inherit;background:#1b0d04;border:1px solid #f59e0b4d;border-radius:10px;padding:.8rem}.btn-call,.push-to-talk{color:#fff;background:linear-gradient(90deg,#16a34a,#22c55e)}.conversation-card,.reveal-card{border:1px solid var(--glass-border);background:#00000047;border-radius:16px;padding:1.25rem}.conversation-header{justify-content:space-between;margin-bottom:1rem;font-weight:600}.conversation-header>div{align-items:center;gap:.5rem;display:flex}.compact{width:auto;padding:.55rem .8rem;font-size:.85rem}.btn-reveal,.btn-secondary{color:#fff;background:#ef44442e;border:1px solid #ef444459}.conversation{gap:.85rem;max-height:420px;margin-bottom:1rem;padding:.25rem 0;display:grid;overflow-y:auto}.message{border-radius:14px;max-width:82%;padding:.85rem 1rem}.message span{color:var(--text-muted);margin-bottom:.35rem;font-size:.75rem;display:block}.message.receiver{background:#3b82f633;border-bottom-right-radius:3px;justify-self:end}.message.cloned_voice_owner{background:#ec48992e;border-bottom-left-radius:3px;justify-self:start}.message audio{max-width:310px;margin-top:.6rem}.push-to-talk.listening{background:#ef444438;border:1px solid #ef444466;margin-top:0;animation:1.5s infinite pulse}.processing{color:#c4b5fd;justify-content:center;padding:1rem}.reveal-card{text-align:center;background:#22c55e1a;border-color:#4ade8066}.reveal-card>svg{color:#4ade80}.reveal-card h2{justify-content:center;margin-top:.75rem}.verification{color:#bbf7d0;margin:1rem 0}.verification-candidate{color:#fde68a;background:#f59e0b1a;border:1px solid #f59e0b66;border-radius:12px;gap:.75rem;margin-top:1rem;padding:1rem;display:grid}.verification-candidate p{color:var(--text-main)}.verification-actions{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.btn-confirm{color:#fff;background:linear-gradient(90deg,#16a34a,#22c55e)}.lesson{margin:1.25rem 0;font-size:1.35rem;font-weight:800}.safety-steps{grid-template-columns:repeat(2,1fr);gap:.65rem;margin-bottom:1.25rem;display:grid}.safety-steps span{background:#00000040;border-radius:9px;padding:.7rem}.btn-primary:hover:not(:disabled){transform:scale(1.02);box-shadow:0 6px 20px #8b5cf699}.btn-record{color:#f87171;background:#ef44441a;border:1px solid #ef44444d}.btn-record.recording{background:#ef444433;animation:1.5s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 15px #ef444400}to{box-shadow:0 0 #ef444400}}textarea{border:1px solid var(--glass-border);color:#fff;resize:vertical;background:#0000004d;border-radius:12px;outline:none;width:100%;min-height:120px;margin-bottom:1rem;padding:1rem;font-family:inherit;font-size:1rem;transition:border-color .2s}textarea:focus{border-color:var(--primary)}.status{text-align:center;min-height:1.5rem;color:var(--text-muted);margin-top:1rem;font-size:.95rem}.audio-player-container{text-align:center;border:1px solid var(--glass-border);background:#0000004d;border-radius:16px;margin-top:2rem;padding:1.5rem;animation:.5s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}audio{border-radius:8px;outline:none;width:100%;height:40px}audio::-webkit-media-controls-panel{background-color:var(--text-main)}body.roleplay-theme{--primary:#f59e0b;--primary-hover:#d97706;--secondary:#ea580c;--glass-border:#f59e0b52;--text-main:#fff7e6;--text-muted:#d6b88a;background-color:#0000;background-image:radial-gradient(circle at 18% 85%,#b4790052,#0000 34%),radial-gradient(circle at 78% 10%,#c2410c52,#0000 38%),linear-gradient(145deg,#070605 8%,#241204 48%,#4b1b02 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;animation:none}.roleplay-panel{background:#1b0d04c7;border-color:#f59e0b66;box-shadow:0 28px 70px #0000009e}.roleplay-panel h1{background:linear-gradient(90deg,#fff7d6,#fbbf24,#f97316);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.roleplay-panel .brand-header img{border:1px solid #f59e0b;margin-left:auto;margin-right:auto;box-shadow:0 10px 30px #ea580c38}.roleplay-panel .brand-header{justify-content:center;position:relative}.roleplay-panel .logout-button{position:absolute;right:0}.roleplay-panel .login-card,.roleplay-panel .card,.roleplay-panel .conversation-card{background:linear-gradient(145deg,#471f04d1,#1f0f05e6);border-color:#f59e0b57}.roleplay-panel .card:hover{box-shadow:0 12px 32px #f59e0b2e}.roleplay-panel .login-card>svg,.roleplay-panel .pronunciation-note,.roleplay-panel .processing{color:#fbbf24}.roleplay-panel .login-card input,.roleplay-panel .context-grid input,.roleplay-panel .context-field input,.roleplay-panel textarea{color:#fff7e6;background:#0c0703ad;border-color:#f59e0b40}.roleplay-panel .login-card input:focus,.roleplay-panel .context-grid input:focus,.roleplay-panel .context-field input:focus,.roleplay-panel textarea:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1f}.roleplay-panel .btn-primary,.roleplay-panel .btn-call,.roleplay-panel .push-to-talk,.roleplay-panel .btn-confirm{color:#1c0b02;background:linear-gradient(90deg,#d97706,#f59e0b,#ea580c);box-shadow:0 5px 18px #ea580c4d}.roleplay-panel .mode-selector button.active{color:#fff7e6;background:#f59e0b33;border-color:#f59e0b}.roleplay-panel .route-link,.roleplay-panel .logout-button{color:#f4d7a1;background:#2c1404b3;border-color:#f59e0b47}.roleplay-panel .scenario-banner,.roleplay-panel .verification-candidate{color:#fde68a;background:#92400e3d;border-color:#f59e0b80}.roleplay-panel .demo-instructions{color:#e5c89a;background:#78350f3d;border-color:#f59e0b4d}.roleplay-panel .demo-instructions strong,.roleplay-panel .demo-instructions span:before{color:#fbbf24}.roleplay-panel .prompt-box{background:#0c070385;border-left-color:#f59e0b}.roleplay-panel .message.receiver{background:#b4530957;border:1px solid #fbbf2433}.roleplay-panel .message.cloned_voice_owner{background:#7c2d1285;border:1px solid #f973163d}.roleplay-panel .reveal-card{background:linear-gradient(145deg,#523105e6,#271804f0);border-color:#facc1573}.roleplay-panel .reveal-card>svg,.roleplay-panel .success-note,.roleplay-panel .verification{color:#facc15}.roleplay-panel .safety-steps span{background:#140a0385;border:1px solid #f59e0b2e}.roleplay-panel .btn-reveal,.roleplay-panel .btn-secondary{color:#ffedd5;background:#7f1d1d52;border-color:#fb923c57}@media (width<=768px){#root{padding:.75rem}.roleplay-panel{border-radius:18px;padding:1rem}.roleplay-panel .brand-header{justify-items:center;margin-bottom:1rem;display:grid}.roleplay-panel .brand-header img{width:min(240px,82%);max-height:92px}.roleplay-panel .logout-button{width:auto;padding:.5rem .8rem;position:static}.roleplay-panel h1{font-size:2.1rem}.roleplay-panel .subtitle{margin-bottom:1.5rem;font-size:.95rem}.roleplay-panel .card,.roleplay-panel .conversation-card,.roleplay-panel .reveal-card,.roleplay-panel .login-card{border-radius:14px;padding:1rem}.roleplay-panel h2{font-size:1.2rem}.grid,.mode-selector,.context-grid,.verification-actions,.safety-steps{grid-template-columns:1fr}.message{max-width:100%;padding:.75rem}.message audio,.original-voice-player audio{max-width:100%}.conversation{max-height:55vh}.conversation-header{align-items:flex-start;gap:.75rem}.conversation-header .compact{flex-shrink:0;width:auto;padding:.5rem .65rem;font-size:.75rem}.push-to-talk,.btn-call{min-height:56px;padding:.85rem;font-size:1rem}.original-voice-player{padding:.8rem}.scenario-banner{align-items:flex-start;font-size:.9rem}}