:root { color-scheme: light; --ink:#13251d; --muted:#647269; --paper:#f6f4ee; --panel:#fff; --line:#dfe3dc; --green:#176b45; --green-soft:#e5f1e9; --amber:#9a5b00; --amber-soft:#fff1d4; --danger:#9f3030; --shadow:0 18px 50px rgba(31,50,40,.10); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:"Avenir Next","PingFang SC","Noto Sans SC",sans-serif; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:22px; }
.login-card { width:100%; max-width:400px; padding:28px; background:white; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.login-title { margin:34px 0 8px; font-size:32px; }
.login-copy,.login-warning { color:var(--muted); font-size:14px; line-height:1.6; }
.login-card label { display:block; margin:24px 0 8px; font-size:13px; font-weight:700; }
.login-card input { width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfa; }
.login-warning { margin:20px 0 0; font-size:12px; }
button,input,textarea { font:inherit; }
.copy-helper { position:fixed; top:0; left:-9999px; width:1px; height:1px; opacity:0; }
button { cursor:pointer; }
.shell { width:100%; max-width:520px; margin:0 auto; min-height:100vh; padding:24px 18px 48px; }
.upload-shell .card { margin-top:28px; }
.brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:650; letter-spacing:.04em; }
.brand-logo { width:28px; height:28px; display:block; border-radius:6px; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; }
h1 { margin:36px 0 10px; font-family:"Songti SC","STSong",serif; font-size:clamp(34px,10vw,48px); line-height:1.06; letter-spacing:-.04em; text-wrap:balance; }
.lede { margin:0 0 26px; color:var(--muted); line-height:1.7; font-size:15px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow); }
.step { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-weight:700; }
.step-num { width:26px; height:26px; border-radius:50%; background:var(--ink); color:white; display:grid; place-items:center; font-size:13px; }
.drop { display:grid; place-items:center; min-height:44px; padding:0 12px; text-align:center; border:1px solid var(--line); border-radius:12px; background:#fafbf8; position:relative; overflow:hidden; }
.scan-button { width:100%; margin:0 0 12px; padding:14px; border:0; border-radius:14px; background:var(--ink); color:#fff; font-weight:750; }
.scanner { position:fixed; z-index:20; inset:0; padding:20px; display:grid; place-items:center; background:rgba(0,0,0,.88); }
.scanner[hidden] { display:none; }
.scanner-panel { width:min(100%,440px); color:#fff; text-align:center; position:relative; }
.scanner-panel video { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px; background:#111; }
.scanner-frame { position:absolute; top:20%; left:15%; width:70%; aspect-ratio:1; border:3px solid #58a7ff; border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.18); pointer-events:none; }
.scanner-panel button { width:100%; margin-top:8px; padding:13px; border:0; border-radius:12px; font-weight:700; }
.drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop strong { font-size:14px; }
.hint { color:var(--muted); font-size:12px; line-height:1.35; }
.corrected-box { margin-top:14px; padding:14px; display:grid; justify-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; background:#fafbf8; }
.corrected-box[hidden] { display:none; }
.corrected-box canvas { display:block; width:auto; max-width:100%; aspect-ratio:1; background:#fff; }
.corrected-box span { color:var(--muted); font-size:12px; text-align:center; }
.field { margin-top:16px; }
.field label { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
textarea,input[type=number] { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; background:#fbfcfa; color:var(--ink); }
textarea { min-height:88px; resize:vertical; }
.quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick button,.template-picker button { padding:13px; border:1px solid var(--line); background:white; border-radius:12px; color:var(--ink); font-weight:700; }
.quick button.active,.template-picker button.active { border-color:var(--green); background:var(--green-soft); color:var(--green); }
.card-type-picker button[data-card-type="centurion"] { grid-column:1 / -1; }
.template-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.live-countdown { margin-top:12px; min-height:58px; padding:12px 14px; border-radius:12px; display:flex; align-items:baseline; justify-content:center; gap:7px; background:var(--green-soft); color:var(--green); font-size:14px; }
.live-countdown[hidden] { display:none; }
.live-countdown strong { font-size:28px; line-height:1; font-variant-numeric:tabular-nums; }
.live-countdown.expiring { background:var(--amber-soft); color:var(--amber); }
.live-countdown.expired { background:#f8e8e7; color:var(--danger); font-weight:700; }
.primary,.secondary,.danger { width:100%; border:0; border-radius:14px; padding:15px; font-weight:750; margin-top:14px; }
.primary { background:var(--ink); color:white; }
.primary:disabled { opacity:.45; cursor:not-allowed; }
.secondary { background:var(--green-soft); color:var(--green); }
.danger { background:#f8e8e7; color:var(--danger); }
.status { margin-top:14px; padding:11px 13px; border-radius:12px; background:#f1f3ef; color:var(--muted); font-size:13px; line-height:1.55; }
.status.good { background:var(--green-soft); color:var(--green); }
.status.warn { background:var(--amber-soft); color:var(--amber); }
.share-box { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.share-url { overflow-wrap:anywhere; font-size:13px; color:var(--muted); }
.privacy { margin:18px 4px 0; display:flex; gap:9px; color:var(--muted); font-size:12px; line-height:1.55; }
.viewer { text-align:center; }
.viewer h1 { margin-top:28px; }
.qr-stage { width:86vw; max-width:360px; aspect-ratio:1; margin:24px auto 16px; background:white; border:1px solid var(--line); border-radius:26px; display:grid; place-items:center; padding:24px; box-shadow:var(--shadow); }
.qr-stage #qr,.qr-stage #qr img,.qr-stage #qr canvas { width:100%!important; height:100%!important; }
.qr-stage.expired #qr { display:none; }
.empty-mark { font-family:"Songti SC",serif; color:#9da79f; font-size:19px; line-height:1.5; }
.count { font-variant-numeric:tabular-nums; font-size:50px; font-weight:700; letter-spacing:-.06em; margin:4px 0; }
.badge { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 11px; font-size:13px; font-weight:700; background:var(--green-soft); color:var(--green); }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.warn { background:var(--amber-soft); color:var(--amber); }
.badge.off { background:#eceeea; color:#6d756f; }
.viewer-note { color:var(--muted); font-size:13px; line-height:1.6; max-width:330px; margin:14px auto 0; }
.viewer-body { min-height:100vh; background:#111; }
.viewer-app { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#fff; overflow:hidden; }
.venue-bar { height:76px; padding:8px 20px 0; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; color:#07090c; background:#fff; font-size:20px; font-weight:700; text-align:center; }
.venue-back { justify-self:start; font-family:Arial,sans-serif; font-size:38px; font-weight:200; line-height:1; color:#777d84; }
.venue-more { justify-self:end; letter-spacing:2px; font-size:18px; color:#080a0d; transform:translateY(4px); }
.venue-scene { min-height:calc(100vh - 76px); padding:6.2vh 9.4% 24px; text-align:center; background:radial-gradient(ellipse at 82% 57%,rgba(72,233,228,.72),transparent 34%),radial-gradient(ellipse at 8% 42%,rgba(113,211,241,.74),transparent 43%),radial-gradient(ellipse at 45% 18%,rgba(152,141,246,.58),transparent 42%),linear-gradient(172deg,#9286f8 0%,#70aaf2 43%,#58d9e8 68%,#5f91f4 100%); position:relative; }
.venue-scene::before { content:""; position:absolute; inset:0; background:linear-gradient(116deg,transparent 0 53%,rgba(255,255,255,.10) 53% 70%,transparent 70%); pointer-events:none; }
.venue-card { position:relative; width:100%; max-width:422px; aspect-ratio:768/970; height:auto; min-height:0; margin:0 auto; padding:0; background:#fffefa; border:1px solid rgba(81,89,104,.10); border-radius:24px; box-shadow:0 8px 22px rgba(45,58,136,.08); }
.venue-qr { position:absolute; top:12%; left:50%; width:60%; max-width:none; aspect-ratio:1; margin:0; padding:0; display:grid; place-items:center; background:white; transform:translateX(-50%); }
.scan-corner { position:absolute; z-index:2; width:14%; height:14%; pointer-events:none; border-color:#398cea; border-style:solid; border-width:0; }
.scan-corner.top-left { top:-10%; left:-10%; border-top-width:3px; border-left-width:3px; border-radius:12px 0 0; }
.scan-corner.top-right { top:-10%; right:-10%; border-top-width:3px; border-right-width:3px; border-radius:0 12px 0 0; }
.scan-corner.bottom-left { bottom:-10%; left:-10%; border-bottom-width:3px; border-left-width:3px; border-radius:0 0 0 12px; }
.scan-corner.bottom-right { right:-10%; bottom:-10%; border-right-width:3px; border-bottom-width:3px; border-radius:0 0 12px; }
.venue-qr .top-left { top:0; left:0; }
.venue-qr .top-right { top:0; right:0; }
.venue-qr .bottom-left { bottom:0; left:0; }
.venue-qr .bottom-right { bottom:0; right:0; }
.venue-qr #qr { width:100%!important; height:100%!important; display:grid; place-items:center; }
.venue-qr #qr img,.venue-qr #qr canvas { width:100%!important; height:100%!important; display:block; object-fit:contain; }
.venue-qr #qr img.matrix-image { width:auto!important; height:auto!important; image-rendering:pixelated; }
.venue-qr.expired #qr { display:none; }
.venue-copy { position:absolute; top:68.7%; left:3%; right:3%; }
.venue-card.is-expired .venue-copy { display:none; }
.venue-card.is-expired .venue-qr { top:50%; left:50%; transform:translate(-50%,-50%); }
.venue-card.is-expired .empty-mark { color:#8f9992; font-family:"Avenir Next","PingFang SC","Noto Sans SC",sans-serif; font-size:16px; }
.venue-instruction { margin:0; font-size:clamp(15px,4.35vw,19px); line-height:1.45; color:#111315; white-space:nowrap; font-weight:400; }
.venue-instruction strong { color:#368ccf; font-weight:400; font-variant-numeric:tabular-nums; }
.venue-note { margin:15px 0 0; font-size:clamp(12px,3.45vw,15px); line-height:1.45; color:#34383b; font-weight:400; }
.venue-badge { display:inline-flex; align-items:center; gap:6px; margin-top:22px; padding:7px 12px; border-radius:999px; background:#e6f7ef; color:#18724a; font-size:12px; font-weight:700; }
.venue-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.venue-badge.warn { background:#fff0d4; color:#9a5b00; }
.venue-badge.off { background:#eef0ef; color:#6f7772; }
@media (max-width:360px) { .venue-instruction { font-size:15px; } .venue-note { font-size:12px; } }
.gf-body { background:#f4f4f4; }
.gf-app { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#f4f4f4; color:#111; overflow:hidden; }
.gf-header { height:92px; padding:24px 20px 0; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; background:#fff; border-bottom:1px solid #ddd; text-align:center; font-size:21px; font-weight:500; }
.gf-back { justify-self:start; color:#73787b; font-family:Arial,sans-serif; font-size:42px; font-weight:200; line-height:1; }
.gf-page { padding:20px 14px 36px; }
.gf-benefit { min-height:108px; padding:23px 20px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(110deg,#f8fff8,#f2f9ef); border-radius:18px; box-shadow:0 1px 5px rgba(0,0,0,.04); }
.gf-benefit strong { font-size:22px; font-weight:500; }
.gf-benefit span { color:#42b949; font-size:19px; }
.gf-ticket { position:relative; min-height:555px; margin-top:18px; padding:27px 14px 24px; overflow:hidden; background:linear-gradient(160deg,rgba(235,235,235,.8),rgba(255,255,255,.96) 47%); border-radius:18px; text-align:center; }
.gf-ticket::after { content:"✈"; position:absolute; z-index:0; top:72px; right:-35px; color:#d9d9d9; font-size:160px; opacity:.48; transform:rotate(-8deg); }
.gf-time,.gf-greeting,.gf-lounge,.gf-qr,.gf-use,.gf-refresh,.gf-brand { position:relative; z-index:1; }
.gf-time { font-size:26px; line-height:1.25; font-weight:800; letter-spacing:.01em; }
.gf-greeting { margin-top:12px; font-size:20px; font-weight:650; }
.gf-greeting em { color:#d94b4b; font-style:normal; }
.gf-lounge { display:block; margin:7px auto 0; font-size:20px; line-height:1.35; }
.gf-plane { display:none; }
.gf-qr { width:210px; height:210px; margin:48px auto 30px; padding:8px; background:#fff; }
.gf-qr img,.gf-qr canvas { width:100%!important; height:100%!important; display:block; }
.gf-use { margin:0; font-size:17px; font-weight:650; }
.gf-refresh { margin:20px 0 0; font-size:19px; }
.gf-brand { margin:22px 0 0; font-size:19px; }
.gf-brand b { color:#c60018; font-size:25px; }
.gf-info { margin-top:18px; padding:20px; background:#fff; border-radius:14px; }
.gf-info h2 { margin:0 0 24px; padding-bottom:22px; border-bottom:1px solid #ddd; font-size:22px; font-weight:500; }
.gf-info dl { margin:0; display:grid; grid-template-columns:112px 1fr; row-gap:24px; font-size:16px; }
.gf-info dt { color:#999; }
.gf-info dd { margin:0; text-align:right; line-height:1.45; }
.gf-skin-view { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#f4f4f4; }
.gf-skin { position:relative; width:100%; }
.gf-skin>img { display:block; width:100%; height:auto; }
.gf-skin-entitlement { position:absolute; z-index:2; top:11.4%; left:4.5%; width:91%; min-height:3.5%; padding-top:1.5%; padding-left:2.6%; display:flex; align-items:flex-start; box-sizing:border-box; color:#111; background:linear-gradient(100deg,#f8fdf7 0%,#f5faf3 100%); font-size:clamp(16px,4.35vw,22px); line-height:1.2; font-weight:400; white-space:nowrap; }
.gf-skin-time { position:absolute; top:23.5%; left:22%; width:63%; color:#111; text-align:center; font-size:clamp(18px,5.4vw,28px); line-height:1; font-weight:650; white-space:nowrap; }
.gf-skin-greeting { position:absolute; top:27.65%; left:18%; width:64%; color:#111; text-align:center; font-size:clamp(15px,4.15vw,22px); line-height:1; font-weight:650; white-space:nowrap; }
.gf-skin-greeting span { color:#d94b4b; }
.gf-skin-lounge { position:absolute; top:31.1%; left:10%; width:80%; color:#111; text-align:center; font-size:clamp(15px,4.1vw,22px); line-height:1.25; font-weight:700; white-space:nowrap; }
.gf-skin-qr { position:absolute; top:35.8%; left:27%; width:46%; aspect-ratio:1; padding:1%; background:#fff; }
.gf-skin-qr { display:grid; place-items:center; }
.gf-skin-qr img,.gf-skin-qr canvas { display:block; width:100%!important; height:100%!important; object-fit:contain; }
.gf-skin-qr img.matrix-image { width:auto!important; height:auto!important; image-rendering:pixelated; }
/* Replace the baked-in information rows so wrapped values set each row's height. */
.gf-skin-info { position:relative; z-index:1; width:94%; margin:-26.4% 3% 0; padding:1.5% 4% 5%; display:grid; row-gap:clamp(8px,2.5vw,13px); border-radius:0 0 16px 16px; background:#fff; color:#111; font-size:clamp(13px,3.45vw,18px); line-height:1.35; }
.gf-skin-info-row { display:grid; grid-template-columns:38% minmax(0,1fr); align-items:start; }
.gf-skin-info-row dt { color:#999; white-space:nowrap; }
.gf-skin-info-row dd { min-width:0; margin:0; text-align:right; overflow-wrap:anywhere; }
.lounge-code-body { background:#161009; }
.lounge-code-view { width:100%; max-width:520px; min-height:100vh; margin:0 auto; overflow:hidden; color:#171411; background:radial-gradient(circle at 90% 2%,rgba(207,164,111,.42),transparent 30%),linear-gradient(145deg,#302416 0%,#171009 58%,#0e0a06 100%); }
.lounge-code-header { height:116px; padding:20px 28px 0; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; color:#fff; text-align:center; }
.lounge-code-header>span { justify-self:start; font-family:Arial,sans-serif; font-size:52px; font-weight:200; line-height:1; }
.lounge-code-header strong { font-size:24px; font-weight:500; }
.lounge-code-scene { min-height:calc(100vh - 116px); padding:22px 20px 80px; background:linear-gradient(137deg,transparent 0 18%,rgba(210,180,130,.09) 18.2% 18.5%,transparent 18.7% 65%,rgba(210,180,130,.07) 65.2% 65.5%,transparent 65.7%); }
.lounge-code-card { width:100%; overflow:hidden; background:#fff; border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.lounge-barcode-wrap { padding:44px 24px 26px; border-bottom:1px solid #f0f0f0; text-align:center; }
.lounge-barcode-wrap canvas { display:block; max-width:100%; margin:0 auto; }
.lounge-barcode-wrap p { margin:14px 0 0; color:#4d4a49; font-size:17px; letter-spacing:.04em; }
.lounge-code-details { padding:28px 24px 26px; text-align:center; }
.lounge-code-details>strong { display:block; margin-bottom:14px; font-size:21px; font-weight:650; }
.lounge-code-details time { display:block; margin-bottom:24px; font-size:20px; font-variant-numeric:tabular-nums; }
.lounge-code-qr { width:190px; height:190px; margin:0 auto; display:grid; place-items:center; background:#fff; }
.lounge-code-qr canvas,.lounge-code-qr img { display:block; max-width:100%; max-height:100%; }
.lounge-code-footer { min-height:74px; padding:17px 18px; display:flex; align-items:center; gap:8px; border-top:1px solid #f0f0f0; font-size:15px; }
.lounge-code-footer b { font-weight:500; }
.lounge-card-icon { width:30px; height:20px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#171717,#5d5d5d); border-radius:2px; font-size:11px; }
.lounge-code-footer em { padding:2px 9px; border:1px solid #777; color:#444; font-style:normal; }
.lounge-code-footer button { margin-left:auto; padding:7px 17px; border:0; border-radius:999px; color:#a88755; background:#fffaf3; font:inherit; }
.lounge-skin-view { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#140e07; }
.lounge-skin { --design-width:1280; --design-height:2624; position:relative; width:100%; aspect-ratio:1280/2624; }
.lounge-skin>img { display:block; width:100%; height:auto; }
.lounge-skin-barcode { position:absolute; top:calc(384 / 2624 * 100%); left:calc(180 / 1280 * 100%); width:calc(920 / 1280 * 100%); height:calc(172 / 2624 * 100%); display:grid; place-items:center; overflow:hidden; background:#fff; }
.lounge-skin-barcode svg { display:block; width:100%; height:100%; background:#fff; shape-rendering:crispEdges; }
.lounge-skin-barcode-text { position:absolute; top:calc(604 / 2624 * 100%); left:calc(220 / 1280 * 100%); width:calc(840 / 1280 * 100%); margin:0; color:#4d4a49; text-align:center; font-size:clamp(15px,3.65vw,19px); line-height:1.4; letter-spacing:0; }
.lounge-barcode-mask { font-family:Arial,"Helvetica Neue",sans-serif; font-weight:400; letter-spacing:.12em; }
.lounge-skin-name { position:absolute; top:calc(768 / 2624 * 100%); left:calc(230 / 1280 * 100%); width:calc(820 / 1280 * 100%); min-height:calc(64 / 2624 * 100%); display:flex; align-items:center; justify-content:center; color:#171411; text-align:center; font-size:clamp(16px,3.2vw,18px); line-height:1.3; }
.lounge-skin-time { position:absolute; top:calc(859 / 2624 * 100%); left:calc(230 / 1280 * 100%); width:calc(820 / 1280 * 100%); min-height:calc(72 / 2624 * 100%); display:flex; align-items:center; justify-content:center; overflow:visible; color:#171411; text-align:center; font-size:clamp(16px,3.3vw,18px); line-height:1.3; font-variant-numeric:tabular-nums; }
.lounge-skin-time-seconds { display:inline-block; margin-left:1px; padding-bottom:.08em; font-size:1.35em; line-height:1.08; }
.lounge-skin-qr-shell { position:absolute; top:calc(926 / 2624 * 100%); left:calc(367 / 1280 * 100%); width:calc(546 / 1280 * 100%); aspect-ratio:1; background:#fff; }
.lounge-skin-qr { position:absolute; inset:0; display:grid; place-items:center; background:#fff; }
.lounge-skin-qr canvas,.lounge-skin-qr img { display:block; max-width:100%; max-height:100%; }
.lounge-skin-qr-logo { position:absolute; z-index:3; top:50%; left:50%; width:18%; height:18%; border:3px solid #fff; border-radius:16%; transform:translate(-50%,-50%); }
/* Cover the baked-in footer and center short and wrapped card names with their icon and badge. */
.lounge-skin-card-footer { position:absolute; top:calc(1574 / 2624 * 100%); left:calc(102 / 1280 * 100%); width:calc(838 / 1280 * 100%); min-height:clamp(28px,8vw,42px); display:flex; align-items:center; gap:clamp(3px,1.1vw,6px); transform:translateY(-50%); background:#fff; }
.lounge-skin-card-image { flex:0 0 calc(76 / 838 * 100%); aspect-ratio:76/48; background:#fff url('/assets/lounge-code-clean-v2.png') no-repeat; background-size:1684.2105% auto; background-position:8.4718% 60.132%; }
.lounge-skin-card-footer[data-card-type="infinite"] .lounge-skin-card-image { background-image:url('/assets/lounge-cards-reference.jpg'); background-size:473.6842% auto; background-position:8.6854% 57.2922%; }
.lounge-skin-card-footer[data-card-type="centurion"] .lounge-skin-card-image { background-image:url('/assets/lounge-centurion-clean.png'); background-size:106.3123% auto; background-position:46.0526% 64.8649%; }
.lounge-skin-card-last4 { flex:0 1 auto; min-width:0; margin:0; color:#171411; font-size:clamp(9px,2.65vw,14px); line-height:1.25; font-weight:400; overflow-wrap:anywhere; }
.lounge-skin-card-role { flex:0 0 auto; padding:.04em .45em; border:1px solid #999; color:#777; font-size:clamp(9px,2.65vw,14px); line-height:1.25; white-space:nowrap; }

.dragonpass-body { background:#004875; }
.dragonpass-skin-view { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#004875; }
.dragonpass-skin { --design-width:1179; --design-height:2406; position:relative; width:100%; aspect-ratio:1179/2406; }
.dragonpass-skin>img { display:block; width:100%; height:auto; }
.dragonpass-time { position:absolute; top:calc(680 / 2406 * 100%); left:calc(285 / 1179 * 100%); width:calc(610 / 1179 * 100%); color:#9b9b9b; text-align:center; font-size:clamp(17px,4vw,21px); line-height:1.25; font-variant-numeric:tabular-nums; }
.dragonpass-qr-shell { position:absolute; top:calc(780 / 2406 * 100%); left:calc(325 / 1179 * 100%); width:calc(530 / 1179 * 100%); aspect-ratio:1; background:#fff; }
.dragonpass-qr { position:absolute; inset:0; display:grid; place-items:center; background:#fff; }
.dragonpass-qr canvas,.dragonpass-qr img { display:block; max-width:100%; max-height:100%; }
.dragonpass-qr-logo { position:absolute; z-index:2; top:50%; left:50%; width:19%; height:19%; transform:translate(-50%,-50%); object-fit:cover; }
.dragonpass-name { position:absolute; top:calc(1775 / 2406 * 100%); right:calc(88 / 1179 * 100%); width:calc(280 / 1179 * 100%); color:#202020; text-align:right; font-size:clamp(17px,3.8vw,20px); line-height:1.25; }
.gf-benefit-body { background:#fff; }
.gf-benefit-view { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:#fff; }
.gf-benefit-skin { position:relative; width:100%; aspect-ratio:1170/2412; }
.gf-benefit-skin>img { display:block; width:100%; height:auto; }
.gf-benefit-qr { position:absolute; top:calc(650 / 2412 * 100%); left:calc(325 / 1170 * 100%); width:calc(520 / 1170 * 100%); aspect-ratio:1; display:grid; place-items:center; background:#fff; }
.gf-benefit-qr canvas,.gf-benefit-qr img { display:block; max-width:100%; max-height:100%; }
@media (max-width:360px) { .gf-time { font-size:22px; } .gf-greeting,.gf-lounge { font-size:17px; } .gf-qr { width:190px; height:190px; margin-top:38px; } }
@media (min-width:700px) { .shell { padding-top:38px; } }
@media (prefers-reduced-motion:no-preference) { .card,.qr-stage { animation:rise .45s ease-out both; } @keyframes rise { from { opacity:0; transform:translateY(8px); } } }