/* SocialFreedomOS – Premium Workspace Theme (Palette 1)
 *
 * Ziel:
 * - Premium/edel (Ivory + Champagne Gold)
 * - arbeitsfähig für lange Sessions (keine Blendung, klare Kontraste)
 * - kompatibel mit bestehendem Code: wir importieren die ursprüngliche styles.css
 *   und überschreiben nur Tokens/Komponenten, statt alles neu zu schreiben.
 */

@import url("../../styles.css");

/* ------------------------------------------------------------
   Design Tokens (Palette 1: Warm Ivory + Champagne Gold)
   ------------------------------------------------------------ */
:root{
  /* Hintergrund (kein reines Weiß als Dauerfläche) */
  --bg0:#F6F4F1;   /* warmes Ivory */
  --bg1:#FFFFFF;

  /* Flächen */
  --surface:#FFFFFF;
  --surface2:#FBFAF8;
  --surface3:#F3EFE8;

  /* Linien/Borders – warm, subtil */
  --edge: rgba(32,26,18,.10);
  --edge2:rgba(32,26,18,.06);
  --line: rgba(32,26,18,.10);
  --line2:rgba(32,26,18,.06);

  /* Text */
  --text:#171717;
  --muted:#5C636B;
  --muted2:#7A828C;

  /* Brand Accent */
  --gold:#C9A24D;
  --gold2:#E0C27A;

  /* Schatten */
  --shadowA: 0 28px 90px rgba(0,0,0,.18);
  --shadowB: 0 16px 48px rgba(0,0,0,.12);
  --shadowC: 0 10px 26px rgba(0,0,0,.08);

  /*
   * Zusätzliche Akzenttöne für konsistente Gradienten. Diese Variablen
   * stammen aus dem ursprünglichen Dunkel‑Theme und werden hier auch für
   * das helle Theme definiert, damit die Progress‑Bar und Buttons nicht
   * auf undefinierte Werte zurückfallen. Alle Gold‑Stufen sind warme,
   * champagnefarbene Töne, die sich an die Markenpalette anlehnen.
   */
  --gold-1: #EAD9B0;
  --gold-2: #DEC184;
  --gold-3: #C9A24D;
  --gold-4: #A3843A;
  --gold-5: #725926;

  /* Fallback für Hintergründe. Einige Komponenten referenzieren var(--bg).
     Wir leiten diesen auf den primären Flächenhintergrund --bg0 ab, damit
     keine alten Werte aus dem importierten Theme greifen. */
  --bg: var(--bg0);

  /* Gefahren‑Farbe für Fehlermeldungen oder destructive Aktionen */
  --danger: #D8563E;
}

/* ------------------------------------------------------------
   Card/Panel – mehr Tiefe (hell auf hell vermeiden)
   ------------------------------------------------------------ */
.card{
  background:
    radial-gradient(680px 260px at 18% 0%, rgba(201,162,77,.06), transparent 60%),
    rgba(255,255,255,.94);
  border: 1px solid rgba(32,26,18,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}
.card:hover{ border-color: rgba(201,162,77,.28); }

/* Login – Karte klarer abgesetzt */
.login-card{
  background:
    radial-gradient(720px 280px at 14% 0%, rgba(201,162,77,.09), transparent 62%),
    rgba(255,255,255,.96);
  border: 1px solid rgba(32,26,18,.14);
  box-shadow: 0 28px 70px rgba(0,0,0,.10);
}
.login-wrap{
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(201,162,77,.07), transparent 60%),
    radial-gradient(980px 560px at 78% 10%, rgba(0,0,0,.05), transparent 58%),
    var(--bg);
}

html{ color-scheme: light; }

/* ------------------------------------------------------------
   Base Layout
   ------------------------------------------------------------ */
body{
  background:
    radial-gradient(980px 680px at 14% 8%, rgba(201,162,77,.08), transparent 62%),
    radial-gradient(860px 620px at 88% 14%, rgba(201,162,77,.05), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%);
  color: var(--text);
}

/* Wasserzeichen/Brandmarke im BG nur als Hauch */
body::before{ opacity: .03; }

/* Mehr „Atem“ (gegen gequetschtes Gefühl) */
.section{ padding: 36px 0 54px; }
.grid{ gap: 18px; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  border: 1px solid rgba(32,26,18,.14);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.02) inset;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity: .97; }

/* ------------------------------------------------------------
   Progress Bar
   ------------------------------------------------------------ */
/*
 * Verwende diese Klassen statt Inline‑Styles, um Fortschrittsbalken
 * konsistent zu gestalten. Die Hintergrundfarbe verwendet einen
 * transparenten neutralen Ton, die Füllung einen Gold‑Gradienten.
 */
.progress{
  margin-top:8px;
  height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
.progress__bar{
  width:0%; /* Breite per Inline‑Style oder JavaScript setzen */
  height:100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-4));
}

/* Primary = Gold (aber lesbar) */
.btn--primary{
  color: #fff;
  border-color: rgba(201,162,77,.42);
  background: linear-gradient(180deg, rgba(201,162,77,.98), rgba(201,162,77,.74));
  box-shadow: 0 12px 34px rgba(201,162,77,.26), 0 0 0 1px rgba(201,162,77,.18) inset;
}
.btn--primary:hover{ border-color: rgba(201,162,77,.60); }

/* Ghost = neutral (nicht unsichtbar!) */
.btn--ghost{
  background: rgba(0,0,0,.02);
  border-color: rgba(32,26,18,.14);
  color: var(--text);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(32,26,18,.22);
}

/* ------------------------------------------------------------
   Cards / Surfaces
   ------------------------------------------------------------ */
.card{
  background:
    radial-gradient(820px 360px at 16% 0%, rgba(201,162,77,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,248,.92));
  border: 1px solid var(--edge);
  box-shadow: var(--shadowC);
}

/* ------------------------------------------------------------
   Inputs / Forms
   ------------------------------------------------------------ */
.input,
.coach-input{
  border: 1px solid rgba(32,26,18,.16);
  background: rgba(255,255,255,.95);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05) inset;
}
.input::placeholder,
.coach-input::placeholder{ color: rgba(23,23,23,.38); }
.input:focus,
.coach-input:focus{
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 3px rgba(201,162,77,.14), 0 1px 2px rgba(0,0,0,.06) inset;
}

.login-card{
  border: 1px solid var(--edge);
  background:
    radial-gradient(820px 360px at 16% 0%, rgba(201,162,77,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,248,.92));
  box-shadow: var(--shadowB);
}
.login-card__top{
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}

.error{
  border: 1px solid rgba(255,90,90,.35);
  background: rgba(255,90,90,.08);
  color: rgba(128,0,0,.95);
}

/* ------------------------------------------------------------
   Sidebar (Premium Light)
   ------------------------------------------------------------ */
.sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,241,.94));
  box-shadow: 18px 0 60px rgba(0,0,0,.10);
  border-right: 1px solid rgba(32,26,18,.06);
}
.sidebar::after{
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04), rgba(0,0,0,.06));
  opacity: .26;
}

.side-link{ color: var(--text); border-color: transparent; }
.side-link:hover{
  color: var(--text);
  background: rgba(0,0,0,.05);
  border-color: rgba(32,26,18,.10);
}
.side-link.is-active{
  color: var(--text);
  border-color: rgba(201,162,77,.34);
  background:
    radial-gradient(680px 240px at 10% 0%, rgba(201,162,77,.16), transparent 62%),
    rgba(201,162,77,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

.side-icon{
  color: rgba(201,162,77,.85);
  filter: none;
}

/* Sidebar Footer (Logout) – klar, nie überladen */
.sidebar__mini{
  display:flex;
  justify-content: stretch;
}
.sidebar__mini .btn--ghost{
  width: 100%;
  border-color: rgba(201,162,77,.30);
  color: rgba(201,162,77,.92);
}
.sidebar__mini .btn--ghost:hover{
  background: rgba(201,162,77,.14);
  border-color: rgba(201,162,77,.44);
}

/* Collapsed: unten nur Logout als Icon */
body.sidebar-collapsed .sidebar__mini{ justify-content: center; }
body.sidebar-collapsed .sidebar__mini a[data-role="logout"]{
  width: 52px;
  min-width: 52px;
  padding: 10px 0;
  font-size: 0;
  text-align: center;
}
body.sidebar-collapsed .sidebar__mini a[data-role="logout"]::before{
  content: "⎋";
  font-size: 16px;
  font-weight: 900;
  color: rgba(201,162,77,.95);
}

/* Collapsed Brand – oben das Logo sauber zentriert */
body.sidebar-collapsed .sidebar__brand{
  justify-content: center;
}
body.sidebar-collapsed .brand__text{ display: none; }
body.sidebar-collapsed .brand__logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(32,26,18,.10);
}

/* Mobile Lesbarkeit: im Light Theme niemals weiße Sidebar-Texte */
.sidebar .side-link{ color: var(--text) !important; }
.sidebar .side-title{ color: var(--text) !important; }
.sidebar .side-sub{ color: rgba(23,23,23,.62) !important; }
.sidebar .sidebar__section{ color: rgba(23,23,23,.55) !important; }

/* ------------------------------------------------------------
   Topbar (hell, neutral)
   ------------------------------------------------------------ */
.topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
  border-bottom: 1px solid rgba(32,26,18,.06);
}
.topbar-user{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,26,18,.10);
}
.topbar-user strong{ color: var(--text); font-weight: 900; }

/* Status-Pill in der Topbar (Info/Status statt leerer Fläche) */
.topbar-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(32,26,18,.12);
  background: rgba(255,255,255,.72);
  color: rgba(23,23,23,.88);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.topbar-status.is-gold{
  border-color: rgba(201,162,77,.34);
  background:
    radial-gradient(340px 120px at 30% 0%, rgba(201,162,77,.20), transparent 62%),
    rgba(255,255,255,.72);
}
.topbar-status.is-warn{
  border-color: rgba(255,160,60,.38);
  background: rgba(255,160,60,.10);
}

/* Topbar: kompakte Dropdowns (Info / Account) */
.topbar-actions{ display:flex; align-items:center; gap:10px; }

.topbar-info,
.topbar-user{
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(32,26,18,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.topbar-info[open],
.topbar-user[open]{ box-shadow: 0 18px 46px rgba(0,0,0,.12); }

.topbar-info__btn,
.topbar-user__btn{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:8px;
  height: 36px;
  padding: 0 12px;
  user-select:none;
}
.topbar-info__btn::-webkit-details-marker,
.topbar-user__btn::-webkit-details-marker{ display:none; }

.topbar-info__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,77,.38);
  background: rgba(201,162,77,.14);
  color: rgba(23,23,23,.90);
  font-size: 12px;
  font-weight: 900;
}

.topbar-info__panel,
.topbar-user__panel{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(32,26,18,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
  z-index: 1000;
}

.topbar-user__panel{ width: 220px; padding: 8px; }

.menu-item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
.menu-item:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(32,26,18,.10);
}

/* Slots im Dropdown sollen nicht „wie Buttons“ die ganze Topbar füllen */
.topbar-info__panel .slot{ width: 100%; justify-content: flex-start; margin: 6px 0; }

/* Responsive: Topbar entschlacken */
@media (max-width: 980px){
  .topbar-brand__text{ display:none; }
}
@media (max-width: 720px){
  .topbar-note{ display:none; }
  .topbar-title{ font-size: 14px; }
}

/* ------------------------------------------------------------
   Coach – Drawer + Bubble (an Light Theme angepasst)
   ------------------------------------------------------------ */
.coach-backdrop{ background: rgba(0,0,0,.42); }

.coach-drawer{
  border: 1px solid rgba(32,26,18,.14);
  background:
    radial-gradient(820px 360px at 20% 0%, rgba(201,162,77,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,248,.92));
  box-shadow: var(--shadowA);
}

/* Sicherstellen, dass alte Dark-Glas-Styles aus styles.css nicht wieder durchscheinen */
.coach-drawer{ background:
    radial-gradient(820px 360px at 20% 0%, rgba(201,162,77,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,248,.92)) !important;
}

.coach-header{
  border-bottom: 1px solid rgba(32,26,18,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.coach-title{ color: var(--text); }
.coach-close{
  border-color: rgba(32,26,18,.12);
  background: rgba(255,255,255,.85);
  color: var(--text);
}
.coach-close:hover{ background: rgba(0,0,0,.04); }

.coach-body{
  background:
    radial-gradient(820px 360px at 40% 0%, rgba(201,162,77,.04), transparent 62%);
}

/* Bubbles (neue/alte Klassen) */
.coach-msg,
.coach-bubble{
  border: 1px solid rgba(32,26,18,.10);
  background: rgba(255,255,255,.86) !important;
  color: var(--text);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.coach-msg,
.coach-bubble{ background: rgba(255,255,255,.86) !important; color: var(--text) !important; }
.coach-msg--user,
.coach-bubble--me{
  border-color: rgba(201,162,77,.26);
  background:
    radial-gradient(420px 160px at 30% 0%, rgba(201,162,77,.10), transparent 62%),
    rgba(255,255,255,.84);
}

.coach-footer{
  border-top: 1px solid rgba(32,26,18,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,0));
}

/* Floating Coach Button (Bubble) */
.coach-fab{
  border-color: rgba(201,162,77,.30);
  background:
    radial-gradient(220px 90px at 30% 0%, rgba(201,162,77,.16), transparent 60%),
    rgba(255,255,255,.95) !important;
  color: var(--text);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
}
.coach-fab:hover{
  border-color: rgba(201,162,77,.48);
  background:
    radial-gradient(260px 100px at 30% 0%, rgba(201,162,77,.20), transparent 60%),
    rgba(255,255,255,.98);
}
.coach-fab__dot{ background: rgba(201,162,77,.95); box-shadow: 0 0 0 3px rgba(201,162,77,.14); }

/* ------------------------------------------------------------
   Kleine Lesbarkeits-Tweaks
   ------------------------------------------------------------ */
.lead{ color: var(--muted); }
.small,
.muted{ color: var(--muted); }

/* HeyGen Guide Layout */
.grid--heygen{ grid-template-columns: 1.35fr .95fr; align-items: start; }
@media (max-width: 1020px){
  .grid--heygen{ grid-template-columns: 1fr; }
}

/* HeyGen (Next-Level): bessere Lesbarkeit + Struktur */
.grid--heygen2{ grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 1100px){
  .grid--heygen2{ grid-template-columns: 1fr; }
}

/* HeyGen: Reihenfolge für Mobile vs Desktop
   Mobile: erst Video, dann Schritte
   Desktop: Schritte links, Video rechts */
.heygen-video{ order: 1; }
.heygen-steps{ order: 2; }
@media (min-width: 1101px){
  .heygen-steps{ order: 1; }
  .heygen-video{ order: 2; }
}

.step-list{ display:flex; flex-direction: column; gap: 12px; }
.step{
  border: 1px solid rgba(32,26,18,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  padding: 12px 12px;
}
.step__row{ display:flex; align-items:flex-start; gap: 12px; }
.step__num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 1000;
  border: 1px solid rgba(201,162,77,.30);
  background: rgba(201,162,77,.12);
}
.step__main{ flex:1; min-width: 0; }
.step__title{ font-weight: 900; margin: 0; }
.step__hint{ margin: 4px 0 0; color: var(--muted); }
.step details{ margin-top: 10px; }
.step details > summary{ cursor:pointer; font-weight: 800; }
.step details > summary{ list-style:none; }
.step details > summary::-webkit-details-marker{ display:none; }
.step details > summary::after{ content:"▾"; float:right; opacity:.7; }
.step details[open] > summary::after{ content:"▴"; }
.step details .details__body{ padding-top: 8px; }

.video-card video{ width: 100%; border-radius: 16px; border: 1px solid rgba(32,26,18,.10); }
.video-card .small{ margin-top: 10px; }

/* ------------------------------------------------------------
   Topbar Branding & Notice Bar
   ------------------------------------------------------------ */

.topbar-left{ display:flex; align-items:center; gap:14px; }

.topbar-brand{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(32,26,18,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.topbar-brand__mark{
  width:28px; height:28px;
  border-radius: 10px;
  display:grid; place-items:center;
  font-weight: 1000;
  letter-spacing: .02em;
  color: rgba(32,26,18,.95);
  border:1px solid rgba(201,162,77,.35);
  background: radial-gradient(220px 90px at 30% 0%, rgba(201,162,77,.22), transparent 60%), rgba(255,255,255,.92);
}

.topbar-brand__text{
  font-weight: 900;
  color: rgba(32,26,18,.92);
  letter-spacing: .01em;
  font-size: 13px;
  white-space: nowrap;
}

.topbar-title{ font-weight: 900; }
.topbar-note{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.notice-bar{
  position: sticky;
  top: 62px;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(32,26,18,.10);
}
.notice-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
}
.notice-bar__actions .btn{ white-space: nowrap; }

/* ------------------------------------------------------------
   Settings UI: Tabs, Alerts, Inputs
   ------------------------------------------------------------ */

.tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.tab{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(32,26,18,.12);
  background: rgba(255,255,255,.72);
  color: var(--text);
  font-weight: 900;
  text-decoration:none;
}
.tab:hover{ background: rgba(0,0,0,.03); }
.tab.is-active{
  border-color: rgba(201,162,77,.36);
  background: radial-gradient(420px 160px at 30% 0%, rgba(201,162,77,.10), transparent 62%), rgba(255,255,255,.80);
}

.label{ display:block; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(32,26,18,.14);
  background: rgba(255,255,255,.84);
  color: var(--text);
  outline: none;
}
.input:focus{ border-color: rgba(201,162,77,.55); box-shadow: 0 0 0 4px rgba(201,162,77,.12); }

.alert{ padding: 12px 14px; border-radius: 14px; border:1px solid transparent; }
.alert--ok{ background: rgba(0,160,120,.08); border-color: rgba(0,160,120,.22); }
.alert--err{ background: rgba(255,90,90,.08); border-color: rgba(255,90,90,.22); }

.sep{ border:0; border-top: 1px solid rgba(32,26,18,.10); margin: 18px 0; }

.btn--danger{
  background: rgba(255,90,90,.12);
  border-color: rgba(255,90,90,.28);
  color: rgba(120,0,0,.95);
  font-weight: 900;
}
.btn--danger:hover{ background: rgba(255,90,90,.16); border-color: rgba(255,90,90,.36); }

.auth-wrap{ max-width: 560px; margin: 40px auto; padding: 20px; }
.auth-card{ padding: 18px; }
.auth-brand{ font-weight: 1000; letter-spacing:.01em; color: rgba(32,26,18,.92); }

/* ------------------------------------------------------------
   Theme Toggle (Beta)
   ------------------------------------------------------------ */
html[data-theme="dark"]{
  --bg0: #0f131a;
  --bg1: #121827;
  --surface:  rgba(18,24,39,.90);
  --surface2: rgba(18,24,39,.84);
  --surface3: rgba(18,24,39,.76);
  --edge:  rgba(255,255,255,.12);
  --edge2: rgba(255,255,255,.09);
  --text:  rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.82);
  --muted2:rgba(255,255,255,.62);
  --accent: rgba(242,214,160,.92);

  /* Dark‑Theme‑Gold‑Stufen: orientieren sich an der Landing‑Page
     und dem ursprünglichen styles.css. Durch die vollständige
     Definition aller Stufen können Gradienten im dunklen Modus
     konsistent gestaltet werden. */
  --gold-1: #F7E6C3;
  --gold-2: #F2D6A0;
  --gold-3: #D7B06F;
  --gold-4: #B88646;
  --gold-5: #8A5A2C;

  /* Gefahren‑Farbe im dunklen Modus */
  --danger: #F26969;
}

html[data-theme="dark"] body{ background: radial-gradient(1400px 700px at 20% 0%, rgba(242,214,160,.09), transparent 60%), var(--bg0); }
html[data-theme="dark"] .sidebar{ background: linear-gradient(180deg, rgba(18,24,39,.96), rgba(18,24,39,.86)); }
html[data-theme="dark"] .topbar{ background: linear-gradient(180deg, rgba(18,24,39,.94), rgba(18,24,39,.78)); border-bottom: 1px solid rgba(255,255,255,.10); }
html[data-theme="dark"] .topbar-brand{ background: rgba(18,24,39,.70); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 60px rgba(0,0,0,.35); }
html[data-theme="dark"] .topbar-brand__text,
html[data-theme="dark"] .topbar-brand__mark{ color: rgba(255,255,255,.92); }
html[data-theme="dark"] .notice-bar{ background: rgba(18,24,39,.72); border-bottom-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .tab{ background: rgba(18,24,39,.70); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .input{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text); }
html[data-theme="dark"] .coach-drawer{ background: rgba(18,24,39,.92); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .coach-msg,
html[data-theme="dark"] .coach-bubble{ background: rgba(18,24,39,.78); border-color: rgba(255,255,255,.10); color: var(--text); }
html[data-theme="dark"] .coach-fab{ background: rgba(18,24,39,.88); border-color: rgba(255,255,255,.14); color: var(--text); }

/* ---------------------------------------------------------------------
   Komponenten‑Overrides für Dark‑Mode
   --------------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .hero__card{
  /* Dunkle Flächen mit subtilen Verläufen für Tiefe */
  background:
    radial-gradient(820px 360px at 16% 0%, rgba(242,214,160,.06), transparent 62%),
    linear-gradient(180deg, rgba(18,24,39,.96), rgba(18,24,39,.88));
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--shadowC);
}

html[data-theme="dark"] .pill,
html[data-theme="dark"] .note,
html[data-theme="dark"] .coach-drawer,
html[data-theme="dark"] .coach-header,
html[data-theme="dark"] .coach-msg__bubble{
  background: rgba(18,24,39,.82);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}

html[data-theme="dark"] .btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html[data-theme="dark"] .btn--primary{
  /* Goldener Gradient für Primär‑Buttons im dunklen Theme */
  color: #0e1116;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, var(--gold-2), var(--gold-4));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html[data-theme="dark"] .btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}

html[data-theme="dark"] .btn--danger{
  background: rgba(242,105,105,.12);
  border-color: rgba(242,105,105,.28);
  color: rgba(255,200,200,.95);
}

/* ------------------------------------------------------------
   Footer – Light Theme Lesbarkeit
   ------------------------------------------------------------ */
html:not([data-theme="dark"]) .footer{
  background: rgba(255,255,255,.70);
  border-top: 1px solid rgba(32,26,18,.12);
  color: rgba(32,26,18,.62);
}
html:not([data-theme="dark"]) .footer__title{ color: rgba(32,26,18,.90); }
html:not([data-theme="dark"]) .footer__text{ color: rgba(32,26,18,.62); }
html:not([data-theme="dark"]) .footer__links a{ color: rgba(32,26,18,.62); }
html:not([data-theme="dark"]) .footer__links a:hover{ color: rgba(32,26,18,.90); }

/* ------------------------------------------------------------
   HeyGen Page – etwas lockerer + dezenter Brand-Watermark
   ------------------------------------------------------------ */
.heygen-page .card{ padding: 18px; }
.heygen-page .small{ line-height: 1.55; }
.grid--heygen2{ gap: 18px; }

/* Subtiler „HeyGen“-Watermark – bewusst extrem leicht, damit es nicht stört */
.heygen-watermark{ position: relative; }
.heygen-watermark::before{
  content: "HeyGen";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-weight: 1000;
  letter-spacing: .04em;
  font-size: clamp(44px, 6vw, 86px);
  color: rgba(32,26,18,.05);
  pointer-events: none;
  user-select: none;
  transform: rotate(-6deg);
}
html[data-theme="dark"] .heygen-watermark::before{
  color: rgba(255,255,255,.06);
}

/* =========================
   Topbar Info-Slots (Chips)
   ========================= */
.topbar-slots{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}
@media (max-width: 860px){
  .topbar-slots{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap:nowrap;
    padding-bottom: 2px;
  }
  .topbar-slots::-webkit-scrollbar{ display:none; }
}
.slot{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(32,26,18,.12);
  background: rgba(255,255,255,.55);
  color: rgba(16,16,16,.86);
  box-shadow: 0 8px 22px rgba(15,11,8,.10);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12px;
  line-height: 1;
  text-decoration:none;
  white-space: nowrap;
}
.slot:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(15,11,8,.14); }
.slot__icon{ opacity:.92; }
.slot--neutral{ border-color: rgba(32,26,18,.12); }
.slot--gold{ border-color: rgba(174,127,52,.28); background: rgba(174,127,52,.10); }
.slot--warn{ border-color: rgba(184,85,45,.28); background: rgba(184,85,45,.10); }

/* =========================
   Card/Panel Feinschliff
   ========================= */
/*
 * Card/Panel Feinschliff – nur im hellen Modus anwenden. Diese Regeln
 * definieren leichtere Schlagschatten und goldene Akzentkanten für
 * Karten, Pills und Notes. Im dunklen Modus werden sie von den
 * überschreibenden Dark‑Overrides ignoriert.
 */
html:not([data-theme="dark"]) .card{
  border-color: rgba(32,26,18,.10) !important;
  box-shadow: 0 16px 48px rgba(15,11,8,.10) !important;
}
@media (hover:hover){
  html:not([data-theme="dark"]) .card:hover{
    box-shadow: 0 22px 72px rgba(15,11,8,.14) !important;
    border-color: rgba(174,127,52,.22) !important;
  }
}
html:not([data-theme="dark"]) .pill{
  border-color: rgba(174,127,52,.22) !important;
  background: rgba(174,127,52,.10) !important;
  color: rgba(92,62,22,.90) !important;
}
html:not([data-theme="dark"]) .note{
  background: rgba(255,255,255,.62) !important;
  color: rgba(16,16,16,.86) !important;
  border-color: rgba(32,26,18,.10) !important;
}
html:not([data-theme="dark"]) .note b{ color: rgba(16,16,16,.92) !important; }

/* Coach: heller, weniger „Glass“ – nur im hellen Modus */
html:not([data-theme="dark"]) .coach-drawer{
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(32,26,18,.12) !important;
}
html:not([data-theme="dark"]) .coach-header{ background: rgba(255,255,255,.70) !important; }
html:not([data-theme="dark"]) .coach-msg__bubble{ border-color: rgba(32,26,18,.10) !important; }

/* ==========================================================
   FINAL TOPBAR — SocialFreedom OS
   - Desktop: Wortmarke
   - Mobile: Logo aus /member/assets/sf-logo.png
   - Theme Toggle immer sichtbar (Arbeitsmodus)
   - User Dropdown ohne irreführende Icons
   ========================================================== */

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  height: 72px;
}

.topbar-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }

/* Brand */
.topbar-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  min-width: 0;
}
.topbar-brand__wordmark{
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(32,26,18,.92);
  white-space: nowrap;
}
.topbar-brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:none; /* wird im Mobile angezeigt */
}

/* Mobile: Logo statt Wortmarke */
@media (max-width: 640px){
  .topbar-brand__logo{ display:block; }
  .topbar-brand__wordmark{ display:none; }
}

/* Dark: Wortmarke in Accent */
html[data-theme="dark"] .topbar-brand__wordmark{
  color: rgba(242,214,160,.92);
}

/* Center bewusst zurückhaltend */
.topbar-center{ flex: 1; min-width: 0; }
.topbar-center__slot.is-empty{ height: 1px; }

/* Right */
.topbar-right{ display:flex; align-items:center; gap: 12px; }

/* Theme Toggle — ikonisch, nicht wie ein Button */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  height: 38px;
  width: 44px;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.60);
  color: rgba(32,26,18,.84);
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(0,0,0,.10); }
.theme-toggle:active{ transform: translateY(0); }

html[data-theme="dark"] .theme-toggle{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 44px rgba(0,0,0,.34);
}

/* Icons: zeige nur den passenden Zustand */
html[data-theme="dark"] .theme-toggle__sun{ display:none; }
html:not([data-theme="dark"]) .theme-toggle__moon{ display:none; }

/* User Menu */
.sf-user-menu{ position:relative; }
.sf-user-trigger{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.60);
  color: rgba(32,26,18,.88);
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  white-space: nowrap;
}
.sf-user-trigger:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(0,0,0,.10); }
.sf-user-trigger:active{ transform: translateY(0); }

html[data-theme="dark"] .sf-user-trigger{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 44px rgba(0,0,0,.34);
}

.sf-user-name{ font-weight: 800; letter-spacing: .01em; }
.sf-user-caret{ opacity: .7; }

.sf-user-dropdown{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 200px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
  display:none;
}
html[data-theme="dark"] .sf-user-dropdown{
  background: rgba(18,24,39,.94);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
}

.sf-user-menu.is-open .sf-user-dropdown{ display:block; }

.sf-user-dropdown a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
}
.sf-user-dropdown a:hover{
  background: rgba(201,162,77,.10);
}

/* Coach FAB im Footer-Bereich ausblenden */
.coach-fab.is-hidden{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(16px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Short pages: don't hide the coach button (would disable coach). Raise it slightly above the footer instead. */
.coach-fab.is-raised{
  bottom: 84px !important;
}

/* Dashboard watermark (subtle brand mark) */
.dashboard-watermark{
  position: relative;
  isolation: isolate;
}
.dashboard-watermark::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../sf-logo.png");
  background-repeat: no-repeat;
  background-position: center 120px;
  background-size: min(520px, 60vw);
  opacity: 0.08;
  filter: saturate(1.25);
  pointer-events: none;
  z-index: 0;
}
.dashboard-watermark > *{
  position: relative;
  z-index: 1;
}


/* ============================================================
   UI HOTFIX OVERRIDES (Coach Bubble + Chat Input + Topbar)
   - minimalinvasiv, OS-konform
   ============================================================ */

/* A) Coach Floating Bubble — Kontrast fix */
#coachFab.coach-fab,
.coach-fab{
  background: rgba(15,15,18,0.94) !important;
  border: 1px solid rgba(201,162,74,0.55) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
  opacity: 1 !important;
  color: rgba(255,255,255,0.92) !important;
}
#coachFab.coach-fab:hover,
#coachFab.coach-fab:focus-visible,
.coach-fab:hover,
.coach-fab:focus-visible{
  border-color: rgba(201,162,74,0.75) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55) !important;
  outline: none;
}
#coachFab .coach-fab__dot,
.coach-fab .coach-fab__dot{
  background: rgba(201,162,74,0.95) !important;
}

/* B) Chat Input — lesbar in Light + Dark */
.coach-input{
  caret-color: rgba(255,255,255,0.92);
}
.coach-input::selection{
  background: rgba(201,162,74,0.35);
  color: rgba(255,255,255,0.92);
}
.coach-input::placeholder{
  color: rgba(255,255,255,0.45);
}

/* Light Mode: html[data-theme="light"] oder default (kein dark gesetzt) */
html[data-theme="light"] .coach-input,
html:not([data-theme="dark"]) .coach-input{
  background-color: #ffffff !important;
  color: #111111 !important;
  caret-color: #111111 !important;
  border-color: rgba(17,17,17,0.14) !important;
}
html[data-theme="light"] .coach-input::placeholder,
html:not([data-theme="dark"]) .coach-input::placeholder{
  color: rgba(17,17,17,0.45) !important;
}
html[data-theme="light"] .coach-input::selection,
html:not([data-theme="dark"]) .coach-input::selection{
  background: rgba(201,162,74,0.28);
  color: #111111;
}

/* Dark Mode */
html[data-theme="dark"] .coach-input{
  background-color: rgba(18,18,22,0.92) !important;
  color: rgba(255,255,255,0.92) !important;
  caret-color: rgba(255,255,255,0.92) !important;
}
html[data-theme="dark"] .coach-input::placeholder{
  color: rgba(255,255,255,0.45) !important;
}
html[data-theme="dark"] .coach-input::selection{
  background: rgba(201,162,74,0.35);
  color: rgba(255,255,255,0.92);
}

/* C) Topbar — weniger leer, OS-konform */
.topbar-center__slot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: 38px;
}
.topbar-badge{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.45);
  color: rgba(32,26,18,.86);
  font-weight: 900;
  font-size: .86rem;
  white-space: nowrap;
}
html[data-theme="dark"] .topbar-badge{
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.86);
}
.topbar-link{
  font-size: .90rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .topbar-link,
html:not([data-theme="dark"]) .topbar-link{
  color: rgba(32,26,18,.82);
  border-color: rgba(17,17,17,.10);
  background: rgba(255,255,255,.50);
}
.topbar-link:hover,
.topbar-link:focus-visible{
  border-color: rgba(201,162,74,0.45);
  outline: none;
}


/* ------------------------------------------------------------
   Sidebar vNext — Premium Rhythm + Stronger Type
   (Marken-nah zu socialfreedom.pro, aber OS-tauglich)
   ------------------------------------------------------------ */
:root{
  /* bessere Ratio Content/Sidebar auf Tablet */
  --sidebar-w: 224px;
  --side-radius: 16px;
}

/* Brand block */
.sidebar__brand{
  padding: 10px 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--side-radius);
}

.brand--compact{ gap: 10px; }
.brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.brand__name{
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__tag{
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
}

/* Section label */
.sidebar__section{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 10px 10px 8px;
}

/* Links */
.side-nav{ padding: 0 6px; }
.side-link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--side-radius);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

.side-icon{
  width: 18px;
  height: 18px;
  opacity: .92;
}

.side-text{ min-width:0; display:flex; flex-direction:column; gap: 2px; }
.side-title{
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.side-sub{
  font-size: 12px;
  font-weight: 500;
  color: var(--muted2);
  line-height: 1.2;
}

.side-link:hover{
  background: rgba(0,0,0,.035);
  border-color: rgba(32,26,18,.10);
  transform: translateY(-1px);
}

.side-link.is-active{
  background: rgba(200,164,106,.14);
  border-color: rgba(200,164,106,.26);
  color: var(--text);
}
.side-link.is-active .side-sub{
  color: rgba(32,26,18,.72);
}

/* Dark mode refinements */
[data-theme="dark"] .side-link:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .side-link.is-active{
  background: rgba(242,214,160,.12);
  border-color: rgba(242,214,160,.22);
}
[data-theme="dark"] .side-link.is-active .side-sub{
  color: rgba(255,255,255,.72);
}

/* Make burger easier to hit on tablets */
.topbar-burger{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

/* Ensure backdrop exists on all pages; dashboard now injects it.
   (Other pages already include it.) */