:root{--bg:#02113b;--surface:#071b5a;--surface-2:#0b215f;--surface-3:#102766;--border:#28448f;--primary:#2563eb;--primary-hover:#1d4ed8;--text:#fff;--muted:#94a3b8;--danger:#ef4444;--shadow:0 24px 60px #00000073;--radius:18px;--radius-lg:24px}body{color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#02113b 0%,#03164a 100%);font-family:Inter,Arial,sans-serif}.modal.hidden{display:none}.modal-card{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:var(--shadow);border:1px solid #ffffff14;animation:.24s slideUp;overflow:hidden}.modal-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;display:flex}.modal-header h3{color:var(--text);margin:0;font-size:18px;font-weight:700}.modal-close{background:var(--surface-3);width:40px;height:40px;color:var(--text);cursor:pointer;border:none;border-radius:12px;font-size:16px;transition:all .2s}.modal-body{gap:18px;max-height:70vh;padding:24px;display:grid;overflow:auto}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-thumb{background:#23448e;border-radius:999px}.form-group input,.form-group select,.form-group textarea{border:1px solid var(--border);background:var(--surface-2);width:100%;color:var(--text);border-radius:14px;outline:none;padding:13px 15px;font-size:14px;transition:border-color .2s,box-shadow .2s}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:14px;min-width:120px;padding:12px 18px;font-size:14px;font-weight:700;transition:all .2s}.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.secondary-btn{background:var(--surface-3);color:#dbe4ff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.modal{align-items:flex-end;padding:0}.modal-card{border-radius:24px 24px 0 0;width:100%;max-width:none}.modal-header{padding:18px 20px}.modal-body{max-height:75vh;padding:20px}.modal-footer{flex-direction:column-reverse;padding:18px 20px 22px}.primary-btn,.secondary-btn{width:100%}}:root{--bg:#030b2a;--surface:#07184d;--surface-2:#0b1d5c;--surface-3:#10245f;--border:#3b82f624;--primary:#2563eb;--primary-hover:#1d4ed8;--text:#fff;--muted:#94a3b8;--shadow:0 12px 36px #00000047;--radius:16px;--radius-lg:22px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#02081f 0%,#030b2a 100%);font-family:Inter,Arial,sans-serif;display:flex}.main{flex:1;padding:24px;overflow-x:hidden}#app{margin-top:24px}.page-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px;padding:22px}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;display:flex}.page-header h2{letter-spacing:-.02em;margin:0;font-size:28px;font-weight:800}.page-header p{color:var(--muted);margin:6px 0 0;font-size:14px;line-height:1.5}.primary-btn,.secondary-btn,.refresh-btn{cursor:pointer;border:none;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;transition:all .18s}.primary-btn,.refresh-btn{background:var(--primary);color:#fff}.primary-btn:hover,.refresh-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.secondary-btn{color:#e2e8f0;background:#172554}.secondary-btn:hover{background:#22316d;transform:translateY(-1px)}.modal{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:9999;background:#00000094;justify-content:center;align-items:center;padding:20px;animation:.18s fadeIn;display:flex;position:fixed;inset:0}.hidden{display:none!important}.modal-card{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:500px;color:var(--text);border:1px solid #3b82f638;animation:.22s modalShow;overflow:hidden;box-shadow:0 24px 64px #00000075}.modal-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:20px 22px;display:flex}.modal-header h3{margin:0;font-size:18px;font-weight:700}.modal-close{background:var(--surface-3);color:#fff;cursor:pointer;border:none;border-radius:12px;width:38px;height:38px;font-size:16px;transition:all .18s}.modal-close:hover{background:#17357e;transform:scale(1.04)}.modal-body{flex-direction:column;gap:16px;padding:22px;display:flex}.modal-footer{border-top:1px solid #ffffff0f;justify-content:flex-end;gap:12px;padding:18px 22px 22px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:#dbe4ff;font-size:13px;font-weight:600}.form-group input,.form-group select,.form-group textarea{background:var(--surface-2);color:#fff;border:1px solid #3b82f640;border-radius:14px;outline:none;width:100%;padding:13px 14px;transition:border-color .18s,box-shadow .18s}.form-group input::placeholder,.form-group textarea::placeholder{color:#7f93c9}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa2e}.page-loading{min-height:60vh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.spinner{border:4px solid #ffffff1f;border-top-color:var(--primary);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes modalShow{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@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{align-items:flex-end;padding:0}.modal-card{border-radius:22px 22px 0 0;width:100%;max-width:none}.modal-body{padding:20px}.modal-footer{flex-direction:column-reverse;padding:18px 20px 22px}.modal-footer button{width:100%}}.sidebar{background:linear-gradient(#031341 0%,#041a55 100%);border-right:1px solid #3b82f624;flex-direction:column;width:260px;min-height:100vh;padding:20px 16px;display:flex}.sidebar-header{border-bottom:1px solid #ffffff14;align-items:center;gap:14px;margin-bottom:20px;padding:8px 6px 24px;display:flex}.sidebar-logo{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:16px;justify-content:center;align-items:center;width:50px;height:50px;font-size:22px;font-weight:800;display:flex;box-shadow:0 10px 24px #2563eb59}.sidebar-header h2{color:#fff;letter-spacing:-.02em;margin:0;font-size:22px;font-weight:800}.sidebar-header p{color:#94a3b8;margin:4px 0 0;font-size:12px}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.nav-item{color:#cbd5e1;border-radius:14px;align-items:center;gap:12px;padding:13px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:all .18s;display:flex}.nav-item:hover{color:#fff;background:#10245c;transform:translate(2px)}.nav-item.active{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 8px 20px #2563eb47}.nav-icon{text-align:center;width:22px;font-size:18px}.sidebar-footer{border-top:1px solid #ffffff14;flex-direction:column;gap:12px;margin-top:auto;padding-top:20px;display:flex}.logout-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:14px;width:100%;padding:12px 16px;font-size:14px;font-weight:700;transition:all .18s}.logout-btn:hover{background:#dc2626;transform:translateY(-1px)}.sidebar-footer small{text-align:center;color:#64748b;font-size:11px}@media (width<=768px){.sidebar{border-bottom:1px solid #3b82f624;border-right:none;width:100%;min-height:auto;padding:16px}.sidebar-header{margin-bottom:16px;padding-bottom:16px}.sidebar-nav{scrollbar-width:none;flex-direction:row;gap:10px;padding-bottom:6px;overflow-x:auto}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{flex:none;justify-content:center;min-width:150px}.sidebar-footer{margin-top:16px}}.topbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#07184deb;border:1px solid #3b82f624;border-radius:20px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;padding:18px 22px;display:flex;box-shadow:0 10px 30px #00000040}.topbar-title h1,.topbar h1{letter-spacing:-.03em;color:#fff;margin:0;font-size:32px;font-weight:800}.topbar-title small,.topbar small{color:#9fb3ff;margin-top:6px;font-size:13px;font-weight:500;display:block}.topbar-actions{align-items:center;gap:12px;display:flex}.topbar-btn,#refreshBtn{cursor:pointer;border:none;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;transition:all .18s}#refreshBtn,.topbar-btn.primary{color:#fff;background:#2563eb}#refreshBtn:hover,.topbar-btn.primary:hover{background:#1d4ed8;transform:translateY(-1px)}.topbar-btn.danger{color:#fff;background:#ef4444}.topbar-btn.danger:hover{background:#dc2626;transform:translateY(-1px)}@media (width<=768px){.topbar{flex-direction:column;align-items:flex-start;padding:18px}.topbar-title h1,.topbar h1{font-size:26px}.topbar-actions{grid-template-columns:1fr 1fr;width:100%;display:grid}.topbar-btn,#refreshBtn{text-align:center;width:100%}}@media (width<=480px){.topbar-actions{grid-template-columns:1fr}}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:24px;display:grid}.kpi-card{text-align:center;background:linear-gradient(#081a55 0%,#0b215f 100%);border:1px solid #3b82f62e;border-radius:22px;padding:28px 24px;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000047}.kpi-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px #00000061}.kpi-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#2563eb59 0%,#2563eb00 70%);border-radius:50%;width:120px;height:120px;position:absolute;top:-40px;right:-40px}.kpi-card div{letter-spacing:-.03em;color:#fff;margin-bottom:10px;font-size:48px;font-weight:800;line-height:1}.kpi-card small{color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;display:block}.kpi-card.success{border-color:#10b98138}.kpi-card.success:before{background:radial-gradient(circle,#10b98152 0%,#10b98100 70%)}.kpi-card.warning{border-color:#f59e0b38}.kpi-card.warning:before{background:radial-gradient(circle,#f59e0b52 0%,#f59e0b00 70%)}.kpi-card.danger{border-color:#ef444438}.kpi-card.danger:before{background:radial-gradient(circle,#ef444452 0%,#ef444400 70%)}@media (width<=768px){.kpi-grid{grid-template-columns:1fr;gap:16px}.kpi-card{border-radius:20px;padding:24px 20px}.kpi-card div{font-size:40px}.kpi-card small{font-size:13px}}.table-card{background:#081a55;border:1px solid #3b82f624;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #00000040}.table-wrapper{scrollbar-width:thin;scrollbar-color:#27408b transparent;width:100%;overflow-x:auto}.table-wrapper::-webkit-scrollbar{height:8px}.table-wrapper::-webkit-scrollbar-thumb{background:#27408b;border-radius:999px}table{border-collapse:collapse;width:100%;min-width:760px}thead{background:#0b236f}thead th{z-index:1;position:sticky;top:0}th{text-align:left;color:#cbd5e1;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;border-bottom:1px solid #ffffff14;padding:16px 14px;font-size:12px;font-weight:700}td{color:#f8fafc;vertical-align:middle;border-bottom:1px solid #ffffff0f;padding:14px;font-size:14px}tbody tr{transition:background .16s}tbody tr:nth-child(2n){background:#ffffff04}tbody tr:hover{background:#ffffff0a}tbody tr:last-child td{border-bottom:none}.table-empty{text-align:center;color:#94a3b8;padding:32px 16px}.table-error{text-align:center;color:#ef4444;padding:32px 16px}.table-actions{flex-wrap:wrap;gap:8px;display:flex}.table-btn{cursor:pointer;border:none;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:700;transition:all .16s}.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;line-height:1;display:inline-flex}.status-online{color:#22c55e;background:#22c55e24}.status-offline{color:#94a3b8;background:#94a3b824}.status-warning{color:#f59e0b;background:#f59e0b24}.cell-warning{color:#f59e0b;font-weight:700}.cell-success{color:#22c55e;font-weight:700}@media (width<=768px){.table-card{border-radius:18px}th,td{padding:12px 10px;font-size:13px}.table-btn{padding:7px 12px;font-size:11px}.table-actions{flex-direction:column;align-items:stretch}.table-actions .table-btn{width:100%}}@media (width<=480px){table{min-width:640px}th,td{padding:11px 9px;font-size:12px}}.auth-page{background:linear-gradient(135deg,#020617,#0f172a,#111827);justify-content:center;align-items:center;min-height:100vh;font-family:Arial,sans-serif;display:flex}.auth-card{color:#fff;background:#111827;border-radius:24px;width:100%;max-width:380px;padding:36px 30px;box-shadow:0 20px 50px #00000073}.auth-card h1{text-align:center;margin:0 0 10px}.auth-card p{text-align:center;color:#94a3b8;margin:0 0 24px}.auth-card input{color:#fff;box-sizing:border-box;background:#1f2937;border:none;border-radius:12px;width:100%;margin-bottom:14px;padding:14px}.auth-card button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;width:100%;padding:14px;font-weight:700}.auth-card button:hover{background:#1d4ed8}