:root{--navy:#172437;--navy2:#25354a;--gold:#d9b572;--ink:#233247;--muted:#7b8797;--border:#e7eaf0;--canvas:#f6f8fb;--white:#fff;--blue:#366bcd;--ring:rgba(78,115,187,.13);--shadow:0 14px 36px rgba(29,46,76,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}input,textarea,select{color:var(--ink)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b5caf6;outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.app-shell{max-width:1620px;margin:0 auto;min-height:100vh}.topbar{height:87px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4.1vw,72px);border-bottom:1px solid #30405a}.brand{display:flex;align-items:center;gap:15px;color:white}.brand-mark{position:relative;width:48px;height:48px;border:1.4px solid var(--gold);border-radius:12px;display:grid;place-items:center;font-weight:900;font-family:Georgia,serif;font-size:19px;letter-spacing:-1px;color:#f8e6c0}.brand-mark i{position:absolute;width:8px;height:8px;border-right:1px solid var(--gold);border-top:1px solid var(--gold);transform:rotate(45deg);top:4px;right:4px}.brand-type{display:flex;flex-direction:column;gap:5px}.brand-type strong{font-family:Georgia,serif;font-size:21px;letter-spacing:.1px;font-weight:700}.brand-type span{font-size:9px;letter-spacing:2.3px;font-weight:700;color:#b5c1ce}.topbar-right{display:flex;align-items:center;gap:22px}.offline-pill{font-size:10px;letter-spacing:1.2px;font-weight:750;color:#c8d7d1;white-space:nowrap}.pulse{display:inline-block;width:7px;height:7px;background:#65be9c;border-radius:100%;margin-right:5px;box-shadow:0 0 0 3px rgba(101,190,156,.13)}.btn{border-radius:10px;border:1px solid transparent;padding:12px 18px;line-height:1.1;display:inline-flex;gap:7px;align-items:center;justify-content:center;font-weight:750;white-space:nowrap;transition:transform .15s,background .2s,border .2s}.btn:active{transform:translateY(1px)}.btn-white{background:white;color:var(--navy)}.btn-primary{background:var(--navy);color:white;border-color:var(--navy)}.btn-primary:hover,.btn-dark:hover{background:#354660}.btn-outline{background:#fff;border-color:#dce2ea;color:#34465e}.btn-outline:hover{border-color:#9baec7;background:#fcfdff}.btn-small{font-size:12px;padding:10px 14px}.btn-dark{background:var(--navy);color:#fff}.btn-gold{background:#d4ad65;color:#172437}.btn-gold:hover{background:#c79d4f}.navtabs{display:flex;gap:32px;height:60px;padding:0 clamp(22px,4.1vw,72px);background:#fff;border-bottom:1px solid var(--border)}.navtab{border:0;background:transparent;color:#7b8796;font-weight:750;padding:0 4px;position:relative;display:flex;align-items:center;gap:9px;font-size:13px}.navtab:hover{color:var(--navy)}.navtab.is-active{color:var(--navy)}.navtab.is-active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold);border-radius:3px 3px 0 0}.navicon{font-size:20px;font-weight:500}.count-chip{background:#edf0f5;color:#6c798b;border-radius:20px;font-size:10px;padding:3px 7px;margin-left:2px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:42px clamp(22px,4.1vw,72px) 29px}.eyebrow{color:#9a7a41;font-size:10px;font-weight:850;letter-spacing:1.8px}.spark{font-size:15px;margin-right:4px}.page-heading h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,2.6vw,38px);letter-spacing:-1.1px;margin:10px 0 8px;font-weight:700;line-height:1.18}.dot{color:var(--gold)}.page-heading p{color:var(--muted);font-size:13px;margin:0}.heading-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.91fr);align-items:start;gap:24px;padding:0 clamp(22px,4.1vw,72px) 32px}.editor-column{min-width:0;display:flex;flex-direction:column;gap:18px}.panel{border:1px solid var(--border);background:white;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.panel-heading{padding:20px 23px;display:flex;gap:13px;align-items:center;border-bottom:1px solid #edf0f4}.panel-heading .step{background:#f3eee5;color:#a78547;border-radius:9px;min-width:34px;height:34px;display:grid;place-items:center;font-family:Georgia,serif;font-weight:bold;font-size:15px}.panel-heading h2{font-family:Georgia,serif;color:#26344a;font-size:18px;font-weight:700;line-height:1.15;margin:0 0 5px}.panel-heading p{font-size:11px;color:#8b96a5;margin:0;line-height:1.3}.autosave-label{font-size:10px;color:#84a49a;font-weight:700;white-space:nowrap;margin-left:auto}.form-pad{padding:23px}.form-grid{display:grid;gap:17px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid label{font-size:11px;color:#506178;font-weight:800;letter-spacing:.1px;display:flex;flex-direction:column;gap:8px}.span-two{grid-column:span 2}.required{color:#cf5d5d}.optional{color:#9ca6b3;font-weight:500;margin-left:5px}.form-grid input,.form-grid select,.form-grid textarea,.history-tools input{background:#fbfcfd;border:1px solid #e1e6ee;border-radius:8px;padding:12px 12px;min-height:42px;width:100%;font-size:12px;line-height:1.3;outline:none;transition:border .15s,box-shadow .15s}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.history-tools input:focus,.item-row input:focus,.item-row select:focus{border-color:#99aed7;box-shadow:0 0 0 3px var(--ring);background:white}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#b3bcc8}.form-grid textarea{resize:vertical;min-height:70px}.items-heading{gap:12px}.items-heading .btn{margin-left:auto}.item-column-head{display:grid;grid-template-columns:minmax(125px,2.25fr) minmax(55px,.6fr) minmax(62px,.7fr) minmax(72px,.9fr) minmax(80px,.9fr) 25px;gap:9px;padding:15px 20px 10px;color:#8e9aa8;font-size:9px;letter-spacing:.55px;font-weight:850;border-bottom:1px solid #edf0f4}.item-row{display:grid;grid-template-columns:minmax(125px,2.25fr) minmax(55px,.6fr) minmax(62px,.7fr) minmax(72px,.9fr) minmax(80px,.9fr) 25px;gap:9px;align-items:center;padding:10px 20px;border-bottom:1px solid #f0f2f6}.item-row input,.item-row select{border:1px solid #e3e8ef;background:#fcfdfe;border-radius:7px;padding:10px 8px;height:38px;min-width:0;width:100%;font-size:11px;outline:none}.item-row input[type=number]{text-align:center}.item-row .line-amount{text-align:right;font-size:12px;font-weight:750;color:#34455b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-row .remove-item{border:0;color:#b7a3a0;background:transparent;font-size:20px;line-height:1;padding:3px}.item-row .remove-item:hover{color:#d85d5d}.items-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 23px 19px}.items-footer span:last-child{color:#a6aeb8;font-size:10px}.add-line{background:transparent;border:0;padding:4px 0;color:#40659a;font-size:12px;font-weight:800}.add-line span{font-size:19px;vertical-align:-1px;margin-right:3px}.total-strip{margin-top:22px;border-radius:10px;padding:17px 21px;display:flex;align-items:center;gap:25px;background:#f6f8fb;border:1px solid #e9edf3}.total-strip div{display:flex;flex:1;flex-direction:column;gap:6px}.total-strip span:not(.total-divider){font-size:10px;color:#8190a2;font-weight:700}.total-strip strong{font-family:Georgia,serif;font-size:21px;color:#1f3046}.total-strip div:last-child strong{color:#a77932}.total-divider{height:37px;width:1px;background:#dbe1e8}.validation-msg{padding:10px 12px;border-radius:8px;margin-top:12px;font-size:12px;background:#fff0ee;color:#ab3934;border:1px solid #f4c9c3}.editor-bottom-actions{display:flex;gap:9px;flex-wrap:wrap}.btn-save{min-width:175px}.safety-note{color:#99a4b2;font-size:11px;line-height:1.5;margin:-5px 0 15px}.preview-column{min-width:0;position:sticky;top:20px}.preview-topline{display:flex;justify-content:space-between;align-items:center;margin:2px 0 17px}.preview-topline h2{font-family:Georgia,serif;font-size:21px;margin:5px 0 0;letter-spacing:-.3px}.live-badge{font-size:10px;color:#62a38f;font-weight:850}.preview-switch{background:#eaeef4;border:1px solid #e3e8ee;display:flex;padding:5px;border-radius:10px;margin-bottom:17px}.preview-choice{background:transparent;border:0;flex:1;color:#8390a0;font-size:12px;font-weight:800;padding:11px 8px;border-radius:7px}.preview-choice.is-selected{background:#fff;color:#203247;box-shadow:0 2px 7px rgba(40,60,90,.08)}.preview-stage{border:1px solid #e4e8ee;border-radius:13px;background:radial-gradient(circle at 2px 2px,#e5e8ec 1px,transparent 1px) 0 0/17px 17px,#eff2f6;min-height:585px;padding:28px 24px 30px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;max-height:890px}.preview-paper{background:#fff;box-shadow:0 12px 40px rgba(41,53,70,.13);width:100%;max-width:510px;min-height:610px;transition:all .2s}.preview-stage.is-thermal{min-height:580px}.preview-stage.is-thermal .preview-paper{width:252px;max-width:100%;min-height:0}.preview-actions{display:flex;gap:9px;margin-top:16px}.preview-actions .btn{flex:1;font-size:12px;padding:15px 12px}.print-hint{margin:12px 2px;color:#97a2b0;font-size:11px;line-height:1.5;text-align:center}.app-footer{margin-top:20px;padding:24px clamp(22px,4.1vw,72px) 27px;border-top:1px solid #e5eaf0;color:#98a4b2;font-size:10px;display:flex;gap:20px;justify-content:space-between}.secondary-page{padding:0 clamp(22px,4.1vw,72px) 32px}.history-panel{min-height:330px}.space-between{justify-content:space-between}.history-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 23px;background:#fcfdfe;border-bottom:1px solid #eef1f4}.history-tools input{max-width:420px;background:white}.history-tools span{font-size:11px;color:#8492a2;white-space:nowrap}.history-table{width:100%;border-collapse:collapse;min-width:620px}.history-table th{font-size:10px;text-align:left;letter-spacing:.55px;color:#9aa6b4;background:#f9fbfd;padding:15px 23px}.history-table td{font-size:12px;padding:18px 23px;border-top:1px solid #eef1f5}.history-table td strong{display:block;color:#2b3d53;font-size:12px}.history-table td small{color:#99a4b3;display:block;margin-top:4px}.history-table .due{font-weight:bold;color:#a97736}.history-table .actions{display:flex;gap:6px;flex-wrap:wrap}.history-table .actions button{font-size:11px;padding:7px 8px;border:1px solid #e1e5eb;background:white;border-radius:6px;color:#4b607b}.history-table .actions .delete{color:#c2675d}.history-scroll{overflow-x:auto}.empty-state{text-align:center;padding:72px 24px;color:#8895a5}.empty-state .empty-icon{display:block;font-size:36px;color:#b6c1cd;margin-bottom:10px}.empty-state h3{color:#3c4c61;font-family:Georgia,serif;font-size:20px}.settings-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);gap:22px}.side-settings{display:flex;flex-direction:column;gap:19px}.info-card{padding:24px}.info-card h3{font-family:Georgia,serif;font-size:20px;margin:0 0 12px}.info-card p,.info-card li{color:#748294;font-size:12px;line-height:1.7}.info-card ol{padding-left:19px}.info-card li{margin-bottom:7px}.info-card .full{width:100%;margin-top:8px}.info-card .micro{font-size:10px;color:#a3acb7;margin-bottom:0}.settings-actions{display:flex;align-items:center;gap:15px;margin-top:22px}.settings-status{font-size:12px;color:#4e9c7c}.toast{position:fixed;bottom:26px;right:26px;z-index:1000;border-radius:10px;background:#1e2f43;color:#fff;padding:14px 19px;font-size:12px;box-shadow:0 12px 30px #1e2f4340;transform:translateY(30px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(380px,calc(100vw - 40px))}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#9e423b}
/* Invoice preview: uses the same fields as the real print templates */
.invoice-a4{font-family:Arial,sans-serif;color:#283445;font-size:10px;padding:38px 38px 33px;background:#fff;min-height:610px}.inv-top-rule{height:5px;background:linear-gradient(to right,#16273c 72%,#cb9f56 72%);margin:-38px -38px 26px}.inv-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.inv-brand h2{font-family:Georgia,serif;font-size:23px;line-height:1.05;letter-spacing:-.5px;margin:0;color:#16283e}.inv-brand small{display:block;color:#ac8649;font-size:8px;font-weight:800;letter-spacing:1.7px;margin:8px 0 0}.inv-brand p{white-space:pre-line;color:#8190a0;font-size:9px;line-height:1.6;margin:12px 0 0}.inv-invoice-title{text-align:right}.inv-invoice-title h3{font-family:Georgia,serif;font-size:22px;letter-spacing:1.3px;font-weight:400;margin:0;color:#29384b}.inv-invoice-title p{line-height:1.8;font-size:9px;color:#778595;margin:7px 0}.inv-invoice-title strong{color:#263649}.inv-line{height:1px;background:#d8dee5;margin:22px 0 20px}.inv-info{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}.inv-info h4{font-size:8px;letter-spacing:1.3px;color:#ab8754;margin:0 0 9px}.inv-info strong{font-size:12px;display:block;margin-bottom:5px;color:#253348}.inv-info p{white-space:pre-line;font-size:9px;line-height:1.7;margin:0;color:#738193}.inv-info .inv-right{text-align:right}.inv-table{width:100%;border-collapse:collapse;table-layout:fixed}.inv-table th{background:#1c2e44;color:white;text-align:left;padding:11px 9px;font-size:8px;letter-spacing:.4px}.inv-table th:first-child{width:45%}.inv-table th:nth-child(2){width:12%}.inv-table th:nth-child(3){width:13%}.inv-table th:nth-child(4){width:15%}.inv-table th:last-child{width:15%;text-align:right}.inv-table td{padding:12px 9px;font-size:9px;line-height:1.5;border-bottom:1px solid #e6e9ed;overflow-wrap:anywhere}.inv-table td:last-child{text-align:right;font-weight:700}.inv-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-top:19px}.inv-note{font-size:9px;color:#798694;line-height:1.7;flex:1;max-width:49%;overflow-wrap:anywhere}.inv-note strong{display:block;color:#293a4c;font-size:10px;margin-bottom:7px}.inv-summary{min-width:43%}.inv-sum-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 0;color:#788696;font-size:9px}.inv-sum-row b{color:#253448}.inv-sum-grand{border-top:2px solid #1c2e44;border-bottom:1px solid #d9dee5;margin-top:5px;padding:12px 0;font-size:12px;font-weight:bold;color:#233449}.inv-sum-grand b{font-size:14px}.inv-sum-due{background:#f5efe4;border-radius:5px;padding:11px;margin-top:8px;color:#937036;font-weight:750;font-size:11px}.inv-sum-due b{color:#714e1b;font-size:12px}.inv-footer{margin-top:45px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.inv-thanks{color:#69798b;font-size:9px;max-width:60%;line-height:1.6}.inv-sign{text-align:center;color:#7f8a99;font-size:9px;min-width:120px;border-top:1px solid #bdc6d0;padding-top:10px}.inv-endline{height:4px;background:#1c2e44;margin-top:25px}.invoice-thermal{width:100%;padding:21px 14px 19px;background:#fff;font-family:Arial,sans-serif;color:#111;font-size:10px;line-height:1.45;overflow-wrap:anywhere}.thermal-brand{text-align:center}.thermal-brand h2{font-weight:900;font-size:16px;line-height:1.1;margin:0 0 6px}.thermal-brand p{margin:2px 0;font-size:8.5px;line-height:1.4}.thermal-title{text-align:center;font-weight:bold;letter-spacing:1.5px;margin:12px 0 10px;font-size:11px}.thermal-sep{border-top:1px dashed #111;margin:10px 0}.thermal-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:9px}.thermal-meta span:nth-child(even){text-align:right;overflow-wrap:anywhere}.thermal-row{margin:10px 0;font-size:9px}.thermal-row .name{font-weight:700;font-size:10px;margin-bottom:4px;overflow-wrap:anywhere}.thermal-row .detail{display:flex;justify-content:space-between;gap:5px}.thermal-price-line{display:flex;justify-content:space-between;gap:6px;margin:5px 0;font-size:9px}.thermal-price-line.grand{font-weight:900;font-size:12px;margin:10px 0}.thermal-price-line.due{font-weight:900;font-size:11px}.thermal-note{text-align:center;font-size:9px;line-height:1.5;overflow-wrap:anywhere}.thermal-bottom{text-align:center;font-size:8px;padding-top:3px}
@media(max-width:1240px){.workspace{grid-template-columns:minmax(0,1fr) minmax(330px,.85fr);gap:18px}.form-pad{padding:18px}.item-row,.item-column-head{gap:5px;padding-left:12px;padding-right:12px;grid-template-columns:minmax(105px,2fr) 44px 53px 58px 66px 19px}.item-row input,.item-row select{padding:7px 5px}.item-row .line-amount{font-size:10px}.preview-stage{padding:20px 15px}.invoice-a4{padding:29px 25px;font-size:9px}.inv-top-rule{margin:-29px -25px 24px}.inv-brand h2{font-size:19px}}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.preview-column{position:static}.preview-stage{max-height:700px}.preview-paper{max-width:560px}.settings-layout{grid-template-columns:1fr}.side-settings{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:650px){.topbar{height:77px;padding:0 17px}.brand{gap:10px}.brand-mark{width:40px;height:40px;font-size:16px}.brand-type strong{font-size:17px}.brand-type span{font-size:8px;letter-spacing:1.3px}.topbar-right{gap:8px}.topbar .offline-pill{display:none}.top-new{padding:10px 10px;font-size:11px}.navtabs{padding:0 12px;gap:0;height:53px;justify-content:space-between}.navtab{font-size:10px;padding:0 6px;gap:4px}.navicon{font-size:15px}.page-heading{padding:25px 16px 23px;align-items:flex-start;flex-direction:column}.page-heading h1{font-size:30px}.heading-actions{width:100%}.heading-actions .btn{flex:1}.workspace{padding:0 13px 24px;gap:28px}.secondary-page{padding:0 13px 24px}.panel-heading{padding:17px 13px}.panel-heading h2{font-size:17px}.panel-heading p{font-size:10px}.form-pad{padding:15px}.form-grid{gap:13px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid label{font-size:10px}.form-grid input,.form-grid select,.form-grid textarea{padding:10px 8px;font-size:11px}.item-column-head{display:none}.item-row{grid-template-columns:minmax(0,1fr) 58px 65px 24px;gap:8px;padding:13px}.item-row .item-name{grid-column:1 / span 4}.item-row .item-qty{grid-column:1}.item-row .item-unit{grid-column:2}.item-row .item-rate{grid-column:3}.item-row .line-amount{grid-column:1 / span 3;text-align:left;grid-row:3;font-size:12px}.item-row .remove-item{grid-column:4;grid-row:2;justify-self:end}.item-row input{height:35px}.items-footer{padding:12px 14px}.total-strip{padding:14px;gap:12px}.total-strip strong{font-size:19px}.editor-bottom-actions .btn{flex:1;font-size:11px;padding:13px 8px}.editor-bottom-actions .btn-save{flex-basis:100%}.preview-topline{padding:0 5px}.preview-stage{padding:19px 12px}.preview-actions .btn{padding:13px 6px;font-size:11px}.app-footer{padding:23px 17px;display:block;line-height:1.9}.app-footer span{display:block}.history-tools{padding:16px;display:block}.history-tools input{max-width:none}.history-tools span{display:block;margin-top:10px}.settings-layout .side-settings{display:flex}.settings-actions{display:block}.settings-status{display:block;margin-top:12px}}
@media(max-width:390px){.brand-type span{display:none}.brand-type strong{font-size:15px}.page-heading h1{font-size:27px}.form-grid.two{grid-template-columns:1fr}.span-two{grid-column:span 1}.item-row{grid-template-columns:minmax(0,1fr) 55px 60px 22px}.preview-stage{padding:12px 7px}.invoice-a4{padding:23px 15px}.inv-top-rule{margin:-23px -15px 20px}.inv-brand h2{font-size:17px}.inv-invoice-title h3{font-size:18px}}
/* Keep the active page exclusive even where author styles specify display. */
[hidden]{display:none!important}
/* Labels stay on one text line; their controls are beneath the label. */
.form-grid label{display:block}
.form-grid label input,.form-grid label select,.form-grid label textarea{display:block;margin-top:8px}

/* ---------------------------------------------------------
   Version 2: customizable color-header A4 invoice.
   Only the business letterhead is colorful; ALL billing body
   text is pure black to improve ordinary black-and-white prints.
   --------------------------------------------------------- */
.gst-switch-label,.color-header-option{display:block!important}
.gst-inline{display:flex;align-items:center;gap:9px;min-height:38px;margin-top:8px;padding:9px 10px;border:1px solid #e0e5ed;border-radius:8px;background:#fff;font-size:11px;color:#243548;font-weight:700}
.gst-inline input[type=checkbox]{margin:0;display:inline-block;width:17px;height:17px;flex:none;accent-color:#2e6952}
.form-grid input:disabled{background:#eef1f5;color:#909baa;cursor:not-allowed}
.sd-bill-a4{font-family:Arial,Helvetica,sans-serif!important;background:#fff;color:#000!important;font-size:10px;line-height:1.45;padding:22px 24px 26px!important;min-height:650px;overflow-wrap:anywhere}
.sd-bill-a4 *{box-sizing:border-box}
.bill-letterhead{width:100%;text-align:center}
.bill-name-banner{margin:0 0 7px;border-top:5px solid #ff963f;border-bottom:5px solid #ff963f;background:linear-gradient(to bottom,#fff3e2 0%,#fff 20%,#fff 79%,#ffecd6 100%);padding:7px 8px 4px}
.bill-name-banner h2{font-family:Georgia,'Times New Roman',serif;font-size:24px;letter-spacing:-1.1px;font-weight:900;color:#2b8c43;line-height:1.07;margin:0;text-transform:uppercase;white-space:normal}
.bill-proprietor{font-family:Georgia,'Times New Roman',serif;color:#257bcc;font-size:14px;font-weight:750;line-height:1.3;margin-top:5px}
.bill-business-line{font-family:Georgia,'Times New Roman',serif;color:#277dcc;font-size:11px;font-weight:750;line-height:1.3;margin:7px 0 0;white-space:normal}
.bill-flag-rule{margin:11px 0 7px;display:flex;flex-direction:column;gap:3px}
.bill-flag-rule span{height:3px;display:block;background:#f07c34}
.bill-flag-rule span:nth-child(2){height:2px;background:#fff;border:1px solid #dedede}
.bill-flag-rule span:nth-child(3){background:#2a9955}
.bill-identity{display:flex;justify-content:space-between;gap:10px;text-align:left;color:#000!important;font-size:10px;min-height:23px;align-items:flex-start}
.bill-identity>div:last-child{text-align:right}
.bill-identity,.bill-identity *{color:#000!important}
.bill-body,.bill-body *{color:#000!important}
.bill-body{padding-top:4px}
.bill-document-title{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:31px;border-top:1.2px solid #000;border-bottom:1.2px solid #000;margin:5px 0 12px;font-size:15px;font-weight:900;letter-spacing:1.2px}
.bill-document-title em{font-size:8px;letter-spacing:.2px;font-weight:700;font-style:normal;border:1px solid #000;padding:2px 5px}
.bill-meta-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #000;border-bottom:0}
.bill-meta-grid>div{padding:8px 10px;display:flex;justify-content:space-between;gap:6px}
.bill-meta-grid>div:first-child{border-right:1px solid #000}
.bill-meta-grid span{font-size:9px;font-weight:700}
.bill-meta-grid strong{font-size:10px}
.bill-info-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #000;min-height:105px}
.bill-info-grid>div{min-width:0;padding:10px 11px}
.bill-info-grid>div:first-child{border-right:1px solid #000}
.bill-section-label{font-weight:900;letter-spacing:.55px;font-size:9px;text-decoration:underline;text-underline-offset:3px;margin-bottom:7px}
.bill-info-grid p{margin:3px 0;font-size:10px;line-height:1.4}
.bill-info-grid p b{font-size:11px}
.bill-table-wrap{margin:12px 0 12px;overflow:visible}
.bill-items-table{width:100%;border:1px solid #000;table-layout:fixed;border-collapse:collapse;font-size:10px}
.bill-items-table thead th{background:#fff!important;color:#000!important;font-weight:900;border:1px solid #000;padding:8px 5px;text-align:left;font-size:9px}
.bill-items-table thead th:nth-child(1){width:7%}
.bill-items-table thead th:nth-child(2){width:39%}
.bill-items-table thead th:nth-child(3){width:10%;text-align:center}
.bill-items-table thead th:nth-child(4){width:10%;text-align:center}
.bill-items-table thead th:nth-child(5){width:16%;text-align:right}
.bill-items-table thead th:nth-child(6){width:18%;text-align:right}
.bill-items-table td{border:1px solid #000;padding:8px 5px;font-size:10px;line-height:1.35;vertical-align:top;word-break:break-word}
.bill-items-table .bill-r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:9px}
.bill-items-table .bill-c{text-align:center}
.bill-settlement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0, .93fr);gap:14px;margin:4px 0 10px;align-items:start}
.bill-notes{padding:8px 2px 0 0;min-width:0;font-size:9.5px;white-space:normal}
.bill-notes p{font-size:9.5px;white-space:pre-wrap;margin:4px 0}
.bill-notes .bill-words{font-size:10px;font-weight:750;line-height:1.55}
.bill-pay-head{margin-top:20px}
.bill-totals{border:1px solid #000;padding:4px 9px}
.bill-total-line{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:9px;padding:6px 0;border-bottom:1px dotted #777}
.bill-total-line span{max-width:55%}
.bill-total-line strong{text-align:right;font-size:10px;white-space:nowrap}
.bill-total-line:last-child{border-bottom:0}
.bill-total-line.bill-grand{font-size:11px;font-weight:900;border-top:2px solid #000;border-bottom:2px solid #000;margin-top:4px;padding:9px 0}
.bill-total-line.bill-grand strong{font-size:12px}
.bill-total-line.bill-due{font-size:11px;font-weight:900;border:2px solid #000;padding:7px 5px;margin:6px -4px 4px}
.bill-total-line.bill-due strong{font-size:12px}
.bill-closing{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:23px;min-height:108px}
.bill-terms{font-size:9px;line-height:1.65}
.bill-terms b{font-size:9px;text-decoration:underline}
.bill-terms p{margin:6px 0;white-space:pre-wrap}
.bill-signature{display:flex;flex-direction:column;align-items:flex-end;text-align:right;justify-content:flex-end;min-width:0;font-size:9px}
.bill-sign-space{height:48px;width:132px;border-bottom:1px solid #000;margin-bottom:6px}
.bill-signature b{font-size:10px}
.bill-signature span{display:block;margin-top:2px;font-size:9px}
.bill-thanks{border-top:1px solid #000;text-align:center;font-weight:700;font-size:10px;margin-top:19px;padding-top:9px}
.monochrome-head .bill-name-banner{background:#fff!important;border-top-color:#000;border-bottom-color:#000}
.monochrome-head .bill-name-banner h2,.monochrome-head .bill-proprietor,.monochrome-head .bill-business-line{color:#000!important}
.monochrome-head .bill-flag-rule span{background:#000!important}
@media(max-width:390px){.sd-bill-a4{padding:15px 12px 20px!important}.bill-name-banner h2{font-size:20px}.bill-business-line{font-size:9px}}
@media print{
  .sd-bill-a4{background:#fff!important;color:#000!important;padding:0!important;margin:0!important;min-height:0!important;max-width:none!important;box-shadow:none!important;font-size:11px!important;overflow:visible!important}
  .bill-name-banner{margin-top:0;padding:9px 4px 5px}
  .bill-name-banner h2{font-size:36px!important}
  .bill-proprietor{font-size:19px!important}
  .bill-business-line{font-size:15px!important}
  .bill-identity{font-size:12px!important}
  .bill-document-title{font-size:17px!important;margin:10px 0 13px}
  .bill-info-grid p{font-size:11px!important}
  .bill-items-table td{font-size:10px!important;padding:9px 6px}
  .bill-items-table th{font-size:10px!important}
  .bill-items-table tr{break-inside:avoid}
  .bill-closing,.bill-settlement,.bill-document-title{break-inside:avoid}
  .bill-body,.bill-body *,.bill-identity,.bill-identity *{color:#000!important}
  .bill-items-table th{background:#fff!important;color:#000!important}
  .bill-thanks{margin-top:20px}
}

/* V3: customer-facing WhatsApp actions and at-a-glance collections view */
.btn-whatsapp{background:#16854c;border-color:#16854c;color:#fff}
.btn-whatsapp:hover{background:#0c713e}
.form-helper{font-size:10px;font-weight:500;color:#7e8998;line-height:1.45;letter-spacing:0}
.share-tip{margin:-8px 0 10px;color:#64758a;background:#edf8f0;border:1px solid #cfead8;border-radius:9px;font-size:11px;padding:12px 13px;line-height:1.6}
.history-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:17px 23px;background:#fff;border-bottom:1px solid #eef1f4}
.history-overview div{border:1px solid #e4e9ed;background:#fafcfd;border-radius:10px;padding:13px 15px;min-width:0}
.history-overview span{display:block;color:#7b8695;font-weight:750;font-size:10px;margin-bottom:7px}
.history-overview strong{display:block;color:#1e3146;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.history-overview div:nth-child(3) strong{color:#a06b24}
.history-tools select{background:#fff;border:1px solid #dce2ea;border-radius:8px;color:#2c415a;font-size:12px;min-height:42px;padding:8px 10px;max-width:180px}
.actions button.wa-action{background:#e7f7ed;color:#107c44;border-color:#c5e4d1}
.actions button.reminder-action{background:#fff6e8;color:#986026;border-color:#ecd8b7}
@media(max-width:800px){.history-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.history-tools{flex-wrap:wrap}.history-tools input{max-width:none;flex:1 1 100%}}
@media(max-width:430px){.history-overview{gap:7px;padding:12px}.history-overview div{padding:10px}.history-overview strong{font-size:15px}.history-tools select{width:100%;max-width:100%}.share-tip{margin-top:-9px}}

/* V4: offline UPI, customer accounts & payment receipts */
.actions button.record-action{background:#eaf2ff;color:#2859a4;border-color:#cbdcf4}
.bill-qr-block{display:flex;align-items:center;justify-content:center;gap:16px;max-width:340px;border:1px solid #000;padding:9px;margin:11px 0 0;background:#fff;color:#000!important;break-inside:avoid;page-break-inside:avoid}
.bill-qr-block>div{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:190px}
.bill-qr-block strong{font-size:10px;color:#000!important}
.bill-qr-block small{font-size:8.5px;overflow-wrap:anywhere;color:#000!important}
.upi-qr-image{display:block;background:#fff;image-rendering:pixelated;flex-shrink:0;max-width:100%;height:auto}
.thermal-qr-block{margin:9px auto 0;padding:3px;max-width:100%;gap:5px;flex-direction:column;text-align:center;border:1px dashed #000;font-size:8px}
.thermal-qr-block>div{max-width:100%;gap:3px}
.thermal-qr-block strong{font-size:9px}
.thermal-qr-block small{font-size:7.5px}
.thermal-qr-block .upi-qr-image{width:105px;height:105px}
.sd-dialog{max-width:min(96vw,530px);width:100%;border:0;border-radius:16px;padding:0;box-shadow:0 22px 80px #0005;background:#fff;color:#172437}
.sd-dialog::backdrop{background:rgba(17,31,48,.62)}
.sd-dialog-card{padding:23px;display:block}
.dialog-head{display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid #e6eaf0;padding-bottom:15px;margin-bottom:20px}
.dialog-head h2{font-size:20px;margin:5px 0 0;color:#182d42}
.dialog-close{background:#f1f4f8;border:0;border-radius:50%;height:36px;width:36px;font-size:23px;cursor:pointer;color:#25354e}
.dialog-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #dce4ee;border-radius:10px;background:#f4f9ff;margin-bottom:17px;overflow-wrap:anywhere}
.dialog-summary b{font-size:12px}.dialog-summary span{font-size:12px}
.dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.sd-dialog .form-grid{margin:0}.sd-dialog .form-grid label{font-size:11px;font-weight:800;color:#43556c}.sd-dialog .form-grid input,.sd-dialog .form-grid select{min-width:0;width:100%;margin-top:7px;background:#fff;border:1px solid #dae2ec;border-radius:8px;padding:10px;color:#20324c}
.sd-dialog .micro{font-size:11px;line-height:1.65;color:#526379}
.qr-card{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;background:#fff;padding:18px;border:1px solid #e1e5eb;border-radius:10px}
.qr-card .upi-qr-image{width:220px;height:220px}
.qr-card strong{font-size:24px;margin-top:7px;color:#152c44}
.qr-card span{font-size:13px;font-weight:700}.qr-card small{font-size:11px;color:#68778a}
.receipt-list{margin-top:11px;border:1px solid #e2e7ef;border-radius:8px;overflow:hidden;max-width:430px}
.receipt-list summary{padding:7px 9px;cursor:pointer;background:#f2f5fa;color:#20334a;font-weight:700;font-size:11px}
.receipt-line{padding:9px;display:flex;gap:7px;flex-direction:column;border-top:1px solid #e4eaf3;font-size:10px;white-space:normal}
.receipt-line>span:last-child{display:flex;gap:5px;flex-wrap:wrap}
.receipt-line button{border:1px solid #d9e2ed;border-radius:4px;background:#fff;color:#2b4c65;font-size:10px;cursor:pointer;padding:5px}
.receipt-line button.danger{color:#a32928;background:#fff0ef;border-color:#f4c7c7}
.customer-card{border-bottom:1px solid #e6ebf1;background:#fff}
.customer-card>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:17px 23px;list-style:none}
.customer-card>summary::before{content:'▸';font-size:16px;color:#6c829b}
.customer-card[open]>summary::before{content:'▾'}
.customer-card>summary span:first-child{margin-right:auto;display:flex;flex-direction:column;gap:5px}
.customer-card>summary b{font-size:14px}.customer-card>summary small{font-size:10px;color:#637993}
.ledger-amounts{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:11px;color:#293d53}
.customer-card .history-scroll{padding:0 14px 12px}
.ledger-receipts{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#4b5d72}
.ledger-receipts span{background:#f1f7fc;padding:6px;border-radius:5px}
.payment-receipt{font-family:Arial,Helvetica,sans-serif!important;color:#000!important;background:#fff!important;box-shadow:none!important}
.payment-receipt *{box-sizing:border-box;color:#000!important}
.receipt-a4{width:100%;max-width:720px;margin:20px auto;padding:35px 46px;border:1px solid #222;font-size:12px}
.receipt-thermal{width:52mm;max-width:52mm;margin:0 auto;padding:3mm 0;font-size:10px;overflow-wrap:anywhere}
.receipt-head{text-align:center;border-bottom:2px solid #000;padding-bottom:13px}
.receipt-head h2{font-size:23px;font-family:Georgia,serif;line-height:1.1;margin:0}
.receipt-head p{font-size:10px;line-height:1.4;margin:8px 0 0}
.receipt-title{text-align:center;font-size:18px;font-weight:900;margin:18px 0 6px;letter-spacing:1px}
.receipt-subtitle{text-align:center;font-size:10px;color:#000;margin:0 0 22px}
.receipt-field{display:flex;justify-content:space-between;align-items:start;gap:14px;border-bottom:1px dotted #777;padding:11px 0;font-size:12px;overflow-wrap:anywhere}
.receipt-field span{flex:0 0 45%}.receipt-field strong{flex:1;text-align:right}
.receipt-money{margin:20px 0;padding:20px 14px;border:2px solid #000;text-align:center;display:flex;flex-direction:column;gap:8px}
.receipt-money span{font-size:11px;font-weight:bold;letter-spacing:1px}.receipt-money strong{font-size:26px}.receipt-money small{font-size:10px}
.receipt-sign{margin-top:60px;text-align:right;display:flex;flex-direction:column;gap:10px;font-size:11px}
.receipt-sign b{text-decoration:overline}
.payment-receipt footer{border-top:1px solid #000;margin-top:28px;padding-top:11px;text-align:center;font-size:9px}
.receipt-void{color:#000!important;border:3px double #000;padding:10px;font-size:12px;font-weight:900;text-align:center}
.receipt-thermal .receipt-head{padding-bottom:6px}.receipt-thermal .receipt-head h2{font-family:Arial,sans-serif;font-size:15px}
.receipt-thermal .receipt-head p{font-size:8px;margin-top:3px}
.receipt-thermal .receipt-title{font-size:12px;letter-spacing:0;margin:9px 0 3px}
.receipt-thermal .receipt-subtitle{font-size:8px;margin-bottom:12px}
.receipt-thermal .receipt-field{font-size:9px;padding:7px 0;gap:5px}
.receipt-thermal .receipt-money{margin:9px 0;padding:10px 4px;gap:5px}
.receipt-thermal .receipt-money strong{font-size:18px}.receipt-thermal .receipt-money small{font-size:8px}
.receipt-thermal .receipt-sign{margin-top:35px;font-size:9px}.receipt-thermal footer{font-size:8px}
@media(max-width:570px){.sd-dialog-card{padding:17px}.customer-card>summary{padding:14px 11px}.customer-card .history-scroll{padding:0 5px 10px}.ledger-amounts b{font-size:10px}.receipt-a4{padding:18px 14px}.receipt-head h2{font-size:19px}.receipt-field{font-size:11px}}
@media print{.bill-qr-block{color:#000!important;break-inside:avoid}.payment-receipt{border:0!important;min-height:0!important}.payment-receipt *{color:#000!important}}

.ledger-toolbar{padding:8px 22px 12px;border-top:1px solid #edf0f3}

/* V5 brand/profile settings and optional signature */
:root{--theme-accent:#d0a456}
.topbar{border-bottom:2px solid var(--theme-accent)}
.brand-mark{display:grid;place-items:center;overflow:hidden;background:#172437;border:1px solid #d6b568;border-radius:14px}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.business-switch{display:flex;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:700}
.business-switch select{min-width:155px;background:#fff;color:#172437;border:1px solid #c6b18c;border-radius:9px;padding:9px 10px;font:inherit;max-width:200px}
.brand-customizer{border:1px solid #d8dde6;background:#f9fafc;padding:16px;border-radius:12px;margin-top:8px}
.brand-customizer h3{margin:0 0 7px;font-size:16px;color:#1b2a3b}.brand-customizer .micro{margin:4px 0 14px}
.brand-customizer label{display:block;margin:12px 0}
.brand-customizer input[type=file]{display:block;width:100%;margin-top:7px}
.image-upload-actions,.signature-review{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:11px 0}
#businessLogoPreview{max-width:180px;max-height:80px;object-fit:contain;background:#fff;border:1px solid #ddd;padding:5px}
#businessSignaturePreview{max-width:190px;max-height:74px;object-fit:contain;background:#fff;border:1px solid #ddd;padding:6px}
.signature-mode-panel{border:1px solid #ccd4dd;background:#fff;padding:11px;border-radius:9px;margin:10px 0}
#signatureCanvas{background:#fff;border:1px dashed #858c9b;border-radius:8px;width:100%;max-width:640px;height:auto;touch-action:none;display:block}
.bill-business-logo{display:block;max-height:47px;max-width:148px;object-fit:contain;margin:0 auto 5px}
.thermal-business-logo{display:block;max-height:42px;max-width:128px;object-fit:contain;margin:0 auto 5px}
.bill-sign-image{width:128px;height:48px;object-fit:contain;display:block;margin-bottom:4px}
.bill-signature{justify-content:flex-end}.bill-signature b{border-top:1px solid #000;padding-top:5px}
.receipt-sign .bill-signature{margin-left:auto}
@media(max-width:780px){.topbar-right{flex-wrap:wrap;justify-content:flex-end}.business-switch{width:100%;justify-content:flex-end}.business-switch select{max-width:220px}}
@media print{.bill-signature{break-inside:avoid}.bill-business-logo{max-height:47px;max-width:160px}}

.bill-closing:not(:has(.bill-signature)){display:block;min-height:0}

@media (max-width:650px){
  .topbar{height:auto;min-height:84px;display:flex;flex-wrap:wrap;gap:12px;padding:12px 16px}
  .topbar-right{width:100%;gap:8px;justify-content:space-between;flex-wrap:wrap}
  .business-switch{width:auto;justify-content:flex-start}
  .business-switch select{min-width:130px;max-width:160px;padding:8px 7px;font-size:11px}
  .top-new{margin-left:auto}
}


/* V5.1 compact A4/QR bill layout. QR shares its row with terms/signature. */
.bill-payment-footer{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.18fr);gap:12px;align-items:start;margin-top:9px}
.bill-payment-footer>.bill-qr-block{width:100%;max-width:none;margin:0;padding:7px;justify-content:space-between;gap:7px;min-width:0}
.bill-payment-footer>.bill-qr-block>div{min-width:0;max-width:170px;gap:3px}
.bill-payment-footer>.bill-qr-block .upi-qr-image{width:96px;height:96px;flex:0 0 96px}
.bill-payment-footer>.bill-closing{min-width:0;margin-top:0;min-height:100px;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bill-payment-footer>.bill-closing:not(:has(.bill-signature)){min-height:0;display:block}
.bill-payment-footer .bill-terms{overflow-wrap:anywhere}
.bill-payment-footer .bill-terms p{margin-top:4px}
@media (max-width:480px){
  .bill-payment-footer{grid-template-columns:1fr;gap:10px}
  .bill-payment-footer>.bill-qr-block{max-width:100%}
}
@media print{
  .sd-bill-a4 .bill-name-banner{margin-bottom:3px;padding:5px 4px 3px}
  .sd-bill-a4 .bill-name-banner h2{font-size:29px!important;line-height:1.08}
  .sd-bill-a4 .bill-proprietor{font-size:15px!important;margin-top:3px;line-height:1.2}
  .sd-bill-a4 .bill-business-line{font-size:12px!important;margin-top:4px;line-height:1.2}
  .sd-bill-a4 .bill-flag-rule{margin:5px 0 4px;gap:2px}
  .sd-bill-a4 .bill-identity{min-height:17px;font-size:9px!important}
  .sd-bill-a4 .bill-document-title{margin:4px 0 7px;min-height:25px;font-size:14px!important}
  .sd-bill-a4 .bill-meta-grid>div{padding:5px 7px}
  .sd-bill-a4 .bill-info-grid{min-height:0}
  .sd-bill-a4 .bill-info-grid>div{padding:7px 9px}
  .sd-bill-a4 .bill-section-label{margin-bottom:4px}
  .sd-bill-a4 .bill-table-wrap{margin:7px 0}
  .sd-bill-a4 .bill-items-table thead th{padding:5px 4px;font-size:9px!important}
  .sd-bill-a4 .bill-items-table td{padding:5px 4px;font-size:10px!important;line-height:1.25}
  .sd-bill-a4 .bill-settlement{gap:10px;margin:1px 0 5px}
  .sd-bill-a4 .bill-notes{padding-top:3px;font-size:9px}
  .sd-bill-a4 .bill-pay-head{margin-top:8px}
  .sd-bill-a4 .bill-total-line{padding:4px 0}
  .sd-bill-a4 .bill-total-line.bill-grand{margin-top:2px;padding:5px 0}
  .sd-bill-a4 .bill-total-line.bill-due{margin-top:3px;padding:5px 4px}
  .sd-bill-a4 .bill-payment-footer{grid-template-columns:minmax(0,.98fr) minmax(0,1.18fr);gap:9px;margin-top:6px;break-inside:avoid;page-break-inside:avoid}
  .sd-bill-a4 .bill-payment-footer>.bill-qr-block{gap:5px;padding:5px;min-height:81px}
  .sd-bill-a4 .bill-payment-footer>.bill-qr-block .upi-qr-image{width:78px;height:78px;flex-basis:78px}
  .sd-bill-a4 .bill-payment-footer .bill-closing{margin-top:0;min-height:85px;gap:6px}
  .sd-bill-a4 .bill-payment-footer .bill-sign-image{width:110px;height:40px}
  .sd-bill-a4 .bill-closing{margin-top:10px;min-height:65px}
  .sd-bill-a4 .bill-thanks{margin-top:7px;padding-top:6px;font-size:9px}
  .sd-bill-a4 .bill-terms{font-size:9px;line-height:1.4}
  .sd-bill-a4 .bill-terms p{margin:3px 0}
  .sd-bill-a4 .bill-signature b{font-size:8.5px}
}