/* SC CI – Touch, Header fix, Charts nebeneinander, wichtiges oben ohne Scroll */
*{box-sizing:border-box}
:root{--panel:#121218;--border:#222434;--text:#e7e7ef;--muted:#a0a3b1}
body{margin:0;font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#0b0b0e;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:#10121a;position:sticky;top:0;z-index:10}
h1{margin:0;font-size:18px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button, select{background:#1c1e2b;color:var(--text);border:1px solid var(--border);border-radius:14px;min-height:44px;font-size:15px}
button{padding:10px 14px;cursor:pointer}
button:active{transform:translateY(1px);opacity:.95}
label.inline{display:flex;align-items:center;gap:8px;background:#1c1e2b;padding:8px 10px;border-radius:12px;border:1px solid var(--border);min-height:44px}
input[type=range]{width:180px;height:36px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:#23263a;border-radius:10px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-6px;border-radius:50%;background:#3a9bff;border:2px solid #1f2336}

main{max-width:1600px;margin:10px auto;padding:0 10px;display:grid;gap:10px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.status{color:var(--muted);margin:6px 0}
.hint{color:var(--muted);font-size:13px}

.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.chart-box h3{margin:0 0 6px 0;font-size:15px;color:#cfd3e6}
canvas{width:100%;background:#0f111a;border:1px solid var(--border);border-radius:12px}

.legend{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .live::before{content:"";width:16px;height:3px;background:#8ab4f8;display:inline-block}
.legend .ref::before{content:"";width:16px;height:3px;background:#a0e0b5;display:inline-block}
.legend .diff::before{content:"";width:16px;height:3px;background:#f7cf6d;display:inline-block}

#refList{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
#refList li{border:1px solid var(--border);border-radius:12px;padding:10px;background:#12131c;display:flex;align-items:center;justify-content:space-between;gap:8px}
#refList .meta{font-size:12px;color:var(--muted)}

footer{max-width:1600px;margin:10px auto 20px;padding:0 10px;color:var(--muted);font-size:12px}

/* unter 1100px automatisch untereinander */
@media (max-width: 1100px){
  .charts-grid{grid-template-columns:1fr}
}

/* Legal footer */
.legal-footer { margin-top: 2rem; padding: 1rem 0; text-align: center; font-size: .95rem; color:#666; }
.legal-footer a { color: inherit; text-decoration: underline; }

/* Countdown overlay */
#countdownOverlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.35); z-index:9999; pointer-events:none;
}
#countdownOverlay.active{ display:flex; }
#countdownOverlay::after{
  content:attr(data-s);
  font-size:22vmin; font-weight:800; color:#e7e7ef; text-shadow:0 2px 18px rgba(0,0,0,.4);
}

/* Dark/Light theme */
:root.light{ --panel:#f6f7fb; --border:#dfe3ef; --text:#111; --muted:#5b5f69; }
:root.light body{ background:#ffffff; }
:root.light header{ background:#f0f3fa; border-bottom-color: var(--border); }
:root.light button, :root.light select{ background:#fff; border-color: var(--border); color:#111; }
:root.light .panel{ background:#fff; border-color: var(--border); }

/* Header groups & separators */
.controls{gap:10px; flex-wrap:wrap; align-items:center}
.ctrl-group{display:flex; gap:8px; align-items:center}
.ctl-sep{width:1px; height:28px; background:var(--border); display:inline-block; margin:0 6px; opacity:.7}
@media (max-width: 1024px){
  .ctl-sep{display:none}
}

/* Toast notification */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 14px;background:rgba(0,0,0,.75);color:#fff;border-radius:12px;display:none;z-index:99999;max-width:80vw;font-size:14px}
#toast.ok{background:rgba(53,192,122,.9)}
#toast.err{background:rgba(240,93,94,.95)}