:root{
  --paper:#f7f4ec;
  --paper-edge:#efe8d6;
  --ink:#1b2333;
  --ink-soft:#454e63;
  --muted:#82869a;
  --line:#dcd3ba;
  --line-soft:#e9e3d1;
  --stamp:#28499b;
  --stamp-soft:#e7ecf7;
  --signed:#2f7d5c;
  --signed-soft:#e5f2ec;
  --pending:#a3760f;
  --pending-soft:#f7eeda;
  --danger:#a4322a;
  --danger-soft:#f7e6e3;
  --radius:10px;
  --shadow: 0 1px 2px rgba(27,35,51,.06), 0 8px 24px -12px rgba(27,35,51,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper-edge);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}
a{color:var(--stamp);}
::selection{background: var(--stamp-soft);}
.container{max-width:960px;margin:0 auto;padding:0 20px;}
.container-narrow{max-width:720px;margin:0 auto;padding:0 20px;}

/* ---------- Topbar ---------- */
.topbar{
  background: var(--ink);
  color: #f2efe3;
  padding: 16px 0;
  border-bottom: 3px solid var(--stamp);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand-mark{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700; font-size:20px; letter-spacing:.5px;
  background:var(--stamp); color:#fff;
  padding:3px 9px; border-radius:5px;
}
.brand-name{font-size:14.5px; color:#cfd3e0; letter-spacing:.2px;}
.brand-name b{color:#fff; font-weight:600;}
.topbar-actions{display:flex; gap:10px;}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  font-size:14.5px; font-weight:600; padding:10px 16px; border-radius:8px;
  font-family:inherit; transition: transform .05s ease, background .15s ease, border-color .15s ease;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn:active{transform: translateY(1px);}
.btn-primary{background:var(--stamp); color:#fff;}
.btn-primary:hover{background:#1e3c85;}
.btn-primary:disabled{background:#a9b6d6; cursor:not-allowed;}
.btn-ghost{background:transparent; color:#f2efe3; border-color:rgba(242,239,227,.35);}
.btn-ghost:hover{border-color:#f2efe3;}
.btn-outline{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-outline:hover{border-color:var(--ink-soft);}
.btn-sm{padding:7px 12px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- Cards / layout ---------- */
.page{padding: 34px 0 70px;}
.card{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px;
}
.section-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:21px; font-weight:700; margin: 0 0 4px;
}
.section-sub{color:var(--muted); font-size:13.5px; margin: 0 0 20px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){ .grid-2{grid-template-columns:1fr;} }

label.field-label{
  display:block; font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink-soft); margin-bottom:6px;
}
.field{margin-bottom:16px;}
input[type=text], input[type=tel], input[type=number], input[type=date], input[type=password]{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:8px;
  font-size:15px; font-family:inherit; background:#fffdf8; color:var(--ink);
}
input:focus{outline:none; border-color:var(--stamp); box-shadow:0 0 0 3px var(--stamp-soft);}
input[readonly]{background:#f1efe6; color:var(--ink-soft);}
.hint{font-size:12.5px; color:var(--muted); margin-top:5px;}

.amount-row{display:flex; align-items:center; gap:12px;}
input[type=range]{flex:1; accent-color: var(--stamp);}
.amount-box{
  background: var(--stamp-soft); border:1px solid #cfd9f0; border-radius:8px;
  padding:14px 16px; text-align:center;
}
.amount-box .amt-label{font-size:12px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
.amount-box .amt-val{font-family:Georgia, serif; font-size:22px; font-weight:700; margin-top:2px;}
.amount-box.rest{background:#f1efe6; border-color:var(--line);}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:100px; letter-spacing:.2px;
}
.badge-signed{background:var(--signed-soft); color:var(--signed);}
.badge-pending{background:var(--pending-soft); color:var(--pending);}
.badge-dot{width:6px;height:6px;border-radius:50%; background:currentColor;}

/* ---------- Ledger table ---------- */
.ledger{width:100%; border-collapse:collapse; margin-top:6px;}
.ledger th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); font-weight:700; padding:8px 10px; border-bottom:2px solid var(--ink);
}
.ledger td{padding:13px 10px; border-bottom:1px solid var(--line-soft); font-size:14.5px; vertical-align:middle;}
.ledger tr.row-link{cursor:pointer;}
.ledger tr.row-link:hover td{background:#faf8f2;}
.mono{font-variant-numeric: tabular-nums; font-family: "SF Mono", Consolas, Menlo, monospace; font-size:13.5px;}
.empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
.empty-state .big{font-family:Georgia, serif; font-size:19px; color:var(--ink); margin-bottom:6px;}

/* ---------- Link box ---------- */
.link-box{
  display:flex; gap:8px; align-items:center; background:#fffdf8; border:1.5px dashed var(--stamp);
  border-radius:8px; padding:10px 12px; margin-top:6px;
}
.link-box input{border:none; background:transparent; font-size:13.5px; color:var(--ink-soft); font-family:monospace; padding:4px;}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:8px; font-size:14px;
  box-shadow:var(--shadow); z-index:999; opacity:0; pointer-events:none; transition:opacity .25s ease, bottom .25s ease;
}
.toast.show{opacity:1; bottom:34px;}

/* ---------- Document sheet ---------- */
.doc-wrap{padding: 30px 0 90px;}
.doc-sheet{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  box-shadow: 0 1px 1px rgba(27,35,51,.05), 0 20px 40px -20px rgba(27,35,51,.35);
  padding: 40px 44px 46px; position:relative;
}
.doc-sheet::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background: repeating-linear-gradient(90deg, var(--paper-edge) 0 10px, var(--paper) 10px 20px);
  border-radius:4px 4px 0 0;
}
@media (max-width:640px){ .doc-sheet{padding:26px 20px 30px;} }
.doc-title{font-family:Georgia, "Times New Roman", serif; font-size:24px; font-weight:700; text-align:center; margin:6px 0 2px;}
.doc-meta{text-align:center; color:var(--ink-soft); font-size:14px; margin-bottom:26px;}
.doc-parties{font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:22px; text-align:justify;}
.doc-body h3{
  font-family:Georgia, serif; font-size:15.5px; font-weight:700; margin:24px 0 8px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
.doc-body p{font-size:14px; line-height:1.75; color:var(--ink-soft); margin:0 0 9px; text-align:justify;}
.fillable{
  background: var(--stamp-soft); color:var(--stamp); border-radius:3px; padding:0 4px;
  font-weight:700; border-bottom:1.5px dashed var(--stamp);
}
.fillable.empty{color:var(--pending); background:var(--pending-soft); border-bottom-color:var(--pending);}

.req-table{width:100%; margin-top:22px; border-collapse:collapse;}
.req-table td{vertical-align:top; width:50%; padding:14px; font-size:13px; line-height:1.65; color:var(--ink-soft); border:1px solid var(--line);}
.req-table .req-title{font-weight:700; color:var(--ink); font-size:13.5px; margin-bottom:6px; display:block;}
@media (max-width:640px){ .req-table, .req-table tbody, .req-table tr, .req-table td{display:block; width:100%;} .req-table td{margin-bottom:-1px;} }

.sign-line{margin-top:8px; font-size:13px; color:var(--ink-soft); max-width:100%; overflow:hidden;}
.sign-slot{border-bottom:1px solid var(--ink-soft); display:inline-block; min-width:170px; height:20px; vertical-align:bottom;}

/* ---------- Stamp ---------- */
.stamp{
  position:relative; display:inline-block; transform: rotate(-7deg);
  border:2.5px solid var(--stamp); color:var(--stamp); border-radius:8px;
  padding:8px 16px; font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  font-family: Georgia, serif;
  background: rgba(40,73,155,0.03);
}
.stamp small{display:block; font-size:10px; letter-spacing:.5px; font-weight:600; margin-top:2px; text-transform:none;}

/* ---------- Sign panel ---------- */
.sign-panel{margin-top:26px; padding-top:22px; border-top:2px solid var(--ink);}
.sign-panel h3{font-family:Georgia, serif; font-size:16.5px; margin:0 0 14px;}
.canvas-wrap{
  border:1.5px dashed var(--line); border-radius:8px; background:#fffdf8; touch-action:none; position:relative;
  width:100%; max-width:100%; overflow:hidden; box-sizing:border-box;
}
#sigCanvas{display:block; width:100%; max-width:100%; height:150px; border-radius:8px; cursor:crosshair;}
.canvas-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13.5px; pointer-events:none;
}
.sign-line img{max-width:100%; height:60px; width:auto; display:block; margin-top:6px;}
.sign-row{display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:10px;}
.checkline{display:flex; align-items:flex-start; gap:10px; margin:18px 0; font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
.checkline input{margin-top:3px; width:16px; height:16px; accent-color:var(--stamp); flex-shrink:0;}
.error-msg{color:var(--danger); font-size:13px; margin-top:8px; display:none;}
.error-msg.show{display:block;}

.signed-banner{
  display:flex; align-items:center; gap:12px; background:var(--signed-soft); color:var(--signed);
  border:1px solid #bfe0cf; border-radius:8px; padding:14px 16px; margin-bottom:22px; font-size:14px;
}
.signed-banner b{font-size:15px;}

.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.gate-card{max-width:380px; width:100%; text-align:center;}
.gate-card .brand-mark{display:inline-block; margin-bottom:16px;}

.loading{text-align:center; padding:60px 20px; color:var(--muted); font-size:14.5px;}
.footer-note{text-align:center; color:var(--muted); font-size:12.5px; margin-top:24px; line-height:1.6;}

@media print{
  body{background:#fff;}
  .no-print{display:none !important;}
  .doc-wrap{padding:0;}
  .doc-sheet{box-shadow:none; border:none;}
  .container-narrow{max-width:100%; padding:0;}
}