:root{--bg:#0d1117;--panel:#161b22;--fg:#c9d1d9;--mut:#8b949e;--line:#30363d;--acc:#2f7cff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
body{display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.ampel{padding:5px 10px;font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
.ampel.gruen{background:#0f3d24;color:#7dffb0}.ampel.rot{background:#4a1418;color:#ffb3b3}
.ampel.gelb{background:#3d3410;color:#ffe680}.ampel.grau{background:var(--panel);color:var(--mut)}
header{display:flex;gap:4px;align-items:center;padding:4px 6px;background:var(--panel);flex-wrap:wrap}
select,input,button{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:5px;font:inherit;padding:5px 7px;min-height:32px}
#symbolFree{width:70px}#symbol{max-width:130px}button{cursor:pointer}
button.on,.tfs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.tfs{display:flex;gap:2px}
.live{color:var(--mut);margin-left:auto;padding:0 2px}.live.ok{color:#3fb950}.live.err{color:#f85149}
.mtf{display:flex;gap:4px;padding:3px 8px;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;font-size:11px}
.mtf span{padding:1px 6px;border-radius:3px;background:var(--panel);color:var(--mut)}.mtf b{color:#6ea8ff}
main{position:relative;flex:1;min-height:0}
#chart{position:absolute;inset:0}
.ewLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.ew{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:17px;text-shadow:0 0 3px #000,0 0 3px #000}
.tip{position:absolute;z-index:6;pointer-events:none;background:rgba(22,27,34,.95);border:1px solid var(--line);border-radius:5px;padding:4px 7px;font-size:11px;max-width:220px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.big{width:12px;height:12px}.dot.sq{border-radius:1px}.dot.up,.dot.down{border-radius:0;background:none!important;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.dot.up{border-bottom:9px solid currentColor}.dot.down{border-top:9px solid currentColor}
.info,.legend{position:absolute;top:6px;left:6px;z-index:5;max-width:min(330px,86vw);max-height:75%;overflow:auto;background:rgba(22,27,34,.94);
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:11px}
.legend{left:auto;right:6px}.legend div.r{margin:2px 0}.legend .grp{color:var(--mut);margin-top:6px;font-weight:600}
.info.hidden{display:none}
.infohead{display:flex;justify-content:space-between;margin-bottom:4px}.infohead span{cursor:pointer;color:var(--mut);padding:0 4px}
.info table{border-collapse:collapse}.info td{padding:0 6px 0 0;vertical-align:top}.info td:first-child{color:var(--mut)}
.info .sec{margin-top:5px;color:var(--mut);font-weight:600}
.libError{position:absolute;inset:20px;background:#4a1418;padding:16px;border-radius:8px;z-index:9}
.toast{position:fixed;right:10px;bottom:10px;background:#1f6feb;color:#fff;padding:8px 12px;border-radius:6px;z-index:20;max-width:80vw}
.login{position:fixed;inset:0;z-index:30;background:rgba(13,17,23,.97);display:flex;align-items:center;justify-content:center;padding:16px}
.loginBox{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.loginBox h2{margin:0 0 10px;font-size:18px}.loginBox label{display:block;margin:10px 0;color:var(--mut)}
.loginBox input{display:block;width:100%;margin-top:4px;font-size:16px}
.loginBtns{display:flex;gap:8px;margin-top:14px}.loginBtns button{flex:1}.prim{background:var(--acc);border-color:var(--acc);color:#fff}
.loginMsg{color:#ffb3b3;min-height:1em;margin:0}.loginHint{color:var(--mut);font-size:11px;margin-bottom:0}
@media (min-width:700px){#symbolFree{width:120px}.ampel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Hellblauer Punkt: hohler weißer Ring */
#ewLayer .ring{position:absolute;width:8px;height:8px;margin:-6px 0 0 -6px;border:2px solid #fff;border-radius:50%;background:transparent;pointer-events:auto}
.dot.ring{background:transparent!important;border:2px solid #fff;box-sizing:border-box}

/* ---- Ansichten + untere Navigationsleiste (wie TradingView-App) */
.chartView{flex:1;min-height:0;display:flex;flex-direction:column}
body.v-wl .chartView{display:none}
.nav{display:flex;border-top:1px solid var(--line);background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;border-radius:0;background:none;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 6px;font-size:11px;min-height:46px}
.nav button .ico{font-size:17px;line-height:1.1}
.nav button.on{color:#fff}.nav button.on .ico{filter:none}

/* ---- Countdown unter dem Kurs-Etikett der letzten Kerze */
.cd{position:absolute;z-index:4;right:0;pointer-events:none;font:600 11px/15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-align:center;color:#fff;background:#3a4250;border-radius:2px;padding:0 3px;white-space:nowrap}
.cd.zu{background:#30363d;color:var(--mut)}

/* ---- Watchlist */
.wl{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.wlTop{display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--panel)}
.wlTabs{display:flex;flex:1;overflow-x:auto;scrollbar-width:none}.wlTabs::-webkit-scrollbar{display:none}
.wlTabs button{border:0;border-radius:0;background:none;color:var(--mut);padding:10px 12px;white-space:nowrap;font-weight:600;border-bottom:2px solid transparent;min-height:40px}
.wlTabs button.on{color:#fff;border-bottom-color:var(--acc)}
.wlIcon{border:0;background:none;font-size:17px;min-width:40px;color:var(--fg)}
.wlIcon.on{background:var(--acc);color:#fff}
.wlBar{display:flex;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line)}
.wlLbl{color:var(--mut);font-size:11px;margin-right:2px}
.wlTfs{flex:1;overflow-x:auto;scrollbar-width:none}.wlTfs button{padding:4px 7px;min-height:28px;font-size:12px}
.wlHead{display:flex;justify-content:space-between;padding:4px 12px;color:var(--mut);font-size:11px;border-bottom:1px solid var(--line)}
.wlRows{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wlRow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1b2129;cursor:pointer;user-select:none;background:var(--bg)}
.wlRow:active{background:#131922}
.wlRow .l{flex:1;min-width:0}
.wlRow .sym{font-weight:700;font-size:15px;color:#fff;display:flex;align-items:center;gap:5px}
.wlRow .nm{color:var(--mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlRow .r{text-align:right;white-space:nowrap}
.wlRow .px{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.wlRow .ch{font-size:12px;font-variant-numeric:tabular-nums}
.wlRow .ext{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.up{color:#26a69a}.dn{color:#ef5350}
.badge{font-size:9.5px;font-weight:700;border:1px solid var(--mut);color:var(--mut);border-radius:3px;padding:0 3px;line-height:13px}
.croc{display:inline-block;margin-top:3px;font-size:10px;font-weight:700;border-radius:3px;padding:1px 5px;letter-spacing:.2px}
.croc.gruen{background:#0f3d24;color:#7dffb0}.croc.rot{background:#4a1418;color:#ffb3b3}.croc.gelb{background:#3d3410;color:#ffe680}
.croc.blau{background:#10264a;color:#8bb8ff}.croc.grau{background:#1c222b;color:var(--mut)}
.wlRow .ed{display:flex;gap:3px}.wlRow .ed button{min-width:34px;min-height:34px;padding:0}
.wlRow .grip{touch-action:none;cursor:grab;color:var(--mut);font-size:18px;padding:0 4px}
.wlRow.drag{opacity:.85;box-shadow:0 4px 14px rgba(0,0,0,.6);position:relative;z-index:2}
.wlFoot{color:var(--mut);font-size:10.5px;padding:4px 12px;border-top:1px solid var(--line)}
.sheet{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheetBox{width:100%;max-width:520px;max-height:85%;display:flex;flex-direction:column;gap:6px;background:var(--panel);border-radius:12px 12px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.sheetHead{display:flex;justify-content:space-between;align-items:center}.sheetHead .x{cursor:pointer;color:var(--mut);padding:4px 8px}
.sheetBox input{font-size:16px}.sheetBox>button{text-align:left;min-height:42px}.gefahr{color:#ff8080}
.hits{overflow-y:auto}.hit{display:flex;justify-content:space-between;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.hit b{color:#fff}.hit small{color:var(--mut)}
.connBanner{position:fixed;top:0;left:0;right:0;z-index:25;background:#7a1f1f;color:#fff;padding:6px 10px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.connBanner[hidden]{display:none}.connBanner button{font-size:12px}
.loginApp{display:block;width:100%;margin-top:10px}.loginApp[hidden]{display:none}