/*
 * Web3-Design (12.10.2026), Teil „Depeg & Staking“, „ETF Spot“ und
 * „Route Lens“: dieselben Muster wie web3-design.css (Grundlage +
 * Fundingrates-Gruppe), nur für diese drei Reiter.
 *
 * Nur im Web3-Modus geladen (src/services/web3Shell.ts hängt die Datei direkt
 * nach web3-design.css an, unsere index.html kennt sie nicht) und jede Regel
 * an html[data-frf-design="web3"] gebunden: im normalen Modus ändert sich
 * nichts. Nur Aussehen – keine Logik, keine Daten, keine Bedienwege.
 * Farben ausschließlich über die --w3-*-Tokens aus web3-design.css.
 *
 * Vorbild: Web3-Repo defi-tools, components/tools/depeg-tracker/* (Karte mit
 * Glanz und doppelter Innenkante, Stat-Karten, Chart direkt auf der Karte,
 * Gitter white/5, Achsen white/40), components/ui/segmented-control.tsx,
 * components/ui/button.tsx (Primär = Akzent, Sekundär = white/5).
 *
 * Notiz und Abweichungen: WebApp/Tests/research/web3-platform-2026/DESIGN-DEPEG.md
 *
 * Seit 13.10.2026 in web3-design.css (Grundlage): Karte, Kennzahl-Kachel,
 * Feld, Segment-Spur, Sekundär-/Primärknopf, Schalter, Chart-Zeitleiste und
 * Chart-Tooltip. Hier bleibt, was die drei Reiter darüber hinaus brauchen.
 */

/* ── Depeg & Staking (LST-Märkte und Natives Staking) ──────────────────
   Filterleiste und Liste als Plattform-Karte, Kopf wie die Tabellenköpfe der
   Grundlage, Zeilenlinien white/6. Pillen, Segmente, Felder und Schalter wie
   in der Fundingrates-Gruppe. Aufgeklappt: Fläche im Grund (wie das Detail
   in Top Spreads), Kennzahlen als Kacheln, drei Infokarten als Karte in der
   Karte, Chart direkt auf der Fläche mit der Linie in --chart-1 (Akzent). */

html[data-frf-design="web3"] #depegView .dep-chip:hover:not([aria-pressed="true"]) {
  color: var(--w3-text);
}

html[data-frf-design="web3"] #depegView .dep-feld.ist-ungueltig {
  box-shadow: var(--w3-kante-feld), 0 0 0 1px var(--w3-negativ);
}
html[data-frf-design="web3"] #depegView .dep-step {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #depegView .dep-step:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #depegView .dep-select .catalog-trigger:hover:not(:disabled) {
  background: var(--w3-fuellung-mittel);
}

/* Aufklapplisten Hedge und Ausgeblendet: deckende Plattform-Fläche mit
   Schatten wie die Katalog-Popups der Grundlage. */
html[data-frf-design="web3"] #depegView :is(.dep-mehrfach .hedged-more-panel, .dep-ausblenden .fr-blacklist-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"] #depegView .dep-mehrfach :is(.hedged-more-item:hover, .hedged-more-action-btn:hover) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-blacklist-item {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #depegView .dep-ausblenden .fr-blacklist-item:hover {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  color: var(--w3-text);
}

/* Liste: am Desktop eine Karte; am Handy ist jede Zeile ihre eigene Karte
   (depeg.css macht die Hülle dort durchsichtig), deshalb nach Breite getrennt. */
@media (min-width: 721px) {
  html[data-frf-design="web3"] #depegView .dep-karte {
    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"] #depegView .dep-kopf {
    background: var(--w3-flaeche);
    border-color: var(--w3-rand-leise);
    border-radius: var(--w3-radius-karte) var(--w3-radius-karte) 0 0;
    color: var(--w3-text-3);
    font-weight: 500;
  }
  html[data-frf-design="web3"] #depegView .dep-fuss {
    border-color: var(--w3-rand-leise);
  }
}
@media (max-width: 720px) {
  html[data-frf-design="web3"] #depegView :is(.dep-reihe.dep-lst, .dep-reihe.dep-nativ, .dep-meldung) {
    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"] #depegView .dep-zeile.ist-offen {
    border-radius: var(--w3-radius-karte) var(--w3-radius-karte) 0 0;
  }
  html[data-frf-design="web3"] #depegView .dep-detail {
    background: var(--w3-grund);
    border-color: transparent;
    border-radius: 0 0 var(--w3-radius-karte) var(--w3-radius-karte);
    box-shadow: var(--w3-kante);
  }
  html[data-frf-design="web3"] #depegView .dep-infokarte {
    background: transparent;
    border-color: var(--w3-rand-leise);
    box-shadow: none;
  }
}

/* Zeilen: Linien white/6, Hover und offen deckend white/3 (wie die Tabellen
   der Grundlage). Der Jetzt-Punkt im Lage-Balken bekommt den Rand der Fläche. */
html[data-frf-design="web3"] #depegView .dep-zeile {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #depegView :is(.dep-zeile:hover, .dep-zeile.ist-offen) {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #depegView .dep-skel-zeile:hover {
  background: transparent;
}
html[data-frf-design="web3"] #depegView .dep-meldung {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #depegView .dep-bdot {
  box-shadow: 0 0 0 2px var(--w3-karte);
}
html[data-frf-design="web3"] #depegView :is(.dep-zeile:hover, .dep-zeile.ist-offen) .dep-bdot {
  box-shadow: 0 0 0 2px var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #depegView .dep-bahn {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #depegView .dep-sortknopf.ist-sortiert {
  color: var(--w3-text);
}

/* Logo-Kreise und Abzeichen: Kreis white/10 statt grauem Rand, „Kurs-Token“
   als leiser Sekundär-Chip, „Kaufzone“ in der Plattform-Signalfarbe. */
html[data-frf-design="web3"] #depegView .asset-token-mark.dep-logo {
  background: var(--w3-fuellung);
  border-color: var(--w3-rand);
}
html[data-frf-design="web3"] #depegView .dep-badge {
  background: color-mix(in srgb, var(--w3-positiv) 12%, transparent);
  border-color: transparent;
  color: var(--w3-positiv);
}

/* Kleine Knöpfe ohne Fläche (Auge, Kopieren, Bester Short). */
html[data-frf-design="web3"] #depegView :is(.dep-auge, .dep-kopie, .dep-short):hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #depegView .dep-short[aria-expanded="true"] {
  background: var(--w3-fuellung-stark);
  box-shadow: var(--w3-kante);
}

/* Blättern: wie die Plattform-Pagination, aktuelle Seite white/10. */
html[data-frf-design="web3"] #depegView .dep-seite:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #depegView .dep-seite[aria-current="page"] {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  box-shadow: var(--w3-kante);
  color: var(--w3-text);
}

/* Aufgeklappt: Fläche im Grund wie das Detail in Top Spreads. */
@media (min-width: 721px) {
  html[data-frf-design="web3"] #depegView .dep-detail {
    background: var(--w3-grund);
    border-color: var(--w3-rand-leise);
  }
  /* Drei Infokarten als Karte in der Karte. */
  html[data-frf-design="web3"] #depegView .dep-infokarte {
    background: var(--w3-glanz), var(--w3-karte);
    border-color: transparent;
    border-radius: var(--w3-radius-karte);
    box-shadow: var(--w3-kante);
  }
}
/* Kennzahlen wie die Stat-Karten des Depeg-Trackers (DepegStats). */
html[data-frf-design="web3"] #depegView .dep-kachel-wert {
  font-weight: 500;
}
html[data-frf-design="web3"] #depegView .dep-trenn {
  background: var(--w3-rand-leise);
}

/* Chart: direkt auf der Fläche wie DepegChart (keine eigene Fläche),
   Zeitleiste und Fenster im Akzent wie im Reiter Fundingrates, Linie und
   Jetzt-Punkt in der ersten Chartfarbe (--chart-1 = Akzent). Kaufzone und
   Schwelle bleiben in der Signalfarbe (--check). */
html[data-frf-design="web3"] #depegView .dep-chart .chart-line {
  stroke: var(--w3-akzent);
}
html[data-frf-design="web3"] #depegView .dep-ebene-jetzt:not(.ist-kaufzone) {
  fill: var(--w3-akzent);
  stroke: var(--w3-akzent-flaeche);
}
html[data-frf-design="web3"] #depegView .dep-hover-punkt {
  background: var(--w3-grund);
  border-color: var(--w3-akzent);
}
html[data-frf-design="web3"] #depegView .dep-spark-linie {
  stroke: var(--w3-akzent);
}
/* „Noch kein Verlauf …“ und „90 T · 7 T rollierend“ lagen übereinander
   (Text absolut oben rechts): Platz darüber für die Beschriftung. */
html[data-frf-design="web3"] #depegView .dep-spark {
  padding-top: 20px;
}

/* Börsenkarte „Bester Short“ (hängt am <body>): Plattform-Fläche wie die
   Popups der Grundlage, beste Zeile white/10, Hinweis ≥ 12 px. */
html[data-frf-design="web3"] .staking-karte.dep-boersenkarte {
  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"] .dep-boersenkarte .staking-bt-zeile {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] .dep-boersenkarte .staking-bt-zeile.ist-beste {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] .dep-boersenkarte .staking-bt-kopf {
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] .dep-boersenkarte .staking-bt-hinweis {
  font-size: 12px;
}

/* ── ETF Spot („Spot vs. Perp“, Neubau 16.10.2026) ──────────────────────
   Hülle als Plattform-Karte, Titel und Unterzeile wie die Tool-Seiten der
   Plattform (Titel weiß, medium, ohne Großbuchstaben; Text white/60).
   Tabelle wie die Plattform-Tabellen: Kopf white/4, Zeilenlinien white/6,
   Hover/offen white/3. Filter-Chips als Segmente, Status-Pille leise.
   Im Detail Kacheln und Blöcke als Karte in der Karte (web3-design.css).
   Abweichung in den Signalfarben. */

html[data-frf-design="web3"] #etfView .etf-header .panel-title-bordered {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--w3-text);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
html[data-frf-design="web3"] #etfView .etf-untertitel {
  color: var(--w3-text-2);
  font-size: 13px;
}
html[data-frf-design="web3"] #etfView .etf-updated {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #etfView .etf-btn {
  border-radius: var(--w3-radius-feld);
  color: var(--w3-text);
  font-weight: 500;
  letter-spacing: 0;
}
html[data-frf-design="web3"] #etfView .etf-pille {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView .etf-pille.is-offen::before {
  background: var(--w3-positiv);
}
html[data-frf-design="web3"] #etfView .etf-pille.is-zu::before {
  background: var(--w3-warnung);
}
html[data-frf-design="web3"] #etfView .etf-chip {
  border-color: transparent;
  border-radius: var(--w3-radius-feld);
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView .etf-chip:hover {
  background: var(--w3-fuellung-mittel);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView .etf-chip.is-an {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView :is(.etf-chip, .etf-sortknopf, .etf-auf, .etf-mehr, .etf-pille):focus-visible,
html[data-frf-design="web3"] #etfView .etf-ratio-block > summary:focus-visible {
  box-shadow: var(--w3-ring);
}
html[data-frf-design="web3"] #etfView .etf-tabelle th {
  background: var(--w3-kopf);
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView .etf-tabelle th:first-child {
  border-radius: var(--w3-radius-tip) 0 0 var(--w3-radius-tip);
}
html[data-frf-design="web3"] #etfView .etf-tabelle th:last-child {
  border-radius: 0 var(--w3-radius-tip) var(--w3-radius-tip) 0;
}
html[data-frf-design="web3"] #etfView :is(.etf-sortknopf:hover, .etf-sortknopf.is-active, .etf-kopf-label:hover) {
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView .etf-tabelle td {
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView :is(.etf-zeile:hover, .etf-zeile.is-offen) > td,
html[data-frf-design="web3"] #etfView .etf-detailzeile > td {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #etfView .etf-detailzeile > td {
  border-bottom-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #etfView :is(.etf-sym, .etf-spot-name, .etf-wert) {
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView :is(.etf-klein, .etf-neutral, .etf-leise, .etf-kachel-label, .etf-ausgeblendet, .etf-leer-text) {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #etfView .etf-pos {
  color: var(--w3-positiv);
}
html[data-frf-design="web3"] #etfView .etf-neg {
  color: var(--w3-negativ-text);
}
html[data-frf-design="web3"] #etfView .etf-auf {
  border-radius: var(--w3-radius-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #etfView .etf-auf:hover {
  border-color: transparent;
  background: var(--w3-fuellung-mittel);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView :is(.etf-kachel, .etf-block) {
  border-color: transparent;
}
html[data-frf-design="web3"] #etfView .etf-kachel strong {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView :is(.etf-block-titel, .etf-ratio-block > summary) {
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView .etf-ratio-block > summary:hover {
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView .etf-zaehler {
  background: var(--w3-fuellung);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #etfView :is(.etf-platz, .etf-ratio-block) {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #etfView .etf-platz.is-bester .etf-platz-preis {
  font-weight: 500;
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #etfView .etf-mehr {
  border-color: transparent;
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #etfView .etf-mehr:hover {
  background: var(--w3-fuellung-mittel);
  color: var(--w3-text);
}
/* Detail seit 16.10.2026: Gruppen Zentrale Börsen/DeFi, gedämpfte Plätze,
   Ø 30 T je Platz mit Bewertung, Links zur Handelsseite, Kopier-Knopf. */
html[data-frf-design="web3"] #etfView .etf-gruppe-titel {
  color: var(--w3-text);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView :is(.etf-platz-kopf, .etf-schnitt-vor, .etf-bewertung) {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #etfView .etf-bewertung.is-guenstig {
  color: var(--w3-positiv);
  font-weight: 500;
}
html[data-frf-design="web3"] #etfView .etf-platz.is-guenstig {
  box-shadow: inset 2px 0 0 var(--w3-positiv);
}
html[data-frf-design="web3"] #etfView .etf-platz.is-aus,
html[data-frf-design="web3"] #etfView .etf-platz.is-aus :is(.etf-platz-preis, .etf-klein, .help-label) {
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #etfView a.etf-link:hover {
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #etfView :is(a.etf-link, .etf-kopieren):focus-visible {
  box-shadow: var(--w3-ring);
}
html[data-frf-design="web3"] #etfView .etf-kopieren {
  border-radius: var(--w3-radius-feld);
  color: var(--w3-text-3);
}
html[data-frf-design="web3"] #etfView .etf-kopieren:hover {
  border-color: transparent;
  background: var(--w3-fuellung-mittel);
  color: var(--w3-text);
}
html[data-frf-design="web3"] #etfView .etf-kopieren.is-kopiert {
  color: var(--w3-positiv);
}
html[data-frf-design="web3"] #etfView .etf-kopiert {
  border-radius: var(--w3-radius-feld);
  background: var(--w3-tip);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text);
}

/* ── Route Lens ────────────────────────────────────────────────────────
   Eigenes Bündel (route-lens/, lädt public/route-lens/route-lens.css erst
   beim ersten Öffnen nach, alles unter .route-lens-scope mit eigenen Tokens
   am Scope). Der Bau bleibt unangetastet: hier werden nur die Scope-Tokens im
   Modus auf die Plattform umgelegt – (0,3,1) schlägt `.route-lens-scope
   [data-theme=dark]` und `html[data-theme] .route-lens-scope` aus dem Bündel,
   egal in welcher Reihenfolge die Dateien laden. Gilt auch für den
   Portal-Host der Auswahlfenster (gleiche Klasse, gleiches data-theme).
   Scrollen bleibt wie es ist (Routenliste und Picker dürfen in sich scrollen). */

html[data-frf-design="web3"] .route-lens-scope[data-theme] {
  --surface-0: var(--w3-grund);
  --surface-1: var(--w3-karte);
  --surface-2: var(--w3-flaeche);
  --surface-3: var(--w3-hover);
  --text-1: var(--w3-text);
  --text-2: var(--w3-text-2);
  --text-3: var(--w3-text-3);
  --text-inv: var(--w3-grund);
  --border-1: var(--w3-rand-leise);
  --border-2: var(--w3-rand);
  --border-3: color-mix(in srgb, var(--w3-text) 20%, transparent);
  --primary-bg: var(--w3-fuellung-stark);
  --primary-border: color-mix(in srgb, var(--w3-text) 14%, transparent);
  --primary-text: var(--w3-text);
  --primary-hover-border: color-mix(in srgb, var(--w3-text) 24%, transparent);
  --primary-glow: var(--w3-kante);
  --secondary-bg: transparent;
  --secondary-border: var(--w3-rand);
  --secondary-hover-bg: var(--w3-fuellung-mittel);
  --secondary-hover-border: color-mix(in srgb, var(--w3-text) 16%, transparent);
  --secondary-text: var(--w3-text);
  --danger: var(--w3-negativ);
  --danger-hover: var(--w3-fehler);
  --success: var(--w3-positiv);
  --success-soft: color-mix(in srgb, var(--w3-positiv) 12%, transparent);
  --check: var(--w3-positiv);
  --warning: var(--w3-warnung);
  --warning-soft: color-mix(in srgb, var(--w3-warnung) 14%, transparent);
  --info: var(--w3-akzent);
  --info-soft: var(--w3-akzent-hauch);
  --focus-ring: var(--w3-ring);
  --focus-color: var(--w3-akzent);
  --overlay: color-mix(in srgb, var(--w3-grund) 60%, transparent);
  --overlay-solid: color-mix(in srgb, var(--w3-grund) 88%, transparent);
  --shadow-md: var(--w3-schatten);
  --shadow-lg: var(--w3-schatten);
  --input-bg: var(--w3-fuellung);
  --input-border: var(--w3-rand-leise);
  --input-focus-ring: var(--w3-ring);
  --scrollbar-thumb: var(--w3-scroll);
  --scrollbar-thumb-hover: var(--w3-scroll-hover);
  /* Schrift wie im übrigen Modus: Geist, Gewichte der Plattform. */
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 600;
  /* Laufender Pfad auf der Karte in der ersten Chartfarbe. */
  --flow: var(--w3-akzent);
}

/* Infobereich (FRF-Hülle, style.css; seit 16.10.2026 neutral statt „im Bau“): Fläche ohne Rand. */
html[data-frf-design="web3"] .route-lens-view .route-lens-notice {
  background: var(--w3-fuellung);
  border-color: transparent;
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante-feld);
  color: var(--w3-text-2);
}

/* Karten (Eingabe, Karte, Routen) und Routenzeilen: Figma-Karte mit Glanz
   und doppelter Innenkante, ohne sichtbare Randlinie. */
html[data-frf-design="web3"] .route-lens-scope .rsum {
  border-radius: var(--w3-radius-karte);
}
html[data-frf-design="web3"] .route-lens-scope :is(.row:hover, .row.is-hover) {
  background: var(--w3-glanz), var(--w3-zeile-hover);
  border-color: transparent;
}
/* Gewählte Route: Fläche wie ein aufgeklapptes Detail, Rand im Akzent. */
html[data-frf-design="web3"] .route-lens-scope .row.is-sel {
  background: var(--w3-glanz), var(--w3-flaeche);
  border-color: var(--w3-akzent-rand);
  box-shadow: var(--w3-kante);
}

/* Segment-Spur (Kaufen/Onramp/Swap/Bridge, Sortierung): white/5, Marke
   white/10 mit Innenkante wie das gewählte Plattform-Segment. */
html[data-frf-design="web3"] .route-lens-scope .seg-ind {
  box-shadow: var(--w3-kante);
}

/* Token-/Ketten-Chips, Betragsfeld, Tauschen-Pfeil, Symbolknöpfe, Wallet:
   Plattform-Feld bzw. Sekundärknopf (white/5, Innenkante, ganz gerundet). */
html[data-frf-design="web3"] .route-lens-scope :is(.amt, .iconbtn) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] .route-lens-scope .wallet-btn.is-connected {
  background: color-mix(in srgb, var(--w3-positiv) 10%, transparent);
}

/* Knöpfe: Sekundär white/5; „Tauschen“ und „Diese Route tauschen“ als
   Primärknopf im Akzent (components/ui/button.tsx, default). */
html[data-frf-design="web3"] .route-lens-scope .btn {
  border-radius: var(--w3-radius-feld);
}

/* Karte der Pfade: gewählter Weg und seine Marke im Akzent. */
html[data-frf-design="web3"] .route-lens-scope .lane.is-sel .lane-path {
  stroke: var(--w3-akzent);
}
html[data-frf-design="web3"] .route-lens-scope .lane.is-sel .pill rect {
  stroke: var(--w3-akzent-rand);
  fill: var(--w3-flaeche);
}
html[data-frf-design="web3"] .route-lens-scope .node-core {
  fill: var(--w3-akzent);
}

/* Schrittkette und Anbieter: Chips in white/4 ohne Randlinie. */
html[data-frf-design="web3"] .route-lens-scope :is(.way li:not(.muted), .src) {
  background: var(--w3-kopf);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .route-lens-scope .src-bar i {
  background: var(--w3-akzent);
}

/* Auswahlfenster (Token/Kette, Wallet): Plattform-Dialog auf --surface. */
html[data-frf-design="web3"] .route-lens-scope .modal-card {
  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"] .route-lens-scope :is(.tp-search, .tp-chains) {
  background: var(--w3-flaeche);
}
html[data-frf-design="web3"] .route-lens-scope :is(.wallet-card, .wallet-modal-summary, .checklist-steps li) {
  background: var(--w3-kopf);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .route-lens-scope .wallet-card:hover:not(:disabled) {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
}
/* Suchfelder im Auswahlfenster: Fokusring gerundet statt eckig. */
html[data-frf-design="web3"] .route-lens-scope .tp-search input {
  border-radius: var(--w3-radius-tip);
}

/* ETF: Spaltenköpfe der scrollenden Spot-Liste (16.10.2026) mit Kartenfläche. */
html[data-frf-design="web3"] #etfView .etf-liste-plaetze > .etf-platz-kopf {
  background: var(--w3-karte);
}