/*
 * 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);
  }
}
/* Sticky name column (depeg.css, 721–1240 px): same surfaces as the head and rows here
   (responsive pass 25.10.2026). */
@media (min-width: 721px) and (max-width: 1240px) {
  html[data-frf-design="web3"] #depegView .dep-tabelle .dep-kopf > :nth-child(2) { --dep-klebe-bg: var(--w3-flaeche); }
  html[data-frf-design="web3"] #depegView .dep-tabelle .dep-zeile > :nth-child(2) { --dep-klebe-bg: var(--w3-karte); }
  html[data-frf-design="web3"] #depegView .dep-tabelle .dep-zeile:is(:hover, .ist-offen) > :nth-child(2) { --dep-klebe-bg: var(--w3-zeile-hover); }
}
@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: 999px;
  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);
}

/* Anbieter: Chips in white/4 ohne Randlinie. */
html[data-frf-design="web3"] .route-lens-scope .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);
}

/* Eingabe als zwei Felder (Variante A, 28.10.2026): Felder als Plattform-Fläche
   (white/4, Innenkante), das Ergebnisfeld im Akzent-Hauch mit feinem Akzent-Rand,
   gewählter Anbieter im Weg-Band mit Akzent-Rand (wie im abgenommenen Mockup;
   der Knopf zum Anbieter ist als .btn-primary schon im Akzent, web3-design.css). */
html[data-frf-design="web3"] .route-lens-scope .fld {
  background: var(--w3-kopf);
  border-color: transparent;
  border-radius: var(--w3-radius-tip);
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] .route-lens-scope .fld:focus-within {
  box-shadow: var(--w3-kante-feld), 0 0 0 1px var(--w3-rand);
}
html[data-frf-design="web3"] .route-lens-scope .fld-out {
  background: var(--w3-akzent-hauch);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-akzent) 18%, transparent);
}
html[data-frf-design="web3"] .route-lens-scope :is(.flip, .pair-arrow) {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] .route-lens-scope :is(.unit, .band-tgl) {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
/* Pills on the way band sit on the line: solid surface, so the line does not show through. */
html[data-frf-design="web3"] .route-lens-scope .stp {
  background: var(--w3-flaeche);
  border-color: var(--w3-rand);
}
html[data-frf-design="web3"] .route-lens-scope .stp.is-on {
  border-color: var(--w3-akzent-rand);
  background: var(--w3-flaeche);
}
html[data-frf-design="web3"] .route-lens-scope .wire::before {
  background: linear-gradient(90deg, var(--w3-akzent), color-mix(in srgb, var(--w3-akzent) 50%, transparent));
  opacity: 1;
}
html[data-frf-design="web3"] .route-lens-scope .prov {
  box-shadow: 0 0 0 2px var(--w3-karte);
}
/* Amount in the field: plain text on the field's surface, the field shows focus. */
html[data-frf-design="web3"] .route-lens-scope .fld .amt,
html[data-frf-design="web3"] .route-lens-scope .fld .amt:focus {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 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);
}
/* Phone and tablet: the view already has the shell gutter, so the bundle's own 16 px side
   padding is dropped and the cards line up with the notice and the other tabs. From 961 px
   the bundle sets its own desktop padding, which stays (responsive pass 25.10.2026). */
@media (max-width: 960px) {
  html[data-frf-design="web3"] #routeLensView .route-lens-scope .rl-app { padding-inline: 0; }
}
/* Phone: the mode switch stays on one line next to the wallet button, and route names
   use two lines instead of an ellipsis at 128 px. The ID beats the bundle's (0,2,0) rules. */
@media (max-width: 560px) {
  html[data-frf-design="web3"] #routeLensView .route-lens-scope .top .seg-lg { flex-wrap: nowrap; }
  html[data-frf-design="web3"] #routeLensView .route-lens-scope .seg-lg > button { padding: 7px 11px; }
  html[data-frf-design="web3"] #routeLensView .route-lens-scope .r-title strong {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* 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);
}