/* ============================================================================
   DMO app — design v4 "Violet"

   Loaded after style.css on /app/ only (admin and landing never load it).
   Neutral graphite greys, one violet accent (orange while paper trading),
   Inter for text and numbers, JetBrains Mono for addresses.

   Aufbau: Kopfzeile oben (Marke, Bereiche als Segment-Leiste, Bot-Status mit
   globalem Start/Stop-Knopf, Konto), darunter der Inhalt als Kachel-Raster.
   Unter 900 px wird die Navigation zur Tab-Leiste am unteren Rand.
   ============================================================================ */

:root{
  --bg: #16181c;
  --tile: #1d2025;
  --tile-2: #23272c;
  --tile-3: #2b2f35;
  --line: #2c3036;
  --line-2: #3a3f46;
  --topbar-bg: #16181c;
  --tickerbar-bg: #1a1c20;
  --text-1: #f1f2f4;
  --text-2: #a4a9b1;
  --text-3: #6d737c;
  --dim: #50555d;

  /* Akzent & Co. werden unten auf `body` aus den --u-*-Variablen des
     Theme-Customizers (theme.js setzt sie auf <html>) abgeleitet. */

  /* Gewinn/Verlust bewusst gedaempft: gut unterscheidbar, aber ohne zu
     leuchten - auf dem dunklen Grund waren die gesaettigten Toene anstrengend. */
  --accent-mint: #7cc4a0;
  --accent-red: #d98a8f;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-tile: 18px;
  --r-ctl: 12px;
}
/* Alles, was vom Akzent abhaengt, wird hier auf `body` berechnet statt auf
   :root: so greift der Paper-Modus (anderer --accent auf body) auch fuer die
   abgeleiteten Toene, und eigene Farben aus dem Customizer (--u-*, auf
   <html> gesetzt) gewinnen ueber die Standardwerte. */
body{
  --accent: var(--u-accent, #8b5cf6);
  --accent-ink: var(--u-accent-ink, #ffffff);
}
body.paper-mode{
  --accent: var(--u-accent-paper, #ff9d2e);
  --accent-ink: var(--u-accent-paper-ink, #1a0d00);
}
body, body.paper-mode{
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-violet: var(--accent);
  --accent-cyan: var(--accent);
  --grad: var(--accent);
  --app-btn-grad: var(--accent);
  --series: var(--u-series, var(--accent));
  --glow-color: var(--u-glow, var(--accent));

  --tile-2: color-mix(in srgb, var(--tile) 96%, #ffffff);
  --tile-3: color-mix(in srgb, var(--tile) 92%, #ffffff);
  --line-2: color-mix(in srgb, var(--line) 92%, #ffffff);

  --nav-bg: var(--u-nav-bg, var(--tile));
  --nav-ink: var(--u-nav-ink, var(--text-2));
  --nav-active-bg: var(--u-nav-active, var(--accent));
  --nav-active-ink: var(--u-nav-active-ink, var(--accent-ink));
  --topbar-ink: var(--u-topbar-ink, var(--text-1));

  --btn-bg: var(--u-btn-bg, var(--accent));
  --btn-ink: var(--u-btn-ink, var(--accent-ink));
  --btn2-bg: var(--u-btn2-bg, var(--tile-2));
  --btn2-ink: var(--u-btn2-ink, var(--text-1));
  --link: var(--u-link, var(--accent));
  --win-soft: color-mix(in srgb, var(--accent-mint) 10%, transparent);
  --loss-soft: color-mix(in srgb, var(--accent-red) 10%, transparent);
}

html body{
  background: var(--bg);
  background-image:
    linear-gradient(160deg, var(--bg-gradient-from, transparent), var(--bg-gradient-to, transparent)),
    radial-gradient(1100px 420px at 50% -180px, var(--accent-soft), transparent 70%);
  background-attachment: fixed;
  font-family: var(--font);
  color: var(--text-1);
}
html body::before{ display: none; }

/* typography reset for everything the old skin set in Archivo */
#app h1, #app h2, #app h3, #app .stat-value, #app .chart-stat-value,
.auth-card h2, .auth-brand-name{
  font-family: var(--font-head); font-variation-settings: normal; text-shadow: none;
}
#app, .auth-card{ font-feature-settings: "cv11", "ss01", "tnum"; }
#app .mono, #app .text-input.mono, #app .text-display.mono, #app .log-mint, #app .log-time{
  font-family: var(--font-mono);
}

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

#app.shell2{ display: flex; flex-direction: column; height: 100vh; }
#app.shell2.hidden{ display: none !important; }

#app .hdr{
  flex: none; position: relative; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  height: 68px; padding: 0 clamp(16px, 2.6vw, 36px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--topbar-bg) 90%, transparent); backdrop-filter: blur(14px);
}
#app .hdr .brand{ display: flex; align-items: center; gap: 10px; padding: 0; text-decoration: none; color: var(--topbar-ink); flex: none; }
#app .hdr .brand-logo{ height: 28px; width: auto; filter: none; }
body.paper-mode #app .hdr .brand-logo{ filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.05); }
#app .hdr .brand-text{ display: flex; flex-direction: column; gap: 3px; line-height: 1; }
#app .hdr .brand-name{
  font-family: 'Archivo', var(--font); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 19px; letter-spacing: .08em; color: var(--topbar-ink);
}
#app .hdr .brand-sub{
  font-family: var(--font); font-variation-settings: normal; font-size: 9.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); opacity: 1; margin: 0;
}

#app .hdr .nav{
  display: flex; flex-direction: row; align-items: center; gap: 2px;
  margin: 0 auto; padding: 4px; flex: 0 1 auto; min-width: 0;
  background: var(--nav-bg); border: 1px solid var(--line); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
#app .hdr .nav::-webkit-scrollbar{ display: none; }
#app .hdr .nav-item{
  display: flex; align-items: center; gap: 7px; width: auto; flex: 0 0 auto;
  padding: 8px 14px; border: 0; border-radius: 999px; background: none;
  color: var(--nav-ink); font-family: var(--font); font-size: 13px; font-weight: 500;
  white-space: nowrap; text-decoration: none; text-shadow: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#app .hdr .nav-item:hover{ color: var(--topbar-ink); background: color-mix(in srgb, var(--nav-bg) 88%, #ffffff); }
#app .hdr .nav-item.active{ background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
#app .hdr .nav-item.active::after, #app .hdr .nav-item.active::before{ content: none; }
#app .hdr .nav-item.hidden{ display: none; }
#app .hdr .nav-icon{
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
#app .hdr .nav-item.active .nav-icon{ color: var(--nav-active-ink); opacity: 1; }

#app .hdr-right{ display: flex; align-items: center; gap: 10px; flex: none; }
#app .status-chip{
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--tile);
}
#app .status-chip .bot-status-text{ display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-1); }
#app .status-chip .status-row{ display: flex; align-items: center; gap: 6px; padding: 0 0 0 10px; border: 0; border-left: 1px solid var(--line); background: none; min-height: 0; }
#app .status-chip .status-row.hidden{ display: none; }
#app .status-chip .label{ display: none; }
#app .status-chip .pill{ padding: 0; border: 0; background: none; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; }
#app .status-chip .pill::before{ content: none; }
#app .hdr-bot-btn{ height: 38px; min-height: 38px; padding: 0 18px; }
#app .hdr .account-chip{ display: flex; align-items: center; gap: 8px; padding-left: 4px; }
#app .hdr .side-user{ font-size: 13px; color: var(--topbar-ink); opacity: .75; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .hdr .icon-btn-round{
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--tile); color: var(--text-2);
}
#app .hdr .icon-btn-round:hover{ color: var(--text-1); border-color: var(--line-2); }

#app > .content{
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 30px clamp(16px, 2.6vw, 36px) 72px;
}
#app > .content > .page{ width: 100%; max-width: 1320px; margin: 0 auto; }

#app .page-header{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#app .content .page .page-header > div::before{ content: none !important; }
#app .page-header h1{
  margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; filter: none;
  /* Dezenter Glow in der Akzentfarbe; ueber den Theme-Customizer abschaltbar
     (--glow-size-2 = 0px). Keine weissen Schleier, kein Glow auf Kacheltiteln. */
  text-shadow: 0 0 calc(var(--glow-size-2) * .55) color-mix(in srgb, var(--glow-color) 55%, transparent) !important;
}
#app .section-title, #app .tile-label, #app .card-title-row h3, #app h3{ text-shadow: none !important; }
#app .hdr .nav-item, #app .hdr .nav-item:hover, #app .hdr .nav-item.active{ text-shadow: none !important; }
#app .page-header .muted{ margin-top: 6px; font-size: 13.5px; color: var(--text-3); }

/* --------------------------------------------------------- tiles & cards */

#app .tile, #app .card{
  position: relative; padding: 22px; margin-bottom: 14px;
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: none; backdrop-filter: none;
}
#app .card:hover, #app .tile:hover{ background: var(--tile); border-color: var(--line); }
#app .tile-label, #app .section-title, #app .card-title-row h3{
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-2);
}
#app .card-title-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#app .card-title-row h3{ margin: 0; }
#app .tile-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#app .tile-head .tile-label{ margin: 0; }
#app .muted.small{ font-size: 12px; color: var(--text-3); }
#app .chart-sub{ margin: 3px 0 0; font-size: 12px; color: var(--text-3); }
#app .hint{ margin: 8px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.6; }
#app .tile-label + .hint, #app .section-title + .hint{ margin: -6px 0 16px; }

#app .note{
  padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.55;
  color: var(--text-2); background: var(--tile-2); border: 1px solid var(--line);
}
#app .note strong{ color: var(--text-1); }
#app .note-warn, #app .callout{ margin-bottom: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text-1); border-radius: 14px; padding: 14px 16px; }

/* ---------------------------------------------------------------- bento */

#app .bento{
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "value value value value value chart chart chart chart chart chart chart"
    "bot   bot   bot   bot   pos   pos   pos   pos   pos   pos   pos   pos"
    "act   act   act   act   act   act   act   act   perf  perf  perf  perf";
}
#app .bento > .tile{ margin: 0; min-width: 0; }
#app .tile-value{ grid-area: value; display: flex; flex-direction: column; }
#app .tile-chart{ grid-area: chart; display: flex; flex-direction: column; }
#app .tile-bot{ grid-area: bot; display: flex; flex-direction: column; gap: 16px; }
#app .tile-positions{ grid-area: pos; }
#app .tile-activity{ grid-area: act; }
#app .tile-perf{ grid-area: perf; }

#app .big-value{
  display: flex; align-items: baseline; gap: 12px; margin-top: 4px;
  font-family: var(--font-head); font-weight: 700; font-size: 50px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#app .big-value .sol-mark{ width: 30px; height: 24px; flex: none; align-self: center; }
#app .hero-sub{ margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); }
#app .hero-sub.pnl-pos{ color: var(--accent-mint); }
#app .hero-sub.pnl-neg{ color: var(--accent-red); }

#app .value-split{ margin-top: auto; padding-top: 22px; }
#app .vs-bar{ display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--tile-3); }
#app .vs-bar span{ display: block; height: 100%; transition: width .5s ease; }
#app #dash-paper-bar-cash{ background: var(--text-2); }
#app #dash-paper-bar-pos{ background: var(--accent); }
#app .value-split dl{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 16px 0 0; }
#app .value-split dl > div{ display: flex; flex-direction: column; gap: 4px; }
#app .value-split dt{ display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
#app .sw{ width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
#app .sw-cash{ background: var(--text-2); }
#app .sw-pos{ background: var(--accent); }
#app .value-split dd{ margin: 0; }
#app .hb-value{ font-family: var(--font-mono); font-size: 14.5px; color: var(--text-1); }
#app .hb-value.pnl-pos{ color: var(--accent-mint); }
#app .hb-value.pnl-neg{ color: var(--accent-red); }

#app .range-row{ display: flex; gap: 2px; padding: 3px; background: var(--tile-2); border: 1px solid var(--line); border-radius: 999px; }
#app .range-btn{
  padding: 5px 11px; border: 0; border-radius: 999px; background: none;
  color: var(--text-3); font-family: var(--font); font-size: 12px; cursor: pointer;
}
#app .range-btn:hover{ color: var(--text-1); }
#app .range-btn.active{ background: var(--tile-3); color: var(--text-1); }

#app .tile-chart .chart-wrap{ flex: 1; min-height: 200px; }
#app #balance-chart{ height: 220px; }
#app .chart-stats{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px;
  margin: 10px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line);
}
#app .chart-stat{ display: flex; flex-direction: column; gap: 4px; }
#app .chart-stat-label{ font-family: var(--font); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
#app .chart-stat-value{ font-size: 16px; font-weight: 600; }
#app .chart-table-btn{ margin-left: auto; align-self: center; }
#app .chart-table{ margin-top: 12px; }

#app .bot-state{ display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
#app .bot-state .dot{ width: 12px; height: 12px; }
#app .kv{ display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--line); }
#app .kv > div{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
#app .kv dt{ font-size: 12.5px; color: var(--text-3); }
#app .kv dd{ margin: 0; text-align: right; font-size: 13.5px; color: var(--text-1); }
#app #dash-tracked-wallet{ font-size: 12px; line-height: 1.7; }
#app #dash-tracked-wallet[data-empty="1"]{ color: var(--text-3); font-family: var(--font); }
#app .tile-bot .note{ margin-top: auto; }

/* positions */
#app .positions-list{ display: flex; flex-direction: column; }
#app .positions-list.empty-state{
  display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 18px;
  border: 1px dashed var(--line-2); border-radius: 14px; color: var(--text-3); font-size: 13px; text-align: center;
}
#app .pos-row{
  display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr minmax(0, 1.1fr);
  align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px;
}
#app .pos-row:not(.pos-head):hover{ background: var(--tile-2); border-radius: 10px; }
#app .pos-row > span:not(:first-child){ text-align: right; }
#app .pos-head{ border-top: 0; padding-top: 0; font-family: var(--font); font-size: 11.5px; color: var(--text-3); }
#app .pos-token{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#app .pos-token a{ color: var(--text-1); text-decoration: none; }
#app .pos-token a:hover{ color: var(--accent); }
#app .pos-token small, #app .pos-pnl small{ font-size: 11px; color: var(--text-3); }
#app .pos-ca{
  all: unset; cursor: pointer; display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); font-size: 12px;
}
#app .pos-ca:hover{ color: var(--accent); }
#app .pos-ca:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#app .pos-ca.copied{ color: var(--accent-mint); }
#app .pos-links{ display: flex; flex-wrap: wrap; gap: 4px 10px; }
#app .pos-token .pos-links a{ color: var(--text-2); }
#app .pos-token .pos-links a:hover{ color: var(--accent); }
#app .pos-pnl{ display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#app .pos-pnl b{ font-weight: 500; }
#app .pos-pnl.pnl-pos b, #app .pos-pnl.pnl-pos small{ color: var(--accent-mint); }
#app .pos-pnl.pnl-neg b, #app .pos-pnl.pnl-neg small{ color: var(--accent-red); }

/* activity + log */
#app .filter-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#app .filter-chip{
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--text-2); font-family: var(--font); font-size: 12px; letter-spacing: 0; text-transform: none;
}
#app .filter-chip.active{ border-color: var(--accent-line); background: var(--accent-soft); color: var(--text-1); }
#app .filter-count{ padding: 1px 6px; border-radius: 99px; background: var(--tile-3); color: var(--text-2); font-size: 10.5px; }
#app .log-list{ display: flex; flex-direction: column; gap: 0; }
#app .log-list.empty-state{ padding: 18px 0; color: var(--text-3); font-size: 13px; }
#app .log-item{
  padding: 12px 4px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none;
}
#app .log-item:last-child{ border-bottom: 0; }
#app .log-item:hover{ background: var(--tile-2); }
#app .log-side{ border-radius: 6px; font-family: var(--font-mono); }
#app .log-amount{ font-family: var(--font-head); }
#app .log-paper{ color: var(--accent); border-color: var(--accent-line); background: none; }
#app .log-detail{ color: var(--text-3); }

/* performance */
#app .perf-ring-row{ display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 12px 0 16px; }
#app .perf-main .chart-stat-value{ font-size: 28px; color: var(--accent); }
#app .perf-buckets{ display: flex; flex-direction: column; gap: 10px; }
#app .perf-row{ display: grid; grid-template-columns: 82px 1fr 24px; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
#app .perf-track{ height: 6px; border-radius: 99px; background: var(--tile-3); overflow: hidden; }
#app .perf-fill-pos{ background: var(--accent-mint); }
#app .perf-fill-neg{ background: var(--accent-red); }

/* --------------------------------------------------------------- forms */

#app .field{ margin-bottom: 16px; }
#app .field > label{
  display: block; margin-bottom: 7px; font-family: var(--font); font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
}
#app .text-input, #app .text-display{
  min-height: 44px; padding: 11px 14px; border-radius: var(--r-ctl);
  background: #17191d; border: 1px solid var(--line-2); box-shadow: none;
  color: var(--text-1); font-family: var(--font); font-size: 14px;
}
#app .text-input.mono, #app .text-display.mono{ font-family: var(--font-mono); font-size: 13px; }
#app .text-input:hover{ border-color: #4a5058; }
#app .text-input:focus{ background: #17191d; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#app .text-input::placeholder{ color: var(--dim); }
#app .field-row{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border: 0; border-top: 1px solid var(--line); min-height: 0; }
#app .field-row > span:first-child{ font-size: 13.5px; color: var(--text-1); line-height: 1.5; }
#app .field-inline{ display: flex; gap: 8px; align-items: center; }
#app .slider{ background: var(--tile-3); border: 1px solid var(--line-2); }
#app .switch input:checked + .slider{ background: var(--accent); border-color: var(--accent); }
#app .switch input:checked + .slider::before{ background: var(--accent-ink); }

#app .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 20px; border-radius: 999px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  font-variation-settings: normal; box-shadow: none;
}
#app .btn-primary{ background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: none; filter: none; }
#app .btn-primary:hover:not(:disabled){ filter: brightness(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn-bg) 14%, transparent); }
#app .btn-primary:disabled{ background: var(--tile-3); color: var(--text-3); filter: none; opacity: 1; cursor: not-allowed; }
#app .btn-secondary{ background: var(--btn2-bg); color: var(--btn2-ink); border: 1px solid var(--line-2); box-shadow: none; }
#app .btn-secondary:hover{ background: color-mix(in srgb, var(--btn2-bg) 90%, #ffffff); border-color: color-mix(in srgb, var(--line-2) 85%, #ffffff); }
#app .btn-danger-ghost{ background: none; color: var(--accent-red); border: 1px solid rgba(255,95,95,.35); }
#app .btn-small{ min-height: 36px; padding: 7px 15px; font-size: 12.5px; }
#app .btn-block{ width: 100%; }
#app .btn-link{ color: var(--link); font-family: var(--font); font-size: 12.5px; }
#app .actions-right{ display: flex; justify-content: flex-end; margin-top: 8px; }

/* -------------------------------------------------------- page layouts */

#app .split{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
#app .split-even{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app .split > .tile, #app .settings-col > .tile{ margin-bottom: 0; }
#app .settings-col{ display: flex; flex-direction: column; gap: 14px; }
#app .summary-col{ position: sticky; top: 0; }
#app .field-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
#app .field-grid .field{ display: flex; flex-direction: column; justify-content: flex-end; }
#app .step-no{
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 11.5px;
}

#app .tile-summary{ background: var(--tile-2); }
#app .strategy{ list-style: none; margin: 0 0 18px; padding: 0; }
#app .strategy li{
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
#app .strategy li span{ color: var(--text-3); }
#app .strategy li strong{ font-weight: 600; text-align: right; color: var(--text-1); }

/* tracker */
#app .tracker-slot{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: end; }
#app .tracker-num{
  display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: 16px;
  border-radius: 12px; background: var(--tile-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px; color: var(--accent);
}
#app .tile-aside .tracker-hint{ margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
#app .steps{ margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
#app .steps li{ margin-bottom: 8px; }
#app .steps li::marker{ color: var(--accent); font-family: var(--font-mono); }

/* wallet */
#app .mode-switch{ display: flex; gap: 2px; padding: 4px; background: var(--tile); border: 1px solid var(--line); border-radius: 999px; }
#app .mode-btn{
  padding: 9px 18px; border: 0; border-radius: 999px; background: none;
  color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
#app .mode-btn:hover{ color: var(--text-1); }
body:not(.paper-mode) #app .mode-real,
body.paper-mode #app .mode-paper{ background: var(--accent); color: var(--accent-ink); cursor: default; }
#app .paper-card{ border-color: var(--line); }
body.paper-mode #app .paper-card{ border-color: var(--accent-line); }
#app #paper-off .hint{ margin: 0; max-width: 780px; }
#app .paper-grid{ display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 10px; }
#app .paper-stat{
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px;
  border-radius: 14px; background: var(--tile-2); border: 1px solid var(--line);
}
#app .paper-stat-main{ background: var(--accent-soft); border-color: var(--accent-line); }
#app .paper-stat-main .chart-stat-value{ font-size: 26px; font-weight: 700; }
#app .paper-stat-sub{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
#app .paper-stat-sub.pnl-pos{ color: var(--accent-mint); }
#app .paper-stat-sub.pnl-neg{ color: var(--accent-red); }
#app .paper-controls{
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
#app .paper-controls .field{ flex: 1 1 380px; max-width: 560px; margin: 0; }
#app .deposit-row{ display: flex; gap: 18px; align-items: flex-start; }
#app .deposit-qr{ width: 132px; height: 132px; flex: none; padding: 8px; background: #fff; border: 0; border-radius: 14px; }
#app .deposit-info{ min-width: 0; flex: 1; }
#app .deposit-actions{ display: flex; flex-wrap: wrap; gap: 8px; }

/* settings page tabs + other pages reuse .card, styled like tiles above */
#app #settings-tabs .filter-chip{ padding: 8px 14px; font-size: 13px; }

/* ------------------------------------------------------------ auth */

.auth-screen{ background: var(--bg); background-image: radial-gradient(900px 500px at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.auth-card{ background: #1d2025; border: 1px solid #2c3036; border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.5); backdrop-filter: none; font-family: 'Inter', system-ui, sans-serif; }
.auth-card .btn-primary{ background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; box-shadow: none; font-family: inherit; font-weight: 600; }
.auth-card .text-input{ background: #17191d; border-color: #3a3f46; border-radius: 12px; font-family: inherit; }
.auth-card .text-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-card .field > label{ font-family: inherit; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #a4a9b1; }
.auth-card a{ color: var(--link); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1240px){
  #app .bento{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "value chart" "bot pos" "act act" "perf perf";
  }
  #app .hdr .side-user{ display: none; }
  #app .paper-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .paper-stat-main{ grid-column: 1 / -1; }
}

@media (max-width: 1080px){
  #app .hdr .nav-item span{ display: none; }
  #app .hdr .nav-item{ padding: 9px 12px; }
  #app .split{ grid-template-columns: minmax(0, 1fr); }
  #app .summary-col{ position: static; }
}

@media (max-width: 900px){
  /* backdrop-filter wuerde die fixierte Tab-Leiste im Header einsperren */
  #app .hdr{ height: 58px; gap: 10px; backdrop-filter: none; background: var(--topbar-bg); }
  #app .hdr .brand-text{ display: none; }
  #app .hdr-right{ margin-left: auto; gap: 6px; }
  #app .hdr .account-chip{ display: none; }
  /* Tab-Leiste unten, wie in einer Handy-App */
  #app .hdr .nav{
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40;
    justify-content: space-around; margin: 0; padding: 6px;
    background: color-mix(in srgb, var(--nav-bg) 97%, transparent); backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
  }
  #app .hdr .nav-item{ flex-direction: column; gap: 3px; padding: 7px 10px; font-size: 10px; }
  #app .hdr .nav-item span{ display: block; }
  #app .hdr .nav-item[data-page="rewards"] span, #app .hdr .nav-item[data-page="logs"] span{ font-size: 10px; }
  #app .hdr .nav-icon{ width: 18px; height: 18px; }
  #app .ticker-bar{ display: none; }
  #app > .content{ padding: 20px 14px 110px; }
  #app .bento{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "value" "chart" "bot" "pos" "act" "perf"; }
  #app .split-even{ grid-template-columns: minmax(0, 1fr); }
  #app .big-value{ font-size: 42px; }
  #app .page-header h1{ font-size: 24px; }
  #app .page-header{ flex-wrap: wrap; }
}

@media (max-width: 560px){
  #app .hdr .nav-item span{ display: none; }
  #app .status-chip{ padding: 0 10px; }
  #app .status-chip .status-row{ display: none; }
  #app .hdr-bot-btn{ padding: 0 14px; font-size: 12.5px; }
  #app .hdr .icon-btn-round{ width: 34px; height: 34px; }
  #app .tile, #app .card{ padding: 18px 16px; }
  #app .field-grid{ grid-template-columns: minmax(0, 1fr); }
  #app .paper-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .pos-row{ grid-template-columns: minmax(0, 1.3fr) 1fr minmax(0, 1.1fr); }
  #app .pos-row > span:nth-child(2){ display: none; }
  #app .deposit-row{ flex-direction: column; }
  #app .field-inline{ flex-direction: column; align-items: stretch; }
  #app .chart-table-btn{ margin-left: 0; }
}

#app .pill-warn{ color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; }
#app .ticker-bar .icon-btn-round{ width: 26px; height: 26px; border: 0; background: none; }

#app .value-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
#app .value-sell-all{ display: flex; margin-top: auto; padding-top: 10px; }
#app .value-actions:not(.hidden) ~ .value-sell-all{ margin-top: 0; }

/* gedaempfte Gewinn/Verlust-Flaechen */
#app .log-side.buy, #app .log-pill.ok{ background: var(--win-soft); color: var(--accent-mint); }
#app .log-side.sell, #app .log-pill.error{ background: var(--loss-soft); color: var(--accent-red); }
#app .log-item.status-ok{ border-left-color: var(--accent-mint); }
#app .log-item.status-error{ border-left-color: var(--accent-red); }
#app .perf-fill-pos{ background: var(--accent-mint); opacity: .85; }
#app .perf-fill-neg{ background: var(--accent-red); opacity: .85; }

/* untere Ticker-Leiste im selben Grau */
#app .ticker-bar{ background: var(--tickerbar-bg); border-top: 1px solid var(--line); }

/* ------------------------------------------------------- balance chip */

#app .bal-wrap{ position: relative; }
#app .bal-chip{
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--tile);
  color: var(--text-1); font-family: var(--font); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
#app .bal-chip:hover, #app .bal-chip[aria-expanded="true"]{ border-color: var(--accent-line); background: var(--tile-2); }
#app .bal-sol{ width: 16px; height: 13px; flex: none; }
#app .bal-caret{ width: 10px; height: 7px; fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
#app .bal-chip[aria-expanded="true"] .bal-caret{ transform: rotate(180deg); }

#app .bal-panel{
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 340px;
  padding: 18px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--tile);
  box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: balIn .14s ease;
}
@keyframes balIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
#app .bal-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app .bal-title{ font-size: 12.5px; font-weight: 600; color: var(--text-2); }
#app .bal-unit{ display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tile-2); }
#app .bal-unit-btn{
  padding: 4px 10px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text-3); font-family: var(--font); font-size: 11.5px; font-weight: 600;
}
#app .bal-unit-btn.active{ background: var(--accent); color: var(--accent-ink); }
#app .bal-amount{ margin-top: 14px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#app .bal-sub{ margin-top: 4px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
#app .bal-addr{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px;
  padding: 9px 12px; border-radius: 12px; background: var(--tile-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
}
#app .bal-tabs{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0; padding: 4px; border-radius: 12px; background: var(--tile-2); }
#app .bal-tab{
  padding: 8px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: var(--text-2); font-family: var(--font); font-size: 13px; font-weight: 600;
}
#app .bal-tab.active{ background: var(--tile-3); color: var(--text-1); }
#app .bal-view .field{ margin-bottom: 12px; }
#app .bal-amount-row{ display: flex; gap: 8px; }
#app .bal-amount-row .text-input{ flex: 1; min-width: 0; }
#app .bal-usd-hint{ display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-3); }
#app .bal-foot{ margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); text-align: center; }
#app .bal-paper-note{
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-soft);
  font-size: 12.5px; line-height: 1.55; color: var(--text-1);
}
#app .bal-qr{ display: flex; justify-content: center; }
#app .bal-qr img{ width: 180px; height: 180px; padding: 10px; border-radius: 14px; background: #fff; }

@media (max-width: 900px){
  #app .bal-panel{ position: fixed; top: 64px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 160px); overflow-y: auto; }
}
@media (max-width: 560px){
  #app .bal-caret{ display: none; }
  #app .bal-chip{ padding: 0 10px; gap: 6px; font-size: 12.5px; }
  #app .status-chip{ display: none; }
}

/* Mit dem Balance-Chip wird die Kopfzeile voller: stufenweise verdichten */
@media (max-width: 1560px){
  #app .hdr .side-user{ display: none; }
  #app .hdr .nav-icon{ display: none; }
  #app .hdr .nav-item{ padding: 8px 12px; }
}
@media (max-width: 1320px){
  #app .hdr .brand-text{ display: none; }
  #app .status-chip .status-row{ display: none; }
}
/* unter 1080 px nur noch Icons (siehe oben) - dann muessen sie wieder sichtbar sein */
@media (max-width: 1080px){
  #app .hdr .nav-icon{ display: block; }
}

/* ============================================================================
   Animationen
   Eine gemeinsame Bewegungssprache: weiche "Feder"-Kurve fuer Groessen,
   ruhige Ease-Out-Kurve fuer Ein-/Ausblenden. Alles wird bei
   prefers-reduced-motion abgeschaltet (ganz unten).
   ============================================================================ */

:root{
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --- Ticker unten rechts: Icons wachsen beim Hover auf 2x (nach oben) --- */
#app .ticker-bar{ position: relative; z-index: 35; }
#app .ticker-bar .icon-btn-ticker{
  position: relative; transform-origin: 50% 85%;
  transition: transform .38s var(--ease-spring), color .2s ease, background .2s ease, box-shadow .3s ease;
}
#app .ticker-bar .icon-btn-ticker:hover,
#app .ticker-bar .icon-btn-ticker:focus-visible{
  transform: scale(2); z-index: 2; color: var(--accent);
  background: var(--tile); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
/* Coin-Logos links: kleiner Hopser mit Drehung */
#app .ticker-item .ticker-logo{ transition: transform .45s var(--ease-spring); }
#app .ticker-item:hover .ticker-logo{ transform: scale(1.35) rotate(-12deg); }
/* Online-Punkt atmet */
#app .ticker-online-info .dot{ animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

/* --- Logo oben links: kurzer Dreh beim Hover --- */
#app .hdr .brand-logo{ transition: transform .5s var(--ease-spring); }
#app .hdr .brand-logo:hover{ transform: rotate(-14deg) scale(1.12); }

/* DMO: die Buchstaben gleiten beim Hover auseinander und wieder zurueck.
   Per transform statt letter-spacing - kein Neu-Layout, nichts daneben
   verschiebt sich, und hin und zurueck laufen auf derselben ruhigen Kurve. */
#app .hdr .brand-name{ display: inline-flex; }
#app .hdr .brand-name > span{
  display: inline-block;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
#app .hdr .brand:hover .brand-name > span:nth-child(2){ transform: translateX(5px); }
#app .hdr .brand:hover .brand-name > span:nth-child(3){ transform: translateX(10px); }
#app .hdr .brand-sub{ transition: opacity .55s cubic-bezier(.65, 0, .35, 1); }
#app .hdr .brand:hover .brand-sub{ opacity: .6; }

/* --- Navigation: gleitender Hintergrund statt Umspringen --- */
#app .hdr .nav.has-ink{ position: relative; }
#app .hdr .nav-ink{
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px;
  background: var(--nav-active-bg); pointer-events: none;
  transition: transform .42s var(--ease-spring), width .42s var(--ease-spring),
              height .3s var(--ease-out), opacity .2s ease, background .45s ease;
}
#app .hdr .nav.has-ink .nav-item{ position: relative; z-index: 1; }
#app .hdr .nav.has-ink .nav-item.active{ background: transparent; }
#app .hdr .nav.has-ink .nav-item:not(.active):hover{ background: color-mix(in srgb, var(--nav-bg) 88%, #ffffff); }
#app .hdr .nav-icon{ transition: transform .35s var(--ease-spring); }
#app .hdr .nav-item:hover .nav-icon{ transform: translateY(-1px) scale(1.15); }

/* --- Seitenwechsel: Inhalt gleitet ein, Kacheln kommen gestaffelt --- */
#app .page.active{ animation: pageIn .45s var(--ease-out) both; }
@keyframes pageIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
#app .page.active .bento > .tile,
#app .page.active .split > *,
#app .page.active .settings-col > .tile,
#app .page.active > .tile,
#app .page.active > .card{
  animation: tileIn .55s var(--ease-out) both;
}
#app .page.active .bento > .tile:nth-child(1), #app .page.active .settings-col > .tile:nth-child(1){ animation-delay: .02s; }
#app .page.active .bento > .tile:nth-child(2), #app .page.active .settings-col > .tile:nth-child(2){ animation-delay: .07s; }
#app .page.active .bento > .tile:nth-child(3), #app .page.active .settings-col > .tile:nth-child(3){ animation-delay: .12s; }
#app .page.active .bento > .tile:nth-child(4), #app .page.active .settings-col > .tile:nth-child(4){ animation-delay: .17s; }
#app .page.active .bento > .tile:nth-child(5), #app .page.active .settings-col > .tile:nth-child(5){ animation-delay: .22s; }
#app .page.active .bento > .tile:nth-child(6){ animation-delay: .27s; }
#app .page.active .split > *:nth-child(2){ animation-delay: .1s; }
@keyframes tileIn{ from{ opacity: 0; transform: translateY(14px) scale(.985); } to{ opacity: 1; transform: none; } }

/* --- Dashboard-Kacheln: leichtes Anheben beim Hover --- */
#app .bento > .tile{ transition: transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s var(--ease-out); }
#app .bento > .tile:hover{
  transform: translateY(-3px); border-color: var(--line-2);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

/* --- Zahlen: blinken beim Aendern kurz in Gewinn-/Verlustfarbe --- */
.tick-up{ animation: tickUp .9s var(--ease-out); }
.tick-down{ animation: tickDown .9s var(--ease-out); }
@keyframes tickUp{ 0%{ color: var(--accent-mint); text-shadow: 0 0 18px rgba(124,196,160,.45); } 100%{ color: inherit; text-shadow: none; } }
@keyframes tickDown{ 0%{ color: var(--accent-red); text-shadow: 0 0 18px rgba(217,138,143,.45); } 100%{ color: inherit; text-shadow: none; } }

/* --- Chart: Linie zeichnet sich ein, Flaeche blendet nach, Endpunkt ploppt --- */
#app .chart-line.anim{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.1s var(--ease-out) .1s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
#app .chart-area.anim{ animation: fadeArea .8s ease .5s both; }
@keyframes fadeArea{ from{ opacity: 0; } to{ opacity: 1; } }
#app .chart-end{ transform-box: fill-box; transform-origin: center; }
#app .chart-end.anim{ animation: popIn .5s var(--ease-spring) 1.05s both; }
#app .chart-end:not(.anim){ animation: endPulse 2.6s ease-in-out infinite; }
@keyframes popIn{ from{ transform: scale(0); } to{ transform: scale(1); } }
@keyframes endPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.3); } }

/* --- Listen: Eintraege gleiten gestaffelt ein, neue Live-Trades leuchten auf --- */
#app .page.active .log-item, #app .page.active .pos-row:not(.pos-head){ animation: rowIn .45s var(--ease-out) both; }
#app .page.active .log-item:nth-child(2), #app .page.active .pos-row:nth-child(3){ animation-delay: .04s; }
#app .page.active .log-item:nth-child(3), #app .page.active .pos-row:nth-child(4){ animation-delay: .08s; }
#app .page.active .log-item:nth-child(4), #app .page.active .pos-row:nth-child(5){ animation-delay: .12s; }
#app .page.active .log-item:nth-child(5), #app .page.active .pos-row:nth-child(6){ animation-delay: .16s; }
#app .page.active .log-item:nth-child(6), #app .page.active .pos-row:nth-child(7){ animation-delay: .2s; }
@keyframes rowIn{ from{ opacity: 0; transform: translateX(-8px); } to{ opacity: 1; transform: none; } }
#app .page.active .log-item.log-fresh{ animation: freshIn .6s var(--ease-spring) both, freshGlow 2.4s ease-out both; }
@keyframes freshIn{ from{ opacity: 0; transform: translateY(-10px) scale(.98); } to{ opacity: 1; transform: none; } }
@keyframes freshGlow{ 0%{ background: var(--accent-soft); } 100%{ background: transparent; } }

/* --- Balken: Performance und Cash/Positionen wachsen von links --- */
#app .perf-fill{ transform-origin: left center; animation: growX .9s var(--ease-out) both; }
#app .perf-row:nth-child(2) .perf-fill{ animation-delay: .08s; }
#app .perf-row:nth-child(3) .perf-fill{ animation-delay: .16s; }
#app .perf-row:nth-child(4) .perf-fill{ animation-delay: .24s; }
@keyframes growX{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
#app .vs-bar span{ transition: width .8s var(--ease-out); }

/* --- Buttons: federn beim Druecken, Primaer-Knopf hebt sich --- */
#app .btn, #app .mode-btn, #app .bal-tab, #app .range-btn, #app .filter-chip, #app .bal-unit-btn{
  transition: transform .25s var(--ease-spring), background .45s ease, color .3s ease,
              border-color .3s ease, box-shadow .25s ease, filter .2s ease;
}
#app .btn:active:not(:disabled), #app .mode-btn:active, #app .bal-tab:active,
#app .range-btn:active, #app .filter-chip:active, #app .bal-unit-btn:active{ transform: scale(.95); }
#app .btn-primary:hover:not(:disabled){ transform: translateY(-1px); }
/* Start-Knopf "atmet", solange der Bot startklar aber aus ist */
#app .hdr-bot-btn:not(:disabled){ animation: readyGlow 2.8s ease-in-out infinite; }
body.bot-running #app .hdr-bot-btn{ animation: none; }
@keyframes readyGlow{ 0%,100%{ box-shadow: 0 0 0 0 var(--accent-soft); } 50%{ box-shadow: 0 0 0 6px var(--accent-soft); } }

/* --- Status-Punkt: Ring pulsiert, solange der Bot laeuft --- */
#app .dot{ position: relative; }
#app .dot-on::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent-mint); animation: ring 1.8s ease-out infinite;
}
@keyframes ring{ from{ transform: scale(1); opacity: .8; } to{ transform: scale(2.6); opacity: 0; } }

/* --- Balance-Panel: klappt aus der Ecke des Chips auf --- */
#app .bal-panel{ transform-origin: top right; animation: panelIn .32s var(--ease-spring); }
@keyframes panelIn{ from{ opacity: 0; transform: translateY(-6px) scale(.94); } to{ opacity: 1; transform: none; } }
#app .bal-sol{ transition: transform .5s var(--ease-spring); }
#app .bal-chip:hover .bal-sol{ transform: rotate(-10deg) scale(1.2); }
#app .bal-view:not(.hidden){ animation: pageIn .3s var(--ease-out); }

/* --- Dialoge: weich einblenden und leicht wachsen --- */
.modal-overlay:not(.hidden){ animation: fadeOverlay .25s ease; }
.modal-overlay:not(.hidden) .modal{ animation: modalIn .35s var(--ease-spring); }
@keyframes fadeOverlay{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes modalIn{ from{ opacity: 0; transform: translateY(10px) scale(.95); } to{ opacity: 1; transform: none; } }

/* --- Eingaben und Schalter --- */
#app .text-input{ transition: border-color .2s ease, box-shadow .3s var(--ease-out), background .2s ease; }
#app .slider::before{ transition: transform .35s var(--ease-spring), background .2s ease; }

/* --- Avatar und Icon-Knoepfe oben --- */
#app .hdr .side-avatar{ transition: transform .4s var(--ease-spring); }
#app .hdr .account-chip:hover .side-avatar{ transform: scale(1.12); }
#app .hdr #settings-btn .icon-btn-svg{ transition: transform .6s var(--ease-out); }
#app .hdr #settings-btn:hover .icon-btn-svg{ transform: rotate(90deg); }
#app .hdr #lock-btn .icon-btn-svg{ transition: transform .35s var(--ease-spring); }
#app .hdr #lock-btn:hover .icon-btn-svg{ transform: translateX(2px); }

/* --- Bewegung reduzieren, wenn das System es wuenscht --- */
@media (prefers-reduced-motion: reduce){
  #app *, #app *::before, #app *::after, .modal-overlay, .modal{
    animation: none !important; transition-duration: .01ms !important;
  }
}

#app .ticker-online-info .dot-on::after{ display: none; }

/* ============================================================================
   Balance-Panel v2
   Oeffnen: das Panel entfaltet sich aus der Ecke des Chips (clip-path +
   leichtes Wachsen), danach kommen die Inhalte gestaffelt von oben.
   Schliessen: faltet sich schneller wieder in die Ecke zurueck.
   Umschalter (SOL/USD, Send/Receive) haben eine gleitende Markierung, der
   Tab-Wechsel passt die Hoehe weich an.
   ============================================================================ */

#app .bal-panel{
  width: 360px; padding: 18px; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 20px;
  background: linear-gradient(180deg, var(--tile-2) 0%, var(--tile) 42%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2);
  transform-origin: top right; animation: none;
}
#app .bal-panel.is-open{ animation: balUnfold .5s cubic-bezier(.2, .9, .25, 1) both; }
#app .bal-panel.is-closing{ animation: balFold .22s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes balUnfold{
  from{ opacity: 0; clip-path: inset(0 0 100% 55% round 20px); transform: translateY(-6px) scale(.97); }
  60%{ opacity: 1; }
  to{ opacity: 1; clip-path: inset(0 0 0 0 round 20px); transform: none; }
}
@keyframes balFold{
  from{ opacity: 1; clip-path: inset(0 0 0 0 round 20px); transform: none; }
  to{ opacity: 0; clip-path: inset(0 0 100% 55% round 20px); transform: translateY(-4px) scale(.98); }
}
#app .bal-panel.is-open .bal-stagger{ animation: balItem .45s cubic-bezier(.2, .9, .25, 1) both; }
#app .bal-panel.is-open .bal-stagger:nth-child(3){ animation-delay: .06s; }
#app .bal-panel.is-open .bal-stagger:nth-child(4){ animation-delay: .11s; }
#app .bal-panel.is-open .bal-stagger:nth-child(5){ animation-delay: .16s; }
#app .bal-panel.is-open .bal-stagger:nth-child(6){ animation-delay: .21s; }
@keyframes balItem{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }

/* weicher Akzent-Schein oben im Panel */
#app .bal-glow{
  position: absolute; top: -120px; right: -60px; width: 260px; height: 220px; pointer-events: none;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  filter: blur(6px); opacity: .9;
}
#app .bal-panel > *:not(.bal-glow){ position: relative; }

#app .bal-title{ display: flex; align-items: center; gap: 8px; }
#app .bal-mode-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* SOL/USD mit gleitender Markierung */
#app .bal-unit{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; }
#app .bal-unit-thumb{
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: var(--accent);
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1), background .45s ease;
}
#app .bal-unit[data-unit="usd"] .bal-unit-thumb{ transform: translateX(100%); }
#app .bal-unit-btn{ position: relative; z-index: 1; min-width: 44px; background: none !important; transition: color .25s ease; }
#app .bal-unit-btn.active{ color: var(--accent-ink); }

#app .bal-hero{ margin-top: 16px; }
#app .bal-amount{ margin-top: 0; font-size: 34px; }
#app .bal-sub{ margin-top: 6px; }

/* Adresse als ganze klickbare Zeile */
#app .bal-addr{
  width: 100%; margin-top: 16px; cursor: pointer; text-align: left;
  font-family: var(--font); transition: border-color .2s ease, background .2s ease;
}
#app .bal-addr:hover{ border-color: var(--line-2); background: var(--tile-3); }
#app .bal-copy-label{ display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; font-weight: 600; }
#app .bal-copy-label svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app .bal-addr.copied .bal-copy-label{ color: var(--accent-mint); }
#app .bal-addr.copied .bal-copy-label svg{ animation: popIn .4s cubic-bezier(.34, 1.56, .64, 1); }

/* Send/Receive mit gleitender Markierung */
#app .bal-tabs{ position: relative; margin: 16px 0 14px; }
#app .bal-tab-thumb{
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px);
  border-radius: 9px; background: var(--tile-3); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .4s cubic-bezier(.34, 1.3, .64, 1);
}
#app .bal-tabs[data-tab="receive"] .bal-tab-thumb{ transform: translateX(calc(100% + 4px)); }
#app .bal-tab{
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none !important; transition: color .25s ease;
}
#app .bal-tab svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
#app .bal-tab:hover svg{ transform: translate(1px, -1px); }
#app .bal-tab[data-bal-tab="receive"]:hover svg{ transform: translate(-1px, 1px); }

/* Hoehenwechsel zwischen den Tabs */
#app .bal-views{ overflow: hidden; transition: height .35s cubic-bezier(.2, .9, .25, 1); }
#app .bal-view:not(.hidden){ animation: balItem .35s cubic-bezier(.2, .9, .25, 1); }

/* Betrag mit Einheit und Max direkt im Feld */
#app .bal-amount-row{ position: relative; display: flex; align-items: center; }
#app .bal-amount-row .text-input{ padding-right: 104px; }
#app .bal-amount-unit{ position: absolute; right: 62px; font-size: 12px; color: var(--text-3); pointer-events: none; }
#app .bal-max{
  position: absolute; right: 6px; padding: 5px 10px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font); font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: background .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
#app .bal-max:hover{ background: var(--accent); color: var(--accent-ink); }
#app .bal-max:active{ transform: scale(.92); }

#app .bal-foot{ display: flex; align-items: center; justify-content: center; gap: 6px; }
#app .bal-foot svg{ width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
#app #bal-send-btn{ margin-top: 4px; }

#app .bal-qr img{ animation: popIn .45s cubic-bezier(.34, 1.56, .64, 1); }

@media (max-width: 900px){
  #app .bal-panel{ width: auto; transform-origin: top center; }
}

/* ============================================================================
   Balance-Panel v3: Chip -> Panel "Morph"
   Die Form (Position + Rundung) animiert app.js per Web Animations API
   (balMorphFrames). Hier nur: das Panel liegt ueber dem Chip, die Inhalte
   blenden erst ein, wenn die Form fast steht, und verschwinden beim
   Schliessen zuerst - so sieht man nie gequetschten Inhalt.
   ============================================================================ */

#app .bal-panel{ z-index: 70; }
#app .bal-panel.is-open, #app .bal-panel.is-closing{ animation: none; }

/* Inhalte: kurz nach dem Wachsen weich von oben, nacheinander */
#app .bal-panel .bal-stagger, #app .bal-panel .bal-glow{ transition: opacity .18s ease; }
#app .bal-panel.is-open .bal-stagger{ animation: balItem .42s cubic-bezier(.2, .9, .25, 1) both; animation-delay: .2s; }
#app .bal-panel.is-open .bal-stagger:nth-child(3){ animation-delay: .25s; }
#app .bal-panel.is-open .bal-stagger:nth-child(4){ animation-delay: .29s; }
#app .bal-panel.is-open .bal-stagger:nth-child(5){ animation-delay: .33s; }
#app .bal-panel.is-open .bal-stagger:nth-child(6){ animation-delay: .37s; }
#app .bal-panel.is-open .bal-glow{ animation: fadeArea .6s ease .15s both; }
#app .bal-panel.is-closing .bal-stagger,
#app .bal-panel.is-closing .bal-glow{ opacity: 0; transition-duration: .12s; }

/* Chip federt beim Klick leicht ein */
#app .bal-chip{ transition: border-color .15s ease, background .15s ease, opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#app .bal-chip:active{ transform: scale(.96); }

/* ---------- PnL-Kalender: Glas-Optik, Tage klar gruen oder rot ---------- */
#app .pnl-cal-open{ margin-top: 16px; min-height: 48px; font-size: 15px; }
#app .pnl-cal{
  --glass: rgba(255,255,255,.035);
  --glass-line: rgba(255,255,255,.09);
  --glass-hi: rgba(255,255,255,.14);
  --cal-win: #22c55e;
  --cal-loss: #ef4444;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
#app .pnl-cal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#app .pnl-cal-head h2{ margin: 0; font-size: 18px; letter-spacing: -.01em; }
#app .pnl-cal-nav{
  width: 34px; height: 34px; font-size: 20px; line-height: 1;
  background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
#app .pnl-cal-nav:disabled{ opacity: .3; cursor: default; }
#app .pnl-cal-stats{
  display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 18px; padding: 12px 16px;
  border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-line);
}
#app .pnl-cal-stats .pnl-pos{ color: var(--cal-win); }
#app .pnl-cal-stats .pnl-neg{ color: var(--cal-loss); }
#app .pnl-cal-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#app .pnl-cal-wd{ font-size: 11px; color: var(--text-3); text-align: center; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; }
#app .pnl-cal-day{
  min-height: 78px; padding: 8px; border-radius: 12px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s ease, border-color .15s ease;
}
#app .pnl-cal-day:not(.blank):hover{ transform: translateY(-1px); border-color: var(--glass-hi); }
#app .pnl-cal-day.blank{ background: none; border-color: transparent; box-shadow: none; }
#app .pnl-cal-day.future{ opacity: .35; }
#app .pnl-cal-day.today{ border-color: rgba(255,255,255,.35); }
#app .pnl-cal-day.win{
  background: linear-gradient(160deg, rgba(34,197,94,.42), rgba(34,197,94,.22));
  border-color: rgba(34,197,94,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(34,197,94,.18);
}
#app .pnl-cal-day.loss{
  background: linear-gradient(160deg, rgba(239,68,68,.42), rgba(239,68,68,.22));
  border-color: rgba(239,68,68,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(239,68,68,.18);
}
#app .pnl-cal-num{ font-size: 12px; color: var(--text-2); }
#app .pnl-cal-day.win .pnl-cal-num, #app .pnl-cal-day.loss .pnl-cal-num{ color: rgba(255,255,255,.8); }
#app .pnl-cal-val{ font-family: var(--font-mono); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .pnl-cal-day.win .pnl-cal-val, #app .pnl-cal-day.loss .pnl-cal-val{ color: #fff; }
#app .pnl-cal-count{ font-size: 11px; color: var(--text-3); }
#app .pnl-cal-day.win .pnl-cal-count, #app .pnl-cal-day.loss .pnl-cal-count{ color: rgba(255,255,255,.7); }
@media (max-width: 640px){
  #app .pnl-cal-grid{ gap: 3px; }
  #app .pnl-cal-day{ min-height: 54px; padding: 5px; border-radius: 8px; }
  #app .pnl-cal-val{ font-size: 10.5px; }
  #app .pnl-cal-count{ display: none; }
}

/* ---------- PnL-Card eines Kalendertags ---------- */
#app .pnl-cal-day.clickable{ cursor: pointer; }
#app .pnl-cal-day.clickable:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
#app .pnl-cal-hint{ margin: 14px 0 0; }
#app .day-card-modal{ max-width: 780px; max-height: calc(100vh - 32px); overflow-y: auto; }
#app .day-card-opts{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
/* Card mit scharfen Ecken: weder Vorschau noch Rahmen werden abgerundet */
#app .day-card-wrap{ padding: 0; border-radius: 0; }
#app .day-card-canvas{ display: block; width: 100%; height: auto; border-radius: 0; background: #05060a; }
#app .day-card-bg{ margin-top: 14px; }

/* ============================================================================
   Animationen v2
   Mehr Bewegung auf Dashboard und Unterseiten, Aussehen bleibt gleich.
   Alles laeuft ueber transform/opacity (kein Neuzeichnen pro Frame).
   Die gleitende Markierung der Zeitraum-Knoepfe und das Nachblenden
   geaenderter Werte kommen aus /fx.js.
   ============================================================================ */

/* --- Seitenkopf: Titel und Untertitel kommen nacheinander --- */
#app .page.active .page-header h1{ animation: headIn .55s var(--ease-out) backwards; }
#app .page.active .page-header .muted{ animation: headIn .55s var(--ease-out) .08s backwards; }
#app .page.active .page-header > :not(div){ animation: headIn .55s var(--ease-out) .14s backwards; }
@keyframes headIn{ from{ opacity: 0; transform: translate3d(-10px, 0, 0); } to{ opacity: 1; transform: none; } }

/* --- Inhalt der Kacheln folgt der Kachel leicht verzoegert --- */
#app .page.active .big-value{ animation: riseIn .6s var(--ease-out) .18s backwards; }
#app .page.active .hero-sub{ animation: riseIn .6s var(--ease-out) .26s backwards; }
#app .page.active .bot-state{ animation: riseIn .6s var(--ease-out) .24s backwards; }
#app .page.active .value-actions > .btn{ animation: popUp .5s var(--ease-spring) backwards; }
#app .page.active .value-actions > .btn:nth-child(1){ animation-delay: .3s; }
#app .page.active .value-actions > .btn:nth-child(2){ animation-delay: .36s; }
#app .page.active .value-actions > .btn:nth-child(3){ animation-delay: .42s; }
@keyframes riseIn{ from{ opacity: 0; transform: translate3d(0, 10px, 0); } to{ opacity: 1; transform: none; } }
@keyframes popUp{ from{ opacity: 0; transform: translate3d(0, 8px, 0) scale(.92); } to{ opacity: 1; transform: none; } }

/* Kennzahlen und Zeilen gestaffelt */
#app .page.active .chart-stat,
#app .page.active .kv > div,
#app .page.active .value-split dl > div,
#app .page.active .paper-stat,
#app .page.active .tracker-slot,
#app .page.active .field-row,
#app .page.active .strategy li{ animation: riseIn .5s var(--ease-out) backwards; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(1){ animation-delay: .2s; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(2){ animation-delay: .25s; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(3){ animation-delay: .3s; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(4){ animation-delay: .35s; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(5){ animation-delay: .4s; }
#app .page.active :is(.chart-stats, .perf-ring-row, .kv, .value-split dl, .paper-grid, .strategy) > :nth-child(n+6){ animation-delay: .45s; }
#app .page.active .tracker-slot:nth-of-type(2){ animation-delay: .08s; }
#app .page.active .tracker-slot:nth-of-type(3){ animation-delay: .16s; }
#app .page.active .deposit-qr{ animation: popUp .6s var(--ease-spring) .2s backwards; }
#app .page.active .filter-chip{ animation: popUp .45s var(--ease-spring) backwards; }
#app .page.active .filter-chip:nth-child(2){ animation-delay: .05s; }
#app .page.active .filter-chip:nth-child(3){ animation-delay: .1s; }
#app .page.active .filter-chip:nth-child(4){ animation-delay: .15s; }

/* bestehende Kachel-Einblendung: Endzustand nicht festhalten, sonst
   greift das Anheben beim Hover nicht */
#app .page.active .bento > .tile, #app .page.active .split > *, #app .page.active .settings-col > .tile,
#app .page.active > .tile, #app .page.active > .card{ animation-fill-mode: backwards; }

/* --- Kacheln: beim Hover laeuft oben eine Akzent-Linie ein --- */
#app .bento > .tile::before{
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transition: transform .6s var(--ease-out);
}
#app .bento > .tile:hover::before{ transform: scaleX(1); }

/* --- Kennzahlen heben sich beim Hover --- */
#app .chart-stat, #app .paper-stat{ transition: transform .3s var(--ease-spring); }
#app .chart-stat:hover, #app .paper-stat:hover{ transform: translateY(-2px); }
#app .kv > div{ transition: background .2s ease, padding .3s var(--ease-out); }
#app .kv > div:hover{ background: var(--tile-2); padding-left: 6px; padding-right: 6px; border-radius: 8px; }

/* --- Zeitraum-Knoepfe: gleitende Markierung (fx.js legt .range-thumb an) --- */
#app .range-row.has-thumb{ position: relative; }
#app .range-row.has-thumb .range-btn{ position: relative; z-index: 1; transition: color .25s ease, transform .25s var(--ease-spring); }
#app .range-row.has-thumb .range-btn.active{ background: none; }
#app .range-thumb{
  position: absolute; left: 0; top: 0; border-radius: 999px; pointer-events: none; background: var(--tile-3);
  transition: transform .42s var(--ease-spring), width .42s var(--ease-spring), opacity .2s ease;
}

/* --- Werte, die sich aendern, blenden kurz nach (fx.js setzt .fx-swap) --- */
#app .fx-swap{ display: inline-block; animation: swapIn .45s var(--ease-out); }
@keyframes swapIn{ from{ opacity: 0; transform: translate3d(0, 6px, 0); } to{ opacity: 1; transform: none; } }
/* hochzaehlende Zahlen ruecken passend zur Richtung leicht nach */
#app .tick-up, #app .tick-down{ display: inline-block; }
#app .tick-up{ animation: tickUp .9s var(--ease-out), nudgeUp .5s var(--ease-out); }
#app .tick-down{ animation: tickDown .9s var(--ease-out), nudgeDown .5s var(--ease-out); }
@keyframes nudgeUp{ from{ transform: translate3d(0, 5px, 0); } to{ transform: none; } }
@keyframes nudgeDown{ from{ transform: translate3d(0, -5px, 0); } to{ transform: none; } }

/* --- Status --- */
#app .bot-state{ transition: color .4s ease; }
body.bot-running #app .bot-state{ color: var(--accent-mint); }
#app .hdr-bot-btn{ transition: transform .25s var(--ease-spring), background .45s ease, color .3s ease, box-shadow .25s ease; }

/* --- Leere Zustaende: leise atmender Punkt --- */
#app .positions-list.empty-state{ flex-direction: column; gap: 12px; }
#app .positions-list.empty-state::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft); animation: idleDot 2.4s ease-in-out infinite;
}
@keyframes idleDot{ 0%, 100%{ opacity: .35; transform: scale(.85); } 50%{ opacity: 1; transform: scale(1); } }

/* --- Listen: Markierung links beim Hover --- */
#app .log-item, #app .pos-row:not(.pos-head){ position: relative; }
#app .log-item::after, #app .pos-row:not(.pos-head)::after{
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleY(0); transition: transform .3s var(--ease-out);
}
#app .log-item:hover::after, #app .pos-row:not(.pos-head):hover::after{ transform: scaleY(1); }

/* --- Filter: Zaehler springt beim Aktivieren --- */
#app .filter-chip .filter-count{ display: inline-block; transition: background .25s ease, color .25s ease; }
#app .filter-chip.active .filter-count{ background: var(--accent); color: var(--accent-ink); animation: countPop .4s var(--ease-spring); }
@keyframes countPop{ from{ transform: scale(.6); } to{ transform: scale(1); } }

/* --- kleine Hover-Gesten --- */
#app .btn-danger-ghost{ transition: transform .25s var(--ease-spring), background .25s ease; }
#app .btn-danger-ghost:hover{ background: var(--loss-soft); }
#app .btn-link{ transition: color .2s ease, transform .25s var(--ease-out); display: inline-block; }
#app .btn-link:hover{ transform: translateX(2px); }
#app .step-no{ transition: transform .35s var(--ease-spring); }
#app .tile:hover .step-no{ transform: rotate(-8deg) scale(1.12); }
#app .tracker-num{ transition: transform .35s var(--ease-spring), border-color .2s ease; }
#app .tracker-slot:focus-within .tracker-num{ transform: scale(1.08); border-color: var(--accent-line); }
#app .deposit-qr{ transition: transform .35s var(--ease-spring); }
#app .deposit-qr:hover{ transform: scale(1.04); }

@media (prefers-reduced-motion: reduce){
  #app .page-header h1, #app .page-header .muted, #app .fx-swap, #app .tick-up, #app .tick-down,
  #app .positions-list.empty-state::before, #app .filter-chip .filter-count{ animation: none !important; }
}