/* layout: a centered phone-frame app shell, switched by a pill tab bar, over an ambient snowfall backdrop */
:root{
  --bg:#f7f0e2;
  --surface:#ffffff;
  --ink:#1f2b22;
  --ink-soft:#5c6f62;
  --pine:#0f5132;
  --pine-deep:#0a3a24;
  --red:#b3122e;
  --gold:#b98a2e;
  --line:rgba(15,81,50,.16);
  --chip-bg:#eef3ec;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1f17; --surface:#132c21; --ink:#f2eee3; --ink-soft:#a7bdae;
    --pine:#4fae7d; --pine-deep:#0a3a24; --red:#e2495f; --gold:#e8c468;
    --line:rgba(255,255,255,.14); --chip-bg:#173627; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1f17; --surface:#132c21; --ink:#f2eee3; --ink-soft:#a7bdae;
  --pine:#4fae7d; --pine-deep:#0a3a24; --red:#e2495f; --gold:#e8c468;
  --line:rgba(255,255,255,.14); --chip-bg:#173627; color-scheme:dark;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  position:relative; overflow-x:hidden;
}
h1,h2,h3{font-family:'Paytone One',system-ui,sans-serif; text-wrap:balance;}

.snow-layer{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.flake{position:absolute; top:-10%; color:var(--gold); animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes fall{ from{transform:translateY(-10vh) translateX(0);} to{transform:translateY(110vh) translateX(14px);} }
@media (prefers-reduced-motion: reduce){ .flake{display:none;} }

.page-wrap{max-width:980px; margin:0 auto; padding-block:28px 56px; display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; z-index:1;}
.intro{text-align:center; max-width:460px;}
.intro h1{font-size:1.7rem; margin:0 0 6px; color:var(--pine);}
.intro p{margin:0; color:var(--ink-soft); font-size:.92rem;}

.tabs{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:999px;}
.tab-btn{padding:9px 15px; border-radius:999px; border:none; background:transparent; color:var(--ink-soft); font-weight:700; font-size:.78rem; font-family:'Nunito',sans-serif; cursor:pointer; white-space:nowrap;}
.tab-btn[aria-selected="true"]{background:var(--pine); color:#fff;}
.tab-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.app-shell{width:100%; max-width:460px; margin:0 auto; display:flex; flex-direction:column; position:relative;}
@media (min-width: 640px){
  .app-shell{background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:0 30px 60px -25px rgba(0,0,0,.35); overflow:hidden;}
}

.screen-header{padding:20px 20px 16px; background:linear-gradient(155deg,var(--pine),var(--pine-deep)); color:#fdfaf2; border-radius:18px 18px 0 0;}
@media (min-width: 640px){ .screen-header{border-radius:0;} }
.screen-header .eyebrow{text-transform:uppercase; letter-spacing:.09em; font-size:.65rem; font-weight:800; opacity:.85; margin:0 0 4px;}
.screen-header h2{font-size:1.25rem; margin:0 0 4px; color:#fff;}
.screen-header .lead{margin:0; font-size:.82rem; opacity:.9;}

.screen-body{flex:1; padding:18px 20px 28px; display:flex; flex-direction:column; gap:14px; position:relative; min-width:0; background:var(--surface); border-radius:0 0 18px 18px;}
@media (min-width: 640px){ .screen-body{border-radius:0;} }

.field-row{display:flex; gap:8px;}
.field-row input[type="text"],.field-row input[type="password"]{flex:1; min-width:0; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:.85rem; font-family:'Nunito',sans-serif; background:var(--surface); color:var(--ink);}
.field-row input:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}

.btn{border:none; border-radius:12px; padding:10px 16px; font-weight:800; font-size:.82rem; font-family:'Nunito',sans-serif; cursor:pointer;}
.btn--primary{background:var(--pine); color:#fff;}
.btn--accent{background:var(--red); color:#fff;}
.btn--ghost{background:var(--chip-bg); color:var(--ink);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.btn--block{width:100%; padding:13px; font-size:.9rem; border-radius:14px;}
.btn--text{background:none; padding:4px 2px; color:var(--pine); text-decoration:underline dotted; font-size:.8rem;}

.chip-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.chip{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--chip-bg); border-radius:12px; padding:9px 12px; font-weight:700; font-size:.86rem;}
.chip__name{display:flex; align-items:center; gap:8px; min-width:0;}
.chip__status{font-size:.9rem; flex:none;}
.chip__remove{border:none; background:transparent; color:var(--ink-soft); font-size:1rem; line-height:1; cursor:pointer; padding:2px 6px; flex:none;}
.chip__remove:hover{color:var(--red);}
.count-line{margin:0; font-size:.78rem; color:var(--ink-soft); font-weight:700;}

.panel{display:flex; flex-direction:column; gap:6px; background:var(--chip-bg); border-radius:14px; padding:12px; font-size:.82rem;}
.panel strong{color:var(--pine);}
.panel.is-warning strong{color:var(--red);}

.wish-item{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--chip-bg); border-radius:12px; padding:9px 12px; font-size:.85rem; font-weight:600;}

.step{display:flex; flex-direction:column; gap:14px;}
.step__title{margin:0; font-size:1rem; color:var(--pine);}
.step__hint{margin:0; font-size:.78rem; color:var(--ink-soft);}
.step-dots{display:flex; gap:6px; justify-content:center; margin-bottom:2px;}
.step-dots span{width:7px; height:7px; border-radius:50%; background:var(--line);}
.step-dots span.is-active{background:var(--pine); width:18px; border-radius:4px;}

.gift-stage{display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:6px;}
.gift{width:140px; height:120px; position:relative; margin-top:6px;}
.gift__base{position:absolute; bottom:0; left:0; width:140px; height:78px; background:var(--red); border-radius:10px 10px 4px 4px;}
.gift__ribbon-v{position:absolute; top:0; left:62px; width:16px; height:120px; background:var(--gold);}
.gift__ribbon-h{position:absolute; top:26px; left:0; width:140px; height:16px; background:var(--gold);}
.gift__lid{position:absolute; top:22px; left:-6px; width:152px; height:28px; background:var(--pine); border-radius:8px; transform-origin:12% 50%; transition:transform .5s ease, opacity .5s ease;}
.gift.is-shaking{animation:shake .5s ease;}
.gift.is-open .gift__lid{transform:translateY(-34px) rotate(-38deg); opacity:0;}
@keyframes shake{0%,100%{transform:rotate(0);}20%{transform:rotate(-4deg);}40%{transform:rotate(4deg);}60%{transform:rotate(-3deg);}80%{transform:rotate(3deg);}}
@media (prefers-reduced-motion: reduce){ .gift.is-shaking{animation:none;} .gift__lid{transition:none;} }

.lock-state{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:30px 10px;}
.lock-state .emoji{font-size:2.6rem;}
.lock-state p{margin:0; color:var(--ink-soft); font-size:.85rem; max-width:260px;}

.reveal-result{text-align:center; opacity:0; transform:translateY(8px) scale(.96); transition:opacity .4s ease, transform .4s ease;}
.reveal-result.show{opacity:1; transform:translateY(0) scale(1);}
.reveal-result .for{margin:0; font-size:.82rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.reveal-result .name{font-family:'Mountains of Christmas',cursive; font-size:2.3rem; margin:2px 0 6px; color:var(--red);}
.reveal-result .lock-note{margin:0 0 8px; font-size:.74rem; color:var(--ink-soft);}
.reveal-result a{color:var(--pine); font-weight:800; font-size:.82rem; text-decoration:none;}
.reveal-result a:hover{text-decoration:underline;}
.recipient-wishes{margin-top:10px; background:var(--chip-bg); border-radius:12px; padding:10px 12px; text-align:left; font-size:.82rem; display:flex; flex-direction:column; gap:6px;}

.confetti-piece{position:absolute; top:38%; width:8px; height:12px; z-index:5; animation-name:confetti-fall; animation-timing-function:ease-out; animation-fill-mode:forwards;}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0deg); opacity:1;}100%{transform:translate(var(--dx),170px) rotate(260deg); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .confetti-piece{display:none;} }

.caption{font-size:.78rem; color:var(--ink-soft); text-align:center; max-width:360px;}

.toast{position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom,0px)); transform:translate(-50%,10px); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-weight:800; font-size:.82rem; opacity:0; transition:opacity .25s,transform .25s; pointer-events:none; z-index:30;}
.toast.show{opacity:1; transform:translate(-50%,0);}

.modal-overlay{position:fixed; inset:0; background:rgba(10,20,15,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal-box{background:var(--surface); border-radius:18px; padding:20px; max-width:320px; width:100%; display:flex; flex-direction:column; gap:12px; box-shadow:0 25px 60px -25px rgba(0,0,0,.5); border:1px solid var(--line);}
.modal-box h3{margin:0; font-size:1.05rem; color:var(--pine); display:flex; align-items:center; gap:6px;}
.modal-box p{margin:0; font-size:.85rem; color:var(--ink-soft); line-height:1.4;}
.modal-actions{display:flex; gap:8px;}
.modal-actions .btn{flex:1;}

[hidden]{display:none!important;}