:root { --border:#d8dde6; --text:#1e2430; --muted:#687386; --bg:#f5f7fa; --accent:#2457d6; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
a { color:#174dbf; text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#fff; border-bottom:1px solid var(--border); padding:14px 28px; position:sticky; top:0; z-index:5; }
.brand { color:var(--text); font-size:20px; font-weight:700; }
.topbar nav { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.page { max-width:1180px; margin:30px auto; padding:0 20px; }
.heading-row { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
h1 { margin-top:0; }
.muted { color:var(--muted); }
.button, button, select, input, textarea { font:inherit; }
.button, button { display:inline-block; border:1px solid #b9c1ce; background:#fff; color:#222; padding:9px 14px; border-radius:7px; cursor:pointer; text-decoration:none; }
.button:hover { text-decoration:none; }
.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.danger { background:#b42318; color:#fff; border-color:#b42318; }
.link-button { border:0; background:transparent; padding:0; color:#174dbf; }
.inline-form { display:inline-flex; align-items:center; margin:0; }
.table-card, .form-card, .empty-card, .auth-card { background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.table-card { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { padding:12px 14px; border-bottom:1px solid #e9edf3; text-align:left; }
.data-table th { background:#f9fafc; font-size:13px; color:#4d596b; }
.data-table .right, .right { text-align:right; }
.form-card { max-width:760px; margin:0 auto; padding:24px; }
.form-card.wide { max-width:1080px; }
.auth-card { max-width:430px; margin:70px auto; padding:28px; }
.stacked-form { display:grid; gap:16px; }
.grid-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-form label, .stacked-form label, .block-label { display:grid; gap:6px; font-weight:600; font-size:14px; }
.span-2 { grid-column:1 / -1; }
input, select, textarea { width:100%; border:1px solid #bfc7d3; border-radius:6px; padding:9px 10px; background:#fff; color:#111; }
textarea { resize:vertical; }
.form-actions { display:flex; gap:10px; margin-top:12px; }
.section-title { margin:12px 0 0; font-size:18px; }
.flash-wrap { margin-bottom:16px; }
.flash { padding:11px 14px; border-radius:7px; margin-bottom:8px; }
.flash.success { background:#e8f7ee; border:1px solid #a9dfba; }
.flash.error { background:#fff0ef; border:1px solid #efb4ae; }
.empty-card { padding:30px; text-align:center; }
.status { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:#eef1f5; }
.status-paid { background:#dff5e7; }
.status-overdue { background:#fde4e2; }
.status-sent { background:#e3edff; }
.invoice-meta { margin-bottom:24px; }
.line-editor input { min-width:80px; }
.line-editor td:first-child input { min-width:320px; }
.line-editor .qty { width:100px; }
.line-editor .price { width:150px; }
.line-editor .vat { width:110px; }

.invoice-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 auto 14px; max-width:210mm; }
.invoice-page { max-width:none; margin:18px auto; }
.line-editor .job { width:120px; }
.line-editor .qty { width:90px; }
.line-editor .price { width:140px; }
.line-editor .vat { width:100px; }
.line-editor td:nth-child(2) input { min-width:300px; }

.lpw-invoice-sheet {
  width:210mm;
  height:297mm;
  margin:0 auto;
  background:#fff;
  color:#252a2d;
  padding:7mm 7mm 6mm;
  box-shadow:0 3px 18px rgba(0,0,0,.14);
  font-family:Arial, Helvetica, sans-serif;
  font-size:11.5pt;
  line-height:1.15;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
.lpw-header { height:32mm; display:grid; grid-template-columns:64% 36%; border:1px solid #b7c0c8; }
.lpw-brand-wrap { display:flex; align-items:center; justify-content:center; padding:1.5mm 2.5mm; border-right:1px solid #b7c0c8; overflow:hidden; }
.lpw-logo { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center; }
.lpw-contact { font-size:10.3pt; color:#555f66; line-height:1.1; overflow:hidden; }
.lpw-contact > * { height:8mm; display:flex; align-items:center; padding:.7mm 1.5mm; border-bottom:1px solid #d1d6db; }
.lpw-contact > *:last-child { border-bottom:0; }
.lpw-contact strong { display:block; color:#343a3e; font-size:11.5pt; }
.lpw-small-contact { font-size:8.3pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lpw-company-name { font-weight:700; color:#68717a; font-size:10pt; }
.lpw-title { height:12mm; border:1px solid #aeb8c0; border-top:1.2mm solid #204a70; display:flex; align-items:center; font-size:25pt; font-weight:800; padding:0 1mm; letter-spacing:-.4px; }
.lpw-customer-meta { height:38mm; display:grid; grid-template-columns:51% 38%; justify-content:space-between; align-items:start; }
.lpw-bill-box { border-left:1px solid #c1c8ce; border-right:1px solid #c1c8ce; border-bottom:1px solid #c1c8ce; }
.lpw-bill-box > div { height:7mm; display:flex; align-items:center; padding:0 1mm; border-bottom:1px solid #d0d5da; }
.lpw-bill-box > div:last-child { border-bottom:0; }
.lpw-subhead { font-weight:800; }
.lpw-subhead.light { color:#6a7075; }
.lpw-subhead.dark { background:#30383c; color:white; padding:1.3mm 1mm; font-size:10.5pt; }
.lpw-meta-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.lpw-meta-table th, .lpw-meta-table td { height:8mm; border-bottom:1px solid #cdd3d8; padding:0 1mm; }
.lpw-meta-table th { width:44%; background:#3a4246; color:white; text-align:left; font-weight:700; }
.lpw-meta-table td { border-right:1px solid #c1c8ce; text-align:right; font-weight:700; white-space:nowrap; }
.lpw-spacer { height:12mm; border-left:1px solid #b8c1c8; border-right:1px solid #b8c1c8; }
.lpw-lines { width:100%; border-collapse:collapse; table-layout:fixed; }
.lpw-lines thead th { height:8.5mm; background:#30383c; color:#fff; border-right:1px solid #cfd4d8; padding:.8mm 1mm; font-size:10pt; }
.lpw-lines tbody td { height:8.2mm; border-left:1px solid #cfd4d8; border-right:1px solid #cfd4d8; border-bottom:1px solid #d7dce0; padding:.9mm 1mm; vertical-align:middle; }
.lpw-lines .job-col { width:12%; }
.lpw-lines .qty-col { width:10%; }
.lpw-lines .price-col { width:14%; }
.lpw-lines .amount-col { width:14%; }
.lpw-lines .center { text-align:center; }
.lpw-lines .right { text-align:right; }
.lpw-lines tr.blank td { height:8.2mm; }
.lpw-total-area { flex:1; min-height:50mm; border-left:1px solid #b8c1c8; border-right:1px solid #b8c1c8; position:relative; padding:14mm 0 0; }
.lpw-total-box { width:38%; margin-left:auto; border-collapse:collapse; border:1.2px solid #30383c; table-layout:fixed; }
.lpw-total-box th, .lpw-total-box td { height:10mm; padding:1mm; font-size:15pt; }
.lpw-total-box th { width:62%; background:#c7cbd0; text-align:left; }
.lpw-total-box td { text-align:right; font-weight:800; border-left:1px solid #d5b85f; }
.lpw-total-box.vat-total th, .lpw-total-box.vat-total td { height:7.8mm; font-size:11pt; border-bottom:1px solid #aeb4b8; }
.lpw-total-box.vat-total .grand th, .lpw-total-box.vat-total .grand td { font-size:14pt; border-top:1.2px solid #30383c; }
.lpw-thanks { position:absolute; bottom:10mm; left:1mm; font-style:italic; color:#7e8488; font-size:10.5pt; max-width:60%; }
.lpw-payment-row { height:42mm; display:grid; grid-template-columns:51% 38%; justify-content:space-between; align-items:stretch; }
.lpw-payment-box, .lpw-reference-box { border:1px solid #c2c9ce; }
.lpw-payment-box table { width:100%; border-collapse:collapse; font-size:9.2pt; }
.lpw-payment-box th, .lpw-payment-box td { height:7mm; border-bottom:1px solid #d3d8dc; padding:.8mm 1mm; text-align:left; }
.lpw-payment-box th { width:23%; font-weight:700; }
.lpw-reference-box { text-align:center; }
.lpw-ref-number { font-size:17pt; font-weight:800; margin-top:5mm; }
.lpw-ref-note { margin-top:6mm; font-size:9.5pt; color:#7a7f83; font-style:italic; line-height:1.1; }
.lpw-footer-bar { height:9mm; background:#30383c; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:9.5pt; letter-spacing:.1px; }

@media (max-width:850px) {
  .grid-form { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .lpw-invoice-sheet { width:100%; height:auto; min-height:0; padding:10px; }
}
@page { size:A4; margin:0; }
@media print {
  html, body { width:210mm; height:297mm; background:#fff; }
  body { margin:0; }
  .no-print { display:none !important; }
  .page, .invoice-page { margin:0; padding:0; max-width:none; }
  .lpw-invoice-sheet { width:210mm; height:297mm; box-shadow:none; margin:0; padding:7mm 7mm 6mm; overflow:hidden; }
}

/* v5 secure login and account security */
.auth-shell { min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:34px 16px; }
.secure-auth-card { width:100%; max-width:460px; margin:0; padding:34px; border-top:4px solid #30383c; box-shadow:0 14px 38px rgba(17,24,39,.10); }
.secure-auth-card h1 { margin:10px 0 6px; font-size:29px; letter-spacing:-.4px; }
.security-badge { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#30383c; color:white; font-weight:800; font-size:13px; letter-spacing:.5px; }
.auth-submit { width:100%; padding:11px 16px; font-weight:700; }
.security-notes { display:grid; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); color:#5f6977; font-size:13px; }
.security-notes span::before { content:'✓'; display:inline-block; margin-right:8px; font-weight:800; color:#177245; }
.field-help { margin:-7px 0 2px; font-size:12.5px; color:var(--muted); }
.two-factor-card { max-width:500px; }
.qr-wrap { display:flex; justify-content:center; margin:20px 0; }
.qr-wrap img { width:230px; max-width:100%; height:auto; border:1px solid var(--border); border-radius:10px; background:#fff; padding:8px; }
.manual-key { margin:12px 0 20px; border:1px solid var(--border); border-radius:8px; padding:11px 13px; background:#fafbfc; }
.manual-key summary { cursor:pointer; font-weight:700; }
.manual-key code { display:block; overflow-wrap:anywhere; font-size:14px; padding:8px 0 2px; }
.compact-top { margin-top:12px; }
.code-input { font-size:22px; letter-spacing:3px; text-align:center; font-weight:700; }
.security-card { max-width:760px; }
.warning-box { background:#fff7e6; border:1px solid #e7c36a; border-radius:8px; padding:13px 15px; margin:18px 0; }
.recovery-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 24px; }
.recovery-grid code { display:block; padding:12px; text-align:center; border:1px solid var(--border); border-radius:7px; background:#f8fafc; font-size:16px; font-weight:700; letter-spacing:.7px; }
.security-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.security-stat { background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px; display:grid; gap:7px; }
.security-stat strong { font-size:13px; color:#4d596b; }
.security-stat span { font-size:16px; }
.security-ok { color:#177245; font-weight:800; }
.security-actions { margin:0 0 18px; }
.security-log-card { margin-top:6px; }
@media (max-width:650px) {
  .recovery-grid, .security-summary-grid { grid-template-columns:1fr; }
  .secure-auth-card { padding:24px; }
}