:root{--bg: #0f1216;--card: #171b21;--line: #2a313b;--text: #e6e9ee;--muted: #8a94a3;--primary: #4f8ef7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,sans-serif}.app{max-width:1040px;margin:0 auto;padding:24px 16px 48px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.col{min-width:0}header{display:flex;align-items:center;gap:12px;margin-bottom:20px}header h1{font-size:20px;font-weight:600;margin:0}header .sub{color:var(--muted)}header .room-name{color:var(--text);font-weight:500}header .state{margin-left:auto}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}.card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.card-head .btn.small{margin-left:auto}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field>span{color:var(--muted);font-size:12px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}input,select{background:#0d1015;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 10px;font:inherit;width:100%}input[type=range]{padding:0}.join-row{display:flex;gap:10px}.join-row input{flex:1}.join-row .btn{white-space:nowrap}.btn{background:#232a33;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit}.btn:hover{border-color:#3a4450}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.small{padding:4px 10px;font-size:12px}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}.btn.muted{background:#4a2323;border-color:#6b2f2f}.btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.hint{color:var(--muted);font-size:12px;margin-top:12px}.error{color:#ff6b6b;font-size:13px;margin:6px 0 0}summary{cursor:pointer;color:var(--muted);font-size:13px}.rooms{list-style:none;margin:0;padding:0}.rooms li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.rooms li:first-child{border-top:none}.room-meta{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.room-meta .users{flex-basis:100%;color:var(--muted);font-size:12px}.tag{color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px}.roster ul{list-style:none;margin:0;padding:0}.roster li{display:flex;align-items:center;gap:8px;padding:5px 0}.roster .you{color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.online{background:#57d38c}.video-controls{margin-left:auto;display:flex;gap:6px}.videos{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:4px 0}.videowrap{position:relative;background:#0d1015;border:1px solid var(--line);border-radius:8px;aspect-ratio:16 / 9;overflow:hidden;display:flex;align-items:center;justify-content:center}.videowrap video{width:100%;height:100%;object-fit:contain;background:#000}.vlabel{position:absolute;left:6px;bottom:6px;font-size:11px;background:#0000008c;padding:1px 6px;border-radius:4px}.vplaceholder{color:var(--muted);font-size:12px}.lbl{font-size:12px;color:var(--muted);width:60px}.peers{display:grid;grid-template-columns:1fr;gap:14px}.peer{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}.peer-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.peer-head .state{margin-left:auto}.peer .videowrap{margin-bottom:8px}.hint.tiny{font-size:11px;margin-top:8px}.program{border-top:3px solid #3B8BD4}.transfer{margin-left:auto;display:flex;align-items:center;gap:8px}.transfer select{width:auto}.tag.owner{color:#3b8bd4;border-color:#2c4a6b}.btn.small.primary{background:var(--primary);border-color:var(--primary);color:#fff}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.setup-fields .field{margin-bottom:12px}.subhead{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;border-top:1px solid var(--line);padding-top:14px}.state{text-transform:uppercase;font-size:11px;letter-spacing:.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.state.connected{color:#57d38c;border-color:#2c6b48}.state.connecting,.state.checking,.state.new{color:#f2c14e}.state.failed,.state.disconnected,.state.closed{color:#ff6b6b;border-color:#6b2f2f}.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:16px}.bar label,.grid label{color:var(--muted);font-size:11px;display:block}.panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:10px;padding:14px}.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.panel-head .tag{margin-left:auto;border:none;padding:0}.panel-head .btn{padding:4px 10px;font-size:12px}.row{display:flex;align-items:center;gap:10px;margin:6px 0}.row>span{color:var(--muted);font-size:11px;width:32px}.meter{flex:1;height:8px;background:#0d1015;border-radius:4px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#57d38c,#f2c14e 72%,#ff6b6b 92%);transition:width .05s linear}.meterwrap{display:flex;align-items:center;gap:8px;flex:1}.metercanvas{flex:1;min-width:0;height:24px;display:block}.meterdb{font-size:11px;color:var(--muted);width:76px;text-align:right;font-variant-numeric:tabular-nums}.segmented{display:flex;gap:8px}.seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#0d1015}.seg input{display:none}.seg span{font-size:13px}.seg small{color:var(--muted);font-size:11px}.seg.active{border-color:var(--primary);background:#16202e}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.grid b{font-size:16px}code{background:#0d1015;padding:2px 6px;border-radius:4px;word-break:break-all}@media (max-width: 860px){.columns{grid-template-columns:1fr}}@media (max-width: 640px){.two,.panels,.bar,.videos,.setup-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}