:root{
  --bg:#f5f5f8; --card:#fcfcfd; --ink:#101010; --muted:#6c6c78;
  --line:#ececf0; --brand:#7f56d9; --brand-d:#6941c6; --danger:#e5484d;
  --dep-bg:#e7f8ef; --dep-bd:#3ccb7f; --dep-ink:#1b9c5d;
  --loan-bg:#fdeceb; --loan-bd:#e5484d; --loan-ink:#c4282d;
  --radius:6px; --navh:62px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,"Segoe UI","Noto Sans Malayalam",sans-serif;
  font-size:15px; line-height:1.35; -webkit-text-size-adjust:100%;
}
#app{max-width:540px; margin:0 auto;}
.page{padding:0 12px calc(var(--navh) + 24px);}

h1{font-size:1.4rem; text-align:center; margin:18px 0 8px}
h2{font-size:1.1rem; margin:0}
h3{margin:0 0 8px; font-size:1rem}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; margin-bottom:10px;}

label{display:block; font-size:.78rem; color:var(--muted); margin-bottom:8px}
input{width:100%; margin-top:3px; padding:11px; font-size:1rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:4px; background:#fff;}
input:focus{outline:none; border-color:var(--brand)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.radio{display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--ink); margin-bottom:8px}
.radio input{width:auto; margin:0}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.row{display:flex; gap:8px; align-items:center}

button{font:inherit; cursor:pointer; border:none; border-radius:10px}
.primary{background:var(--brand); color:#fff; padding:12px 16px; font-weight:600}
.primary:active{background:var(--brand-d)}
.primary:disabled{opacity:.45}
.ghost{background:#eef1f4; color:var(--ink); padding:12px 16px}
.big{width:100%; font-size:1.05rem; padding:15px}
.link{background:none; color:var(--brand); padding:5px; font-weight:600}

.iconbtn{background:none; color:inherit; padding:7px; border-radius:9px; display:inline-flex; line-height:0}
.iconbtn.danger{color:var(--danger)}
.ic{width:20px; height:20px}

.setrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.seg{display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.seg button{background:#fff; color:var(--muted); padding:8px 16px; font-weight:600}
.seg button.on{background:var(--brand); color:#fff}

/* ===== AUTH ===== */
.auth{padding:0 14px 30px; min-height:100vh; display:flex; flex-direction:column; justify-content:center}
.auth-logo{width:58px; height:58px; margin:0 auto; border-radius:16px; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:center}
.auth-logo .ic{width:30px; height:30px}
.langflip{display:block; margin:14px auto 0}
.tabs{display:flex; gap:8px; margin:10px 0}
.tabs button{flex:1; padding:11px; background:#eef1f4; color:var(--muted); font-weight:600; border-radius:10px}
.tabs button.active{background:var(--brand); color:#fff}

/* ===== GREETING HEADER ===== */
.greet{position:sticky; top:0; z-index:5; background:var(--bg);
  display:flex; align-items:center; gap:10px; padding:14px 12px 10px;}
.avatar{width:42px; height:42px; flex:none; border-radius:50%; background:var(--brand); color:#fff;
  font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center}
.greet-txt{display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1}
.greet-txt .hi{font-size:.78rem; color:var(--muted)}
.greet-txt .who{font-weight:700; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.greet-actions{display:flex; align-items:center; gap:2px; flex:none}
.langflip-top{flex:none}

.sec-head{display:flex; align-items:center; justify-content:space-between; margin:4px 2px 10px}

/* ===== HERO STAT CARD ===== */
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:#fff; border:none}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px}
.hero-lbl{display:block; font-size:.74rem; opacity:.85}
.hero-num{display:block; font-size:1.7rem; font-weight:700; margin-top:2px}
.hero-num.sm{font-size:1.15rem}
.hero-loan{text-align:right}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.stat{background:rgba(255,255,255,.14); border-radius:12px; padding:9px 10px; display:flex; flex-direction:column; gap:2px}
.stat .s-lbl{font-size:.7rem; opacity:.9}
.stat b{font-size:1rem}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-bottom:2px}
.dot.dep{background:var(--dep-bd)} .dot.loan{background:#ffb4b4}

.monthsel{margin:0 0 8px}

/* ===== CALENDAR ===== */
.cal{display:grid; grid-template-columns:24px repeat(7,1fr); gap:3px; align-items:center}
.cal-head{text-align:center; font-size:.72rem; color:var(--muted); padding:2px 0}
.cal-head.sun{color:var(--danger)}
.wk-no{font-size:.68rem; color:var(--muted); text-align:center}
.cal-day{aspect-ratio:1/1; min-height:36px; background:#f1f4f7; color:var(--ink);
  border-radius:9px; font-size:.9rem; display:flex; align-items:center; justify-content:center}
.cal-day.sun{background:#fcebe9; color:var(--danger); font-weight:600}
.cal-day.sel{background:var(--brand); color:#fff; font-weight:700}
.cal-day.empty{background:transparent; visibility:hidden}

/* ===== WEEK NAV (home) ===== */
.weekbar{display:flex; align-items:center; gap:6px; margin:2px 0 8px}
.weekbar .weeklabel{flex:1; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:11px; font-weight:700; color:var(--ink)}
.navbtn{width:40px; height:40px; flex:none; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--brand); font-size:1.3rem; font-weight:700; line-height:1}
.weekstrip{display:flex; gap:5px; margin-bottom:10px; touch-action:pan-y}
.wday{flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:7px 0;
  display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink)}
.wday .wd-dow{font-size:.62rem; color:var(--muted)}
.wday .wd-num{font-size:1rem; font-weight:700}
.wday.sun .wd-dow,.wday.sun .wd-num{color:var(--danger)}
.wday.today{border-color:var(--brand)}
.wday.sel{background:var(--brand); border-color:var(--brand)}
.wday.sel .wd-dow,.wday.sel .wd-num{color:#fff}

/* date-picker drawer */
.pick-quick{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px}
.pick-quick button{background:#eef1f4; color:var(--ink); border-radius:10px; padding:9px 0; font-size:.74rem; font-weight:600}
.pick-quick button:active{background:var(--brand); color:#fff}
.pick-month{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.pick-month b{font-size:1rem}

/* ===== MEMBER LIST ===== */
.member-list{list-style:none; margin:0; padding:0}
.mname{font-size:.85rem; font-weight:600; margin-bottom:3px}
.member{padding:10px 12px}

.moneyline{display:grid; grid-template-columns:1fr 1fr auto; gap:6px; align-items:end;
  padding:6px 8px; border-radius:10px; border-left:4px solid; margin-top:6px}
.moneyline.dep{background:var(--dep-bg); border-color:var(--dep-bd)}
.moneyline.loan{background:var(--loan-bg); border-color:var(--loan-bd)}
.moneyline .fld label{margin:0 0 2px; font-size:.68rem}
.moneyline input{margin:0; padding:8px; font-size:.95rem; background:#fff}
.moneyline .bal{font-size:.78rem; font-weight:700; white-space:nowrap; padding-bottom:6px}
.dep .bal{color:var(--dep-ink)} .loan .bal{color:var(--loan-ink)}
.blk{grid-column:1/3; font-size:.78rem; color:var(--danger); align-self:center}
.more{padding:4px 5px; font-size:.78rem}

.chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.chip{border-radius:18px; padding:3px 9px; font-size:.74rem; display:inline-flex; align-items:center; gap:5px}
.chip.deposit,.chip.monthly_fee{background:var(--dep-bg); color:var(--dep-ink)}
.chip.loan_repayment,.chip.loan_disburse,.chip.loan_interest{background:var(--loan-bg); color:var(--loan-ink)}
.chip .x{background:none; color:var(--danger); font-size:1rem; padding:0 2px; line-height:1}

/* members tab rows */
.mrow{display:flex; align-items:center; gap:10px}
.minfo{flex:1; min-width:0}
.minfo .mname{margin:0}
.sub{font-size:.78rem}
.mactions{display:flex; gap:2px; flex:none}

/* member avatar (photo or initial) */
.pava{width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden;
  background:#eef1f4; color:var(--brand); font-weight:700;
  display:flex; align-items:center; justify-content:center}
.pava img{width:100%; height:100%; object-fit:cover}
.pava.lg{width:72px; height:72px; font-size:1.6rem}

/* one date card with collapsible member rows */
.entry-card{padding:6px 12px 10px}
.entry-head{display:flex; align-items:center; justify-content:space-between; padding:8px 2px 6px; border-bottom:1px solid var(--line); margin-bottom:4px}
.entry-head h3{margin:0; font-size:1rem}
.prow{padding:10px 0; border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow-main{display:flex; align-items:center; gap:10px}
.pinfo{flex:1; min-width:0}
.pinfo .mname{margin:0}
.entered{font-size:.75rem; color:var(--ink); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.entered b{font-weight:700; color:var(--ink)}
.entered .dep-ink{color:var(--dep-ink)} .entered .loan-ink{color:var(--loan-ink)}
.entered .sep{color:var(--line); margin:0 5px}
.circ{width:30px; height:30px; flex:none; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center}
.circ.add{background:var(--dep-bd)}
.circ.edit{background:var(--brand)}
.circ.open{background:var(--muted)}
.circ .ic{width:17px; height:17px}
.prow-fields{padding-top:6px}

/* expanded inputs: two 3-column groups + a per-member save */
.fld3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:6px}
.fld3 .fld label{font-size:.66rem; margin:0 0 2px}
.fld3.dep .fld label{color:var(--dep-ink)}
.fld3.loan .fld label{color:var(--loan-ink)}
.fld3 input{margin:0; padding:8px; font-size:.95rem}
.save-one{display:block; width:100%; margin:8px 0 2px; padding:11px; border-radius:8px}

/* photo picker in the member sheet */
.photo-pick{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px}
.photo-btn{cursor:pointer}

.muted{color:var(--muted)} .small{font-size:.82rem}
.err{color:var(--danger); margin:6px 0}
.ok-msg{color:var(--dep-ink); margin:6px 0; font-size:.85rem}
.unsaved-note{color:#b8860b; font-weight:600; margin:6px 2px; font-size:.85rem}

/* ===== FAB ===== */
.fab{position:fixed; right:max(16px,calc(50% - 270px + 16px)); bottom:calc(var(--navh) + 16px);
  width:54px; height:54px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(127,86,217,.45); z-index:6}
.fab .ic{width:26px; height:26px}

/* ===== STICKY SAVE (compact, centered) ===== */
.sticky{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--navh) + 12px);
  padding:13px 44px; font-size:1.05rem; box-shadow:0 6px 18px rgba(127,86,217,.4); z-index:6}

/* ===== BOTTOM NAV ===== */
.bottomnav{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:540px; height:var(--navh); background:var(--card);
  border-top:1px solid var(--line); display:flex; z-index:7}
.bottomnav button{flex:1; background:none; color:var(--muted); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; font-size:.66rem; font-weight:600}
.bottomnav button.active{color:var(--brand)}
.bottomnav .ic{width:22px; height:22px}

/* ===== BOTTOM SHEET ===== */
.sheet-mask{position:fixed; inset:0; background:rgba(16,16,16,.4); z-index:10;
  display:flex; align-items:flex-end; justify-content:center}
.sheet{width:100%; max-width:540px; background:var(--card); border-radius:20px 20px 0 0;
  padding:8px 16px 20px; animation:slideup .22s ease}
@keyframes slideup{from{transform:translateY(100%)} to{transform:translateY(0)}}
.grabber{width:40px; height:4px; border-radius:3px; background:var(--line); margin:6px auto 12px}
.sheet h3{margin-bottom:12px}

/* ===== FOLDER VIEW ===== */
.folder-wrap{margin-bottom:8px}
.folder{width:100%; display:flex; align-items:center; gap:10px; padding:14px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; font-weight:600; color:var(--ink)}
.folder.open{border-color:var(--brand)}
.folder .fic{width:24px; height:24px; color:var(--brand); flex:none}
.folder .caret{margin-left:auto; color:var(--muted)}
.months{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:10px 4px 4px}
.mchip{padding:11px 0; background:#eef1f4; color:var(--ink); border-radius:10px; font-size:.84rem; font-weight:600}
.mchip:active{background:var(--brand); color:#fff}

.logout-btn{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--danger); margin-top:6px}

/* ===== REPORT ===== */
.rep-head{display:flex; align-items:center; gap:8px; margin:2px 0 8px}
.rep-head h2{flex:1; text-align:center; font-size:1rem}
.rep-head .ghost{display:inline-flex; align-items:center; gap:5px; padding:8px 12px; flex:none}
.print-title{display:none}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:10px; margin-bottom:14px}
table.rep{border-collapse:collapse; font-size:.78rem; white-space:nowrap; min-width:100%}
table.rep th,table.rep td{border:1px solid var(--line); padding:5px 7px; text-align:right}
table.rep th{background:#f1f4f7; color:var(--muted); font-weight:600; position:sticky; top:0}
table.rep .l{text-align:left; position:sticky; left:0; background:var(--card); z-index:1}
table.rep th.l{z-index:2}
table.dep-tbl th{background:var(--dep-bg); color:var(--dep-ink)}
table.loan-tbl th{background:var(--loan-bg); color:var(--loan-ink)}
table.rep tr.tot td{font-weight:700; background:#f1f4f7; border-top:2px solid var(--ink)}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--navh) + 70px);
  background:#222; color:#fff; padding:9px 16px; border-radius:22px; z-index:9; font-size:.9rem}

@media print{
  .greet,.bottomnav,.no-print,.sticky,.toast,.fab{display:none !important}
  #app{max-width:none}
  .page{padding:0}
  .print-title{display:block; font-size:1.1rem; font-weight:700; text-align:center; margin:6px 0}
  .tbl-wrap{overflow:visible; border:none; border-radius:0}
  table.rep{font-size:9px; width:100%}
  table.rep th,table.rep td{padding:2px 3px}
  table.rep th{position:static}
  table.rep .l{position:static; background:#fff !important}
  h3{margin:8px 0 4px}
  @page{size:landscape; margin:8mm}
}