:root {
  --vf-brand-page-bg: #06130f;
  --vf-brand-sidebar-bg: #06111b;
  --vf-brand-surface-bg: #101927;
  --vf-brand-card-bg: #121d2b;
  --vf-brand-primary: #22c55e;
  --vf-brand-secondary: #16a34a;
  --vf-brand-text: #e8f5ee;
  --vf-brand-muted: #9fb4a8;
  --vf-brand-border: #1f3d2c;
  --vf-brand-button-from: #22c55e;
  --vf-brand-button-to: #16a34a;
  --vf-brand-button-text: #03140a;
  --vf-brand-button-radius: 14px;
}

body {
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--vf-brand-primary) 14%, transparent), transparent 32%), var(--vf-brand-page-bg) !important;
  color: var(--vf-brand-text);
}

.sidebar,
.vf-nav,
.vf-checkout-card,
.vf-signup-card {
  background: color-mix(in srgb, var(--vf-brand-sidebar-bg) 92%, #000 8%) !important;
}

.card,
.stat-card,
.vf-section,
.vf-stats article,
.vf-phone-card,
.vf5-card,
.vf5-section,
.vf5-gateway-box,
.vf7-card,
.vf8-card,
.vf111-card,
.vf105-card,
.vf114-card {
  background: color-mix(in srgb, var(--vf-brand-card-bg) 92%, #000 8%) !important;
  border-color: color-mix(in srgb, var(--vf-brand-border) 80%, transparent) !important;
}

.btn:not(.btn-ghost),
.vf-btn-primary,
button[type='submit'],
.vf5-form button[type='submit'],
.vf114-primary {
  background: linear-gradient(135deg, var(--vf-brand-button-from), var(--vf-brand-button-to)) !important;
  color: var(--vf-brand-button-text) !important;
  border-radius: var(--vf-brand-button-radius) !important;
  border-color: transparent !important;
}

.nav-list button.active,
.nav-list button:hover,
.vf-login,
.plan-badge,
.vf-badge,
.eyebrow,
.vf-kicker {
  border-color: color-mix(in srgb, var(--vf-brand-primary) 70%, transparent) !important;
  color: var(--vf-brand-primary) !important;
}

.brand-mark.vf114-has-logo,
.vf-brand span.vf114-has-logo {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 42px;
  padding: 0 !important;
}

.brand-mark.vf114-has-logo img,
.vf-brand span.vf114-has-logo img {
  display: block;
  max-width: 132px;
  max-height: 46px;
  object-fit: contain;
  border-radius: 10px;
}

.login-card.vf114-login-banner,
.auth-card.vf114-login-banner,
.vf-signup-card.vf114-login-banner {
  position: relative;
  overflow: hidden;
}

.vf114-login-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--vf-brand-login-banner);
  background-size: cover;
  background-position: center;
  opacity: .12;
  pointer-events: none;
}

.vf114-login-banner > * {
  position: relative;
  z-index: 1;
}