:root {
  --bg: #0b1220;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.08);
  --shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  --radius: 22px;
  --font: "DM Sans", system-ui, sans-serif;
  --display: "Syne", "DM Sans", sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #f4f6f8;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: inline-grid; place-items: center;
  background: #0b1220; color: #fff; font-family: var(--display); font-weight: 800;
}
.brand-mark.lg { width: 56px; height: 56px; font-size: 1.2rem; }

.btn-primary, .cta-btn, .btn-ghost {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.95rem 1.25rem; font-weight: 700;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-primary:active, .cta-btn:active { transform: scale(0.98); }
.btn-primary {
  background: #0b1220; color: #fff; width: 100%;
}
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost.full { width: 100%; }

.alert {
  background: #fee2e2; color: #991b1b;
  border-radius: 14px; padding: 0.85rem 1rem; margin-bottom: 1rem;
}
.alert.warn { background: #fff7ed; color: #9a3412; }
.https-banner, .https-toast {
  background: #fff7ed; color: #9a3412;
  padding: 0.75rem 1rem; font-size: 0.9rem;
}
.https-toast {
  position: absolute; top: 5.5rem; left: 1rem; right: 1rem;
  z-index: 500; border-radius: 14px; box-shadow: var(--shadow);
  text-align: center;
}