/*
 * Web3-Design TEAM (12.10.2026): Gruppe „TEAM ▾“ (Pools, Musterportfolio,
 * Paperbots/Dashboard, Backtester), „Nutzer“ (Admin-Teile im Web3-Modus),
 * „Tool settings“ (/einstellungen) und das Ask-FRF-Panel im Aussehen der
 * Web3-Universe-Plattform.
 *
 * Wie web3-design.css: nur über die Shell geladen (src/services/web3Shell.ts,
 * direkt nach web3-design.css), jede Regel an html[data-frf-design="web3"]
 * gebunden – im normalen Modus ändert sich nichts. Nur Aussehen. Farben nur
 * über die Tokens aus web3-design.css (--w3-*), keine festen Werte hier.
 *
 * Die Bündel (rst/bundle/rst.css, v3bt/bundle/v3bt.css) bleiben unverändert;
 * sie lesen Tokens bzw. HSL-Variablen, die hier am Modus-Merkmal umgelegt
 * werden. Beide Bündel-Stylesheets kommen NACH dieser Datei in den <head>
 * (rstTab.js, v3btTab.js) – darum Selektoren mit Merkmal + Reiter-ID.
 *
 * Seit 13.10.2026 in web3-design.css (Grundlage): --fs-11 → 12 px, Karte,
 * Kennzahl-Kachel, Feld, Segment-Spur, Sekundär-/Primärknopf, Schalter,
 * Ask-FRF-Akzent und die Erklärkarte. Die V3BT-Regeln (Paperbots/Backtester)
 * und das Detail einer Pool-Zeile stehen unverändert hier.
 */

/* ── TEAM ▸ Pools (RST-Bündel) ─────────────────────────────────────────
   Das Bündel leitet seine Farben aus EINER Variable ab (--rst-akzent, im
   normalen Modus das PT-Orange): hier der Plattform-Akzent. Aktive
   Unterreiter, Pillen und Schalter-Pillen wie das gewählte Segment der
   Plattform (white/10 + Innenkante), Suchen als Primärknopf, übrige Knöpfe
   als Sekundärknopf, Felder white/5 ganz gerundet, Karten mit Glanz und
   Innenkante, Tabellenkopf wie die Admin-Tabellen. Warnungen bleiben in der
   Warnfarbe (vorher teilten sie sich das Orange mit dem Akzent).
   --fs-11 → 12 px: Beschriftungen und Tabellenköpfe nie unter 12 px. */
html[data-frf-design="web3"] #rstPoolsView .frf-rst {
  --rst-akzent: var(--w3-akzent);
  --rst-kopf-grund: var(--w3-flaeche);
  --rst-zeile-kind: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #rstPoolsView :is(.rst-unterreiter, .rst-pillgrp, .rst-segs) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #rstPoolsView :is(.rst-subtab, .rst-pill, .rst-seg) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #rstPoolsView :is(.rst-subtab, .rst-pill, .rst-seg):hover {
  background: var(--w3-fuellung-mittel);
}
html[data-frf-design="web3"] #rstPoolsView :is(.rst-subtab.on, .rst-pill.on, .rst-seg.on) {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] #rstPoolsView .rst-fzeile.zwei { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rstPoolsView :is(input[type="text"], input[type="search"]) { padding: 0 14px; }
html[data-frf-design="web3"] #rstPoolsView .rst-dd:hover { background: var(--w3-fuellung-mittel); border-color: transparent; }
html[data-frf-design="web3"] #rstPoolsView :is(.rst-dd.gesetzt, input.gesetzt) { border-color: var(--w3-akzent-rand); }
html[data-frf-design="web3"] #rstPoolsView input.ungueltig { border-color: var(--w3-negativ); }
/* Schalter-Pillen: aus white/5, an white/10; Spur an = Akzent, Knopf dunkel. */
html[data-frf-design="web3"] #rstPoolsView .rst-schalter {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #rstPoolsView .rst-schalter:hover { background: var(--w3-fuellung-mittel); border-color: transparent; }
html[data-frf-design="web3"] #rstPoolsView .rst-schalter.an { background: var(--w3-fuellung-stark); border-color: transparent; box-shadow: var(--w3-kante); }
/* Knöpfe: Sekundärknopf der Plattform; „Suchen“ Primärknopf im Akzent. */
html[data-frf-design="web3"] #rstPoolsView :is(.rst-btn, .rst-btn.grau) {
  border-radius: var(--w3-radius-feld);
  font-weight: 500;
}
html[data-frf-design="web3"] #rstPoolsView .rst-btn.leise { background: transparent; box-shadow: none; }
html[data-frf-design="web3"] #rstPoolsView .rst-btn.orange.dirty { box-shadow: var(--w3-ring); }
html[data-frf-design="web3"] #rstPoolsView .rst-btn.wirklich { border-color: var(--w3-negativ); color: var(--w3-negativ-text); }
/* Menüs (Netzwerk, Börse, Favoriten, Presets): deckende Plattform-Fläche. */
html[data-frf-design="web3"] #rstPoolsView .rst-pop {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
}
/* „Mehr Filter“-Menü (17.10.2026): wie die übrigen Menüs, Rand white/10. */
html[data-frf-design="web3"] #rstPoolsView .rst-mehrpop {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] #rstPoolsView .rst-mehrfuss { border-top-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rstPoolsView .rst-mehrfilter.offen { border-color: transparent; box-shadow: var(--w3-ring); }
html[data-frf-design="web3"] #rstPoolsView .rst-eintrag.an button.rst-haken {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
/* Tabelle: Kopf #11141d mit white/45, sortierte Spalte weiß; Zeilenlinien white/6, Hover white/3. */
html[data-frf-design="web3"] #rstPoolsView .rst-kopf { color: var(--w3-text-3); font-weight: 500; }
html[data-frf-design="web3"] #rstPoolsView button.rst-kopf:hover,
html[data-frf-design="web3"] #rstPoolsView .rst-kopf.sort { color: var(--w3-text); }
html[data-frf-design="web3"] #rstPoolsView :is(.rst-zeile, .rst-kindinfo) { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rstPoolsView :is(.rst-zeile:hover, .rst-zeile.offen) { background: var(--w3-zeile-hover); }
html[data-frf-design="web3"] #rstPoolsView .rst-ausklapp { background: var(--w3-grund); border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #rstPoolsView .rst-fee { border-color: var(--w3-rand); }
/* Detail: Kennzahl-Kacheln und Rechner als Karte in der Karte. */
html[data-frf-design="web3"] #rstPoolsView :is(.rst-kachel, .rst-rechner, .rst-bk, .rst-ppd-block) {
  background: var(--w3-glanz), var(--w3-kopf);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #rstPoolsView .rst-tkarte { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] #rstPoolsView :is(.rst-rbar, .rst-skel) { background: var(--w3-fuellung-stark); }
/* Tooltip-Karte wie der Plattform-Hint. */
html[data-frf-design="web3"] #rstPoolsView .rst-tipkarte {
  background: var(--w3-tip);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-schatten);
  color: var(--w3-text-tip);
}
html[data-frf-design="web3"] #rstPoolsView .rst-tipformel { background: var(--w3-fuellung); border-color: transparent; border-left-color: var(--w3-akzent); }
/* Warnungen in der Warnfarbe, nicht im Akzent. */
html[data-frf-design="web3"] #rstPoolsView :is(.rst-hinweis.warn, .rst-presetmeldung.warn, .rst-tkarte.warn, .w, .rst-logzeile.w) { color: var(--w3-warnung); }
html[data-frf-design="web3"] #rstPoolsView :is(.rst-punkt.warn, .rst-neupunkt) { background: var(--w3-warnung); }
html[data-frf-design="web3"] #rstPoolsView .rst-warnzeile {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--w3-warnung) 45%, transparent);
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] #rstPoolsView .rst-warnzeile.fehler {
  background: color-mix(in srgb, var(--w3-negativ) 14%, transparent);
  border-color: var(--w3-negativ);
}

/* ── TEAM ▸ Musterportfolio ───────────────────────────────────────────
   Unterreiter und Sortierleiste der Börsen als Segment-Spur (gewählt white/10
   mit Innenkante), Karten (Tabelle, Börsen) mit Glanz und Innenkante,
   „Neue Position“ als Primärknopf, übrige Knöpfe und Empfehlungen als
   Sekundärknopf, Felder ganz gerundet, Seitenpanel und Dialoge in der
   deckenden Plattform-Fläche. Zahlenfarben bleiben (Signalfarben). */
html[data-frf-design="web3"] #samplePortfolioView .mp-reiter button:hover { background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"] #samplePortfolioView .mp-reiter :is(button[aria-selected="true"], button[aria-pressed="true"]) {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
  font-weight: 500;
}
html[data-frf-design="web3"] #samplePortfolioView .mp-bx-gesamt {
  background: var(--w3-glanz), var(--w3-flaeche);
}
html[data-frf-design="web3"] #samplePortfolioView .mp-bx-karte.ist-veraltet { box-shadow: var(--w3-kante), inset 0 0 0 1px var(--warning-soft); }
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-knopf, .mp-icon-knopf, .mp-akt) {
  border-radius: var(--w3-radius-feld);
}
/* „…“ je Zeile bleibt ein leiser Knopf ohne Fläche. */
html[data-frf-design="web3"] #samplePortfolioView .mp-menue > .mp-icon-knopf:not([aria-expanded="true"]) { background: transparent; box-shadow: none; }
html[data-frf-design="web3"] #samplePortfolioView .mp-akt.ist-ruhig { background: transparent; box-shadow: inset 0 0 0 1px var(--w3-rand); }
html[data-frf-design="web3"] #samplePortfolioView .mp-akt.ist-rot { background: color-mix(in srgb, var(--w3-negativ) 14%, transparent); }
html[data-frf-design="web3"] #samplePortfolioView .mp-akt.ist-gelb { background: var(--warning-soft); }
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf.mp-warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-warnung) 45%, transparent); }
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf-primaer {
  font-weight: 500;
}
html[data-frf-design="web3"] #samplePortfolioView .mp-knopf-primaer.ist-offen { box-shadow: var(--w3-ring); }
html[data-frf-design="web3"] #samplePortfolioView .mp-chip { border-color: var(--w3-rand); }
/* Tabelle: Kopf in white/45, sortierte Spalte weiß, Zeilenlinien white/6. */
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-th, .mp-sortier) { color: var(--w3-text-3); }
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-sortier:hover, .mp-sortier.ist-aktiv) { color: var(--w3-text); }
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-zeile, .mp-zeile-leer) { border-top-color: var(--w3-rand-leise); }
/* Menüs, Seitenpanel (Parameter), Dialoge: deckende Plattform-Fläche. */
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-menue-panel, .mp-mehr-panel) {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] #samplePortfolioView .mp-menue-panel button:hover { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #samplePortfolioView :is(.mp-panel, .mp-dialog) {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] #samplePortfolioView .mp-dialog { border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"] #samplePortfolioView .mp-panel-fuss { border-top-color: var(--w3-rand-leise); }

/* ── TEAM ▸ Paperbots und Backtester (V3BT-Bündel) ────────────────────
   Das Bündel (shadcn/Tailwind) liest seine Flächen als HSL-Dreiergruppen
   hsl(var(--card)) usw.; hier stehen die HSL-Gegenstücke der --w3-*-Tokens
   (Grund #040811, Karte #080c15, Fläche #11141d, Akzent #9ed3ff, Weiß-Stufen
   über der Karte deckend gemischt). Primär = Plattform-Akzent mit dunkler
   Schrift („Backtest starten“), --chart-1 = Akzent, --chart-2 = positiv.
   Doppelte Klasse wie v3bt-hell.css: das Bündel-CSS kommt später in den <head>. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.v3-backtester {
  --background: 222 61.9% 4.1%;
  --foreground: 0 0% 100%;
  --card: 222 44.8% 5.7%;
  --card-foreground: 0 0% 100%;
  --popover: 225 26.1% 9%;
  --popover-foreground: 0 0% 100%;
  --primary: 207 100% 81%;
  --primary-foreground: 222 61.9% 4.1%;
  --secondary: 222 23.3% 10.4%;
  --secondary-foreground: 0 0% 100%;
  --muted: 222 23.3% 10.4%;
  --muted-foreground: 222 2.7% 62.3%;
  --accent: 222 15.2% 15.1%;
  --accent-foreground: 0 0% 100%;
  --destructive: 360 78.4% 58.2%;
  --border: 222 15.2% 15.1%;
  --input: 222 23.3% 10.4%;
  --ring: 207 100% 81%;
  --field: 222 23.3% 10.4%;
  --chart-1: 207 100% 81%;
  --chart-2: 122 100% 81%;
  --radius: 12px;
  --check: var(--w3-akzent);
}
/* Hell (16.10.2026, nur privat): dieselben Variablen als HSL-Gegenstücke der
   hellen --w3-*-Tokens (Grund #f3f6fb, Karte/Popover weiß, Tinte #0b1220,
   Akzent #0b6fe0 mit weißer Schrift, Ränder/Felder als deckende Mischung). */
html[data-frf-design="web3"][data-theme="light"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.v3-backtester {
  --background: 216 47% 97%;
  --foreground: 220 49% 8.4%;
  --card: 0 0% 100%;
  --card-foreground: 220 49% 8.4%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 49% 8.4%;
  --primary: 212 91% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 214 33% 95%;
  --secondary-foreground: 220 49% 8.4%;
  --muted: 214 33% 95%;
  --muted-foreground: 224 8% 38%;
  --accent: 215 41% 93%;
  --accent-foreground: 220 49% 8.4%;
  --destructive: 351 67% 51%;
  --border: 215 26% 88%;
  --input: 216 38% 95%;
  --ring: 212 91% 46%;
  --field: 216 38% 95%;
  --chart-1: 212 91% 46%;
  --chart-2: 140 71.6% 26.3%;
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester .bg-background { background-color: transparent; }
/* Karten (Formularblöcke, Tabellen, Ergebnis): Glanz unten rechts, doppelte Innenkante. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester .bg-card.border:not(.border-dashed) {
  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"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester .bg-card.border-dashed {
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-karte);
}
/* Felder, Auswahl, Suche: white/5 ganz gerundet mit Innenkante, Fokus im Plattform-Ring. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil :is(.v3-feld, .v3-dd-ausloeser, .v3-dd-suche) {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil :is(.v3-feld, .v3-dd-ausloeser):is(:focus-visible, [data-state=open]) {
  border-color: transparent;
  box-shadow: var(--w3-kante-feld), var(--w3-ring);
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil :is(.v3-feld, .v3-dd-ausloeser)[aria-invalid=true] { box-shadow: var(--w3-kante-feld), 0 0 0 1px var(--w3-negativ); }
/* Menüs und Kalender: deckende Plattform-Fläche, gewählte Zeile white/10. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-dd-menue {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil :is(.v3-dd-option:hover, .v3-dd-option:focus, .v3-dd-option[data-highlighted], .v3-dd-option[data-active=true], .v3-mehr-option:hover, .v3-mehr-option[aria-checked=true]) {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: none;
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-mehr-aktion {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
/* Segment (Zeitfenster) und Schalter wie die Plattform. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-segment {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-segment-knopf { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-segment-knopf[aria-checked=true] {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-schalter { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-schalter[aria-checked=true] { background: var(--w3-akzent); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-schalter[aria-checked=true] .v3-schalter-knopf { background: var(--w3-akzent-text); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-haekchen:checked { border-color: var(--w3-akzent); }
/* Tabellen: Kopf #11141d in white/45, Zeilenlinien white/6, Hover white/3. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester th {
  background-color: var(--w3-flaeche);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil table.table-fixed > thead { background: var(--w3-flaeche); box-shadow: 0 1px 0 var(--w3-rand-leise); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester tr { border-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester tbody tr:hover { background-color: var(--w3-zeile-hover); }
/* Primärknopf ganz gerundet wie die Plattform; Tooltip-Karte im Hint-Stil. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester button.bg-primary { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester.frf-stil .v3-tipp-karte {
  background: var(--w3-tip);
  border-color: var(--w3-rand);
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-schatten);
  color: var(--w3-text-tip);
}
/* Handy: die Formularspalte darf schmaler werden als ihr breitester Inhalt
   (sonst 4 px Querscrollen bei 390 px, schon vor dem Umbau). */
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .grid > * { min-width: 0; }
@media (max-width: 480px) {
  /* Kartenränder am Handy 16 px wie die Plattform; so passt der Zeitraum ungekürzt. */
  html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester .bg-card > .p-6 { padding-left: 16px; padding-right: 16px; }
  html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester.frf-stil .v3-dd-ausloeser > .tabular { font-size: 13px; letter-spacing: -0.02em; }
}

/* ── Nutzer (Admin-Teile im Web3-Modus) ──────────────────────────────
   Gruppen-Matrix (/admin/web3, web3Admin.js), Kontenliste, Nachrichten,
   Statistik, Ask-Verlauf. Wie components/admin/*View.tsx der Plattform:
   Titel in normaler Schreibung (medium, weiß), Tabellenkopf #11141d mit
   white/45, Zeilenlinien white/6, Hover white/3; Unterreiter und
   Zeitraum-Wahl als Segment-Spur, Knöpfe als Sekundärknopf (Primär bleibt
   der Akzent aus der Grundlage), Kennzahlen als Karte in der Karte. */
html[data-frf-design="web3"] #usersView .nr-unterreiter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--w3-fuellung);
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #usersView .nr-unterreiter-knopf { border-color: transparent; padding: 6px 14px; }
html[data-frf-design="web3"] #usersView .nr-unterreiter-knopf:hover { background: var(--w3-fuellung-mittel); }
html[data-frf-design="web3"] #usersView .nr-unterreiter-knopf.is-aktiv {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: var(--w3-kante);
  font-weight: 500;
}
html[data-frf-design="web3"] #usersView .users-header { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #usersView .users-title {
  color: var(--w3-text);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
html[data-frf-design="web3"] #usersView :is(.users-sub, .users-count, .w3-hinweis) { color: var(--w3-text-2); }
/* Tabellen (Konten, Matrix, Nachrichten, Statistik, Ask). */
html[data-frf-design="web3"] #usersView :is(.users-table, .w3-matrix, .w3-nutzer, .nr-empf-tabelle) th {
  background-color: var(--w3-flaeche);
  color: var(--w3-text-3);
  font-weight: 500;
}
/* Zeilenköpfe der Matrix (Reiter) bleiben Schrift der Zeile, nur leiser Grund. */
html[data-frf-design="web3"] #usersView .w3-matrix tbody th {
  background-color: transparent;
  color: var(--w3-text);
  font-weight: 400;
}
html[data-frf-design="web3"] #usersView :is(.users-table, .w3-matrix, .w3-nutzer, .nr-empf-tabelle) :is(th, td) { border-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] #usersView :is(.users-table, .w3-matrix, .w3-nutzer) tbody tr:hover > :is(td, th) { background-color: var(--w3-zeile-hover); }
html[data-frf-design="web3"] #usersView :is(.nr-sortier.ist-aktiv, .users-sortier.ist-aktiv, .nr-sortier:hover) { color: var(--w3-text); }
html[data-frf-design="web3"] #usersView .w3-matrix-rahmen {
  background: var(--w3-glanz), var(--w3-karte);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #usersView .w3-limit-zeile > :is(th, td) { border-top: 1px solid var(--w3-rand); }
/* Felder: Ask-Limit je Gruppe, Suche. */
html[data-frf-design="web3"] #usersView :is(.w3-matrix input[type="number"], .catalog-search, input[type="search"]) {
  height: 30px;
  padding: 0 12px;
  background: var(--w3-fuellung);
  border: 1px solid transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
  font: inherit;
}
html[data-frf-design="web3"] #usersView .w3-matrix input[type="number"]::placeholder { color: var(--w3-text-3); }
html[data-frf-design="web3"] #usersView :is(.w3-matrix input[type="number"], input[type="search"]):focus { outline: none; box-shadow: var(--w3-kante-feld), var(--w3-ring); }
/* Knöpfe: Plattform-Sekundärknopf, ganz gerundet. */
html[data-frf-design="web3"] #usersView .lz-knopf { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] #usersView .lz-knopf.nr-gefahr { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-negativ) 45%, transparent); }
/* Zeitraum-Wahl (7 T / 30 T / 90 T, Nur nicht hilfreich). */
html[data-frf-design="web3"] #usersView .ns-segment {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #usersView .ns-chip { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] #usersView .ns-chip[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
  box-shadow: var(--w3-kante);
}
/* Kennzahlen und Top-Karten als Karte in der Karte (Gruppenfarbe oben bleibt). */
html[data-frf-design="web3"] #usersView .ng-top-karte { border-top-color: var(--ns-farbe, var(--w3-rand)); }
html[data-frf-design="web3"] #usersView .ng-zeile:hover { background: var(--w3-zeile-hover); }
html[data-frf-design="web3"] #usersView .ng-badge-admin { border-color: var(--w3-akzent-rand); color: var(--w3-akzent); }
/* Admin-Zeilen und Rollennamen der Matrix: Hervorhebung, keine Warnung –
   Akzent statt Orange (Neu/Anfrage bleiben in der Warnfarbe: Handlung nötig). */
html[data-frf-design="web3"] #usersView .users-table tbody tr.users-gruppe-admin td,
html[data-frf-design="web3"] #usersView .users-matrix .users-rolle-name { color: var(--w3-akzent); }
/* „Konten (n)“ stand ohne Innenabstand an der Kartenkante. */
html[data-frf-design="web3"] #usersNutzerBereich > h3.users-title { padding: 0 20px; }
html[data-frf-design="web3"] #usersNutzerBereich > .w3-matrix-rahmen { margin: 8px 0 20px; }

/* ── Tool settings (/einstellungen, web3Modus.js) ─────────────────────
   Wie Settings ▸ Profile der Plattform (components/settings/ProfileForm.tsx):
   Blöcke als Karte (white/5-Stufe, Glanz, Innenkante) ohne Randlinie,
   Überschriften medium, Hinweise white/60, Hauptaktion im Akzent, leise
   Aktionen als Sekundärknopf (white/5 + Innenkante), Kennung als Feld. */
html[data-frf-design="web3"] .w3-einstellungen-ansicht { color: var(--w3-text); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
html[data-frf-design="web3"] .w3-einstellungen-ansicht h2 { font-size: 16px; font-weight: 500; }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-block {
  margin: 16px 0;
  padding: 20px 24px;
}
html[data-frf-design="web3"] .w3-einstellungen-ansicht :is(.w3-hinweis, .w3-meldung) { color: var(--w3-text-2); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-knopf {
  padding: 9px 18px;
  background: var(--w3-akzent);
  border: 0;
  border-radius: var(--w3-radius-feld);
  color: var(--w3-akzent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-knopf:hover { background: color-mix(in srgb, var(--w3-akzent) 80%, transparent); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-knopf-leise {
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-knopf-leise:hover { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-kennung {
  padding: 7px 14px;
  background: var(--w3-fuellung);
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
/* Ladekreis der Pools-Reiter (style.css: Orange wie im PT). */
html[data-frf-design="web3"] .rst-view .tracking-lade-kreis { border-top-color: var(--w3-akzent); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-schalter { color: var(--w3-text); }
html[data-frf-design="web3"] .w3-einstellungen-ansicht .w3-schalter input { width: 16px; height: 16px; }

/* ── Ask FRF (Knopf, Panel, Vorstellung) ─────────────────────────────
   Der Akzent von Ask FRF war das Orange (--akf-akzent = --warning): im
   Modus der Plattform-Akzent mit dunkler Schrift (Knopf, Senden, Nummern,
   Markierungen im Reiter). Panel in der deckenden Plattform-Fläche
   (#11141d, wie Dialoge und Menüs), Eingabe ganz gerundet mit Innenkante,
   Vorschläge und Knöpfe als Sekundärknopf, eigene Frage als white/10-Blase.
   Echte Warnungen (Signale, „Nicht hilfreich“) bleiben in der Warnfarbe. */
html[data-frf-design="web3"] .akf-fab {
  color: var(--w3-akzent-text);
  font-weight: 600;
  box-shadow: var(--w3-schatten), 0 0 0 1px var(--w3-akzent-rand), 0 0 24px var(--w3-akzent-auswahl);
}
html[data-frf-design="web3"] .akf-fab:focus-visible { box-shadow: var(--w3-ring), var(--w3-schatten); }
html[data-frf-design="web3"] .akf-fab.akf-blinkt { animation-name: w3-akf-blinkt; }
@keyframes w3-akf-blinkt {
  0%, 55%, 100% { box-shadow: var(--w3-schatten), 0 0 0 1px var(--w3-akzent-rand), 0 0 24px var(--w3-akzent-auswahl); }
  20% { box-shadow: var(--w3-schatten), 0 0 0 6px var(--w3-akzent-rand), 0 0 36px var(--w3-akzent-rand); }
}
html[data-frf-design="web3"] .akf-panel {
  background: var(--w3-flaeche);
  border-left-color: var(--w3-rand);
  box-shadow: var(--w3-schatten);
}
html[data-frf-design="web3"] .akf-griff:is(:hover, :focus-visible)::after,
html[data-frf-design="web3"] body.akf-zieht .akf-griff::after { background: var(--w3-akzent); }
html[data-frf-design="web3"] :is(.akf-kopf, .akf-fuss) { border-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .akf-logo {
  background: var(--w3-akzent-flaeche);
  border-radius: var(--w3-radius-feld);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] .akf-titel { font-weight: 500; }
html[data-frf-design="web3"] .akf-icon { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] .akf-icon:hover { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] .akf-voll[aria-pressed="true"] { color: var(--w3-akzent); }
html[data-frf-design="web3"] .akf-du {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] .akf-chip { border-radius: var(--w3-radius-karte); }
html[data-frf-design="web3"] .akf-btn { border-radius: var(--w3-radius-feld); }
html[data-frf-design="web3"] .akf-btn-leise { background: transparent; box-shadow: none; }
html[data-frf-design="web3"] .akf-schritte-knopf:hover:not(:disabled) { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] :is(.akf-schritt[data-status="laeuft"] .akf-punkt, .akf-warten::before) {
  border-color: var(--w3-akzent);
  border-right-color: transparent;
}
html[data-frf-design="web3"] .akf-eingabe {
  height: 44px;
  padding: 0 18px;
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .akf-eingabe:focus { border-color: transparent; box-shadow: var(--w3-kante-feld), var(--w3-ring); }
html[data-frf-design="web3"] .akf-senden {
  width: 44px;
  height: 44px;
  border-radius: var(--w3-radius-feld);
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] .akf-fbfeld:focus { border-color: var(--w3-akzent); }
html[data-frf-design="web3"] .akf-panel.akf-bild-ziel .akf-fuss { box-shadow: inset 0 0 0 1px var(--w3-akzent-rand); }
html[data-frf-design="web3"] .akf-bild-meldung { border-left-color: var(--w3-akzent); }
/* Tabellen in Antworten: Kopf white/45 medium, Linien white/6. */
html[data-frf-design="web3"] .akf-tabelle th { color: var(--w3-text-3); font-weight: 500; }
html[data-frf-design="web3"] .akf-tabelle :is(th, td) { border-bottom-color: var(--w3-rand-leise); }
html[data-frf-design="web3"] .akf-tab-mk td { background: var(--w3-akzent-hauch); }
html[data-frf-design="web3"] .akf-tab-mk td:first-child { box-shadow: inset 2px 0 0 var(--w3-akzent); }
html[data-frf-design="web3"] :is(.akf-td-nr, .akf-th-nr) { color: var(--w3-akzent); }
/* Markierung im Reiter („zeig mir …“): Rahmen und Nummer im Akzent. */
html[data-frf-design="web3"] .akf-mk {
  box-shadow: 0 0 0 2px var(--w3-akzent), 0 0 0 6px var(--w3-akzent-hauch);
  animation-name: w3-akf-puls;
}
@keyframes w3-akf-puls {
  0% { box-shadow: 0 0 0 2px var(--w3-akzent), 0 0 0 2px var(--w3-akzent-rand); }
  70% { box-shadow: 0 0 0 2px var(--w3-akzent), 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 2px var(--w3-akzent), 0 0 0 6px var(--w3-akzent-hauch); }
}
html[data-frf-design="web3"] :is(tr.akf-mk, td.akf-mk, .exchange-item.akf-mk, .liq-row.akf-mk, .dep-zeile.akf-mk, .lifecycle-event.akf-mk) {
  box-shadow: inset 0 0 0 2px var(--w3-akzent);
}
html[data-frf-design="web3"] tr.akf-mk > td { background: var(--w3-akzent-hauch); }
html[data-frf-design="web3"] .akf-nr { color: var(--w3-akzent-text); }
/* Karten in Antworten (Web3-Lektionen, Pools): Kürzel, „Zum …“-Knopf und
   Link-Hover im Akzent statt Orange; Schwierigkeit „mittel“ bleibt gelb. */
html[data-frf-design="web3"] .akf-w3-kuerzel { color: var(--w3-akzent); }
html[data-frf-design="web3"] .akf-w3-zu:not(.akf-w3-zu-aus) {
  color: var(--w3-akzent);
  background: var(--w3-akzent-flaeche);
  border-color: var(--w3-akzent-rand);
}
html[data-frf-design="web3"] .akf-w3-zu:not(.akf-w3-zu-aus):hover { background: var(--w3-akzent-stark); }
html[data-frf-design="web3"] .akf-w3-link:hover { color: var(--w3-akzent); }

/* Vorstellung von Ask FRF und Nachrichten an Nutzer (nachrichtDialog.js in
   der Erklärkarte): Farben, Karte und Knöpfe kommen seit 13.10.2026 aus der
   Erklärkarte der Grundlage (web3-design.css); hier nur die Chips. */
html[data-frf-design="web3"] .nd-dialog .nd-chip { background: var(--w3-fuellung); border-color: transparent; box-shadow: var(--w3-kante-feld); }
html[data-frf-design="web3"] .nd-dialog .nd-chip:hover { background: var(--w3-fuellung-stark); border-color: transparent; }
/* Der Dialog hat beim Öffnen selbst den Fokus und soll dort keinen Rahmen
   zeigen (nachrichten.css); der Fokusring der Grundlage legte ein Rechteck darum. */
html[data-frf-design="web3"] dialog.nd-dialog:is(:focus, :focus-visible) { box-shadow: none; }

/* Backtester-Ergebnis */
/* ── TEAM ▸ Backtester mit Ergebnis und TEAM ▸ Pools, Detail einer Zeile ─
   (13.10.2026, Bilder WebApp/Tests/previews/frf-web3-rest-backtester/)
   Backtester: Beschriftungen im Markt-Kasten (Mark-Preis, Abdeckung,
   Start-Kurs) und Achsen der beiden Charts von 10 px auf 12 px; die
   Großbuchstaben-Beschriftungen in normaler Schreibung wie die übrigen
   Feldbeschriftungen des Formulars. Markt-Kasten als Karte in der Karte,
   Hinweise des Laufs als Plattform-Hint, der Warte-Hinweis (Start außerhalb
   der Range) in der Warnfarbe statt Tailwind-Amber. Handy: Zwischendaten der
   Zeitachse im Verlauf aus (überlappten schon bei 10 px), V3 APR als letzte
   Kennzahl über die ganze Breite statt allein in einer halben Spalte. */
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester :is(.text-\[10px\], .text-\[11px\]) {
  font-size: 12px;
  line-height: 16px;
}
html[data-frf-design="web3"] :is(#v3btDashboardView, #v3btBacktesterView) .v3-backtester svg text { font-size: 12px; }
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester dl.rounded-md.border {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester dl.rounded-md.border dt.uppercase {
  text-transform: none;
  letter-spacing: normal;
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .rounded-md.border.bg-muted\/40 {
  background: var(--w3-tip);
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  color: var(--w3-text-tip);
}
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .rounded-md.border.border-amber-500\/40 {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--w3-warnung) 45%, transparent);
  border-radius: var(--w3-radius-tip);
}
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .border-amber-500\/40 svg.text-amber-600 { color: var(--w3-warnung); }
@media (max-width: 639px) {
  html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester svg:has(#v3bt-plot) > text[text-anchor="middle"] { display: none; }
  html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .grid.grid-cols-2.xl\:grid-cols-5 > :nth-child(5):last-child { grid-column: 1 / -1; }
}
/* Pools, Detail einer Zeile auf dem Handy (≤ 900 px, Zeilen als Karten): das
   Detail hing mit 4 px Lücke und eigenem Rahmen unter der Zeilenkarte. Jetzt
   eine Karte: Zeile unten ohne Rundung, Detail schließt bündig an (gleiche
   Fläche wie die offene Zeile, Rand white/6, unten gerundet wie Karten). */
@media (max-width: 900px) {
  html[data-frf-design="web3"] #rstPoolsView .rst-zeile.offen:has(+ .rst-ausklapp) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  html[data-frf-design="web3"] #rstPoolsView .rst-zeile.offen + .rst-ausklapp {
    margin-top: -10px;
    background: var(--w3-zeile-hover);
    border-color: var(--w3-rand-leise);
    border-radius: 0 0 var(--w3-radius-karte) var(--w3-radius-karte);
  }
}
/* Aufgeklappte Level-Liste wie der Markt-Kasten: Karte in der Karte. */
html[data-frf-design="web3"] #v3btBacktesterView .v3-backtester .grid.max-h-56.rounded-md.border {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
}

/* Bot Testing (13.10.2026): Gold → Plattform-Akzent (Zahlen, Links, Bot-Chips,
   Vorschläge, Ziel-Formular), Bot-Reiter und Filter als Segment-Spur mit
   gewähltem Segment white/10 + Innenkante, „+ Neuer Eintrag“ als Primärknopf,
   übrige Knöpfe als Sekundärknopf, Suche als Plattform-Feld. Die Regeln
   kommen aus d-bot.css (Bot Testing nutzt dessen Bausteine); D-Bot selbst ist
   im Web3-Modus aus. */
html[data-frf-design="web3"] :is(#botTestingView, .bugs-gross) {
  --gold: var(--w3-akzent);
  --gold-rand: var(--w3-akzent-rand);
  --gold-flaeche: var(--w3-akzent-flaeche);
  --gold-hauch: var(--w3-akzent-hauch);
}
html[data-frf-design="web3"] #botTestingView .dbot-reiter-leiste,
html[data-frf-design="web3"] #botTestingView .bugs-filter__gruppe {
  padding: 3px;
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #botTestingView .dbot-reiter {
  border-color: transparent;
  background: transparent;
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #botTestingView .dbot-reiter:hover { color: var(--w3-text); }
html[data-frf-design="web3"] #botTestingView .dbot-reiter.is-aktiv {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf {
  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"] #botTestingView .dbot-knopf:hover:not([disabled]) {
  border-color: transparent;
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt {
  border-color: var(--w3-akzent);
  background: var(--w3-akzent);
  box-shadow: none;
  color: var(--w3-akzent-text);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt:hover:not([disabled]) {
  border-color: var(--w3-akzent);
  background: var(--w3-akzent);
  box-shadow: none;
  opacity: 0.8;
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--haupt.is-armiert {
  border-color: var(--w3-warnung);
  background: transparent;
  color: var(--w3-warnung);
}
html[data-frf-design="web3"] #botTestingView .dbot-knopf--gefahr {
  border-color: transparent;
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] #botTestingView :is(.dbot-suche, input[type="text"], input[type="search"], textarea, select) {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #botTestingView .dbot-suche { border-radius: var(--w3-radius-feld); }
/* Am Handy bricht die Bot-Leiste um: Spur als gerundete Fläche statt Pille. */
@media (max-width: 700px) {
  html[data-frf-design="web3"] #botTestingView .dbot-reiter-leiste { border-radius: var(--w3-radius-karte); }
}