@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-dark:#070913;--bg-gradient:radial-gradient(circle at 20% 20%, #170d38 0%, #080d24 50%, #050711 100%);--glass-bg:#ffffff09;--glass-bg-hover:#fff1;--glass-border:#ffffff1a;--glass-border-hover:#ffffff38;--glass-shadow:0 16px 40px 0 #00000073;--glass-blur:blur(24px) saturate(190%);--primary:#6366f1;--primary-glow:#6366f159;--secondary:#38bdf8;--accent-ko:#f43f5e;--accent-en:#3b82f6;--accent-vi:#10b981;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-xl:30px;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-dark);background-image:var(--bg-gradient);color:var(--text-main);-webkit-font-smoothing:antialiased;background-attachment:fixed;min-height:100vh;overflow-x:hidden}.ambient-glow{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.blob{filter:blur(120px);opacity:.4;border-radius:50%;animation:18s ease-in-out infinite alternate floatBlob;position:absolute}.blob-1{background:radial-gradient(circle,#6366f1cc,#a855f766);width:500px;height:500px;top:-100px;left:-100px}.blob-2{background:radial-gradient(circle,#38bdf8b3,#10b9814d);width:600px;height:600px;animation-delay:-5s;bottom:-150px;right:-100px}.blob-3{background:radial-gradient(circle,#f43f5e99,#ec48994d);width:450px;height:450px;animation-delay:-10s;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes floatBlob{0%{transform:translate(0)scale(1)}50%{transform:translate(60px,40px)scale(1.1)}to{transform:translate(-40px,80px)scale(.95)}}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg);z-index:1;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative}.glass-panel:hover{border-color:var(--glass-border-hover)}.glass-card-interactive{cursor:pointer}.glass-card-interactive:hover{background:var(--glass-bg-hover);border-color:#6366f166;transform:translateY(-3px);box-shadow:0 20px 48px #6366f126}.glass-input{border-radius:var(--radius-md);color:#fff;width:100%;font-family:var(--font-sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0f1e8c;border:1px solid #ffffff1f;outline:none;padding:14px 18px;font-size:.95rem;transition:all .25s}.glass-input:focus{background:#0f172abf;border-color:#818cf8;box-shadow:0 0 20px #6366f14d}.glass-input::placeholder{color:var(--text-dim)}.glass-btn{font-family:var(--font-sans);border-radius:var(--radius-md);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14;border:1px solid #ffffff26;justify-content:center;align-items:center;gap:10px;padding:13px 24px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .25s cubic-bezier(.16,1,.3,1);display:inline-flex}.glass-btn:hover:not(:disabled){background:#ffffff29;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.glass-btn:active:not(:disabled){transform:translateY(0)}.glass-btn-primary{background:linear-gradient(135deg,#6366f1d9 0%,#8b5cf6d9 100%);border:1px solid #a78bfa66;box-shadow:0 8px 25px #6366f166}.glass-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border-color:#ffffff80;box-shadow:0 12px 32px #6366f199}.glass-btn-danger{background:linear-gradient(135deg,#ef4444b3 0%,#e11d48b3 100%);border:1px solid #f871714d}.glass-btn-danger:hover:not(:disabled){background:linear-gradient(135deg,#ef4444e6 0%,#e11d48e6 100%);box-shadow:0 8px 24px #ef444466}.glass-btn:disabled{opacity:.5;cursor:not-allowed}.gradient-text{background:linear-gradient(135deg,#fff 0%,#a5b4fc 50%,#38bdf8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.gradient-text-vi{background:linear-gradient(135deg,#6ee7b7 0%,#10b981 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.gradient-text-en{background:linear-gradient(135deg,#93c5fd 0%,#3b82f6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.gradient-text-ko{background:linear-gradient(135deg,#fda4af 0%,#f43f5e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.status-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #0000;border-radius:30px;align-items:center;gap:8px;padding:6px 14px;font-size:.82rem;font-weight:600;display:inline-flex}.status-badge.connected{color:#34d399;background:#10b98126;border-color:#10b9814d}.status-badge.connected .dot{background:#10b981;animation:2s infinite pulseGreen;box-shadow:0 0 10px #10b981}.status-badge.connecting{color:#fbbf24;background:#f59e0b26;border-color:#f59e0b4d}.status-badge.connecting .dot{background:#f59e0b;animation:1.5s infinite pulseYellow;box-shadow:0 0 10px #f59e0b}.status-badge.disconnected,.status-badge.error{color:#fca5a5;background:#ef444426;border-color:#ef44444d}.status-badge.disconnected .dot,.status-badge.error .dot{background:#ef4444}.dot{border-radius:50%;width:8px;height:8px}@keyframes pulseGreen{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 8px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}@keyframes pulseYellow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#00000026;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.translation-grid{flex-wrap:wrap;gap:20px;display:flex}.translation-grid>*{flex:1 1 0;min-width:300px}.audio-waves{align-items:center;gap:3px;height:18px;display:flex}.audio-bar{background:#818cf8;border-radius:3px;width:3px;animation:1.2s ease-in-out infinite alternate wave}.audio-bar:first-child{height:40%;animation-delay:.1s}.audio-bar:nth-child(2){height:80%;animation-delay:.3s}.audio-bar:nth-child(3){height:100%;animation-delay:.2s}.audio-bar:nth-child(4){height:60%;animation-delay:.4s}@keyframes wave{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}