/* Festive minimalist style */
:root{
  --bg: #0b1220;
  --card: #111a2d;
  --accent: #e74343;
  --accent-2: #2fd67b;
  --text: #f1f5ff;
  --muted: #a9b3c9;
  --gold: #f6d87a;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, Noto Sans, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: linear-gradient(180deg, #0b1220 0%, #0e1a32 100%);
  color: var(--text);
  min-height:100vh;
}

.container { max-width: 980px; margin: 0 auto; padding: 24px; }

.header { text-align:center; margin-bottom: 20px;}
.header h1 { font-weight: 800; letter-spacing:.3px; }
.header p { color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }

label { display:block; margin: 8px 0 4px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%;
  background: #0d1629;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
textarea { resize: vertical; }

button, .btn {
  display:inline-block;
  background: linear-gradient(90deg, var(--accent), #f15c3b);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn.ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
}

.btn.small{ padding:6px 10px; border-radius: 10px; font-weight:600; }

p.muted, .muted { color: var(--muted); font-size: 14px; }
p.ok { color: var(--accent-2); font-weight:700; }
p.error { color: #ff6b6b; font-weight:700; }

.table { width:100%; }
.row { display:grid; grid-template-columns: 2fr 1fr 2fr 2fr; gap:8px; padding:8px 0; border-bottom: 1px dotted rgba(255,255,255,.1); }
.row.head { font-weight:700; color: var(--gold); }

ul.wishes { list-style:none; padding-left: 0; }
ul.wishes li { padding:6px 0; }

/* Falling snow */
.snow {
  position: relative;
  overflow: hidden;
}
.snow::before, .snow::after {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(3px 3px at 100px 80px, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(2px 2px at 50px 100px, rgba(255,255,255,.8) 50%, transparent 51%);
  background-size: 200px 200px;
  animation: snow 12s linear infinite;
  pointer-events: none;
}
.snow::after {
  animation-duration: 18s;
  opacity: .7;
}

@keyframes snow {
  0% { transform: translateY(-10%) }
  100% { transform: translateY(10%) }
}