:root {
  --phbs-primary:#0f766e;
  --phbs-primary-dark:#0b5f59;
  --phbs-primary-soft:#e5f7f3;
  --phbs-accent:#f2b84b;
  --phbs-danger:#c94f5b;
  --phbs-warning:#d58b20;
  --phbs-success:#2d8a5b;
  --phbs-ink:#173b38;
  --phbs-text:#355552;
  --phbs-muted:#738783;
  --phbs-bg:#f3f8f7;
  --phbs-card:#ffffff;
  --phbs-border:#d8e6e3;
  --phbs-shadow:0 16px 45px rgba(23,59,56,.09);
  --phbs-radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--phbs-text);background:var(--phbs-bg);font-size:15px}
a{color:var(--phbs-primary)}
img{max-width:100%}
.btn{min-height:44px;border-radius:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-sm{min-height:36px;border-radius:11px}
.btn-phbs{color:#fff;background:linear-gradient(135deg,var(--phbs-primary),#14a39a);border:0;box-shadow:0 10px 24px rgba(15,118,110,.2)}
.btn-phbs:hover,.btn-phbs:focus{color:#fff;background:linear-gradient(135deg,var(--phbs-primary-dark),var(--phbs-primary))}
.btn-soft{color:var(--phbs-primary-dark);background:var(--phbs-primary-soft);border:1px solid #c7e9e3}
.btn-soft:hover{color:var(--phbs-primary-dark);background:#d8f2ed}
.form-control,.form-select{min-height:50px;border-radius:14px;border-color:#cfdeda;padding:.75rem .9rem;color:var(--phbs-ink);box-shadow:none}
textarea.form-control{min-height:110px}
.form-control:focus,.form-select:focus{border-color:#61bdb3;box-shadow:0 0 0 .25rem rgba(15,118,110,.12)}
.form-label{font-weight:750;color:#294a46;margin-bottom:.45rem}
.form-text{color:var(--phbs-muted)}
.required{color:var(--phbs-danger)}
.alert{border:0;border-radius:16px}
.badge{font-weight:750;border-radius:999px;padding:.45rem .65rem}
.text-phbs{color:var(--phbs-primary)!important}
.bg-phbs-soft{background:var(--phbs-primary-soft)!important}

/* Public */
.public-body{min-height:100vh;background:radial-gradient(circle at 12% 6%,rgba(20,163,154,.12),transparent 26%),radial-gradient(circle at 90% 18%,rgba(242,184,75,.13),transparent 24%),var(--phbs-bg)}
.public-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(216,230,227,.85)}
.public-nav-inner{width:min(100% - 2rem,1120px);margin:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.public-brand{display:flex;align-items:center;gap:.8rem;color:var(--phbs-ink);text-decoration:none}
.public-brand-mark{width:45px;height:45px;border-radius:15px;background:linear-gradient(135deg,var(--phbs-primary),#22b8aa);color:#fff;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 9px 22px rgba(15,118,110,.2)}
.public-brand strong{display:block;font-size:1rem}.public-brand small{display:block;color:var(--phbs-muted);font-size:.72rem}
.public-shell{width:min(100% - 2rem,940px);margin:0 auto;padding:2.1rem 0 6rem}
.public-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;align-items:center;margin-bottom:1.5rem}
.public-hero-copy{padding:1rem 0}.public-kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:999px;background:var(--phbs-primary-soft);color:var(--phbs-primary-dark);font-weight:750;font-size:.78rem}
.public-hero h1{margin:.9rem 0 .6rem;font-size:clamp(2rem,5vw,3.3rem);line-height:1.08;color:var(--phbs-ink);letter-spacing:-.04em;font-weight:850}
.public-hero p{max-width:620px;font-size:1rem;line-height:1.7;color:var(--phbs-muted)}
.public-illustration{position:relative;min-height:280px;border-radius:32px;background:linear-gradient(145deg,#0f766e,#2ab5a8);overflow:hidden;box-shadow:var(--phbs-shadow);display:grid;place-items:center;color:#fff}
.public-illustration:before,.public-illustration:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.public-illustration:before{width:240px;height:240px;top:-95px;right:-70px}.public-illustration:after{width:180px;height:180px;bottom:-95px;left:-50px}
.public-illustration i{font-size:7rem;position:relative}.public-illustration div{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;padding:1rem;border-radius:18px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);font-weight:700}
.form-card,.public-card{background:rgba(255,255,255,.97);border:1px solid var(--phbs-border);border-radius:var(--phbs-radius);box-shadow:var(--phbs-shadow);padding:1.4rem}
.form-card-header{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.25rem}.form-card-icon{width:46px;height:46px;flex:0 0 46px;border-radius:15px;background:var(--phbs-primary-soft);color:var(--phbs-primary);display:grid;place-items:center;font-size:1.1rem}
.form-card-header h2{margin:0;color:var(--phbs-ink);font-size:1.25rem;font-weight:820}.form-card-header p{margin:.25rem 0 0;color:var(--phbs-muted);font-size:.86rem;line-height:1.5}
.progress-shell{margin-bottom:1rem}.progress-meta{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--phbs-muted);margin-bottom:.45rem}.progress-meta strong{color:var(--phbs-ink)}
.progress{height:9px;border-radius:999px;background:#e5eeec}.progress-bar{background:linear-gradient(90deg,var(--phbs-primary),#2bc1b3);border-radius:999px}
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.question-card{padding:1rem;border:1px solid var(--phbs-border);border-radius:18px;background:#fbfdfd;margin-bottom:.85rem}.question-card h3{font-size:.95rem;line-height:1.5;color:var(--phbs-ink);margin:0 0 .75rem;font-weight:760}
.option-grid{display:grid;grid-template-columns:1fr;gap:.55rem}.option-card{display:flex;align-items:flex-start;gap:.65rem;min-height:48px;padding:.75rem .85rem;border:1px solid #d4e2df;border-radius:14px;background:#fff;cursor:pointer;transition:.18s}.option-card:hover{border-color:#91cbc4;background:#f5fbfa}.option-card:has(input:checked){border-color:#42a298;background:var(--phbs-primary-soft);box-shadow:inset 0 0 0 1px rgba(15,118,110,.05)}.option-card input{margin-top:.2rem;accent-color:var(--phbs-primary)}
.form-actions{display:flex;gap:.75rem;margin-top:1.2rem}.form-actions .btn{flex:1}
.success-shell{max-width:720px;margin:4rem auto;text-align:center}.success-icon{width:84px;height:84px;border-radius:28px;background:#ddf6e8;color:var(--phbs-success);display:grid;place-items:center;font-size:2.3rem;margin:0 auto 1.2rem}

/* Admin */
.admin-body{min-height:100vh;background:var(--phbs-bg)}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#0f615b,#0a4d49);color:#fff;z-index:1050;display:flex;flex-direction:column;transition:transform .22s ease;box-shadow:20px 0 50px rgba(10,77,73,.12)}
.sidebar-brand{padding:1.25rem 1.15rem;display:flex;align-items:center;gap:.8rem;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-brand span{width:45px;height:45px;border-radius:15px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:1.2rem}.sidebar-brand strong{display:block}.sidebar-brand small{display:block;color:rgba(255,255,255,.65);font-size:.7rem}
.sidebar-nav{padding:1rem .8rem;display:grid;gap:.35rem;overflow-y:auto}.sidebar-nav a{display:flex;align-items:center;gap:.8rem;padding:.78rem .85rem;color:rgba(255,255,255,.78);text-decoration:none;border-radius:14px;font-weight:650;font-size:.88rem}.sidebar-nav a i{font-size:1rem;width:20px}.sidebar-nav a:hover,.sidebar-nav a.active{color:#fff;background:rgba(255,255,255,.12)}
.sidebar-footer{margin-top:auto;padding:1rem;border-top:1px solid rgba(255,255,255,.1)}.sidebar-user{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}.sidebar-user span{width:39px;height:39px;border-radius:13px;background:rgba(255,255,255,.12);display:grid;place-items:center}.sidebar-user strong,.sidebar-user small{display:block}.sidebar-user small{color:rgba(255,255,255,.65);font-size:.68rem}
.admin-main{margin-left:270px;width:calc(100% - 270px);min-height:100vh;display:flex;flex-direction:column}.admin-topbar{position:sticky;top:0;z-index:1020;min-height:78px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--phbs-border);display:flex;align-items:center;gap:1rem;padding:.85rem 1.4rem}.admin-menu-btn,.admin-avatar{width:46px;height:46px;border:0;border-radius:15px;background:var(--phbs-primary-soft);color:var(--phbs-primary);display:grid;place-items:center;font-size:1.2rem}.admin-menu-btn{display:none}.admin-topbar-title h1{margin:0;color:var(--phbs-ink);font-size:1.35rem;font-weight:830}.admin-topbar-title p{margin:.12rem 0 0;color:var(--phbs-muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}
.admin-content{padding:1.4rem;flex:1}.admin-footer{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;color:var(--phbs-muted);font-size:.72rem;border-top:1px solid var(--phbs-border)}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(7,37,34,.46);z-index:1040;opacity:0;pointer-events:none;transition:.2s}
.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}.page-title h2{margin:0;color:var(--phbs-ink);font-size:1.75rem;font-weight:850;letter-spacing:-.025em}.page-title p{margin:.3rem 0 0;color:var(--phbs-muted)}.page-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.filter-card,.panel-card,.metric-card{background:#fff;border:1px solid var(--phbs-border);border-radius:var(--phbs-radius);box-shadow:var(--phbs-shadow)}
.filter-card{padding:1.15rem;margin-bottom:1.15rem}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;align-items:end}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.metric-card{padding:1.15rem;display:flex;gap:.9rem;align-items:center}.metric-icon{width:52px;height:52px;flex:0 0 52px;border-radius:17px;background:var(--phbs-primary-soft);color:var(--phbs-primary);display:grid;place-items:center;font-size:1.25rem}.metric-card strong{display:block;color:var(--phbs-ink);font-size:1.65rem;line-height:1.1}.metric-card span{display:block;color:var(--phbs-muted);font-size:.78rem;margin-top:.25rem}.metric-card small{display:block;color:var(--phbs-success);font-size:.69rem;margin-top:.22rem}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.panel-card{padding:1.15rem;min-width:0}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}.panel-header h3{margin:0;color:var(--phbs-ink);font-size:1.08rem;font-weight:810}.panel-header p{margin:.2rem 0 0;color:var(--phbs-muted);font-size:.76rem}.panel-badge{padding:.45rem .65rem;border-radius:999px;background:var(--phbs-primary-soft);color:var(--phbs-primary);font-size:.7rem;font-weight:780}
.chart-box{position:relative;min-height:310px}.chart-box canvas{width:100%;height:310px;display:block}
.insight-list{display:grid;gap:.7rem}.insight-item{display:flex;gap:.75rem;padding:.85rem;border:1px solid var(--phbs-border);border-radius:16px;background:#fbfdfd}.insight-item i{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:var(--phbs-primary-soft);color:var(--phbs-primary);display:grid;place-items:center}.insight-item strong{display:block;color:var(--phbs-ink);font-size:.88rem}.insight-item span{display:block;color:var(--phbs-muted);font-size:.74rem;line-height:1.45;margin-top:.18rem}
.table-card{background:#fff;border:1px solid var(--phbs-border);border-radius:var(--phbs-radius);box-shadow:var(--phbs-shadow);overflow:hidden}.table-card-header{padding:1rem 1.15rem;border-bottom:1px solid var(--phbs-border);display:flex;justify-content:space-between;align-items:center;gap:1rem}.table-card-header h3{margin:0;color:var(--phbs-ink);font-size:1.05rem;font-weight:800}.table{margin:0}.table thead th{background:#f1f8f6;color:#43615d;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--phbs-border);white-space:nowrap;padding:.85rem}.table td{padding:.8rem .85rem;vertical-align:middle;border-color:#edf3f2;color:#3a5753;font-size:.8rem}.table tbody tr:hover{background:#fbfdfd}.table-actions{display:flex;gap:.35rem;justify-content:flex-end}.table-actions .btn{width:36px;height:36px;min-height:36px;padding:0}
.status-good{background:#ddf6e8;color:#246c49}.status-warning{background:#fff0cf;color:#8a5d12}.status-danger{background:#ffe0e4;color:#9d3540}.status-info{background:#e4f4fb;color:#28677d}.status-muted{background:#eaf0ef;color:#576d69}
.progress-thin{height:8px;border-radius:999px;background:#e7efed;overflow:hidden}.progress-thin span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--phbs-primary),#2bb8aa)}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.detail-item{padding:.85rem;border:1px solid var(--phbs-border);border-radius:15px;background:#fbfdfd}.detail-item span{display:block;color:var(--phbs-muted);font-size:.7rem}.detail-item strong{display:block;color:var(--phbs-ink);font-size:.88rem;margin-top:.22rem;overflow-wrap:anywhere}.detail-item.full{grid-column:1/-1}
.pagination .page-link{color:var(--phbs-primary);border-color:var(--phbs-border)}.pagination .active>.page-link{background:var(--phbs-primary);border-color:var(--phbs-primary)}

/* Login */
.login-body{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at 10% 20%,rgba(20,163,154,.18),transparent 28%),radial-gradient(circle at 90% 80%,rgba(242,184,75,.16),transparent 28%),#eef7f5}.login-shell{width:min(100%,980px);display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid var(--phbs-border);border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(20,70,65,.14)}.login-brand{padding:3rem;background:linear-gradient(145deg,#0f766e,#0a5550);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-brand:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08);right:-120px;top:-100px}.login-logo{width:70px;height:70px;border-radius:23px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:2rem;margin-bottom:1.3rem}.login-brand h1{font-size:2.2rem;font-weight:850;margin:0}.login-brand p{color:rgba(255,255,255,.75);line-height:1.7;margin:.7rem 0 0}.login-form{padding:3rem;display:flex;flex-direction:column;justify-content:center}.login-form h2{color:var(--phbs-ink);font-weight:840;margin:0}.login-form>p{color:var(--phbs-muted);margin:.5rem 0 1.4rem}

@media(max-width:1199px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-4,.span-5,.span-7,.span-8{grid-column:span 6}}
@media(max-width:991px){.admin-sidebar{transform:translateX(-105%)}.admin-sidebar.open{transform:translateX(0)}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.admin-main{margin-left:0;width:100%}.admin-menu-btn{display:grid}.admin-content{padding:1rem}.public-hero{grid-template-columns:1fr}.public-illustration{min-height:220px}.login-shell{grid-template-columns:1fr;max-width:620px}.login-brand{padding:2rem}.login-form{padding:2rem}.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}}
@media(max-width:767px){.public-nav-inner,.public-shell{width:min(100% - 1.1rem,940px)}.public-shell{padding-top:1.1rem}.public-hero h1{font-size:2rem}.public-illustration{display:none}.form-card,.public-card{padding:1rem;border-radius:19px}.form-actions{position:sticky;bottom:.5rem;padding:.6rem;background:rgba(243,248,247,.92);backdrop-filter:blur(10px);border-radius:18px;z-index:20}.page-title{display:block}.page-actions{margin-top:.8rem}.page-actions .btn{flex:1}.filter-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.dashboard-grid{display:block}.panel-card{margin-bottom:1rem;border-radius:20px}.chart-box,.chart-box canvas{min-height:280px;height:280px}.admin-topbar{padding:.75rem}.admin-topbar-title h1{font-size:1.1rem}.admin-topbar-title p{max-width:58vw}.table-card{border-radius:20px}.detail-grid{grid-template-columns:1fr}.admin-footer{display:block;text-align:center}.login-body{padding:.7rem}.login-shell{border-radius:22px}.login-brand{display:none}.login-form{padding:1.4rem}.public-brand small{display:none}}
@media print{.admin-sidebar,.admin-topbar,.page-actions,.filter-card,.admin-footer,.btn,.sidebar-backdrop{display:none!important}.admin-main{margin:0;width:100%}.admin-content{padding:0}.panel-card,.table-card,.metric-card{box-shadow:none;break-inside:avoid}.dashboard-grid{display:block}.panel-card{margin-bottom:1rem}.chart-box{min-height:250px}}

/* Audit alur formulir 2026-07-31 */
.question-card{min-inline-size:0}
.question-card legend{float:none;width:auto;padding:0;margin:0 0 .75rem;font-size:.95rem;line-height:1.5;color:var(--phbs-ink);font-weight:760}
.question-card.question-complete{border-color:#a9d8d2;background:#f8fcfb}
.question-card.question-invalid{border-color:#dc6b75;background:#fff7f8;box-shadow:0 0 0 3px rgba(201,79,91,.08)}
.question-card.question-invalid legend{color:#8f3039}
[data-submit-lock][data-submitting="1"]{pointer-events:none;opacity:.82}
.form-control:invalid:focus,.form-select:invalid:focus{border-color:#c94f5b;box-shadow:0 0 0 .2rem rgba(201,79,91,.12)}