/* APPICS Pro — N2 Fan-Liste + N4 Zufluss.
   Nutzt ausschliesslich die Tokens aus css/pro.css; eigene Klassen mit
   pn2-/pn4-Praefix (Klassen-Kollisions-Regel). Gemeinsame Bausteine (pn1-panel,
   pn1-empty, pn1-kpi, pn1-btn, pn1-soon, pn1-agent-*) kommen aus css/pro-n1n3.css
   (immer zusammen geladen). Typo-Leiter: 22 / 14 / 12.
   Vorlagen: N2-fans-list.png, N4-inflow.png.
   Stempel 0910sym: Superfans-Karte (A2). */

.pn2 *, .pn4 * { box-sizing: border-box; }
.pn2 svg, .pn4 svg { flex-shrink: 0; }
/* Leerzustand-Text darf auf schmalen Screens umbrechen statt ueberzulaufen. */
.pn2 .pn1-empty > div, .pn4 .pn1-empty > div { min-width: 0; }
.pn2 .pn1-btn:disabled, .pn4 .pn1-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- N2: Status-Pills ---------- */
.pn2-status { display: flex; flex-wrap: wrap; gap: var(--pro-space-1); margin-bottom: var(--pro-space-3); }
.pn2-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 var(--pro-space-2); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 8px; color: var(--pro-muted); font-size: .75rem; }
.pn2-pill b { color: var(--pro-ink); font-weight: 700; }
/* KRITIK10 P5 (10.09.): Status-Farbcode — New = Mint, Warm = Amber,
   Cooling = Blau, Expiring = Gelb, Lost = Grau. Derselbe Code liegt auf den
   Filter-Punkten (.pn2-fdot) und den Fan-Zeilen (pl-life in pro-luna.css). */
.pn2-dot, .pn2-fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--pro-muted); flex-shrink: 0; }
.pn2-pill-new .pn2-dot, .pn2-filter-new .pn2-fdot { background: var(--pro-mint); }
.pn2-pill-warm .pn2-dot, .pn2-filter-warm .pn2-fdot { background: #f5a524; }
.pn2-pill-cooling .pn2-dot, .pn2-filter-cooling .pn2-fdot { background: #6ea8fe; }
.pn2-pill-expiring .pn2-dot, .pn2-filter-expiring .pn2-fdot { background: #e6c15c; }
.pn2-pill-lost .pn2-dot, .pn2-filter-lost .pn2-fdot { background: #8b93a1; }
/* aktiver Filter farbig gefuellt (KRITIK10 P5) */
.pn2-filter { border-radius: 8px; }
.pn2-filter-all:has(input:checked) { background: rgb(120 221 217 / 10%); }
.pn2-filter-new:has(input:checked) { background: rgb(120 221 217 / 12%); }
.pn2-filter-warm:has(input:checked) { background: rgb(245 165 36 / 12%); }
.pn2-filter-cooling:has(input:checked) { background: rgb(110 168 254 / 12%); }
.pn2-filter-expiring:has(input:checked) { background: rgb(230 193 92 / 12%); }
.pn2-filter-lost:has(input:checked) { background: rgb(139 147 161 / 12%); }

/* ---------- N2/N4: Layout ----------
   10.09. SANDRO-PASS: Spalten strecken (links wie rechts enden auf gleicher
   Hoehe); die Fuell-Panels (N4: Fans by source links / Agent rechts) wachsen. */
.pn2-grid, .pn4-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pro-space-3); align-items: stretch; }
.pn2-main, .pn4-main { min-width: 0; display: flex; flex-direction: column; gap: var(--pro-space-3); height: 100%; }
.pn2-main > *, .pn4-main > * { min-width: 0; }
.pn4-main > .pn4-bysource { flex: 1 0 auto; }
.pn2-side, .pn4-side { display: flex; flex-direction: column; gap: var(--pro-space-3); min-width: 0; height: 100%; }
.pn4-side > .pn4-agentp { flex: 1 0 auto; }
/* Rechte KPI-Karten gleich hoch. */
.pn4-kpis { display: grid; gap: var(--pro-space-3); grid-auto-rows: 1fr; }

/* ---------- N2/N4: Werkzeugzeile (Suche, Sortierung, Zeitraum) ---------- */
.pn2-tools { display: flex; flex-wrap: wrap; gap: var(--pro-space-2); align-items: center; }
.pn2-search { flex: 1 1 260px; display: flex; align-items: center; gap: var(--pro-space-2); min-height: var(--pro-control-height); padding: 0 var(--pro-space-2); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 8px; color: var(--pro-muted); }
.pn2-search-ic { display: inline-flex; }
.pn2-search-ic svg { width: 20px; height: 20px; }
.pn2-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--pro-ink); font: var(--pro-type-label)/1.4 var(--pro-font); }
.pn2-search input:focus-visible { outline: none; }
.pn2-search:focus-within { outline: 2px solid var(--pro-focus); outline-offset: 4px; }
.pn2-search input:disabled { cursor: not-allowed; }
.pn2-sort { display: inline-flex; align-items: center; gap: var(--pro-space-2); }
.pn2-sort-lab { color: var(--pro-muted); font-size: .75rem; }
.pn2-sort select { min-height: var(--pro-control-height); padding: 0 var(--pro-space-2); border: 1px solid var(--pro-line); border-radius: 8px; background: var(--pro-panel); color: var(--pro-ink); font: var(--pro-type-label)/1.4 var(--pro-font); }
.pn2-sort select:disabled { color: var(--pro-muted); cursor: not-allowed; }
.pn4-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--pro-space-3); }

/* ---------- N2/N4: Tabellen ---------- */
.pn2-tablewrap { padding: var(--pro-space-3); background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: var(--pro-radius); overflow-x: auto; }
.pn2-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
/* 0922textkasten: `overflow-wrap: break-word` trennte die Spaltenkoepfe MITTEN
   IM WORT — headless gemessen stand am 22.09. "Last messag/e" und "Packa/ges".
   Ein Kopf darf umbrechen, aber nur zwischen Woertern; die eine Spalte, die zu
   eng war ("Packages", 58 px), bekommt die Breite, die ihr Wort braucht. */
.pn2-table th { padding: 0 8px var(--pro-space-2); border-bottom: 1px solid var(--pro-line); color: var(--pro-muted); font-size: .75rem; font-weight: 600; text-align: left; white-space: normal; overflow-wrap: normal; }
.pn2-table th:first-child, .pn2-table td:first-child { padding-left: 2px; }
.pn2-table-empty { margin-top: var(--pro-space-3); }
.pn2-foot { margin: var(--pro-space-2) 2px 0; color: var(--pro-muted); font-size: .75rem; }
.pn4-tablewrap { margin-top: var(--pro-space-2); padding: 0; border: 0; background: transparent; border-radius: 0; }

/* ---------- N2: Agent + Filter ---------- */
.pn2-agent-head { margin-bottom: var(--pro-space-2); }
.pn2-agent-empty { margin-top: var(--pro-space-2); }
.pn2-review { margin-top: var(--pro-space-3); width: 100%; justify-content: center; }
.pn2-review .pn1-soon { margin-left: 8px; }
.pn2-filters { display: grid; gap: 4px; }
.pn2-filter { display: flex; align-items: center; gap: var(--pro-space-2); min-height: 48px; padding: 0 4px; color: var(--pro-muted); font-size: .875rem; }
/* 0925radioring (25.09., Winchester "was sind die weissen Punkte?"): der NATIVE Radio-Knopf
   rendert unausgewaehlt als weisse Scheibe auf dem dunklen Panel (Browser color-scheme light).
   Eigene Zeichnung: hohler Ring; ausgewaehlt Mint-Ring + Punkt (wie der aktive Filter bisher). */
.pn2-filter input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / 28%); background: transparent;
  display: inline-grid; place-content: center; cursor: pointer; }
.pn2-filter input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pro-mint); transform: scale(0); }
.pn2-filter input:checked { border-color: var(--pro-mint); }
.pn2-filter input:checked::before { transform: scale(1); }
.pn2-filter input:focus-visible { outline: 2px solid var(--pro-mint); outline-offset: 2px; }
.pn2-filter input:disabled { cursor: not-allowed; opacity: .5; }
.pn2-filter span { flex: 1; color: var(--pro-ink); }
.pn2-filter b { color: var(--pro-muted); font-weight: 600; font-size: .75rem; }

/* ---------- N4: Chart + KPIs + Source links ---------- */
.pn4-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pro-space-2); }
.pn4-chart-head .pn1-panel-t { margin: 0; }
/* Range-Tabs als .seg-Segmentkontrolle (Sandro-Kodex: Toggles = .seg). */
.pn4-tabs.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--pro-rail);
  border: 1px solid var(--pro-line); border-radius: 999px; }
.pn4-tab { min-height: 48px; padding: 0 var(--pro-space-2); border: 0; border-radius: 999px;
  background: transparent; color: var(--pro-muted); font: 600 .75rem/1 var(--pro-font); cursor: pointer; }
.pn4-tab:hover:not(:disabled) { color: var(--pro-ink); }
.pn4-tab.is-active { background: var(--pro-panel); color: var(--pro-ink); box-shadow: inset 0 0 0 1px var(--pro-line); }
.pn4-tab:disabled { cursor: not-allowed; }
.pn4-big { display: flex; align-items: baseline; gap: var(--pro-space-2); margin: var(--pro-space-2) 0 0; }
.pn4-big b { color: var(--pro-ink); font-size: 1.375rem; font-weight: 700; }
.pn4-big span { color: var(--pro-muted); font-size: .75rem; }
.pn4-chart-empty { min-height: 220px; align-items: center; }
/* Chart 320px mit Achsen (10.09.): y-Labels/Gridlines/x-Labels. Mindesthoehe
   fix, damit die geforderten >= 320px unabhaengig von der Spaltenbreite stehen. */
.pn4-chart-svg { display: block; width: 100%; height: auto; min-height: 320px; margin-top: var(--pro-space-2); }
.pn4-grid-l { stroke: var(--pro-line); stroke-width: 1; stroke-dasharray: 3 4; }
.pn4-axis-y, .pn4-axis-x { fill: var(--pro-muted); font-size: 11px; }
.pn4-mark-l { stroke: var(--pro-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.pn4-chart-note { fill: var(--pro-ink); font-size: 12px; font-weight: 600; }
.pn4-chart-note-sub { fill: var(--pro-muted); font-weight: 400; }
.pn4-kpi { gap: 6px; }
.pn4-src-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--pro-space-2); }
.pn4-src-head .pn1-panel-t { margin-bottom: 4px; }
.pn4-src-head .pn1-btn { flex-shrink: 0; }
.pn4-soon-dark { border-color: rgb(13 19 31 / 35%); color: var(--pro-action-ink); }
/* Source-Tabelle: Icon-Spalte 44px, Zeilen gleich hoch. */
.pn4-src .pn2-table th:first-child, .pn4-src .pn2-table td.pn4-src-iconcell { width: 44px; padding-right: 0; }
.pn4-src .pn2-table td { height: 64px; }
/* Fans by source (zweites Panel links, 10.09.) */
.pn4-bysource .pn1-panel-t { margin-bottom: var(--pro-space-2); }
.pn4-bars { display: grid; gap: 10px; }
.pn4-bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; gap: var(--pro-space-2); }
.pn4-bar-lab { color: var(--pro-ink); font-size: .8125rem; }
.pn4-bar-track { display: block; height: 10px; border-radius: 999px; background: var(--pro-rail); overflow: hidden; }
.pn4-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pro-mint), #a5ece3); }
.pn4-bar-val { color: var(--pro-muted); font-size: .8125rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pn2-grid, .pn4-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pn2-status { gap: 6px; }
  .pn2-pill { min-height: 32px; }
  .pn2-tools { flex-direction: column; align-items: stretch; }
  .pn2-search { flex: 0 1 auto; }
  .pn2-sort { justify-content: space-between; }
  .pn2-sort select { flex: 1; }
  .pn4-toolbar { justify-content: stretch; }
  .pn4-toolbar .pn2-sort { width: 100%; }
  .pn4-toolbar select { flex: 1; }
  .pn4-chart-empty { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn2 *, .pn4 * { transition: none; }
}

/* ---------- 120%-Pass 09.09.: Demo-Tabelle, Kurve, Agent (unter DEMO-Band) ----------
   10.09. SANDRO-PASS: Chart-/Tab-Regeln ziehen in den N4-Block oben um (doppelte
   Selektoren entfernt, Achsen/Seg dort). */
.pn2-table td { padding: 10px 8px; border-bottom: 1px solid var(--pro-line); color: var(--pro-muted); font-size: .875rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.pn2-table tr:last-child td { border-bottom: 0; }
/* 120-Abnahme (10.09.): bei 1440 verteilte table-layout:fixed die 7 Spalten
   gleich (7 x 91px) — Fan-Name/Handle brachen mitten im Wort um ("Georg",
   "@ben."). Feste Spaltenmasse nach Inhalt; die Message-Spalte nimmt den Rest
   und kuerzt weiter per Ellipse (Zeuge: vorher-luna-fans-1440.png).
   Nur die Fans-Tabelle (aria-label), NICHT die Inflow-Tabelle (.pn4-src). */
/* 0922textkasten: die Breiten sind jetzt an den LAENGSTEN WOERTERN der Koepfe
   bemessen ("Subscription", "message", "Packages"), Summe 636 px unter der
   min-width von 640 px — sonst haette der Kopf entweder im Wort getrennt
   (alter Zustand) oder den Nachbarn ueberlappt. */
/* NACHTRAG giyu 22.09. 20:0x — die Bemessung war in INTER gemacht, und genau
   in Inter haelt sie auch (alle sieben gruen, engste Spalte "Subscription"
   73,9 auf 76,6). Sie haelt aber NICHT in der ERSATZSCHRIFT, und die wird
   gezeichnet: index.html:51 laedt die Schriften mit `display=swap`, also sieht
   JEDER Kaltbesuch zuerst die Ersatzschrift.
   Mit blockierter Google-Fonts-Anfrage an deinem gelandeten Stand gemessen
   (dieselbe Sonde, nur ohne eingespieltes Inter):
     "Subscription" braucht 85,3 px, hat 76,6  -> BRUCH
     "Packages"     braucht 63,6 px, hat 60,5  -> BRUCH
   Die Ersatzschrift ist rund 12 % breiter als Inter. Deshalb sind die beiden
   Spalten hier nach der BREITEREN Schrift bemessen: Spalte 5 auf 104 px
   (85,3 + 2x8 Polster, aufgerundet), Spalte 6 auf 80 px (63,6 + 16). Neue
   Summe 652 px, also muss die min-width mit — 656 px.
   In BEIDEN Schriften nachgemessen: 0 Wortbrueche.
   ZEUGE-WARNUNG: `document.fonts.check('600 .75rem Inter')` meldet auch OHNE
   Inter `true` — Chromium nimmt den Ersatztreffer an. Der belastbare Zeuge ist
   die gemessene Wortbreite: "Fan" = 21,3 px heisst Inter, 24,1 px heisst Ersatz. */
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(1) { width: 124px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(2) { width: 84px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(3) { width: 92px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(4) { width: 78px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(5) { width: 104px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(6) { width: 80px; }
.pn2-tablewrap[aria-label="Fan list"] .pn2-table th:nth-child(7) { width: 74px; }
.pn2-fan { display: flex; align-items: center; gap: var(--pro-space-2); }
.pn2-fan-ava { width: 40px; height: 40px; }
.pn2-fan b { display: block; color: var(--pro-ink); font-size: .875rem; }
.pn2-fan span { display: block; color: var(--pro-muted); font-size: .75rem; }
.pn2-spend b { display: block; color: var(--pro-ink); }
.pn2-spend span, .pn2-last span, .pn2-ends span { display: block; color: var(--pro-muted); font-size: .75rem; }
.pn2-tier { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tier, #b9bdc5); }
.pn2-last b { display: block; color: var(--pro-ink); font-weight: 500; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn2-ends b { display: inline-flex; align-items: center; gap: 6px; color: var(--pro-ink); font-weight: 500; }
.pn2-ends b svg { width: 15px; height: 15px; color: var(--pro-muted); }
.pn2-ends b.is-soon { color: #e87f9a; }
.pn2-ends b.is-soon svg { color: #e87f9a; }
.pn2-vip { display: inline-flex; align-items: center; gap: 6px; color: var(--pro-ink); }
.pn2-vip svg { width: 15px; height: 15px; color: #e6c15c; }
.pn2-nomatch { text-align: center; color: var(--pro-muted); padding: var(--pro-space-4) !important; }
.pn2-pages { display: flex; gap: 4px; justify-content: flex-end; margin-top: var(--pro-space-2); }
.pn2-page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 48px; border-radius: 8px; color: var(--pro-muted); font-size: .75rem; }
.pn2-page.is-active { background: var(--pro-mint); color: var(--pro-action-ink); font-weight: 700; }
.pn2-agent-demo { display: grid; gap: 6px; justify-items: start; }
.pn2-agent-demo b { color: var(--pro-ink); font-size: .875rem; }
.pn2-agent-demo span { color: var(--pro-muted); font-size: .75rem; }
.pn2-agent-demo .pn2-review { margin-top: var(--pro-space-2); display: inline-flex; align-items: center; gap: 6px; }
.pn2-agent-demo .pn2-review svg { width: 16px; height: 16px; }
.pn2-demo-note, .pn4-demo-note, .pn4-agent-note { margin-top: var(--pro-space-2); }

.pn4-big .pn1-kpi-trend { display: inline-flex; align-items: center; gap: 4px; }
.pn4-big .pn1-kpi-trend svg { width: 14px; height: 14px; }
.pn4-kpi .pn1-kpi-trend { display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.pn4-kpi .pn1-kpi-trend svg { width: 14px; height: 14px; }
.pn4-src-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--pro-rail); color: var(--pro-ink); flex-shrink: 0; }
.pn4-src-ic svg { width: 17px; height: 17px; }
.pn4-src-name b { display: block; color: var(--pro-ink); font-size: .875rem; }
.pn4-src-name span { display: block; color: var(--pro-muted); font-size: .75rem; }
.pn4-ai-tag { margin-left: auto; padding: 1px 8px; border-radius: 6px; background: rgb(135 57 196 / 20%); color: #d8b4fe; font: 700 .625rem/1.6 var(--pro-font); }
.pn4-agent-demo { display: grid; gap: var(--pro-space-2); justify-items: start; }
.pn4-agent-ic2 { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(135 57 196 / 16%); color: #d8b4fe; }
.pn4-agent-ic2 svg { width: 19px; height: 19px; }
.pn4-agent-demo p { margin: 0; color: var(--pro-ink); font-size: .875rem; }
.pn4-agent-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pn4-why { padding: var(--pro-space-2); border-radius: 8px; background: var(--pro-rail); }
.pn4-why b { display: block; color: var(--pro-ink); font-size: .75rem; margin-bottom: 4px; }
.pn4-why p { margin: 0; color: var(--pro-muted); font-size: .75rem; }

/* A2 Superfans — inner circle (10.09., Stempel 0910sym): Karte in der rechten
   Sidebar ueber den Filtern; Inline-Entwurf sendet im Demo nichts. */
.pn2-super-list { display: grid; gap: 8px; margin-bottom: var(--pro-space-2); }
.pn2-super-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pn2-super-ava { width: 36px; height: 36px; font-size: .75rem; }
.pn2-super-id { display: grid; min-width: 0; flex: 1; }
.pn2-super-id b { color: var(--pro-ink); font-size: .8125rem; }
.pn2-super-id span { color: var(--pro-muted); font-size: .6875rem; }
.pn2-super-meta { display: grid; justify-items: end; gap: 2px; flex-shrink: 0; }
.pn2-super-meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--pro-muted); font-size: .6875rem; }
.pn2-super-meta b { color: var(--pro-ink); font-size: .75rem; }
.pn2-super-cta { width: 100%; justify-content: center; }
.pn2-super-draft { display: grid; gap: 8px; margin-top: var(--pro-space-2); }
.pn2-super-draft[hidden] { display: none; }
.pn2-super-in { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-rail);
  color: var(--pro-ink); font-size: .8125rem; line-height: 1.5; font-family: inherit; }
.pn2-super-acts { display: flex; gap: 8px; }

/* ---------- Leerzustand (Yamamoto 22.09. 18:4x, Winchester-Ruege "diese fetten icons") ----------
   BEFUND, gemessen: js/pro-n2n4.js:64 erzeugt 5 Leerzustaende mit der Klasse
   `pn1-empty`, und es gab dafuer GENAU EINE CSS-Zeile (min-width:0 auf dem Kind).
   Kein Styling fuer den Block, kein Styling fuer das Symbol. Folge auf dem Schirm:
     (1) das SVG hatte keine Groessenbegrenzung und fuellte den ganzen Container -
         auf Winchesters Screenshot ein bildschirmhohes Kettensymbol.
     (2) <b> und <span> stehen nebeneinander ohne Umbruch ->
         "No source links yetYour source links appear here..." als EIN Wort.
   Beides ist DERSELBE fehlende Block, nicht zwei Fehler.
   Masse absichtlich UEBERNOMMEN von .pn1-kpi-ic / .pn1-ic-sm (44px Feld, 22px Symbol),
   damit der Leerzustand wie der Rest der Seite aussieht und nicht wie ein Fremdkoerper. */
.pn1-empty { display: flex; align-items: flex-start; gap: 12px; padding: 18px;
  background: var(--pro-panel); border: 1px solid var(--pro-line); border-radius: 12px; }
.pn1-empty > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 22.09. 19:0x BERICHTIGUNG (giyu fand den Fehler in meiner 18:48-Landung),
   19:3x beim Landen seines Leerraster-Zweigs ERNEUT ANGEWANDT — seine Basis war
   aelter als diese Zeile, ein roher cp haette sie zurueckgedreht.
   `.pn1-empty-ic` IST ein <span> (pro-n2n4.js:65). `.pn1-empty span` (0,1,1)
   schlaegt `.pn1-empty-ic` (0,1,0) -> Symbol grau statt mint, block statt flex.
   Im Browser nachgemessen: rgb(120,221,217) / flex / 44px / 22px. */
.pn1-empty > div > b { display: block; color: var(--pro-ink); font-weight: 700; font-size: .9375rem; }
.pn1-empty > div > span { display: block; color: var(--pro-muted); font-size: .8125rem; line-height: 1.45; }
.pn1-empty-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: rgb(120 221 217 / 10%); color: var(--pro-mint); }
.pn1-empty-ic svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- 0922leerraster: Platzhalter-Zeilen ----------
   Gleiche Zeilenhoehe und gleiche Linien wie eine echte Fan-Zeile, damit das
   Raster steht; der Inhalt ist erkennbar leer und nicht anklickbar. */
.pn2-ghost td { height: 56px; color: var(--pro-muted); opacity: .5; user-select: none; }
.pn4-bysource-note { margin: var(--pro-space-3) 0 0; }

/* ---------- 0922leergraph (22.09., Winchester 19:5x) ----------
   Der Leer-Graph auf #/pro/inflow: Raster und Achsen wie mit Daten, die Kurve
   als ruhige gestrichelte Nulllinie. Die Linie ist bewusst gedaempft und
   gestrichelt — eine durchgezogene Mint-Linie auf der Nullachse haette wie ein
   gemessener Verlauf von null ausgesehen. */
.pn4-axis-l { stroke: var(--pro-line); stroke-width: 1; }
.pn4-flat-l { stroke: var(--pro-muted); stroke-width: 2; stroke-dasharray: 6 6;
  stroke-linecap: round; opacity: .55; }
.pn4-chart-empty-note { margin: var(--pro-space-2) 0 0; }
/* graphen-v2 (Deku 22.09., yoruichi-NO-GO "390px"): Beschriftung ist HTML in
   CSS-Pixeln (--pro-type-small = 12px bei jeder Breite), das SVG nur Geruest.
   Es dehnt sich ohne Seitenverhaeltnis (preserveAspectRatio none), Striche und
   Strichmuster bleiben per non-scaling-stroke in Bildschirmpixeln. Hoehe fest
   statt aus der Breite: 390px bekommt keinen leeren 320er Kasten mehr. */
.pn4-empty-chart { margin-top: var(--pro-space-2); }
.pn4-empty-chart .pn4-legend-t, .pn4-empty-chart .pn4-axis-x, .pn4-empty-chart .pn4-axis-y {
  color: var(--pro-muted); font-size: var(--pro-type-small); line-height: 1.3; }
.pn4-empty-chart .pn4-legend-t { display: flex; align-items: center; gap: var(--pro-space-1); margin: 0 0 var(--pro-space-2); }
.pn4-legend-key { flex: none; width: 24px; border-top: 2px dashed var(--pro-muted); opacity: .55; }
.pn4-empty-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--pro-space-1); }
.pn4-empty-plot .pn4-axis-y { grid-column: 1; grid-row: 1; align-self: end; transform: translateY(50%); }
.pn4-chart-svg.pn4-chart-svg-empty { grid-column: 2; grid-row: 1; width: 100%; height: 240px; min-height: 0;
  margin: 0; overflow: visible; }
.pn4-chart-svg-empty line, .pn4-chart-svg-empty path { vector-effect: non-scaling-stroke; }
.pn4-empty-x { grid-column: 2; grid-row: 2; position: relative; height: calc(1.3 * var(--pro-type-small)); margin-top: 6px; }
.pn4-empty-x .pn4-axis-x { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pn4-empty-x .pn4-axis-x:first-child { transform: none; }
.pn4-empty-x .pn4-axis-x:last-child { transform: translateX(-100%); }
@media (max-width: 560px) {
  .pn4-chart-svg.pn4-chart-svg-empty { height: 150px; }
}

/* ENDSTAND2 (Giyu 23.09., yoruichi B501): der Demo-Graph mit Daten nach dem
   Muster des Leergraphen — Beschriftung HTML in --pro-type-small (12px bei
   jeder Breite), SVG nur Geometrie ohne Seitenverhaeltnis. Hoehe fest: 300px
   Plot + x-Zeile haelt die >= 320px der SANDRO-PASS-Vorgabe; 390px 200px. */
.pn4-demo-chart { margin-top: var(--pro-space-2); }
.pn4-demo-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--pro-space-1); }
.pn4-demo-y { grid-column: 1; grid-row: 1; position: relative; min-width: 2.2em; }
.pn4-demo-chart .pn4-axis-y, .pn4-demo-chart .pn4-axis-x, .pn4-demo-chart .pn4-chart-note {
  font-size: var(--pro-type-small); line-height: 1.3; }
.pn4-demo-chart .pn4-axis-y, .pn4-demo-chart .pn4-axis-x { color: var(--pro-muted); }
.pn4-demo-y .pn4-axis-y { position: absolute; right: 0; transform: translateY(-50%); }
.pn4-demo-area { grid-column: 2; grid-row: 1; position: relative; min-width: 0; }
.pn4-chart-svg.pn4-chart-svg-demo { width: 100%; height: 300px; min-height: 0; margin: 0; overflow: visible; }
.pn4-chart-svg-demo line, .pn4-chart-svg-demo path { vector-effect: non-scaling-stroke; }
.pn4-mark-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #78ddd9;
  transform: translate(-50%, -50%); pointer-events: none; }
/* B554 (todoroki B546 A1): mittig ueber dem Punkt lief die rechts steil
   steigende Kurve durch die Notiz. Jetzt rechtsbuendig LINKS vom Strich wie
   Live — dort liegt die Kurve unter dem Punkt. */
.pn4-demo-chart .pn4-chart-note { position: absolute; transform: translate(calc(-100% - 8px), calc(-100% - 14px));
  color: var(--pro-ink); font-weight: 600; text-align: right; white-space: nowrap; pointer-events: none; }
.pn4-demo-chart .pn4-chart-note-sub { display: block; color: var(--pro-muted); font-weight: 400; }
@media (max-width: 560px) {
  .pn4-chart-svg.pn4-chart-svg-demo { height: 200px; }
  /* 390: links vom Strich sind nur ~107px frei, einzeilig (139px) lief die
     Notiz ueber die y-Beschriftung "100". Zweizeilig bleibt sie im Plot. */
  .pn4-demo-chart .pn4-chart-note { white-space: normal; max-width: 7em; }
  /* 7 Datumsmarken a ~40px passen nicht in ~270px: jede zweite faellt weg,
     die letzte bleibt. Lage der uebrigen unveraendert. Erst ab 5 Marken
     (gemessen: 5 ueberlappen, 4 nicht) — bei 7D blieben sonst ungleiche
     Abstaende. */
  .pn4-demo-x-dicht .pn4-axis-x:nth-child(even):not(:last-child) { display: none; }
}

/* Summe der sieben Spalten ist 636 px; die min-width der Tabelle muss knapp
   darueber liegen, sonst verteilt `table-layout: fixed` die Differenz wieder
   weg und die Bemessung war umsonst.
   0922fanschnitt (22.09. 20:2x): die erste Fassung dieses Nachtrags stand auf
   652/656 px und hat damit den Schnitt am rechten Rand um 16 px VERGROESSERT
   (gemessen 1440: Kasten innen 612 px, Kopf "VIP routing" 27 px -> 43 px
   abgeschnitten). Die 16 px fuer "Subscription ends" und "Packages" kommen
   jetzt aus Spalte 1 (140 -> 124 px, Inhalt dort ist per text-overflow
   ohnehin gekuerzt) statt aus der Gesamtbreite. Summe wieder 636 px wie im
   gelandeten Stand. */
.pn2-tablewrap[aria-label="Fan list"] .pn2-table { min-width: 640px; }