:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #14b8a6;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --dark: #0f172a;
  --light: #f8fafc;
  --gradient: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05);
  --shadow: 0 10px 25px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Inter', sans-serif; background: #f1f5f9; color: var(--dark); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6, .font-poppins { font-family: 'Poppins', sans-serif; }
.role-hidden { display: none !important; }

.splash-screen { position:fixed; inset:0; z-index:12000; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; transition:opacity .45s ease, visibility .45s ease; }
.splash-screen.hide { opacity:0; visibility:hidden; pointer-events:none; }
.splash-screen img { width:118px; height:118px; object-fit:contain; margin-bottom:20px; background:transparent !important; border-radius:30px; filter:drop-shadow(0 2px 3px rgba(2,6,23,.28)) drop-shadow(0 12px 18px rgba(2,6,23,.18)) drop-shadow(0 -1px 0 rgba(255,255,255,.55)); }
.splash-screen h1 { font-family:'Poppins',sans-serif; color:#0f172a; font-size:34px; font-weight:900; letter-spacing:-1px; margin:0 0 8px; }
.splash-screen p { color:#64748b; font-size:17px; font-weight:500; margin:0; }

/* v1.1.39 - Refresh mobile dibuat lebih cantik dengan layar loading agar halaman tidak terlihat berganti-ganti saat booting */
html.app-booting #appWrap { visibility: hidden; }
.app-refresh-screen {
  position: fixed;
  inset: 0;
  z-index: 11950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 20% 12%, rgba(37,99,235,.18), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(20,184,166,.16), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 48%, #ffffff 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
html.app-booting .app-refresh-screen,
.app-refresh-screen.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.app-refresh-card {
  width: min(88vw, 370px);
  min-height: 310px;
  border-radius: 34px;
  padding: 34px 24px 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 28px 80px rgba(15,23,42,.16);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.app-refresh-card::before {
  content: '';
  position: absolute;
  inset: -45% -28% auto;
  height: 190px;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(20,184,166,.18));
  filter: blur(4px);
  transform: rotate(-8deg);
}
.app-refresh-logo-ring {
  width: 94px;
  height: 94px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 38px rgba(37,99,235,.16);
  position: relative;
  z-index: 1;
}
.app-refresh-logo-ring::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 36px;
  border: 3px solid rgba(37,99,235,.15);
  border-top-color: rgba(37,99,235,.78);
  animation: appRefreshSpin 1.05s linear infinite;
}
.app-refresh-logo-ring img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  background: transparent !important;
  border-radius: 18px;
  filter: drop-shadow(0 2px 3px rgba(2,6,23,.30)) drop-shadow(0 10px 16px rgba(2,6,23,.16)) drop-shadow(0 -1px 0 rgba(255,255,255,.50));
}
.app-refresh-orbit {
  display: flex;
  gap: 8px;
  margin: 26px 0 13px;
  position: relative;
  z-index: 1;
}
.app-refresh-orbit span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
  opacity: .35;
  animation: appRefreshDot 1s ease-in-out infinite;
}
.app-refresh-orbit span:nth-child(2) { animation-delay: .16s; background: var(--secondary); }
.app-refresh-orbit span:nth-child(3) { animation-delay: .32s; }
.app-refresh-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.45px;
}
.app-refresh-card p {
  position: relative;
  z-index: 1;
  max-width: 285px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}
.app-refresh-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(226,232,240,.92);
  overflow: hidden;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.app-refresh-progress span {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient);
  animation: appRefreshProgress 1.45s ease-in-out infinite;
}
@keyframes appRefreshSpin { to { transform: rotate(360deg); } }
@keyframes appRefreshDot { 0%,100% { transform: translateY(0); opacity:.35; } 50% { transform: translateY(-7px); opacity:1; } }
@keyframes appRefreshProgress { 0% { transform: translateX(-105%); } 100% { transform: translateX(225%); } }
body.dark-mode .app-refresh-screen,
html.dark-mode .app-refresh-screen {
  background:
    radial-gradient(circle at 20% 12%, rgba(37,99,235,.23), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(20,184,166,.16), transparent 34%),
    linear-gradient(180deg, #020617 0%, #071224 48%, #020617 100%);
}
body.dark-mode .app-refresh-card,
html.dark-mode .app-refresh-card {
  background: rgba(15,23,42,.82);
  border-color: rgba(148,163,184,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}
body.dark-mode .app-refresh-logo-ring,
html.dark-mode .app-refresh-logo-ring {
  background: rgba(30,41,59,.92);
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}
body.dark-mode .app-refresh-card h2,
html.dark-mode .app-refresh-card h2 { color: #f8fafc; }
body.dark-mode .app-refresh-card p,
html.dark-mode .app-refresh-card p { color: rgba(226,232,240,.78); }
body.dark-mode .app-refresh-progress,
html.dark-mode .app-refresh-progress { background: rgba(148,163,184,.18); }

/* ===== LOGIN PAGE ===== */
.login-page { min-height: 100vh; background: var(--gradient); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; }
.login-page::before, .login-page::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); animation: float 8s ease-in-out infinite; }
.login-page::before { width: 350px; height: 350px; top: -120px; left: -120px; }
.login-page::after { width: 450px; height: 450px; bottom: -180px; right: -180px; animation-delay: 4s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(180deg); } }

.login-card { background: #fff; border-radius: 30px; padding: 45px 35px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); position: relative; z-index: 2; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.login-logo { text-align: center; margin-bottom: 35px; }
.login-logo .icon-wrap { width: 88px; height: 88px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform 0.3s; }
.login-logo .icon-wrap img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(37,99,235,.20)); }
.login-logo h2 { font-weight: 800; color: var(--dark); font-size: 26px; margin-bottom: 5px; font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;}
.login-logo p { color: #64748b; font-size: 14px; margin-top: 0; }

/* v1.1.29 - Tombol Mode Gelap/Terang login dirapikan tanpa border dan input floating label diperbaiki */
.login-theme-toggle {
  position: absolute;
  top: calc(28px + env(safe-area-inset-top));
  right: 26px;
  width: 44px;
  height: 44px;
  border: 0 !important;
  outline: none !important;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  z-index: 6;
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-theme-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.26);
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
}
.login-theme-toggle:active { transform: scale(.94); }
.login-theme-toggle i { pointer-events: none; }

.form-floating > label { color: #64748b; font-size: 14px; }
.login-card .form-floating > .form-control::placeholder { color: transparent !important; opacity: 0 !important; }
.login-card .form-floating > .form-control { height: 64px; padding-top: 1.62rem; padding-bottom: .58rem; line-height: 1.25; }
.login-card .form-floating > label { display:flex; align-items:center; gap:4px; padding: 1.14rem 1rem; line-height:1.25; }
.form-control { border-radius: 16px; padding: 14px 16px; border: 2px solid #e2e8f0; font-size: 15px; transition: all 0.3s; background: #f8fafc; font-weight: 500;}
.form-control:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(102,126,234,0.1); }
.password-container { position: relative; }
.password-toggle { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #94a3b8; z-index: 10; font-size: 18px; padding: 5px; transition: color 0.3s;}

.btn-login { background: var(--gradient); border: none; color: #fff; padding: 16px; border-radius: 16px; font-weight: 600; width: 100%; font-size: 16px; font-family: 'Poppins', sans-serif; transition: all 0.3s; margin-top: 15px; letter-spacing: 0.5px; }
.btn-login:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(102,126,234,0.4); color: #fff; }
.lupa-password { display: block; text-align: center; margin-top: 20px; font-size: 14px; color: var(--primary); text-decoration: none; font-weight: 600; transition: color 0.2s; }

/* ===== APP MAIN ===== */
.app-wrap { display: none; min-height: 100vh; background: #f1f5f9; padding-bottom: 0; }

/* Sidebar (Desktop) */
.sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: #fff; box-shadow: var(--shadow); padding: 25px 0; z-index: 1000; transition: all 0.3s; overflow-y: auto; }
.sidebar-header { padding: 0 16px 22px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 11px; }
.sidebar-header .logo { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; transform: rotate(-5deg); background:linear-gradient(135deg,#eff6ff,#ecfdf5); flex-shrink:0; }
.sidebar-header .logo img { width:100%; height:100%; object-fit:contain; }
.sidebar-header h5 { font-weight: 800; font-size: 17px; margin: 0; color: var(--dark); font-family: 'Poppins', sans-serif; line-height:1.15;}
.sidebar-header small { color: #64748b; font-size: 11px; font-weight: 700; line-height:1.25; display:block;}

.sidebar-menu { padding: 20px 0; list-style: none; }
.sidebar-menu li { padding: 0 15px; margin-bottom: 6px; }
.sidebar-menu a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: #64748b; text-decoration: none; border-radius: 12px; font-size: 15px; font-weight: 600; transition: all 0.25s; }
.sidebar-menu a:hover { background: #f8fafc; color: var(--primary); transform: translateX(5px); }
.sidebar-menu a.active { background: var(--gradient); color: #fff; box-shadow: 0 8px 20px rgba(102,126,234,0.3); transform: none; }
.sidebar-menu a i { font-size: 20px; }
.sidebar-submenu-group { padding:0 15px !important; margin-bottom:6px; }
.sidebar-submenu-toggle { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:14px; padding:14px 18px; color:#64748b; border-radius:12px; font-size:15px; font-weight:700; transition:all .25s; text-align:left; }
.sidebar-submenu-toggle:hover, .sidebar-submenu-group.active .sidebar-submenu-toggle { background:#f8fafc; color:var(--primary); }
.sidebar-submenu-group.active .sidebar-submenu-toggle { box-shadow:inset 3px 0 0 var(--primary); }
.sidebar-submenu-toggle i:first-child { font-size:20px; }
.submenu-chevron { font-size:14px !important; transition:transform .22s ease; }
.sidebar-submenu-group.open .submenu-chevron { transform:rotate(180deg); }
.sidebar-submenu { list-style:none; padding:6px 0 0 0; margin:0 0 0 22px; border-left:1px dashed #dbeafe; display:none; }
.sidebar-submenu-group.open .sidebar-submenu { display:block; }
.sidebar-menu .sidebar-submenu li { padding:0 0 0 10px; margin-bottom:5px; }
.sidebar-menu .sidebar-submenu a { padding:10px 12px; border-radius:11px; font-size:13px; gap:10px; }
.sidebar-menu .sidebar-submenu a i { font-size:16px; }
.sidebar-menu .sidebar-submenu a.active { background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(20,184,166,.14)); color:var(--primary-dark); box-shadow:none; font-weight:800; }
.sidebar-menu a.update-version-link { align-items:center; gap:12px; }
.sidebar-menu a.update-version-link span { line-height:1.15; }
.sidebar-version-label { margin:-2px 18px 12px 52px; padding:8px 12px; border-radius:12px; background:#f8fafc; color:#64748b; display:inline-flex; gap:7px; align-items:center; font-size:12px; font-weight:800; border:1px solid #edf2f7; }
.sidebar-version-label strong { color:#0f172a; font-family:'Poppins',sans-serif; }
.sidebar-footer { padding: 20px 25px; border-top: 1px solid #f1f5f9; margin-top: auto; }
.sidebar-desktop-logout { display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:transparent; color:var(--danger); font-size:15px; font-weight:700; text-align:left; cursor:pointer; }
.sidebar-desktop-logout:hover { opacity:.82; }
.reset-email-status { display:flex; flex-direction:column; gap:9px; }
.reset-email-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:14px; border:1px solid #e2e8f0; background:#f8fafc; }
.reset-email-status-row span { display:block; color:#64748b; font-size:10px; font-weight:900; text-transform:uppercase; margin-bottom:3px; }
.reset-email-status-row strong { display:block; color:#0f172a; font-size:12px; overflow-wrap:anywhere; }
.reset-email-status-row b { flex-shrink:0; padding:6px 9px; border-radius:999px; font-size:10px; font-weight:900; }
.reset-email-status-row b.success { color:#047857; background:#d1fae5; }
.reset-email-status-row b.warning { color:#b45309; background:#fef3c7; }
.reset-email-status-row b.danger { color:#be123c; background:#ffe4e6; }
body.dark-mode .reset-email-status-row,
html.dark-mode body .reset-email-status-row { background:#071225 !important; border-color:rgba(125,211,252,.24) !important; }
body.dark-mode .reset-email-status-row strong,
html.dark-mode body .reset-email-status-row strong { color:#ffffff !important; }

/* Main Content */
.main-content { margin-left: 280px; min-height: 100vh; transition: all 0.3s; }
.topbar { background: #fff; padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; }
.topbar .page-title { font-weight: 700; font-size: 22px; margin: 0; font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;}
.topbar-user-actions { display:flex; align-items:center; gap:10px; }
.topbar .topbar-notification-bell {
  width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:1px solid #dbe7f5;
  background:#f8fafc; color:#2563eb; box-shadow:0 7px 17px rgba(15,23,42,.06); transition:.2s;
}
.topbar .topbar-notification-bell:hover { transform:translateY(-1px); background:#eff6ff; border-color:#bfdbfe; }
.topbar .user-chip { display: flex; align-items: center; gap: 12px; background: #f8fafc; padding: 6px 16px 6px 6px; border-radius: 50px; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.2s;}
.topbar .user-chip:hover { background: #f1f5f9; }
.topbar .user-chip .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.topbar .user-chip span { font-size: 14px; font-weight: 600; color: #334155; }

.content-area { padding: 30px; }

/* Banners & Cards */
.hero-banner { background: var(--gradient); padding: 35px 30px; color: #fff; border-radius: 28px; box-shadow: var(--shadow); margin-bottom: 30px; position: relative; overflow: hidden; }
.hero-banner::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 250px; height: 250px; background: rgba(255,255,255,0.05); border-radius: 50%; }
.hero-banner .greeting { font-size: 15px; opacity: 0.9; margin-bottom: 5px; font-weight: 500;}
.hero-banner h4 { font-weight: 800; font-size: 26px; font-family: 'Poppins', sans-serif; letter-spacing: -0.5px; text-transform: uppercase; margin-bottom: 25px;}

/* Kotak Ungu HP */
.mobile-header { background: var(--gradient); padding: 30px 25px 40px; color: #fff; position: relative; z-index: 10; border-bottom-left-radius: 35px; border-bottom-right-radius: 35px; box-shadow: var(--shadow); margin-bottom: -20px;}
.mobile-header .greeting { font-size: 14px; opacity: 0.9; margin-bottom: 2px; font-weight: 500;}
.mobile-header h5 { margin: 0; font-weight: 800; font-size: 24px; font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;}

/* Dua Saldo Dompet & Kas Bersama */
.dompet-pribadi { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 24px; padding: 25px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.1); position: relative; z-index: 2;}
.mobile-header .dompet-pribadi { padding: 20px; margin-top: 25px;} 
.dompet-pribadi small { font-size: 12px; opacity: 0.9; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}
.dompet-pribadi .amount { font-size: 34px; font-weight: 800; display: block; margin-top: 5px; font-family: 'Poppins', sans-serif; letter-spacing:-1px;}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 30px; }
.stat-card { background: #fff; border-radius: 24px; padding: 25px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform 0.3s; border: 1px solid rgba(0,0,0,0.02); }
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.stat-card .icon { width: 55px; height: 55px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; margin-bottom: 18px; }
.stat-card.income .icon { background: var(--gradient-success); box-shadow: 0 8px 15px rgba(16, 185, 129, 0.3); }
.stat-card.expense .icon { background: var(--gradient-danger); box-shadow: 0 8px 15px rgba(239, 68, 68, 0.3); }
.stat-card.balance .icon { background: var(--gradient); box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3); }
.stat-card.savings .icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 8px 15px rgba(245, 158, 11, 0.3); }
.stat-card .label { color: #64748b; font-size: 14px; margin-bottom: 8px; font-weight: 600;}
.stat-card .value { font-size: 26px; font-weight: 800; color: var(--dark); font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;}

.card-custom { background: #fff; border-radius: 24px; padding: 25px; box-shadow: var(--shadow); margin-bottom: 25px; border: 1px solid rgba(0,0,0,0.02); }
.card-header-custom { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; }
.card-header-custom h6 { font-weight: 700; margin: 0; font-size: 17px; color: #0f172a; font-family: 'Poppins', sans-serif;}
.badge-soft { background: #e0e7ff; color: var(--primary-dark); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; cursor:pointer; transition: all 0.2s;}
.badge-soft:hover { background: #c7d2fe; color: var(--primary-dark); }
.badge-pending { background: #fef08a; color: #94621a; padding: 4px 10px; border-radius: 8px; font-size: 11px; margin-left: 8px; display: inline-block; border: 1px solid #fde047; font-weight: 700;}

/* Tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; width: 100%;}
.table-custom { width: 100%; font-size: 14px; border-collapse: separate; border-spacing: 0; min-width: max-content; } 
.table-custom th, .table-custom td { white-space: nowrap !important; } 
.table-custom th { background: #f8fafc; font-weight: 700; text-transform: uppercase; font-size: 12px; color: #64748b; padding: 15px 16px; text-align: left; border-bottom: 2px solid #e2e8f0; letter-spacing: 0.5px;}
.table-custom td { padding: 16px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; font-weight: 500; }
.table-custom tr:hover td { background: #f8fafc; }
.badge-type { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; display: inline-block; }
.badge-type.income { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-type.expense { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Buttons & Chips */
.btn-primary-custom { background: var(--gradient); border: none; color: #fff; padding: 12px 24px; border-radius: 14px; font-weight: 600; font-size: 14px; font-family: 'Poppins', sans-serif; transition: all 0.3s; box-shadow: 0 4px 10px rgba(102,126,234,0.2); }
.btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102,126,234,0.4); color: #fff; }
.btn-sm-action { padding: 8px 14px; font-size: 13px; border-radius: 10px; border: none; font-weight: 600; transition: all 0.2s;}
.btn-loading { opacity:.78; pointer-events:none; transform:none !important; box-shadow:none !important; }
.btn-loading .spinner-border { width:1rem; height:1rem; border-width:.16em; vertical-align:-.14em; }
.list-group-item.btn-loading { color:var(--primary) !important; background:#eff6ff !important; }

.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chip { padding: 8px 18px; border-radius: 30px; background: #f1f5f9; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; }
.filter-chip:hover { background: #e2e8f0; }
.filter-chip.active { background: var(--dark); color: #fff; box-shadow: 0 4px 10px rgba(30,41,59,0.2); }
.filter-chip.admin-only.active { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 4px 10px rgba(239,68,68,0.2); }
.history-filter-panel { background:#fff; border:1px solid #eef2f7; border-radius:18px; padding:22px; margin-bottom:22px; box-shadow:0 12px 30px rgba(15,23,42,.045); }
.history-filter-title { font-family:'Poppins',sans-serif; font-size:15px; font-weight:900; color:#0f172a; text-transform:uppercase; letter-spacing:1.2px; }
.history-filter-divider { height:1px; background:#e5e7eb; margin:18px 0 20px; }
.history-filter-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.history-filter-main { align-items:stretch; }
.history-filter-advanced { overflow:hidden; transition:max-height .28s ease, opacity .22s ease, margin-top .22s ease; max-height:420px; opacity:1; margin-top:14px; }
.history-filter-panel.is-collapsed .history-filter-advanced { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
.history-accordion-toggle { height:52px; border:0; border-radius:14px; background:#eef2ff; color:var(--primary-dark); padding:0 16px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:900; white-space:nowrap; box-shadow:0 6px 14px rgba(37,99,235,.08); }
.date-range-trigger { min-width:min(100%, 360px); height:52px; border:1px solid #cbd5e1; background:#fff; border-radius:14px; padding:0 16px; display:flex; align-items:center; gap:12px; color:#0f172a; font-size:15px; font-weight:700; box-shadow:0 4px 10px rgba(15,23,42,.02); }
.date-range-trigger i { font-size:20px; color:#475569; }
.history-user-filter { min-width:210px; }
.history-user-filter .form-control { height:52px; border:1px solid #cbd5e1; background:#fff; border-radius:14px; font-weight:700; }
.btn-filter-search, .btn-filter-download { height:52px; border:0; border-radius:12px; color:#fff; padding:0 20px; font-size:15px; font-weight:900; font-family:'Poppins',sans-serif; box-shadow:0 10px 18px rgba(15,23,42,.08); }
.btn-filter-search { background:#06c167; }
.btn-filter-download { background:#2563d8; }
.history-type-chips { margin:18px 0 0; }
.date-range-popup { width:min(94vw, 760px) !important; padding:16px !important; }
.date-range-head { padding:2px 2px 12px; border-bottom:1px solid #e5e7eb; margin-bottom:12px; }
.date-range-head small { display:block; color:#64748b; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; }
.date-range-head strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; font-size:19px; line-height:1.22; margin-top:2px; }
.date-range-body { display:grid; grid-template-columns:210px 1fr; gap:12px; }
.range-shortcuts { display:flex; flex-direction:column; gap:8px; }
.range-shortcut { border:0; border-radius:10px; background:#f1f5f9; color:#334155; padding:9px 12px; text-align:left; font-size:14px; line-height:1.2; font-weight:800; }
.range-shortcut.active, .range-shortcut:focus { background:#2563d8; color:#fff; }
.range-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; padding:0 0 0 0; }
.range-inputs label { height:48px; display:flex; align-items:center; gap:9px; border:1px solid #cbd5e1; border-radius:12px; padding:0 12px; background:#fff; }
.range-inputs i { color:#475569; font-size:18px; }
.range-inputs input { border:0; outline:0; width:100%; font-size:14px; font-weight:800; color:#0f172a; background:transparent; }
.date-range-popup .swal2-actions { margin-top:16px !important; gap:8px; }
.date-range-popup .swal2-styled { font-size:13px !important; padding:9px 18px !important; border-radius:9px !important; font-weight:800 !important; }
.tg-card { background:linear-gradient(135deg,#eff6ff,#f8fafc); border:0; border-radius:0; padding:14px 24px 22px; margin-left:-30px; margin-right:-30px; }
.tg-card h5, .tg-card p, .tg-card .d-inline-flex { margin-left:8px; }
.history-filter-grid, .report-filter-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; align-items:end; }
.history-filter-grid .form-control { padding-left:18px; }
.history-filter-grid label::after { content:""; display:block; width:24px; height:2px; background:#dbeafe; margin-top:4px; border-radius:2px; }
.report-filter-grid { grid-template-columns: minmax(180px, 240px) minmax(120px, 150px); justify-content:start; }
.filter-box { position:relative; background:#f8fafc; border:2px solid #e2e8f0; border-radius:16px; padding:8px 12px 10px; }
.filter-box label { display:block; font-size:11px; font-weight:800; color:#64748b; margin:0 0 4px; text-transform:uppercase; letter-spacing:.4px; }
.filter-box .form-control { border:0 !important; background:transparent !important; border-radius:0; height:auto; padding:0; box-shadow:none; }

/* Transaction Item Modern & Rapi */
.tx-item { display: flex; align-items: flex-start; gap: 15px; padding: 18px; background: #fff; border: 1px solid #f1f5f9; border-radius: 20px; margin-bottom: 12px; transition: all 0.2s; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.02); position: relative;}
.tx-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #e2e8f0;}
.tx-item.is-pending { background: #fffbeb; border-color: #fef08a; opacity: 0.9; }
.tx-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tx-icon.income { background: #d1fae5; color: #059669; }
.tx-icon.expense { background: #fee2e2; color: #dc2626; }
.tx-icon.transfer { background: #e0f2fe; color: #0284c7; }

.tx-details { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.tx-details .title-wrap { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; gap: 10px; width: 100%;}
.tx-details .title { font-weight: 700; font-size: 15px; color: var(--dark); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Poppins', sans-serif; flex: 1; padding-right:5px;}
.tx-details .tx-amount { font-weight: 800; font-size: 15px; text-align: right; white-space: nowrap; font-family: 'Poppins', sans-serif; letter-spacing: -0.5px; flex-shrink: 0;}
.tx-details .tx-amount.income { color: var(--success); }
.tx-details .tx-amount.expense { color: var(--danger); }
.tx-details .tx-amount.transfer { color: #0284c7; }
.tx-details .date { display: block; font-size: 12px; color: #64748b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; width: 100%;}
.tx-details .meta-user { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--primary-dark); font-weight: 700; background: #e0e7ff; padding: 4px 10px; border-radius: 8px; width: max-content; max-width: 100%;}
.tx-details .meta-user span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
.detail-user-card { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:14px; border-radius:18px; background:#eff6ff; border:1px solid #bfdbfe; }
.detail-user-left { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.detail-avatar { width:36px; height:36px; border-radius:12px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.detail-user-left small { display:block; color:var(--primary); font-size:10px; font-weight:800; text-transform:uppercase; line-height:1.1; }
.detail-user-left span { display:block; color:#1e3a8a; font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(11px, 3vw, 14px); line-height:1.15; overflow-wrap:anywhere; }
.detail-source { flex-shrink:0; background:#fff; color:var(--primary); border:1px solid #bfdbfe; border-radius:999px; padding:8px 10px; font-size:11px; font-weight:800; white-space:nowrap; }
.tx-action-row { flex-wrap:wrap; }
.edit-note { margin-top:10px; padding:10px 12px; border-radius:12px; background:#f8fafc; color:#64748b; font-size:12px; font-weight:700; text-align:center; }
.log-item { display:flex; gap:12px; padding:14px; border:1px solid #e2e8f0; border-radius:16px; margin-bottom:10px; background:#fff; cursor:pointer; transition:.2s; overflow:hidden; }
.log-item:hover, .customer-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.log-dot { width:12px; height:12px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.log-dot.success { background:var(--success); box-shadow:0 0 0 5px #d1fae5; }
.log-dot.failed { background:var(--danger); box-shadow:0 0 0 5px #fee2e2; }
.log-body { flex:1; min-width:0; }
.log-body strong { font-family:'Poppins',sans-serif; color:var(--dark); display:block; overflow-wrap:anywhere; line-height:1.25; }
.log-body small, .log-meta { color:#64748b; font-size:12px; font-weight:700; }
.log-body .d-flex small { flex-shrink:0; white-space:nowrap; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.detail-grid div { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:12px; }
.detail-grid .full { grid-column:1/-1; }
.detail-grid span { display:block; color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; margin-bottom:4px; }
.detail-grid strong { color:var(--dark); overflow-wrap:anywhere; }
.log-detail-card { margin:-8px 0 0; }
.log-detail-head { display:flex; gap:14px; align-items:center; border-radius:22px; padding:18px; color:#fff; margin-bottom:14px; box-shadow:var(--shadow); }
.log-detail-head.success { background:linear-gradient(135deg,#10b981,#2563eb); }
.log-detail-head.failed { background:linear-gradient(135deg,#ef4444,#f59e0b); }
.log-detail-head i { font-size:30px; }
.log-detail-head small { display:block; opacity:.85; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.log-detail-head strong { display:block; font-family:'Poppins',sans-serif; font-size:18px; line-height:1.2; }
.log-detail-preview .profile-upload-photo { font-size:22px; }
.log-detail-preview .profile-upload-photo.success { background:linear-gradient(135deg,#10b981,#2563eb); }
.log-detail-preview .profile-upload-photo.failed { background:linear-gradient(135deg,#ef4444,#f59e0b); }
.detail-grid.pretty div { border:0; background:linear-gradient(180deg,#f8fafc,#fff); box-shadow:inset 0 0 0 1px #e2e8f0; }
.customer-card { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px; border:1px solid #e2e8f0; border-radius:18px; margin-bottom:12px; background:#fff; transition:.2s; }
.customer-card.disable { background:#fffbeb; border-color:#fde68a; }
.customer-card.terhapus { background:#f8fafc; border-color:#cbd5e1; opacity:.78; }
.customer-card strong { display:block; font-family:'Poppins',sans-serif; }
.customer-card small { display:block; color:#64748b; font-size:12px; font-weight:700; margin-top:3px; }
.customer-actions .btn { display:block; width:100%; margin-left:auto; }
.mini-stat { background:#f8fafc; border:1px solid #e2e8f0; border-radius:18px; padding:16px; }
.mini-stat span { display:block; color:#64748b; font-size:12px; font-weight:800; text-transform:uppercase; }
.mini-stat strong { display:block; font-family:'Poppins',sans-serif; font-size:24px; margin-top:4px; }
.staff-balance-grid { display:grid; gap:12px; }
.staff-balance-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:4px; }
.staff-balance-summary div { border-radius:20px; padding:16px; background:linear-gradient(135deg,#eff6ff,#f8fafc); border:1px solid #dbeafe; box-shadow:var(--shadow-sm); }
.staff-balance-summary span { display:block; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.45px; margin-bottom:5px; }
.staff-balance-summary strong { display:block; font-family:'Poppins',sans-serif; font-size:20px; color:#0f172a; line-height:1.15; overflow-wrap:anywhere; }
.staff-balance-summary strong.positive { color:#059669; }
.staff-balance-summary strong.negative { color:#dc2626; }
.staff-balance-card { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.staff-avatar { width:44px; height:44px; border-radius:14px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; flex-shrink:0; }
.staff-balance-info { flex:1; min-width:0; }
.staff-balance-info strong { display:block; font-family:'Poppins',sans-serif; color:var(--dark); overflow-wrap:anywhere; }
.staff-balance-info span { display:block; color:#64748b; font-size:12px; font-weight:700; }
.staff-balance-value { font-family:'Poppins',sans-serif; font-weight:900; white-space:nowrap; }
.staff-balance-value.positive { color:var(--success); }
.staff-balance-value.negative { color:var(--danger); }
.user-detail-card { margin-top:10px; }
.user-detail-hero { display:flex; align-items:center; gap:12px; padding:14px; border-radius:20px; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; margin-bottom:14px; box-shadow:0 14px 28px rgba(37,99,235,.18); }
.user-detail-hero .staff-avatar { background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.user-detail-hero strong { display:block; font-family:'Poppins',sans-serif; line-height:1.2; }
.user-detail-hero span { display:block; opacity:.86; font-size:12px; font-weight:800; margin-top:2px; }
.detail-profile-form { padding:0 4px; }
.user-detail-preview { background:linear-gradient(135deg,#eff6ff,#ecfdf5); border-color:#dbeafe; }
.user-detail-name { color:#0f172a; font-family:'Poppins',sans-serif; font-size:16px; font-weight:900; line-height:1.22; overflow-wrap:anywhere; }
.detail-readonly-field .input-group-text { width:48px; justify-content:center; border:0; border-radius:16px 0 0 16px; background:#f8fafc; }
.detail-readonly-field .form-control { min-height:50px; height:auto; display:flex; align-items:center; border:0; border-radius:0 16px 16px 0; background:#f8fafc; padding:13px 16px; color:#0f172a; font-weight:800; line-height:1.35; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.detail-textarea-field .form-control { min-height:76px; align-items:flex-start; }
.customer-table { border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.customer-table-head, .customer-table-row { display:grid; grid-template-columns:minmax(230px,1.35fr) minmax(150px,.8fr) minmax(190px,.9fr) minmax(150px,.6fr) minmax(150px,.62fr); gap:14px; align-items:center; padding:16px 18px; }
.order-table .customer-table-head, .order-table .customer-table-row { grid-template-columns:minmax(230px,1.25fr) minmax(150px,.75fr) minmax(170px,.8fr) minmax(135px,.65fr) minmax(150px,.6fr) minmax(150px,.62fr); }
.customer-table-head { background:#f8fafc; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.45px; border-bottom:1px solid #e2e8f0; }
.customer-table-row { border-bottom:1px solid #edf2f7; transition:.2s; }
.customer-table-row:last-child { border-bottom:0; }
.customer-table-row:hover { background:#fbfdff; }
.customer-col { min-width:0; }
.customer-col strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; line-height:1.2; overflow-wrap:anywhere; }
.customer-col small { display:block; color:#64748b; font-size:12px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.customer-actions { display:flex; flex-direction:row; gap:7px; align-items:center; justify-content:flex-start; }
.customer-actions .btn { margin-top:0 !important; white-space:nowrap; }
.icon-action-row { display:flex; flex-wrap:nowrap; gap:7px; align-items:center; justify-content:flex-start; }
.icon-action-btn { width:36px; height:36px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:.18s; box-shadow:0 7px 16px rgba(15,23,42,.06); font-size:16px; flex:0 0 auto; }
.icon-action-btn:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.1); }
.icon-action-btn.warning { color:#d97706; background:#fffbeb; border-color:#fde68a; }
.icon-action-btn.primary { color:#2563eb; background:#eff6ff; border-color:#bfdbfe; }
.icon-action-btn.success { color:#059669; background:#ecfdf5; border-color:#a7f3d0; }
.icon-action-btn.danger { color:#dc2626; background:#fff1f2; border-color:#fecdd3; }
.icon-action-btn.muted { color:#64748b; background:#f8fafc; }
.tx-proof-chip { display:inline-flex; align-items:center; gap:5px; margin-top:6px; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px; background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; font-size:11px; font-weight:900; }
.proof-preview-modal { width:min(92vw, 520px) !important; padding:22px 16px !important; }
.proof-preview-box { width:100%; }
.proof-preview-img { width:100%; max-height:68vh; object-fit:contain; border-radius:18px; border:1px solid #e2e8f0; background:#f8fafc; box-shadow:var(--shadow-sm); }
.proof-preview-frame { width:100%; height:68vh; border:1px solid #e2e8f0; border-radius:18px; background:#f8fafc; box-shadow:var(--shadow-sm); }
.customer-table-row.disable { background:#fffbeb; }
.customer-table-row.terhapus { background:#f8fafc; opacity:.78; }
.tenant-id-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:7px 10px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
}
.menu-update-copy { display:flex; flex-direction:column; line-height:1.15; }
.menu-update-copy small { display:block; color:#64748b; font-size:11px; font-weight:800; margin-top:2px; }
.info-icon-btn { border:0; background:#e0e7ff; color:var(--primary); width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-left:8px; vertical-align:middle; }
.register-card-form { padding:2px 4px; }
.register-hero { display:flex; gap:12px; align-items:center; padding:14px; border-radius:18px; background:linear-gradient(135deg,#eff6ff,#ecfdf5); border:1px solid #dbeafe; margin-bottom:14px; }
.register-hero i { font-size:26px; color:var(--primary); }
.register-hero strong { display:block; font-family:'Poppins',sans-serif; color:var(--dark); }
.register-hero span { display:block; color:#64748b; font-size:12px; font-weight:700; line-height:1.4; }
.register-card-form label { display:block; margin:10px 0 5px 4px; color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; }
.register-card-form .form-control { padding-left:18px; border:1px solid #e2e8f0; background:#f8fafc; }
.register-total { margin-top:14px; padding:14px; border-radius:16px; text-align:center; font-family:'Poppins',sans-serif; font-weight:900; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; box-shadow:0 10px 22px rgba(37,99,235,.22); }
.register-trial-info { display:flex; gap:13px; align-items:flex-start; margin:14px 0 2px; padding:16px; border-radius:18px; background:linear-gradient(135deg,#eff6ff 0%,#f0fdfa 100%); border:1px solid #bfdbfe; box-shadow:0 12px 24px rgba(37,99,235,.10); }
.register-trial-info > i { width:42px; height:42px; flex:0 0 auto; border-radius:15px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; font-size:20px; box-shadow:0 12px 20px rgba(37,99,235,.22); }
.register-trial-info strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; font-size:15px; font-weight:900; line-height:1.25; }
.register-trial-info span { display:block; color:#2563eb; font-size:13px; font-weight:900; margin-top:4px; }
.register-trial-info small { display:block; color:#64748b; font-size:12px; font-weight:700; line-height:1.45; margin-top:8px; }
body.dark-mode .register-trial-info,
html.dark-mode body .register-trial-info {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(125,211,252,.24) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode .register-trial-info strong,
html.dark-mode body .register-trial-info strong {
  color:#ffffff !important;
}
body.dark-mode .register-trial-info span,
html.dark-mode body .register-trial-info span {
  color:#7dd3fc !important;
}
body.dark-mode .register-trial-info small,
html.dark-mode body .register-trial-info small {
  color:rgba(226,232,240,.78) !important;
}

/* v1.1.97 - Daftar Akun Baru: trial ringkas dan modal premium responsif. */
.swal2-popup.register-modal-premium {
  width:min(94vw,610px) !important;
  padding:24px 24px 20px !important;
  border-radius:26px !important;
  border:1px solid #e2e8f0 !important;
  background:#ffffff !important;
  box-shadow:0 28px 68px rgba(15,23,42,.16) !important;
}
.register-modal-premium .swal2-title {
  margin:0 0 15px !important;
  padding:0 !important;
  text-align:left !important;
}
.register-modal-premium .swal2-title h5 {
  color:#0f172a;
  font-size:21px;
  font-weight:800;
  letter-spacing:0;
}
.register-modal-premium .swal2-html-container {
  margin:0 !important;
  overflow-x:hidden !important;
  text-align:left !important;
}
.register-modal-premium .register-card-form { padding:0; }
.register-modal-premium .register-hero {
  padding:15px 16px;
  margin:0 0 14px;
  border-radius:16px;
  gap:13px;
  background:linear-gradient(135deg,#eef6ff 0%,#edfcf8 100%);
  border:1px solid #dbeafe;
  box-shadow:none;
}
.register-modal-premium .register-hero i {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  font-size:20px;
  color:#ffffff;
  background:linear-gradient(135deg,#2563eb,#0f766e);
}
.register-modal-premium .register-hero strong {
  font-size:14px;
  line-height:1.3;
  color:#0f172a;
  letter-spacing:0;
}
.register-modal-premium .register-hero span {
  margin-top:3px;
  color:#52647c;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
}
.register-modal-premium .register-section {
  margin-top:13px;
  padding:14px;
  border-radius:16px;
  border:1px solid #e6edf6;
  background:#fbfdff;
}
.register-modal-premium .register-section-title {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 11px;
  color:#223247;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
}
.register-modal-premium .register-section-title i {
  color:#0f766e;
  font-size:14px;
}
.register-modal-premium .register-grid {
  display:grid;
  gap:10px;
}
.register-modal-premium .register-grid + .register-grid { margin-top:9px; }
.register-modal-premium .register-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.register-modal-premium .register-field { min-width:0; }
.register-modal-premium .register-field-wide { grid-column:1 / -1; }
.register-modal-premium .register-card-form label {
  margin:0 0 6px 1px;
  color:#5b6b82;
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:0;
}
.register-modal-premium .register-field .form-control,
.register-modal-premium .register-duration-input .form-control {
  width:100%;
  height:46px;
  padding:11px 13px;
  border:1px solid #dbe4f0;
  border-radius:11px;
  background:#ffffff;
  color:#142337;
  font-size:13px;
  font-weight:600;
  box-shadow:none;
}
.register-modal-premium .register-field .form-control::placeholder { color:#94a3b8; font-weight:500; }
.register-modal-premium .register-field textarea.form-control {
  min-height:66px;
  height:auto;
  resize:none;
  line-height:1.4;
}
.register-modal-premium .register-field .form-control:focus,
.register-modal-premium .register-duration-input .form-control:focus {
  border-color:#2563eb;
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.register-modal-premium .register-trial-info {
  display:block;
  margin:0 0 14px;
  padding:15px;
  border-radius:16px;
  background:linear-gradient(135deg,#ecfdf5 0%,#eff6ff 100%);
  border:1px solid #b7ebd4;
  box-shadow:none;
}
.register-modal-premium .register-trial-head { display:flex; align-items:center; gap:11px; }
.register-modal-premium .register-trial-head > i {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  border-radius:13px;
  background:linear-gradient(135deg,#059669,#2563eb);
  box-shadow:0 9px 16px rgba(5,150,105,.17);
  color:#ffffff;
  font-size:18px;
}
.register-modal-premium .register-trial-label {
  display:block;
  margin:0 0 3px !important;
  color:#047857 !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:0;
}
.register-modal-premium .register-trial-info strong {
  color:#10243e;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:0;
}
.register-modal-premium .register-trial-quota {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:13px 0 10px;
}
.register-modal-premium .register-trial-quota div {
  min-height:54px;
  padding:8px 10px;
  border-radius:11px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.18);
}
.register-modal-premium .register-trial-quota span {
  display:block;
  margin:0 0 2px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  letter-spacing:0;
}
.register-modal-premium .register-trial-quota b {
  display:block;
  color:#0f766e;
  font-size:13px;
  font-family:'Poppins',sans-serif;
  letter-spacing:0;
}
.register-modal-premium .register-trial-info p,
.register-modal-premium .register-plan-note {
  margin:0;
  color:#52647c;
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
}
.register-modal-premium .register-duration-input {
  margin-top:0;
}
.register-modal-premium .register-duration-input .form-control {
  border-radius:11px 0 0 11px;
}
.register-modal-premium .register-duration-input .input-group-text {
  border:1px solid #dbe4f0;
  border-left:0;
  border-radius:0 11px 11px 0;
  background:#f1f5f9;
  color:#5b6b82;
  font-size:13px;
  font-weight:700;
}
.register-modal-premium .register-total {
  margin:12px 0 9px;
  padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#0f766e);
  font-size:13px;
  letter-spacing:0;
  box-shadow:0 9px 20px rgba(37,99,235,.16);
}
.register-modal-premium .swal2-actions {
  display:grid !important;
  grid-template-columns:1fr 1.35fr;
  gap:9px;
  width:100%;
  margin:17px 0 0 !important;
}
.register-modal-premium .swal2-actions .swal2-styled {
  margin:0 !important;
  height:46px;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:750 !important;
  letter-spacing:0;
}
.register-modal-premium .swal2-confirm { background:linear-gradient(135deg,#2563eb,#0f766e) !important; }
.register-modal-premium .swal2-cancel {
  order:-1;
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  color:#475569 !important;
}
body.dark-mode .swal2-popup.register-modal-premium,
html.dark-mode body .swal2-popup.register-modal-premium {
  background:#071322 !important;
  border-color:rgba(125,211,252,.18) !important;
  box-shadow:0 30px 76px rgba(0,0,0,.56) !important;
}
body.dark-mode .register-modal-premium .swal2-title h5,
html.dark-mode body .register-modal-premium .swal2-title h5 {
  color:#f8fafc !important;
}
body.dark-mode .register-modal-premium .register-hero,
html.dark-mode body .register-modal-premium .register-hero {
  background:linear-gradient(135deg,rgba(37,99,235,.19),rgba(15,118,110,.14)) !important;
  border-color:rgba(125,211,252,.17) !important;
}
body.dark-mode .register-modal-premium .register-hero strong,
html.dark-mode body .register-modal-premium .register-hero strong,
body.dark-mode .register-modal-premium .register-section-title,
html.dark-mode body .register-modal-premium .register-section-title {
  color:#f1f5f9 !important;
}
body.dark-mode .register-modal-premium .register-hero span,
html.dark-mode body .register-modal-premium .register-hero span,
body.dark-mode .register-modal-premium .register-plan-note,
html.dark-mode body .register-modal-premium .register-plan-note {
  color:#a9bbd3 !important;
}
body.dark-mode .register-modal-premium .register-section,
html.dark-mode body .register-modal-premium .register-section {
  background:#0b192b !important;
  border-color:rgba(148,163,184,.17) !important;
}
body.dark-mode .register-modal-premium .register-card-form label,
html.dark-mode body .register-modal-premium .register-card-form label {
  color:#94a9c3 !important;
}
body.dark-mode .register-modal-premium .register-field .form-control,
html.dark-mode body .register-modal-premium .register-field .form-control,
body.dark-mode .register-modal-premium .register-duration-input .form-control,
html.dark-mode body .register-modal-premium .register-duration-input .form-control {
  background:#101f34 !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#f1f5f9 !important;
}
body.dark-mode .register-modal-premium .register-field .form-control::placeholder,
html.dark-mode body .register-modal-premium .register-field .form-control::placeholder {
  color:#72859f !important;
}
body.dark-mode .register-modal-premium .register-trial-info,
html.dark-mode body .register-modal-premium .register-trial-info {
  background:linear-gradient(135deg,rgba(5,150,105,.12),rgba(37,99,235,.15)) !important;
  border-color:rgba(52,211,153,.22) !important;
}
body.dark-mode .register-modal-premium .register-trial-info strong,
html.dark-mode body .register-modal-premium .register-trial-info strong {
  color:#ecfdf5 !important;
}
body.dark-mode .register-modal-premium .register-trial-label,
html.dark-mode body .register-modal-premium .register-trial-label {
  color:#6ee7b7 !important;
}
body.dark-mode .register-modal-premium .register-trial-quota div,
html.dark-mode body .register-modal-premium .register-trial-quota div {
  background:rgba(15,23,42,.45) !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .register-modal-premium .register-trial-quota span,
html.dark-mode body .register-modal-premium .register-trial-quota span,
body.dark-mode .register-modal-premium .register-trial-info p,
html.dark-mode body .register-modal-premium .register-trial-info p {
  color:#a9bbd3 !important;
}
body.dark-mode .register-modal-premium .register-trial-quota b,
html.dark-mode body .register-modal-premium .register-trial-quota b {
  color:#6ee7b7 !important;
}
body.dark-mode .register-modal-premium .register-duration-input .input-group-text,
html.dark-mode body .register-modal-premium .register-duration-input .input-group-text,
body.dark-mode .register-modal-premium .swal2-cancel,
html.dark-mode body .register-modal-premium .swal2-cancel {
  background:#101f34 !important;
  border-color:rgba(148,163,184,.22) !important;
  color:#cbd5e1 !important;
}
body.dark-mode .register-modal-premium .swal2-actions,
html.dark-mode body .register-modal-premium .swal2-actions {
  background:transparent !important;
  border:0 !important;
}
@media (max-width:576px) {
  .swal2-popup.register-modal-premium {
    width:calc(100vw - 20px) !important;
    padding:17px 13px 14px !important;
    border-radius:22px !important;
  }
  .register-modal-premium .swal2-title { margin-bottom:12px !important; }
  .register-modal-premium .swal2-title h5 { font-size:18px; }
  .register-modal-premium .swal2-html-container {
    max-height:calc(100dvh - 156px) !important;
    overflow-y:auto !important;
    padding:0 1px !important;
  }
  .register-modal-premium .register-hero { padding:12px; }
  .register-modal-premium .register-section { padding:12px; margin-top:10px; }
  .register-modal-premium .register-grid-two { grid-template-columns:1fr; gap:9px; }
  .register-modal-premium .register-grid + .register-grid { margin-top:9px; }
  .register-modal-premium .register-trial-info { padding:12px; margin-bottom:11px; }
  .register-modal-premium .register-trial-quota div { padding:7px; }
  .register-modal-premium .swal2-actions { margin-top:13px !important; gap:8px; }
}
.notification-bell { position:relative; border:0; width:38px; height:38px; border-radius:14px; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; }
.notif-dot { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#ef4444; border:2px solid #fff; color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; line-height:1; }
.notification-modal { padding:18px !important; border-radius:30px !important; overflow:hidden; }
.notification-panel { margin:-4px; }
.notification-hero { display:flex; gap:14px; align-items:center; padding:18px; border-radius:24px; background:linear-gradient(135deg,#0f172a,#2563eb 58%,#14b8a6); color:#fff; box-shadow:0 16px 30px rgba(37,99,235,.25); }
.notification-icon { width:48px; height:48px; border-radius:18px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.notification-hero small { display:block; color:rgba(255,255,255,.72); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; }
.notification-hero strong { display:block; font-family:'Poppins',sans-serif; font-size:24px; line-height:1.12; margin-top:2px; }
.notification-hero span { display:block; color:rgba(255,255,255,.82); font-size:12px; font-weight:700; margin-top:4px; }
.notification-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; max-height:360px; overflow:auto; padding:1px; }
.notification-item { width:100%; border:1px solid #e2e8f0; background:#fff; border-radius:18px; padding:14px; display:flex; align-items:center; gap:12px; text-align:left; box-shadow:0 8px 18px rgba(15,23,42,.04); transition:.2s; }
.notification-item:active { transform:scale(.98); }
.notification-item.unread { border-color:#bfdbfe; background:linear-gradient(135deg,#eff6ff,#fff); }
.notification-pulse { width:14px; height:14px; border-radius:50%; background:#94a3b8; flex-shrink:0; }
.notification-item.unread .notification-pulse { background:#10b981; box-shadow:0 0 0 7px rgba(16,185,129,.13); }
.notification-copy { flex:1; min-width:0; }
.notification-copy strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-copy small { display:block; color:#64748b; font-size:12px; font-weight:800; margin-top:4px; }
.notification-item i { color:#94a3b8; }
.notification-detail { margin:-4px; }
.notification-back { border:0; background:#f1f5f9; color:#334155; border-radius:999px; padding:9px 14px; font-size:12px; font-weight:900; display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; }
.notification-detail-card { padding:22px; border-radius:24px; background:linear-gradient(180deg,#fff,#f8fafc); border:1px solid #e2e8f0; box-shadow:0 16px 30px rgba(15,23,42,.08); }
.notification-detail-top { display:flex; align-items:center; gap:10px; color:#2563eb; font-size:12px; font-weight:900; margin-bottom:16px; }
.notification-detail-top i { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#dbeafe; }
.notification-detail-card h4 { color:#0f172a; font-family:'Poppins',sans-serif; font-size:24px; font-weight:800; margin-bottom:16px; }
.notification-detail-card p { color:#475569; line-height:1.75; font-size:15px; margin:0; white-space:pre-wrap; }
.announcement-shell .card-header-custom h6 { font-size:15px; margin:0; }
.announcement-card { padding:22px; border-radius:20px; }
.announcement-card label { font-size:12px; }
.announcement-page .card-custom,
.owner-live-chat-page .card-custom {
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  box-shadow:0 16px 38px rgba(15,23,42,.07);
}
.announcement-page .card-header-custom h6,
.owner-live-chat-page .card-header-custom h6 {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-weight:900;
}
.owner-live-chat-hero {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg,#eff6ff 0%,#f0fdfa 100%);
  border:1px solid #dbeafe;
  box-shadow:0 14px 30px rgba(37,99,235,.10);
}
.owner-live-chat-icon {
  width:58px;
  height:58px;
  border-radius:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#ffffff;
  font-size:26px;
  box-shadow:0 16px 28px rgba(37,99,235,.24);
}
.owner-live-chat-hero small {
  display:block;
  color:#2563eb;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.owner-live-chat-hero h5 {
  margin:2px 0 4px;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:22px;
  font-weight:900;
}
.owner-live-chat-hero p {
  margin:0;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.owner-live-chat-grid {
  display:grid;
  grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);
  gap:16px;
  align-items:start;
}
.owner-chat-list {
  max-height:620px;
  overflow:auto;
  padding-right:2px;
}
.section-subtitle { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; color:#0f172a; font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; }
.section-subtitle::after { content:""; flex:1; height:1px; background:#e2e8f0; margin-left:12px; }
.announcement-list { display:flex; flex-direction:column; gap:10px; }
.announcement-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px; border:1px solid #e2e8f0; border-radius:16px; background:#fff; }
.announcement-item strong { font-size:14px; color:#0f172a; }
.announcement-item small { display:block; font-size:11px; color:#64748b; margin-top:3px; }
.support-info-card { display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:18px; background:linear-gradient(135deg,#eff6ff,#f8fafc); border:1px solid #dbeafe; }
.support-info-icon { width:42px; height:42px; flex-shrink:0; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#2563eb; color:#fff; font-size:20px; box-shadow:0 10px 18px rgba(37,99,235,.22); }
.support-info-card span { display:block; color:#2563eb; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.support-info-card strong { display:block; color:#0f172a; font-size:13px; line-height:1.45; font-weight:800; }
.support-chat-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; margin-bottom:10px; box-shadow:var(--shadow-sm); transition:.2s; }
.support-chat-item:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.support-chat-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer; }
.support-chat-avatar { width:42px; height:42px; flex-shrink:0; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; font-weight:900; font-family:'Poppins',sans-serif; }
.support-chat-copy { flex:1; min-width:0; }
.support-chat-title { display:flex; align-items:center; gap:8px; min-width:0; }
.support-chat-title strong { display:block; color:#0f172a; font-size:14px; font-family:'Poppins',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-chat-copy small { display:block; margin-top:2px; color:#64748b; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-chat-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; color:#94a3b8; font-size:11px; font-weight:800; }
.support-chat-meta .rating-on { color:#f59e0b; letter-spacing:.5px; }
.chat-unread { min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:900; }
.support-agent-item { align-items:center; }
.support-agent-item .log-body strong { font-size:13px; line-height:1.25; }
.support-helper-btn { border:0; border-radius:999px; padding:9px 12px; color:#fff; font-size:12px; font-weight:800; white-space:nowrap; flex-shrink:0; }
.support-helper-btn.primary { background:#2563eb; }
.support-helper-btn.danger { background:#e11d48; }
.report-category-card { padding:16px; border:1px solid #e2e8f0; border-radius:18px; margin-bottom:12px; background:#fff; box-shadow:var(--shadow-sm); }
.report-category-head { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; margin-bottom:12px; }
.report-category-head span { padding:6px 9px; border-radius:8px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.report-category-head strong { color:#0f172a; font-family:'Poppins',sans-serif; font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.report-category-head b { font-family:'Poppins',sans-serif; font-size:16px; white-space:nowrap; }
.report-category-progress { background:#f1f5f9; height:8px; border-radius:999px; overflow:hidden; margin:8px 0; }
.report-category-progress div { height:100%; border-radius:999px; transition:width 1s ease-in-out; }
.report-category-card small { display:block; color:#64748b; font-size:11px; font-weight:700; text-align:right; }
.profile-hero { text-align:center; margin:0 0 24px; padding-top:10px; }
.profile-photo-wrap { position:relative; width:100px; height:100px; border-radius:30px; background:var(--gradient); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:40px; font-weight:800; margin-bottom:14px; box-shadow:0 15px 30px rgba(102,126,234,0.3); transform:rotate(-5deg); cursor:pointer; overflow:visible; }
.profile-photo-wrap #profileAvatar { transform:rotate(5deg); }
.profile-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:30px; transform:rotate(5deg) scale(1.08); }
.profile-photo-edit { position:absolute; right:-8px; bottom:-7px; width:34px; height:34px; border:3px solid #fff; border-radius:50%; background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; transform:rotate(5deg); box-shadow:0 8px 16px rgba(15,23,42,.18); z-index:5; cursor:pointer; }
.profile-upload-preview { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid #e2e8f0; border-radius:18px; background:#f8fafc; }
.profile-upload-photo { width:58px; height:58px; flex-shrink:0; border-radius:18px; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; overflow:hidden; }
.profile-upload-photo img { width:100%; height:100%; object-fit:cover; }
.chat-head-status { display:flex; align-items:center; gap:7px; justify-content:center; color:#059669; font-size:12px; font-weight:700; margin-top:4px; }
.chat-head-status::before { content:""; width:9px; height:9px; border-radius:50%; background:#10b981; box-shadow:0 0 0 5px rgba(16,185,129,.16); }
.chat-modal { padding:20px 14px 14px !important; }
.chat-modal .swal2-title { margin-bottom:10px; }
.chat-modal .swal2-actions { margin-top:10px; }
.chat-window { width:100%; }
.chat-thread { min-height:300px; max-height:420px; overflow:auto; padding:14px 10px 12px; border-radius:22px; background:#efe9df; background-image:radial-gradient(circle at 14px 14px, rgba(15,23,42,.045) 1px, transparent 1.5px); background-size:28px 28px; }
.chat-message-row { display:flex; width:100%; margin:8px 0; border:0; }
.chat-message-row.incoming { justify-content:flex-start; }
.chat-message-row.outgoing { justify-content:flex-end; }
.chat-bubble { position:relative; max-width:82%; padding:10px 12px 7px; border-radius:16px; box-shadow:0 2px 8px rgba(15,23,42,.08); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.chat-message-row.incoming .chat-bubble { background:#fff; color:#111827; border-top-left-radius:5px; }
.chat-message-row.outgoing .chat-bubble { background:#d8ffd2; color:#102a18; border-top-right-radius:5px; }
.chat-text { white-space:pre-wrap; padding-right:34px; }
.chat-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; font-size:10px; color:#64748b; line-height:1; }
.chat-file-link { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:6px 9px; border-radius:12px; color:#2563eb; background:rgba(255,255,255,.7); text-decoration:none; font-size:12px; font-weight:800; border:1px solid rgba(37,99,235,.18); }
.chat-delete-btn { border:0; background:transparent; color:#ef4444; padding:0 0 0 4px; line-height:1; }
.chat-compose { display:flex; align-items:flex-end; gap:8px; margin-top:12px; padding:8px 8px 8px 10px; border-radius:24px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 8px 22px rgba(15,23,42,.08); }
.chat-compose textarea { flex:1; min-height:38px; max-height:112px; resize:none; border:0; outline:0; padding:8px 2px; font-size:16px; line-height:1.35; background:transparent; color:#1f2937; }
.chat-compose textarea::placeholder { color:#6b7280; }
.chat-file-btn, .chat-send-btn { width:40px; height:40px; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition:.18s; }
.chat-file-btn { background:#f1f5f9; color:#64748b; font-size:22px; }
.chat-file-btn:active, .chat-send-btn:active { transform:scale(.92); }
.chat-send-btn { background:#16a34a; color:#fff; font-size:17px; box-shadow:0 8px 18px rgba(22,163,74,.28); }
.chat-file-name { margin:7px 8px 0; font-size:11px; color:#2563eb; font-weight:800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-tools { display:flex; justify-content:center; margin-top:10px; }
.chat-rating { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; color:#64748b; font-size:12px; font-weight:800; }
.chat-status-ok { color:#2563eb; font-weight:900; }
.chat-status-fail { color:#ef4444; font-weight:900; }
.category-detail-head { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid; border-radius:18px; background:#fff; }
.category-detail-head i { font-size:28px; }
.category-detail-head small { display:block; color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; }
.category-detail-head strong { display:block; font-family:'Poppins',sans-serif; font-size:20px; }
.category-detail-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #f1f5f9; }
.category-detail-row span { min-width:0; font-size:12px; color:#64748b; font-weight:800; }
.category-detail-row small { display:block; color:#0f172a; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.category-detail-row strong { white-space:nowrap; font-family:'Poppins',sans-serif; }

/* Custom Styling for SweetAlert Modals */
.swal2-popup.card-custom { border-radius: 28px; padding: 30px 20px; font-family: 'Inter', sans-serif; }
.card-custom .swal2-title { font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;}
.card-custom .input-group-text { background-color: #f8fafc; color: #64748b; border: 2px solid #e2e8f0; border-right: none;}
.card-custom .form-control, .card-custom .swal2-select { background-color: #f8fafc; font-size: 14px; font-weight:500; border: 2px solid #e2e8f0; border-left: none; padding-left: 0; height: 50px;}
.card-custom .form-control:focus, .card-custom .swal2-select:focus { background-color: #fff; border-color: var(--primary); box-shadow: none; outline: none; }
.card-custom .input-group:focus-within .input-group-text, .card-custom .input-group:focus-within .form-control { border-color: var(--primary); background: #fff;}

@media (max-width: 576px) {
    .swal2-popup.card-custom { padding: 25px 15px !important; width: 90% !important;}
    .swal2-html-container { margin: 0 !important; overflow: hidden; }
}

/* Kategori Long Press Item */
.category-card { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; border: 2px solid transparent;}
.category-card:active { transform: scale(0.95); background-color: #fff !important; border-color: var(--primary) !important; box-shadow: var(--shadow-lg);}
.category-card .cat-name { font-weight:700; font-size:13px; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Poppins', sans-serif; letter-spacing:-0.3px;}

/* List Group for Profile Menu */
.list-group-custom .list-group-item { border: none; padding: 18px 20px; font-weight: 600; font-size: 15px; color: #334155; margin-bottom: 8px; border-radius: 16px; background: #f8fafc; transition: all 0.2s;}
.list-group-custom .list-group-item:hover { background: #f1f5f9; transform: translateX(5px); }
.settings-mobile-head { display:flex; align-items:center; gap:10px; padding:16px 18px 10px; color:#0f172a; font-family:'Poppins',sans-serif; font-weight:800; }
.settings-mobile-head i { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#eff6ff; color:var(--primary); }
.setting-page-card { max-width:920px; margin:0 auto 22px; }
.settings-page-hero { display:flex; align-items:flex-start; gap:16px; padding:18px; border-radius:22px; background:linear-gradient(135deg,#f8fafc,#eff6ff); border:1px solid #e2e8f0; margin-bottom:22px; }
.settings-page-icon { width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:25px; flex-shrink:0; }
.settings-page-hero small { display:block; color:#2563eb; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.settings-page-hero h5 { font-family:'Poppins',sans-serif; font-size:20px; font-weight:900; color:#0f172a; margin:0 0 5px; letter-spacing:-.4px; }
.settings-page-hero p { color:#64748b; font-size:13px; line-height:1.55; margin:0; font-weight:600; }
.card-custom textarea.form-control.qris-static-textarea { height:auto; min-height:170px; line-height:1.5; padding:16px 18px; border-left:2px solid #e2e8f0; resize:vertical; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font-family:'Poppins', sans-serif; }
.card-custom textarea.form-control.qris-static-textarea:focus { border-left-color:var(--primary); }

/* =========================================
   BOTTOM NAV MOBILE (NATIVE APP STYLE)
   ========================================= */
.bottom-nav { display: none; }

.fab-wrapper { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); z-index: 1050; }
.fab { 
  width: 64px; height: 64px; border-radius: 22px; background: var(--gradient); 
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; 
  box-shadow: 0 10px 25px rgba(102,126,234,0.5); border: 5px solid #fff; cursor: pointer; 
  transform: rotate(45deg); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab i { transform: rotate(-45deg); transition: transform 0.3s; }
.fab:active { transform: rotate(45deg) scale(0.9); }

/* Responsive Breakpoints (MOBILE VIEW) */
@media(max-width: 991px) {
  body[data-auth="login"] .app-wrap, body[data-auth="login"] .bottom-nav, body[data-auth="login"] .fab-wrapper { display:none !important; }
  body[data-auth="login"] { background:var(--gradient); }
  .login-page { min-height:100dvh; padding:26px 18px calc(26px + env(safe-area-inset-bottom)); align-items:center; }
  .login-theme-toggle { top: calc(22px + env(safe-area-inset-top)); right: 24px; width: 42px; height: 42px; border-radius: 50%; font-size: 21px; }
  .login-card { margin:0 auto; padding:34px 28px 28px; border-radius:30px; max-width:88vw; }
  .login-logo { margin-bottom:24px; }
  .login-logo .icon-wrap { width:100px; height:100px; margin-bottom:10px; }
  .login-logo h2 { font-size:29px; line-height:1.1; margin-bottom:6px; }
  .login-logo p { font-size:15px; line-height:1.35; }
  .sidebar { transform: translateX(-100%); }
  .main-content { margin-left: 0; }
  .topbar { display: none; }
  
  .bottom-nav { 
    display: block !important; position: fixed; bottom: 0; left: 0; right: 0; 
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); 
    border-top: 1px solid rgba(0,0,0,0.08); padding: 5px 0 calc(5px + env(safe-area-inset-bottom)); 
    z-index: 1040; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); 
  }
  .bottom-nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 65px; position: relative;}
  .bottom-nav a { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    color: #94a3b8; text-decoration: none; font-size: 11px; font-weight: 700; transition: all 0.2s; flex: 1; height: 100%; font-family: 'Inter', sans-serif; gap: 4px;
  }
  .bottom-nav a i { font-size: 22px; transition: transform 0.2s; }
  .bottom-nav a:active i { transform: scale(0.85); }
  .bottom-nav a.active { color: var(--primary-dark); }
  .bottom-nav a.active i { transform: translateY(-3px); }
  .fab-space { width: 70px; flex-shrink: 0; }

  .content-area { padding: 14px 14px 180px 14px; position: relative; z-index: 20; }
  body[data-page="profil"] .content-area { padding-top:0; }
  #page-profil { margin-top:-118px; padding-bottom:96px; }
  #page-profil .profile-hero { padding-top:0; margin-bottom:10px; }
  #page-profil .profile-photo-wrap { width:96px; height:96px; border-radius:28px; font-size:38px; margin-bottom:8px; box-shadow:0 14px 28px rgba(102,126,234,.26); }
  #page-profil .profile-photo { border-radius:28px; }
  #page-profil .profile-photo-edit { display:none !important; }
  #page-profil .profile-hero h4 { font-size:20px; margin-top:5px !important; margin-bottom:2px !important; }
  #page-profil #profileRole { margin-top:3px !important; padding:6px 16px !important; font-size:10px !important; }
  #page-profil .card-custom { border-radius:20px; margin-bottom:10px !important; }
  #page-profil .list-group-custom .list-group-item { padding:12px 16px; min-height:60px; margin-bottom:6px; border-radius:14px; font-size:14px; }
  #page-profil .list-group-custom .list-group-item:last-child { margin-bottom:0; }
  .settings-mobile-head { padding:13px 16px 8px; font-size:14px; }
  .settings-page-hero { padding:14px; border-radius:20px; gap:12px; }
  .settings-page-icon { width:44px; height:44px; border-radius:15px; font-size:21px; }
  .settings-page-hero h5 { font-size:17px; }
  .settings-page-hero p { font-size:12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; }
  
  .stat-card { padding: 15px; border-radius: 20px; }
  .stat-card .icon { width: 42px; height: 42px; font-size: 20px; margin-bottom: 10px; border-radius: 12px;}
  .stat-card .value { font-size: 18px; }
  .stat-card .label { font-size: 11px; line-height: 1.3;}
  
  .card-custom { padding: 20px; border-radius: 24px; }
  .history-filter-grid, .report-filter-grid { grid-template-columns: 1fr; }
  .history-filter-panel { padding:18px; border-radius:20px; }
  .history-filter-row { gap:10px; }
  .date-range-trigger, .history-accordion-toggle, .history-user-filter, .history-user-filter .form-control, .btn-filter-search, .btn-filter-download { width:100%; min-width:0; }
  .btn-filter-search, .btn-filter-download { flex:1 1 calc(50% - 6px); width:auto; padding:0 12px; }
  .btn-filter-search, .btn-filter-download { height:44px; font-size:12px; line-height:1.15; border-radius:14px; }
  .date-range-trigger { height:46px; font-size:13px; }
  .history-accordion-toggle { height:42px; font-size:12px; border-radius:13px; }
  .history-filter-title { font-size:13px; letter-spacing:.9px; }
  .date-range-popup { width:calc(100vw - 34px) !important; padding:12px !important; border-radius:22px !important; }
  .date-range-head { padding:0 2px 10px; margin-bottom:10px; }
  .date-range-head strong { font-size:clamp(16px, 4.6vw, 18px); line-height:1.18; max-width:100%; white-space:nowrap; }
  .date-range-body { grid-template-columns:1fr; }
  .range-shortcuts { display:grid; grid-template-columns:1fr 1fr; }
  .range-shortcut { min-height:40px; padding:8px 8px; font-size:12px; line-height:1.18; text-align:center; display:flex; align-items:center; justify-content:center; }
  .range-inputs { grid-template-columns:1fr; }
  .range-inputs label { height:42px; }
  .range-inputs input { font-size:12px; }
  .date-range-popup .swal2-actions { margin-top:12px !important; }
  .date-range-popup .swal2-styled { font-size:12px !important; padding:8px 14px !important; }
  .notification-modal { width:calc(100vw - 28px) !important; padding:12px !important; border-radius:26px !important; }
  .notification-hero { padding:14px; border-radius:20px; }
  .notification-icon { width:42px; height:42px; border-radius:15px; font-size:18px; }
  .notification-hero strong { font-size:22px; }
  .notification-item { padding:12px; border-radius:16px; }
  .notification-copy strong { font-size:14px; }
  .category-detail-modal { width:calc(100vw - 34px) !important; padding:18px 14px !important; border-radius:26px !important; }
  .category-detail-modal .swal2-title { margin-bottom:4px; }
  .category-detail-head { padding:12px; border-radius:16px; }
  .category-detail-head strong { font-size:17px; }
  .category-detail-row { padding:9px 0; }
  .category-detail-row span, .category-detail-row small { font-size:12px; }
  .category-detail-row strong { font-size:13px; }
  .account-modal { width:calc(100vw - 34px) !important; padding:20px 16px !important; border-radius:26px !important; }
  .account-modal .swal2-title h5 { font-size:20px; }
  .account-modal .swal2-html-container { max-height:70vh; overflow:auto !important; padding:0 2px; }
  .account-modal label { font-size:12px !important; margin-bottom:6px; }
  .account-modal .form-control { height:46px; font-size:13px; }
  .user-detail-modal { width:calc(100vw - 34px) !important; padding:20px 16px !important; border-radius:26px !important; }
  .log-detail-modal { width:calc(100vw - 34px) !important; padding:20px 16px !important; border-radius:26px !important; }
  .user-detail-modal .swal2-title h5 { font-size:20px; }
  .log-detail-modal .swal2-title h5 { font-size:20px; }
  .user-detail-modal .swal2-html-container { max-height:70vh; overflow:auto !important; padding:0 2px; }
  .log-detail-modal .swal2-html-container { max-height:70vh; overflow:auto !important; padding:0 2px; }
  .user-detail-modal label { font-size:12px !important; margin-bottom:6px; }
  .log-detail-modal label { font-size:12px !important; margin-bottom:6px; }
  .user-detail-modal .form-control { font-size:13px; }
  .log-detail-modal .form-control { font-size:13px; }
  .user-detail-name { font-size:14px; }
  .detail-readonly-field .input-group-text { width:44px; }
  .detail-readonly-field .form-control { min-height:46px; padding:11px 14px; }
  .profile-upload-preview { padding:10px; gap:10px; border-radius:16px; }
  .profile-upload-photo { width:52px; height:52px; border-radius:16px; font-size:21px; }
  .report-category-card { padding:14px; }
  .report-category-head { grid-template-columns:1fr auto; gap:6px 10px; }
  .report-category-head span { grid-column:1 / -1; width:max-content; max-width:100%; font-size:9px; }
  .report-category-head strong { font-size:14px; }
  .report-category-head b { font-size:15px; }
  .support-helper-btn { font-size:11px; padding:8px 10px; max-width:128px; white-space:normal; line-height:1.15; }
  .customer-card { align-items:flex-start; }
  body[data-page="telegram"] .content-area { padding-top:0; padding-bottom:200px; }
  #page-telegram { margin-top:0; padding-bottom:125px; }
  #page-telegram > h4 { padding-left:8px !important; padding-top:4px !important; margin-bottom:10px !important; line-height:1.15; }
  #page-telegram .tg-card { margin-left:-14px; margin-right:-14px; margin-bottom:16px !important; padding:16px 18px 22px; border-radius:0 0 26px 26px; }
  #page-telegram .tg-card h5, #page-telegram .tg-card p, #page-telegram .tg-card .d-inline-flex { margin-left:10px; margin-right:8px; }
  #page-telegram .tg-card h5 { font-size:20px; line-height:1.25; }
  #page-telegram .tg-card p { font-size:13px !important; line-height:1.65 !important; }
  #page-telegram .card-custom:last-child { margin-bottom:120px; }
  .chat-modal { width:calc(100vw - 22px) !important; height:calc(100dvh - 28px) !important; max-width:none !important; max-height:none !important; border-radius:28px !important; margin:14px auto !important; padding:16px 12px calc(12px + env(safe-area-inset-bottom)) !important; display:flex !important; flex-direction:column; overflow:hidden !important; }
  .chat-modal .swal2-title { flex-shrink:0; margin:0 0 10px !important; }
  .chat-modal .swal2-html-container { flex:1; margin:0 !important; overflow:hidden !important; display:flex !important; }
  .chat-modal .swal2-actions { flex-shrink:0; margin-top:8px !important; }
  .chat-window { display:flex; flex-direction:column; min-height:0; flex:1; width:100%; padding:0 2px; }
  .chat-thread { flex:1; min-height:0; max-height:none; border-radius:20px; padding:12px 10px; margin:0 2px; }
  .chat-compose { flex-shrink:0; margin:10px 2px 0; border-radius:24px; }
  .proof-preview-modal { width:calc(100vw - 24px) !important; border-radius:28px !important; padding:18px 12px !important; }
  .proof-preview-img { max-height:70vh; border-radius:16px; }
  .proof-preview-frame { height:70vh; border-radius:16px; }
  .staff-balance-summary { grid-template-columns:1fr; }
  .customer-table { border:0; box-shadow:none; background:transparent; }
  .customer-table-head { display:none; }
  .customer-table-row { display:block; padding:14px; border:1px solid #e2e8f0; border-radius:20px; margin-bottom:12px; background:#fff; box-shadow:var(--shadow-sm); }
  .customer-col { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed #edf2f7; }
  .customer-col:last-child { border-bottom:0; }
  .customer-col::before { content:attr(data-label); color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; flex-shrink:0; }
  .customer-main { display:block; }
  .customer-main::before { display:none; }
  .customer-actions { display:grid; grid-template-columns:1fr; align-items:stretch; }
  .customer-actions::before { grid-column:1 / -1; }
  .icon-action-row { justify-content:flex-end; }
  
  /* Hero Banner Desktop Sembunyikan Mutlak di Mobile */
  #heroBannerDashboard { display: none !important; }
}

@media (max-width: 420px) {
  .tx-details .title-wrap { flex-direction:column; gap:2px; }
  .tx-details .tx-amount { text-align:left; font-size:14px; }
  .detail-user-card { align-items:flex-start; flex-direction:column; }
  .detail-source { align-self:flex-start; }
  .customer-card { flex-direction:column; }
}

.page-section { display: none; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.empty-state { text-align: center; padding: 50px 20px; color: #94a3b8; }
.empty-state p { margin: 0; font-size: 15px; font-weight: 600;}

.loader-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.9); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.loader-overlay.show { display: flex; }
body.dark-mode .loader-overlay, html.dark-mode .loader-overlay { background: rgba(2,6,23,0.84); }
.spinner-grow-custom { width: 60px; height: 60px; background: var(--gradient); border-radius: 50%; animation: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.4; } }


/* Legacy dense data table style for Owner pelanggan & order lists */
.legacy-table-note { display:inline-flex; align-items:center; gap:4px; margin:0 0 14px; padding:10px 14px; border-radius:12px; background:#f8fafc; color:#475569; font-size:12px; font-weight:700; border:1px solid #e2e8f0; }
.legacy-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px; margin:4px 0 38px; }
.legacy-stat-card { display:flex; align-items:stretch; min-height:72px; border:1px solid #d9d9d9; border-radius:4px; background:#fff; overflow:hidden; box-shadow:none; }
.legacy-stat-card.clickable { cursor:pointer; transition:.14s ease; }
.legacy-stat-card.clickable:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.10); }
.legacy-stat-card.active { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.legacy-stat-icon { width:80px; min-width:80px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; }
.legacy-stat-card.cyan .legacy-stat-icon { background:#11c0df; }
.legacy-stat-card.green .legacy-stat-icon { background:#00a65a; }
.legacy-stat-card.orange .legacy-stat-icon { background:#f39c12; }
.legacy-stat-card.red .legacy-stat-icon { background:#dd4b39; }
.legacy-stat-card.blue .legacy-stat-icon { background:#2563eb; }
.legacy-stat-copy { padding:10px 12px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.legacy-stat-copy span { color:#1f2937; font-size:13px; font-weight:500; text-transform:uppercase; line-height:1.2; white-space:nowrap; }
.legacy-stat-copy strong { color:#111827; font-size:22px; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:2px; line-height:1.2; margin-top:6px; }
.legacy-table-shell { width:100%; font-family:'Inter',sans-serif; }
.legacy-table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; color:#1f2937; font-size:14px; font-weight:700; }
.legacy-length select { min-width:74px; height:34px; margin:0 4px; padding:4px 28px 4px 10px; border:1px solid #b8b8b8; border-radius:4px; background:#fff; font-weight:600; }
.legacy-search { display:flex; align-items:center; gap:5px; margin:0; }
.legacy-search input { height:36px; width:188px; border:1px solid #b8b8b8; border-radius:3px; padding:6px 9px; outline:none; }
.legacy-search input:focus { border-color:#00d8d8; box-shadow:0 0 0 2px rgba(0,216,216,.12); }
.legacy-table-scroll-top { display:none; height:16px; overflow-x:auto; overflow-y:hidden; margin:2px 0 5px; border-radius:999px; scrollbar-width:thin; scrollbar-color:#38bdf8 #e2e8f0; }
.legacy-table-scroll-top.is-visible { display:block; }
.legacy-table-scroll-top > div { height:1px; }
.legacy-table-scroll-top::-webkit-scrollbar { height:10px; }
.legacy-table-scroll-top::-webkit-scrollbar-track { background:#e2e8f0; border-radius:999px; }
.legacy-table-scroll-top::-webkit-scrollbar-thumb { background:#38bdf8; border-radius:999px; }
.legacy-table-scroll { overflow-x:auto; border-top:3px solid #00eeee; }
.legacy-data-table { width:100%; min-width:1180px; border-collapse:collapse; background:#fff; color:#111827; font-size:14px; }
.legacy-data-table thead th { position:relative; padding:13px 10px; border-bottom:1px solid #9ca3af; color:#1f2937; background:#fff; font-weight:800; white-space:nowrap; cursor:pointer; vertical-align:middle; }
.legacy-data-table thead th span { display:inline-block; padding-right:14px; }
.legacy-data-table thead th i { position:absolute; right:6px; top:50%; transform:translateY(-50%); color:#c7c7c7; font-size:12px; }
.legacy-data-table tbody td { padding:10px 10px; border-bottom:1px solid #d9d9d9; vertical-align:middle; background:#fff; white-space:nowrap; }
.legacy-data-table tbody tr:nth-child(odd) td { background:#f7f7f7; }
.legacy-data-table tbody tr:hover td { background:#eef9ff; }
.legacy-data-table .legacy-check { width:36px; text-align:center; }
.legacy-data-table .legacy-no-col { width:52px; min-width:52px; font-weight:800; color:#374151; }
.legacy-data-table input[type="checkbox"] { width:14px; height:14px; accent-color:#3c8dbc; }
.legacy-id-text { display:inline-flex; align-items:center; gap:7px; color:#0073b7; font-family:'Roboto Mono','Courier New',monospace; letter-spacing:1px; font-weight:500; }
.legacy-id-text i { color:#3c8dbc; font-size:14px; }
.legacy-name-text { display:inline-flex; align-items:center; gap:5px; color:#111827; font-weight:500; }
.legacy-name-text i { color:#111827; font-size:13px; }
.legacy-name-col small, .legacy-data-table td small { display:block; color:#6b7280; font-size:11px; font-weight:600; margin-top:2px; }
.legacy-pre-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 7px; border-radius:3px; background:#00a65a; color:#fff; font-size:10px; font-weight:800; margin-right:5px; }
.legacy-link-date { color:#00aeef; font-weight:800; }
.legacy-action-col { min-width:180px; }
.legacy-action-row { display:flex; gap:4px; align-items:center; justify-content:flex-start; flex-wrap:nowrap; min-width:max-content; }
.legacy-btn { width:31px; height:28px; border:1px solid #d9d9d9; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; color:#111827; background:#fff; font-size:13px; transition:.12s; }
.legacy-btn:hover { filter:brightness(.96); transform:translateY(-1px); }
.legacy-btn.primary { background:#00c0ef; border-color:#00acd6; color:#fff; }
.legacy-btn.success { background:#00a65a; border-color:#008d4c; color:#fff; }
.legacy-btn.warning { background:#f39c12; border-color:#e08e0b; color:#fff; }
.legacy-btn.danger { background:#dd4b39; border-color:#c23321; color:#fff; }
.legacy-btn.reset-bookkeeping { background:#7c3aed; border-color:#6d28d9; color:#fff; }
.legacy-btn.cleanup-categories { background:#0891b2; border-color:#0e7490; color:#fff; }
.legacy-btn.permanent-delete { background:#7f1d1d; border-color:#641515; color:#fff; }
.legacy-btn.light { background:#f9fafb; color:#111827; }
.legacy-btn.muted { background:#f3f4f6; color:#6b7280; }
.legacy-status { display:inline-flex; align-items:center; justify-content:center; min-width:82px; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; }
.legacy-status.success { background:#dcfce7; color:#15803d; }
.legacy-status.info { background:#e0f2fe; color:#0369a1; }
.legacy-status.warning { background:#fef3c7; color:#b45309; }
.legacy-status.danger { background:#fee2e2; color:#b91c1c; }
.legacy-status.secondary, .legacy-status.muted { background:#f1f5f9; color:#475569; }
.legacy-proof { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; }
.legacy-proof.yes { color:#00a65a; }
.legacy-proof.no { color:#dd4b39; }
.legacy-empty-row { text-align:center; color:#94a3b8; font-weight:700; padding:28px !important; }
.legacy-table-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:5px; color:#1f2937; font-size:14px; }
.legacy-pagination { display:flex; align-items:center; gap:3px; }
.legacy-pagination button { min-width:38px; height:32px; border:1px solid transparent; background:#fff; color:#111827; border-radius:3px; padding:0 10px; }
.legacy-pagination button.active { background:#f3f4f6; border-color:#b8b8b8; box-shadow:inset 0 1px 1px rgba(0,0,0,.08); }
.legacy-pagination button:disabled { color:#6b7280; opacity:.65; cursor:not-allowed; }
.legacy-page-dots { padding:0 10px; color:#111827; font-weight:700; }
.legacy-row-disable td, .legacy-row-menunggu_pembayaran td { background:#fffaf0 !important; }
.legacy-row-terhapus td { opacity:.68; }
@media (max-width: 1199px) {
  .legacy-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
}
@media (max-width: 767px) {
  .legacy-stat-grid { grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
  .legacy-stat-card { min-height:64px; }
  .legacy-stat-icon { width:66px; min-width:66px; font-size:28px; }
  .legacy-table-toolbar, .legacy-table-footer { flex-direction:column; align-items:flex-start; }
  .legacy-search { width:100%; justify-content:space-between; }
  .legacy-search input { width:min(220px, 65vw); }
  .legacy-data-table { min-width:1080px; font-size:13px; }
}

/* v42: tabel Pelanggan dibuat lebih ringkas + card statistik responsif saat zoom */
.legacy-stat-grid { grid-template-columns:repeat(4,minmax(180px,1fr)); gap:clamp(10px,2vw,34px); margin:4px 0 clamp(18px,2.4vw,38px); }
.legacy-stat-card { min-height:clamp(64px,4.8vw,78px); }
.legacy-stat-icon { width:clamp(58px,4.8vw,80px); min-width:clamp(58px,4.8vw,80px); font-size:clamp(24px,2.2vw,34px); }
.legacy-stat-copy { padding:clamp(8px,.9vw,12px); }
.legacy-stat-copy span { font-size:clamp(10px,.75vw,13px); white-space:normal; overflow-wrap:anywhere; }
.legacy-stat-copy strong { font-size:clamp(18px,1.45vw,22px); letter-spacing:clamp(.4px,.12vw,2px); }
.legacy-data-table-customers { min-width:960px; }
.legacy-data-table-customers .legacy-tenant-id-col { min-width:96px; }
.legacy-data-table-customers .legacy-name-col { min-width:240px; }
.legacy-info-btn { width:22px; height:22px; border:0; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#111827; background:transparent; transition:.12s; flex-shrink:0; }
.legacy-info-btn i { position:static !important; transform:none !important; color:#111827 !important; font-size:14px !important; }
.legacy-info-btn:hover { background:#dbeafe; color:#2563eb; }
.legacy-info-btn:hover i { color:#2563eb !important; }
.legacy-name-text { gap:7px; align-items:center; max-width:100%; }
.legacy-name-text > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-detail-box { max-width:430px; margin-left:auto; margin-right:auto; }
.customer-detail-avatar { width:54px; height:54px; border-radius:18px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; font-size:24px; box-shadow:0 12px 24px rgba(37,99,235,.22); }
.customer-info-grid { grid-template-columns:1fr; }
.customer-info-grid strong { font-size:14px; line-height:1.35; }
@media (max-width: 1399px) {
  .legacy-stat-grid { grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; }
  .legacy-stat-icon { width:62px; min-width:62px; }
}
@media (max-width: 1199px) {
  .legacy-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
}
@media (max-width: 767px) {
  .legacy-stat-grid { grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
  .legacy-stat-card { min-height:64px; }
  .legacy-stat-icon { width:66px; min-width:66px; font-size:28px; }
  .legacy-data-table-customers { min-width:760px; font-size:13px; }
}
.legacy-data-table-customers { min-width:1040px; }
.legacy-data-table-customers .legacy-action-col { min-width:218px; }
@media (max-width: 767px) { .legacy-data-table-customers { min-width:920px; } }

/* v43: order table ringkas, detail pelanggan, dan nominal pada card order */
.legacy-stat-copy em {
  display:block;
  color:#475569;
  font-style:normal;
  font-size:clamp(11px,.82vw,13px);
  font-weight:800;
  line-height:1.2;
  margin-top:3px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.legacy-data-table-orders { min-width:980px; }
.legacy-data-table-orders .legacy-name-col { min-width:260px; }
.legacy-data-table-orders .legacy-center-col { text-align:center; }
.legacy-data-table-orders th.legacy-center-col span { padding-right:0; }
.legacy-data-table-orders th.legacy-center-col i { right:8px; }
.legacy-data-table-orders td.legacy-center-col strong {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
}
@media (max-width: 767px) {
  .legacy-data-table-orders { min-width:820px; font-size:13px; }
  .legacy-data-table-orders .legacy-name-col { min-width:220px; }
}

/* Bantuan sebagai halaman penuh di mobile */
.help-page-card { max-width: 920px; margin: 0 auto; }
.help-page-hero { display:flex; align-items:center; gap:16px; padding:18px; border-radius:24px; background:linear-gradient(135deg,#eff6ff,#f0fdfa); border:1px solid #dbeafe; margin-bottom:16px; }
.help-page-icon { width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; font-size:26px; box-shadow:0 14px 30px rgba(37,99,235,.22); flex-shrink:0; }
.help-page-hero small { display:block; color:#2563eb; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.help-page-hero h5 { margin:0 0 4px; color:#0f172a; font-family:'Poppins',sans-serif; font-size:21px; font-weight:900; letter-spacing:-.45px; }
.help-page-hero p { margin:0; color:#64748b; font-size:13px; line-height:1.5; font-weight:700; }
.help-page-window { display:flex; flex-direction:column; min-height:0; }
.help-page-thread { min-height:440px; max-height:58vh; }
.help-page-compose { margin-top:12px; }
.profile-photo-edit { touch-action: manipulation; }

@media(max-width: 991px) {
  /* v48: Bantuan/Live Chat HP dipaksa tampil dan kotak ketik dinaikkan dari bawah (di-override v49/v51) */
  :root { --help-mobile-vh: 100dvh; --help-bottom-lift: 150px; }
  body[data-page="bantuan"] {
    overflow:hidden;
    background:#edf3f8;
  }
  body[data-page="bantuan"] .main-content {
    margin-left:0;
    min-height:var(--help-mobile-vh);
    height:var(--help-mobile-vh);
    overflow:visible;
    background:#edf3f8;
  }
  body[data-page="bantuan"] .content-area {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(var(--help-bottom-lift) + env(safe-area-inset-bottom)) !important;
    height:calc(var(--help-mobile-vh) - var(--help-bottom-lift) - env(safe-area-inset-bottom)) !important;
    min-height:360px;
    padding:8px 10px 0 !important;
    overflow:visible !important;
    background:#edf3f8;
    z-index:1035;
  }
  body[data-page="bantuan"] #page-bantuan.active {
    display:flex !important;
    flex-direction:column;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:visible;
  }
  body[data-page="bantuan"] .help-page-card {
    width:100%;
    flex:1 1 auto;
    min-height:0;
    height:100%;
    margin:0 auto;
    padding:10px;
    border-radius:22px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
  }
  body[data-page="bantuan"] .help-page-hero { flex-shrink:0; padding:8px 10px; border-radius:16px; gap:9px; margin-bottom:7px; }
  body[data-page="bantuan"] .help-page-icon { width:36px; height:36px; border-radius:12px; font-size:18px; }
  body[data-page="bantuan"] .help-page-hero small { font-size:9px; margin-bottom:0; line-height:1.1; }
  body[data-page="bantuan"] .help-page-hero h5 { font-size:15px; line-height:1.1; margin-bottom:0; }
  body[data-page="bantuan"] .help-page-hero p { display:none; }
  body[data-page="bantuan"] .help-page-window { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  body[data-page="bantuan"] .help-page-thread { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; border-radius:16px; padding:10px 8px 12px; margin:0; -webkit-overflow-scrolling:touch; }
  body[data-page="bantuan"] .help-page-compose {
    flex-shrink:0;
    margin:8px 0 0;
    padding:8px 8px 8px 10px;
    border-radius:24px;
    border:2px solid #dbeafe;
    box-shadow:0 10px 24px rgba(37,99,235,.18);
    background:#fff;
  }
  body[data-page="bantuan"] .help-page-compose textarea { min-height:40px; }
  body[data-page="bantuan"] .chat-file-name { flex-shrink:0; }
  body[data-page="bantuan"] .chat-bubble { max-width:86%; font-size:13px; }
}
@media(max-width: 991px) and (max-height: 720px) {
  body[data-page="bantuan"] { --help-bottom-lift: 132px; }
  body[data-page="bantuan"] .help-page-card { padding:7px; border-radius:18px; }
  body[data-page="bantuan"] .help-page-hero { padding:7px 9px; margin-bottom:6px; }
  body[data-page="bantuan"] .help-page-icon { width:34px; height:34px; font-size:17px; }
  body[data-page="bantuan"] .help-page-hero h5 { font-size:14px; }
  body[data-page="bantuan"] .help-page-thread { border-radius:15px; padding:9px 7px 11px; }
  body[data-page="bantuan"] .help-page-compose { margin-top:6px; padding:7px; }
}



/* v49: Perbaikan final Live Chat Mobile Admin & Staff
   Masalah v48: .content-area fixed menutup halaman chat sehingga tampilan tampak kosong.
   Solusi: #page-bantuan dijadikan panel fixed sendiri, kotak ketik selalu terlihat
   dan diberi jarak 0,5 cm di atas navigasi bawah. */

.legacy-active-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin:0 0 12px; border:1px solid #bfdbfe; background:#eff6ff; color:#1e40af; border-radius:10px; font-size:13px; }
.legacy-active-filter button { border:0; background:#2563eb; color:#fff; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; }
.legacy-reject-reason { display:block; max-width:220px; margin-top:4px; white-space:normal; color:#b91c1c !important; font-weight:700; line-height:1.35; }

@media (max-width: 991px) {
  :root {
    --help-mobile-vh: 100dvh;
    --help-mobile-nav-height: 75px;
    --help-mobile-keyboard-gap: 0.5cm;
    --help-mobile-bottom-space: calc(var(--help-mobile-nav-height) + var(--help-mobile-keyboard-gap) + env(safe-area-inset-bottom));
  }

  body[data-page="bantuan"] {
    overflow: hidden !important;
    min-height: var(--help-mobile-vh) !important;
    background: #edf3f8 !important;
  }

  /* Jangan jadikan content-area sebagai overlay kosong lagi */
  body[data-page="bantuan"] .main-content {
    margin-left: 0 !important;
    height: auto !important;
    min-height: var(--help-mobile-vh) !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body[data-page="bantuan"] .content-area {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: auto !important;
  }

  body[data-page="bantuan"] #page-bantuan.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--help-mobile-bottom-space) !important;
    z-index: 1036 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    overflow: hidden !important;
    background: #edf3f8 !important;
    animation: none !important;
  }

  body[data-page="bantuan"] .help-page-card {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 22px 22px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.10) !important;
  }

  body[data-page="bantuan"] .help-page-hero {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    gap: 9px !important;
    margin: 0 0 7px !important;
  }

  body[data-page="bantuan"] .help-page-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }

  body[data-page="bantuan"] .help-page-hero small {
    font-size: 9px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  body[data-page="bantuan"] .help-page-hero h5 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  body[data-page="bantuan"] .help-page-hero p { display: none !important; }

  body[data-page="bantuan"] .help-page-window {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body[data-page="bantuan"] .help-page-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 18px !important;
    padding: 10px 8px 12px !important;
    margin: 0 !important;
    background: #efe9df !important;
    background-image: radial-gradient(circle at 14px 14px, rgba(15,23,42,.045) 1px, transparent 1.5px) !important;
    background-size: 28px 28px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-page="bantuan"] .help-page-compose {
    flex: 0 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 8px 8px 8px 10px !important;
    border-radius: 24px !important;
    border: 2px solid #dbeafe !important;
    box-shadow: 0 10px 24px rgba(37,99,235,.18) !important;
    background: #fff !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-page="bantuan"] .help-page-compose textarea {
    min-height: 42px !important;
    max-height: 104px !important;
  }

  body[data-page="bantuan"] .chat-file-name {
    flex: 0 0 auto !important;
    margin: 6px 4px 0 !important;
  }

  body[data-page="bantuan"] .bottom-nav {
    z-index: 1040 !important;
  }
}

/* v1.29.20 - Viewer bukti transaksi hanya menampilkan file dan tombol tutup. */
.proof-preview-premium .proof-only-shell {
  padding: 3px;
  background: #ffffff;
}
.proof-preview-premium .proof-only-shell .proof-preview-stage {
  min-height: 260px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #f1f5f9;
}
.proof-preview-premium .proof-only-shell .proof-preview-img,
.proof-preview-premium .proof-only-shell .proof-preview-frame {
  display: block;
  border-radius: 20px;
  box-shadow: none;
}
.proof-preview-premium .swal2-close {
  top: 9px !important;
  right: 9px !important;
  z-index: 6 !important;
  background: rgba(15,23,42,.78) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
}
body.dark-mode .proof-preview-premium .proof-only-shell,
html.dark-mode body .proof-preview-premium .proof-only-shell {
  background: #071225 !important;
}
body.dark-mode .proof-preview-premium .proof-only-shell .proof-preview-stage,
html.dark-mode body .proof-preview-premium .proof-only-shell .proof-preview-stage {
  background: #020617 !important;
}
@media (max-width: 576px) {
  .proof-preview-premium .proof-only-shell {
    padding: 3px;
  }
  .proof-preview-premium .proof-only-shell .proof-preview-stage {
    min-height: 210px;
    border-radius: 18px;
  }
  .proof-preview-premium .proof-only-shell .proof-preview-img,
  .proof-preview-premium .proof-only-shell .proof-preview-frame {
    border-radius: 18px;
  }
}

@media (max-width: 991px) and (max-height: 720px) {
  body[data-page="bantuan"] #page-bantuan.active { padding: 6px 8px 0 !important; }
  body[data-page="bantuan"] .help-page-card { padding: 7px !important; border-radius: 18px 18px 0 0 !important; }
  body[data-page="bantuan"] .help-page-hero { padding: 7px 9px !important; margin-bottom: 6px !important; }
  body[data-page="bantuan"] .help-page-icon { width: 34px !important; height: 34px !important; font-size: 17px !important; }
  body[data-page="bantuan"] .help-page-hero h5 { font-size: 14px !important; }
  body[data-page="bantuan"] .help-page-thread { border-radius: 15px !important; padding: 9px 7px 11px !important; }
  body[data-page="bantuan"] .help-page-compose { margin-top: 6px !important; padding: 7px !important; }
}


/* v51: jarak bawah Live Chat mobile dibuat 0,5 cm dari navigasi bawah */
@media (max-width: 991px) {
  body[data-page="bantuan"] {
    --help-mobile-nav-height: 75px;
    --help-mobile-keyboard-gap: 0.5cm;
    --help-mobile-bottom-space: calc(var(--help-mobile-nav-height) + var(--help-mobile-keyboard-gap) + env(safe-area-inset-bottom));
  }
  body[data-page="bantuan"] #page-bantuan.active {
    bottom: var(--help-mobile-bottom-space) !important;
  }
}


/* v52: Navigasi bawah otomatis disembunyikan saat keyboard HP terbuka */
@media (max-width: 991px) {
  body.mobile-keyboard-open .bottom-nav,
  body.mobile-keyboard-open .fab-wrapper {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-keyboard-open[data-page="bantuan"] {
    --help-mobile-nav-height: 0px;
    --help-mobile-keyboard-gap: 0.5cm;
    --help-mobile-bottom-space: calc(var(--help-mobile-keyboard-gap) + env(safe-area-inset-bottom));
  }

  body.mobile-keyboard-open[data-page="bantuan"] #page-bantuan.active {
    bottom: var(--help-mobile-bottom-space) !important;
  }
}


/* v54: Tampilan baris versi pada menu Akun mobile */
@media (max-width: 991px) {
  #page-profil .mobile-version-row {
    color:#64748b;
    font-weight:800;
    background:#fff;
    pointer-events:none;
  }
  #page-profil .mobile-version-row strong {
    color:#0f172a;
    font-family:'Poppins', sans-serif;
  }
}

/* v57: Perapian halaman Saldo khusus mobile */
.saldo-refresh-btn.icon-only-action {
  width:46px;
  height:42px;
  min-width:46px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  line-height:1;
}
.saldo-refresh-btn.icon-only-action i { margin:0 !important; font-size:18px; }
.staff-balance-summary-toggle { display:none; }
.staff-balance-summary-wrap { margin-bottom:4px; }

@media(max-width: 991px) {
  #page-saldo-staf .card-custom {
    padding:22px 16px 18px;
    border-radius:28px;
  }
  #page-saldo-staf .card-header-custom {
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
  }
  #page-saldo-staf .card-header-custom h6 {
    min-width:0;
    flex:1;
    line-height:1.22;
    font-size:clamp(20px, 6vw, 26px);
    letter-spacing:-.65px;
  }
  #page-saldo-staf .card-header-custom h6 i { margin-top:3px; }
  #page-saldo-staf .saldo-refresh-btn {
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;
    background:#f8fafc;
  }
  .staff-balance-summary-wrap {
    border:1px solid #e2e8f0;
    border-radius:22px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    margin-bottom:14px;
  }
  .staff-balance-summary-toggle {
    width:100%;
    border:0;
    background:linear-gradient(135deg,#f8fafc,#eff6ff);
    color:#0f172a;
    padding:13px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:900;
    letter-spacing:-.2px;
  }
  .staff-balance-summary-toggle span {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .staff-balance-summary-toggle .toggle-icon { transition:transform .22s ease; }
  .staff-balance-summary-wrap.collapsed .toggle-icon { transform:rotate(180deg); }
  .staff-balance-summary-wrap.collapsed .staff-balance-summary { display:none; }
  .staff-balance-summary {
    grid-template-columns:1fr;
    gap:9px;
    padding:12px;
    margin:0;
  }
  .staff-balance-summary div {
    border-radius:18px;
    padding:14px 15px;
    box-shadow:none;
  }
  .staff-balance-summary span {
    font-size:10px;
    letter-spacing:.55px;
    margin-bottom:6px;
  }
  .staff-balance-summary strong {
    font-size:clamp(18px, 6vw, 24px);
    letter-spacing:-.45px;
  }
  .staff-balance-card {
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:
      "avatar info"
      "value value";
    align-items:center;
    gap:12px 14px;
    padding:14px;
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
  }
  .staff-balance-card .staff-avatar {
    grid-area:avatar;
    width:52px;
    height:52px;
    border-radius:17px;
    font-size:22px;
    box-shadow:0 10px 20px rgba(37,99,235,.16);
  }
  .staff-balance-info {
    grid-area:info;
    min-width:0;
  }
  .staff-balance-info strong {
    font-size:15px;
    line-height:1.25;
    letter-spacing:-.25px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:normal;
  }
  .staff-balance-info span {
    font-size:11px;
    line-height:1.35;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .staff-balance-value {
    grid-area:value;
    justify-self:stretch;
    min-width:0;
    white-space:normal;
    text-align:right;
    padding:10px 12px;
    border-radius:16px;
    font-size:clamp(17px, 5.2vw, 22px);
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  .staff-balance-value.positive { background:#ecfdf5; color:#059669; }
  .staff-balance-value.negative { background:#fef2f2; color:#dc2626; }
}


/* v59: Poles premium halaman Saldo mobile */
@media(max-width: 991px) {
  #page-saldo-staf .card-custom {
    padding:20px 14px 16px;
    border-radius:30px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:0 20px 44px rgba(15,23,42,.08);
  }
  #page-saldo-staf .card-header-custom {
    align-items:center;
    margin-bottom:16px;
    padding-bottom:4px !important;
  }
  #page-saldo-staf .card-header-custom h6 {
    font-size:clamp(16px, 4.4vw, 19px);
    line-height:1.18;
    letter-spacing:-.35px;
    font-weight:900;
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
  }
  #page-saldo-staf .card-header-custom h6 i {
    width:34px;
    height:34px;
    margin:0 !important;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    box-shadow:inset 0 0 0 1px #dbeafe;
    font-size:18px;
    flex-shrink:0;
  }
  #page-saldo-staf .saldo-refresh-btn {
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:15px;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    box-shadow:0 8px 18px rgba(15,23,42,.07);
  }
  .staff-balance-summary-wrap {
    border-radius:20px;
    margin-bottom:13px;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
  }
  .staff-balance-summary-toggle {
    padding:12px 13px;
    font-size:13px;
    border-radius:20px;
    background:linear-gradient(135deg,#f8fafc 0%,#eef6ff 100%);
  }
  .staff-balance-summary-toggle span { gap:7px; }
  .staff-balance-summary-toggle i:first-child {
    width:28px;
    height:28px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    color:#2563eb;
    box-shadow:inset 0 0 0 1px #dbeafe;
  }
  .staff-balance-summary { padding:10px; }
  .staff-balance-summary div { padding:12px 13px; border-radius:16px; }
  .staff-balance-summary strong { font-size:clamp(16px, 5vw, 20px); }
  .staff-balance-card {
    position:relative;
    grid-template-columns:46px minmax(0,1fr);
    gap:10px 12px;
    padding:13px;
    border-radius:22px;
    border-color:#e5edf7;
    background:linear-gradient(160deg,#ffffff 0%,#f8fbff 70%,#ffffff 100%);
    box-shadow:0 12px 30px rgba(15,23,42,.065);
    overflow:hidden;
  }
  .staff-balance-card::before {
    content:'';
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,#2563eb,#14b8a6);
    opacity:.82;
  }
  .staff-balance-card .staff-avatar {
    width:46px;
    height:46px;
    border-radius:16px;
    font-size:20px;
    box-shadow:0 10px 22px rgba(37,99,235,.18);
  }
  .staff-balance-info strong {
    font-size:13.5px;
    line-height:1.22;
    letter-spacing:-.18px;
    max-height:2.45em;
  }
  .staff-balance-info span {
    font-size:10.5px;
    margin-top:3px;
    color:#718096;
  }
  .staff-balance-value {
    padding:9px 11px;
    border-radius:15px;
    font-size:clamp(15.5px, 4.8vw, 19px);
    letter-spacing:-.35px;
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.08);
  }
  .staff-balance-value.negative { box-shadow:inset 0 0 0 1px rgba(220,38,38,.08); }
}

/* v60 - Preview link website khusus tenant pada Branding Aplikasi */
.tenant-url-preview{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  margin:-2px 0 18px;
  border:1px solid #dbeafe;
  border-radius:18px;
  background:linear-gradient(135deg,#eff6ff 0%,#ecfeff 100%);
}
.tenant-url-copy-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2563eb;
  background:#dbeafe;
  flex:0 0 auto;
  font-size:20px;
}
.tenant-url-copy-content{flex:1;min-width:0;}
.tenant-url-copy-content label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#2563eb;
  margin-bottom:7px;
}
.tenant-url-copy-row{display:flex;gap:8px;align-items:center;}
.tenant-url-copy-row .form-control{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  background:#fff;
  border-color:#bfdbfe;
}
.tenant-url-copy-row .btn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid #bfdbfe;
  color:#2563eb;
  background:#fff;
}
.tenant-url-copy-content small{
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.45;
  color:#64748b;
}
@media(max-width:575.98px){
  .tenant-url-preview{padding:12px;border-radius:16px;gap:10px;}
  .tenant-url-copy-icon{width:40px;height:40px;border-radius:13px;font-size:18px;}
  .tenant-url-copy-row .form-control{font-size:12px;}
}

/* v61 - Catatan Hutang Piutang */
.debt-page-card{overflow:hidden;}
.debt-header{align-items:flex-start; gap:18px;}
.debt-header h2{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.debt-header .section-subtitle{margin:0; color:#64748b; font-size:14px; max-width:780px;}
.debt-summary-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0 18px;}
.debt-summary-card{border:1px solid #e5edf6; border-radius:20px; padding:18px; background:linear-gradient(145deg,#ffffff,#f8fbff); box-shadow:0 12px 30px rgba(15,23,42,.05); min-height:118px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;}
.debt-summary-card:before{content:""; position:absolute; width:82px; height:82px; border-radius:999px; right:-28px; top:-28px; opacity:.14; background:#2563eb;}
.debt-summary-card span{font-size:12px; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:.06em;}
.debt-summary-card strong{font-size:24px; line-height:1.15; margin:8px 0 4px; color:#0f172a; font-family:'Poppins',sans-serif;}
.debt-summary-card small{color:#94a3b8; font-weight:700;}
.debt-summary-card.debt-piutang:before{background:#ef4444}.debt-summary-card.debt-hutang:before{background:#10b981}.debt-summary-card.debt-due:before{background:#f59e0b}.debt-summary-card.debt-paid:before{background:#2563eb}
.debt-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.debt-tabs{display:flex; flex-wrap:wrap; gap:8px;}
.debt-tabs button{border:1px solid #dbe6f3; background:#f8fafc; color:#475569; border-radius:999px; padding:9px 15px; font-weight:800; transition:.2s;}
.debt-tabs button.active{background:linear-gradient(135deg,#2563eb,#14b8a6); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(37,99,235,.18);}
.debt-list-container{display:flex; flex-direction:column; gap:12px;}
.debt-item{display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center; padding:16px; border:1px solid #e6eef8; border-radius:22px; background:#fff; box-shadow:0 8px 26px rgba(15,23,42,.04); transition:.18s ease;}
.debt-item:hover{transform:translateY(-1px); box-shadow:0 16px 35px rgba(15,23,42,.08);}
.debt-item-icon{width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:18px; color:#fff; font-size:22px; box-shadow:0 14px 28px rgba(37,99,235,.2);}
.debt-item-icon.out{background:linear-gradient(135deg,#ef4444,#f97316);}
.debt-item-icon.in{background:linear-gradient(135deg,#2563eb,#14b8a6);}
.debt-item-main{min-width:0;}
.debt-item-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.debt-person{display:flex; align-items:center; gap:8px; font-weight:900; font-size:16px; color:#0f172a;}
.debt-info-btn{border:0; background:transparent; color:#2563eb; padding:0; line-height:1; font-size:16px;}
.debt-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:5px; color:#64748b; font-size:12px; font-weight:700;}
.debt-meta span{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:#f1f5f9; border-radius:999px;}
.debt-tenant{background:#ecfeff!important; color:#0891b2!important;}
.debt-amount{font-size:20px; font-weight:900; font-family:'Poppins',sans-serif; white-space:nowrap;}
.debt-amount.negative{color:#dc2626}.debt-amount.positive{color:#059669}
.debt-item-bottom{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; color:#64748b; font-size:12px; font-weight:800;}
.debt-item-bottom>span:not(.debt-status){display:inline-flex; align-items:center; gap:5px;}
.debt-status{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.03em;}
.debt-status.is-active{background:#dcfce7; color:#15803d}.debt-status.is-warning{background:#fef3c7; color:#b45309}.debt-status.is-overdue{background:#fee2e2; color:#b91c1c}.debt-status.is-paid{background:#dbeafe; color:#1d4ed8}.debt-status.is-deleted{background:#f1f5f9; color:#64748b}
.debt-actions{display:flex; align-items:center; gap:7px;}
.btn-icon-soft{width:34px; height:34px; border-radius:11px; border:1px solid #e2e8f0; background:#f8fafc; color:#334155; display:inline-flex; align-items:center; justify-content:center;}
.btn-icon-soft.success{background:#ecfdf5; color:#059669; border-color:#bbf7d0}.btn-icon-soft.danger{background:#fff1f2; color:#e11d48; border-color:#fecdd3}
.debt-empty{border:1px dashed #cbd5e1; border-radius:22px; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; color:#64748b; background:#f8fafc; min-height:170px;}
.debt-empty i{font-size:32px; color:#2563eb;}.debt-empty strong{color:#0f172a; font-size:16px;}.debt-error i{color:#ef4444;}
.debt-modal .swal2-html-container{margin:0!important;}
.debt-form .form-label{font-size:12px; font-weight:900; color:#475569; text-transform:uppercase; letter-spacing:.03em;}
.debt-form .form-control{border-radius:14px; border:1px solid #dbe6f3; background:#f8fafc; padding:12px 14px; font-weight:700;}
.debt-type-picker{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.debt-type-picker label{display:flex; gap:10px; align-items:flex-start; border:1px solid #dbe6f3; border-radius:18px; padding:14px; background:#f8fafc; cursor:pointer; transition:.2s;}
.debt-type-picker label.active{border-color:#2563eb; background:#eff6ff; box-shadow:0 10px 24px rgba(37,99,235,.12);}
.debt-type-picker input{margin-top:4px;}.debt-type-picker span{display:flex; flex-direction:column; gap:3px;}.debt-type-picker strong{font-size:13px; color:#0f172a;}.debt-type-picker small{font-size:11px; color:#64748b; font-weight:700;}
.debt-detail-head{border-radius:20px; padding:18px; color:#fff; display:flex; justify-content:space-between; gap:12px; margin-bottom:16px; font-family:'Poppins',sans-serif;}
.debt-detail-head.out{background:linear-gradient(135deg,#ef4444,#f97316)}.debt-detail-head.in{background:linear-gradient(135deg,#2563eb,#14b8a6)}
.debt-detail-head span{font-size:20px; font-weight:900;}.debt-detail dl{display:grid; grid-template-columns:150px 1fr; gap:9px 14px; margin-bottom:16px;}.debt-detail dt{font-size:12px; color:#64748b; font-weight:900; text-transform:uppercase;}.debt-detail dd{margin:0; color:#0f172a; font-weight:700;}
.debt-doc-list{border:1px solid #e2e8f0; border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:8px; background:#f8fafc;}.debt-doc{display:flex; align-items:center; gap:8px; color:#2563eb; font-weight:800; text-decoration:none;}.debt-telegram-hint{margin-top:12px; border-radius:16px; background:#ecfeff; color:#0e7490; font-size:12px; padding:12px; font-weight:800; display:flex; align-items:center; gap:8px;}

@media (max-width: 768px){
  .debt-page-card{border-radius:28px; padding:18px; margin-bottom:100px;}
  .debt-header{flex-direction:column;}
  .debt-header h2{font-size:20px;}
  .debt-header .section-subtitle{font-size:12px;}
  .debt-header .btn{width:100%; border-radius:16px; padding:13px;}
  .debt-summary-grid{grid-template-columns:1fr 1fr; gap:10px; margin:15px 0;}
  .debt-summary-card{padding:14px; min-height:98px; border-radius:18px;}
  .debt-summary-card strong{font-size:17px; word-break:break-word;}
  .debt-summary-card span{font-size:10px;}.debt-summary-card small{font-size:10px;}
  .debt-toolbar{align-items:flex-start; flex-direction:column;}.debt-tabs{width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;}.debt-tabs button{white-space:nowrap; padding:8px 12px; font-size:12px;}.debt-refresh-btn{width:100%; border-radius:14px;}
  .debt-item{grid-template-columns:44px 1fr; gap:12px; padding:14px; border-radius:20px;}.debt-item-icon{width:44px;height:44px;border-radius:16px;font-size:19px;}.debt-actions{grid-column:1 / -1; justify-content:flex-end; border-top:1px solid #eef2f7; padding-top:10px;}.debt-item-top{flex-direction:column; gap:8px;}.debt-person{font-size:14px;}.debt-meta{font-size:11px;}.debt-amount{font-size:18px;}.debt-item-bottom{font-size:11px; gap:6px;}.btn-icon-soft{width:38px;height:38px;}
  .debt-type-picker{grid-template-columns:1fr;}.debt-detail dl{grid-template-columns:1fr; gap:3px;}.debt-detail dd{margin-bottom:8px;}.debt-detail-head{flex-direction:column;}.debt-detail-head span{font-size:18px;}
}

/* v64 - Penyempurnaan Hutang Piutang: premium compact, cari, edit, popup dokumen */
.debt-page-card{padding:24px!important;border-radius:30px!important;background:rgba(255,255,255,.96);box-shadow:0 20px 60px rgba(15,23,42,.08)!important;}
.debt-header h2{font-size:24px;line-height:1.15;font-weight:900;letter-spacing:-.03em;}
.debt-header .section-subtitle{font-size:13px;line-height:1.45;font-weight:700;color:#64748b;}
.debt-summary-card{min-height:104px;padding:16px 17px;border-radius:18px;}
.debt-summary-card strong{font-size:21px;letter-spacing:-.03em;}
.debt-summary-card small{font-size:11px;line-height:1.35;}
.debt-toolbar{background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;padding:10px;margin-bottom:16px;align-items:center;}
.debt-toolbar-right{display:flex;gap:10px;align-items:center;min-width:340px;}
.debt-search-box{flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #dbe6f3;border-radius:15px;padding:0 12px;min-height:40px;color:#64748b;box-shadow:0 8px 18px rgba(15,23,42,.03);}
.debt-search-box input{border:0;outline:0;background:transparent;width:100%;font-size:12px;font-weight:800;color:#0f172a;}
.debt-search-box input::placeholder{color:#94a3b8;font-weight:700;}
.debt-tabs button{font-size:12px;padding:8px 13px;}
.debt-item{grid-template-columns:48px 1fr auto;padding:14px 15px;border-radius:20px;}
.debt-item-icon{width:48px;height:48px;border-radius:16px;font-size:20px;}
.debt-person{font-size:15px;line-height:1.25;}
.debt-type-badge{font-weight:900!important;color:#fff!important;padding:4px 8px!important;background:#2563eb!important;}
.debt-type-badge.piutang{background:#ef4444!important;}
.debt-type-badge.hutang{background:#059669!important;}
.debt-amount{font-size:18px;}
.debt-item-bottom{margin-top:10px;font-size:11px;}
.debt-status.is-request{background:#ede9fe;color:#6d28d9;}
.debt-delete-request{background:#faf5ff!important;color:#7c3aed!important;border:1px solid #ddd6fe;}
.btn-icon-soft.primary{background:#eff6ff;color:#2563eb;border-color:#bfdbfe;}
.btn-icon-soft.warning{background:#fff7ed;color:#ea580c;border-color:#fed7aa;}
.btn-icon-soft:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(15,23,42,.08);}
.debt-form-modal{border-radius:28px!important;}
.debt-form-modal .swal2-title{padding-top:0!important;}
.tx-like-form{font-size:13px;}
.tx-like-form .input-group{border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;overflow:hidden;transition:.18s ease;}
.tx-like-form .input-group:focus-within{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.08);background:#fff;}
.tx-like-form .input-group-text{color:#2563eb;font-weight:800;}
.tx-like-form .form-control{font-size:13px;box-shadow:none!important;}
.tx-like-form textarea.form-control{line-height:1.45;}
.debt-detail-modal{border-radius:28px!important;}
.debt-detail{font-size:13px;}
.debt-detail-head{padding:16px;border-radius:18px;align-items:center;}
.debt-detail-head strong{font-size:14px;display:block;letter-spacing:.02em;}
.debt-detail-head small{font-size:12px;opacity:.9;display:block;margin-top:3px;}
.debt-detail-head span{font-size:19px;}
.debt-detail dl{grid-template-columns:130px 1fr;gap:8px 13px;}
.debt-detail dt{font-size:11px;}
.debt-detail dd{font-size:13px;line-height:1.45;}
.debt-doc-list{gap:7px;}
.debt-doc{border:0;width:100%;text-align:left;background:#fff;border-radius:13px;padding:10px 12px;font-size:12px;transition:.18s;}
.debt-doc:hover{background:#eff6ff;color:#1d4ed8;}
.debt-proof-preview .proof-preview-frame{height:min(70vh,640px);}
.debt-proof-preview .proof-preview-img{max-height:70vh;object-fit:contain;}

@media (max-width: 768px){
  .debt-page-card{padding:16px!important;border-radius:26px!important;}
  .debt-header h2{font-size:18px!important;}
  .debt-header .section-subtitle{font-size:11.5px!important;}
  .debt-summary-grid{grid-template-columns:1fr 1fr;gap:9px;}
  .debt-summary-card{min-height:88px;padding:13px;border-radius:17px;}
  .debt-summary-card strong{font-size:16px;}
  .debt-summary-card span{font-size:9.5px;}
  .debt-summary-card small{font-size:9.5px;}
  .debt-toolbar{gap:10px;padding:9px;border-radius:18px;}
  .debt-toolbar-right{width:100%;min-width:0;flex-direction:column;align-items:stretch;gap:8px;}
  .debt-search-box{min-height:38px;border-radius:14px;}
  .debt-search-box input{font-size:11.5px;}
  .debt-refresh-btn{width:100%;}
  .debt-item{grid-template-columns:42px 1fr;padding:12px;border-radius:18px;}
  .debt-item-icon{width:42px;height:42px;border-radius:15px;font-size:18px;}
  .debt-person{font-size:13.5px;}
  .debt-info-btn{font-size:14px;}
  .debt-meta{font-size:10.5px;gap:5px;}
  .debt-meta span{padding:3px 7px;}
  .debt-amount{font-size:16px;}
  .debt-item-bottom{font-size:10.5px;margin-top:8px;}
  .debt-status{font-size:10px;padding:5px 8px;}
  .debt-actions{justify-content:flex-end;}
  .debt-form-modal{width:96%!important;}
  .tx-like-form{font-size:12px;}
  .tx-like-form .form-label{font-size:10px!important;}
  .debt-type-picker strong{font-size:12px;}.debt-type-picker small{font-size:10.5px;}
  .debt-detail dl{grid-template-columns:1fr;gap:3px;}
  .debt-detail dd{margin-bottom:8px;}
}

/* v65 - Premiumisasi modal Tambah/Edit Catatan Hutang Piutang */
.debt-form-modal-premium{
  border-radius:32px!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 28px 90px rgba(15,23,42,.22)!important;
}
.debt-form-modal-premium .swal2-title:empty{display:none!important;padding:0!important;margin:0!important;}
.debt-form-modal-premium .swal2-html-container{padding:0!important;margin:0!important;overflow:visible!important;}
.debt-form-modal-premium .swal2-actions{padding:0 24px 24px!important;margin-top:18px!important;gap:10px!important;}
.debt-form-modal-premium .swal2-confirm,
.debt-form-modal-premium .swal2-cancel{border-radius:15px!important;padding:12px 18px!important;font-size:13px!important;font-weight:900!important;box-shadow:none!important;}
.debt-form-modal-premium .swal2-confirm{background:linear-gradient(135deg,#2563eb,#14b8a6)!important;box-shadow:0 14px 28px rgba(37,99,235,.18)!important;}
.debt-form-modal-premium .swal2-cancel{background:#f8fafc!important;border:1px solid #e2e8f0!important;color:#475569!important;}
.debt-form-shell{padding:22px 24px 0!important;}
.debt-form-hero{position:relative;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:15px;padding:18px;border-radius:24px;background:linear-gradient(135deg,#eff6ff 0%,#ecfeff 100%);border:1px solid #dbeafe;overflow:hidden;margin-bottom:16px;}
.debt-form-hero:before{content:"";position:absolute;right:-34px;top:-38px;width:132px;height:132px;border-radius:50%;background:rgba(37,99,235,.08);}
.debt-form-hero:after{content:"";position:absolute;right:38px;bottom:-52px;width:112px;height:112px;border-radius:50%;background:rgba(20,184,166,.12);}
.debt-form-hero-icon{position:relative;z-index:1;width:58px;height:58px;border-radius:19px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-size:26px;box-shadow:0 16px 30px rgba(37,99,235,.22);}
.debt-form-hero-copy{position:relative;z-index:1;min-width:0;}
.debt-form-kicker{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#2563eb;margin-bottom:4px;}
.debt-form-hero h3{margin:0;font-size:20px;line-height:1.15;font-weight:900;letter-spacing:-.035em;color:#0f172a;font-family:'Poppins',sans-serif;}
.debt-form-hero p{margin:6px 0 0;color:#64748b;font-size:12px;font-weight:800;line-height:1.35;}
.debt-form-auto-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:9px 11px;background:#fff;color:#0f766e;border:1px solid #ccfbf1;font-size:11px;font-weight:900;box-shadow:0 10px 22px rgba(15,23,42,.06);}
.debt-form-section{background:#fff;border:1px solid #e8eef7;border-radius:22px;padding:16px;margin-bottom:13px;box-shadow:0 10px 26px rgba(15,23,42,.035);}
.debt-section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.debt-section-title>span{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:17px;}
.debt-section-title strong{display:block;font-size:13px;line-height:1.2;color:#0f172a;font-weight:900;font-family:'Poppins',sans-serif;letter-spacing:-.015em;}
.debt-section-title small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:#64748b;font-weight:750;}
.debt-type-picker.premium{gap:10px;}
.debt-type-picker.premium label{position:relative;border-radius:18px;padding:13px 14px;background:#f8fafc;border:1px solid #e2e8f0;overflow:hidden;}
.debt-type-picker.premium label:after{content:"";position:absolute;inset:auto -18px -26px auto;width:76px;height:76px;border-radius:50%;background:#e0f2fe;opacity:.55;}
.debt-type-picker.premium label.active{background:#fff;border-color:#93c5fd;box-shadow:0 14px 34px rgba(37,99,235,.11);}
.debt-type-picker.premium label.active:first-child{border-color:#fecaca;box-shadow:0 14px 34px rgba(239,68,68,.10);}
.debt-type-picker.premium label.active:last-child{border-color:#99f6e4;box-shadow:0 14px 34px rgba(20,184,166,.12);}
.debt-type-picker.premium input{accent-color:#2563eb;width:15px;height:15px;}
.debt-type-picker.premium span{position:relative;z-index:1;}
.debt-type-picker.premium strong{font-size:13.5px;font-weight:900;font-family:'Poppins',sans-serif;}
.debt-type-picker.premium small{font-size:11px;line-height:1.3;font-weight:750;color:#64748b;}
.debt-type-picker.premium em{display:inline-flex;width:max-content;margin-top:6px;border-radius:999px;background:#f1f5f9;color:#334155;padding:4px 8px;font-size:10px;font-style:normal;font-weight:900;}
.debt-impact-note{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:15px;font-size:11.5px;line-height:1.35;font-weight:850;}
.debt-impact-note.out{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
.debt-impact-note.in{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;}
.debt-form-shell .form-label{font-size:10.5px!important;letter-spacing:.06em;margin-bottom:6px!important;color:#64748b!important;}
.debt-form-shell .input-group{min-height:46px;background:#f8fafc!important;border:1px solid #dbe6f3!important;border-radius:16px!important;overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.025);}
.debt-form-shell .input-group:focus-within{background:#fff!important;border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(37,99,235,.08),0 12px 26px rgba(15,23,42,.04)!important;}
.debt-form-shell .input-group-text{width:46px;justify-content:center;background:transparent!important;color:#2563eb!important;border:0!important;font-size:16px;}
.debt-form-shell .form-control{background:transparent!important;border:0!important;font-size:13px!important;color:#0f172a!important;font-weight:750!important;padding:11px 12px!important;}
.debt-form-shell .form-control::placeholder{color:#94a3b8;font-weight:650;}
.debt-form-shell textarea.form-control{min-height:auto;line-height:1.45!important;}
.debt-form-shell .nominal-group .form-control{font-size:15px!important;font-weight:900!important;}
.debt-form-shell .file-group .form-control{padding-top:10px!important;}
.debt-file-note{display:flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:10.8px;line-height:1.35;color:#64748b;font-weight:750;}
.debt-file-note i{color:#2563eb;}
@media (max-width:768px){
  .debt-form-modal-premium{width:96%!important;border-radius:26px!important;}
  .debt-form-shell{padding:16px 16px 0!important;}
  .debt-form-hero{grid-template-columns:48px 1fr;gap:12px;padding:15px;border-radius:21px;}
  .debt-form-hero-icon{width:48px;height:48px;border-radius:17px;font-size:22px;}
  .debt-form-hero h3{font-size:16px;}
  .debt-form-hero p{font-size:10.8px;}
  .debt-form-auto-badge{grid-column:1 / -1;width:max-content;padding:7px 10px;font-size:10.5px;}
  .debt-form-section{border-radius:20px;padding:14px;margin-bottom:11px;}
  .debt-section-title{align-items:flex-start;}
  .debt-section-title>span{width:31px;height:31px;border-radius:11px;font-size:15px;}
  .debt-section-title strong{font-size:12.5px;}
  .debt-section-title small{font-size:10.5px;}
  .debt-type-picker.premium strong{font-size:12.5px;}
  .debt-type-picker.premium small{font-size:10.5px;}
  .debt-impact-note{font-size:10.8px;}
  .debt-form-modal-premium .swal2-actions{padding:0 16px 18px!important;}
  .debt-form-modal-premium .swal2-confirm,.debt-form-modal-premium .swal2-cancel{width:100%;margin:0!important;}
}

/* v1.29.20 - Mobile popup Tambah Catatan Hutang Piutang dibuat seperti form Daftar Akun Baru */
@media (max-width:576px){
  .swal2-popup.debt-form-modal-premium{
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
    border-radius:28px!important;
    padding:2px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  }
  .debt-form-modal-premium .swal2-html-container{
    max-height:calc(100dvh - 122px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 2px!important;
    margin:0!important;
  }
  .debt-form-modal-premium .swal2-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:3!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin:7px 0 0!important;
    padding:8px 6px 6px!important;
    background:linear-gradient(180deg,rgba(248,251,255,.72),#ffffff 45%)!important;
    border-top:1px solid rgba(226,232,240,.78)!important;
  }
  .debt-form-modal-premium .swal2-confirm,
  .debt-form-modal-premium .swal2-cancel{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px 10px!important;
    border-radius:16px!important;
    font-size:12.5px!important;
    line-height:1.2!important;
  }
  .debt-form-shell{
    padding:0!important;
  }
  .debt-form-hero{
    grid-template-columns:44px 1fr!important;
    gap:11px!important;
    padding:12px!important;
    margin:0 0 10px!important;
    border-radius:22px!important;
  }
  .debt-form-hero-icon{
    width:44px!important;
    height:44px!important;
    border-radius:16px!important;
    font-size:20px!important;
  }
  .debt-form-kicker{
    font-size:8.8px!important;
    letter-spacing:.1em!important;
    margin-bottom:3px!important;
  }
  .debt-form-hero h3{
    font-size:17px!important;
    line-height:1.15!important;
    letter-spacing:-.025em!important;
  }
  .debt-form-hero p{
    font-size:11.2px!important;
    line-height:1.35!important;
    margin-top:4px!important;
  }
  .debt-form-auto-badge{
    grid-column:1 / -1!important;
    width:100%!important;
    justify-content:center!important;
    padding:8px 10px!important;
    border-radius:15px!important;
    font-size:10.5px!important;
  }
  .debt-form-section{
    padding:12px!important;
    margin:0 0 10px!important;
    border-radius:20px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.035)!important;
  }
  .debt-section-title{
    gap:9px!important;
    margin-bottom:10px!important;
  }
  .debt-section-title>span{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
    font-size:15px!important;
  }
  .debt-section-title strong{
    font-size:13px!important;
  }
  .debt-section-title small{
    font-size:10.4px!important;
    line-height:1.25!important;
  }
  .debt-type-picker.premium{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .debt-type-picker.premium label{
    padding:11px 12px!important;
    border-radius:17px!important;
  }
  .debt-type-picker.premium strong{font-size:12.7px!important;}
  .debt-type-picker.premium small{font-size:10.5px!important;}
  .debt-type-picker.premium em{font-size:9.6px!important;padding:4px 7px!important;}
  .debt-impact-note{
    padding:9px 10px!important;
    border-radius:14px!important;
    font-size:10.6px!important;
    margin-top:8px!important;
  }
  .debt-form-shell .row{
    --bs-gutter-x:8px;
    --bs-gutter-y:8px;
  }
  .debt-form-shell .form-label{
    margin:8px 0 5px 3px!important;
    font-size:10px!important;
  }
  .debt-form-shell .input-group{
    min-height:44px!important;
    border-radius:16px!important;
  }
  .debt-form-shell .input-group-text{
    width:42px!important;
    font-size:15px!important;
  }
  .debt-form-shell .form-control{
    min-height:44px!important;
    font-size:13px!important;
    padding:10px 11px!important;
  }
  .debt-form-shell textarea.form-control{
    min-height:78px!important;
    resize:vertical;
  }
  .debt-form-shell #debtAlamat,
  .debt-form-shell #debtCatatan{
    min-height:88px!important;
  }
  .debt-form-shell .nominal-group .form-control{
    font-size:15px!important;
  }
  .debt-file-note{
    font-size:10.2px!important;
    line-height:1.32!important;
  }
}
@media (max-width:576px){
  body.dark-mode .swal2-popup.debt-form-modal-premium,
  html.dark-mode body .swal2-popup.debt-form-modal-premium{
    background:linear-gradient(180deg,#0f172a 0%,#08111f 100%)!important;
    border-color:rgba(125,211,252,.20)!important;
  }
  body.dark-mode .debt-form-modal-premium .swal2-actions,
  html.dark-mode body .debt-form-modal-premium .swal2-actions{
    background:linear-gradient(180deg,rgba(15,23,42,.72),#08111f 48%)!important;
    border-top-color:rgba(125,211,252,.14)!important;
  }
  body.dark-mode .debt-form-hero,
  html.dark-mode body .debt-form-hero{
    background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(8,47,73,.80))!important;
    border-color:rgba(125,211,252,.18)!important;
  }
  body.dark-mode .debt-form-hero h3,
  html.dark-mode body .debt-form-hero h3,
  body.dark-mode .debt-section-title strong,
  html.dark-mode body .debt-section-title strong{
    color:#f8fafc!important;
  }
  body.dark-mode .debt-form-hero p,
  html.dark-mode body .debt-form-hero p,
  body.dark-mode .debt-section-title small,
  html.dark-mode body .debt-section-title small{
    color:#cbd5e1!important;
  }
  body.dark-mode .debt-form-section,
  html.dark-mode body .debt-form-section{
    background:rgba(15,23,42,.88)!important;
    border-color:rgba(125,211,252,.14)!important;
  }
  body.dark-mode .debt-form-shell .input-group,
  html.dark-mode body .debt-form-shell .input-group,
  body.dark-mode .debt-type-picker.premium label,
  html.dark-mode body .debt-type-picker.premium label{
    background:rgba(15,23,42,.78)!important;
    border-color:rgba(148,163,184,.22)!important;
  }
  body.dark-mode .debt-type-picker.premium strong,
  html.dark-mode body .debt-type-picker.premium strong,
  body.dark-mode .debt-form-shell .form-control,
  html.dark-mode body .debt-form-shell .form-control{
    color:#f8fafc!important;
  }
  body.dark-mode .debt-type-picker.premium small,
  html.dark-mode body .debt-type-picker.premium small,
  body.dark-mode .debt-form-shell .form-label,
  html.dark-mode body .debt-form-shell .form-label{
    color:#94a3b8!important;
  }
}

/* v66 - Cicilan hutang/piutang */
.debt-paid-chip{display:inline-flex;align-items:center;gap:5px;background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;border-radius:999px;padding:2px 8px;font-weight:800;font-size:11px;white-space:nowrap}
.debt-installment-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 16px}
.debt-installment-quick>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:12px;text-align:center}
.debt-installment-quick small{display:block;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.debt-installment-quick strong{display:block;color:#0f172a;font-size:14px;font-weight:900;letter-spacing:-.2px}
.debt-payment-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #e2e8f0}
.debt-payment-row:last-child{border-bottom:none}
.debt-payment-row div{min-width:0}
.debt-payment-row strong{display:block;color:#059669;font-size:14px;font-weight:900}
.debt-payment-row span{display:block;color:#64748b;font-size:11px;font-weight:700;margin-top:2px}
.debt-payment-row small{max-width:45%;text-align:right;color:#64748b;font-size:11px;font-weight:700;line-height:1.35}
.debt-form-hero.compact{padding:18px;margin-bottom:16px}
.debt-form-hero.compact .debt-form-hero-icon{width:52px;height:52px;border-radius:18px}
.debt-form-hero.compact h3{font-size:22px;margin-bottom:4px}
.debt-form-hero.compact p{font-size:13px;line-height:1.45}
.debt-pay-preview{display:flex;align-items:flex-start;gap:8px;margin-top:14px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:16px;padding:12px 14px;font-size:13px;font-weight:800;line-height:1.45}
.debt-pay-preview i{font-size:16px;margin-top:1px}
.debt-installment-modal .input-group-text{border:0;background:#f8fafc;font-weight:800;color:#334155}
.debt-installment-modal .form-control{border:0;background:#f8fafc;font-weight:700;border-radius:0 14px 14px 0;min-height:48px}
.debt-installment-modal textarea.form-control{padding-top:12px}
@media(max-width:576px){
  .debt-installment-quick{grid-template-columns:1fr;gap:8px}
  .debt-payment-row{align-items:flex-start;flex-direction:column;gap:4px}
  .debt-payment-row small{max-width:100%;text-align:left}
}


/* v1.0.72 - Card BAYAR CICIL menampilkan total nominal cicilan */
.debt-payment-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.debt-payment-files.empty{display:inline-flex;align-items:center;gap:6px;color:#94a3b8;font-size:10.5px;font-weight:800;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:999px;padding:5px 9px;}
.debt-doc.tiny{font-size:10.5px;padding:5px 8px;border-radius:999px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.debt-installment-modal .file-group .form-control{border:0;background:#f8fafc;font-weight:700;border-radius:0 14px 14px 0;min-height:48px;padding-top:10px;}
@media(max-width:576px){
  .debt-doc.tiny{max-width:100%;}
  .debt-payment-files{width:100%;}
}

/* v1.0.72 - BAYAR CICIL sebagai ringkasan total nominal pembayaran cicilan */
.debt-installment-summary strong{font-size:clamp(18px,2.2vw,24px);letter-spacing:-.5px;line-height:1.1;white-space:nowrap}
.debt-installment-summary small{font-weight:800;line-height:1.25}
@media(max-width:576px){
  .debt-installment-summary strong{font-size:18px;white-space:normal;word-break:break-word}
  .debt-installment-summary small{font-size:10.5px}
}

/* v1.0.72 - Kolom Kuota Paket Pelanggan */
.legacy-data-table .legacy-quota-col{min-width:170px;}
.quota-paket-cell{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:150px;}
.quota-paket-cell>div{background:linear-gradient(180deg,#f8fbff,#eef6ff);border:1px solid #dbeafe;border-radius:12px;padding:7px 8px;display:flex;flex-direction:column;gap:1px;line-height:1.15;}
.quota-paket-cell span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b;}
.quota-paket-cell strong{font-size:15px;font-weight:900;color:#0f172a;}
.quota-paket-cell em{font-style:normal;font-size:10px;font-weight:800;color:#059669;}
.legacy-row-terhapus .quota-paket-cell>div{background:#f8fafc;border-color:#e5e7eb;opacity:.78;}
@media (max-width: 768px){
  .legacy-data-table .legacy-quota-col{min-width:0;}
  .quota-paket-cell{grid-template-columns:1fr 1fr;gap:6px;min-width:0;width:100%;}
  .quota-paket-cell>div{padding:6px 8px;border-radius:10px;}
}

/* v1.0.72 - Cancel Tandai Lunas Catatan Hutang Piutang */
.debt-delete-request.cancel{background:#fff7ed!important;color:#c2410c!important;border-color:#fed7aa!important;}
.debt-cancel-paid-alert{display:flex;gap:12px;align-items:flex-start;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:18px;padding:12px 14px;margin-bottom:14px;font-size:12px;font-weight:800;}
.debt-cancel-paid-alert i{font-size:18px;margin-top:2px;}
.debt-cancel-paid-alert strong{display:block;color:#7c2d12;font-family:'Poppins',sans-serif;font-size:13px;margin-bottom:2px;}
.debt-cancel-paid-alert span{display:block;color:#9a3412;line-height:1.45;font-weight:700;}

/* v1.0.72 - Menu Pengaturan sidebar default terlipat saat pertama login */

/* v1.0.75 - Preview pembayaran cicilan mobile lebih rapi */
.swal2-popup.debt-modal.debt-detail-modal,
.swal2-popup.debt-modal.debt-installment-modal{
  max-width:calc(100vw - 22px)!important;
  border-radius:28px!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 28px 90px rgba(15,23,42,.20)!important;
}
.swal2-popup.debt-modal .swal2-title:empty{display:none!important;padding:0!important;margin:0!important;}
.swal2-popup.debt-modal .swal2-html-container{padding:0!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;max-height:min(78vh,720px)!important;}
.swal2-popup.debt-modal .swal2-actions{gap:10px!important;margin:0!important;padding:14px 20px 20px!important;border-top:1px solid rgba(226,232,240,.85)!important;background:#fff!important;}
.swal2-popup.debt-modal .swal2-confirm,
.swal2-popup.debt-modal .swal2-deny,
.swal2-popup.debt-modal .swal2-cancel{border-radius:14px!important;font-size:12.5px!important;font-weight:900!important;padding:10px 15px!important;box-shadow:none!important;}
.swal2-popup.debt-modal .swal2-close{width:38px!important;height:38px!important;font-size:30px!important;color:#94a3b8!important;right:14px!important;top:12px!important;}
.debt-detail-premium{padding:24px 24px 0!important;}
.debt-detail-titlebar{text-align:center;padding:4px 42px 16px;}
.debt-detail-titlebar span{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#2563eb;margin-bottom:3px;}
.debt-detail-titlebar strong{display:block;font-size:22px;line-height:1.15;letter-spacing:-.04em;color:#0f172a;font-family:'Poppins',sans-serif;font-weight:900;}
.debt-detail-titlebar small{display:block;margin-top:5px;font-size:11.5px;line-height:1.35;color:#64748b;font-weight:750;}
.debt-detail-premium .debt-detail-head{position:relative;display:grid!important;grid-template-columns:1fr auto;align-items:end;gap:12px;border-radius:22px!important;padding:18px!important;margin-bottom:12px!important;overflow:hidden;box-shadow:0 18px 36px rgba(239,68,68,.13);}
.debt-detail-premium .debt-detail-head.in{box-shadow:0 18px 36px rgba(37,99,235,.13);}
.debt-detail-premium .debt-detail-head:before{content:"";position:absolute;right:-32px;top:-36px;width:116px;height:116px;border-radius:50%;background:rgba(255,255,255,.15);}
.debt-detail-premium .debt-detail-head:after{content:"";position:absolute;left:-42px;bottom:-58px;width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.12);}
.debt-detail-premium .debt-detail-head>*{position:relative;z-index:1;min-width:0;}
.debt-detail-premium .debt-detail-head strong{font-size:13px!important;line-height:1.35!important;text-transform:uppercase;letter-spacing:.02em;word-break:break-word;}
.debt-detail-premium .debt-detail-head small{font-size:12px!important;line-height:1.35!important;opacity:.92!important;word-break:break-word;}
.debt-detail-premium .debt-detail-head span{font-size:22px!important;line-height:1.05!important;font-weight:900!important;white-space:nowrap;}
.debt-detail-premium .debt-installment-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0 14px;}
.debt-detail-premium .debt-installment-quick>div{border-radius:16px;padding:10px 8px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 8px 22px rgba(15,23,42,.035);}
.debt-detail-premium .debt-installment-quick small{font-size:9.5px;letter-spacing:.06em;line-height:1.25;margin-bottom:5px;}
.debt-detail-premium .debt-installment-quick strong{font-size:13px;line-height:1.2;white-space:normal;word-break:break-word;}
.debt-installment-action-premium{width:100%;border:0;border-radius:18px;padding:13px 14px;margin:0 0 14px;background:linear-gradient(135deg,#059669,#16a34a);color:#fff;font-weight:900;font-size:14px;line-height:1.3;box-shadow:0 18px 34px rgba(5,150,105,.20);display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;}
.debt-installment-action-premium:hover{filter:brightness(.98);transform:translateY(-1px);}
.debt-detail-premium dl{display:grid!important;grid-template-columns:145px 1fr!important;gap:8px 12px!important;background:#fff;border:1px solid #e6eef8;border-radius:18px;padding:14px;margin:0 0 13px!important;}
.debt-detail-premium dt{font-size:10.5px!important;letter-spacing:.055em!important;color:#64748b!important;line-height:1.35!important;}
.debt-detail-premium dd{font-size:12.5px!important;line-height:1.45!important;color:#0f172a!important;font-weight:800!important;word-break:break-word;overflow-wrap:anywhere;}
.debt-detail-premium .debt-doc-list{border-radius:18px;background:#fff;border:1px solid #e6eef8;padding:13px;margin-bottom:12px;}
.debt-detail-premium .debt-doc-list>strong{font-size:12px;color:#0f172a;font-family:'Poppins',sans-serif;margin-bottom:2px;}
.debt-detail-premium .debt-telegram-hint{font-size:11.2px;line-height:1.42;border-radius:15px;margin-bottom:14px;align-items:flex-start;}
.debt-detail-premium .debt-payment-row{gap:8px;padding:9px 0;}
.debt-detail-premium .debt-payment-row strong{font-size:13px;}
.debt-detail-premium .debt-payment-row span,
.debt-detail-premium .debt-payment-row small{font-size:10.5px;line-height:1.35;}
.debt-installment-premium{padding:22px 22px 0!important;}
.debt-installment-hero{position:relative;display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;border:1px solid #dbeafe;border-radius:24px;padding:18px;background:linear-gradient(135deg,#eff6ff 0%,#ecfeff 100%);overflow:hidden;margin-bottom:12px;}
.debt-installment-hero.out{background:linear-gradient(135deg,#fff7ed 0%,#ecfeff 100%);border-color:#fed7aa;}
.debt-installment-hero:before{content:"";position:absolute;right:-38px;top:-42px;width:132px;height:132px;border-radius:50%;background:rgba(37,99,235,.08);}
.debt-installment-hero:after{content:"";position:absolute;right:34px;bottom:-64px;width:124px;height:124px;border-radius:50%;background:rgba(20,184,166,.13);}
.debt-installment-icon{position:relative;z-index:1;width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 16px 32px rgba(37,99,235,.22);}
.debt-installment-copy{position:relative;z-index:1;min-width:0;}
.debt-installment-copy>span{display:block;text-transform:uppercase;letter-spacing:.12em;color:#2563eb;font-weight:900;font-size:10.5px;line-height:1.2;margin-bottom:4px;}
.debt-installment-copy h3{margin:0 0 8px!important;color:#0f172a;font-family:'Poppins',sans-serif;font-size:22px!important;line-height:1.12!important;font-weight:900!important;letter-spacing:-.04em;word-break:break-word;}
.debt-installment-sisa{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:rgba(255,255,255,.78);border:1px solid rgba(219,234,254,.9);border-radius:999px;padding:6px 10px;}
.debt-installment-sisa small{font-size:10px;line-height:1;color:#64748b;font-weight:850;white-space:nowrap;}
.debt-installment-sisa strong{font-size:14px;line-height:1;color:#059669;font-weight:950;white-space:nowrap;}
.debt-installment-alert{display:flex;align-items:flex-start;gap:8px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:16px;padding:10px 12px;margin-bottom:12px;font-size:11.5px;line-height:1.4;font-weight:800;}
.debt-installment-alert i{font-size:15px;margin-top:1px;flex:0 0 auto;}
.installment-clean-section{border-radius:22px!important;padding:16px!important;margin-bottom:0!important;background:#fff!important;}
.installment-label{font-size:10.5px!important;line-height:1.2!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.06em;color:#64748b!important;margin-bottom:7px!important;}
.installment-input{min-height:48px;border:1px solid #dbe6f3!important;border-radius:16px!important;background:#f8fafc!important;overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.025);}
.installment-input:focus-within{border-color:#60a5fa!important;background:#fff!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;}
.installment-input .input-group-text{width:48px;justify-content:center;border:0!important;background:transparent!important;color:#2563eb!important;font-weight:900!important;font-size:15px!important;}
.installment-input .form-control{min-height:48px;border:0!important;background:transparent!important;border-radius:0!important;font-size:13.5px!important;font-weight:800!important;color:#0f172a!important;padding:10px 12px!important;box-shadow:none!important;line-height:1.35!important;}
.installment-input textarea.form-control{min-height:74px!important;resize:vertical;}
.installment-help{display:block;margin-top:7px;color:#64748b;font-size:11.2px;font-weight:750;line-height:1.38;}
.installment-file-note{font-size:11px!important;line-height:1.35!important;margin-top:7px!important;}
.debt-installment-premium .debt-pay-preview{margin-top:13px;border-radius:16px;padding:11px 12px;font-size:11.8px;line-height:1.4;align-items:flex-start;}
.debt-installment-premium .debt-pay-preview b{font-weight:950;}

@media(max-width:576px){
  .swal2-popup.debt-modal.debt-detail-modal,
  .swal2-popup.debt-modal.debt-installment-modal{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;border-radius:26px!important;}
  .swal2-popup.debt-modal .swal2-html-container{max-height:calc(100vh - 156px)!important;}
  .swal2-popup.debt-modal .swal2-actions{padding:11px 14px 16px!important;gap:8px!important;display:grid!important;grid-template-columns:1fr!important;}
  .swal2-popup.debt-modal .swal2-confirm,
  .swal2-popup.debt-modal .swal2-deny,
  .swal2-popup.debt-modal .swal2-cancel{width:100%!important;margin:0!important;font-size:12px!important;padding:10px 12px!important;}
  .swal2-popup.debt-modal .swal2-close{right:10px!important;top:8px!important;width:34px!important;height:34px!important;font-size:28px!important;}
  .debt-detail-premium{padding:18px 15px 0!important;}
  .debt-detail-titlebar{padding:2px 34px 12px;}
  .debt-detail-titlebar span{font-size:9.2px;margin-bottom:2px;}
  .debt-detail-titlebar strong{font-size:18px;line-height:1.14;}
  .debt-detail-titlebar small{font-size:10.2px;line-height:1.3;}
  .debt-detail-premium .debt-detail-head{grid-template-columns:1fr!important;gap:9px!important;padding:14px!important;border-radius:19px!important;margin-bottom:10px!important;}
  .debt-detail-premium .debt-detail-head strong{font-size:11.4px!important;line-height:1.33!important;}
  .debt-detail-premium .debt-detail-head small{font-size:10.7px!important;line-height:1.35!important;}
  .debt-detail-premium .debt-detail-head span{font-size:20px!important;line-height:1.08!important;white-space:normal!important;word-break:break-word;text-align:right;}
  .debt-detail-premium .debt-installment-quick{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:10px 0 12px!important;}
  .debt-detail-premium .debt-installment-quick>div{padding:9px 5px!important;border-radius:14px!important;min-width:0;}
  .debt-detail-premium .debt-installment-quick small{font-size:8.3px!important;line-height:1.22!important;letter-spacing:.04em!important;}
  .debt-detail-premium .debt-installment-quick strong{font-size:11px!important;line-height:1.2!important;}
  .debt-installment-action-premium{font-size:12.4px!important;line-height:1.32!important;padding:12px 10px!important;border-radius:16px!important;margin-bottom:12px!important;}
  .debt-detail-premium dl{grid-template-columns:1fr!important;gap:3px!important;border-radius:16px!important;padding:12px!important;margin-bottom:11px!important;}
  .debt-detail-premium dt{font-size:9.7px!important;line-height:1.2!important;margin-top:4px;}
  .debt-detail-premium dd{font-size:12px!important;line-height:1.35!important;margin-bottom:5px!important;}
  .debt-detail-premium .debt-doc-list{border-radius:16px;padding:11px;gap:6px;}
  .debt-detail-premium .debt-doc{font-size:10.8px;padding:8px 10px;border-radius:12px;}
  .debt-detail-premium .debt-telegram-hint{font-size:10.4px;line-height:1.35;padding:10px;margin-bottom:11px;}
  .debt-detail-premium .debt-payment-row{flex-direction:column;align-items:stretch;gap:5px;}
  .debt-detail-premium .debt-payment-row small{max-width:100%;text-align:left;}
  .debt-installment-premium{padding:18px 15px 0!important;}
  .debt-installment-hero{grid-template-columns:46px 1fr;gap:11px;padding:14px;border-radius:20px;margin-bottom:10px;}
  .debt-installment-icon{width:46px;height:46px;border-radius:16px;font-size:21px;}
  .debt-installment-copy>span{font-size:9.4px;line-height:1.18;letter-spacing:.105em;}
  .debt-installment-copy h3{font-size:17px!important;line-height:1.12!important;margin-bottom:7px!important;}
  .debt-installment-sisa{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:6px;border-radius:14px;padding:8px 9px;}
  .debt-installment-sisa small{font-size:9.5px;line-height:1.2;white-space:normal;}
  .debt-installment-sisa strong{font-size:13px;line-height:1.15;white-space:normal;text-align:right;word-break:break-word;}
  .debt-installment-alert{font-size:10.5px;line-height:1.35;padding:9px 10px;border-radius:14px;margin-bottom:10px;}
  .installment-clean-section{padding:13px!important;border-radius:18px!important;}
  .installment-label{font-size:9.6px!important;margin-bottom:6px!important;}
  .installment-input{min-height:44px;border-radius:14px!important;}
  .installment-input .input-group-text{width:44px!important;font-size:14px!important;}
  .installment-input .form-control{min-height:44px!important;font-size:12.5px!important;padding:9px 10px!important;}
  .installment-input textarea.form-control{min-height:68px!important;}
  .installment-help{font-size:10.4px;line-height:1.32;margin-top:6px;}
  .installment-file-note{font-size:10.2px!important;}
  .debt-installment-premium .debt-pay-preview{font-size:10.8px;padding:10px;border-radius:14px;margin-top:11px;}
}

/* v1.0.75 - Preview pembayaran cicilan dibuat tertata agar tidak pecah di layar mobile */
.debt-installment-premium .debt-pay-preview{display:block!important;background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;overflow:hidden!important;}
.debt-pay-preview-card{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;width:100%;min-width:0;}
.debt-pay-preview-icon{width:38px;height:38px;border-radius:14px;background:#dbeafe;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;}
.debt-pay-preview-card.is-paid .debt-pay-preview-icon{background:#dcfce7;color:#16a34a;}
.debt-pay-preview-content{min-width:0;display:grid;gap:6px;}
.debt-pay-preview-row{display:grid;grid-template-columns:minmax(72px,1fr) auto;gap:10px;align-items:center;min-width:0;}
.debt-pay-preview-row span{font-size:11.2px;line-height:1.2;color:#64748b;font-weight:900;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;}
.debt-pay-preview-row strong,.debt-pay-preview-content>strong{font-family:'Poppins',sans-serif;font-size:13.5px;line-height:1.15;color:#0f172a;font-weight:950;text-align:right;white-space:nowrap;word-break:normal;overflow-wrap:normal;}
.debt-pay-preview-content>strong{text-align:left;color:#047857;}
.debt-pay-preview-content small{display:block;font-size:11.2px;line-height:1.35;color:#475569;font-weight:800;word-break:normal;overflow-wrap:normal;}

@media(max-width:576px){
  .debt-pay-preview-card{grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:start;}
  .debt-pay-preview-icon{width:32px;height:32px;border-radius:12px;font-size:15px;margin-top:1px;}
  .debt-pay-preview-content{gap:6px;}
  .debt-pay-preview-row{grid-template-columns:minmax(58px,1fr) auto;gap:8px;padding:2px 0;}
  .debt-pay-preview-row span{font-size:9.8px;letter-spacing:.025em;}
  .debt-pay-preview-row strong,.debt-pay-preview-content>strong{font-size:11.6px;letter-spacing:-.02em;max-width:148px;overflow:hidden;text-overflow:ellipsis;}
  .debt-pay-preview-content small{font-size:10.1px;line-height:1.28;}
}

/* v1.0.77 - Perbaikan label versi drawer/menu akun dan hapus subteks Profil Saya */
/* v1.0.78 - Hapus deskripsi kecil halaman Catatan Hutang Piutang di bawah judul */
/* v1.0.79 - Live Chat Bantuan mobile: Enter/Send untuk kirim dan panel menyesuaikan keyboard HP */
.mobile-home-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative;z-index:3;}
.hamburger-menu-btn{width:44px;height:44px;border:0;background:transparent;color:#fff;display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:0;margin:0;box-shadow:none;}
.hamburger-menu-btn span{display:block;width:25px;height:2.5px;border-radius:999px;background:currentColor;box-shadow:0 1px 2px rgba(15,23,42,.12);}
.hamburger-menu-btn:active{transform:scale(.94);}
.mobile-header .notification-bell{width:44px;height:44px;min-width:44px;}
.mobile-drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1088;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;}
.mobile-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,345px);z-index:1089;pointer-events:none;}
.mobile-drawer-panel{height:100dvh;width:100%;display:flex;flex-direction:column;background:rgba(255,255,255,.91);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:22px 0 55px rgba(15,23,42,.18);border-right:1px solid rgba(255,255,255,.72);transform:translateX(-105%);transition:transform .28s cubic-bezier(.22,1,.36,1);padding:calc(18px + env(safe-area-inset-top)) 16px calc(8px + env(safe-area-inset-bottom));overflow-y:auto;}
.mobile-drawer.open{pointer-events:auto;}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0);}
.mobile-drawer-overlay.show{opacity:1;visibility:visible;}
body.mobile-drawer-open{overflow:hidden;touch-action:none;}
.mobile-drawer-brand{display:grid;grid-template-columns:52px minmax(0,1fr) 36px;align-items:center;gap:12px;padding:8px 4px 0;}
.mobile-drawer-logo{width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,#eff6ff,#ecfdf5);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 22px rgba(37,99,235,.12);overflow:hidden;}
.mobile-drawer-logo img{width:100%;height:100%;object-fit:contain;}
.mobile-drawer-brand-copy{min-width:0;}
.mobile-drawer-brand-copy h5{font-family:'Poppins',sans-serif;font-size:18px;font-weight:850;color:#0f172a;margin:0 0 2px;letter-spacing:-.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-drawer-brand-copy small{display:block;font-size:11.5px;font-weight:700;color:#64748b;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-drawer-brand-copy span{display:block;margin-top:4px;font-size:10.5px;font-weight:800;color:#94a3b8;letter-spacing:.03em;}
.mobile-drawer-close{width:36px;height:36px;border:0;border-radius:12px;background:rgba(241,245,249,.86);color:#475569;display:inline-flex;align-items:center;justify-content:center;}
.mobile-drawer-spacer{height:1cm;min-height:28px;flex:0 0 auto;}
.mobile-drawer-nav{display:grid;gap:7px;}
.mobile-drawer-link,.mobile-drawer-footer-link{width:100%;min-height:48px;border:0;text-decoration:none;display:flex;align-items:center;gap:12px;border-radius:16px;background:rgba(248,250,252,.86);color:#334155;font-size:14px;font-weight:700;padding:12px 14px;text-align:left;transition:background .2s ease,transform .2s ease,color .2s ease;}
.mobile-drawer-link i:first-child,.mobile-drawer-footer-link i:first-child{width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:16px;flex:0 0 auto;}
.mobile-drawer-link:hover,.mobile-drawer-link.active,.mobile-drawer-footer-link:hover{background:#fff;color:var(--primary-dark);box-shadow:0 8px 22px rgba(15,23,42,.06);transform:translateX(3px);}
.mobile-drawer-submenu{display:grid;gap:7px;}
.mobile-drawer-submenu-toggle{cursor:pointer;}
.drawer-chevron{font-size:13px!important;background:transparent!important;color:#94a3b8!important;width:auto!important;height:auto!important;transition:transform .2s ease;}
.mobile-drawer-submenu.open .drawer-chevron{transform:rotate(180deg);}
.mobile-drawer-submenu-list{display:none;margin-left:15px;padding-left:13px;border-left:1px dashed #cbd5e1;gap:6px;}
.mobile-drawer-submenu.open .mobile-drawer-submenu-list{display:grid;}
.mobile-drawer-sublink{min-height:42px;text-decoration:none;display:flex;align-items:center;gap:10px;border-radius:14px;background:rgba(255,255,255,.68);color:#475569;font-size:13px;font-weight:700;padding:10px 12px;}
.mobile-drawer-sublink i{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#f1f5f9;color:#2563eb;font-size:14px;}
.mobile-drawer-sublink.active{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.12));color:#1d4ed8;}
.mobile-drawer-footer{margin-top:auto;padding-top:18px;display:grid;gap:7px;text-align:center;}
.mobile-drawer-footer-actions{display:grid;gap:7px;}
.mobile-drawer-footer-link.danger{color:#dc2626;background:rgba(254,242,242,.9);}
.mobile-drawer-footer-link.danger i:first-child{background:#fee2e2;color:#dc2626;}
.mobile-drawer-version{margin-top:6px;text-align:center;font-size:11px;font-weight:900;color:#64748b;letter-spacing:.035em;text-transform:uppercase;}
.mobile-drawer-copyright{text-align:center;font-size:10.5px;font-weight:700;color:#94a3b8;line-height:1.3;padding-bottom:0;}
.mobile-drawer-credit{text-align:center;font-size:10.5px;font-weight:800;color:#94a3b8;line-height:1.2;margin-top:-2px;padding-bottom:0;letter-spacing:.02em;}

.account-mobile-card{background:#fff;}
.account-mobile-list .list-group-item{font-weight:600;background:#f8fafc;color:#334155;}
.account-menu-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:15px;flex:0 0 auto;}
.account-menu-copy{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25;}
.account-menu-main{font-weight:600;color:#334155;}
.account-menu-copy small{font-size:11px;color:#94a3b8;font-weight:700;line-height:1.25;margin-top:1px;}
.account-mobile-version{padding:20px 16px 10px;text-align:left;font-size:11px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;}
.account-logout-btn{margin-top:1cm!important;background:#fef2f2!important;color:#dc2626!important;}
.account-logout-btn .account-menu-main{color:#dc2626;}
@media(max-width:991px){
  body[data-page="dashboard"] .mobile-header{padding-top:calc(22px + env(safe-area-inset-top));}
  #page-profil .account-mobile-card{margin-bottom:100px!important;}
  #page-profil .account-mobile-list .list-group-item{padding:12px 16px;min-height:60px;margin-bottom:6px;border-radius:14px;font-size:14px;}
}
@media(min-width:992px){.mobile-drawer-overlay,.mobile-drawer{display:none!important;}}

/* v1.0.79 - Live Chat Bantuan mobile: tombol Enter/Send dari keyboard HP untuk kirim pesan */
:root { --mobile-keyboard-height: 0px; }
@media (max-width: 991px) {
  body[data-page="bantuan"] .help-page-compose textarea,
  .chat-modal .chat-compose textarea {
    font-size: 16px !important;
  }

  body.mobile-keyboard-open[data-page="bantuan"] #page-bantuan.active {
    bottom: auto !important;
    height: calc(var(--help-mobile-vh) - var(--help-mobile-keyboard-gap) - env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--help-mobile-vh) - var(--help-mobile-keyboard-gap) - env(safe-area-inset-bottom)) !important;
    padding-bottom: 0 !important;
  }

  body.mobile-keyboard-open[data-page="bantuan"] .help-page-card {
    border-radius: 20px !important;
  }

  body.mobile-keyboard-open[data-page="bantuan"] .help-page-thread {
    padding-bottom: 10px !important;
  }

  body.mobile-keyboard-open[data-page="bantuan"] .help-page-compose {
    margin-bottom: 0 !important;
  }
}

/* v1.0.85 - Struk/Nota Order premium dan responsif */
.order-current-box{
  background: rgba(37,99,235,.07);
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #334155;
}
.order-remove-wrap{
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 16px;
  padding: 12px;
  margin-top: 12px;
}
.order-remove-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 0;
  font-size:12.5px;
  color:#334155;
}
.order-remove-item input{ margin-top:3px; }
.order-remove-item small{ display:block; color:#64748b; }
.order-choice-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:rgba(255,255,255,.92);
  margin-bottom:12px;
  cursor:pointer;
  transition:.2s ease;
}
.order-choice-card:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,.10); border-color:#bfdbfe; }
.order-choice-card i{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#eff6ff; color:#2563eb; font-size:20px; }
.order-choice-card b{ display:block; color:#0f172a; font-size:14px; }
.order-choice-card span{ display:block; color:#64748b; font-size:12px; line-height:1.45; }
.order-receipt-preview{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:16px; }
.receipt-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:10px; border-bottom:1px dashed #cbd5e1; }
.receipt-head b{ display:block; font-size:18px; color:#0f172a; }
.receipt-head span{ display:block; font-size:12px; color:#64748b; }
.receipt-head i{ font-size:28px; color:#2563eb; }
.receipt-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:7px 0; font-size:13px; }
.receipt-row span{ color:#64748b; }
.receipt-row strong{ color:#0f172a; text-align:right; }
.receipt-total{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; padding:13px 14px; border-radius:14px; background:#eff6ff; color:#1d4ed8; }
.receipt-total span{ font-weight:700; }
.receipt-total strong{ font-size:18px; }
.receipt-note{ margin-top:12px; font-size:12px; color:#64748b; line-height:1.55; }
@media (max-width: 576px){
  .order-subscription-modal .swal2-html-container{ margin-left:.25rem!important; margin-right:.25rem!important; }
  .order-remove-wrap .row{ --bs-gutter-x:.5rem; }
  .receipt-row{ font-size:12.5px; }
}

/* v1.0.85 - Premium Order Receipt Mobile/Desktop */
.swal2-popup.receipt-modal{
  width:min(92vw, 470px)!important;
  max-width:470px!important;
  padding:28px 18px 18px!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 28px 70px rgba(15,23,42,.22)!important;
}
.swal2-popup.receipt-modal .swal2-title{
  padding:0 44px 12px!important;
  margin:0!important;
  line-height:1.2!important;
}
.swal2-popup.receipt-modal .swal2-close{
  width:38px!important;
  height:38px!important;
  top:12px!important;
  right:14px!important;
  color:#94a3b8!important;
  font-size:32px!important;
  line-height:38px!important;
  border-radius:999px!important;
  transition:.18s ease!important;
}
.swal2-popup.receipt-modal .swal2-close:hover{
  background:#f1f5f9!important;
  color:#475569!important;
}
.swal2-popup.receipt-modal .swal2-html-container{
  margin:0!important;
  padding:0 2px!important;
  overflow-x:hidden!important;
  max-height:calc(100vh - 122px)!important;
}
.order-receipt-preview.premium-order-receipt{
  max-width:390px;
  margin:0 auto;
  border-radius:22px;
  padding:20px 18px 18px;
  border:1px solid rgba(226,232,240,.95);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 18px 42px rgba(15,23,42,.08);
}
.premium-order-receipt .receipt-head{
  padding-bottom:15px;
  margin-bottom:14px;
  border-bottom:1px dashed #cbd5e1;
}
.premium-order-receipt .receipt-head b{
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.03em;
}
.premium-order-receipt .receipt-head span{
  font-size:13px;
  line-height:1.35;
  margin-top:2px;
}
.premium-order-receipt .receipt-head i{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#eff6ff;
  color:#2563eb;
  font-size:25px;
  flex:0 0 auto;
}
.premium-order-receipt .receipt-section{ display:block; }
.premium-order-receipt .receipt-row{
  display:grid;
  grid-template-columns:minmax(98px, 38%) minmax(0, 1fr);
  column-gap:14px;
  align-items:start;
  padding:7px 0;
  font-size:13.5px;
  line-height:1.38;
}
.premium-order-receipt .receipt-row span{
  min-width:0;
  color:#64748b;
  font-weight:500;
  overflow-wrap:normal;
  word-break:normal;
}
.premium-order-receipt .receipt-row strong{
  min-width:0;
  color:#0f172a;
  text-align:right;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:normal;
}
.premium-order-receipt .receipt-payment-section .receipt-row strong{ white-space:nowrap; }
.premium-order-receipt .receipt-divider{
  height:1px;
  background:#e2e8f0;
  margin:12px 0;
}
.premium-order-receipt .receipt-total{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  column-gap:14px;
  margin-top:12px;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(135deg,#eff6ff 0%,#e0f2fe 100%);
  border:1px solid rgba(37,99,235,.08);
}
.premium-order-receipt .receipt-total span{
  color:#1d4ed8;
  font-size:16px;
  line-height:1.15;
  font-weight:900;
  white-space:nowrap;
}
.premium-order-receipt .receipt-total strong{
  color:#1d4ed8;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  text-align:right;
  white-space:nowrap;
  letter-spacing:-.03em;
}
.premium-order-receipt .receipt-note{
  margin-top:14px;
  padding:12px 13px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#64748b;
  font-size:12.8px;
  line-height:1.62;
}
.premium-order-receipt .receipt-note b{ color:#0f172a; }
.premium-order-receipt .receipt-download-btn{
  margin-top:14px!important;
  height:50px;
  border-radius:18px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(37,99,235,.23)!important;
}
@media (max-width: 576px){
  .swal2-popup.receipt-modal{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    padding:24px 14px 14px!important;
    border-radius:26px!important;
  }
  .swal2-popup.receipt-modal .swal2-title{ padding:0 38px 10px!important; }
  .order-receipt-preview.premium-order-receipt{
    max-width:none;
    width:100%;
    padding:18px 16px 16px;
    border-radius:21px;
  }
  .premium-order-receipt .receipt-row{
    grid-template-columns:112px minmax(0, 1fr);
    column-gap:12px;
    font-size:13px;
  }
  .premium-order-receipt .receipt-head b{ font-size:19px; }
  .premium-order-receipt .receipt-total{ padding:14px 16px; column-gap:10px; }
  .premium-order-receipt .receipt-total span{ font-size:15.5px; }
  .premium-order-receipt .receipt-total strong{ font-size:22px; }
}
@media (max-width: 360px){
  .premium-order-receipt .receipt-row{ grid-template-columns:98px minmax(0, 1fr); font-size:12.5px; }
  .premium-order-receipt .receipt-total{ grid-template-columns:1fr; row-gap:4px; }
  .premium-order-receipt .receipt-total strong{ text-align:left; font-size:23px; }
}

/* v1.0.86 - Order/Struk/Pembayaran premium dan scroll aman di mobile */
.swal2-popup.receipt-modal,
.swal2-popup.order-subscription-modal,
.swal2-popup.order-payment-modal{
  width:min(92vw, 470px)!important;
  max-width:470px!important;
  max-height:calc(100dvh - 28px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:30px!important;
}
.swal2-popup.receipt-modal .swal2-html-container,
.swal2-popup.order-subscription-modal .swal2-html-container,
.swal2-popup.order-payment-modal .swal2-html-container{
  max-height:calc(100dvh - 150px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  margin:0!important;
  padding:0 2px 18px!important;
}
.swal2-popup.order-subscription-modal .swal2-title,
.swal2-popup.order-payment-modal .swal2-title,
.swal2-popup.receipt-modal .swal2-title{ flex:0 0 auto!important; }
.swal2-popup.order-subscription-modal .swal2-actions,
.swal2-popup.order-payment-modal .swal2-actions{
  flex:0 0 auto!important;
  width:100%!important;
  gap:10px!important;
  margin:12px 0 0!important;
  padding:0 8px 2px!important;
}
.swal2-popup.order-subscription-modal .swal2-confirm,
.swal2-popup.order-subscription-modal .swal2-cancel,
.swal2-popup.order-payment-modal .swal2-confirm,
.swal2-popup.order-payment-modal .swal2-cancel{
  flex:1 1 0!important;
  min-height:48px!important;
  border-radius:16px!important;
  font-weight:900!important;
}

/* Struk / Nota */
.swal2-popup.receipt-modal .swal2-html-container{ max-height:calc(100dvh - 96px)!important; padding-bottom:22px!important; }
.order-receipt-preview.premium-order-receipt{ padding-bottom:18px!important; }
.premium-order-receipt .receipt-paid-status{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  margin:0 0 13px;
  border-radius:16px;
  background:linear-gradient(135deg,#dcfce7,#ecfdf5);
  border:1px solid rgba(34,197,94,.22);
  color:#15803d;
}
.premium-order-receipt .receipt-paid-status i{ font-size:22px; line-height:1; flex:0 0 auto; }
.premium-order-receipt .receipt-paid-status b{ display:block; font-size:13px; letter-spacing:.04em; font-weight:950; }
.premium-order-receipt .receipt-paid-status span{ display:block; font-size:11.5px; font-weight:700; color:#22a06b; line-height:1.35; }
.premium-order-receipt .receipt-note{ margin-bottom:0; }
.premium-order-receipt .receipt-download-btn{ position:relative; z-index:2; }

/* Order Langganan */
.order-subscription-premium{ display:grid; gap:12px; }
.order-subscription-hero{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#eef6ff 0%,#ecfdf5 100%);
  border:1px solid rgba(37,99,235,.12);
  box-shadow:0 14px 35px rgba(37,99,235,.10);
}
.order-subscription-icon,
.order-payment-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#2563eb;
  font-size:25px;
  box-shadow:0 12px 24px rgba(37,99,235,.12);
}
.order-subscription-hero b{ display:block; font-family:'Poppins',sans-serif; font-size:18px; line-height:1.25; font-weight:950; color:#0f172a; letter-spacing:-.35px; }
.order-subscription-hero span{ display:block; margin-top:3px; color:#64748b; font-size:12.5px; line-height:1.45; font-weight:750; }
.order-field-card,
.order-month-card,
.order-input-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:13px;
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.order-field-card label,
.order-month-card label,
.order-input-card label{
  display:block;
  margin-bottom:8px;
  font-size:11.5px;
  line-height:1.25;
  color:#64748b;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:900;
}
.order-select-premium,
.order-input-card .form-control,
.order-month-input .form-control{
  min-height:50px;
  border:0!important;
  background:#f8fafc!important;
  border-radius:14px!important;
  color:#0f172a!important;
  font-size:16px!important;
  font-weight:800!important;
  box-shadow:inset 0 0 0 1px #e2e8f0!important;
}
.order-select-premium{ padding-right:40px!important; }
.order-current-box.premium{
  margin:0!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f1f5ff,#f8fafc)!important;
  border:1px solid #dbeafe!important;
  color:#334155!important;
  font-size:13px!important;
  line-height:1.6!important;
}
.order-current-box.premium b{ display:block; margin-bottom:2px; color:#0f172a; font-size:14px; }
.order-qty-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.order-input-card .form-control{ text-align:left; padding-left:14px!important; }
.order-month-input{ display:grid; grid-template-columns:1fr 108px; align-items:stretch; }
.order-month-input .form-control{ border-radius:14px 0 0 14px!important; }
.order-month-input span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  border-radius:0 14px 14px 0;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-left:0;
  color:#64748b;
  font-size:16px;
  font-weight:900;
}
.order-month-card small{ display:block; margin-top:7px; color:#94a3b8; font-weight:700; font-size:11.5px; }
.order-total-premium{
  display:grid;
  gap:3px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(135deg,#2563eb 0%,#14b8a6 100%);
  color:#fff;
  box-shadow:0 16px 34px rgba(37,99,235,.24);
}
.order-total-premium span{ font-size:12px; font-weight:850; opacity:.9; letter-spacing:.03em; text-transform:uppercase; }
.order-total-premium strong{ font-family:'Poppins',sans-serif; font-size:25px; line-height:1.15; font-weight:950; letter-spacing:-.4px; }
.order-total-premium small{ font-size:12px; font-weight:750; opacity:.88; line-height:1.35; }
.order-remove-wrap.premium{ background:#fffbeb!important; border-color:#fde68a!important; }
.order-remove-warning{ display:flex; align-items:flex-start; gap:9px; color:#92400e; font-size:12px; line-height:1.45; font-weight:750; margin-bottom:10px; }
.order-remove-warning i{ font-size:16px; margin-top:1px; }

/* Pembayaran Order */
.order-payment-premium{ display:grid; gap:13px; }
.order-payment-hero{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#eef6ff 0%,#ecfdf5 100%);
  border:1px solid rgba(37,99,235,.12);
}
.order-payment-hero b{ display:block; font-family:'Poppins',sans-serif; font-size:17px; line-height:1.25; font-weight:950; color:#0f172a; }
.order-payment-hero span{ display:block; margin-top:4px; color:#64748b; font-size:12.5px; line-height:1.45; font-weight:750; }
.order-payment-summary{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.order-payment-summary div{
  padding:12px;
  border-radius:17px;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.order-payment-summary span{ display:block; color:#64748b; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.order-payment-summary strong{ display:block; margin-top:4px; color:#0f172a; font-size:14px; font-weight:950; }
.order-payment-total{
  padding:17px;
  border-radius:22px;
  text-align:center;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  box-shadow:0 16px 34px rgba(37,99,235,.24);
}
.order-payment-total span{ display:block; font-size:13px; font-weight:900; opacity:.9; }
.order-payment-total strong{ display:block; font-family:'Poppins',sans-serif; font-size:28px; line-height:1.12; font-weight:950; margin-top:4px; }
.order-payment-total small{ display:block; margin-top:5px; font-size:11.5px; font-weight:750; opacity:.86; }
.order-payment-qris-card,
.order-payment-upload-card{
  padding:14px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.order-payment-qris-title,
.order-payment-upload-card label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#0f172a;
  font-size:13.5px;
  font-weight:950;
  margin-bottom:10px;
}
.order-payment-qris-title i,
.order-payment-upload-card label i{ color:#2563eb; font-size:18px; }
.order-payment-qr-box{ display:flex; justify-content:center; align-items:center; width:100%; overflow:hidden; }
.order-payment-qr-box canvas,
.order-payment-qr-box img{ max-width:min(255px, 76vw)!important; height:auto!important; border-radius:14px; }
#orderQrFallback img{ display:block; width:min(255px, 76vw); max-width:100%; margin:0 auto; border-radius:16px; border:1px solid #e2e8f0; }
.order-payment-upload-card .form-control{ min-height:48px; border-radius:15px; background:#f8fafc; border:1px solid #e2e8f0; font-size:14px; }
.order-payment-upload-card small{ display:block; margin-top:8px; color:#94a3b8; font-size:11.5px; font-weight:700; line-height:1.4; }

@media(max-width:576px){
  .swal2-popup.receipt-modal,
  .swal2-popup.order-subscription-modal,
  .swal2-popup.order-payment-modal{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    max-height:calc(100dvh - 24px)!important;
    border-radius:28px!important;
    padding:22px 14px 14px!important;
  }
  .swal2-popup.order-subscription-modal .swal2-html-container,
  .swal2-popup.order-payment-modal .swal2-html-container{ max-height:calc(100dvh - 172px)!important; }
  .swal2-popup.receipt-modal .swal2-html-container{ max-height:calc(100dvh - 88px)!important; }
  .order-subscription-hero b{ font-size:16px; }
  .order-payment-hero b{ font-size:16px; }
  .order-qty-grid{ gap:9px; }
  .order-field-card,.order-month-card,.order-input-card{ padding:12px; }
  .order-month-input{ grid-template-columns:1fr 92px; }
  .order-total-premium strong{ font-size:22px; }
  .order-payment-total strong{ font-size:25px; }
}
@media(max-width:360px){
  .order-subscription-hero,.order-payment-hero{ grid-template-columns:46px minmax(0,1fr); padding:13px; }
  .order-subscription-icon,.order-payment-icon{ width:46px; height:46px; border-radius:15px; }
  .order-payment-summary{ grid-template-columns:1fr; }
  .order-qty-grid{ grid-template-columns:1fr; }
}


/* v1.0.88 - Judul halaman mobile memakai icon Home sederhana untuk kembali ke Beranda */
.mobile-page-title-with-home{align-items:center!important;gap:.5cm;line-height:1.18;}
.mobile-title-home-btn{border:0;background:transparent;color:#0f172a;width:auto;height:auto;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto;-webkit-tap-highlight-color:transparent;}
.mobile-title-home-btn i{font-size:30px;line-height:1;display:block;}
.mobile-title-home-btn:active{transform:scale(.94);opacity:.78;}
.mobile-page-title-with-home span{display:inline-block;min-width:0;}
@media (min-width: 992px){.mobile-page-title-with-home{display:none!important;}}


/* v1.1.32 - Icon home judul halaman mobile dibuat solid seperti referensi.
   Berlaku sama untuk Riwayat Transaksi, Catat Transaksi Baru, dan Kategori.
   Mode terang = hitam, mode gelap = putih. */
.mobile-title-home-btn,
.mobile-title-home-btn:hover,
.mobile-title-home-btn:focus {
  color:#000000 !important;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
}
.mobile-home-solid-icon {
  width:32px;
  height:30px;
  display:block;
  color:currentColor;
  fill:currentColor;
  flex:0 0 auto;
}
.mobile-home-solid-icon path { fill:currentColor; }
body.dark-mode .mobile-title-home-btn,
body.dark-mode .mobile-title-home-btn:hover,
body.dark-mode .mobile-title-home-btn:focus,
html.dark-mode body .mobile-title-home-btn,
html.dark-mode body .mobile-title-home-btn:hover,
html.dark-mode body .mobile-title-home-btn:focus {
  color:#ffffff !important;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
}

/* v1.0.99 - Profil Keluarga dan Staff & Izin */
.about-app-premium {
  border-radius: 26px !important;
  overflow: hidden !important;
}
.about-app-wrap {
  font-family: 'Inter', sans-serif;
  color: #334155;
}
.about-app-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 16px 34px rgba(102, 126, 234, .24);
  margin: 16px 0 18px;
}
.about-app-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 8px;
  flex: 0 0 auto;
}
.about-app-brand h6 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
.about-app-brand small,
.about-app-brand span {
  display: block;
  opacity: .9;
  line-height: 1.28;
}
.about-app-brand small {
  font-size: 11.5px;
  font-weight: 600;
  max-width: 112px;
  letter-spacing: .01em;
}
.about-app-brand span {
  opacity: .78;
  font-size: 11px;
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: .02em;
}
.about-app-body {
  max-height: min(68vh, 560px);
  overflow-y: auto;
  padding: 2px 4px 4px;
  scrollbar-width: thin;
}
.about-app-body p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 14px;
  color: #334155;
}
.about-app-body h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #0f172a;
  margin: 20px 0 10px;
}
.about-app-feature-title {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 800;
  font-size: 13px;
  margin: 4px 0 12px;
}
.about-app-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-app-feature-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.about-app-feature-item span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #fff;
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.about-app-feature-item p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}
.about-app-spirit {
  margin: 18px 0 12px;
  padding: 14px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, #fff7ed, #fff1f2);
  color: #be123c;
  font-weight: 900;
}
.about-app-credit {
  margin-top: 16px;
  padding: 14px 12px 10px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}
.about-app-credit small,
.about-app-credit strong,
.about-app-credit span {
  display: block;
  line-height: 1.55;
}
.about-app-credit small,
.about-app-credit span {
  color: #94a3b8;
  font-weight: 700;
  font-size: 12px;
}
.about-app-credit strong {
  color: #334155;
  font-weight: 900;
  font-size: 12.5px;
}
@media (max-width: 575.98px) {
  .about-app-hero { padding: 14px; border-radius: 20px; }
  .about-app-logo { width: 48px; height: 48px; border-radius: 16px; }
  .about-app-brand h6 { font-size: 15px; }
  .about-app-brand small { font-size: 10.5px; max-width: 104px; }
  .about-app-body { max-height: 64vh; }
  .about-app-feature-item { grid-template-columns: 24px 1fr; padding: 11px; }
  .about-app-feature-item span { width: 24px; height: 24px; border-radius: 8px; }
}

/* v1.1.2 - Halaman Paket Admin/Staff Tenant */
.package-page-wrap{display:grid;gap:18px;max-width:920px;margin:0 auto 110px;}
.package-loading-card,.package-empty-card{display:flex;align-items:center;justify-content:center;gap:12px;min-height:140px;padding:24px;border-radius:26px;background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.95);box-shadow:0 18px 45px rgba(15,23,42,.08);color:#334155;font-family:'Poppins',sans-serif;}
.package-empty-card{flex-direction:column;text-align:center;gap:8px;}
.package-empty-card i{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#fff7ed;color:#f97316;font-size:24px;}
.package-empty-card strong{font-size:18px;color:#0f172a;}
.package-empty-card span{font-size:13px;color:#64748b;line-height:1.55;}
.package-hero-card{position:relative;overflow:hidden;display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;align-items:center;padding:22px;border-radius:30px;background:linear-gradient(135deg,#2563eb 0%,#14b8a6 100%);box-shadow:0 22px 52px rgba(37,99,235,.24);color:white;}
.package-hero-card:before{content:'';position:absolute;right:-55px;top:-65px;width:180px;height:180px;border-radius:999px;background:rgba(255,255,255,.16);}
.package-hero-card:after{content:'';position:absolute;left:20px;bottom:-80px;width:150px;height:150px;border-radius:999px;background:rgba(255,255,255,.10);}
.package-hero-card>*{position:relative;z-index:1;}
.package-hero-icon{width:70px;height:70px;border-radius:24px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.package-hero-icon i{font-size:32px;color:#fff;}
.package-hero-card span{display:block;font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;opacity:.85;margin-bottom:4px;}
.package-hero-card h5{font-family:'Poppins',sans-serif;font-size:24px;font-weight:950;letter-spacing:-.55px;margin:0 0 4px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.package-hero-card p{margin:0;font-size:13px;line-height:1.5;font-weight:650;opacity:.9;}
.package-section-card{padding:20px;border-radius:28px;background:rgba(255,255,255,.96);border:1px solid #e2e8f0;box-shadow:0 18px 45px rgba(15,23,42,.075);}
.package-section-title{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:16px;}
.package-section-title>i{width:48px;height:48px;border-radius:17px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff,#ecfdf5);color:#2563eb;font-size:21px;box-shadow:0 12px 24px rgba(37,99,235,.10);}
.package-section-title strong{display:block;font-family:'Poppins',sans-serif;font-size:18px;font-weight:950;color:#0f172a;letter-spacing:-.25px;}
.package-section-title span{display:block;font-size:12px;color:#64748b;font-weight:700;line-height:1.4;margin-top:2px;}
.package-quota-list{display:grid;gap:12px;}
.package-quota-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px;border-radius:22px;border:1px solid #e2e8f0;background:#f8fafc;}
.package-quota-row.admin{background:linear-gradient(135deg,#eff6ff,#ffffff);border-color:#dbeafe;}
.package-quota-row.staff{background:linear-gradient(135deg,#ecfdf5,#ffffff);border-color:#ccfbf1;}
.package-quota-main b{display:block;font-family:'Poppins',sans-serif;font-size:17px;font-weight:950;color:#0f172a;line-height:1.25;}
.package-quota-main span{display:block;margin-top:4px;font-size:13px;font-weight:800;color:#64748b;}
.package-quota-badge{padding:10px 12px;border-radius:999px;background:white;border:1px solid #e2e8f0;color:#334155;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 8px 18px rgba(15,23,42,.05);}
.package-expiry-card.safe{border-color:#bbf7d0;background:linear-gradient(135deg,#f0fdf4,#ffffff);}
.package-expiry-card.danger{border-color:#fecaca;background:linear-gradient(135deg,#fff1f2,#ffffff);}
.package-expiry-date{padding:18px;border-radius:22px;font-family:'Poppins',sans-serif;font-size:24px;font-weight:950;letter-spacing:-.45px;text-align:center;border:1px solid currentColor;background:white;box-shadow:0 14px 28px rgba(15,23,42,.05);}
.package-expiry-date.safe{color:#16a34a;}
.package-expiry-date.danger{color:#dc2626;}
.package-expiry-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:850;line-height:1.4;text-align:center;}
.package-expiry-note.safe{color:#15803d;}
.package-expiry-note.danger{color:#b91c1c;}
@media(max-width:575.98px){
  .package-page-wrap{gap:14px;margin-bottom:96px;}
  .package-hero-card{grid-template-columns:58px minmax(0,1fr);gap:13px;padding:18px;border-radius:26px;}
  .package-hero-icon{width:58px;height:58px;border-radius:20px;}
  .package-hero-icon i{font-size:27px;}
  .package-hero-card h5{font-size:20px;}
  .package-section-card{padding:16px;border-radius:24px;}
  .package-section-title{grid-template-columns:42px minmax(0,1fr);gap:10px;margin-bottom:14px;}
  .package-section-title>i{width:42px;height:42px;border-radius:15px;font-size:18px;}
  .package-section-title strong{font-size:16px;}
  .package-quota-row{grid-template-columns:1fr;gap:10px;padding:14px;border-radius:20px;}
  .package-quota-badge{width:100%;text-align:center;white-space:normal;}
  .package-expiry-date{font-size:20px;padding:16px 10px;}
}


/* v1.1.4 - Info Hutang Piutang Aktif di Beranda */
.dashboard-debt-ticker{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin:2px 0 16px;
  padding:8px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(239,68,68,.16);
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  overflow:hidden;
  cursor:pointer;
  color:#334155;
  -webkit-tap-highlight-color:transparent;
}
.dashboard-debt-ticker:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(15,23,42,.08); }
.debt-ticker-icon{
  flex:0 0 auto;
  width:25px;
  height:25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#ef4444 0%,#f97316 55%,#fb7185 100%);
  color:#fff;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(239,68,68,.25), inset 0 1px 0 rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.64);
  position:relative;
  overflow:hidden;
}
.debt-ticker-icon:after{
  content:"";
  position:absolute;
  inset:3px 3px auto auto;
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
}
.debt-ticker-icon i{
  position:relative;
  z-index:1;
  font-size:13px;
  font-weight:900;
  line-height:1;
}
.debt-ticker-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.debt-ticker-track{
  display:inline-block;
  padding-left:100%;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:#475569;
  animation: debtTickerRun 16s linear infinite;
}
.dashboard-debt-ticker:hover .debt-ticker-track{ animation-play-state:paused; }
@keyframes debtTickerRun{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
@media (min-width:992px){
  .dashboard-debt-ticker{ margin-top:0; margin-bottom:18px; padding:9px 14px; }
  .debt-ticker-track{ font-size:12px; }
}


/* v1.1.8: Tombol export laporan CSV/PDF premium */
.report-export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.report-export-btn{background:#f8fafc!important;color:#0f172a!important;font-weight:800!important;border-radius:12px!important;padding:9px 12px!important;box-shadow:0 8px 20px rgba(15,23,42,.06);}
.report-export-btn.csv i{color:#059669;}
.report-export-btn.pdf i{color:#dc2626;}
.report-export-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.10);}
@media(max-width:575.98px){.report-export-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.report-export-btn{width:100%;justify-content:center;font-size:12px!important;padding:10px 8px!important}.card-header-custom:has(.report-export-actions){align-items:flex-start;gap:10px;flex-wrap:wrap}}

/* v1.1.9 - Mode Gelap / Dark Mode */
html.dark-mode,
body.dark-mode {
  color-scheme: dark;
}
html.dark-mode body,
body.dark-mode {
  background:#020617 !important;
  color:#e5e7eb !important;
}
body.dark-mode {
  --dark:#f8fafc;
  --light:#0f172a;
  --shadow-sm:0 6px 16px rgba(0,0,0,.35);
  --shadow:0 14px 34px rgba(0,0,0,.38);
  --shadow-lg:0 24px 60px rgba(0,0,0,.48);
}
body.dark-mode .splash-screen,
html.dark-mode .splash-screen {
  background:#020617 !important;
}
body.dark-mode .splash-screen h1,
html.dark-mode .splash-screen h1 { color:#f8fafc !important; }
body.dark-mode .splash-screen p,
html.dark-mode .splash-screen p { color:#94a3b8 !important; }
body.dark-mode .login-page,
html.dark-mode .login-page {
  background: linear-gradient(135deg,#020617 0%,#0f172a 44%,#0f766e 100%) !important;
}
html.dark-mode .login-card {
  background:#0f172a !important;
  color:#e5e7eb !important;
  border:1px solid rgba(148,163,184,.20) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.48) !important;
}
body.dark-mode .login-theme-toggle,
html.dark-mode .login-theme-toggle {
  background: rgba(15,23,42,.12) !important;
  border: 0 !important;
  outline: none !important;
  color:#fde68a !important;
  box-shadow:none !important;
}
body.dark-mode .login-theme-toggle:hover,
html.dark-mode .login-theme-toggle:hover {
  background: rgba(30,41,59,.22) !important;
}
body.dark-mode .app-wrap,
body.dark-mode .main-content,
body.dark-mode .content-area {
  background:#020617 !important;
}
body.dark-mode .login-card,
body.dark-mode .sidebar,
body.dark-mode .topbar,
body.dark-mode .card-custom,
body.dark-mode .stat-card,
body.dark-mode .account-mobile-card,
body.dark-mode .list-group-custom,
body.dark-mode .swal2-popup,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.42) !important;
}
body.dark-mode .mobile-drawer-panel {
  background:rgba(15,23,42,.92) !important;
  border-right-color:rgba(148,163,184,.22) !important;
  box-shadow:24px 0 60px rgba(0,0,0,.45) !important;
}
body.dark-mode .mobile-drawer-overlay { background:rgba(2,6,23,.58) !important; }
body.dark-mode .bottom-nav {
  background:rgba(15,23,42,.94) !important;
  border-top-color:rgba(148,163,184,.20) !important;
  box-shadow:0 -14px 35px rgba(0,0,0,.45) !important;
}
body.dark-mode .fab { border-color:#0f172a !important; }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .page-title,
body.dark-mode .stat-card .value,
body.dark-mode .card-header-custom h6,
body.dark-mode .login-logo h2,
body.dark-mode .sidebar-header h5,
body.dark-mode .mobile-drawer-brand-copy h5,
body.dark-mode .account-menu-main,
body.dark-mode .swal2-title,
body.dark-mode .fw-bold,
body.dark-mode strong {
  color:#f8fafc !important;
}
body.dark-mode p,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .text-muted,
body.dark-mode .stat-card .label,
body.dark-mode .sidebar-header small,
body.dark-mode .mobile-drawer-brand-copy small,
body.dark-mode .mobile-drawer-brand-copy span,
body.dark-mode .mobile-drawer-version,
body.dark-mode .mobile-drawer-copyright,
body.dark-mode .account-mobile-version,
body.dark-mode .swal2-html-container,
body.dark-mode .form-text {
  color:#94a3b8 !important;
}
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode .input-group-text,
body.dark-mode input[type="file"] {
  background:#111827 !important;
  color:#e5e7eb !important;
  border-color:#334155 !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode textarea:focus {
  background:#0b1220 !important;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(96,165,250,.16) !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder { color:#64748b !important; }
body.dark-mode .login-card .form-floating > .form-control::placeholder,
html.dark-mode .login-card .form-floating > .form-control::placeholder { color: transparent !important; opacity:0 !important; }
body.dark-mode .login-card .form-floating > label,
html.dark-mode .login-card .form-floating > label { color:#ffffff !important; }
body.dark-mode .login-card .form-floating > label::after,
html.dark-mode .login-card .form-floating > label::after {
  background: transparent !important;
  box-shadow: none !important;
}
body.dark-mode .login-card .form-floating > .form-control:-webkit-autofill,
html.dark-mode .login-card .form-floating > .form-control:-webkit-autofill {
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffffff !important;
  -webkit-box-shadow:0 0 0 1000px #111827 inset !important;
  box-shadow:0 0 0 1000px #111827 inset !important;
}
body.dark-mode .list-group-item,
body.dark-mode .account-mobile-list .list-group-item,
body.dark-mode .mobile-drawer-link,
body.dark-mode .mobile-drawer-footer-link,
body.dark-mode .mobile-drawer-sublink,
body.dark-mode .sidebar-menu a,
body.dark-mode .sidebar-submenu-toggle,
body.dark-mode .sidebar-version-label,
body.dark-mode .filter-chip,
body.dark-mode .badge-soft,
body.dark-mode .btn-light {
  background:#111827 !important;
  color:#cbd5e1 !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .list-group-item:hover,
body.dark-mode .mobile-drawer-link:hover,
body.dark-mode .mobile-drawer-link.active,
body.dark-mode .mobile-drawer-footer-link:hover,
body.dark-mode .sidebar-menu a:hover,
body.dark-mode .sidebar-submenu-toggle:hover,
body.dark-mode .filter-chip:hover {
  background:#1e293b !important;
  color:#93c5fd !important;
}
body.dark-mode .sidebar-menu a.active,
body.dark-mode .bottom-nav a.active,
body.dark-mode .filter-chip.active {
  color:#ffffff !important;
}
body.dark-mode .mobile-drawer-link i:first-child,
body.dark-mode .mobile-drawer-footer-link i:first-child,
body.dark-mode .mobile-drawer-sublink i,
body.dark-mode .sidebar-header .logo,
body.dark-mode .mobile-drawer-logo,
body.dark-mode .account-menu-icon {
  background:#1e293b !important;
  color:#93c5fd !important;
}
body.dark-mode .table-custom th {
  background:#111827 !important;
  color:#cbd5e1 !important;
  border-bottom-color:#334155 !important;
}
body.dark-mode .table-custom td {
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-bottom-color:rgba(148,163,184,.16) !important;
}
body.dark-mode .table-custom tr:hover td { background:#111827 !important; }
body.dark-mode .table-responsive,
body.dark-mode .card-header-custom,
body.dark-mode hr,
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom {
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body,
body.dark-mode .bg-body-tertiary {
  background-color:#0f172a !important;
  color:#e5e7eb !important;
}
body.dark-mode .text-dark { color:#f8fafc !important; }
body.dark-mode .text-secondary { color:#94a3b8 !important; }
body.dark-mode .alert,
body.dark-mode .toast,
body.dark-mode .debt-alert-ticker,
body.dark-mode .payment-proof-card,
body.dark-mode .tenant-package-card,
body.dark-mode .report-export-card,
body.dark-mode .about-card,
body.dark-mode .register-hero {
  background:#111827 !important;
  color:#e5e7eb !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .swal2-popup .swal2-close { color:#94a3b8 !important; }
body.dark-mode .swal2-actions { background:#0f172a !important; border-color:rgba(148,163,184,.18) !important; }
body.dark-mode .swal2-cancel { background:#1e293b !important; color:#e5e7eb !important; border-color:#334155 !important; }
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-primary {
  border-color:#475569 !important;
  color:#cbd5e1 !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-primary:hover {
  background:#1e293b !important;
  color:#fff !important;
}
body.dark-mode .chart-container,
body.dark-mode canvas {
  color:#e5e7eb !important;
}
body.dark-mode .theme-mode-toggle .dark-mode-icon {
  color:#fbbf24 !important;
}
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus {
  -webkit-text-fill-color:#e5e7eb !important;
  -webkit-box-shadow:0 0 0px 1000px #111827 inset !important;
}

/* v1.1.12 - Foto profil dark mode dan navigasi langsung sumber nominal Beranda */
.profile-photo-wrap.has-photo { background:#0f172a; }
.profile-photo-wrap.has-photo .profile-photo,
.profile-photo:not(.d-none) {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:3;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:#fff;
}
.profile-photo-wrap.has-photo #profileAvatar { display:none !important; }
body.dark-mode .profile-photo-wrap.has-photo {
  background:#111827 !important;
  box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(148,163,184,.18) inset !important;
}
body.dark-mode .profile-photo-wrap.has-photo .profile-photo,
body.dark-mode .profile-upload-photo img {
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
#myBalanceMobile,
#balanceMobile,
#bannerMyBalance,
#bannerTotalBalance,
#statTransferOut,
#statTransferIn,
#statIncome,
#statExpense {
  cursor:pointer;
  touch-action:manipulation;
}
#myBalanceMobile:hover,
#balanceMobile:hover,
#bannerMyBalance:hover,
#bannerTotalBalance:hover,
#statTransferOut:hover,
#statTransferIn:hover,
#statIncome:hover,
#statExpense:hover {
  filter:brightness(1.05);
}
.dashboard-nominal-popup { max-width:480px !important; }
.dashboard-nominal-detail { margin-top:18px; }
.dashboard-nominal-hero {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(20,184,166,.12));
  border:1px solid rgba(37,99,235,.14);
  margin-bottom:14px;
}
.dashboard-nominal-hero.success { background:linear-gradient(135deg, rgba(16,185,129,.14), rgba(20,184,166,.12)); border-color:rgba(16,185,129,.18); }
.dashboard-nominal-hero.danger { background:linear-gradient(135deg, rgba(239,68,68,.13), rgba(249,115,22,.10)); border-color:rgba(239,68,68,.18); }
.dashboard-nominal-hero.info { background:linear-gradient(135deg, rgba(14,165,233,.13), rgba(37,99,235,.10)); border-color:rgba(14,165,233,.18); }
.dashboard-nominal-icon {
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  box-shadow:0 12px 24px rgba(37,99,235,.20);
  font-size:24px;
  flex-shrink:0;
}
.dashboard-nominal-hero small { display:block; font-size:11px; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px; }
.dashboard-nominal-hero strong { display:block; font-size:26px; line-height:1.05; font-family:'Poppins',sans-serif; font-weight:900; color:#0f172a; letter-spacing:-.8px; }
.dashboard-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.dashboard-detail-grid > div,
.dashboard-category-source {
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:12px;
}
.dashboard-detail-grid span,
.dashboard-category-source span { display:block; font-size:11px; color:#64748b; font-weight:800; margin-bottom:5px; }
.dashboard-detail-grid strong,
.dashboard-category-source strong { display:block; font-size:13px; color:#0f172a; font-weight:900; line-height:1.3; word-break:break-word; }
.dashboard-category-source { margin-bottom:14px; }
.dashboard-category-title { font-size:12px; font-weight:900; color:#475569; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.dashboard-category-source > div:not(.dashboard-category-title) { display:flex; justify-content:space-between; gap:10px; border-top:1px dashed #e2e8f0; padding-top:8px; margin-top:8px; }
.dashboard-category-source > div:not(.dashboard-category-title):first-of-type { border-top:0; padding-top:0; margin-top:0; }
.dashboard-category-source > div:not(.dashboard-category-title) span { margin-bottom:0; }
.dashboard-source-btn {
  width:100%;
  border:0;
  border-radius:18px;
  padding:14px 16px;
  font-family:'Poppins',sans-serif;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  box-shadow:0 14px 28px rgba(37,99,235,.22);
}
.dashboard-source-btn:active { transform:scale(.98); }
body.dark-mode .dashboard-nominal-hero,
body.dark-mode .dashboard-detail-grid > div,
body.dark-mode .dashboard-category-source {
  background:#111827 !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .dashboard-nominal-hero strong,
body.dark-mode .dashboard-detail-grid strong,
body.dark-mode .dashboard-category-source strong,
body.dark-mode .dashboard-category-title { color:#f8fafc !important; }
body.dark-mode .dashboard-nominal-hero small,
body.dark-mode .dashboard-detail-grid span,
body.dark-mode .dashboard-category-source span { color:#94a3b8 !important; }
body.dark-mode .dashboard-category-source > div:not(.dashboard-category-title) { border-top-color:rgba(148,163,184,.18) !important; }
@media(max-width:575.98px){
  .dashboard-detail-grid{grid-template-columns:1fr; gap:8px;}
  .dashboard-nominal-hero strong{font-size:24px;}
  .dashboard-nominal-icon{width:50px;height:50px;border-radius:16px;}
}

/* v1.1.11 - Popup rincian nominal Beranda dibuat lebih premium */
.dashboard-nominal-popup-premium {
  width:min(94vw, 520px) !important;
  max-width:520px !important;
  padding:0 !important;
  border-radius:34px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.28) !important;
}
.dashboard-nominal-popup-premium .swal2-html-container {
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.dashboard-nominal-popup-premium .swal2-close {
  top:14px !important;
  right:16px !important;
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  color:#64748b !important;
  background:rgba(248,250,252,.88) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
  backdrop-filter:blur(12px);
}
.dashboard-nominal-premium {
  margin:0 !important;
  padding:22px;
}
.dashboard-premium-head {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:96px;
  padding:18px 54px 18px 18px;
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#2563eb 0%,#14b8a6 100%);
  box-shadow:0 20px 45px rgba(37,99,235,.24);
}
.dashboard-premium-head::before {
  content:'';
  position:absolute;
  right:-45px;
  top:-55px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.dashboard-premium-head::after {
  content:'';
  position:absolute;
  left:-32px;
  bottom:-42px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.dashboard-premium-head.success { background:linear-gradient(135deg,#059669 0%,#14b8a6 100%); box-shadow:0 20px 45px rgba(16,185,129,.22); }
.dashboard-premium-head.danger { background:linear-gradient(135deg,#ef4444 0%,#f97316 100%); box-shadow:0 20px 45px rgba(239,68,68,.22); }
.dashboard-premium-head.info { background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%); box-shadow:0 20px 45px rgba(14,165,233,.22); }
.dashboard-premium-icon {
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 32px rgba(15,23,42,.16);
  flex-shrink:0;
}
.dashboard-premium-title { position:relative; z-index:1; min-width:0; }
.dashboard-premium-title span {
  display:block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
  opacity:.82;
  margin-bottom:2px;
}
.dashboard-premium-title strong {
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:20px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.5px;
  word-break:break-word;
}
.dashboard-premium-title small {
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  opacity:.82;
  line-height:1.25;
}
.dashboard-nominal-premium .dashboard-nominal-hero {
  margin:16px 0 14px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  border:1px solid rgba(37,99,235,.13) !important;
  box-shadow:0 18px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.dashboard-nominal-premium .dashboard-nominal-hero small {
  font-size:11px;
  font-weight:900;
  color:#64748b;
  letter-spacing:.9px;
}
.dashboard-nominal-premium .dashboard-nominal-hero strong {
  margin-top:2px;
  font-size:32px;
  color:#0f172a;
  letter-spacing:-1.2px;
}
.dashboard-period-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}
.premium-grid { gap:11px; }
.dashboard-nominal-premium .dashboard-detail-grid > div,
.dashboard-nominal-premium .premium-source-card {
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(226,232,240,.92);
  box-shadow:0 12px 28px rgba(15,23,42,.055);
}
.dashboard-nominal-premium .dashboard-detail-grid span,
.dashboard-nominal-premium .dashboard-category-source span {
  color:#718096;
  letter-spacing:.4px;
}
.dashboard-nominal-premium .dashboard-detail-grid strong,
.dashboard-nominal-premium .dashboard-category-source strong {
  font-size:14px;
}
.dashboard-nominal-premium .dashboard-category-title {
  display:flex;
  align-items:center;
  gap:8px;
  color:#334155;
  margin-bottom:10px;
}
.dashboard-category-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  border-top:1px dashed #e5e7eb;
  padding-top:10px;
  margin-top:10px;
}
.dashboard-category-row span {
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  min-width:0;
}
.dashboard-category-row span em {
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-style:normal;
  color:#2563eb;
  background:#eff6ff;
  font-size:11px;
  font-weight:900;
}
.dashboard-category-row strong {
  text-align:right;
  white-space:nowrap;
}
.dashboard-latest-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-top:1px dashed #e5e7eb;
}
.dashboard-latest-row:first-of-type { border-top:0; padding-top:0; }
.dashboard-latest-row div { min-width:0; }
.dashboard-latest-row strong {
  display:block;
  font-size:13px;
  color:#0f172a;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:210px;
}
.dashboard-latest-row span {
  display:block;
  font-size:11px;
  color:#64748b;
  font-weight:800;
  margin-top:3px;
}
.dashboard-latest-row b {
  flex-shrink:0;
  font-size:13px;
  font-weight:900;
  text-align:right;
}
.dashboard-latest-row b.income { color:#059669; }
.dashboard-latest-row b.expense { color:#dc2626; }
.dashboard-empty-source {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.dashboard-empty-source i { color:#2563eb; font-size:18px; }
.premium-source-btn {
  min-height:54px;
  border-radius:22px;
  margin-top:2px;
  box-shadow:0 18px 42px rgba(37,99,235,.24);
  position:relative;
  overflow:hidden;
}
.premium-source-btn::after {
  content:'';
  position:absolute;
  top:-50%;
  left:-25%;
  width:50%;
  height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:rotate(18deg);
}
body.dark-mode .dashboard-nominal-popup-premium {
  background:linear-gradient(180deg,#111827 0%,#0b1120 100%) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55) !important;
}
body.dark-mode .dashboard-nominal-popup-premium .swal2-close {
  color:#cbd5e1 !important;
  background:rgba(15,23,42,.82) !important;
}
body.dark-mode .dashboard-nominal-premium .dashboard-nominal-hero,
body.dark-mode .dashboard-nominal-premium .dashboard-detail-grid > div,
body.dark-mode .dashboard-nominal-premium .premium-source-card {
  background:#111827 !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}
body.dark-mode .dashboard-nominal-premium .dashboard-nominal-hero strong,
body.dark-mode .dashboard-latest-row strong { color:#f8fafc !important; }
body.dark-mode .dashboard-period-pill,
body.dark-mode .dashboard-empty-source {
  background:#0f172a;
  color:#cbd5e1;
}
body.dark-mode .dashboard-category-row,
body.dark-mode .dashboard-latest-row { border-top-color:rgba(148,163,184,.18); }
body.dark-mode .dashboard-category-row span em { color:#93c5fd; background:rgba(37,99,235,.18); }
@media(max-width:575.98px){
  .dashboard-nominal-popup-premium { width:calc(100vw - 24px) !important; border-radius:30px !important; }
  .dashboard-nominal-premium { padding:18px; }
  .dashboard-premium-head { min-height:92px; padding:16px 50px 16px 16px; border-radius:25px; }
  .dashboard-premium-icon { width:52px; height:52px; border-radius:18px; font-size:24px; }
  .dashboard-premium-title strong { font-size:18px; }
  .dashboard-nominal-premium .dashboard-nominal-hero strong { font-size:29px; }
  .dashboard-latest-row strong { max-width:150px; }
  .dashboard-category-row { align-items:center; }
}


/* v1.1.12 - Card Beranda langsung menuju sumber riwayat, popup dinonaktifkan */
.dashboard-source-card { cursor:pointer; }
.dashboard-source-card:focus { outline:none; box-shadow:0 0 0 3px rgba(102,126,234,.18), var(--shadow-lg); }
.dashboard-source-card::after { content:'Lihat sumber'; position:absolute; right:14px; bottom:12px; font-size:10px; font-weight:800; letter-spacing:.35px; color:#94a3b8; opacity:0; transform:translateY(4px); transition:.2s ease; }
.dashboard-source-card:hover::after, .dashboard-source-card:focus::after { opacity:1; transform:translateY(0); }
body.dark-mode .dashboard-source-card::after { color:#94a3b8; }
@media (max-width: 768px){ .dashboard-source-card::after { display:none; } }


/* v1.1.13: Card Dompet Pribadi & Total Kas Bersama langsung menuju halaman Saldo */
.dashboard-balance-card{cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.dashboard-balance-card:hover{transform:translateY(-1px); filter:brightness(1.03);}
.dashboard-balance-card:active{transform:scale(.992);}
.dashboard-balance-card:focus-visible{outline:2px solid rgba(255,255,255,.9); outline-offset:3px;}

/* v1.1.14: Icon Transfer Masuk Bulan Ini dibuat lebih kontras di Mode Gelap */
.stat-card.savings .transfer-in-icon {
  background: linear-gradient(135deg, #22c55e 0%, #14b8a6 52%, #0ea5e9 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(20, 184, 166, 0.30), inset 0 1px 0 rgba(255,255,255,0.35);
}
.stat-card.savings .transfer-in-icon i {
  color: #ffffff !important;
  filter: drop-shadow(0 2px 3px rgba(15,23,42,0.28));
}
body.dark-mode .stat-card.savings .transfer-in-icon,
html.dark-mode .stat-card.savings .transfer-in-icon,
[data-theme="dark"] .stat-card.savings .transfer-in-icon {
  background: linear-gradient(135deg, #34d399 0%, #2dd4bf 48%, #38bdf8 100%) !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 26px rgba(45, 212, 191, 0.26), 0 0 0 4px rgba(45,212,191,0.09), inset 0 1px 0 rgba(255,255,255,0.42);
}


/* v1.1.15 - Perbaikan foto profil agar tetap muncul di Mode Gelap */
.topbar .user-chip .avatar.has-photo {
  color:transparent !important;
  overflow:hidden !important;
  background-color:#0f172a !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  box-shadow:0 8px 18px rgba(15,23,42,.18);
}
body.dark-mode .topbar .user-chip .avatar.has-photo {
  background-color:#111827 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.42), 0 0 0 1px rgba(148,163,184,.20) inset !important;
}
.profile-photo-wrap.has-photo {
  overflow:hidden !important;
  isolation:isolate !important;
}
.profile-photo-wrap.has-photo .profile-photo {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:#fff !important;
}
.profile-photo-wrap.has-photo .profile-photo-edit { z-index:20 !important; }
.profile-photo-wrap.has-photo #profileAvatar { display:none !important; visibility:hidden !important; opacity:0 !important; }
body.dark-mode .profile-photo-wrap.has-photo .profile-photo {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:#111827 !important;
}
body.dark-mode #profilePhoto.profile-photo:not(.d-none),
html.dark-mode #profilePhoto.profile-photo:not(.d-none) {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}


/* v1.1.16 - Foto profil dibuat lebih kuat: img asli + fallback URL + refresh dari server */
.topbar .user-chip .avatar.has-photo,
body.dark-mode .topbar .user-chip .avatar.has-photo,
html.dark-mode .topbar .user-chip .avatar.has-photo {
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
  background-color: #0f172a !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.topbar .user-chip .avatar.has-photo .avatar-photo-img,
body.dark-mode .topbar .user-chip .avatar.has-photo .avatar-photo-img,
html.dark-mode .topbar .user-chip .avatar.has-photo .avatar-photo-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 3 !important;
}
body.dark-mode .profile-photo-wrap,
html.dark-mode .profile-photo-wrap {
  background: linear-gradient(135deg,#1e293b,#0f172a) !important;
}
#profilePhoto.profile-photo,
body.dark-mode #profilePhoto.profile-photo,
html.dark-mode #profilePhoto.profile-photo {
  color: transparent !important;
  -webkit-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.profile-photo-wrap.has-photo::before,
.profile-photo-wrap.has-photo::after {
  pointer-events: none !important;
}


/* v1.1.18 - Perbaikan foto profil mobile dan icon kamera desktop */
/* Kamera desktop sebelumnya terpotong karena wrapper foto dipaksa overflow hidden.
   Wrapper dibuat visible, sedangkan foto tetap menjaga bentuk lewat radius dan object-fit. */
.profile-photo-wrap.has-photo,
body.dark-mode .profile-photo-wrap.has-photo,
html.dark-mode .profile-photo-wrap.has-photo {
  overflow: visible !important;
  isolation: isolate !important;
}
.profile-photo-wrap.has-photo .profile-photo,
body.dark-mode .profile-photo-wrap.has-photo .profile-photo,
html.dark-mode .profile-photo-wrap.has-photo .profile-photo {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  z-index: 2 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.profile-photo-edit,
.profile-photo-wrap.has-photo .profile-photo-edit {
  right: -6px !important;
  bottom: -6px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  z-index: 30 !important;
  overflow: visible !important;
}
.profile-photo-edit i {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (min-width: 992px) {
  .profile-photo-edit {
    display: inline-flex !important;
  }
}

/* v1.29.20 - Popup premium lihat bukti upload Riwayat Transaksi. */
.swal2-popup.proof-preview-premium {
  width: min(94vw, 720px) !important;
  padding: 3px !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #dbeafe, #ccfbf1) !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.24) !important;
}
.proof-preview-premium .swal2-close {
  top: 13px !important;
  right: 13px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.90) !important;
  color: #334155 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}
.proof-preview-premium .proof-preview-html {
  margin: 0 !important;
  padding: 0 !important;
}
.proof-premium-shell {
  width: 100%;
  padding: 18px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f172a;
  text-align: left;
}
.proof-premium-head {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding-right: 42px;
}
.proof-premium-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}
.proof-premium-heading {
  min-width: 0;
}
.proof-premium-heading small,
.proof-premium-heading strong,
.proof-premium-heading span {
  display: block;
}
.proof-premium-heading small {
  color: #0d9488;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.proof-premium-heading strong {
  margin-top: 2px;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}
.proof-premium-heading span {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proof-premium-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.proof-premium-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: rgba(248,250,252,.86);
}
.proof-premium-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}
.proof-premium-meta span:last-child {
  margin-left: auto;
  overflow-wrap: anywhere;
  text-align: right;
}
.proof-premium-meta i {
  color: #0d9488;
}
.proof-preview-stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%),
    #ffffff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.proof-preview-premium .proof-preview-img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}
.proof-preview-premium .proof-preview-frame {
  width: 100%;
  height: min(62vh, 620px);
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}
.proof-preview-note {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.proof-premium-actions {
  margin-top: 12px;
}
.proof-open-original {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #2563eb, #0f766e);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 15px 32px rgba(37,99,235,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}
.proof-open-original:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(37,99,235,.28);
}
body.dark-mode .swal2-popup.proof-preview-premium,
html.dark-mode body .swal2-popup.proof-preview-premium {
  border-color: rgba(125,211,252,.20) !important;
  background: linear-gradient(135deg, #164e63, #1e3a8a) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.62) !important;
}
body.dark-mode .proof-premium-shell,
html.dark-mode body .proof-premium-shell {
  background:
    radial-gradient(circle at 100% 0%, rgba(45,212,191,.12), transparent 30%),
    linear-gradient(180deg, #071225 0%, #020617 100%) !important;
  color: #f8fafc;
}
body.dark-mode .proof-preview-premium .swal2-close,
html.dark-mode body .proof-preview-premium .swal2-close {
  border-color: rgba(125,211,252,.18) !important;
  background: rgba(15,23,42,.88) !important;
  color: #dff6ff !important;
}
body.dark-mode .proof-premium-heading strong,
html.dark-mode body .proof-premium-heading strong {
  color: #f8fbff;
}
body.dark-mode .proof-premium-heading small,
html.dark-mode body .proof-premium-heading small {
  color: #5eead4;
}
body.dark-mode .proof-premium-heading span,
body.dark-mode .proof-premium-meta span,
body.dark-mode .proof-preview-note,
html.dark-mode body .proof-premium-heading span,
html.dark-mode body .proof-premium-meta span,
html.dark-mode body .proof-preview-note {
  color: #9fb6d5 !important;
}
body.dark-mode .proof-premium-type,
html.dark-mode body .proof-premium-type {
  border-color: rgba(125,211,252,.22);
  background: rgba(14,165,233,.14);
  color: #bae6fd;
}
body.dark-mode .proof-premium-meta,
html.dark-mode body .proof-premium-meta {
  border-color: rgba(125,211,252,.14);
  background: rgba(15,23,42,.76);
}
body.dark-mode .proof-preview-stage,
html.dark-mode body .proof-preview-stage {
  border-color: rgba(125,211,252,.16);
  background:
    linear-gradient(45deg, rgba(30,41,59,.64) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(30,41,59,.64) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(30,41,59,.64) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(30,41,59,.64) 75%),
    #071225;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
@media (max-width: 576px) {
  .swal2-popup.proof-preview-premium {
    width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
    border-radius: 24px !important;
  }
  .proof-premium-shell {
    padding: 14px;
    border-radius: 21px;
  }
  .proof-premium-head {
    grid-template-columns: 46px minmax(0,1fr);
    gap: 10px;
    padding-right: 38px;
  }
  .proof-premium-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 20px;
  }
  .proof-premium-heading strong {
    font-size: 16px;
  }
  .proof-premium-type {
    grid-column: 1 / -1;
    width: max-content;
    margin-top: 2px;
  }
  .proof-premium-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .proof-premium-meta span:last-child {
    margin-left: 0;
    text-align: left;
  }
  .proof-preview-stage {
    min-height: 210px;
    padding: 5px;
    border-radius: 15px;
  }
  .proof-preview-premium .proof-preview-img {
    max-height: 58vh;
    border-radius: 11px;
  }
  .proof-preview-premium .proof-preview-frame {
    height: 58vh;
    border-radius: 11px;
  }
}
@media (max-width: 991px) {
  /* Akun mobile tidak lagi ditarik ke atas agar foto profil tidak keluar viewport. */
  body[data-page="profil"] .content-area {
    padding-top: 14px !important;
  }
  #page-profil {
    margin-top: 0 !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    padding-bottom: 112px !important;
  }
  #page-profil .profile-hero {
    position: relative !important;
    z-index: 5 !important;
    padding-top: 4px !important;
    margin-bottom: 12px !important;
  }
  #page-profil .profile-photo-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    width: 96px !important;
    height: 96px !important;
  }
  #page-profil .profile-photo-wrap.has-photo .profile-photo,
  body.dark-mode #page-profil .profile-photo-wrap.has-photo .profile-photo,
  html.dark-mode #page-profil .profile-photo-wrap.has-photo .profile-photo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    border-radius: 28px !important;
  }
  #page-profil .profile-photo-wrap.has-photo #profileAvatar {
    display: none !important;
  }
  /* Di mobile kamera tetap disembunyikan seperti desain sebelumnya, upload tetap lewat menu Profil Saya. */
  #page-profil .profile-photo-edit {
    display: none !important;
  }
}

/* v1.1.25 - Audit semua halaman: layout Akun mobile dibuat ringan, normal-flow, dan tidak menimpa menu lain */
@media (max-width: 991px) {
  /* Semua halaman tetap satu-satu: hanya section aktif yang boleh tampil. */
  .page-section:not(.active) {
    display: none !important;
  }

  /* Reset halaman Akun: tidak memakai fixed panel/overlay agar tidak berat dan tidak menimpa menu lain. */
  body[data-page="profil"],
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #eef3f8 !important;
  }
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    background: #020617 !important;
  }

  body[data-page="profil"] .mobile-header,
  body.dark-mode[data-page="profil"] .mobile-header,
  html.dark-mode body[data-page="profil"] .mobile-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="profil"] .main-content,
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content {
    margin-left: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #eef3f8 !important;
  }
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content {
    background: #020617 !important;
  }

  body[data-page="profil"] .content-area,
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom)) 14px !important;
    overflow: visible !important;
    background: #eef3f8 !important;
    z-index: auto !important;
  }
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    background: #020617 !important;
  }

  body[data-page="profil"] #page-profil,
  body[data-page="profil"] #page-profil.active,
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    background: transparent !important;
    animation: none !important;
  }

  body[data-page="profil"] #page-profil .profile-hero,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
    background: transparent !important;
  }

  body[data-page="profil"] #page-profil .profile-photo-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    width: 100px !important;
    height: 100px !important;
    border-radius: 30px !important;
    margin: 0 auto 10px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: 0 14px 28px rgba(37,99,235,.18) !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(148,163,184,.16) inset !important;
  }

  body[data-page="profil"] #page-profil .profile-photo,
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body[data-page="profil"] #page-profil .profile-photo-edit {
    display: none !important;
  }

  body[data-page="profil"] #page-profil .profile-hero h4,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero h4,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero h4 {
    margin: 6px 0 5px 0 !important;
    line-height: 1.12 !important;
    font-size: clamp(19px, 5vw, 22px) !important;
    color: #0f172a !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .profile-hero h4,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero h4 {
    color: #f8fafc !important;
  }

  body[data-page="profil"] #page-profil #profileRole {
    margin-top: 3px !important;
    padding: 5px 16px !important;
    line-height: 1.15 !important;
    font-size: 10px !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-card,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    background: #0f172a !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    min-height: 60px !important;
    padding: 11px 14px !important;
    margin-bottom: 5px !important;
    border-radius: 16px !important;
  }

  /* Tombol bawah tetap di atas konten, tetapi tidak dipakai sebagai overlay page. */
  body[data-page="profil"] .bottom-nav,
  body.dark-mode[data-page="profil"] .bottom-nav,
  html.dark-mode body[data-page="profil"] .bottom-nav {
    z-index: 1040 !important;
  }
}

@media (max-width: 380px) {
  body[data-page="profil"] #page-profil .profile-photo-wrap {
    width: 92px !important;
    height: 92px !important;
    border-radius: 28px !important;
  }
  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }
}

/* v1.1.26 - Fokus Akun mobile: layout ideal, ringan, dan aman untuk halaman lain */
@media (max-width: 991px) {
  body[data-page="profil"],
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    background: #eef3f8 !important;
  }
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    background: #020617 !important;
  }

  body[data-page="profil"] .mobile-header,
  body.dark-mode[data-page="profil"] .mobile-header,
  html.dark-mode body[data-page="profil"] .mobile-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="profil"] .main-content,
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content {
    position: relative !important;
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
    background: #eef3f8 !important;
    transform: none !important;
  }
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content {
    background: #020617 !important;
  }

  body[data-page="profil"] .content-area,
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(132px + env(safe-area-inset-bottom)) 12px !important;
    overflow: visible !important;
    background: #eef3f8 !important;
    transform: none !important;
  }
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    background: #020617 !important;
  }

  body[data-page="profil"] #page-profil,
  body[data-page="profil"] #page-profil.active,
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    animation: none !important;
  }

  body[data-page="profil"] #page-profil .profile-hero,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
    transform: none !important;
  }

  body[data-page="profil"] #page-profil .profile-photo-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    position: relative !important;
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 30px !important;
    margin: 0 auto 10px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 14px 28px rgba(37,99,235,.18) !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    background: linear-gradient(135deg,#1e293b,#0f172a) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(148,163,184,.16) inset !important;
  }

  body[data-page="profil"] #page-profil .profile-photo,
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo #profileAvatar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  body[data-page="profil"] #page-profil .profile-photo-edit {
    display: none !important;
  }

  body[data-page="profil"] #page-profil .profile-hero h4,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero h4,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero h4 {
    margin: 4px 0 5px 0 !important;
    line-height: 1.12 !important;
    font-size: clamp(19px, 5vw, 22px) !important;
    letter-spacing: -.35px !important;
    color: #0f172a !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .profile-hero h4,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero h4 {
    color: #f8fafc !important;
  }

  body[data-page="profil"] #page-profil #profileRole,
  body.dark-mode[data-page="profil"] #page-profil #profileRole,
  html.dark-mode body[data-page="profil"] #page-profil #profileRole {
    margin-top: 0 !important;
    padding: 6px 17px !important;
    line-height: 1.15 !important;
    font-size: 10.5px !important;
    max-width: calc(100vw - 70px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-card,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    width: 100% !important;
    margin: 14px 0 0 0 !important;
    border-radius: 24px !important;
    overflow: visible !important;
    background: #ffffff !important;
    box-shadow: 0 12px 34px rgba(15,23,42,.06) !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    background: #0f172a !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    width: 100% !important;
    min-height: 58px !important;
    padding: 11px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 17px !important;
    transform: none !important;
    transition: background .16s ease, color .16s ease, opacity .16s ease !important;
  }
  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item:hover {
    transform: none !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    background: rgba(15,23,42,.86) !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148,163,184,.10) !important;
  }
  body.dark-mode[data-page="profil"] #page-profil .account-menu-main,
  html.dark-mode body[data-page="profil"] #page-profil .account-menu-main {
    color: #f8fafc !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-version,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-version,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-version {
    padding: 8px 16px 2px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  body[data-page="profil"] #page-profil .account-logout-btn,
  body.dark-mode[data-page="profil"] #page-profil .account-logout-btn,
  html.dark-mode body[data-page="profil"] #page-profil .account-logout-btn {
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  body[data-page="profil"] .bottom-nav,
  body.dark-mode[data-page="profil"] .bottom-nav,
  html.dark-mode body[data-page="profil"] .bottom-nav,
  body[data-page="profil"] .fab-wrapper,
  body.dark-mode[data-page="profil"] .fab-wrapper,
  html.dark-mode body[data-page="profil"] .fab-wrapper {
    z-index: 1040 !important;
  }
}

@media (max-width: 991px) and (max-height: 720px) {
  body[data-page="profil"] #page-profil .profile-photo-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    border-radius: 26px !important;
    margin-bottom: 8px !important;
  }
  body[data-page="profil"] #page-profil .profile-photo,
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo {
    border-radius: 26px !important;
  }
  body[data-page="profil"] #page-profil .profile-hero h4 {
    font-size: 19px !important;
  }
  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    min-height: 54px !important;
    padding: 10px 12px !important;
  }
}


/* v1.1.29 - Perbaikan Akun mobile: tidak turun/tersembunyi saat klik Bottom Navigation
   Dibuat sebagai panel viewport ringan khusus halaman Akun agar posisi selalu mulai dari atas,
   tidak mengikuti scroll halaman sebelumnya, dan tetap aman untuk halaman lain. */
@media (max-width: 991px) {
  body[data-page="profil"],
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #eef3f8 !important;
  }
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    background: #020617 !important;
  }

  body[data-page="profil"] .main-content,
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content,
  body[data-page="profil"] .content-area,
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    position: static !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    transform: none !important;
  }

  body[data-page="profil"] #page-profil,
  body[data-page="profil"] #page-profil.active,
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    position: fixed !important;
    inset: 0 0 calc(76px + env(safe-area-inset-bottom)) 0 !important;
    z-index: 80 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top)) 12px 18px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    transform: none !important;
    animation: none !important;
    background: #eef3f8 !important;
    scroll-padding-top: 0 !important;
  }
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    background: #020617 !important;
  }

  body[data-page="profil"] #page-profil::before,
  body.dark-mode[data-page="profil"] #page-profil::before,
  html.dark-mode body[data-page="profil"] #page-profil::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(118px + env(safe-area-inset-top));
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(20,184,166,.08));
  }
  body.dark-mode[data-page="profil"] #page-profil::before,
  html.dark-mode body[data-page="profil"] #page-profil::before {
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(15,23,42,.0));
  }

  body[data-page="profil"] #page-profil .profile-hero,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero {
    max-width: 480px !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    transform: none !important;
    position: relative !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-card,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    max-width: 480px !important;
    margin: 12px auto 0 auto !important;
    overflow: visible !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list {
    gap: 8px !important;
    padding: 10px !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    min-height: 56px !important;
    padding: 10px 14px !important;
    border-radius: 17px !important;
    transform: none !important;
  }

  body[data-page="profil"] .bottom-nav,
  body.dark-mode[data-page="profil"] .bottom-nav,
  html.dark-mode body[data-page="profil"] .bottom-nav,
  body[data-page="profil"] .fab-wrapper,
  body.dark-mode[data-page="profil"] .fab-wrapper,
  html.dark-mode body[data-page="profil"] .fab-wrapper {
    z-index: 1040 !important;
  }
}

@media (max-width: 991px) and (max-height: 720px) {
  body[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }
  body[data-page="profil"] #page-profil .profile-photo-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    border-radius: 26px !important;
    margin-bottom: 7px !important;
  }
  body[data-page="profil"] #page-profil .profile-photo,
  body[data-page="profil"] #page-profil .profile-photo-wrap.has-photo .profile-photo {
    border-radius: 26px !important;
  }
}


/* ============================================================
   v1.1.31 - Penyempurnaan Akun Mobile
   Fokus:
   1) Jarak layar atas ke foto profil = 0.5cm.
   2) Jarak menu Keluar Dari Akun ke Bottom Navigation = 0.5cm.
   3) Jarak tulisan versi ke menu Keluar Dari Akun = 1cm.
   4) Background Akun full layar memakai gradient terang dari bawah,
      semakin pupus ke atas, aman untuk mode terang dan gelap.
   5) Jarak kotak menu Keluar Dari Akun ke bagian bawah kotak menu = 0.3cm.
   Catatan: Override final ini hanya aktif di halaman Akun mobile.
   ============================================================ */
@media (max-width: 991px) {
  body[data-page="profil"],
  body.dark-mode[data-page="profil"],
  html.dark-mode body[data-page="profil"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-page="profil"] .main-content,
  body.dark-mode[data-page="profil"] .main-content,
  html.dark-mode body[data-page="profil"] .main-content,
  body[data-page="profil"] .content-area,
  body.dark-mode[data-page="profil"] .content-area,
  html.dark-mode body[data-page="profil"] .content-area {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body[data-page="profil"] #page-profil,
  body[data-page="profil"] #page-profil.active,
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    position: fixed !important;
    inset: 0 0 calc(75px + env(safe-area-inset-bottom)) 0 !important;
    z-index: 80 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(0.5cm + env(safe-area-inset-top)) 12px 0.5cm 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background:
      linear-gradient(to top,
        rgba(255,255,255,.96) 0%,
        rgba(226,244,255,.88) 26%,
        rgba(238,243,248,.52) 58%,
        rgba(238,243,248,.12) 100%),
      #eef3f8 !important;
    transform: none !important;
    animation: none !important;
  }

  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    background:
      linear-gradient(to top,
        rgba(148,163,184,.30) 0%,
        rgba(37,99,235,.18) 28%,
        rgba(15,23,42,.62) 62%,
        rgba(2,6,23,.98) 100%),
      #020617 !important;
  }

  body[data-page="profil"] #page-profil::before,
  body.dark-mode[data-page="profil"] #page-profil::before,
  html.dark-mode body[data-page="profil"] #page-profil::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    height: auto !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
      radial-gradient(circle at 50% 100%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.42) 27%, rgba(255,255,255,0) 62%),
      linear-gradient(to top, rgba(37,99,235,.11), rgba(20,184,166,.05), rgba(255,255,255,0)) !important;
  }

  body.dark-mode[data-page="profil"] #page-profil::before,
  html.dark-mode body[data-page="profil"] #page-profil::before {
    background:
      radial-gradient(circle at 50% 100%, rgba(148,163,184,.24) 0%, rgba(37,99,235,.14) 30%, rgba(2,6,23,0) 66%),
      linear-gradient(to top, rgba(255,255,255,.06), rgba(37,99,235,.08), rgba(2,6,23,0)) !important;
  }

  body[data-page="profil"] #page-profil .profile-hero,
  body.dark-mode[data-page="profil"] #page-profil .profile-hero,
  html.dark-mode body[data-page="profil"] #page-profil .profile-hero {
    flex: 0 0 auto !important;
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: transparent !important;
    transform: none !important;
  }

  body[data-page="profil"] #page-profil .profile-photo-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-card,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 10px 0.3cm 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list .list-group-item,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list .list-group-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-version,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-version,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-version {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    margin-bottom: 1cm !important;
    padding: 8px 16px 0 16px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  body[data-page="profil"] #page-profil .account-logout-btn,
  body.dark-mode[data-page="profil"] #page-profil .account-logout-btn,
  html.dark-mode body[data-page="profil"] #page-profil .account-logout-btn {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991px) and (max-height: 720px) {
  body[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil {
    padding-top: calc(0.5cm + env(safe-area-inset-top)) !important;
    padding-bottom: 0.5cm !important;
  }
}


/* v1.1.33 - App bar header mobile mode gelap dibuat biru tua, teks tetap putih,
   dan sudut bawah dipastikan melengkung sama seperti mode terang. */
@media (max-width: 991.98px) {
  .mobile-header {
    border-bottom-left-radius: 35px !important;
    border-bottom-right-radius: 35px !important;
    overflow: hidden !important;
  }

  body.dark-mode .mobile-header,
  html.dark-mode body .mobile-header {
    background: linear-gradient(135deg, #0f2f74 0%, #1e3a8a 58%, #075985 100%) !important;
    color: #ffffff !important;
    border-bottom-left-radius: 35px !important;
    border-bottom-right-radius: 35px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.45) !important;
  }

  body.dark-mode .mobile-header .greeting,
  body.dark-mode .mobile-header h5,
  body.dark-mode .mobile-header small,
  body.dark-mode .mobile-header strong,
  body.dark-mode .mobile-header .amount,
  html.dark-mode body .mobile-header .greeting,
  html.dark-mode body .mobile-header h5,
  html.dark-mode body .mobile-header small,
  html.dark-mode body .mobile-header strong,
  html.dark-mode body .mobile-header .amount {
    color: #ffffff !important;
  }

  body.dark-mode .mobile-header .hamburger-menu-btn,
  body.dark-mode .mobile-header .notification-bell,
  html.dark-mode body .mobile-header .hamburger-menu-btn,
  html.dark-mode body .mobile-header .notification-bell {
    color: #ffffff !important;
  }

  body.dark-mode .mobile-header .dompet-pribadi,
  html.dark-mode body .mobile-header .dompet-pribadi {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
  }
}


/* v1.1.34 - Mobile dashboard: app bar header mode gelap dibuat lebih gelap,
   background header diturunkan agar menyentuh card Transfer Bulan Ini,
   dan lengkung bawah header/dompet disetarakan untuk mode terang dan gelap. */
@media (max-width: 991.98px) {
  body[data-page="dashboard"] .mobile-header {
    padding-bottom: 56px !important;
    margin-bottom: -48px !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    overflow: hidden !important;
  }

  body[data-page="dashboard"] .content-area {
    padding-top: 0 !important;
  }

  body[data-page="dashboard"] #page-dashboard .stat-grid {
    margin-top: 0 !important;
  }

  body[data-page="dashboard"] .mobile-header .dompet-pribadi {
    border-radius: 24px !important;
    margin-top: 22px !important;
  }

  body.dark-mode[data-page="dashboard"] .mobile-header,
  html.dark-mode body[data-page="dashboard"] .mobile-header {
    background: linear-gradient(135deg, #020617 0%, #06153b 45%, #0b2a5b 100%) !important;
    color: #ffffff !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.58) !important;
  }

  body.dark-mode[data-page="dashboard"] .mobile-header .dompet-pribadi,
  html.dark-mode body[data-page="dashboard"] .mobile-header .dompet-pribadi {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.30) !important;
  }

  body.dark-mode[data-page="dashboard"] .mobile-header .greeting,
  body.dark-mode[data-page="dashboard"] .mobile-header h5,
  body.dark-mode[data-page="dashboard"] .mobile-header small,
  body.dark-mode[data-page="dashboard"] .mobile-header strong,
  body.dark-mode[data-page="dashboard"] .mobile-header .amount,
  html.dark-mode body[data-page="dashboard"] .mobile-header .greeting,
  html.dark-mode body[data-page="dashboard"] .mobile-header h5,
  html.dark-mode body[data-page="dashboard"] .mobile-header small,
  html.dark-mode body[data-page="dashboard"] .mobile-header strong,
  html.dark-mode body[data-page="dashboard"] .mobile-header .amount {
    color: #ffffff !important;
  }
}


/* v1.1.35 - Mobile dashboard: jarak Card Dompet ke dua Card Transfer Bulan Ini dibuat 0,5 cm.
   Berlaku sama untuk mode terang dan mode gelap. */
@media (max-width: 991.98px) {
  body[data-page="dashboard"] .mobile-header,
  body.dark-mode[data-page="dashboard"] .mobile-header,
  html.dark-mode body[data-page="dashboard"] .mobile-header {
    padding-bottom: calc(48px + 0.5cm) !important;
    margin-bottom: -48px !important;
  }

  body[data-page="dashboard"] #page-dashboard .stat-grid,
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-grid,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-grid {
    margin-top: 0 !important;
  }
}


/* v1.1.36 - Halaman Riwayat Transaksi mobile khusus mode gelap:
   background putih diubah menjadi biru tua gelap, teks hitam menjadi putih,
   dan garis/border dibuat putih sedikit pudar. Mode terang tidak diubah. */
@media (max-width: 991.98px) {
  body.dark-mode[data-page="transaksi"] .main-content,
  body.dark-mode[data-page="transaksi"] .content-area,
  html.dark-mode body[data-page="transaksi"] .main-content,
  html.dark-mode body[data-page="transaksi"] .content-area {
    background: #020817 !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi,
  html.dark-mode body[data-page="transaksi"] #page-transaksi {
    background: transparent !important;
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home,
  body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home span,
  body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-title-home-btn,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home span,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-title-home-btn {
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .card-custom,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .card-custom {
    background: linear-gradient(180deg, #0b152b 0%, #071225 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.44) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-panel,
  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-item,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-panel,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-item {
    background: #08152d !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-title,
  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .title,
  body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state p,
  body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-title,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .title,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state p,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state {
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .date,
  body.dark-mode[data-page="transaksi"] #page-transaksi .text-muted,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .date,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .text-muted {
    color: rgba(255,255,255,.72) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-divider,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-divider {
    background: rgba(255,255,255,.18) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .border,
  body.dark-mode[data-page="transaksi"] #page-transaksi .border-top,
  body.dark-mode[data-page="transaksi"] #page-transaksi .border-bottom,
  body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger,
  body.dark-mode[data-page="transaksi"] #page-transaksi .history-user-filter .form-control,
  body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .border,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .border-top,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .border-bottom,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-user-filter .form-control,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip {
    border-color: rgba(255,255,255,.18) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger,
  body.dark-mode[data-page="transaksi"] #page-transaksi .history-user-filter .form-control,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-user-filter .form-control {
    background: #0b1b39 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger i,
  body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger span,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger i,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger span {
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .history-accordion-toggle,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .history-accordion-toggle {
    background: rgba(37,99,235,.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.24) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.82) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip:hover,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip:hover {
    background: rgba(255,255,255,.13) !important;
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip.active,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.24) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user {
    background: rgba(96,165,250,.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user i,
  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user span,
  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user .text-secondary,
  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user .text-info,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user i,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user span,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user .text-secondary,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user .text-info {
    color: #ffffff !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .tx-item.is-pending,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-item.is-pending {
    background: #1b1c2c !important;
    border-color: rgba(253,230,138,.28) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state div[style*="background"],
  html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state div[style*="background"] {
    background: rgba(255,255,255,.09) !important;
  }

  body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state i,
  html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state i {
    color: rgba(255,255,255,.72) !important;
  }
}

/* v1.1.39 - Catat Transaksi Baru mobile khusus mode gelap:
   kolom pengisian diberi garis putih pudar dan tombol pilih file mengikuti background gelap. */
@media (max-width: 991.98px) {
  body.dark-mode[data-page="tambah"] .main-content,
  body.dark-mode[data-page="tambah"] .content-area,
  html.dark-mode body[data-page="tambah"] .main-content,
  html.dark-mode body[data-page="tambah"] .content-area {
    background:#020817 !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .mobile-page-title-with-home,
  body.dark-mode[data-page="tambah"] #page-tambah .mobile-page-title-with-home span,
  body.dark-mode[data-page="tambah"] #page-tambah .mobile-title-home-btn,
  html.dark-mode body[data-page="tambah"] #page-tambah .mobile-page-title-with-home,
  html.dark-mode body[data-page="tambah"] #page-tambah .mobile-page-title-with-home span,
  html.dark-mode body[data-page="tambah"] #page-tambah .mobile-title-home-btn {
    color:#ffffff !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .card-custom,
  html.dark-mode body[data-page="tambah"] #page-tambah .card-custom {
    background:linear-gradient(180deg, #0b152b 0%, #071225 100%) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.44) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .form-label,
  html.dark-mode body[data-page="tambah"] #page-tambah .form-label {
    color:rgba(255,255,255,.70) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .input-group,
  html.dark-mode body[data-page="tambah"] #page-tambah .input-group {
    background:#08152d !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:16px !important;
    overflow:hidden !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .input-group:focus-within,
  html.dark-mode body[data-page="tambah"] #page-tambah .input-group:focus-within {
    border-color:rgba(147,197,253,.70) !important;
    box-shadow:0 0 0 4px rgba(96,165,250,.14), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .input-group-text,
  body.dark-mode[data-page="tambah"] #page-tambah .form-control,
  body.dark-mode[data-page="tambah"] #page-tambah .form-select,
  body.dark-mode[data-page="tambah"] #page-tambah select,
  body.dark-mode[data-page="tambah"] #page-tambah input[type="date"],
  body.dark-mode[data-page="tambah"] #page-tambah input[type="text"],
  body.dark-mode[data-page="tambah"] #page-tambah input[type="file"],
  html.dark-mode body[data-page="tambah"] #page-tambah .input-group-text,
  html.dark-mode body[data-page="tambah"] #page-tambah .form-control,
  html.dark-mode body[data-page="tambah"] #page-tambah .form-select,
  html.dark-mode body[data-page="tambah"] #page-tambah select,
  html.dark-mode body[data-page="tambah"] #page-tambah input[type="date"],
  html.dark-mode body[data-page="tambah"] #page-tambah input[type="text"],
  html.dark-mode body[data-page="tambah"] #page-tambah input[type="file"] {
    background:#08152d !important;
    color:#ffffff !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .input-group-text,
  html.dark-mode body[data-page="tambah"] #page-tambah .input-group-text {
    color:rgba(255,255,255,.82) !important;
    border-right:1px solid rgba(255,255,255,.14) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .nominal-input,
  body.dark-mode[data-page="tambah"] #page-tambah #inputJumlah,
  html.dark-mode body[data-page="tambah"] #page-tambah .nominal-input,
  html.dark-mode body[data-page="tambah"] #page-tambah #inputJumlah {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .form-control::placeholder,
  body.dark-mode[data-page="tambah"] #page-tambah textarea::placeholder,
  html.dark-mode body[data-page="tambah"] #page-tambah .form-control::placeholder,
  html.dark-mode body[data-page="tambah"] #page-tambah textarea::placeholder {
    color:rgba(255,255,255,.45) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah input[type="file"]::file-selector-button,
  html.dark-mode body[data-page="tambah"] #page-tambah input[type="file"]::file-selector-button {
    background:#08152d !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid rgba(255,255,255,.18) !important;
    margin-right:12px !important;
    min-height:50px !important;
    padding:0 14px !important;
    font-weight:700 !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah input[type="file"]::-webkit-file-upload-button,
  html.dark-mode body[data-page="tambah"] #page-tambah input[type="file"]::-webkit-file-upload-button {
    background:#08152d !important;
    color:#ffffff !important;
    border:0 !important;
    border-right:1px solid rgba(255,255,255,.18) !important;
    margin-right:12px !important;
    min-height:50px !important;
    padding:0 14px !important;
    font-weight:700 !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah small.text-muted,
  html.dark-mode body[data-page="tambah"] #page-tambah small.text-muted {
    color:rgba(255,255,255,.62) !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .filter-chip,
  html.dark-mode body[data-page="tambah"] #page-tambah .filter-chip {
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.86) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:none !important;
  }

  body.dark-mode[data-page="tambah"] #page-tambah .filter-chip.active,
  html.dark-mode body[data-page="tambah"] #page-tambah .filter-chip.active {
    background:rgba(37,99,235,.28) !important;
    color:#ffffff !important;
    border-color:rgba(147,197,253,.38) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  }
}

/* v1.1.40 - Halaman Kategori mobile khusus mode gelap:
   background putih diubah menjadi biru tua gelap, teks hitam menjadi putih,
   dan line/border dibuat putih sedikit pudar. Mode terang tidak diubah. */
@media (max-width: 991.98px) {
  body.dark-mode[data-page="kategori"] .main-content,
  body.dark-mode[data-page="kategori"] .content-area,
  html.dark-mode body[data-page="kategori"] .main-content,
  html.dark-mode body[data-page="kategori"] .content-area {
    background:#020817 !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori,
  html.dark-mode body[data-page="kategori"] #page-kategori {
    background:transparent !important;
    color:#ffffff !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .mobile-page-title-with-home,
  body.dark-mode[data-page="kategori"] #page-kategori .mobile-page-title-with-home span,
  body.dark-mode[data-page="kategori"] #page-kategori .mobile-title-home-btn,
  html.dark-mode body[data-page="kategori"] #page-kategori .mobile-page-title-with-home,
  html.dark-mode body[data-page="kategori"] #page-kategori .mobile-page-title-with-home span,
  html.dark-mode body[data-page="kategori"] #page-kategori .mobile-title-home-btn {
    color:#ffffff !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .card-custom,
  html.dark-mode body[data-page="kategori"] #page-kategori .card-custom {
    background:transparent !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.16) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori #kategoriList,
  html.dark-mode body[data-page="kategori"] #page-kategori #kategoriList {
    color:#ffffff !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .category-card,
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card {
    background:linear-gradient(180deg, #0b152b 0%, #071225 100%) !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.18) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.34) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .category-card:active,
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card:active {
    background:#0b1b39 !important;
    border-color:rgba(147,197,253,.45) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .fw-bold,
  body.dark-mode[data-page="kategori"] #page-kategori .font-poppins,
  body.dark-mode[data-page="kategori"] #page-kategori .text-dark,
  body.dark-mode[data-page="kategori"] #page-kategori .category-card div[style*="color:var(--dark)"],
  html.dark-mode body[data-page="kategori"] #page-kategori .fw-bold,
  html.dark-mode body[data-page="kategori"] #page-kategori .font-poppins,
  html.dark-mode body[data-page="kategori"] #page-kategori .text-dark,
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card div[style*="color:var(--dark)"] {
    color:#ffffff !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori small,
  body.dark-mode[data-page="kategori"] #page-kategori .text-muted,
  body.dark-mode[data-page="kategori"] #page-kategori .category-card div[style*="color:#64748b"],
  body.dark-mode[data-page="kategori"] #page-kategori .category-card small[style*="color:#94a3b8"],
  html.dark-mode body[data-page="kategori"] #page-kategori small,
  html.dark-mode body[data-page="kategori"] #page-kategori .text-muted,
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card div[style*="color:#64748b"],
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card small[style*="color:#94a3b8"] {
    color:rgba(255,255,255,.70) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .border,
  body.dark-mode[data-page="kategori"] #page-kategori .border-top,
  body.dark-mode[data-page="kategori"] #page-kategori .border-bottom,
  body.dark-mode[data-page="kategori"] #page-kategori [style*="border:1px solid"],
  html.dark-mode body[data-page="kategori"] #page-kategori .border,
  html.dark-mode body[data-page="kategori"] #page-kategori .border-top,
  html.dark-mode body[data-page="kategori"] #page-kategori .border-bottom,
  html.dark-mode body[data-page="kategori"] #page-kategori [style*="border:1px solid"] {
    border-color:rgba(255,255,255,.18) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .category-card > div[style*="right:12px"],
  html.dark-mode body[data-page="kategori"] #page-kategori .category-card > div[style*="right:12px"] {
    color:rgba(255,255,255,.52) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .alert-info,
  html.dark-mode body[data-page="kategori"] #page-kategori .alert-info {
    background:#08152d !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.16) !important;
  }

  body.dark-mode[data-page="kategori"] #page-kategori .alert-info span,
  html.dark-mode body[data-page="kategori"] #page-kategori .alert-info span {
    color:rgba(255,255,255,.74) !important;
  }
}


/* v1.1.41 - Popup detail kategori khusus mode gelap:
   background putih diubah menjadi biru tua gelap dan teks hitam menjadi putih. */
@media (max-width: 991.98px) {
  body.dark-mode .swal2-popup.category-detail-modal,
  html.dark-mode body .swal2-popup.category-detail-modal {
    background:linear-gradient(180deg, #0b152b 0%, #071225 100%) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 24px 60px rgba(0,0,0,.52) !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .swal2-title,
  body.dark-mode .swal2-popup.category-detail-modal .swal2-title h5,
  body.dark-mode .swal2-popup.category-detail-modal .swal2-html-container,
  body.dark-mode .swal2-popup.category-detail-modal .fw-bold,
  body.dark-mode .swal2-popup.category-detail-modal strong,
  body.dark-mode .swal2-popup.category-detail-modal p,
  html.dark-mode body .swal2-popup.category-detail-modal .swal2-title,
  html.dark-mode body .swal2-popup.category-detail-modal .swal2-title h5,
  html.dark-mode body .swal2-popup.category-detail-modal .swal2-html-container,
  html.dark-mode body .swal2-popup.category-detail-modal .fw-bold,
  html.dark-mode body .swal2-popup.category-detail-modal strong,
  html.dark-mode body .swal2-popup.category-detail-modal p {
    color:#ffffff !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .category-detail-head,
  html.dark-mode body .swal2-popup.category-detail-modal .category-detail-head {
    background:#08152d !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.20) !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .category-detail-head small,
  body.dark-mode .swal2-popup.category-detail-modal .category-detail-row span,
  html.dark-mode body .swal2-popup.category-detail-modal .category-detail-head small,
  html.dark-mode body .swal2-popup.category-detail-modal .category-detail-row span {
    color:rgba(255,255,255,.72) !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .category-detail-row,
  html.dark-mode body .swal2-popup.category-detail-modal .category-detail-row {
    border-bottom-color:rgba(255,255,255,.16) !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .category-detail-row small,
  body.dark-mode .swal2-popup.category-detail-modal .empty-state,
  body.dark-mode .swal2-popup.category-detail-modal .empty-state p,
  html.dark-mode body .swal2-popup.category-detail-modal .category-detail-row small,
  html.dark-mode body .swal2-popup.category-detail-modal .empty-state,
  html.dark-mode body .swal2-popup.category-detail-modal .empty-state p {
    color:#ffffff !important;
  }

  body.dark-mode .swal2-popup.category-detail-modal .swal2-actions,
  html.dark-mode body .swal2-popup.category-detail-modal .swal2-actions {
    background:transparent !important;
    border-color:rgba(255,255,255,.14) !important;
  }
}

/* v1.1.42 - Tombol Exit drawer mobile cukup 1x klik; perubahan utama ada di script.js. */

/* ============================================================
   v1.1.45 - Audit Global Mode Gelap Futuristik
   Fokus:
   1) Menutup sisa background putih/terang di semua halaman saat dark mode.
   2) Teks hitam/dark menjadi putih, teks sekunder menjadi putih pudar.
   3) Line, border, divider, dan tabel menjadi putih pudar.
   4) Nuansa layout dibuat lebih futuristik: navy glass, glow halus, dan panel modern.
   Catatan: aktif khusus dark mode, mode terang tidak disentuh.
   ============================================================ */
body.dark-mode,
html.dark-mode body {
  --mb-dark-bg:#020817;
  --mb-dark-bg-2:#030b1d;
  --mb-dark-panel:#071225;
  --mb-dark-panel-2:#0b152b;
  --mb-dark-panel-3:#0e1b33;
  --mb-dark-text:#ffffff;
  --mb-dark-soft:rgba(255,255,255,.72);
  --mb-dark-muted:rgba(255,255,255,.58);
  --mb-dark-line:rgba(255,255,255,.16);
  --mb-dark-line-soft:rgba(255,255,255,.10);
  --mb-dark-glow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  --mb-dark-neon:0 0 0 1px rgba(96,165,250,.16), 0 18px 44px rgba(2,6,23,.44);
  background:
    radial-gradient(circle at 18% -10%, rgba(37,99,235,.24) 0%, rgba(37,99,235,0) 36%),
    radial-gradient(circle at 100% 2%, rgba(20,184,166,.16) 0%, rgba(20,184,166,0) 32%),
    linear-gradient(180deg,#020817 0%,#020617 100%) !important;
  color:#ffffff !important;
}

body.dark-mode .app-wrap,
body.dark-mode .main-content,
body.dark-mode .content-area,
body.dark-mode .page-section,
html.dark-mode body .app-wrap,
html.dark-mode body .main-content,
html.dark-mode body .content-area,
html.dark-mode body .page-section {
  background:transparent !important;
  color:#ffffff !important;
}

body.dark-mode .mobile-header,
html.dark-mode body .mobile-header {
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.28), transparent 36%),
    linear-gradient(135deg,#020817 0%,#06152e 48%,#081b3d 100%) !important;
  color:#ffffff !important;
  border-bottom-left-radius:35px !important;
  border-bottom-right-radius:35px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.52), inset 0 -1px 0 rgba(255,255,255,.08) !important;
}
body.dark-mode .mobile-header *,
html.dark-mode body .mobile-header * { color:#ffffff !important; }
body.dark-mode .topbar .topbar-notification-bell,
html.dark-mode body .topbar .topbar-notification-bell {
  border-color:rgba(125,211,252,.22); background:#0b2038; color:#7dd3fc; box-shadow:0 8px 20px rgba(0,0,0,.24);
}
body.dark-mode .topbar .topbar-notification-bell:hover,
html.dark-mode body .topbar .topbar-notification-bell:hover { background:#102944; border-color:rgba(125,211,252,.38); }

body.dark-mode .sidebar,
body.dark-mode .topbar,
body.dark-mode .bottom-nav,
body.dark-mode .mobile-drawer-panel,
body.dark-mode .card-custom,
body.dark-mode .stat-card,
body.dark-mode .account-mobile-card,
body.dark-mode .list-group-custom,
body.dark-mode .modal-content,
body.dark-mode .swal2-popup,
body.dark-mode .dropdown-menu,
body.dark-mode .history-filter-panel,
body.dark-mode .filter-box,
body.dark-mode .tx-item,
body.dark-mode .log-item,
body.dark-mode .detail-grid div,
body.dark-mode .detail-grid.pretty div,
body.dark-mode .customer-card,
body.dark-mode .mini-stat,
body.dark-mode .staff-balance-summary div,
body.dark-mode .staff-balance-card,
body.dark-mode .customer-table,
body.dark-mode .customer-table-head,
body.dark-mode .customer-table-row,
body.dark-mode .settings-page-hero,
body.dark-mode .register-hero,
body.dark-mode .register-card-form,
body.dark-mode .notification-item,
body.dark-mode .announcement-item,
body.dark-mode .support-chat-item,
body.dark-mode .report-category-card,
body.dark-mode .profile-upload-preview,
body.dark-mode .category-detail-head,
body.dark-mode .legacy-table-note,
body.dark-mode .legacy-stat-card,
body.dark-mode .legacy-data-table,
body.dark-mode .legacy-data-table thead th,
body.dark-mode .legacy-data-table tbody td,
body.dark-mode .legacy-pagination button,
body.dark-mode .legacy-active-filter,
body.dark-mode .debt-item,
body.dark-mode .debt-empty,
body.dark-mode .debt-toolbar,
body.dark-mode .debt-search-box,
body.dark-mode .debt-form-section,
body.dark-mode .debt-doc-list,
body.dark-mode .debt-doc,
body.dark-mode .debt-installment-quick > div,
body.dark-mode .installment-clean-section,
body.dark-mode .debt-detail-premium dl,
body.dark-mode .debt-detail-premium .debt-doc-list,
body.dark-mode .order-receipt-preview,
body.dark-mode .order-payment-upload-card,
body.dark-mode .package-quota-row,
body.dark-mode .payment-proof-card,
body.dark-mode .tenant-package-card,
body.dark-mode .report-export-card,
body.dark-mode .about-card,
html.dark-mode body .sidebar,
html.dark-mode body .topbar,
html.dark-mode body .bottom-nav,
html.dark-mode body .mobile-drawer-panel,
html.dark-mode body .card-custom,
html.dark-mode body .stat-card,
html.dark-mode body .account-mobile-card,
html.dark-mode body .list-group-custom,
html.dark-mode body .modal-content,
html.dark-mode body .swal2-popup,
html.dark-mode body .dropdown-menu,
html.dark-mode body .history-filter-panel,
html.dark-mode body .filter-box,
html.dark-mode body .tx-item,
html.dark-mode body .log-item,
html.dark-mode body .detail-grid div,
html.dark-mode body .detail-grid.pretty div,
html.dark-mode body .customer-card,
html.dark-mode body .mini-stat,
html.dark-mode body .staff-balance-summary div,
html.dark-mode body .staff-balance-card,
html.dark-mode body .customer-table,
html.dark-mode body .customer-table-head,
html.dark-mode body .customer-table-row,
html.dark-mode body .settings-page-hero,
html.dark-mode body .register-hero,
html.dark-mode body .register-card-form,
html.dark-mode body .notification-item,
html.dark-mode body .announcement-item,
html.dark-mode body .support-chat-item,
html.dark-mode body .report-category-card,
html.dark-mode body .profile-upload-preview,
html.dark-mode body .category-detail-head,
html.dark-mode body .legacy-table-note,
html.dark-mode body .legacy-stat-card,
html.dark-mode body .legacy-data-table,
html.dark-mode body .legacy-data-table thead th,
html.dark-mode body .legacy-data-table tbody td,
html.dark-mode body .legacy-pagination button,
html.dark-mode body .legacy-active-filter,
html.dark-mode body .debt-item,
html.dark-mode body .debt-empty,
html.dark-mode body .debt-toolbar,
html.dark-mode body .debt-search-box,
html.dark-mode body .debt-form-section,
html.dark-mode body .debt-doc-list,
html.dark-mode body .debt-doc,
html.dark-mode body .debt-installment-quick > div,
html.dark-mode body .installment-clean-section,
html.dark-mode body .debt-detail-premium dl,
html.dark-mode body .debt-detail-premium .debt-doc-list,
html.dark-mode body .order-receipt-preview,
html.dark-mode body .order-payment-upload-card,
html.dark-mode body .package-quota-row,
html.dark-mode body .payment-proof-card,
html.dark-mode body .tenant-package-card,
html.dark-mode body .report-export-card,
html.dark-mode body .about-card {
  background:linear-gradient(180deg,var(--mb-dark-panel-2) 0%,var(--mb-dark-panel) 100%) !important;
  color:#ffffff !important;
  border-color:var(--mb-dark-line) !important;
  box-shadow:var(--mb-dark-glow) !important;
}

body.dark-mode .card-custom,
body.dark-mode .stat-card,
body.dark-mode .account-mobile-card,
body.dark-mode .history-filter-panel,
body.dark-mode .tx-item,
body.dark-mode .customer-card,
body.dark-mode .debt-item,
body.dark-mode .category-card,
body.dark-mode .customer-table-row,
body.dark-mode .report-category-card,
body.dark-mode .order-receipt-preview,
html.dark-mode body .card-custom,
html.dark-mode body .stat-card,
html.dark-mode body .account-mobile-card,
html.dark-mode body .history-filter-panel,
html.dark-mode body .tx-item,
html.dark-mode body .customer-card,
html.dark-mode body .debt-item,
html.dark-mode body .category-card,
html.dark-mode body .customer-table-row,
html.dark-mode body .report-category-card,
html.dark-mode body .order-receipt-preview {
  border:1px solid var(--mb-dark-line) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode .card-custom::before,
body.dark-mode .stat-card::before,
body.dark-mode .history-filter-panel::before,
body.dark-mode .account-mobile-card::before,
html.dark-mode body .card-custom::before,
html.dark-mode body .stat-card::before,
html.dark-mode body .history-filter-panel::before,
html.dark-mode body .account-mobile-card::before {
  border-color:rgba(96,165,250,.18) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .page-title,
body.dark-mode .mobile-page-title-with-home,
body.dark-mode .mobile-page-title-with-home span,
body.dark-mode .text-dark,
body.dark-mode .fw-bold,
body.dark-mode .font-poppins,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode .card-header-custom h6,
body.dark-mode .tx-details .title,
body.dark-mode .log-body strong,
body.dark-mode .detail-grid strong,
body.dark-mode .customer-col strong,
body.dark-mode .customer-card strong,
body.dark-mode .staff-balance-info strong,
body.dark-mode .staff-balance-summary strong,
body.dark-mode .user-detail-name,
body.dark-mode .settings-page-hero h5,
body.dark-mode .category-card .cat-name,
body.dark-mode .debt-title,
body.dark-mode .debt-item strong,
body.dark-mode .legacy-data-table,
body.dark-mode .legacy-data-table th,
body.dark-mode .legacy-data-table td,
body.dark-mode code.text-dark,
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#111827"],
body.dark-mode [style*="color: #111827"],
body.dark-mode [style*="color:#1f2937"],
body.dark-mode [style*="color: #1f2937"],
body.dark-mode [style*="color:var(--dark)"],
html.dark-mode body h1,
html.dark-mode body h2,
html.dark-mode body h3,
html.dark-mode body h4,
html.dark-mode body h5,
html.dark-mode body h6,
html.dark-mode body .page-title,
html.dark-mode body .mobile-page-title-with-home,
html.dark-mode body .mobile-page-title-with-home span,
html.dark-mode body .text-dark,
html.dark-mode body .fw-bold,
html.dark-mode body .font-poppins,
html.dark-mode body strong,
html.dark-mode body b,
html.dark-mode body .card-header-custom h6,
html.dark-mode body .tx-details .title,
html.dark-mode body .log-body strong,
html.dark-mode body .detail-grid strong,
html.dark-mode body .customer-col strong,
html.dark-mode body .customer-card strong,
html.dark-mode body .staff-balance-info strong,
html.dark-mode body .staff-balance-summary strong,
html.dark-mode body .user-detail-name,
html.dark-mode body .settings-page-hero h5,
html.dark-mode body .category-card .cat-name,
html.dark-mode body .debt-title,
html.dark-mode body .debt-item strong,
html.dark-mode body .legacy-data-table,
html.dark-mode body .legacy-data-table th,
html.dark-mode body .legacy-data-table td,
html.dark-mode body code.text-dark,
html.dark-mode body [style*="color:#0f172a"],
html.dark-mode body [style*="color: #0f172a"],
html.dark-mode body [style*="color:#111827"],
html.dark-mode body [style*="color: #111827"],
html.dark-mode body [style*="color:#1f2937"],
html.dark-mode body [style*="color: #1f2937"],
html.dark-mode body [style*="color:var(--dark)"] {
  color:#ffffff !important;
}

body.dark-mode p,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .form-text,
body.dark-mode .stat-card .label,
body.dark-mode .tx-details .date,
body.dark-mode .log-body small,
body.dark-mode .log-meta,
body.dark-mode .detail-grid span,
body.dark-mode .customer-col small,
body.dark-mode .customer-card small,
body.dark-mode .staff-balance-info span,
body.dark-mode .staff-balance-summary span,
body.dark-mode .settings-page-hero p,
body.dark-mode .register-hero span,
body.dark-mode .notification-copy span,
body.dark-mode .menu-update-copy small,
body.dark-mode .debt-meta,
body.dark-mode .debt-meta span,
body.dark-mode .debt-empty,
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color: #334155"],
html.dark-mode body p,
html.dark-mode body small,
html.dark-mode body label,
html.dark-mode body .text-muted,
html.dark-mode body .text-secondary,
html.dark-mode body .form-text,
html.dark-mode body .stat-card .label,
html.dark-mode body .tx-details .date,
html.dark-mode body .log-body small,
html.dark-mode body .log-meta,
html.dark-mode body .detail-grid span,
html.dark-mode body .customer-col small,
html.dark-mode body .customer-card small,
html.dark-mode body .staff-balance-info span,
html.dark-mode body .staff-balance-summary span,
html.dark-mode body .settings-page-hero p,
html.dark-mode body .register-hero span,
html.dark-mode body .notification-copy span,
html.dark-mode body .menu-update-copy small,
html.dark-mode body .debt-meta,
html.dark-mode body .debt-meta span,
html.dark-mode body .debt-empty,
html.dark-mode body [style*="color:#64748b"],
html.dark-mode body [style*="color: #64748b"],
html.dark-mode body [style*="color:#475569"],
html.dark-mode body [style*="color: #475569"],
html.dark-mode body [style*="color:#334155"],
html.dark-mode body [style*="color: #334155"] {
  color:var(--mb-dark-soft) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode input,
body.dark-mode select,
body.dark-mode .input-group,
body.dark-mode .input-group-text,
body.dark-mode .range-inputs label,
body.dark-mode .date-range-trigger,
body.dark-mode .history-user-filter .form-control,
body.dark-mode .detail-readonly-field .form-control,
body.dark-mode .detail-readonly-field .input-group-text,
body.dark-mode .debt-form .form-control,
body.dark-mode .debt-form-shell .input-group,
body.dark-mode .tx-like-form .input-group,
body.dark-mode .installment-input,
body.dark-mode .debt-installment-modal .input-group-text,
body.dark-mode .debt-installment-modal .form-control,
html.dark-mode body .form-control,
html.dark-mode body .form-select,
html.dark-mode body textarea,
html.dark-mode body input,
html.dark-mode body select,
html.dark-mode body .input-group,
html.dark-mode body .input-group-text,
html.dark-mode body .range-inputs label,
html.dark-mode body .date-range-trigger,
html.dark-mode body .history-user-filter .form-control,
html.dark-mode body .detail-readonly-field .form-control,
html.dark-mode body .detail-readonly-field .input-group-text,
html.dark-mode body .debt-form .form-control,
html.dark-mode body .debt-form-shell .input-group,
html.dark-mode body .tx-like-form .input-group,
html.dark-mode body .installment-input,
html.dark-mode body .debt-installment-modal .input-group-text,
html.dark-mode body .debt-installment-modal .form-control {
  background:linear-gradient(180deg,#08152d 0%,#061126 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode input::placeholder,
html.dark-mode body .form-control::placeholder,
html.dark-mode body textarea::placeholder,
html.dark-mode body input::placeholder {
  color:rgba(255,255,255,.48) !important;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
html.dark-mode body .form-control:focus,
html.dark-mode body .form-select:focus,
html.dark-mode body textarea:focus,
html.dark-mode body input:focus,
html.dark-mode body select:focus {
  background:#061126 !important;
  color:#ffffff !important;
  border-color:rgba(125,211,252,.56) !important;
  box-shadow:0 0 0 4px rgba(14,165,233,.16) !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body,
body.dark-mode .bg-body-tertiary,
body.dark-mode .btn-light,
body.dark-mode .list-group-item,
body.dark-mode .mobile-drawer-link,
body.dark-mode .mobile-drawer-footer-link,
body.dark-mode .mobile-drawer-sublink,
body.dark-mode .sidebar-menu a,
body.dark-mode .sidebar-submenu-toggle,
body.dark-mode .range-shortcut,
body.dark-mode .history-accordion-toggle,
body.dark-mode .legacy-btn,
body.dark-mode .btn-icon-soft,
body.dark-mode .debt-tabs button,
body.dark-mode .debt-type-picker label,
body.dark-mode .debt-type-picker.premium label,
body.dark-mode .debt-type-picker.premium label.active,
body.dark-mode .debt-type-picker.premium em,
body.dark-mode .debt-paid-chip,
body.dark-mode .debt-payment-files.empty,
body.dark-mode .order-choice-card,
body.dark-mode .report-export-btn,
html.dark-mode body .bg-white,
html.dark-mode body .bg-light,
html.dark-mode body .bg-body,
html.dark-mode body .bg-body-tertiary,
html.dark-mode body .btn-light,
html.dark-mode body .list-group-item,
html.dark-mode body .mobile-drawer-link,
html.dark-mode body .mobile-drawer-footer-link,
html.dark-mode body .mobile-drawer-sublink,
html.dark-mode body .sidebar-menu a,
html.dark-mode body .sidebar-submenu-toggle,
html.dark-mode body .range-shortcut,
html.dark-mode body .history-accordion-toggle,
html.dark-mode body .legacy-btn,
html.dark-mode body .btn-icon-soft,
html.dark-mode body .debt-tabs button,
html.dark-mode body .debt-type-picker label,
html.dark-mode body .debt-type-picker.premium label,
html.dark-mode body .debt-type-picker.premium label.active,
html.dark-mode body .debt-type-picker.premium em,
html.dark-mode body .debt-paid-chip,
html.dark-mode body .debt-payment-files.empty,
html.dark-mode body .order-choice-card,
html.dark-mode body .report-export-btn {
  background:rgba(255,255,255,.055) !important;
  color:#ffffff !important;
  border-color:var(--mb-dark-line) !important;
  box-shadow:none !important;
}
body.dark-mode .mobile-drawer-link:hover,
body.dark-mode .mobile-drawer-link.active,
body.dark-mode .mobile-drawer-footer-link:hover,
body.dark-mode .sidebar-menu a:hover,
body.dark-mode .sidebar-submenu-toggle:hover,
body.dark-mode .range-shortcut.active,
body.dark-mode .range-shortcut:focus,
body.dark-mode .debt-tabs button.active,
html.dark-mode body .mobile-drawer-link:hover,
html.dark-mode body .mobile-drawer-link.active,
html.dark-mode body .mobile-drawer-footer-link:hover,
html.dark-mode body .sidebar-menu a:hover,
html.dark-mode body .sidebar-submenu-toggle:hover,
html.dark-mode body .range-shortcut.active,
html.dark-mode body .range-shortcut:focus,
html.dark-mode body .debt-tabs button.active {
  background:linear-gradient(135deg, rgba(37,99,235,.34), rgba(20,184,166,.18)) !important;
  color:#ffffff !important;
  border-color:rgba(125,211,252,.28) !important;
}

body.dark-mode .table-custom,
body.dark-mode .table-custom th,
body.dark-mode .table-custom td,
body.dark-mode .legacy-data-table,
body.dark-mode .legacy-data-table thead th,
body.dark-mode .legacy-data-table tbody td,
body.dark-mode .customer-table-head,
body.dark-mode .customer-table-row,
html.dark-mode body .table-custom,
html.dark-mode body .table-custom th,
html.dark-mode body .table-custom td,
html.dark-mode body .legacy-data-table,
html.dark-mode body .legacy-data-table thead th,
html.dark-mode body .legacy-data-table tbody td,
html.dark-mode body .customer-table-head,
html.dark-mode body .customer-table-row {
  background:#071225 !important;
  color:#ffffff !important;
  border-color:var(--mb-dark-line) !important;
}
body.dark-mode .table-custom tr:hover td,
body.dark-mode .legacy-data-table tbody tr:hover td,
body.dark-mode .customer-table-row:hover,
html.dark-mode body .table-custom tr:hover td,
html.dark-mode body .legacy-data-table tbody tr:hover td,
html.dark-mode body .customer-table-row:hover {
  background:#0e1b33 !important;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end,
body.dark-mode hr,
body.dark-mode .card-header-custom,
body.dark-mode .history-filter-divider,
body.dark-mode .date-range-head,
body.dark-mode .dashboard-category-row,
body.dark-mode .dashboard-latest-row,
body.dark-mode .customer-table-head,
body.dark-mode .customer-table-row,
body.dark-mode .section-subtitle::after,
body.dark-mode .debt-section-title,
body.dark-mode .debt-doc-list,
body.dark-mode .debt-installment-modal .swal2-actions,
body.dark-mode .swal2-popup.debt-modal .swal2-actions,
body.dark-mode [style*="border:1px solid"],
body.dark-mode [style*="border: 1px solid"],
body.dark-mode [style*="border-bottom:1px solid"],
body.dark-mode [style*="border-bottom: 1px solid"],
body.dark-mode [style*="border-top:1px solid"],
body.dark-mode [style*="border-top: 1px solid"],
html.dark-mode body .border,
html.dark-mode body .border-top,
html.dark-mode body .border-bottom,
html.dark-mode body .border-start,
html.dark-mode body .border-end,
html.dark-mode body hr,
html.dark-mode body .card-header-custom,
html.dark-mode body .history-filter-divider,
html.dark-mode body .date-range-head,
html.dark-mode body .dashboard-category-row,
html.dark-mode body .dashboard-latest-row,
html.dark-mode body .customer-table-head,
html.dark-mode body .customer-table-row,
html.dark-mode body .section-subtitle::after,
html.dark-mode body .debt-section-title,
html.dark-mode body .debt-doc-list,
html.dark-mode body .debt-installment-modal .swal2-actions,
html.dark-mode body .swal2-popup.debt-modal .swal2-actions,
html.dark-mode body [style*="border:1px solid"],
html.dark-mode body [style*="border: 1px solid"],
html.dark-mode body [style*="border-bottom:1px solid"],
html.dark-mode body [style*="border-bottom: 1px solid"],
html.dark-mode body [style*="border-top:1px solid"],
html.dark-mode body [style*="border-top: 1px solid"] {
  border-color:var(--mb-dark-line) !important;
}

body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#f8fafc"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#eff6ff"],
body.dark-mode [style*="background: #eff6ff"],
body.dark-mode [style*="background:#ecfdf5"],
body.dark-mode [style*="background: #ecfdf5"],
body.dark-mode [style*="background:#e0f2fe"],
body.dark-mode [style*="background: #e0f2fe"],
body.dark-mode [style*="background:#fffbeb"],
body.dark-mode [style*="background: #fffbeb"],
body.dark-mode [style*="background:#fff7ed"],
body.dark-mode [style*="background: #fff7ed"],
body.dark-mode [style*="background:#fff1f2"],
body.dark-mode [style*="background: #fff1f2"],
body.dark-mode [style*="background:#fef2f2"],
body.dark-mode [style*="background: #fef2f2"],
body.dark-mode [style*="background:#faf5ff"],
body.dark-mode [style*="background: #faf5ff"],
html.dark-mode body [style*="background:#fff"],
html.dark-mode body [style*="background: #fff"],
html.dark-mode body [style*="background:#ffffff"],
html.dark-mode body [style*="background: #ffffff"],
html.dark-mode body [style*="background:#f8fafc"],
html.dark-mode body [style*="background: #f8fafc"],
html.dark-mode body [style*="background:#f1f5f9"],
html.dark-mode body [style*="background: #f1f5f9"],
html.dark-mode body [style*="background:#eff6ff"],
html.dark-mode body [style*="background: #eff6ff"],
html.dark-mode body [style*="background:#ecfdf5"],
html.dark-mode body [style*="background: #ecfdf5"],
html.dark-mode body [style*="background:#e0f2fe"],
html.dark-mode body [style*="background: #e0f2fe"],
html.dark-mode body [style*="background:#fffbeb"],
html.dark-mode body [style*="background: #fffbeb"],
html.dark-mode body [style*="background:#fff7ed"],
html.dark-mode body [style*="background: #fff7ed"],
html.dark-mode body [style*="background:#fff1f2"],
html.dark-mode body [style*="background: #fff1f2"],
html.dark-mode body [style*="background:#fef2f2"],
html.dark-mode body [style*="background: #fef2f2"],
html.dark-mode body [style*="background:#faf5ff"],
html.dark-mode body [style*="background: #faf5ff"] {
  background:linear-gradient(180deg,#0b152b 0%,#071225 100%) !important;
  color:#ffffff !important;
  border-color:var(--mb-dark-line) !important;
}

body.dark-mode .alert,
body.dark-mode .alert-info,
body.dark-mode .alert-warning,
body.dark-mode .alert-light,
body.dark-mode .toast,
body.dark-mode .edit-note,
body.dark-mode .detail-user-card,
body.dark-mode .detail-source,
body.dark-mode .tx-proof-chip,
body.dark-mode .debt-tenant,
body.dark-mode .debt-status,
body.dark-mode .debt-impact-note,
body.dark-mode .debt-pay-preview,
body.dark-mode .debt-form-auto-badge,
body.dark-mode .debt-installment-alert,
body.dark-mode .order-remove-wrap.premium,
body.dark-mode .receipt-total,
body.dark-mode .package-empty-card,
html.dark-mode body .alert,
html.dark-mode body .alert-info,
html.dark-mode body .alert-warning,
html.dark-mode body .alert-light,
html.dark-mode body .toast,
html.dark-mode body .edit-note,
html.dark-mode body .detail-user-card,
html.dark-mode body .detail-source,
html.dark-mode body .tx-proof-chip,
html.dark-mode body .debt-tenant,
html.dark-mode body .debt-status,
html.dark-mode body .debt-impact-note,
html.dark-mode body .debt-pay-preview,
html.dark-mode body .debt-form-auto-badge,
html.dark-mode body .debt-installment-alert,
html.dark-mode body .order-remove-wrap.premium,
html.dark-mode body .receipt-total,
html.dark-mode body .package-empty-card {
  background:rgba(14,165,233,.10) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.18) !important;
}

body.dark-mode .mobile-title-home-btn,
body.dark-mode .mobile-home-solid-icon,
html.dark-mode body .mobile-title-home-btn,
html.dark-mode body .mobile-home-solid-icon {
  color:#ffffff !important;
  fill:#ffffff !important;
}

body.dark-mode .sidebar-header .logo,
body.dark-mode .mobile-drawer-logo,
body.dark-mode .account-menu-icon,
body.dark-mode .settings-page-icon,
body.dark-mode .mobile-drawer-link i:first-child,
body.dark-mode .mobile-drawer-footer-link i:first-child,
body.dark-mode .mobile-drawer-sublink i,
body.dark-mode .settings-mobile-head i,
html.dark-mode body .sidebar-header .logo,
html.dark-mode body .mobile-drawer-logo,
html.dark-mode body .account-menu-icon,
html.dark-mode body .settings-page-icon,
html.dark-mode body .mobile-drawer-link i:first-child,
html.dark-mode body .mobile-drawer-footer-link i:first-child,
html.dark-mode body .mobile-drawer-sublink i,
html.dark-mode body .settings-mobile-head i {
  background:rgba(96,165,250,.14) !important;
  color:#bfdbfe !important;
  border-color:rgba(125,211,252,.18) !important;
}

body.dark-mode input[type="file"]::file-selector-button,
html.dark-mode body input[type="file"]::file-selector-button,
body.dark-mode input[type="file"]::-webkit-file-upload-button,
html.dark-mode body input[type="file"]::-webkit-file-upload-button {
  background:#061126 !important;
  color:#ffffff !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.18) !important;
}

body.dark-mode .swal2-actions,
html.dark-mode body .swal2-actions {
  background:transparent !important;
  border-color:var(--mb-dark-line) !important;
}
body.dark-mode .swal2-close,
html.dark-mode body .swal2-close { color:rgba(255,255,255,.72) !important; }

body.dark-mode .chat-thread,
html.dark-mode body .chat-thread {
  background:linear-gradient(180deg,#051127 0%,#020817 100%) !important;
  border:1px solid var(--mb-dark-line) !important;
}
body.dark-mode .chat-message-row.incoming .chat-bubble,
body.dark-mode .chat-compose,
body.dark-mode .chat-file-btn,
html.dark-mode body .chat-message-row.incoming .chat-bubble,
html.dark-mode body .chat-compose,
html.dark-mode body .chat-file-btn {
  background:#0b152b !important;
  color:#ffffff !important;
  border-color:var(--mb-dark-line) !important;
}

@media (max-width: 991.98px) {
  body.dark-mode .content-area,
  html.dark-mode body .content-area {
    background:
      radial-gradient(circle at 18% -8%, rgba(37,99,235,.22), transparent 34%),
      radial-gradient(circle at 100% 14%, rgba(20,184,166,.13), transparent 30%),
      linear-gradient(180deg,#020817 0%,#020617 100%) !important;
  }
  body.dark-mode .page-section,
  html.dark-mode body .page-section {
    color:#ffffff !important;
  }
  body.dark-mode .bottom-nav,
  html.dark-mode body .bottom-nav {
    background:rgba(3,11,29,.92) !important;
    border-top-color:rgba(255,255,255,.14) !important;
    box-shadow:0 -18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  body.dark-mode .fab,
  html.dark-mode body .fab {
    border-color:#020817 !important;
    box-shadow:0 16px 38px rgba(37,99,235,.42), 0 0 0 5px rgba(37,99,235,.10) !important;
  }
}

/* ============================================================
   v1.1.46 - Dark Mode Futuristik Halaman Pelanggan & Order
   Fokus:
   - Menutup sisa teks hitam pada tabel/card Pelanggan dan Order.
   - Background putih/abu legacy table diganti biru tua gelap.
   - Line, border, dan divider dibuat putih pudar.
   - Aktif hanya saat mode gelap, mode terang tetap aman.
   ============================================================ */
body.dark-mode[data-page="pelanggan"] .content-area,
body.dark-mode[data-page="order"] .content-area,
html.dark-mode body[data-page="pelanggan"] .content-area,
html.dark-mode body[data-page="order"] .content-area {
  background:
    radial-gradient(circle at 18% -8%, rgba(37,99,235,.24), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(20,184,166,.16), transparent 32%),
    linear-gradient(180deg,#020817 0%,#020617 100%) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan,
body.dark-mode[data-page="order"] #page-order,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan,
html.dark-mode body[data-page="order"] #page-order {
  background:transparent !important;
  color:#ffffff !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .card-custom,
body.dark-mode[data-page="order"] #page-order .card-custom,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .empty-state,
body.dark-mode[data-page="order"] #page-order .empty-state,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .card-custom,
html.dark-mode body[data-page="order"] #page-order .card-custom,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .empty-state,
html.dark-mode body[data-page="order"] #page-order .empty-state {
  background:linear-gradient(180deg,#0b152b 0%,#071225 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .card-header-custom,
body.dark-mode[data-page="order"] #page-order .card-header-custom,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .card-header-custom,
html.dark-mode body[data-page="order"] #page-order .card-header-custom {
  border-color:rgba(255,255,255,.16) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan h1,
body.dark-mode[data-page="pelanggan"] #page-pelanggan h2,
body.dark-mode[data-page="pelanggan"] #page-pelanggan h3,
body.dark-mode[data-page="pelanggan"] #page-pelanggan h4,
body.dark-mode[data-page="pelanggan"] #page-pelanggan h5,
body.dark-mode[data-page="pelanggan"] #page-pelanggan h6,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .fw-bold,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .text-dark,
body.dark-mode[data-page="pelanggan"] #page-pelanggan strong,
body.dark-mode[data-page="pelanggan"] #page-pelanggan b,
body.dark-mode[data-page="order"] #page-order h1,
body.dark-mode[data-page="order"] #page-order h2,
body.dark-mode[data-page="order"] #page-order h3,
body.dark-mode[data-page="order"] #page-order h4,
body.dark-mode[data-page="order"] #page-order h5,
body.dark-mode[data-page="order"] #page-order h6,
body.dark-mode[data-page="order"] #page-order .fw-bold,
body.dark-mode[data-page="order"] #page-order .text-dark,
body.dark-mode[data-page="order"] #page-order strong,
body.dark-mode[data-page="order"] #page-order b,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h1,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h2,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h3,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h4,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h5,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan h6,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .fw-bold,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .text-dark,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan strong,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan b,
html.dark-mode body[data-page="order"] #page-order h1,
html.dark-mode body[data-page="order"] #page-order h2,
html.dark-mode body[data-page="order"] #page-order h3,
html.dark-mode body[data-page="order"] #page-order h4,
html.dark-mode body[data-page="order"] #page-order h5,
html.dark-mode body[data-page="order"] #page-order h6,
html.dark-mode body[data-page="order"] #page-order .fw-bold,
html.dark-mode body[data-page="order"] #page-order .text-dark,
html.dark-mode body[data-page="order"] #page-order strong,
html.dark-mode body[data-page="order"] #page-order b {
  color:#ffffff !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan small,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .text-muted,
body.dark-mode[data-page="pelanggan"] #page-pelanggan p,
body.dark-mode[data-page="pelanggan"] #page-pelanggan label,
body.dark-mode[data-page="order"] #page-order small,
body.dark-mode[data-page="order"] #page-order .text-muted,
body.dark-mode[data-page="order"] #page-order p,
body.dark-mode[data-page="order"] #page-order label,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan small,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .text-muted,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan p,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan label,
html.dark-mode body[data-page="order"] #page-order small,
html.dark-mode body[data-page="order"] #page-order .text-muted,
html.dark-mode body[data-page="order"] #page-order p,
html.dark-mode body[data-page="order"] #page-order label {
  color:rgba(255,255,255,.72) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-table-toolbar,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-table-footer,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-length,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-search,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-page-dots,
body.dark-mode[data-page="order"] #page-order .legacy-table-toolbar,
body.dark-mode[data-page="order"] #page-order .legacy-table-footer,
body.dark-mode[data-page="order"] #page-order .legacy-length,
body.dark-mode[data-page="order"] #page-order .legacy-search,
body.dark-mode[data-page="order"] #page-order .legacy-page-dots,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-table-toolbar,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-table-footer,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-length,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-search,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-page-dots,
html.dark-mode body[data-page="order"] #page-order .legacy-table-toolbar,
html.dark-mode body[data-page="order"] #page-order .legacy-table-footer,
html.dark-mode body[data-page="order"] #page-order .legacy-length,
html.dark-mode body[data-page="order"] #page-order .legacy-search,
html.dark-mode body[data-page="order"] #page-order .legacy-page-dots {
  color:#ffffff !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-length select,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-search input,
body.dark-mode[data-page="order"] #page-order .legacy-length select,
body.dark-mode[data-page="order"] #page-order .legacy-search input,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-length select,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-search input,
html.dark-mode body[data-page="order"] #page-order .legacy-length select,
html.dark-mode body[data-page="order"] #page-order .legacy-search input {
  background:linear-gradient(180deg,#08152d 0%,#061126 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 0 0 1px rgba(96,165,250,.08) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-stat-card,
body.dark-mode[data-page="order"] #page-order .legacy-stat-card,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-stat-card,
html.dark-mode body[data-page="order"] #page-order .legacy-stat-card {
  background:linear-gradient(160deg,rgba(11,21,43,.96) 0%,rgba(7,18,37,.98) 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-radius:16px !important;
  overflow:hidden !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-stat-card.active,
body.dark-mode[data-page="order"] #page-order .legacy-stat-card.active,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-stat-card.active,
html.dark-mode body[data-page="order"] #page-order .legacy-stat-card.active {
  border-color:rgba(125,211,252,.44) !important;
  box-shadow:0 0 0 2px rgba(14,165,233,.18), 0 18px 44px rgba(0,0,0,.42) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy span,
body.dark-mode[data-page="order"] #page-order .legacy-stat-copy span,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy span,
html.dark-mode body[data-page="order"] #page-order .legacy-stat-copy span {
  color:rgba(255,255,255,.76) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy strong,
body.dark-mode[data-page="order"] #page-order .legacy-stat-copy strong,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy strong,
html.dark-mode body[data-page="order"] #page-order .legacy-stat-copy strong {
  color:#ffffff !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy em,
body.dark-mode[data-page="order"] #page-order .legacy-stat-copy em,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-stat-copy em,
html.dark-mode body[data-page="order"] #page-order .legacy-stat-copy em {
  color:rgba(255,255,255,.68) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll,
body.dark-mode[data-page="order"] #page-order .legacy-table-scroll,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll,
html.dark-mode body[data-page="order"] #page-order .legacy-table-scroll {
  border-top:3px solid rgba(125,211,252,.80) !important;
  border-left:1px solid rgba(255,255,255,.14) !important;
  border-right:1px solid rgba(255,255,255,.14) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  background:#071225 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.34) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll-top,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll-top {
  scrollbar-color:#38bdf8 rgba(15,23,42,.94);
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll-top::-webkit-scrollbar-track,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-table-scroll-top::-webkit-scrollbar-track {
  background:rgba(15,23,42,.94);
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table thead th,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody td,
body.dark-mode[data-page="order"] #page-order .legacy-data-table,
body.dark-mode[data-page="order"] #page-order .legacy-data-table thead th,
body.dark-mode[data-page="order"] #page-order .legacy-data-table tbody td,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table thead th,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody td,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table thead th,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table tbody td {
  background:#071225 !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.16) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody tr:nth-child(odd) td,
body.dark-mode[data-page="order"] #page-order .legacy-data-table tbody tr:nth-child(odd) td,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody tr:nth-child(odd) td,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table tbody tr:nth-child(odd) td {
  background:#0b152b !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody tr:hover td,
body.dark-mode[data-page="order"] #page-order .legacy-data-table tbody tr:hover td,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table tbody tr:hover td,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table tbody tr:hover td {
  background:#0e1b33 !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table .legacy-no-col,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-name-text,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-name-text span,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-name-text i,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-info-btn,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-info-btn i,
body.dark-mode[data-page="order"] #page-order .legacy-data-table .legacy-no-col,
body.dark-mode[data-page="order"] #page-order .legacy-name-text,
body.dark-mode[data-page="order"] #page-order .legacy-name-text span,
body.dark-mode[data-page="order"] #page-order .legacy-name-text i,
body.dark-mode[data-page="order"] #page-order .legacy-info-btn,
body.dark-mode[data-page="order"] #page-order .legacy-info-btn i,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table .legacy-no-col,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-name-text,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-name-text span,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-name-text i,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-info-btn,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-info-btn i,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table .legacy-no-col,
html.dark-mode body[data-page="order"] #page-order .legacy-name-text,
html.dark-mode body[data-page="order"] #page-order .legacy-name-text span,
html.dark-mode body[data-page="order"] #page-order .legacy-name-text i,
html.dark-mode body[data-page="order"] #page-order .legacy-info-btn,
html.dark-mode body[data-page="order"] #page-order .legacy-info-btn i {
  color:#ffffff !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-info-btn,
body.dark-mode[data-page="order"] #page-order .legacy-info-btn,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-info-btn,
html.dark-mode body[data-page="order"] #page-order .legacy-info-btn {
  background:rgba(96,165,250,.16) !important;
  border:1px solid rgba(125,211,252,.18) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-info-btn:hover,
body.dark-mode[data-page="order"] #page-order .legacy-info-btn:hover,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-info-btn:hover,
html.dark-mode body[data-page="order"] #page-order .legacy-info-btn:hover {
  background:rgba(14,165,233,.28) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-data-table td small,
body.dark-mode[data-page="order"] #page-order .legacy-data-table td small,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-data-table td small,
html.dark-mode body[data-page="order"] #page-order .legacy-data-table td small {
  color:rgba(255,255,255,.68) !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .quota-paket-cell > div,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .quota-paket-cell > div {
  background:linear-gradient(180deg,rgba(14,27,51,.98) 0%,rgba(8,21,45,.98) 100%) !important;
  border-color:rgba(255,255,255,.16) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .quota-paket-cell span,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .quota-paket-cell span {
  color:rgba(255,255,255,.66) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .quota-paket-cell strong,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .quota-paket-cell strong {
  color:#ffffff !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .quota-paket-cell em,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .quota-paket-cell em {
  color:#86efac !important;
}

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status,
body.dark-mode[data-page="order"] #page-order .legacy-status,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status,
html.dark-mode body[data-page="order"] #page-order .legacy-status {
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.success,
body.dark-mode[data-page="order"] #page-order .legacy-status.success,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.success,
html.dark-mode body[data-page="order"] #page-order .legacy-status.success { background:rgba(34,197,94,.22) !important; }
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.info,
body.dark-mode[data-page="order"] #page-order .legacy-status.info,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.info,
html.dark-mode body[data-page="order"] #page-order .legacy-status.info { background:rgba(14,165,233,.22) !important; }
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.warning,
body.dark-mode[data-page="order"] #page-order .legacy-status.warning,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.warning,
html.dark-mode body[data-page="order"] #page-order .legacy-status.warning { background:rgba(245,158,11,.24) !important; }
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.danger,
body.dark-mode[data-page="order"] #page-order .legacy-status.danger,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.danger,
html.dark-mode body[data-page="order"] #page-order .legacy-status.danger { background:rgba(239,68,68,.24) !important; }
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.secondary,
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-status.muted,
body.dark-mode[data-page="order"] #page-order .legacy-status.secondary,
body.dark-mode[data-page="order"] #page-order .legacy-status.muted,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.secondary,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-status.muted,
html.dark-mode body[data-page="order"] #page-order .legacy-status.secondary,
html.dark-mode body[data-page="order"] #page-order .legacy-status.muted { background:rgba(148,163,184,.18) !important; }

body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-pagination button,
body.dark-mode[data-page="order"] #page-order .legacy-pagination button,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-pagination button,
html.dark-mode body[data-page="order"] #page-order .legacy-pagination button {
  background:rgba(255,255,255,.06) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-pagination button.active,
body.dark-mode[data-page="order"] #page-order .legacy-pagination button.active,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-pagination button.active,
html.dark-mode body[data-page="order"] #page-order .legacy-pagination button.active {
  background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(20,184,166,.24)) !important;
  border-color:rgba(125,211,252,.34) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-pagination button:disabled,
body.dark-mode[data-page="order"] #page-order .legacy-pagination button:disabled,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-pagination button:disabled,
html.dark-mode body[data-page="order"] #page-order .legacy-pagination button:disabled {
  color:rgba(255,255,255,.42) !important;
}

body.dark-mode .swal2-popup.customer-detail-modal,
html.dark-mode body .swal2-popup.customer-detail-modal {
  background:linear-gradient(180deg,#0b152b 0%,#071225 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.52) !important;
}
body.dark-mode .swal2-popup.customer-detail-modal .detail-grid.pretty div,
html.dark-mode body .swal2-popup.customer-detail-modal .detail-grid.pretty div {
  background:#08152d !important;
  border-color:rgba(255,255,255,.18) !important;
}
body.dark-mode .swal2-popup.customer-detail-modal .swal2-title,
body.dark-mode .swal2-popup.customer-detail-modal .swal2-html-container,
body.dark-mode .swal2-popup.customer-detail-modal strong,
html.dark-mode body .swal2-popup.customer-detail-modal .swal2-title,
html.dark-mode body .swal2-popup.customer-detail-modal .swal2-html-container,
html.dark-mode body .swal2-popup.customer-detail-modal strong {
  color:#ffffff !important;
}
body.dark-mode .swal2-popup.customer-detail-modal span,
html.dark-mode body .swal2-popup.customer-detail-modal span {
  color:rgba(255,255,255,.70) !important;
}


/* v1.1.47 - Catatan Hutang Piutang: Dark Mode Futuristik Menyeluruh */
/* v1.1.49 - Penyesuaian Rumahweb, domain book.smart.jitech.id, database jitr1522_mmbibi, dan cache PHP 8.4 */
body.dark-mode[data-page="hutang-piutang"],
html.dark-mode body[data-page="hutang-piutang"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(14,165,233,.18) 0%, transparent 35%),
    radial-gradient(circle at 84% 18%, rgba(37,99,235,.16) 0%, transparent 32%),
    linear-gradient(180deg,#020617 0%,#061126 48%,#020617 100%) !important;
  color:#ffffff !important;
}

body.dark-mode[data-page="hutang-piutang"] .main-content,
body.dark-mode[data-page="hutang-piutang"] .content-area,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang.active,
html.dark-mode body[data-page="hutang-piutang"] .main-content,
html.dark-mode body[data-page="hutang-piutang"] .content-area,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang.active {
  background:transparent !important;
  color:#ffffff !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .section-card,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-paid-chip,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tenant,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-delete-request,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn-light,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .section-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-paid-chip,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tenant,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-delete-request,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn-light {
  background:linear-gradient(180deg,rgba(11,21,43,.96) 0%,rgba(7,18,37,.98) 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card::before,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card::before {
  opacity:.32 !important;
  filter:blur(.2px) saturate(1.2) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button.active,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button.active {
  background:linear-gradient(135deg,rgba(37,99,235,.82),rgba(14,165,233,.58),rgba(20,184,166,.38)) !important;
  color:#ffffff !important;
  border-color:rgba(125,211,252,.42) !important;
  box-shadow:0 0 0 1px rgba(125,211,252,.16), 0 14px 34px rgba(14,165,233,.20) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-person,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-person span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card strong,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty strong,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h1,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h2,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h3,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h4,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h5,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h6,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang strong,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang b,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .fw-bold,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .text-dark,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-person,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-person span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card strong,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty strong,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h1,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h2,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h3,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h4,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h5,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h6,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang strong,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang b,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .fw-bold,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .text-dark {
  color:#ffffff !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang p,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang small,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang label,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .section-subtitle,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card small,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-item-bottom,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .text-muted,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang p,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang small,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang label,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .section-subtitle,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card small,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-item-bottom,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .text-muted {
  color:rgba(255,255,255,.72) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box input,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang input,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang select,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang textarea,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .form-control,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .form-select,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box input,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang input,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang select,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang textarea,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .form-control,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .form-select {
  background:#061126 !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang *::placeholder,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang *::placeholder {
  color:rgba(255,255,255,.48) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty {
  border:1px solid rgba(255,255,255,.16) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-info-btn,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-info-btn,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft {
  color:#ffffff !important;
  background:rgba(14,165,233,.14) !important;
  border:1px solid rgba(125,211,252,.20) !important;
  border-radius:12px !important;
}

body.dark-mode .swal2-popup.debt-modal,
body.dark-mode .swal2-popup.debt-form-modal,
body.dark-mode .swal2-popup.debt-detail-modal,
body.dark-mode .swal2-popup.debt-installment-modal,
html.dark-mode body .swal2-popup.debt-modal,
html.dark-mode body .swal2-popup.debt-form-modal,
html.dark-mode body .swal2-popup.debt-detail-modal,
html.dark-mode body .swal2-popup.debt-installment-modal {
  background:linear-gradient(180deg,#0b152b 0%,#071225 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 28px 72px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode .swal2-popup.debt-modal .swal2-html-container,
body.dark-mode .swal2-popup.debt-modal .swal2-title,
body.dark-mode .swal2-popup.debt-modal .debt-detail-titlebar strong,
body.dark-mode .swal2-popup.debt-modal .debt-installment-copy h3,
body.dark-mode .swal2-popup.debt-modal strong,
body.dark-mode .swal2-popup.debt-modal b,
body.dark-mode .swal2-popup.debt-modal .fw-bold,
body.dark-mode .swal2-popup.debt-modal .text-dark,
html.dark-mode body .swal2-popup.debt-modal .swal2-html-container,
html.dark-mode body .swal2-popup.debt-modal .swal2-title,
html.dark-mode body .swal2-popup.debt-modal .debt-detail-titlebar strong,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-copy h3,
html.dark-mode body .swal2-popup.debt-modal strong,
html.dark-mode body .swal2-popup.debt-modal b,
html.dark-mode body .swal2-popup.debt-modal .fw-bold,
html.dark-mode body .swal2-popup.debt-modal .text-dark {
  color:#ffffff !important;
}

body.dark-mode .swal2-popup.debt-modal small,
body.dark-mode .swal2-popup.debt-modal p,
body.dark-mode .swal2-popup.debt-modal label,
body.dark-mode .swal2-popup.debt-modal dt,
body.dark-mode .swal2-popup.debt-modal .debt-detail-titlebar small,
body.dark-mode .swal2-popup.debt-modal .debt-type-picker.premium small,
body.dark-mode .swal2-popup.debt-modal .debt-file-note,
body.dark-mode .swal2-popup.debt-modal .debt-payment-row span,
body.dark-mode .swal2-popup.debt-modal .debt-payment-row small,
html.dark-mode body .swal2-popup.debt-modal small,
html.dark-mode body .swal2-popup.debt-modal p,
html.dark-mode body .swal2-popup.debt-modal label,
html.dark-mode body .swal2-popup.debt-modal dt,
html.dark-mode body .swal2-popup.debt-modal .debt-detail-titlebar small,
html.dark-mode body .swal2-popup.debt-modal .debt-type-picker.premium small,
html.dark-mode body .swal2-popup.debt-modal .debt-file-note,
html.dark-mode body .swal2-popup.debt-modal .debt-payment-row span,
html.dark-mode body .swal2-popup.debt-modal .debt-payment-row small {
  color:rgba(255,255,255,.72) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-form-section,
body.dark-mode .swal2-popup.debt-modal .debt-type-picker label,
body.dark-mode .swal2-popup.debt-modal .debt-type-picker.premium label,
body.dark-mode .swal2-popup.debt-modal .debt-section-title,
body.dark-mode .swal2-popup.debt-modal .input-group,
body.dark-mode .swal2-popup.debt-modal .form-control,
body.dark-mode .swal2-popup.debt-modal .form-select,
body.dark-mode .swal2-popup.debt-modal .input-group-text,
body.dark-mode .swal2-popup.debt-modal .debt-doc-list,
body.dark-mode .swal2-popup.debt-modal .debt-doc,
body.dark-mode .swal2-popup.debt-modal .debt-installment-quick > div,
body.dark-mode .swal2-popup.debt-modal .installment-clean-section,
body.dark-mode .swal2-popup.debt-modal .debt-detail-premium dl,
body.dark-mode .swal2-popup.debt-modal .debt-installment-hero,
body.dark-mode .swal2-popup.debt-modal .debt-installment-sisa,
body.dark-mode .swal2-popup.debt-modal .debt-pay-preview,
body.dark-mode .swal2-popup.debt-modal .debt-pay-preview-icon,
body.dark-mode .swal2-popup.debt-modal .debt-payment-files.empty,
body.dark-mode .swal2-popup.debt-modal .swal2-actions,
html.dark-mode body .swal2-popup.debt-modal .debt-form-section,
html.dark-mode body .swal2-popup.debt-modal .debt-type-picker label,
html.dark-mode body .swal2-popup.debt-modal .debt-type-picker.premium label,
html.dark-mode body .swal2-popup.debt-modal .debt-section-title,
html.dark-mode body .swal2-popup.debt-modal .input-group,
html.dark-mode body .swal2-popup.debt-modal .form-control,
html.dark-mode body .swal2-popup.debt-modal .form-select,
html.dark-mode body .swal2-popup.debt-modal .input-group-text,
html.dark-mode body .swal2-popup.debt-modal .debt-doc-list,
html.dark-mode body .swal2-popup.debt-modal .debt-doc,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-quick > div,
html.dark-mode body .swal2-popup.debt-modal .installment-clean-section,
html.dark-mode body .swal2-popup.debt-modal .debt-detail-premium dl,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-hero,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-sisa,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview-icon,
html.dark-mode body .swal2-popup.debt-modal .debt-payment-files.empty,
html.dark-mode body .swal2-popup.debt-modal .swal2-actions {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(6,17,38,.98) 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

body.dark-mode .swal2-popup.debt-modal .form-control::placeholder,
body.dark-mode .swal2-popup.debt-modal textarea::placeholder,
body.dark-mode .swal2-popup.debt-modal input::placeholder,
html.dark-mode body .swal2-popup.debt-modal .form-control::placeholder,
html.dark-mode body .swal2-popup.debt-modal textarea::placeholder,
html.dark-mode body .swal2-popup.debt-modal input::placeholder {
  color:rgba(255,255,255,.46) !important;
}

body.dark-mode .swal2-popup.debt-modal input[type="file"]::file-selector-button,
html.dark-mode body .swal2-popup.debt-modal input[type="file"]::file-selector-button {
  background:#0b152b !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
}
body.dark-mode .swal2-popup.debt-modal input[type="file"]::-webkit-file-upload-button,
html.dark-mode body .swal2-popup.debt-modal input[type="file"]::-webkit-file-upload-button {
  background:#0b152b !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-payment-row,
body.dark-mode .swal2-popup.debt-modal hr,
html.dark-mode body .swal2-popup.debt-modal .debt-payment-row,
html.dark-mode body .swal2-popup.debt-modal hr {
  border-color:rgba(255,255,255,.16) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-form-hero,
body.dark-mode .swal2-popup.debt-modal .debt-detail-head,
html.dark-mode body .swal2-popup.debt-modal .debt-form-hero,
html.dark-mode body .swal2-popup.debt-modal .debt-detail-head {
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-pay-preview-row span,
body.dark-mode .swal2-popup.debt-modal .debt-pay-preview-row strong,
body.dark-mode .swal2-popup.debt-modal .debt-pay-preview-content > strong,
body.dark-mode .swal2-popup.debt-modal .debt-pay-preview-content small,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview-row span,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview-row strong,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview-content > strong,
html.dark-mode body .swal2-popup.debt-modal .debt-pay-preview-content small {
  color:#ffffff !important;
}

/* v1.1.53 - Branding Aplikasi: tombol default dan layout aksi khusus halaman branding */
#page-branding .branding-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
#page-branding .branding-save-btn {
  width: 100%;
}
#page-branding .btn-branding-default {
  width: 100%;
  border: 1px solid rgba(239,68,68,.24);
  background: linear-gradient(135deg, #fff7ed 0%, #fee2e2 100%);
  color: #b91c1c;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  transition: all .24s ease;
  box-shadow: 0 8px 20px rgba(239,68,68,.08);
}
#page-branding .btn-branding-default:hover {
  transform: translateY(-2px);
  color: #991b1b;
  box-shadow: 0 12px 28px rgba(239,68,68,.16);
}
@media (min-width: 768px) {
  #page-branding .branding-action-row {
    grid-template-columns: 1.2fr .8fr;
  }
}
body.dark-mode #page-branding .btn-branding-default {
  background: linear-gradient(135deg, rgba(127,29,29,.72), rgba(69,10,10,.9));
  color: #fee2e2;
  border-color: rgba(248,113,113,.35);
  box-shadow: 0 14px 32px rgba(0,0,0,.24);
}
body.dark-mode #page-branding .btn-branding-default:hover {
  color: #fff;
  border-color: rgba(252,165,165,.55);
}

/* v1.1.60 - Telegram Bot rebuilt clean page
   Halaman Telegram Bot dibuat ulang memakai struktur baru agar tidak lagi membawa ruang kosong dari aturan lama v1.1.52-v1.1.59. */
.telegram-bot-page {
  --telegram-text:#0f172a;
  --telegram-muted:#64748b;
  --telegram-line:#e2e8f0;
  --telegram-soft:#f8fafc;
  --telegram-blue:#229ed9;
  color:var(--telegram-text);
}
.telegram-mobile-title { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.telegram-title-icon { width:42px; height:42px; border-radius:16px; background:linear-gradient(135deg,#2ea8e5,#2563eb); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:21px; box-shadow:0 12px 24px rgba(34,158,217,.22); }
.telegram-mobile-title small { display:block; font-size:10px; font-weight:900; color:#229ed9; text-transform:uppercase; letter-spacing:.8px; line-height:1; margin-bottom:3px; }
.telegram-mobile-title strong { display:block; font-family:'Poppins',sans-serif; font-size:22px; line-height:1.05; font-weight:900; letter-spacing:-.55px; color:#0f172a; }
.telegram-clean-hero { position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; min-height:170px; padding:24px; margin:0 0 16px; border-radius:30px; background:linear-gradient(135deg,#f8fbff 0%,#eff8ff 48%,#e0f2fe 100%); border:1px solid rgba(34,158,217,.16); box-shadow:0 18px 42px rgba(37,99,235,.10); }
.telegram-hero-orb { position:absolute; border-radius:999px; pointer-events:none; filter:blur(.1px); }
.telegram-hero-orb-one { width:150px; height:150px; right:-54px; top:-46px; background:rgba(34,158,217,.18); }
.telegram-hero-orb-two { width:118px; height:118px; left:-54px; bottom:-52px; background:rgba(37,99,235,.12); }
.telegram-hero-icon { position:relative; z-index:1; flex:0 0 auto; width:76px; height:76px; border-radius:26px; background:linear-gradient(135deg,#229ed9,#2563eb); color:#fff; display:flex; align-items:center; justify-content:center; font-size:36px; box-shadow:0 16px 34px rgba(34,158,217,.28); }
.telegram-hero-copy { position:relative; z-index:1; min-width:0; }
.telegram-hero-copy > span { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:900; color:#0369a1; text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; }
.telegram-hero-copy h4 { font-family:'Poppins',sans-serif; font-size:24px; line-height:1.12; font-weight:900; letter-spacing:-.6px; color:#0f172a; margin:0 0 8px; }
.telegram-hero-copy p { margin:0; color:#475569; font-size:13px; line-height:1.62; font-weight:600; max-width:720px; }
.telegram-bot-pill { width:max-content; max-width:100%; display:flex; align-items:center; gap:8px; margin-top:14px; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(34,158,217,.16); box-shadow:0 10px 24px rgba(15,23,42,.06); color:#0369a1; font-size:12px; font-weight:900; }
.telegram-bot-pill code { color:#b45309; background:transparent; padding:0; font-size:13px; font-weight:900; white-space:nowrap; }
.telegram-layout-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:16px; margin-bottom:16px; }
.telegram-clean-card { border:1px solid var(--telegram-line); border-radius:26px; background:#fff; padding:20px; box-shadow:0 14px 36px rgba(15,23,42,.06); overflow:hidden; }
.telegram-card-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.telegram-card-icon { width:42px; height:42px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.telegram-card-icon.warning { background:#fffbeb; color:#d97706; }
.telegram-card-icon.info { background:#eff6ff; color:#2563eb; }
.telegram-card-icon.primary { background:#e0f2fe; color:#0284c7; }
.telegram-card-head small { display:block; color:#64748b; font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; line-height:1; margin-bottom:4px; }
.telegram-card-head h6 { margin:0; color:#0f172a; font-family:'Poppins',sans-serif; font-size:17px; line-height:1.15; font-weight:900; }
.telegram-soft-alert { padding:13px 14px; border-radius:18px; background:#fff7ed; color:#92400e; font-size:12.5px; line-height:1.55; font-weight:700; margin-bottom:16px; border:1px solid #fed7aa; }
.telegram-input-wrap { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-radius:16px; background:#f8fafc; border:1px solid #e2e8f0; }
.telegram-input-wrap > i { color:#0284c7; font-size:18px; }
.telegram-input-wrap .form-control { border:0 !important; background:transparent !important; box-shadow:none !important; padding:11px 0 !important; min-height:46px; color:#0f172a; font-weight:700; }
.telegram-help-text { margin:0 0 10px; color:#64748b; font-size:12.5px; line-height:1.55; font-weight:700; }
.telegram-help-text code { background:#eef2ff; color:#be123c; padding:2px 6px; border-radius:8px; }
.telegram-action-btn { width:100%; border:0; border-radius:16px; padding:13px 16px; min-height:48px; color:#fff; font-weight:900; font-size:13px; font-family:'Poppins',sans-serif; transition:.2s ease; }
.telegram-action-btn.warning { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 12px 24px rgba(217,119,6,.18); }
.telegram-action-btn.dark { background:linear-gradient(135deg,#0f172a,#1e293b); box-shadow:0 12px 24px rgba(15,23,42,.14); }
.telegram-action-btn:active { transform:scale(.98); }
.telegram-card-divider { height:1px; background:#e2e8f0; margin:18px 0; }
.telegram-step-list { margin:0; padding-left:20px; color:#475569; font-size:13px; line-height:1.72; font-weight:650; }
.telegram-step-list li { margin-bottom:7px; }
.telegram-step-list code { color:#2563eb; background:#eff6ff; border-radius:8px; padding:2px 6px; font-weight:900; }
.telegram-guide-card { margin-bottom:0; }
.telegram-command-list { display:grid; gap:9px; }
.telegram-command-row { display:grid; grid-template-columns:110px minmax(0,1fr) 92px; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#f8fafc; border:1px solid #e2e8f0; }
.telegram-command-row code { color:#2563eb; background:#eff6ff; border-radius:10px; padding:6px 9px; font-size:13px; font-weight:900; text-align:center; }
.telegram-command-row span { color:#334155; font-size:13px; line-height:1.35; font-weight:700; }
.telegram-command-row b { color:#0f172a; font-size:12px; line-height:1; text-align:right; font-weight:900; }

body.dark-mode #page-telegram,
html.dark-mode body #page-telegram { --telegram-text:#ffffff; --telegram-muted:rgba(226,232,240,.78); --telegram-line:rgba(148,163,184,.22); --telegram-soft:#081a33; color:#ffffff; }
body.dark-mode #page-telegram .telegram-mobile-title strong,
html.dark-mode body #page-telegram .telegram-mobile-title strong,
body.dark-mode #page-telegram .telegram-card-head h6,
html.dark-mode body #page-telegram .telegram-card-head h6,
body.dark-mode #page-telegram .telegram-hero-copy h4,
html.dark-mode body #page-telegram .telegram-hero-copy h4 { color:#ffffff !important; }
body.dark-mode #page-telegram .telegram-mobile-title small,
html.dark-mode body #page-telegram .telegram-mobile-title small,
body.dark-mode #page-telegram .telegram-card-head small,
html.dark-mode body #page-telegram .telegram-card-head small { color:#7dd3fc !important; }
body.dark-mode #page-telegram .telegram-clean-hero,
html.dark-mode body #page-telegram .telegram-clean-hero { background:linear-gradient(135deg,#061428 0%,#0b1b36 54%,#020617 100%); border-color:rgba(125,211,252,.18); box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); }
body.dark-mode #page-telegram .telegram-clean-card,
html.dark-mode body #page-telegram .telegram-clean-card { background:linear-gradient(180deg,#0b1b36 0%,#061428 100%); border-color:rgba(125,211,252,.18); box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); color:#ffffff; }

/* v1.20.14 - Halaman dasar WhatsApp API pada submenu Pengaturan. */
.whatsapp-integration-page { max-width:1120px; margin:0 auto; }
.whatsapp-hero {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; min-height:168px; padding:24px; margin:0 0 16px;
  border-radius:30px; background:linear-gradient(135deg,#f8fbff 0%,#ecfdf5 48%,#dcfce7 100%);
  border:1px solid rgba(34,197,94,.18); box-shadow:0 18px 42px rgba(15,118,110,.10);
}
.whatsapp-hero::after { content:""; position:absolute; right:-54px; top:-58px; width:180px; height:180px; border-radius:999px; background:rgba(34,197,94,.12); pointer-events:none; }
.whatsapp-hero-icon {
  width:72px; height:72px; border-radius:22px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,#22c55e,#0f766e); color:#fff; font-size:34px; box-shadow:0 16px 32px rgba(34,197,94,.24);
}
.whatsapp-hero-copy { position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.whatsapp-hero-copy small { display:block; color:#047857; font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.whatsapp-hero-copy h5 { margin:0 0 6px; color:#0f172a; font-family:'Poppins',sans-serif; font-size:24px; font-weight:950; letter-spacing:-.4px; }
.whatsapp-hero-copy p { margin:0; max-width:720px; color:#475569; font-size:13px; line-height:1.55; font-weight:650; }
.whatsapp-status-badge {
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border-radius:999px;
  background:#fff; color:#64748b; border:1px solid #dbe7f5; font-size:12px; font-weight:900; white-space:nowrap; box-shadow:0 10px 20px rgba(15,23,42,.06);
}
.whatsapp-status-badge.connected { color:#047857; border-color:#86efac; background:#ecfdf5; }
.whatsapp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.whatsapp-card {
  border:1px solid #dbe7f5; border-radius:26px; background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  padding:20px; box-shadow:0 14px 36px rgba(15,23,42,.06); overflow:hidden;
}
.whatsapp-wide { grid-column:1 / -1; }
.whatsapp-card-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.whatsapp-card-head > i {
  width:44px; height:44px; border-radius:16px; display:grid; place-items:center; flex:0 0 auto;
  background:#dcfce7; color:#047857; font-size:22px;
}
.whatsapp-card-head strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; font-size:16px; font-weight:950; }
.whatsapp-card-head span { display:block; color:#64748b; font-size:12px; line-height:1.45; font-weight:650; margin-top:2px; }
.whatsapp-qr-placeholder {
  min-height:154px; border:1px dashed #86efac; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:#f0fdf4; color:#047857; text-align:center; font-weight:850; padding:18px; margin-bottom:14px;
}
.whatsapp-qr-placeholder i { font-size:42px; }
.whatsapp-primary-btn {
  width:100%; height:52px; border:0; border-radius:16px; color:#fff; font-weight:950;
  background:linear-gradient(135deg,#22c55e,#0f766e); box-shadow:0 14px 26px rgba(34,197,94,.20);
}
.whatsapp-primary-btn:disabled { opacity:.72; cursor:not-allowed; }
.whatsapp-secondary-btn {
  width:100%; height:50px; border:1px solid #bbf7d0; border-radius:16px; color:#047857; font-weight:950;
  background:#f0fdf4; box-shadow:0 10px 22px rgba(15,118,110,.08);
}
.whatsapp-field-label {
  display:block; margin:0 0 7px; color:#64748b; font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.04em;
}
.whatsapp-input {
  height:50px !important; border:1px solid #e2e8f0 !important; border-radius:16px !important; background:#fff !important;
  padding:0 14px !important; margin-bottom:12px; color:#0f172a !important; font-weight:800;
}
.whatsapp-test-message { height:auto !important; min-height:94px; padding:13px 14px !important; resize:vertical; }
.whatsapp-toggle-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 14px; margin:0 0 10px;
  border:1px solid #e2e8f0; border-radius:16px; background:#fff; color:#0f172a; font-weight:850;
}
.whatsapp-prompt-preview { height:auto !important; min-height:108px; border:1px solid #e2e8f0 !important; border-radius:18px !important; padding:14px !important; background:#f8fafc !important; color:#64748b !important; }
.whatsapp-limit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.whatsapp-limit-grid label span { display:block; margin-bottom:6px; color:#64748b; font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.04em; }
.whatsapp-feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.whatsapp-feature-list span { display:flex; align-items:center; gap:9px; padding:13px 14px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; color:#334155; font-weight:800; font-size:13px; }
.whatsapp-feature-list i { color:#16a34a; font-size:17px; }
.whatsapp-template-help { margin-top:8px; color:#64748b; font-size:12px; font-weight:750; }
.whatsapp-keyword-form { display:grid; grid-template-columns:minmax(120px,.65fr) minmax(180px,1fr) auto; gap:10px; align-items:start; }
.whatsapp-keyword-form .whatsapp-input { margin-bottom:0; }
.whatsapp-keyword-form .whatsapp-primary-btn { width:auto; min-width:160px; }
.whatsapp-keyword-list { display:grid; gap:8px; margin-top:12px; }
.whatsapp-empty { padding:14px; border-radius:16px; background:#f8fafc; border:1px solid #e2e8f0; color:#64748b; font-weight:800; text-align:center; }
.whatsapp-keyword-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid #e2e8f0; }
.whatsapp-keyword-row strong { display:block; color:#0f172a; font-family:'Poppins',sans-serif; font-weight:950; }
.whatsapp-keyword-row span { display:block; color:#64748b; font-size:12px; font-weight:700; margin-top:2px; }
.whatsapp-keyword-row button { width:38px; height:38px; border:0; border-radius:12px; background:#fee2e2; color:#dc2626; flex:0 0 auto; }
.wa-page-heading {
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; padding:0 2px;
}
.wa-page-heading h4 { margin:0; color:#0f274a; font:950 24px/1.2 'Poppins',sans-serif; }
.wa-page-heading p { margin:5px 0 0; color:#64748b; font-size:12px; font-weight:700; }
.wa-health-strip {
  display:flex; align-items:stretch; flex:0 0 auto; overflow:hidden; border:1px solid #dbe7f5; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.wa-health-strip span { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; min-width:120px; padding:10px 13px; border-right:1px solid #e2e8f0; }
.wa-health-strip span:last-child { border-right:0; }
.wa-health-strip i:not(.bi) { width:9px; height:9px; border-radius:50%; background:#22c55e; grid-row:1 / 3; }
.wa-health-strip .bi { color:#64748b; grid-row:1 / 3; }
.wa-health-strip b { color:#334155; font-size:10px; }
.wa-health-strip small { color:#64748b; font-size:9px; }
.wa-inline-actions { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:8px; }
.wa-inline-actions button { min-width:0; height:48px; font-size:12px; }
.whatsapp-danger-btn {
  width:100%; border:1px solid #fecaca; border-radius:16px; background:#fff; color:#dc2626; font-weight:900;
}
.wa-log-list { display:grid; gap:7px; }
.wa-log-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
.wa-log-row > i { color:#10b981; font-size:16px; }
.wa-log-row strong, .wa-log-row span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-log-row strong { color:#334155; font-size:11px; text-transform:capitalize; }
.wa-log-row span, .wa-log-row small { color:#64748b; font-size:10px; }

body.dark-mode .whatsapp-hero,
html.dark-mode body .whatsapp-hero {
  background:linear-gradient(135deg,#061428 0%,#0b1b36 54%,#052e2b 100%) !important;
  border-color:rgba(125,211,252,.18) !important; box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode .whatsapp-hero-copy h5,
body.dark-mode .whatsapp-card-head strong,
body.dark-mode .whatsapp-toggle-row,
html.dark-mode body .whatsapp-hero-copy h5,
html.dark-mode body .whatsapp-card-head strong,
html.dark-mode body .whatsapp-toggle-row { color:#ffffff !important; }
body.dark-mode .whatsapp-hero-copy small,
html.dark-mode body .whatsapp-hero-copy small { color:#86efac !important; }
body.dark-mode .whatsapp-hero-copy p,
body.dark-mode .whatsapp-card-head span,
html.dark-mode body .whatsapp-hero-copy p,
html.dark-mode body .whatsapp-card-head span { color:rgba(226,232,240,.74) !important; }
body.dark-mode .whatsapp-card,
html.dark-mode body .whatsapp-card {
  background:linear-gradient(180deg,#0b1b36 0%,#061428 100%) !important;
  border-color:rgba(125,211,252,.18) !important; box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode .whatsapp-status-badge,
body.dark-mode .whatsapp-toggle-row,
body.dark-mode .whatsapp-feature-list span,
html.dark-mode body .whatsapp-status-badge,
html.dark-mode body .whatsapp-toggle-row,
html.dark-mode body .whatsapp-feature-list span {
  background:rgba(7,18,37,.92) !important; border-color:rgba(148,163,184,.22) !important; color:#dff7ff !important;
}
body.dark-mode .whatsapp-status-badge.connected,
html.dark-mode body .whatsapp-status-badge.connected {
  background:rgba(34,197,94,.12) !important; border-color:rgba(134,239,172,.28) !important; color:#bbf7d0 !important;
}
body.dark-mode .whatsapp-qr-placeholder,
html.dark-mode body .whatsapp-qr-placeholder {
  background:rgba(34,197,94,.08) !important; border-color:rgba(134,239,172,.22) !important; color:#bbf7d0 !important;
}
body.dark-mode .whatsapp-prompt-preview,
body.dark-mode .whatsapp-input,
html.dark-mode body .whatsapp-prompt-preview {
  background:#071225 !important; border-color:rgba(125,211,252,.20) !important; color:#dff7ff !important;
}
body.dark-mode .whatsapp-secondary-btn,
html.dark-mode body .whatsapp-secondary-btn {
  border-color:rgba(134,239,172,.22); background:rgba(34,197,94,.09); color:#bbf7d0;
}
html.dark-mode body .whatsapp-input {
  background:#071225 !important; border-color:rgba(125,211,252,.20) !important; color:#dff7ff !important;
}
body.dark-mode .whatsapp-field-label,
body.dark-mode .whatsapp-limit-grid label span,
body.dark-mode .whatsapp-template-help,
html.dark-mode body .whatsapp-field-label,
html.dark-mode body .whatsapp-limit-grid label span,
html.dark-mode body .whatsapp-template-help { color:rgba(226,232,240,.70) !important; }
body.dark-mode .whatsapp-empty,
body.dark-mode .whatsapp-keyword-row,
html.dark-mode body .whatsapp-empty,
html.dark-mode body .whatsapp-keyword-row {
  background:rgba(7,18,37,.92) !important; border-color:rgba(148,163,184,.22) !important; color:#dff7ff !important;
}
body.dark-mode .whatsapp-keyword-row strong,
html.dark-mode body .whatsapp-keyword-row strong { color:#fff !important; }
body.dark-mode .whatsapp-keyword-row span,
html.dark-mode body .whatsapp-keyword-row span { color:rgba(226,232,240,.70) !important; }
body.dark-mode .wa-page-heading h4,
html.dark-mode body .wa-page-heading h4 { color:#fff; }
body.dark-mode .wa-page-heading p,
html.dark-mode body .wa-page-heading p { color:#91a9c5; }
body.dark-mode .wa-health-strip,
html.dark-mode body .wa-health-strip,
body.dark-mode .wa-log-row,
html.dark-mode body .wa-log-row {
  border-color:rgba(125,211,252,.17); background:#071225; color:#dff7ff;
}
body.dark-mode .wa-health-strip span,
html.dark-mode body .wa-health-strip span { border-color:rgba(125,211,252,.14); }
body.dark-mode .wa-health-strip b,
html.dark-mode body .wa-health-strip b,
body.dark-mode .wa-log-row strong,
html.dark-mode body .wa-log-row strong { color:#e6f4ff; }
body.dark-mode .wa-health-strip small,
html.dark-mode body .wa-health-strip small,
body.dark-mode .wa-log-row span,
body.dark-mode .wa-log-row small,
html.dark-mode body .wa-log-row span,
html.dark-mode body .wa-log-row small { color:#91a9c5; }
body.dark-mode .whatsapp-danger-btn,
html.dark-mode body .whatsapp-danger-btn { border-color:rgba(248,113,113,.28); background:rgba(127,29,29,.18); color:#fca5a5; }

@media (max-width: 768px) {
  .wa-page-heading { align-items:stretch; flex-direction:column; margin-bottom:11px; }
  .wa-page-heading h4 { font-size:20px; }
  .wa-health-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wa-health-strip span { min-width:0; padding:8px; }
  .wa-health-strip b { font-size:9px; }
  .wa-health-strip small { font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .whatsapp-hero { align-items:flex-start; flex-direction:column; gap:12px; min-height:auto; padding:16px; border-radius:24px; margin:0 -2px 12px; }
  .whatsapp-hero-icon { width:60px; height:60px; border-radius:20px; font-size:28px; }
  .whatsapp-status-badge { width:100%; justify-content:center; }
  .whatsapp-grid { grid-template-columns:1fr; gap:12px; }
  .whatsapp-card { border-radius:22px; padding:15px; }
  .whatsapp-feature-list { grid-template-columns:1fr; }
  .whatsapp-limit-grid { grid-template-columns:1fr; gap:0; }
  .whatsapp-keyword-form { grid-template-columns:1fr; }
  .whatsapp-keyword-form .whatsapp-primary-btn { width:100%; }
  .wa-inline-actions { grid-template-columns:1fr; }
}
body.dark-mode #page-telegram .telegram-hero-copy p,
html.dark-mode body #page-telegram .telegram-hero-copy p,
body.dark-mode #page-telegram .telegram-step-list,
html.dark-mode body #page-telegram .telegram-step-list,
body.dark-mode #page-telegram .telegram-command-row span,
html.dark-mode body #page-telegram .telegram-command-row span,
body.dark-mode #page-telegram .telegram-help-text,
html.dark-mode body #page-telegram .telegram-help-text,
body.dark-mode #page-telegram .text-muted,
html.dark-mode body #page-telegram .text-muted { color:rgba(226,232,240,.82) !important; }
body.dark-mode #page-telegram .telegram-soft-alert,
html.dark-mode body #page-telegram .telegram-soft-alert,
body.dark-mode #page-telegram .telegram-input-wrap,
html.dark-mode body #page-telegram .telegram-input-wrap,
body.dark-mode #page-telegram .telegram-command-row,
html.dark-mode body #page-telegram .telegram-command-row,
body.dark-mode #page-telegram .telegram-bot-pill,
html.dark-mode body #page-telegram .telegram-bot-pill { background:#081a33 !important; border-color:rgba(255,255,255,.14) !important; color:#ffffff !important; }
body.dark-mode #page-telegram .telegram-input-wrap .form-control,
html.dark-mode body #page-telegram .telegram-input-wrap .form-control { color:#ffffff !important; }
body.dark-mode #page-telegram .telegram-input-wrap .form-control::placeholder,
html.dark-mode body #page-telegram .telegram-input-wrap .form-control::placeholder { color:rgba(255,255,255,.55) !important; }
body.dark-mode #page-telegram .telegram-card-icon.warning,
html.dark-mode body #page-telegram .telegram-card-icon.warning,
body.dark-mode #page-telegram .telegram-card-icon.info,
html.dark-mode body #page-telegram .telegram-card-icon.info,
body.dark-mode #page-telegram .telegram-card-icon.primary,
html.dark-mode body #page-telegram .telegram-card-icon.primary,
body.dark-mode #page-telegram .telegram-step-list code,
html.dark-mode body #page-telegram .telegram-step-list code,
body.dark-mode #page-telegram .telegram-command-row code,
html.dark-mode body #page-telegram .telegram-command-row code,
body.dark-mode #page-telegram .telegram-help-text code,
html.dark-mode body #page-telegram .telegram-help-text code { background:#0d2548 !important; color:#ffffff !important; }
body.dark-mode #page-telegram .telegram-command-row b,
html.dark-mode body #page-telegram .telegram-command-row b,
body.dark-mode #page-telegram .telegram-bot-pill code,
html.dark-mode body #page-telegram .telegram-bot-pill code { color:#ffffff !important; }
body.dark-mode #page-telegram .telegram-card-divider,
html.dark-mode body #page-telegram .telegram-card-divider { background:rgba(255,255,255,.14); }

/* v1.1.74 - Badge role Akun mobile mode gelap dibuat premium hijau-biru. */
@media (max-width: 991px) {
  body.dark-mode[data-page="profil"] #page-profil #profileRole,
  html.dark-mode body[data-page="profil"] #page-profil #profileRole {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 45%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow:
      0 10px 24px rgba(20,184,166,.24),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(255,255,255,.12) !important;
    text-shadow: 0 1px 2px rgba(15,23,42,.26) !important;
  }
}

/* v1.1.75 - Border panel menu Akun mobile diturunkan sampai belakang Bottom Navigation. */
@media (max-width: 991px) {
  body[data-page="profil"] {
    --account-mobile-nav-overlap: calc(76px + env(safe-area-inset-bottom));
  }

  body[data-page="profil"] #page-profil,
  body[data-page="profil"] #page-profil.active,
  body.dark-mode[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil.active,
  html.dark-mode body[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil.active {
    inset: 0 !important;
    padding-bottom: 0 !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-card,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    margin-bottom: calc(-1 * var(--account-mobile-nav-overlap)) !important;
    padding-bottom: var(--account-mobile-nav-overlap) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
  }

  body.dark-mode[data-page="profil"] #page-profil .account-mobile-card,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-card {
    box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  body[data-page="profil"] #page-profil .account-mobile-list,
  body.dark-mode[data-page="profil"] #page-profil .account-mobile-list,
  html.dark-mode body[data-page="profil"] #page-profil .account-mobile-list {
    padding-bottom: calc(var(--account-mobile-nav-overlap) + 16px) !important;
    scroll-padding-bottom: calc(var(--account-mobile-nav-overlap) + 16px) !important;
  }
}

@media (max-width: 991.98px) {
  body[data-page="telegram"] {
    --telegram-mobile-top-gap: 0.2cm;
    --telegram-mobile-bottom-gap: 0.5cm;
    --telegram-mobile-nav-height: calc(75px + env(safe-area-inset-bottom));
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#f1f5f9 !important;
  }
  body[data-page="telegram"] #mobileHeader,
  body[data-page="telegram"] .mobile-header {
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body[data-page="telegram"] .main-content {
    margin-left:0 !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    background:#f1f5f9 !important;
  }
  body[data-page="telegram"] .content-area {
    position:relative !important;
    display:block !important;
    margin:0 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    padding:var(--telegram-mobile-top-gap) 12px calc(var(--telegram-mobile-nav-height) + var(--telegram-mobile-bottom-gap)) 12px !important;
    overflow:visible !important;
    transform:none !important;
    background:#f1f5f9 !important;
    z-index:auto !important;
  }
  body[data-page="telegram"] .page-section:not(#page-telegram) { display:none !important; }
  body[data-page="telegram"] #page-telegram,
  body[data-page="telegram"] #page-telegram.active {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:480px !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    background:transparent !important;
    animation:none !important;
  }
  body[data-page="telegram"] .telegram-mobile-title {
    display:flex !important;
    margin-top:0 !important;
    margin-bottom:10px !important;
    padding:0 !important;
    min-height:0 !important;
  }
  body[data-page="telegram"] .telegram-clean-hero { margin:0 -2px 12px -2px !important; padding:16px !important; border-radius:24px !important; min-height:auto !important; align-items:flex-start; gap:12px; }
  body[data-page="telegram"] .telegram-hero-icon { width:52px; height:52px; border-radius:18px; font-size:25px; }
  body[data-page="telegram"] .telegram-hero-copy h4 { font-size:18px; line-height:1.16; margin-bottom:6px; }
  body[data-page="telegram"] .telegram-hero-copy p { font-size:12px; line-height:1.5; }
  body[data-page="telegram"] .telegram-bot-pill { width:100%; justify-content:flex-start; margin-top:10px; padding:8px 10px; font-size:11px; }
  body[data-page="telegram"] .telegram-bot-pill code { font-size:12px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  body[data-page="telegram"] .telegram-layout-grid { grid-template-columns:1fr !important; gap:12px !important; margin-bottom:12px !important; }
  body[data-page="telegram"] .telegram-clean-card { border-radius:22px !important; padding:15px !important; margin-bottom:12px !important; }
  body[data-page="telegram"] .telegram-guide-card { margin-bottom:0 !important; }
  body[data-page="telegram"] .telegram-card-head { gap:10px; margin-bottom:12px; }
  body[data-page="telegram"] .telegram-card-icon { width:38px; height:38px; border-radius:14px; font-size:18px; }
  body[data-page="telegram"] .telegram-card-head h6 { font-size:15px; }
  body[data-page="telegram"] .telegram-command-list { gap:8px; }
  body[data-page="telegram"] .telegram-command-row { grid-template-columns:82px minmax(0,1fr); gap:9px; padding:10px; border-radius:14px; }
  body[data-page="telegram"] .telegram-command-row span { font-size:12px; }
  body[data-page="telegram"] .telegram-command-row b { display:none; }
  body.dark-mode[data-page="telegram"],
  html.dark-mode body[data-page="telegram"],
  body.dark-mode[data-page="telegram"] .main-content,
  html.dark-mode body[data-page="telegram"] .main-content,
  body.dark-mode[data-page="telegram"] .content-area,
  html.dark-mode body[data-page="telegram"] .content-area { background:#020617 !important; }
}



/* v1.1.72 - Telegram Bot Mobile: dasar v1.1.60 + judul disesuaikan ke 3px
   dan ruang bawah dinamis tetap mengikuti tinggi Bottom Navigation agar kartu terakhir tetap terlihat. */
@media (max-width: 991.98px) {
  body[data-page="telegram"] {
    --telegram-mobile-top-gap: 0px !important;
    --telegram-mobile-bottom-gap: 2px !important;
    --telegram-mobile-nav-height: calc(75px + env(safe-area-inset-bottom)) !important;
  }
  body[data-page="telegram"] .content-area {
    padding-top: 0 !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    padding-bottom: calc(var(--telegram-mobile-nav-height) + var(--telegram-mobile-bottom-gap)) !important;
  }
  body[data-page="telegram"] #page-telegram,
  body[data-page="telegram"] #page-telegram.active {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body[data-page="telegram"] .telegram-mobile-title {
    margin-top: 3px !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    transform: none !important;
  }
  body[data-page="telegram"] .telegram-guide-card {
    margin-bottom: calc(2px + env(safe-area-inset-bottom)) !important;
  }
}


/* v1.1.72 - Telegram Bot Mobile Bottom Safe Fix
   Bottom Navigation bersifat fixed, jadi jarak bawah tidak cukup memakai margin kecil.
   Spacer bawah dibuat mengikuti tinggi aktual Bottom Navigation + 2px agar kartu terakhir tidak tertutup. */
@media (max-width: 991.98px) {
  body[data-page="telegram"] {
    --telegram-mobile-bottom-gap: var(--mb-telegram-bottom-gap, 2px) !important;
    --telegram-mobile-nav-height: var(--mb-telegram-nav-height, calc(75px + env(safe-area-inset-bottom))) !important;
  }
  body[data-page="telegram"] .content-area {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  body[data-page="telegram"] #page-telegram,
  body[data-page="telegram"] #page-telegram.active {
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  body[data-page="telegram"] .telegram-mobile-title {
    margin-top: 3px !important;
    margin-bottom: 10px !important;
  }
  body[data-page="telegram"] .telegram-guide-card {
    margin-bottom: 0 !important;
  }
  body[data-page="telegram"] .telegram-bottom-safe-spacer {
    display: block !important;
    width: 100% !important;
    height: calc(var(--telegram-mobile-nav-height) + var(--telegram-mobile-bottom-gap)) !important;
    min-height: calc(var(--telegram-mobile-nav-height) + var(--telegram-mobile-bottom-gap)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    flex: 0 0 auto !important;
  }
}

/* v1.1.78 - Catatan Hutang Piutang: final dark mode futuristik untuk halaman, modal, dan dialog. */
body.dark-mode[data-page="hutang-piutang"],
html.dark-mode body[data-page="hutang-piutang"] {
  --debt-dark-bg:#020617;
  --debt-dark-panel:#071225;
  --debt-dark-panel-2:#0b1b36;
  --debt-dark-line:rgba(148,163,184,.24);
  --debt-dark-line-strong:rgba(125,211,252,.30);
  --debt-dark-text:#ffffff;
  --debt-dark-muted:rgba(226,232,240,.78);
  --debt-dark-soft:rgba(14,165,233,.13);
  background:
    radial-gradient(circle at 14% 5%, rgba(14,165,233,.20), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(20,184,166,.14), transparent 30%),
    linear-gradient(180deg,#020617 0%,#061126 52%,#020617 100%) !important;
}

body.dark-mode[data-page="hutang-piutang"] .main-content,
body.dark-mode[data-page="hutang-piutang"] .content-area,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang.active,
html.dark-mode body[data-page="hutang-piutang"] .main-content,
html.dark-mode body[data-page="hutang-piutang"] .content-area,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang.active {
  background:transparent !important;
  color:var(--debt-dark-text) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card {
  background:linear-gradient(180deg,rgba(11,27,54,.94) 0%,rgba(4,12,27,.97) 100%) !important;
  border:1px solid var(--debt-dark-line-strong) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-toolbar,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-item,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-empty {
  background:linear-gradient(180deg,rgba(8,21,45,.96) 0%,rgba(5,14,31,.98) 100%) !important;
  border-color:var(--debt-dark-line) !important;
  color:var(--debt-dark-text) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h1,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h2,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h3,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang h4,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang strong,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang b,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-person,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-person span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card strong,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h1,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h2,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h3,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang h4,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang strong,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang b,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-person,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-person span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-summary-card strong {
  color:var(--debt-dark-text) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang p,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang small,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang label,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .section-subtitle,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-item-bottom,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang p,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang small,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang label,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .section-subtitle,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-item-bottom {
  color:var(--debt-dark-muted) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta span,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-paid-chip,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tenant,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-delete-request,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn-light,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-info-btn,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-meta span,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-paid-chip,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tenant,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-delete-request,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn-light,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-info-btn {
  background:rgba(14,165,233,.12) !important;
  color:#e0f2fe !important;
  border-color:rgba(125,211,252,.24) !important;
  box-shadow:none !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button.active,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-tabs button.active {
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 55%,#14b8a6 100%) !important;
  color:#ffffff !important;
  border-color:rgba(191,219,254,.50) !important;
  box-shadow:0 14px 32px rgba(14,165,233,.26) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box input,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang input,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang select,
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang textarea,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-search-box input,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang input,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang select,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang textarea {
  background:transparent !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.18) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang *::placeholder,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang *::placeholder {
  color:rgba(226,232,240,.56) !important;
}

body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount.negative,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount.negative { color:#fb7185 !important; }
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount.positive,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-amount.positive { color:#34d399 !important; }
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-active,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-active { background:rgba(16,185,129,.17) !important; color:#86efac !important; border-color:rgba(134,239,172,.28) !important; }
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-warning,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-warning { background:rgba(245,158,11,.17) !important; color:#fde68a !important; border-color:rgba(253,230,138,.28) !important; }
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-overdue,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-overdue { background:rgba(244,63,94,.18) !important; color:#fecdd3 !important; border-color:rgba(254,205,211,.28) !important; }
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-paid,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-status.is-paid { background:rgba(59,130,246,.18) !important; color:#bfdbfe !important; border-color:rgba(191,219,254,.28) !important; }

body.dark-mode .swal2-popup.debt-modal,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup,
html.dark-mode body .swal2-popup.debt-modal,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup {
  background:linear-gradient(180deg,#0b1b36 0%,#061226 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:0 30px 86px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode .swal2-popup.debt-modal .swal2-html-container,
body.dark-mode .swal2-popup.debt-modal .swal2-title,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup .swal2-title,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup .swal2-html-container,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup strong,
html.dark-mode body .swal2-popup.debt-modal .swal2-html-container,
html.dark-mode body .swal2-popup.debt-modal .swal2-title,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup .swal2-title,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup .swal2-html-container,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup strong {
  color:#ffffff !important;
}

body.dark-mode .swal2-popup.debt-modal p,
body.dark-mode .swal2-popup.debt-modal small,
body.dark-mode .swal2-popup.debt-modal label,
body.dark-mode .swal2-popup.debt-modal dt,
body.dark-mode .swal2-popup.debt-modal span,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup p,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup small,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup label,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup .swal2-html-container,
html.dark-mode body .swal2-popup.debt-modal p,
html.dark-mode body .swal2-popup.debt-modal small,
html.dark-mode body .swal2-popup.debt-modal label,
html.dark-mode body .swal2-popup.debt-modal dt,
html.dark-mode body .swal2-popup.debt-modal span,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup p,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup small,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup label,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup .swal2-html-container {
  color:rgba(226,232,240,.80) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-form-section,
body.dark-mode .swal2-popup.debt-modal .debt-type-picker label,
body.dark-mode .swal2-popup.debt-modal .debt-section-title > span,
body.dark-mode .swal2-popup.debt-modal .input-group,
body.dark-mode .swal2-popup.debt-modal .form-control,
body.dark-mode .swal2-popup.debt-modal .form-select,
body.dark-mode .swal2-popup.debt-modal .input-group-text,
body.dark-mode .swal2-popup.debt-modal .debt-doc-list,
body.dark-mode .swal2-popup.debt-modal .debt-doc,
body.dark-mode .swal2-popup.debt-modal .debt-installment-quick > div,
body.dark-mode .swal2-popup.debt-modal .installment-clean-section,
body.dark-mode .swal2-popup.debt-modal .debt-payment-files.empty,
body.dark-mode .swal2-popup.debt-modal .swal2-actions,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup .swal2-actions,
html.dark-mode body .swal2-popup.debt-modal .debt-form-section,
html.dark-mode body .swal2-popup.debt-modal .debt-type-picker label,
html.dark-mode body .swal2-popup.debt-modal .debt-section-title > span,
html.dark-mode body .swal2-popup.debt-modal .input-group,
html.dark-mode body .swal2-popup.debt-modal .form-control,
html.dark-mode body .swal2-popup.debt-modal .form-select,
html.dark-mode body .swal2-popup.debt-modal .input-group-text,
html.dark-mode body .swal2-popup.debt-modal .debt-doc-list,
html.dark-mode body .swal2-popup.debt-modal .debt-doc,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-quick > div,
html.dark-mode body .swal2-popup.debt-modal .installment-clean-section,
html.dark-mode body .swal2-popup.debt-modal .debt-payment-files.empty,
html.dark-mode body .swal2-popup.debt-modal .swal2-actions,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup .swal2-actions {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  color:#ffffff !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:none !important;
}

body.dark-mode .swal2-popup.debt-modal input,
body.dark-mode .swal2-popup.debt-modal textarea,
body.dark-mode .swal2-popup.debt-modal select,
html.dark-mode body .swal2-popup.debt-modal input,
html.dark-mode body .swal2-popup.debt-modal textarea,
html.dark-mode body .swal2-popup.debt-modal select {
  color:#ffffff !important;
  caret-color:#7dd3fc !important;
}

body.dark-mode .swal2-popup.debt-modal *::placeholder,
html.dark-mode body .swal2-popup.debt-modal *::placeholder {
  color:rgba(226,232,240,.52) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-form-hero,
body.dark-mode .swal2-popup.debt-modal .debt-detail-head,
body.dark-mode .swal2-popup.debt-modal .debt-installment-hero,
html.dark-mode body .swal2-popup.debt-modal .debt-form-hero,
html.dark-mode body .swal2-popup.debt-modal .debt-detail-head,
html.dark-mode body .swal2-popup.debt-modal .debt-installment-hero {
  background:linear-gradient(135deg,rgba(37,99,235,.84),rgba(14,165,233,.48),rgba(20,184,166,.34)) !important;
  border:1px solid rgba(191,219,254,.30) !important;
  color:#ffffff !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-impact-note.out,
html.dark-mode body .swal2-popup.debt-modal .debt-impact-note.out {
  background:rgba(244,63,94,.14) !important;
  color:#fecdd3 !important;
  border-color:rgba(251,113,133,.28) !important;
}

body.dark-mode .swal2-popup.debt-modal .debt-impact-note.in,
html.dark-mode body .swal2-popup.debt-modal .debt-impact-note.in {
  background:rgba(16,185,129,.14) !important;
  color:#a7f3d0 !important;
  border-color:rgba(52,211,153,.28) !important;
}

body.dark-mode .swal2-popup.debt-modal .swal2-close,
body.dark-mode[data-page="hutang-piutang"] .swal2-popup .swal2-close,
html.dark-mode body .swal2-popup.debt-modal .swal2-close,
html.dark-mode body[data-page="hutang-piutang"] .swal2-popup .swal2-close {
  color:rgba(255,255,255,.74) !important;
}

body.dark-mode .swal2-popup.debt-detail-modal .debt-detail dd,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail dd *,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-titlebar span,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-titlebar strong,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-head strong,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-head small,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-head span,
body.dark-mode .swal2-popup.debt-detail-modal .debt-installment-quick strong,
body.dark-mode .swal2-popup.debt-detail-modal .debt-doc-list > strong,
body.dark-mode .swal2-popup.debt-detail-modal .debt-payment-row strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail dd,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail dd *,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-titlebar span,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-titlebar strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-head strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-head small,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-head span,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-installment-quick strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-doc-list > strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-payment-row strong {
  color:#ffffff !important;
}

body.dark-mode .swal2-popup.debt-detail-modal .debt-detail dt,
body.dark-mode .swal2-popup.debt-detail-modal .debt-detail-titlebar small,
body.dark-mode .swal2-popup.debt-detail-modal .debt-installment-quick small,
body.dark-mode .swal2-popup.debt-detail-modal .debt-payment-row span,
body.dark-mode .swal2-popup.debt-detail-modal .debt-payment-row small,
body.dark-mode .swal2-popup.debt-detail-modal .debt-telegram-hint,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail dt,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail-titlebar small,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-installment-quick small,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-payment-row span,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-payment-row small,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-telegram-hint {
  color:rgba(226,232,240,.78) !important;
}

body.dark-mode .swal2-popup.debt-detail-modal .debt-detail dl,
body.dark-mode .swal2-popup.debt-detail-modal .debt-doc-list,
body.dark-mode .swal2-popup.debt-detail-modal .debt-telegram-hint,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-detail dl,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-doc-list,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-telegram-hint {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
}

@media (max-width: 991.98px) {
  body.dark-mode[data-page="hutang-piutang"],
  html.dark-mode body[data-page="hutang-piutang"] {
    overflow-x:hidden !important;
  }
  body.dark-mode[data-page="hutang-piutang"] .main-content,
  body.dark-mode[data-page="hutang-piutang"] .content-area,
  html.dark-mode body[data-page="hutang-piutang"] .main-content,
  html.dark-mode body[data-page="hutang-piutang"] .content-area {
    background:#020617 !important;
  }
  body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card,
  html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card {
    border-radius:24px !important;
    margin-bottom:calc(86px + env(safe-area-inset-bottom)) !important;
  }
  body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-actions,
  html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-actions {
    border-top-color:rgba(148,163,184,.20) !important;
  }
}

/* v1.1.79 - Live Chat Bantuan: dark mode futuristik menyeluruh + tombol kirim ramah keyboard mobile. */
body.dark-mode[data-page="bantuan"],
html.dark-mode body[data-page="bantuan"] {
  --help-dark-bg:#020617;
  --help-dark-panel:#071225;
  --help-dark-panel-2:#0b1b36;
  --help-dark-line:rgba(148,163,184,.24);
  --help-dark-line-strong:rgba(125,211,252,.32);
  --help-dark-text:#ffffff;
  --help-dark-muted:rgba(226,232,240,.78);
  background:
    radial-gradient(circle at 12% 3%, rgba(37,99,235,.22), transparent 34%),
    radial-gradient(circle at 92% 16%, rgba(20,184,166,.15), transparent 30%),
    linear-gradient(180deg,#020617 0%,#061126 52%,#020617 100%) !important;
}

body.dark-mode[data-page="bantuan"] .main-content,
body.dark-mode[data-page="bantuan"] .content-area,
body.dark-mode[data-page="bantuan"] #page-bantuan,
body.dark-mode[data-page="bantuan"] #page-bantuan.active,
html.dark-mode body[data-page="bantuan"] .main-content,
html.dark-mode body[data-page="bantuan"] .content-area,
html.dark-mode body[data-page="bantuan"] #page-bantuan,
html.dark-mode body[data-page="bantuan"] #page-bantuan.active {
  background:transparent !important;
  color:var(--help-dark-text) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan > h4,
body.dark-mode[data-page="bantuan"] #page-bantuan .text-dark,
body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-hero h5,
body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-hero small,
body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-hero p,
body.dark-mode[data-page="bantuan"] #page-bantuan .empty-state p,
html.dark-mode body[data-page="bantuan"] #page-bantuan > h4,
html.dark-mode body[data-page="bantuan"] #page-bantuan .text-dark,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-hero h5,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-hero small,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-hero p,
html.dark-mode body[data-page="bantuan"] #page-bantuan .empty-state p {
  color:var(--help-dark-text) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-card,
body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-window,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-card,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-window {
  background:linear-gradient(180deg,rgba(11,27,54,.94) 0%,rgba(4,12,27,.97) 100%) !important;
  border:1px solid var(--help-dark-line-strong) !important;
  color:var(--help-dark-text) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-hero,
html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-hero {
  background:linear-gradient(135deg,rgba(37,99,235,.36) 0%,rgba(14,165,233,.20) 52%,rgba(20,184,166,.18) 100%) !important;
  border-color:rgba(125,211,252,.28) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-thread,
body.dark-mode .swal2-popup.chat-modal .chat-thread,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-thread,
html.dark-mode body .swal2-popup.chat-modal .chat-thread {
  background:
    radial-gradient(circle at 14px 14px, rgba(125,211,252,.08) 1px, transparent 1.6px),
    linear-gradient(180deg,#051127 0%,#020817 100%) !important;
  background-size:28px 28px, auto !important;
  border:1px solid var(--help-dark-line, rgba(148,163,184,.24)) !important;
  color:#ffffff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-message-row.incoming .chat-bubble,
body.dark-mode .swal2-popup.chat-modal .chat-message-row.incoming .chat-bubble,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-message-row.incoming .chat-bubble,
html.dark-mode body .swal2-popup.chat-modal .chat-message-row.incoming .chat-bubble {
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(8,21,45,.98)) !important;
  color:#ffffff !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.26) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-message-row.outgoing .chat-bubble,
body.dark-mode .swal2-popup.chat-modal .chat-message-row.outgoing .chat-bubble,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-message-row.outgoing .chat-bubble,
html.dark-mode body .swal2-popup.chat-modal .chat-message-row.outgoing .chat-bubble {
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 58%,#14b8a6 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(191,219,254,.35) !important;
  box-shadow:0 10px 26px rgba(14,165,233,.28) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-text,
body.dark-mode[data-page="bantuan"] #page-bantuan .chat-bubble *,
body.dark-mode .swal2-popup.chat-modal .chat-text,
body.dark-mode .swal2-popup.chat-modal .chat-bubble *,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-text,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-bubble *,
html.dark-mode body .swal2-popup.chat-modal .chat-text,
html.dark-mode body .swal2-popup.chat-modal .chat-bubble * {
  color:#ffffff !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-meta,
body.dark-mode .swal2-popup.chat-modal .chat-meta,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-meta,
html.dark-mode body .swal2-popup.chat-modal .chat-meta {
  color:rgba(226,232,240,.72) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-compose,
body.dark-mode .swal2-popup.chat-modal .chat-compose,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-compose,
html.dark-mode body .swal2-popup.chat-modal .chat-compose {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border:1px solid rgba(125,211,252,.28) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-compose textarea,
body.dark-mode .swal2-popup.chat-modal .chat-compose textarea,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-compose textarea,
html.dark-mode body .swal2-popup.chat-modal .chat-compose textarea {
  background:transparent !important;
  color:#ffffff !important;
  caret-color:#7dd3fc !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-compose textarea::placeholder,
body.dark-mode .swal2-popup.chat-modal .chat-compose textarea::placeholder,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-compose textarea::placeholder,
html.dark-mode body .swal2-popup.chat-modal .chat-compose textarea::placeholder {
  color:rgba(226,232,240,.54) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-file-btn,
body.dark-mode .swal2-popup.chat-modal .chat-file-btn,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-file-btn,
html.dark-mode body .swal2-popup.chat-modal .chat-file-btn {
  background:rgba(14,165,233,.14) !important;
  color:#e0f2fe !important;
  border:1px solid rgba(125,211,252,.24) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-send-btn,
body.dark-mode .swal2-popup.chat-modal .chat-send-btn,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-send-btn,
html.dark-mode body .swal2-popup.chat-modal .chat-send-btn {
  touch-action:manipulation;
  background:linear-gradient(135deg,#10b981 0%,#14b8a6 42%,#2563eb 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(20,184,166,.30) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-file-name,
body.dark-mode[data-page="bantuan"] #page-bantuan .chat-rating,
body.dark-mode .swal2-popup.chat-modal .chat-file-name,
body.dark-mode .swal2-popup.chat-modal .chat-rating,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-file-name,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-rating,
html.dark-mode body .swal2-popup.chat-modal .chat-file-name,
html.dark-mode body .swal2-popup.chat-modal .chat-rating {
  color:rgba(226,232,240,.78) !important;
}

body.dark-mode[data-page="bantuan"] #page-bantuan .chat-file-link,
body.dark-mode .swal2-popup.chat-modal .chat-file-link,
html.dark-mode body[data-page="bantuan"] #page-bantuan .chat-file-link,
html.dark-mode body .swal2-popup.chat-modal .chat-file-link {
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.20) !important;
}

body.dark-mode .swal2-popup.chat-modal,
html.dark-mode body .swal2-popup.chat-modal {
  background:linear-gradient(180deg,#0b1b36 0%,#061226 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:0 30px 86px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode .swal2-popup.chat-modal .swal2-title,
body.dark-mode .swal2-popup.chat-modal .swal2-title *,
body.dark-mode .swal2-popup.chat-modal .chat-head-status,
html.dark-mode body .swal2-popup.chat-modal .swal2-title,
html.dark-mode body .swal2-popup.chat-modal .swal2-title *,
html.dark-mode body .swal2-popup.chat-modal .chat-head-status {
  color:#ffffff !important;
}

@media (max-width: 991.98px) {
  body.dark-mode[data-page="bantuan"] .main-content,
  body.dark-mode[data-page="bantuan"] .content-area,
  html.dark-mode body[data-page="bantuan"] .main-content,
  html.dark-mode body[data-page="bantuan"] .content-area {
    background:#020617 !important;
  }
  body.dark-mode[data-page="bantuan"] #page-bantuan .help-page-card,
  html.dark-mode body[data-page="bantuan"] #page-bantuan .help-page-card {
    border-radius:20px 20px 0 0 !important;
  }
}

/* v1.1.80 - Tentang Aplikasi: dark mode futuristik menyeluruh. */
body.dark-mode .swal2-popup.about-modal.about-app-premium,
html.dark-mode body .swal2-popup.about-modal.about-app-premium {
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.24), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(20,184,166,.16), transparent 32%),
    linear-gradient(180deg,#0b1b36 0%,#061226 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.26) !important;
  box-shadow:0 30px 86px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .swal2-title,
body.dark-mode .swal2-popup.about-modal.about-app-premium .swal2-title *,
body.dark-mode .swal2-popup.about-modal.about-app-premium .swal2-html-container,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-wrap,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-brand h6,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body h6,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body strong,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-credit strong,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .swal2-title,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .swal2-title *,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .swal2-html-container,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-wrap,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-brand h6,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body h6,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body strong,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-credit strong {
  color:#ffffff !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-brand small,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-brand span,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body p,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-feature-item p,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-credit small,
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-credit span,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-brand small,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-brand span,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body p,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-feature-item p,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-credit small,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-credit span {
  color:rgba(226,232,240,.80) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-hero,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-hero {
  background:linear-gradient(135deg,rgba(37,99,235,.88) 0%,rgba(14,165,233,.56) 56%,rgba(20,184,166,.42) 100%) !important;
  border:1px solid rgba(191,219,254,.30) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-logo,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-logo {
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.24) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-feature-title,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-feature-title {
  background:rgba(14,165,233,.15) !important;
  color:#e0f2fe !important;
  border:1px solid rgba(125,211,252,.26) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-feature-item,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-feature-item {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-feature-item span,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-feature-item span {
  background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(20,184,166,.24)) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:none !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-spirit,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-spirit {
  background:linear-gradient(135deg,rgba(244,63,94,.20),rgba(37,99,235,.18),rgba(20,184,166,.16)) !important;
  color:#ffffff !important;
  border:1px solid rgba(251,113,133,.24) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-credit,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-credit {
  border-top-color:rgba(148,163,184,.24) !important;
  background:linear-gradient(180deg,rgba(8,21,45,.50),rgba(5,15,33,.30)) !important;
  border-radius:18px !important;
}

body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar {
  width:8px;
}
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar-track,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar-track {
  background:rgba(255,255,255,.06);
  border-radius:999px;
}
body.dark-mode .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar-thumb,
html.dark-mode body .swal2-popup.about-modal.about-app-premium .about-app-body::-webkit-scrollbar-thumb {
  background:rgba(125,211,252,.36);
  border-radius:999px;
}

/* v1.1.81 - Log Aplikasi: show entries, filter, dan search. */
.log-toolbar {
  display:grid;
  grid-template-columns:auto minmax(170px,220px) minmax(220px,1fr);
  gap:10px;
  align-items:center;
  margin:4px 0 10px;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#f8fafc;
}
.log-show-control,
.log-filter-control,
.log-search-control {
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  border:1px solid #dbe6f3;
  border-radius:14px;
  background:#ffffff;
  color:#64748b;
  padding:0 10px;
  font-size:12px;
  font-weight:850;
}
.log-show-control .form-select {
  width:96px;
  min-height:38px;
}
.log-filter-control .form-select {
  min-width:142px;
}
.log-search-control .form-control {
  min-height:38px;
  width:100%;
}
.log-show-control .form-select,
.log-filter-control .form-select,
.log-search-control .form-control {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding-left:2px;
  padding-right:2px;
  color:#0f172a;
  font-size:12px;
  font-weight:800;
}
.log-table-info {
  margin:0 2px 10px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
body.dark-mode #page-logs .log-toolbar,
html.dark-mode body #page-logs .log-toolbar {
  background:linear-gradient(180deg,rgba(8,21,45,.96) 0%,rgba(5,14,31,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark-mode #page-logs .log-show-control,
body.dark-mode #page-logs .log-filter-control,
body.dark-mode #page-logs .log-search-control,
html.dark-mode body #page-logs .log-show-control,
html.dark-mode body #page-logs .log-filter-control,
html.dark-mode body #page-logs .log-search-control {
  background:#071225 !important;
  color:rgba(226,232,240,.78) !important;
  border-color:rgba(125,211,252,.24) !important;
}
body.dark-mode #page-logs .log-show-control .form-select,
body.dark-mode #page-logs .log-filter-control .form-select,
body.dark-mode #page-logs .log-search-control .form-control,
html.dark-mode body #page-logs .log-show-control .form-select,
html.dark-mode body #page-logs .log-filter-control .form-select,
html.dark-mode body #page-logs .log-search-control .form-control {
  color:#ffffff !important;
}
body.dark-mode #page-logs .log-show-control .form-select option,
body.dark-mode #page-logs .log-filter-control .form-select option,
html.dark-mode body #page-logs .log-show-control .form-select option,
html.dark-mode body #page-logs .log-filter-control .form-select option {
  background:#071225 !important;
  color:#ffffff !important;
}
body.dark-mode #page-logs .log-search-control .form-control::placeholder,
html.dark-mode body #page-logs .log-search-control .form-control::placeholder {
  color:rgba(226,232,240,.52) !important;
}
body.dark-mode #page-logs .log-table-info,
html.dark-mode body #page-logs .log-table-info {
  color:rgba(226,232,240,.72) !important;
}
@media (max-width: 768px) {
  .log-toolbar {
    grid-template-columns:1fr;
    gap:8px;
    padding:9px;
    border-radius:16px;
  }
  .log-show-control,
  .log-filter-control,
  .log-search-control {
    width:100%;
  }
  .log-show-control .form-select,
  .log-filter-control .form-select,
  .log-search-control .form-control {
    flex:1;
    width:100%;
  }
}

/* v1.1.82 - Halaman Saldo: dark mode futuristik menyeluruh. */
body.dark-mode[data-page="saldo-staf"],
html.dark-mode body[data-page="saldo-staf"] {
  --saldo-dark-bg:#020617;
  --saldo-dark-panel:#071225;
  --saldo-dark-panel-2:#0b1b36;
  --saldo-dark-line:rgba(148,163,184,.24);
  --saldo-dark-line-strong:rgba(125,211,252,.32);
  --saldo-dark-text:#ffffff;
  --saldo-dark-muted:rgba(226,232,240,.78);
  background:
    radial-gradient(circle at 12% 4%, rgba(37,99,235,.22), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(16,185,129,.14), transparent 30%),
    linear-gradient(180deg,#020617 0%,#061126 52%,#020617 100%) !important;
}

body.dark-mode[data-page="saldo-staf"] .main-content,
body.dark-mode[data-page="saldo-staf"] .content-area,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf.active,
html.dark-mode body[data-page="saldo-staf"] .main-content,
html.dark-mode body[data-page="saldo-staf"] .content-area,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf.active {
  background:transparent !important;
  color:var(--saldo-dark-text) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf > h4,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .card-header-custom h6,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf #balanceSectionTitle,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-info strong,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle span,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf > h4,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .card-header-custom h6,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf #balanceSectionTitle,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-info strong,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle span,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong {
  color:#ffffff !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .card-custom,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .card-custom {
  background:linear-gradient(180deg,rgba(11,27,54,.94) 0%,rgba(4,12,27,.97) 100%) !important;
  border:1px solid var(--saldo-dark-line-strong) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .card-header-custom,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .card-header-custom {
  border-bottom-color:rgba(148,163,184,.18) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .saldo-refresh-btn,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .saldo-refresh-btn {
  background:rgba(14,165,233,.14) !important;
  color:#e0f2fe !important;
  border-color:rgba(125,211,252,.26) !important;
  box-shadow:0 10px 24px rgba(14,165,233,.14) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-wrap,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-wrap {
  background:linear-gradient(180deg,rgba(8,21,45,.96) 0%,rgba(5,14,31,.98) 100%) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle {
  background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(20,184,166,.16)) !important;
  border-color:rgba(125,211,252,.24) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle i:first-child,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary-toggle i:first-child {
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(14,165,233,.22) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary {
  background:transparent !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary div,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary div,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
  color:#ffffff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card::before,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card::before {
  background:linear-gradient(180deg,#38bdf8,#14b8a6) !important;
  opacity:.85 !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-avatar,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card .staff-avatar,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-avatar,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-card .staff-avatar {
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 55%,#14b8a6 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(191,219,254,.32) !important;
  box-shadow:0 12px 26px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary span,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-info span,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary span,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-info span {
  color:rgba(226,232,240,.78) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong.positive,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-value.positive,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong.positive,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-value.positive {
  color:#86efac !important;
  background:rgba(16,185,129,.15) !important;
  border-color:rgba(134,239,172,.24) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong.negative,
body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .staff-balance-value.negative,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-summary strong.negative,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .staff-balance-value.negative {
  color:#fecdd3 !important;
  background:rgba(244,63,94,.16) !important;
  border-color:rgba(254,205,211,.24) !important;
}

body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .empty-state p,
html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .empty-state p {
  color:rgba(226,232,240,.78) !important;
}

@media (max-width: 991.98px) {
  body.dark-mode[data-page="saldo-staf"] .main-content,
  body.dark-mode[data-page="saldo-staf"] .content-area,
  html.dark-mode body[data-page="saldo-staf"] .main-content,
  html.dark-mode body[data-page="saldo-staf"] .content-area {
    background:#020617 !important;
  }
  body.dark-mode[data-page="saldo-staf"] #page-saldo-staf .card-custom,
  html.dark-mode body[data-page="saldo-staf"] #page-saldo-staf .card-custom {
    border-radius:24px !important;
  }
}

/* v1.1.83 - Benefit Tenant: trial, kompensasi, dan fasilitas khusus. */
.tenant-benefit-page {
  --benefit-text:#0f172a;
  --benefit-muted:#64748b;
  --benefit-line:#e2e8f0;
}
.tenant-benefit-hero {
  display:flex;
  gap:16px;
  align-items:center;
  padding:20px;
  border-radius:28px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#eff6ff,#ecfdf5);
  border:1px solid #dbeafe;
  box-shadow:0 18px 42px rgba(37,99,235,.10);
}
.tenant-benefit-icon {
  width:62px;
  height:62px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  font-size:29px;
  box-shadow:0 16px 32px rgba(37,99,235,.24);
}
.tenant-benefit-hero small {
  display:block;
  color:#2563eb;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:4px;
}
.tenant-benefit-hero h5 {
  margin:0 0 5px;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.45px;
}
.tenant-benefit-hero p {
  margin:0;
  color:#475569;
  font-size:13px;
  line-height:1.55;
  font-weight:650;
}
.tenant-benefit-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.tenant-benefit-card {
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 14px 36px rgba(15,23,42,.06);
}
.tenant-benefit-wide {
  margin-top:14px;
}
.tenant-benefit-card-head {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.tenant-benefit-card-head > i {
  width:42px;
  height:42px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:#eff6ff;
  color:#2563eb;
  font-size:19px;
}
.tenant-benefit-card-head strong {
  display:block;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
}
.tenant-benefit-card-head span {
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:12px;
  line-height:1.42;
  font-weight:700;
}
.tenant-benefit-card label:not(.benefit-toggle-row) {
  display:block;
  margin:10px 0 5px;
  color:#64748b;
  font-size:10.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tenant-benefit-card .form-control,
.tenant-benefit-card .form-select {
  border-radius:14px;
  border:1px solid #dbe6f3;
  background:#f8fafc;
  min-height:42px;
  font-weight:800;
  font-size:13px;
}
.benefit-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  margin:8px 0 10px;
  padding:9px 12px;
  border-radius:15px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#0f172a;
  font-weight:900;
}
.benefit-toggle-row input {
  width:20px;
  height:20px;
  accent-color:#2563eb;
}
.tenant-benefit-list {
  display:grid;
  gap:10px;
}
.tenant-benefit-row {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) .7fr minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:13px 14px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}
.tenant-benefit-row strong,
.tenant-benefit-row b {
  display:block;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
}
.tenant-benefit-row span {
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:750;
  margin-top:2px;
}
body.dark-mode[data-page="tenant-benefits"],
html.dark-mode body[data-page="tenant-benefits"] {
  background:radial-gradient(circle at 14% 2%, rgba(37,99,235,.22), transparent 34%), radial-gradient(circle at 90% 16%, rgba(20,184,166,.16), transparent 30%), linear-gradient(180deg,#020617 0%,#061126 52%,#020617 100%) !important;
}
body.dark-mode[data-page="tenant-benefits"] .main-content,
body.dark-mode[data-page="tenant-benefits"] .content-area,
body.dark-mode[data-page="tenant-benefits"] #page-tenant-benefits,
html.dark-mode body[data-page="tenant-benefits"] .main-content,
html.dark-mode body[data-page="tenant-benefits"] .content-area,
html.dark-mode body[data-page="tenant-benefits"] #page-tenant-benefits {
  background:transparent !important;
  color:#ffffff !important;
}
body.dark-mode[data-page="tenant-benefits"] #page-tenant-benefits > h4,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-hero h5,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card-head strong,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-row strong,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-row b,
body.dark-mode[data-page="tenant-benefits"] .benefit-toggle-row,
html.dark-mode body[data-page="tenant-benefits"] #page-tenant-benefits > h4,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-hero h5,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card-head strong,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-row strong,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-row b,
html.dark-mode body[data-page="tenant-benefits"] .benefit-toggle-row {
  color:#ffffff !important;
}
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-hero,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-row,
body.dark-mode[data-page="tenant-benefits"] .benefit-toggle-row,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-hero,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-row,
html.dark-mode body[data-page="tenant-benefits"] .benefit-toggle-row {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-hero small,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-hero p,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card-head span,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card label:not(.benefit-toggle-row),
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-row span,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-hero small,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-hero p,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card-head span,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card label:not(.benefit-toggle-row),
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-row span {
  color:rgba(226,232,240,.78) !important;
}
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card .form-control,
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card .form-select,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card .form-control,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card .form-select {
  background:#071225 !important;
  color:#ffffff !important;
  border-color:rgba(125,211,252,.24) !important;
}
body.dark-mode[data-page="tenant-benefits"] .tenant-benefit-card .form-select option,
html.dark-mode body[data-page="tenant-benefits"] .tenant-benefit-card .form-select option {
  background:#071225 !important;
  color:#ffffff !important;
}
@media (max-width:991.98px) {
  .tenant-benefit-hero { padding:16px; border-radius:24px; align-items:flex-start; }
  .tenant-benefit-icon { width:52px; height:52px; border-radius:18px; font-size:24px; }
  .tenant-benefit-hero h5 { font-size:18px; }
  .tenant-benefit-hero p { font-size:12px; }
  .tenant-benefit-grid { grid-template-columns:1fr; }
  .tenant-benefit-card { border-radius:22px; padding:15px; }
  .tenant-benefit-row { grid-template-columns:1fr; gap:7px; }
}

/* v1.1.84 - Pengumuman dan Live Chat Owner: light/dark mode dipisah dan dirapikan. */
body[data-page="pengumuman"] .announcement-page,
body[data-page="live-chat"] .owner-live-chat-page {
  color:#0f172a;
}
body[data-page="pengumuman"] .announcement-card .form-control,
body[data-page="pengumuman"] .announcement-card .form-select,
body[data-page="pengumuman"] .announcement-card textarea,
body[data-page="live-chat"] .announcement-card .form-control,
body[data-page="live-chat"] .announcement-card .form-select,
body[data-page="live-chat"] .announcement-card textarea {
  border:1px solid #dbe6f3;
  background:#f8fafc;
  color:#0f172a;
  font-weight:750;
}
body[data-page="pengumuman"] .announcement-item,
body[data-page="live-chat"] .support-chat-item,
body[data-page="live-chat"] .support-agent-item {
  border-color:#e2e8f0;
  background:#ffffff;
}
body.dark-mode[data-page="pengumuman"],
body.dark-mode[data-page="live-chat"],
html.dark-mode body[data-page="pengumuman"],
html.dark-mode body[data-page="live-chat"] {
  background:radial-gradient(circle at 12% 0%, rgba(37,99,235,.20), transparent 32%), radial-gradient(circle at 86% 12%, rgba(20,184,166,.16), transparent 30%), linear-gradient(180deg,#020617 0%,#061126 52%,#020617 100%) !important;
}
body.dark-mode[data-page="pengumuman"] .main-content,
body.dark-mode[data-page="pengumuman"] .content-area,
body.dark-mode[data-page="pengumuman"] #page-pengumuman,
body.dark-mode[data-page="live-chat"] .main-content,
body.dark-mode[data-page="live-chat"] .content-area,
body.dark-mode[data-page="live-chat"] #page-live-chat,
html.dark-mode body[data-page="pengumuman"] .main-content,
html.dark-mode body[data-page="pengumuman"] .content-area,
html.dark-mode body[data-page="pengumuman"] #page-pengumuman,
html.dark-mode body[data-page="live-chat"] .main-content,
html.dark-mode body[data-page="live-chat"] .content-area,
html.dark-mode body[data-page="live-chat"] #page-live-chat {
  background:transparent !important;
  color:#ffffff !important;
}
body.dark-mode[data-page="pengumuman"] #page-pengumuman > h4,
body.dark-mode[data-page="pengumuman"] .card-header-custom h6,
body.dark-mode[data-page="pengumuman"] .section-subtitle,
body.dark-mode[data-page="pengumuman"] .announcement-item strong,
body.dark-mode[data-page="live-chat"] #page-live-chat > h4,
body.dark-mode[data-page="live-chat"] .owner-live-chat-hero h5,
body.dark-mode[data-page="live-chat"] .card-header-custom h6,
body.dark-mode[data-page="live-chat"] .support-info-card strong,
body.dark-mode[data-page="live-chat"] .support-chat-title strong,
body.dark-mode[data-page="live-chat"] .support-agent-item .log-body strong,
html.dark-mode body[data-page="pengumuman"] #page-pengumuman > h4,
html.dark-mode body[data-page="pengumuman"] .card-header-custom h6,
html.dark-mode body[data-page="pengumuman"] .section-subtitle,
html.dark-mode body[data-page="pengumuman"] .announcement-item strong,
html.dark-mode body[data-page="live-chat"] #page-live-chat > h4,
html.dark-mode body[data-page="live-chat"] .owner-live-chat-hero h5,
html.dark-mode body[data-page="live-chat"] .card-header-custom h6,
html.dark-mode body[data-page="live-chat"] .support-info-card strong,
html.dark-mode body[data-page="live-chat"] .support-chat-title strong,
html.dark-mode body[data-page="live-chat"] .support-agent-item .log-body strong {
  color:#ffffff !important;
}
body.dark-mode[data-page="pengumuman"] .card-custom,
body.dark-mode[data-page="pengumuman"] .announcement-item,
body.dark-mode[data-page="live-chat"] .card-custom,
body.dark-mode[data-page="live-chat"] .owner-live-chat-hero,
body.dark-mode[data-page="live-chat"] .support-info-card,
body.dark-mode[data-page="live-chat"] .support-chat-item,
body.dark-mode[data-page="live-chat"] .support-agent-item,
html.dark-mode body[data-page="pengumuman"] .card-custom,
html.dark-mode body[data-page="pengumuman"] .announcement-item,
html.dark-mode body[data-page="live-chat"] .card-custom,
html.dark-mode body[data-page="live-chat"] .owner-live-chat-hero,
html.dark-mode body[data-page="live-chat"] .support-info-card,
html.dark-mode body[data-page="live-chat"] .support-chat-item,
html.dark-mode body[data-page="live-chat"] .support-agent-item {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="pengumuman"] label,
body.dark-mode[data-page="pengumuman"] .announcement-item small,
body.dark-mode[data-page="live-chat"] .owner-live-chat-hero small,
body.dark-mode[data-page="live-chat"] .owner-live-chat-hero p,
body.dark-mode[data-page="live-chat"] .support-info-card span,
body.dark-mode[data-page="live-chat"] .support-chat-copy small,
body.dark-mode[data-page="live-chat"] .support-chat-meta,
body.dark-mode[data-page="live-chat"] .log-meta,
html.dark-mode body[data-page="pengumuman"] label,
html.dark-mode body[data-page="pengumuman"] .announcement-item small,
html.dark-mode body[data-page="live-chat"] .owner-live-chat-hero small,
html.dark-mode body[data-page="live-chat"] .owner-live-chat-hero p,
html.dark-mode body[data-page="live-chat"] .support-info-card span,
html.dark-mode body[data-page="live-chat"] .support-chat-copy small,
html.dark-mode body[data-page="live-chat"] .support-chat-meta,
html.dark-mode body[data-page="live-chat"] .log-meta {
  color:rgba(226,232,240,.78) !important;
}
body.dark-mode[data-page="pengumuman"] .form-control,
body.dark-mode[data-page="pengumuman"] .form-select,
body.dark-mode[data-page="pengumuman"] textarea,
body.dark-mode[data-page="live-chat"] .form-control,
body.dark-mode[data-page="live-chat"] .form-select,
body.dark-mode[data-page="live-chat"] textarea,
html.dark-mode body[data-page="pengumuman"] .form-control,
html.dark-mode body[data-page="pengumuman"] .form-select,
html.dark-mode body[data-page="pengumuman"] textarea,
html.dark-mode body[data-page="live-chat"] .form-control,
html.dark-mode body[data-page="live-chat"] .form-select,
html.dark-mode body[data-page="live-chat"] textarea {
  background:#071225 !important;
  color:#ffffff !important;
  border-color:rgba(125,211,252,.24) !important;
}
body.dark-mode[data-page="pengumuman"] .form-control::placeholder,
body.dark-mode[data-page="pengumuman"] textarea::placeholder,
html.dark-mode body[data-page="pengumuman"] .form-control::placeholder,
html.dark-mode body[data-page="pengumuman"] textarea::placeholder {
  color:rgba(226,232,240,.48) !important;
}
body.dark-mode[data-page="pengumuman"] .section-subtitle::after,
html.dark-mode body[data-page="pengumuman"] .section-subtitle::after {
  background:rgba(148,163,184,.24) !important;
}
@media (max-width:991.98px) {
  .announcement-page .announcement-card,
  .owner-live-chat-page .announcement-card {
    padding:16px;
    border-radius:22px;
  }
  .announcement-item,
  .support-chat-item,
  .support-agent-item {
    border-radius:17px;
  }
  .owner-live-chat-hero {
    align-items:flex-start;
    padding:16px;
    border-radius:24px;
  }
  .owner-live-chat-icon {
    width:52px;
    height:52px;
    border-radius:18px;
    font-size:23px;
  }
  .owner-live-chat-hero h5 {
    font-size:18px;
  }
  .owner-live-chat-hero p {
    font-size:12px;
  }
  .owner-live-chat-grid {
    grid-template-columns:1fr;
  }
  .support-chat-item,
  .support-agent-item {
    align-items:flex-start;
  }
  .support-chat-item {
    flex-direction:column;
  }
  .support-chat-item > button,
  .support-helper-btn {
    width:100%;
  }
}

/* v1.1.98 - Benefit tenant pada halaman Paket dan Akun/Profil. */
.package-hero-card:before,
.package-hero-card:after { display:none; }
.package-benefit-card {
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:22px;
  border:1px solid #bae6fd;
  background:linear-gradient(135deg,#f0f9ff 0%,#ecfdf5 100%);
  box-shadow:0 13px 30px rgba(15,23,42,.06);
}
.package-benefit-card.trial { border-color:#bfdbfe; background:linear-gradient(135deg,#eff6ff,#ecfeff); }
.package-benefit-card.special { border-color:#a7f3d0; background:linear-gradient(135deg,#ecfdf5,#f0fdfa); }
.package-benefit-card.compensation { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,#fff7ed); }
.package-benefit-icon {
  width:56px;
  height:56px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:23px;
  background:linear-gradient(135deg,#2563eb,#0f766e);
}
.package-benefit-card.special .package-benefit-icon { background:linear-gradient(135deg,#059669,#0f766e); }
.package-benefit-card.compensation .package-benefit-icon { background:linear-gradient(135deg,#f59e0b,#ea580c); }
.package-benefit-content span {
  display:block;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}
.package-benefit-content strong {
  display:block;
  color:#0f172a;
  margin-top:3px;
  font-family:'Poppins',sans-serif;
  font-size:17px;
  font-weight:800;
  letter-spacing:0;
}
.package-benefit-content p {
  margin:5px 0 0;
  color:#52647c;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
}
.package-benefit-tag {
  padding:9px 12px;
  border-radius:999px;
  color:#0f766e;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,118,110,.15);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.package-expiry-card.benefit {
  border-color:#a7f3d0;
  background:linear-gradient(135deg,#ecfdf5,#ffffff);
}
.package-expiry-date.benefit {
  color:#047857;
  font-size:21px;
}
.package-expiry-note.benefit { color:#047857; }
.profile-benefit-wrap {
  width:min(100%,680px);
  margin:0 auto 18px;
}
.profile-benefit-badge {
  position:absolute;
  left:-15px;
  right:auto;
  bottom:-14px;
  z-index:50;
  width:36px;
  height:36px;
  min-width:36px;
  border:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-size:15px;
  background:linear-gradient(135deg,#2563eb,#0f766e);
  box-shadow:0 12px 20px rgba(37,99,235,.38), 0 3px 7px rgba(15,23,42,.18);
  cursor:pointer;
  transform:none;
}
.profile-benefit-badge.special { background:linear-gradient(135deg,#059669,#0f766e); box-shadow:0 12px 20px rgba(5,150,105,.40), 0 3px 7px rgba(15,23,42,.18); }
.profile-benefit-badge.compensation { background:linear-gradient(135deg,#f59e0b,#ea580c); box-shadow:0 12px 20px rgba(234,88,12,.38), 0 3px 7px rgba(15,23,42,.18); }
.profile-photo-wrap.has-benefit-badge .profile-photo-edit {
  right:-6px !important;
  left:auto !important;
}
.swal2-popup.profile-benefit-modal {
  width:min(calc(100vw - 24px),440px) !important;
  padding:18px !important;
  border-radius:25px !important;
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 28px 68px rgba(15,23,42,.17) !important;
}
.profile-benefit-modal .swal2-title:empty { display:none !important; }
.profile-benefit-modal .swal2-html-container { margin:0 !important; padding:0 !important; overflow:visible !important; }
.profile-benefit-modal .profile-benefit-card { box-shadow:none; text-align:left; }
.profile-benefit-modal .swal2-actions { width:100%; margin:14px 0 0 !important; }
.profile-benefit-modal .swal2-confirm {
  width:100%;
  height:44px;
  border-radius:12px !important;
  background:linear-gradient(135deg,#2563eb,#0f766e) !important;
  font-size:13px !important;
  font-weight:800 !important;
}
.profile-benefit-modal .profile-benefit-top {
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  align-items:center;
  gap:11px;
}
.profile-benefit-modal .profile-benefit-pill {
  grid-column:1 / -1;
  width:max-content;
  max-width:100%;
  margin:2px 0 0 54px;
  white-space:normal;
  line-height:1.35;
}
.profile-benefit-modal .profile-benefit-copy strong {
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.22;
}
.profile-benefit-card {
  padding:16px;
  border-radius:20px;
  border:1px solid #bfdbfe;
  background:linear-gradient(135deg,#eff6ff,#ecfeff);
  box-shadow:0 15px 35px rgba(15,23,42,.07);
}
.profile-benefit-card.special { border-color:#a7f3d0; background:linear-gradient(135deg,#ecfdf5,#f0fdfa); }
.profile-benefit-card.compensation { border-color:#fde68a; background:linear-gradient(135deg,#fffbeb,#fff7ed); }
.profile-benefit-top {
  display:flex;
  align-items:center;
  gap:11px;
}
.profile-benefit-icon {
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#fff;
  font-size:18px;
  background:linear-gradient(135deg,#2563eb,#0f766e);
}
.profile-benefit-card.special .profile-benefit-icon { background:linear-gradient(135deg,#059669,#0f766e); }
.profile-benefit-card.compensation .profile-benefit-icon { background:linear-gradient(135deg,#f59e0b,#ea580c); }
.profile-benefit-copy { min-width:0; flex:1; }
.profile-benefit-copy span {
  display:block;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}
.profile-benefit-copy strong {
  display:block;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:800;
  margin-top:2px;
  letter-spacing:0;
}
.profile-benefit-pill {
  padding:7px 10px;
  border:1px solid rgba(15,118,110,.16);
  border-radius:999px;
  color:#0f766e;
  background:rgba(255,255,255,.84);
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
.profile-benefit-card p {
  margin:12px 0;
  padding-top:11px;
  border-top:1px solid rgba(148,163,184,.18);
  color:#52647c;
  font-size:11.5px;
  font-weight:600;
  line-height:1.5;
}
.profile-benefit-quota {
  display:flex;
  gap:8px;
}
.profile-benefit-quota div {
  min-width:70px;
  padding:7px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.17);
}
.profile-benefit-quota span {
  display:block;
  color:#64748b;
  font-size:10px;
  font-weight:700;
}
.profile-benefit-quota b {
  display:block;
  margin-top:2px;
  color:#0f766e;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:800;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-card,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-card,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-card,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-card {
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(15,118,110,.12)) !important;
  border-color:rgba(125,211,252,.22) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.26) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-card.special,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-card.special,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-card.special,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-card.special {
  background:linear-gradient(135deg,rgba(5,150,105,.15),rgba(15,118,110,.10)) !important;
  border-color:rgba(52,211,153,.25) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-card.compensation,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-card.compensation,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-card.compensation,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-card.compensation {
  background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(234,88,12,.10)) !important;
  border-color:rgba(253,230,138,.25) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-content strong,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-content strong,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-copy strong,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-copy strong {
  color:#f8fafc !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-content span,
body.dark-mode[data-page="paket"] #page-paket .package-benefit-content p,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-content span,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-content p,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-copy span,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-card p,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-quota span,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-copy span,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-card p,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-quota span {
  color:#afc2d9 !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-benefit-tag,
html.dark-mode body[data-page="paket"] #page-paket .package-benefit-tag,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-pill,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-pill,
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-quota div,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-quota div {
  background:rgba(2,6,23,.34) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#6ee7b7 !important;
}
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-quota b,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-quota b {
  color:#6ee7b7 !important;
}
body.dark-mode[data-page="profil"] #page-profil .profile-benefit-badge,
html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-badge {
  border:0 !important;
  box-shadow:0 14px 25px rgba(0,0,0,.46), 0 4px 11px rgba(37,99,235,.24) !important;
}
body.dark-mode .swal2-popup.profile-benefit-modal,
html.dark-mode body .swal2-popup.profile-benefit-modal {
  background:#071322 !important;
  border-color:rgba(125,211,252,.20) !important;
  box-shadow:0 30px 76px rgba(0,0,0,.56) !important;
}
body.dark-mode .profile-benefit-modal .profile-benefit-card,
html.dark-mode body .profile-benefit-modal .profile-benefit-card {
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(15,118,110,.12)) !important;
  border-color:rgba(125,211,252,.22) !important;
}
body.dark-mode .profile-benefit-modal.special .profile-benefit-card,
html.dark-mode body .profile-benefit-modal.special .profile-benefit-card {
  background:linear-gradient(135deg,rgba(5,150,105,.15),rgba(15,118,110,.10)) !important;
  border-color:rgba(52,211,153,.25) !important;
}
body.dark-mode .profile-benefit-modal.compensation .profile-benefit-card,
html.dark-mode body .profile-benefit-modal.compensation .profile-benefit-card {
  background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(234,88,12,.10)) !important;
  border-color:rgba(253,230,138,.25) !important;
}
body.dark-mode .profile-benefit-modal .profile-benefit-copy strong,
html.dark-mode body .profile-benefit-modal .profile-benefit-copy strong { color:#f8fafc !important; }
body.dark-mode .profile-benefit-modal .profile-benefit-copy span,
body.dark-mode .profile-benefit-modal .profile-benefit-card p,
body.dark-mode .profile-benefit-modal .profile-benefit-quota span,
html.dark-mode body .profile-benefit-modal .profile-benefit-copy span,
html.dark-mode body .profile-benefit-modal .profile-benefit-card p,
html.dark-mode body .profile-benefit-modal .profile-benefit-quota span { color:#afc2d9 !important; }
body.dark-mode .profile-benefit-modal .profile-benefit-pill,
body.dark-mode .profile-benefit-modal .profile-benefit-quota div,
html.dark-mode body .profile-benefit-modal .profile-benefit-pill,
html.dark-mode body .profile-benefit-modal .profile-benefit-quota div {
  background:rgba(2,6,23,.34) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#6ee7b7 !important;
}
body.dark-mode .profile-benefit-modal .profile-benefit-quota b,
html.dark-mode body .profile-benefit-modal .profile-benefit-quota b { color:#6ee7b7 !important; }
body.dark-mode[data-page="paket"] #page-paket .package-expiry-card.benefit,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-card.benefit {
  background:linear-gradient(180deg,rgba(5,31,34,.98),rgba(4,21,32,.98)) !important;
  border-color:rgba(52,211,153,.23) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-date.benefit,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-date.benefit {
  background:rgba(5,150,105,.10) !important;
  color:#6ee7b7 !important;
  border-color:rgba(52,211,153,.22) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-note.benefit,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-note.benefit { color:#6ee7b7 !important; }
body.dark-mode[data-page="paket"] #page-paket .package-section-card,
body.dark-mode[data-page="paket"] #page-paket .package-loading-card,
html.dark-mode body[data-page="paket"] #page-paket .package-section-card,
html.dark-mode body[data-page="paket"] #page-paket .package-loading-card {
  background:linear-gradient(180deg,#0b192d,#071322) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#f8fafc !important;
  box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-section-title strong,
body.dark-mode[data-page="paket"] #page-paket .package-quota-main b,
html.dark-mode body[data-page="paket"] #page-paket .package-section-title strong,
html.dark-mode body[data-page="paket"] #page-paket .package-quota-main b {
  color:#f8fafc !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-section-title span,
body.dark-mode[data-page="paket"] #page-paket .package-quota-main span,
html.dark-mode body[data-page="paket"] #page-paket .package-section-title span,
html.dark-mode body[data-page="paket"] #page-paket .package-quota-main span {
  color:#afc2d9 !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-section-title > i,
html.dark-mode body[data-page="paket"] #page-paket .package-section-title > i {
  background:rgba(37,99,235,.18) !important;
  color:#7dd3fc !important;
  box-shadow:none !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-quota-badge,
html.dark-mode body[data-page="paket"] #page-paket .package-quota-badge {
  background:rgba(2,6,23,.36) !important;
  border-color:rgba(148,163,184,.20) !important;
  color:#dbeafe !important;
  box-shadow:none !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-card.safe,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-card.safe {
  border-color:rgba(52,211,153,.22) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-card.danger,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-card.danger {
  border-color:rgba(251,113,133,.23) !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-date.safe,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-date.safe {
  background:rgba(5,150,105,.10) !important;
  border-color:rgba(52,211,153,.22) !important;
  color:#6ee7b7 !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-date.danger,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-date.danger {
  background:rgba(244,63,94,.10) !important;
  border-color:rgba(251,113,133,.23) !important;
  color:#fda4af !important;
}
body.dark-mode[data-page="paket"] #page-paket .package-expiry-note.safe,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-note.safe { color:#6ee7b7 !important; }
body.dark-mode[data-page="paket"] #page-paket .package-expiry-note.danger,
html.dark-mode body[data-page="paket"] #page-paket .package-expiry-note.danger { color:#fda4af !important; }
@media(max-width:575.98px) {
  .package-benefit-card {
    grid-template-columns:46px minmax(0,1fr);
    padding:14px;
    gap:11px;
    border-radius:19px;
  }
  .package-benefit-icon { width:46px; height:46px; border-radius:14px; font-size:19px; }
  .package-benefit-content strong { font-size:15px; }
  .package-benefit-tag { grid-column:1 / -1; width:max-content; }
  .package-expiry-date.benefit { font-size:17px; }
}
@media(max-width:991px) {
  body[data-page="profil"] #page-profil,
  body.dark-mode[data-page="profil"] #page-profil,
  html.dark-mode body[data-page="profil"] #page-profil {
    display:block !important;
    overflow-y:auto !important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;
  }
  body[data-page="profil"] #page-profil .profile-benefit-wrap,
  body.dark-mode[data-page="profil"] #page-profil .profile-benefit-wrap,
  html.dark-mode body[data-page="profil"] #page-profil .profile-benefit-wrap {
    max-width:480px;
    margin:0 auto 12px !important;
  }
  .profile-benefit-card { padding:13px; border-radius:18px; }
  .profile-benefit-top { gap:9px; }
  .profile-benefit-pill { margin-left:0; }
  .profile-benefit-modal .profile-benefit-top { grid-template-columns:46px minmax(0,1fr); gap:10px; }
  .profile-benefit-modal .profile-benefit-copy strong { font-size:18px; }
  .profile-benefit-modal .profile-benefit-pill { margin:0; grid-column:1 / -1; justify-self:start; }
  .profile-benefit-card p { margin:10px 0; padding-top:9px; }
  .profile-benefit-quota div { flex:1; min-width:0; }
  #page-profil .profile-benefit-badge {
    width:34px;
    height:34px;
    min-width:34px;
    left:-14px;
    right:auto;
    bottom:-13px;
    z-index:50 !important;
    transform:none !important;
  }
  .swal2-popup.profile-benefit-modal { padding:14px !important; border-radius:22px !important; }
}

/* v1.1.101 - Badge benefit mengambang di depan sudut kiri bawah foto. */
body[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge,
body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge,
html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge {
  overflow:visible !important;
  isolation:isolate !important;
}
body[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge .profile-photo,
body.dark-mode[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge .profile-photo,
html.dark-mode body[data-page="profil"] #page-profil .profile-photo-wrap.has-benefit-badge .profile-photo {
  border-radius:inherit !important;
  overflow:hidden !important;
}

/* v1.2.4 - Penambahan pinjaman pada catatan hutang/piutang aktif. */
.debt-addition-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border:1px solid #bae6fd;
  border-radius:999px;
  background:#ecfeff !important;
  color:#0369a1 !important;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.btn-icon-soft.increase {
  background:#ecfeff;
  color:#0284c7;
  border-color:#bae6fd;
}
.debt-detail-premium .debt-installment-quick.has-addition {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.debt-increase-action-premium {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 10px;
  padding:13px 14px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#0284c7,#0891b2);
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
  box-shadow:0 18px 34px rgba(2,132,199,.19);
}
.debt-increase-action-premium:hover {
  transform:translateY(-1px);
  filter:brightness(.98);
}
.debt-payment-row.debt-addition-row strong {
  color:#0284c7;
}
.debt-increase-alert {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid #bae6fd;
  border-radius:16px;
  background:#ecfeff;
  color:#0369a1;
  font-size:11.5px;
  line-height:1.4;
  font-weight:800;
}
.debt-increase-alert i {
  flex:0 0 auto;
  margin-top:1px;
  font-size:15px;
}
.debt-pay-preview-card.is-increase .debt-pay-preview-icon {
  color:#0284c7;
  background:#e0f2fe;
}
@media(max-width:576px) {
  .swal2-popup.debt-modal.debt-increase-modal {
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    border-radius:26px !important;
  }
  .debt-detail-premium .debt-installment-quick.has-addition {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .debt-increase-action-premium {
    padding:12px 10px;
    border-radius:16px;
    font-size:12.4px;
  }
  .debt-increase-premium .row .col-6 {
    width:100%;
  }
}
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-addition-chip,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-addition-chip {
  background:rgba(14,165,233,.16) !important;
  color:#7dd3fc !important;
  border-color:rgba(125,211,252,.27) !important;
}
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft.increase,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .btn-icon-soft.increase {
  background:rgba(14,165,233,.16) !important;
  color:#7dd3fc !important;
  border-color:rgba(125,211,252,.27) !important;
}
body.dark-mode .swal2-popup.debt-modal .debt-increase-alert,
html.dark-mode body .swal2-popup.debt-modal .debt-increase-alert {
  background:rgba(14,165,233,.14) !important;
  color:#bae6fd !important;
  border-color:rgba(125,211,252,.27) !important;
}
body.dark-mode .swal2-popup.debt-detail-modal .debt-payment-row.debt-addition-row strong,
html.dark-mode body .swal2-popup.debt-detail-modal .debt-payment-row.debt-addition-row strong {
  color:#7dd3fc !important;
}

/* v1.2.5 - Tambah manual Akses Telegram Bot pada Staff & Izin. */
.telegram-access-header {
  align-items:center;
  gap:12px;
}
.telegram-access-header h6 {
  min-width:0;
}
.telegram-manual-add {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(14,165,233,.18);
  background:linear-gradient(135deg,#0284c7,#2563eb);
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:800;
  box-shadow:0 12px 24px rgba(2,132,199,.20);
  transition:transform .18s ease, box-shadow .18s ease;
}
.telegram-manual-add.desktop {
  min-height:43px;
  padding:10px 16px;
  border-radius:14px;
}
.telegram-manual-add.mobile {
  display:none;
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:19px;
}
.telegram-manual-add:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 29px rgba(2,132,199,.28);
}
.telegram-access-empty {
  min-width:280px;
  padding:30px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#64748b;
}
.telegram-access-empty i {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:17px;
  background:#e0f2fe;
  color:#0284c7;
  font-size:23px;
  margin-bottom:5px;
}
.telegram-access-empty strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:14px;
}
.telegram-access-empty span {
  font-size:12px;
  font-weight:600;
}
.telegram-manual-modal {
  border:1px solid rgba(14,165,233,.14);
  box-shadow:0 24px 60px rgba(15,23,42,.17);
}
.telegram-manual-form {
  padding:4px 5px 0;
}
.telegram-manual-hero {
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px;
  margin:0 0 20px;
  border-radius:20px;
  background:linear-gradient(135deg,#f0f9ff,#eff6ff);
  border:1px solid #dbeafe;
}
.telegram-manual-hero > span {
  width:52px;
  height:52px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#229ed9,#2563eb);
  font-size:25px;
  box-shadow:0 12px 24px rgba(34,158,217,.24);
}
.telegram-manual-hero small {
  display:block;
  color:#0284c7;
  font-size:10px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:3px;
}
.telegram-manual-hero strong {
  display:block;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:20px;
  font-weight:900;
}
.telegram-manual-label {
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  margin:0 0 7px;
}
.telegram-manual-field {
  min-height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:0 14px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#f8fafc;
}
.telegram-manual-field:focus-within {
  border-color:#38bdf8;
  background:#fff;
  box-shadow:0 0 0 3px rgba(56,189,248,.13);
}
.telegram-manual-field i {
  color:#0284c7;
  font-size:18px;
}
.telegram-manual-field input,
.telegram-manual-field select {
  width:100%;
  min-width:0;
  height:50px;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  color:#0f172a;
  font-size:14px;
  font-weight:700;
}
body.dark-mode[data-page="users"] #page-users .telegram-manual-add,
html.dark-mode body[data-page="users"] #page-users .telegram-manual-add {
  border-color:rgba(125,211,252,.32);
  box-shadow:0 12px 28px rgba(14,165,233,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
body.dark-mode[data-page="users"] #page-users .telegram-access-empty,
html.dark-mode body[data-page="users"] #page-users .telegram-access-empty {
  color:rgba(226,232,240,.76);
}
body.dark-mode[data-page="users"] #page-users .telegram-access-empty strong,
html.dark-mode body[data-page="users"] #page-users .telegram-access-empty strong {
  color:#fff;
}
body.dark-mode[data-page="users"] #page-users .telegram-access-empty i,
html.dark-mode body[data-page="users"] #page-users .telegram-access-empty i {
  background:rgba(14,165,233,.16);
  color:#7dd3fc;
}
body.dark-mode .swal2-popup.telegram-manual-modal,
html.dark-mode body .swal2-popup.telegram-manual-modal {
  background:linear-gradient(180deg,#0b1b36,#061428) !important;
  border-color:rgba(125,211,252,.18);
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-hero,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-hero {
  background:rgba(14,165,233,.10);
  border-color:rgba(125,211,252,.20);
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-hero strong,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-hero strong {
  color:#fff;
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-hero small,
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-label,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-hero small,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-label {
  color:#7dd3fc;
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-field,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-field {
  background:#081a33;
  border-color:rgba(148,163,184,.23);
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-field input,
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-field select,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-field input,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-field select {
  color:#fff;
}
body.dark-mode .swal2-popup.telegram-manual-modal .telegram-manual-field select option,
html.dark-mode body .swal2-popup.telegram-manual-modal .telegram-manual-field select option {
  color:#fff;
  background:#081a33;
}
@media(max-width:991.98px) {
  #page-users .telegram-access-header {
    margin-bottom:13px;
    padding-bottom:0 !important;
  }
  #page-users .telegram-access-header h6 {
    font-size:15px;
  }
  #page-users .telegram-manual-add.desktop {
    display:none;
  }
  #page-users .telegram-manual-add.mobile {
    display:inline-flex;
  }
  .swal2-popup.telegram-manual-modal {
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    padding:20px 15px !important;
    border-radius:27px !important;
  }
  .telegram-manual-hero {
    margin-bottom:17px;
    padding:12px;
    border-radius:18px;
  }
  .telegram-manual-hero > span {
    width:47px;
    height:47px;
    border-radius:16px;
    font-size:22px;
  }
  .telegram-manual-hero strong {
    font-size:18px;
  }
}

/* v1.2.7 - Kartu Lain-Lain menjadi induk arus sistem yang terkunci. */
.category-card-control {
  position:absolute;
  top:15px;
  right:12px;
  color:#cbd5e1;
  font-size:18px;
}
.category-card.protected-flow-category {
  border-color:#c7d2fe !important;
  background:linear-gradient(145deg,#fff,#f5f7ff) !important;
}
.category-card.protected-flow-category .category-card-control {
  width:28px;
  height:28px;
  top:12px;
  right:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#eef2ff;
  color:#4f46e5;
  font-size:13px;
}
body.dark-mode[data-page="kategori"] #page-kategori .category-card.protected-flow-category,
html.dark-mode body[data-page="kategori"] #page-kategori .category-card.protected-flow-category {
  border-color:rgba(125,211,252,.25) !important;
  background:linear-gradient(145deg,#0b1b36,#061428) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark-mode[data-page="kategori"] #page-kategori .category-card.protected-flow-category .category-card-control,
html.dark-mode body[data-page="kategori"] #page-kategori .category-card.protected-flow-category .category-card-control {
  background:rgba(14,165,233,.17);
  color:#7dd3fc;
}

/* v1.20.1 - Popup tambah/edit kategori dibuat rapat 2-3px dari border luar. */
.swal2-popup.card-custom.category-form-modal,
.category-form-modal {
  width:min(94vw, 520px) !important;
  padding:2px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#dbeafe,#ccfbf1) !important;
  box-shadow:0 28px 70px rgba(15,23,42,.26) !important;
}
.swal2-popup.category-form-modal .swal2-title {
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
.swal2-popup.category-form-modal .swal2-html-container {
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  max-height:min(72vh, 680px) !important;
}
.swal2-popup.category-form-modal .swal2-actions {
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:0 !important;
  padding:10px 12px 14px !important;
  background:#fff !important;
  border-top:1px solid #e2e8f0 !important;
}
.swal2-popup.category-form-modal .swal2-confirm,
.swal2-popup.category-form-modal .swal2-cancel {
  width:100% !important;
  margin:0 !important;
  border-radius:15px !important;
  padding:12px 14px !important;
  font-weight:900 !important;
  font-family:'Poppins',sans-serif !important;
}
.category-form-premium {
  padding:10px;
  background:#fff;
  border-radius:26px 26px 18px 18px;
}
.category-form-hero {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  box-shadow:0 18px 38px rgba(37,99,235,.24);
  margin-bottom:12px;
}
.category-form-hero span {
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  font-size:25px;
}
.category-form-hero small {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
  opacity:.84;
}
.category-form-hero strong {
  display:block;
  font-size:22px;
  line-height:1.15;
  font-family:'Poppins',sans-serif;
}
.category-form-section {
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  margin-bottom:10px;
}
.category-form-label {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
  color:#64748b;
  margin-bottom:8px;
}
.category-form-field {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  border:1px solid #dbe7f4;
  border-radius:17px;
  background:#fff;
  padding:0 13px;
}
.category-form-field > i {
  color:#2563eb;
  font-size:18px;
}
.category-form-field .form-control {
  border:0;
  background:transparent;
  box-shadow:none;
  padding-left:0;
  font-weight:700;
  color:#0f172a;
}
.category-icon-picker {
  padding:12px;
  border:1px solid #dbeafe;
  border-radius:22px;
  background:linear-gradient(180deg,#f8fbff,#eef8ff);
}
.category-icon-picker-head {
  width:100%;
  border:0;
  appearance:none;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.category-icon-preview {
  width:50px;
  height:50px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  font-size:24px;
  box-shadow:0 12px 24px rgba(37,99,235,.24);
}
.category-icon-picker-head strong {
  display:block;
  font-family:'Poppins',sans-serif;
  color:#0f172a;
}
.category-icon-picker-head small {
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:600;
}
.category-icon-picker-head > div {
  flex:1;
  min-width:0;
}
.category-icon-toggle {
  color:#64748b;
  font-size:18px;
  transition:.18s ease;
}
.category-icon-picker.is-collapsed .category-icon-toggle {
  transform:rotate(-90deg);
}
.category-icon-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:min(34vh, 250px);
  padding:0 4px 82px 0;
  scroll-padding-bottom:82px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transition:max-height .24s ease, opacity .18s ease, margin .18s ease;
}
.category-icon-grid::-webkit-scrollbar {
  width:6px;
}
.category-icon-grid::-webkit-scrollbar-track {
  background:rgba(148,163,184,.16);
  border-radius:999px;
}
.category-icon-grid::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#2563eb,#14b8a6);
  border-radius:999px;
}
.category-icon-picker.is-collapsed .category-icon-grid {
  max-height:0;
  opacity:0;
  margin-top:-12px;
  overflow:hidden;
  padding-bottom:0;
  pointer-events:none;
}
.category-icon-choice {
  aspect-ratio:1;
  border:1px solid #dbe7f4;
  border-radius:15px;
  background:#fff;
  color:#334155;
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.18s ease;
}
.category-icon-choice:hover,
.category-icon-choice.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(20,184,166,.2);
}
body.dark-mode .category-form-modal,
html.dark-mode body .category-form-modal,
body.dark-mode .swal2-popup.card-custom.category-form-modal,
html.dark-mode body .swal2-popup.card-custom.category-form-modal {
  background:linear-gradient(135deg,#1e3a8a,#0f766e) !important;
  box-shadow:0 28px 74px rgba(0,0,0,.42) !important;
}
body.dark-mode .category-form-premium,
html.dark-mode body .category-form-premium {
  background:#07111f;
}
body.dark-mode .swal2-popup.category-form-modal .swal2-actions,
html.dark-mode body .swal2-popup.category-form-modal .swal2-actions {
  background:#07111f !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .category-form-section,
html.dark-mode body .category-form-section {
  background:linear-gradient(180deg,#111c2d,#0b1525);
  border-color:rgba(148,163,184,.2);
}
body.dark-mode .category-form-label,
body.dark-mode .category-icon-picker-head small,
html.dark-mode body .category-form-label,
html.dark-mode body .category-icon-picker-head small { color:#94a3b8; }
body.dark-mode .category-form-field,
html.dark-mode body .category-form-field {
  background:#0b1525;
  border-color:rgba(96,165,250,.22);
}
body.dark-mode .category-form-field .form-control,
html.dark-mode body .category-form-field .form-control { color:#f8fafc; }
body.dark-mode .category-icon-picker,
html.dark-mode body .category-icon-picker {
  background:linear-gradient(180deg,#0f1b2d,#081323);
  border-color:rgba(96,165,250,.24);
}
body.dark-mode .category-icon-picker-head strong,
html.dark-mode body .category-icon-picker-head strong { color:#f8fafc; }
body.dark-mode .category-icon-choice,
html.dark-mode body .category-icon-choice {
  background:#111c2d;
  border-color:rgba(148,163,184,.18);
  color:#cbd5e1;
}
@media (max-width:576px) {
  .swal2-popup.card-custom.category-form-modal,
  .category-form-modal {
    width:calc(100vw - 22px) !important;
    padding:2px !important;
    border-radius:26px !important;
  }
  .swal2-popup.category-form-modal .swal2-html-container {
    max-height:calc(100dvh - 146px) !important;
  }
  .swal2-popup.category-form-modal .swal2-actions {
    padding:9px 10px 12px !important;
  }
  .category-form-premium { padding:8px; border-radius:24px 24px 17px 17px; }
  .category-form-hero { padding:14px; border-radius:20px; }
  .category-form-hero strong { font-size:19px; }
  .category-icon-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
  .category-icon-picker:not(.is-collapsed) .category-icon-grid {
    max-height:28dvh;
    padding-bottom:88px;
    scroll-padding-bottom:88px;
  }
  .category-icon-choice { border-radius:13px; font-size:18px; }
}

/* v1.20.6 - Popup long press kategori premium dengan jarak border 2-3px. */
.swal2-popup.card-custom.category-action-modal,
.category-action-modal {
  width:min(92vw, 430px) !important;
  padding:2px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#dbeafe,#ccfbf1) !important;
  box-shadow:0 28px 70px rgba(15,23,42,.24) !important;
}
.swal2-popup.category-action-modal .swal2-title {
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
.swal2-popup.category-action-modal .swal2-html-container {
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.category-action-premium {
  padding:10px;
  background:#fff;
  border-radius:26px 26px 18px 18px;
}
.category-action-hero {
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border-radius:23px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  box-shadow:0 18px 38px rgba(37,99,235,.23);
}
.category-action-hero > span {
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.2);
  font-size:26px;
  flex-shrink:0;
}
.category-action-hero small {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.85px;
  font-weight:900;
  opacity:.84;
}
.category-action-hero strong {
  display:block;
  font-size:20px;
  line-height:1.18;
  font-family:'Poppins',sans-serif;
  word-break:break-word;
}
.category-action-hero em {
  display:inline-flex;
  margin-top:8px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-style:normal;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.category-action-note {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fafc,#eef6ff);
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:12.5px;
  font-weight:700;
  line-height:1.5;
}
.category-action-note i {
  color:#2563eb;
  font-size:17px;
  margin-top:1px;
}
.swal2-popup.category-action-modal .swal2-actions {
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:0 !important;
  padding:10px 12px 14px !important;
  background:#fff !important;
  border-top:1px solid #e2e8f0 !important;
}
.swal2-popup.category-action-modal .swal2-confirm,
.swal2-popup.category-action-modal .swal2-deny,
.swal2-popup.category-action-modal .swal2-cancel {
  width:100% !important;
  margin:0 !important;
  border-radius:15px !important;
  padding:12px !important;
  font-family:'Poppins',sans-serif !important;
  font-size:13px !important;
  font-weight:900 !important;
  box-shadow:none !important;
}
.swal2-popup.category-action-modal .swal2-cancel { grid-column:1 / -1; }
.swal2-popup.category-action-modal .category-action-confirm {
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#2563eb !important;
}
.swal2-popup.category-action-modal .category-action-deny {
  background:#fef2f2 !important;
  border:1px solid #fecaca !important;
  color:#dc2626 !important;
}
.swal2-popup.category-action-modal .category-action-cancel {
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  color:#64748b !important;
}
body.dark-mode .swal2-popup.card-custom.category-action-modal,
html.dark-mode body .swal2-popup.card-custom.category-action-modal {
  background:linear-gradient(135deg,#1e3a8a,#0f766e) !important;
  box-shadow:0 28px 74px rgba(0,0,0,.42) !important;
}
body.dark-mode .category-action-premium,
body.dark-mode .swal2-popup.category-action-modal .swal2-actions,
html.dark-mode body .category-action-premium,
html.dark-mode body .swal2-popup.category-action-modal .swal2-actions {
  background:#07111f !important;
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode .category-action-note,
html.dark-mode body .category-action-note {
  background:linear-gradient(180deg,#111c2d,#0b1525);
  border-color:rgba(96,165,250,.22);
  color:#cbd5e1;
}
body.dark-mode .category-action-note i,
html.dark-mode body .category-action-note i { color:#7dd3fc; }
body.dark-mode .swal2-popup.category-action-modal .category-action-confirm,
html.dark-mode body .swal2-popup.category-action-modal .category-action-confirm {
  background:#102949 !important;
  border-color:rgba(96,165,250,.46) !important;
  color:#93c5fd !important;
}
body.dark-mode .swal2-popup.category-action-modal .category-action-deny,
html.dark-mode body .swal2-popup.category-action-modal .category-action-deny {
  background:#3b1111 !important;
  border-color:rgba(248,113,113,.4) !important;
  color:#fecaca !important;
}
body.dark-mode .swal2-popup.category-action-modal .category-action-cancel,
html.dark-mode body .swal2-popup.category-action-modal .category-action-cancel {
  background:#111827 !important;
  border-color:rgba(148,163,184,.2) !important;
  color:#cbd5e1 !important;
}
@media (max-width:576px) {
  .swal2-popup.card-custom.category-action-modal,
  .category-action-modal {
    width:calc(100vw - 24px) !important;
    padding:2px !important;
    border-radius:26px !important;
  }
  .category-action-premium { padding:8px; border-radius:24px 24px 17px 17px; }
  .category-action-hero { padding:14px; border-radius:20px; }
  .category-action-hero > span { width:48px; height:48px; border-radius:16px; }
  .category-action-hero strong { font-size:18px; }
  .swal2-popup.category-action-modal .swal2-actions { padding:9px 10px 12px !important; }
}

/* v1.2.12 - Tombol Home judul mobile elegan pada Riwayat, Catat Baru, dan Kategori. */
.mobile-page-title-with-home {
  gap:12px !important;
}
.mobile-title-home-btn,
.mobile-title-home-btn:hover,
.mobile-title-home-btn:focus {
  position:relative;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #dbeafe !important;
  border-radius:13px;
  background:linear-gradient(145deg,#ffffff,#edf5ff) !important;
  color:#2563eb !important;
  box-shadow:0 9px 18px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
  outline:none !important;
}
.mobile-title-home-btn i {
  font-size:19px;
  line-height:1;
}
.mobile-title-home-btn:focus-visible {
  box-shadow:0 0 0 3px rgba(37,99,235,.18), 0 9px 18px rgba(37,99,235,.12) !important;
}
.mobile-title-home-btn:active {
  transform:translateY(1px) scale(.97);
  opacity:1;
  box-shadow:0 4px 10px rgba(37,99,235,.12), inset 0 1px 3px rgba(15,23,42,.08) !important;
}
.mobile-category-info-btn,
.mobile-category-info-btn:hover,
.mobile-category-info-btn:focus {
  width:36px !important;
  height:36px !important;
  flex:0 0 auto;
  margin-left:auto !important;
  border:1px solid #dbeafe !important;
  border-radius:12px !important;
  background:linear-gradient(145deg,#ffffff,#edf5ff) !important;
  color:#2563eb !important;
  box-shadow:0 9px 18px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.mobile-category-info-btn i {
  font-size:18px;
  line-height:1;
}
body.dark-mode .mobile-title-home-btn,
body.dark-mode .mobile-title-home-btn:hover,
body.dark-mode .mobile-title-home-btn:focus,
html.dark-mode body .mobile-title-home-btn,
html.dark-mode body .mobile-title-home-btn:hover,
html.dark-mode body .mobile-title-home-btn:focus {
  border-color:rgba(56,189,248,.27) !important;
  background:linear-gradient(145deg,#10233f,#08152c) !important;
  color:#7dd3fc !important;
  box-shadow:0 12px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(125,211,252,.12) !important;
}
body.dark-mode .mobile-title-home-btn:focus-visible,
html.dark-mode body .mobile-title-home-btn:focus-visible {
  box-shadow:0 0 0 3px rgba(56,189,248,.22), 0 12px 22px rgba(0,0,0,.32) !important;
}
body.dark-mode .mobile-title-home-btn:active,
html.dark-mode body .mobile-title-home-btn:active {
  background:#071329 !important;
  box-shadow:0 5px 12px rgba(0,0,0,.3), inset 0 1px 4px rgba(0,0,0,.28) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-title-home-btn,
body.dark-mode[data-page="tambah"] #page-tambah .mobile-title-home-btn,
body.dark-mode[data-page="kategori"] #page-kategori .mobile-title-home-btn,
body.dark-mode[data-page="kategori"] #page-kategori .mobile-category-info-btn,
html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-title-home-btn,
html.dark-mode body[data-page="tambah"] #page-tambah .mobile-title-home-btn,
html.dark-mode body[data-page="kategori"] #page-kategori .mobile-title-home-btn {
  color:#7dd3fc !important;
}
html.dark-mode body[data-page="kategori"] #page-kategori .mobile-category-info-btn,
body.dark-mode[data-page="kategori"] #page-kategori .mobile-category-info-btn:hover,
html.dark-mode body[data-page="kategori"] #page-kategori .mobile-category-info-btn:hover {
  border-color:rgba(56,189,248,.27) !important;
  background:linear-gradient(145deg,#10233f,#08152c) !important;
  color:#7dd3fc !important;
  box-shadow:0 12px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(125,211,252,.12) !important;
}

/* v1.3.0 - Catatan Hutang Piutang fokus mobile dengan header navigasi mandiri. */
.debt-header h2 {
  align-items:center;
}
.debt-home-btn {
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dbeafe;
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff,#edf5ff);
  color:#2563eb;
  box-shadow:0 10px 20px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.96);
  transition:transform .18s ease, box-shadow .18s ease;
}
.debt-home-btn i {
  font-size:19px;
  line-height:1;
}
.debt-home-btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.18), 0 10px 20px rgba(37,99,235,.12);
}
.debt-home-btn:active {
  transform:translateY(1px) scale(.97);
}
.debt-add-note-btn {
  border:0 !important;
  border-radius:15px !important;
  font-weight:800 !important;
  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 55%,#14b8a6 100%) !important;
  color:#ffffff !important;
  box-shadow:0 14px 28px rgba(37,99,235,.2) !important;
}
.debt-add-note-btn i {
  margin-right:5px;
}
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-home-btn,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-home-btn {
  border:1px solid rgba(125,211,252,.28) !important;
  background:linear-gradient(145deg,#10233f,#07152c) !important;
  color:#7dd3fc !important;
  box-shadow:0 12px 25px rgba(0,0,0,.32), inset 0 1px 0 rgba(125,211,252,.14) !important;
}
body.dark-mode[data-page="hutang-piutang"] #page-hutang-piutang .debt-add-note-btn,
html.dark-mode body[data-page="hutang-piutang"] #page-hutang-piutang .debt-add-note-btn {
  background:linear-gradient(135deg,#2563eb 0%,#0284c7 52%,#0d9488 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.4) !important;
  box-shadow:0 0 0 1px rgba(125,211,252,.1), 0 16px 34px rgba(14,165,233,.28) !important;
}
@media (max-width:991px) {
  body[data-page="hutang-piutang"] .bottom-nav {
    display:none !important;
  }
  body[data-page="hutang-piutang"] .content-area {
    padding-bottom:22px !important;
  }
  body[data-page="hutang-piutang"] #page-hutang-piutang .debt-page-card {
    margin-bottom:12px !important;
  }
  body[data-page="hutang-piutang"] #page-hutang-piutang .debt-header {
    gap:14px;
  }
  body[data-page="hutang-piutang"] #page-hutang-piutang .debt-home-btn {
    width:40px;
    height:40px;
    border-radius:13px;
  }
}

/* v1.4.0 - Pengaturan Notifikasi pribadi pada halaman Akun. */
.notification-settings-trigger .notification-menu-chevron {
  transition:transform .2s ease;
}
.notification-settings-trigger.open .notification-menu-chevron {
  transform:rotate(180deg);
}
.notification-settings-submenu {
  display:none;
  flex-direction:column;
  gap:7px;
  padding:8px;
  margin:0 6px 7px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fbff;
}
.notification-settings-submenu.open {
  display:flex;
  animation:notificationMenuOpen .18s ease-out;
}
@keyframes notificationMenuOpen {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}
.notification-setting-row {
  width:100%;
  min-height:59px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 12px 9px 14px;
  border:0;
  border-radius:11px;
  background:#ffffff;
  color:#17243b;
  text-align:left;
  transition:background .18s ease, box-shadow .18s ease;
}
.notification-setting-row:hover,
.notification-setting-row:focus {
  background:#f1f7ff;
  box-shadow:inset 0 0 0 1px #dbeafe;
  outline:none;
}
.notification-setting-row strong {
  display:block;
  font-size:13px;
  font-weight:700;
}
.notification-setting-row small {
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:11px;
  font-weight:500;
}
.notification-switch {
  width:46px;
  height:26px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:3px;
  border-radius:20px;
  background:#cbd5e1;
  transition:background .2s ease;
}
.notification-switch span {
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 1px 4px rgba(15,23,42,.18);
  transform:translateX(0);
  transition:transform .2s ease;
}
.notification-switch.active {
  background:linear-gradient(135deg,#2563eb,#14b8a6);
}
.notification-switch.active span {
  transform:translateX(20px);
}
.notification-voice-modal {
  max-width:430px !important;
}
.notification-voice-panel {
  margin-top:15px;
  display:flex;
  flex-direction:column;
  text-align:left;
  gap:8px;
}
.notification-modal-toggle {
  min-height:62px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  margin-bottom:6px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fbff;
  cursor:pointer;
}
.notification-modal-toggle > span:first-child {
  flex:1;
}
.notification-modal-toggle strong,
.notification-modal-toggle small {
  display:block;
}
.notification-modal-toggle strong {
  color:#17243b;
  font-size:14px;
}
.notification-modal-toggle small {
  color:#64748b;
  font-size:12px;
}
.notification-modal-toggle input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.notification-modal-switch {
  width:48px;
  height:27px;
  flex:0 0 auto;
  position:relative;
  border-radius:20px;
  background:#cbd5e1;
  transition:background .2s ease;
}
.notification-modal-switch::after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(15,23,42,.18);
  transition:transform .2s ease;
}
.notification-modal-toggle input:checked + .notification-modal-switch {
  background:linear-gradient(135deg,#2563eb,#14b8a6);
}
.notification-modal-toggle input:checked + .notification-modal-switch::after {
  transform:translateX(21px);
}
.notification-field-label {
  margin:5px 0 0;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.notification-voice-select {
  min-height:47px;
  border:1px solid #dbe3ee !important;
  border-radius:12px !important;
  color:#17243b !important;
  background-color:#f8fbff !important;
}
.notification-preview-btn {
  min-height:47px;
  margin-top:10px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#2563eb;
  font-size:13px;
  font-weight:700;
}
.notification-preview-btn i {
  margin-right:7px;
}
.notification-browser-note {
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  line-height:1.5;
}
body.dark-mode .notification-settings-submenu,
html.dark-mode body .notification-settings-submenu {
  border-color:rgba(125,211,252,.15);
  background:#07162d;
}
body.dark-mode .notification-setting-row,
html.dark-mode body .notification-setting-row {
  background:#0e213c;
  color:#e6f2ff;
}
body.dark-mode .notification-setting-row:hover,
body.dark-mode .notification-setting-row:focus,
html.dark-mode body .notification-setting-row:hover,
html.dark-mode body .notification-setting-row:focus {
  background:#122c4d;
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.2);
}
body.dark-mode .notification-setting-row small,
html.dark-mode body .notification-setting-row small {
  color:#8daac8;
}
body.dark-mode .notification-modal-toggle,
html.dark-mode body .notification-modal-toggle {
  border-color:rgba(125,211,252,.18);
  background:#0d203a;
}
body.dark-mode .notification-modal-toggle strong,
html.dark-mode body .notification-modal-toggle strong {
  color:#ecf6ff;
}
body.dark-mode .notification-modal-toggle small,
body.dark-mode .notification-field-label,
body.dark-mode .notification-browser-note,
html.dark-mode body .notification-modal-toggle small,
html.dark-mode body .notification-field-label,
html.dark-mode body .notification-browser-note {
  color:#91aac7;
}
body.dark-mode .notification-voice-select,
html.dark-mode body .notification-voice-select {
  border-color:rgba(125,211,252,.19) !important;
  color:#e6f2ff !important;
  background-color:#0d203a !important;
}
body.dark-mode .notification-preview-btn,
html.dark-mode body .notification-preview-btn {
  border-color:rgba(56,189,248,.27);
  background:#102c48;
  color:#7dd3fc;
}

/* v1.5.1 - Reset pembukuan tenant dengan pilihan Admin/Staff khusus Owner. */
.reset-bookkeeping-modal {
  max-width:470px !important;
}
.reset-bookkeeping-info p {
  color:#475569;
  font-size:14px;
  line-height:1.6;
  margin:0 0 13px;
}
.reset-user-picker {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#f8fafc;
}
.reset-user-picker-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:3px;
  color:#475569;
  font-size:12px;
}
.reset-user-picker-head button {
  border:0;
  border-radius:8px;
  padding:5px 9px;
  background:#e0e7ff;
  color:#3730a3;
  font-size:11px;
  font-weight:750;
}
.reset-user-choice {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:51px;
  padding:8px 9px;
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#ffffff;
  cursor:pointer;
}
.reset-user-choice input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.reset-user-check {
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  color:transparent;
  transition:.16s ease;
}
.reset-user-choice input:checked + .reset-user-check {
  border-color:#7c3aed;
  background:#7c3aed;
  color:#fff;
}
.reset-user-copy {
  flex:1;
  min-width:0;
}
.reset-user-copy strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#17243b;
  font-size:13px;
}
.reset-user-copy small {
  display:block;
  color:#64748b;
  font-size:11px;
}
.reset-user-copy em {
  margin-left:5px;
  color:#dc2626;
  font-style:normal;
  font-weight:750;
}
.reset-user-count {
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:8px;
  background:#f1f5f9;
  color:#475569;
  font-size:11px;
  font-weight:750;
}
.reset-bookkeeping-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid #fee2e2;
  border-radius:13px;
  background:#fff7f7;
  color:#991b1b;
  font-size:12px;
  font-weight:700;
}
.reset-bookkeeping-list i {
  margin-right:8px;
  color:#dc2626;
}
.reset-bookkeeping-keep {
  display:flex;
  gap:9px;
  margin:12px 0 16px;
  padding:11px 12px;
  border:1px solid #dbeafe;
  border-radius:13px;
  background:#eff6ff;
  color:#1e40af;
  font-size:12px;
  line-height:1.5;
  font-weight:650;
}
.reset-bookkeeping-keep i {
  flex-shrink:0;
  font-size:16px;
  color:#2563eb;
}
.reset-owner-password-label {
  display:block;
  margin:0 0 6px;
  color:#475569;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.reset-owner-password {
  min-height:48px;
  border-radius:12px !important;
}
.reset-danger-note {
  display:block;
  margin-top:8px;
  color:#dc2626;
  font-size:11px;
  font-weight:700;
}
.reset-bookkeeping-success p {
  color:#475569;
  font-size:14px;
  line-height:1.55;
}
.reset-bookkeeping-success div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin-top:7px;
  border-radius:11px;
  background:#f8fafc;
  color:#475569;
  font-size:13px;
  font-weight:700;
}
.reset-bookkeeping-success strong {
  color:#0f172a;
}
body.dark-mode .swal2-popup.reset-bookkeeping-modal,
html.dark-mode body .swal2-popup.reset-bookkeeping-modal {
  border:1px solid rgba(125,211,252,.16) !important;
  background:linear-gradient(180deg,#09182f 0%,#061226 100%) !important;
}
body.dark-mode .reset-bookkeeping-info p,
body.dark-mode .reset-owner-password-label,
body.dark-mode .reset-bookkeeping-success p,
html.dark-mode body .reset-bookkeeping-info p,
html.dark-mode body .reset-owner-password-label,
html.dark-mode body .reset-bookkeeping-success p {
  color:#afc5df;
}
body.dark-mode .reset-bookkeeping-list,
html.dark-mode body .reset-bookkeeping-list {
  border-color:rgba(248,113,113,.25);
  background:rgba(127,29,29,.22);
  color:#fecaca;
}
body.dark-mode .reset-user-picker,
html.dark-mode body .reset-user-picker {
  border-color:rgba(125,211,252,.15);
  background:#0a1c35;
}
body.dark-mode .reset-user-picker-head,
html.dark-mode body .reset-user-picker-head {
  color:#aec5df;
}
body.dark-mode .reset-user-picker-head button,
html.dark-mode body .reset-user-picker-head button {
  background:rgba(124,58,237,.28);
  color:#ddd6fe;
}
body.dark-mode .reset-user-choice,
html.dark-mode body .reset-user-choice {
  border-color:rgba(125,211,252,.15);
  background:#0e203b;
}
body.dark-mode .reset-user-check,
html.dark-mode body .reset-user-check {
  border-color:#49647f;
  background:#09192f;
}
body.dark-mode .reset-user-copy strong,
html.dark-mode body .reset-user-copy strong {
  color:#ffffff;
}
body.dark-mode .reset-user-copy small,
html.dark-mode body .reset-user-copy small {
  color:#94aac4;
}
body.dark-mode .reset-user-count,
html.dark-mode body .reset-user-count {
  background:#122b48;
  color:#bae6fd;
}
body.dark-mode .reset-bookkeeping-keep,
html.dark-mode body .reset-bookkeeping-keep {
  border-color:rgba(56,189,248,.2);
  background:rgba(14,116,144,.14);
  color:#bae6fd;
}
body.dark-mode .reset-owner-password,
html.dark-mode body .reset-owner-password {
  border-color:rgba(125,211,252,.2) !important;
  background:#0e203b !important;
  color:#ffffff !important;
}
body.dark-mode .reset-bookkeeping-success div,
html.dark-mode body .reset-bookkeeping-success div {
  background:#0e203b;
  color:#aec5df;
}
body.dark-mode .reset-bookkeeping-success strong,
html.dark-mode body .reset-bookkeeping-success strong {
  color:#ffffff;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-btn.reset-bookkeeping,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-btn.reset-bookkeeping {
  background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
  border-color:rgba(196,181,253,.45) !important;
  color:#ffffff !important;
  box-shadow:0 5px 13px rgba(76,29,149,.32) !important;
}
body.dark-mode[data-page="pelanggan"] #page-pelanggan .legacy-btn.cleanup-categories,
html.dark-mode body[data-page="pelanggan"] #page-pelanggan .legacy-btn.cleanup-categories {
  background:linear-gradient(135deg,#0891b2,#0f766e) !important;
  border-color:rgba(103,232,249,.36) !important;
  color:#ecfeff !important;
  box-shadow:0 5px 13px rgba(14,116,144,.30) !important;
}

/* v1.9.0 - Backup Google Drive sederhana khusus Admin tenant. */
.drive-backup-page {
  --drive-text:#132238;
  --drive-muted:#62738b;
  --drive-line:#e2e8f0;
  --drive-panel:#ffffff;
  --drive-soft:#f7fafc;
  color:var(--drive-text);
}
.drive-backup-hero {
  display:flex;
  align-items:center;
  gap:18px;
  padding:23px 25px;
  margin-bottom:18px;
  border:1px solid #dce8f2;
  border-radius:8px;
  background:linear-gradient(118deg,#ffffff 0%,#f1f8ff 52%,#effcf8 100%);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
}
.drive-backup-hero-icon {
  flex:0 0 auto;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#fff;
  color:#4285f4;
  font-size:29px;
  box-shadow:0 10px 25px rgba(66,133,244,.17);
}
.drive-backup-hero-copy { flex:1 1 auto; min-width:0; }
.drive-backup-hero-copy small {
  display:block;
  color:#059669;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.drive-backup-hero-copy h5 {
  margin:3px 0 5px;
  color:var(--drive-text);
  font:800 22px/1.2 'Poppins',sans-serif;
}
.drive-backup-hero-copy p {
  margin:0;
  color:var(--drive-muted);
  font-size:13px;
}
.drive-connection-badge {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:235px;
  padding:9px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:750;
}
.drive-connection-badge.offline { background:#f1f5f9; color:#64748b; }
.drive-connection-badge.online { background:#dcfce7; color:#15803d; }
.drive-backup-grid {
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);
  gap:16px;
  margin-bottom:16px;
}
.drive-settings-panel,
.drive-run-panel,
.drive-history-panel {
  padding:19px;
  border:1px solid var(--drive-line);
  border-radius:8px;
  background:var(--drive-panel);
  box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.drive-panel-title {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
}
.drive-panel-title > i {
  width:39px;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#ecfdf5;
  color:#059669;
  font-size:18px;
}
.drive-panel-title strong {
  display:block;
  color:var(--drive-text);
  font:750 15px/1.2 'Poppins',sans-serif;
}
.drive-panel-title span {
  display:block;
  margin-top:2px;
  color:var(--drive-muted);
  font-size:11px;
}
.drive-field-label {
  display:block;
  margin:12px 0 6px;
  color:#475569;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.drive-backup-page .form-control {
  min-height:47px;
  border-radius:8px;
  border-color:#dbe4ee;
  color:#1e293b;
}
.drive-field-note {
  display:block;
  margin:7px 0 13px;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}
.drive-setting-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:16px;
}
.drive-secondary-btn,
.drive-connect-btn,
.drive-backup-btn,
.drive-json-btn,
.drive-restore-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:47px;
  border-radius:8px;
  border:0;
  font-size:13px;
  font-weight:750;
}
.drive-secondary-btn {
  border:1px solid #dbe4ee;
  background:#f8fafc;
  color:#334155;
}
.drive-connect-btn {
  background:linear-gradient(135deg,#4285f4,#0f9d58);
  color:#fff;
  box-shadow:0 11px 23px rgba(15,157,88,.19);
}
.drive-backup-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-bottom:13px;
}
.drive-backup-stats div {
  min-width:0;
  padding:9px 8px;
  border-radius:8px;
  background:#f5f8fc;
  border:1px solid #edf2f7;
}
.drive-backup-stats small {
  display:block;
  overflow:hidden;
  color:#64748b;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
.drive-backup-stats strong {
  display:block;
  margin-top:4px;
  color:#17243b;
  font-size:18px;
}
.drive-protection-note {
  display:flex;
  gap:8px;
  padding:10px;
  margin-bottom:12px;
  border:1px solid #d1fae5;
  border-radius:8px;
  background:#ecfdf5;
  color:#047857;
  font-size:11px;
  line-height:1.45;
  font-weight:650;
}
.drive-backup-progress {
  padding:10px;
  margin-bottom:11px;
  border-radius:8px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:700;
}
.drive-backup-progress.success { background:#ecfdf5; color:#047857; }
.drive-backup-progress.warning { background:#fffbeb; color:#b45309; }
.drive-backup-progress.error { background:#fef2f2; color:#b91c1c; }
.drive-backup-btn {
  width:100%;
  background:linear-gradient(135deg,#0f9d58,#12b981);
  color:#fff;
  box-shadow:0 11px 22px rgba(5,150,105,.18);
}
.drive-backup-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.drive-restore-btn {
  width:100%;
  border:1px solid #bbf7d0;
  background:#fff;
  color:#047857;
}
.drive-json-btn {
  width:100%;
  margin-top:8px;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#2563eb;
}
.drive-history-list { display:flex; flex-direction:column; gap:8px; }
.drive-history-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-radius:8px;
  background:#f8fafc;
}
.drive-history-file {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.drive-history-file > i { color:#4285f4; font-size:22px; }
.drive-history-file strong {
  display:block;
  overflow:hidden;
  color:#17243b;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.drive-history-file small {
  display:block;
  color:#64748b;
  font-size:10px;
}
.drive-history-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.drive-history-meta span {
  padding:4px 8px;
  border-radius:8px;
  font-size:10px;
  font-weight:800;
}
.drive-history-meta .complete { background:#dcfce7; color:#15803d; }
.drive-history-meta .partial { background:#fef3c7; color:#b45309; }
.drive-history-meta small { color:#64748b; font-size:10px; font-weight:700; }
.drive-history-meta a { color:#2563eb; }
.drive-empty {
  padding:22px 12px;
  border:1px dashed #dbe4ee;
  border-radius:8px;
  text-align:center;
  color:#64748b;
  font-size:12px;
}
@media (max-width: 767px) {
  .drive-backup-page { padding-bottom:calc(var(--bottom-nav-height, 76px) + 24px); }
  .drive-backup-hero { flex-wrap:wrap; gap:13px; padding:17px; }
  .drive-backup-hero-icon { width:49px; height:49px; font-size:25px; }
  .drive-backup-hero-copy h5 { font-size:18px; }
  .drive-connection-badge { width:100%; justify-content:center; max-width:none; }
  .drive-backup-grid { grid-template-columns:1fr; }
  .drive-settings-panel, .drive-run-panel, .drive-history-panel { padding:15px; }
  .drive-setting-actions { grid-template-columns:1fr; }
  .drive-backup-stats strong { font-size:16px; }
  .drive-history-row { flex-direction:column; align-items:stretch; }
  .drive-history-meta { justify-content:space-between; }
  .drive-backup-actions { grid-template-columns:1fr; }
}
body.dark-mode .drive-backup-page,
html.dark-mode body .drive-backup-page {
  --drive-text:#f1f7ff;
  --drive-muted:#91a9c5;
  --drive-line:rgba(125,211,252,.16);
  --drive-panel:#08192f;
  --drive-soft:#0b2038;
}
body.dark-mode .drive-backup-hero,
html.dark-mode body .drive-backup-hero {
  border-color:rgba(125,211,252,.17);
  background:linear-gradient(120deg,#08192f,#0a223c 52%,#072c2b);
  box-shadow:0 18px 44px rgba(0,0,0,.25);
}
body.dark-mode .drive-backup-hero-icon,
html.dark-mode body .drive-backup-hero-icon {
  background:#102944;
  color:#79adff;
}
body.dark-mode .drive-connection-badge.offline,
html.dark-mode body .drive-connection-badge.offline { background:#10243d; color:#a1b6d0; }
body.dark-mode .drive-connection-badge.online,
html.dark-mode body .drive-connection-badge.online { background:rgba(5,150,105,.22); color:#86efac; }
body.dark-mode .drive-settings-panel,
body.dark-mode .drive-run-panel,
body.dark-mode .drive-history-panel,
html.dark-mode body .drive-settings-panel,
html.dark-mode body .drive-run-panel,
html.dark-mode body .drive-history-panel {
  background:#08192f;
  border-color:rgba(125,211,252,.16);
}
body.dark-mode .drive-panel-title > i,
html.dark-mode body .drive-panel-title > i {
  background:rgba(16,185,129,.13);
  color:#5eead4;
}
body.dark-mode .drive-field-label,
html.dark-mode body .drive-field-label { color:#aac0d9; }
body.dark-mode .drive-backup-page .form-control,
html.dark-mode body .drive-backup-page .form-control {
  border-color:rgba(125,211,252,.18);
  background:#0d233d;
  color:#fff;
}
body.dark-mode .drive-backup-page .form-control::placeholder,
html.dark-mode body .drive-backup-page .form-control::placeholder { color:#637d99; }
body.dark-mode .drive-field-note,
html.dark-mode body .drive-field-note { color:#91a9c5; }
body.dark-mode .drive-secondary-btn,
body.dark-mode .drive-json-btn,
body.dark-mode .drive-restore-btn,
html.dark-mode body .drive-secondary-btn,
html.dark-mode body .drive-json-btn,
html.dark-mode body .drive-restore-btn {
  border-color:rgba(125,211,252,.18);
  background:#0e263f;
  color:#c7dcf4;
}
body.dark-mode .drive-backup-stats div,
html.dark-mode body .drive-backup-stats div {
  border-color:rgba(125,211,252,.11);
  background:#0d233d;
}
body.dark-mode .drive-backup-stats small,
body.dark-mode .drive-history-file small,
body.dark-mode .drive-history-meta small,
html.dark-mode body .drive-backup-stats small,
html.dark-mode body .drive-history-file small,
html.dark-mode body .drive-history-meta small { color:#91a9c5; }
body.dark-mode .drive-backup-stats strong,
body.dark-mode .drive-history-file strong,
html.dark-mode body .drive-backup-stats strong,
html.dark-mode body .drive-history-file strong { color:#fff; }
body.dark-mode .drive-protection-note,
html.dark-mode body .drive-protection-note {
  border-color:rgba(52,211,153,.2);
  background:rgba(5,150,105,.12);
  color:#99f6e4;
}
body.dark-mode .drive-history-row,
html.dark-mode body .drive-history-row { background:#0d233d; }
body.dark-mode .drive-empty,
html.dark-mode body .drive-empty {
  border-color:rgba(125,211,252,.17);
  color:#91a9c5;
}

/* v1.9.0 - Integrasi Google Drive terpusat khusus Owner. */
.drive-integration-page {
  --integration-text:#132238;
  --integration-muted:#62738b;
  --integration-border:#e2e8f0;
}
.drive-integration-hero {
  display:flex;
  align-items:center;
  gap:18px;
  max-width:820px;
  margin:0 auto 16px;
  padding:22px 24px;
  border:1px solid #dce8f2;
  border-radius:8px;
  background:linear-gradient(118deg,#fff,#f1f8ff 55%,#effcf8);
  box-shadow:0 14px 36px rgba(15,23,42,.06);
}
.drive-integration-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:8px;
  background:#fff;
  color:#4285f4;
  font-size:29px;
  box-shadow:0 10px 25px rgba(66,133,244,.16);
}
.drive-integration-copy { flex:1 1 auto; min-width:0; }
.drive-integration-copy small {
  display:block;
  color:#059669;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.drive-integration-copy h5 {
  margin:3px 0 5px;
  color:var(--integration-text);
  font:800 21px/1.2 'Poppins',sans-serif;
}
.drive-integration-copy p { margin:0; color:var(--integration-muted); font-size:13px; }
.drive-integration-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:750;
}
.drive-integration-status.offline { background:#f1f5f9; color:#64748b; }
.drive-integration-status.online { background:#dcfce7; color:#15803d; }
.drive-integration-card {
  max-width:820px;
  margin:0 auto 24px;
  padding:21px;
  border:1px solid var(--integration-border);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.drive-integration-card-head {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;
}
.drive-integration-card-head > i {
  display:flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:39px;
  border-radius:8px;
  background:#ecfdf5;
  color:#059669;
  font-size:18px;
}
.drive-integration-card-head strong {
  display:block;
  color:var(--integration-text);
  font:750 15px/1.2 'Poppins',sans-serif;
}
.drive-integration-card-head span { display:block; margin-top:2px; color:var(--integration-muted); font-size:11px; }
.drive-integration-page .form-control {
  min-height:48px;
  border-radius:8px;
  border-color:#dbe4ee;
}
.drive-integration-guide {
  display:flex;
  gap:9px;
  margin:16px 0;
  padding:12px;
  border-radius:8px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:600;
}
.drive-integration-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.drive-owner-save-btn,
.drive-owner-test-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  border-radius:8px;
  font-size:13px;
  font-weight:750;
}
.drive-owner-save-btn {
  border:0;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.2);
}
.drive-owner-test-btn { border:1px solid #bfdbfe; background:#fff; color:#2563eb; }
@media (max-width:767px) {
  .drive-integration-page { padding-bottom:calc(var(--bottom-nav-height, 76px) + 24px); }
  .drive-integration-hero { flex-wrap:wrap; padding:17px; gap:13px; }
  .drive-integration-icon { width:49px; height:49px; flex-basis:49px; font-size:25px; }
  .drive-integration-copy h5 { font-size:18px; }
  .drive-integration-status { width:100%; justify-content:center; }
  .drive-integration-card { padding:15px; }
  .drive-integration-actions { grid-template-columns:1fr; }
}
body.dark-mode .drive-integration-page,
html.dark-mode body .drive-integration-page {
  --integration-text:#f1f7ff;
  --integration-muted:#91a9c5;
  --integration-border:rgba(125,211,252,.16);
}
body.dark-mode .drive-integration-hero,
html.dark-mode body .drive-integration-hero {
  border-color:rgba(125,211,252,.17);
  background:linear-gradient(120deg,#08192f,#0a223c 52%,#072c2b);
  box-shadow:0 18px 44px rgba(0,0,0,.25);
}
body.dark-mode .drive-integration-icon,
html.dark-mode body .drive-integration-icon { background:#102944; color:#79adff; }
body.dark-mode .drive-integration-status.offline,
html.dark-mode body .drive-integration-status.offline { background:#10243d; color:#a1b6d0; }
body.dark-mode .drive-integration-status.online,
html.dark-mode body .drive-integration-status.online { background:rgba(5,150,105,.22); color:#86efac; }
body.dark-mode .drive-integration-card,
html.dark-mode body .drive-integration-card { background:#08192f; border-color:rgba(125,211,252,.16); }
body.dark-mode .drive-integration-card-head > i,
html.dark-mode body .drive-integration-card-head > i { background:rgba(16,185,129,.13); color:#5eead4; }
body.dark-mode .drive-integration-card-head strong,
html.dark-mode body .drive-integration-card-head strong { color:#fff; }
body.dark-mode .drive-integration-card-head span,
html.dark-mode body .drive-integration-card-head span { color:#91a9c5; }
body.dark-mode .drive-integration-page .form-control,
html.dark-mode body .drive-integration-page .form-control {
  border-color:rgba(125,211,252,.18);
  background:#0d233d;
  color:#fff;
}
body.dark-mode .drive-integration-guide,
html.dark-mode body .drive-integration-guide {
  border-color:rgba(96,165,250,.22);
  background:rgba(37,99,235,.12);
  color:#bfdbfe;
}
body.dark-mode .drive-owner-test-btn,
html.dark-mode body .drive-owner-test-btn {
  border-color:rgba(125,211,252,.18);
  background:#0e263f;
  color:#bfdbfe;
}

/* v1.11.0 - Mutasi internal dan saldo kategori per user. */
.transfer-source-balance {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 10px;
  padding:11px 12px;
  border:1px solid #bfdbfe;
  border-radius:8px;
  background:#eff6ff;
}
.transfer-source-balance span {
  color:#475569;
  font-size:11px;
  font-weight:700;
}
.transfer-source-balance strong {
  color:#2563eb;
  font:800 16px/1.2 'Poppins',sans-serif;
}
.transfer-source-balance small {
  flex:0 0 100%;
  color:#64748b;
  font-size:10px;
}
.category-balance-lines { display:flex; flex-direction:column; gap:7px; }
.category-balance-lines div { display:flex; flex-direction:column; min-width:0; }
.category-balance-lines span {
  margin-bottom:2px;
  color:#64748b;
  font-size:10px;
  font-weight:600;
}
.category-balance-lines strong {
  overflow:hidden;
  font:800 15px/1.25 'Poppins',sans-serif;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.category-balance-lines .mine {
  margin-top:2px;
  padding:6px 7px;
  border-radius:7px;
  background:#eff6ff;
}
.category-balance-lines .mine strong { color:#2563eb; font-size:14px; }
.category-detail-mine {
  margin-left:auto;
  padding-left:12px;
  text-align:right;
}
.category-detail-mine strong { color:#2563eb; font-size:17px; }
.category-detail-section-title {
  margin:17px 0 6px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.category-detail-row.transfer-movement strong { font-size:13px; }
.swal2-popup.category-detail-modal {
  padding:3px !important;
  border-radius:24px !important;
  border:1px solid rgba(37,99,235,.18) !important;
  overflow:hidden;
}
.swal2-popup.category-detail-modal .swal2-title {
  margin:0 !important;
  padding:18px 18px 0 !important;
}
.swal2-popup.category-detail-modal .swal2-html-container {
  margin:0 !important;
  padding:12px 14px 4px !important;
}
.swal2-popup.category-detail-modal .swal2-actions {
  margin:0 !important;
  padding:8px 14px 14px !important;
}
.category-detail-shell {
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #e2e8f0;
}
.category-detail-row.is-clickable {
  margin:0 -4px;
  padding:10px 9px;
  border-radius:12px;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.category-detail-row.is-clickable:hover,
.category-detail-row.is-clickable:focus-visible {
  border-bottom-color:transparent;
  background:#eff6ff;
  outline:none;
  transform:translateX(2px);
}
.category-detail-row strong i {
  margin-left:4px;
  font-size:12px;
  opacity:.58;
}
body.dark-mode .transfer-source-balance,
html.dark-mode body .transfer-source-balance {
  border-color:rgba(96,165,250,.23);
  background:rgba(37,99,235,.13);
}
body.dark-mode .transfer-source-balance span,
body.dark-mode .transfer-source-balance small,
body.dark-mode .category-balance-lines span,
body.dark-mode .category-detail-section-title,
html.dark-mode body .transfer-source-balance span,
html.dark-mode body .transfer-source-balance small,
html.dark-mode body .category-balance-lines span,
html.dark-mode body .category-detail-section-title { color:#a9c1de; }
body.dark-mode .transfer-source-balance strong,
html.dark-mode body .transfer-source-balance strong { color:#7dd3fc; }
body.dark-mode[data-page="kategori"] #page-kategori .category-balance-lines .mine,
html.dark-mode body[data-page="kategori"] #page-kategori .category-balance-lines .mine {
  background:rgba(37,99,235,.16);
}
body.dark-mode[data-page="kategori"] #page-kategori .category-balance-lines .mine strong,
html.dark-mode body[data-page="kategori"] #page-kategori .category-balance-lines .mine strong,
body.dark-mode .category-detail-mine strong,
html.dark-mode body .category-detail-mine strong { color:#7dd3fc; }
body.dark-mode .swal2-popup.category-detail-modal,
html.dark-mode body .swal2-popup.category-detail-modal {
  border-color:rgba(125,211,252,.18) !important;
  background:#081525 !important;
}
body.dark-mode .category-detail-shell,
html.dark-mode body .category-detail-shell {
  border-color:rgba(125,211,252,.14);
  background:linear-gradient(180deg,#0f2237 0%,#0a1829 100%);
}
body.dark-mode .category-detail-row.is-clickable:hover,
body.dark-mode .category-detail-row.is-clickable:focus-visible,
html.dark-mode body .category-detail-row.is-clickable:hover,
html.dark-mode body .category-detail-row.is-clickable:focus-visible {
  background:rgba(37,99,235,.16);
}
@media (max-width:767px) {
  .swal2-popup.category-detail-modal {
    width:calc(100vw - 24px) !important;
    border-radius:22px !important;
  }
  .swal2-popup.category-detail-modal .swal2-title { padding:15px 14px 0 !important; }
  .swal2-popup.category-detail-modal .swal2-html-container { padding:10px 10px 2px !important; }
  .category-detail-shell { padding:8px; border-radius:18px; }
  .category-balance-lines strong { font-size:13px; }
  .category-balance-lines .mine strong { font-size:12px; }
  .category-detail-head { flex-wrap:wrap; }
  .category-detail-mine {
    flex:0 0 100%;
    margin-left:42px;
    padding:8px 0 0;
    text-align:left;
  }
}

/* v1.11.7 - Badge role Akun desktop mode gelap dibuat lebih premium. */
@media (min-width: 992px) {
  body.dark-mode[data-page="profil"] #page-profil #profileRole,
  html.dark-mode body[data-page="profil"] #page-profil #profileRole {
    background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(20,184,166,.14)) !important;
    border:1px solid rgba(125,211,252,.34) !important;
    color:#dff7ff !important;
    box-shadow:
      0 12px 28px rgba(14,165,233,.14),
      inset 0 1px 0 rgba(255,255,255,.13) !important;
    text-shadow:0 1px 2px rgba(2,6,23,.45) !important;
  }
}

/* v1.11.8 - Branding Aplikasi mode gelap dibuat menyeluruh. */
body.dark-mode[data-page="branding"],
html.dark-mode body[data-page="branding"] {
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.20), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(20,184,166,.15), transparent 30%),
    linear-gradient(180deg,#020617 0%,#061126 54%,#020617 100%) !important;
}
body.dark-mode[data-page="branding"] .main-content,
body.dark-mode[data-page="branding"] .content-area,
body.dark-mode[data-page="branding"] #page-branding,
html.dark-mode body[data-page="branding"] .main-content,
html.dark-mode body[data-page="branding"] .content-area,
html.dark-mode body[data-page="branding"] #page-branding {
  background:transparent !important;
  color:#f8fafc !important;
}
body.dark-mode[data-page="branding"] #page-branding > h4,
body.dark-mode[data-page="branding"] #page-branding .settings-page-hero h5,
body.dark-mode[data-page="branding"] #page-branding label,
html.dark-mode body[data-page="branding"] #page-branding > h4,
html.dark-mode body[data-page="branding"] #page-branding .settings-page-hero h5,
html.dark-mode body[data-page="branding"] #page-branding label {
  color:#ffffff !important;
}
body.dark-mode[data-page="branding"] #page-branding .setting-page-card,
html.dark-mode body[data-page="branding"] #page-branding .setting-page-card {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="branding"] #page-branding .settings-page-hero,
html.dark-mode body[data-page="branding"] #page-branding .settings-page-hero {
  background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(20,184,166,.13)) !important;
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.dark-mode[data-page="branding"] #page-branding .settings-page-icon,
html.dark-mode body[data-page="branding"] #page-branding .settings-page-icon {
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:#ffffff !important;
  border:1px solid rgba(191,219,254,.24) !important;
  box-shadow:0 14px 30px rgba(14,165,233,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body.dark-mode[data-page="branding"] #page-branding .settings-page-hero small,
body.dark-mode[data-page="branding"] #page-branding .settings-page-hero p,
body.dark-mode[data-page="branding"] #page-branding .text-muted,
body.dark-mode[data-page="branding"] #page-branding small,
html.dark-mode body[data-page="branding"] #page-branding .settings-page-hero small,
html.dark-mode body[data-page="branding"] #page-branding .settings-page-hero p,
html.dark-mode body[data-page="branding"] #page-branding .text-muted,
html.dark-mode body[data-page="branding"] #page-branding small {
  color:rgba(226,232,240,.76) !important;
}
body.dark-mode[data-page="branding"] #page-branding .form-control,
body.dark-mode[data-page="branding"] #page-branding .form-select,
html.dark-mode body[data-page="branding"] #page-branding .form-control,
html.dark-mode body[data-page="branding"] #page-branding .form-select {
  background:#071225 !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.dark-mode[data-page="branding"] #page-branding .form-control:focus,
body.dark-mode[data-page="branding"] #page-branding .form-select:focus,
html.dark-mode body[data-page="branding"] #page-branding .form-control:focus,
html.dark-mode body[data-page="branding"] #page-branding .form-select:focus {
  border-color:rgba(56,189,248,.72) !important;
  box-shadow:0 0 0 .18rem rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="branding"] #page-branding .form-control::placeholder,
html.dark-mode body[data-page="branding"] #page-branding .form-control::placeholder {
  color:rgba(226,232,240,.42) !important;
}
body.dark-mode[data-page="branding"] #page-branding .form-control[type="file"]::file-selector-button,
html.dark-mode body[data-page="branding"] #page-branding .form-control[type="file"]::file-selector-button {
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:#ffffff !important;
  border:0 !important;
}
body.dark-mode[data-page="branding"] #brandingTenantUrlBox,
html.dark-mode body[data-page="branding"] #brandingTenantUrlBox {
  background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(20,184,166,.10)) !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="branding"] #brandingTenantUrlBox label,
html.dark-mode body[data-page="branding"] #brandingTenantUrlBox label {
  color:#7dd3fc !important;
}
body.dark-mode[data-page="branding"] #brandingTenantUrlBox b,
html.dark-mode body[data-page="branding"] #brandingTenantUrlBox b {
  color:#dff7ff !important;
}
body.dark-mode[data-page="branding"] #brandingTenantUrlBox .btn,
html.dark-mode body[data-page="branding"] #brandingTenantUrlBox .btn {
  background:rgba(125,211,252,.12) !important;
  color:#dff7ff !important;
  border:1px solid rgba(125,211,252,.22) !important;
}
body.dark-mode[data-page="branding"] #page-branding .btn-branding-default,
html.dark-mode body[data-page="branding"] #page-branding .btn-branding-default {
  background:rgba(15,23,42,.72) !important;
  color:#dff7ff !important;
  border:1px solid rgba(125,211,252,.22) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}
body.dark-mode[data-page="branding"] #page-branding .btn-branding-default:hover,
html.dark-mode body[data-page="branding"] #page-branding .btn-branding-default:hover {
  background:rgba(14,165,233,.16) !important;
  color:#ffffff !important;
}
@media (max-width: 991.98px) {
  body.dark-mode[data-page="branding"] #page-branding .setting-page-card,
  html.dark-mode body[data-page="branding"] #page-branding .setting-page-card {
    border-radius:24px !important;
  }
  body.dark-mode[data-page="branding"] #page-branding .settings-page-hero,
  html.dark-mode body[data-page="branding"] #page-branding .settings-page-hero {
    align-items:flex-start;
  }
}

/* v1.11.9 - Riwayat Transaksi/Buku Besar terang dan gelap dibuat lebih premium. */
body[data-page="transaksi"] #page-transaksi > .card-custom {
  border:1px solid rgba(226,232,240,.92);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 20px 50px rgba(15,23,42,.075);
}
body[data-page="transaksi"] #page-transaksi .card-header-custom h6 {
  letter-spacing:-.2px;
}
body[data-page="transaksi"] #page-transaksi .history-filter-panel {
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border-color:#dbe7f5;
  box-shadow:0 16px 36px rgba(15,23,42,.055);
}
body[data-page="transaksi"] #page-transaksi .history-filter-title {
  color:#0f172a;
}
body[data-page="transaksi"] #page-transaksi .date-range-trigger,
body[data-page="transaksi"] #page-transaksi .history-user-filter .form-control {
  border-color:#d3deed;
  background:#ffffff;
}
body[data-page="transaksi"] #page-transaksi .history-accordion-toggle {
  border:1px solid #dbeafe;
  background:linear-gradient(135deg,#eef2ff,#ecfeff);
}
body[data-page="transaksi"] #page-transaksi .filter-chip {
  border-color:#e2e8f0;
  background:#f8fafc;
  color:#475569;
  font-weight:800;
}
body[data-page="transaksi"] #page-transaksi .filter-chip.active {
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  border-color:transparent;
  color:#ffffff;
  box-shadow:0 10px 22px rgba(37,99,235,.20);
}
body[data-page="transaksi"] #page-transaksi .btn-filter-search,
body[data-page="transaksi"] #page-transaksi .btn-filter-download {
  border-radius:14px;
}
body[data-page="transaksi"] #page-transaksi .tx-item {
  border-color:#e2e8f0;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
body[data-page="transaksi"] #page-transaksi .tx-item:hover {
  border-color:#bfdbfe;
  box-shadow:0 18px 38px rgba(37,99,235,.10);
}
body[data-page="transaksi"] #page-transaksi .tx-icon {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
body[data-page="transaksi"] #page-transaksi .tx-details .meta-user {
  border:1px solid #c7d2fe;
}
body[data-page="transaksi"] #page-transaksi .history-filter-total {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #dbe7f5;
  box-shadow:0 16px 34px rgba(15,23,42,.055);
}
body[data-page="transaksi"] #page-transaksi .history-filter-total-item {
  min-width:0;
  border-radius:17px;
  padding:15px 16px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 22px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.78);
}
body[data-page="transaksi"] #page-transaksi .history-filter-total-item span {
  display:block;
  margin-bottom:4px;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body[data-page="transaksi"] #page-transaksi .history-filter-total-item strong {
  display:block;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:22px;
  line-height:1.18;
  font-weight:950;
  overflow-wrap:anywhere;
}
body.dark-mode[data-page="transaksi"],
html.dark-mode body[data-page="transaksi"] {
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.20), transparent 33%),
    radial-gradient(circle at 86% 10%, rgba(20,184,166,.15), transparent 31%),
    linear-gradient(180deg,#020617 0%,#061126 54%,#020617 100%) !important;
}
body.dark-mode[data-page="transaksi"] .main-content,
body.dark-mode[data-page="transaksi"] .content-area,
body.dark-mode[data-page="transaksi"] #page-transaksi,
html.dark-mode body[data-page="transaksi"] .main-content,
html.dark-mode body[data-page="transaksi"] .content-area,
html.dark-mode body[data-page="transaksi"] #page-transaksi {
  background:transparent !important;
  color:#f8fafc !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi > .card-custom,
html.dark-mode body[data-page="transaksi"] #page-transaksi > .card-custom {
  background:linear-gradient(180deg,rgba(8,21,45,.98) 0%,rgba(5,15,33,.98) 100%) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .card-header-custom,
html.dark-mode body[data-page="transaksi"] #page-transaksi .card-header-custom {
  border-color:rgba(148,163,184,.18) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .card-header-custom h6,
body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home,
body.dark-mode[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home span,
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-title,
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .title,
html.dark-mode body[data-page="transaksi"] #page-transaksi .card-header-custom h6,
html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home,
html.dark-mode body[data-page="transaksi"] #page-transaksi .mobile-page-title-with-home span,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-title,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .title {
  color:#ffffff !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-panel,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-panel {
  background:linear-gradient(180deg,rgba(13,30,58,.96),rgba(7,18,37,.96)) !important;
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-divider,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-divider {
  background:rgba(148,163,184,.20) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger,
body.dark-mode[data-page="transaksi"] #page-transaksi .history-user-filter .form-control,
html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-user-filter .form-control {
  background:#071225 !important;
  color:#ffffff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger i,
body.dark-mode[data-page="transaksi"] #page-transaksi .date-range-trigger span,
body.dark-mode[data-page="transaksi"] #page-transaksi .history-user-filter .form-control option,
html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger i,
html.dark-mode body[data-page="transaksi"] #page-transaksi .date-range-trigger span,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-user-filter .form-control option {
  color:#ffffff !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-accordion-toggle,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-accordion-toggle {
  background:linear-gradient(135deg,rgba(37,99,235,.23),rgba(20,184,166,.13)) !important;
  color:#dff7ff !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.24) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip,
html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip {
  background:rgba(15,23,42,.68) !important;
  color:rgba(226,232,240,.82) !important;
  border:1px solid rgba(148,163,184,.20) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip:hover,
html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip:hover {
  background:rgba(37,99,235,.20) !important;
  color:#ffffff !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .filter-chip.active,
html.dark-mode body[data-page="transaksi"] #page-transaksi .filter-chip.active {
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  border-color:rgba(191,219,254,.26) !important;
  color:#ffffff !important;
  box-shadow:0 14px 28px rgba(14,165,233,.18) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-item,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-item {
  background:linear-gradient(180deg,rgba(8,21,45,.96),rgba(5,15,33,.96)) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-item:hover,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-item:hover {
  border-color:rgba(125,211,252,.32) !important;
  box-shadow:0 18px 42px rgba(14,165,233,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .date,
body.dark-mode[data-page="transaksi"] #page-transaksi .text-muted,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .date,
html.dark-mode body[data-page="transaksi"] #page-transaksi .text-muted {
  color:rgba(226,232,240,.72) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user {
  background:rgba(37,99,235,.18) !important;
  color:#dff7ff !important;
  border:1px solid rgba(125,211,252,.22) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-details .meta-user *,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-details .meta-user * {
  color:#dff7ff !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-total,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-total {
  background:linear-gradient(180deg,rgba(13,30,58,.96),rgba(7,18,37,.96)) !important;
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-total-item,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-total-item {
  background:linear-gradient(180deg,rgba(8,21,45,.96),rgba(5,15,33,.96)) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-total-item span,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-total-item span {
  color:rgba(226,232,240,.72) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .history-filter-total-item strong,
html.dark-mode body[data-page="transaksi"] #page-transaksi .history-filter-total-item strong {
  color:#ffffff !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .tx-item.is-pending,
html.dark-mode body[data-page="transaksi"] #page-transaksi .tx-item.is-pending {
  background:linear-gradient(180deg,rgba(55,36,12,.92),rgba(34,25,16,.94)) !important;
  border-color:rgba(253,230,138,.32) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state,
body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state p,
html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state,
html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state p {
  color:rgba(226,232,240,.78) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state div[style*="background"],
html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state div[style*="background"] {
  background:rgba(125,211,252,.10) !important;
  border:1px solid rgba(125,211,252,.18) !important;
}
body.dark-mode[data-page="transaksi"] #page-transaksi .empty-state i,
html.dark-mode body[data-page="transaksi"] #page-transaksi .empty-state i {
  color:#7dd3fc !important;
}
body.dark-mode .swal2-popup.date-range-popup,
html.dark-mode body .swal2-popup.date-range-popup {
  background:linear-gradient(180deg,#0b1a31,#071225) !important;
  border:1px solid rgba(125,211,252,.22) !important;
  color:#ffffff !important;
}
body.dark-mode .date-range-head,
html.dark-mode body .date-range-head {
  border-color:rgba(148,163,184,.20) !important;
}
body.dark-mode .date-range-head strong,
html.dark-mode body .date-range-head strong {
  color:#ffffff !important;
}
@media (max-width: 576px) {
  body[data-page="transaksi"] .content-area,
  html.dark-mode body[data-page="transaksi"] .content-area,
  body.dark-mode[data-page="transaksi"] .content-area {
    padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  }
  body[data-page="transaksi"] #page-transaksi > .card-custom {
    margin-bottom:0 !important;
  }
  body[data-page="transaksi"] #txListContainer {
    display:flex;
    flex-direction:column;
    min-height:calc(100dvh - 430px);
    padding-bottom:0 !important;
  }
  body[data-page="transaksi"] #page-transaksi .history-filter-total {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
    border-radius:18px;
    margin-top:auto;
  }
  body[data-page="transaksi"] #page-transaksi .history-filter-total-item {
    border-radius:15px;
    padding:12px 10px;
  }
  body[data-page="transaksi"] #page-transaksi .history-filter-total-item span {
    font-size:10px;
    margin-bottom:3px;
  }
  body[data-page="transaksi"] #page-transaksi .history-filter-total-item strong {
    font-size:16px;
  }
}
body.dark-mode .date-range-head small,
html.dark-mode body .date-range-head small {
  color:rgba(226,232,240,.70) !important;
}
body.dark-mode .range-shortcut,
html.dark-mode body .range-shortcut {
  background:rgba(15,23,42,.72) !important;
  color:#dff7ff !important;
  border:1px solid rgba(125,211,252,.16) !important;
}
body.dark-mode .range-shortcut.active,
body.dark-mode .range-shortcut:focus,
html.dark-mode body .range-shortcut.active,
html.dark-mode body .range-shortcut:focus {
  background:linear-gradient(135deg,#2563eb,#14b8a6) !important;
  color:#ffffff !important;
}
body.dark-mode .range-inputs label,
html.dark-mode body .range-inputs label {
  background:#071225 !important;
  border-color:rgba(125,211,252,.22) !important;
}
body.dark-mode .range-inputs input,
body.dark-mode .range-inputs i,
html.dark-mode body .range-inputs input,
html.dark-mode body .range-inputs i {
  color:#ffffff !important;
}
/* v1.13.1 - Detail transaksi dibuat premium dengan jarak popup tetap rapat. */
.swal2-popup.tx-detail-popup.card-custom {
  padding: 3px !important;
  width: min(92vw, 470px) !important;
  border-radius: 20px !important;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(37, 99, 235, .12) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22) !important;
}
.swal2-popup.tx-detail-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.swal2-popup.tx-detail-popup .swal2-close {
  width: 36px;
  height: 36px;
  right: 8px;
  top: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #334155;
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
}
.tx-detail-premium {
  text-align: left;
  padding: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.tx-detail-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-radius: 16px;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
  box-shadow: 0 18px 35px rgba(37,99,235,.25);
}
.tx-detail-premium.income .tx-detail-hero {
  background: linear-gradient(135deg, #059669 0%, #14b8a6 100%);
}
.tx-detail-premium.expense .tx-detail-hero {
  background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
}
.tx-detail-premium.transfer .tx-detail-hero {
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 55%, #14b8a6 100%);
}
.tx-detail-hero-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 24px;
}
.tx-detail-hero-main {
  min-width: 0;
  flex: 1;
}
.tx-detail-hero-main span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 1px;
}
.tx-detail-hero-main h3 {
  margin: 0 0 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-detail-hero-main strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.tx-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid #e2e8f0;
}
.tx-detail-row span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.tx-detail-row strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.tx-detail-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.tx-detail-balance-grid div {
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #f8fbff, #eef7ff);
  border-radius: 12px;
  padding: 9px 10px;
}
.tx-detail-balance-grid span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.tx-detail-balance-grid strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #0f172a;
}
.tx-detail-note {
  margin-top: 10px;
}
.tx-detail-note span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.tx-detail-note p {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}
.tx-detail-proof button {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
}
.tx-detail-user-card {
  margin-top: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef7ff, #f8fbff);
}
.tx-detail-popup .tx-action-row .btn,
.tx-detail-popup .btn {
  border-radius: 12px !important;
}
.tx-detail-popup .edit-note {
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
body.dark-mode .swal2-popup.tx-detail-popup.card-custom,
html.dark-mode body .swal2-popup.tx-detail-popup.card-custom {
  background: linear-gradient(145deg, #06111f 0%, #0f172a 100%) !important;
  border-color: rgba(56,189,248,.24) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.58) !important;
}
body.dark-mode .swal2-popup.tx-detail-popup .swal2-close,
html.dark-mode body .swal2-popup.tx-detail-popup .swal2-close {
  background: rgba(15,23,42,.92);
  color: #e0f2fe;
}
body.dark-mode .tx-detail-row,
html.dark-mode body .tx-detail-row {
  border-bottom-color: rgba(148, 163, 184, .2);
}
body.dark-mode .tx-detail-row span,
body.dark-mode .tx-detail-note span,
html.dark-mode body .tx-detail-row span,
html.dark-mode body .tx-detail-note span {
  color: #93c5fd;
}
body.dark-mode .tx-detail-row strong,
html.dark-mode body .tx-detail-row strong {
  color: #f8fafc;
}
body.dark-mode .tx-detail-note p,
html.dark-mode body .tx-detail-note p {
  background: rgba(15,23,42,.84);
  border-color: rgba(56,189,248,.2);
  color: #f8fafc;
}
body.dark-mode .tx-detail-proof button,
html.dark-mode body .tx-detail-proof button {
  background: rgba(14,165,233,.13);
  border-color: rgba(56,189,248,.26);
  color: #bae6fd;
}
body.dark-mode .tx-detail-user-card,
html.dark-mode body .tx-detail-user-card {
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(8,47,73,.72));
}
body.dark-mode .tx-detail-balance-grid,
html.dark-mode body .tx-detail-balance-grid {
  border-bottom-color: rgba(148, 163, 184, .22);
}
body.dark-mode .tx-detail-balance-grid div,
html.dark-mode body .tx-detail-balance-grid div {
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,47,73,.84));
  border-color: rgba(56,189,248,.24);
}
body.dark-mode .tx-detail-balance-grid span,
html.dark-mode body .tx-detail-balance-grid span {
  color: #93c5fd;
}
body.dark-mode .tx-detail-balance-grid strong,
html.dark-mode body .tx-detail-balance-grid strong {
  color: #f8fafc;
}

/* v1.13.2 - Popup notifikasi Beranda premium. */
.swal2-popup.notification-modal.card-custom {
  width: min(92vw, 500px) !important;
  padding: 3px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(37,99,235,.58), rgba(20,184,166,.56)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.24) !important;
}
.swal2-popup.notification-modal .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.swal2-popup.notification-modal .swal2-close {
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.74) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.12) !important;
}
.notification-panel-premium,
.notification-detail-premium {
  padding: 8px;
  margin: 0;
}
.notification-hero {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #123a7c 0%, #2563eb 48%, #0faaa5 100%);
}
.notification-hero::after {
  content: "";
  position: absolute;
  inset: auto -42px -56px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.notification-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.notification-hero-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.notification-hero-copy strong {
  font-size: 25px;
  letter-spacing: 0;
}
.notification-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.notification-summary span {
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #eef7ff);
  box-shadow: 0 12px 26px rgba(37,99,235,.08);
}
.notification-summary b,
.notification-summary small {
  display: block;
}
.notification-summary b {
  color: #0f172a;
  font: 900 20px/1 'Poppins', sans-serif;
}
.notification-summary small {
  margin-top: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.notification-list {
  gap: 10px;
  max-height: min(55vh, 390px);
  padding: 1px 2px 3px;
}
.notification-item {
  position: relative;
  min-height: 76px;
  padding: 13px 12px;
  border-radius: 20px;
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 14px 30px rgba(15,23,42,.07);
}
.notification-item:hover {
  border-color: #bfdbfe;
  transform: translateY(-1px);
}
.notification-item.unread {
  border-color: rgba(37,99,235,.28);
  background: linear-gradient(135deg, #eff6ff, #ffffff 62%, #f0fdfa);
}
.notification-item.holiday{border-color:rgba(245,158,11,.34);background:linear-gradient(135deg,#fffbeb,#ffffff 58%,#ecfdf5)}
.notification-item.holiday .notification-item-icon{background:linear-gradient(135deg,#fef3c7,#ccfbf1);color:#b45309}
.notification-item.holiday.unread .notification-item-icon .notification-pulse{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.16)}
.notification-item-icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  color: #2563eb;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}
.notification-item-icon .notification-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  background: #94a3b8;
}
.notification-item.unread .notification-item-icon .notification-pulse {
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16,185,129,.13);
}
.notification-item.seen .notification-item-icon {
  background: #f1f5f9;
  color: #64748b;
}
.notification-copy strong {
  color: #0f172a;
  font-size: 15px;
}
.notification-copy small {
  color: #64748b;
}
.notification-empty-premium {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 150px;
  padding: 22px;
  border: 1px dashed #cbd5e1;
  border-radius: 22px;
  background: #f8fafc;
  text-align: center;
}
.notification-empty-premium i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #e0f2fe;
  color: #2563eb;
  font-size: 22px;
}
.notification-empty-premium strong {
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}
.notification-empty-premium span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.notification-back {
  margin: 0 0 10px;
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  box-shadow: 0 10px 22px rgba(37,99,235,.10);
}
.notification-detail-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
}
.notification-detail-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
}
.notification-detail-top {
  color: #2563eb;
}
.notification-detail-top i {
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  color: #2563eb;
}
.notification-detail-card h4 {
  color: #0f172a;
  font-size: clamp(20px, 4vw, 25px);
  line-height: 1.2;
}
.notification-detail-body {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
}
.notification-detail-body p {
  color: #334155;
  line-height: 1.75;
  font-size: 15px;
  margin: 0;
  white-space: pre-wrap;
}
@media (max-width: 576px) {
  .swal2-popup.notification-modal.card-custom {
    width: calc(100vw - 24px) !important;
    border-radius: 26px !important;
  }
  .notification-panel-premium,
  .notification-detail-premium {
    padding: 7px;
  }
  .notification-hero {
    padding: 16px;
    border-radius: 22px;
  }
  .notification-icon {
    width: 48px;
    height: 48px;
  }
  .notification-summary span {
    min-height: 54px;
    padding: 11px 12px;
  }
  .notification-item {
    min-height: 72px;
    border-radius: 18px;
  }
  .notification-detail-card {
    padding: 20px 16px 16px;
  }
}
body.dark-mode .swal2-popup.notification-modal.card-custom,
html.dark-mode body .swal2-popup.notification-modal.card-custom {
  background:
    linear-gradient(145deg, #06111f, #0f172a) padding-box,
    linear-gradient(135deg, rgba(56,189,248,.48), rgba(20,184,166,.42)) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 30px 88px rgba(0,0,0,.62) !important;
}
body.dark-mode .swal2-popup.notification-modal .swal2-close,
html.dark-mode body .swal2-popup.notification-modal .swal2-close {
  background: rgba(15,23,42,.88) !important;
  color: #e0f2fe !important;
}
body.dark-mode .notification-summary span,
html.dark-mode body .notification-summary span {
  background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(8,47,73,.76));
  border-color: rgba(56,189,248,.20);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
body.dark-mode .notification-summary b,
body.dark-mode .notification-copy strong,
body.dark-mode .notification-empty-premium strong,
body.dark-mode .notification-detail-card h4,
html.dark-mode body .notification-summary b,
html.dark-mode body .notification-copy strong,
html.dark-mode body .notification-empty-premium strong,
html.dark-mode body .notification-detail-card h4 {
  color: #f8fafc;
}
body.dark-mode .notification-summary small,
body.dark-mode .notification-copy small,
body.dark-mode .notification-empty-premium span,
html.dark-mode body .notification-summary small,
html.dark-mode body .notification-copy small,
html.dark-mode body .notification-empty-premium span {
  color: #93a9c5;
}
body.dark-mode .notification-item,
html.dark-mode body .notification-item {
  border-color: rgba(56,189,248,.16);
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(8,47,73,.70));
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}
body.dark-mode .notification-item.unread,
html.dark-mode body .notification-item.unread {
  border-color: rgba(56,189,248,.34);
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(15,23,42,.96) 58%, rgba(20,184,166,.12));
}
body.dark-mode .notification-item.holiday,
html.dark-mode body .notification-item.holiday {
  border-color: rgba(251,191,36,.30);
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(15,23,42,.96) 58%, rgba(20,184,166,.10));
}
body.dark-mode .notification-item.holiday .notification-item-icon,
html.dark-mode body .notification-item.holiday .notification-item-icon {
  background: linear-gradient(135deg, rgba(245,158,11,.26), rgba(20,184,166,.18));
  color: #fde68a;
}
body.dark-mode .notification-item-icon,
html.dark-mode body .notification-item-icon {
  background: linear-gradient(135deg, rgba(37,99,235,.36), rgba(20,184,166,.26));
  color: #bae6fd;
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.16);
}
body.dark-mode .notification-item.seen .notification-item-icon,
html.dark-mode body .notification-item.seen .notification-item-icon {
  background: rgba(15,23,42,.82);
  color: #93a9c5;
}
body.dark-mode .notification-empty-premium,
html.dark-mode body .notification-empty-premium {
  background: rgba(15,23,42,.82);
  border-color: rgba(125,211,252,.24);
}
body.dark-mode .notification-empty-premium i,
html.dark-mode body .notification-empty-premium i {
  background: rgba(14,165,233,.16);
  color: #7dd3fc;
}
body.dark-mode .notification-back,
html.dark-mode body .notification-back {
  background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(20,184,166,.12));
  border-color: rgba(56,189,248,.22);
  color: #bae6fd;
}
body.dark-mode .notification-detail-card,
html.dark-mode body .notification-detail-card {
  background: linear-gradient(145deg, rgba(15,23,42,.98), rgba(8,47,73,.78));
  border-color: rgba(56,189,248,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
body.dark-mode .notification-detail-top,
html.dark-mode body .notification-detail-top {
  color: #7dd3fc;
}
body.dark-mode .notification-detail-top i,
html.dark-mode body .notification-detail-top i {
  background: rgba(14,165,233,.16);
  color: #7dd3fc;
}
body.dark-mode .notification-detail-body,
html.dark-mode body .notification-detail-body {
  background: rgba(2,6,23,.54);
  border-color: rgba(148,163,184,.20);
}
body.dark-mode .notification-detail-body p,
html.dark-mode body .notification-detail-body p {
  color: #dbeafe;
}

/* v1.14.0 - Beranda Owner: target, analitik metode, transaksi global, dan ranking tenant. */
.owner-insight-shell {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #f0fdfa 100%);
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}
.owner-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.owner-insight-head small {
  display: block;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.owner-insight-head h5 {
  margin: 2px 0 0;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 900;
}
.owner-insight-head button {
  border: 0;
  border-radius: 15px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}
.owner-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.owner-insight-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  transition: .18s ease;
}
.owner-insight-card[role="button"] { cursor: pointer; }
.owner-insight-card:hover {
  transform: translateY(-1px);
  border-color: #bfdbfe;
}
.owner-insight-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  color: #2563eb;
  font-size: 20px;
}
.owner-insight-card small,
.owner-insight-card em {
  display: block;
}
.owner-insight-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.owner-insight-card strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.owner-insight-card em {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}
.owner-insight-card.success .owner-insight-icon { background: #dcfce7; color: #059669; }
.owner-insight-card.info .owner-insight-icon { background: #e0f2fe; color: #0284c7; }
.owner-insight-card.warning .owner-insight-icon { background: #fef3c7; color: #d97706; }
.owner-insight-card.danger .owner-insight-icon { background: #fee2e2; color: #dc2626; }
.owner-insight-card.action .owner-insight-icon { background: linear-gradient(135deg, #dbeafe, #ede9fe); color: #7c3aed; }
.owner-analytics-card,
.owner-rank-card {
  height: 100%;
}
.owner-method-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.owner-method-legend > div {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}
.owner-method-legend > div > span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.owner-method-legend strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-method-legend small {
  grid-column: 2;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}
.owner-rank-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.owner-rank-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
.owner-rank-row.top:first-child {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #ffffff);
}
.owner-rank-no {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eff6ff;
  color: #2563eb;
  font: 900 13px/1 'Poppins', sans-serif;
}
.owner-rank-main {
  min-width: 0;
}
.owner-rank-main strong {
  display: block;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-rank-main small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
.owner-rank-value {
  text-align: right;
}
.owner-rank-value strong {
  display: block;
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  white-space: nowrap;
}
.owner-rank-value span {
  display: inline-flex;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.owner-rank-value span.success { color: #047857; background: #d1fae5; }
.owner-rank-value span.primary { color: #1d4ed8; background: #dbeafe; }
.owner-rank-value span.warning { color: #b45309; background: #fef3c7; }
.owner-rank-value span.danger { color: #dc2626; background: #fee2e2; }
.owner-rank-value span.muted { color: #64748b; background: #f1f5f9; }
.owner-rank-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.owner-rank-empty i {
  color: #94a3b8;
  font-size: 28px;
}
@media (max-width: 992px) {
  .owner-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .owner-insight-shell {
    padding: 14px;
    border-radius: 22px;
  }
  .owner-insight-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .owner-insight-head button {
    width: 100%;
  }
  .owner-insight-grid,
  .owner-method-legend {
    grid-template-columns: 1fr;
  }
  .owner-rank-row {
    grid-template-columns: 32px minmax(0,1fr);
  }
  .owner-rank-value {
    grid-column: 2;
    text-align: left;
  }
}
body.dark-mode .owner-insight-shell,
html.dark-mode body .owner-insight-shell {
  border-color: rgba(56,189,248,.20);
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,47,73,.74));
  box-shadow: 0 20px 46px rgba(0,0,0,.28);
}
body.dark-mode .owner-insight-head h5,
body.dark-mode .owner-insight-card strong,
body.dark-mode .owner-method-legend strong,
body.dark-mode .owner-rank-main strong,
body.dark-mode .owner-rank-value strong,
html.dark-mode body .owner-insight-head h5,
html.dark-mode body .owner-insight-card strong,
html.dark-mode body .owner-method-legend strong,
html.dark-mode body .owner-rank-main strong,
html.dark-mode body .owner-rank-value strong {
  color: #f8fafc;
}
body.dark-mode .owner-insight-card,
body.dark-mode .owner-method-legend > div,
body.dark-mode .owner-rank-row,
html.dark-mode body .owner-insight-card,
html.dark-mode body .owner-method-legend > div,
html.dark-mode body .owner-rank-row {
  border-color: rgba(56,189,248,.16);
  background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(8,47,73,.58));
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
body.dark-mode .owner-insight-card small,
body.dark-mode .owner-insight-card em,
body.dark-mode .owner-method-legend small,
body.dark-mode .owner-rank-main small,
html.dark-mode body .owner-insight-card small,
html.dark-mode body .owner-insight-card em,
html.dark-mode body .owner-method-legend small,
html.dark-mode body .owner-rank-main small {
  color: #93a9c5;
}
body.dark-mode .owner-insight-icon,
body.dark-mode .owner-rank-no,
html.dark-mode body .owner-insight-icon,
html.dark-mode body .owner-rank-no {
  background: rgba(14,165,233,.16);
  color: #7dd3fc;
}
body.dark-mode .owner-rank-row.top:first-child,
html.dark-mode body .owner-rank-row.top:first-child {
  border-color: rgba(251,191,36,.30);
  background: linear-gradient(135deg, rgba(120,53,15,.35), rgba(15,23,42,.88));
}

/* v1.15.0 - Owner: pisahkan akun tenant yang masih menempel di tenant Owner. */
.customer-owner-head {
  gap: 12px;
}
.customer-owner-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tenant-split-btn,
.tenant-move-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(37,99,235,.10);
}
.tenant-split-btn:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
}
.tenant-move-btn {
  border-color:#c4b5fd;
  background:linear-gradient(135deg,#f5f3ff,#eff6ff);
  color:#6d28d9;
}
.tenant-move-btn:hover {
  transform:translateY(-1px);
  border-color:#a78bfa;
}
.tenant-split-swal {
  width: min(94vw, 520px) !important;
  padding: 3px !important;
  border-radius: 28px !important;
}
.tenant-split-modal {
  padding: 10px;
}
.tenant-split-hero {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 14px;
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #fff;
  box-shadow: 0 16px 34px rgba(37,99,235,.20);
}
.tenant-split-hero i {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.18);
  font-size: 23px;
}
.tenant-move-hero {
  background:linear-gradient(135deg,#7c3aed,#2563eb);
}
.tenant-cleanup-hero {
  background:linear-gradient(135deg,#0891b2,#0f766e);
}
.tenant-split-hero strong,
.tenant-split-hero span {
  display: block;
}
.tenant-split-hero strong {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.2;
}
.tenant-split-hero span {
  margin-top: 4px;
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.tenant-split-modal label {
  display: block;
  margin: 11px 0 6px 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tenant-split-modal .form-control,
.tenant-split-modal .input-group-text {
  min-height: 48px;
  border: 1px solid #dbe3ee;
  background: #f8fbff;
  color: #0f172a;
  border-radius: 14px;
  font-weight: 800;
}
.tenant-split-modal .input-group .form-control {
  border-radius: 14px 0 0 14px;
}
.tenant-split-modal .input-group-text {
  border-left: 0;
  border-radius: 0 14px 14px 0;
  color: #64748b;
}
.tenant-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tenant-split-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  overflow: auto;
  padding: 3px 2px;
}
.tenant-split-user {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 10px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
}
.tenant-split-user input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}
.tenant-split-user strong,
.tenant-split-user small {
  display: block;
}
.tenant-split-user strong {
  color: #0f172a;
  font-size: 13px;
}
.tenant-split-user small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}
.tenant-split-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 15px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.tenant-split-note {
  display: flex;
  gap: 9px;
  margin-top: 13px;
  padding: 12px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.tenant-split-note i {
  font-size: 18px;
}
.tenant-split-success {
  display: grid;
  gap: 9px;
  padding: 8px;
}
.tenant-split-success div {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}
.tenant-split-success span,
.tenant-split-success strong {
  display: block;
}
.tenant-split-success span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.tenant-split-success strong {
  color: #0f172a;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  margin-top: 4px;
}
.tenant-residue-alert p {
  margin:0 0 10px;
  color:#475569;
  line-height:1.55;
  font-weight:750;
}
.tenant-residue-list {
  display:grid;
  gap:6px;
  margin:8px 0;
}
.tenant-residue-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(14,165,233,.18);
  background:linear-gradient(135deg,#f8fafc,#eef6ff);
  color:#0f172a;
  font-size:13px;
  font-weight:800;
}
.tenant-residue-row span {
  min-width:0;
}
.tenant-residue-row small {
  display:block;
  color:#64748b;
  font-size:11px;
}
.tenant-residue-row strong {
  min-width:36px;
  text-align:center;
  padding:4px 8px;
  border-radius:999px;
  background:#e0f2fe;
  color:#0369a1;
}
.tenant-residue-alert > small {
  display:block;
  margin-top:9px;
  color:#64748b;
  line-height:1.5;
}
@media (max-width: 576px) {
  .customer-owner-head {
    align-items: stretch !important;
  }
  .customer-owner-actions,
  .customer-owner-actions .btn-primary-custom,
  .tenant-split-btn,
  .tenant-move-btn {
    width: 100%;
    justify-content: center;
  }
  .tenant-split-grid {
    grid-template-columns: 1fr;
  }
  .tenant-split-hero {
    align-items: flex-start;
  }
}
body.dark-mode .tenant-split-btn,
body.dark-mode .tenant-move-btn,
html.dark-mode body .tenant-split-btn,
html.dark-mode body .tenant-move-btn {
  border-color: rgba(56,189,248,.24);
  background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(20,184,166,.12));
  color: #bae6fd;
}
body.dark-mode .tenant-move-btn,
html.dark-mode body .tenant-move-btn {
  border-color:rgba(167,139,250,.28);
  background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.14));
  color:#ddd6fe;
}
body.dark-mode .tenant-split-swal,
html.dark-mode body .tenant-split-swal {
  background: linear-gradient(145deg, #06111f, #0f172a) !important;
  border-color: rgba(56,189,248,.20) !important;
}
body.dark-mode .tenant-split-modal label,
html.dark-mode body .tenant-split-modal label {
  color: #93a9c5;
}
body.dark-mode .tenant-split-modal .form-control,
body.dark-mode .tenant-split-modal .input-group-text,
html.dark-mode body .tenant-split-modal .form-control,
html.dark-mode body .tenant-split-modal .input-group-text {
  border-color: rgba(56,189,248,.18);
  background: rgba(15,23,42,.86);
  color: #f8fafc;
}
body.dark-mode .tenant-split-user,
body.dark-mode .tenant-split-success div,
body.dark-mode .tenant-residue-row,
html.dark-mode body .tenant-split-user,
html.dark-mode body .tenant-split-success div,
html.dark-mode body .tenant-residue-row {
  border-color: rgba(56,189,248,.16);
  background: rgba(15,23,42,.82);
}
body.dark-mode .tenant-split-user strong,
body.dark-mode .tenant-split-success strong,
body.dark-mode .tenant-residue-row,
html.dark-mode body .tenant-split-user strong,
html.dark-mode body .tenant-split-success strong,
html.dark-mode body .tenant-residue-row {
  color: #f8fafc;
}
body.dark-mode .tenant-split-user small,
body.dark-mode .tenant-split-empty,
body.dark-mode .tenant-split-success span,
body.dark-mode .tenant-residue-alert p,
body.dark-mode .tenant-residue-alert > small,
body.dark-mode .tenant-residue-row small,
html.dark-mode body .tenant-split-user small,
html.dark-mode body .tenant-split-empty,
html.dark-mode body .tenant-split-success span,
html.dark-mode body .tenant-residue-alert p,
html.dark-mode body .tenant-residue-alert > small,
html.dark-mode body .tenant-residue-row small {
  color: #93a9c5;
}
body.dark-mode .tenant-residue-row strong,
html.dark-mode body .tenant-residue-row strong {
  background:rgba(14,165,233,.18);
  color:#67e8f9;
}
body.dark-mode .tenant-id-chip,
html.dark-mode body .tenant-id-chip {
  background:rgba(14,165,233,.14);
  border-color:rgba(56,189,248,.24);
  color:#bae6fd;
}
body.dark-mode .tenant-split-note,
html.dark-mode body .tenant-split-note {
  background: rgba(14,165,233,.14);
  color: #bae6fd;
}

/* v1.18.0 - Halaman Aset & Investasi */
.asset-page-wrap {
  display:grid;
  gap:16px;
}
.asset-hero {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbff,#ecfeff);
  box-shadow:0 18px 46px rgba(15,23,42,.08);
}
.asset-hero-icon {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  box-shadow:0 14px 28px rgba(20,184,166,.22);
  font-size:25px;
}
.asset-hero strong,
.asset-hero span {
  display:block;
}
.asset-hero strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:22px;
  line-height:1.2;
}
.asset-hero span {
  margin-top:5px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.asset-add-btn {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:14px;
  white-space:nowrap;
}
.asset-summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.asset-summary-card {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.asset-summary-card > span {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-size:20px;
}
.asset-summary-card small,
.asset-summary-card strong {
  display:block;
}
.asset-summary-card small {
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-summary-card strong {
  margin-top:4px;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:16px;
}
.asset-summary-card.blue > span { background:#dbeafe; color:#2563eb; }
.asset-summary-card.green > span { background:#dcfce7; color:#15803d; }
.asset-summary-card.cyan > span { background:#cffafe; color:#0e7490; }
.asset-summary-card.amber > span { background:#fef3c7; color:#b45309; }
.asset-summary-card.red > span { background:#fee2e2; color:#dc2626; }
.asset-list-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.asset-card {
  min-height:218px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  cursor:pointer;
  transition:.16s ease;
}
.asset-card:hover {
  transform:translateY(-2px);
  border-color:#bae6fd;
  box-shadow:0 20px 42px rgba(37,99,235,.12);
}
.asset-card-top {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.asset-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#eff6ff;
  color:#2563eb;
  font-size:22px;
}
.asset-card-top strong,
.asset-card-top span {
  display:block;
  min-width:0;
}
.asset-card-top strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.asset-card-top span {
  margin-top:3px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}
.asset-card-top b {
  padding:6px 9px;
  border-radius:999px;
  background:#dcfce7;
  color:#15803d;
  font-size:10px;
  text-transform:uppercase;
}
.asset-card.damaged .asset-card-top b { background:#fef3c7; color:#b45309; }
.asset-card.sold .asset-card-top b { background:#dbeafe; color:#1d4ed8; }
.asset-card.lost .asset-card-top b { background:#fee2e2; color:#b91c1c; }
.asset-card-value {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:25px;
  font-weight:900;
}
.asset-card-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}
.asset-card-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.asset-card-actions button {
  width:34px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#f8fbff;
  color:#2563eb;
}
.asset-card-actions button:hover {
  background:#2563eb;
  color:#fff;
}
.asset-locked-note {
  color:#94a3b8;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-empty {
  grid-column:1 / -1;
  display:grid;
  justify-items:center;
  gap:8px;
  padding:38px 16px;
  border:1px dashed #cbd5e1;
  border-radius:22px;
  background:#f8fafc;
  color:#64748b;
  text-align:center;
}
.asset-empty i {
  font-size:34px;
  color:#2563eb;
}
.asset-empty strong,
.asset-empty span {
  display:block;
}
.asset-empty strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
}
.asset-swal {
  width:min(94vw,560px) !important;
  padding:3px !important;
  border-radius:26px !important;
}
.asset-form-modal {
  padding:10px;
}
.asset-modal-hero {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:15px;
  border-radius:19px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
}
.asset-modal-hero.dijual { background:linear-gradient(135deg,#0f766e,#2563eb); }
.asset-modal-hero.hilang { background:linear-gradient(135deg,#ef4444,#7c2d12); }
.asset-modal-hero.rusak,
.asset-modal-hero.update_value { background:linear-gradient(135deg,#f59e0b,#2563eb); }
.asset-modal-hero i {
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.18);
  font-size:22px;
}
.asset-modal-hero strong,
.asset-modal-hero span {
  display:block;
}
.asset-modal-hero strong {
  font-family:'Poppins',sans-serif;
  font-size:17px;
}
.asset-modal-hero span {
  margin-top:3px;
  color:rgba(255,255,255,.84);
  font-size:12px;
  font-weight:700;
}
.asset-form-modal label {
  display:block;
  margin:10px 0 6px 2px;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-form-modal .form-control {
  min-height:47px;
  border:1px solid #dbe3ee;
  border-radius:14px;
  background:#f8fbff;
  color:#0f172a;
  font-weight:800;
}
.asset-form-grid,
.asset-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.asset-warning-note {
  display:flex;
  gap:9px;
  margin-top:12px;
  padding:11px;
  border-radius:15px;
  background:#fef2f2;
  color:#b91c1c;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}
.asset-detail-modal {
  padding:8px;
}
.asset-detail-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,#eff6ff,#ecfeff);
}
.asset-detail-head > i {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  color:#2563eb;
  font-size:23px;
}
.asset-detail-head small,
.asset-detail-head strong {
  display:block;
}
.asset-detail-head small {
  color:#64748b;
  font-weight:900;
}
.asset-detail-head strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:22px;
}
.asset-detail-head span {
  padding:7px 10px;
  border-radius:999px;
  background:#dcfce7;
  color:#15803d;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-detail-grid {
  margin-top:12px;
}
.asset-detail-grid div {
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
}
.asset-detail-grid span,
.asset-detail-grid strong {
  display:block;
}
.asset-detail-grid span,
.asset-detail-note span {
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-detail-grid strong {
  margin-top:4px;
  color:#0f172a;
  font-size:13px;
}
.asset-detail-note {
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:#f8fafc;
}
.asset-detail-note p {
  margin:5px 0 0;
  color:#334155;
  line-height:1.5;
}
@media (max-width: 992px) {
  .asset-summary-grid,
  .asset-list-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 576px) {
  .asset-hero { grid-template-columns:auto minmax(0,1fr); align-items:flex-start; }
  .asset-add-btn { grid-column:1 / -1; width:100%; justify-content:center; }
  .asset-summary-grid,
  .asset-list-grid,
  .asset-form-grid,
  .asset-detail-grid { grid-template-columns:1fr; }
  .asset-card { min-height:0; }
  .asset-card-value { font-size:22px; }
}
body.dark-mode[data-page="aset"] .asset-hero,
html.dark-mode body[data-page="aset"] .asset-hero,
body.dark-mode .asset-swal,
html.dark-mode body .asset-swal {
  background:linear-gradient(145deg,#06111f,#0f172a) !important;
  border-color:rgba(56,189,248,.18) !important;
  box-shadow:0 28px 70px rgba(0,0,0,.42) !important;
}
body.dark-mode[data-page="aset"] .asset-hero strong,
body.dark-mode[data-page="aset"] .asset-summary-card strong,
body.dark-mode[data-page="aset"] .asset-card-top strong,
body.dark-mode[data-page="aset"] .asset-card-value,
body.dark-mode .asset-detail-head strong,
body.dark-mode .asset-detail-grid strong,
body.dark-mode .asset-empty strong,
html.dark-mode body[data-page="aset"] .asset-hero strong,
html.dark-mode body[data-page="aset"] .asset-summary-card strong,
html.dark-mode body[data-page="aset"] .asset-card-top strong,
html.dark-mode body[data-page="aset"] .asset-card-value,
html.dark-mode body .asset-detail-head strong,
html.dark-mode body .asset-detail-grid strong,
html.dark-mode body .asset-empty strong {
  color:#f8fafc !important;
}
body.dark-mode[data-page="aset"] .asset-hero span,
body.dark-mode[data-page="aset"] .asset-summary-card small,
body.dark-mode[data-page="aset"] .asset-card-top span,
body.dark-mode[data-page="aset"] .asset-card-meta,
body.dark-mode .asset-form-modal label,
body.dark-mode .asset-detail-grid span,
body.dark-mode .asset-detail-note span,
body.dark-mode .asset-detail-note p,
body.dark-mode .asset-detail-head small,
html.dark-mode body[data-page="aset"] .asset-hero span,
html.dark-mode body[data-page="aset"] .asset-summary-card small,
html.dark-mode body[data-page="aset"] .asset-card-top span,
html.dark-mode body[data-page="aset"] .asset-card-meta,
html.dark-mode body .asset-form-modal label,
html.dark-mode body .asset-detail-grid span,
html.dark-mode body .asset-detail-note span,
html.dark-mode body .asset-detail-note p,
html.dark-mode body .asset-detail-head small {
  color:#93a9c5 !important;
}
body.dark-mode[data-page="aset"] .asset-summary-card,
body.dark-mode[data-page="aset"] .asset-card,
body.dark-mode[data-page="aset"] .asset-empty,
body.dark-mode .asset-form-modal .form-control,
body.dark-mode .asset-detail-grid div,
body.dark-mode .asset-detail-note,
body.dark-mode .asset-detail-head,
html.dark-mode body[data-page="aset"] .asset-summary-card,
html.dark-mode body[data-page="aset"] .asset-card,
html.dark-mode body[data-page="aset"] .asset-empty,
html.dark-mode body .asset-form-modal .form-control,
html.dark-mode body .asset-detail-grid div,
html.dark-mode body .asset-detail-note,
html.dark-mode body .asset-detail-head {
  background:rgba(15,23,42,.82) !important;
  border-color:rgba(56,189,248,.16) !important;
  color:#f8fafc !important;
}
body.dark-mode[data-page="aset"] .asset-card-actions button,
html.dark-mode body[data-page="aset"] .asset-card-actions button {
  background:rgba(14,165,233,.12);
  border-color:rgba(56,189,248,.22);
  color:#bae6fd;
}

/* v1.18.1 - Premium polish Aset & Investasi */
body[data-page="aset"] .app-content,
html body[data-page="aset"] .app-content {
  background:
    radial-gradient(circle at 18% 6%, rgba(37,99,235,.08), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(20,184,166,.10), transparent 26%),
    linear-gradient(180deg,#f8fbff 0%,#f4f8fb 100%);
}
.asset-page-wrap {
  position:relative;
  isolation:isolate;
}
.asset-page-wrap::before {
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-1;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(20,184,166,.06),rgba(255,255,255,.4));
  filter:blur(1px);
}
.asset-hero {
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(37,99,235,.16);
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(236,254,255,.92)),
    radial-gradient(circle at 100% 0,rgba(20,184,166,.18),transparent 34%);
}
.asset-hero::after {
  content:"";
  position:absolute;
  right:-58px;
  top:-70px;
  width:190px;
  height:190px;
  border-radius:999px;
  border:34px solid rgba(37,99,235,.07);
  pointer-events:none;
}
.asset-hero-icon {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.asset-hero-icon::after {
  content:"";
  position:absolute;
  inset:8px -18px auto auto;
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.asset-add-btn {
  position:relative;
  z-index:1;
  min-width:156px;
  justify-content:center;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.55) !important;
  background:linear-gradient(135deg,#0f5bff 0%,#00a7b5 100%) !important;
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(2,6,23,.22);
  box-shadow:0 18px 38px rgba(37,99,235,.26), 0 7px 18px rgba(20,184,166,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.asset-add-btn i,
.asset-add-btn span {
  position:relative;
  z-index:1;
  color:#ffffff !important;
}
.asset-add-btn::before {
  content:"";
  position:absolute;
  inset:2px;
  z-index:0;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));
  pointer-events:none;
}
.asset-add-btn:hover {
  color:#ffffff !important;
  background:linear-gradient(135deg,#1d4ed8 0%,#0f766e 100%) !important;
  box-shadow:0 20px 42px rgba(37,99,235,.32), 0 9px 22px rgba(20,184,166,.22), inset 0 1px 0 rgba(255,255,255,.34);
}
.asset-empty .btn-primary-custom {
  min-height:48px;
  padding:12px 20px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.55) !important;
  background:linear-gradient(135deg,#0f5bff,#00a7b5) !important;
  color:#ffffff !important;
  font-family:'Poppins',sans-serif;
  font-weight:900;
  box-shadow:0 16px 34px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.34);
}
.asset-empty .btn-primary-custom i {
  color:#ffffff !important;
}
.asset-summary-card {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(145deg,#ffffff,#f8fbff);
}
.asset-summary-card::before {
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,#2563eb,#14b8a6);
}
.asset-summary-card.green::before { background:linear-gradient(180deg,#16a34a,#14b8a6); }
.asset-summary-card.cyan::before { background:linear-gradient(180deg,#0891b2,#2563eb); }
.asset-summary-card.amber::before { background:linear-gradient(180deg,#f59e0b,#2563eb); }
.asset-summary-card.red::before { background:linear-gradient(180deg,#ef4444,#f59e0b); }
.asset-list-grid {
  align-items:stretch;
}
.asset-card {
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border-color:rgba(148,163,184,.28);
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,251,255,.96)),
    radial-gradient(circle at 92% 0,rgba(20,184,166,.13),transparent 30%);
}
.asset-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#14b8a6);
}
.asset-card.damaged::before { background:linear-gradient(90deg,#f59e0b,#2563eb); }
.asset-card.sold::before { background:linear-gradient(90deg,#0f766e,#2563eb); }
.asset-card.lost::before { background:linear-gradient(90deg,#ef4444,#7c2d12); }
.asset-card:hover {
  transform:translateY(-4px);
}
.asset-icon {
  border:1px solid rgba(37,99,235,.10);
  background:linear-gradient(135deg,#eff6ff,#ecfeff);
  box-shadow:0 10px 22px rgba(37,99,235,.10);
}
.asset-card-top b {
  max-width:116px;
  text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);
}
.asset-card-value {
  line-height:1.15;
  letter-spacing:0;
}
.asset-card-meta span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.asset-card-actions {
  padding-top:4px;
  border-top:1px solid rgba(226,232,240,.78);
}
.asset-card-actions button {
  flex:0 0 36px;
  width:36px;
  height:34px;
  border-radius:12px;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.asset-card-actions button:hover {
  transform:translateY(-1px);
}
.asset-empty {
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,251,255,.95)),
    radial-gradient(circle at 50% 0,rgba(37,99,235,.11),transparent 34%);
  box-shadow:0 16px 42px rgba(15,23,42,.06);
}
.asset-swal {
  border:1px solid rgba(37,99,235,.10) !important;
  padding:3px !important;
  box-shadow:0 34px 90px rgba(15,23,42,.24) !important;
}
.asset-form-modal,
.asset-detail-modal {
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.asset-form-modal {
  padding:3px;
}
.asset-detail-modal {
  padding:3px;
}
.asset-swal .swal2-html-container {
  margin:0 !important;
}
.asset-swal .swal2-actions {
  margin-top:12px !important;
  padding:0 3px 3px;
}
.asset-modal-hero,
.asset-detail-head {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px rgba(37,99,235,.12);
}
.asset-form-modal .form-control:focus {
  border-color:#38bdf8;
  box-shadow:0 0 0 4px rgba(14,165,233,.13);
}
.asset-detail-grid div,
.asset-detail-note {
  background:linear-gradient(145deg,#ffffff,#f8fbff);
}
.asset-detail-head span {
  white-space:nowrap;
}
body.dark-mode[data-page="aset"] .app-content,
html.dark-mode body[data-page="aset"] .app-content {
  background:
    radial-gradient(circle at 18% 6%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(20,184,166,.16), transparent 28%),
    linear-gradient(180deg,#020617 0%,#07111f 100%);
}
body.dark-mode[data-page="aset"] .asset-page-wrap::before,
html.dark-mode body[data-page="aset"] .asset-page-wrap::before {
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(20,184,166,.10),rgba(2,6,23,.22));
}
body.dark-mode[data-page="aset"] .asset-hero,
html.dark-mode body[data-page="aset"] .asset-hero {
  background:
    linear-gradient(145deg,rgba(8,18,33,.96),rgba(15,23,42,.94)),
    radial-gradient(circle at 100% 0,rgba(20,184,166,.18),transparent 34%) !important;
}
body.dark-mode[data-page="aset"] .asset-summary-card,
body.dark-mode[data-page="aset"] .asset-card,
body.dark-mode[data-page="aset"] .asset-empty,
html.dark-mode body[data-page="aset"] .asset-summary-card,
html.dark-mode body[data-page="aset"] .asset-card,
html.dark-mode body[data-page="aset"] .asset-empty {
  background:
    linear-gradient(145deg,rgba(15,23,42,.90),rgba(8,18,33,.92)),
    radial-gradient(circle at 92% 0,rgba(20,184,166,.11),transparent 32%) !important;
  border-color:rgba(56,189,248,.18) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.32) !important;
}
body.dark-mode[data-page="aset"] .asset-icon,
html.dark-mode body[data-page="aset"] .asset-icon,
body.dark-mode .asset-detail-head > i,
html.dark-mode body .asset-detail-head > i {
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(20,184,166,.14)) !important;
  border-color:rgba(56,189,248,.22);
  color:#bae6fd;
}
body.dark-mode[data-page="aset"] .asset-card-actions,
html.dark-mode body[data-page="aset"] .asset-card-actions {
  border-top-color:rgba(56,189,248,.14);
}
body.dark-mode[data-page="aset"] .asset-card-actions button:hover,
html.dark-mode body[data-page="aset"] .asset-card-actions button:hover {
  background:#38bdf8;
  color:#020617;
}
body.dark-mode[data-page="aset"] .asset-add-btn,
html.dark-mode body[data-page="aset"] .asset-add-btn,
body.dark-mode[data-page="aset"] .asset-empty .btn-primary-custom,
html.dark-mode body[data-page="aset"] .asset-empty .btn-primary-custom {
  background:linear-gradient(135deg,#38bdf8 0%,#14b8a6 100%) !important;
  color:#02111f !important;
  text-shadow:none;
  border-color:rgba(186,230,253,.62) !important;
  box-shadow:0 18px 38px rgba(56,189,248,.22), 0 8px 22px rgba(20,184,166,.18), inset 0 1px 0 rgba(255,255,255,.42);
}
body.dark-mode[data-page="aset"] .asset-add-btn i,
body.dark-mode[data-page="aset"] .asset-add-btn span,
body.dark-mode[data-page="aset"] .asset-empty .btn-primary-custom i,
html.dark-mode body[data-page="aset"] .asset-add-btn i,
html.dark-mode body[data-page="aset"] .asset-add-btn span,
html.dark-mode body[data-page="aset"] .asset-empty .btn-primary-custom i {
  color:#02111f !important;
}
body.dark-mode[data-page="aset"] .asset-add-btn:hover,
html.dark-mode body[data-page="aset"] .asset-add-btn:hover,
body.dark-mode[data-page="aset"] .asset-empty .btn-primary-custom:hover,
html.dark-mode body[data-page="aset"] .asset-empty .btn-primary-custom:hover {
  background:linear-gradient(135deg,#7dd3fc 0%,#2dd4bf 100%) !important;
  color:#020617 !important;
}
body.dark-mode .asset-form-modal,
body.dark-mode .asset-detail-modal,
html.dark-mode body .asset-form-modal,
html.dark-mode body .asset-detail-modal {
  background:linear-gradient(180deg,#081221,#0f172a) !important;
}
body.dark-mode .asset-form-modal .form-control,
html.dark-mode body .asset-form-modal .form-control {
  background:rgba(2,6,23,.72) !important;
  border-color:rgba(56,189,248,.18) !important;
  color:#f8fafc !important;
}
body.dark-mode .asset-form-modal .form-control::placeholder,
html.dark-mode body .asset-form-modal .form-control::placeholder {
  color:#64748b;
}
body.dark-mode .asset-detail-grid div,
body.dark-mode .asset-detail-note,
html.dark-mode body .asset-detail-grid div,
html.dark-mode body .asset-detail-note {
  background:rgba(2,6,23,.58) !important;
}
body.dark-mode .asset-warning-note,
html.dark-mode body .asset-warning-note {
  background:rgba(239,68,68,.12);
  color:#fecaca;
  border:1px solid rgba(248,113,113,.18);
}

/* v1.18.8 - Dokumen bukti aset */
.asset-upload-section {
  background:linear-gradient(135deg,rgba(239,246,255,.92),rgba(236,254,255,.86));
}
.asset-upload-box {
  display:grid !important;
  justify-items:center;
  gap:6px;
  margin:6px 0 0 !important;
  padding:16px 12px;
  border:1px dashed rgba(37,99,235,.34);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  color:#2563eb !important;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
}
.asset-upload-box:hover {
  transform:translateY(-1px);
  border-color:#14b8a6;
  box-shadow:0 12px 26px rgba(37,99,235,.08);
}
.asset-upload-box > i {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  font-size:20px;
}
.asset-upload-box strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:14px;
}
.asset-upload-box span {
  max-width:360px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  line-height:1.4;
}
.asset-upload-list {
  display:grid;
  gap:7px;
  margin-top:9px;
}
.asset-upload-list div,
.asset-doc-item,
.asset-doc-empty {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
}
.asset-upload-list i,
.asset-doc-item i,
.asset-doc-empty i {
  color:#2563eb;
  font-size:18px;
}
.asset-upload-list span,
.asset-doc-item span,
.asset-doc-empty span {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:800;
}
.asset-upload-list small,
.asset-doc-item b {
  color:#64748b;
  font-size:11px;
  font-weight:900;
}
.asset-detail-docs {
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:#f8fafc;
}
.asset-detail-docs > span {
  display:block;
  margin-bottom:8px;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.asset-detail-docs {
  display:grid;
  gap:8px;
}
.asset-detail-docs > span {
  margin-bottom:0;
}
.asset-doc-item:hover {
  color:#2563eb;
  border-color:#bfdbfe;
}
.asset-doc-empty {
  grid-template-columns:auto minmax(0,1fr);
  color:#64748b;
}
body.dark-mode .asset-upload-section,
html.dark-mode body .asset-upload-section {
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.08));
}
body.dark-mode .asset-upload-box,
html.dark-mode body .asset-upload-box,
body.dark-mode .asset-upload-list div,
body.dark-mode .asset-detail-docs,
body.dark-mode .asset-doc-item,
body.dark-mode .asset-doc-empty,
html.dark-mode body .asset-upload-list div,
html.dark-mode body .asset-detail-docs,
html.dark-mode body .asset-doc-item,
html.dark-mode body .asset-doc-empty {
  background:rgba(2,6,23,.58);
  border-color:rgba(56,189,248,.18);
}
body.dark-mode .asset-upload-box strong,
body.dark-mode .asset-upload-list span,
body.dark-mode .asset-doc-item span,
body.dark-mode .asset-doc-empty span,
html.dark-mode body .asset-upload-box strong,
html.dark-mode body .asset-upload-list span,
html.dark-mode body .asset-doc-item span,
html.dark-mode body .asset-doc-empty span {
  color:#f8fafc;
}
body.dark-mode .asset-upload-box span,
body.dark-mode .asset-upload-list small,
body.dark-mode .asset-detail-docs > span,
body.dark-mode .asset-doc-item b,
html.dark-mode body .asset-upload-box span,
html.dark-mode body .asset-upload-list small,
html.dark-mode body .asset-detail-docs > span,
html.dark-mode body .asset-doc-item b {
  color:#93a9c5;
}

/* v1.18.6 - Laporan Keuangan premium */
body[data-page="laporan"] .app-content,
html body[data-page="laporan"] .app-content {
  background:
    radial-gradient(circle at 16% 4%, rgba(37,99,235,.08), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(20,184,166,.10), transparent 27%),
    linear-gradient(180deg,#f8fbff 0%,#f4f8fb 100%);
}
.report-page-shell {
  display:grid;
  gap:16px;
}
.report-hero-panel,
.report-chart-card,
.report-detail-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(37,99,235,.14);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,251,255,.94));
  box-shadow:0 18px 46px rgba(15,23,42,.07);
}
.report-hero-panel {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(280px,420px);
  align-items:center;
  gap:16px;
  padding:18px;
}
.report-hero-panel::after {
  content:"";
  position:absolute;
  right:-64px;
  top:-80px;
  width:210px;
  height:210px;
  border-radius:999px;
  border:36px solid rgba(20,184,166,.08);
  pointer-events:none;
}
.report-hero-icon {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;
  font-size:26px;
  box-shadow:0 16px 34px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.35);
}
.report-hero-copy {
  min-width:0;
}
.report-hero-copy span,
.report-hero-copy strong,
.report-hero-copy small {
  display:block;
}
.report-hero-copy span {
  color:#2563eb;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.report-hero-copy strong {
  margin-top:3px;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:24px;
  line-height:1.2;
}
.report-hero-copy small {
  margin-top:5px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.report-filter-premium {
  position:relative;
  z-index:1;
  grid-template-columns:1fr 120px;
  gap:10px;
  margin:0;
}
.report-filter-box {
  display:grid;
  gap:6px;
  margin:0;
  padding:10px;
  border:1px solid #dbeafe;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.report-filter-box span {
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.report-filter-box .form-control {
  height:42px;
  padding:0 12px;
  border:0;
  border-radius:13px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(15,23,42,.045);
}
.report-stat-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.report-stat-card {
  position:relative;
  overflow:hidden;
  min-height:112px;
  padding:16px;
  border:1px solid rgba(226,232,240,.92);
  border-radius:22px;
  background:linear-gradient(145deg,#fff,#f8fbff);
  box-shadow:0 14px 34px rgba(15,23,42,.055);
}
.report-stat-card::before {
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:#2563eb;
}
.report-stat-card.income::before { background:#10b981; }
.report-stat-card.expense::before { background:#ef4444; }
.report-stat-card.count::before { background:#8b5cf6; }
.report-stat-card > span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  margin-bottom:12px;
  font-size:19px;
}
.report-stat-card.income > span { background:#dcfce7; color:#059669; }
.report-stat-card.expense > span { background:#fee2e2; color:#dc2626; }
.report-stat-card.balance > span { background:#dbeafe; color:#2563eb; }
.report-stat-card.count > span { background:#ede9fe; color:#7c3aed; }
.report-stat-card small,
.report-stat-card strong {
  display:block;
}
.report-stat-card small {
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.report-stat-card strong {
  margin-top:5px;
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:clamp(18px,2vw,23px);
  line-height:1.1;
  overflow-wrap:anywhere;
}
.report-chart-card,
.report-detail-card {
  padding:16px;
}
.report-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.report-card-head small,
.report-card-head strong {
  display:block;
}
.report-card-head small {
  color:#2563eb;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.report-card-head strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
  font-size:18px;
}
.report-card-head > span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.report-chart-wrap {
  position:relative;
  height:300px;
  width:100%;
  padding:10px 4px 0;
  border:1px solid rgba(226,232,240,.74);
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.report-detail-head {
  align-items:flex-start;
}
.report-detail-list {
  display:grid;
  gap:12px;
}
.report-category-card {
  margin:0;
  border-radius:20px;
  border-color:rgba(226,232,240,.9);
  background:linear-gradient(145deg,#ffffff,#f8fbff);
}
.report-category-card.income .report-category-head span { background:#dcfce7; color:#059669; }
.report-category-card.expense .report-category-head span { background:#fee2e2; color:#dc2626; }
.report-category-card:hover {
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}
.report-empty-state {
  display:grid;
  justify-items:center;
  gap:8px;
  padding:32px 16px;
  border:1px dashed #cbd5e1;
  border-radius:22px;
  background:#f8fafc;
  text-align:center;
}
.report-empty-state i {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#eff6ff;
  color:#2563eb;
  font-size:30px;
}
.report-empty-state strong {
  color:#0f172a;
  font-family:'Poppins',sans-serif;
}
.report-empty-state span {
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
body.dark-mode[data-page="laporan"] .app-content,
html.dark-mode body[data-page="laporan"] .app-content {
  background:
    radial-gradient(circle at 16% 4%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(20,184,166,.16), transparent 28%),
    linear-gradient(180deg,#020617 0%,#07111f 100%);
}
body.dark-mode[data-page="laporan"] .report-hero-panel,
body.dark-mode[data-page="laporan"] .report-chart-card,
body.dark-mode[data-page="laporan"] .report-detail-card,
body.dark-mode[data-page="laporan"] .report-stat-card,
body.dark-mode[data-page="laporan"] .report-category-card,
body.dark-mode[data-page="laporan"] .report-empty-state,
html.dark-mode body[data-page="laporan"] .report-hero-panel,
html.dark-mode body[data-page="laporan"] .report-chart-card,
html.dark-mode body[data-page="laporan"] .report-detail-card,
html.dark-mode body[data-page="laporan"] .report-stat-card,
html.dark-mode body[data-page="laporan"] .report-category-card,
html.dark-mode body[data-page="laporan"] .report-empty-state {
  background:linear-gradient(145deg,rgba(15,23,42,.90),rgba(8,18,33,.92)) !important;
  border-color:rgba(56,189,248,.17) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.32) !important;
}
body.dark-mode[data-page="laporan"] .report-filter-box,
body.dark-mode[data-page="laporan"] .report-chart-wrap,
html.dark-mode body[data-page="laporan"] .report-filter-box,
html.dark-mode body[data-page="laporan"] .report-chart-wrap {
  background:rgba(2,6,23,.46);
  border-color:rgba(56,189,248,.16);
}
body.dark-mode[data-page="laporan"] .report-filter-box .form-control,
html.dark-mode body[data-page="laporan"] .report-filter-box .form-control {
  background:rgba(2,6,23,.72);
  color:#f8fafc;
}
body.dark-mode[data-page="laporan"] .report-hero-copy strong,
body.dark-mode[data-page="laporan"] .report-stat-card strong,
body.dark-mode[data-page="laporan"] .report-card-head strong,
body.dark-mode[data-page="laporan"] .report-category-head strong,
body.dark-mode[data-page="laporan"] .report-empty-state strong,
html.dark-mode body[data-page="laporan"] .report-hero-copy strong,
html.dark-mode body[data-page="laporan"] .report-stat-card strong,
html.dark-mode body[data-page="laporan"] .report-card-head strong,
html.dark-mode body[data-page="laporan"] .report-category-head strong,
html.dark-mode body[data-page="laporan"] .report-empty-state strong {
  color:#f8fafc !important;
}
body.dark-mode[data-page="laporan"] .report-hero-copy small,
body.dark-mode[data-page="laporan"] .report-stat-card small,
body.dark-mode[data-page="laporan"] .report-filter-box span,
body.dark-mode[data-page="laporan"] .report-category-card small,
body.dark-mode[data-page="laporan"] .report-empty-state span,
html.dark-mode body[data-page="laporan"] .report-hero-copy small,
html.dark-mode body[data-page="laporan"] .report-stat-card small,
html.dark-mode body[data-page="laporan"] .report-filter-box span,
html.dark-mode body[data-page="laporan"] .report-category-card small,
html.dark-mode body[data-page="laporan"] .report-empty-state span {
  color:#93a9c5 !important;
}
body.dark-mode[data-page="laporan"] .report-export-btn,
html.dark-mode body[data-page="laporan"] .report-export-btn {
  background:rgba(14,165,233,.12) !important;
  border-color:rgba(56,189,248,.18) !important;
  color:#e2e8f0 !important;
}
@media (max-width: 992px) {
  .report-hero-panel {
    grid-template-columns:auto minmax(0,1fr);
  }
  .report-filter-premium {
    grid-column:1 / -1;
    width:100%;
  }
  .report-stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 576px) {
  .report-page-shell {
    gap:12px;
  }
  .report-hero-panel,
  .report-chart-card,
  .report-detail-card {
    border-radius:22px;
  }
  .report-hero-panel {
    padding:14px;
    gap:12px;
  }
  .report-hero-icon {
    width:48px;
    height:48px;
    border-radius:17px;
    font-size:22px;
  }
  .report-hero-copy strong {
    font-size:20px;
  }
  .report-hero-copy small {
    font-size:12px;
  }
  .report-filter-premium {
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .report-filter-box {
    padding:8px;
    border-radius:16px;
  }
  .report-filter-box .form-control {
    height:40px;
    font-size:13px;
    padding:0 9px;
  }
  .report-stat-grid {
    gap:10px;
  }
  .report-stat-card {
    min-height:104px;
    padding:13px;
    border-radius:19px;
  }
  .report-stat-card > span {
    width:36px;
    height:36px;
    border-radius:13px;
    margin-bottom:9px;
  }
  .report-stat-card strong {
    font-size:16px;
  }
  .report-chart-card,
  .report-detail-card {
    padding:13px;
  }
  .report-card-head {
    align-items:flex-start;
  }
  .report-card-head strong {
    font-size:16px;
  }
  .report-chart-wrap {
    height:250px;
    border-radius:18px;
  }
  .report-detail-head {
    display:grid;
    grid-template-columns:1fr;
  }
  .report-export-actions {
    justify-content:stretch;
    grid-template-columns:1fr 1fr;
  }
  .report-category-card {
    border-radius:18px;
  }
}

/* v1.18.3 - Popup Tambah Aset premium */
.asset-create-swal {
  width:min(94vw,620px) !important;
}
.asset-create-modal {
  position:relative;
  overflow:hidden;
  padding:3px;
}
.asset-create-modal::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(20,184,166,.14),transparent 28%),
    radial-gradient(circle at 0 0,rgba(37,99,235,.11),transparent 26%);
  pointer-events:none;
}
.asset-create-modal > * {
  position:relative;
  z-index:1;
}
.asset-create-hero {
  position:relative;
  overflow:hidden;
  margin:0 0 7px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.28);
}
.asset-create-hero::after {
  content:"";
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
.asset-form-section {
  position:relative;
  margin-top:7px;
  padding:12px;
  border:1px solid rgba(226,232,240,.82);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 26px rgba(15,23,42,.045);
}
.asset-section-title {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  color:#0f5bff;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:900;
}
.asset-section-title i {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#eff6ff,#ecfeff);
  color:#0f5bff;
}
.asset-create-modal label {
  margin:8px 0 5px 2px;
  color:#64748b;
  letter-spacing:0;
}
.asset-premium-input {
  min-height:49px !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border:1px solid #dbeafe !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(15,23,42,.035);
}
.asset-premium-input:hover {
  border-color:#bfdbfe !important;
}
.asset-premium-input:focus {
  background:#ffffff !important;
}
.asset-money-input {
  font-family:'Poppins',sans-serif;
  font-size:16px;
}
.asset-balance-panel {
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(236,254,255,.92));
  border-color:rgba(37,99,235,.13);
}
.asset-balance-select {
  color:#0f172a !important;
}
.asset-form-tip {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:9px;
  padding:10px;
  border-radius:14px;
  background:rgba(14,165,233,.08);
  color:#0369a1;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}
.asset-form-tip i {
  margin-top:1px;
  color:#0ea5e9;
}
.asset-swal-confirm,
.asset-swal-cancel {
  min-height:45px;
  border-radius:14px !important;
  padding:11px 20px !important;
  font-family:'Poppins',sans-serif;
  font-weight:900 !important;
}
.asset-swal-confirm {
  background:linear-gradient(135deg,#0f5bff,#00a7b5) !important;
  box-shadow:0 14px 28px rgba(37,99,235,.22) !important;
}
.asset-swal-cancel {
  background:#eef2f7 !important;
  color:#334155 !important;
}
.asset-swal .swal2-validation-message {
  margin:8px 3px 0 !important;
  border-radius:14px;
  font-size:12px;
  font-weight:800;
}
body.dark-mode .asset-create-modal,
html.dark-mode body .asset-create-modal {
  background:linear-gradient(180deg,#07111f,#0f172a) !important;
}
body.dark-mode .asset-create-modal::before,
html.dark-mode body .asset-create-modal::before {
  background:
    radial-gradient(circle at 100% 0,rgba(20,184,166,.13),transparent 28%),
    radial-gradient(circle at 0 0,rgba(56,189,248,.11),transparent 26%);
}
body.dark-mode .asset-form-section,
html.dark-mode body .asset-form-section {
  background:rgba(2,6,23,.46);
  border-color:rgba(56,189,248,.16);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
body.dark-mode .asset-section-title,
html.dark-mode body .asset-section-title {
  color:#bae6fd;
}
body.dark-mode .asset-section-title i,
html.dark-mode body .asset-section-title i {
  background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(20,184,166,.14));
  color:#bae6fd;
}
body.dark-mode .asset-premium-input,
html.dark-mode body .asset-premium-input {
  background:linear-gradient(180deg,rgba(2,6,23,.84),rgba(8,18,33,.86)) !important;
  border-color:rgba(56,189,248,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 18px rgba(0,0,0,.18);
}
body.dark-mode .asset-premium-input:focus,
html.dark-mode body .asset-premium-input:focus {
  border-color:#38bdf8 !important;
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
}
body.dark-mode .asset-balance-panel,
html.dark-mode body .asset-balance-panel {
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.08));
}
body.dark-mode .asset-balance-select,
html.dark-mode body .asset-balance-select {
  color:#f8fafc !important;
}
body.dark-mode .asset-form-tip,
html.dark-mode body .asset-form-tip {
  background:rgba(56,189,248,.10);
  color:#bae6fd;
}
body.dark-mode .asset-swal-cancel,
html.dark-mode body .asset-swal-cancel {
  background:rgba(148,163,184,.16) !important;
  color:#e2e8f0 !important;
}
@media (max-width: 576px) {
  .asset-create-swal {
    width:calc(100vw - 22px) !important;
    border-radius:24px !important;
  }
  .asset-create-hero {
    align-items:flex-start;
    padding:14px;
  }
  .asset-form-section {
    padding:11px;
    border-radius:16px;
  }
  .asset-swal-confirm,
  .asset-swal-cancel {
    width:100%;
    margin:4px 0 !important;
  }
}

/* v1.18.4 - Paksa jarak tepi popup Tambah Aset menjadi 2-3px */
.swal2-popup.card-custom.asset-swal.asset-create-swal,
body .swal2-popup.card-custom.asset-swal.asset-create-swal,
html body .swal2-popup.card-custom.asset-swal.asset-create-swal {
  width:min(94vw,620px) !important;
  padding:3px !important;
  margin:0 !important;
  border-radius:26px !important;
  box-sizing:border-box !important;
}
.swal2-popup.asset-create-swal .swal2-title {
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}
.swal2-popup.asset-create-swal .swal2-html-container {
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}
.swal2-popup.asset-create-swal .asset-create-modal {
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:3px !important;
  box-sizing:border-box !important;
}
.swal2-popup.asset-create-swal .asset-create-hero {
  margin:0 0 6px !important;
}
.swal2-popup.asset-create-swal .swal2-actions {
  width:100% !important;
  margin:8px 0 0 !important;
  padding:0 3px 3px !important;
  box-sizing:border-box !important;
}
@media (max-width: 576px) {
  .swal2-popup.card-custom.asset-swal.asset-create-swal,
  body .swal2-popup.card-custom.asset-swal.asset-create-swal,
  html body .swal2-popup.card-custom.asset-swal.asset-create-swal {
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    padding:3px !important;
  }
  .swal2-popup.asset-create-swal .swal2-html-container {
    max-height:calc(100dvh - 112px) !important;
  }
}

/* v1.18.5 - Mobile polish khusus popup Tambah Aset */
@media (max-width: 576px) {
  .swal2-popup.card-custom.asset-swal.asset-create-swal,
  body .swal2-popup.card-custom.asset-swal.asset-create-swal,
  html body .swal2-popup.card-custom.asset-swal.asset-create-swal {
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  }
  .swal2-popup.asset-create-swal .swal2-html-container {
    max-height:calc(100dvh - 124px) !important;
    scrollbar-width:thin;
  }
  .swal2-popup.asset-create-swal .asset-create-modal {
    padding:3px !important;
    border-radius:21px;
  }
  .swal2-popup.asset-create-swal .asset-create-hero {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:11px;
    align-items:center;
    min-height:auto;
    padding:13px;
    border-radius:19px;
    margin-bottom:5px !important;
  }
  .swal2-popup.asset-create-swal .asset-create-hero i {
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:16px;
    font-size:22px;
  }
  .swal2-popup.asset-create-swal .asset-create-hero strong {
    font-size:20px;
    line-height:1.18;
    letter-spacing:0;
  }
  .swal2-popup.asset-create-swal .asset-create-hero span {
    display:block;
    margin-top:4px;
    font-size:11.5px;
    line-height:1.32;
  }
  .swal2-popup.asset-create-swal .asset-form-section {
    margin-top:6px;
    padding:10px;
    border-radius:17px;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
  }
  .swal2-popup.asset-create-swal .asset-section-title {
    gap:7px;
    margin-bottom:6px;
    font-size:12px;
  }
  .swal2-popup.asset-create-swal .asset-section-title i {
    width:26px;
    height:26px;
    border-radius:9px;
    font-size:14px;
  }
  .swal2-popup.asset-create-swal .asset-create-modal label {
    margin:7px 0 4px 2px;
    font-size:10.5px;
    line-height:1.2;
  }
  .swal2-popup.asset-create-swal .asset-premium-input {
    min-height:46px !important;
    height:46px;
    border-radius:14px !important;
    padding:10px 12px !important;
    font-size:14px !important;
    line-height:1.25 !important;
  }
  .swal2-popup.asset-create-swal textarea.asset-premium-input {
    height:auto;
    min-height:70px !important;
    resize:vertical;
  }
  .swal2-popup.asset-create-swal .asset-form-grid {
    gap:2px;
  }
  .swal2-popup.asset-create-swal .asset-form-tip {
    margin-top:8px;
    padding:9px;
    border-radius:13px;
    font-size:11.5px;
    line-height:1.38;
  }
  .swal2-popup.asset-create-swal .swal2-actions {
    position:sticky;
    bottom:0;
    z-index:3;
    display:grid !important;
    grid-template-columns:1fr;
    gap:7px !important;
    margin-top:7px !important;
    padding:8px 3px 3px !important;
    border-radius:0 0 20px 20px;
    background:linear-gradient(180deg,rgba(248,251,255,.76),#ffffff 38%);
    backdrop-filter:blur(8px);
  }
  .swal2-popup.asset-create-swal .asset-swal-confirm,
  .swal2-popup.asset-create-swal .asset-swal-cancel {
    min-height:46px;
    width:100%;
    margin:0 !important;
    border-radius:14px !important;
    font-size:13px !important;
  }
  body.dark-mode .swal2-popup.card-custom.asset-swal.asset-create-swal,
  html.dark-mode body .swal2-popup.card-custom.asset-swal.asset-create-swal {
    background:linear-gradient(180deg,#07111f,#0f172a) !important;
  }
  body.dark-mode .swal2-popup.asset-create-swal .swal2-actions,
  html.dark-mode body .swal2-popup.asset-create-swal .swal2-actions {
    background:linear-gradient(180deg,rgba(15,23,42,.74),#0f172a 38%) !important;
    border-top:1px solid rgba(56,189,248,.12);
  }
}
@media (max-width: 576px) {
  .asset-hero {
    padding:16px;
    border-radius:24px;
  }
  .asset-hero strong {
    font-size:20px;
  }
  .asset-summary-card {
    min-height:78px;
  }
  .asset-card {
    border-radius:22px;
    padding:15px;
  }
  .asset-card-top {
    grid-template-columns:auto minmax(0,1fr);
  }
  .asset-card-top b {
    grid-column:2;
    justify-self:start;
    max-width:100%;
  }
  .asset-card-meta {
    display:grid;
    grid-template-columns:1fr;
  }
}

/* v1.21.0 - Catatan & Pengingat */
.notes-reminder-page{padding-bottom:24px}
.notes-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:20px;border-radius:28px;background:linear-gradient(135deg,#eef7ff,#ecfdf5 52%,#f8fafc);border:1px solid rgba(37,99,235,.12);box-shadow:0 22px 55px rgba(15,23,42,.08);margin-bottom:14px;overflow:hidden;position:relative}
.notes-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:190px;height:190px;border-radius:999px;background:rgba(20,184,166,.16);pointer-events:none}
.notes-home-btn,.notes-hero-icon{width:48px;height:48px;border:0;border-radius:16px;display:grid;place-items:center;background:#fff;color:#2563eb;box-shadow:0 12px 28px rgba(37,99,235,.13);position:relative;z-index:1;flex:0 0 auto}
.notes-home-btn{cursor:pointer}
.notes-hero-icon{background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-size:22px}
.notes-hero-copy{position:relative;z-index:1;min-width:0}
.notes-hero-copy span{display:block;font-size:12px;font-weight:800;text-transform:uppercase;color:#00846f;letter-spacing:.08em}
.notes-hero-copy > span{margin-left:58px}
.notes-title-row{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.notes-hero-copy h2{margin:0;font-family:Poppins,sans-serif;font-size:26px;font-weight:900;color:#0f172a;line-height:1.15}
.notes-hero-copy p{margin:0;color:#64748b;font-weight:650;line-height:1.45}
.notes-add-btn{position:relative;z-index:1;border:0;border-radius:18px;padding:14px 18px;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff;font-weight:900;box-shadow:0 16px 35px rgba(37,99,235,.22)}
.notes-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.notes-filter-group{display:flex;gap:8px;padding:5px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.22);box-shadow:0 12px 28px rgba(15,23,42,.05)}
.notes-filter-group button{border:0;background:transparent;border-radius:13px;padding:10px 14px;font-weight:850;color:#64748b}
.notes-filter-group button.active{background:linear-gradient(135deg,#dbeafe,#ccfbf1);color:#075985}
.notes-search{display:flex;align-items:center;gap:8px;min-width:260px;padding:0 14px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.22);box-shadow:0 12px 28px rgba(15,23,42,.05)}
.notes-search i{color:#2563eb}.notes-search input{border:0;outline:0;background:transparent;width:100%;height:46px;font-weight:750;color:#0f172a}
.notes-telegram-alert{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px 14px;border-radius:18px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-weight:800}
.notes-telegram-alert button{margin-left:auto;border:0;border-radius:12px;background:#fb923c;color:#fff;padding:8px 11px;font-weight:900}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.note-card{padding:16px;border-radius:24px;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.2);box-shadow:0 18px 40px rgba(15,23,42,.07);display:flex;flex-direction:column;gap:12px;min-height:210px}
.note-card.due-soon{border-color:rgba(20,184,166,.42);box-shadow:0 20px 48px rgba(20,184,166,.14)}
.note-card.done{opacity:.74}.note-card-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center}
.note-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-size:20px}
.note-card h3{margin:0;font-size:17px;font-weight:900;color:#0f172a;line-height:1.25}.note-card small{color:#0284c7;font-weight:850}.note-card p{margin:0;color:#475569;line-height:1.5;font-weight:650;white-space:pre-wrap}
.note-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.note-meta span{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#eff6ff;color:#1d4ed8;padding:7px 9px;font-size:12px;font-weight:850}
.note-actions{display:flex;gap:7px}.note-actions button{border:0;border-radius:13px;padding:9px 11px;background:#e0f2fe;color:#075985;font-weight:900}.note-actions button.danger{margin-left:auto;background:#fee2e2;color:#b91c1c}
.notes-empty{grid-column:1/-1;text-align:center;padding:34px;border-radius:26px;background:#fff;border:1px dashed rgba(37,99,235,.24);color:#64748b}.notes-empty i{font-size:38px;color:#14b8a6}.notes-empty strong{display:block;margin-top:8px;color:#0f172a;font-size:20px}.notes-empty span{display:block;margin:6px 0 14px}.notes-empty button{border:0;border-radius:16px;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;padding:12px 16px;font-weight:900}
.swal2-popup.note-swal{padding:3px!important;border-radius:28px!important;overflow:hidden!important}.note-swal .swal2-html-container{margin:0!important;padding:0 3px!important;overflow-x:hidden!important}.note-swal .swal2-actions{width:auto!important;margin:9px 3px 3px!important;padding:8px 0 0!important;border-radius:0 0 22px 22px!important;overflow:hidden!important}.note-form-modal{padding:0;border-radius:24px;overflow:hidden}.note-register-hero{margin-bottom:10px!important}.note-register-hero i{width:52px!important;height:52px!important;border-radius:18px!important;display:grid!important;place-items:center!important;background:rgba(37,99,235,.1)!important}.note-register-grid{grid-template-columns:1.15fr .85fr!important}.note-input{border-radius:16px!important;min-height:48px!important;font-weight:800!important;max-width:100%!important}.note-form-modal textarea.note-input{min-height:96px!important;max-height:240px!important;overflow:auto!important;resize:vertical!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;line-height:1.45!important}.note-form-tip{display:flex!important;gap:8px!important;align-items:flex-start;margin-top:10px!important;margin-bottom:0!important}.note-confirm-btn,.note-cancel-btn{border-radius:15px!important;padding:12px 18px!important;font-weight:900!important}.note-confirm-btn{background:linear-gradient(135deg,#2563eb,#0f766e)!important}
body.dark-mode .notes-hero,html.dark-mode body .notes-hero{background:linear-gradient(135deg,#07111f,#0f172a 52%,#042f2e);border-color:rgba(56,189,248,.18);box-shadow:0 22px 55px rgba(0,0,0,.34)}
body.dark-mode .notes-home-btn,body.dark-mode .notes-filter-group,body.dark-mode .notes-search,body.dark-mode .note-card,html.dark-mode body .notes-home-btn,html.dark-mode body .notes-filter-group,html.dark-mode body .notes-search,html.dark-mode body .note-card{background:rgba(15,23,42,.92);border-color:rgba(148,163,184,.18);box-shadow:0 18px 38px rgba(0,0,0,.28)}
body.dark-mode .notes-hero-copy h2,body.dark-mode .note-card h3,body.dark-mode .notes-empty strong,html.dark-mode body .notes-hero-copy h2,html.dark-mode body .note-card h3,html.dark-mode body .notes-empty strong{color:#f8fafc}
body.dark-mode .notes-hero-copy p,body.dark-mode .note-card p,html.dark-mode body .notes-hero-copy p,html.dark-mode body .note-card p{color:#cbd5e1}
body.dark-mode .notes-filter-group button,body.dark-mode .notes-search input,html.dark-mode body .notes-filter-group button,html.dark-mode body .notes-search input{color:#cbd5e1}
body.dark-mode .notes-filter-group button.active,html.dark-mode body .notes-filter-group button.active{background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(20,184,166,.22));color:#e0f2fe}
body.dark-mode .notes-empty,html.dark-mode body .notes-empty{background:rgba(15,23,42,.86);border-color:rgba(56,189,248,.2)}
body.dark-mode .swal2-popup.note-swal,html.dark-mode body .swal2-popup.note-swal{background:#07111f!important}.dark-mode .note-input{background:#0f172a!important;border-color:rgba(56,189,248,.2)!important;color:#f8fafc!important}.dark-mode .note-form-tip{background:rgba(20,184,166,.12)!important;color:#99f6e4!important}
@media (max-width: 992px){.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notes-hero{grid-template-columns:minmax(0,1fr);}.notes-hero-icon{display:none}.notes-add-btn{grid-column:1/-1;width:100%}.note-register-grid{grid-template-columns:1fr!important}}
@media (max-width: 576px){.notes-reminder-page{padding-bottom:88px}.notes-hero{padding:14px;border-radius:24px;gap:10px}.notes-home-btn{width:38px;height:38px;border-radius:13px}.notes-title-row{gap:8px}.notes-hero-copy > span{margin-left:46px}.notes-hero-copy h2{font-size:21px}.notes-hero-copy p{font-size:12.5px}.notes-toolbar{display:grid;grid-template-columns:1fr;gap:9px}.notes-filter-group{overflow:auto}.notes-filter-group button{white-space:nowrap;flex:1}.notes-search{min-width:0}.notes-grid{grid-template-columns:1fr}.note-card{border-radius:22px;min-height:auto}.swal2-popup.note-swal{width:calc(100vw - 14px)!important;max-width:calc(100vw - 14px)!important}.note-swal .swal2-html-container{max-height:calc(100dvh - 126px)!important;padding:0 2px!important}.note-swal .swal2-actions{margin:7px 2px 2px!important}.note-register-hero strong{font-size:18px!important}.note-register-hero{padding:12px!important}.note-register-hero i{width:44px!important;height:44px!important}}

/* v1.23.0 - Filter periode bulanan Kategori */
.category-period-filter{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin:0 0 14px;padding:13px 14px;border:1px solid rgba(37,99,235,.14);border-radius:18px;background:linear-gradient(135deg,#f8fbff,#f0fdfa);box-shadow:0 12px 28px rgba(15,23,42,.05)}
.category-period-filter small,.category-period-filter strong{display:block}
.category-period-filter small{font-size:10px;font-weight:900;text-transform:uppercase;color:#64748b}
.category-period-filter strong{margin-top:2px;color:#0f172a;font-family:Poppins,sans-serif;font-size:14px}
.category-period-filter label{display:flex;align-items:center;gap:7px;margin:0;padding:0 10px;border:1px solid #dbeafe;border-radius:13px;background:#fff;color:#2563eb}
.category-period-filter select{min-height:40px;border:0;background:transparent;color:#0f172a;font-weight:850;outline:0}
body.dark-mode .category-period-filter,html.dark-mode body .category-period-filter{background:linear-gradient(135deg,#07111f,#0f172a 55%,#042f2e);border-color:rgba(56,189,248,.2);box-shadow:0 14px 32px rgba(0,0,0,.28)}
body.dark-mode .category-period-filter strong,html.dark-mode body .category-period-filter strong{color:#f8fafc}
body.dark-mode .category-period-filter small,html.dark-mode body .category-period-filter small{color:#94a3b8}
body.dark-mode .category-period-filter label,html.dark-mode body .category-period-filter label{background:rgba(15,23,42,.9);border-color:rgba(56,189,248,.2);color:#5eead4}
body.dark-mode .category-period-filter select,html.dark-mode body .category-period-filter select{color:#f8fafc}
body.dark-mode .category-period-filter option,html.dark-mode body .category-period-filter option{background:#0f172a;color:#f8fafc}
@media (max-width:576px){.category-period-filter{grid-template-columns:1fr 1fr;padding:11px;border-radius:16px}.category-period-filter>div{grid-column:1/-1}.category-period-filter label{min-width:0}.category-period-filter select{width:100%;min-width:0}}

/* v1.23.1 - Card sistem Sisa Saldo */
.carryover-category-card{cursor:pointer;background:linear-gradient(145deg,#f0fdfa,#ecfeff)!important;border:1px solid rgba(20,184,166,.28)!important;box-shadow:0 14px 30px rgba(13,148,136,.1)!important}
.carryover-category-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;border-radius:12px;background:linear-gradient(135deg,#14b8a6,#0284c7);color:#fff;font-size:20px;box-shadow:0 9px 18px rgba(13,148,136,.2)}
.carryover-category-title{overflow:hidden;color:#0f172a;font-family:Poppins,sans-serif;font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.carryover-category-type{color:#0f9f8c;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.carryover-category-detail{border-color:#14b8a6!important}.carryover-category-detail>i{color:#0f9f8c!important}
body.dark-mode .carryover-category-card,html.dark-mode body .carryover-category-card{background:linear-gradient(145deg,#042f2e,#071b2a)!important;border-color:rgba(45,212,191,.32)!important;box-shadow:0 15px 34px rgba(0,0,0,.3)!important}
body.dark-mode .carryover-category-title,html.dark-mode body .carryover-category-title{color:#f0fdfa}
body.dark-mode .carryover-category-type,html.dark-mode body .carryover-category-type{color:#5eead4}

/* v1.24.0 - Konfirmasi hapus permanen tenant */
.permanent-delete-swal{padding:3px!important;border-radius:24px!important;overflow:hidden!important}
.permanent-delete-swal .swal2-html-container{margin:0!important;padding:0!important}
.permanent-delete-modal{padding:3px;color:#475569}
.permanent-delete-hero{display:flex;align-items:center;gap:12px;padding:14px;border-radius:19px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;box-shadow:0 15px 32px rgba(185,28,28,.2)}
.permanent-delete-hero i{font-size:30px}.permanent-delete-hero strong,.permanent-delete-hero span{display:block}.permanent-delete-hero strong{font-family:Poppins,sans-serif;font-size:18px}.permanent-delete-hero span{margin-top:2px;font-size:12px;font-weight:750;color:#fee2e2}
.permanent-delete-modal p{margin:13px 5px;color:#475569;font-size:13px;line-height:1.58}
.permanent-delete-warning{display:flex;align-items:flex-start;gap:8px;margin:0 4px 12px;padding:10px 11px;border:1px solid #fecaca;border-radius:15px;background:#fef2f2;color:#991b1b;font-size:12px;font-weight:800;line-height:1.45}
.permanent-delete-modal label{display:block;margin:9px 5px 4px;color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase}
.permanent-delete-modal .form-control{min-height:46px;border-radius:14px;border-color:#fecaca;font-weight:800}
body.dark-mode .swal2-popup.permanent-delete-swal,html.dark-mode body .swal2-popup.permanent-delete-swal{background:#07111f!important;border-color:rgba(248,113,113,.22)!important}
body.dark-mode .permanent-delete-modal p,html.dark-mode body .permanent-delete-modal p{color:#cbd5e1}
body.dark-mode .permanent-delete-warning,html.dark-mode body .permanent-delete-warning{background:rgba(127,29,29,.22);border-color:rgba(248,113,113,.28);color:#fecaca}
body.dark-mode .permanent-delete-modal label,html.dark-mode body .permanent-delete-modal label{color:#fca5a5}
body.dark-mode .permanent-delete-modal .form-control,html.dark-mode body .permanent-delete-modal .form-control{background:#0f172a!important;border-color:rgba(248,113,113,.25)!important;color:#f8fafc!important}

/* v1.26.2 - Popup panduan kategori premium */
.swal2-popup.category-tips-modal{width:min(740px,calc(100vw - 18px))!important;padding:3px!important;border:1px solid rgba(37,99,235,.18)!important;border-radius:26px!important;background:#f8fbff!important;overflow:hidden!important;box-shadow:0 28px 70px rgba(15,23,42,.2)!important}
.category-tips-modal .swal2-title:empty{display:none!important}
.category-tips-modal .swal2-html-container{max-height:min(74vh,720px)!important;margin:0!important;padding:0!important;overflow:auto!important}
.category-tips-panel{padding:3px;color:#475569}
.category-tips-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:15px;border-radius:20px;background:linear-gradient(135deg,#e0f2fe,#ecfeff 58%,#ccfbf1);border:1px solid rgba(14,165,233,.16);overflow:hidden}
.category-tips-hero:after{content:"";position:absolute;right:-32px;top:-54px;width:132px;height:132px;border-radius:50%;background:rgba(20,184,166,.14);pointer-events:none}
.category-tips-hero-icon{position:relative;z-index:1;width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff;font-size:23px;box-shadow:0 12px 24px rgba(37,99,235,.2)}
.category-tips-hero-copy{position:relative;z-index:1;min-width:0}.category-tips-hero-copy small,.category-tips-hero-copy strong,.category-tips-hero-copy p{display:block}.category-tips-hero-copy small{color:#047857;font-size:10px;font-weight:900;letter-spacing:.08em}.category-tips-hero-copy strong{margin-top:2px;color:#0f172a;font-family:Poppins,sans-serif;font-size:18px}.category-tips-hero-copy p{margin:2px 0 0;color:#475569;font-size:12px;font-weight:700;line-height:1.4}
.category-tips-period{position:relative;z-index:1;grid-column:1/-1;display:inline-flex;align-items:center;gap:7px;width:max-content;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.8);color:#0369a1;font-size:11px;font-weight:900}
.category-tips-lead{margin:10px 4px;color:#475569;font-size:12.5px;font-weight:700;line-height:1.55}
.category-tips-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.category-tips-metric{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid rgba(148,163,184,.2);border-radius:16px;background:#fff}
.category-tips-metric-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;font-size:15px}.category-tips-metric-icon.is-blue{background:#dbeafe;color:#2563eb}.category-tips-metric-icon.is-green{background:#ccfbf1;color:#0f766e}.category-tips-metric-icon.is-violet{background:#ede9fe;color:#7c3aed}.category-tips-metric-icon.is-amber{background:#fef3c7;color:#d97706}
.category-tips-metric b,.category-tips-metric span{display:block}.category-tips-metric b{color:#0f172a;font-size:12px}.category-tips-metric span{margin-top:2px;color:#64748b;font-size:11px;font-weight:700;line-height:1.42}
.category-tips-usage{margin-top:8px;padding:11px;border-radius:17px;background:#eff6ff;border:1px solid #dbeafe}.category-tips-usage>strong{display:flex;align-items:center;gap:7px;color:#1d4ed8;font-size:12px}
.category-tips-step-grid{display:grid;gap:7px;margin-top:8px}.category-tips-step-grid div{display:flex;align-items:flex-start;gap:8px;color:#475569;font-size:11.5px;font-weight:750;line-height:1.42}.category-tips-step-grid em{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#2563eb;color:#fff;font-size:10px;font-style:normal;font-weight:900}
.category-tips-system{display:flex;align-items:flex-start;gap:9px;margin-top:8px;padding:10px;border-radius:17px;background:#f0fdfa;border:1px solid #ccfbf1}.category-tips-system>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#0f766e;color:#fff}.category-tips-system b,.category-tips-system small{display:block}.category-tips-system b{color:#115e59;font-size:12px}.category-tips-system small{margin-top:2px;color:#0f766e;font-size:11px;font-weight:750;line-height:1.45}
.category-tips-modal .swal2-actions{width:100%!important;margin:0!important;padding:8px 6px 4px!important}.swal2-confirm.category-tips-confirm{width:100%;margin:0!important;padding:11px 16px;border:0;border-radius:15px;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff;font-weight:900;box-shadow:0 10px 22px rgba(37,99,235,.2)}
body.dark-mode .swal2-popup.category-tips-modal,html.dark-mode body .swal2-popup.category-tips-modal{background:#07111f!important;border-color:rgba(56,189,248,.2)!important;box-shadow:0 30px 76px rgba(0,0,0,.48)!important}
body.dark-mode .category-tips-hero,html.dark-mode body .category-tips-hero{background:linear-gradient(135deg,#0f172a,#082f49 56%,#042f2e);border-color:rgba(56,189,248,.18)}
body.dark-mode .category-tips-hero-copy strong,body.dark-mode .category-tips-metric b,html.dark-mode body .category-tips-hero-copy strong,html.dark-mode body .category-tips-metric b{color:#f8fafc}
body.dark-mode .category-tips-hero-copy p,body.dark-mode .category-tips-lead,body.dark-mode .category-tips-metric span,body.dark-mode .category-tips-step-grid div,html.dark-mode body .category-tips-hero-copy p,html.dark-mode body .category-tips-lead,html.dark-mode body .category-tips-metric span,html.dark-mode body .category-tips-step-grid div{color:#cbd5e1}
body.dark-mode .category-tips-period,html.dark-mode body .category-tips-period{background:rgba(15,23,42,.74);color:#67e8f9}
body.dark-mode .category-tips-metric,html.dark-mode body .category-tips-metric{background:rgba(15,23,42,.92);border-color:rgba(148,163,184,.16)}
body.dark-mode .category-tips-usage,html.dark-mode body .category-tips-usage{background:rgba(30,64,175,.14);border-color:rgba(96,165,250,.2)}
body.dark-mode .category-tips-usage>strong,html.dark-mode body .category-tips-usage>strong{color:#93c5fd}
body.dark-mode .category-tips-system,html.dark-mode body .category-tips-system{background:rgba(13,148,136,.12);border-color:rgba(45,212,191,.2)}
body.dark-mode .category-tips-system b,html.dark-mode body .category-tips-system b{color:#99f6e4}body.dark-mode .category-tips-system small,html.dark-mode body .category-tips-system small{color:#5eead4}
@media (max-width:576px){.swal2-popup.category-tips-modal{width:calc(100vw - 12px)!important}.category-tips-modal .swal2-html-container{max-height:calc(100dvh - 90px)!important}.category-tips-hero{padding:12px;gap:9px}.category-tips-hero-icon{width:46px;height:46px;border-radius:15px;font-size:19px}.category-tips-hero-copy strong{font-size:15px}.category-tips-hero-copy p{font-size:11px}.category-tips-lead{font-size:11.5px}.category-tips-metric-grid{grid-template-columns:1fr}.category-tips-metric{padding:9px}.category-tips-modal .swal2-actions{padding:7px 4px 3px!important}}

/* v1.27.0 - Mutasi saldo transparan per user */
.staff-balance-card-action{position:relative;width:100%;font-family:inherit;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.staff-balance-card-action:hover{transform:translateY(-2px);border-color:#bfdbfe;box-shadow:0 16px 34px rgba(37,99,235,.11)}
.staff-balance-card-action:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:3px}
.staff-balance-open-icon{color:#94a3b8;font-size:17px;flex:0 0 auto;transition:transform .18s ease,color .18s ease}.staff-balance-card-action:hover .staff-balance-open-icon{color:#2563eb;transform:translateX(2px)}
.swal2-popup.wallet-mutation-popup{width:min(720px,calc(100vw - 18px))!important;padding:3px!important;border:1px solid rgba(37,99,235,.18)!important;border-radius:26px!important;background:#f8fbff!important;overflow:hidden!important;box-shadow:0 28px 70px rgba(15,23,42,.22)!important}
.wallet-mutation-popup .swal2-title:empty{display:none!important}.wallet-mutation-popup .swal2-html-container{max-height:min(76vh,760px)!important;margin:0!important;padding:0!important;overflow:auto!important}.wallet-mutation-modal{padding:3px;color:#475569}
.wallet-mutation-hero{display:flex;align-items:center;gap:11px;padding:14px;border-radius:20px;background:linear-gradient(135deg,#2563eb,#0891b2 58%,#0f9f8c);color:#fff;box-shadow:0 14px 28px rgba(37,99,235,.2)}.wallet-mutation-avatar{width:49px;height:49px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-family:Poppins,sans-serif;font-size:20px;font-weight:900}.wallet-mutation-hero small,.wallet-mutation-hero strong,.wallet-mutation-hero p{display:block}.wallet-mutation-hero small{font-size:9px;font-weight:900;letter-spacing:.1em;color:#cffafe}.wallet-mutation-hero strong{margin-top:2px;font-family:Poppins,sans-serif;font-size:17px;line-height:1.2}.wallet-mutation-hero p{margin:2px 0 0;color:#e0f2fe;font-size:11px;font-weight:800}
.wallet-mutation-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;margin-top:8px;padding:11px 12px;border:1px solid #dbeafe;border-radius:17px;background:linear-gradient(135deg,#eff6ff,#ecfeff)}.wallet-mutation-summary span,.wallet-mutation-summary small{color:#64748b;font-size:10px;font-weight:900;text-transform:uppercase}.wallet-mutation-summary strong{grid-row:1/3;grid-column:2;color:#047857;font-family:Poppins,sans-serif;font-size:18px;text-align:right}.wallet-mutation-summary small{font-size:9px;color:#0284c7}
.wallet-mutation-caption{display:flex;align-items:flex-start;gap:7px;margin:8px 2px;color:#64748b;font-size:11px;font-weight:750;line-height:1.42}.wallet-mutation-caption i{color:#0f9f8c;font-size:15px}
.wallet-mutation-list{display:grid;gap:7px}.wallet-mutation-row{padding:10px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.035)}.wallet-mutation-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.wallet-mutation-flow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900}.wallet-mutation-row.income .wallet-mutation-flow,.wallet-mutation-row.income .wallet-mutation-row-head strong{color:#059669}.wallet-mutation-row.expense .wallet-mutation-flow,.wallet-mutation-row.expense .wallet-mutation-row-head strong{color:#dc2626}.wallet-mutation-row-head strong{font-family:Poppins,sans-serif;font-size:14px}.wallet-mutation-row p{margin:5px 0 6px;color:#334155;font-size:12px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}.wallet-mutation-meta{display:flex;flex-wrap:wrap;gap:5px 9px;color:#64748b;font-size:10px;font-weight:750}.wallet-mutation-meta span{display:inline-flex;align-items:center;gap:4px}.wallet-mutation-balance{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}.wallet-mutation-balance div:last-child{text-align:right}.wallet-mutation-balance small,.wallet-mutation-balance b{display:block}.wallet-mutation-balance small{color:#94a3b8;font-size:9px;font-weight:900;text-transform:uppercase}.wallet-mutation-balance b{margin-top:2px;color:#0f172a;font-size:12px}.wallet-mutation-balance>i{color:#94a3b8}
.wallet-mutation-empty{padding:26px 14px;text-align:center;border:1px dashed #bfdbfe;border-radius:18px;background:#fff}.wallet-mutation-empty i{display:block;color:#0f9f8c;font-size:30px}.wallet-mutation-empty strong,.wallet-mutation-empty span{display:block}.wallet-mutation-empty strong{margin-top:6px;color:#0f172a;font-family:Poppins,sans-serif}.wallet-mutation-empty span{margin-top:3px;color:#64748b;font-size:11px;font-weight:700}
.wallet-mutation-popup .swal2-actions{width:100%!important;margin:0!important;padding:8px 6px 4px!important}.swal2-confirm.wallet-mutation-confirm{width:100%;margin:0!important;padding:11px 16px;border:0;border-radius:15px;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff;font-weight:900}
body.dark-mode .swal2-popup.wallet-mutation-popup,html.dark-mode body .swal2-popup.wallet-mutation-popup{background:#07111f!important;border-color:rgba(56,189,248,.2)!important;box-shadow:0 30px 76px rgba(0,0,0,.48)!important}
body.dark-mode .wallet-mutation-summary,html.dark-mode body .wallet-mutation-summary{background:linear-gradient(135deg,#0f172a,#082f49);border-color:rgba(56,189,248,.2)}body.dark-mode .wallet-mutation-summary span,body.dark-mode .wallet-mutation-summary small,html.dark-mode body .wallet-mutation-summary span,html.dark-mode body .wallet-mutation-summary small{color:#94a3b8}body.dark-mode .wallet-mutation-summary strong,html.dark-mode body .wallet-mutation-summary strong{color:#5eead4}
body.dark-mode .wallet-mutation-caption,html.dark-mode body .wallet-mutation-caption{color:#cbd5e1}body.dark-mode .wallet-mutation-row,html.dark-mode body .wallet-mutation-row{background:#0f172a;border-color:rgba(148,163,184,.18);box-shadow:0 8px 18px rgba(0,0,0,.18)}body.dark-mode .wallet-mutation-row p,body.dark-mode .wallet-mutation-balance b,html.dark-mode body .wallet-mutation-row p,html.dark-mode body .wallet-mutation-balance b{color:#f8fafc}body.dark-mode .wallet-mutation-meta,body.dark-mode .wallet-mutation-balance small,html.dark-mode body .wallet-mutation-meta,html.dark-mode body .wallet-mutation-balance small{color:#94a3b8}body.dark-mode .wallet-mutation-balance,html.dark-mode body .wallet-mutation-balance{border-color:rgba(148,163,184,.2)}body.dark-mode .wallet-mutation-empty,html.dark-mode body .wallet-mutation-empty{background:#0f172a;border-color:rgba(56,189,248,.24)}body.dark-mode .wallet-mutation-empty strong,html.dark-mode body .wallet-mutation-empty strong{color:#f8fafc}body.dark-mode .wallet-mutation-empty span,html.dark-mode body .wallet-mutation-empty span{color:#94a3b8}
@media(max-width:991px){.staff-balance-card-action{grid-template-columns:46px minmax(0,1fr) auto!important;grid-template-areas:"avatar info open" "value value value"!important}.staff-balance-open-icon{grid-area:open}.wallet-mutation-popup .swal2-html-container{max-height:calc(100dvh - 88px)!important}}
@media(max-width:576px){.swal2-popup.wallet-mutation-popup{width:calc(100vw - 12px)!important}.wallet-mutation-hero{padding:11px;border-radius:18px}.wallet-mutation-avatar{width:44px;height:44px;border-radius:14px}.wallet-mutation-hero strong{font-size:15px}.wallet-mutation-summary strong{font-size:15px}.wallet-mutation-row{padding:9px}.wallet-mutation-row-head strong{font-size:12px}.wallet-mutation-balance b{font-size:11px}.wallet-mutation-popup .swal2-actions{padding:7px 4px 3px!important}}

/* v1.27.2 - Filter rentang tanggal detail mutasi saldo dapat dilipat */
.wallet-mutation-filter{margin:8px 0;border:1px solid #dbeafe;border-radius:17px;background:linear-gradient(135deg,#f8fbff,#eff6ff);overflow:hidden}
.wallet-mutation-filter-toggle{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border:0;background:transparent;text-align:left}.wallet-mutation-filter-toggle>i:first-child{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:#dbeafe;color:#2563eb;font-size:18px}.wallet-mutation-filter-toggle strong,.wallet-mutation-filter-toggle span{display:block}.wallet-mutation-filter-toggle strong{color:#1e3a8a;font-size:12px}.wallet-mutation-filter-toggle span{margin-top:1px;color:#64748b;font-size:10px;font-weight:750}.wallet-mutation-filter-chevron{color:#64748b;transition:transform .2s ease}.wallet-mutation-filter.open .wallet-mutation-filter-chevron{transform:rotate(180deg)}
.wallet-mutation-filter-body{padding:0 10px 10px}.wallet-mutation-filter.collapsed .wallet-mutation-filter-body{display:none}
.wallet-mutation-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}.wallet-mutation-filter-grid span{display:block;margin:0 2px 3px;color:#64748b;font-size:9px;font-weight:900;text-transform:uppercase}.wallet-mutation-filter-grid input{width:100%;min-height:39px;padding:7px 9px;border:1px solid #dbeafe;border-radius:12px;background:#fff;color:#0f172a;font-size:11px;font-weight:850;outline:0}.wallet-mutation-filter-grid input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.wallet-mutation-filter-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}.wallet-mutation-filter-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:7px 10px;border-radius:11px;font-size:11px;font-weight:900}.wallet-mutation-reset{border:1px solid #cbd5e1;background:#fff;color:#64748b}.wallet-mutation-apply{border:0;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff}
body.dark-mode .wallet-mutation-filter,html.dark-mode body .wallet-mutation-filter{background:linear-gradient(135deg,#0f172a,#082f49);border-color:rgba(56,189,248,.2)}body.dark-mode .wallet-mutation-filter-toggle>i:first-child,html.dark-mode body .wallet-mutation-filter-toggle>i:first-child{background:rgba(37,99,235,.25);color:#7dd3fc}body.dark-mode .wallet-mutation-filter-toggle strong,html.dark-mode body .wallet-mutation-filter-toggle strong{color:#bfdbfe}body.dark-mode .wallet-mutation-filter-toggle span,body.dark-mode .wallet-mutation-filter-grid span,html.dark-mode body .wallet-mutation-filter-toggle span,html.dark-mode body .wallet-mutation-filter-grid span{color:#94a3b8}body.dark-mode .wallet-mutation-filter-grid input,body.dark-mode .wallet-mutation-reset,html.dark-mode body .wallet-mutation-filter-grid input,html.dark-mode body .wallet-mutation-reset{background:#0f172a;border-color:rgba(148,163,184,.22);color:#f8fafc}
@media(max-width:576px){.wallet-mutation-filter-grid{grid-template-columns:1fr}.wallet-mutation-filter-actions button{flex:1}.wallet-mutation-filter-actions{justify-content:stretch}}

/* v1.27.3 - Tombol mata kolom rahasia Setting WhatsApp */
.whatsapp-secret-field{position:relative}.whatsapp-secret-field .whatsapp-input{padding-right:46px}.whatsapp-secret-field button{position:absolute;top:50%;right:7px;width:34px;height:34px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid #dbeafe;border-radius:11px;background:#f8fbff;color:#2563eb;transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}.whatsapp-secret-field button:hover,.whatsapp-secret-field button.is-visible{background:#eff6ff;border-color:#93c5fd;color:#0f766e;box-shadow:0 6px 14px rgba(37,99,235,.1)}.whatsapp-secret-field button i{font-size:16px;line-height:1}
body.dark-mode .whatsapp-secret-field button,html.dark-mode body .whatsapp-secret-field button{background:#0f172a;border-color:rgba(56,189,248,.2);color:#7dd3fc}body.dark-mode .whatsapp-secret-field button:hover,body.dark-mode .whatsapp-secret-field button.is-visible,html.dark-mode body .whatsapp-secret-field button:hover,html.dark-mode body .whatsapp-secret-field button.is-visible{background:#082f49;border-color:rgba(94,234,212,.35);color:#5eead4}

/* v1.28.0 - Libur mingguan dan tanggal khusus Catatan & Pengingat */
.note-holiday-settings{margin-top:10px;padding:11px;border:1px solid #dbeafe;border-radius:17px;background:linear-gradient(135deg,#f8fbff,#ecfeff)}
.note-holiday-head{display:flex;align-items:center;gap:9px}.note-holiday-head>i{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#dbeafe;color:#2563eb;font-size:17px}.note-holiday-head strong,.note-holiday-head span{display:block}.note-holiday-head strong{color:#1e3a8a;font-size:13px}.note-holiday-head span{margin-top:1px;color:#64748b;font-size:11px;font-weight:700;line-height:1.4}
.note-holiday-label{display:block;margin:11px 2px 5px;color:#64748b;font-size:10px;font-weight:900;text-transform:uppercase}
.note-holiday-days{display:flex;flex-wrap:wrap;gap:6px}.note-holiday-day{margin:0}.note-holiday-day input{position:absolute;opacity:0;pointer-events:none}.note-holiday-day span{display:block;padding:7px 9px;border:1px solid #dbeafe;border-radius:11px;background:#fff;color:#64748b;font-size:11px;font-weight:850;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.note-holiday-day input:checked+span{border-color:#60a5fa;background:linear-gradient(135deg,#dbeafe,#ccfbf1);color:#075985;box-shadow:0 6px 14px rgba(37,99,235,.1)}
.note-holiday-date-add{display:grid;grid-template-columns:minmax(0,1fr) 45px;gap:7px}.note-holiday-date-add button{display:grid;place-items:center;border:0;border-radius:14px;background:linear-gradient(135deg,#2563eb,#0f9f8c);color:#fff;font-size:17px}
.note-holiday-date-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.note-holiday-date-list>span{display:inline-flex;align-items:center;gap:5px;padding:6px 7px 6px 9px;border:1px solid #bfdbfe;border-radius:999px;background:#fff;color:#0369a1;font-size:11px;font-weight:850}.note-holiday-date-list button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:#fee2e2;color:#b91c1c;font-size:9px}.note-holiday-date-list small{color:#94a3b8;font-size:11px;font-weight:700}
body.dark-mode .note-holiday-settings,html.dark-mode body .note-holiday-settings{background:linear-gradient(135deg,#0f172a,#082f49);border-color:rgba(56,189,248,.2)}body.dark-mode .note-holiday-head>i,html.dark-mode body .note-holiday-head>i{background:rgba(37,99,235,.25);color:#7dd3fc}body.dark-mode .note-holiday-head strong,html.dark-mode body .note-holiday-head strong{color:#bfdbfe}body.dark-mode .note-holiday-head span,body.dark-mode .note-holiday-label,html.dark-mode body .note-holiday-head span,html.dark-mode body .note-holiday-label{color:#94a3b8}body.dark-mode .note-holiday-day span,body.dark-mode .note-holiday-date-list>span,html.dark-mode body .note-holiday-day span,html.dark-mode body .note-holiday-date-list>span{background:#0f172a;border-color:rgba(148,163,184,.22);color:#cbd5e1}body.dark-mode .note-holiday-day input:checked+span,html.dark-mode body .note-holiday-day input:checked+span{background:linear-gradient(135deg,rgba(37,99,235,.3),rgba(20,184,166,.22));border-color:rgba(94,234,212,.36);color:#ccfbf1}
@media(min-width:993px){#page-catatan-pengingat .notes-home-btn{display:none!important}#page-catatan-pengingat .notes-hero-copy>span{margin-left:0}}
@media(max-width:576px){.note-holiday-settings{padding:9px;border-radius:15px}.note-holiday-days{gap:5px}.note-holiday-day span{padding:7px 8px;font-size:10px}.note-holiday-date-add{grid-template-columns:minmax(0,1fr) 42px}}

/* v1.28.1 - Navigation bottom disembunyikan pada halaman Aset & Investasi mobile */
@media(max-width:991px){
  body[data-page="aset"] .bottom-nav{display:none!important}
  body[data-page="aset"] .content-area{padding-bottom:22px!important}
  body[data-page="aset"] #page-aset{padding-bottom:12px!important}
}

/* v1.29.0 - Owner WA Gateway mengikuti pola panel multi-tenant VPS */
.owner-wa-session-panel{margin:0 0 16px;padding:16px;border:1px solid #dbe7f5;border-radius:22px;background:linear-gradient(135deg,#fff,#f8fbff 58%,#ecfeff);box-shadow:0 14px 34px rgba(15,23,42,.06)}
.owner-wa-session-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.owner-wa-session-head small,.owner-wa-session-head strong,.owner-wa-session-head span{display:block}.owner-wa-session-head small{color:#047857;font-size:10px;font-weight:950;letter-spacing:.08em}.owner-wa-session-head strong{margin-top:2px;color:#0f172a;font-family:Poppins,sans-serif;font-size:18px}.owner-wa-session-head>div>span{margin-top:2px;color:#64748b;font-size:12px;font-weight:700}
.owner-wa-session-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:13px}.owner-wa-session-grid>div{min-width:0;padding:11px;border:1px solid #dbe7f5;border-radius:15px;background:#fff}.owner-wa-session-grid small,.owner-wa-session-grid strong{display:block}.owner-wa-session-grid small{color:#64748b;font-size:9px;font-weight:950;text-transform:uppercase}.owner-wa-session-grid strong{margin-top:3px;color:#0f766e;font-size:12px;overflow-wrap:anywhere}
.owner-wa-session-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}.owner-wa-session-actions button{height:45px;font-size:12px}.owner-wa-session-actions i{margin-right:5px}
.whatsapp-secret-field .whatsapp-input{padding-right:84px!important}.whatsapp-secret-field>button:not(.whatsapp-copy-secret){right:44px}.whatsapp-secret-field .whatsapp-copy-secret{right:7px;background:#ecfdf5;color:#047857;border-color:#bbf7d0}.whatsapp-secret-field .whatsapp-copy-secret:hover{background:#dcfce7;border-color:#86efac;color:#065f46}
body.dark-mode .owner-wa-session-panel,html.dark-mode body .owner-wa-session-panel{background:linear-gradient(135deg,#071225,#0b1b36 58%,#052e2b);border-color:rgba(125,211,252,.18);box-shadow:0 18px 48px rgba(0,0,0,.34)}body.dark-mode .owner-wa-session-head strong,html.dark-mode body .owner-wa-session-head strong{color:#f8fafc}body.dark-mode .owner-wa-session-head>div>span,html.dark-mode body .owner-wa-session-head>div>span{color:#cbd5e1}body.dark-mode .owner-wa-session-grid>div,html.dark-mode body .owner-wa-session-grid>div{background:#071225;border-color:rgba(125,211,252,.16)}body.dark-mode .owner-wa-session-grid small,html.dark-mode body .owner-wa-session-grid small{color:#94a3b8}body.dark-mode .owner-wa-session-grid strong,html.dark-mode body .owner-wa-session-grid strong{color:#5eead4}body.dark-mode .whatsapp-secret-field .whatsapp-copy-secret,html.dark-mode body .whatsapp-secret-field .whatsapp-copy-secret{background:#052e2b;border-color:rgba(94,234,212,.28);color:#5eead4}
@media(max-width:768px){.owner-wa-session-panel{padding:12px;border-radius:18px}.owner-wa-session-head{display:grid}.owner-wa-session-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.owner-wa-session-actions{grid-template-columns:1fr}.owner-wa-session-actions button{height:44px}}

/* v1.29.1 - Setting WA Gateway Owner ringkas, detail teknis terlipat */
.owner-wa-simple-grid{align-items:start}.owner-wa-api-guide{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:13px 14px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1e3a8a}.owner-wa-api-guide strong{display:flex;align-items:center;gap:7px;font-size:13px}.owner-wa-api-guide code{width:max-content;max-width:100%;padding:5px 8px;border-radius:7px;background:#dbeafe;color:#1d4ed8;font-size:12px;overflow-wrap:anywhere}.owner-wa-api-guide small{font-size:11px;line-height:1.55;color:#475569}
.owner-wa-advanced{padding:0!important;overflow:hidden}.owner-wa-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;color:#172033}.owner-wa-advanced>summary::-webkit-details-marker{display:none}.owner-wa-advanced>summary>span{display:flex;align-items:center;gap:12px;min-width:0}.owner-wa-advanced>summary>span>i{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;border-radius:11px;background:#eef2ff;color:#2563eb;font-size:18px}.owner-wa-advanced>summary span span{display:flex;flex-direction:column;gap:3px;min-width:0}.owner-wa-advanced>summary strong{font-size:14px}.owner-wa-advanced>summary small{color:#64748b;font-size:11px;line-height:1.45}.owner-wa-advanced-chevron{color:#2563eb;transition:transform .2s ease}.owner-wa-advanced[open] .owner-wa-advanced-chevron{transform:rotate(180deg)}.owner-wa-advanced-body{padding:0 20px 20px;border-top:1px solid #e2e8f0}.owner-wa-advanced-body .whatsapp-card-head{margin-top:18px}
body.dark-mode .owner-wa-api-guide,html.dark-mode body .owner-wa-api-guide{border-color:#1d4ed8;background:#10284b;color:#bfdbfe}body.dark-mode .owner-wa-api-guide code,html.dark-mode body .owner-wa-api-guide code{background:#153866;color:#93c5fd}body.dark-mode .owner-wa-api-guide small,body.dark-mode .owner-wa-advanced>summary small,html.dark-mode body .owner-wa-api-guide small,html.dark-mode body .owner-wa-advanced>summary small{color:#a8b8ce}body.dark-mode .owner-wa-advanced>summary,html.dark-mode body .owner-wa-advanced>summary{color:#f8fafc}body.dark-mode .owner-wa-advanced>summary>span>i,html.dark-mode body .owner-wa-advanced>summary>span>i{background:#16325b;color:#7dd3fc}body.dark-mode .owner-wa-advanced-body,html.dark-mode body .owner-wa-advanced-body{border-color:#334155}
@media(max-width:768px){.owner-wa-advanced>summary{padding:15px}.owner-wa-advanced-body{padding:0 15px 15px}.owner-wa-advanced>summary small{font-size:10px}}

/* v1.29.2 - Status gateway/device nyata dan indikator status pesan tes */
.owner-wa-session-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.wa-health-strip span.is-offline i:not(.bi){background:#ef4444}.wa-health-strip span.is-online i:not(.bi){background:#22c55e}.wa-health-strip span.is-offline small{color:#dc2626}.wa-health-strip span.is-online small{color:#047857}
.owner-wa-message-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}.owner-wa-message-status span{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:8px 5px;border:1px solid #dbe7f5;border-radius:11px;background:#f8fafc;color:#94a3b8;font-size:10px;font-weight:900}.owner-wa-message-status span.is-active{border-color:#86efac;background:#ecfdf5;color:#047857}.owner-wa-message-status span.is-failed{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.whatsapp-field-hint{display:block;margin:6px 2px 12px;color:#64748b;font-size:11px;font-weight:700;line-height:1.45}
body.dark-mode .wa-health-strip span.is-offline small,html.dark-mode body .wa-health-strip span.is-offline small{color:#fca5a5}body.dark-mode .wa-health-strip span.is-online small,html.dark-mode body .wa-health-strip span.is-online small{color:#5eead4}body.dark-mode .owner-wa-message-status span,html.dark-mode body .owner-wa-message-status span{border-color:rgba(148,163,184,.22);background:#071225;color:#94a3b8}body.dark-mode .owner-wa-message-status span.is-active,html.dark-mode body .owner-wa-message-status span.is-active{border-color:rgba(94,234,212,.38);background:#052e2b;color:#5eead4}body.dark-mode .owner-wa-message-status span.is-failed,html.dark-mode body .owner-wa-message-status span.is-failed{border-color:rgba(248,113,113,.38);background:#3f1119;color:#fca5a5}
body.dark-mode .whatsapp-field-hint,html.dark-mode body .whatsapp-field-hint{color:#94a3b8}
@media(max-width:768px){.owner-wa-session-grid{grid-template-columns:1fr}.owner-wa-message-status{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.29.20 - Akses WhatsApp Bot pada Staff & Izin */
.whatsapp-bot-access-card{margin-top:18px}.whatsapp-bot-table td{vertical-align:middle}.whatsapp-bot-action-stack{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;min-width:max-content}.whatsapp-bot-action-stack .badge{display:inline-flex;align-items:center;gap:5px}.whatsapp-bot-table code,.whatsapp-approval-summary code{display:inline-flex;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 9px;border-radius:10px;background:#f1f5f9;color:#0f172a;font-weight:800}.whatsapp-approval-summary{display:grid;gap:9px;padding:12px;border:1px solid #dbeafe;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#ecfeff);margin:12px 0 14px}.whatsapp-approval-summary div{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px}.whatsapp-approval-summary span{color:#64748b;font-weight:800}.whatsapp-approval-summary b{color:#0f172a;text-align:right}
body.dark-mode .whatsapp-bot-table code,body.dark-mode .whatsapp-approval-summary code,html.dark-mode body .whatsapp-bot-table code,html.dark-mode body .whatsapp-approval-summary code{background:rgba(15,23,42,.88);color:#bfdbfe;border:1px solid rgba(125,211,252,.18)}body.dark-mode .whatsapp-approval-summary,html.dark-mode body .whatsapp-approval-summary{background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(8,47,73,.82));border-color:rgba(125,211,252,.2)}body.dark-mode .whatsapp-approval-summary span,html.dark-mode body .whatsapp-approval-summary span{color:#93c5fd}body.dark-mode .whatsapp-approval-summary b,html.dark-mode body .whatsapp-approval-summary b{color:#f8fafc}
@media(max-width:768px){.whatsapp-bot-table{min-width:980px}.whatsapp-approval-summary div{align-items:flex-start;flex-direction:column;gap:4px}.whatsapp-approval-summary b{text-align:left}}

/* v1.29.20 - Search Staff & Izin */
.staff-permission-search{display:flex;align-items:center;gap:10px;margin:8px 0 16px;padding:9px 12px;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:linear-gradient(135deg,#f8fbff,#ffffff);box-shadow:0 12px 30px rgba(15,23,42,.05)}.staff-permission-search i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(20,184,166,.12));color:#2563eb}.staff-permission-search input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:#0f172a;font-weight:800;font-size:13px;box-shadow:none!important}.staff-permission-search input::placeholder{color:#94a3b8;font-weight:700}body.dark-mode .staff-permission-search,html.dark-mode body .staff-permission-search{border-color:rgba(125,211,252,.16);background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(8,47,73,.72));box-shadow:0 16px 38px rgba(0,0,0,.25)}body.dark-mode .staff-permission-search i,html.dark-mode body .staff-permission-search i{background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(45,212,191,.16));color:#7dd3fc}body.dark-mode .staff-permission-search input,html.dark-mode body .staff-permission-search input{color:#f8fafc!important}body.dark-mode .staff-permission-search input::placeholder,html.dark-mode body .staff-permission-search input::placeholder{color:#94a3b8}

/* v1.29.20 - Beranda Transaksi Terbaru premium */
.dashboard-recent-item{position:relative;display:flex;align-items:center;gap:12px;padding:13px;margin-bottom:10px;border:1px solid rgba(226,232,240,.92);border-radius:20px;background:linear-gradient(135deg,#ffffff,#f8fbff);box-shadow:0 12px 28px rgba(15,23,42,.055);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.dashboard-recent-item:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#2563eb}.dashboard-recent-item.income:before{background:#10b981}.dashboard-recent-item.expense:before{background:#ef4444}.dashboard-recent-item.transfer:before{background:#0ea5e9}.dashboard-recent-item:after{content:"";position:absolute;right:-38px;top:-46px;width:116px;height:116px;border-radius:50%;background:rgba(37,99,235,.06);pointer-events:none}.dashboard-recent-item:hover{transform:translateY(-1px);box-shadow:0 18px 38px rgba(15,23,42,.09);border-color:rgba(37,99,235,.18)}.dashboard-recent-item.is-pending{background:linear-gradient(135deg,#fffaf0,#ffffff);border-color:#fde68a}.dashboard-recent-icon{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:16px;font-size:18px;box-shadow:0 14px 28px rgba(15,23,42,.08)}.dashboard-recent-icon.income{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#047857}.dashboard-recent-icon.expense{background:linear-gradient(135deg,#fee2e2,#fed7aa);color:#dc2626}.dashboard-recent-icon.transfer{background:linear-gradient(135deg,#e0f2fe,#dbeafe);color:#0284c7}.dashboard-recent-main{position:relative;z-index:1;min-width:0;flex:1}.dashboard-recent-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.dashboard-recent-title{display:flex;align-items:center;gap:6px;min-width:0;color:#0f172a;font-family:'Poppins',sans-serif;font-weight:900;font-size:13.5px;line-height:1.25}.dashboard-recent-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-recent-amount{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:'Poppins',sans-serif;font-size:13px;font-weight:950;letter-spacing:-.02em}.dashboard-recent-amount.income{color:#059669}.dashboard-recent-amount.expense{color:#dc2626}.dashboard-recent-amount.transfer{color:#0284c7}.dashboard-recent-meta{display:flex;align-items:center;gap:8px;margin-top:6px;min-width:0;color:#64748b;font-size:11.5px;font-weight:750}.dashboard-recent-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}.dashboard-recent-meta span:last-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-recent-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:26px 12px;border:1px dashed #cbd5e1;border-radius:22px;background:linear-gradient(135deg,#f8fafc,#ffffff);color:#64748b}.dashboard-recent-empty i{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:#eff6ff;color:#2563eb;font-size:24px}.dashboard-recent-empty strong{color:#0f172a;font-size:14px;font-family:'Poppins',sans-serif}.dashboard-recent-empty span{font-size:12px;font-weight:700}
body.dark-mode #page-dashboard .card-custom:has(#recentTx),html.dark-mode body #page-dashboard .card-custom:has(#recentTx){background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(8,17,35,.96))!important;border-color:rgba(125,211,252,.14)!important;box-shadow:0 24px 60px rgba(0,0,0,.32)!important}body.dark-mode .dashboard-recent-item,html.dark-mode body .dashboard-recent-item{background:linear-gradient(135deg,rgba(15,23,42,.90),rgba(8,47,73,.42))!important;border-color:rgba(125,211,252,.16)!important;box-shadow:0 16px 36px rgba(0,0,0,.22)!important}body.dark-mode .dashboard-recent-item:after,html.dark-mode body .dashboard-recent-item:after{background:rgba(45,212,191,.08)}body.dark-mode .dashboard-recent-item:hover,html.dark-mode body .dashboard-recent-item:hover{border-color:rgba(125,211,252,.34)!important;box-shadow:0 22px 46px rgba(0,0,0,.32)!important}body.dark-mode .dashboard-recent-title,html.dark-mode body .dashboard-recent-title,body.dark-mode .dashboard-recent-empty strong,html.dark-mode body .dashboard-recent-empty strong{color:#f8fafc!important}body.dark-mode .dashboard-recent-meta,html.dark-mode body .dashboard-recent-meta,body.dark-mode .dashboard-recent-empty,html.dark-mode body .dashboard-recent-empty{color:#cbd5e1!important}body.dark-mode .dashboard-recent-icon.income,html.dark-mode body .dashboard-recent-icon.income{background:linear-gradient(135deg,rgba(16,185,129,.24),rgba(20,184,166,.14));color:#86efac}body.dark-mode .dashboard-recent-icon.expense,html.dark-mode body .dashboard-recent-icon.expense{background:linear-gradient(135deg,rgba(239,68,68,.24),rgba(249,115,22,.14));color:#fca5a5}body.dark-mode .dashboard-recent-icon.transfer,html.dark-mode body .dashboard-recent-icon.transfer{background:linear-gradient(135deg,rgba(14,165,233,.24),rgba(37,99,235,.16));color:#7dd3fc}body.dark-mode .dashboard-recent-amount.income,html.dark-mode body .dashboard-recent-amount.income{color:#86efac}body.dark-mode .dashboard-recent-amount.expense,html.dark-mode body .dashboard-recent-amount.expense{color:#fca5a5}body.dark-mode .dashboard-recent-amount.transfer,html.dark-mode body .dashboard-recent-amount.transfer{color:#7dd3fc}body.dark-mode .dashboard-recent-empty,html.dark-mode body .dashboard-recent-empty{background:linear-gradient(135deg,rgba(15,23,42,.80),rgba(8,47,73,.36));border-color:rgba(125,211,252,.18)}body.dark-mode .dashboard-recent-empty i,html.dark-mode body .dashboard-recent-empty i{background:rgba(37,99,235,.18);color:#7dd3fc}
@media(max-width:576px){.dashboard-recent-item{padding:12px;border-radius:18px;gap:10px}.dashboard-recent-icon{width:40px;height:40px;border-radius:14px;font-size:16px}.dashboard-recent-top{flex-direction:column;gap:5px}.dashboard-recent-amount{font-size:12.5px}.dashboard-recent-meta{align-items:flex-start;flex-direction:column;gap:4px}.dashboard-recent-meta span:last-child{width:100%}}

/* v1.29.20 - Beranda desktop mode gelap Owner dan tenant dibuat lebih premium. */
@media (min-width: 992px) {
  body.dark-mode[data-page="dashboard"] .content-area,
  html.dark-mode body[data-page="dashboard"] .content-area {
    background:
      radial-gradient(circle at 12% 0%, rgba(37,99,235,.20), transparent 28%),
      radial-gradient(circle at 88% 10%, rgba(20,184,166,.16), transparent 30%),
      linear-gradient(180deg, #020617 0%, #071225 44%, #020617 100%) !important;
  }
  body.dark-mode[data-page="dashboard"] .topbar,
  html.dark-mode body[data-page="dashboard"] .topbar {
    background: rgba(2,6,23,.88) !important;
    border-bottom: 1px solid rgba(125,211,252,.14) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(16px);
  }
  body.dark-mode[data-page="dashboard"] .topbar h4,
  html.dark-mode body[data-page="dashboard"] .topbar h4 {
    color: #eef6ff !important;
    text-shadow: 0 0 18px rgba(125,211,252,.10);
  }
  body.dark-mode[data-page="dashboard"] .profile-pill,
  html.dark-mode body[data-page="dashboard"] .profile-pill,
  body.dark-mode[data-page="dashboard"] .notification-bell-btn,
  html.dark-mode body[data-page="dashboard"] .notification-bell-btn {
    background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(8,47,73,.66)) !important;
    border-color: rgba(125,211,252,.20) !important;
    color: #e5f0ff !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.24) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .hero-banner,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .hero-banner {
    background:
      radial-gradient(circle at 86% 10%, rgba(45,212,191,.25), transparent 28%),
      linear-gradient(135deg, rgba(30,64,175,.96) 0%, rgba(14,116,144,.92) 48%, rgba(13,148,136,.88) 100%) !important;
    border: 1px solid rgba(125,211,252,.24) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .hero-banner:after,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .hero-banner:after {
    background: rgba(255,255,255,.08) !important;
    box-shadow: -80px -80px 140px rgba(125,211,252,.10);
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .hero-banner .greeting,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .hero-banner .greeting,
  body.dark-mode[data-page="dashboard"] #page-dashboard .hero-banner p,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .hero-banner p {
    color: rgba(226,244,255,.86) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .hero-banner h4,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .hero-banner h4 {
    color: #ffffff !important;
    letter-spacing: 0 !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .dompet-pribadi,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .dompet-pribadi {
    background: linear-gradient(135deg, rgba(2,6,23,.34), rgba(15,23,42,.18)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 34px rgba(2,6,23,.18) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-grid,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-grid {
    gap: 18px !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(15,23,42,.94), rgba(8,47,73,.58)) !important;
    border: 1px solid rgba(125,211,252,.16) !important;
    box-shadow: 0 22px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card:before,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
    opacity: .94;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card:after,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card:after {
    content: "";
    position: absolute;
    right: -48px;
    top: -52px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: rgba(125,211,252,.08);
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card:hover,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card:hover {
    border-color: rgba(125,211,252,.34) !important;
    transform: translateY(-2px);
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card .icon,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card .icon {
    background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(20,184,166,.18)) !important;
    color: #a7f3d0 !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card .label,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card .label {
    color: #9fb6d5 !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .stat-card .value,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .stat-card .value {
    color: #f8fbff !important;
    text-shadow: 0 0 22px rgba(125,211,252,.10);
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .card-custom,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .card-custom {
    background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(7,18,37,.96)) !important;
    border: 1px solid rgba(125,211,252,.15) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .card-header-custom,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .card-header-custom {
    border-color: rgba(148,163,184,.13) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .card-header-custom h6,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .card-header-custom h6,
  body.dark-mode[data-page="dashboard"] #page-dashboard .card-header-custom h6 i,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .card-header-custom h6 i {
    color: #dff3ff !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .badge-soft,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .badge-soft {
    background: rgba(14,165,233,.15) !important;
    border-color: rgba(125,211,252,.20) !important;
    color: #a7f3d0 !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard canvas,
  html.dark-mode body[data-page="dashboard"] #page-dashboard canvas {
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.16));
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .dashboard-debt-ticker,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .dashboard-debt-ticker {
    background: linear-gradient(135deg, rgba(15,23,42,.90), rgba(127,29,29,.28)) !important;
    border: 1px solid rgba(251,113,133,.20) !important;
    color: #fecdd3 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.26) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .debt-ticker-icon,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .debt-ticker-icon {
    background: rgba(244,63,94,.18) !important;
    color: #fda4af !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-shell,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-shell {
    background:
      radial-gradient(circle at 92% 0%, rgba(20,184,166,.16), transparent 26%),
      linear-gradient(135deg, rgba(15,23,42,.94), rgba(8,47,73,.60)) !important;
    border-color: rgba(125,211,252,.18) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-head small,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-head small {
    color: #67e8f9 !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-head h5,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-head h5,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-card strong,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-card strong,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-method-legend strong,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-method-legend strong,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-main strong,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-main strong,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-value strong,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-value strong {
    color: #f8fbff !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-card,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-card,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-method-legend > div,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-method-legend > div,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-row,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-row {
    background: linear-gradient(135deg, rgba(2,6,23,.50), rgba(15,23,42,.76)) !important;
    border-color: rgba(125,211,252,.14) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.24) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-card:hover,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-card:hover,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-row:hover,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-row:hover {
    border-color: rgba(125,211,252,.32) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-card small,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-card em,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-method-legend small,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-main small,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-card small,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-card em,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-method-legend small,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-main small {
    color: #9fb6d5 !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-icon,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-icon,
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-no,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-no {
    background: linear-gradient(135deg, rgba(14,165,233,.20), rgba(20,184,166,.14)) !important;
    color: #7dd3fc !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-insight-head button,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-insight-head button {
    background: linear-gradient(135deg, #2563eb, #0f766e) !important;
    box-shadow: 0 16px 34px rgba(14,165,233,.18) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-row.top:first-child,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-row.top:first-child {
    background: linear-gradient(135deg, rgba(120,53,15,.30), rgba(15,23,42,.86)) !important;
    border-color: rgba(251,191,36,.28) !important;
  }
  body.dark-mode[data-page="dashboard"] #page-dashboard .owner-rank-empty,
  html.dark-mode body[data-page="dashboard"] #page-dashboard .owner-rank-empty {
    color: #9fb6d5 !important;
  }
}

/* v1.29.20 - Override akhir viewer bukti sederhana. */
.swal2-popup.proof-preview-premium .proof-only-shell {
  padding: 3px !important;
}
.swal2-popup.proof-preview-premium .swal2-close {
  top: 9px !important;
  right: 9px !important;
  z-index: 6 !important;
  background: rgba(15,23,42,.78) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* v1.29.20 - Popup bukti mengikuti ukuran gambar dan tombol tutup transparan. */
.swal2-popup.proof-preview-premium:has(.proof-preview-img) {
  width: fit-content !important;
  max-width: calc(100vw - 20px) !important;
}
.proof-preview-premium .proof-only-shell .proof-preview-stage:has(.proof-preview-img) {
  min-width: 0;
  min-height: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.proof-preview-premium .proof-only-shell .proof-preview-img {
  width: auto !important;
  max-width: calc(100vw - 26px) !important;
  max-height: calc(100dvh - 26px) !important;
}
.swal2-popup.proof-preview-premium .swal2-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 50% !important;
  background: rgba(15,23,42,.12) !important;
  color: #fff !important;
  line-height: 36px !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.72);
  box-shadow: 0 5px 16px rgba(15,23,42,.18);
  backdrop-filter: blur(4px);
}
.swal2-popup.proof-preview-premium .swal2-close:hover {
  background: rgba(15,23,42,.26) !important;
  border-color: rgba(255,255,255,.92) !important;
  transform: scale(1.04);
}
body.dark-mode .swal2-popup.proof-preview-premium .swal2-close,
html.dark-mode body .swal2-popup.proof-preview-premium .swal2-close {
  background: rgba(2,6,23,.16) !important;
  border-color: rgba(226,244,255,.66) !important;
}
@media (max-width: 576px) {
  .swal2-popup.proof-preview-premium:has(.proof-preview-img) {
    width: fit-content !important;
    max-width: calc(100vw - 12px) !important;
  }
  .proof-preview-premium .proof-only-shell .proof-preview-img {
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
  }
}

/* v1.29.20 - Dimensi seluruh popup dikunci mengikuti rasio asli gambar. */
.swal2-popup.proof-preview-premium:has(.proof-preview-img) {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-html,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-only-shell,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-box,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-only-shell {
  padding: 3px !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-stage {
  display: block !important;
  padding: 0 !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-img {
  display: block !important;
  margin: 0 !important;
  object-fit: contain !important;
}

/* v1.29.20 - Bukti upload tampil sebagai gambar asli tanpa bingkai popup. */
.swal2-popup.proof-preview-premium:has(.proof-preview-img) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-html,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-only-shell,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-box,
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-stage {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-img {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.dark-mode .swal2-popup.proof-preview-premium:has(.proof-preview-img),
html.dark-mode body .swal2-popup.proof-preview-premium:has(.proof-preview-img),
body.dark-mode .swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-only-shell,
html.dark-mode body .swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-only-shell,
body.dark-mode .swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-stage,
html.dark-mode body .swal2-popup.proof-preview-premium:has(.proof-preview-img) .proof-preview-stage {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.swal2-popup.proof-preview-premium:has(.proof-preview-img) .swal2-close {
  top: 8px !important;
  right: 8px !important;
}