:root{--page:#f4f6f5;--surface:#fff;--surface-muted:#f8fafc;--border:#e2e8f0;--border-input:#7c8a9e;--text:#0f172a;--text-muted:#475569;--primary:#065f46;--primary-hover:#064e3b;--primary-soft:#ecfdf5;--focus:#047857;--sidebar:#052e23;--sidebar-text:#d1fae5;--sidebar-muted:#a7c4b8;--sidebar-active:#0b4a38;--sidebar-focus:#6ee7b7;--danger:#b42318;--danger-soft:#fef3f2;--warning:#9a3412;--warning-soft:#fff7ed;--neutral-badge:#374151;--neutral-badge-bg:#f1f5f9;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:16px;--text-xl:20px;--text-2xl:24px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:6px;--radius:8px;--shadow:0 1px 2px #0f172a0f;--control-height:36px;--sidebar-width:240px;--topbar-height:56px;--backdrop:#0f172a73;font-family:var(--font);font-size:var(--text-md);color:var(--text);background:var(--page);line-height:1.5}*{box-sizing:border-box}body{background:var(--page);margin:0}h1,h2,h3{font-weight:600}button{cursor:pointer;font:inherit;color:inherit}input,select,textarea{font:inherit;color:inherit}button:disabled{opacity:.6;cursor:not-allowed}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}main{max-width:1200px;padding:var(--space-6) var(--space-5) 60px;margin:0 auto}main.loading{padding-top:60px}.primary-btn,.secondary-btn,.danger-btn{min-height:var(--control-height);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid #0000;font-weight:500}.primary-btn{background:var(--primary);color:var(--surface)}.primary-btn:hover:not(:disabled){background:var(--primary-hover)}.secondary-btn{background:var(--surface);color:var(--text);border-color:var(--border-input)}.secondary-btn:hover:not(:disabled){background:var(--surface-muted)}.danger-btn{background:var(--danger);color:var(--surface)}.secondary{min-height:28px;padding:0 var(--space-3);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--text-sm);font-weight:500}.secondary:hover:not(:disabled){background:var(--surface-muted)}.field span{font-size:var(--text-sm);margin-bottom:var(--space-1);font-weight:500;display:block}.field input:not([type=checkbox]):not([type=radio]),.field select,.search{width:100%;min-height:var(--control-height);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);padding:0 10px}.field input[type=checkbox],.field input[type=radio]{accent-color:var(--primary)}.form-note{color:var(--text-muted);font-size:var(--text-xs);margin:0}.notice,.error{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);border-left:4px solid;margin:0;font-style:normal;display:block}.notice{background:var(--primary-soft);color:var(--primary)}.error{background:var(--danger-soft);color:var(--danger)}.error.panel-note{margin:var(--space-4)}.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-5);gap:var(--space-4);max-width:520px;display:grid}.form-title{font-size:var(--text-lg);margin:0}.form-actions{justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap;display:flex}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel h2{font-size:var(--text-lg);padding:var(--space-4) 20px;border-bottom:1px solid var(--border);margin:0}.panel-note{padding:var(--space-4) 20px;color:var(--text-muted);font-size:var(--text-sm);margin:0}.title{justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.title h1{font-size:var(--text-2xl);margin:0;line-height:1.25}.title p{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--text-sm)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{padding:10px var(--space-3);border-bottom:1px solid var(--border);text-align:left;font-size:var(--text-sm)}th{font-size:var(--text-xs);color:var(--text-muted);background:var(--surface-muted);font-weight:600}tbody tr:hover{background:var(--surface-muted)}td.amount{white-space:nowrap;font-variant-numeric:tabular-nums}.pill,.status-inactive,.loan{padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);background:var(--primary-soft);color:var(--primary);font-weight:500;display:inline-block}.status-inactive{background:var(--neutral-badge-bg);color:var(--neutral-badge)}.loan{background:var(--warning-soft);color:var(--warning)}.login{background:var(--sidebar);min-height:100vh;padding:var(--space-5) var(--space-4);place-items:center;display:grid}.login-card{background:var(--surface);border-radius:var(--radius);width:min(400px,100%);padding:var(--space-6);gap:var(--space-4);display:grid}.login-card h1{margin:var(--space-2) 0 0;font-size:var(--text-2xl);line-height:1.25}.login-card>p:not(.notice){color:var(--text-muted);font-size:var(--text-sm);margin:0}.login-card .primary-btn{width:100%;margin-top:var(--space-1)}.logo,.brand>b{border-radius:var(--radius);background:var(--primary);width:40px;height:40px;color:var(--surface);flex:none;place-items:center;font-weight:600;display:grid}.app{min-height:100vh}.sidebar{width:var(--sidebar-width);gap:var(--space-5);padding:20px var(--space-3);background:var(--sidebar);color:var(--sidebar-text);flex-direction:column;display:flex;position:fixed;inset:0 auto 0 0;overflow-y:auto}.sidebar :focus-visible{outline-color:var(--sidebar-focus)}.app>main{margin-left:var(--sidebar-width)}.brand{padding:0 var(--space-2);align-items:center;gap:10px;font-weight:600;display:flex}.brand>b{background:var(--sidebar-active);color:var(--sidebar-text)}.brand small,.who small{color:var(--sidebar-muted);font-size:var(--text-xs);font-weight:400;display:block}.sidebar nav{gap:20px;display:grid}.nav-group{gap:2px;display:grid}.nav-group p{margin:0 0 var(--space-1);padding:0 var(--space-3);color:var(--sidebar-muted);font-size:var(--text-xs);font-weight:600}.sidebar nav button,.sidebar-foot button{min-height:var(--control-height);padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--sidebar-text);text-align:left;white-space:nowrap;background:0 0;border:0;border-left:3px solid #0000}.sidebar nav button:hover,.sidebar-foot button:hover{background:var(--sidebar-active)}.sidebar button[aria-current=page]{background:var(--sidebar-active);border-left-color:var(--sidebar-focus);color:var(--surface);font-weight:500}.sidebar-foot{padding-top:var(--space-4);border-top:1px solid var(--sidebar-active);gap:2px;margin-top:auto;display:grid}.who{padding:0 var(--space-3) var(--space-2);font-weight:500}.menu-panel{gap:var(--space-5);flex-direction:column;flex:1;display:flex}.menu-toggle,.menu-backdrop{display:none}@media (width<=899px){.sidebar{z-index:20;width:auto;height:var(--topbar-height);justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);flex-direction:row;position:sticky;top:0;overflow:visible}.brand{padding:0}.menu-toggle{align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-3);border:1px solid var(--sidebar-active);border-radius:var(--radius-sm);color:var(--sidebar-text);background:0 0;font-weight:500;display:inline-flex}.menu-toggle[aria-expanded=true]{background:var(--sidebar-active)}.menu-icon{background:linear-gradient(currentColor,currentColor) 50%/100% 2px no-repeat;border-top:2px solid;border-bottom:2px solid;width:16px;height:12px}.menu-panel{top:var(--topbar-height);z-index:30;width:min(280px,85vw);padding:var(--space-4) var(--space-3);background:var(--sidebar);overscroll-behavior:contain;visibility:hidden;transition:transform .2s,visibility .2s;position:fixed;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}.menu-open .menu-panel{visibility:visible;transform:none}.menu-backdrop{inset:var(--topbar-height) 0 0 0;z-index:15;background:var(--backdrop);border:0;padding:0;display:block;position:fixed}.app>main{padding:var(--space-5) var(--space-4) 60px;margin-left:0}}@media (prefers-reduced-motion:reduce){.menu-panel{transition:none}}.member-form{max-width:720px;margin-bottom:var(--space-5)}.member-form-fields{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.panel-head{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.panel .panel-head h2{border-bottom:0;padding:0}.member-toolbar{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.member-toolbar .search{width:280px}.filters{gap:var(--space-1);background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius);padding:3px;display:flex}.filters button{min-height:28px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-sm);background:0 0;border:1px solid #0000;font-weight:500}.filters button.filter-active{background:var(--surface);border-color:var(--border);color:var(--primary);font-weight:600}.members-list .member-id,.members-list .phone{font-variant-numeric:tabular-nums;white-space:nowrap}.members-list .row-action{text-align:right}@media (width<=600px){.member-form-fields{grid-template-columns:1fr}.member-toolbar,.member-toolbar .search{width:100%}}.back{margin-bottom:var(--space-3)}.badges{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.title-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.detail-panel{margin-bottom:var(--space-4)}.profile{gap:var(--space-1) var(--space-5);padding:var(--space-4) 20px;font-size:var(--text-sm);grid-template-rows:auto auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column;margin:0;display:grid}.profile dt{color:var(--text-muted);font-size:var(--text-xs);font-weight:600}.profile dd{overflow-wrap:anywhere;margin:0}.balance-summary{gap:var(--space-3);padding:var(--space-4) 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.balance-summary>div{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3) var(--space-4);flex:220px}.balance-summary span{color:var(--text-muted);font-size:var(--text-sm);display:block}.balance-summary b{margin-top:var(--space-1);font-size:var(--text-xl);color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.3;display:block}.balances .amount,.loans .amount,.payments .amount,.payoff-lines .amount{text-align:right}.loans td:first-child,.payments td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}@media (width<=600px){.profile{gap:var(--space-2) var(--space-4);grid-template-rows:none;grid-template-columns:max-content 1fr;grid-auto-flow:row}.profile dt{font-size:var(--text-sm)}}.payment-form,.loan-form,.expense-form,.expense-delete{margin-bottom:var(--space-5)}.payment-form fieldset,.loan-form fieldset,.expense-form fieldset{gap:var(--space-4);border:0;min-width:0;margin:0;padding:0;display:grid}.payment-form,.loan-form{max-width:720px}.payment-form fieldset{grid-template-columns:repeat(3,minmax(0,1fr))}.loan-form fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-form .breakdown-box,.payment-form .sms-toggle,.loan-form .form-note{grid-column:1/-1}.breakdown-box{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);background:var(--surface-muted)}.breakdown-head{justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.breakdown-match{color:var(--primary)}.breakdown-off{color:var(--warning)}.breakdown-row{grid-template-columns:1fr 160px var(--control-height);gap:var(--space-2);margin-bottom:var(--space-2);display:grid}.breakdown-row select,.breakdown-row input{min-width:0;min-height:var(--control-height);border:1px solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);padding:0 10px}.remove-line{background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-sm);border:0;grid-column:3;font-size:18px}.add-line{background:var(--primary-soft);color:var(--primary);min-height:28px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:0;font-weight:500}.sms-toggle{align-items:center;gap:var(--space-2);font-size:var(--text-sm);display:flex}.sms-toggle input{accent-color:var(--primary)}@media (width<=600px){.payment-form fieldset,.loan-form fieldset{grid-template-columns:1fr}.breakdown-row{grid-template-columns:1fr 110px var(--control-height)}}.expense-form{max-width:720px}.expense-form fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.expense-form .field-wide{grid-column:1/-1}.expense-filters{align-items:flex-end;gap:var(--space-3);max-width:none;padding:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.expense-filters .field{width:180px}.expense-filters .form-actions{margin-left:auto}.expense-filters .error{flex-basis:100%;order:1}.expense-total{align-items:baseline;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);flex-wrap:wrap;display:flex}.expense-total b{color:var(--text);font-size:var(--text-xl);font-variant-numeric:tabular-nums;font-weight:600}.expense-month{margin:var(--space-4) 20px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.expense-month h3{padding:10px var(--space-3);font-size:var(--text-md);background:var(--surface-muted);border-bottom:1px solid var(--border);margin:0;font-weight:600}.expenses .amount,.expenses .row-actions{text-align:right}.expenses td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}@media (width<=600px){.expense-form fieldset{grid-template-columns:1fr}.expense-filters .field,.expense-filters .form-actions{width:100%}.expense-month{margin:var(--space-3)}}.row-actions{white-space:nowrap}.row-actions .secondary+.secondary{margin-left:var(--space-2)}.payoff-bar{margin-top:var(--space-2);justify-content:flex-end;display:flex}.payoff-confirm{max-width:620px;margin-left:auto}.payoff-total{justify-content:space-between;align-items:baseline;gap:var(--space-2);background:var(--primary-soft);border-radius:var(--radius);padding:var(--space-3) var(--space-4);color:var(--text-muted);font-size:var(--text-sm);display:flex}.payoff-total b{color:var(--primary);font-size:var(--text-xl);font-variant-numeric:tabular-nums}.staff-form{max-width:720px;margin-bottom:var(--space-5)}.staff-form fieldset{gap:var(--space-4);border:0;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;margin:0;padding:0;display:grid}.staff-form .panel-note{padding:0}.permission-grid{gap:var(--space-2) var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius);grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.permission-grid>b{font-size:var(--text-sm);grid-column:1/-1;font-weight:600}.permission-grid label{align-items:center;gap:var(--space-2);min-height:24px;font-size:var(--text-sm);display:flex}.permission-grid input{accent-color:var(--primary)}.staff .row-actions{text-align:right}@media (width<=600px){.staff-form fieldset{grid-template-columns:1fr}.permission-grid{grid-template-columns:1fr 1fr}}.audit-detail{font-size:var(--text-xs);overflow-wrap:anywhere}.audit td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}.audit-paging{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-4) 20px;font-size:var(--text-sm);color:var(--text-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;display:flex}.audit-paging div{gap:var(--space-2);display:flex}.report-filters,.export-filters,.audit-filters{align-items:flex-end;gap:var(--space-3);max-width:none;padding:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.report-filters .field,.export-filters .field,.audit-filters .field{width:180px}.report-filters .form-actions,.export-filters .form-actions,.audit-filters .form-actions{margin-left:auto}.report-filters .error{flex-basis:100%;order:1}.audit-filters .field{width:220px}.report-range{margin-bottom:var(--space-3)}.category-report .amount{text-align:right}.export-kinds{gap:var(--space-2) var(--space-3);padding:var(--space-4);margin-bottom:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.export-kinds>b{font-size:var(--text-lg);grid-column:1/-1;font-weight:600}.export-kinds label,.export-format label{align-items:center;gap:var(--space-2);min-height:24px;font-size:var(--text-sm);display:flex}.export-kinds input,.export-format input{accent-color:var(--primary)}.export-filters .export-format{align-items:center;column-gap:var(--space-4);width:auto;min-height:var(--control-height);flex-wrap:wrap;display:flex}.export-format>span{flex-basis:100%}@media (width<=600px){.report-filters .field,.report-filters .form-actions,.export-filters .field,.export-filters .form-actions,.audit-filters .field,.audit-filters .form-actions{width:100%}}.dashboard-head{align-items:flex-end}.dashboard-filters{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.dashboard-filters .field{width:180px}.dashboard-filters .error{flex-basis:100%}.kpi-group{margin-bottom:var(--space-5)}.kpi-group h2{margin:0 0 var(--space-2);font-size:var(--text-sm);color:var(--text-muted);font-weight:600}.dashboard-head+.form-note{margin-bottom:var(--space-4)}.cards{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}.card span{color:var(--text-muted);font-size:var(--text-sm);display:block}.card b{margin-top:var(--space-1);font-size:var(--text-xl);color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.3;display:block}.recent-expenses .amount{text-align:right}@media (width<=600px){.dashboard-filters,.dashboard-filters .field{width:100%}}.category-report tfoot td{color:var(--primary);background:var(--primary-soft);border-bottom:none;font-weight:600}.field select,.breakdown-row select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);background-position:right 16px center,right 11px center;background-repeat:no-repeat;background-size:5px 5px;padding-right:32px}.field input[type=date],.field input[type=month]{appearance:none;text-align:left;min-width:0;max-width:100%;height:var(--control-height);line-height:calc(var(--control-height) - 2px);display:block}.field input[type=date]::-webkit-date-and-time-value{text-align:left}.field input[type=month]::-webkit-date-and-time-value{text-align:left}