:root {
  --bg: #131722; --panel: #1c2030; --text: #d1d4dc; --muted: #8b90a0;
  --border: #2a2e39; --field: #2a2e39; --fieldbd: #3a3f4b; --accent: #2962ff;
  --status: #6f93c9;
}
* { box-sizing: border-box; }
/* ==========================================================================
   T43 — FONT SYSTEM
   Primary UI stack : "Segoe UI", system-ui, sans-serif  (set on html/body;
                       all panels/menus/lists inherit unless overridden below)
   Per-theme display overrides (intentional identity — DO NOT remove):
     paper    → "Ink Free", "Segoe Print", "Comic Sans MS", cursive
     gem      → "Chicago", "Geneva", "MS Sans Serif", sans-serif
     gemdark  → "Geneva", "MS Sans Serif", sans-serif
     atari    → "Courier New", "Lucida Console", monospace
     kommando → "JetBrains Mono", ui-monospace, Consolas, monospace
   Contrast tokens : --text for primary readable UI / --muted for secondary
                     meta only (field labels, section headers, timestamps).
   ========================================================================== */
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px;
}
body { display: flex; flex-direction: column; }

#bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 6px 9px; background: var(--panel); border-bottom: 1px solid var(--border);
}
#bar label { display: inline-flex; flex-direction: column; font-size: 10px; color: var(--muted); gap: 2px; }
#bar label.chk {
  flex-direction: row; align-items: center; gap: 5px; font-size: 12px; color: var(--text);
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background .12s, border-color .12s;
}
#bar label.chk:hover { background: var(--field); }
#bar label.chk:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent);
}
#bar label.chk input { accent-color: var(--accent); margin: 0; }
#bar select, #bar input[type=number] {
  background: var(--field); color: var(--text); border: 1px solid var(--fieldbd);
  border-radius: 6px; padding: 4px 7px; font-size: 12px; transition: border-color .12s;
}
#bar select:hover, #bar input:hover { border-color: var(--accent); }
#bar select:focus, #bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.grp { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.sep { width: 1px; height: 24px; background: var(--fieldbd); margin: 0 5px; opacity: .6; }
.btn {
  background: var(--field); color: var(--text); border: 1px solid var(--fieldbd);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12px;
  transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(1.18); }
.btn.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.armed { background: #c0392b; border-color: #c0392b; color: #fff; animation: pulse .9s infinite; }
@keyframes pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }

.hidden { display: none !important; }
.spacer { flex: 1; }

/* Vollbild: Leiste BLEIBT (für Werkzeugwahl); nur Status weg + Beenden-Button */
body.focus #status { display: none; }
/* Kleines schwarzes X unten rechts – überlagert keine Menüpunkte mehr. */
#focusexit { position: fixed; bottom: 12px; right: 12px; z-index: 200000; display: none;
  width: 26px; height: 26px; padding: 0; line-height: 24px; text-align: center; font-size: 14px;
  border-radius: 50%; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.35);
  cursor: pointer; opacity: .8; }
#focusexit:hover { opacity: 1; }
body.focus #focusexit { display: block; }

/* Modus-Segmente */
.seg { display: inline-flex; border: 1px solid var(--fieldbd); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--field); color: var(--muted); border: none; padding: 5px 10px; cursor: pointer; font-size: 14px; line-height: 1; transition: .12s; }
.seg button + button { border-left: 1px solid var(--fieldbd); }
.seg button:hover { color: var(--text); filter: brightness(1.15); }
.seg button.on { background: var(--accent); color: #fff; }

/* Popover-Buttons + Menüs */
.pop { position: relative; }
.popbtn {
  background: var(--field); color: var(--text); border: 1px solid var(--fieldbd);
  border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 12.5px; transition: .12s; white-space: nowrap;
}
/* T44: inline SVG icons in the main trigger buttons — size/align via currentColor */
.popbtn svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }
/* Tool-Liste: linksbündig, Symbol-Spalte konsistent -> kein Verrutschen mehr. */
.toolitem { text-align: left; }
.popbtn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--field)); }
.popbtn:active { transform: scale(.98); }
.popbtn.open { background: var(--accent); border-color: var(--accent); color: #fff; }
.popmenu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 150000;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--panel); border: 1px solid var(--fieldbd); border-radius: 11px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); min-width: 210px;
  max-width: min(360px, calc(100vw - 24px)); max-height: min(80vh, calc(100vh - 120px)); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top left;
  pointer-events: none; transition: opacity .15s ease, transform .15s cubic-bezier(.2,.8,.25,1), visibility .15s;
}
.popmenu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* 🗂 Charts-Workspace-Liste */
#pop-charts, #pop-tp { min-width: 250px; max-height: 70vh; overflow-y: auto; }
.chartrow { display: flex; align-items: stretch; gap: 4px; }
.chartrow .chartload {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; background: var(--field); color: var(--text); border: 1px solid var(--fieldbd);
  border-radius: 7px; padding: 6px 9px; cursor: pointer; min-width: 0; transition: .12s;
}
.chartrow .chartload:hover { border-color: var(--accent); }
.chartrow.active .chartload { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chartrow .cname { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chartrow .cmeta { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chartrow .chartmini {
  flex: 0 0 auto; width: 30px; background: var(--field); color: var(--text); border: 1px solid var(--fieldbd);
  border-radius: 7px; cursor: pointer; font-size: 13px; transition: .12s;
}
.chartrow .chartmini:hover { border-color: var(--accent); }
.chartempty { color: var(--muted); font-size: 11.5px; padding: 2px 2px 4px; }
@media (max-width: 820px) { .chartrow .chartmini { width: 44px; min-height: 44px; } .chartrow .chartload { padding: 9px 11px; } }
.toolitem { transition: background .12s, transform .08s; }
.toolitem:active { transform: scale(.97); }
.popmenu .hd { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
/* Einklappbare Gruppen (Mond-Linien, Kerzen-Stil) – Header = Klapp-Schalter */
.popmenu details.grp { margin: 2px 0; }
.popmenu details.grp > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-radius: 5px; user-select: none; }
.popmenu details.grp > summary::-webkit-details-marker { display: none; }
.popmenu details.grp > summary::before { content: "▸"; font-size: 9px; color: var(--accent, #2fe6c4); transition: transform .12s; }
.popmenu details.grp[open] > summary::before { transform: rotate(90deg); }
.popmenu details.grp > summary:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
/* T43: primary field labels in menus use --text; only genuinely secondary meta keeps --muted */
.popmenu label { font-size: 11px; color: var(--text); }
.popmenu label.chk { font-size: 12.5px; color: var(--text); }
.popmenu .row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.popmenu select, .popmenu input[type=number] { width: 100%; }
.popmenu .row .btn { flex: 1; }

#chartwrap { position: relative; flex: 1 1 auto; min-height: 0; }
#chart { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/* Cursor-Datum/Uhrzeit am oberen Rand (folgt dem Cursor-x; Pendant zum Zeitachsen-Label unten) */
#cursorTopTime {
  position: absolute; top: 0; left: 0; transform: translateX(-50%); z-index: 60;
  display: none; pointer-events: none; white-space: nowrap;
  padding: 2px 8px; border-radius: 0 0 7px 7px;
  font: 600 11px/1.25 "Segoe UI", system-ui, sans-serif; letter-spacing: .2px;
  color: var(--text, #e8edf4); background: var(--panel, #161b26);
  border: 1px solid var(--border, #2a3142); border-top: none;
  box-shadow: 0 2px 7px rgba(0,0,0,.32);
}
/* TradingView-Attribution ausblenden */
#tv-attr-logo, #chart a[href*="tradingview"], #chart #tv-attr-logo { display: none !important; }
#brand {
  position: absolute; bottom: 6px; left: 11px; z-index: 100000; pointer-events: none;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--muted); opacity: .42;
}
#underlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; }

/* ===== Modus-Anzeige: farbiger Innenrahmen + Pille, solange NICHT navigiert ===== */
#chartwrap.modeactive { box-shadow: inset 0 0 0 2px var(--modecol, #f59e0b); }
#chartwrap[data-modekind="add"]  { --modecol: #f59e0b; }   /* orange = Punkt setzen */
#chartwrap[data-modekind="move"] { --modecol: #14b8a6; }   /* teal = Punkt bewegen */
#chartwrap[data-modekind="draw"] { --modecol: #3b82f6; }   /* blau = zeichnen */
#modepill {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 100050; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 999px; color: #fff; font: 600 13px "Segoe UI", sans-serif;
  background: var(--modecol, #f59e0b); box-shadow: 0 4px 16px rgba(0,0,0,.4); max-width: 92vw;
}
#modepill[data-modekind="add"]  { background: #f59e0b; }
#modepill[data-modekind="move"] { background: #14b8a6; }
#modepill[data-modekind="draw"] { background: #3b82f6; }
#modepill #modepilltext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modepillx {
  flex: 0 0 auto; width: 28px; height: 28px; min-height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.25); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
#modepillx:hover, #modepillx:active { background: rgba(255,255,255,.45); }
@media (max-width: 820px) { #modepill { font-size: 14px; padding: 9px 9px 9px 14px; } #modepillx { width: 36px; height: 36px; min-height: 36px; font-size: 18px; } }
/* Punkt-Setzen-Popup (unter der Modus-Pille) — Normal/Fix-Nummer + −/+ */
#numpop {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 100049;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 6px 8px; backdrop-filter: blur(4px);
  font-size: 12px; color: var(--text);
}
#numpop.hidden { display: none; }
#numpop .nprow { display: flex; gap: 5px; align-items: center; }
#numpop .nprow.hidden { display: none; }
#numpop .npbtn { background: var(--field); border: 1px solid var(--fieldbd); color: var(--text); border-radius: 7px; padding: 4px 12px; cursor: pointer; font-size: 12px; line-height: 1.2; }
#numpop .npbtn:hover { border-color: var(--accent); }
#numpop .npbtn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
#numpop .npbtn.npsm { padding: 4px 0; width: 30px; text-align: center; font-size: 16px; }
#numpop #npNum { min-width: 28px; text-align: center; font-weight: 800; font-size: 16px; }
/* Direkt-Auswahl 1–12 (kleine Zahlen mit Abstand) + freies Eingabefeld */
#numpop .npgrid { flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 196px; }
#numpop .npn { background: var(--field); border: 1px solid var(--fieldbd); color: var(--text); border-radius: 6px; width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#numpop .npn:hover { border-color: var(--accent); }
#numpop .npn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
#numpop .npinput { width: 44px; background: var(--field); border: 1px solid var(--fieldbd); color: var(--text); border-radius: 6px; padding: 3px 5px; font-size: 12px; text-align: center; }
#numpop .npinput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 820px) { #numpop .npbtn { padding: 7px 14px; } #numpop .npbtn.npsm { width: 38px; height: 38px; } #numpop #npNum { min-width: 34px; font-size: 18px; } #numpop .npgrid { max-width: 272px; gap: 6px; } #numpop .npn { width: 38px; height: 38px; font-size: 15px; } #numpop .npinput { width: 56px; height: 38px; font-size: 16px; } }

/* Bedienungs-Hilfe-Knopf (?) in der Topbar — oeffnet die Touch-/Gesten-Anleitung */
/* Flach + eckig wie die uebrigen Topbar-Buttons (.seg/.popbtn) statt isolierter Kreis. */
#mobilehelpbtn {
  width: 30px; height: 30px; min-height: 30px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
  border: 1px solid var(--fieldbd); background: var(--field); color: var(--text);
  font-size: 15px; font-weight: 800; line-height: 1; padding: 0;
}
#mobilehelpbtn:hover, #mobilehelpbtn:active { background: var(--accent); color: var(--bg); }
@media (max-width: 820px) { #mobilehelpbtn { width: 36px; height: 36px; min-height: 36px; font-size: 17px; } }
/* Der ?-Knopf erklaert die TOUCH-Bedienung -> auf Desktop (Maus, praeziser Zeiger) ausblenden. */
@media (hover: hover) and (pointer: fine) { #mobilehelpbtn { display: none !important; } }
/* Mobil gibt es keine Tastatur -> Tastenkuerzel-Hilfe (Dock) ausblenden; der ?-Knopf (Gesten) reicht. */
@media (max-width: 820px) { #hkhelpbtn { display: none; } }

/* T26 – Mini-Toolbar: Karten-Stil, einheitliche 30×30-Buttons */
#minitoolbar {
  position: absolute; z-index: 100060; display: flex; gap: 3px; padding: 5px; align-items: center;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.28);
  background: var(--panel, rgba(22,28,38,.96)); border: 1px solid var(--border, rgba(255,255,255,.12));
}
/* Objekt-Toolbar fährt beim Erscheinen von unten hoch (statt aufzuploppen). Positionierung
   läuft über left/top -> transform frei für die Animation. Theme-Look via --panel/--border/--text. */
#minitoolbar:not(.hidden) { animation: mtbSlideUp .22s cubic-bezier(.16,.84,.3,1); }
@keyframes mtbSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #minitoolbar:not(.hidden) { animation: none; } }
#minitoolbar button {
  width: 30px; height: 30px; min-height: 30px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text, #e8eaed); font-size: 15px; line-height: 1; padding: 0;
}
#minitoolbar button:hover, #minitoolbar button:active { background: var(--field, rgba(255,255,255,.1)); color: var(--text, #e8eaed); }
#minitoolbar button[data-act="del"]:hover, #minitoolbar button[data-act="del"]:active { background: #e0463f; color: #fff; }
/* Greifpunkt zum Verschieben (Maus): immer sichtbar, kein Button -> loest keine Aktion aus. */
#minitoolbar .mtbgrip { cursor: move; display: flex; align-items: center; justify-content: center; padding: 0 3px; color: var(--muted, #8a93a3); font-size: 13px; line-height: 1; user-select: none; min-height: 30px; touch-action: none; }
@media (max-width: 820px) { #minitoolbar button { width: 44px; height: 44px; min-height: 44px; font-size: 19px; } #minitoolbar .mtbgrip { min-height: 44px; font-size: 18px; } }
/* Mobil: Objekt-Toolbar dockt als Bottom-Sheet am unteren Bildschirmrand an und fährt von dort
   hoch. JS positioniert sie sonst per inline left/top am Objekt -> hier mit !important überschreiben. */
@media (max-width: 820px) {
  #minitoolbar:not(.hidden) {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    margin-left: auto !important; margin-right: auto !important;
    width: max-content !important; max-width: calc(100vw - 24px) !important;
    z-index: 200000;
    padding: 7px 9px; gap: 5px;
    box-shadow: 0 -6px 26px rgba(0,0,0,.45);
    animation: mtbSheetUp .26s cubic-bezier(.16,.84,.3,1);
  }
}
@keyframes mtbSheetUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  #minitoolbar:not(.hidden) { animation: none; }
}
/* Button-Set je Auswahl-Art (kind via updateMiniToolbar/tb.dataset.kind):
   Zeichnung -> Back/Farbe/Lock/Width/Alarm/Mehr/Loeschen.  Turningpoint -> Back/Nummer/Mehr/Loeschen. */
#minitoolbar button[data-act="num"] { display: none; }
#minitoolbar[data-kind="point"] button[data-act="num"] { display: inline-block; }
#minitoolbar[data-kind="point"] button[data-act="color"],
#minitoolbar[data-kind="point"] button[data-act="lock"],
#minitoolbar[data-kind="point"] button[data-act="width"],
#minitoolbar[data-kind="point"] button[data-act="alarm"] { display: none; }
/* Strichstaerke-Popup */
.strichpop { position: fixed; z-index: 200001; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; background: var(--panel); border: 1px solid var(--border, rgba(255,255,255,.15));
  border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 80px; }
.strichpop button { display: flex; align-items: center; gap: 8px; background: transparent;
  border: none; cursor: pointer; padding: 4px 2px; border-radius: 5px; color: var(--text, #e8eaed); }
.strichpop button:hover { background: var(--field, rgba(255,255,255,.1)); }
.strichpop button.on { background: var(--field, rgba(255,255,255,.1)); }
.strichpop .sp-line { display: inline-block; width: 40px; background: var(--text, #e8eaed); border-radius: 1px; }
.strichpop .sp-label { font-size: 12px; opacity: .8; }
.strichpop .sp-sep { height: 1px; background: var(--border, rgba(255,255,255,.15)); margin: 3px 0; }

#ratiochip {
  position: absolute; top: 10px; right: 12px; z-index: 100001; cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--muted);
  box-shadow: 0 4px 14px rgba(0,0,0,.35); backdrop-filter: blur(3px); letter-spacing: .3px;
}
#ratiochip:hover { color: var(--text); border-color: var(--accent); }
#ratiochip.on { color: var(--accent); border-color: var(--accent); }
#overview {
  position: absolute; top: 44px; right: 12px; z-index: 100000; display: none;
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 8px 10px; min-width: 180px;
  font-size: 12px; backdrop-filter: blur(3px);
}
#overview.open { display: block; }
/* T27: Header als Drag-Griff */
#overview .ovhd { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: move; user-select: none; }
#overview .ovx { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; border-radius: 4px; line-height: 1; }
#overview .ovx:hover { background: rgba(239,83,80,.25); color: #fff; }
#overview .ovrow { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
#overview .ovlv { color: var(--text); }
#overview .ovrec { margin-top: 7px; padding: 5px 8px; border-radius: 7px; font-weight: 700; font-size: 12px; text-align: center; }
#overview .ovrec.up { background: rgba(38,166,154,.22); color: #4cd0c0; }
#overview .ovrec.dn { background: rgba(239,83,80,.22); color: #ff8a87; }
#overview .ovempty { color: var(--muted); font-size: 11px; }

/* Favoriten-Werkzeugleiste links (TradingView-Stil), nur Symbole */
#favbar {
  position: absolute; top: 8px; left: 0; z-index: 100002; display: none;
  flex-direction: column; gap: 3px; padding: 5px 4px;
  background: var(--panel); border: 1px solid var(--fieldbd); border-left: none;
  border-radius: 0 10px 10px 0; box-shadow: 4px 0 16px rgba(0,0,0,.45);
}
#favbar.show { display: flex; }
#favbar button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
}
#favbar button:hover { background: var(--field); border-color: var(--fieldbd); }
#favbar button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ★-Stern an jedem Werkzeug */
.toolitem { display: flex; align-items: center; gap: 6px; }
.favstar { margin-left: auto; color: var(--muted); font-size: 13px; padding: 0 2px; }
.favstar:hover { color: #e0b341; }
.favstar.on { color: #e0b341; }
/* Favoriten-Overlays (Punkte/Analyse/Astro): Dock links UNTEN, gleiche Optik wie #favbar */
#favbar2 {
  position: absolute; bottom: 34px; left: 0; z-index: 100002; display: none;
  flex-direction: column; gap: 3px; padding: 5px 4px;
  background: var(--panel); border: 1px solid var(--fieldbd); border-left: none;
  border-radius: 0 10px 10px 0; box-shadow: 4px 0 16px rgba(0,0,0,.45);
  max-height: 55%; overflow: auto;
}
#favbar2.show { display: flex; }
#favbar2 button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
}
#favbar2 button:hover { background: var(--field); border-color: var(--fieldbd); }
#favbar2 button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ★ + (i) an Overlay-Checkboxen in den Menüs */
.popmenu label.chk { display: flex; align-items: center; gap: 5px; }
.popmenu label.chk .favstar { margin-left: auto; }
.infob { color: var(--muted); cursor: help; font-size: 11px; padding: 0 2px; flex: none; }
.infob:hover { color: var(--accent); }

/* Objekte als rechte Seitenleiste (TradingView-Stil) */
#toolspanel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 100000; display: none;
  background: var(--panel); border-left: 1px solid var(--fieldbd);
  box-shadow: -8px 0 24px rgba(0,0,0,.4); padding: 10px 12px; font-size: 12px; width: 250px; overflow: auto;
}
#toolspanel.open { display: block; }
#toolspanel .lvlrow { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#toolspanel .lvlchip { background: var(--field); color: var(--muted); border: 1px solid var(--fieldbd); border-radius: 6px; padding: 3px 7px; font-size: 10.5px; cursor: pointer; }
#toolspanel .lvlchip.on { color: var(--text); border-color: var(--accent); }
#toolspanel .lvlchip.akt { background: var(--accent); color: #fff; border-color: var(--accent); }
#toolspanel .tgroup { margin-bottom: 8px; }
#toolspanel .tgroup.hid { opacity: .45; }
#toolspanel .tghd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin: 6px 0 3px; border-bottom: 1px solid var(--fieldbd); padding-bottom: 2px; display: flex; align-items: center; }
#toolspanel .tghd .tlveye { margin-left: auto; font-size: 13px; }
#toolspanel .sphd { font-weight: 700; font-size: 12px; margin-bottom: 8px; color: var(--text); }
#toolspanel .trow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); }
/* T25: Objekt-Name in vollem --text, kein opacity-Abdunkel */
#toolspanel .trow span:first-child { color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toolspanel .trow { cursor: pointer; border-radius: 4px; }
#toolspanel .trow:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
#toolspanel .trow.sel { background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* T25: sekundäre Metainfo (Datum, %) lesbar aber dezent — kein opacity<1 */
#toolspanel .tmuted { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
/* Objekt-Farbe als kleines Kaestchen statt als Textfarbe -> der Name bleibt im lesbaren --text,
   egal welche (auch dunkle/blasse) Farbe das Objekt hat. */
#toolspanel .tdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(127,127,127,.45); }
.tdel { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; }
.tdel:hover { background: rgba(239,83,80,.25); color: #fff; }
.tvis { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.tvis:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); }
.tonce { background: transparent; border: 1px solid var(--muted); color: var(--muted); cursor: pointer; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: auto; margin-right: 4px; }
.tonce:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
/* Planeten-Auswahl (🪐 Preislinien) kompakt in einer Reihe */
#pop-astro .plrow { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 2px 6px; }
#pop-astro .plrow .chk { display: inline-flex; align-items: center; gap: 3px; width: auto; }
#toolspanel .trow.thid > span { opacity: .4; }
#toolspanel .ovempty { color: var(--muted); font-size: 11px; }
.toolitem { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text);
  cursor: pointer; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; }
.toolitem:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.toolitem.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

#statspanel {
  position: absolute; top: 10px; right: 12px; z-index: 100002; display: none;
  background: var(--panel); border: 1px solid var(--fieldbd); border-radius: 11px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); padding: 10px 12px; font-size: 12px;
  min-width: 280px; max-height: 86%; overflow: auto;
}
#statspanel.open { display: block; }
#statspanel .sphd { font-weight: 700; font-size: 12px; margin-bottom: 8px; color: var(--text); }
#statspanel table { border-collapse: collapse; width: 100%; }
#statspanel th, #statspanel td { text-align: left; padding: 4px 8px; white-space: nowrap; }
#statspanel th { color: var(--muted); font-size: 10px; text-transform: uppercase; border-bottom: 1px solid var(--fieldbd); }
#statspanel tbody tr:nth-child(even) td { background: rgba(127,127,127,.08); }
#statspanel .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
#statspanel .spft { color: var(--muted); font-size: 10px; margin-top: 8px; line-height: 1.4; }
/* Dual-Tone-Cursor (dunkle Füllung + weiße Kontur) -> auf JEDEM Theme sichtbar, auch auf Weiß.
   Native grab/move werden auf hellen Themes sonst weiß/unsichtbar. */
#overlay.move { pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M9 11 V6.5 a1.6 1.6 0 0 1 3.2 0 V10 a1.6 1.6 0 0 1 3.2 0 V11 a1.6 1.6 0 0 1 3.2 0 V12 a1.6 1.6 0 0 1 3.2 0 v4 a5 5 0 0 1-5 5 h-3.4 a5 5 0 0 1-3.6-1.6 L5.5 16 a1.7 1.7 0 0 1 2.6-2.2 L9 15 Z" fill="%23151515" stroke="white" stroke-width="1.4" stroke-linejoin="round"/></svg>') 9 4, grab; }
#overlay.hot, #overlay.grabbing { pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M13 2 L9.5 6 H12 V11.5 H6.5 V9 L2 13 L6.5 17 V14.5 H12 V20 H9.5 L13 24 L16.5 20 H14 V14.5 H19.5 V17 L24 13 L19.5 9 V11.5 H14 V6 H16.5 Z" fill="%23151515" stroke="white" stroke-width="1.1" stroke-linejoin="round"/></svg>') 13 13, move; }

#status {
  padding: 4px 10px; background: var(--panel); border-top: 1px solid var(--border);
  font-size: 11px; color: var(--status); white-space: nowrap; overflow: hidden;
}

/* T26 – Professionelle Karten-Optik für Kontextmenü + Mini-Toolbar */
#ctxmenu {
  position: fixed; z-index: 200000; min-width: 160px; padding: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); font-size: 12px; display: none;
}
/* Unten angedocktes Kontextmenue (Doppel-Tap/-Klick/Rechtsklick): faehrt von unten hoch. */
#ctxmenu.ctx-bottom { animation: ctxSlideUp .22s cubic-bezier(.16,.84,.3,1); box-shadow: 0 -6px 26px rgba(0,0,0,.45); max-width: calc(100vw - 16px); }
@keyframes ctxSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #ctxmenu.ctx-bottom { animation: none; } }
#ctxmenu .it { min-height: 30px; padding: 5px 10px; border-radius: 6px; cursor: pointer; color: var(--text); white-space: nowrap;
  display: flex; align-items: center; gap: 0; }
#ctxmenu .it:hover { background: var(--field); color: var(--text); }
#ctxmenu .it .ck { flex: 0 0 14px; text-align: center; color: var(--accent); font-weight: 700; }
#ctxmenu .it:hover .ck { color: var(--accent); }
#ctxmenu .it .ic { flex: 0 0 18px; text-align: center; opacity: .80; }
#ctxmenu .it .lb { flex: 1 1 auto; }
#ctxmenu .it.danger { color: #ef5350; }
#ctxmenu .it.danger:hover { background: rgba(239,83,80,.18); color: #ef5350; }
#ctxmenu .it.danger .ic { opacity: .9; }
#ctxmenu .sep { height: 1px; background: var(--border); margin: 4px 6px; }
#ctxmenu .hd { padding: 5px 10px 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); }
/* Titelzeile (erste .hd) etwas kräftiger */
#ctxmenu .hd:first-child { color: var(--text); font-size: 11px; letter-spacing: 0; text-transform: none; }

#toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 200001;
  background: #b9521f; color: #fff; padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-size: 13px; box-shadow: 0 8px 28px rgba(0,0,0,.5); display: none; user-select: none;
}

/* ===== Mobil / Touch (Smartphone & Tablet) ===== */
@media (max-width: 820px) {
  html, body { font-size: 14px; }
  /* Topbar horizontal scrollbar statt umbrechen -> bleibt eine Reihe, antippbar */
  #bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    gap: 9px; scrollbar-width: none;
    /* Safe-Area (Notch/Statusleiste) respektieren, sonst klebt die Topbar unter der Kerbe */
    padding: calc(8px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) 8px calc(9px + env(safe-area-inset-left));
    position: relative; z-index: 200003;   /* über dem Menü-Backdrop -> Buttons bleiben tappbar */
  }
  #bar::-webkit-scrollbar { display: none; }
  #bar > * { flex: 0 0 auto; }
  #brand { display: none; }
  #status-mini { display: none; }
  /* größere Touch-Ziele (≥44px, Apple HIG / Material) */
  .seg button { padding: 10px 14px; font-size: 17px; min-height: 44px; }
  .popbtn, .btn { padding: 11px 14px; font-size: 13.5px; min-height: 44px; }
  /* 16px verhindert den iOS-Auto-Zoom beim Fokussieren von Feldern */
  #bar select, #bar input[type=number] { padding: 9px 10px; font-size: 16px; min-height: 44px; }
  .toolitem { padding: 12px 12px; font-size: 14px; min-height: 44px; }
  /* WICHTIG: die Topbar scrollt horizontal (overflow-y:hidden) und würde die
     absolut positionierten Menüs ABSCHNEIDEN. Auf Mobil daher als BOTTOM-SHEET
     (position:fixed) -> entkommt dem Clipping, volle Breite, gut antippbar. */
  .popmenu {
    position: fixed !important; left: 8px; right: 8px; top: auto;
    bottom: calc(65px + env(safe-area-inset-bottom));
    min-width: 0; width: auto;
    max-height: calc(100vh - 65px - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 16px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(12px); transform-origin: bottom center;
    z-index: 200002; box-shadow: 0 -10px 40px rgba(0,0,0,.6);
  }
  .popmenu.open { transform: none; }
  /* Backdrop, wenn ein Menü offen ist (Tippen daneben schließt via document-click) */
  body.pop-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 200001; backdrop-filter: blur(1px);
  }
  /* Übersicht: auf dem Handy nur das Wichtigste — aktive Ebene + nächster
     Wendepunkt (⏳) bleiben sichtbar (Content-Priority), Rest-Ebenen weg */
  #overview .ovrow { display: none; }
  #overview .ovrow.ovkey { display: flex; }
  #overview { max-width: 64vw; font-size: 12px; top: 38px; right: 6px; padding: 6px 8px; }
  #ratiochip { top: 6px; right: 6px; padding: 3px 7px; font-size: 11px; }
  #overview .ovhd { font-size: 11px; }
  #statspanel, #toolspanel { max-width: 88vw; font-size: 12px; top: 8px; right: 8px; min-width: 200px; }
  /* Kontextmenü-Einträge fingerfreundlich */
  #ctxmenu .it { padding: 8px 12px; font-size: 13px; }
  /* Fokus-Exit auf Mobil etwas größer (Touch), bleibt rundes X */
  #focusexit { width: 34px; height: 34px; line-height: 32px; font-size: 16px; }
}
/* Sehr schmale Phones: noch kompakter */
@media (max-width: 480px) {
  #overview, #statspanel, #toolspanel { max-width: 90vw; }
}
/* Touch-Geräte allgemein: keine Hover-Abhängigkeit, größere Griffe gefühlt */
@media (hover: none) {
  .toolitem:active, .btn:active, .seg button:active { filter: brightness(1.3); }
}

/* ===== Touch-Feinschliff (alle Geräte) ===== */
.popbtn, .btn, .seg button, .toolitem, #bar select, #bar input, #ctxmenu .it, .tdel {
  touch-action: manipulation;          /* kein 300ms-Delay / Doppeltipp-Zoom */
}
#overlay.move, #overlay.hot { touch-action: none; }   /* Desktop: Ziehen zeichnet/bewegt (Maus-Capture), statt die Seite zu scrollen */
/* Echte Touch-Geraete: Overlay bleibt IMMER kalt. Alle Touch-Gesten laufen ueber den einheitlichen
   Controller (initMobileTouch), der die Zeichen-Engine direkt steuert und den Chart-Pan per
   handleScroll einfriert. So faengt das Overlay nie einen Finger ab -> 2-Finger-Pinch geht IMMER an
   lightweight-charts, und es kann keine touch-action:none-Klasse haengen bleiben (Regress-Schutz). */
@media (hover: none) and (pointer: coarse) {
  #overlay, #overlay.move, #overlay.hot, #overlay.grabbing { pointer-events: none !important; touch-action: auto !important; }
}
@media (max-width: 820px) {
  html, body { overscroll-behavior: none; }            /* kein Pull-to-Refresh / Gummiband */
  /* Punkte/Zeichnungen mit dem Finger leichter treffen */
  #ctxmenu { max-width: 92vw; }
}

/* ---- Atari / Amiga Oldschool-Theme (body[data-theme=atari]) ---------------- */
body[data-theme="atari"] {
  font-family: "Courier New", "Lucida Console", monospace !important;
  letter-spacing: .5px;
}
body[data-theme="atari"] button,
body[data-theme="atari"] select,
body[data-theme="atari"] input,
body[data-theme="atari"] .popbtn,
body[data-theme="atari"] .toolitem,
body[data-theme="atari"] #ctxmenu,
body[data-theme="atari"] .pop {
  border-radius: 0 !important;
  border: 2px solid #ff8a00 !important;
  box-shadow: inset -2px -2px 0 #00204f, inset 2px 2px 0 #2f6fd8 !important;  /* Bevel */
  text-transform: uppercase;
  font-family: inherit !important;
}
body[data-theme="atari"] button:active,
body[data-theme="atari"] .popbtn:active,
body[data-theme="atari"] .toolitem:active {
  box-shadow: inset 2px 2px 0 #00204f, inset -2px -2px 0 #2f6fd8 !important;  /* gedrückt */
}
body[data-theme="atari"] .topbar,
body[data-theme="atari"] #toolspanel,
body[data-theme="atari"] .pop {
  border-bottom: 3px solid #ff8a00;
  image-rendering: pixelated;
}
body[data-theme="atari"] ::-webkit-scrollbar { width: 14px; height: 14px; }
body[data-theme="atari"] ::-webkit-scrollbar-thumb { background: #ff8a00; border: 2px solid #00204f; border-radius: 0; }

/* 🎯 Trader-Mode-Panel (F3) */
#traderpanel {
  position: absolute; top: 10px; right: 12px; z-index: 100001; display: none;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5); padding: 10px 12px; min-width: 220px;
  font-size: 12px; backdrop-filter: blur(4px);
}
#traderpanel.open { display: block; }
#traderpanel .thd { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display:flex; justify-content:space-between; }
#traderpanel .sig { font-weight: 800; font-size: 15px; text-align: center; padding: 6px; border-radius: 8px; margin-bottom: 8px; }
#traderpanel .sig.buy { background: rgba(38,166,154,.22); color: #4cd0c0; }
#traderpanel .sig.sell { background: rgba(239,83,80,.22); color: #ff8a87; }
#traderpanel .sig.none { background: rgba(140,144,160,.18); color: var(--muted); }
#traderpanel .trow { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
#traderpanel .tk { color: var(--muted); }
#traderpanel .tv { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
#traderpanel .tv.sl { color: #ff8a87; }
#traderpanel .tv.tp { color: #4cd0c0; }
#traderpanel .twarn { margin-top: 8px; padding: 5px 7px; border-radius: 7px; background: rgba(192,57,43,.25); color: #ffb3ad; font-weight: 700; font-size: 11px; text-align: center; }

/* 🐿️ ADHD-Theme v2 – moderne, abwechslungsreiche Effekte (D4) */
.adhd-fx { position: fixed; z-index: 200000; pointer-events: none; user-select: none; }
/* SVG-Tier läuft mit Hüpfen + Schatten/Glow durchs Bild */
.adhd-critter { left: -70px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); animation: adhd-run 7s linear forwards, adhd-bob .5s ease-in-out infinite; }
.adhd-critter.flip { transform: scaleX(-1); animation: adhd-run-r 7s linear forwards, adhd-bob .5s ease-in-out infinite; left: auto; right: -70px; }
@keyframes adhd-run { to { transform: translateX(108vw); } }
@keyframes adhd-run-r { to { transform: translateX(-108vw) scaleX(-1); } }
@keyframes adhd-bob { 50% { margin-bottom: 14px; } }
/* moderne Glow-Sprechblase mit Verlauf */
.adhd-pop { padding: 12px 18px; border-radius: 16px; font: 800 17px "Segoe UI", system-ui, sans-serif;
  color: #fff; background: linear-gradient(135deg, var(--c, #ff5ddb), #1b1030);
  box-shadow: 0 10px 34px var(--c, #ff5ddb), 0 0 0 2px rgba(255,255,255,.25) inset;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); animation: adhd-pop 3.6s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes adhd-pop { 0%{opacity:0; transform:scale(.3) translateY(20px);} 14%{opacity:1; transform:scale(1.06);} 82%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(.95) translateY(-16px);} }
/* Physik-Konfetti (per-Partikel --dx/--dy/--rot) */
.adhd-confetti { width: 10px; height: 16px; border-radius: 2px; box-shadow: 0 0 6px currentColor;
  animation: adhd-burst 2.4s cubic-bezier(.15,.6,.3,1) forwards; }
@keyframes adhd-burst { 0%{opacity:1; transform:translate(0,0) rotate(0);} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot));} }
/* 90er-TV mit Scanlines + Flackern */
.adhd-tv { animation: adhd-pop 4.2s ease forwards; }
.adhd-tv .tvscreen { position: relative; width: 220px; height: 150px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a3a2a, #050805); border: 8px solid #1a1a1a;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 2px #333; }
.adhd-tv .tvtxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6dff6d; font: 900 20px "Courier New", monospace; text-shadow: 0 0 8px #6dff6d; letter-spacing: 1px;
  animation: adhd-flick .12s steps(2) infinite; text-align: center; }
.adhd-tv .tvscan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.35) 2px 4px); }
@keyframes adhd-flick { 50% { opacity: .82; } }
/* RGB-Glitch über dem Chart */
.adhd-glitch { left: 0; top: 0; width: 100vw; height: 100vh; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,0,80,.12), transparent 40%, rgba(0,180,255,.12));
  animation: adhd-glitch .65s steps(3) forwards; }
@keyframes adhd-glitch { 0%{opacity:0; transform:translateX(0);} 20%{opacity:1; transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-3px);} 100%{opacity:0;} }
.adhd-shake { animation: adhd-shake .5s ease; }
@keyframes adhd-shake { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-6px,3px) rotate(-.4deg);} 40%{transform:translate(7px,-4px) rotate(.4deg);} 60%{transform:translate(-5px,2px);} 80%{transform:translate(4px,-3px);} }

/* 📚 Methoden-Menü-Buttons */
.mbtn { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 6px 8px; border-radius: 7px;
  background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); cursor: pointer; font-size: 12px; }
.mbtn:hover { background: color-mix(in srgb, var(--accent) 22%, var(--field)); }

/* ---- Atari GEM / PC_SHELL: reines Schwarz-Weiß-Desktop (body[data-theme=gem]) ---- */
body[data-theme="gem"] {
  font-family: "Chicago", "Geneva", "MS Sans Serif", "Segoe UI", sans-serif !important;
}
body[data-theme="gem"] .topbar { background: #fff; border-bottom: 2px solid #000; }
body[data-theme="gem"] button, body[data-theme="gem"] select, body[data-theme="gem"] input,
body[data-theme="gem"] .popbtn, body[data-theme="gem"] .toolitem, body[data-theme="gem"] .mbtn,
body[data-theme="gem"] .popmenu, body[data-theme="gem"] #ctxmenu, body[data-theme="gem"] .pop,
body[data-theme="gem"] #overview, body[data-theme="gem"] #traderpanel, body[data-theme="gem"] #statspanel,
body[data-theme="gem"] #toolspanel, body[data-theme="gem"] #status, body[data-theme="gem"] #toast {
  border-radius: 0 !important; background: #fff !important; color: #000 !important;
  border: 1px solid #000 !important; box-shadow: none !important; backdrop-filter: none !important;
}
body[data-theme="gem"] button:hover, body[data-theme="gem"] .popbtn:hover,
body[data-theme="gem"] .toolitem:hover, body[data-theme="gem"] .mbtn:hover,
body[data-theme="gem"] .popbtn.open, body[data-theme="gem"] button:active { background: #000 !important; color: #fff !important; }
body[data-theme="gem"] .hd, body[data-theme="gem"] .ovhd { background: #000; color: #fff !important; padding: 2px 6px; text-transform: none; }
body[data-theme="gem"] .chk input { accent-color: #000; }
body[data-theme="gem"] ::-webkit-scrollbar { width: 16px; height: 16px; background: #fff; }
body[data-theme="gem"] ::-webkit-scrollbar-thumb { background: #fff; border: 1px solid #000; border-radius: 0; }
body[data-theme="gem"] #brand { color: #000; }
/* GEM / GEM-dark: Dropdown-Einträge & Panels monochrom — Farb-Emoji (📏🌀🌙…) entsättigen. */
body[data-theme="gem"] .popmenu, body[data-theme="gem"] #ctxmenu,
body[data-theme="gem"] #toolspanel, body[data-theme="gem"] #statspanel,
body[data-theme="gem"] #alarmpanel, body[data-theme="gem"] #traderpanel, body[data-theme="gem"] #changelog,
body[data-theme="gemdark"] .popmenu, body[data-theme="gemdark"] #ctxmenu,
body[data-theme="gemdark"] #toolspanel, body[data-theme="gemdark"] #statspanel,
body[data-theme="gemdark"] #alarmpanel, body[data-theme="gemdark"] #traderpanel, body[data-theme="gemdark"] #changelog {
  filter: grayscale(1) contrast(1.05);
}
/* Statistik-Panel AUSGENOMMEN: die Verlässlichkeits-Punkte (grün/gelb/rot) müssen auch auf
   S/W-Themes unterscheidbar bleiben — komplett graue Dots sind nicht lesbar. */
body[data-theme="gem"] #statspanel, body[data-theme="gemdark"] #statspanel { filter: none; }

/* GEM: Desktop-Fenster-Rahmen + alte Menüleisten-Optik (body[data-theme=gem]) */
body[data-theme="gem"] .topbar {
  border-bottom: 3px double #000 !important; gap: 2px; padding: 1px 4px;
}
/* Topbar-Knöpfe wie GEM-Menütitel: flach, ohne Rahmen, invertieren bei Hover/offen */
body[data-theme="gem"] .topbar .popbtn,
body[data-theme="gem"] .topbar > button {
  border: 1px solid transparent !important; box-shadow: none !important; background: #fff !important;
  font-weight: 700; padding: 2px 8px;
}
body[data-theme="gem"] .topbar .popbtn:hover, body[data-theme="gem"] .topbar > button:hover,
body[data-theme="gem"] .topbar .popbtn.open { background: #000 !important; color: #fff !important; }
/* Fenster-Rahmen um den ganzen sichtbaren Chartbereich */
body[data-theme="gem"] #chartwrap { outline: 2px solid #000; outline-offset: -2px; }
/* Titelleiste oben am "Fenster" (GEM-typisch, mit Schließ-Kästchen) */
body[data-theme="gem"] #chartwrap::before {
  content: "◳"; position: absolute; z-index: 95; top: 0; left: 0; right: 0; height: 19px;
  display: flex; align-items: center; padding-left: 8px; letter-spacing: 1px;
  font: 700 11px "Geneva", "MS Sans Serif", "Segoe UI", sans-serif; color: #000;
  background: #fff; border-bottom: 2px solid #000; pointer-events: none;
}
/* Resize-Gadget unten rechts */
body[data-theme="gem"] #chartwrap::after {
  content: "◢"; position: absolute; z-index: 95; right: 2px; bottom: 2px; width: 16px; height: 16px;
  background: #fff; border: 1px solid #000; color: #000; font-size: 12px; line-height: 14px;
  text-align: center; pointer-events: none;
}

/* 🔔 Alarm-Panel */
#alarmpanel {
  position: absolute; top: 10px; right: 12px; z-index: 100002; display: none;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 11px; box-shadow: 0 14px 36px rgba(0,0,0,.55); padding: 11px 13px;
  font-size: 12px; min-width: 264px; max-width: 320px; max-height: 86%; overflow: auto; backdrop-filter: blur(4px);
}
#alarmpanel.open { display: block; }
#alarmpanel .thd { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
#alarmpanel .chk { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--text); cursor: pointer; }
#alarmpanel .trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
#alarmpanel .tk { color: var(--muted); }
#alarmpanel input[type=text], #alarmpanel input[type=number] { background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); border-radius: 6px; padding: 4px 7px; }
#alarmpanel .row { display: flex; gap: 6px; flex-wrap: wrap; }
#alarmpanel .row .btn { flex: 1; }

/* Mini-AI-Panel (lokaler Assistent) */
#aipanel {
  position: absolute; top: 10px; right: 12px; z-index: 100002; display: none;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 11px; box-shadow: 0 14px 36px rgba(0,0,0,.55); padding: 11px 13px;
  font-size: 12px; min-width: 290px; max-width: 360px; max-height: 86%; overflow: auto; backdrop-filter: blur(4px);
}
#aipanel.open { display: block; }
#aipanel .thd { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#aipanel .tmuted { color: var(--muted); font-size: 11px; }
#aipanel .chk { display: flex; align-items: center; gap: 7px; padding: 5px 0; color: var(--text); cursor: pointer; }
#aipanel .kilog { min-height: 90px; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 5px; margin: 4px 0 7px; padding: 6px; background: color-mix(in srgb, var(--field) 60%, transparent); border-radius: 8px; }
#aipanel .kimsg { padding: 5px 8px; border-radius: 7px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
#aipanel .kiuser { align-self: flex-end; background: var(--accent); color: #fff; max-width: 85%; }
#aipanel .kibot { align-self: flex-start; background: color-mix(in srgb, var(--fieldbd) 50%, transparent); color: var(--text); max-width: 92%; }
#aipanel .kierr { align-self: flex-start; background: rgba(255,90,90,.16); color: #ff9b97; max-width: 92%; }
#aipanel .kidenk { color: var(--muted); font-style: italic; font-size: 11px; margin-bottom: 6px; }
#aipanel .kirow { display: flex; gap: 6px; }
#aipanel .kirow input { flex: 1; background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); border-radius: 6px; padding: 6px 8px; }
#aipanel .kihelp { margin-top: 7px; }
#aipanel .kihelp summary { cursor: pointer; color: var(--muted); }
#aipanel code { background: color-mix(in srgb, var(--fieldbd) 40%, transparent); padding: 1px 4px; border-radius: 4px; }
#aipanel .kidot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 70%, transparent); }
#aipanel .kidot.on { background: #46d369; box-shadow: 0 0 7px #46d369; }
#aipanel .kidot.off { background: #ff5b5b; box-shadow: 0 0 7px #ff5b5b; }
#aipanel .kigear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1; }
#aipanel .kigear:hover { color: var(--text); }
#aipanel .kiset { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fieldbd); }
#aipanel .kiset select, #aipanel .kiset input[type=number] { background: var(--field); color: var(--text); border: 1px solid var(--fieldbd); border-radius: 6px; padding: 4px 6px; }
#aipanel .kihd { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
#aipanel .trow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
#aipanel .row { display: flex; gap: 6px; flex-wrap: wrap; }
#aipanel .row .btn { flex: 1; }

/* KI-Popup/Banner direkt auf dem Chart */
#kipopup {
  position: absolute; top: 54px; left: 50%; transform: translate(-50%, -8px);
  z-index: 100050; max-width: min(560px, 86%); display: none; opacity: 0;
  background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--text);
  border: 2px solid var(--accent); border-radius: 12px; padding: 11px 36px 11px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55); backdrop-filter: blur(5px);
  font-size: 13px; line-height: 1.45; transition: opacity .25s, transform .25s;
}
#kipopup.show { display: block; opacity: 1; transform: translate(-50%, 0); }
#kipopup .kipbody { white-space: pre-wrap; word-break: break-word; }
#kipopup .kipx { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
#kipopup .kipx:hover { color: var(--text); }
#alarmlog { max-height: 150px; overflow: auto; }
#alarmlog .alrow { padding: 4px 2px; border-bottom: 1px solid var(--border); }
#alarmlog .altime { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 5px; }

/* GEM: klassischer Atari/TOS-Pfeil-Mauszeiger + Desktop-Pattern */
body[data-theme="gem"], body[data-theme="gem"] button, body[data-theme="gem"] .popbtn,
body[data-theme="gem"] .toolitem, body[data-theme="gem"] .mbtn, body[data-theme="gem"] select,
body[data-theme="gem"] .seg button, body[data-theme="gem"] canvas, body[data-theme="gem"] #chartwrap {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24"><path d="M2 2 L2 17 L6 13 L9 20 L12 19 L9 12 L15 12 Z" fill="black" stroke="white" stroke-width="1"/></svg>') 2 2, default !important;
}
body[data-theme="gem"] input[type="text"], body[data-theme="gem"] input[type="number"] { cursor: text !important; }
/* GEM-Desktop: feines 1-bit-Raster im Hintergrund (hinter Topbar/Rändern) */
body[data-theme="gem"] {
  background-image: repeating-conic-gradient(#cfcfcf 0% 25%, #ffffff 0% 50%);
  background-size: 4px 4px;
}
body[data-theme="gem"] .topbar { background: #fff !important; }

/* Telegram-Anleitung (aufklappbar) */
.tghelp { font-size: 11px; color: var(--muted); margin: 2px 0 4px; }
.tghelp summary { cursor: pointer; color: var(--accent); user-select: none; }
.tghelp code { background: var(--field); padding: 0 3px; border-radius: 3px; font-size: 10px; }

/* Popmenus: nie über den Schirm wachsen (kein Verrutschen der Ansicht) */
.popmenu { max-height: 82vh; overflow-y: auto; overflow-x: hidden; }
/* Werkzeuge: 2-spaltig & kompakt */
#pop-draw { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; min-width: 360px; }
#pop-draw .hd { grid-column: 1 / -1; margin-top: 3px; }
#pop-draw .toolitem { white-space: nowrap; padding: 5px 7px; font-size: 12px; }
@media (max-width: 820px) { #pop-draw { grid-template-columns: 1fr; min-width: 0; } }

/* Alarm-Verlauf (versteckt hinter Symbol) */
.alhist { margin-top: 8px; }
.alhist summary { cursor: pointer; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; user-select: none; }
#alarmaktiv .alrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--border); }

/* 🎨 Farbwähler-Popup */
.farbpop { position: fixed; z-index: 200001; display: flex; flex-wrap: wrap; gap: 5px; width: 132px;
  padding: 8px; background: var(--panel); border: 1px solid var(--fieldbd); border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.farbpop .sw { width: 22px; height: 22px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.farbpop .sw:hover { transform: scale(1.12); }
.farbpop .sw.on { border-color: #fff; box-shadow: 0 0 0 1px #000; }

/* Sticker-Palette Popup */
.stickerpop { position: fixed; z-index: 200001; display: flex; flex-wrap: wrap; gap: 6px; max-width: 268px;
  max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px; background: var(--panel); border: 1px solid var(--fieldbd); border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.stickerpop .sticker-item { background: transparent; border: 2px solid transparent; border-radius: 7px;
  cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; }
.stickerpop .sticker-item:hover { border-color: var(--accent, #46c8ff); background: var(--field, rgba(255,255,255,.1)); }
.stickerpop .sticker-hint { font-size: 12px; color: var(--text); opacity: .7; padding: 4px; }

/* TF-Schnellwahl (Dropdown in der Topbar) */
.tfquick { display: inline-flex; gap: 2px; }
select.tfquicksel { background: var(--field); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 4px; font-size: 11px; font-weight: 600; cursor: pointer;
  line-height: 1; height: 24px; }
/* Mobil: Ebenen-Schnellwahl als feste BOTTOM-NAVIGATION in der Daumen-Zone
   (Material/HIG: max ~6 Items, ≥44px Targets, aktiver Zustand markiert).
   Vorher war sie mobil komplett versteckt -> Ebenen-Wechsel kaum möglich. */
@media (max-width: 820px) {
  .tfquick {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 200000; gap: 4px;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    /* Halbtransparent + Blur: schwebt ÜBER dem Chart (Nutzerwahl), Kerzen scheinen durch */
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  }
  select.tfquicksel { flex: 1 1 0; min-height: 44px; font-size: 13px; padding: 8px 4px; border-radius: 8px; width: 100%; }
  /* Chart nutzt die VOLLE Höhe; die Bottom-Nav liegt halbtransparent darüber (Nutzerwahl).
     Sie deckt die untersten ~57px (Zeitachse) teils ab — bewusst zugunsten maximaler Chart-Höhe. */
  #chartwrap { margin-bottom: 0; }
  /* Schwebende Buttons über die Bottom-Bar heben (body-Präfix: schlägt die
     später definierte Basis-Regel #mundo{bottom:12px}). z-index ÜBER die Nav
     (.tfquick = 200000), sonst malt/blurrt die halbtransparente Nav den Button zu.
     Zurück-Button nach UNTEN RECHTS (Nutzerwahl) — weg von der Nav-Mitte. */
  body #mundo { left: auto; right: 10px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 200001; }
  /* Im Fokus-Modus sitzt das Fokus-Beenden-X unten rechts -> Zurück-Button daneben (links davon), kein Überlapp. */
  body.focus #mundo { right: calc(10px + 34px + 8px); }
  body.focus #focusexit { bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 200001; }
}
/* Desktop: Chart-Menü ausblenden (die ULTRA/FEIN-Schnellwahl-Chips ersetzen es); mobil sichtbar. */
@media (min-width: 821px) { #chartbtn { display: none; } }

/* Mobiler Rückgängig-Button (dezent, immer erreichbar) – nur auf kleinen Screens */
#mundo { display: none; position: fixed; left: 10px; bottom: 12px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%; font-size: 20px; line-height: 40px; text-align: center;
  background: rgba(20,22,30,.72); color: #fff; border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 3px 10px rgba(0,0,0,.4); cursor: pointer; backdrop-filter: blur(2px); }
#mundo:active { background: var(--accent, #4cd0c0); }
@media (max-width: 820px) { #mundo { display: block; } }

/* ---- Atari GEM invertiert (body[data-theme=gemdark]): schwarzer Desktop ---- */
body[data-theme="gemdark"] { font-family: "Geneva", "MS Sans Serif", "Segoe UI", sans-serif !important;
  background-image: repeating-conic-gradient(#0a0a0a 0% 25%, #000 0% 50%); background-size: 4px 4px; }
body[data-theme="gemdark"] .topbar { background: #000 !important; border-bottom: 3px double #fff !important; }
body[data-theme="gemdark"] button, body[data-theme="gemdark"] select, body[data-theme="gemdark"] input,
body[data-theme="gemdark"] .popbtn, body[data-theme="gemdark"] .toolitem, body[data-theme="gemdark"] .mbtn,
body[data-theme="gemdark"] .popmenu, body[data-theme="gemdark"] #ctxmenu, body[data-theme="gemdark"] .pop,
body[data-theme="gemdark"] #overview, body[data-theme="gemdark"] #traderpanel, body[data-theme="gemdark"] #statspanel,
body[data-theme="gemdark"] #toolspanel, body[data-theme="gemdark"] #alarmpanel, body[data-theme="gemdark"] #status, body[data-theme="gemdark"] #toast {
  border-radius: 0 !important; background: #000 !important; color: #fff !important;
  border: 1px solid #fff !important; box-shadow: none !important; backdrop-filter: none !important; }
body[data-theme="gemdark"] .topbar .popbtn, body[data-theme="gemdark"] .topbar > button { border-color: transparent !important; }
body[data-theme="gemdark"] button:hover, body[data-theme="gemdark"] .popbtn:hover, body[data-theme="gemdark"] .toolitem:hover,
body[data-theme="gemdark"] .mbtn:hover, body[data-theme="gemdark"] .popbtn.open { background: #fff !important; color: #000 !important; }
body[data-theme="gemdark"] .hd, body[data-theme="gemdark"] .ovhd { background: #fff; color: #000 !important; padding: 2px 6px; }
body[data-theme="gemdark"] #chartwrap { outline: 2px solid #fff; outline-offset: -2px; }
body[data-theme="gemdark"] #chartwrap::before { content: "◳"; position: absolute; z-index: 95; top: 0; left: 0; right: 0; height: 19px;
  display: flex; align-items: center; padding-left: 8px; font: 700 11px "Geneva", sans-serif; color: #fff; background: #000; border-bottom: 2px solid #fff; pointer-events: none; }
body[data-theme="gemdark"] #chartwrap::after { content: "◢"; position: absolute; z-index: 95; right: 2px; bottom: 2px; width: 16px; height: 16px;
  background: #000; border: 1px solid #fff; color: #fff; font-size: 12px; line-height: 14px; text-align: center; pointer-events: none; }
body[data-theme="gemdark"], body[data-theme="gemdark"] canvas, body[data-theme="gemdark"] #chartwrap {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24"><path d="M2 2 L2 17 L6 13 L9 20 L12 19 L9 12 L15 12 Z" fill="white" stroke="black" stroke-width="1"/></svg>') 2 2, default !important; }

/* ===== KOMMANDOZENTRALE (body[data-theme=kommando]): moderne HUD/Terminal-Optik ===== */
body[data-theme="kommando"] { font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace !important;
  background:
    repeating-linear-gradient(0deg, rgba(47,230,196,.035) 0 1px, transparent 1px 3px),  /* dezente Scanlines */
    radial-gradient(120% 90% at 50% -10%, #07161b 0%, #04080b 60%); }
body[data-theme="kommando"] * { letter-spacing: .2px; }
body[data-theme="kommando"] .topbar { background: linear-gradient(#08151b, #050d12) !important;
  border-bottom: 1px solid var(--accent) !important; box-shadow: 0 1px 0 rgba(47,230,196,.25), 0 6px 18px rgba(0,0,0,.5) !important; }
/* Bedienelemente: kantig, mono, GROSS, leuchtende Akzent-Linie */
body[data-theme="kommando"] button, body[data-theme="kommando"] select, body[data-theme="kommando"] input,
body[data-theme="kommando"] .popbtn, body[data-theme="kommando"] .toolitem, body[data-theme="kommando"] .mbtn {
  border-radius: 3px !important; text-transform: uppercase; font-size: 11px; letter-spacing: .5px;
  background: #07151b !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
body[data-theme="kommando"] .popbtn:hover, body[data-theme="kommando"] .toolitem:hover, body[data-theme="kommando"] .mbtn:hover,
body[data-theme="kommando"] button:hover, body[data-theme="kommando"] .popbtn.open, body[data-theme="kommando"] #modeseg button.on {
  border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), 0 0 10px rgba(47,230,196,.35) !important; }
/* Panels = Konsolen-Module mit Akzent-Rahmen + Glow */
body[data-theme="kommando"] .popmenu, body[data-theme="kommando"] #ctxmenu, body[data-theme="kommando"] #overview,
body[data-theme="kommando"] #traderpanel, body[data-theme="kommando"] #statspanel, body[data-theme="kommando"] #toolspanel,
body[data-theme="kommando"] #alarmpanel, body[data-theme="kommando"] #aipanel, body[data-theme="kommando"] #changelog {
  border-radius: 4px !important; border: 1px solid var(--accent) !important; background: rgba(6,16,21,.96) !important;
  box-shadow: 0 0 0 1px rgba(47,230,196,.15), 0 10px 30px rgba(0,0,0,.6) !important; }
body[data-theme="kommando"] .hd, body[data-theme="kommando"] .ovhd, body[data-theme="kommando"] .sphd {
  text-transform: uppercase; letter-spacing: 1px; color: var(--accent) !important; border-bottom: 1px solid var(--border); }
/* Zahlen tabellarisch (zucken nicht) */
body[data-theme="kommando"] #status, body[data-theme="kommando"] #overview, body[data-theme="kommando"] #statspanel,
body[data-theme="kommando"] #traderpanel { font-variant-numeric: tabular-nums; }
body[data-theme="kommando"] #status { border: 1px solid var(--accent); color: var(--accent); text-shadow: 0 0 6px rgba(47,230,196,.5); }
/* Chart-Rahmen mit HUD-Eck-Brackets (Kommandozentrale) */
body[data-theme="kommando"] #chartwrap { outline: 1px solid var(--border); outline-offset: -1px; }
body[data-theme="kommando"] #chartwrap::before, body[data-theme="kommando"] #chartwrap::after {
  content: ""; position: absolute; z-index: 96; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--accent); filter: drop-shadow(0 0 4px rgba(47,230,196,.6)); }
body[data-theme="kommando"] #chartwrap::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
body[data-theme="kommando"] #chartwrap::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
body[data-theme="kommando"] .tfquick button.on { box-shadow: 0 0 8px rgba(47,230,196,.5); }
@media (prefers-reduced-motion: reduce) { body[data-theme="kommando"] { background: radial-gradient(120% 90% at 50% -10%, #07161b 0%, #04080b 60%); } }

/* ℹ Changelog-Panel */
#changelog { position: absolute; top: 10px; left: 12px; z-index: 100002; display: none;
  background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid var(--fieldbd);
  border-radius: 11px; box-shadow: 0 14px 36px rgba(0,0,0,.55); padding: 11px 13px; font-size: 12px;
  min-width: 250px; max-width: 340px; max-height: 80%; overflow: auto; backdrop-filter: blur(4px); }
#changelog.open { display: block; }
#changelog .thd { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: flex; justify-content: space-between; }
/* Schnellzugriff-Gruppe ganz rechts in der Topbar, monochrome Icons */
#topdock { display: flex; align-items: center; gap: 5px; }
.dockbtn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--field); border: 1px solid var(--fieldbd); border-radius: 8px; color: var(--text);
  opacity: .8; transition: opacity .12s, transform .12s, background .12s; }
.dockbtn:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, var(--field)); }
.dockbtn.open { opacity: 1; border-color: var(--accent); }
.dockbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Theme-Button sitzt ganz rechts -> Menü nach links öffnen, sonst läuft es aus dem Bild */
#pop-theme { min-width: 180px; left: auto; right: 0; transform-origin: top right; }
@media (max-width: 820px) { .dockbtn { width: 44px; height: 44px; } .dockbtn svg { width: 20px; height: 20px; } }
#changelog .thd { align-items: center; }
.pclose { background: transparent; border: 0; color: var(--muted); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 2px 5px; border-radius: 5px; }
.pclose:hover { color: var(--text); background: rgba(127,127,127,.18); }
#changelog .clv { font-weight: 700; color: var(--accent); margin-top: 7px; }
#changelog .cli { color: var(--text); padding-left: 6px; }

/* ---- Altes Charting-Papier (body[data-theme="paper"]) --------------------------------
   Stufe 1: Papier-Hintergrund (fix, bewegt sich nicht beim Pan/Zoom) + Knicke/Falten
   + Handschrift-Font fuer UI-Elemente. Kerzen bleiben normal (Standard-LWC).
   Falten via ::before/::after auf #chartwrap — pointer-events:none, z-index unter Charts.
   background-attachment:fixed -> Papier-Textur haengt am Viewport, nicht am Scroll.
   --------------------------------------------------------------------------- */
body[data-theme="paper"] {
  /* Vergilbter Papiergrundton mit mehrlagiger Textur:
     1) Haupt-Farbe: warmes Sepia-Gelb
     2) Radiale Vergilbungs-Flecken (Ueberalterung, ungleichmaessig)
     3) Feines SVG-Noise als data-URI (Papier-Korn) */
  background-color: #e4d8b8;
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 25%, rgba(210,185,120,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 75% 70%, rgba(195,165,95,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 55% 45%, rgba(230,210,155,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 25% 20% at 15% 80%, rgba(180,150,80,0.25) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: auto, auto, auto, auto, 200px 200px;
  font-family: "Ink Free", "Segoe Print", "Comic Sans MS", cursive;
}

/* Aktive Buttons im Paper-Theme: Tinte-Unterstrich statt digitaler Pill (passt zur Handzeichnung) */
body[data-theme="paper"] button.on,
body[data-theme="paper"] .seg button.on,
body[data-theme="paper"] .tfquick button.on {
  background: transparent !important;
  color: #3a2010 !important;
  border-bottom: 2px solid #5a3e1b !important;
  box-shadow: none !important;
  font-weight: bold;
}
/* UI-Panels und Steuerelemente im Paper-Theme: warme Papiertone */
body[data-theme="paper"] .topbar {
  background: rgba(232,220,185,0.92) !important;
  border-bottom: 1px solid #b0955a !important;
}
/* Werkzeugleisten links: nicht mehr digitales Floating-Panel, sondern wie aufs Papier gelegt --
   cremefarben, weicher Sepia-Rand, dezenter Schatten, Tinte-Icons. */
body[data-theme="paper"] #favbar,
body[data-theme="paper"] #favbar2 {
  background: rgba(231,219,184,0.90) !important;
  border: 1px solid rgba(120,92,45,0.45) !important;
  border-left: none !important;
  box-shadow: 2px 2px 7px rgba(90,65,25,0.18) !important;
  backdrop-filter: blur(1px);
}
body[data-theme="paper"] #favbar button,
body[data-theme="paper"] #favbar2 button {
  color: #4a3318 !important;
}
body[data-theme="paper"] #favbar button:hover,
body[data-theme="paper"] #favbar2 button:hover {
  background: rgba(180,150,85,0.22) !important;
  border-color: rgba(120,92,45,0.4) !important;
}
/* Aktives Werkzeug: warmer Tinte-Ton statt knalliger Akzent-Pille */
body[data-theme="paper"] #favbar button.on,
body[data-theme="paper"] #favbar2 button.on {
  background: rgba(120,92,45,0.28) !important;
  border-color: rgba(90,62,27,0.6) !important;
  color: #2e1d0a !important;
}
body[data-theme="paper"] .pop,
body[data-theme="paper"] .popmenu,
body[data-theme="paper"] #overview,
body[data-theme="paper"] #traderpanel,
body[data-theme="paper"] #statspanel,
body[data-theme="paper"] #toolspanel,
body[data-theme="paper"] #alarmpanel,
body[data-theme="paper"] #aipanel,
body[data-theme="paper"] #changelog,
body[data-theme="paper"] #status,
body[data-theme="paper"] #toast {
  font-family: "Ink Free", "Segoe Print", "Comic Sans MS", cursive;
}

/* Dezente Papierfalten auf dem Chart-Container: sehr sanfte Schattierungen, kaum sichtbar.
   pointer-events:none -> kein Blockieren von Mausklicks.
   z-index 1 -> HINTER LWC-Canvas (LWC hat eigenen Stacking-Context) und hinter Overlay (z-index 99999).
   background-attachment:fixed -> Falten haengen am Viewport, nicht am Chart-Scroll. */
body[data-theme="paper"] #chartwrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  /* Erste sanfte Falte: breites, weiches Uebergangsband, kaum Kontrast */
  background:
    linear-gradient(
      127deg,
      transparent 0%,
      transparent 24%,
      rgba(140,110,60,0.05) 29%,
      rgba(255,250,225,0.11) 33%,
      rgba(140,110,60,0.04) 38%,
      transparent 44%,
      transparent 100%
    ),
    /* Zweite schwaechere Falte leicht versetzt (ungleichmaessig, wie echtes Papier) */
    linear-gradient(
      54deg,
      transparent 0%,
      transparent 57%,
      rgba(130,100,55,0.04) 62%,
      rgba(255,250,220,0.09) 66%,
      rgba(130,100,55,0.03) 71%,
      transparent 76%,
      transparent 100%
    );
}

/* Feine Papier-Knitter-Textur + Rand-Vignette */
body[data-theme="paper"] #chartwrap::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    /* Ganz zarte dritte Richtung (ungleichmaessige Alterung) */
    linear-gradient(
      168deg,
      transparent 0%,
      transparent 43%,
      rgba(120,95,50,0.04) 49%,
      rgba(250,245,215,0.07) 53%,
      rgba(120,95,50,0.03) 58%,
      transparent 64%,
      transparent 100%
    ),
    /* Randverdunkelung: weicher, geringere Deckkraft */
    radial-gradient(
      ellipse 110% 110% at 50% 50%,
      transparent 52%,
      rgba(95,68,28,0.13) 100%
    );
}

/* ---- SataLex Lunar: Observatorium/Premium-Glas (body[data-theme=lunar]) -------- */
/* Nur Optik: weiche Glas-Panels, größere Radien, dezenter Mond-Glow. Kein Layout-Eingriff. */
body[data-theme="lunar"] .popmenu,
body[data-theme="lunar"] #ctxmenu,
body[data-theme="lunar"] #toolspanel,
body[data-theme="lunar"] #statspanel,
body[data-theme="lunar"] #alarmpanel,
body[data-theme="lunar"] #traderpanel,
body[data-theme="lunar"] #overview {
  border-radius: 14px;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 16px 40px rgba(3, 6, 14, 0.55), 0 0 0 1px rgba(199, 184, 255, 0.10);
}
body[data-theme="lunar"] button,
body[data-theme="lunar"] select,
body[data-theme="lunar"] input,
body[data-theme="lunar"] .popbtn,
body[data-theme="lunar"] .toolitem,
body[data-theme="lunar"] .seg button {
  border-radius: 10px;
}
body[data-theme="lunar"] #brand { text-shadow: 0 0 14px rgba(199, 184, 255, 0.55); }
body[data-theme="lunar"] .toolitem.on,
body[data-theme="lunar"] .popbtn.open {
  box-shadow: 0 0 0 1px rgba(90, 209, 200, 0.45), 0 0 12px rgba(90, 209, 200, 0.25);
}

/* ---- SataLex Quant: Trading-Desk/Terminal (body[data-theme=quant]) ------------- */
/* Nur Optik: Mono-Schrift, scharfe 1px-Kanten, dichte Versalien-Header. Kein Layout-Eingriff. */
body[data-theme="quant"] {
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.1px;
}
body[data-theme="quant"] .popmenu,
body[data-theme="quant"] #ctxmenu,
body[data-theme="quant"] #toolspanel,
body[data-theme="quant"] #statspanel,
body[data-theme="quant"] #alarmpanel,
body[data-theme="quant"] #traderpanel,
body[data-theme="quant"] #overview,
body[data-theme="quant"] button,
body[data-theme="quant"] select,
body[data-theme="quant"] input,
body[data-theme="quant"] .popbtn,
body[data-theme="quant"] .toolitem,
body[data-theme="quant"] .seg button {
  border-radius: 2px;
}
body[data-theme="quant"] .topbar { border-bottom: 1px solid var(--border); }
body[data-theme="quant"] .hd,
body[data-theme="quant"] .ovhd {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
body[data-theme="quant"] #statspanel td,
body[data-theme="quant"] #overview,
body[data-theme="quant"] #status {
  font-variant-numeric: tabular-nums;
}

/* ---- SataLex Lunar: Observatorium-Layout (Backdrop + schwebende Glas-Karten) ---- */
/* Dezenter Mond-/Aurora-Schimmer hinter dem Chart (unter allen Canvas-Ebenen, kein Klick-Fang). */
body[data-theme="lunar"] #chartwrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130px 130px at 79% 21%, rgba(199,184,255,0.12), rgba(199,184,255,0.04) 58%, transparent 72%),
    radial-gradient(150% 90% at 50% 122%, rgba(90,209,200,0.10), transparent 60%),
    radial-gradient(110% 80% at 50% -22%, rgba(120,150,255,0.07), transparent 55%);
}
/* WICHTIG: KEIN backdrop-filter auf #bar — das erzeugt einen Stacking-Context und faengt alle
   Topbar-Popmenues (Theme/Werkzeuge…) in #bar -> sie landen hinter dem Chart und sind unklickbar. */
body[data-theme="lunar"] #bar {
  background: var(--panel);
}
body[data-theme="lunar"] #overview,
body[data-theme="lunar"] #ratiochip {
  box-shadow: 0 16px 40px rgba(3,6,14,0.55), 0 0 0 1px rgba(199,184,255,0.10);
}
body[data-theme="lunar"] #ratiochip { border-radius: 999px; }
body[data-theme="lunar"] #brand { color: #c7b8ff; opacity: .58; }
body[data-theme="lunar"] #favbar,
body[data-theme="lunar"] #favbar2 {
  border-radius: 0 12px 12px 0; box-shadow: 0 0 24px rgba(90,209,200,0.10);
}
body[data-theme="lunar"] #status {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---- SataLex Quant: Terminal-Layout (Grid-Backdrop + Command-/Status-Leiste) ---- */
/* Feines Terminal-Raster hinter dem Chart. */
body[data-theme="quant"] #chartwrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(125,147,176,0.05) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(125,147,176,0.05) 33px 34px);
}
body[data-theme="quant"] #bar { border-top: 2px solid var(--accent); }
body[data-theme="quant"] #overview,
body[data-theme="quant"] #toolspanel,
body[data-theme="quant"] #statspanel,
body[data-theme="quant"] #alarmpanel,
body[data-theme="quant"] #aipanel {
  box-shadow: none; border: 1px solid var(--border);
}
body[data-theme="quant"] #ratiochip { border-radius: 2px; }
body[data-theme="quant"] #status { border-top: 1px solid var(--accent); letter-spacing: .3px; }
body[data-theme="quant"] #status::before { content: "▸ "; color: var(--accent); }
body[data-theme="quant"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-theme="quant"] ::-webkit-scrollbar-thumb { background: var(--fieldbd); border-radius: 0; }
body[data-theme="quant"] ::-webkit-scrollbar-track { background: var(--field); }

/* ---- 80er Heimcomputer / C64-CRT (body[data-theme=eighties]) ------------------ */
/* Schlicht + verspielt: blauer Bildschirm, Block-Mono, 2px-Rahmen, 0 Radius, Scanlines, blink-Cursor. */
body[data-theme="eighties"] {
  font-family: "Courier New", "Consolas", ui-monospace, monospace;
  letter-spacing: .3px;
}
body[data-theme="eighties"] button,
body[data-theme="eighties"] select,
body[data-theme="eighties"] input,
body[data-theme="eighties"] .popbtn,
body[data-theme="eighties"] .toolitem,
body[data-theme="eighties"] .seg button,
body[data-theme="eighties"] .popmenu,
body[data-theme="eighties"] #ctxmenu,
body[data-theme="eighties"] #toolspanel,
body[data-theme="eighties"] #statspanel,
body[data-theme="eighties"] #overview,
body[data-theme="eighties"] #alarmpanel,
body[data-theme="eighties"] #aipanel,
body[data-theme="eighties"] #traderpanel,
body[data-theme="eighties"] #ratiochip,
body[data-theme="eighties"] #status {
  border-radius: 0 !important;
}
body[data-theme="eighties"] .popmenu,
body[data-theme="eighties"] #ctxmenu,
body[data-theme="eighties"] #toolspanel,
body[data-theme="eighties"] #statspanel,
body[data-theme="eighties"] #overview,
body[data-theme="eighties"] #alarmpanel,
body[data-theme="eighties"] #aipanel,
body[data-theme="eighties"] #traderpanel {
  border: 2px solid var(--border); box-shadow: none;
}
body[data-theme="eighties"] .hd,
body[data-theme="eighties"] .ovhd,
body[data-theme="eighties"] .grp,
body[data-theme="eighties"] #toolspanel .tghd { text-transform: uppercase; letter-spacing: .8px; }
/* Lesbarer dunkler Text auf gelbem Akzent-Fill (sonst Weiß auf Gelb) */
body[data-theme="eighties"] .btn.an,
body[data-theme="eighties"] #favbar button.on,
body[data-theme="eighties"] #favbar2 button.on,
body[data-theme="eighties"] #toolspanel .lvlchip.akt { color: #1a1640 !important; }
/* Einfache Scanlines + Terminal-Rahmen ums Chart */
body[data-theme="eighties"] #chartwrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
}
body[data-theme="eighties"] #chartwrap { outline: 2px solid var(--border); outline-offset: -2px; }
/* Brand-Glow + blinkender READY-Block-Cursor in der Statusleiste */
body[data-theme="eighties"] #brand { color: var(--accent); text-shadow: 0 0 8px var(--accent); opacity: .72; }
body[data-theme="eighties"] #status::after {
  content: " \25AE"; color: var(--accent); animation: crtblink 1s step-end infinite;
}
@keyframes crtblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="eighties"] #status::after { animation: none; }
}
body[data-theme="eighties"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
body[data-theme="eighties"] ::-webkit-scrollbar-track { background: var(--field); }

/* ============================================================
   UI/UX-Audit Verbesserungen (additiv, theme-treu).
   A11y: sichtbarer Tastatur-Fokus + einheitliche Disabled-Optik.
   ============================================================ */
/* A1 — Keyboard-Fokus war NIRGENDS sichtbar (kein :focus-visible existierte). */
.btn:focus-visible, .popbtn:focus-visible, .toolitem:focus-visible,
.seg button:focus-visible, .dockbtn:focus-visible, .mbtn:focus-visible,
.tvis:focus-visible, .tonce:focus-visible, .tdel:focus-visible,
.chartrow .chartload:focus-visible, .chartrow .chartmini:focus-visible,
#ctxmenu .it:focus-visible, #minitoolbar button:focus-visible,
.pclose:focus-visible, #focusexit:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
#bar select:focus-visible, #bar input:focus-visible, #numpop .npinput:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* ↪ Cycle "zurück zu Jetzt"-Button (erscheint nach Sprung zu Vergangenheits-Woche) */
#cycback { position: fixed; right: 14px; bottom: 52px; z-index: 200000; display: none;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#cycback:hover { filter: brightness(1.12); }
.cycjump { line-height: 1.1; }

/* ⊞ Split-View: 2 Charts nebeneinander (iFrame-Pane + ziehbarer Trenner) */
#chartsplit { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; }
#chartsplit > #chartwrap { flex: 1 1 0; min-width: 0; }
#splitdivider { display: none; flex: 0 0 7px; cursor: col-resize; background: var(--fieldbd); position: relative; touch-action: none; }
#splitdivider::after { content: ""; position: absolute; inset: 0 2px; background: var(--accent); opacity: 0; transition: opacity .12s; }
#splitdivider:hover::after { opacity: .55; }
#pane2 { display: none; flex: 1 1 0; min-width: 0; border-left: 1px solid var(--fieldbd); background: var(--bg); }
body.spliton #splitdivider { display: block; }
body.spliton #pane2 { display: flex; }
#pane2frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
body.pane2 #splitbtn, body.pane2 #splitsyncbtn { display: none; }   /* kein verschachtelter Split */
#splitsyncbtn.on, #splitbtn.on { color: var(--accent); }

/* 🎨 Objekt-Farbprofil: Preset-Swatches + eigener Farbknopf im Picker */
.objprof-sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(127,127,127,.5); cursor: pointer; padding: 0; transition: transform .08s; }
.objprof-sw:hover { transform: scale(1.12); border-color: var(--text); }
.farbpop .sw-custom { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: 1px dashed rgba(127,127,127,.6); cursor: pointer; overflow: hidden; position: relative; }
.farbpop .sw-custom input[type=color] { width: 200%; height: 200%; border: none; padding: 0; background: none; cursor: pointer; position: absolute; left: -50%; top: -50%; }

/* C1 — Disabled-Controls sahen identisch zu aktiven aus. */
.btn:disabled, .popbtn:disabled, .toolitem:disabled, .seg button:disabled,
.dockbtn:disabled, .mbtn:disabled, #minitoolbar button:disabled,
#bar select:disabled, #bar input:disabled, .popmenu select:disabled,
.popmenu input:disabled, .chartrow .chartload:disabled, .chartrow .chartmini:disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none; filter: none;
}

/* ============================================================
   3 neue Themes (v2.24): Tron · Super Mario · Alchemie.
   Farben kommen aus THEMES (CSS-Vars); hier nur Extra-Flair.
   ============================================================ */
/* ⏻ TRON — Neon-Gitter, Glow-Kanten, Mono */
body[data-theme="tron"] { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,229,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,229,255,.05) 0 1px, transparent 1px 28px),
    radial-gradient(120% 90% at 50% -10%, #03161f 0%, #00060a 65%); }
body[data-theme="tron"] .topbar { background: linear-gradient(#04141d,#00080c) !important;
  border-bottom: 1px solid var(--accent) !important; box-shadow: 0 0 12px rgba(0,229,255,.3) !important; }
body[data-theme="tron"] button, body[data-theme="tron"] select, body[data-theme="tron"] input,
body[data-theme="tron"] .popbtn, body[data-theme="tron"] .toolitem, body[data-theme="tron"] .mbtn {
  border-radius: 2px !important; background: #04141d !important; color: var(--text) !important; border: 1px solid var(--fieldbd) !important; }
body[data-theme="tron"] .popbtn:hover, body[data-theme="tron"] .toolitem:hover, body[data-theme="tron"] button:hover,
body[data-theme="tron"] .popbtn.open, body[data-theme="tron"] #modeseg button.on {
  border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 9px rgba(0,229,255,.55) !important; }
body[data-theme="tron"] .popmenu, body[data-theme="tron"] #overview, body[data-theme="tron"] #statspanel,
body[data-theme="tron"] #toolspanel, body[data-theme="tron"] #alarmpanel, body[data-theme="tron"] #aipanel,
body[data-theme="tron"] #changelog, body[data-theme="tron"] #ctxmenu {
  border: 1px solid var(--accent) !important; background: rgba(3,18,26,.97) !important;
  box-shadow: 0 0 0 1px rgba(0,229,255,.18), 0 0 24px rgba(0,229,255,.2) !important; }
body[data-theme="tron"] #chartwrap { outline: 1px solid rgba(0,229,255,.4); outline-offset: -1px; }

/* 🍄 SUPER MARIO — Block-Optik, dicke Kanten, Münz-Gold, kein Radius */
body[data-theme="mario"] { font-family: "Trebuchet MS", Verdana, system-ui, sans-serif !important; }
body[data-theme="mario"] .topbar { background: #1f2fb8 !important; border-bottom: 4px solid #0b1a6b !important; }
body[data-theme="mario"] button, body[data-theme="mario"] select, body[data-theme="mario"] input,
body[data-theme="mario"] .popbtn, body[data-theme="mario"] .toolitem, body[data-theme="mario"] .mbtn {
  border-radius: 0 !important; font-weight: 700 !important; background: #2a3ad0 !important; color: #fff !important;
  border: 2px solid #0b1a6b !important; box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.28) !important; }
body[data-theme="mario"] .popbtn:hover, body[data-theme="mario"] .toolitem:hover, body[data-theme="mario"] button:hover,
body[data-theme="mario"] .popbtn.open, body[data-theme="mario"] #modeseg button.on {
  background: var(--accent) !important; color: #fff !important; border-color: #7a0f0c !important; }
body[data-theme="mario"] .popmenu, body[data-theme="mario"] #overview, body[data-theme="mario"] #statspanel,
body[data-theme="mario"] #toolspanel, body[data-theme="mario"] #alarmpanel, body[data-theme="mario"] #aipanel,
body[data-theme="mario"] #changelog, body[data-theme="mario"] #ctxmenu {
  border-radius: 0 !important; border: 3px solid #0b1a6b !important; background: #1f2fb8 !important; box-shadow: 6px 6px 0 rgba(0,0,0,.35) !important; }
body[data-theme="mario"] .hd, body[data-theme="mario"] .ovhd, body[data-theme="mario"] .sphd { color: #fbd000 !important; text-transform: uppercase; letter-spacing: .5px; }
body[data-theme="mario"] #chartwrap { outline: 4px solid #0b1a6b; outline-offset: -4px; }

/* 🜍 ALCHEMIE — Obsidian + Antikgold, Serifen, hermetische Symbole */
body[data-theme="alchemy"] { font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif !important;
  background: radial-gradient(120% 90% at 50% 0%, #1c140c 0%, #0d0905 70%); }
body[data-theme="alchemy"] .topbar { background: linear-gradient(#1d150c,#120d08) !important;
  border-bottom: 1px solid var(--accent) !important; box-shadow: 0 1px 0 rgba(200,164,77,.3) !important; }
body[data-theme="alchemy"] button, body[data-theme="alchemy"] select, body[data-theme="alchemy"] input,
body[data-theme="alchemy"] .popbtn, body[data-theme="alchemy"] .toolitem, body[data-theme="alchemy"] .mbtn {
  background: #1a130b !important; color: var(--text) !important; border: 1px solid var(--fieldbd) !important; }
body[data-theme="alchemy"] .popbtn:hover, body[data-theme="alchemy"] .toolitem:hover, body[data-theme="alchemy"] button:hover,
body[data-theme="alchemy"] .popbtn.open, body[data-theme="alchemy"] #modeseg button.on {
  border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 9px rgba(200,164,77,.35) !important; }
body[data-theme="alchemy"] .popmenu, body[data-theme="alchemy"] #overview, body[data-theme="alchemy"] #statspanel,
body[data-theme="alchemy"] #toolspanel, body[data-theme="alchemy"] #alarmpanel, body[data-theme="alchemy"] #aipanel,
body[data-theme="alchemy"] #changelog, body[data-theme="alchemy"] #ctxmenu {
  border: 1px double var(--accent) !important; background: rgba(20,14,8,.97) !important;
  box-shadow: 0 0 0 1px rgba(200,164,77,.14), 0 10px 30px rgba(0,0,0,.6) !important; }
body[data-theme="alchemy"] .hd, body[data-theme="alchemy"] .ovhd, body[data-theme="alchemy"] .sphd { color: var(--accent) !important; letter-spacing: .5px; }
body[data-theme="alchemy"] #chartwrap { outline: 1px solid rgba(200,164,77,.35); outline-offset: -1px; }
body[data-theme="alchemy"] #chartwrap::before { content: "\2609 \263D \263F \2640 \2641 \2642 \2643 \2644"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 15px; letter-spacing: 8px; color: rgba(200,164,77,.22); pointer-events: none; z-index: 1; }
body[data-theme="alchemy"] #chartwrap::after { content: "\1F70D \1F714 \1F702 \1F701 \1F703 \1F704"; position: absolute; bottom: 8px; right: 12px;
  font-size: 14px; letter-spacing: 6px; color: rgba(200,164,77,.2); pointer-events: none; z-index: 1; }

/* ============================================================
   3 unique Themes (v2.25): Vitrail · Kintsugi · Mercury.
   Hintergrund auf #chartwrap (!important schlägt applyTheme-Inline-Solid),
   damit das besondere Backdrop IM Chart sichtbar ist (LWC-Layer transparent).
   ============================================================ */
/* ⛪ VITRAIL — Kathedral-Glas: Rosette-Glow + Blei-Gitter, Serifen, Gold-Akzent */
body[data-theme="vitrail"] { font-family: "Cinzel", "Georgia", "Times New Roman", serif !important; }
body[data-theme="vitrail"] #chartwrap { background-color: #0a0610 !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255,184,56,.07) 0%, rgba(106,63,160,.11) 30%, rgba(10,6,16,0) 60%),
    repeating-linear-gradient(0deg, rgba(74,45,104,.10) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(74,45,104,.10) 0 1px, transparent 1px 42px) !important; }
body[data-theme="vitrail"] .topbar { background: linear-gradient(#160c20,#0a0610) !important; border-bottom: 1px solid var(--accent) !important; box-shadow: 0 0 14px rgba(255,184,56,.22) !important; }
body[data-theme="vitrail"] button, body[data-theme="vitrail"] select, body[data-theme="vitrail"] input,
body[data-theme="vitrail"] .popbtn, body[data-theme="vitrail"] .toolitem, body[data-theme="vitrail"] .mbtn {
  background: #170d22 !important; color: var(--text) !important; border: 1px solid var(--fieldbd) !important; letter-spacing: .03em; }
body[data-theme="vitrail"] .popbtn:hover, body[data-theme="vitrail"] .toolitem:hover, body[data-theme="vitrail"] button:hover,
body[data-theme="vitrail"] .popbtn.open, body[data-theme="vitrail"] #modeseg button.on {
  border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 9px rgba(255,184,56,.4) !important; }
body[data-theme="vitrail"] .popmenu, body[data-theme="vitrail"] #overview, body[data-theme="vitrail"] #statspanel,
body[data-theme="vitrail"] #toolspanel, body[data-theme="vitrail"] #alarmpanel, body[data-theme="vitrail"] #aipanel,
body[data-theme="vitrail"] #changelog, body[data-theme="vitrail"] #ctxmenu {
  border: 2px solid var(--border) !important; background: rgba(20,11,28,.97) !important; box-shadow: inset 0 0 14px rgba(255,184,56,.10), 0 10px 30px rgba(0,0,0,.6) !important; }
body[data-theme="vitrail"] .hd, body[data-theme="vitrail"] .ovhd, body[data-theme="vitrail"] .sphd { color: var(--accent) !important; letter-spacing: .5px; }

/* 金継ぎ KINTSUGI — Lack + Gold: warmes Backdrop mit Vignette, Serifen, Gold-Underline */
body[data-theme="kintsugi"] { font-family: "Cormorant Garamond", "Georgia", serif !important; }
body[data-theme="kintsugi"] #chartwrap { background-color: #14100c !important;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(212,162,58,.06) 0%, rgba(20,16,12,0) 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%) !important; }
body[data-theme="kintsugi"] .topbar { background: linear-gradient(#1d1812,#14100c) !important; border-bottom: 1px solid var(--accent) !important; box-shadow: 0 1px 0 rgba(212,162,58,.3) !important; }
body[data-theme="kintsugi"] button, body[data-theme="kintsugi"] select, body[data-theme="kintsugi"] input,
body[data-theme="kintsugi"] .popbtn, body[data-theme="kintsugi"] .toolitem, body[data-theme="kintsugi"] .mbtn {
  background: #1a150f !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
body[data-theme="kintsugi"] .popbtn:hover, body[data-theme="kintsugi"] .toolitem:hover, body[data-theme="kintsugi"] button:hover,
body[data-theme="kintsugi"] .popbtn.open, body[data-theme="kintsugi"] #modeseg button.on {
  color: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 10px rgba(212,162,58,.3) !important; }
body[data-theme="kintsugi"] .popmenu, body[data-theme="kintsugi"] #overview, body[data-theme="kintsugi"] #statspanel,
body[data-theme="kintsugi"] #toolspanel, body[data-theme="kintsugi"] #alarmpanel, body[data-theme="kintsugi"] #aipanel,
body[data-theme="kintsugi"] #changelog, body[data-theme="kintsugi"] #ctxmenu {
  border: 1px solid var(--border) !important; background: rgba(29,24,18,.97) !important; box-shadow: inset 0 1px 0 rgba(212,162,58,.25), 0 10px 28px rgba(0,0,0,.6) !important; }
body[data-theme="kintsugi"] .hd, body[data-theme="kintsugi"] .ovhd, body[data-theme="kintsugi"] .sphd { color: var(--accent) !important; }

/* ☿ MERCURY — gebürsteter Stahl: Chrom-Verlauf + feine Riefen, Inter, Silber-Akzent */
body[data-theme="mercury"] { font-family: "Inter", "Helvetica Neue", system-ui, sans-serif !important; letter-spacing: .02em; }
body[data-theme="mercury"] #chartwrap { background-color: #07090c !important;
  background-image:
    linear-gradient(180deg, #11161d 0%, #07090c 100%),
    radial-gradient(120% 80% at 12% 6%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px) !important; }
body[data-theme="mercury"] .topbar { background: linear-gradient(#11161d,#07090c) !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.08) !important; }
body[data-theme="mercury"] button, body[data-theme="mercury"] select, body[data-theme="mercury"] input,
body[data-theme="mercury"] .popbtn, body[data-theme="mercury"] .toolitem, body[data-theme="mercury"] .mbtn {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
body[data-theme="mercury"] .popbtn:hover, body[data-theme="mercury"] .toolitem:hover, body[data-theme="mercury"] button:hover,
body[data-theme="mercury"] .popbtn.open, body[data-theme="mercury"] #modeseg button.on {
  border-color: var(--accent) !important; box-shadow: 0 0 8px rgba(184,196,208,.3) !important; }
body[data-theme="mercury"] #modeseg button.on { background: linear-gradient(180deg,#cfd9e3,#9aa8b6) !important; color: #0f141b !important; }
body[data-theme="mercury"] .popmenu, body[data-theme="mercury"] #overview, body[data-theme="mercury"] #statspanel,
body[data-theme="mercury"] #toolspanel, body[data-theme="mercury"] #alarmpanel, body[data-theme="mercury"] #aipanel,
body[data-theme="mercury"] #changelog, body[data-theme="mercury"] #ctxmenu {
  border: 1px solid var(--border) !important; border-top: 1px solid rgba(255,255,255,.12) !important; background: rgba(15,20,27,.97) !important; box-shadow: 0 8px 26px rgba(0,0,0,.55) !important; }
body[data-theme="mercury"] .hd, body[data-theme="mercury"] .ovhd, body[data-theme="mercury"] .sphd { color: var(--status) !important; }

/* SataLex Markenschriftzug in der Topbar */
#brandmark{font-weight:700;letter-spacing:.04em;font-size:15px;color:var(--accent,#6aa0ff);padding:0 10px 0 2px;white-space:nowrap;align-self:center;}