:root{
  --line:#e5e7eb;
  --muted:#6b7280;
  --shadow:0 8px 24px rgba(17,24,39,.06);
  --focus:#2563eb;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:#f4f6fb;
  color:#111827;
}

header{ background:#fff; border-bottom:1px solid var(--line); }
.header-inner{
  max-width:1200px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
}
.header-inner img{height:42px; width:auto;}
.header-title{display:flex; flex-direction:column; gap:2px; flex:1;}
.header-title strong{font-size:14px;}
.header-title span{font-size:12px; color:var(--muted);}
.header-actions{display:flex; gap:8px; align-items:center;}

.btn{
  appearance:none; border:1px solid #d1d5db; background:#111827; color:#fff;
  padding:9px 10px; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer;
}
.btn.secondary{background:#fff; color:#111827;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

main{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  display:grid;
  grid-template-columns: 760px 1fr; /* left bigger */
  gap:16px;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card h2{ margin:0; padding:12px 14px; font-size:14px; border-bottom:1px solid #eef2f7; }
.card .content{ padding:12px 14px; }

.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:10px;
}
.tool{ display:flex; flex-direction:column; gap:4px; min-width:120px; }
.tool label{ font-size:12px; color:#374151; }
.tool input,.tool select{
  width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:10px; font-size:13px; outline:none;
}
.tool .hint{ font-size:11px; color:var(--muted); }

.invoice-stage{
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px;
  max-height: calc(100vh - 250px);
  overflow:auto;
}

.canvas-viewport{
  width:100%;
  position:relative;
  padding-top: calc(842 / 595 * 100%);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.invoice-page{
  position:absolute;
  left:0; top:0;
  width:595px;
  height:842px;
  transform-origin: top left;
  background:#fff;
  background-image:url("assets/invoice_template_blank.png");
  background-size:595px 842px;
  background-repeat:no-repeat;
}

/* Overlay inputs */
.inv-input{
  position:absolute;
  border:1px solid transparent;
  background:transparent;
  border-radius:6px;
  padding:2px 6px;
  height:22px;
  outline:none;
  font-size:12px;
  line-height:18px;
  color:#111827;
}
.inv-input:hover{
  border-color: rgba(17,24,39,0.18);
  background:rgba(255,255,255,0.22);
}
.inv-input:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
  background:rgba(255,255,255,0.92);
}
.inv-input.small{font-size:11px; height:20px;}
.inv-input.big{font-size:14px; font-weight:700; height:26px;}
.inv-input.mono{font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}

.inv-row-label{ position:absolute; font-size:12px; color:#111827; }

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

/* Help tooltip */
.help{
  position:absolute;
  width:18px; height:18px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,0.25);
  background:rgba(255,255,255,0.92);
  color:#111827;
  font-weight:800;
  font-size:12px;
  line-height:18px;
  text-align:center;
  cursor:pointer;
  z-index: 9998;
}
.tooltip{
  position:absolute;
  z-index:9999;
  width:320px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
}
.tooltip p{margin:0 0 8px 0; font-size:12px; color:#374151; line-height:1.35;}
.tooltip img{width:100%; height:auto; border-radius:10px; border:1px solid #e5e7eb;}
.tooltip .close{
  position:absolute; top:8px; right:8px;
  border:1px solid #d1d5db;
  background:#fff;
  border-radius:10px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
}

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.note{ font-size:12px; color:var(--muted); line-height:1.35; }

/* Live HTML preview */
.live-preview-stage{
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px;
}
.preview-viewport{
  width:100%;
  position:relative;
  padding-top: calc(842 / 595 * 100%);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.preview-page{
  position:absolute;
  left:0; top:0;
  width:595px; height:842px;
  transform-origin: top left;
  background:#fff;
  background-image:url("assets/invoice_template_blank.png");
  background-size:595px 842px;
  background-repeat:no-repeat;
}
.ptext{
  position:absolute;
  font-size:12px;
  line-height:1.2;
  color:#111827;
  white-space:nowrap;
}
.ptext.small{font-size:10px;}
.ptext.big{font-size:18px; font-weight:700;}
.ptext.bold{font-weight:700;}
.ptext.grey{color:#777;}
.ptext.right{text-align:right;}
.ptext.strike{text-decoration:line-through;}

/* Password overlay */
#loginOverlay{
  position:fixed; inset:0; background:rgba(15,23,42,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:16px;
}
.login-card{
  width:min(420px, 100%);
  background:#fff; border-radius:16px; border:1px solid var(--line);
  box-shadow: 0 18px 45px rgba(15,23,42,0.25);
  overflow:hidden;
}
.login-card header{ border-bottom:1px solid #eef2f7; padding:14px 14px 10px 14px; }
.login-card header strong{display:block; font-size:14px;}
.login-card header span{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.login-card .body{padding:14px;}
.login-row{display:flex; gap:10px;}
.login-row input{
  flex:1; padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; font-size:14px;
}
.login-error{margin-top:10px; color:#b91c1c; font-size:12px; min-height:16px;}

@media (max-width: 1050px){
  main{grid-template-columns:1fr;}
}