:root {
  --red: #e0002f;
  --green: #0e7a3e;
  --gold: #ffd447;
  --gold-soft: #ffe89c;
  --cream: #fff7ec;
  --snow: #f4fbff;
  --text: #0d2519;
  --mint: #d7fff1;
  --sky: #c7e9ff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 232, 198, 0.45), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(231, 255, 238, 0.6), transparent 30%),
    linear-gradient(135deg, #fff8f3 0%, #f1fffb 50%, #f0f7ff 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 72, 72, 0.05), transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(0, 154, 75, 0.06), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255, 212, 71, 0.05) 0, rgba(255, 212, 71, 0.05) 10px, transparent 10px, transparent 20px);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
  pointer-events: none;
}
.snow-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 50;
}
.light-string {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  z-index: 60;
  pointer-events: none;
  transform: rotate(-1deg);
}
.bulb {
  width: 18px;
  height: 26px;
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  animation: twinkle 3s ease-in-out infinite;
  background: var(--gold);
  opacity: 0.95;
}
.bulb.red { background: linear-gradient(140deg, #ff5a70, #d3002f); }
.bulb.green { background: linear-gradient(140deg, #35c374, #0e7a3e); }
.bulb.gold { background: linear-gradient(140deg, #ffe698, #ffb700); }
.bulb.blue { background: linear-gradient(140deg, #b4e5ff, #3db5ff); }
.bulb:nth-child(odd) { animation-delay: 0.6s; }
.bulb:nth-child(3n) { animation-delay: 1.2s; }
.floating-emoji {
  position: fixed;
  left: 10%;
  bottom: 8%;
  font-size: 2.2rem;
  animation: float 9s ease-in-out infinite;
  z-index: 30;
  opacity: 0.9;
}
.floating-emoji.slow { left: auto; right: 12%; bottom: 16%; animation-duration: 12s; }
.floating-emoji.alt { left: 50%; bottom: 4%; animation-duration: 10s; animation-delay: 2s; }
.flake {
  position: absolute;
  top: -5%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  animation: fall 12s linear infinite;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.flake:nth-child(3n) { font-size: 1.6rem; animation-duration: 10s; }
.flake:nth-child(4n) { font-size: 0.9rem; animation-duration: 14s; }
.flake:nth-child(odd) { animation-delay: 1.5s; }
.flake:nth-child(2n) { animation-delay: 3s; }
.flake:nth-child(5n) { animation-delay: 5s; }
.flake:nth-child(1) { left: 5%; }
.flake:nth-child(2) { left: 15%; }
.flake:nth-child(3) { left: 25%; }
.flake:nth-child(4) { left: 35%; }
.flake:nth-child(5) { left: 45%; }
.flake:nth-child(6) { left: 55%; }
.flake:nth-child(7) { left: 65%; }
.flake:nth-child(8) { left: 75%; }
.flake:nth-child(9) { left: 85%; }
.flake:nth-child(10) { left: 95%; }
.flake:nth-child(11) { left: 50%; }
.flake:nth-child(12) { left: 30%; }
@keyframes fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0.9; }
  50% { opacity: 0.7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.2; }
}
header.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: linear-gradient(120deg, var(--red), #a0002a);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  position: relative;
  z-index: 10;
}
.logo {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 1px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.event-chip {
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
main { max-width: 1100px; margin: 32px auto; padding: 0 16px; }
.hero {
  position: relative;
  background: radial-gradient(circle at 20% 20%, rgba(255,212,71,0.35), rgba(224,0,47,0.4)), linear-gradient(130deg, rgba(224,0,47,0.95), rgba(14,122,62,0.9));
  color: #fff;
  border-radius: 22px;
  padding: 34px 28px 42px;
  text-align: center;
  box-shadow: 0 10px 36px rgba(215, 38, 61, 0.25);
  overflow: hidden;
  z-index: 2;
  animation: pop-in 0.9s ease;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 35%),
              radial-gradient(circle at 80% 10%, rgba(255,212,71,0.2), transparent 40%);
  pointer-events: none;
}
.mega-card { border: 3px solid rgba(255, 212, 71, 0.4); }
.hero h1 { font-size: 2.4rem; margin: 12px 0 12px; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.hero .lead { font-size: 1.12rem; line-height: 1.7; max-width: 800px; margin: 0 auto; }
.hero-ribbon {
  display: inline-block;
  background: #fff;
  color: var(--red);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.sparkles { font-size: 1.6rem; margin-top: 12px; color: var(--gold); }
.stats { margin-top: 16px; font-weight: 800; color: #fff; font-size: 1.05rem; }
.checklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 16px;
  font-weight: 700;
}
.checklist span { background: rgba(255,255,255,0.12); padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(2px); }

.card {
  background: var(--cream);
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
  border: 1px solid #f0d9b5;
}
.card.swap { position: relative; z-index: 2; border: 2px dashed var(--red); }
.card h2, .card h1 { margin-top: 0; color: var(--green); }
.card.story { background: linear-gradient(120deg, #fff3d9, #fffef6); border-color: var(--gold-soft); }
.card.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; align-items: start; }
.card.vibe { background: linear-gradient(120deg, #e9fff5, #fff7ec); }
.moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; margin-top: 10px; }
.moment { background: #fff; border-radius: 12px; padding: 12px; border: 1px solid #e8e1cf; box-shadow: 0 6px 16px rgba(0,0,0,0.05); animation: sway 4s ease-in-out infinite; }
.moment:nth-child(odd) { animation-delay: 0.8s; }

.signup-form {
  display: grid;
  gap: 12px;
}
.signup-feedback {
  border: 1px solid #d2dce6;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  background: #fff;
}
.signup-feedback.pending {
  border-color: var(--gold);
  background: #fff8df;
  color: #7d6400;
}
.signup-feedback.success {
  border-color: var(--green);
  background: #e6fff1;
  color: var(--green);
}
.signup-feedback.error {
  border-color: var(--red);
  background: #ffe6ea;
  color: var(--red);
}
label { font-weight: 700; }
input {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d2dce6;
  font-size: 1rem;
}
button, .button {
  background: linear-gradient(120deg, var(--red), #9b1c31);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 6px 16px rgba(193,18,31,0.3);
  transition: transform 0.15s ease, filter 0.15s ease;
}
button:hover, .button:hover { filter: brightness(1.05); transform: translateY(-2px) scale(1.01); }
button.danger { background: linear-gradient(120deg, #8d0d1a, #c1121f); }

.festive-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.festive-list li { padding: 10px 12px; background: #fff; border-radius: 12px; border: 1px solid #ebddc7; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.festive-list.alt li { background: #f7fffb; }

.hint { color: #4a4a4a; font-size: 0.9rem; }
.footer {
  text-align: center;
  padding: 18px;
  background: var(--green);
  color: #fff;
  margin-top: 32px;
}

.table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { padding: 10px; border-bottom: 1px solid #e3d5ca; }
.table th { text-align: left; color: var(--red); }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pairings { list-style: none; padding: 0; margin-top: 12px; }
.pairings li { background: linear-gradient(120deg, rgba(255,244,233,0.9), rgba(255,255,255,0.95)); padding: 12px 14px; border-radius: 12px; margin-bottom: 10px; border: 1px solid #f0d9b5; box-shadow: 0 6px 12px rgba(0,0,0,0.05); word-break: break-word; }
.pairing-panel {
  margin-top: 25px;
}
.pairing-panel .draw-link {
  display: inline-block;
  margin: 12px 0 18px;
}
.pairing-panel form { margin: 12px 0 16px; }
.pairing-panel button { width: 100%; }
.inline-form { display: inline; margin-right: 6px; }
.festive-pairings__item {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 198, 116, 0.8);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,225,196,0.95));
  box-shadow: 0 10px 30px rgba(255, 146, 71, 0.15);
  overflow: hidden;
}
.festive-pairings__item .names {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 450;
  flex-wrap: wrap;
}
.festive-pairings__item .giver { color: var(--green); }
.festive-pairings__item .receiver { color: var(--red); }
.festive-pairings__item .gift-number {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #8d4a00;
  background: rgba(255, 214, 160, 0.6);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
}
.festive-pairings__item .note {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #6b4f2a;
}
.festive-pairings__item.empty {
  text-align: center;
  font-weight: 600;
  color: #7a5a2d;
  background: rgba(255, 255, 255, 0.9);
}
.festive-pairings { display: grid; gap: 14px; padding: 0; margin: 18px 0 0; }

.draw-card { border: 3px solid rgba(255, 212, 71, 0.5); }
.draw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.draw-stats div {
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 12px;
  border: 1px dashed rgba(255, 212, 71, 0.8);
  text-align: center;
}
.draw-stats strong { display: block; font-size: 1.6rem; color: var(--red); }
.draw-controls { margin: 18px 0 26px; display: flex; flex-direction: column; gap: 16px; }
.draw-controls button { width: 100%; font-size: 1rem; }
.draw-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px auto 24px;
  padding: 12px 0 18px;
  text-align: center;
}
.draw-countdown[hidden] { display: none; }
.draw-countdown__circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px dashed var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--red);
  animation: spin 2s linear infinite;
}
.draw-countdown__text {
  margin: 0;
  font-weight: 700;
  color: var(--green);
  font-size: 1rem;
}
.draw-result {
  padding: 18px;
  border-radius: 16px;
  border: 2px dashed rgba(255, 212, 71, 0.8);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,237,200,0.9));
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--red);
}
.draw-result[hidden] { display: none; }
.draw-result__message {
  margin: 0;
  color: inherit;
  font-weight: 600;
}
.draw-result .name { display: block; font-size: 1.1rem; }

.festive-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 12px 0;
}

@keyframes twinkle {
  0%, 100% { filter: brightness(0.85); transform: translateY(0); }
  50% { filter: brightness(1.2); transform: translateY(2px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.9; }
  50% { transform: translateY(-14px) rotate(-6deg) scale(1.05); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pop-in {
  0% { transform: translateY(20px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@media (max-width: 700px) {
  header.banner { flex-direction: column; gap: 10px; }
  .hero h1 { font-size: 1.9rem; }
}