/* ══════════════════════════════════════════════════════════════════════════
   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.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── dark (echtes neutrales Dark-Mode-Skin — NICHT blau/lavendel wie nocturne) ──
   Neutralgraue Flächen (kein Blaustich mehr), gedämpfter Stahl-Akzent, deutlich
   reduzierter Glow → klarer „Darkmode"-Look statt Cyber-Neon. */
body.theme-dark-cyber {
  --pc-bg:#171719; --pc-surface:#202022; --pc-surface2:#29292c; --pc-border:rgba(255,255,255,.09);
  --pc-text:#eaeaec; --pc-muted:#909094; --pc-accent:#c7c9cf; --pc-accent2:#d8dade;
  --pc-active:rgba(199,201,207,.12); --pc-soft:rgba(199,201,207,.08); --pc-live:#ff5a5f; --pc-glow:rgba(199,201,207,.18);
  --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:#ff2bd6; --pc-accent2:#00e5ff;
  --pc-active:rgba(255,43,214,.15); --pc-soft:rgba(0,229,255,.12); --pc-live:#ff3d81; --pc-glow:rgba(255,43,214,.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: #0a0c12 !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); }
/* Dark-Theme-Swatch = dunkles Icon (Mond-Sichel auf fast-schwarzer Scheibe) statt
   Farbpunkt → signalisiert „Darkmode". Sichel per inset-Shadow (heller Rand oben-rechts,
   dunkle Sichel unten-links). */
.rsk-sw-cyberdark {
  background: #17181c;
  box-shadow: inset -4px -3px 0 -1px #c3c8d2, inset 0 0 0 1px rgba(255,255,255,.22);
}
.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;
}

/* ══ §RESKIN-STARTSEITE v12 — Section-Header, Filter-Segment, Chip-Form, Header-Fit ══ */

/* Chips: abgerundetes Rechteck statt Pille (Robin). */
body.app-desktop #session-platform-bar .sc-bubble { border-radius: 12px !important; }

/* Section-Header „Jetzt Live & Videos": normale Schrift statt Uppercase-Monospace. */
body.app-desktop .section-title {
  text-transform: none !important;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif !important;
  font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
}
/* Titel + Filter in EINER Zeile, Filter rechts (per JS in .rsk-sechead-row gewrappt). */
.rsk-sechead-row { display: flex !important; align-items: center !important; gap: 14px !important; margin: 2px 0 16px !important; }
.rsk-sechead-row .section-title { margin: 0 !important; }
.rsk-sechead-row #filter-tabs { margin-left: auto !important; }

/* Filter als Segment-Control — EXAKT wie Komponenten-Datei „Standard/Breitbild/Kino":
   Container radius 9px, padding 3px, gap 2px, surface2 + Border; Optionen height 30px,
   padding 0 15px, radius 7px, aktiv Akzent + #0a0c12/weight 600, inaktiv transparent/muted/weight 500. */
body.app-desktop #filter-tabs {
  display: inline-flex !important; padding: 3px !important; gap: 2px !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  border-radius: 9px !important; flex-wrap: nowrap !important; width: auto !important;
}
body.app-desktop #filter-tabs .filter-tab {
  height: 30px !important; padding: 0 15px !important; border-radius: 7px !important;
  border: none !important; background: transparent !important; margin: 0 !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--pc-muted) !important;
  display: inline-flex !important; align-items: center !important; box-shadow: none !important;
}
body.app-desktop #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; font-weight: 600 !important;
}

/* Header-Fit: Suchleiste schmaler, damit rechts (Avatar) nichts abgeschnitten wird. */
body.app-desktop #search-bar { width: 440px !important; max-width: 440px !important; border-radius: 10px !important; }
body.app-desktop #header-actions { margin-right: 20px !important; }

/* ══ §RESKIN-STARTSEITE v13 — Leanback-Fix, Sidebar-Gap, Filter rechts ══ */

/* WASD/D-Pad (app-leanback) darf das Desktop-Layout NICHT ändern: 4 Spalten +
   kleine Kacheltexte bleiben, statt TV-3-Spalten/Großtext. */
body.app-desktop.app-leanback .video-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
body.app-desktop.app-leanback .video-card .card-title {
  font-size: 14px !important; min-height: 2.6em !important; max-height: 2.6em !important;
}
body.app-desktop.app-leanback .video-card .card-creator { font-size: 12.5px !important; }
body.app-desktop.app-leanback .video-card .card-views,
body.app-desktop.app-leanback .video-card .card-meta-row { font-size: 11.5px !important; }
body.app-desktop.app-leanback .nav-item { font-size: inherit !important; padding: 9px 14px !important; }

/* Sidebar: Icon↔Text noch enger (war 9px → 6px). */
body.app-desktop #sidebar .nav-item { gap: 6px !important; }

/* ══ §RESKIN-STARTSEITE v19 — Filter als ECHTES Segment-Control (2-ID-Spezifität) ══
   ui-auth74-73.css lädt NACH dieser Datei und erzwingt mit !important @ Spezifität
   (1,3,1): border-radius:50px, weiße Aktiv-Pille, min-height:44px, margin:0 7px 7px 0.
   Um das zu schlagen, brauche ich zwei IDs (#section-home #filter-tabs …) → (2,x,y),
   das schlägt jede (1,3,1)-Regel unabhängig von Ladereihenfolge. Zielbild = Komponenten-
   Datei „Standard/Breitbild/Kino": Container surface2+Border+radius9+padding3+gap2,
   Optionen height30/pad0-15/radius7, aktiv Akzent+#0a0c12/700, inaktiv transparent/muted/500.

   Filter zugleich oben-rechts in #section-home positioniert (crashfrei, kein DOM-Move). */
body.app-desktop #section-home { position: relative !important; }
body.app-desktop #section-home #filter-tabs {
  position: absolute !important; top: 0 !important; right: 32px !important;
  z-index: 3 !important;
  display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important;
  width: auto !important; max-width: none !important;
  padding: 3px !important; gap: 2px !important; margin: 0 !important;
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important; border-bottom: 1px solid var(--pc-border) !important;
  border-radius: 9px !important; box-shadow: none !important;
}
body.app-desktop #section-home #filter-tabs .filter-tab {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 30px !important; min-height: 0 !important; padding: 0 15px !important; margin: 0 !important;
  border: none !important; border-top: none !important; border-bottom: none !important;
  border-radius: 7px !important; box-shadow: none !important;
  background: transparent !important; color: var(--pc-muted) !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
}
body.app-desktop #section-home #filter-tabs .filter-tab:not(.active):hover {
  background: rgba(255,255,255,.05) !important; color: var(--pc-text) !important; border: none !important;
}
body.app-desktop #section-home #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; font-weight: 600 !important;
  border: none !important; box-shadow: none !important; margin: 0 !important;
}
/* Home zeigt wie im Mockup nur Alle/Live/Videos — Gruppen/Kalender gehören zu
   Abonnements. (App blendet sie außerhalb nav-subscriptions ohnehin aus; hier
   nur robust nachgezogen, streng auf #section-home gescoped.) */
body.app-desktop:not(.nav-subscriptions) #section-home #filter-tabs .filter-tab-groups,
body.app-desktop:not(.nav-subscriptions) #section-home #filter-tabs .filter-tab-calendar {
  display: none !important;
}

/* Header-Fit robust: Suchleiste schrumpft flexibel, Actions bleiben immer sichtbar
   (Avatar wurde rechts aus dem Bild geschoben). */
body.app-desktop #header-actions { flex-shrink: 0 !important; margin-right: 24px !important; }
body.app-desktop #search-bar {
  flex: 1 1 auto !important; width: auto !important; max-width: 440px !important; min-width: 120px !important;
}

/* ══ §RESKIN-STARTSEITE v14 — Avatar-Fit, Topbar-Farbe, Chip-Logo ══ */

/* Avatar-Clipping: #header-actions war nur 72px → wuchs nicht auf den Inhalt,
   Avatar rutschte rechts aus dem Bild. Auf Inhaltsbreite zwingen. */
body.app-desktop #header-actions {
  width: auto !important; min-width: max-content !important; flex: 0 0 auto !important;
  margin-left: auto !important; margin-right: 24px !important;
  justify-content: flex-end !important; overflow: visible !important;
}

/* Top-Bar in Sidebar-Farbe → optische Abgrenzung zum Main-Content. */
body.app-desktop #header {
  background: var(--pc-surface) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}

/* Chip-Plattform-Kachel: Logo (weiß) auf hosterfarbenem Rundquadrat. */
#session-platform-bar .sc-bubble .rsk-plat img {
  width: 14px !important; height: 14px !important; object-fit: contain !important; display: block !important;
  filter: brightness(0) invert(1) !important;
}

/* Abstand zwischen Top-Bar und „Jetzt live & Videos". */
body.app-desktop #header { margin-bottom: 16px !important; }

/* ══ §RESKIN-STARTSEITE v17b — Kachel-Ausrichtung Live/Video (pixelgenau) ══
   Ursache der Rest-Verschiebung: v17 setzte margin-top:6px AUF card-viewers-live,
   obwohl .card-meta-row selbst schon margin-top:6px trägt → doppelter Versatz +
   Live-Zeile wuchs auf 30px (VOD 22px). Fix: BEIDE Meta-Zeilen exakt gleich —
   Höhe 22px, mittige Ausrichtung, gleiche line-height, KEIN Extra-Margin am Kind.
   Dadurch sitzen Live-Zuschauer und Video-Aufrufe (und Creator-Zeile darüber) auf
   identischer Höhe. */
body.app-desktop .video-card .card-meta-row {
  height: 22px !important; min-height: 22px !important; align-items: center !important;
}
body.app-desktop .video-card .card-viewers-live,
body.app-desktop .video-card .card-views {
  height: 22px !important; min-height: 22px !important; line-height: 22px !important;
  margin-top: 0 !important; align-self: center !important; overflow: hidden !important;
}
body.app-desktop .video-card .card-live-uptime,
body.app-desktop .video-card .card-uploaded {
  line-height: 22px !important; align-self: center !important;
}

/* ══ §RESKIN-STARTSEITE v18 — Chip-Logo prominenter (wie Mockup) ══ */
body.app-desktop #session-platform-bar .sc-bubble .logo-slot-sm {
  width: 24px !important; height: 24px !important; border-radius: 6px !important;
  overflow: hidden !important; flex: none !important; margin-right: 9px !important;
}
body.app-desktop #session-platform-bar .sc-bubble .logo-slot-sm img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* ══ §RESKIN-STARTSEITE v20 — Sidebar-Collapse nutzt Platz dynamisch ══
   Ursache „beim Einklappen rückt alles nach links außer dem Banner": die App deckelt
   jede .section UND den #header auf max-width:1440px + margin:0 auto (zentriert). Das
   Connect-Banner ist KEINE .section → füllte als einziges die volle Breite. Sobald die
   Sidebar einklappt und #content > 1440px wird, springt der Content auf 1440 zentriert
   (Lücke rechts), während das Banner mitwächst.
   Fix: Section + Header füllen — wie das Banner — die volle Content-Breite (kein 1440-
   Deckel, keine auto-Zentrierung). Damit verbreitert sich der Content beim Einklappen
   dynamisch und die Kachel-Reihe bleibt bündig unter Banner/Suchleiste. */
body.app-desktop .section,
body.app-desktop #header {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ══ §RESKIN-STARTSEITE v21 — Dark-Theme: Slate-Blau-Chrome neutralisieren ══
   Das App-Theme (theme-dark-cyber.css) trägt an Sidebar, Suchleiste und Such-Input
   hardcodete Tailwind-Slate-Blau-Werte (rgba(15,23,42,…), rgba(30,41,59,…)), die NICHT
   über die --pc-*-Variablen laufen → blieben trotz Rewire blau. Hier streng auf das
   Dark-Theme gescoped auf neutrale Flächen/Ränder gezogen. Cyberpunk/Nocturne unberührt. */
body.theme-dark-cyber #sidebar {
  background: linear-gradient(to bottom, var(--pc-surface), var(--pc-bg)) !important;
  border-right: 1px solid var(--pc-border) !important;
}
body.theme-dark-cyber #search-bar {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
}
body.theme-dark-cyber #search-input {
  background: transparent !important;
  border: none !important;
}
/* Fokus-Rahmen der Suchleiste im Dark-Theme neutral (kein Blau-Glow). */
body.theme-dark-cyber.app-desktop #search-bar.focused {
  border-color: var(--pc-muted) !important;
  box-shadow: 0 0 0 1px var(--pc-muted) !important;
}

/* ══ §RESKIN-STARTSEITE v22 — Anthrazit-BG, Logo-Farben pro Theme, Cyberpunk-Neon ══ */

/* Dark-Hintergrund: die App setzt ihn INLINE via settings.js applyRootCanvas
   (#0d0f14 + cyan Grid-Linie) → wirkte dunkelblau und ließ sich per Variable nicht
   fassen. CSS !important schlägt Inline-Styles ohne !important → hier auf neutrales
   Anthrazit (radialer Verlauf + dezentes, farbneutrales Grid) gezogen. */
body.theme-dark-cyber {
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 34%, #202022 0%, #17171a 55%, #101012 100%) !important;
  background-size: 46px 46px, 46px 46px, 100% 100% !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
}

/* Logo-Akzent pro Theme (App nutzt --neon-cyan für „Core"-Text + TV-Play-Dreieck +
   Live-Kreis). Dark = neutrales Grau, Nocturne = Lavendel, Cyberpunk = Multi-Neon. */
body.theme-dark-cyber { --neon-cyan: #cfd2d8; }
body.theme-classic    { --neon-cyan: #9184d9; }
body.theme-cyberpunk  { --neon-cyan: #ff2bd6; }
/* Cyberpunk-Logo mehrfarbig: Core pink, Play-Dreieck neon-gelb, Live-Kreis türkis. */
body.theme-cyberpunk .pc-brand-core   { color: #ff2bd6 !important; }
body.theme-cyberpunk .pc-tv-play-icon { fill: #faff00 !important; stroke: #faff00 !important; }
body.theme-cyberpunk .pc-tv-live-icon { fill: #00e5ff !important; }
/* Dark-Logo: „Core" + Icons neutral grau (kein Cyan mehr). */
body.theme-dark-cyber .pc-tv-play-icon { fill: #cfd2d8 !important; stroke: #cfd2d8 !important; }
body.theme-dark-cyber .pc-tv-live-icon { fill: #cfd2d8 !important; }
/* Nocturne-Logo: Icons lavendel. */
body.theme-classic .pc-tv-play-icon { fill: #9184d9 !important; stroke: #9184d9 !important; }
body.theme-classic .pc-tv-live-icon { fill: #9184d9 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v23 — Startseiten-Stil auf alle Feeds + Suche generalisiert
   Home gibt den Stil vor; hier auf Trends/Shorts/Clips/Abos/Suche gezogen.
   #content #filter-tabs = 2 IDs → schlägt ui-auth (1,3,1) unabhängig von Order.
   ══════════════════════════════════════════════════════════════════════════ */

/* (a) Hoster-Pillen (dunkle Tile + Logo) in ALLEN Leisten. */
body.app-desktop #session-platform-bar .sc-bubble,
body.app-desktop #shorts-bubbles .sc-bubble,
body.app-desktop #clips-bubbles .sc-bubble,
body.app-desktop #subs-bubbles .sc-bubble,
body.app-desktop #search-platform-pills .filter-pill {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.app-desktop #shorts-bubbles .sc-bubble:not(.active):not(.on):hover,
body.app-desktop #clips-bubbles .sc-bubble:not(.active):not(.on):hover,
body.app-desktop #subs-bubbles .sc-bubble:not(.active):not(.on):hover,
body.app-desktop #search-platform-pills .filter-pill:not(.active):not(.on):hover {
  border-color: var(--pc-accent) !important;
}
/* Hoster-Pillen bleiben — wie auf der Startseite — EINHEITLICH dunkel (auch im
   aktiven/„on"-Zustand; die App dimmt abgewählte via .sc-bubble-off). ui-auth
   erzwingt sonst eine weiße Aktiv-Pille → hier auf Surface zurückgeholt. */
body.app-desktop #shorts-bubbles .sc-bubble.active,
body.app-desktop #shorts-bubbles .sc-bubble.on,
body.app-desktop #clips-bubbles .sc-bubble.active,
body.app-desktop #clips-bubbles .sc-bubble.on,
body.app-desktop #subs-bubbles .sc-bubble.active,
body.app-desktop #subs-bubbles .sc-bubble.on,
body.app-desktop #search-platform-pills .filter-pill.active,
body.app-desktop #search-platform-pills .filter-pill.on {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}

/* (b) Logo-Kachel 24px, object-fit:contain (kein Crop — Twitch/YT sind nicht
   quadratisch, cover schnitt sie oben an). Für alle Leisten. */
body.app-desktop #session-platform-bar .sc-bubble .logo-slot-sm,
body.app-desktop #shorts-bubbles .sc-bubble .logo-slot-sm,
body.app-desktop #clips-bubbles .sc-bubble .logo-slot-sm,
body.app-desktop #subs-bubbles .sc-bubble .logo-slot-sm,
body.app-desktop #search-platform-pills .filter-pill .logo-slot-sm {
  width: 24px !important; height: 24px !important; border-radius: 6px !important;
  overflow: hidden !important; flex: none !important; margin-right: 9px !important;
}
body.app-desktop #session-platform-bar .sc-bubble .logo-slot-sm img,
body.app-desktop #shorts-bubbles .sc-bubble .logo-slot-sm img,
body.app-desktop #clips-bubbles .sc-bubble .logo-slot-sm img,
body.app-desktop #subs-bubbles .sc-bubble .logo-slot-sm img,
body.app-desktop #search-platform-pills .filter-pill .logo-slot-sm img {
  width: 100% !important; height: 100% !important; object-fit: contain !important;
}

/* (c) Filter-Segment generalisiert (Home + Trends + Abos teilen das eine
   #filter-tabs-Element). */
body.app-desktop #content #filter-tabs {
  display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important;
  width: auto !important; max-width: none !important;
  padding: 3px !important; gap: 2px !important; margin: 0 !important;
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important; border-radius: 9px !important; box-shadow: none !important;
}
body.app-desktop #content #filter-tabs .filter-tab {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 30px !important; min-height: 0 !important; padding: 0 15px !important; margin: 0 !important;
  border: none !important; border-top: none !important; border-bottom: none !important;
  border-radius: 7px !important; box-shadow: none !important;
  background: transparent !important; color: var(--pc-muted) !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
}
body.app-desktop #content #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; font-weight: 600 !important;
}
/* Gruppen/Kalender außerhalb der Abos ausblenden (Home + Trends), in Abos sichtbar. */
body.app-desktop:not(.nav-subscriptions) #content #filter-tabs .filter-tab-groups,
body.app-desktop:not(.nav-subscriptions) #content #filter-tabs .filter-tab-calendar {
  display: none !important;
}
/* Filter oben-rechts in jeder Feed-Sektion mit Titel. */
body.app-desktop #section-home,
body.app-desktop #section-trending,
body.app-desktop #section-subscriptions { position: relative !important; }
body.app-desktop #content #filter-tabs {
  position: absolute !important; top: 0 !important; right: 32px !important; z-index: 3 !important;
}

/* (d) Suche: eigenes #search-filter-tabs als Segment (inline, nicht absolut). */
body.app-desktop #content #search-filter-tabs {
  display: inline-flex !important; align-items: center !important; gap: 2px !important; padding: 3px !important;
  width: auto !important; max-width: none !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  border-radius: 9px !important; box-shadow: none !important;
}
body.app-desktop #content #search-filter-tabs .filter-tab {
  height: 30px !important; min-height: 0 !important; padding: 0 15px !important; margin: 0 !important;
  border: none !important; border-radius: 7px !important; background: transparent !important;
  color: var(--pc-muted) !important; font-size: 13px !important; font-weight: 500 !important;
  display: inline-flex !important; align-items: center !important; box-shadow: none !important;
}
body.app-desktop #content #search-filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v24 — Kontrast-Fixes (Suche-Pillen, Toggles/Akzent)
   ══════════════════════════════════════════════════════════════════════════ */

/* Hoster-Pillen-Text IMMER lesbar: theme-*.css (Z.5784: color:#12131a) und ui-auth
   (#000) färbten die aktive Such-„Alle"-Pille schwarz auf dunkler Tile → unlesbar.
   2-ID-Selektor (#content #<bar>) schlägt beide. Gilt für alle Feed-/Such-Leisten. */
body.app-desktop #content #search-platform-pills .filter-pill,
body.app-desktop #content #search-platform-pills .filter-pill.active,
body.app-desktop #content #search-platform-pills .filter-pill.on,
body.app-desktop #content #session-platform-bar .sc-bubble,
body.app-desktop #content #session-platform-bar .sc-bubble.active,
body.app-desktop #content #session-platform-bar .sc-bubble.on,
body.app-desktop #content #shorts-bubbles .sc-bubble,
body.app-desktop #content #clips-bubbles .sc-bubble,
body.app-desktop #content #subs-bubbles .sc-bubble {
  color: var(--pc-text) !important;
}
body.app-desktop #content #search-platform-pills .filter-pill.active svg,
body.app-desktop #content #session-platform-bar .sc-bubble.active svg {
  stroke: var(--pc-text) !important;
}

/* Toggles/Akzente im Menü an das Theme angleichen: --neon-pink (Switch-„on",
   diverse Akzente) lief im Dark-Theme auf Lila → auf Theme-Akzent umbiegen. */
body.theme-dark-cyber, body.theme-cyberpunk, body.theme-classic { --neon-pink: var(--pc-accent); }
body.app-desktop .pc-switch input:checked + .pc-switch-track { background: var(--pc-accent) !important; }

/* Settings-Menü links: inaktive Einträge lesbarer (waren zu dunkles Grau auf dunkler
   Tile). Aktiver Eintrag (Akzent-Fläche) behält dunklen Text. */
body.app-desktop #settings-content .settings-group-title:not(.active),
body.app-desktop .settings-nav-item:not(.active),
body.app-desktop .settings-menu-item:not(.active) {
  color: var(--pc-text, var(--text)) !important;   /* v26-Härtung: Fallback für Overlay-Themes (--pc-* dort undefiniert) */
}

/* ══ §RESKIN-STARTSEITE v25 — Clips/Shorts: „Weiter"-Pfeil (sc-arrow-next) wieder zeigen ══
   Die App blendet den Vorwärts-Pfeil auf Desktop-Web aus (theme @media ≥1024px:
   body.platform-pc .shorts-stage .sc-arrow-next{display:none} — wegen Platz neben der
   Engagement-Spalte). User will ihn zurück (Clips UND Shorts). !important schlägt das
   display:none; Position kommt aus der bestehenden .sc-arrow-next-Regel. */
body.app-desktop .shorts-stage .sc-arrow-next,
body.app-desktop .shorts-stage-clip .sc-arrow-next,
body.app-desktop .sc-arrow-next { display: inline-flex !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v26 — Einstellungen nach Mockup + Lesbarkeit + Kopplung
   (User 2026-07-23). Ziel: Settings-Untermenü/Panels wie publicore-reskin-
   preview-settings.html, unlesbare Sektions-Header fixen, Kopplungs-Screen um
   Anleitung + prominenten Sicherheitshinweis erweitern.
   ROBUST ÜBER ALLE 9 THEMES: Der Reskin definiert die --pc-*-Palette nur für die
   3 Basis-Body-Klassen (theme-dark-cyber/cyberpunk/classic). Damit die Regeln
   auch auf den 6 Overlay-Themes (theme-dark/fuchsia/retro/3×-anopie) greifen,
   nutzt JEDER Token einen Fallback auf das native App-Token:
   var(--pc-text, var(--text)) usw. → auf Overlay-Themes gilt die Theme-Eigenfarbe.
   Nur Desktop-Web (body.app-desktop) — TV/Touch unberührt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) LESBARKEIT: Sektions-Header waren dunkelgrau-auf-dunkel (--text-dim →
   Reskin-Remap auf --pc-muted). Als klar lesbarer, sauberer Titel neu setzen
   (nicht mehr winziges graues Monospace). Gilt für ALLE settings-group-title. */
body.app-desktop #settings-content .settings-group-title {
  color: var(--pc-text, var(--text)) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
/* Beschreibungs-/Body-Text im Menü lesbar halten (heller Sekundärton, nie
   der zu dunkle --pc-muted). */
body.app-desktop #settings-content .settings-info-title { color: var(--pc-text, var(--text)) !important; }
body.app-desktop #settings-content .settings-info-desc,
body.app-desktop #settings-content .settings-sub,
body.app-desktop #settings-content .pairing-devices-title {
  color: var(--pc-text, var(--text)) !important; opacity: .82 !important;
}

/* ── (2) UNTERMENÜ-TABS wie Mockup .sub-item: inaktiv lesbar-gedämpft, aktiv
   Akzent-Fläche + Inset-Balken. (Die App-Klasse ist .settings-tab.) */
body.app-desktop #settings-content .settings-tab:not(.active),
body.app-desktop .settings-tabbar .settings-tab:not(.active) {
  color: var(--pc-text, var(--text)) !important; opacity: .78;
}
body.app-desktop #settings-content .settings-tab:not(.active):hover {
  opacity: 1; background: var(--pc-surface2, var(--card-2)) !important;
}
body.app-desktop #settings-content .settings-tab.active {
  color: var(--pc-text, var(--text)) !important; opacity: 1;
  background: var(--pc-active, rgba(127,138,161,.14)) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent, var(--sys-focus)) !important;
}

/* ── (3) PiP-Segment (S/M/L) + Ecken-Grid: aktiver Zustand = Akzent-Fläche mit
   dunklem, kontraststarkem Text (wie Mockup-Aktivpille). Inaktiv lesbar. */
body.app-desktop #settings-content .pip-seg-btn,
body.app-desktop #settings-content .pip-corner-btn { color: var(--pc-text, var(--text)) !important; }
body.app-desktop #settings-content .pip-seg-btn.active,
body.app-desktop #settings-content .pip-seg-btn.on,
body.app-desktop #settings-content .pip-corner-btn.active,
body.app-desktop #settings-content .pip-corner-btn.on {
  background: var(--pc-accent, var(--sys-focus)) !important;
  border-color: var(--pc-accent, var(--sys-focus)) !important;
  color: #07080d !important;
}

/* ── (4) KOPPLUNG: TV-Code prominent wie Mockup .codebox (30px Mono). */
body.app-desktop #settings-content .settings-pair-token:not(.pairing-token-locked) {
  font-family: ui-monospace, Menlo, monospace !important;
  font-size: 30px !important; font-weight: 700 !important; letter-spacing: .14em !important;
  color: var(--pc-text, var(--text)) !important;
}

/* ── (5) KOPPLUNG-ANLEITUNG (neu, von settings.js renderPairing injiziert):
   nummerierte Schritt-Liste über der Geräteliste. */
body.app-desktop #settings-content .pair-steps {
  margin: 0 0 18px; padding: 0; list-style: none;
  counter-reset: pairstep;
}
body.app-desktop #settings-content .pair-steps-title {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pc-text, var(--text)); margin: 0 0 10px;
}
body.app-desktop #settings-content .pair-step {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 7px 0; color: var(--pc-text, var(--text)); font-size: 13.5px; line-height: 1.45;
}
body.app-desktop #settings-content .pair-step::before {
  counter-increment: pairstep; content: counter(pairstep);
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--pc-accent, var(--sys-focus)); color: #07080d;
}

/* ── (6) SICHERHEITSHINWEIS prominenter: gerahmte Box statt blasser Fließtext,
   mit Schloss-Glyphe. Gilt für die bestehende .qr-privacy-note UND die neue
   „Code nicht teilen"-Zeile (.pair-security). */
body.app-desktop #settings-content .qr-privacy-note,
body.app-desktop #settings-content .pair-security {
  display: block; margin: 12px 0 0; padding: 10px 12px 10px 34px; position: relative;
  border: 1px solid var(--pc-border, var(--border)); border-radius: 10px;
  background: var(--pc-surface2, var(--card-2));
  color: var(--pc-text, var(--text)) !important; opacity: .92;
  font-size: 12px; line-height: 1.5;
}
body.app-desktop #settings-content .qr-privacy-note::before,
body.app-desktop #settings-content .pair-security::before {
  content: "\1F512"; position: absolute; left: 11px; top: 9px; font-size: 13px; opacity: .9;
}
body.app-desktop #settings-content .pair-security { border-color: var(--pc-accent, var(--sys-focus)); }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v27 — Settings-D-Pad-Nav, Sidebar-Collapse (Leanback),
   Farbenblind-/Overlay-Themes, Submenü-Highlight (User 2026-07-23)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (D3) OVERLAY-THEMES bekommen die --pc-*-Palette (auf ihre nativen Tokens
   gemappt). Der Reskin definierte --pc-* bisher NUR für die 3 Basis-Themes
   (dark-cyber/cyberpunk/classic) → auf dark/fuchsia/retro + den 3 Farbenblind-
   Themes waren alle var(--pc-*)-Regeln ungültig: Hoster-Pillen unsichtbar (leere
   Fläche/kein Rand), aktive „Alle"-Pille transparent mit dunklem Text = unlesbar.
   Mapping auf var(--native)) → ALLE Reskin-Regeln greifen mit der Theme-Eigenpalette. */
body.theme-dark, body.theme-fuchsia, body.theme-retro,
body.theme-protanopia, body.theme-deuteranopia, body.theme-tritanopia {
  --pc-bg: var(--bg);
  --pc-surface: var(--card);
  --pc-surface2: var(--card-2);
  --pc-border: var(--border);
  --pc-text: var(--text);
  --pc-muted: var(--text-dim);
  --pc-accent: var(--sys-focus);
  --pc-accent2: var(--sys-focus);
  --pc-active: rgba(255,255,255,.10);
  --pc-soft: rgba(255,255,255,.06);
  --pc-glow: rgba(0,0,0,0);
  --pc-live: var(--live);
}

/* ── (D1) SETTINGS-UNTERMENÜ als vertikale Fokus-SPALTE (wie die Sidebar).
   Die App rendert die Tabbar als umbrechende Pillen-ZEILE (flex-wrap) → D-Pad
   UP/DOWN (settingsTabIdx±1) sprang seitwärts/in die nächste Umbruchzeile statt
   sauber vertikal. Als Spalte = Index-Reihenfolge == optische Reihenfolge. */
body.app-desktop .settings-tabbar {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
body.app-desktop .settings-tabbar .settings-tab {
  width: 100% !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
}

/* ── (D6) SUBMENÜ-HIGHLIGHT = Sidebar-Style. Die v26-Aktiv-Regel war auf
   #settings-content gescoped, aber die Tabbar hängt als GESCHWISTER VOR
   #settings-content (settings.js insertBefore) → matchte nie. Korrekt via
   .settings-tabbar. Aktiv = getönte Fläche (--pc-active, transluzent) + Inset-
   Akzent-Balken + heller Text. Auf Cyberpunk (Akzent pink/neon) bleibt der Text
   lesbar, weil die Fläche transluzent ist (kein Weiß-auf-Vollton-Problem). */
body.app-desktop .settings-tabbar .settings-tab.active {
  background: var(--pc-active, rgba(127,138,161,.16)) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent, var(--sys-focus)) !important;
  color: var(--pc-text, var(--text)) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* ── (D2) SIDEBAR-COLLAPSE per D-Pad/Leanback: Der erste Pfeiltasten-/WASD-Druck
   aktiviert app-leanback; dessen Regel `body.app-desktop.app-leanback #sidebar
   {width:268px}` (0,3,1) schlug `body.sidebar-collapsed #sidebar {width:64px}`
   (0,2,1) → Sidebar blieb breit (nur Piktogramme, keine Verschmälerung). Override
   mit höherer Spezifität für den kombinierten Zustand. */
body.app-desktop.app-leanback.sidebar-collapsed #sidebar { width: 64px !important; }
body.app-desktop.app-leanback.sidebar-collapsed .sidebar-toggle { left: 64px !important; }

/* ── (D4) TASTATURLEISTEN-TOGGLE: Der Reskin baut die reale Steuerleiste als
   #rsk-wasd-bar (positionBar setzt display:flex INLINE, ohne !important). Der
   „Tastaturleiste"-Toggle (pages/settings.js initKbdBar) setzt body.kbd-bar-hidden;
   diese !important-Regel schlägt das inline display:flex → Leiste blendet sauber aus.
   (Alte #hint-bar-Gate-Regel bleibt für Nicht-Reskin-Kontexte bestehen.) */
body.app-desktop.kbd-bar-hidden #rsk-wasd-bar { display: none !important; }
body.app-desktop.kbd-bar-hidden #hint-bar { display: none !important; }
/* §v47 (User 2026-07-26, Punkt 12): der Toggle ist KEIN Desktop-Exklusivum. Auf dem
   TV ist die Steuerleiste #hint-bar (die WASD-Leiste gibt es dort nicht) — also auch
   dort abschaltbar machen. Handy bleibt aussen vor: dort existiert gar keine
   Bottom-Steuerleiste (body.app-phone #hint-bar ist per Basis-CSS aus). */
body.app-tv.kbd-bar-hidden #hint-bar { display: none !important; }
/* Ist die Leiste aus, braucht der Content auch keine Freihalte-Zone mehr. */
body.app-tv.kbd-bar-hidden #content { padding-bottom: 24px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v28 — Desktop-Player (Video + Live) nach Vorlage
   publicore-reskin-preview-player_1.html (User 2026-07-23).
   Struktur existiert komplett (statisches #player-desktop + player-desktop.js);
   hier reines Reskin-CSS auf die realen pd-*-Klassen. WICHTIG: player.css lädt
   NACH dem Reskin → höhere Spezifität (body.app-desktop #id) + !important nötig.
   Der Player erbt über den Token-Remap (v-Blöcke) bereits die --pc-*-Palette
   (--card→--pc-surface, --sys-focus→--pc-accent …); hier nur Form/Layout/Hoster.
   Hoster-Rahmen: #pd-video-stage[data-hoster=…] wird vom Reskin-JS gesetzt.
   ══════════════════════════════════════════════════════════════════════════ */

/* (1) LAYOUT: rechte Spalte fixe 372px wie die Vorlage (statt fluid 24.5fr). */
@media (min-width:1024px) {
  body.app-desktop #player-desktop {
    grid-template-columns: minmax(0,1fr) 372px !important;
    gap: 24px !important;
  }
}

/* (2) VIDEO-BÜHNE: kräftiger gerundet + Hoster-farbiger Rahmen/Glow (wie .video.yt/.kick).
   Fallback ohne data-hoster = dezenter Akzent-Rahmen. */
body.app-desktop #pd-video-stage {
  border-radius: 14px !important;
  border: 1.5px solid var(--pc-border, var(--border)) !important;
}
body.app-desktop #pd-video-stage[data-hoster="youtube"]    { border-color:#ff4d4d !important; box-shadow:0 0 26px rgba(255,77,77,.22) !important; }
body.app-desktop #pd-video-stage[data-hoster="twitch"]     { border-color:#9147ff !important; box-shadow:0 0 26px rgba(145,71,255,.24) !important; }
body.app-desktop #pd-video-stage[data-hoster="kick"]       { border-color:#53fc18 !important; box-shadow:0 0 26px rgba(83,252,24,.22) !important; }
body.app-desktop #pd-video-stage[data-hoster="dailymotion"]{ border-color:#2a7fff !important; box-shadow:0 0 26px rgba(42,127,255,.22) !important; }
body.app-desktop #pd-video-stage[data-hoster="peertube"]   { border-color:#f1680d !important; box-shadow:0 0 26px rgba(241,104,13,.20) !important; }

/* (3) PICTOBAR: linksbündig statt zentriert; Buttons als zusammenhängende, gerundete
   Segment-Gruppe (player.css macht sie schon randlos/-1px → hier Enden runden + Theme). */
body.app-desktop #pd-pictobar { justify-content: flex-start !important; gap: 8px !important; margin: 12px 0 14px !important; }
body.app-desktop #pd-pictobar .pd-picto-row { width: auto !important; }
body.app-desktop #pd-pictobar .pd-picto {
  background: var(--pc-surface, var(--card)) !important;
  border: 1px solid var(--pc-border, var(--border)) !important;
  color: var(--pc-muted, var(--text-dim)) !important;
  width: 36px !important; height: 36px !important;
}
body.app-desktop #pd-pictobar .pd-picto:hover { color: var(--pc-text, var(--text)) !important; border-color: var(--pc-accent, var(--sys-focus)) !important; }
/* erste/letzte Picto in einer Reihe runden → Segment-Optik */
body.app-desktop #pd-pictobar .pd-picto-row .pd-picto:first-child { border-top-left-radius: 9px !important; border-bottom-left-radius: 9px !important; }
body.app-desktop #pd-pictobar .pd-picto-row .pd-picto:last-child  { border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; }
body.app-desktop #pd-pictobar .pd-picto.active {
  background: var(--pc-accent, var(--sys-focus)) !important; border-color: var(--pc-accent, var(--sys-focus)) !important; color: #07080d !important;
}
body.app-desktop #pd-pictobar .pd-picto-adv-toggle {
  background: var(--pc-surface, var(--card)) !important; border: 1px solid var(--pc-border, var(--border)) !important;
  color: var(--pc-text, var(--text)) !important; border-radius: 9px !important;
}

/* (4) TITEL + CREATOR-ZEILE */
body.app-desktop #pd-title { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em !important; margin: 8px 0 12px !important; }
body.app-desktop #pd-creator-row { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; }
body.app-desktop #pd-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; flex: none !important; }
body.app-desktop #pd-creator-name { font-size: 15px !important; font-weight: 600 !important; color: var(--pc-text, var(--text)) !important; }
/* „Folgen" = Akzent-Pill (Primär-Button) */
body.app-desktop #pd-follow.pd-btn-primary {
  height: 40px !important; padding: 0 20px !important; border-radius: 9px !important; border: none !important;
  background: var(--pc-accent, var(--sys-focus)) !important; color: #07080d !important; font-weight: 700 !important; font-size: 14px !important;
}

/* (5) AKTIONEN: Like/Dislike als verbundene Pill; Teilen/Playlist als Pills. */
body.app-desktop #pd-react {
  display: inline-flex !important; align-items: stretch !important; border: 1px solid var(--pc-border, var(--border)) !important;
  border-radius: 20px !important; overflow: hidden !important; background: var(--pc-surface, var(--card)) !important;
}
body.app-desktop #pd-react .pd-react-btn {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  color: var(--pc-text, var(--text)) !important; padding: 0 15px !important; height: 38px !important;
}
body.app-desktop #pd-react .pd-react-btn + .pd-react-btn { border-left: 1px solid var(--pc-border, var(--border)) !important; }
body.app-desktop #pd-react .pd-react-btn.active { color: var(--pc-accent, var(--sys-focus)) !important; }
body.app-desktop #pd-actions .pd-btn:not(.pd-btn-primary) {
  height: 38px !important; padding: 0 16px !important; border-radius: 20px !important;
  border: 1px solid var(--pc-border, var(--border)) !important; background: var(--pc-surface, var(--card)) !important;
  color: var(--pc-text, var(--text)) !important; font-weight: 600 !important; font-size: 13.5px !important;
}
body.app-desktop #pd-actions .pd-btn:not(.pd-btn-primary):hover { background: var(--pc-surface2, var(--card-2)) !important; }

/* (6) BESCHREIBUNG + KOMMENTARE als Cards (pd-card). */
body.app-desktop #pd-description.pd-card,
body.app-desktop #pd-comments.pd-card {
  background: var(--pc-surface, var(--card)) !important; border: 1px solid var(--pc-border, var(--border)) !important;
  border-radius: 12px !important; padding: 14px 16px !important;
}
body.app-desktop #pd-desc-toggle { color: var(--pc-accent, var(--sys-focus)) !important; font-weight: 600 !important; background: transparent !important; border: none !important; }
body.app-desktop #pd-comments-head { font-size: 15px !important; font-weight: 700 !important; }

/* (7) EMPFEHLUNGEN-ASIDE: Tabs als Chips, Tiles mit Hoster-Glow-Thumb. */
body.app-desktop #pd-recos.pd-card { background: transparent !important; border: none !important; padding: 0 !important; }
body.app-desktop #pd-recos-title { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 12px !important; }
/* §RESKIN v40 (User 2026-07-26): Empfehlungs-Tabs als EIN Segment-Control (ein Rechteck
   mit abgerundeten Ecken um alle, aktiver Tab gefüllt hervorgehoben) — wie das Startseiten-
   Segment/Mockup .seg, statt einzelner Pillen. */
body.app-desktop #pd-recos-tabs {
  display: inline-flex !important; gap: 2px !important; padding: 3px !important; margin-bottom: 14px !important;
  width: auto !important; border-radius: 11px !important;
  background: var(--pc-surface2, var(--card-2, rgba(255,255,255,.05))) !important;
  border: 1px solid var(--pc-border, var(--border)) !important;
}
body.app-desktop #pd-recos-tabs .pd-reco-tab {
  height: 30px !important; padding: 0 15px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important;
  border: none !important; background: transparent !important; color: var(--pc-muted, var(--text-dim)) !important;
}
body.app-desktop #pd-recos-tabs .pd-reco-tab:hover { color: var(--pc-text, var(--text)) !important; }
body.app-desktop #pd-recos-tabs .pd-reco-tab.active {
  background: var(--pc-accent, var(--sys-focus)) !important; color: #07080d !important; border: none !important;
}
/* §RESKIN v40: Benachrichtigungs-Badge NIE bei 0 zeigen — leerer Badge (Text via
   updateBadge geleert) wird zusätzlich per :empty ausgeblendet, damit ein „0" nie
   durchrutscht; der rote Eck-Kreis (theme .notif-badge) bleibt für n>0. */
.notif-badge:empty { display: none !important; }

/* §RESKIN v41 (User 2026-07-26): „Meine Kanäle" in Einstellungen → Profil. */
.profile-channels { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pc-border, var(--border, rgba(255,255,255,.1))); }
.profile-channels.hidden { display: none; }

/* ══ UI-EMPTY-BAR-COLLAPSE (Folge #286, 2026-08-03, Cloder) ═══════════════════
   Kosmetik-Nachtrag zu #286. App.SC.render togglet im Leerfall .hidden auf den
   beiden Feed-Leisten #subs-bubbles (Abo-Ansicht) und #session-platform-bar
   (Home-Feed). ABER: .hidden ist in dieser Codebasis KEIN globales Utility —
   jedes Element bringt sein eigenes X.hidden{display:none} mit (vgl. Block
   „BUG-DESKTOP-BLACKBAR-PLAYERCHAT" weiter unten). Für diese zwei Leisten
   existierte ID-scoped KEINE solche Regel: #subs-bubbles hatte gar keine,
   #session-platform-bar nur eine KLASSEN-Regel .session-platform-bar.hidden in
   3 von 9 Themes (theme-classic/-cyberpunk/-dark-cyber). Folge: leere Leiste
   kollabiert nur auf offsetHeight≈1px (transparent, 0 Kinder, 1px borderBottom)
   statt zu verschwinden → 1px-Haarlinie. Betrifft BEIDE Leisten, alle Geräte.

   Bewusst geräte-/theme-neutral (kein Theme-Triplikat, Lesson #291), rein
   additiv — greift NUR bei .hidden, die JS-Logik bleibt unangetastet.

   Spezifitäts-Hinweis: reskin-mobile.css:146 setzt
   `body.app-phone #session-platform-bar { display:flex !important }` OHNE
   :not(.hidden)-Guard → (1,1,1)!important und lädt NACH dieser Datei. Ein naives
   `#session-platform-bar.hidden` (1,1,0) verlöre auf app-phone. Darum der
   `html body`-Präfix → (1,1,2)!important, schlägt die Handy-Regel auf allen
   Geräten, ohne selbst geräte-gebunden zu sein. TV/Desktop haben keine
   unbedingte display-!important-Regel auf diesen Leisten. */
html body #subs-bubbles.hidden,
html body #session-platform-bar.hidden { display: none !important; }

.profile-channels-label { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--pc-text, var(--text)); }
.profile-chan-master { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.profile-chan-master input { width: 16px; height: 16px; accent-color: var(--pc-accent, var(--sys-focus)); }
.profile-chan-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.profile-chan-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: var(--pc-surface2, var(--card-2, rgba(255,255,255,.04))); border: 1px solid var(--pc-border, var(--border));
}
.profile-chan-ic { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: none; }
.profile-chan-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chan-row input { width: 16px; height: 16px; accent-color: var(--pc-accent, var(--sys-focus)); flex: none; }
.profile-chan-empty { font-size: 12.5px; color: var(--pc-muted, var(--text-dim)); margin: 0 0 12px; }
.profile-chan-add-lbl { display: block; font-size: 12.5px; color: var(--pc-muted, var(--text-dim)); margin-bottom: 8px; }
.profile-chan-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-chan-add-btn {
  width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--pc-surface, var(--card)); border: 1px solid var(--pc-border, var(--border));
}
.profile-chan-add-btn:hover { border-color: var(--pc-accent, var(--sys-focus)); }
.profile-chan-add-btn img { width: 20px; height: 20px; object-fit: contain; }

/* §RESKIN v42 (User 2026-07-26): „Profil ansehen"-Button + öffentliches Entity-Profil
   (Info-Tab: verknüpfte Kanäle + externe Links). */
.profile-chan-view {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 9px 14px;
  border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--pc-accent-contrast, #fff); background: var(--pc-accent, var(--sys-focus, #2563eb));
  border: 1px solid var(--pc-accent, var(--sys-focus));
}
.profile-chan-view:hover { filter: brightness(1.08); }
.profile-chan-view[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.profile-chan-view-hint { font-size: 12px; color: var(--pc-muted, var(--text-dim)); margin: 0 0 10px; }
/* Entity-Profil, Info-Tab */
.creator-info-h { font-size: 13px; font-weight: 700; margin: 14px 0 8px; color: var(--pc-text, var(--text)); }
.creator-info-h:first-child { margin-top: 0; }
.creator-channels-list { display: flex; flex-direction: column; gap: 6px; }
.creator-channel-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  background: var(--pc-surface2, var(--card-2, rgba(255,255,255,.04))); border: 1px solid var(--pc-border, var(--border));
}
.creator-channel-row .logo-slot-sm img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.creator-channel-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-channel-plat { font-size: 11.5px; color: var(--pc-muted, var(--text-dim)); flex: none; }
.creator-links-list { display: flex; flex-direction: column; gap: 4px; }
.creator-ext-link { font-size: 13px; color: var(--pc-accent, var(--sys-focus)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-ext-link:hover { text-decoration: underline; }

/* §RESKIN v43 (User 2026-07-26): Pro-Kanal-Filter im Entity-Profil (Streams/Video).
   Hoster-gerahmte Chips: Logo vorne + Kanalname. Default = Hauptkanal. */
.creator-chan-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.creator-chan-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--pc-text, var(--text)); background: var(--pc-surface, var(--card));
  border: 1px solid var(--pc-border, var(--border));
}
.creator-chan-chip:hover { border-color: var(--pc-accent, var(--sys-focus)); }
.creator-chan-chip.active {
  color: var(--pc-accent-contrast, #fff); background: var(--pc-accent, var(--sys-focus, #2563eb));
  border-color: var(--pc-accent, var(--sys-focus));
}
.creator-chan-chip .logo-slot-sm { display: inline-flex; }
.creator-chan-chip .logo-slot-sm img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.creator-chan-chip-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* TV/D-Pad: Chip-Fokus deutlich sichtbar. */
.creator-chan-chip:focus-visible { outline: 3px solid var(--pc-accent, var(--sys-focus, #faff00)); outline-offset: 2px; }

/* §RESKIN v44 (User 2026-07-26): Profil-URL-Box in „Meine Kanäle"
   (publicore.tv/<username>, an den eindeutigen Username gekoppelt). */
.profile-url-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--pc-surface2, var(--card-2, rgba(255,255,255,.04))); border: 1px solid var(--pc-border, var(--border));
}
.profile-url-label { font-size: 12px; font-weight: 600; color: var(--pc-muted, var(--text-dim)); flex: none; }
.profile-url-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600;
  color: var(--pc-accent, var(--sys-focus)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-url-copy {
  flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pc-text, var(--text)); background: var(--pc-surface, var(--card)); border: 1px solid var(--pc-border, var(--border));
}
.profile-url-copy:hover { border-color: var(--pc-accent, var(--sys-focus)); }
body.app-desktop #pd-recos-list .pd-reco { border-radius: 10px !important; padding: 8px !important; }
body.app-desktop #pd-recos-list .pd-reco:hover { background: var(--pc-surface2, var(--card-2)) !important; }
body.app-desktop #pd-recos-list .pd-reco-thumb { border: 1.5px solid var(--pd-glow, var(--pc-border, var(--border))) !important; border-radius: 9px !important; }

/* (8) LIVE-MODUS: Chat-Frame als gerahmte Card, LIVE unten-Meta. Chat-Höhensync
   macht player-desktop.js (syncChatHeight) — hier nur Optik. */
body.app-desktop #player-overlay.pd-live-mode #pd-chat.pd-card {
  background: var(--pc-surface, var(--card)) !important; border: 1px solid var(--pc-border, var(--border)) !important;
  border-radius: 12px !important; overflow: hidden !important;
}
body.app-desktop #player-overlay.pd-live-mode #pd-chat-frame { border-radius: 0 !important; }

/* (9) MODUS-SCHUTZ (Claudit FEAT-PLAYER-RESKIN, r1) — v28-Rahmen/-Glow der
   Video-Bühne dürfen die nativen Sondermodi NICHT überschreiben. Der
   [data-hoster]-Glow (Spez. 0,1,2,1 + !important) schlug sonst: den
   Fullscreen-Reset (#pd-video-stage:fullscreen, 0,1,1,0), den PiP-Schlagschatten
   (0,1,1,0) + den PiP-Tastatur-Fokusring (.pip-kbd-focused, 0,1,2,0, KEIN
   !important → a11y-Verlust) und den großen Kino-Glow (body.pd-cinema …,
   0,1,1,1). Hier gezielt wiederhergestellt — Spez. ≥ nativ UND in dieser Datei
   NACH dem Hoster-Block (schlägt v28 bei Gleichstand per Quell-Reihenfolge). */
/* Echtes Vollbild (Fullscreen-API): randlos, ungerundet, kein Rahmen/Glow. */
body.app-desktop #pd-video-stage:fullscreen,
body.app-desktop #pd-video-stage:-webkit-full-screen,
body.app-desktop #pd-video-stage:-ms-fullscreen {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* PiP-Float: nativer Schlagschatten (Tiefen-Cue) + Tastatur-Fokusring bleiben. */
body.app-desktop #pd-video-stage.pd-pip-float {
  border: 1px solid var(--pc-accent, var(--sys-focus, #2563eb)) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.5) !important;
}
body.app-desktop #pd-video-stage.pd-pip-float.pip-kbd-focused {
  box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 0 3px var(--pc-accent, var(--sys-focus, #faff00)) !important;
}
/* Kino-Modus: großer Marken-Glow (native --pd-cinema-glow) statt 26px-Hoster-Glow;
   kein v28-Rahmen (Kino hatte nativ keinen). Radius bleibt nativ (10px, Theme). */
body.app-desktop.pd-cinema #pd-video-stage {
  border: 0 !important;
  box-shadow: 0 0 80px 20px var(--pd-cinema-glow, var(--pc-accent, var(--sys-focus))) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v29 — Cyberpunk-Farbenspiel im Highlight (User 2026-07-23)
   Nur theme-cyberpunk: aktive Sidebar-/Submenü-Fläche = neon-GELB (transluzent),
   Schrift = TÜRKIS (mittel, lesbar — nicht zu hell), Rand-Balken bleibt PINK.
   → alle drei Neon-Töne im Highlight vereint. Andere Themes unberührt.
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-cyberpunk.app-desktop .nav-item.active,
body.theme-cyberpunk.app-desktop .settings-tabbar .settings-tab.active {
  background: #faff00 !important;                  /* SOLIDES Neon-Gelb (knallig, keine Transparenz) */
  box-shadow: inset 4px 0 0 #ff2bd6 !important;    /* pinker Rand bleibt */
  color: #06463f !important;                       /* dunkles Türkis — auf Neon-Gelb klar lesbar */
}
body.theme-cyberpunk.app-desktop .nav-item.active .nav-icon svg,
body.theme-cyberpunk.app-desktop .nav-item.active svg,
body.theme-cyberpunk.app-desktop .settings-tabbar .settings-tab.active svg {
  stroke: #06463f !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v30 — Eingeklappte Sidebar = reine Logo-Marke (User 2026-07-23)
   Das Logo-SVG trägt eingebettete Text-Labels PLAY/LIVE; die Wortmarke
   (.pc-brand-word) ist im Collapse schon per Theme versteckt, aber PLAY/LIVE
   blieben sichtbar. Im eingeklappten Zustand ausblenden → es bleibt die
   grafische Marke (Rahmen + Dreieck + Kreis), textfrei wie das Favicon.
   ══════════════════════════════════════════════════════════════════════════ */
body.app-desktop.sidebar-collapsed #sidebar-logo .pc-tv-play-label,
body.app-desktop.sidebar-collapsed #sidebar-logo .pc-tv-live-label,
body.app-desktop.sidebar-collapsed #sidebar-logo .pc-brand-word { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v31 — Kachel-Meta kompakter (User 2026-07-23)
   Das Theme setzt `.card-body { height:140px }` — dimensioniert für die größeren
   TV-Fonts. Mit den kleineren Desktop-Reskin-Fonts (Titel 14px/2.6em) ist der Inhalt
   nur ~113px → viel „wasted space" unter dem Titel (margin-top:auto am Creator schob
   Creator+Meta nach unten). Auf Desktop auf eine knappe Höhe reduzieren; die 2 Zeilen
   Titel bleiben reserviert (card-title min/max-height 2.6em unverändert), nur der
   Leerraum darunter schrumpft. Nur .video-card (Kategorie-Karten haben eigene Höhe).
   ══════════════════════════════════════════════════════════════════════════ */
body.app-desktop .video-card .card-body { height: 126px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v32 — Player-Feinschliff (User 2026-07-23)
   (a) Seitenverhältnis-Segment Standard/Breitbild/Kino (#pd-aspect-seg) unter dem
       Player — ersetzt die redundanten Kino-/Breitbild-Piktobar-Knöpfe.
   (b) Kanal-Sub-Zähler (#pd-sub-count) unter dem Creator-Namen (Hoster-Icon-Badge
       darunter entfiel — Platz geht an den Inhalt).
   (c) Aktions-Pills „Teilen"/„Playlist" mit führendem Icon (wie im Review).
   ══════════════════════════════════════════════════════════════════════════ */

/* (a) Seitenverhältnis-Segment — verbundene Pill-Gruppe, aktive = Akzent. */
body.app-desktop #pd-aspect-seg {
  display: inline-flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 12px 0 6px !important; border: 1px solid var(--pc-border, var(--border)) !important;
  border-radius: 10px !important; overflow: hidden !important;
  background: var(--pc-surface, var(--card)) !important;
}
body.app-desktop #pd-aspect-seg.hidden { display: none !important; }
body.app-desktop #pd-aspect-seg .pd-aspect-btn {
  border: none !important; background: transparent !important; cursor: pointer !important;
  height: 32px !important; padding: 0 16px !important; font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--pc-muted, var(--text-dim)) !important;
  font-family: inherit !important; letter-spacing: .01em !important;
}
body.app-desktop #pd-aspect-seg .pd-aspect-btn + .pd-aspect-btn {
  border-left: 1px solid var(--pc-border, var(--border)) !important;
}
body.app-desktop #pd-aspect-seg .pd-aspect-btn:hover { color: var(--pc-text, var(--text)) !important; }
body.app-desktop #pd-aspect-seg .pd-aspect-btn.active {
  background: var(--pc-accent, var(--sys-focus)) !important; color: #07080d !important;
}

/* (b) Kanal-Sub-Zähler unter dem Namen. Farbe wird inline (Hoster-Brand) gesetzt. */
body.app-desktop #pd-sub-count,
body.app-desktop .pd-sub-count {
  font-size: 12px !important; font-weight: 600 !important; opacity: .85 !important;
  line-height: 1.2 !important; margin-top: 2px !important;
}
body.app-desktop #pd-sub-count.hidden,
body.app-desktop .pd-sub-count.hidden { display: none !important; }

/* ══ BUG-DESKTOP-BLACKBAR-PLAYERCHAT (2026-08-01, Cloder) ═══════════════════════
   Schwarzer 150px-Balken oben bei Live/Video auf app-desktop. #player-chat trägt
   .hidden, kollabiert aber NICHT: es gibt kein globales .hidden-Utility; jedes
   Element bringt sein eigenes X.hidden{display:none} mit. Für #player-chat existierte
   der Collapse nur für app-tv (reskin-tv.css:865) und app-phone (reskin-mobile.css:
   809-810) — die app-desktop-Entsprechung FEHLTE. Ohne sie bleibt der Container stehen
   und wird vom generischen #player-chat{background:#000} (theme-*.css:1564/1571/1587)
   schwarz gefärbt (v.a. bei chatlosem Hoster wie YouTube-VOD). Fix exakt parallel zu
   Handy/TV — greift NUR bei .hidden, sichtbarer Chat bleibt unberührt. */
body.app-desktop #player-chat.hidden,
body.app-desktop #player-overlay #player-chat.hidden { display: none !important; }

/* (c) „Teilen"/„Playlist" mit führendem Icon (currentColor via mask). */
body.app-desktop #pd-share::before,
body.app-desktop #pd-playlist-add::before {
  content: "" !important; display: inline-block !important;
  width: 16px !important; height: 16px !important; margin-right: 7px !important;
  vertical-align: -3px !important; background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-size: contain !important; mask-size: contain !important;
}
body.app-desktop #pd-share::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2012v7a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-7M16%206l-4-4-4%204M12%202v13'%2F%3E%3C%2Fsvg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2012v7a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1v-7M16%206l-4-4-4%204M12%202v13'%2F%3E%3C%2Fsvg%3E") !important;
}
body.app-desktop #pd-playlist-add::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h16M4%2012h16M4%2017h10M18%2015v6M15%2018h6'%2F%3E%3C%2Fsvg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h16M4%2012h16M4%2017h10M18%2015v6M15%2018h6'%2F%3E%3C%2Fsvg%3E") !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v33 — Kachel-Creator/Views-Feinschliff (User 2026-07-23)
   (a) Creator-/Streamer-Name prominenter: Schriftgröße ~auf Logo-Höhe (Logo-Slot
       = 18px) angehoben → bessere Lesbarkeit. Der Name bleibt EINZEILIG und wird
       bei Überlänge mit „…" gekürzt (Theme setzt text-overflow:ellipsis auf
       .card-creator-name; hier zusätzlich flex-wrap:nowrap auf .card-creator,
       damit Logo+Name NICHT auf zwei Zeilen umbrechen — vorher konnte ein langer
       Name umbrechen und wurde dann unten von der Karte abgeschnitten statt gekürzt).
   (b) Video-Aufrufe (.card-views, VOD) bekommen dieselbe Schriftgröße wie die
       Live-Zuschauerzahl (.card-viewers-live = 13px) — nur eben NICHT rot
       (Farbe bleibt gedämpft/faint, Rot ist den Live-Zuschauern vorbehalten).
   (c) Kachel-Höhe (v31) leicht angehoben (118→126px), damit der jetzt größere,
       einzeilige Creator PLUS die Meta-Zeile (Aufrufe/Upload-Alter — bei PeerTube
       liefert das Backend beides) vollständig sichtbar sind statt unten abgeschnitten.
   ══════════════════════════════════════════════════════════════════════════ */

/* (a) Creator-Name: so hoch wie das Logo, einzeilig mit Ellipsis. */
body.app-desktop .video-card .card-creator { flex-wrap: nowrap !important; }
body.app-desktop .video-card .card-creator-name {
  font-size: 16px !important; line-height: 1.25 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}

/* (b) VOD-Aufrufe = Größe der Live-Zuschauer (13px), aber nicht rot. */
body.app-desktop .video-card .card-views { font-size: 13px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v34 — Player 1:1 nach Vorlage (User 2026-07-25)
   Zwei Abweichungen der bisherigen Umsetzung von publicore-reskin-preview-player_1.html:
   (A) Seitenverhältnis-Segment (#pd-aspect-seg) und Piktogramm-Leiste (#pd-pictobar)
       standen als ZWEI gestapelte Reihen untereinander. Die Vorlage hat EINE
       Optionsleiste (.optbar): Segment links, Piktogramme rechtsbündig. Der neue
       Wrapper #pd-optbar (index.html) macht die gemeinsame Flex-Reihe.
   (B) Creator-Zeile: #pd-creator-meta war `display:contents` → Name + Sub-Zeile
       flossen in die Flex-Reihe statt zu stapeln, und der Name (flex:1) fraß die
       ganze Breite → die Aktions-Buttons brachen in eine 2. Zeile um (Zeile 108px
       hoch). Vorlage = .cinfo als Spalte (Name über Sub-Zeile) + Aktionen rechts,
       alles EINE Zeile. → Meta wird echte Flex-Spalte, Name wächst nicht mehr,
       Aktionen rechtsbündig (margin-left:auto).
   ══════════════════════════════════════════════════════════════════════════ */

/* (A) Optbar = eine Reihe: Segment links, Piktogramme rechts. */
body.app-desktop #pd-optbar {
  display: flex !important; align-items: center !important; gap: 12px !important;
  flex-wrap: wrap !important; margin: 12px 0 14px !important;
}
/* Die inneren Container erben ihre Optik (v28/v32); hier nur die Reihen-Margins neutralisieren
   und die Pictobar nach rechts schieben. */
body.app-desktop #pd-optbar #pd-aspect-seg { margin: 0 !important; }
body.app-desktop #pd-optbar #pd-pictobar {
  margin: 0 0 0 auto !important; width: auto !important; flex: 0 0 auto !important;
  justify-content: flex-end !important;
}

/* (B) Creator-Meta = Spalte (Name über Sub-Zeile) wie Mockup .cinfo. */
body.app-desktop #pd-creator-meta {
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  min-width: 0 !important; flex: 0 1 auto !important;
}
body.app-desktop #pd-creator-name {
  flex: 0 1 auto !important; width: auto !important; max-width: 100% !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
body.app-desktop #pd-creator-row { flex-wrap: wrap !important; align-items: center !important; }
/* order-Reset der Meta-Spalte: das Theme vergibt der Sub-Zeile (order:0) vs. Name (order:1)
   Werte für den alten display:contents-Fluss; in der echten Spalte kehrte das Name/Sub um.
   DOM-Reihenfolge erzwingen → Name über Sub-Zeile über Badges. */
body.app-desktop #pd-creator-meta > * { order: 0 !important; }

/* ── §v35 (User 2026-07-25): Button-Anordnung exakt nach Mockup .chrow + .actions ──
   Vorlage: In der Creator-Zeile steht rechts NUR „Folgen" (+ Hoster-Native-Follow);
   Like/Dislike + Teilen + Playlist bilden eine EIGENE Zeile darunter.
   Technik ohne DOM-Umbau (der mobile-active-Player teilt sich dasselbe #player-desktop-DOM
   und hat eigene contents/order-Regeln → darf nicht angefasst werden): #pd-actions wird auf
   Desktop `display:contents`, seine Buttons werden damit einzelne Flex-Items von
   #pd-creator-row und über `order` auf die zwei Zeilen verteilt. Der Zeilenumbruch kommt
   vom bereits existierenden Theme-`#pd-creator-row::after` (order:2, flex:1 0 100%). */
body.app-desktop #pd-creator-row > #pd-actions { display: contents !important; }
/* Zeile 1 rechts: Folgen + Native-Follow (order < 2 = vor dem ::after-Umbruch). */
body.app-desktop #pd-creator-row > #pd-actions > #pd-follow { order: 1 !important; margin-left: auto !important; }
body.app-desktop #pd-creator-row > #pd-actions > #pd-native-follow { order: 1 !important; margin-left: 0 !important; }
/* Zeile 2 (order > 2 = nach dem Umbruch), linksbündig wie Mockup .actions. */
body.app-desktop #pd-creator-row > #pd-actions > #pd-react,
body.app-desktop #pd-creator-row > #pd-actions > #pd-share,
body.app-desktop #pd-creator-row > #pd-actions > #pd-playlist-add { order: 3 !important; }
/* Like-Zähler (oft leer) ans Zeilenende — sonst führt sein leerer Kasten + gap zu einem
   linken Einzug der Aktions-Zeile. */
body.app-desktop #pd-creator-row > #pd-actions > #pd-likes { order: 4 !important; }

/* ── §v35 Sichtbarkeit (User 2026-07-25) ──
   (a) Kapitel-Navigator (#pd-chapters) vorerst ausblenden — Video-Feature evtl. später,
       Live braucht es nie. Nur ausgeblendet (display:none), Struktur/JS bleibt → reaktivierbar. */
#pd-chapters { display: none !important; }
/* (b) „Playlist"-Button im LIVE-Modus obsolet (man merkt sich keinen Livestream vor). */
#player-overlay.pd-live-mode #pd-playlist-add { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v36 — Player-Feinschliff nach Screenshot-Abgleich (User 2026-07-25)
   (A) LIVE-Player: Reihenfolge wie Mockup .live-below — Avatar/Name(+Sub) ÜBER dem
       Titel, dann Zuschauer-Meta/Beschreibung. Im Video bleibt Titel oben (Mockup .pmain).
       Nur der Live-Modus macht #pd-primary zur Flex-Spalte mit expliziter Reihenfolge;
       Video/Optbar bleiben zuoberst. Alle Kinder EXPLIZIT geordnet, damit die im DOM
       hinter dem Titel stehende Beschreibung nicht vor die Creator-Zeile rutscht.
   (B) Scrollraum: die fixe WASD-Tastenleiste (#rsk-wasd-bar, ~46px) überdeckte den
       letzten Player-Inhalt — unten Platz schaffen.
   ══════════════════════════════════════════════════════════════════════════ */
body.app-desktop #player-overlay.pd-live-mode #pd-primary { display: flex !important; flex-direction: column !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-topbar        { order: 0 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-video-stage   { order: 1 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-optbar        { order: 2 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-hoster-matrix { order: 3 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-creator-row   { order: 4 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-title         { order: 5 !important; margin-top: 2px !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-premium-optin { order: 6 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-description   { order: 7 !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-primary > #pd-comments      { order: 8 !important; }

/* (B) Scrollraum unter dem Player (beide Spalten) → Inhalt scrollt frei über die WASD-Leiste. */
body.app-desktop #player-desktop { padding-bottom: 88px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v37 — LIVE-Player 1:1 nach Mockup .chrow/.livemeta (User 2026-07-25)
   Screenshot-Abgleich: Live zeigte (a) zwei Folgen-Buttons + ▲▼ + Teilen auf ZWEI Zeilen,
   (b) eine Box, die Zuschauer + Titel (erneut) + Kategorie stapelte. Die Vorlage
   (publicore-reskin-preview-player_1.html, #viewLive) hat dagegen:
   • EINE Creator-Zeile: Avatar | Name/„Kick" | Folgen | Hoster-Follow | Teilen — KEINE
     Like/Dislike-Reaktion (die gibt es nur im Video, .actions), keine zweite Zeile.
   • Eine schmale .livemeta: Zuschauer links (Live-Farbe), „seit X" rechts (muted).
   • Eine .card2 mit NUR der Beschreibung/Kategorie (Titel steht schon als #pd-title darüber).
   NUR im Live-Scope (#player-overlay.pd-live-mode) — Video behält §v35 unverändert.
   ══════════════════════════════════════════════════════════════════════════ */
/* (a) Live kennt keine Like/Dislike-Reaktion (Mockup .chrow hat sie nicht). */
body.app-desktop #player-overlay.pd-live-mode #pd-react,
body.app-desktop #player-overlay.pd-live-mode #pd-likes { display: none !important; }
/* (b) Teilen wandert in Live auf Zeile 1 (order < 2 = vor dem Theme-::after-Umbruch) →
   Folgen + Hoster-Follow + Teilen stehen alle in der Creator-Zeile, keine 2. Zeile mehr. */
body.app-desktop #player-overlay.pd-live-mode #pd-creator-row > #pd-actions > #pd-share { order: 1 !important; }
/* (c) .livemeta: Zuschauer links, Uptime rechtsbündig (muted). */
body.app-desktop #player-overlay.pd-live-mode #pd-desc-meta { display: flex !important; align-items: center !important; gap: 8px !important; }
body.app-desktop #player-overlay.pd-live-mode #pd-desc-meta .pd-live-uptime {
  margin-left: auto !important; color: var(--pc-muted, var(--text-muted, #7f8aa1)) !important; font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v38 — Creator-Header + Like-Pille (User 2026-07-25)
   (A) Like/Dislike als „offizielle" Split-Pille mit Daumen-Icons (statt ▲▼) + aktivem
       Violett-Tint (Komponenten-Mockup „Like aktiv"). (B) Hoster-Logo VOR dem Plattform-
       namen in der Sub-Zeile (macht es „offiziell"), Plattformname als Link aufs Original-
       Profil. (C) Streamer-Name etwas größer. Gilt Live + Video.
   ══════════════════════════════════════════════════════════════════════════ */
/* (A) Daumen-SVGs in der Like/Dislike-Pille (Pillen-Rahmen kommt aus §(5) oben). */
body.app-desktop #pd-react .pd-react-svg { width: 17px; height: 17px; display: block; }
body.app-desktop #pd-react .pd-react-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
/* aktiver Zustand: Daumen + Zähler violett + zarter Flächen-Tint (Mockup „Like aktiv"). */
body.app-desktop #pd-react .pd-react-btn.active { background: var(--pc-active, rgba(145,132,217,.14)) !important; }
/* (C) Streamer-Name etwas größer (Mockup .cinfo b = 15px → hier prominenter). */
body.app-desktop #pd-creator-name { font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; }
/* (B) Hoster-Logo + Plattform-Link in der Sub-Zeile. */
body.app-desktop #pd-sub-metrics-inline .pd-plat-ic {
  width: 15px !important; height: 15px !important; border-radius: 3px !important;
  vertical-align: -2px !important; margin-right: 6px !important; object-fit: contain !important;
}
body.app-desktop #pd-sub-metrics-inline .pd-plat-link {
  color: inherit !important; text-decoration: none !important; cursor: pointer !important; font-weight: 600 !important;
}
body.app-desktop #pd-sub-metrics-inline .pd-plat-link:hover,
body.app-desktop #pd-sub-metrics-inline .pd-plat-link:focus-visible {
  color: var(--pc-text, var(--text)) !important; text-decoration: underline !important;
}
/* D-Pad-Fokusring für den Plattform-Link (TV). */
body.app-tv #pd-sub-metrics-inline .pd-plat-link:focus,
body.app-tv #pd-sub-metrics-inline .pd-plat-link.sys-focus {
  outline: 2px solid var(--pc-accent, var(--sys-focus)) !important; outline-offset: 2px !important; border-radius: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v39 — PiP-Mini-Player über der Bottom-Bar + Positions-Pfeile (User 2026-07-25)
   (B) Der Mini-Player (#pd-video-stage.pd-pip-float) liegt per z-index (2147482000) längst ÜBER der
       WASD-Leiste (#rsk-wasd-bar, z-index:45) — er saß aber mit bottom:18px IN deren 46px → optische
       Überlappung. Untere Ecken daher über die Leiste heben. Ist die Leiste aus (body.kbd-bar-hidden),
       darf der Mini-Player ganz nach unten (die Theme-Basis bottom:18px greift dann wieder).
   (C) Positions-Pfeile in der Mini-Leiste (PC) — Optik wie Restore/Close.
   ══════════════════════════════════════════════════════════════════════════ */
body.app-desktop:not(.kbd-bar-hidden) #pd-video-stage.pd-pip-float.pip-pos-bl,
body.app-desktop:not(.kbd-bar-hidden) #pd-video-stage.pd-pip-float.pip-pos-br {
  bottom: 66px !important;   /* 46px Leiste + 20px Luft */
}
#pd-pip .pd-pip-pos {
  border: none !important; background: transparent !important; color: #fff !important; cursor: pointer !important;
  font-size: 20px !important; line-height: 1 !important; padding: 0 6px !important; opacity: .8 !important; font-weight: 700 !important;
}
#pd-pip .pd-pip-pos:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v45 — Kategorien-Reskin (User 2026-07-26)
   Vier zusammenhängende Wünsche:
   (1) Landing-Filter (Alle/Live/Videos) als Segment-Control-Bubble mit Highlight,
       exakt wie die Startseite (#filter-tabs).
   (3) Gemergte Multi-Hoster-Kacheln bekommen die Voll-Spektrum-Gradient-Pille +
       einen passenden Multi-Color-Glow (Prinzip Reskin/phase3-multihost-gradient.html;
       ALLE Hoster-Farben gleich, unabhängig von der Kachel-Teilmenge — User-Vorgabe).
   (4) „Logo-forward": nur noch die Hoster-Logos (größer, zentriert) als Kachel-Held,
       Kachel gestaucht, Kategorie-Name darunter größer — kein Emoji-Platzhalter-Thumb,
       keine Hoster-Namen-Textzeile mehr.
   Farbspektrum = yt #ff0000 · tw #9146ff · kick #00E640 · dm #0066dc · pt #F1680D.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) Landing-Tabs als Segment-Control-Bubble (device-agnostisch) ──
   WICHTIG: Der Aktiv-Highlight muss die generische ui-auth74-73-Regel
   „body.platform-pc:not(.app-tv) #cat-landing-tabs .filter-tab.active { background:#fff!important }"
   (Spezifität 1,4,1) schlagen — genau wie die Startseite es tut, indem sie ZWEI IDs nutzt
   (#section-home #filter-tabs, s. §v13). Darum hier durchgängig #section-categories davor
   (→ 2 IDs), sonst zeigt die Kategorie-Bubble WEISS statt Akzent (≠ Startseite). */
body #section-categories #cat-landing-tabs.cat-landing-tabs {
  display: inline-flex !important; flex-wrap: nowrap !important; width: auto !important;
  align-items: center !important; gap: 3px !important; padding: 4px !important;
  margin: 0 0 18px !important;
  background: var(--pc-surface2, var(--card-2, rgba(255,255,255,.05))) !important;
  border: 1px solid var(--pc-border, var(--border, #2c303c)) !important;
  border-radius: 11px !important; box-shadow: none !important;
}
body #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 34px !important; min-height: 0 !important; margin: 0 !important; padding: 0 18px !important;
  border: none !important; border-radius: 8px !important; box-shadow: none !important;
  background: transparent !important; color: var(--pc-muted, var(--sys-idle, #9aa0aa)) !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
}
body #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab:not(.active):hover {
  background: rgba(255,255,255,.06) !important; color: var(--pc-text, var(--text, #fff)) !important;
}
body #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab.active {
  background: var(--pc-accent, var(--sys-focus, #d9f000)) !important; color: #07080d !important;
  border-radius: 8px !important;
}
/* TV: größer + D-Pad-Fokusring (Kategorien werden auch auf 3 m Distanz bedient).
   §RESKIN-TV v2 (Claudit 2026-07-26) — FUND: der TV-Zweig war als
   `body.app-tv body #section-categories …` geschrieben. Ein <body> kann NIE
   Nachfahre eines <body> sein → die drei Regeln haben nie gematcht (TV zeigte die
   Kategorie-Tabs weiterhin in Desktop-Größe, ohne D-Pad-Fokusring). Das
   überzählige `body` entfernt; Spezifität bleibt mit 2 IDs > ui-auth (1,4,1). */
body.app-tv #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab {
  height: 46px !important; padding: 0 28px !important; font-size: 20px !important;
}
body.app-tv #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab.focused,
body.app-tv #section-categories #cat-landing-tabs.cat-landing-tabs .filter-tab.sys-focus {
  outline: 2px solid var(--pc-accent, var(--sys-focus)) !important; outline-offset: 2px !important;
}

/* ── (4) Logo-forward-Kacheln: Logos zentral+groß, Kachel gestaucht, Name größer ── */
/* Gestauchtes Thumbnail (statt 16:9) — hier leben die großen Hoster-Logos. Kompakter
   (User 2026-07-26: „Platz besser nutzen, nicht quadratisch") → Logos füllen die Fläche. */
.category-card.cat-logo-fwd .cat-thumb {
  padding-top: 38% !important;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--cat-tint, #9146ff) 24%, transparent) 0%,
      rgba(10,10,15,.55) 62%, #0a0a0f 100%) !important;
}
/* Logo-Reihe absolut zentriert. Die Selektor-Spezifität (0,4,0) schlägt die generische
   „.card-thumbnail > span { opacity:.25; top:50%; transform:translate(-50%,-50%) }"-Regel
   (0,1,1) OHNE !important — dadurch bleiben die kompakten -sm/-xs-Overrides unten wirksam. */
.category-card.cat-logo-fwd .cat-thumb > .cat-logo-strip {
  position: absolute; inset: 0; top: 0; left: 0; transform: none; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 0 12px;
}
.cat-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex-shrink: 0;
}
.cat-logo-badge img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.6));
}
.category-card.cat-logo-fwd .cat-thumb > .cat-logo-strip.cat-logo-strip-sm { gap: 11px; }
.cat-logo-strip.cat-logo-strip-sm .cat-logo-badge { width: 48px; height: 48px; }
.category-card.cat-logo-fwd .cat-thumb > .cat-logo-strip.cat-logo-strip-xs { gap: 8px; }
.cat-logo-strip.cat-logo-strip-xs .cat-logo-badge { width: 38px; height: 38px; }
/* Body: nur der Name — größer + zentriert; Kachel dadurch kompakter (kein Emoji mehr). */
.category-card.cat-logo-fwd .cat-body {
  height: auto !important; min-height: 0 !important;
  padding: 13px 12px 15px !important; display: flex !important; align-items: center !important;
  justify-content: center !important;
}
.category-card.cat-logo-fwd .cat-title {
  font-size: 19px !important; font-weight: 700 !important; text-align: center !important;
  line-height: 1.25 !important; -webkit-line-clamp: 2 !important; max-height: 2.5em !important;
  white-space: normal !important;
}
/* Desktop-Größe muss die frühere generische Regel „body.app-desktop .video-card .card-title
   { font-size:14px !important }" (Spez. 0,4,0) schlagen → hier 0,5,0. Sonst blieb der
   Kategorie-Name auf 14px statt der gewünschten 19px (User 2026-07-26: Name größer). */
body.app-desktop .category-card.cat-logo-fwd .cat-title { font-size: 19px !important; }
body.app-tv .category-card.cat-logo-fwd .cat-thumb { padding-top: 40% !important; }
body.app-tv .cat-logo-badge { width: 88px; height: 88px; }
body.app-tv .cat-logo-strip.cat-logo-strip-sm .cat-logo-badge { width: 66px; height: 66px; }
body.app-tv .cat-logo-strip.cat-logo-strip-xs .cat-logo-badge { width: 52px; height: 52px; }
body.app-tv .category-card.cat-logo-fwd .cat-title { font-size: 26px !important; }
body.app-phone .cat-logo-badge { width: 46px; height: 46px; }
body.app-phone .category-card.cat-logo-fwd .cat-title { font-size: 15px !important; }

/* ── (3) Multi-Hoster: verwaschener Voll-Spektrum-Rahmen (aus der Vorlage) + Glow NUR
   bei Fokus/Hover ── (User-Korrektur r3 2026-07-26): der Ruhe-Rahmen darf ruhig der
   verwaschene Multi-Hoster-Gradient aus phase3-multihost-gradient.html sein — die Hoster
   stehen ohnehin als Logos auf der Kachel, der Rahmen ist reine Deko. Das eigentliche
   Problem war der DAUER-Glow (Regenbogen-Matsch über alle Kacheln) → der ist weg. Rahmen
   via background-clip (padding-box Innenfläche + border-box Spektrum), trotz overflow:hidden.
   KEIN Dauer-Glow; Glow ausschließlich beim aktiven/fokussierten Kachel, FARBLOS (sys-focus),
   wie Startseite. Alle Regeln !important gegen Theme-/[data-platform]-Rahmen/Glow. */
.category-card.cat-merged {
  --pc-multi: linear-gradient(135deg, #ff0000 0%, #9146ff 27%, #00E640 52%, #0066dc 76%, #F1680D 100%);
}
.category-card.cat-merged.cat-logo-fwd {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--card, #14141c), var(--card, #14141c)) padding-box,
    /* --cat-multi = Gradient AUS DEN ECHTEN Hostern der Kachel (inline aus buildCard,
       User 2026-07-26). Fallback auf das fixe Voll-Spektrum, falls mal nicht gesetzt. */
    var(--cat-multi, var(--pc-multi)) border-box !important;
  box-shadow: none !important;
}
/* ── Typ-Badge (nur „Alle"-Ansicht): LIVE-Icon vs. VIDEO-Tag, oben links im Thumbnail ── */
.category-card.cat-logo-fwd .cat-thumb > .cat-type-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 6px; line-height: 1;
  top: 8px !important; left: 8px !important; transform: none;   /* generische span-Regel neutralisieren */
  opacity: 1;
}
.cat-type-badge.cat-type-live { background: rgba(233, 32, 32, .95); color: #fff; }
.cat-type-badge.cat-type-vod  { background: rgba(255,255,255,.16); color: var(--pc-text, #fff); backdrop-filter: blur(2px); }
.cat-type-badge .cat-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.9); animation: cat-live-pulse 1.6s ease-in-out infinite;
}
@keyframes cat-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
body.app-tv .category-card.cat-logo-fwd .cat-thumb > .cat-type-badge { font-size: 15px; padding: 4px 11px; top: 11px !important; left: 11px !important; }
/* Merged-Thumbnail neutral halten — die Segmente führen die Farbe, nicht der Wash. */
.category-card.cat-merged.cat-logo-fwd .cat-thumb {
  background:
    radial-gradient(circle at 50% 40%, rgba(26,28,38,.85) 0%, #0a0a0f 100%) !important;
}
/* Aktiver/fokussierter Kachel: EIN sauberer, einfarbiger Highlight-Glow (wie Startseite).
   Segment-Rahmen bleibt sichtbar; der Ring + Glow markiert nur die aktuelle Auswahl. */
.category-card.cat-merged.cat-logo-fwd:hover,
.category-card.cat-merged.cat-logo-fwd.focused,
.category-card.cat-merged.cat-logo-fwd:focus {
  animation: none !important;
  box-shadow:
    0 0 0 2px var(--sys-focus, #d9f000),
    0 0 22px 2px color-mix(in srgb, var(--sys-focus, #d9f000) 60%, transparent) !important;
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .category-card.cat-merged.cat-logo-fwd:hover,
  .category-card.cat-merged.cat-logo-fwd.focused,
  .category-card.cat-merged.cat-logo-fwd:focus {
    box-shadow: 0 0 0 2px var(--sys-focus, #d9f000), 0 0 22px 2px var(--sys-focus, #d9f000) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v46 — Abo-Box-Kachel-Layout (User 2026-07-26)
   NUR die Abo-Box (#grid-subs), Home-Kacheln unberührt. Vorgaben:
   (a) Herz/Likes ist raus (in subscriptions.js buildCard entfernt).
   (b) Titel IMMER 2 Zeilen (feste Höhe) → alle Kacheln symmetrisch gleich hoch.
   (c) Creator-Name + Hoster-Logo etwas größer, vertikal zwischen Titel und Meta.
   (d) Aufrufe/Zeit bzw. Live-Viewer an den Kachel-Boden mit kleinem Rand-Abstand.
   ══════════════════════════════════════════════════════════════════════════ */
#grid-subs .video-card:not(.ad-card) .card-body {
  display: flex !important; flex-direction: column !important;
  height: 128px !important; box-sizing: border-box !important;
  padding: 11px 12px 12px !important;
}
/* (b) Titel fix auf 2 Zeilen — gleiche Höhe auf jeder Kachel. */
#grid-subs .card-title {
  font-size: 15px !important; font-weight: 700 !important; line-height: 1.32 !important;
  display: -webkit-box !important; -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important; overflow: hidden !important;
  height: 2.64em !important; min-height: 2.64em !important; max-height: 2.64em !important;
  margin: 0 0 0 !important; white-space: normal !important;
}
/* (c) Creator + Logo größer, mittig zwischen Titel und Meta. */
#grid-subs .card-creator {
  margin: 7px 0 0 !important; align-items: center !important;
}
#grid-subs .card-creator .logo-slot-sm {
  width: 22px !important; height: 22px !important; margin-right: 8px !important;
}
#grid-subs .card-creator-name { font-size: 14.5px !important; font-weight: 600 !important; }
/* (d) Meta (Aufrufe/Zeit bzw. Live-Viewer) an den Boden, kleiner Abstand zum Rand. */
#grid-subs .card-views,
#grid-subs .card-viewers-live {
  margin-top: auto !important; padding-top: 6px !important; margin-bottom: 0 !important;
}
/* TV: alles eine Spur größer + mehr Kachel-Höhe. */
body.app-tv #grid-subs .video-card:not(.ad-card) .card-body { height: 150px !important; }
body.app-tv #grid-subs .card-title { font-size: 18px !important; height: 2.64em !important; min-height: 2.64em !important; max-height: 2.64em !important; }
body.app-tv #grid-subs .card-creator-name { font-size: 17px !important; }
body.app-tv #grid-subs .card-creator .logo-slot-sm { width: 26px !important; height: 26px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v47 — User-Feedback 2026-07-26 (geraeteuebergreifend)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (3) Kachel-Thumbnail: Bild MUSS die 16:9-Flaeche fuellen ──────────────────
   FUND: `.card-thumbnail` hatte NIRGENDS ein background-size/-position/-repeat.
   Der Lazy-Loader setzt nur `el.style.backgroundImage` (core.js observeThumbs) —
   also galten die CSS-Initialwerte: `auto` (Naturgroesse), `0% 0%` (oben links),
   `repeat`. Je nach geliefertem Thumbnail-Format blieb unten/rechts der
   Platzhalter-Verlauf stehen: der Hosterfarben-Rahmen wirkte „groesser als das
   Bild". Betrifft ALLE Geraete, nicht nur TV. `!important`, weil der Builder ein
   Inline-`background:`-Shorthand setzt (Verlauf) — der Shorthand setzt size/
   position/repeat zusaetzlich auf ihre Initialwerte zurueck. */
.card-thumbnail {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ── (8) Kategorien: in einer GEOEFFNETEN Kategorie keinen Live/Video-Filter ───
   Die Kategorie IST bereits live oder vod (der Typ wird beim Oeffnen abgeleitet,
   pages/categories.js openDetail) — der globale „Alle | Live | Videos"-Filter
   waere dort eine Auswahl ohne Wirkung. Marker body.cat-detail-open wird in
   openDetail/closeDetail gesetzt; die zusaetzliche Kopplung an body.nav-categories
   macht die Regel leck-sicher, falls der Marker beim Nav-Wechsel mal stehen bleibt.
   Gilt bewusst NUR fuer Kategorien (Home/Trends/Abos behalten ihren Filter).

   SPEZIFITAET (gemessen, erster Versuch griff NICHT): die Gegner tragen je ZWEI IDs —
   §25 `body.app-tv #content #filter-tabs .filter-tab {display:inline-flex!important}`
   und §v45 `body #section-categories #cat-landing-tabs.cat-landing-tabs
   {display:inline-flex!important}`. Eine Regel mit nur einer ID verliert trotz
   !important. Darum hier ebenfalls zwei IDs.
   NEBENFUND: dadurch war auch das `.hidden`, das pages/categories.js beim Oeffnen an
   #cat-landing-tabs setzt, schon vorher wirkungslos — die Landing-Tabs blieben im
   Detail sichtbar, obwohl der Code sie ausblenden wollte. Das ist damit mit erledigt. */
body.nav-categories.cat-detail-open #content #filter-tabs,
body.cat-detail-open #section-categories #cat-landing-tabs.cat-landing-tabs {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE v48 — UI-HOSTER-ICON-NORMALIZE (User-Feedback 2026-07-26,
   Punkt 9): "koennen wir die icons alle mal anpassen? Also bei YT zB einen
   rahmen drum herum machen damit es die gleichen aussenmasse hat wie die
   abgerundeten icons von dailymotion und peertube? Weil das Kick K ist auch
   groesser und twitch wuerde dann auch nen lila runden rand bekommen."

   BEFUND (gemessen an den SVG-viewBoxes, nicht geschaetzt):
     youtube      264.75 x 186.21  -> 1.42:1 quer
     twitch       279.05 x 325.56  -> 0.86:1 hoch
     kick/dailymotion/peertube/odysee   24 x 24  -> exakt quadratisch
   Der Slot ist ueberall 24x24 mit object-fit:contain. Quadratische Glyphen
   fuellen die Box damit randlos aus, YouTube rendert nur 24x16.9 und Twitch
   20.6x24 — deshalb wirken die Icons unterschiedlich gross, obwohl die
   Slot-Groesse identisch ist. Ein reines Nachziehen der Slot-Groesse haette
   daran nichts geaendert.

   LOESUNG: das <img> selbst wird zur Kachel (Hintergrund + Rand + Innenabstand,
   box-sizing:border-box). Damit hat JEDER Hoster dieselbe sichtbare Aussenkante,
   und die Glyphe sitzt optisch gleich gross darin — unabhaengig vom Seiten-
   verhaeltnis. Gehaengt an das src-Attribut statt an ein data-Attribut des
   Elternknotens: die Logos erscheinen in mehreren Leisten (session-platform-bar,
   shorts-/clips-/subs-bubbles, search-pills, Karten, Creator-Chips) mit
   unterschiedlichem Markup, tragen aber IMMER dasselbe src. Bewusst KEIN :has()
   — alte TV-Browser (Tizen/webOS) unterstuetzen es nicht zuverlaessig.

   Kollidiert nicht mit den bestehenden Regeln (b): die setzen nur
   width/height/object-fit !important, hier kommen ausschliesslich padding/
   background/border/border-radius/box-sizing dazu.
   ══════════════════════════════════════════════════════════════════════════ */

/* Basis-Kachel fuer alle Hoster-Logos */
.logo-slot img[src*="logos/"] {
  box-sizing: border-box;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 2px;
}

/* Quadratische Glyphen fuellen die Box sonst bis an den Rand und wirken dadurch
   groesser als die nicht-quadratischen -> mehr Innenabstand. */
.logo-slot img[src*="logos/dailymotion"],
.logo-slot img[src*="logos/peertube"],
.logo-slot img[src*="logos/odysee"] {
  padding: 3px;
}

/* Kick: das "K" laeuft im 24er-viewBox bis an die Kante und wirkt dadurch am
   groessten von allen (User-Fund) -> staerkster Innenabstand. */
.logo-slot img[src*="logos/kick"] {
  padding: 4px;
  background: rgba(83, 252, 24, .12);
  border-color: rgba(83, 252, 24, .38);
}

/* YouTube: quer -> die rote Play-Kachel steht jetzt mittig in einer quadratischen
   Flaeche, damit sie dieselbe Aussenkante hat wie Dailymotion/PeerTube. */
.logo-slot img[src*="logos/youtube"] {
  padding: 4px 1px;
  background: rgba(255, 0, 0, .10);
  border-color: rgba(255, 0, 0, .34);
}

/* Twitch: hoch -> lila Rand + Tintung, wie vom User gewuenscht. */
.logo-slot img[src*="logos/twitch"] {
  padding: 1px 3px;
  background: rgba(145, 70, 255, .14);
  border-color: rgba(145, 70, 255, .45);
}

/* Patreon-Glyph traegt eigene Markenfarbe. */
.logo-slot img[src*="logos/patreon"] {
  padding: 3px;
  background: rgba(255, 66, 77, .12);
  border-color: rgba(255, 66, 77, .34);
}

/* ══════════════════════════════════════════════════════════════════════════
   §v49 FEAT-PEERTUBE-INSTANCE-PICKER (b) — Auswahl der PeerTube-Quellen
   Bewusst in dieser Datei statt in einer neuen: sie ist bereits in allen
   Entry-Points verlinkt und traegt ihren eigenen ?v=-Marker; eine neue Datei
   haette in 9 Kopien nachgezogen werden muessen (index.html + Plattform-Builds).
   ══════════════════════════════════════════════════════════════════════════ */
.ptsrc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 12px;
}
.ptsrc-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 148px;
  max-width: 100%;
  text-align: left;
  padding: 8px 12px;
}
.ptsrc-chip-name {
  font-weight: 600;
  /* Instanznamen sind frei gewaehlte Fremdtexte und teils sehr lang —
     ohne harte Kuerzung sprengen sie die Kachelreihe. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptsrc-chip-host {
  font-size: .78em;
  opacity: .7;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Abgewaehlt = sichtbar gedaempft, nicht ausgeblendet: der Nutzer muss die
   Quelle ja wiederfinden, um sie erneut anzuschalten. */
.ptsrc-chip:not(.active) {
  opacity: .45;
}
.ptsrc-chip.active {
  border-color: var(--pc-accent, #7c5cff);
}
/* Eigene Quellen tragen eine erkennbare Kante — User-Auflage zur Abfederung
   des Store-Risikos: nicht kuratierte Quellen muessen als solche sichtbar sein. */
.ptsrc-chip-own {
  border-style: dashed;
}
.ptsrc-add-row {
  display: flex;
  gap: 8px;
  padding: 0 24px 12px;
  align-items: center;
}
.ptsrc-add-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--pc-border, rgba(255, 255, 255, .18));
  background: var(--pc-surface2, rgba(255, 255, 255, .06));
  color: var(--pc-text, #fff);
  font-size: .95em;
}
.ptsrc-add-btn { flex: 0 0 auto; }
.ptsrc-own-list { padding: 0 24px 12px; }
.ptsrc-own-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.ptsrc-own-host {
  flex: 1;
  min-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptsrc-own-tv.active { border-color: var(--pc-accent, #7c5cff); }

/* ── TV ──────────────────────────────────────────────────────────────────
   Keine freie Texteingabe am D-Pad (Projektregel). Das Modul setzt zusaetzlich
   [hidden] auf die Zeile — CSS allein wuerde sie nur unsichtbar machen, nicht
   aus dem Fokusstrom nehmen; beides zusammen ist die vollstaendige Sperre.
   Die Kacheln selbst sind .platform-btn und haengen damit bereits im
   bestehenden Settings-D-Pad-Strom (App.Settings.getButtons) — sie brauchen
   nur groessere Treffflaechen und einen sichtbaren AKTIV-Zustand, weil
   reskin-tv.css §20 alle .platform-btn sonst gleich einfaerbt (die Lehre aus
   UI-TV-PIP-SETTINGS-FOCUS: der Fokusring wandert, aber man sieht nicht,
   was eingestellt IST). */
body.app-tv .ptsrc-add-row { display: none !important; }
body.app-tv .ptsrc-chip {
  min-width: 220px;
  padding: 14px 18px;
  font-size: 1.05em;
}
body.app-tv .ptsrc-chip.active {
  background: var(--pc-accent, #7c5cff) !important;
  border-color: var(--pc-accent, #7c5cff) !important;
  color: #0a0c12 !important;
}
body.app-tv .ptsrc-chip.active .ptsrc-chip-host { opacity: .8; color: #0a0c12 !important; }
/* Aktiv UND fokussiert: Schrift zurueck auf dunkel (§20 wuerde hier
   color:var(--pc-text) erzwingen → hell auf hell) + dreilagiger Ring, damit
   der Fokus auf der bereits akzentfarbenen Flaeche ablesbar bleibt. */
body.app-tv .ptsrc-chip.active.focused {
  color: #0a0c12 !important;
  box-shadow: 0 0 0 3px var(--pc-bg, #0a0c12),
              0 0 0 6px var(--pc-accent, #7c5cff),
              0 0 18px 4px rgba(124, 92, 255, .45) !important;
}
body.app-tv .ptsrc-chip.active.focused .ptsrc-chip-host { color: #0a0c12 !important; }
body.app-tv.theme-cyberpunk .ptsrc-chip.active,
body.app-tv.theme-dark-cyber .ptsrc-chip.active {
  background: var(--pc-accent, #f5ff3d) !important;
  border-color: var(--pc-accent, #f5ff3d) !important;
}

/* §v50 FEAT-PATREON-BADGE (#232 Variante A) — Unterstuetzer-Badge am EIGENEN
   Kommentar. Bewusst analog zu .pd-sub-badge gestaltet (gleiche Zeile, gleiche
   Groessenordnung), damit die Autorenzeile bei mehreren Badges nicht umbricht.
   Nicht interaktiv: kein :hover-Zustand, kein Cursor-Wechsel — es ist eine
   Auszeichnung, kein Bedienelement. */
.pd-patreon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 4px;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  /* Patreon-Markenfarbe (Coral) gedaempft — erkennbar, aber nicht lauter als
     der Kommentartext selbst. */
  color: #ff5900;
  background: rgba(255, 89, 0, .12);
  border: 1px solid rgba(255, 89, 0, .32);
}
.pd-patreon-badge .logo-slot { flex: 0 0 auto; }
/* TV: groesser lesbar, aber weiterhin kein Fokusziel. */
body.app-tv .pd-patreon-badge {
  font-size: .9em;
  padding: 2px 10px 2px 6px;
}

/* §v51 FEAT-TWITCH-CLIP-AUTOPLAY — Hinweis auf stummen Autoplay-Start.
   Sitzt in .shorts-meta UNTER dem Player. Ausdruecklich KEIN Overlay:
   Twitch Developer Agreement Schedule 1 D.1 verbietet, Funktionen oder
   Werbung im Embed zu verdecken. */
.shorts-muted-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8em;
  font-weight: 600;
  color: var(--pc-text, #fff);
  background: rgba(145, 70, 255, .18);
  border: 1px solid rgba(145, 70, 255, .38);
}
.shorts-muted-hint::before { content: "🔇"; font-size: 1.05em; }
/* TV: groesser lesbar aus Sofa-Entfernung, weiterhin nicht fokussierbar. */
body.app-tv .shorts-muted-hint { font-size: 1em; padding: 5px 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUG-DEVICE-CLASS-REGRESSION R2 / Zusatz 1 — ToS: KEINE PubliCore-Chrome ueber
   dem Hoster-Video. Sobald ein Video/Stream laeuft (body.player-active, global in
   pages/player.js:1141 gesetzt), verschwindet JEDE eigene Overlay-Leiste, die
   ueber dem Player-Frame sitzt — GLOBAL fuer ALLE Plattformen (klassenlos, damit
   es auch app-tv/webOS trifft, das keine app-desktop-Regeln erbt). Bisher wurde
   nur #mobile-menu-btn und nur auf app-phone versteckt (theme-*.css) → auf TV/
   webOS lagen #osd-color-bar und #hint-bar weiter ueber dem YT-Video (ToS-Bruch).
   Betroffen sind reine Navigations-/Hinweis-Overlays, NICHT die Player-eigenen
   Steuerungen (Zurueck-Button etc.). Die Hoster liefern ihre eigenen Controls.

   R5 (2026-07-31, N1+N3): EINE Ausnahme — der schwebende Desktop-Mini-Player
   (#pd-video-stage.pd-pip-float). Dort ist das Hoster-Video ein kleines Fenster in
   der Ecke, die Desktop-Chrome liegt NEBEN ihm (Hint-Bar unten, Burger oben), nicht
   darueber; sie darf also sichtbar bleiben, sonst bleibt sie nach dem Verkleinern
   dauerhaft weg (N1). Der Zustand wird von body.pd-pip-active getragen, das
   pages/player-desktop.js in _doTogglePipOpen/closePip exakt parallel zu
   .pd-pip-float setzt/entfernt. Kein :has()-Selektor — webOS-/Tizen-Legacy-Chromium
   unterstuetzt es nicht. Beim Maximieren faellt pd-pip-active weg und die Regel
   greift wieder ueber dem formatfuellenden Player (N3). player-active selbst bleibt
   im Float gesetzt — es bedeutet „ein Hoster-Video laeuft", und das tut es dort. */
body.player-active:not(.pd-pip-active) #hint-bar,
body.player-active:not(.pd-pip-active) #osd-color-bar,
body.player-active:not(.pd-pip-active) #pc-hoster-dock,
body.player-active:not(.pd-pip-active) .pc-hoster-dock,
body.player-active:not(.pd-pip-active) #mobile-menu-btn,
body.player-active:not(.pd-pip-active) #header-burger {
  display: none !important;
}

/* ═══════════ #297 + #248 Multi-Hoster-Superkarte: segmentierter Ring + Mehrfarb-Halo ═══════════ */
/* Zentrale, theme-/geraete-neutrale Stelle (NICHT in die 3 Theme-Dateien tripliziert,
   Lesson #291): --card-ring kommt inline aus core.js als conic-gradient ALLER Quellen-
   farben (N gleich grosse Segmente, hard stops). ::before = Rahmen (Mask-Trick,
   respektiert border-radius), ::after = derselbe Gradient unscharf/aussen -> Halo an
   denselben Positionen. reskin-startseite.css laedt IMMER und NACH der (getauschten)
   Theme-CSS -> ueberschreibt deren alte .card-multi-Regeln sauber.
   overflow:visible ist noetig, weil .video-card (overflow:hidden) den Aussen-Halo sonst
   abschneidet; die Thumbnail-Oberkante bekommt dafuer einen eigenen Radius, damit ihre
   Ecken nicht ueber die runde Kachelkante ragen. */
.video-card.card-multi {
  position: relative;
  overflow: visible;                        /* Aussen-Halo (::after) darf die Kachel verlassen */
  /* #297-A (Claudit-Fix): KEIN border-color:transparent hier. Ohne funktionierenden
     Mask-Composite-Trick (s. @supports unten) bleibt so der theme-eigene 1.5px-Vollton-
     Rand (border:1.5px solid var(--card-glow)) als unschaedlicher Fallback stehen. Sonst
     wuerde eine ungemaskte ::before-Box den ganzen Kacheln-Inhalt ueberdecken — im
     Ein-Farb-Fall (--card-ring = Vollton, core.js) sogar auf JEDER Runtime. */
}
.video-card.card-multi .card-thumbnail { border-radius: 12.5px 12.5px 0 0; }
/* #297-A (Claudit): Der segmentierte Rahmen (::before) haengt am Mask-Composite-Trick.
   Auf Ziel-WebViews OHNE mask-composite/-webkit-mask-composite (aeltere webOS/Tizen/Titan-
   Chromium, s. TV-Store-Compliance) legte die ungemaskte ::before-Box sonst den conic-
   gradient bzw. (Ein-Farb-Fall) eine Vollton-Flaeche als Blob ueber den Inhalt. Darum NUR
   dort, wo der Trick real parst: Ring + transparenter Rahmen; sonst greift der Vollton-
   Fallback-Rand von oben. @supports faellt fail-safe (Nichtunterstuetzung => kein Ring,
   kein Blob). Rest-Grenze: eine Runtime, die den Wert PARST aber falsch RENDERT, umgeht
   die Feature-Query — nicht per CSS ausschliessbar. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  /* #297-A (Claufix CF1): app-phone traegt einen hoeher spezifischen !important-Rahmen
     (reskin-mobile.css: `body.app-phone .video-card {border:2px solid var(--card-glow)!important}`,
     Spezifitaet 0,2,1). Der schlug die reine `.card-multi`-Regel (0,2,0) und liess auf MODERNEN
     Handy-WebViews Vollton-Rand UND ::before-Ring gleichzeitig stehen -> Doppelrahmen (am DOM
     belegt: app-phone border-color=--card-glow statt transparent). Der zusaetzliche
     `body.app-phone .video-card.card-multi`-Selektor (0,3,1) macht den Rahmen auch dort
     transparent -> nur der Ring bleibt, wie auf Desktop/TV. Steht bewusst IM @supports: auf
     Legacy-Handy (kein Mask-Composite) bleibt der mobile 2px-Vollton-Rand als Fallback. */
  .video-card.card-multi,
  body.app-phone .video-card.card-multi { border-color: transparent !important; }   /* Ring (::before) IST der Rahmen; schlaegt die hoeher spezifischen Fokus-Border-Regeln */
  .video-card.card-multi::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    pointer-events: none; z-index: 2;
    background: var(--card-ring, var(--card-glow));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}
.video-card.card-multi::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
  pointer-events: none;
  background: var(--card-ring, var(--card-glow));
  -webkit-filter: blur(9px); filter: blur(9px); opacity: .5; transition: opacity .2s;
}
body:not(.kbd-active) .video-card.card-multi:hover::after,
.video-card.card-multi.focused::after,
.video-card.card-multi:focus::after {
  opacity: .8; animation: pc-multiglow 2.4s ease-in-out infinite;
}
.video-card.card-multi.card-multistream-live::after {
  opacity: .72; animation: pc-multiglow 1.6s ease-in-out infinite;
}
/* #297.3 Viewer-Baseline: Multi-Karten zeigen .card-multihost statt .card-creator; ohne
   margin-top:auto (das .card-creator bei Single-Karten an den Boden der fixen card-body-
   Hoehe schiebt, Theme §M2.3) saesse die Meta-/Views-Zeile hoeher -> in einer gemischten
   Grid-Reihe nicht auf gleicher Baseline. margin-top:auto schiebt multihost+meta an den
   Boden -> identische Views-Baseline wie bei Single-Karten. */
.card-multihost { margin-top: auto; margin-bottom: 5px; }
/* #248 Icon-Reihe strikt einzeilig (Basis-Theme setzt es bereits; hier geraete-neutral
   abgesichert, damit kein Reskin sie umbrechen laesst — Namen behalten Ellipsis). */
.video-card .card-multihost { flex-wrap: nowrap; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   §RESKIN-STARTSEITE — #270-Folge: Clip-Viewer-Layout kohaerent machen (Kosmetik)
   (Cloder 2026-08-03, Folgeticket aus UI-270-Diagnose). NUR Desktop-Web
   (body.app-desktop), NUR Clips (.shorts-stage-clip) — Shorts/TV/Touch unberuehrt.

   PROBLEM (live gemessen, dev :3333, App.Shorts.mount('clip')):
   1) Frame-Overflow: Der Clip-Frame nutzt `width: min(92vw, 900px)` (Theme
      SPRINT-6, !important). 92vw ist VIEWPORT-relativ und ignoriert die 280px-
      Sidebar → bei 1050px Fenster laeuft der 900px-Frame aus dem verkuerzten
      Inhaltsfeld (Frame-x 197→1097 bei 1050px-Viewport).
   2) Next-Pfeil-Kollision: Engagement-Spalte (`.shorts-engage-wrap`,
      left:min(50%+450+20, 100%-96)) UND `.sc-arrow-next` (right:max(12,
      50%-450-64)) klemmen bei ~1024–1200px BEIDE ans rechte Stage-Ende und
      ueberlappen (Pfeil-Vorwaerts ist per §v25/reskin:673 sichtbar geschaltet).
   Ursache beider: die Positions-Formeln kodieren die FESTE Frame-Halbbreite 450px
   (=900/2) hart und schrumpfen nicht mit dem verkuerzten Inhaltsfeld.

   FIX: Das gesamte Clip-Assembly STAGE-relativ und aus EINER Halbbreite treiben.
   - Frame-Breite an das Inhaltsfeld (die position:relative .shorts-stage, deren
     100% = Content-Spalte rechts der Sidebar) koppeln und je Seite 160px Gutter
     fuer die Bedienelemente reservieren → Frame laeuft nie mehr ueber, passt sich
     selbst an, egal wie breit/schmal die Sidebar gerade ist (kein 280px-Hardcode).
     Hoehe kommt auf Desktop sauber aus aspect-ratio:16/9 (moderne Browser; der
     calc()-Fallback der Theme-Regel ist nur fuers alte TV-WebView noetig, das hier
     via app-desktop ausgeschlossen ist).
   - --sc-half = halbe Frame-Breite; NUR in horizontalen Props (left/right) genutzt,
     wo `%` = Breite. NICHT in top/height (dort `%` = Hoehe → falsche Achse).
   - Anordnung L→R mit je 8px Spalt: [◀ prev] [FRAME] [▶ next] [❤ engage],
     alles NEBEN dem Frame, garantiert ueberlappungsfrei bei JEDER Breite ≥1024px.
     Rechenweg: engage-rechts = 50%+half+152 ≤ 100%-8 (da half ≤ 50%-160) → immer
     ≥8px Rand, nie Overflow. Prev-Pfeil wird mit-verankert, weil die kleinere
     Frame-Breite ihn sonst von der (nun schmaleren) Box abkoppeln wuerde.
   Trade-off (bewusst): Unter ~1500px Fensterbreite ist der Clip < 900px, damit
   Frame + beide Pfeile + Engagement-Spalte NEBENEINANDER passen — der Preis fuer
   „Pfeil klar neben dem Frame ohne Overlap" statt Overlay auf dem Video.
   Kein Theme-Triplikat (Lesson #291): eine geraete-neutrale Regelgruppe hier,
   die (spaeter geladen als #theme-css) alle 9 Themes ueberschreibt.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Halbe Frame-Breite = min(450px, 50% − 160px Gutter). 320px Gesamt-Reserve
     (160px/Seite) deckt links Prev-Pfeil (8+52) und rechts Next-Pfeil + Spalt +
     Engagement + Rand (8+52+8+84+8=160). NUR in left/right verwenden. */
  body.app-desktop .shorts-stage-clip { --sc-half: min(450px, calc(50% - 160px)); }

  /* (1) Frame an das Inhaltsfeld klemmen (behebt 92vw-Overflow). Hoehe aus
     aspect-ratio (Desktop = moderne Engine); 68vh-Deckel als Kurzschluss-Schutz. */
  body.app-desktop .shorts-stage-clip .shorts-frame-wrap {
    width: min(900px, calc(100% - 320px)) !important;
    height: auto !important;
    max-height: 68vh !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* (2) Bedienelemente aus derselben Halbbreite verankern → attached & overlap-frei.
     Prev-Pfeil: 8px links neben dem Frame. */
  body.app-desktop .shorts-stage-clip .sc-arrow-prev {
    left: calc(50% - var(--sc-half) - 60px) !important;
  }
  /* Next-Pfeil: 8px rechts neben dem Frame (zwischen Frame und Engagement-Spalte).
     Schlaegt die Theme-„50%-450-64"-Formel, die bei schmalen Breiten auf den
     12px-Floor kollabierte und die Engagement-Spalte ueberlappte. */
  body.app-desktop .shorts-stage-clip .sc-arrow-next {
    right: calc(50% - var(--sc-half) - 60px) !important;
  }
  /* Engagement-Spalte: 8px rechts neben dem Next-Pfeil (frame_right + 60 + 8). */
  body.app-desktop .shorts-stage-clip .shorts-engage-wrap {
    left: calc(50% + var(--sc-half) + 68px) !important;
  }
}