:root{--ink:#0f172a;--faint:#cfd8ea;--brand:#2563eb;}
*{box-sizing:border-box}body{margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:#f6f9ff}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 0 18px}
.title{font-size:28px;font-weight:800}
.title small{font-weight:600;color:#64748b}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{position:relative;display:inline-block;padding:10px 12px;border:1px solid var(--faint);border-radius:10px;background:#fff;cursor:pointer}
.btn.primary{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:18px;padding:18px}
.left label{display:block;margin-bottom:10px}
.left input, .left textarea{width:100%;padding:10px;border:1px solid var(--faint);border-radius:10px;background:#fff}
.left h3{margin:18px 0 8px 0}
.ocr-box{margin-top:10px;border:1px dashed var(--faint);border-radius:10px;padding:8px;background:#fff}
.ocr-status{font-size:14px;color:#334155;margin:6px 0}
.right{background:#fff;border:1px solid var(--faint);border-radius:14px;padding:14px}
#sheet{width:100%;max-width:794px;border:1px dashed var(--faint);border-radius:10px;background:#fff}
.hint{color:#475569;font-size:14px}
.previews{display:flex;gap:8px}
.previews img{width:80px;height:auto;border:1px solid var(--faint);border-radius:8px;background:#fff;padding:4px}


/* === UI Polish v10.4 — mobile-first tidy layout === */

/* Give the left form the same card look as the preview */
.left{background:#fff;border:1px solid var(--faint);border-radius:14px;padding:14px}

/* Unify inputs spacing */
.left label{display:block;margin:0 0 12px 0}
.left input, .left textarea{width:100%;padding:12px 14px;border:1px solid var(--faint);border-radius:12px;background:#fff}

/* Make preview area clean and contained */
#sheet{width:100%;max-width:794px;border:1px dashed var(--faint);border-radius:12px;background:#fff}
.previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.previews img{max-height:96px;max-width:48%;object-fit:contain;border:1px solid var(--faint);border-radius:10px;background:#fff;padding:6px}

/* Tighter heading rhythm */
.left h3{margin:16px 0 8px 0}

/* Buttons look like a toolbar */
.actions .btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* Grid becomes cleaner on wide screens; on narrow we go single-column */
@media (max-width: 980px){
  header{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 16px 0}
  .title{font-size:22px}
  .grid{grid-template-columns:1fr;gap:12px;padding:12px}
  .actions{width:100%;overflow-x:auto;gap:8px;padding:8px 0;margin-right:-16px}
  .actions .btn{flex:0 0 auto}
  /* sticky toolbar under the header for convenience */
  .actions{position:sticky;top:0;background:linear-gradient(#f6f9ff,#f6f9ff);z-index:20}
  .right{order:2}
  .left{order:1}
  .hint{font-size:13px}
}

/* Improve tap targets on very small screens */
@media (max-width: 420px){
  .btn{padding:12px 14px;border-radius:12px}
  .left input, .left textarea{padding:14px}
  .title{font-size:20px}
}

/* Subtle shadows for cards */
.left, .right{box-shadow:0 1px 1px rgba(2,12,27,.04), 0 4px 8px rgba(2,12,27,.06)}