/* Zero: presentation layer. Media tracks and transport are unchanged. */
:root{--zero-bg:#060911;--zero-glass:rgba(14,19,32,.65);--zero-line:rgba(255,255,255,.08);--zero-text:#f3f4f6;--zero-muted:#9ca3af;--zero-cyan:#06b6d4;--zero-purple:#7c3aed;--zero-voice:#4ade80;--zero-danger:#ef4444}
.zcRefined body{background:var(--zero-bg);color:var(--zero-text)}
.zcRefined #app{padding:12px;gap:12px;grid-template-columns:84px 240px minmax(0,1fr) 310px;background:radial-gradient(ellipse at 12% 0%,#0d303b70,transparent 48%),radial-gradient(ellipse at 85% 100%,#28163f70,transparent 48%),var(--zero-bg)}
.zcRefined #app.panelClosed,.zcRefined #app.friendsView{grid-template-columns:84px 240px minmax(0,1fr)}
.zcRefined #app>aside,.zcRefined #app>main,.zcRefined #app>.roomPanel,.zeroRail{border:1px solid var(--zero-line);border-radius:16px;background:var(--zero-glass);backdrop-filter:blur(16px);min-width:0;min-height:0}
.zcRefined #app>aside{padding:16px 12px;gap:20px;overflow-y:auto}
.zcRefined #app>aside>.brand{display:none}
.zeroRail{display:flex;flex-direction:column;align-items:center;padding:16px 8px;gap:16px;overflow:visible}
.zeroBrand{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--zero-text);flex-shrink:0}
.zeroBrand img{width:48px;height:48px;object-fit:contain}.zeroBrand strong{font-size:17px;letter-spacing:2px}.zeroBrand small{font-size:7px;letter-spacing:.6px;color:var(--zero-muted)}
.zeroServers{display:flex;flex-direction:column;align-items:center;gap:14px;overflow-y:auto;scrollbar-width:none;flex:1;min-height:80px;width:66px;padding:5px}
.zeroServers::-webkit-scrollbar{display:none}.zeroRail button{flex-shrink:0;position:relative;width:52px;height:52px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--zero-line);background:#1b2338;color:#dbe4f4;font-size:14px;overflow:visible}
.zeroRail button img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.zeroRail button[aria-current=true]{border-color:var(--zero-cyan);box-shadow:0 0 15px #06b6d440}.zeroRail button[aria-current=true]::before{content:'';position:absolute;left:-10px;width:3px;height:24px;border-radius:4px;background:#67e8f9}
.zeroRail button:hover{background:#283552}.zeroRail button:active{transform:scale(.97)}
.zeroRail #friendsButton{font-size:0;width:52px;height:52px;padding:0;border-radius:16px;background:#06b6d416;color:#a5f3fc}.zeroRail #friendsButton::after{content:'DM';font-size:13px;letter-spacing:1px}.zeroRail #friendsButton[aria-pressed=true]{box-shadow:inset 0 0 0 1px #06b6d4}
.zeroRail .zeroAdd{font-size:28px;font-weight:400;color:#a5f3fc;background:#06b6d416}.zeroRail .zeroInvite{font-size:11px;border-radius:16px;color:#a5f3fc}
.zcRefined #app .team{margin:0;padding:12px;gap:10px;background:#ffffff03;border:1px solid var(--zero-line);border-radius:12px}.zcRefined #app .team select{font-size:14px;min-height:40px}.zcRefined #app .serverTools{flex-wrap:wrap}.zcRefined #app .serverTools button{min-height:36px;font-size:11px}
.zcRefined #app #rooms button{min-height:44px;margin:4px 0;color:#c8d1df}.zcRefined #app #rooms button.active{background:#06b6d414;box-shadow:inset 3px 0 var(--zero-cyan);color:#e0faff}
.zcRefined #app .sidebar-bottom{margin-top:auto}.zcRefined #app .profile{border-top:1px solid var(--zero-line);padding-top:14px}.zcRefined #app .profileActions button{width:44px;height:44px}.zcRefined #app .profile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zcRefined #app>main{overflow:hidden}.zcRefined #app main>header{padding:20px 22px;min-height:92px;flex-wrap:wrap}.zcRefined main header h2{font-size:24px;font-weight:650;letter-spacing:-.6px}.zcRefined main header .eyebrow{font-size:9px;letter-spacing:1.2px;color:var(--zero-muted)}
.zcRefined #roomCount{color:#a9b5c7}.zcRefined #app>main>.serverTopBanner{height:120px;max-height:120px;width:calc(100% - 24px);margin:12px 12px 0;border-radius:14px;object-fit:contain;filter:contrast(1.15) brightness(.85) saturate(1.1);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.identityPreview.banner{filter:contrast(1.15) brightness(.85) saturate(1.1)}
.zcRefined #app #stage{margin:0 12px;padding:16px;border:1px solid var(--zero-line);border-radius:16px;background:#080e1b;min-width:0;min-height:180px}
.zcRefined #app #stage:not(.focused) #videos .tile{background:rgba(20,29,46,.8);border-radius:16px;border:1px solid #ffffff18;box-shadow:inset 0 1px #ffffff06}
.zcRefined #app #stage .tile.speaking{border-color:var(--zero-voice)!important;box-shadow:0 0 16px #4ade8020,inset 0 0 0 1px #4ade8040}.zcRefined #app #stage .tile.speaking>.initial{box-shadow:0 0 0 2px var(--zero-voice),0 0 16px #4ade8030}
.zcRefined #app main>footer{padding:12px 14px;gap:8px}.zcRefined #quality{font-size:11px;color:#a8b8cd}.zcRefined #app main footer .controls{padding:8px 10px;gap:10px;border-color:#ffffff18;background:#141d2ddd;box-shadow:0 6px 20px #02040b40;backdrop-filter:blur(16px)}
.zcRefined #app main footer .controls>.zcIcon{width:46px;height:46px;flex-basis:46px;color:#c6d4e5}.zcRefined #app main footer .controls>#mic.on{background:#06b6d414;color:#a5f3fc;box-shadow:inset 0 0 0 1px #06b6d4}.zcRefined #app main footer .controls>#mic.on::after{display:none}.zcRefined #app main footer .controls>#mic:not(.on):not(:disabled){color:#f87171}.zcRefined #app main footer .controls>#leave{background:#dc303f;box-shadow:none}.zcRefined #app main footer .controls>#leave:hover{background:#ef4444}
.zcRefined #joinVoice,.zcRefined .primary{background:linear-gradient(115deg,#0891b2,#7c3aed);color:#fff;border:1px solid #ffffff15}
.zcRefined #app>.roomPanel{padding:18px 16px;gap:16px}.zcRefined .panelTabs{padding:4px;background:#080e1b;border:1px solid var(--zero-line);border-radius:12px;gap:4px}.zcRefined #app .panelTabs button{background:transparent;min-height:44px;color:#9ca3af;border-radius:8px}.zcRefined #app .panelTabs button[aria-selected=true]{background:#1e2c40;color:#e7faff;box-shadow:inset 0 -2px #06b6d4}
.zcRefined #app .musicBox h3{color:#f3f4f6}.zcRefined #app .musicHint{color:#a8b4c8}.zcRefined #app #musicTitle{padding:16px;background:#ffffff04;border:1px solid var(--zero-line);border-radius:12px;font-size:14px}.zcRefined #app .chatBox h3{font-size:14px;color:#e3e9f4}.zcRefined #app #chatForm textarea{background:#080e1b;border-color:#ffffff1f;border-radius:12px;color:#f3f4f6}.zcRefined #app #chatForm button{min-height:40px;background:#0891b2;color:white;border:0}
.zcRefined dialog{background:#101727f5;border:1px solid #ffffff20;border-radius:16px;color:#f3f4f6;box-shadow:0 24px 80px #0008;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.zcRefined dialog::backdrop{background:#02050bb8;backdrop-filter:blur(4px)}.zeroQuality{display:block;margin:0 0 16px}.zeroQuality select{width:100%;margin-top:8px;min-height:44px;border:1px solid #ffffff25;border-radius:8px;background:#0b1220;color:#f3f4f6;padding:10px}.zeroQuality small{display:block;margin-top:6px;color:#a8b4c8}
.zcRefined :is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid #67e8f9;outline-offset:3px}.zcRefined button{transition:background .15s,color .15s,border-color .15s}.zcRefined #app .roomPanel button{min-height:40px}.zcRefined #app :is(small,time,output){font-variant-numeric:tabular-nums}
.zeroSidebarToggle{display:none}.zeroSkip{position:fixed;left:12px;top:-100px;z-index:100;padding:12px;background:#0e1929;color:#fff;border:2px solid #67e8f9}.zeroSkip:focus{top:12px}
.zcRefined #auth{background:transparent}.zcRefined #auth .intro{background:radial-gradient(ellipse at 10% 20%,#12455766,transparent 65%),radial-gradient(ellipse at 80% 80%,#33165c55,transparent 65%),#080e19}.zcRefined #auth .brand{gap:18px}.zcRefined #auth .brand img{width:80px;height:80px;object-fit:contain}.zeroLoginName{display:flex;flex-direction:column}.zeroLoginName b{font-size:36px;letter-spacing:4px;color:#f3f4f6}.zeroLoginName small{font-size:10px;letter-spacing:2px;color:#9ca3af}.zcRefined #login{border:1px solid var(--zero-line);border-radius:16px;background:#0e1320b0;padding:32px}.zcRefined #auth .callWave{opacity:.5}
/* Effects never animate blur or repaint large shadows while media is active. */
.zeroInCall #app>:is(aside,main,.roomPanel,.zeroRail),.zeroInCall #app #stage .tile,.zeroInCall #app main footer .controls{backdrop-filter:none!important}.zeroInCall #app #stage .tile{background:#172032!important}.zeroInCall #app *{animation:none!important}
.zcRefined #app.expandedTransmission{grid-template-columns:minmax(0,1fr)}.zcRefined #app.expandedTransmission>.zeroRail{display:none}.zcRefined #app #stage:fullscreen{margin:0;padding:0;border:0;border-radius:0}
@media(max-width:1250px){.zcRefined #app{grid-template-columns:72px 210px minmax(0,1fr) 270px;gap:8px;padding:8px}.zcRefined #app.panelClosed,.zcRefined #app.friendsView{grid-template-columns:72px 210px minmax(0,1fr)}.zeroRail{padding:12px 4px}.zcRefined #app>aside{padding:12px 8px}.zcRefined #app main>header{padding:14px}}
@media(max-width:1000px){.zcRefined #app,.zcRefined #app.panelClosed,.zcRefined #app.friendsView{grid-template-columns:72px 210px minmax(0,1fr)}.zcRefined #app>.roomPanel{position:fixed;inset:12px 12px 12px auto;width:310px;z-index:30;background:#101727;box-shadow:-16px 0 48px #0008}.zcRefined #openPanel{display:block}}
@media(max-width:760px){.zcRefined #app,.zcRefined #app.panelClosed,.zcRefined #app.friendsView{grid-template-columns:58px minmax(0,1fr);gap:6px;padding:6px}.zeroRail{padding:12px 3px;gap:14px;border-radius:12px}.zeroBrand img{width:40px;height:40px}.zeroBrand strong{font-size:12px}.zeroBrand small{display:none}.zeroServers{width:50px;padding:3px}.zeroRail button,.zeroRail #friendsButton{width:44px;height:44px}.zeroRail button[aria-current=true]::before{left:-5px}.zeroRail .zeroInvite{font-size:10px}.zcRefined #app>aside{display:none}.zcRefined #app.zeroSidebarOpen>aside{display:flex;position:fixed;inset:6px auto 6px 70px;width:min(260px,calc(100vw - 82px));z-index:35;background:#101727;box-shadow:12px 0 50px #0008}.zeroSidebarToggle{display:block;min-height:44px}.zcRefined #app main>header{padding:10px;gap:8px}.zcRefined main header h2{font-size:20px}.zcRefined #roomCount{white-space:normal}.zcRefined #app #stage{margin:0 6px;padding:6px;min-height:180px}.zcRefined #app main>footer{padding:10px 2px}.zcRefined #app main footer .controls{gap:2px;padding:5px}.zcRefined #app main footer .controls>.zcIcon{width:40px;height:44px;flex-basis:40px}.zcRefined #app main footer .controls>#dockSettings{margin-left:2px}.zcRefined #app main footer .controls>#dockSettings::after{display:none}.zcRefined #app>.roomPanel{inset:6px 6px 6px auto;width:min(310px,calc(100vw - 76px))}.zcRefined #app #stage:not(.focused) #videos .tile{height:170px}.zcRefined #app.expandedTransmission{grid-template-columns:1fr}.zcRefined #login{padding:24px}.zcRefined #app>main>.serverTopBanner{height:80px}.zcRefined #friendsDialog{padding:12px}}
@media(prefers-reduced-motion:reduce){.zcRefined *, .zcRefined *::before,.zcRefined *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.zcRefined #auth .intro{background:transparent}.zcRefined #login .primary{background:linear-gradient(115deg,#0891b2,#7c3aed);color:#fff}
@media(max-width:760px){.zcRefined #app main footer .controls>.zcIcon{width:44px;flex-basis:44px}}
.zcRefined #app .team{grid-template-columns:minmax(0,1fr)}.zcRefined #app .team .serverIdentity{display:none}
#zeroServerName{font-size:15px;line-height:1.45;overflow-wrap:anywhere;color:#f3f4f6}
.zcRefined #app .roomPanel>#members{display:none}
.zcRefined #app #rooms{flex:0 0 auto;overflow:visible}
.zcRefined #app #rooms button[data-room]{display:flex;align-items:center;gap:8px;width:100%;text-align:left}
.zeroRoomCount{margin-left:auto;flex-shrink:0;display:grid;place-items:center;min-width:24px;height:24px;border-radius:6px;background:#ffffff0b;color:#a5f3fc;font-size:11px}
.zeroRoomPeople{margin:0 0 12px 14px;padding-left:10px;border-left:1px solid #ffffff16;display:grid;gap:10px}
.zeroPresencePerson{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;color:#dbe4f4}
.zeroPresencePerson>b{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:50%;background:#243249;position:relative;font-size:11px}
.zeroPresencePerson>b>img{display:block;width:28px;height:28px;max-width:100%;object-fit:cover;border-radius:50%}
.zeroPresencePerson>b::after{content:'';position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border:2px solid #101727;border-radius:50%;background:#4ade80}
.zeroPresencePerson>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zeroPresencePerson small{display:block;font-size:10px;color:#9ca3af;overflow:hidden;text-overflow:ellipsis}
#zeroPresence{display:grid;gap:12px;padding:16px 2px;border-top:1px solid #ffffff10}#zeroPresence h3{margin:0 0 2px;font-size:11px;font-weight:600;color:#a8b8cb}#zeroPresence p{margin:0;font-size:12px}