:root{--bg:#f5f7f6;--card:#fff;--text:#10223f;--muted:#64748b;--line:#e2e8f0;--green:#16a34a;--navy:#16325b;--orange:#f97316;--soft:#dcfce7;--shadow:0 14px 36px #16325b14;--content-max-width:1400px;--page-padding-x:32px;--page-padding-y:24px;--card-radius:18px;--card-padding:20px;--section-gap:24px;--sidebar-width:240px;--sidebar-collapsed-width:92px;--topbar-height:72px}:root[data-theme=dark]{--bg:#0f172a;--card:#162239;--text:#f1f5f9;--muted:#94a3b8;--line:#1e293b;--soft:#113422;--shadow:0 14px 36px #00000047}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 20% 0%, #16a34a17, transparent 36%), var(--bg);color:var(--text);font-family:Segoe UI,Inter,sans-serif}a{color:inherit;text-decoration:none}input,select,button{font:inherit}button{cursor:pointer}.btn{border:0;border-radius:12px;align-items:center;gap:.4rem;padding:.65rem .95rem;font-weight:700;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e)}.btn-soft{background:var(--soft);color:var(--green)}.card,.section-card,.chart-card,.table-card,.table-wrap,.kpi-card,.form-card,.auth-card,.benefit-card,.hero-panel,.cta-band,.filter-bar,.empty-state{background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow)}.app-shell{grid-template-columns:var(--sidebar-width) minmax(0, 1fr);min-height:100vh;display:grid}.app-sidebar{border-right:1px solid var(--line);background:var(--card);z-index:20;height:100vh;padding:16px;position:sticky;top:0;overflow-y:auto}.app-sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-brand{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.sidebar-brand p{color:var(--muted);margin:.2rem 0 0;font-size:.85rem}.sidebar-nav{gap:6px;display:grid}.sidebar-link{color:var(--muted);border-radius:12px;align-items:center;gap:10px;padding:10px;display:flex}.sidebar-link.active{background:var(--soft);color:var(--green);font-weight:700}.app-main{flex-direction:column;min-width:0;display:flex}.app-content{flex:1;min-width:0}.app-header{min-height:var(--topbar-height);padding:12px var(--page-padding-x);border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--card) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:15;justify-content:space-between;align-items:center;gap:14px;display:flex;position:sticky;top:0}.search-box{border:1px solid var(--line);border-radius:12px;flex:1;align-items:center;gap:.55rem;min-width:220px;max-width:460px;padding:.45rem .7rem;display:flex}.search-box input{width:100%;color:var(--text);background:0 0;border:0;padding:0}.search-box input:focus{outline:none}.header-actions{align-items:center;gap:8px;display:flex}.icon-button{border:1px solid var(--line);color:var(--text);background:0 0;border-radius:12px;place-items:center;padding:.45rem;display:inline-grid}.user-chip{background:var(--navy);color:#fff;border:0;border-radius:50%;width:34px;height:34px}.page-container{width:100%;padding:var(--page-padding-y) var(--page-padding-x) calc(var(--page-padding-y) + 8px)}.page-inner{width:100%;max-width:var(--content-max-width);gap:var(--section-gap);margin:0 auto;display:grid}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.page-header-copy{min-width:0}.page-title{margin:0;font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.25}.page-subtitle{color:var(--muted);margin:8px 0 0;font-size:.97rem}.page-header-action{flex-shrink:0}.filter-bar{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;padding:14px;display:grid}.filter-bar label,.form-grid label,.settings-grid label,.auth-card label,.settings-form label,.settings-field{gap:.4rem;font-weight:600;display:grid}.filter-bar input,.filter-bar select,.form-grid input,.form-grid select,.auth-card input,.settings-grid input,.settings-grid select,.settings-form input,.settings-form select,.search-box input{border:1px solid var(--line);color:var(--text);background:0 0;border-radius:12px;padding:.58rem .8rem}.filter-bar>*{grid-column:span 3}.filter-bar.compact>*{grid-column:span 2}.section-card,.table-card,.chart-card{padding:var(--card-padding)}.section-card-head,.table-card-head,.chart-card-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.section-card-title{margin:0;font-size:1.05rem}.section-card-description{color:var(--muted);margin:6px 0 0;font-size:.92rem}.section-card-body,.table-card-body,.chart-content{min-width:0}.kpi-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;display:grid}.kpi-grid>*{grid-column:span 3}.kpi-grid-5>*{grid-column:span 12}@media (width>=780px){.kpi-grid-5>*{grid-column:span 6}}@media (width>=1160px){.kpi-grid-5>*{grid-column:span 2}.kpi-grid-5>:last-child{grid-column:span 4}}.kpi-card{padding:16px}.kpi-card-top{justify-content:space-between;align-items:center;display:flex}.icon-wrap{background:var(--soft);width:34px;height:34px;color:var(--green);border-radius:10px;place-items:center;display:grid}.kpi-label{color:var(--muted);margin:.7rem 0 .45rem;font-size:.9rem}.kpi-value{margin:0;font-size:1.3rem;font-weight:800}.trend-badge{border-radius:999px;align-items:center;gap:.2rem;padding:.2rem .5rem;font-size:.77rem;font-weight:700;display:inline-flex}.trend-badge.up{color:#166534;background:#dcfce7}.trend-badge.down{color:#991b1b;background:#fee2e2}.grid-2,.grid-2-10,.grid-4{gap:16px;display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2-10{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr)}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;padding:12px 14px}th{letter-spacing:.03em;color:var(--muted);text-transform:uppercase;font-size:.77rem;font-weight:700}tbody tr:hover{background:color-mix(in srgb, var(--soft) 18%, transparent)}th.is-right,td.is-right{text-align:right}th.is-center,td.is-center{text-align:center}.status-badge{text-transform:capitalize;border-radius:999px;padding:.25rem .6rem;font-size:.75rem;font-weight:700}.status-badge.pending,.status-badge.inactive{color:#92400e;background:#fef3c7}.status-badge.active,.status-badge.approved,.status-badge.paid{color:#166534;background:#dcfce7}.status-badge.rejected{color:#991b1b;background:#fee2e2}.form-card{padding:var(--card-padding)}.form-card h3,.settings-card h3{margin:0;font-size:1.05rem}.form-grid,.settings-grid,.settings-form{gap:14px;display:grid}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-span-2{grid-column:span 2}.settings-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.settings-grid>*{grid-column:span 6}.settings-form{margin-top:12px}.settings-card{padding:var(--card-padding)}.settings-description{color:var(--muted);margin:8px 0 0;font-size:.92rem}.settings-actions{justify-content:flex-start;margin-top:6px;display:flex}.switch-row{align-items:center;gap:8px;width:fit-content;font-weight:600;display:flex}.switch-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);margin:0;position:relative;top:1px}.hint-text{color:var(--green);font-weight:700}.summary-list{gap:10px;display:grid}.summary-item{border:1px solid var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.summary-item span{color:var(--muted);font-size:.9rem}.summary-item strong{font-size:.98rem}.payout-summary{margin-bottom:14px}.table-inline-note{color:var(--muted);margin:4px 0 0;font-size:.85rem}.table-footer,.table-pagination{justify-content:flex-end;align-items:center;gap:12px;margin-top:14px;display:flex}.modal-overlay{z-index:40;background:#02061770;place-items:center;padding:14px;display:grid;position:fixed;inset:0}.modal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);width:min(720px,100%);box-shadow:var(--shadow);padding:var(--card-padding)}.modal-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.modal-head h2{margin:0;font-size:1.2rem}.modal-actions{justify-content:flex-end;gap:10px;margin-top:14px;display:flex}.response-preview{border:1px solid var(--line);background:color-mix(in srgb, var(--card) 84%, var(--soft));border-radius:12px;max-height:220px;margin-top:12px;padding:10px 12px;font-size:.82rem;overflow:auto}.form-grid.one-col{grid-template-columns:1fr}.toast-viewport{z-index:60;gap:8px;width:min(360px,100vw - 32px);display:grid;position:fixed;top:16px;right:16px}.toast-item{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:12px;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.toast-item.success{border-color:#86efac}.toast-item.error{border-color:#fca5a5}.toast-item p{margin:0;line-height:1.35}.toast-item button{color:var(--muted);background:0 0;border:0;padding:0}.empty-state{text-align:center;color:var(--muted);padding:1.4rem}.empty-state h4{color:var(--text);margin:.4rem 0}.metric-badge{border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:700;display:inline-flex}.metric-badge.green{color:#166534;background:#dcfce7}.metric-badge.orange{color:#9a3412;background:#ffedd5}.landing-page{gap:1rem;max-width:1180px;margin:0 auto;padding:1rem;display:grid}.landing-header{justify-content:space-between;align-items:center;display:flex}.landing-header nav{align-items:center;gap:.7rem;display:flex}.hero{grid-template-columns:1.2fr 1fr;gap:1rem;display:grid}.hero h1{margin:.4rem 0;font-size:clamp(1.8rem,4vw,3rem)}.hero p{color:var(--muted)}.hero-chip{color:var(--orange);background:#ffedd5;border-radius:999px;padding:.33rem .6rem;font-weight:700;display:inline-block}.hero-cta{gap:.65rem;display:flex}.hero-panel{padding:1rem}.hero-panel h3{margin-top:0}.hero-metrics{gap:.7rem;display:grid}.hero-metrics p{color:var(--navy);margin:0;font-size:1.35rem;font-weight:800}:root[data-theme=dark] .hero-metrics p{color:#a7f3d0}.hero-metrics span{color:var(--muted)}.benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;display:grid}.benefit-card{padding:1rem}.benefit-card h3{margin:.6rem 0 .25rem}.benefit-card p{color:var(--muted);margin:0}.cta-band{background:linear-gradient(120deg, var(--navy), #1e4a86);color:#fff;padding:1.4rem}.cta-band p{color:#dbeafe}.auth-page{place-items:center;min-height:100vh;padding:1rem;display:grid}.auth-card{gap:.8rem;width:min(560px,100%);padding:1.2rem;display:grid}.auth-card h1,.auth-card p{margin:0}.auth-alt{color:var(--muted);font-size:.92rem}.pending-card{border:1px solid var(--line);border-radius:var(--card-radius);background:var(--card);width:min(760px,100% - 48px);box-shadow:var(--shadow);gap:10px;margin:24px auto;padding:20px;display:grid}.pending-card h2,.pending-card p{margin:0}.pending-card p{color:var(--muted)}.skeleton-wrap{gap:.6rem;display:grid}.skeleton-row{background:linear-gradient(90deg,#94a3b826,#94a3b842,#94a3b826) 0 0/200% 100%;border-radius:16px;height:72px;animation:1.2s linear infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.mobile-only,.mobile-backdrop{display:none}@media (width<=1366px){:root{--page-padding-x:24px}.kpi-grid>*,.kpi-grid-5>*{grid-column:span 4}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=1080px){:root{--page-padding-x:20px}.benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-2-10,.hero,.form-grid,.settings-grid,.filter-bar{grid-template-columns:1fr}.kpi-grid>*,.kpi-grid-5>*,.settings-grid>*,.filter-bar>*,.filter-bar.compact>*,.form-span-2{grid-column:auto}}@media (width<=880px){:root{--topbar-height:64px}.app-shell{grid-template-columns:1fr}.app-sidebar{width:min(280px,86vw);transition:transform .25s;position:fixed;transform:translate(-110%)}.app-sidebar.open{transform:translate(0)}.mobile-backdrop{z-index:10;background:#02061761;border:0;display:block;position:fixed;inset:0}.mobile-only{display:inline-grid}.desktop-only{display:none}.search-box{max-width:none}.app-header{flex-wrap:wrap}.header-actions{justify-content:flex-end;width:100%}}@media (width<=620px){:root{--page-padding-x:16px;--page-padding-y:16px;--card-padding:16px;--section-gap:16px}.landing-header{flex-direction:column;align-items:flex-start;gap:.8rem}.benefit-grid{grid-template-columns:1fr}.hero-cta,.page-header,.modal-actions,.table-card-head,.section-card-head,.chart-card-head{flex-direction:column;align-items:flex-start}th,td{padding:10px 12px}}.bank-select-container{width:100%;position:relative}.bank-select-input-wrap{align-items:center;display:flex;position:relative}.bank-select-search{width:100%;padding-left:40px!important}.bank-select-selected-logo{object-fit:contain;pointer-events:none;width:24px;height:24px;position:absolute;left:10px}.bank-select-dropdown{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);z-index:50;border-radius:12px;max-height:280px;padding:6px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto}.bank-select-option{cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:10px;transition:background .2s;display:flex}.bank-select-option:hover,.bank-select-option.is-focused{background:color-mix(in srgb, var(--soft) 40%, transparent)}.bank-select-option.is-selected{background:var(--soft);color:var(--green);font-weight:700}.bank-option-logo{object-fit:contain;background:#fff;border:1px solid #eee;border-radius:4px;flex-shrink:0;width:28px;height:28px;padding:2px}.bank-option-info{line-height:1.3;display:grid}.bank-option-short{font-size:.95rem;font-weight:700}.bank-option-full{color:var(--muted);font-size:.82rem}.bank-select-empty{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}