/* ==========================================================================
   CP ELORA — VELORA.TV LANGUAGE
   --------------------------------------------------------------------------
   Loaded last. Repaints the site in the visual language of velora.tv: a
   near-black canvas with a magenta bloom behind the hero, a yellow brand
   action, serif display names, glowing chips, and soft bordered cards.
   Structure comes from the markup; this file only decides how it looks.
   ========================================================================== */

:root {
  --vel-bg: #08070c;
  --vel-panel: #100e18;
  --vel-panel-2: #171325;
  --vel-line: #2a2340;
  --vel-line-soft: #1d1830;
  --vel-text: #f6f4fb;
  --vel-muted: #a49fba;
  --vel-dim: #77718c;
  --vel-magenta: #ff2ed1;
  --vel-magenta-soft: rgba(255, 46, 209, .16);
  --vel-yellow: #ffd400;
  --vel-yellow-deep: #f0c400;

  --bg: #08070c;
  --bg-elev: #0b0910;
  --surface: #100e18;
  --surface-2: #171325;
  --surface-3: #1f1a2e;
  --line: #2a2340;
  --line-strong: #3a3157;
  --text: #f6f4fb;
  --muted: #a49fba;
  --dim: #77718c;
  --lime: #ffd400;
  --lime-bright: #ffe45c;
  --lime-soft: rgba(255, 212, 0, .12);
  --neon: #ffd400;
  --neon-bright: #ffe45c;
  --violet: #ff2ed1;
  --violet-bright: #ff6ce0;
  --violet-soft: rgba(255, 46, 209, .16);
  --red: #ff2d55;
  --on-accent: #120f04;
  --header-bg: rgba(8, 7, 12, .96);
  --field: #14111f;
  --field-focus: #1a1628;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Canvas: near black with a magenta bloom ---------- */
body {
  background: var(--vel-bg) !important;
  background-image:
    radial-gradient(1200px 700px at 78% -14%, rgba(255, 46, 209, .16), transparent 60%),
    radial-gradient(900px 560px at 12% 0%, rgba(120, 60, 255, .12), transparent 62%) !important;
  background-repeat: no-repeat !important;
  color: var(--vel-text) !important;
}
h1, h2, h3, h4, .display { color: var(--vel-text); }
body .feature-title, .channel-info h1, .channel-info strong { font-family: var(--font-display) !important; }

/* ---------- Header ---------- */
.arc-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--vel-line-soft) !important;
}
.arc-header .header-inner { height: 64px !important; padding: 0 22px !important; gap: 18px !important; }
/* Under 900px the bar wraps into two rows — search and buttons, then the navigation —
   and the fixed 64px height left the second row outside the bar, drawn over the page
   and over the top of the player. The bar grows with its rows instead. */
@media (max-width: 900px) {
  .arc-header .header-inner { height: auto !important; min-height: 64px !important; }
}
.arc-header .brand-lock { height: 34px !important; }
.arc-header .main-nav a {
  color: var(--vel-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
}
.arc-header .main-nav a:hover { color: var(--vel-text) !important; background: transparent !important; }
.arc-header .main-nav a.active {
  color: var(--vel-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.arc-header .header-search {
  max-width: none !important;
  flex: 1 1 420px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #14111f !important;
  border: 1px solid var(--vel-line) !important;
  padding: 0 8px 0 16px !important;
}
.arc-header .header-search:focus-within { border-color: var(--vel-magenta) !important; }
.arc-header .header-search button {
  background: transparent !important;
  color: var(--vel-dim) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
}
.arc-header .header-search button:hover { color: var(--vel-text) !important; background: transparent !important; }

/* Yellow is the brand action, as on Velora's Sign Up. */
.button-primary,
.feature-cta,
.arc-chat-composer button {
  background: var(--vel-yellow) !important;
  border-color: var(--vel-yellow) !important;
  color: #17130a !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.button-primary:hover,
.feature-cta:hover { background: var(--vel-yellow-deep) !important; border-color: var(--vel-yellow-deep) !important; }
.button, .button-quiet {
  background: transparent !important;
  border-color: var(--vel-line) !important;
  color: var(--vel-text) !important;
}
.button-quiet:hover { background: var(--vel-panel-2) !important; border-color: var(--vel-line-strong) !important; }
.theme-toggle { border-color: var(--vel-line) !important; color: var(--vel-muted) !important; }

/* ---------- Left panel: navigation, then the ranked live channels ----------
   The panel in shell.css is already the right idea, so this layer only repaints
   it: a black column that reads as part of the canvas, hairline dividers, and
   magenta as the only accent. The live channels get a rank number, which is what
   makes the column read as a chart rather than a list of links. */
@media (min-width: 981px) {
  body.has-rail { padding-left: 252px !important; }
  /* neon-2026 turned this element into a horizontal section bar. It is the left
     panel again: a full-height column, in normal flow order, that scrolls inside
     itself when the channel list is longer than the screen. */
  body.has-rail .app-rail {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 252px !important;
    height: auto !important;
    inset: 0 auto 0 0 !important;
    padding: 18px 14px 22px !important;
    gap: 0 !important;
    background: #08060d !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
    border-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  body.has-rail main { padding-top: 0 !important; }
  /* The section bar threw the navigation away because the header kept it. The header
     no longer carries it either, so the panel is the only place it lives. */
  body.has-rail .app-rail > .rail-group:first-of-type { display: grid !important; }
  body.has-rail .app-rail > .rail-group:first-of-type + .rail-group { border-top: 0 !important; padding-top: 0 !important; }
  body.has-rail .arc-header .brand,
  body.has-rail .main-nav,
  body.has-rail .mobile-menu { display: none !important; }
  /* Search sits at the start of the bar, right where the panel ends, and the
     account actions are pushed to the far right. It used to be pinned dead
     centre, which left it floating in the middle of the bar with empty space on
     both sides instead of reading as the first thing after the navigation. */
  body.has-rail .arc-header .header-inner { position: relative; justify-content: flex-start !important; gap: 18px !important; }
  body.has-rail .header-search {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 1 440px !important;
    min-width: 0 !important;
    max-width: 440px !important;
    width: 100% !important;
  }
  body.has-rail .nav-actions { margin-left: auto !important; flex: 0 0 auto !important; }
  body.has-rail .app-rail-brand { display: flex !important; padding: 2px 6px 20px !important; }
  body.has-rail .app-rail-brand img.app-rail-lock { display: block !important; height: 30px !important; }
  body.has-rail .app-rail-brand img.app-rail-mark { display: none !important; }

  body.has-rail .rail-group {
    display: grid !important;
    flex-direction: column !important;
    width: auto !important;
    padding: 16px 0 6px !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    gap: 1px !important;
  }
  body.has-rail .rail-label {
    display: block !important;
    padding: 0 8px 10px !important;
    color: #6f6581 !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: .2em !important;
  }
  body.has-rail .rail-link {
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    color: #a49bb4 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    gap: 11px !important;
  }
  body.has-rail .rail-link svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.6 !important;
  }
  body.has-rail .rail-link:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
  /* The active item is the only one that gets colour: a magenta spine and white text. */
  body.has-rail .rail-link.active {
    background: rgba(255, 46, 209, .1) !important;
    color: #fff !important;
    box-shadow: inset 2px 0 0 var(--vel-magenta) !important;
    font-weight: 600 !important;
  }
  body.has-rail .rail-link.active svg { stroke: var(--vel-magenta) !important; }

  /* Ranked live channels: the number, the face, the name, the audience. */
  /* The section bar laid this list out as a row of chips; in the panel it is a
     stacked chart again, which is also what gives each row the full width. */
  body.has-rail .rail-live .sidebar-channels {
    counter-reset: velrank;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1px !important;
    width: 100% !important;
  }
  body.has-rail .rail-live .sidebar-channel-copy { flex: 1 1 auto !important; min-width: 0 !important; }
  body.has-rail .rail-live .sidebar-channel { width: 100% !important; }
  body.has-rail .rail-live .sidebar-channel {
    height: 38px !important;
    padding: 0 8px 0 6px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    gap: 10px !important;
  }
  body.has-rail .rail-live .sidebar-channel:hover { background: rgba(255, 255, 255, .05) !important; }
  body.has-rail .rail-live .sidebar-channel::before {
    counter-increment: velrank;
    content: counter(velrank);
    flex: 0 0 11px;
    font-family: var(--font-mono) !important;
    font-size: 10px;
    font-weight: 600;
    color: #574d69;
    text-align: right;
  }
  body.has-rail .rail-live .sidebar-channel:nth-child(-n+3)::before { color: var(--vel-magenta); }
  body.has-rail .rail-live .sidebar-avatar {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    background: #191424 !important;
    color: #b9b0cb !important;
    font-size: 10.5px !important;
  }
  body.has-rail .rail-live .sidebar-channel strong {
    color: #efeaf6 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
  }
  body.has-rail .rail-live .sidebar-channel small,
  body.has-rail .rail-live .sidebar-viewers {
    color: #766c88 !important;
    font-size: 10.5px !important;
  }
  body.has-rail .rail-live .sidebar-status i { background: var(--vel-magenta) !important; }
  body.has-rail .rail-live .sidebar-empty {
    color: #574d69 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
}

/* Narrow desktop: the same column, wordmark and numbers dropped, icons kept. */
@media (min-width: 981px) and (max-width: 1180px) {
  body.has-rail { padding-left: 78px !important; }
  body.has-rail .app-rail { width: 78px !important; padding: 18px 11px !important; align-items: center !important; }
  body.has-rail .app-rail-brand { justify-content: center !important; padding: 2px 0 16px !important; }
  body.has-rail .app-rail-brand img.app-rail-lock { display: none !important; }
  body.has-rail .app-rail-brand img.app-rail-mark { display: block !important; }
  body.has-rail .rail-group { width: 100% !important; }
  body.has-rail .rail-label { display: none !important; }
  body.has-rail .rail-link { justify-content: center !important; padding: 0 !important; }
  body.has-rail .rail-link span { display: none !important; }
  body.has-rail .rail-live .sidebar-channel::before { display: none !important; }
  body.has-rail .rail-live .sidebar-channel { justify-content: center !important; padding: 0 !important; }
  body.has-rail .rail-live .sidebar-channel-copy,
  body.has-rail .rail-live .sidebar-status { display: none !important; }
}

/* ---------- Hero: info on the left, picture on the right ---------- */
body.has-rail .home-hero {
  background: transparent !important;
  border: 0 !important;
  margin-top: 8px !important;
  /* The same 26px gutter the sections below use, so every left edge lines up. */
  padding: 18px 26px 0 !important;
  position: relative;
}
.hero-feature.feature-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
/* No chat column in this language; the hero is the feature, full width. */
.hero-feature .arc-chat { display: none !important; }
.hero-feature .hero-feature-controls { display: none !important; }

body.has-rail .home-hero .arc-feature-card {
  display: grid !important;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 26px 26px 30px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  /* One flat panel. The only colour on it is the bloom behind the picture. */
  background: #0d0a14 !important;
  box-shadow: 0 30px 80px -60px #000 !important;
  overflow: hidden;
}
/* The photo moves to the right column; the text to the left. */
body.has-rail .home-hero .arc-feature-media {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: auto !important;
  min-height: 340px !important;
  aspect-ratio: 16 / 10;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: 0 26px 70px -34px rgba(255, 46, 209, .55) !important;
  overflow: hidden;
  order: 2;
}
body.has-rail .home-hero .arc-feature-info {
  grid-column: 1 !important;
  grid-row: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 16px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  order: 1;
}
body.has-rail .home-hero .arc-feature-info .stream-avatar {
  width: 104px !important;
  height: 104px !important;
  font-size: 33px !important;
  border: 1px solid rgba(255, 46, 209, .55) !important;
  box-shadow: 0 0 0 1px rgba(255, 46, 209, .16), 0 0 30px -6px rgba(255, 46, 209, .45) !important;
  border-radius: 26px !important;
}
body.has-rail .feature-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 100%;
}
/* Serif channel name, then the handle and category as chips. */
body.has-rail .feature-copy small:nth-of-type(1) {
  order: 1;
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--vel-text) !important;
  letter-spacing: -.01em;
  line-height: 1.1;
}
body.has-rail .feature-copy small:nth-of-type(1)::before { content: "@"; color: var(--vel-magenta); margin-right: 2px; }
body.has-rail .feature-copy .category-label {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px !important;
  color: var(--vel-muted) !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent !important;
}
body.has-rail .feature-copy .category-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vel-magenta);
  box-shadow: 0 0 10px var(--vel-magenta);
}
body.has-rail .feature-copy strong {
  order: 3;
  font-family: var(--font-sans-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--vel-text) !important;
  line-height: 1.3;
  margin-top: 4px;
}
body.has-rail .home-hero .feature-cta {
  margin-left: 0 !important;
  margin-top: 10px;
  height: 46px !important;
  padding: 0 26px !important;
  border-radius: 8px !important;
  background: var(--vel-magenta) !important;
  border-color: var(--vel-magenta) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  box-shadow: none !important;
}
body.has-rail .home-hero .feature-cta:hover {
  background: #ff56da !important;
  border-color: #ff56da !important;
  box-shadow: none !important;
}

/* Empty state: the placeholder is the only child, so it sits in the single column
   and the wrapper stops behaving like a picture frame. */
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-media {
  display: block !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.has-rail .home-hero .arc-feature-card:has(.is-empty),
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-card {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 260px;
  background:
    radial-gradient(560px 320px at 94% 12%, rgba(255, 46, 209, .15), transparent 64%),
    #0d0a14 !important;
}
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.has-rail .home-hero .feature-layout.is-empty .feature-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .22em !important;
  color: var(--vel-magenta) !important;
}
body.has-rail .home-hero .feature-layout.is-empty .feature-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1;
  max-width: 22ch;
}
body.has-rail .home-hero .feature-layout.is-empty .feature-text {
  color: var(--vel-muted) !important;
  font-size: 14px !important;
  max-width: 52ch;
}
body.has-rail .home-hero .feature-layout.is-empty .feature-actions { margin-top: 10px !important; gap: 10px !important; }
body.has-rail .home-hero .feature-layout.is-empty .feature-actions .button { border-radius: 8px !important; }

/* ---------- For you row ----------
   The cards were pinned at 200px, so three of them sat in the left corner of a
   1162px rail and the rest of the row was blank. They share the row instead: each
   card grows into the space, and a long list still keeps a readable minimum width
   and scrolls sideways rather than shrinking to nothing. */
body.has-rail .home-main .for-you-card {
  flex: 1 0 190px !important;
  width: auto !important;
  max-width: none !important;
}
body.has-rail .for-you-card .for-you-thumb { border-radius: 10px !important; overflow: hidden !important; }
body.has-rail .for-you-card { transition: transform .18s ease; }
body.has-rail .for-you-card:hover { transform: translateY(-2px); }

/* Section rhythm: the gap between one row and the next was three spacings stacked
   (the 44px gap of the page column, a 26px section margin and a 28px heading
   margin), which read as a hole in the page. One gap now does the work. */
body.has-rail .home-main { gap: 26px !important; }
/* A filter row with a single choice — "ALL LIVE" alone under the heading — is not a
   choice, it is a pill floating in space. The row comes back as soon as a second
   filter exists. */
body.has-rail .home-filter-row:has(> :only-child),
body.has-rail #homeCategoryFilters:has(> .filter-chip:only-child) { display: none !important; }
body.has-rail .home-main .section-heading { margin-top: 0 !important; }
body.has-rail .home-main .home-section { margin-top: 0 !important; }

/* ---------- For you row ---------- */
body.has-rail .hero-strip {
  background: transparent !important;
  border: 0 !important;
  padding: 22px 26px 6px !important;
  margin-top: 0 !important;
}
body.has-rail .hero-strip-head h2 {
  font-family: var(--font-sans-display) !important;
  font-size: 19px !important;
  letter-spacing: -.02em;
}
body.has-rail .hero-strip-head a { color: var(--vel-yellow) !important; font-weight: 600; }
body.has-rail .for-you-thumb {
  border-radius: 12px !important;
  border: 1px solid var(--vel-line) !important;
}
body.has-rail .for-you-card strong { color: var(--vel-text) !important; }

/* ---------- Sections ---------- */
body.has-rail .home-main { gap: 44px; }
body.has-rail .home-main > .home-section { padding-inline: 26px !important; }
body.has-rail .home-main > .home-section .section-heading h2::before { content: none !important; }
body.has-rail .home-main > .home-section .section-heading {
  border-bottom: 0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}
body.has-rail .home-main > .home-section .section-heading h2 {
  font-family: var(--font-sans-display) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
}
body.has-rail .home-main > .home-section .section-heading p {
  color: var(--vel-dim) !important;
  font-size: 12.5px !important;
}
body.has-rail .text-link {
  color: var(--vel-magenta) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  border-bottom: 0 !important;
}
body.has-rail .text-link:hover { color: #ff56da !important; border-bottom: 0 !important; }

body.has-rail .filter-chip {
  background: transparent !important;
  border: 1px solid var(--vel-line) !important;
  color: var(--vel-muted) !important;
  height: 30px !important;
}
body.has-rail .filter-chip.active {
  background: var(--vel-magenta) !important;
  border-color: var(--vel-magenta) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- Cards ---------- */
body.has-rail .stream-grid {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
  gap: 22px 16px !important;
}
body.has-rail .stream-thumb {
  border-radius: 12px !important;
  border: 1px solid var(--vel-line) !important;
  background: var(--vel-panel) !important;
  box-shadow: none !important;
}
body.has-rail .stream-card:hover .stream-thumb {
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}
body.has-rail .live-pill {
  background: var(--vel-magenta) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}
body.has-rail .viewer-count {
  background: rgba(8, 7, 12, .82) !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px !important;
  backdrop-filter: none !important;
}
body.has-rail .offline-pill {
  background: rgba(8, 7, 12, .82) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px !important;
}
body.has-rail .stream-card-meta { padding-top: 12px !important; gap: 11px !important; }
body.has-rail .stream-avatar {
  border-radius: 50% !important;
  border: 1px solid var(--vel-line) !important;
  background: var(--vel-panel-2) !important;
}
body.has-rail .stream-card-copy strong {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  color: var(--vel-text) !important;
}
body.has-rail .stream-card-copy small { color: var(--vel-muted) !important; font-size: 12.5px !important; }
body.has-rail .stream-card-copy .category-label {
  color: var(--vel-magenta) !important;
  font-size: 11.5px !important;
  margin-top: 3px;
}
body.has-rail .discovery-empty {
  background: transparent !important;
  border: 1px dashed var(--vel-line) !important;
  color: var(--vel-dim) !important;
  border-radius: 14px !important;
}

/* ---------- Categories ---------- */
body.has-rail .home-main .category-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 12px !important;
}
body.has-rail .home-main .category-card {
  min-height: 96px !important;
  border-radius: 12px !important;
  border: 1px solid var(--vel-line) !important;
  background: var(--vel-panel) !important;
}
body.has-rail .home-main .category-card::before { opacity: .35; }
body.has-rail .home-main .category-card:hover {
  border-color: rgba(255, 46, 209, .5) !important;
  transform: translateY(-2px);
}
body.has-rail .home-main .category-card strong { font-size: 14px !important; color: var(--vel-text) !important; }
body.has-rail .home-main .category-card small { color: var(--vel-dim) !important; }
body.has-rail .category-search-field {
  background: var(--vel-panel) !important;
  border-color: var(--vel-line) !important;
  border-radius: 999px !important;
}

/* ---------- Creator banner ---------- */
body.has-rail .creator-banner {
  margin-inline: 26px !important;
  border-radius: 20px !important;
  border: 1px solid var(--vel-line) !important;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 46, 209, .22), transparent 55%),
    var(--vel-panel) !important;
}
body.has-rail .creator-banner-copy { padding: 34px 36px !important; }
body.has-rail .creator-banner-copy h2 { font-family: var(--font-sans-display) !important; }
body.has-rail .creator-banner-side {
  border-left: 1px solid var(--vel-line) !important;
  background: transparent !important;
}
body.has-rail .creator-banner-big {
  font-family: var(--font-display) !important;
  color: rgba(255, 255, 255, .92) !important;
}
body.has-rail .creator-banner-arrow { color: var(--vel-magenta) !important; }

/* ---------- Channel page ---------- */
body.has-rail .channel-profile {
  background: var(--vel-panel) !important;
  border: 1px solid var(--vel-line) !important;
  border-radius: 16px !important;
}
body.has-rail .channel-info h1,
body.has-rail .channel-info strong { font-family: var(--font-display) !important; }
body.has-rail .channel-tabs { border-bottom: 1px solid var(--vel-line) !important; }
body.has-rail .channel-tab-link.active { box-shadow: inset 0 -2px 0 var(--vel-magenta) !important; }
body.has-rail .channel-goals-panel,
body.has-rail .channel-videos-panel,
body.has-rail .channel-schedule-panel {
  background: var(--vel-panel) !important;
  border: 1px solid var(--vel-line) !important;
  border-radius: 16px !important;
}
body.has-rail .channel-player { border-radius: 16px !important; border: 1px solid var(--vel-line) !important; }
body.has-rail .arc-chat {
  background: var(--vel-panel) !important;
  border: 1px solid var(--vel-line) !important;
  border-radius: 16px !important;
}
body.has-rail .arc-recommended-card,
body.has-rail .arc-recommended-card-body {
  background: var(--vel-panel) !important;
  border-color: var(--vel-line) !important;
}

/* ---------- Footer ---------- */
.arc-footer {
  background: #0a0810 !important;
  border-top: 1px solid var(--vel-line-soft) !important;
  margin-top: 56px !important;
}
.footer-col h3 { color: var(--vel-dim) !important; }
.footer-col a { color: var(--vel-muted) !important; }
.footer-col a:hover { color: var(--vel-magenta) !important; }
.footer-bottom { border-top-color: var(--vel-line-soft) !important; color: var(--vel-dim) !important; }
.footer-build { color: var(--vel-dim) !important; }
.footer-badges .pill { border-color: var(--vel-line) !important; color: var(--vel-muted) !important; }

/* ---------- Light mode ---------- */
html[data-theme="light"] {
  --bg: #f7f5fb;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1eef8;
  --surface-3: #e7e2f2;
  --line: #ded8ee;
  --line-strong: #c9c0e0;
  --text: #14101f;
  --muted: #5d5570;
  --dim: #837a99;
  --header-bg: rgba(247, 245, 251, .97);
  --field: #ffffff;
  --lime: #8a6b00;
  --vel-bg: #f7f5fb;
  --vel-panel: #ffffff;
  --vel-line: #ded8ee;
  --vel-text: #14101f;
  --vel-muted: #5d5570;
  --vel-dim: #837a99;
  --vel-magenta: #c2189f;
  --vel-yellow: #8a6b00;
}
html[data-theme="light"] body {
  background: var(--vel-bg) !important;
  background-image:
    radial-gradient(1000px 560px at 80% -12%, rgba(194, 24, 159, .09), transparent 60%) !important;
}
html[data-theme="light"] .arc-header { background: var(--header-bg) !important; }
html[data-theme="light"] body.has-rail .app-rail {
  background: #14101f !important;
  border-bottom-color: #14101f !important;
}
html[data-theme="light"] body.has-rail .rail-link,
html[data-theme="light"] body.has-rail .rail-link svg { color: #f6f4fb !important; stroke: #f6f4fb !important; }
html[data-theme="light"] body.has-rail .rail-link.active { background: rgba(255, 255, 255, .14) !important; }
html[data-theme="light"] body.has-rail .home-hero .arc-feature-card {
  background: #fff !important;
  border-color: var(--vel-line) !important;
  box-shadow: 0 30px 70px -50px rgba(20, 16, 31, .45);
}
/* The empty hero paints its own dark panel, so light mode needs the same treatment
   or the copy lands dark-on-dark. */
html[data-theme="light"] body.has-rail .home-hero .feature-layout.is-empty .arc-feature-card {
  background:
    radial-gradient(560px 320px at 94% 12%, rgba(194, 24, 159, .1), transparent 64%),
    #fff !important;
  border-color: var(--vel-line) !important;
  box-shadow: 0 24px 60px -46px rgba(20, 16, 31, .35) !important;
}
html[data-theme="light"] body.has-rail .home-hero .arc-feature-media {
  box-shadow: 0 22px 60px -36px rgba(194, 24, 159, .45) !important;
}
html[data-theme="light"] body.has-rail .home-hero .arc-feature-info .stream-avatar {
  border-color: rgba(194, 24, 159, .5) !important;
  box-shadow: 0 0 0 1px rgba(194, 24, 159, .14) !important;
}
html[data-theme="light"] body.has-rail .home-hero .feature-cta {
  background: var(--vel-magenta) !important;
  border-color: var(--vel-magenta) !important;
  color: #fff !important;
}
html[data-theme="light"] body.has-rail .stream-thumb {
  background: #ece7f6 !important;
  border-color: var(--vel-line) !important;
}
html[data-theme="light"] .arc-footer { background: #efeaf7 !important; }

/* --- corrections --- */
/* The old frame's arrow controls have no place in this language. */
body.has-rail .home-hero .hero-feature-controls { display: none !important; }
/* Keep the primary action yellow: the generic button rule above must not win. */
.button:not(.button-primary),
.button-quiet:not(.button-primary) {
  background: transparent !important;
}
.button-primary { background: var(--vel-yellow) !important; border-color: var(--vel-yellow) !important; color: #17130a !important; }
.button-primary:hover { background: var(--vel-yellow-deep) !important; border-color: var(--vel-yellow-deep) !important; }
/* A tighter feature box: the copy column should not float in empty space. */
body.has-rail .home-hero .arc-feature-media {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  max-height: 420px;
}
body.has-rail .home-hero .arc-feature-card { padding: 22px 26px 26px !important; gap: 40px !important; }
body.has-rail .home-hero .arc-feature-info .stream-avatar {
  width: 92px !important; height: 92px !important; border-radius: 26px !important;
}
body.has-rail .feature-copy small:nth-of-type(1) { font-size: 30px !important; }

/* Phones: the feature stacks, picture first, copy under it. */
@media (max-width: 980px) {
  body.has-rail .home-hero .arc-feature-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  body.has-rail .home-hero .arc-feature-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1;
    max-height: none;
  }
  body.has-rail .home-hero .arc-feature-info {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2;
    align-items: flex-start !important;
  }
  body.has-rail .home-hero .arc-feature-info .stream-avatar { width: 64px !important; height: 64px !important; border-radius: 20px !important; }
  body.has-rail .feature-copy small:nth-of-type(1) { font-size: 24px !important; }
  body.has-rail .home-hero .feature-cta { height: 44px !important; padding: 0 22px !important; font-size: 14px !important; }
  body.has-rail .home-main > .home-section,
  body.has-rail .home-main > .hero-strip,
  body.has-rail .creator-banner,
  body.has-rail .channel-watch-layout,
  body.has-rail .channel-layout,
  body.has-rail .channel-topbar { padding-inline: 14px !important; margin-inline: 14px !important; }
  body.has-rail .stream-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}

/* Channel page details that the earlier layer pinned down with !important. */
body.has-rail .channel-tab-link.active { box-shadow: inset 0 -2px 0 var(--vel-magenta) !important; }
body.has-rail .channel-goals-panel,
body.has-rail .channel-goals-panel * { text-align: left !important; }
body.has-rail .channel-goals-head { justify-content: flex-start !important; }
body.has-rail .channel-goals-head h2,
body.has-rail .channel-goals-head h3 { font-family: var(--font-sans-display) !important; font-size: 15px !important; }

/* Phones: drop the grid entirely — a column cannot overlap rows. */
@media (max-width: 980px) {
  body.has-rail .home-hero .arc-feature-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  body.has-rail .home-hero .arc-feature-media {
    width: 100% !important;
    order: 1 !important;
  }
  body.has-rail .home-hero .arc-feature-info {
    width: 100% !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 4px !important;
  }
}

/* An older layer pins the hero copy absolutely over the picture. On a phone it has to
   sit in the flow, under the video, or it covers it. */
@media (max-width: 980px) {
  body.has-rail .home-hero .arc-feature-info {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
  }
  body.has-rail .home-hero .arc-feature-media {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
  body.has-rail .home-hero .arc-feature-card { position: relative !important; }
}

/* --- empty hero ---------------------------------------------------------------
   With nobody live the panel was a second frame inside the first, the copy pinned to
   the left edge and the whole right half empty. One panel now, and the site mark on
   the right gives that half something to look at instead of dead space. */
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-card {
  position: relative;
  min-height: 0 !important;
  padding: 30px 34px !important;
  overflow: hidden !important;
}
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-placeholder {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-media {
  padding-right: clamp(170px, 24vw, 300px) !important;
}
body.has-rail .home-hero .feature-layout.is-empty .arc-feature-card::after {
  content: "";
  position: absolute;
  right: clamp(28px, 5vw, 72px);
  top: 50%;
  width: clamp(140px, 16vw, 220px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("celora-mark.png") center / contain no-repeat;
  opacity: .55;
  filter: drop-shadow(0 0 50px rgba(255, 46, 209, .35));
  pointer-events: none;
}
@media (max-width: 980px) {
  body.has-rail .home-hero .feature-layout.is-empty .arc-feature-media { padding-right: 0 !important; }
  body.has-rail .home-hero .feature-layout.is-empty .arc-feature-card::after { display: none; }
}

/* --- hero player -------------------------------------------------------------
   The featured slot is a player again. It had become a promo card: the picture was
   parked in the right column, the channel copy floated in the middle of the card and
   the left half of the panel was empty. The live state now hands the whole card to
   the picture, with the channel bar over its bottom edge, so the top of the page is
   a broadcast rather than a banner. The empty state keeps its own layout. */
body.has-rail .home-hero .feature-layout:not(.is-empty) .arc-feature-card {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #05040a !important;
  min-height: 0 !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .arc-feature-media {
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  background: #000 !important;
}
/* Contain, never cover: a stream that is not exactly 16:9 keeps its edges instead of
   being cropped by the frame. */
body.has-rail .home-hero .feature-layout:not(.is-empty) .arc-feature-media video {
  object-fit: contain !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .arc-feature-info {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 44px 20px 16px !important;
  background: linear-gradient(0deg, rgba(6, 5, 10, .95), rgba(6, 5, 10, .55) 58%, transparent) !important;
  border: 0 !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .arc-feature-info .stream-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .feature-copy {
  align-items: flex-start !important;
  gap: 2px !important;
}
/* The creator's name leads, the stream title follows it. */
body.has-rail .home-hero .feature-layout:not(.is-empty) .feature-copy small:nth-of-type(1) {
  order: 1 !important;
  font-family: var(--font-sans-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .feature-copy small:nth-of-type(1)::before { content: "@" !important; color: rgba(255, 255, 255, .5) !important; margin-right: 1px !important; }
body.has-rail .home-hero .feature-layout:not(.is-empty) .feature-copy strong {
  order: 2 !important;
  margin-top: 0 !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .72) !important;
}
body.has-rail .home-hero .feature-layout:not(.is-empty) .feature-cta {
  margin-left: auto !important;
  margin-top: 0 !important;
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* --- default avatar -----------------------------------------------------------
   Anyone who has not uploaded a picture gets the CP Elora emblem instead of a bare
   letter. The :has(img) guard leaves real avatars alone, and the cards that remove a
   broken image from the DOM land here too, so a dead URL still shows a face.
   The class is repeated on purpose: velora.css paints avatars with
   "body.has-rail .stream-avatar { background: ... !important }", and one class cannot
   outrank that. Twice the class wins without a second !important war. */
.stream-avatar.stream-avatar:not(:has(img)),
.sidebar-avatar.sidebar-avatar:not(:has(img)),
.side-avatar.side-avatar:not(:has(img)),
.arc-chat-avatar.arc-chat-avatar:not(:has(img)),
.chat-avatar.chat-avatar:not(:has(img)),
.notif-avatar.notif-avatar:not(:has(img)),
.gift-avatar.gift-avatar:not(:has(img)),
.team-member-avatar.team-member-avatar:not(:has(img)),
.team-card-avatar.team-card-avatar:not(:has(img)),
.studio-avatar.studio-avatar:not(:has(img)),
.channel-profile-avatar.channel-profile-avatar:not(:has(img)) {
  background-image: url("default-avatar.png") !important;
  background-color: #0c0916 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}
/* The rail, chat, toasts and gifts never draw larger than 48px, so they take the small
   file and a feed of them costs a few kilobytes instead of a quarter of a megabyte. */
.sidebar-avatar.sidebar-avatar:not(:has(img)),
.side-avatar.side-avatar:not(:has(img)),
.arc-chat-avatar.arc-chat-avatar:not(:has(img)),
.chat-avatar.chat-avatar:not(:has(img)),
.notif-avatar.notif-avatar:not(:has(img)),
.gift-avatar.gift-avatar:not(:has(img)) {
  background-image: url("default-avatar-96.png") !important;
}