@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --pine:#0E3B2E; --pine-deep:#0A2A21; --gold:#D4A72C; --berry:#C41E3A; --sage:#3E7A5C;
  --frost:#EAF3EF;
  --bg:#F3F8F5; --card:#FFFFFF; --ink:#1C2620; --ink-soft:#5B685F; --line:#DCE8E1;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(212,167,44,0.07), transparent 40%),
    radial-gradient(circle at 85% 8%, rgba(196,30,58,0.05), transparent 35%),
    var(--bg);
  color:var(--ink); min-height:100vh;
}
h1,h2,.tn-serif { font-family:'Fraunces',Georgia,serif; }
.tn-xmas { font-family:'Mountains of Christmas',cursive; line-height:1; }

#snow { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.tn-flake { position:absolute; top:-5%; color:#fff; text-shadow:0 0 4px rgba(255,255,255,.9), 0 1px 3px rgba(14,59,46,.4); animation-name:tn-snow-fall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes tn-snow-fall { to { transform:translateY(105vh) translateX(var(--drift,0px)); } }
@media (min-width: 768px) {
  :root { --bg:#e1e1e1; }
  body {
    background:
      radial-gradient(circle at 15% 0%, rgba(212,167,44,0.16), transparent 45%),
      radial-gradient(circle at 85% 8%, rgba(196,30,58,0.10), transparent 40%),
      var(--bg);
  }
}
.tn-enter { animation: tn-page-in .22s ease; }
@keyframes tn-page-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { #snow { display:none; } .tn-enter { animation:none; } }
.tn-shell { max-width:460px; margin:0 auto; padding:20px 18px 56px; min-height:100vh; position:relative; z-index:1; }
.tn-label { display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.tn-hint { display:block; font-size:12px; color:var(--ink-soft); margin-top:5px; }
.tn-input {
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); font-size:16px; color:var(--ink); font-family:inherit;
}
.tn-input:focus { outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage); }
.tn-btn {
  border-radius:999px; padding:13px 22px; font-weight:600; font-size:15px; border:none;
  cursor:pointer; transition:transform .12s ease; width:100%; font-family:inherit; display:block;
}
.tn-btn:active { transform:scale(0.97); }
.tn-btn:disabled { opacity:.45; cursor:not-allowed; }
.tn-btn-primary { background:var(--pine); color:#F5EFE3; }
.tn-btn-outline { background:transparent; color:var(--pine); border:1.5px solid var(--pine); }
.tn-btn-ghost { background:transparent; color:var(--berry); }
.tn-btn-auto { width:auto; display:inline-block; }
.tn-iconbtn {
  width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:transform .12s ease;
}
.tn-iconbtn:active { transform:scale(0.9); }
.tn-iconbtn-accent { background:var(--pine); color:#F5EFE3; border-color:var(--pine); }
.tn-crumb { font-size:13px; font-weight:600; color:var(--ink-soft); }
.tn-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; min-height:36px; }
.tn-topbar .spacer { width:36px; }
.tn-tag-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; position:relative; }
.tn-tag-card::before {
  content:''; position:absolute; top:10px; left:-7px; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #E8697A, var(--berry) 70%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
}
.tn-tag-card::after {
  content:''; position:absolute; top:8px; left:-1px; width:2px; height:6px; background:var(--gold);
}
.tn-chip { background:var(--bg); border-radius:10px; padding:8px 10px; font-size:14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.tn-pill { display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.tn-toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50; display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.18); max-width:90%; }
.tn-toast-error { background:var(--berry); color:white; }
.tn-toast-info { background:var(--pine); color:#F5EFE3; }
.tn-code { font-family:'Fraunces',serif; font-size:34px; letter-spacing:0.12em; font-weight:700; color:var(--pine); }
.tn-modal-backdrop { position:fixed; inset:0; background:rgba(20,30,24,.45); display:flex; align-items:flex-end; justify-content:center; z-index:60; }
.tn-modal { background:var(--card); border-radius:20px 20px 0 0; padding:22px 20px 28px; width:100%; max-width:460px; }
@media (min-width:480px){ .tn-modal-backdrop{ align-items:center; } .tn-modal{ border-radius:20px; } }

.tn-giftbox { position:relative; width:190px; height:170px; margin:18px auto 6px; cursor:pointer; }
.tn-box-body { position:absolute; bottom:0; left:0; right:0; height:108px; background:var(--berry); border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.15); }
.tn-box-ribbon-v { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:22px; height:108px; background:var(--gold); }
.tn-lid { position:absolute; top:34px; left:-8px; right:-8px; height:34px; background:var(--pine); border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,.12); transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .5s ease; transform-origin:left center; }
.tn-lid-ribbon { position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:34px; background:var(--gold); }
.tn-bow { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:40px; height:26px; transition:transform .5s ease, opacity .4s ease; }
.tn-bow-ball { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--gold); }
.tn-bow-l,.tn-bow-r { position:absolute; top:0; width:20px; height:20px; border-radius:50% 50% 50% 0; background:var(--gold); }
.tn-bow-l { left:0; transform:rotate(-40deg); }
.tn-bow-r { right:0; transform:rotate(130deg); }
.tn-giftbox.open .tn-lid { transform:translateY(-40px) rotate(-38deg); opacity:0; }
.tn-giftbox.open .tn-bow { transform:translate(-50%,-46px) scale(.7) rotate(-15deg); opacity:0; }
.tn-giftbox:not(.open) { animation:tn-bob 2.2s ease-in-out infinite; }
@keyframes tn-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

.tn-confetti-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.tn-confetti-piece { position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation-name:tn-fall; animation-timing-function:ease-in; animation-fill-mode:forwards; }
@keyframes tn-fall { to { transform:translateY(220px) rotate(340deg); opacity:0; } }

.tn-progress-track { background:var(--line); border-radius:999px; height:10px; overflow:hidden; }
.tn-progress-fill { background:var(--sage); height:100%; border-radius:999px; transition:width .4s ease; }

.tn-status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tn-status-btn { padding:10px 4px; font-size:12.5px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-family:inherit; font-weight:600; }
.tn-status-btn.active { background:var(--sage); color:#F5EFE3; border-color:var(--sage); }

.tn-center { text-align:center; }
.tn-row { display:flex; gap:8px; }
.tn-space-y > * + * { margin-top:10px; }
.tn-hero { text-align:center; margin:20px 0 36px; }
.tn-hero h1 { font-size:52px; font-weight:700; color:var(--berry); margin:2px 0 0; }
.tn-hero p { font-size:14px; color:var(--ink-soft); margin:2px 0 0; }
.tn-stats-banner { text-align:center; font-size:13px; font-weight:600; color:var(--sage); margin-top:14px; min-height:18px; }
.tn-switch-link { background:none; border:none; font-family:inherit; font-size:12.5px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; padding:0; margin-bottom:16px; }

details.tn-details summary { font-size:14px; font-weight:600; color:var(--pine); cursor:pointer; padding:8px 0; }

@media (prefers-reduced-motion: reduce) {
  .tn-giftbox:not(.open) { animation:none; }
  .tn-lid,.tn-bow,.tn-btn { transition:none; }
  .tn-confetti-piece { display:none; }
}