/* ================================================================
   LIVENEX TV — Watch Page & Player CSS — Netflix Premium Cinematic
   ================================================================ */

/* ── Watch Layout ── */
.watch-page {
  background:var(--bg);
  min-height:100vh;
  isolation:isolate;
}

.watch-container {
  max-width:1600px; margin:0 auto; padding:1.25rem 2rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:1.25rem; align-items:start;
}

/* ── Left Column ── */
.watch-left { min-width:0; }

/* ── Player Box — Netflix Cinematic ── */
.player-box {
  background:#000;border-radius:var(--r-lg,14px);overflow:hidden;
  position:relative;
  box-shadow:0 0 8px rgba(229,9,20,.2),0 0 20px rgba(229,9,20,.08),0 16px 48px rgba(0,0,0,.6);
  border:none;
  isolation:isolate;transform:translateZ(0);
}
[data-theme="light"] .player-box { border:none;box-shadow:0 12px 48px rgba(0,0,0,.15),0 0 10px rgba(229,9,20,.06) }

.player-aspect {
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;contain:paint style;
}
#main-video { width:100%;height:100%;display:block;object-fit:contain; }

/* Channel info strip above player */
.player-channel-strip {
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:.8rem 1.25rem;
  background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  visibility:hidden;opacity:0;transition:opacity .3s ease;
}
.player-box.controls-visible .player-channel-strip { visibility:visible; opacity:1; }
.player-channel-logo {
  width:40px;height:40px;border-radius:10px;
  object-fit:contain;background:rgba(255,255,255,.1);flex-shrink:0;
}
.player-channel-name {
  font-family:var(--font-head,'Inter',sans-serif);font-size:1rem;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:.5rem;
}
.player-channel-top-logo {
  height:36px;max-width:90px;object-fit:contain;filter:brightness(1.2);
}
.player-live-count {
  font-size:.75rem;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:.35rem;
}

/* Player controls overlay */
.player-controls {
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;visibility:hidden;
}
.player-controls::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 25%,transparent 50%);
  pointer-events:none;z-index:-1;transform:translateZ(0);
}
.player-box.controls-visible .player-controls { visibility:visible; pointer-events:auto; }
.player-box .player-aspect { cursor:default; }

/* Controls bottom bar */
.player-controls-bottom { padding:.6rem 1rem .75rem; }

/* Controls row */
.player-controls-row {
  display:flex;align-items:center;gap:.35rem;width:100%;height:42px;flex-wrap:nowrap;
}

/* Buttons — Larger Netflix-style */
.player-btn {
  background:none;border:none;color:rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;cursor:pointer;flex-shrink:0;padding:0;
  transition:background .15s,color .15s,transform .15s;
}
.player-btn:hover { color:#fff; background:rgba(255,255,255,.12);transform:scale(1.1) }
.player-btn:active { background:rgba(255,255,255,.2); }
.player-btn svg { width:20px; height:20px; }
.player-btn.lg { width:44px; height:44px; }
.player-btn.lg svg { width:24px; height:24px; }
.player-spacer { display:none; }


/* Volume */
.player-vol { display:flex;align-items:center;gap:0;height:40px;flex-shrink:0; }
.player-vol-wrap { position:relative;width:60px;height:40px;display:flex;align-items:center; }
.player-vol-track {
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:4px;border-radius:99px;background:rgba(255,255,255,.25);pointer-events:none;
}
.player-vol-fill { height:100%;border-radius:99px;background:#fff;width:80%;position:relative; }
.player-vol-fill::after {
  content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.4);
}
.player-vol-slider {
  -webkit-appearance:none;appearance:none;width:100%;height:40px;
  background:transparent;outline:none;cursor:pointer;
  position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;z-index:2;
}

/* ── Live Streaming Progress Bar ── */
.player-progress {
  flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.15);
  position:relative;overflow:hidden;min-width:0;margin:0 .75rem;
}
.player-progress-fill {
  position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:3px;
  background:linear-gradient(90deg,#831010,#E50914,#FF3D3D);
  background-size:200% 100%;animation:streamFlow 2s linear infinite;
}
.player-progress-fill::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#e53935 0%,#ff6659 40%,#ffffff 50%,#ff6659 60%,#e53935 100%);
  background-size:200% 100%;animation:streamFlow 1.5s linear infinite;border-radius:3px;
}
.player-progress-dot {
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(229,57,53,.8),0 0 12px rgba(229,57,53,.5);
  animation:dotPulse 1s ease-in-out infinite;z-index:2;
}

@keyframes streamFlow { 0%{background-position:200% 0}100%{background-position:-200% 0} }
@keyframes dotPulse {
  0%,100%{transform:translateY(-50%) scale(1);box-shadow:0 0 4px rgba(229,57,53,.8),0 0 8px rgba(229,57,53,.5)}
  50%{transform:translateY(-50%) scale(1.3);box-shadow:0 0 6px rgba(229,57,53,1),0 0 14px rgba(229,57,53,.7)}
}

/* Quality badge */
.player-quality-badge { display:none; }

/* ── Quality Popup — Desktop dropdown, tablet compact, mobile pill row ── */
.quality-popup {
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  right:0;
  background:rgba(12,12,12,.97);
  border-radius:10px;
  padding:4px 0;
  min-width:150px;
  z-index:100;
  box-shadow:0 8px 32px rgba(0,0,0,.85);
  overflow-y:auto;
  max-height:260px;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
}
.quality-popup-header {
  padding:7px 14px 5px;
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.07);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.quality-popup-item,.quality-popup .ql-item {
  padding:8px 14px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.85) !important;
  cursor:pointer;
  display:flex !important;
  align-items:center !important;
  gap:6px;
  background:transparent !important;
  transition:background .12s;
  white-space:nowrap;
}
.quality-popup-item:hover,.quality-popup .ql-item:hover {
  background:rgba(255,255,255,.09) !important;
  color:#fff !important;
}
.quality-popup-item.active,.quality-popup .ql-item.active {
  color:#E50914 !important;
  font-weight:800 !important;
}
.quality-popup-rec {
  display:inline;
  font-size:10px;
  color:rgba(255,255,255,.35);
  margin-left:3px;
  font-weight:400;
}

/* Tablet (769–1024px): slightly more compact dropdown */
@media(min-width:769px) and (max-width:1024px){
  .quality-popup { min-width:130px; max-height:220px; right:-4px; }
  .quality-popup-item,.quality-popup .ql-item { padding:7px 12px !important; font-size:12px !important; }
  .quality-popup-header { padding:6px 12px 4px; font-size:10px; }
}

/* Mobile (≤768px): compact horizontal pill bar */
@media(max-width:768px){
  .quality-popup {
    bottom:calc(100% + 6px);
    right:-8px;
    left:auto;
    min-width:0;
    max-height:none;
    padding:0;
    border-radius:20px;
    /* horizontal flex pill */
    display:none;
    flex-direction:row;
    align-items:center;
    overflow:visible;
    background:rgba(10,10,10,.97);
    box-shadow:0 4px 24px rgba(0,0,0,.9);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.1);
    white-space:nowrap;
  }
  .quality-popup.open { display:flex; }
  .quality-popup-header { display:none; }
  .quality-popup-item,.quality-popup .ql-item {
    padding:5px 9px !important;
    font-size:11px !important;
    font-weight:700 !important;
    color:rgba(255,255,255,.7) !important;
    border-right:1px solid rgba(255,255,255,.08);
    background:transparent !important;
    border-radius:0;
    flex-shrink:0;
    gap:0;
  }
  .quality-popup-item:first-of-type { border-radius:20px 0 0 20px; padding-left:11px !important; }
  .quality-popup-item:last-child,.quality-popup .ql-item:last-child {
    border-right:none;
    border-radius:0 20px 20px 0;
    padding-right:11px !important;
  }
  .quality-popup-item:hover,.quality-popup .ql-item:hover {
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
  }
  .quality-popup-item.active,.quality-popup .ql-item.active {
    color:#E50914 !important;
    background:rgba(229,9,20,.1) !important;
  }
  .quality-popup-rec { display:none; }
}

.yt-progress-container{display:none}
.yt-controls-left,.yt-controls-right{display:contents}
.yt-live-pill{display:none}

.player-live-badge {
  display:inline-flex;align-items:center;gap:.35rem;
  background:linear-gradient(90deg,#831010,#E50914,#FF3D3D);
  background-size:200% 100%;animation:streamFlow 2s linear infinite;color:#fff;
  font-size:.688rem;font-weight:800;letter-spacing:.08em;
  padding:.25rem .6rem;border-radius:5px;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(229,9,20,.4);
}
.player-live-badge::before {
  content:'';width:6px;height:6px;background:#fff;border-radius:50%;
  animation:pulseDot 1.5s ease-in-out infinite;will-change:opacity;transform:translateZ(0);
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}

.player-quality-badge {
  background:rgba(255,255,255,.1);color:#fff;
  font-size:.688rem;font-weight:700;padding:.25rem .6rem;border-radius:5px;
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
}
.player-spacer { flex:1; }

/* Fullscreen always visible */
#btn-fullscreen { display:flex !important; }

/* Center Play/Pause Button — YouTube style */
.player-center-play {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);border-radius:50%;
  color:#fff;cursor:pointer;
  opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s;
}
.player-box.controls-visible .player-center-play{opacity:1;visibility:visible}
.player-center-play:hover{background:rgba(229,9,20,.8);transform:translate(-50%,-50%) scale(1.1)}
.player-center-play:active{transform:translate(-50%,-50%) scale(.95)}

/* Loader */
.player-loader {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);z-index:6;pointer-events:none;
}
.player-spinner {
  width:52px;height:52px;border:3px solid rgba(255,255,255,.12);
  border-top-color:#E50914;border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

.player-error {
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);color:#fff;text-align:center;padding:2.5rem;z-index:6;
}
.player-error.visible { display:flex; }

/* Keyboard hints */
.player-hints {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.9);border-radius:12px;padding:1.25rem 2rem;
  display:none;grid-template-columns:1fr 1fr;gap:.6rem 2.5rem;z-index:7;pointer-events:none;
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);
}
.player-hints.visible { display:grid; }
.hint-row { display:flex;align-items:center;gap:.6rem;font-size:.813rem;color:rgba(255,255,255,.85); }
.hint-key {
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;padding:.15rem .55rem;font-size:.75rem;font-weight:700;color:#fff;white-space:nowrap;
}

/* Mini Player */
.mini-player {
  position:fixed;bottom:6rem;right:1.5rem;z-index:800;
  width:320px;border-radius:12px;overflow:hidden;
  background:#000;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 2px var(--primary,#E50914);
  display:none;cursor:grab;
}
.mini-player.active { display:block; }
.mini-player video { width:100%;display:block; }
.mini-player-bar { position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem; }
.mini-player-btn {
  width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.75);
  border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;
}

/* Theatre overlay */
.theatre-overlay { position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:700;display:none; }
.theatre-overlay.active { display:block; }


/* ── Channel News Ticker (inside player) ── */
.player-ticker {
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:flex-start;
  overflow:hidden;pointer-events:none;padding:.45rem .75rem;
  background:rgba(180,0,0,.95);
  transform:translateY(0) translateZ(0);transition:transform .3s ease;will-change:transform;
}
.player-box.controls-visible .player-ticker { transform:translateY(-36px) translateZ(0); }
.pticker-logo { height:36px;width:auto;object-fit:contain;flex-shrink:0;margin-right:.6rem;border-radius:4px;vertical-align:middle; }
.pticker-logo-slider { flex-shrink:0;width:85px;height:38px;position:relative;overflow:hidden;margin-right:.6rem;display:flex;align-items:center; }
.pticker-logo-slide { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease; }
.pticker-logo-slide.active { opacity:1; }
.pticker-badge { flex-shrink:0;background:rgba(0,0,0,.5);color:#fff;font-size:.75rem;font-weight:800;padding:.25rem .7rem;border-radius:4px;margin-right:.6rem;white-space:nowrap; }
.pticker-badge-dark { background:rgba(0,0,0,.6); }
.pticker-badge-outline { background:transparent;border:1.5px solid rgba(255,255,255,.7); }
.pticker-badge-solid { border-radius:4px; }
.pticker-badge-ghost { background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3); }
.pticker-badge-white { background:#fff;color:#b40000;font-weight:900; }
.pticker-scroll { flex:1;overflow:hidden;position:relative;display:flex;align-items:center; }
.pticker-track { display:flex;white-space:nowrap;will-change:transform; }
.pticker-track span { flex-shrink:0;color:#fff;font-size:.813rem;font-weight:600;padding:0 2.5rem; }
.pticker-divider { width:2px;height:24px;background:rgba(255,255,255,.25);flex-shrink:0;margin:0 .5rem; }
.pticker-flash { flex-shrink:0;background:#fff;color:#b40000;font-size:.688rem;font-weight:900;padding:.25rem .6rem;border-radius:4px;margin-right:.6rem;animation:tickerFlash 1s ease-in-out infinite;letter-spacing:.05em; }
@keyframes tickerFlash{0%,100%{opacity:1}50%{opacity:.5}}

/* Ticker Templates */
.player-ticker-headline { border-top:2px solid rgba(255,255,255,.15); }
.player-ticker-headline .pticker-badge { background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);font-size:.75rem; }
.player-ticker-modern { border-top:3px solid var(--color-primary,#E50914); }
.player-ticker-minimal { background:rgba(0,0,0,.6)!important;padding:.35rem .85rem;backdrop-filter:blur(4px); }
.player-ticker-minimal .pticker-track { font-size:.75rem;font-weight:500;opacity:.9; }
.player-ticker-breaking { border-top:2px solid #fff; }
.player-ticker-breaking .pticker-badge { background:#fff;color:#b40000;font-weight:900; }

/* ── Server Switcher ── */
.lnx-server-bar {
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:1rem;padding:.7rem 1.1rem;
  background:linear-gradient(135deg,#2a0a0a 0%,#3d1010 40%,#2a0505 100%);
  border:1px solid rgba(229,9,20,.25);border-radius:12px;
  box-shadow:0 4px 20px rgba(229,9,20,.08),inset 0 1px 0 rgba(255,255,255,.03);
}
[data-theme="light"] .lnx-server-bar { background:linear-gradient(160deg,#fff5f5,#ffe8e8,#fff0f0);border-color:rgba(229,9,20,.12); }
.lnx-server-label {
  font-size:.75rem;font-weight:700;color:rgba(255,255,255,.4);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;margin-right:.3rem;flex-shrink:0;
}
[data-theme="light"] .lnx-server-label { color:#94a3b8; }
.lnx-server-btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .9rem;border-radius:99px;
  border:1.5px solid rgba(255,255,255,.12);background:transparent;
  color:rgba(255,255,255,.6);font-size:.813rem;font-weight:700;
  cursor:pointer;transition:all .2s ease;white-space:nowrap;font-family:inherit;line-height:1.4;
}
[data-theme="light"] .lnx-server-btn { border-color:rgba(0,0,0,.1);color:#64748b; }
.lnx-server-btn:hover { border-color:var(--primary,#E50914);color:var(--primary,#E50914); }
.lnx-server-btn.active { background:var(--primary,#E50914);border-color:var(--primary,#E50914);color:#fff; }
.lnx-signal { display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-left:2px; }
.lnx-signal span { width:3px;background:currentColor;border-radius:2px;display:block;opacity:.35;transition:opacity .18s; }
.lnx-signal span:nth-child(1){height:4px}.lnx-signal span:nth-child(2){height:7px}.lnx-signal span:nth-child(3){height:10px}.lnx-signal span:nth-child(4){height:13px}
.lnx-server-btn.active .lnx-signal span { opacity:1; }

/* ── Channel Info Card ── */
.channel-info-card {
  background:var(--bg-c,#1F1F1F);border:1px solid var(--bd,rgba(255,255,255,.08));
  border-radius:12px;padding:1.1rem 1.25rem;margin-top:1rem;
  display:flex;align-items:flex-start;gap:1rem;
}
.channel-info-logo {
  width:60px;height:60px;border-radius:12px;flex-shrink:0;
  object-fit:contain;background:var(--bg-e,#181818);border:1px solid var(--bd);padding:4px;
}
.channel-info-body { flex:1;min-width:0; }
.channel-info-name {
  font-family:var(--font-head,'Inter',sans-serif);font-size:1.125rem;font-weight:900;
  display:flex;align-items:center;gap:.5rem;color:var(--t1,#fff);letter-spacing:-.02em;
}
.channel-verified { flex-shrink:0;width:20px;height:20px; }
.channel-info-meta {
  font-size:.813rem;color:var(--t3,#757575);margin-top:.25rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.channel-info-meta .sep { opacity:.3; }
.channel-watching { color:var(--primary,#E50914);font-weight:700; }
.channel-info-desc { font-size:.875rem;color:var(--t2,#B3B3B3);margin-top:.4rem;line-height:1.6; }
.channel-info-actions { display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem; }
.channel-action-btn { display:inline-flex;align-items:center;gap:.35rem; padding:.4rem 1rem;border-radius:99px; border:1.5px solid var(--bd);background:var(--bg-e); color:var(--t2);font-size:.813rem;font-weight:600;cursor:pointer; transition:all .2s ease;white-space:nowrap;text-decoration:none; }
.channel-action-btn:hover { border-color:var(--primary);color:var(--primary);background:rgba(229,9,20,.06); }
.channel-action-btn.fav:hover { border-color:#F43F5E;color:#F43F5E;background:rgba(244,63,94,.06); }

/* ── Channel Details Grid ── */
.channel-details {
  margin-top:.875rem;background:var(--bg-c);
  border:1px solid var(--bd);border-radius:12px;padding:1.25rem 1.5rem;
}
.channel-details-title { font-family:var(--font-head);font-size:1.063rem;font-weight:800;color:var(--t1);margin-bottom:.4rem; }
.channel-details-text { font-size:.875rem;color:var(--t2);line-height:1.7;margin-bottom:1rem; }
.channel-meta-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem; }
.channel-meta-item {
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1rem .6rem;background:var(--bg-e);border-radius:12px;
  border:1px solid var(--bd);text-align:center;
}
.channel-meta-icon {
  width:42px;height:42px;border-radius:50%;
  background:rgba(229,9,20,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.channel-meta-icon svg { stroke:var(--t2); }
.channel-meta-label { font-size:.625rem;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.06em; }
.channel-meta-value { font-size:.813rem;color:var(--primary);font-weight:700; }

/* ── Right Sidebar ── */
.watch-sidebar { position:sticky;top:85px; }
.sidebar-section {
  background:var(--bg-c);border:1px solid var(--bd);
  border-radius:12px;overflow:hidden;margin-bottom:1rem;
}
.sidebar-header {
  padding:.85rem 1.25rem;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;background:var(--bg-e);
}
.sidebar-title {
  font-family:var(--font-head);font-size:.875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;color:var(--t1);
}
.sidebar-view-all { font-size:.75rem;font-weight:700;color:var(--primary);text-decoration:none;transition:opacity .15s; }
.sidebar-view-all:hover { opacity:.7; }

/* Related channel item */
.related-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--bd);
  text-decoration:none;color:var(--t1);transition:background .2s ease;position:relative;
}
.related-item:last-child { border-bottom:none; }
.related-item:hover { background:var(--bg-e); }
.related-logo {
  width:56px;height:38px;border-radius:8px;flex-shrink:0;
  object-fit:contain;background:var(--bg-e);border:1px solid var(--bd);padding:3px;
}
.related-info { flex:1;min-width:0; }
.related-name { font-size:.875rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.related-meta { font-size:.75rem;color:var(--t3);margin-top:.15rem;display:flex;align-items:center;gap:.4rem; }
.related-badge { background:var(--primary);color:#fff;font-size:.625rem;font-weight:800;padding:.12rem .45rem;border-radius:4px;letter-spacing:.06em; }
.related-more-btn { background:none;border:none;color:var(--t3);cursor:pointer;padding:.3rem;border-radius:4px;display:flex;transition:color .15s;flex-shrink:0; }
.related-more-btn:hover { color:var(--t1); }


/* ── All Channels Section (Watch Page) ── */
.all-channels-section {
  background:var(--bg-c);border:1px solid var(--bd);border-radius:12px;
  margin-top:.875rem;overflow:hidden;
}
.all-channels-header {
  padding:.8rem 1.25rem;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;background:var(--bg-e);
}
.all-channels-title {
  font-family:var(--font-head);font-size:1.063rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--t1);
}
.all-channels-nav { display:flex;gap:.3rem; }
.all-channels-nav-btn {
  width:30px;height:30px;border-radius:6px;border:1px solid var(--bd);
  background:var(--bg-e);color:var(--t2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .2s;
}
.all-channels-nav-btn:hover { border-color:var(--primary);color:var(--primary); }
.all-channels-tabs {
  padding:.55rem 1rem;border-bottom:1px solid var(--bd);
  display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;background:var(--bg-c);
}
.all-channels-tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:.4rem 1rem;border-radius:99px;border:1px solid var(--bd);
  background:transparent;color:var(--t2);font-size:.875rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .2s;
}
.tab-btn.active,.tab-btn:hover { background:var(--primary);border-color:var(--primary);color:#fff; }
.all-channels-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;padding:.75rem;align-items:stretch; }
.mini-channel-item {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .75rem;border:1px solid var(--bd);border-radius:10px;
  text-decoration:none;color:var(--t1);transition:all .2s ease;position:relative;text-align:center;
  background:var(--bg-c);min-height:0;
}
.mini-channel-item:hover { background:var(--bg-e);border-color:var(--primary);transform:translateY(-2px); }
.mini-logo { width:56px;height:56px;border-radius:8px;flex-shrink:0;object-fit:contain;background:var(--bg-e);border:1px solid var(--bd); }
.mini-info { min-width:0;width:100%;overflow:hidden; }
.mini-name { font-size:.875rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mini-cat { font-size:.75rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mini-watch { font-size:.75rem;color:var(--primary);font-weight:600; }
.mini-live { position:absolute;top:.4rem;left:.5rem; }

/* ── Share Panel ── */
.share-panel {
  background:var(--bg-c);border:1px solid var(--bd);border-radius:12px;
  padding:1rem;margin-top:.875rem;
}
.share-title { font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.7rem; }
.share-links { display:flex;gap:.5rem;flex-wrap:wrap; }
.share-btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:99px;font-size:.813rem;font-weight:700;
  cursor:pointer;border:none;transition:transform .2s,box-shadow .2s;text-decoration:none;
}
.share-btn:hover { transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3); }
.share-copy { background:var(--bg-e);color:var(--t1);border:1px solid var(--bd); }
.share-fb { background:#1877F2;color:#fff; }
.share-wa { background:#25D366;color:#fff; }
.share-tg { background:#0088CC;color:#fff; }

/* ── Embed Box ── */
.embed-box {
  background:var(--bg-c);border:1px solid var(--bd);border-radius:12px;
  padding:1rem;margin-top:.875rem;
}
.embed-box textarea {
  width:100%;background:var(--bg-e);border:1px solid var(--bd);
  border-radius:var(--r-sm,6px);color:var(--t3);font-size:.75rem;
  font-family:monospace;padding:.75rem;resize:none;outline:none;margin-bottom:.6rem;
}

/* ── Mobile Related Channels ── */
.mobile-related-section { display:none; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Player
   ══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .watch-container { grid-template-columns:1fr;padding:1rem; }
  .watch-sidebar { position:static; }
  .channel-meta-grid { grid-template-columns:repeat(3,1fr); }
  .all-channels-grid { grid-template-columns:repeat(4,1fr); }
  .mobile-related-section { display:block;margin-top:.875rem; }
  .watch-sidebar .sidebar-section:first-child { display:none; }
  /* Hide Country meta on tablet */
  .meta-country { display:none; }
  /* Center share panel on tablet */
  .share-panel { text-align:center; }
  .share-title { text-align:center; }
  .share-links { justify-content:center; }
}
@media(max-width:768px){
  .watch-container { padding:.5rem;gap:.75rem; }
  .player-box{border-radius:8px}
  .channel-meta-grid { grid-template-columns:repeat(2,1fr); }
  .all-channels-grid { grid-template-columns:repeat(2,1fr);gap:.4rem;padding:.5rem; }
  .mini-channel-item { padding:.75rem .5rem;border-radius:8px; }
  .mini-logo { width:48px;height:48px; }
  .mini-name { font-size:.813rem; }
  .mini-cat { font-size:.688rem; }
  .mini-watch { font-size:.688rem; }
  /* Hide Country meta on mobile/tablet */
  .meta-country { display:none; }
  /* Center share panel */
  .share-panel { text-align:center; }
  .share-title { text-align:center; }
  .share-links { justify-content:center; }
  #btn-landscape { display:flex!important; }
  #btn-fullscreen { display:flex!important; }
  .player-vol-wrap { width:40px; }
  .player-controls-bottom { padding:.3rem .5rem .4rem; }
  .player-controls-row { gap:.2rem;height:36px; }
  .player-btn { width:32px;height:32px; }
  .player-btn svg { width:16px;height:16px; }
  .player-btn.lg { width:34px;height:34px; }
  .player-btn.lg svg { width:18px;height:18px; }
  .player-quality-badge { font-size:.55rem;padding:.15rem .35rem; }
  .player-live-badge { font-size:.55rem;padding:.15rem .4rem; }

  /* ── Mobile related channels: 2-column card grid ── */
  .mobile-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .5rem;
  }
  .mobile-related-grid .related-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border-bottom: none;
    border-radius: 10px;
    background: var(--bg-e);
    border: 1px solid var(--bd);
    overflow: hidden;
    position: relative;
  }
  .mobile-related-grid .related-item:hover { background: var(--bg-h, #2d2d2d); }

  /* Logo area — fills top of card */
  .mobile-related-grid .related-logo {
    width: 100%;
    height: 80px;
    border-radius: 0;
    object-fit: contain;
    background: #111;
    display: block;
    flex-shrink: 0;
  }

  /* LIVE badge — absolute top-left over logo */
  .mobile-related-grid .related-badge,
  .mobile-related-grid .related-badge--overlay {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 3;
    font-size: .575rem;
    font-weight: 800;
    padding: .18rem .5rem;
    border-radius: 4px;
    letter-spacing: .05em;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    box-shadow: 0 1px 6px rgba(229,9,20,.5);
    pointer-events: none;
  }
  .mobile-related-grid .related-badge--overlay::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    animation: pulseDot 1.5s ease-in-out infinite;
    flex-shrink: 0;
  }
  /* Hide any badge still inside meta row */
  .mobile-related-grid .related-meta .related-badge { display: none; }

  /* Hidden items beyond limit */
  .mobile-related-grid .rel-hidden { display: none !important; }

  /* Load More button row */
  .mobile-rel-loadmore {
    padding: .25rem .5rem .75rem;
  }
  .mobile-rel-loadmore-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--bd);
    background: var(--bg-e);
    color: var(--t2);
    font-family: var(--font-body);
    font-size: .813rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
  }
  .mobile-rel-loadmore-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(229,9,20,.06);
  }
  .mobile-rel-count { color: var(--t3); font-weight: 500; }

  /* Text area below logo */
  .mobile-related-grid .related-info {
    width: 100%;
    padding: .5rem .6rem .55rem;
  }
  .mobile-related-grid .related-name {
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .2rem;
    display: block;
  }
  .mobile-related-grid .related-meta {
    font-size: .688rem;
    gap: .3rem;
    flex-wrap: wrap;
    color: var(--t3);
  }
  .player-channel-strip { padding:.35rem .5rem; }
  .player-channel-logo { width:24px;height:24px; }
  .player-channel-name { font-size:.75rem; }
  .player-live-count { font-size:.6rem; }
  .player-progress { margin:0 .25rem; }
  .player-progress-dot { width:10px;height:10px; }
  .player-box.controls-visible .player-ticker { transform:translateY(-28px) translateZ(0); }
  .player-ticker { padding:.2rem .4rem; }
  .pticker-logo { height:16px; }
  .pticker-logo-slider { width:40px;height:18px; }
  .pticker-badge { font-size:.5rem;padding:.12rem .35rem;margin-right:.25rem; }
  .pticker-track span { font-size:.6rem;padding:0 1.5rem; }
  .pticker-divider { height:12px;margin:0 .2rem; }
  .pticker-flash { font-size:.45rem;padding:.1rem .3rem;margin-right:.25rem; }
  .channel-info-card{padding:.85rem 1rem}
  .channel-info-logo{width:48px;height:48px}
  .channel-info-name{font-size:1rem}
  .channel-action-btn{padding:.35rem .75rem;font-size:.75rem}
  .lnx-server-bar{padding:.5rem .75rem;gap:.4rem}
  .lnx-server-btn{font-size:.75rem;padding:.25rem .65rem}
}
@media(max-width:480px){
  .player-controls-bottom { padding:.2rem .35rem .25rem; }
  .player-controls-row { gap:.1rem;height:30px; }
  .player-btn { width:28px;height:28px; }
  .player-btn svg { width:14px;height:14px; }
  .player-btn.lg { width:30px;height:30px; }
  .player-btn.lg svg { width:16px;height:16px; }
  .player-vol-wrap { width:30px; }
  .player-vol-track { height:3px; }
  .player-vol-fill::after { width:7px;height:7px;right:-3px; }
  .player-progress { margin:0 .15rem;height:3px; }
  .player-progress-dot { width:8px;height:8px; }
  #btn-pip { display:none!important; }
  #btn-landscape { display:none!important; }
  .lnx-server-bar{padding:.4rem .6rem;gap:.3rem}
  .lnx-server-label{font-size:.625rem}
  .lnx-server-btn{font-size:.688rem;padding:.2rem .5rem}
}

/* ── Fullscreen + Landscape ── */
#btn-fullscreen { display:flex!important; }
#btn-landscape { display:flex!important; }
#btn-pip { display:flex!important; }
#btn-keyhints { display:flex!important; }

/* Fullscreen — all browsers, all orientations */
:fullscreen .player-aspect,
:-webkit-full-screen .player-aspect,
:-moz-full-screen .player-aspect {
  position:fixed!important;inset:0!important;
  width:100vw!important;height:100vh!important;height:100dvh!important;
  aspect-ratio:unset!important;background:#000!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
:fullscreen #main-video,
:-webkit-full-screen #main-video,
:-moz-full-screen #main-video {
  width:100vw!important;height:100vh!important;height:100dvh!important;
  object-fit:contain!important;object-position:center center!important;
  max-width:100vw!important;max-height:100vh!important;
}
.player-box:fullscreen,.player-box:-webkit-full-screen,.player-box:-moz-full-screen {
  width:100vw!important;height:100vh!important;height:100dvh!important;
  border-radius:0!important;background:#000!important;
}

/* Portrait fullscreen — center video vertically, no black gap below */
@media screen and (orientation:portrait){
  :fullscreen #main-video,
  :-webkit-full-screen #main-video,
  :-moz-full-screen #main-video {
    width:100vw!important;
    height:auto!important;
    max-height:100dvh!important;max-height:100vh!important;
    aspect-ratio:16/9;
    object-fit:contain!important;
    object-position:center center!important;
  }
  :fullscreen .player-aspect,
  :-webkit-full-screen .player-aspect,
  :-moz-full-screen .player-aspect {
    width:100vw!important;
    height:100vh!important;height:100dvh!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }
}

@media screen and (orientation:landscape) and (max-width:900px){
  .player-aspect { aspect-ratio:unset!important;height:100svh!important;height:100vh!important; }
  .player-box.fullscreen-mode {
    position:fixed!important;inset:0!important;z-index:9999!important;
    border-radius:0!important;width:100vw!important;height:100vh!important;
  }
  .player-box.fullscreen-mode .player-aspect { width:100vw!important;height:100vh!important; }
  .player-box.fullscreen-mode #main-video { object-fit:contain!important;object-position:center!important;width:100%!important;height:100%!important; }
}
@media screen and (orientation:portrait){ .watch-container { padding:.5rem!important; } }
.player-box.fullscreen-mode ~ * #mobile-bottom-nav { display:none!important; }

/* ── CSS Landscape Mode ── */
.lnx-landscape-active { overflow:hidden!important; }
.lnx-body-landscape {
  overflow:hidden!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
}
.lnx-landscape-mode {
  position:fixed!important;inset:0!important;z-index:99999!important;
  width:100vw!important;height:100vh!important;border-radius:0!important;margin:0!important;
}
.lnx-landscape-mode .player-aspect { width:100vw!important;height:100vh!important;aspect-ratio:unset!important;border-radius:0!important; }
.lnx-landscape-mode #main-video { width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important; }