:root{
  color-scheme: dark;
  /* Tokens shared with the landing page (web/landing.css): flat black,
     hairline borders, ice/mid/mute text, violet-cyan-mint accents,
     Archivo for headings, Inter for text, JetBrains Mono for data. */
  --bg: #000000;
  --bg-blue-1: #000000;
  --bg-blue-2: #000000;
  --bg-blue-3: #000000;
  --bg-glow-1: rgba(124, 58, 237, 0.06);
  --bg-glow-2: rgba(34, 211, 238, 0.05);
  --panel: #000000;
  --panel-border: rgba(255,255,255,0.045);
  --panel-border-2: rgba(255,255,255,0.085);
  --panel-hover: rgba(255,255,255,0.018);
  --text-1: #e6eaf2;
  --text-2: #8e96a8;
  --text-3: #666d7e;
  --dim: #3b4152;
  --accent-mint: #34d399;
  --accent-violet: #7c3aed;
  --accent-cyan: #22d3ee;
  --accent-red: #ff6b6b;
  --grad: linear-gradient(96deg, #7c3aed 0%, #22d3ee 58%, #34d399 100%);
  --radius-lg: 14px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --sidebar-w: 232px;
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Der Hintergrundverlauf der App an einer Stelle definiert. Panels, die
     sich in den Hintergrund einfuegen sollen, legen genau diesen Stapel
     viewport-fixiert unter sich - dann zeigen sie exakt die Farbe, die an
     ihrer Position auf dem Schirm ohnehin liegt: links oben das helle Blau,
     rechts unten Schwarz. */
  --app-gradient:
    radial-gradient(circle at 12% 4%, var(--bg-glow-1), transparent 38%),
    radial-gradient(circle at 88% 96%, var(--bg-glow-2), transparent 42%),
    linear-gradient(150deg,
      var(--bg-blue-1) 0%,
      var(--bg-blue-2) 14%,
      var(--bg-blue-3) 28%,
      #01050c 40%,
      #000000 58%,
      #000000 100%);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body{
  /* Farbverlauf von Dunkelblau oben links nach Schwarz unten rechts,
     darueber zwei sehr dezente Akzent-Schimmer. */
  background-image: var(--app-gradient);
  background-attachment: fixed;
}

.hidden{ display:none !important; }

/* -------------------------------- Inputs -------------------------------- */

.text-input, .text-display{
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  color: var(--text-1);
  font-size: 13.5px;
  font-family: var(--font);
  line-height: 1.35;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.text-display{ color: var(--text-2); user-select: text; }

.text-input:focus{
  border-color: var(--accent-mint);
  background: rgba(255,255,255,0.07);
}

.text-input.mono, .text-display.mono{
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12.5px;
}

select.text-input{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  /* Ohne feste Zeilenhoehe sitzt der Text in Auswahlfeldern ein bis zwei
     Pixel hoeher als in Eingabefeldern - das ist das "Verrutschte". */
  line-height: 1.35;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  text-overflow: ellipsis;
}

/* Die aufgeklappte Liste wird vom Betriebssystem gezeichnet. Diese beiden
   Regeln sind das Einzige, worauf sie hoert. */
select.text-input option{
  background-color: #101827;
  color: #f5f5f7;
}
select.text-input option:checked{
  background-color: #17283f;
}

/* -------------------------------- Buttons -------------------------------- */

.btn{
  border:none; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; cursor:pointer;
  transition: transform .12s ease, opacity .12s ease, background .15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }

.btn-primary{
  background: linear-gradient(135deg, var(--accent-mint), #22b389);
  color: #06231a;
}
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); }

.btn-secondary{
  background: rgba(255,255,255,0.08);
  color: var(--text-1);
  border: 1px solid var(--panel-border);
}
.btn-secondary:hover{ background: rgba(255,255,255,0.12); }

.btn-danger-ghost{
  background: transparent;
  color: var(--accent-red);
  border: 1px solid rgba(255,107,107,0.35);
  margin-top: 10px;
}
.btn-danger-ghost:hover{ background: rgba(255,107,107,0.08); }

.btn-block{ width:100%; margin-top: 14px; }

/* -------------------------------- App shell -------------------------------- */

.app{ display:flex; height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
  display:flex; flex-direction:column;
  padding: 20px 14px;
}

.brand{
  display:flex; align-items:center; gap:9px;
  padding: 6px 10px 22px;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
}

.nav{
  display:flex; flex-direction:column; gap:2px; flex:1;
  /* Seitliches Padding der Seitenleiste aufheben, damit die Eintraege
     von Kante zu Kante gehen und die Markierung keine sichtbaren
     Seitenraender hat. */
  margin: 0 -14px;
}

.nav-item{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; text-align:left;
  color: var(--text-2); font-family: var(--font); font-size: 13.5px;
  padding: 10px 24px; border-radius: 0;
  width: 100%;
  cursor:pointer; transition: background .12s ease, color .12s ease;
}
.nav-item:hover{ background: var(--panel-hover); color: var(--text-1); }
.nav-item.active{ background: var(--panel); color: var(--text-1); font-weight: 600; }

.nav-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--accent-mint);
  display:none;
}
.nav-item.active .nav-dot{ display:inline-block; }

.sidebar-footer{
  border-top: 1px solid var(--panel-border);
  padding-top: 14px; margin-top: 10px;
  display:flex; flex-direction:column; gap:8px;
}

.status-row{ display:flex; align-items:center; justify-content:space-between; padding: 0 10px; }
.status-row .label{ color: var(--text-3); font-size: 12px; }

.pill{
  font-size: 11px; font-weight:600; padding: 3px 9px; border-radius: 999px;
}
.pill-on{ background: rgba(48,213,160,0.15); color: var(--accent-mint); }
.pill-off{ background: rgba(255,255,255,0.08); color: var(--text-2); }
.pill-error{ background: rgba(255,107,107,0.15); color: var(--accent-red); }

/* -------------------------------- Content -------------------------------- */

.content{ flex:1; overflow-y:auto; padding: 30px 40px 60px; }

.page{ display:none; max-width: 880px; }
.page.active{ display:block; animation: fadeIn .25s ease; }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

.page-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 24px;
}
.page-header h1{ font-size: 24px; font-weight: 650; margin:0 0 3px; letter-spacing:-0.015em; }
.muted{ color: var(--text-2); font-size: 13px; margin:0; }

.card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
  backdrop-filter: blur(20px);
}

.section-title{ font-size: 14px; font-weight:600; margin: 0 0 16px; }

.card-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.card-title-row h3{ font-size: 14px; margin:0; font-weight:600; }

.grid-3{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 18px;
}

.stat-card{ padding: 16px 18px; }
.stat-label{ color: var(--text-2); font-size: 12px; margin-bottom: 8px; }
.stat-value{ font-size: 19px; font-weight:600; display:flex; align-items:center; gap:7px; white-space: nowrap; }
.stat-value.small{ font-size: 13px; }

.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-off{ background: var(--text-3); }
.dot-on{ background: var(--accent-mint); box-shadow: 0 0 8px var(--accent-mint); animation: pulse 1.6s infinite; }
.dot-error{ background: var(--accent-red); }

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(48,213,160,0.5); }
  70%{ box-shadow: 0 0 0 7px rgba(48,213,160,0); }
  100%{ box-shadow: 0 0 0 0 rgba(48,213,160,0); }
}

.field{ margin-bottom: 16px; }
.field label{ display:block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.field-row{ display:flex; align-items:center; gap:10px; padding: 8px 0; justify-content: space-between; }
.field-row .label{ color: var(--text-2); font-size: 13px; }

.hint{ color: var(--text-3); font-size: 12px; line-height:1.5; margin: -6px 0 16px; }

/* Hinweis direkt unter einem Eingabefeld braucht Luft nach oben,
   sonst beruehrt er den Rahmen. */
.field .hint{ margin: 7px 0 0; }

.callout{
  background: rgba(139,124,255,0.08);
  border: 1px solid rgba(139,124,255,0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 12.5px; color: var(--text-2); line-height:1.6;
}
.callout strong{ color: var(--text-1); }

/* switch toggle */
.switch{ position:relative; display:inline-block; width:38px; height:22px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background: rgba(255,255,255,0.15); border-radius: 999px; transition: .15s;
}
.slider::before{
  content:""; position:absolute; height:16px; width:16px; left:3px; top:3px;
  background:white; border-radius:50%; transition:.15s;
}
.switch input:checked + .slider{ background: var(--accent-mint); }
.switch input:checked + .slider::before{ transform: translateX(16px); }

/* log list */
.log-list{ display:flex; flex-direction:column; gap:8px; max-height: 420px; overflow-y:auto; }
.log-list.empty-state{ color: var(--text-3); font-size: 13px; padding: 8px 2px; }

/* Ein Eintrag hat zwei Zeilen: oben die harten Fakten (Richtung, Token,
   Betrag, Ergebnis, Zeit), darunter die Begruendung. Vorher stand alles in
   einer Reihe - bei langen Detailtexten war nicht mehr erkennbar, wo ein
   Eintrag endet und der naechste beginnt. */
.log-item{
  display:flex; flex-direction:column; gap:5px;
  padding: 11px 13px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
  border-left: 3px solid var(--panel-border);
  font-size: 12.5px;
}
.log-item.status-ok{ border-left-color: var(--accent-mint); }
.log-item.status-error{ border-left-color: var(--accent-red); }
.log-item.status-skipped{ border-left-color: var(--text-3); }
.log-item.is-note{ border-left-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.015); }

.log-top{ display:flex; align-items:center; gap:9px; }
.log-side{
  font-weight:700; font-size:10.5px; letter-spacing:.04em;
  padding:3px 7px; border-radius:6px; flex:none;
}
.log-side.buy{ background: rgba(48,213,160,0.15); color: var(--accent-mint); }
.log-side.sell{ background: rgba(255,107,107,0.15); color: var(--accent-red); }
.log-mint{ font-family:"SF Mono",monospace; color: var(--text-2); flex:none; }
/* Der Betrag ist die wichtigste Zahl der Zeile - als einziges Element
   in Textfarbe und halbfett, damit das Auge ihn zuerst findet. */
.log-amount{ font-weight:600; color: var(--text-1); flex:none; }
/* Quell-Wallet eines Trades: nur relevant, wenn mehrere Wallets getrackt
   werden, deshalb bewusst zurueckhaltend gestaltet. */
.log-source{
  font-family:"SF Mono",monospace; font-size:11px; color: var(--text-3);
  padding:2px 6px; border-radius:6px; flex:none;
  background: rgba(255,255,255,0.04); white-space: nowrap;
}
.log-spacer{ flex:1 1 auto; }
/* Ergebnis als Pille statt als Fliesstext: auf einen Blick scannbar. */
.log-pill{
  font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:20px;
  white-space:nowrap; flex:none;
  background: rgba(255,255,255,0.06); color: var(--text-2);
}
.log-pill.ok{ background: rgba(48,213,160,0.14); color: var(--accent-mint); }
.log-pill.error{ background: rgba(255,107,107,0.14); color: var(--accent-red); }
.log-time{ color: var(--text-3); font-size:11px; white-space:nowrap; flex:none; }

.log-bottom{ display:flex; align-items:baseline; gap:8px; padding-left: 2px; }
.log-detail{ color: var(--text-3); font-size:11.5px; line-height:1.45; }
.log-note{ color: var(--text-2); font-size:12px; line-height:1.45; }

.log-explorer{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--accent-violet); font-size:11.5px; font-family: var(--font);
  white-space:nowrap; flex:none;
}
.log-explorer:hover{ text-decoration: underline; }

/* Filterleiste ueber der Aktivitaetsliste */
.filter-row{ display:flex; gap:6px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius: 20px; cursor:pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border);
  color: var(--text-2); font-size: 11.5px; font-family: var(--font);
  transition: background .12s ease, color .12s ease;
}
.filter-chip:hover{ background: rgba(255,255,255,0.08); }
.filter-chip.active{
  background: rgba(48,213,160,0.13); border-color: rgba(48,213,160,0.35);
  color: var(--accent-mint);
}
.filter-count{
  font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight:600;
  padding: 1px 6px; border-radius: 10px; background: rgba(255,255,255,0.08);
}
.filter-chip.active .filter-count{ background: rgba(48,213,160,0.2); }
/* Ein Filter ohne Treffer bleibt sichtbar, wird aber zurueckgenommen -
   sonst sucht man nach einem Eintrag, den es gar nicht gibt. */
.filter-chip.is-empty{ opacity:.45; }

.btn-link{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--accent-violet); font-size: 12px; font-family: var(--font);
}
.btn-link:hover{ text-decoration: underline; }

/* scrollbars */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* Untertitel neben dem Produktnamen in der Seitenleiste */
.brand-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .5;
  margin-top: 1px;
}

/* Produktlogo in der Seitenleiste */
.brand-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(60, 200, 255, 0.35));
}

/* ------------------------------ Auth-Bildschirm ------------------------- */

.auth-screen{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  overflow-y: auto;
  z-index: 50;
}
.auth-screen.hidden{ display: none !important; }

.auth-card{
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.auth-brand{ display:flex; align-items:center; gap:11px; margin-bottom: 24px; }
.auth-brand img{ width: 34px; height: 34px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(60,200,255,0.35)); }
.auth-brand-name{ font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth-brand-sub{ font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }

.auth-pane h2{ margin: 0 0 4px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.auth-pane.hidden{ display: none !important; }
.auth-hint{ margin: 0 0 20px; color: var(--text-2); font-size: 13px; }
.auth-optional{ color: var(--text-3); font-weight: 400; }

.auth-note{
  background: rgba(139,124,255,0.08);
  border: 1px solid rgba(139,124,255,0.18);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12px; line-height: 1.5;
  color: var(--text-2);
  margin: 4px 0 6px;
}

.auth-error{
  color: var(--accent-red);
  font-size: 12.5px;
  min-height: 18px;
  margin: 6px 0 4px;
}

/* ------------------------- Bestaetigungs-Dialog --------------------------- */

.modal-overlay{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  /* Blaeulich abdunkeln statt schwarz - so bleibt der Farbverlauf der App
     hinter dem Dialog erkennbar. */
  background: rgba(3,11,24,0.58);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 24px;
}
.modal-overlay.hidden{ display: none !important; }

/* Panels, die den Hintergrund aufnehmen: unter einer dezenten weissen
   Schicht liegt derselbe Verlauf wie im Hintergrund, viewport-fixiert.
   Dadurch ist ein Panel links oben blaeulich-hell und rechts unten fast
   schwarz - genau wie die Flaeche, auf der es liegt. Abgehoben wird es
   nur ueber die weisse Schicht, den Rand und den Schatten. */
/* Der Verlauf wird in Bildschirmgroesse gezeichnet und um die Position des
   Panels zurueckgeschoben - dadurch zeigt jedes Panel genau den Ausschnitt,
   der an seiner Stelle auch im Hintergrund liegt.
   (background-attachment: fixed waere der direkte Weg, wird bei
   position: fixed aber ignoriert - der Verlauf klebte dann am Element.)
   --bg-x/--bg-y setzt das Skript, die Werte hier sind nur der Rueckfall. */
.modal, .pending-bar{
  --bg-x: 0px; --bg-y: 0px; --bg-w: 100vw; --bg-h: 100vh;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    var(--app-gradient);
  background-size: auto, var(--bg-w) var(--bg-h), var(--bg-w) var(--bg-h), var(--bg-w) var(--bg-h);
  background-position: 0 0, var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y);
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,0.11);
}

.modal{
  width: 100%; max-width: 460px;
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  max-height: 82vh; display:flex; flex-direction:column;
}
.modal h2{ font-size: 17px; margin: 0 0 6px; font-weight: 600; }
.modal-sub{ color: var(--text-2); font-size: 12.5px; margin: 0 0 14px; line-height:1.5; }

/* Jede Zeile: Bezeichnung, alter Wert, Pfeil, neuer Wert. Der alte Wert wird
   durchgestrichen - so ist die Richtung der Aenderung ohne Lesen erkennbar. */
.change-list{ overflow-y: auto; display:flex; flex-direction:column; gap:8px; }
.change-row{
  padding: 9px 11px; border-radius: var(--radius-sm);
  /* Etwas heller als die Flaeche, auf der sie liegen - sonst verschwinden
     die Zeilen im durchscheinenden Untergrund. */
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.07);
}
.change-label{ font-size: 11.5px; color: var(--text-2); margin-bottom: 3px; }
.change-values{ display:flex; align-items:center; gap:8px; font-size: 13px; flex-wrap: wrap; }
.change-from{ color: var(--text-3); text-decoration: line-through; }
.change-arrow{ color: var(--text-3); font-size: 12px; }
.change-to{ color: var(--text-1); font-weight: 600; }
.change-row.is-risky{ border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.06); }
.change-row.is-risky .change-to{ color: var(--accent-red); }

.modal-warning{
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.28);
  color: var(--text-2); font-size: 12px; line-height: 1.5;
}
.modal-warning.hidden{ display:none !important; }

.modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top: 18px; }

/* --- Leiste am unteren Rand fuer ungespeicherte Aenderungen --------------

   Vorher schwebte hier eine Blase ueber dem Inhalt - bei mehreren Zeilen
   verdeckte sie die Karte, an der man gerade arbeitete. Eine Leiste am
   unteren Rand kann das nicht: sie liegt ausserhalb der Inhaltsspalte, und
   der Inhalt bekommt unten genau so viel zusaetzlichen Platz, dass sich
   alles unter ihr hervorscrollen laesst. */

.pending-bar{
  position: fixed; z-index: 110;
  left: var(--sidebar-w); right: 0; bottom: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 40px;
  border-top: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35);
  animation: popover-in .14s ease-out;
}
.pending-bar.hidden{ display:none !important; }

/* Bewusst NUR die Deckkraft animieren. Ein transform - und sei es nur fuer
   140 ms - macht das Element zum Bezugsrahmen fuer seinen Hintergrund;
   der Verlauf stuende dann beim Einblenden kurz falsch. */
@keyframes popover-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

.pending-body{ flex:1; min-width:0; }
.pending-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.pending-count{
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-mint); white-space: nowrap;
}

.pending-list{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }

/* Eine Aenderung als Chip: Bezeichnung, alter Wert, Pfeil, neuer Wert -
   dieselbe Information wie im Fenster, nur auf eine Zeile gelegt. */
.change-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.07);
  font-size: 12px; white-space: nowrap; max-width: 100%;
}
.change-chip .chip-label{ color: var(--text-2); }
.change-chip.is-risky{ border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.07); }
.change-chip.is-risky .change-to{ color: var(--accent-red); }

.pending-more{ font-size: 11.5px; white-space: nowrap; }
.pending-more.hidden{ display:none !important; }

.pending-warning{
  margin-top: 7px; color: var(--accent-red); opacity: .85;
  font-size: 11.5px; line-height: 1.45;
}
.pending-warning.hidden{ display:none !important; }

.pending-actions{ display:flex; gap:8px; flex:none; }

/* Solange die Leiste steht, bekommt der Inhalt unten Luft - sonst laege
   der letzte Knopf einer Seite dauerhaft darunter. */
.content.has-pending{ padding-bottom: 132px; }

.btn-small{ padding: 6px 13px; font-size: 12px; }

/* --- Wallet Tracker: mehrere Wallets --- */
.tracker-hint{ margin-bottom: 14px; }
.tracker-error{
  color: var(--accent-red);
  font-size: 12.5px;
  margin: 2px 0 10px;
}
/* Die Stat-Kachel zeigt bis zu drei Adressen untereinander. */
.tracked-wallet-row{ line-height: 1.45; }
.tracked-wallet-row + .tracked-wallet-row{ margin-top: 2px; }

.auth-btn{ width: 100%; justify-content: center; margin-top: 6px; }

.auth-switch{
  margin: 16px 0 0; text-align: center;
  font-size: 12.5px; color: var(--text-2);
}
.auth-switch a{ color: var(--accent-mint); text-decoration: none; }
.auth-switch a:hover{ text-decoration: underline; }

.side-user{
  font-size: 12px; color: var(--text-1);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Entwickler-Schaltflaeche zum Ueberspringen der Anmeldung */
.auth-skip{
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  font-size: 12.5px;
  opacity: .75;
}
.auth-skip.hidden{ display: none !important; }

/* --------------------------- Guthaben-Diagramm -------------------------- */
/*
   Einzelne Datenreihe -> keine Legende noetig, der Titel benennt sie.
   Reihenfarbe #1baf7a: gegen die Kartenflaeche geprueft (Helligkeitsband,
   Chroma, Kontrast >= 3:1).
*/
.chart-head{ align-items: flex-start; }
.chart-sub{ margin: 2px 0 0; font-size: 12px; }

.range-row{ display: flex; gap: 4px; }
.range-btn{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-border);
  color: var(--text-2);
  font-family: var(--font); font-size: 12px;
  padding: 5px 11px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.range-btn:hover{ background: rgba(255,255,255,0.09); color: var(--text-1); }
.range-btn.active{ background: rgba(27,175,122,0.16); border-color: rgba(27,175,122,0.4); color: #4fd3a0; }

.chart-stats{ display: flex; gap: 28px; margin: 16px 0 4px; flex-wrap: wrap; }
.chart-stat{ display: flex; flex-direction: column; gap: 3px; }
.chart-stat-label{ font-size: 11px; color: var(--text-3); }
.chart-stat-value{ font-size: 15px; font-weight: 600; color: var(--text-1); }
.chart-stat-value.up{ color: #4fd3a0; }
.chart-stat-value.down{ color: var(--accent-red); }

.chart-wrap{ position: relative; margin-top: 10px; }
#balance-chart{ width: 100%; height: 240px; display: block; }

.chart-tooltip{
  position: absolute; pointer-events: none;
  background: rgba(10,16,26,0.96);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  white-space: nowrap; z-index: 5;
}
.chart-tooltip.hidden{ display: none; }
.chart-tooltip .tt-value{ font-weight: 650; color: var(--text-1); font-size: 13px; }
.chart-tooltip .tt-time{ color: var(--text-2); }
.chart-tooltip .tt-key{
  display: inline-block; width: 12px; height: 2px; border-radius: 1px;
  background: #1baf7a; margin-right: 6px; vertical-align: middle;
}

.chart-empty{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 13px; text-align: center; padding: 0 20px;
}
.chart-empty.hidden{ display: none; }

.chart-table-btn{ margin-top: 12px; font-size: 12px; padding: 7px 14px; }
.chart-table{ margin-top: 12px; max-height: 240px; overflow-y: auto; }
.chart-table.hidden{ display: none; }
.chart-table table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chart-table th{
  text-align: left; color: var(--text-3); font-weight: 500;
  padding: 6px 8px; border-bottom: 1px solid var(--panel-border);
  position: sticky; top: 0; background: #0b1220;
}
.chart-table td{ padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-2); }
.chart-table td.val{ color: var(--text-1); font-variant-numeric: tabular-nums; }

/* Explorer-Link in den Log-Zeilen */
.log-explorer{
  background: none; border: none; padding: 0 0 0 4px;
  color: var(--accent-mint); font-family: var(--font); font-size: 11.5px;
  cursor: pointer; opacity: .8;
}
.log-explorer:hover{ opacity: 1; text-decoration: underline; }

/* Solana-Zeichen neben dem Guthaben */
.sol-mark{
  width: 15px; height: 12px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(0,255,163,0.25));
}

/* Windows zeichnet bei Zahlenfeldern kleine Pfeile in Systemfarben.
   Ausblenden - der Wert laesst sich weiterhin tippen und mit dem Mausrad
   sowie den Pfeiltasten aendern. */
input[type="number"]{ -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}


/* ------------------------------ Web-app additions ------------------------------ */

.nav-link{ text-decoration:none; display:block; }
.modal-text{ color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; }
.btn-danger{ background: var(--accent-red); color:#fff; border:none; }
.btn-danger:hover{ filter: brightness(1.08); }
.card-danger{ border-color: rgba(255,107,107,0.35); }

.deposit-row{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.deposit-qr{ width:168px; height:168px; border-radius: var(--radius-md); background: rgba(255,255,255,0.04);
             border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; padding:10px; }
.deposit-qr img{ width:100%; height:100%; }
.deposit-info{ flex:1; min-width:260px; }
.deposit-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.field-inline{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.field-inline .text-input{ max-width:200px; }
.check-inline{ display:flex; gap:8px; align-items:center; color: var(--text-2); font-size:13px; }

.withdraw-list{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.withdraw-row{ display:flex; gap:12px; align-items:center; font-size:12.5px; color: var(--text-2);
               padding:8px 10px; border:1px solid var(--panel-border); border-radius: var(--radius-sm); }
.withdraw-row .mono{ color: var(--text-1); }
.withdraw-row .status{ margin-left:auto; text-transform:capitalize; }
.withdraw-row.sent .status{ color: var(--accent-mint); }
.withdraw-row.failed .status{ color: var(--accent-red); }

.key-reveal{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; word-break:break-all;
             background: rgba(255,255,255,0.05); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
             padding:12px; user-select:all; margin:6px 0 10px; }

/* Admin */
.admin-tabs{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.admin-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.admin-table th, .admin-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--panel-border); vertical-align:top; }
.admin-table th{ color: var(--text-3); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.admin-table .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.admin-toolbar .text-input{ max-width:320px; }
.kv{ display:grid; grid-template-columns: 180px 1fr; gap:6px 14px; font-size:13px; }
.kv dt{ color: var(--text-3); }
.kv dd{ margin:0; color: var(--text-1); word-break:break-all; }
.scroll-x{ overflow-x:auto; }

/* ------------------------------ Setup wizard ------------------------------ */
.setup-overlay{ position:fixed; inset:0; z-index:200; background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);
                display:flex; align-items:center; justify-content:center; padding:24px; }
.setup-shell{ width:min(1100px, 100%); height:min(820px, 100%); display:flex; border-radius: var(--radius-lg);
              border:1px solid var(--panel-border-2); background:#000; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.85); }
.setup-steps{ width:260px; flex:none; background: rgba(255,255,255,0.03); border-right:1px solid var(--panel-border);
              padding:22px 16px; display:flex; flex-direction:column; }
.setup-brand{ display:flex; align-items:center; gap:10px; font-weight:600; margin-bottom:18px; }
.setup-brand img{ width:28px; height:28px; }
.setup-steps ol{ list-style:none; margin:0; padding:0; flex:1; overflow:auto; }
.setup-step-item{ display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius: var(--radius-sm);
                  color: var(--text-2); font-size:13px; cursor:pointer; }
.setup-step-item:hover{ background: var(--panel-hover); }
.setup-step-item.active{ background: rgba(48,213,160,0.12); color: var(--text-1); }
.setup-step-item.done{ color: var(--text-1); }
.setup-step-num{ width:22px; height:22px; border-radius:50%; border:1px solid var(--panel-border); display:flex;
                 align-items:center; justify-content:center; font-size:11px; flex:none; }
.setup-step-item.done .setup-step-num{ background: var(--accent-mint); color:#04070f; border-color: transparent; }
.setup-progress{ height:6px; border-radius:3px; background: rgba(255,255,255,0.08); overflow:hidden; margin-top:12px; }
.setup-progress > div{ height:100%; background: var(--accent-mint); width:0; transition: width .3s ease; }
.setup-progress-text{ color: var(--text-3); font-size:12px; margin:8px 0 0; }
.setup-content{ flex:1; display:flex; flex-direction:column; min-width:0; }
.setup-header{ display:flex; justify-content:space-between; align-items:flex-start; padding:22px 26px 10px; }
.setup-header h2{ margin:4px 0 0; font-size:20px; }
.setup-kind{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px;
             border:1px solid var(--panel-border); color: var(--text-2); }
.setup-kind.web{ color: var(--accent-mint); border-color: rgba(48,213,160,0.4); }
.setup-kind.server{ color:#ffb86b; border-color: rgba(255,184,107,0.4); }
.setup-kind.check{ color: var(--accent-violet); border-color: rgba(139,124,255,0.4); }
.setup-kind.smoke{ color:#6bd4ff; border-color: rgba(107,212,255,0.4); }
.setup-step-tag{ margin-left:auto; flex:none; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
                 padding:2px 6px; border-radius:999px; border:1px solid var(--panel-border); color: var(--text-3); }
.setup-step-tag.web{ color: var(--accent-mint); border-color: rgba(48,213,160,0.4); }
.setup-step-tag.server{ color:#ffb86b; border-color: rgba(255,184,107,0.4); }
.setup-step-tag.check{ color: var(--accent-violet); border-color: rgba(139,124,255,0.4); }
.setup-step-tag.smoke{ color:#6bd4ff; border-color: rgba(107,212,255,0.4); }
.setup-scope{ padding:10px 12px; border-radius: var(--radius-sm); margin:6px 0 14px; font-weight:600; font-size:13px;
              line-height:1.5; border-left:4px solid var(--panel-border); background: rgba(255,255,255,0.05); }
.setup-scope.web{ border-left-color: var(--accent-mint); background: rgba(48,213,160,0.10); color: var(--accent-mint); }
.setup-scope.server{ border-left-color:#ffb86b; background: rgba(255,184,107,0.10); color:#ffb86b; }
.setup-scope.check{ border-left-color: var(--accent-violet); background: rgba(139,124,255,0.10); color: var(--accent-violet); }
.setup-scope.smoke{ border-left-color:#6bd4ff; background: rgba(107,212,255,0.10); color:#6bd4ff; }
.setup-scope-inline{ margin-top:16px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.setup-scope-inline.web{ color: var(--accent-mint); }
.setup-scope-inline.server{ color:#ffb86b; }
.setup-scope-inline.check{ color: var(--accent-violet); }
.setup-scope-inline.smoke{ color:#6bd4ff; }
.setup-body{ flex:1; overflow:auto; padding:6px 26px 20px; }
.setup-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 26px;
               border-top:1px solid var(--panel-border); }
.setup-status{ color: var(--accent-mint); font-size:12.5px; }
.setup-text{ color: var(--text-2); font-size:13.5px; line-height:1.55; margin:0 0 12px; }
.setup-note{ border:1px solid var(--panel-border); border-radius: var(--radius-sm); padding:10px 12px; font-size:13px;
             color: var(--text-2); margin:12px 0; }
.setup-note.warn{ border-color: rgba(255,184,107,0.45); color:#ffd9b0; }
.setup-note.ok{ border-color: rgba(48,213,160,0.45); color:#b9f2dc; }
.setup-code{ background: rgba(255,255,255,0.05); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
             padding:12px; font-size:12px; line-height:1.5; overflow-x:auto; white-space:pre; color: var(--text-1); margin:8px 0 14px; }
.setup-check{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0;
              border-bottom:1px solid var(--panel-border); font-size:13px; }
.setup-check .pill{ max-width:60%; white-space:normal; text-align:right; }
.setup-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 6px; align-items:center; }
.setup-result{ font-size:12.5px; padding:8px 10px; border-radius: var(--radius-sm); margin:6px 0 10px; }
.setup-result.ok{ background: rgba(48,213,160,0.12); color:#b9f2dc; }
.setup-result.bad{ background: rgba(255,107,107,0.12); color:#ffc2c2; }
.setup-advanced{ margin:6px 0 10px; }
.setup-advanced summary{ cursor:pointer; color: var(--text-2); font-size:13px; margin-bottom:8px; }
.setup-legend{ display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; }
.setup-legend-row{ display:flex; gap:12px; align-items:flex-start; }
.setup-legend-row .setup-kind{ flex:none; margin-top:2px; min-width:150px; text-align:center; }
.setup-legend-row .setup-text{ margin:0; }
.setup-done-toggle{ margin-top:14px; padding:10px 12px; border:1px solid var(--panel-border); border-radius: var(--radius-sm); }
.setup-smoke-head{ display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.setup-smoke-head .field{ flex:1; min-width:280px; margin:0; }
.setup-smoke-stats{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-bottom:8px; font-size:13px; }
.setup-smoke-steps{ list-style:none; padding:0; margin:6px 0 14px; }
.setup-smoke-step{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--panel-border); font-size:13.5px; }
.setup-smoke-step.ok{ color: var(--text-3); }
.setup-smoke-step.ok strong{ color: var(--text-2); font-weight:500; }
.setup-smoke-mark{ width:22px; flex:none; color: var(--accent-mint); font-weight:700; }
.setup-log{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
.setup-log-row{ display:flex; gap:12px; }
.setup-log-row .hint{ flex:none; width:70px; margin:0; }
@media (max-width: 800px){ .setup-shell{ flex-direction:column; } .setup-steps{ width:100%; max-height:30%; } }

/* ============================================================================
   Design alignment with the landing page (loaded last, overrides above).
   Same tokens, same type: Archivo headings, Inter text, JetBrains Mono data,
   flat black surfaces with hairline borders, gradient primary action.
   ============================================================================ */

body{ background: #000; background-image: none; }

h1, h2, h3, h4, .brand > span, .auth-brand-name, .stat-value{
  font-family: var(--font-head);
  font-weight: 400;
}
h1{ font-variation-settings: 'wdth' 112, 'wght' 780; letter-spacing: -.03em; }
h2, h3, .section-title{ font-variation-settings: 'wdth' 108, 'wght' 720; letter-spacing: -.02em; }
.stat-value{ font-variation-settings: 'wdth' 104, 'wght' 660; }
.brand > span, .auth-brand-name{ font-variation-settings: 'wdth' 118, 'wght' 800; letter-spacing: .09em; }

.mono, .text-display, .text-input.mono, .log-mint, .log-time, .stat-label, .filter-count, .pill,
.chart-stat-label, .admin-table .mono, .setup-code, .key-reveal, .tracked-wallet-row{
  font-family: var(--font-mono);
}
.stat-label, .chart-stat-label, .filter-chip, .pill{ letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }

/* surfaces: flat black, hairline, faint top highlight */
.card, .modal, .pending-bar, .auth-card, .stat-card, .setup-note, .withdraw-row, .log-item{
  background: #000;
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.6);
}
.card:hover, .stat-card:hover{ border-color: var(--panel-border-2); background: rgba(255,255,255,.012); }
.sidebar{ background: #000; border-right: 1px solid var(--panel-border); }
.sidebar .brand-logo, .auth-brand img, .setup-brand img{
  filter: drop-shadow(0 0 7px rgba(124,58,237,.34)) drop-shadow(0 0 18px rgba(34,211,238,.18));
}
.nav-item.active{ background: rgba(255,255,255,.035); color: var(--text-1); }
.nav-item:hover{ background: rgba(255,255,255,.02); }

/* inputs */
.text-input, .text-display{ background: #000; border-color: var(--panel-border-2); border-radius: var(--radius-sm); }
.text-input:focus{ border-color: rgba(34,211,238,.45); box-shadow: none; }
.field > label{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }

/* buttons */
.btn{ border-radius: 999px; font-family: var(--font-head); font-variation-settings: 'wdth' 100, 'wght' 640; font-weight: 400; }
.btn-primary{
  background: var(--grad); color: #03040a; border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(34,211,238,.14);
}
.btn-primary:hover{ filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 34px rgba(34,211,238,.24); }
.btn-primary:disabled{ filter: grayscale(.6); opacity: .55; }
.btn-secondary{
  background: linear-gradient(90deg, rgba(124,58,237,.05) 0%, rgba(34,211,238,.05) 50%, rgba(52,211,153,.05) 100%), #000;
  border: 1px solid var(--panel-border-2); color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-secondary:hover{
  background: linear-gradient(90deg, rgba(124,58,237,.09) 0%, rgba(34,211,238,.09) 50%, rgba(52,211,153,.09) 100%), #000;
  border-color: rgba(255,255,255,.16);
}
.btn-danger-ghost{ border-radius: 999px; }
.btn-link, .log-explorer{ color: var(--accent-cyan); }

/* status */
.pill-on{ color: var(--accent-mint); border-color: rgba(52,211,153,.26); background: #000; }
.pill-off{ color: var(--text-3); border-color: var(--panel-border-2); background: #000; }
.pill-error{ color: var(--accent-red); border-color: rgba(255,107,107,.3); background: #000; }
.dot-on{ background: var(--accent-mint); box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
.filter-chip.active{ border-color: rgba(52,211,153,.26); color: var(--accent-mint); }
.callout{ border-color: rgba(124,58,237,.35); background: #000; }

/* auth screen and wizard */
.auth-screen{ background: #000; }
.auth-card{ border-radius: 20px; }
.setup-steps{ background: #000; }
.setup-step-item.active{ background: rgba(255,255,255,.035); }
.setup-progress > div{ background: var(--grad); }
.modal-overlay, .setup-overlay{ background: rgba(0,0,0,.9); }