/* TV layout, using the shared BITCOM palette. */
@font-face {font-family:"Cairo";src:url("/tv/assets/fonts/Cairo-VF.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
:root{color-scheme:inherit;--bg:var(--graphite-canvas);--bg2:var(--graphite-canvas);--surface:var(--graphite-surface);--surface2:var(--graphite-raised);--surface3:var(--graphite-active);--line:var(--graphite-border);--line2:var(--graphite-border);--text:var(--graphite-text);--soft:var(--graphite-text);--muted:var(--graphite-muted);--green:var(--graphite-success);--cyan:var(--graphite-accent);--gold:var(--graphite-warning);--red:var(--graphite-danger);--shadow:0 24px 80px rgba(0,0,0,.44);--radius:8px;}
*{box-sizing:border-box;}
html{width:100%;min-height:100%;overflow-x:hidden;scroll-behavior:smooth;scrollbar-color:var(--graphite-border) var(--graphite-surface);scrollbar-width:thin;}
body{width:100%;min-height:100%;overflow-x:hidden;}
*{scrollbar-color:var(--graphite-border) var(--graphite-surface);scrollbar-width:thin;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:var(--graphite-surface);border-radius:999px;box-shadow:none;}
*::-webkit-scrollbar-thumb{min-height:64px;border:2px solid var(--graphite-border);border-radius:999px;background:var(--graphite-surface);box-shadow:none;}
*::-webkit-scrollbar-thumb:hover{background:var(--graphite-raised);}
body{margin:0;background:var(--graphite-canvas);color:var(--text);font-family:"Cairo",Tahoma,Arial,sans-serif;font-size:15px;}
body::before{content:none;position:fixed;inset:0;z-index:-1;background:transparent;pointer-events:none;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;}
button{cursor:pointer;}
.app-header{position:sticky;top:0;z-index:60;background:var(--shell-header);backdrop-filter:none;border-bottom:1px solid var(--graphite-border);}
.header-inner{width:min(100%,1580px);margin:0 auto;min-height:76px;padding:12px 18px;display:grid;grid-template-columns:minmax(280px,1fr) auto;align-items:center;gap:16px;direction:ltr;}
.brand,.nav{direction:rtl;}
.brand{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0;}
.logo{width:86px;height:62px;border-radius:10px;display:block;object-fit:contain;object-position:center;border:1px solid var(--graphite-border);background:var(--graphite-surface);box-shadow:none;}
.brand-title{min-width:0;}
.brand-title strong{display:block;font-size:27px;line-height:1;white-space:nowrap;}
.brand-title span{display:block;color:var(--graphite-muted);font-size:12px;margin-top:5px;white-space:nowrap;}
.nav{display:flex;justify-content:center;gap:8px;min-width:0;flex-wrap:wrap;align-items:center;}
.nav a{min-height:38px;padding:10px 14px;border-radius:8px;color:var(--graphite-text);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;}
.nav a.active,.nav a:hover{background:var(--graphite-active);color:var(--graphite-text);box-shadow:none;}
.display-controls{display:flex;align-items:center;gap:8px;margin-inline-start:8px;}
.display-control{min-width:132px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-height:42px;padding:4px 8px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);}
.display-control-label{font-size:11px;font-weight:900;white-space:nowrap;color:var(--graphite-muted);}
.header-select{min-width:0;max-width:180px;border:0;border-inline-start:1px solid var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);height:32px;padding:0 8px;font-size:12px;font-family:inherit;font-weight:800;outline:none;cursor:pointer;box-shadow:none;}
.theme-select{width:78px;}
.language-select{width:118px;}
.header-select option{color:var(--graphite-text);background:var(--graphite-surface);}
.app-shell{width:min(100%,1580px);max-width:100vw;margin:0 auto;padding:14px 18px 16px;display:grid;grid-template-columns:300px minmax(0,1fr) 300px;grid-template-areas:"popular stage channels";gap:16px;align-items:stretch;direction:ltr;height:calc(var(--app-vh, 100vh) - 124px);min-height:630px;}
.sports-panel,.stage,.control-panel{direction:rtl;min-width:0;}
.sports-panel{grid-area:popular;}
.stage{grid-area:stage;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;}
.control-panel{grid-area:channels;}
.panel{max-width:100%;background:var(--graphite-surface);border:1px solid var(--graphite-border);border-radius:8px;box-shadow:none;overflow:hidden;}
.sticky-panel{position:sticky;top:92px;height:100%;min-height:0;overflow:hidden;}
.panel-head{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid var(--graphite-border);background:var(--graphite-surface);}
.panel-head h2,.section-head h2{font-size:19px;margin:0;}
.panel-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.mobile-drawer-backdrop,
    .mobile-drawer-toggle,
    .drawer-close{display:none;}
.mobile-drawer-backdrop[hidden]{display:none!important;}
.drawer-close{width:34px;height:34px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);align-items:center;justify-content:center;font-size:20px;font-weight:900;line-height:1;padding:0;}
.search-toggle{width:34px;height:34px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);display:grid;place-items:center;font-weight:900;padding:0;}
.search-toggle:hover,.search-toggle[aria-expanded="true"]{border-color:var(--graphite-border);color:var(--graphite-text);background:var(--graphite-raised);}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;border:1px solid var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);font-size:12px;white-space:nowrap;}
.sports-list{display:grid;gap:8px;padding:12px;}
.sports-button{border:1px solid var(--line);background:var(--graphite-surface);color:var(--text);border-radius:8px;min-height:56px;display:grid;grid-template-columns:54px minmax(0,1fr) 24px;gap:10px;align-items:center;text-align:right;padding:9px 10px;}
.sports-button:hover{border-color:var(--graphite-border);}
.sports-button.active{background:var(--graphite-active);border-color:var(--graphite-border);color:var(--graphite-text);font-weight:800;box-shadow:none;}
.sports-button strong{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;}
.sports-button small{color:var(--muted);}
.sports-button.active small{color:var(--graphite-muted);}
.badge{justify-self:start;border-radius:5px;padding:4px 7px;background:var(--red);color:var(--graphite-text);font-size:10px;font-weight:800;}
.sports-button.active .badge{background:var(--graphite-active);color:var(--graphite-text);}
.vip-band{padding:18px;display:grid;gap:12px;background:var(--graphite-surface);border-top:1px solid var(--graphite-border);}
.vip-band h3{font-size:28px;margin:0;}
.vip-band ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;color:var(--graphite-text);}
.vip-band li{display:flex;justify-content:space-between;gap:12px;}
.vip-band li::after{content:"✓";color:var(--green);font-weight:900;}
.panel-scroll{height:calc(100% - 57px);overflow:auto;padding:10px;overscroll-behavior:contain;scroll-behavior:smooth;}
.popular-list{display:grid;gap:9px;}
.popular-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.popular-tab{min-height:36px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);font-size:12px;font-weight:900;}
.popular-tab.active{color:var(--graphite-text);border-color:var(--graphite-border);background:var(--graphite-active);box-shadow:none;}
.popular-pane[hidden]{display:none!important;}
.empty-state{min-height:132px;border:1px dashed var(--graphite-border);border-radius:8px;background:var(--graphite-surface);display:grid;place-items:center;text-align:center;padding:18px;color:var(--graphite-text);}
.empty-state strong{display:block;font-size:16px;margin-bottom:6px;}
.empty-state span{display:block;color:var(--graphite-muted);font-size:13px;line-height:1.6;}
.popular-list .watch-card{min-width:0;width:100%;min-height:72px;}
.rail-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 9px;color:var(--graphite-text);font-size:13px;font-weight:900;}
.rail-title span{color:var(--graphite-muted);font-size:11px;font-weight:700;}
.recent-list{display:grid;gap:8px;}
.browser-wrap{height:calc(100% - 57px);display:flex;flex-direction:column;gap:10px;padding:12px;}
.browser-search{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--graphite-surface);padding:0 12px;}
.browser-search[hidden]{display:none;}
.browser-search span{color:var(--muted);}
.browser-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:11px 0;}
.browser-filter-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:7px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);}
.browser-filter-tab{min-height:34px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);font:inherit;font-weight:900;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;}
.browser-filter-tab:hover{transform:translateY(-1px);border-color:var(--graphite-border);color:var(--graphite-text);}
.browser-filter-tab.active{border-color:var(--graphite-border);background:var(--graphite-active);color:var(--graphite-text);box-shadow:none;}
.browser-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;}
.browser-toolbar:has(.browser-back[hidden]){display:none;}
.browser-back{border:1px solid var(--line2);background:var(--graphite-surface);color:var(--graphite-text);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;padding:0;font-size:18px;line-height:1;}
.browser-back:hover{border-color:var(--graphite-border);color:var(--graphite-text);background:var(--graphite-raised);}
.browser-back[hidden]{display:none;}
.browser-mode-pill{display:none;}
.browser-list{flex:1 1 auto;min-height:0;overflow:auto;display:grid;gap:8px;align-content:start;padding-left:2px;overscroll-behavior:contain;scroll-behavior:smooth;}
.browser-row{min-height:66px;border:1px solid var(--line);background:var(--graphite-surface);color:var(--text);border-radius:8px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;text-align:right;padding:9px 10px;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.browser-row:hover{transform:translateY(-1px);border-color:var(--graphite-border);}
.browser-row.active{background:var(--graphite-active);border-color:var(--graphite-border);color:var(--graphite-text);font-weight:800;}
.browser-row strong,.browser-row span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.browser-copy{min-width:0;display:grid;gap:4px;}
.browser-row small{display:block;color:var(--muted);font-size:12px;margin-top:0;}
.browser-row.active small{color:var(--graphite-muted);}
.channel-logo{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;color:var(--graphite-text);font-size:12px;font-weight:900;letter-spacing:0;background:var(--graphite-surface);border:1px solid var(--graphite-border);box-shadow:none;overflow:hidden;text-align:center;}
.channel-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:5px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));}
.channel-logo.has-image{background:var(--graphite-surface);border-color:var(--graphite-border);}
.browser-row.active .channel-logo{background:var(--graphite-active);border-color:var(--graphite-border);color:var(--graphite-text);}
.browser-count{min-width:34px;min-height:28px;padding:4px 8px;border-radius:8px;display:grid;place-items:center;background:var(--graphite-surface);color:var(--graphite-text);font-size:12px;font-style:normal;direction:ltr;}
.browser-row.active .browser-count{background:var(--graphite-active);color:var(--graphite-text);}
.fav-inline{width:34px;height:34px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);display:grid;place-items:center;font-weight:900;padding:0;position:relative;z-index:2;}
.fav-inline.active{background:var(--graphite-active);color:var(--graphite-text);border-color:var(--graphite-border);box-shadow:none;}
.hero{position:relative;max-width:100%;min-height:0;overflow:hidden;background:var(--graphite-surface);}
.hero::before{content:none;position:absolute;inset:0;background:transparent;opacity:.82;}
.hero::after{content:none;position:absolute;inset:0;background:transparent;pointer-events:none;}
.hero-top,.player-box,.hero-status{position:relative;z-index:2;}
.hero-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;padding:18px 24px 12px;}
.now-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--graphite-text);font-size:13px;font-weight:700;margin-bottom:10px;}
.now-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:none;}
.now-title{margin:0;font-size:38px;line-height:1.08;overflow-wrap:anywhere;text-shadow:none;}
.now-meta{margin:7px 0 0;color:var(--graphite-muted);}
.score-card{min-width:210px;border:1px solid var(--graphite-border);background:var(--graphite-surface);border-radius:8px;padding:12px;display:grid;gap:9px;}
.score-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--graphite-text);}
.score-number{min-width:40px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--graphite-surface);font-weight:900;color:var(--graphite-text);}
.player-box{padding:0 24px 14px;}
.video-frame{position:relative;min-width:0;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);box-shadow:none;overflow:hidden;}
.video-frame:fullscreen{display:grid;place-items:center;background:var(--graphite-surface);border:0;border-radius:0;}
.video-frame:fullscreen video{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;}
.video-frame:-webkit-full-screen{display:grid;place-items:center;width:100%;height:100%;background:var(--graphite-surface);border:0;border-radius:0;}
.video-frame:-webkit-full-screen video{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain;}
video{display:block;width:100%;min-width:0;aspect-ratio:16/9;max-height:calc(var(--app-vh, 100vh) - 470px);min-height:280px;background:var(--graphite-surface);}
html[data-bitcom-theme="light"] .video-frame,
html[data-bitcom-theme="light"] .video-frame video,
html[data-bitcom-theme="light"] .video-frame .player-state{background:#f7faff;}
html[data-bitcom-theme="light"] .video-frame .state-card,
html[data-bitcom-theme="light"] .video-frame .video-topline,
html[data-bitcom-theme="light"] .video-frame .bitcom-controls,
html[data-bitcom-theme="light"] .video-frame .control-icon,
html[data-bitcom-theme="light"] .video-frame .sound-unlock{background:#ffffff;color:#0b2a4a;border-color:var(--graphite-border);}
html[data-bitcom-theme="light"] .video-frame .state-card{box-shadow:0 14px 36px rgba(24,74,150,.10);}
html[data-bitcom-theme="light"] .video-frame .state-card strong,
html[data-bitcom-theme="light"] .video-frame .control-time{color:#0b2a4a;}
html[data-bitcom-theme="light"] .video-frame .state-card small{color:#526b84;}
html[data-bitcom-theme="light"] .video-frame .video-topline{color:#8a5b00;}
.video-glass{position:absolute;inset:0;pointer-events:none;border-radius:8px;box-shadow:none;}
.video-topline{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 120px);min-height:34px;padding:7px 11px;border-radius:999px;border:1px solid var(--graphite-border);background:var(--graphite-surface);backdrop-filter:none;color:var(--graphite-text);box-shadow:none;}
.video-topline::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:none;flex:0 0 auto;}
.player-state{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:none;opacity:0;transform:scale(.985);transition:opacity .22s ease,transform .22s ease;background:var(--graphite-surface);}
.video-frame.is-loading .player-state,
    .video-frame.is-error .player-state{opacity:1;transform:scale(1);}
.state-card{min-width:min(320px,86%);border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);backdrop-filter:none;box-shadow:none;padding:20px;display:grid;justify-items:center;gap:10px;}
.state-orbit{width:54px;height:54px;border-radius:50%;border:2px solid var(--graphite-border);border-top-color:var(--green);border-left-color:var(--cyan);animation:bitcomSpin .9s linear infinite;box-shadow:none;}
.video-frame.is-error .state-orbit{animation:none;border-color:var(--graphite-border);box-shadow:none;}
.state-card strong{font-size:18px;line-height:1.3;}
.state-card small{color:var(--graphite-muted);font-size:13px;line-height:1.6;}
@keyframes bitcomSpin{to{transform:rotate(360deg);}}
.tool-launcher{position:absolute;top:12px;left:12px;z-index:7;width:44px;height:36px;border-radius:999px;border:1px solid var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);display:grid;place-items:center;font-size:17px;font-weight:900;backdrop-filter:none;box-shadow:none;}
.tool-launcher:hover,.tool-launcher[aria-expanded="true"]{border-color:var(--graphite-border);background:var(--graphite-raised);}
.video-tools{position:absolute;top:60px;left:12px;z-index:7;display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;border:1px solid var(--graphite-border);background:var(--graphite-surface);backdrop-filter:none;box-shadow:none;}
.video-tools[hidden]{display:none;}
.tool-btn{width:40px;height:40px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);display:grid;place-items:center;font-weight:900;font-size:13px;text-align:center;padding:0;text-decoration:none;position:relative;z-index:1;}
.tool-btn:hover{border-color:var(--graphite-border);color:var(--graphite-text);box-shadow:none;}
.tool-btn.record-toggle .record-dot{width:14px;height:14px;border-radius:50%;background:var(--graphite-surface);box-shadow:none;}
.tool-btn.is-recording{border-color:var(--graphite-border);background:var(--graphite-surface);}
.lock-tool{color:var(--graphite-text);opacity:.78;cursor:default;}
.lock-tool::after{content:"";width:7px;height:7px;position:absolute;top:6px;right:6px;border-radius:50%;background:var(--green);box-shadow:none;}
.record-panel{position:absolute;bottom:80px;left:16px;z-index:6;width:min(300px,calc(100% - 24px));border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);backdrop-filter:none;box-shadow:none;padding:12px;display:grid;gap:10px;}
.record-panel[hidden]{display:none;}
.record-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.record-head strong{font-size:14px;}
.record-head span{color:var(--muted);font-size:12px;}
.record-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.record-actions button{min-height:34px;border:1px solid var(--line2);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);font-weight:800;}
.record-actions button:disabled{opacity:.45;cursor:not-allowed;}
.record-actions .danger{border-color:var(--graphite-border);color:var(--graphite-text);}
.bitcom-controls{position:absolute;left:16px;right:16px;bottom:14px;z-index:5;display:grid;grid-template-columns:auto auto auto auto minmax(90px,1fr) auto minmax(70px,132px) auto auto auto;align-items:center;gap:10px;direction:ltr;min-height:58px;padding:8px 12px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);backdrop-filter:none;box-shadow:none;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.video-frame:hover .bitcom-controls,
    .video-frame:focus-within .bitcom-controls,
    .video-frame.controls-visible .bitcom-controls{opacity:1;transform:translateY(0);pointer-events:auto;}
.control-icon{width:38px;height:38px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);display:grid;place-items:center;font-size:12px;font-weight:900;padding:0;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;}
.control-icon:hover{border-color:var(--graphite-border);box-shadow:none;transform:translateY(-1px);}
.control-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.control-icon.control-play{width:44px;height:44px;border-color:var(--graphite-border);border-radius:10px;color:var(--graphite-text);background:var(--graphite-surface);box-shadow:none;}
.control-icon.control-play:hover{border-color:var(--graphite-border);box-shadow:none;}
.control-icon.control-retry{color:var(--graphite-text);border-color:var(--graphite-border);background:var(--graphite-surface);}
.control-icon.control-record{border-color:var(--graphite-border);background:var(--graphite-surface);}
.control-icon.control-pip{color:var(--graphite-text);border-color:var(--graphite-border);background:var(--graphite-surface);}
.control-icon.control-lock{color:var(--graphite-text);border-color:var(--graphite-border);opacity:.72;}
.control-icon.control-fullscreen{width:44px;color:var(--graphite-text);border-color:var(--graphite-border);background:var(--graphite-surface);box-shadow:none;}
.control-icon.control-fullscreen.is-active{color:var(--graphite-text);background:var(--graphite-active);border-color:var(--graphite-border);box-shadow:none;}
.control-icon .record-dot{width:13px;height:13px;border-radius:50%;background:var(--graphite-surface);box-shadow:none;}
.control-icon.is-recording{animation:recordPulse 1.15s ease-in-out infinite;border-color:var(--graphite-border);}
@keyframes recordPulse{50%{box-shadow:none;}}
.control-time{min-width:54px;color:var(--graphite-text);font-size:12px;font-weight:800;text-align:center;direction:ltr;white-space:nowrap;}
.control-range{width:100%;min-width:0;height:26px;appearance:none;-webkit-appearance:none;background:transparent;direction:ltr;--fill:0%;}
.control-range:disabled{opacity:.46;}
.control-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--graphite-surface);box-shadow:none;}
.control-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-5px;border:2px solid var(--graphite-border);background:var(--graphite-surface);box-shadow:none;}
.control-range::-moz-range-track{height:6px;border-radius:999px;background:var(--graphite-surface);}
.control-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--graphite-surface);}
.control-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:2px solid var(--graphite-border);background:var(--graphite-surface);box-shadow:none;}
.hero-status{min-height:66px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 24px 16px;border-top:1px solid var(--graphite-border);background:var(--graphite-surface);}
.status-text{color:var(--graphite-text);min-width:0;}
.status-text.warn{color:var(--gold);}
.status-text.bad{color:var(--graphite-text);}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn{border:1px solid var(--line2);background:var(--graphite-surface);color:var(--text);border-radius:8px;min-height:40px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.btn:hover{border-color:var(--cyan);}
.btn.primary{background:var(--graphite-surface);color:var(--graphite-text);border-color:var(--graphite-border);font-weight:800;}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.experience-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:stretch;}
.experience-dock{position:relative;min-height:50px;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:center;z-index:8;background:var(--graphite-surface);border-top:1px solid var(--graphite-border);border-bottom:1px solid var(--graphite-border);padding:5px 10px;}
.experience-dock .experience-bar{width:100%;grid-template-columns:repeat(6,minmax(46px,1fr));gap:8px;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;}
.xp-btn{min-width:0;min-height:58px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;text-align:right;padding:10px;box-shadow:none;transition:border-color .16s ease,
        background .16s ease,
        color .16s ease;}
.xp-btn:hover,.xp-btn.active{border-color:var(--graphite-border);background:var(--graphite-active);}
.xp-icon{width:36px;height:36px;border:1px solid var(--graphite-border);border-radius:8px;display:grid;place-items:center;color:var(--graphite-text);background:var(--graphite-surface);font-weight:900;}
.xp-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;}
#favoriteBtn .favorite-star{fill:transparent;stroke:currentColor;transition:fill .16s ease;}
#favoriteBtn.active .favorite-star{fill:currentColor;}
.xp-btn strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.xp-btn span{display:block;color:var(--graphite-muted);font-size:11px;margin-top:3px;}
.report-panel{border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);box-shadow:none;padding:14px;display:grid;gap:10px;}
.report-panel[hidden]{display:none;}
.report-panel textarea{width:100%;min-height:86px;resize:vertical;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);outline:0;padding:10px;}
.report-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.toast{position:fixed;left:50%;bottom:22px;z-index:130;min-width:min(340px,calc(100vw - 28px));transform:translate(-50%,18px);opacity:0;pointer-events:none;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);box-shadow:none;backdrop-filter:none;padding:12px 14px;text-align:center;transition:opacity .18s ease,transform .18s ease;}
.toast.show{opacity:1;transform:translate(-50%,0);}
body.tv-mode .app-header,
    body.tv-mode .sports-panel{display:none;}
body.tv-mode .app-shell{width:100%;height:var(--app-vh, 100vh);min-height:0;padding:10px;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"stage channels";}
body.tv-mode .hero-top{padding:14px 20px 8px;}
body.tv-mode video{max-height:calc(var(--app-vh, 100vh) - 250px);}
.metric{min-width:0;min-height:84px;padding:14px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.metric strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metric span{display:block;color:var(--muted);font-size:12px;margin-top:5px;}
.metric-icon{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);font-weight:900;flex:0 0 auto;}
.section{border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);overflow:hidden;box-shadow:none;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:14px 16px;border-bottom:1px solid var(--graphite-border);}
.rail{display:flex;gap:10px;overflow:auto;padding:14px;scrollbar-width:thin;scroll-snap-type:x proximity;}
.watch-card{min-width:210px;min-height:94px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--text);padding:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;text-align:right;scroll-snap-align:start;box-shadow:none;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.watch-card:hover{transform:translateY(-1px);border-color:var(--graphite-border);background:var(--graphite-raised);}
.watch-card.is-top{border-color:var(--graphite-border);background:var(--graphite-surface);}
.popular-rank{grid-column:2;grid-row:1;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--graphite-surface);color:var(--graphite-text);font-weight:900;border:1px solid var(--graphite-border);}
.watch-card.is-top .popular-rank{background:var(--graphite-surface);color:var(--graphite-text);border-color:var(--graphite-border);}
.popular-main{grid-column:1;grid-row:1;min-width:0;display:grid;gap:7px;}
.popular-title-row{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;}
.popular-star{color:var(--gold);font-size:15px;line-height:1;filter:drop-shadow(0 0 8px rgba(224,174,78,.28));flex:0 0 auto;}
.popular-views{min-width:0;min-height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;background:var(--graphite-surface);border:1px solid var(--graphite-border);color:var(--graphite-text);font-weight:800;font-size:12px;white-space:nowrap;}
.popular-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.popular-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--graphite-muted);}
.watch-card strong,.channel-card strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.watch-card strong{direction:ltr;unicode-bidi:plaintext;text-align:right;}
.watch-card span,.channel-card span{color:var(--muted);font-size:12px;}
.library-tools{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:10px;padding:14px;align-items:center;}
.library-search{width:100%;border:1px solid var(--line);border-radius:8px;min-height:42px;background:var(--graphite-surface);color:var(--text);padding:10px 12px;outline:0;}
.chips{display:flex;gap:8px;overflow:auto;scrollbar-width:thin;}
.chip{border:1px solid var(--line2);background:var(--graphite-surface);color:var(--graphite-text);min-height:38px;border-radius:8px;padding:8px 12px;white-space:nowrap;}
.chip.active{background:var(--graphite-active);border-color:var(--gold);color:var(--graphite-text);font-weight:800;}
.channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 14px 14px;}
.channel-card{min-height:92px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);color:var(--text);padding:13px;text-align:right;display:grid;gap:10px;align-content:space-between;min-width:0;}
.channel-card:hover{border-color:var(--graphite-border);}
.channel-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.quality-mark{border:1px solid var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);border-radius:5px;padding:3px 7px;font-size:11px;font-style:normal;white-space:nowrap;}
.library-more{display:flex;justify-content:center;padding:0 14px 16px;}
.library-more[hidden]{display:none;}
.side-list{display:grid;gap:7px;padding:12px;}
.side-filter{border:1px solid transparent;background:transparent;color:var(--graphite-text);border-radius:8px;min-height:42px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right;}
.side-filter:hover,.side-filter.active{border-color:var(--graphite-border);background:var(--graphite-active);color:var(--graphite-text);}
.side-filter small{color:var(--muted);}
.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;}
.quality-grid button{min-height:36px;border:1px solid var(--line2);border-radius:8px;background:var(--graphite-surface);color:var(--graphite-text);}
.signal-box{margin:0 12px 12px;border:1px solid var(--graphite-border);border-radius:8px;padding:12px;background:var(--graphite-surface);display:grid;gap:8px;}
.signal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--graphite-text);}
.signal-bars{display:flex;gap:4px;align-items:flex-end;}
.signal-bars i{display:block;width:8px;border-radius:2px;background:var(--green);}
.signal-bars i:nth-child(1){height:10px;}
.signal-bars i:nth-child(2){height:16px;}
.signal-bars i:nth-child(3){height:22px;}
.signal-bars i:nth-child(4){height:28px;background:var(--gold);}
@media (max-width:1320px){.header-inner{grid-template-columns:minmax(260px,1fr) auto;}
.app-shell{grid-template-columns:280px minmax(0,1fr) 280px;}
.channel-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.now-title{font-size:32px;}}
@media (max-width:1120px){.header-inner{grid-template-columns:1fr;gap:10px;direction:rtl;}
.brand{justify-content:flex-start;}
.nav{justify-content:flex-start;overflow:auto;}
.app-shell{grid-template-columns:1fr;grid-template-areas:"stage" "channels" "popular";height:auto;min-height:auto;padding:12px;}
.sticky-panel{position:relative;top:auto;height:auto;max-height:none;}
.panel-scroll,.browser-wrap{height:auto;max-height:520px;}
.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.experience-bar{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){body{background-attachment:scroll;}
.header-inner{min-height:auto;padding:10px 12px;}
.brand{justify-content:center;}
.logo{width:42px;height:42px;font-size:28px;}
.brand-title strong{font-size:24px;}
.brand-title span{text-align:center;}
.nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;overflow:visible;}
.nav a{font-size:12px;padding:8px 4px;overflow:hidden;text-overflow:ellipsis;}
.app-shell{display:flex;flex-direction:column;gap:12px;width:100%;max-width:100vw;height:auto;min-height:0;padding:10px;overflow:hidden;}
.stage{order:1;width:100%;max-width:100%;}
.control-panel{order:2;width:100%;max-width:100%;}
.sports-panel{order:3;width:100%;max-width:100%;}
.hero{min-height:auto;}
.hero-top{grid-template-columns:1fr;padding:18px 14px 12px;}
.score-card{display:none;}
.now-title{font-size:24px;}
.player-box{padding:0 8px 10px;}
video{min-height:0;max-height:none;}
.video-topline{top:8px;right:8px;max-width:calc(100% - 58px);min-height:32px;font-size:12px;}
.record-panel{bottom:70px;left:8px;width:calc(100% - 16px);}
.bitcom-controls{left:8px;right:8px;bottom:8px;grid-template-columns:auto auto auto auto minmax(74px,1fr) auto auto auto auto;gap:6px;padding:6px;}
.volume-range{display:none;}
.control-icon{width:34px;height:34px;}
.control-icon.control-play,.control-icon.control-fullscreen{width:38px;height:38px;}
.hero-status{grid-template-columns:1fr;padding:12px 12px 14px;}
.actions{display:grid;grid-template-columns:1fr 1fr;width:100%;}
.btn{width:100%;min-width:0;white-space:normal;}
.metrics-grid{grid-template-columns:1fr 1fr;}
.experience-bar{grid-template-columns:repeat(2,minmax(0,1fr));}
.browser-wrap{max-height:620px;}
.panel-head,.section-head{padding:12px;}
.mobile-drawer-backdrop{position:fixed;inset:0;z-index:80;display:block;background:var(--graphite-surface);backdrop-filter:none;}
.mobile-drawer-toggle{position:fixed;top:50%;z-index:91;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--graphite-border);border-radius:14px;background:var(--graphite-surface);color:var(--graphite-text);box-shadow:none;font-size:20px;font-weight:900;transform:translateY(-50%);}
.mobile-popular-toggle{left:10px;}
.mobile-channels-toggle{right:10px;}
body.mobile-popular-open .mobile-popular-toggle,
      body.mobile-channels-open .mobile-channels-toggle{opacity:.25;pointer-events:none;}
.drawer-close{display:flex;}
.sports-panel,
      .control-panel{position:fixed;top:0;bottom:0;width:min(88vw,360px);max-width:calc(100vw - 32px);height:auto;max-height:none;z-index:95;margin:0;box-shadow:none;transition:transform .22s ease,opacity .22s ease;will-change:transform;}
.sports-panel{left:10px;right:auto;border-radius:0 8px 8px 0;transform:translateX(calc(-100% - 26px));}
.control-panel{right:10px;left:auto;border-radius:8px 0 0 8px;transform:translateX(calc(100% + 26px));}
body.mobile-popular-open .sports-panel,
      body.mobile-channels-open .control-panel{transform:translateX(0);}
body.drawer-open{overflow:hidden;}
.sports-panel .panel-scroll,
      .control-panel .browser-wrap{height:calc(100% - 56px);max-height:none;}
.control-panel .panel-head,
      .sports-panel .panel-head{min-height:56px;}}
@media (max-width:460px){.metrics-grid{grid-template-columns:1fr 1fr;}
.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.watch-card{min-width:0;}
.now-title{font-size:22px;}
.metric{min-height:74px;}
.metric strong{font-size:14px;}
.metric-icon{width:38px;height:38px;}}
@media (max-width:340px){.metrics-grid,.channel-grid{grid-template-columns:1fr;}}
:where(.panel,.hero,.metric,.watch-card,.browser-row,.channel-card,.video-frame){border-color:var(--graphite-border);}
.app-header{background:var(--shell-header);border-bottom-color:var(--graphite-border);box-shadow:none;}
.header-inner{min-height:72px;}
.nav{justify-content:flex-start;}
.nav a{min-width:118px;border:1px solid var(--graphite-border);background:var(--graphite-surface);box-shadow:none;font-weight:800;}
.nav a.active{border-color:var(--graphite-border);background:var(--graphite-active);color:var(--graphite-text);}
.brand{gap:12px;}
.logo{width:72px;height:54px;border-color:var(--graphite-border);background:var(--graphite-surface);box-shadow:none;}
.brand-title strong{font-size:28px;letter-spacing:0;text-shadow:none;}
.brand-title span{color:var(--graphite-muted);}
.app-shell{gap:18px;padding-top:16px;}
.panel{background:var(--graphite-surface);box-shadow:none;}
.panel-head{background:var(--graphite-surface);border-bottom-color:var(--graphite-border);}
.panel-head h2{font-size:20px;letter-spacing:0;}
.pill{border-color:var(--graphite-border);background:var(--graphite-surface);color:var(--graphite-text);}
.hero{border-color:var(--graphite-border);box-shadow:none;}
.hero::before{opacity:.72;filter:saturate(1.08) contrast(1.05);}
.hero::after{background:transparent;}
.now-title{font-weight:900;letter-spacing:0;}
.score-card{background:var(--graphite-surface);box-shadow:none;}
.video-frame{border-color:var(--graphite-border);box-shadow:none;}
.video-frame::before{content:"";position:absolute;inset:-1px;z-index:1;pointer-events:none;border-radius:8px;box-shadow:none;}
.video-topline,
    .tool-launcher,
    .video-tools,
    .record-panel,
    .bitcom-controls{backdrop-filter:none;}
.bitcom-controls{border-color:var(--graphite-border);background:var(--graphite-surface);}
.control-icon,
    .tool-btn,
    .search-toggle,
    .browser-back,
    .drawer-close{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;}
.control-icon:hover,
    .tool-btn:hover,
    .search-toggle:hover,
    .browser-back:hover,
    .drawer-close:hover{transform:translateY(-1px);}
.metrics-grid{gap:12px;}
.metric{background:var(--graphite-surface);border-color:var(--graphite-border);}
.metric-icon{background:var(--graphite-surface);}
.watch-card{position:relative;overflow:hidden;border-color:var(--graphite-border);background:var(--graphite-surface);}
.watch-card::before{content:none;position:absolute;inset:0;pointer-events:none;background:transparent;opacity:.55;}
.watch-card.is-top{box-shadow:none;}
.popular-rank{box-shadow:none;}
.popular-views{background:var(--graphite-surface);border-color:var(--graphite-border);}
.browser-row{border-color:var(--graphite-border);box-shadow:none;}
.browser-row.active{box-shadow:none;}
.channel-logo,
    .browser-count{box-shadow:none;}
.mobile-drawer-toggle{border-radius:16px;background:var(--graphite-surface);box-shadow:none;}
@media (max-width:1120px){.nav{justify-content:center;}
.app-shell{gap:14px;}}
@media (max-width:760px){.header-inner{grid-template-columns:1fr;gap:8px;}
.display-controls{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr;margin-inline-start:0;}
.display-control{min-width:0;width:100%;}
.header-select{width:100%;max-width:none;}
.nav{order:2;justify-content:center;width:100%;}
.brand{order:1;justify-content:center;}
.lang-control{width:100%;justify-content:center;}
.logo{width:58px;height:44px;}
.nav a{min-width:0;min-height:40px;font-size:13px;}
.mobile-popular-toggle{left:8px;}
.mobile-channels-toggle{right:8px;}
.sports-panel{left:0;max-width:90vw;}
.control-panel{right:0;max-width:90vw;}
.panel-head{background:var(--graphite-surface);}
.video-frame{border-color:var(--graphite-border);}
.bitcom-controls{min-height:46px;padding:7px;}}
@media (max-width:460px){.app-shell{padding:8px;}
.hero-top{padding:14px 12px 8px;}
.player-box{padding:0 6px 8px;}
.metrics-grid{gap:8px;}
.experience-bar{grid-template-columns:1fr 1fr;}
.xp-btn{min-height:54px;padding:8px;}
.metric{min-height:70px;padding:10px;}}
.experience-dock .experience-bar{justify-content:center;align-items:center;}
.xp-btn{position:relative;min-height:46px;width:54px;padding:6px;grid-template-columns:1fr;justify-items:center;text-align:center;overflow:visible;}
.xp-btn > span:not(.xp-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.xp-icon{width:34px;height:34px;font-size:15px;color:var(--graphite-text);border-color:var(--graphite-border);background:var(--graphite-surface);}
.xp-btn::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,8px);min-width:max-content;max-width:220px;padding:7px 10px;border:1px solid var(--graphite-border);border-radius:8px;background:transparent;color:var(--graphite-text);box-shadow:none;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:40;}
.xp-btn:hover::after,
    .xp-btn:focus-visible::after{opacity:1;transform:translate(-50%,0);}
.xp-btn:hover .xp-icon,
    .xp-btn.active .xp-icon{border-color:var(--graphite-border);color:var(--graphite-text);box-shadow:none;}
.experience-dock{min-height:52px;padding:6px;border:1px solid var(--graphite-border);border-radius:8px;background:var(--graphite-surface);box-shadow:none;}
.experience-dock .experience-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;align-items:stretch;width:100%;min-width:0;}
.xp-btn{width:auto;min-width:0;min-height:38px;height:40px;grid-template-columns:auto minmax(0,1fr);justify-items:stretch;gap:7px;padding:5px 8px;text-align:right;overflow:visible;border-color:var(--graphite-border);background:var(--graphite-surface);}
.xp-btn > span:not(.xp-icon){position:static;width:auto;height:auto;overflow:hidden;clip:auto;white-space:normal;display:block;min-width:0;color:var(--graphite-muted);margin:0;}
.xp-btn strong{display:block;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp-btn > span:not(.xp-icon) > span{display:block;margin-top:2px;font-size:10px;line-height:1.05;color:var(--graphite-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp-icon{width:30px;height:30px;border-radius:8px;font-size:13px;background:var(--graphite-surface);align-self:center;}
.xp-btn:hover,
    .xp-btn.active{transform:translateY(-1px);border-color:var(--graphite-border);box-shadow:none;}
.xp-btn::after{bottom:calc(100% + 8px);}
@media (max-width:760px){.experience-dock{padding:6px 4px;}
.experience-dock .experience-bar{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--graphite-border) var(--graphite-surface);padding-bottom:2px;}
.experience-dock .experience-bar::-webkit-scrollbar{height:6px;}
.experience-dock .experience-bar::-webkit-scrollbar-track{background:var(--graphite-surface);}
.experience-dock .experience-bar::-webkit-scrollbar-thumb{background:var(--graphite-surface);border-radius:999px;}
.xp-btn{flex:0 0 116px;height:40px;}
.xp-btn > span:not(.xp-icon) > span{display:none;}}
.report-panel{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:125;width:min(520px,calc(100vw - 28px));}
@media (min-width:1121px){html,body{height:100%;overflow:hidden;}
.app-header{position:relative;}
.header-inner{min-height:70px;padding-top:9px;padding-bottom:9px;}
.app-shell{height:calc(var(--app-vh, 100vh) - 78px);min-height:0;padding:10px 18px 12px;overflow:hidden;}
.stage{min-height:0;grid-template-rows:minmax(0,1fr) 52px 62px;gap:8px;overflow:hidden;}
.hero{min-height:0;}
.hero-top{padding:10px 20px 6px;}
.now-kicker{margin-bottom:5px;}
.now-title{font-size:32px;}
.score-card{padding:8px;}
.player-box{padding:0 18px 9px;}
video{min-height:0;max-height:calc(var(--app-vh, 100vh) - 332px);}
.experience-dock{height:52px;}
.metrics-grid{height:62px;gap:8px;}
.metric{min-height:0;height:62px;padding:9px 11px;}
.metric-icon{width:36px;height:36px;font-size:12px;}
.metric strong{font-size:13px;}
.metric span{font-size:11px;margin-top:2px;}
.sticky-panel{top:0;}}
.nav .home-return{display:inline-flex;align-items:center;gap:7px;border-color:var(--graphite-border);background:var(--graphite-active);color:var(--graphite-text);font-weight:900;}
.nav .home-return span{font:900 18px/1 Arial,sans-serif;}
.nav .home-return:hover{border-color:var(--graphite-border);background:var(--graphite-active);color:var(--graphite-text);}
.sound-unlock{position:absolute;z-index:12;left:50%;bottom:76px;transform:translateX(-50%);min-height:42px;padding:0 18px;border:1px solid var(--graphite-border);border-radius:999px;background:var(--graphite-surface);color:var(--graphite-text);font:900 13px "Cairo",sans-serif;cursor:pointer;box-shadow:none;}
.sound-unlock:hover{background:var(--graphite-raised);}
.sound-unlock[hidden]{display:none!important;}
.app-header{--graphite-surface:var(--shell-surface);--graphite-raised:var(--shell-hover);--graphite-text:var(--shell-ink);--graphite-muted:var(--shell-muted);--graphite-border:var(--shell-border);--graphite-active:var(--shell-hover);color:var(--shell-ink)}
.nav a.active,.nav .home-return{background:var(--shell-active-bg);color:var(--shell-active-ink)}
.nav .home-return:hover{background:var(--shell-active-bg);color:var(--shell-active-ink)}
.video-frame{--graphite-surface:#05192b;--graphite-raised:#102e47;--graphite-text:#f0f8ff;--graphite-muted:#b0cde5;--graphite-border:#23516c;--graphite-active:#0c3a55;background:#000;color:var(--graphite-text)}
.metric{background:var(--metric-blue-surface);border-color:var(--metric-blue-border);color:var(--metric-blue-ink)}
.metric:nth-child(2){background:var(--metric-teal-surface);border-color:var(--metric-teal-border);color:var(--metric-teal-ink)}
.metric:nth-child(3){background:var(--metric-violet-surface);border-color:var(--metric-violet-border);color:var(--metric-violet-ink)}
.metric:nth-child(4){background:var(--metric-amber-surface);border-color:var(--metric-amber-border);color:var(--metric-amber-ink)}
.metric span{color:inherit}.metric-icon{color:inherit;background:transparent}

/* Premium light-theme gradient pass: richer surfaces without sacrificing readability. */
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 12% 15%,rgba(41,121,255,.12),transparent 28rem),
    radial-gradient(circle at 88% 72%,rgba(7,181,170,.10),transparent 30rem),
    linear-gradient(180deg,#eaf3ff 0%,#f6faff 52%,#e6f1ff 100%);
}
html[data-theme="light"] .app-header{
  background:linear-gradient(105deg,#061b34 0%,#092f53 58%,#07465d 100%);
  border-bottom-color:rgba(83,184,232,.32);
  box-shadow:0 12px 32px rgba(4,27,52,.25);
}
html[data-theme="light"] :is(.popular,.channels,.stage){
  background:linear-gradient(150deg,#ffffff 0%,#edf6ff 62%,#e4f1ff 100%);
  border-color:#afd1ef;
  box-shadow:0 16px 38px rgba(15,61,112,.13);
}
html[data-theme="light"] .hero{background:linear-gradient(145deg,#f7fbff 0%,#dcecff 100%)}
html[data-theme="light"] .video-frame{background:linear-gradient(145deg,#dcecff 0%,#eef7ff 55%,#d8ecf7 100%);border-color:#5a94c2;box-shadow:inset 0 0 50px rgba(25,89,145,.11)}
html[data-theme="light"] .player-state{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(221,239,255,.96));border-color:#73a8d2;box-shadow:0 12px 28px rgba(13,63,110,.16)}
html[data-theme="light"] :is(.category-row,.popular-item,.experience-dock,.metric){box-shadow:0 9px 22px rgba(20,68,120,.09)}
html[data-theme="light"] .category-row:nth-child(4n+1){background:linear-gradient(135deg,#eef6ff,#dcecff)}
html[data-theme="light"] .category-row:nth-child(4n+2){background:linear-gradient(135deg,#edfffb,#d8f7ef)}
html[data-theme="light"] .category-row:nth-child(4n+3){background:linear-gradient(135deg,#f6efff,#eadcff)}
html[data-theme="light"] .category-row:nth-child(4n+4){background:linear-gradient(135deg,#fff8e8,#ffeac5)}
html[data-theme="light"] body{background:radial-gradient(circle at 10% 14%,rgba(24,105,219,.22),transparent 30rem),radial-gradient(circle at 90% 68%,rgba(0,155,140,.16),transparent 32rem),linear-gradient(180deg,#dbe9fb 0%,#edf5ff 52%,#dcebf7 100%)}
html[data-theme="light"] :is(.popular,.channels,.stage){background:linear-gradient(150deg,#fafdff 0%,#dfedfb 66%,#d4e6f8 100%);border-color:#82b1dc;box-shadow:0 18px 42px rgba(12,58,112,.20)}
html[data-theme="light"] .metric{background:linear-gradient(135deg,#176fd1,#0b4ea4);border-color:#2e83de;color:#fff;box-shadow:0 12px 26px rgba(15,83,162,.25)}
html[data-theme="light"] .metric:nth-child(2){background:linear-gradient(135deg,#078b69,#046b54);border-color:#19a982;color:#fff}
html[data-theme="light"] .metric:nth-child(3){background:linear-gradient(135deg,#8b35e8,#6120b5);border-color:#9f55ed;color:#fff}
html[data-theme="light"] .metric:nth-child(4){background:linear-gradient(135deg,#f0a41d,#d87509);border-color:#f1b44b;color:#2e2105}
html[data-theme="light"] .metric-icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:inherit}
html[data-theme="light"] .category-row:nth-child(4n+1){background:linear-gradient(135deg,#d6eaff,#bcdcff);border-color:#88b9e9}
html[data-theme="light"] .category-row:nth-child(4n+2){background:linear-gradient(135deg,#d3f4e9,#afe7d5);border-color:#6bc7aa}
html[data-theme="light"] .category-row:nth-child(4n+3){background:linear-gradient(135deg,#ebdcff,#d5b8ff);border-color:#af82e7}
html[data-theme="light"] .category-row:nth-child(4n+4){background:linear-gradient(135deg,#ffedc4,#ffd68d);border-color:#e8ad42}