:root{--green:#08644b;--green2:#064130;--gold:#e6b82e;--ink:#15382d;--muted:#687b74;--line:#dbe7e2;--bg:#f3f7f5;--white:#fff;--danger:#b42318;--blue:#2563a9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;padding:.58rem 1rem;border-radius:9px;border:1px solid transparent;text-decoration:none;font-weight:750;cursor:pointer}.btn.primary{background:var(--green);color:#fff}.btn.gold{background:var(--gold);color:#183b30}.btn.outline{border-color:#9ebcb0;background:#fff;color:var(--green)}.btn.danger{background:#fff1f0;border-color:#efc6c2;color:var(--danger)}.btn.secondary{background:#e8f3ee;color:var(--green)}.btn.small{min-height:33px;padding:.35rem .65rem;font-size:.82rem}.btn.full{width:100%}.landing-nav{height:82px;padding:0 max(5vw,28px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.landing-brand,.login-brand,.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}.landing-brand img,.login-brand img,.brand img{width:52px;height:52px;object-fit:contain;border-radius:50%;background:#fff}.landing-brand b,.landing-brand small,.login-brand b,.login-brand small,.brand b,.brand small{display:block}.landing-brand small,.login-brand small,.brand small{font-size:.72rem;color:var(--muted)}.landing-nav nav{display:flex;gap:1.5rem}.landing-nav nav a{text-decoration:none;font-weight:700;font-size:.9rem}.hero{min-height:570px;padding:72px max(5vw,28px);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:3.5rem;background:radial-gradient(circle at 8% 10%,#dff1e8,transparent 34%),linear-gradient(120deg,#f8fbfa,#edf6f2)}.eyebrow{display:inline-flex;color:#966600;background:#fff4d1;border-radius:999px;padding:.42rem .68rem;font-size:.7rem;font-weight:850;letter-spacing:.09em}.hero h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.06;letter-spacing:-.04em;margin:1rem 0}.hero h1 em{font-style:normal;color:#b97f08}.hero>div>p{font-size:1.1rem;color:#536b62;max-width:680px}.hero-actions{display:flex;gap:.75rem;margin:1.7rem 0}.hero-points{display:flex;gap:1.1rem;flex-wrap:wrap;color:#315c4e;font-size:.85rem;font-weight:700}.preview{background:#182e27;border:9px solid #1d2824;border-radius:22px;box-shadow:0 30px 55px #0a382b32;overflow:hidden;transform:perspective(900px) rotateY(-4deg)}.preview-top{height:34px;background:#eef4f1;display:flex;align-items:center;gap:6px;padding:0 11px}.preview-top i{width:8px;height:8px;border-radius:50%;background:#bfd0c9}.preview-top b{font-size:.7rem;margin-left:.4rem;color:#456158}.preview-body{display:grid;grid-template-columns:125px 1fr;min-height:330px;background:#f4f8f6}.preview-body aside{background:#07513e;color:#dff0e9;display:flex;flex-direction:column;gap:15px;padding:18px 14px;font-size:.7rem}.preview-body aside img{width:38px;height:38px;border-radius:50%}.preview-body>div{padding:25px}.preview-body h3{margin:0;color:var(--green);font-size:1.4rem}.preview-body p{margin:.2rem 0 1rem;color:#73857e;font-size:.75rem}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.preview-stats span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.75rem;font-size:.65rem}.preview-stats b{display:block;font-size:1.4rem;color:var(--green)}.bars{height:135px;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:flex-end;gap:.5rem;padding:17px}.bars i{flex:1;background:linear-gradient(#48bd8b,#0b7b58);border-radius:4px 4px 0 0}.metrics{padding:0 max(5vw,28px);display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;transform:translateY(-24px)}.metrics article,.cards article,.steps article,.criteria article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem}.metrics b,.metrics span{display:block}.metrics b{font-size:1.6rem;color:var(--green)}.metrics span{color:var(--muted);font-size:.85rem}.section{padding:72px max(5vw,28px)}.section.alt{background:#eaf3ef}.section header h2{font-size:2.2rem;margin:.6rem 0 1.7rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.cards article>b{width:42px;height:42px;border-radius:50%;background:#e0f2ea;display:grid;place-items:center;color:var(--green)}.cards h3{margin:.8rem 0 .3rem}.cards p,.steps p{color:var(--muted);font-size:.85rem}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}.steps article{position:relative}.steps article>b{position:absolute;top:-10px;left:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff}.criteria{display:grid;grid-template-columns:repeat(8,1fr);gap:.75rem}.criteria article{text-align:center}.criteria b,.criteria span{display:block}.criteria b{color:var(--green)}.criteria span{font-size:.78rem;margin-top:.3rem}.cta{display:flex;align-items:center;gap:1.2rem;padding:34px max(5vw,28px);background:linear-gradient(105deg,#07513e,#0b7656);color:#fff}.cta img{width:58px;height:58px;border-radius:50%}.cta h2,.cta p{margin:0}.cta p{color:#d4e9e1}.cta .btn{margin-left:auto}.landing footer{padding:1.5rem max(5vw,28px);background:#043c2e;color:#cbe0d8}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#dcefe7,transparent 35%),linear-gradient(135deg,#f4faf7,#e8f3ee);padding:1rem}.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;box-shadow:0 25px 70px #073f3128}.login-brand{justify-content:center}.login-card h1{text-align:center;margin:1.5rem 0 .25rem}.login-card>p{text-align:center;color:var(--muted);margin-top:0}.stack{display:grid;gap:1rem}.stack label,.field{display:grid;gap:.4rem;font-weight:700;font-size:.9rem}input,select,textarea{width:100%;border:1px solid #bed2ca;border-radius:8px;padding:.62rem .72rem;background:#fff;color:var(--ink)}textarea{min-height:92px;resize:vertical}.back{display:block;text-align:center;margin-top:1.2rem;color:var(--green);font-size:.88rem}.alert{padding:.75rem 1rem;border-radius:9px;margin:1rem 0}.alert.danger{background:#fff0ef;color:#92251b;border:1px solid #efc6c2}.alert.warning{background:#fff7dc;color:#7a5900;border:1px solid #edd88a}.alert.success{background:#e7f7ef;color:#086444;border:1px solid #bce5cf}.sidebar{position:fixed;inset:0 auto 0 0;width:258px;background:linear-gradient(#0b5e48,#063d2f);color:#fff;display:flex;flex-direction:column;z-index:30}.brand{height:82px;padding:14px 16px;border-bottom:1px solid #ffffff22}.brand small{color:#cce5db}.side-nav{display:grid;gap:.25rem;padding:1rem .65rem}.side-nav a{display:flex;align-items:center;gap:.7rem;padding:.72rem .8rem;border-radius:9px;text-decoration:none;color:#dceee7;font-size:.9rem}.side-nav a.active,.side-nav a:hover{background:#ffffff1e;color:#fff}.side-foot{margin-top:auto;background:#052f25;padding:1rem;font-size:.8rem}.app-main{margin-left:258px;min-height:100vh}.topbar{height:78px;padding:0 1.4rem;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:15}.topbar h1{font-size:1.15rem;margin:0}.topbar p{font-size:.75rem;color:var(--muted);margin:.1rem 0}.account{display:flex;align-items:center;gap:.8rem}.avatar{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:850}.account span{display:block;font-size:.75rem;color:var(--muted)}.content{padding:1.4rem;max-width:1580px;margin:auto}.welcome{border-radius:18px;padding:1.6rem 1.8rem;background:linear-gradient(115deg,#0b664c,#13916a);color:#fff;display:flex;justify-content:space-between}.welcome h2{font-size:1.7rem;margin:.3rem 0}.welcome p{margin:0;color:#daf1e8}.filterbar,.toolbar{display:flex;gap:.8rem;align-items:end;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem;margin:1rem 0}.filterbar label{min-width:180px}.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem}.stat{display:flex;align-items:center;gap:.9rem}.stat i{width:48px;height:48px;border-radius:14px;background:#e4f5ed;color:var(--green);display:grid;place-items:center;font-style:normal;font-size:1.4rem}.stat span,.stat b{display:block}.stat span{font-size:.78rem;color:var(--muted)}.stat b{font-size:1.7rem}.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.page-head h2{margin:0;font-size:1.65rem}.page-head p{margin:.2rem 0;color:var(--muted)}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}table{border-collapse:collapse;width:100%;min-width:850px}th,td{padding:.78rem .85rem;border-bottom:1px solid #e6eeea;text-align:left;vertical-align:top;font-size:.86rem}th{background:#edf5f1;color:#31574a;white-space:nowrap}td small{display:block;color:var(--muted)}.pill{display:inline-flex;border-radius:999px;padding:.26rem .5rem;background:#eef2f0;font-size:.7rem;font-weight:800}.pill.TERVALIDASI,.pill.active{background:#dff5ea;color:#08734e}.pill.SIAP_REVIEW{background:#fff0c8;color:#936200}.pill.REVISI{background:#fee9e9;color:#b52d2d}.actions{display:flex;gap:.35rem;flex-wrap:wrap}.modal{display:none;position:fixed;inset:0;background:#06281fbd;z-index:60;padding:1rem;align-items:center;justify-content:center}.modal.open{display:flex}.modal-box{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:1.35rem;box-shadow:0 30px 80px #0005}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-close{border:0;background:none;font-size:1.6rem;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.field.full{grid-column:1/-1}.pagination{display:flex;gap:.4rem;justify-content:flex-end;padding:1rem}.pagination a{text-decoration:none;padding:.4rem .7rem;border:1px solid var(--line);border-radius:7px;background:#fff}.pagination a.active{background:var(--green);color:#fff}.menu-toggle{display:none}.empty{padding:2.5rem;text-align:center;color:var(--muted)}@media(max-width:1000px){.cards,.metrics,.grid-stats{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.criteria{grid-template-columns:repeat(4,1fr)}.hero{grid-template-columns:1fr}.preview{transform:none}}@media(max-width:760px){.landing-nav nav{display:none}.hero{padding:45px 16px}.hero-actions{flex-direction:column}.metrics,.cards,.steps,.grid-stats{grid-template-columns:1fr}.criteria{grid-template-columns:repeat(2,1fr)}.section{padding:52px 16px}.cta{align-items:flex-start;flex-wrap:wrap;padding:28px 16px}.cta .btn{margin-left:0}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.app-main{margin-left:0}.menu-toggle{display:inline-flex}.content{padding:.9rem}.account>div:not(.avatar){display:none}.welcome h2{font-size:1.35rem}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.page-head{align-items:flex-start;flex-direction:column}.filterbar>*{width:100%}.filterbar .btn{width:100%}}
@media print{.sidebar,.topbar,.filterbar,.toolbar,.btn,.actions{display:none!important}.app-main{margin:0}.content{padding:0}.card,.table-wrap{border:0}body{background:#fff}}

/* DKPS UI v8: accordion sidebar + vivid dashboard menu cards */
.side-nav{display:block;padding:.8rem .65rem;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.nav-group{margin:.35rem 0;border:1px solid #ffffff12;border-radius:12px;overflow:hidden;background:#ffffff08}.nav-group-toggle{width:100%;border:0;background:transparent;color:#fff;padding:.78rem .8rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:inherit;font-size:.78rem;font-weight:850;letter-spacing:.035em;text-align:left}.nav-group-toggle:hover{background:#ffffff12}.nav-group-title{display:flex;align-items:center;gap:.6rem}.nav-group-title i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#ffffff18}.nav-chevron{font-size:1.1rem;transition:transform .22s ease}.nav-group.is-open .nav-chevron{transform:rotate(180deg)}.nav-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}.nav-submenu>*{overflow:hidden}.nav-group.is-open .nav-submenu{grid-template-rows:1fr}.nav-submenu:before{content:"";min-height:0}.nav-submenu a{margin:.12rem .4rem;padding:.66rem .7rem!important;border-radius:8px!important;font-size:.86rem!important}.nav-submenu a:last-child{margin-bottom:.5rem}.nav-badge{margin-left:auto;min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ffd85c;color:#173b31;font-size:.72rem}.menu-card-grid{align-items:stretch}.menu-card{position:relative;overflow:hidden;min-height:220px;border:0!important;color:#fff!important;padding:1.35rem!important;box-shadow:0 12px 30px #15382d18;transition:transform .22s ease,box-shadow .22s ease}.menu-card:after{content:"";position:absolute;width:145px;height:145px;border-radius:50%;right:-45px;top:-55px;background:#ffffff20}.menu-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px #15382d2b}.menu-card h3{font-size:1.15rem;margin:.8rem 0 .35rem;position:relative;z-index:1}.menu-card p{color:#fff!important;opacity:.93;margin:.2rem 0 1.1rem;position:relative;z-index:1}.menu-card-icon{width:48px;height:48px;border-radius:14px;background:#ffffff2b;display:grid;place-items:center;font-size:1.45rem;font-weight:900;position:relative;z-index:1}.menu-card-link{display:inline-flex;margin-top:auto;color:#fff!important;text-decoration:none;font-weight:850;border-bottom:1px solid #ffffff88;position:relative;z-index:2}.mc-blue{background:linear-gradient(135deg,#1677ff,#38a7ff)!important}.mc-purple{background:linear-gradient(135deg,#7c3aed,#a855f7)!important}.mc-orange{background:linear-gradient(135deg,#f97316,#fbbf24)!important}.mc-pink{background:linear-gradient(135deg,#e83e8c,#fb7185)!important}.mc-teal{background:linear-gradient(135deg,#0d9488,#2dd4bf)!important}.mc-indigo{background:linear-gradient(135deg,#4f46e5,#818cf8)!important}.mc-red{background:linear-gradient(135deg,#dc2626,#fb7185)!important}.mc-green{background:linear-gradient(135deg,#16a34a,#4ade80)!important}
/* v9 fallback: native details dropdown */
.nav-details:not([open]) .nav-submenu{display:none!important}.nav-details[open] .nav-submenu{display:block!important}

/* DKPS Dashboard Modern v10 */
.v10-stat{color:#fff!important;border:0!important;overflow:hidden;position:relative;min-height:132px;box-shadow:0 12px 30px rgba(15,23,42,.10)!important}
.v10-stat:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12);right:-28px;top:-35px}
.v10-stat i{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)}
.v10-stat span,.v10-stat b,.v10-stat small{color:#fff!important}.v10-stat small{display:block;opacity:.82;margin-top:3px}
.v10-stat b{font-size:2rem!important}.v10-blue{background:linear-gradient(135deg,#1687ff,#075bd8)!important}.v10-green{background:linear-gradient(135deg,#18b981,#087a58)!important}.v10-orange{background:linear-gradient(135deg,#ff9d2e,#f05b24)!important}.v10-purple{background:linear-gradient(135deg,#8b5cf6,#5b21b6)!important}
.v10-stat:hover,.menu-card:hover,.v10-program-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(15,23,42,.16)!important;transition:.22s ease}
.v10-program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.v10-program-card{padding:22px!important;border:0!important;position:relative;overflow:hidden}.v10-program-card.pai{background:linear-gradient(145deg,#ecfdf5,#fff)!important;border-top:5px solid #10b981!important}.v10-program-card.pgmi{background:linear-gradient(145deg,#eff6ff,#fff)!important;border-top:5px solid #3b82f6!important}
.v10-program-head{display:flex;align-items:center;justify-content:space-between}.v10-program-head span{font-size:.72rem;letter-spacing:.08em;opacity:.65}.v10-program-head h3{font-size:1.55rem;margin:3px 0 0}.v10-program-head strong{font-size:2rem}
.v10-progress{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin:16px 0}.v10-progress span{display:block;height:100%;background:linear-gradient(90deg,#10b981,#22c55e);border-radius:99px}.pgmi .v10-progress span{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
.v10-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.v10-mini-grid div{text-align:center;background:rgba(255,255,255,.78);border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:10px 5px}.v10-mini-grid b{display:block;font-size:1.1rem}.v10-mini-grid span{font-size:.75rem;opacity:.68}
@media(max-width:800px){.v10-program-grid{grid-template-columns:1fr}.v10-mini-grid{grid-template-columns:repeat(2,1fr)}}