:root {
  color-scheme: dark;
  --bg: #080910;
  --bg2: #0f111a;
  --panel: #141724;
  --line: rgba(255,255,255,.1);
  --line2: rgba(255,255,255,.18);
  --text: #f2f1ff;
  --muted: #a5a2bd;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --amber: #f6b84b;
  --danger: #fb5b68;
  --ok: #4ade80;
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Outfit, Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(900px 600px at 50% -20%, rgba(139,92,246,.22), transparent 65%),
    radial-gradient(700px 500px at 100% 100%, rgba(34,211,238,.08), transparent 70%),
    var(--bg);
}
a { color: #d8ccff; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app { width: min(1080px, 100%); margin: 0 auto; padding: 18px 16px 40px; }
.app.narrow { width: min(720px, 100%); }
.sitebar { display:flex; align-items:center; gap:15px; min-height:28px; margin:0 0 14px; padding:0 2px; color:var(--muted); font:600 11px var(--font); }
.sitebar a { color:var(--muted); text-decoration:none; }
.sitebar a:hover { color:var(--text); }
.sitebar a.home { display:inline-flex; align-items:center; gap:4px; color:var(--text); }
.sitebar a.active { color:#fff; }
.sitebar .spacer { flex:1; }
.lang-select { appearance:none; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.04); color:var(--text); font:700 10px var(--font); padding:4px 18px 4px 7px; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 9px) 50%,calc(100% - 6px) 50%; background-size:3px 3px,3px 3px; background-repeat:no-repeat; }
.top { display:flex; align-items:center; gap:10px; min-height:36px; margin-bottom:22px; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font:800 15px var(--display); letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--violet),#4f46e5); color:#fff; font-size:16px; box-shadow:0 0 22px rgba(139,92,246,.35); }
.brand small { color:var(--muted); font:500 11px var(--font); }
.top .spacer { flex:1; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(74,222,128,.7); flex:none; }
.dot.off { background:var(--muted); box-shadow:none; }
.dot.busy { background:var(--amber); box-shadow:0 0 8px rgba(246,184,75,.7); }
.hero { padding: clamp(22px, 6vw, 52px) 0 26px; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:#d4c7ff; font:800 10px var(--display); letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:12px 0 10px; font:800 clamp(30px, 6vw, 54px)/1.04 var(--display); letter-spacing:-.035em; }
h1 .grad { background:linear-gradient(100deg,#fff 10%,#c4b5fd 52%,#67e8f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { max-width:640px; margin:0 auto; color:var(--muted); font-size:15px; line-height:1.6; }
.card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); box-shadow:0 22px 60px -40px #000; }
.card.pad { padding:20px; }
.form { display:grid; gap:14px; }
.field { display:grid; gap:6px; }
.field label { color:var(--muted); font-size:12px; font-weight:600; }
.field small { color:var(--muted); font-size:11px; line-height:1.45; }
.input { width:100%; height:44px; padding:0 13px; border:1px solid var(--line2); border-radius:10px; background:rgba(0,0,0,.22); color:var(--text); outline:none; }
.input:focus { border-color:rgba(139,92,246,.75); box-shadow:0 0 0 3px rgba(139,92,246,.13); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row > .field { flex:1; min-width:150px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 16px; border:1px solid var(--line2); border-radius:10px; background:rgba(255,255,255,.05); color:var(--text); text-decoration:none; font-weight:700; font-size:13px; }
.btn:hover { background:rgba(255,255,255,.09); }
.btn.primary { border:0; background:linear-gradient(100deg,var(--violet),#6366f1 55%,#0ea5e9); color:#fff; box-shadow:0 10px 30px -12px rgba(99,102,241,.9); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; }
.btn.danger { color:#ffd4d8; border-color:rgba(251,91,104,.35); background:rgba(251,91,104,.1); }
.btn.sm { min-height:32px; padding:0 10px; font-size:11px; border-radius:8px; }
.btn.icon { width:40px; padding:0; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.hint { color:var(--muted); font-size:11px; line-height:1.5; }
.alert { padding:11px 13px; border:1px solid rgba(251,91,104,.35); border-radius:10px; background:rgba(251,91,104,.09); color:#ffd6d9; font-size:12px; line-height:1.5; }
.alert.hidden { display:none; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.result { display:none; margin-top:18px; }
.result.on { display:block; }
.room-code { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:4px 0 16px; font:800 22px var(--display); letter-spacing:.12em; text-transform:lowercase; }
#result-name { text-transform:none; letter-spacing:0; font-size:18px; color:var(--text); }
.recent-list { display:grid; gap:8px; }
.recent-item { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.16); }
.recent-item .who { flex:1; min-width:0; }
.recent-item .who b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.recent-item .who small { color:var(--muted); font-size:10px; }
.recent-item .actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.linkbox { min-width:0; max-width:100%; overflow:hidden; display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.24); }
.linkbox a { display:block; flex:1; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#d9d5ec; text-decoration:underline; text-underline-offset:2px; }
.linkbox code { display:block; flex:1; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#d9d5ec; }
.qr { display:grid; place-items:center; padding:12px; border-radius:12px; background:#fff; }
.qr svg { width:172px; height:172px; }
.share-grid { display:grid; grid-template-columns:1fr 190px; gap:16px; align-items:start; }
.share-stack { display:grid; gap:9px; }
.share-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.divider { height:1px; background:var(--line); margin:18px 0; }
.roomhead { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.roomhead h1 { margin:4px 0 4px; font-size:clamp(24px,4vw,36px); text-align:left; }
.roomhead .meta { color:var(--muted); font-size:12px; }
.roomhead .spacer { flex:1; }
.grid2 { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:18px; align-items:start; }
.grid2 > *, .share-grid > * { min-width:0; }
.panel-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; font:800 12px var(--display); letter-spacing:.08em; text-transform:uppercase; color:#ddd8f2; }
.panel-title .spacer { flex:1; }
.ptt-wrap { display:grid; gap:10px; }
.ptt { width:100%; min-height:104px; border:1px solid rgba(34,211,238,.4); border-radius:15px; background:linear-gradient(160deg,rgba(15,118,145,.65),rgba(20,24,45,.98)); color:#ecfeff; font:900 18px var(--display); letter-spacing:.02em; touch-action:none; user-select:none; }
.ptt small { display:block; margin-top:5px; font:500 11px var(--font); color:#9dd9e4; }
.ptt.on { background:linear-gradient(160deg,#06b6d4,#2563eb); border-color:#67e8f9; box-shadow:0 0 38px rgba(34,211,238,.42); color:#fff; }
.ptt:disabled { opacity:.5; }
.latch { display:flex; gap:8px; }
.latch .btn { flex:1; }
.latch .btn.on { color:#2a1b00; background:var(--amber); border-color:#ffd98a; }
.meter { height:8px; border-radius:5px; background:rgba(255,255,255,.09); overflow:hidden; }
.meter i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ok),#facc15,#fb7185); transition:width .08s linear; }
.statusbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:11px; }
.people { display:grid; gap:7px; max-height:430px; overflow-y:auto; padding-right:3px; }
.person { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.16); min-width:0; }
.person .who { flex:1; min-width:0; }
.person .who b { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person .who small { color:var(--muted); font-size:10px; }
.person .actions { display:flex; gap:5px; flex:none; }
.person.talking { border-color:rgba(34,211,238,.62); box-shadow:0 0 18px rgba(34,211,238,.12); }
.person .mic { color:var(--ok); font-size:10px; }
.empty { padding:16px; border:1px dashed var(--line2); border-radius:10px; color:var(--muted); font-size:12px; text-align:center; }
.footer { margin-top:26px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:10.5px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.center { min-height: 76dvh; display:grid; place-items:center; text-align:center; }
.center .card { width:min(460px,100%); }
.center h1 { font-size:clamp(28px,6vw,40px); }
.center p { color:var(--muted); line-height:1.6; font-size:13px; }
.join-card { width:min(460px,100%); margin:4vh auto 0; }
.join-card .ptt { margin-top:4px; }
.audio-hidden { display:none; }
@media (max-width: 850px) {
  .grid2 { grid-template-columns:1fr; }
  .share-grid { grid-template-columns:1fr; }
  .qr { justify-self:start; }
  .roomhead .spacer { display:none; }
}
@media (max-width: 540px) {
  .app { padding:12px 12px 30px; }
  .card.pad { padding:14px; }
  .ptt { min-height:96px; font-size:16px; }
  .share-grid { gap:10px; }
  .footer { font-size:9.5px; }
}

.steps-mini { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.steps-mini span { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:10.5px; background:rgba(255,255,255,.025); }
.steps-mini b { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(139,92,246,.25); color:#ddd6fe; font:800 9px var(--display); flex:none; }
.qr-details, .more-info { margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:0 10px; background:rgba(0,0,0,.12); }
.qr-details summary, .more-info summary { cursor:pointer; padding:10px 0; color:#d8d2ee; font-size:11px; font-weight:700; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.qr-details summary::-webkit-details-marker, .more-info summary::-webkit-details-marker { display:none; }
.qr-details summary::after, .more-info summary::after { content:'+'; color:var(--muted); font-size:15px; }
.qr-details[open] summary::after, .more-info[open] summary::after { content:'−'; }
.qr-details .qr { margin:0 0 12px; max-width:220px; }
.qr-details .qr svg { width:190px; height:190px; max-width:100%; }

[hidden] { display:none !important; }

.icon-btn { width:32px; height:32px; flex:none; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:15px; line-height:1; padding:0; }
.icon-btn:hover { background:rgba(255,255,255,.08); }
.device-dialog { width:min(430px,calc(100vw - 28px)); max-height:calc(100dvh - 30px); overflow:auto; padding:18px; border:1px solid var(--line2); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 30px 90px rgba(0,0,0,.7); }
.device-dialog::backdrop { background:rgba(3,4,10,.72); backdrop-filter:blur(5px); }
.modal-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.modal-head h2 { margin:0; font:800 20px var(--display); }
.modal-head .icon-btn { margin-left:auto; font-size:20px; }
.device-label { display:block; margin:12px 0 5px; color:var(--muted); font-size:11px; font-weight:700; }
.device-dialog .input { width:100%; }
.modal-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.modal-actions .btn { flex:1; min-width:100px; }
@media (max-width:640px) { .top #status { display:none; } .top { gap:6px; } .brand { font-size:12px; } .sitebar { gap:12px; } .sitebar .wide { display:none; } }

.linkbtn { border:0; background:none; color:#bfb7e8; font:600 11px var(--body,Inter,sans-serif); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px; }
.linkbtn:hover { color:#fff; }
.device-check { display:flex; align-items:center; gap:8px; margin:14px 0 4px; color:var(--text); font-size:11.5px; }
.device-check input { width:16px; height:16px; accent-color:var(--violet); }