:root {
  --bg: #0e1017;
  --panel: #171a24;
  --panel-2: #1e2230;
  --line: #272c3a;
  --text: #e7e9f0;
  --muted: #9aa1b2;
  --accent: #6c8cff;
  --iap: #6c8cff;
  --ads: #35c78a;
  --pos: #35c78a;
  --neg: #ff6b6b;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--neg); }

.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; letter-spacing: .2px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--iap), var(--ads)); box-shadow: 0 0 12px var(--iap); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: 320px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.login-card input, .controls select, .controls button, .login-card button {
  font: inherit;
}
.login-card input {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 11px 12px; outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 11px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 18px; padding: 12px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--text); background: var(--panel-2); }
.controls { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.controls select, .ghost {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 10px; cursor: pointer;
}
.ghost:hover { border-color: var(--accent); }

/* ---- Layout ---- */
#main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }
.view { display: flex; flex-direction: column; gap: 18px; }
h2 { margin: 4px 0; }
h3 { margin: 0; font-size: 15px; }

/* ---- KPI ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.kpi .delta { font-size: 12px; margin-top: 4px; font-weight: 600; }
.delta.pos { color: var(--pos); }
.delta.neg { color: var(--neg); }
.delta.flat { color: var(--muted); }

/* ---- Cards ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
canvas { width: 100%; display: block; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-iap::before { background: var(--iap); }
.lg-ads::before { background: var(--ads); }

/* ---- Tabellen ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--panel-2); }
.plat { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--panel-2); color: var(--muted); margin-left: 6px; }
.bar-cell { position: relative; }
.bar { position: absolute; left: 12px; bottom: 4px; height: 3px; background: var(--iap); border-radius: 2px; opacity: .7; }

/* ---- Sync-Bar ---- */
.syncbar {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--panel); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.syncbar .ok::before { content: "● "; color: var(--pos); }
.syncbar .err::before { content: "● "; color: var(--neg); }
.syncbar .none::before { content: "○ "; color: var(--muted); }

.empty { color: var(--muted); text-align: center; padding: 28px; }