/* MYIPTVMAX — shared TV web app. Brand tokens lifted from 8kiptv-design-system templates
   (launcher / vod-suite / livetv-suite). Designed for 1920x1080 10-foot UIs; scales by root
   font-size. Dependency-free, vanilla ESM. */

:root {
  /* Surfaces — ink-navy scale (matches design-system canvas) */
  --canvas: #06090F;
  --surface-0: #0A0E18;
  --surface-1: #121829;
  --surface-2: #182032;
  --raised: #212B41;
  --hairline: rgba(255, 255, 255, .08);
  --hairline-strong: rgba(255, 255, 255, .14);
  /* Accent / brand */
  --accent: #FF2E63;
  --accent-hot: #FF2E63;
  --accent-hover: #FF5C86;
  --accent-deep: #D81B54;
  --brand-blue: #29A8FF;
  --brand-purple: #8C6BFF;
  --brand-pink: #FF5C86;
  --gold: #F6B100;
  --success: #28D17C;
  /* Foreground */
  --fg: #FFFFFF;
  --fg-muted: #C4CAD6;
  --fg-faint: #8890A2;
  --fg-dim: #5A6172;
  /* Tile gradients (launcher: live=teal, movies=amber, series=violet) */
  --lt-live: linear-gradient(150deg, #12B5A6 0%, #0B6E7A 100%);
  --lt-movies: linear-gradient(150deg, #FF8A3C 0%, #E0521C 100%);
  --lt-series: linear-gradient(150deg, #8C6BFF 0%, #5B3FD6 100%);
  /* Gradients */
  --grad-cta: linear-gradient(95deg, #FF5C2E 0%, #FF2E63 55%, #FF2E9C 100%);
  --grad-brand: linear-gradient(135deg, #29A8FF 0%, #8C6BFF 52%, #FF5C86 100%);
  /* Layout */
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 12px;
  --rail-gap: 18px;
  /* Elevation */
  --shadow-card: 0 8px 28px rgba(0, 0, 0, .38);
  --shadow-float: 0 18px 56px rgba(0, 0, 0, .55);
  --focus-ring: 0 0 0 3px var(--accent), 0 16px 44px rgba(255, 46, 99, .42);
  /* Per-theme skin (overridden at runtime by applyTheme). */
  --card-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --font-display: "Segoe UI", Roboto, system-ui, "Noto Sans", sans-serif;
}

/* Skin consumers: card treatment (flat/ring/glow) + per-theme display font. */
.hero-tile, .action-tile, .card .art { box-shadow: var(--card-shadow); }
.header h1, .app-header h1, .hero-tile .ht-title, .card .art .mono { font-family: var(--font-display); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--canvas);
  color: var(--fg);
  font-family: "Segoe UI", Roboto, system-ui, "Noto Sans", sans-serif;
  overflow: hidden;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
}
#app {
  position: absolute; inset: 0;
  background:
    radial-gradient(1400px 900px at 78% -8%, rgba(140, 107, 255, .18) 0%, transparent 60%),
    radial-gradient(1200px 800px at 12% 4%, rgba(41, 168, 255, .12) 0%, transparent 58%),
    var(--canvas);
}

/* Focus ring — the single most important 10-foot affordance. */
.focusable { outline: none; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.focusable.focused {
  transform: scale(1.04);
  box-shadow: var(--focus-ring);
  z-index: 5;
}

/* ───────────────────────── App shell ───────────────────────── */
.layout { display: flex; height: 100%; }
.sidebar {
  width: 232px; flex: 0 0 232px; height: 100%;
  background: linear-gradient(180deg, rgba(18, 24, 41, .96), rgba(10, 14, 24, .96));
  border-right: 1px solid var(--hairline);
  padding: 30px 16px; display: flex; flex-direction: column; gap: 6px;
  backdrop-filter: blur(6px);
}
.sidebar .wordmark { height: 36px; margin: 0 8px 22px; display: flex; align-items: center; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  color: var(--fg-muted); font-weight: 600; font-size: 15px;
  background: transparent; cursor: pointer;
}
.nav-item .nav-ic { width: 20px; text-align: center; opacity: .9; font-size: 17px; }
.nav-item.active { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; left: 4px; width: 4px; height: 22px;
  border-radius: 4px; background: var(--grad-brand);
}
.nav-item { position: relative; }
.nav-item.focused { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-spacer { flex: 1; }
.version { color: var(--fg-dim); font-size: 12px; margin: 10px 8px 0; }

.content { flex: 1; height: 100%; overflow-y: auto; padding: 30px 44px 48px; }
.content::-webkit-scrollbar { width: 0; }

/* ───────────────────────── Content header ───────────────────────── */
.app-header { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.greet-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px; border-radius: 50px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline);
}
.greet-pill .gp-ic {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--grad-brand);
}
.greet-pill .gp-hi { font-size: 13px; color: var(--fg-faint); line-height: 1.1; }
.greet-pill .gp-name { font-size: 17px; font-weight: 800; color: #fff; }
.app-header .hdr-date { color: var(--fg-faint); font-size: 14px; }
.app-header .hdr-icons { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline);
  color: var(--fg-muted); cursor: pointer;
}
.app-header .clock { font-variant-numeric: tabular-nums; color: #fff; font-size: 20px; font-weight: 700; }

/* Legacy simple header (still used by some screens) */
.header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.header .spine { width: 5px; height: 46px; border-radius: 50px; background: var(--grad-brand); }
.header h1 { font-size: 28px; font-weight: 800; }
.header .sub { color: var(--fg-muted); font-size: 14px; }
.header .clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 18px; }

/* ───────────────────────── Hero tiles (launcher Tiles layout) ───────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.hero-tile {
  height: 168px; border-radius: var(--radius-lg); padding: 22px; position: relative;
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-card);
}
.hero-tile::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 88% 12%, rgba(255, 255, 255, .22), transparent 60%);
  pointer-events: none;
}
.hero-tile.live { background: var(--lt-live); }
.hero-tile.movies { background: var(--lt-movies); }
.hero-tile.series { background: var(--lt-series); }
.hero-tile .ht-ic {
  width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.hero-tile .ht-count { position: absolute; left: 22px; bottom: 56px; font-size: 34px; font-weight: 900; letter-spacing: -.5px; }
.hero-tile .ht-label { position: absolute; left: 22px; bottom: 32px; font-weight: 800; letter-spacing: 1.5px; font-size: 15px; }
.hero-tile .ht-sub { position: absolute; left: 22px; bottom: 14px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.hero-tile .ht-refresh {
  position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; font-size: 16px;
}

/* Action row */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 32px; }
.action-tile {
  height: 70px; border-radius: var(--radius); padding: 0 22px; display: flex; align-items: center; gap: 16px;
  background: var(--surface-1); border: 1px solid var(--hairline); cursor: pointer; position: relative; overflow: hidden;
}
.action-tile .at-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.action-tile .at-ic.blue { background: rgba(41, 168, 255, .22); color: var(--brand-blue); }
.action-tile .at-ic.purple { background: rgba(140, 107, 255, .22); color: var(--brand-purple); }
.action-tile .at-ic.pink { background: rgba(255, 92, 134, .22); color: var(--brand-pink); }
.action-tile .at-label { font-weight: 800; letter-spacing: 1px; font-size: 14px; }

/* ───────────────────────── Rails & cards ───────────────────────── */
.rail { margin-bottom: 30px; }
.rail h2 { font-size: 21px; font-weight: 800; margin-bottom: 14px; letter-spacing: -.2px; }
.rail .row { display: flex; gap: var(--rail-gap); overflow-x: auto; padding: 4px 2px 8px; }
.rail .row::-webkit-scrollbar { height: 0; }

.card { flex: 0 0 auto; border-radius: var(--radius); }
.card .art {
  border-radius: var(--radius); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
}
.card.wide .art { width: 248px; height: 140px; }
.card.poster .art { width: 168px; height: 252px; }
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card.wide .art img { object-fit: contain; padding: 16px; }
.card .art .mono { font-size: 30px; font-weight: 900; color: #fff; }
.card .art .watermark { position: absolute; font-size: 76px; opacity: .14; }
.card .title { margin-top: 10px; font-size: 14px; font-weight: 600; max-width: 248px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .subtitle { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

/* Rating badge + resume progress on poster cards */
.card .art .rating {
  position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, .62); font-size: 12px; font-weight: 800; color: var(--gold);
  display: flex; align-items: center; gap: 3px;
}
.card .art .resume { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .5); }
.card .art .resume > i { display: block; height: 100%; background: var(--accent); }

/* ───────────────────────── Shared UI components (core/ui.js) ───────────────────────── */
/* Chips */
.ds-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 50px; font-weight: 700; font-size: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--hairline); color: var(--fg-muted);
  cursor: pointer; white-space: nowrap;
}
.ds-chip.on { background: var(--grad-brand); border-color: transparent; color: #fff; }

/* Pill buttons */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 800; font-size: 15px;
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--hairline); cursor: pointer;
}
.pill-btn.primary { background: var(--grad-cta); border-color: transparent; }

/* Channel rows (live / favorites) */
.channel-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface-1); border: 1px solid var(--hairline); cursor: pointer;
}
.channel-row .cr-num { width: 44px; font-weight: 800; color: var(--fg-faint); text-align: center; font-variant-numeric: tabular-nums; }
.channel-row .cr-logo { width: 56px; height: 40px; border-radius: 8px; object-fit: contain; background: rgba(255,255,255,.05); flex: 0 0 56px; }
.channel-row .cr-name { font-weight: 700; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-row .cr-meta { color: var(--fg-faint); font-size: 13px; }

/* Progress bar */
.progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; background: rgba(255, 255, 255, .12); color: #fff;
}
.badge.live { background: var(--accent); }
.badge.hd { background: rgba(41, 168, 255, .22); color: var(--brand-blue); }

/* Empty / error / buffering state */
.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px;
}
.empty-state .es-ic { font-size: 56px; opacity: .85; }
.empty-state .es-title { font-size: 24px; font-weight: 800; }
.empty-state .es-body { color: var(--fg-muted); font-size: 15px; max-width: 460px; }

/* Overlay panel (player track selector, sheets) */
.overlay-panel {
  position: absolute; border-radius: var(--radius); padding: 18px;
  background: rgba(14, 19, 32, .92); border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-float); backdrop-filter: blur(14px);
}

/* ───────────────────────── EPG grid (livetv-suite) ───────────────────────── */
.epg { display: flex; flex-direction: column; gap: 8px; }
.epg-row { display: grid; grid-template-columns: 200px repeat(4, 1fr); gap: 8px; }
.epg-chan {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.epg-chan img { width: 40px; height: 30px; object-fit: contain; }
.epg-chan .ec-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epg-cell {
  padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-1);
  border: 1px solid var(--hairline); cursor: pointer; min-height: 50px;
}
.epg-cell.now { background: rgba(255, 46, 99, .14); border-color: rgba(255, 46, 99, .4); }
.epg-cell .ev-time { font-size: 11px; color: var(--fg-faint); }
.epg-cell .ev-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────────── Centered column (onboarding / login) ───────────────────────── */
.center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.panel { width: 480px; max-width: 90vw; display: flex; flex-direction: column; gap: 16px; }
.cta {
  background: var(--grad-cta); color: #fff; font-weight: 800; font-size: 16px;
  border: none; border-radius: 14px; height: 56px; width: 100%;
}
.choice {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px;
  background: var(--surface-1); border: 1px solid var(--hairline);
}
.choice.primary { background: var(--grad-cta); border: none; }
.choice .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.choice .t { font-weight: 800; font-size: 17px; }
.choice .s { font-size: 13px; color: var(--fg-muted); }
input.field {
  width: 100%; height: 56px; border-radius: 14px; background: var(--surface-1);
  border: 1px solid var(--hairline); color: #fff; font-size: 16px; padding: 0 18px;
}
input.field.focused { border-color: var(--accent); }

/* Footer (launcher) */
.home-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hairline);
  color: var(--fg-faint); font-size: 13px;
}
.home-footer b { color: var(--fg-muted); font-weight: 700; }

.loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 9, 15, .6); }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--hairline-strong); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }