body{color:#fff;background:#02113b;margin:0;font-family:Arial,sans-serif}.modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#0000008c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal.hidden{display:none}.modal-card{background:#071b5a;border:1px solid #ffffff14;border-radius:24px;width:100%;max-width:500px;overflow:hidden;box-shadow:0 24px 60px #00000073}.modal-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.modal-header h3{color:#fff;margin:0;font-size:18px;font-weight:700}.modal-body{gap:18px;padding:22px;display:grid}.form-group input{box-sizing:border-box;color:#fff;background:#0b215f;border:1px solid #28448f;border-radius:14px;outline:none;width:100%;padding:13px 15px;font-size:14px}.modal-footer{border-top:1px solid #ffffff14;justify-content:flex-end;gap:12px;padding:18px 22px 22px;display:flex}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:14px;min-width:120px;padding:12px 18px;font-size:14px;font-weight:700}.primary-btn{color:#fff;background:#2563eb}.secondary-btn{color:#dbe4ff;background:#132b73}@media (width<=640px){.modal{align-items:flex-end;padding:0}.modal-card{border-radius:24px 24px 0 0;width:100%;max-width:none}.modal-footer{flex-direction:column-reverse}.primary-btn,.secondary-btn{width:100%}}body{color:#fff;background:#030b2a;min-height:100vh;margin:0;font-family:Inter,sans-serif;display:flex}.main{flex:1;padding:24px;overflow-x:hidden}#app{margin-top:24px}.page-card{background:#07184d;border:1px solid #3b82f61f;border-radius:20px;padding:20px;box-shadow:0 10px 30px #00000040}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.page-header h2{margin:0;font-size:28px;font-weight:800}.page-header p{color:#94a3b8;margin:6px 0 0;font-size:14px}.primary-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;padding:12px 18px;font-weight:700;transition:all .15s}.primary-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.secondary-btn{color:#e2e8f0;cursor:pointer;background:#172554;border:none;border-radius:12px;padding:12px 18px;font-weight:700;transition:all .15s}.secondary-btn:hover{background:#22316d}.modal{z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.hidden{display:none!important}.modal-card{color:#fff;background:#07184d;border:1px solid #3b82f640;border-radius:22px;width:460px;max-width:95%;padding:22px;animation:.18s modalShow;box-shadow:0 20px 60px #00000073}@keyframes modalShow{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.modal-header h3{margin:0;font-size:20px;font-weight:700}.modal-close{color:#fff;cursor:pointer;background:#10245f;border:none;border-radius:10px;width:36px;height:36px;font-size:16px}.modal-close:hover{background:#18337d}.modal-body{flex-direction:column;gap:14px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:#cbd5e1;font-size:13px;font-weight:600}.form-group input{color:#fff;box-sizing:border-box;background:#0b1d5c;border:1px solid #3b82f640;border-radius:12px;outline:none;width:100%;padding:12px 14px;transition:all .15s}.form-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.modal-footer{justify-content:flex-end;gap:10px;margin-top:22px;display:flex}.page-loading{color:#94a3b8;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;display:flex}.spinner{border:4px solid #ffffff1f;border-top-color:#2563eb;border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){body{flex-direction:column}.main{padding:16px}.page-header{flex-direction:column;align-items:flex-start}.page-header h2{font-size:24px}}@media (width<=640px){.modal-card{border-radius:18px;width:100%;margin:16px;padding:18px}.modal-footer{flex-direction:column-reverse}.modal-footer button{width:100%}}.sidebar{background:#031341;width:240px;padding:20px}.sidebar-nav{flex-direction:column;gap:10px;display:flex}.nav-item{color:#cbd5e1;border-radius:12px;padding:12px;text-decoration:none}.nav-item.active{color:#fff;background:#2563eb}.topbar{justify-content:space-between;align-items:center;gap:20px;display:flex}.topbar h1{margin:0;font-size:32px}.topbar small{color:#9fb3ff;margin-top:4px;display:block}#refreshBtn{color:#fff;background:#2563eb;border:none;border-radius:12px;padding:10px 18px;font-weight:600}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px;display:grid}.kpi-card{text-align:center;background:#081a55;border-radius:20px;padding:32px}.kpi-card div{font-size:48px;font-weight:800}.table-card{background:#081a55;border:1px solid #3b82f61f;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #00000040}.table-wrapper{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:720px}thead{background:#0b236f}th{text-align:left;color:#cbd5e1;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid #ffffff14;padding:16px 14px;font-size:13px;font-weight:700}td{color:#f8fafc;vertical-align:middle;border-bottom:1px solid #ffffff0f;padding:14px;font-size:14px}tbody tr{transition:background .12s}tbody tr:hover{background:#ffffff08}tbody tr:last-child td{border-bottom:none}.table-btn{cursor:pointer;border:none;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700;transition:all .15s}.table-btn:hover{transform:translateY(-1px)}.edit-bank{color:#fff;background:#2563eb}.edit-bank:hover{background:#1d4ed8}.delete-bank{color:#fff;background:#dc2626}.delete-bank:hover{background:#b91c1c}.table-btn.danger{color:#fff;background:#dc2626}.status-badge{border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.status-online{color:#22c55e;background:#22c55e26}.status-offline{color:#94a3b8;background:#94a3b826}@media (width<=768px){.table-card{border-radius:16px}th,td{padding:12px 10px;font-size:13px}.table-btn{padding:7px 12px;font-size:11px}}