/* ==========================================================================
   LUNUP — Dating-Neuentwurf
   --------------------------------------------------------------------------
   Alles hier haengt an body.is-dating-web. Diese Klasse setzt app.js nur im
   Dating-Modus (renderAppState), damit der Social-Bereich garantiert
   unveraendert bleibt. Datei nach styles.css einbinden.

   Richtung: warme Nacht statt Marineblau. Das Pink der Android-App (#FF4081)
   bleibt die Markenseele, nur waermer und tiefer. Gold ausschliesslich fuer
   Premium und Belohnung. Cyan/Violett raus — sie liessen Dating technisch
   statt romantisch wirken.
   ========================================================================== */

body.is-dating-web{
  --bg:#120A10;
  --bg-soft:#1E1119;
  --card:#1E1119;
  --card-2:#2A1824;
  --line:rgba(255,255,255,.10);
  --text:#FFF4F5;
  --muted:#BC9CAB;

  --pink:#FF3D71;          /* Hauptakzent */
  --cyan:#FF7B54;          /* war Cyan -> jetzt Ember, Partner im Verlauf */
  --violet:#E01D57;        /* war Violett -> jetzt tiefes Rose */
  --gold:#F5C451;          /* nur Premium/Belohnung */
  --danger:#FF6B7B;

  /* eigene Zusatztoken */
  --dt-raised:#2A1824;
  --dt-raised-2:#351E2C;
  --dt-blush:#FFC7D6;
  --dt-muted-2:#8E7280;
  --dt-mint:#4FD69C;                       /* nur Online/Erfolg */
  --dt-grad:linear-gradient(135deg,#FF3D71,#FF7B54);
  --dt-grad-gold:linear-gradient(135deg,#FFD97A,#F5C451);
  --dt-line-soft:rgba(255,255,255,.06);
}

/* Grundflaeche: warmes Nachtlicht statt blauem Verlauf */
body.is-dating-web{
  background:
    radial-gradient(circle at top right, rgba(255,61,113,.20), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255,123,84,.12), transparent 26%),
    linear-gradient(180deg,#120A10 0%, #1A0E17 45%, #100810 100%) !important;
}

/* --- Flaechen ruhiger und waermer ------------------------------------- */
body.is-dating-web .panel,
body.is-dating-web .app-nav-panel,
body.is-dating-web .quick-panel,
body.is-dating-web .workspace-card,
body.is-dating-web .metric-card{
  background:linear-gradient(180deg, rgba(42,24,36,.72), rgba(30,17,25,.86));
  border-color:var(--line);
}

/* --- Marketing-Seiten (index/features/dating/sicherheit): dieselbe warme
   Nacht wie die App, ohne app.js - is-dating-web wird hier statisch im
   Body-Tag gesetzt, nicht per JS-Modus-Umschaltung. */
body.is-dating-web .hero{
  background:linear-gradient(180deg, rgba(42,24,36,.80), rgba(18,10,16,.94));
}
body.is-dating-web .step-index{
  background:rgba(255,61,113,.18);
  color:var(--dt-blush);
}

/* --- Hauptaktionen: der eine warme Verlauf ---------------------------- */
body.is-dating-web .primary-btn{
  background:var(--dt-grad);
  box-shadow:0 8px 22px rgba(255,61,113,.28);
}
body.is-dating-web .primary-btn:hover{ filter:brightness(1.06); }

body.is-dating-web .ghost-btn.is-active,
body.is-dating-web .mode-switch__btn.is-active,
body.is-dating-web .app-top-nav-btn.is-active,
body.is-dating-web .app-side-nav__item.is-active,
body.is-dating-web .bottom-nav-btn.is-active{
  background:var(--dt-grad);
  border-color:transparent;
  color:#fff;
}

/* --- Typografie: Serifen-Display fuer emotionale Momente --------------- */
body.is-dating-web .brand__name,
body.is-dating-web .panel__title,
body.is-dating-web h1,
body.is-dating-web h2{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  letter-spacing:-.015em;
}

/* --- Absicht/Stimmung als Chips --------------------------------------- */
body.is-dating-web .fact-pill{
  background:rgba(255,61,113,.10);
  border-color:rgba(255,61,113,.24);
  color:var(--dt-blush);
}

/* --- Online-Punkt: das einzige Gruen ---------------------------------- */
body.is-dating-web .status-dot--online,
body.is-dating-web .dot-online{ background:var(--dt-mint); }

/* ==========================================================================
   Vibes-Feed-Karte — 1:1 nach Mockup-Abschnitt "02. VIBES"
   Struktur (Avatar, Name, Badges, Body, Footer-Aktionen) existiert bereits
   in app.js/styles.css; hier nur die Optik auf die Mockup-Bildsprache
   umgestellt. Groessen bleiben auf Desktop-Massstab (Mockup ist ein
   Telefon-Rahmen bei kleinerem Massstab), Farben/Formen/Verhaeltnisse 1:1.
   ========================================================================== */

body.is-dating-web .dating-vibe-card{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(9,4,8,.34);
}

body.is-dating-web .dating-vibe-card__avatar{
  border-radius:50%;
  background:var(--dt-grad);
  border:1px solid var(--line);
}

body.is-dating-web .dating-vibe-card__name{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:700;
  letter-spacing:-.01em;
}

body.is-dating-web .dating-vibe-card__meta{
  color:var(--dt-muted-2);
}

/* Chips: Absicht (rose), Stimmung (neutral), Boost (gold) - wie im Mockup */
body.is-dating-web .dating-vibe-card__badges .fact-pill{
  background:var(--dt-raised);
  border:1px solid var(--dt-line-soft);
  color:var(--muted);
  font-weight:800;
  letter-spacing:.02em;
}
body.is-dating-web .dating-vibe-card__badges .fact-pill--intent{
  background:rgba(255,61,113,.12);
  border-color:rgba(255,61,113,.28);
  color:var(--dt-blush);
}
body.is-dating-web .dating-vibe-card__badges .fact-pill--boost{
  background:rgba(245,196,81,.14);
  border-color:rgba(245,196,81,.3);
  color:var(--gold);
}

body.is-dating-web .dating-vibe-card__body{
  background:rgba(255,255,255,.035);
  border-color:var(--dt-line-soft);
  color:#EBD9DF;
}

body.is-dating-web .dating-vibe-card__image{
  border-color:var(--dt-line-soft);
  background:var(--dt-raised);
}

/* Footer-Aktionen: ruhige Pillen, "Interesse" als die eine hervorgehobene
   Handlung (Verlauf) - genau wie .act / .act--primary im Mockup */
body.is-dating-web .dating-vibe-action{
  background:var(--dt-raised);
  border:1px solid var(--dt-line-soft);
  color:var(--muted);
  border-radius:13px;
  font-weight:700;
}
body.is-dating-web .dating-vibe-action.is-primary{
  background:var(--dt-grad);
  border-color:transparent;
  color:#fff;
}
body.is-dating-web .dating-vibe-action.is-active{
  background:rgba(255,61,113,.14);
  border-color:rgba(255,61,113,.32);
  color:var(--dt-blush);
}

/* ==========================================================================
   Taeglicher Bonus
   ========================================================================== */

.daily-bonus-overlay{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(9,4,8,.74);
  backdrop-filter:blur(4px);
}
.daily-bonus-overlay[hidden]{ display:none; }

.daily-bonus{
  width:min(380px,100%);
  background:linear-gradient(180deg,#351E2C,#1E1119);
  border:1px solid rgba(245,196,81,.26);
  border-radius:26px;
  padding:26px 22px 20px;
  text-align:center;
  position:relative;
  box-shadow:0 26px 64px rgba(0,0,0,.62);
  animation:dailyBonusIn .34s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes dailyBonusIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .daily-bonus{ animation:none; }
}

.daily-bonus__glow{
  position:absolute;top:-52px;left:50%;transform:translateX(-50%);
  width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,81,.34),transparent 68%);
  pointer-events:none;
}
.daily-bonus__eyebrow{
  position:relative;
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.daily-bonus__title{
  position:relative;
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:32px;font-weight:900;letter-spacing:-.02em;
  margin:8px 0 6px;line-height:1.1;
}
.daily-bonus__text{
  position:relative;
  font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px;
}
.daily-bonus__text b{ color:var(--gold); }

.daily-bonus__burst{
  width:78px;height:78px;border-radius:50%;margin:0 auto 14px;
  background:var(--dt-grad-gold);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;position:relative;
  box-shadow:0 10px 30px rgba(245,196,81,.36);
}

.daily-bonus__week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px;
}
.daily-bonus__day{
  border-radius:10px;padding:9px 2px 8px;
  border:1px solid var(--dt-line-soft);
  background:var(--dt-raised);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.daily-bonus__day-n{ font-size:9px;font-weight:800;color:var(--dt-muted-2);letter-spacing:.04em; }
.daily-bonus__day-v{ font-size:12px;font-weight:800;color:var(--muted); }

.daily-bonus__day.is-done{ background:rgba(79,214,156,.10);border-color:rgba(79,214,156,.30); }
.daily-bonus__day.is-done .daily-bonus__day-v{ color:var(--dt-mint); }

.daily-bonus__day.is-today{
  background:var(--dt-grad-gold);border-color:transparent;transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(245,196,81,.18), 0 6px 16px rgba(245,196,81,.28);
}
.daily-bonus__day.is-today .daily-bonus__day-n{ color:rgba(24,13,8,.72); }
.daily-bonus__day.is-today .daily-bonus__day-v{ color:#180D08; }

.daily-bonus__day.is-prize{ background:rgba(245,196,81,.10);border-color:rgba(245,196,81,.34); }
.daily-bonus__day.is-prize .daily-bonus__day-v{ color:var(--gold);font-size:13px; }

@media (prefers-reduced-motion:no-preference){
  .daily-bonus__day.is-today{ animation:dailyBonusPulse 2.6s ease-in-out infinite; }
  @keyframes dailyBonusPulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(245,196,81,.18), 0 6px 16px rgba(245,196,81,.28); }
    50%    { box-shadow:0 0 0 6px rgba(245,196,81,.10), 0 8px 22px rgba(245,196,81,.36); }
  }
}

.daily-bonus__cta{
  display:block;width:100%;border:none;border-radius:15px;padding:14px;
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  background:var(--dt-grad-gold);color:#180D08;
  transition:filter .15s ease, transform .15s ease;
}
.daily-bonus__cta:hover{ filter:brightness(1.05); }
.daily-bonus__cta:active{ transform:translateY(1px); }
.daily-bonus__cta--rose{ background:var(--dt-grad);color:#fff; }
.daily-bonus__cta:disabled{ opacity:.55;cursor:default; }

.daily-bonus__note{
  font-size:10.5px;color:var(--dt-muted-2);line-height:1.55;margin-top:12px;
}
.daily-bonus__later{
  background:none;border:none;color:var(--dt-muted-2);
  font-family:inherit;font-size:12px;font-weight:700;
  margin-top:10px;cursor:pointer;text-decoration:underline;
}
.daily-bonus__later:hover{ color:var(--muted); }

/* Sichtbarer Tastaturfokus — auch im Popup */
.daily-bonus__cta:focus-visible,
.daily-bonus__later:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* Kleiner Einstieg im Profil, falls das Popup weggetippt wurde */
.daily-bonus-teaser{
  background:linear-gradient(135deg,rgba(245,196,81,.18),rgba(255,61,113,.12));
  border:1px solid rgba(245,196,81,.30);
  border-radius:16px;padding:14px;margin-bottom:12px;
}
.daily-bonus-teaser__t{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:15px;font-weight:700;margin-bottom:4px;
}
.daily-bonus-teaser__d{ font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:10px; }

@media (max-width:520px){
  .daily-bonus{ padding:22px 16px 16px; }
  .daily-bonus__title{ font-size:27px; }
  .daily-bonus__week{ gap:4px; }
}


/* ==========================================================================
   Discover-Grid — nach Mockup-Abschnitt "ENTDECKEN"
   Betrifft zwei Renderziele mit identischem Karten-Markup (siehe Notiz c):
   #datingDiscoverGrid (Tab "Entdecken" im Vibes/Entdecken-Switch, gefuellt
   von renderDatingDiscoverGrid()) und #datingSearchGrid (eigener Tab
   "Entdecken" in sectionDatingSearch, gefuellt inline in renderDatingCards())
   — beide nutzen dieselben .discover-card-Klassen, hier deshalb nur einmal
   gestylt.
   ========================================================================== */

body.is-dating-web .discover-grid{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}

body.is-dating-web .discover-card{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(9,4,8,.34);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

body.is-dating-web .discover-card--app:hover{
  border-color:rgba(255,61,113,.24);
  background:var(--dt-raised);
}

/* Kopf: Avatar + Name/Meta. Nur aktiv, wenn .discover-card__head im Markup
   steht (optionale JS-Aenderung E/F, siehe Notiz b) — ohne sie bleiben Titel
   und Meta einfach direkte Kinder der Karte und stylen sich trotzdem korrekt. */
body.is-dating-web .discover-card__head{
  display:flex;
  align-items:center;
  gap:12px;
}
body.is-dating-web .discover-card__avatar{
  width:52px;
  height:52px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--dt-grad);
  border:1px solid var(--line);
  overflow:hidden;
  display:block;
}
body.is-dating-web .discover-card__avatar .avatar-image{
  border-radius:50%;
}

body.is-dating-web .discover-card__title{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:700;
  letter-spacing:-.01em;
  font-size:16px;
  margin-bottom:0;
}
body.is-dating-web .discover-card__meta{
  color:var(--dt-muted-2);
  font-size:12px;
  margin-top:1px;
  margin-bottom:0;
}

/* Status-Zeile ("Online/Aktiv in LUNUP Dating") — 1:1 Mockup .disc-card__status */
body.is-dating-web .discover-card p{
  font-size:11.5px;
  color:var(--dt-mint);
  margin:0;
}

/* Info-Pillen (Profil ansehen / Like senden / Superlike) sind reine
   Deko-Labels ohne Intent-Bedeutung -> ruhige Grundfarbe statt des
   globalen Rose-Tons; nur "Boost aktiv" bekommt Gold (Boost-Typ). */
body.is-dating-web .discover-card .profile-showcase-card__chips .fact-pill{
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  padding:7px 12px;
}
body.is-dating-web .discover-card .profile-showcase-card__chips .fact-pill--boost{
  background:rgba(245,196,81,.14);
  border-color:rgba(245,196,81,.3);
  color:var(--gold);
}

body.is-dating-web .discover-card__actions{
  margin-top:0;
}
body.is-dating-web .discover-card__actions .ghost-btn{
  background:var(--dt-raised);
  border:1px solid var(--dt-line-soft);
  border-radius:11px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  padding:9px 14px;
}
body.is-dating-web .discover-card__actions .ghost-btn:hover{
  border-color:rgba(255,61,113,.24);
  color:var(--text);
}
/* "Superlike" ist die eine hervorgehobene Aktion in dieser Karte (Premium-
   Feature) -> Gold statt Rose, analog zu .act--gold im Mockup und zu
   --gold:"nur Premium/Belohnung". Benoetigt Klasse ghost-btn--gold aus
   JS-Aenderung A/B unten. */
body.is-dating-web .discover-card__actions .ghost-btn--gold{
  background:var(--dt-grad-gold);
  border-color:transparent;
  color:#180D08;
}
body.is-dating-web .discover-card__actions .ghost-btn--gold:hover{
  filter:brightness(1.05);
  color:#180D08;
}
/* ==========================================================================
   Dating-Chat — nach Mockup-Abschnitt "CHAT"
   --------------------------------------------------------------------------
   Reale Struktur (renderMessagesLists() in app.js, Section #sectionDatingChat
   in app.html) bleibt unveraendert — nur Optik auf var(--card)/var(--dt-*)
   umgestellt, exakt wie im Vibes-Feed-Abschnitt. Scope bewusst zusaetzlich
   auf #sectionDatingChat gesetzt (nicht nur body.is-dating-web), weil
   .messenger-thread-card / .messenger-stage / .messenger-composer als
   BLANKE Klassen 1:1 im Social-Messenger (#sectionSocialMessages) und im
   Floating-Messages-Modal (messagesModal, dort per .messages-modal__threads /
   .messages-modal__stage schon eigens ueberschrieben) wiederverwendet werden.
   #sectionDatingChat als Ankestor schliesst beide sauber aus, ohne die
   Social-Optik oder das Modal ueber Spezifitaet zu kapern.
   ========================================================================== */

/* --- Aeussere Karte: chat-layout (Sidebar + Stage in EINEM Rahmen) ----- */
body.is-dating-web #sectionDatingChat .messenger-layout{
  grid-template-columns:300px minmax(0,1fr);
  gap:0;
  height:620px;
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 36px rgba(9,4,8,.34);
}

/* --- Sidebar / chat-list ------------------------------------------------ */
body.is-dating-web #sectionDatingChat .messenger-sidebar{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:none;
  border:none;
  border-right:1px solid var(--dt-line-soft);
  border-radius:0;
  padding:8px;
  gap:8px;
}
body.is-dating-web #sectionDatingChat .messenger-sidebar__head{
  flex:0 0 auto;
  padding:6px 6px 10px;
}
body.is-dating-web #sectionDatingChat .messenger-thread-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  gap:2px;
}

/* Tabs "Chats" / "Anfragen" */
body.is-dating-web #sectionDatingChat .inbox-tabs__btn{
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  color:var(--muted);
  font-size:12.5px;
}
body.is-dating-web #sectionDatingChat .inbox-tabs__btn.is-active{
  background:var(--dt-grad);
  border-color:transparent;
  color:#fff;
  box-shadow:none;
}

/* Zeilen (chatrow) — flach, Hover/Active statt eigener Karten-Rahmen,
   wie .chatrow.is-on,.chatrow:hover{background:var(--raised)} im Mockup */
body.is-dating-web #sectionDatingChat .messenger-thread-card{
  border:none;
  border-radius:12px;
  background:none;
  padding:11px 8px;
  gap:6px;
  transition:background .15s ease;
}
body.is-dating-web #sectionDatingChat .messenger-thread-card:hover,
body.is-dating-web #sectionDatingChat .messenger-thread-card.is-active,
body.is-dating-web #sectionDatingChat .messenger-thread-card--request.is-active{
  background:var(--dt-raised);
  transform:none;
  box-shadow:none;
}

body.is-dating-web #sectionDatingChat .messenger-thread-card__avatar,
body.is-dating-web #sectionDatingChat .messenger-thread-card__avatar--dating,
body.is-dating-web #sectionDatingChat .messenger-thread-card__avatar--request{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--dt-grad);
  box-shadow:none;
}

body.is-dating-web #sectionDatingChat .messenger-thread-card__title{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
body.is-dating-web #sectionDatingChat .messenger-thread-card__meta{
  color:var(--dt-muted-2);
  font-size:12px;
  line-height:1.4;
}
/* Zeitstempel/Status-Text (chat.status ist meist eine relative Zeit, kein
   fixer Badge-Text wie im Mockup — siehe Notiz unten). Bewusst gedaempft
   statt --dt-mint, da --dt-mint laut Token-Regeln nur fuer Online/Erfolg
   reserviert ist und dieses Feld meistens nur eine Uhrzeit zeigt. */
body.is-dating-web #sectionDatingChat .messenger-thread-card__time{
  color:var(--dt-muted-2);
  font-size:10px;
  font-weight:700;
}
body.is-dating-web #sectionDatingChat .messenger-thread-card__snippet{
  color:var(--dt-muted-2);
  font-size:11px;
  margin-left:56px;
}

/* Unread-Badge als kleine Verlaufs-Pille (.unread im Mockup) */
body.is-dating-web #sectionDatingChat .messenger-thread-card .icon-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:var(--dt-grad);
  font-size:9.5px;
  font-weight:800;
}
body.is-dating-web #sectionDatingChat .messenger-thread-card .icon-badge--inline{
  margin-top:0;
}

/* --- Thread-Panel / chat-thread ------------------------------------------ */
body.is-dating-web #sectionDatingChat .messenger-stage{
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  padding:0;
  min-height:0;
}
body.is-dating-web #sectionDatingChat .messenger-stage__head{
  padding:15px 20px;
  border-bottom:1px solid var(--dt-line-soft);
}
body.is-dating-web #sectionDatingChat .messenger-stage__avatar,
body.is-dating-web #sectionDatingChat .messenger-stage__avatar--dating,
body.is-dating-web #sectionDatingChat .messenger-stage__avatar--request{
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--dt-grad);
  box-shadow:none;
}
body.is-dating-web #sectionDatingChat .messenger-stage__title{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-size:16px;
  font-weight:700;
}
body.is-dating-web #sectionDatingChat .messenger-stage__meta{
  color:var(--dt-muted-2);
  font-size:12px;
}
body.is-dating-web #sectionDatingChat .messenger-stage__actions .ghost-btn{
  border-radius:999px;
}
body.is-dating-web #sectionDatingChat .messenger-stage__body{
  padding:18px 20px;
  overflow-y:auto;
  min-height:0;
  align-content:start;
}
body.is-dating-web #sectionDatingChat .messenger-stage__placeholder{
  align-self:center;
  justify-self:center;
  text-align:center;
  color:var(--dt-muted-2);
  font-size:12.5px;
  max-width:340px;
}

/* Bubbles */
body.is-dating-web #sectionDatingChat .message-bubble{
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  color:var(--text);
}
body.is-dating-web #sectionDatingChat .message-bubble--own{
  background:var(--dt-grad);
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 26px rgba(255,61,113,.22);
}

/* Composer (composerbar) */
body.is-dating-web #sectionDatingChat .messenger-stage__composer{
  padding:14px 20px;
  border-top:1px solid var(--dt-line-soft);
}
body.is-dating-web #sectionDatingChat .messenger-composer__icon{
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  color:var(--dt-blush);
}
body.is-dating-web #sectionDatingChat .messenger-composer__icon:hover{
  background:var(--dt-raised-2);
  border-color:rgba(255,61,113,.28);
}
body.is-dating-web #sectionDatingChat #datingMessageInput{
  border-radius:999px;
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  color:var(--text);
}
body.is-dating-web #sectionDatingChat #datingMessageInput::placeholder{
  color:var(--dt-muted-2);
}
body.is-dating-web #sectionDatingChat .messenger-composer .primary-btn{
  border-radius:999px;
  padding:11px 22px;
}

/* Anfragen-Detail (Requests-Tab) */
body.is-dating-web #sectionDatingChat .messenger-request-panel{
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
  border-radius:20px;
}
body.is-dating-web #sectionDatingChat .messenger-request-panel p{
  color:var(--muted);
}

/* --- Responsive: gleiche Bruchpunkte wie das bestehende .messenger-layout
   (Zeile 4156 / 4303 in styles.css), damit das Umbrechen auf Mobile/Tablet
   erhalten bleibt und nicht von der ID-Spezifitaet oben ausgehebelt wird. */
@media (max-width: 1080px){
  body.is-dating-web #sectionDatingChat .messenger-layout{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
  }
  body.is-dating-web #sectionDatingChat .messenger-sidebar{
    border-right:none;
    border-bottom:1px solid var(--dt-line-soft);
    max-height:320px;
  }
}


/* ==========================================================================
   Shop — Coin-Pakete (1:1 nach Mockup-Abschnitt "SHOP")
   Nur Farben/Formen/Typografie. Struktur, IDs, data-Attribute, Preis- und
   Produkttexte kommen unveraendert aus getShopPackages()/renderShopCards()
   in app.js — hier wird nichts davon angefasst.
   ========================================================================== */

body.is-dating-web #shopLeadCard.profile-lead-card{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
}
body.is-dating-web #shopLeadCard .lead-card__title{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  letter-spacing:-.01em;
}
body.is-dating-web #shopLeadCard .lead-card__meta{
  color:var(--dt-muted-2);
}

body.is-dating-web #shopGrid.settings-grid .discover-card--app{
  background:var(--card);
  border-color:var(--dt-line-soft);
}

body.is-dating-web .package-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(9,4,8,.34);
}

body.is-dating-web .package-card--featured{
  border-color:rgba(245,196,81,.4);
  background:linear-gradient(180deg, rgba(245,196,81,.08), var(--card) 42%);
  box-shadow:0 16px 36px rgba(9,4,8,.34), 0 0 0 1px rgba(245,196,81,.08) inset;
}

body.is-dating-web .package-card__eyebrow{
  color:var(--dt-muted-2);
}
body.is-dating-web .package-card--featured .package-card__eyebrow{
  color:var(--gold);
  position:absolute;
  top:-11px;
  right:16px;
  background:var(--dt-grad-gold);
  color:#180D08;
  padding:4px 10px;
  border-radius:999px;
  font-size:9px;
}

body.is-dating-web .package-card__title{
  color:var(--text);
  font-size:18px;
}

body.is-dating-web .package-card__price{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:800;
  letter-spacing:-.01em;
}

body.is-dating-web .package-card__meta{
  color:var(--dt-muted-2);
}

body.is-dating-web .package-card__list{
  list-style:none;
  padding-left:0;
}
body.is-dating-web .package-card__list li{
  position:relative;
  padding-left:20px;
}
body.is-dating-web .package-card__list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:var(--dt-mint);
  font-weight:800;
}

/* Kauf-Button bewusst PayPal-Blau wie im Mockup, statt der App-weiten
   Rose-Primaerfarbe -- signalisiert "sicherer Zahlungsanbieter", nur hier. */
body.is-dating-web #shopPackagesGrid .package-card__actions .primary-btn{
  background:linear-gradient(135deg,#0B4FA0,#0A3D7A);
  box-shadow:0 8px 22px rgba(11,79,160,.28);
}
body.is-dating-web #shopPackagesGrid .package-card__actions .primary-btn:hover{
  filter:brightness(1.08);
}


/* ==========================================================================
   Profil (eigenes Dating-Profil) — 1:1 nach Mockup-Abschnitt "PROFIL"
   Struktur (Sidebar-Identitaet, Hero mit Avatar/Facts/Bio/Aktion, Stats,
   Letzte-Beitraege) existiert bereits in #profileModal / renderProfileModal()
   in app.js; hier nur die Optik auf die Mockup-Bildsprache umgestellt.
   Layout/Grid unveraendert, nur Farben, Formen (Avatar rund) und Typografie —
   selbes Vorgehen wie beim Vibes-Feed weiter oben.
   ========================================================================== */

/* --- Modal-Rahmen: warmes Nachtlicht statt Indigo-Verlauf -------------- */
body.is-dating-web .profile-modal__dialog{
  background:
    radial-gradient(circle at top right, rgba(255,61,113,.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,123,84,.10), transparent 28%),
    linear-gradient(180deg, var(--card-2), var(--card));
  border-color:var(--dt-line-soft);
}
body.is-dating-web .profile-modal__nav{
  border-right-color:var(--dt-line-soft);
}
body.is-dating-web .profile-modal__content{
  background:none;
}
body.is-dating-web .profile-modal__nav .panel__sub,
body.is-dating-web .profile-modal__content .panel__sub{
  color:var(--muted);
}

/* --- Serifen-Display fuer Namen/Titel (wie Vibes-Karten) --------------- */
body.is-dating-web .profile-modal__nav .settings-modal__title,
body.is-dating-web .profile-modal__name,
body.is-dating-web .profile-mobile-hero__name{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  letter-spacing:-.015em;
}

/* --- Sidebar-Identitaetskarte (kompaktes Duplikat neben dem Hero) ------ */
body.is-dating-web .profile-modal__identity-card{
  background:var(--dt-raised);
  border-color:var(--dt-line-soft);
}
body.is-dating-web .profile-modal__avatar{
  border-radius:50%;
  background:var(--dt-grad);
  border:1px solid var(--line);
}

/* --- Mode-Switch (Social/Dating) im Profil-Fenster ---------------------- */
body.is-dating-web .profile-modal__nav .messages-mode-btn.is-active{
  background:var(--dt-grad);
  border-color:transparent;
  color:#fff;
}

/* --- Hero-Karte: Avatar, Name, Facts, Bio, Aktion ----------------------- */
body.is-dating-web .profile-mobile-hero{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:22px;
  box-shadow:0 16px 36px rgba(9,4,8,.34);
}
body.is-dating-web .profile-mobile-hero__avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--dt-grad);
  border:1px solid var(--line);
}
body.is-dating-web .profile-mobile-hero__status-dot{
  right:-1px;
  bottom:-1px;
  border-color:var(--card);
  background:var(--dt-muted-2);
}
body.is-dating-web .profile-mobile-hero__status-dot.is-online{
  background:var(--dt-mint);
}
body.is-dating-web .profile-mobile-hero__bio{
  color:var(--text);
}

/* Facts-Chips: neutral, ausser "Dating Profil"/"Dating Kontakt" (rose)
   und "Boost bereit" (gold) — Modifier-Klassen kommen aus dem JS-Edit unten,
   selbes Muster wie .dating-vibe-card__badges .fact-pill--intent/--boost. */
body.is-dating-web .profile-mobile-hero__facts .fact-pill{
  background:var(--dt-raised);
  border:1px solid var(--dt-line-soft);
  color:var(--muted);
  font-weight:800;
  letter-spacing:.02em;
}
body.is-dating-web .profile-mobile-hero__facts .fact-pill--intent{
  background:rgba(255,61,113,.12);
  border-color:rgba(255,61,113,.28);
  color:var(--dt-blush);
}
body.is-dating-web .profile-mobile-hero__facts .fact-pill--boost{
  background:rgba(245,196,81,.14);
  border-color:rgba(245,196,81,.3);
  color:var(--gold);
}
body.is-dating-web .profile-mobile-hero__facts .fact-pill--boost::before{
  content:"◆ ";
}

/* --- Stat-Karten: Posts / Antworten / Likes ----------------------------- */
body.is-dating-web .profile-mobile-stats__item{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
  border-radius:16px;
}

/* --- "Letzte Beitraege"-Panel + Mini-Post-Liste ------------------------- */
body.is-dating-web .profile-mobile-panel{
  background:var(--card);
  border:1px solid var(--dt-line-soft);
}
body.is-dating-web .profile-modal__mini-posts .mini-post{
  background:var(--dt-raised);
  border:1px solid var(--dt-line-soft);
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease;
}
body.is-dating-web .profile-modal__mini-posts .mini-post:hover{
  background:var(--dt-raised-2);
}

/* --- Sicherheitsfix 2026-09-13: bei ~1024px (zwischen Desktop- und der
   1080px-Kippschwelle) blieb .desktop-app-grid.is-locked zweispaltig mit
   minmax(640px,900px) als erster Spur, obwohl die vorhandene @media(max-
   width:1080px)-Regel schon auf eine Spalte zusammenklappen sollte - beide
   Regeln haben dieselbe Selektor-Spezifitaet, aus unklarem Grund gewann
   trotzdem die unbedingte statt der Media-Query-Regel. Auth-Spalte und
   Locked-Panel ueberlappten sich dadurch sichtbar (Text auf Text). !important
   erzwingt jetzt zuverlaessig die einspaltige Ansicht in diesem Bereich,
   unabhaengig von der eigentlichen Ursache. Betrifft social.html UND die
   neue Startseite gleichermassen. */
@media (max-width:1080px){
  body.is-dating-web .desktop-app-grid.is-locked{
    grid-template-columns:minmax(0,1fr) !important;
  }
  /* .locked-panel bleibt sonst per grid-column:2/3 auf eine implizite zweite
     Spalte gepinnt, obwohl der Grid nur noch eine Spalte hat - dadurch
     entsteht trotz obiger Regel weiterhin eine zweite (0 breite) Spur und
     Auth-Karte/Locked-Panel ueberlappen sich. */
  body.is-dating-web .desktop-app-grid.is-locked .locked-panel{
    grid-column:1 !important;
  }
  body.is-dating-web .auth-hero-card--compact{
    grid-template-columns:1fr !important;
  }
}