/* APPICS Pro — Fans mit APPICS Power upvoten (js/pro-fanvote.js, PRO-BUTTONS-FANVOTE-T1, 02.10.2026).
   PRO-FANVOTE-T6/T6B (Yamamoto 03.10. 17:54/19:03): Pro-Flaeche, Akzent aus dem LIVE-Pro-Stylesheet css/pro.css :root —
   Akzent var(--pro-mint), Text auf Mint var(--pro-action-ink), Hover var(--pro-mint-soft) wie css/pro-n1n3.css Z.99-100; Text
   var(--ink)/var(--muted), Flaechen var(--panel)/var(--panel-2), Linie var(--line), Schrift var(--font) aus css/app.css (T3 A1). */
.pfv { margin-bottom: 16px; display: grid; gap: 12px; }
/* T3 A1: die geteilten pn1-Klassen (css/pro-n1n3.css, Pro-Tokens) NUR in diesem Panel auf app.css umbinden;
   andere Pro-Panels bleiben unberuehrt. */
.pfv.pn1-panel { background: var(--panel); border-color: var(--line); font-family: var(--font); }
.pfv .pn1-panel-t { color: var(--ink); font-family: var(--font); }
.pfv .pn1-muted { color: var(--muted); }
.pfv .pn1-btn { font-family: var(--font); }
.pfv .pn1-btn-send { background: var(--pro-mint); color: var(--pro-action-ink); }
.pfv .pn1-btn-send:hover { background: var(--pro-mint-soft); }
.pfv .pn1-btn-ghost { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.pfv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pfv-energy { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  font: 600 .75rem/1.2 var(--font); white-space: nowrap; }
.pfv-sub { max-width: 64ch; }
.pfv-msg { padding: 6px 0; }
.pfv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfv-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(160px, 1.2fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.pfv-row.is-done { grid-template-columns: minmax(170px, 1.1fr) 1fr; }
.pfv-who, .pfv-post { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.pfv-who:hover .pfv-name, .pfv-post:hover .pfv-post-t { color: var(--pro-mint); }
.pfv-ava { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.pfv-ava-ini { display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font: 700 .75rem/1 var(--font); }
.pfv-who-t { display: grid; min-width: 0; }
.pfv-name { font: 600 .875rem/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfv-eng { color: var(--muted); font: 500 .75rem/1.3 var(--font); }
.pfv-thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--panel); }
.pfv-post-t { color: var(--muted); font: 500 .8125rem/1.35 var(--font); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pfv-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pfv-stufen { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.pfv-stufe { min-width: 48px; min-height: 48px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font: 600 .75rem/1 var(--font); cursor: pointer; }
.pfv-stufe:hover { color: var(--ink); }
.pfv-stufe.is-on { background: var(--pro-mint); color: var(--pro-action-ink); }
.pfv-stufe:focus-visible, .pfv-go:focus-visible { outline: 2px solid var(--pro-mint); outline-offset: 2px; }
.pfv-stufe:disabled, .pfv-go:disabled { opacity: .55; cursor: default; }
.pfv-status, .pfv-none { grid-column: 1 / -1; margin: 0; color: var(--muted); font: 500 .8125rem/1.35 var(--font); }
.pfv-status:empty { display: none; }
.pfv-row.is-done .pfv-status { grid-column: auto; color: var(--pro-mint); }
.pfv-row.is-done.is-locked .pfv-status { color: var(--muted); }
/* PRO-FANVOTE-T2: Akzent nur fuer "confirmed on-chain"; eingereiht = Text-Ton, nicht on-chain = gedaempft. */
.pfv-row.is-done.is-wait .pfv-status { color: var(--ink); }
.pfv-row.is-done.is-warn .pfv-status { color: var(--muted); }
.pfv-none { grid-column: auto; }
.pfv-foot { margin: 0; color: var(--muted); font: 500 .75rem/1.4 var(--font); }
@media (max-width: 760px) {
  .pfv-row, .pfv-row.is-done { grid-template-columns: 1fr; }
  .pfv-act { justify-content: flex-start; }
  .pfv-row.is-done .pfv-status, .pfv-none { grid-column: 1 / -1; }
}