.booting #loginPage,
.booting #dashboard{
  display:none !important;
}

.setting-item{
  padding:10px;
  cursor:pointer;
  border-radius:6px;
  margin-bottom:4px;
}
.setting-item:hover{
  background:#374151;
}

.setting-subitem{
  padding:8px;
  font-size:13px;
  cursor:pointer;
  border-radius:6px;
  color:#c7d2fe;
}
.setting-subitem:hover{
  background:#1e293b;
}

textarea{
  width:100%;
  padding:8px;
  border:1px solid #ddd;
  border-radius:6px;
  resize:vertical;
  margin-bottom:6px;
  font-family:'Segoe UI',sans-serif;
}

.withdraw-table td{
  padding: 8px 10px;
  line-height: 1.3;
}
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  cursor:grab;
}
.table-wrap:active{
  cursor:grabbing;
}
/* ===== FIX TABLE CELL WRAP ===== */
.withdraw-table td,
.withdraw-table th{
  white-space: nowrap;
  vertical-align: middle;
}

/* ===== RESPONSIVE FIX ===== */
@media (max-width: 768px){
  .layout{
    flex-direction: column;
  }

  .sidebar{
    position: relative;
    width: 100%;
  }

  .content{
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 768px){

  /* card jangan maksa lebar */
  .card{
    padding:15px;
  }

  /* input & select full */
  input, select, button{
    width:100%;
    margin-bottom:8px;
  }

  /* summary card turun ke bawah */
  .summary-cards{
    flex-direction:column;
  }

  /* table aman */
  table{
    display:block;
    width:100%;
    overflow-x:auto;
  }
}

*{box-sizing:border-box;font-family:'Segoe UI',sans-serif;margin:0;padding:0;}
body{background:#f4f6f9;color:#111;transition:0.3s;}
.login-body{display:flex;height:100vh;justify-content:center;align-items:center;}
.login-card{background:white;padding:30px;width:320px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center;}
.login-card input{width:100%;margin:10px 0;padding:12px;border:1px solid #ddd;border-radius:6px;}
.login-card button{width:100%;padding:12px;background:#4f46e5;border:none;color:white;border-radius:8px;cursor:pointer;}
.login-card button:hover{background:#4338ca;}
.forgot-password-btn{
  margin-top:6px;
  background:#eef4ff !important;
  color:#1d4ed8 !important;
  border:1px solid #bfdbfe !important;
}
.forgot-password-btn:hover{
  background:#dbeafe !important;
}
.forgot-password-hint{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  color:#64748b;
}
.layout{display:flex;height:100vh;}
.sidebar h2{color:white;font-weight:bold;text-align:center;margin-bottom:20px;}
.sidebar ul{list-style:none;padding:0;}
.sidebar li{padding:10px;margin-bottom:5px;cursor:pointer;border-radius:6px;transition:0.2s;}
.sidebar li.active,.sidebar li:hover{background:#4f46e5;}

.content{margin-left:220px;padding:0 20px 20px;flex:1;overflow-x:hidden;overflow-y:auto;}
.card{
  background:#ffffff;
  padding:22px;
  border-radius:16px;
  margin-bottom:24px;
  border:1px solid #eef2f7;
  box-shadow:0 4px 12px rgba(15,23,42,.035);
}

.badge{padding:4px 10px;border-radius:6px;font-size:12px;}
.badge.progress{background:#f87171;color:white;}
.badge.selesai{background:#22c55e;color:white;}
table{width:100%;border-collapse:collapse;margin-top:10px;}
th,td{padding:10px;border-bottom:1px solid #ddd;text-align:left;}
input,select,button{margin-bottom:5px;padding:8px 12px;border-radius:6px;border:1px solid #ddd;}
button{background:#4f46e5;color:white;border:none;border-radius:6px;cursor:pointer;}
button:hover{background:#4338ca;}
.summary-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:25px;
}

.summary-card{
  background:#ffffff;
  border-radius:16px;
  padding:22px;
  border:1px solid #eef2f7;
  box-shadow:0 4px 12px rgba(15,23,42,.035);
  transition:.2s;
}

.summary-card:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.summary-card h3{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#64748b;
  margin-bottom:8px;
}

.summary-card span{
  font-size:30px;
  font-weight:700;
  color:#0f172a;
}

@media(max-width:768px){.layout{flex-direction:column;}.sidebar{width:100%;height:auto;position:relative;}.content{margin-left:0;}}
.print-card{max-width:300px;margin:auto;text-align:center;padding:15px;border:2px solid #4f46e5;border-radius:12px;background:#fef3c7;box-shadow:0 4px 15px rgba(0,0,0,.2);}
.print-card h2{margin-bottom:5px;font-weight:bold;}
.print-card h3{margin-bottom:10px;}
.print-card table{width:100%;text-align:left;margin-top:10px;}
.print-card p{margin-top:10px;font-size:12px;color:#64748b;}
/* ===== SETTING UI ===== */
.setting-section{
  margin-bottom: 30px;
}

.setting-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.setting-header h3{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:#111827;
}

.setting-form{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-bottom:12px;
}

.setting-table th{
  background:#f9fafb;
  font-size:12px;
  text-transform:uppercase;
  color:#374151;
}

.setting-table td{
  font-size:13px;
  vertical-align:top;
}

.setting-table tr:hover{
  background:#f9fafb;
}

.setting-info{
  white-space:pre-wrap;
  font-size:12px;
  color:#374151;
}

.btn-danger{
  background:#ef4444;
}
.btn-danger:hover{
  background:#dc2626;
}
/* WARNA TOMBOL SELESAI & HAPUS */
.btn-selesai{
  background:#22c55e !important;
}
.btn-selesai:hover{
  background:#16a34a !important;
}

.btn-hapus{
  background:#ef4444 !important;
}
.btn-hapus:hover{
  background:#dc2626 !important;
}
/* ===== BANK STYLE : WITHDRAW ===== */

.withdraw-title{
  font-weight:700;
  color:#1f2937;
}

.withdraw-card{
  border:1px solid #e5e7eb;
  background:#ffffff;
}

.withdraw-table th{
  background:#f3f4f6;
  font-size:12px;
  text-transform:uppercase;
  color:#374151;
}

.withdraw-table td{
  font-size:13px;
}

.withdraw-nominal{
  font-weight:700;
  color:#065f46;
}

.badge.process{
  background:#fde68a;
  color:#92400e;
}

.badge.success{
  background:#bbf7d0;
  color:#065f46;
}
/* ===== CLEAN STATUS BADGE ===== */

.badge-bank{
  display:inline-block;
  padding:6px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  border-radius:999px;
  text-align:center;
  min-width:90px;
  border:1px solid transparent;
}

/* SUCCESS / SELESAI */
.badge-success{
  background:#ecfdf5;
  color:#047857;
  border-color:#a7f3d0;
}

/* PROCESS / PROGRESS */
.badge-process{
  background:#f1f5f9;
  color:#334155;
  border-color:#cbd5e1;
}

/* ERROR / REFUND / TOLAK */
.badge-danger{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}

/* OTHER STATUS */
.badge-default{
  background:#eef2ff;
  color:#3730a3;
  border-color:#c7d2fe;
}

/* ===== JARAK JUDUL DASHBOARD & MENU ===== */
h2{
  margin-bottom:32px; /* spacing */
}

h3{
  margin-top:32px;   /* jarak dari atas */
  margin-bottom:24px;
}

/* jarak antar card */
.card{
  margin-top:24px;
}
/* ===== STATUS DROPDOWN STYLE ===== */

.statusSelect:hover{
  border-color:#4f46e5;
  background:#eef2ff;
}

.statusSelect:focus{
  outline:none;
  border-color:#4f46e5;
  box-shadow:0 0 0 2px rgba(79,70,229,.2);
}
.page-title{
  margin-bottom:40px;
}

/* ===== STATUS DROPDOWN STYLE ===== */
.statusSelect{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  transition:0.2s;
}

.statusSelect:hover{
  border-color:#4f46e5;
  background:#eef2ff;
}
/* ===============================
   ENTERPRISE TABLE - LAPORAN
================================ */

/* wrapper lebih clean */
#laporanTable{
  font-size:13px;
}

/* header */
#laporanTable thead tr{
  background: #f1f5f9;
}

#laporanTable thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  color:#334155;
  padding:12px 10px;
  border-bottom:2px solid #e2e8f0;
}

/* zebra rows */
/* cell spacing */
#laporanTable td{
  padding:11px 10px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}

/* nomor kolom lebih soft */
#laporanTable td:nth-child(2){
  font-weight:600;
  color:#64748b;
}

/* checkbox column center */
#laporanTable td:first-child{
  text-align:center;
}

/* badge lebih clean */
.badge.progress{
  background:#fff7ed;
  color:#c2410c;
  font-weight:600;
}

.badge.selesai{
  background:#ecfdf5;
  color:#047857;
  font-weight:600;
}
/* ===== ZEBRA ROW LAPORAN ===== */
#laporanTable tr:nth-child(odd){
  background: #ffffff;
}

#laporanTable tr:nth-child(even){
  background: rgba(0,0,0,0.05); /* abu 5% */
}
/* ===============================
   ENTERPRISE TABLE - WITHDRAW
================================ */

.withdraw-table{
  font-size:13px;
  min-width:1120px;
}

/* Kolom select/toggle tabel withdraw */
.withdraw-table th:first-child,
.withdraw-table td:first-child{
  width:44px;
  text-align:center;
}

/* header */
.withdraw-table thead tr{
  background:#f1f5f9;
}

.withdraw-table thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  color:#334155;
  padding:12px 10px;
  border-bottom:2px solid #e2e8f0;
}

/* zebra rows */
.withdraw-table tbody tr:nth-child(odd){
  background:#ffffff;
}

.withdraw-table tbody tr:nth-child(even){
  background:#f8fafc;
}

/* smooth hover */
.withdraw-table tbody tr{
  transition:background-color .18s ease, box-shadow .18s ease;
}

.withdraw-table tbody tr:hover{
  background:rgba(79,70,229,0.07) !important;
  box-shadow:inset 0 0 0 1px rgba(79,70,229,0.14);
}

/* cell spacing */
.withdraw-table td{
  padding:11px 10px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}

/* nomor kolom lebih soft */
.withdraw-table td:nth-child(2){
  font-weight:600;
  color:#64748b;
}

/* checkbox center */
.withdraw-table td:first-child{
  text-align:center;
}

/* force tampil & ukuran normal checkbox kolom select withdraw */
.withdraw-table th:first-child,
.withdraw-table td:first-child{
  display:table-cell !important;
  width:44px !important;
  text-align:center !important;
}

.withdraw-table th:first-child input[type="checkbox"],
.withdraw-table td:first-child input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  margin:0 !important;
}

/* nominal lebih tegas */
.withdraw-nominal{
  font-weight:700;
  color:#0f766e;
}

/* badge withdraw lebih clean */
.badge-bank{
  font-weight:600;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
}
#wdActionBar{
  margin-top:12px;
  padding:10px;
  background:#f1f5f9;
  border-radius:8px;
  display:flex;
  gap:10px;
}
/* ===== HEADER STYLE SEPERTI GAMBAR ===== */

#laporanTableWrap thead tr{
  background:#f3f4f6; /* abu solid */
}

#laporanTableWrap thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  color:#334155;
  padding:10px 12px;
  border-bottom:1px solid #d1d5db;
}

/* hilangkan garis tebal lama */
#laporanTableWrap thead th{
  border-bottom:1px solid #d1d5db !important;
}
/* ===== SETTING ALIGN FIX ===== */

.setting-wrapper h2{
  margin-bottom:24px;
}

.setting-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.setting-sidebar{
  width:260px;
  background:#111827;
  color:#fff;
  padding:12px;
  border-radius:12px;
}

.setting-content{
  flex:1;
}
/* ===== SETTING PROFESSIONAL CLEAN ===== */

.setting-section{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:20px;
  margin-bottom:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.setting-header{
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid #f1f5f9;
}

.setting-header h3{
  font-size:15px;
  font-weight:700;
  color:#111827;
}

.setting-form{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-bottom:18px;
}

.setting-form input,
.setting-form select,
.setting-form textarea{
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:13px;
}

.setting-form button{
  grid-column: 1 / -1;
  padding:10px;
  font-weight:600;
  border-radius:8px;
}

/* table clean */
.setting-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.setting-table thead{
  background:#f8fafc;
}

.setting-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:10px;
  color:#475569;
  border-bottom:1px solid #e5e7eb;
}

.setting-table td{
  padding:10px;
  border-bottom:1px solid #f1f5f9;
}

.setting-table tr:hover{
  background:#f8fafc;
}

.twofa-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.twofa-status.status-active{
  color:#166534;
  background:#dcfce7;
  border:1px solid #86efac;
}

.twofa-status.status-inactive{
  color:#991b1b;
  background:#fee2e2;
  border:1px solid #fca5a5;
}
/* parent Setting biar sejajar */
#menuSetting{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.menu-main{
  display:flex;
  align-items:center;
  gap:6px;
}

.dashboard-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dashboard-logo{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(148,163,184,.22);
}

.dashboard-logo svg{
  width:12px;
  height:12px;
  fill:#e2e8f0;
}

.menu-chevron{
  font-size:16px;
  line-height:1;
  color:#cbd5e1;
  opacity:.9;
}

#kendalaArrow{
  display:inline-block;
  transition:transform .25s ease;
  transform-origin:center;
}

#kendalaArrow.open{
  transform:rotate(90deg);
}
/* ===== PAGE TITLE SYSTEM ===== */

.page-subtitle{
  font-size:12px;
  font-weight:600;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:6px;
}

.page-title{
  font-size:22px;
  font-weight:700;
  color:#111827;
  margin-bottom:20px;
}

.setting-home-head{
  display:block;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #e2e8f0;
}

.setting-home-section h3{
  margin:0;
  color:#1f2a60;
  font-size:18px;
  font-weight:700;
}

.setting-home-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.setting-home-card{
  text-align:left;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#ffffff;
  color:#0f172a;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:136px;
  transition:all .2s ease;
}

.setting-home-card:hover{
  border-color:#c7d2fe;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}

.setting-home-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#eef2ff;
  color:#3730a3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.setting-home-title{
  font-size:14px;
  font-weight:700;
  color:#1f2a60;
}

.setting-home-desc{
  font-size:12px;
  line-height:1.45;
  color:#334155;
}

.complete-notify-wrap{
  padding:16px 18px;
}

.complete-notify-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px 14px;
  align-items:start;
}

.complete-notify-label{
  font-size:13px;
  font-weight:700;
  color:#111827;
  line-height:1.35;
  padding-top:8px;
}

.complete-notify-input{
  width:100%;
  min-height:70px;
  resize:vertical;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:13px;
  line-height:1.4;
  color:#111827;
  background:#fff;
  box-sizing:border-box;
}

.complete-notify-input:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}

.complete-notify-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

.complete-notify-hint{
  font-size:12px;
  color:#64748b;
}

.complete-notify-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 760px){
  .complete-notify-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .complete-notify-label{
    padding-top:0;
  }
}

.ipwl-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ipwl-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.ipwl-switch{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#1f2a60;
}

.ipwl-switch input{
  margin:0;
  width:16px;
  height:16px;
}

.ipwl-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ipwl-form input{
  min-width:240px;
  margin:0;
}

.ipwl-form button{
  padding:8px 12px;
  font-size:13px;
}

.ipwl-helper-box{
  margin:-4px 0 2px;
  padding:12px 14px;
  border:1px solid #dbe6f3;
  border-radius:12px;
  background:linear-gradient(180deg,#f8fbff 0%,#f2f7ff 100%);
}

.ipwl-helper-copy{
  color:#334155;
  font-size:12px;
  line-height:1.55;
}

.ipwl-helper-copy strong,
.ipwl-helper-copy code{
  color:#0f172a;
}

.ipwl-helper-error{
  color:#991b1b;
}

.ipwl-suggestion-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.ipwl-suggestion-chip{
  padding:8px 12px;
  border:1px solid #c8d7ec;
  border-radius:999px;
  background:#fff;
  color:#1e3a8a;
  font-size:12px;
  font-weight:700;
}

.ipwl-suggestion-chip:hover{
  background:#eaf2ff;
}

.ipwl-type-badge,
.ipwl-scope-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  margin-right:6px;
}

.ipwl-type-badge{
  background:#dbeafe;
  color:#1d4ed8;
}

.ipwl-type-badge.ipv6{
  background:#ede9fe;
  color:#6d28d9;
}

.ipwl-scope-badge{
  background:#dcfce7;
  color:#166534;
}

.ipwl-scope-badge.exact{
  background:#f1f5f9;
  color:#475569;
}

.ipwl-note{
  margin-top:2px;
}

.totp-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.totp-modal{
  width:100%;
  max-width:380px;
  background:#ffffff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 20px 50px rgba(15,23,42,.25);
}

.totp-modal h3{
  margin:0 0 8px;
  font-size:18px;
  color:#1f2a60;
}

.totp-modal p{
  margin:0 0 10px;
  font-size:13px;
  color:#475569;
}

.totp-qr{
  display:flex;
  justify-content:center;
  margin:8px 0 10px;
}

.totp-secret{
  font-size:12px;
  color:#334155;
  margin-bottom:10px;
  word-break:break-all;
}

.totp-modal input{
  width:100%;
  margin:0 0 10px;
}

.totp-actions{
  display:flex;
  gap:8px;
}

.totp-actions button{
  flex:1;
}

.otp-verify-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.48);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.otp-verify-modal{
  width:100%;
  max-width:340px;
  background:#f3f4f6;
  border-radius:12px;
  border:1px solid #e5e7eb;
  padding:22px 18px 20px;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
  text-align:center;
}

.otp-verify-icon-wrap{
  display:flex;
  justify-content:center;
  margin:2px 0 14px;
}

.otp-verify-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#4f7be5;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 8px rgba(79,123,229,.20);
}

.otp-verify-icon svg{
  width:22px;
  height:22px;
  display:block;
  fill:#ffffff;
}

.otp-verify-modal h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.1;
  color:#0f172a;
  font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight:800;
  letter-spacing:.2px;
}

.otp-verify-modal p{
  margin:0 auto 14px;
  max-width:260px;
  font-size:12px;
  color:#0f172a;
  line-height:1.35;
  font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight:500;
}

.email-verify-overlay{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top, rgba(37,99,235,.10), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.email-verify-modal{
  width:100%;
  max-width:460px;
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(191,219,254,.9);
  box-shadow:0 28px 60px rgba(15,23,42,.16);
  padding:28px 24px 22px;
}

.email-verify-modal h3{
  margin:0 0 14px;
  color:#123b70;
  font-size:28px;
  font-weight:800;
  line-height:1.15;
}

.email-verify-modal p{
  margin:0 0 18px;
  color:#1f2937;
  font-size:15px;
  line-height:1.7;
}

.email-verify-address{
  margin:0 0 18px;
  color:#1f2937;
  font-size:14px;
  line-height:1.7;
  padding:14px 16px;
  background:#f8fafc;
  border:1px solid #dbeafe;
  border-radius:12px;
}

.email-verify-address strong{
  color:#0f172a;
  font-weight:700;
}

.email-verify-change{
  border:none;
  background:none;
  color:#2563eb;
  cursor:pointer;
  padding:0;
  font-size:12px;
  font-weight:600;
  margin-left:4px;
}

.email-verify-send{
  width:100%;
  border:none;
  border-radius:10px;
  background:#123b70;
  color:#fff;
  padding:13px 16px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.email-verify-send:disabled,
.email-verify-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.email-verify-send:hover{
  background:#0f325f;
}

.email-verify-form{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:0 0 14px;
}

.email-verify-code-input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:12px 14px;
  font-size:15px;
  letter-spacing:2px;
  outline:none;
}

.email-verify-code-input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.email-verify-submit{
  width:100%;
  border:none;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  padding:12px 16px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.email-verify-feedback{
  margin:0 0 14px;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
}

.email-verify-feedback.info{
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
}

.email-verify-feedback.success{
  background:#ecfdf5;
  color:#166534;
  border:1px solid #86efac;
}

.email-verify-feedback.error{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}

.email-verify-later{
  width:100%;
  border:none;
  background:none;
  color:#123b70;
  padding:12px 8px 0;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:none;
  outline:none;
}

.email-verify-later:hover,
.email-verify-later:focus,
.email-verify-later:focus-visible,
.email-verify-later:active{
  background:none;
  color:#123b70;
  box-shadow:none;
  outline:none;
}

.otp-verify-inputs{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  margin-bottom:22px;
}

.otp-digit{
  margin:0;
  width:100%;
  min-width:0;
  height:36px;
  border:1px solid #c4c9d3;
  border-radius:7px;
  text-align:center;
  font-size:22px;
  font-weight:400;
  color:#0f172a;
  background:#f3f4f6;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.otp-digit:focus{
  border-color:#2c66c7;
  box-shadow:0 0 0 1px rgba(44,102,199,.14);
}

.otp-verify-actions{
  display:block;
}

#otpVerifySubmit{
  width:146px;
  border-radius:999px;
  padding:9px 12px;
  font-size:17px;
  font-weight:700;
  font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height:1;
  background:#2f67bb;
  box-shadow:none;
}

#otpVerifySubmit[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

@media (max-width: 420px){
  .otp-verify-modal{
    max-width:330px;
    padding:20px 14px 16px;
  }
  .otp-verify-inputs{
    gap:6px;
  }
  .otp-digit{
    height:34px;
    font-size:20px;
  }
}

.security-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.62);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.security-modal{
  width:100%;
  max-width:360px;
  background:#ffffff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 22px 55px rgba(15,23,42,.28);
}

.security-modal h3{
  margin:0 0 6px;
  font-size:18px;
  color:#1f2a60;
}

.security-modal p{
  margin:0 0 10px;
  font-size:13px;
  color:#475569;
  line-height:1.45;
}

.security-modal input{
  width:100%;
  margin:0 0 10px;
  height:40px;
  font-size:16px;
  letter-spacing:1px;
}

.security-actions{
  display:flex;
  gap:8px;
}

.security-actions button{
  flex:1;
}

/* ===== BANK FORM INLINE ===== */

.bank-form-inline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
}

/* kecilkan input */
.bank-form-inline input{
  width:160px;      /* <- ukuran tetap kecil */
  padding:6px 8px;
  font-size:12px;
}

/* kecilkan tombol */
.bank-form-inline button{
  padding:6px 12px;
  font-size:12px;
  border-radius:6px;
}
/* ===== ACCOUNT FORM INLINE ===== */

.account-form-inline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
}

/* kecilin input */
.account-form-inline input{
  width:140px;
  padding:6px 8px;
  font-size:12px;
}

/* kecilin select */
.account-form-inline select{
  width:90px;
  padding:6px;
  font-size:12px;
}

/* kecilin tombol */
.account-form-inline button{
  padding:6px 12px;
  font-size:12px;
  border-radius:6px;
}
.setting-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:15px;
}

.input-sm{
  height:34px;
  padding:0 10px;
  font-size:13px;
  border-radius:6px;
  border:1px solid #d1d5db;
  background:#fff;
  box-sizing:border-box;

  display:flex;
  align-items:center;
}
select.input-sm{
  height:36px;
  padding:0 36px 0 12px;
  font-size:13px;
  border-radius:8px;
  border:1px solid #d1d5db;
  background-color:#ffffff;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  transition:all 0.2s ease;

  background-image:url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 7l4.5 5 4.5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
}
select.input-sm:focus,
.input-sm:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
select.input-sm:hover{
  border-color:#9ca3af;
}

.role-sm{
  width:90px;
}

.btn-sm{
  height:34px;
  padding:0 12px;
  font-size:13px;
  border-radius:6px;
  cursor:pointer;
}
.lap-nama{
  width:170px;
}

.lap-info{
  width:320px;
}

.lap-info::placeholder{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wd-nama{
  width:170px;
}

.wd-info{
  width:320px;
}

.wd-info::placeholder{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Supaya isi tabel gak turun kebawah */
.setting-table td{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar{
  width:220px;
  background:#111827;
  color:white;
  padding:20px;
  padding-top:24px;
  position:fixed;
  height:100vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
}

@media (max-width: 1024px){
  .layout{
    flex-direction:row;
  }

  .sidebar{
    position:fixed;
    width:220px;
    height:100vh;
  }

  .content{
    margin-left:220px;
    width:calc(100% - 220px);
  }
}

@media (max-width: 768px){
  .layout{
    flex-direction:row;
  }

  .sidebar{
    position:fixed;
    width:200px;
    height:100vh;
  }

  .content{
    margin-left:200px;
    width:calc(100% - 200px);
  }
}

.sidebar-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* INI YANG BIKIN LOGOUT KE BAWAH */
#logout{
  margin-top:auto;
  cursor:pointer;
}
#logout{
  margin-top:auto;
  padding:12px;
  border-top:1px solid rgba(255,255,255,0.08);
  color:#f87171;
  font-weight:500;
}

#logout:hover{
  background:rgba(255,255,255,0.05);
}
.role-hide{
  display:none !important;
}
/* ===== LAPORAN - AKSI FIX CENTER ===== */
#laporanTableWrap td.lap-aksi{
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}

#laporanTableWrap td.lap-aksi button{ 
  margin:0 3px;
}
/* ===============================
   LAPORAN TABLE STYLE (MATCH WITHDRAW)
================================ */

#laporanTableWrap{
  font-size:13px;
  border-collapse:collapse;
}

#laporanTableWrap thead{
  background:#f1f5f9;
}

#laporanTableWrap thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
  color:#334155;
  padding:12px 10px;
  border-bottom:2px solid #e2e8f0;
  text-align:center;
}

#laporanTableWrap tbody tr:nth-child(odd){
  background:#ffffff;
}

#laporanTableWrap tbody tr:nth-child(even){
  background:#f8fafc;
}

#laporanTableWrap tbody tr{
  transition:background-color .18s ease, box-shadow .18s ease;
}

#laporanTableWrap tbody tr:hover{
  background:rgba(79,70,229,0.07);
  box-shadow:inset 0 0 0 1px rgba(79,70,229,0.14);
}

#laporanTableWrap td{
  padding:11px 10px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}

/* nomor kolom */
#laporanTableWrap td:nth-child(2){
  color:#64748b;
  font-weight:600;
}
/* Kolom Keterangan FIX width */
#laporanTableWrap td:nth-child(7){
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#laporanTableWrap td{
  padding:8px 10px;   /* lebih padat */
  font-size:13px;
}

#laporanTableWrap th{
  padding:10px 10px;
}
#laporanTableWrap td:nth-child(8){
  text-align:center;
}

.badge-bank{
  display:inline-block;
}
/* ===== LAPORAN - ALIGN FIX ===== */

/* Header rata kiri */
#laporanTableWrap th{
  text-align:left !important;
}

/* Kolom 2-6 rata kiri */
#laporanTableWrap td:nth-child(2),
#laporanTableWrap td:nth-child(3),
#laporanTableWrap td:nth-child(4),
#laporanTableWrap td:nth-child(5),
#laporanTableWrap td:nth-child(6){
  text-align:left !important;
}
/* ===== FORCE CENTER STATUS & AKSI ===== */

/* Header STATUS & AKSI */
#laporanTableWrap th:nth-child(8),
#laporanTableWrap th:nth-child(9){
  text-align:center !important;
}

/* Isi STATUS & AKSI */
#laporanTableWrap td:nth-child(8),
#laporanTableWrap td:nth-child(9){
  text-align:center !important;
  vertical-align:middle !important;
}

/* Flex tombol aksi paksa center */
#laporanTableWrap td:nth-child(9) > div{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px;
}
/* ===== FIX CHECKBOX LAPORAN ===== */

/* Kolom checkbox header & isi */
#laporanTableWrap th:first-child,
#laporanTableWrap td:first-child{
  text-align:center !important;
  vertical-align:middle !important;
  width:40px;
}

/* Biar checkbox tidak naik turun */
#laporanTableWrap input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
}
.withdraw-table th:nth-last-child(2),
.withdraw-table th:last-child{
  text-align:center;
}

.withdraw-table td:nth-last-child(2),
.withdraw-table td:last-child{
  text-align:center;
}
.btn-sm{
  height:34px;
  padding:0 16px;
  font-size:13px;
  border-radius:6px;
  cursor:pointer;

  display:flex;              /* penting */
  align-items:center;        /* vertical center */
  justify-content:center;    /* horizontal center */
  text-align:center;
}
/* ===== PREMIUM ACTION BUTTON ===== */

.btn-action{
  height:32px;
  min-width:34px;
  padding:0 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  font-size:12px;
  font-weight:600;

  transition:all .2s ease;
}

/* SELESAI */
.btn-action.success{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow:0 6px 14px rgba(34,197,94,.35);
}

.btn-action.success:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(34,197,94,.45);
}

.btn-action.suspend{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
  box-shadow:0 6px 14px rgba(245,158,11,.35);
}

.btn-action.suspend:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(245,158,11,.45);
}

/* PRINT */
.btn-action.print{
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  color:#fff;
  box-shadow:0 6px 14px rgba(79,70,229,.35);
}

.btn-action.print:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(79,70,229,.45);
}

/* HAPUS */
.btn-action.delete{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  box-shadow:0 6px 14px rgba(239,68,68,.35);
}

.btn-action.delete:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(239,68,68,.45);
}
.aksi-flex{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  min-height:32px;
}

.aksi-flex-stack{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:8px;
}

.aksi-flex-stack .btn-action{
  width:100%;
  min-width:0;
  max-width:160px;
}

.kw-aksi-flex{
  min-width:0;
  justify-content:center;
}

.kw-aksi-flex .kw-btn-main{
  width:104px;
  justify-content:center;
}

.kw-aksi-flex.kw-aksi-success{
  min-width:0;
  justify-content:center;
}

.aksi-stack{
  display:grid;
  justify-items:center;
  gap:8px;
  width:100%;
}

.aksi-stack-single{
  gap:0;
}

.kw-aksi-bottom{
  width:100%;
}

.kw-btn-full{
  min-width:120px;
}

#laporanTableWrap th:last-child,
#laporanTableWrap td:last-child,
.withdraw-table th:last-child,
.withdraw-table td:last-child{
  position:sticky;
  right:0;
  z-index:2;
}

#laporanTableWrap thead th:last-child,
.withdraw-table thead th:last-child{
  z-index:4;
  background:#f1f5f9;
  box-shadow:-6px 0 10px rgba(15,23,42,.04);
}

#laporanTableWrap tbody td:last-child,
.withdraw-table tbody td:last-child{
  background:inherit;
  box-shadow:-6px 0 10px rgba(15,23,42,.03);
}

.table-action-cell{
  min-width:180px;
}
.btn-action svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}
.btn-action{
  backdrop-filter:blur(4px);
}

.copy-capture-stage{
  position:fixed;
  left:-100000px;
  top:0;
  z-index:-1;
  pointer-events:none;
  background:#fff;
  padding:24px;
}

.copy-preview-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  background:rgba(15,23,42,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.copy-preview-modal{
  width:min(460px, 96vw);
  max-height:92vh;
  overflow:auto;
  border-radius:14px;
  background:#fff;
  border:1px solid #dbe3ef;
  box-shadow:0 22px 52px rgba(2,8,23,.4);
  padding:14px;
}

.copy-preview-modal h3{
  margin:0;
  font-size:17px;
  color:#0f172a;
}

.copy-preview-modal p{
  margin:6px 0 10px 0;
  font-size:12px;
  color:#64748b;
}

.copy-preview-modal img{
  width:100%;
  height:auto;
  border:1px solid #dbe3ef;
  border-radius:10px;
  background:#fff;
}

.copy-preview-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.copy-preview-actions button{
  border:0;
  border-radius:9px;
  padding:8px 11px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.copy-preview-actions button[data-action="download"]{
  background:#0f766e;
  color:#fff;
}

.copy-preview-actions button[data-action="close"]{
  background:#e2e8f0;
  color:#0f172a;
}
.page-title-left{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  color:#1e293b;
  margin-bottom:30px;
}

/* ===== PROFESSIONAL MOTION ===== */
:root{
  --bg-soft:#f8fbff;
  --ink-strong:#0f172a;
  --brand:#4f46e5;
}

body{
  background:
    radial-gradient(circle at 0% 0%, #e0ecff 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, #e7f6ff 0%, transparent 40%),
    var(--bg-soft);
  color:var(--ink-strong);
}

.login-card,
.sidebar{
  backdrop-filter:blur(2px);
}

.sidebar li{
  border:1px solid transparent;
}

.sidebar li.active,
.sidebar li:hover{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(79,70,229,.24);
}

#contentArea.page-enter .page-subtitle,
#contentArea.page-enter .page-title,
#contentArea.page-enter .withdraw-title,
#contentArea.page-enter .summary-card,
#contentArea.page-enter .card,
#contentArea.page-enter .table-wrap{
  opacity:0;
  transform:translateY(12px);
  animation:contentRise .45s ease forwards;
  animation-delay:var(--stagger,0ms);
}

@keyframes contentRise{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}



/* ===== STATUS MODAL SYSTEM ===== */
.status-modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
  animation:overlayIn .2s ease forwards;
}

.status-modal-overlay.closing{
  animation:overlayOut .18s ease forwards;
}

.status-modal{
  width:100%;
  max-width:300px;
  border-radius:14px;
  padding:20px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:modalInSoft .24s ease forwards;
}

.status-modal.closing{
  animation:modalOutSoft .18s ease forwards;
}

.status-modal-title{
  margin:0 0 12px 0;
  text-align:center;
  color:#1e3a8a;
  font-size:16px;
  font-weight:700;
}

.status-modal-option,
.status-modal-cancel{
  width:100%;
  border-radius:10px;
  padding:9px 10px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
  margin-bottom:8px;
}

.status-modal-option{
  border:1px solid #dbe3ff;
  background:#eef2ff;
  color:#1f2937;
}

.status-modal-option:hover,
.status-modal-option:focus-visible{
  background:#4f46e5;
  color:#fff;
  outline:none;
  box-shadow:0 0 0 2px rgba(79,70,229,.18);
}

.status-modal-cancel{
  border:1px solid #ef4444;
  background:#ef4444;
  color:#fff;
  margin-bottom:0;
}

.status-modal-cancel:hover,
.status-modal-cancel:focus-visible{
  background:#dc2626;
  border-color:#dc2626;
  outline:none;
  box-shadow:0 0 0 2px rgba(239,68,68,.2);
}

.table-row-enter{
  opacity:0;
  transform:translateY(6px);
  animation:rowInSoft .22s ease forwards;
  animation-delay:var(--row-delay, 0ms);
}

@keyframes overlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes overlayOut{
  from{ opacity:1; }
  to{ opacity:0; }
}

@keyframes modalInSoft{
  from{
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes modalOutSoft{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(8px) scale(.98);
  }
}

@keyframes rowInSoft{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== VISUAL REFRESH + A11Y ===== */
:root{
  --brand-900:#102a43;
  --brand-700:#1f4f8a;
  --brand-500:#2f7ad6;
  --accent:#0ea5e9;
  --surface:#f5f8fc;
}

body{
  background:
    radial-gradient(1200px 580px at -10% -10%, rgba(14,165,233,.12), transparent 58%),
    radial-gradient(900px 420px at 100% 0, rgba(47,122,214,.12), transparent 54%),
    var(--surface);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.login-body{
  position:relative;
  min-height:100vh;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(250,204,21,.18), transparent 20%),
    radial-gradient(circle at 86% 18%, rgba(14,165,233,.18), transparent 18%),
    radial-gradient(circle at 82% 80%, rgba(248,250,252,.08), transparent 18%),
    linear-gradient(135deg, #07111f 0%, #0c1727 42%, #111827 100%);
}

.login-stage{
  position:relative;
  width:100%;
  min-height:calc(100vh - 48px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-stage::before,
.login-stage::after{
  content:'';
  position:absolute;
  z-index:0;
  pointer-events:none;
}

.login-stage::before{
  top:-12vh;
  right:-10vw;
  width:min(52vw, 760px);
  height:min(52vw, 760px);
  border-radius:42% 58% 38% 62% / 38% 40% 60% 62%;
  background:
    radial-gradient(circle at 28% 30%, rgba(250,204,21,.2), transparent 24%),
    linear-gradient(145deg, rgba(17,24,39,.72) 0%, rgba(15,23,42,.24) 50%, rgba(14,165,233,.18) 100%);
  border:1px solid rgba(255,255,255,.08);
  opacity:.98;
  filter:blur(10px);
}

.login-stage::after{
  left:-10vw;
  bottom:-10vh;
  width:min(36vw, 440px);
  height:min(36vw, 440px);
  border-radius:49% 51% 59% 41% / 52% 33% 67% 48%;
  background:
    radial-gradient(circle at 50% 50%, rgba(250,204,21,.1), transparent 42%),
    linear-gradient(135deg, rgba(250,204,21,.18), rgba(245,158,11,.12));
  filter:blur(6px);
}

.login-grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.login-grid span{
  position:absolute;
  display:block;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(148,163,184,.08);
}

.login-grid span:nth-child(1){
  top:18%;
  left:12%;
  width:120px;
  height:120px;
}

.login-grid span:nth-child(2){
  top:63%;
  right:11%;
  width:72px;
  height:72px;
}

.login-grid span:nth-child(3){
  top:72%;
  right:16%;
  width:18px;
  height:18px;
  background:rgba(250,204,21,.7);
  border:none;
}

.login-grid span:nth-child(4){
  left:22%;
  bottom:16%;
  width:180px;
  height:180px;
  border-radius:40px;
  transform:rotate(20deg);
  background:rgba(15,23,42,.12);
}

.login-police-band{
  position:absolute;
  left:50%;
  z-index:0;
  display:flex;
  gap:28px;
  align-items:center;
  width:min(1200px, 145vw);
  padding:8px 26px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(12,18,30,.99) 0 18px,
      rgba(250,204,21,.98) 18px 36px
    );
  box-shadow:
    0 24px 60px rgba(2,6,23,.28),
    0 0 0 1px rgba(250,204,21,.08);
  opacity:.96;
}

.login-police-band span{
  flex:0 0 auto;
  color:#08111d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.38em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:none;
}

.login-police-band-a{
  top:18%;
  transform:translateX(-50%) rotate(-11deg);
}

.login-police-band-b{
  bottom:14%;
  transform:translateX(-50%) rotate(9deg);
}

.login-orb{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  opacity:.74;
}

.login-orb-a{
  right:8%;
  bottom:25%;
  width:150px;
  height:150px;
  background:
    radial-gradient(circle at 50% 50%, rgba(248,250,252,.18), transparent 28%),
    rgba(14,165,233,.12);
  border:1px solid rgba(255,255,255,.08);
}

.login-orb-b{
  right:12%;
  bottom:19%;
  width:48px;
  height:48px;
  background:rgba(250,204,21,.3);
}

.login-card{
  position:relative;
  z-index:1;
  width:min(520px, 100%);
  padding:40px 36px 32px;
  border:1px solid rgba(250,204,21,.26);
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.88) 0%, rgba(15,23,42,.76) 100%);
  backdrop-filter:blur(18px);
  box-shadow:
    0 30px 80px rgba(2,6,23,.54),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(255,255,255,.03);
  text-align:center;
}

.login-card::before{
  content:'';
  position:absolute;
  inset:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.login-brand-mark{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0 auto 20px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.1), transparent 40%),
    rgba(255,255,255,.03);
  box-shadow:0 18px 34px rgba(2,6,23,.2);
}

.login-brand-mark img{
  width:48px;
  height:48px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

.login-brand-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:4px;
}

.login-brand-overline{
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#facc15;
  font-weight:800;
}

.login-brand-copy strong{
  color:#f8fafc;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.login-kicker{
  margin-bottom:12px;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#facc15;
  font-weight:700;
}

.login-card h2{
  margin-bottom:14px;
  color:#f8fafc;
  font-size:52px;
  line-height:1.02;
  letter-spacing:-.03em;
}

.login-subtitle{
  max-width:320px;
  margin:0 auto 24px;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.6;
}

.login-form-stack{
  display:grid;
  gap:15px;
}

.login-field{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  min-height:60px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  background:rgba(15,23,42,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.login-field:focus-within{
  border-color:rgba(250,204,21,.72);
  box-shadow:0 0 0 4px rgba(250,204,21,.14);
}

.login-field-icon{
  flex:0 0 auto;
  font-size:16px;
  opacity:.9;
  color:#facc15;
}

.login-card input{
  width:100%;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  color:#f8fafc;
  font-size:15px;
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}

.login-card input::placeholder{
  color:#94a3b8;
}

.login-card input:focus,
.login-card input:active{
  outline:none;
  box-shadow:none;
}

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f8fafc;
  -webkit-box-shadow:0 0 0 1000px rgba(15,23,42,.01) inset;
  transition:background-color 9999s ease-in-out 0s;
}

.login-card input:focus-visible,
button:focus-visible,
.sidebar li:focus-visible{
  outline:2px solid rgba(14,165,233,.45);
  outline-offset:2px;
}

.login-card button{
  min-height:60px;
  margin-top:4px;
  border-radius:18px;
  background:
    linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  box-shadow:0 18px 34px rgba(245,158,11,.24);
  color:#111827;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.login-card button:hover{
  background:linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
}

.login-card button:disabled{
  opacity:.62;
  cursor:not-allowed;
}

.login-card-top{
  margin-bottom:10px;
}

.login-security-note{
  margin-top:18px;
  font-size:12px;
  line-height:1.6;
  color:#94a3b8;
}

.forgot-password-btn{
  background:rgba(15,23,42,.48) !important;
  color:#f8fafc !important;
  border:1px solid rgba(250,204,21,.34) !important;
  box-shadow:none !important;
}

.forgot-password-btn:hover{
  background:rgba(30,41,59,.72) !important;
}

@media (max-width: 768px){
  .login-body{
    padding:16px;
  }

  .login-stage{
    min-height:calc(100vh - 32px);
  }

  .login-stage::before{
    top:-8vh;
    right:-24vw;
    width:88vw;
    height:88vw;
  }

  .login-stage::after{
    left:-16vw;
    bottom:-6vh;
    width:58vw;
    height:58vw;
  }

  .login-police-band{
    width:170vw;
    padding:7px 16px;
    gap:18px;
  }

  .login-police-band span{
    font-size:9px;
    letter-spacing:.2em;
  }

  .login-police-band-a{
    top:16%;
  }

  .login-police-band-b{
    bottom:12%;
  }

  .login-card{
    padding:30px 22px 24px;
    border-radius:26px;
  }

  .login-brand-mark{
    width:100%;
    justify-content:center;
    padding:10px 12px;
  }

  .login-brand-copy strong{
    font-size:13px;
  }

  .login-card h2{
    font-size:40px;
  }

  .login-grid span:nth-child(1){
    width:72px;
    height:72px;
  }

  .login-grid span:nth-child(4){
    width:110px;
    height:110px;
  }
}

.sidebar{
  background:linear-gradient(180deg, #0f2740 0%, #163557 100%);
  border-right:1px solid rgba(255,255,255,.08);
}

.sidebar li.active,
.sidebar li:hover{
  background:linear-gradient(90deg, rgba(47,122,214,.9), rgba(14,165,233,.75));
}

/* ===== SETTING: CENTER AKSI COLUMN ===== */
.setting-table th:last-child,
.setting-table td:last-child{
  text-align:center;
}

.setting-table td:last-child > button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 4px 4px 0;
}

.setting-table td:last-child > button:last-child{
  margin-right:0;
}

.setting-table td code{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ===== LOG MENU LOOK (match compact sample) ===== */
#menuLog{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border-radius:0;
}

#menuLog .menu-main{
  gap:10px;
  font-weight:700;
  letter-spacing:.4px;
  color:#8ea3c3;
}

#menuLog .menu-icon{
  color:#8ea3c3;
  font-size:17px;
  line-height:1;
}

#menuLog:hover,
#menuLog.active{
  background:#22334a;
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}

#menuLog:hover .menu-main,
#menuLog.active .menu-main,
#menuLog:hover .menu-icon,
#menuLog.active .menu-icon{
  color:#a9bbd4;
}

/* ===== SIDEBAR MODERN POLISH ===== */
.sidebar{
  background:linear-gradient(180deg, #0f2740 0%, #143453 62%, #173a5e 100%);
  border-right:1px solid rgba(255,255,255,.08);
}

.sidebar-menu{
  gap:4px;
}

.sidebar-menu > li{
  min-height:40px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid transparent;
  color:#e5edf8;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  white-space:nowrap;
}

.sidebar-menu > li:not(.dashboard-item):not(#menuSetting):not(#menuLog):not(#logout){
  gap:10px;
}

.sidebar-menu > li:not(.dashboard-item):not(#menuSetting):not(#menuLog):not(#logout) > span:first-child{
  width:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

#menuSetting,
#menuLog{
  justify-content:flex-start;
}

#menuSetting .menu-main,
#menuLog .menu-main{
  display:flex;
  align-items:center;
  gap:10px;
  color:#e5edf8;
  font-size:15px;
  font-weight:600;
}

#menuSetting .menu-icon,
#menuLog .menu-icon{
  width:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#9fb4d1;
}

.dashboard-item{
  justify-content:space-between;
}

.dashboard-item .menu-main{
  gap:10px;
}

.dashboard-item .dashboard-logo{
  width:18px;
  height:18px;
  background:rgba(255,255,255,.16);
}

.dashboard-item .dashboard-logo svg{
  width:11px;
  height:11px;
  fill:#d9e6f6;
}

.menu-chevron{
  color:#9eb2cd;
}

.sidebar-menu > li.active,
.sidebar-menu > li:hover{
  background:linear-gradient(90deg, rgba(42,102,170,.72), rgba(33,132,196,.56));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 20px rgba(9,28,49,.35);
}

#menuLog{
  border-radius:10px;
}

.sidebar-logo{
  margin:6px auto 16px;
  width:100%;
  padding:8px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(46,117,196,.24), rgba(26,79,140,.18));
  border:1px solid rgba(187,223,255,.15);
  box-shadow:0 12px 26px rgba(7,24,44,.32);
}

.sidebar-logo img{
  width:100%;
  max-width:196px;
  margin:0 auto;
  height:auto;
  display:block;
  object-fit:contain;
  filter:contrast(1.07) saturate(1.08) drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

.kendala-withdraw-danger{
  color:#b91c1c;
  font-weight:700;
}

.kendala-withdraw-row-danger td{
  background:#fff1f2 !important;
  color:#991b1b;
}

.kendala-withdraw-row-danger td:last-child{
  color:inherit;
}

.kendala-withdraw-row-suspend td{
  background:#fee2e2 !important;
  color:#991b1b;
}

.kendala-withdraw-row-suspend td:last-child{
  color:inherit;
}

.kendala-withdraw-row-success td{
  background:#dcfce7 !important;
  color:#166534;
}

.kendala-withdraw-row-success td:last-child{
  color:inherit;
}

.kendala-withdraw-table #kwJam,
#kwJam{
  width:120px;
}

.kendala-withdraw-table td:nth-last-child(3),
.kendala-withdraw-table th:nth-last-child(3){
  text-align:left !important;
}

.kendala-withdraw-table td{
  text-align:left;
}

.kendala-withdraw-table td:last-child,
.kendala-withdraw-table th:last-child{
  text-align:center !important;
}

.kendala-bank-cell{
  max-width:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.process-ready-notice{
  position:fixed;
  right:16px;
  bottom:16px;
  width:min(360px, calc(100vw - 24px));
  background:#ffffff;
  border:1px solid #dbe6f3;
  border-radius:12px;
  box-shadow:0 16px 34px rgba(15,23,42,.22);
  padding:12px;
  z-index:2000;
}

.prn-title{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:6px;
}

.prn-body{
  font-size:13px;
  color:#334155;
  line-height:1.45;
}

.prn-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.prn-btn,
.prn-close{
  border:none;
  border-radius:8px;
  padding:7px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

.prn-btn{
  background:#2563eb;
  color:#fff;
}

.prn-close{
  background:#e2e8f0;
  color:#334155;
}

/* Sidebar hide/show toggle */
.layout{
  position:relative;
}

.sidebar{
  transition:transform .28s ease;
  will-change:transform;
}

.content{
  transition:margin-left .28s ease, width .28s ease;
}

.sidebar-toggle{
  position:fixed;
  top:14px;
  left:226px;
  width:36px;
  height:36px;
  border-radius:6px;
  border:1px solid #d1d5db;
  background:#ffffff;
  color:#1f2937;
  font-size:20px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1300;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
  opacity:1 !important;
  visibility:visible !important;
}

.sidebar-toggle:hover{
  background:#f8fafc;
  color:#0f172a;
}

#dashboard .content .page-shell-head .sidebar-toggle{
  position:relative;
  top:auto;
  left:auto;
  z-index:1;
  width:40px;
  height:40px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  flex:0 0 auto;
}

.page-shell-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  padding:14px 16px;
  position:sticky;
  top:0;
  z-index:40;
  border:1px solid #e5edf7;
  border-radius:8px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 34%),
    linear-gradient(160deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}

.page-shell-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}

.page-shell-toggle-slot{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.page-shell-copy{
  min-width:0;
}

.page-shell-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}

.page-shell-subtitle{
  margin:0 0 4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.page-shell-title{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.4px;
}

.account-locale-switch{
  display:inline-flex;
  align-items:center;
}

.locale-menu{
  position:relative;
}

.locale-menu-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:68px;
  padding:8px 12px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:#fff;
  color:#475569;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.locale-menu-trigger:hover{
  background:#f8fbff;
}

.locale-menu.open .locale-menu-trigger{
  border-color:#3b82f6;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:0 14px 28px rgba(59,130,246,.16);
}

.locale-menu-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:230px;
  display:none;
  padding:8px;
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  z-index:90;
}

.locale-menu.open .locale-menu-dropdown{
  display:grid;
  gap:4px;
}

.locale-menu-item{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:#fff;
  color:#334155;
  text-align:left;
}

.locale-menu-item:hover,
.locale-menu-item.active{
  background:#eff6ff;
}

.locale-menu-item.active{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  box-shadow:0 10px 18px rgba(37,99,235,.24);
}

.locale-menu-item-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.locale-menu-item-code{
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.locale-menu-item-name{
  color:#475569;
  font-size:12px;
  font-weight:500;
}

.locale-menu-item.active .locale-menu-item-code,
.locale-menu-item.active .locale-menu-item-name{
  color:#fff;
}

.locale-flag{
  width:16px;
  height:16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.locale-flag-us{
  position:relative;
  background:
    linear-gradient(180deg,
      #b91c1c 0 11%,
      #ffffff 11% 22%,
      #b91c1c 22% 33%,
      #ffffff 33% 44%,
      #b91c1c 44% 55%,
      #ffffff 55% 66%,
      #b91c1c 66% 77%,
      #ffffff 77% 88%,
      #b91c1c 88% 100%);
}

.locale-flag-us::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:52%;
  height:58%;
  background:#1d4ed8;
  border-top-left-radius:999px;
}

.locale-flag-id{
  background:linear-gradient(180deg,#ef4444 0 50%, #ffffff 50% 100%);
}

.locale-label{
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  color:inherit;
}

.locale-menu-item-flag .locale-label{
  display:none;
}

.account-menu{
  position:relative;
}

.account-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid #dbe4ef;
  border-radius:14px;
  background:#fff;
  color:#334155;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.account-menu-trigger:hover{
  background:#f8fbff;
}

.account-menu-locale{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#475569;
  font-size:12px;
  font-weight:700;
}

.account-menu-usericon{
  color:#475569;
  font-size:16px;
}

.login-locale-host{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}

.account-menu-label{
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.account-menu-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  display:none;
  padding:8px;
  border:1px solid #dbe4ef;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  z-index:80;
}

.account-menu.open .account-menu-dropdown{
  display:grid;
  gap:4px;
}

.account-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 12px;
  border:none;
  border-radius:12px;
  background:#fff;
  color:#334155;
  font-size:13px;
  font-weight:700;
  text-align:left;
}

.account-menu-item:hover{
  background:#f1f5f9;
}

.account-menu-item-danger{
  color:#b91c1c;
}

.account-menu-item-icon{
  width:18px;
  text-align:center;
  color:#64748b;
}

.account-settings-shell{
  display:grid;
  gap:16px;
}

.account-settings-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
  border:1px solid #d8e3ef;
  border-radius:999px;
  background:#dfe8f5;
}

.account-settings-tab{
  padding:12px 14px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#6b7f97;
  font-size:14px;
  font-weight:800;
}

.account-settings-tab.active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}

.account-settings-block{
  padding:18px;
  border:1px solid #e2eaf4;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 32px rgba(15,23,42,.05);
}

.account-settings-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.account-settings-block-head h3{
  margin:0;
  color:#0f172a;
  font-size:18px;
}

.account-profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.account-profile-field,
.account-password-field{
  display:grid;
  gap:8px;
}

.account-profile-field-full{
  grid-column:1 / -1;
}

.account-profile-field span,
.account-password-field span{
  color:#334155;
  font-size:13px;
  font-weight:700;
}

.account-profile-field input,
.account-password-field input{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1px solid #cfd8e3;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}

.account-profile-field input[readonly]{
  color:#334155;
  background:#fbfdff;
}

.account-password-form{
  display:grid;
  gap:16px;
}

.account-password-input-wrap{
  position:relative;
}

.account-password-input-wrap input{
  padding-right:48px;
}

.account-password-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#eef2f7;
  color:#64748b;
  font-size:14px;
}

.account-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.account-secondary-btn,
.account-primary-btn{
  min-width:110px;
  min-height:42px;
  padding:0 18px;
  border:none;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
}

.account-secondary-btn{
  background:#e5e7eb;
  color:#475569;
}

.account-primary-btn{
  background:#16a34a;
  color:#fff;
}

.account-primary-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

#settingWithdrawKeterangan tr:nth-child(odd) td{
  background:#f8fbff;
}

#settingWithdrawKeterangan tr:nth-child(even) td{
  background:#f1f7ff;
}

#settingWithdrawKeterangan tr:hover td{
  background:#dbeafe;
}

#settingWithdrawKeterangan tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingLaporan tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingWithdraw tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingWithdrawKeterangan tr.kw-custom-color td code{
  color:inherit;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  padding:2px 8px;
  font-weight:700;
}

#settingWithdrawKeterangan tr.kw-custom-color:hover td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingLaporan tr.kw-custom-color:hover td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingWithdraw tr.kw-custom-color:hover td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#settingWithdraw tr.kw-custom-color td code{
  color:inherit;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  padding:2px 8px;
  font-weight:700;
}

#dashboard:not(.sidebar-collapsed) .content .page-subtitle,
#dashboard:not(.sidebar-collapsed) .content .page-title,
#dashboard:not(.sidebar-collapsed) .content .withdraw-title,
#dashboard:not(.sidebar-collapsed) .content > h2:first-child{
  margin-left:52px;
}

.kw-color-chip{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:4px;
  border:1px solid rgba(15,23,42,.2);
  vertical-align:middle;
  margin-right:8px;
}

.color-only-input{
  width:52px;
  min-width:52px;
  height:38px;
  padding:4px;
  font-size:0;
  line-height:0;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:transparent;
  text-indent:-9999px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 1px 2px rgba(15,23,42,.08);
}

.color-only-input::-webkit-color-swatch-wrapper{
  padding:0;
}

.color-only-input::-webkit-color-swatch{
  border:none;
  border-radius:7px;
}

.color-only-input::-moz-color-swatch{
  border:none;
  border-radius:7px;
}

.setting-form .color-only-input{
  width:56px;
  min-width:56px;
  height:38px;
  padding:3px;
  border-radius:12px;
  align-self:center;
}

.setting-table td .kw-color-chip{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}

.kendala-withdraw-table tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

#laporanTableWrap tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

.withdraw-table tr.kw-custom-color td{
  background:var(--kw-row-bg) !important;
  color:var(--kw-row-text) !important;
}

.kendala-withdraw-table tr.kw-custom-color td .kendala-bank-cell,
.kendala-withdraw-table tr.kw-custom-color td .kendala-withdraw-danger{
  color:inherit !important;
}

#laporanTableWrap tr.kw-custom-color td .status-badge,
#laporanTableWrap tr.kw-custom-color td .badge{
  color:inherit;
}

.withdraw-table tr.kw-custom-color td .withdraw-transfer-name,
.withdraw-table tr.kw-custom-color td .withdraw-transfer-meta{
  color:inherit !important;
}

.withdraw-card input[type="color"]{
  display:none !important;
}

.kendala-withdraw-table tr.kendala-withdraw-row-suspend td{
  background:#fee2e2 !important;
  color:#991b1b !important;
}

.kendala-withdraw-table tr.kendala-withdraw-row-success td{
  background:#dcfce7 !important;
  color:#166534 !important;
}

#dashboard.sidebar-collapsed .sidebar{
  transform:translateX(-100%);
}

#dashboard.sidebar-collapsed .content{
  margin-left:0 !important;
  width:100% !important;
  padding-left:64px;
}

#dashboard.sidebar-collapsed .sidebar-toggle{
  left:14px;
}

@media (max-width: 768px){
  .sidebar-toggle{
    left:204px;
    top:12px;
  }

  #dashboard.sidebar-collapsed .content{
    padding-left:58px;
  }

  #dashboard .content .page-shell-head .sidebar-toggle{
    width:38px;
    height:38px;
  }

  .page-shell-head{
    flex-direction:column;
    align-items:stretch;
  }

  .page-shell-main{
    width:100%;
    gap:10px;
  }

  .page-shell-toggle-slot{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .page-shell-title{
    font-size:17px;
  }

  .dashboard-head-actions{
    width:100%;
    align-items:flex-start;
  }
}

.dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  padding:14px 16px;
  position:sticky;
  top:0;
  z-index:40;
  border:1px solid #e5edf7;
  border-radius:8px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 34%),
    linear-gradient(160deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}

#contentArea[data-page]{
  padding-top:0;
}

.dashboard-head-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}

.dashboard-head-toggle-slot{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.dashboard-head-copy{
  min-width:0;
}

.dashboard-title{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.4px;
}

.dashboard-subtitle{
  margin-top:4px;
  color:#475569;
  font-size:12px;
}

.dashboard-head-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.dashboard-refresh-btn{
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  border:0;
  color:#fff;
  border-radius:8px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(2,132,199,.25);
}

.dashboard-refresh-btn:hover{
  background:linear-gradient(135deg,#0284c7,#0369a1);
}

.dashboard-updated{
  font-size:11px;
  color:#64748b;
  white-space:nowrap;
}

.dashboard-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.dashboard-overview-card{
  border-radius:16px;
  padding:12px 14px;
  background:linear-gradient(165deg,#ffffff 0%,#eff6ff 100%);
  border:1px solid #dde7f3;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-overview-card:hover,
.dashboard-overview-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(15,23,42,.08);
  border-color:#93c5fd;
}

.dashboard-overview-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.dashboard-overview-card.pending{
  background:linear-gradient(165deg,#fff7ed 0%,#ffedd5 100%);
  border-color:#fed7aa;
}

.dashboard-overview-card.done{
  background:linear-gradient(165deg,#ecfdf5 0%,#d1fae5 100%);
  border-color:#a7f3d0;
}

.dashboard-overview-card.suspend{
  background:linear-gradient(165deg,#fef2f2 0%,#fee2e2 100%);
  border-color:#fca5a5;
}

.suspend-summary-card{
  background:linear-gradient(165deg,#fef2f2 0%,#fee2e2 100%);
  border-color:#fca5a5;
}

.dashboard-overview-card.today{
  background:linear-gradient(165deg,#f5f3ff 0%,#ede9fe 100%);
  border-color:#ddd6fe;
}

.dashboard-overview-card h3{
  margin:0;
  font-size:11px;
  color:#334155;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.dashboard-overview-card p{
  margin:8px 0 0;
  font-size:24px;
  font-weight:800;
  color:#0f172a;
}

.dashboard-panel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.dashboard-insight-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.dashboard-trend-card,
.dashboard-quick-card{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 26%),
    linear-gradient(155deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #e2eaf4;
  border-radius:18px;
  padding:14px;
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}

.dashboard-trend-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.dashboard-trend-head h3{
  margin:0;
  font-size:17px;
  color:#0f172a;
}

.dashboard-trend-head p{
  margin:6px 0 0;
  font-size:12px;
  color:#64748b;
}

.dashboard-delta-badge{
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  background:#e2e8f0;
  color:#334155;
}

.dashboard-delta-badge.up{
  background:#dcfce7;
  color:#166534;
}

.dashboard-delta-badge.down{
  background:#fee2e2;
  color:#991b1b;
}

.dashboard-delta-badge.flat{
  background:#e2e8f0;
  color:#334155;
}

.dashboard-trend-bars{
  height:154px;
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  align-items:end;
}

.dashboard-trend-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:0;
}

.dashboard-trend-value{
  font-size:10px;
  color:#475569;
  font-weight:600;
}

.dashboard-trend-bar-wrap{
  width:100%;
  height:104px;
  border-radius:12px;
  background:#eef4f9;
  display:flex;
  align-items:flex-end;
  padding:4px;
}

.dashboard-trend-bar{
  width:100%;
  border-radius:8px;
  background:linear-gradient(180deg,#0ea5e9,#0284c7);
  min-height:8px;
}

.dashboard-trend-day{
  font-size:10px;
  color:#64748b;
  text-transform:capitalize;
}

.dashboard-quick-card h3{
  margin:0;
  font-size:17px;
  color:#0f172a;
}

.dashboard-quick-card p{
  margin:4px 0 10px;
  font-size:12px;
  color:#64748b;
}

.dashboard-quick-links{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.dashboard-quick-links .panel-link-btn{
  width:100%;
  text-align:center;
}

.dashboard-update-card{
  display:flex;
  flex-direction:column;
  padding:0 0 0 2px;
  overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
}

.dashboard-update-topbar{
  display:none;
}

.dashboard-update-head{
  padding:4px 0 10px;
  border-bottom:none;
  background:transparent;
}

.dashboard-update-head h3{
  margin:0;
  font-size:22px;
  color:#0f172a;
  letter-spacing:-.2px;
}

.dashboard-update-head p{
  margin:6px 0 0;
  font-size:12px;
  color:#64748b;
}

.dashboard-update-list{
  display:grid;
  gap:10px;
  max-height:430px;
  overflow:auto;
  padding:0 6px 0 0;
}

.dashboard-update-item{
  display:grid;
  gap:8px;
  width:100%;
  padding:14px 14px 12px;
  border:1px solid #d8e3f0;
  border-radius:16px;
  background:#fdfefe;
  box-shadow:none;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.dashboard-update-item:hover,
.dashboard-update-item:focus-visible{
  border-color:#93c5fd;
  background:#f8fbff;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
  outline:none;
}

.dashboard-update-meta{
  font-style:normal;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#6b7f97;
}

.dashboard-update-item strong{
  font-size:16px;
  color:#0f172a;
}

.dashboard-update-item span{
  font-size:12px;
  line-height:1.7;
  color:#475569;
}

.dashboard-update-modal{
  max-width:640px;
  max-height:min(84vh, 720px);
  overflow:auto;
  padding:18px;
}

.dashboard-update-modal-meta{
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

.dashboard-update-modal-title{
  margin-bottom:10px;
  text-align:left;
  color:#0f172a;
  font-size:22px;
}

.dashboard-update-modal-summary{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.7;
  color:#475569;
}

.dashboard-update-modal-list{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.dashboard-update-modal-point{
  padding:11px 12px;
  border:1px solid #dbe7f4;
  border-radius:12px;
  background:#f8fbff;
  font-size:13px;
  line-height:1.7;
  color:#1e293b;
}

.dashboard-overview-modal{
  max-width:720px;
}

.dashboard-overview-list{
  gap:12px;
}

.dashboard-overview-item{
  display:grid;
  gap:6px;
}

.dashboard-overview-item strong{
  font-size:14px;
  color:#0f172a;
}

.dashboard-overview-item span{
  font-size:13px;
  color:#475569;
}

.dashboard-panel{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.07), transparent 24%),
    linear-gradient(160deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid #e6eef8;
  border-radius:18px;
  padding:10px;
  box-shadow:0 10px 22px rgba(15,23,42,.04);
}

.dashboard-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.dashboard-panel-head h3{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#1e293b;
}

.panel-link-btn{
  margin:0;
  padding:5px 10px;
  border-radius:999px;
  background:#eef4f8;
  color:#334155;
  font-size:11px;
  font-weight:600;
}

.panel-link-btn:hover{
  background:#cbd5e1;
}

.dashboard-summary-cards{
  gap:6px;
  margin-bottom:0;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}

.dashboard-summary-card{
  border-radius:12px;
  padding:8px 10px;
  border:1px solid #e6edf6;
  box-shadow:none;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  min-height:86px;
}

.dashboard-summary-card:hover{
  transform:translateY(-2px);
}

.dashboard-summary-card h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  color:#64748b;
  margin-bottom:3px;
}

.dashboard-summary-card > span{
  font-size:24px;
  font-weight:700;
  letter-spacing:-.2px;
  line-height:1;
}

.dashboard-summary-card h3 > span{
  font-size:10px;
  font-weight:600;
  line-height:1.2;
  color:#64748b;
}

.metric-delta{
  font-style:normal;
  font-size:10px;
  font-weight:600;
  padding:2px 5px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
}

.metric-delta.up{
  background:#dcfce7;
  color:#166534;
}

.metric-delta.down{
  background:#fee2e2;
  color:#991b1b;
}

.metric-delta.flat{
  background:#e2e8f0;
  color:#475569;
}

/* ===== PROFESSIONAL UI REFRESH ===== */
body{
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.08), transparent 26%),
    linear-gradient(180deg,#eef4fb 0%,#f7faff 100%);
  color:#0f172a;
}

.content{
  padding:16px 18px 22px;
  background:transparent;
}

.sidebar{
  background:
    linear-gradient(180deg,#0f172a 0%,#162033 100%);
  border-right:1px solid rgba(148,163,184,.18);
  box-shadow:18px 0 40px rgba(15,23,42,.12);
}

.sidebar-logo{
  padding:18px 18px 12px;
}

.sidebar-menu{
  padding:0 10px 12px;
}

.sidebar li{
  margin-bottom:6px;
  border:1px solid transparent;
  border-radius:12px;
  color:#dbe7f5;
}

.sidebar li.active,
.sidebar li:hover{
  background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(14,165,233,.88));
  border-color:rgba(191,219,254,.25);
}

.card{
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
  border:1px solid #e4edf7;
  box-shadow:0 14px 30px rgba(15,23,42,.045);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.06), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

.page-title{
  letter-spacing:-.25px;
}

.page-subtitle{
  color:#5b6b82;
}

.page-shell-head{
  border:1px solid #e5edf7;
  border-radius:8px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 34%),
    linear-gradient(160deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}

.page-shell-subtitle{
  color:#64748b;
}

.page-shell-title{
  color:#0f172a;
}

.locale-menu-trigger,
.account-menu-trigger,
.sidebar-toggle{
  border-color:#dbe4ef;
  background:#fff;
  color:#475569;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.locale-menu-trigger:hover,
.account-menu-trigger:hover,
.sidebar-toggle:hover{
  background:#f8fbff;
  color:#0f172a;
}

.locale-menu-dropdown,
.account-menu-dropdown{
  border:1px solid #dbe4ef;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
}

input,
select,
textarea{
  border:1px solid #d7e2ef;
  border-radius:12px;
  background:#f8fbff;
  color:#0f172a;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(96,165,250,.16);
}

button{
  border-radius:10px;
}

th{
  background:#f3f7fb;
  color:#42556e;
  font-size:11px;
  letter-spacing:.55px;
}

td{
  border-bottom:1px solid #e8eef6;
}

tr:hover td{
  background:#f8fbff;
}

.table-wrap{
  border:1px solid #e5edf6;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
  content-visibility:auto;
  contain:layout paint;
  contain-intrinsic-size:600px auto;
}

.process-ready-notice{
  width:min(390px, calc(100vw - 24px));
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #d8e6f6;
  border-radius:16px;
  box-shadow:0 22px 46px rgba(15,23,42,.18);
  padding:14px;
}

.prn-title{
  font-size:15px;
  margin-bottom:7px;
}

.prn-body{
  font-size:12px;
  line-height:1.6;
  color:#42556e;
}

.prn-actions{
  margin-top:12px;
}

.prn-btn,
.prn-close{
  border-radius:10px;
  padding:8px 11px;
}

.prn-btn{
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
}

.prn-close{
  background:#e8eef5;
}

.dashboard-update-item:first-child{
  border-color:#bfdbfe;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

/* ===== LIGHTER MOTION AUDIT FIX ===== */
body{
  transition:background-color .14s ease, color .14s ease;
}

#contentArea.page-enter .page-subtitle,
#contentArea.page-enter .page-title,
#contentArea.page-enter .withdraw-title,
#contentArea.page-enter .summary-card,
#contentArea.page-enter .card,
#contentArea.page-enter .table-wrap{
  transform:translateY(4px);
  animation:contentRiseCompact .18s ease-out forwards;
}

@keyframes contentRiseCompact{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.summary-card:hover,
.dashboard-summary-card:hover,
.setting-home-card:hover,
.btn-action.success:hover,
.btn-action.suspend:hover,
.btn-action.print:hover,
.btn-action.delete:hover{
  transform:none;
  box-shadow:inherit;
}

.sidebar,
.content,
.sidebar-toggle,
.sidebar li,
.panel-link-btn,
.dashboard-refresh-btn,
.dashboard-update-item,
.dashboard-overview-card,
.dashboard-trend-card,
.dashboard-panel{
  transition:
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    color .14s ease;
}

.dashboard-head,
.dashboard-overview-card,
.dashboard-trend-card,
.dashboard-update-card,
.dashboard-panel,
.card{
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}

.dashboard-trend-card,
.dashboard-update-card,
.dashboard-panel{
  border-radius:16px;
}

.dashboard-title{
  font-size:22px;
}

.dashboard-head{
  padding:12px 14px;
  margin-bottom:12px;
}

.dashboard-overview-grid,
.dashboard-insight-grid,
.dashboard-panel-grid{
  gap:10px;
}

.dashboard-trend-card,
.dashboard-quick-card{
  padding:12px;
}

.dashboard-trend-bars{
  height:144px;
}

.dashboard-update-item{
  padding:12px 12px 10px;
}

.process-ready-notice{
  box-shadow:0 14px 28px rgba(15,23,42,.14);
}

.notify-passive-badge{
  position:fixed;
  top:18px;
  right:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(29,37,54,.92);
  color:#f5f7fb;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 16px 32px rgba(9,14,26,.24);
  border:1px solid rgba(255,255,255,.14);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:10020;
}

.notify-passive-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.18);
}

.notify-passive-badge.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 1100px){
  .dashboard-insight-grid,
  .dashboard-panel-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .dashboard-head{
    flex-direction:column;
    align-items:stretch;
  }

  .dashboard-head-actions{
    align-items:flex-start;
  }

  .dashboard-overview-grid{
    grid-template-columns:1fr;
  }

  .dashboard-overview-split{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-trend-bars{
    height:150px;
    gap:6px;
  }

  .dashboard-summary-cards{
    grid-template-columns:1fr;
  }
}

@media (max-width: 420px){
  .dashboard-overview-split{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  body{
    background:
      radial-gradient(circle at top left, rgba(14,165,233,.1), transparent 32%),
      linear-gradient(180deg,#eef4fb 0%,#f8fbff 100%);
  }

  .layout{
    min-height:100vh;
  }

  .content,
  #dashboard.sidebar-collapsed .content{
    margin-left:0 !important;
    width:100% !important;
    padding:12px 12px 18px !important;
  }

  .page-shell-head,
  .page-shell-actions{
    flex-wrap:wrap;
  }

  .page-shell-actions{
    width:100%;
    justify-content:space-between;
  }

  .account-menu{
    width:100%;
  }

  .account-menu-trigger{
    width:100%;
    justify-content:flex-start;
  }

  .account-menu-dropdown{
    left:0;
    right:auto;
    width:100%;
    min-width:0;
  }

  .account-profile-grid{
    grid-template-columns:1fr;
  }

  .account-profile-field-full{
    grid-column:auto;
  }

  .account-form-actions{
    flex-direction:column-reverse;
  }

  .account-secondary-btn,
  .account-primary-btn{
    width:100%;
  }

  .sidebar{
    width:min(78vw, 248px);
    padding:12px 8px 14px;
    transform:translateX(0);
    transition:transform .18s ease, box-shadow .18s ease;
    z-index:1400;
    box-shadow:22px 0 40px rgba(2,6,23,.42);
  }

  #dashboard.sidebar-collapsed .sidebar{
    transform:translateX(-108%);
  }

  #dashboard::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.34);
    opacity:1;
    pointer-events:auto;
    transition:opacity .18s ease;
    z-index:1390;
  }

  #dashboard.sidebar-collapsed::after{
    opacity:0;
    pointer-events:none;
  }

  .sidebar-logo{
    padding:8px 10px 6px;
  }

  .sidebar-menu{
    padding:0 4px 10px;
    gap:2px;
  }

  .sidebar li{
    min-height:44px;
    padding:10px 12px;
    font-size:13px;
  }

  .sidebar li .menu-main,
  .sidebar li{
    gap:10px;
  }

  .sidebar-logo img{
    max-width:100%;
    height:auto;
  }

  #logout{
    margin-top:10px;
    padding:12px;
  }

  .sidebar li span{
    min-width:0;
  }

  .sidebar-toggle{
    left:12px;
    top:12px;
  }

  #dashboard.sidebar-collapsed .sidebar-toggle{
    left:12px;
  }

  .page-shell-head,
  .dashboard-head{
    margin-bottom:12px;
    padding:12px;
    border-radius:14px;
  }

  .page-shell-main,
  .dashboard-head-main{
    align-items:flex-start;
  }

  .page-shell-copy,
  .dashboard-head-copy{
    width:100%;
  }

  .page-shell-title,
  .dashboard-title{
    font-size:19px;
    line-height:1.2;
  }

  .page-shell-subtitle,
  .dashboard-subtitle{
    font-size:11px;
    line-height:1.5;
  }

  .dashboard-head-actions{
    width:100%;
    gap:8px;
  }

  .dashboard-refresh-btn{
    width:100%;
    min-height:42px;
  }

  .dashboard-updated{
    white-space:normal;
    line-height:1.5;
  }

  .card{
    margin-bottom:14px;
    padding:14px;
    border-radius:16px;
  }

  .summary-cards,
  .dashboard-summary-cards,
  .dashboard-panel-grid,
  .dashboard-insight-grid,
  .dashboard-overview-grid,
  .setting-home-grid{
    grid-template-columns:1fr !important;
  }

  .dashboard-overview-split{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-panel-head,
  .setting-header,
  .complete-notify-foot{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .panel-link-btn,
  .complete-notify-actions,
  .security-actions,
  .bank-form-inline,
  .account-form-inline{
    width:100%;
  }

  .panel-link-btn,
  .complete-notify-actions button,
  .security-actions button,
  .bank-form-inline button,
  .account-form-inline button,
  .btn-hapus,
  .btn-danger,
  #actionBar button,
  #wdActionBar button,
  #kwActionBar button{
    width:100%;
  }

  .bank-form-inline,
  .account-form-inline{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .bank-form-inline input,
  .account-form-inline input,
  .account-form-inline select{
    width:100%;
  }

  .setting-form.setting-inline,
  .laporan-form,
  .withdraw-card{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .laporan-form input,
  .laporan-form select,
  .laporan-form button,
  .withdraw-card input,
  .withdraw-card select,
  .withdraw-card button,
  .setting-form.setting-inline input,
  .setting-form.setting-inline select,
  .setting-form.setting-inline textarea,
  .setting-form.setting-inline button{
    width:100%;
    margin-bottom:0;
  }

  .table-wrap{
    margin:0 -2px;
    border-radius:14px;
  }

  #laporanTableWrap,
  .withdraw-table,
  .setting-table{
    min-width:760px;
    font-size:12px;
  }

  #laporanTableWrap th,
  #laporanTableWrap td,
  .withdraw-table th,
  .withdraw-table td,
  .setting-table th,
  .setting-table td{
    padding:9px 8px;
    font-size:12px;
  }

  .btn-action{
    min-height:36px;
    padding:0 12px;
    font-size:11px;
  }

  .aksi-flex,
  .aksi-flex-stack,
  .kw-aksi-flex{
    gap:6px;
  }

  .dashboard-update-item{
    border-radius:14px;
    padding:12px;
  }

  .dashboard-update-modal{
    max-width:min(92vw, 640px);
    max-height:88vh;
    padding:16px;
  }

  .process-ready-notice{
    width:min(100vw - 20px, 380px);
    left:10px;
    right:10px;
    bottom:10px;
  }

  .notify-passive-badge{
    top:12px;
    right:12px;
    left:12px;
    justify-content:center;
  }
}

@media (max-width: 560px){
  .content,
  #dashboard.sidebar-collapsed .content{
    padding:10px 10px 16px !important;
  }

  .page-shell-head,
  .dashboard-head,
  .card,
  .dashboard-panel,
  .dashboard-trend-card,
  .dashboard-quick-card{
    border-radius:14px;
  }

  .page-shell-title,
  .dashboard-title{
    font-size:18px;
  }

  .sidebar{
    width:min(80vw, 232px);
  }

  .dashboard-overview-split{
    grid-template-columns:1fr;
  }

  .dashboard-trend-bars{
    height:132px;
    gap:4px;
  }

  .dashboard-overview-card p,
  .dashboard-summary-card > span{
    font-size:21px;
  }

  .dashboard-update-modal-title{
    font-size:19px;
  }
}