*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;background-color:var(--bg-color);color:#1e293b;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-family:var(--font-family);line-height:1.5}a{color:inherit;text-decoration:none;transition:color .2s}button{border:none;cursor:pointer}button,input,select,textarea{font-family:inherit;outline:none}.fade-in{animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navbar{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#fffffff5;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px #0000000d;display:flex;height:68px;justify-content:space-between;padding:0 2rem;padding:0 var(--spacing-lg);position:-webkit-sticky;position:sticky;top:0;z-index:1000}@media(max-width:768px){.navbar{height:62px;padding:0 1.5rem;padding:0 var(--spacing-md)}}.navbar .navbar-brand{align-items:center;cursor:pointer;display:flex;gap:12px;transition:opacity .2s;-webkit-user-select:none;user-select:none}.navbar .navbar-brand:hover{opacity:.9}.navbar .navbar-brand .brand-logo-img{height:38px;object-fit:contain;width:auto}@media(max-width:768px){.navbar .navbar-brand .brand-logo-img{height:32px}}.navbar .navbar-brand .brand-text-block{display:flex;flex-direction:column}.navbar .navbar-brand .brand-text-block .brand-title{color:#1e293b;color:var(--text-primary);font-size:1.15rem;font-weight:800;letter-spacing:-.3px;line-height:1.2}.navbar .navbar-brand .brand-text-block .brand-role-tag{align-items:center;background:#eef2ff;border-radius:999px;color:#4f46e5;color:var(--primary-color);display:inline-flex;font-size:.7rem;font-weight:600;gap:3px;margin-top:1px;padding:1px 6px;width:-webkit-fit-content;width:fit-content}.navbar .navbar-links{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;border-radius:var(--radius-lg);display:flex;gap:6px;padding:4px}@media(max-width:900px){.navbar .navbar-links{display:none}}.navbar .navbar-links .nav-link-item{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);color:#64748b;color:var(--text-secondary);display:inline-flex;font-size:.88rem;font-weight:600;gap:7px;padding:7px 14px;text-decoration:none;transition:all .15s ease}.navbar .navbar-links .nav-link-item .nav-icon{color:#94a3b8;transition:color .15s}.navbar .navbar-links .nav-link-item:hover{background-color:#fff;color:#1e293b;color:var(--text-primary)}.navbar .navbar-links .nav-link-item:hover .nav-icon{color:#4f46e5;color:var(--primary-color)}.navbar .navbar-links .nav-link-item.active{background-color:#fff;box-shadow:0 1px 3px #00000014;color:#4f46e5;color:var(--primary-color)}.navbar .navbar-links .nav-link-item.active .nav-icon{color:#4f46e5;color:var(--primary-color)}.navbar .navbar-actions{align-items:center;display:flex;gap:8px}@media(max-width:900px){.navbar .navbar-actions{display:none}}.navbar .navbar-actions .nav-btn{align-items:center;border:1px solid #0000;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.85rem;font-weight:600;gap:6px;padding:7px 14px;transition:all .18s}.navbar .navbar-actions .nav-btn.btn-backup{background-color:#ecfdf5;border-color:#a7f3d0;color:#059669}.navbar .navbar-actions .nav-btn.btn-backup:hover{background-color:#d1fae5;transform:translateY(-1px)}.navbar .navbar-actions .nav-btn.btn-logout{background-color:#fef2f2;border-color:#fecaca;color:#ef4444;color:var(--danger-color)}.navbar .navbar-actions .nav-btn.btn-logout:hover{background-color:#fee2e2;transform:translateY(-1px)}.navbar .hamburger-btn{background:none;border:none;border-radius:.375rem;border-radius:var(--radius-sm);color:#1e293b;color:var(--text-primary);cursor:pointer;display:none;padding:6px}@media(max-width:900px){.navbar .hamburger-btn{align-items:center;display:flex;justify-content:center}}.navbar .hamburger-btn:hover{background-color:#f1f5f9}.mobile-menu-drawer{background:#fff;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;left:0;padding:1.5rem;padding:var(--spacing-md);position:fixed;right:0;top:68px;z-index:999}@media(max-width:768px){.mobile-menu-drawer{top:62px}}.mobile-menu-drawer .mobile-links-list{display:flex;flex-direction:column;gap:4px}.mobile-menu-drawer .mobile-links-list .mobile-nav-item{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);color:#1e293b;color:var(--text-primary);display:flex;font-size:.95rem;font-weight:600;gap:12px;padding:12px 14px;text-decoration:none;transition:all .15s}.mobile-menu-drawer .mobile-links-list .mobile-nav-item svg{color:#94a3b8}.mobile-menu-drawer .mobile-links-list .mobile-nav-item.active{background-color:#eef2ff;color:#4f46e5;color:var(--primary-color)}.mobile-menu-drawer .mobile-links-list .mobile-nav-item.active svg{color:#4f46e5;color:var(--primary-color)}.mobile-menu-drawer .mobile-links-list .mobile-nav-item:hover{background-color:#f8fafc}.mobile-menu-drawer .mobile-actions-divider{background:#e2e8f0;background:var(--border-color);height:1px;margin:1rem 0;margin:var(--spacing-sm) 0}.mobile-menu-drawer .mobile-actions-group{display:flex;flex-direction:column;gap:8px}.mobile-menu-drawer .mobile-actions-group .mobile-action-btn{align-items:center;border:1px solid #0000;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:flex;font-size:.92rem;font-weight:600;gap:8px;justify-content:center;padding:12px;transition:all .15s;width:100%}.mobile-menu-drawer .mobile-actions-group .mobile-action-btn.backup{background-color:#ecfdf5;border-color:#a7f3d0;color:#059669}.mobile-menu-drawer .mobile-actions-group .mobile-action-btn.backup:hover{background-color:#d1fae5}.mobile-menu-drawer .mobile-actions-group .mobile-action-btn.logout{background-color:#fef2f2;border-color:#fecaca;color:#ef4444;color:var(--danger-color)}.mobile-menu-drawer .mobile-actions-group .mobile-action-btn.logout:hover{background-color:#fee2e2}.tagihan-container{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;padding:3rem;padding:var(--spacing-xl)}@media(max-width:768px){.tagihan-container{padding:1.5rem;padding:var(--spacing-md)}}.tagihan-container .table-header-block{align-items:flex-start;display:flex;flex-wrap:wrap;gap:1.5rem;gap:var(--spacing-md);justify-content:space-between;margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.tagihan-container .table-header-block .header-text-group .title-with-refresh{align-items:center;display:flex;gap:8px}.tagihan-container .table-header-block .header-text-group .title-with-refresh h3{color:#1e293b;color:var(--text-primary);font-size:1.25rem;font-weight:700;margin:0}.tagihan-container .table-header-block .header-text-group .title-with-refresh .btn-refresh{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:50%;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;height:28px;justify-content:center;transition:all .2s;width:28px}.tagihan-container .table-header-block .header-text-group .title-with-refresh .btn-refresh:hover{background:#eef2ff;color:#4f46e5;color:var(--primary-color);transform:rotate(90deg)}.tagihan-container .table-header-block .header-text-group p{color:#64748b;color:var(--text-secondary);font-size:.85rem;margin:4px 0 0}.tagihan-container .table-header-block .search-box{min-width:300px;position:relative}@media(max-width:768px){.tagihan-container .table-header-block .search-box{min-width:100%;width:100%}}.tagihan-container .table-header-block .search-box .search-icon{color:#94a3b8;left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tagihan-container .table-header-block .search-box .search-field{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:.9rem;outline:none;padding:10px 14px 10px 38px;transition:all .2s;width:100%}.tagihan-container .table-header-block .search-box .search-field:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.tagihan-container .table-controls-bar{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;gap:var(--spacing-sm);justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-sm)}.tagihan-container .table-controls-bar .view-mode-toggle{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);display:inline-flex;gap:2px;padding:4px}.tagihan-container .table-controls-bar .view-mode-toggle .mode-btn{align-items:center;background:#0000;border:none;border-radius:.375rem;border-radius:var(--radius-sm);color:#64748b;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-size:.82rem;font-weight:500;gap:6px;padding:6px 14px;transition:all .15s}.tagihan-container .table-controls-bar .view-mode-toggle .mode-btn:hover{color:#1e293b;color:var(--text-primary)}.tagihan-container .table-controls-bar .view-mode-toggle .mode-btn.active{background:#fff;box-shadow:0 1px 3px #00000014;color:#4f46e5;color:var(--primary-color);font-weight:600}.tagihan-container .table-controls-bar .btn-expand-all{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);color:#64748b;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:500;gap:6px;padding:6px 12px;transition:all .15s}.tagihan-container .table-controls-bar .btn-expand-all:hover{background:#f8fafc;border-color:#c7d2fe;color:#4f46e5;color:var(--primary-color)}.tagihan-container .table-filter-bar{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding-bottom:1.5rem;padding-bottom:var(--spacing-md)}.tagihan-container .table-filter-bar .filter-pills-row{display:flex;flex-wrap:wrap;gap:8px}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:999px;color:#64748b;color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:500;padding:5px 12px;transition:all .15s}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill:hover{border-color:#cbd5e1;color:#1e293b;color:var(--text-primary)}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill.active{background:#4f46e5;background:var(--primary-color);border-color:#4f46e5;border-color:var(--primary-color);color:#fff;font-weight:600}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill.danger.active{background:#dc2626;border-color:#dc2626;color:#fff}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill.danger:not(.active):hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill.warning.active{background:#d97706;border-color:#d97706;color:#fff}.tagihan-container .table-filter-bar .filter-pills-row .filter-pill.warning:not(.active):hover{background:#fffbeb;border-color:#fde68a;color:#d97706}.tagihan-container .table-wrapper{border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);overflow-x:auto}.tagihan-container table{border-collapse:collapse;font-size:.9rem;white-space:nowrap;width:100%}.tagihan-container table thead{background:#f8fafc}.tagihan-container table thead th{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);color:#64748b;color:var(--text-secondary);font-size:.82rem;font-weight:600;letter-spacing:.5px;padding:12px 16px;text-align:left;text-transform:uppercase}.tagihan-container .grouped-table tbody .user-row{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .12s}.tagihan-container .grouped-table tbody .user-row.expanded,.tagihan-container .grouped-table tbody .user-row:hover{background:#f8fafc}.tagihan-container .grouped-table tbody .user-row.has-multiple-bills{border-left:3px solid #4f46e5;border-left:3px solid var(--primary-color)}.tagihan-container .grouped-table tbody .user-row td{padding:14px 16px;vertical-align:middle}.tagihan-container .grouped-table tbody .user-row .expand-trigger-cell{padding-right:4px;text-align:center}.tagihan-container .grouped-table tbody .user-row .btn-chevron{align-items:center;background:none;border:none;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;transition:transform .2s}.tagihan-container .grouped-table tbody .user-row .btn-chevron.open{color:#4f46e5;color:var(--primary-color);transform:rotate(180deg)}.tagihan-container .grouped-table tbody .user-row .user-profile-cell{align-items:center;display:flex;gap:12px}.tagihan-container .grouped-table tbody .user-row .user-profile-cell .user-avatar-mini{align-items:center;background:#eef2ff;border:1px solid #c7d2fe;border-radius:50%;color:#4f46e5;color:var(--primary-color);display:flex;flex-shrink:0;font-size:.9rem;font-weight:700;height:34px;justify-content:center;width:34px}.tagihan-container .grouped-table tbody .user-row .user-profile-cell .user-name-text{color:#1e293b;color:var(--text-primary);font-size:.95rem;font-weight:700}.tagihan-container .grouped-table tbody .user-row .user-profile-cell .user-phone-text{align-items:center;color:#64748b;color:var(--text-secondary);display:flex;font-size:.78rem;gap:4px;margin-top:2px}.tagihan-container .grouped-table tbody .user-row .nik-mono{color:#64748b;color:var(--text-secondary);font-family:monospace;font-size:.85rem}.tagihan-container .grouped-table tbody .user-row .badge-bills{align-items:center;border-radius:999px;display:inline-flex;font-size:.78rem;font-weight:600;gap:5px;padding:4px 10px}.tagihan-container .grouped-table tbody .user-row .badge-bills.single{background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;color:var(--text-secondary)}.tagihan-container .grouped-table tbody .user-row .badge-bills.multiple{background:#eef2ff;border:1px solid #c7d2fe;color:#4f46e5;color:var(--primary-color)}.tagihan-container .grouped-table tbody .user-row .total-obligation-text{color:#4f46e5;color:var(--primary-color);font-size:1.05rem;font-weight:700}.tagihan-container .grouped-table tbody .user-row .user-actions-group{align-items:center;display:flex;gap:8px}.tagihan-container .grouped-table tbody .user-row .user-actions-group .btn-toggle-bills{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.375rem;border-radius:var(--radius-sm);color:#1e293b;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:600;gap:4px;padding:6px 12px;transition:all .15s}.tagihan-container .grouped-table tbody .user-row .user-actions-group .btn-toggle-bills:hover{background:#e2e8f0}.tagihan-container .grouped-table tbody .user-row .user-actions-group .btn-toggle-bills.active{background:#eef2ff;border-color:#c7d2fe;color:#4f46e5;color:var(--primary-color)}.tagihan-container .grouped-table tbody .user-row .user-actions-group .btn-add-bill-user{align-items:center;background:#fff;border:1px solid #4f46e5;border:1px solid var(--primary-color);border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:600;gap:4px;padding:6px 12px;transition:all .15s}.tagihan-container .grouped-table tbody .user-row .user-actions-group .btn-add-bill-user:hover{background:#4f46e5;background:var(--primary-color);color:#fff}.tagihan-container .grouped-table tbody .sub-row-container{background:#f8fafc;border-bottom:2px solid #e2e8f0}.tagihan-container .grouped-table tbody .sub-row-container .sub-row-cell{padding:0 16px 16px 50px}@media(max-width:768px){.tagihan-container .grouped-table tbody .sub-row-container .sub-row-cell{padding:0 8px 12px}}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);overflow:hidden}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table-header-title{align-items:center;background:#f1f5f9;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:10px 14px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table-header-title .sub-title-left{align-items:center;color:#1e293b;color:var(--text-primary);display:flex;font-size:.85rem;gap:8px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table-header-title .sub-title-left svg{color:#4f46e5;color:var(--primary-color)}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table-header-title .btn-add-bill-inline{align-items:center;background:#4f46e5;background:var(--primary-color);border:none;border-radius:.375rem;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px;padding:4px 10px;transition:all .15s}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table-header-title .btn-add-bill-inline:hover{background:#4338ca;background:var(--primary-hover)}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table thead{background:#fafafa}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table thead th{border-bottom:1px solid #e2e8f0;color:#64748b;color:var(--text-secondary);font-size:.75rem;font-weight:600;padding:10px 12px;text-transform:uppercase}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table tbody tr{border-bottom:1px solid #f1f5f9}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table tbody tr:last-child{border-bottom:none}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table tbody tr:hover{background:#f8fafc}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table tbody tr td{font-size:.85rem;padding:10px 12px;vertical-align:middle}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .invoice-meta-cell{align-items:center;display:flex;gap:6px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .invoice-meta-cell .order-tag{background:#f1f5f9;border-radius:4px;color:#64748b;color:var(--text-secondary);font-size:.7rem;font-weight:600;padding:1px 6px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .product-title-sub{color:#1e293b;color:var(--text-primary);font-weight:600}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .bill-amount-sub{color:#4f46e5;color:var(--primary-color);font-weight:700}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .va-mini-box{display:flex;flex-direction:column;font-size:.78rem;gap:2px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .va-mini-box .va-row-mini{align-items:center;display:flex;gap:4px}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .va-mini-box .va-row-mini .bank-name{color:#64748b;color:var(--text-secondary);font-weight:500}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .va-mini-box .va-row-mini code{color:#1e293b;color:var(--text-primary);font-family:monospace;font-weight:600}.tagihan-container .grouped-table tbody .sub-row-container .sub-table-wrapper .sub-table .va-mini-box .no-va-text{color:#94a3b8}.tagihan-container .flat-table tbody tr{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color)}.tagihan-container .flat-table tbody tr:last-child{border-bottom:none}.tagihan-container .flat-table tbody tr:hover{background:#f8fafc}.tagihan-container .flat-table tbody tr td{padding:12px 16px;vertical-align:middle}.tagihan-container .flat-table tbody .multi-pill-indicator{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;color:#4f46e5;color:var(--primary-color);font-size:.7rem;font-weight:600;padding:1px 6px}.tagihan-container .badge-invoice{background:#eef2ff;border:1px solid #c7d2fe;border-radius:4px;color:#4f46e5;color:var(--primary-color);font-family:monospace;font-size:.8rem;font-weight:600;padding:3px 8px}.tagihan-container .user-table-cell{display:flex;flex-direction:column;gap:2px}.tagihan-container .user-table-cell .user-name{color:#1e293b;color:var(--text-primary);font-weight:600}.tagihan-container .user-table-cell .user-phone{align-items:center;color:#64748b;color:var(--text-secondary);display:flex;font-size:.78rem;gap:4px}.tagihan-container .product-badge{color:#1e293b;color:var(--text-primary);font-size:.85rem;font-weight:500}.tagihan-container .due-cell .due-badge{align-items:center;border-radius:999px;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px;padding:3px 8px}.tagihan-container .due-cell .due-badge.normal{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}.tagihan-container .due-cell .due-badge.warning{background:#fffbeb;border:1px solid #fde68a;color:#d97706}.tagihan-container .due-cell .due-badge.danger{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.tagihan-container .due-badge{align-items:center;border-radius:999px;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px;padding:3px 8px}.tagihan-container .due-badge.normal{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}.tagihan-container .due-badge.warning{background:#fffbeb;border:1px solid #fde68a;color:#d97706}.tagihan-container .due-badge.danger{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.tagihan-container .nik-text{color:#64748b;color:var(--text-secondary);font-family:monospace;font-size:.85rem}.tagihan-container .total-amount{color:#4f46e5;color:var(--primary-color);font-size:.95rem;font-weight:700}.tagihan-container .actions-cell{align-items:center;display:flex;gap:6px}.tagihan-container .edit-btn{align-items:center;background:#eef2ff;border:1px solid #c7d2fe;border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:all .2s}.tagihan-container .edit-btn:hover{background:#4f46e5;background:var(--primary-color);color:#fff}.tagihan-container .delete-btn{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:.375rem;border-radius:var(--radius-sm);color:#ef4444;color:var(--danger-color);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:all .2s}.tagihan-container .delete-btn:hover{background:#ef4444;background:var(--danger-color);color:#fff}.tagihan-container .empty-row-cell{padding:48px 16px!important;text-align:center}.tagihan-container .empty-row-cell .empty-data-state{align-items:center;display:flex;flex-direction:column;gap:8px}.tagihan-container .empty-row-cell .empty-data-state .empty-icon{color:#94a3b8}.tagihan-container .empty-row-cell .empty-data-state h4{color:#1e293b;color:var(--text-primary);font-size:1.15rem;margin:0}.tagihan-container .empty-row-cell .empty-data-state p{color:#64748b;color:var(--text-secondary);font-size:.88rem;line-height:1.4;margin:0;max-width:420px}.modal-content{background:#fff;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-md);max-height:90vh;max-width:540px;overflow-y:auto;padding:3rem;padding:var(--spacing-xl);width:100%}.modal-content .modal-header{align-items:flex-start;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding-bottom:12px}.modal-content .modal-header h4{color:#1e293b;color:var(--text-primary);font-size:1.25rem;font-weight:700;margin:0}.modal-content .modal-header .modal-sub{color:#64748b;color:var(--text-secondary);font-size:.82rem}.modal-content .modal-header .modal-sub code{background:#f1f5f9;border-radius:4px;color:#4f46e5;color:var(--primary-color);font-family:monospace;font-weight:600;padding:2px 6px}.modal-content .modal-header .close-modal-btn{align-items:center;background:none;border:none;border-radius:50%;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:4px}.modal-content .modal-header .close-modal-btn:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.modal-content .form-row{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:1fr 1fr}@media(max-width:768px){.modal-content .form-row{grid-template-columns:1fr}}.modal-content .form-group{display:flex;flex-direction:column;gap:6px}.modal-content .form-group label{color:#64748b;color:var(--text-secondary);font-size:.85rem;font-weight:500}.modal-content .form-group input,.modal-content .form-group select{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:.95rem;padding:10px 12px;transition:all .2s}.modal-content .form-group input:focus,.modal-content .form-group select:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a;outline:none}.modal-content .preview-image{border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);height:90px;margin-top:6px;object-fit:cover;width:90px}.modal-content .modal-actions{border-top:1px solid #e2e8f0;border-top:1px solid var(--border-color);display:flex;gap:1rem;gap:var(--spacing-sm);justify-content:flex-end;margin-top:1.5rem;margin-top:var(--spacing-md);padding-top:1.5rem;padding-top:var(--spacing-md)}.modal-content .modal-actions button{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;gap:6px;padding:10px 20px;transition:all .2s}.modal-content .modal-actions button.cancel-btn{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);color:#64748b;color:var(--text-secondary)}.modal-content .modal-actions button.cancel-btn:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.modal-content .modal-actions button.save-btn{background:#4f46e5;background:var(--primary-color);border:1px solid #4f46e5;border:1px solid var(--primary-color);color:#fff}.modal-content .modal-actions button.save-btn:hover{background:#4338ca;background:var(--primary-hover)}.Admin-dashboard{background-color:#f8fafc;background-color:var(--bg-color);display:flex;flex-direction:column;min-height:100vh}.Admin-dashboard .dashboard-content{display:flex;flex:1 1;flex-direction:column;gap:2rem;gap:var(--spacing-lg);margin:0 auto;max-width:1400px;padding:2rem;padding:var(--spacing-lg);width:100%}@media(max-width:768px){.Admin-dashboard .dashboard-content{gap:1.5rem;gap:var(--spacing-md);padding:1.5rem;padding:var(--spacing-md)}}.Admin-dashboard .dashboard-welcome-banner{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;gap:2rem;gap:var(--spacing-lg);justify-content:space-between;padding:3rem;padding:var(--spacing-xl)}@media(max-width:768px){.Admin-dashboard .dashboard-welcome-banner{align-items:flex-start;flex-direction:column;padding:2rem;padding:var(--spacing-lg)}}.Admin-dashboard .dashboard-welcome-banner .banner-left .date-badge{align-items:center;background:#f1f5f9;border-radius:999px;color:#64748b;color:var(--text-secondary);display:inline-flex;font-size:.8rem;font-weight:600;gap:6px;margin-bottom:8px;padding:4px 10px}.Admin-dashboard .dashboard-welcome-banner .banner-left h1{color:#1e293b;color:var(--text-primary);font-size:1.6rem;font-weight:700;margin:0 0 6px}.Admin-dashboard .dashboard-welcome-banner .banner-left p{color:#64748b;color:var(--text-secondary);font-size:.92rem;line-height:1.4;margin:0;max-width:600px}.Admin-dashboard .dashboard-welcome-banner .banner-actions{display:flex;flex-shrink:0;gap:10px}@media(max-width:768px){.Admin-dashboard .dashboard-welcome-banner .banner-actions{flex-direction:column;width:100%}}.Admin-dashboard .dashboard-welcome-banner .banner-actions .btn-action{align-items:center;border:none;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;gap:8px;justify-content:center;padding:10px 18px;transition:all .2s}.Admin-dashboard .dashboard-welcome-banner .banner-actions .btn-action.primary{background:#4f46e5;background:var(--primary-color);color:#fff}.Admin-dashboard .dashboard-welcome-banner .banner-actions .btn-action.primary:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.Admin-dashboard .dashboard-welcome-banner .banner-actions .btn-action.secondary{background:#eef2ff;border:1px solid #c7d2fe;color:#4f46e5;color:var(--primary-color)}.Admin-dashboard .dashboard-welcome-banner .banner-actions .btn-action.secondary:hover{background:#e0e7ff}.Admin-dashboard .kpi-grid{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:repeat(4,1fr)}@media(max-width:1100px){.Admin-dashboard .kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.Admin-dashboard .kpi-grid{grid-template-columns:1fr}}.Admin-dashboard .kpi-grid .kpi-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;padding:2rem;padding:var(--spacing-lg);transition:all .2s ease}.Admin-dashboard .kpi-grid .kpi-card:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.Admin-dashboard .kpi-grid .kpi-card.highlight-kpi{background:linear-gradient(135deg,#fff,#f5f7ff);border-color:#c7d2fe}.Admin-dashboard .kpi-grid .kpi-card .kpi-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-title{color:#64748b;color:var(--text-secondary);font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;width:36px}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap.primary{background:#eef2ff;color:#4f46e5;color:var(--primary-color)}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap.blue{background:#eff6ff;color:#2563eb}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap.green{background:#f0fdf4;color:#16a34a}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap.amber{background:#fffbeb;color:#d97706}.Admin-dashboard .kpi-grid .kpi-card .kpi-header .kpi-icon-wrap.danger{background:#fef2f2;color:#dc2626}.Admin-dashboard .kpi-grid .kpi-card .kpi-value{color:#1e293b;color:var(--text-primary);font-size:1.6rem;font-weight:700;margin-bottom:4px}.Admin-dashboard .kpi-grid .kpi-card .kpi-value.primary{color:#4f46e5;color:var(--primary-color)}.Admin-dashboard .kpi-grid .kpi-card .kpi-value.text-danger{color:#dc2626}.Admin-dashboard .kpi-grid .kpi-card .kpi-value.text-amber{color:#d97706}.Admin-dashboard .kpi-grid .kpi-card .kpi-footer{color:#94a3b8;font-size:.78rem;font-weight:500}.Admin-dashboard .table-section{width:100%}.login-page-admin{align-items:center;background:linear-gradient(135deg,#fff0f0,#ffe0e0);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:1.5rem;padding:var(--spacing-md);position:relative}.login-page-admin:after,.login-page-admin:before{border-radius:50%;content:"";filter:blur(80px);height:600px;position:absolute;width:600px;z-index:0}.login-page-admin:before{background:#ef44441a;left:-200px;top:-200px}.login-page-admin:after{background:#f59e0b1a;bottom:-200px;right:-200px}.login-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffffb3;border:1px solid #ffffff4d;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;max-width:1000px;min-height:600px}@media(max-width:768px){.login-card{flex-direction:column;max-width:500px;min-height:auto}}.login-visual.admin{background:linear-gradient(135deg,#ef4444,#dc2626)}.login-visual.admin:before{background-image:radial-gradient(#ffffff1a 1px,#0000 0);background-size:20px 20px;opacity:.5}.login-visual{align-items:center;color:#fff;flex:1 1;justify-content:center;padding:3rem;padding:var(--spacing-xl);text-align:center}.login-visual img{filter:drop-shadow(0 10px 10px rgba(0,0,0,.2));margin-bottom:2rem;margin-bottom:var(--spacing-lg);max-width:80%;position:relative;z-index:2}.login-visual h2{font-size:2rem;font-weight:700;margin-bottom:1rem;margin-bottom:var(--spacing-sm);position:relative;z-index:2}.login-visual p{font-size:1.1rem;opacity:.9;position:relative;z-index:2}.login-form-container{background:var(--card-bg);padding:3rem;padding:var(--spacing-xl)}.login-form-container .form-header h3{font-size:1.8rem}.login-form-container form{max-width:400px}.input-group .input-wrapper input:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.remember-forgot .remember-me input[type=checkbox]{accent-color:#ef4444}.submit-btn{background:#ef4444}.submit-btn:hover{background:#dc2626}.dashboard-container{background-color:#f8fafc;background-color:var(--bg-color);display:flex;flex-direction:column;min-height:100vh}.dashboard-header{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffffb3;background:#fffffff2;border:1px solid #ffffff4d;border-bottom-color:#e2e8f0;border-bottom:1px solid var(--border-color);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;padding:1rem 2rem;padding:var(--spacing-sm) var(--spacing-lg);position:-webkit-sticky;position:sticky;top:0;z-index:100}.dashboard-header .header-brand{align-items:center;color:#4f46e5;color:var(--primary-color);font-size:1.25rem;font-weight:700}.dashboard-header .header-actions,.dashboard-header .header-brand{display:flex;gap:1rem;gap:var(--spacing-sm)}.dashboard-header .logout-btn{align-items:center;background-color:#fee2e2;border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#ef4444;color:var(--danger-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;padding:8px 16px;transition:all .2s}.dashboard-header .logout-btn:hover{background-color:#fecaca}.dashboard-content{display:flex;flex:1 1;flex-direction:column;margin:0 auto;max-width:1100px;padding:2rem;padding:var(--spacing-lg);width:100%}@media(max-width:768px){.dashboard-content{padding:1.5rem;padding:var(--spacing-md)}}.view-wrapper{display:flex;flex-direction:column;gap:2rem;gap:var(--spacing-lg)}.welcome-section h1{color:#1e293b;color:var(--text-primary);font-size:1.8rem;font-weight:700;margin-bottom:4px}.welcome-section p{color:#64748b;color:var(--text-secondary);font-size:.95rem;margin:0}.summary-cards-grid{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.summary-cards-grid .summary-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:4px;padding:1.5rem 2rem;padding:var(--spacing-md) var(--spacing-lg)}.summary-cards-grid .summary-card.highlight{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-color:#c7d2fe}.summary-cards-grid .summary-card .card-label{color:#64748b;color:var(--text-secondary);font-size:.82rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.summary-cards-grid .summary-card .card-value{color:#1e293b;color:var(--text-primary);font-size:1.5rem;font-weight:700}.summary-cards-grid .summary-card .card-value.primary{color:#4f46e5;color:var(--primary-color)}.bills-list-section .section-title-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.bills-list-section .section-title-row h3{align-items:center;color:#1e293b;color:var(--text-primary);display:flex;font-size:1.2rem;font-weight:600;gap:8px;margin:0}.bills-list-section .section-title-row h3 svg{color:#4f46e5;color:var(--primary-color)}.bills-list-section .section-title-row .badge-count{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;color:#4f46e5;color:var(--primary-color);font-size:.8rem;font-weight:600;padding:4px 12px}.bills-list-section .empty-bills-card{align-items:center;background:#fff;border:1px dashed #e2e8f0;border:1px dashed var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:12px;padding:48px 24px;text-align:center}.bills-list-section .empty-bills-card .empty-icon{color:#16a34a}.bills-list-section .empty-bills-card h4{color:#1e293b;color:var(--text-primary);font-size:1.3rem;margin:0}.bills-list-section .empty-bills-card p{color:#64748b;color:var(--text-secondary);font-size:.95rem;line-height:1.5;margin:0 auto;max-width:450px}.bills-list-section .bills-grid{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.bills-list-section .bill-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:2rem;padding:var(--spacing-lg);transition:all .2s ease}.bills-list-section .bill-card:hover{border-color:#a5b4fc;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.bills-list-section .bill-card .bill-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-sm)}.bills-list-section .bill-card .bill-card-header .invoice-tag{background:#f1f5f9;border-radius:4px;color:#64748b;color:var(--text-secondary);font-family:monospace;font-size:.78rem;font-weight:600;padding:3px 8px}.bills-list-section .bill-card .bill-card-header .due-badge{align-items:center;border-radius:999px;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px;padding:3px 8px}.bills-list-section .bill-card .bill-card-header .due-badge.normal{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}.bills-list-section .bill-card .bill-card-header .due-badge.warning{background:#fffbeb;border:1px solid #fde68a;color:#d97706}.bills-list-section .bill-card .bill-card-header .due-badge.danger{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.bills-list-section .bill-card .bill-card-body{margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.bills-list-section .bill-card .bill-card-body .product-title{color:#1e293b;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0 0 12px}.bills-list-section .bill-card .bill-card-body .amount-label{color:#64748b;color:var(--text-secondary);font-size:.8rem;font-weight:500;text-transform:uppercase}.bills-list-section .bill-card .bill-card-body .amount-value{color:#4f46e5;color:var(--primary-color);font-size:1.5rem;font-weight:700;margin-bottom:12px}.bills-list-section .bill-card .bill-card-body .due-date-row{align-items:center;color:#64748b;color:var(--text-secondary);display:flex;font-size:.85rem;gap:6px}.bills-list-section .bill-card .bill-card-footer{border-top:1px solid #f1f5f9;padding-top:1rem;padding-top:var(--spacing-sm)}.bills-list-section .bill-card .bill-card-footer .btn-view-detail{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;padding:10px 14px;transition:all .2s;width:100%}.bills-list-section .bill-card .bill-card-footer .btn-view-detail:hover{background:#4f46e5;background:var(--primary-color);border-color:#4f46e5;border-color:var(--primary-color);color:#fff}.navigation-bar-back{align-items:center;display:flex}.navigation-bar-back .btn-back{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);color:#1e293b;color:var(--text-primary);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;gap:8px;padding:8px 16px;transition:all .2s}.navigation-bar-back .btn-back:hover{background:#f1f5f9;border-color:#c7d2fe;color:#4f46e5;color:var(--primary-color)}.dashboard-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);padding:3rem;padding:var(--spacing-xl)}.dashboard-card.detail-card .detail-card-header{align-items:center;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;margin-bottom:2rem;margin-bottom:var(--spacing-lg);padding-bottom:1.5rem;padding-bottom:var(--spacing-md)}.dashboard-card.detail-card .detail-card-header h2{color:#1e293b;color:var(--text-primary);font-size:1.5rem;margin:0}.dashboard-card.detail-card .detail-card-header .invoice-sub{color:#64748b;color:var(--text-secondary);font-size:.9rem;margin:4px 0 0}.dashboard-card.detail-card .detail-card-header .status-badge-unpaid{background:#fef2f2;border:1px solid #fecaca;border-radius:999px;color:#dc2626;font-size:.85rem;font-weight:600;padding:6px 14px}.data-section{align-items:flex-start;display:flex;gap:3rem;gap:var(--spacing-xl)}@media(max-width:768px){.data-section{flex-direction:column}}.data-section .id-cards{display:flex;flex:1 1;flex-direction:column;gap:1.5rem;gap:var(--spacing-md);max-width:320px}@media(max-width:768px){.data-section .id-cards{max-width:100%;width:100%}}.data-section .id-cards h3{color:#64748b;color:var(--text-secondary);font-size:1rem;font-weight:600;margin:0;text-transform:uppercase}.data-section .id-cards img{border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);width:100%}.data-section .id-cards .security-notice{align-items:center;background:#f0fdf4;border:1px solid #dcfce7;border-radius:.375rem;border-radius:var(--radius-sm);color:#16a34a;display:flex;font-size:.78rem;gap:6px;padding:8px 12px}.data-section .info-form{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;flex:2 1;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));width:100%}.info-item{display:flex;flex-direction:column;gap:4px}.info-item.full-width{grid-column:1/-1}.info-item.highlight-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);padding:12px}.info-item label{color:#64748b;color:var(--text-secondary);font-size:.82rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.info-item .value{background:#f8fafc;background:var(--bg-color);border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);color:#1e293b;color:var(--text-primary);min-height:42px;padding:10px 12px}.info-item .value,.pay-btn{align-items:center;display:flex;font-size:1rem;font-weight:600}.pay-btn{background:#4f46e5;background:var(--primary-color);border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#fff;cursor:pointer;gap:8px;grid-column:1/-1;justify-content:center;margin-top:1rem;margin-top:var(--spacing-sm);padding:14px;transition:all .2s}.pay-btn:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.payment-page .header{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);margin-bottom:2rem;margin-bottom:var(--spacing-lg);padding-bottom:1.5rem;padding-bottom:var(--spacing-md)}.payment-page .header h2{color:#1e293b;color:var(--text-primary);font-size:1.5rem;margin:0}.payment-page .header .invoice-sub{color:#64748b;color:var(--text-secondary);font-size:.9rem;margin:4px 0 0}.payment-page .pay-summary{background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid #c7d2fe;border-radius:.5rem;border-radius:var(--radius-md);margin-bottom:2rem;margin-bottom:var(--spacing-lg);padding:1.5rem 2rem;padding:var(--spacing-md) var(--spacing-lg)}.payment-page .payment-details{display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-md)}.payment-page .payment-details h3{color:#1e293b;color:var(--text-primary);font-size:1.15rem;margin:0}.payment-page .payment-details .instruction-text{color:#64748b;color:var(--text-secondary);font-size:.9rem;margin:0}.payment-page .virtual-account-card{background:#fff;border:1px solid #dbeafe;border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);overflow:hidden;padding:1.5rem;padding:var(--spacing-md);position:relative}.payment-page .virtual-account-card .va-header-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-sm)}.payment-page .virtual-account-card .va-header-row h4{color:#4f46e5;color:var(--primary-color);font-size:1.05rem;font-weight:700;margin:0}.payment-page .virtual-account-card .va-header-row .badge-official{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;color:#059669;font-size:.72rem;font-weight:700;padding:2px 8px}.payment-page .va-row{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;border-radius:var(--radius-sm);display:flex;justify-content:space-between;padding:10px 14px}.payment-page .va-row .va-number{color:#1e293b;color:var(--text-primary);font-family:monospace;font-size:1.25rem;font-weight:700;letter-spacing:1.5px}.payment-page .va-row button{align-items:center;background:#fff;border:1px solid #c7d2fe;border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:6px;padding:6px 14px;transition:all .2s}.payment-page .va-row button:hover{background:#4f46e5;background:var(--primary-color);color:#fff}.payment-page .payment-guide-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);margin-top:1.5rem;margin-top:var(--spacing-md);padding:1.5rem;padding:var(--spacing-md)}.payment-page .payment-guide-box h4{align-items:center;color:#1e293b;color:var(--text-primary);display:flex;font-size:.95rem;gap:6px;margin:0 0 10px}.payment-page .payment-guide-box ol{color:#64748b;color:var(--text-secondary);display:flex;flex-direction:column;font-size:.88rem;gap:6px;line-height:1.5;margin:0;padding-left:20px}.payment-page .payment-guide-box ol strong{color:#1e293b;color:var(--text-primary)}.footer-container{background:#f8fafc;background:var(--bg-color);border-top:1px solid #e2e8f0;border-top:1px solid var(--border-color);display:flex;gap:3rem;gap:var(--spacing-xl);justify-content:center;margin-top:auto;padding:1.5rem;padding:var(--spacing-md);text-align:center}.footer-container img{filter:grayscale(100%);height:32px;opacity:.7;transition:all .3s}.footer-container img:hover{filter:grayscale(0);opacity:1}.login-page{align-items:center;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:1.5rem;padding:var(--spacing-md);position:relative}.login-page:after,.login-page:before{border-radius:50%;content:"";filter:blur(80px);height:600px;position:absolute;width:600px;z-index:0}.login-page:before{background:#4f46e51a;left:-200px;top:-200px}.login-page:after{background:#10b9811a;bottom:-200px;right:-200px}.login-card{background:#fff;border-radius:24px;box-shadow:0 25px 60px -15px #0f172a2e,0 0 0 1px #e2e8f0cc;display:flex;max-width:1020px;min-height:620px;overflow:hidden;position:relative;width:100%;z-index:1}@media(max-width:768px){.login-card{border-radius:20px;box-shadow:0 20px 40px -10px #00000040;flex-direction:column;max-width:460px;min-height:auto}}.login-visual{background-image:url(/static/media/userlogincard.846c4813a9d42409e1b7.jpeg);background-position:50%;background-repeat:no-repeat;background-size:cover;display:flex;flex:1.15 1;flex-direction:column;justify-content:flex-end;min-height:620px;overflow:hidden;padding:2.5rem;position:relative}.login-visual .login-visual-overlay{background:linear-gradient(180deg,#0000 0,#0000 45%,#0f172a40 70%,#0f172ad1);inset:0;pointer-events:none;position:absolute;z-index:1}.login-visual .login-visual-content{color:#fff;position:relative;z-index:2}.login-visual .login-visual-content .brand-badge{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#fff3;border:1px solid #ffffff59;border-radius:20px;color:#fff;display:inline-flex;font-size:.82rem;font-weight:600;gap:8px;letter-spacing:.5px;margin-bottom:12px;padding:6px 14px}.login-visual .login-visual-content .brand-badge .dot{background:#34d399;border-radius:50%;box-shadow:0 0 8px #34d399;height:8px;width:8px}.login-visual .login-visual-content h2{color:#fff;font-size:2.1rem;font-weight:800;line-height:1.2;margin:0 0 8px;text-shadow:0 2px 10px #0009}.login-visual .login-visual-content p{color:#fffffff2;font-size:1rem;line-height:1.5;margin:0;text-shadow:0 1px 6px #0009}@media(max-width:768px){.login-visual{display:none}}.login-form-container{align-items:center;background:#fff;display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:3rem 2.8rem;position:relative;z-index:2}.login-form-container .login-form-card{background:#0000;border:none;box-shadow:none;max-width:400px;padding:0;width:100%}@media(max-width:768px){.login-form-container{background-image:url(/static/media/userlogincard.846c4813a9d42409e1b7.jpeg);background-position:50%;background-repeat:no-repeat;background-size:23rem;min-height:560px;padding:2rem 1.25rem}.login-form-container .login-form-card{background:hsla(0,0%,100%,.426);border:1px solid #ffffffb3;border-radius:20px;box-shadow:0 20px 45px -10px #0f172a38;padding:2rem 1.5rem 1.8rem}.login-form-container .form-header h3{-webkit-text-stroke:.5px #fff;color:#000;text-shadow:1px 1px 2px #ffffffe6}.login-form-container .form-header p{-webkit-text-stroke:.3px #fff;color:#000;text-shadow:1px 1px 2px #ffffffe6}.login-form-container .input-group label{color:#000;font-weight:600;text-shadow:0 0 3px #fff}.login-form-container .remember-forgot{color:#000}.login-form-container .remember-forgot .remember-me{color:#000;font-weight:500;text-shadow:0 0 3px #fff}}.login-form-container .form-header{margin-bottom:2rem;margin-bottom:var(--spacing-lg);text-align:center}.login-form-container .form-header h3{color:#1e293b;color:var(--text-primary);font-size:1.75rem;font-weight:700;margin-bottom:.5rem;margin-bottom:var(--spacing-xs)}.login-form-container .form-header p{color:#64748b;color:var(--text-secondary);font-size:.9rem;margin:0}.login-form-container form{margin:0 auto;width:100%}.input-group{margin-bottom:1.5rem;margin-bottom:var(--spacing-md);position:relative}.input-group label{color:#64748b;color:var(--text-secondary);display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem;margin-bottom:var(--spacing-xs)}.input-group .input-wrapper{align-items:center;display:flex;position:relative}.input-group .input-wrapper .icon-left{color:#64748b;color:var(--text-secondary);left:12px;pointer-events:none;position:absolute}.input-group .input-wrapper input{background:#f8fafc;background:var(--bg-color);border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:1rem;padding:12px 12px 12px 40px;transition:all .2s;width:100%}.input-group .input-wrapper input:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.input-group .input-wrapper input::placeholder{color:#94a3b8}.input-group .input-wrapper .toggle-password{align-items:center;background:none;border:none;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;padding:4px;position:absolute;right:12px;transition:color .2s}.input-group .input-wrapper .toggle-password:hover{color:#1e293b;color:var(--text-primary)}.remember-forgot{align-items:center;display:flex;font-size:.9rem;justify-content:space-between;margin-bottom:2rem;margin-bottom:var(--spacing-lg)}.remember-forgot .remember-me{align-items:center;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;gap:.5rem}.remember-forgot .remember-me input[type=checkbox]{accent-color:#4f46e5;accent-color:var(--primary-color);height:16px;width:16px}.submit-btn{background:#4f46e5;background:var(--primary-color);border-radius:.5rem;border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:600;padding:12px;transition:all .2s;width:100%}.submit-btn:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{cursor:not-allowed;opacity:.7}.partners-footer{display:flex;gap:2rem;gap:var(--spacing-lg);justify-content:center;margin-top:3rem;margin-top:var(--spacing-xl)}.partners-footer img{height:40px;object-fit:contain;opacity:.8;transition:opacity .2s}.partners-footer img:hover{opacity:1}.error-message{align-items:center;background:#fef2f2;border:1px solid #fee2e2;border-radius:.375rem;border-radius:var(--radius-sm);color:#ef4444;color:var(--danger-color);display:flex;font-size:.9rem;gap:8px;margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding:10px}.buat-akun-root{background-color:#f8fafc;background-color:var(--bg-color);display:flex;flex-direction:column;min-height:100vh}.buat-akun-root .buat-akun-container{margin:2rem auto;margin:var(--spacing-lg) auto;max-width:850px;padding:0 1.5rem;padding:0 var(--spacing-md);width:100%}.buat-akun-root .page-intro{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding:2rem;padding:var(--spacing-lg)}.buat-akun-root .page-intro .intro-title{align-items:center;display:flex;gap:1.5rem;gap:var(--spacing-md)}.buat-akun-root .page-intro .intro-title .intro-icon{color:#4f46e5;color:var(--primary-color);flex-shrink:0}.buat-akun-root .page-intro .intro-title h2{color:#1e293b;color:var(--text-primary);font-size:1.4rem;font-weight:700;margin:0 0 4px}.buat-akun-root .page-intro .intro-title p{color:#64748b;color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin:0}.buat-akun-root .buat-akun-form{display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-md)}.buat-akun-root .buat-akun-form .section-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);padding:2rem;padding:var(--spacing-lg)}.buat-akun-root .buat-akun-form .section-card .section-header{align-items:flex-start;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;gap:1rem;gap:var(--spacing-sm);margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding-bottom:.5rem;padding-bottom:var(--spacing-xs)}.buat-akun-root .buat-akun-form .section-card .section-header .step-badge{align-items:center;background:#eef2ff;border-radius:50%;color:#4f46e5;color:var(--primary-color);display:flex;flex-shrink:0;font-size:.9rem;font-weight:700;height:28px;justify-content:center;width:28px}.buat-akun-root .buat-akun-form .section-card .section-header .header-flex-title{align-items:center;display:flex;justify-content:space-between;width:100%}@media(max-width:768px){.buat-akun-root .buat-akun-form .section-card .section-header .header-flex-title{align-items:flex-start;flex-direction:column;gap:8px}}.buat-akun-root .buat-akun-form .section-card .section-header h3{color:#1e293b;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0}.buat-akun-root .buat-akun-form .section-card .section-header p{color:#64748b;color:var(--text-secondary);font-size:.85rem;margin:2px 0 0}.buat-akun-root .buat-akun-form .section-card .section-header .btn-generate-password{align-items:center;background:#eef2ff;border:1px solid #c7d2fe;border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:inline-flex;font-size:.82rem;font-weight:600;gap:6px;padding:6px 12px;transition:all .2s}.buat-akun-root .buat-akun-form .section-card .section-header .btn-generate-password:hover{background:#4f46e5;background:var(--primary-color);color:#fff}.buat-akun-root .buat-akun-form .form-group{margin-bottom:1.5rem;margin-bottom:var(--spacing-md);position:relative}.buat-akun-root .buat-akun-form .form-group label{color:#64748b;color:var(--text-secondary);display:block;font-size:.88rem;font-weight:500;margin-bottom:6px}.buat-akun-root .buat-akun-form .form-group .label-with-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:6px}.buat-akun-root .buat-akun-form .form-group .label-with-meta label{margin-bottom:0}.buat-akun-root .buat-akun-form .form-group .label-with-meta .optional-badge{background:#f1f5f9;border-radius:999px;color:#64748b;color:var(--text-secondary);font-size:.78rem;font-weight:500;padding:2px 8px}.buat-akun-root .buat-akun-form .form-group .label-with-meta .char-counter{color:#64748b;color:var(--text-secondary);font-size:.78rem;font-weight:500}.buat-akun-root .buat-akun-form .form-group .label-with-meta .char-counter.valid{color:#16a34a;font-weight:600}.buat-akun-root .buat-akun-form .form-group .label-with-meta .char-counter.error{color:#ef4444;color:var(--danger-color)}.buat-akun-root .buat-akun-form .form-group .field-hint{color:#94a3b8;display:block;font-size:.78rem;margin-top:4px}.buat-akun-root .buat-akun-form .form-row{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:1fr 1fr}@media(max-width:768px){.buat-akun-root .buat-akun-form .form-row{grid-template-columns:1fr}}.buat-akun-root .buat-akun-form .input-with-icon{align-items:center;display:flex;position:relative}.buat-akun-root .buat-akun-form .input-with-icon .field-icon{color:#94a3b8;left:12px;pointer-events:none;position:absolute}.buat-akun-root .buat-akun-form .input-with-icon input{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#1e293b;color:var(--text-primary);font-size:.95rem;padding:10px 14px 10px 38px;transition:all .2s;width:100%}.buat-akun-root .buat-akun-form .input-with-icon input:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a;outline:none}.buat-akun-root .buat-akun-form .input-with-icon.password-field input{padding-right:40px}.buat-akun-root .buat-akun-form .input-with-icon.password-field .toggle-visibility-btn{align-items:center;background:none;border:none;color:#94a3b8;cursor:pointer;display:flex;justify-content:center;padding:4px;position:absolute;right:10px;transition:color .15s}.buat-akun-root .buat-akun-form .input-with-icon.password-field .toggle-visibility-btn:hover{color:#1e293b;color:var(--text-primary)}.buat-akun-root .buat-akun-form .password-feedback{align-items:center;display:flex;font-size:.8rem;font-weight:500;gap:5px;margin-top:5px}.buat-akun-root .buat-akun-form .password-feedback.success{color:#16a34a}.buat-akun-root .buat-akun-form .password-feedback.error{color:#ef4444;color:var(--danger-color)}.buat-akun-root .buat-akun-form .info-tip-box{align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.5rem;border-radius:var(--radius-md);color:#1e40af;display:flex;font-size:.85rem;gap:10px;line-height:1.5;margin-top:1rem;margin-top:var(--spacing-sm);padding:12px 16px}.buat-akun-root .buat-akun-form .info-tip-box .info-icon{color:#2563eb;flex-shrink:0;margin-top:2px}.buat-akun-root .buat-akun-form .info-tip-box strong{color:#1e3a8a}.buat-akun-root .buat-akun-form .form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.buat-akun-root .buat-akun-form .form-actions button{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.95rem;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s}.buat-akun-root .buat-akun-form .form-actions .cancel-btn{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);color:#64748b;color:var(--text-secondary)}.buat-akun-root .buat-akun-form .form-actions .cancel-btn:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.buat-akun-root .buat-akun-form .form-actions .submit-btn{background:#4f46e5;background:var(--primary-color);border:none;color:#fff}.buat-akun-root .buat-akun-form .form-actions .submit-btn:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.buat-akun-root .buat-akun-form .form-actions .submit-btn:disabled{cursor:not-allowed;opacity:.65;transform:none}.buat-akun-root .buat-akun-form .msg{border-radius:.5rem;border-radius:var(--radius-md);font-size:.9rem;padding:12px;text-align:center}.buat-akun-root .buat-akun-form .msg.success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}.buat-akun-root .buat-akun-form .msg.error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}.buat-pembayaran-root{background-color:#f8fafc;background-color:var(--bg-color);display:flex;flex-direction:column;min-height:100vh}.buat-pembayaran-root .buat-pembayaran-container{margin:2rem auto;margin:var(--spacing-lg) auto;max-width:900px;padding:0 1.5rem;padding:0 var(--spacing-md);width:100%}.buat-pembayaran-root .page-intro{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding:2rem;padding:var(--spacing-lg)}.buat-pembayaran-root .page-intro .intro-title{align-items:center;display:flex;gap:1.5rem;gap:var(--spacing-md)}.buat-pembayaran-root .page-intro .intro-title .intro-icon{color:#4f46e5;color:var(--primary-color);flex-shrink:0}.buat-pembayaran-root .page-intro .intro-title h2{color:#1e293b;color:var(--text-primary);font-size:1.4rem;font-weight:700;margin:0 0 4px}.buat-pembayaran-root .page-intro .intro-title p{color:#64748b;color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin:0}.buat-pembayaran-root .buat-pembayaran-form{display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-md)}.buat-pembayaran-root .buat-pembayaran-form .section-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);padding:2rem;padding:var(--spacing-lg)}.buat-pembayaran-root .buat-pembayaran-form .section-card .section-header{align-items:flex-start;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;gap:1rem;gap:var(--spacing-sm);margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding-bottom:.5rem;padding-bottom:var(--spacing-xs)}.buat-pembayaran-root .buat-pembayaran-form .section-card .section-header .step-badge{align-items:center;background:#eef2ff;border-radius:50%;color:#4f46e5;color:var(--primary-color);display:flex;flex-shrink:0;font-size:.9rem;font-weight:700;height:28px;justify-content:center;width:28px}.buat-pembayaran-root .buat-pembayaran-form .section-card .section-header h3{color:#1e293b;color:var(--text-primary);font-size:1.1rem;font-weight:600;margin:0}.buat-pembayaran-root .buat-pembayaran-form .section-card .section-header p{color:#64748b;color:var(--text-secondary);font-size:.85rem;margin:2px 0 0}.buat-pembayaran-root .buat-pembayaran-form .form-group{margin-bottom:1.5rem;margin-bottom:var(--spacing-md);position:relative}.buat-pembayaran-root .buat-pembayaran-form .form-group label{color:#64748b;color:var(--text-secondary);display:block;font-size:.88rem;font-weight:500;margin-bottom:6px}.buat-pembayaran-root .buat-pembayaran-form .form-group input,.buat-pembayaran-root .buat-pembayaran-form .form-group select{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);color:#1e293b;color:var(--text-primary);font-size:.95rem;padding:10px 14px;transition:all .2s;width:100%}.buat-pembayaran-root .buat-pembayaran-form .form-group input:focus,.buat-pembayaran-root .buat-pembayaran-form .form-group select:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a;outline:none}.buat-pembayaran-root .buat-pembayaran-form .form-row{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:1fr 1fr}@media(max-width:768px){.buat-pembayaran-root .buat-pembayaran-form .form-row{grid-template-columns:1fr}}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);left:0;margin-top:4px;max-height:250px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:50}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item{align-items:center;border-bottom:1px solid #f1f5f9;cursor:pointer;display:flex;justify-content:space-between;padding:10px 14px;transition:background .15s}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item:last-child{border-bottom:none}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item:hover{background-color:#f1f5f9}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .dropdown-item-main{align-items:center;display:flex;gap:10px}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .dropdown-item-main .user-icon{color:#4f46e5;color:var(--primary-color)}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .dropdown-item-main .user-name{color:#1e293b;color:var(--text-primary);font-size:.95rem;font-weight:600}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .dropdown-item-main .user-meta{color:#64748b;color:var(--text-secondary);font-size:.8rem}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .user-tagihan-badge .badge-active{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;color:#4f46e5;color:var(--primary-color);font-size:.75rem;font-weight:600;padding:3px 8px}.buat-pembayaran-root .buat-pembayaran-form .dropdown-list .dropdown-item .user-tagihan-badge .badge-empty{background:#f1f5f9;border-radius:999px;color:#64748b;color:var(--text-secondary);font-size:.75rem;padding:3px 8px}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);margin-top:10px;padding:14px}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header{align-items:center;display:flex;justify-content:space-between}@media(max-width:768px){.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header{align-items:flex-start;flex-direction:column;gap:8px}}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .user-info-brief{align-items:center;display:flex;gap:12px}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .user-info-brief .user-avatar{align-items:center;background:#4f46e5;background:var(--primary-color);border-radius:50%;color:#fff;display:flex;font-size:1.1rem;font-weight:700;height:40px;justify-content:center;width:40px}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .user-info-brief h4{color:#1e293b;color:var(--text-primary);font-size:1rem;margin:0}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .user-info-brief p{color:#64748b;color:var(--text-secondary);font-size:.82rem;margin:2px 0 0}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .btn-change-user{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);color:#64748b;color:var(--text-secondary);cursor:pointer;font-size:.82rem;font-weight:500;padding:6px 12px;transition:all .2s}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .selected-user-header .btn-change-user:hover{background:#fee2e2;border-color:#fca5a5;color:#ef4444;color:var(--danger-color)}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .tagihan-status-box{align-items:center;border-top:1px dashed #cbd5e1;display:flex;font-size:.85rem;justify-content:space-between;margin-top:10px;padding-top:10px}@media(max-width:768px){.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .tagihan-status-box{align-items:flex-start;flex-direction:column;gap:6px}}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .tagihan-status-box .btn-toggle-existing{align-items:center;background:none;border:none;color:#4f46e5;color:var(--primary-color);cursor:pointer;display:flex;font-size:.82rem;font-weight:600;gap:4px}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .tagihan-status-box .btn-toggle-existing:hover{text-decoration:underline}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list{margin-top:12px;overflow-x:auto}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table{border-collapse:collapse;font-size:.82rem;width:100%}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table td,.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table th{border:1px solid #e2e8f0;padding:8px 10px;text-align:left}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table th{background:#f1f5f9;color:#64748b;color:var(--text-secondary);font-weight:600}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table td{background:#fff}.buat-pembayaran-root .buat-pembayaran-form .selected-user-card .existing-bills-list table code{background:#eef2ff;border-radius:4px;color:#4f46e5;color:var(--primary-color);font-family:monospace;padding:2px 6px}.buat-pembayaran-root .buat-pembayaran-form .bank-chips,.buat-pembayaran-root .buat-pembayaran-form .preset-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.buat-pembayaran-root .buat-pembayaran-form .bank-chips .bank-chip,.buat-pembayaran-root .buat-pembayaran-form .bank-chips .preset-chip,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .bank-chip,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .preset-chip{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:999px;color:#64748b;color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:500;padding:5px 12px;transition:all .15s}.buat-pembayaran-root .buat-pembayaran-form .bank-chips .bank-chip:hover,.buat-pembayaran-root .buat-pembayaran-form .bank-chips .preset-chip:hover,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .bank-chip:hover,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .preset-chip:hover{border-color:#4f46e5;border-color:var(--primary-color);color:#4f46e5;color:var(--primary-color)}.buat-pembayaran-root .buat-pembayaran-form .bank-chips .bank-chip.active,.buat-pembayaran-root .buat-pembayaran-form .bank-chips .preset-chip.active,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .bank-chip.active,.buat-pembayaran-root .buat-pembayaran-form .preset-chips .preset-chip.active{background:#4f46e5;background:var(--primary-color);border-color:#4f46e5;border-color:var(--primary-color);color:#fff}.buat-pembayaran-root .buat-pembayaran-form .quick-dates{display:flex;gap:6px;margin-bottom:6px}.buat-pembayaran-root .buat-pembayaran-form .quick-dates button{background:#fff;border:1px solid #cbd5e1;border-radius:.375rem;border-radius:var(--radius-sm);color:#64748b;color:var(--text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;padding:3px 10px;transition:all .15s}.buat-pembayaran-root .buat-pembayaran-form .quick-dates button:hover{background:#eef2ff;border-color:#a5b4fc;color:#4f46e5;color:var(--primary-color)}.buat-pembayaran-root .buat-pembayaran-form .currency-preview{color:#16a34a;font-size:.82rem;margin-top:4px}.buat-pembayaran-root .buat-pembayaran-form .currency-preview strong{font-weight:600}.buat-pembayaran-root .buat-pembayaran-form .va-section-grid{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:1fr 1fr}@media(max-width:768px){.buat-pembayaran-root .buat-pembayaran-form .va-section-grid{grid-template-columns:1fr}}.buat-pembayaran-root .buat-pembayaran-form .va-section-grid .va-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;border-radius:var(--radius-md);padding:14px}.buat-pembayaran-root .buat-pembayaran-form .va-section-grid .va-box .va-box-header{align-items:center;color:#4f46e5;color:var(--primary-color);display:flex;font-size:.92rem;font-weight:600;gap:6px;margin-bottom:12px}.buat-pembayaran-root .buat-pembayaran-form .va-section-grid .va-box .btn-text-action{align-items:center;background:none;border:none;color:#4f46e5;color:var(--primary-color);cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:600;gap:4px}.buat-pembayaran-root .buat-pembayaran-form .va-section-grid .va-box .btn-text-action:hover{text-decoration:underline}.buat-pembayaran-root .buat-pembayaran-form .existing-ktp-notice{align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.5rem;border-radius:var(--radius-md);color:#166534;display:flex;font-size:.85rem;gap:8px;margin-bottom:12px;padding:10px 14px}.buat-pembayaran-root .buat-pembayaran-form .upload-container{align-items:center;display:flex;gap:15px}@media(max-width:768px){.buat-pembayaran-root .buat-pembayaran-form .upload-container{align-items:flex-start;flex-direction:column}}.buat-pembayaran-root .buat-pembayaran-form .upload-container .custom-file-upload{align-items:center;background-color:#f8fafc;border:2px dashed #cbd5e1;border-radius:.5rem;border-radius:var(--radius-md);color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:220px;padding:16px 24px;text-align:center;transition:all .2s}.buat-pembayaran-root .buat-pembayaran-form .upload-container .custom-file-upload:hover{background-color:#eef2ff;border-color:#4f46e5;border-color:var(--primary-color);color:#4f46e5;color:var(--primary-color)}.buat-pembayaran-root .buat-pembayaran-form .upload-container .custom-file-upload .upload-title{font-size:.9rem;font-weight:600}.buat-pembayaran-root .buat-pembayaran-form .upload-container .custom-file-upload .upload-subtitle{color:#94a3b8;font-size:.75rem}.buat-pembayaran-root .buat-pembayaran-form .upload-container .preview-box{align-items:center;display:flex;flex-direction:column;gap:4px}.buat-pembayaran-root .buat-pembayaran-form .upload-container .preview-box img{border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);height:80px;object-fit:cover;width:80px}.buat-pembayaran-root .buat-pembayaran-form .upload-container .preview-box span{color:#16a34a;font-size:.75rem;font-weight:600}.buat-pembayaran-root .buat-pembayaran-form .form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:10px}.buat-pembayaran-root .buat-pembayaran-form .form-actions button{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.95rem;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s}.buat-pembayaran-root .buat-pembayaran-form .form-actions .cancel-btn{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);color:#64748b;color:var(--text-secondary)}.buat-pembayaran-root .buat-pembayaran-form .form-actions .cancel-btn:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.buat-pembayaran-root .buat-pembayaran-form .form-actions .submit-btn{background:#4f46e5;background:var(--primary-color);border:none;color:#fff}.buat-pembayaran-root .buat-pembayaran-form .form-actions .submit-btn:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.buat-pembayaran-root .buat-pembayaran-form .form-actions .submit-btn:disabled{cursor:not-allowed;opacity:.65;transform:none}.buat-pembayaran-root .buat-pembayaran-form .msg{border-radius:.5rem;border-radius:var(--radius-md);font-size:.9rem;padding:12px;text-align:center}.buat-pembayaran-root .buat-pembayaran-form .msg.success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}.buat-pembayaran-root .buat-pembayaran-form .msg.error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}:root{--primary-color:#4f46e5;--primary-hover:#4338ca;--secondary-color:#10b981;--accent-color:#f59e0b;--danger-color:#ef4444;--bg-color:#f8fafc;--card-bg:#fff;--text-primary:#1e293b;--text-secondary:#64748b;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.list-akun-root{background-color:#f8fafc;background-color:var(--bg-color);display:flex;flex-direction:column;min-height:100vh}.list-akun-root .list-akun-container{display:flex;flex-direction:column;gap:2rem;gap:var(--spacing-lg);margin:2rem auto;margin:var(--spacing-lg) auto;max-width:1400px;padding:0 2rem;padding:0 var(--spacing-lg);width:100%}@media(max-width:768px){.list-akun-root .list-akun-container{gap:1.5rem;gap:var(--spacing-md);padding:0 1.5rem;padding:0 var(--spacing-md)}}.list-akun-root .page-intro-banner{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;gap:1.5rem;gap:var(--spacing-md);justify-content:space-between;padding:3rem;padding:var(--spacing-xl)}@media(max-width:768px){.list-akun-root .page-intro-banner{align-items:flex-start;flex-direction:column;padding:2rem;padding:var(--spacing-lg)}}.list-akun-root .page-intro-banner .intro-left{align-items:center;display:flex;gap:1.5rem;gap:var(--spacing-md)}.list-akun-root .page-intro-banner .intro-left .intro-icon-wrapper{align-items:center;background:#eef2ff;border-radius:.5rem;border-radius:var(--radius-md);color:#4f46e5;color:var(--primary-color);display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.list-akun-root .page-intro-banner .intro-left h2{color:#1e293b;color:var(--text-primary);font-size:1.5rem;font-weight:700;margin:0 0 4px}.list-akun-root .page-intro-banner .intro-left p{color:#64748b;color:var(--text-secondary);font-size:.9rem;margin:0}.list-akun-root .page-intro-banner .intro-actions .btn-add-nasabah{align-items:center;background:#4f46e5;background:var(--primary-color);border:none;border-radius:.5rem;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;gap:8px;padding:10px 20px;transition:all .2s}.list-akun-root .page-intro-banner .intro-actions .btn-add-nasabah:hover{background:#4338ca;background:var(--primary-hover);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.list-akun-root .kpi-users-grid{grid-gap:1.5rem;grid-gap:var(--spacing-md);display:grid;gap:1.5rem;gap:var(--spacing-md);grid-template-columns:repeat(3,1fr)}@media(max-width:768px){.list-akun-root .kpi-users-grid{grid-template-columns:1fr}}.list-akun-root .kpi-users-grid .kpi-user-card{align-items:center;background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);display:flex;gap:16px;padding:2rem;padding:var(--spacing-lg);transition:all .2s}.list-akun-root .kpi-users-grid .kpi-user-card:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-2px)}.list-akun-root .kpi-users-grid .kpi-user-card.highlight{background:linear-gradient(135deg,#fff,#f5f7ff);border-color:#c7d2fe}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-icon-wrap{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:44px;justify-content:center;width:44px}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-icon-wrap.primary{background:#eef2ff;color:#4f46e5;color:var(--primary-color)}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-icon-wrap.blue{background:#eff6ff;color:#2563eb}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-icon-wrap.green{background:#f0fdf4;color:#16a34a}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-label{color:#64748b;color:var(--text-secondary);display:block;font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-number{color:#1e293b;color:var(--text-primary);font-size:1.4rem;font-weight:700}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-number.primary{color:#4f46e5;color:var(--primary-color)}.list-akun-root .kpi-users-grid .kpi-user-card .kpi-number.text-green{color:#16a34a}.list-akun-root .list-table-card{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);padding:3rem;padding:var(--spacing-xl)}@media(max-width:768px){.list-akun-root .list-table-card{padding:1.5rem;padding:var(--spacing-md)}}.list-akun-root .list-table-card .table-controls-header{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem;gap:var(--spacing-md);justify-content:space-between;margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.list-akun-root .list-table-card .table-controls-header .header-title-box .title-row{align-items:center;display:flex;gap:8px}.list-akun-root .list-table-card .table-controls-header .header-title-box .title-row h3{color:#1e293b;color:var(--text-primary);font-size:1.25rem;font-weight:700;margin:0}.list-akun-root .list-table-card .table-controls-header .header-title-box .title-row .btn-refresh{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:50%;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;height:28px;justify-content:center;transition:all .2s;width:28px}.list-akun-root .list-table-card .table-controls-header .header-title-box .title-row .btn-refresh:hover{background:#eef2ff;color:#4f46e5;color:var(--primary-color);transform:rotate(90deg)}.list-akun-root .list-table-card .table-controls-header .header-title-box p{color:#64748b;color:var(--text-secondary);font-size:.85rem;margin:4px 0 0}.list-akun-root .list-table-card .table-controls-header .search-box-wrapper{min-width:300px;position:relative}@media(max-width:768px){.list-akun-root .list-table-card .table-controls-header .search-box-wrapper{min-width:100%;width:100%}}.list-akun-root .list-table-card .table-controls-header .search-box-wrapper .search-icon{color:#94a3b8;left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.list-akun-root .list-table-card .table-controls-header .search-box-wrapper input{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:.9rem;outline:none;padding:10px 14px 10px 38px;transition:all .2s;width:100%}.list-akun-root .list-table-card .table-controls-header .search-box-wrapper input:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.list-akun-root .list-table-card .filter-tabs-row{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem;margin-bottom:var(--spacing-md);padding-bottom:1.5rem;padding-bottom:var(--spacing-md)}.list-akun-root .list-table-card .filter-tabs-row .filter-tab{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:999px;color:#64748b;color:var(--text-secondary);cursor:pointer;font-size:.82rem;font-weight:500;padding:6px 14px;transition:all .15s}.list-akun-root .list-table-card .filter-tabs-row .filter-tab:hover{border-color:#cbd5e1;color:#1e293b;color:var(--text-primary)}.list-akun-root .list-table-card .filter-tabs-row .filter-tab.active{background:#4f46e5;background:var(--primary-color);border-color:#4f46e5;border-color:var(--primary-color);color:#fff;font-weight:600}.list-akun-root .list-table-card .table-wrapper{border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);overflow-x:auto}.list-akun-root .list-table-card table{border-collapse:collapse;font-size:.9rem;white-space:nowrap;width:100%}.list-akun-root .list-table-card table thead{background:#f8fafc}.list-akun-root .list-table-card table thead th{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);color:#64748b;color:var(--text-secondary);font-size:.82rem;font-weight:600;letter-spacing:.5px;padding:12px 16px;text-align:left;text-transform:uppercase}.list-akun-root .list-table-card table tbody tr{border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);transition:background .12s}.list-akun-root .list-table-card table tbody tr:last-child{border-bottom:none}.list-akun-root .list-table-card table tbody tr:hover{background:#f8fafc}.list-akun-root .list-table-card table tbody tr td{color:#1e293b;color:var(--text-primary);padding:12px 16px;vertical-align:middle}.list-akun-root .list-table-card .user-profile-cell{align-items:center;display:flex;gap:12px}.list-akun-root .list-table-card .user-profile-cell .user-photo-wrap{border:2px solid #eef2ff;border-radius:50%;box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);cursor:pointer;flex-shrink:0;height:40px;overflow:hidden;position:relative;width:40px}.list-akun-root .list-table-card .user-profile-cell .user-photo-wrap .user-photo{height:100%;object-fit:cover;width:100%}.list-akun-root .list-table-card .user-profile-cell .user-photo-wrap .photo-overlay{align-items:center;background:#0006;color:#fff;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity .2s}.list-akun-root .list-table-card .user-profile-cell .user-photo-wrap:hover .photo-overlay{opacity:1}.list-akun-root .list-table-card .user-profile-cell .user-avatar-initial{align-items:center;background:#eef2ff;border:1px solid #c7d2fe;border-radius:50%;color:#4f46e5;color:var(--primary-color);display:flex;flex-shrink:0;font-size:1rem;font-weight:700;height:40px;justify-content:center;width:40px}.list-akun-root .list-table-card .user-profile-cell .user-info{display:flex;flex-direction:column;gap:2px}.list-akun-root .list-table-card .user-profile-cell .user-info .user-name{color:#1e293b;color:var(--text-primary);font-size:.95rem;font-weight:700}.list-akun-root .list-table-card .user-profile-cell .user-info .user-phone{align-items:center;color:#64748b;color:var(--text-secondary);display:flex;font-size:.78rem;gap:4px}.list-akun-root .list-table-card .nik-code{background:#f1f5f9;border-radius:4px;color:#1e293b;color:var(--text-primary);font-family:monospace;font-size:.85rem;font-weight:600;padding:3px 8px}.list-akun-root .list-table-card .text-muted{color:#94a3b8;font-size:.82rem;font-style:italic}.list-akun-root .list-table-card .bills-status-cell{display:flex;flex-direction:column;gap:3px}.list-akun-root .list-table-card .bills-status-cell .badge-active-loans{align-items:center;border-radius:999px;display:inline-flex;font-size:.75rem;font-weight:600;gap:5px;padding:3px 8px;width:-webkit-fit-content;width:fit-content}.list-akun-root .list-table-card .bills-status-cell .badge-active-loans.single{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}.list-akun-root .list-table-card .bills-status-cell .badge-active-loans.multiple{background:#eef2ff;border:1px solid #c7d2fe;color:#4f46e5;color:var(--primary-color)}.list-akun-root .list-table-card .bills-status-cell .bills-total-amount{color:#4f46e5;color:var(--primary-color);font-size:.88rem;font-weight:700}.list-akun-root .list-table-card .badge-free-loans{align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;color:#16a34a;display:inline-flex;font-size:.78rem;font-weight:600;gap:5px;padding:4px 10px}.list-akun-root .list-table-card .date-registered{align-items:center;color:#64748b;color:var(--text-secondary);display:inline-flex;font-size:.82rem;gap:6px}.list-akun-root .list-table-card .actions-cell{align-items:center;display:flex;gap:6px}.list-akun-root .list-table-card .actions-cell .btn-create-bill{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:inline-flex;font-size:.78rem;font-weight:600;gap:4px;padding:6px 10px;transition:all .15s}.list-akun-root .list-table-card .actions-cell .btn-create-bill:hover{background:#4f46e5;background:var(--primary-color);border-color:#4f46e5;border-color:var(--primary-color);color:#fff}.list-akun-root .list-table-card .actions-cell .btn-edit-user{align-items:center;background:#eef2ff;border:1px solid #c7d2fe;border-radius:.375rem;border-radius:var(--radius-sm);color:#4f46e5;color:var(--primary-color);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:all .2s}.list-akun-root .list-table-card .actions-cell .btn-edit-user:hover{background:#4f46e5;background:var(--primary-color);color:#fff}.list-akun-root .list-table-card .actions-cell .btn-delete-user{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:.375rem;border-radius:var(--radius-sm);color:#ef4444;color:var(--danger-color);cursor:pointer;display:flex;justify-content:center;padding:6px;transition:all .2s}.list-akun-root .list-table-card .actions-cell .btn-delete-user:hover{background:#ef4444;background:var(--danger-color);color:#fff}.list-akun-root .list-table-card .empty-row-cell{padding:48px 16px!important;text-align:center}.list-akun-root .list-table-card .empty-row-cell .empty-data-state{align-items:center;display:flex;flex-direction:column;gap:8px}.list-akun-root .list-table-card .empty-row-cell .empty-data-state .empty-icon{color:#94a3b8}.list-akun-root .list-table-card .empty-row-cell .empty-data-state h4{color:#1e293b;color:var(--text-primary);font-size:1.15rem;margin:0}.list-akun-root .list-table-card .empty-row-cell .empty-data-state p{color:#64748b;color:var(--text-secondary);font-size:.88rem;line-height:1.4;margin:0;max-width:420px}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0f172a99;bottom:0;display:flex;justify-content:center;left:0;padding:16px;position:fixed;right:0;top:0;z-index:9999}.modal-overlay .modal-update-card{background:#fff;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-md);max-width:460px;padding:3rem;padding:var(--spacing-xl);width:100%}.modal-overlay .modal-update-card .modal-header{align-items:flex-start;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding-bottom:12px}.modal-overlay .modal-update-card .modal-header h4{color:#1e293b;color:var(--text-primary);font-size:1.25rem;font-weight:700;margin:0 0 4px}.modal-overlay .modal-update-card .modal-header p{color:#64748b;color:var(--text-secondary);font-size:.82rem;margin:0}.modal-overlay .modal-update-card .modal-header .close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#64748b;color:var(--text-secondary);cursor:pointer;display:flex;justify-content:center;padding:4px}.modal-overlay .modal-update-card .modal-header .close-btn:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.modal-overlay .modal-update-card .form-group{margin-bottom:1.5rem;margin-bottom:var(--spacing-md)}.modal-overlay .modal-update-card .form-group label{color:#64748b;color:var(--text-secondary);display:block;font-size:.85rem;font-weight:500;margin-bottom:6px}.modal-overlay .modal-update-card .form-group .badge-optional{background:#f1f5f9;border-radius:999px;color:#64748b;color:var(--text-secondary);font-size:.72rem;padding:2px 6px}.modal-overlay .modal-update-card .form-group .input-with-icon{align-items:center;display:flex;position:relative}.modal-overlay .modal-update-card .form-group .input-with-icon .icon{color:#94a3b8;left:12px;pointer-events:none;position:absolute}.modal-overlay .modal-update-card .form-group .input-with-icon input{background:#f8fafc;border:1px solid #e2e8f0;border:1px solid var(--border-color);border-radius:.5rem;border-radius:var(--radius-md);font-size:.95rem;padding:10px 14px 10px 38px;transition:all .2s;width:100%}.modal-overlay .modal-update-card .form-group .input-with-icon input:focus{background:#fff;border-color:#4f46e5;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a;outline:none}.modal-overlay .modal-update-card .modal-actions-footer{border-top:1px solid #e2e8f0;border-top:1px solid var(--border-color);display:flex;gap:10px;justify-content:flex-end;padding-top:1.5rem;padding-top:var(--spacing-md)}.modal-overlay .modal-update-card .modal-actions-footer button{align-items:center;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;gap:6px;padding:10px 18px;transition:all .2s}.modal-overlay .modal-update-card .modal-actions-footer .btn-cancel{background:#fff;border:1px solid #e2e8f0;border:1px solid var(--border-color);color:#64748b;color:var(--text-secondary)}.modal-overlay .modal-update-card .modal-actions-footer .btn-cancel:hover{background:#f1f5f9;color:#1e293b;color:var(--text-primary)}.modal-overlay .modal-update-card .modal-actions-footer .btn-save{background:#4f46e5;background:var(--primary-color);border:1px solid #4f46e5;border:1px solid var(--primary-color);color:#fff}.modal-overlay .modal-update-card .modal-actions-footer .btn-save:hover{background:#4338ca;background:var(--primary-hover)}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card{background:#fff;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-header{align-items:center;border-bottom:1px solid #e2e8f0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:12px 16px}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-header h5{color:#1e293b;color:var(--text-primary);font-size:.95rem;font-weight:600;margin:0}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-header .close-btn{background:none;border:none;color:#64748b;color:var(--text-secondary);cursor:pointer}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-header .close-btn:hover{color:#1e293b;color:var(--text-primary)}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-body{align-items:center;background:#0f172a;display:flex;justify-content:center;padding:16px}.modal-overlay.photo-lightbox-overlay .photo-lightbox-card .lightbox-body img{border-radius:.5rem;border-radius:var(--radius-md);max-height:75vh;max-width:80vw;object-fit:contain}.swal2-container.swal2-on-top{z-index:12000!important}
/*# sourceMappingURL=main.53e3f1ca.css.map*/