/* ===== Custom Scrollbar for Dark Theme ===== */
/* Webkit browsers */
::-webkit-scrollbar {
  width: 12px;
  background: #222;
}

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
  border: 2px solid #222;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

::-webkit-scrollbar-corner {
  background: #222;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #444 #222;
}

/* ===== Passle-ish Theme (tokens) ===== */
:root {
  --brand-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --brand-accent: #00e5ff;
  /* neon cyan */
  --brand-accent-600: #00c2ff;
  --brand-accent-700: #00a3d6;
  --brand-ink: #e5e7eb;
  --brand-muted: #9ca3af;
  --brand-bg: #000102;
  /* --brand-bg: #0b1020; */
  /* deep space */
  /* --brand-panel-bg: #0f1628; */
  /* dark panel */
  --brand-border: #1f2937;
  /* subtle border */
  --chip-bg: rgba(0, 229, 255, 0.06);
  /* faint neon chip */
}

/* Global page background + typography */
html,
body {
  font-family: var(--brand-font);
  color: var(--brand-ink);
  /* background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0, 229, 255, 0.06), transparent 60%),
    radial-gradient(1000px 800px at 80% 40%, rgba(57, 255, 20, 0.05), transparent 60%),
    var(--brand-bg); */
  background: var(--brand-bg);
  margin: 0;
}

/* App layout root */
#app {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: 100vh;
}

/* Utilities */
.group {
  margin: 8px 0;
}

.row {
  margin: 4px 0;
}

.muted {
  color: var(--brand-muted);
  font-size: 12px;
}

/* Form accents */
input[type="checkbox"] {
  accent-color: var(--brand-accent);
  filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.4));
}