:root {
  --bg: #fff5fa;
  --card-bg: rgba(255,255,255,0.92);
  --accent: #ff6b88;
  --accent-2: #ff9fb8;
  --text: #2a2033;
  --ink: #2a2033;
}

:root[data-theme='winter'] {
  --bg: #f3f7ff;
  --card-bg: rgba(255,255,255,0.95);
  --accent: #4b7bff;
  --accent-2: #9fb8ff;
  --text: #1d2233;
}

:root[data-theme='summer'] {
  --bg: #fffbe8;
  --card-bg: rgba(255,255,255,0.96);
  --accent: #ffb347;
  --accent-2: #ffde7d;
  --text: #3a2a15;
}

:root[data-theme='spring'] {
  --bg: #f5fff5;
  --card-bg: rgba(255,255,255,0.96);
  --accent: #7dd47d;
  --accent-2: #b6f0b6;
  --text: #234025;
}

:root[data-theme='valentines'] {
  --bg: #fff0f5;
  --card-bg: rgba(255,255,255,0.96);
  --accent: #ff4b6b;
  --accent-2: #ff9fb8;
  --text: #3b0915;
}

:root[data-theme='birthday'] {
  --bg: #fff7e9;
  --card-bg: rgba(255,255,255,0.96);
  --accent: #ff9f43;
  --accent-2: #ffd36b;
  --text: #3a2816;
}

:root[data-theme='party'] {
  --bg: #0b0620;
  --card-bg: rgba(21,16,60,0.96);
  --accent: #ff4bdb;
  --accent-2: #4bc6ff;
  --text: #f7f3ff;
}

:root[data-theme='night'] {
  --bg: #050816;
  --card-bg: rgba(15,23,42,0.96);
  --accent: #38bdf8;
  --accent-2: #6366f1;
  --text: #e5f2ff;
}

:root[data-theme='neutral'] {
  --bg: #f5f5f7;
  --card-bg: rgba(255,255,255,0.96);
  --accent: #6366f1;
  --accent-2: #a5b4fc;
  --text: #111827;
}


/* Cozy Christmas Theme */
:root{--bg:#fff9fb;--ink:#2a2333;--muted:#6a5f76;--card:#ffffff;--red:#ff8fa3;--red-deep:#ff5c73;--gold:#ffd88a;--green:#b9f3c8;--teal:#baf5ef;--blue:#d7e7ff;--shadow:0 12px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}html,body{height:100%}
body.xmas{margin:0;font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg)}
.header{position:sticky;top:0;z-index:10;padding:16px 16px 8px 16px;background:linear-gradient(180deg,#fff,#fff6f9 60%,#fff0f4);border-bottom:1px solid rgba(255,92,115,.25);box-shadow:0 6px 16px rgba(255,92,115,.06)}
.brand{display:flex;flex-direction:column;gap:2px}
.title{margin:0;font-size:28px;letter-spacing:.3px;position:relative;display:inline-block;padding-right:44px}
.title::after{content:"";position:absolute;right:-6px;top:-12px;width:36px;height:36px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path fill="%23ff5c73" d="M6 44c6-10 18-20 36-24 2 8-2 18-6 24H6z"/><circle cx="54" cy="18" r="7" fill="%23fff"/><path fill="%23fff" d="M6 44h32c-2 4-6 8-10 8H10c-2 0-4-2-4-8z"/></svg>') no-repeat center/contain;transform:rotate(12deg)}
.subtitle{margin:0;color:var(--muted);font-size:14px}
.nav{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.pill{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:8px 14px;text-decoration:none;color:#5b3550;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,92,115,.08), var(--shadow);transition:transform .15s ease, background .15s ease}
.pill:hover{transform:translateY(-1px); background:linear-gradient(180deg,#fff,#ffeef3)}
.lights{height:26px;position:relative;margin-top:8px}
.lights::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#3e2b1f; border-radius:3px; box-shadow: 0 1px 0 rgba(0,0,0,.08)}
.lights::after{content:""; position:absolute; left:0; right:0; top:-6px; height:26px; pointer-events:none; background:radial-gradient(circle at 5% 50%, #ff6f91 0 6px, transparent 7px),radial-gradient(circle at 15% 50%, #ffe28a 0 6px, transparent 7px),radial-gradient(circle at 25% 50%, #8dffcd 0 6px, transparent 7px),radial-gradient(circle at 35% 50%, #9edbff 0 6px, transparent 7px),radial-gradient(circle at 45% 50%, #ff6f91 0 6px, transparent 7px),radial-gradient(circle at 55% 50%, #ffe28a 0 6px, transparent 7px),radial-gradient(circle at 65% 50%, #8dffcd 0 6px, transparent 7px),radial-gradient(circle at 75% 50%, #9edbff 0 6px, transparent 7px),radial-gradient(circle at 85% 50%, #ff6f91 0 6px, transparent 7px); animation: twinkle 1.8s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.85; filter:drop-shadow(0 0 6px rgba(255,255,255,.6))} to{opacity:1; filter:drop-shadow(0 0 10px rgba(255,255,255,1))}}
.container{max-width:980px;margin:20px auto;padding:0 16px}
.card{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card.festive{background:linear-gradient(180deg,#fff,#fff8fb 70%)}
.code{display:inline-block;background:#fff;border:1px dashed rgba(0,0,0,.15);padding:6px 8px;border-radius:10px}
.count{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.block{display:inline-flex;align-items:baseline;gap:6px;background:linear-gradient(180deg,#fff,#fff1f5);border:1px solid rgba(255,92,115,.25);padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 20px rgba(255,216,138,.15)}
.digit{min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.unit{opacity:.85;font-weight:700}
.btn{background:linear-gradient(180deg,var(--red),var(--red-deep));color:#fff;border:0;border-radius:14px;padding:10px 14px;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 16px rgba(255,92,115,.35)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;text-align:center;background:linear-gradient(180deg,#fff,#f6fffb 70%);box-shadow:var(--shadow);transition:transform .18s ease}
.tile:hover{transform:translateY(-2px)} .tile.locked{filter:saturate(.6) grayscale(.1); opacity:.75}
.tile button{width:100%;padding:11px 12px;border:0;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#ffd88a,#ffecb8); font-weight:800; color:#5c3b00; box-shadow: inset 0 0 0 1px rgba(92,59,0,.08), 0 6px 14px rgba(255,216,138,.35)}
.snow{position:fixed;inset:0;pointer-events:none;z-index:0}