:root{--bg-main:#09090b;--bg-panel:rgba(20,20,25,.7);--border-color:hsla(0,0%,100%,.1);--text-main:#ededed;--text-muted:#a1a1aa;--accent:#10b981;--accent-hover:#059669;--danger:#ef4444;--glass-blur:blur(12px)}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg-main);color:var(--text-main);font-family:Inter,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}@media (min-width:1025px){body,html{height:100vh;overflow:hidden}}header{height:60px;background:var(--bg-panel);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-color);justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:10}.brand,header{display:flex;align-items:center}.brand{font-size:1.25rem;font-weight:700;color:#fff;gap:10px;letter-spacing:1px;text-transform:uppercase}.brand span{color:var(--accent)}.header-ad-slot{height:50px;width:320px;background:hsla(0,0%,100%,.05);border:1px dashed hsla(0,0%,100%,.2);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.8rem;border-radius:4px}@media (min-width:1025px){main{display:flex;flex:1;overflow:hidden}}@media (max-width:1024px){main{display:block;width:100%}}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:8px;background:#000;transition:all .3s ease}@media (min-width:1025px){.grid-container{flex:1}}@media (max-width:1024px){.grid-container{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;overflow-y:auto}}@media (max-width:640px){.grid-container{grid-template-columns:1fr;grid-template-rows:auto;overflow-y:auto;padding:10px}.tile{aspect-ratio:16/9;height:auto!important}header{flex-direction:column;height:auto;padding:10px;gap:10px}.header-ad-slot{width:100%}}.tile{position:relative;background:#111;border:2px solid transparent;border-radius:8px;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.3)}.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.tile.active-audio{border-color:var(--accent);box-shadow:0 0 15px rgba(16,185,129,.4)}.tile-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.9));padding:15px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.channel-name{font-weight:600;font-size:.9rem;text-shadow:1px 1px 2px #000}.audio-btn{pointer-events:auto;background:var(--bg-panel);backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);color:#fff;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.audio-btn:hover{background:var(--accent);transform:scale(1.1)}.sidebar{width:350px;background:var(--bg-panel);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-left:1px solid var(--border-color);display:flex;flex-direction:column}@media (max-width:1024px){.sidebar{width:100%;height:auto;border-left:none;border-top:1px solid var(--border-color)}}.sidebar-header{padding:15px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.sidebar-header h3{margin:0;font-size:1rem}.live-viewers{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-main);background:hsla(0,0%,100%,.1);padding:4px 8px;border-radius:12px}.pulse{width:8px;height:8px;background-color:var(--danger);border-radius:50%;animation:pulsing 1.5s infinite}@keyframes value-pop{0%{transform:scale(1);color:var(--text-main)}50%{transform:scale(1.15);color:#fff;text-shadow:0 0 8px hsla(0,0%,100%,.8)}to{transform:scale(1);color:var(--text-main)}}.viewer-count{display:inline-block;font-variant-numeric:tabular-nums}.viewer-count.updating{animation:value-pop .5s ease-out}@keyframes pulsing{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}to{box-shadow:0 0 0 0 rgba(239,68,68,0)}}.sidebar-ad-slot{height:250px;margin:15px;background:hsla(0,0%,100%,.05);border:1px dashed hsla(0,0%,100%,.2);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.8rem;border-radius:8px;flex-shrink:0}.chat-container{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:12px}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:3px}.chat-message{background:hsla(0,0%,100%,.05);padding:10px;border-radius:8px;font-size:.85rem}.chat-message .username{font-weight:600;color:var(--accent);margin-bottom:4px;display:block}.chat-input-area{padding:15px;border-top:1px solid var(--border-color);display:flex;gap:8px}.chat-input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--border-color);color:#fff;padding:10px;border-radius:6px;outline:none;font-family:inherit}.chat-input:focus{border-color:var(--accent)}.chat-send{background:var(--accent);color:#fff;border:none;padding:0 15px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.chat-send:hover{background:var(--accent-hover)}.filters{display:flex;gap:10px;background:var(--bg-main)}.filter-btn{background:transparent;color:var(--text-muted);padding:6px 12px;border-radius:16px;transition:all .2s}.filter-btn.active,.filter-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}.ticker-wrap{width:100%;height:25px;background-color:transparent;box-sizing:border-box;display:flex;align-items:center}.ticker-content{display:inline-block;white-space:nowrap;padding-right:100%;box-sizing:content-box;animation:ticker-scroll 60s linear infinite}.ticker-item{display:inline-block;padding:0 2rem;font-size:.85rem;color:#fbbf24;font-weight:600}@keyframes ticker-scroll{0%{transform:translateX(100%)}to{transform:translateX(-100%)}}.filters{padding:10px 20px;background:hsla(0,0%,100%,.02);border-bottom:1px solid var(--border-color);flex-shrink:0;transition:all .3s ease}@media (max-width:1024px){.filters{flex-direction:column!important;align-items:stretch!important;height:auto!important;gap:10px!important}}.filter-btn{background:#222;border:1px solid var(--border-color);color:#fff;padding:6px 16px;border-radius:20px;font-size:.85rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-btn.active{background:var(--accent);border-color:var(--accent)}.ticker-wrap{overflow:hidden;position:relative}@media (max-width:640px){.filter-btn{padding:4px 12px;font-size:.75rem}.filters>div:first-child{overflow-x:auto;padding-bottom:5px;scrollbar-width:none}.filters>div:first-child::-webkit-scrollbar{display:none}}