/* =========================================================
   XR Live TV — Design System
   ========================================================= */
:root {
  /* color tokens */
  --bg:        #0a0e17;
  --bg-elev:   #111726;
  --surface:   #141b2c;
  --surface-2: #1b2438;
  --line:      #26314c;
  --line-soft: #1c2640;

  --text:      #eef2fb;
  --text-dim:  #93a1bd;
  --text-mut:  #5e6c8a;

  --brand:     #ff3357;
  --brand-2:   #ff6a85;
  --accent:    #4f8cff;
  --good:      #25d07d;
  --warn:      #ffb020;
  --danger:    #ff4d4f;

  --grad: linear-gradient(135deg, #ff3357 0%, #ff6a85 100%);
  --grad-accent: linear-gradient(135deg, #4f8cff 0%, #7c5cff 100%);

  /* shape */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.35);
  --sh-3: 0 20px 50px rgba(0,0,0,.5);
  --glow: 0 8px 30px rgba(255,51,87,.35);

  /* layout */
  --nav-w: 248px;
  --topbar-h: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="light"] {
  --bg:#f3f5fb; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f5f7fd;
  --line:#e4e9f4; --line-soft:#eef1f8;
  --text:#101725; --text-dim:#54627e; --text-mut:#8895af;
  --sh-2:0 8px 24px rgba(30,45,80,.10); --sh-3:0 20px 50px rgba(30,45,80,.14);
}

/* reset */
*,*::before,*::after { box-sizing: border-box; }
/* the [hidden] attribute must always win over component display rules
   (e.g. .stage__loader/.stage__error use display:grid) */
[hidden] { display: none !important; }
html,body { height:100%; }
body {
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display:block; max-width:100%; }
button,input,select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--brand) 35%, transparent); }

/* scrollbars */
*{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background: var(--line); border-radius:99px; }

.app { min-height:100dvh; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  --bg:var(--surface-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg);
  color:var(--text); font-weight:600; font-size:14.5px; cursor:pointer;
  transition: transform .12s var(--ease), filter .15s, background .15s, border-color .15s;
  white-space:nowrap; user-select:none;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform: scale(.97); }
.btn--primary{ background:var(--grad); border:none; color:#fff; box-shadow:var(--glow); }
.btn--accent{ background:var(--grad-accent); border:none; color:#fff; }
.btn--ghost{ background:transparent; }
.btn--block{ width:100%; }
.btn--sm{ padding:8px 14px; font-size:13px; }
.btn--danger{ background:transparent; border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); color:var(--danger); }
.btn[disabled]{ opacity:.55; pointer-events:none; }

.icon-btn{
  display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); cursor:pointer; flex:none; transition:background .15s, transform .1s;
}
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn:active{ transform:scale(.92); }

/* =========================================================
   Form fields
   ========================================================= */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:7px; }
.input{
  width:100%; height:48px; padding:0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text); font-size:15px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder{ color:var(--text-mut); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); }
.input-group{ position:relative; }
.input-group .input{ padding-left:44px; }
.input-group .ig-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-mut); pointer-events:none; }
.form-error{ color:var(--danger); font-size:13px; margin:6px 2px 0; min-height:18px; }

/* badges & chips */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  letter-spacing:.6px; padding:4px 9px; border-radius:7px; }
.badge--live{ background:var(--brand); color:#fff; }
.badge--ok{ background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); }
.badge--off{ background:color-mix(in srgb,var(--text-mut) 22%,transparent); color:var(--text-mut); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.dot--pulse{ animation:pulse 1.4s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

/* =========================================================
   AUTH (login / signup)
   ========================================================= */
.auth{
  min-height:100dvh; display:grid; grid-template-columns:1.1fr 1fr;
}
.auth__art{
  position:relative; overflow:hidden; padding:48px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,51,87,.25), transparent 60%),
    radial-gradient(700px 600px at 90% 90%, rgba(79,140,255,.22), transparent 60%),
    var(--bg-elev);
  border-right:1px solid var(--line);
}
.auth__art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px; opacity:.4; mask:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.auth__art-content{ position:relative; z-index:1; max-width:440px; }
.auth__tagline{ font-size:clamp(28px,3.4vw,42px); font-weight:800; line-height:1.12; margin:24px 0 14px; }
.auth__tagline span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth__sub{ color:var(--text-dim); font-size:16px; line-height:1.6; }
.auth__features{ position:relative; z-index:1; display:grid; gap:14px; margin-top:30px; }
.auth__feature{ display:flex; gap:12px; align-items:center; color:var(--text-dim); font-size:14.5px; }
.auth__feature .fi{ display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line); color:var(--brand); flex:none; }

.auth__panel{ display:grid; place-items:center; padding:32px 24px; }
.auth__card{ width:100%; max-width:400px; }
.auth__card h1{ font-size:26px; margin:0 0 6px; }
.auth__card .muted{ color:var(--text-dim); margin:0 0 26px; font-size:15px; }
.auth__switch{ text-align:center; margin-top:20px; color:var(--text-dim); font-size:14px; }
.auth__switch a{ color:var(--brand); font-weight:700; cursor:pointer; }
.auth__divider{ display:flex; align-items:center; gap:12px; color:var(--text-mut); font-size:12px; margin:18px 0; }
.auth__divider::before,.auth__divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.checkbox{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer; }
.checkbox input{ width:17px; height:17px; accent-color:var(--brand); }

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.3px; }
.brand__logo{ width:34px; height:34px; border-radius:10px; background:var(--grad); display:grid; place-items:center;
  color:#fff; font-weight:900; box-shadow:var(--glow); }
.brand em{ color:var(--brand); font-style:normal; }

/* =========================================================
   APP SHELL (sidebar + topbar)
   ========================================================= */
.shell{ display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100dvh; }

.sidenav{
  position:sticky; top:0; height:100dvh; display:flex; flex-direction:column;
  background:var(--bg-elev); border-right:1px solid var(--line); padding:18px 14px; gap:6px; z-index:40;
}
.sidenav__brand{ padding:8px 10px 18px; }
.nav-item{
  display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:12px;
  color:var(--text-dim); font-weight:600; font-size:15px; cursor:pointer; transition:background .15s,color .15s;
}
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); }
.nav-item svg{ flex:none; }
.sidenav__spacer{ flex:1; }
.sidenav__user{ display:flex; align-items:center; gap:11px; padding:12px 10px; border-top:1px solid var(--line); margin-top:8px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--grad-accent); display:grid; place-items:center;
  color:#fff; font-weight:800; flex:none; }
.sidenav__user .meta{ min-width:0; flex:1; }
.sidenav__user .meta b{ display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidenav__user .meta span{ font-size:12px; color:var(--text-mut); }

.content{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 22px;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__title{ font-size:18px; font-weight:700; }
.topbar__title small{ display:block; font-size:12.5px; color:var(--text-dim); font-weight:500; margin-top:2px; }
.topbar .menu-toggle{ display:none; }
.searchbar{ flex:1; max-width:460px; margin-left:auto; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px; height:42px; padding:0 16px; color:var(--text-mut); }
.searchbar input{ flex:1; background:none; border:none; outline:none; font-size:15px; min-width:0; }

.page{ padding:24px 22px 40px; flex:1; }
.page--flush{ padding:0; }

/* =========================================================
   Cards / grid
   ========================================================= */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 16px; gap:12px; }
.section-head h2{ font-size:19px; margin:0; }
.section-head p{ margin:3px 0 0; color:var(--text-dim); font-size:13.5px; }

.grid{ display:grid; gap:16px; }
.grid--stats{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.grid--cards{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.grid--channels{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

/* category-grouped browse (Netflix-style rows) */
.cat-section{ margin-bottom:26px; }
.cat-section .section-head{ margin:2px 0 12px; }
.cat-section .section-head h2{ display:flex; align-items:center; gap:10px; }
.cat-section .section-head h2::before{ content:""; width:4px; height:20px; border-radius:3px; background:var(--grad); }
.cat-count{ color:var(--text-dim); font-size:13px; font-weight:500; }
/* responsive grid — channels auto-fit the screen width and wrap line by line */
.cat-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; padding:4px 2px 12px; }
.cat-row .tile{ width:auto; }
@media (max-width:540px){ .cat-row{ grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:10px; } }

/* VOD cards (movies / shows / drama) */
.vod-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; padding:4px 2px 14px; }
.vod-card{ width:auto; cursor:pointer; }
.vod-card__thumb{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.vod-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.vod-card:hover .vod-card__thumb{ transform:translateY(-4px) scale(1.02); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--brand) 50%,var(--line)); }
.vod-card__play{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .2s;
  background:rgba(0,0,0,.35); color:#fff; }
.vod-card__play svg{ width:46px; height:46px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.vod-card:hover .vod-card__play{ opacity:1; }
.vod-card__year{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:700; padding:3px 7px; border-radius:6px; backdrop-filter:blur(4px); }
.vod-card__title{ margin-top:9px; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vod-card__meta{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
@media (max-width:540px){ .vod-row{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; } }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.card--hover{ cursor:pointer; }
.card--hover:hover{ border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); transform:translateY(-3px); box-shadow:var(--sh-2); }

.stat .stat__icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); margin-bottom:12px; }
.stat h3{ font-size:28px; margin:0; }
.stat p{ margin:2px 0 0; color:var(--text-dim); font-size:13.5px; }

/* server / playlist card */
.srv{ display:flex; flex-direction:column; gap:14px; }
.srv__top{ display:flex; align-items:flex-start; gap:13px; }
.srv__ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:var(--grad-accent); color:#fff; }
.srv__name{ font-size:16px; font-weight:700; margin:0; word-break:break-word; }
.srv__url{ font-size:12.5px; color:var(--text-mut); word-break:break-all; margin:3px 0 0; }
.srv__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.srv__count{ font-size:13px; color:var(--text-dim); }
.srv__actions{ display:flex; gap:8px; }

/* channel tile */
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer;
  transition:transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.tile:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 50%,var(--line)); box-shadow:var(--sh-2); }
.tile__thumb{ position:relative; aspect-ratio:1/1; background:var(--surface-2); display:grid; place-items:center; }
.tile__thumb img{ width:100%; height:100%; object-fit:cover; }
.tile__logo-fallback{ font-size:26px; font-weight:900; color:var(--text-dim); }
.tile__live{ position:absolute; top:8px; left:8px; }
.tile__body{ padding:10px 12px; }
.tile__name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile__cat{ font-size:11.5px; color:var(--text-mut); margin-top:2px; }

/* category chips row */
.chips{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; padding:8px 15px; border-radius:99px; border:1px solid var(--line); background:var(--surface);
  color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; }
.chip:hover{ color:var(--text); }
.chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* empty state */
.empty{ display:grid; place-items:center; justify-items:center; gap:14px; text-align:center;
  padding:60px 24px; color:var(--text-dim); }
.empty svg{ color:var(--text-mut); }
.empty h3{ margin:0; color:var(--text); font-size:18px; }
.empty p{ margin:0; max-width:380px; }

/* =========================================================
   Modal
   ========================================================= */
.modal-root{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal-root__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.modal{ position:relative; width:100%; max-width:480px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-3); animation:pop .2s var(--ease); }
@keyframes pop{ from{ transform:scale(.95); opacity:0; } }
.modal h2{ margin:0 0 4px; font-size:20px; }
.modal .muted{ color:var(--text-dim); margin:0 0 20px; font-size:14px; }
.modal__close{ position:absolute; top:16px; right:16px; }
.modal__foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.seg{ display:flex; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:5px; margin-bottom:18px; }
.seg button{ flex:1; padding:9px; border:none; border-radius:9px; background:transparent; color:var(--text-dim);
  font-weight:600; cursor:pointer; transition:all .15s; }
.seg button.active{ background:var(--brand); color:#fff; }

/* =========================================================
   PLAYER PAGE
   ========================================================= */
.player-page{ display:grid; grid-template-columns:1fr 340px; min-height:100dvh; background:var(--bg); }
.player-main{ display:flex; flex-direction:column; min-width:0; }
.player-bar{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.player-bar h1{ font-size:17px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-bar .sub{ font-size:12.5px; color:var(--text-dim); }

.stage{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
/* Android shell: pin the inline player so the native video overlay stays aligned while the list scrolls */
.xr-native .player-main .stage{ position:sticky; top:0; z-index:4; }
.stage video{ width:100%; height:100%; display:block; background:#000; }
.stage__overlay{ position:absolute; inset:0; display:grid; align-items:start; padding:18px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent 30%); transition:opacity .3s; }
.stage.playing .stage__overlay{ opacity:0; }
.stage__loader,.stage__error{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:14px; color:#fff; text-align:center; padding:20px; background:rgba(0,0,0,.55); }
.stage__error svg{ color:var(--brand); }
.spinner{ width:48px; height:48px; border:4px solid rgba(255,255,255,.2); border-top-color:var(--brand);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.player-info{ padding:18px; }
.player-info h2{ margin:0 0 6px; font-size:20px; }
.player-info .pcat{ color:var(--text-dim); }
.player-tools{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

.player-side{ border-left:1px solid var(--line); background:var(--bg-elev); display:flex; flex-direction:column;
  height:100dvh; position:sticky; top:0; }
.player-side__head{ padding:16px 16px 10px; border-bottom:1px solid var(--line); }
.player-side__head h3{ margin:0; font-size:15px; }
.player-side__list{ flex:1; overflow-y:auto; padding:8px; }
.ch-row{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:11px; cursor:pointer; transition:background .12s; }
.ch-row:hover{ background:var(--surface); }
.ch-row.active{ background:color-mix(in srgb,var(--brand) 15%,transparent); }
.ch-row.active .ch-row__name{ color:var(--brand); }
.ch-row__logo{ width:42px; height:42px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center;
  font-weight:800; overflow:hidden; flex:none; border:1px solid var(--line); font-size:14px; }
.ch-row__logo img{ width:100%; height:100%; object-fit:cover; }
.ch-row__info{ min-width:0; flex:1; }
.ch-row__name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-row__cat{ font-size:11.5px; color:var(--text-mut); }

.stage:fullscreen{ aspect-ratio:auto; height:100%; }
.stage:fullscreen video{ object-fit:contain; }

/* =========================================================
   Toast
   ========================================================= */
.toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:grid; gap:10px; }
.toast{ background:var(--bg-elev); border:1px solid var(--line); border-radius:12px; padding:12px 18px;
  box-shadow:var(--sh-3); font-size:14px; display:flex; align-items:center; gap:10px; animation:pop .2s var(--ease); }
.toast--ok{ border-color:color-mix(in srgb,var(--good) 50%,var(--line)); }
.toast--err{ border-color:color-mix(in srgb,var(--danger) 50%,var(--line)); }

/* =========================================================
   Backdrop for mobile nav
   ========================================================= */
.nav-backdrop{ position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.55); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .auth{ grid-template-columns:1fr; }
  .auth__art{ display:none; }
  .player-page{ grid-template-columns:1fr; }
  .player-side{ position:static; height:auto; border-left:none; border-top:1px solid var(--line); max-height:60vh; }
}

@media (max-width: 820px){
  .shell{ grid-template-columns:1fr; }
  .topbar .menu-toggle{ display:inline-grid; }
  .sidenav{ position:fixed; left:0; top:0; width:min(82vw,300px); transform:translateX(-100%);
    transition:transform .28s var(--ease); }
  .sidenav.open{ transform:translateX(0); }
  .searchbar{ max-width:none; }
}

@media (max-width: 540px){
  .page{ padding:16px 14px 32px; }
  .topbar{ padding:0 14px; }
  .topbar__title small{ display:none; }
  .grid--channels{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .player-bar h1{ font-size:15px; }
  .auth__panel{ padding:24px 18px; }
}

/* =========================================================
   CINEMATIC HOME (10-foot TV layout)
   ========================================================= */
.cine{ position:relative; min-height:100dvh; overflow:hidden; background:var(--bg); }

/* full-bleed animated backdrop */
.cine__bg{ position:absolute; inset:0; z-index:0; }
.cine__bg-img{ position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); transition:opacity .6s var(--ease), background-image .6s; opacity:0; }
.cine__bg-img.show{ opacity:1; animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.04) translateX(0); } to{ transform:scale(1.14) translateX(-1.5%); } }
.cine__bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb,var(--bg) 78%,transparent) 30%, transparent 62%),
    linear-gradient(0deg, var(--bg) 2%, transparent 42%),
    radial-gradient(120% 80% at 70% 30%, transparent 40%, color-mix(in srgb,var(--bg) 60%,transparent) 100%); }

/* floating launcher (only visible when the drawer is closed) */
.cine__menu{ position:fixed; z-index:80; top:16px; left:16px;
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  background:color-mix(in srgb,var(--bg) 55%,transparent); backdrop-filter:blur(10px); color:#fff;
  transition:opacity .2s var(--ease), transform .1s, background .15s; }
.cine__menu:hover{ background:color-mix(in srgb,var(--bg) 78%,transparent); }
.cine__menu:active{ transform:scale(.92); }
.nav-open .cine__menu{ opacity:0; pointer-events:none; transform:scale(.8); }

/* sliding drawer sidebar */
.cine__scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
.nav-open .cine__scrim{ opacity:1; visibility:visible; }

.cine__side{ position:fixed; z-index:95; top:0; left:0; height:100dvh; width:264px;
  display:flex; flex-direction:column; padding:14px 14px 18px; gap:3px; overflow-y:auto;
  background:color-mix(in srgb,var(--bg-elev) 97%,transparent); backdrop-filter:blur(16px);
  border-right:1px solid var(--line); box-shadow:var(--sh-3);
  transform:translateX(-108%); transition:transform .28s var(--ease); }
.nav-open .cine__side{ transform:translateX(0); }

/* shared shell layout (Live TV / VOD / Settings pages) */
.shellx{ position:relative; min-height:100dvh; }
.shellx__content{ display:flex; flex-direction:column; min-height:100dvh; }
.shellx .topbar{ padding-left:76px; }

/* clean sidebar header: toggle + brand on one row */
.cine__head{ display:flex; align-items:center; gap:12px; padding:6px 6px 16px; }
.cine__toggle{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text); transition:background .15s, transform .1s; }
.cine__toggle:hover{ background:var(--surface-2); }
.cine__toggle:active{ transform:scale(.9); }
.cine__head .brand{ font-size:18px; }
.cine__head .brand__logo{ width:32px; height:32px; }
.cine__logo{ display:flex; align-items:center; gap:10px; padding:6px 12px 18px; font-weight:800; }
.cine__logo .brand__logo{ width:32px; height:32px; }
.cine-nav{ display:flex; align-items:center; gap:15px; padding:11px 14px; border-radius:12px;
  color:var(--text-dim); font-weight:600; font-size:15px; cursor:pointer; transition:color .15s, background .15s; }
.cine-nav svg{ flex:none; opacity:.9; }
.cine-nav:hover{ color:#fff; }
.cine-nav.active{ color:#fff; }
.cine-nav.active svg{ color:var(--brand); }
.cine-nav.active span{ position:relative; }
.cine-nav.active span::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--brand); border-radius:2px; }
.cine__side-sep{ height:1px; background:color-mix(in srgb,var(--text) 12%,transparent); margin:8px 16px; }
.cine__side-spacer{ flex:1; }

/* event highlights (temporary spotlights) */
.cine__hl-label{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--text-mut); padding:6px 16px 4px; }
.cine-nav--hl{ position:relative; color:#fff;
  background:linear-gradient(90deg, color-mix(in srgb,var(--brand) 22%,transparent), transparent);
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent); }
.cine-nav--hl svg{ color:var(--brand); opacity:1; }
.cine-nav--hl:hover{ background:linear-gradient(90deg, color-mix(in srgb,var(--brand) 34%,transparent), transparent); }
.cine-nav--hl .hl-live{ margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent); animation:pulse 1.4s infinite; }

/* hero content */
.cine__stage{ position:absolute; z-index:2; left:0; right:0; top:0; bottom:200px;
  display:flex; flex-direction:column; justify-content:center; padding:0 6vw 0 80px; pointer-events:none; }
.cine__hero{ max-width:560px; pointer-events:auto; }
.cine__eyebrow{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:13px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.cine__eyebrow .badge{ letter-spacing:.5px; }
.cine__title{ font-size:clamp(34px, 6vw, 72px); font-weight:900; line-height:1; margin:0 0 16px;
  letter-spacing:-1px; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.cine__meta{ display:flex; align-items:center; gap:14px; color:var(--text-dim); font-size:14px;
  font-weight:600; margin-bottom:14px; flex-wrap:wrap; }
.cine__meta .mtag{ padding:3px 9px; border:1px solid color-mix(in srgb,var(--text) 30%,transparent); border-radius:6px; font-size:12px; }
.cine__desc{ color:#d6deec; font-size:15.5px; line-height:1.6; margin:0 0 26px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:520px; }
.cine__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.cine__cta .btn{ padding:13px 26px; font-size:15px; }

/* bottom poster rail */
.cine__rail-wrap{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:0 0 26px 26px; }
.cine__rail-head{ display:flex; align-items:center; justify-content:space-between; padding-right:26px; margin-bottom:12px; }
.cine__rail-head h3{ margin:0; font-size:16px; font-weight:700; }
.cine__rail{ display:flex; gap:14px; overflow-x:auto; padding:6px 26px 10px 0; scroll-behavior:smooth;
  scrollbar-width:none; }
.cine__rail::-webkit-scrollbar{ display:none; }
.poster{ position:relative; flex:none; width:152px; aspect-ratio:2/3; border-radius:14px; overflow:hidden;
  cursor:pointer; background:var(--surface-2); border:2px solid transparent;
  transition:transform .22s var(--ease), border-color .2s, box-shadow .2s; }
.poster img{ width:100%; height:100%; object-fit:cover; }
.poster__fallback{ width:100%; height:100%; display:grid; place-items:center; font-size:30px; font-weight:900;
  color:#fff; }
.poster__grad{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85), transparent 55%); }
.poster__cap{ position:absolute; left:10px; right:10px; bottom:10px; }
.poster__cap b{ display:block; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poster__cap span{ font-size:11px; color:var(--text-dim); }
.poster:hover{ transform:translateY(-6px) scale(1.04); box-shadow:var(--sh-3); }
.poster.active{ border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent); }
.poster__live{ position:absolute; top:8px; left:8px; }

/* mobile cinematic */
@media (max-width: 820px){
  .cine__stage{ left:0; right:0; bottom:230px; padding:24px 20px 0 70px; justify-content:flex-end; }
  .cine__side{ width:min(80vw,300px); }
  .cine__rail-head{ padding-right:16px; }
  .poster{ width:120px; }
  .cine__bg::after{ background:linear-gradient(0deg, var(--bg) 6%, transparent 60%),
    linear-gradient(90deg, color-mix(in srgb,var(--bg) 55%,transparent), transparent 70%); }
}
@media (max-width: 540px){
  .cine__title{ letter-spacing:-.5px; }
  .poster{ width:108px; }
  .cine__cta .btn{ flex:1; }
}

/* ---------------- About + Update ---------------- */
.muted{ color:var(--text-dim); }
.about{ max-width:640px; margin:0 auto; padding:8px 8px 32px; }
.about-hero{ text-align:center; padding:28px; }
.about-hero__logo{ display:inline-grid; place-items:center; width:72px; height:72px; border-radius:18px; background:linear-gradient(135deg,var(--brand),var(--brand2)); font-weight:800; font-size:26px; color:#fff; box-shadow:0 10px 30px rgba(255,61,87,.4); }
.about-hero h2{ margin:14px 0 2px; }
.about-row{ display:flex; align-items:center; gap:14px; padding:13px 4px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; }
.about-row:last-child{ border-bottom:none; }
.about-row__ic{ width:42px; height:42px; border-radius:12px; background:var(--card-2,rgba(255,255,255,.05)); display:grid; place-items:center; color:var(--brand2); flex:0 0 auto; }
.about-row__txt{ display:flex; flex-direction:column; min-width:0; }
.about-row__txt small{ color:var(--text-dim); font-size:12px; }
.about-row__txt b{ font-size:15px; word-break:break-all; }
.upd-track{ height:12px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.upd-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .25s ease; box-shadow:0 0 14px rgba(255,61,87,.55); }