:root{font-family:Arial,sans-serif;color:#17352a;background:#f1f5f0;font-size:15px}*{box-sizing:border-box}body{margin:0}header{background:#164d37;color:white;padding:28px max(24px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:bold;color:#e4c975;letter-spacing:1.4px}h1{font-size:28px;margin:9px 0}header p{color:#d4e3d8;margin:0}main{max-width:1240px;margin:auto;padding:24px}button,input,select,textarea{font:inherit}button{padding:10px 15px;border:1px solid #cedbd1;border-radius:8px;background:white;color:#174832;cursor:pointer}button:hover{background:#eaf0e8}button:disabled{opacity:.5;cursor:default}.primary,nav button.active{background:#216d48;color:white;border-color:#216d48}nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}article{background:white;border:1px solid #e0e8df;border-radius:14px;padding:22px;margin-bottom:20px}h2{font-size:19px;margin:0 0 14px}p{line-height:1.5}article>p{color:#607265;font-size:14px}.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:20px}label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}input,select,textarea{border:1px solid #c7d6ca;background:#fff;color:#17352a;border-radius:7px;padding:11px;width:100%;min-height:43px}textarea{min-height:90px;resize:vertical}.toolbar label{min-width:180px;flex:1}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}.stat{background:white;padding:20px;border:1px solid #dce6dc;border-radius:12px}.stat strong{font-size:27px;display:block;margin-top:10px}.stat span{font-size:13px;color:#597161}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:20px}.barrow{margin:12px 0}.barlabel{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.bartrack{height:8px;background:#edf2e9;border-radius:5px}.barfill{height:8px;background:#6b9866;border-radius:5px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;color:#597060;background:#f4f7f2;font-size:12px}td,th{padding:12px;border-bottom:1px solid #e5ebe4;vertical-align:top}td small{display:block;color:#748278;margin-top:5px}.badge{padding:5px 8px;background:#edf1eb;border-radius:20px;font-size:12px;display:inline-block}.normal{background:#dff0df;color:#23603a}.attention{background:#fff0c3;color:#8c6113}.problem{background:#ffe1de;color:#a5392e}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wide{grid-column:1/-1}.actions{display:flex;gap:10px;flex-wrap:wrap}.hint{background:#f3f6ec;padding:12px;border-radius:8px;color:#607254;font-size:13px;line-height:1.6}#notice:not(:empty){padding:14px;background:#e0eddd;border-radius:8px;margin-bottom:16px}.error{color:#ac392d}dialog{border:0;border-radius:16px;width:min(420px,95vw);padding:28px}dialog::backdrop{background:#123b2b99}dialog label{margin:16px 0}#preview{max-width:100%;max-height:250px;border-radius:10px}.photos{max-width:100%;max-height:300px;border-radius:10px;margin:12px 0}.observation{border-top:1px solid #dbe5d9;padding:18px 0}.empty{text-align:center;padding:30px;color:#728072}footer{color:#788578;font-size:13px;text-align:center;padding:20px}#session{display:flex;gap:8px;align-items:center;flex-wrap:wrap}a{color:#236b45}.link{border:0;padding:0;text-align:left;font-weight:bold;background:transparent}.userrow{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #e2e9de;padding:14px}.rowmeta{color:#738170;font-size:13px;margin-top:5px}[hidden]{display:none!important}@media(max-width:800px){header{padding:22px;display:block}#session{margin-top:18px}h1{font-size:23px}main{padding:14px}.stats{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr;gap:0}.formgrid{grid-template-columns:1fr}.wide{grid-column:auto}article{padding:16px}td,th{white-space:nowrap}.toolbar label{min-width:130px}.stat{padding:16px}.stat strong{font-size:23px}}@media print{header{background:white;color:#17352a;padding:0}header p{color:#17352a}main{padding:0}nav,.toolbar,#session,footer,.actions,button{display:none!important}article,.stat{break-inside:avoid}body{background:white}.tablewrap{overflow:visible}table{font-size:10px}td,th{white-space:normal;padding:6px}@page{size:A4 portrait;margin:12mm}.stats{gap:5px}.stat{padding:8px}.stat strong{font-size:20px}}

.identity{display:flex;align-items:center;gap:18px}.app-icon{width:78px;height:78px;border-radius:17px;object-fit:cover;flex-shrink:0}@media(max-width:600px){.identity{gap:12px}.app-icon{width:62px;height:62px;border-radius:13px}.identity p{font-size:13px}}

.avatar{width:42px;height:42px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:10px}.avatar-placeholder{display:inline-flex;align-items:center;justify-content:center;background:#e5eedd;color:#37593d;font-weight:bold}.avatar-preview{width:150px;height:150px;object-fit:cover;border-radius:50%}.wa-button{display:inline-block;padding:10px 15px;border-radius:8px;background:#e4f4e8;color:#196c39;text-decoration:none}.userrow .actions{align-items:center}.userrow>div{min-width:0}@media(max-width:600px){.userrow{flex-wrap:wrap}}

.stat{text-align:left;width:100%}.stat small{display:block;color:#216d48;margin-top:12px;font-size:12px}.stat:hover,.region-link:hover,.barrow:hover{background:#eaf3e7;border-color:#6b9866}button:focus-visible{outline:3px solid #b38d22;outline-offset:3px}.barrow{display:block;width:100%;padding:12px;text-align:left}.bartrack,.barfill{display:block}.region-link{width:100%;text-align:left;align-items:center}.page-actions{margin-bottom:18px}@media print{button.stat,button.barrow,button.region-link{display:block!important}.stat small{display:none}}

.danger{color:#a5392e;border-color:#e5bdb7}.danger:hover{background:#ffe1de}

.password-field{position:relative;display:block;width:100%}.password-field input{padding-right:54px}.password-toggle{position:absolute;right:3px;top:3px;bottom:3px;width:42px;padding:8px;border:0;background:transparent;display:flex;align-items:center;justify-content:center}.password-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.password-toggle .eye-slash{display:none}.password-toggle[aria-pressed="true"] .eye-slash{display:block}

.summary-lines{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;max-height:3em;overflow-wrap:anywhere}.summary-table{table-layout:fixed;min-width:800px}.summary-table th:first-child{width:24%}.summary-table th:nth-child(2){width:12%}.summary-table th:nth-child(3){width:12%}.summary-table th:nth-child(4){width:19%}.summary-table th:nth-child(5){width:21%}.summary-table th:last-child{width:12%}.summary-table td{white-space:normal}.summary-lines .link{font:inherit;white-space:normal}.phase-track{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.phase-step{padding:12px;background:#edf3e9;border-radius:8px}.phase-step.current{box-shadow:inset 0 0 0 2px #216d48}.phase-step.future{opacity:.65}.phase-step small{display:block;margin-top:6px;color:#607265}@media(max-width:700px){.phase-track{grid-template-columns:repeat(2,1fr)}}@media print{.summary-table{min-width:0}.summary-lines{display:block;max-height:none;overflow:visible}.link{display:inline!important;color:#17352a}.phase-track{grid-template-columns:repeat(5,1fr)}}

.summary-lines .badge{padding:0 5px;line-height:inherit;vertical-align:baseline}

/* Header SIPANTAU: real IP2MP Sukamandi photograph, responsive typography. */
.site-header{position:relative;isolation:isolate;background:#124c38;min-height:184px;padding-top:27px;padding-bottom:27px;border-bottom:1px solid #d4ba68}
.site-header::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:url('header-brmp-padi.jpg?v=1.9.6');background-size:cover;background-position:center 22%;filter:brightness(1.22) contrast(1.1) saturate(1.22)}
.site-header::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,43,30,.74) 0%,rgba(3,43,30,.62) 15%,rgba(3,43,30,.42) 30%,rgba(3,43,30,.14) 48%,rgba(3,43,30,.025) 65%,rgba(3,43,30,0) 100%)}
.site-header .identity{gap:20px;min-width:0}.site-header .header-copy{min-width:0}.site-header .app-icon{width:80px;height:80px;flex-shrink:0;filter:drop-shadow(0 3px 6px #002c2866)}
.site-header .brand{display:block;color:#f0cf72;font-size:15px;line-height:1.4;letter-spacing:1.8px}
.site-header h1{font-size:40px;line-height:1.1;margin:6px 0 8px;font-weight:750;letter-spacing:.4px;color:#fff;text-shadow:0 2px 4px rgba(0,35,25,.85)}
.site-header .header-subtitle{font-size:16px;line-height:1.45;color:#f4f7f2;max-width:660px;margin:0;text-wrap:pretty;text-shadow:0 1px 4px rgba(0,35,25,.95)}
.header-accent{display:block;width:56px;height:3px;background:#e6c567;margin-top:12px;border-radius:2px}
.site-header #session{max-width:370px;flex-shrink:0}.site-header #session>span{color:#fff;text-shadow:0 1px 4px rgba(0,35,25,.95)}.site-header #session a,.site-header #session button{font-size:13px}
.photo-credit{font-size:11px;color:#607567;text-decoration:none}.photo-credit:hover{text-decoration:underline}
@media(max-width:1100px){.site-header{gap:18px}.site-header #session{max-width:300px}.site-header h1{font-size:36px}.site-header .header-subtitle{font-size:15px}}
@media(max-width:800px){.site-header{display:block;min-height:0;padding:24px}.site-header h1{font-size:34px}.site-header #session{max-width:none;margin-top:18px}.site-header .identity{gap:16px}}
@media(max-width:600px){.site-header{padding:20px 16px}.site-header::before{background-position:55% 22%}.site-header::after{background:linear-gradient(90deg,rgba(3,43,30,.65),rgba(3,43,30,.42) 55%,rgba(3,43,30,.18))}.site-header .identity{gap:12px;align-items:center}.site-header .app-icon{width:54px;height:54px}.site-header .brand{font-size:12px;letter-spacing:1.5px}.site-header h1{font-size:30px;margin:5px 0 6px}.site-header .header-subtitle{font-size:14px;line-height:1.4}.header-accent{width:44px;height:2px;margin-top:10px}.site-header #session{gap:8px;margin-top:16px}.site-header #session button,.site-header #session a{padding:9px 10px}}
@media(max-width:350px){.site-header h1{font-size:28px}.site-header .header-subtitle{font-size:13px}}
@media print{.site-header::before,.site-header::after{display:none}.site-header{background:none!important;min-height:0;padding:0;border-bottom:0;color:#17352a}.site-header .brand,.site-header h1,.site-header .header-subtitle{color:#17352a;text-shadow:none}.site-header h1{font-size:28px}.site-header .header-subtitle{text-shadow:none}.site-header .app-icon{filter:none}.header-accent,.photo-credit{display:none}}

.areal-navigation{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.areal-navigation a{text-decoration:none}@media print{.areal-navigation{display:none}}

/* Menu akun vertikal mengikuti susunan AREPA pada desktop, tablet dan HP. */
main.account-layout{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:20px;align-items:start}
main.account-layout>nav{grid-column:1;grid-row:1/span 50;position:sticky;top:16px;display:flex;flex-direction:column;gap:7px;align-self:start;margin:0;padding:14px 10px;background:#fff;border:1px solid #dce6dc;border-radius:12px;max-height:calc(100dvh - 32px);overflow-y:auto;min-width:0}
main.account-layout>:not(nav){grid-column:2;min-width:0}
.nav-label{color:#788b7d;font-size:10px;letter-spacing:1px;font-weight:700;margin:2px 8px 9px}
main.account-layout nav button,main.account-layout nav a{display:block;width:100%;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.4;min-height:43px;padding:11px 12px;font-size:14px;border:0;border-radius:7px;text-decoration:none;background:transparent;color:#28503a}
main.account-layout nav button:hover,main.account-layout nav a:hover{background:#edf5eb}
main.account-layout nav button.active{background:#216d48;color:#fff}
main.account-layout .formgrid>*,main.account-layout article,main.account-layout section{min-width:0}
main.account-layout input,main.account-layout select,main.account-layout textarea{min-width:0}
#publicNavigation{display:flex;flex-direction:column;align-items:stretch;gap:7px;max-width:210px;margin-bottom:18px}
@media(max-width:1100px){main.account-layout{grid-template-columns:170px minmax(0,1fr);column-gap:16px}main.account-layout .stats{grid-template-columns:repeat(3,minmax(0,1fr))}main.account-layout nav button,main.account-layout nav a{font-size:13px;padding:11px 10px}}
@media(max-width:800px){main.account-layout{column-gap:12px}main.account-layout .stats{grid-template-columns:repeat(2,minmax(0,1fr))}main.account-layout .formgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){main.account-layout{grid-template-columns:128px minmax(0,1fr);gap:10px;padding:12px 10px}main.account-layout>nav{padding:12px 6px;top:10px;max-height:calc(100dvh - 20px);border-radius:9px}main.account-layout nav button,main.account-layout nav a{font-size:11px;padding:10px 7px;min-height:42px}main.account-layout .nav-label{font-size:8px;letter-spacing:.4px;margin:2px 6px 7px}main.account-layout article{padding:12px;border-radius:10px}main.account-layout .stats{grid-template-columns:minmax(0,1fr)}main.account-layout h2{font-size:17px}main.account-layout .toolbar label{min-width:0;flex-basis:100%}main.account-layout .stat{padding:12px}main.account-layout .actions>*{max-width:100%}main.account-layout .phase-track{grid-template-columns:minmax(0,1fr)}}
@media print{main.account-layout{display:block;max-width:none;padding:0}main.account-layout>nav,#publicNavigation{display:none!important}}