:root {
  color-scheme: dark;

  --background: #0f1511;
  --surface: #171d19;
  --surface-low: #0a0f0b;
  --surface-container: #1b211d;
  --surface-variant: #262b27;
  --surface-high: #262b27;
  --surface-highest: #303631;
  --surface-bright: #303631;
  --input-background: #0a0f0b;
  --topbar-background: rgba(5, 7, 5, 0.88);

  --text: #dee4dd;
  --muted: #bdcabf;
  --outline: rgba(135, 148, 138, 0.28);
  --primary: #71dba2;
  --primary-bright: #71dba2;
  --primary-container: #058857;
  --primary-strong: #058857;
  --secondary: #71dba2;
  --on-primary-container: #ffffff;
  --danger: #ff7d8b;
  --danger-text: #fecdd3;
  --warning: #fde68a;
  --warning-strong: #f59e0b;
  --black: #050705;

  --primary-rgb: 113, 219, 162;
  --primary-container-rgb: 5, 136, 87;
  --surface-rgb: 23, 29, 25;
  --surface-container-rgb: 27, 33, 29;
  --surface-high-rgb: 38, 43, 39;
  --danger-rgb: 255, 125, 139;
  --warning-rgb: 245, 158, 11;
  --text-rgb: 222, 228, 221;
  --black-rgb: 0, 0, 0;

  --font-body: Manrope, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-symbols: "Material Symbols Outlined";

  --waveform-background: #1b211d;
  --waveform-fill: #262b27;
  --waveform-stroke: #71dba2;
  --waveform-muted: #bdcabf;
}

.logout-form { display: inline; margin: 0; }
.nav-button { border: 0; background: transparent; cursor: pointer; font: inherit; }
.account-name { color: var(--text-muted, var(--text)); font-size: 0.85rem; }