/* 桦宜记 · 视觉基准来自 design/i-tiandian.html（I 甜点便签） */

:root{
  --bg:#FFF7F9; --paper:#FFFDF8; --ink:#37322C; --ink2:#6C6455; --ink3:#6F6757; --line:#EBD9DE;
  --blue:#CFE6F8; --blue-2:#A6CFEA; --blue-d:#1D4A67;
  --pink:#FFD9E4; --pink-2:#FFBDD1; --pink-d:#AE3556;
  --yellow:#FFEBBA; --yellow-2:#FFDA82; --yellow-d:#6A4F14;
  --tk:#FFEFC4;
  --digits:"Helvetica Neue",Helvetica,Arial,"PingFang SC",sans-serif;
  --shadow-1:0 3px 0 rgba(120,80,95,.06);
  --shadow-2:0 6px 0 rgba(120,80,95,.07), 0 14px 26px rgba(120,80,95,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}

body{
  min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:"Yuanti SC","YouYuan","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px,#F3DFE6 1px,transparent 1.4px);
  background-size:16px 16px;background-attachment:fixed;
  overflow-x:hidden;
}

.wrap{
  max-width:430px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));position:relative;
}
#view{display:flex;flex-direction:column;flex:1;min-width:0}
@media (min-width:600px){
  body{background-color:#FBF3F5}
  .wrap{background:var(--bg);box-shadow:0 0 0 1px #F2E2E8,0 18px 50px rgba(120,80,95,.08)}
}

/* ---------- header ---------- */
.hd{height:66px;display:flex;align-items:center;justify-content:space-between;
  padding:6px 22px 0;flex:none}
.brand{display:flex;align-items:center;gap:7px}
.brand .tag{background:var(--yellow);border:1.5px solid var(--ink);border-radius:8px;
  padding:5px 9px;font-size:18px;font-weight:700;letter-spacing:.06em;
  transform:rotate(-1.2deg);box-shadow:2px 2px 0 rgba(55,50,44,.85)}
.date{font-size:11.5px;color:var(--ink2);letter-spacing:.06em;
  border-bottom:1.5px dashed var(--ink3);padding-bottom:2px}

/* ---------- hero ---------- */
.hero{margin:10px 16px 0;background:var(--paper);border-radius:16px;
  padding:18px 16px 14px;position:relative;transform:rotate(-.7deg);
  box-shadow:var(--shadow-2);border:1px solid #F2E6E9;flex:none}
.hero .kicker{font-size:11.5px;color:var(--ink2);letter-spacing:.14em}
.hero .num{font-size:50px;line-height:1.06;font-weight:700;letter-spacing:-.03em;
  margin:6px 0 0;font-variant-numeric:tabular-nums;font-family:var(--digits);
  display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;word-break:break-all}
.hero .num .y{font-size:22px;font-weight:600;color:var(--ink2);align-self:flex-start;margin-top:10px}
.hero .sub{font-size:12px;color:var(--ink2);margin-top:4px;letter-spacing:.02em}
.hero .sub b{color:var(--ink)}
.dots{display:flex;gap:4px;margin:13px 0 0}
.dots i{flex:1;height:12px;border-radius:3px;background:#F4E9EC;display:block}
.dots i.f{background:var(--pink-2)}
.dots i.half{background:linear-gradient(90deg,var(--pink-2) 55%,#F4E9EC 55%)}
.hero .foot{display:flex;justify-content:space-between;font-size:11px;
  color:var(--ink2);margin-top:7px;gap:10px}
.hero .foot b{color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--digits)}
.stamp{position:absolute;right:12px;top:14px;width:60px;height:60px;transform:rotate(9deg);
  border:2.5px solid #D0728C;border-radius:50%;display:grid;place-items:center;
  text-align:center;color:#B03456;opacity:.9}
.stamp b{font-size:17px;letter-spacing:-.02em;display:block;line-height:1.1;
  font-family:var(--digits);font-variant-numeric:tabular-nums}
.stamp span{font-size:8.5px;letter-spacing:.1em;line-height:1.15;display:block}

/* ---------- blue note ---------- */
.noteB{margin:-6px 26px 0 16px;background:var(--blue);border-radius:14px;
  padding:12px 16px;position:relative;transform:rotate(1.1deg);
  box-shadow:0 4px 0 rgba(60,100,130,.12);display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex:none;z-index:2}
.noteB .l{font-size:11px;color:#204B66;letter-spacing:.08em}
.noteB .v{font-size:23px;font-weight:700;color:var(--blue-d);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-family:var(--digits)}
.noteB .r{font-size:10px;color:#204B66;text-align:right;line-height:1.65;width:118px;flex:none}
.noteB .r b{color:var(--pink-d)}

/* ---------- mini chips ---------- */
.mini{display:flex;gap:9px;margin:14px 18px 0;flex:none}
.mc{flex:1;background:var(--paper);border-radius:12px;padding:8px 11px;
  border:1px solid #F1E4E8;box-shadow:var(--shadow-1);min-width:0}
.mc .l{font-size:10.5px;color:var(--ink2);letter-spacing:.04em}
.mc .v{font-size:16px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums;
  font-family:var(--digits);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc.y{background:var(--yellow)}
.mc.y .v{color:var(--yellow-d)}
.mc.y .l{color:#5E4712}

/* ---------- list ---------- */
.list{margin:14px 18px 0;background:var(--paper);border-radius:14px;padding:11px 14px 5px;
  border:1px solid #F1E4E8;box-shadow:0 4px 0 rgba(120,80,95,.06);flex:none;transform:rotate(.4deg)}
.lh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.lh h2{font-size:12.5px;letter-spacing:.08em;font-weight:700}
.lh .all{font-size:11px;color:var(--ink2)}
.row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dotted #E7D8DE}
.row:last-child{border-bottom:0}
.ic{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:14px;background:#FDF0F4}
.m{flex:1;min-width:0}
.m .t{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m .d{display:block;font-size:10.5px;color:var(--ink3);margin-top:1px}
.amt{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;
  font-family:var(--digits);white-space:nowrap}
.amt.in{color:#2F7A5A}
.empty{padding:14px 2px 16px;font-size:12.5px;color:var(--ink2);line-height:1.7}
.empty b{color:var(--ink)}

/* ---------- ticket ---------- */
.ticket{margin:22px 18px 0;position:relative;flex:none;background:var(--tk);
  padding:14px 15px 16px;filter:drop-shadow(0 3px 4px rgba(150,110,60,.12))}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:7px;
  pointer-events:none;background-size:14px 7px;background-repeat:repeat-x}
.ticket::before{top:-6px;
  background-image:radial-gradient(circle at 7px 7px,var(--tk) 5.5px,transparent 6px)}
.ticket::after{bottom:-6px;
  background-image:radial-gradient(circle at 7px 0,var(--tk) 5.5px,transparent 6px)}
.tk-h{display:flex;justify-content:space-between;font-size:10.5px;color:#5A4210;
  letter-spacing:.1em;padding-bottom:6px;border-bottom:1.5px dashed #D9BE7A;margin-bottom:4px}
.tk-r{display:flex;justify-content:space-between;font-size:12px;padding:3.5px 0;color:#5E4712}
.tk-r b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--digits)}
.tk-r.tot b{font-size:13.5px}

/* ---------- nav ---------- */
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  height:calc(66px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;
  justify-content:space-around;background:var(--paper);border-top:1px solid #F0E1E6;
  padding:0 4px calc(2px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(120,80,95,.06)}
.nb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;
  color:var(--ink3);letter-spacing:.06em;width:72px;padding:5px 0;border-radius:12px;
  background:none;border:0;font-family:inherit;cursor:pointer}
.nb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nb.on{color:var(--pink-d)}
.nb.on .dot{width:15px;height:3px;border-radius:2px;background:var(--pink-2);margin-top:-1px}
.fab{position:absolute;left:50%;top:-21px;width:50px;height:50px;border-radius:16px;
  background:var(--pink-2);display:grid;place-items:center;border:0;cursor:pointer;
  transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 5px 0 rgba(174,53,86,.28),0 10px 18px rgba(174,53,86,.22)}
.fab:active{transform:translateX(-50%) rotate(-3deg) scale(.94)}
.fab svg{width:22px;height:22px;stroke:#5E1F31;stroke-width:2.6;fill:none;stroke-linecap:round}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(55,50,44,.3);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:430px;z-index:41;
  background:var(--paper);border-radius:22px 22px 0 0;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:92dvh;overflow-y:auto;
  transform:translateX(-50%) translateY(104%);
  transition:transform .26s cubic-bezier(.22,.9,.24,1);
  box-shadow:0 -10px 30px rgba(120,80,95,.18)}
.sheet.on{transform:translateX(-50%) translateY(0)}
.sh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sh-top h3{font-size:14px;letter-spacing:.08em}
.sh-x{width:30px;height:30px;border-radius:50%;border:0;background:#F3E7EB;color:var(--ink2);
  font-size:16px;line-height:1;cursor:pointer;font-family:inherit}

.seg{display:flex;gap:8px;margin:8px 0 4px}
.seg button{flex:1;height:38px;border-radius:12px;border:1.5px solid #EDDCE2;background:var(--paper);
  font-family:inherit;font-size:13px;color:var(--ink2);cursor:pointer;transition:.18s}
.seg button.on{background:var(--pink);border-color:var(--pink-2);color:var(--pink-d);font-weight:700}
.seg button.on.in{background:#DDF2E7;border-color:#B9E4D0;color:#2F7A5A}

.amt-in{display:flex;align-items:baseline;gap:5px;justify-content:center;margin:10px 0 2px;
  padding:0 4px}
.amt-in span{font-size:20px;color:var(--ink2);font-family:var(--digits);flex:none}
.amt-in input{flex:0 1 260px;min-width:0;border:0;background:none;text-align:left;
  font-size:42px;font-weight:700;color:var(--ink);font-family:var(--digits);
  font-variant-numeric:tabular-nums;outline:none;padding:2px 0}
.amt-in input::placeholder{color:#D9C9CF}

.lbl{font-size:11px;color:var(--ink2);letter-spacing:.1em;margin:14px 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:11px;
  border:1.5px solid #EDDCE2;background:var(--paper);font-family:inherit;font-size:12px;
  color:var(--ink2);cursor:pointer}
.chip i{font-style:normal;font-size:14px;line-height:1}
.chip.on{border-color:var(--pink-2);background:var(--pink);color:var(--pink-d);font-weight:700}
.chip.acc{height:32px;font-size:12px}
.text-in{width:100%;height:42px;border-radius:12px;border:1.5px solid #EDDCE2;background:var(--paper);
  padding:0 12px;font-family:inherit;font-size:13px;color:var(--ink);outline:none}
.text-in:focus{border-color:var(--pink-2)}
.text-in::placeholder{color:#C8B8BE}

.save{width:100%;height:50px;border-radius:15px;border:0;margin-top:18px;cursor:pointer;
  background:var(--pink-2);color:#5E1F31;font-family:inherit;font-size:15px;font-weight:700;
  letter-spacing:.06em;box-shadow:0 5px 0 rgba(174,53,86,.25)}
.save:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(174,53,86,.25)}
.save[disabled]{opacity:.5}

/* ---------- setup ---------- */
.setup{margin:18px;background:var(--paper);border-radius:16px;padding:20px 18px;
  border:1px solid #F2E6E9;box-shadow:var(--shadow-2)}
.setup h2{font-size:17px;letter-spacing:.04em;margin-bottom:6px}
.setup p{font-size:12px;color:var(--ink2);line-height:1.7;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;color:var(--ink2);letter-spacing:.08em;margin-bottom:6px}
.field .hint{font-size:10.5px;color:var(--ink3);margin-top:5px;line-height:1.5}

/* ---------- 预算页 ---------- */
.card{margin:12px 16px 0;background:var(--paper);border-radius:16px;padding:14px 15px;
  border:1px solid #F2E6E9;box-shadow:var(--shadow-1)}
.card:last-of-type{margin-bottom:24px}
.card .ck{font-size:11.5px;color:var(--ink2);letter-spacing:.08em}
.card .hint{font-size:10.5px;color:var(--ink3);line-height:1.6;margin-top:9px}
.inrow{display:flex;align-items:center;gap:8px;margin-top:9px}
.inrow input{flex:1;min-width:0;height:38px;border-radius:11px;border:1.5px solid #EDDCE2;
  background:#fff;padding:0 11px;font-family:var(--digits);font-size:15px;color:var(--ink);outline:none}
.inrow input:focus{border-color:var(--pink-2)}
.inrow .unit{font-size:12px;color:var(--ink2);flex:none}
.btnmini{flex:none;height:38px;padding:0 14px;border-radius:11px;border:0;background:var(--pink);
  color:#7E1F3A;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;cursor:pointer}
.btnmini:active{transform:translateY(1px)}
.ch{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
.sum{display:flex;align-items:baseline;justify-content:space-between;
  background:var(--yellow);border-radius:12px;padding:10px 12px}
.sum span{font-size:11.5px;color:var(--yellow-d)}
.sum b{font-family:var(--digits);font-size:21px;color:#5C4310;letter-spacing:-.01em}
.sub2{font-size:10.5px;color:var(--ink3);margin:7px 0 4px;font-family:var(--digits)}
.frow{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 2px;
  border:0;border-bottom:1px dashed var(--line);background:none;font-family:inherit;
  font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.frow:hover{background:#FFFBFD}
.fk{font-size:14px;flex:none}
.fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa{font-family:var(--digits);font-size:14px;font-weight:700;flex:none}
.fa.in{color:#1D6B4A}
.fx{color:#C9B8BE;font-size:14px;flex:none}
.fadd{width:100%;min-height:40px;margin-top:8px;border:1.5px dashed #EFD9E0;border-radius:12px;
  background:none;color:var(--pink-d);font-family:inherit;font-size:12px;letter-spacing:.04em;
  cursor:pointer}
.fadd:active{background:#FFF4F7}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;
  padding:0 13px;border-radius:13px;border:1.5px solid #EDDCE2;background:#fff;
  font-family:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer}
.opt b{font-family:var(--digits);font-size:15px;color:var(--ink2)}
.opt.on{border-color:var(--pink-2);background:var(--pink);color:#6E1B33}
.opt.on b{color:#6E1B33}
.del{width:100%;height:44px;margin-top:10px;border-radius:13px;border:1.5px solid #F1D2DA;
  background:none;color:var(--pink-d);font-family:inherit;font-size:13px;cursor:pointer}

/* ---------- 提醒横幅 ---------- */
.alertcard{margin:12px 16px 0;display:flex;gap:10px;align-items:flex-start;
  background:var(--pink);border-radius:15px;padding:11px 13px;border:1px solid #F7C6D4}
.alertcard .ai{font-size:15px;line-height:1.4;flex:none}
.alertcard b{display:block;font-size:13px;color:#6E1B33;letter-spacing:.02em}
.alertcard span{display:block;font-size:11.5px;color:#7A2A42;line-height:1.6;margin-top:2px}

/* ---------- 我的 ---------- */
.wrow{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:9px;
  padding:0 12px;border-radius:13px;border:1.5px solid #EDDCE2;background:#fff;
  font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.wrow:hover{background:#FFFBFD}
.wrow:active{transform:translateY(1px)}
.wk{font-size:15px;flex:none}
.wn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf{font-size:10.5px;color:var(--ink3);flex:none;letter-spacing:.04em}
.row-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.row-sw>span{font-size:13px}
.sw{width:48px;height:28px;border-radius:16px;border:1.5px solid #E6D2D9;background:#F6EAEE;
  position:relative;cursor:pointer;flex:none;padding:0}
.sw i{position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(120,80,95,.25);transition:.18s}
.sw.on{background:var(--pink-2);border-color:var(--pink-2)}
.sw.on i{left:22px}
.kv{display:flex;align-items:center;justify-content:space-between;padding:7px 0;
  border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--ink2)}
.kv b{font-family:var(--digits);font-size:13px;color:var(--ink)}
.kv:last-of-type{border-bottom:0}

/* ---------- 导入 / 恢复预览 ---------- */
.info{margin-top:6px}
.info>div{display:flex;gap:10px;align-items:baseline;padding:6px 0;
  border-bottom:1px dashed var(--line);font-size:12px;color:var(--ink2)}
.info>div:last-child{border-bottom:0}
.info>div>span{flex:none;width:52px}
.info b{font-weight:400;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.info b.fnm{font-family:inherit;font-size:12px}
.plist{max-height:190px;overflow-y:auto;border-radius:12px;background:#FFFCFD;
  border:1px solid #F4E5EA;padding:2px 10px}
.prow{display:flex;align-items:center;gap:8px;min-height:34px;border-bottom:1px dashed #F1E4E9;
  font-size:12px}
.prow:last-child{border-bottom:0}
.pd{color:var(--ink3);font-family:var(--digits);font-size:11px;flex:none;width:38px}
.pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pa{font-family:var(--digits);font-size:12.5px;font-weight:700;flex:none}
.pa.in{color:#1D6B4A}
.pa.nu{color:var(--ink3);font-weight:400}
.amt.nu{color:var(--ink3);font-weight:400}
.hint{margin-top:10px;line-height:1.7}

/* ---------- 明细 ---------- */
button.row{width:100%;border:0;border-bottom:1px dotted #E7D8DE;background:none;
  font-family:inherit;text-align:left;cursor:pointer}
button.row:last-child{border-bottom:0}
button.row:active{background:#FFF4F7}
.rs-wrap{display:flex;gap:4px;background:#FBE9EF;border-radius:12px;padding:3px}
.rs{height:27px;padding:0 11px;border:0;border-radius:9px;background:none;
  font-family:inherit;font-size:11.5px;color:var(--ink3);cursor:pointer;letter-spacing:.04em}
.rs.on{background:#fff;color:var(--pink-d);font-weight:700;box-shadow:0 1px 3px rgba(150,90,110,.14)}
.dsum{margin:0 16px;padding:14px 14px 12px}
.card.dsum{margin-bottom:0}
.dsumRow{display:flex;gap:8px}
.dsumRow>div{flex:1;min-width:0}
.dsumRow .l{display:block;font-size:10.5px;color:var(--ink3);letter-spacing:.04em}
.dsumRow .v{display:block;font-family:var(--digits);font-size:19px;font-weight:700;
  margin-top:3px;color:var(--ink);letter-spacing:-.01em}
.dsumRow .v.in{color:#1D6B4A}
.fbar{display:flex;gap:7px;margin:13px 16px 2px;flex-wrap:wrap}
.dayblock{margin:11px 16px 0}
.dayh{display:flex;align-items:baseline;justify-content:space-between;
  padding:6px 2px 4px;font-size:11.5px;color:var(--ink3);letter-spacing:.05em}
.dayh .s{font-family:var(--digits);font-size:11px}
.emptyblock{margin-top:14px;padding:28px 0;text-align:center;
  font-size:12.5px;color:var(--ink3);line-height:1.9}
.dayblock:last-of-type{margin-bottom:104px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);background:rgba(55,50,44,.92);color:#fff;
  font-size:12.5px;padding:9px 14px;border-radius:12px;z-index:60;opacity:0;
  pointer-events:none;transition:.22s;max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}