:root {
  --bg-base: #0b1d14;
  --bg-surface: #10271c;
  --bg-elevated: #163323;
  --bg-overlay: rgba(11, 29, 20, 0.84);
  --bg-scrim: rgba(11, 29, 20, 0.72);
  --border-subtle: rgba(13, 207, 154, 0.08);
  --border-default: rgba(13, 207, 154, 0.2);
  --border-emphasis: rgba(13, 207, 154, 0.34);
  --text-primary: #f4fff9;
  --text-secondary: #c7d8ce;
  --text-muted: #91a79a;
  --accent-primary: #0dcf9a;
  --accent-primary-hover: #3ddcae;
  --accent-primary-muted: rgba(13, 207, 154, 0.13);
  --success: #0dcf9a;
  --success-muted: rgba(13, 207, 154, 0.12);
  --info: #3ddcae;
  --info-muted: rgba(61, 220, 174, 0.12);
  --shadow-soft: 0 24px 64px -36px rgba(0, 0, 0, 0.8);
  --shadow-glow-accent: 0 0 24px rgba(13, 207, 154, 0.18);
  --focus-ring: 0 0 0 3px rgba(13, 207, 154, 0.35);
  --fg: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--border-default);
  --bg-1: var(--bg-base);
  --bg-2: #071210;
  --card: var(--bg-surface);
  --card-hover: var(--bg-elevated);
  --accent: var(--accent-primary);
  --accent-dark: var(--accent-primary-hover);
  --link: var(--accent-primary);
  --color-bg: var(--bg-base);
  --color-surface: var(--bg-surface);
  --color-surface-high: var(--bg-elevated);
  --color-border: var(--border-default);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--accent-primary);
  --color-accent-hover: var(--accent-primary-hover);
  --color-accent-soft: var(--accent-primary-muted);
}

body.public-site.vibe-utility-page,
body.vibe-utility-page {
  color: var(--text-primary);
  background:
    radial-gradient(circle at top left, rgba(13, 207, 154, 0.16), transparent 32rem),
    linear-gradient(180deg, #0b1d14 0%, #071210 100%);
}

body.public-site.vibe-utility-page .page {
  max-width: none;
  padding: 0;
}

.vibe-utility-main {
  width: min(1080px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) 0;
}

.vibe-utility-main--narrow {
  width: min(820px, calc(100vw - 32px));
}

.vibe-utility-kicker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vibe-utility-card {
  background: linear-gradient(180deg, rgba(16, 39, 28, 0.96), rgba(11, 29, 20, 0.96));
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.vibe-utility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vibe-utility-link,
.vibe-utility-link:visited {
  color: var(--accent);
  font-weight: 700;
}

.vibe-utility-muted {
  color: var(--text-muted);
}

.vibe-utility-page .vc-button,
.vibe-utility-page .btn-primary,
.vibe-utility-page .primary-cta,
.vibe-utility-page .retry-btn,
.vibe-utility-page .back-cta,
.vibe-utility-page .help-cta a,
.vibe-utility-page .badge-cta a,
.vibe-utility-page .topbar .login-btn {
  background: var(--accent);
  color: #071210 !important;
  border-color: transparent;
}

.vibe-utility-page .vc-button:hover,
.vibe-utility-page .btn-primary:hover,
.vibe-utility-page .primary-cta:hover,
.vibe-utility-page .retry-btn:hover,
.vibe-utility-page .back-cta:hover,
.vibe-utility-page .help-cta a:hover,
.vibe-utility-page .badge-cta a:hover,
.vibe-utility-page .topbar .login-btn:hover {
  background: var(--accent-dark);
}

.vibe-utility-page .public-nav,
.vibe-utility-page .public-footer {
  background: rgba(7, 18, 16, 0.92);
  border-color: rgba(13, 207, 154, 0.16);
}

.vibe-utility-page .public-nav__links a.is-active::after {
  background: var(--accent);
}

.vibe-legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) 24px;
}

.vibe-legal-main h1 {
  color: var(--text-primary);
  font: 800 clamp(2.2rem, 6vw, 4.6rem)/0.98 var(--font-display);
  letter-spacing: 0;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.vibe-legal-main h2 {
  color: var(--text-primary);
  font: 800 1.08rem/1.2 var(--font-display);
  letter-spacing: 0.06em;
  margin: 34px 0 10px;
  text-transform: uppercase;
}

.vibe-legal-main p,
.vibe-legal-main li {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
}

.vibe-legal-main ul {
  margin: 0;
  padding-left: 22px;
}

.vibe-legal-main a {
  color: var(--accent);
}

@media (max-width: 720px) {
  .vibe-utility-main {
    width: min(100% - 24px, 1080px);
    padding: 28px 0 48px;
  }
}