/* AUTH-02 / UI-74 / UI-73 supplemental rules (imported via theme bundles) */

/* UI-HOST-1: Abstand zwischen den Grid-Kacheln, damit der Karten-Hintergrund/-Glow
   sichtbar wird (vorher gap:0 in beiden Themes → Kacheln klebten aneinander). Diese
   Datei lädt NACH dem Theme-Stylesheet (siehe index.html) → gleiche Selektor-
   Spezifität gewinnt hier per Ladereihenfolge, überschreibt also beide Themes. */
.video-grid { grid-gap: 20px; gap: 20px; }
body.app-phone .video-grid { gap: 12px; }
@media (max-width: 768px) {
  .video-grid { gap: 12px; }
}

/* UI-HOST-2 → ITEM 1 (muted): Der frühere rote Inset-Strich für deaktivierte Bubbles
   entfällt zugunsten des neutralen, gedimmten Designs. box-shadow explizit auf none,
   damit KEIN ererbtes Inset-/Schatten-Artefakt zurückbleibt (das eigentliche Dimmen
   passiert weiter unten ID-gescoped). Rein visuell — JS-locked-Logik unangetastet. */
.sc-bubble.sc-bubble-off {
  box-shadow: none !important;
}

/* AUTH-02: TV pairing protective mask */
/* Fix 2: es gibt KEINE globale .hidden-Regel → ohne diese Zeile blieb der Hinweis
   trotz `hidden`-Klasse sichtbar. Jetzt rigoros ausgeblendet, sobald AGB akzeptiert. */
.pairing-tv-notice.hidden { display: none !important; }
.pairing-tv-notice {
  margin: 10px auto 14px;   /* Task-4: Box horizontal zentriert, exakt über dem TV-Code */
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.35);
  color: var(--text-dim, #94a3b8);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  max-width: 520px;
}
/* UI-75: QR container blurred + inert until AGB accepted */
.pairing-layout.pairing-locked .settings-pair-qr {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
.pairing-qr-blur-mask {
  width: 100%;
  min-height: 280px;
  background:
    linear-gradient(135deg, rgba(80, 90, 110, 0.55), rgba(40, 48, 64, 0.75)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px);
  border-radius: 12px;
}
.pairing-layout.pairing-locked .settings-pair-token {
  letter-spacing: 6px;
  opacity: 0.72;
}

/* UI-74: Featured accounts double-card */
.featured-accounts-card {
  grid-column: span 2;
  cursor: pointer;
  min-height: 148px;
  background: linear-gradient(135deg, rgba(59, 111, 224, 0.22), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(148, 163, 184, 0.28);
}
body.app-phone .featured-accounts-card {
  grid-column: span 1;
}
@media (orientation: landscape) {
  body.app-phone .featured-accounts-card {
    grid-column: span 2;
  }
}
.featured-accounts-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  height: 100%;
  text-align: center;
}
.featured-accounts-icon {
  color: var(--sys-focus, #3b6fe0);
  opacity: 0.95;
}
.featured-accounts-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text, #e8edf5);
}
.featured-accounts-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim, #94a3b8);
  max-width: 34ch;
}

/* UI-73: Permanent mobile icon rail — never off-screen */
body.app-phone #mobile-menu-btn,
body.app-phone #header-burger,
body.app-phone .header-burger,
body.app-phone .header-arrow-btn {
  display: none !important;
}
/* UI-73: Mobile-Navigation als GPU-beschleunigte Off-Canvas-Schublade.
   KEINE width/flex-Animation mehr (die verursachte den Layout-Reflow-Ruckler auf
   schwachen Smartphones) — feste Drawer-Breite, Slide AUSSCHLIESSLICH via transform. */
body.app-phone #sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(264px, 84vw) !important;
  max-width: none !important;
  flex: none !important;
  min-height: 0;
  transform: translateX(-100%) !important;      /* geschlossen: komplett aus dem Viewport */
  transition: transform 0.22s ease !important;   /* NUR transform → GPU-Composite, kein Reflow */
  box-shadow: none;
  z-index: 1100;
}
body.app-phone.sidebar-mobile-open #sidebar {
  transform: translateX(0) !important;           /* offen: eingeblendet */
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45);
}
body.app-phone #content {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
body.app-phone #header {
  padding-left: 12px;
}
/* Off-Canvas-Drawer braucht den Scrim als Backdrop + Tap-to-Close
   (JS: scrim-click → closeNavMenu). Geschlossen: aus. Offen: sichtbar. */
body.app-phone:not(.sidebar-mobile-open) #sidebar-scrim {
  display: none !important;
}
body.app-phone.sidebar-mobile-open #sidebar-scrim {
  display: block !important;
}
body.app-phone #sidebar-toggle {
  position: fixed !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  transform: translateY(-50%) !important;
  z-index: 1200 !important;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  pointer-events: auto !important;
  touch-action: manipulation;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle {
  left: min(264px, 84vw) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1200 !important;
}
/* UI-73: Der unsichtbare, vergrößerte Trigger-Rand NUR bei geschlossener Schublade —
   sonst überlagert er im offenen Zustand Klicks auf Drawer-Inhalt/Content. */
body.app-phone:not(.sidebar-mobile-open) #sidebar-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
body.app-phone .sidebar-toggle:hover,
body.app-phone .sidebar-toggle:focus-visible {
  transform: translateY(-50%) scale(1.06) !important;
}
body.app-phone.sidebar-mobile-open .sidebar-toggle:hover,
body.app-phone.sidebar-mobile-open .sidebar-toggle:focus-visible {
  transform: translate(-50%, -50%) scale(1.06) !important;
}

/* Feed grids (Home / Trends / Abos): Abstand für sichtbaren Kachel-Glow.
   Desktop 20px, Mobile 12px — getrennt, damit die Mobile-Spezifität (schlägt das
   theme-seitige body.app-phone .video-grid{gap:0}) sauber greift. */
body.nav-home .video-grid,
body.nav-trending .video-grid,
body.nav-subscriptions .video-grid,
body.nav-categories .video-grid,
body.nav-search .video-grid {
  gap: 20px;
  grid-gap: 20px;
}
body.app-phone.nav-home .video-grid,
body.app-phone.nav-trending .video-grid,
body.app-phone.nav-subscriptions .video-grid,
body.app-phone.nav-categories .video-grid,
body.app-phone.nav-search .video-grid {
  gap: 12px;
  grid-gap: 12px;
}

/* Plattform-Markenfarben für Hoster-Bubbles (deaktivierter Streifen) */
[data-sc-platform="youtube"]     { --platform-brand-color: #ff0000; }
[data-sc-platform="twitch"]      { --platform-brand-color: #9146ff; }
[data-sc-platform="dailymotion"] { --platform-brand-color: #0066dc; }
[data-sc-platform="kick"]        { --platform-brand-color: #00e640; }
[data-sc-platform="tiktok"]      { --platform-brand-color: #25f4ee; }
[data-sc-platform="instagram"]   { --platform-brand-color: #e1306c; }

/* ══ CAPSULE-DESIGN: Hoster-Auswahl-Bubbles (NUR die 4 Hoster-Leisten) ═══════════
   Getrennt: #session-platform-bar (Header-Feed) erhält Glass-Effekt.
   Shorts/Clips/Subs bleiben neutral. */

/* Shared base: alle 4 Leisten */
#session-platform-bar .sc-bubble, #session-platform-bar .hoster-toggle,
#shorts-bubbles .sc-bubble, #clips-bubbles .sc-bubble, #subs-bubbles .sc-bubble {
  border-radius: 50px !important;
  border: 1px solid var(--card-border, rgba(255,255,255,0.16)) !important;
  background: var(--card-2, rgba(255,255,255,0.05)) !important;
  color: var(--text-dim, #9aa0aa);
  margin: 0 7px 7px 0 !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Aktiv: Shorts/Clips/Subs — Markenfarbe, theme-neutral */
#shorts-bubbles .sc-bubble.active, #clips-bubbles .sc-bubble.active, #subs-bubbles .sc-bubble.active {
  background: var(--card, rgba(255,255,255,0.09)) !important;
  border-color: var(--sys-focus) !important;
  color: var(--platform-brand-color, var(--sys-focus)) !important;
}

/* ── GLASS-EFFEKT: nur Header-Hoster-Bar (#session-platform-bar) ─────────────
   Inaktiv → subdued / matte; Aktiv → leichter Frosted-Glass-Effekt. */
#session-platform-bar .sc-bubble,
#session-platform-bar .hoster-toggle {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#session-platform-bar .sc-bubble.on,
#session-platform-bar .hoster-toggle.on {
  background: rgba(255,255,255,0.17) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(0,0,0,0.18) !important;
}

/* INAKTIV/deaktiviert (verfügbar, ausgeblendet) UND Abos-unverlinkt (locked):
   NEUTRALES, gedimmtes Design. box-shadow explizit auf none. */
#session-platform-bar .sc-bubble-off, #shorts-bubbles .sc-bubble-off,
#clips-bubbles .sc-bubble-off, #subs-bubbles .sc-bubble-off,
#subs-bubbles .sc-bubble-locked {
  color: var(--text-dim, #9aa0aa) !important;
  opacity: 0.5 !important;
  filter: grayscale(0.4);
  box-shadow: none !important;
}

/* UI-80: TOTAL transparente Filter-/Hoster-Leisten. Task-4 (--bg-filter-bar,
   Lila-/Slate-Tönung) wurde bewusst VERWORFEN, damit die Grid-Glows des Layouts
   perfekt ununterbrochen durchscheinen. */
body.platform-pc:not(.app-tv) #filter-tabs,
body.platform-pc:not(.app-tv) #session-platform-bar,
#filter-tabs, #search-filter-tabs, #session-platform-bar,
#shorts-bubbles, #clips-bubbles, #subs-bubbles, #search-platform-pills {
  background: transparent !important;
  border-radius: 0;
  padding-left: 8px;
  padding-right: 8px;
}
/* UI-80 (Runde 2): #header selbst trägt noch --bg-header (Vollfarbe, z.B. #0e0420
   im Cyberpunk-Theme) und blockt damit das FIXE Grid-/Glow-Hintergrundbild von
   body dahinter — komplett unabhängig davon, dass die Kind-Leisten (#filter-tabs,
   #session-platform-bar etc.) bereits transparent sind: eine transparente Leiste
   VOR einem opaken Header-Hintergrund zeigt immer noch nur den Header-Hintergrund,
   nie das Grid darunter. Fix: Header-Hintergrund selbst durchsichtig → body's
   fixes Punktraster/Glow scheint jetzt bis unter Suchleiste/Hoster-Leiste durch.
   #search-platform-pills hatte zusätzlich ein eigenes --card-2-Panel (Desktop-
   Suchseite, body.app-desktop #search-platform-pills in beiden Theme-Dateien) —
   das war von der bisherigen Transparenz-Liste (oben) nicht erfasst. */
#header { background: transparent !important; }
/* UI-76: dezenter Leer-Hinweis, wenn die Abos-Leiste keine Bubbles hätte. */
.sc-empty-hint {
  display: inline-block;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text-dim, #9aa0aa);
  opacity: 0.85;
}

/* ── TASK 2: #search-input im Header-#search-bar — standalone-Page-Stile neutralisieren.
   Das Input erbt Container-Farbe/-Größe; #search-bar stellt Pill + Fokus-Glow bereit. */
#search-bar #search-input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  max-width: none !important;
  outline: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  caret-color: var(--sys-focus, #3b6fe0);
}
#search-bar #search-input:focus,
#search-bar #search-input.focused {
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}
/* Focus-Glow auf den Container verlagern */
#search-bar:focus-within {
  border-color: var(--sys-focus) !important;
  box-shadow: var(--sys-glow) !important;
}

/* ── ITEM 2: CONTENT-TOGGLES (Alle/Live/Videos) als Capsule-Pillen ───────────────
   STRIKT ID-gescoped auf #filter-tabs & #search-filter-tabs → Kategorien (#cat-*-tabs)
   und Settings (.settings-tab) bleiben unberührt (kein Bleeding). !important überstimmt
   den PC-Folder-Tab-Block (body.platform-pc:not(.app-tv) …) sauber. */
#filter-tabs .filter-tab, #search-filter-tabs .filter-tab {
  border-radius: 50px !important;
  border: 1px solid var(--card-border, rgba(255,255,255,0.16)) !important;
  border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.16)) !important;
  background: rgba(255,255,255,0.05) !important;
  /* Fix 3: identische Frosted-Glass-Optik wie die Hoster-Pillen (#session-platform-bar .hoster-toggle). */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  margin: 0 7px 7px 0 !important;
}
#filter-tabs .filter-tab.active, #search-filter-tabs .filter-tab.active {
  /* Fix 3: hellere, transparente aktive Fläche + stärkerer Blur/Saturate (wie .hoster-toggle.on). */
  background: rgba(255,255,255,0.17) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: var(--text, #fff) !important;
}

/* ── ITEM 3 (UI-81 Runde 2): Streamer-Name mittig zwischen Titel und Meta-Zeile ──
   Vorherige Lösung (EIN margin-top:auto nur auf .card-meta-row) hielt Titel+Creator
   als Gruppe oben. UI-81 verlangt jetzt explizit .card-creator selbst vertikal
   zwischen Titel (fix oben) und Views/Live-Zeile (fix unten) zu zentrieren: beide
   Auto-Margins wandern auf .card-creator (margin:auto 0 → teilt den Freiraum ÜBER
   und UNTER dem Creator-Namen gleichmäßig auf); .card-meta-row braucht ihr eigenes
   margin-top:auto nicht mehr (sonst 3 statt 2 Auto-Margins → Creator würde nicht
   mehr exakt mittig sitzen, sondern nach oben verschoben). */
.video-card .card-body .card-meta-row { margin-top: 0; }
.video-card .card-body .card-creator { margin: auto 0 !important; }

/* ── ITEM 5: Live-Kategorie-Anzeige ─────────────────────────────────────────────
   NUR der Live-Hook bekommt zusätzliche Mindesthöhe (min-height, NICHT fix, NICHT global
   auf .card-meta-row) → normale VOD-Karten bleiben völlig unberührt, nichts wird
   abgeschnitten. .card-live-game ist die injizierte Kategorie (card.game). */
.card-meta-row.card-meta-live { min-height: 30px; flex-wrap: wrap; }
.card-live-game {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  font-family: monospace;
  color: var(--text-faint, #9a78d6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}
/* UI-81: Kategorie-Badge (card.game) bei LIVE-Kacheln raus aus der Meta-Zeile,
   rein als kompaktes Overlay-Badge unten rechts auf dem Thumbnail (analog zur
   Zeitanzeige .card-duration bei VODs) — hält die Textzeile darunter schlank.
   Markup-Gegenstück: js/core.js App.buildCardHtml rendert .card-live-game jetzt
   als Kind von .card-thumbnail statt in .card-meta-row (siehe dort). */
.card-thumbnail .card-live-game {
  position: absolute;
  /* UI-102: top/left/transform muessen explizit zurueckgesetzt werden — sonst
     gewinnt die generische ".card-thumbnail > span" Zentrierregel (top:50%/
     left:50%/translate(-50%,-50%)) den CSS-Overconstraint gegen bottom/right,
     und das Badge landet mittig statt am unteren Rand. */
  top: auto;
  left: auto;
  transform: none;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  opacity: 1;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI-79: KAPSEL-INVERSION — EINE einheitliche Optik für ALLE Tabs/Pillen
   (Startseite, Trends, Kategorien, Abos, Settings, Suche). Aktiv = solides Weiß
   + hartes Schwarz (#000000) für maximalen Kontrast, plattform-/theme-unabhängig.
   Inaktiv = neutrales, leicht transparentes Dunkelgrau OHNE farbige Ränder/Akzente.
   Ersetzt die bisherigen, pro Bereich unterschiedlichen Glass-/Marken-/Fokusfarben-
   Looks weiter oben in dieser Datei — die stehen als "vorherige Iteration" absichtlich
   noch da (Kaskade/History nachvollziehbar), diese Sektion gewinnt, weil sie SPÄTER
   in derselben Datei steht (gleiche Spezifität → Ladereihenfolge entscheidet) bzw.
   durch die "body.platform-pc:not(.app-tv) …"-Duplikate mindestens GLEICH hohe
   Spezifität wie das Desktop-PC-„Aktenordner-Tabs"-Layout in theme-*.css erreicht
   (das dort OHNE diese Duplikate wegen höherer Klassenzahl weiter gewinnen würde).
   Kategorien (#cat-*-tabs) waren in "ITEM 2" oben ausgenommen; bleiben es.
   `.settings-tab` war mit UI-79 erstmals einbezogen — UI-86 v2 Claufix 2026-07-05
   löst `.settings-tab` wieder heraus: Settings-Tabs folgen dem eigenständigen
   Pillen-Design (--sys-focus-Fill, Theme-konform), nicht der Weiß/Schwarz-Inversion.
   ═══════════════════════════════════════════════════════════════════════════ */
#filter-tabs .filter-tab, #search-filter-tabs .filter-tab,
#cat-landing-tabs .filter-tab, #cat-detail-tabs .filter-tab,
.filter-pill, .hoster-toggle,
#session-platform-bar .sc-bubble, #shorts-bubbles .sc-bubble,
#clips-bubbles .sc-bubble, #subs-bubbles .sc-bubble,
body.platform-pc:not(.app-tv) #filter-tabs .filter-tab,
body.platform-pc:not(.app-tv) #search-filter-tabs .filter-tab,
body.platform-pc:not(.app-tv) #cat-landing-tabs .filter-tab,
body.platform-pc:not(.app-tv) #cat-detail-tabs .filter-tab,
body.platform-pc:not(.app-tv) .filter-pill,
body.platform-pc:not(.app-tv) .hoster-toggle,
body.platform-pc:not(.app-tv) .sc-bubble {
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  border-top: none !important;
  color: var(--text-dim, #9aa0aa) !important;
  box-shadow: none !important;
  margin: 0 7px 7px 0 !important;
}
/* Gesperrt/ausgeblendet (UI-76/UI-HOST-2) bleibt eigenständig gedimmt — NICHT von
   der Inversion erfasst (opacity/filter kommen unverändert aus der Regel oben im
   Abschnitt "INAKTIV/deaktiviert …"), sonst verschwindet der Gesperrt-Zustand optisch. */
#filter-tabs .filter-tab.active, #search-filter-tabs .filter-tab.active,
#cat-landing-tabs .filter-tab.active, #cat-detail-tabs .filter-tab.active,
.filter-pill.active, .hoster-toggle.on,
#session-platform-bar .sc-bubble.active, #session-platform-bar .sc-bubble.on,
#shorts-bubbles .sc-bubble.active, #clips-bubbles .sc-bubble.active,
#subs-bubbles .sc-bubble.active,
body.platform-pc:not(.app-tv) #filter-tabs .filter-tab.active,
body.platform-pc:not(.app-tv) #search-filter-tabs .filter-tab.active,
body.platform-pc:not(.app-tv) #cat-landing-tabs .filter-tab.active,
body.platform-pc:not(.app-tv) #cat-detail-tabs .filter-tab.active,
body.platform-pc:not(.app-tv) .filter-pill.active,
body.platform-pc:not(.app-tv) .hoster-toggle.on,
body.platform-pc:not(.app-tv) .sc-bubble.active {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  margin: 0 7px 7px 0 !important;   /* überschreibt das PC-Folder-Tab margin-bottom:-1px (Überlapp-Trick) */
}
#filter-tabs .filter-tab.active svg, #search-filter-tabs .filter-tab.active svg,
#cat-landing-tabs .filter-tab.active svg, #cat-detail-tabs .filter-tab.active svg,
.filter-pill.active svg, .sc-bubble.active svg, .hoster-toggle.on svg {
  stroke: #000000 !important;
}
/* Beide Theme-Dateien haben je einen ID-gescopten, !important-Farb-Override für
   das Desktop-Suchseiten-Panel (theme-classic.css:4477 / theme-cyberpunk.css:4754,
   color:#12131a statt #000000) — gleiche Spezifität (1 ID) wie ein einfaches
   .filter-pill.active, schlägt es also trotz !important auf beiden Seiten anhand
   der ID. Hier 1:1 gleich hoch gescopt dupliziert, damit die Ladereihenfolge
   (diese Datei lädt zuletzt) den Ausschlag gibt → wirklich reines #000000. */
body.app-desktop #search-platform-pills .filter-pill.active,
body.app-desktop #search-filter-tabs .filter-tab.active {
  color: #000000 !important;
}
body.app-desktop #search-platform-pills .filter-pill.active svg,
body.app-desktop #search-filter-tabs .filter-tab.active svg {
  stroke: #000000 !important;
}
/* Hover/Focus: neutral bleiben (kein farbiger Akzent, kein roter Rahmen). */
#filter-tabs .filter-tab:not(.active):hover, #search-filter-tabs .filter-tab:not(.active):hover,
.filter-pill:not(.active):hover, .sc-bubble:not(.active):hover,
.hoster-toggle:not(.on):hover,
body.platform-pc:not(.app-tv) .filter-tab:not(.active):hover,
body.platform-pc:not(.app-tv) .filter-pill:not(.active):hover,
body.platform-pc:not(.app-tv) .sc-bubble:not(.active):hover,
body.platform-pc:not(.app-tv) .hoster-toggle:not(.on):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text, #fff) !important;
  border-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   UI-82 Ergänzung: Player-Piktogramm-Leiste (#pd-pictobar) als EINE saubere
   Flexbox-Reihe unter dem Video, komplett rahmen-/hintergrundlos ("clean
   icons"). player-desktop.js renderPictoBar() emittiert jetzt nur noch EIN
   .pd-picto-row-Div (Bildschirm-Modi + Snapshot/Marker/Loop/Live-Zeitsprung
   zusammen) statt der alten zwei getrennten Zeilen — die Layout-Regel hier
   erzwingt zusätzlich sicherheitshalber den Single-Row-Flex, falls Altmarkup
   (Cache) noch die zwei Divs liefert.
   ───────────────────────────────────────────────────────────────────────── */
#pd-pictobar, #pd-pictobar .pd-picto-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}
/* UI-107: Die Regel oben (ID + !important, UI-82-Altlast) trifft per
   ".pd-picto-row" auch die neuere eingeklappte ".pd-picto-row-secondary"
   (UI-94) und überstimmt damit bedingungslos deren ".hidden"-Klasse — das
   "Erweiterte Optionen"-Panel liess sich per Klick/D-Pad nie zuverlaessig
   schliessen. Gezielte Gegenregel mit hoeherer Spezifitaet (ID + 2 Klassen). */
#pd-pictobar .pd-picto-row.hidden { display: none !important; }
.pd-picto {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.pd-picto:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Aktiv-Zustand ohne Hintergrund/Rahmen: Icon/Text färbt sich stattdessen ein
   (SVGs nutzen stroke="currentColor" → color reicht, kein extra svg-Override). */
.pd-picto.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--sys-focus, #6ee7ff) !important;
}
.pd-picto.is-disabled {
  background: transparent !important;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   FEAT-7: Automatischer Drag-and-Drop Mini-Player (Scroll-getriebenes In-App-
   PiP, #pd-video-stage.pd-pip-float aus player-desktop.js togglePip()/Auto-
   Scroll-Trigger). Drei Korrekturen gegenüber dem alten manuellen PiP-Grundmaß:
   1) ~30% größer.
   2) Verankerung LINKS statt rechts unten — die Empfehlungs-/Chat-Sidebar
      (#pd-side) sitzt im Desktop-Grid rechts (65/35-Split); eine rechts
      verankerte Box würde sie architektonisch verdecken. Links unten ist sie
      garantiert frei, unabhängig von Viewport-Breite oder Sidebar-Inhalt.
   3) Farbiger Theme-Rahmen (--sys-focus, je Theme/Farbschema unterschiedlich)
      mit spürbar dickerer Oberkante.
   ───────────────────────────────────────────────────────────────────────── */
#pd-video-stage.pd-pip-float {
  /* left/right bewusst OHNE !important — der Drag-Handler in player-desktop.js
     setzt beide Werte inline (stage.style.left/right) während des Ziehens; ein
     !important hier würde diese Schreibzugriffe stumm überstimmen und die Box
     einfrieren. Ohne !important gewinnt diese Regel trotzdem die Ruheposition
     gegenüber der Basisregel in theme-classic/-cyberpunk.css (gleiche
     Spezifität, diese Datei lädt zuletzt) — Drag bleibt aber voll wirksam. */
  left: 18px;
  right: auto;
  width: 468px !important;
  height: 302px !important;
  min-width: 286px !important;
  min-height: 195px !important;
  border: 2px solid var(--sys-focus, #2563eb) !important;
  border-top-width: 6px !important;
}
#pd-pip {
  height: 36px !important;
}
#pd-pip button {
  width: 26px !important;
  height: 26px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Prio 2: Dynamischer Primary-Hoster-Glow (Dashboard-Kacheln) + Drag-Feedback
   für die kontextsensitive Hoster-Pillen-Sortierung.

   Der bestehende T5-Effekt (siehe theme-classic/-cyberpunk.css, Selektor
   „.video-card:not(.ad-card).focused / :hover") setzt den Marken-Glow bereits
   um — ABER nur bei Fokus/Hover. Diese Regel ergänzt einen DEZENTEN, IMMER
   sichtbaren Ruhezustand-Glow in derselben Marken-Farbe (--card-glow wird pro
   Kachel bereits inline von App.brandGlow()/App.buildCardHtml() in core.js
   gesetzt — kein neues JS nötig). Bewusst schwächer/kleiner (12px, kein
   zweiter/dritter Ring) als der Hover-/Fokus-Glow, damit das Grid nicht
   überstrahlt UND der Fokuszustand weiterhin klar heraussticht (höhere
   Selektor-Spezifität durch die zusätzliche .focused/:hover-Klasse gewinnt
   dort unverändert). Kein --card-glow gesetzt (Plattform ohne Markenfarbe)
   → transparent, also kein Glow. */
.video-card:not(.ad-card) {
  box-shadow: 0 0 12px 0 var(--card-glow, transparent);
}

/* Prio 2: visuelles Feedback während des Long-Press-Reorders (Touch) einer
   Hoster-Pille — der Maus-Drag hat dank natives HTML5-DnD bereits einen
   System-Cursor/Ghost, Touch braucht ein eigenes Signal. */
.sc-bubble-dragging {
  opacity: 0.55;
  outline: 2px dashed var(--sys-focus, #6ee7ff);
  outline-offset: 2px;
}
#pd-pip button {
  width: 26px !important;
  height: 26px !important;
}