/* Особисте — стиль mono, світла тема. Еталон: mockups/v4-mono.html */
:root{
  --bg:#f2f2f7;--sheet:#fff;--sheet2:#f2f2f7;--line:#ececf0;
  --ink:#000;--mute:#8e8e93;--mute2:#aeaeb2;
  --green:#30d158;--green-ink:#1f9d45;--red:#ff453a;--orange:#ff9f0a;--violet:#8e5cff;--blue:#0a84ff;
  --grad:linear-gradient(135deg,#ff375f,#8e5cff);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--ink);font-family:-apple-system,"SF Pro Display","SF Pro Text",Inter,system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--green-ink)}
.neg-red{color:var(--red)}
.mute{color:var(--mute)}
[hidden]{display:none!important}

/* каркас */
.screen{padding:calc(var(--safe-t) + 10px) 16px calc(100px + var(--safe-b));max-width:560px;margin:0 auto;position:relative}
.glow{position:absolute;left:0;right:0;top:0;height:340px;z-index:-1;opacity:.35;filter:blur(40px);pointer-events:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 14px}
.title{font-size:28px;font-weight:700;letter-spacing:-.01em}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.ib{width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.who{display:flex;background:rgba(0,0,0,.06);border-radius:99px;padding:3px;font-size:12px;font-weight:600}
.who button{padding:6px 12px;border-radius:99px;color:#6b6b70}
.who button.on{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* таб-бар */
.tab{position:fixed;left:0;right:0;bottom:0;height:calc(80px + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid #e5e5ea;display:flex;justify-content:space-around;align-items:flex-start;padding-top:9px;z-index:20}
.tab button{font-size:10px;color:var(--mute2);display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:500;width:64px}
.tab button.on{color:#000}
.tab .ic{font-size:21px;line-height:1}
.tab .fab{width:54px;height:54px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:26px;margin-top:-16px;box-shadow:0 8px 22px rgba(255,55,95,.35);color:#fff;font-weight:300}

/* картки */
.cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -16px 0;padding:2px 16px 4px;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cc{flex:none;width:250px;height:152px;border-radius:18px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:center;color:#fff;text-align:left;transition:transform .15s}
.cc.sel{box-shadow:0 0 0 3px #fff,0 0 0 5px #000}
.cc .nm{font-size:13px;font-weight:600;opacity:.92;display:flex;justify-content:space-between}
.cc .pan{font-size:13px;letter-spacing:.1em;opacity:.8}
.cc .sum{font-size:20px;font-weight:700}
.cc .chip{width:32px;height:24px;border-radius:6px;background:linear-gradient(135deg,#e9d8a6,#b89b5e)}
.cc.all{background:var(--grad)}
.cc.plat{background:linear-gradient(135deg,#f2f2f2 0%,#a9a9ae 45%,#ececec 70%,#8d8d92 100%);color:#1c1c1e}
.cc.blk{background:linear-gradient(135deg,#2b2b2e,#0a0a0a)}
.cc.pko{background:linear-gradient(135deg,#0b3b82,#002457)}
.cc.cash{background:linear-gradient(135deg,#2fb86b,#12783f)}
.bal{text-align:center;margin:12px 0 2px}
.bal .v{font-size:36px;font-weight:700;letter-spacing:-.02em}
.bal .v small{font-size:22px;color:var(--mute)}
.bal .s{font-size:13px;color:var(--mute);margin-top:2px}
.warn{color:var(--orange)}
.acts{display:flex;justify-content:space-around;margin:16px 0}
.act{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:#3a3a3c;font-weight:500;position:relative}
.act i{width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:20px;font-style:normal}
.act b{position:absolute;top:-2px;right:2px;background:var(--orange);color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* лист і стрічка */
.sheet{background:var(--sheet);border-radius:26px;padding:14px 0 8px;margin:0 -16px;box-shadow:0 -2px 16px rgba(0,0,0,.04)}
.sh{display:flex;justify-content:space-between;align-items:center;padding:4px 18px 10px}
.sh b{font-size:17px;font-weight:700}.sh span{font-size:13px;color:var(--mute)}
.mini{display:flex;gap:8px;padding:0 14px 8px}
.mini div{flex:1;background:var(--sheet2);border-radius:16px;padding:11px 12px}
.mini .l{font-size:11px;color:var(--mute)}.mini .v{font-size:17px;font-weight:700;margin-top:3px}
.need{margin:6px 14px 4px;background:#fff4e0;border-radius:16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px;width:calc(100% - 28px);text-align:left}
.need span{color:#c77800;font-weight:600;font-size:13px}
.day{font-size:13px;color:var(--mute);font-weight:600;padding:14px 18px 4px;display:flex;justify-content:space-between}
.op{display:flex;align-items:center;gap:12px;padding:10px 18px;width:100%;text-align:left}
.op:active{background:#f6f6f8}
.ci{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;position:relative;background:#d1d1d6;color:#3a3a3c}
.ci em{position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;border:2px solid #fff;font-size:8px;font-weight:800;font-style:normal;color:#fff;display:flex;align-items:center;justify-content:center}
.op .m{flex:1;min-width:0}
.op .t{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op .d{font-size:13px;color:var(--mute);margin-top:2px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden}
.op .a{text-align:right;font-size:15px;font-weight:600;white-space:nowrap}
.op .a small{display:block;font-size:12px;color:var(--mute);font-weight:400;margin-top:2px}
.tg{font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:#f2f2f7;color:#3a3a3c}
.tg.o{background:rgba(255,159,10,.16);color:#c77800}.tg.g{background:rgba(48,209,88,.16);color:var(--green-ink)}.tg.v{background:#efe8ff;color:#6d3fe0}.tg.b{background:#e5f0ff;color:#0a64d6}
.more{display:block;margin:10px auto 6px;color:var(--blue);font-weight:600;font-size:14px;padding:8px 16px}
.empty{padding:34px 22px;text-align:center;color:var(--mute);font-size:14px;line-height:1.5}

/* групи */
.grp{background:var(--sheet);border-radius:18px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:15px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.kv:last-child{border:none}
.kv>span:first-child{color:var(--mute);flex:none}
.kv b{font-weight:500;display:flex;gap:7px;align-items:center;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gt{font-size:13px;color:var(--mute);font-weight:600;margin:16px 6px 8px}
.sw{width:50px;height:30px;border-radius:99px;background:#e5e5ea;position:relative;flex:none;transition:background .15s}
.sw:after{content:"";position:absolute;left:2px;top:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.sw.on{background:var(--green)}.sw.on:after{left:22px}

/* операція */
.dtop{text-align:center;padding:4px 0 20px}
.dtop .ci{width:72px;height:72px;font-size:34px;margin:6px auto 12px}
.dtop .n{font-size:17px;font-weight:600;padding:0 20px;word-break:break-word}
.dtop .amt{font-size:38px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em}
.dtop .s{font-size:13px;color:var(--mute)}
.note-in{width:100%;border:0;background:transparent;padding:14px 16px;font-size:15px;outline:none}

/* куди пішли */
.mon{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;margin:2px 0 6px}
.mon button{font-size:22px;color:var(--mute);padding:4px 12px}
.donut{position:relative;width:220px;height:220px;margin:6px auto 12px}
.donut .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .c small{font-size:12px;color:var(--mute)}.donut .c b{font-size:24px;font-weight:700;margin:2px 0}.donut .c span{font-size:12px;color:var(--green-ink);font-weight:600}
.cr{display:flex;align-items:center;gap:12px;padding:9px 16px}
.cr .ci{width:38px;height:38px;font-size:17px}
.cr .m{flex:1;min-width:0}.cr .t{font-size:15px;font-weight:500}
.cr .p{height:4px;border-radius:99px;background:#e5e5ea;margin-top:6px;overflow:hidden}.cr .p i{display:block;height:100%;border-radius:99px}
.cr .a{text-align:right;font-size:15px;font-weight:600}.cr .a small{display:block;color:var(--mute);font-weight:400;font-size:12px}
.trio{display:flex;gap:8px;margin-bottom:14px}
.trio div{flex:1;background:#fff;border-radius:16px;padding:11px 12px}
.trio .l{font-size:11px;color:var(--mute)}.trio .v{font-size:16px;font-weight:700;margin-top:3px}

/* розібрати */
.rz{text-align:center;background:var(--sheet);border-radius:22px;padding:18px 14px 16px}
.rz .ci{width:56px;height:56px;font-size:24px;margin:0 auto 10px}
.rz .n{font-size:16px;font-weight:600;word-break:break-word}.rz .amt{font-size:32px;font-weight:700;margin:4px 0 2px}.rz .s{font-size:13px;color:var(--mute)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--sheet);border-radius:16px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;transition:transform .08s}
.tile:active{transform:scale(.96)}
.tile.sel{box-shadow:0 0 0 2px #000 inset}
.tile .ci{width:40px;height:40px;font-size:19px}.tile span{font-size:12px;font-weight:500;line-height:1.2}
.rzb{display:flex;gap:8px;margin-top:4px}
.rzb button{flex:1;text-align:center;background:var(--sheet);border-radius:14px;padding:12px 6px;font-size:13px;font-weight:600;color:var(--blue)}

/* PIN */
.pin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 20px) 24px calc(24px + var(--safe-b));max-width:420px;margin:0 auto}
.logo{width:64px;height:64px;border-radius:20px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.logo i{width:30px;height:30px;border-radius:50%;border:6px solid #fff}
.pin h1{font-size:20px;font-weight:600;margin-bottom:6px;text-align:center}
.pin p{font-size:14px;color:var(--mute);text-align:center;min-height:20px}
.dots{display:flex;gap:18px;margin:26px 0 30px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid #c7c7cc}
.dots i.on{background:#000;border-color:#000}
.dots.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:14px 26px}
.pad button{width:76px;height:76px;border-radius:50%;background:#fff;font-size:28px;font-weight:400;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pad button:active{background:#e5e5ea}
.pad button.nob{background:none;box-shadow:none;font-size:22px}
.code-in{width:100%;border:0;background:#fff;border-radius:14px;padding:16px;font-size:22px;letter-spacing:.2em;text-align:center;text-transform:uppercase;margin:20px 0 12px;outline:none}
.btn{display:block;width:100%;text-align:center;background:#000;color:#fff;font-weight:600;border-radius:14px;padding:15px;font-size:16px}
.btn.grad{background:var(--grad)}
.btn:disabled{opacity:.4}

/* нова витрата */
.amt-in{width:100%;border:0;background:transparent;text-align:center;font-size:44px;font-weight:700;outline:none;padding:6px 0}
.seg{display:flex;background:#e3e3e8;border-radius:12px;padding:3px;font-size:13px;font-weight:600;margin:0 0 12px}
.seg button{flex:1;text-align:center;padding:8px;border-radius:10px;color:var(--mute)}
.seg button.on{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* нижній лист, тост */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:40}
.bsheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:var(--bg);border-radius:24px 24px 0 0;z-index:41;padding:10px 16px calc(20px + var(--safe-b));max-width:560px;margin:0 auto}
.bsheet .grab{width:38px;height:5px;border-radius:3px;background:#c7c7cc;margin:0 auto 12px}
.bsheet h3{font-size:17px;font-weight:700;margin:0 4px 12px}
.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;z-index:60;max-width:90vw;text-align:center}
.soon{text-align:center;padding:60px 26px;color:var(--mute);line-height:1.5}
.soon .big{font-size:46px;margin-bottom:12px}
.soon b{display:block;color:#000;font-size:18px;margin-bottom:6px}

/* борги */
.dsum{background:linear-gradient(135deg,#3a2a7a,#1b1540);color:#fff;border-radius:22px;padding:18px;margin-bottom:14px}
.dsum .l{font-size:12px;color:#c9c2ff}.dsum .v{font-size:30px;font-weight:700;margin:2px 0 10px}
.dsum .r{display:flex;gap:8px}.dsum .r div{flex:1;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 11px;font-size:12px;color:#c9c2ff}
.dsum .r b{display:block;color:#fff;font-size:15px;margin-top:3px}
.debt{padding:13px 16px;border-bottom:1px solid var(--line)}.debt:last-child{border:none}
.debt .h{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:500}
.debt .s{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--mute);margin-top:4px}
.pg{height:4px;background:#e5e5ea;border-radius:99px;margin-top:9px;overflow:hidden}.pg i{display:block;height:100%;border-radius:99px}
.due{color:#c77800}

/* родина */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.split{display:flex;height:10px;border-radius:99px;overflow:hidden;margin-top:10px;gap:2px}
.split i{display:block;height:100%}
.gt .who button{padding:4px 10px}

/* плашки рахунків (замість великих карток) */
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 4px;padding:2px 16px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:#fff;border-radius:14px;padding:8px 12px;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.06);scroll-snap-align:start;min-width:96px}
.chip .nm{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mute);font-weight:500;white-space:nowrap}
.chip b{display:block;font-size:15px;font-weight:700;margin-top:2px;white-space:nowrap}
.chip.sel{background:#000;color:#fff}.chip.sel .nm{color:#c7c7cc}
.chip.all .nm{color:#8e5cff}.chip.all.sel .nm{color:#d9c9ff}
.chip i{width:10px;height:7px;border-radius:2px;flex:none;display:inline-block}
.sw-plat{background:linear-gradient(135deg,#e6e6e8,#9a9aa0)}.sw-blk{background:#1c1c1e;box-shadow:0 0 0 1px #48484a}
.sw-pko{background:#0b3b82}.sw-cash{background:#2fb86b}
.chip-warn{font-size:12px;color:#c77800;margin:2px 4px 0}

/* чеки */
.rhead{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:12px;margin-bottom:12px}
.rhead img{width:78px;height:104px;object-fit:cover;border-radius:10px;background:#eee;flex:none}
.rhead .n{font-size:16px;font-weight:600}.rhead .s{font-size:12px;color:var(--mute);margin-top:2px}
.rhead .amt{font-size:24px;font-weight:700;margin-top:6px}
.it{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.it:last-child{border:none}
.it .nm{min-width:0}.it .cat{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.it b{font-weight:600;white-space:nowrap}

/* покупки */
.addrow{display:flex;gap:6px;padding:6px;align-items:center}
.addrow input{border:0;background:var(--sheet2);border-radius:10px;padding:10px 12px;font-size:15px;outline:none;min-width:0}
.addrow #nt,.addrow #pq{flex:1}.addrow #np{width:70px}
.addrow .plus{width:40px;height:40px;border-radius:12px;background:#000;color:#fff;font-size:20px;flex:none}
.addrow .lock{width:36px;height:40px;font-size:17px;flex:none}
.todo{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.todo:last-child{border:none}
.todo .cb{width:24px;height:24px;border-radius:50%;border:2px solid #c7c7cc;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px}
.todo .cb.on{background:var(--green);border-color:var(--green);color:#000}
.todo .m{flex:1;min-width:0}.todo .t{font-size:15px}.todo .d{font-size:12px;color:var(--mute);margin-top:1px}
.todo.done .t{text-decoration:line-through;color:var(--mute)}
.todo .x{color:#c7c7cc;font-size:14px;padding:6px}
.up{color:var(--red);font-size:12px;font-weight:600}.dn{color:var(--green-ink);font-size:12px;font-weight:600}