/* A4 document styles: used in the in-app preview and on print.php (Save as PDF). */
.sheet { --b: #5235e0; --b2: #3519a8; --y: #f5b301; --ink: #15132b; --tx: #33304d; --mu: #77738f; --ln: #e6e3f1;
	position: relative; width: 210mm; min-height: 297mm; background: #fff; color: var(--tx); font-family: Inter, Arial, sans-serif; font-size: 10.4pt; line-height: 1.6;
	padding: 0; box-shadow: 0 10px 30px -12px rgba(20, 18, 60, .35); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.sheet.paged { height: 297mm; }
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.sheet b { color: var(--ink); font-weight: 600; }
.sheet p { margin: 0 0 3.4mm; }
.sheet .muted { color: var(--mu); }
.preview-scale .sheet + .sheet, .print-body .sheet + .sheet { margin-top: 8mm; }

/* letterhead */
.lh-band { height: 4mm; background: linear-gradient(90deg, var(--b2), var(--b) 55%, #7a5cf5); position: relative; flex: none; }
.lh-band i { position: absolute; right: 22mm; top: 0; width: 38mm; height: 100%; background: var(--y); transform: skewX(-30deg); }
.lh-shape { position: absolute; top: 0; right: 0; width: 70mm; height: 46mm; background: linear-gradient(135deg, rgba(82, 53, 224, .07), rgba(82, 53, 224, 0) 70%); clip-path: polygon(30% 0, 100% 0, 100% 100%); pointer-events: none; }
.lh-wm { position: absolute; left: 50%; top: 52%; width: 135mm; transform: translate(-50%, -50%); opacity: .045; pointer-events: none; z-index: 0; filter: grayscale(.2); }
.lh { display: flex; justify-content: space-between; align-items: center; gap: 10mm; padding: 8mm 16mm 6mm; position: relative; z-index: 1; flex: none; }
.lh::after { content: ""; position: absolute; left: 16mm; right: 16mm; bottom: 0; height: .35mm; background: linear-gradient(90deg, var(--b) 0, var(--b) 30%, var(--ln) 30%); }
.lh-left { display: flex; flex-direction: column; gap: 1.2mm; }
.lh-logo { height: 14mm; width: auto; align-self: flex-start; }
.lh-name { font-size: 9.6pt; font-weight: 800; color: var(--b2); letter-spacing: .08em; text-transform: uppercase; margin-top: 1mm; }
.lh-tag { font-size: 7.8pt; color: var(--mu); letter-spacing: .03em; }
.lh-contact { display: grid; gap: 1.6mm; font-size: 8.3pt; color: var(--tx); padding-left: 6mm; border-left: .35mm solid var(--ln); }
.lh-contact div { display: flex; align-items: center; gap: 2.2mm; white-space: nowrap; }
.lh-contact svg { width: 4.6mm; height: 4.6mm; padding: .9mm; border-radius: 50%; background: var(--b); color: #fff; flex: none; }
.lb { flex: 1; min-height: 0; overflow: hidden; padding: 7mm 18mm 4mm; position: relative; z-index: 1; }
.lf { flex: none; padding: 2.6mm 16mm 2.4mm; font-size: 7.4pt; color: var(--mu); position: relative; z-index: 1; border-top: .3mm solid var(--ln); margin: 0 0; }
.lf-ids { text-align: center; color: var(--tx); letter-spacing: .02em; }
.lf-ids b { color: var(--b2); font-weight: 700; }
.lf-ids .sep { color: var(--y); margin: 0 2.5mm; font-weight: 700; }
.lf-meta { display: flex; justify-content: space-between; gap: 6mm; margin-top: .8mm; }
.pg-no { font-weight: 600; color: var(--b2); white-space: nowrap; }
.lf-verify { text-align: center; color: var(--b2); margin-top: .6mm; }
.lf-band { flex: none; height: 3mm; background: linear-gradient(90deg, var(--y) 0, var(--y) 22%, var(--b) 22%, var(--b2)); }

/* letter body */
.ref { display: flex; justify-content: space-between; font-size: 9.4pt; margin-bottom: 6mm; padding: 2.2mm 3.5mm; background: #f7f5ff; border-radius: 2mm; border-left: 1mm solid var(--b); }
.to { margin-bottom: 5mm; line-height: 1.55; }
.concern { text-align: center; font-weight: 700; letter-spacing: .14em; color: var(--b2); margin: 3mm 0 6mm; font-size: 10.6pt; }
.concern::after { content: ""; display: block; width: 26mm; height: .6mm; background: var(--y); margin: 1.6mm auto 0; }
.subj { font-weight: 700; color: var(--ink); margin-bottom: 5mm; }
.subj::before { content: ""; display: inline-block; width: 1.4mm; height: 3.6mm; background: var(--y); margin-right: 2.2mm; vertical-align: -0.5mm; border-radius: .4mm; }
.body { text-align: justify; }
.body p.bul { position: relative; padding-left: 6mm; margin-bottom: 2.2mm; }
.body p.bul::before { content: ""; position: absolute; left: 1.2mm; top: 2.2mm; width: 1.6mm; height: 1.6mm; border-radius: 50%; background: var(--b); }
.body p.clause { position: relative; padding-left: 7mm; }
.body p.clause .cn { position: absolute; left: 0; font-weight: 700; color: var(--b2); }
.close { margin-top: 5mm; }
.sg { position: relative; margin-top: 3mm; min-height: 30mm; display: inline-block; min-width: 62mm; }
.sg-for { font-weight: 600; color: var(--ink); font-size: 9.6pt; }
.sg-img { display: block; height: 16mm; max-width: 55mm; object-fit: contain; margin: 2mm 0 1mm; position: relative; z-index: 2; }
.sg-space { height: 17mm; }
.sg-stamp { position: absolute; left: 30mm; top: 2mm; height: 26mm; width: 26mm; object-fit: contain; opacity: .88; z-index: 1; }
.sg-name { font-weight: 700; color: var(--ink); border-top: .3mm solid var(--tx); padding-top: 1mm; display: inline-block; min-width: 48mm; }
.sg-desg { font-size: 9pt; color: var(--mu); }
.two-sign { display: flex; justify-content: space-between; gap: 10mm; }
.accept { margin-top: 6mm; border: .3mm dashed #c9c4e0; border-radius: 2.5mm; padding: 4mm 5mm; font-size: 9.4pt; background: #fcfbff; }
.accept-t { font-weight: 700; color: var(--b2); margin-bottom: 1.5mm; }
.accept-row { display: flex; justify-content: space-between; margin-top: 8mm; }

/* bills */
.bill-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5mm; }
.bill-title h2 { font-size: 17pt; color: var(--b); letter-spacing: .06em; margin: 0; }
.bill-meta { text-align: right; font-size: 9.6pt; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-bottom: 5mm; font-size: 9.6pt; }
.parties > div { background: #faf9ff; border: 1px solid var(--ln); border-radius: 2.5mm; padding: 3.5mm 4mm; }
.mini-t { font-size: 7.6pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--b); margin-bottom: 1mm; }
table.bt, table.tot, table.info-t { width: 100%; border-collapse: collapse; font-size: 9.6pt; }
.bt th { background: var(--b); color: #fff; font-weight: 600; text-align: left; padding: 2.4mm 2.8mm; font-size: 8.8pt; }
.bt td { padding: 2.4mm 2.8mm; border-bottom: 1px solid var(--ln); vertical-align: top; }
.bt .r, .tot td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt .c { text-align: center; }
.bt tr.grand td { font-weight: 700; color: var(--ink); background: #f6f4ff; }
.bill-sum { display: grid; grid-template-columns: 1fr 74mm; gap: 8mm; margin-top: 4mm; align-items: start; }
.words { font-size: 9.4pt; }
.tot td { padding: 1.8mm 2.8mm; }
.tot tr.grand td { font-weight: 700; color: #fff; background: var(--b); font-size: 10.6pt; }
.bank { margin-top: 4mm; font-size: 9pt; }
.notes { margin-top: 5mm; font-size: 9pt; }
.notes ul { padding-left: 5mm; }
.small-note { font-size: 8pt; color: var(--mu); margin-top: 3mm; }
.info-t td { padding: 1.8mm 2.5mm; border: 1px solid var(--ln); }
.info-t td:nth-child(odd) { color: var(--mu); width: 22%; }
.info-t { margin-bottom: 5mm; }
.net { display: flex; justify-content: space-between; align-items: center; margin-top: 4mm; padding: 3mm 4mm; background: var(--b); color: #fff; border-radius: 2mm; font-size: 11pt; }
.net b { color: #fff; font-size: 13pt; }
.rcp { border: 1px solid var(--ln); border-radius: 3mm; padding: 7mm 8mm; background: #fcfbff; font-size: 11pt; position: relative; }
.rcp p { margin-bottom: 4mm; }
.rcp-grid { display: flex; gap: 10mm; flex-wrap: wrap; margin-top: 2mm; font-size: 9.6pt; }
.rcp-grid span { display: block; color: var(--mu); font-size: 8.4pt; }
.rcp-amt { position: absolute; right: 8mm; bottom: 7mm; font-size: 18pt; font-weight: 800; color: var(--b); border: 2px solid var(--b); border-radius: 2mm; padding: 1.5mm 4mm; }

/* watermark */
.wm { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 90pt; font-weight: 800; color: rgba(82, 53, 224, .07); letter-spacing: .1em; pointer-events: none; z-index: 0; }
.wm.bad { color: rgba(220, 38, 38, .12); }

/* certificate (A4 landscape) */
.sheet.cert { width: 297mm; min-height: 210mm; height: 210mm; padding: 9mm; background: linear-gradient(135deg, #fff 0%, #fbfaff 100%); }
.ct-frame { position: relative; height: 100%; border: 1.2mm solid var(--b); outline: .4mm solid var(--y); outline-offset: -3.4mm; padding: 13mm 22mm 10mm; text-align: center; display: flex; flex-direction: column; align-items: center;
	background: radial-gradient(400px 260px at 100% 0%, rgba(245, 179, 1, .12), transparent 60%), radial-gradient(460px 300px at 0% 100%, rgba(82, 53, 224, .08), transparent 60%); }
.ct-corner { position: absolute; width: 22mm; height: 22mm; border-color: var(--y); border-style: solid; }
.ct-corner.tl { top: 5mm; left: 5mm; border-width: 1.2mm 0 0 1.2mm; } .ct-corner.tr { top: 5mm; right: 5mm; border-width: 1.2mm 1.2mm 0 0; }
.ct-corner.bl { bottom: 5mm; left: 5mm; border-width: 0 0 1.2mm 1.2mm; } .ct-corner.br { bottom: 5mm; right: 5mm; border-width: 0 1.2mm 1.2mm 0; }
.ct-logo { height: 15mm; margin-bottom: 5mm; }
.ct-h { font-family: "Playfair Display", Georgia, serif; font-size: 30pt; font-weight: 700; color: var(--b2); letter-spacing: .02em; line-height: 1.1; }
.ct-lead { margin-top: 5mm; font-size: 11.5pt; color: var(--mu); letter-spacing: .04em; }
.ct-name { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 32pt; font-weight: 500; color: var(--ink); margin: 2mm 0 3mm; padding: 0 12mm 2mm; border-bottom: .5mm solid var(--y); }
.ct-text { max-width: 205mm; font-size: 11.6pt; line-height: 1.65; color: var(--tx); }
.ct-text p { margin: 0; }
.ct-foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10mm; }
.ct-col { text-align: center; }
.ct-col .sg-img { margin: 0 auto 1mm; height: 15mm; }
.ct-col .sg-space { height: 15mm; }
.ct-val { font-weight: 700; color: var(--ink); border-top: .3mm solid var(--tx); padding-top: 1.2mm; display: inline-block; min-width: 55mm; }
.ct-lbl { font-size: 9pt; color: var(--mu); }
.ct-mid { position: relative; display: flex; flex-direction: column; align-items: center; }
.ct-qr { width: 20mm; height: 20mm; }
.ct-qr svg { width: 100%; height: 100%; }
.ct-stamp { position: absolute; bottom: 14mm; height: 26mm; width: 26mm; object-fit: contain; opacity: .85; }
.ct-no { font-size: 7.6pt; color: var(--mu); margin-top: 1.2mm; line-height: 1.4; }
.ct-co { font-size: 7.6pt; color: var(--mu); margin-top: 3mm; letter-spacing: .04em; }

/* print page */
.print-body { margin: 0; background: #e9e7f3; padding: 70px 0 30px; display: flex; justify-content: center; font-family: Inter, Arial, sans-serif; }
.print-bar { position: fixed; top: 0; left: 0; right: 0; background: #14122b; color: #ddd; display: flex; align-items: center; gap: 16px; padding: 10px 18px; font-size: 13px; z-index: 10; }
.print-bar button { background: #f5b301; color: #1f1600; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
@page { size: A4 portrait; margin: 0; }
@media print {
	.print-body { padding: 0; background: #fff; display: block; }
	.print-bar { display: none; }
	.sheet { box-shadow: none; margin: 0 !important; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.sheet:last-child { break-after: auto; page-break-after: auto; }
}