:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf4fa;background:#071722;font-synthesis:none}
*{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{min-height:100%;margin:0;background:radial-gradient(ellipse at 35% 0%,#173750 0%,#0a1c2a 50%,#071722 100%);color:#eef7fc}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}
.shell{max-width:1160px;margin:auto;min-height:100dvh;padding:0 20px;display:flex;flex-direction:column}
.topbar{padding:20px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff20;gap:12px}
.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:1.13rem;letter-spacing:.01em}.brand small{display:block;color:#9cb6c6;font-size:.72rem;margin-top:3px}
.mark,.login-icon{display:grid;place-items:center;background:linear-gradient(145deg,#27c6b1,#12658a);border:1px solid #a5fff84d;color:#fff;font-weight:900;border-radius:14px;box-shadow:0 6px 22px #00d6b92b}
.mark{width:45px;height:45px}.topright{display:flex;align-items:center;gap:12px}
.icon-button{border:1px solid #486173;color:#bdd9e5;border-radius:12px;background:#193447;padding:10px 14px}
.connection-pill{display:flex;align-items:center;gap:8px;background:#0c2534;border:1px solid #355266;border-radius:100px;padding:9px 12px;color:#b4cedc;font-size:.79rem;white-space:nowrap}
.led{background:#7b91a0;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px #8291a014}
.connection-pill.online .led{background:#2fd6a4;box-shadow:0 0 0 4px #2fd6a425}.connection-pill.online{border-color:#297d71}
.app{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,.75fr);grid-template-areas:"channel side" "radio side";align-items:start;gap:16px;margin:24px 0;flex:1}
.panel{background:linear-gradient(155deg,#143246 0%,#10283a 100%);border:1px solid #365266;border-radius:20px;box-shadow:0 12px 48px #010b1640;padding:24px}
.channel-panel{grid-area:channel}.radio-panel{grid-area:radio}.side-panel{grid-area:side;min-height:600px}
.eyebrow{font-size:.69rem;font-weight:800;letter-spacing:.15em;color:#6bd7c9;margin-bottom:8px}
.identity-row{display:flex;align-items:center;gap:12px;margin:14px 0 24px}
.avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#2d596e;color:#ebfff7;font-weight:800}
.identity-copy strong{display:block;font-size:1.02rem}.identity-copy small{display:block;color:#a8c3d1;margin-top:3px}
label{display:block;font-size:.76rem;font-weight:800;letter-spacing:.06em;color:#a9cbd8;margin:0 0 8px}
.channel-controls{display:flex;gap:10px}select,input{min-width:0;width:100%;height:48px;border-radius:11px;border:1px solid #486a80;background:#092031;color:#effbff;padding:0 13px;outline:none}
select:focus,input:focus{border-color:#4be0c5;box-shadow:0 0 0 3px #42d9c522}
.primary{background:#31c7ac;border:1px solid #4ee4c5;color:#082d2f;font-weight:800;padding:12px 17px;border-radius:11px;white-space:nowrap}
.primary:hover:not(:disabled){background:#65dfc8}.secondary{border:1px solid #42657a;border-radius:11px;background:#1c3d52;color:#d8f1fa;font-weight:700;padding:11px 14px}
.secondary:hover:not(:disabled){background:#285368}.secondary.danger{color:#ffc6bb;border-color:#80574f}
.subtle{font-size:.78rem;color:#9cb7c7;margin-top:12px;line-height:1.45}
.radio-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.radio-head h1{font-size:1.35rem;line-height:1.25;margin:0}
.quality{background:#1a4356;color:#94b8c9;border-radius:7px;padding:7px 9px;font-size:.69rem;font-weight:900;letter-spacing:.09em}
.quality.good{background:#124e46;color:#71ecd0}.quality.bad{background:#613d3c;color:#ffc5b3}
.radio-state{margin:22px 0 3px;text-align:center;min-height:25px;color:#a8d6df;font-size:.88rem}
.ptt-wrap{padding:16px 0 23px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ring{border-radius:50%;border:1px solid #ffffff18;box-shadow:0 0 0 12px #3b71821a,0 0 0 24px #3b718212;margin:30px 0 32px}
.ptt-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:180px;height:180px;border-radius:50%;border:4px solid #79ffe2;background:radial-gradient(circle at 40% 22%,#2dbfa8,#14776d 75%);color:white;box-shadow:0 10px 30px #02bea73b, inset 0 5px 18px #ffffff1e;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:background .12s,transform .12s,border-color .12s}
.ptt-button:disabled{filter:grayscale(.6)}.ptt-button:not(:disabled):active,.ptt-button.pressed{transform:scale(.96);border-color:#ffdc9c;background:radial-gradient(circle at 38% 20%,#f2a451,#b64e35 80%);box-shadow:0 0 0 10px #d96c2f19,0 10px 30px #e8643d4a}
.ptt-button.talking{background:radial-gradient(circle at 40% 20%,#f3a25e,#b54431);border-color:#fff1ae}
.ptt-button svg{width:57px;height:57px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.ptt-button span{font-size:1rem;font-weight:900;letter-spacing:.16em}
.ptt-wrap strong{font-size:.9rem}.ptt-wrap small{font-size:.77rem;color:#94b3c2}
.radio-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.notice{padding:15px 17px;color:#98b5c5;line-height:1.5;background:#0b2536;border:1px solid #29485d;border-radius:12px;font-size:.75rem;margin-top:22px}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.section-heading h2{font-size:1.06rem;margin:0}.count{border-radius:8px;background:#29576b;padding:6px 12px;font-weight:800}
.participant-list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:9px;max-height:280px;overflow:auto}
.participant-item{display:flex;align-items:center;gap:10px;padding:12px;background:#0b2536;border:1px solid #345064;border-radius:12px}.participant-item.speaking{border-color:#ffd387;background:#423627}.participant-info{flex:1;min-width:0}.participant-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem}.participant-info small{display:block;color:#92b4c5;font-size:.72rem;margin-top:3px}
.person-dot{width:31px;height:31px;background:#205770;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.75rem}
.empty{color:#91b2c3;font-size:.83rem;padding:17px 5px}.divider{height:1px;background:#ffffff20;margin:24px 0}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.video-empty{padding:30px 14px;text-align:center;border:1px dashed #476477;border-radius:12px;color:#8daab8;font-size:.8rem}
.video-tile{background:#081e2c;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3}.video-tile video{width:100%;height:100%;object-fit:cover;background:#0b2534}.video-tile span{position:absolute;left:0;bottom:0;right:0;padding:12px 8px 7px;background:linear-gradient(transparent,#061b27bd);font-size:.75rem}
.footer{margin-top:auto;border-top:1px solid #ffffff1b;text-align:center;padding:19px 6px;font-size:.72rem;color:#799cae}
.login-overlay{position:fixed;inset:0;z-index:100;background:#051520ed;display:grid;place-items:center;padding:20px;overflow:auto}.login-card{width:min(100%,415px);background:#112e42;border:1px solid #416075;box-shadow:0 22px 70px #0008;border-radius:24px;padding:34px}
.login-icon{height:61px;width:61px;margin:0 0 20px;font-size:1.3rem}.login-card h1{font-size:1.65rem;line-height:1.16;margin:5px 0 11px}.login-card p{font-size:.88rem;color:#afc9d8;line-height:1.5;margin:0 0 26px}.login-card label{margin:16px 0 8px}.wide{width:100%;margin-top:24px;height:48px}.form-error{color:#ffb2a8;font-size:.82rem;min-height:20px;margin-top:14px}
.toast{position:fixed;z-index:200;bottom:20px;left:50%;transform:translate(-50%,15px);padding:12px 18px;border-radius:13px;background:#c8fff0;color:#06392f;box-shadow:0 10px 30px #0009;font-weight:700;max-width:calc(100vw - 32px);width:max-content;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-size:.85rem}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#ffd2c9;color:#662920}
@media(max-width:830px){.shell{padding:0 14px}.topbar{padding:14px 0}.app{grid-template-columns:1fr;grid-template-areas:"channel" "radio" "side";margin:14px 0;gap:12px}.side-panel{min-height:200px}.panel{padding:20px}.radio-panel{padding:20px 15px}.ptt-button{width:170px;height:170px}}
@media(max-width:420px){.mark{width:40px;height:40px}.brand strong{font-size:1rem}.brand small{font-size:.66rem}.connection-pill{padding:8px;font-size:.68rem}.channel-controls{flex-direction:column}.channel-controls .primary{width:100%}.topright{gap:7px}.radio-actions .secondary{flex:1;padding:10px 7px;font-size:.78rem}.ptt-button{width:163px;height:163px}.login-card{padding:26px}}

.video-banner{background:#092f38;border:1px solid #276970;border-radius:10px;color:#a6e7d5;font-size:.82rem;font-weight:700;padding:12px 13px;margin-bottom:14px;line-height:1.35}