/* =============================================================
 * IPTV4ALL — horizontal-nav classic IPTV portal aesthetic.
 * Top nav, no sidebar, two-pane content. Carbon navy gradient,
 * white text, soft borders, sans-serif. ES5-era WebKit safe.
 * Fixed 1280x720 viewport; fit.js scales the app container.
 * ============================================================= */

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow:hidden;
  background:#0e0e0e;
  color:#ffffff;
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
  font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }
input, button { font-family:inherit; }

#app {
  position:relative; width:1280px; height:720px;
  background:#141414;
  background-image:-webkit-radial-gradient(circle at 50% -10%, #1f1f1f 0%, #141414 45%, #0c0c0c 100%);
}

/* ---------- top nav ---------- */
#topbar {
  position:absolute; top:0; left:0; width:1280px; height:56px;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:0 24px; line-height:56px;
  white-space:nowrap; overflow:hidden;
}
#brand {
  display:inline-block; font-weight:800; font-size:18px;
  letter-spacing:4px; color:#e50914;
  vertical-align:middle; padding-right:32px;
  border-right:1px solid rgba(255,255,255,0.08);
  margin-right:24px;
}
#brand:after {
  content:""; display:inline-block; width:6px; height:6px;
  margin-left:10px; vertical-align:middle;
  background:#ff4d6d; border-radius:50%;
}
#topnav { display:inline-block; vertical-align:middle; }
.nav-item {
  display:inline-block; height:36px; line-height:36px;
  padding:0 18px; margin-right:6px;
  font-size:12px; font-weight:600; letter-spacing:2px;
  color:rgba(255,255,255,0.55);
  border:1px solid transparent; border-radius:3px;
  vertical-align:middle;
}
.nav-item .nk {
  display:inline-block; margin-right:8px;
  color:rgba(255,255,255,0.25); font-size:10px;
}
.nav-item.active { color:#ffffff; }
.nav-item.active .nk { color:#e50914; }
.nav-item.focus {
  background:#e50914; color:#000000;
  border-color:#e50914;
}
.nav-item.focus .nk { color:#000000; }

#topmeta {
  float:right; color:rgba(255,255,255,0.6);
  font-size:12px; letter-spacing:1px;
}
#topmeta span { margin-left:18px; }
#topmeta #clock { color:#ffffff; font-weight:700; }
#topmeta #mac { color:#e50914; font-variant:tabular-nums; }

/* ---------- main screen + footer ---------- */
#screen {
  position:absolute; top:56px; left:0; width:1280px; height:616px;
  padding:22px 36px;
  overflow:hidden;
}
#footer {
  position:absolute; bottom:0; left:0; width:1280px; height:48px;
  background:rgba(0,0,0,0.35);
  border-top:1px solid rgba(255,255,255,0.07);
  padding:0 24px; line-height:48px; font-size:11px;
  color:rgba(255,255,255,0.55); letter-spacing:0.5px;
}
#footer .hint { display:inline-block; margin-right:24px; }
#footer .key {
  display:inline-block; padding:2px 9px; margin-right:7px;
  background:rgba(255,255,255,0.07); color:#ffffff;
  border-radius:3px; font-size:10px; font-weight:700;
  border:1px solid rgba(255,255,255,0.12);
  letter-spacing:1px;
}
#footer .key.red    { background:#b53144; color:#ffe4ea; border-color:#dc3a51; }
#footer .key.green  { background:#1e7a3c; color:#e4ffe9; border-color:#239846; }
#footer .key.yellow { background:#b08820; color:#fff4d4; border-color:#d4a429; }
#footer .key.blue   { background:#1f5dad; color:#dceaff; border-color:#2470cf; }

/* ---------- screen header ---------- */
.scr-head {
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  height:34px;
}
.scr-title { font-size:18px; font-weight:700; letter-spacing:2px; color:#ffffff; display:inline-block; text-transform:uppercase; }
.scr-sub   { font-size:11px; letter-spacing:1.5px; color:rgba(255,255,255,0.5); margin-left:14px; text-transform:uppercase; }
.scr-meta  { float:right; color:#e50914; font-size:12px; font-weight:600; line-height:26px; letter-spacing:1px; }

/* ---------- state ---------- */
.state-box { margin-top:60px; text-align:center; padding:30px 40px; }
.state-box .ico { font-size:34px; color:#e50914; margin-bottom:14px; font-weight:300; letter-spacing:5px; }
.state-box .ttl { font-size:17px; font-weight:700; letter-spacing:3px; color:#ffffff; margin-bottom:8px; text-transform:uppercase; }
.state-box .msg { font-size:12px; color:rgba(255,255,255,0.6); line-height:1.7; max-width:600px; margin:0 auto 14px; }
.state-box.error .ico { color:#ff4d6d; }
.state-box.error .ttl { color:#ff7e92; }
.state-box .actions { margin-top:18px; }
.btn {
  display:inline-block; padding:9px 20px; margin:0 6px;
  background:rgba(255,255,255,0.07); color:#ffffff;
  border:1px solid rgba(255,255,255,0.12); border-radius:3px;
  font-family:inherit; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; font-weight:600;
}
.btn.primary { background:#e50914; color:#000000; border-color:#e50914; }
.btn.focus   { background:#ffffff; color:#000000; border-color:#ffffff; }

/* ---------- HOME carousel ---------- */
.hc-wrap {
  position:relative; height:540px;
  padding-top:24px;
}
.hc-row {
  white-space:nowrap; overflow:hidden;
  text-align:center;
  padding:0 30px;
}
.hc-tile {
  display:inline-block; vertical-align:top;
  width:218px; height:340px;
  margin:8px 14px;
  background:#1c1c1c;
  border:2px solid #262626; border-radius:8px;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.hc-tile .hc-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-size:cover; background-position:center;
  opacity:0.55;
}
.hc-tile .hc-bg-grad {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:-webkit-linear-gradient(top, rgba(20,20,20,0) 30%, rgba(14,14,14,0.95) 100%);
}
.hc-tile .hc-inner {
  position:absolute; bottom:0; left:0; right:0; padding:22px 20px;
  text-align:left;
}
.hc-tile .hc-name {
  font-size:22px; font-weight:800; letter-spacing:3px;
  color:#ffffff; text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,0.9);
}
.hc-tile .hc-sub {
  font-size:10px; letter-spacing:1.5px;
  color:rgba(255,255,255,0.6); margin-top:6px;
  text-transform:uppercase;
}
.hc-tile.focus {
  border-color:#e50914;
  box-shadow:0 4px 28px rgba(229,9,20,0.45);
}
.hc-tile.focus .hc-bg   { opacity:0.85; }
.hc-tile.focus .hc-name { color:#ffffff; }
.hc-tile.focus .hc-sub  { color:rgba(255,255,255,0.9); }

.hc-greeting {
  text-align:center;
  font-size:11px; letter-spacing:6px;
  color:rgba(255,255,255,0.35);
  margin-bottom:18px; text-transform:uppercase;
}
.hc-context {
  text-align:center;
  font-size:13px; color:rgba(255,255,255,0.55);
  margin-top:24px; letter-spacing:1px;
}
.hc-context .ctx-strong { color:#e50914; font-weight:700; }

/* ---------- LANGUAGE carousel (vertical, per section) ---------- */
.lv-wrap { position:relative; height:540px; }
.lv-list-pane {
  position:absolute; top:0; left:0; width:380px; bottom:0;
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); border-radius:5px;
  overflow:hidden;
}
.lv-list-row {
  height:60px; line-height:60px; padding:0 22px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px; letter-spacing:2px; color:rgba(255,255,255,0.7);
}
.lv-list-row .name { font-weight:700; color:#ffffff; font-size:14px; }
.lv-list-row .count { float:right; color:rgba(255,255,255,0.4); font-size:11px; line-height:60px; }
.lv-list-row.focus {
  background:rgba(229,9,20,0.18); border-left:4px solid #e50914;
  padding-left:18px;
}
.lv-list-row.focus .name, .lv-list-row.focus .count { color:#ffffff; }
.lv-preview-pane {
  position:absolute; top:0; left:400px; right:0; bottom:0;
  padding:30px 36px;
}
.lv-pv-tag {
  font-size:11px; letter-spacing:3px; color:#e50914;
  text-transform:uppercase; margin-bottom:10px;
}
.lv-pv-name {
  font-size:42px; font-weight:800; letter-spacing:2px;
  color:#ffffff; margin-bottom:8px;
}
.lv-pv-sub {
  font-size:13px; color:rgba(255,255,255,0.5);
  letter-spacing:1px; margin-bottom:24px;
  max-width:620px; line-height:1.7;
}
.lv-pv-cta {
  display:inline-block; padding:12px 26px;
  background:#e50914; color:#ffffff;
  font-size:13px; font-weight:700; letter-spacing:2px;
  border-radius:3px; text-transform:uppercase;
}

/* ---------- home rows (legacy, kept for safety) ---------- */
.row { margin-bottom:20px; }
.row-title { font-size:11px; letter-spacing:3px; color:rgba(255,255,255,0.55); margin-bottom:8px; text-transform:uppercase; }
.row-strip { white-space:nowrap; overflow:hidden; height:200px; }
.card {
  display:inline-block; vertical-align:top;
  width:130px; height:194px; margin-right:10px;
  background:rgba(255,255,255,0.04);
  border:2px solid transparent; border-radius:4px; overflow:hidden;
}
.card img { width:130px; height:160px; display:block; }
.card .placeholder { width:130px; height:160px; display:block; position:relative; background:#1c2547; }
.card .placeholder span {
  position:absolute; bottom:8px; left:8px; right:8px;
  color:#ffffff; font-size:11px; line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.card .label { height:32px; padding:6px 8px; font-size:11px; color:#ffffff; overflow:hidden; line-height:1.3; }
.card.focus { border-color:#e50914; background:rgba(125,211,252,0.12); }

/* ---------- live TV — Stalker-style two pane ---------- */
.tv-wrap { position:relative; height:540px; }
.tv-cats {
  position:absolute; top:0; left:0; right:0; height:30px;
  font-size:11px; color:rgba(255,255,255,0.55); letter-spacing:1.5px;
  line-height:30px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden;
}
.tv-cats .tv-cat {
  display:inline-block; padding:0 14px; margin-right:4px;
  cursor:pointer; border-bottom:2px solid transparent;
}
.tv-cats .tv-cat.active { color:#ffffff; border-bottom-color:#e50914; }
.tv-cats .tv-cat.focus  { color:#000000; background:#e50914; }

.tv-list-pane {
  position:absolute; top:0; left:0; width:780px; bottom:30px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.07); border-radius:5px;
  overflow:hidden;
}
.tv-list-pane .filter-bar {
  height:34px; line-height:34px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:11px; letter-spacing:1px; color:rgba(255,255,255,0.55);
}
.tv-list-pane .filter-bar input {
  background:transparent; color:#ffffff; outline:0; border:0;
  font-size:12px; width:580px; vertical-align:middle;
}
.tv-list {
  position:absolute; top:35px; left:0; right:0; bottom:0; overflow:hidden;
}
.tv-row {
  height:34px; line-height:34px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  white-space:nowrap; overflow:hidden; font-size:13px;
}
.tv-row .num { display:inline-block; width:48px; text-align:right; color:rgba(255,255,255,0.5); font-weight:700; font-size:12px; padding-right:10px; }
.tv-row .ico { display:inline-block; width:22px; text-align:center; vertical-align:middle; color:#e50914; font-size:13px; }
.tv-row .name { display:inline-block; color:#ffffff; vertical-align:middle; padding-left:6px; }
.tv-row .tags { float:right; padding-right:4px; }
.tv-row .tag { display:inline-block; height:18px; line-height:18px; padding:0 6px; margin-left:4px; font-size:9px; border-radius:2px; vertical-align:middle; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); letter-spacing:1px; }
.tv-row .tag.hd  { background:#1f5dad; color:#ffffff; }
.tv-row .tag.uhd { background:#e50914; color:#000000; font-weight:700; }
.tv-row .tag.lng { background:#b08820; color:#ffffff; }
.tv-row.focus { background:rgba(125,211,252,0.18); border-left:3px solid #e50914; padding-left:11px; }
.tv-row.focus .num, .tv-row.focus .name { color:#ffffff; font-weight:600; }

.tv-info-pane {
  position:absolute; top:0; right:0; width:440px; bottom:30px;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.07); border-radius:5px;
  padding:20px; overflow:hidden;
}
.tv-info-pane .ch-name { font-size:20px; font-weight:700; color:#ffffff; letter-spacing:1px; margin-bottom:6px; }
.tv-info-pane .ch-meta { font-size:11px; color:rgba(255,255,255,0.55); letter-spacing:1px; margin-bottom:14px; text-transform:uppercase; }
.tv-info-pane .ch-logo {
  width:200px; height:120px; background:rgba(255,255,255,0.05); border-radius:4px;
  display:block; margin-bottom:18px; text-align:center; line-height:120px;
  font-size:11px; color:rgba(255,255,255,0.4); overflow:hidden;
}
.tv-info-pane .ch-logo img { width:200px; height:120px; object-fit:contain; }
/* Video slot when playing — exact px match for setPIG(940,144,320,180).
   Sits at top of info pane, leaves room below for channel meta. */
.tv-info-pane.is-playing { padding-top:200px; }
.tv-info-pane.is-playing .ch-logo { display:none; }
.tv-info-pane .pip-slot {
  display:none;
  position:absolute; top:20px; left:20px;
  width:320px; height:180px;
  background:#000; border-radius:4px;
  border:1px solid rgba(255,255,255,0.1);
}
.tv-info-pane.is-playing .pip-slot { display:block; }
.tv-info-pane .ch-now { font-size:11px; color:rgba(255,255,255,0.45); letter-spacing:1.5px; text-transform:uppercase; border-top:1px solid rgba(255,255,255,0.05); padding-top:14px; margin-bottom:8px; }
.tv-info-pane .epg-line { font-size:12px; color:rgba(255,255,255,0.7); padding:4px 0; }
.tv-info-pane .epg-line .epg-time { color:#e50914; margin-right:8px; }
.tv-info-pane .ch-hint {
  position:absolute; bottom:14px; left:20px; right:20px;
  font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:1px; text-transform:uppercase;
}
.tv-page {
  position:absolute; left:0; right:0; bottom:0; height:26px; line-height:26px;
  font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:1px;
  text-align:right; padding-right:6px;
}
.tv-page .pg { color:#e50914; font-weight:700; }

/* ---------- generic list rows (library/discover) ---------- */
.list-host { height:520px; overflow:hidden; }
.list-row {
  height:40px; line-height:40px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  white-space:nowrap; overflow:hidden;
}
.list-row .col-num { display:inline-block; width:48px; color:#e50914; font-weight:700; text-align:right; padding-right:12px; font-size:12px; }
.list-row .col-name { color:#ffffff; font-size:13px; }
.list-row .col-meta { float:right; color:rgba(255,255,255,0.5); font-size:11px; padding-left:12px; }
.list-row.focus { background:rgba(125,211,252,0.16); border-left:3px solid #e50914; padding-left:11px; }

.list-page { height:30px; line-height:30px; padding:0 14px; color:rgba(255,255,255,0.5); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.list-page .pg { color:#e50914; font-weight:700; }

/* ---------- language tiles (discover/library landing) ---------- */
.lang-search {
  margin-bottom:14px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1); border-radius:3px;
  padding:0 14px; height:42px; line-height:42px;
}
.lang-search.focus { border-color:#e50914; background:rgba(125,211,252,0.06); }
.lang-search .label { display:inline-block; color:#e50914; font-size:11px; letter-spacing:2px; padding-right:14px; border-right:1px solid rgba(255,255,255,0.12); margin-right:14px; }
.lang-search input { background:transparent; color:#ffffff; border:0; outline:0; font-family:inherit; font-size:14px; width:600px; line-height:42px; vertical-align:middle; }

.lang-grid { position:relative; }
.lang-tile {
  display:inline-block; vertical-align:top;
  width:230px; height:84px; margin:0 12px 12px 0;
  padding:14px 18px;
  background:rgba(255,255,255,0.04);
  border:2px solid rgba(255,255,255,0.08); border-radius:4px;
  cursor:pointer;
}
.lang-tile .lt-name { font-size:14px; font-weight:700; color:#ffffff; letter-spacing:2px; margin-bottom:6px; }
.lang-tile .lt-count { font-size:10px; color:rgba(255,255,255,0.5); letter-spacing:1px; }
.lang-tile.focus { border-color:#e50914; background:rgba(125,211,252,0.14); }
.lang-tile.focus .lt-count { color:#e50914; }

/* ---------- two-pane detail (movies/series after picking) ---------- */
.det-wrap { position:relative; height:540px; }
.det-list-pane {
  position:absolute; top:0; left:0; right:360px; bottom:32px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.07); border-radius:5px;
  overflow:hidden;
}
.det-info-pane {
  position:absolute; top:0; right:0; width:360px; bottom:32px;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,0.06); border-radius:6px;
  overflow:hidden;
}
.det-info-pane .backdrop {
  position:absolute; top:0; left:0; right:0; height:200px;
  background-size:cover; background-position:center;
  opacity:0.5;
}
.det-info-pane .backdrop-grad {
  position:absolute; top:0; left:0; right:0; height:230px;
  background:-webkit-linear-gradient(top, rgba(26,26,26,0) 35%, rgba(26,26,26,0.95) 100%);
}
.det-info-pane .pad { position:relative; padding:120px 18px 14px; }
.det-info-pane .poster {
  width:130px; height:195px;
  background:rgba(255,255,255,0.05); border-radius:4px;
  display:block; text-align:center; line-height:195px;
  font-size:10px; color:rgba(255,255,255,0.4); overflow:hidden;
  position:absolute; top:120px; left:18px;
  border:1px solid rgba(255,255,255,0.06);
  z-index:2;
}
.det-info-pane .poster img { width:130px; height:195px; display:block; }
.det-info-pane .pad-body { margin-left:144px; min-height:195px; }
.det-info-pane .ttl { font-size:16px; font-weight:700; color:#ffffff; letter-spacing:1px; margin-bottom:4px; }
.det-info-pane .meta { font-size:11px; color:rgba(255,255,255,0.55); letter-spacing:1px; margin-bottom:10px; }
.det-info-pane .ovw { font-size:12px; color:rgba(255,255,255,0.75); line-height:1.55; max-height:100px; overflow:hidden; }
.det-info-pane .hint {
  position:absolute; bottom:14px; left:16px; right:16px;
  font-size:10px; color:rgba(255,255,255,0.5); letter-spacing:1px; text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,0.05); padding-top:10px;
}
.det-info-pane .hint .play { color:#e50914; font-weight:700; }
.det-info-pane .hint .req  { color:#ffa64d; font-weight:700; }

/* ---------- search ---------- */
.search-tabs { margin-bottom:14px; }
.search-tabs .tab {
  display:inline-block; padding:6px 16px; margin-right:6px;
  background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.08); border-radius:3px;
  font-size:10px; letter-spacing:2px; font-weight:600;
}
.search-tabs .tab.active { background:rgba(125,211,252,0.1); color:#ffffff; border-color:#e50914; }
.search-tabs .tab.focus  { background:#e50914; color:#000000; border-color:#e50914; }

/* ---------- item detail (single title) ---------- */
.detail { position:relative; height:540px; }
.detail .poster { position:absolute; top:0; left:0; width:220px; height:330px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:5px; overflow:hidden; }
.detail .poster img { width:220px; height:330px; }
.detail .info { margin-left:244px; }
.detail .info .ttl { font-size:24px; font-weight:700; letter-spacing:1px; color:#ffffff; margin-bottom:6px; }
.detail .info .sub { font-size:12px; color:rgba(255,255,255,0.5); letter-spacing:1px; margin-bottom:18px; }
.detail .info .ovw { font-size:13px; color:rgba(255,255,255,0.75); line-height:1.7; margin-bottom:24px; max-width:740px; }
.detail .actions .btn { padding:10px 22px; font-size:12px; }

/* ---------- series detail (poster + meta + seasons/eps) ---------- */
.srs-wrap { position:relative; height:540px; }
.srs-poster {
  position:absolute; top:0; left:0; width:180px; height:270px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06);
  border-radius:5px; overflow:hidden;
}
.srs-poster img { width:180px; height:270px; }
.srs-meta { margin-left:204px; max-width:760px; padding-top:6px; }
.srs-meta .ovw { font-size:12px; color:rgba(255,255,255,0.75); line-height:1.7; max-height:120px; overflow:hidden; }
.srs-cols { position:absolute; left:0; right:0; top:290px; bottom:0; }
.srs-pane {
  display:inline-block; vertical-align:top;
  width:280px; height:240px; margin-right:14px;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.07); border-radius:5px;
  overflow-y:auto; overflow-x:hidden;
}
.srs-pane:nth-child(2) { width:840px; }
.srs-pane-title {
  font-size:11px; letter-spacing:3px; color:#e50914;
  padding:10px 14px 8px; text-transform:uppercase; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.srs-row {
  padding:8px 14px; font-size:13px; color:rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(255,255,255,0.03);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.srs-row .ep-count { color:rgba(255,255,255,0.4); font-size:10px; margin-left:6px; }
.srs-row.active { background:rgba(255,255,255,0.05); color:#ffffff; }
.srs-row.focus  { background:rgba(229,9,20,0.18); color:#ffffff; border-left:3px solid #e50914; padding-left:11px; font-weight:600; }
.srs-empty { padding:30px 16px; color:rgba(255,255,255,0.4); font-size:12px; text-align:center; }

/* ---------- player overlay ---------- */
.player-shell { position:absolute; top:0; left:0; width:1280px; height:720px; background:#000; z-index:30; }
.player-overlay {
  position:absolute; bottom:0; left:0; width:1280px; padding:18px 28px;
  background:rgba(0,0,0,0.7); color:#ffffff; font-size:13px;
}
.player-overlay .ttl { font-size:18px; font-weight:700; margin-bottom:6px; letter-spacing:1px; }
.player-overlay .sub { font-size:11px; color:rgba(255,255,255,0.55); letter-spacing:1px; text-transform:uppercase; }
.player-overlay .bar { width:100%; height:3px; background:rgba(255,255,255,0.15); margin-top:10px; }
.player-overlay .bar .fill { height:3px; background:#e50914; }
/* Volume overlay — visible bar + numeric, persists 1.5s */
#vol-overlay {
  position:absolute; top:80px; right:32px; z-index:90;
  background:rgba(0,0,0,0.85); padding:14px 20px;
  border:1px solid #e50914; border-radius:5px;
  color:#ffffff; font-weight:700; letter-spacing:2px;
  font-size:12px; min-width:240px; text-align:center;
  display:none;
}
#vol-overlay .vol-label { font-size:10px; color:#e50914; letter-spacing:3px; margin-bottom:8px; }
#vol-overlay .vol-bar {
  width:200px; height:8px; background:rgba(255,255,255,0.12);
  border-radius:2px; margin:0 auto 6px;
}
#vol-overlay .vol-fill {
  height:8px; background:#e50914; border-radius:2px;
  transition:width 0.15s ease-out;
}
#vol-overlay .vol-num { font-size:14px; color:#ffffff; }
.player-vol { display:none; } /* old style — superseded by #vol-overlay */

/* ---------- toast + modal ---------- */
#toast {
  position:absolute; bottom:64px; left:50%; margin-left:-200px; width:400px;
  padding:12px 18px; background:rgba(0,0,0,0.85);
  border:1px solid #e50914; border-radius:4px;
  color:#ffffff; font-size:13px; text-align:center; z-index:50; display:none;
}
#modal-host { position:absolute; top:0; left:0; width:1280px; height:720px; z-index:60; background:rgba(0,0,0,0.7); display:none; }
.modal-box { position:absolute; top:50%; left:50%; width:520px; margin:-100px 0 0 -260px; background:#142046; border:1px solid #e50914; border-radius:6px; padding:24px 28px; }
.modal-box .title { font-size:16px; font-weight:700; letter-spacing:1px; color:#e50914; margin-bottom:10px; }
.modal-box .msg { color:#ffffff; font-size:13px; line-height:1.6; margin-bottom:14px; }

/* ---------- info diag ---------- */
.kv { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.kv .k { display:inline-block; width:220px; color:rgba(255,255,255,0.5); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.kv .v { color:#ffffff; font-size:13px; }
.kv .v.ok { color:#e50914; }
.kv .v.bad { color:#ff4d6d; }