:root{
  --page:#e9eef4; --sheet:#ffffff; --ink:#111418; --muted:#555c66; --rule:#1d232b;
  --line:#c3cad3; --fill:#f4f7fb; --blue:#1450b8; --red:#c4161c;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page:#1a1f27; } }
:root[data-theme="dark"]{ --page:#1a1f27; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Segoe UI",sans-serif;font-size:15px;line-height:1.4}
.sheet{max-width:900px;margin:24px auto;background:var(--sheet);padding:32px 36px 40px;
  box-shadow:0 2px 14px rgba(0,0,0,.18)}
.logo{display:block;width:min(640px,100%);height:auto;margin:0 auto 8px}
.titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:8px 0 14px}
h1{margin:0;border:1.5px solid var(--rule);padding:6px 48px;font-weight:400;font-size:24px;letter-spacing:.5px}
.date{border:1.5px solid var(--rule);padding:6px 10px;display:flex;align-items:center;gap:8px}
.date label{font-weight:600}
input,textarea{font:inherit;color:var(--ink);background:var(--fill);border:1px solid var(--line);
  border-radius:3px;padding:6px 8px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:0;background:#fff}
input[readonly]{background:transparent;border-color:transparent;font-weight:600;text-align:right}
.contact{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--rule);margin-bottom:20px}
.contact fieldset{border:0;margin:0;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center}
.contact fieldset+fieldset{border-left:1.5px solid var(--rule)}
.contact label{font-size:14px;white-space:nowrap}
.req{color:var(--red)}
.tablewrap{overflow-x:auto;border:1.5px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{border:1px solid var(--rule);padding:3px}
th{font-size:13px;font-weight:700;text-transform:uppercase;padding:8px 4px;line-height:1.2}
td input{border:0;background:transparent;border-radius:0;padding:6px}
td input:focus{background:var(--fill)}
td.num input{text-align:right}
td.rm{width:28px;text-align:center;border-right:0}
.rmbtn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}
.rmbtn:hover{color:var(--red)}
tfoot td{font-size:13px;text-align:center;font-weight:600}
tfoot .hint{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.addrow{margin:8px 0 0;background:none;border:1px dashed var(--line);color:var(--blue);padding:6px 12px;cursor:pointer;font:inherit;border-radius:3px}
.bottom{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:20px}
.notes p{margin:0 0 12px;font-size:14px}
.notes a{color:var(--blue)}
.sums{display:grid;grid-template-columns:1fr 130px;border:1.5px solid var(--rule)}
.sums label,.sums .lbl{padding:8px 10px;text-align:right;font-size:13px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:flex-end;gap:6px}
.sums .cell{border-left:1.5px solid var(--rule);border-bottom:1px solid var(--rule);padding:3px}
.sums .cell input{text-align:right}
.sums .due{font-size:16px;font-weight:700;border-bottom:0}
.sums .due+.cell{border-bottom:0}
.vatrate{width:64px;padding:3px 5px;text-align:right}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:24px}
.btn{font:inherit;font-weight:600;padding:10px 18px;border-radius:4px;cursor:pointer;border:1.5px solid var(--blue)}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.paypal{background:#ffc439;color:#002991;border-color:#253b80;display:inline-flex;align-items:center;gap:8px}
.btn.paypal:hover{background:#ffd25e}
.btn.paypal .ppmark{width:22px;height:22px;flex:none}
.btn:focus-visible,.addrow:focus-visible,.rmbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.msg{margin-top:10px;text-align:right;font-size:14px;color:var(--red);min-height:1.2em}
@media (max-width:700px){
  .sheet{margin:0;padding:18px 14px 28px;box-shadow:none}
  .contact{grid-template-columns:1fr}
  .contact fieldset+fieldset{border-left:0;border-top:1.5px solid var(--rule)}
  .bottom{grid-template-columns:1fr}
  h1{padding:6px 24px}
}
@media print{
  body{background:#fff}.sheet{box-shadow:none;margin:0;max-width:none}
  .actions,.addrow,.rm,.rmbtn,.msg,th.rm{display:none}
  input{background:transparent!important;border-color:transparent}
}