:root{
  --d-bg:#f6f6f7; --d-card:#fff; --d-text:#2b2b2e; --d-sub:#8a8a90; --d-line:#ececee; --d-accent:#4a4a52;
  --bg:#f1f7f4; --card:#fff; --ink:#12382c; --sub:#5f8274; --primary:#0e7a5a;
  --soft:#dcefe7; --line:#e3eee8;
  --pay:#b45309; --pay-soft:#fdf3e3; --pay-line:#f0d9ae;
  --recv:#0e7a5a; --recv-soft:#dcefe7; --recv-line:#b8ddcc;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#e9e9eb;display:flex;justify-content:center;align-items:center;height:100vh;height:100dvh;overflow:hidden;padding:0;}
.phone{width:100%;max-width:400px;background:var(--d-bg);height:100vh;height:100dvh;max-height:920px;border-radius:24px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.12);position:relative;}
.screen{display:none;height:100%;flex-direction:column;}
.screen.active{display:flex;}
button,input,select{font-family:inherit;}
button{border:none;background:none;cursor:pointer;}
.hide{display:none!important;}

.d-head{padding:22px 20px 14px;background:var(--d-card);border-bottom:1px solid var(--d-line);flex-shrink:0;}
.d-head h1{font-size:20px;font-weight:600;color:var(--d-text);}
.d-head .date{font-size:13px;color:var(--d-sub);margin-top:2px;}
.d-body{padding:16px;flex:1;overflow-y:auto;}
.d-section{font-size:12px;font-weight:600;color:var(--d-sub);text-transform:uppercase;letter-spacing:.06em;margin:10px 4px 8px;}
.task{background:var(--d-card);border:1px solid var(--d-line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;width:100%;text-align:left;}
.task .box{width:20px;height:20px;border:2px solid #c9c9ce;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.task.done .box{background:var(--d-accent);border-color:var(--d-accent);}
.task.done .t-label{text-decoration:line-through;color:var(--d-sub);}
.t-label{font-size:15px;color:var(--d-text);}
.t-sub{font-size:12px;color:var(--d-sub);margin-top:2px;}
.chev{margin-left:auto;color:#c2c2c7;font-size:16px;}
.d-fab{position:absolute;bottom:24px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--d-accent);color:#fff;font-size:26px;box-shadow:0 4px 12px rgba(0,0,0,.18);}
.dback{font-size:14px;color:var(--d-sub);margin-bottom:6px;display:inline-block;}
.detail-card{background:var(--d-card);border:1px solid var(--d-line);border-radius:14px;padding:18px;margin-top:8px;}
.detail-card h2{font-size:17px;color:var(--d-text);font-weight:600;}
.meta-chip{display:inline-block;background:var(--d-bg);border:1px solid var(--d-line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--d-sub);margin-top:12px;user-select:none;}
.note-lines div{height:1px;background:var(--d-line);margin:22px 0;}
.d-additem{margin-top:6px;font-size:13px;color:var(--d-sub);font-weight:600;padding:8px 4px;}
.task .t-main{display:flex;flex-direction:column;flex:1;min-width:0;}
.task .t-label{word-break:break-word;}
.task-edit{margin-left:auto;color:#c2c2c7;font-size:15px;padding:2px 6px;flex-shrink:0;}

.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 26px;background:var(--d-card);}
.login h2{font-size:19px;color:var(--d-text);font-weight:600;margin-bottom:5px;}
.login p{font-size:13px;color:var(--d-sub);margin-bottom:22px;line-height:1.5;}
.lseg{display:flex;background:var(--d-bg);border-radius:11px;padding:3px;margin-bottom:20px;}
.lseg button{flex:1;padding:9px;border-radius:9px;font-size:13px;font-weight:650;color:var(--d-sub);}
.lseg button.sel{background:var(--d-card);color:var(--d-text);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.lin{width:100%;padding:13px 15px;border:1px solid var(--d-line);border-radius:12px;font-size:15px;color:var(--d-text);outline:none;background:var(--d-bg);margin-bottom:11px;}
.lin:focus{border-color:var(--d-accent);}
.lbtn{width:100%;padding:14px;border-radius:12px;background:var(--d-accent);color:#fff;font-size:15px;font-weight:650;}
.lsub{font-size:12px;color:var(--d-sub);text-align:center;margin-top:14px;line-height:1.5;}
.lsub b{color:var(--d-text);}
.shake{animation:shk .3s;}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pin-title{font-size:14px;color:var(--d-sub);}
.dots{display:flex;gap:14px;margin-bottom:26px;}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid #c9c9ce;}
.dot.fill{background:var(--d-accent);border-color:var(--d-accent);}
.pad{display:grid;grid-template-columns:repeat(3,66px);gap:11px;}
.key{width:66px;height:66px;border-radius:50%;background:var(--d-bg);font-size:20px;color:var(--d-text);font-weight:500;}
.key.ghost{background:transparent;font-size:13px;color:var(--d-sub);}
.ring-note{text-align:center;padding:20px 10px;}
.pair-title{font-size:14px;color:var(--d-sub);margin-bottom:12px;}
.pair-code{font-size:34px;font-weight:750;letter-spacing:.18em;color:var(--d-text);font-variant-numeric:tabular-nums;}

.e{background:var(--bg);}
.head{padding:18px 16px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.leaf{width:38px;height:38px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;user-select:none;}
.head h1{font-size:18px;font-weight:650;color:var(--ink);}
.back{font-size:22px;color:var(--sub);padding:4px 8px;}
.icon-btn{width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--primary);font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.whoami{margin-left:auto;font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:6px 9px;background:var(--card);outline:none;max-width:150px;}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;}
.empty .ring{width:74px;height:74px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:18px;}
.empty h2{font-size:17px;color:var(--ink);font-weight:600;margin-bottom:6px;}
.empty p{font-size:13.5px;color:var(--sub);line-height:1.5;}

.search{margin:0 16px 10px;flex-shrink:0;}
.search input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;color:var(--ink);outline:none;}
.list{flex:1;min-height:0;overflow-y:auto;padding:0 16px 20px;}

.v-card{width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:9px;text-align:left;display:block;}
.v-top{display:flex;align-items:center;gap:11px;}
.v-avatar{width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--primary);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.v-name{font-size:15px;font-weight:650;color:var(--ink);}
.v-access{font-size:11px;color:var(--sub);margin-top:2px;}
.v-bals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:12px;}
.bal{border-radius:11px;padding:8px 9px;}
.bal .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;opacity:.75;}
.bal .val{font-size:13px;font-weight:750;margin-top:3px;white-space:nowrap;}
.bal .dir{font-size:9.5px;font-weight:600;margin-top:2px;opacity:.8;}
.bal.pay{background:var(--pay-soft);color:var(--pay);}
.bal.recv{background:var(--recv-soft);color:var(--recv);}
.bal.zero{background:var(--bg);color:var(--sub);}
.bals-lg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:4px 16px 10px;flex-shrink:0;}
.bals-lg .bal{padding:10px 11px;}
.bals-lg .bal .lbl{font-size:10px;}
.bals-lg .bal .val{font-size:14.5px;}

.bar{display:flex;align-items:center;padding:0 16px 8px;gap:7px;flex-shrink:0;}
.bar .ttl{font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.05em;}
.dayf{margin-left:auto;font-size:11.5px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:var(--card);outline:none;}
.clearf{font-size:11.5px;color:var(--primary);font-weight:650;padding:6px 3px;}
.add{background:var(--primary);color:#fff;font-size:12.5px;font-weight:650;padding:9px 13px;border-radius:999px;}

.day{font-size:11px;font-weight:700;color:var(--sub);margin:12px 4px 7px;text-transform:uppercase;letter-spacing:.05em;}
.entry{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:8px;width:100%;text-align:left;display:block;}
.e-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cat{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--primary);text-transform:uppercase;letter-spacing:.03em;}
.cat.money{background:#e8eef9;color:#3556a8;}
.cat.conv{background:#f2e9f9;color:#7a3aa8;}
.e-effect{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
.fx{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;}
.e-desc{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.45;}
.e-meta{font-size:10.5px;color:var(--sub);margin-top:6px;}
.edited{background:var(--soft);color:var(--primary);border-radius:6px;padding:2px 7px;font-weight:650;}

.sum-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:9px;}
.sum-card h3{font-size:12px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:11px;}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sum-tile{border-radius:12px;padding:11px;}
.sum-tile .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.8;}
.sum-tile .v{font-size:16px;font-weight:750;margin-top:4px;}
.sum-tile.pay{background:var(--pay-soft);color:var(--pay);}
.sum-tile.recv{background:var(--recv-soft);color:var(--recv);}
.sum-tile.plain{background:var(--bg);color:var(--ink);}
.sum-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line);}
.sum-row:last-child{border:none;}
.sum-row .r{color:var(--sub);font-size:12.5px;font-weight:650;}

.cp-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:8px;display:flex;align-items:center;gap:11px;}
.cp-row .nm{font-size:14.5px;font-weight:650;color:var(--ink);}
.cp-row .mt{font-size:11px;color:var(--sub);margin-top:2px;}
.cp-edit{margin-left:auto;font-size:12px;font-weight:650;color:var(--primary);background:var(--soft);padding:8px 13px;border-radius:999px;}

.log-row{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:7px;}
.log-row.flag{background:var(--pay-soft);border-color:var(--pay-line);}
.log-top{display:flex;align-items:center;gap:8px;}
.log-who{font-size:13.5px;font-weight:700;color:var(--ink);}
.log-when{margin-left:auto;font-size:11px;color:var(--sub);white-space:nowrap;}
.log-what{font-size:12.5px;color:var(--ink);margin-top:5px;line-height:1.45;}
.log-meta{font-size:10.5px;color:var(--sub);margin-top:5px;}
.log-row.flag .log-what,.log-row.flag .log-meta,.log-row.flag .log-who{color:var(--pay);}
.pill{font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:999px;background:var(--soft);color:var(--primary);text-transform:uppercase;letter-spacing:.03em;}
.pill.bad{background:var(--pay-soft);color:var(--pay);}
.pill.role{background:#eef4f0;color:var(--sub);}
.loghdr{font-size:11.5px;color:var(--sub);padding:0 4px 8px;font-weight:650;}
.chainbtn{width:100%;padding:11px;border-radius:12px;background:var(--soft);color:var(--primary);font-size:13px;font-weight:650;margin-bottom:10px;}
.mem-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:8px;}
.mem-top{display:flex;align-items:center;gap:10px;}
.mem-nm{font-size:14.5px;font-weight:650;color:var(--ink);}
.mem-mt{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.5;}
.mem-acts{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}
.mem-btn{font-size:11.5px;font-weight:650;color:var(--primary);background:var(--soft);padding:7px 11px;border-radius:999px;}
.mem-btn.warn{color:var(--pay);background:var(--pay-soft);}
.sec-h{font-size:11.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin:14px 4px 8px;}
.addmem{width:100%;padding:12px;border-radius:12px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:650;margin-bottom:10px;}

/* Absolutely pinned to the bottom of the phone frame — never moves with content. */
.nav{display:flex;border-top:1px solid var(--line);background:var(--card);padding:6px 0 8px;
  position:absolute;left:0;right:0;bottom:0;z-index:4;}
/* Give the main-screen scroll areas clearance so their last rows aren't hidden
   behind the pinned nav. */
#s-main .list{padding-bottom:72px;}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:650;color:var(--sub);padding:5px 0;}
.nav button.sel{color:var(--primary);}
.nav .ic{font-size:18px;line-height:1;}

.scrim{position:absolute;inset:0;background:rgba(18,56,44,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5;}
.scrim.on{opacity:1;pointer-events:auto;}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .25s ease;z-index:6;max-height:88%;display:flex;flex-direction:column;}
.sheet.on{transform:translateY(0);}
.sh-head{padding:16px 18px 10px;font-size:16px;font-weight:650;color:var(--ink);flex-shrink:0;}
.sh-body{overflow-y:auto;padding:0 18px 8px;}
.sh-foot{flex-shrink:0;padding:10px 18px 16px;background:var(--card);border-top:1px solid var(--line);}
.save{width:100%;padding:13px;border-radius:14px;background:var(--primary);color:#fff;font-size:15px;font-weight:650;}
.types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.tchip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fbfdfc;font-size:12px;font-weight:600;color:var(--ink);}
.tchip.sel{background:var(--primary);border-color:var(--primary);color:#fff;}
.tchip:disabled{opacity:.35;}
.fld{margin-bottom:10px;}
.fld label{display:block;font-size:11.5px;font-weight:650;color:var(--sub);margin-bottom:4px;}
.fld input,.fld select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;font-size:15px;color:var(--ink);outline:none;background:#fbfdfc;}
.fld input:focus{border-color:var(--primary);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.ob{display:grid;grid-template-columns:1.15fr 1fr;gap:8px;margin-bottom:9px;align-items:end;}
.ob-h{display:block;font-size:11.5px;font-weight:650;color:var(--sub);margin:12px 0 6px;}
.ob-l{font-size:11.5px;font-weight:650;color:var(--sub);display:block;margin-bottom:4px;}
.ob-i{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;font-size:15px;background:#fbfdfc;outline:none;color:var(--ink);}
.dirsel{padding:10px 8px;border-radius:11px;font-size:13px;font-weight:650;outline:none;border:1.5px solid var(--line);}
.dirsel.recv{background:var(--recv-soft);color:var(--recv);border-color:var(--recv-line);}
.dirsel.pay{background:var(--pay-soft);color:var(--pay);border-color:var(--pay-line);}
.seg{display:flex;background:#eef4f0;border-radius:10px;padding:3px;margin-bottom:10px;}
.seg button{flex:1;padding:8px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--sub);}
.seg button.sel{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.calc{background:var(--soft);border-radius:11px;padding:10px 13px;font-size:12.5px;color:var(--primary);font-weight:650;margin-bottom:10px;min-height:38px;display:flex;align-items:center;line-height:1.4;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#fbfdfc;font-size:12.5px;color:var(--ink);}
.chip.sel{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}
.hint{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.4;}
.log-title{font-size:11.5px;font-weight:700;color:var(--sub);margin:12px 0 7px;text-transform:uppercase;}
.log-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:7px;font-size:12.5px;color:var(--ink);line-height:1.55;background:#fbfdfc;}
.log-item .who{font-weight:700;}
.log-item .tag{font-weight:700;color:var(--sub);}
.locknote{background:var(--pay-soft);color:var(--pay);border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:10px;line-height:1.5;}

.toast{position:absolute;bottom:20px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#eafff6;font-size:12.5px;padding:10px 16px;border-radius:12px;transition:transform .25s;white-space:nowrap;z-index:8;max-width:90%;text-align:center;}
.toast.on{transform:translateX(-50%) translateY(0);}