:root{
  --bg:#FAF7EE; --card:#FFFFFF; --soft:#F6EFE1; --soft2:#FBE9DC;
  --ink:#1E2A24; --muted:#8C8475; --line:#E9E1D2;
  --orange:#ED6726; --orangeDeep:#B34514; --green:#445647; --purple:#8E6BA8; --yellow:#F2C53D; --cream:#FFF7EE;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); overscroll-behavior-y:none;
}
.app{
  max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh;
  background:var(--card); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.views{flex:1;}
.view{display:none;} .view.active{display:block;}
.scr{display:none;} .scr.active{display:block;}

.lbl{font-size:11px;color:var(--muted);margin:0;}
.h{font-size:18px;font-weight:600;color:var(--ink);margin:0;}
.sec{margin:8px 16px 6px;font-size:12px;font-weight:600;color:var(--ink);}

.pad{padding:0 16px;}
.row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;user-select:none;background:var(--card);position:relative;overflow:hidden;}
.row:active{background:var(--soft);}
.mc{background:var(--soft);border-radius:10px;padding:11px 13px;}

.tabbar{display:flex;border-top:1px solid var(--line);background:var(--card);position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom);}
.tab{flex:1;text-align:center;padding:12px 0;cursor:pointer;color:var(--muted);}
.tab.active{color:var(--orange);}
.tab i{font-size:22px;}

.chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.tg{font-size:13px;padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;}
.tg.active{background:var(--orange);color:var(--cream);border-color:var(--orange);}

.pvbtn{flex:1;font-size:13px;padding:9px 6px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;}
.pvbtn:active{background:var(--soft);}
.btn{font-size:15px;font-weight:600;padding:13px 0;border-radius:12px;cursor:pointer;border:none;width:100%;}
.btn-pri{background:var(--orange);color:var(--cream);}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}

.card{border-radius:11px;padding:11px;cursor:pointer;min-height:92px;display:flex;flex-direction:column;justify-content:space-between;}

.collageHead{position:relative;height:104px;background:var(--soft2);overflow:hidden;}
.cb{position:absolute;border-radius:50%;}

.sbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:19px;cursor:pointer;}
.day{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;color:var(--muted);}
.day.on{background:var(--orange);color:var(--cream);border-color:var(--orange);font-weight:600;}
.sw{width:46px;height:27px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0;}
.sw.on{background:var(--green);}
.sw .kn{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .2s;}
.sw.on .kn{left:22px;}

.step{display:none;} .step.active{display:block;}

.overlay{position:absolute;inset:0;z-index:20;overflow:hidden;}
.scrim{position:absolute;inset:0;background:rgba(30,42,36,.55);z-index:25;display:flex;align-items:center;justify-content:center;}

#toast{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--cream);padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2);}

.conf{position:absolute;width:10px;height:14px;border-radius:2px;top:-22px;animation:cfall linear forwards;}
.fwp{position:absolute;width:8px;height:8px;border-radius:50%;animation:cfw .9s ease-out forwards;}
.spk{position:absolute;width:5px;height:5px;border-radius:50%;animation:spk .55s ease-out forwards;}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@keyframes ripple{0%{transform:scale(.3);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes toastIn{0%{opacity:0;transform:translateY(-18px)}14%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes cfall{to{transform:translateY(720px) rotate(720deg);opacity:.85}}
@keyframes cfw{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
@keyframes cstamp{0%{transform:scale(2.6) rotate(-20deg);opacity:0}55%{opacity:1}75%{transform:scale(.92) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes flameP{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}