:root {
    --bg: #0f172a;
    --card: #1e293b;
    --border: #334155;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --green: #22c55e;
    --blue: #3b82f6;
    --yellow: #eab308;
    --red: #ef4444;
    --purple: #a855f7;
    --cyan: #06b6d4;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; font-size: 14px; }

  /* ── Top bar ── */
  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
  }
  header h1 { font-size: 18px; font-weight: 600; }
  .header-right { display: flex; align-items: center; gap: 12px; }
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--border); background: var(--bg);
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  select, button {
    background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px;
  }
  button:hover { background: var(--border); }

  /* ── Layout ── */
  main { padding: 24px; max-width: 1400px; margin: 0 auto; }
  .section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; margin-top: 28px; }

  /* ── KPI cards ── */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .kpi {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; display: flex; flex-direction: column; gap: 6px;
  }
  .kpi .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .kpi .value { font-size: 28px; font-weight: 700; line-height: 1; }
  .kpi .sub   { font-size: 11px; color: var(--muted); }
  .kpi.green  .value { color: var(--green); }
  .kpi.blue   .value { color: var(--blue); }
  .kpi.yellow .value { color: var(--yellow); }
  .kpi.red    .value { color: var(--red); }
  .kpi.purple .value { color: var(--purple); }
  .kpi.cyan   .value { color: var(--cyan); }

  /* ── Charts grid ── */
  .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
  .charts-grid.full { grid-template-columns: 1fr; }
  .chart-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
  }
  .chart-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 16px; color: var(--muted); }
  .chart-wrap { position: relative; height: 220px; }

  /* ── Tables ── */
  .table-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .table-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px;
  }
  .table-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 14px; color: var(--muted); }
  table { width: 100%; border-collapse: collapse; }
  th { font-size: 11px; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
  td { padding: 8px 8px; border-bottom: 1px solid #1e293b; font-size: 13px; }
  tr:last-child td { border: none; }
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600;
  }
  .badge.green  { background: #166534; color: #86efac; }
  .badge.yellow { background: #713f12; color: #fde68a; }
  .badge.blue   { background: #1e3a8a; color: #93c5fd; }

  /* ── Tabs ── */
  .tabs { display: flex; gap: 8px; margin-bottom: 16px; }
  .tab {
    padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
    border: 1px solid transparent; background: transparent; color: var(--muted);
  }
  .tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

  /* ── Loading ── */
  .spinner { text-align: center; padding: 60px; color: var(--muted); }
  .error   { text-align: center; padding: 40px; color: var(--red); }