/* ══════════════════════════════════════════════════════════════════════════
   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;
}

/* ── (5) Desktop-Seitenmenü grösser & lesbarer ──
   Im ausgeklappten Zustand ist viel ungenutzter Platz. Icon + vor allem Schrift
   grösser, etwas mehr Zeilen-Padding. NUR body.app-desktop UND NICHT eingeklappt —
   der schmale Icon-Rail (sidebar-collapsed), Handy (reskin-mobile.css) und TV bleiben
   unberührt. */
body.app-desktop:not(.sidebar-collapsed) #sidebar { width: 264px !important; }
body.app-desktop:not(.sidebar-collapsed) .nav-item {
  padding: 15px 16px !important;
  margin-bottom: 5px !important;
}
body.app-desktop:not(.sidebar-collapsed) .nav-label {
  font-size: 21px !important;
  letter-spacing: .3px !important;
}
body.app-desktop:not(.sidebar-collapsed) .nav-icon {
  width: 32px !important;
  height: 32px !important;
  margin-right: 16px !important;
}
body.app-desktop:not(.sidebar-collapsed) .nav-icon svg {
  width: 27px !important;
  height: 27px !important;
}