:root{--s0:#0a0a0b;--s1:#111113;--s2:#18181b;--s3:#27272a;--s4:#3f3f46;--bd:rgba(255,255,255,.08);--bh:rgba(255,255,255,.15);--t1:#fafafa;--t2:#a1a1aa;--t3:#71717a;--ac:#22c55e;--acl:#4ade80;--ad:rgba(34,197,94,.15);--ads:rgba(34,197,94,.25);--er:#ef4444;--erb:rgba(239,68,68,.15);--wa:#f59e0b;--blk:#000;--sh-panel:0 16px 48px rgba(0,0,0,.5);--r:10px;--rs:6px;--rl:14px;--e:all .2s cubic-bezier(.4,0,.2,1);--eb:all .3s cubic-bezier(.34,1.56,.64,1);--si:inset 0 1px 2px rgba(0,0,0,.3);--g:12px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--s0);color:var(--t1);-webkit-font-smoothing:antialiased}
#c{position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--s0);z-index:1;transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1)}
body.pointer-locked #c{cursor:none}
.loading-overlay,.auth-overlay{position:fixed;inset:0;background:var(--s0);display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .3s,visibility .3s}
.loading-overlay{z-index:1000}
.auth-overlay{z-index:1001;opacity:0;visibility:hidden}
.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.auth-overlay.visible{opacity:1;visibility:visible}
.loading-container,.auth-container{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
.loading-container{gap:16px;max-width:320px}
.auth-container{max-width:300px;background:linear-gradient(145deg,rgba(24,24,27,.98),rgba(17,17,19,.98));border:1px solid var(--bd);border-radius:var(--rl);padding:28px 24px;box-shadow:var(--sh-panel)}
.loading-spinner{position:relative;width:52px;height:52px;flex-shrink:0}
.spinner-ring{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent}
.spinner-ring:nth-child(1){border-top-color:var(--ac);animation:spin 1s linear infinite;filter:drop-shadow(0 0 6px var(--ac))}
.spinner-ring:nth-child(2){inset:6px;border-right-color:#8b5cf6;animation:spin 1.4s linear infinite reverse}
.spinner-ring:nth-child(3){inset:12px;border-bottom-color:var(--t3);animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-status{font-size:17px;font-weight:600;letter-spacing:-.01em}
.loading-substatus{font-size:12px;color:var(--t3);margin-top:-4px;min-height:16px}
.loading-overlay.reconnecting .loading-status{color:var(--wa)}
.loading-overlay.reconnecting .spinner-ring:nth-child(1){border-top-color:var(--wa);filter:drop-shadow(0 0 6px var(--wa))}
.auth-icon{width:48px;height:48px;margin-bottom:16px;padding:12px;background:var(--ad);border-radius:12px;color:var(--ac)}
.auth-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(34,197,94,.4))}
.auth-title{font-size:20px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.auth-subtitle{font-size:13px;color:var(--t3);margin-bottom:20px}
.auth-field{width:100%;margin-bottom:14px;text-align:left}
.auth-label{display:block;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.auth-input,.sel,.fps-input{background:var(--s0);border:1px solid var(--bd);border-radius:var(--r);color:var(--t1);font-weight:500;transition:var(--e);box-shadow:var(--si)}
.auth-input{width:100%;padding:12px 14px;font-size:14px;outline:none;border-width:1.5px}
.auth-input::placeholder,.fps-input::placeholder{color:var(--t3);font-weight:400}
.auth-input:hover,.sel:hover,.fps-input:hover{border-color:var(--bh);background-color:var(--s1)}
.auth-input:focus,.sel:focus,.fps-input:focus{outline:none;border-color:var(--ac);box-shadow:var(--si),0 0 0 3px var(--ad)}
.auth-input.error{border-color:var(--er);box-shadow:var(--si),0 0 0 3px var(--erb);animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-error{font-size:12px;color:var(--er);min-height:18px;margin-bottom:8px;text-align:center;font-weight:500}
.auth-btn{width:100%;padding:12px 18px;background:linear-gradient(145deg,var(--acl),var(--ac));border:none;border-radius:var(--r);color:var(--blk);font-size:14px;font-weight:600;cursor:pointer;transition:var(--e);box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 20px rgba(34,197,94,.2)}
.auth-btn:hover{background:linear-gradient(145deg,#5fe88d,var(--acl));transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 30px rgba(34,197,94,.3)}
.auth-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.auth-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.edge{position:fixed;right:0;top:50%;transform:translateY(-50%);width:4px;height:40px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 50%,transparent);border-radius:4px 0 0 4px;cursor:pointer;z-index:100;transition:var(--e);border:none}
.edge::before{content:'';position:absolute;inset:-40px -20px -40px -60px}
.edge::after{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:4px;height:14px;background:linear-gradient(180deg,var(--ac),rgba(34,197,94,.5));border-radius:3px;transition:var(--eb);opacity:.6}
.edge:hover{width:5px}
.edge:hover::after{height:24px;opacity:1;box-shadow:0 0 12px var(--ac),0 0 24px rgba(34,197,94,.3)}
.edge.on{opacity:0;pointer-events:none}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);z-index:200;opacity:0;visibility:hidden;transition:var(--e)}
.backdrop.on{opacity:1;visibility:visible}
.panel{position:fixed;right:16px;top:50%;transform:translateY(-50%) translateX(calc(100% + 32px));width:280px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:linear-gradient(145deg,rgba(24,24,27,.98),rgba(17,17,19,.98));border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--sh-panel);z-index:300;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(20px)}
.panel.on{transform:translateY(-50%) translateX(0);opacity:1;visibility:visible}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(90deg,rgba(34,197,94,.08),transparent);border-bottom:1px solid var(--bd);position:relative}
.panel-header::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,var(--ac),transparent);opacity:.3}
.panel-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.panel-title::before{content:'';width:3px;height:16px;background:linear-gradient(145deg,var(--acl),var(--ac));border-radius:2px}
.panel-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);cursor:pointer;color:var(--t3);font-size:16px;transition:var(--e)}
.panel-close:hover{background:var(--s3);border-color:var(--bh);color:var(--t1);transform:scale(1.05)}
.panel-content{flex:1;overflow-y:auto;padding:16px 18px}
.panel-content::-webkit-scrollbar{width:4px}
.panel-content::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.panel-content::-webkit-scrollbar-thumb{background:var(--s3);border-radius:4px}
.panel-content::-webkit-scrollbar-thumb:hover{background:var(--s4)}
.section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bd);position:relative;display:flex;flex-direction:column;gap:var(--g)}
.section:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}
.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin:0;display:flex;align-items:center;gap:6px}
.section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--bd),transparent)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;background:linear-gradient(145deg,var(--s3),var(--s2));border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;color:var(--t1);font-size:12px;font-weight:600;transition:var(--e);position:relative;overflow:hidden;margin:0}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%);border-radius:inherit;pointer-events:none}
.btn:hover{background:linear-gradient(145deg,var(--s4),var(--s3));border-color:var(--bh);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn svg{width:15px;height:15px;opacity:.8;fill:none;stroke:currentColor;stroke-width:2;transition:var(--e)}
.btn:hover svg{opacity:1}
.btn-row{display:flex;gap:var(--g);margin:0}
.btn-row .btn{flex:1}
.action-btn.on{background:var(--ads);border-color:rgba(34,197,94,.3);color:var(--acl);box-shadow:0 0 20px rgba(34,197,94,.1) inset}
.action-btn.on::before{background:linear-gradient(180deg,rgba(34,197,94,.15),transparent 50%)}
.action-btn.on svg{opacity:1;color:var(--ac);filter:drop-shadow(0 0 4px rgba(34,197,94,.5))}
.action-btn.on:hover{background:rgba(34,197,94,.25);border-color:var(--ac)}
#disconnectBtn{border-color:rgba(239,68,68,.2)}
#disconnectBtn:hover{background:var(--erb);border-color:rgba(239,68,68,.4);color:var(--er)}
#disconnectBtn:hover svg{color:var(--er)}
.btn-small{padding:8px 12px;background:linear-gradient(145deg,var(--ac),#1a9d4a);border:none;border-radius:var(--rs);color:var(--blk);font-size:11px;font-weight:600;cursor:pointer;transition:var(--e);white-space:nowrap}
.btn-small:hover{background:linear-gradient(145deg,var(--acl),var(--ac));transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,.3)}
.btn-small:active{transform:translateY(0)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--g);margin:0}
.setting-label{font-size:13px;font-weight:500;color:var(--t2);flex-shrink:0}
.sel{flex:1;min-width:0;padding:10px 32px 10px 12px;font-size:12px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sel option{background:var(--s1);color:var(--t1);padding:8px}
.custom-fps-row{margin:0}
.custom-fps-input{display:flex;gap:8px;align-items:center}
.fps-input{flex:1;min-width:60px;max-width:80px;padding:10px 12px;font-size:12px;text-align:center;-moz-appearance:textfield}
.fps-input::-webkit-outer-spin-button,.fps-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.toggle{display:flex;align-items:center;background:transparent;border:none;cursor:pointer;padding:0}
.toggle-track,.tog-track{width:42px;height:24px;background:var(--s0);border:1px solid var(--bd);border-radius:12px;position:relative;transition:var(--e);box-shadow:var(--si)}
.toggle-thumb,.tog-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:linear-gradient(145deg,var(--t2),var(--t3));border-radius:50%;transition:var(--eb);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.toggle.on .toggle-track,.toggle.on .tog-track{background:var(--ads);border-color:rgba(34,197,94,.3);box-shadow:var(--si),0 0 12px rgba(34,197,94,.15) inset}
.toggle.on .toggle-thumb,.toggle.on .tog-thumb{left:23px;background:linear-gradient(145deg,var(--acl),var(--ac));box-shadow:0 2px 8px rgba(34,197,94,.4),0 0 12px rgba(34,197,94,.3)}
.toggle:hover .toggle-track,.toggle:hover .tog-track,.toggle.on:hover .toggle-track,.toggle.on:hover .tog-track{border-color:var(--bh)}
.toggle.on:hover .toggle-track,.toggle.on:hover .tog-track{border-color:var(--ac)}
.toggle:disabled{cursor:not-allowed;opacity:.45}
.toggle:disabled .toggle-track,.toggle:disabled .tog-track,.toggle:disabled:hover .toggle-track,.toggle:disabled:hover .tog-track,.toggle.on:disabled:hover .toggle-track,.toggle.on:disabled:hover .tog-track{border-color:var(--bd);box-shadow:var(--si)}
.toggle.on:disabled .toggle-track,.toggle.on:disabled .tog-track{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.2);box-shadow:var(--si)}
.toggle.on:disabled .toggle-thumb,.toggle.on:disabled .tog-thumb{box-shadow:0 2px 5px rgba(0,0,0,.25)}
.input-hint{font-size:10px;color:var(--t3);margin:calc(var(--g) * -1) 0 0 0;padding-left:2px;opacity:0;max-height:0;overflow:hidden;transition:all .2s ease}
.input-hint.visible{opacity:1;max-height:20px;margin:0}
.tab-strip{position:fixed;top:0;left:0;right:0;height:44px;background:linear-gradient(180deg,rgba(32,33,36,1),rgba(24,24,27,1));display:flex;align-items:center;z-index:50;opacity:0;visibility:hidden;transform:translateY(-100%);transition:all .3s cubic-bezier(.4,0,.2,1);border-bottom:1px solid var(--bd);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.tab-strip.visible{opacity:1;visibility:visible;transform:translateY(0)}
.tab-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--t3);transition:var(--e);flex-shrink:0;border-right:1px solid var(--bd)}
.tab-back:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.tab-back:active{background:rgba(255,255,255,.1)}
.tab-back svg{width:18px;height:18px}
.tab-container{display:flex;align-items:stretch;height:100%;flex:1;overflow-x:auto;scrollbar-width:none;padding:0 8px;gap:4px}
.tab-container::-webkit-scrollbar{display:none}
.tab-item{display:flex;align-items:center;gap:10px;padding:0 16px;height:100%;background:transparent;border:none;cursor:pointer;color:var(--t3);font-size:13px;font-weight:500;transition:var(--e);white-space:nowrap;position:relative;border-radius:var(--rs) var(--rs) 0 0;margin-top:4px}
.tab-item:hover{background:rgba(255,255,255,.05);color:var(--t2)}
.tab-item.active{color:var(--t1);background:rgba(255,255,255,.08)}
.tab-item.active::after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;background:linear-gradient(145deg,var(--acl),var(--ac));border-radius:2px 2px 0 0;box-shadow:0 0 8px rgba(34,197,94,.5)}
.tab-item svg{width:16px;height:16px;flex-shrink:0;opacity:.6;transition:var(--e)}
.tab-item:hover svg{opacity:.8}
.tab-item.active svg{opacity:1;color:var(--ac)}
.tab-item-info{display:flex;flex-direction:column;align-items:center;gap:1px}
.tab-item-name{font-size:12px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:4px}
.tab-item-res{font-size:10px;color:var(--t3);font-weight:400;opacity:.7}
.primary-star{width:12px;height:12px;color:#fbbf24;filter:drop-shadow(0 0 3px rgba(251,191,36,.5));flex-shrink:0}
.tab-item.active .primary-star{filter:drop-shadow(0 0 4px rgba(251,191,36,.7))}
.tab-name-input{background:var(--s0);border:1px solid var(--ac);border-radius:4px;color:var(--t1);font-size:12px;font-weight:600;padding:2px 6px;width:2ch;min-width:2ch;max-width:150px;outline:none;box-shadow:0 0 0 2px var(--ad)}
.tab-name-input:focus{border-color:var(--acl)}
body.tabbed-mode #c,body.tabbed-mode .loading-overlay,body.tabbed-mode .auth-overlay{top:44px;height:calc(100vh - 44px)}
.stats-overlay{position:fixed;top:12px;left:12px;width:200px;background:rgba(10,10,11,.92);border:1px solid var(--bd);border-radius:var(--r);z-index:90;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:11px;overflow:hidden}
.stats-overlay.visible{opacity:1;visibility:visible;transform:translateY(0)}
body.tabbed-mode .stats-overlay{top:56px}
.stats-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:linear-gradient(90deg,rgba(34,197,94,.1),transparent);border-bottom:1px solid var(--bd)}
.stats-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)}
.stats-content{padding:8px 0;max-height:calc(100vh - 120px);overflow-y:auto}
.stats-content::-webkit-scrollbar{width:3px}
.stats-content::-webkit-scrollbar-track{background:transparent}
.stats-content::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
.stats-section{padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.stats-section:last-child{border-bottom:none}
.stats-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:4px}
.stats-label-warn{color:var(--wa)}
.stats-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;color:var(--t2)}
.stats-row span:first-child{color:var(--t3)}
.stats-row span:last-child{font-family:'SF Mono',Monaco,Consolas,monospace;font-weight:500;color:var(--t1)}
.stats-row.highlight span:last-child{color:var(--ac)}
.stats-row.warn span:last-child{color:var(--wa)}
.stats-row.error span:last-child{color:var(--er)}
#statsDropsSection,#statsAudioDropsSection{display:none}
#statsDropsSection.has-drops,#statsAudioDropsSection.has-drops{display:block;background:rgba(239,68,68,.05)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}