:root{--nav:#102b55;--blue:#2878f0;--bg:#f4f7fb;--text:#17233c;--muted:#6d7890;--green:#12ad72;--orange:#ff941f;--purple:#7657e8}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.side{background:linear-gradient(180deg,#143568,#0b2348);color:#fff;padding:22px 14px}.brand{font-weight:900;font-size:22px;line-height:1.05;padding:4px 10px 22px}.brand small{display:block;font-size:10px;font-weight:600;opacity:.75;margin-top:7px}.nav a{display:block;padding:12px 13px;margin:4px 0;border-radius:9px;font-size:14px}.nav a:hover,.nav a.active{background:#2d78ef}.main{padding:24px}.top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.search{background:#fff;border:1px solid #e4e8ef;padding:12px 15px;border-radius:10px;min-width:320px}.hero{padding:28px;border-radius:18px;background:linear-gradient(120deg,#dff2ff,#fff 60%,#e8f8ed);margin-bottom:18px}.hero h1{font-size:34px;margin:4px 0}.hero p{margin:5px 0;color:#31527b}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px;border-radius:14px;color:#fff;min-height:115px}.stat b{font-size:30px;display:block;margin-top:8px}.blue{background:linear-gradient(135deg,#1671e8,#4d98ff)}.green{background:linear-gradient(135deg,#0aa56b,#32c987)}.orange{background:linear-gradient(135deg,#f58216,#ffb34c)}.purple{background:linear-gradient(135deg,#6847df,#987df5)}.panels{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}.card{background:#fff;border:1px solid #e5eaf2;border-radius:14px;padding:18px;box-shadow:0 3px 16px rgba(25,47,83,.04)}.card h3{margin:0 0 14px}.btn{display:inline-block;border:0;border-radius:9px;background:#2678ef;color:white;padding:10px 14px;font-weight:700;cursor:pointer}.btn.green{background:#0da66d}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{font-size:12px;font-weight:700}.form input,.form select,.form textarea{width:100%;padding:11px;border:1px solid #dce2ec;border-radius:8px;margin-top:5px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:11px;border-bottom:1px solid #edf0f5;font-size:13px}.loginwrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0e2b58,#2477e8)}.login{width:min(420px,92vw);background:#fff;border-radius:18px;padding:30px}.login h1{margin:0}.login input{width:100%;padding:12px;margin:8px 0;border:1px solid #dce2ec;border-radius:9px}@media(max-width:850px){.layout{grid-template-columns:1fr}.side{display:none}.main{padding:14px}.grid4{grid-template-columns:1fr 1fr}.panels{grid-template-columns:1fr}.search{min-width:0;width:100%}.form{grid-template-columns:1fr}}@media(max-width:480px){.grid4{grid-template-columns:1fr}.hero h1{font-size:27px}}

/* Data RT 01 RW 03 responsive shell fix */
.menu-toggle{display:none;border:0;background:#fff;border:1px solid #e4e8ef;border-radius:10px;width:44px;height:44px;font-size:22px;cursor:pointer;color:var(--text);flex:0 0 auto}.mobile-backdrop{display:none}.userbox{white-space:nowrap}.nav a span{display:inline-block;width:20px}.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.card img,.main img{max-width:100%;height:auto}
@media(max-width:850px){body.nav-open{overflow:hidden}.layout{display:block}.side{display:block;position:fixed;z-index:1002;left:0;top:0;bottom:0;width:min(290px,84vw);transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;box-shadow:10px 0 30px rgba(0,0,0,.18)}body.nav-open .side{transform:translateX(0)}.mobile-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(6,18,38,.48);opacity:0;visibility:hidden;transition:.2s}body.nav-open .mobile-backdrop{opacity:1;visibility:visible}.main{min-width:0;padding:14px}.top{position:sticky;top:0;z-index:50;background:rgba(244,247,251,.96);padding:8px 0;margin-bottom:12px;backdrop-filter:blur(8px)}.menu-toggle{display:block}.search{flex:1;min-width:0}.search span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.userbox{font-size:12px}.card{padding:15px}.table{min-width:640px}}
@media(max-width:560px){.top{gap:8px}.search{padding:10px}.search span{font-size:0}.search span:after{content:'Cari...';font-size:13px}.userbox{max-width:92px;overflow:hidden;text-overflow:ellipsis}.form{grid-template-columns:1fr}.btn{min-height:42px}.card{border-radius:12px}.hero{padding:20px}.hero h1{font-size:26px}}

/* v14 detailed KTP scanner */
.page-head{display:flex;justify-content:space-between;align-items:end;margin:2px 0 16px}.page-head h1{margin:3px 0 4px;font-size:27px}.page-head p{margin:0;color:var(--muted);font-size:14px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--blue)}.ktp-workflow{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);gap:16px;align-items:start}.scan-card{position:sticky;top:80px}.scan-head,.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.scan-head>div,.section-title>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.scan-head small{display:block;width:100%;padding-left:37px;color:var(--muted)}.step-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e8f1ff;color:#176ce1;font-weight:900}.step-badge.done{background:#ddf8ed;color:#07885a}.quality,.lock-pill{font-size:11px;font-weight:800;border-radius:999px;padding:7px 10px;background:#eef2f7;color:#64748b}.quality.ok{background:#dcfce7;color:#15803d}.quality.warn{background:#fff7d6;color:#a16207}.quality.bad{background:#fee2e2;color:#b91c1c}.scanner{position:relative;overflow:hidden;background:#071427;border-radius:16px;aspect-ratio:1.586/1;max-height:340px;display:grid;place-items:center}.scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scanner-empty{color:#c8d6ea;text-align:center;display:grid;gap:6px;place-items:center}.scanner-empty span{font-size:34px}.scanner-empty small{opacity:.65}.scan-frame{position:absolute;width:88%;aspect-ratio:1.586/1;border:1px solid rgba(255,255,255,.18);border-radius:12px;pointer-events:none}.scan-frame i{position:absolute;width:30px;height:30px;border-color:#53a4ff;border-style:solid}.scan-frame i:nth-child(1){left:-2px;top:-2px;border-width:3px 0 0 3px;border-radius:9px 0 0 0}.scan-frame i:nth-child(2){right:-2px;top:-2px;border-width:3px 3px 0 0;border-radius:0 9px 0 0}.scan-frame i:nth-child(3){left:-2px;bottom:-2px;border-width:0 0 3px 3px;border-radius:0 0 0 9px}.scan-frame i:nth-child(4){right:-2px;bottom:-2px;border-width:0 3px 3px 0;border-radius:0 0 9px 0}.scan-frame em{position:absolute;right:8px;bottom:6px;color:#fff;font-size:10px;font-style:normal;opacity:.5}.scan-line{position:absolute;left:4%;right:4%;height:2px;top:12%;background:#45e0a8;box-shadow:0 0 12px #45e0a8;animation:scanmove 2.2s ease-in-out infinite}@keyframes scanmove{50%{top:87%}}.scan-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.btn.soft{background:#eaf2ff;color:#1769d5}.btn.ghost{background:#f3f5f8;color:#4b5870}.file-btn{position:relative;overflow:hidden}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.ocr-mini{margin-top:12px;padding:11px 12px;background:#f7f9fc;border-radius:10px}.ocr-mini div{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.ocr-mini progress{width:100%;height:7px;accent-color:#2878f0}.ktp-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.ktp-form label{font-size:11px;font-weight:800;color:#536078}.ktp-form .wide{grid-column:1/-1}.ktp-form input,.ktp-form textarea{width:100%;margin-top:5px;padding:10px 11px;border:1px solid #e0e6ef;border-radius:9px;background:#f7f9fc;color:#15233b;font:inherit;resize:none}.ktp-form input:not(:placeholder-shown),.ktp-form textarea:not(:placeholder-shown){background:#f1fbf7;border-color:#cceee0}.missing-box{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fff7ed;color:#9a4d09;font-size:12px}.family-next{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}.family-next>div{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;align-items:center}.family-next p{grid-column:2;margin:0;color:var(--muted);font-size:12px}.family-next .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:980px){.ktp-workflow{grid-template-columns:1fr}.scan-card{position:static}.scanner{max-height:none;width:min(100%,620px);margin:auto}}
@media(max-width:560px){.page-head h1{font-size:22px}.ktp-form{grid-template-columns:1fr}.ktp-form .wide{grid-column:auto}.scan-card,.data-card{padding:13px}.scan-head{align-items:flex-start}.scan-head small{padding-left:0}.quality{flex:0 0 auto}.scan-actions .btn{flex:1 1 calc(50% - 4px);text-align:center;padding:10px 8px}.family-next{align-items:stretch;flex-direction:column}.family-next .btn{width:100%}.scanner{border-radius:12px}}
/* v15 family final */
.family-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.family-meta label,.child-grid label{font-size:12px;font-weight:800;color:#536078}.family-meta input,.child-grid input,.child-grid select{width:100%;margin-top:5px;padding:10px 11px;border:1px solid #dfe6ef;border-radius:9px;background:#fff}.spouse-card,.children-card,.save-family{margin-top:16px}.spouse-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.muted{color:var(--muted);font-size:12px}.compact-fields{margin-top:14px}.child-row{border:1px solid #e6ebf2;border-radius:12px;padding:13px;margin-top:10px;background:#fafcff}.child-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.remove-child{border:0;background:#fee2e2;color:#b91c1c;padding:7px 10px;border-radius:8px;cursor:pointer}.child-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:9px}.save-family{display:flex;align-items:center;justify-content:space-between;gap:16px}.save-family p{margin:4px 0 0;color:var(--muted);font-size:12px}.save-family .btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:850px){.family-meta{grid-template-columns:1fr}.child-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.child-grid{grid-template-columns:1fr}.save-family{align-items:stretch;flex-direction:column}.save-family .btn{width:100%}}
/* v16 Family Folder Edition */
.family-page-head{align-items:center}.family-search{margin-bottom:14px}.search-big{display:flex;align-items:center;gap:10px;border:1px solid #dfe7f2;background:#f8fbff;border-radius:14px;padding:7px}.search-big>span{font-size:25px;padding-left:8px;color:#2a75e8}.search-big input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 4px;font-size:15px}.family-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.mini-stat{background:#fff;border:1px solid #e4eaf2;border-radius:13px;padding:14px}.mini-stat b{display:block;font-size:23px}.mini-stat span{font-size:11px;color:var(--muted)}.folder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.family-folder{position:relative;background:linear-gradient(145deg,#fff,#f8fbff);border:1px solid #dfe8f4;border-radius:16px;padding:18px;min-height:220px;box-shadow:0 8px 24px rgba(26,55,95,.06);transition:.18s}.family-folder:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,55,95,.1)}.folder-tab{position:absolute;left:18px;top:-7px;width:74px;height:14px;background:#dceaff;border-radius:8px 8px 0 0}.folder-icon{font-size:34px;margin:8px 0}.folder-body h3{margin:7px 0 12px;font-size:18px}.folder-body p{font-size:12px;margin:6px 0;color:#5b6880}.folder-body p b{display:inline-block;width:32px;color:#17233c}.folder-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e8edf4;margin-top:15px;padding-top:12px;font-size:11px}.folder-foot strong{color:#176de2}.dom-badge{display:inline-flex;font-size:9px;font-weight:900;letter-spacing:.06em;padding:6px 8px;border-radius:999px}.dom-badge.yes{background:#dcfce7;color:#15803d}.dom-badge.no{background:#fff1db;color:#b15b05}.empty-state{grid-column:1/-1;text-align:center;padding:45px}.empty-state>div{font-size:42px}.modern-form .wide{grid-column:1/-1}.modern-form select{width:100%;padding:11px;border:1px solid #dce2ec;border-radius:8px;margin-top:5px;background:#fff}.family-create>.card{margin-bottom:16px}.upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upload-box{position:relative;display:grid;place-items:center;text-align:center;min-height:145px;border:1.5px dashed #bcd0e9;border-radius:14px;background:#f8fbff;padding:16px;cursor:pointer;overflow:hidden}.upload-box:hover{border-color:#2878f0;background:#f0f6ff}.upload-box>span{font-size:28px;color:#2678ef}.upload-box small{color:var(--muted);margin-top:3px}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.member-editor{border:1px solid #e3e9f1;border-radius:14px;padding:14px;margin-top:12px;background:#fbfdff}.member-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.member-editor-grid{display:grid;grid-template-columns:.8fr 1.3fr 1fr .8fr;gap:10px}.member-editor-grid label{font-size:11px;font-weight:800;color:#536078}.member-editor-grid input,.member-editor-grid select{width:100%;padding:10px;margin-top:5px;border:1px solid #dfe6ef;border-radius:9px;background:#fff}.member-editor-grid .wide{grid-column:1/-1}.family-profile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-bottom:15px}.profile-mark{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#1b70e8,#55a1ff);color:#fff;font-size:22px;font-weight:900}.family-profile h2{margin:7px 0 3px}.family-profile p{margin:0;color:var(--muted);font-size:12px}.profile-numbers{display:flex;gap:10px}.profile-numbers span{background:#f5f8fc;border-radius:10px;padding:10px 12px;font-size:9px;color:var(--muted)}.profile-numbers strong{display:block;font-size:12px;color:var(--text);margin-top:3px}.document-folders{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}.doc-folder{background:#fff;border:1px solid #e2e9f2;border-radius:14px;padding:16px;display:grid;gap:4px}.doc-folder>span{font-size:25px}.doc-folder small{color:var(--muted)}.member-list{display:grid;gap:8px}.member-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:10px;border:1px solid #edf0f5;border-radius:11px}.avatar-mini{width:36px;height:36px;border-radius:10px;background:#e8f1ff;color:#176de2;display:grid;place-items:center;font-weight:900}.member-item small{display:block;color:var(--muted);margin-top:2px}.member-item>span{font-size:11px;color:#5f6c82}.storage-note{margin-top:15px}.storage-note code{display:block;background:#f3f6fa;padding:10px;border-radius:9px;margin:8px 0;font-size:12px}.storage-note p{margin:0;color:var(--muted);font-size:11px}.resident-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;min-height:260px;padding:34px;border-radius:24px;background:radial-gradient(circle at 85% 20%,rgba(105,199,255,.45),transparent 30%),linear-gradient(125deg,#0e2d5c,#1555a5 58%,#238bd6);color:#fff;margin-bottom:16px;box-shadow:0 18px 40px rgba(15,61,120,.18)}.resident-hero h1{font-size:35px;max-width:650px;margin:9px 0}.resident-hero p{max-width:650px;color:#dcecff}.hero-chip{display:inline-block;background:rgba(255,255,255,.15);padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em}.hero-actions{display:flex;gap:8px;margin-top:20px}.hero-btn{background:#fff;color:#1353a3}.hero-btn.secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}.hero-orb{width:150px;height:150px;flex:0 0 150px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;align-content:center;box-shadow:inset 0 0 35px rgba(255,255,255,.08)}.hero-orb span{font-size:15px}.hero-orb b{font-size:54px;line-height:.9}.hero-orb small{font-size:17px}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dash-stat{background:#fff;border:1px solid #e3eaf3;border-radius:15px;padding:15px;display:flex;gap:12px;align-items:center}.dash-stat i{width:46px;height:46px;border-radius:13px;background:#edf5ff;display:grid;place-items:center;font-style:normal;font-size:21px}.dash-stat span,.dash-stat small{display:block;color:var(--muted);font-size:10px}.dash-stat b{display:block;font-size:24px;margin:2px 0}.dashboard-columns{display:grid;grid-template-columns:1.35fr .85fr;gap:15px;margin-top:15px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-grid a{border:1px solid #e6ebf2;border-radius:13px;padding:14px;background:#fbfdff}.quick-grid a>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf3ff;color:#176de2;font-size:18px;margin-bottom:8px}.quick-grid b,.quick-grid small{display:block}.quick-grid small{color:var(--muted);font-size:10px;margin-top:3px}.text-link{font-size:11px;color:#176de2;font-weight:800}.recent-family{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #edf1f5}.recent-family>div{width:36px;height:36px;border-radius:11px;background:#eaf3ff;display:grid;place-items:center;color:#176de2;font-weight:900}.recent-family span b,.recent-family span small{display:block}.recent-family span small{font-size:9px;color:var(--muted)}.recent-family em{font-size:9px;font-style:normal;background:#eff7f2;padding:5px 7px;border-radius:999px}.empty-mini{padding:25px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:1050px){.folder-grid{grid-template-columns:repeat(2,1fr)}.dashboard-stats{grid-template-columns:1fr 1fr}.dashboard-columns{grid-template-columns:1fr}.document-folders{grid-template-columns:1fr 1fr}.member-editor-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.family-page-head{align-items:stretch;flex-direction:column}.family-page-head .btn{width:100%;text-align:center}.search-big{flex-wrap:wrap}.search-big>span{display:none}.search-big input{flex-basis:100%;padding:10px}.search-big .btn{width:100%}.family-summary{grid-template-columns:1fr 1fr}.folder-grid{grid-template-columns:1fr}.upload-grid{grid-template-columns:1fr}.member-editor-grid{grid-template-columns:1fr}.modern-form .wide{grid-column:auto}.family-profile{grid-template-columns:auto 1fr}.profile-numbers{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}.document-folders{grid-template-columns:1fr 1fr}.member-item{grid-template-columns:auto 1fr}.member-item>span{grid-column:2}.resident-hero{padding:24px;min-height:230px}.resident-hero h1{font-size:27px}.hero-orb{display:none}.hero-actions{flex-wrap:wrap}.dashboard-stats{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.family-summary,.dashboard-stats,.document-folders{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.resident-hero h1{font-size:24px}}

/* v0.17 resident type picker */
.resident-type-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 22px}.type-choice{display:block;cursor:pointer}.type-choice input{position:absolute;opacity:0;pointer-events:none}.type-choice span{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #dbe4f0;border-radius:16px;background:#f8fafc;transition:.2s}.type-choice b{font-size:16px}.type-choice small{color:#64748b;line-height:1.45}.type-choice input:checked+span{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}[hidden]{display:none!important}@media(max-width:700px){.resident-type-picker{grid-template-columns:1fr}}
/* v0.18 Surat Pengantar */
.letter-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:20px 0}.letter-page-head h1{margin:0}.letter-page-head p{margin:5px 0;color:#64748b}.letter-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.letter-steps b{border-top:4px solid #dbe5f0;padding:8px;color:#64748b}.letter-steps b:first-child{border-color:#1677ff;color:#0b5ed7}.letter-steps span{font-weight:600}.letter-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);gap:18px;align-items:start}.letter-form-card{padding:18px}.info-note{background:#eaf5ff;color:#0756a5;padding:13px 14px;border-radius:12px;margin-bottom:16px}.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.letter-form-card label{display:block;font-weight:700;font-size:13px;margin:0 0 12px}.letter-form-card input,.letter-form-card select,.letter-form-card textarea,.admin-letter-form input,.admin-letter-form select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:11px 12px;border:1px solid #d4deea;border-radius:9px;background:#fff;color:#15233d}.letter-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}.letter-preview-shell{background:#f3f7fb;padding:14px;border-radius:16px}.preview-title{display:flex;justify-content:space-between;margin-bottom:10px}.preview-title small{display:block;color:#64748b}.paper-wrap,.print-stage{overflow:auto}.official-letter{position:relative;box-sizing:border-box;width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:14mm 13mm 12mm;color:#07509a;font-family:"Times New Roman",serif;box-shadow:0 4px 18px #0f27452b;font-size:12pt;line-height:1.25;overflow:hidden}.official-letter.mini{transform-origin:top left;width:210mm;min-height:297mm;zoom:.70}.paper-wrap{height:780px}.watermark{position:absolute;inset:42% 0 auto;text-align:center;font-size:56pt;font-weight:800;color:#0a75bd0c;transform:rotate(-8deg);z-index:0}.letterhead,.official-letter>*{position:relative;z-index:1}.letterhead{display:grid;grid-template-columns:22mm 1fr 55mm;gap:6mm;align-items:start}.crest{width:18mm;height:22mm;border:2px solid #0a58a5;display:flex;align-items:center;justify-content:center;text-align:center;font-size:8pt;font-weight:700}.gov{display:flex;flex-direction:column;text-align:center;font-size:11pt}.gov strong{border-bottom:2px solid #07509a;margin-top:2px}.model{font-size:9.5pt}.official-letter h2{text-align:center;margin:7mm 0 0;font-size:16pt}.letter-number{text-align:center;margin-bottom:6mm}.intro{text-align:center;margin:0 6mm 5mm}.letter-fields>div{display:grid;grid-template-columns:42mm 5mm 1fr;min-height:6mm}.letter-fields em{font-style:normal;color:#111;border-bottom:1px dotted #07509a}.closing{text-align:center;margin:10mm 0 8mm}.letter-date,.signatures{display:grid;grid-template-columns:1fr 1fr;gap:15mm;text-align:center}.know{text-align:center;margin:7mm}.signatures p{margin-top:24mm}.official-letter footer{font-size:9pt;margin-top:4mm}.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eaf2ff;color:#0b5ed7;font-weight:700}.admin-letter-form{display:grid;grid-template-columns:1fr 130px 1fr auto auto;gap:7px;min-width:650px;margin-top:8px}.table td small{display:block;color:#64748b}.btn.small{padding:7px 10px;font-size:12px}
@media(max-width:1050px){.letter-grid{grid-template-columns:1fr}.paper-wrap{height:auto}.official-letter.mini{zoom:.58}.paper-wrap{min-height:1000px}}
@media(max-width:650px){.letter-page-head{align-items:flex-start;flex-direction:column}.letter-steps span{display:none}.form-grid.two{grid-template-columns:1fr}.letter-grid{display:block}.letter-preview-shell{margin-top:14px}.official-letter.mini{zoom:.42}.paper-wrap{min-height:760px}.letter-actions .btn{flex:1}.admin-letter-form{grid-template-columns:1fr;min-width:250px}}
@media print{body{background:#fff!important}.side,.top,.no-print,.mobile-backdrop{display:none!important}.layout,.main{display:block!important;margin:0!important;padding:0!important}.print-stage{overflow:visible!important}.official-letter{box-shadow:none!important;margin:0!important;width:210mm!important;height:297mm!important;min-height:297mm!important;page-break-after:avoid}.official-letter.mini{zoom:1!important}@page{size:A4;margin:0}}

/* v0.19 - official Jaya Raya logo on Surat Pengantar */
.official-letter .crest-logo{width:22mm;height:25mm;border:0;padding:0;display:flex;align-items:flex-start;justify-content:center;background:transparent}
.official-letter .crest-logo img{display:block;max-width:100%;max-height:25mm;width:auto;height:auto;object-fit:contain}
.official-letter .watermark-logo{position:absolute;inset:35% 0 auto;text-align:center;transform:none;z-index:0;pointer-events:none}
.official-letter .watermark-logo img{width:82mm;height:auto;opacity:.055;filter:saturate(.85);}
@media print{.official-letter .crest-logo img{-webkit-print-color-adjust:exact;print-color-adjust:exact}.official-letter .watermark-logo img{opacity:.055;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* v0.20 - align Jaya Raya logo with Surat Pengantar header */
.official-letter .letterhead{grid-template-columns:24mm minmax(0,1fr) 55mm;gap:4mm;align-items:center;min-height:25mm;border-bottom:2px solid #07509a;padding-bottom:2mm}
.official-letter .letterhead .crest-logo{width:20mm;height:23mm;align-self:center;display:flex;align-items:center;justify-content:center;margin:0}
.official-letter .letterhead .crest-logo img{width:auto;height:22mm;max-width:20mm;max-height:22mm;object-fit:contain}
.official-letter .letterhead .gov{align-self:center;justify-self:stretch;line-height:1.18}
.official-letter .letterhead .gov strong{border-bottom:0;margin-top:1mm}
.official-letter .letterhead .model{align-self:start;padding-top:1.5mm;text-align:left;line-height:1.3}
@media print{.official-letter .letterhead{align-items:center}.official-letter .letterhead .crest-logo img{height:22mm;max-height:22mm}}

/* v0.21 - presisi logo Jaya Raya sejajar dengan blok kop surat */
.official-letter .letterhead{
  grid-template-columns:28mm minmax(0,1fr) 48mm;
  column-gap:3mm;
  align-items:center;
  min-height:28mm;
  padding:0 0 2.5mm;
  border-bottom:2px solid #07509a;
}
.official-letter .letterhead .crest-logo{
  width:26mm;
  height:27mm;
  margin:0;
  padding:0;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.official-letter .letterhead .crest-logo img{
  display:block;
  width:auto;
  height:26mm;
  max-width:26mm;
  max-height:26mm;
  object-fit:contain;
  margin:0 auto;
}
.official-letter .letterhead .gov{
  align-self:center;
  justify-self:stretch;
  text-align:center;
  line-height:1.16;
  margin:0;
  padding:0;
}
.official-letter .letterhead .gov b,
.official-letter .letterhead .gov strong{display:block;margin:0;padding:0}
.official-letter .letterhead .gov strong{margin-top:1mm;border:0}
.official-letter .letterhead .model{
  align-self:center;
  justify-self:start;
  padding:0;
  margin:0;
  line-height:1.25;
  text-align:left;
}
@media print{
  .official-letter .letterhead{grid-template-columns:28mm minmax(0,1fr) 48mm;align-items:center}
  .official-letter .letterhead .crest-logo{width:26mm;height:27mm;align-self:center}
  .official-letter .letterhead .crest-logo img{height:26mm;max-height:26mm;max-width:26mm}
}
/* FINAL UI - integrated Data RT 01 RW 03 */
.final-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:34px 38px;border-radius:24px;background:linear-gradient(125deg,#0c2e60 0%,#1457a8 55%,#2787ef 100%);color:#fff;box-shadow:0 18px 45px rgba(16,57,111,.18);margin-bottom:18px}.final-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-120px;top:-150px;background:rgba(255,255,255,.08)}.final-hero h1{font-size:36px;line-height:1.08;margin:9px 0 10px;max-width:720px}.final-hero p{max-width:720px;color:#dcecff;line-height:1.6;margin:0 0 18px}.hero-chip{display:inline-flex;padding:7px 10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em}.hero-identity{position:relative;z-index:1;width:190px;height:190px;border-radius:42px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 1px rgba(255,255,255,.25)}.hero-identity small{font-weight:800;letter-spacing:.22em}.hero-identity b{font-size:44px;line-height:1}.hero-identity span{font-size:18px;font-weight:800}.hero-identity em{font-style:normal;font-size:11px;margin-top:12px;color:#dcecff}.nik-command{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:14px;background:#fff;border:1px solid #e1e8f1;padding:14px 16px;border-radius:16px;box-shadow:0 5px 20px rgba(18,47,84,.05);margin-bottom:16px}.nik-command>div{display:flex;align-items:center;gap:10px}.nik-command>div>span{width:42px;height:42px;border-radius:12px;background:#eaf3ff;display:grid;place-items:center;font-size:22px}.nik-command label{display:flex;flex-direction:column}.nik-command label small{color:#778399;font-weight:500}.nik-command input{border:0;outline:0;background:#f5f8fc;border-radius:11px;padding:13px 15px;font-size:15px}.final-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}.final-stats>div{position:relative;background:#fff;border:1px solid #e3e9f1;border-radius:17px;padding:17px 18px;box-shadow:0 5px 18px rgba(21,47,82,.04)}.final-stats span{position:absolute;right:15px;top:15px;width:36px;height:36px;border-radius:11px;background:#edf5ff;display:grid;place-items:center}.final-stats small,.final-stats em{display:block;color:#778399;font-style:normal}.final-stats b{display:block;font-size:28px;margin:6px 0 2px}.final-stats em{font-size:10px}.quick-card .section-title small{display:block;margin-top:3px}.top{background:rgba(244,247,251,.9);backdrop-filter:blur(12px);padding:8px 0}.userbox{background:#fff;border:1px solid #e3e9f1;border-radius:12px;padding:8px 12px}.side{box-shadow:8px 0 28px rgba(7,28,59,.08)}.nav a{transition:.18s}.nav a:hover{transform:translateX(2px)}
@media(max-width:1000px){.final-hero{grid-template-columns:1fr}.hero-identity{display:none}.final-stats{grid-template-columns:1fr 1fr}.nik-command{grid-template-columns:1fr}.nik-command .btn{width:100%}}
@media(max-width:600px){.final-hero{padding:26px 22px;border-radius:19px}.final-hero h1{font-size:28px}.final-stats{grid-template-columns:1fr 1fr}.nik-command>div{display:none}.main{padding:12px}.hero-actions .btn{width:100%;text-align:center}}
@media(max-width:390px){.final-stats{grid-template-columns:1fr}}
/* ===== v0.22 PORTAL WARGA ===== */
.public-body,.auth-body,.warga-body{margin:0;background:#f5f8fc;color:#17243b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.public-nav{height:76px;display:flex;align-items:center;gap:34px;padding:0 max(5vw,24px);background:#fff;border-bottom:1px solid #e8eef6;position:sticky;top:0;z-index:20}.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#122d56}.public-brand>span,.warga-logo>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#123d72;color:#fff;font-weight:900}.public-brand b{display:flex;flex-direction:column;font-size:14px}.public-brand small{font-size:9px;letter-spacing:.1em;color:#728198}.public-nav nav{display:flex;gap:26px;margin:auto}.public-nav nav a{color:#53647b;text-decoration:none;font-size:14px;font-weight:700}.public-nav>div{display:flex;gap:8px}.public-main{max-width:1440px;margin:auto}.citizen-hero{margin:28px max(4vw,22px);min-height:520px;border-radius:32px;padding:64px clamp(28px,6vw,88px);background:linear-gradient(135deg,#0d2f5b,#165da4);color:#fff;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;overflow:hidden;position:relative}.citizen-hero:after{content:"";position:absolute;width:520px;height:520px;border:90px solid rgba(255,255,255,.05);border-radius:50%;right:-180px;top:-150px}.citizen-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.02;margin:16px 0}.citizen-hero h1 strong{color:#7fd0ff}.citizen-hero p{max-width:650px;color:#d7e8fb;font-size:17px;line-height:1.7}.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:12px;color:#cfe7ff}.hero-phone{width:min(330px,90%);justify-self:end;background:#fff;color:#182b45;border-radius:32px;padding:22px;box-shadow:0 28px 60px #09244366;position:relative;z-index:2;transform:rotate(2deg)}.phone-head{color:#1b4c83;font-size:12px}.hello{background:#edf6ff;border-radius:18px;padding:18px;margin:18px 0;display:flex;flex-direction:column}.hello b{font-size:20px}.mini-family{display:flex;gap:12px;padding:16px;border:1px solid #e6edf6;border-radius:16px}.mini-family span{display:flex;flex-direction:column}.mini-family small{color:#8592a4}.phone-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.phone-actions i{font-style:normal;text-align:center;padding:14px 4px;background:#f4f7fb;border-radius:14px;color:#1a5b9d}.phone-actions small{display:block;color:#60748d}.phone-news{padding:14px;border-radius:14px;background:#f8fafc}.phone-news p{color:#718198;font-size:12px;margin:5px 0}.public-section{padding:70px max(5vw,28px)}.public-section>h2,.public-band h2{font-size:34px;margin:8px 0 28px}.section-kicker{font-size:11px;letter-spacing:.16em;font-weight:900;color:#1769b4}.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-cards a{padding:28px;border-radius:22px;background:#fff;border:1px solid #e5edf7;text-decoration:none;color:#1b2c44;box-shadow:0 8px 28px #16395c0a}.service-cards a:hover{transform:translateY(-3px);box-shadow:0 16px 36px #16395c16}.service-cards span{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#e9f4ff;color:#1769b4;font-size:22px}.service-cards b{display:block;margin:18px 0 8px}.service-cards p{font-size:13px;color:#75849a;line-height:1.6}.public-band{margin:20px max(5vw,28px);padding:48px;border-radius:28px;background:#eaf4ff;display:flex;justify-content:space-between;align-items:center}.public-band p{color:#62758d}.business-placeholder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.business-placeholder>div{background:#fff;padding:28px;border-radius:20px;display:grid;gap:8px;border:1px solid #e8eef6}.business-placeholder small{color:#7b899b}.public-footer{padding:34px max(5vw,28px);background:#0e2d55;color:#fff;display:flex;gap:22px;align-items:center}.public-footer span{color:#aac2dd}.public-footer a{margin-left:auto;color:#fff}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#dceeff,#f7f9fc 42%)}.auth-shell{width:min(960px,100%);min-height:620px;background:#fff;border-radius:30px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;box-shadow:0 30px 80px #15395c22}.auth-art{padding:58px;background:linear-gradient(150deg,#0d2d57,#1766ac);color:#fff;display:flex;flex-direction:column;justify-content:center}.auth-art>span{font-size:11px;letter-spacing:.16em;font-weight:900;color:#8fd4ff}.auth-art h1{font-size:48px;line-height:1.05;margin:16px 0}.auth-art p{color:#d3e5f8;line-height:1.7}.auth-art a{margin-top:40px;color:#fff;text-decoration:none}.auth-card{padding:54px;align-self:center}.auth-icon{display:grid;place-items:center;width:50px;height:50px;background:#e9f4ff;color:#1765aa;border-radius:16px}.auth-card h2{font-size:30px;margin:18px 0 5px}.auth-card>p{color:#7a899c}.auth-card label{display:block;font-size:12px;font-weight:800;margin:15px 0}.auth-card input{width:100%;box-sizing:border-box;margin-top:7px;padding:14px;border:1px solid #dce5ef;border-radius:12px;background:#fbfcfe}.auth-card label small{display:block;color:#8a98aa;margin-top:4px}.auth-submit{width:100%;margin-top:12px;padding:14px}.google-btn{width:100%;height:48px;border:1px solid #dce4ed;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#24344b;font-weight:800;margin-top:20px}.google-btn b{font-size:20px;color:#4285f4}.google-btn.disabled{opacity:.55}.google-btn small{font-weight:500}.or{height:30px;border-bottom:1px solid #e7edf4;text-align:center;margin-bottom:25px}.or span{position:relative;top:21px;background:#fff;padding:0 12px;color:#96a2b1;font-size:11px}.auth-error,.auth-success{padding:11px 13px;border-radius:10px;font-size:12px;margin-top:14px}.auth-error{background:#fff0f0;color:#a63333}.auth-success{background:#ecfaf2;color:#22734a}.auth-foot{text-align:center;font-size:12px}.auth-foot a{color:#1267b1;font-weight:800}.register-card{padding-top:34px;padding-bottom:34px}
.warga-layout{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.warga-side{background:#0f315d;color:#fff;padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;box-sizing:border-box}.warga-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:0 8px 24px}.warga-logo b{display:flex;flex-direction:column;font-size:13px}.warga-logo small{font-size:8px;letter-spacing:.14em;color:#89b5df}.warga-side nav{display:grid;gap:5px}.warga-side nav a{color:#b9cde1;text-decoration:none;padding:12px 13px;border-radius:12px;font-size:13px;font-weight:700}.warga-side nav a span{display:inline-block;width:26px}.warga-side nav a.active,.warga-side nav a:hover{background:#ffffff13;color:#fff}.warga-side-foot{margin-top:auto;padding:14px;border-top:1px solid #ffffff16;display:flex;flex-direction:column;gap:4px}.warga-side-foot small{color:#8fabc7}.warga-side-foot a{color:#bcd3e8;font-size:11px;margin-top:7px}.warga-main{min-width:0;padding:0 34px 70px}.warga-top{height:74px;display:flex;align-items:center;justify-content:space-between}.warga-top>div{display:flex;flex-direction:column}.warga-top small{font-size:9px;letter-spacing:.1em;color:#8391a5}.warga-top b{font-size:16px}.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#175e9e;color:#fff;text-decoration:none;font-weight:900}.warga-hero{padding:34px 38px;border-radius:25px;background:linear-gradient(135deg,#123d72,#1a6fb6);color:#fff;display:flex;justify-content:space-between;align-items:center}.warga-hero span{font-size:10px;letter-spacing:.12em;color:#a9d8ff}.warga-hero h1{font-size:34px;margin:8px 0}.warga-hero p{color:#d5e8fa}.status-card{background:#ffffff12;border:1px solid #ffffff1f;border-radius:18px;padding:20px;min-width:230px;display:flex;flex-direction:column}.status-card b{font-size:20px;margin:6px 0}.status-card span{font-size:11px;color:#cce4f9}.warga-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.warga-stat-grid>div{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:18px;display:grid;grid-template-columns:auto 1fr;column-gap:12px}.warga-stat-grid span{grid-row:1/3;font-size:24px}.warga-stat-grid b{font-size:18px}.warga-stat-grid small{color:#7e8c9f}.warga-section{background:#fff;border:1px solid #e7edf5;border-radius:22px;padding:24px;margin:18px 0}.warga-services{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.warga-services a{border:1px solid #e8eef5;border-radius:16px;padding:18px;text-decoration:none;color:#20314a;display:flex;flex-direction:column;gap:5px}.warga-services a>span{font-size:22px;color:#1769b4}.warga-services small{color:#8290a3}.warga-empty{padding:30px;text-align:center;background:#f8fafc;border-radius:14px;color:#748397}.letter-list{display:grid;gap:8px}.letter-list a{display:flex;align-items:center;gap:12px;padding:13px;background:#f8fafc;border-radius:13px;text-decoration:none;color:#26364e}.letter-list a>div{flex:1;display:flex;flex-direction:column}.letter-list small{color:#8492a4}.letter-list em{font-style:normal;font-size:11px;padding:6px 9px;border-radius:99px;background:#e8f3ff;color:#1764a7}.warga-page-head{padding:28px 4px}.warga-page-head span{font-size:10px;letter-spacing:.14em;color:#1769b4;font-weight:900}.warga-page-head h1{font-size:34px;margin:8px 0}.warga-page-head p{color:#75859a}.link-pending,.profile-card{max-width:650px;margin:30px auto;background:#fff;border:1px solid #e5edf6;border-radius:24px;padding:42px;text-align:center}.link-pending>span{font-size:38px}.link-pending p{color:#748499;line-height:1.7}.family-profile{background:#fff;border:1px solid #e7edf5;border-radius:22px;padding:25px}.family-head{display:flex;align-items:center;gap:16px}.family-head>span,.member-grid>div>span{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#e9f4ff;color:#1767ad;font-weight:900}.family-head>div{flex:1}.family-head h2{margin:3px 0}.family-head p{margin:0;color:#7e8c9e}.family-head em{font-style:normal;background:#eaf8ef;color:#28744a;padding:7px 10px;border-radius:99px;font-size:11px}.family-facts{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;margin-top:20px}.family-facts>div{background:#f7f9fc;border-radius:14px;padding:14px;display:flex;flex-direction:column}.family-facts small{color:#8190a3}.member-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.member-grid>div{border:1px solid #e7edf5;border-radius:15px;padding:14px;display:grid;grid-template-columns:50px 1fr;gap:3px 12px}.member-grid>div>span{grid-row:1/3}.member-grid small{color:#8391a3}.profile-avatar{margin:auto;display:grid;place-items:center;width:82px;height:82px;border-radius:26px;background:#e9f4ff;color:#1765aa;font-size:30px;font-weight:900}.verify-pill{display:inline-block;padding:7px 11px;border-radius:99px;background:#fff5dc;color:#9a6a0c;font-size:11px}.profile-rows{text-align:left;margin:24px 0}.profile-rows>div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf1f6}.profile-rows small{color:#8491a2}.info-feature{background:linear-gradient(135deg,#123d72,#1a6fb6);color:#fff;border-radius:22px;padding:34px}.info-feature span{font-size:30px}.info-feature p{color:#d6e8fa}.info-placeholder-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.info-placeholder-grid>div{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:24px}.info-placeholder-grid small{color:#1769b4;font-weight:900}.info-placeholder-grid p{color:#7d8b9d}.warga-bottom{display:none}
@media(max-width:850px){.public-nav nav{display:none}.public-nav{height:66px;padding:0 16px}.public-nav>div .secondary{display:none}.citizen-hero{grid-template-columns:1fr;padding:38px 24px;margin:12px;min-height:auto}.citizen-hero h1{font-size:42px}.hero-phone{display:none}.service-cards{grid-template-columns:1fr 1fr}.public-band{margin:12px;display:block}.business-placeholder{grid-template-columns:1fr}.public-footer{flex-wrap:wrap}.public-footer a{margin-left:0}.auth-shell{grid-template-columns:1fr;min-height:auto}.auth-art{display:none}.auth-card{padding:32px 24px}.warga-layout{display:block}.warga-side{display:none}.warga-main{padding:0 14px 90px}.warga-top{height:64px}.warga-hero{padding:25px;display:block}.status-card{margin-top:20px;min-width:0}.warga-stat-grid{grid-template-columns:1fr 1fr}.warga-stat-grid>div:last-child{grid-column:1/-1}.warga-services{grid-template-columns:1fr 1fr}.warga-bottom{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:70px;background:#fff;border-top:1px solid #e2e9f2;z-index:30;padding-bottom:env(safe-area-inset-bottom)}.warga-bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#718096;font-size:18px}.warga-bottom small{font-size:9px}.warga-bottom .center{width:58px;height:58px;border-radius:50%;background:#1768ad;color:#fff;justify-self:center;transform:translateY(-13px);box-shadow:0 10px 24px #1768ad55}.family-facts,.member-grid,.info-placeholder-grid{grid-template-columns:1fr}.family-head{align-items:flex-start;flex-wrap:wrap}.family-head em{margin-left:66px}.letter-grid{grid-template-columns:1fr!important}.service-cards{gap:10px}.public-section{padding:46px 18px}}
/* v0.30 - Beranda Publik Warga */
.public-v30{background:#f5f8fc;color:#14233a}.v30-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #e7edf5}.v30-nav nav a{font-weight:750;color:#50627a}.public-auth{display:flex;gap:8px}.v30-hero{max-width:1240px;margin:24px auto 0;padding:64px 58px;border-radius:32px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:56px;align-items:center;overflow:hidden;position:relative;background:linear-gradient(125deg,#092b55 0%,#10579a 58%,#1685d6 100%);color:#fff;box-shadow:0 25px 60px rgba(13,57,105,.2)}.v30-hero:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-220px;top:-280px;background:rgba(255,255,255,.08)}.v30-hero-copy{position:relative;z-index:2}.v30-hero h1{font-size:58px;line-height:1.03;letter-spacing:-.04em;margin:18px 0}.v30-hero h1 strong{color:#9fd7ff}.v30-hero-copy>p{max-width:700px;font-size:17px;line-height:1.75;color:#d7e9fa}.v30-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;font-size:11px;color:#c9e3f7}.v30-app-card{position:relative;z-index:2;background:#fff;color:#172942;border-radius:30px;padding:24px;box-shadow:0 24px 50px rgba(4,27,54,.25);transform:rotate(1.5deg)}.v30-app-top{display:flex;justify-content:space-between;font-size:12px}.v30-app-top i{color:#36a76b}.v30-welcome{margin:28px 0 18px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#edf6ff,#f7fbff)}.v30-welcome small{font-size:9px;letter-spacing:.12em;color:#4281ba}.v30-welcome b{display:block;font-size:22px;margin-top:5px}.v30-welcome p{font-size:11px;color:#708197}.v30-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.v30-quick a{text-decoration:none;color:#1d4f7d;background:#f4f8fc;border-radius:14px;padding:13px 5px;text-align:center;font-size:20px}.v30-quick small{display:block;font-size:8px;color:#65758a;margin-top:5px}.v30-notice{display:flex;gap:10px;align-items:center;margin-top:16px;padding:14px;border:1px solid #e6edf5;border-radius:15px}.v30-notice>span{font-size:8px;background:#e9f4ff;color:#1768ad;padding:6px;border-radius:8px}.v30-notice div{display:flex;flex-direction:column}.v30-notice small{color:#8290a2;font-size:9px}.v30-section{max-width:1240px;margin:auto;padding:78px 28px}.v30-title-row{display:flex;justify-content:space-between;align-items:end}.v30-title-row p,.v30-section>p{color:#738398}.v30-services{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.v30-services>a{display:grid;grid-template-columns:58px 1fr;gap:16px;text-decoration:none;color:#20324b;background:#fff;border:1px solid #e4ebf4;border-radius:22px;padding:25px;box-shadow:0 8px 24px rgba(20,52,88,.04);transition:.2s}.v30-services>a:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(20,52,88,.09)}.v30-services>a>span{width:58px;height:58px;border-radius:17px;background:#edf6ff;color:#1769b4;display:grid;place-items:center;font-size:26px}.v30-services b{font-size:17px}.v30-services p{color:#76869a;font-size:13px;line-height:1.55;margin:7px 0}.v30-services em{font-style:normal;color:#1769b4;font-size:11px;font-weight:800}.v30-services .featured{background:linear-gradient(135deg,#0e4e8d,#176eb8);color:#fff;border:0}.v30-services .featured>span{background:#ffffff18;color:#fff}.v30-services .featured p,.v30-services .featured em{color:#d6eaff}.v30-info-wrap{max-width:1184px;margin:0 auto 60px;display:grid;grid-template-columns:1.35fr .65fr;border-radius:28px;overflow:hidden;background:#0d315d;color:#fff}.v30-info-main{padding:48px}.v30-info-main h2{font-size:36px;margin:10px 0}.v30-info-main p{color:#c9ddf0;line-height:1.7}.v30-info-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.v30-info-tags span{padding:8px 11px;border-radius:99px;background:#ffffff10;border:1px solid #ffffff18;font-size:10px}.v30-info-side{padding:40px;background:#fff;color:#1c2e46;display:flex;flex-direction:column;justify-content:center}.v30-info-side small{color:#1769b4;font-weight:900;letter-spacing:.12em}.v30-info-side b{font-size:20px;margin:10px 0}.v30-info-side p{color:#77879a;line-height:1.6}.v30-info-side a{color:#1769b4;font-weight:800;text-decoration:none}.v30-community{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center;margin-top:28px}.v30-community-art{height:300px;border-radius:28px;background:linear-gradient(#dff1ff 0 58%,#d7ebcf 58%);position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:12px;padding-bottom:58px}.v30-community-art:after{content:"";position:absolute;left:0;right:0;bottom:0;height:54px;background:#8cb985}.v30-house{font-size:75px;color:#1c6aa8;position:relative;z-index:2}.v30-house.h2{font-size:95px;color:#164e84}.v30-house.h3{font-size:65px;color:#2d84bd}.v30-community-art>span{position:absolute;bottom:16px;z-index:3;color:#fff;font-weight:900}.v30-community-copy h3{font-size:30px;line-height:1.25}.v30-community-copy>p{color:#748397;line-height:1.7}.v30-values{display:grid;gap:9px;margin-top:22px}.v30-values span{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;background:#fff;border:1px solid #e7edf5}.v30-values b{color:#1769b4}.v30-business{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.v30-business article{background:#fff;border:1px solid #e5ecf4;border-radius:22px;padding:28px}.v30-business article>span{font-size:28px;color:#1769b4}.v30-business b{display:block;font-size:18px;margin:15px 0 7px}.v30-business p{color:#77879a;min-height:42px}.v30-business a{color:#9aa7b7;font-size:11px;text-decoration:none}.v30-cta{max-width:1184px;margin:0 auto 70px;padding:40px 45px;border-radius:28px;background:linear-gradient(135deg,#e7f4ff,#f8fbff);display:flex;justify-content:space-between;align-items:center;gap:25px}.v30-cta small{font-size:9px;color:#1769b4;font-weight:900;letter-spacing:.12em}.v30-cta h2{margin:8px 0}.v30-cta p{color:#748397}.v30-cta>div:last-child{display:flex;gap:8px;flex-shrink:0}.v30-footer{justify-content:space-between}.v30-footer>div{display:flex;align-items:center;gap:18px}.v30-footer a{margin:0;color:#fff;text-decoration:none;font-size:12px}
@media(max-width:850px){.v30-nav nav{display:none}.public-auth .secondary{display:none}.v30-hero{margin:10px;padding:42px 24px;grid-template-columns:1fr;border-radius:24px}.v30-hero h1{font-size:43px}.v30-app-card{display:none}.v30-trust{display:grid;gap:7px}.v30-section{padding:55px 16px}.v30-services{grid-template-columns:1fr}.v30-info-wrap{margin:0 12px 45px;grid-template-columns:1fr}.v30-info-main,.v30-info-side{padding:30px 24px}.v30-info-main h2{font-size:29px}.v30-community{grid-template-columns:1fr}.v30-community-art{height:220px}.v30-community-copy h3{font-size:25px}.v30-business{grid-template-columns:1fr}.v30-cta{margin:0 12px 40px;padding:30px 24px;display:block}.v30-cta>div:last-child{margin-top:20px}.v30-footer,.v30-footer>div{align-items:flex-start;flex-direction:column}.v30-footer>div:last-child{gap:14px}}

/* =========================================================
   HARD RESPONSIVE PATCH v31 - all pages / all screens
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}body{width:100%;max-width:100%;overflow-x:hidden}img,svg,video,canvas,iframe{max-width:100%;height:auto}input,select,textarea,button{max-width:100%;font:inherit}pre,code{max-width:100%;overflow:auto}.main,.warga-main,main,.card,.panel,.table-wrap,.letter-grid,.ktp-workflow{min-width:0}.table-wrap,.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table{display:table;max-width:none}table{max-width:100%}.hero,.resident-hero,.final-hero,.warga-hero,.v30-hero{max-width:100%}
@media(max-width:1200px){.main{padding:20px}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.panels{grid-template-columns:minmax(0,1fr)}.v30-hero{margin-left:16px;margin-right:16px}.v30-section{padding-left:20px;padding-right:20px}}
@media(max-width:850px){.layout{display:block!important;min-height:100dvh}.main{width:100%!important;max-width:100%!important;padding:14px!important}.side{display:block!important}.top{width:100%;min-width:0}.menu-toggle{display:inline-grid!important;place-items:center;flex:0 0 42px;width:42px;height:42px}.search{min-width:0!important;width:auto!important;flex:1}.grid4,.dashboard-stats,.warga-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panels,.ktp-workflow,.letter-grid,.dashboard-columns,.v30-community{grid-template-columns:minmax(0,1fr)!important}.card{max-width:100%;overflow:hidden}.card:has(table){overflow-x:auto}.form,.form-grid.two,.ktp-form{grid-template-columns:minmax(0,1fr)!important}.form>* ,.form-grid.two>* ,.ktp-form>*{min-width:0}.warga-main{width:100%;max-width:100%}.warga-top{width:100%}.public-v30,.public-section,.v30-section{max-width:100%;overflow:hidden}}
@media(max-width:600px){.main{padding:10px!important}.top{gap:7px}.userbox{display:none}.hero,.resident-hero,.final-hero,.warga-hero{padding:20px!important;border-radius:16px}.hero h1,.resident-hero h1,.final-hero h1,.warga-hero h1{font-size:clamp(22px,7vw,30px)!important;line-height:1.12}.grid4,.dashboard-stats,.warga-stat-grid,.family-summary,.document-folders{grid-template-columns:minmax(0,1fr)!important}.service-cards,.warga-services,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card{padding:13px}.btn{white-space:normal;text-align:center}.form input,.form select,.form textarea,input,select,textarea{font-size:16px}.table{min-width:620px}.auth-card{width:100%;padding:25px 18px}.v30-hero{margin:8px!important;padding:30px 18px!important}.v30-hero h1{font-size:clamp(34px,11vw,43px)!important}.v30-title-row,.v30-cta{align-items:stretch;flex-direction:column}.v30-cta>div:last-child{flex-wrap:wrap}.v30-cta .btn{flex:1 1 100%}.official-letter.mini{transform-origin:top left}}
@media(max-width:390px){.main{padding:8px!important}.service-cards,.warga-services,.quick-grid{grid-template-columns:minmax(0,1fr)!important}.card{padding:11px}.v30-hero{padding:26px 16px!important}.v30-section{padding-left:12px!important;padding-right:12px!important}.warga-main{padding-left:9px!important;padding-right:9px!important;padding-bottom:86px!important}.warga-bottom small{font-size:8px}.auth-card{padding:22px 15px}}

/* v0.32 - Modern Color System / all pages */
:root{--nav:#0b2550;--blue:#2563eb;--bg:#f3f7fc;--text:#17233c;--muted:#66758d;--green:#10a66f;--orange:#f59e0b;--purple:#7c3aed;--cyan:#0891b2;--rose:#e11d48;--surface:#ffffff;--line:#e2e8f0}
body{background:radial-gradient(circle at 8% 0%,rgba(37,99,235,.08),transparent 28%),radial-gradient(circle at 95% 8%,rgba(16,166,111,.07),transparent 24%),var(--bg)}
.side{background:linear-gradient(180deg,#0b2550 0%,#123c76 55%,#0b2d59 100%);box-shadow:8px 0 28px rgba(15,42,82,.12)}
.brand{letter-spacing:-.02em}.nav a{transition:.2s;border:1px solid transparent}.nav a:hover,.nav a.active{background:linear-gradient(135deg,rgba(255,255,255,.19),rgba(83,164,255,.24));border-color:rgba(255,255,255,.14);box-shadow:0 7px 18px rgba(0,0,0,.10);transform:translateX(2px)}
.top{background:rgba(243,247,252,.78);backdrop-filter:blur(14px)}.search{border-color:#dbe5f0;box-shadow:0 5px 18px rgba(27,55,94,.05)}
.hero,.resident-hero,.citizen-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#e6f1ff 0%,#fff 48%,#e9fbf3 100%);border:1px solid rgba(37,99,235,.10);box-shadow:0 14px 35px rgba(25,64,112,.08)}
.hero:after,.resident-hero:after,.citizen-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-90px;background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.08));pointer-events:none}
.card,.scan-card,.data-card,.spouse-card,.children-card,.save-family,.letter-form-card,.letter-preview-shell{border-color:#e1e9f3;box-shadow:0 9px 28px rgba(28,55,90,.07);transition:transform .2s,box-shadow .2s,border-color .2s}.card:hover{border-color:#cddcf0;box-shadow:0 13px 32px rgba(28,55,90,.10)}
.stat,.dash-stat{position:relative;overflow:hidden;box-shadow:0 10px 24px rgba(28,55,90,.13)}.stat:after,.dash-stat:after{content:"";position:absolute;width:85px;height:85px;border-radius:50%;right:-22px;top:-24px;background:rgba(255,255,255,.14)}
.blue{background:linear-gradient(135deg,#1769dc,#4f9cff)}.green{background:linear-gradient(135deg,#059669,#34d399)}.orange{background:linear-gradient(135deg,#ea7b0c,#fbbf24)}.purple{background:linear-gradient(135deg,#6d3bd1,#9b72f2)}
.btn{background:linear-gradient(135deg,#1769dc,#3b82f6);box-shadow:0 6px 14px rgba(37,99,235,.18);transition:.18s}.btn:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(37,99,235,.24)}.btn.green{background:linear-gradient(135deg,#059669,#22c55e)}.btn.soft{background:linear-gradient(135deg,#eaf2ff,#f4f8ff);color:#1769d5;box-shadow:none}.btn.ghost{background:#f4f7fb;color:#4b5870;box-shadow:none}
.form input,.form select,.form textarea,.ktp-form input,.ktp-form textarea,.family-meta input,.child-grid input,.child-grid select,.letter-form-card input,.letter-form-card select,.letter-form-card textarea,.admin-letter-form input,.admin-letter-form select{border-color:#d9e3ef;background:#fbfdff;transition:.18s}.form input:focus,.form select:focus,.form textarea:focus,.ktp-form input:focus,.ktp-form textarea:focus,.family-meta input:focus,.child-grid input:focus,.child-grid select:focus,.letter-form-card input:focus,.letter-form-card select:focus,.letter-form-card textarea:focus,.admin-letter-form input:focus,.admin-letter-form select:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 4px rgba(37,99,235,.10);background:#fff}
.table th{background:linear-gradient(180deg,#f2f7ff,#eaf2fc);color:#24466f;font-weight:800}.table tbody tr{transition:.15s}.table tbody tr:hover{background:#f7fbff}.table td{border-bottom-color:#e9eff6}
.step-badge{background:linear-gradient(135deg,#dcecff,#eef6ff);color:#1769dc}.step-badge.done{background:linear-gradient(135deg,#d9f8ea,#effcf6);color:#07885a}.quality.ok,.status-pill{background:#dcfce7;color:#08784e}.quality.warn{background:#fff4cf;color:#9a5b00}.quality.bad{background:#ffe1e6;color:#b42343}
.quick-grid a,.doc-folder,.child-row,.recent-family{transition:.18s}.quick-grid a:hover,.doc-folder:hover{transform:translateY(-2px);border-color:#bfd4ef;box-shadow:0 8px 20px rgba(30,64,110,.08)}.quick-grid a:nth-child(4n+1)>span{background:#e8f2ff;color:#1769dc}.quick-grid a:nth-child(4n+2)>span{background:#e5f8ef;color:#07885a}.quick-grid a:nth-child(4n+3)>span{background:#fff1df;color:#c66a08}.quick-grid a:nth-child(4n)>span{background:#f0eaff;color:#6d3bd1}
.loginwrap,.auth-body{background:radial-gradient(circle at 20% 20%,rgba(82,160,255,.30),transparent 28%),radial-gradient(circle at 80% 70%,rgba(40,200,143,.22),transparent 30%),linear-gradient(135deg,#071d3d,#164f96)}.login,.auth-card{box-shadow:0 24px 65px rgba(0,20,55,.28);border:1px solid rgba(255,255,255,.65)}
.info-note{background:linear-gradient(135deg,#e7f3ff,#f2f8ff);border:1px solid #d1e7ff}.missing-box{background:linear-gradient(135deg,#fff5e8,#fffaf3);border:1px solid #ffe0b8}.ocr-mini{background:linear-gradient(135deg,#f3f7fc,#f9fbfe);border:1px solid #e6edf5}
@media(max-width:850px){.top{background:rgba(243,247,252,.94)}.side{box-shadow:14px 0 36px rgba(5,24,54,.28)}}
@media(max-width:560px){.card:hover{transform:none}.hero,.resident-hero,.citizen-hero{border-radius:16px}.stat,.dash-stat{border-radius:14px}}
@media print{body{background:#fff!important}.card,.official-letter{box-shadow:none!important}}

/* HARD CHECK FINAL - interaction, progress, top controls */
.top-search-form{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #dbe5f0;padding:9px 13px;border-radius:11px;min-width:280px;flex:1;max-width:620px;box-shadow:0 5px 18px rgba(27,55,94,.05)}
.top-search-form input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--text);font:inherit}.top-search-form input::placeholder{color:#8a96a8}
.mini-refresh{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid #dbe5f0;border-radius:10px;background:#fff;color:#315a8d;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 4px 13px rgba(25,55,90,.05);transition:.18s}.mini-refresh:hover{transform:rotate(18deg);border-color:#b9d0ed;background:#f7fbff}.warga-top-actions{display:flex;align-items:center;gap:8px}
.smart-progress[hidden]{display:none!important}.smart-progress{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px;background:rgba(8,23,47,.48);backdrop-filter:blur(5px)}.smart-progress-card{width:min(390px,92vw);background:#fff;border-radius:22px;padding:24px;box-shadow:0 28px 80px rgba(0,18,48,.32);text-align:center;border:1px solid rgba(255,255,255,.75)}.smart-progress-icon{width:48px;height:48px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:#e9f3ff;color:#1769dc;font-size:26px;animation:smartspin 1.1s linear infinite}.smart-progress-card b{font-size:18px}.smart-progress-card p{margin:7px 0 14px;color:#6b7890;font-size:13px}.smart-progress-track{height:9px;background:#edf2f8;border-radius:999px;overflow:hidden}.smart-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1769dc,#25b982);border-radius:inherit;transition:width .18s ease}.smart-progress-card strong{display:block;margin-top:9px;color:#24537d;font-size:13px}.smart-progress.is-error .smart-progress-icon{background:#fff0f1;color:#c5304d;animation:none}.progress-open{overflow:hidden}@keyframes smartspin{to{transform:rotate(360deg)}}
.profile-status-card{display:flex;align-items:center;gap:12px;margin:14px 0;padding:13px 14px;border:1px solid #dce8f5;border-radius:13px;background:#f7fbff;text-align:left}.profile-status-card span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e3f4ed;color:#087954;font-weight:900}.profile-status-card.incomplete span{background:#fff0d9;color:#a05b00}.profile-status-card b{display:block;font-size:13px}.profile-status-card small{display:block;color:#748197;margin-top:2px}.profile-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.module-note{display:flex;gap:14px;align-items:flex-start}.module-note>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eaf3ff;color:#1769dc;font-size:20px;flex:0 0 auto}.module-note h3{margin:0 0 5px}.module-note p{margin:0;color:var(--muted);line-height:1.55}
@media(max-width:850px){.top-search-form{min-width:0;max-width:none}.top .userbox{display:none}}
@media(max-width:520px){.top-search-form{padding:8px 10px}.top-search-form input{font-size:14px}.mini-refresh{width:34px;height:34px}.smart-progress-card{padding:21px 18px}}

/* Login pengelola */
.password-field{position:relative;display:flex;align-items:center}.password-field input{padding-right:96px!important;width:100%}.password-toggle{position:absolute;right:8px;border:0;background:rgba(15,43,85,.08);color:#173b6c;border-radius:9px;padding:7px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.password-toggle:hover{background:rgba(15,43,85,.14)}.auth-security-note{display:block;margin-top:12px;color:#748096;line-height:1.45;text-align:center}

/* ===== v0.28 AKUN & HAK AKSES PENGELOLA ===== */
.top-access-label{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 12px;border:1px solid #dfe7f1;background:#fff;border-radius:12px;color:#53647b;font-size:12px}.top-access-label span{flex:0 0 auto}.top-access-label b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-denied-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:#f4f7fb}.access-denied-card{width:min(520px,100%);padding:34px;text-align:center;border-radius:22px}.access-denied-card>span{width:62px;height:62px;display:grid;place-items:center;margin:0 auto 14px;border-radius:18px;background:#eaf3ff;font-size:28px}.access-denied-card h1{margin:0 0 8px}.access-denied-card p{margin:0 auto 20px;max-width:420px;color:#6f7d91;line-height:1.6}.admin-access-head{align-items:flex-start}.master-admin-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#fff4df;border:1px solid #f3d39e;color:#8c5700;font-size:10px;font-weight:900;letter-spacing:.06em}.admin-access-alert{margin:0 0 16px;padding:13px 15px;border-radius:12px;font-weight:700}.admin-access-alert.success{background:#e9f8f1;border:1px solid #bfe9d7;color:#176b4b}.admin-access-alert.error{background:#fff0f1;border:1px solid #f4c5cc;color:#a32a3d}.admin-access-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}.admin-access-summary>div{position:relative;background:#fff;border:1px solid #e3e9f1;border-radius:17px;padding:17px 18px;box-shadow:0 5px 18px rgba(21,47,82,.04)}.admin-access-summary>div>span{position:absolute;right:15px;top:15px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#edf5ff}.admin-access-summary small,.admin-access-summary em{display:block;color:#778399;font-style:normal}.admin-access-summary b{display:block;font-size:28px;margin:6px 0 2px}.admin-access-summary em{font-size:10px}.admin-create-card{margin-bottom:18px}.admin-account-form{display:block}.admin-account-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.admin-account-fields>label:not(.admin-active-toggle){display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#41526a}.admin-account-fields input[type=text],.admin-account-fields input[type=password],.admin-account-fields input:not([type]){width:100%;box-sizing:border-box;border:1px solid #dce4ef;border-radius:11px;background:#fff;padding:12px 13px;font:inherit;color:#1b2d45;outline:0}.admin-account-fields input:focus{border-color:#98bee9;box-shadow:0 0 0 3px rgba(51,127,215,.09)}.admin-active-toggle{display:flex!important;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dce6f1;border-radius:12px;background:#f8fbff;cursor:pointer}.admin-active-toggle input{width:18px;height:18px;accent-color:#1769dc}.admin-active-toggle span{display:flex;flex-direction:column}.admin-active-toggle b{font-size:12px}.admin-active-toggle small{font-size:10px;color:#7b8798;margin-top:2px}.permission-picker-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:20px 0 10px}.permission-picker-head>div:first-child{display:flex;flex-direction:column;gap:3px}.permission-picker-head small{color:#778399}.permission-picker-head>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.permission-option{position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid #dfe6ef;border-radius:13px;background:#fff;cursor:pointer;transition:.16s}.permission-option:hover{border-color:#b9cce3;background:#fbfdff}.permission-option:has(input:checked){border-color:#9ec5ee;background:#f3f9ff;box-shadow:inset 3px 0 #2377d7}.permission-option input{width:18px;height:18px;accent-color:#1769dc}.permission-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#edf5ff;font-size:17px}.permission-option>span:nth-of-type(2){display:flex;min-width:0;flex-direction:column}.permission-option b{font-size:12px}.permission-option small{font-size:10px;color:#778399;line-height:1.35;margin-top:2px}.permission-option i{font-style:normal;font-size:9px;font-weight:900;color:#8793a5;text-transform:uppercase}.permission-option:has(input:checked) i{color:#1769dc}.admin-form-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid #e8edf3}.admin-form-submit b{font-size:12px}.admin-form-submit p{margin:3px 0 0;color:#778399;font-size:10px;line-height:1.45}.admin-list-section{margin-top:18px}.admin-account-list{display:grid;gap:10px}.admin-account-item{padding:0;overflow:hidden}.admin-account-item>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}.admin-account-item>summary::-webkit-details-marker{display:none}.admin-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#153f75;color:#fff;font-weight:900}.admin-summary-name{display:flex;min-width:0;flex-direction:column}.admin-summary-name b,.admin-summary-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-summary-name small{color:#778399;margin-top:3px}.account-state{padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.06em}.account-state.on{background:#e6f7ef;color:#14724e}.account-state.off{background:#f1f3f6;color:#7a8290}.admin-account-item>summary>strong{font-size:11px;color:#315a8d}.admin-account-item[open]>summary{background:#f7faff;border-bottom:1px solid #e4eaf2}.admin-edit-form{padding:2px 16px 16px}.master-account-note{display:flex;align-items:flex-start;gap:13px;margin-top:18px;background:#fffaf0;border-color:#f0dfbd}.master-account-note>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff0cf}.master-account-note b{display:block}.master-account-note p{margin:4px 0 0;color:#776a54;line-height:1.55;font-size:12px}.access-dashboard-note{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;background:#f8fbff}.access-dashboard-note>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eaf3ff}.access-dashboard-note p{margin:4px 0 0;color:#778399}.dashboard-columns.single-column{grid-template-columns:1fr}.quick-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;border:1px dashed #d7e0eb;border-radius:14px;color:#748197;text-align:center}.quick-empty span{font-size:24px}.quick-empty b{margin-top:8px;color:#34465e}.quick-empty small{margin-top:4px;max-width:320px}
@media(max-width:780px){.admin-access-summary{grid-template-columns:1fr 1fr}.admin-account-fields,.permission-grid{grid-template-columns:1fr}.permission-picker-head,.admin-form-submit{align-items:stretch;flex-direction:column}.admin-form-submit .btn{width:100%}.admin-account-item>summary{grid-template-columns:auto minmax(0,1fr) auto}.admin-account-item>summary>strong{display:none}}
@media(max-width:520px){.admin-access-summary{grid-template-columns:1fr}.admin-access-head{gap:12px}.master-admin-badge{align-self:flex-start}.admin-account-item>summary{padding:12px}.account-state{font-size:8px}.permission-option{grid-template-columns:auto auto 1fr}.permission-option i{display:none}.top-access-label{display:none}}

/* v0.29 - Review surat, penomoran, pratinjau dan unduh PDF */
.letter-admin-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:13px 15px;border:1px solid #cfe4fb;background:#f2f8ff;border-radius:13px;color:#244d77}.letter-admin-note>span{font-size:20px}.letter-admin-note b{display:block}.letter-admin-note p{margin:4px 0 0;font-size:12px;color:#5d718a}.table-actions{display:flex;gap:7px;flex-wrap:wrap}.status-diajukan{background:#fff7dc;color:#9a6700}.status-diproses{background:#e9f3ff;color:#1769d5}.status-disetujui,.status-selesai{background:#ddf8ed;color:#087a54}.status-ditolak{background:#fee8ea;color:#b4233e}
.admin-review-head{align-items:flex-end}.review-head-actions,.preview-download-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.review-status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.review-status-strip>div{background:#fff;border:1px solid #e2eaf4;border-radius:12px;padding:13px}.review-status-strip small{display:block;color:#77859a;font-size:11px;margin-bottom:5px}.review-status-strip b{font-size:13px}.admin-review-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.review-edit-card label{display:block;font-size:12px;font-weight:800;color:#536078;margin-bottom:11px}.review-edit-card input,.review-edit-card textarea,.review-edit-card select{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:10px 11px;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#15233d;font:inherit}.review-edit-card textarea{resize:vertical}.review-section-gap{margin-top:20px}.review-flow-card{position:sticky;top:82px}.review-checklist{padding:0;margin:0;list-style:none;display:grid;gap:10px}.review-checklist li{position:relative;padding:11px 11px 11px 38px;background:#f7f9fc;border-radius:10px}.review-checklist li:before{content:counter(list-item);position:absolute;left:11px;top:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e7f1ff;color:#1769d5;font-size:11px;font-weight:900}.review-checklist b,.review-checklist span{display:block}.review-checklist span{margin-top:3px;font-size:11px;color:#718096}.review-action-stack{display:grid;gap:8px;margin-top:16px}.review-action-stack .btn{width:100%}.btn.danger-soft{background:#fff0f1;color:#b4233e;box-shadow:none;border:1px solid #ffd2d8}.review-help{font-size:11px;color:#718096;line-height:1.5;margin:13px 0 0}.signature-lock-note{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;margin-top:13px;border-radius:11px;background:#f3f6fa;border:1px dashed #cbd7e5}.signature-lock-note>span{font-size:20px}.signature-lock-note b{display:block;color:#233a56}.signature-lock-note p{margin:4px 0 0;color:#66768c;font-size:11px;line-height:1.5}.letter-preview-warning{margin:0 auto 14px;max-width:210mm;padding:12px 14px;border-radius:11px;background:#fff8df;border:1px solid #f0df9d;color:#805f00;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.letter-download-modal[hidden]{display:none!important}.letter-download-modal{position:fixed;inset:0;z-index:100001;background:rgba(7,22,44,.56);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.letter-download-dialog{width:min(430px,94vw);background:#fff;border-radius:22px;padding:26px;text-align:center;box-shadow:0 30px 90px rgba(4,23,48,.34);border:1px solid rgba(255,255,255,.8)}.letter-download-icon{width:56px;height:56px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;background:#e6f7ef;color:#08875b;font-size:30px;font-weight:900}.letter-download-dialog h2{margin:0;font-size:23px}.letter-download-dialog p{margin:8px auto 20px;color:#68778c;line-height:1.55;font-size:13px;max-width:340px}.letter-download-buttons{display:grid;grid-template-columns:1fr 1.25fr;gap:9px}.letter-download-buttons .btn{width:100%}
@media(max-width:1000px){.admin-review-grid{grid-template-columns:1fr}.review-flow-card{position:static}.review-status-strip{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.review-head-actions,.preview-download-actions{width:100%}.review-head-actions .btn,.preview-download-actions .btn{flex:1}.review-status-strip{grid-template-columns:1fr}.letter-download-buttons{grid-template-columns:1fr}.letter-download-dialog{padding:22px 17px}.table-actions{min-width:150px}}

/* v0.31 - Modern top navigation + identity verification */
body.admin-body{--admin-navy:#0b2348;--admin-blue:#1d6fe8;--admin-line:#dfe7f1;background:linear-gradient(180deg,#f4f7fb 0,#f7f9fc 100%);min-height:100vh}
body.admin-body .admin-shell{min-height:100vh;display:block}
body.admin-body .admin-header{position:sticky;top:0;z-index:900;background:rgba(247,249,252,.94);border-bottom:1px solid rgba(215,225,238,.9);box-shadow:0 8px 28px rgba(17,42,78,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.admin-body .admin-navbar{height:68px;display:flex;align-items:center;gap:14px;padding:0 24px;background:linear-gradient(100deg,#0b2348,#123b73 58%,#174f93);color:#fff}
body.admin-body .admin-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:176px;color:#fff}
body.admin-body .admin-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#ddebff);color:#0f3d78;font-weight:950;font-size:13px;box-shadow:0 8px 22px rgba(2,13,35,.2)}
body.admin-body .admin-brand>span:last-child{display:flex;flex-direction:column;line-height:1.05}
body.admin-body .admin-brand b{font-size:13px;letter-spacing:.02em}
body.admin-body .admin-brand small{font-size:9px;opacity:.7;margin-top:4px;font-weight:600}
body.admin-body .admin-nav{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:6px 0}
body.admin-body .admin-nav::-webkit-scrollbar{display:none}
body.admin-body .admin-nav a{position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto;min-height:38px;padding:8px 10px;border-radius:10px;color:rgba(255,255,255,.8);font-size:11px;font-weight:800;white-space:nowrap;transition:.17s}
body.admin-body .admin-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
body.admin-body .admin-nav a.active{background:#fff;color:#143d75;box-shadow:0 7px 18px rgba(1,14,36,.16)}
body.admin-body .admin-nav-icon{display:grid;place-items:center;width:18px;height:18px;font-size:13px}
body.admin-body .nav-count{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ffdf79;color:#624700;font-size:8px;font-style:normal;font-weight:950}
body.admin-body .admin-user-compact{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-left:9px;border-left:1px solid rgba(255,255,255,.16)}
body.admin-body .admin-user-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-weight:900}
body.admin-body .admin-user-copy{display:flex;flex-direction:column;max-width:118px}
body.admin-body .admin-user-copy b,body.admin-body .admin-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.admin-body .admin-user-copy b{font-size:10px}.admin-user-copy small{font-size:8px;opacity:.68;margin-top:2px}
body.admin-body .admin-logout{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;font-size:17px}
body.admin-body .admin-logout:hover{background:rgba(255,255,255,.18)}
body.admin-body .admin-nav-mobile-logout{display:none!important}
body.admin-body .admin-toolbar{display:flex;align-items:center;gap:9px;min-height:54px;padding:8px 24px;max-width:1600px;margin:0 auto}
body.admin-body .admin-toolbar .top-search-form{max-width:620px;margin:0;box-shadow:none;background:rgba(255,255,255,.92)}
body.admin-body .admin-toolbar .top-access-label{min-height:38px;flex:1;max-width:620px}
body.admin-body .toolbar-notice{display:flex;align-items:center;gap:7px;margin-left:auto;padding:8px 11px;border:1px solid #f0d38f;border-radius:10px;background:#fff8df;color:#7b5a05;font-size:10px;font-weight:850;white-space:nowrap}
body.admin-body .toolbar-notice>span{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;background:#ffe9a8}
body.admin-body .admin-toolbar .mini-refresh{margin-left:auto;flex:0 0 auto}
body.admin-body .toolbar-notice+.mini-refresh{margin-left:0}
body.admin-body .admin-main{width:min(100%,1600px);margin:0 auto;padding:24px 26px 42px}
body.admin-body .menu-toggle{display:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);width:40px;height:40px;padding:9px;color:#fff}
body.admin-body .menu-toggle span{display:block;height:2px;border-radius:2px;background:currentColor;margin:4px 0}
body.admin-body .mobile-backdrop{display:none}
body.admin-body .card{border-color:#e1e8f1;box-shadow:0 8px 30px rgba(26,52,88,.055)}
body.admin-body .page-head{margin-top:4px}
body.admin-body .final-hero{border-radius:26px;box-shadow:0 20px 50px rgba(12,48,96,.18)}
body.admin-body .final-stats>div{border-radius:16px;box-shadow:0 8px 24px rgba(30,59,96,.05)}
body.admin-body .table th{color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:#f7f9fc}
body.admin-body .table tr:hover td{background:#fbfdff}

.identity-page-head{align-items:flex-start}.identity-security-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#eaf3ff;border:1px solid #cfe1f7;color:#22558e;font-size:10px;font-weight:900;white-space:nowrap}
.identity-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}.identity-stats>a{position:relative;display:grid;gap:3px;padding:15px 16px;border:1px solid #e0e7f0;border-radius:16px;background:#fff;box-shadow:0 6px 22px rgba(24,52,88,.045);transition:.17s}.identity-stats>a:hover,.identity-stats>a.active{border-color:#9dc2ec;transform:translateY(-1px)}.identity-stats>a.active:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:#2376d9}.identity-stats span{font-size:10px;font-weight:800;color:#67768b}.identity-stats b{font-size:26px}.identity-stats small{font-size:9px;color:#8a96a7}
.identity-approval-card{margin-bottom:16px;border-color:#ecdba6;background:linear-gradient(180deg,#fffdf7,#fff)}.identity-approval-list{display:grid;gap:8px}.identity-approval-item{display:grid;grid-template-columns:minmax(230px,1.2fr) minmax(170px,.8fr) auto;align-items:center;gap:12px;padding:10px 11px;border:1px solid #ede8da;border-radius:12px;background:#fff}.identity-approval-person{display:flex;align-items:center;gap:9px;min-width:0}.identity-approval-person>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#edf5ff;color:#1b65bc;font-weight:900}.identity-approval-person>div{min-width:0}.identity-approval-person b,.identity-approval-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-approval-person small,.identity-approval-item>div:nth-child(2)>small{font-size:9px;color:#7c8798;margin-top:3px}.identity-recommendation{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.06em}.identity-recommendation.cocok{background:#e3f8ed;color:#08744e}.identity-recommendation.tidak_cocok{background:#ffebed;color:#a6283a}
.identity-workspace{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(520px,1.28fr);gap:16px;align-items:start}.identity-list-card{padding:14px;position:sticky;top:138px;max-height:calc(100vh - 158px);overflow:hidden;display:flex;flex-direction:column}.identity-search{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px;border:1px solid #dfe7f1;border-radius:12px;background:#f8fbff}.identity-search>span{padding-left:7px;color:#386da8}.identity-search input{min-width:0;border:0;outline:0;background:transparent;font:inherit;color:#20334d}.identity-search .btn{padding:9px 12px}.identity-list-head{display:flex;justify-content:space-between;gap:10px;padding:14px 3px 9px;border-bottom:1px solid #edf1f5}.identity-list-head b{font-size:11px}.identity-list-head small{font-size:9px;color:#8490a1}.identity-user-list{overflow:auto;padding:5px 1px 2px;scrollbar-width:thin}.identity-user-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:9px 7px;border-radius:11px;border:1px solid transparent;transition:.15s}.identity-user-item:hover{background:#f7faff}.identity-user-item.active{background:#eef6ff;border-color:#c7def8}.identity-user-avatar{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:#eaf3ff;color:#1c65bb;font-weight:900}.identity-user-name{display:flex;min-width:0;flex-direction:column}.identity-user-name b,.identity-user-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-user-name b{font-size:11px}.identity-user-name small{font-size:9px;color:#7d899a;margin-top:3px}.identity-user-item>strong{color:#6681a2}.identity-status{display:inline-flex;align-items:center;justify-content:center;padding:5px 7px;border-radius:999px;font-size:8px;font-style:normal;font-weight:900;white-space:nowrap}.identity-status.pending{background:#fff4d8;color:#8e6500}.identity-status.verified{background:#def8ec;color:#087752}.identity-status.rejected{background:#fee9eb;color:#ab2a3e}.identity-status.large{padding:7px 10px;font-size:9px}
.identity-review-card{min-height:560px}.identity-empty-review{min-height:520px;display:grid;place-items:center;align-content:center;text-align:center;color:#738197}.identity-empty-review>span{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:#edf5ff;font-size:31px;margin-bottom:10px}.identity-empty-review h2{margin:0;color:#2a3b53}.identity-empty-review p{max-width:410px;line-height:1.6;margin:7px 0 0}.identity-review-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #e8edf3}.identity-review-title h2{margin:4px 0 3px;font-size:22px}.identity-review-title p{margin:0;color:#7c899b;font-size:10px}.identity-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}.identity-nik-panel,.identity-ktp-panel{border:1px solid #e0e7f0;border-radius:16px;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff)}.identity-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}.identity-panel-head>span{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#eaf3ff;color:#1769cf;font-size:10px;font-weight:950}.identity-panel-head b,.identity-panel-head small{display:block}.identity-panel-head b{font-size:11px}.identity-panel-head small{font-size:9px;color:#8692a3;margin-top:2px}.identity-nik-number{padding:15px 12px;border-radius:12px;background:#102d58;color:#fff;font-size:clamp(17px,2vw,23px);font-weight:900;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums}.identity-nik-panel dl{margin:12px 0 0;display:grid;gap:7px}.identity-nik-panel dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed #e2e8f0}.identity-nik-panel dt{font-size:9px;color:#8490a1}.identity-nik-panel dd{margin:0;text-align:right;font-size:10px;font-weight:800;color:#3b4e67}.identity-ktp-image{position:relative;display:block;width:100%;padding:0;border:0;background:#0a1526;border-radius:13px;overflow:hidden;cursor:zoom-in;aspect-ratio:1.586/1}.identity-ktp-image img{width:100%;height:100%;object-fit:contain;display:block}.identity-ktp-image>span{position:absolute;right:8px;bottom:8px;padding:6px 8px;border-radius:8px;background:rgba(5,17,35,.76);color:#fff;font-size:8px;font-weight:800}.identity-document-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#7f8a9a;font-size:8px}.identity-no-document{min-height:205px;display:grid;place-items:center;align-content:center;text-align:center;padding:18px;border:1px dashed #ccd8e6;border-radius:13px;background:#f8fafc}.identity-no-document>span{font-size:26px}.identity-no-document b{margin-top:7px}.identity-no-document p{max-width:330px;margin:5px 0 11px;color:#78869a;font-size:10px;line-height:1.5}.identity-latest-review{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin-top:13px;padding:11px 13px;border-radius:12px;background:#f4f7fb;border:1px solid #e2e9f2}.identity-latest-review>span{grid-row:1/3;padding:5px 7px;align-self:start;border-radius:8px;background:#fff;color:#6d7a8e;font-size:8px;font-weight:900;text-transform:uppercase}.identity-latest-review b,.identity-latest-review small{display:block}.identity-latest-review b{font-size:10px}.identity-latest-review small{font-size:8px;color:#8490a1;margin-top:3px}.identity-latest-review p{grid-column:2;margin:0;font-size:9px;color:#657388;line-height:1.45}
.identity-review-form,.identity-decision-form{margin-top:14px;padding-top:14px;border-top:1px solid #e8edf3}.identity-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.identity-choice{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;padding:12px;border:1px solid #dfe6ef;border-radius:13px;cursor:pointer;background:#fff}.identity-choice>input{width:17px;height:17px;accent-color:#1769dc}.identity-choice>span{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-weight:950}.identity-choice.match>span{background:#e3f8ed;color:#087650}.identity-choice.mismatch>span{background:#ffeaec;color:#ae2a3e}.identity-choice b,.identity-choice small{display:block}.identity-choice b{font-size:10px}.identity-choice small{font-size:8px;color:#7f8b9d;line-height:1.4;margin-top:2px}.identity-choice:has(input:checked){border-color:#8cb9e9;box-shadow:0 0 0 3px rgba(44,119,205,.08)}.identity-choice:has(input:disabled){opacity:.5;cursor:not-allowed}.identity-note-label,.identity-decision-form>label{display:block;margin-top:11px;font-size:9px;font-weight:850;color:#53627a}.identity-note-label textarea,.identity-decision-form textarea{display:block;width:100%;margin-top:5px;padding:10px 11px;border:1px solid #dce4ee;border-radius:10px;resize:vertical;font:inherit;color:#20334c}.identity-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px;padding:11px 12px;border-radius:12px;background:#f5f9ff;border:1px solid #dce9f8}.identity-submit-bar b{font-size:10px}.identity-submit-bar p{margin:3px 0 0;color:#738198;font-size:8px;line-height:1.45}.identity-decision-form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.identity-decision-form>p{margin:9px 0 0;color:#78869a;font-size:9px;text-align:right}
.ktp-preview-dialog{width:min(980px,94vw);max-width:980px;border:0;border-radius:18px;padding:12px;background:#0b1526;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.38)}.ktp-preview-dialog::backdrop{background:rgba(2,10,23,.8);backdrop-filter:blur(3px)}.ktp-preview-dialog>div{display:grid;place-items:center;max-height:76vh;overflow:auto}.ktp-preview-dialog img{display:block;max-width:100%;max-height:74vh;border-radius:11px}.ktp-preview-dialog p{margin:9px 42px 2px 3px;color:#b9c6d8;font-size:9px}.ktp-dialog-close{position:absolute;right:14px;top:14px;z-index:2;width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(0,0,0,.45);color:#fff;font-size:23px;cursor:pointer}

@media(max-width:1180px){body.admin-body .admin-user-copy{display:none}body.admin-body .admin-brand{min-width:152px}.identity-workspace{grid-template-columns:320px minmax(0,1fr)}.identity-compare-grid{grid-template-columns:1fr}.identity-list-card{top:138px}}
@media(max-width:900px){body.admin-body.nav-open{overflow:hidden}body.admin-body .admin-navbar{height:62px;padding:0 14px;gap:9px}body.admin-body .admin-brand{min-width:0;flex:1}body.admin-body .admin-brand-mark{width:34px;height:34px;border-radius:10px}body.admin-body .menu-toggle{display:block;order:3}body.admin-body .admin-user-compact{order:2;border:0;padding:0}.admin-user-avatar{display:none!important}body.admin-body .admin-logout{display:none}body.admin-body .admin-nav{position:fixed;z-index:1002;left:10px;right:10px;top:70px;display:grid;align-content:start;gap:4px;padding:10px;max-height:calc(100vh - 84px);overflow-y:auto;transform:translateY(-14px) scale(.98);opacity:0;visibility:hidden;background:#0d2a54;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 24px 60px rgba(3,15,34,.32);transition:.18s}body.admin-body.nav-open .admin-nav{transform:none;opacity:1;visibility:visible}body.admin-body .admin-nav a{font-size:12px;padding:10px 12px}body.admin-body .admin-nav-mobile-logout{display:flex!important;border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:12px}body.admin-body .mobile-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(4,14,31,.5);opacity:0;visibility:hidden;transition:.18s}body.admin-body.nav-open .mobile-backdrop{opacity:1;visibility:visible}body.admin-body .admin-toolbar{min-height:52px;padding:7px 12px}body.admin-body .toolbar-notice{display:none}body.admin-body .admin-main{padding:16px 14px 34px}.identity-stats{grid-template-columns:1fr 1fr}.identity-workspace{grid-template-columns:1fr}.identity-list-card{position:static;max-height:430px}.identity-review-card{min-height:0}.identity-empty-review{min-height:300px}}
@media(max-width:620px){body.admin-body .admin-brand small{display:none}body.admin-body .admin-user-compact{display:none}body.admin-body .admin-toolbar .top-search-form{padding:8px 10px}.identity-page-head{align-items:stretch;flex-direction:column}.identity-security-badge{align-self:flex-start}.identity-stats{grid-template-columns:1fr 1fr}.identity-approval-item{grid-template-columns:1fr}.identity-approval-item .btn{width:100%}.identity-review-title{flex-direction:column}.identity-compare-grid{grid-template-columns:1fr}.identity-choice-grid{grid-template-columns:1fr}.identity-submit-bar{align-items:stretch;flex-direction:column}.identity-submit-bar .btn{width:100%}.identity-decision-form>div{display:grid}.identity-document-meta{flex-direction:column}.identity-user-item{grid-template-columns:auto minmax(0,1fr) auto}.identity-user-item>strong{display:none}.identity-status{font-size:7px}.identity-nik-number{font-size:17px}.ktp-preview-dialog{padding:9px}.ktp-preview-dialog p{margin-right:40px}}
@media(max-width:400px){body.admin-body .admin-main{padding:12px 9px 30px}.identity-stats{grid-template-columns:1fr}.identity-user-item{padding:8px 4px}.identity-status{max-width:92px;white-space:normal;text-align:center}.identity-review-card{padding:12px}.identity-nik-panel,.identity-ktp-panel{padding:11px}}
@media(min-width:901px){body.admin-body .admin-nav-icon{display:none}body.admin-body .admin-nav a{gap:3px;padding-left:7px;padding-right:7px;font-size:10px}body.admin-body .admin-brand{min-width:160px}body.admin-body .admin-user-copy{max-width:100px}}
body.admin-body .final-hero .hero-btn{background:#fff!important;color:#174a86!important;box-shadow:0 8px 20px rgba(3,24,54,.14)}
body.admin-body .final-hero .hero-btn.secondary{background:rgba(255,255,255,.11)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32);box-shadow:none}
@media(max-width:900px){body.admin-body .menu-toggle{font-size:22px;line-height:1;padding:0;display:grid;place-items:center}}
.verify-pill.verified{background:#e1f8ed;color:#087551}.verify-pill.rejected{background:#fee9eb;color:#a92a3e}.verify-pill.pending{background:#fff5dc;color:#9a6a0c}
@media(max-width:1180px){body.admin-body.nav-open{overflow:hidden}body.admin-body .menu-toggle{display:grid;place-items:center;order:3}body.admin-body .admin-user-compact{order:2}body.admin-body .admin-logout{display:none}body.admin-body .admin-nav{position:fixed;z-index:1002;left:12px;right:12px;top:76px;display:grid;align-content:start;gap:4px;padding:10px;max-height:calc(100vh - 92px);overflow-y:auto;transform:translateY(-14px) scale(.98);opacity:0;visibility:hidden;background:#0d2a54;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 24px 60px rgba(3,15,34,.32);transition:.18s}body.admin-body.nav-open .admin-nav{transform:none;opacity:1;visibility:visible}body.admin-body .admin-nav a{font-size:12px;padding:10px 12px}body.admin-body .admin-nav-icon{display:grid}body.admin-body .admin-nav-mobile-logout{display:flex!important;border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:12px}body.admin-body .mobile-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(4,14,31,.5);opacity:0;visibility:hidden;transition:.18s}body.admin-body.nav-open .mobile-backdrop{opacity:1;visibility:visible}}

/* =========================================================
   v0.32 - NAVBAR PORTAL WARGA: TOP NAV / RESPONSIVE
   ========================================================= */
body.warga-body{background:#f4f7fb;color:#17243b}
body.warga-body .warga-layout{display:block;min-height:100dvh}
body.warga-body .warga-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);box-shadow:0 8px 28px rgba(13,43,78,.08)}
body.warga-body .warga-navbar{height:70px;display:flex;align-items:center;gap:14px;padding:0 24px;background:linear-gradient(100deg,#0b2b55,#104d86 58%,#176daf);color:#fff}
body.warga-body .warga-brand{min-width:196px;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
body.warga-body .warga-brand-mark{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#fff,#ddebfa);color:#0d3f73;font-size:13px;font-weight:950;box-shadow:0 7px 18px rgba(2,18,39,.18)}
body.warga-body .warga-brand>span:last-child{display:flex;flex-direction:column;line-height:1.18}
body.warga-body .warga-brand b{font-size:13px;letter-spacing:.02em}
body.warga-body .warga-brand small{margin-top:3px;color:#bcd6ee;font-size:8px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
body.warga-body .warga-nav{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:3px}
body.warga-body .warga-nav a{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 9px;border:1px solid transparent;border-radius:11px;color:#cfe0f0;text-decoration:none;font-size:10px;font-weight:800;white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .18s}
body.warga-body .warga-nav a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-1px)}
body.warga-body .warga-nav a.active{background:#fff;color:#104b82;border-color:#fff;box-shadow:0 8px 18px rgba(3,23,47,.18)}
body.warga-body .warga-nav-icon{display:none;width:18px;height:18px;place-items:center;font-size:13px}
body.warga-body .warga-nav-mobile-logout{display:none!important}
body.warga-body .warga-user-compact{display:flex;align-items:center;gap:9px;min-width:156px;justify-content:flex-end}
body.warga-body .warga-user-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font-size:12px;font-weight:950}
body.warga-body .warga-user-copy{min-width:0;max-width:112px;display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:1.18}
body.warga-body .warga-user-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
body.warga-body .warga-user-copy small{margin-top:3px;color:#b9d3eb;font-size:8px}
body.warga-body .warga-logout{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;color:#d8e7f5;text-decoration:none;font-size:15px;transition:.18s}
body.warga-body .warga-logout:hover{background:rgba(255,255,255,.11);color:#fff}
body.warga-body .warga-menu-toggle{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer}
body.warga-body .warga-toolbar{min-height:50px;display:flex;align-items:center;gap:12px;padding:6px 24px;background:#fff;border-bottom:1px solid #e8eef5}
body.warga-body .warga-toolbar-title{min-width:0;display:flex;flex-direction:column;line-height:1.18}
body.warga-body .warga-toolbar-title small{font-size:7.5px;letter-spacing:.14em;font-weight:900;color:#7a8da4}
body.warga-body .warga-toolbar-title b{margin-top:3px;font-size:13px;color:#1a2d46}
body.warga-body .warga-toolbar-status{margin-left:auto;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f1f8f4;color:#397156;font-size:9px}
body.warga-body .warga-toolbar-status span{color:#31a36a;font-size:8px}
body.warga-body .warga-main{width:min(1440px,100%);min-width:0;margin:0 auto;padding:22px 24px 60px;box-sizing:border-box}
body.warga-body .mobile-backdrop{display:none}
body.warga-body .warga-bottom,body.warga-body .warga-side,body.warga-body .warga-top{display:none!important}

@media(max-width:1120px){
  body.warga-body.nav-open{overflow:hidden}
  body.warga-body .warga-navbar{height:64px;padding:0 14px;gap:9px}
  body.warga-body .warga-brand{min-width:0;flex:1}
  body.warga-body .warga-brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:10px}
  body.warga-body .warga-menu-toggle{display:grid;place-items:center;order:3}
  body.warga-body .warga-user-compact{order:2;min-width:0}
  body.warga-body .warga-user-copy,body.warga-body .warga-logout{display:none}
  body.warga-body .warga-user-avatar{width:34px;height:34px;border-radius:10px}
  body.warga-body .warga-nav{position:fixed;z-index:1002;left:12px;right:12px;top:72px;display:grid;align-content:start;justify-content:stretch;gap:4px;padding:10px;max-height:calc(100dvh - 86px);overflow-y:auto;transform:translateY(-14px) scale(.98);opacity:0;visibility:hidden;background:#0d315e;border:1px solid rgba(255,255,255,.12);border-radius:17px;box-shadow:0 24px 60px rgba(3,15,34,.32);transition:.18s}
  body.warga-body.nav-open .warga-nav{transform:none;opacity:1;visibility:visible}
  body.warga-body .warga-nav a{min-height:43px;padding:0 12px;font-size:12px;justify-content:flex-start;color:#d5e4f2}
  body.warga-body .warga-nav a.active{background:#fff;color:#104b82}
  body.warga-body .warga-nav-icon{display:grid}
  body.warga-body .warga-nav-mobile-logout{display:flex!important;border-top:1px solid rgba(255,255,255,.12);border-radius:0;margin-top:4px;padding-top:9px}
  body.warga-body .mobile-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(4,14,31,.5);opacity:0;visibility:hidden;transition:.18s}
  body.warga-body.nav-open .mobile-backdrop{opacity:1;visibility:visible}
}
@media(max-width:700px){
  body.warga-body .warga-toolbar{min-height:48px;padding:6px 12px}
  body.warga-body .warga-toolbar-status{display:none}
  body.warga-body .warga-main{padding:14px 12px 34px}
  body.warga-body .warga-brand b{font-size:12px}
  body.warga-body .warga-brand small{font-size:7px}
  body.warga-body .warga-page-head{padding:18px 2px}
  body.warga-body .warga-page-head h1{font-size:clamp(26px,8vw,32px)}
}
@media(max-width:390px){
  body.warga-body .warga-navbar{padding:0 10px}
  body.warga-body .warga-brand{gap:8px}
  body.warga-body .warga-brand-mark{width:34px;height:34px;flex-basis:34px}
  body.warga-body .warga-user-avatar{display:none}
  body.warga-body .warga-main{padding-left:9px!important;padding-right:9px!important;padding-bottom:28px!important}
}

/* v0.33 - Penghapusan permanen pengajuan surat warga */
.letter-delete-form{display:inline-flex;margin:0}.btn.danger{background:linear-gradient(135deg,#be123c,#e11d48);color:#fff;border:1px solid transparent;box-shadow:0 7px 18px rgba(190,18,60,.22)}.btn.danger:hover{box-shadow:0 10px 22px rgba(190,18,60,.28)}
.letter-delete-modal[hidden]{display:none!important}.letter-delete-modal{position:fixed;inset:0;z-index:100005;background:rgba(7,20,40,.64);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.letter-delete-dialog{width:min(460px,95vw);background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:23px;padding:27px;box-shadow:0 34px 100px rgba(4,18,40,.38);text-align:center}.letter-delete-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:#fff0f2;color:#be123c;font-size:29px;font-weight:950;border:1px solid #ffd5dc}.letter-delete-dialog h2{margin:0;color:#17233c;font-size:23px}.letter-delete-dialog>p{margin:9px auto 17px;color:#68778c;font-size:13px;line-height:1.55;max-width:380px}.letter-delete-summary{padding:13px 14px;border-radius:14px;background:#f7f9fc;border:1px solid #e4eaf2;text-align:left;margin-bottom:19px}.letter-delete-summary small,.letter-delete-summary b,.letter-delete-summary span{display:block}.letter-delete-summary small{font-size:9px;font-weight:900;letter-spacing:.08em;color:#8793a4}.letter-delete-summary b{margin-top:5px;color:#263a55;font-size:13px}.letter-delete-summary span{margin-top:4px;color:#748196;font-size:11px;line-height:1.45}.letter-delete-buttons{display:grid;grid-template-columns:1fr 1.28fr;gap:9px}.letter-delete-buttons .btn{width:100%;justify-content:center}.letter-delete-modal.is-open{animation:letterDeleteFade .16s ease-out}.letter-delete-modal.is-open .letter-delete-dialog{animation:letterDeletePop .18s ease-out}@keyframes letterDeleteFade{from{opacity:0}to{opacity:1}}@keyframes letterDeletePop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:620px){.letter-delete-dialog{padding:22px 17px;border-radius:20px}.letter-delete-buttons{grid-template-columns:1fr}.letter-delete-buttons .btn{min-height:44px}.preview-download-actions .letter-delete-form{flex:1}.preview-download-actions .letter-delete-form .btn{width:100%}}

/* =========================================================
   v0.34 - DOKUMEN IDENTITAS WARGA / KTP + KK
   ========================================================= */
body.warga-body .warga-nav a.locked{opacity:.88;border-color:rgba(255,255,255,.08)}
body.warga-body .warga-nav a.locked:hover{background:rgba(255,255,255,.06);transform:none}
body.warga-body .warga-nav-lock{margin-left:2px;padding:3px 5px;border-radius:999px;background:rgba(255,255,255,.13);color:#d9e8f6;font-size:6.5px;font-style:normal;font-weight:900;letter-spacing:.05em;text-transform:uppercase}

.identity-profile-shell{width:min(1180px,calc(100% - 28px));grid-template-columns:minmax(300px,.82fr) minmax(520px,1.18fr);align-items:stretch}
.identity-profile-shell .auth-art{position:relative;overflow:hidden}
.identity-access-note{margin-top:26px;padding:15px 16px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.identity-access-note b,.identity-access-note span{display:block}.identity-access-note b{font-size:11px;color:#fff}.identity-access-note span{margin-top:6px;color:#d2e1ef;font-size:10px;line-height:1.55}
.identity-profile-form{max-width:none!important}.identity-upload-title{margin:4px 0 10px;padding-top:3px}.identity-upload-title b,.identity-upload-title small{display:block}.identity-upload-title b{font-size:12px;color:#22364f}.identity-upload-title small{margin-top:3px;color:#7c899a;font-size:9px;line-height:1.45}
.identity-upload-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:10px}
.identity-upload-card{position:relative;display:block!important;margin:0!important;padding:11px;border:1px solid #dce5ef;border-radius:16px;background:#fbfdff;cursor:pointer;transition:.18s;overflow:hidden}
.identity-upload-card:hover{border-color:#9dbbd8;box-shadow:0 9px 24px rgba(24,65,106,.09);transform:translateY(-1px)}
.identity-upload-card.ready{border-color:#b8ddca;background:linear-gradient(180deg,#fbfffd,#f4fbf7)}.identity-upload-card.missing{border-color:#f0c6c6;background:linear-gradient(180deg,#fff,#fff8f8)}.identity-upload-card.selected{border-color:#7db1e4;background:#f6fbff}
.identity-upload-badge{position:absolute;z-index:2;right:8px;top:8px;padding:4px 7px;border-radius:999px;background:#eef3f8;color:#53677e;font-size:7px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.identity-upload-card.ready .identity-upload-badge{background:#e2f5e9;color:#27724a}.identity-upload-card.missing .identity-upload-badge{background:#ffe8e8;color:#a43a3a}
.identity-upload-preview{height:132px;border-radius:12px;background:#edf3f8;display:grid;place-items:center;overflow:hidden;position:relative}.identity-upload-preview>span:not(:last-child),.identity-upload-preview>b{font-size:31px}.identity-upload-preview img{width:100%;height:100%;object-fit:contain;background:#0c1726}.identity-upload-preview>span:last-child{position:absolute;left:7px;bottom:7px;padding:4px 6px;border-radius:7px;background:rgba(8,22,40,.72);color:#fff;font-size:7px;font-weight:850}
.identity-upload-card>b{display:block;margin-top:9px;color:#25394f;font-size:11px}.identity-upload-card>small{display:block;min-height:31px;margin-top:4px;color:#768499;font-size:8px;line-height:1.45}.identity-upload-card input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.identity-upload-card>em{display:block;margin-top:8px;padding:7px 8px;border:1px solid #d9e4ef;border-radius:9px;background:#fff;color:#235e96;text-align:center;font-size:8px;font-style:normal;font-weight:900}
.identity-upload-hint{margin:9px 0 14px;padding:10px 11px;border-radius:11px;background:#f2f6fa;color:#66768a;font-size:8.5px;line-height:1.5}.identity-upload-hint b{color:#344d68}

.profile-document-section{margin-top:18px;padding-top:17px;border-top:1px solid #e6edf4;text-align:left}.profile-document-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.profile-document-head>div{min-width:0}.profile-document-head span{font-size:7px;font-weight:950;letter-spacing:.12em;color:#6584a5}.profile-document-head h3{margin:4px 0 3px;font-size:16px;color:#20344d}.profile-document-head p{max-width:650px;margin:0;color:#718095;font-size:9px;line-height:1.5}
.profile-document-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px}.profile-document-card{position:relative;display:grid;grid-template-columns:135px minmax(0,1fr);gap:12px;padding:11px;border:1px solid #dfe7f0;border-radius:16px;background:#fff;min-width:0}.profile-document-card.ready{border-color:#c5e2d1;background:#fbfffc}.profile-document-card.missing{border-color:#eed0d0;background:#fffafa}.profile-document-image{height:92px;border-radius:11px;background:#edf3f8;display:grid;place-items:center;overflow:hidden;position:relative}.profile-document-image img{width:100%;height:100%;object-fit:contain;background:#0c1726}.profile-document-image>b{font-size:28px}.profile-document-image>span{position:absolute;left:6px;bottom:6px;padding:4px 6px;border-radius:7px;background:rgba(7,22,41,.72);color:#fff;font-size:6.5px;font-weight:850}.profile-document-card>div:nth-child(2){align-self:center;min-width:0}.profile-document-card small{font-size:6.5px;font-weight:950;letter-spacing:.1em;color:#7188a0}.profile-document-card h4{margin:4px 0 3px;color:#263a53;font-size:12px}.profile-document-card p{margin:0;color:#738196;font-size:8px;line-height:1.45}.profile-document-card>em{position:absolute;right:9px;top:9px;padding:4px 6px;border-radius:999px;background:#eef2f6;color:#68798e;font-size:6.5px;font-style:normal;font-weight:900}.profile-document-card.ready>em{background:#e5f6eb;color:#28734a}.profile-document-card.missing>em{background:#ffeaea;color:#a33d3d}
.profile-letter-lock{display:flex;align-items:center;gap:11px;margin-top:11px;padding:12px 13px;border:1px solid #f0cece;border-radius:14px;background:#fff8f8}.profile-letter-lock>span{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:11px;background:#ffe8e8}.profile-letter-lock>div{min-width:0;flex:1}.profile-letter-lock b{display:block;color:#713b3b;font-size:10px}.profile-letter-lock p{margin:3px 0 0;color:#8a6767;font-size:8px;line-height:1.45}.profile-letter-lock.ready{border-color:#c8e4d3;background:#f7fdf9}.profile-letter-lock.ready>span{background:#e1f5e9;color:#258052;font-weight:950}.profile-letter-lock.ready b{color:#245d42}.profile-letter-lock.ready p{color:#5f7c6c}

.identity-compare-grid.identity-triple{grid-template-columns:minmax(0,.78fr) repeat(2,minmax(0,1fr))}.identity-kk-panel .identity-panel-head>span{background:#f1ecff;color:#6b48bc}.identity-kk-image{aspect-ratio:1.42/1}.identity-document-warning{margin-top:13px}.identity-document-warning b{margin-right:5px}

@media(max-width:1180px){.identity-compare-grid.identity-triple{grid-template-columns:1fr 1fr}.identity-compare-grid.identity-triple .identity-nik-panel{grid-column:1/-1}.identity-profile-shell{grid-template-columns:minmax(280px,.75fr) minmax(480px,1.25fr)}}
@media(max-width:850px){.identity-profile-shell{display:block;width:min(720px,calc(100% - 20px))}.identity-profile-shell .auth-art{min-height:auto;padding-bottom:24px}.identity-upload-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.profile-document-grid{grid-template-columns:1fr}.profile-letter-lock{align-items:flex-start;flex-wrap:wrap}.profile-letter-lock .btn{width:100%;justify-content:center}.profile-document-head{align-items:stretch;flex-direction:column}.profile-document-head .btn{align-self:flex-start}}
@media(max-width:620px){.identity-upload-grid{grid-template-columns:1fr}.identity-upload-preview{height:150px}.identity-compare-grid.identity-triple{grid-template-columns:1fr}.identity-compare-grid.identity-triple .identity-nik-panel{grid-column:auto}.profile-document-card{grid-template-columns:105px minmax(0,1fr)}.profile-document-image{height:82px}}
.admin-access-alert.warning{background:#fff8e8;border:1px solid #f1db9c;color:#7a5b12}

/* =========================================================
   v0.35 - RESPONSIVE & TYPOGRAPHY POLISH / ALL SCREENS
   Desktop lebar, laptop, tablet, mobile. Fokus keterbacaan,
   ritme kartu, form, tabel dan navigasi tanpa mengubah fungsi.
   ========================================================= */
:root{
  --ui-radius:16px;
  --ui-radius-lg:22px;
  --ui-gap:clamp(12px,1.3vw,18px);
  --ui-pad:clamp(14px,1.45vw,22px);
  --ui-body:clamp(13.5px,.92vw,15px);
  --ui-small:clamp(11px,.76vw,12px);
  --ui-title:clamp(24px,2.25vw,34px);
}
html{font-size:16px;scroll-behavior:smooth}
body{line-height:1.5}
button,input,select,textarea{font-size:inherit;line-height:1.35}
button,.btn,a{touch-action:manipulation}
.card,.warga-section,.family-profile,.info-placeholder-grid>div,.profile-card,.link-pending{min-width:0}
.card{border-radius:var(--ui-radius);padding:var(--ui-pad)}
.card h2,.card h3,.card h4{line-height:1.25;text-wrap:balance}
.card h3{font-size:clamp(16px,1.18vw,18px);margin-bottom:12px}
.card p,.module-note p,.page-head p,.warga-page-head p{line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 15px;border-radius:11px;font-size:13px;line-height:1.25}
input,select,textarea{min-height:42px}
textarea{min-height:92px}
.section-title{align-items:flex-start}.section-title>div{min-width:0}
.section-title b{font-size:clamp(14px,1.05vw,16px);line-height:1.3}
.section-title small{line-height:1.5}
.page-head,.warga-page-head{gap:14px}
.page-head h1,.warga-page-head h1{font-size:var(--ui-title);line-height:1.15;letter-spacing:-.02em}
.eyebrow,.section-kicker{font-size:10.5px;line-height:1.3;letter-spacing:.12em}
.table th,.table td{padding:12px 13px;font-size:13px;vertical-align:middle;line-height:1.45}
.table th{font-size:10.5px!important;white-space:nowrap}
.table-wrap{border-radius:12px}

/* Admin: ukuran konten dan navbar nyaman pada layar lebar */
body.admin-body .admin-main{width:min(100%,1540px);padding:clamp(18px,2vw,28px) clamp(14px,2.2vw,32px) 48px;font-size:var(--ui-body)}
body.admin-body .admin-navbar{padding-inline:clamp(14px,1.8vw,28px);gap:clamp(8px,1vw,14px)}
body.admin-body .admin-brand{min-width:168px}
body.admin-body .admin-brand b{font-size:13.5px}
body.admin-body .admin-brand small{font-size:10px}
body.admin-body .admin-nav a{font-size:11.5px;min-height:40px;padding:8px 9px}
body.admin-body .admin-user-copy b{font-size:11px}
body.admin-body .admin-user-copy small{font-size:10px}
body.admin-body .admin-toolbar{padding-inline:clamp(14px,2vw,28px)}
body.admin-body .toolbar-notice{font-size:11px}
body.admin-body .admin-main small{font-size:var(--ui-small);line-height:1.45}
body.admin-body .admin-main p{font-size:clamp(12.5px,.88vw,14px)}
body.admin-body .final-hero{padding:clamp(24px,2.7vw,38px);gap:clamp(18px,2vw,30px)}
body.admin-body .final-hero h1{font-size:clamp(28px,2.8vw,39px);line-height:1.1}
body.admin-body .final-hero p{font-size:clamp(13px,.95vw,15px)}
body.admin-body .hero-identity{width:clamp(150px,13vw,190px);height:clamp(150px,13vw,190px);border-radius:34px}
body.admin-body .hero-identity b{font-size:clamp(34px,3.2vw,44px)}
body.admin-body .final-stats,body.admin-body .grid4,body.admin-body .admin-access-summary,body.admin-body .identity-stats{gap:var(--ui-gap)}
body.admin-body .final-stats>div,body.admin-body .admin-access-summary>div,body.admin-body .mini-stat{padding:clamp(15px,1.25vw,19px)}
body.admin-body .final-stats b,body.admin-body .admin-access-summary b{font-size:clamp(24px,2vw,29px)}
body.admin-body .final-stats em,body.admin-body .admin-access-summary em{font-size:11px}
body.admin-body .permission-option b,body.admin-body .admin-active-toggle b,body.admin-body .admin-form-submit b{font-size:13px}
body.admin-body .permission-option small,body.admin-body .admin-active-toggle small,body.admin-body .admin-form-submit p{font-size:11px}
body.admin-body .permission-option i{font-size:10px}
body.admin-body .account-state{font-size:10px}
body.admin-body .identity-security-badge{font-size:11px}
body.admin-body .identity-stats span{font-size:11px}
body.admin-body .identity-stats small{font-size:10.5px}
body.admin-body .identity-list-head b,body.admin-body .identity-user-name b,body.admin-body .identity-panel-head b{font-size:12px}
body.admin-body .identity-list-head small,body.admin-body .identity-user-name small,body.admin-body .identity-panel-head small{font-size:10.5px}
body.admin-body .identity-status{font-size:9.5px;padding:6px 8px}
body.admin-body .identity-status.large{font-size:10px}
body.admin-body .identity-review-title p{font-size:11.5px}
body.admin-body .identity-nik-panel dt{font-size:11px}
body.admin-body .identity-nik-panel dd{font-size:11.5px}
body.admin-body .identity-ktp-image>span,body.admin-body .identity-document-meta{font-size:10px}
body.admin-body .identity-choice b{font-size:12px}
body.admin-body .identity-choice small{font-size:10.5px}
body.admin-body .identity-note-label,body.admin-body .identity-decision-form>label{font-size:11px}
body.admin-body .identity-submit-bar b{font-size:12px}
body.admin-body .identity-submit-bar p,body.admin-body .identity-decision-form>p{font-size:10.5px}
body.admin-body .identity-latest-review>span{font-size:9.5px}
body.admin-body .identity-latest-review b{font-size:11.5px}
body.admin-body .identity-latest-review small,body.admin-body .identity-latest-review p{font-size:10.5px}
body.admin-body .identity-approval-person small,body.admin-body .identity-approval-item>div:nth-child(2)>small{font-size:10.5px}
body.admin-body .identity-recommendation{font-size:9.5px}
body.admin-body .review-status-strip small{font-size:11.5px}
body.admin-body .review-status-strip b{font-size:14px}
body.admin-body .review-edit-card label{font-size:12.5px}
body.admin-body .review-checklist span,body.admin-body .review-help,body.admin-body .signature-lock-note p{font-size:11.5px}
body.admin-body .letter-admin-note p{font-size:12.5px}
body.admin-body .family-summary{gap:var(--ui-gap)}
body.admin-body .folder-grid{grid-template-columns:repeat(3,minmax(240px,1fr));gap:var(--ui-gap)}
body.admin-body .family-folder{min-height:0;padding:18px}
body.admin-body .folder-body p{font-size:12.5px}
body.admin-body .folder-foot{font-size:11.5px}
body.admin-body .dom-badge{font-size:10px}

/* Warga: seluruh konten lebih terbaca dan seimbang */
body.warga-body .warga-main{width:min(100%,1440px);padding:clamp(16px,1.8vw,24px) clamp(12px,2vw,28px) 56px;font-size:var(--ui-body)}
body.warga-body .warga-navbar{padding-inline:clamp(12px,1.8vw,26px)}
body.warga-body .warga-brand b{font-size:13.5px}
body.warga-body .warga-brand small{font-size:10px}
body.warga-body .warga-nav a{font-size:11.5px;min-height:40px;padding-inline:10px}
body.warga-body .warga-user-copy b{font-size:11px}
body.warga-body .warga-user-copy small{font-size:10px}
body.warga-body .warga-toolbar{padding-inline:clamp(12px,2vw,26px)}
body.warga-body .warga-toolbar-title small{font-size:10px}
body.warga-body .warga-toolbar-title b{font-size:13.5px}
body.warga-body .warga-toolbar-status{font-size:10.5px}
body.warga-body .warga-main small{font-size:var(--ui-small);line-height:1.45}
body.warga-body .warga-main p{font-size:clamp(12.5px,.92vw,14px)}
body.warga-body .warga-hero{padding:clamp(24px,2.6vw,38px);gap:20px}
body.warga-body .warga-hero h1{font-size:clamp(28px,3vw,38px);line-height:1.1}
body.warga-body .warga-hero span{font-size:10.5px}
body.warga-body .status-card{min-width:min(230px,100%)}
body.warga-body .warga-stat-grid{gap:var(--ui-gap)}
body.warga-body .warga-stat-grid>div{padding:clamp(15px,1.3vw,20px)}
body.warga-body .warga-stat-grid b{font-size:clamp(17px,1.35vw,20px)}
body.warga-body .warga-section{border-radius:var(--ui-radius-lg);padding:var(--ui-pad)}
body.warga-body .warga-services{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-gap)}
body.warga-body .warga-services a{min-width:0;padding:clamp(15px,1.4vw,20px);border-radius:15px}
body.warga-body .warga-services a>span{font-size:24px}
body.warga-body .letter-list a{min-width:0;flex-wrap:wrap}
body.warga-body .letter-list a>div{min-width:180px}
body.warga-body .profile-card,body.warga-body .link-pending{width:min(720px,100%);padding:clamp(24px,4vw,42px);margin-block:clamp(16px,3vw,30px)}
body.warga-body .family-profile{padding:var(--ui-pad)}
body.warga-body .family-facts{grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(260px,2fr)}
body.warga-body .member-grid{gap:var(--ui-gap)}
body.warga-body .member-grid>div{min-width:0}
body.warga-body .info-feature{padding:clamp(24px,3vw,36px)}
body.warga-body .info-placeholder-grid{gap:var(--ui-gap)}
body.warga-body .profile-status-card small{font-size:11.5px}
body.warga-body .warga-nav-lock{font-size:9px;padding:3px 6px}

/* Dokumen identitas: hilangkan teks mikro */
.identity-upload-title b{font-size:13px}.identity-upload-title small{font-size:11px}
.identity-upload-badge{font-size:9px;padding:4px 7px}
.identity-upload-preview>span:last-child{font-size:9px}
.identity-upload-card>b{font-size:12.5px}.identity-upload-card>small{font-size:10.5px;min-height:0}.identity-upload-card>em{font-size:10px;padding:8px}
.identity-upload-hint{font-size:10.5px}
.profile-document-head span{font-size:9.5px}.profile-document-head h3{font-size:17px}.profile-document-head p{font-size:11.5px}
.profile-document-image>span{font-size:9px}.profile-document-card small{font-size:9.5px}.profile-document-card h4{font-size:13px}.profile-document-card p{font-size:10.5px}.profile-document-card>em{font-size:9px}
.profile-letter-lock b{font-size:11.5px}.profile-letter-lock p{font-size:10.5px}

/* Landing/login: skala judul lebih wajar pada monitor besar maupun kecil */
.public-main{width:min(100%,1440px)}
.citizen-hero h1{font-size:clamp(36px,4.5vw,62px)}
.public-section>h2,.public-band h2{font-size:clamp(27px,2.6vw,36px)}
.v30-hero h1{font-size:clamp(36px,4.3vw,54px)}
.v30-info-main h2{font-size:clamp(27px,2.7vw,36px)}
.v30-community-copy h3{font-size:clamp(23px,2.2vw,30px)}
.v30-welcome small,.v30-quick small,.v30-notice small,.v30-cta small{font-size:10.5px}
.v30-welcome p{font-size:12px}.v30-notice>span{font-size:10px}
.v30-info-tags span{font-size:11px}
.v30-business a{font-size:11.5px}
.auth-shell{width:min(1000px,100%);min-height:min(620px,calc(100dvh - 48px))}
.auth-art{padding:clamp(34px,4vw,58px)}
.auth-art h1{font-size:clamp(34px,4vw,46px)}
.auth-card{padding:clamp(28px,4vw,54px)}
.auth-card h2{font-size:clamp(25px,2.5vw,30px)}
.auth-card label{font-size:12.5px}
.auth-card label small,.auth-foot,.auth-error,.auth-success{font-size:11.5px}

/* Breakpoint laptop: nav admin berubah hamburger sebelum terlalu padat */
@media(max-width:1280px){
  body.admin-body.nav-open{overflow:hidden}
  body.admin-body .menu-toggle{display:grid;place-items:center;order:3}
  body.admin-body .admin-user-compact{order:2}
  body.admin-body .admin-logout{display:none}
  body.admin-body .admin-nav{position:fixed;z-index:1002;left:12px;right:12px;top:76px;display:grid;align-content:start;gap:4px;padding:10px;max-height:calc(100dvh - 92px);overflow-y:auto;transform:translateY(-14px) scale(.98);opacity:0;visibility:hidden;background:#0d2a54;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 24px 60px rgba(3,15,34,.32);transition:.18s}
  body.admin-body.nav-open .admin-nav{transform:none;opacity:1;visibility:visible}
  body.admin-body .admin-nav a{font-size:13px;min-height:44px;padding:10px 12px}
  body.admin-body .admin-nav-icon{display:grid}
  body.admin-body .admin-nav-mobile-logout{display:flex!important;border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:12px}
  body.admin-body .mobile-backdrop{display:block;position:fixed;z-index:1001;inset:0;background:rgba(4,14,31,.5);opacity:0;visibility:hidden;transition:.18s}
  body.admin-body.nav-open .mobile-backdrop{opacity:1;visibility:visible}
  .identity-workspace{grid-template-columns:300px minmax(0,1fr)}
  body.admin-body .folder-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}
}
@media(min-width:1281px){
  body.admin-body .admin-nav-icon{display:none}
}

/* Tablet */
@media(max-width:980px){
  .grid4,.final-stats,.admin-access-summary,.identity-stats,.family-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .panels,.dashboard-columns,.admin-review-grid,.identity-workspace,.ktp-workflow{grid-template-columns:minmax(0,1fr)!important}
  .identity-list-card,.review-flow-card,.scan-card{position:static!important;max-height:none!important}
  .folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .warga-services{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .family-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .family-facts>div:last-child{grid-column:1/-1}
  .profile-document-grid{grid-template-columns:1fr}
  .identity-profile-shell{display:block;width:min(760px,calc(100% - 20px))}
  .v30-hero{grid-template-columns:1fr;gap:24px}
  .v30-app-card{max-width:430px;justify-self:center;transform:none}
  .v30-info-wrap,.v30-community{grid-template-columns:1fr}
}

/* Mobile landscape / small tablet */
@media(max-width:760px){
  body.admin-body .admin-main{padding:14px 12px 34px}
  body.admin-body .admin-navbar{height:62px;padding-inline:12px}
  body.admin-body .admin-brand{min-width:0;flex:1}
  body.admin-body .admin-brand-mark{width:35px;height:35px}
  body.admin-body .admin-user-copy{display:none}
  body.admin-body .admin-toolbar{min-height:50px;padding:7px 11px}
  body.admin-body .toolbar-notice{display:none}
  body.warga-body .warga-main{padding:14px 12px 34px}
  body.warga-body .warga-toolbar{padding-inline:12px}
  body.warga-body .warga-toolbar-status{display:none}
  .page-head,.warga-page-head,.admin-review-head,.identity-page-head{align-items:stretch!important;flex-direction:column}
  .page-head .btn,.warga-page-head .btn{align-self:flex-start}
  .final-hero,.warga-hero{grid-template-columns:1fr!important;display:block}
  .hero-identity{display:none!important}
  .grid4,.final-stats,.admin-access-summary,.identity-stats,.family-summary,.warga-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .permission-grid,.admin-account-fields,.form,.form-grid.two,.ktp-form,.identity-choice-grid,.review-status-strip{grid-template-columns:1fr!important}
  .folder-grid,.upload-grid,.member-grid,.info-placeholder-grid{grid-template-columns:1fr!important}
  .member-editor-grid{grid-template-columns:1fr}
  .modern-form .wide,.member-editor-grid .wide,.ktp-form .wide{grid-column:auto}
  .admin-account-item>summary{grid-template-columns:auto minmax(0,1fr) auto}
  .admin-account-item>summary>strong{display:none}
  .permission-picker-head,.admin-form-submit,.identity-submit-bar,.profile-document-head{align-items:stretch;flex-direction:column}
  .admin-form-submit .btn,.identity-submit-bar .btn{width:100%}
  .identity-compare-grid,.identity-compare-grid.identity-triple{grid-template-columns:1fr!important}
  .identity-compare-grid.identity-triple .identity-nik-panel{grid-column:auto}
  .identity-review-title{flex-direction:column}
  .identity-decision-form>div{display:grid;grid-template-columns:1fr 1fr}
  .profile-document-card{grid-template-columns:120px minmax(0,1fr)}
  .letter-delete-dialog,.letter-download-dialog{border-radius:18px}
  .public-nav{padding-inline:14px;gap:12px}.public-nav>div{margin-left:auto}
  .v30-hero{margin:10px;padding:36px 22px;border-radius:22px}
  .v30-hero h1{font-size:clamp(32px,8vw,43px)}
  .v30-section{padding:48px 16px}
  .v30-app-card{display:none}
}

/* Mobile */
@media(max-width:520px){
  body.admin-body .admin-main,body.warga-body .warga-main{padding-left:10px!important;padding-right:10px!important}
  body.admin-body .admin-brand small,body.warga-body .warga-brand small{display:none}
  body.admin-body .admin-user-compact{display:none}
  body.warga-body .warga-user-avatar{display:none}
  .card,.warga-section,.family-profile{padding:14px;border-radius:14px}
  .btn{min-height:44px;padding:10px 13px;font-size:13px}
  .grid4,.final-stats,.admin-access-summary,.identity-stats,.family-summary,.warga-stat-grid{grid-template-columns:1fr!important}
  .warga-services,.service-cards,.quick-grid{grid-template-columns:1fr!important}
  .family-facts{grid-template-columns:1fr!important}.family-facts>div:last-child{grid-column:auto}
  .family-head{align-items:flex-start;flex-wrap:wrap}.family-head em{margin-left:0}
  .profile-rows>div{gap:8px;align-items:flex-start}.profile-rows b{text-align:right;overflow-wrap:anywhere}
  .letter-list a{align-items:flex-start}.letter-list em{margin-left:auto}
  .review-head-actions,.preview-download-actions,.table-actions{display:grid;grid-template-columns:1fr;width:100%}
  .review-head-actions .btn,.preview-download-actions .btn,.table-actions .btn{width:100%}
  .identity-decision-form>div{grid-template-columns:1fr}
  .identity-user-item{grid-template-columns:auto minmax(0,1fr) auto}
  .identity-user-item>strong{display:none}
  .identity-status{white-space:normal;text-align:center}
  .profile-document-card{grid-template-columns:1fr}.profile-document-image{height:160px}
  .identity-upload-grid{grid-template-columns:1fr}
  .identity-upload-preview{height:165px}
  .letter-delete-buttons,.letter-download-buttons{grid-template-columns:1fr}
  .public-auth .btn{padding-inline:11px}
  .auth-body{padding:12px}.auth-card{padding:25px 18px}.auth-shell{border-radius:20px}
  .v30-cta{padding:26px 20px}.v30-cta>div:last-child{display:grid;grid-template-columns:1fr}
}

/* Telepon sangat sempit */
@media(max-width:370px){
  body.admin-body .admin-main,body.warga-body .warga-main{padding-left:8px!important;padding-right:8px!important}
  body.admin-body .admin-navbar,body.warga-body .warga-navbar{padding-inline:9px}
  body.admin-body .admin-brand-mark,body.warga-body .warga-brand-mark{width:33px;height:33px;flex-basis:33px}
  body.admin-body .admin-brand b,body.warga-body .warga-brand b{font-size:12px}
  .card,.warga-section,.family-profile{padding:12px}
  .page-head h1,.warga-page-head h1{font-size:24px}
  .letter-delete-dialog,.letter-download-dialog{padding:19px 14px}
}

/* Ultra-wide: konten tetap nyaman dibaca, tidak terlalu melebar */
@media(min-width:1800px){
  body.admin-body .admin-main{width:1580px}
  body.warga-body .warga-main{width:1480px}
  .public-main{max-width:1500px}
}

@media print{
  .admin-header,.warga-header,.mini-refresh,.menu-toggle,.mobile-backdrop{display:none!important}
  body.admin-body .admin-main,body.warga-body .warga-main{width:100%!important;padding:0!important}
}
/* v0.35.1 - minimum readable labels */
.public-brand small{font-size:10px}
body.warga-body .warga-nav-lock{font-size:10px}
.identity-upload-badge{font-size:10px}
.profile-document-head span{font-size:10.5px}
.profile-document-image>span,.profile-document-card small,.profile-document-card>em{font-size:10px}
/* v0.35.2 - desktop 1281-1500: cegah menu admin terpotong */
@media(min-width:1281px) and (max-width:1500px){
  body.admin-body .admin-brand{min-width:150px}
  body.admin-body .admin-nav{gap:2px}
  body.admin-body .admin-nav a{font-size:11px;padding-inline:7px}
  body.admin-body .admin-user-copy{display:none}
  body.admin-body .admin-user-compact{padding-left:6px}
}

/* v36 - Pemulihan kata sandi warga dengan OTP */
.auth-inline-actions{display:flex;justify-content:flex-end;margin:-4px 0 5px}.auth-inline-actions a{font-size:12px;font-weight:800;color:#1765aa;text-decoration:none}.auth-inline-actions a:hover{text-decoration:underline}.otp-auth-shell{min-height:580px}.otp-card{max-width:520px;width:100%;box-sizing:border-box}.otp-security-art{margin-top:28px;padding:16px 18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.08);display:grid;gap:5px}.otp-security-art b{font-size:13px}.otp-security-art span{font-size:12px;line-height:1.55;color:#d8e9fa}.otp-help-box{margin:18px 0 6px;padding:14px 15px;border-radius:13px;background:#eef6ff;border:1px solid #d6eaff;display:grid;gap:4px}.otp-help-box b{font-size:12.5px;color:#164f87}.otp-help-box span{font-size:11.5px;line-height:1.5;color:#65778d}.otp-input{text-align:center!important;font-size:24px!important;font-weight:850!important;letter-spacing:.3em!important;padding-left:calc(14px + .3em)!important}.otp-resend{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#77869a}.otp-resend a{font-weight:800;color:#1765aa;text-decoration:none}.otp-resend a:hover{text-decoration:underline}
@media(max-width:850px){.otp-auth-shell{min-height:auto}.otp-card{max-width:none}.otp-input{font-size:22px!important}}
@media(max-width:390px){.auth-inline-actions a,.otp-resend{font-size:11.5px}.otp-help-box{padding:12px}.otp-input{font-size:20px!important;letter-spacing:.24em!important}}

/* =========================================================
   v0.37 - FIX NAVBAR MOBILE CLICK / TOUCH LAYER
   Overlay sebelumnya berada di atas stacking-context header,
   sehingga menu terlihat namun sentuhan diterima backdrop.
   ========================================================= */
@media(max-width:1120px){
  body.warga-body.nav-open .warga-header{z-index:1100}
  body.warga-body .mobile-backdrop{pointer-events:none}
  body.warga-body.nav-open .mobile-backdrop{pointer-events:auto}
  body.warga-body .warga-nav{pointer-events:none}
  body.warga-body.nav-open .warga-nav{pointer-events:auto}
  body.warga-body .warga-nav a,body.warga-body .warga-menu-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
@media(max-width:1280px){
  body.admin-body.nav-open .admin-header{z-index:1100}
  body.admin-body .mobile-backdrop{pointer-events:none}
  body.admin-body.nav-open .mobile-backdrop{pointer-events:auto}
  body.admin-body .admin-nav{pointer-events:none}
  body.admin-body.nav-open .admin-nav{pointer-events:auto}
  body.admin-body .admin-nav a,body.admin-body .menu-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}

/* ============================================================
   Data RT 01 RW 03 • MODERN MINIMAL DESIGN SYSTEM • 2026
   Shared visual refresh only; existing business logic intact.
   ============================================================ */
:root{--nav:#12243a;--blue:#2563eb;--bg:#f6f8fc;--text:#18263b;--muted:#718096;--green:#059669;--orange:#e99529;--purple:#7461d8;--modern-line:#e7ecf3;--modern-shadow:0 9px 35px rgba(25,43,75,.045)}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9ac1ff!important;outline-offset:3px}::selection{background:#dbeafe;color:#153b78}
body.admin-body,body.warga-body{background:#f7f9fc!important;color:#1b2b42}body.admin-body .admin-shell,body.warga-body .warga-layout{min-height:100vh;background:transparent!important}body.admin-body .admin-header,body.warga-body .warga-header{background:#fff!important;color:#182b44!important;border-bottom:1px solid var(--modern-line)!important;box-shadow:0 2px 16px rgba(15,35,60,.025)!important}body.admin-body .admin-navbar,body.warga-body .warga-navbar{background:#fff!important;color:#182b44!important}body.admin-body .admin-brand,body.warga-body .warga-brand{color:#172a44!important}body.admin-body .admin-brand small,body.warga-body .warga-brand small{color:#8491a4!important}body.admin-body .admin-brand-mark,body.warga-body .warga-brand-mark{background:#2563eb!important;color:#fff!important;border:0!important;border-radius:13px!important;box-shadow:none!important}body.admin-body .admin-nav,body.warga-body .warga-nav{background:transparent!important;box-shadow:none!important}body.admin-body .admin-nav a,body.warga-body .warga-nav a{color:#687990!important;background:transparent!important;border:1px solid transparent!important;border-radius:11px!important;font-weight:650!important}body.admin-body .admin-nav a:hover,body.warga-body .warga-nav a:hover{color:#1e56ad!important;background:#f1f6ff!important}body.admin-body .admin-nav a.active,body.warga-body .warga-nav a.active{color:#1f5fd3!important;background:#eaf2ff!important;border-color:#e1edff!important;box-shadow:none!important}body.admin-body .admin-nav-icon,body.warga-body .warga-nav-icon{color:inherit!important}body.admin-body .admin-toolbar,body.warga-body .warga-toolbar{background:#fff!important;color:#1d304a!important;border-color:var(--modern-line)!important}body.admin-body .admin-user-compact,body.warga-body .warga-user-compact{color:#23344e!important}body.admin-body .admin-user-copy small,body.warga-body .warga-user-copy small{color:#8794a6!important}body.admin-body .admin-user-avatar,body.warga-body .warga-user-avatar{background:#edf3ff!important;color:#235bcb!important;border:1px solid #dfebff!important}body.admin-body .admin-logout,body.warga-body .warga-logout,body.admin-body .mini-refresh,body.warga-body .mini-refresh{background:#f4f7fb!important;color:#51647e!important;border:1px solid #e7edf5!important;border-radius:10px!important}body.admin-body .top-search-form{background:#f7f9fc!important;border:1px solid var(--modern-line)!important;border-radius:12px!important;box-shadow:none!important}body.admin-body .top-search-form input{background:transparent!important;color:#1d304a!important}body.admin-body .admin-main,body.warga-body .warga-main{background:transparent!important;max-width:1500px!important;margin-inline:auto!important;padding:26px 24px 65px!important;width:100%!important}body.admin-body .admin-main>*,body.warga-body .warga-main>*{min-width:0}
/* Universally consistent surfaces */
.card,.panel,.stat,.service-card,.quick-card,.info-card,.auth-card,.v30-business article,.v30-services>a,body.admin-body .card,body.warga-body .card{border:1px solid var(--modern-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--modern-shadow)!important;color:#24344a}.card,.panel{padding:clamp(16px,2vw,24px)}.card h3,.panel h3{color:#1c2d46;letter-spacing:-.025em}.grid4,.quick-grid,.service-cards,.warga-stat-grid{gap:15px!important}.stat{min-height:120px!important;padding:21px!important}.stat b{color:#142943}.stat small,.stat span{color:#718199}.stat.blue,.stat.green,.stat.orange,.stat.purple{background:#fff!important}.stat.blue{border-top:3px solid #2563eb!important}.stat.green{border-top:3px solid #059669!important}.stat.orange{border-top:3px solid #f0a52e!important}.stat.purple{border-top:3px solid #8b75d8!important}.hero,.final-hero,.warga-hero,.citizen-hero,.resident-hero{background:linear-gradient(112deg,#f0f6ff 0%,#fff 67%,#ecf8f5 100%)!important;color:#1b3050!important;border:1px solid #e3edf9!important;border-radius:22px!important;box-shadow:none!important}.hero h1,.final-hero h1,.warga-hero h1,.citizen-hero h1,.resident-hero h1{color:#152c4c!important;letter-spacing:-.04em}.hero p,.final-hero p,.warga-hero p,.citizen-hero p,.resident-hero p{color:#657992!important}.page-head h1,.warga-page-head h1{color:#172a45!important;letter-spacing:-.035em}.page-head p,.warga-page-head p{color:#748397!important}
.btn,button.btn,a.btn,.auth-submit{background:#2563eb!important;color:#fff!important;border:1px solid #2563eb!important;border-radius:11px!important;box-shadow:none!important;font-weight:700!important;letter-spacing:0!important}.btn:hover,button.btn:hover,a.btn:hover,.auth-submit:hover{background:#1c50c4!important;border-color:#1c50c4!important;transform:translateY(-1px)}.btn.secondary,a.btn.secondary,.btn-outline,.btn.ghost{background:#fff!important;border:1px solid #dbe5f2!important;color:#28538f!important}.btn.secondary:hover,a.btn.secondary:hover,.btn-outline:hover,.btn.ghost:hover{background:#f2f6fc!important}.btn.green{background:#078768!important;border-color:#078768!important}.btn.orange{background:#da8e26!important;border-color:#da8e26!important}.table{border-collapse:separate!important;border-spacing:0!important;width:100%}.table th{background:#f7f9fc!important;color:#63758e!important;font-size:12px!important;text-transform:none!important;letter-spacing:.025em!important;font-weight:750!important}.table td,.table th{border-bottom:1px solid #edf0f5!important;padding:13px 14px!important}.table tr:hover td{background:#fafcff}.table tr:last-child td{border-bottom:0!important}input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{border-radius:11px!important;border-color:#dce5f0!important;background:#fff;color:#1c2b43;box-shadow:none!important}input:focus,select:focus,textarea:focus{border-color:#74a5f4!important;box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;outline:0!important}label{color:#35475f}.badge,.chip,.pill{border-radius:999px!important}
/* Public landing page */
body.public-body,body.public-v30{background:#f8fafd!important;color:#1b2b42!important}body.public-body .public-nav,body.public-v30 .v30-nav{background:rgba(255,255,255,.97)!important;color:#1d3048!important;border-bottom:1px solid var(--modern-line)!important;box-shadow:none!important}body.public-body .public-brand{color:#192f4d!important}body.public-body .public-brand>span{background:#2563eb!important;color:white!important;border-radius:12px!important}body.public-body .public-brand small{color:#7a8a9e!important}body.public-body .public-nav nav a{color:#556880!important}body.public-body .public-nav nav a:hover{color:#2563eb!important}body.public-body .v30-hero{background:linear-gradient(115deg,#edf5ff 0%,#fff 64%,#f0f9f6 100%)!important;border:1px solid #e4edf8!important;border-radius:25px!important;box-shadow:none!important}body.public-body .v30-hero h1{color:#172d4b!important;letter-spacing:-.055em!important}body.public-body .v30-hero h1 strong{color:#2563eb!important}body.public-body .v30-hero p{color:#667991!important}body.public-body .hero-chip,body.public-body .section-kicker{color:#2563eb!important}body.public-body .v30-trust{color:#58718d!important}body.public-body .v30-app-card{background:#fff!important;border:1px solid #dce8f7!important;border-radius:21px!important;box-shadow:0 16px 48px rgba(32,64,110,.09)!important;color:#1d3048!important}body.public-body .v30-info-wrap{background:#1e3d64!important;border-radius:22px!important}body.public-body .v30-info-side{background:#fff!important}body.public-body .v30-services>a.featured{background:#eaf2ff!important;border-color:#d9e9ff!important;color:#193c71!important}body.public-body .v30-services>a.featured p,body.public-body .v30-services>a.featured em{color:#58769d!important}body.public-body .v30-services>a.featured>span{background:#d7e8ff!important;color:#2563eb!important}body.public-body .v30-services>a:hover,body.public-body .v30-business article:hover{transform:translateY(-3px);border-color:#cbdcf4!important;box-shadow:0 14px 30px rgba(32,64,110,.07)!important}body.public-body .v30-business article{border-radius:17px!important}body.public-body .v30-cta{background:#edf5ff!important;border:1px solid #dceaff!important;border-radius:22px!important}body.public-body .v30-community-art{border-radius:19px!important}body.public-body .v30-footer{background:#182c46!important}
/* Authentication screens */
body.auth-body{background:#f5f8fd!important;color:#20334e!important}body.auth-body .auth-shell{background:#fff!important;border:1px solid #e3eaf4!important;border-radius:22px!important;box-shadow:0 24px 80px rgba(34,60,95,.08)!important;overflow:hidden}body.auth-body .auth-art{background:linear-gradient(145deg,#183c71,#235b9a)!important;color:#fff!important}body.auth-body .auth-art h1{letter-spacing:-.055em!important}body.auth-body .auth-card{border:0!important;box-shadow:none!important;border-radius:0!important}body.auth-body .auth-card h2{letter-spacing:-.035em!important;color:#172b48!important}body.auth-body .auth-icon{background:#eaf2ff!important;color:#2563eb!important;border-radius:13px!important}body.auth-body .google-btn{border-radius:11px!important;border:1px solid #dce5f0!important;background:#fff!important;color:#263e5c!important}body.auth-body .auth-foot a,body.auth-body .auth-inline-actions a{color:#2563eb!important}
/* Responsive: preserve existing functional navigation on mobile */
@media(max-width:850px){body.admin-body .admin-main,body.warga-body .warga-main{padding:18px 14px 48px!important}body.admin-body .admin-navbar,body.warga-body .warga-navbar{padding-inline:15px!important}body.admin-body .admin-nav,body.warga-body .warga-nav{background:#fff!important;box-shadow:0 18px 45px rgba(22,42,69,.15)!important;border:1px solid #e5ecf5!important}body.admin-body .admin-nav a,body.warga-body .warga-nav a{font-size:14px!important}body.admin-body .menu-toggle,body.warga-body .menu-toggle{background:#eff4fb!important;color:#1c467b!important;border:1px solid #e2eaf5!important;border-radius:10px!important}body.public-body .v30-hero{margin:12px!important;padding:34px 23px!important}body.public-body .v30-hero h1{font-size:clamp(33px,8vw,46px)!important}.grid4,.warga-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card{padding:17px!important}}@media(max-width:520px){body.admin-body .admin-main,body.warga-body .warga-main{padding:12px 10px 38px!important}.grid4,.warga-stat-grid{grid-template-columns:1fr!important}.hero,.final-hero,.warga-hero,.citizen-hero,.resident-hero{border-radius:16px!important}.card,.panel{border-radius:14px!important}.table th,.table td{padding:11px 10px!important}body.auth-body .auth-shell{border-radius:17px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* v20261005 - validasi input seragam + penanda kesalahan yang jelas */
.smart-form-summary{margin:0 0 14px;padding:11px 13px;border:1px solid #ef9b9b;border-radius:12px;background:#fff1f1;color:#9d1d28;font-size:13px;font-weight:750;line-height:1.45}.smart-form-summary[hidden]{display:none!important}
.smart-field-error{display:block!important;margin-top:6px;color:#b4232f!important;font-size:11.5px!important;font-weight:750!important;line-height:1.35}.smart-field-error[hidden]{display:none!important}
input.smart-invalid,select.smart-invalid,textarea.smart-invalid,input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#d93445!important;background:#fff7f7!important;box-shadow:0 0 0 3px rgba(217,52,69,.12)!important;outline:none!important}
input.smart-invalid:focus,select.smart-invalid:focus,textarea.smart-invalid:focus,input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{border-color:#b7192a!important;box-shadow:0 0 0 4px rgba(217,52,69,.16)!important}
label:has(> .smart-invalid),label:has(input[aria-invalid="true"]),label:has(select[aria-invalid="true"]),label:has(textarea[aria-invalid="true"]){color:#8f1f2b}
.smart-progress.is-error .smart-progress-track i{background:#d93445}.smart-progress.is-error .smart-progress-card strong{color:#b4232f}