:root{--c1:#ff5f6d;--c2:#ffa53d;--grad:linear-gradient(135deg,#ff5f6d 0%,#ff7e5f 45%,#ffa53d 100%);--ink:#2b1a17;--muted:#8a6f69;--bg:#fff6f1;--card:#fff;--line:#f3dcd3;--green:#21c08b;--red:#ff4d6a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;gap:8px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.brand img{border-radius:10px;box-shadow:0 4px 12px #ff5f6d44}
.brand span{color:#2f2f2f}.brand b{color:#ff5f6d}
.mode{position:relative;display:flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 1px 0 var(--line),0 2px 10px #0000000d}
.mode button{position:relative;z-index:1;padding:7px 11px;font-size:13px;font-weight:700;color:var(--muted);border-radius:999px;transition:color .25s}
.mode button.on{color:#fff}
.mode .pill{position:absolute;top:3px;bottom:3px;border-radius:999px;background:var(--grad);transition:left .3s cubic-bezier(.4,1.4,.5,1),width .3s;box-shadow:0 3px 10px #ff5f6d55}
.demo-banner{margin:0 14px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.3px;color:#a3412f;background:#ffe4d8;border:1px dashed #ffb59d;border-radius:10px;padding:5px 8px}
.mode-view{flex:1;display:flex;flex-direction:column;min-height:0}
.subnav{display:flex;gap:6px;padding:10px 14px 4px}
.subnav button{flex:1;padding:8px 6px;border-radius:12px;font-size:14px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px}
.subnav button.on{color:var(--ink);border-color:#ffb59d;background:#fff0e9}
.count{font-size:11px;background:#f4e4de;color:var(--muted);border-radius:999px;padding:1px 7px}
.badge{font-size:11px;background:var(--red);color:#fff;border-radius:999px;padding:1px 7px;min-width:18px;animation:pop .4s}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.view{flex:1;display:flex;flex-direction:column;padding:8px 14px 14px;min-height:0}
.view h2{margin:6px 0 0;font-size:22px}
.muted{color:var(--muted);margin:4px 0 12px;font-size:14px}.small{font-size:12px;text-align:center}
.stats{align-items:center;display:grid;grid-template-columns:.75fr 1.05fr .85fr 1.15fr;gap:6px;background:#fff;border-radius:16px;padding:8px;box-shadow:0 2px 12px #0000000a;border:1px solid var(--line)}
.stats>*{text-align:left;padding:2px 6px;border-radius:10px;min-width:0}
.stats small{display:block;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stats strong{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
.stats .who{background:#fff4ef;color:var(--muted);white-space:nowrap;overflow:hidden;padding:2px 8px}
.stats .who strong{font-size:14px;color:var(--ink);line-height:22px}
.bump{animation:bump .5s}@keyframes bump{40%{transform:scale(1.25);color:var(--c1)}}
.deck{position:relative;flex:1;min-height:340px;margin:10px 0 26px}
.card{position:absolute;inset:0;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #8a3a2a26,0 1px 0 var(--line);touch-action:none;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;will-change:transform;transform-origin:50% 90%}
.card.back1{transform:scale(.95) translateY(14px);filter:brightness(.98)}
.card.back2{transform:scale(.9) translateY(28px);filter:brightness(.96)}
.card.anim{transition:transform .35s cubic-bezier(.2,.8,.3,1.1)}
.card.fly{transition:transform .45s ease-in,opacity .45s ease-in}
.card .photo{position:relative;flex:1 1 52%;min-height:150px;background:#f1e3dc;overflow:hidden}
.card .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#0006);pointer-events:none}
.chip{position:absolute;z-index:2;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:#fffffff0;color:var(--ink);box-shadow:0 2px 6px #0002}
.chip.cat{top:12px;left:12px}.chip.ex{top:12px;right:12px;background:#2b1a17cc;color:#fff;letter-spacing:.4px;text-transform:uppercase;font-size:10px}
.chip.ex.mine{background:#21c08bdd}
.peekbtn{position:absolute;z-index:2;bottom:10px;right:10px;font-size:12px;font-weight:700;background:#0007;color:#fff;border-radius:999px;padding:5px 10px}
.blurnote{position:absolute;z-index:2;bottom:12px;left:12px;font-size:11px;color:#fff;font-weight:600;text-shadow:0 1px 3px #0008}
.card .body{padding:12px 16px 14px;flex:0 0 auto}
.card .amt{font-size:34px;font-weight:900;letter-spacing:-1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.card .who2{font-size:20px;font-weight:800;margin-top:6px}
.card .who2 span{font-weight:500;color:var(--muted)}
.card .due{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:#a3412f;background:#ffe9df;border-radius:8px;padding:3px 8px}
.card .due.soon{background:var(--red);color:#fff}
.card .story{margin:8px 0 0;font-size:15px;color:#4a3530;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stamp{position:absolute;z-index:3;top:34px;font-size:40px;font-weight:900;letter-spacing:3px;padding:2px 14px;border:5px solid;border-radius:12px;opacity:0;pointer-events:none;text-shadow:0 0 1px #fff}
.stamp.yes{left:22px;color:var(--green);border-color:var(--green);transform:rotate(-16deg);background:#ffffffcc}
.stamp.no{right:22px;color:var(--red);border-color:var(--red);transform:rotate(16deg);background:#ffffffcc}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border:2px dashed var(--line);border-radius:22px;background:#fffaf7}
.empty .big{font-size:52px}
.empty h3{margin:8px 0 4px}
.actions{display:flex;justify-content:center;align-items:center;gap:22px;padding:4px 0 6px}
.act{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px #8a3a2a22;transition:transform .15s}
.act:active{transform:scale(.9)}
.act svg{width:30px;height:30px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.act.nope svg{stroke:var(--red)}
.act.yes{width:72px;height:72px;background:var(--grad);box-shadow:0 8px 22px #ff5f6d66}
.act.yes svg .fill{fill:#fff;stroke:none}
.act.yes svg{width:34px;height:34px}
.act.undo{width:46px;height:46px}.act.undo svg{width:20px;height:20px;stroke:#e0a020;stroke-width:2.5}
.act:disabled{opacity:.35}
/* lists */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;overflow:auto}
.item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.item .ico{flex:0 0 44px;height:44px;border-radius:12px;background:#fff0e9;display:grid;place-items:center;font-size:22px}
.item .mid{flex:1;min-width:0}
.item .t{font-weight:800}.item .s{font-size:13px;color:var(--muted)}
.item .r{font-weight:900;font-size:17px;white-space:nowrap}
.item.col{flex-direction:column;align-items:stretch}
.item .line{display:flex;gap:12px;align-items:center}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:8px;padding:2px 7px;background:#f4e4de;color:var(--muted)}
.tag.paid{background:#dcf7ec;color:#11865f}.tag.ex{background:#2b1a1714;color:#5a4540}
.btnrow{display:flex;gap:8px;margin-top:8px}
.btn-sm{flex:1;padding:9px 10px;border-radius:12px;font-weight:700;font-size:14px;background:#fff0e9;color:#b23f2b;border:1px solid #ffcdbb}
.btn-sm.grad{background:var(--grad);color:#fff;border:0}
.btn-sm:disabled{opacity:.6}
.thank{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;position:relative}
.thank.unread{border-color:#ffb59d;box-shadow:0 0 0 3px #ffe4d8}
.thank.unread::before{content:"NEW";position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;color:#fff;background:var(--red);border-radius:6px;padding:2px 6px}
.thank .h{font-weight:800}.thank .s{font-size:12px;color:var(--muted)}
.thank .m{margin:8px 0 0;font-size:15px}
.thank .bigheart{font-size:26px;margin-top:4px;animation:beat 1.2s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}}
.thank img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin-top:8px}
.emptylist{text-align:center;color:var(--muted);padding:30px 10px;border:2px dashed var(--line);border-radius:16px}
/* form */
.form{display:flex;flex-direction:column;gap:10px;overflow:auto}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#5a4540}
.form input,.form textarea,.form select,.sheet input,.sheet textarea{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%;outline:none}
.form input:focus,.form textarea:focus,.form select:focus,.sheet textarea:focus,.sheet input:focus{border-color:#ff9a7b;box-shadow:0 0 0 3px #ffe1d6}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc{float:right;font-weight:500;color:var(--muted)}
.warn{font-size:13px;background:#fff8e1;border:1px solid #ffe08a;color:#6b5200;border-radius:12px;padding:9px 11px}
.billphoto{position:relative;height:150px;border:2px dashed #ffb59d;border-radius:16px;background:#fffaf7;overflow:hidden;cursor:pointer;align-items:center;justify-content:center}
.billphoto input{position:absolute;inset:0;opacity:0;cursor:pointer}
.billphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px)}
.billphoto span{display:flex;flex-direction:column;align-items:center;gap:6px;color:#c0533b;font-weight:700;pointer-events:none}
.billphoto svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2}
.err{color:var(--red);font-weight:700;margin:0;font-size:14px}
.primary{padding:14px;border-radius:14px;background:var(--grad);color:#fff;font-weight:800;font-size:16px;box-shadow:0 6px 18px #ff5f6d55}
.primary.white{background:#fff;color:#e2503c;box-shadow:0 6px 18px #0002;width:100%}
.ghost{padding:14px;border-radius:14px;background:#f4e4de;font-weight:700}
.link{color:#fff;font-weight:700;text-decoration:underline;padding:10px}
/* modals */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.match{background:linear-gradient(160deg,#ff5f6dee,#ff8f4aee 60%,#ffb347ee);backdrop-filter:blur(6px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.match-inner{width:min(360px,88vw);text-align:center;color:#fff;animation:rise .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}}
.match-title{font-size:46px;font-weight:900;font-style:italic;letter-spacing:-1.5px;text-shadow:0 4px 18px #0003;transform:rotate(-4deg)}
.match-hearts{display:flex;align-items:center;justify-content:center;gap:6px;margin:26px 0 18px}
.match-hearts img,.match-hearts .avatar{width:92px;height:92px;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 18px #0003;background:#fff}
.match-hearts img{padding:12px}
.match-hearts .avatar{display:grid;place-items:center;font-size:40px;font-weight:900;color:#e2503c}
.match-hearts span{font-size:38px;animation:beat 1s infinite}
.match-text{font-size:20px;font-weight:700;margin:0 0 6px;line-height:1.3}
.match-demo{font-size:13px;opacity:.9;margin:0 0 22px;font-weight:600}
.sheet-wrap{background:#2b1a1766;align-items:flex-end;animation:fade .2s}
.sheet{width:100%;max-width:480px;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;animation:up .3s cubic-bezier(.2,1,.3,1);max-height:92dvh;overflow:auto}
@keyframes up{from{transform:translateY(100%)}}
.sheet h3{margin:0;font-size:20px}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{padding:7px 11px;border-radius:999px;background:#fff0e9;border:1px solid #ffcdbb;font-size:14px;font-weight:600}
.heart-toggle{display:flex;align-items:center;gap:8px;font-weight:700}
.heart-toggle input{width:20px;height:20px;accent-color:#ff5f6d}
.addphoto{position:relative;padding:10px;border:1.5px dashed #ffb59d;border-radius:12px;text-align:center;font-weight:700;color:#c0533b;cursor:pointer}
.addphoto input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tprev{width:100%;max-height:160px;object-fit:cover;border-radius:12px}
.sheet-btns{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;background:#2b1a17;color:#fff;font-weight:600;padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:0 6px 20px #0004;animation:rise .3s;white-space:nowrap}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media (max-height:780px){.card .story{-webkit-line-clamp:2;font-size:14px}.card .amt{font-size:28px}.card .who2{font-size:18px;margin-top:4px}.deck{min-height:300px;margin:8px 0 22px}.act{width:54px;height:54px}.act.yes{width:62px;height:62px}.act.undo{width:42px;height:42px}.subnav{padding-top:6px}.subnav button{padding:6px}.top{padding-top:8px;padding-bottom:6px}.demo-banner{padding:3px 8px;font-size:11px}.view{padding-top:6px}.actions{padding:0 0 4px}}
@media (max-height:680px){.card .story{-webkit-line-clamp:1}.card .photo{min-height:120px}.deck{min-height:270px}}

.info{width:22px;height:22px;border-radius:50%;border:1.5px solid #e9b8a8;color:#c0533b;font-size:13px;font-weight:800;font-style:italic;font-family:Georgia,serif;display:grid;place-items:center;margin-left:2px}
.admin{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.admin>div{background:#fff0e9;border-radius:14px;padding:10px 12px}
.admin small{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.admin strong{font-size:22px;font-weight:900}
.card .fee{margin-top:4px;font-size:12.5px;color:var(--muted);font-weight:600}
.card .fee b{color:var(--ink)}
.match-total{display:inline-block;background:#fff3;border:1px solid #fff8;border-radius:12px;padding:6px 12px;font-size:14px;font-weight:700;margin:6px 0 4px}

.card .photo .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#f1e3dc}
.card .photo .media.blur{filter:blur(12px) saturate(.9);transform:scale(1.15)}
.thumb{position:absolute;z-index:2;bottom:12px;right:12px;width:58px;height:74px;border-radius:10px;border:2.5px solid #fff;overflow:hidden;box-shadow:0 4px 12px #0005;background:#eee}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.thumb img.blur{filter:blur(3px);transform:scale(1.2)}
.thumb i{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#000a;text-align:center;padding:2px 0;text-transform:uppercase;letter-spacing:.4px}
.sound{position:absolute;z-index:2;top:46px;right:12px;width:36px;height:36px;border-radius:50%;background:#0008;color:#fff;font-size:16px;display:grid;place-items:center}
.dots{position:absolute;z-index:2;top:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.dots b{width:26px;height:3px;border-radius:2px;background:#fff7}.dots b.on{background:#fff}
.tapnote{position:absolute;z-index:2;bottom:14px;left:12px;font-size:11px;color:#fff;font-weight:700;text-shadow:0 1px 3px #000a;max-width:60%}
.lbl{font-size:13px;font-weight:800;color:#5a4540}.lbl .opt{font-weight:500;color:var(--muted)}
.media-block{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}
.media-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.form label.mbtn{position:relative;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:#fff0e9;border:1px solid #ffcdbb;font-size:22px;cursor:pointer}
.mbtn span{font-size:12px;color:#b23f2b}
.mbtn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.story-prev{position:relative;border-radius:12px;overflow:hidden;background:#000;max-height:220px;display:flex;justify-content:center}
.story-prev img,.story-prev video{max-width:100%;max-height:220px;object-fit:contain}
.story-prev button{position:absolute;top:6px;right:6px;background:#000a;color:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.hint{margin:0;font-size:12px;color:var(--muted)}.hint.bad{color:var(--red);font-weight:700}
.billphoto{height:120px}
.media-tag{display:inline-block;font-size:11px;margin-left:4px}