html{font-size:16px}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif}h1,h2,h3,.font-display{font-family:Manrope,sans-serif}
.demo-banner{background:#fef3c7;color:#854d0e;text-align:center;font-size:12px;font-weight:800;letter-spacing:.09em;padding:8px 12px}
.bank-sidebar{background:#17243A;color:#fff;width:255px;flex-shrink:0;display:flex;flex-direction:column;min-height:calc(100vh - 31px)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#A9BDE0;color:#17243A;font-size:25px;font-weight:800}
.side-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:#DCE4EF;font-size:15px;transition:.2s}
.side-link svg{width:18px;height:18px}.side-link:hover,.side-link.active{background:#263A59;color:#fff}.side-link.active{box-shadow:inset 3px 0 #A9BDE0}
.topbar{height:78px;display:flex;align-items:center;gap:14px;padding:0 24px;background:#fff;border-bottom:1px solid #E1E8F1;position:sticky;top:0;z-index:20}
.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f3f6f4;color:#263A59}
.avatar{display:grid;place-items:center;background:#EAF0F8;color:#263A59;width:36px;height:36px;border-radius:50%;font-size:13px;font-weight:800}
.panel{background:#fff;border:1px solid #E1E8F1;border-radius:20px;padding:22px;box-shadow:0 5px 20px rgba(23,36,58,.035)}
.stat-card{background:#fff;border:1px solid #E1E8F1;border-radius:18px;padding:20px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;background:#263A59;color:#fff;padding:12px 17px;font-size:15px;font-weight:700;transition:.2s}
.btn-primary:hover{background:#334E68}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #DCE4EF;border-radius:12px;background:#fff;color:#263A59;padding:11px 15px;font-size:15px;font-weight:700}
.field{width:100%;border:1px solid #DCE4EF;border-radius:11px;padding:12px 13px;background:#fff;color:#17243A;outline:none}.field:focus{border-color:#6C86B2;box-shadow:0 0 0 3px #A9BDE055}
.field-label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:#334E68}
.table-wrap{overflow-x:auto}.bank-table{width:100%;border-collapse:collapse;min-width:620px}.bank-table th{text-align:left;color:#718078;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:12px 10px;border-bottom:1px solid #E1E8F1}.bank-table td{padding:15px 10px;border-bottom:1px solid #edf1ee;font-size:14px}.bank-table tr:last-child td{border-bottom:0}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700;background:#e8f7ec;color:#22613c}.pill.pending{background:#fff4d7;color:#8a5a00}.pill.failed{background:#ffe7e7;color:#a11d1d}
@media(max-width:767px){.bank-sidebar{position:fixed;z-index:40;left:0;top:31px;bottom:0;width:275px;transform:translateX(-105%);transition:transform .22s ease;min-height:0;overflow-y:auto;box-shadow:15px 0 35px #0f172a20}.bank-sidebar.sidebar-open{transform:translateX(0)}.topbar{height:68px;padding:0 14px}.panel{padding:17px}.stat-card{padding:16px}}