/* Design system — minimal editorial, warm monochrome + aksen pinus.
   Font: Plus Jakarta Sans (UI), Newsreader (display), JetBrains Mono (meta). */
:root{
  --bone:#F7F6F3; --surface:#FFFFFF; --surface2:#FBFBFA;
  --ink:#161918; --mute:#6F7471; --line:#E9E7E2;
  --pine:#0C3B2E; --pine-ink:#0A2E24;
  --green-bg:#EDF3EC; --green-tx:#346538;
  --yellow-bg:#FBF3DB; --yellow-tx:#956400;
  --red-bg:#FDEBEC; --red-tx:#9F2F2D;
  --blue-bg:#E7F1F8; --blue-tx:#1F6C9F;
  --r:12px; --r-sm:8px;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;line-height:1.6;}
::selection{background:#DDE8E1;}

/* ---------- header / footer ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.brand-tile{width:40px;height:40px;border-radius:10px;background:var(--pine);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;
  font-size:20px;line-height:1;}
.brand-tile img{width:100%;height:100%;object-fit:contain;background:#fff;}
.navlink{padding:7px 12px;border-radius:8px;font-weight:600;color:var(--ink);white-space:nowrap;}
.navlink:hover{background:#EFEDE8;}
.limit-badge{font-size:12px;padding:6px 12px;border-radius:9999px;letter-spacing:.02em;
  background:var(--green-bg);color:var(--green-tx);border:1px solid #DCE7DB;white-space:nowrap;}
.limit-badge b{font-weight:800;}
.site-footer{border-top:1px solid var(--line);color:var(--mute);font-size:12px;background:transparent;}
.flash{border-radius:10px;padding:11px 16px;font-size:13.5px;border:1px solid var(--line);}
.flash-ok{background:var(--green-bg);color:var(--green-tx);border-color:#DCE7DB;}
.flash-err{background:var(--red-bg);color:var(--red-tx);border-color:#F3D3D4;}

/* ---------- type ---------- */
.font-serif{font-family:Newsreader,Georgia,serif;}
.display{font-family:Newsreader,Georgia,serif;letter-spacing:-.02em;line-height:1.15;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.muted{color:var(--mute);}

/* ---------- cards / sections ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:0 1px 2px rgba(22,25,24,.04);
  animation:rise .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cardtitle{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:12px;}
.cardtitle-sm{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;}
.rule{border-top:1px solid var(--line);margin:16px 0;}

/* ---------- buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:8px;border:1px solid var(--ink);cursor:pointer;
  transition:transform .12s ease,background .15s ease;}
.btn-primary:hover{background:#2A2E2C;}
.btn-primary:active{transform:scale(.98);}
.btn-pine{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--pine);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:8px;border:1px solid var(--pine-ink);cursor:pointer;
  transition:transform .12s ease,background .15s ease;}
.btn-pine:hover{background:var(--pine-ink);}
.btn-pine:active{transform:scale(.98);}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;
  padding:9px 15px;border-radius:8px;border:1px solid var(--line);cursor:pointer;
  transition:background .15s ease,transform .12s ease;white-space:nowrap;}
.btn-ghost:hover{background:#F1EFEA;}
.btn-ghost:active{transform:scale(.98);}
.btn-sm{padding:7px 14px;font-size:12.5px;}
.btn-green{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--pine);color:#fff;font-weight:700;font-size:12.5px;
  padding:9px 16px;border-radius:8px;cursor:pointer;transition:background .15s ease;}
.btn-green:hover{background:var(--pine-ink);}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;
  padding:9px 16px;border-radius:8px;cursor:pointer;}
.btn-dark:hover{background:#2A2E2C;}
.btn-danger-ghost{display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--red-tx);font-weight:600;font-size:12px;
  padding:6px 10px;border-radius:8px;border:1px solid #EFD4D5;cursor:pointer;}
.btn-danger-ghost:hover{background:var(--red-bg);}
.abtn{color:#fff;font-size:11px;font-weight:700;padding:6px 11px;border-radius:7px;margin:1px;cursor:pointer;border:none;}
.icon{width:15px;height:15px;flex:none;}

/* ---------- tabs ---------- */
.tabbar{display:inline-flex;gap:2px;background:#EFEDE8;border:1px solid var(--line);
  border-radius:10px;padding:3px;max-width:100%;overflow-x:auto;}
.tabbtn{background:transparent;border:none;padding:8px 15px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;}
.tabbtn:hover{color:var(--ink);}
.tabbtn.on{background:var(--ink);color:#fff;}

/* ---------- forms ---------- */
.inp,.inp2,select.inp2,textarea.inp2{font-family:inherit;}
.inp{width:100%;padding:10px 13px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:13.5px;font-weight:500;}
.inp2{padding:9px 12px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px;}
.inp:focus,.inp2:focus,select:focus{outline:none;border-color:var(--pine);
  box-shadow:0 0 0 3px rgba(12,59,46,.12);}
label.f-label{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px;}
select.inp,select.inp2{background:#fff;}
input[type="checkbox"]{accent-color:var(--pine);}

/* ---------- editor rows ---------- */
.row-item{display:flex;gap:10px;align-items:flex-start;background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;}
.row-tag{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;
  background:var(--green-bg);color:var(--green-tx);border-radius:6px;
  padding:2px 7px;margin-top:2px;flex:none;}
.row-item input{flex:1;min-width:0;background:transparent;border:none;font-size:13px;color:var(--ink);}
.row-item input:focus{outline:none;border-bottom:1px solid var(--pine);}
.row-del{color:var(--red-tx);background:none;border:none;cursor:pointer;font-size:14px;flex:none;padding:0 2px;}
.row-del:hover{opacity:.7;}
.empty-note{font-size:12px;color:var(--mute);}

/* ---------- badges / tables ---------- */
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:9999px;border:1px solid transparent;}
.badge-green{background:var(--green-bg);color:var(--green-tx);border-color:#DCE7DB;}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow-tx);border-color:#EEDFB8;}
.badge-red{background:var(--red-bg);color:var(--red-tx);border-color:#F3D3D4;}
.badge-blue{background:var(--blue-bg);color:var(--blue-tx);border-color:#CBDFEE;}
.badge-grey{background:#EFEDE8;color:#5B605D;border-color:var(--line);}
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl thead th{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);background:var(--surface2);}
.tbl tbody td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#FBFAF7;}

/* ---------- AI panel / dropzone ---------- */
.dropzone{display:block;border:1.5px dashed #C9C5BC;border-radius:var(--r);
  padding:26px 18px;text-align:center;cursor:pointer;background:var(--surface2);
  transition:border-color .15s ease,background .15s ease;}
.dropzone:hover{border-color:var(--pine);background:#F2F0EB;}
.progress{height:6px;background:#E7E4DD;border-radius:9999px;overflow:hidden;}
.progress > div{height:100%;background:var(--pine);border-radius:9999px;transition:width .4s ease;}
kbd{font-family:"JetBrains Mono",monospace;font-size:11px;border:1px solid var(--line);
  border-radius:5px;background:var(--surface2);padding:1px 6px;}

/* ---------- preview dokumen ---------- */
.print-area{background:#fff;}
.ph{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--ink);
  padding-bottom:6px;margin:26px 0 12px;}
.ptable{width:100%;border-collapse:collapse;}
.ptable th,.ptable td{border:1px solid #B9B5AC;padding:7px 9px;vertical-align:top;}
.ptable thead th{background:#F1EFEA;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}
.sigcell{min-height:5.5rem;display:flex;align-items:center;justify-content:center;}
.sigcell img{max-height:4.5rem;max-width:100%;object-fit:contain;}
#sig-canvas{touch-action:none;}

/* ---------- toast / loader / modal ---------- */
#sig-modal{display:flex;}
#sig-modal.hidden{display:none;}
#toast{background:var(--ink);color:#fff;}
#loader{background:rgba(22,25,24,.88);}
/* responsive editor grids */
@media (max-width:860px){
  .editor-kop{grid-template-columns:1fr!important;}
  .editor-sig{grid-template-columns:1fr!important;}
  .editor-2col{grid-template-columns:1fr!important;}
  .ai-grid{grid-template-columns:1fr!important;}
}
.modal-card{background:#fff;border-radius:var(--r);border:1px solid var(--line);}

@media print{
  header.site-header,footer.site-footer,.no-print,#toast,#loader,#sig-modal{display:none!important;}
  body{background:#fff!important;}
  main{max-width:100%!important;padding:0!important;margin:0!important;}
  .tabpane{display:block!important;}
  #tab-ai,#tab-editor,#tab-json,#tab-riwayat{display:none!important;}
  #tab-preview{display:block!important;}
  .print-area{box-shadow:none!important;border:none!important;border-radius:0!important;max-width:100%!important;margin:0!important;padding:0!important;}
  .ph,.ptable thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .ptable{page-break-inside:auto;}
  .ptable tr{page-break-inside:avoid;}
}