:root {
  --neo-page-base: #edfdfa;
  --neo-page-mid: #e8f7ff;
  --neo-panel-surface: #ecf8f4;
  --neo-panel-surface-2: #e5f2fb;
  --neo-shadow-dark-solid: #cfdfdc;
  --neo-shadow-light-solid: #ffffff;

  --neo-shell-start: #f3fffb;
  --neo-shell-end: #e7f3ff;
  --neo-shell-border: rgba(255, 255, 255, 0.92);
  --neo-shell-shadow-dark: rgba(165, 186, 198, 0.06);
  --neo-shell-shadow-light: rgba(255, 255, 255, 0.74);

  --neo-surface-start: #eefbf5;
  --neo-surface-end: #e1edf8;
  --neo-surface-focus-start: #f5fffb;
  --neo-surface-focus-end: #e6f2fb;
  --neo-surface-shadow-inset: rgba(194, 211, 219, 0.34);
  --neo-surface-shadow-outer: rgba(172, 189, 202, 0.06);

  --neo-popover-start: rgba(245, 255, 251, 0.98);
  --neo-popover-end: rgba(230, 240, 249, 0.98);

  --neo-chip-start: #f4fff9;
  --neo-chip-end: #dff0ff;

  --neo-text-main: #334155;
  --neo-text-muted: #8aa0a7;
  --neo-text-soft: #607086;

  --neo-primary-start: #72abff;
  --neo-primary-end: #4f7df3;
  --neo-primary-shadow: rgba(87, 122, 235, 0.24);

  --neo-accent-start: #52d7be;
  --neo-accent-end: #1bbd99;
  --neo-accent-shadow: rgba(27, 189, 153, 0.22);
}

#dynamicModal .modal-content {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--neo-shell-start) 0%, var(--neo-shell-end) 100%);
  box-shadow:
    8px 8px 16px var(--neo-shell-shadow-dark),
    -6px -6px 12px var(--neo-shell-shadow-light);
}

#dynamicModal .modal-header,
#dynamicModal .modal-footer {
  border-color: rgba(220, 231, 240, 0.72);
}

#dynamicModal .modal-header,
#dynamicModal .modal-body,
#dynamicModal .modal-footer {
  background: transparent;
}