*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b0b0b;color:#f5f5f5}
.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:16px 20px;border-bottom:1px solid #222}
.topbar h1{margin:0;font-size:28px;font-weight:800;justify-self:center;text-align:center}
.logo{height:44px;width:auto;border-radius:4px;justify-self:end}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:#121212;border:1px solid #222;border-radius:16px;padding:18px 18px 20px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.card h2{margin:0 0 10px 0;font-size:18px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{background:#ffffff;color:#111;border:0;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;transition:.15s transform ease, .2s opacity}
button:disabled{opacity:.5;cursor:not-allowed}
button:hover:enabled{transform:translateY(-1px)}
.muted{color:#bdbdbd}
#previewWrap{background:#0e0e0e;border:1px dashed #333;border-radius:12px;min-height:360px;display:flex;align-items:center;justify-content:center}
#pdfPreview{width:100%;height:600px;border:0;border-radius:12px;background:#1a1a1a}
.sig-wrap{border:1px dashed #333;border-radius:12px;background:#1a1a1a;margin-top:8px}
#signaturePad{width:600px;height:220px;display:block}
.comments{flex:1;min-width:280px}
.comments textarea{width:100%;height:200px;border-radius:12px;border:1px solid #333;background:#1a1a1a;color:#f5f5f5;padding:10px}
.label{display:block;margin:4px 0 6px;color:#ddd;font-size:.95rem}
.input{width:600px;max-width:100%;padding:10px;border-radius:10px;border:1px solid #333;background:#1a1a1a;color:#f5f5f5}
.footer{padding:24px;text-align:center;color:#9e9e9e}
#status{margin-top:8px;color:#bdbdbd;white-space:pre-wrap}


/* --- Absolute-centered title (logo won't push) --- */
.topbar{ position:relative; display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid #222; }
.topbar h1{ position:absolute; left:50%; transform:translateX(-50%); margin:0; text-align:center; font-weight:800; }
.topbar .logo{ margin-left:auto; height:44px; width:auto; border-radius:4px; }
@media (max-width: 820px){
  .topbar{ justify-content:center; }
  .topbar h1{ font-size:24px; }
}

/* --- Responsive tweaks for tablet/phone --- */
@media (max-width: 1024px){ #pdfPreview{ height:520px } }
@media (max-width: 820px){
  #pdfPreview{ height:460px }
  .row{ flex-direction:column; align-items:stretch }
  .input{ width:100% }
  .sig-wrap, #signaturePad{ width:100% }
}
@media (max-width: 600px){
  body{ font-size:15px }
  #pdfPreview{ height:420px }
  #signaturePad{ height:180px }
}