@font-face {
  font-family: 'MICR E13B';
  src: url('data:font/truetype;base64,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') format('truetype');
}

/* ============================================================
   BUSINESS CHECK PRINTER — UI STYLES
   Design: Industrial ledger-book aesthetic
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0f0e0c;
  --surface:    #181714;
  --border:     #2e2b26;
  --border2:    #3d3930;
  --accent:     #c9a84c;       /* warm gold */
  --accent2:    #8a6a1f;
  --text:       #e8e2d6;
  --text-muted: #8a8075;
  --text-dim:   #5a5550;
  --red:        #c94c4c;

  /* Check colors */
  --check-bg:   #faf8f3;
  --check-line: #b8c4d4;
  --check-text: #1a1612;
  --check-bank: #1a3a5c;
  --check-micr: #1a1612;
  --check-void: rgba(180,40,40,0.07);

  --font-ui:    'DM Sans', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-serif: 'DM Serif Display', serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}

body {
  display: flex;
  overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width: 340px;
  min-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.sidebar-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.logo-mark {
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 6px;
  line-height: 1;
}

.sidebar-header h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.sidebar-header h1 em {
  font-style: italic;
  color: var(--accent);
}

.tagline {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Form */
#checkForm { padding: 0 0 24px; }

.form-section {
  padding: 20px 24px 4px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.field input,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.12);
}

.field input::placeholder { color: var(--text-dim); }

.field-row {
  display: flex;
  gap: 10px;
}
.field-row > div { flex: 1; }

.hint {
  display: block;
  font-size: 12px;
  color: var(--text) !important;
  margin-top: 4px;
  line-height: 1.5;
}


.actions {
  padding: 20px 24px 0;
  display: flex;
  gap: 10px;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--accent);
  color: #0f0e0c;
}
.btn-primary:hover { background: #dab95a; }

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border2);
}
.btn-secondary:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── PREVIEW PANEL ───────────────────────────────────────── */
.preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.preview-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.zoom-controls button {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  width: 26px; height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.zoom-controls button:hover { border-color: var(--accent); }

#zoomVal { min-width: 42px; text-align: center; font-family: var(--font-mono); }

.preview-canvas {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 28px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,76,0.04) 0%, transparent 70%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255,255,255,0.025) 39px,
      rgba(255,255,255,0.025) 40px
    );
}

.check-wrapper {
  transform-origin: top center;
  transition: transform 0.2s;
}

.preview-note {
  padding: 12px 28px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  line-height: 1.6;
  flex-shrink: 0;
}

.preview-note strong { color: var(--text-muted); }

/* ============================================================
   THE CHECK ITSELF
   Physical size: 8.5" wide × 3.5" tall (full page width)
   But the check area is 8.0" × 2.75" — standard business
   At 96 DPI screen: 1 inch = 96px
   At print 300 DPI we scale via CSS print rules
   ============================================================ */

/* --- Check container --- */
.check {
  width:  768px;   /* 8.0" at 96dpi */
  height: 336px;   /* 3.5" at 96dpi */   /* expanded for MICR position */
  background: var(--check-bg);
  border: 1px solid #c8c0b0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--check-text);
  box-shadow:
    0 4px 32px rgba(0,0,0,0.45),
    0 1px 4px rgba(0,0,0,0.3),
    inset 0 0 0 3px rgba(255,255,255,0.6);
}

.check::before { display: none; }

/* Watermark */
.check-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  color: rgba(180,160,120,0.055);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: 12px;
}

/* All check content sits above bg */
.check > *:not(.check::before):not(.check-watermark) { position: relative; z-index: 1; }

/* Top accent bar */
.check-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a3a5c 0%, #2a5a8c 40%, #1a3a5c 100%);
  z-index: 2;
}

/* ── Header row ── */
.check-header {
  position: absolute;
  top: 10px;
  left: 16px;
  right: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 1;
}

.check-company {
  flex: 1;
}

.check-company-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--check-bank);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.check-company-address {
  font-size: 8.5px;
  color: #555;
  line-height: 1.45;
  margin-top: 2px;
}

/* Bank info — top right */
.check-bank-info {
  position: absolute;
  top: 10px;
  right: 16px;
  text-align: right;
  z-index: 1;
}

.check-bank-name {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--check-bank);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.check-bank-sub {
  font-size: 7.5px;
  color: #777;
  margin-top: 1px;
}

/* Check number */
.check-number {
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #444;
  z-index: 1;
}

/* ── Date line ── */
.check-dateline {
  position: absolute;
  top: 70px;
  right: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  z-index: 1;
}

.check-dateline label {
  font-size: 8.5px;
  color: #555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.check-dateline .date-value {
  font-size: 11px;
  color: var(--check-text);
  border-bottom: 1px solid #aaa;
  min-width: 110px;
  padding-bottom: 1px;
  text-align: right;
}

/* ── Pay To line ── */
.check-payline {
  position: absolute;
  top: 88px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: baseline;
  gap: 0;
  z-index: 1;
}

.check-payline label {
  font-size: 8.5px;
  color: #555;
  white-space: nowrap;
  margin-right: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex-shrink: 0;
}

.payee-line {
  flex: 1;
  font-size: 12px;
  color: var(--check-text);
  font-weight: 600;
  border-bottom: 1px solid #bbb;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.amount-box {
  margin-left: 12px;
  border: 1.5px solid #888;
  border-radius: 2px;
  padding: 1px 8px;
  min-width: 110px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--check-text);
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.6);
  position: relative;
  flex-shrink: 0;
}

.amount-box::before {
  content: '$';
  position: absolute;
  left: 6px;
  font-size: 10px;
  font-weight: 400;
  top: 50%; transform: translateY(-50%);
  color: #555;
}

/* ── Written amount line ── */
.check-written {
  position: absolute;
  top: 118px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: baseline;
  gap: 0;
  z-index: 1;
}

.check-written label {
  font-size: 7.5px;
  color: #666;
  white-space: nowrap;
  margin-right: 8px;
  font-weight: 500;
  flex-shrink: 0;
}

.written-line {
  flex: 1;
  font-size: 11px;
  color: var(--check-text);
  border-bottom: 1px solid #bbb;
  padding-bottom: 2px;
  font-style: italic;
}

.written-suffix {
  font-size: 9px;
  color: #666;
  white-space: nowrap;
  margin-left: 4px;
  align-self: flex-end;
  padding-bottom: 2px;
}

/* ── Bottom section: Bank + Sig + Memo ── */
.check-bottom {
  position: absolute;
  top: 146px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 1;
}

.check-memo-area {
  flex: 1;
}

.check-memo-area label {
  display: block;
  font-size: 7.5px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
  font-weight: 600;
}

.memo-line {
  font-size: 10px;
  color: #333;
  border-bottom: 1px solid #bbb;
  padding-bottom: 2px;
  min-width: 160px;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.check-sig-area {
  text-align: right;
  min-width: 200px;
}

.sig-line {
  border-bottom: 1.5px solid #333;
  margin-bottom: 3px;
  height: 20px;
}

.sig-label {
  font-size: 7.5px;
  color: #777;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── MICR Line ── */
.check-micr {
  position: absolute;
  bottom: 6px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

/* MICR font mimicry using DM Mono + letter-spacing */
/* Real MICR E-13B characters: ⑆ ⑇ ⑈ ⑉ represented as Unicode */
.micr-text {
  font-family: 'MICR E13B', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--check-micr);
  line-height: 1;
  /* MICR ink simulation */
  text-shadow: 0 0 0.3px rgba(0,0,0,0.8);
}

/* fractional routing */
.check-fractional {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #666;
  font-family: var(--font-mono);
  text-align: center;
  z-index: 1;
}

/* Separator lines on check */
.check-hline {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8c4bc 10%, #c8c4bc 90%, transparent);
}

/* ============================================================
   PRINT STYLES — embedded in JS-generated print doc
   ============================================================ */

/* ============================================================
   MICR web font via CSS unicode-range trick
   We use special characters that look like MICR symbols
   ============================================================ */

@font-face {
  font-family: 'MICR';
  src: local('MICR Encoding'), local('MICREncoding');
  /* fallback handled by monospace stack */
}