: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; filter:drop-shadow(0 18px 28px rgba(37,99,235,.18)); }
.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;
  filter: drop-shadow(0 12px 22px rgba(37,99,235,.18));
}
.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; }

/* 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-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; }
body[data-page="telegram"] .content-area { padding-top:0; }
.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; }
.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); }
.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; }
.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:-158px; 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 { 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-row { display:flex; gap:4px; align-items:center; justify-content:flex-start; flex-wrap:nowrap; }
.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.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:860px; }
.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:940px; }
@media (max-width: 767px) { .legacy-data-table-customers { min-width:820px; } }

/* 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;
  }
}

@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;}
}

/* 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(100px + 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:1cm;display:grid;gap:10px;}
.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.35;padding-bottom:2px;}

.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:#94a3b8 !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;
  }
}
@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: 1px !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. */