:root{
  --paper: #E9E1CC;
  --paper-light: #F7F2E4;
  --card: #FBF7EC;
  --ink: #1F2A44;
  --ink-soft: #45506B;
  --rule: #A9977A;
  --stamp-red: #9C3B2A;
  --stamp-green: #3E5D4C;
  --stamp-navy: #2A3B5E;
  --shadow: rgba(31,42,68,0.16);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(169,151,122,0.18) 28px),
    var(--paper);
  font-family:'IBM Plex Sans', Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
}
a{color:inherit;}
header.top{
  padding:24px 20px 16px;
  text-align:center;
  border-bottom:3px double var(--rule);
  background:var(--paper-light);
  position:relative;
}
header.top h1{
  font-family:'Zilla Slab', Georgia, serif;
  font-weight:700;
  font-size:clamp(22px,4vw,30px);
  margin:0 0 4px;
}
header.top p{margin:0;color:var(--ink-soft);font-size:13px;text-transform:uppercase;letter-spacing:0.5px;}
.user-bar{
  position:absolute; right:20px; top:24px;
  font-size:13px; text-align:right;
}
.user-bar a{text-decoration:underline;}
nav.tabs{
  display:flex; gap:6px; padding:16px 16px 0;
  max-width:1100px; margin:0 auto; flex-wrap:wrap;
}
nav.tabs a{
  font-family:'Zilla Slab', Georgia, serif;
  font-weight:600; font-size:15px;
  padding:10px 20px 12px;
  border:2px solid var(--ink); border-bottom:none;
  border-radius:8px 8px 0 0;
  background:var(--rule); color:var(--paper-light);
  text-decoration:none; position:relative; top:2px; opacity:0.8;
}
nav.tabs a.active{background:var(--card); color:var(--ink); opacity:1; top:0; box-shadow:0 -3px 8px var(--shadow);}
main{max-width:1100px; margin:0 auto; padding:0 16px 60px;}
.panel{
  background:var(--card); border:2px solid var(--ink); border-radius:0 8px 8px 8px;
  padding:22px; box-shadow:0 6px 18px var(--shadow);
}
.panel-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px;
  border-bottom:2px solid var(--rule); padding-bottom:12px; margin-bottom:18px;
}
.panel-head h2{font-family:'Zilla Slab', Georgia, serif; margin:0; font-size:22px;}
.sub{font-size:13px; color:var(--ink-soft);}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
input[type=text], input[type=date], input[type=password], select, textarea{
  font-family:'IBM Plex Sans', Arial, sans-serif;
  border:1.5px solid var(--rule); border-radius:6px; padding:9px 11px;
  background:var(--paper-light); color:var(--ink); font-size:14px;
}
input:focus, select:focus, textarea:focus{outline:2.5px solid var(--stamp-navy); outline-offset:1px;}
.search-box{min-width:220px;}
.btn{
  font-family:'IBM Plex Sans', Arial, sans-serif; font-weight:600; font-size:14px;
  padding:10px 16px; border-radius:6px; border:1.5px solid var(--ink); cursor:pointer;
  background:var(--ink); color:var(--paper-light); text-decoration:none; display:inline-block;
}
.btn.secondary{background:transparent; color:var(--ink);}
.btn.small{padding:6px 10px; font-size:12.5px;}
.btn.danger{background:var(--stamp-red); border-color:var(--stamp-red);}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.6px; color:var(--ink-soft); border-bottom:2px solid var(--ink); padding:8px 10px; white-space:nowrap;
}
tbody td{padding:10px 10px; border-bottom:1px solid var(--rule); vertical-align:top;}
tbody tr:hover{background:rgba(169,151,122,0.14);}
.table-scroll{overflow-x:auto;}
.stamp{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:11px;
  padding:5px 9px; border:2px solid currentColor; border-radius:4px; transform:rotate(-3deg);
  position:relative; letter-spacing:0.5px;
}
.stamp.masuk{color:var(--stamp-green);} .stamp.keluar{color:var(--stamp-red);} .stamp.file{color:var(--stamp-navy);}
.perihal{font-weight:600;}
.catatan-preview{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.file-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; background:var(--paper-light);
  border:1px solid var(--rule); border-radius:5px; padding:4px 8px; text-decoration:none;}
.empty-state{text-align:center; padding:50px 20px; color:var(--ink-soft);}
.empty-state .big{font-family:'Zilla Slab', Georgia, serif; font-size:19px; color:var(--ink); margin-bottom:6px;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.form-card{max-width:560px; margin:0 auto;}
.field{margin-bottom:14px; display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft);}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
textarea{resize:vertical; min-height:60px; font-size:14px;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.hint{font-size:11.5px; color:var(--ink-soft); margin-top:-2px;}
.alert{padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:13.5px;}
.alert.err{background:#F6DCD5; color:var(--stamp-red); border:1px solid var(--stamp-red);}
.alert.ok{background:#DCE8E0; color:var(--stamp-green); border:1px solid var(--stamp-green);}
.stat-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
.stat-card{background:var(--paper-light); border:1.5px solid var(--rule); border-radius:8px; padding:14px 18px; min-width:140px;}
.stat-card .num{font-family:'Zilla Slab', Georgia, serif; font-size:26px; font-weight:700;}
.stat-card .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-soft);}
.rekap-block{margin-bottom:34px;}
.rekap-block h3{font-family:'Zilla Slab', Georgia, serif; font-size:18px; display:flex; justify-content:space-between;
  align-items:center; border-bottom:2px solid var(--rule); padding-bottom:8px;}
.login-wrap{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;
}
.login-card{
  background:var(--card); border:2px solid var(--ink); border-radius:10px; padding:32px;
  max-width:380px; width:100%; box-shadow:0 12px 30px rgba(0,0,0,0.25);
}
.login-card h1{font-family:'Zilla Slab', Georgia, serif; font-size:22px; margin:0 0 4px; text-align:center;}
.login-card p.sub{text-align:center; margin:0 0 22px;}
.login-card input{width:100%; margin-bottom:14px;}
.login-card .btn{width:100%; text-align:center;}
@media (max-width:640px){
  .field-row{flex-direction:column;}
  .user-bar{position:static; text-align:center; margin-top:8px;}
  nav.tabs a{flex:1; text-align:center; padding:9px 8px 10px; font-size:13px;}
}