/* Tema gelap (indigo) — semua warna lewat token di sini. */
:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #1a1f2a;
  --text: #e6e8ee;
  --muted: #8b93a7;
  --line: #242a37;
  --brand: #7c83f0;
  --brand-ink: #ffffff;
  --brand-soft: rgba(124, 131, 240, .16);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .12);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, .12);
  --good: #34d399;
  --good-bg: rgba(52, 211, 153, .12);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, .12);
  --side: #0e1118;
  --side-ink: #b4bccd;
  /* data viz — tervalidasi untuk permukaan --panel (dataviz validator, mode gelap) */
  --viz-1: #6d74e8;
  --viz-2: #1fa98f;
  --radius: 12px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-size: 14px; }

.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #5f6779; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 9px 14px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-decoration: none; display: inline-block;
}
.btn:hover { border-color: #3a4254; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: default; }