/* ---- offline demo only ---- */
.demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; color: #ede8de; font: 600 14px/1.35 system-ui, sans-serif;
  background: linear-gradient(180deg, #2a2c30 0%, #1a1b1e 100%); border-top: 3px solid #d2722c; box-shadow: 0 -6px 20px rgba(0,0,0,.55); }
.demo-bar .demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 14px; }
.demo-bar strong.demo-tag { background: linear-gradient(180deg, #ea8a43, #b5571c); color: #160c05; padding: 2px 10px; border-radius: 2px;
  font: 600 14px "Oswald", "Arial Narrow", sans-serif; letter-spacing: .2em; border: 1px solid #6e3410; }
.demo-bar button { font: 600 13px system-ui, sans-serif; background: linear-gradient(180deg, #34363b, #26282c); color: #ede8de; border: 1px solid #4a4c52; border-radius: 2px; padding: 5px 10px; cursor: pointer; }
.demo-bar button:hover { border-color: #d2722c; }
.demo-bar .demo-pins { color: #aaa398; }
.demo-bar .demo-pins span { white-space: nowrap; margin-right: 10px; color: #ede8de; }
.demo-bar .demo-pins b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; color: #f39a55; }
.demo-bar .demo-more { display: none; border-top: 1px solid #3b3d42; }
.demo-bar.open .demo-more { display: flex; }
.demo-bar code { background: #0d0e10; color: #f39a55; padding: 1px 6px; border-radius: 2px; font-size: 12px; word-break: break-all; }
body.has-demo-bar .content, body.has-demo-bar .lock-screen { padding-bottom: 120px; }
.demo-print { max-width: 96vw; width: 420px; background: #d9d6cf; border: 0; border-radius: 10px; padding: 0; }
.demo-print::backdrop { background: rgba(0,0,0,.6); }
.demo-print .demo-print-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #1d1e21; border-bottom: 3px solid #d2722c; color: #ede8de; font: 600 14px system-ui; }
.demo-print .demo-paper { background: #fff; color: #000; margin: 14px auto; padding: 10px 0; width: 80mm; box-shadow: 0 3px 14px rgba(0,0,0,.25); max-height: 70vh; overflow: auto; }
.demo-print .demo-print-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 0 14px 14px; }
.demo-paper .receipt { width: 72mm; margin: 0 auto; font: 12px/1.35 Arial, Helvetica, sans-serif; color: #000; }
.demo-paper .receipt .r-head { text-align: center; border-bottom: 1px dashed #000; padding-bottom: 4px; margin-bottom: 4px; }
.demo-paper .receipt .r-head strong { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; display: block; margin-top: 2px; }
.demo-paper .receipt .r-logo { display: block; width: 30mm; height: auto; margin: 0 auto 2px; filter: grayscale(1) contrast(1.2); }
.demo-paper .receipt .r-no { font: 700 26px/1.1 ui-monospace, Menlo, Consolas, monospace; text-align: center; margin: 6px 0; }
.demo-paper .receipt table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.demo-paper .receipt th, .demo-paper .receipt td { padding: 2px 0; border-bottom: 1px dotted #999; text-align: left; font-size: 11px; color: #000; background: #fff; }
.demo-paper .receipt .num { text-align: right; }
.demo-paper .receipt th + th, .demo-paper .receipt td + td { padding-left: 5px; }
.demo-paper .receipt th { font-size: 10px; white-space: nowrap; }
.demo-paper .receipt td.num { white-space: nowrap; }
.demo-paper .receipt .r-total { font-size: 16px; text-align: right; border-top: 2px solid #000; padding-top: 4px; }
.demo-paper .receipt .r-paid { font-weight: 700; text-align: center; margin: 6px 0; }
.demo-paper .receipt .r-sig img { max-width: 100%; max-height: 60px; display: block; margin: 0 auto; }
.demo-paper .receipt .small { font-size: 10px; text-align: center; color: #000; }
.demo-paper .receipt .r-staff { font-size: 11px; margin: 2px 0 4px; }
.demo-paper .receipt .r-t { margin: 1px 0; }
.demo-paper .receipt .r-sm { font-size: 10px; } .demo-paper .receipt .r-md { font-size: 12px; } .demo-paper .receipt .r-lg { font-size: 14px; } .demo-paper .receipt .r-xl { font-size: 26px; line-height: 1.1; margin: 4px 0; }
.demo-paper .receipt .r-center { text-align: center; } .demo-paper .receipt .r-right { text-align: right; } .demo-paper .receipt .r-b { font-weight: 700; }
.demo-paper .receipt .r-mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }
.demo-paper .receipt .r-box { border: 2px dashed #000; padding: 2px; }
.demo-paper .receipt .r-rule { border-top: 2px solid #000; margin: 4px 0; } .demo-paper .receipt .r-rule.dashed { border-top: 1px dashed #000; }
.demo-paper .qr svg { width: 150px; height: 150px; display: block; margin: .6rem auto; }
@media (max-width: 640px) { .demo-bar { font-size: 12px; } .demo-bar .demo-pins span { margin-right: 6px; } body.has-demo-bar .content, body.has-demo-bar .lock-screen { padding-bottom: 170px; } }
@media print { .demo-bar { display: none !important; } }

.demo-png { width: auto !important; max-width: 300px; padding: 0 !important; }
.demo-png img { width: 100%; display: block; }
.demo-note { padding: 10px; margin: 0; color: #000; font: 14px system-ui; }
.demo-drawer { margin: 10px 14px 0; padding: 10px 12px; font: 700 16px system-ui; border-radius: 8px; text-align: center; }
.demo-drawer.open { background: #1f7a4d; color: #fff; }
.demo-drawer.shut { background: #d5dae2; color: #14202f; }

.demo-print.letter { width: 980px; }
.demo-print .demo-paper.letter { width: 8.5in; max-width: calc(100% - 28px); padding: .45in .5in; box-sizing: border-box; }
.demo-paper.letter .receipt { width: auto; max-width: 7.5in; font-size: 15px; }
.demo-paper.letter .receipt .r-logo { width: 1.4in; }
.demo-paper.letter .qr svg { width: 1.4in; height: 1.4in; }
.demo-bar .demo-pins { display: flex; flex-wrap: wrap; gap: 2px .45em; align-items: center; flex: 1 1 auto; min-width: 0; }
/* Wide screens: keep the PIN card level with the IRONWORKS badge. The badge is centred on the whole
   screen, so the card is too: equal room top and bottom (enough to clear the one- or two-line demo bar),
   plus a nudge equal to the address line under the card. */
@media (min-width: 1100px) {
  body.has-demo-bar .lock-screen { padding-top: 72px; padding-bottom: 72px; }
  body.has-demo-bar .lock-screen .lock-card { margin-top: calc(1rem + 18px); }
}
@media (min-width: 1100px) and (max-height: 920px) {
  body.has-demo-bar .lock-screen .lock-card { margin-top: calc(.75rem + 18px); }
}