* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#f4f6fa; --surface:#fff; --surface2:#f0f4ff;
  --border:#e8ecf4; --navy:#1a2b5e; --blue:#2563eb;
  --blue-l:#3b82f6; --green:#16a34a; --green-l:#22c55e;
  --red:#dc2626; --red-l:#ef4444; --yellow:#d97706;
  --yellow-l:#f59e0b; --purple:#7c3aed;
  --text:#111827; --muted:#6b7280; --muted2:#9ca3af;
  --shadow:0 1px 4px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05);
}
body { background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px; }

/* ── Navigation ──────────────────────────────────────────── */
nav {
  background:#7f1d1d; padding:0 28px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo {
  width:32px; height:32px; background:var(--blue-l); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.nav-title { color:#fff; font-weight:700; font-size:15px; letter-spacing:.5px; }
.nav-sub { color:#93a8d4; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.nav-tabs { display:flex; gap:2px; }
.nav-tab {
  padding:6px 18px; border-radius:6px; font-size:13px; font-weight:500;
  cursor:pointer; color:#93a8d4; border:none; background:transparent;
  text-decoration:none; transition:all .15s; display:inline-block;
}
.nav-tab.active { background:var(--blue-l); color:#fff; font-weight:600; }
.nav-tab:hover:not(.active) { color:#fff; background:rgba(255,255,255,.08); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-icon {
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.1);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#93a8d4; font-size:15px; transition:background .15s; position:relative;
}
.nav-icon:hover { background:rgba(255,255,255,.18); }
.notif::after {
  content:''; position:absolute; top:6px; right:6px;
  width:7px; height:7px; background:var(--red-l); border-radius:50%; border:2px solid var(--navy);
}
.avatar {
  width:34px; height:34px; background:linear-gradient(135deg,#f59e0b,#ef4444);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:#fff; cursor:pointer;
}

/* ── Demo-Bar ─────────────────────────────────────────────── */
.demo-bar {
  background:#fef3c7; border-bottom:1px solid #fde68a; color:#92400e;
  padding:7px 28px; font-size:12px; font-weight:500; display:none; align-items:center; gap:8px;
}
.demo-bar.on { display:flex; }

/* ── Layout ───────────────────────────────────────────────── */
.container { padding:24px 28px 40px; max-width:1440px; margin:0 auto; }
.page-title { font-size:22px; font-weight:700; margin-bottom:2px; }
.page-sub { font-size:13px; color:var(--muted); margin-bottom:22px; }

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.kpi-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:20px 22px; box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.kpi-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.kpi-value { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:2px; line-height:1.15; }
.kpi-detail { font-size:11px; color:var(--muted2); margin-bottom:6px; }
.kpi-badge {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px;
}
.badge-up   { color:var(--green); background:#dcfce7; }
.badge-down { color:var(--red);   background:#fee2e2; }
.badge-neu  { color:var(--blue);  background:#dbeafe; }
.kpi-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.ic-blue   { background:#dbeafe; }
.ic-green  { background:#dcfce7; }
.ic-purple { background:#ede9fe; }
.ic-yellow { background:#fef3c7; }

/* ── Cards ────────────────────────────────────────────────── */
.main-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; margin-bottom:20px; }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden;
}
.card-header {
  padding:15px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-weight:700; font-size:14px; }
.card-sub { font-size:11px; color:var(--muted); margin-top:1px; }
.card-body { padding:20px; }

/* ── Timeframe Buttons ────────────────────────────────────── */
.tf-btns { display:flex; gap:3px; }
.tf-btn {
  padding:3px 9px; border-radius:5px; font-size:11px; font-weight:600;
  cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--muted); transition:all .12s;
}
.tf-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.tf-btn:hover:not(.active) { background:var(--surface2); color:var(--text); }

/* ── Chart ────────────────────────────────────────────────── */
.chart-wrap { height:220px; }
svg.chart { width:100%; height:100%; }

/* ── Live Badge ───────────────────────────────────────────── */
.live-badge { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--green); }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green-l); animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Signal Items ─────────────────────────────────────────── */
.sig-item { padding:12px 0; border-bottom:1px solid var(--border); }
.sig-item:last-child { border-bottom:none; }
.sig-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.sig-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.ico-buy { background:#dcfce7; } .ico-sell { background:#fee2e2; } .ico-watch { background:#fef3c7; }
.sig-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; letter-spacing:.4px; }
.sb-buy { background:#dcfce7; color:var(--green); }
.sb-sell { background:#fee2e2; color:var(--red); }
.sb-watch { background:#fef3c7; color:var(--yellow); }
.sig-sym { font-weight:700; font-size:13px; }
.sig-time { font-size:11px; color:var(--muted2); margin-left:auto; }
.sig-desc { font-size:11px; color:var(--muted); margin-bottom:5px; padding-left:38px; }
.conf-row { padding-left:38px; display:flex; align-items:center; gap:8px; }
.conf-bg { flex:1; height:4px; background:#e5e7eb; border-radius:2px; overflow:hidden; }
.conf-fill { height:4px; border-radius:2px; }
.cf-buy{background:var(--green-l);} .cf-sell{background:var(--red-l);} .cf-watch{background:var(--yellow-l);}
.conf-pct { font-size:11px; font-weight:600; color:var(--muted); min-width:30px; text-align:right; }

/* ── Watchlist / Positionen ───────────────────────────────── */
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.watch-item {
  display:flex; align-items:center; padding:11px 0;
  border-bottom:1px solid var(--border); gap:10px;
}
.watch-item:last-child { border-bottom:none; }
.watch-sym { font-weight:700; font-size:13px; }
.watch-name { font-size:11px; color:var(--muted2); }
.watch-spark { flex:1; height:24px; margin:0 8px; }
.watch-price { font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }
.watch-chg { font-size:11px; font-weight:600; }
.tc-green { color:var(--green); } .tc-red { color:var(--red); } .tc-muted { color:var(--muted2); }

/* ── Tabellen ─────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; }
thead th {
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
  padding:8px 14px; text-align:left; border-bottom:1px solid var(--border);
  font-weight:600; background:#fafbff;
}
tbody tr { border-bottom:1px solid #f3f4f6; transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#f9fafb; }
tbody td { padding:10px 14px; font-size:13px; font-variant-numeric:tabular-nums; }
.side-b { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.sl { background:#dcfce7; color:var(--green); } .ss { background:#fee2e2; color:var(--red); }
.pnl-p { color:var(--green); font-weight:700; } .pnl-n { color:var(--red); font-weight:700; }

/* ── Summary Row ──────────────────────────────────────────── */
.sum-row {
  display:flex; gap:28px; padding:10px 20px;
  background:#fafbff; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.sum-item { display:flex; flex-direction:column; }
.sum-label { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted2); font-weight:600; }
.sum-value { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-r {
  display:inline-flex; align-items:center; gap:5px; background:var(--surface2);
  border:1px solid var(--border); color:var(--muted); padding:5px 12px; border-radius:7px;
  font-size:12px; font-weight:500; cursor:pointer; transition:all .15s;
}
.btn-r:hover { border-color:var(--blue); color:var(--blue); }

/* ── Empty States ─────────────────────────────────────────── */
.empty-s { text-align:center; padding:32px; color:var(--muted2); font-size:13px; }
.empty-ico { font-size:28px; margin-bottom:8px; opacity:.6; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.main-grid,.bottom-grid{grid-template-columns:1fr}}
@media(max-width:600px){.nav-tabs{display:none}.container{padding:14px}}