@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;700&family=Source+Serif+4:wght@400;600;700&family=Caveat:wght@400;600&family=Dancing+Script:wght@400;600&family=Patrick+Hand&family=Shadows+Into+Light&family=Just+Another+Hand&family=Reenie+Beanie&family=Architects+Daughter&family=Kalam:wght@400;700&family=Nanum+Pen+Script&family=Gloria+Hallelujah&display=swap');

@font-face {
  font-family: 'MICR';
  src: url('fonts/micr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --paper:#f3eee0;
  --panel:#fffdf8;
  --ink:#23231f;
  --muted:#5f5847;
  --green:#1f4d3d;
  --green-soft:#e3ece6;
  --rust:#9c4a34;
  --line:#d9d0b8;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
  --sans:'IBM Plex Sans', Arial, sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
}
header{
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  background:var(--panel);
}
header .brand{display:flex;align-items:center;gap:8px;}
header h1{
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  margin:0;
  color:var(--green);
}
header .tag{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
}
.app{
  display:grid;
  grid-template-columns: 350px 16px 1fr;
  min-height:calc(100vh - 63px);
}
@media (max-width: 900px){
  .app{grid-template-columns:1fr;}
  .perforation{display:none;}
  .panel{max-height:none; overflow:visible; border-bottom:1px solid var(--line);}
}
.mobile-toggle{
  display:none;
  width:100%;
  padding:9px;
  background:var(--green-soft);
  border:none;
  border-radius:6px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--green);
  margin-bottom:12px;
  cursor:pointer;
}
@media (max-width: 900px){
  .mobile-toggle{display:block;}
  .panel.collapsed .fieldset-group{display:none;}
}
.perforation{
  background-image: radial-gradient(circle at 8px 12px, var(--paper) 3px, transparent 3.6px);
  background-size: 16px 18px;
  background-repeat: repeat-y;
  position:relative;
  background-color: var(--line);
}
.perforation::after{
  content:'';
  position:absolute;
  top:0; bottom:0; left:8px;
  border-left:1px dashed #b9ae8f;
}
.panel{
  background:var(--panel);
  padding:18px 18px 40px;
  overflow-y:auto;
  max-height:calc(100vh - 63px);
}
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.stage{
  padding:26px;
  overflow:auto;
}
.tabs{
  display:flex;
  gap:2px;
  background:var(--green-soft);
  border-radius:8px;
  padding:3px;
  margin-bottom:18px;
}
.tab-btn{
  flex:1;
  border:none;
  background:transparent;
  padding:8px 10px;
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  color:#4b5563;
  border-radius:6px;
  cursor:pointer;
}
.tab-btn.active{
  background:var(--green);
  color:#fff;
}
fieldset{
  border:1px solid var(--line);
  border-radius:8px;
  margin:0 0 14px;
  padding:12px 12px 14px;
}
legend{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--muted);
  padding:0 4px;
  font-weight:600;
}
label{
  display:block;
  font-size:12px;
  color:#4b5563;
  margin:8px 0 3px;
}
input[type=text], input[type=number], input[type=date], select, textarea{
  width:100%;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  font-family:var(--sans);
  font-size:13px;
  background:#fff;
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--green);
}
textarea{resize:vertical;min-height:44px;}
input[type=color]{
  width:100%;height:30px;border:1px solid var(--line);border-radius:5px;padding:2px;background:none;cursor:pointer;
}
.row{display:flex;gap:8px;align-items:flex-start;}
.row > *{flex:1;min-width:0;}
.checkrow{display:flex;align-items:center;gap:8px;margin:6px 0;}
.checkrow input{width:auto;}
.checkrow label{margin:0;font-size:13px;color:var(--ink);}
button.btn{
  width:100%;
  padding:9px 10px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:6px;
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  cursor:pointer;
  margin-top:6px;
  transition:background 0.15s ease;
  white-space:nowrap;
}
button.btn:hover{background:#173b2e;}
button.btn.secondary{
  background:#fff;
  color:var(--green);
  border:1px solid var(--green);
}
button.btn.secondary:hover{background:var(--green-soft);}
button.btn:disabled, button.btn.secondary:disabled{
  opacity:0.4; cursor:not-allowed; background:#fff; color:var(--muted); border-color:var(--line);
}
button.btn.small{
  padding:7px 8px;
  font-size:12px;
  margin-top:0;
}
.field-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:12px;
  cursor:pointer;
  background:#fff;
}
.field-chip.selected{
  border-color:var(--green);
  background:var(--green-soft);
}
.field-chip button{
  border:none;background:none;color:#b3ab97;cursor:pointer;font-size:13px;
}
.canvas-wrap{
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px var(--line);
  display:inline-block;
  margin-bottom:16px;
}
.page-label{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.hint{
  font-size:11.5px;
  color:var(--muted);
  margin-top:5px;
  line-height:1.5;
}
.zoom-controls{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  align-items:center;
  flex-wrap:wrap;
}
.zoom-controls button{
  width:26px;height:26px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:5px;
  cursor:pointer;
  font-size:13px;
}
.divider{height:1px;background:var(--line);margin:16px 0;}
.btn-pair{display:flex;gap:8px;}
.btn-pair .btn{margin-top:0;}
.caveat{
  max-width:620px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  background:var(--green-soft);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  margin-top:6px;
}
.caveat strong{color:var(--ink);}
.sig-pad{
  touch-action:none;
  cursor:crosshair;
  border:1px dashed var(--line);
  border-radius:5px;
  background:#fff;
  width:100%;
  max-width:280px;
  display:block;
}
.preview-overlay{
  position:fixed; inset:0; background:var(--paper); z-index:1000;
  display:flex; flex-direction:column;
}
.preview-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--line);
}
.preview-title{font-family:var(--serif); font-weight:700; color:var(--green); font-size:16px;}
.preview-body{
  flex:1; overflow:auto; padding:24px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.preview-img{
  max-width:100%; width:576px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px var(--line);
}