/* Colors from the design brief (3-design): pink cards, burgundy actions,
   mint = correct, yellow = stars, red = mistakes. */
:root {
  --bg: #fce7ef;
  --surface: #fff8fb;
  --ink: #2e1b28;
  --muted: #7a5a6c;
  --line: #f2c9da;
  --pink: #ffc2da;
  --pink-strong: #e8609c;
  --primary: #9b2251;
  --on-primary: #ffffff;
  --dark: #2e1b28;
  --mint: #dcefd7;
  --good: #3f8f4a;
  --star: #ffdc74;
  --bad: #d74454;
  --bad-bg: #fde0e3;
  --shadow: #d98bb0;
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #241520; --surface: #2f1d2a; --ink: #fbeaf2; --muted: #c9a6b8; --line: #4a2f40;
    --pink: #5a2a43; --mint: #23402a; --bad-bg: #4a1f26; --shadow: #120a10; --dark: #120a10;
  }
}
:root[data-theme="dark"] {
  --bg: #241520; --surface: #2f1d2a; --ink: #fbeaf2; --muted: #c9a6b8; --line: #4a2f40;
  --pink: #5a2a43; --mint: #23402a; --bad-bg: #4a1f26; --shadow: #120a10; --dark: #120a10;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
main { max-width: 480px; margin: 0 auto; padding: 16px 16px 32px; min-height: 100dvh; display: flex; flex-direction: column; }
h1, h2 { font-weight: 900; line-height: 1.2; margin: 0; }
h1 { font-size: 32px; }
h2 { font-size: 26px; }
.muted { color: var(--muted); font-size: 15px; }

/* entry screen */
.hero {
  background: var(--pink);
  border-radius: var(--radius);
  padding: 28px 16px 24px;
  text-align: center;
}
.hero img { width: 150px; height: 150px; display: block; margin: 0 auto 8px; }
.hero h1 { font-size: 52px; line-height: 1; }

.field { display: block; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-top: 12px; }
.field span { display: block; font-weight: 700; font-size: 15px; }
.field input { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 4px 0; outline: none; }
.field:focus-within { border-color: var(--primary); }

.btn {
  display: block; width: 100%; min-height: 52px; margin-top: 14px;
  border: 0; border-radius: 999px; font: inherit; font-weight: 700;
  background: var(--primary); color: var(--on-primary); cursor: pointer;
}
.btn.dark { background: var(--dark); color: #fff; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, .field:focus-within { outline: 3px solid var(--pink-strong); outline-offset: 2px; }

.status { margin-top: auto; padding-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.status .ok { color: var(--good); font-weight: 700; }
.status .err { color: var(--bad); font-weight: 700; }