/* ──────────────────────────────────────────────────────────────────────────
   aelune — Listmonk public-page theme
   Paste this into Listmonk → Settings → Appearance → Public → "Custom CSS".

   Matches the landing page: dark lunar night, Fraunces headings + Inter body,
   lavender accents. Styles the subscription form, opt-in confirmation, manage-
   preferences, and unsubscribe pages.

   Logo note: the aelune wordmark is dark ink, so on this dark background it's
   recolored to near-white via a CSS filter (see `.logo img`). Set the public
   logo under Settings → Appearance to your hosted SVG, e.g.
   https://aelune.co/src/assets/transparent-logo.svg
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300&family=Inter:wght@400;500&display=swap');

:root {
  --bg: #0b0d18;
  --ink: #f2efe9;
  --muted: #9a9bb4;
  --line: #262a44;
  --lavender: #b9b1da;
  --lavender-deep: #8a80c4;
}

/* Page background — the same night sky + glow as the site */
body {
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(138, 128, 196, 0.18), transparent 62%),
    linear-gradient(180deg, #11142b 0%, #0b0d18 50%, #08090f 100%) !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Outer wrapper stays transparent so the sky shows through */
.container {
  color: var(--ink) !important;
}

/* The content card */
.wrap {
  background: rgba(20, 23, 42, 0.72) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px);
  color: var(--ink) !important;
}

/* Logo — recolor the dark wordmark to near-white and keep it modest */
.logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.92;
  max-height: 40px;
  width: auto;
}

/* Typography */
h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  color: #f7f4ee !important;
  letter-spacing: -0.01em;
}

p, label, li, .help, small {
  color: var(--muted) !important;
}

a {
  color: var(--lavender) !important;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.9rem !important;
  font: inherit !important;
}

input::placeholder,
textarea::placeholder {
  color: #6b6d86 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--lavender-deep) !important;
  box-shadow: 0 0 0 3px rgba(138, 128, 196, 0.25) !important;
}

/* Checkboxes / radios (the list opt-in items) */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--lavender-deep);
}

/* Buttons */
button,
input[type="submit"],
.button {
  background: var(--lavender) !important;
  color: #14122a !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.4rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.06s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
  background: #cbc4e6 !important;
}

button:active,
input[type="submit"]:active,
.button:active {
  transform: translateY(1px);
}

/* Footer ("Powered by listmonk") */
.footer,
.footer a {
  color: var(--muted) !important;
  font-size: 0.8rem;
}

/* Status / message boxes (success / error notices) */
.message,
.box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}