/* ===================================================================
   REGISTRI FOTO PENDUDUK — gaya "arsip desa"
   Palet: kertas arsip hangat · hijau template · aksen amber stempel
   =================================================================== */
:root{
  --paper:#F4F1E7;
  --paper-2:#FBFAF3;
  --ink:#16231C;
  --ink-soft:#4B5A50;
  --green:#1F6F54;      /* sama dgn header template Excel */
  --green-deep:#123D2D;
  --green-tint:#E4EEE8;
  --amber:#C0791C;      /* aksen stempel */
  --amber-soft:#F3E4CB;
  --line:#D9D3C1;
  --line-strong:#C4BCA4;
  --danger:#B23A2E;
  --ok:#1F6F54;
  --radius:14px;
  --shadow:0 1px 0 rgba(18,61,45,.04), 0 10px 30px -18px rgba(18,61,45,.35);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:"Bricolage Grotesque",var(--sans);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:
    radial-gradient(1200px 500px at 100% -10%, #EAF0E9 0%, transparent 60%),
    var(--paper);
  background-attachment:fixed;
  line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:120px;
}

/* subtle paper grid — signature registry texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);
  background-size:100% 34px;
  mask-image:linear-gradient(to bottom,transparent,black 120px);
}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.top{padding:34px 0 22px;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between}
.brand .eyebrow{
  font:600 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.brand .eyebrow::before{content:"";width:26px;height:2px;background:var(--amber)}
.brand h1{
  font:700 clamp(28px,5vw,44px)/0.98 var(--disp);letter-spacing:-.02em;margin:0;
}
.brand h1 em{font-style:normal;color:var(--green)}
.brand p{margin:8px 0 0;color:var(--ink-soft);max-width:42ch;font-size:14.5px}

.counter{
  min-width:190px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
}
.counter .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.counter .lbl{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.counter .num{font:700 22px/1 var(--disp)}
.counter .num b{color:var(--green)}
.bar{height:6px;border-radius:99px;background:var(--green-tint);margin-top:12px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--amber));transition:width .4s cubic-bezier(.2,.7,.2,1)}

/* ---------- Drop zone ---------- */
.intake{
  position:relative;border:2px dashed var(--line-strong);border-radius:20px;
  background:var(--paper-2);padding:40px 24px;text-align:center;cursor:pointer;
  transition:border-color .25s, background .25s, transform .1s;
  overflow:hidden;
}
.intake:hover{border-color:var(--green)}
.intake.drag{border-color:var(--green);background:var(--green-tint);transform:scale(.995)}
.intake:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.intake .ic{
  width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;
  background:var(--green);color:#fff;box-shadow:0 8px 20px -8px var(--green);
}
.intake .ic svg{width:28px;height:28px}
.intake h2{margin:0 0 6px;font:600 19px/1.2 var(--disp)}
.intake .hint{margin:0;color:var(--ink-soft);font-size:13.5px}
.intake .rules{margin:14px auto 0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font:600 11px/1 var(--mono);letter-spacing:.04em;color:var(--green-deep);
  background:var(--green-tint);border:1px solid #CDE0D6;border-radius:99px;padding:6px 11px}
.intake.busy::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(31,111,84,.14),transparent);
  animation:scan 1.1s linear infinite}
@keyframes scan{from{transform:translateX(-120%)}to{transform:translateX(320%)}}

/* ---------- Thumbnails ---------- */
.thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.thumb{
  position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#000;box-shadow:var(--shadow);
  animation:pop .3s cubic-bezier(.2,.8,.2,1) both;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.thumb .st{
  position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font:600 9.5px/1.2 var(--mono);
  letter-spacing:.03em;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));
  text-transform:uppercase;display:flex;align-items:center;gap:5px;
}
.thumb.reading .st{background:linear-gradient(transparent,rgba(31,111,84,.9))}
.thumb.error  .st{background:linear-gradient(transparent,rgba(178,58,46,.9))}
.thumb .dot{width:6px;height:6px;border-radius:99px;background:#fff}
.thumb.reading .dot{animation:blink .8s infinite}
.thumb .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:8px;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.thumb .x:hover{background:var(--danger)}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}

/* ---------- Section title ---------- */
.sec{margin:38px 0 16px;display:flex;align-items:center;gap:14px}
.sec h3{margin:0;font:700 20px/1 var(--disp);letter-spacing:-.01em}
.sec .count{font:600 12px/1 var(--mono);color:var(--green);background:var(--green-tint);
  border:1px solid #CDE0D6;border-radius:99px;padding:6px 10px}
.sec .ln{flex:1;height:1px;background:var(--line)}

/* ---------- Empty state ---------- */
.empty{border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:40px 20px;text-align:center;color:var(--ink-soft);background:var(--paper-2)}
.empty strong{color:var(--ink);font-family:var(--disp);font-weight:600;display:block;margin-bottom:4px;font-size:16px}

/* ---------- KK group ---------- */
.kk{margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);box-shadow:var(--shadow);overflow:hidden}
.kk-head{display:flex;align-items:center;gap:12px;padding:13px 16px;
  background:linear-gradient(var(--green-tint),transparent);border-bottom:1px solid var(--line)}
.kk-head .tag{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.kk-head .no{font:600 15px/1 var(--mono);color:var(--ink)}
.kk-head .jiwa{margin-left:auto;font:600 11px/1 var(--mono);color:var(--amber);
  background:var(--amber-soft);border-radius:99px;padding:5px 10px}

/* ---------- Person card ---------- */
.person{padding:16px;border-bottom:1px solid var(--line);animation:pop .25s ease both}
.person:last-child{border-bottom:0}
.p-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.p-idx{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:var(--green);color:#fff;
  font:700 12px/1 var(--mono);display:grid;place-items:center}
.p-name{font:600 16px/1.1 var(--disp);flex:1;min-width:0}
.p-del{border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;
  border-radius:9px;padding:6px 10px;font:600 12px/1 var(--sans);display:inline-flex;align-items:center;gap:6px;transition:.15s}
.p-del:hover{color:#fff;background:var(--danger);border-color:var(--danger)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.col2{grid-column:span 2}
.f.col4{grid-column:span 4}
.f label{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.f input, .f select{
  width:100%;font:400 14px/1.3 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;
  padding:9px 11px;transition:border-color .15s, box-shadow .15s;
}
.f input.mono{font-family:var(--mono);letter-spacing:.02em}
.f input:focus, .f select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.f input::placeholder{color:#A9B2AA}

/* ---------- Sticky action bar ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(251,250,243,.82);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -12px 30px -22px rgba(18,61,45,.5);
}
.actionbar .inner{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.total{font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.total b{font:700 20px/1 var(--disp);color:var(--ink);margin-right:4px}
.spacer{flex:1}
.btn{border:0;cursor:pointer;border-radius:11px;font:600 14px/1 var(--sans);
  padding:12px 18px;display:inline-flex;align-items:center;gap:8px;transition:transform .08s, filter .15s, background .15s}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn.ghost{background:transparent;color:var(--green-deep);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--green-tint);border-color:var(--green)}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -12px var(--green)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:disabled{background:var(--line-strong);box-shadow:none;cursor:not-allowed;color:#fff}

/* ---------- Toast ---------- */
.toasts{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:40;
  display:flex;flex-direction:column;gap:8px;width:min(92vw,420px)}
.toast{background:var(--ink);color:#F4F1E7;border-radius:12px;padding:12px 15px;font-size:13.5px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);display:flex;gap:10px;align-items:flex-start;
  animation:up .3s cubic-bezier(.2,.8,.2,1) both}
.toast.ok{background:var(--green-deep)}
.toast.err{background:var(--danger)}
.toast .tx{flex:1}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Loading overlay for export ---------- */
.veil{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(244,241,231,.7);backdrop-filter:blur(3px)}
.veil.show{display:grid}
.veil .box{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 26px;
  box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;font:600 14px var(--sans)}
.spin{width:22px;height:22px;border-radius:99px;border:3px solid var(--green-tint);border-top-color:var(--green);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Footer ---------- */
.foot{text-align:center;color:var(--ink-soft);font-size:12px;padding:26px 0 6px}
.foot b{color:var(--green)}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .f.col2, .f.col4{grid-column:span 2}
}
@media (max-width:560px){
  .wrap{padding:0 14px}
  .top{padding:24px 0 16px}
  .counter{width:100%}
  .grid{grid-template-columns:1fr}
  .f.col2,.f.col4{grid-column:span 1}
  .intake{padding:30px 16px}
  .actionbar .inner{padding:10px 14px}
  .total{width:100%;order:-1}
  .btn{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===================================================================
   Tombol kecil "Pengaturan AI" + chip status
   =================================================================== */
.btn.tiny{
  margin-top:14px; padding:8px 12px; font-size:13px; gap:7px;
  background:var(--paper-2); color:var(--green-deep);
  border:1px solid var(--line-strong); border-radius:10px;
}
.btn.tiny svg{ width:15px; height:15px; }
.btn.tiny:hover{ border-color:var(--green); background:#fff; }
.aiDot{
  width:8px; height:8px; border-radius:50%; background:var(--line-strong);
  box-shadow:0 0 0 3px rgba(0,0,0,.03); transition:.25s;
}
.aiDot.on{ background:var(--ok); box-shadow:0 0 0 3px rgba(31,111,84,.18); }
#aiChip{ cursor:pointer; }
#aiChip.on{ background:var(--green-tint); border-color:var(--green); color:var(--green-deep); }

/* ===================================================================
   Modal Pengaturan AI
   =================================================================== */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:60; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(18,35,28,.42); backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
@media(min-width:640px){ .modal{ align-items:center; } }
.modal .sheet{
  position:relative; width:100%; max-width:560px;
  background:var(--paper-2); border:1px solid var(--line-strong);
  border-radius:18px 18px 0 0; padding:26px 22px 24px;
  box-shadow:var(--shadow); max-height:90vh; overflow:auto;
  animation:rise .28s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:640px){ .modal .sheet{ border-radius:18px; } }
.modal .x{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer;
}
.modal .x:hover{ color:var(--danger); border-color:var(--danger); }
.modal h3{
  font-family:var(--disp); font-size:21px; color:var(--green-deep);
  margin:0 0 6px;
}
.modal .sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.5; }
.modal .mini{ font-size:12px; color:var(--ink-soft); margin:14px 0 0; opacity:.85; }

.aiState{ margin-bottom:14px; }
.aiState .ok, .aiState .off{
  padding:10px 12px; border-radius:10px; font-size:13px;
}
.aiState .ok{ background:var(--green-tint); border:1px solid var(--green); color:var(--green-deep); }
.aiState .off{ background:var(--amber-soft); border:1px solid var(--amber); color:#7a4d0f; }

.slots{ display:grid; gap:12px; }
@media(min-width:520px){ .slots{ grid-template-columns:1fr 1fr; } }
.slot{
  border:1px solid var(--line-strong); border-radius:14px;
  padding:14px; background:#fff; display:flex; flex-direction:column; gap:8px;
}
.slot.on{ border-color:var(--green); background:var(--green-tint); }
.slot.lock{ background:#F6F4EC; opacity:.85; }
.slot .sh{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.slot .nm{ font-family:var(--disp); font-weight:700; color:var(--green-deep); font-size:15px; }
.slot .getkey{ font-size:12px; color:var(--green); text-decoration:none; border-bottom:1px dashed var(--green); }
.slot .getkey:hover{ color:var(--green-deep); }
.badge{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:999px; background:var(--line); color:var(--ink-soft);
}
.badge.ok{ background:var(--green); color:#fff; }
.slot .meta{ font-size:12.5px; color:var(--ink-soft); }
.slot .meta.warn{ color:#7a4d0f; }
.slot .fl{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.slot .fl .hh{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.7; margin-left:6px; }
.slot .in{
  width:100%; padding:9px 11px; border:1px solid var(--line-strong);
  border-radius:9px; background:var(--paper-2); font-family:var(--sans); font-size:14px;
  color:var(--ink); box-sizing:border-box;
}
.slot .in.mono{ font-family:var(--mono); font-size:12.5px; }
.slot .in:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(31,111,84,.14); }
.slot .adv{ font-size:12px; }
.slot .adv summary{ cursor:pointer; color:var(--ink-soft); user-select:none; }
.slot .adv summary:hover{ color:var(--green); }
.slot .adv .in{ margin-top:6px; }
.btn.sm{ padding:9px 12px; font-size:13px; justify-content:center; }
.btn.danger{ background:#fff; color:var(--danger); border:1px solid var(--danger); }
.btn.danger:hover{ background:var(--danger); color:#fff; }

@keyframes rise{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .modal, .modal .sheet{ animation:none; }
}

.slot .rowbtn{ display:flex; gap:8px; }
.slot .rowbtn .btn{ flex:1; }
.btn.ghost.sm{ background:var(--paper-2); color:var(--green-deep); border:1px solid var(--line-strong); }
.btn.ghost.sm:hover{ border-color:var(--green); background:#fff; }