:root {
  --bg: #0b0b10;
  --panel: #14141c;
  --line: #232331;
  --txt: #eef0f6;
  --mut: #8a8fa3;
  --acc: #4ade80;
  --acc2: #22d3ee;
  --red: #f87171;
  --glass: rgba(20, 20, 30, .72);
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', system-ui, sans-serif; }
html,body { background:var(--bg); color:var(--txt); min-height:100%; }
.app { max-width:860px; margin:0 auto; padding:18px; display:flex; flex-direction:column; gap:14px; min-height:100vh; }

.top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand { display:flex; align-items:center; gap:10px; }
.logo { font-size:26px; }
.name { font-size:22px; font-weight:700; letter-spacing:.5px; }
.beta { background:linear-gradient(135deg,var(--acc2),#6366f1); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:middle; }
.engine { font-size:11px; color:var(--mut); background:var(--panel); border:1px solid var(--line); padding:4px 10px; border-radius:20px; }
.banner { border-radius:12px; padding:10px 14px; font-size:13px; line-height:1.6; border:1px solid; }
.banner[data-kind="err"] { background:#3a0f13; color:#ffb4b4; border-color:#7f1d1d; }
.banner[data-kind="warn"] { background:#33280a; color:#ffd28a; border-color:#7f5a1d; }
.banner[data-kind="ok"] { background:#0a2e1a; color:#9af0c3; border-color:#166534; }
.banner button { background:#fff2; color:inherit; border:1px solid currentColor; border-radius:8px; padding:3px 10px; margin-left:8px; cursor:pointer; font-size:12px; }
.status-chip { font-size:11px; padding:5px 12px; border-radius:20px; border:1px solid var(--line); background:var(--panel); color:var(--mut); }
.status-chip[data-state="online"] { color:#0b0b10; background:var(--acc); border-color:var(--acc); font-weight:700; }
.status-chip[data-state="offline"] { color:#fff; background:#7f1d1d; border-color:var(--red); }
.status-chip[data-state="rec"] { color:#0b0b10; background:var(--red); border-color:var(--red); font-weight:700; animation:blink 1.2s infinite; }

.langbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 10px; }
.lang { background:transparent; color:var(--mut); border:1px solid var(--line); padding:8px 14px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s; }
.lang:hover { color:#fff; border-color:#3a3a55; }
.lang.active { background:linear-gradient(135deg,var(--acc2), #6366f1); color:#fff; border-color:transparent; }
.modelinfo { margin-left:auto; font-size:11px; color:var(--mut); max-width:220px; text-align:right; }

.fastbar { display:flex; align-items:center; gap:10px; }
.turbo { display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600; color:var(--txt); cursor:pointer; }
.turbo input { accent-color:var(--acc2); }
.tnote { font-size:11px; color:var(--mut); }

.stage { display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; }
.micwrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
.mic { width:96px; height:96px; border-radius:50%; border:none; cursor:pointer; color:#0b0b10;
  background:linear-gradient(135deg,var(--acc),#22c55e); box-shadow:0 8px 30px rgba(34,197,94,.35); transition:.15s; }
.mic svg { width:40px; height:40px; }
.mic:active { transform:scale(.92); }
.mic.rec { background:linear-gradient(135deg,var(--red),#dc2626); color:#fff; box-shadow:0 8px 30px rgba(248,113,113,.45); animation:micpulse 1.2s infinite; }
.mic-hint { font-size:12px; color:var(--mut); }

.wavebox { flex:1; display:flex; flex-direction:column; gap:8px; }
#canvas { width:100%; height:72px; background:#0a0a0f; border-radius:12px; display:block; }
.metrics { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:12px; color:var(--mut); }
.metrics b { color:var(--txt); }

.panel { display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; }
.transcript { font-size:16px; line-height:1.7; white-space:pre-wrap; min-height:22px; color:#e8ecf5; }
.partial { font-size:16px; line-height:1.7; color:var(--acc2); font-style:italic; min-height:22px; white-space:pre-wrap; }
#editor { width:100%; height:170px; background:#0b0b11; border:1px solid var(--line); border-radius:12px; color:var(--txt); padding:12px; font-size:14px; resize:vertical; outline:none; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; }
.saverow { display:flex; gap:10px; flex-wrap:wrap; }
.saverow .box { flex:1; min-width:240px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 10px; }
.saverow summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--txt); }
.saverow summary:hover { color:#fff; }
.filerow { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:5px 0; border-bottom:1px dashed #1d1d2a; font-size:12px; }
.filerow a { color:var(--acc2); text-decoration:none; }
.filerow a:hover { text-decoration:underline; }
.filerow .muted { color:var(--mut); }
.filerow.muted, .filerow span { color:var(--mut); }
#filesList { max-height:150px; overflow-y:auto; }
#kwArea { width:100%; background:#0b0b11; border:1px solid var(--line); border-radius:10px; color:var(--txt); padding:10px; font-size:13px; font-family:monospace; resize:vertical; outline:none; margin-top:8px; }
.kwbar { display:flex; gap:8px; margin-top:8px; }
.btn { background:var(--bg); color:var(--mut); border:1px solid var(--line); padding:9px 16px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s; }
.btn:hover { border-color:#3a3a55; color:#fff; }
.btn.primary { background:linear-gradient(135deg,var(--acc2),#6366f1); color:#fff; border:none; }
.btn.danger { color:var(--red); }
.btn.ai { background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; border:none; }
.btn.ai:disabled { opacity:.5; cursor:wait; }
.aibox { background:#0d0d18; border:1px solid #4c1d95; border-radius:14px; padding:12px 14px; }
.aihead { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; color:#c4b5fd; margin-bottom:8px; }
.aihead small { color:var(--mut); font-weight:400; margin-left:6px; }
.aihead .btn { padding:2px 8px; font-size:12px; }
.aitext { font-size:14px; line-height:1.7; white-space:pre-wrap; color:#e9e4ff; min-height:40px; }
.aitext:empty::before { content:'Javob kutilmoqda...'; color:var(--mut); }
.logbox { border-top:1px solid var(--line); padding-top:10px; }
.logtitle { color:var(--mut); font-size:12px; margin-bottom:6px; }
#log { font-family:monospace; font-size:11px; color:var(--mut); max-height:130px; overflow-y:auto; }
#log div { padding:2px 0; border-bottom:1px dashed #1d1d2a; }
#log div.ok { color:var(--acc); }

footer { text-align:center; color:#4b4f62; font-size:11px; padding-bottom:10px; }

@keyframes blink { 50% { opacity:.55; } }
@keyframes micpulse { 0% { box-shadow:0 0 0 0 rgba(248,113,113,.5);} 70% { box-shadow:0 0 0 18px rgba(248,113,113,0);} 100%{ box-shadow:0 0 0 0 rgba(248,113,113,0);} }
@media(max-width:600px){
  .stage { flex-direction:column; }
  .mic { width:80px; height:80px; }
  .app { padding:12px; }
}