:root{
  --app-primary:#6b2d16;
  --bali-brown:var(--app-primary);
  --bali-copper:#b85c2f;
  --bali-gold:#f6b94b;
  --bali-cream:#fff7e8;
  --bali-ink:#1f2937;
  --bali-muted:#6b7280;
  --bali-line:#eadfcf;
  --sidebar-width:280px;
}
*{box-sizing:border-box}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(246,185,75,.22), transparent 34rem),
    linear-gradient(135deg,#fffaf0 0%,#f6f7fb 48%,#fff4df 100%);
  color:var(--bali-ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
a{text-decoration:none}.text-muted{color:var(--bali-muted)!important}
.app-shell{min-height:100vh}.app-content{width:calc(100% - var(--sidebar-width));min-height:100vh}.main-content{padding:28px}
.sidebar{
  width:var(--sidebar-width);min-height:100vh;position:sticky;top:0;overflow-y:auto;
  background:
    linear-gradient(180deg,rgba(64,26,12,.98),rgba(123,52,24,.98)),
    radial-gradient(circle at top right,rgba(246,185,75,.32),transparent 14rem);
  box-shadow:18px 0 45px rgba(80,38,15,.16);z-index:1020;
}
.brand-box{padding:24px 22px 20px;border-bottom:1px solid rgba(255,255,255,.13)}
.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:24px;overflow:hidden}.brand-logo-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.brand-emoji{line-height:1}
.brand-title{font-family:Georgia,"Times New Roman",serif;font-weight:800;font-size:1.22rem;letter-spacing:.2px}.brand-subtitle{color:rgba(255,255,255,.72);font-size:.83rem}
.menu-wrap{padding:14px}.menu-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.48);margin:10px 10px 8px}
.sidebar .list-group-item{border:0;border-radius:14px!important;margin-bottom:7px;color:rgba(255,255,255,.86)!important;padding:12px 14px;background:transparent!important;transition:.2s ease;display:flex;align-items:center;gap:10px}
.sidebar .list-group-item:hover{background:rgba(255,255,255,.13)!important;transform:translateX(3px)}
.sidebar .list-group-item.active{background:linear-gradient(135deg,rgba(246,185,75,.34),rgba(255,255,255,.13))!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.12)}
.sidebar .logout-link{color:#ffe5da!important}.topbar{background:rgba(255,255,255,.83);backdrop-filter:blur(14px);border-bottom:1px solid rgba(234,223,207,.8);height:72px;padding:0 28px;position:sticky;top:0;z-index:1010}
.topbar-title{font-family:Georgia,"Times New Roman",serif;font-weight:800;margin:0;color:var(--bali-brown)}.user-pill{background:#fff;border:1px solid var(--bali-line);border-radius:999px;padding:8px 13px;box-shadow:0 8px 20px rgba(95,50,19,.06)}
.page-title{font-family:Georgia,"Times New Roman",serif;font-weight:800;color:var(--bali-brown);letter-spacing:.2px}.page-subtitle{color:var(--bali-muted);margin-top:-4px}
.card{border:1px solid rgba(234,223,207,.78);border-radius:24px;box-shadow:0 18px 48px rgba(99,57,17,.09);background:rgba(255,255,255,.9);overflow:hidden}.card-soft{background:linear-gradient(135deg,#fff,#fff8ec)}
.stat-card{position:relative;min-height:150px}.stat-card:after{content:"";position:absolute;right:-26px;bottom:-34px;width:126px;height:126px;border-radius:50%;background:rgba(246,185,75,.20)}.stat-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#fff3d6;color:var(--bali-brown);font-size:1.3rem}.stat-value{font-weight:800;letter-spacing:-.03em}.hero-card{background:linear-gradient(135deg,#6b2d16,#b85c2f);color:#fff;border:0}.hero-card .text-muted{color:rgba(255,255,255,.72)!important}
.btn{border-radius:13px;padding:.58rem .95rem;font-weight:650}.btn-primary{background:linear-gradient(135deg,#7a3419,#bd6134);border:0;box-shadow:0 10px 22px rgba(122,52,25,.20)}.btn-primary:hover{filter:brightness(.96)}.btn-secondary{background:#795548;border:0}.btn-warning{background:#f6b94b;border:0;color:#4b2a0e}.btn-info{background:#dbeafe;border:0;color:#1d4ed8}.btn-danger{background:#d9543f;border:0}.btn-outline-light:hover{color:var(--bali-brown)}
.form-control,.form-select{border-radius:14px;border:1px solid #e7d8c4;padding:.72rem .9rem}.form-control:focus,.form-select:focus{border-color:#d7954b;box-shadow:0 0 0 .25rem rgba(246,185,75,.18)}label,.form-label{font-weight:650;color:#4b5563}.form-section-title{font-family:Georgia,"Times New Roman",serif;font-weight:800;color:var(--bali-brown);letter-spacing:.4px}.form-hint{font-size:.86rem;color:var(--bali-muted)}
.table{margin-bottom:0;vertical-align:middle}.table thead th{background:#fff4df!important;color:#6b2d16;border-bottom:1px solid #eadfcf;font-size:.83rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.table tbody td{border-color:#f0e7dc}.table-hover tbody tr:hover{background:#fffaf0}.badge-soft{background:#fff1d1;color:#7a3419;border:1px solid #f0d59d}.pagination{margin:18px 0 0;gap:6px}.page-link{border:0;border-radius:12px!important;color:#7a3419;background:#fff4df}.page-item.active .page-link{background:#7a3419;color:#fff}
.alert{border:0;border-radius:18px}.login-page{min-height:100vh;background:linear-gradient(135deg,rgba(56,21,8,.92),rgba(128,54,24,.88)),url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.06"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')}.login-card{width:min(440px,92vw);border-radius:30px}.login-logo{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#fff5dc,#f6b94b);font-size:34px;margin:-6px auto 14px;box-shadow:0 15px 35px rgba(122,52,25,.18);overflow:hidden}.login-logo .brand-logo-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.empty-state{padding:28px;text-align:center;color:var(--bali-muted)}.photo-thumb{width:76px;height:76px;object-fit:cover;border-radius:16px;border:2px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.12);margin:4px}
@media(max-width:992px){.app-shell{display:block!important}.sidebar{width:100%;min-height:auto;position:relative}.app-content{width:100%}.menu-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.menu-label{grid-column:1/-1}.topbar{height:auto;padding:16px}.main-content{padding:18px}.user-pill{display:none}.sidebar .list-group-item{margin-bottom:0}}
@media(max-width:576px){.menu-wrap{grid-template-columns:1fr}.d-flex.justify-content-between{gap:12px;align-items:flex-start!important;flex-direction:column}.btn{width:auto}.table-responsive{border-radius:20px}.stat-card{min-height:126px}}

/* =========================
   UI KHUSUS NASABAH / USER
   Dibuat menyerupai aplikasi mobile.
   ========================= */
body.user-mobile-ui{
  background:linear-gradient(180deg,#fff7e8 0%,#f8fafc 42%,#ffffff 100%);
}
body.user-mobile-ui .app-shell{display:block!important;max-width:520px;margin:0 auto;min-height:100vh;background:#fff;box-shadow:0 0 45px rgba(80,38,15,.12);position:relative;overflow:hidden}
body.user-mobile-ui .app-content{width:100%;min-height:100vh;padding-bottom:92px}
body.user-mobile-ui .topbar{height:64px;border-bottom:0;background:rgba(255,255,255,.86);padding:14px 18px;box-shadow:none}
body.user-mobile-ui .topbar-title{font-size:1rem}
body.user-mobile-ui .topbar small{font-size:.78rem}
body.user-mobile-ui .user-pill{display:none!important}
body.user-mobile-ui .main-content{padding:18px 18px 24px}
body.user-mobile-ui .page-title{font-size:1.45rem;letter-spacing:-.02em}
body.user-mobile-ui .mobile-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
body.user-mobile-ui .mobile-greeting{color:#9a5c28;font-weight:700;font-size:.9rem;margin-bottom:2px}
body.user-mobile-ui .mobile-avatar{width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,#f6b94b,#b85c2f);display:grid;place-items:center;color:#fff;font-size:1.25rem;box-shadow:0 14px 28px rgba(184,92,47,.26)}
body.user-mobile-ui .mobile-balance-card{border-radius:30px;padding:24px;background:linear-gradient(145deg,#6b2d16 0%,#b85c2f 58%,#f6b94b 130%);color:#fff;box-shadow:0 20px 42px rgba(107,45,22,.24);position:relative;overflow:hidden}
body.user-mobile-ui .mobile-balance-card:before{content:"";position:absolute;right:-54px;top:-54px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}
body.user-mobile-ui .mobile-balance-card:after{content:"";position:absolute;left:-42px;bottom:-56px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09)}
body.user-mobile-ui .mobile-balance-card h1{font-weight:900;letter-spacing:-.05em;font-size:2.15rem;position:relative;z-index:1}
body.user-mobile-ui .mobile-balance-card > *{position:relative;z-index:1}
body.user-mobile-ui .mobile-mini-card{border:1px solid #f0e7dc;border-radius:24px;background:#fff;padding:18px;box-shadow:0 12px 28px rgba(99,57,17,.07);height:100%}
body.user-mobile-ui .mini-icon{width:40px;height:40px;border-radius:15px;background:#fff3d6;color:#7a3419;display:grid;place-items:center;margin-bottom:12px;font-size:1.1rem}
body.user-mobile-ui .card{border-radius:26px;box-shadow:0 14px 34px rgba(99,57,17,.08)}
body.user-mobile-ui .profile-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed #eadfcf;padding:12px 0;font-size:.94rem}
body.user-mobile-ui .profile-row:first-of-type{padding-top:0}
body.user-mobile-ui .profile-row:last-child{border-bottom:0;padding-bottom:0}
body.user-mobile-ui .profile-row span{color:#6b7280;min-width:90px}
body.user-mobile-ui .profile-row b{text-align:right;color:#1f2937}
body.user-mobile-ui .mobile-transaction-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f0e7dc}
body.user-mobile-ui .mobile-transaction-item:last-child{border-bottom:0;padding-bottom:0}
body.user-mobile-ui .transaction-icon{width:42px;height:42px;border-radius:16px;background:#dcfce7;color:#15803d;display:grid;place-items:center;font-size:1.15rem;flex:0 0 auto}
body.user-mobile-ui .empty-state{padding:20px 10px}
body.user-mobile-ui .btn{border-radius:16px}
body.user-mobile-ui .table-responsive{border-radius:22px}
body.user-mobile-ui .sidebar.user-bottom-nav{position:fixed!important;left:50%;transform:translateX(-50%);bottom:12px;top:auto;width:min(486px,calc(100% - 24px));min-height:auto;border-radius:28px;background:rgba(64,26,12,.94)!important;backdrop-filter:blur(16px);box-shadow:0 16px 46px rgba(32,14,6,.25);z-index:1080;overflow:visible}
body.user-mobile-ui .sidebar.user-bottom-nav .brand-box,
body.user-mobile-ui .sidebar.user-bottom-nav .menu-label{display:none!important}
body.user-mobile-ui .sidebar.user-bottom-nav .menu-wrap{display:flex!important;grid-template-columns:none!important;gap:4px;padding:8px;justify-content:space-around;align-items:center}
body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item{flex:1;margin:0!important;border-radius:22px!important;padding:9px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font-size:.68rem;line-height:1.05;color:rgba(255,255,255,.78)!important;transform:none!important}
body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item i{font-size:1.14rem;margin:0!important}
body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item.active{background:rgba(255,255,255,.16)!important;box-shadow:none;color:#fff!important}
body.user-mobile-ui .sidebar.user-bottom-nav .logout-link{max-width:72px;color:#ffd7c9!important}
@media(min-width:993px){body.user-mobile-ui .sidebar.user-bottom-nav{display:block!important}}
@media(max-width:576px){body.user-mobile-ui .app-shell{max-width:none;box-shadow:none}body.user-mobile-ui .main-content{padding:16px 14px 22px}body.user-mobile-ui .mobile-balance-card{border-radius:26px;padding:22px}body.user-mobile-ui .mobile-balance-card h1{font-size:1.95rem}body.user-mobile-ui .sidebar.user-bottom-nav{bottom:10px;width:calc(100% - 20px)}body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item span{font-size:.64rem}}


/* =========================================================
   PERBAIKAN UI USER UNTUK DESKTOP
   Tampilan user tetap terasa seperti aplikasi mobile, tetapi
   ketika dibuka dari laptop/PC tampil sebagai dashboard web
   yang proporsional, tidak melebar kosong, dan lebih rapi.
   ========================================================= */
body.user-mobile-ui{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 10%, rgba(246,185,75,.30), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(184,92,47,.16), transparent 28rem),
    linear-gradient(135deg,#fff7e8 0%,#f8fafc 48%,#fffdf8 100%);
}
body.user-mobile-ui .mobile-balance-card,
body.user-mobile-ui .mobile-mini-card,
body.user-mobile-ui .mobile-profile-card,
body.user-mobile-ui .mobile-history-card{
  transform:translateZ(0);
}
body.user-mobile-ui .mobile-balance-card{
  isolation:isolate;
}
body.user-mobile-ui .mobile-balance-card .btn-light{
  color:#6b2d16;
  font-weight:800;
  box-shadow:0 10px 22px rgba(255,255,255,.16);
}
body.user-mobile-ui .profile-row{
  align-items:flex-start;
}
body.user-mobile-ui .profile-row span:after{
  content:":";
  margin-left:3px;
}
body.user-mobile-ui .profile-row b{
  line-height:1.45;
  word-break:break-word;
}
body.user-mobile-ui .user-dashboard-grid,
body.user-mobile-ui .user-saldo-grid{
  display:block;
}
body.user-mobile-ui .user-section-note{
  border-radius:26px;
  background:linear-gradient(135deg,#fff8ec,#ffffff);
  border:1px solid #eadfcf;
  padding:18px;
  box-shadow:0 14px 34px rgba(99,57,17,.07);
}
body.user-mobile-ui .user-section-note .note-icon{
  width:42px;height:42px;border-radius:16px;display:grid;place-items:center;
  background:#fff3d6;color:#7a3419;font-size:1.2rem;flex:0 0 auto;
}
@media(min-width:768px){
  body.user-mobile-ui .app-shell{
    max-width:1180px;
    margin:24px auto;
    min-height:calc(100vh - 48px);
    border-radius:36px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(18px);
    box-shadow:0 28px 90px rgba(80,38,15,.14);
    border:1px solid rgba(234,223,207,.80);
  }
  body.user-mobile-ui .app-content{
    padding-bottom:114px;
  }
  body.user-mobile-ui .topbar{
    height:78px;
    padding:18px 34px;
    border-radius:36px 36px 0 0;
    border-bottom:1px solid rgba(234,223,207,.60);
    background:rgba(255,255,255,.70);
  }
  body.user-mobile-ui .topbar-title{
    font-size:1.12rem;
  }
  body.user-mobile-ui .main-content{
    padding:30px 34px 34px;
  }
  body.user-mobile-ui .mobile-page-heading{
    margin-bottom:24px!important;
  }
  body.user-mobile-ui .mobile-greeting{
    font-size:1rem;
  }
  body.user-mobile-ui .page-title{
    font-size:2rem;
  }
  body.user-mobile-ui .mobile-avatar{
    width:62px;height:62px;border-radius:24px;font-size:1.5rem;
  }
  body.user-mobile-ui .user-dashboard-grid,
  body.user-mobile-ui .user-saldo-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:24px;
    align-items:start;
  }
  body.user-mobile-ui .user-dashboard-left,
  body.user-mobile-ui .user-saldo-left,
  body.user-mobile-ui .user-dashboard-right,
  body.user-mobile-ui .user-saldo-right{
    min-width:0;
  }
  body.user-mobile-ui .mobile-balance-card{
    min-height:240px;
    padding:32px;
    border-radius:34px;
    box-shadow:0 28px 60px rgba(107,45,22,.24);
  }
  body.user-mobile-ui .mobile-balance-card h1{
    font-size:3.25rem;
    margin-top:.35rem;
    margin-bottom:1.2rem!important;
  }
  body.user-mobile-ui .mobile-mini-card{
    padding:22px;
    border-radius:28px;
  }
  body.user-mobile-ui .mini-icon{
    width:48px;height:48px;border-radius:18px;
  }
  body.user-mobile-ui .card{
    border-radius:30px;
  }
  body.user-mobile-ui .mobile-profile-card,
  body.user-mobile-ui .mobile-history-card{
    padding:26px!important;
  }
  body.user-mobile-ui .mobile-history-card{
    max-height:calc(100vh - 230px);
    overflow:auto;
  }
  body.user-mobile-ui .mobile-transaction-item{
    padding:16px 0;
  }
  body.user-mobile-ui .transaction-icon{
    width:48px;height:48px;border-radius:18px;
  }
  body.user-mobile-ui .sidebar.user-bottom-nav{
    bottom:26px;
    width:min(720px,calc(100% - 96px));
    border-radius:30px;
  }
  body.user-mobile-ui .sidebar.user-bottom-nav .menu-wrap{
    padding:10px;
  }
  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item{
    min-height:62px;
    font-size:.76rem;
    border-radius:24px!important;
  }
}
@media(min-width:1180px){
  body.user-mobile-ui .mobile-history-card.sticky-desktop{
    position:sticky;
    top:104px;
  }
}
@media(max-width:767.98px){
  body.user-mobile-ui .user-section-note{display:none}
}

/* =========================================================
   USER DESKTOP MODE
   - Desktop/tablet besar memakai layout web biasa: sidebar kiri,
     topbar atas, konten dashboard 2 kolom.
   - Mobile tetap memakai gaya aplikasi HP dengan bottom navigation.
   ========================================================= */
@media (min-width: 768px){
  body.user-mobile-ui{
    background:
      radial-gradient(circle at 8% 10%, rgba(246,185,75,.18), transparent 26rem),
      radial-gradient(circle at 96% 18%, rgba(184,92,47,.10), transparent 30rem),
      linear-gradient(135deg,#fffaf0 0%,#f6f7fb 48%,#fff4df 100%);
  }

  body.user-mobile-ui .app-shell{
    display:flex!important;
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    min-height:100vh!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    overflow:visible!important;
    backdrop-filter:none!important;
  }

  body.user-mobile-ui .app-content{
    width:calc(100% - var(--sidebar-width))!important;
    min-height:100vh!important;
    padding-bottom:0!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav{
    width:var(--sidebar-width)!important;
    min-height:100vh!important;
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    top:0!important;
    bottom:auto!important;
    transform:none!important;
    border-radius:0!important;
    overflow-y:auto!important;
    background:
      linear-gradient(180deg,rgba(64,26,12,.98),rgba(123,52,24,.98)),
      radial-gradient(circle at top right,rgba(246,185,75,.28),transparent 14rem)!important;
    box-shadow:18px 0 45px rgba(80,38,15,.16)!important;
    z-index:1020!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .brand-box{
    display:flex!important;
    padding:24px 22px 20px!important;
    border-bottom:1px solid rgba(255,255,255,.13)!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .menu-label{
    display:block!important;
    font-size:.72rem!important;
    text-transform:uppercase!important;
    letter-spacing:.12em!important;
    color:rgba(255,255,255,.48)!important;
    margin:10px 10px 8px!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .menu-wrap{
    display:block!important;
    padding:14px!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item{
    min-height:auto!important;
    max-width:none!important;
    width:100%!important;
    flex:none!important;
    margin-bottom:7px!important;
    border-radius:14px!important;
    padding:12px 14px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    text-align:left!important;
    font-size:.95rem!important;
    line-height:1.25!important;
    color:rgba(255,255,255,.86)!important;
    background:transparent!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item i{
    font-size:1rem!important;
    margin:0!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item span{
    font-size:inherit!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item:hover{
    background:rgba(255,255,255,.13)!important;
    transform:translateX(3px)!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .list-group-item.active{
    background:linear-gradient(135deg,rgba(246,185,75,.34),rgba(255,255,255,.13))!important;
    color:#fff!important;
    box-shadow:0 10px 25px rgba(0,0,0,.12)!important;
  }

  body.user-mobile-ui .sidebar.user-bottom-nav .logout-link{
    max-width:none!important;
    color:#ffe5da!important;
  }

  body.user-mobile-ui .topbar{
    height:72px!important;
    padding:0 28px!important;
    border-radius:0!important;
    border-bottom:1px solid rgba(234,223,207,.8)!important;
    background:rgba(255,255,255,.83)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:none!important;
  }

  body.user-mobile-ui .topbar-title{
    font-family:Georgia,"Times New Roman",serif!important;
    font-weight:800!important;
    font-size:1.25rem!important;
    color:var(--bali-brown)!important;
  }

  body.user-mobile-ui .user-pill{
    display:block!important;
  }

  body.user-mobile-ui .main-content{
    padding:28px!important;
    max-width:1280px!important;
    margin:0 auto!important;
  }

  body.user-mobile-ui .mobile-page-heading{
    margin-bottom:24px!important;
    padding:22px 24px!important;
    border-radius:26px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(234,223,207,.78)!important;
    box-shadow:0 16px 44px rgba(99,57,17,.08)!important;
  }

  body.user-mobile-ui .mobile-greeting{
    font-size:.95rem!important;
    color:var(--bali-muted)!important;
    font-weight:700!important;
  }

  body.user-mobile-ui .page-title{
    font-size:2rem!important;
  }

  body.user-mobile-ui .mobile-avatar{
    width:58px!important;
    height:58px!important;
    border-radius:18px!important;
  }

  body.user-mobile-ui .user-dashboard-grid,
  body.user-mobile-ui .user-saldo-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    gap:24px!important;
    align-items:start!important;
  }

  body.user-mobile-ui .mobile-balance-card{
    min-height:230px!important;
    border-radius:28px!important;
    padding:30px!important;
  }

  body.user-mobile-ui .mobile-balance-card h1{
    font-size:3.1rem!important;
  }

  body.user-mobile-ui .mobile-mini-card,
  body.user-mobile-ui .mobile-profile-card,
  body.user-mobile-ui .mobile-history-card,
  body.user-mobile-ui .user-section-note{
    border-radius:22px!important;
  }

  body.user-mobile-ui .mobile-history-card.sticky-desktop{
    position:sticky!important;
    top:96px!important;
  }
}

@media (max-width: 767.98px){
  body.user-mobile-ui .topbar .topbar-title,
  body.user-mobile-ui .topbar small{
    display:none;
  }
  body.user-mobile-ui .topbar{
    height:18px!important;
    padding:0!important;
  }
}

.setting-logo-preview{width:96px;height:96px;border-radius:26px;object-fit:cover;border:1px solid var(--bali-line);background:#fff;box-shadow:0 14px 30px rgba(99,57,17,.10)}
.color-preview{width:42px;height:42px;border-radius:14px;border:1px solid var(--bali-line);box-shadow:0 8px 20px rgba(99,57,17,.08)}


/* =====================================================
   FORCE MOBILE HOSTING FIX v9001
   Memakai class html.is-mobile-view dari JS, jadi tetap aktif
   walaupun media query / viewport hosting terbaca berbeda.
===================================================== */
html.is-mobile-view,
html.is-mobile-view body{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100% !important;
}
html.is-mobile-view *{box-sizing:border-box !important;}
html.is-mobile-view img,
html.is-mobile-view video,
html.is-mobile-view canvas,
html.is-mobile-view svg{max-width:100% !important;height:auto !important;}

/* Login mobile */
html.is-mobile-view body.login-page{
  min-height:100vh !important;
  width:100% !important;
  padding:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html.is-mobile-view .login-card{
  width:100% !important;
  max-width:420px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:26px !important;
}
html.is-mobile-view .login-card .page-title{font-size:1.75rem !important;line-height:1.2 !important;}
html.is-mobile-view .login-logo{width:66px !important;height:66px !important;}
html.is-mobile-view .form-control,
html.is-mobile-view .form-select,
html.is-mobile-view input,
html.is-mobile-view select,
html.is-mobile-view textarea{font-size:16px !important;max-width:100% !important;}

/* Admin / halaman umum mobile */
html.is-mobile-view body:not(.user-mobile-ui) .app-shell{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .app-content{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .sidebar{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:auto !important;
  height:auto !important;
  padding:12px !important;
  border-right:0 !important;
  border-bottom:1px solid rgba(234,223,207,.8) !important;
  box-shadow:none !important;
  overflow:visible !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .brand-box{
  padding:10px 8px 12px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .brand-title{font-size:1.05rem !important;line-height:1.2 !important;}
html.is-mobile-view body:not(.user-mobile-ui) .brand-subtitle{font-size:.78rem !important;line-height:1.35 !important;}
html.is-mobile-view body:not(.user-mobile-ui) .menu-wrap{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 4px 4px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  -webkit-overflow-scrolling:touch !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .menu-wrap::-webkit-scrollbar{display:none !important;}
html.is-mobile-view body:not(.user-mobile-ui) .menu-label{display:none !important;}
html.is-mobile-view body:not(.user-mobile-ui) .sidebar .list-group-item{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:10px 13px !important;
  margin:0 !important;
  border-radius:14px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  transform:none !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .topbar{
  position:relative !important;
  top:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:14px 16px !important;
  display:block !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .topbar-title{font-size:1.05rem !important;}
html.is-mobile-view body:not(.user-mobile-ui) .user-pill{display:none !important;}
html.is-mobile-view body:not(.user-mobile-ui) .main-content{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:16px !important;
  margin:0 !important;
  overflow-x:hidden !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .page-title{font-size:1.8rem !important;line-height:1.18 !important;}
html.is-mobile-view body:not(.user-mobile-ui) .row,
html.is-mobile-view body:not(.user-mobile-ui) .grid,
html.is-mobile-view body:not(.user-mobile-ui) .stats-grid,
html.is-mobile-view body:not(.user-mobile-ui) .dashboard-grid,
html.is-mobile-view body:not(.user-mobile-ui) .content-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .card,
html.is-mobile-view body:not(.user-mobile-ui) .stat-card,
html.is-mobile-view body:not(.user-mobile-ui) .hero-card,
html.is-mobile-view body:not(.user-mobile-ui) .content-card,
html.is-mobile-view body:not(.user-mobile-ui) .table-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .hero-card{padding:24px !important;}
html.is-mobile-view body:not(.user-mobile-ui) .hero-card h2{font-size:1.65rem !important;line-height:1.25 !important;}
html.is-mobile-view body:not(.user-mobile-ui) .d-flex.justify-content-between{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:12px !important;
}
html.is-mobile-view body:not(.user-mobile-ui) .btn{max-width:100% !important;white-space:normal !important;}
html.is-mobile-view body:not(.user-mobile-ui) .table-responsive{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  border-radius:20px !important;
}
html.is-mobile-view body:not(.user-mobile-ui) table{min-width:720px !important;}

/* Nasabah/user: tetap mobile app di HP, tetapi jangan bocor ke desktop */
@media (min-width: 993px){
  html:not(.is-mobile-view) body.user-mobile-ui .app-shell{max-width:none;box-shadow:none;display:flex!important;background:transparent;overflow:visible;}
  html:not(.is-mobile-view) body.user-mobile-ui .app-content{width:calc(100% - var(--sidebar-width));padding-bottom:0;}
}