@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--blue:#b8cbdc;--ink:#1d252b;--paper:#f9f9f5;--line:#bac1c5;--muted:#58656f}*{box-sizing:border-box}body{margin:0;background:var(--blue);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #456c91;outline-offset:2px}.top,.site-footer{display:flex;justify-content:space-between;align-items:center;padding:19px clamp(20px,5vw,80px);border-bottom:1px solid rgba(29,37,43,.3)}.brand{font-weight:700;letter-spacing:-.07em;font-size:23px;text-decoration:none;color:inherit}.brand span{font-size:10px;vertical-align:top;letter-spacing:0}.top-right,.eyebrow,.pill,.small-label,.preview-heading,.preview-note,.site-footer,.privacy,.meta-label,.invoice-table th,.items-head,.form-grid label,.invoice-meta .meta-right,.invoice-bottom,.invoice-footer,.actions,.text-button,.add-button{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.045em}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#446f55;margin-right:8px}.version{margin-left:18px}.shell{max-width:1600px;margin:auto;padding:0 clamp(20px,5vw,80px)}.intro{padding:55px 0 45px}.eyebrow{display:flex;justify-content:space-between;max-width:600px}.eyebrow span{font-size:25px}.intro h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(70px,10.4vw,166px);letter-spacing:-.085em;line-height:.88;margin:26px 0 32px;font-weight:700}.intro h1 em{font-weight:600}.star{font-family:Georgia,serif;font-size:.37em;vertical-align:top;margin-left:30px;letter-spacing:0}.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.intro-bottom p{font-size:clamp(14px,1.5vw,18px);margin:0}.pill{border:1px solid var(--ink);border-radius:99px;padding:10px 15px;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--ink);background:var(--paper);margin-bottom:80px}.editor{padding:clamp(20px,3vw,42px);border-right:1px solid var(--ink)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:28px}.section-head h2{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.05em;font-size:clamp(26px,2.5vw,38px);margin:10px 0 0}.small-label{color:var(--muted)}.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 13px}.form-grid label{display:flex;flex-direction:column;gap:8px;color:var(--muted)}.form-grid .wide{grid-column:1/-1}input,textarea,select{width:100%;min-width:0;border:1px solid #c4c8c7;background:#fff;padding:12px 11px;color:var(--ink);border-radius:0;font-family:'DM Sans',sans-serif;font-size:14px}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#a0a5a6}.rule{height:1px;background:var(--line);margin:34px 0}.compact{margin-bottom:20px}.items-head{display:grid;grid-template-columns:minmax(0,2fr) 55px 85px 90px 25px;gap:7px;color:var(--muted);padding-bottom:10px}.line-item{display:grid;grid-template-columns:minmax(0,2fr) 55px 85px 90px 25px;gap:7px;margin-bottom:8px;align-items:center}.line-item input{padding:10px 7px}.line-item .amount{text-align:right;font-size:12px;overflow-wrap:anywhere}.remove{border:0;background:none;font-size:18px;padding:5px;color:#8e5555}.add-button{width:100%;border:1px dashed #7c8b95;background:#eaf0f3;padding:15px;margin-top:9px;text-align:left}.extras{margin-top:28px}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:27px}.actions button,.import-button{border:1px solid var(--ink);padding:13px 15px;background:transparent;font-size:10px;font-weight:600;cursor:pointer}.actions .primary{background:var(--ink);color:white;flex:1 1 100%;font-size:12px;padding:17px}.privacy{color:#68757d;line-height:1.7;margin-top:18px}.preview-pane{background:#e6edf2;padding:clamp(16px,2.3vw,34px);min-width:0}.preview-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:24px}.invoice{background:white;box-shadow:0 10px 40px #273c4b15;padding:clamp(18px,3vw,45px);min-height:640px;overflow-wrap:anywhere}.invoice-top{display:flex;justify-content:space-between;gap:15px;align-items:start;border-bottom:2px solid var(--ink);padding-bottom:35px}.invoice-logo{font-weight:700;font-size:clamp(15px,2vw,25px);letter-spacing:-.06em;max-width:52%}.invoice-label{font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,3.1vw,46px);letter-spacing:-.05em}.invoice-label span{font-size:.35em;vertical-align:top;margin-left:7px}.invoice-meta{display:flex;justify-content:space-between;gap:15px;padding:28px 0 35px;font-size:11px;line-height:1.7}.meta-label{font-size:9px;color:#6c747a;margin-bottom:9px}.invoice-meta strong{font-size:13px}.invoice-meta .meta-right{min-width:35%}.meta-right>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}.meta-right span{color:#777;font-size:9px}.meta-right strong{font-size:10px;text-align:right}.preserve{white-space:pre-wrap;overflow-wrap:anywhere}.invoice-table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}.invoice-table th{text-align:right;background:#e6edf2;padding:12px 6px;font-size:9px}.invoice-table th:first-child{text-align:left;width:48%}.invoice-table td{text-align:right;padding:14px 6px;border-bottom:1px solid #e5e5e5;vertical-align:top;overflow-wrap:anywhere}.invoice-table td:first-child{text-align:left}.totals{width:60%;margin:25px 0 30px auto;font-size:11px}.totals>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0}.totals .grand{border-top:2px solid var(--ink);margin-top:10px;font-weight:700;font-size:14px}.invoice-bottom{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:45px;font-size:11px;line-height:1.6}.invoice-bottom p{margin:0}.invoice-footer{border-top:1px solid var(--ink);display:flex;justify-content:space-between;gap:15px;margin-top:70px;padding-top:15px;line-height:1.7}.invoice-footer>span{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:20px;white-space:nowrap}.preview-note{text-align:center;margin:18px 0;color:#6d7a85}.site-footer{border-top:1px solid #778b9d;border-bottom:0;gap:15px}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.editor{border-right:0;border-bottom:1px solid var(--ink)}.preview-pane{padding:clamp(18px,5vw,45px)}.invoice{max-width:780px;margin:auto}.invoice-logo{font-size:24px}.invoice-label{font-size:42px}}@media(max-width:600px){.top-right{font-size:8px}.version{display:none}.intro{padding:40px 0 32px}.intro h1{font-size:clamp(62px,15vw,100px)}.star{margin-left:8px}.intro-bottom{align-items:flex-start;flex-direction:column}.form-grid{gap:12px}.items-head,.line-item{grid-template-columns:minmax(0,1.5fr) 42px 65px 63px 18px;gap:4px}.items-head{font-size:8px}.line-item input{font-size:12px;padding:9px 4px}.line-item .amount{font-size:10px}.remove{padding:2px}.invoice{padding:17px;min-height:0}.invoice-meta{font-size:9px}.invoice-meta strong{font-size:11px}.invoice-table{font-size:9px}.invoice-table th{font-size:8px}.invoice-table td{padding:11px 3px}.totals{width:75%}.invoice-bottom{gap:12px;font-size:9px}.invoice-footer>span{font-size:15px}.site-footer{font-size:8px;flex-wrap:wrap}}@page{size:A4;margin:13mm}@media print{html,body{background:white!important;margin:0!important}.top,.intro,.editor,.preview-heading,.preview-note,.site-footer{display:none!important}.shell,.workspace,.preview-pane{display:block!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;background:white!important}.invoice{box-shadow:none!important;padding:0!important;min-height:0!important;max-width:none!important}.invoice-top,.invoice-table,.totals,.invoice-bottom,.invoice-footer{break-inside:avoid}.invoice-table thead{display:table-header-group}.invoice-table tr{break-inside:avoid}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

.invoice-logo img{display:block;max-width:145px;max-height:65px;object-fit:contain;margin-bottom:10px}.invoice-logo img[hidden]{display:none}.form-grid small{font-size:10px;line-height:1.4}.invoice-label{overflow-wrap:anywhere;text-align:right;max-width:55%}

/* Invoice-specific design studio: editor chrome remains MADE U LOOK branded */
.design-help{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 20px}.design-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}.design-presets>span{font-size:10px;font-family:monospace;width:100%;color:var(--muted)}.preset,.reset-design{border:1px solid #9da8b0;background:white;padding:10px 12px;font:11px Arial,sans-serif;cursor:pointer}.reset-design{margin-top:12px}.form-grid input[type=color]{height:43px;padding:5px;cursor:pointer}.invoice{--invoice-heading-font:Georgia;--invoice-body-font:Arial;--invoice-heading-size:42px;--invoice-body-size:11px;--invoice-accent:#b8cbdc;--invoice-ink:#1d252b;--invoice-paper:#ffffff;background:var(--invoice-paper)!important;color:var(--invoice-ink)!important;font-family:var(--invoice-body-font)!important;font-size:var(--invoice-body-size)}.invoice .invoice-label{font-family:var(--invoice-heading-font)!important;font-size:var(--invoice-heading-size)!important}.invoice .invoice-footer>span{font-family:var(--invoice-heading-font)!important}.invoice .invoice-table th{background:var(--invoice-accent)!important;color:var(--invoice-ink)!important}.invoice .invoice-top{border-color:var(--invoice-ink)}.invoice .totals .grand,.invoice .invoice-footer{border-color:var(--invoice-ink)}.invoice[data-header=block] .invoice-top{background:var(--invoice-accent);padding:18px;margin:-18px -18px 20px;border:0}.invoice[data-header=none] .invoice-top{border:0}.invoice .invoice-table,.invoice .invoice-meta,.invoice .totals,.invoice .invoice-bottom,.invoice .invoice-footer{font-size:var(--invoice-body-size)}@media(max-width:600px){.invoice .invoice-label{font-size:clamp(23px,7vw,var(--invoice-heading-size))!important}}

/* Mobile split-screen: keep editor and live invoice visible side by side. */
@media screen and (max-width:1100px){
  .workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .editor{border-right:1px solid var(--ink);border-bottom:0;min-width:0}
  .preview-pane{min-width:0}
}
@media screen and (max-width:600px){
  .shell{padding-left:10px;padding-right:10px}
  .workspace{grid-template-columns:minmax(0,52fr) minmax(0,48fr);align-items:stretch}
  .editor{padding:12px 9px;overflow-wrap:anywhere}
  .editor .section-head{display:block;margin-bottom:15px}
  .editor .section-head h2{font-size:clamp(15px,4vw,21px);line-height:1.1}
  .editor .text-button{margin-top:10px;font-size:9px}
  .editor .form-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .editor .form-grid .wide{grid-column:auto}
  .editor input,.editor select,.editor textarea{font-size:16px;padding:9px 6px;max-width:100%}
  .editor input[type=file]{font-size:10px}
  .editor .items-head,.editor .line-item{grid-template-columns:minmax(0,1.2fr) 26px 39px 42px 14px;gap:2px}
  .editor .line-item input{font-size:11px;padding:7px 2px}
  .editor .line-item .amount{font-size:8px}
  .editor .items-head{font-size:7px;letter-spacing:0}
  .editor .rule{margin:20px 0}
  .preview-pane{padding:10px 5px;position:relative}
  .preview-heading{display:block;font-size:8px;margin-bottom:12px}
  .preview-heading span:last-child{display:none}
  .preview-pane .invoice{width:560px;max-width:none;margin:0;zoom:.265;min-height:640px;padding:30px}
  .preview-pane .invoice .invoice-label{font-size:var(--invoice-heading-size)!important}
  .preview-pane .invoice-logo{font-size:24px}
  .preview-note{font-size:7px;line-height:1.4}
  .invoice-meta,.invoice-table,.invoice-bottom,.invoice-footer{font-size:var(--invoice-body-size)}
}
@media screen and (max-width:360px){.preview-pane .invoice{zoom:.22}}
@media print{.preview-pane .invoice{zoom:1!important;width:auto!important;max-width:none!important}}

/* Compact desktop preview: do not stretch the right pane to editor height. */
@media screen and (min-width:1101px){
  .workspace{align-items:start}
  .preview-pane{align-self:start;position:sticky;top:12px}
  .preview-pane .invoice{min-height:0}
  .preview-pane .invoice-bottom{margin-top:22px}
  .preview-pane .invoice-footer{margin-top:24px}
  .preview-note{display:none}
}

/* Mobile: both halves scroll independently, with the original 2-column layout. */
@media screen and (max-width:600px){
  .workspace{height:72dvh;min-height:420px;max-height:760px;overflow:hidden;align-items:stretch;}
  .workspace>.editor,.workspace>.preview-pane{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .workspace>.editor{border-bottom:0;border-right:1px solid var(--ink);}
  .workspace>.preview-pane{position:relative;top:auto;align-self:stretch;}
}

/* Native browser print: invoice only, centered inside A4 page. */
@media print {
  @page { size: A4 portrait; margin: 15mm; }
  html,body { width:auto!important; min-width:0!important; height:auto!important; overflow:visible!important; margin:0!important; padding:0!important; background:white!important; }
  .top,.intro,.editor,.preview-heading,.preview-note,.site-footer { display:none!important; }
  .shell,.workspace,.preview-pane { display:block!important; position:static!important; width:100%!important; max-width:none!important; min-width:0!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; margin:0!important; padding:0!important; border:0!important; background:white!important; transform:none!important; }
  .preview-pane .invoice, .invoice { display:block!important; position:static!important; width:100%!important; max-width:100%!important; min-width:0!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; zoom:1!important; transform:none!important; box-shadow:none!important; overflow:visible!important; font-size:var(--invoice-body-size)!important; }
  .invoice .invoice-label { font-size:var(--invoice-heading-size)!important; }
  .invoice .invoice-meta { font-size:var(--invoice-body-size)!important; }
  .invoice-table { table-layout:fixed!important; width:100%!important; }
  .invoice-table tr, .invoice-top, .totals, .invoice-bottom, .invoice-footer { break-inside:avoid; page-break-inside:avoid; }
  .invoice-table thead { display:table-header-group; }
  .invoice-footer { margin-top:38px!important; }
  * { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
}

/* MOBILE PRINT ONLY — override narrow screen zoom and split layout.
   Desktop print styling above is intentionally unchanged. */
@media print {
  html.mobile-invoice-print,
  html.mobile-invoice-print body {
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  html.mobile-invoice-print .workspace,
  html.mobile-invoice-print .preview-pane {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  html.mobile-invoice-print .preview-pane .invoice {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    zoom: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.mobile-invoice-print .invoice .invoice-label {
    font-size: var(--invoice-heading-size) !important;
  }
  html.mobile-invoice-print .invoice-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
}

/* MOBILE LIVE PREVIEW: keep full invoice typography and proportions,
   then shrink the complete sheet as one unit. No receipt-style reflow. */
@media screen and (max-width:600px){
 .preview-pane .invoice{width:700px!important;max-width:none!important;min-width:700px!important;zoom:1!important;transform:scale(var(--mobile-sheet-scale,.25))!important;transform-origin:top left!important;margin:0!important;padding:42px!important;box-sizing:border-box!important;min-height:900px!important;overflow-wrap:normal!important;}
 .preview-pane .invoice-meta{font-size:12px!important;gap:45px!important;}
 .preview-pane .invoice-meta .meta-right{min-width:245px!important;flex:0 0 245px!important;}
 .preview-pane .invoice-meta .meta-right>div{gap:16px!important;}
 .preview-pane .invoice-meta .meta-right span{white-space:nowrap!important;font-size:10px!important;}
 .preview-pane .invoice-meta .meta-right strong{white-space:nowrap!important;font-size:11px!important;}
 .preview-pane .invoice-table{font-size:12px!important;}
 .preview-pane .invoice-table th{font-size:10px!important;}
 .preview-pane .invoice-table td{overflow-wrap:normal!important;}
 .preview-pane .invoice-table td:not(:first-child){white-space:nowrap!important;}
 .preview-pane .invoice-bottom,.preview-pane .invoice-footer{font-size:12px!important;}
 .preview-pane .totals{width:60%!important;font-size:12px!important;}
 .preview-pane .totals .grand{font-size:15px!important;}
 .preview-pane .invoice-footer>span{font-size:20px!important;}
 .preview-pane .invoice-label{font-size:var(--invoice-heading-size)!important;}
 .preview-sheet-holder{width:100%;position:relative;overflow:hidden;}
}
@media print{.preview-sheet-holder{width:100%!important;height:auto!important;overflow:visible!important;} .preview-pane .invoice{transform:none!important;zoom:1!important;}}

/* Mobile-only preview zoom, without changing desktop or print export */
.zoom-invoice{display:none;border:1px solid currentColor;background:transparent;color:inherit;padding:7px 9px;font:inherit;letter-spacing:.03em;cursor:pointer}
@media screen and (max-width:600px){
 .preview-heading{display:flex!important;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap}
 .zoom-invoice{display:inline-block;font-size:9px}
 .preview-note{font-size:9px!important;line-height:1.6!important;text-align:center;padding:8px 3px;font-weight:600;letter-spacing:.02em}
 body.invoice-zoom-open{overflow:hidden!important}
 body.invoice-zoom-open .preview-pane{position:fixed!important;inset:0!important;z-index:99999!important;width:100vw!important;height:100dvh!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain;background:#e6edf2!important;padding:16px!important;box-sizing:border-box!important;border:0!important}
 body.invoice-zoom-open .preview-heading{position:sticky;top:-16px;z-index:2;background:#e6edf2;padding:12px 0;margin:0 0 12px!important;font-size:12px!important}
 body.invoice-zoom-open .zoom-invoice{font-size:12px;padding:10px 14px;background:white}
 body.invoice-zoom-open .preview-sheet-holder{overflow:visible!important}
 body.invoice-zoom-open .preview-note{font-size:12px!important;margin:16px 0 28px}
}
@media print{.zoom-invoice{display:none!important}body.invoice-zoom-open .preview-pane{position:static!important;inset:auto!important;width:100%!important;height:auto!important;overflow:visible!important;padding:0!important}}

/* Mobile-only notice location; no changes to editor, preview, or print output. */
.mobile-notices{display:none}
@media screen and (max-width:600px){
  .mobile-notices{display:block;margin:0 0 18px;padding:0 8px;color:#58656f}
  .mobile-notices .privacy{margin:0;font-size:10px;line-height:1.55;letter-spacing:.02em}
  .mobile-notices #status{margin:8px 0 0;font-size:12px;line-height:1.45}
  .mobile-notices #status:empty{display:none}
}
@media print{.mobile-notices{display:none!important}}

/* PRINT FOOTER CLEANUP — only print-related CSS changed.
   Zero page margins suppress browser header/footer in supporting browsers.
   Keep the invoice's original 15 mm breathing room inside the page. */
@page { size: A4 portrait; margin: 0; }
@media print {
  .preview-pane .invoice, .invoice {
    box-sizing: border-box !important;
    padding: 15mm !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}