:root {
  --bg: #0c1220;
  --bg-raised: #121c30;
  --fg: #b8c4d8;
  --fg-bright: #d4dde8;
  --fg-muted: #7e8ea8;
  --fg-dim: #566580;
  --accent: #5b7cb5;
  --accent-glow: #5b7cb544;
  --surface: #101828;
  --border: #1c2a42;
  --border-mid: #2a3f5e;
  --font-body: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

body {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(91,124,181,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,124,181,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.garden-nav {
  background: color-mix(in srgb, #0c1220 90%, transparent);
  border-bottom-color: var(--border);
}

.garden-nav a.active { border-bottom-color: var(--accent); }

.page-header {
  border-bottom-color: var(--border);
  position: relative;
}

.page-header::before {
  content: 'ADMIN';
  position: absolute;
  top: 8px; right: 0;
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 2px;
  color: var(--accent);
  opacity: 0.4;
}

.domain-card {
  border-color: var(--border);
  background: var(--surface);
}

.domain-card:hover { border-color: var(--accent); }

.role-table th {
  background: var(--surface);
  border-bottom-color: var(--accent);
  letter-spacing: 1px;
}

.role-table .role-name { color: var(--accent); }

.badge {
  background: #1c2a42;
  color: var(--accent);
  font-family: var(--font-body);
}

.trail-card {
  border-color: var(--border);
}
.trail-card:hover { border-color: var(--accent); }

.section-title {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--fg-muted);
}

.stat-num { color: var(--accent); }