:root{--bg:#080810;--bg2:#0f0f1a;--bg3:#161625;--surface:#1c1c2e;--border:#28283d;--accent2:#ff3b3b;--accent3:#3b8fff;--text:#f0f0f6;--muted:#7878a0;--card-hover:#222235;}
.light{--bg:#f2f2ee;--bg2:#e8e8e2;--bg3:#dededa;--surface:#fff;--border:#d0d0c8;--accent2:#cc1100;--accent3:#0055cc;--text:#0f0f18;--muted:#66667a;--card-hover:#f8f8f2;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;transition:background .3s,color .3s;}
header{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px;backdrop-filter:blur(16px);}
.logo{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;letter-spacing:.18em;display:flex;align-items:center;gap:.4rem;}
.logo-box{background:var(--accent2);color:#fff;padding:0 7px 1px;border-radius:3px;font-size:1.4rem;}
.hctrl{display:flex;align-items:center;gap:.6rem;}
.live-pill{display:flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.12em;color:var(--accent2);}
.live-dot{width:7px;height:7px;background:var(--accent2);border-radius:50%;animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.theme-btn{width:38px;height:22px;background:var(--border);border:none;border-radius:11px;cursor:pointer;position:relative;transition:background .3s;flex-shrink:0;}
.theme-btn::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--accent2);border-radius:50%;transition:transform .3s;}
.light .theme-btn::after{transform:translateX(16px);}
.lang-wrap{position:relative;}
.lang-btn{padding:5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Mono',monospace;font-size:.7rem;cursor:pointer;white-space:nowrap;}
.lang-dropdown{display:none;position:absolute;top:110%;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;z-index:300;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.lang-dropdown.open{display:block;}
.lang-option{padding:8px 14px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;gap:8px;transition:background .15s;}
.lang-option:hover{background:var(--card-hover);}
.lang-option.active{color:var(--accent2);font-weight:600;}
.ticker{height:30px;background:var(--text);color:var(--bg);display:flex;align-items:center;overflow:hidden;font-size:.72rem;font-family:'DM Mono',monospace;}
.ticker-tag{background:var(--accent2);color:#fff;height:100%;display:flex;align-items:center;padding:0 14px;font-weight:700;font-size:.65rem;letter-spacing:.14em;flex-shrink:0;}
.ticker-runner{display:flex;animation:run 90s linear infinite;white-space:nowrap;}
.ticker-runner span{padding:0 2.5rem;}
.ticker-runner span::before{content:'◆';margin-right:.6rem;opacity:.3;}
@keyframes run{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tabs{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:0 1.5rem;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:13px 16px;border:none;border-bottom:3px solid transparent;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;}
.tab:hover{color:var(--text);}
.tab.on{color:var(--text);border-bottom-color:var(--accent2);}
main{max-width:1440px;margin:0 auto;padding:1.8rem 2rem;}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.12em;margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem;}
.sec-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* PLAYER */
.player-wrap{display:grid;grid-template-columns:1fr 300px;gap:1rem;margin-bottom:2rem;}
@media(max-width:900px){.player-wrap{grid-template-columns:1fr;}}
.player-box{background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.vjs-wrap{aspect-ratio:16/9;background:#000;width:100%;}
.vjs-wrap .video-js{width:100%;height:100%;}
.yt-wrap{aspect-ratio:16/9;display:block;}.yt-wrap iframe{width:100%;height:100%;border:none;display:block;}
.watchlive-wrap{aspect-ratio:16/9;display:none;align-items:center;justify-content:center;flex-direction:column;gap:1.2rem;background:var(--bg3);}
.watchlive-wrap.show{display:flex;}
.watchlive-badge{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1rem;}
.watchlive-name{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.1em;}
.watchlive-sub{font-size:.82rem;color:var(--muted);margin-top:-.6rem;}
.watchlive-btn{padding:11px 26px;color:#fff;border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:opacity .2s;}
.watchlive-btn:hover{opacity:.85;}
.watchlive-note{font-size:.72rem;color:var(--muted);font-family:'DM Mono',monospace;}
.player-footer{padding:12px 16px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.pf-left{display:flex;align-items:center;gap:10px;}
.now-badge{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.65rem;flex-shrink:0;}
.now-name{font-weight:600;font-size:.95rem;}
.pf-right{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:.68rem;}
.st-dot{width:7px;height:7px;border-radius:50%;}
.st-dot.live{background:#22cc66;animation:blink 1.4s infinite;}
.st-dot.yt{background:var(--accent2);}
.st-dot.load{background:#ffaa00;animation:blink .6s infinite;}
.st-dot.ext{background:#3b8fff;}
a.visit-link{color:var(--accent3);font-size:.7rem;text-decoration:none;}
.playlist{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;max-height:540px;}
.pl-head{padding:10px 14px;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0;}
.pl-scroll{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.pl-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.pl-item:hover,.pl-item.active{background:var(--card-hover);}
.pl-item.active{border-left:3px solid var(--accent2);}
.pl-badge{width:36px;height:36px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.6rem;flex-shrink:0;}
.pl-info{flex:1;min-width:0;}
.pl-name{font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-sub{font-size:.7rem;color:var(--muted);margin-top:1px;}
.pl-mode{font-size:.6rem;font-family:'DM Mono',monospace;flex-shrink:0;padding:2px 5px;border-radius:3px;}
.pl-mode.hls{background:#22cc6622;color:#22cc66;}
.pl-mode.ext{background:#3b8fff22;color:#3b8fff;}

/* CHANNEL CARDS */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.85rem;margin-bottom:2rem;}
.ch-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:1rem;cursor:pointer;transition:border-color .2s,transform .2s,background .2s;display:flex;align-items:center;gap:.85rem;}
.ch-card:hover{background:var(--card-hover);border-color:var(--accent2);transform:translateY(-2px);}
.ch-card.active{border-color:var(--accent2);}
.ch-ico{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:.65rem;flex-shrink:0;}
.ch-name{font-weight:600;font-size:.88rem;}
.ch-sub{font-size:.72rem;color:var(--muted);margin-top:2px;}
.ch-mode{font-size:.6rem;font-family:'DM Mono',monospace;margin-top:3px;padding:1px 5px;border-radius:3px;display:inline-block;}
.ch-mode.hls{background:#22cc6622;color:#22cc66;}
.ch-mode.ext{background:#3b8fff22;color:#3b8fff;}

/* WEBCAMS */
.webcam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.2rem;margin-bottom:2rem;}
.webcam-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s;}
.webcam-card:hover{border-color:var(--accent3);transform:translateY(-2px);}
.webcam-video{position:relative;aspect-ratio:16/9;background:#000;}
.webcam-video iframe{width:100%;height:100%;border:none;display:block;}
.webcam-info{padding:12px 14px;display:flex;align-items:center;gap:10px;}
.webcam-flag{font-size:1.4rem;}
.webcam-text{}
.webcam-name{font-weight:600;font-size:.9rem;}
.webcam-loc{font-size:.75rem;color:var(--muted);margin-top:2px;}
.webcam-live{display:flex;align-items:center;gap:5px;font-family:'DM Mono',monospace;font-size:.65rem;color:#22cc66;margin-left:auto;flex-shrink:0;}
.webcam-live-dot{width:6px;height:6px;background:#22cc66;border-radius:50%;animation:blink 1.4s infinite;}

.page{display:none;}
.page.on{display:block;}
footer{border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;color:var(--muted);font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.04em;margin-top:1rem;line-height:1.6;}
@media(max-width:600px){main{padding:1rem;}header{padding:0 1rem;}.tabs{padding:0 .5rem;}.webcam-grid{grid-template-columns:1fr;}}