/* APPICS Pro — Luna-Demo + geteilte Bausteine.
   pl-* Praefix (Kollisions-Regel). Nutzt nur Tokens aus css/pro.css.
   Creator-Karte (gross + mini), Initialen-Avatare, Demo-Badges.
   Stempel 0923b713 (KIMI-B713-AUFLAGEN-20260923, 23.09.): B5 — Hero-Play-Knopf
   (.pro-hero .plv-play) unter 640px nach rechts, Subtitle links bleibt frei. */

.pl-creator *, .pl-creator-mini *, .pl-ava { box-sizing: border-box; }

/* ---------- Initialen-Avatar (ehrlich, keine erfundenen Gesichter) ---------- */
.pl-ava { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; flex-shrink: 0; color: #fff; font: 700 .875rem/1 var(--pro-font);
  background: linear-gradient(135deg, hsl(var(--pl-hue, 200) 45% 42%), hsl(var(--pl-hue, 200) 55% 30%)); }
/* Fan-FOTO-Avatar (10.09. SANDRO-PASS): <img> statt Initialen, gleiche Geometrie
   (Rundung/Groesse kommen von der Kontext-Klasse); faellt die Datei aus, tauscht
   der Delegate in pro-luna.js gegen den Initialen-Avatar. */
img.pl-ava { display: inline-block; object-fit: cover; object-position: center 20%; }

/* ---------- Creator-Karte (gross, N1-Herz) ---------- */
.pl-creator { }
/* overflow: hidden gehoert an die COVER (Clip an ihrer eigenen Box), NICHT an
   .pl-creator: dort schnitt er die Negative-Margin-Cover an der Panel-Kante ab
   und frass den Anfangsbuchstaben des Namens (Befund 09.09., Verify-Strip). */
.pl-creator-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 150px; margin: calc(-1 * var(--pro-space-3)) calc(-1 * var(--pro-space-3)) var(--pro-space-2);
  padding: var(--pro-space-2); background-size: cover; background-position: center 22%; border-radius: 8px 8px 0 0;
  overflow: hidden; }
.pl-creator-cover::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgb(13 19 31 / 0%) 30%, rgb(13 19 31 / 82%) 92%); }
.pl-creator-cover-less { background: linear-gradient(135deg, rgb(135 57 196 / 45%), rgb(18 24 38)); min-height: 110px; }
/* luna-card.jpg (4:5) als Today-Cover (10.09. SANDRO-PASS): deckt das
   Profilfoto-Hintergrundbild ab, solange deployt (data-fb-hide sonst). */
.pl-creator-cover-img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; }
.pl-creator-cover .pl-level, .pl-creator-cover .pl-creator-cover-name { z-index: 2; }
.pl-creator-cover-name { position: relative; color: #fff; font-size: 1.375rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 8px rgb(0 0 0 / 55%); }
.pl-level { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: rgb(120 221 217 / 92%);
  color: var(--pro-action-ink); font: 700 .75rem/1.4 var(--pro-font); }
.pl-level svg { width: 14px; height: 14px; }
.pl-creator-bio { margin: 0 0 var(--pro-space-2); color: var(--pro-muted); font-size: .75rem; }
.pl-creator-ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ---------- Creator-Karte (mini, N2/N4-Herz) ---------- */
.pl-creator-mini { display: flex; align-items: center; gap: var(--pro-space-2); margin-bottom: var(--pro-space-2); }
.pl-creator-mini .pl-creator-ava, .pl-creator-mini .pl-ava { width: 48px; height: 48px; }
.pl-creator-id { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.pl-creator-id b { color: var(--pro-ink); font-size: .875rem; font-weight: 700; }
.pl-creator-mini .pl-level { margin: 0; padding: 2px 8px; }

/* ---------- Social-Zahlen (IG/TikTok) ---------- */
.pl-creator-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pro-space-2); }
.pl-creator-mini + .pl-creator-socials, .pl-creator-socials { margin-top: 4px; }
.pl-soc { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px var(--pro-space-2);
  border: 1px solid var(--pro-line); border-radius: 8px; }
.pl-soc-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; flex-shrink: 0; color: var(--pro-ink); background: var(--pro-rail); }
.pl-soc-ic svg { width: 17px; height: 17px; }
.pl-soc-instagram { color: #e887b7; }
.pl-soc-tiktok { color: var(--pro-mint); }
.pl-soc-x { color: var(--pro-muted); }
.pl-soc b { display: block; color: var(--pro-ink); font-size: .875rem; line-height: 1.2; }
.pl-soc span { display: block; color: var(--pro-muted); font-size: .75rem; line-height: 1.3; }
/* ORDER19: Alterszeile einer Social-Zahl — vorhandener Token --muted (#8e92b2,
   css/app.css), kleinere Schrift als das Label; rein textuell, kein Touch-Ziel. */
.pl-soc .pl-soc-age { color: var(--muted, #8e92b2); font-size: .6875rem; margin-top: 1px; }

/* ---------- Fortschrittsbalken ("This month", Unlock) ---------- */
.pl-bar { position: relative; height: 10px; border-radius: 999px; background: var(--pro-rail); overflow: hidden; }
.pl-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--pl-pct, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--pro-mint), #a5ece3); }
.pl-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pro-space-2);
  margin-top: 8px; color: var(--pro-muted); font-size: .75rem; }
.pl-bar-row b { color: var(--pro-ink); font-size: .875rem; }

/* ---------- Lifecycle-Pills in Demo-Tabellen/Chats ---------- */
.pl-life { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font: 600 .75rem/1 var(--pro-font); border: 1px solid transparent; white-space: nowrap; }
/* KRITIK10 P5 (10.09.): derselbe Status-Farbcode wie die N2-Filter
   (pro-n2n4.css): New = Mint, Warm = Amber, Cooling = Blau, Expiring = Gelb,
   Lost = Grau. */
.pl-life-new { color: var(--pro-mint); border-color: rgb(120 221 217 / 40%); background: rgb(120 221 217 / 10%); }
.pl-life-warm { color: #f5a524; border-color: rgb(245 165 36 / 40%); background: rgb(245 165 36 / 10%); }
.pl-life-cooling { color: #6ea8fe; border-color: rgb(110 168 254 / 40%); background: rgb(110 168 254 / 10%); }
.pl-life-expiring { color: #e6c15c; border-color: rgb(230 193 92 / 40%); background: rgb(230 193 92 / 10%); }
.pl-life-lost { color: #8b93a1; border-color: rgb(139 147 161 / 40%); background: rgb(139 147 161 / 10%); }
.pl-life-vip { color: #d8b4fe; border-color: rgb(216 180 254 / 40%); background: rgb(216 180 254 / 10%); }

/* ---------- Demo-Schalter (Toggle, rein visuell unter DEMO-Band) ---------- */
.pl-toggle { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: 999px;
  background: var(--pro-line); flex-shrink: 0; transition: background var(--pro-motion); }
.pl-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform var(--pro-motion); }
.pl-toggle.is-on { background: var(--pro-mint); }
.pl-toggle.is-on::after { transform: translateX(18px); }

@media (max-width: 700px) {
  .pl-creator-cover { min-height: 120px; }
  .pl-creator-socials { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tap-Play-Knopf (0915vidload, 15.09.) ----------
   Mobil (<=640px) starten Nicht-Hero-Videos erst per Tap (Lazy-Manager in
   pro-luna.js haengt den Knopf an den Video-Container). Gleiche Optik wie
   .pvf-play in pro-vip.css (Feed-Karten nutzen weiterhin ihren eigenen). */
.plv-play { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; align-items: center;
  justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgb(10 14 16 / 62%); color: #fff; cursor: pointer; }
.plv-play svg { width: 16px; height: 16px; }
.plv-play:hover { background: rgb(10 14 16 / 80%); }
.plv-play:focus-visible { outline: 2px solid var(--pro-mint); outline-offset: 2px; }
/* B674-B5 (23.09.2026): auf <=640px lag der Tap-Play-Knopf unten links auf der
   umbrochenen Hero-Subtitle (gemessen 26x19px auf #/pro/earnings @390) —
   die Subtitle ist linksbuendig, unten rechts ist frei. */
@media (max-width: 640px) {
  .pro-hero .plv-play { left: auto; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .plv-play { display: none; }
}