/* iC Charts – Gestaltung. Farben als Variablen, Hell/Dunkel über html[data-theme], Akzent über html[data-accent]. */
:root, html[data-theme="dark"] {
  --bg: #131722; --panel: #1e222d; --panel-2: #2a2e39; --panel-3: #232733; --line: #2a2e39; --line-2: #363a45;
  --text: #d1d4dc; --text-strong: #ffffff; --muted: #787b86; --chart-text: #b2b5be; --grid: #1e222d;
  --up: #089981; --down: #f23645; --claude: #d97757; --label-bg: rgba(19,23,34,.88);
  --shadow: 0 10px 30px rgba(0,0,0,.45); --back: rgba(5,8,14,.55);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f0f3fa; --panel-3: #f7f8fa; --line: #e0e3eb; --line-2: #d1d4dc;
  --text: #131722; --text-strong: #000000; --muted: #787b86; --chart-text: #131722; --grid: #f0f3fa;
  --label-bg: rgba(255,255,255,.92); --shadow: 0 10px 30px rgba(20,30,60,.16); --back: rgba(20,24,32,.35);
  color-scheme: light;
}
html { --accent: #2962ff; --accent-h: #1e53e5; }
html[data-accent="orange"] { --accent: #ff8a1f; --accent-h: #f07800; }
html[data-accent="neutral"] { --accent: #0f766e; --accent-h: #0b5f58; }
html { --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-font="small"] { font-size: 12px; } html[data-font="large"] { font-size: 14.5px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--font); }
html[data-font="small"] body { font-size: 12px; } html[data-font="large"] body { font-size: 14.5px; }
body { display: flex; flex-direction: column; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
button { background: transparent; border: 0; cursor: pointer; padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
button:hover { background: var(--panel-2); }
button.active { color: var(--accent); background: var(--accent-soft); }
button:disabled { opacity: .5; cursor: default; }
a { color: var(--accent); }
.btn { border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 12px; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-h); }
.btn.danger { background: var(--down); border-color: var(--down); color: #fff; }
button.link, a.link { color: var(--muted); padding: 2px 0; text-decoration: none; }
button.link:hover, a.link:hover { background: none; color: var(--text); }
select, input, textarea { background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 5px 7px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
[hidden] { display: none !important; }
.up { color: var(--up); } .down { color: var(--down); }
.small { font-size: 12px; } .muted { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex-shrink: 0; }
.dot.live, .dot.ok { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.dot.poll { background: #f7a600; } .dot.bad { background: var(--down); }
body.sorting, body.sorting * { user-select: none; cursor: grabbing !important; }

/* ---------- Kopfzeile ---------- */
.topbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; min-height: 42px; }
.brand { font-weight: 600; font-size: 15px; margin-right: 4px; display: flex; align-items: center; gap: 6px; }
.logo { background: var(--accent); color: #fff; border-radius: 5px; padding: 1px 5px; font-size: 13px; }
.symbol-btn { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 6px; min-width: 120px; }
.symbol-btn svg { color: var(--muted); }
.group { display: flex; align-items: center; gap: 1px; padding: 0 6px; border-left: 1px solid var(--line-2); }
.status { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; padding: 0 6px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); }
.icon-btn:hover { color: var(--text); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text); margin-left: 2px; padding: 0; }
.avatar.named { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; font-size: 15px; }

/* ---------- Tickerleiste ---------- */
.tickerbar { display: flex; gap: 2px; padding: 3px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: var(--bg); flex-shrink: 0; }
.tickerbar::-webkit-scrollbar { display: none; }
.tick { display: flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 4px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.tick:hover { background: var(--panel-2); }
.tick.current { background: var(--accent-soft); }
.tick b { font-weight: 600; } .tick .px { font-family: var(--mono); }

/* ---------- Widgetleiste ---------- */
.widgets { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0; background: var(--bg); scrollbar-width: thin; }
.wg { flex: 1 1 0; min-width: 210px; height: 178px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; padding: 10px 12px; position: relative; }
html[data-theme="dark"] .wg { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-3) 100%); }
.wg-heatmap { flex-grow: 1.15; } .wg-narratives { flex-grow: 1.55; min-width: 330px; } .wg-fng, .wg-altseason, .wg-dominance { flex-grow: .9; min-width: 190px; }
.wg header { display: flex; align-items: center; gap: 6px; height: 22px; margin-bottom: 6px; padding-left: 3px; }
.wg h3 { margin: 0; font-size: 13px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-grip { position: absolute; left: 2px; top: 13px; color: var(--muted); cursor: grab; opacity: 0; transition: opacity .15s; padding: 2px; touch-action: none; display: flex; }
.wg:hover .wg-grip, .wg.sort-drag .wg-grip { opacity: 1; }
@media (hover: none) { .wg-grip { opacity: .7; } .wg header { padding-left: 9px; } .wg-x { opacity: .7; } }
.wg-x { position: absolute; right: 3px; top: 3px; opacity: 0; color: var(--muted); padding: 0 5px; font-size: 15px; line-height: 18px; background: var(--panel); border-radius: 4px; }
.wg:hover .wg-x { opacity: 1; }
.wg-extra { font-size: 12px; display: flex; gap: 2px; align-items: center; white-space: nowrap; }
.wg-extra button { font-size: 11px; padding: 1px 6px; color: var(--muted); }
.wg-extra button.on { color: var(--accent); background: var(--accent-soft); }
.wg-extra .link-btn { color: var(--accent); }
.wg-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.wg-load { color: var(--muted); font-size: 12px; margin: auto; text-align: center; padding: 0 8px; }
.wg-big { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.15; }
.wg-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.wg.sort-drag { box-shadow: var(--shadow); opacity: .95; }
.sort-ph { border: 2px dashed var(--accent-line); border-radius: 12px; background: var(--accent-soft); flex-shrink: 0; }
.wg-add { flex: 0 0 auto; width: 44px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 18px; }
.wg-add span { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .05em; }
.wg-add.alone { width: auto; flex: 1; flex-direction: row; } .wg-add.alone span { writing-mode: horizontal-tb; font-size: 13px; }
.spark { flex: 1; min-height: 50px; margin: 6px -4px -4px; position: relative; }
.spark svg { display: block; width: 100%; height: 100%; color: var(--text); }
.sp-tip { position: absolute; top: 0; right: 4px; font-size: 11px; background: var(--label-bg); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); pointer-events: none; }
.tmap { position: relative; flex: 1; border-radius: 8px; overflow: hidden; }
.tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; outline: 1px solid var(--panel); cursor: pointer; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.35); line-height: 1.1; }
html[data-theme="light"] .tile { outline-color: #fff; }
.tile:hover { filter: brightness(1.15); z-index: 1; }
.tile b { font-weight: 700; } .tile i { font-style: normal; opacity: .95; }
.nar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; flex: 1; }
.nar-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; margin-bottom: 3px; }
.nar-r { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 2.5px 0; white-space: nowrap; }
.nar-r span:first-child { overflow: hidden; text-overflow: ellipsis; font-weight: 500; min-width: 0; }
.nar-r span:last-child { flex-shrink: 0; }
.nar-r span:last-child { font-family: var(--mono); font-size: 12px; }
.gauge { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -2px; }
.g-svg { width: 150px; height: 80px; }
.g-val { position: absolute; top: 36px; font-size: 22px; font-weight: 700; color: var(--text-strong); }
.g-lbl { font-weight: 700; font-size: 14px; margin-top: -2px; }
.fng-hist { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); margin-top: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.fng-hist b { font-size: 12px; }
.alt-v { color: var(--muted); } .alt-v b { color: var(--text-strong); font-size: 20px; }
.alt-status { font-size: 16px; font-weight: 700; margin: 4px 0 12px; }
.alt-bar { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f7931a 0%, #f7c46c 35%, #a9b4d6 60%, #3d7cf0 100%); }
.alt-knob { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line-2), 0 2px 5px rgba(0,0,0,.35); transform: translate(-50%, -50%); }
.alt-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 6px 0 auto; }
.dom-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 12px 0 8px; background: var(--panel-2); }
.dom-bar i { display: block; } .dom-bar i:last-child { background: var(--line-2); }
.dom-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.dom-lbl i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--line-2); }

/* ---------- Hauptbereich ---------- */
.layout { flex: 1; display: flex; min-height: 0; }
.chart-wrap { flex: 1; position: relative; min-width: 0; }
#chart { position: absolute; inset: 0; }
.draw-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.draw-layer.active { pointer-events: auto; cursor: crosshair; }
.legend { position: absolute; left: 10px; top: 6px; z-index: 4; pointer-events: none; font-size: 12px; line-height: 1.6; }
.legend .title { font-size: 14px; font-weight: 600; margin-right: 8px; }
.legend .src { color: var(--muted); margin-right: 8px; }
.legend span.k { color: var(--muted); margin: 0 2px 0 8px; }
.legend .ind { color: var(--muted); } .legend .ind i { font-style: normal; margin-right: 10px; }
.hint { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 5; background: var(--accent); color: #fff; padding: 6px 12px; border-radius: 4px; pointer-events: none; font-size: 12px; }
.replay-bar { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; box-shadow: var(--shadow); }
.replay-label { color: var(--accent); font-weight: 600; margin-right: 4px; }
#rp-info { color: var(--muted); font-size: 12px; min-width: 120px; padding: 0 6px; }

/* Rechte Leiste + Panel */
.rail { width: 46px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 4px; }
.rail button, .rail a { width: 38px; height: 38px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; padding: 0; }
.rail button:hover, .rail a:hover { color: var(--text); background: var(--panel-2); }
.rail button.active { color: var(--accent); background: var(--accent-soft); }
.rail .rail-claude:hover, .rail .rail-claude.active { color: var(--claude); }
.rail .rail-claude.active { background: color-mix(in srgb, var(--claude) 16%, transparent); }
.rail-sp { flex: 1; }
.panel { width: 330px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--panel); position: relative; display: flex; flex-direction: column; min-height: 0; }
.panel-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; touch-action: none; }
.panel-resize:hover { background: var(--accent-line); }
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pane-title { font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pane-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.row input { flex: 1; min-width: 0; }
.error { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); padding: 6px 8px; border-radius: 4px; font-size: 12px; white-space: pre-wrap; }

/* ---------- Watchlist ---------- */
.wl-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--line); gap: 4px; }
.wl-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; max-width: 70%; overflow: hidden; }
.wl-name .t { overflow: hidden; text-overflow: ellipsis; }
.wl-name .caret { color: var(--muted); font-size: 11px; }
.wl-flagdot:empty { display: none; }
.wl-tools { display: flex; } .wl-tools button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--muted); }
.wl-tools button:hover { color: var(--text); }
.wl-cols { display: grid; align-items: center; padding: 0 4px 0 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; height: 28px; }
.wl-cols button { color: var(--muted); padding: 2px 4px; text-align: right; font-size: 11.5px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; }
.wl-cols button[data-col="sym"] { text-align: left; }
.wl-cols button:hover { color: var(--text); }
.wl-body { flex: 1; overflow-y: auto; min-height: 60px; outline: none; }
.wl-row { display: grid; align-items: center; height: 32px; padding: 0 4px 0 6px; font-size: 12.5px; cursor: pointer; border-left: 2px solid transparent; position: relative; background: var(--panel); }
.wl-row:hover { background: var(--panel-2); }
.wl-row.cur { background: var(--accent-soft); border-left-color: var(--accent); }
.wl-row.sel { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.wl-row .c { text-align: right; font-family: var(--mono); font-size: 11.5px; letter-spacing: -.02em; padding: 1px 2px; border-radius: 3px; white-space: nowrap; overflow: hidden; }
.wl-row .c.fl-up { animation: flup .7s ease-out; } .wl-row .c.fl-down { animation: fldn .7s ease-out; }
@keyframes flup { from { background: color-mix(in srgb, var(--up) 45%, transparent); } to { background: transparent; } }
@keyframes fldn { from { background: color-mix(in srgb, var(--down) 45%, transparent); } to { background: transparent; } }
.wl-sym { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wl-sym b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-logo { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); }
.wl-logo img { width: 100%; height: 100%; object-fit: cover; }
.wl-logo.lt { color: #fff; font-size: 10px; font-weight: 700; }
.wl-flag { color: var(--muted); opacity: 0; display: grid; place-items: center; width: 14px; height: 20px; }
.wl-row:hover .wl-flag, .wl-flag.on { opacity: 1; }
.wl-del { opacity: 0; color: var(--muted); padding: 0; width: 18px; height: 20px; font-size: 15px; line-height: 1; }
.wl-row:hover .wl-del { opacity: 1; } .wl-del:hover { color: var(--down); background: none; }
.wl-row.sec { display: flex; gap: 4px; height: 28px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); background: var(--panel-3); border-top: 1px solid var(--line); }
.wl-row.sec .sec-name { flex: 1; }
.wl-row.sec .chev { width: 14px; text-align: center; transition: transform .15s; font-size: 10px; }
.wl-row.sec.collapsed .chev { transform: rotate(-90deg); }
.wl-row.sort-drag { box-shadow: var(--shadow); border-radius: 4px; }
.wl-body .sort-ph { border-radius: 4px; border-width: 1px; }
.wl-empty { text-align: center; color: var(--muted); padding: 30px 16px; line-height: 1.8; }
.wl-split { height: 5px; cursor: row-resize; border-top: 1px solid var(--line); touch-action: none; flex-shrink: 0; }
.wl-split:hover { background: var(--accent-line); }
.wl-details { overflow-y: auto; padding: 10px 12px 14px; flex-shrink: 0; }
.d-head { display: flex; align-items: center; gap: 10px; }
.d-head .wl-logo { width: 30px; height: 30px; font-size: 14px; }
.d-head b { font-size: 15px; }
.d-price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.d-price .big { font-size: 26px; font-weight: 700; color: var(--text-strong); font-family: var(--font); letter-spacing: -.02em; }
.d-price .cur { color: var(--muted); font-size: 11px; }
.d-src { margin: 2px 0 8px; }
.d-range { margin: 8px 0; }
.d-rl { display: flex; justify-content: space-between; font-size: 11.5px; font-family: var(--mono); }
.d-rl .muted { font-family: var(--font); }
.d-bar { position: relative; height: 4px; border-radius: 2px; background: var(--panel-2); margin-top: 4px; }
.d-bar i { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--text); transform: translateX(-50%); border-radius: 1px; }
.d-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0; font-size: 12px; }
.d-stats div { display: flex; flex-direction: column; } .d-stats b { font-weight: 600; }
.d-perf-h { margin-bottom: 4px; }
.d-perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.d-perf div { background: var(--panel-2); border-radius: 6px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; }
.d-perf b { font-size: 12.5px; } .d-perf span { font-size: 11px; color: var(--muted); }
.d-perf .pos { background: color-mix(in srgb, var(--up) 16%, transparent); } .d-perf .pos b { color: var(--up); }
.d-perf .neg { background: color-mix(in srgb, var(--down) 14%, transparent); } .d-perf .neg b { color: var(--down); }

/* ---------- Orderbuch ---------- */
.book-head, .book-row { display: grid; grid-template-columns: 1fr 1fr 1fr; font-family: var(--mono); font-size: 12px; }
.book-head { color: var(--muted); font-family: var(--font); padding: 0 4px; }
.book-head span:not(:first-child), .book-row span:not(:first-child) { text-align: right; }
.book-side { display: flex; flex-direction: column; }
.book-row { position: relative; padding: 1px 4px; }
.book-row .bar { position: absolute; top: 0; bottom: 0; right: 0; opacity: .16; }
.book-row span { position: relative; }
#book-asks .bar { background: var(--down); } #book-asks .p { color: var(--down); }
#book-bids .bar { background: var(--up); } #book-bids .p { color: var(--up); }
.book-mid { font-family: var(--mono); font-size: 16px; font-weight: 600; padding: 6px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.book-mid small { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ---------- Strategie ---------- */
#st-code { font-family: var(--mono); font-size: 12px; min-height: 150px; resize: vertical; line-height: 1.5; tab-size: 2; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.stat { background: var(--panel-2); border-radius: 4px; padding: 6px 8px; }
.stat .k { color: var(--muted); font-size: 11px; }
.stat .v { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.equity { height: 140px; position: relative; }
.trades { font-family: var(--mono); font-size: 11px; max-height: 220px; overflow-y: auto; }
.trades div { display: grid; grid-template-columns: 16px 1fr 62px; gap: 6px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.help { font-size: 12px; color: var(--muted); } .help summary { cursor: pointer; }
.help code { color: var(--text); background: var(--panel-2); padding: 0 3px; border-radius: 3px; }

/* ---------- Claude ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button { border: 1px solid var(--line-2); border-radius: 14px; font-size: 12px; padding: 4px 10px; }
.chips button:first-child { border-color: var(--claude); color: var(--claude); }
.steps { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.steps div::before { content: "▸ "; color: var(--claude); }
.steps .wait::before { content: "◌ "; }
.analysis { font-size: 13px; line-height: 1.55; }
.analysis p { margin: 0 0 8px; } .analysis ul { margin: 0 0 8px; padding-left: 18px; }
.analysis h4 { margin: 10px 0 4px; font-size: 13px; color: var(--claude); }
.meta { font-size: 11px; color: var(--muted); font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 6px; }
.meta:empty { display: none; }

/* ---------- Menüs, Dialoge, Hinweis ---------- */
.menu { position: fixed; z-index: 2000; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 5px 0; max-height: 80vh; overflow-y: auto; }
.menu .menu { overflow: visible; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 12px 6px 6px; border-radius: 0; font-size: 13px; }
.menu-item:hover:not(:disabled) { background: var(--panel-2); }
.menu-item.danger { color: var(--down); }
.mi-check { width: 14px; color: var(--accent); text-align: center; flex-shrink: 0; }
.mi-icon { display: flex; } .mi-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mi-hint { color: var(--muted); font-size: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 0; }
.menu-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 7px 12px 3px 28px; }
.menu-html { padding: 2px 8px 2px 24px; }
.flag-row { display: flex; gap: 2px; }
.flag-row button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; }
.flag-row .nofl { color: var(--muted); font-size: 15px; }
.modal-back { position: fixed; inset: 0; background: var(--back); z-index: 1500; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: 100%; max-width: 620px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.small { max-width: 400px; padding-bottom: 4px; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.modal h3 { margin: 0; font-size: 16px; }
.modal .x { font-size: 20px; color: var(--muted); padding: 2px 8px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; }
.dlg-label { display: block; padding: 0 16px 6px; color: var(--muted); font-size: 12px; }
.dlg-input { margin: 0 16px; width: calc(100% - 32px); padding: 8px 10px; font-size: 14px; border-radius: 6px; }
.dlg-text { margin: 0; padding: 0 16px; color: var(--muted); }
.modal .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.modal .tbl th, .modal .tbl td { padding: 6px 16px; text-align: right; border-bottom: 1px solid var(--line); }
.modal .tbl th:first-child, .modal .tbl td:first-child { text-align: left; }
.modal .tbl th { color: var(--muted); font-weight: 500; font-size: 12px; }
.modal > .tbl + p, .modal > p { padding: 8px 16px 14px; margin: 0; }
.modal:has(.tbl) { overflow-y: auto; display: block; }
.search .s-input { display: flex; align-items: center; gap: 8px; margin: 0 16px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; color: var(--muted); }
.search .s-input:focus-within { border-color: var(--accent); }
.search .s-input input { border: 0; flex: 1; padding: 10px 0; font-size: 15px; background: transparent; text-transform: uppercase; }
.search .s-input input::placeholder { text-transform: none; }
.s-tabs { display: flex; gap: 2px; padding: 10px 14px 6px; flex-wrap: wrap; }
.s-tabs button { border-radius: 14px; font-size: 12px; padding: 4px 10px; color: var(--muted); }
.s-tabs button.on { background: var(--accent-soft); color: var(--accent); }
.s-list { overflow-y: auto; flex: 1; min-height: 200px; border-top: 1px solid var(--line); }
.s-list.loading { opacity: .6; }
.s-row { display: grid; grid-template-columns: 26px minmax(80px, auto) 1fr auto auto 24px; gap: 10px; align-items: center; padding: 7px 16px; cursor: pointer; font-size: 13px; }
.s-row:hover, .s-row.hi { background: var(--panel-2); }
.s-logo { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); }
.s-logo img { width: 100%; height: 100%; }
.s-logo .lt { font-size: 11px; font-weight: 700; color: var(--muted); }
.s-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-type, .s-ex { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.s-add { font-size: 17px; color: var(--accent); text-align: center; } .s-add.done { color: var(--up); }
.s-empty { padding: 30px 16px; color: var(--muted); text-align: center; }
.s-foot { padding: 8px 16px; border-top: 1px solid var(--line); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 3000; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Seitenleiste (wie OptionOS) ---------- */
.drawer-back { position: fixed; inset: 0; background: var(--back); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1200; }
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 336px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 1300; transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.dr-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.dr-head b { font-size: 16px; flex: 1; }
.dr-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; box-shadow: inset 0 0 0 3px rgba(0,0,0,.18); }
.dr-x { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; font-size: 18px; color: var(--muted); padding: 0; }
.dr-scroll { flex: 1; overflow-y: auto; padding: 0 18px 18px; }
.dr-user { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.dr-user b { font-size: 15px; }
.dr-sync { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.dr-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.dr-label.accent { color: var(--accent); letter-spacing: .16em; }
.dr-settings { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); text-decoration: none; font-weight: 600; }
.dr-settings:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.dr-settings svg { color: var(--text); }
.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-3); }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border-radius: 9px; font-weight: 600; border: 1px solid transparent; }
.seg button.on { background: var(--accent-soft); border-color: var(--accent-line); }
.seg .dot { width: 10px; height: 10px; box-shadow: none; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; cursor: pointer; }
.sw { position: relative; width: 36px; height: 21px; flex-shrink: 0; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 11px; background: var(--line-2); transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(15px); }
.sw input:focus-visible + i { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.dr-wlist { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dr-w { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dr-w:last-child { border-bottom: 0; }
.dr-grip { color: var(--muted); cursor: grab; touch-action: none; display: flex; padding: 2px; }
.dr-wn { flex: 1; }
.dr-wlist .sort-ph { border-radius: 0; border-width: 1px; }
.dr-w.sort-drag { box-shadow: var(--shadow); border-radius: 8px; }
.dr-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.dr-field { display: block; margin-bottom: 10px; }
.dr-field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dr-field select { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--panel); }
.dr-primary { display: block; width: 100%; text-align: center; margin-top: 22px; padding: 12px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.dr-primary:hover { background: var(--accent-h); }
.dr-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .chart-wrap { min-height: 55vh; }
  .rail { width: 100%; flex-direction: row; justify-content: center; border-left: 0; border-top: 1px solid var(--line); order: 3; padding: 2px; }
  .rail-sp { display: none; }
  .panel { width: 100% !important; border-left: 0; border-top: 1px solid var(--line); max-height: 48vh; order: 2; }
  .panel-resize { display: none; }
  .wg { min-width: 240px; height: 168px; }
  .topbar .group#tools, .topbar .group#indicators { order: 5; }
}