* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
:root { --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --soft:rgba(56,189,248,0.25); }
body { background: var(--bg); color: var(--fg); }
.hero { position: relative; min-height: 60vh; background: radial-gradient(900px 400px at 50% 30%, #0b2236, #071625 70%, #05111c 100%); display:grid; place-items:center; }
.hero .overlay { backdrop-filter: blur(2px) saturate(85%); background: rgba(0,0,0,0.35); width:100%; padding:3rem 1rem; text-align:center; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .5rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 1.8rem 0 .75rem; }
p { color: var(--fg); opacity: .95; }
.tagline { color: var(--muted); margin-bottom: 1.5rem; }
.breath-wrap { display:grid; gap:1rem; place-items:center; }
.pulse { width:160px; height:160px; border-radius:999px; border:2px solid var(--soft); box-shadow:0 0 0 0 var(--soft); transition: transform .2s ease; }
.breath-meta { display:flex; gap:1rem; align-items:center; }
.count { font-weight:700; }
.timer { color: var(--muted); }
.btn { appearance:none; background:var(--accent); color:#00121a; border:0; padding:.7rem 1rem; border-radius:.6rem; font-weight:700; cursor:pointer; }
.btn.subtle { background: transparent; color: var(--fg); border: 1px solid #2a3b49; }
.section { padding:2rem 1rem; max-width: 1000px; margin:0 auto; }
.section-copy { color: var(--muted); }
.form-grid { display:grid; grid-template-columns: 1fr 2fr auto; gap:.75rem; align-items:end; margin-top:.75rem; }
.form-grid label { display:grid; gap:.35rem; font-size:.95rem; color:var(--muted); }
.form-grid input, .form-grid select { width:100%; padding:.6rem .7rem; border-radius:.5rem; border:1px solid #24313b; background:#0b1320; color:var(--fg); }
#postStatus { color: var(--muted); margin-left: .5rem; }
.map-wrap { margin-top:1rem; border:1px solid #24313b; border-radius:.75rem; overflow:hidden; }
svg#usMap { width:100%; height:auto; display:block; }
.map-bg { fill:#06111a; }
.legend { padding:.5rem .75rem; color:var(--muted); font-size:.9rem; }
.footer { padding:2rem 1rem; text-align:center; color:var(--muted); }
.ripple { fill:none; stroke:var(--accent); stroke-width:2; opacity:.9; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* Admin */
.admin-wrap { max-width:1000px; margin:2rem auto; padding: 0 1rem; }
.admin-row { display:grid; grid-template-columns: 120px 1fr 130px 120px; gap:.6rem; align-items:center; padding:.6rem; border-bottom:1px solid #1e2a36; }
.admin-row small { color: var(--muted); }
.admin-controls { display:flex; gap:.5rem; }
.badge { display:inline-block; padding:.15rem .4rem; border-radius:.4rem; background:#133047; color:#a3d9ff; font-size:.8rem; }



 /* Calm water background */
body {
  margin: 0;
  overflow-x: hidden; /* avoid side scroll from transforms */
  background: #a0d4f0; /* fallback sky-blue */
}

/* fixed full-screen layer behind content */
.water-bg {
  position: fixed;
  inset: 0;
  z-index: -1;                /* stay behind everything */
  background: radial-gradient(circle at 50% 50%, #cfeaff 0%, #a7d7f8 50%, #8bc5f3 100%);
  overflow: hidden;
}

/* two soft shimmering highlights that drift */
.water-bg::before,
.water-bg::after {
  content: "";
  position: absolute;
  inset: -50%;                /* extra big so scaling doesn’t show edges */
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
  mix-blend-mode: overlay;    /* gentle brightening */
  animation: ripple 20s linear infinite;
  will-change: transform;
}

.water-bg::after {
  animation-delay: -10s;      /* offset for parallax feel */
  opacity: 0.55;
}

/* slow, subtle drift + micro-scale change */
@keyframes ripple {
  0%   { transform: translate(0,0)      scale(1); }
  50%  { transform: translate(-5%, 4%)  scale(1.05); }
  100% { transform: translate(0,0)      scale(1); }
}

/* Optional: ensure text stays readable over light background */
.main, .content, .section, body, p, h1, h2, h3, h4 {
  color: #0b3355;             /* deep blue-gray */
}

/* Optional: add a soft backdrop to key areas if needed */
.card, .panel, .hero, header, nav, footer {
  backdrop-filter: blur(6px);
  background-color: rgba(255,255,255,0.45);
  border-radius: 12px;
} 

/* must exist so we can show/hide */
.hidden { display: none; }
#sponsorModal { z-index: 9999; } /* already high, but keep it */