/* XAU/USD Signal Terminal — "Onyx Pro" Design-System.
   Tiefes Onyx-Schwarz, Gold (XAU-Identität) + elektrisches Cyan als Live-Akzent.
   Klare Inter-Sans fürs UI, Mono nur für Zahlen. Ruhig, datenreich, premium.
   Funktional Grün/Rot. Dezentes Leuchten statt schriller Warnfarben. */
:root{
  --bg:#06080c; --bg2:#04050a; --bgglow:#0a1018;
  --panel:#0b0f16; --panel2:#0e131b; --panel3:#121925; --raise:#151d2b;
  --border:#19212e; --border2:#26313f; --line:#161d28;
  --text:#d7dfeb; --text2:#aeb9c9; --muted:#8693a7; --dim:#6a7689;
  --gold:#e9a23c; --gold2:#f7c277; --goldbg:rgba(233,162,60,.10); --goldbd:rgba(233,162,60,.34);
  --cyan:#33d6e6; --cyan2:#6cebf5; --cyanbg:rgba(51,214,230,.09); --cyanbd:rgba(51,214,230,.32);
  --green:#23a866; --green2:#3ddc8f; --greenbg:rgba(35,168,102,.14);
  --red:#e0543e; --red2:#f5715b; --redbg:rgba(224,84,62,.14);
  --blue:#5b93f6;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Roboto Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 480px at 78% -10%,var(--bgglow),transparent 60%),
    radial-gradient(900px 420px at 0% 110%,#080c12,transparent 55%),
    var(--bg);
  color:var(--text);font:13px/1.55 var(--sans);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.muted{color:var(--muted)} .dim{color:var(--dim)} .gold{color:var(--gold)} .cyan{color:var(--cyan)}
.pos{color:var(--green2)} .neg{color:var(--red2)}
.amber{color:var(--cyan)}                 /* ex-Warnfarbe -> ruhiges Cyan-Info */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.2px}
a{color:var(--cyan);text-decoration:none;transition:color .15s} a:hover{color:var(--cyan2)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2f3b4d}

/* ---------- App-Gerüst ---------- */
.app{display:flex;flex-direction:column;height:100vh}

.topbar{display:flex;align-items:center;gap:22px;padding:0 18px;height:54px;flex:0 0 auto;
  background:linear-gradient(180deg,#0c1119,#090d14);
  border-bottom:1px solid var(--border);position:relative;z-index:5}
.brand{display:flex;align-items:baseline;gap:11px}
.brand .logo{font-weight:800;letter-spacing:.5px;font-size:17px;color:var(--text)}
.brand .logo .slash{color:var(--gold);margin:0 1px}
.brand .sub{font-size:9.5px;color:var(--muted);font-weight:600;letter-spacing:1.6px;
  border:1px solid var(--border2);padding:2px 7px;border-radius:4px;background:var(--panel)}
.tb-quote{display:flex;align-items:baseline;gap:12px}
.tb-quote .px{font-size:23px;font-weight:700;letter-spacing:.3px;color:#fff}
.tb-quote .chg{font-size:13px;font-weight:600}
.tb-quote .spread{font-size:10.5px;color:var(--muted)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:11.5px}
.tb-stat{display:flex;align-items:center;gap:7px;color:var(--text2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.dot.ok{background:var(--green2);box-shadow:0 0 0 3px var(--greenbg),0 0 9px var(--green2);animation:pulse 2.4s ease-in-out infinite}
.dot.warn{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.dot.bad{background:var(--red2);box-shadow:0 0 8px var(--red2)}
.dot.gold{background:var(--gold)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
#clock{color:var(--muted)}
.langsel{background:var(--panel2);color:var(--text2);border:1px solid var(--border2);
  border-radius:6px;padding:4px 8px;font:600 11px var(--sans);cursor:pointer}
.langsel:hover{border-color:var(--gold)}

/* ---------- Live-Ticker-Strip ---------- */
.ticker{flex:0 0 auto;display:flex;align-items:stretch;gap:0;height:38px;overflow:hidden;
  background:linear-gradient(180deg,#070a10,#05070b);
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(51,214,230,.10)}
.tk{display:flex;align-items:center;gap:9px;padding:0 18px;white-space:nowrap;
  border-right:1px solid var(--line)}
.tk-l{font-size:9px;letter-spacing:1.4px;font-weight:700;color:var(--dim);text-transform:uppercase}
.tk-v{font-size:13px;font-weight:600;color:var(--text)}
.tk-d{font-size:11px;font-weight:600}
.tk-tag{font-size:9px;letter-spacing:.8px;padding:1px 6px;border-radius:4px;text-transform:uppercase;
  border:1px solid var(--border2);color:var(--muted)}
.tk-tag.hot{color:var(--gold);border-color:var(--goldbd);background:var(--goldbg)}
.tk.live .tk-l{color:var(--cyan)}

/* ---------- News-Laufband ---------- */
.newsbar{flex:0 0 auto;display:flex;align-items:center;height:34px;overflow:hidden;
  background:var(--bg2);border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(51,214,230,.10)}
.newsbar-tag{display:flex;align-items:center;gap:7px;flex:0 0 auto;height:100%;padding:0 14px;
  font-size:9.5px;font-weight:800;letter-spacing:1.6px;color:var(--cyan);
  background:linear-gradient(90deg,var(--cyanbg),transparent);border-right:1px solid var(--cyanbd)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);animation:pulse 1.8s ease-in-out infinite}
.marquee{flex:1;min-width:0;overflow:hidden;position:relative;height:100%}
.marquee .track{display:inline-flex;align-items:center;height:100%;white-space:nowrap;
  will-change:transform;animation:scroll var(--mq-dur,70s) linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{display:inline-flex;align-items:center;gap:8px;padding:0 22px;font-size:12px;color:var(--text2)}
.mq + .mq{border-left:1px solid var(--line)}
.mq .mq-src{font-size:9px;font-weight:700;letter-spacing:.6px;color:var(--gold);text-transform:uppercase}
.mq .mq-up{color:var(--green2)} .mq .mq-dn{color:var(--red2)}

.demobar{flex:0 0 auto;background:var(--redbg);color:var(--red2);font-size:10.5px;font-weight:700;
  letter-spacing:.6px;text-align:center;padding:5px 16px;border-bottom:1px solid var(--border)}

.body{flex:1;display:flex;min-height:0}
.nav{flex:0 0 208px;background:linear-gradient(180deg,#080c12,#070a10);
  border-right:1px solid var(--border);display:flex;flex-direction:column;padding:8px 0 10px;overflow-y:auto}
.nav .navgroup{font-size:9px;letter-spacing:1.7px;color:var(--dim);font-weight:700;
  text-transform:uppercase;padding:15px 18px 6px;border-top:1px solid var(--line);margin-top:6px}
.nav .navgroup:first-child{border-top:none;margin-top:0;padding-top:10px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  color:var(--text2);font:inherit;padding:8px 18px;cursor:pointer;
  border-left:2px solid transparent;text-align:left;transition:background .14s,color .14s}
.nav button:hover{background:var(--panel)}
.nav button.on{background:linear-gradient(90deg,var(--goldbg),transparent);border-left-color:var(--gold)}
.nav button .ic{width:18px;text-align:center;opacity:.85;font-size:14px;flex:0 0 auto}
.nav button .navtxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav button .navlbl{font-weight:600;font-size:12.5px;color:var(--text2)}
.nav button .navsub{font-size:10px;color:var(--dim);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button.on .navlbl,.nav button.on.compact{color:var(--gold)}
.nav button.compact{padding:7px 18px;font-size:12px;color:var(--muted)}
.nav button.compact:hover{color:var(--text)}
.nav .navfoot{margin-top:auto;padding:12px 18px 4px;font-size:10px;color:var(--dim);line-height:1.6}

.main{flex:1;min-width:0;overflow-y:auto;padding:18px}

.footer{flex:0 0 auto;background:var(--bg2);border-top:1px solid var(--border);
  padding:6px 18px;text-align:center}
.footer .disclaimer{font-size:10.5px;color:var(--muted);letter-spacing:.3px}

/* ---------- Raster + Panels ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)}
.span2{grid-column:span 2} .span3{grid-column:span 3} .span4{grid-column:span 4}
@media(max-width:1100px){.g4,.g6{grid-template-columns:repeat(3,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)} .span4,.span3{grid-column:span 2}}
@media(max-width:760px){.g2,.g3,.g4,.g6{grid-template-columns:1fr}
  .span2,.span3,.span4{grid-column:span 1}}

.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .18s,box-shadow .18s}
.panel:hover{border-color:var(--border2)}
.panel > .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel3),transparent)}
.panel > .ph h3{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text2);font-weight:700}
.panel > .ph .hx{font-size:10px;color:var(--dim)}
.panel > .pb{padding:14px}
.panel.accent{border-color:var(--goldbd);box-shadow:0 0 0 1px var(--goldbg),var(--shadow)}

/* ---------- Stat-Karten ---------- */
.stat{display:flex;flex-direction:column;gap:4px}
.stat .lbl{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .val{font-size:20px;font-weight:700;letter-spacing:.2px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.stat .val.sm{font-size:15px} .stat .val.lg{font-size:28px}
.stat .sub{font-size:10px;color:var(--dim)}

/* ---------- Badges / Chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:6px;
  font-weight:700;font-size:12px;letter-spacing:.5px}
.badge.lg{font-size:21px;padding:9px 20px;border-radius:9px}
.badge.BUY,.badge.LONG{background:var(--greenbg);color:var(--green2);border:1px solid rgba(61,220,143,.38);
  box-shadow:0 0 18px -8px var(--green2)}
.badge.SELL,.badge.SHORT{background:var(--redbg);color:var(--red2);border:1px solid rgba(245,113,91,.38);
  box-shadow:0 0 18px -8px var(--red2)}
.badge.WAIT,.badge.NEUTRAL{background:rgba(123,138,158,.12);color:var(--muted);border:1px solid var(--border2)}
.badge.BLOCKED{background:var(--goldbg);color:var(--gold2);border:1px solid var(--goldbd)}
.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:10px;font-weight:500;
  border:1px solid var(--border2);color:var(--muted)}
.chip.ok{color:var(--green2);border-color:rgba(61,220,143,.38);background:var(--greenbg)}
.chip.bad{color:var(--red2);border-color:rgba(245,113,91,.38);background:var(--redbg)}
.chip.warn{color:var(--gold2);border-color:var(--goldbd);background:var(--goldbg)}  /* Caution = gedämpftes Gold (wie BLOCKED-Badge), kein Cyan-Overload */
.chip.gold{color:var(--gold2);border-color:var(--goldbd);background:var(--goldbg)}
.kat{display:inline-block;padding:2px 9px;border-radius:4px;font-weight:700;font-size:10px;border:1px solid var(--border2)}
.katA{color:var(--green2)} .katB{color:var(--cyan)} .katC{color:var(--muted)}

/* ---------- Tabellen ---------- */
table.dt{width:100%;border-collapse:collapse;font-size:11.5px}
table.dt th{text-align:left;padding:8px 10px;color:var(--muted);font-weight:600;font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border2);
  position:sticky;top:0;background:var(--panel3);cursor:pointer;
  -webkit-user-select:none;user-select:none;white-space:nowrap}
table.dt th.no{cursor:default}
table.dt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.dt tbody tr{transition:background .12s}
table.dt tr:hover td{background:var(--panel3)}
table.dt td.r,table.dt th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl-wrap{max-height:100%;overflow:auto;border-radius:8px}

/* ---------- Key/Value ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:11.5px}
.kv .k{color:var(--muted)} .kv .v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}

/* ---------- Balken / Gauge ---------- */
.bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:4px;transition:width .4s ease}
.dual{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line)}
.dual > .p{background:var(--green)} .dual > .n{background:var(--red)}

/* ---------- Faktor-Zeile ---------- */
.fac{display:grid;grid-template-columns:130px 1fr 66px;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.fac .fn{font-weight:600}
.fac .fv{font-size:10.5px;color:var(--muted)}
.fac .fc{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- Logs ---------- */
.log{font-size:11.5px}
.log .row{display:grid;grid-template-columns:78px 66px 1fr;gap:10px;padding:4px 5px;border-bottom:1px solid var(--line)}
.log .row:hover{background:var(--panel3)}
.log .lvl{font-weight:700;font-size:10px}
.log .INFO{color:var(--muted)} .log .WARNING{color:var(--gold)} .log .ERROR{color:var(--red2)}
.log .t{color:var(--dim);font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- States ---------- */
.empty,.loading,.errbox{padding:22px;text-align:center;color:var(--muted);font-size:11.5px}
.errbox{color:var(--red2)}
.loading{color:var(--dim)}
.note{font-size:11px;color:var(--muted);line-height:1.65;margin-top:9px}
.srcnote{font-size:10px;color:var(--muted);margin-top:7px}

/* ---------- Toolbar / Buttons ---------- */
.toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
button.tb{background:var(--panel3);color:var(--muted);border:1px solid var(--border2);
  border-radius:6px;padding:5px 11px;font:500 11px var(--sans);cursor:pointer;transition:.14s}
button.tb:hover{color:var(--text);border-color:var(--gold)}
button.tb.on{color:#0a0d12;background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:var(--gold);font-weight:700}
input.f,select.f{background:var(--panel2);color:var(--text);border:1px solid var(--border2);
  border-radius:6px;padding:5px 9px;font:500 11px var(--sans)}
.sep,.spacer{flex:1}
.viewhead{display:flex;align-items:center;gap:11px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.viewhead h2{font-size:16px;font-weight:700;letter-spacing:.2px;color:var(--text)}
.viewhead .vx{font-size:11px;color:var(--muted)}
.locked{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-size:10px}