/* ==========================================================================
   CP Elora — live streaming
   Flat, high-contrast hybrid of Twitch density and Kick confidence.
   Loaded by includes/header.php.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* One neutral charcoal palette and one accent. The accent is reserved for the primary
   action, the live dot and the current-page marker; nothing else is allowed to be bright.
   The CP Elora wordmark keeps its own colours because it is the brand, not the UI. */
:root {
  color-scheme: dark;
  --bg: #090a0a;
  --bg-elev: #0b0d0c;
  --surface: #101213;
  --surface-2: #151819;
  --surface-3: #1b1f20;
  --line: #22262a;
  --line-strong: #31363a;
  --text: #f2f5f0;
  --muted: #98a29b;
  --dim: #6e7770;
  /* The accent is lime; the legacy --neon names carry it so older rules stay in palette. */
  --neon: #a9d63a;
  --neon-bright: #a97bff;
  --neon-deep: #8fbb2c;
  --neon-cyan: #7fd3c4;
  --neon-cyan-soft: rgba(127, 211, 196, .16);
  --neon-magenta: #ff8fb1;
  --neon-magenta-soft: rgba(255, 143, 177, .16);
  --glow-violet: none;
  --glow-cyan: none;
  --glow-edge: none;
  --lime: #a97bff;
  --lime-bright: #c6a4ff;
  --lime-soft: rgba(169, 123, 255, .14);
  --violet: #a473ff;
  --violet-bright: #b98bff;
  --violet-soft: rgba(164, 115, 255, .18);
  --copper: #ff8a3c;
  --copper-bright: #ffab70;
  --copper-soft: rgba(255, 138, 60, .14);
  --red: #ff4b4b;
  /* Older page styles ask for --border/--panel; point them at the palette. */
  --border: var(--line);
  --border-strong: var(--line-strong);
  --panel: var(--surface);
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --max: 1280px;
  /* Fields, wells and the ink that sits on the accent. These are separate tokens so the
     light theme (assets/theme.css) can repaint the whole site without a second stylesheet
     for every page: a component asks for a role, not for a shade. */
  --field: #0c0e0d;
  --field-focus: #121514;
  --on-accent: #0d0718;
  --header-bg: rgba(9, 10, 10, .94);
  --scrim: rgba(6, 7, 6, .72);
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* legacy aliases used by older inline page styles */
  --arc-bg: var(--bg);
  --arc-panel: var(--surface);
  --arc-panel2: var(--surface-2);
  --arc-line: var(--line);
  --arc-text: var(--text);
  --arc-muted: var(--muted);
  --arc-purple: var(--violet);
  --arc-violet: var(--violet-bright);
  --arc-cyan: var(--lime);
  --arc-lime: var(--lime);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  /* The page is a column at least one screen tall, so the footer sits at the bottom of
     the window on a short page (a team directory, a 404) instead of halfway up it. */
  display: flex;
  flex-direction: column;
  color: var(--text);
  /* One flat surface. The room is the colour of the page; nothing glows behind it. */
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .brand, .display { font-family: var(--font-display); font-weight: 700; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.035em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--lime); color: #0d0718; }
:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 2px; }
/* <main> takes whatever height is left over, which is what pushes the footer down. */
main { display: block; flex: 1 0 auto; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lime); color: #0d0718; padding: 10px 16px;
  border-radius: 0 0 6px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.section { padding-top: 36px; padding-bottom: 36px; }
.gradient-text, .accent-text { color: var(--lime); }
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--lime);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--lime); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.pulse, .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: none;
  vertical-align: middle;
}
.live-dot { margin-left: 4px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--neon-deep); }

/* ---------- 3. Buttons & controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 700; font-size: 13px; line-height: 1.1; letter-spacing: .01em;
  color: var(--text); background: transparent; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary {
  background: var(--lime);
  border-color: var(--lime); color: var(--on-accent);
}
.button-primary:hover { background: var(--lime-bright); border-color: var(--lime-bright); color: var(--on-accent); }
.button-outline { border-color: var(--line-strong); background: transparent; }
.button-outline:hover { border-color: var(--lime); color: var(--lime); }
.button-quiet { border-color: var(--line); background: var(--surface-2); color: #ece7f7; }
.button-quiet:hover { background: var(--surface-3); border-color: var(--line-strong); }
.button-ghost { border-color: var(--line-strong); background: transparent; }
.button-ghost:hover { border-color: var(--text); background: rgba(255, 255, 255, .04); }
.button.small { padding: 8px 12px; font-size: 12px; }
.button.full-width { width: 100%; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:not([type="checkbox"]):not([type="radio"])::placeholder, textarea::placeholder { color: #8a81a6; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(169, 123, 255, .18);
  background: var(--field-focus);
}
select option { background: var(--field-focus); color: var(--text); }

.pill, .tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: #d4cbe6; font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.tag-live { color: var(--lime); border-color: rgba(169, 123, 255, .35); background: rgba(169, 123, 255, .08); }
.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 12px;
  margin-top: 16px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel-heading h2 { font-size: 17px; margin-bottom: 4px; }
.panel-heading p { margin: 0; font-size: 12px; }
.form-message { font-size: 12px; color: var(--lime); margin: 0; min-height: 18px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 200;
  transform: translate(-50%, 16px);
  opacity: 0; pointer-events: none;
  max-width: min(90vw, 520px);
  padding: 12px 16px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--lime);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 4. Header ---------- */
.arc-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(7, 6, 12, .93);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  min-height: 64px;
  padding: 0 clamp(16px, 2.4vw, 32px);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.055em;
  color: var(--text); flex: none;
}
.brand-lock {
  height: 50px; width: auto; max-width: 100%;
  display: block; flex: none;
}
.brand-lock-footer { height: 56px; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 7px;
  display: none;
}
.brand-word { line-height: 1; }
.brand-dot { color: var(--lime); font-style: normal; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; font-weight: 600;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--lime); border-radius: 0; }
.header-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; max-width: 340px; margin-left: auto;
  padding: 4px 4px 4px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.header-search:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(169, 123, 255, .14);
}
.search-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--dim); stroke-width: 2; }
.header-search input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 7px 0 !important; font-size: 12.5px; border-radius: 0 !important;
  color: var(--text); outline: none;
}
.header-search button {
  flex: none; border: 0; border-radius: 3px;
  padding: 7px 11px;
  background: var(--lime);
  color: #0d0718; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease;
}
.header-search button:hover { background: var(--lime-bright); }
.nav-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.nav-actions .muted { font-size: 12px; color: var(--muted); }
.mobile-menu {
  display: none; width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 9px;
}
.mobile-menu span { display: block; height: 2px; border-radius: 1px; background: #ece7f7; margin: 3px 0; }

/* ---------- 5. Footer ---------- */
.arc-footer {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.footer-inner { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; padding: 40px 0 22px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand { max-width: 330px; }
.footer-brand p { margin: 14px 0 16px; color: var(--muted); font-size: 12.5px; }
.footer-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: clamp(20px, 3.4vw, 52px); }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 2px; font-weight: 700;
}
.footer-col a { color: var(--muted); font-size: 12.5px; transition: color .15s ease; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: 11px;
}
.footer-note { color: var(--dim); }

/* ---------- 6. Home shell & sidebar ---------- */
.home-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}
.home-sidebar {
  position: sticky; top: 65px;
  align-self: start;
  height: calc(100vh - 65px);
  overflow-y: auto;
  padding: 18px 10px 26px 12px;
  border-right: 1px solid var(--line);
  background: var(--bg-elev);
}
.arcstream-side-nav { display: flex; flex-direction: column; gap: 2px; }
.home-sidebar .sidebar-link {
  display: flex; align-items: center; gap: 11px;
  min-height: 38px; padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: #c5c5ce; font-size: 13px; font-weight: 500;
  box-shadow: inset 3px 0 0 transparent;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-sidebar .sidebar-link svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.home-sidebar .sidebar-link:hover { color: var(--text); background: var(--surface-2); }
.home-sidebar .sidebar-link.active {
  color: var(--text); background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--lime);
}
.side-new-badge {
  margin-left: auto; padding: 1px 5px; border-radius: 2px;
  background: var(--lime); color: #0d0718;
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
}
.sidebar-divider { height: 1px; margin: 16px 6px; background: var(--line); border: 0; }
.sidebar-heading {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 8px;
  color: var(--dim); font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
}
.sidebar-heading-link { color: var(--lime); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.sidebar-heading-link:hover { text-decoration: underline; }
.sidebar-drop-mark {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #130e1e; color: var(--lime); font-size: 13px;
}
.sidebar-channels { display: flex; flex-direction: column; gap: 1px; }
.sidebar-channel {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; padding: 7px 6px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.sidebar-channel:hover { background: var(--surface-2); }
.sidebar-avatar {
  position: relative; width: 28px; height: 28px; flex: 0 0 28px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b3a72, #8b6cc9);
  color: #fff; font-weight: 700; font-size: 11px;
}
.sidebar-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-pink { background: linear-gradient(135deg, #7a345f, #d176a8); }
.av-blue { background: linear-gradient(135deg, #24527a, #6fb0dc); }
.av-green { background: linear-gradient(135deg, #1f5b48, #6fbc9d); }
.sidebar-channel-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0; }
.sidebar-channel-copy strong { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-channel-copy small { font-size: 10px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.sidebar-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.sidebar-viewers { padding: 0 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 0; }
.sidebar-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(169, 123, 255, .7); }
.sidebar-show-more { display: inline-block; margin: 7px 6px 0; color: var(--lime); font-size: 10.5px; font-weight: 600; }
.sidebar-show-more:hover { text-decoration: underline; }
.sidebar-empty { padding: 4px 6px; color: var(--dim); font-size: 10.5px; line-height: 1.5; }
.home-main { min-width: 0; padding: 0 clamp(18px, 2.6vw, 36px) 64px; }

/* ---------- 7. Home hero ---------- */
.arc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 54px);
  align-items: center;
  padding: clamp(34px, 4.6vw, 58px) 0 clamp(32px, 4vw, 48px);
}
.arc-hero h1 {
  font-size: clamp(2.7rem, 4.9vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.06em;
  margin: 14px 0 16px;
  max-width: 13ch;
}
.hero-copy p { color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 47ch; margin: 0 0 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.avatar-stack { display: flex; padding-left: 6px; }
.avatar-stack span {
  width: 27px; height: 27px; margin-left: -7px;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #4b3a72, #8b6cc9);
}
.avatar-stack span:nth-child(2) { background: linear-gradient(135deg, #7a345f, #d176a8); }
.avatar-stack span:nth-child(3) { background: linear-gradient(135deg, #1f5b48, #6fbc9d); }
.avatar-stack span:nth-child(4) { background: linear-gradient(135deg, #6a532c, #d9b076); color: #1b1408; }
.hero-proof-copy { display: grid; gap: 1px; }
.hero-proof-copy strong { font-size: 11.5px; font-weight: 600; }
.hero-proof-copy small { font-size: 10.5px; color: var(--dim); }

.hero-art { display: grid; place-items: center; align-content: center; gap: 10px; min-width: 0; }
.hero-monitor {
  width: min(400px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.hero-monitor-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .18em;
}
.hero-monitor-bar .live-pill { margin-left: auto; }
.monitor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(169, 123, 255, .8); }
.hero-monitor-screen {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .6)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .03) 39px 40px),
    radial-gradient(circle at 70% 26%, rgba(169, 123, 255, .16), transparent 58%),
    radial-gradient(circle at 20% 84%, rgba(169, 214, 58, .22), transparent 54%),
    var(--surface-2);
}
.hero-eq { display: flex; align-items: flex-end; gap: 5px; height: 50px; }
.hero-eq i {
  width: 6px; border-radius: 1px;
  background: var(--lime);
  animation: eq 1.1s ease-in-out infinite;
}
.hero-eq i:nth-child(2) { background: #dfe8ff; }
.hero-eq i:nth-child(3) { background: var(--violet-bright); }
.hero-eq i:nth-child(4) { background: #dfe8ff; }
.hero-eq i:nth-child(1) { animation-delay: -.2s; }
.hero-eq i:nth-child(2) { animation-delay: -.7s; }
.hero-eq i:nth-child(3) { animation-delay: -.35s; }
.hero-eq i:nth-child(4) { animation-delay: -.9s; }
.hero-eq i:nth-child(5) { animation-delay: -.5s; }
@keyframes eq { 0%, 100% { height: 16%; } 50% { height: 100%; } }
.hero-card-caption {
  position: absolute; left: 11px; bottom: 9px;
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  color: rgba(255, 255, 255, .78);
}
.hero-monitor-meta {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.hero-monitor-meta .stream-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; font-size: 12px; }
.hero-monitor-copy { display: grid; gap: 0; min-width: 0; flex: 1; }
.hero-monitor-copy strong { font-size: 12px; font-weight: 600; }
.hero-monitor-copy small { font-size: 10.5px; color: var(--dim); }
.monitor-chat { color: var(--lime); font-size: 12px; }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.hero-badges span {
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field); color: #a9a9b2;
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
}

/* ---------- 8. Section headings ---------- */
.home-feature-section, .home-section { margin-bottom: clamp(34px, 3.6vw, 46px); }
.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.section-heading h2 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.12; letter-spacing: -.045em;
  margin-top: 4px;
}
.section-heading p { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.section-heading .eyebrow { font-size: 9.5px; }
.text-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--lime); font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; }
.carousel-controls { display: flex; gap: 5px; }
.carousel-controls button {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 16px; line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.carousel-controls button:hover { border-color: var(--lime); color: var(--lime); background: var(--surface-3); }

/* ---------- 9. Featured stream + chat ---------- */
.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 336px);
  gap: 12px;
  align-items: stretch;
}
.arc-feature-card {
  display: flex; flex-direction: column;
  align-self: start;
  min-width: 0; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}
.arc-feature-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #060409;
}
.arc-feature-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* The whole frame stays visible: a stream whose shape differs from the card is letterboxed
     rather than cropped, so streamers' overlays and edges are never cut off. */
  object-fit: contain; background: #060409;
}
.arc-feature-unmute {
  position: absolute; z-index: 6; top: 11px; right: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  background: rgba(10, 8, 16, .86); color: #fff;
  font: 700 11.5px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.arc-feature-unmute:hover { background: var(--lime); color: #0b0713; }
.arc-feature-unmute[hidden] { display: none; }
/* The header's install button. Hidden until assets/pwa.js hears that the browser can install
   the site, so a browser that cannot install never shows a dead control. */
.pwa-install { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pwa-install[hidden] { display: none !important; }
/* Narrow screens keep the button but drop its label: iPhone and iPad have no install
   event at all, so hiding it there would leave mobile visitors with no way to find out
   the site can live on the home screen. */
@media (max-width: 900px) { .pwa-install .pwa-install-label { display: none; } }
@media (max-width: 520px) { .arc-feature-unmute { top: 8px; right: 8px; min-height: 28px; font-size: 11px; } }
.arc-feature-media video.preview-failed { visibility: hidden; }
.arc-feature-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(255, 255, 255, .025) 43px 44px),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(255, 255, 255, .02) 43px 44px),
    radial-gradient(circle at 62% 34%, rgba(169, 123, 255, .10), transparent 58%),
    radial-gradient(circle at 22% 78%, rgba(169, 214, 58, .14), transparent 54%),
    #0c0914;
}
.arc-feature-placeholder .glyph {
  font-size: clamp(48px, 7vw, 74px);
  color: var(--lime);
  text-shadow: 0 0 40px rgba(169, 123, 255, .35);
}
.arc-feature-placeholder .label {
  position: absolute; left: 14px; bottom: 11px;
  font-size: 9px; font-weight: 700; letter-spacing: .2em;
  color: rgba(255, 255, 255, .7);
}
.arc-feature-overlay { position: absolute; inset: 0; pointer-events: none; }
.arc-feature-overlay .live-pill { position: absolute; top: 11px; left: 11px; }
.arc-feature-media .live-pill { position: absolute; top: 11px; left: 11px; z-index: 3; }
.arc-feature-status {
  position: absolute; left: 11px; right: 11px; bottom: 11px; z-index: 4;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(10, 10, 12, .92);
  color: #e2dcf2;
  font-size: 11px; line-height: 1.45; text-align: center;
}
.arc-feature-info {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--field);
}
.feature-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.feature-copy strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-copy small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-cta {
  display: inline-flex; align-items: center; gap: 5px;
  flex: none; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--violet);
  color: #fff; font-size: 11px; font-weight: 700;
  transition: background .15s ease;
}
.feature-cta:hover { background: var(--violet-bright); }

.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px; border-radius: 2px;
  background: var(--lime); color: #0d0718;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.2;
}
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #0d0718; }
.offline-pill {
  display: inline-flex; align-items: center;
  padding: 3px 6px; border-radius: 2px;
  background: rgba(10, 10, 12, .82); border: 1px solid var(--line);
  color: #b9b9c2; font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
}

.arc-chat {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; max-height: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
}
.arc-chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.arc-chat-head h2 { font-size: 12.5px; display: flex; align-items: center; gap: 7px; letter-spacing: -.02em; }
.arc-chat-head p { margin: 3px 0 0; font-size: 10px; color: var(--dim); }
.arc-chat-online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(169, 123, 255, .7); }
.arc-chat-count {
  padding: 3px 6px; border-radius: 2px;
  border: 1px solid rgba(169, 123, 255, .3);
  background: rgba(169, 123, 255, .08);
  color: var(--lime); font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
}
.arc-chat-profile {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.arc-chat-avatar {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: #fff; font-weight: 700; font-size: 11px;
  background: linear-gradient(135deg, var(--violet), #c86fd7);
}
.arc-chat-profile strong { display: block; font-size: 11px; font-weight: 600; }
.arc-chat-profile small { display: block; margin-top: 1px; font-size: 9.5px; color: var(--dim); }
.arc-chat-messages {
  flex: 1 1 auto; min-height: 160px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 6px 8px;
  scrollbar-width: thin;
  scrollbar-color: #2c2442 transparent;
}
.arc-chat-messages::-webkit-scrollbar { width: 6px; }
.arc-chat-messages::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.arc-chat-messages > div,
.arc-chat-line {
  margin: 0;
  padding: 6px 6px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  border-radius: 0;
  background: transparent;
  font-size: 11.5px; line-height: 1.45; color: #e2dcf2;
  overflow-wrap: anywhere;
}
.arc-chat-line strong { color: var(--violet-bright); font-weight: 600; }
.arc-chat-empty { color: var(--dim); font-size: 11px; margin: 0; padding: 6px; }
.arc-chat-composer {
  display: flex; gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.arc-chat-composer input {
  flex: 1; min-width: 0;
  padding: 8px 9px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  font-size: 11px;
}
.arc-chat-composer button {
  width: 34px; flex: none;
  border: 0; border-radius: var(--radius-sm);
  background: var(--violet);
  color: #fff; font-size: 12px; font-weight: 700;
}
.arc-chat-composer button:disabled { opacity: .4; cursor: not-allowed; }
.arc-chat-note { margin: 0; padding: 0 10px 9px; color: #5f5f68; font-size: 9px; }

/* ---------- 10. Stream cards & grids ---------- */
.stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
}
.stream-card {
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.stream-card:hover {
  transform: translateY(-2px);
  border-color: var(--lime);
  background: var(--surface-2);
}
.stream-thumb {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden; background: var(--bg-elev);
}
.stream-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(5, 5, 7, .55));
}
.stream-thumb img, .channel-thumb-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.stream-card:hover .stream-thumb img { transform: scale(1.03); }
/* Live cards render the stream itself in the thumb slot. */
.channel-thumb-video { object-fit: cover; pointer-events: none; }
.thumb-one { background: radial-gradient(circle at 56% 44%, #5a3b9e, #211635 62%, #120e18); }
.thumb-two { background: radial-gradient(circle at 60% 40%, #7b3a6c, #321f42 58%, #17111f); }
.thumb-three { background: radial-gradient(circle at 50% 45%, #2a6b5b, #17323a 58%, #10171b); }
.thumb-four { background: radial-gradient(circle at 50% 40%, #7d5738, #3b2438 56%, #1b1420); }
.thumb-art {
  position: relative; z-index: 1;
  font-size: 2.2rem; color: rgba(255, 255, 255, .78);
}
.thumb-overlay-label {
  position: absolute; left: 9px; bottom: 8px; z-index: 2;
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
}
.stream-thumb .live-pill, .stream-thumb .offline-pill { position: absolute; top: 7px; left: 7px; z-index: 2; }
.viewer-count {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px; border-radius: 2px;
  background: rgba(5, 5, 7, .82);
  color: #f4f1fb; font-size: 9.5px; font-weight: 600;
}
.stream-card-meta { display: flex; align-items: center; gap: 9px; padding: 9px 10px; min-width: 0; }
.stream-avatar {
  position: relative; width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.stream-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-lilac { background: linear-gradient(135deg, #4b3a72, #8b6cc9); }
.avatar-pink { background: linear-gradient(135deg, #7a345f, #d176a8); }
.avatar-mint { background: linear-gradient(135deg, #1f5b48, #6fbc9d); }
.avatar-gold { background: linear-gradient(135deg, #6a532c, #d9b076); color: #1b1408; }
.stream-card-copy { display: grid; gap: 0; min-width: 0; flex: 1; }
.stream-card-copy strong {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stream-card-copy small {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stream-card-copy .category-label { color: var(--dim); font-size: 10px; }
.card-more { color: var(--dim); font-size: 13px; flex: none; }
.discovery-empty {
  grid-column: 1 / -1;
  padding: 26px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 12px;
}
.empty-state {
  grid-column: 1 / -1;
  padding: 30px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 11. Filters & categories ---------- */
.home-filter-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 14px; }
.filter-chip {
  padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: #b9b9c2; font-size: 11px; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--line-strong); }
.filter-chip.active {
  color: #0d0718; background: var(--lime); border-color: var(--lime);
}
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; }
.category-card {
  position: relative; overflow: hidden;
  min-height: 132px; padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s ease, transform .15s ease;
}
.category-card:hover { transform: translateY(-2px); border-color: var(--lime); }
.category-icon {
  position: absolute; top: 12px; right: 13px;
  font-size: 21px; color: #6f6f79;
  transition: color .15s ease;
}
.category-card:hover .category-icon { color: var(--lime); }
.category-card strong { font-size: 13.5px; font-family: var(--font-display); }
.category-card small { font-size: 10.5px; color: var(--dim); }
.cat-game { background: linear-gradient(150deg, rgba(169, 214, 58, .14), var(--surface-2) 62%); }
.cat-chat { background: linear-gradient(150deg, rgba(209, 118, 168, .13), var(--surface-2) 62%); }
.cat-music { background: linear-gradient(150deg, rgba(96, 165, 250, .12), var(--surface-2) 62%); }
.cat-create { background: linear-gradient(150deg, rgba(217, 176, 118, .12), var(--surface-2) 62%); }
.cat-irl { background: linear-gradient(150deg, rgba(111, 188, 157, .12), var(--surface-2) 62%); }
.cat-learn { background: linear-gradient(150deg, rgba(169, 123, 255, .09), var(--surface-2) 62%); }

/* API categories: real artwork from CP Elora's category list and IGDB imports. */
.category-card.has-art { padding: 0; justify-content: flex-end; background: var(--surface-2); }
.category-card.has-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.category-card.has-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .05) 30%, rgba(9, 9, 11, .9)); }
.category-card.has-art strong,
.category-card.has-art small { position: relative; z-index: 1; padding: 0 12px; }
.category-card.has-art small { padding-bottom: 12px; color: #d4cbe6; }
.category-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.category-art-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-height: 172px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.category-art-card:hover { border-color: var(--lime); transform: translateY(-2px); }
.category-art-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .84; }
.category-art-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 11, .05) 34%, rgba(9, 9, 11, .92)); }
.category-art-card span,
.category-art-card small { position: relative; z-index: 1; padding: 0 10px; }
.category-art-card span { font-size: 12.5px; font-weight: 700; font-family: var(--font-display); overflow-wrap: anywhere; }
.category-art-card small { padding-bottom: 10px; font-size: 10px; color: #b9b9c4; }

/* ---------- 12. Creator banner ---------- */
.creator-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.creator-banner-copy { padding: clamp(26px, 3.6vw, 40px); }
.creator-banner h2 {
  font-size: clamp(1.65rem, 2.7vw, 2.4rem);
  line-height: 1.06; letter-spacing: -.05em;
  margin: 9px 0 8px;
  max-width: 16ch;
}
.creator-banner p { color: var(--muted); font-size: 12.5px; max-width: 44ch; margin: 0 0 18px; }
.creator-banner-side {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
  background: var(--lime); color: #0d0718;
}
.creator-banner-label { font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.creator-banner-big {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 700; line-height: .86; letter-spacing: -.06em;
}
.creator-banner-arrow {
  position: absolute; right: 20px; bottom: 16px;
  font-size: 20px; font-weight: 700;
}

/* ---------- 13. Browse ---------- */
.page-head { padding-top: clamp(34px, 4.4vw, 56px); padding-bottom: 4px; }
.page-head h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.06em;
  margin: 12px 0;
  max-width: 18ch;
}
.page-head > p { max-width: 600px; color: var(--muted); font-size: 13.5px; margin: 0; }
.browse-tools { display: flex; gap: 8px; margin-top: 22px; max-width: 760px; }
.searchbox {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--dim);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(169, 123, 255, .14); }
.searchbox > span { font-size: 16px; color: var(--lime); line-height: 1; }
.searchbox input {
  flex: 1; min-width: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 12px 0 !important;
  font-size: 13px; outline: none;
}
.browse-tools select, .discovery-filters select, .discovery-filters input {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field); color: var(--text);
  padding: 11px 12px; font-size: 12.5px; outline: none;
  min-height: 42px;
}
.browse-tools select:focus, .discovery-filters select:focus, .discovery-filters input:focus {
  border-color: var(--lime); box-shadow: 0 0 0 2px rgba(169, 123, 255, .14);
}
.discovery-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.discovery-filters label {
  display: grid; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
.discovery-filters .button { min-height: 42px; }
.filter-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim);
}
.filter-summary #resultCount { color: var(--text); font-weight: 600; }
.browse-section { padding-top: 22px; padding-bottom: 8px; }
.browse-section .section-heading { margin-bottom: 16px; }
.tag-preview { color: #8a81a6 !important; font-size: 9.5px !important; }

/* ---------- 14. Auth ---------- */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  min-height: calc(100vh - 65px);
}
.auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 5vw, 72px);
  border-right: 1px solid var(--line);
  background:
    radial-gradient(560px 380px at 88% 8%, rgba(169, 214, 58, .18), transparent 60%),
    radial-gradient(480px 360px at 4% 96%, rgba(169, 123, 255, .06), transparent 58%),
    var(--bg-elev);
}
.auth-aside h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1; letter-spacing: -.06em;
  margin: 16px 0 14px;
  max-width: 12ch;
}
.auth-aside > p { color: var(--muted); max-width: 42ch; font-size: 13.5px; }
.auth-points { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.auth-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: #c9c9d2; }
.auth-points .tick {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center;
  border-radius: 3px; background: var(--lime-soft);
  color: var(--lime); font-size: 10px; font-weight: 800;
}
.auth-art { position: relative; margin-top: 36px; height: 132px; }
.auth-art-card {
  position: absolute; left: 0; top: 0;
  width: min(290px, 92%);
  padding: 11px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  animation: floaty 7s ease-in-out infinite;
}
.auth-art-card:nth-child(2) {
  left: 60px; top: 40px; width: min(240px, 78%);
  background: #131318;
  animation-delay: -3s;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.auth-art-row { display: flex; align-items: center; gap: 9px; }
.auth-art-row .stream-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.auth-art-row strong { display: block; font-size: 11px; font-weight: 600; }
.auth-art-row small { display: block; font-size: 9.5px; color: var(--dim); }
.auth-art-bar { height: 3px; border-radius: 2px; margin-top: 9px; background: #232329; overflow: hidden; }
.auth-art-bar span { display: block; height: 100%; width: 62%; background: var(--lime); }
.auth-panel { display: grid; place-items: center; padding: clamp(26px, 4vw, 54px) clamp(16px, 4vw, 48px); }
.auth-card {
  width: min(410px, 100%);
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.auth-mark {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--lime); color: #0d0718;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  margin-bottom: 18px;
}
.auth-card h1, .auth-card .auth-title {
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.06; letter-spacing: -.05em;
  margin: 8px 0 6px;
}
.auth-card > p { color: var(--muted); font-size: 12.5px; }
.auth-form { display: grid; gap: 13px; margin-top: 20px; }
.auth-form label { display: grid; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #c9c9d2; }
.auth-form input { padding: 11px 12px; font-size: 13px; }
.auth-form .button { margin-top: 3px; }
.auth-switch { text-align: center; margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.auth-switch a { color: var(--lime); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }
.auth-card .notice { font-size: 11px; }

/* ---------- 15. Drops ---------- */
.drops-layout {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: 12px; padding-top: 20px; padding-bottom: 8px;
}
.drop-feature {
  overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.drop-art {
  position: relative; height: 210px; overflow: hidden;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(255, 255, 255, .025) 43px 44px),
    radial-gradient(circle at 62% 38%, rgba(169, 123, 255, .12), transparent 58%),
    radial-gradient(circle at 22% 78%, rgba(169, 214, 58, .16), transparent 54%),
    #0c0914;
}
.drop-art::before, .drop-art::after {
  content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%;
  width: 230px; height: 230px;
}
.drop-art::after { width: 340px; height: 150px; transform: rotate(38deg); }
.drop-star { font-size: 4.6rem; color: var(--lime); text-shadow: 0 0 40px rgba(169, 123, 255, .35); }
.drop-art-label {
  position: absolute; right: 14px; bottom: 12px;
  font-size: 9px; letter-spacing: .16em; line-height: 1.5; text-align: right;
  color: rgba(255, 255, 255, .72);
}
.drop-body { padding: clamp(18px, 2.4vw, 26px); }
.drop-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; }
.drop-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 10px 0 8px; }
.drop-body p { font-size: 12.5px; color: var(--muted); max-width: 60ch; }
.progress-label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-top: 20px; }
.progress-label strong { color: var(--text); font-weight: 600; }
.progress { height: 6px; margin: 7px 0 20px; border-radius: 1px; background: #232329; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--lime); }
.drops-side { align-self: start; }
.drops-side h3 { font-size: 18px; margin: 8px 0 2px; }
.step { display: flex; gap: 11px; margin-top: 18px; }
.step > span {
  font-family: var(--font-display); font-weight: 700;
  color: var(--lime); font-size: 12px; padding-top: 1px;
}
.step strong { display: block; font-size: 12px; font-weight: 600; }
.step p { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

/* ---------- 16. Studio / admin base ---------- */
.studio-page { padding-top: clamp(30px, 3.6vw, 46px); padding-bottom: 26px; }
.studio-welcome { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 8px 0 22px; }
.studio-welcome h1, .studio-page > h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 7px 0; }
.studio-welcome p { margin: 0; }
.studio-avatar {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); color: #0d0718;
  background: var(--lime);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-card {
  display: grid; gap: 4px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.stat-card > span { color: var(--dim); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stat-card > strong { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.stat-card small { font-size: 10.5px; color: var(--muted); }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.studio-page .panel { background: var(--surface-2); }
.studio-page input, .studio-page textarea, .studio-page select { width: 100%; }
.studio-page .panel h2 { font-size: 17px; }
.quick-actions { display: grid; gap: 4px; margin-top: 12px; }
.quick-actions a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.quick-actions a:hover { background: var(--surface-2); border-color: var(--line); }
.quick-actions a > span {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--lime-soft); color: var(--lime); font-size: 14px;
}
.quick-actions a div { flex: 1; display: grid; gap: 1px; }
.quick-actions strong { font-size: 12px; font-weight: 600; }
.quick-actions small { font-size: 10px; color: var(--dim); }
.quick-actions b { color: var(--lime); }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.admin-table th {
  padding: 9px 7px; border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.admin-table td { padding: 11px 7px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.studio-nav { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 24px 0 18px; }
.studio-nav a { padding: 11px 0; color: var(--muted); white-space: nowrap; font-size: 12px; }
.studio-nav a.active, .studio-nav a:hover { color: var(--text); border-bottom: 2px solid var(--lime); }

/* ---------- 17. Channel page base (page supplies its own skin) ---------- */
.channel-page { padding-top: 22px; padding-bottom: 36px; }
.channel-page .panel { background: rgba(255, 255, 255, .03); }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1180px) {
  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .main-nav.nav-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    padding: 10px clamp(16px, 3vw, 32px) 14px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .5);
    gap: 1px;
  }
  .main-nav.nav-open a { padding: 11px 12px; font-size: 13px; box-shadow: none; border-radius: var(--radius-sm); }
  .main-nav.nav-open a.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--lime); }
  .header-inner { flex-wrap: wrap; }
  .feature-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .home-shell { grid-template-columns: 216px minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .home-shell { grid-template-columns: 70px minmax(0, 1fr); }
  .home-sidebar { padding: 14px 7px; }
  .home-sidebar .sidebar-link { justify-content: center; padding: 10px 5px; }
  .home-sidebar .sidebar-link span:not(.side-new-badge),
  .home-sidebar .sidebar-heading,
  .home-sidebar .sidebar-channels,
  .home-sidebar .sidebar-show-more,
  .home-sidebar .sidebar-divider,
  .home-sidebar .side-new-badge { display: none; }
  .arc-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .feature-layout { grid-template-columns: minmax(0, 1fr); }
  .arc-chat { max-height: 420px; min-height: 320px; }
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 34px 22px; }
  .auth-art { display: none; }
  .drops-layout { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .header-inner { min-height: 58px; gap: 8px; padding: 7px 14px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 28px; height: 28px; }
  .header-search { order: 5; flex: 1 1 100%; max-width: none; margin: 0 0 7px; }
  .nav-actions { margin-left: auto; }
  .nav-actions .button-quiet { display: none; }
  /* Creator Studio is the only way into the studio once the header nav link is gone,
     so it stays reachable when the rest of the quiet buttons collapse. */
  .nav-actions .nav-creators { display: inline-flex; }
  /* Installing is the one quiet action that stays on phones: iPhone and iPad have no
     install event, so this button (Share > Add to Home Screen) is the only in-site hint. */
  .nav-actions .pwa-install { display: inline-flex; }
  .home-sidebar { display: none; }
  .home-shell { grid-template-columns: minmax(0, 1fr); }
  .home-main { padding: 0 14px 44px; }
  .arc-hero { padding: 26px 0 26px; }
  .arc-hero h1 { max-width: none; font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-art { display: none; }
  .creator-banner { grid-template-columns: minmax(0, 1fr); }
  .creator-banner-side { display: none; }
  .page-head { padding-top: 30px; }
  .browse-tools { flex-direction: column; }
  .browse-tools select { width: 100%; }
  .discovery-filters label { flex: 1 1 140px; }
  .discovery-filters select, .discovery-filters input { width: 100%; }
  .feature-copy strong { white-space: normal; }
  .arc-feature-info { flex-wrap: wrap; }
  .arc-feature-info .feature-cta { margin-left: auto; }
  .footer-top { gap: 26px; }
  .footer-cols { grid-template-columns: repeat(4, minmax(104px, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 28px); }
  .footer-inner { width: calc(100% - 30px); padding: 32px 0 20px; }
  .stream-grid { grid-template-columns: minmax(0, 1fr); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card { min-height: 116px; padding: 12px; }
  .category-icon { font-size: 19px; top: 10px; right: 11px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .auth-aside { padding: 28px 18px; }
  .auth-aside h1 { font-size: 2.1rem; }
  .auth-panel { padding: 20px 14px 30px; }
  .auth-card { padding: 20px; }
  .drop-art { height: 170px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-welcome { align-items: flex-start; }
  .arc-chat { min-height: 300px; max-height: 400px; }
  .footer-cols { gap: 20px; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (max-width: 560px) {
  .header-inner .brand-lock { display: none; }
  .header-inner .brand-mark { display: block; }
  .brand-lock-footer { height: 48px; }
}
@media (max-width: 380px) {
  .header-inner { padding: 7px 11px; }
  .brand-word { display: none; }
  .nav-actions .button { padding: 8px 10px; font-size: 11px; }
}
/* On phones the greeting is the first thing to go: Creators and Log out need the room. */
@media (max-width: 430px) {
  .nav-actions .muted { display: none; }
}
/* Touch targets: keep small controls comfortable to tap on phones. */
@media (max-width: 720px) {
  .header-search button,
  .nav-actions .button,
  .arc-viewer-name,
  .arc-chat-username,
  .channel-tabs a,
  .notification-menu button { min-height: 36px; }
  .arc-viewer-name { padding: 6px 4px; }
  .arc-chat-username { padding: 4px 2px; }
  .footer-nav a, .footer-links a, .footer-col a { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Channel reporting + rules link */
.channel-tab-link { display: inline-flex; align-items: center; padding: 10px 2px; color: var(--muted); font-size: 12px; text-decoration: none; border-bottom: 2px solid transparent; }
.channel-tab-link:hover { color: var(--text); border-bottom-color: var(--lime); }
.channel-report-link { margin-top: 10px; padding: 6px 2px; background: none; border: 0; color: var(--dim); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.channel-report-link:hover { color: var(--text); }
#reportChannelDialog { width: min(480px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); padding: 22px; }
#reportChannelDialog::backdrop { background: rgba(4, 4, 6, .72); }
#reportChannelDialog h2 { margin: 0 0 4px; font-size: 1.15rem; }
#reportChannelDialog label { display: grid; gap: 7px; margin: 12px 0; font-size: .85rem; font-weight: 600; }
#reportChannelDialog select, #reportChannelDialog textarea { width: 100%; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: inherit; }
.report-dialog-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Admin Control Room — account edit + delete dialogs */
#adminAccountDialog, #adminDeleteDialog { width: min(520px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); padding: 22px; }
#adminAccountDialog::backdrop, #adminDeleteDialog::backdrop { background: rgba(4, 4, 6, .72); }
#adminAccountDialog h2, #adminDeleteDialog h2 { margin: 0 0 4px; font-size: 1.15rem; }
#adminAccountDialog label, #adminDeleteDialog label { display: grid; gap: 7px; margin: 12px 0; font-size: .85rem; font-weight: 600; }
#adminAccountDialog input, #adminAccountDialog select, #adminDeleteDialog input { width: 100%; padding: 10px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: inherit; }
#adminDeleteDialog[open] { border-color: #7d2233; }
.admin-danger { border-color: #7d2233; color: #ff9aa6; }
.admin-danger:hover { border-color: #ff9aa6; color: #ffd7dd; }

/* Policy / support pages */
.policy-head { max-width: 820px; }
.policy-head h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); }
.policy-meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.policy { display: grid; gap: 14px; max-width: 900px; padding-bottom: 40px; }
.policy .panel { padding: 20px 22px; }
.policy h2 { margin: 0 0 8px; font-size: 1.02rem; }
.policy p, .policy li { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.policy ul, .policy ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.policy strong { color: var(--text); }
.policy a { color: var(--lime); }
.policy code { background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.policy .notice { margin-top: 14px; }
.policy-faq { display: grid; gap: 4px; margin: 8px 0 0; }
.policy-faq dt { font-weight: 700; font-size: 13.5px; margin-top: 10px; }
.policy-faq dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Site language picker */
.lang-picker { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.lang-picker select { max-width: 138px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
.lang-picker select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lang-label { display: inline-flex; align-items: center; font-size: 14px; }
.lang-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lang-note { position: absolute; top: calc(100% + 8px); right: 0; width: 232px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 11px; line-height: 1.5; opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 60; }
.lang-picker:hover .lang-note, .lang-picker:focus-within .lang-note { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .lang-picker select { max-width: 96px; } }

/* Chat translation: the language a message was written in, and what it says in the
   streamer's language when the two are not the same. Shared by every chat on the site. */
.chat-lang-tag { display: inline-flex; align-items: center; margin: 0 5px 0 2px; padding: 1px 6px; border-radius: 999px; background: #2a2140; color: #cbbdf5; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.chat-translation { display: block; margin: 2px 0 0; color: #c8bdea; font-size: 12px; font-style: italic; overflow-wrap: anywhere; }
/* The time each message was sent, beside the name. Tabular figures keep a column of
   timestamps from shifting as the digits change. */
.chat-time { margin: 0 5px 0 3px; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; }

/* Live notification bell */
.notif { position: relative; display: inline-flex; }
.notif-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 15px; cursor: pointer; }
.notif-button:hover, .notif-button[aria-expanded="true"] { border-color: var(--muted); }
.notif-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--lime); color: #101010; font-size: 10px; font-weight: 800; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); z-index: 60; }
.notif-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.notif-head a { color: var(--lime); font-size: 11px; }
.notif-item { display: flex; gap: 9px; align-items: center; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: var(--text); }
.notif-item:hover { background: rgba(255, 255, 255, .05); }
.notif-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--surface-2); font-size: 12px; }
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-copy { display: grid; min-width: 0; }
.notif-copy strong { font-size: 12px; }
.notif-copy small { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Account notices (a team invitation, for instance) sit above the live channels. */
.notif-head-sub { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.notif-account { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.notif-item.is-unread { background: rgba(255, 255, 255, .06); }
.notif-item.is-unread strong::before { content: '·'; margin-right: 4px; color: var(--lime); font-weight: 800; }
.notif-when { color: var(--dim); opacity: .8; }
@media (max-width: 520px) { .notif-panel { right: -46px; width: min(280px, calc(100vw - 28px)); } }

/* Following page */
.following-head, .rising-head { max-width: 860px; }
.following-section, .rising-section { padding-bottom: 8px; }
.following-how, .rising-rules { padding-bottom: 40px; }
.following-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.following-card.is-live { border-color: rgba(169, 123, 255, .35); }
.following-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #14141a; }
.following-thumb img { width: 100%; height: 100%; object-fit: cover; }
.following-thumb .thumb-art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; opacity: .6; }
.following-body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.following-name { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.following-name .stream-avatar { width: 26px; height: 26px; font-size: 11px; }
.following-name strong { font-size: 13.5px; }
.following-title { margin: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.following-meta { margin: 0; font-size: 11px; }
.following-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.following-bell { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.following-bell select { padding: 5px 7px; border-radius: 7px; border: 1px solid var(--line); background: #0d0d11; color: var(--text); font-size: 11px; }
.following-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.following-section .stream-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
@media (max-width: 560px) { .following-card { grid-template-columns: minmax(0, 1fr); } .following-section .stream-grid { grid-template-columns: minmax(0, 1fr); } }

/* Rising page */
.rising-rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rising-rules-grid .panel { padding: 18px 20px; }
.rising-rules-grid h2 { font-size: 14px; margin: 0 0 6px; }
.rising-rules-grid p, .rising-rules-grid li { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.rising-rules-grid ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.rising-badge { position: absolute; right: 7px; bottom: 7px; padding: 3px 7px; border-radius: 5px; background: rgba(169, 123, 255, .16); border: 1px solid rgba(169, 123, 255, .45); color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
@media (max-width: 720px) {
  .following-bell select, .following-actions .button { min-height: 36px; }
}

/* CP Elora role badges */
.rill-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .22);
  vertical-align: -5px;
  margin: 0 2px 0 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 3px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .42), 0 0 7px var(--badge-glow, transparent);
}
/* A glass highlight across the top, so a badge catches the light like the artwork around it. */
.rill-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 56%); pointer-events: none; }
.rill-badge svg { width: 13px; height: 13px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.rill-badge[hidden] { display: none !important; }
.rill-badge-streamer { --badge-glow: rgba(142, 78, 255, .45); color: #fff; background: linear-gradient(160deg, #a763ff 0%, #6a25c9 58%, #4a1099 100%); border-color: rgba(214, 187, 255, .7); }
.rill-badge-partner { color: #ebf9ff; background: linear-gradient(150deg, #35a8dd, #146b96); border-color: rgba(150, 225, 255, .6); }
.rill-badge-affiliate { color: #eef6ff; background: linear-gradient(150deg, #5577a8, #33496b); border-color: rgba(170, 200, 240, .5); }
.rill-partner-tick { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; background: #6fd4ff; color: #062435; font-size: 10px; font-weight: 900; line-height: 1; vertical-align: -2px; flex: 0 0 14px; box-shadow: 0 0 0 1px rgba(111, 212, 255, .35); }
.rill-partner-tick:hover { background: #9ae3ff; }
.rill-badge-staff { color: #dffbff; background: linear-gradient(150deg, #118fae, #0b5f7a); border-color: rgba(126, 231, 255, .5); }
/* Bot: indigo, so the automated announcements read differently from a person's badge. */
.rill-badge-bot { --badge-glow: rgba(96, 120, 255, .4); color: #eef1ff; background: linear-gradient(150deg, #5a6bff, #2b2f8f); border-color: rgba(170, 180, 255, .6); }
.rill-badge-mod { --badge-glow: rgba(40, 192, 112, .4); color: #f2fff7; background: linear-gradient(160deg, #38d489 0%, #16884c 58%, #0c5f35 100%); border-color: rgba(160, 255, 205, .62); }
.rill-badge-vip { --badge-glow: rgba(255, 74, 176, .4); color: #fff; background: linear-gradient(160deg, #ff6ec7 0%, #cf1a91 58%, #8f0a63 100%); border-color: rgba(255, 176, 226, .65); }
/* OG is gold, so the mark is dark: a cream star on gold had almost no contrast. */
.rill-badge-og { --badge-glow: rgba(255, 196, 60, .42); color: #3a2400; background: linear-gradient(160deg, #ffd85e 0%, #e0a413 58%, #a06f00 100%); border-color: rgba(255, 230, 160, .78); }
/* Founding Booster: the five seats a channel hands out first, in copper like the rest of
   the support surfaces. */
.rill-badge-founder { color: #2a1503; background: linear-gradient(150deg, #ffb066, #d97a2c); border-color: rgba(255, 205, 150, .65); }
/* Leaderboard medals, 1st through 3rd, for Dust given and Boosts sent. */
.rill-badge-dust-top-1, .rill-badge-boost-top-1 { color: #2c1d02; background: linear-gradient(150deg, #ffd977, #d9a021); border-color: rgba(255, 226, 150, .7); }
.rill-badge-dust-top-2, .rill-badge-boost-top-2 { color: #1a1d24; background: linear-gradient(150deg, #e6ecf7, #a8b3c6); border-color: rgba(226, 234, 247, .7); }
.rill-badge-dust-top-3, .rill-badge-boost-top-3 { color: #2a1608; background: linear-gradient(150deg, #e5a981, #b8724a); border-color: rgba(238, 190, 160, .65); }
.chat-line .rill-badge { margin-top: 2px; }
.chat-twitch-tag { display: inline-flex; align-items: center; margin-right: 4px; padding: 1px 5px; border-radius: 4px; background: #9146ff; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .4px; line-height: 1.5; }
.chat-twitch-linked { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(145, 70, 255, .16); color: #c9b3ff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.arc-viewer-chip .rill-badge { margin-left: 3px; }
.arc-community-section summary .rill-badge { vertical-align: -3px; }

/* ---------- CP Elora palette: warm accents on live and support surfaces ---------- */
.tag-live { color: var(--copper-bright); border-color: rgba(255, 138, 60, .4); background: rgba(255, 138, 60, .1); }
.live-pill { background: var(--copper); color: #180b02; }
.live-pill i { background: #180b02; }
.sidebar-live-dot, .arc-chat-online-dot, .monitor-dot {
  background: var(--copper);
  box-shadow: 0 0 8px rgba(255, 138, 60, .7);
}
.notif-count { background: var(--copper); color: #180b02; }
.rising-badge { background: rgba(255, 138, 60, .14); border-color: rgba(255, 138, 60, .4); color: var(--copper-bright); }
::selection { background: var(--lime); color: #0d0718; }

/* ---------- 13. Category search, category pages, home polish ---------- */

/* Compact hero: live content first, marketing second, the way Kick and Twitch
   lead with streams instead of a poster. */
.arc-hero-compact { padding: 16px 0 26px; gap: 0; }
.arc-hero-compact h1 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); max-width: 24ch; margin: 9px 0 10px; }
.arc-hero-compact .hero-copy p { font-size: 13px; max-width: 64ch; margin: 0 0 16px; }

/* Game and category search, shared by the homepage and the category pages. */
.category-search { position: relative; margin: 0 0 14px; max-width: 560px; }
.category-search-field {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color .15s ease;
}
.category-search-field:focus-within { border-color: var(--lime); }
.category-search-field svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.category-search-field input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 0 !important; color: var(--text); font-size: 12.5px; }
.category-search-field input:focus { outline: none; }
.category-search-field input::-webkit-search-cancel-button { filter: invert(.6); }
.category-search-results {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 372px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); box-shadow: 0 22px 52px rgba(0, 0, 0, .6);
}
.cc-row { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); }
.cc-row:hover { background: rgba(255, 255, 255, .045); }
.cc-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; }
.cc-art {
  width: 36px; height: 48px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(150deg, #2a2140, #140f21);
  color: #cfc6e6; font-family: var(--font-display); font-size: 15px; font-weight: 700;
}
.cc-art img { width: 100%; height: 100%; object-fit: cover; }
.cc-copy { display: grid; gap: 1px; min-width: 0; }
/* A row in the picker can also be a choice rather than a link: the Creator Studio's category
   field has to fill a form in, not navigate away from it. */
.cc-pick {
  background: transparent; border: 0; width: 100%; text-align: left;
  cursor: pointer; color: inherit; font: inherit;
}
.cc-pick:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 6px; }
.cc-copy strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-copy small { font-size: 10.5px; color: var(--dim); }
.cc-empty { margin: 0; padding: 10px; color: var(--dim); font-size: 11.5px; }
.cc-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 4px;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.cc-follow {
  flex: none; margin-right: 6px; height: 28px; padding: 0 12px;
  border: 0; border-radius: 3px;
  background: var(--violet); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease;
}
.cc-follow:hover { background: var(--violet-bright); }
.cc-follow.is-following { background: #2c2442; color: #ded5f2; }
.cc-follow:disabled { opacity: .6; cursor: not-allowed; }
.cc-follow-lg { height: 38px; padding: 0 22px; margin: 0; font-size: 12.5px; }

/* Category page: artwork banner, follower count, then the channels on it. */
.category-head { padding-top: 18px; }
.category-crumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--dim); font-size: 11px; font-weight: 600; }
.category-crumbs a { color: var(--muted); }
.category-crumbs a:hover { color: var(--lime); }
.category-banner { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.category-banner-art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; background-repeat: no-repeat; opacity: .38; }
.category-banner-art.has-art { opacity: .42; }
.category-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(9, 7, 16, .96) 16%, rgba(9, 7, 16, .58) 62%, rgba(9, 7, 16, .92)); }
.category-banner-copy { position: relative; z-index: 1; padding: clamp(22px, 3.4vw, 38px); }
.category-banner h1 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -.05em; margin: 8px 0 6px; }
.category-meta { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.category-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.category-follow-note { margin: 10px 0 0; color: var(--dim); font-size: 11px; }
.category-art-card.no-art { background: linear-gradient(150deg, #241b3a, #140f21); }
.category-art-glyph { position: relative; z-index: 1; margin-bottom: auto; padding: 14px 10px 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #b7a8d8; }

/* Portrait tiles, like a storefront: box art reads better than a wide crop. */
.category-card.has-art { aspect-ratio: 3 / 4; min-height: 0; }
.category-art-card { aspect-ratio: 3 / 4; min-height: 0; }
.category-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }

/* Denser, calmer card grid across the site. */
.stream-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }

/* ---------- 19. Flat finish ---------- */
/* The last pass, and the only one that adds decoration: it removes it. Surfaces are one
   shade with a hairline border, hover moves nothing and lights nothing up, and the accent
   is spent on the primary action, the live mark and the current page only. Every colour
   here is a token, so the light theme repaints all of it without a second set of rules. */
.arc-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
.main-nav a { white-space: nowrap; }
.arc-footer { background: transparent; border-top: 1px solid var(--line); }

.panel, .stat-card, .arc-feature, .drop-feature, .category-banner, .arc-panel-card,
.chat-panel, .creator-page-main .panel, .creator-page-main .stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.stream-card, .category-card, .arc-recommended-card, .arc-panels-edit-card, .category-art-card {
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
.stream-card:hover, .category-card:hover, .arc-recommended-card:hover, .category-art-card:hover,
.arc-viewer-chip:hover { border-color: var(--line-strong); box-shadow: none; }
.arc-viewer-chip:hover { border-color: var(--line-strong); box-shadow: none; }

.home-sidebar { background: transparent; border-right: 1px solid var(--line); }
.home-sidebar .sidebar-link.active {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--lime);
  color: var(--text);
}
.creator-sidebar { background: transparent; border-right: 1px solid var(--line); }
.creator-page-shell, .creator-page-main { background-color: var(--bg); }

.sidebar-live-dot, .live-pill i, .sidebar-status i { box-shadow: none; }
.live-pill {
  background: var(--red);
  border: 1px solid var(--red);
  color: #fff;
  box-shadow: none;
}
.tag-live { border-color: var(--line); background: var(--surface-2); color: var(--lime); }
.button-outline:hover, .button-quiet:hover { border-color: var(--line-strong); box-shadow: none; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-soft);
}
.channel-player {
  border: 1px solid var(--line);
  box-shadow: none;
}
.channel-tabs button.active, .channel-tab-link.active {
  color: var(--text);
  border-bottom-color: var(--lime);
  text-shadow: none;
}
.chat-level { border: 1px solid var(--line); }
.arc-viewer-chip { border-color: var(--line); }
.arc-viewer-drawer, .arc-user-menu {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}
.category-art-card.no-art { background: var(--surface-2); }
.feature-cta, .sidebar-heading-link, .auth-switch a { color: var(--lime); }
.feature-cta:hover, .admin-table tbody tr:hover { background: var(--surface-2); }
.notice, .admin-table th { border-color: var(--line); }
.notice { border-left: 2px solid var(--lime); background: var(--surface); }
.pill, .tag { border-color: var(--line); background: var(--surface-2); }
.progress span, .goal-bar i { background: var(--lime); box-shadow: none; }
.arc-feature-placeholder, .hero-monitor-screen, .monitor-screen, .drop-art, .feature-placeholder {
  background-image: none;
  background-color: var(--surface-2);
}
.arc-feature-media::after, .feature-media::after { background-image: none; }
.arc-header .brand-lock { filter: none; }
@media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }