:root { --navy: #071f22; --blue: #103b3b; --paper: #f8f3e7; --ink: #123034; --muted: #697978; --green: #176347; --red: #b22e36; --gold: #cda137; --pine: #1a6046; --pine-dark: #0f4a38; --glow: #27604b; --corner: #7a2029; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 10% 5%, var(--glow) 0, transparent 31rem), radial-gradient(circle at 92% 88%, var(--corner) 0, transparent 35rem), #071f22; font-family: Manrope, sans-serif; }
body::before { content: '✦  ❄  ✦  ❄  ✦  ❄  ✦  ❄  ✦'; position: fixed; inset: 20px 0 auto; color: #f0cf7a80; text-align: center; font-size: 22px; letter-spacing: 3vw; white-space: nowrap; pointer-events: none; }
.page-shell { min-height: 100vh; display: grid; place-content: center; padding: 4vh 4vw; }
.boarding-pass { width: min(1440px, 92vw); min-height: min(740px, 88vh); display: grid; grid-template-columns: 1fr 320px; overflow: hidden; position: relative; background: var(--paper); border: 1px solid #e8d9ae; border-radius: 13px; box-shadow: 0 28px 70px #0009; }
.boarding-pass::before, .boarding-pass::after { content: ''; position: absolute; left: 0; right: 0; height: 58px; z-index: 3; pointer-events: none; background:
  radial-gradient(circle at 8% 45%, #b82e37 0 8px, #e86965 8.5px 10px, transparent 10.5px),
  radial-gradient(circle at 14% 25%, #cf9e35 0 7px, #f5d67a 7.5px 9px, transparent 9.5px),
  radial-gradient(circle at 89% 25%, #cf9e35 0 7px, #f5d67a 7.5px 9px, transparent 9.5px),
  radial-gradient(circle at 94% 47%, #b82e37 0 8px, #e86965 8.5px 10px, transparent 10.5px),
  repeating-linear-gradient(145deg, transparent 0 8px, var(--pine) 9px 11px, transparent 12px 18px) left top / 27% 48px no-repeat,
  repeating-linear-gradient(35deg, transparent 0 8px, var(--pine) 9px 11px, transparent 12px 18px) right top / 27% 48px no-repeat,
  linear-gradient(90deg, var(--pine-dark) 0 27%, transparent 33% 67%, var(--pine-dark) 73% 100%) top / 100% 4px no-repeat;
  filter: drop-shadow(0 2px 2px #06251b55); }
.boarding-pass::before { top: 0; }.boarding-pass::after { bottom: 0; transform: rotate(180deg); }
.pass-main { padding: clamp(58px, 8vh, 78px) clamp(28px, 4vw, 64px) clamp(55px, 7vh, 68px); position: relative; z-index: 1; background: linear-gradient(135deg, transparent 0 84%, #e9e1cc 84.1% 84.7%, transparent 84.8%); }
.topline, .passenger-row, .details, .journey { display: flex; align-items: center; }
 .topline { justify-content: space-between; border-bottom: 1px solid #d9d2c6; padding-bottom: clamp(15px, 2.5vh, 24px); }.brand { font-weight: 800; letter-spacing: .08em; font-size: clamp(15px, 1.3vw, 19px); }.brand-mark { color: var(--gold); font-size: 26px; vertical-align: -2px; }.pass-type, .label, .stub-label { font: 500 10px 'DM Mono', monospace; letter-spacing: .11em; color: var(--muted); margin: 0; }.pass-type::before { content: '❄ '; color: var(--red); }
.journey { justify-content: space-between; margin: clamp(26px, 5vh, 57px) 0; }.journey strong { display: block; font-size: clamp(42px, 5.2vw, 70px); line-height: .95; letter-spacing: -.07em; }.city { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }.to { text-align: right; }.flight-line { width: 44%; flex-direction: column; gap: 6px; color: #6a7781; font: 500 11px 'DM Mono', monospace; letter-spacing: .08em; }.flight-line::before, .flight-line::after { content: ''; height: 1px; background: #b8c1c4; width: 100%; }.plane { color: var(--red); font-size: 22px; transform: rotate(45deg); }
.passenger-row { border-top: 1px dashed #c8c0b1; border-bottom: 1px dashed #c8c0b1; padding: clamp(16px, 2.6vh, 25px) 0; gap: 22px; }.portrait-wrap { width: 140px; height: 140px; flex: 0 0 140px; overflow: hidden; border-radius: 50%; background: #c8d5db; border: 3px solid var(--gold); }.portrait-wrap[hidden] { display: none; }.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; }.passenger h1 { margin: 4px 0 2px; font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.04em; }.passenger p { margin: 0; color: var(--muted); font-size: 11px; }.status-stamp { position: absolute; z-index: 2; left: 50%; top: 53%; min-width: 0; width: min(78%, 610px); padding: 12px 20px 10px; text-align: center; border: clamp(4px, .55vw, 8px) solid currentColor; border-radius: 5px; transform: translate(-50%, -50%) rotate(-9deg); color: var(--green); background: #f8f3e7d9; box-shadow: 0 2px 0 #f8f3e7, 0 5px 12px #142c2633; pointer-events: none; }.status-stamp span { display: block; font: 500 clamp(48px, 8vw, 108px) 'DM Mono', monospace; line-height: .86; letter-spacing: -.09em; }.status-stamp small { display: block; font: 500 clamp(8px, .85vw, 13px) 'DM Mono', monospace; letter-spacing: .14em; margin-top: 9px; }.status-stamp.denied { color: var(--red); }
.details { justify-content: space-between; padding: clamp(20px, 3.5vh, 32px) 0 clamp(18px, 3vh, 25px); }.details strong { display: block; margin-top: 5px; font: 500 clamp(21px, 2.25vw, 29px) 'DM Mono', monospace; }.signature { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }.signature .label { align-self: flex-end; }.signature img { max-width: 280px; height: 62px; object-fit: contain; object-position: right bottom; filter: contrast(1.1); }
.pass-stub { position: relative; z-index: 1; padding: clamp(58px, 8vh, 78px) 34px clamp(55px, 7vh, 68px); color: #f5f0e6; background: linear-gradient(150deg, var(--pine), var(--blue) 55%, var(--pine-dark)); border-left: 2px dashed #c0b6a4; display: flex; flex-direction: column; }.pass-stub::after { content: '❄'; position: absolute; bottom: 48px; right: 20px; color: #d4ad52; font-size: 26px; opacity: .75; }.stub-brand { margin: 0 0 44px; color: #f0c95f; font-weight: 800; letter-spacing: .13em; line-height: 1.15; font-size: 15px; }.stub-label { color: #b0c9bb; margin-top: 18px; }.pass-stub strong { font-size: 13px; margin-top: 4px; letter-spacing: .04em; }.barcode { display: flex; align-items: stretch; height: 102px; margin-top: auto; gap: 3px; }.barcode i { background: #f5f0e6; width: 3px; }.barcode i:nth-child(3n) { width: 7px; }.barcode i:nth-child(4n) { height: 80%; }.pass-stub small { margin-top: 8px; font: 10px 'DM Mono', monospace; letter-spacing: .1em; }
@media (max-width: 700px) { .boarding-pass { display: block; }.boarding-pass::before, .boarding-pass::after { height: 38px; background-size: auto, auto, auto, auto, 29% 32px, 29% 32px, 100% 3px; }.pass-main { padding: 48px 22px; }.pass-stub { min-height: 230px; padding: 48px 22px; }.stub-brand { margin-bottom: 15px; }.barcode { margin-top: 20px; }.journey strong { font-size: 35px; }.flight-line { width: 29%; }.passenger-row { align-items: flex-start; }.portrait-wrap { width: 112px; height: 112px; flex-basis: 112px; }.status-stamp { width: 90%; top: 51%; padding: 10px; }.status-stamp span { font-size: clamp(37px, 11vw, 62px); }.status-stamp small { font-size: 7px; }.details strong { font-size: 16px; }.signature img { max-width: 220px; height: 52px; } }