:root {
  color-scheme: dark;
  --bg: #0e1014;
  --panel: #171a20;
  --panel2: #20242c;
  --line: #2d333d;
  --text: #f5f7fb;
  --muted: #9ea7b5;
  --accent: #f0f2f7;
  --danger: #ff6b6b;
  --ok: #77d99a;
  --warn: #ffd166;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, #191d25, var(--bg) 45%);
  color: var(--text);
  min-height: 100vh;
}
.shell { width: min(1100px, 94vw); margin: 0 auto; padding: 28px 0 48px; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.brand-mark { width:38px; height:38px; border-radius:12px; background:#f5f7fb; color:#101217; display:grid; place-items:center; font-weight:900; }
.brand h1 { margin:0; font-size:21px; letter-spacing:.04em; }
.brand small { color:var(--muted); display:block; margin-top:2px; }
.grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:16px; }
@media(max-width:820px){ .grid{grid-template-columns:1fr;} }
.card {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.card h2 { margin:0 0 14px; font-size:16px; }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input, select, button, textarea {
  font: inherit;
}
input, select {
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:11px 12px; outline:none;
}
input:focus, select:focus { border-color:#667085; }
.row { display:flex; gap:10px; align-items:end; }
.row > * { flex:1; }
.row .fit { flex:0 0 auto; }
button {
  border:1px solid var(--line); background:#242933; color:var(--text);
  border-radius:11px; padding:10px 14px; cursor:pointer;
}
button:hover { filter:brightness(1.08); }
button.primary { background:#f5f7fb; color:#111319; border-color:#f5f7fb; font-weight:700; }
button.danger { background:#3a2023; border-color:#653138; }
button:disabled { opacity:.42; cursor:not-allowed; }
.status {
  display:inline-flex; align-items:center; gap:7px; padding:7px 10px;
  border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px;
}
.status::before { content:""; width:8px; height:8px; border-radius:50%; background:#68707d; }
.status[data-kind="ok"]::before { background:var(--ok); box-shadow:0 0 12px color-mix(in srgb,var(--ok) 55%,transparent); }
.status[data-kind="warn"]::before { background:var(--warn); }
.status[data-kind="bad"]::before { background:var(--danger); }
.big-url {
  margin-top:12px; padding:13px 14px; border:1px dashed #4a515e; border-radius:12px;
  background:#12151a; word-break:break-all; color:#dce2eb; font-size:13px;
}
.meter-wrap { display:flex; gap:8px; align-items:center; margin-top:12px; }
.meter { height:10px; flex:1; background:#0d0f13; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.meter > div { height:100%; width:0%; background:linear-gradient(90deg,#8ad6a6,#f2d36b,#f27d7d); transition:width 70ms linear; }
.help { color:var(--muted); font-size:12px; line-height:1.55; }
.guest-list { display:flex; flex-direction:column; gap:8px; }
.guest-item { padding:10px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; display:flex; justify-content:space-between; }
.chat-box { height:300px; overflow:auto; border:1px solid var(--line); border-radius:13px; background:#101319; padding:12px; }
.chat-row { margin:8px 0; max-width:86%; }
.chat-row.self { margin-left:auto; }
.chat-meta { color:var(--muted); font-size:10px; margin:0 5px 4px; }
.chat-row.self .chat-meta { text-align:right; }
.chat-bubble { background:#252b35; border:1px solid #303744; border-radius:12px; padding:9px 11px; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-row.self .chat-bubble { background:#e9edf3; color:#13161b; }
.chat-input { display:flex; gap:8px; margin-top:9px; }
.chat-input input { flex:1; }
.talk {
  width:100%; min-height:90px; font-size:20px; font-weight:800; border-radius:18px;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
.talk.active { background:#f5f7fb; color:#111319; transform:scale(.995); }
.divider { height:1px; background:var(--line); margin:16px 0; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:9px; font-size:13px; }
.kv div:nth-child(odd){ color:var(--muted); }
.checkbox { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
.checkbox input { width:auto; }
audio { width:100%; }
.notice { padding:11px 12px; border:1px solid #4a515e; border-radius:11px; color:#cfd5df; font-size:12px; background:#14171d; line-height:1.55; }