/* Global monochrome theme and utilities */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #9ca3af;
  --border: #222;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
  --card-w: 480px;
  --gap: 14px;
  --radius: 16px;
  --pad: 18px;
  /* Accent palette (Coolors) */
  --accent-red: #EF3E36;    /* alerts/danger */
  --accent-teal: #17BEBB;   /* selected/confirm */
  --accent-ink: #2E282A;    /* dark text on light accents */
  --accent-yellow: #EDB88B; /* legacy warm accent */
  --accent-blush: #FAD8D6;  /* subtle highlights */
  --accent-lilac: #C4B5FD;  /* suggested guidance */
  --accent-lilac-ink: #1d1031;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* Layout */
.wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.card { width: 100%; max-width: var(--card-w); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pad); }
.row { display: flex; gap: var(--gap); align-items: center; }
.stack { display: grid; gap: var(--gap); }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.mt-14 { margin-top: 14px; }
.mb-6 { margin-bottom: 6px; }

/* Text */
.muted { color: var(--muted); font-size: .95rem; }

/* Buttons */
.btn { padding: 12px 16px; border-radius: 12px; border: 1px solid #fff; background: #fff; color: #000; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }

/* Form fields */
.field { background: var(--bg); border: 1px solid var(--border); color: var(--fg); padding: 8px 12px; border-radius: 12px; }

/* Logo helpers */
.logo { display: grid; place-items: center; }
.logo-lg img { width: 200px; height: 200px; }

/* Optional themes if we want to reintroduce navy later */
.theme--navy { --bg: #0b1220; --fg: #e5e7eb; --muted: #64748b; --border: #1f2937; --shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Subtle icon attention animation */
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.icon-nudge { animation: nudge 2.2s ease-in-out infinite; }

/* Small helper for beta perk note */
.beta-note { font-size: 11px; color: var(--muted); }