/*
 * Web3-Design, Gruppe „Börsen ▾“ (12.10.2026): Liquidität, Kosten und Margin,
 * Carry im Aussehen der Web3-Universe-Plattform.
 *
 * Ergänzt web3-design.css (Grundlage: Geist, Tokens --w3-*, Karten, Felder,
 * Tabellen, Tooltips, Schalter) um die drei Börsen-Reiter, mit denselben
 * Mustern wie die Fundingrates-Gruppe: Segment-Spur (white/5, gewählt white/10
 * mit Innenkante), Sekundärknopf (white/5 mit Innenkante, ohne Randlinie),
 * Primärknopf im Akzent, Kennzahl-Kacheln und Karte in der Karte (Glanz unten
 * rechts, doppelte Innenkante), Chartfarben --chart-1..3 = Akzent, hell, tief.
 *
 * Wie web3-design.css nur über die Shell geladen (src/services/web3Shell.ts,
 * direkt danach) und jede Regel an html[data-frf-design="web3"] gebunden: im
 * normalen Modus ändert sich nichts. Nur Aussehen – keine Logik, keine Daten.
 * Farben nur über var(): die Tokens stehen in web3-design.css.
 *
 * Notiz: WebApp/Tests/research/web3-platform-2026/DESIGN-BOERSEN.md
 */

/* Seit 13.10.2026 stehen in web3-design.css (Grundlage): --fs-11 → 12 px,
   Links im Akzent, Katalog-Auswahl ganz gerundet, Karte, Kennzahl-Kachel,
   Feld, Segment-Spur, Sekundär-/Primärknopf und die Schalter. Hier bleibt,
   was die drei Reiter darüber hinaus brauchen. Platzhalter-Buchstaben in
   Mini-Logos (9–10 px in 16–20-px-Feldern) bleiben klein wie in der
   Fundingrates-Gruppe. */

/* Liquidität ───────────────────────────────────────────────────────────
   Beide Ansichten („Alle Börsen“ und „Hauptbörse + Hedges“): Filterleiste und
   Tabelle als Plattform-Karte, Suche und Zahlenfeld als Plattform-Feld,
   Ansicht/Preisband/Buchtiefe als Segment-Spur, Börsen-Knopf, Blättern und
   Schnellwahl als Sekundärknopf, Schalter an = Akzent. Tabellenkopf deckend
   in der Plattform-Fläche, Zeilen-Hover white/3, aufgeklappt auf dem Grund
   mit Karte in der Karte. Kacheln der Hedge-Ansicht als Kennzahl-Kacheln.
   Kästchen „handelbar“ in den Signalfarben der Plattform, OI-Balken im
   Akzent (--chart-1). */
/* Segment-Spur: Ansicht, Preisband, Zeitpunkt/Buchtiefe */
html[data-frf-design="web3"] #liquidityView :is(.liq-segment, .lh-seg) {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #liquidityView :is(.liq-chip, .lh-chip) {
  border-radius: var(--w3-radius-feld);
  color: var(--w3-text-2);
}
html[data-frf-design="web3"] #liquidityView :is(.liq-chip, .lh-chip):hover { color: var(--w3-text); }
html[data-frf-design="web3"] #liquidityView :is(.liq-chip, .lh-chip)[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  color: var(--w3-text);
  box-shadow: var(--w3-kante);
}

html[data-frf-design="web3"] #liquidityView .lh-pill[aria-pressed="true"] {
  background: var(--w3-fuellung-stark);
  border-color: transparent;
  color: var(--w3-text);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #liquidityView .liq-badge {
  background: var(--w3-fuellung-stark);
}

/* Tabelle „Alle Börsen“ (Raster aus Zeilen): Kopf deckend, Hover white/3,
   aufgeklappt in der Plattform-Fläche; die Ringe um die Börsenlogos folgen
   dem Zeilengrund. Detail auf dem Grund wie die Detailzeilen der
   Fundingrates-Gruppe. */
html[data-frf-design="web3"] #liquidityView .liq-row-head {
  background: var(--w3-flaeche);
}
html[data-frf-design="web3"] #liquidityView :is(.liq-row, .liq-drow, .liq-empty) {
  border-top-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #liquidityView .liq-row-body:hover {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #liquidityView .liq-row-body.is-open {
  background: var(--w3-flaeche);
}
html[data-frf-design="web3"] #liquidityView .liq-logo-ring {
  box-shadow: 0 0 0 2px var(--w3-karte);
}
html[data-frf-design="web3"] #liquidityView .liq-row-body:hover .liq-logo-ring {
  box-shadow: 0 0 0 2px var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #liquidityView .liq-row-body.is-open .liq-logo-ring {
  box-shadow: 0 0 0 2px var(--w3-flaeche);
}
html[data-frf-design="web3"] #liquidityView .liq-eye-btn:hover {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #liquidityView .liq-detail {
  background: var(--w3-grund);
  border-top-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #liquidityView .liq-sort.is-active,
html[data-frf-design="web3"] #liquidityView .lh-sort.is-active {
  color: var(--w3-text);
}
html[data-frf-design="web3"] #liquidityView :is(.liq-sortpfeil, .lh-pfeil) {
  color: var(--w3-akzent);
}

/* Kästchen „handelbar je Börse“ (und ihre Legende im Kopf-Tooltip): voll =
   Plattform-Grün, teilweise = Warnung, keins = leise Fläche. */
html[data-frf-design="web3"] #liquidityView .liq-voll,
html[data-frf-design="web3"] .value-tip-layer .liq-tip-kasten.liq-voll {
  background: color-mix(in srgb, var(--w3-positiv) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-positiv) 45%, transparent);
}
html[data-frf-design="web3"] #liquidityView .liq-kein,
html[data-frf-design="web3"] .value-tip-layer .liq-tip-kasten.liq-kein {
  background: var(--w3-fuellung);
  box-shadow: inset 0 0 0 1px var(--w3-rand);
}
html[data-frf-design="web3"] #liquidityView .liq-laden {
  background: var(--w3-fuellung);
  box-shadow: inset 0 0 0 1px var(--w3-rand-leise);
}

/* Bewertung als Schrift und Balken in den Plattform-Signalfarben. */
html[data-frf-design="web3"] #liquidityView .liq-mittel { color: var(--w3-warnung); }
html[data-frf-design="web3"] #liquidityView :is(.liq-schwach, .liq-cap-text.liq-schwach) { color: var(--w3-negativ-text); }
html[data-frf-design="web3"] #liquidityView .liq-bar { background: var(--w3-fuellung-stark); }
html[data-frf-design="web3"] #liquidityView .liq-bar-grau { background: var(--w3-akzent); }
html[data-frf-design="web3"] #liquidityView .liq-bar-gelb { background: var(--w3-warnung); }
html[data-frf-design="web3"] #liquidityView .liq-bar-rot { background: var(--w3-negativ); }

/* Ansicht „Hauptbörse + Hedges“: Kennzahlen als einzelne Kacheln (Karte mit
   Glanz) statt einer Leiste mit Trennlinien. */
html[data-frf-design="web3"] #liquidityView .lh-kacheln {
  gap: var(--space-3);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
html[data-frf-design="web3"] #liquidityView :is(.lh-kachel, .lh-kacheln .lz-skel-karte) {
  background: var(--w3-glanz), var(--w3-karte);
  border-radius: var(--w3-radius-karte);
  box-shadow: var(--w3-kante);
}
html[data-frf-design="web3"] #liquidityView .lh-kachel-wert {
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
}

/* Tabelle der Hedge-Ansicht: beide Kopfzeilen deckend in der Plattform-Fläche. */
html[data-frf-design="web3"] #liquidityView .lh-tabelle > thead th {
  background: var(--w3-flaeche);
  color: var(--w3-text-3);
  font-weight: 500;
}
html[data-frf-design="web3"] #liquidityView .lh-gruppe th { color: var(--w3-text-2); }
html[data-frf-design="web3"] #liquidityView .lh-tabelle :is(th, td) {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #liquidityView .lh-zeile:hover > td {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #liquidityView .lh-zeile.is-open > td {
  background: var(--w3-flaeche);
}
/* Grüne Zellen („reicht“) behalten ihre Fläche auch unter Hover und aufgeklappt. */
html[data-frf-design="web3"] #liquidityView .lh-zeile:is(:hover, .is-open) > td.lh-ok {
  background: var(--success-soft);
}
html[data-frf-design="web3"] #liquidityView .lh-tabelle > tbody > tr.lh-detail > td {
  background: var(--w3-grund);
}
html[data-frf-design="web3"] #liquidityView .lh-dtab th {
  background: transparent;
  border-bottom-color: var(--w3-rand);
}
html[data-frf-design="web3"] #liquidityView .lh-fuss {
  border-top-color: var(--w3-rand-leise);
}

/* Kosten und Margin ────────────────────────────────────────────────────
   Tabelle als Plattform-Karte mit deckendem Kopf (Plattform-Fläche), Suche
   als Plattform-Feld, Zeilen-Hover white/3, aufgeklappte Börse in der
   Plattform-Fläche, Details auf dem Grund mit Collateral- und Borrow-Karte
   als Karte in der Karte. Suchtreffer und markierte Börse im Akzent,
   Cap-Balken in der ersten Chartfarbe (--chart-1), hoch = Warnung. */
/* Kopf: 12 statt 11 px, dafür enger gesetzt (wie die Marktnamen in FR
   Vergleich), damit „Weitere Collaterals“ und „Anrechnung · Cap“ einzeilig
   bleiben. */
html[data-frf-design="web3"] #kostenMarginView .km-tabelle > thead > tr > th {
  background: var(--w3-flaeche);
  border-bottom-color: var(--w3-rand-leise);
  color: var(--w3-text-3);
  font-weight: 500;
  letter-spacing: 0.01em;
}
html[data-frf-design="web3"] #kostenMarginView .km-tabelle > tbody > tr > :is(td, th) {
  border-bottom-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #kostenMarginView tr.km-boerse:hover > :is(td, th) {
  background: var(--w3-zeile-hover);
}
html[data-frf-design="web3"] #kostenMarginView tr.km-boerse.is-offen > :is(td, th) {
  background: var(--w3-flaeche);
}
html[data-frf-design="web3"] #kostenMarginView tr.km-boerse.is-markiert > th:first-child {
  box-shadow: inset 3px 0 0 var(--w3-akzent);
}
html[data-frf-design="web3"] #kostenMarginView .km-auf[aria-expanded="true"] .km-pfeil {
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #kostenMarginView .km-td-stable.is-treffer .km-zelle {
  background: var(--w3-akzent-hauch);
  box-shadow: 0 0 0 1px var(--w3-akzent-rand);
}
html[data-frf-design="web3"] #kostenMarginView .km-chip {
  background: var(--w3-fuellung);
  box-shadow: var(--w3-kante-feld);
}
/* Settlement-Badge und Auto-Borrow-Pillen im Akzent statt im alten Orange
   (16.10.2026, Nutzer: „hat noch das orange von vorher“). */
html[data-frf-design="web3"] #kostenMarginView .km-chip.is-warn,
html[data-frf-design="web3"] #kostenMarginView .km-settle {
  background: var(--w3-akzent-hauch);
  box-shadow: 0 0 0 1px var(--w3-akzent-rand);
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #kostenMarginView .km-chip.is-gefahr {
  background: color-mix(in srgb, var(--w3-negativ) 14%, transparent);
  box-shadow: none;
}

/* Details: Grund wie die Detailzeilen der Fundingrates-Gruppe, Karten mit Glanz. */
html[data-frf-design="web3"] #kostenMarginView .km-tabelle > tbody > tr.km-detail > td {
  background: var(--w3-grund);
}
html[data-frf-design="web3"] #kostenMarginView .km-dtabelle th {
  border-bottom-color: var(--w3-rand);
  font-weight: 500;
}
html[data-frf-design="web3"] #kostenMarginView .km-dtabelle td,
html[data-frf-design="web3"] #kostenMarginView :is(.km-wandlung, .km-hinweis, .km-admin, .km-fuss) {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #kostenMarginView .asset-token-mark.km-token {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #kostenMarginView .km-balken {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #kostenMarginView .km-balken i {
  background: var(--w3-akzent);
}
html[data-frf-design="web3"] #kostenMarginView .km-balken.is-hoch i {
  background: var(--w3-warnung);
}
html[data-frf-design="web3"] #kostenMarginView :is(.km-warnung, .km-hinweisleiste) {
  border-radius: var(--w3-radius-tip);
}
html[data-frf-design="web3"] #kostenMarginView .km-alle:hover {
  color: var(--w3-akzent);
}

/* Handy: die fixierte Börsenspalte deckt in der Kartenfläche bzw. wie ihre Zeile. */
@media (max-width: 900px) {
  html[data-frf-design="web3"] #kostenMarginView .km-tabelle > thead > tr > th:first-child {
    background: var(--w3-flaeche);
    box-shadow: 1px 0 0 var(--w3-rand-leise);
  }
  html[data-frf-design="web3"] #kostenMarginView tr.km-boerse > th:first-child {
    background: var(--w3-karte);
    box-shadow: 1px 0 0 var(--w3-rand-leise);
  }
  html[data-frf-design="web3"] #kostenMarginView tr.km-boerse:hover > th:first-child {
    background: var(--w3-zeile-hover);
  }
  html[data-frf-design="web3"] #kostenMarginView tr.km-boerse.is-offen > th:first-child {
    background: var(--w3-flaeche);
  }
}

/* Carry ────────────────────────────────────────────────────────────────
   Kopf und Karten als Plattform-Karte (Glanz, Innenkante), Wellen im Kopf
   als Hauch des Akzents. Kennzahlen im Kopf als Kennzahl-Kacheln (Karte in
   der Karte). „Live-Kurse“ als Primärknopf im Akzent, übrige Knöpfe als
   Sekundärknopf, Felder als Plattform-Feld, Short/Long, Zeitraum und
   „Es wächst“ als Segment-Spur, Schalter „Mitlaufen“ an = Akzent, Regler im
   Akzent. Diagramm „Wie weit aufblasen?“: Horizonte in den Chartfarben der
   Plattform (1 Tag --chart-1, 3 Tage --chart-2, 7 Tage --chart-3), heute
   leise; Zonen, Grenzen und Punkte behalten ihre Signalfarben. */
html[data-frf-design="web3"] #carryView .cy-wellen {
  color: var(--w3-akzent);
}
html[data-frf-design="web3"] #carryView .cy-titel h2 {
  font-weight: var(--fw-medium);
}

/* Kennzahl-Kacheln im Kopf */
html[data-frf-design="web3"] #carryView .cy-kpis {
  gap: var(--space-3);
}
html[data-frf-design="web3"] #carryView .cy-kpi {
  padding: var(--space-3);
}
html[data-frf-design="web3"] #carryView .cy-kpi strong {
  font-weight: var(--fw-medium);
}
/* Die Zeile unter dem Wert bricht in der Kachel um, statt abgeschnitten zu werden. */
html[data-frf-design="web3"] #carryView .cy-kpi small {
  white-space: normal;
}

/* Status-Chips als leise Plattform-Pille */
html[data-frf-design="web3"] #carryView .cy-chip {
  background: var(--w3-fuellung);
  border-color: transparent;
  box-shadow: var(--w3-kante-feld);
}
html[data-frf-design="web3"] #carryView .cy-chip.is-sim {
  border-color: var(--w3-akzent-rand);
}
html[data-frf-design="web3"] #carryView .cy-chip.is-sim::before {
  background: var(--w3-akzent);
}
html[data-frf-design="web3"] #carryView .cy-chip-frage {
  border-color: var(--w3-rand);
  box-shadow: none;
}

/* Knöpfe */
html[data-frf-design="web3"] #carryView :is(.cy-btn, .cy-dazu, .cy-weg) {
  border-radius: var(--w3-radius-feld);
}

html[data-frf-design="web3"] #carryView .cy-input:disabled,
html[data-frf-design="web3"] #carryView .cy-input[readonly] {
  background: var(--w3-kopf);
}
html[data-frf-design="web3"] #carryView .cy-wahl .catalog-trigger.cy-ungueltig {
  box-shadow: var(--w3-kante-feld), 0 0 0 1px var(--w3-negativ);
}

/* Segment-Spur */
html[data-frf-design="web3"] #carryView .cy-segmente {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #carryView .cy-segment {
  border-radius: var(--w3-radius-feld);
}
html[data-frf-design="web3"] #carryView .cy-segment:hover { color: var(--w3-text); }
html[data-frf-design="web3"] #carryView .cy-segment[aria-checked="true"] {
  background: var(--w3-fuellung-stark);
  font-weight: var(--fw-medium);
  box-shadow: var(--w3-kante);
}

/* Tabellen Konto/Stufen: Zeilenlinien white/6, Kopf white/45. */
html[data-frf-design="web3"] #carryView .cy-tabelle th {
  border-bottom-color: var(--w3-rand);
  font-weight: 500;
}
html[data-frf-design="web3"] #carryView :is(.cy-tabelle td, .cy-regler, .cy-stress-zeile, .cy-aufklapp) {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #carryView .cy-anr-balken {
  background: var(--w3-fuellung-stark);
}
html[data-frf-design="web3"] #carryView .cy-anr-balken i {
  background: var(--w3-akzent);
}

/* Regler „Kurse simulieren“: Griff im Akzent mit Rand in der Kartenfläche. */
html[data-frf-design="web3"] #carryView .cy-range::-webkit-slider-runnable-track {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #carryView .cy-range::-moz-range-track {
  border-color: var(--w3-rand-leise);
}
html[data-frf-design="web3"] #carryView .cy-range::-webkit-slider-thumb {
  border-color: var(--w3-karte);
  background: var(--w3-akzent);
  box-shadow: 0 0 0 1px var(--w3-akzent-rand);
}
html[data-frf-design="web3"] #carryView .cy-range::-moz-range-thumb {
  border-color: var(--w3-karte);
  background: var(--w3-akzent);
}

/* Diagramm: Horizonte in den Plattform-Chartfarben, Legende folgt (gleiche Klassen). */
html[data-frf-design="web3"] #carryView .cy-linie-h1 { stroke: var(--w3-akzent); }
html[data-frf-design="web3"] #carryView .cy-linie-h3 { stroke: var(--w3-akzent-hell); }
html[data-frf-design="web3"] #carryView .cy-linie-h7 { stroke: var(--w3-akzent-tief); }
html[data-frf-design="web3"] #carryView .cy-linie-heute { stroke: var(--w3-text-3); }
html[data-frf-design="web3"] #carryView .cy-text-freigestellt { stroke: var(--w3-karte); }
html[data-frf-design="web3"] #carryView .cy-punkt { stroke: var(--w3-karte); }
html[data-frf-design="web3"] #carryView .cy-aufklapp summary:hover { color: var(--w3-akzent); }