:root{--ink:#101827;--cyan:#23c7f3;--border:#dae3ec;--muted:#627184;--bg:#f3f6fa;--white:#fff;--max:1180px}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#fff;color:var(--ink);line-height:1.55}.wrap{max-width:var(--max);padding:0 23px;margin:auto}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.upload:focus-within{outline:3px solid #23c7f3;outline-offset:2px}.site-header{border-bottom:1px solid #e6ecf2}.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:800;letter-spacing:-.8px;display:flex;align-items:center;gap:11px}.brand-icon{background:#101827;width:38px;height:38px;padding:7px;border-radius:10px;display:flex}.brand-icon svg{width:100%}.brand-accent{color:#0a9fc7}.header-note{color:#647489;font-size:13px}.eyebrow{margin-top:35px;color:#2e6780;font-size:11px;font-weight:800;letter-spacing:1.65px}.eyebrow-dot{display:inline-block;background:#23c7f3;border-radius:99px;width:5px;height:5px;vertical-align:middle;margin:0 9px}h1{font-size:clamp(31px,4.2vw,46px);line-height:1.15;margin:10px 0 10px;letter-spacing:-1.7px}h2{font-size:20px;letter-spacing:-.45px;margin:0}.lead{color:var(--muted);font-size:16px;max-width:770px;margin:0 0 30px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start;margin-bottom:55px}.editor{border:1px solid var(--border);border-radius:16px;padding:26px;background:#fff;box-shadow:0 8px 30px #15284609}.editor-top,.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.clear-link{border:0;background:none;color:#1b7b99;font-size:13px;font-weight:700}.group{border:0;border-top:1px solid #e7edf3;margin:15px 0 0;padding:18px 0 4px;min-width:0}.group legend{font-weight:750;font-size:14px;float:left;width:100%;margin:0 0 15px}.group legend:after{content:"";display:block;clear:both}.number{background:#e6f9ff;color:#087a9a;border-radius:6px;padding:5px 8px;margin-right:7px;font-weight:800;font-size:12px}.fields{display:grid;gap:12px;margin-bottom:12px}.fields.two{grid-template-columns:1fr 1fr}.group label:not(.upload){display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#344054;margin-bottom:12px}input:not([type=file]),textarea,select{width:100%;min-width:0;border:1px solid #ced8e4;border-radius:8px;padding:10px 11px;background:#fff;color:#162435;font-size:14px;outline:0}input:focus,textarea:focus,select:focus{border-color:#0c9fc6;box-shadow:0 0 0 3px #23c7f329}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9aa6b4}.logo-row{display:flex;gap:14px;align-items:center;margin-bottom:18px}.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed #b9c9d8;border-radius:12px;min-height:112px;width:66%;padding:14px;background:#fafdff;cursor:pointer;text-align:center}.upload svg{width:24px;height:24px;fill:none;stroke:#1980a1;stroke-width:1.8}.upload strong{font-size:13px}.upload small{font-size:10px;color:#788596;font-weight:500}.logo-preview{font-size:12px;color:#788596;display:flex;align-items:center;justify-content:center;flex:1;min-height:82px}.logo-preview img{max-width:100%;max-height:83px;object-fit:contain}.line-row{display:grid;grid-template-columns:minmax(0,1.9fr) .55fr .9fr 31px;gap:8px;align-items:end;padding-bottom:13px}.line-row label{margin:0!important}.line-row .remove{height:41px;width:31px;border:1px solid #e3e6ed;color:#8c4951;background:#fff;border-radius:8px;font-size:20px}.add-row{border:1px solid #b9dcea;background:#f2fbff;color:#117b9a;border-radius:8px;padding:9px 13px;font-size:13px;font-weight:750}.extra{margin-top:21px}.hint{font-size:12px;color:var(--muted);margin:0}.notice{font-size:13px;color:#147b91;min-height:18px}.preview-column{position:sticky;top:16px}.private{color:#4c7381;font-size:11px}.private-dot{display:inline-block;width:6px;height:6px;background:#14a66b;border-radius:50%;margin-right:4px}.invoice-paper{min-height:580px;background:white;box-shadow:0 10px 40px #121c3220;border:1px solid #dfe6ee;padding:34px 29px 20px;border-radius:4px;font-size:12px;overflow-wrap:anywhere}.invoice-head{display:flex;justify-content:space-between;align-items:start;gap:12px}.sender{display:flex;flex-direction:column;max-width:62%;gap:2px;color:#516176;font-size:11px}.sender>strong{font-size:17px;color:#101827;line-height:1.3}.view-logo{min-height:0}.view-logo img{max-height:48px;max-width:165px;object-fit:contain;display:block;margin-bottom:11px}.invoice-title{text-align:right;display:flex;flex-direction:column;gap:5px}.invoice-title strong{font-size:25px;letter-spacing:1px;color:#101827}.invoice-title span{color:#596a7d}.bill-meta{border-top:3px solid #23c7f3;margin:27px 0 24px;padding-top:17px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.bill-meta>div:first-child{display:flex;flex-direction:column;gap:2px}.mini-heading{font-size:10px;color:#687a8e;letter-spacing:1px;font-weight:800}.bill-meta strong{font-size:13px}.multi{white-space:pre-line;color:#5d697b}.dates{margin-left:auto;display:flex;flex-direction:column;gap:6px;font-size:11px;min-width:135px}.dates>span{display:flex;justify-content:space-between;gap:18px}.dates b{color:#677589}.item-table{width:100%;border-collapse:collapse;margin-top:18px;table-layout:fixed}.item-table thead{background:#101827;color:white}.item-table th{font-size:10px;padding:10px 8px;text-align:right}.item-table th:first-child{text-align:left;width:45%}.item-table td{font-size:11px;border-bottom:1px solid #e9eef4;padding:13px 8px;text-align:right;overflow-wrap:anywhere}.item-table td:first-child{text-align:left}.totals{max-width:235px;margin:18px 0 25px auto;font-size:11px}.totals>div{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px}.totals .grand{font-weight:800;border-top:2px solid #101827;padding-top:13px;margin-top:12px;font-size:15px}.invoice-notes{display:grid;gap:12px;white-space:pre-wrap;font-size:11px;color:#536174;margin-top:15px}.invoice-notes strong{color:#101827}.invoice-notes p{margin:3px 0 0;overflow-wrap:anywhere}.paper-footer{display:flex;justify-content:space-between;color:#8996a6;font-size:9px;border-top:1px solid #e6edf4;margin-top:42px;padding-top:14px}.btn{border-radius:9px;padding:14px 18px;font-weight:750;font-size:14px;border:0}.primary{color:#fff;background:#101827}.primary:hover{background:#23374f}.btn svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.8}.download{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px}.small-foot{text-align:center;color:#7e8998;font-size:11px;margin:11px 0}.mobile-actions{display:none}.below{max-width:920px;margin:55px auto 80px}.below h2{margin:35px 0 15px;font-size:24px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.steps>div{padding:20px;border:1px solid var(--border);border-radius:13px}.steps b{color:#158aaa}.steps h3{font-size:15px;margin:8px 0}.steps p,.below details p{color:#687789;font-size:13px}.below details{border-bottom:1px solid #e3eaf1;padding:13px 0}.below summary{cursor:pointer;font-weight:700;font-size:14px}.disclaimer{font-size:12px;color:#738197;margin-top:24px}.site-footer{border-top:1px solid #e6edf3;color:#738197}.footer-inner{display:flex;justify-content:space-between;gap:15px;padding-top:20px;padding-bottom:25px;font-size:12px}@media(max-width:850px){.workspace{grid-template-columns:1fr}.preview-column{position:static}.invoice-paper{max-width:640px;margin:auto}.header-note{display:none}.mobile-actions{display:block}.mobile-actions .btn{width:100%}}@media(max-width:540px){.wrap{padding:0 15px}.editor{padding:18px}.fields.two{grid-template-columns:1fr}.line-row{grid-template-columns:minmax(0,1.6fr) .55fr .75fr 27px;gap:5px}.line-row input{padding:9px 6px;font-size:12px}.line-row .remove{width:27px}.invoice-paper{padding:22px 16px;font-size:10px}.invoice-title strong{font-size:19px}.sender>strong{font-size:14px}.steps{grid-template-columns:1fr}.bill-meta{grid-template-columns:1fr 1fr}.paper-footer{font-size:8px}}

/* Layout hardening: independent grid sizing and non-overlapping narrow-screen form */
.workspace > *, .fields > *, .invoice-head > *, .bill-meta > * {min-width:0}
.invoice-paper {overflow-wrap:break-word;word-break:normal}
.item-table th:nth-child(2),.item-table td:nth-child(2){width:12%}
.item-table th:nth-child(3),.item-table td:nth-child(3){width:21%}
.item-table th:nth-child(4),.item-table td:nth-child(4){width:22%}
.item-table td {vertical-align:top;word-break:break-word}
.totals > div > :last-child{min-width:0;text-align:right;overflow-wrap:anywhere}
@media(max-width:600px){
 .logo-row{align-items:stretch;flex-direction:column}
 .upload{width:100%;min-height:90px}
 .logo-preview{min-height:40px}
 .line-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 35px;gap:10px;padding:12px 0;border-bottom:1px solid #e6edf3}
 .line-row label:first-child{grid-column:1 / -1}
 .line-row label:nth-child(2){grid-column:1}
 .line-row label:nth-child(3){grid-column:2}
 .line-row .remove{grid-column:3;grid-row:2;width:35px}
 .line-row input{width:100%;padding:11px;font-size:14px}
 .invoice-paper{padding:21px 13px}
 .bill-meta{grid-template-columns:1fr;gap:15px}
 .dates{margin-left:0;max-width:240px}
 .invoice-head{gap:8px}
 .invoice-title strong{font-size:16px}
 .sender>strong{font-size:13px}
 .item-table th,.item-table td{padding:8px 4px;font-size:9px}
 .totals{max-width:100%}
 .paper-footer{gap:12px;flex-wrap:wrap}
}

/* V3: repaired form layout — do not use floated legends or intrinsic-width tracks */
.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.editor,.preview-column,.group,.group>*{min-width:0;max-width:100%}
.group{display:block;border:0;border-top:1px solid #e7edf3;margin:18px 0 0;padding:20px 0 2px}
.group-title{display:flex;align-items:center;gap:8px;font-weight:750;font-size:14px;margin:0 0 18px;min-width:0}
.group-title .number{flex:none}
.group label:not(.upload){min-width:0;max-width:100%;overflow-wrap:normal}
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
.logo-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:center;width:100%;min-width:0;margin-bottom:18px}
.upload{width:100%;min-width:0;min-height:105px;overflow-wrap:normal;padding:16px}
.upload strong,.upload small{display:block;max-width:100%;white-space:normal;overflow-wrap:break-word}
.logo-preview{min-width:0;width:100%;text-align:center;overflow:hidden}
.editor input,.editor textarea,.editor select{max-width:100%}
.line-row{grid-template-columns:minmax(0,2fr) minmax(58px,.55fr) minmax(75px,.95fr) 34px;min-width:0}
.line-row>*{min-width:0}
.line-row .remove{width:34px}
@media(max-width:1180px){.workspace{gap:18px}.editor{padding:21px}.logo-row{grid-template-columns:minmax(0,1fr)}.logo-preview:has(img){min-height:70px}}
@media(max-width:980px){.workspace{grid-template-columns:minmax(0,1fr)}.preview-column{position:static}.editor{padding:26px}.logo-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.invoice-paper{max-width:720px;margin:auto}.mobile-actions{display:block}.mobile-actions .btn{width:100%}}
@media(max-width:620px){.fields.two{grid-template-columns:minmax(0,1fr)}.logo-row{grid-template-columns:minmax(0,1fr)}.editor{padding:18px}.line-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;gap:10px;padding:13px 0;border-bottom:1px solid #e6edf3}.line-row label:first-child{grid-column:1/-1}.line-row label:nth-child(2){grid-column:1}.line-row label:nth-child(3){grid-column:2}.line-row .remove{grid-column:3;grid-row:2;width:34px}.line-row input{font-size:14px;padding:10px}.logo-preview{min-height:36px}}