/* ElBeeHQ — follows the ElBee Player design system: the amber palette from the app icon (honey, amber, ember),
   "Liquid Glass" translucent surfaces, native system type, and Light or Dark from the visitor's choice or their
   system setting (html[data-theme], set by glow.js before the first frame). */

:root {
  /* Brand (from the app icon) */
  --honey: #FFD27A;
  --amber: #FFB020;
  --ember: #FF8A1F;
  --live: #FF3B30;
  --heart: #FF3B30;
  --brand-gradient: linear-gradient(135deg, var(--honey), var(--amber) 50%, var(--ember));
  --on-amber: #1F1300;

  /* Light appearance (the app's BrandTokens) */
  --bg: #F5F2EC;
  --text: #1D1D1F;
  --text2: #45454D;
  --text3: #5A5A63;
  --accent-text: #8F5400;
  --panel: rgba(255, 255, 255, 0.62);
  --panel2: rgba(255, 255, 255, 0.78);
  --line: rgba(0, 0, 0, 0.1);
  --hover: rgba(0, 0, 0, 0.05);
  --chip: rgba(0, 0, 0, 0.075);
  --field: rgba(0, 0, 0, 0.06);
  --track: rgba(0, 0, 0, 0.13);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(60, 40, 0, 0.1);
  --window-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 40px 90px rgba(60, 40, 0, 0.22);
  --glass-fill: rgba(255, 255, 255, 0.5);
  --glass-rim: rgba(255, 255, 255, 0.85);
  --glass-sheen: rgba(255, 255, 255, 0.7);
  --menu: rgba(250, 248, 244, 0.92);
  /* The app's columns in Light Mode: one solid pale tone, with the system glass on the sidebar */
  --app-column: #F6F6F6;
  --app-sidebar: rgba(236, 234, 230, 0.86);
  /* Light Mode's glow: deeper, more saturated light that multiplies into the pale page, the way the app's Ambient
     Glow tints a light window, rather than pale light that vanishes into it */
  --glow-a: rgba(255, 158, 20, 0.62);
  --glow-b: rgba(255, 112, 24, 0.42);
  --glow-c: rgba(255, 196, 80, 0.55);
  --glow-blend: multiply;
  --glow-opacity: 1;

  --radius: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* Dark appearance: the visitor chose it, or their system is dark and they haven't chosen Light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E10; --text: #F5F5F7; --text2: rgba(235, 235, 245, 0.76); --text3: rgba(235, 235, 245, 0.64);
    --accent-text: #FFC85C; --panel: rgba(30, 30, 32, 0.58); --panel2: rgba(22, 22, 24, 0.7);
    --line: rgba(255, 255, 255, 0.1); --hover: rgba(255, 255, 255, 0.07); --chip: rgba(255, 255, 255, 0.07);
    --field: rgba(255, 255, 255, 0.09); --track: rgba(255, 255, 255, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.35);
    --window-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.6);
    --glass-fill: rgba(255, 255, 255, 0.07); --glass-rim: rgba(255, 255, 255, 0.18); --glass-sheen: rgba(255, 255, 255, 0.12);
    --menu: rgba(30, 30, 33, 0.94); --app-column: #161618; --app-sidebar: rgba(28, 28, 31, 0.78);
    --glow-a: rgba(255, 176, 32, 0.36); --glow-b: rgba(255, 138, 31, 0.24); --glow-c: rgba(255, 176, 32, 0.3);
    --glow-blend: normal; --live: #FF453A; --heart: #FF453A;
    --app-glass: rgba(40, 40, 44, 0.5); --app-glass-line: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E10; --text: #F5F5F7; --text2: rgba(235, 235, 245, 0.76); --text3: rgba(235, 235, 245, 0.64);
  --accent-text: #FFC85C; --panel: rgba(30, 30, 32, 0.58); --panel2: rgba(22, 22, 24, 0.7);
  --line: rgba(255, 255, 255, 0.1); --hover: rgba(255, 255, 255, 0.07); --chip: rgba(255, 255, 255, 0.07);
  --field: rgba(255, 255, 255, 0.09); --track: rgba(255, 255, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.35);
  --window-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.6);
  --glass-fill: rgba(255, 255, 255, 0.07); --glass-rim: rgba(255, 255, 255, 0.18); --glass-sheen: rgba(255, 255, 255, 0.12);
  --menu: rgba(30, 30, 33, 0.94); --app-column: #161618; --app-sidebar: rgba(28, 28, 31, 0.78);
  --glow-a: rgba(255, 176, 32, 0.36); --glow-b: rgba(255, 138, 31, 0.24); --glow-c: rgba(255, 176, 32, 0.3);
  --glow-blend: normal; --live: #FF453A; --heart: #FF453A;
  --app-glass: rgba(40, 40, 44, 0.5); --app-glass-line: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------------------------------------------
   The background glow: three soft lights on a layer larger than the window that drifts very slowly. glow.js moves
   them to a new arrangement at each link click; everything moves by transform only, so it stays smooth.
   --------------------------------------------------------------------------------------------------------------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
:root { --g1x: 20; --g1y: 5; --g2x: 90; --g2y: 30; --g3x: 35; --g3y: 100; }   /* percent of the layer */
.ambient-drift {
  position: absolute;
  inset: -15%;
  animation: drift 48s ease-in-out var(--drift-delay, 0s) infinite alternate;
  will-change: transform;
}
.light {
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(closest-side, var(--light), transparent 64%);
  mix-blend-mode: var(--glow-blend);
  will-change: translate, scale;
  transition: translate 1.6s ease-in-out, scale 0.6s ease-out, opacity 0.6s ease-out;
}
/* The layer is 130% of the window, so a point x% across it is x × 1.3vw from its left edge. */
.light-1 { width: 110vmax; height: 80vmax; --light: var(--glow-a); opacity: 0.9;
  translate: calc(var(--g1x) * 1.3vw - 50%) calc(var(--g1y) * 1.3vh - 50%); }
.light-2 { width: 90vmax; height: 76vmax; --light: var(--glow-b);
  translate: calc(var(--g2x) * 1.3vw - 50%) calc(var(--g2y) * 1.3vh - 50%); }
.light-3 { width: 80vmax; height: 60vmax; --light: var(--glow-c);
  translate: calc(var(--g3x) * 1.3vw - 50%) calc(var(--g3y) * 1.3vh - 50%); }
html.glow-arrive .light { transition: translate 2.4s cubic-bezier(0.45, 0, 0.2, 1), scale 0.6s ease-out, opacity 0.6s ease-out; }
html.glow-quick .light-1 { transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.2s ease-out, opacity 0.2s ease-out; }
html.glow-flare .light-1 { scale: 1.15; opacity: 1; }
@keyframes drift {
  50% { transform: translate3d(3%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.02); }
}

/* ---------------------------------------------------------------------------------------------------------------
   Moving between pages: site.js swaps the content in place. The top bar stays live (its amber pill slides to the new
   page), the content and footer fade out and the next ones rise in, and the background stays live so the glow glides
   on unbroken. The live page itself fades, not a view transition's picture of it: a long page is taller than the
   browser will picture at full size, so the picture came out shrunk and jumped when the real page replaced it.
   --------------------------------------------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-group(site-nav) { animation-duration: 0s; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }
html.page-leaving :is(main, footer) { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease-in, transform 0.2s ease-in; }
html.page-entering :is(main, footer) { animation: page-in 0.55s var(--ease) both; }
main:focus { outline: none; }

/* Switching Light and Dark: the new appearance spreads out in a circle from the switch (site.js), with the whole
   window in one picture so nothing else animates meanwhile. Without view transitions, colours crossfade instead. */
html.theme-switching .nav { view-transition-name: none; }
html.theme-switching::view-transition-old(root) { display: block; animation: none; }
html.theme-switching::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease !important;
}

/* Rising in as the page arrives: each block a moment after the one before */
.rise > * { animation: rise 0.7s var(--ease) both; }
.rise > *:nth-child(2) { animation-delay: 0.06s; }
.rise > *:nth-child(3) { animation-delay: 0.12s; }
.rise > *:nth-child(4) { animation-delay: 0.18s; }
.rise > *:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Layout */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
main { flex: 1 0 auto; display: block; }

/* Liquid Glass */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow);
}

/* ---------------------------------------------------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------------------------------------------------- */
.nav-shell { position: sticky; top: 12px; z-index: 50; margin-top: 12px; }
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

/* The section tabs: a capsule of equal tabs with an amber pill that slides to the page you're on, like the app's
   section picker */
.seg {
  position: relative;
  flex: 0 1 460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
  padding: 4px;
  border-radius: 14px;
  background: var(--hover);
}
.seg-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--tabs, 4));
  border-radius: 10px;
  background: var(--brand-gradient);
  box-shadow: 0 4px 14px rgba(255, 138, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateX(calc(var(--active, 0) * 100%));
  transition: transform 0.55s var(--ease), opacity 0.3s ease;
}
.seg[data-active="-1"] .seg-pill { opacity: 0; }
.seg a, .seg button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  color: var(--text2);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s ease;
}
.seg a:hover, .seg button:hover { color: var(--text); text-decoration: none; }
.seg [aria-current="page"], .seg [aria-selected="true"] { color: var(--on-amber); }
.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass-fill);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.icon-button:hover { background: var(--hover); }
.icon-button:active { transform: scale(0.95); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { transition: transform 0.5s var(--ease), opacity 0.3s ease; }
/* Sun in Dark Mode, moon in Light, as on the app's sidebar */
.theme-toggle .icon-sun { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle { position: relative; }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
}

/* Buttons: bordered-prominent in amber */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--brand-gradient);
  color: var(--on-amber);
  box-shadow: 0 6px 20px rgba(255, 138, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(255, 138, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); transform: translateY(-1px); }
.btn-glass { color: var(--text); }
.btn-glass:hover { background: var(--hover); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* Download: the button downloads the latest release; the arrow beside it opens the other choices */
.download { position: relative; display: inline-flex; }
.download > .btn { border-radius: 12px 0 0 12px; }
.download-more { position: relative; }
.download-more summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 44px;
  width: 40px;
  border-radius: 0 12px 12px 0;
  background: var(--brand-gradient);
  background-position: right;
  color: var(--on-amber);
  cursor: pointer;
  box-shadow: inset 1px 0 0 rgba(31, 19, 0, 0.18), 0 6px 20px rgba(255, 138, 31, 0.35);
  transition: filter 0.2s ease;
}
.btn-small + .download-more summary { min-height: 40px; width: 36px; }
.download-more summary::-webkit-details-marker { display: none; }
.download-more summary:hover { filter: brightness(1.05); }
.download-more summary .icon { width: 16px; height: 16px; stroke-width: 2.2; transition: transform 0.35s var(--ease); }
.download-more[open] summary .icon { transform: rotate(180deg); }
.download-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: 290px;
  padding: 6px;
  border-radius: 16px;
  background: var(--menu);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--line);
  box-shadow: var(--window-shadow);
  text-align: left;
  animation: menu-in 0.28s var(--ease) both;
  transform-origin: top right;
}
.download-menu.left { right: auto; left: 0; transform-origin: top left; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.download-menu a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--text);
}
.download-menu a:hover { background: var(--hover); text-decoration: none; }
.download-menu a .icon { grid-row: span 2; width: 18px; height: 18px; margin: auto; color: var(--accent-text); }
.download-menu a strong { font-size: 15px; font-weight: 600; }
.download-menu a span { grid-column: 2; font-size: 13px; color: var(--text3); }

/* ---------------------------------------------------------------------------------------------------------------
   Type and sections
   --------------------------------------------------------------------------------------------------------------- */
.section { padding: 72px 0; scroll-margin-top: 96px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.display { font-size: clamp(44px, 8vw, 92px); line-height: 1; letter-spacing: -0.045em; font-weight: 750; margin: 14px 0 18px; }
.title { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 750; margin: 12px 0 16px; }
.heading { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; margin: 10px 0 14px; }
.card-title { font-size: 19px; line-height: 1.3; font-weight: 650; margin: 0 0 6px; letter-spacing: -0.01em; }
.lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; color: var(--text2); max-width: 660px; margin: 0; }
.muted { color: var(--text2); }
.small { font-size: 14px; color: var(--text3); }
.centered { text-align: center; margin-left: auto; margin-right: auto; }
.gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head { max-width: 720px; }
.section-head.centered .lede { margin: 0 auto; }
.card { border-radius: var(--radius); padding: 24px; }
.card p { margin: 0; color: var(--text2); font-size: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.feature { display: flex; flex-direction: column; gap: 6px; transition: transform 0.35s var(--ease); }
.feature:hover { transform: translateY(-3px); }
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-gradient);
  color: var(--on-amber);
  box-shadow: 0 6px 16px rgba(255, 138, 31, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
  flex: none;
}
.number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--on-amber);
  font-weight: 750;
  font-size: 15px;
  margin-bottom: 12px;
  flex: none;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
}
.pill-link:hover { text-decoration: none; background: var(--hover); }
.pill-link b {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: var(--on-amber);
  font-size: 12px;
  font-weight: 700;
}
.pill-link .icon { width: 16px; height: 16px; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
}
code { font-family: var(--mono); font-size: 0.9em; }

/* Home: hero */
.hero { padding: 80px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { width: 112px; height: 112px; border-radius: 26px; margin-top: 28px; box-shadow: 0 20px 60px rgba(255, 138, 31, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15); }
.hero .eyebrow { margin-top: 24px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.meta { margin: 16px 0 0; font-size: 14px; color: var(--text3); }
.phone-note { margin: 12px 0 0; font-size: 14px; color: var(--text3); }
.install-note { margin: 22px 0 0; max-width: 660px; padding: 14px 18px; border-radius: 16px; font-size: 15px; color: var(--text2); text-align: left; }

/* ---------------------------------------------------------------------------------------------------------------
   The app, drawn in CSS with placeholder names: two columns under a see-through toolbar, as in ElBee Player.
   The sidebar lists the section's categories with the playlist bar at its foot; the toolbar holds the Now Playing,
   Multi-View and Refresh buttons, the section tabs with their amber pill, and the search field; Live TV opens with
   the channel spotlight, drawn dark in either appearance, over a list of channel cards.
   --------------------------------------------------------------------------------------------------------------- */
.preview { padding: 16px 0 24px; }
.preview-tabs { display: flex; justify-content: center; margin: 0 0 22px; }
.preview-tabs .seg { flex: 0 1 520px; margin: 0; }

.app {
  position: relative;
  display: flex;
  height: 640px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--app-column);
  border: 1px solid var(--line);
  box-shadow: var(--window-shadow), 0 0 160px rgba(255, 176, 32, 0.25);
  font-size: 13px;
  text-align: left;
  isolation: isolate;
}
.app-sidebar {
  position: relative;
  z-index: 2;
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  background: var(--app-sidebar);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-right: 1px solid var(--line);
}
.traffic { display: flex; gap: 8px; padding: 18px 18px 0; height: 52px; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.traffic i:nth-child(1) { background: #FF5F57; }
.traffic i:nth-child(2) { background: #FEBC2E; }
.traffic i:nth-child(3) { background: #28C840; }
.app-cats { flex: 1; overflow: hidden; padding: 4px 10px; display: flex; flex-direction: column; gap: 1px; }
.app-cats .cat-head { padding: 10px 10px 4px; font-size: 11px; font-weight: 650; color: var(--text3); }
.app-cats .cat {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.app-cats .cat.selected {
  background: linear-gradient(90deg, rgba(255, 176, 32, 0.3), rgba(255, 138, 31, 0.14));
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.4);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text2);
  background: var(--chip);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-chip.best { color: var(--accent-text); background: rgba(255, 176, 32, 0.16); border-color: rgba(255, 176, 32, 0.45); }
.app-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
}
.app-footer .playlist { flex: 1; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 13px; }
.app-footer .playlist i { width: 8px; height: 8px; border-radius: 50%; background: #34C759; }
.app-footer .playlist .icon { width: 12px; height: 12px; margin-left: auto; color: var(--text3); }
.app-footer > .icon { width: 30px; height: 28px; padding: 5px 7px; color: var(--text2); }

.app-detail { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* The toolbar sits over the top of the detail column; the spotlight runs up under it */
.app-toolbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}
.app-glass {
  background: var(--app-glass, rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--app-glass-line, rgba(0, 0, 0, 0.08));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 1px 0 var(--glass-sheen);
  border-radius: 999px;
}
.app-buttons { display: flex; gap: 2px; padding: 3px; color: var(--text); }
.app-buttons .icon { width: 30px; height: 26px; padding: 5px 7px; opacity: 0.85; }
.app-sections { margin: 0 auto; display: flex; gap: 2px; padding: 3px; }
.app-sections button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.app-sections button .icon { display: none; width: 15px; height: 15px; }
.app-sections button:hover { background: var(--hover); }
.app-sections button.on { opacity: 1; font-weight: 600; color: var(--accent-text); background: rgba(255, 176, 32, 0.14); border-color: rgba(255, 176, 32, 0.35); }
.app-search { display: flex; align-items: center; gap: 6px; width: 240px; height: 30px; padding: 0 10px; font-size: 13px; color: var(--text3); }
.app-search .icon { width: 14px; height: 14px; }
/* Over the dark spotlight, the toolbar's glass is dark too */
.app[data-view="live"] .app-toolbar .app-glass,
.app[data-view="guide"] .app-toolbar .app-glass,
.app[data-view="multi"] .app-toolbar .app-glass {
  background: rgba(40, 40, 44, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
}
.app[data-view="live"] .app-sections button, .app[data-view="guide"] .app-sections button,
.app[data-view="live"] .app-buttons, .app[data-view="guide"] .app-buttons { color: #fff; }
.app[data-view="live"] .app-sections button.on, .app[data-view="guide"] .app-sections button.on { color: #FFC85C; }
.app[data-view="live"] .app-search, .app[data-view="guide"] .app-search { color: rgba(255, 255, 255, 0.6); }
.app-buttons .rec { display: none; }
.app[data-view="guide"] .app-buttons .rec { display: block; }

.app-view { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.app[data-view="live"] .view-live,
.app[data-view="guide"] .view-guide,
.app[data-view="movies"] .view-movies,
.app[data-view="multi"] .view-multi { display: flex; animation: view-in 0.5s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* The channel spotlight */
.spotlight {
  position: relative;
  flex: none;
  height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 70px 28px 22px 32px;
  color: #fff;
  overflow: hidden;
  background: #120a05;
}
.spotlight-backdrop {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 55% at 78% 40%, rgba(255, 170, 60, 0.95), transparent 70%),
    radial-gradient(35% 50% at 92% 75%, rgba(255, 110, 30, 0.8), transparent 70%),
    radial-gradient(45% 60% at 55% 15%, rgba(255, 210, 122, 0.55), transparent 70%),
    #1a0d06;
  filter: blur(30px) saturate(140%);
  animation: backdrop-breathe 9s ease-in-out infinite alternate;
}
@keyframes backdrop-breathe { to { transform: scale(1.06) translateX(-2%); filter: blur(34px) saturate(160%); } }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0) 62%);
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.45));
}
.spotlight-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 9px; max-width: 54%; min-width: 0; }
.spotlight-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.spotlight-meta span:last-child { font-weight: 400; color: rgba(255, 255, 255, 0.6); }
.badge-playing { padding: 3px 8px; border-radius: 5px; background: var(--amber); color: #000; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.badge-live { padding: 3px 8px; border-radius: 5px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.spotlight-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotlight-time { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.spotlight-desc { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spotlight-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; white-space: nowrap; }
.app-prominent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--amber);
  color: #000;
  font-size: 13px;
  font-weight: 600;
}
.app-prominent .icon { width: 12px; height: 12px; }
.app-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.app-circle .icon { width: 15px; height: 15px; }
.app-circle .heart { color: var(--heart); }
.spotlight-next { font-size: 13px; color: rgba(255, 255, 255, 0.65); overflow: hidden; text-overflow: ellipsis; }
.progress { position: relative; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); overflow: hidden; flex: none; }
.progress i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--brand-gradient); }
.spotlight .progress { width: 160px; }
/* The live picture at the banner's right, lighting its surroundings with its own colours (Ambient Glow) */
.picture {
  position: absolute;
  z-index: 2;
  top: 64px;
  right: 24px;
  bottom: 20px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 70px rgba(255, 150, 40, 0.55);
}
.scene {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 34% at 64% 42%, #fff4d6 0%, #ffd27a 30%, transparent 70%),
    linear-gradient(180deg, #ff9d3a 0%, #f07a2a 38%, #8a3a17 62%, #2a1309 100%);
}
.scene::before {   /* far hills */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 22%;
  height: 34%;
  background: radial-gradient(60% 100% at 30% 100%, #4a2010 60%, transparent 61%), radial-gradient(55% 90% at 80% 100%, #5a2812 60%, transparent 61%);
}
.scene::after {    /* near ground */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 26%;
  background: linear-gradient(#24100a, #120804);
}
.scene i {         /* drifting light on the water */
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 26%;
  width: 40%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 230, 170, 0.75);
  filter: blur(1px);
  animation: shimmer 4s ease-in-out infinite alternate;
}
@keyframes shimmer { to { transform: translateX(-30%) scaleX(0.7); opacity: 0.5; } }
.muted-capsule {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.muted-capsule .icon { width: 12px; height: 12px; }

/* The header above a list: title with its chip, counts, then the filter pills, sort and find field */
.media-header { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 18px 22px 12px; }
.media-header .titles { margin-right: auto; min-width: 0; }
.media-header h4 { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.media-header p { margin: 2px 0 0; font-size: 13px; color: var(--text2); }
.app-seg { display: flex; padding: 2px; border-radius: 10px; background: var(--field); }
.app-seg span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text2); }
.app-seg span.on { color: var(--accent-text); background: rgba(255, 176, 32, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.35); }
.app-menu, .app-field { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--field); font-size: 13px; color: var(--text2); }
.app-field { width: 150px; color: var(--text3); }
.app-menu .icon, .app-field .icon { width: 12px; height: 12px; }

/* Channel cards, as in the app's Live TV list */
.channel-list { flex: 1; overflow: hidden; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.channel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid rgba(127, 127, 127, 0.12);
  transition: background-color 0.15s ease;
}
.channel:hover { background: rgba(127, 127, 127, 0.12); }
.channel.playing { background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.55); }
.logo-plate {
  flex: none;
  width: 56px;
  height: 40px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.channel-name { flex: 0 1 260px; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }
.channel-name b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.channel-name small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.channel-name small .icon { width: 13px; height: 13px; color: var(--accent-text); }
.channel-now { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.channel-now div { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.channel-now strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.channel-now span { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.channel-now .progress { height: 4px; max-width: 260px; background: var(--track); }
.channel-next { flex: 0 0 210px; font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-heart { flex: none; width: 30px; display: flex; justify-content: center; color: var(--heart); }
.channel-heart .icon { width: 16px; height: 16px; }
.channel-heart.off { opacity: 0; }

/* The TV Guide */
.guide-days { display: flex; justify-content: center; gap: 4px; padding: 64px 0 10px; }
.guide-days span { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text2); }
.guide-days span.on { color: var(--accent-text); background: rgba(255, 176, 32, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.35); font-weight: 600; }
.view-guide { background: linear-gradient(#1b1210 0, #1b1210 52px, transparent 52px); }
.guide { flex: 1; margin: 0 14px 14px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--panel2); display: flex; flex-direction: column; }
.guide-ruler { display: flex; padding: 8px 0 8px 170px; font-size: 11px; color: var(--text3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.guide-ruler span { flex: 1; }
.guide-row { position: relative; display: flex; min-height: 54px; border-bottom: 1px solid var(--line); }
.guide-channel { flex: 0 0 170px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.guide-channel .logo-plate { width: 40px; height: 28px; font-size: 10px; border-radius: 7px; }
.guide-track { position: relative; flex: 1; display: flex; gap: 3px; padding: 4px; min-width: 0; }
.programme { min-width: 0; padding: 7px 10px; border-radius: 8px; background: var(--hover); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.programme small { display: block; font-size: 11px; color: var(--text3); }
.programme.now { background: rgba(255, 176, 32, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.4); font-weight: 600; }
.programme.spot { background: rgba(255, 176, 32, 0.28); box-shadow: inset 0 0 0 2px rgba(255, 176, 32, 0.8); }
.now-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(170px + (100% - 170px) * 0.31); width: 2px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }

/* Movies */
.view-movies { padding-top: 52px; }
.posters { flex: 1; overflow: hidden; padding: 4px 22px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 24px 20px; align-content: start; }
.poster-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.55)); }
.poster .progress { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; height: 4px; background: rgba(255, 255, 255, 0.3); }
.poster .icon { position: relative; z-index: 1; width: 34px; height: 34px; margin: auto; color: rgba(255, 255, 255, 0.5); }
.poster-card b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-card span { font-size: 12px; color: var(--text3); }

/* Multi-View: its own window of up to four pictures */
.view-multi { padding: 56px 14px 14px; background: #0b0b0c; }
.multi { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; padding: 10px; }
.tile.focus { box-shadow: 0 0 0 2px var(--amber), 0 0 28px rgba(255, 176, 32, 0.55); }
.tile-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.tile-label .icon { width: 13px; height: 13px; }
.preview-caption { margin: 16px auto 0; max-width: 640px; text-align: center; font-size: 15px; color: var(--text3); }

/* Each screen's sidebar: Live TV and the Guide list channel categories, Movies its genres; Multi-View is a window of
   its own with no sidebar or section tabs */
.app-cats .cat .icon { width: 12px; height: 12px; margin-left: auto; color: var(--text3); }
.cats-movies { display: none !important; }
.app[data-view="movies"] .cats-live { display: none; }
.app[data-view="movies"] .cats-movies { display: flex !important; }
.app[data-view="guide"] .cats-live .cat:first-child { display: none; }
.app[data-view="multi"] .app-sidebar { display: none; }
.app[data-view="multi"] .app-sections, .app[data-view="multi"] .app-search, .app[data-view="multi"] .app-buttons { visibility: hidden; }
.app[data-view="multi"] .app-detail::before { content: "Multi-View"; position: absolute; z-index: 6; top: 17px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.app[data-view="multi"] .app-detail::after { content: ""; position: absolute; z-index: 6; top: 20px; left: 18px; width: 52px; height: 12px;
  background: radial-gradient(circle at 6px 6px, #FF5F57 5.5px, transparent 6px), radial-gradient(circle at 26px 6px, #FEBC2E 5.5px, transparent 6px), radial-gradient(circle at 46px 6px, #28C840 5.5px, transparent 6px); }

/* Steps, privacy, notices */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 28px; }
.checks { list-style: none; margin: 0; padding: 24px; display: grid; gap: 16px; border-radius: var(--radius); }
.checks li { display: flex; gap: 14px; align-items: flex-start; color: var(--text2); }
.checks li strong { color: var(--text); }
.checks .badge-icon { margin: 0; width: 36px; height: 36px; border-radius: 10px; }
.checks .badge-icon .icon { width: 18px; height: 18px; }
.notice { border-radius: 16px; padding: 18px 20px; font-size: 15px; color: var(--text2); margin: 0; }
.notice strong { color: var(--text); }
.cta-band { position: relative; border-radius: 28px; padding: 56px 24px; text-align: center; margin-top: 24px; }
.cta-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(closest-side, rgba(255, 176, 32, 0.35), transparent); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band img { border-radius: 17px; box-shadow: 0 12px 36px rgba(255, 138, 31, 0.45); }

/* Page headers and long-form pages */
.page-head { padding: 80px 0 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--text); font-size: 15px; font-weight: 550; }
.chips a:hover { background: var(--hover); text-decoration: none; }
.prose { max-width: 800px; border-radius: 24px; padding: 32px 36px; }
.prose h2 { font-size: 24px; letter-spacing: -0.015em; margin: 36px 0 10px; scroll-margin-top: 96px; }
.prose h2:first-of-type { margin-top: 24px; }
.prose p, .prose li { color: var(--text2); }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--amber); }
.prose strong { color: var(--text); }
.prose .updated { margin: 0; font-size: 14px; color: var(--text3); }
.prose .summary { margin: 18px 0 0; padding: 4px 20px; border-radius: 16px; background: rgba(255, 176, 32, 0.1); border: 1px solid rgba(255, 176, 32, 0.3); }

/* What's New (the list is built by changelog.js) */
.releases { max-width: 820px; display: grid; gap: 16px; padding-bottom: 24px; }
.releases-status { color: var(--text2); }
.release { border-radius: 24px; scroll-margin-top: 96px; overflow: hidden; }
.release summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: center;
  padding: 22px 26px;
}
.release summary::-webkit-details-marker { display: none; }
.release-title { display: flex; align-items: center; gap: 10px; }
.release-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
  transition: transform 0.35s var(--ease);
  flex: none;
}
.release[open] .release-title::before { transform: rotate(45deg); }
.release-version { font-family: var(--mono); font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--hover); color: var(--text); }
.release summary:hover .release-version { color: var(--accent-text); }
.release time { color: var(--text3); font-size: 14px; white-space: nowrap; }
.release-theme { grid-column: 1 / -1; padding-left: 18px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.release-summary { grid-column: 1 / -1; padding-left: 18px; color: var(--text2); font-size: 16px; }
.badge { padding: 3px 10px; border-radius: 999px; background: var(--brand-gradient); color: var(--on-amber); font-size: 12px; font-weight: 700; }
.notes { padding: 0 26px 24px 44px; color: var(--text2); font-size: 16px; }
.release[open] .notes { animation: rise 0.45s var(--ease) both; }
.notes h3, .notes h4 { margin: 20px 0 6px; color: var(--accent-text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 650; }
.notes p { margin: 8px 0; }
.notes ul { margin: 6px 0; padding-left: 18px; }
.notes li { margin: 7px 0; }
.notes li::marker { color: var(--amber); }
.notes strong { color: var(--text); }
.notes code { padding: 1px 6px; border-radius: 6px; background: var(--hover); }
.release-download { margin-top: 18px !important; font-weight: 600; }

/* Support */
.install { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; border-radius: var(--radius); padding: 22px; }
.step p { margin: 0; color: var(--text2); }
.step p + p { margin-top: 12px; }
.step-shot { display: block; width: 100%; max-width: 560px; margin-top: 14px; border-radius: 12px; box-shadow: var(--shadow); }
.security-mock { margin-top: 14px; max-width: 460px; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.security-mock div { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.security-mock .fake-button { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; background: var(--panel); }
.command { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 10px 10px 16px; border-radius: 12px; background: #141416; color: #F5F5F7; border: 1px solid rgba(255, 255, 255, 0.08); }
.command code { flex: 1; min-width: 0; font-size: 13px; overflow-x: auto; white-space: nowrap; }
.command button { flex: none; min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.command button:hover { background: rgba(255, 255, 255, 0.14); }
.faq-search { display: flex; align-items: center; gap: 10px; max-width: 440px; margin: 0 0 18px; padding: 0 14px; min-height: 46px; border-radius: 14px; }
.faq-search .icon { color: var(--text3); }
.faq-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--accent-text); transition: transform 0.35s var(--ease); }
.faq details[open] summary .icon { transform: rotate(90deg); }
.faq details p { margin: 0 0 18px; color: var(--text2); }
.faq details[open] p { animation: rise 0.45s var(--ease) both; }
.table-box { border-radius: var(--radius); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 20px; border-top: 1px solid var(--line); }
th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); font-weight: 650; }
td { color: var(--text2); }
td:first-child { white-space: nowrap; }
.contact-form { border-radius: 24px; padding: 28px; display: grid; gap: 16px; margin-top: 16px; position: relative; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.22); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin: 0; border-radius: 12px; padding: 12px 14px; font-size: 15px; background: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.35); color: var(--text); }
.form-sent { border-radius: 24px; padding: 40px 28px; text-align: center; margin-top: 16px; }
.form-sent .badge-icon, .centered-page .badge-icon { width: 60px; height: 60px; border-radius: 50%; }
.form-sent .badge-icon .icon, .centered-page .badge-icon .icon { width: 28px; height: 28px; }
.form-sent:focus { outline: none; }
.centered-page { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 0 40px; }

/* Footer */
.footer { margin-top: 96px; border-top: 1px solid var(--line); padding: 48px 0 40px; }
.footer-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: 28px; }
.footer-col h2 { margin: 0 0 10px; font-family: var(--font); font-size: 13px; color: var(--text3); font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; }
.footer-col a { display: block; padding: 5px 0; color: var(--text2); font-size: 15px; }
.footer-col a:hover { color: var(--text); }
.footer .brand { padding: 0; }
.footer-fine { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text3); display: grid; gap: 8px; }

/* Narrower windows: the app draws its section tabs as icons, as it does in a narrow window */
@media (max-width: 1100px) {
  .app-search { width: 30px; padding: 0; justify-content: center; }
  .app-search span { display: none; }
  .channel-next { display: none; }
}
@media (max-width: 900px) {
  .app-sections button { padding: 0 7px; }
  .app-sections button span { display: none; }
  .app-sections button .icon { display: block; }
  .app-sidebar { flex-basis: 190px; }
  .spotlight-text { max-width: 100%; }
  .picture { opacity: 0.35; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .nav-shell { top: 8px; }
  .nav { padding: 8px; }
  .nav .seg { order: 3; flex: 1 1 100%; }
  .nav-actions { margin-left: auto; }
  .section { padding: 52px 0; }
  .hero, .page-head { padding-top: 48px; }
  .app { height: 600px; }
  .app-sidebar, .app-buttons, .app-search { display: none; }
  .app-sections { margin: 0 auto; }
  .spotlight { height: 280px; padding: 64px 18px 18px; }
  .picture { display: none; }
  .spotlight::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.35)); }
  .spotlight-title { font-size: 24px; }
  .spotlight .progress { width: 90px; }
  .spotlight-next, .app-seg, .app-menu, .app-field { display: none; }
  .channel { gap: 10px; }
  .channel-name { min-width: 0; flex: 1 1 auto; }
  .channel-now { display: none; }
  .guide-ruler { padding-left: 110px; }
  .guide-channel { flex-basis: 110px; }
  .guide-channel .logo-plate { display: none; }
  .now-line { left: calc(110px + (100% - 110px) * 0.31); }
  .step { grid-template-columns: minmax(0, 1fr); }
  .prose, .contact-form { padding: 22px; }
  .release summary { grid-template-columns: 1fr; padding: 18px; }
  .release-theme, .release-summary { padding-left: 0; }
  .notes { padding: 0 18px 18px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-menu { width: min(290px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient-drift, .spotlight-backdrop, .scene i, .rise > *, .app-view, .notes, .faq details p, .download-menu { animation: none !important; }
  .light, html.glow-arrive .light, html.glow-quick .light-1, .seg-pill { transition: none; }
  html.glow-flare .light-1 { scale: none; opacity: 0.9; }
  html.page-leaving :is(main, footer) { transition: none; }
}