/* APPICS Pro — S5 Earnings & Share (#/pro/earnings), K02-stage-S5 als Massstab.
   pe-* Praefix (Kollisions-Regel). Nutzt nur Tokens aus css/pro.css
   (Sandro-Abstaende --pro-space-*, Panel/Lines/Mint aus dem K02-Raster).
   Stempel 0910sym: Agent-Attribution (A6).
   Stempel 0923b713 (KIMI-B713-AUFLAGEN-20260923, 23.09.): B2 — Donut-Legende
   stapelt jetzt bis 1500px (Defekt endete erst bei ~1450px) + Rueckhalt
   (Legenden-Zeilen duerfen schrumpfen/umbrechen statt aus der Karte zu laufen). */

.pro-page--earnings .pro-content { padding-top: 0; }
/* Summary-Karte liegt wie in der Referenz halb auf dem Hero-Foto. */
.pe { position: relative; z-index: 1; margin-top: -88px; display: grid; gap: 16px; }

.pe-toprow { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.pe-range-note { flex-basis: 100%; text-align: right; margin-top: 6px; }
.pe-range { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--pro-space-2);
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 10px; color: var(--pro-ink); }
.pe-range-ic { display: inline-flex; color: var(--pro-muted); }
.pe-range-ic svg { width: 16px; height: 16px; }
.pe-range select { min-height: 42px; border: 0; background: transparent; color: var(--pro-ink);
  font: 600 var(--pro-type-label)/1.4 var(--pro-font); }
.pe-range select:focus-visible { outline: 2px solid var(--pro-focus); outline-offset: 2px; }
.pe-range option { background: var(--pro-panel); color: var(--pro-ink); }

/* ---------- Summary (Total / Available / Withdraw) ---------- */
.pe-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--pro-space-4);
  padding: var(--pro-space-4) var(--pro-space-5); background: var(--pro-panel);
  border: 1px solid var(--pro-line); border-radius: var(--pro-radius);
  box-shadow: 0 12px 40px rgb(0 0 0 / 35%); }
.pe-summary-total { display: grid; gap: 4px; align-content: start; }
.pe-total { font-size: 2.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--pro-ink); }
.pe-trend { display: inline-flex; align-items: center; gap: 6px; color: var(--pro-mint); font-size: var(--pro-type-label); font-weight: 600; }
.pe-trend svg { width: 15px; height: 15px; }
.pe-summary-avail { display: grid; gap: 6px; align-content: start; justify-items: start;
  padding-left: var(--pro-space-4); border-left: 1px solid var(--pro-line); }
.pe-avail { font-size: 1.375rem; font-weight: 700; color: var(--pro-ink); }
.pe-withdraw { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 var(--pro-space-5); margin-top: 6px; border: 0; border-radius: 8px;
  background: var(--pro-mint); color: var(--pro-action-ink); font: 700 var(--pro-type-label)/1.4 var(--pro-font); }
.pe-withdraw:hover:not(:disabled) { background: var(--pro-mint-soft); }
.pe-withdraw:disabled { background: var(--pro-line); color: var(--pro-muted); cursor: not-allowed; }

.pe-muted { color: var(--pro-muted); font-size: var(--pro-type-label); }
.pe-note { font-size: var(--pro-type-small); }

/* ---------- Grid unter der Summary ----------
   10.09. SANDRO-PASS: Spalten strecken, die letzte Karte je Spalte waechst, bis
   alle drei Spalten auf gleicher Hoehe enden. */
.pe-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, .9fr); gap: 16px; align-items: stretch; }
.pe-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; height: 100%; }
.pe-col > section:last-child { flex: 1 0 auto; }
.pe-share { height: 100%; }
.pe-panel { padding: var(--pro-space-4); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pe-panel h2 { margin: 0 0 var(--pro-space-3); font-size: 1.0625rem; line-height: 1.35; color: var(--pro-ink); }
.pe-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pro-space-2); margin-bottom: var(--pro-space-2); }
.pe-panel-head h2 { margin: 0; }
.pe-linklike { border: 0; background: transparent; color: var(--pro-mint); font: 600 var(--pro-type-label)/1.4 var(--pro-font);
  min-height: 32px; padding: 0 4px; }
.pe-linklike:hover { color: var(--pro-mint-soft); }

/* ---------- Revenue by stream (Donut + Legende) ----------
   10.09. SANDRO-PASS: Donut doppelt so gross (>= 220px), Legende rechts. */
.pe-streams-in { display: flex; align-items: center; gap: var(--pro-space-2); }
.pe-donut { width: 220px; height: 220px; flex-shrink: 0; }
.pe-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; flex: 1; }
.pe-legend li { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--pro-muted); }
.pe-legend b { margin-left: auto; color: var(--pro-ink); font-weight: 600; white-space: nowrap; }
.pe-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pe-dot, var(--pro-mint)); flex-shrink: 0; }

/* ---------- Last 30 days (Balken je Tag, 10.09.) ---------- */
.pe-days .pe-panel-head { margin-bottom: var(--pro-space-2); }
.pe-days-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.pe-days-bars i { flex: 1 1 0; min-width: 0; height: var(--pe-h, 10%); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #a5ece3, rgb(120 221 217 / 45%)); }

/* ---------- Payouts ---------- */
.pe-next-label { margin: 0; }
.pe-next-date { margin: 2px 0 0; color: var(--pro-mint); font-weight: 600; font-size: .9375rem; }
.pe-next-amount { margin: 2px 0 var(--pro-space-3); color: var(--pro-ink); font-size: 1.375rem; font-weight: 700; }
.pe-dest { display: flex; align-items: center; gap: var(--pro-space-2); padding: 10px 0; border-top: 1px solid var(--pro-line); }
.pe-dest-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--pro-rail); color: var(--pro-ink); flex-shrink: 0; font-weight: 800; }
.pe-dest-ic img { width: 18px; height: 18px; object-fit: contain; }
.pe-dest-stripe { background: rgb(99 91 255 / 18%); color: #8f88ff; }
.pe-dest-id { min-width: 0; display: grid; gap: 1px; }
.pe-dest-id b { color: var(--pro-ink); font-size: var(--pro-type-label); font-weight: 600; }
.pe-dest-id span { color: var(--pro-muted); font-size: var(--pro-type-small); }
.pe-dest-status { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--pro-line);
  color: var(--pro-muted); font-size: var(--pro-type-small); white-space: nowrap; }
.pe-dest-status.is-ready { color: var(--pro-mint); border-color: rgb(120 221 217 / 45%); }

/* ---------- Agent recommendation ---------- */
.pe-agent { padding: var(--pro-space-3); border: 1px solid rgb(120 221 217 / 45%); border-radius: var(--pro-radius);
  background: rgb(120 221 217 / 6%); }
.pe-agent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pe-agent-head h2 { margin: 0; font-size: var(--pro-type-small); letter-spacing: .08em; color: var(--pro-mint); font-weight: 700; }
.pe-agent-ic { display: inline-flex; color: var(--pro-mint); }
.pe-agent-ic svg { width: 16px; height: 16px; }
.pe-agent-text { margin: 0 0 var(--pro-space-2); color: var(--pro-ink); font-size: var(--pro-type-label); line-height: 1.55; }
.pe-agent-acts { display: flex; gap: var(--pro-space-2); }
.pe-accept { min-height: 40px; padding: 0 var(--pro-space-4); border: 0; border-radius: 8px;
  background: var(--pro-mint); color: var(--pro-action-ink); font: 700 var(--pro-type-label)/1.4 var(--pro-font); }
.pe-accept:hover { background: var(--pro-mint-soft); }
.pe-dismiss { min-height: 40px; padding: 0 var(--pro-space-4); border: 1px solid var(--pro-line); border-radius: 8px;
  background: transparent; color: var(--pro-muted); font: 600 var(--pro-type-label)/1.4 var(--pro-font); }
.pe-dismiss:hover { color: var(--pro-ink); }
.pe-note-line { margin: 10px 0 0; color: var(--pro-muted); font-size: var(--pro-type-small); }

/* ---------- Share Hub ---------- */
.pe-share > .pe-muted { margin: calc(-1 * var(--pro-space-2)) 0 var(--pro-space-3); }
.pe-card { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: var(--pro-space-3);
  border: 1px solid var(--pro-line); aspect-ratio: 4 / 5; background: var(--pro-rail); }
.pe-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Share-Hero = Video-Band (Winchester 09.09. 22:10), Poster-Fallback darunter. */
.pe-share-hero { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: var(--pro-space-3);
  border: 1px solid var(--pro-line); aspect-ratio: 21 / 9; background: var(--pro-rail); }
.pe-share-hero-img, .pe-share-hero-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; }
.pe-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(13 19 31 / 24%) 0%, rgb(13 19 31 / 0%) 34%, rgb(13 19 31 / 88%) 92%); }
.pe-card-badge { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: rgb(13 19 31 / 62%); border: 1px solid rgb(120 221 217 / 55%);
  color: var(--pro-mint); font: 700 .6875rem/1.4 var(--pro-font); letter-spacing: .06em; }
.pe-card-badge svg { width: 13px; height: 13px; }
.pe-card-in { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 3px; justify-items: start; }
.pe-card-in > b { font-size: 1.5rem; font-weight: 800; letter-spacing: .01em; color: #fff; line-height: 1.1; }
.pe-card-when { color: #fff; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.pe-card-seats { margin-top: 6px; padding: 3px 12px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px;
  color: #fff; font: 700 .6875rem/1.6 var(--pro-font); letter-spacing: .08em; text-transform: uppercase; }
.pe-card-name { margin-top: 8px; color: #fff; font-size: 1.125rem; font-weight: 600; font-style: italic; }
.pe-card-brand { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: rgb(255 255 255 / 85%);
  font: 700 .6875rem/1.4 var(--pro-font); letter-spacing: .14em; }
.pe-card-brand img { width: 14px; height: 14px; object-fit: contain; }

/* Sozial-Zeilen (10.09. SANDRO-PASS): kompakte 44px-Reihen mit 8px Abstand und
   MARKENFARBEN-Icon-Chips (Instagram-Verlauf, TikTok, X, YouTube rot, LinkedIn
   blau) wie in der K02-S5-Referenz — keine graue lange Liste. */
.pe-socs { display: grid; gap: 8px; margin-bottom: 8px; }
.pe-soc, .pe-tool { display: flex; align-items: center; gap: var(--pro-space-2); width: 100%; min-height: 44px;
  padding: 0 var(--pro-space-2); border: 1px solid var(--pro-line); border-radius: 10px; background: transparent;
  color: var(--pro-ink); font: 600 var(--pro-type-label)/1.4 var(--pro-font); text-align: left; }
.pe-soc:hover:not(:disabled), .pe-tool:hover { background: var(--pro-rail); }
.pe-soc:disabled { color: var(--pro-muted); cursor: not-allowed; }
.pe-soc-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--pro-rail); color: var(--pro-ink); flex-shrink: 0; }
.pe-soc-ic svg { width: 16px; height: 16px; }
.pe-soc-ic.pe-soc-instagram { color: #fff; background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 62%, #962fbf 85%, #4f5bd5); }
.pe-soc-ic.pe-soc-tiktok { color: #25f4ee; background: #010101; border: 1px solid var(--pro-line); }
.pe-soc-ic.pe-soc-youtube { color: #fff; background: #f00; }
.pe-soc-ic.pe-soc-linkedin { color: #fff; background: #0a66c2; }
.pe-soc-ic.pe-soc-x { color: #fff; background: #000; border: 1px solid var(--pro-line); }

/* Copy link + QR NEBENEINANDER (10.09. SANDRO-PASS). */
.pe-share-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.pe-qr { display: flex; align-items: center; gap: var(--pro-space-2); min-height: 44px; padding: 6px var(--pro-space-2);
  border: 1px solid var(--pro-line); border-radius: 10px; color: var(--pro-ink); font: 600 var(--pro-type-label)/1.4 var(--pro-font); }
.pe-qr-img { margin-left: 4px; width: 56px; height: 56px; border-radius: 6px; background: #fff; padding: 3px; }
.pe-qr .pe-note { margin-left: auto; }
.pe-link-line { margin: 10px 0 0; color: var(--pro-mint); font-size: var(--pro-type-label); font-weight: 600; word-break: break-all; }

.pe-tracks-t { margin: var(--pro-space-3) 0 8px; font-size: var(--pro-type-label); color: var(--pro-ink); }
.pe-tracks { display: grid; gap: 8px; }
.pe-track { display: flex; align-items: center; gap: 10px; }
.pe-track img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; object-position: center 22%; flex-shrink: 0; }
.pe-track-id { min-width: 0; display: grid; gap: 1px; }
.pe-track-id b { color: var(--pro-ink); font-size: var(--pro-type-label); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 22.09. (0922trackmini): auch ein langer Artist-Einzel-Token (kein
   Leerzeichen) darf die Zeile in keiner Breite sprengen — umbrechen statt
   ueberlaufen. */
.pe-track-id span { color: var(--pro-muted); font-size: var(--pro-type-small); overflow-wrap: anywhere; }
.pe-track-share { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--pro-line); border-radius: 9px; background: transparent; color: var(--pro-mint); flex-shrink: 0; }
.pe-track-share:hover { background: var(--pro-rail); }
.pe-track-share svg { width: 16px; height: 16px; }

@media (max-width: 1180px) {
  .pe-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pe-share { grid-column: 1 / -1; }
  /* B674-B2 (23.09.2026, Kimi Nachkontrolle): Donut (fix 220px) + Legende
     nebeneinander passen in die halbe Spalte nicht (gemessen 768px) — die
     Legende ragte ueber den Kartenrand in das Payouts-Panel ("M…", "Pa…",
     "1:…" abgeschnitten). Wie auf <=700px: untereinander stapeln. */
  .pe-streams-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  /* Mobil keine Ueberlappung: die Nav wird zur Streifen-Navigation ueber dem
     Content, ein Negativ-Margin wuerde sie zudecken. */
  .pro-page--earnings .pro-content { padding-top: var(--pro-space-3); }
  .pe { margin-top: 0; }
  .pe-summary { grid-template-columns: minmax(0, 1fr); gap: var(--pro-space-3); padding: var(--pro-space-3); }
  .pe-summary-avail { padding-left: 0; border-left: 0; border-top: 1px solid var(--pro-line); padding-top: var(--pro-space-3); }
  .pe-total { font-size: 2rem; }
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-streams-in { flex-direction: column; align-items: flex-start; }
}

/* B713-B2 (23.09.2026, Auflage aus todoroki B700): der Defekt reicht ueber den
   1180er-Block hinaus — im 3-Spalten-Layout ragt der Legenden-INHALT bis ~1450px
   aus der Karte (gemessen: 111px @1181, 42px @1350, 4px @1440, 0 ab ~1450).
   Derselbe Stapel wie <=1180, fuer die ganze Bandbreite bis 1500px — die 50px
   Marge deckt laengere Betraege auf echten Konten (die Nullstelle wandert mit
   der Breite der Betrags-Spalte). */
@media (min-width: 1181px) and (max-width: 1500px) {
  .pe-streams-in { flex-direction: column; align-items: flex-start; }
}
/* Rueckhalt auf JEDER Breite: Zeilen duerfen schrumpfen und am Wort umbrechen,
   statt aus der Karte zu laufen (greift nur, wenn der Platz nicht reicht;
   mit den jetzigen Daten unveraendert, gemessen 1460-1600: einzeilig). */
.pe-legend li { min-width: 0; }
.pe-legend .pe-legend-l { min-width: 0; }

/* ---------- KRITIK10 (10.09.): P8 Fuellung + P10 VIP-LIVE-Videokarte ---------- */
/* VIP-LIVE-Karte = Hochkant-Video (Poster-Fallback darunter), Overlays unveraendert. */
.pe-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Top earning days (3 Karten: Rang, Datum+Ausloeser, Betrag). */
.pe-topdays-in { display: grid; gap: 8px; }
.pe-topday { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--pro-line);
  border-radius: 10px; background: var(--pro-bg); }
.pe-topday-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgb(120 221 217 / 14%); color: var(--pro-mint);
  font: 800 .75rem/1 var(--pro-font); flex-shrink: 0; }
.pe-topday-id { flex: 1 1 auto; min-width: 0; display: grid; }
.pe-topday-id b { color: var(--pro-ink); font-size: .8125rem; }
.pe-topday-id span { color: var(--pro-muted); font-size: .6875rem; }
.pe-topday-amt { color: var(--pro-ink); font-size: .8125rem; font-variant-numeric: tabular-nums; }
/* Revenue by product (horizontale Balken). */
.pe-products-in { display: grid; gap: 10px; }
.pe-product { display: grid; grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pe-product-lab { color: var(--pro-muted); font-size: .75rem; }
.pe-product-track { display: block; height: 8px; border-radius: 999px; background: var(--pro-rail); overflow: hidden; }
.pe-product-track i { display: block; height: 100%; border-radius: 999px; background: var(--pe-bar, var(--pro-mint)); }
.pe-product-val { color: var(--pro-ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
/* Upcoming (Icon-Zeilen). */
.pe-upcoming-in { display: grid; gap: 10px; }
.pe-up { display: flex; align-items: center; gap: 10px; }
.pe-up-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: rgb(120 221 217 / 12%); color: var(--pro-mint); flex-shrink: 0; }
.pe-up-ic svg { width: 15px; height: 15px; }
.pe-up-id { min-width: 0; display: grid; }
.pe-up-id b { color: var(--pro-ink); font-size: .75rem; }
.pe-up-id span { color: var(--pro-muted); font-size: .6875rem; }
/* Fan milestones (Manifest-Avatare). */
.pe-miles-in { display: grid; gap: 10px; }
.pe-mile { display: flex; align-items: center; gap: 10px; }
.pe-mile-ava { width: 32px; height: 32px; font-size: .625rem; flex-shrink: 0; }
.pe-mile-id { flex: 1 1 auto; min-width: 0; display: grid; }
.pe-mile-id b { color: var(--pro-ink); font-size: .75rem; }
.pe-mile-id span { color: var(--pro-muted); font-size: .6875rem; }
.pe-mile-when { color: var(--pro-muted); font-size: .6875rem; white-space: nowrap; }

/* A6 Agent-Attribution (10.09., Stempel 0910sym): "Yuna · business". */
.pe-agent-by { margin: 0 0 6px; font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pro-muted); }

/* 0922textkasten (Regel und Messwerte: css/pro.css, Abschnitt 0922textkasten).
   `minmax(0, 1fr) auto` gab der QR-Spalte ihre volle Max-Content-Breite und
   liess dem Knopf 30 px — beim leeren Konto steht dort statt des 56-px-Bildes
   der Text "Not available yet", deshalb war es dort am schlimmsten. Jetzt
   teilen sich beide den Platz und stapeln, wenn er nicht reicht. */
.pe-share-tools { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- 0922leergraph (22.09., Winchester 19:5x) ----------
   Die fuenf Farben des Einnahmen-Diagramms lagen bisher als Literale IM
   Datensatz (js/pro-luna.js:1091-1095) — im Leerzustand gibt es keinen
   Datensatz, also gab es auch keine Farben. Jetzt nennt jedes Segment direkt
   ein vorhandenes Token (js/pro-earnings.js EMPTY_TOKENS).
   Winchesters Grenze: das Leer-Diagramm darf nie wie Einnahmen aussehen —
   deshalb sind die Segmente gleich gross, gedaempft und durch eine Luecke
   getrennt, und jeder Wert ist ein Gedankenstrich.
   graphen-v2 (Deku 22.09./23.09., NO-GO yoruichi "Farbvertrag" + byakuya "Alias"):
   kein Literal und kein neues Token, auch kein Alias — die Segmente verweisen
   direkt auf --pro-mint/--pro-stage (css/pro.css) und --teal/--muted/--red
   (css/app.css). 1+2 sind die Farben des Daten-Diagramms; 3-5 der naechste
   Hue, den die beiden Stylesheets fuehren (Blau-Grau, Stage-Violett, Rot). */
.pe-donut-empty-seg { opacity: .32; }
.pe-donut-empty-mid { fill: var(--pro-muted); font: 600 1.25rem/1 var(--pro-font); opacity: .8; }
.pe-streams-empty .pe-dot { opacity: .45; }
.pe-streams-empty .pe-empty-val { color: var(--pro-muted); font-weight: 600; }