:root {
  --bg: #0b0d12; --panel: #141821; --line: #232938; --text: #e8ebf2; --muted: #8a93a6;
  --accent: #6c7bff; --accent2: #36d6c4; --danger: #ff5d6c; --ok: #35d07f;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display: none !important; }
.screen { min-height: 100%; }
#login { display: grid; place-items: center; padding: 24px; }
.card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.card h1 { margin: 14px 0 2px; font-size: 26px; letter-spacing: .3px; }
.sub { color: var(--muted); margin: 0 0 22px; }
.logo { width: 54px; height: 54px; margin: 0 auto; border-radius: 16px; background: conic-gradient(from 210deg, var(--accent), var(--accent2), var(--accent)); display: grid; place-items: center; }
.logo span { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 5px rgba(255,255,255,.08); }
.logo.sm { width: 28px; height: 28px; border-radius: 9px; margin: 0; }
.logo.sm span { width: 11px; height: 11px; }
input, select, button { font: inherit; color: inherit; }
input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0f121a; margin-bottom: 12px; outline: none; }
input:focus { border-color: var(--accent); }
button { cursor: pointer; border: 1px solid var(--line); background: #1b2130; padding: 10px 14px; border-radius: 10px; transition: background .15s, border-color .15s; }
button:hover { background: #232b3f; }
button.primary { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--accent), #8a63ff); border: 0; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }
button.danger { color: #fff; background: #b8323f; border-color: #b8323f; }
button.on { background: var(--accent); border-color: var(--accent); }
.err { color: var(--danger); min-height: 1.3em; margin: 10px 0 0; font-size: 14px; }
.muted { color: var(--muted); }
.bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; letter-spacing: .3px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 28px 22px; }
.wrap h2 { margin: 0 0 18px; font-size: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.host { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.host .name { font-weight: 650; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #566; }
.dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.host .meta { color: var(--muted); font-size: 13px; min-height: 1.3em; }
.host button { margin-top: 4px; }
.host button:disabled { opacity: .45; cursor: default; }

#stream { position: fixed; inset: 0; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: none; outline: none; }
.status { position: absolute; inset: 0; display: grid; place-items: center; color: #cfd4e2; font-size: 18px; pointer-events: none; text-shadow: 0 2px 12px #000; }
.hud { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 8px 11px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; background: rgba(8,10,16,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #cfeee9; pointer-events: none; }
.toolbar { position: absolute; top: 10px; left: 50%; transform: translate(-50%, -140%); display: flex; gap: 8px; padding: 8px; background: rgba(14,17,25,.88); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(10px); transition: transform .2s ease; z-index: 5; }
.toolbar.show { transform: translate(-50%, 0); }
.toolbar select { background: #1b2130; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(14,17,25,.88); border: 1px solid var(--line); font-size: 13px; z-index: 6; }
.edge { position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 4; }

.hcur { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; image-rendering: auto; }
.toolbar { flex-wrap: wrap; justify-content: center; max-width: 96vw; }

/* floating menu button + panel (Parsec-style) */
.fab{position:fixed;left:0;top:0;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);padding:0;z-index:7;cursor:grab;touch-action:none;
  background:conic-gradient(from 210deg,var(--accent),var(--accent2),var(--accent));opacity:.5;box-shadow:0 6px 22px rgba(0,0,0,.5);display:grid;place-items:center;
  transition:opacity .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.fab i{width:18px;height:18px;border-radius:50%;background:#10131b;box-shadow:inset 0 0 0 4px rgba(255,255,255,.1);pointer-events:none}
.fab:hover,.fab.open{opacity:1}
.fab.drag{opacity:1;cursor:grabbing;box-shadow:0 10px 30px rgba(0,0,0,.65)}
.panel{position:fixed;width:min(320px,calc(100vw - 16px));z-index:8;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;
  background:rgba(14,17,25,.95);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:calc(100vh - 16px);overflow:auto}
.panel .ptitle{font-weight:700;letter-spacing:.4px}
.panel label{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.panel select,.panel button{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#1b2130;color:var(--text);font:inherit}
.panel button{cursor:pointer}.panel button:hover{background:#232b3f}
.panel button.on{background:var(--accent);border-color:var(--accent)}
.panel button.danger{background:#b8323f;border-color:#b8323f}
.panel .prow{display:flex;gap:8px}
.panel .pnote{font-size:11px;color:var(--muted);text-align:center}
.toolbar,.edge{display:none!important}

.panel input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0}
.panel .prow input[type=range]{flex:1}
.panel .muted2{color:var(--muted);text-transform:none;letter-spacing:0;font-size:11px}

.meter{height:8px;border-radius:99px;background:#0f121a;border:1px solid var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .25s}
.soundbtn{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9;padding:12px 20px;border-radius:999px;border:0;font:inherit;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent),#8a63ff);box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* accounts */
.tabs{display:flex;gap:6px;background:#0f121a;border:1px solid var(--line);border-radius:12px;padding:4px;margin:0 0 14px}
.tabs button{flex:1;border:0;background:transparent;padding:8px;border-radius:9px;color:var(--muted)}
.tabs button.on{background:#1b2130;color:var(--text)}
.hintline{color:var(--muted);font-size:13px;margin:10px 0 0;min-height:1.2em}
.barbtns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.who{color:var(--muted);font-size:13px;margin-right:6px}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.rowhead h2{margin:0!important}
button.small{padding:8px 14px;width:auto}
.host .actions{display:flex;gap:8px;margin-top:2px}
.host .actions button{flex:1}
.host .manage{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.host .manage button{padding:7px 10px;font-size:13px}
.host .manage .del{color:#ff8c96}
.overlay{position:fixed;inset:0;background:rgba(5,7,10,.72);display:grid;place-items:center;z-index:50;padding:16px;backdrop-filter:blur(4px)}
.dialog{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dialog h3{margin:0 0 6px;font-size:19px}.dialog p{margin:8px 0}.dialog .row{display:flex;gap:8px;margin-top:16px}.dialog .row button{flex:1}
.step{display:flex;gap:12px;align-items:flex-start;margin:14px 0}.step b{flex:0 0 26px;height:26px;border-radius:50%;background:#1b2130;display:grid;place-items:center;font-size:13px}
.step.ok b{background:var(--ok);color:#06210f}
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.panelbox h3{margin:0 0 10px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.inline{display:flex;gap:8px;flex-wrap:wrap}.inline input{flex:1;min-width:200px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chip{display:flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#0f121a;font:13px ui-monospace,Consolas,monospace}
.chip button{padding:0 6px;border:0;background:transparent;color:var(--muted)}
.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td button{padding:5px 9px;font-size:12px;margin-right:4px}.badge{font-size:11px;padding:2px 7px;border-radius:999px;background:#2a3358;color:#b8c2ff;margin-left:6px}
.muted.small,.small.muted{font-size:12px}
#adminBtn{color:#b8c2ff}