/*
 * Web3-Design, privates FRF – Paket 1: Kopf und Bedienung (16.10.2026).
 *
 * Nur das Aussehen der Teile, die es in der Web3-Fassung nicht gibt:
 * Kopfleiste und Reiterleiste (#tableTabsNav, eine Zeile mit Pillen, Klappmenü und „Mehr“), Kontomenü
 * (#accountRail), Anmeldedialog (#loginDialog, Discord/Passkey/Wallet/PIN),
 * Alarme (Knopf „Alarm stellen“, Alarm-Dialoge), Feedback-Dialog
 * (#helpDialog), Listings & Delistings (#lifecycleOverlay), übrige Dialoge
 * des privaten FRF (Wallets, Passkeys, xStocks-Wallet, Discord-Hinweise).
 *
 * Regeln wie web3-design.css: jede Regel beginnt mit
 * html[data-frf-design="web3"] (Schalter Nutzer ▸ Seiten, sonst wirkungslos),
 * Farben nur über die --w3-*-Tokens aus web3-design.css (keine festen Werte),
 * Schrift nie unter 12 px, am Handy (≤ 640 px) geprüft. Lädt nach
 * web3-design*.css (src/services/web3Shell.ts, DESIGN_LINKS).
 *
 * Vorbilder der Plattform (defi-tools): FrfNav.tsx (Flyout bg-popover, Rand
 * white/10, Zeilen white/70, Hover primary/10, aktiv text-primary),
 * EventsExperience.tsx (Unterstrich-Reiter: aktiv weiß + Akzent-Strich,
 * sonst white/60), Button.tsx (Sekundär white/5 + Innenkante),
 * LogoutDialog.tsx (Dialog auf --surface mit Innenkante und Schatten).
 * Hell/Dunkel: nur Tokens, keine Annahme „dunkel“ – die helle Fassung legt
 * die --w3-*-Tokens um.
 *
 * Die Reiterleiste steht auch im Web3-Modus ohne Rahmen (Direktaufruf);
 * dort bleibt sie, wie sie abgenommen ist: ihre Regeln tragen darum
 * :not([data-frf-modus="web3"]). Konto, Listings, Feedback und die Dialoge
 * gibt es im Web3-Modus nicht (web3-modus.css blendet sie aus).
 */

/* ── 1. Reiterleiste ────────────────────────────────────────────────── */

/* Leiste = Plattform-Karte (Glanz, Innenkante, ohne Randlinie). */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav {
  background: var(--w3-glanz), var(--w3-karte);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .tabbar-actions {
  border-left-color: var(--w3-rand-leise);
}

/* Reiter: white/60, Hover weiß, aktiv weiß mit Akzent-Strich (EventsTabs). */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav :is(.table-tab, .table-tab-group-head) {
  color: var(--w3-text-2);
  font-weight: 500;
  letter-spacing: 0;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav :is(.table-tab, .table-tab-group-head):hover,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .table-tab-group-head[aria-expanded="true"] {
  color: var(--w3-text);
  background: transparent;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav :is(.table-tab, .table-tab-group-head).active {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav :is(.table-tab, .table-tab-group-head).active::after {
  height: 2px;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-akzent);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .table-tab-group-caret,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .table-tabs-scroll .table-tab-group-head .table-tab-group-label::after {
  color: var(--w3-text-3);
}
/* Fokus innen (die Leiste schneidet einen Ring außen ab). */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav :is(.table-tab, .table-tab-group-head):focus-visible {
  outline: none;
  border-radius: var(--w3-radius-tip);
  box-shadow: inset 0 0 0 2px var(--w3-akzent-rand);
}

/* Abzeichen „im Bau“ (Hervorhebung, keine Warnung → Akzent) und „Beta“ (leise). */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .table-tab .tab-tag-wip {
  padding: 1px 8px;
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-akzent-flaeche);
  color: var(--w3-akzent);
  font-size: 12px;
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .table-tab .tab-tag-beta.value-tip,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .tab-beta-badge {
  padding: 1px 8px;
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/* „?“ der Reiter-Einführung an der Ecke des aktiven Reiters. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .rei-frage {
  border-color: var(--w3-rand);
  background: var(--w3-flaeche);
  color: var(--w3-text-2);
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .rei-frage:is(:hover, :focus-visible) {
  border-color: var(--w3-akzent);
  color: var(--w3-text);
}

/* Eine Zeile (18.10.2026, leiste.js, Mockup D): Pillen wie die Knöpfe rechts
   (Sekundärknopf: white/5 + Innenkante, helle Schrift), aktiv wie „Alarm
   stellen“ im Akzent mit Schimmer (Keyframes in tabbar.css). */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head),
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .leiste-mehr-knopf {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head):hover,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > .table-tab-group-head[aria-expanded="true"],
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .leiste-mehr-knopf:is(:hover, [aria-expanded="true"]) {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head).active,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .leiste-mehr-knopf.active {
  --leiste-ring: inset 0 0 0 1px var(--w3-akzent-rand);
  --leiste-glanz: color-mix(in srgb, var(--w3-akzent) 40%, transparent);
  border-color: transparent;
  background: var(--w3-akzent-flaeche);
  box-shadow: var(--leiste-ring), 0 0 10px var(--leiste-glanz);
  color: var(--w3-akzent);
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head).active:hover,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > .table-tab-group-head.active[aria-expanded="true"] {
  --leiste-ring: inset 0 0 0 1px var(--w3-akzent);
  background: var(--w3-akzent-stark);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head).active::after,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .leiste-mehr-knopf.active::after { display: none; }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head):focus-visible,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-zeile1 .leiste-mehr-knopf:focus-visible {
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .leiste-kopf-pfeil { color: var(--w3-text-3); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .table-tab-group-head.active .leiste-kopf-pfeil { color: var(--w3-akzent); }

/* Klappmenü der Gruppen und „Mehr ▾“: Popover wie das Kontomenü. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) :is(.leiste-mehr-menue, .leiste-klapp) {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-popover);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-menue { padding: 4px; }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-titel {
  color: var(--w3-text-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-titel {
  color: var(--w3-text-3);
  font-size: 12px;
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) :is(.leiste-mehr-eintrag, .leiste-klapp-eintrag) {
  border-radius: var(--w3-radius-tip);
  color: var(--w3-text-2);
  font-weight: 400;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-eintrag { color: var(--w3-text); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) :is(.leiste-mehr-eintrag, .leiste-klapp-eintrag):is(:hover, :focus-visible) {
  background: var(--w3-akzent-hauch);
  box-shadow: none;
  color: var(--w3-text);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) :is(.leiste-mehr-eintrag, .leiste-klapp-eintrag):focus-visible {
  box-shadow: inset 0 0 0 1px var(--w3-akzent-rand);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) :is(.leiste-mehr-eintrag, .leiste-klapp-eintrag).active {
  background: var(--w3-akzent-hauch);
  color: var(--w3-akzent);
  font-weight: 500;
}
/* Zahl offener Einträge (Bot Testing) im Klappmenü: Akzent statt Gold. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp .bugs-menue-zahl {
  background: var(--w3-akzent-flaeche);
  color: var(--w3-akzent);
  font-size: 12px;
  font-weight: 500;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp .bugs-menue-zahl.is-null {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text-3);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-gruppe + .leiste-mehr-gruppe,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-eintrag + .leiste-mehr-gruppe,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-gruppe + .leiste-mehr-eintrag {
  border-top-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-mehr-aktiv::before {
  color: var(--w3-text-3);
}
/* Unterreiter im Klappmenü (19.10.2026): Pfeil leise, Untermenü wie das Klappmenü, Einträge wie dessen Einträge. */
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-unterpfeil { color: var(--w3-text-3); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-eintrag:is(:hover, :focus-visible) .leiste-klapp-unterpfeil,
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-zeile.unter-offen .leiste-klapp-unterpfeil { color: var(--w3-text); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-klapp-zeile.unter-offen > .leiste-klapp-eintrag { background: var(--w3-akzent-hauch); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-popover);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter-eintrag {
  border-radius: var(--w3-radius-tip);
  color: var(--w3-text-2);
  font-weight: 400;
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter-eintrag:is(:hover, :focus-visible) {
  background: var(--w3-akzent-hauch);
  box-shadow: none;
  color: var(--w3-text);
}
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter-eintrag:focus-visible { box-shadow: inset 0 0 0 1px var(--w3-akzent-rand); }
html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter-eintrag.active {
  background: var(--w3-akzent-hauch);
  color: var(--w3-akzent);
  font-weight: 500;
}
@media (hover: none), (max-width: 640px) {
  html[data-frf-design="web3"]:not([data-frf-modus="web3"]) .leiste-unter {
    border: 0;
    border-left: 1px solid var(--w3-rand-leise);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Handy: Trennlinie über den Knöpfen leise. */
@media (max-width: 900px) {
  html[data-frf-design="web3"]:not([data-frf-modus="web3"]) #tableTabsNav .tabbar-actions {
    border-top-color: var(--w3-rand-leise);
  }
}

/* ── 2. Pillen rechts: Konto, Alarm, Listings, Feedback, Hell/Dunkel ──── */

/* Sekundärknopf der Plattform: white/5 + Innenkante, ganz gerundet, medium. */
html[data-frf-design="web3"] .tabbar-actions :is(.account-btn, .lifecycle-overlay-toggle, .table-tab-help, .thema-schalter) {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .tabbar-actions :is(.account-btn, .lifecycle-overlay-toggle, .table-tab-help, .thema-schalter):hover,
html[data-frf-design="web3"] .tabbar-actions .account-menu-wrapper > .account-btn[aria-expanded="true"],
html[data-frf-design="web3"] .tabbar-actions .lifecycle-overlay-toggle[aria-expanded="true"] {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tabbar-actions :is(.account-btn, .lifecycle-overlay-toggle, .table-tab-help, .thema-schalter):focus-visible {
  outline: none;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"] .tabbar-actions :is(.account-caret, .lifecycle-overlay-caret) {
  color: var(--w3-text-3);
  opacity: 1;
}
html[data-frf-design="web3"] .tabbar-actions .lifecycle-tab-badge {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
  font-weight: 500;
}

/* „Alarm stellen“: Hervorhebung im Akzent (vorher Gold). */
html[data-frf-design="web3"] .tabbar-actions .account-btn.alarm-open-btn {
  background: var(--w3-akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--w3-akzent-rand);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] .tabbar-actions .account-btn.alarm-open-btn:hover {
  background: var(--w3-akzent-stark);
  box-shadow: inset 0 0 0 1px var(--w3-akzent);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] .tabbar-actions .account-btn.alarm-open-btn:focus-visible {
  box-shadow: inset 0 0 0 1px var(--w3-akzent-rand), var(--w3-ring);
}

/* Abgemeldet: „Einloggen“ ist die Hauptaktion → Primärknopf. */
html[data-frf-design="web3"] .tabbar-actions .account-btn.account-btn-wallet {
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .tabbar-actions .account-btn.account-btn-wallet:hover {
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  box-shadow: none;
  color: var(--w3-akzent-text);
}
/* Hinweis für Gäste: leiser Akzent, ohne Glanzlauf und Leuchten. */
html[data-frf-design="web3"] .tabbar-actions .account-hint {
  border-color: transparent;
  background: var(--w3-akzent-hauch);
  box-shadow: inset 0 0 0 1px var(--w3-akzent-flaeche);
  color: var(--w3-akzent);
  text-shadow: none;
  font-weight: 500;
}
html[data-frf-design="web3"] .tabbar-actions .account-hint::after {
  display: none;
  animation: none;
}
/* 24-h-Frist: echte Warnung bleibt Warnfarbe, abgelaufen Rot. */
html[data-frf-design="web3"] .tabbar-actions .account-grace {
  border-color: color-mix(in srgb, var(--w3-warnung) 40%, transparent);
  background: color-mix(in srgb, var(--w3-warnung) 12%, transparent);
  box-shadow: none;
  color: var(--w3-warnung);
  font-weight: 500;
}
html[data-frf-design="web3"] .tabbar-actions .account-grace :is(.account-grace-timer, .account-grace-link) {
  color: var(--w3-warnung);
  font-family: var(--font-mono);
}
html[data-frf-design="web3"] .tabbar-actions .account-grace .account-grace-link {
  font-family: inherit;
}
html[data-frf-design="web3"] .tabbar-actions .account-grace.expired {
  border-color: color-mix(in srgb, var(--w3-negativ) 40%, transparent);
  background: color-mix(in srgb, var(--w3-negativ) 12%, transparent);
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] .tabbar-actions .account-grace.expired :is(.account-grace-timer, .account-grace-link) {
  color: var(--w3-negativ-text);
}

/* Kontomenü: Popover wie die Flyouts, Zeilen white/60, Hover Akzent-Hauch. */
html[data-frf-design="web3"] .tabbar-actions .account-menu {
  min-width: 240px;
  padding: 4px;
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-popover);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .tabbar-actions .account-menu-suffix {
  margin-bottom: 4px;
  padding: 8px 12px 10px;
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text-3);
  font-size: 12px;
}
html[data-frf-design="web3"] .tabbar-actions .account-menu button {
  padding: 8px 12px;
  border-radius: var(--w3-radius-tip);
  color: var(--w3-text-2);
  font-weight: 400;
}
html[data-frf-design="web3"] .tabbar-actions .account-menu button:is(:hover, :focus-visible) {
  background: var(--w3-akzent-hauch);
  box-shadow: none;
  color: var(--w3-text);
}
html[data-frf-design="web3"] .tabbar-actions .account-menu button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--w3-akzent-rand);
}

/* ── 3. Listings & Delistings ───────────────────────────────────────── */

html[data-frf-design="web3"] .tabbar-actions .lifecycle-overlay-panel {
  padding: 12px;
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-popover);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-popup-day-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-popup-day-btn:hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-popup-day-label {
  color: var(--w3-text);
  font-size: 12px;
  font-weight: 500;
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event {
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event.listed {
  border-left: 3px solid var(--w3-positiv);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event.delisted {
  border-left: 3px solid var(--w3-negativ);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event-tag {
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event-symbol {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .lifecycle-overlay :is(.lifecycle-event-exchange, .lifecycle-popup-empty) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-event-time {
  color: var(--w3-text-3);
  font-family: var(--font-mono);
}
html[data-frf-design="web3"] .lifecycle-overlay .lifecycle-seiten button {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}

/* Handy: das Panel stand unter seinem Knopf und ragte links aus dem Bild
   (24 rem bei 390 px). Die Pillenreihe ist dort eine eigene volle Zeile –
   das Panel spannt über diese Zeile. */
@media (max-width: 640px) {
  html[data-frf-design="web3"] #tableTabsNav .tabbar-actions {
    position: relative;
  }
  html[data-frf-design="web3"] #tableTabsNav .tabbar-actions .lifecycle-overlay {
    position: static;
  }
  /* Konto-Gruppe bricht um (24-h-Frist + Kontoknopf sind breiter als 358 px). */
  html[data-frf-design="web3"] #tableTabsNav .tabbar-actions .account-rail {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  html[data-frf-design="web3"] #tableTabsNav .tabbar-actions .lifecycle-overlay-panel,
  html[data-frf-design="web3"] #tableTabsNav .tabbar-actions .lifecycle-overlay-panel.ist-breit {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ── 4. Dialoge: gemeinsame Fläche ──────────────────────────────────── */

/* Plattform-Dialog (LogoutDialog): --surface, Rand white/10, Radius wie die
   Erklärkarte, Schatten; Hintergrund wie bei den Erklärkarten. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog, #walletsDialog, #xstocksWalletDialog) {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-flaeche);
  box-shadow: var(--w3-schatten);
  color: var(--w3-text);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog, #walletsDialog, #xstocksWalletDialog)::backdrop {
  background: var(--overlay-solid);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog, #walletsDialog, #xstocksWalletDialog) :is(h2, h3) {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .login-dialog :is(.login-safety, .login-hint, .login-pin-hinweis, .login-status, .login-contact-hint, .login-hint-tip, .login-pin-wer) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .login-dialog .login-contact-link {
  color: var(--w3-akzent);
  font-weight: 500;
}
html[data-frf-design="web3"] .login-dialog .login-error {
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] .login-dialog .login-label {
  color: var(--w3-text-2);
  font-weight: 500;
}

/* Felder: Plattform-Feld white/5 mit Innenkante, ganz gerundet, Fokus-Ring. */
html[data-frf-design="web3"] .login-dialog input:not([type="checkbox"]):not([type="radio"]),
html[data-frf-design="web3"] #walletsDialog input:not([type="checkbox"]):not([type="radio"]),
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-input {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .login-dialog input::placeholder,
html[data-frf-design="web3"] #walletsDialog input::placeholder,
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-input::placeholder {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] .login-dialog input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-frf-design="web3"] #walletsDialog input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-input:focus {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
  outline: none;
}
/* Gesperrtes Namensfeld (Discord-Name): bleibt rechteckig-rund wie ein Feld mit Schloss. */
html[data-frf-design="web3"] .dz-dialog .dz-feld input {
  border-color: transparent;
}

/* Sekundärknopf (white/5 + Innenkante), ganz gerundet. */
html[data-frf-design="web3"] .login-dialog :is(.login-btn-secondary, .dz-knopf-sek),
html[data-frf-design="web3"] .dz-dialog .login-view-login .login-actions > .login-btn-primary,
html[data-frf-design="web3"] #walletsDialog .account-btn.secondary,
html[data-frf-design="web3"] #xstocksWalletDialog :is(.help-dialog-close, .xstocks-points-connect-btn) {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] .login-dialog :is(.login-btn-secondary, .dz-knopf-sek):hover:not(:disabled),
html[data-frf-design="web3"] .dz-dialog .login-view-login .login-actions > .login-btn-primary:hover,
html[data-frf-design="web3"] .dz-dialog .tp-wege > .dz-knopf[aria-expanded="true"],
html[data-frf-design="web3"] #walletsDialog .account-btn.secondary:hover,
html[data-frf-design="web3"] #xstocksWalletDialog :is(.help-dialog-close, .xstocks-points-connect-btn):hover {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}

/* Primärknopf im Akzent mit dunkler Schrift, Hover 80 %. Die Discord-Knöpfe
   sind die Hauptaktion und folgen dem Sperrdialog in web3-design.css
   (#dzNeuVerbindenBtn im Akzent) statt dem Discord-Blau. */
html[data-frf-design="web3"] .login-dialog .login-btn-primary,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) :is(.dz-knopf-prim, .dz-knopf-discord),
html[data-frf-design="web3"] #walletsDialog .account-btn:not(.secondary),
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-load-btn {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
  font-weight: 500;
  text-decoration: none;
}
html[data-frf-design="web3"] .login-dialog .login-btn-primary:hover,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) :is(.dz-knopf-prim, .dz-knopf-discord):hover:not(:disabled),
html[data-frf-design="web3"] #walletsDialog .account-btn:not(.secondary):hover,
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-load-btn:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--w3-akzent) 80%, transparent);
  box-shadow: none;
  color: var(--w3-akzent-text);
  filter: none;
  transform: none;
}
/* Ausnahme: im Discord-Layout steht die Wallet unter „Weiter mit Discord“
   und bleibt Sekundärknopf (Regel oben ist spezifischer gemeint). */
html[data-frf-design="web3"] .login-dialog.dz-dialog .login-view-login .login-actions > .login-btn-primary {
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .login-dialog.dz-dialog .login-view-login .login-actions > .login-btn-primary:hover {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
}
/* Fokus aller Dialog-Knöpfe im Plattform-Ring. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog, #walletsDialog, #xstocksWalletDialog) :is(.login-btn-primary, .login-btn-secondary, .login-btn-link, .dz-knopf, .dz-hilfe, .account-btn, .help-dialog-close, .xstocks-points-load-btn, .xstocks-points-connect-btn):focus-visible {
  outline: none;
  box-shadow: var(--w3-ring);
}

/* Textknöpfe (Abbrechen, Team, Gerät koppeln): white/60, Hover weiß auf white/5. */
html[data-frf-design="web3"] .login-dialog .login-btn-link {
  border-radius: var(--w3-radius-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .login-dialog .login-btn-link:hover {
  background: var(--w3-fuellung);
  color: var(--w3-text);
}
/* Discord-Layout: die drei Wege unter den Knöpfen als Sekundär-Pillen, „Hilfe ?“ ebenso. */
html[data-frf-design="web3"] .dz-dialog .login-view-login .login-actions-secondary > .login-btn-link,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-hilfe {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] .dz-dialog .login-view-login .login-actions-secondary > .login-btn-link:hover,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-hilfe:hover {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .dz-dialog .login-view-login .login-actions-secondary {
  border-top-color: transparent;
}

/* ── 5. Anmeldedialog im Discord-Layout (discord-zugang.css) ────────── */

/* Kurven im Kopfbild: Akzent-Töne statt der Nutzungsfarben, Fläche mit
   Akzent-Schein wie das Bildband der Erklärkarte. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) {
  --dz-kurve-1: var(--w3-akzent);
  --dz-kurve-2: var(--w3-akzent-hell);
  --dz-text-2: var(--w3-text-2);
  --dz-ok-rand: color-mix(in srgb, var(--w3-positiv) 35%, transparent);
  --dz-warn-rand: color-mix(in srgb, var(--w3-warnung) 40%, transparent);
  --dz-warn-text: var(--w3-warnung);
  /* Umzugshinweis (.ek-tipp) im Anmeldedialog: Akzent statt Gold. */
  --gold: var(--w3-akzent);
  --gold-rand: var(--w3-akzent-rand);
  --gold-hauch: var(--w3-akzent-hauch);
  --ek-gold-tipp: var(--w3-akzent-flaeche);
  --ek-text-2: var(--w3-text-2);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kopfbild {
  border-bottom-color: var(--w3-rand-leise);
  background: radial-gradient(70% 90% at 92% 8%, var(--w3-akzent-flaeche), transparent 62%),
              radial-gradient(60% 70% at 10% 100%, var(--w3-akzent-hauch), transparent 70%),
              var(--w3-karte);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kachel {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  background: var(--w3-flaeche);
  box-shadow: var(--w3-kante), var(--w3-schatten);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kachel svg {
  stroke: var(--w3-akzent);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kachel.dz-kachel-warn {
  border-color: var(--dz-warn-rand);
  background: color-mix(in srgb, var(--w3-warnung) 10%, var(--w3-flaeche));
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kachel.dz-kachel-warn svg {
  stroke: var(--w3-warnung);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) :is(.dz-klein, .dz-feld-hinweis, .dz-profil-handle) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-knopf {
  border-radius: var(--w3-radius-feld);
  font-weight: 500;
}
/* Kästen (FRF Brain sieht, Profil): Karte im Dialog ohne graue Linie. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) :is(.dz-kasten, .dz-profil, .dz-meldung:not(.ist-warn):not(.ist-ok)) {
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kasten-titel {
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-meldung {
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-profil-name {
  font-weight: 500;
}
/* Schritte Discord → Wallet: aktiv im Akzent, offen white/5. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-schritt {
  font-weight: 500;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-schritt + .dz-schritt::before,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-trenner::before,
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-trenner::after {
  background: var(--w3-rand);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-schritt-nr {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  font-weight: 500;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-schritt.ist-aktiv .dz-schritt-nr {
  border-color: var(--w3-akzent);
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
  font-weight: 500;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-schritt.ist-fertig .dz-schritt-nr {
  border-color: var(--dz-ok-rand);
  background: color-mix(in srgb, var(--w3-positiv) 12%, transparent);
  box-shadow: none;
  color: var(--w3-positiv);
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-abzeichen {
  font-weight: 500;
}
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-abzeichen-neutral {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  color: var(--w3-text-2);
}
/* Umzugshinweis (Erklärkarte-Tipp) ganz im Plattform-Stil. */
html[data-frf-design="web3"] .login-dialog .ek-tipp {
  border-radius: var(--w3-radius-karte);
}
/* Griff des Handy-Blatts. */
html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-griff {
  background: var(--w3-fuellung-stark);
}
@media (max-width: 520px) {
  html[data-frf-design="web3"] dialog.dz-dialog {
    border-radius: var(--w3-radius-karte) var(--w3-radius-karte) 0 0;
  }
  html[data-frf-design="web3"] :is(.login-dialog, dialog.dz-dialog) .dz-kopfbild {
    border-top-color: var(--w3-rand-leise);
  }
}

/* Alter Ablauf ohne Discord-Pflicht, „Vor der Registrierung“ und die
   abgelaufene Frist: Knöpfe gleich hoch, Abstände wie die Plattform. */
html[data-frf-design="web3"] .login-dialog:not(.dz-dialog) .login-actions > :is(.login-btn-primary, .login-btn-secondary, .login-passkey-knopf) {
  min-height: 44px;
}
/* „Registrierung muss noch abgeschlossen werden !“ ist eine Warnung. */
html[data-frf-design="web3"] #graceExpiredDialog h2 {
  color: var(--w3-warnung);
}

/* ── 6. Wallets verwalten (#walletsDialog, userWallets.js) ──────────── */

html[data-frf-design="web3"] #walletsDialog {
  padding: 20px 24px;
}
html[data-frf-design="web3"] #walletsDialog .admin-header h2 {
  font-size: 18px;
}
html[data-frf-design="web3"] #walletsDialog .account-btn {
  min-height: 36px;
  padding: 0 16px;
}
html[data-frf-design="web3"] #walletsDialog :is(.admin-empty, .pin-hinweis, .pin-zustand, .pin-geraete-titel, .wallet-add label) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #walletsDialog .pin-zustand.ist-gesperrt {
  color: var(--w3-warnung);
}
html[data-frf-design="web3"] #walletsDialog :is(.wallet-add, .pin-bereich) {
  border-top-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #walletsDialog :is(.wallet-row, .pin-geraet) {
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #walletsDialog :is(.wallet-address, .pin-geraet-name) {
  color: var(--w3-text);
  font-family: var(--font-mono);
}
html[data-frf-design="web3"] #walletsDialog .pin-geraet-name {
  font-family: inherit;
}
html[data-frf-design="web3"] #walletsDialog :is(.wallet-added, .pin-geraet-zeit) {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #walletsDialog .pin-code {
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font-family: var(--font-mono);
}
html[data-frf-design="web3"] #walletsDialog :is(.login-status) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #walletsDialog .login-error {
  color: var(--w3-negativ-text);
}

/* ── 7. xStocks: Wallet hinzufügen (#xstocksWalletDialog) ───────────── */

html[data-frf-design="web3"] #xstocksWalletDialog .help-dialog-card {
  background: none;
}
html[data-frf-design="web3"] #xstocksWalletDialog .help-dialog-kicker {
  color: var(--w3-text-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
html[data-frf-design="web3"] #xstocksWalletDialog .help-dialog-close {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: 18px;
}
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-wallet-dialog-section {
  border-top-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-wallet-dialog-heading {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] #xstocksWalletDialog :is(.xstocks-wallet-dialog-hint, .xstocks-points-wallet-connect-note, .xstocks-points-status) {
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #xstocksWalletDialog .xstocks-points-load-btn {
  padding: 10px 18px;
}

/* ── 8. Passkeys und Feedback (Erklärkarte, web3-design.css): Reste ─── */

/* Zeilen, Knöpfe und Felder der Passkey-Liste ganz im Plattform-Stil. */
html[data-frf-design="web3"] .pk-dialog .pk-zeile {
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .pk-dialog .pk-zeile.ist-aktuell {
  box-shadow: inset 0 0 0 1px var(--w3-akzent-rand);
}
html[data-frf-design="web3"] .pk-dialog .pk-name {
  font-weight: 500;
}
html[data-frf-design="web3"] .pk-dialog .pk-knopf {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .pk-dialog .pk-knopf:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] .pk-dialog .pk-knopf-gefahr {
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] .pk-dialog .pk-knopf:focus-visible {
  outline: none;
  box-shadow: var(--w3-ring);
}
html[data-frf-design="web3"] .pk-dialog .pk-feld {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .pk-dialog .pk-feld:focus {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"] .pk-dialog .pk-leer {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] .pk-dialog .pk-meldung.ist-fehler {
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] .pk-dialog .pk-pruefzahl {
  font-family: var(--font-mono);
  font-weight: 500;
}