/* NINE-NINE Account — Stahl (neutral) + Gold-Akzent */
:root {
  --ng-purple: #586570;
  --ng-purple-light: #8a96a3;
  --ng-teal: #4a5568;
  --ng-teal-light: #9aa3ad;
  --ng-sky: #b8c0c8;
  --ng-sky-bright: #d8dee4;
  --ng-sky-dim: rgba(184, 192, 200, 0.12);
  --ng-accent-gold: #e2d307;
  --ng-bg: #1a1d21;
  --ng-surface: #242830;
  --ng-surface-2: #2f3540;
  --ng-surface-elevated: #3a4150;
  --ng-text: #e8eaed;
  --ng-text-muted: #9aa3ad;
  --ng-border: rgba(184, 192, 200, 0.16);
  --ng-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  --ng-radius: 16px;
  --ng-radius-sm: 10px;
  --ng-header-h: 64px;
  --ng-font: "Barlow", system-ui, sans-serif;
  --ng-font-display: "Barlow Condensed", "Barlow", sans-serif;
  --ng-chat-bg: #1a1d21;
  --ng-chat-panel: #2f3540;
  --ng-chat-border: #4a5568;
  --ng-chat-text: #e8eaed;
  --ng-nav-active-text: #ffffff;
  --ng-nav-active-bg: linear-gradient(135deg, #45515f 0%, #586570 100%);
  --ng-color01: #1a1d21;
  --ng-color02: #2f3540;
  --ng-color03: #586570;
  --ng-color04: #9aa3ad;
  --ng-color05: #e2d307;
  --ng-color06: #d8dee4;
  --ng-color07: rgba(88, 101, 112, 0.28);
  --ng-color08: #363b42;
  --ng-color09: #2f3540;
  --ng-color10: #3a4150;
  --ng-color11: #242830;
  --ng-text-body: #c8d0d8;
  --ng-text-heading: #d8dee4;
  --bs-body-bg: #1a1d21;
  --bs-body-color: #e8eaed;
  --bs-card-bg: #3a4150;
  --bs-card-color: #e8eaed;
  --bs-card-border-color: rgba(184, 192, 200, 0.16);
  --bs-border-color: rgba(184, 192, 200, 0.16);
  --bs-table-bg: #2f3540;
  --bs-table-color: #e8eaed;
  --bs-table-border-color: rgba(184, 192, 200, 0.16);
}

.ng-body.ng-theme-account {
  color-scheme: dark;
  --ng-bg: #1a1d21;
  --ng-surface: #242830;
  --ng-surface-2: #2f3540;
  --ng-surface-elevated: #3a4150;
  --ng-text: #e8eaed;
  --ng-text-muted: #9aa3ad;
  --ng-color01: #1a1d21;
  --ng-color02: #2f3540;
  --ng-color09: #2f3540;
  --ng-color10: #3a4150;
  --ng-text-body: #c8d0d8;
  --ng-text-heading: #d8dee4;
  --bs-body-bg: #1a1d21;
  --bs-card-bg: #3a4150;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ng-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ng-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ng-text);
  background: var(--ng-bg);
  display: flex;
  flex-direction: column;
}

a { color: var(--ng-teal-light); text-decoration: none; }
a:hover { color: var(--ng-sky-bright); }

img { max-width: 100%; height: auto; }

.ng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ng-btn-primary {
  background: var(--ng-nav-active-bg);
  color: #fff;
  box-shadow: 0 4px 18px rgba(26, 29, 33, 0.45);
}

.ng-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ng-btn-secondary {
  background: var(--ng-surface-2);
  color: var(--ng-text);
  border: 1px solid var(--ng-border);
}

.ng-btn-secondary:hover {
  background: var(--ng-surface-elevated);
  color: var(--ng-text);
}

.ng-btn-sm {
  padding: 6px 14px;
  font-size: 0.875rem;
}

.ng-badge-public { background: rgba(88, 101, 112, 0.22); color: var(--ng-sky); }
.ng-badge-alpha { background: rgba(226, 211, 7, 0.18); color: #f0e060; }
.ng-badge-beta { background: var(--ng-sky-dim); color: var(--ng-teal-light); }
.ng-badge-dev { background: rgba(74, 85, 104, 0.35); color: var(--ng-sky-bright); }
.ng-badge-restricted { background: rgba(220, 80, 90, 0.2); color: #ff8a94; }