/*
 * Gemeinsame Gestaltung, global — nicht in einer Teilansicht.
 *
 * Zwei Akzente, die Inhalt kodieren statt zu dekorieren: Teal steht ueberall fuer
 * „zum Claim-Preis / noch offen", Kupfer ueberall fuer „realisiert / verkauft". Semantisches
 * Gruen und Rot bleiben davon getrennt und stehen nur fuer Vorzeichen und Range-Status —
 * sonst laesst sich eine Farbe nicht mehr lesen, weil sie zwei Dinge gleichzeitig sagt.
 */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --line: #dfe3ea;
  --line-strong: #c6ccd8;
  --ink: #1b2330;
  --ink-2: #5b6675;
  --ink-3: #8a94a3;
  --teal: #1f7a72;
  --teal-soft: #e3f2f0;
  /* Der gefuellte MaxFi-Knopf. Eigene Token, weil er als einziger Text AUF dem Akzent
     traegt — und weil das im dunklen Schema kein Weiss sein darf. */
  --teal-fill: #1f7a72;
  --teal-fill-hover: #17635c;
  --on-teal: #ffffff;
  --copper: #a55a2a;
  --copper-soft: #f8ece2;
  --pos: #1d7a45;
  --neg: #b03428;
  --warn-soft: #fdeceb;
  --radius: 10px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161d;
    --surface: #191e27;
    --surface-2: #1f2531;
    --line: #2a313d;
    --line-strong: #3a424f;
    --ink: #e6eaf0;
    --ink-2: #9aa4b2;
    --ink-3: #6f7987;
    --teal: #4bb5a8;
    --teal-soft: #17322f;
    --teal-fill: #3fa89b;
    --teal-fill-hover: #4fc0b2;
    --on-teal: #0d1c1a;
    --copper: #d08a52;
    --copper-soft: #33241a;
    --pos: #4cb87a;
    --neg: #e0705f;
    --warn-soft: #33201e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/*
 * `hidden` muss gewinnen.
 *
 * Die Regel des Browsers dafuer ist `[hidden] { display: none }` — und jede eigene
 * `display`-Angabe schlaegt sie, weil eine Klasse staerker waegt als ein Attribut. Die
 * Wallet-Zeile, die Filter, der Modus-Umschalter und der Support-Kasten tragen alle ein
 * `display: flex` und blieben deshalb sichtbar, auch wenn der Code sie ausgeblendet hatte:
 * eine leere Zeile mit der Ueberschrift „WALLETS" und ein Support-Kasten ohne Link.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
}

/* Jede Zahl monospace mit tabular-nums, damit Spalten fluchten. */
.num, .grid td, .stat b, .kpi b, table { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Topbar */
.top { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.topin { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center;
  gap: 20px; min-height: 58px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 9px; font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; white-space: nowrap; }
.brand i { width: 9px; height: 9px; border-radius: 2px; background: var(--teal); display: block; transform: translateY(-1px); }
.brand em { font-style: normal; font-weight: 400; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-strong);
  border-radius: 2px; padding: 1px 5px; }
/* Die Navigation steht LINKS neben der Marke, nicht rechts: sie gehoert zum Namen der
   Anwendung, nicht zu den Aktionen. Rechts steht genau eine Sache, und die fuehrt hinaus. */
.nav { display: flex; gap: 2px; margin-left: 6px; flex-wrap: wrap; }
.nav a { padding: 7px 13px; border-radius: 4px; font-size: 13px; color: var(--ink-3);
  white-space: nowrap; text-decoration: none; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.maxfi { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: 4px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 12.5px;
  text-decoration: none; white-space: nowrap; }
.maxfi:hover { opacity: .88; }
.maxfi svg { width: 12px; height: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px 80px; }
.phead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 26px 0 18px; margin-bottom: 26px; }
.phead h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.phead .sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------------------------------------------------------------- Support */
.support-box { display: flex; gap: 18px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 5px;
  padding: 13px 16px; margin-bottom: 20px; font-size: 13px; }
.support-box span { color: var(--ink-2); }

/* ---------------------------------------------------------------- Wallets */
.wallets { margin-bottom: 20px; }
#wallet-form { display: flex; gap: 8px; flex-wrap: wrap; }
#wallet-input {
  flex: 1; min-width: 300px; padding: 9px 12px; font: 12.5px var(--mono);
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: inherit;
}
#wallet-input:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: transparent; }
.btn {
  border: 0; border-radius: 6px; background: var(--teal); color: #fff;
  font: 600 13px var(--sans); padding: 9px 16px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-strong); }
.btn.ghost:hover { color: var(--ink); border-color: var(--line-strong); }
.note { color: var(--ink-3); font-size: 12px; margin: 8px 0 0; }

/* ---------------------------------------------------------------- Kopf */
.head { border: 1px solid var(--line); border-radius: 5px; background: var(--surface); margin-bottom: 4px; }
.head-stats { display: flex; flex-wrap: wrap; }
.stat { flex: 1 1 175px; padding: 18px 20px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.stat b { display: block; font-size: 23px; font-weight: 500; letter-spacing: -.02em; margin: 6px 0 4px; }
.stat small { display: block; font-size: 11px; color: var(--ink-3); }
.mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.mode-hint { font-size: 12px; color: var(--ink-3); max-width: 34ch; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.switch button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font: 500 12.5px var(--sans); padding: 6px 15px; }
.switch button.is-on { background: var(--copper); color: #fff; }
.switch button:disabled { opacity: .35; cursor: not-allowed; }
.fn { margin-left: 6px; font: 400 11px var(--mono); opacity: .65; }

/* ---------------------------------------------------------------- Filter */
/* Ein Block, zwei Zeilen. Die Wallets stehen oben, weil sie bestimmen, WELCHE Daten
   gezeigt werden — die anderen nur, welcher Ausschnitt davon. Eine Trennlinie dazwischen
   zerschnitte einen Zusammenhang, der keiner sein soll. */
.filters { display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center;
  padding: 13px 0 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 22px; }
.group.wide { flex-basis: 100%; }
.group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.flab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--ink-2); background: transparent; cursor: pointer; white-space: nowrap; }
.chips button:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.chips button.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chips button:disabled { opacity: .35; cursor: not-allowed; }
/* Suche, Sortierung und Richtung tragen dieselbe Form wie die Chips daneben — gleiche
   Hoehe, gleicher Radius, gleiche Kante. Ein natives Auswahlfeld bringt seine eigene
   Hoehe und seinen eigenen Pfeil mit und steht dann als Fremdkoerper in der Reihe. */
#q, #sort, .dir {
  height: 27px; box-sizing: border-box; font: 400 12.5px var(--sans);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
#q { padding: 0 30px 0 12px; min-width: 200px; font-family: var(--mono); font-size: 12px; color: var(--ink); cursor: text; }
#q::placeholder { color: var(--ink-3); }
/* Der eingebaute Knopf ist wenige Pixel gross und kaum zu treffen. Eigener mit einer
   Trefferflaeche, die den Namen verdient. */
#q::-webkit-search-cancel-button { appearance: none; display: none; }
.searchwrap { position: relative; display: inline-flex; }
.clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 23px; height: 23px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.clear:hover { background: var(--surface-2); color: var(--ink); }
/* Der Pfeil ist ein eigenes SVG neben dem Feld, nicht ins Hintergrundbild gerechnet:
   zwei ueberlagerte Farbverlaeufe ergeben einen Keil, der auf halben Pixeln sitzt und in
   jeder Zoomstufe anders schief aussieht. Ein Pfad ist ein Pfad. */
#sort { appearance: none; padding: 0 28px 0 12px; }
.selectwrap { position: relative; display: inline-flex; color: var(--ink-2); }
.selectwrap svg {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 6px; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.selectwrap:hover { color: var(--ink); }
.dir { width: 27px; padding: 0; text-align: center; line-height: 1; }
#q:hover, #sort:hover, .dir:hover { color: var(--ink); border-color: var(--ink-3); }
#q:focus, #sort:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: transparent; }
#sort option { background: var(--surface); color: var(--ink); }

/* Die Zusammenfassung der Auswahl ist EINE Zeile, nicht ein zweiter Kennzahlenblock:
   sie gehoert zum Filter, nicht neben den Kopf. */
/* Ein Stand, der hinterherhaengt, faellt auf — aber leise. Es ist kein Fehler, nur eine
   Tatsache ueber das, was dasteht. */
#stamp.alt { color: var(--copper); }
/* Getrennt oder stumm: das ist kein Alter mehr, sondern ein Ausfall. */
#stamp.tot { color: var(--neg); }

.selection { margin-left: auto; font-size: 12.5px; color: var(--ink-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.selection b { font-weight: 600; }
.tip { border-bottom: 1px dotted var(--line-strong); cursor: help; }

.cap { font-size: 12.5px; color: var(--ink-3); margin: 0 0 18px; max-width: 72ch; line-height: 1.65; }
.status { color: var(--ink-2); font-size: 13px; margin: 14px 0; }
.status.err { color: var(--neg); }
/* Waehrend geladen wird, pulsiert die Zeile leicht — sichtbar, ohne zu zappeln. */
.status.busy { color: var(--teal); animation: puls 1.4s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.note-ok { color: var(--teal) !important; }

/* ---------------------------------------------------------------- Karten */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(368px, 1fr)); }

/* Der Rahmen um eine Karte. Er traegt nichts Sichtbares — er gibt dem MaxFi-Knopf nur einen
   Bezugspunkt, damit dieser NEBEN dem Karten-Link stehen kann statt darin. */
.karte { position: relative; display: flex; }
.karte > .card { flex: 1; }

/* Unten rechts, in der Fusszeile.
   Vorher war er ein grauer Umriss auf weissem Grund und verschwand zwischen den Zaehlern
   daneben — auf einer Karte voller Zahlen gewinnt Flaeche, nicht Kontur. Gefuellt im
   Akzent ist er das einzige farbige Feld der Karte und damit ohne Suchen zu finden.
   Er bleibt klein: er steht 38 Mal untereinander. */
.karte-maxfi {
  position: absolute; right: 22px; bottom: 13px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 5px;
  font: 600 11.5px var(--sans); letter-spacing: .01em;
  color: var(--on-teal); text-decoration: none;
  background: var(--teal-fill); white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / .14);
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.karte-maxfi svg { width: 11px; height: 11px; }
.karte-maxfi:hover {
  background: var(--teal-fill-hover);
  box-shadow: 0 3px 8px rgb(0 0 0 / .2);
  transform: translateY(-1px);
}
/* Der Knopf haelt seine Farbe, waehrend die Karte unter ihm ihren Rand faerbt. Zwei Dinge,
   die gleichzeitig aufleuchten, lesen sich als ein Ziel — es sind aber zwei. */
.karte:hover .karte-maxfi { background: var(--teal-fill); }
.karte:hover .karte-maxfi:hover { background: var(--teal-fill-hover); }
/* Tastatur: ohne das ist der Knopf zwar erreichbar, aber nicht sichtbar erreicht. */
.karte-maxfi:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid transparent;
  border-radius: var(--radius); padding: 20px 22px 16px; cursor: pointer;
  /* Eine Karte ist ein Link — sie soll sich auch wie einer verhalten (neuer Tab, Adresse
     kopieren), aber nicht wie einer aussehen. */
  text-decoration: none; color: inherit;
  /* Spalte, damit die Fusszeile unten sitzt: sonst endet eine geschlossene Karte ohne
     Range-Block mitten in der Zeile und die Zahlen fluchten nicht mehr. */
  display: flex; flex-direction: column;
}
.card-foot { margin-top: auto; }
.card:hover { border-color: var(--line-strong); border-left-color: var(--teal); }
.card.out { border-left-color: var(--neg); background: linear-gradient(90deg, var(--warn-soft), var(--surface) 40%); }
.card.closed { opacity: .78; }
/* Links eine Zeile, rechts ein zweizeiliger Block. An der Oberkante ausgerichtet fluchtet
   der Paarname mit der KLEINEN Beschriftung statt mit den Zahlen und sieht dadurch
   verrutscht aus. Mittig gegen den Block gesetzt stimmt es in beide Richtungen. */
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 8px; }
.pair { font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
/* Die beiden Prozentsaetze stehen oben rechts, nicht in der Fusszeile: sie sind das
   Ergebnis der Position, nicht eine Randnotiz dazu. */
.rois { display: flex; gap: 16px; }
.ro { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.15; }
.ro span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); white-space: nowrap; }
.ro b { font: 600 17px/1 var(--mono); font-variant-numeric: tabular-nums; }
.card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 16px; }
.fee-tier { font: 400 11px var(--mono); color: var(--ink-3); background: var(--surface-2);
  padding: 2px 6px; border-radius: 4px; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.chip.in { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.chip.out { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.chip.closed { background: var(--surface-2); color: var(--ink-3); }
/* Offen, Lage noch unbekannt. Neutral gehalten: weder gruen noch rot waere eine Aussage,
   die wir an dieser Stelle noch gar nicht treffen koennen. */
.chip.wait { background: var(--surface-2); color: var(--ink-2); }

/* ---------------------------------------------------------------- Fortschritt
 * Drei Zustaende, drei Mittel — und keines davon ist die Kursivschrift von `.unknown`:
 * „gibt es nicht" und „kommt noch" sind verschiedene Aussagen, und wer beide gleich
 * darstellt, trifft die erste, obwohl nur die zweite stimmt.
 *
 * Der Balken setzt KEINE Textfarbe. Damit stapelt er sich mit `.teal`, `.copper`, `.pos`
 * und `.neg`, statt gegen sie anzutreten — eine Falle, in die `.unknown` laeuft: gegen
 * `.metrics b.teal` verliert es und wird teal statt grau angezeigt. */
.wait::after {
  content: ""; display: inline-block; width: 3.6em; height: .7em;
  border-radius: 3px; background: var(--surface-2); vertical-align: -.02em;
  animation: atmen 1.6s ease-in-out infinite;
}
.rois .wait::after { width: 3em; }
@keyframes atmen { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .wait::after { animation: none; } }

/* Da, aber noch nicht endgueltig: der Nenner waechst weiter, also faellt die Rendite beim
   Laden typischerweise. Eine Zahl, die sich unmarkiert halbiert, ist schlimmer als keine. */
.prov { border-bottom: 1px dotted var(--line-strong); }

/* Die Range-Leiste: Band ueber die volle Spur, Marker im Tick-Raum, Preis darueber. */
.rb { margin: 0 0 18px; }
.rbu { position: relative; height: 17px; }
.rbu span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--teal); white-space: nowrap; }
.rbu span.neg { color: var(--neg); }
.rbt { position: relative; height: 9px; background: var(--surface-2); border-radius: 2px; }
.band { position: absolute; inset: 0; background: color-mix(in srgb, var(--teal) 22%, transparent); border-radius: 2px; }
.mark { position: absolute; top: -4px; width: 2px; height: 17px; background: var(--teal); border-radius: 1px; }
.mark.outm { background: var(--neg); }
.rbb { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--ink-2); margin-top: 7px; }
.rbl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; margin: 14px 0 6px; font-size: 12.5px; }
.metrics div { display: flex; justify-content: space-between; gap: 8px; }
.metrics span { color: var(--ink-3); }
.metrics b { font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.metrics b.teal { color: var(--teal); }
.metrics b.copper { color: var(--copper); }
/* `!important`, weil `.metrics b.teal` (0,2,1) sonst gewinnt und eine nicht ermittelbare
   Zahl teal UND kursiv anzeigt — also wie einen Wert, den es gar nicht gibt. */
.unknown { color: var(--ink-3) !important; font-style: italic; font-family: var(--sans); font-size: 12px; }

.card-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: 9px; font-size: 11.5px; color: var(--ink-3);
  flex-wrap: wrap; gap: 6px;
  /* Platz fuer den MaxFi-Knopf, der darueber liegt. Ohne das laeuft eine Karte mit vielen
     Rebalances und Verkaeufen unter ihm durch. */
  padding-right: 98px; min-height: 26px;
}
.pcts { display: flex; gap: 12px; }
.pcts span { color: var(--ink-3); }
.pcts b { font: 500 12.5px var(--mono); }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---------------------------------------------------------------- Detailseite */
.back { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px;
  color: var(--ink-3); text-decoration: none; margin-bottom: 20px; }
.back:hover { color: var(--ink); }
.d-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.d-title { font-size: 22px; font-weight: 600; }
.d-title small { font: 400 13px var(--sans); color: var(--ink-3); }
.d-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.d-range { max-width: 440px; margin-bottom: 18px; }
.d-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  margin-bottom: 22px; overflow: hidden;
}
.d-kpis .stat { padding: 14px 16px; border-right: 1px solid var(--line); }
.d-kpis .stat:last-child { border-right: 0; }
.d-kpis .stat b { font-size: 17px; }
.d-sub { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
table.harvest { margin-bottom: 4px; }
td.teal, td.copper { font-weight: 500; }
td.teal { color: var(--teal); }
td.copper { color: var(--copper); }
.d-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 26px; margin-bottom: 14px; }
.d-tabs .n { margin-left: 6px; font: 400 11px var(--mono); opacity: .7; }
.scroller { overflow-x: auto; }
.cmp { color: var(--copper); font-weight: 600; }
.d-tabs button {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font: 500 13px var(--sans); padding: 8px 13px; border-bottom: 2px solid transparent;
}
.d-tabs button.is-on { color: var(--ink); border-bottom-color: var(--teal); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: right; font: 500 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); padding: 0 10px 7px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.tab-note { color: var(--ink-3); font-size: 12px; margin-top: 12px; max-width: 78ch; line-height: 1.6; }
.empty { color: var(--ink-2); font-size: 13px; padding: 18px 0; }
.placeholder { color: var(--ink-3); padding: 40px 0; }

@media (max-width: 620px) {
  .head-stats { gap: 20px; }
  .selection { margin-left: 0; }
}


/* ---------------------------------------------------------------- Seitenkopf-Leiste */
.stampbar { display: flex; align-items: center; gap: 12px; }
.ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-3);
  border-radius: 4px; font: 500 12px var(--sans); padding: 6px 12px; cursor: pointer; }
.ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------------------------------------------------------------- Settings */
.sec { max-width: 640px; }
.sec h2 { margin-bottom: 8px; font-size: 17px; }
.sec p.h { color: var(--ink-2); margin: 0 0 18px; line-height: 1.6; font-size: 13px; }
.sec p.h.err { color: var(--neg); min-height: 1.2em; }
.wrow { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--surface); margin-bottom: 8px; }
.wrow .lbl { font-weight: 600; min-width: 110px; max-width: 110px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit;
  font-family: var(--sans); font-size: 13px; }
.wrow .lbl:hover { border-color: var(--line-strong); }
.wrow .lbl:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: transparent; }
.wrow .ad { color: var(--ink-3); flex: 1; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: 12.5px; }
.wrow button { font-size: 12px; color: var(--ink-3); padding: 4px 9px; border: 1px solid var(--line-strong);
  border-radius: 3px; background: transparent; cursor: pointer; }
.wrow button:hover { color: var(--neg); border-color: var(--neg); }
.addrow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.addrow input { flex: 1; min-width: 240px; padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: 4px; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.addrow input:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: transparent; }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.opt div span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; max-width: 46ch; }

/* ---------------------------------------------------------------- Guide */
.guide { max-width: 74ch; }
.guide h2 { margin-bottom: 10px; font-size: 17px; }
.steps { counter-reset: s; margin: 0 0 40px; padding: 0; list-style: none; }
.steps li { counter-increment: s; position: relative; padding: 0 0 16px 38px; color: var(--ink-2); line-height: 1.65; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-3); font-size: 11.5px;
  display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.steps b { color: var(--ink); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 15px 0; font-weight: 500; list-style: none;
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-3); font-size: 17px; line-height: 1; flex-shrink: 0; }
details[open] summary::after { content: "−"; }
details > div { padding: 0 0 20px; }
details p { margin: 12px 0 0; color: var(--ink-2); line-height: 1.7; font-size: 13.5px; }
/* Das durchgerechnete Beispiel ist der Teil, der die Antwort belegt — deshalb Monospace
   und `white-space: pre`: die Spalten sollen fluchten wie in einer Abrechnung. */
.ex { margin: 16px 0 0; padding: 16px 18px; background: var(--surface-2);
  border-left: 2px solid var(--teal); border-radius: 0 4px 4px 0; font-family: var(--mono);
  font-size: 11.5px; line-height: 1.75; white-space: pre; overflow-x: auto; color: var(--ink-2); }
.ex b { color: var(--ink); font-weight: 700; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

/* ---------------------------------------------------------------- Support */
.sup { max-width: 70ch; }
.card2 { border: 1px solid var(--line); border-radius: 5px; background: var(--surface);
  padding: 26px 28px; margin-bottom: 20px; }
.card2.free { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.card2 h3 { margin: 0 0 4px; font-size: 17px; }
.tagline { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 14px; }
.card2 p { color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; }
.card2 p:last-child { margin-bottom: 0; }
.linkrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 20px 0 6px; }
.linkrow code { flex: 1; min-width: 230px; overflow-wrap: anywhere; background: var(--surface-2);
  padding: 11px 13px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.btn.alt { background: var(--ink); color: var(--bg); }
.split3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong);
  border-radius: 4px; overflow: hidden; margin: 20px 0 8px; font-family: var(--mono); }
.split3 > div { padding: 14px 16px; border-right: 1px solid var(--line); background: var(--surface-2); }
.split3 > div:last-child { border-right: 0; }
.split3 span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); display: block; }
.split3 b { font-size: 19px; font-weight: 600; display: block; margin-top: 4px; }
.split3 em { font-style: normal; font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }
.you { background: var(--teal-soft) !important; }
.you b { color: var(--teal); }
.fine { font-size: 12px; color: var(--ink-3); line-height: 1.65; }
.pending2 { margin-top: 18px; padding: 15px 17px; border: 1px dashed var(--line-strong);
  border-radius: 4px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.callout { margin-top: 16px; padding: 15px 18px; background: var(--teal-soft);
  border-left: 3px solid var(--teal); border-radius: 0 4px 4px 0; font-size: 13.5px;
  line-height: 1.65; color: var(--ink-2); }
.callout strong { display: block; color: var(--teal); margin-bottom: 4px; font-size: 14px; }