/* ==========================================================================
   CP Elora — presentation layer
   --------------------------------------------------------------------------
   This file does not introduce a new palette. It reworks the *structure* the
   site is built on: one container width, one spacing scale, one type scale,
   one set of surfaces, and flat decoration instead of textured placeholder
   art. It loads after style.css (and studio.css) so it can settle the details
   those two disagree about without rewriting every page.
   ========================================================================== */

:root{
  /* Spacing scale, used everywhere instead of ad-hoc margins. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  /* Type scale. */
  --t-label:11px; --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:16px; --t-lg:20px; --t-xl:26px;
  /* Surfaces. */
  --card:#101213;
  --card-2:#151819;
  --hair:var(--line);
  --hair-2:var(--line-strong);
  --r-card:10px;
  --r-ctrl:7px;
  --shell:1440px;
}

/* ---------- 1. Baseline ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background-image:none !important;
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.6;
  letter-spacing:-.005em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
main{ background-image:none !important; }
::selection{ background:rgba(169,123,255,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
p{ max-width:72ch; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; }
h1{ font-family:var(--font-display); font-size:clamp(30px,3.4vw,44px); line-height:1.05; letter-spacing:-.035em; font-weight:700; }
h2{ font-family:var(--font-display); font-size:clamp(19px,1.6vw,23px); line-height:1.2; letter-spacing:-.025em; font-weight:700; }
h3{ font-size:var(--t-md); line-height:1.35; letter-spacing:-.01em; font-weight:650; }
a{ text-underline-offset:3px; }

/* ---------- 2. Header ---------- */
.arc-header{
  background:rgba(9,7,15,.92) !important;
  border-bottom:1px solid var(--hair) !important;
  box-shadow:none !important;
}
.header-inner{
  min-height:60px !important;
  gap:var(--s5) !important;
  max-width:var(--shell);
  margin-inline:auto;
  padding:0 clamp(16px,2.2vw,28px) !important;
}
.brand-lock{ height:34px !important; }
.main-nav{ gap:var(--s1) !important; }
.main-nav a{
  padding:7px 11px !important;
  border-radius:var(--r-ctrl) !important;
  font-size:var(--t-sm) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:var(--muted) !important;
  box-shadow:none !important;
}
.main-nav a:hover{ color:var(--text) !important; background:var(--card-2) !important; }
.main-nav a.active{
  color:var(--text) !important;
  background:transparent !important;
  box-shadow:inset 0 -2px 0 var(--lime) !important;
  border-radius:0 !important;
}
.header-search{
  max-width:360px !important;
  min-height:38px !important;
  padding:0 0 0 11px !important;
  border-radius:var(--r-ctrl) !important;
  background:var(--card) !important;
  border-color:var(--hair) !important;
  box-shadow:none !important;
}
.header-search:focus-within{ border-color:var(--hair-2) !important; box-shadow:0 0 0 3px rgba(169,123,255,.12) !important; }
.header-search input{ font-size:var(--t-sm) !important; }
.header-search button{
  align-self:stretch;
  padding:0 14px !important;
  border-radius:0 var(--r-ctrl) var(--r-ctrl) 0 !important;
  background:var(--card-2) !important;
  color:var(--muted) !important;
  font-size:var(--t-xs) !important;
  font-weight:650 !important;
  border:0 !important;
  border-left:1px solid var(--hair) !important;
}
.header-search button:hover{ color:var(--text) !important; background:var(--surface-3) !important; }
.nav-actions{ gap:var(--s2) !important; }
.notif-button{ border-radius:var(--r-ctrl) !important; }

/* ---------- 3. Controls ---------- */
.button{
  min-height:38px;
  padding:0 16px !important;
  border-radius:var(--r-ctrl) !important;
  font-size:var(--t-sm) !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease !important;
}
.button:hover{ transform:none !important; }
.button.small{ min-height:32px; padding:0 12px !important; font-size:var(--t-xs) !important; }
.button-primary{
  background:linear-gradient(180deg,var(--neon-bright),var(--neon)) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#12061f !important;
}
.button-primary:hover{ background:linear-gradient(180deg,#d0b0ff,var(--neon-bright)) !important; color:#12061f !important; }
.button-outline,.button-ghost{ border-color:var(--hair-2) !important; background:transparent !important; color:var(--text) !important; }
.button-outline:hover,.button-ghost:hover{ border-color:var(--lime) !important; color:var(--text) !important; background:rgba(169,123,255,.08) !important; }
.button-quiet{ background:var(--card) !important; border-color:var(--hair) !important; color:var(--text) !important; }
.button-quiet:hover{ background:var(--card-2) !important; border-color:var(--hair-2) !important; }

input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  border-radius:var(--r-ctrl) !important;
  border-color:var(--hair) !important;
  background:var(--card) !important;
  font-size:var(--t-sm) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
  border-color:var(--hair-2) !important;
  box-shadow:0 0 0 3px rgba(169,123,255,.12) !important;
}
.eyebrow{
  font-size:var(--t-label) !important;
  letter-spacing:.14em !important;
  font-weight:700 !important;
  color:var(--muted) !important;
}
.eyebrow .pulse{ background:var(--red) !important; box-shadow:none !important; }
.pill,.tag{
  border-radius:6px !important;
  font-size:var(--t-label) !important;
  letter-spacing:.04em !important;
  font-weight:650 !important;
  padding:3px 8px !important;
  border:1px solid var(--hair) !important;
  background:var(--card) !important;
  color:var(--muted) !important;
}
.live-pill,.offline-pill{
  border-radius:4px !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  font-weight:750 !important;
  padding:2px 6px !important;
}
.live-pill{ background:var(--red) !important; color:#fff !important; box-shadow:none !important; }
.live-pill i{ background:#fff !important; box-shadow:none !important; }

/* ---------- 4. Surfaces ---------- */
.panel,.stream-card,.arc-feature-card,.drop-feature,.arc-chat,.arc-chat-panel,.settings-card,.card{
  background:var(--card) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--r-card) !important;
  box-shadow:none !important;
}
.panel{ padding:var(--s5) !important; }
.panel-heading{ margin-bottom:var(--s4) !important; gap:var(--s4) !important; }
.panel-heading h2{ margin-bottom:2px !important; }

/* Placeholder art: flat surfaces with a single mark, not woven grid textures. */
.arc-feature-placeholder,.hero-monitor-screen,.drop-art,.feature-placeholder{
  background:var(--card-2) !important;
  border:0 !important;
}
.arc-feature-placeholder .glyph,.drop-star{
  font-size:clamp(28px,3vw,38px) !important;
  color:var(--lime) !important;
  text-shadow:none !important;
  opacity:.85;
}
.thumb-one,.thumb-two,.thumb-three,.thumb-four{ background:var(--card-2) !important; }
.stream-thumb::after{ background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(4,4,6,.62)) !important; }
.thumb-art{ font-size:1.5rem !important; color:var(--dim) !important; }
.thumb-overlay-label{
  font-size:10px !important;
  letter-spacing:.1em !important;
  color:var(--dim) !important;
  font-weight:600 !important;
}

/* ---------- 5. Page shell ---------- */
.home-shell{ max-width:var(--shell); margin-inline:auto; }
.home-sidebar{
  border-right:1px solid var(--hair) !important;
  background:transparent !important;
  padding:var(--s5) var(--s4) !important;
  width:232px !important;
  flex-basis:232px !important;
}
.home-main{ padding:var(--s6) clamp(20px,2.4vw,34px) var(--s8) !important; }
.sidebar-heading{
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
  color:var(--dim) !important;
}
.sidebar-heading-link{ color:var(--muted) !important; font-size:10px !important; font-weight:650 !important; }
.sidebar-heading-link:hover{ color:var(--text) !important; }
.sidebar-link,.arcstream-side-nav a{
  min-height:34px !important;
  border-radius:var(--r-ctrl) !important;
  font-size:var(--t-sm) !important;
  color:var(--muted) !important;
  gap:10px !important;
}
.sidebar-link:hover,.arcstream-side-nav a:hover{ background:var(--card) !important; color:var(--text) !important; }
.sidebar-live-dot{ background:var(--red) !important; box-shadow:none !important; }
.sidebar-channel{ border-radius:var(--r-ctrl) !important; padding:5px 6px !important; }
.sidebar-channel:hover{ background:var(--card) !important; }
.sidebar-avatar{ border-radius:7px !important; width:28px !important; height:28px !important; }
.sidebar-divider{ background:var(--hair) !important; margin:var(--s4) 0 !important; }
.sidebar-empty{ font-size:var(--t-xs) !important; color:var(--dim) !important; line-height:1.5 !important; }

/* ---------- 6. Home sections ---------- */
.arc-hero{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--hair) !important;
  border-radius:0 !important;
  padding:0 0 var(--s5) !important;
  margin:0 0 var(--s6) !important;
  box-shadow:none !important;
}
.hero-copy{ max-width:760px; }
.arc-hero h1{ margin:var(--s3) 0 var(--s3) !important; }
.arc-hero p{ color:var(--muted) !important; font-size:var(--t-base) !important; max-width:60ch !important; margin:0 0 var(--s5) !important; }
.gradient-text{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--lime-bright) !important;
}
.hero-actions{ gap:var(--s2) !important; }
.section-heading{
  margin-bottom:var(--s4) !important;
  padding-bottom:var(--s3) !important;
  border-bottom:1px solid var(--hair);
  align-items:flex-end !important;
}
.section-heading h2{ margin:0 0 2px !important; }
.section-heading p{ font-size:var(--t-xs) !important; color:var(--dim) !important; margin:0 !important; }
.text-link{
  font-size:var(--t-xs) !important;
  font-weight:650 !important;
  color:var(--muted) !important;
  letter-spacing:0 !important;
}
.text-link:hover{ color:var(--text) !important; }
.home-section,.home-feature-section{ padding-top:var(--s7) !important; }
.stream-grid{
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr)) !important;
  gap:var(--s4) !important;
}
.stream-card{ overflow:hidden; transition:border-color .15s ease,background .15s ease !important; }
.stream-card:hover{ border-color:var(--hair-2) !important; background:var(--card-2) !important; transform:none !important; }
.stream-card:hover .stream-thumb img{ transform:none !important; }
.stream-card-meta{ padding:var(--s3) !important; gap:10px !important; align-items:flex-start !important; }
.stream-avatar{ width:34px !important; height:34px !important; border-radius:8px !important; font-size:13px !important; font-weight:700 !important; }
.stream-card-copy strong{ font-size:var(--t-sm) !important; font-weight:650 !important; line-height:1.35 !important; }
.stream-card-copy small{ font-size:var(--t-xs) !important; color:var(--muted) !important; line-height:1.4 !important; }
.stream-card-copy .category-label{ font-size:11px !important; color:var(--dim) !important; letter-spacing:.02em !important; }
.viewer-count{
  border-radius:4px !important;
  background:rgba(4,4,6,.78) !important;
  font-size:10px !important;
  font-weight:650 !important;
  padding:2px 5px !important;
  backdrop-filter:blur(4px);
}

/* Feature block: one clear primary stream, secondary information beside it. */
.feature-layout{ gap:var(--s4) !important; align-items:start !important; }
.arc-feature-card{ align-self:stretch !important; }
.arc-feature-info{ padding:var(--s4) !important; gap:var(--s3) !important; align-items:center !important; }
.arc-feature-info strong{ font-size:var(--t-md) !important; font-weight:650 !important; letter-spacing:-.01em; }
.arc-feature-info small{ font-size:var(--t-xs) !important; color:var(--muted) !important; }
.feature-cta{
  min-height:36px;
  padding:0 14px !important;
  border-radius:var(--r-ctrl) !important;
  background:var(--card-2) !important;
  border:1px solid var(--hair-2) !important;
  color:var(--text) !important;
  font-size:var(--t-xs) !important;
  font-weight:650 !important;
  display:inline-flex; align-items:center; gap:6px;
}
.feature-cta:hover{ border-color:var(--lime) !important; background:var(--surface-3) !important; }
.carousel-controls button{
  width:32px; height:32px;
  border-radius:var(--r-ctrl) !important;
  border:1px solid var(--hair) !important;
  background:var(--card) !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1;
}
.carousel-controls button:hover{ border-color:var(--hair-2) !important; color:var(--text) !important; }

/* Chat beside the feature: reads as a panel, not a second page. */
.arc-chat{ display:flex; flex-direction:column; min-height:0 !important; }
.arc-chat-head{ padding:var(--s4) !important; border-bottom:1px solid var(--hair) !important; }
.arc-chat-head h2{ font-size:var(--t-sm) !important; letter-spacing:0 !important; }
.arc-chat-head p{ font-size:var(--t-xs) !important; color:var(--dim) !important; margin:2px 0 0 !important; }
.arc-chat-profile{ padding:var(--s3) var(--s4) !important; border-bottom:1px solid var(--hair) !important; }
.arc-chat-messages{ padding:var(--s4) !important; font-size:var(--t-sm) !important; }
.arc-chat-empty{ font-size:var(--t-xs) !important; color:var(--dim) !important; }
.arc-chat-composer{ padding:var(--s3) !important; gap:var(--s2) !important; border-top:1px solid var(--hair) !important; }
.arc-chat-note{ font-size:10.5px !important; color:var(--dim) !important; }

/* Empty states: a quiet, aligned panel with a line of guidance. */
.empty-state,
#homeLiveGrid > .empty-state,
.home-section .empty-state{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:132px;
  padding:var(--s5) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--r-card) !important;
  background:var(--card) !important;
  color:var(--dim) !important;
  font-size:var(--t-sm) !important;
  text-align:center;
  margin:0 !important;
}

/* Categories: uniform tiles, name and state aligned on a baseline. */
.home-filter-row{ gap:var(--s2) !important; margin-bottom:var(--s4) !important; }
.filter-chip{
  min-height:32px;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid var(--hair) !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:var(--t-xs) !important;
  font-weight:600 !important;
}
.filter-chip:hover{ border-color:var(--hair-2) !important; color:var(--text) !important; }
.filter-chip.active{ background:var(--text) !important; border-color:var(--text) !important; color:#0b0817 !important; }
.category-search-field{ border-radius:var(--r-ctrl) !important; background:var(--card) !important; border:1px solid var(--hair) !important; }
.category-tile,.category-card{ border-radius:var(--r-card) !important; overflow:hidden; }
.category-tile strong,.category-card strong{ font-size:var(--t-sm) !important; font-weight:650 !important; }
.category-tile small,.category-card small{ font-size:var(--t-xs) !important; color:var(--dim) !important; }

/* ---------- 7. Footer ---------- */
.arc-footer{ border-top:1px solid var(--hair) !important; background:transparent !important; margin-top:var(--s8); }
.footer-inner{ max-width:var(--shell); padding:var(--s7) clamp(20px,2.4vw,34px) var(--s5) !important; }
.footer-brand p{ font-size:var(--t-sm) !important; color:var(--muted) !important; max-width:36ch; }
.footer-col h3{
  font-size:10.5px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
  color:var(--dim) !important;
  font-weight:700 !important;
  margin-bottom:var(--s2);
}
.footer-col a{ font-size:var(--t-sm) !important; color:var(--muted) !important; }
.footer-col a:hover{ color:var(--text) !important; }
.footer-bottom{ border-top:1px solid var(--hair) !important; margin-top:var(--s5) !important; padding-top:var(--s4) !important; font-size:var(--t-xs) !important; color:var(--dim) !important; }

/* ---------- 8. Channel page chrome ---------- */
.channel-page{ padding-top:var(--s5) !important; }
.channel-watch-layout{
  border-radius:var(--r-card) !important;
  border:1px solid var(--hair) !important;
  box-shadow:none !important;
  overflow:hidden;
}
.chat-panel{ border:0 !important; border-left:1px solid var(--hair) !important; border-radius:0 !important; background:var(--card) !important; }
.chat-heading{ padding:var(--s3) var(--s4) !important; border-bottom:1px solid var(--hair) !important; font-size:var(--t-sm) !important; }
.chat-line{ border-radius:6px !important; font-size:var(--t-sm) !important; line-height:1.45 !important; padding:4px 6px !important; }
.chat-line:hover{ background:rgba(255,255,255,.03) !important; }
.chat-form{ padding:var(--s3) !important; border-top:1px solid var(--hair) !important; }
.channel-profile{ gap:var(--s4) !important; padding:var(--s4) 0 !important; }
.channel-info h1{ font-size:var(--t-xl) !important; letter-spacing:-.03em; }
.channel-tabs{ gap:var(--s5) !important; }
.channel-tabs button{ font-size:var(--t-sm) !important; font-weight:600 !important; }

/* ---------- 9. Creator Studio ---------- */
:root{
  --studio-bg:var(--bg);
  --studio-panel:var(--card);
  --studio-panel-alt:var(--card-2);
  --studio-border:var(--hair);
  --studio-muted:var(--muted);
  --studio-purple:var(--lime);
}
.creator-page-shell{ background:var(--bg) !important; }
.creator-sidebar{
  background:transparent !important;
  border-right:1px solid var(--hair) !important;
  padding:var(--s5) var(--s3) !important;
  gap:0 !important;
}
.creator-sidebar .sidebar-brand{ padding:0 0 var(--s4) !important; margin:0 0 var(--s4) !important; border-bottom:1px solid var(--hair) !important; }
.creator-sidebar .sidebar-logo{ border-radius:9px !important; background:var(--card-2) !important; overflow:hidden; }
.creator-sidebar .sidebar-brand strong{ font-size:var(--t-sm) !important; letter-spacing:0 !important; }
.creator-sidebar .sidebar-brand small{ font-size:10.5px !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--dim) !important; }
.creator-sidebar .sidebar-label{ font-size:10px !important; letter-spacing:.13em !important; color:var(--dim) !important; padding:0 10px !important; margin:0 0 var(--s2) !important; }
.creator-sidebar .sidebar-group{ margin:0 0 var(--s5) !important; gap:1px !important; }
.creator-sidebar .sidebar-link{
  min-height:34px !important;
  border-radius:var(--r-ctrl) !important;
  border-left:0 !important;
  padding:7px 10px !important;
  font-size:var(--t-sm) !important;
  font-weight:550 !important;
  color:var(--muted) !important;
}
.creator-sidebar .sidebar-link span{ width:16px !important; flex:0 0 16px !important; font-size:13px !important; color:var(--dim) !important; }
.creator-sidebar .sidebar-link:hover{ background:var(--card) !important; color:var(--text) !important; }
.creator-sidebar .sidebar-link.active{
  background:var(--card-2) !important;
  color:var(--text) !important;
  font-weight:650 !important;
  box-shadow:inset 2px 0 0 var(--lime);
}
.creator-sidebar .sidebar-link.active span{ color:var(--lime) !important; }
.creator-sidebar .sidebar-footer{ border-top:1px solid var(--hair) !important; padding-top:var(--s4) !important; font-size:var(--t-xs) !important; color:var(--muted) !important; }
.creator-sidebar .sidebar-footer small{ font-size:10.5px !important; color:var(--dim) !important; }
.creator-page-main{ padding:var(--s6) clamp(20px,3vw,40px) var(--s8) !important; gap:var(--s5) !important; }
.creator-page-main .panel,.creator-page-main .stat-card,.creator-dashboard .stat-card{
  border-radius:var(--r-card) !important;
  border-color:var(--hair) !important;
  box-shadow:none !important;
}
.creator-page-main .stat-card{ padding:var(--s4) !important; gap:4px !important; }
.creator-page-main .stat-card > strong{ font-size:24px !important; letter-spacing:-.02em; }
.creator-page-main .stat-card > span{ font-size:var(--t-xs) !important; letter-spacing:.02em; }
.creator-page-main .stat-card small{ font-size:11px !important; color:var(--dim) !important; }
.creator-page-main .quick-actions a{ border-radius:var(--r-ctrl) !important; padding:10px !important; }
.creator-page-main .quick-actions a:hover{ background:var(--card-2) !important; border-color:var(--hair) !important; }
.creator-page-main .quick-actions a > span{ border-radius:7px !important; background:var(--card-2) !important; color:var(--lime-bright) !important; font-size:15px !important; }
.creator-page-main .quick-actions strong{ font-size:var(--t-sm) !important; }
.creator-page-main .quick-actions small{ font-size:11.5px !important; color:var(--dim) !important; }
.studio-welcome h1{ font-size:clamp(26px,3vw,36px) !important; }
.creator-page-main .notice{
  border-radius:var(--r-card) !important;
  border:1px solid var(--hair) !important;
  background:var(--card) !important;
  color:var(--muted) !important;
  font-size:var(--t-xs) !important;
  padding:var(--s3) var(--s4) !important;
}

/* ---------- 10. Narrow screens ---------- */
@media (max-width:1000px){
  .feature-layout{ grid-template-columns:minmax(0,1fr) !important; }
  .arc-chat{ min-height:320px; }
}
@media (max-width:760px){
  .home-sidebar{ width:100% !important; flex-basis:auto !important; border-right:0 !important; border-bottom:1px solid var(--hair) !important; }
  .header-search{ display:none; }
  .arc-hero{ margin-bottom:var(--s5) !important; }
  .stream-grid{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important; gap:var(--s3) !important; }
  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--s5) !important; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- 11. Featured slot ---------- */
/* An empty player is not a design. Before anything is live the slot explains the product
   and offers the two real next steps, and the chat column that has nothing to talk about
   is not rendered at all. */
.arc-feature-placeholder{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:10px !important;
  padding:clamp(24px,3.4vw,44px) !important;
  text-align:left !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--r-card) !important;
  background:var(--card-2) !important;
}
.arc-feature-placeholder .feature-eyebrow{
  font-size:var(--t-label); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.arc-feature-placeholder .feature-title{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--text);
}
.arc-feature-placeholder .feature-text{
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--muted);
  max-width:48ch;
}
.arc-feature-placeholder .feature-actions{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s2);
}
.feature-layout.is-empty{ grid-template-columns:minmax(0,1fr) !important; }
.feature-layout.is-empty .arc-chat{ display:none !important; }
.feature-layout.is-empty .arc-feature-media{ aspect-ratio:auto !important; min-height:260px; }
.feature-layout.is-empty .arc-feature-card{ border:0 !important; background:transparent !important; }
.arc-feature-status{
  position:absolute; left:12px; bottom:12px;
  font-size:var(--t-xs); color:var(--muted);
  background:rgba(4,4,6,.72); border:1px solid var(--hair);
  border-radius:6px; padding:4px 8px;
}

/* ---------- 12. Settled details ---------- */
/* The rail's current page is marked by an edge, not by a glowing gradient block. */
.home-sidebar .sidebar-link.active{
  background:var(--card) !important;
  box-shadow:inset 2px 0 0 var(--lime) !important;
  color:var(--text) !important;
  border-radius:0 var(--r-ctrl) var(--r-ctrl) 0 !important;
}
.home-sidebar .sidebar-link{ box-shadow:none !important; }
.home-sidebar .sidebar-link:hover{ background:var(--card) !important; }

/* Empty directory result: a quiet bordered panel, not a dashed placeholder. */
.discovery-empty{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:120px;
  padding:var(--s5) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--r-card) !important;
  background:var(--card) !important;
  color:var(--dim) !important;
  font-size:var(--t-sm) !important;
  text-align:center;
}

/* Section rhythm: generous, but not a screenful of nothing between blocks. */
.home-section,.home-feature-section{ padding-top:var(--s6) !important; }
.home-drops-row,.home-section:first-of-type{ padding-top:var(--s5) !important; }
.arc-hero{ margin-bottom:var(--s5) !important; }

/* ---------- 13. Directory ---------- */
/* Category chips use the same quiet treatment as the home filters: the active one is marked
   by its edge and its text, not painted as a solid block. */
.browse-chip{
  min-height:32px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid var(--hair) !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:var(--t-xs) !important;
  font-weight:600 !important;
}
.browse-chip:hover{ border-color:var(--hair-2) !important; color:var(--text) !important; }
.browse-chip.active{ border-color:var(--lime) !important; color:var(--lime-bright) !important; background:rgba(169,123,255,.1) !important; }
.browse-chip.active small{ color:var(--lime-bright) !important; }
.browse-chip small{ font-size:10.5px !important; opacity:.75; }

/* The artwork rail scrolls without drawing a browser scrollbar across the page. */
.category-rail{ scrollbar-width:none !important; padding-bottom:2px !important; }
.category-rail::-webkit-scrollbar{ height:0 !important; display:none !important; }
.category-art-card{ border-radius:var(--r-card) !important; overflow:hidden; border:1px solid var(--hair); background:var(--card); }
.category-art-card:hover{ border-color:var(--hair-2); }
.category-art-card span{ font-size:var(--t-xs) !important; font-weight:650 !important; }
.category-art-card small{ font-size:10.5px !important; color:var(--dim) !important; }

/* Internal status text stays out of the visitor's way. */
#browseSource{ display:none !important; }
.browse-sort-hint{ font-size:var(--t-xs); color:var(--dim); }
.browse-summary{ margin:var(--s4) 0 var(--s3) !important; }

/* Secondary pages share one heading size, so no page shouts louder than the last. */
.page-head h1,.browse-head h1,.page-header h1{ font-size:clamp(28px,3vw,40px) !important; letter-spacing:-.035em !important; line-height:1.06 !important; }

/* Artwork tiles: the label holds two lines at every width so the caption underneath sits on
   the same baseline across a row instead of stepping up and down. */
.category-art-card span,.category-card span{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.55em;
  line-height:1.28 !important;
}
.category-art-card small,.category-card small{ margin-top:0 !important; }
.category-rail{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%); }

/* ---------- 14. Channel player states ---------- */
/* The offline / not-configured screen lives directly inside the player, not in the player
   column, so the older rule never reached it and the heading sat in the top-left corner over
   the offline art. This centres it on a scrim and takes the playback controls away, because
   there is nothing to play. */
.channel-player .player-center{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--s2) !important;
  padding:var(--s5) !important;
  text-align:center !important;
  background:transparent !important;
  overflow:hidden;
}
.channel-player .player-center::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,10,.45),rgba(5,4,10,.9));
}
.channel-player .player-center > *{ position:relative; z-index:1; }
.channel-player .player-center h2{
  font-family:var(--font-display);
  font-size:clamp(19px,1.8vw,24px) !important;
  letter-spacing:-.025em;
  color:var(--text) !important;
  margin:0 !important;
}
.channel-player .player-center p{
  color:var(--muted) !important;
  font-size:var(--t-sm) !important;
  max-width:46ch;
  margin:0 !important;
  line-height:1.55;
}
.channel-player .player-center[hidden]{ display:none !important; }
/* Only draw playback controls when there is playback. */
.channel-player:has(.player-center:not([hidden])) .arcstream-custom-controls{ display:none !important; }

/* The active home filter is marked the same way as the directory's chips, so the two pages
   do not invent different ideas of "selected". */
.filter-chip.active{
  background:rgba(169,123,255,.12) !important;
  border-color:var(--lime) !important;
  color:var(--lime-bright) !important;
}