/* =====================================================================
   GIVARI — FUNKY BRAND SYSTEM  (v1)
   A single source of visual truth: fonts, palette, gradients, glass,
   aurora backgrounds, animated blobs, buttons, badges & the logo mark.
   Loaded on every page alongside the Tailwind CDN + tailwind.config in
   src/lib/head.ts (which extends Tailwind with the `brand`/`grape`/etc
   colour tokens so `bg-brand-500` etc. work too).
   ===================================================================== */

/* ---- Type -------------------------------------------------------- */
:root {
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Funky core palette — electric grape → sunset coral → citrus */
  --gv-grape:   #7c3aed;   /* violet-600 */
  --gv-grape-d: #5b21b6;
  --gv-magenta: #d946ef;   /* fuchsia-500 */
  --gv-coral:   #fb7185;   /* rose-400 */
  --gv-tangelo: #fb923c;   /* orange-400 */
  --gv-citrus:  #fACC15;   /* yellow-400 */
  --gv-mint:    #2dd4bf;   /* teal-400 */
  --gv-sky:     #38bdf8;   /* sky-400 */
  --gv-ink:     #1b1235;   /* deep aubergine ink */
  --gv-ink-2:   #2a1c4d;
  --gv-cream:   #fdf9ff;

  --gv-gradient: linear-gradient(120deg, var(--gv-grape) 0%, var(--gv-magenta) 42%, var(--gv-coral) 72%, var(--gv-tangelo) 100%);
  --gv-gradient-cool: linear-gradient(120deg, var(--gv-grape) 0%, var(--gv-sky) 55%, var(--gv-mint) 100%);
  --gv-shadow-glow: 0 18px 50px -12px rgba(124, 58, 237, .45);
}

html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Give every heading the display face + tight tracking by default. */
h1, h2, h3, .gv-display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ---- Gradient text ---------------------------------------------- */
.gv-gradient-text {
  background: var(--gv-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gv-gradient-text-cool {
  background: var(--gv-gradient-cool);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Aurora / blobby animated backgrounds ----------------------- */
/* Drop .gv-aurora on a full-bleed section; it paints slow-drifting
   colour blobs behind its children. Children should sit in a
   position:relative wrapper with z-10. */
.gv-aurora { position: relative; overflow: hidden; background: var(--gv-ink); }
.gv-aurora::before,
.gv-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; pointer-events: none;
  animation: gv-float 18s ease-in-out infinite;
}
.gv-aurora::before {
  width: 46vw; height: 46vw; top: -12vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--gv-grape), transparent 70%);
}
.gv-aurora::after {
  width: 52vw; height: 52vw; bottom: -18vw; right: -12vw;
  background: radial-gradient(circle at 60% 40%, var(--gv-coral), transparent 70%);
  animation-delay: -6s; animation-duration: 22s;
}
/* extra floating blob you can add as an element: <span class="gv-blob"></span> */
.gv-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .5; pointer-events: none; z-index: 0;
  animation: gv-float 20s ease-in-out infinite;
}
.gv-blob-mint { background: radial-gradient(circle, var(--gv-mint), transparent 70%); }
.gv-blob-citrus { background: radial-gradient(circle, var(--gv-citrus), transparent 70%); }
.gv-blob-sky { background: radial-gradient(circle, var(--gv-sky), transparent 70%); }

@keyframes gv-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4vw, 3vw) scale(1.08); }
  66% { transform: translate(-3vw, 2vw) scale(.95); }
}

/* Subtle animated mesh you can put on light sections (.gv-mesh). */
.gv-mesh {
  background-color: var(--gv-cream);
  background-image:
    radial-gradient(at 12% 18%, rgba(124,58,237,.16) 0px, transparent 45%),
    radial-gradient(at 88% 12%, rgba(217,70,239,.14) 0px, transparent 42%),
    radial-gradient(at 78% 88%, rgba(251,146,60,.14) 0px, transparent 45%),
    radial-gradient(at 18% 82%, rgba(45,212,191,.14) 0px, transparent 45%);
}

/* Fine grain/noise overlay for texture (add .gv-noise on a section). */
.gv-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Glass cards ------------------------------------------------- */
.gv-glass {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1.25rem;
}
.gv-glass-light {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 1.25rem;
}

/* Playful "sticker" card: chunky border + hard offset shadow that
   pops on hover (neo-brutalist funk). */
.gv-sticker {
  background: #fff;
  border: 2px solid var(--gv-ink);
  border-radius: 1.1rem;
  box-shadow: 6px 6px 0 0 var(--gv-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gv-sticker:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--gv-grape);
}

/* ---- Buttons ----------------------------------------------------- */
.gv-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600;
  padding: .7rem 1.4rem; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  color: #fff; background: var(--gv-gradient); background-size: 180% 180%;
  box-shadow: var(--gv-shadow-glow);
}
.gv-btn:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.05); animation: gv-shift 3s ease infinite; }
.gv-btn:active { transform: translateY(0); }
.gv-btn-ghost {
  background: transparent; color: var(--gv-ink); box-shadow: none;
  border: 2px solid rgba(27, 18, 53, .18);
}
.gv-btn-ghost:hover { border-color: var(--gv-grape); color: var(--gv-grape); background: rgba(124,58,237,.05); animation: none; }
.gv-btn-dark { background: var(--gv-ink); box-shadow: none; }
.gv-btn-dark:hover { background: var(--gv-ink-2); animation: none; }

@keyframes gv-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- Pills / badges --------------------------------------------- */
.gv-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px;
  color: var(--gv-grape-d); background: rgba(124, 58, 237, .1);
  border: 1px solid rgba(124, 58, 237, .22);
}
.gv-pill-gradient {
  color: #fff; background: var(--gv-gradient); border: none;
}

/* ---- Logo mark --------------------------------------------------- */
/* The "G-heart-coin" mark: a gradient rounded square with a bold G. */
.gv-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .7rem;
  background: var(--gv-gradient); background-size: 180% 180%;
  color: #fff; font-family: var(--font-display); font-weight: 700;
  box-shadow: var(--gv-shadow-glow);
  animation: gv-shift 6s ease infinite;
  flex-shrink: 0;
}
.gv-logo-lg { width: 3rem; height: 3rem; border-radius: .9rem; font-size: 1.4rem; }
.gv-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }

/* ---- Animated underline for links/nav --------------------------- */
.gv-underline { position: relative; }
.gv-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
  background: var(--gv-gradient); transition: width .25s ease;
}
.gv-underline:hover::after { width: 100%; }

/* ---- Marquee ticker (funky scrolling strip) --------------------- */
.gv-marquee { overflow: hidden; white-space: nowrap; }
.gv-marquee > .gv-marquee-track {
  display: inline-block; padding-left: 100%;
  animation: gv-marquee 22s linear infinite;
}
@keyframes gv-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---- Entrance animation ----------------------------------------- */
.gv-rise { animation: gv-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.gv-rise-2 { animation: gv-rise .6s cubic-bezier(.2,.7,.2,1) .12s both; }
.gv-rise-3 { animation: gv-rise .6s cubic-bezier(.2,.7,.2,1) .24s both; }
@keyframes gv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Number-input spinner reset (kept from old style.css) ------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ---- Scrollbar flourish (webkit) -------------------------------- */
.gv-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.gv-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gv-grape), var(--gv-coral));
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}

/* ---- Kanban / pipeline board ----------------------------------- */
/* Horizontal scroll container with a clearer, always-visible gradient
   scrollbar and soft fade edges that hint "there's more this way". */
.gv-kanban {
  display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: .5rem; scroll-snap-type: x proximity;
}
.gv-kanban::-webkit-scrollbar { height: 12px; }
.gv-kanban::-webkit-scrollbar-track { background: rgba(124,58,237,.08); border-radius: 999px; }
.gv-kanban::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--gv-grape), var(--gv-magenta) 45%, var(--gv-coral) 78%, var(--gv-tangelo));
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.gv-kanban { scrollbar-color: var(--gv-magenta) rgba(124,58,237,.08); scrollbar-width: auto; }
.gv-kanban-wrap { position: relative; }
/* Fade hints on the left/right of the board */
.gv-kanban-wrap::before, .gv-kanban-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 14px; width: 42px; pointer-events: none; z-index: 5;
  opacity: 0; transition: opacity .25s ease;
}
.gv-kanban-wrap::before { left: 0; background: linear-gradient(90deg, var(--gv-cream), transparent); }
.gv-kanban-wrap::after  { right: 0; background: linear-gradient(270deg, var(--gv-cream), transparent); }
.gv-kanban-wrap.can-left::before  { opacity: 1; }
.gv-kanban-wrap.can-right::after  { opacity: 1; }

/* A stage column. The accent bar up top is set inline per-stage. */
.gv-stage {
  flex: 0 0 20rem; width: 20rem; scroll-snap-align: start;
  background: linear-gradient(180deg, #ffffff, #faf6ff);
  border: 1px solid #efe7fb; border-radius: 1.1rem; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(27,18,53,.04);
}
.gv-stage-accent { height: 5px; width: 100%; }
.gv-stage.drag-over { border-color: var(--gv-grape); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }

/* A relationship card on the board. */
.gv-card {
  background: #fff; border: 1px solid #eee3fb; border-radius: .9rem; padding: .8rem;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 1px 2px rgba(27,18,53,.05);
}
.gv-card:hover { transform: translateY(-2px); border-color: var(--gv-magenta); box-shadow: 0 10px 24px -14px rgba(124,58,237,.5); }
.gv-card.dragging { opacity: .5; }

/* Nudge arrows for keyboard/mouse scroll of the board. */
.gv-scroll-btn {
  width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #efe7fb; color: var(--gv-ink);
  box-shadow: 0 6px 16px -8px rgba(27,18,53,.3); transition: transform .12s ease, box-shadow .12s ease;
}
.gv-scroll-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(124,58,237,.5); color: var(--gv-grape); }
.gv-scroll-btn:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; }

/* =========================================================================
   Sprint 45.4 — Site-wide brand upgrade layer.
   Historically most admin views were authored with a flat stone/amber
   (old brown) palette: `bg-white border border-stone-200 rounded-xl`
   panels, `bg-amber-700` buttons, plain tables. Rewriting 130+ call-sites
   is risky, so instead we upgrade those patterns *consistently everywhere*
   by scoping brand defaults to the page content container `#view`.
   New views should use the .gv-* helpers directly; this layer keeps the
   long tail of existing markup on-brand.
   ========================================================================= */

/* --- Panels / cards ---------------------------------------------------- */
/* Any white, stone-bordered rounded panel becomes a soft brand sticker. */
#view .bg-white.border.border-stone-200,
#view .bg-white.rounded-xl.border,
#view .bg-white.rounded-lg.border {
  border-color: #efe7fb !important;
  background: linear-gradient(180deg, #ffffff, #fdfaff) !important;
  box-shadow: 0 1px 2px rgba(27,18,53,.05), 0 14px 30px -24px rgba(124,58,237,.35);
}

/* --- Primary buttons: retire the old amber/brown -> brand gradient ------ */
#view .bg-amber-700,
#view .bg-amber-800,
#view .bg-amber-600 {
  background-image: linear-gradient(120deg, #7c3aed, #d946ef 45%, #fb7185 78%, #fb923c) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px -8px rgba(124,58,237,.55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#view .bg-amber-700:hover,
#view .bg-amber-800:hover,
#view .bg-amber-600:hover {
  transform: translateY(-1px); filter: saturate(1.08) brightness(1.02);
  box-shadow: 0 12px 26px -8px rgba(124,58,237,.6);
  background-color: transparent !important;
}
/* Amber text / icon accents -> grape */
#view .text-amber-700, #view .text-amber-800, #view .text-amber-600,
#view .text-amber-900 { color: var(--gv-grape) !important; }
#view .hover\:text-amber-700:hover { color: var(--gv-magenta) !important; }
/* Soft amber tint chips/backgrounds -> soft grape tint */
#view .bg-amber-50  { background-color: #f6f0ff !important; }
#view .bg-amber-100 { background-color: #efe6ff !important; }
#view .border-amber-200 { border-color: #e4d6fb !important; }

/* Progress / meter bar fills (e.g. report bars) -> brand gradient. */
#view .bg-amber-500, #view .bg-amber-400, #view .bg-amber-300 {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #7c3aed, #d946ef 55%, #fb7185) !important;
}

/* --- Form fields (Sprint 46.1) ----------------------------------------- */
/* The admin CRM has 100+ inputs/selects/textareas authored as flat
   `border border-stone-300 rounded-lg px-3 py-2` grey boxes with no focus
   affordance. Lift them ALL — rounder, softer border, hover, and a real
   grape focus ring — matching the public-page fields, without touching a
   single call-site. Scoped to #view so modals (which live outside #view's
   content but inside the admin app) still inherit via the wildcard below. */
#view input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#view select,
#view textarea,
.gv-modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.gv-modal-panel select,
.gv-modal-panel textarea {
  border-radius: .7rem !important;
  border-color: #e4ddf2 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#view input:not([type="checkbox"]):not([type="radio"]):hover,
#view select:hover, #view textarea:hover,
.gv-modal-panel input:not([type="checkbox"]):not([type="radio"]):hover,
.gv-modal-panel select:hover, .gv-modal-panel textarea:hover {
  border-color: #d4c9ee !important;
}
#view input:not([type="checkbox"]):not([type="radio"]):focus,
#view select:focus, #view textarea:focus,
.gv-modal-panel input:not([type="checkbox"]):not([type="radio"]):focus,
.gv-modal-panel select:focus, .gv-modal-panel textarea:focus {
  outline: none !important;
  border-color: var(--gv-grape) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
}
#view input::placeholder, #view textarea::placeholder,
.gv-modal-panel input::placeholder, .gv-modal-panel textarea::placeholder { color: #a79fbd; }

/* Checkbox / radio accent -> brand grape (was browser default blue). */
#view input[type="checkbox"], #view input[type="radio"],
.gv-modal-panel input[type="checkbox"], .gv-modal-panel input[type="radio"] {
  accent-color: var(--gv-grape);
}

/* --- Card selector top-up (Sprint 46.1) -------------------------------- */
/* Catch the shadow-only card variant `bg-white rounded-xl shadow` (no
   border class) that the original panel selectors miss — but NOT the
   overlay modals (`shadow-xl` + max-w-*), which are already styled. */
#view .bg-white.rounded-xl.shadow:not(.shadow-xl),
#view .bg-white.rounded-2xl.shadow:not(.shadow-xl) {
  border: 1px solid #efe7fb;
  background: linear-gradient(180deg, #ffffff, #fdfaff) !important;
  box-shadow: 0 1px 2px rgba(27,18,53,.05), 0 14px 30px -24px rgba(124,58,237,.35) !important;
}

/* Dark utility buttons (bg-stone-900 / bg-black) -> brand "dark" button. */
#view .bg-stone-900, #view .bg-stone-800, #view .bg-black {
  background-color: var(--gv-ink) !important;
  border: none !important;
  box-shadow: 0 8px 20px -10px rgba(27,18,53,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
#view .bg-stone-900:hover, #view .bg-stone-800:hover, #view .bg-black:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(124,58,237,.5);
  background-color: #2a1c52 !important;
}

/* --- Tables ------------------------------------------------------------- */
/* Header rows read as a branded, uppercase, tracked label bar. */
#view table thead tr th {
  color: var(--gv-grape); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em; background: linear-gradient(90deg, #f7f1ff, #fdf6ff);
}
#view table tbody tr { transition: background-color .12s ease; }
#view table tbody tr:hover td { background-color: #faf6ff !important; }

/* --- Section titles get the display font throughout ---------------------- */
#view h2, #view h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }

/* --- Empty-state icons: brand them instead of flat stone ---------------- */
#view .text-stone-300.text-3xl,
#view .text-stone-300.text-4xl { color: #c9b6f0 !important; }

/* --- Modal (shared modalForm) ------------------------------------------- */
.gv-modal-panel { border: 1px solid #efe7fb; }
.gv-modal-panel .gv-modal-title { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }

/* --- A reusable branded page header used across views ------------------- */
.gv-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.gv-pagehead h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; color: var(--gv-ink); }
.gv-pagehead .gv-pagehead-sub { font-size: .875rem; color: #6b6480; margin-top: .15rem; max-width: 46rem; }

/* =========================================================================
   Sprint 46 — PUBLIC-PAGE brand upgrade layer (.gv-public on <body>).
   The public supporter-facing flows (fundraiser create/view/manage, portal,
   event, signup, accept-invite, terminal) were authored with a flat
   stone/amber palette: `rounded-lg border border-stone-300 px-3 py-2`
   inputs, `rounded-xl shadow` cards, plain `text-stone-700` labels, and
   single-line CTA buttons. Rather than rewrite every call-site, we lift the
   whole tier consistently by scoping brand defaults to `.gv-public`.
   Per-tenant brand colours stay inline (buttons carry `style="background:
   <accent>"`), so this only upgrades the neutral scaffolding — spacing,
   depth, typography, focus states — NOT the tenant's colour identity.

   Not scoped to admin (`#view` has its own layer) — this needs the
   `.gv-public` body class, which only the public shells carry.
   ========================================================================= */

/* ---- Page canvas: warm tint + subtle brand mesh so it isn't dead-flat --- */
body.gv-public {
  background-color: var(--gv-cream);
  background-image:
    radial-gradient(at 8% 4%, rgba(124,58,237,.06) 0px, transparent 40%),
    radial-gradient(at 92% 8%, rgba(251,113,133,.05) 0px, transparent 42%);
  background-attachment: fixed;
}

/* ---- Cards / panels: soft sticker instead of hard shadow --------------- */
/* Any white rounded card becomes a lifted, hairline-bordered brand panel. */
.gv-public .bg-white.rounded-xl,
.gv-public .bg-white.rounded-lg,
.gv-public .bg-white.rounded-2xl {
  border: 1px solid rgba(27,18,53,.06);
  border-radius: 1.5rem !important;
  background: linear-gradient(180deg, #ffffff, #fdfaff) !important;
  box-shadow:
    0 1px 2px rgba(27,18,53,.04),
    0 22px 48px -30px rgba(124,58,237,.35) !important;
}

/* ---- Headings: display face + tighter, darker for clear hierarchy ------ */
.gv-public h1 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--gv-ink);
  line-height: 1.1;
}
.gv-public h1.text-2xl { font-size: 1.875rem; } /* nudge page titles up to 3xl weight */
.gv-public h2 { font-family: var(--font-display); letter-spacing: -0.015em; color: var(--gv-ink); }

/* ---- Field labels: bolder, tracked, brand-ink --------------------------- */
.gv-public label.block.text-sm.font-semibold {
  font-size: .8125rem;
  font-weight: 700;
  color: #3b3352;
  letter-spacing: .005em;
}

/* ---- Inputs / textareas / selects: taller, rounder, real focus ring ---- */
.gv-public input:not([type="checkbox"]):not([type="radio"]),
.gv-public textarea,
.gv-public select {
  border-radius: .85rem !important;
  border-color: #e4ddf2 !important;
  background: #fff;
  padding-top: .65rem !important;
  padding-bottom: .65rem !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gv-public input:not([type="checkbox"]):not([type="radio"])::placeholder,
.gv-public textarea::placeholder { color: #a79fbd; }
.gv-public input:not([type="checkbox"]):not([type="radio"]):hover,
.gv-public textarea:hover,
.gv-public select:hover { border-color: #d4c9ee !important; }
.gv-public input:not([type="checkbox"]):not([type="radio"]):focus,
.gv-public textarea:focus,
.gv-public select:focus {
  outline: none;
  border-color: var(--gv-grape) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.16);
  background: #fff;
}
/* The "$" adornment in front of goal/amount inputs sits a touch lower now. */
.gv-public .relative > span.absolute { color: #8b83a3; }

/* ---- Primary CTA buttons: give the brand-coloured buttons real depth ---- */
/* These carry an inline `style="background:<accent>"`, so we only add lift,
   rounding and a hover animation — never override their colour. */
.gv-public button[style*="background"],
.gv-public a[style*="background"].block,
.gv-public a[style*="background"].w-full {
  border-radius: .95rem !important;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  box-shadow: 0 12px 26px -12px rgba(27,18,53,.45);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.gv-public button[style*="background"]:hover:not(:disabled),
.gv-public a[style*="background"].block:hover,
.gv-public a[style*="background"].w-full:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 18px 34px -12px rgba(27,18,53,.5);
}
.gv-public button[style*="background"]:active:not(:disabled) { transform: translateY(0); }
.gv-public button:disabled { opacity: .65; cursor: default; }

/* Retire the old amber utility button on public pages -> brand gradient. */
.gv-public .bg-amber-700, .gv-public .bg-amber-800 {
  background-image: linear-gradient(120deg, #7c3aed, #d946ef 45%, #fb7185 78%, #fb923c) !important;
  background-color: transparent !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(124,58,237,.55);
}

/* ---- Eyebrow / breadcrumb line above the card: make it a soft pill ------ */
/* Matches the `<div class="mb-4 text-sm text-stone-500"><i>…</i> …</div>`
   pattern used across fundraiser/event views. */
.gv-public .mb-4.text-sm.text-stone-500 > i:first-child { color: var(--gv-grape); }

/* Entrance rise for the first card on each public page (progressive, cheap). */
.gv-public #content > .bg-white:first-child,
.gv-public #content > div > .bg-white:first-child { animation: gv-rise .6s cubic-bezier(.2,.7,.2,1) both; }

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .gv-aurora::before, .gv-aurora::after, .gv-blob, .gv-btn, .gv-logo,
  .gv-marquee-track, .gv-rise, .gv-rise-2, .gv-rise-3 { animation: none !important; }
  .gv-btn:hover, .gv-card:hover, .gv-scroll-btn:hover,
  #view .bg-amber-700:hover, #view .bg-amber-800:hover, #view .bg-amber-600:hover { transform: none; }
  .gv-public #content > .bg-white:first-child,
  .gv-public #content > div > .bg-white:first-child { animation: none; }
  .gv-public button[style*="background"]:hover:not(:disabled),
  .gv-public a[style*="background"].block:hover,
  .gv-public a[style*="background"].w-full:hover { transform: none; }
  .gv-kanban { scroll-behavior: auto; }
}