/* Start TV / Viewer redesign • Presentation only. Application JS is untouched. */
:root {
  color-scheme: dark;
  --bg-dark: #070c16;
  --bg-card: #131d31;
  --bg-card-hover: #1b2942;
  --primary: #5c91ff;
  --primary-hover: #82aaff;
  --text-main: #f3f7ff;
  --text-muted: #9aabc7;
  --border: rgba(156,182,226,.16);
  --cyan: #46d8ed;
  --soft-white: rgba(255,255,255,.055);
  --shadow-card: 0 14px 44px rgba(0,0,0,.26);
}
* { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif; }
html { background: #070c16; }
body {
  background: radial-gradient(ellipse 70% 85% at 85% -15%, rgba(45,89,174,.19), transparent 80%),
              linear-gradient(145deg, #080d18 0%, #0b1222 52%, #070c16 100%);
  color: var(--text-main);
}
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, .card:focus-visible, input:focus-visible, .channel-item:focus-visible, #logo:focus-visible {
  outline: 2px solid #8db7ff;
  outline-offset: 3px;
}
button { border-radius: 11px; letter-spacing: .01em; transition: background-color .2s, box-shadow .2s, transform .2s; }
button:hover { box-shadow: 0 6px 20px rgba(66,115,230,.25); }
button:active { transform: scale(.98); }
header.topbar {
  position: relative;
  z-index: 10;
  min-height: 72px;
  padding: 13px clamp(18px,3.7vw,60px);
  background: rgba(9,15,28,.93);
  border-bottom: 1px solid rgba(148,177,221,.13);
  box-shadow: 0 10px 38px rgba(1,5,13,.18);
  gap: 12px;
}
.brand-icon {
  width: 43px; height: 43px; flex-shrink: 0;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(142deg, #71a8ff 0%, #416be1 70%, #2840a2 100%);
  box-shadow: 0 8px 28px rgba(58,107,240,.28), inset 0 1px 1px rgba(255,255,255,.28);
}
.brand-icon span { color:white; font-size: 19px; padding-right: 2px; }
header h1 {
  direction:ltr;
  color:#fff;
  font-size: 1.26rem;
  font-weight: 900;
  letter-spacing: -.055em;
  user-select:none;
  line-height:1.15;
}
header h1 span { color:#79a9ff; padding-left:3px; }
.header-title {
  display:block;
  margin-right:clamp(8px,2.2vw,36px);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  font-size:.85rem;
  color:#aab9d0;
}
#list-count {
  flex-shrink: 0;
  border-radius: 30px;
  background:rgba(91,145,255,.1);
  border:1px solid rgba(103,155,255,.21);
  padding:6px 10px;
  font-size:.76rem;
  color:#bdd2ff;
}
#list-count:empty { display:none; }
.header-caption { display:flex; align-items:center; gap:7px; color:#a1b2cd; font-size:.77rem; white-space:nowrap; margin-right:auto; }
.status-dot {
  position:relative;
  display:inline-block;
  width:7px; height:7px;
  background:#4de0bb;
  box-shadow:0 0 0 4px rgba(77,224,187,.09),0 0 13px rgba(77,224,187,.45);
  border-radius:50%; flex:none;
}
.back-btn {
  color:#dfe9fb;
  background:rgba(155,180,230,.1);
  border:1px solid rgba(147,173,225,.22);
  padding:9px 14px;
  font-weight:700;
  margin-right:6px;
}
.back-btn:hover { background:rgba(138,177,255,.2); }
main { position:relative; }
.page { padding:32px clamp(16px,3vw,52px) 55px; scrollbar-color: #314663 transparent; }
.page > .hero,
.page > .section-heading,
.page > .grid,
.page > .page-footnote { max-width: 1320px; margin-left:auto; margin-right:auto; }
.hero {
  width:100%; min-height:270px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(129,171,255,.18);
  border-radius:28px;
  padding:clamp(27px,4vw,60px) clamp(25px,5vw,70px);
  background:
    radial-gradient(circle at 15% 86%, rgba(45,224,243,.13), transparent 42%),
    radial-gradient(circle at 76% 5%, rgba(85,110,242,.26), transparent 43%),
    linear-gradient(115deg,#111f3b 0%,#111d39 45%,#101629 100%);
  box-shadow: 0 28px 75px rgba(0,3,18,.33), inset 0 1px rgba(255,255,255,.05);
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(90deg,transparent,black 90%);
}
.hero-content { position:relative; z-index:2; }
.hero-eyebrow, .overline {
  color:#7cb6ff;
  font-size:.76rem;
  letter-spacing:.035em;
  font-weight:800;
}
.hero-eyebrow { display:inline-flex; gap:9px; align-items:center; border:1px solid rgba(93,158,255,.27); background:rgba(65,122,219,.12); border-radius:30px; padding:7px 13px; }
.hero h2 { font-size:clamp(1.85rem,3.5vw,3.3rem); line-height:1.45; margin:18px 0 10px; letter-spacing:-.065em; font-weight:800; }
.hero h2 strong { font-weight:900; color: #80b8ff; background:linear-gradient(90deg,#a3d7ff,#76a4ff 65%,#70f0e7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:clamp(.83rem,1.1vw,.98rem); color:#c0cee6; max-width:540px; line-height:1.95; }
.hero-features { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:19px; }
.hero-features span { font-size:.72rem; padding:7px 11px; border:1px solid rgba(152,185,239,.15); border-radius:9px; background:rgba(255,255,255,.038); color:#a8bfdd; }
.hero-visual { width:34%; max-width:365px; min-width:225px; align-self:stretch; position:relative; display:flex; align-items:center; justify-content:center; pointer-events:none; margin-left:28px; }
.visual-glow { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; filter:blur(34px); background:rgba(66,127,250,.23); }
.visual-frame { position:relative; width:95%; aspect-ratio:1.46; transform:perspective(600px) rotateY(-12deg) rotateX(5deg) rotateZ(-3deg); padding:9px; border-radius:23px; background:linear-gradient(155deg,#2d406a,#151f36); border:1px solid #617db2; box-shadow:22px 29px 50px rgba(0,0,0,.39),inset 0 2px rgba(255,255,255,.13); }
.visual-screen { width:100%; height:100%; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; border-radius:16px; border:1px solid #39588e; background:radial-gradient(circle at center, #21407e,#111d38 65%,#081122 100%); direction:ltr; font-size:1.3rem; font-weight:900; letter-spacing:-.045em; }
.visual-screen b { color:#8eb6ff; }
.visual-play { background:linear-gradient(145deg,#71a6ff,#4370e6); width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 15px 35px rgba(50,112,255,.29); padding-left:4px; font-size:25px; }
.visual-tile { position:absolute; border:1px solid rgba(165,195,255,.3); border-radius:12px; color:#fff; background:rgba(26,44,78,.94); box-shadow: 0 8px 25px rgba(0,0,0,.35); font-size:.78rem; padding:10px 15px; font-weight:900; }
.tile-a { top:-15px; right:-21px; direction:ltr; }
.tile-a span { color:#ff6e85; margin-left:7px; }
.tile-b { bottom:-15px; left:-12px; color:#a5ccff; direction:ltr; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:42px; margin-bottom:21px; }
.section-heading h2 { margin:5px 0 3px; font-size:clamp(1.32rem,2.1vw,1.8rem); font-weight:900; letter-spacing:-.03em; }
.section-heading .sub { margin:0; color:#96a9c8; font-size:.85rem; }
.heading-decoration { display:grid; place-items:center; width:51px; height:51px; border-radius:15px; background:rgba(83,130,242,.12); border:1px solid rgba(106,149,238,.18); color:#91b7ff; font-size:1.7rem; }
.country-heading { margin-top:18px; background:linear-gradient(110deg,rgba(40,68,121,.31),rgba(23,35,57,.45)); padding:25px; border-radius:19px; border:1px solid var(--border); }
.country-heading .globe { font-size:2.3rem; }
.grid { grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px; }
.card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(152,177,228,.15);
  background:linear-gradient(155deg,#17233b,#101a2d);
  border-radius:18px;
  box-shadow: 0 8px 32px rgba(0,3,13,.18);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.card:hover { background:linear-gradient(155deg,#1b2c4a,#132137); transform:translateY(-6px); border-color:rgba(109,165,255,.56); box-shadow:var(--shadow-card); }
.card:active { transform: translateY(-1px); }
.card .thumb, .card .thumb-fallback { aspect-ratio: 1.55; }
.card .thumb { transition:transform .4s ease,filter .4s; }
.card:hover .thumb { transform:scale(1.045); filter:saturate(1.14); }
.card::after { content:'◂'; position:absolute; bottom:17px; left:18px; width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:rgba(103,155,255,.13); border:1px solid rgba(125,160,224,.16); color:#9ebfff; font-size:20px; transition:transform .2s; }
.card:hover::after { transform:translateX(-3px); background:rgba(81,135,241,.26); }
.card .thumb-fallback { background:#243757; }
.card .body { position:relative; z-index:2; padding:17px 18px 19px 40px; text-align:right; min-height:83px; }
.card .title { font-size:1rem; line-height:1.5; font-weight:800; }
.card .count { font-size:.75rem; color:#91a9c8; margin-top:3px; }
.card.empty { opacity:.7; }
.card.small .thumb,.card.small .thumb-fallback { aspect-ratio:1.72; }
.card.small .title { font-size:.96rem; }
.page-footnote { text-align:center; font-size:.73rem; color:#637897; margin-top:34px; }
/* Channel screen */
#view-channels { background:#080d19; }
.sidebar {
  width:clamp(326px,32vw,460px);
  flex-shrink:0;
  background:linear-gradient(175deg,#131e33 0%,#10192b 100%);
  border-left:1px solid rgba(130,155,199,.17);
}
.controls { padding:18px 18px 16px; background:rgba(24,37,61,.56); border-bottom:1px solid var(--border); }
.sidebar-heading { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.sidebar-icon { display:grid; place-items:center; width:37px; height:37px; background:rgba(95,142,242,.14); border:1px solid rgba(111,157,239,.15); border-radius:11px; color:#8cafff; font-size:1.25rem; }
.sidebar-heading strong { display:block; font-size:.93rem; }
.sidebar-heading small { display:block; margin-top:2px; color:#8ca1c2; font-size:.72rem; }
.search-wrap { position:relative; }
.search-wrap > span { position:absolute; top:50%; transform:translateY(-51%); right:14px; color:#9eb4d7; font-size:23px; pointer-events:none; }
.search-wrap input[type="text"] {
  padding:12px 42px 12px 13px;
  font-size:.86rem;
  background:#0b1425;
  border:1px solid rgba(157,182,227,.18);
  border-radius:13px;
  min-height:44px;
  transition:border-color .2s,box-shadow .2s;
}
.search-wrap input[type="text"]:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(86,134,240,.12); }
.channel-list { padding:15px; gap:10px; scrollbar-color:#334760 transparent; }
.channel-item {
  background:#0d182b;
  border-color:rgba(161,190,239,.11);
  border-radius:13px;
  transition:background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.channel-item:hover { background:#182947; border-color:#749bdb; transform:translateY(-2px); }
.channel-item.active { background:linear-gradient(165deg,#1d3462,#152540); border-color:#79aeff; box-shadow:0 0 0 2px rgba(73,123,228,.2),inset 0 0 16px rgba(66,122,255,.09); }
.channel-item.active::before { content:''; position:absolute; top:6px; left:6px; width:6px; height:6px; border-radius:50%; background:#62dcca; box-shadow:0 0 9px rgba(98,220,202,.7); z-index:2; }
.channel-item .ci { padding:8px 6px; gap:7px; }
.channel-item .logo { margin:3px 3px 0; }
.channel-item .fallback { font-size:1.5rem; background:#1d3559; }
.channel-name { font-size:.69rem; height:2.5em; color:#dae5f9; font-weight:700; }
.channel-list .status { padding:22px 8px; font-size:.86rem; }
.sidebar-footer { padding:12px 18px; display:flex; gap:9px; align-items:center; color:#8499bb; font-size:.72rem; border-top:1px solid var(--border); }
.sidebar-footer .status-dot { width:6px; height:6px; }
.player-area {
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vw,36px);
  background:
    radial-gradient(circle at 50% 20%,rgba(43,80,146,.14),transparent 54%),
    linear-gradient(160deg,#070c16,#0b1221 75%);
}
.player-heading { width:100%; max-width:990px; display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; gap:10px; }
.player-heading-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.player-heading-title strong { font-size:1.12rem; font-weight:850; }
.player-heading-title small { width:100%; color:#8297b7; font-size:.76rem; margin-top:-4px; }
.on-air-indicator { display:inline-flex; align-items:center; gap:7px; font-size:.65rem; font-weight:900; direction:ltr; padding:7px 9px; color:#ff9daf; background:rgba(244,64,102,.11); border:1px solid rgba(255,105,138,.19); border-radius:7px; }
.on-air-indicator i { display:block; width:6px; height:6px; background:#ff6780; border-radius:50%; box-shadow:0 0 10px #f26a7b; }
.player-mini-mark { direction:ltr; color:#536b90; font-size:.74rem; font-weight:900; letter-spacing:.16em; }
.player-shell { width:100%; max-width:990px; padding:6px; border-radius:21px; background:linear-gradient(140deg,rgba(118,157,226,.34),rgba(22,33,53,.63) 26%,rgba(24,43,75,.6)); border:1px solid rgba(144,181,240,.21); box-shadow:0 24px 70px rgba(0,0,0,.48); }
#player-container { max-width:none; border-radius:15px; box-shadow:none; background:#02050d; }
.now-playing { width:100%; max-width:990px; text-align:right; padding:13px 3px 0; margin-top:4px; color:#ccd8ea; font-size:.88rem; font-weight:700; min-height:38px; }
.quality-bar { max-width:990px; margin-top:8px; justify-content:flex-start; gap:8px; }
.quality-bar .q-label { color:#8298b9; font-size:.77rem; }
.quality-btn { background:#17243a; border:1px solid rgba(125,156,212,.2); border-radius:10px; color:#cfdef6; padding:7px 12px; font-weight:650; }
.quality-btn:hover { background:#253b60; }
.quality-btn.active { background:linear-gradient(145deg,#4173dd,#628ffc); border-color:#84acff; color:white; }
.player-tip { width:100%; max-width:990px; margin-top:16px; font-size:.73rem; color:#617795; }
@media (max-width:1150px) {
  .hero-visual { min-width:195px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(187px,1fr)); }
  .sidebar { width:370px; }
}
@media (max-width:900px) {
  .header-caption { display:none; }
  .hero { padding:33px; }
  .hero-visual { min-width:170px; width:30%; margin-left:4px; }
  .sidebar { width:330px; }
  .channel-list { padding:10px; gap:7px; }
}
@media (max-width:768px) {
  header.topbar { min-height:62px; padding:10px 14px; gap:9px; }
  .brand-icon { width:37px; height:37px; border-radius:12px; }
  .brand-icon span { font-size:16px; }
  header h1 { font-size:1.1rem; }
  .header-title { margin-right:2px; font-size:.76rem; }
  #list-count { font-size:.69rem; padding:5px 8px; }
  .back-btn { margin-right:0; padding:8px 10px; font-size:.73rem; }
  .page { padding:14px 12px 35px; }
  .hero { min-height:250px; padding:25px 23px; border-radius:21px; }
  .hero h2 { margin-top:14px; line-height:1.45; font-size:clamp(1.72rem,5vw,2.3rem); }
  .hero p { font-size:.84rem; }
  .hero-visual { min-width:135px; width:30%; opacity:.8; }
  .visual-screen { font-size:.8rem; }
  .visual-play { height:40px; width:40px; font-size:17px; }
  .visual-tile { font-size:.56rem; padding:5px; }
  .section-heading { margin-top:27px; margin-bottom:15px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:11px; }
  .card { border-radius:14px; }
  .card .body { min-height:71px; padding:12px 11px 13px 24px; }
  .card .title { font-size:.87rem; }
  .card .count { font-size:.7rem; }
  .card::after { width:20px; height:20px; left:9px; bottom:15px; font-size:15px; border-radius:6px; }
  .country-heading { padding:20px; margin-top:6px; }
  .sidebar { width:100%; min-height:0; flex:1; border-left:0; border-top:1px solid var(--border); }
  .controls { padding:11px 12px; }
  .sidebar-heading { margin-bottom:9px; }
  .sidebar-icon { width:30px;height:30px;font-size:1rem; }
  .sidebar-footer { display:none; }
  .channel-list { padding:10px; gap:8px; }
  .channel-name { font-size:.67rem; }
  .player-area { padding:12px 12px 10px; }
  .player-heading { margin-bottom:9px; }
  .player-heading-title strong { font-size:.9rem; }
  .player-heading-title small { display:none; }
  .on-air-indicator { font-size:.58rem; }
  .player-shell { padding:3px; border-radius:12px; }
  #player-container { border-radius:9px; }
  .now-playing { padding:7px 2px 0; min-height:0; font-size:.8rem; margin-top:0; }
  .quality-bar { margin-top:5px; gap:6px; }
  .quality-btn { font-size:.7rem; padding:6px 9px; }
  .player-tip { display:none; }
}
@media (max-width:520px) {
  .hero { min-height:260px; }
  .hero-content { max-width:100%; }
  .hero-visual { position:absolute; left:-66px; top:13px; height:185px; width:185px; min-width:0; opacity:.15; }
  .hero p { max-width:330px; }
  .hero-features { gap:6px; }
  .hero-features span { padding:5px 8px; font-size:.65rem; }
  .heading-decoration { width:40px; height:40px; border-radius:12px; font-size:1.4rem; }
  .section-heading .sub { font-size:.78rem; }
}
@media (max-width:360px) {
  .brand-icon { display:none; }
  header h1 { font-size:1rem; }
  .grid { gap:8px; }
  .card .title { font-size:.78rem; }
  .channel-list { gap:5px; padding:6px; }
  .channel-name { font-size:.58rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}