
/* Flutter TvScreen / TvController parity: TV route only; no other service affected. */
body[data-mx-route="tv"] .mx-flutter-tv { max-width: 820px; margin: 0 auto; padding: 0 18px 120px; font-family: Satoshi, system-ui, sans-serif; }
.mx-flutter-tv .mx-fl-tv-head { position:relative; }
.mx-flutter-tv .media-native-head { display:flex; align-items:center; gap:14px; padding:4px 0 14px; justify-content:center; }
.mx-flutter-tv .media-native-head > div { flex:1; text-align:center; min-width:0; }
.mx-flutter-tv .media-native-head h1 { font-size:28px; font-weight:900; margin:0; line-height:1.15; color:white; }
.mx-flutter-tv .media-native-head p { margin:3px 0 0; font-size:12px; font-weight:700; color:#a1acba; }
.mx-flutter-tv .media-back { z-index:1; flex:0 0 44px; }
.mx-flutter-tv .mx-fl-tv-header-actions { position:absolute; right:0; top:1px; display:flex; gap:6px; }
.mx-flutter-tv .mx-fl-tv-header-actions > * { display:grid; place-items:center; width:40px; height:40px; color:white; text-decoration:none; background:#141e2c; border:1px solid #283243; border-radius:50%; font-size:22px; }
.mx-flutter-tv .media-native-head > div { padding-right:70px; }
.mx-flutter-tv .mx-fl-tv-ad-slot { min-height:0; }
.mx-flutter-tv .media-category-intro { padding:6px 0 8px; }
.mx-flutter-tv .media-category-intro h2 { font-size:22px; font-weight:900; margin:0 0 5px; color:white; }
.mx-flutter-tv .media-category-intro p { margin:0; font-size:13px; font-weight:600; color:#9aa8ba; }
.mx-flutter-tv .mx-fl-tv-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:14px 0 20px; }
.mx-flutter-tv .mx-fl-tv-category { display:flex; flex-direction:column; text-align:left; min-width:0; min-height:168px; padding:14px; color:white; border-radius:22px; border:1px solid rgba(255,255,255,.09); background:#13202e; cursor:pointer; font-family:inherit; }
.mx-flutter-tv .mx-fl-tv-category-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:auto; }
.mx-flutter-tv .mx-fl-tv-category-icon { width:58px; height:58px; display:grid; place-items:center; flex-shrink:0; background:rgba(255,0,113,.10); border:1px solid rgba(255,0,113,.17); border-radius:16px; font-size:28px; overflow:hidden; }
.mx-flutter-tv .mx-fl-tv-category-icon img { width:100%; height:100%; object-fit:cover; }
.mx-flutter-tv .mx-fl-tv-chevron { width:40px; height:40px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:50%; font-size:27px; }
.mx-flutter-tv .mx-fl-tv-category strong { margin-top:8px; font-size:17px; font-weight:900; overflow-wrap:anywhere; }
.mx-flutter-tv .mx-fl-tv-category small { color:#98a6b5; font-size:12px; margin-top:6px; }
.mx-flutter-tv .mx-fl-tv-selected { display:flex; align-items:center; gap:12px; border-radius:18px; padding:14px; background:#13202e; border:1px solid rgba(255,255,255,.10); }
.mx-flutter-tv .mx-fl-tv-selected .mx-fl-tv-category-icon { width:48px; height:48px; font-size:24px; border-radius:14px; }
.mx-flutter-tv .mx-fl-tv-selected div { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mx-flutter-tv .mx-fl-tv-selected strong { color:white; font-size:17px; font-weight:900; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.mx-flutter-tv .mx-fl-tv-selected small { color:#9aa8ba; font-size:12px; }
.mx-flutter-tv .mx-fl-tv-selected button { border:0; background:none; color:#ff0071; font-weight:900; font-size:14px; cursor:pointer; }
.mx-flutter-tv .mx-fl-tv-list-heading { color:white; font-size:19px; font-weight:900; margin:18px 0 10px; }
.mx-flutter-tv .mx-fl-tv-search-wrap { display:flex; align-items:center; gap:8px; background:#172637; color:white; border-radius:16px; padding:9px 13px; }
.mx-flutter-tv .mx-fl-tv-search-wrap input { min-width:0; width:100%; font:inherit; border:0; background:transparent; color:white; outline:none; }
.mx-flutter-tv .mx-fl-tv-channel-list { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.mx-flutter-tv .mx-fl-tv-channel { display:flex; align-items:center; gap:12px; min-width:0; padding:12px; background:#13202e; border:1px solid rgba(255,255,255,.09); border-radius:18px; color:white; text-decoration:none; }
.mx-flutter-tv .mx-fl-tv-channel-art { flex:0 0 66px; width:66px; height:66px; display:grid; place-items:center; background:#253348; border-radius:14px; overflow:hidden; }
.mx-flutter-tv .mx-fl-tv-channel-art img { width:100%; height:100%; object-fit:cover; }
.mx-flutter-tv .mx-fl-tv-channel-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.mx-flutter-tv .mx-fl-tv-channel-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:800; }
.mx-flutter-tv .mx-fl-tv-channel-info small, .mx-flutter-tv .mx-fl-tv-channel-info span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:#9aa8ba; }
.mx-flutter-tv .mx-fl-tv-channel-play { color:#ff0071; margin-right:6px; font-size:20px; }
.mx-flutter-tv .mx-fl-tv-loading { text-align:center; padding:80px 10px; color:white; font-weight:800; font-size:19px; }
.mx-flutter-tv .mx-fl-tv-loading small { display:block; font-size:12px; margin-top:10px; color:#9aa8ba; }
@media(min-width:820px) { .mx-flutter-tv .mx-fl-tv-category-grid {max-width:620px; margin:auto;} }
@media(max-width:430px) { .mx-flutter-tv .mx-fl-tv-header-actions > * {width:34px;height:34px;} .mx-flutter-tv .media-native-head h1 {font-size:23px;} .mx-flutter-tv .media-native-head > div {padding-right:60px;} }

/* Exact Flutter TvScreen proportions from 1XtraApp/lib/screens/tv_screen.dart.
   Web desktop retains the Flutter phone-width composition, not giant site cards. */
html body[data-mx-route="tv"] { background: #030813; }
html body[data-mx-route="tv"] #page { max-width: 440px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
html body[data-mx-route="tv"] .mx-flutter-tv { max-width: 440px !important; width: 100%; box-sizing: border-box; padding: 0 18px 112px !important; }
html body[data-mx-route="tv"] .mx-flutter-tv .media-native-head { min-height: 70px; padding: 4px 0 12px; }
html body[data-mx-route="tv"] .mx-flutter-tv .media-native-head > div { padding-right: 70px; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category-grid { max-width: none; gap: 14px; margin: 0; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category { min-height: 168px; padding: 14px; background: #141a29; border-radius: 22px; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category-icon { border-color: rgba(255,0,113,.30); }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category-icon img[hidden], html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category-icon span[hidden] { display: none !important; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category strong { font-size: 17px; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-category small { font-size: 12px; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad-slot:empty { display: none; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad-slot { margin: 0 0 10px; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad { position: relative; display: block; width: 100%; height: 124px; overflow: hidden; border-radius: 16px; background: #141a29; border: 1px solid rgba(255,0,113,.36); color:white; text-decoration:none; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad::before { content:""; z-index:1; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.46),rgba(0,0,0,.06)); }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad img { width:100%; height:100%; object-fit:contain; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad .mx-fl-tv-ad-label { position:absolute; z-index:2; top:9px; left:12px; background:#ff0071; padding:4px 7px; border-radius:6px; font-size:8px; font-weight:900; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad strong { position:absolute; z-index:2; bottom:12px; left:12px; right:110px; font-size:17px; line-height:1.08; }
html body[data-mx-route="tv"] .mx-flutter-tv .mx-fl-tv-ad b { position:absolute; z-index:2; bottom:10px; right:10px; background:#ff0071; padding:8px; border-radius:8px; font-size:9px; }
/* TvScreen has precisely two service tabs: Live TV and More. */
html body[data-mx-route="tv"] #bottomNav.bottom-nav { position:fixed !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; bottom:env(safe-area-inset-bottom,0px) !important; width:min(100%,440px) !important; max-width:440px !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:1fr !important; align-items:center !important; gap:0 !important; background:#080f19 !important; border:1px solid #27323d !important; border-radius:30px 30px 0 0 !important; padding:8px 0 !important; height:76px !important; box-sizing:border-box !important; z-index:900 !important; }
html body[data-mx-route="tv"] #bottomNav.bottom-nav > a { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; grid-column:auto !important; width:100% !important; color:#929aab !important; text-decoration:none !important; font-size:12px !important; gap:3px !important; padding:4px !important; }
html body[data-mx-route="tv"] #bottomNav.bottom-nav > a.active { color:#ff0071 !important; }
html body[data-mx-route="tv"] #bottomNav.bottom-nav > a svg { height:23px !important; width:23px !important; fill:currentColor; }
html body[data-mx-route="tv"] #bottomNav.bottom-nav > a small { color:inherit !important; font-size:12px !important; font-weight:800 !important; }
html body[data-mx-route="tv"] #bottomNav.bottom-nav > a .flutter-nav-active { display:none !important; }
@media(max-width:440px) { html body[data-mx-route="tv"] .mx-flutter-tv .media-native-head h1 {font-size:25px;} }
html body[data-mx-route="tv"] .mx-fl-tv-category-icon { position:relative; }
html body[data-mx-route="tv"] .mx-fl-tv-category-icon .mx-fl-tv-icon-fallback { position:absolute; inset:0; display:grid; place-items:center; }
html body[data-mx-route="tv"] .mx-fl-tv-category-icon img { position:absolute; inset:0; z-index:1; background:#25192a; }
