:root{--bg:#f3f6f8;--surface:#fff;--ink:#101828;--muted:#667085;--line:#e4e7ec;--cyan:#06b6d4;--cyan-dark:#0891b2;--cyan-soft:#ecfeff;--danger:#d92d20;--shadow:0 18px 50px #10182814}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--bg);margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}.login-shell{background:#fff;grid-template-columns:minmax(420px,1.1fr) minmax(420px,.9fr);min-height:100vh;display:grid}.login-art{background:linear-gradient(145deg,#062d3b 0%,#07526a 48%,#08a5be 100%);place-items:center;display:grid;position:relative;overflow:hidden}.login-art:after{content:"";opacity:.22;background-image:linear-gradient(#ffffff24 1px,#0000 1px),linear-gradient(90deg,#ffffff24 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom right,#000,#0000 75%);mask-image:linear-gradient(to bottom right,#000,#0000 75%)}.art-orb{filter:blur(4px);background:#67e8f92e;border-radius:999px;position:absolute}.art-orb-one{width:420px;height:420px;top:-160px;right:-100px}.art-orb-two{width:320px;height:320px;bottom:-90px;left:-80px}.invoice-mini{z-index:1;aspect-ratio:1/1.414;background:#fff;border-radius:5px;width:min(64%,500px);padding:11% 9%;position:relative;transform:rotate(-3deg);box-shadow:0 30px 80px #00000045}.invoice-mini-strip{background:#22d3ee;border-radius:5px 5px 0 0;height:6px;position:absolute;top:0;left:0;right:0}.invoice-mini-head{justify-content:space-between;font-size:clamp(14px,2vw,25px);font-weight:800;display:flex}.invoice-mini-head b{letter-spacing:.04em;font-size:.48em}.invoice-mini-lines{background:repeating-linear-gradient(#0000 0 14px,#eef2f6 15px 16px);border-top:2px solid #e4e7ec;border-bottom:2px solid #e4e7ec;width:100%;height:24%;margin-top:16%}.invoice-mini-grid{background:repeating-linear-gradient(#0000 0 18px,#e4e7ec 19px 20px);border-top:3px solid #344054;height:23%;margin-top:12%}.invoice-mini-total{background:repeating-linear-gradient(#0000 0 14px,#e4e7ec 15px 16px);width:43%;height:18%;margin:8% 0 0 auto}.login-panel{place-items:center;padding:48px;display:grid}.login-card{width:min(100%,410px)}.brand-mark{color:#063544;letter-spacing:-.04em;background:#67e8f9;border-radius:14px;place-items:center;width:48px;height:48px;font-weight:900;display:grid;box-shadow:0 10px 25px #06b6d433}.brand-mark.small{border-radius:10px;width:36px;height:36px;font-size:13px}.eyebrow{color:var(--cyan-dark);letter-spacing:.14em;margin:32px 0 8px;font-size:11px;font-weight:800}.login-card h1,.workspace-intro h1{letter-spacing:-.04em;margin:0;font-size:clamp(32px,4vw,46px);line-height:1.08}.login-copy{color:var(--muted);margin:14px 0 32px;line-height:1.6}.login-form{gap:20px;display:grid}label{color:#344054;gap:7px;font-size:13px;font-weight:650;display:grid}label>span{color:#98a2b3;font-weight:400}input,textarea,select{width:100%;color:var(--ink);background:#fff;border:1px solid #d0d5dd;border-radius:9px;outline:none;padding:11px 12px;transition:border-color .18s,box-shadow .18s}input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #06b6d41f}input:disabled{color:#667085;background:#f2f4f7}textarea{resize:vertical;line-height:1.45}.primary-button{color:#052e36;background:#22d3ee;border:0;border-radius:9px;padding:12px 18px;font-weight:800;transition:transform .15s,background .15s;box-shadow:0 6px 18px #06b6d433}.primary-button:hover{background:#67e8f9;transform:translateY(-1px)}.primary-button:disabled{opacity:.55;cursor:wait;transform:none}.primary-button.compact{align-self:center;padding:10px 16px}.secondary-button{color:#344054;background:#fff;border:1px solid #d0d5dd;border-radius:8px;width:fit-content;padding:8px 12px;font-size:12px;font-weight:700}.secondary-button:hover{background:#f9fafb;border-color:#98a2b3}.text-button{color:#475467;background:0 0;border:0;font-weight:650}.form-error,.form-success{border-radius:8px;margin:0;padding:10px 12px;font-size:13px}.form-error{color:#b42318;background:#fef3f2}.form-success{color:#087443;overflow-wrap:anywhere;background:#ecfdf3}.app-shell{min-height:100vh;padding-bottom:80px}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#ffffffeb;justify-content:space-between;align-items:center;height:68px;padding:0 max(24px,50vw - 720px);display:flex;position:sticky;top:0}.topbar-brand,.topbar-actions{align-items:center;gap:12px;display:flex}.topbar-brand>div:last-child{display:grid}.topbar-brand b{font-size:14px}.topbar-brand span{color:var(--muted);font-size:11px}.live-indicator{color:#067647;background:#ecfdf3;border:1px solid #abefc6;border-radius:999px;align-items:center;gap:6px;padding:5px 9px;font-size:11px;font-weight:750;display:flex}.live-indicator i{background:#12b76a;border-radius:50%;width:6px;height:6px}.workspace-intro{justify-content:space-between;align-items:flex-end;gap:24px;max-width:1440px;margin:0 auto;padding:48px 24px 28px;display:flex}.workspace-intro .eyebrow{margin-top:0}.workspace-intro h1{font-size:34px}.workspace-intro>div>p:last-child{color:var(--muted);margin:10px 0 0}.builder-grid{grid-template-columns:minmax(540px,.95fr) minmax(580px,1.05fr);align-items:start;gap:22px;max-width:1440px;margin:0 auto;padding:0 24px;display:grid}.editor-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.editor-heading,.section-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:24px 26px;display:flex}.editor-heading>div,.section-heading>div{align-items:center;gap:12px;display:flex}.editor-heading h2,.section-heading h2{letter-spacing:-.02em;margin:0;font-size:18px}.step-label{color:var(--cyan-dark);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:850}.status-chip{color:#344054;background:#f2f4f7;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:750}fieldset{border:0;border-bottom:1px solid var(--line);gap:16px;margin:0;padding:24px 26px 28px;display:grid}legend{color:var(--ink);margin-bottom:3px;padding:0;font-size:13px;font-weight:800}.field-grid{gap:14px;display:grid}.field-grid.two{grid-template-columns:1fr 1fr}.color-input{cursor:pointer;height:42px;padding:5px}.logo-field{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.logo-field>label{flex:1}.logo-preview{align-items:center;gap:9px;display:flex}.logo-preview img{object-fit:contain;max-width:100px;max-height:40px}.logo-preview button{color:var(--danger);background:0 0;border:0;font-size:11px}.items-editor{gap:12px;display:grid}.item-row{background:#f9fafb;border:1px solid #eaecf0;border-radius:10px;grid-template-columns:minmax(140px,2fr) 65px 100px 78px 32px;align-items:flex-end;gap:8px;padding:13px;display:grid}.item-row label{font-size:11px}.item-row input{padding:8px;font-size:12px}.icon-button{color:#475467;background:#fff;border:0;border-radius:7px;width:32px;height:34px;font-size:20px}.icon-button.danger{color:var(--danger)}.icon-button:disabled{opacity:.28;cursor:default}.save-bar{background:#f9fafb;justify-content:space-between;align-items:center;gap:18px;padding:20px 26px;display:flex}.save-bar>div{gap:3px;display:grid}.save-bar span{color:var(--muted);font-size:11px}.save-bar b{font-size:20px}.preview-column{min-width:0;position:sticky;top:88px}.preview-label{color:#475467;justify-content:space-between;margin:0 2px 10px;font-size:12px;font-weight:750;display:flex}.preview-label em{color:#98a2b3;font-style:normal;font-weight:500}.invoice-preview{--accent:#06b6d4;aspect-ratio:1/1.414;border:1px solid var(--line);color:#111;background:#fff;border-radius:5px;width:100%;padding:7.3% 6.7% 5%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(6px,.58vw,9px);position:relative;overflow:hidden;box-shadow:0 24px 70px #1018281f}.preview-strip{background:var(--accent);height:4px;position:absolute;inset:0 0 auto}.preview-head{justify-content:space-between;align-items:flex-start;display:flex}.preview-head>div{align-items:center;gap:10px;display:flex}.preview-head h3{letter-spacing:-.04em;margin:0;font-size:2.05em}.preview-head span{color:#0aa665;font-weight:750}.preview-head>b{text-transform:uppercase;font-size:1.25em}.preview-head img{object-fit:contain;max-width:18%;max-height:26px}.preview-meta{border-bottom:1px solid #e4e7ec;grid-template-columns:1fr 1.4fr;row-gap:.78em;margin:8.2% 0 5.5%;padding-bottom:5.3%;font-size:1em;display:grid}.preview-meta dt{color:#344054}.preview-meta dd{text-align:right;overflow-wrap:anywhere;margin:0;font-weight:750}.preview-parties{grid-template-columns:1fr 1fr;gap:9%;min-height:14.5%;padding:0 .6%;display:grid}.preview-parties h4{margin:0 0 2.5em;font-size:1em}.preview-parties b{margin-bottom:.85em;display:block}.preview-parties p{white-space:pre-line;color:#344054;margin:0 0 .55em;line-height:1.4}.invoice-preview table{border-collapse:collapse;table-layout:fixed;width:100%;margin-top:5.2%}.invoice-preview th{text-align:left;white-space:nowrap;border-bottom:1px solid #d0d5dd;padding:0 0 .8em}.invoice-preview td{vertical-align:top;overflow-wrap:anywhere;border-bottom:1px solid #eaecf0;padding:.9em 0}.invoice-preview th:first-child,.invoice-preview td:first-child{width:33%}.invoice-preview th:nth-child(2),.invoice-preview td:nth-child(2){text-align:center;width:7%}.invoice-preview th:nth-child(n+3),.invoice-preview td:nth-child(n+3){text-align:right}.preview-totals{width:48%;margin:3.5% 0 0 auto}.preview-totals>div{color:#344054;border-bottom:1px solid #eaecf0;justify-content:space-between;gap:10px;padding:.65em 0;display:flex}.preview-totals .grand-total{color:#111;font-weight:750}.preview-footer{color:#344054;position:absolute;bottom:3.8%;left:6.7%;right:6.7%}.preview-footer>p{max-width:92%;line-height:1.4}.preview-footer>div{border-top:1px solid #d0d5dd;justify-content:space-between;align-items:center;gap:16px;padding-top:2.3%;display:flex}.preview-footer>div b{color:#111;font-size:1.15em}.preview-footer>div span{text-align:right}.published-section{max-width:1440px;margin:28px auto 0;padding:0 24px}.published-section>.section-heading,.invoice-list,.empty-state{border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fff}.published-section>.section-heading{border-top:1px solid var(--line);border-radius:16px 16px 0 0}.section-heading>span{color:var(--muted);font-size:12px}.invoice-list{border-bottom:1px solid var(--line);border-radius:0 0 16px 16px;overflow:hidden}.invoice-list-item{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:22px;padding:17px 24px;display:flex}.invoice-list-item:last-child{border-bottom:0}.invoice-list-main{align-items:center;gap:14px;min-width:0;display:flex}.invoice-list-main>div{gap:4px;display:grid}.invoice-list-main span{color:var(--muted);font-size:12px}.list-status{text-align:center;border-radius:999px;flex:none;min-width:65px;padding:5px 9px;font-weight:800;font-size:10px!important}.list-status.paid{color:#067647;background:#ecfdf3}.list-status.open{color:#175cd3;background:#eff8ff}.list-status.refunded{color:#b54708;background:#fffaeb}.list-status.void{color:#475467;background:#f2f4f7}.invoice-list-actions{align-items:center;gap:13px;display:flex}.invoice-list-actions button,.invoice-list-actions a{color:#475467;background:0 0;border:0;padding:0;font-size:12px;font-weight:700;text-decoration:none}.invoice-list-actions a{color:#0891b2}.invoice-list-actions .delete-link{color:var(--danger)}.empty-state{color:var(--muted);border-bottom:1px solid var(--line);border-radius:0 0 16px 16px;place-items:center;gap:7px;padding:55px;display:grid}.empty-state b{color:#344054}@media (max-width:1100px){.builder-grid{grid-template-columns:1fr}.preview-column{order:-1;position:static}.invoice-preview{max-width:760px;margin:0 auto;font-size:clamp(6px,1.15vw,9px)}}@media (max-width:760px){.login-shell{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:28px}.workspace-intro{align-items:flex-start;padding-top:32px}.workspace-intro h1{font-size:28px}.builder-grid,.published-section{padding-inline:12px}.field-grid.two{grid-template-columns:1fr}.item-row{grid-template-columns:1fr 1fr}.item-description{grid-column:1/-1}.invoice-preview{font-size:clamp(4px,1.15vw,7px)}.invoice-list-item{flex-direction:column;align-items:flex-start}.invoice-list-actions{flex-wrap:wrap}.logo-field{flex-direction:column;align-items:flex-start}}