:root{--bg-color: #0f0f0f;--surface-color: #1e1e1e;--surface-hover: #2d2d2d;--border-color: #2d2d2d;--text-primary: #ffffff;--text-secondary: #aaaaaa;--accent-color: #3ea6ff;--accent-hover: #60a5fa;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius-md: 12px;--radius-lg: 16px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;height:100vh;background-color:var(--bg-color);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}header{width:100%;text-align:center;padding:1rem 0;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);flex-shrink:0;z-index:10}header h1{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:var(--text-primary)}#main-container{display:flex;flex:1;width:100%;overflow:hidden;padding:1.5rem;gap:1.5rem;max-width:1920px;margin:0 auto}.sidebar{width:280px;flex-shrink:0;overflow-y:auto;padding:0;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md)}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#404040;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#555}#video-container{flex:1;display:flex;align-items:center;justify-content:center;order:2;min-height:0;background-color:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}.video-js{width:100%;height:100%;border:none;background-color:transparent;position:relative}.video-js .vjs-tech{border-radius:0;position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:contain;z-index:0}.video-js .vjs-control-bar{z-index:2}.video-js .vjs-poster{z-index:1}#channel-list{order:3;border-left:none}#match-list{order:1;border-right:none}#channel-list button,.match{background-color:transparent;color:var(--text-primary);border:none;border-bottom:1px solid var(--border-color);border-radius:0;padding:1rem;cursor:pointer;transition:background-color .2s ease;text-align:left;display:flex;align-items:center;gap:1rem;width:100%;margin-bottom:0;font-size:.9375rem}#channel-list button:last-child,.match:last-child{border-bottom:none}#channel-list button:hover,.match:hover{background-color:var(--surface-hover);color:var(--text-primary);transform:none}#channel-list button.active,.match.active{background-color:var(--surface-hover);font-weight:600}.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}.team{display:flex;align-items:center;gap:.5rem;min-width:0}.team:last-child{flex-direction:row-reverse;text-align:right}.team img{width:24px;height:24px;object-fit:contain;flex-shrink:0}.team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem}.event-info{text-align:center;font-size:.75rem;color:var(--text-secondary);min-width:50px;font-variant-numeric:tabular-nums;font-weight:500}@media (max-width: 1024px){body{height:auto;overflow-y:auto}#main-container{flex-direction:column;padding:1rem;gap:1rem;overflow:visible;height:auto}.sidebar,#video-container{width:100%;order:0!important}#video-container{min-height:300px;order:1!important;position:sticky;top:0;z-index:9999;margin-bottom:1rem;margin-left:-1rem;margin-right:-1rem;width:calc(100% + 2rem);border-radius:16px;border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-lg);overflow:hidden;background-color:#000;display:block}#video-container .video-js{width:100%!important;height:100%!important;position:absolute;top:0;left:0}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%!important;height:100%!important;z-index:1!important}#match-list{order:2!important;border-right:none;max-height:none}#channel-list{order:3!important;border-left:none;border-top:1px solid var(--border-color);padding-top:0;max-height:none;margin-bottom:2rem}}