:root {
  --bg: #0b1220;
  --ink: #e8eef8;
  --muted: #93a0b8;
  --card: rgba(22, 32, 51, .9);
  --line: rgba(148, 163, 184, .18);
  --accent: #fb7185;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(800px 320px at 8% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%),
    var(--bg);
}
a { color: #7dd3fc; text-decoration: none; }
.top { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); }
.top-inner { max-width: 1100px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; text-decoration: none; }
.mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
.top nav { display: flex; gap: 6px; margin-left: auto; }
.top nav a { color: var(--muted); padding: 8px 12px; border-radius: 999px; font-weight: 650; }
.top nav a:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 18px 64px; }
.hero h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.card, .child-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.row, .pad { display: flex; gap: 14px; align-items: center; padding: 16px; }
.section { margin: 22px 0; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); border-top: 6px solid var(--accent); }
.section header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.section h2 { margin: 0; }
.line { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); }
.line img, .ph { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #1e293b; }
.name { font-weight: 700; }
#snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
@media (max-width: 640px) { .line { grid-template-columns: 64px 1fr; } .line .pill { display: none; } }
.price { font-weight: 750; }
.pill { border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.ok { background: #14532d; color: #bbf7d0; }
.taken { background: #7f1d1d; color: #fecaca; }
button, .btn { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
.login { min-height: 100vh; display: grid; place-items: center; }
.login form { width: min(420px, 92vw); padding: 24px; }
input { width: 100%; padding: 12px; margin: 8px 0; border-radius: 12px; border: 1px solid var(--line); background: #121a2b; color: var(--ink); }
body.mia { --accent: #f472b6; --bg: #1a0b14; --card: rgba(55, 18, 40, .9); --line: rgba(244, 114, 182, .25); }
body.ella { --accent: #c4b5fd; --bg: #120c1e; --card: rgba(42, 28, 72, .9); --line: rgba(196, 181, 253, .28); }
body.finn { --accent: #4ade80; --bg: #07140d; --card: rgba(16, 48, 30, .9); --line: rgba(74, 222, 128, .25); }
body.christmas { --accent: #f87171; }
body.birthday { --accent: #fb7185; }