:root{font-family:Inter,Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background:#f8fafc;font-synthesis:none;--ink: #111827;--muted: #64748b;--line: #e2e8f0;--panel: #ffffff;--soft: #f8fafc;--primary: #2563eb;--primary-strong: #1d4ed8;--success: #16a34a;--indigo: #4f46e5;--amber: #f59e0b;--warning: #d97706;--danger: #dc2626;--shadow: 0 16px 40px rgba(15, 23, 42, .08);--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f8fafc;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,input,select,textarea{font:inherit}button{border:1px solid transparent;border-radius:10px;padding:9px 13px;background:#fff;border-color:var(--line);color:var(--ink);cursor:pointer;font-weight:600;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}button:hover{background:#f9fafb;border-color:#cbd5e1}button:active{box-shadow:inset 0 2px 4px #0f172a0f}button:disabled{cursor:not-allowed;opacity:.65;box-shadow:none}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 3px #2563eb1f}.currency-input{font-weight:700;letter-spacing:0}textarea{min-height:92px;resize:vertical}label{display:grid;gap:7px;color:#4b5563;font-size:13px;font-weight:600}table{width:100%;border-collapse:collapse;min-width:1180px}.members-table{min-width:720px}th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{position:sticky;top:0;z-index:1;background:#fff;color:#6b7280;font-size:11px;text-transform:uppercase;letter-spacing:0}td{color:var(--ink);font-size:14px}td span{display:block;color:var(--muted);font-size:12px;margin-top:4px}td>strong,td>span{background:transparent}a{color:var(--primary);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(37,99,235,.1),transparent 30%),radial-gradient(circle at 80% 10%,rgba(79,70,229,.08),transparent 28%),#f8fafc}.login-panel{width:min(430px,100%);display:grid;gap:20px;background:#ffffffeb;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 24px 70px #0f172a1a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.login-panel h1{margin:0 0 10px;font-size:clamp(30px,7vw,42px);line-height:1.05;letter-spacing:0}.login-logo{display:inline-flex;align-items:center;margin-bottom:18px}.logo-mark{width:46px;height:46px;display:inline-grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#2563eb,#0f766e);color:#fff;font-size:22px;font-weight:900;letter-spacing:0;box-shadow:0 14px 28px #2563eb2e}.login-panel .muted{max-width:360px;font-size:15px}.login-panel input{min-height:46px;background:#f9fafb}.login-panel .primary{min-height:46px;margin-top:2px}.eyebrow{margin:0 0 10px;color:var(--primary);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0}.muted{color:var(--muted);margin:0;line-height:1.6}.stack{display:grid;gap:14px}.demo-grid{display:grid;grid-template-columns:1fr;gap:9px;padding-top:2px;border-top:1px solid var(--line)}.demo-grid button{background:transparent;border-color:transparent;color:var(--muted)}.demo-grid button:hover{background:#f9fafb;border-color:var(--line);color:var(--ink)}.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.primary:hover{background:var(--primary-strong);border-color:var(--primary-strong);color:#fff}.app-shell{min-height:100vh;display:grid;grid-template-columns:268px minmax(0,1fr);background:#f8fafc}.app-shell.sidebar-collapsed{grid-template-columns:82px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:#fff;color:#fff;padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:22px;border-right:1px solid var(--line);box-shadow:none}.sidebar.collapsed{padding:14px 10px;gap:14px}.sidebar.collapsed .brand{justify-content:center;padding:8px 0 14px}.sidebar.collapsed .login-as-card,.sidebar.collapsed nav button>span,.sidebar.collapsed .sidebar-menu-toggle span,.sidebar.collapsed .sidebar-foot button:not(.sidebar-menu-toggle){display:none}.sidebar.collapsed nav{gap:8px}.sidebar.collapsed nav button,.sidebar.collapsed .sidebar-menu-toggle{position:relative;width:48px;height:48px;justify-content:center;padding:0;margin-inline:auto}.sidebar.collapsed nav button svg,.sidebar.collapsed .sidebar-menu-toggle svg{width:20px;height:20px}.sidebar.collapsed nav button>small{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);z-index:80;display:none;padding:6px 8px;border-radius:7px;background:#111827;color:#fff;font-size:11px;font-weight:750;white-space:nowrap;box-shadow:0 10px 24px #0f172a38}.sidebar.collapsed nav button:hover>small{display:block}.brand{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 4px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.brand>div{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:100%;justify-content:flex-start}.brand .logo-mark{width:42px;height:42px;border-radius:13px;font-size:20px;flex:0 0 auto}.sidebar-foot span{color:var(--muted);font-size:13px}.sidebar nav{display:grid;align-content:start;gap:4px}.sidebar button{width:100%;text-align:left;background:transparent;color:#4b5563;border-color:transparent;box-shadow:none;border-radius:10px;display:flex;align-items:center;gap:10px}.sidebar button svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}.sidebar button span{min-width:0}.sidebar button>small{display:none}.sidebar button.active,.sidebar button:hover{background:#eff6ff;color:var(--primary);box-shadow:none}.sidebar button.switch-login{margin-top:10px;align-items:flex-start;padding:11px;background:#f8fbff;border-color:#bfdbfe;color:#1d4ed8;box-shadow:inset 0 0 0 1px #2563eb0a}.sidebar button.switch-login svg{margin-top:2px}.sidebar button.switch-login span{display:grid;gap:2px;line-height:1.2}.sidebar button.switch-login strong{color:#1d4ed8;font-size:13px}.sidebar button.switch-login small{color:#64748b;font-size:11px;font-weight:600}.sidebar button.switch-login:hover{background:#eff6ff;border-color:#93c5fd}.sidebar button.mobile-logout{display:none;border-color:#fecaca;background:#fef2f2;color:#b91c1c}.sidebar button.mobile-logout:hover{border-color:#fca5a5;background:#fee2e2;color:#991b1b}.sidebar-foot{display:grid;gap:10px}.login-as-card{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.login-as-card span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.login-as-card strong{min-width:0;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-pill{width:fit-content;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;line-height:1.2}.role-pill.guest{background:#f1f5f9;color:#475569}.role-pill.admin{background:#eff6ff;color:#1d4ed8}.role-pill.super_admin{background:#ecfdf5;color:#047857}.sidebar-foot button{background:#fff;color:#4b5563;border-color:var(--line)}.sidebar-foot .sidebar-menu-toggle{justify-content:center;background:#eff6ff;border-color:#bfdbfe;color:var(--primary)}.sidebar-foot .sidebar-menu-toggle svg{width:16px;height:16px;fill:currentColor}.sidebar-foot .sidebar-menu-toggle:hover{background:#dbeafe;border-color:#93c5fd}.workspace{min-width:0;padding:28px;display:grid;align-content:start;gap:18px}.topbar{display:flex;align-items:end;justify-content:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:none}.menu-toggle{width:fit-content;display:inline-flex;align-items:center;gap:8px;background:#eff6ff;border-color:#bfdbfe;color:var(--primary);flex:0 0 auto}.menu-toggle svg{width:18px;height:18px;fill:currentColor}.topbar h2{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:0}.tabs,.actions,.row-actions,.inline-actions,.batch-admin{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs{padding:5px;background:#f9fafb;border:1px solid var(--line);border-radius:10px}.tabs button{background:transparent;border-color:transparent;box-shadow:none}.tabs button.active,.batch-row button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:none}.content{display:grid;gap:18px}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.summary-grid.compact{grid-template-columns:repeat(2,minmax(0,260px))}.summary-card{position:relative;min-height:112px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:none;overflow:hidden}.summary-card:before{display:none}.summary-card span{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0}.summary-card strong{display:block;margin-top:14px;font-size:clamp(24px,3vw,32px);line-height:1.05;letter-spacing:0}.summary-card.accent-indigo:before{background:var(--indigo)}.summary-card.accent-amber:before{background:var(--amber)}.summary-card.accent-rose:before{background:var(--danger)}.category-block{display:grid;gap:10px}.category-carousel{overflow:hidden}.category-strip{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 3);gap:12px;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:2px;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.category-strip::-webkit-scrollbar{height:6px}.category-strip::-webkit-scrollbar-track{background:transparent}.category-strip::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.category-tile,.data-card{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px;display:flex;gap:13px;align-items:center;box-shadow:none}.category-tile{cursor:pointer;min-height:106px;scroll-snap-align:start;transition:border-color .15s ease,box-shadow .15s ease;background-size:cover;background-position:center}.category-tile:hover{border-color:#bfdbfe;box-shadow:none}.category-tile.selected{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.category-tile.has-image{color:#fff;border-color:transparent}.category-tile.has-image span{color:#ffffffc7}.category-fallback{width:76px;height:76px;border-radius:8px;object-fit:cover;flex:0 0 auto}.category-fallback{display:grid;place-items:center;background:#eff6ff;color:#1d4ed8;font-weight:900}.category-body{min-width:0;flex:1 1 auto;display:grid;gap:10px;align-content:center}.category-copy{min-width:0}.category-tile strong,.data-card strong{display:block;font-size:16px}.category-tile menu{margin:0;padding:0;display:flex;gap:7px;flex-wrap:wrap}.category-tile menu button{box-shadow:none}.mini-action{width:fit-content;padding:6px 10px;border-radius:8px;border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8;font-size:11px;line-height:1.2}.mini-action:hover{background:#dbeafe;border-color:#93c5fd}.mini-danger{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.mini-danger:hover{background:#fee2e2;border-color:#fca5a5}.add-tile{min-height:44px;border:1px dashed #9aaabd;background:#fff;color:#46566b}.empty-panel{grid-column:1 / -1;display:grid;gap:4px;padding:16px;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;color:var(--muted)}.empty-panel strong{color:var(--ink)}.empty-panel span{font-size:13px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:none}.toolbar input{max-width:380px;background:#fff}.batch-row{width:min(100%,900px);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/5);gap:8px;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:2px;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.batch-row::-webkit-scrollbar{height:6px}.batch-row::-webkit-scrollbar-track{background:transparent}.batch-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.table-tools{display:block;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.table-tools input{width:100%;max-width:none}.batch-row button,.batch-row .batch-filter{background:#fff;border-color:var(--line);box-shadow:none;min-width:0;scroll-snap-align:start}.batch-row button small,.batch-row .batch-filter small{display:block;color:inherit;opacity:.72;font-weight:550;margin-top:2px}.batch-row .batch-card{align-items:flex-start;display:grid;gap:3px;min-width:0;text-align:left}.batch-filter{border:1px solid var(--line);border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:600;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.batch-filter:hover{background:#f9fafb;border-color:#cbd5e1}.batch-filter.active{background:var(--primary);border-color:var(--primary);color:#fff}.batch-card-actions{display:flex;gap:8px;margin-top:4px;font-size:12px;flex-wrap:wrap}.batch-admin{background:transparent;padding:0 2px}.batch-admin button{padding:7px 10px;font-size:12px;background:#fff;border-color:var(--line);box-shadow:none}.danger-text{color:var(--danger)}.table-wrap{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}.pagination-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:13px;font-weight:700}.pagination-bar>div{display:flex;align-items:center;gap:8px}.pagination-bar button{padding:7px 11px;font-size:12px}.pagination-bar strong{color:var(--ink)}tbody tr{transition:background .12s ease}tbody tr:hover{background:#fbfdff}.payment-cell{display:grid;gap:7px;min-width:140px}.payment-cell button,.inline-actions button,.row-actions button{padding:7px 10px;font-size:12px;box-shadow:none}.row-actions .action-paid{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}.row-actions .action-paid:disabled{border-color:#d1d5db;background:#f3f4f6;color:#6b7280;opacity:1}.row-actions .action-paid:hover{border-color:#86efac;background:#dcfce7}.row-actions .action-paid:disabled:hover{border-color:#d1d5db;background:#f3f4f6}.lunas-action-wrap{position:relative;display:inline-flex;width:fit-content;cursor:help}.lunas-action-wrap[data-tooltip]:not([data-tooltip=""]):hover:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);z-index:60;width:max-content;max-width:260px;padding:8px 10px;border-radius:8px;background:#111827;color:#fff;font-size:12px;font-weight:700;line-height:1.35;text-align:center;white-space:normal;box-shadow:0 10px 24px #0f172a38}.lunas-action-wrap[data-tooltip]:not([data-tooltip=""]):hover:before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translate(-50%);z-index:61;border:6px solid transparent;border-top-color:#111827}.paid-flag{width:fit-content;border:1px solid #bbf7d0;border-radius:999px;padding:7px 10px;background:#f0fdf4;color:#15803d;font-size:12px;font-weight:850}.member-paid-flag{width:fit-content;margin-top:8px;border:1px solid #bbf7d0;border-radius:999px;padding:4px 8px;background:#f0fdf4;color:#15803d;font-size:11px;font-weight:850}.row-actions .action-edit{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.row-actions .action-edit:hover{border-color:#93c5fd;background:#dbeafe}.row-actions .action-delete{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.row-actions .action-delete:hover{border-color:#fca5a5;background:#fee2e2}.status{width:fit-content;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:850;text-transform:uppercase}.status.pending{background:#fff7ed;color:#c2410c}.status.approved{background:#f0fdf4;color:#15803d}.status.rejected{background:#fef2f2;color:#b91c1c}.has-tooltip{position:relative}.has-tooltip[data-tooltip]:not([data-tooltip=""]):hover:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);z-index:70;width:max-content;max-width:240px;padding:8px 10px;border-radius:8px;background:#111827;color:#fff;font-size:12px;font-weight:750;line-height:1.35;text-align:center;white-space:normal;text-transform:none;box-shadow:0 10px 24px #0f172a38}.has-tooltip[data-tooltip]:not([data-tooltip=""]):hover:before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translate(-50%);z-index:71;border:6px solid transparent;border-top-color:#111827}.payment-empty-state{display:grid;gap:7px;justify-items:start}.payment-stage,.payment-due{width:fit-content;min-width:132px;min-height:34px;display:inline-grid;place-items:center;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:850;line-height:1;text-align:center}.payment-stage{border:1px solid #fde68a;background:#fef3c7;color:#6b4e00}.payment-cell button.payment-stage-action{padding:7px 14px;border-color:#fde68a;background:#fef3c7;color:#6b4e00;box-shadow:none}.payment-cell button.payment-stage-action:hover{background:#fde68a;border-color:#facc15}.settlement-stage,.payment-cell button.settlement-stage-action{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}.payment-cell button.settlement-stage-action:hover{background:#dbeafe;border-color:#93c5fd}.payment-due{border:1px solid #d1d5db;min-height:28px;min-width:0;width:fit-content;padding:4px 9px;background:#f9fafb;color:#6b7280;font-size:11px;font-weight:800}.dp-waived{width:fit-content;border:1px solid #d1d5db;border-radius:999px;padding:5px 10px;background:#f9fafb;color:#64748b;font-size:12px;font-weight:800}.multi-select{position:relative}.multi-select-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:10px 12px;text-align:left;background:#fff;color:var(--ink)}.multi-select-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multi-select-trigger strong{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px}.multi-select-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:25;max-height:280px;overflow:auto;overscroll-behavior:contain;display:grid;gap:4px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow)}.multi-select-option{grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:center;padding:8px;border-radius:8px;cursor:pointer}.multi-select-option:hover{background:#f9fafb}.multi-select-option input{width:auto;grid-row:span 2}.multi-select-option small{grid-column:2;color:var(--muted);font-weight:500}.multi-select-empty{padding:10px;color:var(--muted);font-size:13px}.seed-action{border-color:#bbf7d0;background:#f0fdf4;color:#047857}.seed-action:hover{border-color:#86efac;background:#dcfce7;color:#065f46}.field-note{display:block;margin-top:0;font-size:11px;font-weight:600;line-height:1.4}.field-note.danger{color:var(--danger)}.payment-note{padding:7px 9px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2}.empty{text-align:center;color:var(--muted);padding:18px}.empty strong{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}.empty span{margin:0}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.data-card{justify-content:space-between;align-items:flex-start;min-height:92px}.danger-zone{background:var(--panel);border:1px solid #fecaca;border-radius:14px;padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;box-shadow:none}.danger-zone h3{flex-basis:100%;margin:0}.danger-zone .muted{flex-basis:100%}.danger-zone button{background:#fef2f2;color:#b91c1c;border-color:#fecaca}.confirm-input{min-width:min(360px,100%)}.database-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:18px;align-items:start;padding:20px;border:1px solid #fecaca;border-radius:14px;background:#fff}.database-copy h3{margin:0 0 8px;font-size:22px}.database-list{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}.database-list span{color:#4b5563;font-size:13px}.database-panel .confirm-input{grid-column:1 / -1}.danger-action{width:fit-content;background:#dc2626;border-color:#dc2626;color:#fff}.danger-action:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}.dialog{border:0;background:#0f172a6b;padding:20px;width:100vw;max-width:none;height:100vh;max-height:none;margin:0;overflow:hidden}.dialog.wide{width:100vw;max-width:none}.dialog::backdrop{background:#21252980}.dialog[open]{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:40}.dialog-box{width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 24px 80px #0f172a2e}.dialog.wide .dialog-box{width:min(820px,calc(100vw - 40px))}.payment-dialog .payment-box{width:min(760px,calc(100vw - 40px));padding:0;gap:0;overflow:hidden}.dialog-box h3{margin:0;font-size:22px;letter-spacing:0}.dialog-box footer,.swal footer{display:flex;justify-content:flex-end;gap:10px}.payment-box footer{padding:16px 24px;border-top:1px solid var(--line);background:#f8fafc}.payment-box footer button{min-height:42px;padding-inline:18px;font-size:14px}.payment-header{display:grid;gap:6px;padding:22px 24px 20px;border-bottom:1px solid var(--line)}.payment-header h3{margin:0;font-size:26px;line-height:1.05}.payment-header .muted{max-width:560px;font-size:15px;line-height:1.35}.payment-upload-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:18px;padding:24px;align-items:start}.payment-preview-panel{width:100%;height:360px;max-height:calc(100vh - 320px);min-height:300px;display:grid;place-items:center;border:1px solid #d8e1ee;border-radius:14px;background:linear-gradient(135deg,#edf4fb,#f8fbff);overflow:hidden}.payment-preview-panel strong{color:#1f2937;font-size:18px}.payment-preview-panel img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.payment-side-panel{display:grid;align-content:start;gap:14px}.payment-member-card{display:grid;gap:4px;padding:16px;border:1px solid #bfdbfe;border-radius:10px;background:#f8fbff}.payment-member-card strong{font-size:20px;line-height:1.1}.payment-member-card span{color:#6b7280;font-size:18px;font-weight:750}.payment-member-card small{color:#6b7280;font-size:14px;font-weight:750}.payment-amount-input{min-height:46px;font-size:16px}.settlement-breakdown{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}.settlement-breakdown div{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#64748b;font-size:13px;font-weight:700}.settlement-breakdown strong{color:var(--ink);font-size:14px}.settlement-breakdown .highlight{margin-top:2px;padding-top:8px;border-top:1px solid var(--line);color:#1d4ed8}.settlement-breakdown .highlight strong{color:#1d4ed8}.upload-dropzone{min-height:140px;grid-template-columns:64px minmax(0,1fr);align-content:center;align-items:center;gap:4px 16px;padding:18px;border:1px dashed #93c5fd;border-radius:14px;background:#f8fbff;cursor:pointer}.upload-dropzone input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.upload-icon{grid-row:span 3;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#fff;color:var(--primary);box-shadow:var(--shadow-sm);font-size:28px;font-weight:700}.upload-dropzone strong{color:#1f2937;font-size:17px}.upload-dropzone small{color:#64748b;font-size:13px;font-weight:750;line-height:1.35}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.payment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.payment-settlement{display:grid;gap:7px}.preview{width:100%;max-height:240px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#f8fafc}.progress-wrap{display:grid;gap:9px;padding:12px;border:1px solid #bfdbfe;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#f8fbff)}.progress-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#1d4ed8;font-size:12px;font-weight:800}.progress-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-head strong{color:#1e40af;font-size:12px}.progress-track{height:9px;overflow:hidden;border-radius:999px;background:#dbeafe}.progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 75%,transparent 75%,transparent),linear-gradient(90deg,#2563eb,#60a5fa);background-size:28px 28px,100% 100%;transition:width .22s ease;animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{0%{background-position:0 0,0 0}to{background-position:28px 0,0 0}}.proof-layout{width:min(980px,calc(100vw - 40px));gap:18px}.proof-header{display:grid;gap:2px}.proof-header h3{margin:0;font-size:28px;line-height:1.1}.proof-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}.proof-info{display:grid;align-content:start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}.proof-info-row{display:grid;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--line)}.proof-info-row:last-child{padding-bottom:0;border-bottom:0}.proof-info span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.proof-info strong{color:var(--ink);font-size:18px;line-height:1.2}.proof-info .status{font-size:11px}.proof-frame{position:relative;display:grid;place-items:center;width:100%;height:520px;max-height:calc(100vh - 260px);min-height:360px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;overflow:hidden}.proof-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.proof-detail-button{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid #bfdbfe;border-radius:999px;background:#fffffff5;color:#1d4ed8;font-size:12px;font-weight:850;box-shadow:0 10px 24px #0f172a29}.proof-detail-button:hover{background:#eff6ff}.proof-detail-button svg{width:18px;height:18px;fill:currentColor}.image-detail-dialog[open]{z-index:50}.image-detail-box{width:min(720px,calc(100vw - 40px));height:min(680px,calc(100vh - 48px));padding:0;overflow:hidden;gap:0}.image-detail-box header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.image-detail-box h3{margin:0;font-size:18px}.image-detail-frame{height:calc(100% - 65px);display:grid;place-items:center;overflow:auto;background:#0f172a;padding:16px}.image-detail-frame img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.import-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}.import-errors{display:grid;gap:5px;padding:12px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#991b1b;font-size:13px}.import-review{max-height:280px}.import-review table{min-width:680px}.check-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.check-row label{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#f9fafb}.check-row input{width:auto}.swal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a61;display:grid;place-items:center;z-index:20;padding:20px}.swal{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);display:grid;gap:12px}.swal h3,.swal p{margin:0}.toast{position:fixed;right:20px;top:20px;max-width:min(340px,calc(100vw - 40px));background:var(--success);color:#fff;padding:10px 12px;border-radius:8px;box-shadow:var(--shadow);z-index:30;font-weight:750;font-size:13px}.toast.danger{background:var(--danger)}.loading-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:20px;background:#f8fafcb8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-card{width:min(320px,100%);display:grid;justify-items:center;gap:10px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 24px 70px #0f172a24;text-align:center}.loading-card strong{color:var(--ink);font-size:15px}.loading-card p{margin:0;color:var(--muted);font-size:13px}.loading-inline{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1d4ed8;font-size:13px}.loading-inline strong{font-size:13px}.spinner{width:34px;height:34px;display:inline-block;border-radius:999px;border:3px solid #dbeafe;border-top-color:var(--primary);animation:spin .75s linear infinite}.spinner.small{width:18px;height:18px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.app-footer{padding:8px 2px;color:var(--muted);font-size:12px;text-align:center}@media (max-width: 980px){.app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr}.sidebar{height:auto;position:sticky;z-index:10;top:0;grid-template-rows:auto auto;gap:12px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 0 10px;justify-content:flex-start}.brand .logo-mark{width:38px;height:38px;border-radius:12px;font-size:18px}.sidebar nav{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 0 4px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.sidebar nav button{width:auto;min-width:max-content;white-space:nowrap;text-align:center;padding:9px 11px}.sidebar nav button.mobile-logout{display:flex}.sidebar nav button svg{width:17px;height:17px}.sidebar-foot{display:none}.workspace{padding:18px}.topbar{align-items:stretch;flex-direction:column}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-strip{grid-auto-columns:calc((100% - 12px)/2)}.batch-row{width:100%;grid-auto-columns:minmax(172px,31%)}.toolbar{align-items:stretch}.toolbar .actions{width:100%;justify-content:flex-end}.table-wrap{max-width:calc(100vw - 36px)}.dialog-box,.dialog.wide .dialog-box,.payment-dialog .payment-box,.proof-layout{width:min(100%,calc(100vw - 28px))}.proof-grid{grid-template-columns:240px minmax(0,1fr)}}@media (max-width: 640px){body{font-size:14px}button{min-height:40px}.login-shell{padding:34px 16px 16px;align-items:start}.login-panel{padding:22px;border-radius:12px;gap:16px}.login-logo{margin-bottom:12px}.logo-mark{width:42px;height:42px;border-radius:13px;font-size:20px}.login-panel .muted{font-size:14px}.sidebar{padding:10px 12px;gap:10px}.sidebar nav button{min-height:40px;padding:8px 10px;font-size:13px}.sidebar button.switch-login span small{display:none}.workspace{padding:14px;gap:14px}.topbar{padding:15px;border-radius:12px}.topbar h2{font-size:26px}.demo-grid,.split,.payment-fields,.summary-grid,.summary-grid.compact{grid-template-columns:1fr}.summary-grid{gap:10px}.summary-card{min-height:86px;padding:14px;border-radius:12px}.summary-card strong{margin-top:8px;font-size:26px}.category-block{gap:8px}.category-strip{grid-auto-columns:minmax(220px,84%);gap:10px}.category-tile{min-height:94px;padding:12px;border-radius:12px}.category-fallback{width:58px;height:58px}.category-tile menu{gap:6px}.add-tile{width:100%}.toolbar{align-items:stretch}.toolbar input,.toolbar .actions,.toolbar .batch-row{width:100%;max-width:none}.toolbar .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}.actions button,.batch-row button,.batch-row .batch-filter{width:100%;min-width:0}.batch-row{grid-auto-columns:minmax(155px,72%)}.batch-filter{padding:8px 10px;font-size:13px}.table-tools{padding:10px;border-radius:12px}.table-wrap{max-width:calc(100vw - 28px);border-radius:12px}table{min-width:1040px}.members-table{min-width:680px}th,td{padding:12px}.payment-cell{min-width:126px}.payment-stage,.payment-due{min-width:0;max-width:100%}.pagination-bar{font-size:12px}.pagination-bar{align-items:stretch;flex-direction:column}.pagination-bar>div{justify-content:space-between}.dialog{padding:10px}.dialog-box,.dialog.wide .dialog-box{width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:12px;padding:16px}.dialog-box h3{font-size:20px}.dialog-box footer,.swal footer{flex-direction:column-reverse}.dialog-box footer button,.swal footer button{width:100%}.payment-dialog .payment-box{width:min(100%,calc(100vw - 24px))}.payment-header{padding:18px}.payment-header h3{font-size:24px}.payment-header .muted{font-size:15px}.payment-upload-grid{grid-template-columns:1fr;padding:18px;gap:16px}.payment-preview-panel{height:280px;min-height:240px;max-height:280px}.payment-side-panel{gap:16px}.payment-member-card{padding:18px}.payment-member-card strong{font-size:22px}.payment-member-card span{font-size:19px}.payment-member-card small{font-size:15px}.upload-dropzone{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:170px}.upload-icon{grid-row:auto;width:60px;height:60px;font-size:30px}.payment-box footer{padding:16px 18px}.proof-grid,.check-row{grid-template-columns:1fr}.proof-layout{width:calc(100vw - 20px)}.proof-header h3{font-size:22px}.proof-frame{height:360px;min-height:280px;max-height:48vh}.proof-info strong{font-size:16px}.proof-detail-button{right:10px;bottom:10px;min-height:34px;padding:7px 10px}.image-detail-box{width:calc(100vw - 20px);height:calc(100vh - 28px)}.image-detail-frame{padding:10px}.import-summary{align-items:stretch;flex-direction:column}.database-panel{grid-template-columns:1fr}.seed-action,.danger-action{width:100%}}@media (max-width: 420px){.workspace{padding:10px}.topbar h2{font-size:24px}.toolbar .actions{grid-template-columns:1fr}.category-strip{grid-auto-columns:minmax(200px,88%)}.batch-row{grid-auto-columns:minmax(145px,82%)}.summary-card strong{font-size:24px}.swal{padding:18px}}