.receipt-printer-stage { position: relative; height: 1120px; overflow: hidden; border-radius: 8px; background: #15171b; --print-duration: 2550ms; }
.printer-housing { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: min(300px, calc(100% - 24px)); height: 90px; z-index: 2; border: 1px solid #ffffff18; border-radius: 14px 14px 8px 8px; background: linear-gradient(#30333a,#1a1c22); box-shadow: 0 14px 28px #0006, inset 0 1px #ffffff12; }
.printer-brand, .printer-status { position: absolute; top: 19px; display: flex; gap: 7px; align-items: center; color: #a3a6ad; font: 9px ui-monospace, monospace; letter-spacing: .13em; }
.printer-brand { left: 20px; } .printer-status { right: 20px; }
.printer-status i { width: 5px; height: 5px; border-radius: 50%; background: #8ac8a1; }
[data-state="printing"] .printer-status i { animation: printer-pulse 700ms ease-in-out infinite alternate; }
.printer-slot { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 13px; background: #08090b; border-radius: 7px; box-shadow: inset 0 3px 4px #000, 0 1px #ffffff12; }
.paper-viewport { position: absolute; top: 96px; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(240px, calc(100% - 48px)); overflow: hidden; scrollbar-width: none; }
.paper-viewport::-webkit-scrollbar { display: none; }
[data-state="printed"] .paper-viewport { overflow-y: auto; }
.receipt-paper { margin: 0; padding: 34px 19px 28px; color: #36352f; background: #faf9f3; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; transform: translateY(-110%); box-shadow: 0 16px 25px #0004; clip-path: polygon(0 0,100% 0,100% 99%,98% 100%,96% 99%,94% 100%,92% 99%,90% 100%,88% 99%,86% 100%,84% 99%,82% 100%,80% 99%,78% 100%,76% 99%,74% 100%,72% 99%,70% 100%,68% 99%,66% 100%,64% 99%,62% 100%,60% 99%,58% 100%,56% 99%,54% 100%,52% 99%,50% 100%,48% 99%,46% 100%,44% 99%,42% 100%,40% 99%,38% 100%,36% 99%,34% 100%,32% 99%,30% 100%,28% 99%,26% 100%,24% 99%,22% 100%,20% 99%,18% 100%,16% 99%,14% 100%,12% 99%,10% 100%,8% 99%,6% 100%,4% 99%,2% 100%,0 99%); }
[data-state="printing"] .receipt-paper { animation: receipt-feed var(--print-duration) linear forwards; }
[data-state="printed"] .receipt-paper { transform: translateY(0); }
.receipt-paper header { text-align: center; }
.receipt-symbol { font-size: 26px; line-height: 1; }
.receipt-paper h2 { font: bold 16px/1.4 ui-monospace, monospace; letter-spacing: -.05em; margin: 10px 0 4px; }
.receipt-paper header p { font-size: 8px; letter-spacing: .08em; margin: 0; }
.receipt-rule { border-top: 1px dashed #aaa79c; margin: 18px 0; }
.receipt-meta { display: flex; justify-content: space-between; font-size: 9px; }
.receipt-items { list-style: none; padding: 0; margin: 0; }
.receipt-items li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.receipt-items small { display: block; font-size: 8px; color: #858176; margin-top: 2px; }
.receipt-totals { margin: 0; }.receipt-totals div { display: flex; justify-content: space-between; margin: 7px 0; }.receipt-totals dd { margin: 0; }
.receipt-totals .total { font-size: 15px; font-weight: 700; margin-top: 16px; }
.receipt-thanks { text-align: center; font-size: 11px; line-height: 1.8; }
.receipt-barcode { height: 32px; margin: 20px 14px; background: repeating-linear-gradient(90deg,#36352f 0 2px,transparent 2px 4px,#36352f 4px 5px,transparent 5px 9px,#36352f 9px 12px,transparent 12px 15px); }
.receipt-paper footer { text-align: center; font-size: 7px; line-height: 1.8; color: #858176; }
@keyframes receipt-feed { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes printer-pulse { to { opacity: .3; } }
:root[data-preview] body { background: #15171b; }
:root[data-preview] .receipt-printer-stage { width: 1680px; height: 1120px; transform: scale(.357142857); transform-origin: top left; border-radius: 0; }
:root[data-preview] .printer-housing { width: 530px; }
:root[data-preview] .paper-viewport { width: 410px; }
@media (prefers-reduced-motion: reduce) { [data-state="printing"] .receipt-paper { transform: none; } }