@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap");

:root {
  --ab-page: #f7f5fb;
  --ab-paper: #ffffff;
  --ab-ink: #15131d;
  --ab-muted: #6f6a7b;
  --ab-line: #dfdbea;
  --ab-violet: #5c1eec;
  --ab-violet-deep: #4820bb;
  --ab-violet-soft: #eee9ff;
  --ab-forest: #205e4f;
  --ab-shadow: 0 22px 70px rgba(39, 29, 75, 0.12);
}

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 88% 0%, rgba(226, 218, 255, 0.62), transparent 28rem),
    radial-gradient(circle at 8% 42%, rgba(224, 243, 235, 0.46), transparent 30rem),
    var(--ab-page);
  color: var(--ab-ink);
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

body.health-page { font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; }

::selection { background: rgba(92, 30, 236, 0.2); color: var(--ab-ink); }

:focus-visible {
  outline: 3px solid rgba(92, 30, 236, 0.34);
  outline-offset: 3px;
}

/* Common chrome: public pages, onboarding, setup and legal pages share the home-page rhythm. */
.site-header,
.topbar,
.staff-page > header,
.auth-header,
.legal-header,
.setup-topbar,
.page-header,
.workspace-header {
  border-bottom-color: rgba(39, 29, 75, 0.1) !important;
  background: rgba(247, 245, 251, 0.82) !important;
  box-shadow: 0 8px 28px rgba(39, 29, 75, 0.055);
  backdrop-filter: blur(18px);
}

.site-header .brand img,
.topbar .brand img,
.staff-page > header .brand img,
.auth-header .brand img,
.legal-header .brand img,
.setup-topbar .brand img,
.page-header .brand img {
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(39, 29, 75, 0.14);
}

.site-header .brand,
.topbar .brand,
.auth-header .brand,
.legal-header .brand,
.setup-topbar .brand,
.page-header .brand {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: -0.02em;
}

body:not(.health-page) h1,
body:not(.health-page) h2,
body:not(.health-page) h3 {
  font-family: "IBM Plex Serif", Georgia, serif;
  letter-spacing: -0.035em;
}

body .nav-cta,
body .button.primary,
body .primary-button,
body .paypal-button,
body .build-button,
body .send-button,
body .claim-button,
body .create-button,
body .assessment-submit,
body .auth-submit,
body .reset-submit,
body .invite-submit,
body .unsubscribe-action.primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #6b35f1 0%, #4a1fc3 100%) !important;
  box-shadow: 0 10px 24px rgba(92, 30, 236, 0.2);
}

body .nav-cta:hover,
body .button.primary:hover,
body .primary-button:hover,
body .paypal-button:hover,
body .build-button:hover,
body .send-button:hover,
body .claim-button:hover,
body .create-button:hover,
body .assessment-submit:hover,
body .auth-submit:hover,
body .reset-submit:hover,
body .invite-submit:hover,
body .unsubscribe-action.primary:hover {
  background: linear-gradient(135deg, #7b4aff 0%, #3f19ad 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(92, 30, 236, 0.25);
}

body .button,
body .nav-cta,
body .primary-button,
body .secondary-button,
body .paypal-button,
body .build-button,
body .send-button,
body .claim-button,
body .create-button,
body .assessment-submit,
body .auth-submit,
body .reset-submit,
body .invite-submit,
body .unsubscribe-action {
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Cards on older utility pages get the same measured depth as the home page. */
.auth-card,
.legal-main article,
.legal-note,
.status-card,
.payment-card,
.builder-card,
.card,
.plan-card,
.setup-card,
.panel,
.chat-shell,
.unsubscribe-card,
.video-frame,
.demo-shell,
.preview-card {
  border-color: rgba(92, 30, 236, 0.15) !important;
  box-shadow: 0 18px 46px rgba(39, 29, 75, 0.09);
}

.auth-card,
.legal-main article,
.status-card,
.payment-card,
.builder-card,
.card,
.plan-card,
.setup-card,
.panel,
.chat-shell,
.unsubscribe-card,
.video-frame,
.preview-card {
  border-radius: 18px;
}

.auth-page,
.chat-page,
.unsubscribe-page {
  background:
    radial-gradient(circle at 16% 18%, rgba(224, 243, 235, 0.8), transparent 25rem),
    radial-gradient(circle at 86% 4%, rgba(226, 218, 255, 0.82), transparent 28rem),
    var(--ab-page);
}

.sidebar {
  background:
    linear-gradient(180deg, #11101b 0%, #171327 100%) !important;
  box-shadow: 18px 0 54px rgba(25, 16, 56, 0.08);
}

.sidebar .nav-item.active,
.sidebar .nav-item:hover {
  background: rgba(121, 74, 255, 0.2) !important;
}

.sidebar .nav-item b { background: rgba(121, 74, 255, 0.62) !important; }

.workspace-main { background: transparent; }
.workspace-header { background: rgba(255,255,255,0.78) !important; }
.workspace-header h1 { font-family: "IBM Plex Serif", Georgia, serif; letter-spacing: -0.035em; }

.metric-strip,
.metric,
.view .panel,
.workspace-main .panel {
  border-color: var(--ab-line);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(39, 29, 75, 0.055);
}

.workspace-main .primary-button { background: linear-gradient(135deg, #6b35f1 0%, #4a1fc3 100%) !important; }
.workspace-main .primary-button:hover { background: linear-gradient(135deg, #7b4aff 0%, #3f19ad 100%) !important; }

.form-card,
.assessment-card,
.setup-card,
.auth-card,
.builder-card { backdrop-filter: blur(14px); }

/* Respect the clean, low-noise character of operational screens. */
.app-shell input:focus,
.app-shell textarea:focus,
.app-shell select:focus,
.setup-page input:focus,
.setup-page textarea:focus,
.setup-page select:focus,
.auth-card input:focus,
.auth-card textarea:focus,
.auth-card select:focus {
  border-color: var(--ab-violet) !important;
  box-shadow: 0 0 0 4px rgba(92, 30, 236, 0.13) !important;
}

/* Motion layer. Elements only become hidden after JavaScript attaches the class. */
html.ab-motion-enabled .ab-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--ab-delay, 0ms);
}

html.ab-motion-enabled .ab-reveal.ab-visible {
  opacity: 1;
  transform: translateY(0);
}

html.ab-motion-enabled .ab-pop {
  animation: ab-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--ab-delay, 0ms);
}

body.ab-scrolled .site-header,
body.ab-scrolled .topbar,
body.ab-scrolled .auth-header,
body.ab-scrolled .legal-header,
body.ab-scrolled .setup-topbar,
body.ab-scrolled .page-header,
body.ab-scrolled .workspace-header {
  box-shadow: 0 12px 34px rgba(39, 29, 75, 0.11);
}

@keyframes ab-pop {
  0% { opacity: 0; transform: scale(0.96) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 720px) {
  .site-header,
  .topbar,
  .auth-header,
  .legal-header,
  .setup-topbar,
  .page-header { min-height: 64px; }
  .site-header .brand img,
  .topbar .brand img,
  .auth-header .brand img,
  .legal-header .brand img,
  .setup-topbar .brand img,
  .page-header .brand img { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.ab-motion-enabled .ab-reveal { opacity: 1; transform: none; }
}