/* ══════════════════════════════════════════════════════════════════════════
   reskin-startseite.css — §RESKIN-STARTSEITE r3 (Cloder 2026-07-23)
   EIGENSTÄNDIGES Add-on. NACH der Theme-CSS laden (eigener <link>).
   Definiert die --pc-*-Mockup-Palette je Theme und biegt die bestehenden
   App-Variablen darauf um → die real gerenderte Startseite nimmt die
   Mockup-Palette an (Blau / Lila / Nocturne statt Neon-Gelb), plus dunkler
   Aktiv-Kontrast wie im Mockup. Fasst KEINE bestehende Datei an, kann nichts
   löschen. Entfernen = <link> raus. --card-glow (Hosterfarbe je Kachel) bleibt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── cyberdark (Blau) ── */
body.theme-dark-cyber {
  --pc-bg:#0a0c12; --pc-surface:#10141e; --pc-surface2:#171d2b; --pc-border:rgba(255,255,255,.07);
  --pc-text:#e8ecf5; --pc-muted:#7f8aa1; --pc-accent:#35a7ff; --pc-accent2:#2ee6c6;
  --pc-active:rgba(53,167,255,.12); --pc-soft:rgba(53,167,255,.09); --pc-live:#ff5a5f; --pc-glow:rgba(53,167,255,.42);
  --bg:var(--pc-bg); --bg-sidebar-1:var(--pc-surface); --bg-sidebar-2:var(--pc-bg); --bg-header:var(--pc-surface);
  --card:var(--pc-surface); --card-2:var(--pc-surface2); --card-border:var(--pc-border);
  --border:var(--pc-border); --border-soft:var(--pc-border);
  --text:var(--pc-text); --text-dim:var(--pc-muted); --text-faint:var(--pc-muted); --sys-idle:var(--pc-muted);
  --sys-focus:var(--pc-accent);
  --sys-glow:0 0 0 1px var(--pc-accent),0 0 22px var(--pc-glow),0 0 44px var(--pc-soft);
  --live:var(--pc-live);
}
/* ── cyberpunk (Lila) ── */
body.theme-cyberpunk {
  --pc-bg:#0b0714; --pc-surface:#140d24; --pc-surface2:#1d1435; --pc-border:rgba(255,255,255,.08);
  --pc-text:#f1e9ff; --pc-muted:#9a86bf; --pc-accent:#c94bff; --pc-accent2:#00e0ff;
  --pc-active:rgba(201,75,255,.14); --pc-soft:rgba(201,75,255,.11); --pc-live:#ff3d81; --pc-glow:rgba(201,75,255,.5);
  --bg:var(--pc-bg); --bg-sidebar-1:var(--pc-surface); --bg-sidebar-2:var(--pc-bg); --bg-header:var(--pc-surface);
  --card:var(--pc-surface); --card-2:var(--pc-surface2); --card-border:var(--pc-border);
  --border:var(--pc-border); --border-soft:var(--pc-border);
  --text:var(--pc-text); --text-dim:var(--pc-muted); --text-faint:var(--pc-muted); --sys-idle:var(--pc-muted);
  --sys-focus:var(--pc-accent);
  --sys-glow:0 0 0 1px var(--pc-accent),0 0 22px var(--pc-glow),0 0 44px var(--pc-soft);
  --live:var(--pc-live);
}
/* ── nocturne (Lavendel) ── */
body.theme-classic {
  --pc-bg:#12131f; --pc-surface:#1a1c2b; --pc-surface2:#232637; --pc-border:rgba(233,233,237,.10);
  --pc-text:#e9e9ed; --pc-muted:#9397ab; --pc-accent:#9184d9; --pc-accent2:#a7a1db;
  --pc-active:rgba(145,132,217,.14); --pc-soft:rgba(145,132,217,.11); --pc-live:#e0736b; --pc-glow:rgba(145,132,217,.42);
  --bg:var(--pc-bg); --bg-sidebar-1:var(--pc-surface); --bg-sidebar-2:var(--pc-bg); --bg-header:var(--pc-surface);
  --card:var(--pc-surface); --card-2:var(--pc-surface2); --card-border:var(--pc-border);
  --border:var(--pc-border); --border-soft:var(--pc-border);
  --text:var(--pc-text); --text-dim:var(--pc-muted); --text-faint:var(--pc-muted); --sys-idle:var(--pc-muted);
  --sys-focus:var(--pc-accent);
  --sys-glow:0 0 0 1px var(--pc-accent),0 0 22px var(--pc-glow),0 0 44px var(--pc-soft);
  --live:var(--pc-live);
}
/* ── Aktiv-Kontrast: dunkler Text auf dem helleren Akzent (wie Mockup) ── */
body.theme-dark-cyber .sc-bubble.active, body.theme-dark-cyber .filter-tab.active,
body.theme-cyberpunk  .sc-bubble.active, body.theme-cyberpunk  .filter-tab.active,
body.theme-classic    .sc-bubble.active, body.theme-classic    .filter-tab.active { color:#07080d !important; }
body.theme-dark-cyber .sc-bubble.active svg, body.theme-dark-cyber .filter-tab.active svg,
body.theme-cyberpunk  .sc-bubble.active svg, body.theme-cyberpunk  .filter-tab.active svg,
body.theme-classic    .sc-bubble.active svg, body.theme-classic    .filter-tab.active svg { stroke:#07080d !important; }

/* ── Bottom-Nav ist MOBIL-ONLY (Punkt-3-Markup .bottom-nav hatte kein Gate →
   leakte auf Web/Desktop). Auf allem außer Handy ausblenden. ── */
body:not(.app-phone) .bottom-nav { display: none !important; }

/* ── Sidebar-Nav wie Mockup: rounded-rect statt Pille + dezenter Aktiv-Zustand
   (getönt + Akzent-Randstreifen links). `.focused` (TV-D-Pad) bleibt unberührt,
   daher :not(.focused). ── */
body.theme-dark-cyber .nav-item,
body.theme-cyberpunk  .nav-item,
body.theme-classic    .nav-item { border-radius: 12px; }
body.theme-dark-cyber .nav-item.active:not(.focused),
body.theme-cyberpunk  .nav-item.active:not(.focused),
body.theme-classic    .nav-item.active:not(.focused) {
  background: var(--pc-active);
  border-color: transparent;
  color: var(--pc-text);
  box-shadow: inset 3px 0 0 var(--pc-accent);
}

/* ── WASD/Steuerleiste (#hint-bar) auf Desktop-Web wieder einblenden.
   Die App versteckt sie dort per Default (Z.1941 body.app-desktop #hint-bar
   {display:none}); die früher überlappende #pc-shortcut-bar ist entfernt → kein
   Text-Salat mehr. Zeigt die App-eigene Hint-Leiste (Navigieren/Öffnen/Zurück).
   Die reichere Mockup-Variante mit W/A/S/D-Tastenchips wäre HTML/JS (Folgeschritt). ── */
body.app-desktop #hint-bar { display: flex !important; }

/* ── Steuerleiste nur in der Content-Spalte (rechts der Sidebar); Sidebar läuft
   voll bis unten durch. Sidebar = 248px (collapsed 64px, leanback 268px). ── */
body.app-desktop #hint-bar { left: 248px !important; right: 0 !important; }
body.app-desktop.app-leanback #hint-bar { left: 268px !important; }
body.app-desktop.sidebar-collapsed #hint-bar { left: 64px !important; }

/* ── Gelb-Puls des aktiven/fokussierten Nav-Items killen: das globale Keyframe
   breathe-sys-nav hardcodet Neon-Gelb (rgba(250,255,0)). Hier auf Akzent umdefiniert
   (später geladen → gewinnt). ── */
@keyframes breathe-sys-nav {
  0%, 100% { box-shadow: 0 0 0 1px var(--pc-accent), 0 0 16px var(--pc-glow), 0 8px 24px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 0 1px var(--pc-accent), 0 0 30px var(--pc-glow), 0 8px 24px rgba(0,0,0,0.4); }
}
/* Desktop: aktives Nav-Item durchgehend dezent (getönt + Akzent-Streifen), kein
   Puls-Glow — auch wenn es zugleich .focused ist (bei Seitenaufruf der Fall). ── */
body.app-desktop .nav-item.active {
  background: var(--pc-active) !important;
  border-color: transparent !important;
  color: var(--pc-text) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent) !important;
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE — Komponenten-Durchgang (Cloder 2026-07-23)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) Aktives Nav-Pikto war #12131a (dunkel, für die alte Gelb-Pille) → auf heller
      Fläche unsichtbar/„schwarz". Auf Text-hell. */
body.app-desktop .nav-item.active .nav-icon,
body.app-desktop .nav-item.active.focused .nav-icon { color: var(--pc-text) !important; }

/* 2) Bottom-Bar: als eigene Fläche (wie Mockup-tvbar) + Content-Clearance, damit die
      unterste Kachelreihe nicht unter der fixierten Steuerleiste verschwindet. */
body.app-desktop #hint-bar {
  background: var(--pc-surface) !important;
  border-top: 1px solid var(--pc-border) !important;
}
body.app-desktop #content { padding-bottom: 56px !important; }

/* 3) Hoster-Chips wie Mockup: dunkle Flächen-Pille (waren hell). Aktive Pille behält
      Akzent-Füllung. */
body.app-desktop .sc-bubble:not(.active) {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}
body.app-desktop .sc-bubble:not(.active):hover { border-color: var(--pc-accent) !important; }

/* 4) Filter-Segment (Alle/Live/Videos): aktiv = Akzent + dunkler Text, inaktiv dezent. */
body.app-desktop #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #07080d !important; border-color: var(--pc-accent) !important;
}
body.app-desktop #filter-tabs .filter-tab:not(.active) {
  background: transparent !important; color: var(--pc-muted) !important;
}

/* 5) Suchleiste: Pink/Gelb-Leuchten raus, dezente Border, Akzent bei Fokus. */
body.app-desktop #search-bar {
  border-color: var(--pc-border) !important; box-shadow: none !important; animation: none !important;
}
body.app-desktop #search-bar.focused {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent), 0 0 18px var(--pc-glow) !important;
}

/* 6) breathe-sys hardcodete Neon-Gelb (wie breathe-sys-nav) → Akzent. */
@keyframes breathe-sys {
  0%, 100% { box-shadow: 0 0 0 1px var(--pc-accent), 0 0 16px var(--pc-glow); }
  50%      { box-shadow: 0 0 0 1px var(--pc-accent), 0 0 30px var(--pc-glow); }
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE — Spezifitäts-Fixes (Cloder 2026-07-23, nach Live-Diagnose)
   ui-auth74-73.css lädt NACH dieser Datei und setzt ID-gescopte !important-Regeln.
   Daher hier ID + Body-Klasse (höhere Spezifität → schlägt sie unabhängig von Order).
   ══════════════════════════════════════════════════════════════════════════ */

/* Hoster-Chips: dunkle Flächen-Pille statt Glass-Weiß (ui-auth #session-platform-bar). */
body.app-desktop #session-platform-bar .sc-bubble:not(.active):not(.on) {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}
body.app-desktop #session-platform-bar .sc-bubble:not(.active):not(.on):hover {
  border-color: var(--pc-accent) !important;
}

/* Sidebar-Nav: Piktogramm VOR dem Label (row) statt darüber (column). */
body.app-desktop #sidebar .nav-item {
  flex-direction: row !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Connect-Banner: Abstand nach unten zu den Kacheln. */
body.app-desktop #connect-banner { margin-bottom: 22px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE — v8 (Cloder 2026-07-23)
   ══════════════════════════════════════════════════════════════════════════ */

/* Chips: ALLE Hoster-Pillen dunkel (vorher schloss :not(.on) die on-Chips aus). */
body.app-desktop #session-platform-bar .sc-bubble {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}

/* App-eigene Steuerleiste (#hint-bar, „Steuerkreuz") auf Desktop AUS — wird durch
   die eigene WASD-Leiste (#rsk-wasd-bar, per JS injiziert) ersetzt. */
body.app-desktop #hint-bar { display: none !important; }

/* Eigene WASD-Leiste: sitzt garantiert rechts der Sidebar (keine fremden Regeln). */
#rsk-wasd-bar {
  position: fixed; bottom: 0; left: 248px; right: 0; height: 46px; z-index: 45;
  display: none; align-items: center; justify-content: center; gap: 26px;
  background: var(--pc-surface); border-top: 1px solid var(--pc-border);
  font-size: 13px; color: var(--pc-muted);
  font-family: ui-monospace, Menlo, monospace;
}
body.app-desktop #rsk-wasd-bar { display: flex; }
body.app-desktop.sidebar-collapsed #rsk-wasd-bar { left: 64px; }
.rsk-kh { display: inline-flex; align-items: center; gap: 8px; }
.rsk-keys { display: inline-flex; gap: 3px; }
.rsk-key {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--pc-border); background: var(--pc-surface2);
  color: var(--pc-text); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ══ §RESKIN-STARTSEITE v9 — Top-Bar-Erweiterung (Theme-Punkte + Avatar) ══ */
#rsk-topbar-extra { display: inline-flex; align-items: center; gap: 12px; margin-right: 12px; }
.rsk-swatches { display: inline-flex; align-items: center; gap: 8px; }
.rsk-swatch {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-sizing: border-box; transition: transform .12s, border-color .12s;
}
.rsk-swatch:hover { transform: scale(1.12); }
.rsk-swatch.on { border-color: var(--pc-text); }
.rsk-sw-cyberdark { background: #35a7ff; }
.rsk-sw-cyberpunk { background: #c94bff; }
.rsk-sw-nocturne  { background: #9184d9; }
.rsk-tb-divider { width: 1px; height: 24px; background: var(--pc-border); }
.rsk-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent2));
  color: #07080d; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ══ §RESKIN-STARTSEITE v10 — Top-Bar-Spacing + Sidebar + Kacheln ══ */

/* Top-Bar: gleichmäßige Abstände (swatches | Glocke | Avatar). */
body.app-desktop #header-actions { display: flex !important; align-items: center !important; gap: 16px !important; }
#rsk-topbar-extra { gap: 12px !important; margin: 0 !important; }

/* Sidebar-Nav kompakter & vertikal zentriert (Label war 18px → wirkte „verloren"). */
body.app-desktop #sidebar .nav-item {
  padding: 9px 14px !important;
  align-items: center !important;
  gap: 12px !important;
}
body.app-desktop #sidebar .nav-item .nav-label {
  font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.2 !important;
}

/* Kacheln: Desktop-Textgrößen auf Mockup-Niveau (App hatte sie für TV vergrößert). */
body.app-desktop .video-card .card-title {
  font-size: 14px !important; line-height: 1.3 !important;
  min-height: 2.6em !important; max-height: 2.6em !important;
}
body.app-desktop .video-card .card-creator { font-size: 12.5px !important; }
body.app-desktop .video-card .card-views,
body.app-desktop .video-card .card-meta-row,
body.app-desktop .video-card .card-duration { font-size: 11.5px !important; }

/* Sidebar: Icon↔Text enger (war 12px, wirkte zu weit auseinander). */
body.app-desktop #sidebar .nav-item { gap: 9px !important; }

/* ══ §RESKIN-STARTSEITE v11 — Topbar-Feinschliff + Chips-Kacheln ══ */

/* Suchleiste: abgerundetes Rechteck statt Pille/Oval. */
body.app-desktop #search-bar { border-radius: 12px !important; }

/* Avatar: Abstand vom rechten Rand (wurde abgeschnitten) + Ring zur Abgrenzung. */
body.app-desktop #header-actions { margin-right: 26px !important; }
.rsk-avatar { border: 2px solid rgba(255,255,255,0.18) !important; box-shadow: 0 0 0 3px var(--pc-bg) !important; }

/* „Theme"-Label vor den Punkten (wie Mockup). */
.rsk-theme-label { font-size: 12px; color: var(--pc-muted); margin-right: 4px; white-space: nowrap; }

/* Hoster-Chips: farbige Plattform-Kachel mit 2-Buchstaben-Code (wie Mockup). */
#session-platform-bar .sc-bubble .rsk-plat {
  width: 22px !important; height: 22px !important; border-radius: 6px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 9px !important; font-weight: 800 !important; color: #fff !important;
  letter-spacing: 0.3px; overflow: hidden; flex: none; padding: 0 !important;
}