html, body { margin: 0; }
* { box-sizing: border-box; }
.qr-page {
  min-height: 100vh;
  padding: 0 20px 48px;
  background: #f8f2e4;
  color: #183c35;
  font-family: Arial, Helvetica, sans-serif;
}

.qr-topline {
  color: #c99657;
  text-align: center;
  letter-spacing: 1.2rem;
  padding-top: 16px;
  font-size: 12px;
}

.qr-header,
.qr-sheet,
.qr-footer { max-width: 1180px; margin-inline: auto; }

.qr-header { padding: 24px 0 32px; }
.qr-back { color: #ad4640; font-size: 14px; font-weight: 700; text-decoration: none; }
.qr-back:hover { text-decoration: underline; }
.qr-header-copy { max-width: 700px; margin: 36px 0 24px; }
.qr-eyebrow { color: #b9574d; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; }
.qr-header h1 { font-family: Georgia, serif; font-size: clamp(36px, 5vw, 60px); line-height: 1.06; margin: 12px 0 18px; font-weight: 400; }
.qr-header p { font-size: 16px; line-height: 1.7; max-width: 620px; margin: 0; color: #4e675c; }
.qr-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qr-actions > span { color: #6f8177; font-size: 13px; }
.qr-print { appearance: none; border: 0; border-radius: 999px; background: #b94e45; color: #fffaf1; font: 700 14px Arial, sans-serif; padding: 15px 22px; cursor: pointer; }
.qr-print:hover { background: #963b34; }
.qr-print span { margin-left: 9px; }
.qr-sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.qr-ticket { min-width: 0; display: flex; align-items: center; flex-direction: column; padding: 16px 10px 13px; background: #fffdf6; border: 1px solid #dcc9a8; border-radius: 12px; box-shadow: 0 4px 14px #3e53361a; text-align: center; }
.qr-ticket-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 4px; color: #b34c42; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.qr-ticket-star { color: #c49a58; font-size: 16px; }
.qr-ticket img { width: min(100%, 154px); height: auto; aspect-ratio: 1; margin: 10px 0 7px; image-rendering: pixelated; }
.qr-ticket-day { color: #183c35; font-family: Georgia, serif; font-size: 16px; }
.qr-ticket small { display: block; max-width: 100%; overflow-wrap: anywhere; margin-top: 6px; color: #728078; font-size: 9px; line-height: 1.25; }
.qr-footer { padding-top: 32px; color: #60786b; text-align: center; font-family: Georgia, serif; font-style: italic; }
.qr-footer span { color: #b94e45; margin-right: 5px; }

@media (max-width: 1000px) { .qr-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 660px) { .qr-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qr-header-copy { margin-top: 26px; } }

@page { size: A4 portrait; margin: 12mm; }
@media print {
  html, body, .qr-page { background: white !important; color: #183c35 !important; margin: 0; padding: 0; }
  .qr-topline, .qr-header, .qr-footer { display: none !important; }
  .qr-sheet { width: 186mm; max-width: none; display: grid; grid-template-columns: repeat(4, 43.5mm); grid-template-rows: repeat(6, 42mm); gap: 3mm 4mm; margin: 0; }
  .qr-ticket { width: 43.5mm; height: 42mm; box-shadow: none; border: 1px dashed #999; border-radius: 0; padding: 2mm 1.5mm; break-inside: avoid; }
  .qr-ticket-head { font-size: 7pt; }
  .qr-ticket-star { font-size: 9pt; }
  .qr-ticket img { width: 27mm; height: 27mm; margin: 0; }
  .qr-ticket-day { font-size: 8pt; }
  .qr-ticket small { display: none; }
}