/* ══════════════════════════════════════════════════════════════════════════
   reskin-mobile.css — §RESKIN-MOBILE r1 (Cloder 2026-07-24)
   Bringt die nocturne-LAYOUT-Ebene auf das Handy. Hintergrund: reskin-startseite
   .css/.js bauen das neue Design NUR für body.app-desktop (JS via isDesktop()-
   Gate, CSS app-desktop-gescoped) — Mobile erbt bisher NUR die Farb-Token-Umbiegung,
   nicht das Layout. Diese Datei ist die app-phone-Entsprechung: eigenes, ZULETZT
   geladenes Add-on, gescoped body.app-phone, nutzt die GLOBALE --pc-*-Ebene.
   Ziele: (1) Startseite (Topbar/Suche/Segment/Hoster-Pillen/Kacheln) im neuen
   Design; (2) Seitenleiste = dauerhaft sichtbare Piktogramm-Schiene (eingeklappt
   nur Icons, ausgeklappt Icon+Text nebeneinander). Kein Deploy (BUG-13).
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1) SEITENLEISTE = dauerhafte Piktogramm-Schiene (statt versteckter Drawer) ═══ */
/* Basis-App: #sidebar ist translateX(-100%) (weggeschoben). Hier: immer sichtbar,
   64px schmale Schiene (nur Icons); Toggle klappt sie als Overlay auf 214px auf
   (Icon+Text). #content/#header rücken um die Schienenbreite nach rechts. */
body.app-phone #sidebar {
  transform: none !important;
  width: 64px !important;
  max-width: 64px !important;
  background: var(--pc-surface) !important;
  border-right: 1px solid var(--pc-border) !important;
  box-shadow: none !important;
  z-index: 260 !important;
  overflow: visible !important;
  padding: 56px 8px 10px !important;   /* padding-top hält die Icons unter dem Toggle frei */
}
/* Nav-Eintrag = Icon + Text NEBENEINANDER (Reihe), eingeklappt zentriert nur Icon. */
body.app-phone #sidebar .nav-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  color: var(--pc-muted) !important;
}
body.app-phone #sidebar .nav-item .nav-icon { margin-right: 0 !important; }
body.app-phone #sidebar .nav-label { display: none !important; }        /* eingeklappt: kein Text */
/* Logo im eingeklappten Zustand ausblenden (verhinderte Überlappung/Verschiebung mit
   dem Toggle); erscheint erst ausgeklappt. */
body.app-phone #sidebar-logo { display: none !important; }

/* AUSGEKLAPPT (Toggle): Schiene wird zum 214px-Overlay mit Text. */
body.app-phone.sidebar-mobile-open #sidebar {
  width: 214px !important;
  max-width: 84vw !important;
  z-index: 300 !important;
  box-shadow: 6px 0 30px rgba(0,0,0,.55) !important;
  padding: 56px 12px 10px !important;
}
/* Toggle bleibt oben-links (Basis schiebt ihn im offenen Zustand sonst auf die
   alte 264px-Drawer-Kante — höhere Spezifität, daher hier explizit zurückgeholt). */
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 12px !important; top: 10px !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item {
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 14px !important;
}
body.app-phone.sidebar-mobile-open #sidebar .nav-item .nav-icon { margin-right: 0 !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-label {
  display: inline !important; font-size: 15px !important; font-weight: 600 !important;
}
body.app-phone.sidebar-mobile-open #sidebar-logo {
  display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 12px !important;
}
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-word,
body.app-phone.sidebar-mobile-open #sidebar-logo .brand-word { display: inline !important; }

/* Aktiv-Zustand: Akzent-Streifen + getönte Fläche (wie Mockup / reskin-fidelity). */
body.app-phone #sidebar .nav-item.active {
  background: var(--pc-active) !important;
  color: var(--pc-text) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent) !important;
}
body.app-phone #sidebar .nav-item.active .nav-icon { color: var(--pc-text) !important; }

/* Inhalt + Kopf um die Schiene versetzen (Player-Overlay ist fixed inset:0 → unberührt). */
body.app-phone #content { margin-left: 64px !important; width: calc(100vw - 64px) !important; }
body.app-phone #header  { margin-left: 64px !important; padding-left: 14px !important; }
/* Scrim nur wenn ausgeklappt (Basis blendet ihn schon per sidebar-mobile-open ein). */
body.app-phone #sidebar-scrim { z-index: 280 !important; }
/* Bei aktivem Player die Schiene wegnehmen (Voll-Viewport-Video). */
body.app-phone.player-active #sidebar { display: none !important; }
body.app-phone.player-active #content { margin-left: 0 !important; width: 100vw !important; }

/* Toggle-Button: kompakter Icon-Button oben-links in der Schiene. Das breite
   „Einklappen"-Textlabel wird ausgeblendet (nur das Chevron-Icon bleibt) — es war
   die Ursache der Fehlpositionierung/Überlappung mit dem Logo. */
body.app-phone #sidebar-toggle {
  position: fixed !important; top: 12px !important; left: 12px !important;
  width: 40px !important; height: 40px !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  z-index: 310 !important;
  background: var(--pc-surface2) !important; color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
}
body.app-phone #sidebar-toggle .sidebar-toggle-label { display: none !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic { margin: 0 !important; }

/* ═══ 2) TOPBAR (Kopfzeile) ═══════════════════════════════════════════════════ */
body.app-phone #header {
  background: var(--pc-surface) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}
body.app-phone #search-bar {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 11px !important;
  color: var(--pc-muted) !important;
  box-shadow: none !important; animation: none !important;   /* Basis-Glow/Puls entfernen */
}
body.app-phone #header-actions { display: flex !important; align-items: center !important; gap: 12px !important; }

/* ═══ 3) SEGMENT „Alle | Live | Videos" ══════════════════════════════════════ */
body.app-phone #filter-tabs { display: flex !important; gap: 8px !important; flex-wrap: nowrap !important; }
body.app-phone #filter-tabs .filter-tab {
  border-radius: 999px !important;
  border: 1px solid var(--pc-border) !important;
  background: transparent !important;
  color: var(--pc-muted) !important;
  font-size: 14px !important; padding: 7px 16px !important;
}
body.app-phone #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; border-color: var(--pc-accent) !important;
}

/* ═══ 4) HOSTER-PILLEN ════════════════════════════════════════════════════════ */
body.app-phone #session-platform-bar { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
body.app-phone #session-platform-bar .sc-bubble {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 999px !important;
  padding: 6px 14px 6px 6px !important;
  font-size: 14px !important;
}
body.app-phone #session-platform-bar .sc-bubble.active {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent) !important;
}

/* ═══ 5) SEKTIONS-TITEL + CONNECT-BANNER ═════════════════════════════════════ */
body.app-phone #section-home .section-title {
  color: var(--pc-text) !important; font-size: 19px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;   /* kein Monospace/Versalien (Mockup: normale Schreibweise) */
}
body.app-phone #connect-banner {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 12px !important;
}

/* ═══ 6) KACHELN (Hosterfarben-Rahmen kommt aus der Basis; hier Meta-Feinschliff) ═══ */
body.app-phone #grid-home .card-title { color: var(--pc-text) !important; font-size: 14px !important; }
body.app-phone .video-card .card-creator,
body.app-phone .video-card .card-creator-name { color: var(--pc-muted) !important; font-size: 12.5px !important; }
body.app-phone .video-card .card-views,
body.app-phone .video-card .card-uploaded { color: var(--pc-muted) !important; font-size: 12px !important; }
body.app-phone .video-card .card-viewers-live { font-size: 12px !important; }   /* Live-Zahl bleibt Live-Farbe */

/* ═══ 7) EINSTELLUNGEN — Handy-Akkordeon (statt Drill-in / Seiten-Tabs) ═══════
   Tabbar bleibt als vertikale Header-Liste sichtbar; die getippte Sektion klappt
   INLINE darunter auf (reskin-settings-mobile.js schiebt #settings-content direkt
   hinter den aktiven Header). Überschreibt die Drill-in-Sichtbarkeit der Basis
   (theme-*.css: :not(.settings-phone-detail) #settings-content{display:none}). */
body.app-phone #section-settings.rsk-set-acc #settings-content {
  display: block !important; width: 100% !important; margin: 2px 0 8px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar {
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}
body.app-phone #settings-back-btn { display: none !important; }   /* kein Drill-in-Zurück */
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab {
  width: 100% !important; box-sizing: border-box !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  text-align: left !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; border-radius: 12px !important;
  padding: 15px 16px !important; font-size: 15px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: var(--pc-active) !important;
  border-color: var(--pc-accent) !important;
  box-shadow: inset 3px 0 0 var(--pc-accent) !important;
}
/* Chevron rechts (auf/zu). */
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab::after {
  content: '▾' !important; margin-left: auto !important; color: var(--pc-muted) !important; font-size: 13px !important;
}
body.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after {
  content: '▴' !important; color: var(--pc-accent) !important;
}

/* ═══ 8) PROFIL-AVATAR oben rechts (Handy) — Basis-#header-actions hat nur die
       Glocke; das Desktop-Reskin baut den Avatar nur für Desktop. Hier fürs Handy
       (reskin-settings-mobile.js hängt #rsk-m-avatar in #header-actions ein). ═══ */
body.app-phone #rsk-m-avatar {
  width: 34px !important; height: 34px !important; flex: 0 0 auto !important;
  border-radius: 50% !important; border: none !important; cursor: pointer !important;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent2)) !important;
  color: #04121f !important; font-weight: 800 !important; font-size: 15px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background-size: cover !important; background-position: center !important;
}

/* ═══ 9) Eingeklappte Schiene: Footer (Viewport-Umschalter, Rechtstexte, Version)
       ausblenden — erscheinen erst ausgeklappt. (User: „Impressum etc. soll beim
       Einklappen verschwinden.") ═══ */
body.app-phone #sidebar-viewport,
body.app-phone #sidebar-legal,
body.app-phone #sidebar-build { display: none !important; }
body.app-phone.sidebar-mobile-open #sidebar-viewport { display: flex !important; }
body.app-phone.sidebar-mobile-open #sidebar-legal { display: block !important; }
body.app-phone.sidebar-mobile-open #sidebar-build { display: block !important; }

/* ═══ 10) FEINSCHLIFF / KOMPAKTERE MOBILE-GRÖSSEN (User: „wirkt alles riesig,
       wenig Fläche"). Überschreibt frühere Werte (gleiche Spezifität, später). ═══ */
/* Schmalere Schiene → mehr Inhaltsbreite. */
body.app-phone #sidebar { width: 54px !important; max-width: 54px !important; padding: 50px 6px 8px !important; }
body.app-phone #content { margin-left: 54px !important; width: calc(100vw - 54px) !important; }
body.app-phone #header  { margin-left: 54px !important; padding: 8px 10px !important; }
body.app-phone #sidebar .nav-item { height: 42px !important; margin-bottom: 4px !important; }
body.app-phone #sidebar .nav-icon { width: 22px !important; height: 22px !important; }
/* Toggle: schlicht als Chevron-Icon in der Schiene (kein floatender Kasten mehr →
   „hängt im Nirvana" behoben). Transparente Fläche, mittig in der 54px-Schiene. */
body.app-phone #sidebar-toggle {
  top: 8px !important; left: 9px !important; width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
  background: transparent !important; border: none !important; color: var(--pc-muted) !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { top: 8px !important; left: 9px !important; }

/* Suchleiste + Topbar kompakter. */
body.app-phone #search-bar { padding: 8px 12px !important; font-size: 13px !important; }
body.app-phone #header-actions { gap: 10px !important; }

/* Segment kleiner. */
body.app-phone #filter-tabs .filter-tab { font-size: 13px !important; padding: 6px 14px !important; }

/* Hoster-Pillen: dezente dunkle Pillen — KEIN pinker Voll-Glow mehr, auch nicht wenn
   „aktiv" (alle aktivierten Hoster sind aktiv → sonst alles pink). Aktiv = nur
   getönte Fläche + Akzent-Rand, Logo behält seine Hosterfarbe. */
body.app-phone #session-platform-bar { gap: 7px !important; }
body.app-phone #session-platform-bar .sc-bubble {
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important; font-size: 13px !important;
  padding: 6px 13px !important;
}
/* „aktiv" = da ALLE aktivierten Hoster aktiv sind, dezent halten (nicht alles pink):
   neutrale dunkle Pille, nur das Logo trägt die Hosterfarbe. */
body.app-phone #session-platform-bar .sc-bubble.active {
  background: var(--pc-surface2) !important; border-color: var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important;
}

/* Sektions-Titel + Banner kompakter. */
body.app-phone #section-home .section-title,
body.app-phone .section .section-title { font-size: 17px !important; margin: 6px 0 10px !important; }
body.app-phone #connect-banner { padding: 12px !important; margin-bottom: 12px !important; }
body.app-phone #connect-banner .connect-banner-title,
body.app-phone #connect-banner b { font-size: 14px !important; }

/* Kacheln etwas kompakter. */
body.app-phone .video-grid { gap: 9px !important; }
body.app-phone #grid-home .card-title { font-size: 13.5px !important; line-height: 1.25 !important; }

/* Einstellungen: Username-Feld hatte volle Zeilen-Höhe (flex-stretch) → feste Höhe. */
body.app-phone .profile-name-input {
  height: 40px !important; align-self: center !important; flex: 1 1 auto !important;
  font-size: 14px !important; padding: 8px 12px !important;
}
body.app-phone .profile-name-row, body.app-phone #profile-card { align-items: center !important; }

/* ═══ 11) CYBERPUNK-NEON (nur Handy): Highlight=Gelb, Text=Türkis, Seiten-Streifen=
       Pink — statt flachem Magenta. Nur body.theme-cyberpunk.app-phone → Desktop/andere
       Themes unberührt. (User #5: „gelb mit türkiser Schrift und Pink an der Seite".) ═══ */
body.theme-cyberpunk.app-phone { --neon-yellow: #f2ff3a; --neon-turq: #00e0ff; --neon-pink: #ff3d9a; }

/* Nav aktiv (Schiene): gelbe getönte Fläche + Pink-Streifen + Türkis-Text/Icon. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: rgba(242,255,58,0.14) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
  color: var(--neon-turq) !important;
}
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-icon { color: var(--neon-turq) !important; }

/* Segment „Alle" aktiv: gelbe Füllung, dunkler Text. */
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active {
  background: var(--neon-yellow) !important; color: #14121a !important; border-color: var(--neon-yellow) !important;
}

/* Einstellungs-Akkordeon: aktiver Header = gleiche Sidebar-Optik (Gelb/Pink/Türkis). */
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: rgba(242,255,58,0.14) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
  color: var(--neon-turq) !important; border-color: var(--neon-pink) !important;
}
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after { color: var(--neon-pink) !important; }

/* ═══ 12) FIXES Feedback-Runde 2 ══════════════════════════════════════════════ */

/* #5: #header liegt INNERHALB #content (hat schon margin-left) → eigener margin-left
   war doppelt und ließ oben-links eine Lücke. Zurücknehmen. */
body.app-phone #header { margin-left: 0 !important; padding-left: 12px !important; width: auto !important; }

/* #2/#1: Toggle = klar sichtbarer, erreichbarer Button. Eingeklappt in der Schiene
   (Chevron → rechts = aufklappen). Ausgeklappt an der RECHTEN Panel-Kante (Chevron →
   links = zuklappen), dreht sich. Etwas tiefer → besser erreichbar. */
body.app-phone #sidebar-toggle {
  top: 14px !important; left: 8px !important; width: 38px !important; height: 38px !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; border-radius: 10px !important;
}
/* eingeklappt: Chevron zeigt nach rechts (›, aufklappen); ausgeklappt nach links
   (‹, zuklappen). Werte aus Render bestätigt. */
body.app-phone #sidebar-toggle .sidebar-toggle-ic {
  display: inline-flex !important; transform: rotate(0deg) !important; transition: transform .2s ease !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 168px !important; top: 14px !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: rotate(180deg) !important; }

/* #4: Logo (ausgeklappt) darf nicht über die Schiene hinausragen. */
body.app-phone.sidebar-mobile-open #sidebar-logo { max-width: 188px !important; overflow: hidden !important; }
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-icon,
body.app-phone.sidebar-mobile-open #sidebar-logo > svg { width: 40px !important; height: auto !important; flex: 0 0 auto !important; }
body.app-phone.sidebar-mobile-open #sidebar-logo .pc-brand-word,
body.app-phone.sidebar-mobile-open #sidebar-logo .brand-word {
  font-size: 17px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important;
}

/* #3: Neon-Highlight kräftiger (nicht transparent-matschig): definierter gelber
   Rahmen + stärkere Fläche + Pink-Streifen + Türkis-Icon. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: rgba(242,255,58,0.20) !important;
  border: 1px solid rgba(242,255,58,0.55) !important;
  box-shadow: inset 3px 0 0 var(--neon-pink) !important;
}

/* #7: Settings-Zeilen mit Titel + Control (S/M/L, Ecke etc.) auf Mobile STAPELN,
   damit der Titel nicht auf 1 Zeichen Breite zusammenbricht. */
body.app-phone #section-settings .settings-player-row {
  flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
}
body.app-phone #section-settings .settings-info-title,
body.app-phone #section-settings .settings-info-desc {
  word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; min-width: 0 !important;
}
body.app-phone #section-settings .settings-info { flex-wrap: wrap !important; }
body.app-phone #section-settings.rsk-set-acc #settings-content,
body.app-phone #section-settings.rsk-set-acc #settings-content .settings-group { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

/* #8: „Tastaturleiste" (Desktop-Bottom-Bar-Toggle) auf Mobile ausblenden — es gibt
   auf dem Handy keine Bottom-Bar. */
body.app-phone #kbd-bar-row { display: none !important; }

/* ═══ 13) FIXES Runde 3 — Abgleich an die Desktop-Referenz ════════════════════ */

/* Rail: kein großer Kopf-Freiraum mehr (Toggle sitzt jetzt mittig am Rand, s.u.). */
body.app-phone #sidebar { padding-top: 14px !important; }
body.app-phone.sidebar-mobile-open #sidebar { padding-top: 14px !important; }

/* TOGGLE = runder Chevron MITTIG am Seitenleisten-Rand (Handoff-Muster) — nicht mehr
   oben in der Ecke „aus dem Bild". Eingeklappt am Rail-Rand, ausgeklappt am Panel-Rand. */
body.app-phone #sidebar-toggle {
  position: fixed !important; top: 50% !important; left: 40px !important;
  transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  border-radius: 50% !important; z-index: 320 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--pc-surface2) !important; color: var(--pc-text) !important;
  border: 1px solid var(--pc-accent) !important;
}
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 200px !important; top: 50% !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic svg { width: 18px !important; height: 18px !important; }

/* #3/#5: Sidebar-Aktiv = SOLIDES Neon-Gelb + dunkle Schrift/Icon (wie Desktop,
   kräftig statt transparent) + Pink-Streifen. */
body.theme-cyberpunk.app-phone #sidebar .nav-item.active {
  background: #f2ff3a !important; border: none !important;
  box-shadow: inset 4px 0 0 var(--neon-pink) !important; color: #14121a !important;
}
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-icon,
body.theme-cyberpunk.app-phone #sidebar .nav-item.active .nav-label { color: #14121a !important; }

/* #6: Segment „Alle" = Pink wie Desktop (nicht gelb). */
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #14121a !important; border-color: var(--pc-accent) !important;
}
/* Einstellungs-Akkordeon aktiver Header bleibt Neon (Türkis-Text + Pink) — s. §11. */

/* #6-Player: aktive Options-Buttons (S/M/L, Ecken) waren schwarze Schrift auf Lila
   = unlesbar. Aktiv = Neon-Gelb + dunkle Schrift/Icon (lesbar, konsistent). */
body.theme-cyberpunk.app-phone #section-settings .pip-seg-btn.active,
body.theme-cyberpunk.app-phone #section-settings .settings-player-row .platform-btn.active,
body.theme-cyberpunk.app-phone #section-settings .pip-seg .platform-btn.active {
  background: #f2ff3a !important; color: #14121a !important; border-color: #f2ff3a !important;
}
body.theme-cyberpunk.app-phone #section-settings .pip-seg-btn.active svg,
body.theme-cyberpunk.app-phone #section-settings .settings-player-row .platform-btn.active svg { stroke: #14121a !important; }

/* Chevron-Richtung korrigiert (Render-bestätigt): eingeklappt › (aufklappen),
   ausgeklappt ‹ (zuklappen). */
body.app-phone #sidebar-toggle .sidebar-toggle-ic { transform: rotate(180deg) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: rotate(0deg) !important; }

/* ═══ 14) EXAKTER MOCKUP-ABGLEICH (Komponenten-Referenz §13 Mobile) ═══════════ */

/* Schiene 48px (Mockup 44px); Icon exakt zentriert im aktiven Feld. */
body.app-phone #sidebar { width: 48px !important; max-width: 48px !important; padding: 12px 5px 10px !important; }
body.app-phone #content { margin-left: 48px !important; width: calc(100vw - 48px) !important; }
body.app-phone #sidebar .nav-item { width: 38px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; }
body.app-phone #sidebar .nav-item .nav-icon { margin: 0 auto !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }

/* Toggle: Chevron deterministisch per scaleX — eingeklappt › (aufklappen, gespiegelt),
   ausgeklappt ‹ (zuklappen). Eingeklappt komplett auf der Schiene. */
body.app-phone #sidebar-toggle { left: 9px !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle { left: 200px !important; }
body.app-phone #sidebar-toggle .sidebar-toggle-ic { transform: scaleX(-1) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic { transform: scaleX(1) !important; }

/* Kacheln wie Mockup: EINE Spalte, kräftiger hosterfarbener Rundrahmen um die GANZE
   Kachel, abgerundet. */
body.app-phone .video-grid,
body.app-phone #grid-home { grid-template-columns: 1fr !important; gap: 14px !important; }
body.app-phone .video-card {
  border: 2px solid var(--card-glow, var(--pc-border)) !important;
  border-radius: 16px !important; overflow: hidden !important;
}

/* ═══ 15) FIXES Runde 4 ═══════════════════════════════════════════════════════ */

/* #1: Ausgeklappt LINKSBÜNDIG. Die Icon-Zentrierung (margin:auto, für eingeklappt)
   schob Icon+Text nach rechts → ausgeklappt margin 0 + Gap rechts, flex-start. */
body.app-phone.sidebar-mobile-open #sidebar .nav-item { justify-content: flex-start !important; text-align: left !important; }
body.app-phone.sidebar-mobile-open #sidebar .nav-item .nav-icon { margin: 0 12px 0 0 !important; }

/* #4: Toggle-Pfeil — die THEME-CSS transformiert das SVG selbst (…​sidebar-toggle-ic
   svg, theme-*.css:6656/6660). Deshalb HIER das SVG überschreiben, invers zum Default:
   eingeklappt › (aufklappen), ausgeklappt ‹ (zuklappen). */
body.app-phone #sidebar-toggle .sidebar-toggle-ic svg { transform: rotate(180deg) !important; }
body.app-phone.sidebar-mobile-open #sidebar-toggle .sidebar-toggle-ic svg { transform: rotate(0deg) !important; }

/* #2: Hoster-Pillen wie Desktop-Vorlage = abgerundetes RECHTECK (nicht vollrund). */
body.app-phone #session-platform-bar .sc-bubble { border-radius: 12px !important; padding: 8px 14px !important; }

/* #3: Einstellungs-Akkordeon aktiver Header = SOLIDES Neon-Gelb + dunkle Schrift
   (identisch zur Seitenleiste), kein transparentes Gelb/Türkis mehr. */
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active {
  background: #f2ff3a !important; color: #14121a !important;
  border-color: #f2ff3a !important; box-shadow: inset 4px 0 0 var(--neon-pink) !important;
}
body.theme-cyberpunk.app-phone #section-settings.rsk-set-acc .settings-tabbar .settings-tab.active::after { color: #14121a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §16) HANDY-NAVIGATION = BOTTOM-BAR (ersetzt die Piktogramm-Seitenleiste)
   Mockup publicore-reskin-preview-mobile_1.html: feste Bottom-Nav mit 5 Tabs
   (Home/Trends/Shorts/Abos/Mehr); "Mehr" = Bottom-Sheet. Die Seitenleiste bleibt
   im DOM (Delegationsziel für reskin-mobile-bottomnav.js), wird aber komplett
   ausgeblendet. Damit sind §1/§9–§14 (Schienen-Layout) im Handy gegenstandslos —
   Aufräum-Folgeticket, hier bewusst nicht gelöscht (Risiko/Diff-Klarheit).
   ══════════════════════════════════════════════════════════════════════════ */

/* Seitenleiste + Toggle + Scrim im Handy komplett aus. */
body.app-phone #sidebar,
body.app-phone.sidebar-mobile-open #sidebar,
body.app-phone #sidebar-toggle,
body.app-phone #sidebar-scrim { display: none !important; }

/* Inhalt/Kopf volle Breite; unten Platz für die Bar (Safe-Area beachtet). */
body.app-phone #content {
  margin-left: 0 !important; width: 100vw !important;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
body.app-phone #header { margin-left: 0 !important; }
/* Bei aktivem Player übernimmt das Voll-Viewport-Video → kein Bottom-Padding nötig. */
body.app-phone.player-active #content { padding-bottom: 0 !important; }

/* Basis: unsichtbar (Desktop/TV bekommen die Bar nie zu sehen). */
#pc-bottom-nav { display: none; }
#pc-mehr-overlay { display: none; }

/* ── Bottom-Bar (nur Handy) ── */
body.app-phone #pc-bottom-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--pc-surface); border-top: 1px solid var(--pc-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.28);
}
body.app-phone.player-active #pc-bottom-nav { display: none !important; }
body.app-phone #pc-bottom-nav .pc-bn-item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 8px 2px 6px; background: none; border: none; cursor: pointer;
  color: var(--pc-muted); font-family: inherit; font-size: 10.5px; font-weight: 600;
  transition: color .12s ease;
}
body.app-phone #pc-bottom-nav .pc-bn-item svg { width: 23px; height: 23px; flex: none; }
body.app-phone #pc-bottom-nav .pc-bn-item span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1;
}
body.app-phone #pc-bottom-nav .pc-bn-item.active { color: var(--pc-accent); }
body.theme-cyberpunk.app-phone #pc-bottom-nav .pc-bn-item.active { color: var(--neon-turq, var(--pc-accent)); }

/* ── "Mehr"-Bottom-Sheet ── */
body.app-phone #pc-mehr-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.5); align-items: flex-end;
}
body.app-phone #pc-mehr-overlay.vis { display: flex; }
body.app-phone #pc-mehr-sheet {
  width: 100%; background: var(--pc-surface); border-radius: 18px 18px 0 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 44px rgba(0,0,0,.5);
  animation: pcMehrUp .18s ease;
}
@keyframes pcMehrUp { from { transform: translateY(28px); opacity: .3; } to { transform: none; opacity: 1; } }
body.app-phone .pc-mehr-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--pc-border); margin: 10px auto 4px; }
body.app-phone .pc-mehr-konto {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px;
  border-bottom: 1px solid var(--pc-border); cursor: pointer;
}
body.app-phone .pc-mehr-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #04121f;
  background: linear-gradient(135deg, var(--pc-accent), var(--pc-accent2, var(--pc-accent)));
  background-size: cover; background-position: center;
}
body.app-phone .pc-mehr-konto-info { flex: 1; min-width: 0; }
body.app-phone .pc-mehr-konto-name { font-size: 15px; font-weight: 700; color: var(--pc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-phone .pc-mehr-konto-sub { font-size: 12px; color: var(--pc-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-phone .pc-mehr-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; }
body.app-phone .pc-mehr-row:active { background: var(--pc-active); }
body.app-phone .pc-mehr-row svg { width: 20px; height: 20px; flex: none; color: var(--pc-muted); }
body.app-phone .pc-mehr-row-label { font-size: 14px; font-weight: 600; color: var(--pc-text); }
body.app-phone .pc-mehr-divider { height: 1px; background: var(--pc-border); margin: 4px 0; }
body.app-phone .pc-mehr-footer { text-align: center; font-size: 10.5px; color: var(--pc-muted); padding: 12px 18px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   §17) PROFIL-KARTE auf dem Handy VERTIKAL stapeln (Avatar oben, Felder darunter)
   statt gequetschter Zwei-Spalten-Row (Feedback: „unter Profil schlecht formatiert").
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #profile-card,
body.app-phone #section-settings .settings-info.profile-card {
  flex-direction: column !important; align-items: stretch !important; gap: 14px !important;
}
body.app-phone #profile-card .profile-name-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
body.app-phone #profile-card .profile-name-input { width: 100% !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §18) TOPBAR nach Mockup mobile_1: Logo+Wortmarke links · Suche als Icon
   (Tap/Fokus klappt das Feld aus) · Glocke+Avatar rechts. Kein breites Suchfeld.
   (#pc-m-brand wird von reskin-mobile-bottomnav.js aus #sidebar-logo geklont.)
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #header .header-row-top { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
body.app-phone #header .header-row-bottom { display: none !important; }

body.app-phone #pc-m-brand {
  order: 1 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important;
  gap: 7px !important; cursor: pointer !important; max-width: 60% !important; overflow: hidden !important;
  padding: 0 !important; border: none !important; background: none !important; color: var(--pc-text) !important;
}
/* Emblem lesbar in JEDEM Theme: monochrom in Textfarbe (vorher teils dunkle Fills → auf
   dunklem Grund unsichtbar). */
body.app-phone #pc-m-brand .pc-brand-icon { width: 30px !important; height: 24px !important; flex: none !important; color: var(--pc-text) !important; }
body.app-phone #pc-m-brand .pc-brand-icon [fill]:not([fill="none"]) { fill: currentColor !important; }
body.app-phone #pc-m-brand .pc-brand-icon [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
body.app-phone #pc-m-brand .pc-brand-word,
body.app-phone #pc-m-brand .pc-brand-core {
  display: inline !important; font-size: 17px !important; font-weight: 800 !important;
  white-space: nowrap !important; letter-spacing: -.01em !important; color: var(--pc-text) !important;
}
body.app-phone #pc-m-brand .pc-brand-core { font-weight: 400 !important; opacity: .7 !important; }

/* Suche = volle Leiste in ZWEITER Zeile (User: „Top-Bar darf eine Such-Leiste quer
   drüber haben statt Einzel-Button"). Zeile 1 = Logo links + Glocke/Avatar rechts;
   Zeile 2 = Suchfeld über die volle Breite (Flex-Wrap via order + flex-basis 100%). */
body.app-phone #header-actions { order: 2 !important; flex: 0 0 auto !important; margin-left: auto !important; }
body.app-phone #search-bar {
  order: 3 !important; flex: 1 0 100% !important; width: 100% !important; margin: 8px 0 0 !important;
  box-shadow: none !important; animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   §19) STARTSEITE-ANORDNUNG nach Mockup: Hoster-Pillen ÜBER den Abschnittstitel
   „Jetzt live & Videos" (User: „die Hoster-Pillen darüber … sieht cleaner aus").
   ══════════════════════════════════════════════════════════════════════════ */
/* NUR wenn aktiv! Ohne .active überschrieb display:flex das Basis-.section:not(.active)
   {display:none} → Startseite klebte unter JEDER anderen Kategorie (Regression-Fix).
   flex-wrap + Basis-Breiten legen Pillen (volle Zeile) über Titel+Segment (eine Zeile)
   über das Grid — OHNE #filter-tabs zu reparenten (App verschiebt es selbst). */
body.app-phone #section-home.active { display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
body.app-phone #section-home.active > * { flex: 1 1 100% !important; min-width: 0 !important; }
body.app-phone #section-home.active > #session-platform-bar { order: -1 !important; margin: 2px 0 8px !important; }
body.app-phone #section-home.active > .section-title { flex: 1 1 auto !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* #filter-tabs = Segment-Bubble mit Innen-Highlight (an Ort und Stelle, neben dem
   Titel dank flex-wrap). Gruppen/Kalender auf dem Handy aus (Mockup zeigt nur 3). */
body.app-phone #section-home.active > #filter-tabs {
  flex: 0 0 auto !important; display: inline-flex !important; gap: 2px !important; padding: 3px !important; margin: 0 !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
}
body.app-phone #filter-tabs .filter-tab {
  border: none !important; background: transparent !important; border-radius: 7px !important;
  padding: 5px 11px !important; font-size: 12.5px !important; color: var(--pc-muted) !important; box-shadow: none !important;
}
body.app-phone #filter-tabs .filter-tab.active { background: var(--pc-accent) !important; color: #07080d !important; }
body.theme-cyberpunk.app-phone #filter-tabs .filter-tab.active { color: #14121a !important; }
body.app-phone #filter-tabs .filter-tab[data-filter="groups"],
body.app-phone #filter-tabs .filter-tab[data-filter="calendar"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §21) SUCHE-Seite im neuen Stil: Hoster-Pillen = abgerundetes Rechteck (nicht
   vollrund) + Alle/Live/Videos/Clips als Segment-Bubble (User-Feedback).
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone #section-search .filter-pill {
  border-radius: 12px !important; background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important; box-shadow: none !important; font-size: 13px !important; padding: 6px 13px !important;
}
body.app-phone #section-search .filter-pill.active { border-color: var(--pc-accent) !important; box-shadow: 0 0 0 1px var(--pc-accent) !important; }
/* Alle/Live/Videos/Clips auf der Suche (#search-filter-tabs) als Segment-Bubble. */
body.app-phone #search-filter-tabs {
  display: inline-flex !important; gap: 2px !important; padding: 3px !important; width: auto !important;
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; border-radius: 10px !important;
}
body.app-phone #search-filter-tabs .filter-tab {
  border: none !important; background: transparent !important; border-radius: 7px !important;
  padding: 5px 11px !important; font-size: 12.5px !important; color: var(--pc-muted) !important; box-shadow: none !important;
}
body.app-phone #search-filter-tabs .filter-tab.active { background: var(--pc-accent) !important; color: #07080d !important; }
body.theme-cyberpunk.app-phone #search-filter-tabs .filter-tab.active { color: #14121a !important; }

/* ══════════════════════════════════════════════════════════════════════════
   §20) KACHEL-RASTER = 2 SPALTEN wie Mockup_1 (User-Entscheidung 2026-07-24 —
   überschreibt die frühere 1-Spalten-Vorgabe aus §14). Kompaktere Meta fürs
   2-spaltige Layout; hosterfarbener Rahmen bleibt, nur dünner/enger radius.
   ══════════════════════════════════════════════════════════════════════════ */
body.app-phone .video-grid,
body.app-phone #grid-home { grid-template-columns: 1fr 1fr !important; gap: 14px 10px !important; }
body.app-phone .video-card { border-width: 1.5px !important; border-radius: 12px !important; }
body.app-phone #grid-home .card-title { font-size: 12.5px !important; line-height: 1.3 !important; }
body.app-phone .video-card .card-creator,
body.app-phone .video-card .card-creator-name { font-size: 11px !important; }
body.app-phone .video-card .card-views,
body.app-phone .video-card .card-uploaded { font-size: 10.5px !important; }