/* the document tool: editor + live A4 sheet + print */
.tool{padding-top:8px;padding-bottom:20px}
.tool-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:8px 0 12px}
.tool-top .row{display:flex;flex-wrap:wrap;gap:8px}
#tool-status{font-size:.9rem;color:var(--soft)}
.tabs{display:none}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
.pv-col{position:sticky;top:76px}
.pv{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.pv-scale{width:794px;transform-origin:0 0}
/* thermal roll preview: the narrow receipt sits in the middle of the preview panel, not against its left edge */
.pv-scale:has(>#sheet>.sh.th){width:max-content;margin-inline:auto}

/* skeleton until the tool is ready */
.tool:not(.live) #ed{opacity:.0}
.tool:not(.live) .skel{display:block}
.skel{display:none;position:absolute;inset:0;padding:16px}
.skel div{height:46px;margin:0 0 12px}
.ed-col{position:relative;min-height:400px}
.tool.live #ed{opacity:1;transition:opacity .3s}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 14px;margin:0 0 12px;box-shadow:var(--shadow);min-width:0}
.card legend{font-family:var(--font-head);font-weight:800;font-size:1rem;padding:0 6px}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.f.wide{grid-column:1/-1}
.f label,.f .lbl{font-size:.85rem;font-weight:600;color:var(--soft)}
.f .chk{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:.92rem;min-height:44px}
.hint{color:var(--soft);font-size:.78rem}
.err{color:var(--bad);font-size:.82rem;font-weight:600}
details.more{margin-top:10px}
details.more summary{cursor:pointer;font-weight:600;color:var(--link);min-height:36px;display:flex;align-items:center}
details.more .fg{margin-top:8px}
.items{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.it{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface2)}
.it-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;color:var(--soft)}
.it-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.it-grid .it-d{grid-column:1/-1}
.it-grid input{padding:8px 9px}
.sums{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.92rem;color:var(--soft)}
.sums b{color:var(--ink);margin-left:auto;font-family:var(--font-head);font-size:1.05rem}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.sw[aria-checked=true]{box-shadow:0 0 0 3px var(--focus)}
.actions{display:none;flex-wrap:wrap;gap:8px;margin:12px 0}
@media (max-width:960px){.actions{display:flex}.tool-top .top-do{display:none}}
.actions .btn{flex:1 1 auto}
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;background:#FEE2E2;color:#991B1B}
.pill.ok{background:#DCFCE7;color:#166534}
.hist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.hist li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.hist .row{display:flex;flex-wrap:wrap;gap:6px}
.hist .empty{color:var(--soft)}

@media (max-width:960px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .pv-col{position:static}
  .tabs{display:flex;gap:6px;position:sticky;top:60px;z-index:15;background:var(--bg);padding:8px 0}
  .tabs button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 .95rem var(--font)}
  .tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .tool[data-tab=edit] .pv-col{display:none}
  .tool[data-tab=preview] .ed-col{display:none}
  .actions{position:sticky;bottom:0;background:var(--bg);padding:8px 0 10px;margin:0;z-index:15;border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .fg{grid-template-columns:1fr}
  .it-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .actions{flex-wrap:nowrap;gap:6px}
  .actions .btn{flex:1 1 0;padding:8px 6px;min-width:0;white-space:nowrap}
}

/* ---------- the A4 sheet (always light, like paper) ---------- */
.sh{--ac:#0B3B5B;width:794px;min-height:1123px;background:#fff;color:#111827;padding:40px 44px 32px;font:12.5px/1.45 var(--font),'Noto Sans Devanagari','Noto Sans Gurmukhi',sans-serif;position:relative;color-scheme:light}
.sh h1,.sh .dt,.sh h2,.sh h4{font-family:var(--font-head),'Noto Sans Devanagari','Noto Sans Gurmukhi',sans-serif;margin:0;color:#111827}
.sh .mono{font-family:var(--mono);font-size:.95em}
.sh .ph{color:#9CA3AF;font-style:italic}
/* the prompts are for the screen only: never printed */
@media print{.sh p.ph{display:none}.sh .ph{visibility:hidden}}
.sh-top{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--ac);padding-bottom:14px}
.sh-from{display:flex;gap:14px;min-width:0}
.sh-from .logo{max-width:110px;max-height:80px;object-fit:contain}
.sh-from h2{font-size:20px;color:var(--ac)}
.sh-from p{margin:2px 0;color:#374151}
.sh-title{text-align:right;flex:none}
.sh-title .dt{font-weight:800;font-size:19px;letter-spacing:.04em;color:var(--ac)}
.sh-title .copy{margin:4px 0 0;font-size:11px;color:#6B7280}
.meta{width:100%;border-collapse:collapse;margin:14px 0}
.meta th,.meta td{border:1px solid #E5E7EB;padding:5px 8px;text-align:left}
.meta th{background:#F9FAFB;color:#4B5563;font-weight:600;width:18%}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.pt{border:1px solid #E5E7EB;border-radius:6px;padding:8px 10px}
.pt h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ac);margin-bottom:3px}
.pt p{margin:1px 0;color:#374151}
.lines{width:100%;border-collapse:collapse}
.lines th{background:var(--ac);color:#fff;font-weight:600;padding:6px;text-align:center;font-size:11.5px}
.lines td{border-bottom:1px solid #E5E7EB;padding:6px;text-align:center;vertical-align:top}
.lines .l{text-align:left}
.lines .n{text-align:right;white-space:nowrap}
.lines tbody tr:nth-child(even) td{background:#F9FAFB}
.foot{display:grid;grid-template-columns:1fr 250px;gap:18px;margin-top:14px}
.words span{color:#6B7280}
.sum{width:100%;border-collapse:collapse;margin:10px 0;font-size:11px}
.sum caption{text-align:left;font-weight:700;color:var(--ac);margin-bottom:3px}
.sum th,.sum td{border:1px solid #E5E7EB;padding:4px 6px}
.sum th{background:#F9FAFB}
.sum .n{text-align:right}
.small{font-size:11px;color:#4B5563}
.bank h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ac);margin:10px 0 3px}
.bank p{margin:0;color:#374151}
.tot{width:100%;border-collapse:collapse}
.tot th{text-align:left;font-weight:500;color:#4B5563;padding:5px 8px}
.tot td{text-align:right;padding:5px 8px;font-family:var(--mono)}
.tot .grand th,.tot .grand td{background:var(--ac);color:#fff;font-weight:700;font-size:14px}
.qr{display:flex;gap:10px;align-items:center;margin-top:12px;justify-content:flex-end;text-align:right}
.qr-img{width:96px;height:96px;flex:none}
.qr-img svg{width:100%;height:100%}
.qr small{font-size:10.5px;color:#4B5563}
.nt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;border-top:1px solid #E5E7EB;padding-top:10px}
.nt h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ac);margin-bottom:3px}
.nt p{margin:0;color:#374151}
.signbox{margin:22px 0 0 auto;width:230px;text-align:center}
.signbox img{max-height:70px;max-width:200px;object-fit:contain;display:block;margin:6px auto}
.signbox .sp{height:56px}
.signbox p{margin:0;color:#374151}
.signbox p:last-child{border-top:1px solid #9CA3AF;padding-top:4px;font-size:11px}
.made{position:absolute;left:44px;right:44px;bottom:14px;text-align:center;font-size:9.5px;color:#9CA3AF;margin:0}
.stamp{position:absolute;top:150px;right:70px;transform:rotate(-14deg);border:3px solid #15803D;color:#15803D;font:800 26px var(--font-head);padding:4px 16px;border-radius:8px;opacity:.75;letter-spacing:.1em}

@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  body>*:not(main),main>*:not(.tool),.tool>*:not(.grid2),.grid2>*:not(.pv-col),.pv-col>*:not(.pv){display:none!important}
  .tool[data-tab] .pv-col{display:block!important}
  .pv{border:0;border-radius:0;background:#fff;height:auto!important;overflow:visible}
  .pv-scale{transform:none!important;width:auto}
  html,body,main,.tool,.grid2,.pv-col,.pv{margin:0!important;padding:0!important;min-height:0!important;border:0!important}
  .sh{width:210mm;min-height:296mm;padding:12mm 12mm 10mm}
  .made{left:12mm;right:12mm;bottom:5mm}
  .lines thead{display:table-header-group}
  .lines tr{break-inside:avoid}
}
.hub-link{margin:0 0 8px;font-size:.9rem;text-align:end}
/* e-invoice and e-way bill (einv.js) */
.ei-do{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ei-do .btn{cursor:pointer}
.ei-msg{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);font-size:.92rem}
.ei-msg.bad{border-color:#DC2626;background:color-mix(in srgb,#DC2626 8%,var(--surface))}
.ei-msg.ok{border-color:#15803D;background:color-mix(in srgb,#15803D 8%,var(--surface))}
.ei-msg p,.ei-msg ul{margin:0}.ei-msg ul{padding-inline-start:20px}.ei-msg ul+ul,.ei-msg p+ul{margin-top:4px}
.ei-have{margin-top:10px;font-size:.92rem;overflow-wrap:anywhere}.ei-have p{margin:4px 0}
.ei-have .warn{color:#B45309;font-weight:600}
.ei.has{border-color:#15803D}
.irn{display:flex;gap:12px;align-items:center;margin:10px 0 0;padding:8px 10px;border:1px solid #D1D5DB;border-radius:6px;font-size:10.5px}
.irn table{border-collapse:collapse;flex:1;min-width:0}
.irn th{text-align:left;font-weight:600;color:#4B5563;padding:1px 10px 1px 0;white-space:nowrap;width:1%}
.irn td{padding:1px 0;word-break:break-all}
.irn-qr{width:112px;height:112px;flex:none}.irn-qr svg{width:100%;height:100%}
.f[hidden]{display:none}
/* ---------- print and share: copies, A5, thermal rolls, designs ---------- */
#sheet>.sh+.sh{margin-top:24px}
.sh-from .role{margin:0 0 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#6B7280}
.signs{display:flex;justify-content:space-between;gap:20px}.signs .signbox{margin:22px 0 0}
.signs .signbox:first-child p:first-child{font-size:11px;color:#4B5563}
.pdf-again{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.25)}
/* thermal roll: 80 mm = 302px, 58 mm = 219px, at 96 dpi */
.sh.th{width:302px;min-height:0;padding:10px 10px 30px;font:11px/1.35 var(--mono),ui-monospace,monospace;text-align:center}
.sh.th58{width:219px;padding:8px 6px 28px;font-size:10px}
.sh.th h2{font-size:14px;margin:2px 0;color:#111827}
.sh.th p{margin:1px 0}
.sh.th .logo{max-width:60%;max-height:60px;display:block;margin:0 auto 4px;filter:grayscale(1)}
.sh.th .dt{font-size:13px;font-weight:800;margin:8px 0 2px;border-top:1px dashed #111;border-bottom:1px dashed #111;padding:3px 0;color:#111827}
.sh.th .copy{font-size:9.5px;color:#374151}
.sh.th table{width:100%;border-collapse:collapse;margin:4px 0}
.sh.th th,.sh.th td{padding:1px 0;text-align:left;font-weight:400;vertical-align:top}
.sh.th .kv td{text-align:right}
.sh.th .tl thead th{border-bottom:1px dashed #111;font-weight:700}
.sh.th .tl .n{text-align:right;white-space:nowrap}
.sh.th .tl .q td{color:#374151;padding-bottom:3px}
.sh.th .tot{border-top:1px dashed #111}
.sh.th .grand th,.sh.th .grand td{font-weight:800;font-size:1.15em;border-top:1px dashed #111;padding-top:3px;background:none;color:#111827}
.sh.th .words{font-size:.9em;color:#374151}
.sh.th .qr{justify-content:center;text-align:center;flex-direction:column;gap:4px}
.sh.th .paidline{font-weight:800;letter-spacing:.2em;margin-top:6px}
.sh.th .thanks{margin-top:8px;font-weight:700}
.sh.th .nt1{margin-top:6px;text-align:left}
.sh.th .made{position:static;margin-top:8px}
/* designs (classic is the plain look above) */
.sh.d-modern .sh-top{background:var(--ac);color:#fff;margin:-40px -44px 0;padding:28px 44px 18px;border:0}
.sh.d-modern .sh-top h2,.sh.d-modern .sh-top .dt,.sh.d-modern .sh-top p,.sh.d-modern .sh-top .role{color:#fff}
.sh.d-modern .sh-top .copy{color:rgba(255,255,255,.8)}
.sh.d-modern .logo{background:#fff;border-radius:8px;padding:4px}
.sh.d-modern .pt{border:0;background:#F3F4F6}
.sh.d-modern .lines th{background:#F3F4F6;color:var(--ac);border-bottom:2px solid var(--ac)}
.sh.d-modern .tot .grand th,.sh.d-modern .tot .grand td{border-radius:0}
.sh.d-compact{font-size:11px;padding:28px 32px 26px;line-height:1.3}
.sh.d-compact .sh-top{border-bottom-width:1px;padding-bottom:8px}
.sh.d-compact .sh-from h2{font-size:16px}
.sh.d-compact .meta{margin:8px 0}
.sh.d-compact .meta th,.sh.d-compact .meta td,.sh.d-compact .lines td{padding:3px 6px}
.sh.d-compact .lines th{background:#fff;color:#111827;border-top:1px solid #111;border-bottom:1px solid #111}
.sh.d-compact .lines tbody tr:nth-child(even) td{background:#fff}
.sh.d-compact .pt{border-radius:0}
@media print{
  #sheet>.sh+.sh{margin-top:0;break-before:page}
  .sh.a5{zoom:.7048}
  .sh.th{width:100%;min-height:0;padding:2mm 3mm 6mm}
  .sh.d-modern .sh-top{margin:-12mm -12mm 0;padding:10mm 12mm 6mm}
  .pdf-again{display:none}
}
/* ---------- slips (slip.js): receipt, voucher, rent receipts, salary slip, petty cash book ---------- */
.ln-grid{display:grid;gap:8px}
.ln-grid.c2{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.ln-grid.c3{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,1fr)}
/* petty cash entry: two tidy rows (date, voucher no., particulars / account head, received, paid), never a lone box on a third row */
.ln-grid.c6{grid-template-columns:minmax(150px,1.25fr) repeat(3,minmax(0,1fr))}.ln-grid.c6 .ln-wide,.ln-grid.c6>.f:nth-child(4){grid-column:span 2}
.ln-grid>.f{display:flex;flex-direction:column;justify-content:flex-end}.ln-grid input{min-width:0}
@media (max-width:520px){.ln-grid.c3,.ln-grid.c6{grid-template-columns:repeat(2,minmax(0,1fr))}.ln-grid .ln-wide{grid-column:1/-1}}
.sums .warn{color:#B45309;font-weight:600}
.sh.slip .rtext{font-size:14px;line-height:1.9;margin:18px 0}
.sh.slip .rrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sh.slip .amtbox{border:2px solid var(--ac);border-radius:8px;padding:8px 18px;font:800 20px var(--mono);color:var(--ac)}
.sh.slip .signs{align-items:flex-end;margin-top:26px}
.sh.slip .signs.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sh.slip .signs.three .signbox{width:auto}
.rstamp{width:74px;height:84px;border:1.5px dashed #9CA3AF;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;color:#6B7280;margin:0 auto 6px;flex:none}
.sh.slip .lines tfoot th{border-top:2px solid var(--ac);padding:6px;font-weight:700}
.sh.slip .lines tfoot .n{text-align:right}
.sh.slip .sal td{text-align:left}.sh.slip .sal .n{text-align:right}
.sh.slip .netbox{display:flex;justify-content:space-between;align-items:center;margin-top:12px;background:var(--ac);color:#fff;border-radius:6px;padding:8px 14px;font-size:15px}
.sh.slip .netbox b{font:800 18px var(--mono)}
.sh.rent{padding:24px 32px}
.rr{border:1.5px solid var(--ac);border-radius:8px;padding:12px 16px;margin-bottom:14px;min-height:318px;break-inside:avoid}
.rr-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #E5E7EB;padding-bottom:6px}
.rr-h .dt{font:800 16px var(--font-head);color:var(--ac);letter-spacing:.05em;margin:0}
.rr-h p{margin:0;display:flex;gap:16px;color:#374151}
.rr .rtext{font-size:13px;line-height:1.8;margin:10px 0}
.rr-f{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.rr-f p{margin:1px 0;color:#374151}.rr-f .signbox{margin:0;width:200px}
.sh.petty .lines td,.sh.petty .lines th{font-size:11px}
@media print{.sh.rent{padding:8mm 10mm}}
/* many documents from Excel (bulk.js) */
.bulk{margin-top:28px}
.bulk>h2{font-family:var(--font-head);font-size:1.35rem;margin:0 0 6px}
.bk-steps{display:grid;gap:12px}
.bk-steps .card h3{font-family:var(--font-head);font-size:1.05rem;margin:0 0 8px}
.bk-steps .row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.bk-steps label.btn{cursor:pointer}
.bk-out{margin-top:8px;font-size:.92rem;overflow-wrap:anywhere}
.bk-out .warn,.bk-out ul.warn{color:var(--bad);font-weight:600}
.bk-out .ok{color:var(--ok);font-weight:600}
.tbl{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.bk-t{width:100%;border-collapse:collapse;font-size:.88rem}
.bk-t th,.bk-t td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:start;vertical-align:top}
.bk-t .n{text-align:end;white-space:nowrap}
.bk-t tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.bk-t tr.ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.bk-t details ul{margin:4px 0 0;padding-inline-start:18px}
.pb-t input,.pb-t select{min-width:7.5rem;width:100%}
/* export and SEZ invoice block (export.js), on the printed sheet */
.xp{margin:10px 0 0;padding:8px 10px;border:1px solid #D1D5DB;border-radius:6px;font-size:10.5px}
.xp-end{margin:0 0 4px;font-weight:700;letter-spacing:.02em}
.xp table{border-collapse:collapse}
.xp th{text-align:left;font-weight:600;color:#4B5563;padding:1px 10px 1px 0;white-space:nowrap}
.xp td{padding:1px 0}

/* device test fixes (5 Nov 2026): bottom action buttons may take two lines on small phones instead of spilling out */
@media (max-width:380px){
  .actions .btn{white-space:normal;line-height:1.15;font-size:.84rem;padding:6px 4px}
}
/* item lines on the narrowest screens: two fields a row, labels wrap */
@media (max-width:300px){
  .it-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.it-grid .f label{overflow-wrap:anywhere}
/* item lines follow the width of the form column, not the window: at 1024-1280 px the side menu and the preview leave the form
   about 450 px, and six columns squeezed the rate box to two digits (POS, restaurant qty steppers covered it) */
.ed-col{container-type:inline-size}
@container (max-width:620px){.it-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:300px){.it-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step{min-width:0}.step input{min-width:2.5em;flex:1 1 auto}
/* Batch 2 (docmore.js): batch, expiry and serial fields on item lines, printed under the item; custom fields */
.it-grid .it-x input{font-family:var(--mono)}
.sh .ln-x{font-size:.82em;color:#475467}
.sh .cf-meta{margin-top:-4px}
/* ---------- more printed designs (all free): Bold, Elegant, Bill book, Minimal. They restyle the same sheet as Classic, so every
   document of docs.js, slip.js and kit.js gets them; thermal rolls (.sh.th) never carry a d-* class and stay as they are.
   Amounts, GSTIN and HSN keep the plain mono digits; colour blocks are dark enough to print as grey on a black-and-white printer. */
/* Bold: business on white, the title in a colour block on the right, a thick rule and a strip at the foot of the page */
.sh.d-band{--pt:40px;--px:44px}
.sh.d-band .sh-top{margin:calc(-1 * var(--pt)) calc(-1 * var(--px)) 0;padding:0;border-bottom:6px solid var(--ac);align-items:stretch;gap:0}
.sh.d-band .sh-from{flex:1;padding:26px 18px 16px var(--px);align-items:center}
.sh.d-band .sh-from h2{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-bottom:2px}
.sh.d-band .sh-title{background:var(--ac);padding:24px var(--px) 16px 26px;min-width:230px;display:flex;flex-direction:column;justify-content:center;text-align:right;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sh.d-band .sh-title .dt{color:#fff;font-size:23px;line-height:1.15;text-transform:uppercase;letter-spacing:.05em}
.sh.d-band .sh-title .copy{color:#fff;opacity:.85;font-weight:600}
.sh.d-band .meta{margin-top:18px}
.sh.d-band .meta th{background:#fff;color:var(--ac);font-weight:700}
.sh.d-band .pt{border:0;border-left:4px solid var(--ac);border-radius:0;background:#F8FAFC;padding:8px 12px}
.sh.d-band .lines th{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;padding:7px 6px}
.sh.d-band .lines td{border-bottom-color:#D1D5DB}
.sh.d-band .lines tbody tr:nth-child(even) td{background:#fff}
.sh.d-band .tot .grand th,.sh.d-band .tot .grand td{font-size:16px;padding:8px}
.sh.d-band .sum caption,.sh.d-band .bank h4,.sh.d-band .nt h4{font-weight:800}
.sh.d-band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--ac);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sh.d-band .made{bottom:16px}
.sh.d-band .netbox{border-radius:0}
.sh.d-band .rr{border-width:0 0 0 6px;border-radius:0;background:#F8FAFC}
/* Elegant: serif headings, centred letterhead, thin rules, no filled blocks (jewellers, boutiques, studios) */
.sh.d-elegant{--serif:Georgia,'Noto Serif','Times New Roman','Noto Serif Devanagari','Noto Serif Gurmukhi',serif}
.sh.d-elegant h2,.sh.d-elegant .dt,.sh.d-elegant h4,.sh.d-elegant .sum caption,.sh.d-elegant .tot .grand,.sh.d-elegant .words b{font-family:var(--serif)}
.sh.d-elegant .sh-top{flex-direction:column;align-items:center;text-align:center;gap:4px;border-bottom:3px double var(--ac);padding-bottom:10px}
.sh.d-elegant .sh-from{justify-content:center;align-items:center;gap:14px}
.sh.d-elegant .sh-from>div{text-align:center}
.sh.d-elegant .sh-from .logo{max-height:58px;max-width:90px}
.sh.d-elegant .sh-from h2{font-size:25px;font-weight:400;letter-spacing:.03em;line-height:1.15;margin-bottom:2px}
/* the address lines run on one centred line, like a letterhead */
.sh.d-elegant .sh-from div p{display:inline;margin:0}
.sh.d-elegant .sh-from div p+p::before{content:' \B7   ';color:#9CA3AF}
.sh.d-elegant .sh-from .role{display:block}
.sh.d-elegant .sh-title{text-align:center}
.sh.d-elegant .sh-title .dt{display:inline-block;font-size:14px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;border-top:1px solid var(--ac);border-bottom:1px solid var(--ac);padding:3px 4px 3px 18px;color:#111827}
.sh.d-elegant .sh-title .copy{font-style:italic}
.sh.d-elegant .meta{margin:12px 0}
.sh.d-elegant .meta th,.sh.d-elegant .meta td{border:0;border-bottom:1px solid #E5E7EB;padding:4px 8px}
.sh.d-elegant .meta th{background:none;font-weight:400;font-style:italic;color:#6B7280}
.sh.d-elegant .pt{border:0;border-top:1px solid var(--ac);border-radius:0;padding:6px 2px}
.sh.d-elegant .pt h4,.sh.d-elegant .nt h4,.sh.d-elegant .bank h4{font-weight:400;font-style:italic;text-transform:none;letter-spacing:.02em;font-size:12.5px}
.sh.d-elegant .lines th{background:none;color:var(--ac);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:10px;border-top:1px solid var(--ac);border-bottom:1px solid var(--ac)}
.sh.d-elegant .lines tbody tr:nth-child(even) td{background:none}
.sh.d-elegant .sum th{background:none;font-weight:600}
.sh.d-elegant .sum th,.sh.d-elegant .sum td{border:0;border-bottom:1px solid #E5E7EB}
.sh.d-elegant .tot .grand th,.sh.d-elegant .tot .grand td{background:none;color:#111827;font-size:16px;border-top:1px solid var(--ac);border-bottom:3px double var(--ac)}
.sh.d-elegant .signbox p:last-child{border-top-color:var(--ac)}
.sh.d-elegant .stamp{font-family:var(--serif)}
.sh.d-elegant .netbox{background:none;color:#111827;border-top:1px solid var(--ac);border-bottom:3px double var(--ac);border-radius:0;font-family:var(--serif)}
.sh.d-elegant .amtbox{border-width:1px;border-radius:0;font-family:var(--serif)}
.sh.d-elegant .rr{border-width:1px;border-radius:0}
/* Bill book: every part in a ruled box, the title centred on top, like a printed GST bill book; black and grey only, accent on the name */
.sh.d-grid .sh-top{flex-direction:column-reverse;justify-content:flex-end;border:1.5px solid #111;padding:0 12px 8px;gap:6px}
.sh.d-grid .sh-title{position:relative;margin:0 -12px;border-bottom:1.5px solid #111;padding:5px 12px;text-align:center}
.sh.d-grid .sh-title .dt{color:#111827;font-size:16px;letter-spacing:.14em}
.sh.d-grid .sh-title .copy{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;font-weight:700;color:#111827}
.sh.d-grid .sh-from{justify-content:center;text-align:center;align-items:center}
.sh.d-grid .sh-from h2{font-size:23px;text-transform:uppercase;letter-spacing:.04em}
.sh.d-grid .meta{margin:0}
.sh.d-grid .meta th,.sh.d-grid .meta td{border:1px solid #111;border-top:0}
.sh.d-grid .meta th{background:#F3F4F6;color:#111827}
.sh.d-grid .parties{gap:0;margin:0}
.sh.d-grid .pt{border:1px solid #111;border-top:0;border-radius:0}
.sh.d-grid .pt+.pt{border-left:0}
.sh.d-grid .pt:only-child{grid-column:1/-1}
.sh.d-grid .pt h4,.sh.d-grid .nt h4,.sh.d-grid .bank h4{color:#111827}
.sh.d-grid .lines{border:1px solid #111;border-top:0}
.sh.d-grid .sh-top+.lines,.sh.d-grid .sh-top+.meta+.lines{border-top:1px solid #111}
.sh.d-grid .lines th{background:#F3F4F6;color:#111827;border:1px solid #111;border-top:0;font-weight:700}
.sh.d-grid .lines td{border:0;border-left:1px solid #111;border-bottom:1px dotted #9CA3AF}
.sh.d-grid .lines td:first-child{border-left:0}
.sh.d-grid .lines tbody tr:nth-child(even) td{background:none}
.sh.d-grid .lines tfoot th{border-top:1.5px solid #111}
.sh.d-grid .foot{margin:0;border:1px solid #111;border-top:0;gap:0}
.sh.d-grid .foot-l{padding:8px 10px;border-right:1px solid #111;min-width:0}
.sh.d-grid .tot th,.sh.d-grid .tot td{border-bottom:1px solid #111}
.sh.d-grid .tot .grand th,.sh.d-grid .tot .grand td{background:#E5E7EB;color:#111827;border-bottom:0;font-size:15px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sh.d-grid .qr{padding:8px 10px;margin:0}
.sh.d-grid .sum caption{color:#111827}
.sh.d-grid .sum th,.sh.d-grid .sum td{border-color:#111}
.sh.d-grid .sum th{background:#F3F4F6}
.sh.d-grid .nt{margin:0;border:1px solid #111;border-top:0;padding:8px 10px}
.sh.d-grid .signbox p:last-child{border-top-color:#111}
.sh.d-grid .amtbox{border-color:#111;border-radius:0;color:#111827}
.sh.d-grid .netbox{background:#E5E7EB;color:#111827;border:1.5px solid #111;border-radius:0}
.sh.d-grid .rr{border-color:#111;border-radius:0}
.sh.d-grid .rr-h{border-bottom-color:#111}
.sh.d-grid .rr-h .dt{color:#111827}
/* Minimal: wide margins, small type, hairlines only; the colour shows only in the total */
.sh.d-minimal{font-size:11.5px;padding:56px 60px 40px;color:#1F2937}
.sh.d-minimal .sh-top{border-bottom:0;padding-bottom:26px}
.sh.d-minimal .sh-from .logo{max-height:52px}
.sh.d-minimal .sh-from h2{font-size:17px;color:#111827}
.sh.d-minimal .sh-from p{color:#6B7280}
.sh.d-minimal .sh-title .dt{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#6B7280}
.sh.d-minimal .meta{margin:0 0 22px}
.sh.d-minimal .meta th,.sh.d-minimal .meta td{border:0;padding:2px 10px 2px 0}
.sh.d-minimal .meta th{background:none;color:#9CA3AF;font-weight:500;width:auto;white-space:nowrap}
.sh.d-minimal .parties{margin-bottom:24px;gap:30px}
.sh.d-minimal .pt{border:0;padding:0}
.sh.d-minimal .pt h4,.sh.d-minimal .nt h4,.sh.d-minimal .bank h4,.sh.d-minimal .sum caption{color:#9CA3AF;font-weight:600;letter-spacing:.14em;font-size:9.5px}
.sh.d-minimal .lines th{background:none;color:#6B7280;font-weight:600;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid #111827;padding:6px}
.sh.d-minimal .lines td{border-bottom:1px solid #F3F4F6;padding:7px 6px}
.sh.d-minimal .lines tbody tr:nth-child(even) td{background:none}
.sh.d-minimal .lines tfoot th{border-top:1px solid #111827}
.sh.d-minimal .foot{margin-top:22px}
.sh.d-minimal .sum th,.sh.d-minimal .sum td{border:0;border-bottom:1px solid #F3F4F6}
.sh.d-minimal .sum th{background:none;color:#6B7280;font-weight:500}
.sh.d-minimal .tot th{color:#6B7280}
.sh.d-minimal .tot .grand th,.sh.d-minimal .tot .grand td{background:none;color:var(--ac);font-size:15px;border-top:1px solid #111827;padding-top:9px}
.sh.d-minimal .nt{border-top:1px solid #F3F4F6;margin-top:24px}
.sh.d-minimal .signbox p:last-child{border-top-color:#D1D5DB;color:#6B7280}
.sh.d-minimal .amtbox{border-width:1px;border-radius:4px;font-size:18px}
.sh.d-minimal .netbox{background:none;color:#111827;border-top:1px solid #111827;border-radius:0;padding:10px 0 0}
.sh.d-minimal .netbox b{color:var(--ac)}
.sh.d-minimal .rr{border:1px solid #E5E7EB;border-radius:4px}
@media print{
  .sh.d-band{--pt:12mm;--px:12mm}
  .sh.d-band::after{position:fixed}   /* the foot strip on every printed page, also when a long bill runs on */
  .sh.d-minimal{padding:16mm 16mm 12mm}
}
/* the design picker: a row of small drawn pages, painted in the chosen colour (--c) */
.dpick{--c:#0B3B5B;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:2px}
.dp{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:600 .8rem/1.2 var(--font);cursor:pointer;min-height:44px;text-align:center}
.dp:hover{border-color:var(--soft)}
.dp[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--focus)}
.dp span{overflow-wrap:anywhere}
.dp-mini{display:block;width:54px;height:72px;border:1px solid #CBD5E1;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);background-repeat:no-repeat;background-color:#fff}
.dp-classic{background-image:linear-gradient(var(--c),var(--c)),linear-gradient(#94A3B8,#94A3B8),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),repeating-linear-gradient(#fff 0 4px,#E2E8F0 4px 5px),linear-gradient(var(--c),var(--c));
  background-position:6px 7px,6px 13px,34px 7px,6px 19px,6px 30px,6px 34px,30px 61px;background-size:20px 4px,16px 2px,14px 3px,42px 1.5px,42px 4px,42px 20px,18px 4px}
.dp-modern{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(#E5E7EB,#E5E7EB),repeating-linear-gradient(#fff 0 4px,#E2E8F0 4px 5px),linear-gradient(var(--c),var(--c));
  background-position:6px 7px,34px 8px,0 0,6px 32px,6px 28px,6px 35px,30px 61px;background-size:18px 4px,14px 3px,100% 20px,42px 1px,42px 4px,42px 20px,18px 4px}
.dp-compact{background-image:linear-gradient(var(--c),var(--c)),linear-gradient(#94A3B8,#94A3B8),linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(#111,#111),repeating-linear-gradient(#fff 0 2px,#E2E8F0 2px 3px),linear-gradient(var(--c),var(--c));
  background-position:6px 6px,36px 6px,6px 12px,6px 17px,6px 21px,6px 22px,30px 52px;background-size:16px 3px,12px 2px,42px 1px,42px 1px,42px 1px,42px 27px,18px 3px}
.dp-band{background-image:linear-gradient(#334155,#334155),linear-gradient(#94A3B8,#94A3B8),linear-gradient(#fff,#fff),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),repeating-linear-gradient(#fff 0 4px,#E2E8F0 4px 5px),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-position:5px 7px,5px 13px,37px 9px,32px 0,0 20px,6px 30px,6px 34px,30px 58px,0 68px;background-size:20px 4px,15px 2px,13px 3px,22px 20px,100% 3px,42px 4px,42px 20px,18px 5px,100% 4px}
.dp-elegant{background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),repeating-linear-gradient(#fff 0 4px,#E5E7EB 4px 5px),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-position:16px 7px,20px 14px,20px 18px,6px 23px,6px 25px,6px 31px,6px 36px,6px 37px,30px 60px,30px 64px;background-size:22px 3px,14px 1px,14px 1px,42px 1px,42px 1px,42px 1px,42px 1px,42px 18px,18px 1px,18px 1px}
.dp-grid{background-image:linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(var(--c),var(--c)),linear-gradient(#111,#111),linear-gradient(#D1D5DB,#D1D5DB),repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 10.5px),linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(#111,#111),linear-gradient(#9CA3AF,#9CA3AF);
  background-position:5px 5px,20px 7px,5px 11px,15px 15px,5px 22px,5px 28px,5px 28px,5px 5px,48px 5px,5px 56px,32px 59px;background-size:44px 1px,14px 2px,44px 1px,24px 3px,44px 1px,44px 4px,44px 28px,1px 52px,1px 52px,44px 1px,16px 4px}
.dp-minimal{background-image:linear-gradient(#334155,#334155),linear-gradient(#CBD5E1,#CBD5E1),linear-gradient(#94A3B8,#94A3B8),linear-gradient(#111,#111),repeating-linear-gradient(#fff 0 5px,#F1F5F9 5px 6px),linear-gradient(var(--c),var(--c));
  background-position:8px 9px,8px 14px,34px 9px,8px 31px,8px 32px,34px 60px;background-size:14px 2.5px,10px 1.5px,12px 2px,38px 1px,38px 18px,12px 3px}
@media (prefers-reduced-motion:no-preference){.dp{transition:border-color .15s,box-shadow .15s}}
.rb-list{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0;display:grid;gap:8px;min-width:0}.rb-list legend{font-weight:700;padding:0 4px}.rb-list .chk{align-items:flex-start;min-height:32px}.rb-list .chk span{overflow-wrap:anywhere}
/* computers only (owner): the New / Saved / Save / Print / Share bar stays in view under the header while the form scrolls (core.js sets --hd-h and .stuck) */
@media (min-width:961px) and (hover:hover) and (pointer:fine){
.tool-top{position:sticky;top:var(--hd-h,0px);z-index:15;background:var(--bg);margin:0 -12px 12px;padding:8px 12px;border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.tool-top.stuck{border-bottom-color:var(--line);box-shadow:0 8px 14px -12px rgba(15,27,42,.45)}
.pv-col{top:calc(var(--hd-h,0px) + var(--bar-h,56px) + 10px)}   /* the preview keeps clear of the pinned bar */
}
@media print{.tool-top{position:static}}
/* phones and tablets (owner): every button of the maker in ONE bar fixed at the bottom of the screen, like an app's tab bar:
   New and Saved (copies made by core.js, .act-x) + Save, Print, Share and any extra (Make invoice); the top row then keeps only the status line */
@media (max-width:960px){
.tool-top .row:has(>[data-do=new]){display:none}
#tool .actions{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;display:flex;flex-wrap:nowrap;gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 16px -12px rgba(15,27,42,.45)}
#tool .actions .btn{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;min-height:54px;padding:4px 2px;border-radius:10px;font-size:.7rem;line-height:1.1;white-space:normal;text-align:center;overflow-wrap:anywhere}
#tool .actions .btn:not(.primary){border-color:transparent;background:none}
#tool .actions .btn>svg.bi{width:20px;height:20px}
html:has(#tool .actions) body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
/* the page's slide-up entrance (base.css) moves #tool with a transform, and a transform holds the fixed bar inside it: fade only */
@keyframes ns-fadein{from{opacity:0}}
@media (max-width:960px) and (prefers-reduced-motion:no-preference){html.ready #main>#tool{animation-name:ns-fadein}}
@media (min-width:961px){.act-x{display:none}}
@media print{#tool .actions{display:none}html:has(#tool .actions) body{padding-bottom:0}}