/* www/html/app/app.css — V38.0
FoundLux Premium — Mobile-PWA Styles (Screens/Tab-Bar/Hero/Bot-Maske/Trading/Charts).
V38.0: „Neuer Bot“ als durchsuchbare Liste mit Studien-Schild und Voreinstellungen (Runde 245).
Änderungs-Historie: git log / git blame + Vollversionen in www/html/app/backup_app/. */
:root {
/* Marken-Palette, deckungsgleich mit css/fl-brand.css. Die Namen bleiben wie sie waren —
nur die Werte wandern, damit kein Aufrufer angefasst werden muss.
Merke: Orange ist die EINZIGE Akzentfarbe, Blau ist Basis/Flaeche,
Gruen und Rot ausschliesslich fuer Marktdaten und nie fuer Deko. */
--bg: #070b14; --bg2: #0a1120; --panel: #142033; --card: #0e1626; --card2: #142033;
--border: #2b3c5c; --border2: #1c2942;
--accent: #f97316; --green: #16c784; --red: #ea3943; --gold: #eab308; --amber: #fb923c;
--text: #e8ecf4; --dim: #64748b; --mid: #94a3b8;
--grad: linear-gradient(180deg, #2b4c9b 0%, #0a1120 100%);
--mono: 'Consolas', 'SF Mono', 'Roboto Mono', monospace;
/* Sagt dem Browser, dass die App dunkel ist — sonst malt er Rollbalken und
Formularfelder hell. Fehlte hier genau wie vorher auf der Website. */
color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
min-height: 100%;
background: radial-gradient(700px 300px at 50% -100px, rgba(43,76,155,.34), transparent), var(--bg);
color: var(--text);
font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-bottom: env(safe-area-inset-bottom, 0);
}
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--mono); font-weight: bold; }
.dim { color: var(--dim); }
.up { color: var(--green) !important; }
.down { color: var(--red) !important; }
sub { font-size: .62em; }
.shell { max-width: 640px; margin: 0 auto; padding: 12px 0 30px; }
/* Header */
.brand { display: flex; align-items: center; gap: 10px; padding: 8px 16px 4px; }
/* V13: echtes Vektor-Logo statt der bisherigen "FL"-Textkachel */
.logo { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 14px rgba(43,76,155,.45); flex-shrink: 0; display: block; }
.brand-txt b { font-size: 16px; color: #fff; }
.prem { font-size: 10px; font-weight: bold; letter-spacing: 1.4px; color: var(--gold); text-transform: uppercase; }
.greet { font-size: 10.5px; color: var(--dim); }
#clock { margin-left: auto; cursor: pointer; display: flex; align-items: center; }
.iconbtn { color: var(--mid); font-size: 17px; padding: 8px 10px; border-radius: 8px; }
.iconbtn:hover { background: rgba(255,255,255,.06); color: #fff; }
/* PWA-Banner */
.pwa-banner {
margin: 10px 14px; padding: 10px 13px; border-radius: 12px; font-size: 11.5px;
background: linear-gradient(90deg, rgba(234,179,8,.14), rgba(43,76,155,.12));
border: 1px solid rgba(234,179,8,.4); color: var(--mid);
display: flex; align-items: center; gap: 9px;
}
.pwa-banner b { color: var(--gold); }
.pwa-banner button { margin-left: auto; background: var(--gold); border: none; border-radius: 8px; color: #160c02; font-weight: bold; padding: 6px 11px; font-size: 11px; cursor: pointer; flex-shrink: 0; }
/* Hero */
.hero {
margin: 8px 14px 12px; border-radius: 16px; padding: 15px 16px;
background: linear-gradient(145deg, #142033, #0e1626); border: 1px solid rgba(43,76,155,.45);
display: flex; align-items: center; gap: 14px;
box-shadow: 0 12px 34px rgba(0,0,0,.4);
}
.hero-l { flex: 1; min-width: 0; }
.hero-lbl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.hero-eq { font-size: 24px; font-weight: bold; font-family: var(--mono); color: #fff; margin-top: 2px; }
.hero-sub { font-size: 11px; color: var(--dim); margin-top: 3px; }
.hero-leg { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--mid); }
.hero-leg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
/* V11.0: Bot-Icon zentriert im Equity-Donut -> tippt auf „Neuer Bot" */
.donut-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.donut-bot {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 42px; height: 42px; padding: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, rgba(234,179,8,.16), rgba(234,179,8,.05));
border: 1px solid rgba(234,179,8,.5); color: var(--gold); cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 0 12px rgba(234,179,8,.18);
transition: transform .1s ease, background .15s ease;
}
.donut-bot:active { transform: translate(-50%, -50%) scale(.9); background: rgba(234,179,8,.28); }
.donut-bot .ic { width: 24px; height: 24px; }
/* Sektionen + Karten */
.sec { padding: 6px 16px; font-size: 11px; font-weight: bold; letter-spacing: .5px; color: var(--dim); text-transform: uppercase; }
.cardrow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 12px; scrollbar-width: none; }
.cardrow::-webkit-scrollbar { display: none; }
.acc-card { min-width: 150px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 11px 13px; }
.acc-card[onclick]:active { background: rgba(249,115,22,.14); border-color: var(--accent); } /* V9.0: Transfer-Tap-Feedback */
.acc-card .a-l { font-size: 10px; color: var(--dim); }
.acc-card .a-v { font-size: 15px; font-weight: bold; font-family: var(--mono); margin-top: 4px; }
.acc-card .a-s { font-size: 10px; color: var(--dim); margin-top: 3px; }
.badge { display: inline-block; border: 1px solid; border-radius: 4px; padding: 1px 6px; font-size: 9px; font-weight: bold; letter-spacing: .4px; }
.bot-card { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 10px 13px; margin: 0 14px 10px; }
.bot-card .r1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bot-card .r1 .pl { margin-left: auto; font-family: var(--mono); font-weight: bold; }
.bot-card .r2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.pos-card { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 10px 13px; margin: 0 14px 10px; }
.pos-card .r1 { display: flex; align-items: center; gap: 8px; }
.pos-card .r2 { display: flex; gap: 12px; margin-top: 6px; font-size: 10.5px; color: var(--dim); font-family: var(--mono); flex-wrap: wrap; }
.coin-ic { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; color: #fff; flex-shrink: 0; }
.hrow { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-bottom: 1px solid rgba(54,60,78,.35); font-size: 12px; }
.skel { color: var(--dim); font-size: 12px; padding: 10px 16px; }
.foot { display: flex; align-items: center; gap: 14px; padding: 18px 16px 8px; font-size: 12px; }
.foot #stand { margin-left: auto; font-size: 10.5px; }
/* ═══ V2.0: Screen-System + Tab-Bar ═══ */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
.scr { display: none; }
.scr.on { display: block; animation: scrIn .16s ease; }
@keyframes scrIn { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
display: flex; justify-content: center; gap: 30px;
background: rgba(20,24,34,.96); border-top: 1px solid var(--border2);
padding: 7px 0 calc(9px + env(safe-area-inset-bottom, 0));
backdrop-filter: blur(6px);
}
.tabbar .tab {
width: 84px; background: none; border: none; color: var(--dim); cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 2px;
font-size: 10.5px; font-family: inherit;
}
.tabbar .tab .ti { font-size: 19px; line-height: 1.1; }
.tabbar .tab.on { color: var(--accent); }
/* ═══ V2.0: Chart-Vollbild ═══ */
/* V8.0: overflow-y:auto — das bei Märkte-Charts herübergehängte Trading-Formular
(#ch-tradeform-host) ist deutlich höher als die alte Quick-Tradebar; der Chart behält
seine min-height (260px), der Rest scrollt statt abgeschnitten zu werden. */
.scr[data-screen="chart"].on { display: flex; flex-direction: column; height: calc(100vh - 64px - env(safe-area-inset-bottom, 0)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* V36.0 (Runde 233, Roccos Screen_4641): Höhe ohne die 42 px Rand der .shell (sonst scrollte die ganze Seite und schob den Kopf hinaus), dvh = sichtbare Höhe
am Handy mit Adressleiste; Kopf klebt oben im Chart-Bildschirm. */
.scr[data-screen="chart"].on { height: calc(100vh - 106px - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 106px - env(safe-area-inset-bottom, 0px)); }
.scr[data-screen="chart"] .charthead { position: sticky; top: 0; z-index: 4; background: var(--bg); }
#ch-chart { position: relative; }
.ch-leer { position: absolute; left: 16px; right: 16px; top: 38%; text-align: center; color: var(--dim); font-size: 12.5px; line-height: 1.5; z-index: 3; pointer-events: none; }
.bot-card.zuletzt { outline: 2px solid var(--accent); outline-offset: 2px; }
.charthead { display: flex; align-items: center; gap: 9px; padding: 10px 12px 4px; flex-shrink: 0; }
.charthead .iconbtn { font-size: 22px; padding: 4px 10px; }
.chiprow { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; flex-shrink: 0; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
background: var(--card); border: 1px solid var(--border2); color: var(--dim);
border-radius: 14px; padding: 5px 13px; font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
font-family: inherit;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #160c02; font-weight: bold; }
#ch-chart { flex: 1; min-height: 260px; margin: 0 6px; }
.chartfoot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-shrink: 0; }
/* ═══ V2.0: Märkte + Konto ═══ */
.seg { display: flex; background: var(--card); border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; background: transparent; border: none; color: var(--dim); padding: 8px 4px; font-size: 12px; cursor: pointer; font-family: inherit; }
.seg button.on { background: var(--accent); color: #160c02; font-weight: bold; }
.hrow.mkt { cursor: pointer; }
.hrow.mkt:active { background: rgba(255,255,255,.04); }
.hrow.mkt.stale { opacity: .45; }
.bot-card { cursor: pointer; }
.placeholder {
border: 1px dashed var(--border); border-radius: 12px; color: var(--dim);
padding: 16px; text-align: center; font-size: 12px; line-height: 1.6; margin: 10px 16px;
}
.bigbtn {
display: block; text-align: center; background: var(--accent); color: #160c02;
font-weight: bold; padding: 12px; border-radius: 10px; font-size: 13.5px;
}
/* ═══ V3.0 (Etappe 3): Bot-Detail + Trading ═══ */
.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 14px 8px; }
.kpi { background: var(--card); border: 1px solid var(--border2); border-radius: 10px; padding: 9px 11px; }
.kpi .k-l { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
.kpi .k-v { font-size: 12.5px; font-weight: bold; margin-top: 3px; font-family: var(--mono); }
/* V26.0: kleine Unterzeile an der Kachel — Prozent bzw. L/S. Die Zahl allein sagt zu wenig. */
.kpi .k-s { font-size: 9.5px; color: var(--dim); margin-top: 2px; }
/* ── V26.0: Zustand der Engine (Bot-Detail) — was der Worker gerade sieht ────────────── */
.zbox { background: var(--card); border: 1px solid var(--border2); border-radius: 11px; margin: 0 14px; padding: 10px 12px; }
.zgauge { margin: 2px 0 10px; }
.zgauge .zg-lbl { display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); margin-bottom: 4px; letter-spacing: .3px; }
.zgauge .zg-bar { position: relative; height: 10px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; }
.zgauge .zg-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.zgauge .zg-thr { position: absolute; top: 0; bottom: 0; width: 1px; opacity: .5; }
.zgauge .zg-ptr { position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px; transform: translateX(-1.5px); }
.zgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px 10px; }
.zgrid > div { min-width: 0; }
.zgrid .l { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zgrid .v { font-size: 12px; font-weight: bold; font-family: var(--mono); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.zgrid.zp { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(54,60,78,.45); grid-template-columns: 1fr 1fr; }
/* Experten-Gewichte (Quorum): eine Zeile, gruen = zuletzt zuverlaessig, rot = abgewertet */
.zwl { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: bold; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(54,60,78,.45); }
.zwl i { color: var(--border); font-style: normal; }
.zlog { font-size: 10.5px; color: var(--mid); line-height: 1.5; max-height: 210px; overflow-y: auto; }
.zlog > div { padding: 2px 0; border-bottom: 1px solid rgba(54,60,78,.25); word-break: break-word; }
.zlog > div:last-child { border-bottom: none; }
.zlog .t { font-family: var(--mono); color: var(--dim); }
/* V26.0: die drei Knoepfe des Bot-Details — Pausieren · Flach stellen · Bot beenden.
Flach stellen traegt bewusst ein eigenes Symbol UND eine eigene Farbe (tuerkis wie im
Browser): zwei aehnlich aussehende Stopp-Knoepfe waeren bei echtem Geld ein Fehlklick-Risiko. */
.act3 { display: flex; gap: 8px; margin: 12px 14px 4px; }
.act3 button {
flex: 1; min-width: 0; min-height: 52px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
padding: 8px 4px; border-radius: 12px; border: 1px solid; background: transparent;
font-size: 10.5px; font-weight: bold; font-family: inherit; line-height: 1.1; text-align: center;
-webkit-tap-highlight-color: transparent; transition: transform .1s ease;
}
.act3 button:active { transform: scale(.95); }
.act3 .ic { width: 19px; height: 19px; }
.act3 .b-pause { color: var(--amber); border-color: rgba(251,146,60,.45); background: rgba(251,146,60,.10); }
.act3 .b-go { color: var(--green); border-color: rgba(22,199,132,.45); background: rgba(22,199,132,.10); }
.act3 .b-flat { color: #00bcd4; border-color: rgba(0,188,212,.45); background: rgba(0,188,212,.10); }
.act3 .b-stop { color: var(--red); border-color: rgba(234,57,67,.45); background: rgba(234,57,67,.10); }
.act3 .b-wait { color: var(--gold); border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.08); cursor: default; }
.act3 .b-wait:active { transform: none; }
.actrow.act3t .tb-btn { flex: 1; font-size: 11px; padding: 9px 4px; }
/* V27.0: „Erwartung gegen Ergebnis“ — Beschriftung links, Satz rechts, am Handy untereinander.
Links die Erwartung aus dem Backtest, rechts das gemessene Ergebnis aus dem Journal. */
.erwbox .erw-r { padding: 6px 0; border-bottom: 1px solid rgba(54,60,78,.35); font-size: 11.5px; line-height: 1.5; }
.erwbox .erw-r:last-child { border-bottom: none; }
.erwbox .erw-r .l { display: block; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.erwbox .erw-r .v { display: block; color: var(--mid); }
.erwbox .erw-r .v b { font-family: var(--mono); }
/* V27.0: antippbare Parameter-Zeile (zurzeit die zusätzliche Marge) */
.sumbox > div.tapp { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sumbox > div.tapp:active { background: rgba(255,255,255,.04); }
.tapi { font-style: normal; font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: .3px;
color: var(--accent); border: 1px solid rgba(249,115,22,.45); border-radius: 5px; padding: 1px 5px; margin-left: 6px; }
/* V28.0: antippbare Kachel (Eig.-Marge, Hebel, Zusatz-Marge).
V31.0 (Roccos Wunsch 24.09.): dreizeilig, linksbündig — erst ÄNDERN, dann der Name, dann der Betrag. */
.kpi.tapk { cursor: pointer; border-color: rgba(249,115,22,.35); -webkit-tap-highlight-color: transparent; text-align: left; }
.kpi.tapk:active { background: rgba(249,115,22,.10); }
.kpi.tapk .k-b { margin-bottom: 4px; line-height: 1; }
.kpi.tapk .k-b .tapi { margin-left: 0; padding: 1px 4px; font-size: 8px; }
/* V28.0: vorgemerkte Änderung — sie ist gespeichert, wartet aber auf einen flachen Bot.
Gold, nicht rot: es ist kein Fehler, sondern ein bewusstes Warten. Rot nur, wenn die
Buchung danach nicht ging (z. B. zu wenig Guthaben). */
.pendbox { margin: 8px 14px 4px; padding: 10px 12px; border-radius: 12px;
background: rgba(234,179,8,.09); border: 1px solid rgba(234,179,8,.45); }
.pendbox.fehler { background: rgba(234,57,67,.09); border-color: rgba(234,57,67,.45); }
.pendbox .p-t { font-size: 11px; font-weight: bold; color: var(--gold); letter-spacing: .3px; }
.pendbox.fehler .p-t { color: var(--red); }
.pendbox .p-w { font-family: var(--mono); font-size: 12px; font-weight: bold; margin-top: 4px; }
.pendbox .p-s { font-size: 11px; color: var(--mid); line-height: 1.45; margin-top: 4px; }
.pendbox .tb-btn { padding: 7px 12px; font-size: 11px; }
/* ═══ V29.0: Dialoge im eigenen Design ═══
Rückfrage (.fq) im Modal: Titel, Aufzählung, rote Warnung, optional Sicherheitswort, zwei
Knöpfe — der bestätigende trägt die Farbe der Handlung (rot = unwiderruflich/echtes Geld,
amber = Rückgängig möglich, grün = Anlegen, türkis = Flach stellen wie im Browser). */
.fq .fq-t { font-size: 15px; margin-bottom: 8px; line-height: 1.3; }
.fq .fq-z { list-style: none; margin: 0 0 6px; padding: 0; }
.fq .fq-z li { position: relative; padding-left: 14px; font-size: 12px; color: var(--mid); line-height: 1.5; margin: 3px 0; }
.fq .fq-z li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.fq .fq-x { font-size: 12px; color: var(--mid); line-height: 1.5; margin-bottom: 8px; white-space: pre-line; }
.fq .fq-x b, .fq .fq-z b { color: var(--text); }
.fq .fq-w { margin: 8px 0 4px; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.45; color: var(--mid); background: rgba(234,57,67,.10); border: 1px solid rgba(234,57,67,.4); }
.fq .fq-w b { color: var(--red); }
.fq .flbl { margin-top: 8px; }
.fq .fq-b { display: flex; gap: 8px; margin-top: 12px; }
.fq .fq-b .tb-btn { flex: 1; }
.fq .fq-b .tb-btn:last-child { flex: 1.4; }
.tb-btn.cyan { background: #00bcd4; color: #04252a; }
/* Einblendung (.fltoast): unten über der Tab-Leiste, stapelt sich, tippen schließt. */
#fl-toasts { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0)); z-index: 400;
display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fltoast { pointer-events: auto; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.5);
font-size: 12px; line-height: 1.45; color: var(--text); animation: tIn .22s ease; cursor: pointer; }
.fltoast.out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.fltoast .ti { flex-shrink: 0; font-size: 14px; line-height: 1.2; }
.fltoast .tx { flex: 1; min-width: 0; word-break: break-word; }
.fltoast.ok { border-color: rgba(22,199,132,.55); } .fltoast.ok .ti { color: var(--green); }
.fltoast.wait { border-color: rgba(234,179,8,.55); } .fltoast.wait .ti { color: var(--gold); }
.fltoast.err { border-color: rgba(234,57,67,.6); background: #1a0f14; } .fltoast.err .ti { color: var(--red); }
.fltoast.warn { border-color: rgba(251,146,60,.5); } .fltoast.warn .ti { color: var(--amber); }
@keyframes tIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fltoast { animation: none; } }
.gvbox { margin: 0 14px 6px; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; padding: 8px; }
.actrow { display: flex; gap: 8px; margin: 8px 14px 4px; }
.scr[data-screen="botdetail"].on { display: block; }
#bd-body { padding-bottom: 10px; }
.tradebar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 12px 4px; flex-shrink: 0; }
.tb-in { display: flex; flex-direction: column; gap: 3px; }
.tb-in label { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
.tb-in input {
width: 84px; background: var(--card); border: 1px solid var(--border); color: var(--text);
border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: var(--mono);
}
.tb-btn {
flex: 1; border: none; border-radius: 9px; padding: 11px 8px; font-size: 13px; font-weight: bold;
cursor: pointer; color: #fff; font-family: inherit; white-space: nowrap;
}
.tb-btn.grn { background: var(--green); }
.tb-btn.red { background: var(--red); }
.tb-btn.amb { background: var(--amber); color: #160c02; }
.tb-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--mid); flex: 0 0 auto; }
.minibtn {
background: transparent; border: 1px solid var(--border); color: var(--mid);
border-radius: 6px; padding: 4px 10px; font-size: 10.5px; font-weight: bold; cursor: pointer; font-family: inherit;
}
.minibtn.red { border-color: rgba(242,54,69,.5); color: var(--red); }
/* ═══ V4.0 (Etappe 4): SVG-Icons + Trading-Screen + Bots-Screen + Modal ═══ */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tabbar { gap: 6px; }
.tabbar .tab { width: 66px; gap: 3px; }
.tabbar .tab .ic { width: 21px; height: 21px; }
.tabbar .tab.on .ic { stroke-width: 2.2; }
.charthead .iconbtn .ic { width: 22px; height: 22px; }
.iconbtn { background: none; border: none; cursor: pointer; }
.trwrap { padding: 4px 16px 10px; }
.livebanner {
background: rgba(242,54,69,.12); border: 1px solid rgba(242,54,69,.5); color: var(--mid);
border-radius: 10px; padding: 9px 12px; font-size: 11.5px; margin-bottom: 10px; line-height: 1.5;
}
.livebanner b { color: var(--red); }
.frow { display: flex; gap: 10px; margin-top: 8px; }
.fcol { flex: 1; min-width: 0; }
.flbl { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.fin { display: flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.fin input {
flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text);
padding: 10px 11px; font-size: 13.5px; font-family: var(--mono);
}
.fin .fsuf { color: var(--dim); font-size: 11px; padding: 0 11px; flex-shrink: 0; }
/* V35.0 (Runde 207): Zahlen tippt man ein — keine Pfeil-Kästen im Feld */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.fin .grlive { background: transparent; border: none; border-left: 1px solid var(--border); color: var(--green); font-size: 11.5px; font-weight: 700; padding: 0 11px; align-self: stretch; cursor: pointer; }
/* V35.0: Grid-Regler (wie im Terminal) */
.grregler { display: grid; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px 11px; }
.grregler canvas { display: block; width: 100%; height: 64px; }
.grregler .rand { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; font: 600 10.5px/1.35 var(--mono); }
.grregler .rand .u { color: var(--green); } .grregler .rand .o { color: var(--red); text-align: right; }
.grregler .z { display: grid; gap: 4px; }
.grregler .k { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--mid); flex-wrap: wrap; }
.grregler .k b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.grregler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: pan-y; }
.grregler input[type=range]:disabled { cursor: not-allowed; opacity: .4; }
.grregler input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--spur, #1c2942); }
.grregler input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--spur, #1c2942); }
.grregler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #e8ecf4; border: 3px solid var(--green); box-shadow: 0 1px 4px rgba(0,0,0,.55); }
.grregler input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: #e8ecf4; border: 3px solid var(--green); box-shadow: 0 1px 4px rgba(0,0,0,.55); }
.grregler input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.grregler .en { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }
.symrow { display: flex; align-items: center; gap: 8px; }
.symrow select, .bfsel {
flex: 1; min-width: 0; width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text);
border-radius: 9px; padding: 10px 11px; font-size: 13.5px; font-family: inherit; appearance: auto;
}
.qrow { display: flex; gap: 7px; margin-top: 7px; }
.qrow button {
flex: 1; background: var(--card); border: 1px solid var(--border2); color: var(--mid);
border-radius: 7px; padding: 7px 4px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.qrow button:active { background: var(--accent); border-color: var(--accent); color: #160c02; }
.slider { width: 100%; accent-color: var(--accent); margin-top: 4px; height: 22px; }
.seg.segbig button { padding: 11px 4px; font-size: 13px; font-weight: bold; }
.seg button.grn.on, .seg .grn.on { background: var(--green); color: #fff; }
.seg button.red.on, .seg .red.on { background: var(--red); color: #fff; }
.tpslbtn {
display: block; width: 100%; margin-top: 12px; background: transparent; cursor: pointer;
border: 1px dashed var(--accent); color: var(--accent); border-radius: 9px; padding: 10px;
font-size: 12.5px; font-weight: bold; font-family: inherit;
}
.tpslbtn.open { border-style: solid; background: rgba(249,115,22,.10); }
.sumbox { background: var(--card); border: 1px solid var(--border2); border-radius: 11px; padding: 4px 13px; margin-top: 12px; }
.sumbox > div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(54,60,78,.35); font-size: 12px; color: var(--dim); }
.sumbox > div:last-child { border-bottom: none; }
.sumbox .mono { font-size: 12.5px; color: var(--text); }
.bigbtn.grn { background: var(--green); color: #fff; border: none; width: 100%; cursor: pointer; font-family: inherit; margin-top: 12px; }
.bigbtn.red { background: var(--red); color: #fff; border: none; width: 100%; cursor: pointer; font-family: inherit; margin-top: 12px; }
.bigbtn:disabled { opacity: .55; }
.typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.typecard { background: var(--card); border: 1px solid var(--border2); border-radius: 13px; padding: 12px; cursor: pointer; }
.typecard:active { border-color: var(--accent); }
.typecard .t-n { font-size: 13px; font-weight: bold; margin-bottom: 3px; }
.typecard .t-d { font-size: 10.5px; color: var(--dim); line-height: 1.45; }
.chk { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--text); margin-top: 10px; cursor: pointer; line-height: 1.45; }
.chk input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.bf-sec { margin-top: 16px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .4px; }
.dcarow { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.dcarow .fin { flex: 1; }
.modalback {
position: fixed; inset: 0; z-index: 300; background: rgba(8,10,15,.72);
display: flex; align-items: center; justify-content: center; padding: 18px;
backdrop-filter: blur(3px);
}
.modalbox {
width: 100%; max-width: 420px; max-height: 84vh; overflow-y: auto;
background: var(--panel); border: 1px solid var(--border); border-radius: 15px; padding: 16px;
box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
/* ═══ V7.0 (Welle 5): Create-Bot-Button (PC-Look) + Märkte-Add-Suchfeld ═══ */
.addbot-btn {
/* Weisse Schrift auf Orange — Roccos Wunsch fuer diesen Knopf. Bewusst NUR hier:
die uebrigen orangen Flaechen (Chips, Segment-Schalter, .bigbtn) behalten die
dunkle Schrift. Wenn das angeglichen werden soll, sind es die #160c02-Stellen. */
background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; border: none;
border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: bold;
padding: 9px 15px; display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 4px 12px rgba(249,115,22,.30); font-family: inherit;
}
.addbot-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(249,115,22,.30); }
.mkt-add-wrap { position: relative; padding: 4px 16px 10px; }
.mkt-add-wrap input {
width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border);
border-radius: 9px; color: var(--text); font-size: 12.5px; padding: 10px 12px; outline: none; font-family: inherit;
}
.mkt-add-wrap input:focus { border-color: var(--accent); }
.mkt-add-list {
display: none; position: absolute; left: 16px; right: 16px; top: 46px; z-index: 60;
background: var(--panel); border: 1px solid var(--border); border-radius: 9px; max-height: 300px;
overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.mkt-add-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--text); cursor: pointer; border-bottom: 1px solid rgba(54,60,78,.35); }
.mkt-add-item:last-child { border-bottom: none; }
.mkt-add-item:active { background: rgba(249,115,22,.16); }
.mkt-add-item.disabled { color: var(--dim); cursor: default; justify-content: center; }
/* ═══ V8.0 (Welle 6): Voller-Breite-Button + Chart-Trading-Formular-Host ═══ */
.fullbtn {
display: block; width: 100%; margin-top: 7px; background: var(--card); border: 1px solid var(--border2);
color: var(--mid); border-radius: 8px; padding: 10px 4px; font-size: 12.5px; font-weight: bold;
cursor: pointer; font-family: inherit; text-align: center;
}
.fullbtn:active { background: rgba(249,115,22,.14); color: var(--text); }
#ch-tradeform-host:not(:empty) { border-top: 1px solid var(--border2); margin-top: 4px; padding-top: 2px; }
.modalbox h3 { font-size: 14px; margin-bottom: 10px; }
.mrow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(54,60,78,.4); font-size: 12.5px; color: var(--dim); }
.mrow span:last-child { color: var(--text); font-family: var(--mono); font-weight: bold; }
/* ═══ V5.0 (Welle 3): Backtest / Top-50 / Korb in der Bot-Maske ═══ */
.optcard { background: var(--card); border: 1px solid var(--border2); border-radius: 11px; padding: 9px 11px; margin-top: 8px; cursor: pointer; }
.optcard.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.optcard .r1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.optcard .r2 { margin-top: 4px; font-size: 10.5px; color: var(--dim); font-family: var(--mono); display: flex; gap: 10px; flex-wrap: wrap; }
.btblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border2); border-radius: 11px; margin-top: 8px; }
.btbl { border-collapse: collapse; font-size: 11px; white-space: nowrap; min-width: 100%; }
.btbl th { color: var(--dim); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border2); font-weight: normal; background: var(--card); }
.btbl td { padding: 6px 8px; border-bottom: 1px solid rgba(54,60,78,.35); text-align: right; font-family: var(--mono); color: var(--text); }
.btbl th:first-child, .btbl td:first-child { text-align: left; font-family: inherit; font-weight: bold; }
.progressbar { height: 9px; background: var(--card2); border-radius: 5px; overflow: hidden; margin: 9px 0; }
.progressbar > div { height: 100%; background: var(--accent); width: 0%; transition: width .5s; }
#bf-tfchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* ≥760px: 2-spaltiges Grid (Tablet / Laptop) — Shell breiter */
@media (min-width: 760px) {
.shell { max-width: 1200px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 0 6px; align-items: start; }
.grid > div { min-width: 0; } /* V22.0: sonst diktiert die Mover-Reihe die Spaltenbreite */
.hero { max-width: 640px; }
#mkt-list { max-width: 640px; }
.trwrap, #bots-list, #bf-body { max-width: 640px; }
}
/* ≥1100px: 3-spaltig */
@media (min-width: 1100px) {
.grid { grid-template-columns: 1.15fr 1fr 1fr; }
}
/* ── V17.0: Stufen der Bot-Anlage (Einsteiger · Fortgeschritten · Experte) ── */
.lvlseg { margin: 2px 0 14px; }
.lvlseg button { padding: 10px 4px; font-size: 12px; }
/* Startwert-Chips: zwei Spalten, Daumen-taugliche Hoehe. --rc traegt die Farbe
der jeweiligen Engine, damit der gewaehlte Chip zum Bot-Typ passt. */
.riskgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.riskchip {
background: var(--card); border: 1px solid var(--border2); border-radius: 10px;
color: var(--text); padding: 11px 8px; font-size: 12px; font-family: inherit;
cursor: pointer; text-align: center; line-height: 1.3;
}
.riskchip:active { border-color: var(--rc, var(--accent)); }
.riskchip.on {
background: var(--rc, var(--accent)); border-color: var(--rc, var(--accent));
color: #fff; font-weight: bold;
}
.riskhint { font-size: 10.5px; color: var(--dim); line-height: 1.5; margin: 7px 2px 2px; }
.riskhint b { color: var(--text); }
/* Fusszeile der Einsteiger-/Fortgeschritten-Maske: erklaert, was die Stufe verbirgt. */
.lvlnote {
font-size: 10.5px; color: var(--dim); line-height: 1.55;
margin: 12px 2px 0; padding: 10px 11px;
background: var(--card); border: 1px solid var(--border2); border-radius: 10px;
}
.lvlnote b { color: var(--text); }
/* ── V18.0: Coin-Picker (Bot-Maske + Hebel-Trading) — Look von „+ Coin hinzufügen…" ── */
.cpick { position: relative; display: flex; align-items: center; gap: 8px; }
.cpick-ic { flex: 0 0 auto; display: flex; align-items: center; min-width: 0; }
.cpick-ic:empty { display: none; }
.cpick-q {
flex: 1; min-width: 0; width: 100%; box-sizing: border-box;
background: var(--card); border: 1px solid var(--border); border-radius: 9px;
color: var(--text); font-size: 13px; padding: 10px 12px; outline: none; font-family: inherit;
}
.cpick-q:focus { border-color: var(--accent); }
.cpick-q::placeholder { color: var(--dim); }
/* Die Trefferliste haengt unter dem Feld, nicht unter dem Icon */
.cpick .cpick-list { left: 0; right: 0; top: 44px; }
/* ── V18.0: Watchlist-Coin wegwischen (Maerkte) ── */
#mkt-list { overflow-x: hidden; }
.hrow.mkt { position: relative; background: var(--bg); touch-action: pan-y; will-change: transform; }
.hrow.mkt.sw-anim { transition: transform .18s ease; }
.hrow.mkt .sw-bg {
position: absolute; top: 0; bottom: 0; left: 100%; width: 140px;
display: flex; align-items: center; justify-content: flex-start; padding-left: 18px;
background: var(--red); color: #fff; font-weight: bold; font-size: 12px; letter-spacing: .3px;
opacity: 0; pointer-events: none;
}
.hrow.mkt.sw-on .sw-bg { opacity: .8; }
.hrow.mkt.sw-ready .sw-bg { opacity: 1; }
/* ── V19.0: Konto-Hub (Command Center nativ) ── */
.ucard {
display: flex; align-items: center; gap: 12px; margin: 4px 14px 12px; padding: 12px 13px;
background: var(--card); border: 1px solid var(--border2); border-radius: 14px;
}
.uav { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.uav-ini { background: var(--grad); color: #fff; font-weight: bold; border: 1px solid var(--border); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 12px; }
.tile {
background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 12px 12px 11px;
cursor: pointer; min-height: 96px; display: flex; flex-direction: column;
}
.tile:active { border-color: var(--accent); background: rgba(249,115,22,.10); }
.tile.adm { border-style: dashed; }
.tile .t-ic { font-size: 18px; line-height: 1; }
.tile .t-l { font-size: 12.5px; font-weight: bold; margin-top: 7px; }
.tile .t-v { font-size: 13.5px; font-weight: bold; margin-top: 5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .t-s { font-size: 10px; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.keycard { margin: 6px 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; }
.keycard .r1 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.keycard .r2 { display: flex; gap: 8px; margin-top: 8px; }
.proofcard { margin: 6px 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; cursor: pointer; }
.proofcard:active { border-color: var(--accent); }
.proofcard .r1 { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.proofcard .r2 { display: flex; gap: 10px; font-size: 10.5px; margin-top: 5px; color: var(--mid); flex-wrap: wrap; }
.proofcard .r3 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 8px; font-size: 11px; }
.proofcard .r3 > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.proofcard .r3 .k { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .3px; }
.ksbar { margin-bottom: 10px; }
.ksbar .r1 { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; }
.ksbar .progressbar > div { transition: width .3s ease; }
.scr[data-screen="kontosub"].on { display: block; }
@media (min-width: 760px) {
.tiles { grid-template-columns: repeat(4, 1fr); max-width: 900px; }
#konto-hub, #ks-body { max-width: 900px; }
}
/* ── V20.0: Bot-Typ-Karten — Icon-Platte mittig, Name, ein Satz (Look der Terminal-Auswahl) ── */
.typecard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px 14px; }
.typecard .t-ic {
width: 54px; height: 54px; border-radius: 16px; border: 1px solid;
display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.typecard .t-ic .ic { width: 30px; height: 30px; stroke-width: 1.7; }
.typecard .t-n { font-size: 14px; margin-bottom: 4px; }
.typecard .t-d { font-size: 10.5px; line-height: 1.45; color: var(--dim); }
@media (min-width: 760px) { .typegrid { grid-template-columns: repeat(3, 1fr); } }
/* ── V21.0: Home als Cockpit (Runde 127) — Wetterzeile, Hero-Verlauf, Puls, Beispiel-Karten ── */
.sec .r { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.sec { display: flex; align-items: center; gap: 8px; }
/* Wetterzeile — BTC live, ein Band vor den eigenen Zahlen */
.wx { margin: 8px 14px 0; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--border2); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.wx:active { border-color: var(--accent); }
.wx-btc { width: 30px; height: 30px; border-radius: 50%; background: #f7931a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.wx-nm { line-height: 1.15; }
.wx-nm b { font-size: 12.5px; display: block; }
.wx-nm .live { font-size: 9px; color: var(--green); white-space: nowrap; }
.wx-nm .live::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 4px; vertical-align: middle; }
.wx-px { margin-left: 2px; min-width: 0; }
.wx-px b { display: block; font-size: 14px; color: #fff; white-space: nowrap; }
.wx-px span { font-size: 10.5px; }
.wx-spark { margin-left: auto; flex-shrink: 0; }
.wx-rng { width: 70px; flex-shrink: 0; }
.wx-rng .l { display: flex; justify-content: space-between; gap: 4px; font-size: 8px; color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.wx-rng .bar { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(234,57,67,.55), rgba(255,255,255,.12) 50%, rgba(22,199,132,.55)); margin: 3px 0; }
.wx-rng .bar i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--card); transform: translateX(-50%); transition: left .4s ease; }
.wx-rng .t { font-size: 8.5px; color: var(--dim); text-align: center; letter-spacing: .3px; text-transform: uppercase; }
.wx-chev { color: var(--dim); font-size: 16px; }
/* Hero: Verlauf unter der Zahl, Legende in einer Zeile, kleinerer Donut */
.hspark { margin-top: 8px; height: 44px; overflow: hidden; }
.hero-leg.inl { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
/* Puls-Streifen */
.pulse { display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 12px; scrollbar-width: none; }
.pulse::-webkit-scrollbar { display: none; }
.pt { min-width: 108px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; padding: 9px 11px; }
.pt[onclick]:active { border-color: var(--accent); }
.pt .l { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.pt .v { font-size: 15px; font-weight: bold; margin-top: 3px; white-space: nowrap; }
.pt .s { font-size: 10px; color: var(--dim); margin-top: 2px; white-space: nowrap; }
.meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--green); }
/* Begruessung + zwei Knoepfe, solange das Konto leer ist */
.day { margin: 8px 14px 0; padding: 9px 12px; border-radius: 12px; background: rgba(22,199,132,.08); border: 1px solid rgba(22,199,132,.3); font-size: 12px; display: flex; gap: 9px; align-items: center; }
.day .pv { width: 6px; height: 28px; border-radius: 3px; background: var(--green); flex-shrink: 0; }
.day.welcome { background: rgba(249,115,22,.07); border-color: rgba(249,115,22,.35); }
.day.welcome .pv { background: var(--accent); }
.cta { margin: 8px 14px 4px; display: flex; gap: 8px; }
.cta button { flex: 1; padding: 9px 8px; border-radius: 10px; font-size: 12px; font-weight: bold; font-family: inherit; cursor: pointer; }
.cta .a { background: var(--accent); color: #160c02; border: none; }
.cta .b { background: transparent; border: 1px solid var(--border); color: var(--mid); }
/* Bausteine der Bot-Karte (Icon-Platte, Mini-Kurve, Zustandspunkt) — Runde 128 nutzt sie fuer echte Bots */
.plate { width: 34px; height: 34px; border-radius: 10px; border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plate .ic { width: 19px; height: 19px; stroke-width: 1.7; }
.bspark { margin-left: auto; flex-shrink: 0; }
.sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* Beispiel-Karten: gestrichelt, gedaempft, klar beschriftet — und in Bewegung */
.ex { border-style: dashed; border-color: #34466b; background: rgba(14,22,38,.55); animation: exglow 3.2s ease-in-out infinite; cursor: pointer; }
.exchip { display: inline-block; border: 1px dashed var(--dim); color: var(--mid); border-radius: 4px; padding: 1px 6px; font-size: 9px; font-weight: bold; letter-spacing: .5px; }
.ex .tap { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--accent); font-weight: 600; }
.ex .tap .chev { margin-left: auto; font-size: 15px; }
.ex svg polyline { stroke-dasharray: 320; stroke-dashoffset: 0; animation: exdraw 4s ease-in-out infinite alternate; }
.exhead { margin: 0 14px 10px; padding: 9px 12px; border-radius: 12px; border: 1px dashed #34466b; font-size: 11.5px; color: var(--mid); display: flex; gap: 9px; align-items: center; }
.exhead b { color: var(--text); }
@keyframes exglow { 0%, 100% { border-color: #34466b; } 50% { border-color: #4f6a9e; } }
@keyframes exdraw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ex, .ex svg polyline { animation: none; } .wx-rng .bar i { transition: none; } }
/* ── V23.0: Home als Cockpit (Runde 128) — Tages-Satz, Bot-Puls, Chronik ── */
.day.pos { background: rgba(22,199,132,.08); border-color: rgba(22,199,132,.3); }
.day.pos .pv { background: var(--green); }
.day.neg { background: rgba(234,57,67,.08); border-color: rgba(234,57,67,.32); }
.day.neg .pv { background: var(--red); }
.day.flat { background: rgba(148,163,184,.06); border-color: var(--border2); color: var(--mid); }
.day.flat .pv { background: var(--dim); }
/* Bot-Karte: Icon-Platte links, Textblock schrumpft, Mini-Kurve + PnL rechts */
.bot-card .r1 > div { flex: 1; min-width: 0; }
.bot-card .r1 .pl { margin-left: 8px; }
.bot-card .r2 .sdot { margin-right: -4px; }
/* V25.0: Kopfzeile — Markt (ADA) und Abzeichen (QUORUM/DEMO) enden auf derselben Unterkante,
darunter Luft zur Zeile mit Bot-Nummer/Zeitfenster/Hebel. Gilt gleich in der Karte und im
Kopf des Bot-Details, damit beides gleich aussieht. */
.bot-card .r1 .t1,
.bd-t1 { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; line-height: 1; }
.bot-card .r1 .t1 > b { font-size: 12.5px; line-height: 1; }
.bd-t1 > b { line-height: 1; }
.bot-card .r1 .t1 .badge,
.bd-t1 .badge { line-height: 1; padding: 2px 6px; }
.bot-card .r1 .sub,
.bd-sub { margin-top: 5px; font-size: 10.5px; line-height: 1.35; }
/* V34.0 (Runde 170): Gruppen brechen nur als Ganzes um — „Eig.-M 15 $“ steht nie getrennt auf zwei Zeilen */
.bot-card .r1 .sub { display: flex; flex-wrap: wrap; column-gap: 9px; row-gap: 1px; }
.bot-card .r1 .sub .sg { white-space: nowrap; }
.bot-card .r1 .sub .sg b { color: var(--mid); font-weight: 600; }
/* Chronik-Zeilen */
.ev { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(54,60,78,.35); cursor: pointer; }
.ev:active { background: rgba(255,255,255,.04); }
.ev .ic { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; flex-shrink: 0; background: rgba(255,255,255,.06); }
.ev .tx { flex: 1; min-width: 0; }
.ev .tx b { font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .tx div { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .rt { text-align: right; flex-shrink: 0; }
.ev .rt div { font-size: 10px; color: var(--dim); }
.ev.new { background: rgba(249,115,22,.05); box-shadow: inset 3px 0 0 var(--accent); }
.ev.new .tx div::after { content: " · neu"; color: var(--accent); }
.ev.exev { cursor: default; opacity: .85; animation: exfade 6s ease-in-out infinite; }
.ev.exev:nth-child(3) { animation-delay: 2s; } .ev.exev:nth-child(4) { animation-delay: 4s; }
@keyframes exfade { 0%, 100% { opacity: .55; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ev.exev { animation: none; } }
/* ── V24.0: Mover-Kacheln mit 24-h-Linie (Runde 129) ── */
.mtile { min-width: 118px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.mtile:active { border-color: var(--accent); }
.mtile .r1 { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.mtile .px { font-size: 12.5px; margin-top: 4px; white-space: nowrap; }
.mtile .ch { font-size: 10.5px; }
.mtile .mvs { margin-top: 4px; height: 20px; }
/* V32.0 (Runde 167): Umschalter $ / % über den Bot-Listen — klein, wie im Terminal */
.unitseg { display: inline-flex; vertical-align: middle; margin-left: 8px; border: 1px solid var(--border2); border-radius: 6px; overflow: hidden; background: var(--card); }
.unitseg button { background: transparent; border: 0; color: var(--dim); padding: 2px 9px; font-size: 11px; font-weight: bold; cursor: pointer; font-family: inherit; line-height: 1.5; }
.unitseg button.on { background: var(--accent); color: #160c02; }
/* V33.0 (Runde 169): „G/V" klein vor der grossen Zahl der Bot-Karte — man weiss sofort, was die Zahl ist */
.bot-card .pl .plk { font-size: 9.5px; font-weight: 600; color: var(--dim); margin-right: 5px; letter-spacing: .3px; vertical-align: middle; }
/* ═══ V37.0 (Runde 244) ═══ */
/* Glocke mit Zahl der ungesehenen Meldungen */
.al-gl { position: relative; }
.al-gl .al-zahl { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #160c02;
font: 700 9px/15px var(--mono); font-style: normal; text-align: center; }
.al-gl .al-zahl[hidden] { display: none; }
/* Märkte: Liste · Heatmap · Liquidationen */
.mkt-tabs { margin: 2px 16px 10px; }
#mkt-p-hm, #mkt-p-liq { padding: 0 12px 12px; }
#mkt-p-hm[hidden], #mkt-p-liq[hidden], #mkt-p-liste[hidden] { display: none; }
.hmc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.hmc button { background: var(--card); border: 1px solid var(--border2); color: var(--mid); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.hmc button.on { border-color: var(--accent); color: var(--text); background: rgba(249,115,22,.10); }
.hm-zahl { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--mid); margin: 2px 2px 6px; }
.hm-box { position: relative; height: 560px; border-radius: 10px; overflow: hidden; background: var(--card); }
.hmk { position: absolute; box-sizing: border-box; border: 1px solid rgba(7,11,20,.55); display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden; color: #fff; text-align: center; line-height: 1.15; cursor: pointer; font-family: var(--mono); }
.hmk .n { font-weight: 800; }
.hmk .c { opacity: .9; }
.hmg { position: absolute; left: 0; right: 0; box-sizing: border-box; border-top: 1px solid var(--border2); display: flex; justify-content: space-between; align-items: flex-start;
padding: 1px 6px 0; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; color: var(--dim); text-transform: uppercase; pointer-events: none; }
.hm-leer { padding: 40px 16px; text-align: center; color: var(--dim); font-size: 12px; }
.hm-fuss { font-size: 10.5px; margin-top: 6px; line-height: 1.45; }
.liq-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.liq-kopf .hmc { flex: 1 1 auto; }
.liq-sel { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.liq-karte { position: relative; margin-top: 2px; }
#liq-cv { display: block; width: 100%; height: 340px; border-radius: 10px; touch-action: pan-y; }
.liq-tip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 7px 9px; border-radius: 8px; background: rgba(11,18,32,.96);
border: 1px solid var(--border); font-size: 11px; color: var(--mid); pointer-events: none; }
.liq-tip b { color: var(--text); }
.liq-tip span { display: flex; justify-content: space-between; gap: 10px; }
.liq-tip[hidden] { display: none; }
.liq-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 11px; }
.liq-zeile .tb-btn { margin-left: auto; }
.liq-tag { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 6px; }
.liq-erkl { font-size: 10.5px; line-height: 1.5; margin-top: 6px; }
#liq-voll { position: fixed; inset: 0; z-index: 900; background: #070b14; display: flex; flex-direction: column;
padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
#liq-voll[hidden] { display: none; }
.lv-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lv-kopf .liq-sel { margin-left: auto; }
.lv-karte { position: relative; flex: 1; min-height: 0; }
#liq-vcv { display: block; width: 100%; height: 100%; touch-action: none; }
.lv-fuss { font-size: 10.5px; margin-top: 6px; text-align: center; }
/* Alarme */
#al-body { padding: 0 12px 16px; }
.al-meld { background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.5); border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.al-meld .dim { font-size: 11px; }
.al-reiter { margin: 8px 0 10px; }
.al-k { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; background: var(--card); border: 1px solid var(--border2); border-radius: 12px; padding: 10px 11px; margin-bottom: 8px; }
.al-k.aus { opacity: .7; }
.al-k .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(249,115,22,.12); color: var(--accent); font-weight: 700; }
.al-t { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.al-t .dim { font-size: 10.5px; line-height: 1.4; }
.al-st { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: rgba(148,163,184,.12); color: var(--mid); }
.al-st.an { background: rgba(22,199,132,.14); color: var(--green); }
.al-kn { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.al-k .al-kn { flex-basis: 100%; padding-left: 37px; margin-top: 0; }
/* Marktwetter auf Home */
.mw { margin: 0 16px 10px; background: var(--card); border: 1px solid var(--border2); border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.mw-k { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.mw-k .dim { font-size: 10.5px; }
.mw-i { margin-left: auto; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border); color: var(--dim); font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
.mw-z { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--mid); }
.mw-z i { font-style: normal; color: var(--dim); font-size: 11px; }
.mw-u { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.mw-u.gut { background: rgba(22,199,132,.14); color: var(--green); }
.mw-u.mix { background: rgba(234,179,8,.14); color: var(--gold); }
.mw-u.schlecht { background: rgba(234,57,67,.14); color: var(--red); }
.mw-u.nichts { background: rgba(148,163,184,.12); color: var(--dim); }
.mw-fg { color: var(--text); font-size: 12px; }
/* Dynamischer Grid in der Maske */
.dynbox { margin: 12px 0; padding: 10px 11px; border: 1px solid rgba(47,214,179,.4); border-radius: 12px; background: rgba(47,214,179,.04); }
.dyn-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.dyn-t { font-size: 10.5px; line-height: 1.45; margin: 2px 0 4px; }
.dyn-z { display: flex; align-items: center; gap: 8px; }
.dyn-z input[type=range] { flex: 1; width: auto; }
.dyn-z input[type=number] { width: 62px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px; font-size: 13px; font-family: inherit; text-align: right; }
.dyn-en { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); margin-top: 2px; }
#bf-dyn-long[hidden] { display: none; }
.st-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.st-z { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; font-size: 11px; color: var(--mid); background: var(--card); border-radius: 8px; padding: 5px 8px; }
.st-z b { color: #2fd6b3; }
.dyn-h { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dyn-w, .dyn-i { font-size: 11px; line-height: 1.45; border-radius: 8px; padding: 7px 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dyn-w { background: rgba(234,179,8,.10); border: 1px solid rgba(234,179,8,.4); color: #f2d06b; }
.dyn-i { background: rgba(77,124,219,.08); border: 1px solid rgba(77,124,219,.3); color: var(--mid); }
.dyn-w .tb-btn, .dyn-i .tb-btn { padding: 4px 9px; font-size: 11px; }
/* ═══ V38.0 (Runde 245): „Neuer Bot“ mit Suche ═══ */
.btl-suche { position: relative; margin: 6px 0 8px; }
.btl-suche .ic { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--dim); }
.btl-suche input { width: 100%; box-sizing: border-box; height: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: 14px inherit; padding: 0 12px 0 36px; }
.btl-suche input:focus { border-color: var(--accent); outline: none; }
.btl-kat { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; scrollbar-width: none; }
.btl-kat::-webkit-scrollbar { display: none; }
.btl-kat button { flex: none; background: var(--card); border: 1px solid var(--border2); color: var(--mid); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }
.btl-kat button.on { border-color: var(--accent); color: var(--text); background: rgba(249,115,22,.10); }
.btl-fil button { font-size: 11px; padding: 4px 10px; }
.btz { background: var(--card); border: 1px solid var(--border2); border-radius: 13px; margin-top: 8px; overflow: hidden; }
.btz.auf { border-color: var(--border); }
.btz-k { display: flex; gap: 10px; align-items: flex-start; padding: 11px; cursor: pointer; }
.btz .t-ic { width: 38px; height: 38px; border-radius: 10px; border: 1px solid; display: grid; place-items: center; flex: none; }
.btz .t-ic .ic { width: 20px; height: 20px; }
.btz-t { flex: 1; min-width: 0; }
.btz-n { font-size: 13.5px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btz-neu { font-size: 9.5px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
.btz-l { font: 600 10px var(--mono); color: var(--green); }
.btz-d { font-size: 11px; color: var(--dim); line-height: 1.45; margin-top: 2px; }
.btz-s { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.btz-st { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid; }
.btz-st.gut { color: var(--green); border-color: rgba(22,199,132,.5); background: rgba(22,199,132,.10); }
.btz-st.mix { color: var(--gold); border-color: rgba(234,179,8,.5); background: rgba(234,179,8,.08); }
.btz-st.nein { color: var(--red); border-color: rgba(234,57,67,.5); background: rgba(234,57,67,.08); }
.btz-m { font-size: 10.5px; color: var(--dim); border: 1px solid var(--border2); border-radius: 999px; padding: 1px 8px; display: inline-flex; gap: 3px; align-items: center; }
.btz-m .mw-u { font-size: 10px; padding: 0 6px; }
.btz-pf { color: var(--dim); font-size: 12px; padding-top: 2px; }
.btz-auf { padding: 0 11px 12px 59px; display: flex; flex-direction: column; gap: 8px; }
.btz-lang { font-size: 11px; color: var(--mid); line-height: 1.5; }
.btz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.btz-chip { background: var(--bg, #070b14); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 6px 9px; font: 600 12px inherit; text-align: left; cursor: pointer; }
.btz-chip small { display: block; font-size: 10.5px; font-weight: 500; color: var(--dim); }
.btz-chip.stern { border-color: rgba(234,179,8,.55); }
.btz-auf .bigbtn { margin: 2px 0 0; }
@media (max-width: 380px) { .btz-auf { padding-left: 11px; } }