body { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: #f2f3f5; }
.card {
  width: min(100%, 560px);
  aspect-ratio: 148 / 210;
  padding: clamp(20px, 6vw, 52px);
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: 0 4px 24px #0000000d;
  text-align: center;
}
#card-content { width: 100%; }
.gift-icon { display: grid; place-items: center; width: clamp(64px, 18vw, 112px); aspect-ratio: 1; margin: 0 auto 24px; border-radius: 50%; background: var(--line-green-light); color: var(--line-green); }
.gift-icon svg { width: 58%; height: 58%; }
h1 { margin: 0 auto 24px; font-size: clamp(17px, 4vw, 28px); font-weight: 700; line-height: 1.45; letter-spacing: -.025em; }
.card-line { display: block; white-space: nowrap; }
.card-instruction { max-width: 100%; margin: 0 auto 24px; color: var(--text-secondary); font-size: clamp(12px, 3vw, 16px); line-height: 1.8; }
.nowrap { white-space: nowrap; }
#qr-code { width: min(100%, clamp(112px, 38vw, 224px)); margin: auto; }
#qr-code svg { display: block; width: 100%; height: auto; }
#card-error { font-size: 16px; color: var(--text-secondary); }
@media (max-width: 360px) {
  body { padding: 16px; }
  .gift-icon { margin-bottom: 16px; }
  .card-instruction { margin-bottom: 16px; }
}
@page { size: A5 portrait; margin: 0; }
@media print {
  html, body { width: 148mm; height: 210mm; min-height: 0; background: #fff; color: #000; }
  body { display: block; padding: 0; }
  .card { width: 148mm; height: 210mm; aspect-ratio: auto; padding: 14mm; border: 0; box-shadow: none; break-inside: avoid; }
  .gift-icon { width: 27mm; margin-bottom: 7mm; background: none; color: #000; }
  h1 { font-size: 20pt; margin-bottom: 5mm; }
  .card-instruction { font-size: 12pt; margin-bottom: 7mm; color: #333; }
  #qr-code { width: 60mm; }
}