:root{--ink:#132039;--muted:#64748b;--line:#e2e8f0;--brand:#2563eb;--paper:#fff;--canvas:#f3f6fa;--good:#047857;--bad:#b91c1c}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px max(20px,calc((100vw - 1450px)/2));background:white;border-bottom:1px solid var(--line);flex-wrap:wrap}.top h1{font-size:23px;letter-spacing:-.6px;margin:0}.top p{margin:2px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{padding:9px 13px;background:white;border:1px solid #cbd5e1;border-radius:9px;color:#334155;font-weight:650}.btn:hover{background:#f8fafc}.btn.primary{background:var(--brand);color:white;border-color:var(--brand)}.btn.primary:hover{background:#1d4ed8}.btn.danger{color:#b91c1c}.app{max-width:1470px;padding:20px;margin:auto;display:grid;grid-template-columns:minmax(335px,495px) minmax(0,1fr);gap:22px;align-items:start}.editor{background:white;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 4px 22px #0b214009}.editor h2{font-size:15px;margin:22px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}.editor h2:first-of-type{margin-top:6px}.row{display:flex;gap:11px}.row>*{flex:1;min-width:0}.field{display:block;margin:0 0 11px}.field span{display:block;font-size:12px;font-weight:650;color:#475569;margin-bottom:5px}input:not([type=file]),select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:9px 10px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #2563eb18}textarea{resize:vertical;min-height:62px}.hint{font-size:11px;color:#64748b;margin:-5px 0 12px}.status{font-size:12px;color:#475569;margin:6px 0 8px}.status.bad{color:var(--bad)}.status.good{color:var(--good)}.listitem{background:#f8fafc;border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:10px}.listitem-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px}.listitem-head b{font-size:12px}.link-btn{border:0;background:transparent;color:#b91c1c;font-weight:700;padding:3px 6px}.add{width:100%;border:1px dashed #93c5fd;border-radius:9px;background:#eff6ff;color:#1d4ed8;font-weight:750;padding:11px}.muted{color:var(--muted)}.footer-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.preview-outer{position:sticky;top:18px}.preview-label{font-size:12px;font-weight:700;color:#64748b;margin:0 0 10px}.invoice{background:#fff;border-radius:12px;box-shadow:0 5px 28px #13203917;padding:clamp(24px,4vw,56px);min-height:910px;word-break:break-word}.inv-top{display:flex;justify-content:space-between;gap:18px;padding-bottom:26px;border-bottom:3px solid var(--brand);align-items:flex-start}.logo{max-width:170px;max-height:90px;object-fit:contain;display:block;margin-bottom:11px}.business-name{font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.5px}.company-line{color:#475569;font-size:12px;white-space:pre-wrap;line-height:1.65;margin-top:5px}.inv-title{text-align:right;min-width:142px}.inv-title h2{font-size:32px;margin:0;color:var(--brand);letter-spacing:2px}.small-label{color:#64748b;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:800;margin-bottom:5px}.inv-top-meta{margin-top:10px;font-size:12px;color:#475569}.inv-top-meta strong{color:#0f172a}.invoice-status{display:inline-block;background:#dbeafe;color:#1d4ed8;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:800;margin:6px 0 0}.invoice-status.paid{background:#dcfce7;color:#166534}.invoice-status.overdue{background:#fee2e2;color:#991b1b}.inv-clients{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 27px}.inv-clients strong{font-size:14px;display:block}.inv-clients div+div{color:#475569}.breaklines{white-space:pre-wrap}.inv-items{width:100%;border-collapse:collapse;table-layout:fixed}.inv-items th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:#203a65;padding:11px 9px}.inv-items th:first-child{border-radius:5px 0 0 5px;width:45%}.inv-items th:nth-child(2){width:13%}.inv-items th:nth-child(3){width:19%}.inv-items th:nth-child(4){width:23%}.inv-items th:last-child{text-align:right}.inv-items td{padding:13px 9px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12px;overflow-wrap:anywhere}.inv-items td:last-child{text-align:right;font-weight:750}.inv-items .details{font-size:11px;color:#64748b;margin-top:4px;white-space:pre-wrap}.inv-totals{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px);gap:18px}.rate-note{font-size:11px;color:#64748b;max-width:260px;align-self:start}.rate-note b{display:block;font-size:12px;color:#334155}.totals-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:12px;color:#475569}.totals-row strong{color:#0f172a}.grand{padding:12px 0 9px;border-top:2px solid #1d4ed8;margin-top:10px;font-size:17px;font-weight:800;color:#132039}.grand strong{color:#1d4ed8}.balance{border-top:1px solid var(--line);padding-top:10px;font-weight:800;color:#132039}.inv-bottom{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:#475569}.inv-bottom h4{color:#132039;margin:0 0 7px;font-size:12px}.inv-bottom p{margin:0;white-space:pre-wrap}.invoice-footer{margin-top:54px;text-align:center;color:#94a3b8;font-size:11px}.fx-credit{margin-top:6px}.fx-credit a{color:#64748b}.hidden{display:none!important}.small-instructions{font-size:12px;color:#64748b;margin:8px 0}.saved-wrapper{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.nowrap{white-space:nowrap}.numeric{text-align:right}@media(max-width:1050px){.app{grid-template-columns:1fr}.preview-outer{position:static}.invoice{min-height:auto}}@media(max-width:580px){.top{padding:16px}.app{padding:12px;gap:16px}.editor{padding:15px}.invoice{padding:20px 12px}.inv-top{gap:8px}.inv-title h2{font-size:21px}.business-name{font-size:16px}.inv-clients{gap:10px}.inv-items th,.inv-items td{padding:8px 4px;font-size:10px}.inv-totals{grid-template-columns:1fr}.rate-note{max-width:none}.inv-bottom{grid-template-columns:1fr}.row.mobile-stack{flex-direction:column;gap:0}}@page{size:A4;margin:12mm}@media print{html,body{background:white!important;margin:0!important;padding:0!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.top,.editor,.preview-label{display:none!important}.app{display:block!important;padding:0!important;margin:0!important;max-width:none!important}.preview-outer{position:static!important}.invoice{border-radius:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;font-size:12px!important}.inv-items thead{display:table-header-group}.inv-items tr{break-inside:avoid}.inv-bottom{break-inside:avoid}.fx-credit{display:none!important}}

/* Reference invoice design */
:root{--ink:#293547;--brand:#89b637;--muted:#68717d;--line:#e9ecef;--canvas:#eef0f3;--navy:#293547}
body{font-family:Arial,Helvetica,sans-serif}.top{background:#293547;color:#fff;border:0}.top p{color:#c9d0da}.top .btn{border-color:#5b6779;background:#344155;color:#fff}.top .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:#779f2d}.editor{border-radius:10px;box-shadow:none}.editor h2{color:#293547}.add{border-color:#9abf5f;color:#628b1e;background:#f5f9ed}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #89b63720}.preview-outer{position:static}.preview-label{letter-spacing:.6px;color:#68717d}.invoice{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:0;box-shadow:0 12px 40px #29354726;padding:0;min-height:1020px;color:#252a31;overflow:hidden;font-family:Arial,Helvetica,sans-serif}.inv-top{position:relative;isolation:isolate;border:0;padding:37px 42px 28px;min-height:146px;align-items:flex-start;gap:30px}.brand-panel{position:relative;max-width:47%;color:#fff;padding-right:15px;padding-top:7px}.inv-top:before{content:"";position:absolute;z-index:-1;inset:0 auto auto 0;width:55%;height:127px;background:var(--navy);clip-path:polygon(0 0,100% 0,79% 100%,0 100%)}.inv-top:after{content:"";position:absolute;z-index:-2;left:39%;top:0;width:20%;height:127px;background:var(--brand);clip-path:polygon(40% 0,100% 0,53% 85%,37% 85%,29% 100%,0 100%)}.brand-stripe{position:absolute;z-index:-1;left:47%;top:0;width:8%;height:109px;background:#99c94a;clip-path:polygon(66% 0,100% 0,23% 100%,0 100%)}.business-name{font-size:23px;letter-spacing:.2px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}.brand-tagline{font-size:8px;letter-spacing:1.6px;margin-top:7px;color:#d6dce4;text-transform:uppercase}.logo{max-height:53px;max-width:175px;margin:0 0 7px}.brand-panel.has-logo .business-name{font-size:13px}.brand-panel.has-logo .brand-tagline{display:none}.inv-title{margin-left:auto;max-width:43%;min-width:0;text-align:left;padding-top:8px}.inv-title h2{color:var(--brand);font-size:34px;letter-spacing:-1px;line-height:1;margin:0 0 12px;font-weight:800}.inv-top-meta{margin:0;font-size:10px;color:#303640;line-height:1.8}.inv-top-meta>div{display:flex;justify-content:space-between;gap:12px}.inv-top-meta strong{font-size:9px;color:#303640}.invoice-status{margin:8px 0 0;background:#edf4e2;color:#628a21;border-radius:2px;font-size:9px;padding:2px 7px}.inv-clients{grid-template-columns:1fr 1fr;margin:16px 42px 30px;gap:35px}.inv-clients>div:last-child{padding-left:36px}.small-label{color:#83ab35;letter-spacing:0;text-transform:none;font-size:11px;margin-bottom:5px;font-weight:700}.inv-clients strong{font-size:19px;line-height:1.2;color:#24282d}.company-line{margin-top:7px;font-size:11px;line-height:1.7;white-space:pre-wrap;color:#303640}.table-wrap{padding:0 42px}.inv-items{border-collapse:separate;border-spacing:3px 0;margin:0 -3px;width:calc(100% + 6px)}.inv-items th{background:var(--navy);text-align:center;color:#fff;font-size:10px;font-weight:500;letter-spacing:0;padding:14px 7px;border-radius:0!important;vertical-align:middle}.inv-items th:first-child{width:7%;background:var(--brand)}.inv-items th:nth-child(2){width:47%;background:var(--brand);text-align:left;padding-left:15px}.inv-items th:nth-child(3){width:17%}.inv-items th:nth-child(4){width:12%}.inv-items th:nth-child(5){width:17%;text-align:center}.inv-items td{padding:17px 7px;border:0;border-top:4px solid white;vertical-align:middle;font-size:10px;text-align:center;color:#24282d;overflow-wrap:anywhere}.inv-items td:nth-child(2){text-align:left;padding-left:15px}.inv-items td:last-child{font-weight:500;text-align:center}.inv-items td strong{font-size:11px;font-weight:700}.inv-items tbody tr:nth-child(odd){background:#f5f6f7}.inv-items .details{font-size:9px;line-height:1.5;color:#525b66;margin-top:5px}.inv-items .unit-label{display:block;font-size:8px;color:#68717d;margin-top:3px}.inv-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,245px);gap:30px;margin:26px 42px 0;align-items:end}.payment-and-sign{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,110px);gap:18px;align-items:end}.inv-bottom{display:block;border:0;margin:0;padding:0;font-size:11px;color:#303640}.inv-bottom h4,.terms-block h4{color:#82a935;font-size:11px;margin:0 0 7px;font-weight:700}.inv-bottom p{font-size:10px;line-height:1.7}.signature-area{text-align:center;font-size:10px;break-inside:avoid}.signature-image{display:block;width:100%;height:62px;object-fit:contain;margin:0 auto 4px}.signature-space{height:66px}.signature-label{display:block;border-top:1px solid #d7dadf;padding-top:7px;font-weight:600}.inv-totals{display:block;margin:0}.totals-row{padding:5px 4px;font-size:11px;color:#303640;line-height:1.4}.totals-row strong{color:#252a31;font-weight:600}.grand{margin-top:13px;border:0;background:var(--brand);color:#fff;font-size:13px;padding:13px 12px}.grand strong{color:#fff}.balance{margin-top:9px;border-top:1px solid #e9ecef;font-size:11px;padding-top:9px}.rate-note{max-width:none;font-size:9px;line-height:1.6;margin-top:10px}.rate-note b{color:#628a21;font-size:10px}.rate-note strong{color:#293547}.terms-block{margin:36px 42px 32px;font-size:10px;color:#303640;line-height:1.7}.terms-block p{margin:0;white-space:pre-wrap}.invoice-footer{margin-top:auto;background:var(--navy);color:#fff;text-align:left;padding:22px 36px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-size:9px}.footer-contacts{display:flex;gap:17px;flex-wrap:wrap;flex:1}.footer-contact{display:flex;gap:8px;align-items:center;min-width:0;max-width:220px;line-height:1.4;color:#f4f6fa}.footer-icon{flex:none;display:flex;align-items:center;justify-content:center;width:23px;height:23px;background:var(--brand);border-radius:4px;transform:rotate(45deg)}.footer-icon svg{width:13px;height:13px;transform:rotate(-45deg);stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.footer-thanks{font-weight:700;font-size:11px;white-space:nowrap}.fx-credit{margin:0 42px 15px;font-size:9px;color:#68717d}.fx-credit a{color:#68717d}.signature-tools{margin-top:10px}.invoice-footer:empty{display:none}
@media(max-width:1150px) and (min-width:1051px){.app{grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:18px}.inv-top{padding-left:28px;padding-right:28px}.inv-clients{margin-left:28px;margin-right:28px}.table-wrap{padding-left:28px;padding-right:28px}.inv-lower{margin-left:28px;margin-right:28px;gap:18px}.terms-block{margin-left:28px;margin-right:28px}.business-name{font-size:19px}.payment-and-sign{grid-template-columns:1fr}.signature-area{width:115px;margin-top:15px}}
@media(max-width:1050px){.preview-outer{width:min(100%,794px);margin:auto}.invoice{min-height:1030px}}
@media(max-width:580px){.invoice{min-height:880px}.inv-top{padding:25px 20px 20px;min-height:130px;gap:15px}.inv-top:before,.inv-top:after{height:106px}.brand-stripe{height:90px}.business-name{font-size:16px}.brand-tagline{font-size:6px;letter-spacing:.7px}.logo{max-width:115px;max-height:42px}.inv-title h2{font-size:25px;margin-bottom:9px}.inv-top-meta{font-size:8px;line-height:1.65}.inv-top-meta strong{font-size:8px}.inv-top-meta>div{gap:6px}.inv-clients{margin:15px 20px 20px;gap:18px}.inv-clients>div:last-child{padding-left:0}.inv-clients strong{font-size:16px}.company-line{font-size:9px}.table-wrap{padding:0 20px}.inv-items{border-spacing:2px 0;width:calc(100% + 4px);margin:0 -2px}.inv-items th{padding:11px 4px;font-size:8px}.inv-items th:nth-child(2),.inv-items td:nth-child(2){padding-left:8px}.inv-items td{padding:13px 4px;font-size:8px}.inv-items td strong{font-size:9px}.inv-items .details{font-size:8px}.inv-items th:nth-child(2){width:41%}.inv-items th:nth-child(3),.inv-items th:nth-child(5){width:20%}.inv-lower{margin:20px 20px 0;grid-template-columns:minmax(0,1fr) minmax(155px,1fr);gap:16px;align-items:start}.payment-and-sign{grid-template-columns:1fr}.signature-area{width:105px;margin-top:18px}.totals-row{font-size:9px}.grand{font-size:11px;padding:11px 8px}.inv-bottom h4,.terms-block h4{font-size:10px}.inv-bottom p{font-size:9px}.terms-block{margin:25px 20px;font-size:9px}.invoice-footer{padding:18px 20px;font-size:8px;gap:16px}.footer-contacts{gap:13px}.footer-thanks{font-size:10px}.fx-credit{margin-left:20px;margin-right:20px}.brand-panel.has-logo .business-name{font-size:10px}}
@page{size:A4;margin:0}
@media print{.invoice{display:flex!important;min-height:297mm!important;padding:0!important;width:210mm!important;overflow:visible!important}.inv-top{padding:36px 43px 28px}.inv-clients{margin-left:43px;margin-right:43px}.table-wrap{padding-left:43px;padding-right:43px}.inv-lower{margin-left:43px;margin-right:43px;break-inside:avoid}.terms-block{margin-left:43px;margin-right:43px;break-inside:avoid}.invoice-footer{break-inside:avoid}.fx-credit{display:none!important}.inv-items tbody tr{break-inside:avoid}.inv-items thead{display:table-header-group}.invoice .grand{color:#fff!important}.invoice .grand strong{color:#fff!important}}


@media print{
.inv-top{padding:27px 43px 15px;min-height:150px}.inv-title{padding-top:5px}.inv-title h2{font-size:32px;margin-bottom:9px}.inv-top-meta{font-size:9px;line-height:1.6}.inv-top-meta strong{font-size:8px}.invoice-status{margin-top:6px}.inv-clients{margin-top:16px;margin-bottom:24px}.company-line{font-size:10px;line-height:1.55}.inv-items th{padding:12px 7px}.inv-items td{padding:12px 7px}.inv-items .details{line-height:1.4}.inv-lower{margin-top:22px}.terms-block{margin-top:28px;margin-bottom:26px}.invoice-footer{padding-top:19px;padding-bottom:19px}
}
/* Larger company branding, single-line location and editable invoice colors. */
.inv-top{padding-top:22px;padding-bottom:20px;min-height:190px}.inv-top:before,.inv-top:after{height:185px}.brand-stripe{height:158px;background:var(--stripe,#99c94a)}.brand-panel{padding-top:0;max-width:43%;padding-right:0;width:43%;color:var(--navy-ink,#fff)}.logo{display:block;width:235px;height:108px;max-width:100%;max-height:none;object-fit:contain;object-position:left center;margin-bottom:10px}.business-name,.brand-panel.has-logo .business-name{font-size:20px;line-height:1.2;margin-top:6px;color:var(--navy-ink,#fff)}.brand-panel:not(.has-logo){padding-top:26px}.brand-panel:not(.has-logo) .business-name{font-size:24px}.inv-title{padding-top:14px}.inv-items th{color:var(--navy-ink,#fff)}.inv-items th:first-child,.inv-items th:nth-child(2){color:var(--accent-ink,#fff)}.grand,.grand strong{color:var(--accent-ink,#fff)}.invoice-footer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 20px;color:var(--navy-ink,#fff)}.footer-contacts{display:contents}.footer-contact{max-width:none;color:var(--navy-ink,#fff)}#pFooterPhoneWrap{grid-row:1;grid-column:1}#pFooterEmailWrap{grid-row:1;grid-column:2}.footer-thanks{grid-column:3;grid-row:1;color:var(--navy-ink,#fff)}#pFooterAddressWrap{grid-column:1/-1;grid-row:2;width:100%;min-width:0;white-space:nowrap;word-break:normal;overflow-wrap:normal}#pFooterAddress{white-space:nowrap;min-width:0;word-break:normal;overflow-wrap:normal}.footer-icon svg{stroke:var(--accent-ink,#fff)}.small-label,.inv-bottom h4,.terms-block h4,.rate-note b{color:var(--brand)}.phone-field{position:relative}.phone-field>label{display:block;font-size:12px;font-weight:650;color:#475569;margin-bottom:5px}.phone-control{display:flex;align-items:center;width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;min-height:42px;overflow:hidden}.phone-control:focus-within{border-color:#89b637;box-shadow:0 0 0 3px #89b63720}.country-toggle{border:0;border-right:1px solid #e2e8f0;border-radius:0;background:#f8fafc;display:flex;align-items:center;gap:6px;padding:11px 9px;flex:none}.country-toggle img,.country-option img{width:23px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #00000010}.country-chevron{font-size:10px;color:#68717d}.phone-control .dial-code{display:block;font-size:12px;font-weight:500;color:#475569;margin:0;padding:0 7px;flex:none;white-space:nowrap}.phone-control input.phone-number{border:0;border-radius:0;box-shadow:none;padding:9px 5px 9px 0;min-width:0;flex:1;font-size:13px;background:transparent}.country-popover{position:absolute;z-index:30;top:calc(100% + 5px);left:0;width:max(100%,310px);max-width:calc(100vw - 45px);padding:9px;border:1px solid #dbe2e9;border-radius:10px;background:white;box-shadow:0 12px 35px #29354726}.country-popover input{font-size:12px;padding:9px}.country-options{max-height:245px;overflow:auto;margin-top:6px}.country-option{display:flex;align-items:center;gap:9px;width:100%;background:white;border:0;border-radius:5px;padding:10px 7px;text-align:left;font-size:12px;color:#293547}.country-option:hover,.country-option:focus{background:#f1f5f9;outline:none}.country-option[aria-selected=true]{background:#eef6df}.country-option span{flex:1;margin:0;color:inherit;font-size:12px;font-weight:500}.country-option b{font-size:12px;font-weight:500;color:#68717d}.no-countries{font-size:12px;color:#68717d;padding:8px}.color-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.color-controls input[type=color]{width:100%;height:42px;padding:4px;cursor:pointer;border:1px solid #cbd5e1;border-radius:8px}.color-hint{margin:0 0 12px;line-height:1.6}
@media(max-width:580px){.inv-top{padding-top:19px;min-height:161px}.inv-top:before,.inv-top:after{height:153px}.brand-stripe{height:131px}.logo{width:150px;height:83px;margin-bottom:8px}.business-name,.brand-panel.has-logo .business-name{font-size:14px;line-height:1.2}.brand-panel:not(.has-logo) .business-name{font-size:17px}.inv-title{padding-top:7px}.invoice-footer{grid-template-columns:auto minmax(0,1fr);gap:13px 14px}.footer-thanks{grid-column:1/-1;grid-row:3}.footer-contact{font-size:8px}.phone-control .dial-code{padding-left:6px;padding-right:5px}.country-toggle{padding-left:7px;padding-right:7px}.country-toggle img{width:21px}.phone-control input.phone-number{font-size:12px}.row:has(.phone-field){flex-direction:column;gap:0}.country-popover{width:100%}}
@media print{.inv-top{padding-top:20px;min-height:186px;padding-bottom:16px}.inv-top:before,.inv-top:after{height:176px}.brand-stripe{height:151px}.logo{height:102px;width:225px}.brand-panel.has-logo .business-name{font-size:19px}.invoice .grand,.invoice .grand strong{color:var(--accent-ink,#fff)!important}.invoice-footer{grid-template-columns:auto minmax(0,1fr) auto}.footer-thanks{grid-column:3;grid-row:1}.inv-items td{padding-top:10px;padding-bottom:10px}}
@media(max-width:580px){.inv-items td:nth-child(3),.inv-items td:nth-child(5){white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:7px}.totals-row{gap:6px;font-size:8.5px}.totals-row strong{white-space:nowrap;flex-shrink:0;font-size:8.5px}.grand{font-size:9.5px;white-space:nowrap}.grand strong{font-size:9.5px}}


/* One constant-width stripe on the logo panel's sloping right edge. */
.inv-top:after{left:0;width:100%;background:var(--stripe,#99c94a);clip-path:polygon(55% 0,59% 0,47.45% 100%,43.45% 100%);z-index:-1}
.brand-stripe{display:none!important}
/* Phone, email, location, and thanks share a single line at every size. */
.preview-outer,.invoice{min-width:0}
.invoice-footer{--footer-scale:1;width:100%;min-width:0;contain:inline-size;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:calc(12px * var(--footer-scale));font-size:calc(9px * var(--footer-scale));word-break:normal;overflow-wrap:normal}
.footer-contacts{display:contents}
.invoice-footer .footer-contact{display:flex;align-items:center;flex:0 0 auto;gap:calc(8px * var(--footer-scale));font-size:inherit;white-space:nowrap;max-width:none;grid-area:auto;line-height:1.4}
.invoice-footer #pFooterPhoneWrap{order:1}.invoice-footer #pFooterEmailWrap{order:2}
.invoice-footer #pFooterAddressWrap{order:3;flex:1 1 auto;width:auto;min-width:0;grid-area:auto}
.invoice-footer .footer-thanks{order:4;flex:0 0 auto;font-size:calc(11px * var(--footer-scale));grid-area:auto;white-space:nowrap;line-height:1.4}
.invoice-footer #pFooterAddress,.invoice-footer #pFooterEmail,.invoice-footer #pFooterPhone{white-space:nowrap;font-size:inherit}
.invoice-footer .footer-icon{width:calc(23px * var(--footer-scale));height:calc(23px * var(--footer-scale));border-radius:calc(4px * var(--footer-scale))}
.invoice-footer .footer-icon svg{width:calc(13px * var(--footer-scale));height:calc(13px * var(--footer-scale))}


/* Independent editor and invoice scrolling inside the application window. */
html{height:100%}body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.top{flex:0 0 auto}
.app{flex:1 1 auto;min-height:0;width:100%;margin:0 auto;overflow:hidden;align-items:stretch;grid-template-columns:minmax(320px,495px) minmax(0,1fr);gap:12px}
.editor{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
/* Keep the country search within the editor so focusing it cannot pan the form sideways. */
.phone-field .country-popover{left:auto;right:0}
.preview-outer{display:flex;flex-direction:column;position:relative;top:auto;width:100%;height:100%;min-height:0;min-width:0;margin:0}
.preview-label{flex:0 0 auto;margin:0 0 10px}
.preview-scroll{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.editor,.preview-scroll{scrollbar-width:thin;scrollbar-color:#94a3b8 var(--canvas)}
.editor::-webkit-scrollbar,.preview-scroll::-webkit-scrollbar{width:9px;height:9px}
.editor::-webkit-scrollbar-track,.preview-scroll::-webkit-scrollbar-track{background:var(--canvas)}
.editor::-webkit-scrollbar-thumb,.preview-scroll::-webkit-scrollbar-thumb{background:#94a3b8;border:2px solid var(--canvas);border-radius:8px}
.preview-scroll:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}
/* Exactly three footer contacts with matching visible outer margins. */
.invoice-footer{justify-content:space-between}
.invoice-footer #pFooterAddressWrap{flex:0 0 auto;width:auto;min-width:0}
.invoice-footer .footer-icon{margin-left:calc(4.76346px * var(--footer-scale));margin-right:calc(4.76346px * var(--footer-scale))}
@media(max-width:780px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);padding:12px;gap:10px}.editor{padding:15px}.preview-outer{width:100%;height:100%;margin:0}}
@media print{
html,body{height:auto!important;overflow:visible!important;display:block!important}
.app{height:auto!important;min-height:0!important;overflow:visible!important}
.preview-outer,.preview-scroll{position:static!important;display:block!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;scrollbar-gutter:auto!important}
.preview-scroll{outline:0!important}.invoice{overflow:visible!important}
}

/* Static element styling moved out of the HTML. */
.inline-style-1{width:100%}
.inline-style-2{display:inline-block}
.inline-style-3{border:0;margin:0 0 8px;padding:0}