/* var/www/html/css/chart_I.css */
/* chart_I.css V189.0 — Detailfenster-Tabs am Handy scrollbar (Roccos Fund 19.07., Screens
   3246-3248): der Tab-Wrapper (inline flex:1/overflow-y:auto aus detail_ai setupTabs) +
   height:100%-Panes erzeugten VERSCHACHTELTES Scrolling, das am Touch tot war — mobil
   fliesst jetzt alles in EINEN Scroller (.split-container, pan-y). */
/* chart_I.css V188.0 — V230: Bot-ID ohne #, Panels hochkant volle Breite, CC-Logo-Button-Fix
   (nur button[title] verstecken), Detail-Kopf padding-top 42px (Icon-Trio eigene Zeile). */
/* chart_I.css V187.0 — V229 (Roccos Mobile-Runde 14.07.): Hochkant = drawing-toolbar + Diskette/
   Layout/Tacho ausgeblendet (Livepreis+Logout sichtbar, Querformat zeigt alles); Bot-Auswahl
   scrollbar; fl-bot-modal-X + Detail-Kopf-Icons fest oben rechts (Block am Datei-Ende). */
/* chart_I.css V186.0 — V228: .bots-pct-toggle ($/%-Segment-Umschalter neben „Trading Bots"). */
/* chart_I.css V185.0 — V226: .bots-add-btn im „Create Bot"-Look (Gradient + Schatten + Hover-Lift,
   Optik-Quelle modals_demo_portfolio.php). */
/* chart_I.css V184.0 — V225: .sc-mode als feste 46px-Spalte (zentriert) + .sc-pl-1 min-width 60px
   rechtsbündig → DEMO/LIVE-Badges fluchten linksbündig exakt untereinander. */
/* chart_I.css V183.0 — V224: .sc-row1 .sc-mode (DEMO/LIVE rechtsbündig verankert, fluchtet über
   alle Karten) statt .sc-mini-1-Anker (Marge·Hebel ist aus Zeile 1 raus). */
/* chart_I.css V182.0 — Roccos Karten-Redesign 12.07.: 3-Zeilen-Kopf (.sc-head-main/.sc-avatar/.sc-head-rows/
   .sc-row1/.sc-row2/.sc-name) für alle 6 Bot-Karten + .right-panels 300→315px (~5 % breiter). */
/* chart_I.css V181.0 — Symbol-Feld-Optik lebt jetzt INLINE in watchlist.php V10.0 (Roccos
   Fund Screen_3020: CSS-Änderungen kamen nicht durch — Inline rendert immer). Die
   !important-Regeln von V180 sind raus (hätten sonst die Inline-Werte überstimmt);
   hier bleibt nur die Flyout-Positionierung ans Feld gebunden. */
/* chart_I.css V180.0 — Symbol-Feld-Regeln mit !important gehärtet (Roccos Fund Screen_3019):
   die V8.0-Inline-Styles (heller #2a2e39-Look + margin-bottom:4px) schlagen jede normale
   CSS-Regel — falls auf dem Server noch ein alter watchlist.php-Stand liegt, gewinnt jetzt
   trotzdem der Watchlist-Look. Zusätzlich color/width/box-sizing in die Regel gezogen. */
/* chart_I.css V179.0 — Symbol-Picker im Hebel-Panel (#pt-symbol-wrap): Feld exakt im
   Watchlist-„+ Coin hinzufügen"-Look (#131722, Radius 4px, Focus-Blau) + Gruppen-Abstand
   nach unten; Flyout-Position lokal ans Feld gebunden (Roccos Fund Screen_3016–3018). */
/* chart_I.css V178.0 — Replay-Lade-Status: .rp-status.rp-busy (Replay-Orange + sanfter Puls beim Historie-Laden). */
/* chart_I.css V177.0 — Replay-Runde 2: .rp-btn.active (Zukunfts-Trades-Knopf, gelb wenn Stapel sichtbar). */
/* chart_I.css V176.0 — Bar-Replay-Leiste (.replay-bar + .rp-*), oben mittig am aktiven Chart. */
/* chart_I.css V175.0 — Icon-Politur: .tool-btn-histnav (Vor/Zurück dezenter grau, blauer Hover). */
/* chart_I.css V174.0 — Zeichenwerkzeuge Stufe 3 W4: Emoji-Picker (#lt-emoji-picker: Kopf/Suche/
   Kategorien-Tabs/Grid 8 pro Zeile, .lt-emo-*). Block am Dateiende. */
/* chart_I.css V173.0 — Zeichenwerkzeuge Stufe 3 W2 (Fib-Kern): Levels-Tab-Zeilen (.lt-lvl-*) im
   Einstellungs-Dialog + Popover-Level-Modus (.lt-pop-levelmode: nur Palette + Farbrad). Block am Dateiende. */
/* chart_I.css V172.0 — Zeichenwerkzeuge Stufe 2 (Formen & Kanäle): Fill-Modus des Style-Popovers
   (.lt-pop-fillmode blendet Stärke/Linienstil aus), .lt-hidden für den Füll-Chip der Mini-Toolbar,
   .flyout-sep als Trenner zwischen Flyout-Sektionen (Linien/Kanäle, Pinsel/Formen). Block am Dateiende. */
/* chart_I.css V171.0 — Zeichenwerkzeuge Stufe 1 (Linien-Gruppe): Flyout-Gruppen in der linken Toolbar
   (.tool-group-btn/.tool-flyout), erweiterte Mini-Toolbar (.mtb-btn/.lt-only via .lt-mode), Style-Popover
   im Fadenkreuz-Design-Muster mit lt-Präfix (.lt-swatch/.lt-slider Schachbrett/.lt-style-btn — bewusst
   NICHT .color-swatch/.style-btn, sonst greift der delegierte ui.js-Handler), Micro-Menüs (#lt-micro-menu)
   und der 4-Tab-Einstellungs-Dialog (#lt-settings-dialog: Stil/Text/Koordinaten/Sichtbarkeit). Block am Dateiende. */
/* chart_I.css V170.0 — Eck-Logo-Fix: z-index 4 → 12, damit es über dem aktiven Chart-Slot (.chart-slot.active
   z-index:10, opaker Chart-Hintergrund) liegt (vorher verdeckt → Logo unsichtbar). Bleibt unter Overlays (60)
   und dem maximierten Vollbild-Slot (9999). */
/* chart_I.css V169.0 — Animiertes Eck-Logo (.chart-corner-logo, unten links im Chart, Opacity-Hover) +
   TF-Umschalter-Pills (.pt-po-tfs/.pt-po-tf) in der Kopfzeile des Profit-Overlays. */
/* chart_I.css V168.0 — TP-Modus-Icon (.sc-tpm) links in der Scout-Karten-Unterzeile. */
/* chart_I.css V167.0 — Closed-Bot-Dashboard-Overlay (#pt-bot-dashboard: KPI-Grid/Param-Liste/Trade-Liste),
   ebenfalls aus der „Störenfriede im Wrapper"-Regel ausgenommen. */
/* chart_I.css V166.0 — Overlay-Bugfix: #pt-profit-overlay aus der „Störenfriede im Wrapper"-Regel ausgenommen
   (sonst width/height:0). + Bot-Historie-Tab (geschlossene Bots). */
/* chart_I.css V165.0 — Bots-Tab: Details-Button (.pt-bots-detbtn) + Profit-Equity-Overlay über dem Chart
   (#pt-profit-overlay / .pt-po-head / .pt-po-chart / .pt-po-close). */
/* chart_I.css V164.0 — Scout-Breakdown-Unterzeile: links Laufzeit (.sc-rt), rechts L/S-Trades (.sc-bd);
   .sc-head-sub jetzt Flex-Row (space-between). */
/* chart_I.css V163.0 — Scout-Zeile: Kopf in obere Spalten-Reihe (.sc-head-top Grid) + volle Breakdown-Unterzeile
   (.sc-head-sub); .sc-head jetzt Flex-Spalte. Resume-Icon grün (.sc-resume). */
/* chart_I.css V162.0 — Eingeklappte Scout-Zeile als rechtsbündige Spalten (.sc-head Grid, .sc-status/.sc-icon/
   .sc-mini*/.sc-pl*/.sc-name-line) + Pause-Toggle (.sc-pause/.sc-icon-btn) + Bottom-Dock-Status-Punkt (.pt-bots-status). */
/* chart_I.css V161.0 — Scout-Karten als Akkordeon (.sc-head klickbar, .sc-chip/.sc-dot/.sc-profit/.sc-chev,
   .sc-body/.sc-subhead/.sc-divider/.sc-meta) + Bottom-Dock Bots-Tab als Spalten-Tabelle (.pt-bots-table). */
/* chart_I.css V160.0
/* chart_I.css V159.0
/* chart_I.css V158.0 — Mess-/Lineal-Panel auf 420px verbreitert (≈ Modal-Breite), damit das Farbrad-Popover INNERHALB des Panels bleibt. */
/* chart_I.css V157.0 — Mess-/Lineal-Panel: Farb-Trigger-Reihe (.mp-color-row) für das Farbrad-Popover. */
/* chart_I.css V156.0 — Mess-Panel: verschiebbarer Kopf + Fuß-Buttons (.mp-footer/.mp-fbtn Reset/Abbrechen/Speichern). */
/* chart_I.css V155.0 — Lineal-Tooltip (.measure-tooltip + .measure-row/.measure-val/.val-up/.val-down) als dunkle Box gestylt (Ruler-Tool). */
/* chart_I.css V154.0 — Messwerkzeug (Preis & Zeit): Info-Box (.measure-infobox) + Einstellungs-Panel (.measure-panel + .mp-*) im TerminalV01-Stil. */
/* chart_I.css V153.0 — Indikator zuklappen: dünner Label-Streifen (.ind-pane-collapsed/.ipcb-name) unten an der Zeitskala; Maximieren-Button erbt .ipc-btn. */
/* chart_I.css V152.0 — Indikator-Pane-Kontrollen: Hover-Panel (.ind-pane-ctrl + .ipc-name/.ipc-btn) links im Pane + Greif-Resize-Linie (.ind-pane-resize, row-resize). */
/* chart_I.css V151.0 — OHLC-Overlay im TerminalV01-Stil: zweizeilige, mit Hintergrund abgesetzte Box (.chart-overlay als Spalte, .overlay-line1/.overlay-line2), Börsen-Badge (.overlay-src.mexc/.binance). */
/* chart_I.css V150.0 — TP/SL-Editor-Politur: aktive Quick-%-Buttons blau (.pt-quick5 .pt-quick-btn.active), Per-Stufe-Auflösungszeile (.pt-tl-res), aktiver Teilgewinne-Toggle (.pt-tl-add.open). */
/* chart_I.css V149.0 — Linien-Schalter (Auge .pt-line-toggle) in der Positionen-Tabelle. */
/* chart_I.css V148.0 — Phase 2.6b: Chart-Linien Stufe B — Greif-Handle (.pl-grip) für ziehbare TP/SL-Linien. */
/* chart_I.css V147.0 — Phase 2.5: Historie gruppiert je Position — aufklappbare Sammelzeile (.pt-hist-group/.pt-hist-chev) + Detailzeilen (.pt-hist-detail/.pt-hist-sub), Trade-ID-Spalte. */
/* chart_I.css V146.0 — Phase 2.4b: sichtbare Paper-Trading-Toasts (.pt-toast warning/error/success) statt unsichtbarer Logs. */
/* chart_I.css V145.0 — Phase 2.4: ausklappbarer TP/SL-Block im Order-Formular (.pt-tpsl-toggle/.pt-tpsl-host), Prozent-Slider auch unter .pt-form gescoped (Full-Width im Formular), Break-Even-Schalter (.pt-be-row) + „BE"-Marker (.pt-be-badge) in der Positionstabelle, TP/SL-Hint (.pt-tpe-hint). */
/* chart_I.css V144.0 — Phase 2.3b: Prozent-Slider im TP/SL-Modal unter .pt-modal-body gescoped (2 Klassen) → schlägt die globale input[type=range]{width:100px}-Altregel per Spezifität → volle Panel-Breite (wie der Leverage-Slider). */
/* chart_I.css V143.0 — Phase 2.3: TP/SL-Modal — %-Umschalter (.pt-mini-seg), 5er-Prozent-Grid (.pt-quick5), Prozent-Slider (.pt-pct-slider, Klon des Leverage-Sliders), Live-Aufloesungszeile (.pt-res-line) und Teilgewinn-Stufen (.pt-tl-*). */
/* chart_I.css V142.0 — Phase 2.2c: TP/SL- + Marge-/Investition-Modal-Inputs (.pt-modal-body .pt-input-wrap input) auf die gleiche scoped Full-Width-Regel gezogen wie die .pt-form-Felder → schlagen die globalen input[type=number]{width:50px}-Altregeln per Spezifitaet (Modal-Felder volle Breite) */
/* chart_I.css V141.0 — Phase 2.2b: Trading-Inputs + Leverage-Slider unter .pt-form gescoped, damit sie die globalen input[type=number]{width:50px}/input[type=range]{width:100px}-Altregeln per Spezifitaet schlagen (volle Panel-Breite) */

/* --- SCROLLBAR DESIGN --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #434651; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5d6375; }
* { scrollbar-width: thin; scrollbar-color: #434651 transparent; }

/* FIX: Hintergrund sitzt fest, wiederholt sich nicht */
body { 
    background: linear-gradient(180deg, #2962ff 0%, #131722 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #d1d4dc; 
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex; flex-direction: column; height: 100vh; overflow: hidden; 
}

/* =========================================
   NAVBAR DESIGN
   ========================================= */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    background-color: #1e222d; /* Solide Farbe, hebt sich ab */
    padding: 0 15px; height: 60px;
    color: #d1d4dc; border-bottom: 1px solid #2a2e39;
    position: relative; z-index: 10000; overflow: visible !important;
    flex-shrink: 0;
}
.nav-section { display: flex; align-items: center; gap: 10px; }

/* --- SUCHE --- */
.search-container { position: relative; width: 110px; }
#coin-input {
    width: 100%; padding: 6px 10px; background-color: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc;
    border-radius: 4px; font-size: 13px; font-weight: bold; outline: none;
    transition: border 0.2s; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
#coin-list {
    position: absolute; top: 100%; left: 0; right: 0; background-color: #2a2e39;
    border: 1px solid #2962ff; border-top: none; max-height: 400px; overflow-y: auto; z-index: 9999;
    display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.5); border-radius: 0 0 4px 4px;
}
.coin-item { padding: 10px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #363c4e; display: flex; justify-content: space-between; }
.coin-item:hover { background-color: #2962ff; color: white; }
.coin-item span.symbol { font-weight: bold; }
.coin-item span.desc { color: #787b86; font-size: 11px; }

/* --- TOOLS --- */
.time-selector { display: flex; gap: 2px; }
.time-btn {
    background: transparent; border: none; color: #787b86; cursor: pointer;
    padding: 6px 8px; font-size: 13px; font-weight: 600; border-radius: 4px;
}
.time-btn:hover, .time-btn.active { color: #d1d4dc; background-color: #2a2e39; }
.separator { width: 1px; height: 20px; background-color: #2a2e39; margin: 0 5px; }
.icon-btn {
    background: transparent; border: none; color: #787b86; cursor: pointer;
    padding: 8px; font-size: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: #2962ff; background-color: #2a2e39; }

/* --- RECHTE SEITE --- */
.live-price-box { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-left: 10px; }
.price-label { font-size: 9px; color: #00b894; font-weight: bold; letter-spacing: 0.5px; }
#header-price { font-family: 'Monaco', monospace; font-size: 16px; font-weight: bold; color: #d1d4dc; white-space: nowrap; }
.text-up { color: #089981 !important; } .text-down { color: #f23645 !important; }

/* --- DROPDOWNS --- */
.dropdown { position: relative; }
.dropdown-content {
    display: none; position: absolute; top: 100%; left: 0; background-color: #2a2e39;
    min-width: 140px; box-shadow: 0 8px 16px rgba(0,0,0,0.5); 
    border: 1px solid #363c4e; border-radius: 4px; margin-top: 5px;
    z-index: 99999 !important; 
}
.dropdown.show .dropdown-content { display: block; }
.dropdown-group-label { padding: 8px 12px; font-size: 10px; color: #787b86; text-transform: uppercase; font-weight: bold; border-bottom: 1px solid #363c4e; }
.dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 13px; color: #d1d4dc; border-bottom: 1px solid #363c4e; display: block; }
.dropdown-item:hover { background-color: #2962ff; color: white; }
.dropdown-item.active { color: #2962ff; font-weight: bold; background-color: rgba(41,98,255,0.05); }
.scrollable-menu { max-height: 300px; overflow-y: auto; }
.indi-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #363c4e; padding-right: 8px; }
.indi-text { flex-grow: 1; padding: 8px 12px; cursor: pointer; }
.indi-text:hover { background-color: #2962ff; color: white; }
.indi-text.active { color: #2962ff !important; font-weight: bold; }
.indi-actions { display: flex; gap: 2px; }
.indi-btn { cursor: pointer; padding: 4px 6px; color: #787b86; font-size: 12px; border-radius: 3px; }
.indi-btn:hover { background-color: #2a2e39; color: #d1d4dc; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .navbar { height: auto; flex-wrap: wrap; padding: 10px; gap: 10px 0; }
    .search-area { order: 1; flex: 0 0 auto; }
    .search-container { width: 105px !important; }
    .right-actions { order: 2; flex: 1; justify-content: flex-end; }
    .price-label { display: none; }
    #header-price { font-size: 15px; }
    .tools-area { order: 3; width: 100%; border-top: 1px solid #2a2e39; padding-top: 8px; margin-top: 2px; justify-content: space-between; }
    .time-btn, .icon-btn { min-height: 44px; min-width: 44px; font-size: 15px; display: flex; align-items: center; justify-content: center; }
}

/* =========================================
   LAYOUT STRUKTUR (TRANSPARENT FIX)
   ========================================= */
.main-content {
    display: flex;
    flex-grow: 1;
    height: calc(100vh - 60px); 
    overflow: hidden;
    background-color: transparent; /* WICHTIG: Damit der Verlauf sichtbar ist */
}

/* --- DRAWING TOOLBAR (LINKS) --- */
.drawing-toolbar {
    width: 50px;
    min-width: 50px;
    background-color: #1e222d;
    border-right: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    z-index: 900;
}

.tool-btn {
    width: 34px; height: 34px; margin-bottom: 6px;
    display: flex; justify-content: center; align-items: center;
    color: #b2b5be; cursor: pointer; border-radius: 4px; transition: all 0.1s;
}
.tool-btn:hover { color: #d1d4dc; background-color: #2a2e39; }
.tool-btn.active { color: #2962ff; background-color: rgba(41, 98, 255, 0.1); }
/* V175: Vor/Zurück (History-Navigation) — dezenter als die Werkzeuge, blauer Hover-Akzent */
.tool-btn-histnav { color: #787b86; }
.tool-btn-histnav i { font-size: 15px; }
.tool-btn-histnav:hover { color: #2962ff; background-color: rgba(41, 98, 255, 0.12); }
.tool-separator { width: 20px; height: 1px; background-color: #2a2e39; margin: 5px 0; }

/* --- CHART WRAPPER (FIXED) --- */
/* Phase 2: Chart + Bottom-Dock stapeln sich vertikal in #chart-area */
#chart-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background-color: transparent;
}

#chart-wrapper {
    flex-grow: 1;
    width: 100%;
    min-width: 0;   /* Schritt 5 V2: erlaubt Flex-Shrink wenn das Watchlist-Panel andockt (sonst Overflow/Clipping) */
    min-height: 0;  /* Phase 2: erlaubt Shrink wenn der Bottom-Dock andockt */
    position: relative;
    z-index: 1;
    background-color: transparent; /* WICHTIG: Transparent */
    display: block;
}

#chart-container { width: 100%; height: 100%; }

/* =========================================
   PHASE 2 — TRADING-FORMULAR + BOTTOM-DOCK
   ========================================= */
#bottom-dock {
    flex-shrink: 0;
    height: 200px;
    background-color: #1e222d;
    border-top: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 49;
    position: relative;
    transition: height 0.18s ease;
}
/* Drag-Handle am oberen Rand: Hover/Drag -> blaue Linie, ns-resize */
.pt-dock-resize { position: absolute; top: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 60; }
.pt-dock-resize::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; transition: background 0.12s; }
.pt-dock-resize:hover::before, .pt-dock-resize.dragging::before { background: #2962ff; }

/* --- Trading-Formular (im rechten Panel) --- */
.pt-form { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; scrollbar-width: none; -ms-overflow-style: none; }
.pt-form::-webkit-scrollbar { display: none; }
.pt-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pt-dir-btn { padding: 10px; border: none; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; background: #2a2e39; color: #787b86; }
.pt-dir-btn.long.active { background: #089981; color: #fff; }
.pt-dir-btn.short.active { background: #f23645; color: #fff; }
.pt-seg-label { font-size: 10px; color: #787b86; text-transform: uppercase; letter-spacing: 0.3px; margin: 10px 0 5px; }
.pt-lev-label { display: flex; justify-content: space-between; align-items: center; }   /* 20× rechtsbündig */
.pt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(0,0,0,0.2); border: 1px solid #363c4e; border-radius: 6px; padding: 2px; }
.pt-seg-btn { padding: 6px; border: none; background: transparent; color: #787b86; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 4px; }
.pt-seg-btn.active { background: #2a2e39; color: #d1d4dc; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
/* V181: Symbol-Picker im Hebel-Panel — Feld-Optik lebt INLINE in watchlist.php V10.0
   (immun gegen CSS-Datei-Stand); hier nur die Flyout-Position ans Feld gebunden. */
#pt-symbol-wrap .wl-add-list { left: 0; right: 0; top: calc(100% + 2px); }
.pt-input-wrap { position: relative; display: block; width: 100%; }
.pt-form .pt-input-wrap input,
.pt-modal-body .pt-input-wrap input { display: block; width: 100%; min-width: 0; box-sizing: border-box; text-align: left; background: #131722; border: 1px solid #363c4e; border-radius: 6px; color: #d1d4dc; font-size: 13px; padding: 8px 44px 8px 10px; outline: none; }
.pt-input-wrap input:focus { border-color: #2962ff; }
/* keine weissen Spinner-Pfeile auf den Zahlenfeldern */
.pt-input-wrap input[type=number]::-webkit-outer-spin-button,
.pt-input-wrap input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-input-wrap input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pt-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #787b86; font-weight: 600; }
.pt-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 6px; }
#pt-qlevs { grid-template-columns: repeat(5,1fr); }
.pt-quick-btn { padding: 5px 0; font-size: 11px; background: rgba(255,255,255,0.03); border: 1px solid #363c4e; border-radius: 4px; color: #b2b5be; cursor: pointer; }
.pt-quick-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* aktive Schnellwahl im TP/SL-Editor (geklickter %-Button blau) — gescoped auf .pt-quick5, nicht auf Größe/Hebel */
.pt-quick5 .pt-quick-btn.active { background: rgba(41,98,255,0.18); border-color: #2962ff; color: #5b8dff; font-weight: 600; }
.pt-lev-val { color: #2962ff; font-weight: 700; }
/* Leverage-Slider wie TerminalV01: blau gefüllter Track (links) + blauer Thumb */
.pt-form .pt-lev-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #2a2e39; outline: none; margin: 10px 0; cursor: pointer; }
.pt-form .pt-lev-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-form .pt-lev-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #2962ff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); margin-top: -5px; }
.pt-form .pt-lev-slider::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #2962ff; cursor: pointer; }
.pt-form .pt-lev-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-form .pt-lev-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: #2962ff; }
.pt-summary { background: rgba(0,0,0,0.2); border: 1px solid #363c4e; border-radius: 8px; padding: 10px 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 7px; }
.pt-sum-row { display: flex; justify-content: space-between; font-size: 12px; color: #b2b5be; }
.pt-sum-row span:last-child { font-weight: 600; color: #d1d4dc; }
.pt-green { color: #089981 !important; } .pt-red { color: #f23645 !important; } .pt-orange { color: #f0b90b !important; }
.pt-submit { width: 100%; padding: 12px; border: none; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; color: #fff; }
.pt-submit.long { background: #089981; } .pt-submit.long:hover { background: #0aa888; }
.pt-submit.short { background: #f23645; } .pt-submit.short:hover { background: #ff4757; }

/* --- Dock-Kopf (Dashboard + Tabs) --- */
/* V171 (Dock V8.0): Kopf = 3 Zeilen (Trading-Konto / Tabs / Bot-Konto) ODER eingeklappter Kompakt-Streifen */
.pt-dock-head { display: flex; flex-direction: column; padding: 0 14px; border-bottom: 1px solid #2a2e39; flex-shrink: 0; }
.pt-dock-head::-webkit-scrollbar { display: none; }
.pt-head-row { display: flex; align-items: center; gap: 14px; height: 34px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.pt-head-row::-webkit-scrollbar { display: none; }
.pt-head-row + .pt-head-row { border-top: 1px dashed rgba(54, 60, 78, 0.5); }
.pt-row-cap { font-size: 9px; letter-spacing: .6px; color: #787b86; font-weight: 700; white-space: nowrap; flex-shrink: 0; width: 96px; }
.pt-row-spacer { flex: 1; }
#bottom-dock.head-collapsed .pt-dock-head { display: none; }
.pt-dock-strip { display: none; align-items: center; gap: 8px; height: 24px; padding: 0 14px; border-bottom: 1px solid #2a2e39; cursor: pointer; font-size: 11px; color: #787b86; white-space: nowrap; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.pt-dock-strip::-webkit-scrollbar { display: none; }
#bottom-dock.head-collapsed .pt-dock-strip { display: flex; }
.pt-dock-strip:hover { background: rgba(41, 98, 255, 0.06); }
.pt-strip-seg b { color: #d1d4dc; font-weight: 700; }
.pt-strip-pnl { font-weight: 600; }
.pt-strip-sep { color: #363c4e; }
.pt-strip-chev { font-size: 10px; color: #787b86; }
.pt-dash { display: flex; gap: 20px; flex-shrink: 0; }
.pt-dash-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pt-dash-lbl { font-size: 10px; color: #787b86; text-transform: uppercase; font-weight: 600; }
.pt-dash-val { font-size: 13px; font-weight: 700; color: #d1d4dc; }
.pt-tabs { display: flex; align-items: center; height: 100%; flex: 1; min-width: 0; }
.pt-tabs-spacer { flex: 1; }
.pt-tab { padding: 0 14px; height: 100%; background: transparent; border: none; border-bottom: 2px solid transparent; color: #787b86; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pt-tab:hover { color: #d1d4dc; }
.pt-tab.active { color: #2962ff; border-bottom-color: #2962ff; }
.pt-badge { background: #2a2e39; color: #787b86; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.pt-tab.active .pt-badge { background: rgba(41,98,255,0.15); color: #2962ff; }
.pt-head-btn { background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.pt-head-btn:hover { background: #363c4e; }
.pt-head-btn.primary { background: #2962ff; border-color: #2962ff; color: #fff; }
.pt-dock-body { flex: 1; overflow: auto; }
.pt-tab-content { display: none; }
.pt-tab-content.active { display: block; }

/* --- Dock-Tabellen --- */
.pt-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pt-table th { position: sticky; top: 0; background: #1a1e28; color: #787b86; font-size: 10px; font-weight: 600; text-transform: uppercase; text-align: left; padding: 8px 12px; border-bottom: 1px solid #2a2e39; white-space: nowrap; z-index: 1; }
.pt-table th.r, .pt-table td.r { text-align: right; }
.pt-table th.c, .pt-table td.c { text-align: center; }
.pt-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: #d1d4dc; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-table tr:hover td { background: rgba(255,255,255,0.02); }
.pt-table td.pt-b { font-weight: 700; }
.pt-empty { text-align: center; color: #787b86; padding: 24px; font-size: 12px; }
.pt-edit { color: #2962ff; cursor: pointer; margin-left: 6px; font-size: 11px; }
.pt-edit:hover { color: #5b8dff; }
.pt-act-btn { background: rgba(242,54,69,0.1); color: #f23645; border: 1px solid rgba(242,54,69,0.3); padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; }
.pt-act-btn:hover { background: #f23645; color: #fff; }
.pt-xbadge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.pt-xbadge.man { background: rgba(144,164,174,0.12); color: #b0bec5; }
.pt-xbadge.liq { background: rgba(242,54,69,0.15); color: #ff5252; }
.pt-xbadge.tp { background: rgba(8,153,129,0.15); color: #089981; }
.pt-xbadge.sl { background: rgba(242,54,69,0.15); color: #f23645; }
/* TP/SL-Zelle in der Positionen-Tabelle */
.pt-tpsl { font-size: 10px; white-space: nowrap; }
.pt-muted { color: #5d6375; }

/* --- Logs + Bots-Tab --- */
.pt-logs-head { padding: 6px 12px; }
.pt-logs { font-family: 'Courier New', monospace; font-size: 11px; padding: 4px 12px; }
.pt-log { display: flex; gap: 10px; padding: 2px 0; }
.pt-log-t { color: #787b86; }
.pt-log-m.info { color: #b2b5be; } .pt-log-m.success { color: #089981; } .pt-log-m.warning { color: #f0b90b; } .pt-log-m.error { color: #f23645; }
.pt-bots-toolbar { padding: 8px 12px; }
.pt-bots-list { padding: 0 12px; }
.pt-bot-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; }
.pt-bot-row:hover { background: rgba(255,255,255,0.02); }
.pt-bot-sym { display: flex; align-items: center; font-weight: 600; font-size: 12px; color: #d1d4dc; }
.pt-bot-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border: 1px solid; border-radius: 4px; }
.pt-bot-inv { font-size: 11px; color: #b2b5be; }

/* --- Adjust-Modals --- */
.pt-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.pt-modal-box { background: #1e222d; border: 1px solid #363c4e; border-radius: 8px; width: 340px; max-width: 92vw; box-shadow: 0 15px 40px rgba(0,0,0,0.7); }
.pt-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #363c4e; background: #2a2e39; border-radius: 8px 8px 0 0; color: #d1d4dc; font-weight: 700; font-size: 13px; }
.pt-modal-head i { cursor: pointer; color: #787b86; }
.pt-modal-head i:hover { color: #f23645; }
.pt-modal-body { padding: 16px; }
.pt-modal-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(0,0,0,0.2); border: 1px solid #363c4e; border-radius: 6px; padding: 2px; margin-bottom: 10px; }
.pt-modal-row { display: flex; justify-content: space-between; font-size: 12px; color: #b2b5be; padding: 6px 0; }
.pt-modal-row span:last-child { font-weight: 600; color: #d1d4dc; }
.pt-modal-body .pt-submit { margin-top: 10px; }

/* --- TP/SL-Modal V2.3: %-Umschalter, Prozent-Slider, Teilgewinne --- */
.pt-mini-seg { margin-bottom: 6px; }
.pt-quick5 { grid-template-columns: repeat(5,1fr); }
.pt-res-line { font-size: 11px; color: #b2b5be; min-height: 15px; margin: 5px 0 2px; }
.pt-res-line b { color: #d1d4dc; }
/* Prozent-Slider: 1:1-Klon des Leverage-Sliders (Fill per inline linear-gradient + moz-progress).
   Unter .pt-modal-body gescoped (2 Klassen) → schlägt die globale input[type=range]{width:100px}-Altregel
   per Spezifität → volle Panel-Breite (gleiche Logik wie der .pt-form-Leverage-Slider). */
.pt-modal-body .pt-pct-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #2a2e39; outline: none; margin: 8px 0 2px; cursor: pointer; }
.pt-modal-body .pt-pct-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-modal-body .pt-pct-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #2962ff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); margin-top: -5px; }
.pt-modal-body .pt-pct-slider::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #2962ff; cursor: pointer; }
.pt-modal-body .pt-pct-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-modal-body .pt-pct-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: #2962ff; }
/* „+ Teilgewinne"-Aufklapp-Button + Stufen-Liste */
.pt-tl-add { width: 100%; margin: 10px 0 4px; padding: 8px; background: rgba(41,98,255,0.1); border: 1px dashed #2962ff; color: #5b8dff; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pt-tl-add:hover { background: rgba(41,98,255,0.18); }
.pt-tl-add.open { background: rgba(41,98,255,0.18); color: #d1d4dc; }
.pt-tl-wrap { border-top: 1px solid #2a2e39; margin-top: 4px; padding-top: 8px; }
.pt-tl-row { display: grid; grid-template-columns: 1fr 86px 28px; gap: 6px 6px; align-items: center; margin-bottom: 6px; }
.pt-tl-row .pt-input-wrap input { padding-right: 40px; }
.pt-tl-res { margin: 2px 0 4px; }
.pt-tl-del { background: rgba(242,54,69,0.1); color: #f23645; border: 1px solid rgba(242,54,69,0.3); border-radius: 6px; height: 35px; cursor: pointer; font-size: 17px; line-height: 1; }
.pt-tl-del:hover { background: #f23645; color: #fff; }
.pt-tl-addrow { width: 100%; padding: 6px; background: rgba(255,255,255,0.03); border: 1px solid #363c4e; border-radius: 6px; color: #b2b5be; font-size: 12px; font-weight: 600; cursor: pointer; }
.pt-tl-addrow:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pt-tl-sum { font-size: 11px; color: #787b86; text-align: right; margin: 6px 0 2px; }
.pt-tl-sum.over { color: #f23645; font-weight: 700; }

/* Phase 2.4 — TP/SL-Block direkt im Order-Formular (gleicher Editor wie das Modal) */
/* Prozent-Slider auch unter .pt-form full-width (Editor liegt im #pt-tpsl-host innerhalb .pt-form) */
.pt-form .pt-pct-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #2a2e39; outline: none; margin: 8px 0 2px; cursor: pointer; }
.pt-form .pt-pct-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-form .pt-pct-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #2962ff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); margin-top: -5px; }
.pt-form .pt-pct-slider::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #2962ff; cursor: pointer; }
.pt-form .pt-pct-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #2a2e39; }
.pt-form .pt-pct-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: #2962ff; }
/* Aufklapp-Schalter „+ TP / SL (optional)" */
.pt-tpsl-toggle { width: 100%; margin: 12px 0 4px; padding: 8px; background: rgba(41,98,255,0.1); border: 1px dashed #2962ff; color: #5b8dff; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pt-tpsl-toggle:hover { background: rgba(41,98,255,0.18); }
.pt-tpsl-toggle.open { background: rgba(41,98,255,0.18); color: #d1d4dc; }
.pt-tpsl-host { border-top: 1px solid #2a2e39; margin-top: 4px; padding-top: 8px; }
/* TP/SL-Hint (über/unter dem Einstieg) */
.pt-tpe-hint { font-weight: 400; color: #787b86; font-size: 11px; }
/* Break-Even-Schalter im Teilgewinn-Block */
.pt-be-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: #b2b5be; cursor: pointer; }
.pt-be-row input { width: 14px; height: 14px; accent-color: #2962ff; cursor: pointer; }
/* „BE"-Marker in der TP/SL-Spalte der Positionstabelle */
.pt-be-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(41,98,255,0.15); color: #5b8dff; border: 1px solid rgba(41,98,255,0.4); }

/* Phase 2.4b — sichtbare Toast-Meldungen (Warnung/Fehler/Erfolg) */
.pt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 100000; max-width: 440px; padding: 11px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; background: #2a2e39; box-shadow: 0 6px 22px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pt-toast.warning { background: #c9971c; }
.pt-toast.error { background: #d32f2f; }
.pt-toast.success { background: #0f9d70; }

/* Phase 2.5 — Historie: aufklappbare Sammelzeile je Position */
.pt-hist-group { cursor: pointer; }
.pt-hist-group:hover { background: rgba(255,255,255,0.04); }
.pt-hist-group.open { background: rgba(41,98,255,0.07); }
.pt-hist-chev { display: inline-block; width: 12px; color: #787b86; font-size: 10px; }
.pt-hist-group.open .pt-hist-chev { color: #5b8dff; }
.pt-hist-detail { display: none; background: rgba(0,0,0,0.18); }
.pt-hist-detail.show { display: table-row; }
.pt-hist-sub { color: #b2b5be; padding-left: 14px; }

/* Phase 2.6b — Greif-Handle für ziehbare TP/SL-Chart-Linien (folgt der Linie beim Hover/Ziehen) */
.pl-grip { position: fixed; display: none; align-items: center; justify-content: center; width: 20px; height: 18px; margin-top: -9px; border-radius: 5px; background: #2962ff; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 1px 5px rgba(0,0,0,0.55); pointer-events: none; z-index: 99990; }

/* Linien-Schalter (Auge) in der Positionen-Tabelle: an = blau, aus = ausgegraut */
.pt-line-toggle { cursor: pointer; color: #5b8dff; font-size: 13px; }
.pt-line-toggle:hover { color: #d1d4dc; }
.pt-line-toggle.off { color: #5d6375; }

/* =========================================
   RECHTE PANELS + ICON-LEISTE — Phase 1 (TerminalV01-Vorbild)
   ========================================= */
.right-panels {
    width: 315px;   /* V182: ~5 % breiter (Roccos Wunsch 12.07.) */
    min-width: 315px;
    flex-shrink: 0;
    background-color: #1e222d;
    border-left: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 50;
    transition: width 0.25s ease, min-width 0.25s ease;
}
.right-panels.collapsed { width: 0; min-width: 0; border-left: none; }

/* Nur das aktive Panel ist sichtbar (display via RightRail); fuellt die Container-Hoehe */
.sidebar-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* Icon-Leiste ganz rechts (48px) */
.right-icon-bar {
    width: 48px; min-width: 48px; flex-shrink: 0;
    background-color: #1e222d; border-left: 1px solid #2a2e39;
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 0; gap: 8px; z-index: 50;
}
.right-tool-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 15px; color: #787b86; cursor: pointer;
    background: transparent; border: none; transition: all 0.15s ease;
}
.right-tool-btn:hover { background: rgba(255,255,255,0.05); color: #d1d4dc; }
.right-tool-btn.active { background: rgba(41,98,255,0.15); color: #2962ff; }

/* Coin-Icon (farbiger Kreis + Buchstabe), generiert von CoinIcon */
.coin-icon {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff; margin-right: 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Quellen-Tabs (NUR Layout; Farben/.active aus nav.php .source-switch-btn) */
.wl-tabs { display: flex; border-bottom: 1px solid #2a2e39; flex-shrink: 0; }
.wl-tabs .source-switch-btn { flex: 1; text-align: center; padding: 9px 0; font-size: 11px; }

/* "+ Coin"-Suche */
.wl-add-wrap { position: relative; padding: 8px 10px; border-bottom: 1px solid #2a2e39; flex-shrink: 0; }
.wl-add-wrap input {
    width: 100%; box-sizing: border-box; background: #131722; border: 1px solid #363c4e;
    border-radius: 4px; color: #d1d4dc; font-size: 12px; padding: 6px 8px; outline: none;
}
.wl-add-wrap input:focus { border-color: #2962ff; }
.wl-add-list {
    display: none; position: absolute; left: 10px; right: 10px; top: 42px; z-index: 60;
    background: #1e222d; border: 1px solid #363c4e; border-radius: 4px; max-height: 320px;
    overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    scrollbar-width: none; -ms-overflow-style: none;          /* Scrollbar versteckt (TerminalV01-Look) */
}
.wl-add-list::-webkit-scrollbar { display: none; }
.wl-add-item {
    display: flex; align-items: center;
    padding: 7px 10px; font-size: 12px; color: #d1d4dc; cursor: pointer; border-bottom: 1px solid #2a2e39;
}
.wl-add-item:last-child { border-bottom: none; }
.wl-add-item:hover { background: rgba(41,98,255,0.12); }
.wl-add-item.wl-add-empty { color: #787b86; cursor: default; justify-content: center; }
.wl-add-item .wl-add-sym { font-weight: 600; }
.wl-add-item .wl-add-q { color: #787b86; font-size: 10px; margin-left: auto; }

/* Tabellen-Kopf + Zeilen (Grid: Symbol | Preis | ÄND | ÄND% | ×) */
.wl-header, .watchlist-item {
    display: grid;
    grid-template-columns: 1fr 64px 54px 46px 16px;
    gap: 4px;
    align-items: center;
}
.wl-header {
    padding: 8px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: #787b86; border-bottom: 1px solid #2a2e39; letter-spacing: 0.3px; flex-shrink: 0;
}
.wl-header .wl-h-price, .wl-header .wl-h-net, .wl-header .wl-h-chg { text-align: right; }

.watchlist-list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.watchlist-list::-webkit-scrollbar { display: none; }

.watchlist-item {
    padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03);
    border-left: 3px solid transparent; user-select: none; transition: background 0.12s;
}
.watchlist-item:hover { background: rgba(255,255,255,0.03); }
.watchlist-item.active { background: rgba(41,98,255,0.08); border-left-color: #2962ff; }

.wl-sym { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: #d1d4dc; white-space: nowrap; overflow: hidden; }
.wl-sym .wl-sym-txt { overflow: hidden; text-overflow: ellipsis; }
.wl-price { font-size: 11px; font-weight: 600; text-align: right; color: #d1d4dc; font-variant-numeric: tabular-nums; }
.wl-net { font-size: 10px; font-weight: 600; text-align: right; color: #787b86; font-variant-numeric: tabular-nums; }
.wl-chg { font-size: 11px; font-weight: 600; text-align: right; color: #787b86; font-variant-numeric: tabular-nums; }
.wl-net.pos, .wl-chg.pos { color: #089981; }
.wl-net.neg, .wl-chg.neg { color: #f23645; }
.wl-remove { text-align: center; color: #4a4e5a; font-size: 14px; cursor: pointer; line-height: 1; }
.watchlist-item:hover .wl-remove { color: #787b86; }
.wl-remove:hover { color: #f23645 !important; }

/* Coin in der aktiven Quelle nicht verfügbar -> ausgegraut */
.watchlist-item.wl-unavailable { opacity: 0.4; }
.watchlist-item.wl-unavailable .wl-chg, .watchlist-item.wl-unavailable .wl-net { color: #787b86; }

/* --- Bots-Panel --- */
.panel-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; font-size: 12px; font-weight: 700; color: #d1d4dc;
    border-bottom: 1px solid #2a2e39; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.3px;
}
/* V186 (Roccos Wunsch 14.07.): $/%-Umschalter neben „Trading Bots" — kompakter Segment-Toggle,
   aktives Segment blau (Zustand aus localStorage, right_panels V27). */
.bots-pct-toggle { display: inline-flex; background: #0f1115; border: 1px solid #363c4e; border-radius: 5px; padding: 1px; cursor: pointer; gap: 1px; }
.bots-pct-toggle .seg { font-size: 10px; font-weight: 700; color: #787b86; padding: 2px 7px; border-radius: 4px; line-height: 1.2; }
.bots-pct-toggle .seg.on { background: #2962ff; color: #fff; }
.bots-pct-toggle:hover { border-color: #2962ff; }

/* V185 (Roccos Wunsch 12.07.): Panel-Button im „Create Bot"-Look des Demo-Bots-Fensters —
   Gradient + Schatten + Hover-Lift (Optik-Quelle: modals_demo_portfolio.php). */
.bots-add-btn {
    background: linear-gradient(135deg, #2962ff, #1e53e5); color: #fff; border: none;
    border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold;
    padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 4px 10px rgba(41,98,255,0.3); transition: all 0.2s ease;
}
.bots-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(41,98,255,0.5); }
.bots-list { flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.bots-list::-webkit-scrollbar { display: none; }
.bots-empty { color: #787b86; font-size: 12px; text-align: center; padding: 24px 16px; line-height: 1.6; }
.bot-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
    padding: 10px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.bot-row:hover { background: rgba(255,255,255,0.03); }
.bot-row-sym { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: #d1d4dc; }
.bot-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border: 1px solid; border-radius: 4px; background: rgba(255,255,255,0.04); }
.bot-invested { font-size: 11px; font-weight: 600; color: #b2b5be; font-variant-numeric: tabular-nums; }

/* --- Scout-Engine-Bot-Karte (right_panels.js V2.0) --- */
.scout-card { border: 1px solid #2a2e39; border-radius: 8px; margin: 8px; background: #161922; overflow: hidden; }
.scout-card .sc-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #1b1f29; border-bottom: 1px solid #2a2e39; }
.scout-card .sc-head-l { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.scout-card .sc-name { font-size: 12px; font-weight: 700; color: #d1d4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-card .sc-run { font-size: 10px; font-weight: 600; color: #089981; white-space: nowrap; }
.scout-card .sc-eye { cursor: pointer; color: #5b8dff; font-size: 12px; flex-shrink: 0; }
.scout-card .sc-eye.off { color: #5d6375; }
.scout-card .sc-eye:hover { color: #7ba4ff; }
.scout-card .sc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; padding: 8px 10px; }
.scout-card .sc-cell { display: flex; flex-direction: column; min-width: 0; }
.scout-card .sc-l { font-size: 9px; text-transform: uppercase; letter-spacing: .3px; color: #6b6f7d; }
.scout-card .sc-v { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-card .sc-logs { padding: 6px 10px; border-top: 1px solid #2a2e39; background: #12151d; max-height: 96px; overflow: auto; scrollbar-width: none; }
.scout-card .sc-logs::-webkit-scrollbar { display: none; }
.scout-card .sc-log { font-size: 10px; color: #9aa0ad; line-height: 1.5; font-family: 'JetBrains Mono', Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-card .sc-log-t { color: #6b6f7d; }
.scout-card .sc-actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #2a2e39; }
.scout-card .sc-btn { flex: 1; background: #262b36; color: #d1d4dc; border: none; border-radius: 5px; padding: 6px 4px; font-size: 11px; cursor: pointer; }
.scout-card .sc-btn:hover { background: #313846; }
.scout-card .sc-btn.sc-stop { color: #f23645; }
.scout-card .sc-btn.sc-stop:hover { background: rgba(242,54,69,.15); }

/* V182 (Roccos Karten-Redesign 12.07.): 3-Zeilen-Kopf — Coin-Avatar links über Z1+Z2 (.sc-avatar),
   Z1 = Auge · Badge · Botname (.sc-name, Breite = längster Name) · LIVE/DEMO · Marge·Hebel · Profit · Pfeil,
   Z2 = ● Läuft · TP-Icon · Laufzeit · Typ-Stats, Z3 = Score-Streifen (nur zugeklappt). */
.scout-card .sc-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scout-card .sc-avatar { flex-shrink: 0; display: flex; align-items: center; }
.scout-card .sc-avatar > * { transform: scale(1.35); transform-origin: center; }
.scout-card .sc-head-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scout-card .sc-row1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scout-card .sc-row1 .sc-name { font-weight: 700; color: #d1d4dc; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
/* V183/V184: DEMO/LIVE-Badge als FESTE Spalte — margin-left:auto rückt sie nach rechts,
   feste Breite + zentrierter Text + feste Profit-Spalte lassen die Badges über alle Karten
   LINKSBÜNDIG exakt untereinander fluchten (Roccos Wunsch V225). */
.scout-card .sc-row1 .sc-mode { margin-left: auto; flex-shrink: 0; width: 46px; text-align: center; box-sizing: border-box; }
.scout-card .sc-row1 .sc-pl-1 { flex-shrink: 0; min-width: 60px; text-align: right; }
.scout-card .sc-row1 .sc-chev { flex-shrink: 0; }
.scout-card .sc-row2 { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #6b6f7d; font-variant-numeric: tabular-nums; min-width: 0; }
.scout-card .sc-row2 .sc-run { font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.scout-card .sc-row2 .sc-bd { margin-left: auto; text-align: right; }

/* V162/V163: Kopf = obere Spalten-Reihe (.sc-head-top) + volle Breakdown-Unterzeile (.sc-head-sub) */
.scout-card .sc-head { cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.scout-card .sc-head-top { display: grid; grid-template-columns: auto auto auto 1fr auto auto; align-items: center; gap: 8px; }
.scout-card .sc-head-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10px; color: #6b6f7d; font-variant-numeric: tabular-nums; }
.scout-card .sc-rt { white-space: nowrap; flex-shrink: 0; }
.scout-card .sc-bd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-card .sc-tpm { flex-shrink: 0; font-size: 10px; margin-right: 4px; }
.scout-card.open .sc-head { background: #20242f; }
.scout-card .sc-head:hover { background: #20242f; }
.scout-card .sc-status { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.scout-card .sc-icon { display: flex; align-items: center; }
.scout-card .sc-mini { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; line-height: 1.25; }
.scout-card .sc-mini-1 { font-size: 12px; font-weight: 700; color: #d1d4dc; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scout-card .sc-mini-2 { font-size: 10px; color: #6b6f7d; white-space: nowrap; }
.scout-card .sc-pl { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.25; flex-shrink: 0; }
.scout-card .sc-pl-1 { font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scout-card .sc-pl-2 { font-size: 10px; color: #6b6f7d; white-space: nowrap; }
.scout-card .sc-chev { color: #6b6f7d; font-size: 11px; flex-shrink: 0; transition: transform .15s ease; }
.scout-card .sc-chev.open { transform: rotate(180deg); }
.scout-card.paused { border-color: #3a3f4d; }
.scout-card .sc-subhead { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }
.scout-card .sc-name-line { font-size: 13px; font-weight: 700; color: #d1d4dc; padding: 2px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout-card .sc-divider { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: #ff7a00; font-weight: 700; padding: 8px 10px 0; }
/* V171: Per-Typ-Akzente der neuen Panel-Karten (AI lila, DCA blau, GRID grün; Scout/Donchian = Default Orange) */
.scout-card.acc-ai .sc-divider { color: #9c27b0; }
.scout-card.acc-dca .sc-divider { color: #2962ff; }
.scout-card.acc-grid .sc-divider { color: #089981; }
.scout-card .sc-meta { font-size: 10px; color: #6b6f7d; padding: 4px 10px 8px; }
/* Aktionen umbrechbar (5 Buttons): Pausieren-Toggle + Bearbeiten/Kopieren/Details + kleiner ■-Beenden */
.scout-card .sc-actions { flex-wrap: wrap; }
.scout-card .sc-btn { min-width: 60px; }
.scout-card .sc-btn.sc-pause { color: #f0a020; }
.scout-card .sc-btn.sc-resume { color: #089981; }
.scout-card .sc-btn.sc-icon-btn { flex: 0 0 auto; min-width: 0; width: 34px; }

/* V161: Bottom-Dock Bots-Tab als Spalten-Tabelle (erbt .pt-table-Stil) */
.pt-bots-table { width: 100%; }
.pt-bots-row { cursor: pointer; }
.pt-bots-row:hover { background: rgba(255,255,255,0.03); }
.pt-bots-table td.pt-bots-sym { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #d1d4dc; }
.pt-bots-table .pt-bots-pct { color: #787b86; font-size: 10px; }
.pt-bots-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pt-bots-detbtn { background: #262b36; color: #d1d4dc; border: 1px solid #363c4e; border-radius: 5px; padding: 4px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.pt-bots-detbtn:hover { background: #313846; color: #fff; }

/* V165: Profit-Equity-Overlay über dem Chart (Zeilen-Klick im Bots-Tab) */
#pt-profit-overlay { position: absolute; inset: 0; z-index: 60; background: #0e1117; display: none; flex-direction: column; }
#pt-profit-overlay .pt-po-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #161922; border-bottom: 1px solid #2a2e39; }
#pt-profit-overlay .pt-po-title { font-size: 13px; font-weight: 700; color: #d1d4dc; }
#pt-profit-overlay .pt-po-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#pt-profit-overlay .pt-po-close { margin-left: auto; background: #262b36; color: #d1d4dc; border: none; border-radius: 6px; width: 30px; height: 28px; font-size: 14px; cursor: pointer; }
#pt-profit-overlay .pt-po-close:hover { background: rgba(242,54,69,.18); color: #f23645; }
#pt-profit-overlay .pt-po-chart { flex: 1; min-height: 0; }
#pt-profit-overlay .pt-po-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #787b86; font-size: 13px; }

/* V169: animiertes Eck-Logo (unten links im Chart) — dezentes Wasserzeichen, beim Chart-Hover heller */
.chart-corner-logo { position: absolute; bottom: 34px; left: 14px; height: 42px; width: auto; opacity: 0.22; transition: opacity 0.2s ease; pointer-events: none; z-index: 12; }
#chart-wrapper:hover .chart-corner-logo { opacity: 0.5; }
.tv-lightweight-charts-logo { display: none !important; }

/* V169: Zeitperioden-Umschalter im Profit-Overlay (Title · Val · [TFs] · X) */
#pt-profit-overlay .pt-po-tfs { margin-left: auto; display: inline-flex; gap: 4px; }
#pt-profit-overlay .pt-po-tf { background: #262b36; color: #9aa0ad; border: none; border-radius: 5px; padding: 4px 8px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; transition: background .15s, color .15s; }
#pt-profit-overlay .pt-po-tf:hover { color: #d1d4dc; }
#pt-profit-overlay .pt-po-tf.active { background: #2962ff; color: #fff; }
#pt-profit-overlay .pt-po-close { margin-left: 8px; }

/* V167: Closed-Bot-Dashboard-Overlay (read-only) */
#pt-bot-dashboard { position: absolute; inset: 0; z-index: 60; background: #0e1117; display: none; flex-direction: column; }
#pt-bot-dashboard .pt-po-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #161922; border-bottom: 1px solid #2a2e39; }
#pt-bot-dashboard .pt-po-title { font-size: 13px; font-weight: 700; color: #d1d4dc; }
#pt-bot-dashboard .pt-po-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#pt-bot-dashboard #pt-cb-copy { margin-left: auto; }
#pt-bot-dashboard .pt-po-close { background: #262b36; color: #d1d4dc; border: none; border-radius: 6px; width: 30px; height: 28px; font-size: 14px; cursor: pointer; }
#pt-bot-dashboard .pt-po-close:hover { background: rgba(242,54,69,.18); color: #f23645; }
#pt-bot-dashboard .pt-cb-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.pt-cb-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pt-cb-kpi { background: #161922; border: 1px solid #2a2e39; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.pt-cb-k { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: #6b6f7d; white-space: nowrap; }
.pt-cb-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #d1d4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-cb-params { background: #161922; border: 1px solid #2a2e39; border-radius: 8px; padding: 10px 12px; }
.pt-cb-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #ff7a00; margin-bottom: 8px; }
.pt-cb-prow { display: inline-flex; justify-content: space-between; gap: 14px; min-width: 220px; padding: 3px 18px 3px 0; font-size: 12px; color: #9aa0ad; }
.pt-cb-prow b { color: #d1d4dc; }
.pt-cb-trades .pt-empty { padding: 16px; }

/* --- Trading-Platzhalter (Phase 2) --- */
.panel-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #787b86; gap: 10px; }
.panel-placeholder i { font-size: 34px; color: #2962ff; opacity: 0.7; }
.panel-placeholder p { margin: 0; font-size: 13px; line-height: 1.5; }
.panel-placeholder .ph-sub { font-size: 12px; color: #5d6375; }
.panel-placeholder .ph-btn { margin-top: 8px; background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 6px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.panel-placeholder .ph-btn:hover { background: #363c4e; color: #fff; }

/* --- OVERLAY & LABEL --- */
.chart-overlay {
    position: absolute; top: 12px; left: 12px; z-index: 20; pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: rgba(22, 27, 34, 0.55); border: 1px solid rgba(255,255,255,0.05);
    padding: 6px 10px; border-radius: 7px; backdrop-filter: blur(2px);
}
.overlay-line1 { display: flex; align-items: center; gap: 8px; }
.overlay-line2 { line-height: 1; }
.overlay-symbol { font-size: 15px; font-weight: bold; color: #d1d4dc; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.overlay-interval { font-size: 12px; font-weight: normal; color: #787b86; background: rgba(42, 46, 57, 0.6); padding: 2px 5px; border-radius: 3px; }
.overlay-src { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 3px; }
.overlay-src.mexc { color: #4d8bff; background: rgba(41, 98, 255, 0.18); }
.overlay-src.binance { color: #f0b90b; background: rgba(240, 185, 11, 0.16); }

/* --- INDIKATOR-PANE-KONTROLLEN (Hover-Panel + Resize-Linie) --- */
.ind-pane-ctrl {
    position: absolute; z-index: 22; display: none; align-items: center; gap: 1px;
    background: rgba(22, 27, 34, 0.92); border: 1px solid #363c4e; border-radius: 6px;
    padding: 2px 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); pointer-events: auto; user-select: none;
}
.ind-pane-ctrl .ipc-name { color: #d1d4dc; font-size: 11px; font-weight: 600; padding: 0 6px 0 4px; white-space: nowrap; }
.ind-pane-ctrl .ipc-btn { width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; color: #b2b5be; cursor: pointer; border-radius: 4px; font-size: 12px; }
.ind-pane-ctrl .ipc-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ind-pane-ctrl .ipc-x:hover { background: rgba(242,54,69,0.18); color: #f23645; }
.ind-pane-resize { position: absolute; left: 0; right: 0; height: 7px; margin-top: -3px; z-index: 21; display: none; cursor: row-resize; }
.ind-pane-resize::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: transparent; transition: background 0.12s, height 0.12s; }
.ind-pane-resize:hover::before, .ind-pane-resize.active::before { background: #2962ff; height: 2px; top: 2px; }
/* Zugeklappter Indikator: dünner Label-Streifen (unten an der Zeitskala) */
.ind-pane-collapsed { position: absolute; left: 0; right: 0; z-index: 21; display: flex; align-items: center; pointer-events: none; background: rgba(22,27,34,0.5); border-top: 1px solid rgba(54,60,78,0.6); box-sizing: border-box; }
.ind-pane-collapsed .ipcb-name { color: #9aa0ab; font-size: 11px; font-weight: 600; padding-left: 10px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/* --- MESSWERKZEUG (Preis & Zeit) --- */
.measure-infobox { position: absolute; z-index: 6; pointer-events: none; background: rgba(22,27,34,0.92); border: 1px solid #363c4e; border-radius: 6px; padding: 5px 9px; box-shadow: 0 3px 8px rgba(0,0,0,0.5); white-space: nowrap; }
.measure-infobox .mi-main { font-size: 12px; font-weight: 700; }
.measure-infobox .mi-sub { font-size: 11px; color: #b2b5be; margin-top: 2px; }
.mi-up { color: #089981; } .mi-down { color: #f23645; }

.measure-panel { position: fixed; left: 78px; top: 70px; width: 420px; max-height: 84vh; overflow-y: auto; background: #1e222d; border: 1px solid #363c4e; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.55); z-index: 9000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.measure-panel .mp-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: #2a2e39; border-bottom: 1px solid #363c4e; border-radius: 8px 8px 0 0; color: #d1d4dc; font-weight: bold; font-size: 13px; letter-spacing: 0.5px; }
.measure-panel .mp-close { cursor: pointer; color: #787b86; transition: color 0.2s; }
.measure-panel .mp-close:hover { color: #f23645; }
.measure-panel .mp-body { padding: 6px 14px 14px; }
.measure-panel .mp-sec { padding: 12px 0; border-bottom: 1px solid #2a2e39; }
.measure-panel .mp-sec:last-of-type { border-bottom: none; }
.measure-panel .mp-title { font-size: 10px; color: #787b86; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.measure-panel .mp-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.measure-panel .mp-title-row .mp-title { margin-bottom: 0; }
.measure-panel .mp-title-row span:last-child { font-size: 11px; color: #b2b5be; }
.measure-panel .mp-coord { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; color: #d1d4dc; }
.measure-panel .mp-coord > span:first-child { color: #787b86; }
.measure-panel .mp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.measure-panel .mp-swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: transform 0.1s; }
.measure-panel .mp-swatch:hover { transform: scale(1.12); }
.measure-panel .mp-swatch.active { border-color: #ffffff; box-shadow: 0 0 6px rgba(255,255,255,0.35); }
.measure-panel .mp-btns { display: flex; gap: 6px; }
.measure-panel .mp-lbtn, .measure-panel .mp-gbtn { flex: 1; height: 34px; background: #2a2e39; border: 1px solid #363c4e; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #787b86; font-size: 12px; font-weight: 600; transition: 0.15s; }
.measure-panel .mp-lbtn:hover, .measure-panel .mp-gbtn:hover { color: #d1d4dc; border-color: #4a5163; }
.measure-panel .mp-lbtn.active, .measure-panel .mp-gbtn.active { background: rgba(41,98,255,0.15); border-color: #2962ff; color: #2962ff; }
.measure-panel .mp-slider { width: 100%; }
.measure-panel .mp-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.measure-panel .mp-pos-btn { height: 30px; background: #2a2e39; border: 1px solid #363c4e; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #787b86; font-size: 14px; transition: 0.15s; }
.measure-panel .mp-pos-btn:hover { color: #d1d4dc; border-color: #4a5163; }
.measure-panel .mp-pos-btn.active { background: rgba(41,98,255,0.18); border-color: #2962ff; color: #2962ff; }
.measure-panel .mp-del { width: 100%; margin-top: 14px; padding: 10px; background: rgba(242,54,69,0.1); border: 1px solid #f23645; color: #f23645; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.15s; }
.measure-panel .mp-del:hover { background: #f23645; color: #fff; }
.measure-panel .mp-footer { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #2a2e39; }
.measure-panel .mp-fbtn { flex: 1; padding: 9px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid #363c4e; background: transparent; color: #d1d4dc; transition: 0.15s; }
.measure-panel .mp-reset { color: #f23645; border-color: #f23645; }
.measure-panel .mp-reset:hover { background: rgba(242,54,69,0.12); }
.measure-panel .mp-cancel:hover { background: #2a2e39; }
.measure-panel .mp-save { background: #2962ff; border-color: #2962ff; color: #fff; }
.measure-panel .mp-save:hover { background: #1e54e0; }
.measure-panel .mp-color-row { display: flex; justify-content: space-between; align-items: center; }
.measure-panel .mp-color-row .mp-title { margin: 0; }

#custom-label {
    position: absolute; right: 0; width: 76px; background-color: #089981; color: white;
    z-index: 1; pointer-events: none; display: none; padding: 4px 0; text-align: center;
    transform: translateY(-50%); box-shadow: -2px 0 4px rgba(0,0,0,0.2); border-radius: 2px 0 0 2px;
}
#lbl-price { display: block; font-size: 12px; font-weight: bold; margin-bottom: 2px; }
#lbl-timer { display: block; font-family: monospace; font-size: 10px; }
.bg-up { background-color: #089981 !important; } .bg-down { background-color: #f23645 !important; }
#loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #787b86; background: rgba(30,34,45,0.9); padding: 15px 30px; border-radius: 8px; z-index: 100; }

/* --- MODAL --- */
#settings-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center;
}
.modal-content {
    background: #1e222d; width: 320px; padding: 20px; border-radius: 6px;
    border: 1px solid #363c4e; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #d1d4dc; font-size: 13px;
}
.modal-header { font-size: 16px; font-weight: bold; margin-bottom: 15px; border-bottom: 1px solid #363c4e; padding-bottom: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.setting-row label { color: #b2b5be; }
input[type="color"] { -webkit-appearance: none; border: none; width: 30px; height: 30px; cursor: pointer; background: none; padding: 0; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #363c4e; border-radius: 4px; }
.modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.btn-modal { padding: 6px 14px; border-radius: 4px; cursor: pointer; border: none; font-weight: bold; font-size: 12px; }
.btn-save { background: #2962ff; color: white; }
.btn-save:hover { background: #1e53e5; }
.btn-cancel { background: #2a2e39; color: #d1d4dc; border: 1px solid #363c4e; }
.btn-cancel:hover { background: #363a45; }
.btn-reset { background: transparent; color: #787b86; margin-right: auto; }
.btn-reset:hover { color: #f23645; }
input[type="range"] { -webkit-appearance: none; background: transparent; width: 100px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #363c4e; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: #2962ff; margin-top: -5px; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
input[type="number"] { background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 4px; padding: 4px; width: 50px; text-align: center; }
.range-value { margin-left: 8px; font-size: 11px; color: #787b86; width: 30px; }
select.modal-select { background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 4px; padding: 4px; outline: none; }

/* =========================================
   MULTI-CHART GRID LAYOUTS
   ========================================= */
.chart-slot { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    border: 1px solid #2a2e39; 
    overflow: hidden; 
    background-color: transparent; /* WICHTIG */
}
.chart-slot.active { border: 1px solid #2962ff; z-index: 10; }

.layout-single { 
    display: grid !important; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}
.layout-double { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; gap: 2px; width:100%; height:100%; }
.layout-triple { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 2px; width:100%; height:100%; }
.layout-quad-row { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; gap: 2px; width:100%; height:100%; }
.layout-triple-mixed { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width:100%; height:100%; }
.layout-triple-mixed .chart-slot:nth-child(3) { grid-column: 1 / span 2; }
.layout-quad-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; width:100%; height:100%; }
.layout-six-grid  { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; width:100%; height:100%; }
/* Extended Grids */
.layout-grid-4x2 { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-5x2 { display: grid !important; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-6x2 { display: grid !important; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-2x3 { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-3x3 { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-4x3 { display: grid !important; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-5x3 { display: grid !important; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width:100%; height:100%; }
.layout-grid-6x3 { display: grid !important; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width:100%; height:100%; }

/* =========================================
   MAXIMIZE BUTTON & LOGIC (Vollbild Fix)
   ========================================= */

.btn-maximize {
    position: absolute; bottom: 35px; right: 65px;
    width: 24px; height: 24px;
    background: rgba(30, 34, 45, 0.6);
    color: #787b86; border-radius: 4px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; 
    /* WICHTIG: Hoher Z-Index, damit er klickbar ist */
    z-index: 500 !important; 
    opacity: 0; 
    transition: opacity 0.2s, background-color 0.2s;
}

/* FIX: Zeige Button, egal wo die Maus im Chart-Feld ist */
.chart-slot:hover .btn-maximize { 
    opacity: 1; 
}

.btn-maximize:hover { background: #2962ff; color: white; }

/* FIX: Das maximierte Fenster darf NICHT transparent sein! */
.chart-slot.maximized {
    position: absolute !important; 
    top: 0; 
    left: 0;
    width: 100% !important; 
    height: 100% !important;
    z-index: 9999 !important; /* Über allem anderen */
    border: none;
    
    /* TRICK: Wir geben ihm den blauen Hintergrund zurück, 
       damit er die anderen Charts verdeckt! */
    background: linear-gradient(180deg, #2962ff 0%, #131722 100%) !important;
    background-size: cover;
    background-attachment: fixed;
}

/* TOAST */
.toast-notification {
    position: fixed; bottom: 20px; right: 20px;
    background-color: #089981; color: white; padding: 12px 24px;
    border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 14px; font-weight: bold; z-index: 10000;
    opacity: 0; transform: translateY(20px); transition: all 0.3s ease-out;
    pointer-events: none; display: flex; align-items: center; gap: 10px;
}
.toast-notification.show { opacity: 1; transform: translateY(0); }

/* Mobile */
@media (max-width: 768px) {
    [class*="layout-"] { display: flex !important; flex-direction: column !important; height: auto !important; overflow-y: auto !important; }
    .chart-slot { min-height: 300px; width: 100% !important; margin-bottom: 5px; }
    #chart-wrapper { overflow-y: auto !important; display: block !important; }
}

/* =========================================
   FIX: BOT HUD & GHOST ELEMENTS (V135.0 - ALLOW DRAG)
   ========================================= */

/* 1. Bot-HUD & Tooltips fest positionieren, DAMIT SIE NICHT BLITZEN */
/* ACHTUNG: Keine harten !important für Top/Left mehr, sonst funktioniert Drag&Drop nicht! */
#bot-stats-hud,
.bot-hud-container,
div[id^="bot-"], 
.mst-panel {
    position: absolute !important;
    z-index: 1000 !important;
    /* top und left weggelassen, das macht JS jetzt dynamisch! */
    width: auto !important;
    height: auto !important;
    background: rgba(30, 34, 45, 0.95);
    border: 1px solid #363c4e;
    border-radius: 4px;
    padding: 10px;
    opacity: 0;
    animation: fadeIn 0.5s forwards 0.5s; 
}

/* Animation, damit es nicht "plopp" macht, sondern sanft kommt */
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Tooltips */
.tv-lightweight-charts-tooltip, 
.floating-tooltip-2,
.measure-tooltip {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: none;
    background: rgba(22,27,34,0.94);
    border: 1px solid #363c4e;
    border-radius: 6px;
    padding: 7px 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    min-width: 150px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.measure-tooltip .measure-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; padding: 1px 0; }
.measure-tooltip .measure-label { color: #787b86; }
.measure-tooltip .measure-val { color: #d1d4dc; font-weight: 600; }
.measure-tooltip .val-up { color: #089981; }
.measure-tooltip .val-down { color: #f23645; }

/* 2. Layout MUSS Grid sein */
.layout-single { 
    display: grid !important; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}

/* 3. Alle Störenfriede im Wrapper unsichtbar machen (Profit-Overlay + Bot-Dashboard ausgenommen!) */
#chart-wrapper > div:not(.chart-slot):not(.chart-container):not(#bot-stats-hud):not(#pt-profit-overlay):not(#pt-bot-dashboard) {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Profile Modal Tabs */
.profile-tab { transition: all 0.2s; }
.profile-tab:hover { background: #2a2e39; color: #d1d4dc !important; }
.profile-tab.active { color: #d1d4dc !important; border-bottom-color: #2962ff !important; }

/* Buttons */
.btn-primary { background: #2962ff; color: white; border: none; border-radius: 4px; cursor: pointer; }
.btn-primary:hover { background: #1e4bd1; }
.btn-secondary { background: #363c4e; color: #d1d4dc; border: none; border-radius: 4px; cursor: pointer; }
.btn-secondary:hover { background: #454d63; }

/* Switch (Not-Aus Schalter Style) */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #f23645; } /* ROT für Killswitch */
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Ampel-Farben für Metriken */
.status-ok { color: #089981 !important; background-color: #089981 !important; }
.status-warn { color: #f0b90b !important; background-color: #f0b90b !important; }
.status-crit { color: #f23645 !important; background-color: #f23645 !important; }

/* --- FOUNDLUX UX FIX: Bot Dropdown Menü öffnet nach rechts --- */
.bot-dropdown-container {
    position: relative !important;
}

.bot-dropdown-menu {
    left: 0 !important;       /* Zwingt das Menü, am linken Rand des Icons zu starten... */
    right: auto !important;   /* ...und sich nach rechts auszubreiten */
    transform: none !important;
}

/* Spezielle Anpassung für sehr kleine Handy-Bildschirme (Hochkant) */
@media screen and (max-width: 480px) {
    .bot-dropdown-menu {
        min-width: 200px !important; /* Sorgt dafür, dass es auf dem Handy nicht zu gequetscht aussieht */
    }
}
/* ==========================================================================
   V171: ZEICHENWERKZEUGE STUFE 1 (Linien-Gruppe) — Flyouts, Mini-Toolbar,
   Style-Popover (lt-Präfix!), Micro-Menüs, Einstellungs-Dialog
   ========================================================================== */

/* --- Flyout-Gruppen in der linken Toolbar --- */
.tool-group-btn { position: relative; }
.tool-flyout-arrow {
    position: absolute; right: 0px; bottom: 0px; font-size: 8px; color: #787b86;
    line-height: 1; transform: rotate(45deg); pointer-events: auto;
}
.tool-group-btn:hover .tool-flyout-arrow { color: #d1d4dc; }
.tool-flyout {
    display: none; position: fixed; min-width: 230px; background: #1e222d;
    border: 1px solid #363c4e; border-radius: 6px; padding: 6px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7); z-index: 20050; cursor: default;
}
.flyout-title {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #787b86;
    text-transform: uppercase; padding: 6px 14px 6px;
}
.tool-flyout-item {
    display: flex; align-items: center; gap: 12px; padding: 7px 14px;
    font-size: 13px; color: #d1d4dc; cursor: pointer; white-space: nowrap;
}
.tool-flyout-item:hover { background: #2a2e39; }
.tool-flyout-item i { width: 16px; text-align: center; color: #b2b5be; font-size: 13px; }
.tool-flyout-item .fly-key { margin-left: auto; font-size: 11px; color: #787b86; }

/* --- Mini-Toolbar-Erweiterung (nur im lt-mode sichtbar) --- */
#drawing-mini-toolbar .lt-only { display: none; }
#drawing-mini-toolbar.lt-mode .lt-only { display: flex; }
.mtb-btn {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #d1d4dc; border-radius: 3px; font-size: 14px;
}
.mtb-btn:hover { background: #2a2e39; }
.mtb-chip {
    width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25);
    box-sizing: border-box; background: #2962ff;
}

/* --- Style-Popover (Fadenkreuz-Design-Muster, lt-Präfix) --- */
#lt-style-popover {
    display: none; position: fixed; width: 236px; background: #131722;
    border: 1px solid #363c4e; border-radius: 8px; padding: 15px; box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8); z-index: 20060;
}
.lt-color-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 6px; }
.lt-swatch {
    width: 100%; aspect-ratio: 1; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05); transition: transform 0.1s; box-sizing: border-box;
}
.lt-swatch:hover { transform: scale(1.1); }
.lt-swatch.active { border: 2px solid #ffffff; transform: scale(1.1); box-shadow: 0 0 5px rgba(255,255,255,0.3); z-index: 2; }
.lt-swatch-custom {
    display: flex; align-items: center; justify-content: center; background: #2a2e39; color: #787b86;
    font-size: 12px; border: 1px dashed #787b86; cursor: pointer; transition: color 0.2s;
    width: 100%; aspect-ratio: 1; border-radius: 4px; box-sizing: border-box;
}
.lt-swatch-custom:hover { color: #d1d4dc; border-color: #d1d4dc; }
#lt-wheel-wrap {
    background: #1e222d; padding: 15px; border-radius: 8px; border: 1px solid #363c4e;
    margin: 10px 0;
}
.lt-wheel-title { font-size: 11px; color: #b2b5be; margin-bottom: 15px; text-align: center; }
.lt-wheel-center { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.lt-ok-btn {
    background: #2962ff; color: white; border: none; border-radius: 4px; padding: 0 12px;
    cursor: pointer; font-weight: bold; font-size: 12px;
}
.lt-sec { margin-top: 10px; }
.lt-op-row { display: flex; justify-content: space-between; font-size: 11px; color: #b2b5be; margin-bottom: 2px; }
.lt-label { font-size: 11px; color: #787b86; margin-bottom: 5px; display: block; }
/* Deckkraft-Slider: Schachbrett + Farbverlauf, Farbe via --lt-thumb-color (Muster: .cross-slider) */
.lt-slider { margin-bottom: 10px; }
.lt-slider::-webkit-slider-runnable-track, .lt-slider::-moz-range-track {
    width: 100%; height: 12px; border-radius: 6px; border: 1px solid #363c4e; cursor: pointer;
    background: linear-gradient(to right, transparent, var(--lt-thumb-color, #2962ff)),
                repeating-conic-gradient(#363c4e 0% 25%, #1e222d 0% 50%) 50% / 10px 10px;
}
.lt-slider::-webkit-slider-thumb, .lt-slider::-moz-range-thumb {
    -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: transparent;
    margin-top: -5px; cursor: pointer; border: 3px solid #ffffff; box-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.lt-btn-group { display: flex; gap: 6px; width: 100%; }
.lt-style-btn {
    flex: 1; height: 34px; background: #2a2e39; border: 1px solid #363c4e; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s;
    color: #787b86; font-size: 13px; font-weight: bold;
}
.lt-style-btn:hover { background: #363c4e; color: #d1d4dc; }
.lt-style-btn.active { background: rgba(41, 98, 255, 0.15); border-color: #2962ff; color: #2962ff; }
/* Text-Modus: nur Farbwahl anzeigen */
#lt-style-popover.lt-pop-textmode .lt-sec-op,
#lt-style-popover.lt-pop-textmode .lt-sec-width,
#lt-style-popover.lt-pop-textmode .lt-sec-style { display: none; }

/* --- Micro-Menü (Stärke/Linienstil/Mehr an der Mini-Toolbar) --- */
#lt-micro-menu {
    display: none; position: fixed; min-width: 150px; background: #1e222d;
    border: 1px solid #363c4e; border-radius: 6px; padding: 6px; z-index: 20060;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}
#lt-micro-menu .lt-btn-group { min-width: 160px; }
.lt-menu-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px;
    color: #d1d4dc; cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.lt-menu-item:hover { background: #2a2e39; }
.lt-menu-item i { width: 15px; text-align: center; color: #b2b5be; font-size: 12px; }
.lt-menu-danger, .lt-menu-danger i { color: #f23645; }

/* --- Einstellungs-Dialog (4 Tabs) --- */
#lt-settings-dialog {
    display: none; position: fixed; width: 440px; max-width: calc(100vw - 20px);
    background: #1e222d; border: 1px solid #363c4e; border-radius: 8px; z-index: 20055;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8); color: #d1d4dc; font-size: 13px;
}
.lt-dlg-head {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
    font-size: 15px; font-weight: 700; border-bottom: 1px solid #2a2e39; cursor: move;
}
.lt-dlg-head i { cursor: pointer; color: #787b86; }
.lt-dlg-head i:hover { color: #d1d4dc; }
.lt-dlg-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #2a2e39; }
.lt-dlg-tab {
    padding: 10px 12px; cursor: pointer; color: #787b86; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lt-dlg-tab:hover { color: #d1d4dc; }
.lt-dlg-tab.active { color: #ffffff; border-bottom-color: #2962ff; }
.lt-dlg-body { padding: 14px 16px; max-height: 55vh; overflow-y: auto; }
.lt-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.lt-row > span:first-child { color: #b2b5be; }
.lt-row-check label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #d1d4dc; }
.lt-sec-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #787b86; margin: 14px 0 10px; }
.lt-select {
    background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 4px;
    padding: 6px 8px; font-size: 13px; outline: none; cursor: pointer;
}
.lt-select:disabled { opacity: 0.45; cursor: default; }
.lt-input {
    width: 110px; background: #131722; border: 1px solid #363c4e; color: #d1d4dc;
    border-radius: 4px; padding: 6px 8px; font-size: 13px; outline: none; box-sizing: border-box;
}
.lt-input:focus { border-color: #2962ff; }
.lt-textarea {
    width: 100%; box-sizing: border-box; background: #131722; border: 1px solid #363c4e;
    color: #d1d4dc; border-radius: 4px; padding: 8px; font-size: 13px; outline: none;
    resize: vertical; margin-bottom: 12px; font-family: inherit;
}
.lt-textarea:focus { border-color: #2962ff; }
.lt-line-trigger {
    display: flex; align-items: center; gap: 10px; background: #2a2e39; border: 1px solid #363c4e;
    padding: 5px 12px 5px 5px; border-radius: 6px; cursor: pointer; transition: border-color 0.2s;
}
.lt-line-trigger:hover { border-color: #2962ff; background: #363c4e; }
.lt-chip { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
.lt-line-preview { width: 26px; border-bottom: 2px solid #2962ff; }
.lt-bi-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: #2a2e39; border: 1px solid #363c4e; border-radius: 4px; cursor: pointer; color: #b2b5be;
}
.lt-bi-btn:hover { color: #d1d4dc; background: #363c4e; }
.lt-bi-btn.active { color: #2962ff; border-color: #2962ff; background: rgba(41, 98, 255, 0.15); }
.lt-hint { font-size: 11px; color: #787b86; margin-top: 4px; }
.lt-vis-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lt-vis-check { display: flex; align-items: center; gap: 8px; width: 110px; cursor: pointer; color: #d1d4dc; }
.lt-vis-row .lt-select { flex: 1; }
.lt-vis-dash { color: #787b86; }
.lt-dlg-footer {
    display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px;
    border-top: 1px solid #2a2e39;
}
.lt-fbtn {
    background: #2a2e39; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 4px;
    padding: 8px 18px; font-size: 13px; cursor: pointer;
}
.lt-fbtn:hover { background: #363c4e; }
.lt-fbtn-ok { background: #ffffff; color: #131722; font-weight: 700; border-color: #ffffff; }
.lt-fbtn-ok:hover { background: #e0e3eb; }

/* ==========================================================================
   V172: ZEICHENWERKZEUGE STUFE 2 (Formen & Kanaele)
   ========================================================================== */
#drawing-mini-toolbar .lt-hidden { display: none !important; }
#lt-style-popover.lt-pop-fillmode .lt-sec-width,
#lt-style-popover.lt-pop-fillmode .lt-sec-style { display: none; }
.flyout-sep { height: 1px; background: #2a2e39; margin: 6px 0; }

/* ==========================================================================
   V173: ZEICHENWERKZEUGE STUFE 3 W2 (Fib-Kern) — Levels-Tab + Level-Popover
   ========================================================================== */
#lt-style-popover.lt-pop-levelmode .lt-sec-op,
#lt-style-popover.lt-pop-levelmode .lt-sec-width,
#lt-style-popover.lt-pop-levelmode .lt-sec-style { display: none; }
.lt-lvl-row { justify-content: flex-start; gap: 10px; }
.lt-lvl-row .lt-lvl-val { width: 96px; }
.lt-lvl-trig { padding: 4px; }
.lt-lvl-del { color: #787b86; cursor: pointer; margin-left: auto; font-size: 13px; }
.lt-lvl-del:hover { color: #f23645; }
.lt-lvl-foot { display: flex; gap: 10px; margin-top: 10px; }

/* ==========================================================================
   V174: ZEICHENWERKZEUGE STUFE 3 W4 — Emoji-Picker
   ========================================================================== */
#lt-emoji-picker {
    display: none; position: fixed; width: 330px; background: #1e222d;
    border: 1px solid #363c4e; border-radius: 8px; z-index: 20060;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
.lt-emo-head {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
    font-size: 14px; font-weight: 700; color: #d1d4dc; border-bottom: 1px solid #2a2e39; cursor: move;
}
.lt-emo-head i { cursor: pointer; color: #787b86; }
.lt-emo-head i:hover { color: #d1d4dc; }
.lt-emo-search { width: calc(100% - 20px); margin: 8px 10px 4px; }
.lt-emo-tabs { display: flex; gap: 2px; padding: 4px 10px; border-bottom: 1px solid #2a2e39; }
.lt-emo-tab {
    font-size: 17px; padding: 4px 5px; cursor: pointer; border-radius: 4px;
    border-bottom: 2px solid transparent; filter: grayscale(60%); 
}
.lt-emo-tab:hover { background: #2a2e39; filter: none; }
.lt-emo-tab.active { border-bottom-color: #2962ff; filter: none; }
.lt-emo-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 8px 10px 10px; height: 236px; overflow-y: auto;
}
.lt-emo { font-size: 21px; text-align: center; cursor: pointer; border-radius: 4px; padding: 3px 0; line-height: 1.3; }
.lt-emo:hover { background: #2a2e39; }

/* ===================== V176: BAR-REPLAY-LEISTE ===================== */
/* Wird von js/modules/replay.js in den Container des aktiven Charts injiziert. */
.replay-bar {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 30; display: flex; align-items: center; gap: 6px;
    background: rgba(22, 27, 34, 0.95); border: 1px solid #363c4e; border-radius: 8px;
    padding: 6px 10px; font-size: 12px; color: #d1d4dc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.replay-bar .rp-title { color: #f0b90b; font-weight: bold; display: flex; align-items: center; gap: 6px; margin-right: 2px; white-space: nowrap; }
.replay-bar .rp-btn { background: #2a2e39; border: none; color: #d1d4dc; border-radius: 5px; width: 28px; height: 26px; cursor: pointer; font-size: 12px; }
.replay-bar .rp-btn:hover { background: #363c4e; color: #fff; }
.replay-bar .rp-btn.rp-play { background: #2962ff; color: #fff; }
.replay-bar .rp-btn.rp-play:hover { background: #1e4fd6; }
.replay-bar .rp-btn.rp-exit:hover { background: #f23645; color: #fff; }
/* V177: Zukunfts-Trades-Knopf (Zielflagge) — gelb, wenn der Stapel sichtbar ist (Analyse-Modus) */
.replay-bar .rp-btn.active { background: #f0b90b; color: #131722; }
.replay-bar .rp-btn.active:hover { background: #d9a509; color: #131722; }
.replay-bar .rp-date { background: #131722; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 5px; padding: 3px 6px; font-size: 11px; color-scheme: dark; }
.replay-bar .rp-speed { background: #131722; border: 1px solid #363c4e; color: #d1d4dc; border-radius: 5px; padding: 3px 4px; font-size: 11px; cursor: pointer; }
.replay-bar .rp-sep { width: 1px; height: 18px; background: #363c4e; }
.replay-bar .rp-status { color: #787b86; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* V178: Lade-Status in Replay-Orange + sanfter Puls — sofort erkennbar, dass gearbeitet wird */
.replay-bar .rp-status.rp-busy { color: #f0b90b; animation: rpBusyPulse 1.2s ease-in-out infinite; }
@keyframes rpBusyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ============================================================================
   V187 (Roccos Mobile-Runde 14.07.): Handy-Optimierung Hochkant + Modal-Fixes
   ============================================================================ */

/* HOCHKANT: linke Werkzeugleiste weg (Chart + rechte Panels volle Breite) und
   Topbar entschlackt — Workspaces (Diskette), Layout und Command Center (Tacho)
   ausgeblendet, damit Livepreis + Abmelden vollständig sichtbar sind.
   Im QUERFORMAT erscheinen alle Icons automatisch wieder. */
@media (max-width: 768px) and (orientation: portrait) {
    .drawing-toolbar { display: none !important; }
    #dd-saves, #dd-layout { display: none !important; }
    /* V188-Fix: NUR den Zeile-2-Tacho-BUTTON verstecken — der Logo-BUTTON oben links
       (div#btn-open-profile) öffnet ebenfalls das Command Center und bleibt sichtbar! */
    .navbar button[title="Command Center"] { display: none !important; }

    /* V188 (Roccos Wunsch): geöffnete Panels füllen hochkant die volle Display-Breite
       (bis auf die 48px-Icon-Leiste) — der Chart dahinter ist nicht mehr sichtbar. */
    .right-panels:not(.collapsed) { width: calc(100vw - 48px) !important; min-width: calc(100vw - 48px) !important; }
}

/* Mobile generell (hoch + quer bis 768px) */
@media (max-width: 768px) {
    /* Bot-Auswahl („Wähle deine Strategie"): scrollbar, damit alle 6 Bots erreichbar sind */
    #fl-bot-selector-modal { align-items: flex-start !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #fl-bot-selector-modal > div { margin: 16px auto; }

    /* Einheits-Modal (Neuer Bot): X fest oben rechts statt schwebend im Umbruch */
    #fl-bot-modal .fl-bm-head { padding-right: 46px !important; }
    #fl-bm-close { position: absolute !important; top: 14px; right: 16px; }

    /* Bot-Detailfenster: Kopf-Icons (Tacho · Liste · X) fest oben rechts statt
       vertikal zentriert über dem mehrzeiligen Titel */
    #det-v2-drag-handle { padding-right: 104px !important; padding-top: 42px !important; } /* V188: Icon-Trio in eigener Zeile — Titel+Badges rutschen drunter */
    #fl-modal-controls { top: 12px !important; right: 14px !important; transform: none !important; gap: 16px !important; }
}

/* V189 (Roccos Fund 19.07., Screens 3246-3248): Detailfenster-Tabs (G/V-Kurve/Long/Short/…)
   am Handy scrollbar. Ursache: detail_ai setupTabs gibt dem Tab-Wrapper inline
   flex:1 + overflow-y:auto und den Panes height:100% — auf dem Desktop scrollt der Wrapper,
   mobil (right-panel overflow:visible aus modals_settings ≤900px) entstand ein
   verschachtelter Scroller ohne Höhen-Anker, den Touch nicht bedienen kann.
   Fix: mobil den Wrapper-Scroller neutralisieren → ALLES fließt in den EINEN
   .split-container-Scroller (touch-fähig, pan-y). */
@media (max-width: 900px) {
    #bot-details-modal .bot-det-content-wrapper { flex: none !important; overflow: visible !important; }
    #bot-details-modal .bot-det-content { height: auto !important; }
    #bot-details-modal .split-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }
    #bot-details-modal .left-panel-v8, #bot-details-modal .right-panel-v8 { touch-action: pan-y; }
}