:root {
  --navy:     #0F2147;
  --blue:     #1D4ED8;
  --blue-lt:  #EFF4FF;
  --green:    #16A34A;
  --green-lt: #DCFCE7;
  --red:      #DC2626;
  --red-lt:   #FEE2E2;
  --bg:       #F2F4F8;
  --card:     #FFFFFF;
  --border:   #E4E7EE;
  --text:     #111827;
  --sub:      #6B7280;
  --sub2:     #9CA3AF;
  --shd:      0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
::-webkit-scrollbar{width:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-tap-highlight-color:transparent;overflow-x:hidden;}

/* SPLASH */
#splash{position:fixed;inset:0;z-index:1000;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:0.4s;}
.sp-icon{width:72px;height:72px;border-radius:20px;background:white;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:sIn .5s cubic-bezier(.34,1.56,.64,1) .15s both;}
.sp-icon svg{width:36px;height:36px;}
#splash h1{font-size:1.45rem;font-weight:800;color:white;letter-spacing:-.02em;animation:fUp .4s ease .35s both;}
#splash p{font-size:.7rem;color:rgba(255,255,255,.38);margin-top:6px;letter-spacing:.18em;text-transform:uppercase;animation:fUp .4s ease .45s both;}
#enterBtn{margin-top:40px;background:var(--blue);color:white;border:none;border-radius:14px;padding:14px 40px;font-family:inherit;font-weight:700;font-size:.875rem;cursor:pointer;animation:fUp .4s ease .58s both;transition:0.2s;}
#enterBtn:active{transform:scale(0.95);opacity:0.8;}
.sp-exit{opacity:0!important;visibility:hidden;transform:translateY(-20px);}

@keyframes sIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* APP LAYOUT */
#app{opacity:0;transition:0.4s;pointer-events:none;}
#app.show{opacity:1;pointer-events:all;}

header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border);padding:10px 16px;}
.hdr{max-width:600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark svg{width:18px;height:18px;}
.t1{font-size:.85rem;font-weight:800;color:var(--navy);line-height:1.1;}
.t2{font-size:.58rem;color:var(--sub2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}

.hdr-r{display:flex;align-items:center;gap:6px;}
.mpill{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:6px 10px;}
#monthSelector{background:transparent;border:none;outline:none;font-family:inherit;font-size:.72rem;font-weight:700;color:var(--text);cursor:pointer;}
.hbtn{width:36px;height:36px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sub);transition:0.15s;}
.hbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hbtn:active,.hbtn.on{background:var(--navy);border-color:var(--navy);color:white;}

main{max-width:600px;margin:0 auto;padding:16px 16px 100px;}

/* SEARCH */
.search-wrap{position:relative;display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0 10px;width:140px;transition:0.2s;}
.search-wrap:focus-within{width:180px;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-lt);}
.search-wrap svg{width:12px;height:12px;stroke:var(--sub2);fill:none;stroke-width:2.5;margin-right:6px;}
#searchMember{width:100%;border:none;outline:none;font-family:inherit;font-size:.7rem;padding:6px 0;background:transparent;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;}
.sc{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shd);}
.sc.main{grid-column:span 3;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:18px 20px;}
.slbl{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--sub2);}
.sc.main .slbl{color:rgba(255,255,255,0.4);}
.sval{font-size:1.4rem;font-weight:800;color:white;letter-spacing:-.02em;}
.ssub{font-size:.85rem;font-weight:700;color:var(--text);}
.sico{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;}
.sico svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2;}

/* PROGRESS */
.prog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shd);margin-bottom:14px;}
.prog-hdr{display:flex;justify-content:space-between;margin-bottom:10px;}
.prog-hdr .lbl{font-size:.65rem;font-weight:700;color:var(--sub);text-transform:uppercase;}
.prog-hdr .cnt{font-size:.75rem;font-weight:700;}
.prog-track{height:8px;background:var(--bg);border-radius:10px;overflow:hidden;}
.prog-fill{height:100%;background:var(--blue);width:0%;transition:0.8s cubic-bezier(.4,0,.2,1);}
.prog-ftr{display:flex;justify-content:space-between;margin-top:8px;font-size:.62rem;font-weight:600;color:var(--sub2);}
.prog-pct{color:var(--blue);font-weight:800;}

/* MEMBER */
.member-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shd);margin-bottom:14px;}
.mrow{display:flex;align-items:center;padding:12px 14px;gap:12px;border-bottom:1px solid var(--border);cursor:pointer;transition:0.1s;}
.mrow:active{background:var(--bg);}
.mrow:last-child{border-bottom:none;}
.mav{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0;}
.mname{flex:1;font-size:.85rem;font-weight:600;}
.mbadge{font-size:.58rem;font-weight:700;padding:4px 8px;border-radius:100px;text-transform:uppercase;}
.mbadge.paid{background:var(--green-lt);color:var(--green);}
.mbadge.unpaid{background:var(--bg);color:var(--sub2);}

/* EXPENSE */
.exp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shd);}
.erow{display:flex;align-items:center;padding:12px 14px;gap:12px;border-bottom:1px solid var(--border);}
.erow:last-child{border-bottom:none;}
.eico{width:34px;height:34px;border-radius:10px;background:var(--red-lt);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.eico svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:2;}
.einfo{flex:1;min-width:0;}
.enote{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.edate{font-size:.6rem;color:var(--sub2);}
.eamt{font-size:.85rem;font-weight:700;color:var(--red);}
.edel{width:28px;height:28px;border-radius:8px;background:var(--bg);border:none;display:flex;align-items:center;justify-content:center;color:var(--sub2);cursor:pointer;}

/* ADMIN */
.adm-bar{display:flex;align-items:center;gap:8px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:10px;padding:8px 12px;margin-bottom:14px;}
.adm-dot{width:6px;height:6px;background:#EA580C;border-radius:50%;animation:blink 1s infinite;}
.adm-bar span{font-size:.65rem;font-weight:700;color:#9A3412;}
.hidden{display:none!important;}
@keyframes blink{50%{opacity:0.3}}

/* UI ELEMENTS */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sec-ttl{font-size:.65rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;}
.add-btn{display:flex;align-items:center;gap:4px;background:var(--blue);color:white;border:none;border-radius:8px;padding:6px 10px;font-family:inherit;font-size:.65rem;font-weight:700;cursor:pointer;}
.divider{height:1px;background:var(--border);margin:20px 0;}
.empty{padding:30px;text-align:center;font-size:.7rem;color:var(--sub2);}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(15,33,71,0.7);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.mbox{background:var(--card);border-radius:24px;padding:24px;width:100%;max-width:450px;animation:mUp 0.3s ease-out;}
@keyframes mUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.mtitle{font-size:.95rem;font-weight:800;margin-bottom:16px;}
.mf{margin-bottom:12px;}
.mf label{display:block;font-size:.6rem;font-weight:700;color:var(--sub);text-transform:uppercase;margin-bottom:6px;}
.mf input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:12px;font-family:inherit;font-size:.85rem;outline:none;}
.mf input:focus{border-color:var(--blue);background:white;}
.macts{display:flex;gap:10px;margin-top:20px;}
.bcnl{flex:1;padding:12px;border-radius:12px;border:none;background:var(--bg);font-weight:700;font-size:.8rem;cursor:pointer;}
.bok{flex:2;padding:12px;border-radius:12px;border:none;background:var(--navy);color:white;font-weight:700;font-size:.8rem;cursor:pointer;}

/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--navy);color:white;padding:10px 20px;border-radius:100px;font-size:.7rem;font-weight:600;opacity:0;transition:0.3s;z-index:9999;box-shadow:0 8px 20px rgba(0,0,0,0.2);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

footer{text-align:center;padding:30px 0;opacity:0.5;}
footer a{font-size:.6rem;color:var(--text);text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:1px;}

/* Avatars */
.av0{background:#EFF4FF;color:#1D4ED8}.av1{background:#F0FDF4;color:#16A34A}
.av2{background:#FFF7ED;color:#EA580C}.av3{background:#FDF4FF;color:#9333EA}
.av4{background:#FFF1F2;color:#E11D48}.av5{background:#F0FDFA;color:#0D9488}