:root {
  --page-w: 816px;   /* 8.5 in at 96 dpi */
  --page-h: 1056px;  /* 11 in at 96 dpi */
  --ink: #111;
  --line: #444;
  --bg: #e9e9e9;
  --accent: #0b2a66;
  --accent-2: #2563eb;
  --border: #64748b;
  --muted: #334155;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}

/* ===== App header ===== */
.container { max-width: 860px; margin: 0 auto; }
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.brand {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px rgba(11,42,102,0.2);
}
h1 { font-size: 18px; margin: 0; color: var(--ink); }
.subtitle { color: var(--muted); font-size: 13px; }

/* ===== Sheet (letter-sized page) ===== */
.sheet {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #222;
  overflow: hidden;
}

/* --- Check outline & tear lines --- */
.check-outline {
  position: absolute;
  left: 32px; top: 40px;
  width: 736px; height: 230px;
  border: 2px solid #222;
  border-radius: 14px;
  pointer-events: none;
}

.tear-line-top,
.tear-line-bottom {
  position: absolute;
  left: 32px;
  width: 737px;
  border-top: 2px dotted #777;
  pointer-events: none;
}
.tear-line-top    { top: 297px; }
.tear-line-bottom { top: 725px; }

/* --- Absolutely-positioned fields & labels --- */
.field,
.plain,
textarea.field {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  outline: none;
  resize: none;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.line-input {
  border-bottom: 2px solid var(--line);
  padding: 0 2px 2px 2px;
  background: transparent;
}

.label {
  position: absolute;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Check fields --- */
.company-name     { left: 40px;  top: 52px;  width: 380px; height: 36px; font-size: 24px; line-height: 1.05; font-weight: 800; }
.bank-name        { left: 440px; top: 52px;  width: 140px; height: 46px; font-size: 12px; line-height: 1.15; }
.company-address  { left: 40px;  top: 88px;  width: 255px; height: 42px; font-size: 15px; line-height: 1.18; }
.check-number     { left: 676px; top: 58px;  width: 88px;  height: 24px; font-size: 18px; font-weight: 700; text-align: right; }
.check-date       { left: 676px; top: 100px; width: 88px;  height: 24px; font-size: 14px; text-align: right; }
.payto-label      { left: 40px;  top: 158px; width: 58px;  font-size: 14px; line-height: 1.05; text-align: right; }
.payee            { left: 105px; top: 156px; width: 465px; height: 26px; font-size: 17px; }
.dollar-sign      { left: 610px; top: 156px; height: 30px; font-size: 17px; font-weight: 700; text-align: right; }
.amount-box       { left: 627px; top: 152px; width: 138px; height: 30px; font-size: 17px; font-weight: 700; text-align: right; border: 2px solid #666; padding: 0 8px; letter-spacing: 0.5px; }
.amount-label     { left: 40px;  top: 198px; font-size: 15px; font-weight: 700; text-align: right; }
.amount-words     { left: 105px; top: 192px; width: 465px; height: 22px; font-size: 12px; line-height: 20px; border-bottom: 2px solid var(--line); padding: 0 2px; white-space: nowrap; overflow: hidden; }
.memo-label       { left: 40px;  top: 246px; font-size: 14px; text-align: right; }
.memo             { left: 105px; top: 245px; width: 240px; height: 20px; font-size: 14px; }
.signature-label  { left: 470px; top: 249px; font-size: 14px; }
.signature-line   { position: absolute; left: 540px; top: 264px; width: 225px; border-bottom: 2px solid var(--line); pointer-events: none; }
.routing-num      { left: 40px;  top: 272px; width: 240px; height: 24px; font-size: 20px; font-family: "Courier New", monospace; letter-spacing: 2px; }
.account-num      { left: 300px; top: 272px; width: 240px; height: 24px; font-size: 20px; font-family: "Courier New", monospace; letter-spacing: 2px; }

/* --- Lower stub (mirrors + payee address) --- */
.stub-company-name    { left: 37px;  top: 753px; width: 290px; height: 36px; font-size: 27px; line-height: 1.08; font-weight: 800; }
.stub-company-address { left: 37px;  top: 787px; width: 230px; height: 42px; font-size: 15px; line-height: 1.15; white-space: pre-line; }
.recipient-name       { left: 103px; top: 883px; width: 260px; height: 33px; font-size: 28px; line-height: 1.05; font-weight: 700; }
.recipient-address    { left: 103px; top: 918px; width: 260px; height: 60px; font-size: 18px; line-height: 1.1; }

/* Field background colors: required = light red, optional = yellow */
.required, textarea.required { background: rgba(255, 200, 200, 0.5); }
.optional, textarea.optional { background: rgba(255, 255, 150, 0.4); }
/* focus highlight only for non-textarea fields; textareas keep their required/optional color even when focused */
.field:focus:not(textarea)  { background: rgba(37, 99, 235, 0.06); }
textarea.required:focus  { background: rgba(255, 200, 200, 0.5); }
textarea.optional:focus  { background: rgba(255, 255, 150, 0.4); }

/* Hide number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }

/* ===== Actions area below sheet ===== */
.mask-option {
  position: absolute;
  left: 40px;
  top: 312px; /* just below the top tear line */
  font-size: 14px;
  background: rgba(255,255,255,0.8);
  padding: 4px 6px;
  border-radius: 4px;
}
.check-actions-area { max-width: var(--page-w); margin: 16px auto 0; }
#turnstile-wrapper { margin-bottom: 12px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; padding: 10px 14px; border-radius: 10px; border: 0;
  font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 18px rgba(37,99,235,0.2);
}
.btn-secondary {
  background: #fff; border: 1px solid var(--border);
  color: var(--accent); padding: 10px 14px; border-radius: 10px; cursor: pointer;
}
.note { font-size: 12px; color: var(--muted); margin-top: 8px; max-width: var(--page-w); margin-left: auto; margin-right: auto; }

/* ===== Responsive: scale sheet on narrow screens ===== */
@media (max-width: 860px) {
  .sheet {
    transform-origin: top left;
    transform: scale(calc(100vw / 864));
  }
}