:root{--bg:#f6f6f4;--panel:#fff;--ink:#1a1a1a;--muted:#6b6b6b;--line:#e2e2de;--accent:#1f3a5f;--accent-ink:#fff;--danger:#a12a2a;--ok:#1d6b3a;--radius:8px;color:var(--ink);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;font-size:14px;line-height:1.45}a{color:var(--accent)}h1{margin:0 0 16px;font-size:22px}h2{margin:0 0 12px;font-size:16px}.nav{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:20px;padding:12px 24px;display:flex}.nav .brand{letter-spacing:.5px;color:var(--ink);margin-right:12px;font-weight:700;text-decoration:none}.nav a{color:var(--muted);text-decoration:none}.nav a.active{color:var(--ink);font-weight:600}.nav .spacer{flex:1}main{max-width:1180px;margin:0 auto;padding:24px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.stack>*+*{margin-top:16px}.row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.grow{flex:1}.between{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}label.field{color:var(--muted);flex-direction:column;gap:4px;font-size:12px;display:flex}input,select,textarea{font:inherit;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:6px;min-width:0;padding:7px 9px}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid #c7d3e3}input:disabled,select:disabled,textarea:disabled{color:var(--muted);background:#f3f3f1}input.num{text-align:right}button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);color:var(--ink);white-space:nowrap;background:#fff;border-radius:6px;align-items:center;gap:6px;padding:7px 14px;text-decoration:none;display:inline-flex}button:hover:not(:disabled),.btn:hover{background:#f1f1ee}button:disabled{opacity:.5;cursor:not-allowed}button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button.primary:hover:not(:disabled),.btn.primary:hover{background:#173050}button.danger{color:var(--danger)}button.link{color:var(--accent);background:0 0;border:none;padding:0}button.small,.btn.small{padding:3px 9px;font-size:13px}table.list{border-collapse:collapse;width:100%}table.list th,table.list td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:9px 10px}table.list th{color:var(--muted);font-size:12px;font-weight:500}table.list td.r,table.list th.r{text-align:right}table.list tr:hover td{background:#fafaf8}.badge{border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;display:inline-block}.badge.draft{color:var(--muted)}.badge.sent{color:var(--accent);background:#eef3f9;border-color:#c7d3e3}.badge.paid{color:var(--ok);background:#edf7f0;border-color:#bfe0cb}.error{color:var(--danger);background:#fbeeee;border:1px solid #f0d0d0;border-radius:6px;padding:8px 12px}.notice{background:#fff8e6;border:1px solid #f0e0b0;border-radius:6px;padding:8px 12px}.muted{color:var(--muted)}.editor{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.lines{border-collapse:collapse;width:100%}.lines th{color:var(--muted);text-align:left;padding:6px 4px;font-size:12px;font-weight:500}.lines td{vertical-align:middle;padding:4px}.lines input{width:100%}.lines .amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:8px}@font-face{font-family:InvoiceBody;src:url(/fonts/body-light.woff)format("woff");font-weight:300;font-display:swap}@font-face{font-family:InvoiceBody;src:url(/fonts/body-semibold.woff)format("woff");font-weight:600;font-display:swap}@font-face{font-family:InvoiceDisplay;src:url(/fonts/display-semibold.woff)format("woff");font-weight:600;font-display:swap}.sheet{border:1px solid var(--line);background:#fff;border-radius:4px;overflow:hidden;container-type:inline-size}.sheet .page{--pt:calc(100cqw / 612);aspect-ratio:612/792;min-height:calc(var(--pt) * 792);height:auto;padding:calc(var(--pt) * 32) calc(var(--pt) * 20) calc(var(--pt) * 92);font-family:InvoiceBody,sans-serif;font-weight:300;font-size:calc(var(--pt) * 11);line-height:calc(var(--pt) * 13);color:#000;position:relative}.sheet .wm{font-family:InvoiceDisplay,sans-serif;font-weight:600;font-size:calc(var(--pt) * 110);color:#ececec;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;transform:rotate(-30deg)}.sheet .page>:not(.wm,.logo){position:relative}.sheet .hdr{height:calc(var(--pt) * 76);margin-top:calc(var(--pt) * -3);display:flex}.sheet .biz{flex:1}.sheet .biz-name{font-weight:600;font-size:calc(var(--pt) * 10)}.sheet .ttl{text-align:right;margin-top:calc(var(--pt) * -4);font-family:InvoiceDisplay,sans-serif;font-weight:600;font-size:calc(var(--pt) * 20);line-height:calc(var(--pt) * 26);flex:1}.sheet .billto{margin-top:calc(var(--pt) * 53);height:calc(var(--pt) * 167)}.sheet .sec-head{padding-bottom:calc(var(--pt) * 4);margin-bottom:calc(var(--pt) * 8);border-bottom:1px solid #000;font-weight:600}.sheet .bill-row{display:flex}.sheet .bill-left{width:calc(var(--pt) * 378);margin-right:calc(var(--pt) * 10)}.sheet .company{font-family:InvoiceDisplay,sans-serif;font-weight:600}.sheet .details{flex:1;display:flex}.sheet .details .labels{flex:1}.sheet .details .values{width:calc(var(--pt) * 99);text-align:right;white-space:nowrap;font-weight:600}.sheet .srow{padding-bottom:calc(var(--pt) * 4);display:flex}.sheet .srow.shead{white-space:nowrap;border-bottom:1px solid #000;font-weight:600}.sheet .srow.line{margin-top:calc(var(--pt) * 24);border-bottom:.5px solid #000}.sheet .c-desc{width:calc(var(--pt) * 233);margin-right:calc(var(--pt) * 10);overflow-wrap:anywhere}.sheet .c-sal{width:calc(var(--pt) * 135);margin-right:calc(var(--pt) * 10)}.sheet .c-pct{width:calc(var(--pt) * 87);margin-right:calc(var(--pt) * 10)}.sheet .c-amt{text-align:right;white-space:nowrap;flex:1}.sheet .grand{margin-top:calc(var(--pt) * 24);padding-bottom:calc(var(--pt) * 4);text-align:right;font-family:InvoiceDisplay,sans-serif;font-weight:600;font-size:calc(var(--pt) * 20);line-height:calc(var(--pt) * 27)}.sheet .logo{left:calc(var(--pt) * 408);top:calc(var(--pt) * 717);width:calc(var(--pt) * 184);height:calc(var(--pt) * 37);position:absolute}@media (min-width:1000px){.editor{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}.editor .preview{position:sticky;top:16px}}