:root{--brand-accent:#B9B6FF;--brand-accent-bright:#D9D7FF;--brand-accent-shade:#25244A;--brand-accent-ink:#0B0C0E;--brand-signal:#FFFFFF;--brand-signal-shade:#2A2C30;--brand-signal-ink:#0B0C0E;--brand-ground:#050608;--brand-panel:#2A2C30;--brand-ink:#FFFFFF;--brand-tile-color:#0B0C10;--brand-wordmark-weight:500;--brand-wordmark-tracking:0;--brand-wordmark-case:none;--brand-radius:12px;--brand-font-ui:"Inter","LG Smart UI","Museo Sans",Roboto,"Noto Sans","Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;--brand-font-mono:"LG Smart UI Mono","Roboto Mono","DejaVu Sans Mono",Menlo,monospace;--c-bg-0:var(--brand-ground);--c-bg-1:#0B0C10;--c-glow:#0E1A2A;--c-surface-1:#16181C;--c-surface-2:#1E1F23;--c-surface-3:#2A2C30;--c-surface-4:#34363A;--c-surface-sunken:#050608;--c-sheet:var(--brand-panel);--c-line-1:#26282C;--c-line-2:#3A3C41;--c-line-3:#8A8D92;--c-osd:var(--c-bg-0);--c-veil:rgba(5,6,8,0.80);--c-dock:var(--c-surface-2);--c-text-1:#FFFFFF;--c-text-2:#B4B6BA;--c-text-3:#9C9FA4;--c-text-disabled:#6B6E74;--c-text-on-accent:var(--brand-accent-ink);--c-text-on-signal:var(--brand-signal-ink);--c-accent:var(--brand-accent);--c-accent-bright:var(--brand-accent-bright);--c-accent-soft:var(--brand-accent-shade);--c-link:var(--brand-accent);--c-time:var(--brand-signal);--c-time-soft:var(--brand-signal-shade);--c-live:#E5484D;--c-live-ink:#0B0C0E;--c-now:var(--c-live);--c-error:#FF7B7F;--c-error-soft:#3A1A1C;--c-warning:#E3B45F;--c-warning-soft:#36291A;--c-ok:#8BE39A;--c-ok-soft:#16301F;--c-stale:var(--c-text-3);--c-switch-on:#1B33C9;--c-switch-off:#4A4D52;--c-switch-knob:#FFFFFF;--c-switch-knob-off:#B4B6BA;--c-progress-track:#2A2C30;--c-progress-track-sheet:#4A4D52;--c-load:#5B8FD6;--c-toast:#D9DADD;--c-toast-ink:#0B0C0E;--c-key-red:#F08A7E;--c-key-green:#8ED27A;--c-key-yellow:#E3B45F;--c-key-blue:#7FB4E8;--c-ph-1:#3A4550;--c-ph-2:#4A4038;--c-ph-3:#384A44;--c-ph-4:#453A4E;--c-ph-5:#4E4238;--c-ph-6:#33454E;--c-ph-ink:#E6EAEE;--g-app:radial-gradient(ellipse 62% 58% at 50% 42%, var(--c-glow) 0%, var(--c-bg-1) 100%);--g-tile-live:linear-gradient(135deg, #6CC0F6 0%, #3678F0 100%);--g-tile-movies:linear-gradient(135deg, #EA727E 0%, #DE3C4E 100%);--g-tile-series:linear-gradient(135deg, #C066EA 0%, #7830D8 100%);--g-tile-radio:linear-gradient(135deg, #F0B460 0%, #EA7842 100%);--g-tile-favourites:linear-gradient(135deg, #F6D272 0%, #EAA83C 100%);--g-hero-corner:radial-gradient(ellipse 62% 60% at 100% 0%, rgba(11,12,16,0.95) 0%, rgba(11,12,16,0.92) 58%, rgba(11,12,16,0) 100%);--g-hero-side:linear-gradient(to right, rgba(11,12,16,0.94) 0%, rgba(11,12,16,0.88) 46%, rgba(11,12,16,0.45) 72%, rgba(11,12,16,0.35) 100%);--g-hero-foot:linear-gradient(to bottom, rgba(11,12,16,0) 0%, rgba(11,12,16,0) 44%, rgba(11,12,16,0.90) 62%, rgba(11,12,16,0.97) 100%);--g-hero-rails:linear-gradient(to bottom, rgba(11,12,16,0.92) 0%, rgba(11,12,16,0.97) 100%);--g-osd-band:linear-gradient(to bottom, rgba(5,6,8,0) 0%, rgba(5,6,8,0.96) 24%, rgba(5,6,8,0.96) 100%);--sp-1:6px;--sp-2:12px;--sp-3:18px;--sp-4:24px;--sp-5:36px;--sp-6:48px;--sp-7:60px;--sp-8:75px;--sp-9:96px;--sp-10:120px;--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;--layout-w:1920px;--layout-h:1080px;--layout-safe:var(--sp-8);--layout-safe-w:1770px;--layout-safe-h:930px;--layout-col-cat:430px;--layout-col-chan:440px;--layout-col-pane:864px;--layout-keyguide-w:375px;--layout-keyguide-h:120px;--layout-keyguide-row:60px;--layout-dialog-w:960px;--layout-epg-gutter:402px;--layout-epg-slot:270px;--layout-panel-w:680px;--layout-rail-w:120px;--size-target-min:75px;--size-target:84px;--size-row:78px;--size-row-2line:120px;--size-row-info:63px;--size-row-epg:96px;--size-epg-pitch:108px;--size-letter-w:108px;--size-logo-sm:56px;--size-logo-md:90px;--size-logo-md-h:50px;--size-logo-lg:84px;--size-qr:420px;--size-bar:6px;--size-bar-thin:4px;--size-hairline:2px;--size-keychip-w:30px;--size-keychip-h:6px;--size-icon:32px;--size-icon-rail:36px;--size-icon-mark:40px;--size-icon-tile:72px;--size-icon-mark-lg:96px;--size-icon-stroke:2.25px;--size-icon-stroke-bold:5px;--size-step-disk:96px;--size-pill:56px;--size-pill-dot:18px;--size-switch-w:64px;--size-switch-h:32px;--size-switch-knob:24px;--size-keyhint:64px;--font-ui:var(--brand-font-ui);--font-mono:var(--brand-font-mono);--fs-min:21px;--fs-label:22px;--fs-caption:24px;--fs-body:26px;--fs-row:30px;--fs-button:var(--fs-row);--fs-title-s:var(--fs-section);--fs-section:40px;--fs-title-m:var(--fs-section);--fs-hero:56px;--fs-title-l:var(--fs-hero);--fs-screen-title:64px;--fs-display:var(--fs-screen-title);--fs-code:72px;--fs-reader:36px;--fs-sub-small:24px;--fs-sub-medium:30px;--fs-sub-large:36px;--fs-sub-xlarge:42px;--lh-tight:1.12;--lh-title:1.20;--lh-body:1.40;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--ls-caption:0.10em;--ls-code:0.14em;--ls-normal:0;--radius-1:12px;--radius-2:12px;--radius-tile:22px;--radius-sheet:24px;--radius-pill:999px;--shadow-1:0 18px 18px rgba(0,0,0,0.45);--focus-surface:#FFFFFF;--focus-ink:#0B0C0E;--focus-ink-2:#45474C;--focus-track:#C9CBCF;--focus-ring-w:4px;--focus-ring:#FFFFFF;--hover-ring-w:3px;--hover-ring:var(--c-line-3);--hover-surface:var(--c-surface-3);--selected-surface:var(--c-surface-4);--dur-instant:0ms;--dur-fast:90ms;--dur-slow:160ms;--ease:linear;--z-video:0;--z-content:10;--z-rail:20;--z-osd:100;--z-overlay:200;--z-dialog:300;--z-keyguide:400;--z-toast:500;--z-strip:600;--z-cursor:700;}
html {
  background-color: var(--c-bg-1);
  color: var(--c-text-1);
  font-family: var(--font-ui);
  font-size: 100%;
  line-height: 1.5;
}

body {
  margin: 0;
  background-color: var(--c-bg-1);
  color: var(--c-text-1);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-1);
  background-color: var(--c-accent);
  color: var(--c-text-on-accent);
}

.skip:focus {
  top: 1rem;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 2px solid var(--c-line-2);
  background-color: var(--c-surface-1);
  color: var(--c-text-1);
}

.brand {
  margin: 0;
  font-weight: 700;
  background-color: var(--c-surface-1);
  color: var(--c-text-1);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-1);
  background-color: var(--c-surface-1);
  color: var(--c-text-1);
}

.nav a[aria-current="page"] {
  background-color: var(--c-surface-3);
  color: var(--c-text-1);
  text-decoration: none;
}

main {
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

h3 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

p {
  margin: 0 0 0.75rem;
}

.card {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-2);
  background-color: var(--c-surface-2);
  color: var(--c-text-1);
}

.muted {
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
}

.items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  padding: 0.75rem 0;
  border-top: 2px solid var(--c-line-2);
}

.field {
  margin: 0 0 0.75rem;
}

label {
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 500;
}

.hint {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--c-line-3);
  border-radius: var(--radius-1);
  font: inherit;
  background-color: var(--c-surface-sunken);
  color: var(--c-text-1);
}

input[aria-invalid="true"] {
  border-color: var(--c-error);
  background-color: var(--c-surface-sunken);
  color: var(--c-text-1);
}

.field-error {
  margin: 0.25rem 0 0;
  background-color: var(--c-surface-2);
  color: var(--c-error);
}

.modes {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem 0.75rem;
  border: 2px solid var(--c-line-2);
  border-radius: var(--radius-1);
}

legend {
  padding: 0 0.25rem;
  font-weight: 500;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.375rem 0 0;
}

.choice label {
  margin: 0;
  font-weight: 400;
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--c-accent);
}

.reading {
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
}

button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--c-line-3);
  border-radius: var(--radius-1);
  font: inherit;
  cursor: pointer;
  background-color: var(--c-surface-3);
  color: var(--c-text-1);
}

button.primary {
  border-color: var(--c-accent);
  background-color: var(--c-accent);
  color: var(--c-text-on-accent);
}

button.danger {
  border-color: var(--c-error);
  background-color: var(--c-error-soft);
  color: var(--c-error);
}

button:disabled {
  border-color: var(--c-line-2);
  cursor: default;
  background-color: var(--c-surface-2);
  color: var(--c-text-disabled);
}

.nav button {
  background-color: var(--c-surface-3);
  color: var(--c-text-1);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.notices p {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-1);
}

.notice-ok {
  background-color: var(--c-ok-soft);
  color: var(--c-ok);
}

.notice-info {
  background-color: var(--c-surface-3);
  color: var(--c-text-1);
}

.notice-error {
  background-color: var(--c-error-soft);
  color: var(--c-error);
}

.confirm {
  font-weight: 500;
  background-color: var(--c-surface-2);
  color: var(--c-text-1);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}