:root{
  --paper: #ECE6D6;
  --paper-2: #E4DCC6;
  --ink: #1F2A24;
  --ink-soft: #4A5750;
  --line: #C4B79A;
  --line-soft: #D8CDB2;
  --masuk: #2F6F4E;
  --masuk-bg: #DEE9DF;
  --keluar: #9C3B3B;
  --keluar-bg: #EEDCD6;
  --gold: #A8763B;
  --card: #F5F0E3;
  --shadow: rgba(31,42,36,0.14);
  --radius: 4px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  padding:32px 20px 80px;
}
.wrap{max-width:960px;margin:0 auto;}
a{color:inherit;}

/* header */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:20px;
  border-bottom:2px solid var(--ink);
  margin-bottom:28px;
  flex-wrap:wrap;
}
.brand-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.brand-row{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand-logo{
  height:64px;
  width:auto;
  flex-shrink:0;
}
h1{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:34px;
  margin:0;
  line-height:1.1;
}
.org-input{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:15px;
  color:var(--ink-soft);
  background:transparent;
  border:none;
  border-bottom:1px dashed var(--line);
  padding:4px 2px;
  margin-top:8px;
  width:280px;
}
.org-input:focus{outline:none;border-bottom-color:var(--ink);}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.today{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  text-align:right;
}
.user-menu{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
}
.user-menu a{text-decoration:underline;}
.user-menu button{
  border:none;background:none;font-family:inherit;font-size:inherit;
  color:var(--keluar);cursor:pointer;text-decoration:underline;padding:0;
}

/* summary + stamp */
.summary-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:16px;
  margin-bottom:32px;
  align-items:stretch;
}
.sum-card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:0 1px 0 var(--shadow);
}
.sum-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 8px;
}
.sum-value{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:22px;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.sum-card.masuk .sum-value{color:var(--masuk);}
.sum-card.keluar .sum-value{color:var(--keluar);}

.stamp{
  width:118px;
  height:118px;
  border-radius:50%;
  border:2.5px solid var(--gold);
  outline:1px solid var(--gold);
  outline-offset:-8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transform:rotate(-8deg);
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  text-align:center;
  position:relative;
  opacity:0.92;
  mix-blend-mode:multiply;
}
.stamp.defisit{border-color:var(--keluar);outline-color:var(--keluar);color:var(--keluar);}
.stamp-status{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;}
.stamp-word{font-size:13px;font-weight:700;letter-spacing:0.05em;margin-top:2px;}

/* alert */
.alert{
  padding:12px 16px;
  border-radius:var(--radius);
  margin-bottom:20px;
  font-size:13.5px;
  border:1px solid var(--line-soft);
}
.alert-success{background:var(--masuk-bg);color:var(--masuk);border-color:var(--masuk);}
.alert-error{background:var(--keluar-bg);color:var(--keluar);border-color:var(--keluar);}
.alert ul{margin:4px 0 0;padding-left:18px;}

/* form */
.panel{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:22px 22px 18px;
  margin-bottom:28px;
}
.panel h2{
  font-family:'Fraunces', serif;
  font-size:16px;
  margin:0 0 16px;
  font-weight:600;
}
form.entry-form{
  display:grid;
  grid-template-columns:120px 110px 1fr 150px 160px auto;
  gap:12px;
  align-items:end;
}
.field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.field input, .field select{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  color:var(--ink);
}
.field input:focus, .field select:focus{outline:2px solid var(--gold);outline-offset:1px;}
.toggle-group{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.toggle-group button{
  flex:1;
  padding:9px 0;
  border:none;
  background:#fff;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink-soft);
}
.toggle-group button.active.masuk-btn{background:var(--masuk);color:#fff;}
.toggle-group button.active.keluar-btn{background:var(--keluar);color:#fff;}
.btn-primary{
  padding:10px 20px;
  background:var(--ink);
  color:var(--paper);
  border:none;
  border-radius:3px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary:hover{background:#334038;}
.btn-cancel{
  padding:10px 14px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:12.5px;
  color:var(--ink-soft);
  cursor:pointer;
  margin-left:8px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

/* filter/toolbar */
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:12px;
  flex-wrap:wrap;
}
.toolbar input, .toolbar select{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  font-size:13px;
  font-family:'Inter',sans-serif;
}
.toolbar-actions{display:flex;gap:8px;}
.btn-ghost{
  padding:8px 14px;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  border-radius:3px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

/* ledger table */
.ledger{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
}
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:12px 14px;
  border-bottom:2px solid var(--ink);
  background:var(--paper-2);
}
thead th.num{text-align:right;}
tbody td{
  padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
  vertical-align:top;
}
tbody tr:hover{background:var(--paper-2);}
td.num{
  text-align:right;
  font-family:'IBM Plex Mono', monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
td.masuk-cell{color:var(--masuk);}
td.keluar-cell{color:var(--keluar);}
td.saldo-cell{font-weight:600;}
.tag{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  background:var(--paper-2);
  color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
}
.row-actions{display:flex;gap:6px;white-space:nowrap;}
.row-actions form{display:inline;}
.row-actions button, .row-actions a{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:12px;
  color:var(--ink-soft);
  padding:3px 6px;
  border-radius:3px;
  text-decoration:none;
  font-family:inherit;
}
.row-actions button:hover, .row-actions a:hover{background:var(--paper-2);color:var(--ink);}
.row-actions .del:hover{color:var(--keluar);}
.empty-state{
  padding:48px 20px;
  text-align:center;
  color:var(--ink-soft);
  font-family:'Fraunces', serif;
  font-size:15px;
}
tfoot td{
  padding:13px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:14px;
  border-top:2px solid var(--ink);
  background:var(--paper-2);
}

footer{
  text-align:center;
  margin-top:26px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
}

/* page nav */
.page-nav{
  display:flex;
  gap:4px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.page-nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:11px 4px;
  margin-right:22px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--ink-soft);
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.page-nav a.active{
  color:var(--ink);
  border-bottom-color:var(--gold);
  font-weight:600;
}

/* warga table extras */
form.warga-form{
  display:grid;
  grid-template-columns:1fr 100px 1.4fr 140px 120px auto;
  gap:12px;
  align-items:end;
}
.blok-badge{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  padding:3px 9px;
  border-radius:3px;
  background:var(--ink);
  color:var(--paper);
}
.status-pill{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  font-family:'IBM Plex Mono', monospace;
}
.status-pill.aktif{background:var(--masuk-bg);color:var(--masuk);}
.status-pill.nonaktif{background:var(--keluar-bg);color:var(--keluar);}

/* pengajuan */
form.pengajuan-form{
  display:grid;
  grid-template-columns:120px 1fr 160px 1.4fr 130px auto;
  gap:12px;
  align-items:end;
}
.status-pill.diajukan{background:#E4DCC6;color:var(--ink-soft);}
.status-pill.diproses{background:#EFE0C2;color:var(--gold);}
.status-pill.selesai{background:var(--masuk-bg);color:var(--masuk);}
.status-pill.ditolak{background:var(--keluar-bg);color:var(--keluar);}
select.status-select{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  padding:4px 6px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}

/* auth pages */
.auth-wrap{
  max-width:400px;
  margin:80px auto;
}
.auth-card{
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:28px 26px;
}
.auth-card h1{font-size:24px;margin-bottom:4px;}
.auth-card p.subtitle{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 22px;
}
.auth-card .field{margin-bottom:16px;}
.auth-card .btn-primary{width:100%;padding:11px 0;}
.auth-check{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:var(--ink-soft);}

@media (max-width:800px){
  form.entry-form{grid-template-columns:1fr 1fr;}
  form.warga-form{grid-template-columns:1fr 1fr;}
  form.pengajuan-form{grid-template-columns:1fr 1fr;}
  .btn-primary, .btn-cancel{grid-column:1/-1;}
  .summary-row{grid-template-columns:1fr 1fr;}
  .stamp{display:none;}
  table{display:block;overflow-x:auto;white-space:nowrap;}
}

@media print{
  body{background:#fff;padding:0;}
  .panel, .toolbar, .stamp, .page-nav, .user-menu, footer .print-hide{display:none !important;}
  .ledger{border:none;}
}