:root{--kpj:#4da63f;--kpj-dark:#1f7a33;--kpj-soft:#eaf8e8;--kpj-mint:#f6fff5;--kpj-blue:#178fb1;--kpj-gold:#efae31;--kpj-text:#153521;--kpj-muted:#6d7b72;--kpj-border:#d9ead5;--kpj-shadow:0 16px 40px rgba(25,77,38,.12)}
*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--kpj-text);background:linear-gradient(135deg,#f7fff6 0%,#edf9ea 42%,#ffffff 100%);min-height:100vh}.kpj-shell{display:flex;min-height:100vh}.kpj-sidebar{width:282px;background:linear-gradient(180deg,#fff 0%,#f2fbef 100%);border-right:1px solid var(--kpj-border);padding:18px;position:fixed;inset:0 auto 0 0;z-index:1040;box-shadow:12px 0 28px rgba(77,166,63,.08);overflow-y:auto}.kpj-main{margin-left:282px;width:calc(100% - 282px);min-height:100vh}.brand-box{display:flex;align-items:center;gap:12px;padding:10px 8px 18px}.brand-logo{width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,var(--kpj),#7ed957);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.5px;box-shadow:0 12px 24px rgba(77,166,63,.28)}.brand-box strong{display:block;font-size:1.08rem}.brand-box small{display:block;color:var(--kpj-muted);font-size:.82rem}.package-status{background:#fff;border:1px solid var(--kpj-border);border-radius:16px;padding:10px 12px;color:var(--kpj-dark);font-weight:700;font-size:.88rem;margin-bottom:12px}.package-status .dot{width:10px;height:10px;border-radius:50%;background:var(--kpj);display:inline-block;margin-right:7px;box-shadow:0 0 0 6px rgba(77,166,63,.13)}.sidebar-nav{display:flex;flex-direction:column;gap:6px}.sidebar-nav .nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;color:#31563a;text-decoration:none;font-weight:650;position:relative}.sidebar-nav .nav-link i{width:20px;text-align:center;color:var(--kpj-dark)}.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{background:linear-gradient(135deg,var(--kpj),#7ed957);color:#fff;box-shadow:0 10px 22px rgba(77,166,63,.18)}.sidebar-nav .nav-link:hover i,.sidebar-nav .nav-link.active i{color:#fff}.sidebar-nav .nav-link.locked{opacity:.74;background:#f7faf6}.sidebar-nav .nav-link.locked em{margin-left:auto;font-style:normal}.kpj-topbar{height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;background:rgba(255,255,255,.82);border-bottom:1px solid var(--kpj-border);backdrop-filter:blur(14px);position:sticky;top:0;z-index:1000}.kpj-topbar h1{font-size:1.45rem;margin:0;font-weight:850}.kpj-topbar p{margin:2px 0 0;color:var(--kpj-muted);font-size:.92rem}.btn-white{background:#fff;border:1px solid var(--kpj-border);color:var(--kpj-text)}.kpj-content{padding:28px}.kpj-footer{padding:14px 28px;color:#6f806f;border-top:1px solid var(--kpj-border);font-size:.88rem}.card-soft{background:rgba(255,255,255,.9);border:1px solid var(--kpj-border);border-radius:22px;box-shadow:var(--kpj-shadow)}.stat-card{padding:20px;min-height:118px;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-34px;top:-34px;width:112px;height:112px;border-radius:999px;background:rgba(77,166,63,.12)}.stat-card .label{color:var(--kpj-muted);font-size:.92rem}.stat-card .value{font-size:1.8rem;font-weight:900;margin-top:8px}.stat-card .icon{width:42px;height:42px;border-radius:14px;background:var(--kpj-soft);display:flex;align-items:center;justify-content:center;color:var(--kpj-dark)}.btn-primary{background:linear-gradient(135deg,var(--kpj),#69bd56);border:0;box-shadow:0 10px 18px rgba(77,166,63,.2)}.btn-primary:hover{background:linear-gradient(135deg,var(--kpj-dark),var(--kpj))}.btn-outline-primary{border-color:var(--kpj);color:var(--kpj-dark)}.btn-outline-primary:hover{background:var(--kpj);border-color:var(--kpj)}.form-control,.form-select{border-radius:14px;border-color:#cfe4ca;padding:.66rem .86rem}.form-control:focus,.form-select:focus{border-color:var(--kpj);box-shadow:0 0 0 .22rem rgba(77,166,63,.13)}.table{vertical-align:middle}.table thead th{font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;color:#59735d;background:#f4fbf1;border-bottom:1px solid var(--kpj-border)}.table td{border-color:#edf3eb}.badge-soft-success{background:#e4f8e0;color:#1b7b2b}.badge-soft-danger{background:#fde9e8;color:#b02a37}.badge-soft-warning{background:#fff4d9;color:#916600}.badge-soft-info{background:#e3f5fb;color:#0b718d}.action-btn{border:0;background:#eef8eb;color:var(--kpj-dark);width:34px;height:34px;border-radius:11px}.action-btn:hover{background:var(--kpj);color:#fff}.locked-icon{width:72px;height:72px;border-radius:24px;background:var(--kpj-soft);color:var(--kpj-dark);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:1.6rem}.soft-modal{border:0;border-radius:24px;box-shadow:var(--kpj-shadow)}.login-body{background:radial-gradient(circle at top left,#dff8d8 0,#f7fff6 32%,#fff 100%)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:min(440px,100%);background:rgba(255,255,255,.93);border:1px solid var(--kpj-border);border-radius:30px;padding:34px}.login-brand{text-align:center;margin-bottom:24px}.login-brand h1{font-size:1.45rem;font-weight:900;margin:14px 0 6px}.login-brand p{color:var(--kpj-muted);margin:0}.detail-box{background:#f7fff5;border:1px solid var(--kpj-border);border-radius:18px;padding:16px}.small-muted{font-size:.82rem;color:var(--kpj-muted)}.member-picker{position:relative}.member-results{position:absolute;left:0;right:0;top:100%;z-index:1050;background:#fff;border:1px solid var(--kpj-border);border-radius:14px;box-shadow:var(--kpj-shadow);max-height:240px;overflow:auto;display:none}.member-results a{display:block;padding:10px 12px;text-decoration:none;color:var(--kpj-text);border-bottom:1px solid #eff5ec}.member-results a:hover{background:var(--kpj-soft)}@media(max-width:991.98px){.kpj-sidebar{transform:translateX(-105%);transition:.25s}.kpj-sidebar.show{transform:translateX(0)}.kpj-main{margin-left:0;width:100%}.kpj-content{padding:18px}.kpj-topbar{padding:14px 18px;height:auto}.kpj-topbar h1{font-size:1.15rem}.topbar-user .btn{padding:.45rem .65rem}.stat-card{min-height:100px}}

/* Patch: locked menu tetap terbaca dan popup paket tetap nyaman di mobile */
.sidebar-nav .nav-link.locked,
.sidebar-nav .nav-link.locked:focus,
.sidebar-nav .nav-link.locked.active{
  background:#f8fff7!important;
  color:#63876b!important;
  opacity:1;
  border:1px solid rgba(77,166,63,.10);
  box-shadow:none!important;
}
.sidebar-nav .nav-link.locked:hover{
  background:#eef9ec!important;
  color:#31563a!important;
  box-shadow:0 8px 18px rgba(77,166,63,.08)!important;
}
.sidebar-nav .nav-link.locked i,
.sidebar-nav .nav-link.locked:hover i,
.sidebar-nav .nav-link.locked.active i{
  color:#5ca969!important;
}
.sidebar-nav .nav-link.locked em i,
.sidebar-nav .nav-link.locked:hover em i{
  color:#4b9b56!important;
}
.sidebar-nav .nav-link.locked span{
  color:inherit!important;
}
#lockedModuleMessage{
  color:#31563a;
  font-weight:700;
  line-height:1.5;
}
#lockedModuleModal .modal-content{
  border:1px solid var(--kpj-border);
}
@media(max-width:991.98px){
  .kpj-sidebar.show{box-shadow:20px 0 42px rgba(21,53,33,.22)}
}

/* Patch v3: mobile sidebar close/backdrop + plafon/progress cards */
.sidebar-close{
  position:absolute;top:18px;right:14px;width:38px;height:38px;border:0;border-radius:14px;
  background:#eef8eb;color:#22572d;display:flex;align-items:center;justify-content:center;z-index:2;
}
.sidebar-close:hover{background:#4da63f;color:#fff}
.kpj-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(8,34,14,.42);backdrop-filter:blur(2px);z-index:1035}
.kpj-sidebar-backdrop.show{display:block}
@media(max-width:991.98px){
  .kpj-sidebar{width:min(84vw,300px)}
  .kpj-sidebar.show{transform:translateX(0);box-shadow:20px 0 42px rgba(21,53,33,.24)}
  .brand-box{padding-right:42px}
  body.sidebar-open{overflow:hidden}
}
.progress-soft{height:11px;background:#eaf6e7;border-radius:999px;overflow:hidden}
.progress-soft .bar{height:100%;background:linear-gradient(135deg,#4da63f,#7ed957);border-radius:999px;min-width:0}
.plafon-card{background:linear-gradient(135deg,#f9fff8,#ffffff);border:1px solid #cfe7c9;border-radius:22px;padding:20px;box-shadow:0 12px 28px rgba(77,166,63,.08)}
.plafon-card .title{font-weight:850;color:#113d20}.plafon-card .amount{font-size:1.55rem;font-weight:900;color:#113d20}.usage-warning{background:#fff8e9;border:1px solid #f3d397;color:#745014;border-radius:18px;padding:14px 16px}

/* Patch v6: account dropdown + profile + eligible usage UX */
.topbar-user{position:relative;z-index:1105}.topbar-user .account-menu{min-width:230px;border:1px solid var(--kpj-border);border-radius:16px;box-shadow:0 18px 42px rgba(21,53,33,.16);padding:8px}.topbar-user .account-menu.show{display:block}.topbar-user .dropdown-item{border-radius:11px;padding:9px 11px;color:#254b2e}.topbar-user .dropdown-item:hover{background:#f0faed;color:#1f7a33}.topbar-user .dropdown-item.text-danger{color:#b02a37!important}.topbar-user .dropdown-item.text-danger:hover{background:#fdeceb;color:#8a1f2a!important}.profile-card{max-width:720px}.profile-role-badge{display:inline-flex;align-items:center;gap:8px;background:#f1faef;border:1px solid var(--kpj-border);color:#1f7a33;border-radius:999px;padding:7px 12px;font-weight:700}.eligible-note{background:#eef9ec;border:1px solid #cbe8c4;color:#255a30;border-radius:16px;padding:12px 14px}.member-results .disabled-result{display:block;padding:10px 12px;color:#6d7b72;background:#fbfffa}.usage-preview-blocked{background:#fff7e8;border:1px solid #f1d397;color:#714f12;border-radius:14px;padding:12px 14px}.usage-preview-ok{background:#f6fff5;border:1px solid #cfe7c9;border-radius:14px;padding:12px 14px}

/* Patch v7: aktif menu exact match dan lock popup tetap clean */
.sidebar-nav .nav-link.active:not(.locked){
  background:linear-gradient(135deg,var(--kpj),#7ed957)!important;
  color:#fff!important;
}
.sidebar-nav .nav-link.active:not(.locked) i{color:#fff!important;}
#lockedModuleModal .modal-header .btn-close{box-shadow:none;}

/* Patch v8: Mobile Apps Installer */
.mini-stat{
  background:#f7fff5;
  border:1px solid var(--kpj-border);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mini-stat span{color:var(--kpj-muted);font-size:.82rem;}
.mini-stat strong{color:var(--kpj-text);font-size:1rem;line-height:1.35;}
.mini-stat small{color:var(--kpj-muted);font-size:.8rem;}

/* Patch v9: KPJ Card icon, favicon, and mobile-ready identity */
.brand-logo-img{background:#063f25!important;padding:3px;overflow:hidden;box-shadow:0 12px 26px rgba(6,63,37,.18)}
.brand-logo-img img{width:100%;height:100%;object-fit:cover;border-radius:17px;display:block}
.login-brand .brand-logo-img{width:84px;height:84px;border-radius:26px;margin-bottom:8px}
.login-brand .brand-logo-img img{border-radius:23px}
.login-brand h2{font-size:.98rem;font-weight:800;color:#1f7a33;margin:-1px 0 9px;letter-spacing:.02em}
.mobile-preview-card{background:linear-gradient(135deg,#073f26 0%,#0e5b38 52%,#f7fff5 52%,#fff 100%);border:1px solid var(--kpj-border);border-radius:22px;overflow:hidden;box-shadow:var(--kpj-shadow)}
.mobile-preview-card img{width:100%;height:auto;display:block}
.mobile-preview-caption{padding:14px 16px;background:#fff;color:var(--kpj-text)}
.mobile-preview-caption strong{display:block;font-weight:900}.mobile-preview-caption span{display:block;color:var(--kpj-muted);font-size:.86rem;margin-top:2px}