:root {
  --red: #b3262e; --red-dark: #8f1c23; --green: #1f6b45; --bg: #f7f3ec; --card: #fff;
  --text: #25211c; --muted: #7a7266; --line: #e6dfd2; --bad: #b3262e;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 64px 16px 80px; position: relative; }
h1 { font-size: 1.6rem; margin: 8px 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 18px 0 8px; }
.muted { color: var(--muted); } .center { text-align: center; }
.small { font-size: .85rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 14px 0; }
.banner { text-align: center; padding: 28px 0 6px; }
.banner .emoji { font-size: 2.4rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 4px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 10px 0; }
input[type=text], input[type=password], input[type=url], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); border-color: transparent; }
button { font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 10px 16px;
  border: 1px solid transparent; background: var(--red); color: #fff; }
button:hover { background: var(--red-dark); }
button:disabled { opacity: .5; cursor: default; }
button.ghost { background: transparent; color: var(--text); border-color: var(--line); }
button.ghost:hover { background: #f1ece1; }
button.link { background: none; color: var(--red); padding: 2px 6px; font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }
button.green { background: var(--green); } button.green:hover { background: #17533a; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.head { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.banner.head { padding: 20px 16px; margin-bottom: 14px; }
.tabs { display: flex; gap: 6px; margin: 12px 0 0; padding: 4px 8px 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; }
.tabs button { background: none; color: var(--muted); border-radius: 8px 8px 0 0; padding: 8px 14px;
  border-bottom: 3px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--red); }
.tabs button:hover { background: #f1ece1; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 10px;
  justify-content: space-between; align-items: flex-start; }
.list li:first-child { border-top: 0; }
.list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.big-name { font-size: 2rem; font-weight: 700; color: var(--red); margin: 6px 0 2px; }
.msg { padding: 10px 12px; border-radius: 8px; margin: 12px 0; font-size: .92rem; }
.msg.err { background: #fbe9ea; color: var(--bad); }
.msg.ok { background: #e6f3ec; color: var(--green); }
.status li { display: block; }
.pass { color: var(--green); font-weight: 600; } .fail { color: var(--bad); font-weight: 600; }
.pill { font-size: .75rem; padding: 2px 8px; border-radius: 99px; background: #eee6d6; color: var(--muted); }
.pill.green { background: #e6f3ec; color: var(--green); }

/* Garland across the top, candy cane stripe along the bottom */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 10;
  pointer-events: none; background-repeat: repeat-x; background-size: 80px 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44' viewBox='0 0 80 44'%3E%3Cpath d='M0 6 Q20 34 40 6 Q60 34 80 6' fill='none' stroke='%231f6b45' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M0 6 Q20 34 40 6 Q60 34 80 6' fill='none' stroke='%232f8f5f' stroke-width='2' stroke-dasharray='3 5'/%3E%3Ccircle cx='20' cy='27' r='4.5' fill='%23b3262e'/%3E%3Ccircle cx='60' cy='27' r='4.5' fill='%23e8b923'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 14px; z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, #b3262e 0 12px, #fff 12px 24px);
  border-top: 2px solid #8f1c23;
}

/* Festive background: holly, candy canes and stars, with slow falling snow behind the cards */
body {
  background-color: #f4efe5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E %3Cg transform='translate(50 55) rotate(-20)' opacity='.55'%3E %3Cellipse cx='-9' cy='0' rx='11' ry='5' fill='%232f8f5f' transform='rotate(-25 -9 0)'/%3E %3Cellipse cx='9' cy='0' rx='11' ry='5' fill='%231f6b45' transform='rotate(25 9 0)'/%3E %3Ccircle cx='-3' cy='4' r='3.4' fill='%23b3262e'/%3E%3Ccircle cx='3' cy='5' r='3.4' fill='%23c8333b'/%3E%3Ccircle cx='0' cy='9' r='3.4' fill='%23b3262e'/%3E %3C/g%3E %3Cg transform='translate(185 175) rotate(15)' opacity='.55'%3E %3Cellipse cx='-9' cy='0' rx='11' ry='5' fill='%232f8f5f' transform='rotate(-25 -9 0)'/%3E %3Cellipse cx='9' cy='0' rx='11' ry='5' fill='%231f6b45' transform='rotate(25 9 0)'/%3E %3Ccircle cx='-3' cy='4' r='3.4' fill='%23b3262e'/%3E%3Ccircle cx='3' cy='5' r='3.4' fill='%23c8333b'/%3E%3Ccircle cx='0' cy='9' r='3.4' fill='%23b3262e'/%3E %3C/g%3E %3Cg transform='translate(165 50) rotate(20)' opacity='.6' fill='none' stroke-linecap='round'%3E %3Cpath d='M0 26V6a8 8 0 0 1 16 0' stroke='%23c8333b' stroke-width='5'/%3E %3Cpath d='M0 26V6a8 8 0 0 1 16 0' stroke='%23fff' stroke-width='5' stroke-dasharray='3 5'/%3E %3C/g%3E %3Cg transform='translate(60 170) rotate(-25)' opacity='.6' fill='none' stroke-linecap='round'%3E %3Cpath d='M0 26V6a8 8 0 0 1 16 0' stroke='%23c8333b' stroke-width='5'/%3E %3Cpath d='M0 26V6a8 8 0 0 1 16 0' stroke='%23fff' stroke-width='5' stroke-dasharray='3 5'/%3E %3C/g%3E %3Cpath d='M120 100l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='%23e8b923' opacity='.6'/%3E %3Cpath d='M215 105l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23e8b923' opacity='.5'/%3E %3Cpath d='M20 130l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23e8b923' opacity='.5'/%3E %3Cpath d='M125 220l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23e8b923' opacity='.5'/%3E %3Ccircle cx='110' cy='20' r='3' fill='%23c8333b' opacity='.4'/%3E %3Ccircle cx='230' cy='20' r='2.5' fill='%232f8f5f' opacity='.45'/%3E %3Ccircle cx='15' cy='225' r='3' fill='%232f8f5f' opacity='.45'/%3E %3C/svg%3E");
  background-size: 240px 240px;
}
html::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E %3Cdefs%3E%3Cg id='f' stroke='%239db9cc' stroke-width='2' stroke-linecap='round' fill='none'%3E %3Cpath d='M0 -9V9M-7.8 -4.5L7.8 4.5M-7.8 4.5L7.8 -4.5'/%3E%3C/g%3E%3C/defs%3E %3Cuse href='%23f' transform='translate(40 30) scale(1.1)' opacity='.75'/%3E %3Cuse href='%23f' transform='translate(150 90) scale(.7)' opacity='.6'/%3E %3Cuse href='%23f' transform='translate(270 50) scale(1.3)' opacity='.7'/%3E %3Cuse href='%23f' transform='translate(90 170) scale(.9)' opacity='.65'/%3E %3Cuse href='%23f' transform='translate(220 200) scale(.65)' opacity='.55'/%3E %3Cuse href='%23f' transform='translate(300 280) scale(1)' opacity='.7'/%3E %3Cuse href='%23f' transform='translate(30 270) scale(.8)' opacity='.6'/%3E %3Cuse href='%23f' transform='translate(160 290) scale(1.2)' opacity='.7'/%3E %3Ccircle cx='110' cy='40' r='3' fill='%23c5d6e2'/%3E%3Ccircle cx='200' cy='140' r='2.5' fill='%23c5d6e2'/%3E %3Ccircle cx='60' cy='220' r='3' fill='%23c5d6e2'/%3E%3Ccircle cx='260' cy='250' r='2.5' fill='%23c5d6e2'/%3E %3Ccircle cx='10' cy='140' r='2' fill='%23c5d6e2'/%3E%3Ccircle cx='290' cy='130' r='3' fill='%23c5d6e2'/%3E %3C/svg%3E");
  background-size: 320px 320px;
  animation: snowfall 40s linear infinite;
}
main { z-index: 1; }
@keyframes snowfall { from { background-position: 0 0; } to { background-position: 60px 320px; } }
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

/* Title */
@font-face {
  font-family: 'Mountains of Christmas';
  src: url('fonts/MountainsofChristmas-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
.head h1 {
  display: inline-block;
  font-family: 'Mountains of Christmas', system-ui, sans-serif;
  font-size: 2rem; line-height: 1.15; color: var(--red);
  text-shadow: 2px 2px 0 #f3d9b8;
}
.head h1::after {
  content: ""; display: block; height: 6px; margin-top: 4px; border-radius: 3px;
  background: repeating-linear-gradient(135deg, #b3262e 0 8px, #1f6b45 8px 16px);
}
.banner.head { text-align: center; }