:root{--primary-color: #1E99F4;--primary-dark: #0D7BC7;--primary-light: #4DB3F7;--secondary-color: #0A0A0A;--accent-color: #FF6B6B;--success-color: #4ECDC4;--warning-color: #FFE66D;--error-color: #FF6B6B;--text-primary: #FFFFFF;--text-secondary: #B0B0B0;--text-muted: #666666;--bg-primary: #0A0A0A;--bg-secondary: #1A1A1A;--bg-tertiary: #2A2A2A;--border-color: rgba(30, 153, 244, .2);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .3);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}html,body{margin:0;padding:0;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow-x:hidden;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:var(--radius-sm);transition:var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--primary-light),var(--primary-color))}*{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--bg-secondary)}html{scroll-behavior:smooth}::selection{background-color:#1e99f44d;color:var(--text-primary)}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:var(--radius-sm)}.streaming-app{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);display:flex;flex-direction:column}.nav-header{background:#1e99f414;backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000;transition:var(--transition-normal)}.nav-container{max-width:1600px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-left{display:flex;align-items:center;gap:1.5rem}.logo{height:42px;width:auto;filter:brightness(1.1) contrast(1.1);transition:var(--transition-fast)}.logo:hover{filter:brightness(1.2) contrast(1.2);transform:scale(1.02)}.nav-divider{width:1px;height:32px;background:linear-gradient(to bottom,transparent,var(--border-color),transparent)}.live-badge{display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,#1e99f433,#1e99f41a);padding:.75rem 1.25rem;border-radius:var(--radius-xl);border:1px solid var(--primary-color);box-shadow:var(--shadow-md);backdrop-filter:blur(10px)}.live-pulse{width:10px;height:10px;background:#f44;border-radius:50%;animation:livePulse 2s infinite;box-shadow:0 0 10px #ff444480}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.live-text{font-weight:700;font-size:.9rem;letter-spacing:.5px;color:var(--text-primary)}.viewer-count{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.85rem;font-weight:500}.nav-right{display:flex;align-items:center;gap:.5rem}.nav-btn{background:#1e99f41a;border:1px solid rgba(30,153,244,.3);color:var(--text-primary);padding:.75rem;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px)}.nav-btn:hover{background:#1e99f433;border-color:var(--primary-color);transform:translateY(-1px);box-shadow:var(--shadow-md)}.main-layout{flex:1;max-width:1600px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 400px;gap:2rem;transition:var(--transition-normal)}.main-layout.theater-mode{grid-template-columns:1fr;max-width:100%}.video-section{display:flex;flex-direction:column;gap:1.5rem}.video-container{position:relative;background:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid var(--border-color);aspect-ratio:16/9}.jwplayer-container{width:100%;height:100%;position:relative}.video-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 30%,transparent 60%);display:flex;align-items:flex-end;padding:2rem;transition:var(--transition-normal);pointer-events:none;z-index:10}.overlay-content{width:100%;display:flex;justify-content:space-between;align-items:flex-end}.channel-info h1{font-size:2.5rem;font-weight:800;margin:0 0 .5rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.channel-subtitle{font-size:1.1rem;color:var(--text-secondary);margin:0 0 1rem;font-weight:500}.stream-stats{display:flex;gap:1.5rem}.stat-item{display:flex;flex-direction:column;gap:.25rem}.stat-label{font-size:.8rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1rem;color:var(--text-primary);font-weight:600;font-family:JetBrains Mono,monospace}.overlay-controls{display:flex;gap:1rem;pointer-events:all}.control-btn{background:#1e99f433;border:1px solid rgba(30,153,244,.4);color:var(--text-primary);padding:.75rem 1rem;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;backdrop-filter:blur(10px)}.control-btn:hover{background:#1e99f44d;border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.loading-overlay{position:absolute;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;transition:var(--transition-normal)}.loading-spinner{position:relative;width:80px;height:80px;margin-bottom:2rem}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:nth-child(2){width:60px;height:60px;top:10px;left:10px;border-top-color:var(--primary-light);animation-duration:.8s;animation-direction:reverse}.spinner-ring:nth-child(3){width:40px;height:40px;top:20px;left:20px;border-top-color:var(--primary-dark);animation-duration:.6s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:1.1rem;color:var(--text-secondary);font-weight:500}.stream-info-panel{background:linear-gradient(135deg,#1e99f40d,#1e99f405);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;backdrop-filter:blur(10px)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.info-card{background:#1e99f40d;border:1px solid rgba(30,153,244,.1);border-radius:var(--radius-md);padding:1.25rem;display:flex;align-items:center;gap:1rem;transition:var(--transition-fast)}.info-card:hover{background:#1e99f414;border-color:#1e99f433;transform:translateY(-2px);box-shadow:var(--shadow-md)}.info-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.info-content h3{margin:0 0 .25rem;font-size:.9rem;font-weight:600;color:var(--text-primary)}.info-content p{margin:0;font-size:1.1rem;font-weight:700;color:var(--primary-color);font-family:JetBrains Mono,monospace}.chat-section{display:flex;flex-direction:column;background:linear-gradient(135deg,#1e99f40d,#1e99f405);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(10px);transition:var(--transition-normal)}.chat-section.collapsed{width:60px;min-width:60px}.chat-header{background:#1e99f41a;padding:1.25rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px)}.chat-title{display:flex;align-items:center;gap:.75rem;color:var(--primary-color)}.chat-title h3{margin:0;font-size:1.1rem;font-weight:600}.chat-controls{display:flex;align-items:center;gap:1rem}.chat-status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary);font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success-color);animation:pulse 2s infinite}.status-dot.active{box-shadow:0 0 10px #4ecdc480}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.chat-toggle{background:#1e99f41a;border:1px solid rgba(30,153,244,.3);color:var(--text-primary);padding:.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.chat-toggle:hover{background:#1e99f433;border-color:var(--primary-color)}.chat-container{flex:1;min-height:600px;position:relative}.chat-footer{background:#1e99f40d;padding:1rem 1.25rem;border-top:1px solid var(--border-color)}.online-users{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary);font-weight:500}.fab{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:var(--transition-fast);z-index:1000}.fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-xl)}.fab.active{background:linear-gradient(135deg,var(--warning-color),#FFD93D)}.modal-overlay{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(10px)}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:var(--shadow-xl)}.modal-header{background:#1e99f41a;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.modal-header h3{margin:0;font-size:1.2rem;font-weight:600;color:var(--text-primary)}.modal-close{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3);color:var(--error-color);padding:.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#ff6b6b33;border-color:var(--error-color)}.modal-body{padding:2rem}.setting-group{margin-bottom:1.5rem}.setting-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-primary)}.setting-group select,.setting-group input[type=range]{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem}.setting-group select:focus,.setting-group input[type=range]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #1e99f41a}.notification{position:fixed;top:2rem;right:2rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;padding:1rem 1.5rem;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transform:translate(100%);transition:var(--transition-normal);z-index:3000;font-weight:500}.notification.show{transform:translate(0)}@media (max-width: 1200px){.main-layout{grid-template-columns:1fr 350px}}@media (max-width: 1024px){.main-layout{grid-template-columns:1fr;gap:1.5rem}.chat-section{order:2;min-height:400px}.video-section{order:1}.nav-container,.main-layout{padding:1rem}}@media (max-width: 768px){.nav-container{flex-direction:column;gap:1rem;text-align:center}.nav-left{justify-content:center}.logo{height:36px}.live-badge{padding:.5rem 1rem}.channel-info h1{font-size:2rem}.overlay-content{flex-direction:column;align-items:flex-start;gap:1rem}.stream-stats{flex-direction:column;gap:.5rem}.info-grid{grid-template-columns:1fr}.chat-container{min-height:300px}.fab{bottom:1rem;right:1rem;width:48px;height:48px}}@media (max-width: 480px){.main-layout{padding:.5rem}.video-overlay{padding:1rem}.channel-info h1{font-size:1.5rem}.modal-content{width:95%}.modal-header,.modal-body{padding:1rem}}@media print{.nav-header,.chat-section,.fab,.modal-overlay{display:none!important}.main-layout{grid-template-columns:1fr}}@media (prefers-contrast: high){:root{--border-color: #FFFFFF;--text-secondary: #FFFFFF}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.keyboard-user *:focus{outline:2px solid var(--primary-color)!important;outline-offset:2px!important}.loading{opacity:.6;pointer-events:none;cursor:wait}