:root {
  --surface: #050b22;
  --surface-soft: #02081c;
  --line: rgba(113,129,181,0.28);
  --text-main: #e7eefb;
  --text-muted: #a7b5d3;
  --brand: #e83ca5;
  --brand-strong: #c82a8d;
  --focus: #6bb3ff;
  --danger: #ff7a9f;
  --topbar-bg: rgba(2,8,28,0.9);
  --topbar-brand-color: #f2f7ff;
  --topbar-meta-color: #9fb0d0;
  --color-text-heading: #eef4ff;
  --color-text-primary: #e7eefb;
  --color-text-muted: #a7b5d3;
  --color-link: #9fc4ff;
  --color-surface-hero: transparent;
  --color-surface-form: rgba(5,12,37,0.66);
  --color-surface-card: rgba(8,16,45,0.82);
  --color-surface-input: rgba(7,15,44,0.9);
  --color-border-base: rgba(117,134,189,0.32);
  --color-border-card: rgba(127,143,196,0.34);
  --color-border-input: rgba(127,143,196,0.38);
  --color-step-node: rgba(77,96,156,0.42);
  --color-step-node-text: #b5c4e8;
  --color-step-label: #afbcdd;
  --color-step-label-active: #edf4ff;
  --color-step-line: rgba(118,135,191,0.42);
  --color-text-strong: #eef4ff;
  --color-text-soft: #aab7d4;
  --color-representative-bg: rgba(10,19,52,0.78);
  --color-representative-border: rgba(122,139,196,0.5);
  --color-helper: #97abcf;
  --font-body: Nunito Sans, Segoe UI, sans-serif;
  --font-heading: Nunito Sans, Segoe UI, sans-serif;
  --shadow-soft: 0 20px 40px -24px rgba(0, 0, 0, 0.72);
  --app-background: radial-gradient(circle at 28% -8%, rgba(232, 60, 165, 0.22), transparent 32%), radial-gradient(circle at 82% 12%, rgba(86, 131, 255, 0.2), transparent 34%), radial-gradient(circle at 60% 85%, rgba(91, 57, 202, 0.14), transparent 34%), #02081c;
  --color-right-badge-bg: rgba(86, 131, 255, 0.16);
  --color-right-badge-text: #cfe2ff;
  --color-right-badge-border: rgba(129, 159, 255, 0.42);
  --secondary-color: #e7eefb;
}
.app {
  --surface: #050b22;
  --surface-soft: #02081c;
  --line: rgba(113,129,181,0.28);
  --text-main: #e7eefb;
  --text-muted: #a7b5d3;
  --brand: #e83ca5;
  --brand-strong: #c82a8d;
  --focus: #6bb3ff;
  --danger: #ff7a9f;
  --topbar-bg: rgba(2,8,28,0.9);
  --topbar-brand-color: #f2f7ff;
  --topbar-meta-color: #9fb0d0;
  --color-text-heading: #eef4ff;
  --color-text-primary: #e7eefb;
  --color-text-muted: #a7b5d3;
  --color-link: #9fc4ff;
  --color-surface-hero: transparent;
  --color-surface-form: rgba(5,12,37,0.66);
  --color-surface-card: rgba(8,16,45,0.82);
  --color-surface-input: rgba(7,15,44,0.9);
  --color-border-base: rgba(117,134,189,0.32);
  --color-border-card: rgba(127,143,196,0.34);
  --color-border-input: rgba(127,143,196,0.38);
  --color-step-node: rgba(77,96,156,0.42);
  --color-step-node-text: #b5c4e8;
  --color-step-label: #afbcdd;
  --color-step-label-active: #edf4ff;
  --color-step-line: rgba(118,135,191,0.42);
  --color-text-strong: #eef4ff;
  --color-text-soft: #aab7d4;
  --color-representative-bg: rgba(10,19,52,0.78);
  --color-representative-border: rgba(122,139,196,0.5);
  --color-helper: #97abcf;
  --font-body: Nunito Sans, Segoe UI, sans-serif;
  --font-heading: Nunito Sans, Segoe UI, sans-serif;
  --shadow-soft: 0 20px 40px -24px rgba(0, 0, 0, 0.72);
  --app-background: radial-gradient(circle at 28% -8%, rgba(232, 60, 165, 0.22), transparent 32%), radial-gradient(circle at 82% 12%, rgba(86, 131, 255, 0.2), transparent 34%), radial-gradient(circle at 60% 85%, rgba(91, 57, 202, 0.14), transparent 34%), #02081c;
  --color-right-badge-bg: rgba(86, 131, 255, 0.16);
  --color-right-badge-text: #cfe2ff;
  --color-right-badge-border: rgba(129, 159, 255, 0.42);
  --secondary-color: #e7eefb;
}