:root {
  /* Whites & structure */
  --white-pure: #FDFDFC;
  --white-soft: #F7F6F4;
  --white-elevated: #FFFFFF;
  --midnight: #0A1628;
  --midnight-soft: #3A4556;
  --gray-whisper: #E8E6E2;

  /* Red system */
  --red-core: #E63946;
  --red-deep: #B91C2C;
  --orange-warn: #F4811F;
  --yellow-caution: #F4C430;
  --red-ghost: rgba(230, 57, 70, 0.08);

  /* Success */
  --success-mint: #34D399;

  /* Recipes */
  --pillow-shadow:
    0 1px 2px rgba(10, 22, 40, 0.04),
    0 8px 24px rgba(10, 22, 40, 0.06),
    0 24px 48px rgba(10, 22, 40, 0.04);
  --pillow-shadow-hover:
    0 1px 2px rgba(10, 22, 40, 0.05),
    0 12px 32px rgba(10, 22, 40, 0.09),
    0 32px 60px rgba(10, 22, 40, 0.06);
  --glass-shadow:
    0 1px 2px rgba(230, 57, 70, 0.04),
    0 8px 32px rgba(230, 57, 70, 0.12);

  /* Signature gradient — flipped: yellow/orange on left, deepest red on right.
     The angel pushes through deeper red as he advances. */
  --signature-gradient:   linear-gradient(135deg, #F4C430 0%, #F4811F 30%, #E63946 65%, #B91C2C 100%);
  --signature-gradient-h: linear-gradient(90deg,  #F4C430 0%, #F4811F 30%, #E63946 65%, #B91C2C 100%);
  /* Onboarding flood — starts whitish/transparent on the left, deepens to dense red on the right */
  --onboarding-flood: linear-gradient(90deg,
    rgba(230,57,70,0.18) 0%,
    rgba(230,57,70,0.55) 22%,
    #E63946 60%,
    #B91C2C 100%);

  /* Soft neumorphism (pillow UI) shadow recipes — shared base color #FDFDFC */
  --neu-light: #FFFFFF;
  --neu-dark:  rgba(10, 22, 40, 0.10);
  --neu-out:
    -6px -6px 14px rgba(255, 255, 255, 0.95),
    6px 6px 14px rgba(10, 22, 40, 0.08);
  --neu-out-sm:
    -3px -3px 8px rgba(255, 255, 255, 0.95),
    3px 3px 8px rgba(10, 22, 40, 0.07);
  --neu-in:
    inset -3px -3px 8px rgba(255, 255, 255, 0.9),
    inset 3px 3px 8px rgba(10, 22, 40, 0.08);
  --neu-in-deep:
    inset -4px -4px 10px rgba(255, 255, 255, 0.9),
    inset 4px 4px 10px rgba(10, 22, 40, 0.10);

  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--midnight);
  background: var(--white-pure);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* "serif" class kept for compatibility but now points to display sans —
   soft, rounded, in the spirit of the pillow aesthetic.
   Manrope/Plus Jakarta Sans give us soft generous shapes without the precious feel. */
.serif {
  font-family: "Manrope", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.mono {
  font-family: "JetBrains Mono", "Söhne Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

.micro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--midnight-soft);
}

.h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.body { font-size: 15px; font-weight: 400; line-height: 1.55; }
.small { font-size: 13px; font-weight: 500; line-height: 1.45; }

.pillow {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--pillow-shadow);
  border: 1px solid rgba(10, 22, 40, 0.03);
}
.pillow.hero { border-radius: 28px; }

.glass-red {
  background: rgba(230, 57, 70, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(230, 57, 70, 0.18);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

button { font-family: inherit; cursor: pointer; }

/* Soft neumorphism controls -------------------------------------------------- */
.neu-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--midnight);
  background: var(--white-pure);
  border: none;
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: var(--neu-out);
  transition: box-shadow 180ms var(--ease-soft), transform 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.neu-btn:hover { box-shadow: var(--neu-out-sm); }
.neu-btn:active, .neu-btn.is-pressed { box-shadow: var(--neu-in); transform: translateY(0.5px); }

.neu-btn-sm { padding: 8px 14px; font-size: 12px; border-radius: 10px; box-shadow: var(--neu-out-sm); }
.neu-btn-sm:active { box-shadow: var(--neu-in); }

.neu-btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, #14233A 0%, #0A1628 100%);
  box-shadow:
    -4px -4px 10px rgba(255,255,255,0.85),
    4px 4px 12px rgba(10,22,40,0.22),
    inset 1px 1px 0 rgba(255,255,255,0.10);
}
.neu-btn-primary:hover { box-shadow:
    -3px -3px 8px rgba(255,255,255,0.85),
    3px 3px 10px rgba(10,22,40,0.22),
    inset 1px 1px 0 rgba(255,255,255,0.10); }
.neu-btn-primary:active { box-shadow:
    inset 3px 3px 8px rgba(0,0,0,0.35),
    inset -2px -2px 6px rgba(255,255,255,0.08); }

.neu-btn-gradient {
  color: #FFFFFF;
  background: linear-gradient(135deg, #F4C430 0%, #F4811F 30%, #E63946 65%, #B91C2C 100%);
  box-shadow:
    -4px -4px 10px rgba(255,255,255,0.85),
    6px 6px 18px rgba(230,57,70,0.30),
    inset 1px 1px 0 rgba(255,255,255,0.18);
}
.neu-btn-gradient:active { box-shadow:
    inset 3px 3px 8px rgba(120,20,30,0.45),
    inset -2px -2px 6px rgba(255,255,255,0.18); }

/* White button with subtle red glow. Halo intensifies on hover. */
.neu-btn-redglow {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid rgba(230, 57, 70, 0.18);
  border-radius: 14px;
  padding: 12px 20px;
  color: var(--midnight);
  background: #FFFFFF;
  box-shadow:
    0 2px 6px rgba(10, 22, 40, 0.04),
    0 0 14px rgba(230, 57, 70, 0.10);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    box-shadow 220ms var(--ease-soft),
    transform 160ms var(--ease-soft),
    border-color 220ms var(--ease-soft);
}
.neu-btn-redglow:hover {
  border-color: rgba(230, 57, 70, 0.55);
  box-shadow:
    0 4px 12px rgba(10, 22, 40, 0.06),
    0 0 0 3px rgba(230, 57, 70, 0.10),
    0 0 22px rgba(230, 57, 70, 0.30);
  transform: translateY(-1px);
}
.neu-btn-redglow:active {
  transform: translateY(0.5px);
  box-shadow:
    inset 2px 2px 6px rgba(10, 22, 40, 0.10),
    0 0 14px rgba(230, 57, 70, 0.18);
}

/* Green gradient button — used for the Fix-all (compose) primary action. */
.neu-btn-greengrad {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 12px 20px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #047857 100%);
  box-shadow:
    0 4px 12px rgba(16, 185, 129, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: box-shadow 200ms var(--ease-soft), transform 160ms var(--ease-soft);
}
.neu-btn-greengrad:hover {
  box-shadow:
    0 6px 18px rgba(16, 185, 129, 0.45),
    0 0 0 3px rgba(52, 211, 153, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.neu-btn-greengrad:active {
  transform: translateY(0.5px);
  box-shadow:
    inset 2px 2px 6px rgba(4, 120, 87, 0.50),
    inset -1px -1px 3px rgba(255, 255, 255, 0.18);
}

/* Muted/disabled white button — for primary buttons in disabled state. */
.neu-btn-muted {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: not-allowed;
  border: 1px solid var(--gray-whisper);
  border-radius: 14px;
  padding: 12px 20px;
  color: rgba(58, 69, 86, 0.45);
  background: #FFFFFF;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.neu-btn-redglow-lg {
  padding: 16px 30px;
  font-size: 14px;
  border-radius: 16px;
}
.neu-btn-redglow-sm {
  padding: 9px 16px;
  font-size: 12px;
  border-radius: 12px;
}

/* Tab strip — minimal. No outer shadow on the strip; tabs themselves use
   inset shadow. Active state is a slightly darkened white (no beige tint).
   Hover only changes text color. */
.rg-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.rg-tab {
  background: var(--white-pure);
  border: none;
  border-radius: 12px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--midnight-soft);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    inset 3px 3px 6px rgba(10, 22, 40, 0.05),
    inset -3px -3px 6px rgba(255, 255, 255, 1);
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft);
}
.rg-tab:hover {
  color: var(--midnight);
}
.rg-tab.on {
  background: #ECEAE6;
  color: var(--midnight);
  box-shadow:
    inset 3px 3px 6px rgba(10, 22, 40, 0.07),
    inset -3px -3px 6px rgba(255, 255, 255, 0.85);
}
.rg-tab.on:hover {
  color: var(--midnight);
}

.neu-input {
  background: var(--white-pure);
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--midnight);
  box-shadow: var(--neu-in);
  outline: none;
}
.neu-input::placeholder { color: var(--midnight-soft); }

.neu-tab {
  background: var(--white-pure);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--neu-out-sm);
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--midnight-soft);
  transition: box-shadow 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.neu-tab.on { color: var(--midnight); box-shadow: var(--neu-in); }

.neu-toggle {
  width: 52px; height: 30px; border-radius: 999px;
  background: var(--white-pure);
  box-shadow: var(--neu-in);
  position: relative; cursor: pointer;
  transition: box-shadow 180ms var(--ease-soft);
}
.neu-toggle .knob {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--white-pure);
  box-shadow: var(--neu-out-sm);
  transition: left 220ms var(--ease-soft), background 220ms var(--ease-soft);
}
.neu-toggle.on .knob {
  left: 26px;
  background: linear-gradient(135deg, #F4811F, #E63946);
  box-shadow: 2px 2px 6px rgba(230,57,70,0.35), -2px -2px 5px rgba(255,255,255,0.85);
}

.neu-checkbox {
  width: 22px; height: 22px; border-radius: 8px;
  background: var(--white-pure);
  box-shadow: var(--neu-in);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.neu-checkbox.on { box-shadow: var(--neu-out-sm); }
.neu-checkbox.on::after {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(135deg, #F4811F, #E63946);
}

.neu-chip {
  background: var(--white-pure);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: var(--neu-out-sm);
  font-size: 13px; font-weight: 500;
  color: var(--midnight);
  cursor: pointer;
}
.neu-chip:active { box-shadow: var(--neu-in); }

.neu-inset-tray {
  background: var(--white-pure);
  border-radius: 16px;
  box-shadow: var(--neu-in);
}

/* Wavy red underline for risky text */
.risk-mark {
  background: rgba(230, 57, 70, 0.08);
  border-radius: 3px;
  padding: 0 2px;
  text-decoration: underline wavy rgba(230, 57, 70, 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: background 200ms var(--ease-soft);
}
.risk-mark:hover { background: rgba(230, 57, 70, 0.16); }
.risk-mark.fading { animation: riskFade 280ms var(--ease-soft) forwards; }
@keyframes riskFade {
  0% { background: rgba(230, 57, 70, 0.08); text-decoration-color: rgba(230, 57, 70, 0.6); }
  100% { background: transparent; text-decoration-color: transparent; }
}

/* Floating entrance */
.float-in {
  animation: floatIn 480ms var(--ease-soft) both;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mascot motion keyframes */
@keyframes rg-float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes rg-bounce-push {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes rg-float-tiny {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes rg-spin {
  to { transform: rotate(360deg); }
}

/* Hide scrollbars (kept scrollable). The whole product UI uses this. */
.scroll, .scroll-hidden { scrollbar-width: none; -ms-overflow-style: none; }
.scroll::-webkit-scrollbar, .scroll-hidden::-webkit-scrollbar {
  display: none; width: 0; height: 0;
}