/* PhiPTV — demo.css (demo.html): a look-alike of the TV app's main screens.
   Page layout first, then the TV canvas. The canvas is the app's own
   1920×1080 screen: every size below is the TV build's pixel value at
   1080p (ScreenUtil design units × the TV profile scale), read from the
   Flutter code. demo.js scales the canvas as one unit (--tv-scale).
   Runtime values arrive as custom properties set through CSSOM — no inline
   styles (CSP style-src 'self'). */

/* ── Page ──────────────────────────────────────────────── */
.demo-wrap { padding-block: 8px clamp(48px, 7vw, 96px); }
.demo-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1100px) { .demo-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.demo-stage { display: grid; gap: 18px; min-inline-size: 0; }

.tv-bezel {
  padding: clamp(6px, 1vw, 12px); border-radius: clamp(14px, 2vw, 24px);
  background: linear-gradient(180deg, #1d1533, #0a0614);
  box-shadow: var(--shadow), 0 0 0 1px var(--line-strong), 0 0 120px rgba(139, 92, 246, 0.22);
}
.tv-viewport {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: clamp(8px, 1.2vw, 14px); background: #05030b; outline: none; cursor: pointer;
}
.tv-viewport:focus-visible { box-shadow: 0 0 0 3px var(--glow); }
.tv-stand { block-size: 14px; inline-size: 30%; margin: 0 auto; background: linear-gradient(180deg, rgba(186, 158, 255, 0.25), transparent); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.tv-tip { position: absolute; inset-inline: 0; inset-block-end: 10px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.tv-tip span { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(10, 6, 20, 0.86); border: 1px solid var(--line-strong); color: var(--text); transition: opacity 300ms var(--ease); }
.tv-viewport:focus .tv-tip span { opacity: 0; }
.tip-touch { display: none; }
@media (hover: none) { .tip-keys { display: none; } .tip-touch { display: inline; } }
@media (max-width: 520px) { .tv-tip { inset-block-end: 6px; } .tv-tip span { font-size: 11px; padding: 5px 10px; } }

.demo-caption { min-block-size: 3.2em; color: var(--muted); font-size: 15.5px; max-inline-size: 80ch; }

/* Remote */
.remote { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 44px); padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 6px; }
.rk {
  display: grid; place-items: center; min-inline-size: 56px; min-block-size: 56px; padding: 0 14px;
  border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface-alt); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background var(--dur) var(--ease), transform 120ms var(--ease);
}
.rk:hover { background: var(--surface-hi); }
.rk:active { transform: scale(0.94); }
.rk svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rk-up { grid-area: 1 / 2; } .rk-left { grid-area: 2 / 1; } .rk-ok { grid-area: 2 / 2; } .rk-right { grid-area: 2 / 3; } .rk-down { grid-area: 3 / 2; }
.rk-ok { border-radius: 50%; background: var(--violet); border-color: var(--violet); color: #fff; }
.rk-ok:hover { background: var(--violet-deep); }
.remote-side { display: grid; gap: 10px; }
@media (max-width: 520px) { .dpad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); } .remote { gap: 14px; padding: 14px; } }

/* Side panel */
.demo-side { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.demo-side h2 { font-size: 20px; }
.demo-side > p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.jump { display: grid; gap: 8px; }
.jump button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: start; cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.jump button:hover { background: rgba(137, 90, 246, 0.12); }
.jump button span { color: var(--muted); font-size: 13px; font-weight: 500; }
.jump button.is-on { border-color: var(--glow); background: rgba(137, 90, 246, 0.16); }
.keys { display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); border-block-start: 1px solid var(--line); padding-block-start: 16px; }
.keys kbd { font-size: 12px; }
.demo-reset { justify-self: start; background: none; border: 0; padding: 0; color: var(--glow); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.demo-note { margin-block-start: 8px; color: var(--muted); font-size: 13.5px; max-inline-size: 86ch; }

/* ── The app's font (Inter, OFL — assets/fonts/inter/OFL.txt) ── */
@font-face { font-family: "PhiInter"; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "PhiInter"; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "PhiInter"; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "PhiInter"; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter/Inter-Bold.woff") format("woff"); }
@font-face { font-family: "PhiInter"; font-weight: 800; font-display: swap; src: url("/assets/fonts/inter/Inter-ExtraBold.woff") format("woff"); }
@font-face { font-family: "PhiInter"; font-weight: 900; font-display: swap; src: url("/assets/fonts/inter/Inter-Black.woff") format("woff"); }

/* ── TV canvas (1920×1080) ─────────────────────────────── */
.tv-canvas {
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1920px; block-size: 1080px;
  transform-origin: 0 0; transform: scale(var(--tv-scale, 0.5)); overflow: hidden; cursor: default;
  background: #0A0614; color: #CBC3D7; font-family: "PhiInter", Roboto, "Segoe UI", Arial, sans-serif;
  font-size: 23.1px; line-height: 1.4; letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; user-select: none;
}
.tv-canvas img { display: block; max-inline-size: none; }
.ic { display: block; flex: 0 0 auto; fill: currentColor; max-inline-size: none; }
.s18 { inline-size: 18px; block-size: 18px; } .s25 { inline-size: 25.2px; block-size: 25.2px; }
.s27 { inline-size: 27px; block-size: 27px; } .s28 { inline-size: 28.8px; block-size: 28.8px; }
.s32 { inline-size: 32.4px; block-size: 32.4px; } .s36 { inline-size: 36px; block-size: 36px; }
.s39 { inline-size: 39.6px; block-size: 39.6px; } .s56 { inline-size: 56px; block-size: 56px; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { position: absolute; inset-block: 0; inset-inline-start: 152px; inset-inline-end: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none; }
.av { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #895AF6, #4A22A8); color: #fff; font-weight: 800; letter-spacing: 0; flex: 0 0 auto; }

/* Sidebar (dashboard_layout.dart) */
.rail {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 20; inline-size: 152px;
  display: flex; flex-direction: column; overflow: hidden; background: rgba(15, 10, 30, 0.941);
  transition: inline-size 140ms var(--ease);
}
.rail.open { inline-size: 405px; }
.rail-head { display: flex; align-items: center; flex: 0 0 auto; padding: 15.5px 21.7px 18.6px 26.35px; }
.rail-logo { inline-size: 72px; block-size: 72px; flex: 0 0 auto; transform: translateX(2.8px); }
.rbrand { display: flex; flex-direction: column; margin-inline-start: 24px; white-space: nowrap; opacity: 0; transition: opacity 140ms var(--ease); }
.rbrand b { font-weight: 700; font-size: 26.4px; line-height: 1.5; letter-spacing: 0.3px; color: #fff; }
.rbrand span { font-weight: 800; font-size: 16.5px; line-height: 1.45; letter-spacing: 2.4px; color: #D0BCFF; }
.rail-nav { flex: 1; min-block-size: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12.4px; }
.ri {
  position: relative; display: flex; align-items: center; flex: 0 0 auto; block-size: 84px; padding: 10px 28px;
  border: 4px solid transparent; border-radius: 20px; color: rgba(208, 188, 255, 0.6); white-space: nowrap; cursor: pointer;
}
.ri + .ri { margin-block-start: 4px; }
.ri .lb { margin-inline-start: 32px; font-weight: 700; font-size: 28.05px; line-height: 1.4; letter-spacing: 0.5px; opacity: 0; transition: opacity 140ms var(--ease); }
.ri.sel { background: rgba(137, 90, 246, 0.2); color: #D0BCFF; }
.ri.sel .lb { font-weight: 800; }
.ri.sel:not(.focus)::after { content: ""; position: absolute; inset-inline-end: -4px; inset-block: 12px; inline-size: 4px; border-radius: 2px; background: #C4B5FD; }
.ri.focus { background: rgba(137, 90, 246, 0.2); border-color: #BA9EFF; }
.lib { display: flex; align-items: center; block-size: 27px; margin-block-start: 24.3px; padding-inline-start: 24.6px; font-weight: 700; font-size: 16.5px; letter-spacing: 4px; color: rgba(255, 255, 255, 0.54); white-space: nowrap; opacity: 0; transition: opacity 140ms var(--ease); }
.rail-foot { flex: 0 0 auto; }
.rdiv { position: relative; block-size: 16px; }
.rdiv::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 7px; block-size: 2px; background: rgba(208, 188, 255, 0.102); }
.rfoot-in { padding: 6.2px 12.4px 15.5px; }
.chip {
  display: flex; align-items: center; justify-content: center; gap: 13.5px; block-size: 40.5px; margin-block-start: 2.7px;
  border-radius: 16px; background: rgba(34, 197, 94, 0.059); color: #22C55E; overflow: hidden; white-space: nowrap;
  font-weight: 700; font-size: 18.15px; letter-spacing: 0.6px;
}
.chip span { display: none; }
.acct {
  display: flex; align-items: center; justify-content: center; gap: 24px; block-size: 62.1px; margin-block-start: 12px;
  padding: 6.2px 12.4px; border-radius: 24px; background: rgba(255, 255, 255, 0.051); overflow: hidden; white-space: nowrap;
}
.acct .av { inline-size: 46.8px; block-size: 46.8px; font-size: 19.7px; }
.acct-t { display: none; flex: 1; min-inline-size: 0; line-height: 1.35; }
.acct-t b { display: block; font-weight: 700; font-size: 19.8px; color: #fff; }
.acct-t span { display: block; font-weight: 600; font-size: 16.5px; color: rgba(255, 255, 255, 0.54); }
.gear { display: none; place-items: center; inline-size: 45.9px; block-size: 45.9px; border-radius: 50%; background: rgba(255, 255, 255, 0.051); color: #D0BCFF; flex: 0 0 auto; cursor: pointer; transition: transform 150ms, box-shadow 150ms; }
.gear.focus { transform: scale(1.05); box-shadow: 0 0 28.7px 2px rgba(186, 158, 255, 0.706); }
.rail.open .rbrand, .rail.open .ri .lb, .rail.open .lib { opacity: 1; }
.rail.open .chip { justify-content: flex-start; padding: 0 24.8px; }
.rail.open .chip span { display: inline; }
.rail.open .acct { justify-content: flex-start; }
.rail.open .acct-t { display: block; }
.rail.open .gear { display: grid; }

/* Shared focus frame for cards (focus_frame.dart) */
.tc {
  position: relative; flex: 0 0 auto; border: 4px solid transparent; border-radius: 21.6px; cursor: pointer;
  transition: transform 110ms var(--ease), border-color 110ms var(--ease), box-shadow 110ms var(--ease);
}
.tc.focus { z-index: 2; border-color: #BA9EFF; box-shadow: 0 0 19.5px rgba(186, 158, 255, 0.314); transform: scale(1.05); }
.card-in { position: relative; block-size: 100%; border-radius: 18.9px; overflow: hidden; background: #1A1526; display: flex; flex-direction: column; transition: background 110ms var(--ease); }
.tc.focus .card-in { background: #39285F; }
.art { position: relative; flex: 0 0 auto; overflow: hidden; }
.art > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cap { flex: 1; min-block-size: 0; padding: 10.8px 16.2px 13.5px; }
.cap-t { font-weight: 800; font-size: 24.75px; line-height: 1.25; letter-spacing: 0.5px; color: #E8DFF5; }
.cap-m { margin-block-start: 4.05px; font-weight: 600; font-size: 17.3px; line-height: 1.2; letter-spacing: 0.6px; color: rgba(176, 167, 192, 0.745); }
.tc.focus .cap-t { color: #fff; }
.tc.focus .cap-m { color: #BA9EFF; }
.qb { position: absolute; inset-block-start: 10.8px; inset-inline-start: 10.8px; padding: 4.05px 8.1px; border-radius: 5.4px; background: rgba(0, 0, 0, 0.588); border: 2px solid rgba(255, 255, 255, 0.098); color: #fff; font-weight: 900; font-size: 13.2px; line-height: 1.4; letter-spacing: 1px; }
.rb { position: absolute; inset-inline-end: 10.8px; inset-block-end: 10.8px; display: flex; align-items: center; gap: 2.7px; padding: 4.05px 9.45px; border-radius: 27px; background: rgba(208, 188, 255, 0.902); color: #3B0091; font-weight: 900; font-size: 14.85px; line-height: 1.4; letter-spacing: 0.5px; }
.favb { position: absolute; inset-block-start: 10.8px; inset-inline-end: 10.8px; display: grid; place-items: center; inline-size: 35.1px; block-size: 35.1px; border-radius: 50%; background: rgba(0, 0, 0, 0.392); color: rgba(255, 255, 255, 0.706); }
.favb.on { background: rgba(255, 193, 7, 0.863); color: #fff; }

/* Logos (placeholder marks) */
.lgm { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 22%; color: #fff; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.lc0 { background: linear-gradient(135deg, #E2364A, #FF7A45); } .lc1 { background: linear-gradient(135deg, #2563EB, #38BDF8); }
.lc2 { background: linear-gradient(135deg, #16A34A, #84CC16); } .lc3 { background: linear-gradient(135deg, #B91C1C, #F59E0B); }
.lc4 { background: linear-gradient(135deg, #7C3AED, #C084FC); } .lc5 { background: linear-gradient(135deg, #0D9488, #2DD4BF); }
.lc6 { background: linear-gradient(135deg, #DB2777, #F472B6); } .lc7 { background: linear-gradient(135deg, #A16207, #FACC15); }

/* Home (home_screen.dart) */
.hscroll { position: absolute; inset-inline: 0; inset-block-start: 0; padding: 183.6px 0 129.6px; transform: translateY(calc(-1 * var(--sy, 0px))); transition: transform 180ms var(--ease); }
.hrow + .hrow { margin-block-start: 64.8px; }
.hrow-t { margin: 0 74.4px 24.8px; font-weight: 700; font-size: 39.6px; line-height: 1.33; letter-spacing: -1px; color: #fff; }
.htrack { position: relative; display: flex; padding: 0 74.4px; transform: translateX(calc(-1 * var(--sx, 0px))); transition: transform 180ms var(--ease); }
.r-cw, .r-lt { gap: 21.6px; } .r-pc { gap: 32.4px; block-size: 582.5px; }
.topbar {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 5; display: flex; align-items: center;
  block-size: 126.8px; padding: 37.2px 74.4px 24.8px;
  background: linear-gradient(180deg, rgba(10, 6, 20, 0.863), rgba(10, 6, 20, 0.549) 60%, rgba(10, 6, 20, 0));
}
.tb-title { flex: 1; font-weight: 900; font-size: 46.2px; line-height: 1.4; color: #E8DFF5; }
.clock { display: flex; align-items: center; gap: 16.2px; }
.dial { inline-size: 59.4px; block-size: 59.4px; }
.clk-t { display: flex; align-items: baseline; font-weight: 800; font-size: 36.3px; line-height: 1; letter-spacing: 1px; color: #E8DFF5; font-variant-numeric: tabular-nums; }
.clk-t small { margin-inline-start: 4px; font-weight: 700; font-size: 19.8px; letter-spacing: 0.5px; color: #B0A7C0; }
.clk-d { margin-block-start: 5.4px; font-weight: 500; font-size: 16.5px; line-height: 1.2; color: #B0A7C0; }
.pill {
  display: flex; align-items: center; gap: 10.8px; inline-size: 486px; block-size: 64.8px; margin-inline-start: 37.8px; padding: 0 24.8px;
  border-radius: 54px; background: rgba(0, 0, 0, 0.431); border: 2px solid rgba(255, 255, 255, 0.078); color: rgba(255, 255, 255, 0.627);
  font-size: 21.45px; cursor: pointer; transition: background 150ms, border-color 150ms, box-shadow 150ms;
}
.pill span { color: rgba(255, 255, 255, 0.549); }
.pill.focus, .bell.focus { background: rgba(0, 0, 0, 0.627); border: 4px solid #895AF6; box-shadow: 0 0 28.7px 2px rgba(137, 90, 246, 0.47); }
.tb-mic { display: grid; place-items: center; inline-size: 59.4px; block-size: 59.4px; margin-inline-start: 16.2px; border-radius: 50%; background: rgba(0, 0, 0, 0.431); border: 4px solid rgba(255, 255, 255, 0.078); color: rgba(255, 255, 255, 0.627); cursor: pointer; transition: border-color 110ms var(--ease), background 110ms var(--ease); }
.tb-mic.focus { border-color: #BA9EFF; background: linear-gradient(rgba(137, 90, 246, 0.235), rgba(137, 90, 246, 0.235)), rgba(0, 0, 0, 0.431); color: #BA9EFF; }
.bell { position: relative; display: grid; place-items: center; inline-size: 59.4px; block-size: 59.4px; margin-inline-start: 21.6px; border-radius: 50%; background: rgba(0, 0, 0, 0.431); border: 2px solid rgba(255, 255, 255, 0.078); color: #DC2626; cursor: pointer; transition: background 150ms, border-color 150ms, box-shadow 150ms; }
.bell-n { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; display: grid; place-items: center; min-inline-size: 23px; block-size: 23px; padding: 0 5.4px; border-radius: 999px; background: #DC2626; border: 3px solid #0A0614; box-sizing: content-box; color: #fff; font-weight: 800; font-size: 15.7px; line-height: 1; }
.tb-av { position: relative; margin-inline-start: 16.2px; border-radius: 50%; cursor: pointer; }
.tb-av .av { inline-size: 59.4px; block-size: 59.4px; font-size: 25px; }
.tb-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.235); transition: box-shadow 150ms; }
.tb-av.focus::after { box-shadow: inset 0 0 0 4px #895AF6, 0 0 28.7px 2px rgba(137, 90, 246, 0.47); }

/* Continue Watching tile (continue_watching_tile.dart) */
.cw { inline-size: 501.2px; block-size: 313.2px; }
.cw .card-in > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cw-top { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 75.6px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
.cw-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 20, 0) 0, rgba(10, 6, 20, 0) 32%, rgba(10, 6, 20, 0.843) 72%, rgba(10, 6, 20, 0.98) 100%); }
.tc.focus .cw-scrim { background: linear-gradient(180deg, rgba(57, 40, 95, 0) 0, rgba(57, 40, 95, 0) 32%, rgba(57, 40, 95, 0.843) 72%, rgba(57, 40, 95, 0.98) 100%); }
.ep-tag { position: absolute; inset-block-start: 13.5px; inset-inline-start: 13.5px; padding: 5.4px 10.8px; border-radius: 9.45px; background: rgba(137, 90, 246, 0.92); box-shadow: 0 2px 14.9px rgba(0, 0, 0, 0.35); color: #fff; font-weight: 900; font-size: 18.15px; line-height: 1.4; letter-spacing: 1.2px; }
.cw-play { position: absolute; inset-block-start: 13.5px; inset-inline-end: 13.5px; display: none; place-items: center; inline-size: 40.5px; block-size: 40.5px; border-radius: 50%; background: #fff; color: #895AF6; box-shadow: 0 2px 19.5px rgba(0, 0, 0, 0.43); }
.tc.focus .cw-play { display: grid; }
.cw-foot { position: absolute; inset-inline: 18.9px; inset-block-end: 14.85px; }
.cw-name { font-weight: 800; font-size: 24.75px; line-height: 1.2; letter-spacing: 0.5px; color: #fff; text-shadow: 0 0 14.9px rgba(0, 0, 0, 0.6); }
.seek { position: relative; block-size: 17.55px; margin-block-start: 12.15px; }
.seek::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 6.075px; block-size: 5.4px; border-radius: 5.4px; background: rgba(255, 255, 255, 0.275); }
.seek i { position: absolute; inset-inline-start: 0; inset-block-start: 6.075px; block-size: 5.4px; inline-size: var(--p, 0%); border-radius: 5.4px; background: linear-gradient(90deg, #895AF6, #BA9EFF); box-shadow: 0 0 14.9px rgba(137, 90, 246, 0.63); }
.seek b { position: absolute; inset-inline-start: var(--p, 0%); inset-block-start: 50%; inline-size: 13.5px; block-size: 13.5px; margin: -6.75px 0 0 -6.75px; border-radius: 50%; background: #fff; border: 2.7px solid #895AF6; transition: all 110ms var(--ease); }
.tc.focus .seek b { inline-size: 17.55px; block-size: 17.55px; margin: -8.775px 0 0 -8.775px; }
.cw-clk { display: flex; justify-content: space-between; margin-block-start: 8.1px; font-size: 18.15px; line-height: 1.4; letter-spacing: 0.8px; font-variant-numeric: tabular-nums; }
.cw-clk b { font-weight: 800; color: #BA9EFF; }
.cw-clk span { font-weight: 600; color: rgba(255, 255, 255, 0.588); }
.tc.focus .cw-clk b { color: #fff; }

/* Recently Watched Live TV tile */
.lt { inline-size: 270px; block-size: 270px; }
.lt-media { position: relative; flex: 1; min-block-size: 0; background: #262033; }
.lt-logo { position: absolute; inset: 45.9px 43.2px 21.6px; display: flex; justify-content: center; }
.lt-sq { block-size: 100%; aspect-ratio: 1; border-radius: 16.2px; overflow: hidden; display: grid; place-items: center; }
.lt-sq .lgm { font-size: 46px; border-radius: 16.2px; }
.lt-sq .lgm.l3 { font-size: 36px; }
.lt-ini { font-weight: 900; font-size: 100px; line-height: 1; color: rgba(186, 158, 255, 0.824); }
.lbadge { position: absolute; inset-block-start: 13.5px; inset-inline-end: 13.5px; display: flex; align-items: center; gap: 8px; padding: 2.7px 8.1px; border-radius: 5.4px; background: #DC2626; color: #fff; font-weight: 900; font-size: 13.2px; line-height: 1.4; letter-spacing: 1px; }
.lbadge i, .live-b i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #fff; }
.lfav { position: absolute; inset-block-start: 13.5px; inset-inline-start: 13.5px; display: grid; place-items: center; padding: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); border: 2px solid rgba(250, 204, 21, 0.7); color: #FACC15; }
.lt .cap { flex: 0 0 auto; }
.lt .cap-t { font-size: 22.3px; }

/* Suggested poster tc */
.pc { inline-size: 368px; block-size: 568px; }
.pc .art { block-size: 480px; }

/* Category pane — shared by Live TV, Movies, Series (category_row.dart) */
.cpane { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 602.1px; display: flex; flex-direction: column; background: #161024; border-inline-end: 2px solid rgba(137, 90, 246, 0.051); }
.cp-head { padding: 31px 37.2px 0; }
.cp-title { font-weight: 700; font-size: 33px; line-height: 1.4; letter-spacing: -1px; color: #E8DFF5; }
.cp-count { margin-block-start: 8px; font-weight: 800; font-size: 16.5px; line-height: 1.4; letter-spacing: 4px; color: #4B4559; }
.cp-search { display: flex; gap: 10.8px; padding: 24.8px 37.2px 37.2px; }
.fld { display: flex; align-items: center; gap: 16px; flex: 1; min-inline-size: 0; block-size: 48.6px; padding: 0 24px; border-radius: 24px; background: rgba(41, 34, 60, 0.4); border: 4px solid transparent; color: #4B4559; font-size: 19.8px; cursor: pointer; }
.tile { display: grid; place-items: center; flex: 0 0 auto; inline-size: 48.6px; block-size: 48.6px; border-radius: 24px; background: rgba(41, 34, 60, 0.4); border: 4px solid transparent; color: #4B4559; cursor: pointer; transition: border-color 110ms var(--ease), background 110ms var(--ease); }
.fld.focus, .tile.focus { border-color: #BA9EFF; }
.tile.focus { background: #37275D; color: #BA9EFF; }
.cp-lv { position: relative; flex: 1; min-block-size: 0; overflow: hidden; }
.cp-list { padding: 0 16px; transform: translateY(calc(-1 * var(--sy, 0px))); transition: transform 180ms var(--ease); }
.crow { padding: 2px 0; cursor: pointer; }
.crow.fx { padding: 4px 0; }
.crb { position: relative; display: flex; align-items: center; gap: 24px; block-size: 84.47px; padding: 18.6px 24.8px; border: 4px solid transparent; border-radius: 24px; color: #B0A7C0; transition: border-color 110ms var(--ease), background 110ms var(--ease); }
.crb > span { flex: 1; min-inline-size: 0; font-weight: 700; font-size: 28.05px; line-height: 1.4; letter-spacing: 0.5px; }
.crb .pin { margin-inline-start: -8px; inline-size: 25.2px; block-size: 25.2px; }
.crow.focus .crb { border-color: #BA9EFF; background: rgba(137, 90, 246, 0.2); }
.crow.sel .crb { background: rgba(137, 90, 246, 0.15); }
.crow.sel .crb > .ic, .crow.sel .pin, .crow.focus .pin { color: #BA9EFF; }
.crow.sel .crb > span { font-weight: 800; color: #E8DFF5; }
.crow.sel:not(.focus):not(.fav) .crb::before { content: ""; position: absolute; inset-inline-start: -4px; inset-block: 12px; inline-size: 6px; border-radius: 3px; background: #895AF6; }
.crow.fav .crb > .ic { color: #FACC15; }
.crow.fav.sel .crb { background: rgba(255, 193, 7, 0.1); }

/* Live TV (live_tv_screen.dart) */
.lcol { position: absolute; inset-block: 0; inset-inline-start: 602.1px; inset-inline-end: 0; }
.pv { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 561.6px; overflow: hidden; background: #000; cursor: pointer; }
.pv-pic { position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 998.4px; margin-inline-start: -499.2px; overflow: hidden; }
.pv-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: pv-drift 26s ease-in-out infinite alternate; }
@keyframes pv-drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.2%, -0.8%); } }
@media (prefers-reduced-motion: reduce) { .pv-pic img { animation: none; } }
.pv-top { position: absolute; inset-block-start: 32.4px; inset-inline-start: 32.4px; display: flex; align-items: center; gap: 24px; }
.live-b { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-radius: 999px; background: #EF4444; box-shadow: 0 0 28.7px rgba(239, 68, 68, 0.4); color: #fff; font-weight: 900; font-size: 16.5px; line-height: 1.4; letter-spacing: 4px; }
.live-b i { inline-size: 12px; block-size: 12px; }
.pv-name { padding: 12px 32px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; font-size: 19.8px; line-height: 1.4; }
.epg { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 99.2px 49.6px 37.2px; background: linear-gradient(0deg, rgba(10, 6, 20, 0.9), rgba(10, 6, 20, 0)); }
.epg-r1 { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.epg-l { flex: 1; min-inline-size: 0; }
.epg-tl { display: flex; align-items: center; gap: 24px; }
.now-chip { flex: 0 0 auto; padding: 6px 16px; border-radius: 8px; background: #895AF6; color: #fff; font-weight: 900; font-size: 16.5px; line-height: 1.4; }
.epg-t { min-inline-size: 0; font-weight: 900; font-size: 46.2px; line-height: 1.4; letter-spacing: -1px; color: #E8DFF5; }
.epg-d { margin-block-start: 8px; font-weight: 500; font-size: 21.45px; line-height: 1.4; color: #B0A7C0; }
.epg-nx { flex: 0 0 auto; text-align: end; }
.epg-nx b { display: block; font-weight: 900; font-size: 16.5px; line-height: 1.4; letter-spacing: 4px; color: #4B4559; }
.epg-nx span { display: block; margin-block-start: 8px; font-size: 16.5px; color: #B0A7C0; }
.epg-bar { margin-block-start: 32px; block-size: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.epg-bar i { display: block; block-size: 100%; inline-size: var(--p, 0%); border-radius: inherit; background: #895AF6; box-shadow: 0 0 24px rgba(137, 90, 246, 0.8); }
.epg-tm { display: flex; justify-content: space-between; margin-block-start: 16px; font-weight: 800; font-size: 16.5px; line-height: 1.4; color: #4B4559; }
.epg-tm b { font-weight: 800; color: #BA9EFF; }
.qf { position: absolute; inset-inline-end: 32.4px; inset-block-end: 27px; z-index: 3; display: flex; gap: 10.8px; inline-size: 459px; }
.qf-f { display: flex; align-items: center; gap: 16px; flex: 1; min-inline-size: 0; block-size: 48.6px; padding: 0 24px; border-radius: 24px; background: rgba(0, 0, 0, 0.431); border: 4px solid rgba(255, 255, 255, 0.235); color: rgba(255, 255, 255, 0.706); font-weight: 500; font-size: 19.8px; cursor: pointer; }
.qf-f span { color: rgba(255, 255, 255, 0.588); }
.qf-m { display: grid; place-items: center; flex: 0 0 auto; inline-size: 48.6px; block-size: 48.6px; border-radius: 24px; background: rgba(0, 0, 0, 0.431); border: 4px solid rgba(255, 255, 255, 0.235); color: rgba(255, 255, 255, 0.784); cursor: pointer; }
.qf-f.focus, .qf-m.focus { border-color: #BA9EFF; }
.pv-fs { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: 4; display: none; align-items: center; gap: 10.8px; padding: 12.4px 21.7px; transform: translate(-50%, -50%); border-radius: 24px; background: rgba(0, 0, 0, 0.588); border: 4px solid #BA9EFF; color: #fff; font-weight: 800; font-size: 23.1px; line-height: 1.4; letter-spacing: 0.6px; }
.pv.focus .pv-fs { display: flex; }
.pv.focus::after { content: ""; position: absolute; inset: 0; z-index: 4; box-shadow: inset 0 0 0 6px #BA9EFF; pointer-events: none; }
.strip { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 518.4px; background: #161024; border-block-start: 2px solid rgba(137, 90, 246, 0.051); }
.sv { position: absolute; inset-block: 0; inset-inline-start: 0; inset-inline-end: 37.1px; overflow: hidden; }
.sl { padding: 16px 0 16px 24px; transform: translateY(calc(-1 * var(--sy, 0px))); transition: transform 180ms var(--ease); }
.lr { padding: 4px 0; cursor: pointer; }
.lr-ring { block-size: 89px; border: 4px solid transparent; border-radius: 24px; transition: border-color 110ms var(--ease), background 110ms var(--ease); }
.lr.focus .lr-ring { border-color: #BA9EFF; background: rgba(137, 90, 246, 0.2); }
.lr-body { display: flex; align-items: center; block-size: 81px; padding: 0 10px; border-radius: 24px; border-inline-start: 6px solid transparent; }
.lr.on .lr-body { background: rgba(41, 34, 60, 0.5); border-inline-start-color: #895AF6; }
.lr-num { flex: 0 0 auto; inline-size: 75.6px; font-weight: 700; font-size: 28.05px; line-height: 1.4; color: #B0A7C0; font-variant-numeric: tabular-nums; }
.lr-star { display: grid; place-items: center; flex: 0 0 auto; inline-size: 39.6px; margin-inline-start: 15px; color: rgba(255, 255, 255, 0.22); }
.lr-star.on { color: #FACC15; }
.lr-logo { display: grid; place-items: center; flex: 0 0 auto; inline-size: 80px; block-size: 80px; margin-inline-start: 15px; padding: 6px; border-radius: 16px; background: #0A0614; border: 2px solid rgba(75, 69, 89, 0.2); }
.lr.on .lr-logo { border-color: rgba(137, 90, 246, 0.2); }
.lr-logo .lgm { font-size: 23px; border-radius: 12px; }
.lr-logo .lgm.l3 { font-size: 18px; }
.lr-ini { font-weight: 700; font-size: 24px; color: #D0BCFF; }
.lr-name { position: relative; display: flex; align-items: center; flex: 1; min-inline-size: 0; margin-inline-start: 20px; }
.lr-nm { min-inline-size: 0; font-weight: 700; font-size: 28.05px; line-height: 1.4; color: #B0A7C0; }
.lr.on .lr-num, .lr.on .lr-nm { font-weight: 800; color: #E8DFF5; }
.now-b { flex: 0 0 auto; margin-inline-start: 12px; padding: 2px 8px; border-radius: 6px; background: #895AF6; color: #fff; font-weight: 900; font-size: 13.2px; line-height: 1.4; }
.ghint { position: absolute; inset-inline-end: 0; inset-block-start: 50%; display: flex; align-items: center; gap: 2px; padding: 6.2px 6.2px 6.2px 14px; transform: translateY(-50%); border-radius: 16px; background: rgba(137, 90, 246, 0.18); border: 2px solid rgba(137, 90, 246, 0.47); color: #BA9EFF; font-weight: 800; font-size: 18.15px; line-height: 1.4; letter-spacing: 0.6px; backdrop-filter: blur(2px); animation: g-blink 650ms ease-in-out infinite alternate; }
@keyframes g-blink { from { opacity: 0.35; } to { opacity: 1; } }
.lr-div { flex: 0 0 auto; inline-size: 2px; block-size: 40.5px; margin: 0 20px; background: rgba(255, 255, 255, 0.094); }
.lr-now { flex: 0 0 auto; inline-size: 300px; }
.lr-now-t, .lr-bar, .lr-ni { display: block; }
.lr-now-t { font-weight: 600; font-size: 21.45px; line-height: 1.4; color: #B0A7C0; }
.lr.on .lr-now-t { color: #E8DFF5; }
.lr.focus .lr-now-t { color: #fff; }
.lr-bar { margin-block-start: 8.1px; block-size: 4.05px; border-radius: 999px; background: rgba(255, 255, 255, 0.118); overflow: hidden; }
.lr-bar i { display: block; block-size: 100%; inline-size: var(--p, 0%); background: #895AF6; }
.lr.on .lr-bar i, .lr.focus .lr-bar i { background: #BA9EFF; }
.lr-ni { font-style: italic; font-weight: 500; font-size: 21.45px; line-height: 1.4; color: rgba(176, 167, 192, 0.51); }
.lr.focus .lr-ni { color: rgba(176, 167, 192, 0.784); }
.lane { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 35.1px; }
.lane::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -2px; inline-size: 2px; background: rgba(255, 255, 255, 0.157); }
.ltrack { position: absolute; inset-inline: 0; inset-block: 39.2px; border-radius: 6px; background: rgba(255, 255, 255, 0.047); }
.lthumb { position: absolute; inset-inline-start: 50%; inset-block-start: var(--ty, 0px); inline-size: 12.15px; block-size: var(--th, 43.2px); margin-inline-start: -6.075px; border-radius: 6px; background: rgba(137, 90, 246, 0.824); transition: inset-block-start 180ms var(--ease); }
.chev { position: absolute; inset-inline: 0; display: grid; place-items: center; block-size: 35.1px; color: #fff; opacity: 0.22; }
.chev.on { color: #BA9EFF; opacity: 1; }
.chev svg { inline-size: 14.85px; block-size: 7.4px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.chev.up { inset-block-start: 0; } .chev.dn { inset-block-end: 0; }
.sglow { position: absolute; inset-inline-start: 24px; inset-inline-end: 37.1px; z-index: 2; block-size: 4px; display: none; background: linear-gradient(90deg, rgba(186, 158, 255, 0), rgba(186, 158, 255, 0.92), rgba(186, 158, 255, 0)); box-shadow: 0 0 13.5px rgba(137, 90, 246, 0.59); }
.sglow.t { inset-block-start: 0; } .sglow.b { inset-block-end: 0; }
.sglow.on { display: block; }

/* Movies + Series (vod_screen.dart / series_screen.dart) */
.vcol { position: absolute; inset-block: 0; inset-inline-start: 602.1px; inset-inline-end: 0; overflow: hidden; }
.vod.imm .cpane { display: none; }
.vod.imm .vcol { inset-inline-start: 0; }
.hart { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1920px; block-size: 594px; background: #0A0614; }
.hart img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 360ms ease; }
.hart img.on { opacity: 1; }
.scr { position: absolute; inset: 0; }
.scr-t { background: linear-gradient(180deg, rgba(10, 6, 20, 0.94) 0, rgba(10, 6, 20, 0.55) 14%, rgba(10, 6, 20, 0) 32%); }
.scr-l { background: linear-gradient(90deg, rgba(10, 6, 20, 0.96) 0, rgba(10, 6, 20, 0.85) 38%, rgba(10, 6, 20, 0.31) 64%, rgba(10, 6, 20, 0) 82%); }
.scr-b { background: linear-gradient(0deg, #0A0614 0, rgba(10, 6, 20, 0.65) 12%, rgba(10, 6, 20, 0) 32%); }
.vhead { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2; display: flex; align-items: center; padding: 31px 49.6px; }
.vh-t { flex: 0 0 auto; font-weight: 900; font-size: 46.2px; line-height: 1.4; color: #E8DFF5; }
.res { display: grid; place-items: center; flex: 0 0 auto; inline-size: 214px; block-size: 41.7px; margin-inline-start: 32px; border-radius: 999px; background: rgba(137, 90, 246, 0.15); color: #BA9EFF; font-weight: 800; font-size: 16.5px; letter-spacing: 3px; }
.vsearch { display: flex; gap: 13.5px; flex: 1; min-inline-size: 0; margin-inline-start: 64px; }
.vfld { display: flex; align-items: center; gap: 20px; flex: 1; min-inline-size: 0; block-size: 54px; padding: 0 32px; border-radius: 24px; background: rgba(41, 34, 60, 0.4); border: 4px solid transparent; color: #4B4559; font-size: 21.45px; cursor: pointer; }
.vmic { display: grid; place-items: center; flex: 0 0 auto; inline-size: 54px; block-size: 54px; border-radius: 24px; background: rgba(41, 34, 60, 0.4); border: 4px solid transparent; color: #4B4559; cursor: pointer; }
.vfld.focus, .vmic.focus { border-color: #BA9EFF; }
.vmic.focus { background: linear-gradient(rgba(137, 90, 246, 0.235), rgba(137, 90, 246, 0.235)), rgba(41, 34, 60, 0.4); color: #BA9EFF; }
.vflt { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; block-size: 54px; margin-inline-start: 32px; padding: 0 36px; border-radius: 999px; background: rgba(41, 34, 60, 0.6); border: 4px solid rgba(137, 90, 246, 0.45); color: #EDE5FF; font-weight: 800; font-size: 21.45px; cursor: pointer; }
.vflt .ic { color: #BA9EFF; }
.vflt.focus { border-color: #BA9EFF; }
.vchip { padding: 4px 16px; border-radius: 999px; background: #895AF6; color: #fff; font-weight: 900; font-size: 16.5px; line-height: 1.4; }
.htext { position: absolute; inset-block-start: 139.2px; inset-inline-start: 54px; z-index: 1; inline-size: 945.1px; }
.h-rate { block-size: 37.8px; display: flex; }
.rpill { display: inline-flex; align-items: center; gap: 10.8px; block-size: 37.8px; padding: 0 16.2px; border-radius: 999px; background: rgba(0, 0, 0, 0.51); border: 2px solid rgba(250, 204, 21, 0.47); }
.stars { display: flex; color: #FACC15; }
.rv { color: #fff; font-weight: 900; font-size: 21.45px; line-height: 1; }
.rv small { color: rgba(255, 255, 255, 0.59); font-weight: 700; font-size: 16.5px; }
.h-title { margin-block-start: 16.2px; font-weight: 900; font-size: 49.5px; line-height: 1.1; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h-title .yr { font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.h-meta { margin-block-start: 10.8px; font-weight: 800; font-size: 21.45px; line-height: 1.25; color: #BA9EFF; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-plot { margin-block-start: 10.8px; block-size: 92.7px; font-size: 20.6px; line-height: 1.5; color: rgba(233, 226, 248, 0.725); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h-ok { display: flex; align-items: center; gap: 10.8px; margin-block-start: 13.5px; }
.okc { display: grid; place-items: center; inline-size: 35.1px; block-size: 35.1px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 900; font-size: 13.2px; letter-spacing: 0; }
.h-ok span { font-weight: 600; font-size: 18.15px; color: rgba(255, 255, 255, 0.55); }
.gview { position: absolute; inset-block: 586.68px 0; inset-inline-start: 0; inline-size: 1768px; overflow: hidden; }
.grid { display: grid; grid-template-columns: repeat(6, 253.27px); gap: 32.4px; padding: 8.1px 43.2px 43.2px; transform: translateY(calc(-1 * var(--gy, 0px))); transition: transform 180ms var(--ease); }
.gc { block-size: 395.73px; }
.gc .art { block-size: 330.4px; }
.gc-cap { flex: 1; padding: 10.8px 16.2px 13.5px; font-weight: 800; font-size: 26.4px; line-height: 1.25; letter-spacing: 0.5px; color: #E8DFF5; }
.tc.focus .gc-cap { color: #fff; }

/* Toast (tv_toast.dart) */
.toast {
  position: absolute; inset-block-end: 72px; inset-inline-start: 50%; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: 13.5px 34px 13.5px 13.5px; border-radius: 32px; background: #2D2737; border: 2.4px solid rgba(137, 90, 246, 0.275);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); color: #E8DFF5; font-weight: 600; font-size: 23.1px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 24px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast i { display: grid; place-items: center; inline-size: 40.5px; block-size: 40.5px; border-radius: 50%; background: rgba(137, 90, 246, 0.25); color: #BA9EFF; }