@import url('/static/design-system.css');
main { max-width: 1260px; padding: 46px 36px 64px; margin: auto; }
.breadcrumb { margin-bottom: 30px; font-size: 12px; color: var(--muted); display: flex; gap: 14px; align-items: center; }
.breadcrumb b { color: var(--fg); }
.checkout-layout { display: grid; grid-template-columns: 1fr 1.02fr; gap: 64px; align-items: start; }
.hero h1 { font-size: clamp(48px,5.2vw,74px); line-height: .98; letter-spacing: -.065em; margin: 12px 0 18px; max-width: 450px; }
.meta { color: var(--muted); font-size: 14px; }
.poster { height: 290px; margin: 28px 0 24px; border-radius: var(--radius); background: #101d2c; position: relative; overflow: hidden; color: #fff; }
.poster svg { position: absolute; width: 100%; height: 100%; }
.poster-caption { position: absolute; left: 26px; bottom: 23px; right: 26px; display: flex; justify-content: space-between; align-items: end; font: 11px/1.5 var(--mono); letter-spacing: .08em; }
.poster-caption strong { font: 800 30px/.95 var(--font); letter-spacing: -.05em; max-width: 180px; }
.ticket { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px dashed #bbc4cf; }
.ticket-kind { font-size: 16px; font-weight: 700; }
.ticket-note { font-size: 13px; color: var(--muted); margin-top: 2px; }
.price { font-size: 30px; font-weight: 750; letter-spacing: -1px; }
.event-note { margin-top: 18px; display: flex; align-items: start; gap: 12px; font-size: 12px; color: var(--muted); }
.event-note span { color: var(--accent); font-size: 17px; }
.checkout-card { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); padding: 28px; box-shadow: var(--shadow); }
.card-kicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.step { background: #f1f3f6; border: 1px solid var(--line); color: var(--muted); font: 600 11px var(--mono); padding: 5px 9px; border-radius: 6px; }
h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.045em; }
.lede { margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 380px; }
.stage { position: relative; margin-top: 22px; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 0; padding: 0; border-radius: 12px; background: #10142a; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ring { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 4; }.ring-track { stroke: #ffffff30; }.ring-fill { stroke: #fb9b4b; stroke-linecap: round; }
.overlay { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); background: #091221d9; padding: 7px 12px; border: 1px solid #ffffff20; border-radius: 50px; color: #fff; font-size: 12px; text-align: center; pointer-events: none; width: max-content; }
.overlay.top { top: 12px; bottom: auto; }.overlay:empty{display:none}
.badge { position: absolute; left: 10px; top: 10px; color: white; background: #384558; border-radius: 5px; padding: 3px 8px; font-size: 11px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn { min-height: 46px; border: 1px solid var(--line); border-radius: 9px; padding: 11px 18px; font-weight: 650; flex: 1; }
.btn-primary { width: 100%; background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 8px #c84c0820; }
.btn-primary:hover:not(:disabled){background:#a93d03}
.btn-secondary { background: white; color: var(--fg); }.btn-secondary:hover:not(:disabled) { background: #f1f4f7; }
.btn:disabled { background: #eef1f4; color: #727e8b; border-color: #e2e6ec; box-shadow: none; }
.status { color: var(--muted); font-size: 13px; margin-top: 12px; }.status:empty{display:none}
.reserve { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.privacy-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 14px; }
.linkish { background: transparent; border: 0; color: var(--muted); text-decoration: underline; font-size: 12px; padding: 8px 0; }
.result,.reserve-msg,.confirm { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f5f7fa; margin-top: 10px; font-size: 13px; }
.feature-results { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12px; }
.feature-results caption { text-align: left; font-weight: 700; margin-bottom: 8px; }
.feature-results th,.feature-results td { text-align: left; padding: 8px 5px; border-bottom: 1px solid var(--line); }
.feature-results th { font-weight: 500; }
.reserve-msg{color:#8c2d29;background:#fff3ef;border-color:#f0c9be}.confirm{color:var(--ok);background:#edf8f0;border-color:#b9dec9}.confirm-title{font-size:19px;font-weight:700}.confirm code{overflow-wrap:anywhere}.confirm-note{margin-top:6px}
.tester { margin-top: 18px; border: 1px solid #e6ccb4; background: #fff9f2; border-radius: 12px; padding: 16px; font-size: 13px; }.tester-title{font-weight:700}.thanks{color:var(--ok);display:block}
.check-row { display: flex; align-items: start; gap: 10px; margin-top: 12px; }.check-row input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.tester > label:first-of-type { display: block; margin-top: 12px; }
#research-code { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: white; font: inherit; }
fieldset{border:0;padding:0;margin:16px 0 0;min-width:0}legend{padding:0;margin-bottom:8px}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seg label{position:relative}.seg input{position:absolute;opacity:0;inset:0;margin:0}.seg span{display:block;text-align:center;padding:10px 4px;background:white;border:1px solid var(--line);border-radius:7px}.seg input:checked+span{border-color:var(--accent);color:var(--accent);font-weight:700}.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:950px){.checkout-layout{gap:28px}main{padding:30px 24px 50px}.checkout-card{padding:22px}.poster{height:260px}}
@media(max-width:700px){main{padding:24px 20px 40px}.checkout-layout{grid-template-columns:1fr;gap:28px}.hero h1{font-size:54px}.poster{height:200px;margin:20px 0}.breadcrumb{margin-bottom:22px}.checkout-card{padding:22px 18px}.hero h1{max-width:none}.site-footer{padding:24px 20px}}