@font-face {
  font-family: "Pacifico";
  src: url("/fonts/pacifico.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* "Pomace" palette: --wine is the main color, --copper the warm accent. */
  --wine: #7a2b4f;
  --copper: #a8483b;
  --ink: #22191c;
  --muted: #524347;
  --paper: #ffffff;
  --ok: #1e8e5a;
  --bad: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0dfe2;
    --muted: #d7c2c7;
    --paper: #271e21;
    --wine: #ffb1ce;
    --copper: #ffb4a6;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  /* Same wine-to-copper mood as the app icon. */
  background: linear-gradient(135deg, #5b1a3c 0%, #9b3158 55%, #d4604e 100%);
}

.card {
  width: 100%;
  max-width: 440px;
  padding: 32px 24px 28px;
  text-align: center;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(30, 10, 80, 0.35);
}

.logo { border-radius: 24px; margin-bottom: 8px; }

.brand {
  margin: 0 0 20px;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.3;
  background: linear-gradient(90deg, var(--copper), var(--wine));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}

.status h2 { margin: 0 0 8px; font-size: 1.35rem; }
.status p { margin: 0 0 20px; line-height: 1.5; color: var(--muted); }

.status[data-state="loading"] .badge {
  border: 6px solid rgba(122, 43, 79, 0.2);
  border-top-color: var(--wine);
  animation: spin 0.9s linear infinite;
}
.status[data-state="success"] .badge { background: var(--ok); }
.status[data-state="success"] .badge::before { content: "\2713"; }
.status[data-state="error"] .badge { background: var(--bad); }
.status[data-state="error"] .badge::before { content: "!"; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .status[data-state="loading"] .badge { animation: none; }
}

.button {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #7a2b4f;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.button:hover, .button:focus-visible { background: #5f2039; }
.button[hidden] { display: none; }

.noscript { position: fixed; bottom: 16px; left: 16px; right: 16px; text-align: center; color: #fff; }