/* ══════════════════════════════════════════════════════════════════════════
   reskin-fidelity.css — §RESKIN-FIDELITY r3 (Cloder 2026-07-25)
   NUR DESKTOP-Web (body.app-desktop). Behebt drei Topbar-Befunde aus der PC-Web-
   Ansicht, deren Styles im aktuellen Quellstand fehlten (Elemente werden von
   reskin-startseite.js gebaut, ihr CSS war nirgends definiert):
     1) Doppeltes Logo #pc-m-brand in der Kopfzeile ausblenden (das Marken-Logo
        lebt bereits in der Sidebar #sidebar-logo).
     2) Profil-Avatar #rsk-avatar: runder, gerahmter Chip mit zentriertem Initial
        (vorher rahmenlos / „P" verrutscht).
     3) Theme-Switcher #rsk-topbar-extra: Label + drei runde Theme-Punkte
        (Dark / Cyberpunk / Nocturne) sichtbar & sauber gestylt.
   Handy/TV bleiben unberührt (app-phone hat reskin-mobile.css, TV reskin-tv.css).
   Entfernen = <link> raus. Kein Deploy ohne Freigabe (BUG-13).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) Doppeltes Kopf-Logo raus (Desktop). Marke bleibt in der Sidebar. ── */
body.app-desktop #pc-m-brand,
body.app-desktop .header-row-top .pc-brand:not(#sidebar-logo) {
  display: none !important;
}

/* ── (2) Profil-Avatar (oben rechts, neben der Glocke) ── */
body.app-desktop #rsk-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-left: 10px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  /* BUG-AVATAR-IMPORTANT-BLOCKS-PHOTO (2026-07-28): Der Verlauf ist der FALLBACK
     fuer "kein Bild" — sobald eines da ist, muss es gewinnen. Mit `!important`
     schlug er jeden Inline-Style, und reskin-startseite.js setzt das Profilfoto
     genau so (`av.style.backgroundImage = url(...)`, ohne !important). Das Foto
     konnte am Desktop also NIE erscheinen, egal ob die Daten vorlagen.
     Kein Gegen-!important gestapelt: die Spezifitaet reicht bereits.
     `body.app-desktop #rsk-avatar` ist (1,1,1) und schlaegt die Basisregel
     `.rsk-avatar` (0,1,0) auch ohne !important — der Inline-Style wiederum
     schlaegt beide, und genau das ist gewollt.
     background-size/-position bleiben !important: sie stehen dem Foto nicht im
     Weg, sondern rahmen es korrekt (cover/zentriert). */
  background: linear-gradient(135deg, var(--pc-accent, #35a7ff), var(--pc-accent2, #2ee6c6));
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid var(--pc-border, rgba(255,255,255,.14)) !important;
  color: #0b0e16 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body.app-desktop #rsk-avatar:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 2px var(--pc-accent, #35a7ff) !important;
}

/* ── (3) Theme-Switcher in der Topbar ── */
body.app-desktop #rsk-topbar-extra {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 6px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-theme-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pc-muted, #8b93a7) !important;
  letter-spacing: .2px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatches {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatch {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;                 /* KEIN transparenter Rahmen → keine Lücke am Rand */
  border-radius: 50% !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  background-clip: border-box !important;
  /* Ring sitzt direkt an der Farbfüllung (huggt sie), franst nicht aus. */
  box-shadow: 0 0 0 2px rgba(255,255,255,.45) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatch:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7) !important;
}
/* aktiver Punkt = kräftiger weißer Ring + Akzent-Glow, deutlich hervorgehoben */
body.app-desktop #rsk-topbar-extra .rsk-swatch.on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(10,13,21,.9), 0 0 10px 1px var(--pc-glow, rgba(145,132,217,.6)) !important;
}
/* die drei Themes als ZWEIFARBIGE Punkte — weicher Verlauf, aber PRIMARY dominant
   (~⅔ Fläche), SECONDARY als klar erkennbare Ecke (~⅓). Primary/Secondary:
   Dark = schwarz/weiß · Cyberpunk = pink/gelb · Nocturne = dunkelblau/lila (Topbar-Lila). */
body.app-desktop #rsk-topbar-extra .rsk-sw-cyberdark { background: linear-gradient(135deg, #0a0c12 0 64%, #f4f6fb 100%) !important; }
body.app-desktop #rsk-topbar-extra .rsk-sw-cyberpunk { background: linear-gradient(135deg, #ff3d9a 0 64%, #f2ff3a 100%) !important; }
body.app-desktop #rsk-topbar-extra .rsk-sw-nocturne  { background: linear-gradient(135deg, #26315e 0 64%, #9184d9 100%) !important; }
/* dezenter Trenner zwischen Swatches und Glocke, falls gebaut */
body.app-desktop #rsk-topbar-extra .rsk-tb-divider {
  width: 1px !important;
  height: 18px !important;
  background: var(--pc-border, rgba(255,255,255,.14)) !important;
  margin: 0 2px !important;
}

/* ── (4) „Accounts & Feeds verbinden"-Banner links bündig mit Titel/Grid/Suche ──
   Der Banner sitzt (per reskin-startseite.js) VOR der Home-Sektion, also ausserhalb
   deren zentriertem 1440px-Container mit 32px-Innenabstand — dadurch klebte er weiter
   links. Hier bekommt er DIESELBE Geometrie: zentriert, max 1440px, 32px je Seite als
   Rand (nicht Padding, damit die KARTENKANTE — nicht der Inhalt — auf der 32px-Linie
   startet). Formel funktioniert auf jeder Breite (breit UND schmal). */
body.app-desktop #connect-banner {
  box-sizing: border-box !important;
  width: calc(100% - 64px) !important;
  max-width: 1376px !important;   /* 1440 − 2×32 */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI-OVERHAUL-T3 · Desktop Nav-Rail (§1a–c)
   60px transparente Icon-Rail, die beim Hover als OVERLAY über den Content ausfährt
   (Content wird NICHT geschoben). NUR body.app-desktop — TV (app-tv/reskin-tv) und
   Mobile (app-phone/reskin-mobile) bleiben unberührt (→ T4/T5). Basis-#sidebar-Regeln
   in theme-*.css unangetastet; hier ausschliesslich Desktop-Override.
   chrome53-safe: flex + margin (KEIN flex-gap), top/right/bottom/left (KEIN inset-
   Shorthand), reines :hover; Label-Reveal via display (kein Layout-Leak bei 60px).
   reskin-fidelity lädt zuletzt → gewinnt Kaskaden-Gleichstand; !important nur wo eine
   bestehende !important-Regel (reskin-startseite #sidebar .nav-item) zu schlagen ist.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Marken-Logo-Tinting (#13-Emblem, geräteklassenübergreifend, zieht mit dem Theme;
     harte Hex im SVG = chrome53-Fallback). Neutral → --text-main; PLAY/LIVE → Primär-
     Akzent; Play-Dreieck/Live-Kreis → Sekundär-Akzent. Bestehende Tokens, kein Hardcode. */
#sidebar-logo .pc-frame { stroke: var(--text-main, #e9e9ed); }
#sidebar-logo .pc-nf    { fill:   var(--text-main, #e9e9ed); }
#sidebar-logo .pc-main  { fill:   var(--pc-accent, #9184d9); }
#sidebar-logo .pc-acc   { fill:   var(--neon-cyan, #38bdf8); }

/* — Rail-Grundzustand: fixe 60px-Overlay-Leiste, transparent — */
body.app-desktop #sidebar {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 60px !important;
  background: transparent !important;
  border-right: none !important;
  z-index: 45;
  overflow: hidden;
  transition: width .18s ease, background .18s ease, box-shadow .18s ease;
}
body.app-desktop #content { margin-left: 60px; }

/* Logo oben: eingeklappt reines Emblem, Wortmarke erst beim Ausfahren */
body.app-desktop #sidebar-logo {
  height: 64px; padding: 0 8px; margin: 0;   /* R1-13: weniger Padding → größeres Emblem im 60px-Rail */
  display: flex; align-items: center; justify-content: flex-start; overflow: hidden;
}
body.app-desktop #sidebar-logo .pc-brand-icon { width: 44px; height: 40px; flex-shrink: 0; }  /* R1-13: Branding prominenter (war 34×31) */
body.app-desktop #sidebar-logo .pc-brand-word {
  display: none; margin-left: 11px; font-size: 22px; font-weight: 700; white-space: nowrap;
}
body.app-desktop #sidebar-logo .pc-brand-core { color: var(--text-main); font-weight: 700; }

/* Nav-Gruppe als flex-Spalte; Icons im 60px-Zustand zentriert, Labels ausgeblendet */
body.app-desktop #nav-list { display: flex; flex-direction: column; padding: 8px 0; }
body.app-desktop #sidebar .nav-item {
  justify-content: center !important;
  gap: 0 !important;
  padding: 12px 0 !important;
  margin: 2px 8px !important;
  border-radius: 10px;
}
body.app-desktop #sidebar .nav-icon { width: 28px; height: 28px; margin-right: 0 !important; flex-shrink: 0; }
body.app-desktop #sidebar .nav-icon svg { width: 24px; height: 24px; }
body.app-desktop #sidebar .nav-label { display: none; white-space: nowrap; }
body.app-desktop #sidebar .nav-item[data-nav="settings"] { margin-top: auto !important; }

/* Footer (Viewport/Legal/Build) nur im ausgefahrenen Zustand */
body.app-desktop #sidebar-viewport,
body.app-desktop #sidebar-legal,
body.app-desktop #sidebar-build { display: none; }

/* — Ausgefahrener Overlay-Zustand: Hover, deckende Fläche über dem Content — */
body.app-desktop #sidebar:hover {
  width: 248px !important;
  /* R1-12 (2026-09-01): TV-artiger Fade-Out statt solider Fläche + hartem Schatten
     (Vorlage reskin-tv.css:2217-2235). Panel deckt links, blendet zur rechten Kante
     transparent aus → Content schimmert durch, kein harter „Kasten". */
  background: linear-gradient(90deg, rgba(16,17,23,.94) 0, rgba(16,17,23,.94) 200px, rgba(16,17,23,0) 248px) !important;
  box-shadow: none !important;
  z-index: 60;
}
body.app-desktop #sidebar:hover .nav-item { justify-content: flex-start !important; padding: 12px 16px !important; }
body.app-desktop #sidebar:hover .nav-icon { margin-right: 14px !important; }
body.app-desktop #sidebar:hover .nav-label { display: inline; font-size: 16px; }
body.app-desktop #sidebar:hover #sidebar-logo .pc-brand-word { display: inline; }
body.app-desktop #sidebar:hover #sidebar-viewport { display: flex; }
body.app-desktop #sidebar:hover #sidebar-legal { display: flex; }
body.app-desktop #sidebar:hover #sidebar-build { display: block; }

/* UI-BATCH-C #6 (2026-09-07): „TV-Ansicht"-Umschalter auf Web/Desktop aus der Sidebar
   nehmen. Reiner CSS-Riegel, gescoped auf body.app-desktop — Mobile (app-phone) und der
   echte TV (app-tv) behalten den Umschalter unverändert; der Klick-Handler bleibt für
   diese Geräteklassen gültig (kein toter Handler, kein DOM-Entfernen). Das !important
   schlägt das inline display:'' , das App._syncViewportBtns() den Nicht-Aktiv-Buttons
   setzt (der TV-Button ist auf Desktop nie der aktive → bekäme sonst display:'' ). */
body.app-desktop #sidebar-viewport .viewport-btn[data-viewport="tv"] { display: none !important; }

/* Collapse-Toggle auf Desktop überflüssig (Hover übernimmt das Ausfahren) */
body.app-desktop #sidebar-toggle { display: none !important; }

/* Feste Bottom-Bars an die neue 60px-Rail andocken (statt 248px) */
body.app-desktop #hint-bar { left: 60px !important; }
body.app-desktop #rsk-wasd-bar { left: 60px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI-OVERHAUL-T6 · Desktop Button-Bar (§1d) · Inc.2b
   Hoster▾-Dropdown ersetzt die inline Pillen-Leiste (nur Desktop, Home/Trends;
   State bleibt App.SC/pc_sc_active_feed). Weiße Aktiv-Pille für Alle/Live/Videos.
   Nur body.app-desktop (modern) → keine chrome53-Beschränkung. TV/Mobile unberührt.
   ═══════════════════════════════════════════════════════════════════════════ */
#hoster-dd { display: none; }
#hoster-dd.hidden { display: none !important; }
/* Pillen-Leiste auf Desktop/Home+Trends aus — das Dropdown ersetzt sie. Hohe Spezifität
   (2 IDs + html), um `html body.app-desktop #section-home #session-platform-bar`
   (reskin-startseite, display:inline-flex !important) zu überstimmen. */
html body.app-desktop.nav-home #section-home #session-platform-bar,
html body.app-desktop.nav-trending #section-trending #session-platform-bar { display: none !important; }
body.app-desktop #hoster-dd:not(.hidden) {
  position: relative; display: inline-flex; vertical-align: middle; margin-left: 10px;
}
body.app-desktop #hoster-dd .hoster-dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; cursor: pointer;
  background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
  border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
}
body.app-desktop #hoster-dd .hoster-dd-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--pc-accent, #9184d9); color: #0a0c12;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
body.app-desktop #hoster-dd .pc-dd-caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .8; transition: transform .15s ease;
}
body.app-desktop #hoster-dd.open .pc-dd-caret { transform: rotate(180deg); }
body.app-desktop #hoster-dd .hoster-dd-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--pop, var(--pc-surface, #1e2130));
  border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
body.app-desktop #hoster-dd.open .hoster-dd-panel { display: block; }
body.app-desktop #hoster-dd .hoster-dd-row {
  display: flex; align-items: center; width: 100%; gap: 10px;
  padding: 9px 10px; border: none; border-radius: 10px; cursor: pointer;
  background: none; color: var(--pc-muted, #9397ab);
  font-size: 14px; font-weight: 600; text-align: left; font-family: inherit;
}
body.app-desktop #hoster-dd .hoster-dd-row:hover {
  background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-name { flex: 1 1 auto; }
body.app-desktop #hoster-dd .hoster-dd-check {
  width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
  border: 1.5px solid var(--pc-border, rgba(233, 233, 237, .25));
}
body.app-desktop #hoster-dd .hoster-dd-row.on { color: var(--pc-text, #e9e9ed); }
body.app-desktop #hoster-dd .hoster-dd-row.on .hoster-dd-check {
  background: var(--pc-accent, #9184d9); border-color: var(--pc-accent, #9184d9);
}

/* ─────────────────────────────────────────────────────────────────────────────
   #542 · Hoster-Logo im Dropdown (Mockup): farbiges Rundquadrat in Hosterfarbe
   (Inline-BG aus App.brandGlow im Markup) mit weiß gefiltertem Logo-SVG.
   Geräteklassen-agnostisch (Desktop/TV/Mobile teilen #hoster-dd) — die BG-Farbe
   kommt inline, hier nur Form + Weiß-Filter. chrome53-safe (nur flex/filter,
   kein grid/inset/color-mix). Kein Konflikt: .hoster-dd-logo ist neu.
   ───────────────────────────────────────────────────────────────────────────── */
#hoster-dd .hoster-dd-logo,
#search-hoster-dd .hoster-dd-logo {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  /* Logo-Fix: die logos/<id>.svg sind VOLLFARB-Badges (eigener Marken-Hintergrund
     + Glyph), KEINE monochromen Glyphen. Die alte Marken-Tile-Hintergrundfarbe
     (JS-inline) + `filter: brightness(0) invert(1)` machten das ganze Badge zu einem
     weissen Block → kein erkennbares Icon. Jetzt: Tile transparent, das Badge fuellt
     die Kachel selbst und traegt seine eigene Farbe. */
  background: transparent !important;
}
#hoster-dd .hoster-dd-logo img,
#search-hoster-dd .hoster-dd-logo img {
  /* Claudit-Fix: `contain` statt `cover` — die Badges sind vollstaendige Marken-Logos
     mit unterschiedlichem Seitenverhaeltnis (YT 1.42:1 breit, Twitch 0.86:1 hoch); `cover`
     beschnitt Glyph/Wortmarke an den Raendern. `contain` zeigt jedes Logo komplett. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   #542 FU (r12, webOS-Sim 08-16) · Checkbox-Status bei Fokus/Highlight sichtbar.
   Desktop (TV hat den On/Off-Schieber, reskin-tv.css:2358; Mobile s. reskin-mobile).
   Bisher: leeres Kästchen mit fahler --pc-border-Kante → auf dem hellen Hover-/
   Fokus-BG kaum sichtbar ("Kästchen bleibt weiß"). Jetzt: (a) Zeilen-Fokus (.focused,
   Tastatur-Nav) spiegelt :hover; (b) AUS-Kante bei Hover/Fokus auf --pc-text
   angehoben; (c) AN = Akzent-Fill + dunkler Haken (::after) → an/aus unabhängig vom
   Zeilen-Hintergrund eindeutig. Nicht-TV, daher ::after/transform frei nutzbar. */
body.app-desktop #hoster-dd .hoster-dd-row.focused,
body.app-desktop #search-hoster-dd .hoster-dd-row.focused {
  background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-check { position: relative; }
body.app-desktop #hoster-dd .hoster-dd-row:hover .hoster-dd-check,
body.app-desktop #hoster-dd .hoster-dd-row.focused .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-row:hover .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-row.focused .hoster-dd-check {
  border-color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-row.on .hoster-dd-check::after,
body.app-desktop #search-hoster-dd .hoster-dd-row.on .hoster-dd-check::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; box-sizing: border-box;
  width: 4px; height: 8px; border: solid #07080d; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ═══ #4: Multi-Select-Hoster-Dropdown auf der Suche (#search-hoster-dd) ═════════
   Spiegelt die Desktop-Optik von #hoster-dd (Trigger/Panel/Zeilen/Check), sitzt
   NEBEN #search-filter-tabs (statt der alten #search-platform-pills). Eigener
   Multi-Select-State App.Search.hosters; Logos teilen die Regel oben. */
body.app-desktop #search-hoster-dd {
  position: relative; display: inline-flex; vertical-align: middle; margin-left: 10px;
}
body.app-desktop #search-hoster-dd .hoster-dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; cursor: pointer;
  background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
  border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
}
body.app-desktop #search-hoster-dd .hoster-dd-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--pc-accent, #9184d9); color: #0a0c12;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
body.app-desktop #search-hoster-dd .pc-dd-caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .8; transition: transform .15s ease;
}
body.app-desktop #search-hoster-dd.open .pc-dd-caret { transform: rotate(180deg); }
body.app-desktop #search-hoster-dd .hoster-dd-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--pop, var(--pc-surface, #1e2130));
  border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
body.app-desktop #search-hoster-dd.open .hoster-dd-panel { display: block; }
body.app-desktop #search-hoster-dd .hoster-dd-row {
  display: flex; align-items: center; width: 100%; gap: 10px;
  padding: 9px 10px; border: none; border-radius: 10px; cursor: pointer;
  background: none; color: var(--pc-muted, #9397ab);
  font-size: 14px; font-weight: 600; text-align: left; font-family: inherit;
}
body.app-desktop #search-hoster-dd .hoster-dd-row:hover {
  background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #search-hoster-dd .hoster-dd-name { flex: 1 1 auto; }
body.app-desktop #search-hoster-dd .hoster-dd-check {
  width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
  border: 1.5px solid var(--pc-border, rgba(233, 233, 237, .25));
}
body.app-desktop #search-hoster-dd .hoster-dd-row.on { color: var(--pc-text, #e9e9ed); }
body.app-desktop #search-hoster-dd .hoster-dd-row.on .hoster-dd-check {
  background: var(--pc-accent, #9184d9); border-color: var(--pc-accent, #9184d9);
}
/* Alte Such-Hoster-Pillen auf Desktop aus (durch das Dropdown ersetzt). */
body.app-desktop #search-platform-pills { display: none !important; }
/* Tabs + Hoster-Dropdown in EINER Reihe (Dropdown neben „Alle/Live/Videos/Kanäle"). */
body.app-desktop #section-search #search-filter-tabs { vertical-align: middle; }
/* ITEM-4 (User 2026-09-04) — Suchfilter gleich groß + auf EINER Linie. LIVE per
   offsetTop/Height gemessen: Row ist zwar flex/align-items:center, aber die vier Kinder
   hatten drei verschiedene Höhen (Tabs 37 / Hoster 34 / Zeitraum+Länge 39) UND die Tabs
   trugen ein `margin-top:10px` → offsetTop 201/198/195 (6px Versatz = „nicht auf einer
   Linie"). Fix: Stray-Margins der Row-Kinder killen + zentrieren, dann ALLE (äußere Box UND
   der sichtbare innere Trigger/Pill) auf einheitliche 40px zwingen. Injektionsfrei validiert
   (per `<style>`): danach alle vier offsetHeight=40 + offsetTop identisch. Nur Desktop. */
body.app-desktop #search-filter-row { align-items: center !important; }
body.app-desktop #search-filter-row > * { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; }
body.app-desktop #search-filter-row > #search-filter-tabs,
body.app-desktop #search-filter-row > #search-hoster-dd,
body.app-desktop #search-filter-row > .search-adv-dd { height: 40px !important; min-height: 40px !important; }
body.app-desktop #search-filter-row .pc-dd-trigger,
body.app-desktop #search-filter-row .hoster-dd-trigger { height: 40px !important; min-height: 40px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; }
/* UI-BATCH-C #3a (2026-09-07): Die Such-Filter-Pillen (Alle/Live/Videos/Kanäle) saßen 4px
   TIEFER als die Hoster▾/Zeit/Länge-Dropdowns. Ursache (live per Rects): der v1.14.5-ITEM-4-Fix
   zwang oben ZUSÄTZLICH die .filter-tab auf height:40px — der Segment-Container #search-filter-tabs
   trägt aber padding:3px (reskin-startseite.css:634) und ist selbst 40px; das 40px-Kind überlief
   die 34px-Content-Box asymmetrisch nach unten (Tab-top 195 statt 191). Fix: die .filter-tab NICHT
   mehr auf 40px zwingen (aus der Regel oben entfernt) → sie behält ihre 30px (reskin-startseite.css:640)
   und wird von align-items:center im 40px-Container vertikal zentriert. Live verifiziert: Tab-Center
   211 == Hoster▾/Dropdown-Center 211 (deckungsgleich). Container-Höhe bleibt 40px (Regel :397). */

/* ─────────────────────────────────────────────────────────────────────────────
   #537 FU3 (r12, webOS-Sim 08-16) · Kästchen ums Kachel-Hoster-Logo WEG —
   geräteklassen-übergreifend (Desktop hatte es via FU2, hier TV + Mobile ergänzt).
   Die logos/*.svg sind fertige Marken-Farb-Logos; das farbige Rundquadrat (--card-
   glow) + der Weiß-Filter waren aufgesetzt und erzeugten auf TV das leere orangene
   Kästchen (zusammen mit dem #537-Case-Bug am Datei-Slug logos/<Platform>.svg, der
   separat in core.js/creator.js gefixt ist). Fix: Außenbox transparent, Weiß-Filter
   raus, UND der neutrale Grau-Chip am <img> selbst (reskin-startseite.css:1792,
   .logo-slot img[src*="logos/"]) für das Kachel-Logo neutralisiert → Logo pur, kein
   Rahmen. Größe 22px (Desktop hier gesetzt, TV zusätzlich via #TVVP29 reskin-tv.css
   :226). chrome53-safe: nur background/padding/border-radius/filter — KEIN flex-gap
   auf app-tv (die Name-Zentrierung dort trägt die Theme-Basis .card-creator
   {align-items:center} + #TVVP29; Desktop/Mobile setzen gap separat).
   ───────────────────────────────────────────────────────────────────────────── */
.video-card .card-creator .card-platform-icon {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
}
.video-card .card-creator .card-platform-icon img {
  filter: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* Creator-Name-Zentrierung: Desktop hier (flex-gap ok); Mobile via reskin-mobile.css
   :809; TV via Theme-Basis + #TVVP29 (dort bewusst OHNE flex-gap → chrome53). */
body.app-desktop .video-card .card-creator {
  align-items: center !important; gap: 6px !important;
}
/* Weiße Aktiv-Pille für Alle/Live/Videos (Master §1d: bg #fff, color #15151c). Hohe
   Spezifität (2 IDs via relokiertem #section-*), um die Accent-Shorthand-Regeln der
   Theme-/reskin-Sheets zu überstimmen. Tabs sind auf Home/Trends/Abos in die Sektion
   verschoben (placeFilterTabs). */
html body.app-desktop #section-home #filter-tabs .filter-tab.active,
html body.app-desktop #section-trending #filter-tabs .filter-tab.active,
html body.app-desktop #section-subscriptions #filter-tabs .filter-tab.active {
  background: #fff !important; color: #15151c !important; border-color: #fff !important;
}
html body.app-desktop #section-home #filter-tabs .filter-tab.active svg,
html body.app-desktop #section-trending #filter-tabs .filter-tab.active svg,
html body.app-desktop #section-subscriptions #filter-tabs .filter-tab.active svg { stroke: #15151c !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   #538 · Such-Icon statt Vollfeld (Mockup) — DESKTOP
   Das #search-input ist DASSELBE Element, das die Suchseite nutzt (pages/search.js
   getElementById('search-input')) — es darf also NICHT entfernt werden. Lösung: auf
   den Feed-Screens (nicht auf der Suchseite) das #search-bar zu einer 44px-Icon-Pille
   kollabieren (nur die Lupe sichtbar); bei Hover ODER Fokus (focus-within) — sowie auf
   der Suchseite (body.nav-search) — fährt es wieder zum vollen Feld aus, das
   #search-input bleibt voll funktionsfähig (keine Verhaltensänderung, reines CSS,
   reversibel). NUR Desktop; TV/Mobile unberührt (eigene, separat getestete Schritte).
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop:not(.nav-search) #search-bar {
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  padding: 0 !important; justify-content: center !important;
  border-radius: 12px !important; overflow: hidden !important;
  transition: width .16s ease, max-width .16s ease, border-radius .16s ease;
}
body.app-desktop:not(.nav-search) #search-bar:hover,
body.app-desktop:not(.nav-search) #search-bar:focus-within {
  width: 440px !important; max-width: 440px !important;
  border-radius: 10px !important; padding: 0 14px !important; justify-content: flex-start !important;
}
/* Eingabefeld im kollabierten Zustand ausblenden — Lupe (.search-icon) bleibt zentriert. */
body.app-desktop:not(.nav-search) #search-bar:not(:hover):not(:focus-within) #search-input {
  opacity: 0 !important; width: 0 !important; min-width: 0 !important;
  padding: 0 !important; pointer-events: none !important;
}
body.app-desktop:not(.nav-search) #search-bar .search-icon { flex: 0 0 auto !important; }

/* #538 (TV) · Such-Icon auf TV-Feed-Screens. OK auf dem fokussierten Such-Feld ruft
   bereits App.switchNav('search') (core.js) → Suchseite mit vollem Feld (dasselbe
   #search-input). Daher hier NUR visuell zur Icon-Pille kollabieren; KEIN Fokus-Expand
   (auf TV kein Hover, und :has()/:focus-within-Expand wäre nicht chrome53-safe). Das
   #search-input NIE display:none — die Suchseite (body.nav-search, hier ausgeschlossen)
   braucht es. chrome53-safe (nur width/opacity/flex). */
body.app-tv:not(.nav-search) #search-bar {
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  padding: 0 !important; justify-content: center !important;
  /* R11-2 (Wiedergänger, dritter Anlauf — jetzt die Ursache): das frühere
     `overflow:hidden` hier verbarg zwar das eingeklappte #search-input, klippte aber
     AUCH den Fokus-Glow (filter:drop-shadow am Lupen-SVG) an der 44px-Icon-Kante — und
     schlug per Quellreihenfolge den R7-17-`overflow:visible`-Vorfix in reskin-tv.css
     (gleiche Spezifität (0,1,2,1), reskin-fidelity lädt später). Deshalb blieb der Glow
     trotz aller bisherigen Freigaben links abgeschnitten. Das Input ist bereits über
     `opacity:0 + width:0 + pointer-events:none` (unten) vollständig verborgen → das
     `overflow:hidden` war fürs Verstecken redundant und ist der eigentliche Clipper.
     Entfernt: der Glow tritt nun aus, das Input bleibt unsichtbar. */
  border-radius: 12px !important;
}
body.app-tv:not(.nav-search) #search-bar #search-input {
  opacity: 0 !important; width: 0 !important; min-width: 0 !important;
  padding: 0 !important; pointer-events: none !important;
  /* UI-BATCH-C #4 (2026-09-07): wie Desktop — flex-grow killen, sonst zentriert die
     Lupe nicht im D-Pad-Fokusring der 44px-Icon-Pille. TV endprobe am echten Gerät. */
  flex: 0 0 0 !important;
}
body.app-tv:not(.nav-search) #search-bar .search-icon { flex: 0 0 auto !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop) · EINE Top-Zeile: [Such-Icon] [Alle|Live|Videos] [Hoster▾]
   ........ [Kalender][Glocke][Avatar]. reskin-startseite.js mergeTopBarRow() holt
   #filter-tabs/#session-platform-bar/#hoster-dd zurück in .header-row-top; hier die
   Layout-Regeln + Neutralisierung der sektions-absoluten Positionierung (#content
   #filter-tabs greift weiter, da #header in #content liegt). Zweite Header-Zeile leer
   → aus. NUR Desktop. ═══════════════════════════════════════════════════════════ */
body.app-desktop .header-row-top {
  display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important;
}
body.app-desktop .header-row-bottom { display: none !important; }
body.app-desktop .header-row-top #header-actions { margin-left: auto !important; }
/* #content im Selektor, um die 2-ID-Regel `#content #filter-tabs {position:absolute}`
   (reskin-startseite v23) zu schlagen — .header-row-top liegt in #content. */
body.app-desktop #content .header-row-top #filter-tabs {
  position: static !important; top: auto !important; right: auto !important; left: auto !important;
  margin: 0 !important; z-index: auto !important;
}
body.app-desktop #content .header-row-top #session-platform-bar { position: static !important; margin: 0 !important; }
body.app-desktop #content .header-row-top #hoster-dd { position: relative !important; margin: 0 !important; }
/* In der Einzelzeile bleibt die Suche ein stabiles Icon (kein Hover-Aufschieben der
   Tabs). Klick öffnet die Suchseite (core.js: #search-bar-Click → switchNav('search')). */
body.app-desktop:not(.nav-search) .header-row-top #search-bar:hover,
body.app-desktop:not(.nav-search) .header-row-top #search-bar:focus-within {
  width: 44px !important; max-width: 44px !important; border-radius: 12px !important;
  padding: 0 !important; justify-content: center !important;
}
/* User 08-19: Da das Icon in der Einzelzeile NIE ausfährt, das #search-input hier
   UNBEDINGT ausblenden — sonst quillt bei Hover der Platzhaltertext („Vi…") hinter der
   Lupe hervor (die :not(:hover)-Regel oben greift bei Hover nicht mehr). Analog zur
   TV-Regel. Suchseite (body.nav-search) ist ausgeschlossen → dort bleibt das Feld voll. */
body.app-desktop:not(.nav-search) .header-row-top #search-bar #search-input {
  opacity: 0 !important; width: 0 !important; min-width: 0 !important;
  padding: 0 !important; pointer-events: none !important;
  /* UI-BATCH-C #4 (2026-09-07): flex-grow killen. Das #search-input trägt eine Basis-
     flex:1 1 0% und wuchs trotz width:0/opacity:0 auf die verbleibenden 24px der 44px-
     Icon-Pille → schob die Lupe 12px links aus dem (D-Pad-)Fokusring. flex:0 0 0 hält
     es auf 0, justify-content:center zentriert die Lupe. Live: Icon-Center == Pillen-
     Center (Δ0). */
  flex: 0 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r2 · User-Feedback) — Nav-Bar wie Mockup:
   • Hoster-PILLEN raus (das Hoster▾-Dropdown ersetzt sie).
   • FLACHE, randlose Buttons (keine harten Kästen/Rahmen), aktiv = weiße Pille.
   • Clips + Abos aus der Sidebar hoch in die Nav-Leiste (Buttons via reskin-JS).
   • Sidebar kompakter: Clips/Abos raus, Icons vertikal mittig.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Hoster-Pillen in der Top-Zeile ausblenden (Dropdown ersetzt sie) — */
body.app-desktop .header-row-top #session-platform-bar { display: none !important; }

/* — Filter-Segment FLACH: kein Kasten/Rahmen; Tabs = randlose Pillen, aktiv weiß.
     #content im Selektor, um die 2-ID-Segment-Regel (v23) zu schlagen. — */
body.app-desktop #content .header-row-top #filter-tabs {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; gap: 2px !important; border-radius: 0 !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab {
  background: transparent !important; border: none !important; box-shadow: none !important;
  height: 40px !important; padding: 0 18px !important; border-radius: 999px !important;
  color: var(--pc-muted) !important; font-weight: 500 !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab:not(.active):hover {
  background: rgba(255,255,255,.06) !important; color: var(--pc-text) !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab.active {
  background: #fff !important; color: #15151c !important; font-weight: 600 !important;
}

/* — Hoster▾-Trigger FLACH (kein Rahmen/Kasten) — */
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger {
  background: transparent !important; border: none !important; height: 40px !important; padding: 0 12px !important;
}
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger:hover { background: rgba(255,255,255,.06) !important; }

/* — Neue Top-Nav-Buttons (Clips / Abos): flach, wie die Tabs — */
body.app-desktop .header-row-top .rsk-topnav-btn {
  display: inline-flex !important; align-items: center !important;
  background: transparent !important; border: none !important; cursor: pointer !important;
  height: 40px !important; padding: 0 16px !important; border-radius: 999px !important;
  color: var(--pc-muted) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important;
}
body.app-desktop .header-row-top .rsk-topnav-btn .nav-label { font-size: inherit !important; }
body.app-desktop .header-row-top .rsk-topnav-btn:hover { background: rgba(255,255,255,.06) !important; color: var(--pc-text) !important; }
body.app-desktop .header-row-top .rsk-topnav-btn.active { background: #fff !important; color: #15151c !important; font-weight: 600 !important; }

/* — Such-Icon FLACH (dezente Fläche, kein harter Rahmen) — */
body.app-desktop:not(.nav-search) .header-row-top #search-bar {
  background: var(--pc-surface, rgba(255,255,255,.06)) !important; border: none !important; box-shadow: none !important;
}

/* — Sidebar: Clips + Abos raus (jetzt oben), Icons vertikal mittig/kompakt — */
body.app-desktop #sidebar .nav-item[data-nav="clips"],
body.app-desktop #sidebar .nav-item[data-nav="subscriptions"] { display: none !important; }
/* R1-1/R3-1 (2026-09-01): Nav-Liste vertikal ZENTRIERT (R3-1-User-Wunsch). Der „Sprung" beim
   Hover hatte 2 Ursachen — (a) Item-Höhe wuchs [gefixt: konstant 46px, s.u.], (b) der Footer-
   Reveal verkleinerte die zentrierte Liste [jetzt gelöst: der Footer-Wrapper #pc-sidebar-foot
   wird beim Hover absolut an den Boden gepinnt → die Nav-Liste behält in BEIDEN Zuständen ihre
   volle Höhe (Logo→unten), die zentrierten Items bleiben an derselben Stelle, kein Versatz]. */
body.app-desktop #sidebar #nav-list { flex: 1 1 auto !important; justify-content: center !important; }
/* R3-1: Footer beim Ausfahren aus dem Fluss nehmen, damit er die zentrierte Nav-Liste nicht
   verkleinert (sonst rücken die Items hoch = der ursprüngliche „Sprung"). */
body.app-desktop #sidebar:hover #pc-sidebar-foot {
  position: absolute !important; bottom: 14px !important; left: 0 !important; right: 0 !important;
}
body.app-desktop #sidebar .nav-item[data-nav="settings"] { margin-top: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r3 · User-Feedback) — „dynamischer, nicht so strikt":
   • Header ohne harten Rahmen/Kasten (transparent, keine Trennlinie).
   • Such-Icon komplett flach (kein halbtransparenter Kasten).
   • Gleichmäßige Abstände Alle·Live·Videos·Clips·Abos (einheitliches Padding/Gap).
   • Kachel-Hintergrund (halbtransparent) weg → nur Rahmen + Thumbnail.
   • Sidebar: dezente, kompakte Icon-Buttons (nicht volle Höhe).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Header: kein Kasten, keine Trennlinie (dezent, verschmilzt mit dem Content) — */
body.app-desktop #header {
  background: transparent !important; border-bottom: none !important; box-shadow: none !important;
}

/* — Such-Icon flach (der subtile Kasten aus r2 wieder raus) — */
body.app-desktop:not(.nav-search) .header-row-top #search-bar { background: transparent !important; }

/* — Gruppierung: Alle·Live·Videos·Clips ENG zusammen, dann Luft zu Abos + Hoster — */
body.app-desktop .header-row-top { gap: 2px !important; }
/* R1-2/R1-8 (2026-09-01): #rsk-topbar-nav war `display:block` mit inline-Kindern auf
   verschiedenen Baselines (`vertical-align:baseline`) → Such-Icon/Tabs/Hoster▾ vertikal
   versetzt (Hoster+Suche saßen tiefer) UND die Tabs lagen nicht in einer sauberen Reihe
   (Pillen-Highlight abgeschnitten/überlappt). Fix: Flex-Reihe mit align-items:center →
   alle auf einer Mittellinie, saubere Tab-Reihe. */
body.app-desktop #rsk-topbar-nav {
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
}
/* User 08-19: Lupe saß zu weit weg von „Alle" (mehr als die Abstände der Tabs
   untereinander). Auf den Tab-Abstand angleichen. */
body.app-desktop:not(.nav-search) .header-row-top #search-bar { margin-right: 4px !important; }
body.app-desktop #content .header-row-top #filter-tabs { gap: 2px !important; }
body.app-desktop #content .header-row-top #filter-tabs .filter-tab,
body.app-desktop .header-row-top .rsk-topnav-btn,
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger {
  padding: 0 12px !important;
}
/* ITEM-1 (User 2026-09-04): Clips/Abos/Hoster = Navigation NACH dem Trennstrich, UNIFORM
   beabstandet (vorher Clips eng 2px an den Filtern, Abos/Hoster 18/10 = alte „Clips gehört zu
   den Filtern"-Optik). Jetzt gleicher 4px-Abstand im Nav-Trio; der vertikale Trennstrich
   (#rsk-topnav-sep) trägt die sichtbare Gruppen-Trennung Filter↔Navigation.
   #content-Präfix (2 IDs) schlägt bestehende #content-…-Regeln. */
body.app-desktop #content .header-row-top #rsk-top-clips { margin-left: 4px !important; }
body.app-desktop #content .header-row-top #rsk-top-abos  { margin-left: 4px !important; }
body.app-desktop #content .header-row-top #hoster-dd     { margin-left: 4px !important; }
/* Dezenter vertikaler 1px-Trennstrich zwischen Filter-Gruppe und Navigation (User: „hübscher
   Trennstrich"). Symmetrische 8px-Margins = die Gruppen-Trennung; align-self:center in der 40px-Zeile. */
body.app-desktop .header-row-top #rsk-topnav-sep {
  flex: 0 0 auto !important; align-self: center !important;
  width: 1px !important; height: 22px !important;
  background: var(--pc-border, rgba(255, 255, 255, 0.16)) !important;
  margin: 0 8px !important; padding: 0 !important; border: 0 !important;
}

/* — Kacheln dynamischer: kein halbtransparenter Karten-Hintergrund (nur Rahmen + Thumb) — */
body.app-desktop .video-card { background: transparent !important; box-shadow: none !important; }

/* — Sidebar: dezente, kompakte Icon-Buttons statt voll-hoher Balken — */
body.app-desktop #sidebar .nav-item {
  width: 46px !important; height: 46px !important; min-height: 0 !important;
  margin: 3px auto !important; padding: 0 !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 14px !important; box-shadow: none !important;
}
body.app-desktop #sidebar .nav-item .nav-icon { margin: 0 !important; }
body.app-desktop #sidebar .nav-item.active,
body.app-desktop #sidebar .nav-item.active.focused {
  background: rgba(255,255,255,.08) !important; box-shadow: none !important;
}
/* Beim Hover-Ausfahren (Overlay-Rail) volle Breite mit Label — aber Item-HÖHE (46px) +
   vertikaler Margin (3px) bleiben wie eingeklappt, sonst ändert sich die Cluster-Höhe und
   die vertikal zentrierten Items „springen" beim Hover (R1-1). Nur horizontal ausfahren. */
body.app-desktop #sidebar:hover .nav-item {
  width: auto !important; height: 46px !important; justify-content: flex-start !important;
  padding: 0 16px !important; margin: 3px 8px !important; border-radius: 10px !important;
}

/* — Suche geöffnet (Klick aufs Icon → switchNav('search') setzt body.nav-search):
   das Suchfeld wird zum breiten Textfeld über die ganze Zeile, die Nav-Buttons
   (Alle/Live/Videos/Clips/Abos/Hoster) weichen; Kalender/Glocke/Avatar bleiben rechts. — */
/* r7: Suchfeld NICHT über die ganze Seite — nur so breit wie die Button-Gruppe oben
   (bis Hoster). Feste, zentrierte Breite (Actions sind absolut rechts, kein Overlap). */
body.app-desktop.nav-search .header-row-top #search-bar {
  flex: 0 0 auto !important; width: min(760px, 46vw) !important; max-width: min(760px, 46vw) !important;
  background: var(--pc-surface) !important; border-radius: 12px !important;
  padding: 0 12px !important; margin-right: 0 !important;
}
body.app-desktop.nav-search .header-row-top #search-input {
  display: inline-block !important; width: 100% !important; flex: 1 1 auto !important;
}
body.app-desktop.nav-search #content .header-row-top #filter-tabs,
body.app-desktop.nav-search #content .header-row-top #rsk-top-clips,
body.app-desktop.nav-search #content .header-row-top #rsk-top-abos,
body.app-desktop.nav-search #content .header-row-top #hoster-dd {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r5 · User-Feedback) — zwei Korrekturen:
   • Nav-Optionen (Suche·Alle·Live·Videos·Clips·Abos·Hoster) horizontal ZENTRIERT;
     nur Kalender/Glocke/Avatar oben rechts (absolut aus dem Fluss gepinnt, damit
     die Options-Gruppe wirklich mittig sitzt statt links). Nur ausserhalb der Suche.
   • Sidebar-Icons NICHT über die volle Höhe verteilt: die <li>.nav-item hatten
     flex:1 1 0% (gemessen) und streckten sich auf ~122px → justify-content:center
     hatte keinen Freiraum. flex:0 0 auto lässt height:46px greifen; der kompakte
     Icon-Cluster wird dadurch vertikal mittig gebündelt (Logo bleibt oben).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Sidebar: Items nicht strecken → kompakter, vertikal zentrierter Icon-Cluster — */
body.app-desktop #sidebar #nav-list .nav-item { flex: 0 0 auto !important; }

/* — Top-Optionen zentriert; Actions (Kalender/Glocke/Avatar) rechts gepinnt.
     Nur :not(.nav-search) — im Suchzustand füllt das Suchfeld (flex:1) die Zeile
     und schiebt die Actions im Fluss nach rechts (kein Overlap). — */
/* r7: Zentrierung + absolute Actions in BEIDEN Zuständen (auch Suche), damit im
   Suchzustand das Suchfeld sauber mittig sitzt statt links-vollbreit. */
body.app-desktop .header-row-top { position: relative !important; justify-content: center !important; }
body.app-desktop .header-row-top #header-actions {
  position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  display: flex !important; align-items: center !important; margin-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r6 · User-Feedback) — zwei Korrekturen:
   • App-Shell-Rahmen weg: #app hatte max-width:1600 + margin:0 160px + box-shadow
     (0 0 0 1px hell = die zwei eingerückten Vertikallinien + 0 0 140px Dark-Glow).
     Auf breiten Monitoren erzeugte das die gerahmte, „letterboxed" Shell. → full-bleed.
   • Bottom-Steuerleiste als EINE schwebende, zentrierte, halbtransparente Pille
     (inkl. „i"): #rsk-wasd-bar war eine vollbreite, deckende Leiste mit Trennlinie
     (bg rgb(32,32,34), left:60/right:0). Das „i" (#pc-keyboard-info-wrap) ist bereits
     ein Kind der Leiste, nur per margin-left:auto nach rechts gedrückt. → Leiste
     transparent, auf Inhaltsbreite geschrumpft, mittig gepinnt, Pillen-BG; „i" inline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — App full-bleed: kein zentrierter Shell-Rahmen, keine Vertikallinien, kein Glow — */
body.app-desktop #app {
  max-width: none !important; margin: 0 !important;
  box-shadow: none !important; border: none !important;
}

/* — Bottom-Bar → schwebende, zentrierte, halbtransparente Pille (alles zusammen) — */
body.app-desktop #rsk-wasd-bar {
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  bottom: 16px !important; width: auto !important; max-width: calc(100% - 96px) !important;
  height: auto !important; gap: 16px !important; padding: 9px 20px !important;
  background: rgba(20, 20, 24, .30) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 999px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .38) !important;
  -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
}
/* das „i" nicht mehr nach rechts absetzen → inline in der Pille */
body.app-desktop #rsk-wasd-bar #pc-keyboard-info-wrap { margin-left: 2px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r7 · User-Feedback) — Hoster-Vereinheitlichung (Optik/Nav):
   • Alle Hoster-PILLEN-Leisten raus — es gilt nur das obere Hoster▾-Dropdown:
     #session-platform-bar (Home/Live/Videos) + #clips-bubbles (Clips) ausblenden.
   • Top-Bar in Clips konsistent: placeFilterTabs setzt in Clips #filter-tabs auf
     visibility:hidden und #hoster-dd auf display:none (inline). !important schlägt
     die Inline-Styles → „Alle·Live·Videos" + „Hoster▾" bleiben oben sichtbar.
   • Clips-Tab-Klick → Startseite (JS in reskin-startseite.js, patchApp).
   HINWEIS (für Claudit): Das TATSÄCHLICHE Clips-Content-Filtern nach dem oberen
   Dropdown ist NICHT verdrahtet — Clips filtert über state.clipsHosterIdx (anderes
   Modell) in core.js (nach Null-Byte nicht lesbar). Clips zeigt daher aktuell alle
   Hoster; die Pipeline-Anbindung ist der fokussierte Nachzug. ═══════════════════ */

/* — Hoster-Pillen-Leisten komplett raus (nur noch das obere Dropdown) — */
body.app-desktop #session-platform-bar,
body.app-desktop #clips-bubbles { display: none !important; }

/* — In Clips die Top-Bar-Filter/Hoster sichtbar halten (Inline-Hiding überschreiben) — */
body.app-desktop.nav-clips #content .header-row-top #filter-tabs { visibility: visible !important; }
body.app-desktop.nav-clips #content .header-row-top #hoster-dd { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r8 · User 08-19) — EINSTELLUNGEN: obere Buttons + zentriert.
   (a) R1-6 (2026-09-01) KEHRT die alte 08-19-Vorgabe UM: auf Einstellungen gehören die
       Content-Filter (Alle/Live/Videos) + Hoster▾ NICHT in die Top-Bar (kein Content zu
       filtern). Sie bleiben ausgeblendet; nur die kontextuellen Nav-Buttons (Home/Abos,
       R1-6-JS mergeTopBarRow) + die Suche stehen oben.
   (b) #section-settings ist ein voll-breiter Block; die Tabbar (float:left) +
       #settings-content (margin-left) nutzen nur die linke Hälfte → der ganze
       Block wird per max-width + margin:auto horizontal zentriert (Titel + Submenü
       + Inhalt gemeinsam). ═══════════════════════════════════════════════════════ */
body.app-desktop.nav-settings #content .header-row-top #filter-tabs { display: none !important; }
body.app-desktop.nav-settings #content .header-row-top #hoster-dd { display: none !important; }
body.app-desktop #section-settings {
  max-width: min(1180px, 100%) !important;
  margin-left: auto !important; margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #538 (Desktop, r9) — D-Pad/WASD-Fokus-Ring für die neue 'topnav'-Zone.
   core.js malt beim Durchsteppen von Clips·Abos·Hoster▾ die Klasse .focused; hier
   der sichtbare Ring (wie ein Tastatur-Fokus). Der Filter-Tab-Fokus hat bereits
   seine eigene .focused-Optik. ═════════════════════════════════════════════════ */
body.app-desktop .header-row-top .rsk-topnav-btn.focused,
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger.focused {
  outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
  outline-offset: 2px !important;
  border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WOS-BATCH r11 (webOS-Sim 08-16 · #540/#544/#546/#547/#549/#550) —
   EINSTELLUNGEN + CONSENT LESBARKEIT. Cross-Plattform (TV/Web/Mobile), theme-
   agnostisch via --pc-*. Diese Schicht lädt NACH theme-*.css + reskin-tv.css,
   gewinnt also per !important gegen die Alt-Token-Werte (--text-faint #868c99,
   --text-muted #5a5f6c, --sys-idle #9aa0aa), die das „grau-auf-grau" erzeugen.
   TV-eigene, bereits lesbare Overrides (reskin-tv.css:327-329, höher spezifisch)
   bleiben für .profile-name-label / .settings-info-desc bewusst bestehen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* #546 — Beschreibungs-/Hinweistext generell: von --text-faint auf lesbares
   --pc-muted heben + Mindestgröße. Deckt .settings-info-desc, das bisher
   ungestylte .settings-hint sowie die Consent-Beschreibungen ab. */
.settings-info-desc,
.settings-hint,
.consent-profiling-desc {
  color: var(--pc-muted, #9397ab) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* #546 — „Plattform-Inhalte ausblenden"-Zeile (settings.js dynamisch): war
   12px --sys-idle → lesbarer Primärtext (es ist ein aktiver Schalter-Label). */
.platform-hide,
.platform-hide > span {
  color: var(--pc-text, #e9e9ed) !important;
  font-size: 14px !important;
}

/* #544 — Profil-Tab: Label/Notiz/Status waren 12px --text-muted (#5a5f6c,
   grau-auf-grau). Label bleibt Sekundär (--pc-muted), Notiz/Status ebenso
   lesbar; Wert-/Status-Text der Konten-Zeilen darf als --pc-text hervorstechen. */
.profile-name-label,
.profile-avatar-label,
.profile-name-note {
  color: var(--pc-muted, #9397ab) !important;
  font-size: 13px !important;
}
.profile-name-status {
  color: var(--pc-text, #e9e9ed) !important;
  font-size: 13px !important;
}
/* Claudit-Fund1 (HIGH): Die neutrale --pc-text-!important-Regel oben (Lesbarkeit,
   #544) darf die SEMANTISCHEN Validierungs-Farben der Namenspruefung NICHT
   plattmachen. profile.js setzt .ok (Name frei) / .err (vergeben/ungueltig) /
   .pc-link-warn — in den Theme-Dateien non-!important definiert, daher verlieren
   sie gegen das neutrale !important → Gruen/Rot-Signal ging verloren. Hier mit
   !important + denselben Theme-Tokens nachziehen (hoehere Spezifitaet .status.ok
   schlaegt das neutrale .status): Neutral bleibt --pc-text, an/aus wieder farbig. */
.profile-name-status.ok  { color: var(--linked, #22c55e) !important; }
.profile-name-status.err { color: var(--live, #ef4444) !important; }
.profile-name-status.pc-link-warn { color: var(--brand, var(--accent, var(--neon-pink, #ff5c8a))) !important; }

/* #540 — Consent-Popup (eigenes Fallback-Banner #cc-text.cmp-dialog-text):
   Optionstext war --text-faint → lesbar. (Cookiebot-natives Dialog ist extern,
   s. #548-Klärung.) */
.cmp-dialog-text,
#cc-text {
  color: var(--pc-text, #e9e9ed) !important;
  opacity: 0.92 !important;
  font-size: 14px !important;
}

/* #549 — DATENSCHUTZ & KONTO: die Alt-Regel (theme-*.css) stellte jede .legal-row
   auf flex-direction:column + Button width:100% (überbreite „elongated" Buttons).
   Zurück auf Zeile: Label/Status LINKS, On/Off-Button RECHTS. Danger-Löschzeile
   ausgenommen (bleibt prominent voll-breit). */
.settings-info.legal-settings .legal-row:not(.legal-row-danger) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.settings-info.legal-settings .legal-row:not(.legal-row-danger) .platform-btn {
  width: auto !important;
  flex: 0 0 auto !important;
}
.settings-info.legal-settings .legal-row .consent-status-line {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.consent-status-label { color: var(--pc-muted, #9397ab) !important; font-size: 13px !important; }
.consent-status-value { color: var(--pc-text, #e9e9ed) !important; font-weight: 600 !important; font-size: 14px !important; }

/* #550 — RECHTLICHES: die drei Buttons (Impressum/Datenschutz/Nutzungsbedingungen)
   gleich breit nebeneinander statt ungleich/überbreit gestapelt. */
#btn-imprint,
#btn-privacy,
#btn-terms {
  flex: 1 1 0 !important;
  min-width: 130px !important;
  text-align: center !important;
}

/* #547 — Sprachauswahl (#lang-select-pills): Default-Browser-Scrollbalken →
   schlanke, theme-getönte Leiste. Chromium/webkit-TV-WebViews unterstützen
   ::-webkit-scrollbar; Firefox-Fallback via scrollbar-width/color. */
#lang-select-pills {
  scrollbar-width: thin !important;
  scrollbar-color: var(--pc-border, #2a2f3e) transparent !important;
}
#lang-select-pills::-webkit-scrollbar { width: 8px !important; }
#lang-select-pills::-webkit-scrollbar-track { background: transparent !important; }
#lang-select-pills::-webkit-scrollbar-thumb {
  background: var(--pc-border, #2a2f3e) !important;
  border-radius: 8px !important;
}
#lang-select-pills::-webkit-scrollbar-thumb:hover { background: var(--pc-muted, #9397ab) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   WEB-PARITAET Welle 2 — Desktop-Fokus-Ring-System (Vollendung von Welle 1).
   Welle 1 hat vier Panel-Traps (HosterDD, Notif, Such-Hoster, Such-Adv) auf
   Desktop tastaturnavigierbar gemacht (WASD/QE → .focused). Das Notif-Panel und
   die Hoster-Dropdown-Zeilen tragen bereits eigene Desktop-Fokusregeln
   (reskin-startseite.css:3098 / reskin-fidelity.css:310); die Such-Adv-Optionen
   und die Filter-/Quell-Pillen (.pc-pill / .adv-pill / .ptsrc-chip) hatten aber
   NUR app-tv-.focused-Regeln (reskin-tv.css:3230/3411, reskin-startseite.css:1983)
   → auf Desktop war der Tastatur-Fokus dort UNSICHTBAR.
   Fix = ein Desktop-Blanket analog zum TV-Blanket (reskin-tv.css:169), aber im
   etablierten Desktop-Idiom: crisp `outline: 2px var(--pc-accent)` (wie die
   topnav-Fokusregel :749-754), NICHT der TV-drop-shadow-Glow (3-Meter-Aesthetik).
   Outline ist orthogonal zu den ~30 box-shadow-.focused-Regeln → kollidiert nicht
   und legt sich auch über akzentgefüllte Pillen (wo ein innerer Ring „verschwindet").
   Kacheln ausgenommen (eigener Kachel-Ring direkt darunter).
   R1-5 (2026-09-01): auf `body.kbd-active` gegatet — der Ring erscheint NUR im
   Tastatur-Modus (core.js setzt kbd-active bei keydown, mousemove entfernt es wieder).
   Sonst sahen Maus-Nutzer den TV-artigen Ring, weil manche Panels beim Öffnen eine
   Zeile `.focused` setzen (z.B. Notif openPanel → erste Zeile). ═════════════════════ */
body.app-desktop.kbd-active .focused:not(.video-card) {
  outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
  outline-offset: 2px !important;
}
/* Kachel-Fokus auf Desktop: eigener Ring am Kachel-Rahmen — ebenfalls nur im
   Tastatur-Modus (R1-5). */
body.app-desktop.kbd-active .video-card.focused {
  outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
  outline-offset: 3px !important;
  border-radius: 12px !important;
}

/* R4-19 (2026-09-01) — Notif-Panel: beim Öffnen bekommt „Alle als gelesen markieren"
   automatisch den (D-Pad-)Fokus; für Maus-Nutzer sah man dadurch permanent einen
   Fokus-Ring/-Rahmen um den Button. R1-5 gatet zwar `.focused`, aber die NATIVE
   `:focus`-Markierung (programmatischer `.focus()` beim openPanel) blieb sichtbar.
   Fix: jede Fokus-Indikation im Notif-Panel nur im Tastatur-Modus zeigen (wie R1-5).
   Der D-Pad-Fokus bleibt → erster WASD-Schritt landet weiterhin auf „mark read",
   und DANN erscheint der Ring. */
body.app-desktop:not(.kbd-active) #notif-panel :focus,
body.app-desktop:not(.kbd-active) #notif-panel :focus-visible,
body.app-desktop:not(.kbd-active) #notif-panel .focused {
  outline: none !important;
  box-shadow: none !important;
}
/* Im Tastatur-Modus trägt der Button denselben Ring wie andere Fokus-Ziele (R1-5). */
body.app-desktop.kbd-active #notif-mark-read:focus,
body.app-desktop.kbd-active #notif-mark-read.focused {
  outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
  outline-offset: 2px !important;
}

/* R4-10 (2026-09-02) — Auf der Video/Live-Seite (body.player-active) das Notif-Dropdown
   fest in die obere RECHTE Ecke des Viewports pinnen + breitenbegrenzt, damit es NIE
   über das eingebettete Video (linke Spalte) ragt. Grund: YouTube-Embed-ToS verbietet
   eigene Overlays über dem Player — sicherheitshalber für ALLE Hoster. Der Player ist
   ein Overlay mit hohem z-index → das Panel MUSS drüber liegen, sonst wäre es verdeckt. */
body.app-desktop.player-active #notif-panel:not(.hidden) {
  position: fixed !important;
  top: 64px !important;
  right: 16px !important;
  left: auto !important;
  width: 340px !important;
  max-width: min(340px, 26vw) !important;
  z-index: 2147483000 !important;
}

/* R4-16 (2026-09-01) — Kalender-Ereignis-Zeilen: (a) Breite begrenzt — die Titel sind
   kurz, die volle Breite (Erinnern-Glocke ganz außen rechts) wirkte auseinandergezogen;
   auf angenehme Lesebreite zentriert. (b) Creator/Uploader-Sub-Zeile war `--text-muted`
   = grau-auf-grau (card-2) → unlesbar + klebte am Titel. Kontrast rauf + Abstand. */
body.app-desktop .cal-list { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
body.app-desktop .cal-item-sub {
  color: rgba(255, 255, 255, .72) !important;
  margin-top: 3px !important;
}

/* R4-7 (2026-09-01) — Shorts-Kommentar-Modul auf Desktop: der Composer klebte
   (Input direkt am „Kommentieren"-Button, kein Gap). Composer entzerrt + Textarea-
   Mindesthöhe + etwas mehr Panel-Padding = die im Screenshot-6 gemeldete Quetschung.
   CLAUDIT-FIX F1 (2026-09-01): die ursprüngliche Zeile mit
   `body.app-desktop .shorts-engage-wrap` width:480px !important ENTFERNT. Sie zielte
   auf das falsche Element: .shorts-engage-wrap ist auf Desktop NICHT die 420px-Spalte,
   sondern die 84px-IKONSPALTE — `body.platform-pc .shorts-engage-wrap` setzt
   width:84px + max-width:84px (theme-classic.css:6103, @media ≥1024; Desktop trägt via
   App.syncPlatformPcClass BEIDE Klassen app-desktop + platform-pc). Das nicht-!important
   max-width:84px bleibt in Kraft → 480px war wirkungslos (auf 84px geklemmt). Schlimmer:
   fiele der Cap je weg, schöbe 480px das Kommentar-Flyout .shorts-comments-panel
   (left:calc(100%+12px), theme:6150) ~400px nach rechts aus dem Viewport. Die eigentliche
   „Kommentarspalte" ist das .shorts-comments-panel-Flyout (min(320px,32vw)); dessen
   Verbreiterung bleibt bewusst ein separater Design-Schliff (Cloder-Vermerk). */
body.app-desktop .shorts-comment-composer { gap: 8px !important; margin-bottom: 12px !important; }
body.app-desktop .shorts-comment-input { min-height: 40px !important; }
body.app-desktop .shorts-comments-panel { padding: 14px 16px !important; }

/* R4-1 (2026-09-01) — FX-Optionsleiste unter dem Player war „auseinandergezogen":
   #pd-aspect-seg (Standard/Breitbild/Kino) LINKS, #pd-pictobar (Play/PiP/Foto/A/B/Loop)
   per `margin-left:auto`+`flex-end` ganz RECHTS. User will die Buttons zentral unter dem
   Player. → Optbar-Reihe zentrieren, Pictobar-Rechtsschub aufheben (Segment+Picto als
   zentrierte Gruppe). Überschreibt reskin-startseite.css:1346/1353 (lädt später). */
body.app-desktop #pd-optbar { justify-content: center !important; }
body.app-desktop #pd-optbar #pd-pictobar {
  margin: 0 !important;
  justify-content: center !important;
}

/* R5-2 (2026-09-02) — FX-Buttons (Piktobar 36×36) und das Seitenverhältnis-Segment
   (Standard/Breitbild, .pd-aspect-btn 32px) standen NICHT auf gleicher Höhe: das
   Segment war 4px flacher (32 vs 36), wodurch die beiden Gruppen trotz
   align-items:center optisch versetzt wirkten (User-Fund R5-2, gegroundet top-Versatz
   + Höhe 32/36). → Segment-Buttons auf dieselbe 36px-Höhe wie die Piktogramme; der
   #pd-optbar-Row-gap bleibt 12px (reskin-startseite.css:1347), Piktobar-internes gap
   8px unverändert. So teilen beide Gruppen dieselbe Mittellinie UND dieselbe Höhe. */
body.app-desktop #pd-optbar #pd-aspect-seg .pd-aspect-btn { height: 36px !important; }

/* ITEM-1 (User 2026-09-04): Options-Reihe DICHT + exakt gleiche Höhe wie die Modi.
   (a) Aspect-Segment-Container auf feste 36px (= Picto-Höhe) — der 1px-Rahmen machte ihn
       38px, wodurch das Segment trotz R5-2 minimal höher/versetzt zu den Pictos stand.
       align-items:stretch (Basis) lässt die Buttons die 36px voll ausfüllen → identische
       Höhe UND Mittellinie beider Gruppen.
   (b) „dicht an dicht": Piktobar-internes gap 8→0 (Pictos verbinden sich via player.css
       margin-left:-1px zur geschlossenen Segment-Gruppe) und der Abstand Segment↔Piktobar
       (#pd-optbar gap) 12→6, damit die Steuerung kompakt zusammensteht statt auseinandergezogen. */
/* FEAT-NOTIF-OPTIN (User 2026-09-04): kompakter Glocken-Toggle neben „Gefolgt" (Icon-Button). */
/* ITEM-2 (User 2026-09-04): „Folgen"+Glocke = EIN segmentierter Button (#pd-follow-group).
   Glocke immer sichtbar; Höhe = .pd-btn (vertikales Padding 9px, damit beide Segmente exakt
   gleich hoch sind), verbunden via -1px-Overlap + 1px-Divider. Vor dem Folgen inaktiv
   (ausgegraut, cursor:default); .bell-on = Akzentfarbe wenn Benachrichtigungen aktiv. */
body.app-desktop .pd-follow-group { display: inline-flex; align-items: stretch; }
body.app-desktop #pd-follow-group #pd-follow { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.app-desktop #pd-follow-group #pd-follow-bell {
  min-width: 0 !important; padding: 9px 13px !important; line-height: 1 !important; font-size: 15px !important;
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  /* CLAUDIT-FIX F2 (2026-09-04): rechte Segment-Ecken an #pd-follow angleichen. #pd-follow ist
     `border-radius:9px` (reskin-startseite.css:926, UI-OVERHAUL-T7 §6 — 9px ist der Row-Radius),
     die Glocke erbte von `.pd-btn` (theme) aber 999px → asymmetrisches Segment (links 9px, rechts
     Pille). Explizit 9px setzen ((2,2,1)!imp schlägt das theme-`.pd-btn` (0,2,0)). */
  border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important;
  margin-left: -1px !important; border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
}
body.app-desktop #pd-follow-group #pd-follow-bell.bell-inactive { opacity: .45 !important; cursor: default !important; }
body.app-desktop #pd-follow-group #pd-follow-bell.bell-on { color: var(--pc-accent, #2f6bff) !important; }
/* TV/Controls-Notify-Glocke (B) unverändert: kompakter Icon-Button. */
body.app-desktop .player-ctl-notify-bell { min-width: 0 !important; padding: 6px 10px !important; line-height: 1 !important; font-size: 15px !important; }
body.app-desktop .player-ctl-notify-bell.bell-on { color: var(--pc-accent, #2f6bff) !important; }
/* FEAT-NOTIF-OPTIN: Pro-Kanal-Glocke in den Creator-Profil-Kacheln (unscoped → Desktop + TV). */
.creator-chan-bell { cursor: pointer; margin-left: 8px; font-size: 15px; line-height: 1; -webkit-user-select: none; user-select: none; }
.creator-chan-bell.bell-on { color: var(--pc-accent, #2f6bff); }

body.app-desktop #pd-optbar { gap: 6px !important; }
body.app-desktop #pd-optbar #pd-aspect-seg { height: 36px !important; align-items: stretch !important; }
body.app-desktop #pd-optbar #pd-pictobar { gap: 0 !important; }
/* CLAUDIT-FIX F1 (2026-09-04): das `gap:0` oben ist für die Picto-ABSTÄNDE INERT — #pd-pictobar
   hat als einziges direktes Kind die eine .pd-picto-row (renderPictoBar, ui-auth74-73.css:504),
   der Flex-gap wirkt also nur zwischen (nicht vorhandenen) Row-Geschwistern. Der reale Abstand
   der Pictos kommt aus dem Regel-Ziel `#pd-pictobar .pd-picto-row > *` mit
   `margin:0 10px 10px 0 !important` (ui-auth74-73.css:516, (1,1,0)+!important), das zugleich
   player.css:129 `margin-left:-1px`
   (ohne !important) schlägt → der intendierte Segment-Verbund existierte real nicht, die Pictos
   standen 10px auseinander. Fix am echten Hebel, nur auf der Desktop-Watch-Page (#pd-optbar,
   2 IDs) → schlägt die ui-auth-Regel und stellt den -1px-Verbund her; TV/Mobile unberührt. */
body.app-desktop #pd-optbar #pd-pictobar .pd-picto-row > * { margin: 0 !important; }
body.app-desktop #pd-optbar #pd-pictobar .pd-picto-row .pd-picto + .pd-picto { margin-left: -1px !important; }
/* ITEM-1 ECHTER HEBEL (User 2026-09-04, 3. Runde — LIVE per Computed-Style gemessen):
   Die zwei Vorversuche trafen NUR die Picto-Kind-Margins + `#pd-pictobar`-gap — der reale
   Rest-Abstand kam aus (a) dem `gap:8px` der `.pd-picto-row` SELBST (nicht der Container-gap;
   Basis player.css:116 ist zwar gap:0, ein Sheet überschreibt live auf 8px — per
   getComputedStyle am Live-Element bestätigt) und (b) dem Row-eigenen `margin:0 10px 10px 0`
   aus `ui-auth74-73.css:516 #pd-pictobar > *` (die ROW ist ein direktes Kind von #pd-pictobar,
   nicht nur die Pictos → 10px rechts/unten → 8px-Lücken + vertikaler Versatz zur Modus-Zeile).
   Injektionsfrei validiert (via `<style>`, nicht `.style`-inline → keine R5-1b-Maskierung):
   diese Regel setzt rowGap→0 + Row-margin→0. Spezifität (2,1,0)!important schlägt sowohl
   `#pd-pictobar > *` (1,0,0)!imp als auch die Theme-`.pd-picto-row-secondary`-Margins. Pictos
   verbinden sich via -1px (oben) zur geschlossenen Segment-Gruppe auf EXAKT der 36px-Höhe +
   Mittellinie der Standard/Breitbild-Modi. */
body.app-desktop #pd-optbar #pd-pictobar .pd-picto-row { gap: 0 !important; margin: 0 !important; }

/* R5-3 (2026-09-02) — „Kino"-Modus-Button ausblenden (User: „kann weg", nur den Button;
   die Toggle-Logik toggleCinema/pd-cinema bleibt unangetastet). Nur der Segment-Knopf
   mit data-aspect="cinema"; Standard/Breitbild bleiben. Nur Desktop (app-desktop);
   #pd-aspect-seg ist ohnehin Desktop/Tablet-only (IS_PHONE-Gate, player-desktop.js:1318). */
body.app-desktop #pd-aspect-seg .pd-aspect-btn[data-aspect="cinema"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R5-9 (2026-09-02) — YT-Embed-ToS: Kalender/Benachrichtigung/Profil-Icons lagen im
   #pd-topbar ÜBER der VIDEO-Spalte (deren Toolbar-Zeile nur so breit ist wie das
   Video, x290–1494), samit ihre Dropdowns über dem Hoster-Embed öffnen konnten. Der
   neue Cluster #pd-topbar-icons (index.html) wird ab Desktop-Breite absolut an die
   obere RECHTE Ecke des #player-desktop-Grids gepinnt — also ÜBER die Chat/Empfehlungs-
   Spalte (#pd-side, rechte 372px-Spalte, reskin-startseite.css:879), nie über das Video.
   Die Chat-Spalte reserviert oben Platz (padding-top), damit der Cluster die Chat-Karte
   nicht überlappt (und richtet die Karte zugleich näher an der Video-Oberkante aus).
   Basis (unter 1024px / Mobile-Fallback): schlichter Inline-Flex-Cluster im Topbar. */
.pd-topbar-icons { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) {
  body.app-desktop #player-desktop { position: relative; }
  body.app-desktop #pd-topbar-icons {
    position: absolute !important; top: 0 !important; right: 0 !important;
    margin: 0 !important; gap: 8px !important; z-index: 30 !important;
  }
  body.app-desktop #pd-side { padding-top: 46px !important; }
}

/* R4-11 (2026-09-01) — Theme-Auswahl (#pd-theme-switcher) im Video-Topbar entfernt
   (User: gehört da nicht hin; Theme ist in den Einstellungen wählbar). Nur Desktop. */
body.app-desktop #pd-theme-switcher { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   WEB-PARITAET Welle 2b — Deliberate Desktop-Disabled-States.
   Map-Befund: es gab KEINE bewusste app-desktop-:disabled-Optik (ausser dem
   spezifischen .pd-comment-report-btn) → deaktivierte Buttons waren auf Desktop
   nicht als solche erkennbar. Bewusst NIEDRIGE Spezifitaet + KEIN !important,
   damit spezifische Regeln (z.B. :is(app-desktop,…) .pd-comment-report-btn:disabled,
   theme-*.css) weiter gewinnen — dies ist nur der einheitliche Basis-Zustand.
   Deckt echtes :disabled UND aria-disabled="true" (Buttons, die per Attribut
   statt Property deaktiviert werden).
   CLAUDIT-FIX F1 (2026-08-31): der aria-disabled-Arm SCHLIESST Formular-Controls
   (input/select/textarea) AUS. Grund: benutzerdefinierte Switches verstecken ihren
   nativen <input type=checkbox> per `.pc-switch input` opacity:0 (Klick-Overlay,
   position:absolute, 100%×100%). Das Attribut-Selektor [aria-disabled="true"] (0,2,1)
   schlaegt jene Hide-Regel (0,1,1) und zwang die native Checkbox auf opacity:.45 →
   sie erschien als grauer Kasten UEBER dem Toggle (nur Desktop, HA-Teaser). Native
   Form-Controls sind ohnehin per UA im :disabled-Look — der aria-Arm zielt (laut
   Intent oben) auf BUTTONS/Chips/Reihen, nicht auf versteckte Inputs. Die drei
   `:not()` tragen je nur einen Typ-Selektor → CSS-L3, chrome53-sicher.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop button:disabled,
body.app-desktop .pd-btn:disabled,
body.app-desktop :not(input):not(select):not(textarea)[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* WEB-PARITAET Welle 2b — BEWUSST NICHT gemacht (dokumentiert):
   (1) Globaler --sys-glow-Desktop-Retune: var(--sys-glow) speist ~30 Konsumenten
       pro Theme, davon auch PERSISTENTE Zustaende (.pd-react-btn.active, diverse
       :hover) — ein Token-Override waere also viel breiter als „nur Fokus" und
       riskierte Ruhezustands-Regressionen fuer rein kosmetischen Gewinn. Nach dem
       crisp Outline oben ist der Desktop-Fokus ohnehin klar sichtbar.
   (2) Spacing-/Hover-„Konsistenz": kein konkreter Fund zum blinden Bauen; wird bei
       Bedarf gegen belegte Einzelfaelle nachgezogen. */

/* ═══════════════════════════════════════════════════════════════════════════
   R1-9 (2026-09-01) — TV-Videopage-Chrome NICHT auf Desktop leaken.
   #tv-vp-topbar + #tv-vp-recos sind statische Kinder von #player-overlay und werden
   NUR unter body.app-tv versteckt (reskin-tv.css:1801). Auf Desktop fehlte das Hide →
   bei offenem Desktop-Player rendern PLAY-LIVE-Logo/Suche/Home/Abos/„Empfehlungen"
   unstyled unten links. Desktop nutzt #pd-topbar; die tv-vp-Kette gehört hier versteckt.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop #tv-vp-topbar,
body.app-desktop #tv-vp-recos { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R1-7 (2026-09-01) — PeerTube „Server auswählen"-Modal: Sprach-Pillen lesbar auf Desktop.
   `.ptsrc-lang` sind `.platform-btn` OHNE eigene Farbe; nur `body.app-tv` gibt ihnen
   Text-/Aktiv-Farbe (reskin-startseite.css:2046-2065). Auf Desktop erbten sie ~schwarz
   (theme:7814-7829) → „Alle Sprachen/FR 35…" schwarz auf dunklem Modal. Spiegelt den
   TV-Aktiv-Block für Desktop (Akzent-Füllung + dunkler Text + transparentes Count-Badge).
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop .ptsrc-lang { color: var(--pc-text, #e9e9ed) !important; }
body.app-desktop .ptsrc-lang.active {
  background: var(--pc-accent, #7c5cff) !important; color: #0a0c12 !important;
}
body.app-desktop .ptsrc-lang.active .ptsrc-lang-code { color: #0a0c12 !important; }
body.app-desktop .ptsrc-lang.active .ptsrc-lang-count {
  color: #0a0c12 !important; background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R1-3 (2026-09-01) — Top-Bar sticky + frosted statt opakem Balken über dem Content.
   #header war transparent (:585) aber position:relative (:theme) → scrollte weg. User will
   die Bar oben behalten UND durchscheinend: sticky + niedrige Alpha + Blur = Glas-Header
   (Content scrollt frosted durch, Header-Text lesbar). Nur Desktop (modern Chrome) → sticky/
   backdrop-filter unbedenklich; app-tv (chrome53) trägt diese Regeln nicht.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop #header {
  /* SCROLL-UMBAU (User 2026-09-03): position von `sticky` auf `absolute` geändert.
     Grund: #content ist ein flex-column-Container mit overflow:hidden, der NICHT selbst
     scrollt — der Scroller ist die aktive .section (flex:1, overflow-y:auto) DANEBEN.
     `sticky` am Header hatte darum keinen Scroll-Anker (kein scrollender Vorfahr) und
     wirkte nur als flex-shrink:0-Block, der die Section nach unten SCHOB → Section-Box
     eingerückt, Inhalt konnte nie hinter den Header scrollen. `absolute` nimmt den Header
     aus dem Flex-Fluss (überlagert oben), sodass die Section die VOLLE #content-Höhe füllt
     und der Inhalt sichtbar hinter dem transparenten Header durchscrollt. */
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 40 !important;
  /* R4-18 (2026-09-01): solides Tint-Band (.62) raus — der Header soll KEINE
     sichtbare Fläche mehr haben. Blur bleibt (Glas), damit Logo/Icons über buntem,
     jetzt DURCHSCROLLENDEM Content lesbar bleiben; die Nav-Items tragen zusätzlich
     eigene Pillen (R5-1/R5-1c). */
  background: transparent !important;
  /* ITEM-4 (User 2026-09-04): full-width Blur RAUS — er frostete den GESAMTEN
     durchscrollenden Content hinter der Top-Bar. Der Blur kommt jetzt content-hugging
     nur auf die zwei Options-Cluster (#rsk-topbar-nav, #header-actions), analog der
     Bottom-Bar (#hint-bar) — so scrollt der Content in den Zwischenräumen SCHARF vorbei. */
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-bottom: none !important;
}
/* ITEM-4 (User 2026-09-04): Frosted-Glas nur um die Options-Cluster (wie #hint-bar unten). */
body.app-desktop .header-row-top #rsk-topbar-nav,
body.app-desktop .header-row-top #header-actions {
  background: rgba(18, 18, 22, 0.55) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30) !important;
}
/* SCROLL-UMBAU (User 2026-09-03) — die aktive Section füllt die volle #content-Höhe
   (Header ist jetzt absolut/überlagernd, s. o.) und scrollt hinter den transparenten
   Top-/Bottom-Bars durch. Die Freiräume, damit erste/letzte Items nicht UNTER den Bars
   kleben, kommen aus INNEN-padding statt aus fester Höhe + Außen-Einzug:
   - padding-top 90px  = Header-Höhe (~72) + Luft (erste Kachelreihe unter dem Header).
   - padding-bottom 78px = schwebende WASD-Pille (bottom:14 + ~40 Höhe + Luft).
   #content: die alte 56px-Bottom-Reserve (reskin-startseite.css:121) raus + position:relative
   als Anker für den absoluten Header. Gilt für ALLE Sektionen (ein #header für alle). */
body.app-desktop #content { position: relative !important; padding-bottom: 0 !important; }
body.app-desktop #content > .section {
  padding-top: 90px !important;
  padding-bottom: 78px !important;
}
/* Sonderfall Connect-Banner (#connect-banner, nur ausgeloggt + auf Home, sonst `.hidden`
   =display:none): er ist ein FLOW-Geschwister der Sektionen (kein Section-Kind). Mit dem
   jetzt absoluten Header rutschte er nach ganz oben (y≈12) und läge HINTER dem Header →
   sichtbar-versteckt. Fix: sichtbarer Banner klärt den Header per margin-top; die dann
   folgende aktive Section braucht KEIN volles 90px-padding-top mehr (der Banner liefert den
   Abstand schon) → Doppel-Abstand vermeiden. Ist der Banner `.hidden` (eingeloggt = Normal-
   fall), greift oben die 90px-Regel und der Inhalt scrollt hinter den Header. */
body.app-desktop #content > #connect-banner:not(.hidden) { margin-top: 84px !important; }
body.app-desktop #content > #connect-banner:not(.hidden) ~ .section.active { padding-top: 16px !important; }

/* SCROLL-UMBAU-Folgefix (Claudit F1, 2026-09-03): Der einzige sticky Sub-Header INNERHALB
   eines Section-Scrollers ist die Settings-Tab-Spalte (`.settings-tabbar`, theme-*.css:
   `position:sticky; top:0`, Geschwister vor #settings-content in #section-settings). Ihr
   `top:0` ist SCROLLPORT-relativ; da der Header jetzt absolut/überlagernd ist, liegt die
   Scrollport-Oberkante bei y≈0 → die Leiste klebte beim Scrollen HINTER dem transparenten
   Header (dessen oberste ~72px + Klick-Abfang). Anker auf die Header-Freiraum-Linie heben
   (90px = section padding-top), damit sie bündig UNTER dem Header andockt wie der Content.
   Nur app-desktop (TV/Mobile: Header nicht absolut, sticky-Verhalten unverändert). */
body.app-desktop .settings-tabbar { top: 90px !important; }

/* R4-4 (2026-09-01) — Notif-Badge saß „zu weit über" der Glocke (Theme-Basis
   .notif-badge top:2/right:2 = Button-Ecke; die gezeichnete Glocke ist kleiner/
   zentriert → Badge wirkte losgelöst OBERHALB). Auf Desktop tiefer/enger auf die
   Glocken-Oberkante-rechts ziehen + etwas kleiner + Trennring in Header-Grund. */
body.app-desktop #notif-bell { position: relative !important; }
body.app-desktop #notif-bell .notif-badge {
  /* ITEM-2 (User 2026-09-04): Badge saß mittig über dem Glocken-Glyph (top:5/right:4 lag
     über der zentrierten, kleineren Glocke). User will klar OBEN-RECHTS wie auf der
     Video-Seite. → an die Button-Ecke ziehen. */
  top: 1px !important; right: 1px !important; left: auto !important; bottom: auto !important;
  min-width: 15px !important; height: 15px !important; line-height: 15px !important;
  padding: 0 3px !important; font-size: 9px !important; border-radius: 9px !important;
  box-shadow: 0 0 0 2px var(--pc-bg, #101117) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R5-1 (2026-09-02) — „Solider Balken" weg, Pillen um die Items (Fortführung R4-18).
   Grounding (live v1.13.6): der Top-#header ist seit R4-18 bereits transparent
   (bg rgba(0,0,0,0)+Blur) — das verbleibende solide Band ist die UNTERE WASD-Hint-Bar
   (#hint-bar), voll-breit mit `background:var(--pc-surface)` (=rgb(32,32,34), reskin-
   startseite.css:117) + border-top. Der User will die Steuerung als Pille um die Items,
   nicht als Balken über der Content-Unterkante.
   (a) #hint-bar: voll-breites Solid-Band → zentrierte, schwebende, halbtransparente
   Pille (Blur, gerundet, content-hugging). left/right/transform zentrieren unabhängig
   von der Sidebar-Breite → die sidebar-abhängigen left-Overrides (reskin-startseite.css:
   88-90) werden gegenstandslos mit-überschrieben. Nur app-desktop. */
body.app-desktop #hint-bar,
body.app-desktop.app-leanback #hint-bar,
body.app-desktop.sidebar-collapsed #hint-bar {
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  width: auto !important; max-width: calc(100vw - 300px) !important;
  bottom: 14px !important;
  background: rgba(18, 18, 22, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  padding: 7px 22px !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}
/* (b) Home-Filter-Tabs (Alle/Live/Videos): inaktive Tabs bekommen eine dezente Dauer-
   Pille (bisher nur :hover, reskin-desktop.css:543) — die Filter-Gruppe liest sich damit
   als Segment-Pillen auf dem transparenten Header. Spezifität MUSS die vorhandene 2-ID-
   Regel `#content .header-row-top #filter-tabs .filter-tab` (:538 `background:transparent`)
   matchen, sonst greift nur der border-radius. Aktiv trägt bereits die weiße Pille (:546).
   Die separaten Nav-Buttons (Clips/Abos = .nav-item/.rsk-topnav-btn, andere Funktion)
   bleiben bewusst Text — Filter ≠ Sektion-Navigation. */
body.app-desktop #content .header-row-top #filter-tabs .filter-tab:not(.active) {
  background: rgba(255, 255, 255, 0.07) !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
/* R5-1c / „Uniforme Pillen" (User 2026-09-02): die NEBEN den Filter-Tabs liegenden Top-
   Nav-Buttons (Clips/Abos = `.rsk-topnav-btn`) + der Hoster-Dropdown-Trigger bekommen
   DIESELBE Pillen-Optik, damit die gesamte obere Leiste einheitlich als Segment-Pillen
   liest (nicht Filter=Pillen / Nav=Text gemischt). `.rsk-topnav-btn` trägt bereits
   `border-radius:999px`; hier nur der Dauer-Idle-/Hover-/Aktiv-Grund. Aktiv = weiße Pille
   wie `.filter-tab.active`. Hoster-Trigger von `radius:10px` auf Pille angeglichen.
   Claudit-F1 (2026-09-03): Der Hoster-Trigger MUSS über `#hoster-dd .hoster-dd-trigger`
   selektiert werden (nicht bloß `#hoster-dd-trigger`) — analog R5-1b: die Bestandsregel
   `body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger` (:551 `background:transparent`,
   :554 `:hover .06`) hat 1 ID + 3 Klassen und schlägt ein bloßes `#hoster-dd-trigger`
   (1 ID + 2 Klassen) → die Pillen-Fläche wäre sonst wirkungslos (nur radius griffe).
   Gleiche Spezifität + spätere Quell-Position → R5-1c gewinnt den Grund. */
body.app-desktop .header-row-top .rsk-topnav-btn:not(.active) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-radius: 999px !important;
}
body.app-desktop .header-row-top .rsk-topnav-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
body.app-desktop .header-row-top .rsk-topnav-btn.active {
  background: #fff !important; color: #15151c !important; border-radius: 999px !important;
}
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger {
  background: rgba(255, 255, 255, 0.07) !important; border-radius: 999px !important;
}
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R1-16 (2026-09-01) — Desktop-Kacheln dichter (PC-Nutzer näher als 3-Meter-TV).
   Kein eigenes Desktop-Grid → erbte Basis `repeat(4,1fr)` (theme:552) edge-to-edge → große
   Kacheln. Jetzt auto-fill min. 240px → mehr/kleinere Kacheln auf breiten Screens + Seitenrand.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop .video-grid {
  /* R3-4 (2026-09-01): NICHT auto-fill (gab 8 Spalten auf breit = unübersichtlich, Auge verliert
     den Fokus) — genau 5 Kacheln, zentriert, mit ~1 Kachel freiem Rand links/rechts (Breite 72% →
     14% Rand je Seite ≈ 1 Kachel; auf Ultra-Wide via max-width gedeckelt). */
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  width: 72% !important; max-width: 1600px !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R1-14 (2026-09-01) — Desktop-Such-Seite optisch aufgewertet (D-Pad-Zonen erhalten).
   Befund (DOM live): #search-adv-time/#search-adv-len (Zeitraum/Länge) rendern als VOLLE
   Blockzeilen statt kompakt inline; #adv-filter-card ist eine LEERE „Erweiterte Filter"-Leiste
   (deprecated Legacy, Drawer 0 Kinder). Fix: Filterreihe = eine saubere Flex-Zeile mit Gap
   (Tabs · Hoster · Zeitraum · Länge inline), leere Leiste raus. IDs (#search-hoster-dd/
   #search-adv-time/#search-adv-len) + ihre D-Pad-Traps (core.js:17313/17339) unberührt →
   WASD/Pfeil-Navigation bleibt. ═════════════════════════════════════════════════════════ */
body.app-desktop #section-search #search-filter-row {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important;
  gap: 12px !important; margin: 6px 0 14px !important;
}
body.app-desktop #section-search #search-adv-time,
body.app-desktop #section-search #search-adv-len {
  display: inline-flex !important; width: auto !important; margin: 0 !important;
}
/* Leere „Erweiterte Filter"-Legacy-Leiste komplett raus (nutzlos, Drawer ist leer). */
body.app-desktop #adv-filter-card { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R3-3 (2026-09-01) — Desktop-PiP-Float-Größen hochskaliert. User: L war zu klein (fühlte
   sich wie S an). Neue Skala: S = altes L (600×360), M/L entsprechend größer (Seitenverhältnis
   5:3 wie zuvor). Überschreibt die pro-Theme identischen Defaults (theme-*.css:5006-5008).
   NUR Desktop-PiP (#pd-video-stage.pd-pip-float); der TV-Mini-Player (.mini-tv) bleibt.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop #pd-video-stage.pd-pip-float.pip-size-s { width: 600px !important; height: 360px !important; }
body.app-desktop #pd-video-stage.pd-pip-float.pip-size-m { width: 760px !important; height: 456px !important; }
body.app-desktop #pd-video-stage.pd-pip-float.pip-size-l { width: 920px !important; height: 552px !important; }

/* R4-14 (2026-09-01) — PiP-Float saß mit 18px zu eng in der Ecke (v.a. oben-links →
   Rahmen/Schatten clippte am Viewport-Rand). Alle 4 Desktop-Ecken bekommen mehr
   Abstand (26px), damit der Rahmen sauber frei steht. Unten-Ecken behalten ihren
   66px-Bottom-Abstand über der WASD-Leiste (reskin-startseite.css:1489), hier nur
   die seitlichen Insets. Theme-Basis 18px (theme-*.css:5000-5003). */
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tl { left: 26px !important; top: 26px !important; }
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tr { right: 26px !important; top: 26px !important; }
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-bl { left: 26px !important; }
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-br { right: 26px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R5-6a (2026-09-02) — PiP-Chrome-Leiste (#pd-pip) lag als opake Leiste OBEN ÜBER
   dem Video (theme-*.css: top:0; über dem Content) — vom User als „nicht erlaubt"
   markiert. Fix OHNE Overflow-/Rundungs-Eingriff (die Video-Kinder #player/#yt-player/
   #av-player/iframe sind position:absolute;top:0;height:100% — theme-*.css
   :2678-2681): die Leiste bekommt einen EIGENEN 36px-Streifen (reale Leistenhöhe aus
   ui-auth74-73.css:576), das Video wird um 36px verkürzt und je nach PiP-Ecke einge-
   schoben, damit die Leiste NIE über dem Video liegt:
     • PiP UNTEN (bl/br) → Leiste OBEN, Video 36px nach unten (top:36px).
     • PiP OBEN  (tl/tr) → Leiste UNTEN (#pd-pip bottom:0), Video bleibt oben.
   :is()-Kürzung wie in theme-*.css bereits etabliert (nur app-desktop, modernes Chrome). */
body.app-desktop #pd-video-stage.pd-pip-float > :is(#player, #yt-player, #av-player, iframe) {
  height: calc(100% - 36px) !important;
}
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-bl > :is(#player, #yt-player, #av-player, iframe),
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-br > :is(#player, #yt-player, #av-player, iframe) {
  top: 36px !important;
}
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tl > :is(#player, #yt-player, #av-player, iframe),
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tr > :is(#player, #yt-player, #av-player, iframe) {
  top: 0 !important;
}
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tl > #pd-pip,
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-tr > #pd-pip {
  top: auto !important; bottom: 0 !important;
}
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-bl > #pd-pip,
body.app-desktop #pd-video-stage.pd-pip-float.pip-pos-br > #pd-pip {
  top: 0 !important; bottom: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R4-6 + R4-9 (2026-09-01) — Desktop-Kachelfokus/-hover = Hosterfarben-Ring wie TV.
   Problem: Desktop hatte KEINE eigene Fokus-/Hover-Ring-Regel → Maus-Hover machte die
   Kachel nur minimal größer (kein dicker Rand, R4-6), WASD-Ring war weiß statt Hoster-
   farbe (R4-6), und Glow „funktionierte nicht" (R4-9 — `no-tile-glow` ist Default AUS,
   und der Hosterfarben-Ring war NUR für app-tv definiert, reskin-tv.css:303-337).
   Fix: dieselbe Zwei-Ebenen-Mechanik auf app-desktop portiert + `:hover` (Maus).
   `--card-glow` trägt die Hosterfarbe je Karte (YT #ff0000/DM #0066dc/Kick/Twitch …).
   Der box-shadow-Ring liegt auf der Kachel-Box → skaliert mit dem Hover-`transform`
   MIT (Highlight nie größer als die vergrößerte Kachel, R4-6). reskin-desktop lädt nach
   reskin-startseite → schlägt dessen no-tile-glow-Reset (:2966) bei gleicher Spezifität.
   Desktop = modernes Chrome (box-shadow-Multilayer unbedenklich). ═════════════════ */
/* Ebene 1 — RING immer (auch bei Glow aus), solide Hosterfarbe. */
body.app-desktop .video-card:not(.ad-card).focused,
body.app-desktop .video-card[data-platform]:not(.ad-card).focused,
body.app-desktop .video-card:not(.ad-card):hover,
body.app-desktop .video-card[data-platform]:not(.ad-card):hover {
  /* ITEM-6 (User 2026-09-06, Web): Abo-Kachel-Hover war bei YouTube WEISS statt rot.
     Ursache: `--card-glow` wird nur via Inline-Style (zentraler core.js-Renderer) bzw.
     eine Streu-Regel [data-platform="twitch"] gesetzt — die Abo-Kacheln (subscriptions.js)
     tragen KEIN Inline-`--card-glow`, YouTube hat auch keine CSS-`--card-glow`-Regel →
     Fallback auf --pc-accent (#c7c9cf, weiss). Twitch erbt sein --card-glow aus der
     Streu-Regel und war deshalb zufällig korrekt lila. Fix: primär die VOLLSTÄNDIGE
     Marken-Farb-Map --platform-brand-color (Theme, für jede Plattform gesetzt: YT #ff0000,
     Twitch #9146ff, Kick #00E640, PeerTube #F1680D …), dann --card-glow, dann Accent.
     Home-Karten tragen beide (Map == Inline) → unverändert. (gemessen: YT weiss→rot,
     Twitch bleibt lila). */
  border-color: var(--platform-brand-color, var(--card-glow, var(--pc-accent))) !important;
  box-shadow: 0 0 0 3px var(--platform-brand-color, var(--card-glow, var(--pc-accent))),
              0 12px 34px rgba(0, 0, 0, 0.5) !important;
}
/* Ebene 2 — GLOW-Halo zusätzlich, NUR bei aktivem Kachelglow (:not(.no-tile-glow)). */
body.app-desktop:not(.no-tile-glow) .video-card:not(.ad-card).focused,
body.app-desktop:not(.no-tile-glow) .video-card[data-platform]:not(.ad-card).focused,
body.app-desktop:not(.no-tile-glow) .video-card:not(.ad-card):hover,
body.app-desktop:not(.no-tile-glow) .video-card[data-platform]:not(.ad-card):hover {
  /* ITEM-6: identisch zum Ring oben — vollständige Marken-Farb-Map zuerst. */
  box-shadow: 0 0 0 3px var(--platform-brand-color, var(--card-glow, var(--pc-accent))),
              0 0 24px 3px var(--platform-brand-color, var(--card-glow, var(--pc-accent))),
              0 0 60px 14px var(--platform-brand-color, var(--card-glow, var(--pc-accent))),
              0 12px 34px rgba(0, 0, 0, 0.5) !important;
}
/* Multi-Hoster-Kachel: neutraler weißer Ring, der ::before-Mehrfarbring bleibt sichtbar. */
body.app-desktop .video-card.card-multi:not(.ad-card).focused,
body.app-desktop .video-card.card-multi[data-platform]:not(.ad-card).focused,
body.app-desktop .video-card.card-multi:not(.ad-card):hover,
body.app-desktop .video-card.card-multi[data-platform]:not(.ad-card):hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px #fff, 0 12px 34px rgba(0, 0, 0, 0.5) !important;
}