
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --black:#000;--white:#fff;
  --red:#CC1B12;--red-bg:#FFF0EF;
  --green:#1A7A3A;--green-bg:#EDFBF2;
  --gray:#888;--gray-bg:#f4f4f4;--border:#e8e8e8;
  --font:'Space Grotesk',sans-serif;
}
html,body{height:100%;background:#e5e5e5}
body{font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* APP WRAPPER */
.app{width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:var(--white);position:relative}

/* HEADER */
.app-header{padding:1.2rem 1.25rem 1rem;border-bottom:2px solid var(--black);background:var(--white)}
.app-brand{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.75rem}
.app-greeting{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:.1rem}
.app-name{font-size:1.45rem;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.app-date{font-size:.75rem;color:var(--gray);margin-top:.2rem}
.page-head{padding:1rem 1.25rem;border-bottom:2px solid var(--black);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.page-title{font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.page-action{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);cursor:pointer;flex-shrink:0}

/* BODY */
.app-body{padding:1rem 1.25rem 72px}

/* FLASH */
.flash{padding:.7rem 1rem;font-size:.78rem;font-weight:700;margin-bottom:.85rem;letter-spacing:.04em}
.flash.ok{background:var(--green-bg);border:1.5px solid var(--green);color:var(--green)}
.flash.err{background:var(--red-bg);border:1.5px solid var(--red);color:var(--red)}

/* BALANCE CARD */
.bal-card{border:2px solid var(--black);margin-bottom:.85rem}
.bal-top{padding:1rem 1.25rem 1.1rem}
.bal-label{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:.4rem}
.bal-amount{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.bal-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--black)}
.bal-col{padding:.8rem 1.25rem}
.bal-col:first-child{border-right:1.5px solid var(--black)}
.bc-lbl{font-size:.57rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;display:flex;align-items:center;gap:.3rem}
.bc-lbl.inc{color:var(--green)}.bc-lbl.exp{color:var(--red)}
.bc-amt{font-size:.92rem;font-weight:700}

/* MINI GRID */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.85rem}
.mini-card{border:2px solid var(--black);background:var(--white);display:flex;flex-direction:column}
.mini-head{padding:.75rem 1rem;border-bottom:1.5px solid var(--black);display:flex;align-items:center;justify-content:space-between}
.mini-title{font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mini-badge{font-size:.58rem;font-weight:700;padding:.1rem .4rem;background:var(--black);color:var(--white)}
.mini-body{padding:.7rem 1rem;flex:1}
.mini-empty{font-size:.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);text-align:center;padding:.4rem 0}
.mini-foot{padding:.6rem 1rem;border-top:1.5px solid var(--black);margin-top:auto}
.mini-lnk{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
.mini-lnk:hover{color:var(--red)}

/* WIDE CARD */
.wide-card{border:2px solid var(--black);margin-bottom:.85rem}
.wide-head{padding:.75rem 1rem;border-bottom:1.5px solid var(--black);display:flex;align-items:center;justify-content:space-between}
.wide-title{font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.wide-body{padding:.75rem 1rem}
.wide-empty{font-size:.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);text-align:center;padding:.6rem;border:1.5px dashed var(--border)}
.wide-foot{padding:.6rem 1rem;border-top:1.5px solid var(--black)}
.wide-lnk{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--black)}
.wide-lnk:hover{color:var(--red)}

/* TRANSACTIONS */
.tx-list{border:2px solid var(--black)}
.tx-item{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border)}
.tx-item:last-child{border-bottom:none}
.tx-cat{font-size:.82rem;font-weight:700}
.tx-date{font-size:.63rem;color:var(--gray);margin-top:.1rem}
.tx-note{font-size:.63rem;color:var(--gray)}
.tx-right{text-align:right;flex-shrink:0}
.tx-amt{font-size:.88rem;font-weight:700;white-space:nowrap}
.tx-amt.inc{color:var(--green)}.tx-amt.exp{color:var(--red)}
.tx-del{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);cursor:pointer;border:none;background:none;font-family:var(--font);margin-top:.3rem;display:block}
.tx-del:hover{color:var(--red)}

/* SECTION */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.sec-label{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sec-lnk{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}

/* FILTER TABS */
.filter-row{display:flex;gap:.5rem;overflow-x:auto;padding:.85rem 1.25rem;border-bottom:1.5px solid var(--black);background:var(--white)}
.filter-row::-webkit-scrollbar{display:none}
.ftab{flex-shrink:0;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.38rem .8rem;border:1.5px solid var(--black);color:var(--black);background:var(--white)}
.ftab:hover,.ftab.active{background:var(--black);color:var(--white)}

/* GOALS */
.goal-item{border:2px solid var(--black);padding:1rem;margin-bottom:.75rem}
.goal-name{font-size:.9rem;font-weight:700;margin-bottom:.25rem}
.goal-sub{font-size:.68rem;color:var(--gray);margin-bottom:.6rem}
.goal-bar{height:5px;background:var(--gray-bg);border:1px solid var(--border);margin-bottom:.35rem}
.goal-fill{height:100%;background:var(--black);transition:.4s}
.goal-meta{display:flex;justify-content:space-between;font-size:.6rem;font-weight:700;color:var(--gray)}
.goal-actions{display:flex;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1.5px solid var(--black)}

/* BILLS */
.bill-item{border:2px solid var(--black);padding:.9rem 1rem;margin-bottom:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.bill-item.overdue{border-color:var(--red)}
.bill-item.paid{opacity:.5}
.bill-name{font-size:.85rem;font-weight:700}
.bill-date{font-size:.63rem;color:var(--gray);margin-top:.15rem}
.bill-recurring{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray)}
.bill-right{text-align:right;flex-shrink:0}
.bill-amt{font-size:.95rem;font-weight:700}
.bill-status{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}
.bill-status.unpaid{color:var(--red)}.bill-status.paid2{color:var(--green)}.bill-status.overdue{color:var(--red)}

/* SPLIT */
.split-item{border:2px solid var(--black);padding:.9rem 1rem;margin-bottom:.75rem;display:block;color:inherit}
.split-item:hover{background:var(--gray-bg)}
.split-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.split-name{font-size:.9rem;font-weight:700}
.split-badge{font-size:.57rem;font-weight:700;padding:.15rem .45rem;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor}
.split-badge.open{color:var(--green)}.split-badge.closed{color:var(--gray)}
.split-meta{font-size:.65rem;color:var(--gray)}
.member-item{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border)}
.member-item:last-child{border-bottom:none}
.member-name{font-size:.83rem;font-weight:700}
.member-sub{font-size:.63rem;color:var(--gray);margin-top:.1rem}
.member-right{text-align:right;flex-shrink:0}
.member-amt{font-size:.83rem;font-weight:700}
.member-paid{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.member-paid.yes{color:var(--green)}.member-paid.no{color:var(--red)}

/* SETTINGS */
.sett-group{border:2px solid var(--black);margin-bottom:.85rem}
.sett-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1.5px solid var(--black)}
.sett-row:last-child{border-bottom:none}
.sett-label{font-size:.8rem;font-weight:700}
.sett-val{font-size:.73rem;color:var(--gray)}
.sett-arr{font-size:1rem;color:var(--gray)}

/* FORMS */
.add-form{display:none;border:2px solid var(--black);background:var(--white);margin-bottom:.85rem}
.add-form.open{display:block}
.form-head{padding:.85rem 1.25rem;border-bottom:1.5px solid var(--black);display:flex;align-items:center;justify-content:space-between}
.form-title{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.form-close{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);cursor:pointer;border:none;background:none;font-family:var(--font)}
.form-close:hover{color:var(--red)}
.form-body{padding:1rem 1.25rem}
.form-group{margin-bottom:.8rem}
.form-label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem}
.form-ctrl{width:100%;padding:.6rem .75rem;border:1.5px solid var(--black);background:var(--white);font-family:var(--font);font-size:.88rem;font-weight:500;outline:none;color:var(--black)}
.form-ctrl:focus{box-shadow:3px 3px 0 var(--black)}
select.form-ctrl{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-hint{font-size:.6rem;color:var(--gray);margin-top:.25rem}

/* BUTTONS */
.btn{display:block;width:100%;padding:.78rem 1rem;border:2px solid var(--black);font-family:var(--font);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:center;transition:.12s}
.btn-black{background:var(--black);color:var(--white)}
.btn-black:hover{background:#1a1a1a}
.btn-outline{background:var(--white);color:var(--black)}
.btn-outline:hover{background:var(--gray-bg)}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{opacity:.88}
.btn-green{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-sm{font-size:.6rem;padding:.38rem .7rem;width:auto;display:inline-block;text-align:center}

/* PAGER */
.pager{display:flex;gap:.4rem;margin-top:.85rem}
.pager a,.pager span{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.38rem .75rem;border:1.5px solid var(--black);color:var(--black)}
.pager a:hover,.pager a.cur{background:var(--black);color:var(--white)}

/* EMPTY */
.empty{text-align:center;padding:2.5rem 1rem}
.empty-txt{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* BOTTOM NAV */
.app-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:grid;grid-template-columns:repeat(6,1fr);border-top:2px solid var(--black);background:var(--white);z-index:50;height:62px}
.nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;text-decoration:none;color:var(--black);border-right:1px solid var(--border);padding:.35rem .2rem;transition:.1s}
.nav-btn:last-child{border-right:none}
.nav-btn svg{width:18px;height:18px;stroke-width:1.75}
.nav-btn span{font-size:.46rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav-btn.active{background:var(--red);color:var(--white)}
.nav-btn:not(.active):hover{background:var(--gray-bg)}

/* MISC */
.row-link{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.8rem}
.row-link:last-child{border-bottom:none}
.cat-badge{display:inline-block;font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.13rem .4rem;margin-top:.15rem}
.cat-badge.income{background:var(--green-bg);color:var(--green)}
.cat-badge.expense{background:var(--red-bg);color:var(--red)}
.divider{border:none;border-top:1.5px solid var(--black);margin:.85rem 0}
