/* MusLux Player — standalone reset (Tizen web app, no artifact skeleton) */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; width:100%; min-height:100%; }   /* min-height (not height) so long pages (Réglages) scroll fully */
img{ max-width:100%; }
[hidden]{ display:none !important; }

:root{
    color-scheme: dark;
    --bg:#05060a; --bg-2:#0a0d15; --elev:#12141c; --tile:#171a24;
    --line:rgba(255,255,255,.08); --text:#f5f7fb; --dim:#98a2b3; --dim-2:#6b7486;
    --accent:#0a84ff; --accent-2:#64b5ff; --live:#ff453a; --focus-rim:rgba(255,255,255,.92);
    --topbar-h:84px; --ease:cubic-bezier(.2,.7,.2,1);
    --topbar-grad:linear-gradient(180deg, rgba(5,6,10,.94), rgba(5,6,10,.6) 70%, transparent);
    --btn-bg:rgba(255,255,255,.12); --chip-bg:rgba(255,255,255,.04); --chip-on:rgba(255,255,255,.14);
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  }
  :root[data-app="light"]{
    color-scheme:light;
    --bg:#eff2f7; --bg-2:#e6eaf1; --elev:#ffffff; --tile:#e2e7f0;
    --line:rgba(10,20,40,.12); --text:#0b1220; --dim:#586274; --dim-2:#8790a0;
    --focus-rim:#0a84ff;
    --topbar-grad:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.62) 70%, transparent);
    --btn-bg:rgba(10,20,40,.06); --chip-bg:rgba(10,20,40,.05); --chip-on:rgba(10,20,40,.12);
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; color:var(--text); font-family:var(--font); font-size:16px; line-height:1.4;
    -webkit-font-smoothing:antialiased; letter-spacing:.1px; min-height:100%;
    background:
      radial-gradient(1200px 700px at 82% -6%, rgba(10,132,255,.16), transparent 60%),
      radial-gradient(900px 620px at 0% 8%, rgba(120,90,255,.12), transparent 58%),
      var(--bg);
  }
  .stage{ position:relative; padding-bottom:80px; min-height:100vh; }

  /* ---------------- Top bar ---------------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--topbar-h);
    padding:0 40px 0 34px;
    display:flex; align-items:center; gap:24px;
    background:var(--topbar-grad);
    backdrop-filter:saturate(140%) blur(18px); -webkit-backdrop-filter:saturate(140%) blur(18px);
    transition:opacity .3s var(--ease);
  }
  .topbar.hidden{ opacity:0; pointer-events:none; }
  /* Top bar is ALWAYS dark & opaque, in both themes, so it stays legible and consistent. */
  .topbar{ background:#0b0f1a !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 0 rgba(255,255,255,.06); }
  .topbar .brand, .topbar .clock, .topbar .tab.active{ color:#f5f7fb !important; }
  .topbar .tab{ color:#9aa4b6 !important; }
  .topbar .tab.is-focused, .topbar .icon-btn.is-focused{ color:#041022 !important; }
  .topbar .icon-btn{ color:#eef1f6 !important; background:rgba(255,255,255,.1); }
  .brand{ font-weight:800; font-size:23px; letter-spacing:-.2px; white-space:nowrap; }
  .brand span{ color:var(--accent-2); }
  .nav{ display:flex; gap:4px; margin:0 auto; }
  .tab{ appearance:none; border:0; background:transparent; color:var(--dim); font:inherit;
    font-weight:600; font-size:18px; padding:10px 17px; border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
  .tab-in{ display:inline-flex; align-items:center; gap:8px; }
  .tab-ico{ display:inline-flex; }
  .tab-ico svg{ width:18px; height:18px; display:block; }
  .tab.active{ color:var(--text); }
  .tab.active::after{ content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--accent); opacity:.9; }
  .tab.is-focused{ color:#041022; background:#fff; transform:translateY(-1px); }
  .tab.is-focused::after{ background:transparent; }
  .topmeta{ display:flex; align-items:center; gap:16px; margin-left:auto; margin-right:6px; color:var(--dim); }
  .clock{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
  .avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#2b6cff,#8a5cff);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; overflow:hidden; padding:0; position:relative; }
  .avatar.has-img{ background:#12151b; }
  .avatar .pf-ill, .avatar .pf-photo{ position:absolute; top:0;right:0;bottom:0;left:0; }
  .avatar .pf-ill svg, .avatar .pf-photo{ width:100%; height:100%; display:block; }
  .avatar .pf-photo{ object-fit:cover; border-radius:50%; }
  .avatar .pf-face{ font-size:18px; }
  .icon-btn{ width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.08);
    color:var(--text); display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease), background .2s var(--ease); }
  .icon-btn.is-focused{ background:#fff; color:#041022; transform:scale(1.08); }
  .icon-btn svg{ width:21px; height:21px; display:block; }

  /* ---------------- Back chip ---------------- */
  .backchip{ position:fixed; z-index:55; top:18px; left:28px;
    appearance:none; border:1px solid var(--line); cursor:pointer; font:inherit; font-weight:700; font-size:15px;
    color:#f5f7fb !important; background:rgba(8,10,16,.86); backdrop-filter:blur(10px);
    padding:9px 16px 9px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:7px;
    transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
  .backchip.is-focused{ background:#fff; color:#06101f !important; transform:scale(1.05); box-shadow:0 0 0 3px var(--focus-rim); }
  .backchip[hidden]{ display:none; }

  /* ---------------- Views ---------------- */
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------------- Hero (home) ---------------- */
  .hero{ position:relative; margin-top:var(--topbar-h);
    min-height:520px; padding:78px 48px 40px; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
  .hero-bg{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:-2;
    background:radial-gradient(120% 120% at 78% 20%, #21407e 0%, #142a55 34%, #0a1430 62%, #05060a 100%); }
  .hero-bg::after{ content:""; position:absolute; top:-10%;right:-10%;bottom:-10%;left:-10%;
    background:radial-gradient(50% 40% at 30% 30%, rgba(120,180,255,.18), transparent 70%); animation:drift 18s ease-in-out infinite alternate; }
  .hero-scrim{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:-1;
    background:linear-gradient(90deg, rgba(5,6,10,.88) 0%, rgba(5,6,10,.55) 34%, transparent 62%), linear-gradient(0deg, var(--bg) 2%, transparent 46%); }
  @keyframes drift{ from{ transform:translate(-3%,-2%) } to{ transform:translate(4%,3%) } }
  .hero-in{ max-width:640px; }
  .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#ffd9d6; }
  .live-dot{ width:9px; height:9px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(255,69,58,.6); animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,69,58,.55)} 70%{box-shadow:0 0 0 12px rgba(255,69,58,0)} 100%{box-shadow:0 0 0 0 rgba(255,69,58,0)} }
  .hero-title{ font-size:clamp(34px,5vw,60px); line-height:1.02; font-weight:800; letter-spacing:-1.4px; margin:14px 0 12px; text-wrap:balance; }
  .hero-meta{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; color:var(--text); font-weight:600; font-size:15px; }
  .hero-meta .pill{ padding:3px 10px; border:1px solid var(--line); border-radius:6px; color:var(--dim); font-weight:600; }
  .hero-desc{ color:var(--dim); margin:14px 0 22px; font-size:17px; max-width:560px; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

  .btn{ appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:16px; padding:13px 24px; border-radius:12px;
    display:inline-flex; align-items:center; gap:10px; background:var(--btn-bg); color:var(--text);
    transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
  .btn.primary{ background:#fff; color:#06101f; }
  .btn .gl{ font-size:15px; }
  .btn.is-focused{ transform:translateY(-2px) scale(1.04); box-shadow:0 0 0 3px var(--focus-rim), 0 18px 34px -14px rgba(0,0,0,.8); }

  /* ---------------- Shelves / rows ---------------- */
  .shelves{ display:flex; flex-direction:column; gap:6px; padding-top:calc(var(--topbar-h) + 40px); }
  .shelf{ padding:18px 0 10px; }
  .shelf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:0 48px; margin-bottom:4px; }
  .shelf-title{ font-size:22px; font-weight:700; letter-spacing:-.3px; }
  .see-all{ appearance:none; border:0; background:transparent; color:var(--accent); font:inherit; font-weight:800; font-size:19px; letter-spacing:.2px; cursor:pointer; padding:6px 12px; border-radius:10px; flex:0 0 auto; }
  .see-all.is-focused{ background:#fff; color:#06101f; }
  .chips{ display:flex; gap:10px; padding:8px 48px 4px; overflow-x:auto; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ appearance:none; border:1px solid var(--line); background:var(--chip-bg); color:var(--text); font:inherit;
    font-weight:700; font-size:14.5px; padding:7px 15px; border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
  .fl-name{ font-weight:700; }
  /* small flag inside a genre chip (replaces the [TR]/[FR]… code) */
  .chip-flag{ display:inline-block; width:20px; height:14px; border-radius:3px; overflow:hidden; margin-right:7px; vertical-align:-2px; line-height:0; }
  .chip-flag .flagsvg{ width:100%; height:100%; display:block; }
  .chip.on{ color:var(--text); border-color:transparent; background:var(--chip-on); }
  .chip.is-focused{ background:#fff; color:#06101f; border-color:transparent; transform:translateY(-1px); }
  .row{ display:flex; gap:22px; padding:34px 48px 30px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .row::-webkit-scrollbar{ display:none; }

  /* ---------------- Card + tile (shared) ---------------- */
  .card{ flex:0 0 auto; background:transparent; border:0; padding:0; margin:0; cursor:pointer; text-align:left; color:inherit; font:inherit; outline:none; }
  /* Card artwork tiles keep a dark base in BOTH themes so white overlay text stays readable
     even where a poster image is missing. */
  .poster .tile, .channel .tile, .cont .tile, .cat .tile{ background:#12151d; }
  /* The gradient/image fill layers use z-index:-1; make each art wrapper its own stacking context
     so those layers paint ABOVE the tile background (old TVs otherwise hide them behind it). */
  .poster-art, .ch-art, .cont-art, .cat-art{ isolation:isolate; z-index:0; }
  .tile{ position:relative; overflow:hidden; border-radius:16px; background:var(--tile);
    --s:1; --ty:0px; --rx:0deg; --ry:0deg;
    transform:perspective(1000px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
    transform-style:preserve-3d; box-shadow:0 10px 24px -16px rgba(0,0,0,.9);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); will-change:transform; }
  .card.is-focused .tile{ --s:1.075; --ty:-6px; filter:brightness(1.05);
    box-shadow:0 0 0 3px var(--focus-rim), 0 34px 58px -18px rgba(0,0,0,.85); z-index:2; }
  .tile::after{ content:""; position:absolute; top:0;right:0;bottom:0;left:0; opacity:0; transition:opacity .3s var(--ease);
    background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.20), transparent 60%); mix-blend-mode:screen; }
  .card.is-focused .tile::after{ opacity:1; }

  /* Each card is pinned to its tile width so a long caption can't widen it and
     throw off the even spacing of the row. */
  .card.poster{ width:190px; }
  .card.channel{ width:320px; }
  .card.cont{ width:300px; }
  .card.cat{ width:240px; }
  .poster .tile{ width:190px; height:285px; }   /* explicit height (aspect-ratio unsupported on old TV WebViews) */
  /* Pure image fill — NO padding (the old TV resolves the image's height:100% against the content
     box, so any padding here left a black band at the bottom of every poster). */
  .poster-art{ position:absolute; top:0;right:0;bottom:0;left:0; overflow:hidden; }
  .poster-art .g{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:-1; }
  .poster-art .art-img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
  .poster-vig{ position:absolute; top:0;right:0;bottom:0;left:0; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); }
  .badge{ position:absolute; top:12px; right:12px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.4px;
    padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.5); color:#fff; backdrop-filter:blur(4px); }
  .poster .genre{ position:relative; font-size:12px; font-weight:700; color:rgba(255,255,255,.82); letter-spacing:.4px; text-transform:uppercase; }
  .poster .ptitle{ position:relative; font-size:17px; font-weight:700; line-height:1.1; margin-top:3px; text-shadow:0 1px 8px rgba(0,0,0,.5); }

  .channel .tile{ width:320px; height:180px; }
  .ch-art{ position:absolute; top:0;right:0;bottom:0;left:0; display:flex; flex-direction:column; justify-content:space-between; padding:16px; }
  .ch-art .g{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:-1; }
  .ch-top{ display:flex; align-items:center; justify-content:space-between; }
  .ch-logo{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 10px; border-radius:11px;
    background:rgba(0,0,0,.32); backdrop-filter:blur(6px); font-weight:800; font-size:18px; letter-spacing:-.5px; }
  .ch-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:1px; color:#fff; }
  .ch-topr{ display:inline-flex; align-items:center; gap:8px; }
  .ch-qual{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.5px;
    color:#fff; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
  .ch-now{ font-size:15px; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); }
  .ch-next{ font-size:12.5px; color:rgba(255,255,255,.78); margin-top:2px; text-shadow:0 1px 6px rgba(0,0,0,.6); }
  /* On-artwork text is always light (it sits over the dark card fill), regardless of theme. */
  .ch-logo, .ch-live, .cat-name{ color:#fff; }

  .cont .tile{ width:300px; height:169px; }
  .cont-art{ position:absolute; top:0;right:0;bottom:0;left:0; }
  .cont-art .g{ position:absolute; top:0;right:0;bottom:0;left:0; }
  .play-badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%;
    background:rgba(0,0,0,.42); backdrop-filter:blur(6px); display:grid; place-items:center; font-size:20px; color:#fff;
    opacity:0; transition:opacity .3s var(--ease); }
  .card.is-focused .play-badge{ opacity:1; }
  .progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.22); z-index:3; overflow:hidden; }
  /* Fill width is set by JS after render (paintProgress) — same as the live-channel bars, which fill
     correctly on this TV. A width baked into the initial HTML doesn't resolve on this old WebView. */
  .progress > i{ display:block; height:100%; width:0; background:var(--accent); }
  .progress.done > i{ background:#30d158; }
  /* resume card: always-readable title over the artwork */
  .cont-fade{ position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(transparent, rgba(0,0,0,.86)); pointer-events:none; }
  .cont-title{ position:absolute; left:14px; right:14px; bottom:12px; pointer-events:none; }
  .cont-title b{ display:block; font-weight:800; font-size:16px; line-height:1.2; text-shadow:0 1px 5px rgba(0,0,0,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cont-title span{ display:block; margin-top:2px; color:rgba(255,255,255,.82); font-size:12.5px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.7); }
  /* channel card: progress of the current programme */
  .ch-prog{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18); opacity:0; transition:opacity .25s var(--ease); }
  .ch-prog > i{ display:block; height:100%; width:0; background:var(--accent); }

  /* ---------------- EPG guide (grid) ---------------- */
  .grid-head{ display:flex; align-items:center; gap:16px; }
  .guide{ padding:calc(var(--topbar-h) + 10px) 0 0; }
  .guide-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 48px 10px; }
  /* Temporary diagnostic strip (raw panel clock + sample programme timestamp) to pin the guide offset. */
  .g-diag{ margin:0 48px 8px; padding:6px 10px; border-radius:8px; background:rgba(255,140,0,.12); border:1px solid rgba(255,140,0,.4);
    color:var(--text); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; line-height:1.5; word-break:break-all; }
  .g-note{ color:var(--dim); font-size:13.5px; padding:0 48px 10px; }
  .guide-scroll{ height:calc(100vh - var(--topbar-h) - 88px); overflow:auto; scrollbar-width:none; margin:0 24px; border-radius:16px; }
  .guide-scroll::-webkit-scrollbar{ display:none; }
  .guide-inner{ position:relative; }
  .g-timehead{ display:flex; position:sticky; top:0; z-index:6; height:48px; }
  .g-corner{ position:sticky; left:0; z-index:7; width:210px; flex:0 0 210px; background:var(--bg); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; padding:0 16px; box-shadow:1px 0 0 var(--line); }
  .g-corner-l{ font-weight:800; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--dim-2); }
  .g-corner .g-clock{ font-weight:800; font-size:17px; color:var(--live); letter-spacing:.3px; }
  /* live "Il est HH:MM" badge in the guide header, so the guide time is unmistakably the TV clock */
  .g-now-badge{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--text); background:var(--elev); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-left:auto; }
  .g-now-badge .g-clock{ color:var(--live); font-weight:800; }
  .g-now-dot{ width:9px; height:9px; border-radius:50%; background:var(--live); box-shadow:0 0 8px rgba(255,59,48,.7); }
  .g-timehead{ background:var(--bg); }
  .g-ticks{ position:relative; background:var(--bg); box-shadow:inset 0 -1px 0 var(--line); }
  .g-tick{ position:absolute; top:0; height:48px; display:flex; align-items:center; padding-left:6px; font-size:12px; color:var(--dim); border-left:1px solid var(--line); }
  .g-tick.hour{ color:var(--text); font-weight:800; }
  /* hour label as a solid readable chip so it never blends into the header */
  .g-tick.hour{ top:11px; height:auto; padding:3px 7px; border-left:0; background:var(--elev); border:1px solid var(--line); border-radius:7px; }
  /* the very first label IS "now" — paint it as a live chip so it reads as the current time */
  .g-tick.g-now-tick{ background:var(--live); border-color:var(--live); color:#fff; font-weight:800; }
  .g-rows{ position:relative; }
  .g-row{ display:flex; height:64px; }
  .g-ch{ position:sticky; left:0; z-index:5; width:210px; flex:0 0 210px; display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--elev); box-shadow:1px 0 0 var(--line), 0 -1px 0 var(--line); overflow:hidden; }
  .g-ch-logo,.g-ch-logo-img{ width:38px; height:38px; flex:0 0 38px; object-fit:contain; background:transparent; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:var(--dim); }
  .g-ch-name{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .g-lane{ position:relative; box-shadow:0 -1px 0 var(--line); }
  .g-loading{ position:absolute; left:10px; top:22px; width:120px; height:20px; border-radius:6px; background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.1), rgba(255,255,255,.05)); }
  .g-prog{ position:absolute; top:6px; bottom:6px; appearance:none; border:0; cursor:pointer; text-align:left; overflow:hidden;
    background:var(--tile); color:var(--text); border-radius:9px; padding:7px 10px; box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:2px;
    transition:box-shadow .15s var(--ease), transform .15s var(--ease); }
  .g-prog.live{ background:linear-gradient(180deg, rgba(10,132,255,.28), rgba(10,132,255,.12)); box-shadow:inset 0 0 0 1px rgba(10,132,255,.5); }
  .g-prog.g-empty{ color:var(--dim); background:repeating-linear-gradient(45deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 8px, transparent 8px, transparent 16px); }
  .g-prog.is-focused{ box-shadow:0 0 0 3px var(--focus-rim); transform:translateY(-1px); z-index:2; }
  .g-prog-time{ font-size:11px; color:var(--dim); font-weight:700; }
  .g-prog.live .g-prog-time{ color:var(--accent-2); }
  .g-prog-t{ font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .g-nowline{ position:absolute; top:48px; bottom:0; width:2px; background:var(--live); z-index:4; pointer-events:none; box-shadow:0 0 8px rgba(255,59,48,.6); }
  .g-nowline::before{ content:""; position:absolute; top:-4px; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--live); }

  /* ---------------- Guide v2 (channel list + schedule panel, "Yes IPTV" style) ---------------- */
  .guide2{ padding:calc(var(--topbar-h) + 12px) 0 0; height:100vh; display:flex; flex-direction:column; }
  .g2-title{ padding:0 40px 12px; font-size:28px; font-weight:800; display:flex; align-items:baseline; gap:14px; }
  .g2-count{ font-size:14px; color:var(--dim); font-weight:600; }
  .g2-body-wrap{ flex:1; display:flex; min-height:0; padding:0 24px 22px; gap:16px; }
  .g2-list{ width:440px; flex:0 0 440px; overflow-y:auto; scrollbar-width:none; padding:4px 6px 60px; }
  .g2-list::-webkit-scrollbar{ display:none; }
  .g2-ch{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; appearance:none; border:0; background:transparent; color:inherit; font:inherit;
    padding:9px 14px; border-radius:12px; cursor:pointer; margin-bottom:2px; transition:background .12s var(--ease), transform .12s var(--ease); }
  .g2-ch.is-focused{ background:#fff; color:#06101f; transform:translateX(2px); }
  .g2-logo{ width:44px; height:44px; flex:0 0 44px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.06); }
  .g2-logo-txt{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:var(--dim); }
  .g2-ch.is-focused .g2-logo-txt{ color:#06101f; background:rgba(10,20,40,.08); }
  .g2-ch-name{ font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .g2-panel{ flex:1; min-width:0; overflow-y:auto; scrollbar-width:none; background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:24px 28px 40px; }
  .g2-panel::-webkit-scrollbar{ display:none; }
  .g2-head{ display:flex; align-items:center; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
  .g2-hlogo{ width:54px; height:54px; flex:0 0 54px; object-fit:contain; border-radius:10px; background:rgba(255,255,255,.06); }
  .g2-hname{ font-size:24px; font-weight:800; min-width:0; }
  .g2-head .btn{ margin-left:auto; }
  .g2-sec{ font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--accent-2); margin:24px 0 10px; }
  .g2-now{ display:flex; gap:18px; background:linear-gradient(180deg, rgba(10,132,255,.18), rgba(10,132,255,.05)); border:1px solid rgba(10,132,255,.32); border-radius:14px; padding:16px 18px; }
  .g2-when{ flex:0 0 92px; display:flex; flex-direction:column; gap:2px; }
  .g2-when b{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
  .g2-when span{ font-size:13px; color:var(--dim); }
  .g2-body2{ flex:1; min-width:0; }
  .g2-now .g2-t{ font-size:18px; font-weight:700; }
  .g2-prog{ height:5px; border-radius:5px; background:rgba(255,255,255,.16); margin-top:12px; overflow:hidden; }
  .g2-prog > i{ display:block; height:100%; background:var(--accent); }
  .g2-list2{ display:flex; flex-direction:column; }
  .g2-row{ display:flex; gap:18px; padding:13px 4px; border-bottom:1px solid var(--line); }
  .g2-row:last-child{ border-bottom:0; }
  .g2-row .g2-when{ flex:0 0 92px; }
  .g2-row .g2-when b{ font-size:17px; }
  .g2-row .g2-t{ font-size:16px; font-weight:600; align-self:center; }
  .g2-date{ font-size:12px; color:var(--dim); }
  .g2-none{ color:var(--dim); padding:14px 4px; font-size:15px; }
  .g2-loading{ padding:50px; display:flex; justify-content:center; }
  @media (max-width:900px){ .g2-list{ width:300px; flex-basis:300px; } }

  /* Centre transport cluster (Ora-Pro style). It's shown while the UI is up and hidden with the overlay
     during steady playback (`.player-ui.hide .player-center` below). */

  .cat .tile{ width:240px; height:120px; }
  .cat-art{ position:absolute; top:0;right:0;bottom:0;left:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; padding:16px; font-weight:800; font-size:20px; letter-spacing:-.3px; }
  .cat-art .g{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:-1; }
  .cat-name{ min-width:0; }

  /* ---------------- country flags ---------------- */
  .flag{ display:inline-block; width:22px; height:15.4px; border-radius:3px; overflow:hidden; line-height:0; vertical-align:middle;
    box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4); }
  .flagsvg{ display:block; width:100%; height:100%; }
  .ch-flag{ position:absolute; bottom:14px; right:14px; z-index:3; }
  .ch-flag .flag{ width:30px; height:21px; border-radius:4px; }
  .cat-flag{ display:inline-block; width:34px; height:23.8px; border-radius:4px; overflow:hidden; line-height:0; flex:0 0 auto;
    box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45); }
  .detail-flag{ width:26px; height:18.2px; border-radius:3px; margin-right:2px; }
  .flagrow{ padding-top:14px; padding-bottom:2px; }
  .flagchip{ display:inline-flex; align-items:center; gap:9px; }
  .flagchip .flag{ width:24px; height:16.8px; }
  .fl-name{ white-space:nowrap; }
  /* selected countries stand out in the accent colour, even when not focused */
  .flagchip.on{ background:var(--accent); border-color:transparent; color:#fff; box-shadow:0 4px 14px -6px var(--accent); }
  .flagchip.on .fl-name{ color:#fff; }
  .flagchip.on::after{ content:"✓"; font-weight:800; font-size:12px; margin-left:2px; }
  .flagchip.on.is-focused{ background:#fff; color:#06101f; box-shadow:0 0 0 3px var(--accent); }
  .flagchip.on.is-focused .fl-name{ color:#06101f; }

  /* Caption sits under the card and is ALWAYS visible (card image stays clean). */
  .cap{ min-height:64px; padding:10px 4px 0; width:100%; box-sizing:border-box; overflow:hidden; }
  .cap b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:14.5px; line-height:1.22; }
  .cap small{ display:block; color:var(--dim); font-weight:600; font-size:12.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------------- Section grid view ---------------- */
  .grid-top{ margin-top:calc(var(--topbar-h) + 24px); padding:26px 48px 0; }
  .grid-title{ font-size:34px; font-weight:800; letter-spacing:-.6px; }
  .grid-sub{ color:var(--dim); font-size:15px; font-weight:600; margin-top:2px; }
  .grid{ display:grid; gap:26px 22px; grid-gap:26px 22px; padding:26px 48px 40px; justify-content:center; }   /* grid-gap = old-browser fallback (TV); centered = balanced left/right */
  .grid.posters{ grid-template-columns:repeat(auto-fill,190px); }
  .grid.wide{ grid-template-columns:repeat(auto-fill,320px); }
  .grid.cats{ grid-template-columns:repeat(auto-fill,240px); }
  .grid .card{ scroll-snap-align:unset; }
  .grid-empty{ padding:40px 48px; color:var(--dim); font-size:18px; }
  /* favourites can mix posters (2:3) and channel cards (16:9) → flex wrap */
  .fav-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:26px 22px; padding:26px 48px 40px; }

  /* ---------------- Detail view ---------------- */
  .detail{ position:relative; min-height:100vh; }
  /* Detail hero: a blurred ambient layer + the sharp affiche anchored right,
     with gradients that keep the title readable on the left. */
  .detail-hero{ position:absolute; left:0; right:0; top:0; height:86vh; z-index:-2; overflow:hidden; background:var(--bg); }
  .detail-hero .g{ position:absolute; top:0;right:0;bottom:0;left:0; }
  .detail-blur{ position:absolute; top:0;right:0;bottom:0;left:0; width:100%; height:100%; object-fit:cover; transform:scale(1.12); filter:blur(42px) saturate(1.25) brightness(.5); }
  .detail-art{ position:absolute; right:0; top:0; height:100%; width:54%; object-fit:cover; object-position:center 20%; }
  /* Detail hero is a cinematic dark panel in BOTH themes → text stays readable over the artwork. */
  .detail-fade{ position:absolute; top:0;right:0;bottom:0;left:0;
    background:
      linear-gradient(90deg, #05060a 0%, rgba(5,6,10,.92) 30%, rgba(5,6,10,.5) 50%, rgba(5,6,10,.12) 66%, transparent 78%),
      linear-gradient(0deg, #05060a 4%, rgba(5,6,10,.32) 26%, transparent 56%); }
  .detail-hero{ background:#05060a !important; }
  .detail-title{ color:#fff; }
  .detail-desc{ color:rgba(255,255,255,.82); }
  .detail-eyebrow{ color:rgba(255,255,255,.78); }
  .detail-meta{ color:#fff; }
  .detail-meta .pill, .detail-eyebrow .pill{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.22); }
  /* Content spans full width so the shelves below (episodes, same-genre) fill the
     screen; the header text keeps its own readable max-widths. */
  .detail-content{ padding:calc(var(--topbar-h) + 40px) 48px 60px; }
  .detail-eyebrow{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:var(--dim); font-weight:700; font-size:14px; letter-spacing:.4px; text-transform:uppercase; }
  .detail-eyebrow .hd{ color:var(--accent-2); }
  .detail-title{ font-size:clamp(36px,5.2vw,60px); font-weight:800; letter-spacing:-1.4px; line-height:1.02; margin:12px 0 14px; text-wrap:balance; max-width:16ch; }
  /* Hero panel is always dark → fixed light colour (not theme --text, which is dark in light mode
     and would vanish on the dark artwork). Bold, as requested. */
  .detail-meta{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:#fff; font-weight:800; font-size:15px; margin-bottom:16px; }
  .detail-meta .pill{ padding:3px 10px; border:1px solid rgba(255,255,255,.22); border-radius:6px; color:rgba(255,255,255,.85); font-weight:700; }
  .star{ color:#ffd54a; }
  /* Synopsis: fixed light colour + semibold in BOTH themes (the hero is always dark), as requested. */
  .detail-desc{ color:rgba(255,255,255,.92); font-weight:600; font-size:17px; max-width:640px; margin-bottom:24px; }
  .detail-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
  /* The action row (Lire / Reprendre / + Favoris) sits on the always-dark hero, so its buttons carry
     fixed colours instead of the theme --btn-bg/--text — otherwise the non-focused ones are a dark
     tint with dark text on a dark panel (invisible in the light theme). Same pattern as the quit box. */
  .detail-actions .btn{ background:rgba(255,255,255,.16); color:#f5f7fb; }
  .detail-actions .btn.primary{ background:#fff; color:#06101f; }
  .detail-actions .btn.is-focused{ background:#fff; color:#06101f; }

  .seasons{ display:flex; gap:10px; margin:28px 0 6px; overflow-x:auto; scrollbar-width:none; }
  .seasons::-webkit-scrollbar{ display:none; }
  /* Episodes are a horizontal shelf of 16:9 cards, like the other rows. */
  /* Generous top/side padding so the focused card's scale-up + white ring isn't clipped by overflow-y:hidden. */
  .eps{ display:flex; flex-direction:row; gap:20px; padding:28px 16px 22px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .eps::-webkit-scrollbar{ display:none; }
  /* Episode card = a "Reprendre"-style content card: a filled 300×169 thumb with the title in a .cap below.
     It carries the .card.cont classes, so it inherits the tile sizing, focus-scale, play-badge and .cap. */
  .ep{ appearance:none; border:none; background:transparent; color:inherit; font:inherit; text-align:left;
    flex:0 0 auto; width:300px; padding:0; cursor:pointer; }
  .ep-num{ position:absolute; left:10px; bottom:8px; z-index:3; font-weight:800; font-size:14px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
  /* Bulletproof "cover" fill: this panel's object-fit is unreliable for portrait stills, so size the image by
     its min-dimensions and centre it — it always covers the 300×169 tile whatever the source aspect ratio. */
  .ep .art-img{ position:absolute; top:50%; left:50%; right:auto; bottom:auto;
    width:auto; height:auto; min-width:100%; min-height:100%; max-width:none; max-height:none;
    transform:translate(-50%,-50%); object-fit:cover; z-index:0; }
  .ep .cap{ min-height:56px; }
  .ep .cap b{ -webkit-line-clamp:1; }
  .block-title{ font-size:22px; font-weight:700; margin:10px 0 2px; }
  /* Episodes / "same genre" rail sits lower so it fills the empty lower half of the detail screen.
     (A touch higher than before so the taller episode row — with its focus ring — stays fully on screen.) */
  .detail-rail{ margin-top:5vh; }
  .detail-rail.film-rail{ margin-top:13vh; }   /* films: push the "same genre" row toward the bottom */

  /* ---------------- Player view ---------------- */
  .player{ position:fixed; top:0;right:0;bottom:0;left:0; z-index:40; background:#000; overflow:hidden; }
  .player-bg{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:0; }
  .player-bg .g{ position:absolute; top:-6%;right:-6%;bottom:-6%;left:-6%; animation:kb 26s ease-in-out infinite alternate; }
  @keyframes kb{ from{ transform:scale(1.05) translate(-1%,-1%) } to{ transform:scale(1.14) translate(2%,2%) } }
  .player-vig{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:1; background:radial-gradient(120% 120% at 50% 40%, transparent 40%, rgba(0,0,0,.6)); }
  .player-ui{ position:absolute; top:0;right:0;bottom:0;left:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between;
    transition:opacity .4s var(--ease); }
  .player-ui.hide{ opacity:0; }
  /* Once fully faded during playback, DROP the whole overlay from the render tree (display:none), not just
     visibility:hidden — this destroys its compositing backing store so no stale paint can linger over the
     transparent video hole (the "trail"). The vignette is a sibling of .player-ui, so the picture stays. */
  .player-ui.gone{ display:none !important; }
  /* When the UI hides during playback, fully remove the transport bubbles so the AVPlay video plane
     doesn't keep a ghost of their icons (old-TV compositing artifact). */
  .player-ui.hide .pcontrols{ display:none !important; }
  /* TOP: poster + title (Ora-Pro style, stays readable when paused). Pushed right so it clears the
     channel logo that most streams burn into the top-left corner. */
  .player-top{ display:flex; align-items:flex-start; gap:16px; padding:34px 40px 0 210px; }
  .pt-head{ display:flex; align-items:center; gap:24px; max-width:74%; }
  .pt-poster{ width:132px; height:196px; border-radius:14px; object-fit:cover; flex:0 0 auto; box-shadow:0 10px 30px -8px rgba(0,0,0,.85); }
  .pt-txt{ min-width:0; }
  .player-top .pt-title{ font-weight:900; font-size:42px; letter-spacing:-.4px; text-shadow:0 2px 16px rgba(0,0,0,.75); }
  .player-top .pt-sub{ color:#e6ecf6; font-weight:700; font-size:24px; margin-top:7px; text-shadow:0 1px 10px rgba(0,0,0,.7); }
  .p-live{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-weight:800; font-size:13px; letter-spacing:1px; }
  /* Transport bubbles (circular): now sit in the control row, BELOW the progress bar, aligned right. */
  .pcenter{ display:flex; align-items:center; gap:18px; }
  .pcircle{ appearance:none; border:0; cursor:pointer; width:66px; height:66px; border-radius:50%; background:rgba(14,20,32,.62); color:#fff;
    display:flex; align-items:center; justify-content:center; outline:none; box-shadow:0 8px 26px -10px rgba(0,0,0,.6);
    transition:transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease); }
  .pcircle svg{ width:30px; height:30px; display:block; }
  .pcircle.big{ width:86px; height:86px; }
  .pcircle.big svg{ width:40px; height:40px; }
  .pcircle.is-focused{ background:#fff; color:#06101f; transform:scale(1.08); box-shadow:0 0 0 4px var(--focus-rim); }
  .player-ctrl{ padding:0 40px 34px; background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); }
  .pbar-row{ display:flex; align-items:center; gap:16px; }
  .pcontrols{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:22px; }
  .pcontrols .pbtns{ margin:0; }
  .pcontrols .pbtns{ margin-left:auto; }   /* options pushed to the right; transport bubbles stay on the left */
  .ptime{ font-variant-numeric:tabular-nums; font-weight:800; font-size:30px; color:#f2f6fc; min-width:118px; text-shadow:0 1px 8px rgba(0,0,0,.5); }
  .ptime.r{ text-align:right; }
  .pbar{ position:relative; flex:1; height:16px; border-radius:9px; background:rgba(255,255,255,.24); cursor:pointer; outline:none; }
  .pbar > i{ position:absolute; left:0; top:0; bottom:0; border-radius:9px; background:var(--accent); }
  .pbar .knob{ position:absolute; top:50%; width:26px; height:26px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.5); opacity:0; transition:opacity .2s var(--ease); }
  .pbar.is-focused{ height:13px; }
  .pbar.is-focused .knob{ opacity:1; }
  .pbar.is-focused{ box-shadow:0 0 0 3px rgba(255,255,255,.25); }
  .pbar.live > i{ background:var(--live); width:100% !important; animation:livepulse 2.2s ease-in-out infinite; }
  @keyframes livepulse{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
  .pbtns{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
  .pbtn{ appearance:none; border:0; cursor:pointer; background:rgba(255,255,255,.12); color:var(--text); font:inherit; font-weight:800;
    height:60px; min-width:60px; padding:0 20px; border-radius:15px; display:inline-flex; align-items:center; gap:9px; font-size:21px;
    transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
  .pbtn.wide{ font-size:17px; }
  .pbtn.is-focused{ background:#fff; color:#06101f; transform:translateY(-2px) scale(1.05); box-shadow:0 0 0 3px var(--focus-rim); }
  .pbtn-test{ background:rgba(255,196,0,.16); color:#ffd24a; }
  .pbtn-test.is-focused{ background:#ffd24a; color:#06101f; }
  /* manual sleep-timer stepper (Réglages › Veille & minuterie) */
  .timer-custom{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end; }
  .ct-steppers{ display:flex; align-items:center; gap:10px; }
  .stepper{ appearance:none; border:1px solid var(--line); background:var(--chip-bg); color:var(--text); font:inherit; font-weight:800; font-size:24px; line-height:1; width:46px; height:46px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s var(--ease), box-shadow .18s var(--ease); }
  .stepper.is-focused{ background:#fff; color:#06101f; border-color:transparent; box-shadow:0 0 0 3px var(--focus-rim); }
  .ct-val{ min-width:70px; text-align:center; font-size:16px; color:var(--dim); }
  .ct-val b{ color:var(--text); font-size:22px; font-weight:800; }
  .ct-gap{ width:14px; }
  .timer-custom .ct-go, .timer-custom .ct-stop{ margin:0; }
  .timer-custom .ct-stop{ background:rgba(255,255,255,.06); }
  .hist-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

  /* ---------------- hint + toast ---------------- */
  /* Always-dark legend pill → force light text so it stays readable in the light theme too. */
  /* Remote-control legend removed at the user's request. */
  .hint{ display:none !important; }
  .hint--unused{ position:fixed; z-index:60; left:50%; bottom:20px; transform:translateX(-50%);
    display:flex; align-items:center; gap:12px; background:rgba(12,14,20,.92); border:1px solid rgba(255,255,255,.12);
    padding:9px 16px; border-radius:999px; color:#c7cedb !important; font-size:13px; font-weight:600; backdrop-filter:blur(10px);
    transition:opacity .4s var(--ease); box-shadow:0 10px 30px -12px rgba(0,0,0,.7); }
  .hint.dim{ opacity:0; }
  .hint kbd{ font:inherit; font-weight:700; color:#fff !important; background:rgba(255,255,255,.14); border-radius:6px; padding:2px 7px; margin:0 1px; }
  .toast{ position:fixed; z-index:70; left:50%; top:calc(var(--topbar-h) + 18px); transform:translate(-50%,-12px);
    opacity:0; pointer-events:none; background:rgba(255,255,255,.96); color:#06101f; font-weight:700; font-size:14px;
    padding:10px 18px; border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,.6); transition:opacity .25s var(--ease), transform .25s var(--ease); }
  .toast.show{ opacity:1; transform:translate(-50%,0); }

  /* ---------------- Settings ---------------- */
  button.avatar{ border:0; cursor:pointer; font:inherit; }
  .avatar.is-focused{ box-shadow:0 0 0 3px var(--focus-rim); }
  .settings-wrap{ max-width:1200px; margin:0 auto; padding:calc(var(--topbar-h) + 40px) 40px 90px; }
  .settings-h{ font-size:38px; font-weight:800; letter-spacing:-.8px; margin-bottom:22px; }
  .set-group{ background:var(--elev); border:1px solid var(--line); border-radius:20px; padding:6px 22px; margin-bottom:16px; box-shadow:0 12px 30px -22px rgba(0,0,0,.6); }
  .set-group-h{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:0; cursor:pointer; color:inherit; font:inherit; padding:2px; border-radius:12px; }
  .set-group-t{ font-size:15px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim-2); padding:18px 2px 16px; }
  .grp-chev{ color:var(--dim); font-size:20px; padding-right:4px; transition:transform .2s var(--ease); }
  .set-group.open .grp-chev{ transform:rotate(180deg); }
  .set-group-h.is-focused{ box-shadow:0 0 0 3px var(--focus-rim); }
  .set-group-h.is-focused .set-group-t{ color:var(--text); }
  .set-group-body{ display:none; padding-bottom:8px; }
  .set-group.open .set-group-body{ display:block; }
  .set-row{ display:flex; align-items:center; gap:20px; padding:19px 2px; border-top:1px solid var(--line); }
  .set-group-body > .set-row:first-child, .set-group-body > .pf-field:first-child{ border-top:0; }
  .set-hint{ color:var(--dim); font-size:15px; padding:10px 2px 2px; line-height:1.45; }
  .set-label{ min-width:260px; flex:0 0 auto; }
  .sl-t{ font-weight:700; font-size:19px; }
  .sl-d{ color:var(--dim); font-size:15px; margin-top:3px; }
  .set-control{ margin-left:auto; display:flex; justify-content:flex-end; align-items:center; }
  .seg{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .segopt{ appearance:none; border:1px solid var(--line); background:var(--chip-bg); color:var(--dim); font:inherit; font-weight:600; font-size:16px;
    padding:10px 18px; border-radius:999px; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
  .segopt.on{ background:var(--chip-on); color:var(--text); border-color:transparent; }
  .segopt.is-focused{ background:#fff; color:#06101f; border-color:transparent; transform:translateY(-1px); box-shadow:0 0 0 3px var(--focus-rim); }
  .swatches{ display:flex; gap:14px; }
  .swatch{ display:inline-block; width:42px; height:42px; border-radius:50%; border:2px solid rgba(128,128,128,.35); cursor:pointer; position:relative; overflow:hidden; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
  .swatch .sw-svg{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
  .swatch.on::after{ content:"✓"; position:absolute; top:0;right:0;bottom:0;left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .swatch.is-focused{ transform:scale(1.12); box-shadow:0 0 0 3px var(--focus-rim); }
  .switch{ appearance:none; border:0; cursor:pointer; width:58px; height:34px; border-radius:999px; background:var(--chip-on); position:relative;
    transition:background .2s var(--ease), box-shadow .2s var(--ease); }
  .switch .knob{ position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.35); }
  .switch.on{ background:var(--accent); }
  .switch.on .knob{ transform:translateX(24px); }
  .switch.is-focused{ box-shadow:0 0 0 3px var(--focus-rim); }

  /* ---------------- parental control ---------------- */
  .parental-wrap .par-hint{ color:var(--dim); font-size:15px; max-width:760px; margin:-8px 0 18px; line-height:1.5; }
  .par-label{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim-2); margin:14px 0 8px; }
  .par-chips{ padding-left:0 !important; padding-right:0 !important; flex-wrap:wrap; }
  .par-actions{ display:flex; gap:12px; margin:18px 0 10px; }
  .par-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
  .par-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--elev); border:1px solid var(--line); border-radius:14px; padding:12px 18px; }
  .par-cat{ display:flex; align-items:center; gap:12px; min-width:0; font-weight:600; font-size:16px; }
  .par-cat span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .owner-gate .pf-sub{ color:var(--dim); text-align:center; margin:-4px 0 8px; }
  .pf-err{ color:#ff6b6b; font-size:14px; text-align:center; }
  .pin-forgot{ appearance:none; border:0; background:transparent; color:var(--accent); font:inherit; font-weight:700; font-size:15px; cursor:pointer; margin-top:18px; padding:8px 14px; border-radius:10px; }
  .pin-forgot.is-focused{ background:#fff; color:#06101f; }
  .set-value{ color:var(--dim); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
  .set-badge.ok{ color:#30d158; font-weight:700; font-size:15px; }
  .settings-foot{ text-align:center; color:var(--dim-2); font-size:13px; margin-top:8px; }
  .foot-credit{ display:block; margin-top:6px; font-weight:600; letter-spacing:.3px; color:var(--dim); }
  @media (max-width:720px){
    .settings-wrap{ padding-left:20px; padding-right:20px; }
    .set-row{ flex-wrap:wrap; }
    .set-control{ margin-left:0; justify-content:flex-start; }
    .set-label{ min-width:0; }
    .seg{ justify-content:flex-start; }
  }

  @media (max-width:720px){
    .hero{ min-height:420px; padding:60px 20px 28px; }
    .shelf-head,.chips{ padding-left:20px; padding-right:20px; }
    .row{ padding-left:20px; padding-right:20px; gap:16px; }
    .topbar{ padding-left:18px; padding-right:18px; }
    .brand{ font-size:17px; } .tab{ font-size:14px; padding:8px 12px; }
    .topmeta .clock{ display:none; }
    .grid-top,.detail-content{ padding-left:20px; padding-right:20px; }
    .grid{ padding-left:20px; padding-right:20px; }
    .backchip{ left:16px; }
    .player-top{ padding-left:118px; }
    .grid.wide{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
  }
  @media (prefers-reduced-motion:reduce){
    *:not(.spinner){ animation:none !important; }
    .tile,.btn,.tab,.chip,.cap,.ep,.pbtn{ transition:none !important; }
  }

  /* ---------------- Favorites ---------------- */
  .fav-badge{ position:absolute; top:12px; left:12px; z-index:2; color:#ff6b8a; font-size:16px; text-shadow:0 1px 4px rgba(0,0,0,.6); }

  /* ---------------- Search ---------------- */
  .search-wrap{ margin-top:calc(var(--topbar-h) + 24px); padding:0 48px 70px; max-width:none; }
  .search-h{ font-size:36px; font-weight:800; letter-spacing:-.7px; margin-bottom:18px; }
  .search-field{ display:flex; align-items:center; gap:12px; background:var(--elev); border:1px solid var(--line); border-radius:14px; padding:0 18px; height:64px; max-width:660px; transition:box-shadow .2s var(--ease), border-color .2s var(--ease); }
  .search-field:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-rim); }
  .search-field .si{ color:var(--dim); font-size:22px; }
  .search-field input{ flex:1; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:20px; }
  .kbd{ display:flex; flex-wrap:wrap; gap:9px; max-width:760px; margin:20px 0 30px; }
  .key{ appearance:none; border:1px solid var(--line); background:var(--chip-bg); color:var(--text); font:inherit; font-weight:700; font-size:17px; width:54px; height:54px; border-radius:12px; cursor:pointer; display:grid; place-items:center;
    transition:background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease); }
  .key.wide{ width:auto; padding:0 18px; font-size:15px; }
  .key.is-focused{ background:#fff; color:#06101f; transform:translateY(-2px); box-shadow:0 0 0 3px var(--focus-rim); }
  /* 9 slightly smaller posters per row, centred so both sides are balanced. */
  .search-results{ display:grid; grid-template-columns:repeat(auto-fill,170px); gap:22px 20px; grid-gap:22px 20px; justify-content:center; }
  .search-results .card.poster, .search-results .poster .tile{ width:170px; }
  .search-results .poster .tile{ height:255px; }
  :root[data-tv] .search-results > *{ margin:0 !important; }   /* grid-gap handles spacing (no flex-margin fallback) */
  .search-hint-tv{ color:var(--dim); font-size:15px; margin:18px 0 28px; }
  .search-empty{ color:var(--dim); font-size:18px; padding:16px 2px; }
  .search-more{ flex:1 0 100%; color:var(--dim-2); font-size:14px; padding:14px 2px 2px; }

  /* ---------------- EPG Guide ---------------- */
  .guide{ margin-top:0; }   /* offset handled by .guide padding-top — no double gap */
  .guide-head{ display:flex; align-items:baseline; gap:14px; padding:0 48px 12px; }
  .guide-title{ font-size:34px; font-weight:800; letter-spacing:-.6px; }
  .guide-date{ color:var(--dim); font-weight:600; }
  .epg-scroll{ position:relative; overflow:auto; padding:0 48px 50px; scrollbar-width:thin; }
  .epg-scroll::-webkit-scrollbar{ height:10px; width:10px; }
  .epg-scroll::-webkit-scrollbar-thumb{ background:rgba(128,128,128,.35); border-radius:8px; }
  .epg-timeline{ position:sticky; top:0; z-index:6; display:flex; width:max-content; }
  .epg-corner{ position:sticky; left:0; z-index:7; flex:0 0 auto; background:var(--bg); }
  .epg-hours{ display:flex; background:var(--bg); }
  .epg-hour{ flex:0 0 auto; border-left:1px solid var(--line); color:var(--dim); font-size:13px; font-weight:700; padding:10px 10px; }
  .epg-row{ display:flex; width:max-content; }
  .epg-ch{ position:sticky; left:0; z-index:5; flex:0 0 auto; width:210px; background:var(--bg-2); border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:0 12px; }
  .epg-ch .ch-logo{ display:inline-grid; place-items:center; min-width:42px; height:40px; border-radius:10px; background:rgba(128,128,128,.18); font-weight:800; font-size:15px; }
  .epg-ch .en{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .epg-track{ display:flex; border-top:1px solid var(--line); }
  .epg-prog{ flex:0 0 auto; border-left:1px solid var(--line); background:var(--tile); margin:6px 0; padding:11px 12px; overflow:hidden; cursor:pointer; text-align:left; color:inherit; font:inherit;
    scroll-margin:130px 260px; transition:background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease); }
  .epg-prog .pt{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .epg-prog .pd{ color:var(--dim); font-size:12px; margin-top:3px; white-space:nowrap; }
  .epg-prog.on-air{ background:linear-gradient(180deg, rgba(10,132,255,.22), var(--tile)); }
  .epg-prog.is-focused{ background:#fff; color:#06101f; transform:scale(1.03); box-shadow:0 0 0 3px var(--focus-rim); z-index:3; position:relative; }
  .epg-prog.is-focused .pd{ color:#3a4658; }

  /* ---------------- Player zap strip ---------------- */
  .zapbar{ position:absolute; left:0; right:0; bottom:172px; z-index:4; display:flex; gap:12px; padding:16px 40px; overflow-x:auto;
    background:linear-gradient(0deg, rgba(0,0,0,.65), transparent); scrollbar-width:none; }
  .zapbar[hidden]{ display:none; }
  .zapbar::-webkit-scrollbar{ display:none; }
  .zap{ flex:0 0 auto; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border:0; color:#fff; font:inherit; font-weight:700; font-size:15px;
    padding:10px 14px; border-radius:12px; cursor:pointer; transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
  .zap .zl{ display:inline-grid; place-items:center; min-width:36px; height:32px; border-radius:9px; background:rgba(0,0,0,.32); font-weight:800; font-size:13px; }
  .zap.is-focused{ background:#fff; color:#06101f; transform:translateY(-2px); box-shadow:0 0 0 3px var(--focus-rim); }
  .zap.is-focused .zl{ background:rgba(0,0,0,.12); color:#06101f; }

  /* ---------------- Standby / sleep ---------------- */
  .standby{ position:fixed; top:0;right:0;bottom:0;left:0; z-index:200; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff; text-align:center; transition:opacity 1s ease; }
  .standby[hidden]{ display:none; }
  .standby .sb-icon{ opacity:.85; }
  .standby .sb-icon svg{ width:60px; height:60px; }
  /* After a few seconds the message fades out, leaving a fully black screen — the closest an app can get
     to "off" on this panel (the backlight can't be cut from a web app). OK wakes it back. */
  .standby.blackout > *{ opacity:0; transition:opacity 1.4s ease; }
  .standby .sb-t{ font-size:26px; font-weight:800; }
  .standby .sb-d{ color:#9aa3b2; font-size:16px; }
  .sleep-warn{ position:fixed; z-index:150; top:calc(var(--topbar-h) + 14px); right:40px; left:auto; transform:none; display:flex; align-items:center; gap:16px;
    background:rgba(255,20,20,.98); color:#fff; font-weight:800; font-size:16px; padding:14px 20px; border-radius:14px; box-shadow:0 16px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
  .sleep-warn[hidden]{ display:none; }
  .sleep-warn button{ appearance:none; border:0; background:#fff; color:#06101f; font:inherit; font-weight:800; padding:9px 15px; border-radius:10px; cursor:pointer; transition:box-shadow .15s var(--ease), transform .15s var(--ease); }
  .sleep-warn button.is-focused{ box-shadow:0 0 0 3px rgba(255,255,255,.75); transform:scale(1.05); }
  .set-timer-status{ color:var(--accent-2); font-weight:700; font-size:14px; }
  @media (max-width:720px){
    .search-wrap,.guide-head{ padding-left:20px; padding-right:20px; }
    .epg-scroll{ padding-left:20px; padding-right:20px; }
  }

  /* ---------------- Brand / logo ---------------- */
  .brand{ display:flex; align-items:center; gap:11px; white-space:nowrap; }
  .brand .wm{ font-weight:600; letter-spacing:.26em; font-size:17px; }
  .logo-svg{ display:block; }
  /* the M→L monogram is drawn with an accent gradient (follows the chosen accent colour) */
  .logo-svg .ml-a{ stop-color:var(--accent); }
  .logo-svg .ml-b{ stop-color:var(--accent-2); }
  .ml-mono{ filter:drop-shadow(0 0 5px rgba(255,255,255,.5)); }
  .brand-lockup{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .brand-lockup .wm{ font-weight:600; letter-spacing:.34em; font-size:26px; }
  .brand-lockup .sub{ color:#8e8e93; letter-spacing:.28em; font-size:13px; font-weight:600; margin-top:-8px; }

  /* ---------------- Profiles ---------------- */
  .pf-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:60px 20px; }
  .pf-title{ font-size:40px; font-weight:800; letter-spacing:-.8px; }
  .pf-grid{ display:flex; flex-wrap:wrap; gap:34px; justify-content:center; max-width:900px; }
  .pf-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .pf-tile{ appearance:none; border:0; cursor:pointer; background:transparent; padding:0; position:relative; }
  .pf-av{ width:132px; height:132px; border-radius:26px; display:grid; place-items:center; position:relative; color:#fff; font-weight:800; font-size:52px; overflow:hidden;
    background:linear-gradient(140deg, var(--pc2, var(--pc)), var(--pc) 55%, rgba(0,0,0,.30)); box-shadow:0 14px 34px -16px rgba(0,0,0,.75); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
  .pf-av.has-img{ background:#12151b; }
  .pf-face{ font-size:70px; line-height:1; }
  .pf-av .pf-photo{ position:absolute; top:0;right:0;bottom:0;left:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .pf-av .pf-ill{ position:absolute; top:0;right:0;bottom:0;left:0; }
  .pf-av .pf-ill svg{ width:100%; height:100%; display:block; border-radius:inherit; }
  .pf-av .pf-ring{ position:absolute; top:0;right:0;bottom:0;left:0; border-radius:inherit; box-shadow:inset 0 0 0 3px var(--pc); pointer-events:none; }
  .pf-tile.add{ width:132px; height:132px; border-radius:26px; border:2px dashed var(--line); color:var(--dim); font-size:46px; background:var(--elev); display:grid; place-items:center; }
  .pf-tile.is-focused .pf-av, .pf-tile.add.is-focused{ transform:scale(1.07); box-shadow:0 0 0 4px var(--focus-rim), 0 22px 46px -16px rgba(0,0,0,.8); }
  .pf-name{ font-size:20px; font-weight:800; color:var(--text); }
  .pf-lock{ position:absolute; top:8px; right:10px; font-size:16px; }
  .pf-kid{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; letter-spacing:.6px; background:rgba(0,0,0,.4); padding:3px 9px; border-radius:999px; }
  .pf-guest{ background:rgba(0,0,0,.45); }
  .pf-del{ position:absolute; top:-4px; right:22px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:var(--live); color:#fff; font-weight:800; font-size:16px; }
  .pf-del.is-focused{ box-shadow:0 0 0 3px var(--focus-rim); transform:scale(1.08); }
  /* Pencil overlay in manage mode — a visual "this tile is editable" cue (the tile itself edits). */
  .pf-edit-badge{ position:absolute; right:-8px; bottom:-8px; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -4px rgba(0,0,0,.6), 0 0 0 3px var(--bg); pointer-events:none; }
  .pf-edit-badge svg{ width:21px; height:21px; display:block; }
  .pf-tile.is-focused .pf-edit-badge{ transform:scale(1.08); }
  .pf-manage-hint{ font-size:16px; font-weight:600; color:var(--dim); margin-top:4px; }
  .pf-manage{ appearance:none; border:1px solid var(--line); background:var(--chip-bg); color:var(--dim); font:inherit; font-weight:600; padding:11px 22px; border-radius:999px; cursor:pointer;
    transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
  .pf-manage.is-focused{ background:#fff; color:#06101f; box-shadow:0 0 0 3px var(--focus-rim); }

  /* ---------------- PIN ---------------- */
  .pin-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:60px 20px; }
  .pin-title{ font-size:24px; font-weight:700; color:var(--dim); }
  .pin-dots{ display:flex; gap:20px; }
  .pin-dots.shake{ animation:pshake .4s; }
  @keyframes pshake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }
  .pin-dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--dim); transition:background .12s var(--ease), border-color .12s var(--ease); }
  .pin-dot.on{ background:var(--accent); border-color:var(--accent); }
  .pin-err{ color:var(--live); font-weight:700; }
  .pin-pad{ display:grid; grid-template-columns:repeat(3,86px); gap:16px; grid-gap:16px; margin-top:6px; }
  .pin-key{ height:86px; border-radius:20px; border:1px solid var(--line); background:var(--elev); color:var(--text); font:inherit; font-weight:700; font-size:30px; cursor:pointer;
    transition:background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease); }
  .pin-key.ghost{ background:transparent; font-size:26px; color:var(--dim); }
  .pin-key.is-focused{ background:#fff; color:#06101f; transform:translateY(-2px); box-shadow:0 0 0 3px var(--focus-rim); }

  /* ---------------- Add-profile form ---------------- */
  .pf-form{ max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:60px 20px; }
  .pf-form .pf-title{ font-size:32px; margin-bottom:6px; }
  .pf-field{ display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--elev); border:1px solid var(--line); border-radius:16px; padding:16px 20px; }
  .pf-field > span{ font-weight:700; }
  .pf-field input{ background:var(--tile); border:1px solid var(--line); border-radius:10px; color:var(--text); font:inherit; font-size:18px; padding:11px 14px; outline:none; min-width:240px; }
  .pf-field input.is-focused{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-rim); }
  .pf-actions{ display:flex; gap:12px; margin-top:8px; }
  /* photo crop editor */
  .crop-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:40px 20px; }
  .crop-frame{ position:relative; width:min(74vw,420px); aspect-ratio:1/1; border-radius:24px; overflow:hidden; background:#0c0e12; box-shadow:0 0 0 2px var(--line), 0 22px 54px -22px rgba(0,0,0,.85); cursor:grab; touch-action:none; }
  .crop-frame:active{ cursor:grabbing; }
  .crop-frame.is-focused{ box-shadow:0 0 0 3px var(--focus-rim), 0 22px 54px -22px rgba(0,0,0,.85); }
  .crop-img{ position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
  .crop-grid{ position:absolute; top:0;right:0;bottom:0;left:0; pointer-events:none;
    background:linear-gradient(#ffffff2e,#ffffff2e) 33.33% 0/1px 100% no-repeat, linear-gradient(#ffffff2e,#ffffff2e) 66.66% 0/1px 100% no-repeat,
    linear-gradient(#ffffff2e,#ffffff2e) 0 33.33%/100% 1px no-repeat, linear-gradient(#ffffff2e,#ffffff2e) 0 66.66%/100% 1px no-repeat; }
  .crop-zoom-row{ display:flex; align-items:center; gap:14px; width:min(74vw,420px); }
  .crop-zoom-row .pbtn{ width:52px; height:44px; flex:0 0 auto; font-size:22px; }
  .crop-range{ flex:1; accent-color:var(--accent); height:26px; }
  .crop-range.is-focused{ outline:none; box-shadow:0 0 0 3px var(--focus-rim); border-radius:10px; }
  .crop-hint{ color:var(--dim); font-size:14px; text-align:center; max-width:440px; }
  .pf-field-col{ flex-direction:column; align-items:stretch; gap:12px; }
  .pf-field-col > span{ align-self:flex-start; }
  .pf-preview{ display:flex; justify-content:center; margin-bottom:2px; }
  .pf-preview .pf-av{ width:104px; height:104px; border-radius:22px; font-size:42px; }
  .pf-preview .pf-face{ font-size:56px; }
  .pf-avatars{ display:grid; grid-template-columns:repeat(8, 1fr); gap:10px; grid-gap:10px; width:100%; }
  .pf-avatar{ aspect-ratio:1/1; border-radius:14px; border:1px solid var(--line); background:var(--tile); color:var(--text); font-size:28px; font-weight:800; cursor:pointer; display:grid; place-items:center; overflow:hidden; padding:0;
    transition:transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease); }
  .pf-avatar svg, .pf-avatar img{ width:100%; height:100%; display:block; border-radius:inherit; object-fit:cover; }
  .pf-avatar.on{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-rim); }
  .pf-avatar.is-focused{ transform:scale(1.1); box-shadow:0 0 0 3px var(--focus-rim); border-color:var(--accent); z-index:1; }
  .pf-av-group{ display:flex; align-items:center; gap:10px; margin:6px 2px -2px; }
  .pf-av-group > span{ font-size:13px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--dim); }
  .pf-av-group::after{ content:""; flex:1; height:1px; background:var(--line); }
  .pf-photo-row{ display:flex; flex-wrap:wrap; gap:10px; }
  /* account subscription icons + full-width sync URL field */
  .acc-ico{ display:inline-flex; align-items:center; justify-content:center; width:22px; margin-right:9px; color:var(--accent); vertical-align:-4px; }
  .acc-ico svg{ width:19px; height:19px; }
  .set-value.exp-soon{ color:#ffb02e; }
  .set-value.exp-over{ color:var(--live); }
  .pf-field.sync-url{ margin-top:2px; }
  .pf-field.sync-url input{ flex:1; min-width:0; }

/* ---------------- Login (Xtream) ---------------- */
#view-login.active{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:22px; }
.login-credit{ color:var(--dim); font-size:14px; font-weight:600; letter-spacing:.3px; text-align:center; }
.login-card{ width:720px; max-width:92vw; background:var(--bg-2); border:1px solid var(--line); border-radius:24px; padding:48px 56px 44px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; }
.login-brand .wm{ font-weight:600; letter-spacing:.34em; font-size:24px; }
.login-brand .sub{ color:#8e8e93; letter-spacing:.28em; font-size:12px; font-weight:600; margin-top:-8px; }
.login-sub{ color:var(--dim); text-align:center; margin:-8px 0 26px; font-size:17px; }
.lfield{ display:block; margin-bottom:24px; }
.lfield-label{ display:block; font-size:14px; color:var(--dim); margin-bottom:7px; letter-spacing:.02em; }
.lfield-input{ width:100%; height:60px; padding:0 18px; font-size:19px; color:var(--text); background:var(--tile); border:2px solid transparent; border-radius:12px; outline:none; }
.lfield-input.is-focused{ border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-rim); }
.lfield-hint{ display:block; font-size:12.5px; color:var(--dim-2); margin-top:6px; }
.login-error{ background:rgba(255,69,58,.14); color:var(--live); border-radius:12px; padding:13px 16px; font-size:15px; margin-bottom:16px; }
.login-note{ background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-size:14px; line-height:1.5; margin-bottom:16px; white-space:normal; word-break:break-word; }
/* quick-insert chips for the server field (easier typing on a TV remote) */
.qk-row{ display:flex; flex-wrap:wrap; margin:2px 0 18px; }
.qk{ appearance:none; border:1px solid var(--line); background:var(--tile); color:var(--dim); font:inherit; font-size:15px; font-weight:600; padding:8px 14px; margin:0 8px 8px 0; border-radius:10px; cursor:pointer; transition:transform .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.qk.is-focused{ color:var(--text); border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-rim); transform:translateY(-1px); }
.qk.qk-ic{ display:inline-flex; align-items:center; gap:7px; }
.qk.qk-ic svg{ width:18px; height:18px; display:block; }
/* password field + show/hide toggle */
.lfield-pass{ position:relative; display:flex; align-items:center; }
.lfield-pass .lfield-input{ padding-right:132px; }
.pass-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); appearance:none; border:1px solid var(--line); background:var(--elev); color:var(--dim); font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:9px; cursor:pointer; transition:color .15s var(--ease), border-color .15s var(--ease); }
.pass-eye.is-focused{ color:var(--text); border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-rim); }
.login-actions{ display:flex; margin-top:18px; }
.login-actions .btn + .btn{ margin-left:14px; }   /* margin, not flex-gap (old TV WebView ignores gap) */
.login-hint{ margin-top:20px; color:var(--dim-2); font-size:14px; text-align:center; }
/* ---------- TV low-power mode: drop the effects that make an older TV WebView crawl ---------- */
:root[data-tv] .topbar{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:#0b0f1a !important; }
:root[data-tv] body{ background:var(--bg) !important; }                 /* flat bg, no repainted radial gradients */
/* --- AVPlay (Samsung) picture shows on a plane BEHIND the page: punch a transparent hole while a
       live/VOD stream is playing, so the video is visible instead of hidden behind an opaque page. --- */
:root[data-playing="av"] body,
:root[data-playing="av"] .stage,
:root[data-playing="av"] .player,
:root[data-playing="av"] #av-player{ background:transparent !important; }   /* this panel needs the alpha hole to show the picture */
:root[data-playing="av"] .player-bg,
:root[data-playing="av"] .player-vig{ display:none !important; }
/* Trail hunt (toggle "Cadre vidéo réduit"): the <object type="application/avplayer"> is drawn full-screen
   over the transparent hole; on some Tizen builds the WebView paints a grey placeholder box in its CENTRE
   on top of the video (= the trail). The picture is on the hardware plane (setDisplayRect), independent of
   this box, so shrinking the box to a 2px corner removes the placeholder while the image stays full-screen. */
:root[data-playing="av"][data-avshrink] #av-player{
    top:0 !important; left:0 !important; right:auto !important; bottom:auto !important;
    width:2px !important; height:2px !important; min-width:0 !important; min-height:0 !important;
    overflow:hidden !important; }
/* The trail is a real WHITE element sitting at the centre (clearly visible on a black frame): kill any
   default media placeholder / control glyph the <object>/<video> surfaces might draw there, and any
   stray centre spinner, so nothing white is ever painted over the video. */
#av-player, #html5-player{ color:transparent !important; }
#av-player::-webkit-media-controls, #html5-player::-webkit-media-controls,
#av-player::-webkit-media-controls-panel, #html5-player::-webkit-media-controls-panel,
#av-player::-webkit-media-controls-start-playback-button, #html5-player::-webkit-media-controls-start-playback-button,
#av-player::-webkit-media-controls-overlay-play-button, #html5-player::-webkit-media-controls-overlay-play-button{ display:none !important; -webkit-appearance:none !important; opacity:0 !important; }
:root[data-tv] *{ transition:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
:root[data-tv] .login-card{ box-shadow:none !important; }
/* ---------- TV: emulate flex `gap` with real margins (old TV WebViews ignore flex-gap → elements overlap) ---------- */
:root[data-tv] .nav > * + *{ margin-left:4px; }
:root[data-tv] .tab-in > * + *{ margin-left:8px; }
:root[data-tv] .chips > * + *,
:root[data-tv] .seasons > * + *,
:root[data-tv] .flagchip > * + *,
:root[data-tv] .pf-av-group > * + *,
:root[data-tv] .ch-live > * + *,
:root[data-tv] .ch-topr > * + *{ margin-left:10px; }
/* Old TV WebView ignores flex `gap`, so button label parts glue together ("ReprendreSaison 2…"):
   space the icon from the label, and the secondary label (btn-x) from the primary one, with margins. */
:root[data-tv] .btn > .gl{ margin-right:8px; }
:root[data-tv] .btn > .btn-x{ margin-left:8px; }
:root[data-tv] .brand > * + *,
:root[data-tv] .swatches > * + *,
:root[data-tv] .pf-actions > * + *,
:root[data-tv] .hero-actions > * + *,
:root[data-tv] .detail-actions > * + *,
:root[data-tv] .par-actions > * + *,
:root[data-tv] .search-field > * + *,
:root[data-tv] .zapbar > * + *,
:root[data-tv] .zap > * + *{ margin-left:12px; }
:root[data-tv] .crop-zoom-row > * + *,
:root[data-tv] .pbtns > * + *,
:root[data-tv] .pbar-row > * + *{ margin-left:14px; }
:root[data-tv] .pt-head > * + *{ margin-left:20px; }
:root[data-tv] .hist-actions > * + *{ margin-left:10px; }
:root[data-tv] .pcenter > * + *{ margin-left:22px; }
:root[data-tv] .topmeta > * + *,
:root[data-tv] .grid-head > * + *,
:root[data-tv] .player-top > * + *,
:root[data-tv] .sleep-warn > * + *{ margin-left:16px; }
:root[data-tv] .pf-field > * + *{ margin-left:18px; }
:root[data-tv] .set-row > * + *,
:root[data-tv] .eps > * + *{ margin-left:20px; }
:root[data-tv] .pin-dots > * + *{ margin-left:20px; }
:root[data-tv] .row > * + *{ margin-left:22px; }
:root[data-tv] .shelves > * + *{ margin-top:6px; }
/* --- flex-gap fallbacks for the pieces added later (Tizen Chromium ignores flex gap) --- */
:root[data-tv] .ct-steppers > * + *{ margin-left:10px; }
:root[data-tv] .g2-count{ margin-left:14px; }                 /* count sits after a text node → target it directly */
:root[data-tv] .g2-ch > * + *{ margin-left:14px; }
:root[data-tv] .par-cat > * + *,
:root[data-tv] .set-group-h > * + *{ margin-left:12px; }
:root[data-tv] .g2-head > * + *,
:root[data-tv] .g2-body-wrap > * + *,
:root[data-tv] .par-row > * + *{ margin-left:16px; }
:root[data-tv] .g2-now > * + *,
:root[data-tv] .g2-row > * + *{ margin-left:18px; }
:root[data-tv] .g2-when > * + *{ margin-top:2px; }
:root[data-tv] .timer-custom > * + *{ margin-left:26px; }
:root[data-tv] .cat-art > * + *{ margin-top:12px; }   /* flag sits under the name (gap fallback) */
:root[data-tv] .par-list > * + *{ margin-top:8px; }
:root[data-tv] .pf-field-col > * + *{ margin-top:12px; }
:root[data-tv] .pf-item > * + *,
:root[data-tv] .login-brand > * + *{ margin-top:14px; }
:root[data-tv] .brand-lockup > * + *{ margin-top:16px; }
:root[data-tv] .pf-form > * + *{ margin-top:18px; }
:root[data-tv] .crop-wrap > * + *{ margin-top:20px; }
:root[data-tv] .pin-wrap > * + *,
:root[data-tv] .loading-screen > * + *,
:root[data-tv] #view-login.active > * + *{ margin-top:22px; }
:root[data-tv] .pf-wrap > * + *{ margin-top:34px; }
/* wrap rows: space each child to the right and below */
:root[data-tv] .pf-grid > *{ margin:0 26px 26px 0; }
:root[data-tv] .kbd > *{ margin:0 9px 9px 0; }
:root[data-tv] .pf-photo-row > *{ margin:0 10px 10px 0; }
:root[data-tv] .hero-meta > *,
:root[data-tv] .detail-eyebrow > *,
:root[data-tv] .detail-meta > *{ margin:0 12px 6px 0; }
:root[data-tv] .seg > *{ margin:0 0 6px 8px; }
:root[data-tv] .search-results > *,
:root[data-tv] .fav-grid > *{ margin:0 22px 26px 0; }
/* aspect-ratio fallbacks for square elements (unsupported on old TV WebViews) */
:root[data-tv] .crop-frame{ height:min(74vw,420px); }
:root[data-tv] .pf-avatar{ height:72px; }

/* ---------------- Video surfaces + player overlay (real playback) ---------------- */
#av-player, #html5-player{ position:fixed; top:0;right:0;bottom:0;left:0; width:100%; height:100%; background:#000; z-index:1; display:none; }
#html5-player{ object-fit:contain; }
.player{ background:transparent !important; }
.art-img{ position:absolute; top:0;right:0;bottom:0;left:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.ch-logo-img{ width:46px; height:46px; object-fit:contain; background:transparent; }
.loading-screen{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.loading-logo{ width:200px; height:200px; }
.loading-logo .logo-svg{ width:200px !important; height:200px !important; display:block; }
.spinner{ width:64px; height:64px; border:6px solid rgba(255,255,255,.22); border-top-color:var(--accent); border-radius:50%;
  -webkit-animation:spin 1s linear infinite; animation:spin 1s linear infinite; }
@-webkit-keyframes spin{ from{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } }
@keyframes spin{ from{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } }
.loading-screen .lt{ color:var(--dim); font-size:18px; }

/* ---------------- Quit confirmation ---------------- */
.quit-modal{ position:fixed; top:0;right:0;bottom:0;left:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(3,4,8,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.quit-box{ background:#12151d; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:34px 40px; text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85); max-width:520px; }
.quit-t{ font-size:26px; font-weight:800; color:#f5f7fb; }
.quit-sub{ color:#9aa4b6; font-size:16px; margin-top:8px; }
.quit-actions{ display:flex; justify-content:center; gap:16px; margin-top:24px; }
:root[data-tv] .quit-actions > * + *{ margin-left:16px; }
/* The quit box is always dark in both themes, so its buttons use fixed colours (the theme
   variables made "Rester" text invisible in light mode). Focus paints the button white. */
.quit-box .btn{ background:rgba(255,255,255,.14); color:#f5f7fb; }
.quit-box .btn.primary{ background:#fff; color:#06101f; }
.quit-box .btn.is-focused{ background:#fff; color:#06101f; }

/* ---------------- Detail view is a DARK panel in both themes (no white band, readable) --------- */
/* A dark fill placed BEHIND the backdrop image (z-index:-3, the hero itself is -2) — keeps the
   artwork visible while the area below the hero stays dark instead of a white band. */
.detail{ background:transparent !important; }
.detail::before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:#05060a; z-index:-3; }
.detail-content{ color:#f5f7fb; }
.detail .seasons .chip{ background:rgba(255,255,255,.12); color:#f5f7fb; border-color:transparent; }
.detail .seasons .chip.on{ background:var(--accent); color:#fff; }
.detail .seasons .chip.is-focused{ background:#fff; color:#06101f; }
/* Episode card is now a Reprendre-style content card (transparent, caption below); focus scales the tile
   like every other card, so the caption text just stays light on the dark detail background. */
.detail .ep{ background:transparent; color:#f5f7fb; border:none; }
.detail .ep .cap small{ color:rgba(255,255,255,.62); }
.detail .block-title{ color:#f5f7fb; }

/* ---------------- In-player menus (subtitles / audio / quality) ---------------- */
.player-menu{ position:absolute; right:40px; bottom:184px; z-index:6; min-width:260px; max-width:340px;
  background:rgba(16,18,26,.96); border:1px solid var(--line); border-radius:16px; padding:8px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 24px 60px -14px rgba(0,0,0,.75); }
.player-menu[hidden]{ display:none; }
.pmenu-sec{ padding:4px; }
.pmenu-sec + .pmenu-sec{ border-top:1px solid var(--line); margin-top:4px; }
.pmenu-title{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim-2); padding:10px 12px 6px; }
.pmenu-note{ font-size:12px; color:var(--dim-2); padding:6px 12px 8px; line-height:1.35; }
.pmenu-opt{ display:block; width:100%; text-align:left; appearance:none; border:0; background:transparent; color:var(--text);
  font:inherit; font-weight:600; font-size:16px; padding:11px 14px; border-radius:10px; cursor:pointer; transition:background .12s var(--ease); }
.pmenu-opt.on{ color:var(--accent-2); }
.pmenu-opt.is-focused{ background:#fff; color:#06101f; }