/* SKY IPTV - Samsung Tizen TV
   Fixed 1920x1080 layout. TV safe area: 60px margin on every edge.

   COMPATIBILITY: the Tizen 6.0 browser engine is Chromium 76.
   - flexbox `gap` (Chrome 84+) is NOT supported -> use margins
   - the `inset` shorthand (Chrome 87+) is NOT supported -> write
     left/top/right/bottom separately
   Do not use either feature in this file. */

* { margin:0; padding:0; box-sizing:border-box; }

html {
  width:100%; height:100%; overflow:hidden;
  background:#03050c; color:#eef2fb;
}
html, body {
  overflow:hidden;
  background:#04060d; color:#eef2fb;
  font-family:"Segoe UI", "Samsung One", "SamsungOne", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select:none; user-select:none;
}
body { width:1920px; height:1080px; }

/* fixed 1920x1080 stage: on a TV it is the whole screen, on a desktop it is
   scaled to fit the window by js/desktop.js */
#stage { position:absolute; left:0; top:0; width:1920px; height:1080px; }

/* the background turns transparent during playback so the AVPlay hardware layer shows */
html.playing, html.playing body, html.playing #app, html.playing #stage { background:transparent !important; }

/* The video object stays in the DOM and visible at all times: on some firmware the
   AVPlay plugin fails to initialise if it was hidden. Outside playback the opaque UI
   simply covers it. */
/* WARNING: never give this element an opaque background.
   AVPlay draws the picture on the hardware plane BELOW the browser layer, so if the
   browser layer is not transparent there, no video is visible (black screen, audio
   still plays).

   The element does not need to cover the screen either - setDisplayRect defines the
   video area. Some firmware paints a placeholder graphic for this object in the
   browser layer (a stubborn oval in the middle of the screen), so it is kept at 1x1
   and invisible. */
#av-player {
  position:absolute; left:0; top:0; width:1px; height:1px;
  background:transparent; opacity:0; z-index:0;
}
#av-fallback {
  position:absolute; left:0; top:0; width:1920px; height:1080px;
  background:#000; z-index:0; display:none;
}
html.fallback #av-fallback { display:block; }
html.fallback #av-player { display:none; }

#app { position:absolute; left:0; top:0; width:1920px; height:1080px; z-index:2;
  background:#07090f; }

/* ---- channel list while the stream plays ----
   The video keeps playing full screen; the list sits in a panel on the left whose
   right edge fades into the picture. Because the video lives on the hardware layer,
   anything opaque drawn on top hides it - hence the panel only covers the left side. */
#pip-mask, #pip-frame { display:none; }
html.pip #pip-mask { display:block; }
/* the mask must stay BELOW the screens; without z-index:0 it covers its positioned siblings */
#pip-mask { position:absolute; left:0; top:0; width:1920px; height:1080px; z-index:0; }
#pip-mask i { position:absolute; display:none; }
/* The panel is semi-transparent so the stream stays visible behind it.
   On Tizen the browser layer alpha-blends with the video plane, so rgba
   backgrounds do not hide the picture completely. */
#pip-mask i.l { display:block; left:0; top:0; width:1300px; height:1080px;
  background:linear-gradient(90deg, rgba(7,9,15,.86) 0%, rgba(7,9,15,.84) 70%,
                                     rgba(7,9,15,.62) 90%, rgba(7,9,15,0) 100%); }

/* With the stream running behind it, the elements inside the panel are
   translucent too and text stays readable thanks to the shadow. */
html.pip #topbar { background:linear-gradient(180deg,rgba(7,9,15,.72),rgba(7,9,15,.30)); }
html.pip .litem { background:rgba(16,22,35,.55); }
html.pip .litem.focus { background:rgba(34,48,77,.92); }
html.pip .card { background:rgba(17,23,38,.55); }
html.pip .gchip { background:rgba(19,26,43,.62); }
html.pip .gchip.active { background:rgba(27,39,64,.78); }
html.pip .gchip.focus { background:rgba(42,58,92,.95); }
html.pip .tab.active { background:rgba(24,33,53,.75); }
html.pip .litem .lname,
html.pip .card .cname,
html.pip .gchip,
html.pip #content-head h2,
html.pip .tab { text-shadow:0 2px 6px rgba(0,0,0,.9); }
html.pip #app { background:transparent; }
html.pip #scr-browse { background:transparent; }
/* content, top bar and category strip narrow to the left; the right side shows the stream */
html.pip #content { width:1240px; }
html.pip #groupbar { width:1240px; }
html.pip #topbar { width:1240px; }
html.pip #hintbar { display:none; }

/* search and episode screens narrow the same way as the browse screen */
html.pip #search-head { width:1240px; }
html.pip #search-results { width:420px; }
html.pip .sr .sr-body { width:280px; }
html.pip #ep-head { width:1240px; }
html.pip #episode-list { width:768px; }
html.pip .ep .ep-t { width:520px; }

/* the info line stays inside the panel instead of spilling over the video */
html.pip #pip-hint { left:60px; top:950px; width:1120px; }
html.pip #pip-hint .pip-now { font-size:24px; color:#cdd6e6; }

.screen { position:absolute; left:0; top:0; right:0; bottom:0; display:none; }
.screen.visible { display:block; }
.hidden { display:none !important; }
.muted { color:#8b95a9; }

/* ---------------- brand ---------------- */
.brand {
  font-size:64px; font-weight:800; letter-spacing:4px;
  background:linear-gradient(100deg,#7cc4ff 0%,#c9a6ff 60%,#ff9ecb 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand span { opacity:.65; margin-left:.28em; }
.brand.small { font-size:30px; letter-spacing:2px; }

/* ---------------- boot ---------------- */
#scr-boot { background:radial-gradient(1200px 700px at 50% 35%, #16203a 0%, #07090f 70%); }
.boot-box { position:absolute; left:360px; top:340px; width:1200px; text-align:center; }
.boot-status { margin-top:28px; font-size:26px; color:#b6c0d4; }
.boot-bar { margin:26px auto 0; width:560px; height:6px; border-radius:6px; background:#1b2334; overflow:hidden; }
.boot-bar i { display:block; height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,#5aa9ff,#c9a6ff); transition:width .25s ease; }
.boot-hint { margin-top:20px; font-size:20px; color:#6b768c; word-break:break-all; }

/* ---------------- setup ---------------- */
#scr-setup { background:radial-gradient(1100px 700px at 30% 30%, #16203a 0%, #07090f 70%); }
.setup-box { position:absolute; left:160px; top:180px; width:1200px; }
.setup-box h1 { font-size:52px; font-weight:700; margin:26px 0 10px; }
.setup-box p { font-size:24px; max-width:900px; line-height:1.5; }
.field { margin-top:44px; padding:22px 28px; border-radius:16px; background:#111726;
  border:3px solid transparent; }
.field label { display:block; font-size:19px; letter-spacing:1px; color:#8b95a9; text-transform:uppercase; }
.field-value { margin-top:10px; font-size:28px; word-break:break-all; line-height:1.35; }
.setup-actions { margin-top:36px; }
.btn { display:inline-block; padding:20px 40px; margin-right:20px; border-radius:14px;
  border:3px solid transparent; background:#141b2c; color:#e9edf5; font-size:26px; font-weight:600; }
.btn.primary { background:linear-gradient(100deg,#3f7ddb,#7a5cd6); }
.field.focus, .btn.focus { border-color:#ffffff; box-shadow:0 0 0 6px rgba(124,196,255,.25); }

/* ---------------- top bar ---------------- */
#topbar { position:absolute; left:0; top:0; width:1920px; height:118px;
  padding:0 60px; white-space:nowrap;
  background:linear-gradient(180deg,rgba(7,9,15,.98),rgba(7,9,15,.72)); }
#topbar .brand.small { display:inline-block; vertical-align:middle; line-height:118px; margin-right:44px; }
#tabs { display:inline-block; vertical-align:middle; }
.tab { display:inline-block; padding:12px 28px; margin-right:14px; border-radius:12px;
  font-size:27px; color:#96a0b5; font-weight:600; border:3px solid transparent; }
.tab.active { color:#fff; background:#182135; }
.tab.focus { border-color:#fff; color:#fff; background:#22304d; }
.top-right { position:absolute; right:60px; top:26px; }
.top-btn { display:inline-block; vertical-align:middle; padding:12px 26px; margin-right:24px;
  border-radius:12px; background:#182135; font-size:24px; border:3px solid transparent; }
.top-btn.focus { border-color:#fff; background:#22304d; }
.clock { display:inline-block; vertical-align:middle; font-size:26px; color:#aab4c8; }

/* ---------------- category strip (horizontal, wrapping) ---------------- */
#groupbar { position:absolute; left:0; top:118px; width:1920px; height:90px;
  padding:0 60px; overflow:hidden; }
#group-strip { position:relative; height:76px; white-space:nowrap; }
.gchip { position:absolute; top:0; height:70px; padding:0 26px; border-radius:14px;
  background:#131a2b; color:#aab4c8; font-size:25px; border:3px solid transparent;
  line-height:64px; white-space:nowrap; }
.gchip .gcount { margin-left:12px; color:#6b768c; font-size:20px; }
.gchip.active { background:#1b2740; color:#fff; }
.gchip.focus { border-color:#fff; background:#2a3a5c; color:#fff; }

/* ---------------- body ---------------- */
#body { position:absolute; left:0; top:208px; width:1920px; height:802px; }
.scroller { overflow:hidden; position:relative; }
#content { position:absolute; left:0; top:0; width:1920px; height:802px; padding:0 60px; }
#content-head { padding:2px 4px 12px; white-space:nowrap; }
#content-head h2 { display:inline-block; font-size:30px; font-weight:700; margin-right:16px; }
#content-count { display:inline-block; font-size:21px; }
#grid { height:740px; }

/* list view (live channels and favourites) */
.lrow { position:absolute; left:0; width:100%; white-space:nowrap; }
.litem { display:inline-block; vertical-align:top; margin-right:20px; padding:0 16px;
  border-radius:12px; background:#101623; border:3px solid transparent; overflow:hidden;
  white-space:nowrap; position:relative; }
.litem .lth { display:inline-block; vertical-align:middle; width:78px; height:48px;
  margin-right:16px; background:#0a0f1c; border-radius:8px; overflow:hidden; text-align:center;
  line-height:48px; }
.litem .lth img { max-width:100%; max-height:100%; vertical-align:middle; }
.litem .lth .initials { font-size:20px; font-weight:700; color:#3f4c68; }
.litem .lname { display:inline-block; vertical-align:middle; font-size:24px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.litem .lstar { display:inline-block; vertical-align:middle; margin-left:10px;
  color:#ffd166; font-size:22px; }
.litem.focus { border-color:#fff; background:#22304d; }

/* poster grid (movies and series) */
.row { position:absolute; left:0; width:100%; white-space:nowrap; }
.card { display:inline-block; vertical-align:top; margin-right:24px; border-radius:16px;
  background:#111726; border:3px solid transparent; overflow:hidden; position:relative;
  white-space:normal; }
.card.focus { border-color:#fff; box-shadow:0 14px 40px rgba(0,0,0,.55); }
.card .thumb { width:100%; background:#0c1120; overflow:hidden; text-align:center; }
.card .thumb img { max-width:100%; max-height:100%; }
.card .thumb.poster img { width:100%; height:100%; }
.card .initials { font-size:44px; font-weight:800; color:#3f4c68; }
.card .cname { padding:12px 14px; font-size:21px; line-height:1.25; height:74px; overflow:hidden; }
.card.focus .cname { color:#fff; }
.card .fav { position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#ffd166; font-size:22px; text-align:center; line-height:36px; }

/* number of alternate streams available for this channel */
.card .multi, .litem .multi { position:absolute; right:12px; top:8px; padding:2px 12px;
  border-radius:12px; background:#e91e63; color:#fff; font-size:17px; font-weight:700;
  z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.card .multi { right:54px; }

/* 4K availability */
.litem .tag4k { display:inline-block; vertical-align:middle; margin-left:10px;
  padding:1px 10px; border-radius:8px; background:#1565c0; color:#fff;
  font-size:15px; font-weight:700; }
.card .tag4k { position:absolute; left:12px; top:12px; padding:2px 12px; border-radius:8px;
  background:#1565c0; color:#fff; font-size:16px; font-weight:700; z-index:2; }

.empty { position:absolute; left:700px; top:300px; font-size:28px; color:#6b768c; }

/* info line below the video area */
#pip-hint { position:absolute; left:1220px; top:600px; width:640px; z-index:4; display:none; }
html.pip #pip-hint { display:block; }
#pip-hint .pip-now { display:block; font-size:26px; font-weight:600; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pip-hint .pip-keys { display:block; margin-top:10px; font-size:19px; color:#8b95a9; white-space:nowrap; }

/* ---------------- hint bar ---------------- */
#hintbar { position:absolute; left:0; bottom:0; width:1920px; height:70px;
  padding:0 60px; line-height:70px; font-size:20px; color:#8b95a9; white-space:nowrap;
  background:linear-gradient(0deg,rgba(7,9,15,.98),rgba(7,9,15,0)); }
#hintbar span { display:inline-block; margin-right:28px; white-space:nowrap; }
.key { display:inline-block; min-width:34px; padding:2px 10px; margin-right:8px; border-radius:6px;
  background:#222c42; color:#dbe3f2; font-style:normal; font-size:19px; text-align:center;
  line-height:26px; }
.key.c-red { background:#c0392b; color:#fff; } .key.c-green { background:#27883f; color:#fff; }
.key.c-yellow { background:#c9a227; color:#111; } .key.c-blue { background:#2b6cc4; color:#fff; }

/* ---------------- settings ---------------- */
#scr-settings { background:radial-gradient(1100px 700px at 30% 30%, #16203a 0%, #07090f 70%); }
#settings-box { position:absolute; left:160px; top:150px; width:1300px; }
#settings-box h1 { font-size:52px; font-weight:700; margin-bottom:30px; }
#settings-list { position:relative; }
.srow { padding:0 28px; margin-bottom:14px; border-radius:14px; background:#111726;
  border:3px solid transparent; height:88px; line-height:82px; white-space:nowrap; overflow:hidden; }
.srow .sname { display:inline-block; width:620px; font-size:28px; vertical-align:middle; }
.srow .sval { display:inline-block; width:560px; font-size:26px; color:#8fb4e6;
  vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srow.focus { border-color:#fff; background:#22304d; }
.srow.info { background:transparent; color:#8b95a9; height:60px; line-height:60px; }
#settings-hint { margin-top:24px; font-size:22px; }

/* ---------------- search ---------------- */
#scr-search { background:#07090f; }
#search-head { padding:52px 60px 18px; }
.search-input { height:84px; border-radius:14px; background:#111726; padding:0 28px;
  font-size:36px; line-height:84px; overflow:hidden; white-space:nowrap; }
.caret { display:inline-block; width:3px; height:42px; background:#7cc4ff; margin-left:4px;
  vertical-align:middle; }
#search-info { padding:14px 4px; font-size:22px; }
#search-body { position:absolute; left:0; top:230px; width:1920px; height:850px; padding:0 60px; }
#keyboard { position:absolute; left:60px; top:0; width:700px; }
.kbrow { margin-bottom:12px; white-space:nowrap; }
.kb { display:inline-block; width:70px; height:78px; margin-right:8px; border-radius:12px;
  background:#141b2c; font-size:30px; text-align:center; line-height:72px;
  border:3px solid transparent; }
.kb.wide { width:auto; min-width:150px; padding:0 18px; font-size:24px; }
.kb.focus { border-color:#fff; background:#2a3a5c; }
#search-results { position:absolute; left:800px; top:0; width:1060px; height:780px; }
.sr { padding:0 18px; border-radius:12px; border:3px solid transparent; white-space:nowrap; }
.sr .sr-th { display:inline-block; vertical-align:middle; width:96px; height:60px;
  margin-right:20px; border-radius:8px; background:#0c1120; overflow:hidden; text-align:center;
  line-height:60px; }
.sr .sr-th img { max-width:100%; max-height:100%; vertical-align:middle; }
.sr .sr-body { display:inline-block; vertical-align:middle; width:860px; }
.sr .sr-name { font-size:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr .sr-meta { font-size:19px; color:#7d879c; }
.sr.focus { border-color:#fff; background:#1b2740; }

/* ---------------- episodes ---------------- */
#scr-episodes { background:#07090f; }
#ep-head { padding:56px 60px 18px; }
#ep-head h2 { font-size:44px; }
#ep-body { position:absolute; left:0; top:170px; width:1920px; height:880px; padding:0 60px; }
#season-list { position:absolute; left:60px; top:0; width:320px; height:820px; }
#episode-list { position:absolute; left:412px; top:0; width:1448px; height:820px; }
.season { padding:18px 20px; margin-bottom:10px; border-radius:12px; font-size:26px;
  color:#b8c1d4; border:3px solid transparent; }
.season.active { background:#151d2f; color:#fff; }
.season.focus { border-color:#fff; background:#22304d; color:#fff; }
.ep { padding:0 22px; border-radius:12px; font-size:26px; border:3px solid transparent;
  white-space:nowrap; overflow:hidden; }
.ep .ep-n { display:inline-block; vertical-align:middle; color:#7cc4ff; font-weight:700; width:110px; }
.ep .ep-t { display:inline-block; vertical-align:middle; width:1000px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ep .ep-meta { display:inline-block; vertical-align:middle; margin-left:20px;
  font-size:20px; color:#8b95a9; }
.ep.focus { border-color:#fff; background:#1b2740; }
.ep.watched .ep-t { color:#7d879c; }

/* ---------------- player ---------------- */
#scr-player { background:transparent; }
/* In browser/WebView playback the video lives in the DOM, BELOW the UI layer
   (#app z-index 2 > #av-fallback z-index 0). While the stream is connecting
   the player screen stays opaque black so the page behind the transparent app
   never flashes. Once the <video> actually renders frames (html.stream-live)
   the screen MUST turn transparent - otherwise the opaque screen covers the
   picture and only audio is heard over a black screen (the Fire Stick bug). */
html.fallback #scr-player { background:#000; }
html.fallback.stream-live #scr-player { background:transparent; }

#subtitle-layer { position:absolute; left:0; right:0; bottom:120px; text-align:center;
  padding:0 220px; }
#subtitle-layer.raised { bottom:290px; }
/* No background box, text only: readability comes from the shadow. */
#subtitle-text { display:none; font-size:44px; line-height:1.3; font-weight:600; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,1);
  padding:0; background:none; }
#subtitle-layer.s-small #subtitle-text { font-size:34px; }
#subtitle-layer.s-large #subtitle-text { font-size:56px; }

.fade { opacity:0; transition:opacity .22s ease; }
.fade.show { opacity:1; }

#player-top { position:absolute; left:0; top:0; width:1920px; padding:44px 60px 90px;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0)); }
.pt-title { font-size:44px; font-weight:700; max-width:1500px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-sub { font-size:24px; color:#b6c0d4; margin-top:8px; max-width:1500px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#controls { position:absolute; left:0; bottom:0; width:1920px; padding:120px 60px 44px;
  background:linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%); }
.seek-row { position:relative; height:40px; }
.seek-row .t { position:absolute; top:6px; font-size:24px; color:#cdd6e6; }
.seek-row .t.left { left:0; }
.seek-row .t.right { right:0; text-align:right; }
.seek { position:absolute; left:130px; right:130px; top:16px; height:8px; border-radius:8px;
  background:rgba(255,255,255,.22); }
.seek i { position:absolute; left:0; top:0; height:100%; width:0%; border-radius:8px;
  background:linear-gradient(90deg,#5aa9ff,#c9a6ff); }
.seek b { position:absolute; top:50%; left:0%; width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.6); }
#seek-row.focus .seek { height:12px; }
#seek-row.focus .seek b { width:28px; height:28px; margin:-14px 0 0 -14px; }

.ctl-row { margin-top:26px; white-space:nowrap; }
.ctl { display:inline-flex; align-items:center; justify-content:center;
  height:76px; min-width:76px; padding:0 20px; margin-right:16px;
  border-radius:18px; background:rgba(24,33,53,.9); border:3px solid transparent;
  color:#dbe3f2; vertical-align:middle; }
.ctl svg { width:34px; height:34px; display:block; }
.ctl .ctl-label { margin-left:14px; font-size:24px; white-space:nowrap; }
.ctl.focus { border-color:#fff; background:rgba(46,66,105,.96); color:#fff; }
.ctl.on { color:#7cc4ff; }
.ctl.on.focus { color:#bfe0ff; }

/* offset from the current position while scrubbing */
.seek u { position:absolute; bottom:26px; transform:translateX(-50%); font-style:normal;
  font-size:26px; font-weight:700; color:#fff; text-decoration:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9); }

#track-menu { position:absolute; right:60px; bottom:250px; width:560px; max-height:620px;
  background:rgba(12,17,30,.97); border-radius:18px; padding:22px; }
.tm-head { font-size:28px; font-weight:700; padding:6px 12px 16px; }
.tm-list { position:relative; height:518px; overflow:hidden; }
.tm-head .tm-count { color:#7cc4ff; font-size:22px; font-weight:400; }
.tm { padding:0 18px; border-radius:12px; font-size:26px; line-height:58px;
  border:3px solid transparent; white-space:nowrap; overflow:hidden; }
.tm .tm-tag { float:right; color:#7cc4ff; font-size:22px; }
.tm.focus { border-color:#fff; background:#22304d; }

#spinner { position:absolute; left:660px; top:430px; width:600px; text-align:center; }
#spinner i { display:block; width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
  border:6px solid rgba(255,255,255,.18); border-top-color:#7cc4ff; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#spinner span { display:block; font-size:26px; color:#cdd6e6; word-break:break-all; }

/* subtitle download progress: a small corner note that does not cover the picture */
#sub-status { position:absolute; right:60px; top:44px; padding:10px 20px; border-radius:10px;
  background:rgba(0,0,0,.7); font-size:22px; color:#cdd6e6; }

#toast { position:absolute; left:660px; bottom:340px; width:600px; text-align:center; }
#toast span { display:inline-block; background:rgba(12,17,30,.95); padding:18px 32px;
  border-radius:14px; font-size:26px; }

/* diagnostic log overlay */
#debug-log { position:absolute; left:60px; top:200px; width:1500px; max-height:560px;
  overflow:hidden; background:rgba(0,0,0,.82); border-radius:12px; padding:18px 22px;
  font-family:Consolas, "Courier New", monospace; font-size:19px; line-height:1.45;
  color:#9fe6a0; z-index:60; word-break:break-all; }

/* ---------------- modal ---------------- */
#modal { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(3,5,10,.85); z-index:50; }
.modal-box { position:absolute; left:410px; top:180px; width:1100px;
  background:#0e1524; border-radius:20px; padding:44px; }
.modal-title { font-size:36px; font-weight:700; }
.modal-text { font-size:23px; color:#b6c0d4; margin-top:16px; line-height:1.5; word-break:break-all; }
.modal-actions { margin-top:34px; }

/* ==================================================================
   SKY GLASS THEME
   An authentic Sky Glass look for a streaming TV app: deep navy canvas
   with soft glow, translucent glass panels, rounded poster tiles with a
   focus ring, pill navigation, and the Sky brand gradient
   (orange -> pink -> purple -> blue).
   Only colours and shapes change - the fixed 1920x1080 layout above is
   untouched, so the Tizen build keeps working.
   ================================================================== */

/* ---- shared ---- */
.screen { color:#eef2fb; }
.muted { color:#8a9ac2; }

html.pc * { cursor:default; }
html.pc .tab, html.pc .gchip, html.pc .litem, html.pc .card, html.pc .btn,
html.pc .srow, html.pc .kb, html.pc .sr, html.pc .season, html.pc .ep,
html.pc .ctl, html.pc .tm, html.pc .top-btn,
html.pc .field, html.pc #seek-row, html.pc #seek-bar { cursor:pointer; }

.tab, .gchip, .litem, .card, .btn, .srow, .kb, .sr, .season, .ep,
.ctl, .tm, .top-btn, .field {
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease,
             transform .16s ease, color .16s ease;
}

/* ---- brand: Sky Glass gradient ---- */
.brand {
  background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 32%,#7b2fff 68%,#2563eb 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
.brand span { opacity:.9; }

/* ---- boot ---- */
#scr-boot {
  background:
    radial-gradient(1000px 620px at 50% 26%, rgba(63,124,255,.20) 0%, rgba(63,124,255,0) 60%),
    radial-gradient(900px 560px at 78% 88%, rgba(255,107,44,.10) 0%, rgba(255,107,44,0) 60%),
    linear-gradient(180deg,#0a1226 0%,#04060d 100%);
}
.boot-bar { background:rgba(255,255,255,.10); height:8px; }
.boot-bar i { background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 32%,#7b2fff 68%,#2563eb 100%); }
.boot-status { color:#c6d2ec; }

/* ---- setup ---- */
#scr-setup {
  background:
    radial-gradient(900px 560px at 24% 22%, rgba(63,124,255,.16) 0%, rgba(63,124,255,0) 60%),
    radial-gradient(800px 500px at 82% 84%, rgba(123,47,255,.12) 0%, rgba(123,47,255,0) 60%),
    linear-gradient(180deg,#0a1226 0%,#04060d 100%);
}
.setup-presets-label { margin-top:40px; font-size:20px; }
#setup-presets { margin-top:14px; }
.preset { display:inline-block; margin:0 12px 12px 0; padding:12px 26px;
  border-radius:999px; background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.10); color:#cdd8ef; font-size:21px;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.preset:hover { background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.28); }
.preset.focus { border-color:#6fc3ff; background:rgba(63,156,255,.25);
  box-shadow:0 0 0 3px rgba(92,184,255,.25), 0 0 24px rgba(64,156,255,.35); }
html.pc .preset { cursor:pointer; }
.field { background:rgba(16,25,48,.66); border:2px solid rgba(255,255,255,.09);
  border-radius:18px; }
.field:hover { border-color:rgba(255,255,255,.2); }
.field label { color:#7f9bd8; }
.setup-actions { margin-top:28px; }
.btn { background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.12);
  border-radius:999px; color:#eef2fb; }
.btn:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.btn.primary { background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 32%,#7b2fff 68%,#2563eb 100%);
  border:2px solid rgba(255,255,255,.18); position:relative; overflow:hidden; }
.btn.focus, .field.focus { border-color:#6fc3ff;
  box-shadow:0 0 0 3px rgba(92,184,255,.28), 0 0 26px rgba(64,156,255,.35); }

/* white shine sweep on the gradient CTA (Sky Glass style), ~2.5s loop */
@keyframes cta-shine-sweep {
  0% { transform:translateX(-130%) skewX(-18deg); }
  40% { transform:translateX(230%) skewX(-18deg); }
  40.01%, 100% { transform:translateX(230%) skewX(-18deg); }
}
.btn.primary::after {
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 65%,transparent 100%);
  animation:cta-shine-sweep 2.5s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
.btn.primary > * { position:relative; z-index:2; }
@media (prefers-reduced-motion:reduce) {
  .btn.primary::after { display:none; animation:none; }
}

/* ---- top bar: glass rail ---- */
#topbar {
  background:linear-gradient(180deg,rgba(4,6,13,.88),rgba(4,6,13,.45));
  border-bottom:1px solid rgba(255,255,255,.05);
}
html.pc #topbar { background:linear-gradient(180deg,rgba(6,10,22,.75),rgba(6,10,22,.35));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }

/* tabs: quiet Sky-style text with a gradient underline when active */
.tab { position:relative; border-radius:0; padding:12px 16px 15px; margin-right:4px;
  font-size:23px; font-weight:600; color:#9fb0d4; border:2px solid transparent;
  background:transparent; }
.tab::after { content:""; position:absolute; left:14px; right:14px; bottom:7px; height:3px;
  border-radius:2px; background:transparent; }
.tab:hover { color:#fff; background:transparent; }
.tab.active { color:#fff; font-weight:700; background:transparent; }
.tab.active::after { background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 35%,#7b2fff 70%,#2563eb 100%); }
.tab.focus { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(111,195,255,.4);
  border-radius:12px; box-shadow:0 0 18px rgba(64,156,255,.25); }
.top-btn { border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10); font-size:21px; color:#cdd8ef; padding:8px 20px; }
.top-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.top-btn.focus { border-color:#6fc3ff; background:rgba(63,156,255,.22);
  box-shadow:0 0 0 3px rgba(92,184,255,.22), 0 0 20px rgba(64,156,255,.3); }
.clock { color:#b9c6e4; font-size:22px; }

/* ---- category strip ---- */
.gchip { border-radius:999px; height:64px; line-height:58px; top:4px;
  background:rgba(255,255,255,.05); color:#a9b7d8; border:2px solid transparent;
  font-size:24px; }
.gchip:hover { color:#fff; background:rgba(255,255,255,.1); }
.gchip .gcount { color:#5f6f96; }
.gchip.active { background:linear-gradient(100deg,rgba(255,107,44,.20) 0%,rgba(233,30,140,.22) 32%,rgba(123,47,255,.28) 68%,rgba(37,99,235,.26) 100%);
  border-color:rgba(111,195,255,.28); color:#fff; }
.gchip.focus { border-color:#6fc3ff;
  background:linear-gradient(100deg,rgba(255,107,44,.30) 0%,rgba(233,30,140,.32) 32%,rgba(123,47,255,.40) 68%,rgba(37,99,235,.38) 100%);
  box-shadow:0 0 0 3px rgba(92,184,255,.25), 0 0 24px rgba(64,156,255,.35); color:#fff; }

/* ---- canvas ---- */
#scr-browse, #scr-search, #scr-episodes {
  background:
    radial-gradient(1100px 600px at 16% 0%, rgba(63,124,255,.10) 0%, rgba(63,124,255,0) 60%),
    radial-gradient(900px 520px at 94% 96%, rgba(123,47,255,.09) 0%, rgba(123,47,255,0) 60%),
    linear-gradient(180deg,#0a1124 0%,#04060d 100%);
}
#content-head h2 { color:#f2f6ff; }
#content-count { color:#7788b2; }

/* channel list */
.litem { border-radius:14px; background:rgba(18,26,46,.66);
  border:2px solid rgba(255,255,255,.07); }
.litem:hover { background:rgba(28,39,68,.8); border-color:rgba(255,255,255,.18); }
.litem .lth { background:rgba(255,255,255,.06); }
.litem .lth .initials { color:#5d74a8; }
.litem .lstar { color:#ffd166; }
.litem.focus { border-color:#6fc3ff; background:rgba(46,78,128,.55);
  box-shadow:0 0 0 3px rgba(92,184,255,.22), 0 6px 26px rgba(64,156,255,.28); }

/* poster tiles */
.card { border-radius:18px; background:rgba(18,26,46,.8);
  border:2px solid rgba(255,255,255,.07); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.card:hover { border-color:rgba(255,255,255,.28); transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(0,0,0,.5); }
.card .thumb { background:linear-gradient(160deg,#131f3d 0%,#080d1c 100%); }
.card .initials { color:#5d74a8; }
.card .cname { color:#dbe6fa; }
.card.focus { border-color:#6fc3ff; transform:translateY(-5px) scale(1.03);
  box-shadow:0 0 0 3px rgba(92,184,255,.25), 0 22px 54px rgba(0,0,0,.6), 0 0 34px rgba(64,156,255,.35); }
.card .fav { background:rgba(4,8,20,.65); }

.empty { color:#6b7ca6; }

/* ---- hint bar ---- */
#hintbar {
  background:linear-gradient(0deg,rgba(4,6,13,.9),rgba(4,6,13,0));
  color:#7d8cb2; font-size:20px; height:74px; line-height:74px;
}
html.pc #hintbar { background:linear-gradient(0deg,rgba(6,10,22,.72),rgba(6,10,22,0));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
#hintbar span { display:inline-block; margin-right:26px; }
.key { border-radius:8px; background:rgba(255,255,255,.10); color:#dbe6fa; }
.key.c-red { background:linear-gradient(160deg,#e0503e,#a92c20); }
.key.c-green { background:linear-gradient(160deg,#2f9e4c,#1c6b33); }
.key.c-yellow { background:linear-gradient(160deg,#e0b12e,#b88413); color:#111; }
.key.c-blue { background:linear-gradient(160deg,#3b8ae8,#20539e); }
.mouse-hint { display:none; color:#8a9ac2; font-size:21px; }
html.pc #hintbar .remote-hint { display:none; }
html.pc #hintbar .mouse-hint { display:inline-block; }

/* ---- settings ---- */
#scr-settings {
  background:
    radial-gradient(900px 560px at 26% 20%, rgba(63,124,255,.14) 0%, rgba(63,124,255,0) 60%),
    linear-gradient(180deg,#0a1226 0%,#04060d 100%);
}
#settings-box h1 { color:#f2f6ff; }
.srow { background:rgba(18,26,46,.66); border:2px solid rgba(255,255,255,.07);
  border-radius:16px; }
.srow:hover { background:rgba(28,39,68,.8); border-color:rgba(255,255,255,.16); }
.srow .sval { color:#7cc4ff; }
.srow.focus { border-color:#6fc3ff; background:rgba(46,78,128,.55);
  box-shadow:0 0 0 3px rgba(92,184,255,.22), 0 6px 26px rgba(64,156,255,.25); }
.srow.info { color:#6b7ca6; }

/* ---- search ---- */
.search-input { border-radius:16px; background:rgba(18,26,46,.7);
  border:2px solid rgba(255,255,255,.09); }
.caret { background:#6fc3ff; border-radius:2px; }
#search-info { color:#8a9ac2; }
.kb { border-radius:12px; background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.07); color:#dbe6fa; }
.kb:hover { background:rgba(255,255,255,.15); }
.kb.focus { border-color:#6fc3ff; background:rgba(63,156,255,.3);
  box-shadow:0 0 0 3px rgba(92,184,255,.22), 0 0 20px rgba(64,156,255,.3); }
.sr { border-radius:12px; border:2px solid transparent; }
.sr:hover { background:rgba(255,255,255,.06); }
.sr .sr-th { background:rgba(255,255,255,.06); }
.sr.focus { border-color:#6fc3ff; background:rgba(46,78,128,.5);
  box-shadow:0 0 0 3px rgba(92,184,255,.2), 0 4px 22px rgba(64,156,255,.22); }

/* ---- episodes ---- */
#ep-head h2 { color:#f2f6ff; }
.season { border-radius:999px; border:2px solid transparent; color:#b6c3de;
  background:rgba(255,255,255,.04); }
.season:hover { background:rgba(255,255,255,.1); color:#fff; }
.season.active { background:linear-gradient(100deg,rgba(255,107,44,.18) 0%,rgba(233,30,140,.20) 32%,rgba(123,47,255,.26) 68%,rgba(37,99,235,.24) 100%);
  border-color:rgba(111,195,255,.25); color:#fff; }
.season.focus { border-color:#6fc3ff;
  background:linear-gradient(100deg,rgba(255,107,44,.28) 0%,rgba(233,30,140,.30) 32%,rgba(123,47,255,.38) 68%,rgba(37,99,235,.36) 100%);
  box-shadow:0 0 0 3px rgba(92,184,255,.22); color:#fff; }
.ep { border-radius:12px; border:2px solid transparent; }
.ep:hover { background:rgba(255,255,255,.06); }
.ep .ep-n { color:#6fc3ff; }
.ep.focus { border-color:#6fc3ff; background:rgba(46,78,128,.5);
  box-shadow:0 0 0 3px rgba(92,184,255,.2), 0 4px 22px rgba(64,156,255,.22); }

/* ---- player ---- */
#player-top {
  background:linear-gradient(180deg,rgba(2,4,10,.9),rgba(2,4,10,0)); }
.pt-title { color:#fff; }
.pt-sub { color:#b9c6e4; }
#controls {
  background:linear-gradient(0deg,rgba(2,4,10,.95) 0%,rgba(2,4,10,.82) 40%,rgba(2,4,10,.45) 70%,rgba(2,4,10,0) 100%); }
html.pc #controls { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.seek-row .t { color:#d6e1f5; }
.seek { background:rgba(255,255,255,.2); }
.seek i { background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 32%,#7b2fff 68%,#2563eb 100%); }
.seek b { box-shadow:0 2px 10px rgba(0,0,0,.7), 0 0 12px rgba(111,195,255,.8); }
#seek-row.focus .seek { box-shadow:0 0 16px rgba(64,156,255,.5); }
.ctl { border-radius:999px; background:rgba(16,24,42,.7);
  border:2px solid rgba(255,255,255,.10); color:#dbe6fa; }
.ctl:hover { background:rgba(34,49,84,.9); border-color:rgba(255,255,255,.28); color:#fff; }
.ctl.focus { border-color:#6fc3ff; background:rgba(52,88,148,.9); color:#fff;
  box-shadow:0 0 0 3px rgba(92,184,255,.22), 0 0 24px rgba(64,156,255,.4); }
.ctl.on { color:#6fc3ff; }
.ctl.on.focus { color:#bfe0ff; }
html.pc .ctl { padding:0 18px; }
html.pc .ctl .ctl-label { font-size:21px; margin-left:10px; }

#track-menu { background:rgba(8,12,24,.92); border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.6); }
html.pc #track-menu { -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.tm { border-radius:12px; border:2px solid transparent; }
.tm:hover { background:rgba(255,255,255,.07); }
.tm .tm-tag { color:#6fc3ff; }
.tm.focus { border-color:#6fc3ff; background:rgba(46,78,128,.55);
  box-shadow:0 0 0 3px rgba(92,184,255,.2); }

#spinner i { border-color:rgba(255,255,255,.14); border-top-color:#6fc3ff;
  box-shadow:0 0 30px rgba(64,156,255,.35); }
#toast span { background:rgba(10,15,30,.92); border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px rgba(0,0,0,.55); }
html.pc #toast span { -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }

/* ==================================================================
   SKY GLASS GUIDE + HOME
   - Nunito Sans is the Sky Glass font
   - soft blue/purple bokeh behind the home rails
   - profile row ("Dad") like the Sky Glass home
   - full TV guide with a corner mini-preview, like the Sky EPG
   ================================================================== */

#app { font-family:'Nunito Sans','Segoe UI',Roboto,Arial,sans-serif; }

/* ---- bokeh home background ---- */
#scr-browse, #scr-search, #scr-episodes {
  background:
    radial-gradient(26px 26px at 8% 14%,  rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(52px 52px at 24% 6%,  rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(30px 30px at 88% 10%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(60px 60px at 95% 20%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(34px 34px at 68% 3%,  rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(760px 500px at 12% 96%, rgba(96,60,255,.17) 0%, rgba(96,60,255,0) 60%),
    radial-gradient(900px 560px at 92% 88%, rgba(233,30,140,.10) 0%, rgba(233,30,140,0) 60%),
    radial-gradient(1000px 620px at 50% -12%, rgba(63,124,255,.18) 0%, rgba(63,124,255,0) 62%),
    radial-gradient(700px 460px at 96% 40%, rgba(123,47,255,.12) 0%, rgba(123,47,255,0) 62%),
    linear-gradient(180deg,#0c1530 0%,#060b1c 55%,#04060d 100%);
}

/* ---- profile ---- */
#profiles { display:inline-block; vertical-align:middle; margin-left:18px; }
html.pc #profiles { cursor:pointer; }
#profiles .pavatar {
  width:54px; height:54px; border-radius:50%;
  color:#fff; font-size:25px; font-weight:800; line-height:48px; text-align:center;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#profiles:hover .pavatar { transform:scale(1.08); border-color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(123,47,255,.4); }
/* avatar gradients */
.pavatar.av0, .avsw.av0 { background:linear-gradient(160deg,#ff6b2c 0%,#e91e8c 38%,#7b2fff 70%,#2563eb 100%); }
.pavatar.av1, .avsw.av1 { background:linear-gradient(160deg,#2563eb 0%,#38bdf8 100%); }
.pavatar.av2, .avsw.av2 { background:linear-gradient(160deg,#7b2fff 0%,#e91e8c 100%); }
.pavatar.av3, .avsw.av3 { background:linear-gradient(160deg,#0ea5e9 0%,#22c55e 100%); }
.pavatar.av4, .avsw.av4 { background:linear-gradient(160deg,#ff6b2c 0%,#ef4444 100%); }
.pavatar.av5, .avsw.av5 { background:linear-gradient(160deg,#475569 0%,#94a3b8 100%); }
.pavatar.av6, .avsw.av6 { background:linear-gradient(160deg,#2dd4bf 0%,#0f766e 100%); }
.pavatar.av7, .avsw.av7 { background:linear-gradient(160deg,#a3e635 0%,#4d7c0f 100%); }
.pavatar.av8, .avsw.av8 { background:linear-gradient(160deg,#f59e0b 0%,#b45309 100%); }
.pavatar.av9, .avsw.av9 { background:linear-gradient(160deg,#60a5fa 0%,#1d4ed8 100%); }
.pavatar.av10, .avsw.av10 { background:linear-gradient(160deg,#ef4444 0%,#991b1b 100%); }
.pavatar.av11, .avsw.av11 { background:linear-gradient(160deg,#f59e0b 0%,#92400e 100%); }
.pavatar.av12, .avsw.av12 { background:linear-gradient(160deg,#f472b6 0%,#be185d 100%); }

/* avatar picker inside the rename modal */
.avrow-label { color:#7f9bd8; font-size:19px; font-weight:600; margin:22px 0 12px; }
.avsw { display:inline-block; width:48px; height:48px; border-radius:50%; margin-right:16px;
  border:3px solid rgba(255,255,255,.14); vertical-align:middle;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.avsw:hover { transform:scale(1.12); border-color:rgba(255,255,255,.5); }
.avsw.sel { border-color:#6fc3ff; box-shadow:0 0 0 3px rgba(92,184,255,.32); }
html.pc .avsw { cursor:pointer; }

/* HD avatar pictures (img/avatars/av0..av5.svg) fill their circles */
.pavatar, .pf-av, .avsw { overflow:hidden; }
.pavatar img, .pf-av img, .avsw img { width:100%; height:100%; display:block;
  object-fit:cover; border-radius:50%; }

/* ---- who's watching ---- */
#scr-profiles { background:linear-gradient(180deg,#0c1530 0%,#060b1c 55%,#04060d 100%); }
#pf-box { position:absolute; left:50%; top:52%; width:1500px; transform:translate(-50%,-50%); text-align:center; }
#pf-box h1 { font-size:52px; font-weight:800; letter-spacing:.5px; margin-bottom:12px; }
#pf-box .muted { font-size:22px; margin-bottom:46px; }
#pf-grid { white-space:nowrap; text-align:center; }
.pf-card { display:inline-block; vertical-align:top; width:250px; margin:0 26px; padding:26px 12px 20px;
  border-radius:22px; background:rgba(18,26,46,.55); border:3px solid transparent;
  transition:transform .15s ease, border-color .15s ease, background .15s ease; position:relative; }
html.pc .pf-card { cursor:pointer; }
.pf-card:hover { transform:scale(1.05); background:rgba(28,38,64,.75); }
.pf-card.focus { border-color:#fff; box-shadow:0 14px 44px rgba(0,0,0,.55); }
.pf-av { width:132px; height:132px; border-radius:50%; margin:0 auto 18px;
  color:#fff; font-size:58px; font-weight:800; line-height:126px; text-align:center;
  border:3px solid rgba(255,255,255,.5); }
.pf-card.add .pf-av { background:rgba(255,255,255,.06); border-style:dashed; }
.pf-card.add .pf-av.addav { font-size:64px; line-height:120px; font-weight:400; color:#7f9bd8; }
.pf-name { font-size:26px; font-weight:700; color:#eef3ff; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; padding:0 10px; }
.pf-tools { position:absolute; top:10px; right:12px; opacity:0; transition:opacity .15s ease; }
.pf-card:hover .pf-tools, .pf-card.focus .pf-tools { opacity:1; }
.pf-tools span { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center;
  border-radius:50%; background:rgba(0,0,0,.55); color:#cfe0ff; font-size:19px; margin-left:8px; }
.pf-tools span:hover { background:#e91e63; color:#fff; }
html.pc .pf-tools span { cursor:pointer; }

/* ---- watch history ---- */
#scr-history { background:linear-gradient(180deg,#0c1530 0%,#060b1c 55%,#04060d 100%); }
#hist-head { position:absolute; left:120px; top:70px; right:120px; }
#hist-head h1 { font-size:44px; font-weight:800; margin-bottom:6px; }
#hist-head .muted { font-size:20px; }
#hist-back { position:absolute; left:0; top:4px; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.08); text-align:center; line-height:58px; font-size:38px; color:#fff; }
html.pc #hist-back { cursor:pointer; }
#hist-list { position:absolute; left:120px; right:120px; top:230px; bottom:60px; }
.hist-row { display:block; padding:0 22px; border-radius:14px; background:rgba(18,26,46,.6);
  border:3px solid transparent; white-space:nowrap; }
.hist-row.focus { border-color:#fff; background:#22304d; }
html.pc .hist-row { cursor:pointer; }
.hist-th { display:inline-block; vertical-align:middle; width:78px; height:48px; margin-right:18px;
  background:#0a0f1c; border-radius:8px; overflow:hidden; text-align:center; line-height:48px; }
.hist-th img { max-width:100%; max-height:100%; vertical-align:middle; }
.hist-th .initials { font-size:20px; font-weight:700; color:#3f4c68; }
.hist-body { display:inline-block; vertical-align:middle; max-width:1200px; }
.hist-name { font-size:26px; font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.hist-meta { font-size:18px; color:#7f9bd8; margin-top:4px; }
.hist-empty { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  font-size:24px; color:#7f9bd8; max-width:900px; text-align:center; }

/* recent search chips */
.recent-row { padding:26px 0 0 30px; white-space:nowrap; }
.recent-chip { display:inline-block; margin:0 14px 14px 0; padding:10px 22px; border-radius:20px;
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.14);
  color:#dfe9ff; font-size:21px; }
html.pc .recent-chip { cursor:pointer; }
.recent-chip:hover { border-color:#fff; background:rgba(123,47,255,.35); }

/* ---- modal input (rename profile) ---- */
.modal-field { margin-top:16px; }
.modal-field input {
  width:600px; padding:16px 22px; font-size:24px; color:#f2f6ff;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.18);
  border-radius:14px; outline:none; font-family:inherit;
}
.modal-field input:focus { border-color:#6fc3ff; box-shadow:0 0 0 3px rgba(92,184,255,.25); }

/* ---- TV guide ---- */
#scr-epg { background:transparent; }

/* solid backdrop: the guide is a pure EPG, no preview hole */
#epg-bg {
  position:absolute; left:0; top:0; width:1920px; height:1080px;
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(63,124,255,.12) 0%, rgba(63,124,255,0) 60%),
    linear-gradient(180deg,#0b1226 0%,#050a18 100%);
  z-index:1;
}

#epg-back {
  position:absolute; left:0; top:30px; z-index:3;
  padding:10px 30px; border-radius:999px; font-size:24px; font-weight:700; color:#cdd8ef;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
html.pc #epg-back { cursor:pointer; }
#epg-back:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.32); }

/* visible back button on the series/episode screen */
#ep-back {
  position:absolute; left:0; top:26px; z-index:3;
  padding:10px 30px; border-radius:999px; font-size:24px; font-weight:700; color:#cdd8ef;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
html.pc #ep-back { cursor:pointer; }
#ep-back:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.32); }

/* visible back button on the player overlay */
#pl-back {
  position:absolute; right:56px; top:44px; z-index:12; display:none;
  padding:12px 34px; border-radius:999px; font-size:25px; font-weight:700; color:#eaf0fc;
  background:rgba(10,16,32,.72); border:2px solid rgba(255,255,255,.18);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
#scr-player.visible #pl-back { display:block; }
#pl-back::before { content:'‹  '; color:#6fc3ff; }
html.pc #pl-back { cursor:pointer; }
#pl-back:hover { background:rgba(30,45,84,.85); border-color:#6fc3ff; transform:scale(1.04); }
/* in the APK shell the TV remote's BACK key navigates - hide the
   mouse-only on-screen button so it never sits there unpressable */
html.app #pl-back { display:none !important; }

/* guide filter chips */
#epg-chips { position:absolute; left:60px; top:110px; width:1800px; height:60px; z-index:3;
  white-space:nowrap; overflow:hidden; }
.epg-chip { display:inline-block; margin-right:12px; padding:8px 24px; border-radius:999px;
  font-size:21px; font-weight:600; color:#a9b7d8; background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.08);
  transition:background .16s ease, border-color .16s ease, color .16s ease; }
html.pc .epg-chip { cursor:pointer; }
.epg-chip:hover { background:rgba(255,255,255,.12); color:#fff; }
.epg-chip.sel { color:#fff; border-color:rgba(111,195,255,.35);
  background:linear-gradient(100deg,rgba(255,107,44,.18) 0%,rgba(233,30,140,.2) 35%,rgba(123,47,255,.26) 70%,rgba(37,99,235,.24) 100%); }
.epg-chip.focus { border-color:#6fc3ff; box-shadow:0 0 0 3px rgba(92,184,255,.22); color:#fff; }

#epg-head {
  position:absolute; left:60px; top:0; width:1800px; height:110px; z-index:3;
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* quick nav: jump straight to another tab without leaving the guide */
#epg-tabs { position:absolute; left:210px; top:30px; width:900px; height:50px; white-space:nowrap; overflow:hidden; }
#epg-tabs .tab { font-size:20px; padding:10px 20px 11px; }
#epg-date { display:inline-block; font-size:40px; font-weight:800; color:#f2f6ff;
  line-height:110px; margin:0 0 0 1140px; }
.epg-clock { float:right; font-size:28px; font-weight:600; color:#b9c6e4; line-height:110px; }

/* fixed column header */
#epg-body {
  position:absolute; left:60px; top:170px; width:1800px; height:64px; z-index:3;
}
#epg-chhead { position:absolute; left:0; top:0; width:360px; height:64px;
  color:#7d8cb2; font-size:21px; font-weight:700; line-height:64px; padding-left:8px; }
#epg-times { position:absolute; left:360px; top:0; width:1380px; height:64px;
  border-bottom:2px solid rgba(111,195,255,.28); }
.epg-time { position:absolute; top:0; height:64px; width:230px; line-height:64px;
  text-align:center; font-size:22px; font-weight:700; color:#8a9ac2; }
.epg-time:nth-child(1) { left:0px; } .epg-time:nth-child(2) { left:230px; }
.epg-time:nth-child(3) { left:460px; } .epg-time:nth-child(4) { left:690px; }
.epg-time:nth-child(5) { left:920px; } .epg-time:nth-child(6) { left:1150px; }
.epg-time.now { color:#ff8f66; }
.epg-time.hl { color:#fff; background:rgba(63,156,255,.12);
  border-radius:12px 12px 0 0; box-shadow:inset 0 -3px 0 #6fc3ff; }

/* rows */
#epg-rows {
  position:absolute; left:60px; top:234px; width:1800px; height:670px; z-index:3;
  overflow:hidden;
}
.epg-row { position:relative; height:64px; margin-bottom:4px; }
.epg-row .epg-ch {
  position:absolute; left:0; top:0; width:360px; height:64px;
  background:rgba(16,24,46,.78); border:2px solid rgba(255,255,255,.06);
  border-radius:12px 0 0 12px; overflow:hidden; white-space:nowrap;
}
.epg-ch img.epg-logo { height:40px; width:auto; max-width:96px; margin:10px 14px 0 16px;
  object-fit:contain; vertical-align:top; }
.epg-ch .epg-ini { display:inline-block; width:52px; height:40px; margin:10px 12px 0 14px;
  line-height:40px; text-align:center; font-size:22px; font-weight:800; color:#5d74a8;
  background:rgba(255,255,255,.07); border-radius:10px; vertical-align:top; }
.epg-ch .epg-chname { display:inline-block; max-width:250px; overflow:hidden;
  text-overflow:ellipsis; vertical-align:top; line-height:60px; font-size:22px;
  font-weight:700; color:#e6edfb; }
.epg-row .epg-blocks {
  position:absolute; left:360px; top:0; width:1380px; height:64px;
  background:rgba(16,24,46,.5); border:2px solid rgba(255,255,255,.06);
  border-left:none; border-radius:0 12px 12px 0;
}
.epg-blk {
  position:absolute; top:0; height:60px; border-radius:8px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; padding:0 16px; line-height:58px;
  font-size:20px; font-weight:600; color:#c8d4ec; background:rgba(255,255,255,.055);
}
.epg-blk.now { color:#fff; background:linear-gradient(100deg,rgba(255,107,44,.20) 0%,rgba(233,30,140,.20) 100%); }
.epg-blk.dim { color:#6b7ca6; background:transparent; font-weight:500; }
.epg-blk.focus {
  background:linear-gradient(100deg,#2563eb 0%,#7b2fff 60%,#e91e8c 100%);
  color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 8px 30px rgba(0,0,0,.5);
  z-index:4; transform:scale(1.02);
}
.epg-row.focus-row .epg-ch { border-color:#6fc3ff; background:rgba(40,66,116,.7);
  box-shadow:0 0 0 3px rgba(92,184,255,.2); }
.epg-row.focus-row .epg-blocks { border-color:rgba(111,195,255,.4); }
.epg-empty { padding:40px 20px; color:#6b7ca6; font-size:26px; }

#epg-more { position:absolute; right:420px; top:40px; z-index:3; color:#7d8cb2;
  font-size:20px; font-weight:700; }

/* detail panel */
#epg-detail {
  position:absolute; left:60px; bottom:24px; width:1390px; height:152px; z-index:3;
  background:rgba(13,20,40,.82); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:20px 26px; overflow:hidden;
}
html.pc #epg-detail { -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
#epg-detail .epg-dlogo { float:left; width:300px; height:100%; overflow:hidden; white-space:nowrap; }
#epg-detail .epg-dlogo img.epg-logo { height:64px; width:auto; max-width:110px;
  margin-top:24px; margin-right:18px; object-fit:contain; vertical-align:top; }
#epg-detail .epg-dlogo .epg-ini { display:inline-block; width:74px; height:64px; margin-top:24px;
  margin-right:18px; line-height:64px; text-align:center; font-size:28px; font-weight:800;
  color:#5d74a8; background:rgba(255,255,255,.08); border-radius:12px; }
#epg-detail .epg-dlogo .epg-chname { display:inline-block; max-width:190px; overflow:hidden;
  text-overflow:ellipsis; line-height:112px; font-size:24px; font-weight:800; color:#f2f6ff; }
#epg-detail .epg-dtitle { margin-left:300px; font-size:30px; font-weight:800; color:#fff;
  padding-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#epg-detail .epg-dtime { margin-left:300px; font-size:20px; font-weight:600; color:#9fb0d4;
  margin-top:6px; }
#epg-detail .epg-onnow { color:#ff8f66; }
#epg-detail .epg-ddesc { margin-left:300px; font-size:19px; color:#8a9ac2; margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#epg-detail .epg-dempty { color:#6b7ca6; font-size:24px; line-height:112px; }

html.guide #pip-mask { display:none; }
html.guide #pip-frame { display:none; }
html.guide #pip-hint { display:none; }

/* with the stream panel open the top bar is narrower: keep everything fitting */
html.pip #topbar .brand.small { display:none; }
html.pip .tab { padding:12px 12px 15px; font-size:20px; }
html.pip .clock { display:none; }
html.pip #profiles { display:none; }


/* ---- modal ---- */
#modal { background:rgba(2,4,10,.72); }
html.pc #modal { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.modal-box { background:linear-gradient(170deg,rgba(20,29,52,.98),rgba(10,15,30,.98));
  border:1px solid rgba(255,255,255,.09); border-radius:24px;
  box-shadow:0 40px 110px rgba(0,0,0,.7); }
.modal-title { color:#fff; }
.modal-text { color:#c6d2ec; }

/* ---- pip panel (channel list over the playing stream) ---- */
#pip-mask i.l { background:linear-gradient(90deg, rgba(5,9,20,.92) 0%, rgba(5,9,20,.86) 70%,
                                               rgba(5,9,20,.5) 90%, rgba(5,9,20,0) 100%); }
html.pc #pip-mask i.l { -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
#pip-hint .pip-now { color:#fff; }
#pip-hint .pip-keys { color:#8a9ac2; }

#subtitle-text { text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,1); }

/* ==================================================================
   PROFESSIONAL POLISH
   Motion, typography and detail touches on top of the Sky Glass
   theme. Transforms and opacity only, so even the oldest WebViews
   animate smoothly.
   ================================================================== */

/* ---- typography: bigger for couch distance ---- */
.tab { font-size:24px; }
.litem .lname { font-size:26px; font-weight:600; }
.card .cname { font-size:22px; font-weight:600; }
.gchip { font-size:25px; }
#content-head h2 { font-size:32px; }
.ep .ep-t { font-size:27px; }
.sr .sr-name { font-size:26px; }

/* ---- motion: rows, modal, toast ---- */
.lrow, .row { animation:rowIn .14s ease; }
@keyframes rowIn { from { opacity:0; } to { opacity:1; } }
.modal-box { animation:modalIn .2s ease; }
@keyframes modalIn {
  from { opacity:0; transform:translateY(26px) scale(.98); }
  to   { opacity:1; transform:none; }
}
#toast span { animation:toastIn .2s ease; }
@keyframes toastIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}
.tm { animation:rowIn .12s ease; }

/* ---- focus detail ---- */
.litem.focus { transform:scale(1.012); }
.ctl.focus svg { filter:drop-shadow(0 0 6px rgba(111,195,255,.9)); }
.gchip.focus { transform:translateY(-1px); }

/* ---- boot: breathing brand ---- */
.boot-box .brand { animation:brandPulse 2.6s ease-in-out infinite; }
@keyframes brandPulse {
  0%, 100% { opacity:1; }
  50%      { opacity:.82; }
}
.boot-bar i { box-shadow:0 0 18px rgba(123,47,255,.55); }

/* ---- player: channel logo beside the title ---- */
#pl-logo {
  float:left; height:76px; width:auto; max-width:200px; object-fit:contain;
  margin:0 26px 0 2px; padding:8px 16px; border-radius:16px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12);
}
#pl-logo[hidden] { display:none; }
.pt-title { padding-top:4px; }

/* ---- settings: value accent in the brand blue ---- */
.srow .sval { color:#6fc3ff; }

/* ---- guide: live "now" line ---- */
#epg-nowline {
  position:absolute; top:0; bottom:0; width:3px; z-index:2;
  pointer-events:none; border-radius:2px; opacity:.7;
  background:linear-gradient(180deg,#ff6b2c 0%,#e91e8c 100%);
  box-shadow:0 0 12px rgba(255,107,44,.55);
}
#epg-nowline::before {
  content:""; position:absolute; left:-5px; top:-7px; width:13px; height:13px;
  border-radius:50%; background:#ff8f66;
  box-shadow:0 0 10px rgba(255,143,102,.95);
}

/* honour reduced motion where supported */
@media (prefers-reduced-motion:reduce) {
  .lrow, .row, .modal-box, #toast span, .tm, .boot-box .brand { animation:none; }
  .tab, .gchip, .litem, .card, .btn, .srow, .kb, .sr, .season, .ep,
  .ctl, .tm, .top-btn, .field { transition:none; }
}

/* ---- the APK shell on the TV: keep rendering cheap ----
   The WebView GPU is the budget on a Fire Stick: no backdrop blurs
   (html.pc never applies there), no per-element transitions, no heavy
   shadows during focus moves. This stopped black-video and flicker. */
html.app .tab, html.app .gchip, html.app .litem, html.app .card, html.app .btn,
html.app .srow, html.app .kb, html.app .sr, html.app .season, html.app .ep,
html.app .ctl, html.app .tm, html.app .top-btn, html.app .field {
  transition:none;
}
html.app .lrow, html.app .row { animation:none; }

/* ==================================================================
   NETFLIX-STYLE "FLICK THROUGH" BROWSE — Movies / Series tabs
   Hero preview of the focused title + stacked horizontally-scrolling
   shelves (one per sub-pick: All / New / Popular / 4K / Classics /
   Animation). The category chip strip is hidden in this mode; Up/Down
   moves between shelves, Left/Right flicks along a shelf.
   ================================================================== */

/* reclaim the category-strip band when it is hidden */
html.flick #groupbar { display:none; }
html.flick #body { top:118px; height:892px; }
html.flick #content { height:892px; padding:0; }
html.flick #content-head { display:none; }
html.flick #grid { height:490px; padding:0 60px; }

/* full-bleed backdrop hero, Netflix-style: a large blurred/darkened still of
   the focused title fills the top of the screen behind everything, with a
   poster card and text floating on top of a gradient fade */
#hero { position:relative; height:340px; overflow:hidden; }
#hero.hidden { display:none; }
html.pc #hero { cursor:pointer; }
.hero-backdrop { position:absolute; left:0; top:0; width:100%; height:100%;
  background-size:cover; background-position:center 20%;
  background-color:#0a1226; transform:scale(1.06); filter:saturate(1.1);
  transition:background-image .3s ease; }
.hero-backdrop::after { content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:
    linear-gradient(90deg, rgba(4,6,13,.96) 0%, rgba(4,6,13,.55) 42%, rgba(4,6,13,.15) 70%, rgba(4,6,13,.65) 100%),
    linear-gradient(0deg, #04060d 0%, rgba(4,6,13,.15) 55%, rgba(4,6,13,.35) 100%); }

.hero-art { position:absolute; left:60px; bottom:26px; z-index:2;
  display:inline-block; vertical-align:top; width:180px; height:254px; border-radius:14px;
  overflow:hidden; background:linear-gradient(160deg,#131f3d 0%,#080d1c 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); text-align:center; }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.hero-initials { line-height:254px; font-size:48px; font-weight:800; color:#5d74a8; }
.hero-live { position:absolute; left:8px; top:8px; padding:3px 12px; border-radius:8px;
  background:#e91e63; color:#fff; font-size:14px; font-weight:800; letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.5); }
.hero-info { position:absolute; left:268px; right:60px; bottom:22px; z-index:2; }
.hero-tags { font-size:19px; font-weight:700; color:#ffd166; letter-spacing:.5px; }
.hero-tags span { margin-right:16px; }
.hero-tags .hero-rating { color:#7cc4ff; }
.hero-title { margin-top:6px; font-size:52px; font-weight:800; color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.7);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:1450px; }
.hero-meta { margin-top:10px; font-size:21px; color:#a9b7d8; }
.hero-resume { color:#6fc3ff; font-weight:700; }
.hero-overview { margin-top:12px; font-size:19px; line-height:1.45; color:#c6d2ec;
  max-width:920px; max-height:52px; overflow:hidden; text-overflow:ellipsis; }
.hero-play { margin-top:18px; display:inline-block; padding:14px 36px; border-radius:999px;
  background:linear-gradient(90deg,#ff6b2c 0%,#e91e8c 32%,#7b2fff 68%,#2563eb 100%);
  color:#fff; font-size:22px; font-weight:700; box-shadow:0 14px 34px rgba(64,20,120,.45); }
.hero-play-ico { font-size:16px; }
.hero-play.live { background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.18);
  box-shadow:none; }
.hero-notice { margin-top:10px; font-size:17px; color:#8a9ac2; max-width:900px; line-height:1.4; }

.shelf { position:absolute; left:0; width:100%; height:420px; }
.shelf-head { font-size:24px; font-weight:700; color:#dbe6fa; margin-bottom:14px; }
.shelf-head .shelf-count { font-size:18px; font-weight:500; color:#5f6f96; margin-left:10px; }
.shelf-track { position:relative; height:376px; }
.shelf-track .card { position:absolute; top:0; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, z-index 0s; }
.shelf-track .card.focus { transform:scale(1.14) translateY(-10px); z-index:5;
  box-shadow:0 26px 60px rgba(0,0,0,.65), 0 0 0 3px rgba(92,184,255,.35); }
.shelf.focus .shelf-head { color:#fff; }

/* Netflix "Top 10" row: a big translucent numeral beside each poster */
.card.top10 { display:flex; align-items:flex-end; }
.card.top10 .card-rank { flex:0 0 110px; height:100%; display:flex; align-items:flex-end; justify-content:center;
  font-size:180px; font-weight:900; line-height:.72; color:rgba(92,184,255,.22);
  -webkit-text-stroke:2px rgba(92,184,255,.55); text-shadow:0 8px 30px rgba(0,0,0,.7);
  -webkit-user-select:none; user-select:none; pointer-events:none; }
.card.top10 .card-body { flex:1 1 auto; min-width:0; }
.card.top10 .card-body .thumb.poster { border-radius:14px; overflow:hidden; }

/* "provider serves this as a live loop, not a seekable file" badge on posters */
.card-live { position:absolute; left:10px; top:10px; padding:2px 10px; border-radius:8px;
  background:#e91e63; color:#fff; font-size:14px; font-weight:800; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.5); }

/* continue-watching progress bar under a poster */
.card-progress { position:absolute; left:0; bottom:0; width:100%; height:5px;
  background:rgba(255,255,255,.16); z-index:2; }
.card-progress i { display:block; height:100%; background:linear-gradient(90deg,#ff6b2c,#e91e8c); }

/* ================= Netflix-style UI overhaul =================
   A cleaner, higher-contrast "Netflix" look on the dark stage: near-black
   surfaces, a single red accent, softer elevation, bigger hero. Only colours,
   spacing and elevation change - no layout or behaviour. */

/* brand: SKYIPTV with Netflix-red accent */
.brand.small { font-weight:800; letter-spacing:1px; }
.brand.small span { color:#E50914; }

/* top nav: minimal, active = red accent underline */
.tab { font-weight:600; border-radius:0; border:0; color:#a8b2c6; padding:14px 24px; }
.tab.active { color:#fff; background:transparent; box-shadow:inset 0 -4px 0 #E50914; }
.tab.focus { color:#fff; background:rgba(229,9,20,.16); box-shadow:inset 0 -4px 0 #E50914; }
.top-btn { border-radius:8px; }
.top-btn.focus { background:#1a2336; }

/* category chips: softer, red focus ring */
.gchip { border-radius:10px; border:0; }
.gchip.active { background:#1a2336; }
.gchip.focus { border-color:#E50914; background:#23202e; }

/* content heading */
#content-head h2 { font-weight:800; }

/* hero: red accent + cleaner gradients and bigger play button */
.hero-backdrop::after {
  background:
    linear-gradient(90deg, rgba(3,5,10,.97) 0%, rgba(3,5,10,.60) 42%, rgba(3,5,10,.20) 70%, rgba(3,5,10,.70) 100%),
    linear-gradient(0deg, #03050a 0%, rgba(3,5,10,.10) 55%, rgba(3,5,10,.45) 100%);
}
.hero-title { font-size:56px; }
.hero-tags { color:#dbe6fa; }
.hero-tags .hero-rating { color:#E50914; }
.hero-play { background:#E50914; box-shadow:0 12px 34px rgba(229,9,20,.45); }
.hero-play:hover, .hero-play.focus { background:#f6121d; }
.hero-play.live { background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.2); box-shadow:none; }
.hero-resume { color:#E50914; }

/* cards: cleaner elevation and red focus ring */
.card { border-radius:10px; }
.card .cname { font-weight:600; }
.shelf-track .card.focus { box-shadow:0 26px 60px rgba(0,0,0,.70), 0 0 0 3px rgba(229,9,20,.55); }
.card-progress i { background:linear-gradient(90deg,#E50914,#ff4d5e); }

/* Top 10 numerals: red-tinted like Netflix */
.card.top10 .card-rank { color:rgba(229,9,20,.22); -webkit-text-stroke:2px rgba(229,9,20,.50);
  text-shadow:0 8px 30px rgba(0,0,0,.70); }

/* live badge on posters / items: red to match accent */
.card-live, .litem .live { background:#E50914; }