:root{--kemkes:#00a86b;--kemkes-dark:#087f5b;--kemkes-soft:#e8f8f1;--kemkes-pale:#f5fcf9;--ink:#153a30;--muted:#668077;--line:#d9ebe4;--white:#fff;--danger:#c84d55;--warning:#b77a17;--shadow:0 14px 40px rgba(17,91,67,.09);--shadow2:0 5px 18px rgba(17,91,67,.07);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 15% -5%,#dff7eb 0,transparent 30%),linear-gradient(180deg,#f3fbf7 0,#f8fbfa 45%,#f1f7f4 100%);color:var(--ink);min-height:100vh;animation:pageIn .45s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
header{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--kemkes-dark);padding:13px 4%;display:flex;justify-content:space-between;align-items:center;gap:18px;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(207,233,222,.85);box-shadow:0 4px 22px rgba(23,83,63,.06)}
.brand{font-size:22px;font-weight:900;letter-spacing:.2px;display:flex;align-items:center;gap:9px}.brand:before{content:'✦';display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#08b978,#087f5b);color:white;box-shadow:0 6px 16px rgba(0,168,107,.25);animation:float 3s ease-in-out infinite}.brand small{display:block;font-size:10px;font-weight:700;color:#668077;letter-spacing:.3px}nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}nav a,.user{color:var(--kemkes-dark);text-decoration:none;padding:9px 12px;border-radius:12px;transition:.2s ease}nav a:hover{background:#e6f7ef;transform:translateY(-1px)}.user{font-size:12px;background:#f0f8f4;font-weight:700}
main{max-width:1400px;margin:26px auto;padding:0 18px;min-height:calc(100vh - 235px)}h1{font-size:clamp(27px,4vw,38px);margin:0 0 8px;letter-spacing:-.8px}h2{margin-top:0}p{line-height:1.6}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px}.card{background:rgba(255,255,255,.92);border-radius:var(--radius);padding:19px;box-shadow:var(--shadow2);border:1px solid rgba(217,235,228,.95);transition:transform .22s ease,box-shadow .22s ease}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.metric{font-size:31px;font-weight:900;margin-top:8px;color:var(--kemkes-dark)}.muted{color:var(--muted)}
.table-wrap{overflow:auto;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow2)}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:12px 13px;border-bottom:1px solid #edf4f1;text-align:left;vertical-align:top}th{background:#effaf5;color:#41665a;font-size:12px;position:sticky;top:0}tbody tr{transition:.18s}tbody tr:hover{background:#f7fcfa}
.badge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.15px}.badge.ok{background:#dff5e9;color:#176b4c}.badge.warn{background:#fff3d6;color:#8a6114}.badge.danger{background:#fbe3e3;color:#963c3c}.badge.muted{background:#e8efec;color:#536a61}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:linear-gradient(135deg,#08b978,#00a86b);color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;cursor:pointer;box-shadow:0 5px 14px rgba(0,168,107,.18);transition:.2s ease;font-weight:750}.btn:hover{background:linear-gradient(135deg,#00a86b,#087f5b);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,168,107,.22)}.btn:active{transform:scale(.97)}.btn.secondary{background:#71847d}.btn.danger{background:var(--danger)}.actions{display:flex;gap:9px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.field label{display:block;font-weight:750;font-size:12px;margin-bottom:6px;color:#36594e}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #c9ded6;border-radius:12px;background:#fff;color:var(--ink);outline:none;transition:.2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#73c8a7;box-shadow:0 0 0 4px rgba(0,168,107,.09);transform:translateY(-1px)}.field textarea{min-height:90px}.alert{padding:14px;border-radius:15px;background:#fff8e8;border:1px solid #f0d99d;margin-bottom:15px}.login{max-width:430px;margin:9vh auto}.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.check{padding:13px;border-radius:15px;background:#f7fcfa;border:1px solid var(--line);transition:.2s}.check:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}.oktxt{color:#18764f;font-weight:800}.badtxt{color:#a83e3e;font-weight:800}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffffff 0,#edfaf4 100%);border:1px solid #d8ece4;border-radius:28px;padding:24px;box-shadow:var(--shadow);margin-bottom:17px}.hero:after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-100px;background:rgba(0,168,107,.09);animation:float 4s ease-in-out infinite}.hero-kicker{font-size:11px;font-weight:900;letter-spacing:1.2px;color:var(--kemkes);text-transform:uppercase}.stat-card{position:relative;overflow:hidden}.stat-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#e9f8f1;font-size:20px;margin-bottom:9px}.progress{height:9px;background:#e7f1ed;border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#00a86b,#49c995);transition:width .8s ease}.countdown{font-size:13px;font-weight:800;color:var(--kemkes-dark)}
footer{text-align:center;color:#61776f;padding:30px 18px 38px;font-size:12px;line-height:1.8;border-top:1px solid var(--line);background:rgba(234,248,242,.65)}footer .footer-brand{font-size:13px;font-weight:900;color:var(--kemkes-dark);letter-spacing:.2px}footer .footer-line{display:block}footer .footer-credit{color:#71857e}
.mobile-nav{display:none}.fade-up{animation:fadeUp .55s ease both}.delay-1{animation-delay:.06s}.delay-2{animation-delay:.12s}.delay-3{animation-delay:.18s}@keyframes fadeUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:800px){body{padding-bottom:72px}header{padding:11px 14px;position:sticky}nav{display:none}main{margin:17px auto;padding:0 13px}.card{border-radius:19px;padding:16px}.hero{border-radius:22px;padding:19px}.metric{font-size:27px}.mobile-nav{display:flex;position:fixed;bottom:10px;left:10px;right:10px;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border:1px solid #d9ebe4;border-radius:20px;padding:7px;box-shadow:0 12px 35px rgba(17,91,67,.18);justify-content:space-around}.mobile-nav a{flex:1;text-align:center;text-decoration:none;color:#648078;font-size:10px;font-weight:800;padding:7px 3px;border-radius:14px}.mobile-nav a.active,.mobile-nav a:hover{background:#e7f8f0;color:var(--kemkes-dark)}.mobile-nav b{display:block;font-size:18px;line-height:20px;margin-bottom:2px}.table-wrap{border-radius:14px}.form-grid{grid-template-columns:1fr}}

/* SDMDIGI V8 — BBPK authentication & role-aware mobile experience */
.brand-link{text-decoration:none;color:inherit}.brand small{margin-left:2px}.user small{font-size:9px;opacity:.7;margin-left:3px}
.auth-page{min-height:100vh;display:flex;flex-direction:column;background:#0a5f4c;position:relative;overflow-x:hidden}.auth-bg{position:fixed;inset:0;background:linear-gradient(120deg,rgba(3,86,68,.86),rgba(0,168,107,.46)),url('images/bbpk-bg.jpg') center/cover no-repeat;transform:scale(1.04);filter:saturate(.9);z-index:0}.auth-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.28),transparent 25%),linear-gradient(180deg,rgba(2,63,51,.05),rgba(2,63,51,.48))}.auth-shell{position:relative;z-index:1;flex:1;width:100%;display:grid;place-items:center;padding:34px 18px}.auth-card{width:min(430px,100%);padding:27px;border-radius:30px;background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.72);box-shadow:0 30px 90px rgba(0,35,29,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:authIn .65s cubic-bezier(.2,.8,.2,1) both}@keyframes authIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}.auth-logo{height:72px;display:flex;justify-content:center;align-items:center;margin-bottom:10px}.auth-logo img{max-height:70px;max-width:230px;width:auto;height:auto;object-fit:contain}.auth-brand{text-align:center;font-size:31px;font-weight:950;letter-spacing:-1px;color:var(--kemkes-dark)}.auth-subtitle{text-align:center;color:var(--muted);font-size:12px;margin:5px 0 18px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#edf8f3;border-radius:15px;margin-bottom:18px}.auth-tabs a{text-align:center;text-decoration:none;color:#668077;padding:10px;border-radius:11px;font-weight:850;font-size:13px;transition:.2s}.auth-tabs a.active{background:#fff;color:var(--kemkes-dark);box-shadow:0 5px 14px rgba(17,91,67,.1)}.auth-card .field{margin-bottom:12px}.auth-card .field input{padding:13px;border-radius:14px}.auth-btn{width:100%;padding:13px 16px;margin-top:4px;border-radius:14px;font-size:14px}.auth-note{text-align:center;color:#81958e;font-size:10px;line-height:1.6;margin-top:15px}.success-box{padding:14px;border-radius:16px;background:#e8f8f1;border:1px solid #bfe6d5;color:#286b55;font-size:12px;line-height:1.55}.success-box .btn{margin-top:2px}.auth-footer{position:relative;z-index:1;background:rgba(0,47,38,.5);color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.18);padding:14px 16px 17px;font-size:10px;line-height:1.7}.auth-footer span{display:block}.auth-footer span:first-child{font-weight:900;color:#fff}
.role-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:17px;background:linear-gradient(135deg,#eaf9f3,#fff);border:1px solid var(--line);margin-bottom:15px}.role-avatar{width:43px;height:43px;border-radius:14px;background:#dff5e9;display:grid;place-items:center;font-size:20px}.mini-link{font-size:11px;font-weight:800;color:var(--kemkes-dark);text-decoration:none}.doc-status{font-size:10px;font-weight:850;padding:5px 9px;border-radius:999px}.doc-status.Valid{background:#dff5e9;color:#176b4c}.doc-status.Menunggu{background:#fff3d6;color:#8a6114}.doc-status.Perbaikan{background:#fbe3e3;color:#963c3c}.timeline{position:relative;padding-left:22px}.timeline:before{content:'';position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:#d9ebe4}.timeline-item{position:relative;padding:0 0 17px}.timeline-item:before{content:'';position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:#00a86b;box-shadow:0 0 0 4px #e2f6ed}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.quick{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);padding:14px;border-radius:18px;box-shadow:var(--shadow2);transition:.2s}.quick:hover{transform:translateY(-3px);border-color:#9bd7bf}.quick b{font-size:21px}.quick span{font-size:11px;font-weight:800;color:#577168}.notice{padding:13px 14px;border-radius:16px;background:#f7fcfa;border-left:4px solid var(--kemkes);font-size:12px}.danger-note{border-left-color:#c84d55;background:#fff8f8}.warning-note{border-left-color:#b77a17;background:#fffaf0}
@media(max-width:800px){.quick-grid{grid-template-columns:repeat(2,1fr)}.auth-card{padding:22px;border-radius:25px}.auth-shell{padding:20px 13px}.auth-footer{padding-bottom:24px}.auth-logo{height:63px}.auth-logo img{max-height:62px;max-width:205px}}

/* SDMDIGI V9 — BBPK header & PWA */
.brand{position:relative;min-width:235px;height:48px;display:flex;align-items:center;gap:9px}
.brand:before{display:none!important}
.brand img{width:142px;height:auto;max-height:46px;object-fit:contain;object-position:left center;flex:0 0 auto}
.brand>span{font-size:21px;font-weight:950;letter-spacing:-.7px;color:var(--kemkes-dark);white-space:nowrap}
.brand small{position:absolute;left:151px;bottom:0;font-size:8px;line-height:1;font-weight:750;color:#668077;letter-spacing:.1px;white-space:nowrap}
.pwa-install{position:fixed;right:18px;bottom:18px;z-index:120;border:0;border-radius:999px;padding:12px 17px;background:linear-gradient(135deg,#00a86b,#087f5b);color:#fff;font:800 12px/1 system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,91,66,.28);cursor:pointer;animation:pwaPop .35s ease both}
@keyframes pwaPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:800px){.brand{min-width:0;height:44px;gap:7px}.brand img{width:108px;max-height:40px}.brand>span{font-size:19px}.brand small{display:none}.pwa-install{right:14px;bottom:84px}}

/* SDMDIGI V10 — mobile layout, fixed navigation & minimalist cards */
html,body{max-width:100%;overflow-x:hidden}
body{animation:pageInSoft .35s ease both}
@keyframes pageInSoft{from{opacity:.94}to{opacity:1}}
body.page-leave{animation:none}
body.page-leave main{animation:pageLeaveSoft .16s ease both}
@keyframes pageLeaveSoft{from{opacity:1}to{opacity:.72}}

.app-header{min-height:68px}
.brand{min-width:0;height:44px;gap:8px}
.brand img{width:132px;max-height:42px}
.brand>span{font-size:20px}
.profile-menu{position:relative;margin-left:4px}
.profile-menu summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 7px 4px 4px;border-radius:14px;background:#f2f8f5;border:1px solid #deeee8;color:var(--ink)}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#08b978,#087f5b);color:#fff;font-size:11px;font-weight:900;box-shadow:0 4px 12px rgba(0,168,107,.18)}
.profile-text{display:flex;flex-direction:column;min-width:0;max-width:145px;text-align:left;line-height:1.1}
.profile-text b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-text small{font-size:8px;color:#70857d;font-weight:800;margin-top:3px}
.profile-chevron{font-size:14px;color:#668077;line-height:1}
.profile-popover{position:absolute;right:0;top:calc(100% + 9px);width:210px;padding:8px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(17,91,67,.16);z-index:90}
.profile-popover-name{font-size:12px;font-weight:900;padding:8px 9px 1px;color:var(--ink)}
.profile-popover-role{font-size:9px;color:var(--muted);padding:0 9px 8px}
.profile-popover a{display:block;text-decoration:none;color:var(--ink);font-size:11px;font-weight:750;padding:10px 9px;border-radius:10px}
.profile-popover a:hover{background:#eef8f4;color:var(--kemkes-dark)}

/* Minimal professional cards */
.card{border-radius:15px;padding:16px;background:#fff;box-shadow:0 3px 12px rgba(17,91,67,.055);border:1px solid #e3eee9}
.card:hover{transform:none;box-shadow:0 5px 16px rgba(17,91,67,.08)}
.stat-card{padding:15px}
.stat-icon{width:36px;height:36px;border-radius:10px;font-size:17px;margin-bottom:7px}
.metric{font-size:28px;margin-top:5px}
.quick{border-radius:14px;padding:12px;box-shadow:none;border:1px solid #e1ece8}
.quick:hover{transform:none;box-shadow:0 4px 13px rgba(17,91,67,.07)}
.hero{border-radius:18px;padding:18px;box-shadow:0 5px 18px rgba(17,91,67,.06)}
.role-banner{border-radius:14px;box-shadow:none}
.table-wrap{box-shadow:0 3px 12px rgba(17,91,67,.045)}

@media(max-width:800px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom));min-height:100dvh}
  .app-header{padding:8px 11px;position:sticky;top:0;z-index:150;min-height:60px}
  .brand{height:42px;gap:6px}
  .brand img{width:101px;max-height:38px}
  .brand>span{font-size:18px;letter-spacing:-.6px}
  .profile-menu{margin-left:auto}
  .profile-text{display:none}
  .profile-menu summary{padding:4px;border-radius:12px;background:#fff;border-color:#e0ece7}
  .profile-avatar{width:34px;height:34px}
  .profile-chevron{display:none}
  .profile-popover{position:fixed;right:11px;top:57px;width:min(225px,calc(100vw - 22px))}
  main{width:100%;max-width:100%;margin:14px auto;padding:0 11px;min-height:calc(100dvh - 150px);overflow:visible}
  h1{font-size:25px;letter-spacing:-.5px}
  h2{font-size:19px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card{min-width:0;border-radius:14px;padding:13px}
  .stat-card{padding:12px}
  .metric{font-size:24px;word-break:break-word}
  .hero{padding:15px;border-radius:16px}
  .quick-grid{gap:8px}
  .quick{min-width:0;padding:11px;border-radius:12px}
  .quick b{font-size:18px}
  .quick span{font-size:10px}
  .mobile-nav{position:fixed!important;left:9px;right:9px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:9999;margin:0!important;transform:none!important;width:auto;max-width:none;border-radius:17px;padding:6px;box-shadow:0 9px 28px rgba(17,91,67,.16);will-change:transform}
  .mobile-nav a{min-width:0;overflow:hidden;white-space:nowrap;padding:6px 2px}
  .mobile-nav b{font-size:17px}
  footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .form-grid{gap:10px}
  .field input,.field select,.field textarea{font-size:16px}
}