:root {
  --paper: #fff7e8;
  --ink: #293052;
  --accent: #a5194c;
  --logo-green: #39672a;
  --logo-orange: #cf6301;
  --logo-yellow: #f3ba16;
  --description-blue: #173f73;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  --font-display: "Arial Narrow", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --size-small: 1rem;
  --size-body: 1.25rem;
  --size-title: 1.5rem;
  --size-display: clamp(2.75rem, 7vw, 5rem);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.55;
}
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--size-body);
}
input { border-color: var(--ink); background: transparent; color: var(--ink); }
input::placeholder { color: var(--ink); opacity: .45; }
input[type="checkbox"] {
  appearance: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
}
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.site-header,
main,
footer { max-width: 1240px; margin-inline: auto; }
.backend-page .site-header,
.backend-page main,
.backend-page footer { width: 100%; max-width: none; }
.site-header {
  min-height: 86px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--ink);
}
.brand { display: block; color: inherit; text-decoration: none; }
.brand-logo { display: block; width: clamp(190px, 20vw, 230px); height: auto; }
main { padding-inline: 32px; }
.hero { position: relative; padding: 82px 0 48px; border-bottom: 1px solid var(--ink); }
.eyebrow,
.section-number {
  color: var(--accent);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: .2em;
}
.eyebrow span { display: inline; }
.eyebrow span + span::before { content: " · "; }
.hero h1,
.event-info h2,
.booking-card h2,
.status-card h1,
.admin-title h1 {
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.04em;
}
.hero h1 { max-width: 1000px; margin: 24px 0 14px; color: var(--logo-orange); }
.hero h1 { font-size: var(--size-display); }
.hero h1 em { color: var(--logo-yellow); font-style: italic; }
.hero-zh {
  margin: 0;
  color: var(--logo-green);
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: 600;
  letter-spacing: .14em;
}
.event-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 42px;
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .08em;
  color: var(--logo-orange);
}
.venue { position: static; margin: 28px 0 0; color: var(--logo-orange); }
.venue span { display: block; margin-top: 5px; }
.event-copy span { display: block; margin-top: 1em; }
.venue i { color: var(--logo-orange); font-style: normal; }

.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 48px 0 96px; }
.event-info h2,
.booking-card h2 { margin: 16px 0 22px; }
.booking-card h2 span { display: block; margin-top: 6px; color: var(--accent); }
.event-info > .section-number + p { margin-top: 24px; }
.event-info > p:not(.section-number) { max-width: 480px; opacity: .68; }
.event-info > p.event-copy,
.event-info > p.event-copy span,
.event-info > p.event-copy strong { color: var(--description-blue); }
.event-info > p.event-copy { opacity: 1; }
.event-info dl { margin: 40px 0 36px; border-top: 1px solid var(--ink); }
.event-info dl div { display: grid; grid-template-columns: 123px minmax(0, 1fr); align-items: start; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--ink); }
.event-info dt,
.event-info dd span,
.price-compare small,
.price-compare span,
.booking-card legend,
.field > span,
.total > span,
.date-meta strong,
.date-meta small,
.remaining,
.age-check,
.pay-button small,
.form-note,
footer,
.ticket-main > small,
.ticket-main > p,
.ticket-main dt,
.ticket-main dd,
.qr small,
.capacity-grid small,
.capacity-grid span,
table,
th,
td small,
.pill,
.actions a,
.actions button,
.scan-details small,
.flash {
  font-size: var(--size-small);
}
.event-info dt { opacity: .65; letter-spacing: .16em; white-space: nowrap; word-break: keep-all; }
.event-info dt,
.event-info dd { align-self: start; padding-top: 0; line-height: 1.25; }
.event-info dd { margin: 0; font-weight: 600; white-space: nowrap; }
.event-info dd span { opacity: .65; }
.price-compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.price-compare > div { padding: 22px; }
.price-compare > div + div { border-left: 1px solid var(--ink); }
.price-compare small,
.price-compare strong,
.price-compare span { display: block; }
.price-compare small { opacity: .65; letter-spacing: .16em; }
.price-compare strong {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--size-title);
  line-height: 1;
}
.price-compare > div:first-child strong { color: var(--accent); }
.price-compare span { opacity: .65; }
.price-compare .walkin { opacity: .55; }
.price-compare .walkin strong { text-decoration: line-through; text-decoration-thickness: 1px; }

.booking-card { align-self: start; padding: 40px; border: 1px solid var(--ink); background: var(--paper); }
.booking-card fieldset { margin: 28px 0 24px; padding: 0; border: 0; }
.booking-card legend,
.field > span,
.total > span { display: block; margin-bottom: 8px; opacity: .65; font-weight: 700; letter-spacing: .13em; }
.field > span.required-label,
.booking-card legend.required-label { color: rgba(41,48,82,.65); opacity: 1; }
.required-mark { color: var(--accent); font-style: normal; }
.date-options { display: grid; gap: 8px; }
.date-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.date-option:has(input:checked),
.date-option.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
  box-shadow: none;
}
.date-option:has(input:checked) .date-day,
.date-option.is-selected .date-day { color: var(--paper); }
.date-option:has(input:checked) .date-meta small,
.date-option.is-selected .date-meta small { opacity: .8; }
.date-option:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.date-option input { position: absolute; opacity: 0; }
.date-day { color: var(--accent); font-family: var(--font-display); font-size: var(--size-body); font-weight: 700; white-space: nowrap; }
.date-meta strong,
.date-meta small { display: block; }
.date-meta small,
.remaining { opacity: .65; }
.remaining { text-align: right; line-height: 1.35; }
.remaining small { display: block; font-size: var(--size-small); }
.date-option.sold { opacity: .4; cursor: not-allowed; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-bottom: 18px; }
.field { display: block; margin-bottom: 18px; }
.form-row .field,
.form-row .total { display: grid; grid-template-rows: auto 46px; align-content: start; margin-bottom: 0; }
.field input,
.field select,
.filters input,
.filters select {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
}
.field input:focus,
.field select:focus { border-color: var(--accent); }
.form-row .field select,
.total strong { height: 46px; min-height: 46px; margin: 0; padding: 8px 2px; line-height: 30px; }
.total strong { display: block; border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-size: var(--size-body); }
.promo-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: end; margin-bottom: 18px; }
.promo-row .field { margin: 0; }
.promo-button {
  min-height: 46px;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1.15;
}
.promo-button:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.promo-button:disabled { opacity: .5; cursor: wait; }
.promo-message { margin: -10px 0 18px; font-size: var(--size-small); line-height: 1.35; }
.promo-message:empty { display: none; }
.promo-message.success { color: var(--accent); }
.promo-message.error { color: var(--accent); }
.age-check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; line-height: 1.55; }
.age-check input { width: 18px; height: 18px; flex: 0 0 auto; align-self: flex-start; margin-top: 3px; accent-color: var(--accent); }
.age-check > span { display: block; min-width: 0; }
.age-check span span { display: block; margin-top: 4px; }
.pay-button {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
}
.pay-button:hover { background: var(--accent); }
.pay-button:disabled { opacity: .5; cursor: wait; }
.pay-button span,
.pay-button small { display: block; }
.pay-button span { font-size: var(--size-body); font-weight: 700; }
.pay-button > span > span { margin-top: 2px; }
.pay-button small { margin-top: 3px; opacity: .75; letter-spacing: .12em; }
.form-note { margin: 0; text-align: center; opacity: .65; }
.honeypot { position: absolute; left: -10000px; }
.notice { display: flex; align-items: flex-start; gap: 24px; padding: 40px 0 68px; border-top: 1px solid var(--ink); }
.notice strong { align-self: flex-start; color: var(--accent); font-family: var(--font-display); font-size: var(--size-title); line-height: 1.25; }
.notice p { align-self: flex-start; max-width: 720px; margin: 0; opacity: .7; }
.notice p span { display: inline-block; margin-top: 6px; }

footer { padding: 26px 32px; border-top: 1px solid var(--ink); opacity: .65; letter-spacing: .08em; }
footer a { color: inherit; }
.site-footer { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.5fr) auto; align-items: start; gap: 18px 32px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.footer-links a { white-space: nowrap; }
.footer-responsibility { white-space: nowrap; text-align: right; }
.footer-email { letter-spacing: .04em; }
.mobile-break { display: none; }
.info-page { max-width: 980px; padding-top: 60px; padding-bottom: 90px; }
.info-card { padding: 48px; border: 1px solid var(--ink); }
.info-card h1 { margin: 16px 0 24px; font-family: var(--font-display); font-size: var(--size-display); font-weight: 600; line-height: .98; letter-spacing: -.04em; }
.info-card h1 span,
.info-card h2 span,
.info-card p span { display: block; margin-top: 7px; }
.info-card h1 span { color: var(--logo-green); font-size: var(--size-title); letter-spacing: .04em; }
.info-card section { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(41,48,82,.45); }
.info-card h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: var(--size-title); line-height: 1.15; }
.info-card h2 span { color: var(--accent); }
.info-card p { margin: 0 0 16px; }
.info-card p:last-child { margin-bottom: 0; }
.info-card a { color: var(--ink); text-underline-offset: 4px; }
.info-intro { color: var(--description-blue); }
.info-updated { margin-top: 34px !important; font-size: var(--size-small); opacity: .65; }
.info-card > .text-button { margin-top: 20px; }
.refund-dates { margin: 0 0 20px; padding: 0; list-style: none; border: 1px solid var(--ink); }
.refund-dates li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 16px; }
.refund-dates li + li { border-top: 1px solid var(--ink); }
.refund-dates strong { font-family: var(--font-display); }
.refund-dates span { opacity: .7; }
.contact-details dl { margin: 0; }
.contact-details dl div { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(41,48,82,.45); }
.contact-details dt { opacity: .65; }
.contact-details dd { margin: 0; font-weight: 600; }
.center-page { min-height: calc(100vh - 160px); display: grid; place-items: center; padding-top: 60px; padding-bottom: 80px; }
.status-card { width: min(680px, 100%); padding: 48px; border: 1px solid var(--ink); background: var(--paper); text-align: center; }
.status-card h1 { margin: 16px 0; }
.status-card h1 span { display: block; margin-top: 6px; color: var(--accent); }
.confirmation-event-title { margin: 14px 0 20px; font-family: var(--font-display); font-size: var(--size-title); line-height: 1.15; }
.confirmation-event-title > strong:first-child { color: var(--logo-orange); }
.confirmation-event-title em { color: var(--logo-yellow); }
.confirmation-event-title span { display: block; margin-top: 5px; color: var(--logo-green); font-weight: 700; letter-spacing: .08em; }
.confirmation-age-notice { margin: 24px 0 0; font-size: var(--size-small); line-height: 1.55; }
.confirmation-age-notice span { display: block; margin-top: 5px; }
.status-card > p:not(.section-number) { opacity: .68; }
.status-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--font-display); font-size: var(--size-body); font-weight: 700; }
.status-symbol.success { background: var(--accent); color: var(--paper); }
.status-symbol.pending { color: var(--accent); }
.text-button,
.header-link { display: inline-block; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-body); font-size: var(--size-small); font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.status-card .text-button { margin-top: 24px; }
.ticket { display: grid; grid-template-columns: 1fr 180px; margin: 32px 0 10px; border: 1px solid var(--ink); text-align: left; }
.ticket-main { padding: 28px; }
.ticket-main > small { color: var(--accent); letter-spacing: .12em; }
.ticket-main h2 { margin: 10px 0 2px; font-family: var(--font-display); font-size: var(--size-body); }
.ticket-main > p { margin: 0; opacity: .65; }
.ticket-main dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.ticket-main dt { opacity: .65; letter-spacing: .14em; }
.ticket-main dd { margin: 2px 0 0; font-weight: 700; }
.reference { font-family: var(--font-display); font-size: var(--size-body); font-weight: 700; letter-spacing: .08em; }
.qr { display: grid; place-items: center; align-content: center; padding: 18px; border-left: 1px dashed var(--ink); text-align: center; }
.qr img { width: 135px; height: auto; }
.qr small { margin-top: 8px; opacity: .65; }

.admin-login { max-width: 430px; }
.admin-login h1,
.admin-title h1 { font-size: var(--size-display); }
.admin-login h1 { color: var(--logo-orange); }
.admin-login h1 em { color: var(--logo-yellow); font-style: italic; }
.admin-login .hero-zh { margin: 0; }
.admin-title h1 span,
.promo-admin-heading h2 span { display: block; margin-top: 7px; color: var(--logo-green); font-size: var(--size-title); letter-spacing: .04em; }
.admin-login form { margin-top: 30px; text-align: left; }
.admin-main { padding-top: 54px; padding-bottom: 80px; }
.booking-dashboard { width: 100%; max-width: none; }
.admin-title { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 32px; }
.admin-title h1 { margin: 6px 0 0; }
.admin-nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.admin-nav a,
.admin-nav button {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
  white-space: nowrap;
}
.admin-nav a:hover,
.admin-nav button:hover,
.admin-nav .active { border-bottom-color: var(--accent); color: var(--accent); }
.admin-nav form { display: block; margin: 0; }
.capacity-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; border: 1px solid var(--ink); }
.capacity-grid > a { display: block; padding: 20px; color: var(--ink); text-decoration: none; }
.capacity-grid > a:hover { background: rgba(207,99,1,.08); }
.capacity-grid > a + a { border-left: 1px solid var(--ink); }
.capacity-grid small,
.capacity-grid strong,
.capacity-grid span { display: block; }
.capacity-grid small,
.capacity-grid span { opacity: .65; }
.capacity-grid strong { margin: 6px 0; font-family: var(--font-display); font-size: var(--size-title); }
.capacity-grid strong i { font-style: normal; font-size: var(--size-small); }
.backend-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.backend-shortcuts a { display: block; padding: 18px 20px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.backend-shortcuts a:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.backend-shortcuts strong,
.backend-shortcuts span { display: block; }
.backend-shortcuts strong { font-family: var(--font-display); font-size: var(--size-body); }
.backend-shortcuts span { margin-top: 3px; font-size: var(--size-small); opacity: .7; }
.promo-admin { margin-bottom: 28px; padding: 24px; border: 1px solid var(--ink); }
.promo-admin-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.promo-admin-heading h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: var(--size-title); line-height: 1; }
.promo-admin-heading > p { max-width: 520px; margin: 0; opacity: .65; font-size: var(--size-small); }
.promo-create,
.promo-item { display: grid; grid-template-columns: 1.15fr 1fr 1fr .7fr auto; gap: 10px; align-items: end; }
.promo-create { padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.promo-create label,
.promo-item label { display: block; }
.promo-create label > span,
.promo-item label > span { display: block; margin-bottom: 5px; opacity: .65; font-size: var(--size-small); font-weight: 700; }
.promo-create input,
.promo-create select,
.promo-item input,
.promo-item select { width: 100%; min-height: 42px; padding: 7px 9px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-size: var(--size-small); }
.promo-create button,
.promo-item button { min-height: 42px; padding: 7px 16px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font-size: var(--size-small); font-weight: 700; }
.promo-list { display: grid; }
.promo-item { grid-template-columns: 1fr .85fr 1.25fr .55fr .65fr auto; padding: 16px 0; border-bottom: 1px solid rgba(41,48,82,.35); }
.promo-item:last-child { padding-bottom: 0; border-bottom: 0; }
.promo-item.inactive { opacity: .55; }
.promo-status { align-self: center; font-size: var(--size-small); line-height: 1.25; }
.promo-status span,
.promo-status strong { display: block; }
.promo-status span { opacity: .65; }
.promo-actions { display: flex; gap: 7px; }
.promo-item button.secondary { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.promo-empty { margin: 18px 0 0; opacity: .65; font-size: var(--size-small); }
.all-bookings { margin-top: 34px; }
.list-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.list-heading p { margin: 0; }
.list-heading > span { font-size: var(--size-small); opacity: .65; }
.filters { display: grid; grid-template-columns: 1fr 150px 2fr auto; gap: 10px; margin-bottom: 20px; }
.filters input,
.filters select { min-height: 42px; padding-inline: 9px; border: 1px solid var(--ink); background: var(--paper); font-size: var(--size-small); }
.filters button { min-height: 42px; padding-inline: 20px; border: 0; background: var(--ink); color: var(--paper); }
.table-wrap { overflow: auto; border: 1px solid var(--ink); background: var(--paper); }
table { width: 100%; min-width: 1100px; border-collapse: collapse; }
.booking-list-wrap { overflow-x: hidden; }
.booking-list-table { min-width: 0; table-layout: fixed; }
.booking-list-table th:nth-child(1) { width: 14%; }
.booking-list-table th:nth-child(2) { width: 20%; }
.booking-list-table th:nth-child(3) { width: 11%; }
.booking-list-table th:nth-child(4) { width: 7%; }
.booking-list-table th:nth-child(5) { width: 17%; }
.booking-list-table th:nth-child(6) { width: 16%; }
.booking-list-table th:nth-child(7) { width: 15%; }
.booking-list-table th,
.booking-list-table td { overflow-wrap: anywhere; }
th { padding: 12px; border-bottom: 1px solid var(--ink); opacity: .65; letter-spacing: .1em; text-align: left; }
td { padding: 14px 12px; border-bottom: 1px solid var(--ink); vertical-align: top; }
td strong,
td small { display: block; }
td small { margin-top: 3px; opacity: .65; }
.pill { display: inline-block; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 20px; text-transform: uppercase; letter-spacing: .08em; }
.pill.paid,
.checked,
.already { color: var(--accent); }
.error-text,
.danger { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions a,
.actions button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-body); font-weight: 700; text-decoration: none; }
.empty { padding: 44px; opacity: .65; text-align: center; }
.scan-card { max-width: 520px; }
.scan-card.checkin-success { border: 3px solid var(--logo-green); box-shadow: inset 0 9px 0 var(--logo-green); }
.scan-card.checkin-success .section-number { color: var(--logo-green); }
.scan-card .status-symbol.success { border-color: var(--logo-green); background: var(--logo-green); color: var(--paper); }
.scan-card.partial-repeat { border: 3px solid var(--logo-orange); box-shadow: inset 0 9px 0 var(--logo-orange); }
.scan-card.partial-repeat .section-number { color: var(--logo-orange); }
.status-symbol.partial-repeat { border-color: var(--logo-orange); background: var(--logo-orange); color: var(--paper); }
.scan-card.repeat-scan { border: 3px solid var(--accent); box-shadow: inset 0 9px 0 var(--accent); }
.scan-card.repeat-scan .section-number { color: var(--accent); }
.status-symbol.repeat { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.scan-details { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0; border: 1px solid var(--ink); text-align: left; }
.scan-details p { margin: 0; padding: 13px; font-weight: 700; }
.scan-details p:nth-child(odd) { border-right: 1px solid var(--ink); }
.scan-details p:nth-child(-n + 2) { border-bottom: 1px solid var(--ink); }
.scan-details small { display: block; opacity: .65; letter-spacing: .13em; }
.ticket-state { margin: 24px 0; padding: 18px; border: 1px solid var(--ink); }
.ticket-state strong,
.ticket-state span,
.ticket-state small { display: block; }
.ticket-state strong { font-family: var(--font-display); font-size: var(--size-body); }
.ticket-state span,
.ticket-state small { margin-top: 3px; font-size: var(--size-small); opacity: .7; }
.ticket-state.complete { border-color: var(--logo-green); color: var(--logo-green); }
.ticket-state.checkin-success { border: 3px solid var(--logo-green); background: var(--logo-green); color: var(--paper); }
.ticket-state.checkin-success span,
.ticket-state.checkin-success small { opacity: 1; }
.ticket-state.partial-checked { border: 3px solid var(--logo-orange); background: var(--logo-orange); color: var(--paper); }
.ticket-state.partial-checked span,
.ticket-state.partial-checked small { opacity: 1; }
.ticket-state.already-checked { border: 3px solid var(--accent); background: var(--accent); color: var(--paper); }
.ticket-state.already-checked span,
.ticket-state.already-checked small { opacity: 1; }
.ticket-state.invalid { border-color: var(--accent); color: var(--accent); }
.partial-note { margin: -10px 0 22px; color: var(--logo-orange); font-size: var(--size-small); font-weight: 700; }
.checkin-form { text-align: left; }
.checkin-form .field { margin-bottom: 20px; }
.undo-form { margin-top: 20px; }
.undo-form summary { list-style: none; }
.undo-form summary::-webkit-details-marker { display: none; }
.undo-confirm-form { margin-top: 16px; padding: 18px; border: 1px solid var(--accent); text-align: left; }
.undo-confirm-form > p { margin: 0 0 16px; font-size: var(--size-small); line-height: 1.55; }
.undo-confirm-form > p span { display: block; margin-top: 3px; }
.undo-confirm-form .field { margin-bottom: 16px; }
.undo-confirm-form .pay-button { background: var(--accent); }
.next-scan { display: block; text-decoration: none; }

.date-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; border: 1px solid var(--ink); }
.date-tabs a { min-width: 0; padding: 15px 17px; color: var(--ink); text-decoration: none; }
.date-tabs a + a { border-left: 1px solid var(--ink); }
.date-tabs span,
.date-tabs strong { display: block; }
.date-tabs span { overflow: hidden; font-size: var(--size-small); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.date-tabs strong { margin-top: 3px; font-family: var(--font-display); font-size: var(--size-body); }
.date-tabs a:hover,
.date-tabs a.active { background: var(--accent); color: var(--paper); }
.checkin-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 34px; border: 1px solid var(--ink); }
.checkin-summary > div { padding: 20px; }
.checkin-summary > div + div { border-left: 1px solid var(--ink); }
.checkin-summary small,
.checkin-summary strong { display: block; }
.checkin-summary small { font-size: var(--size-small); opacity: .65; }
.checkin-summary strong { margin-top: 4px; font-family: var(--font-display); font-size: var(--size-title); }
.checkin-summary > div:nth-child(3) strong { color: var(--logo-green); }
.checkin-summary > div:nth-child(4) strong { color: var(--logo-orange); }
.paid-list { display: grid; gap: 12px; }
.paid-booking-card { display: grid; grid-template-columns: minmax(220px,1.35fr) minmax(300px,1.5fr) minmax(210px,.9fr) 150px; gap: 22px; align-items: center; padding: 20px; border: 1px solid var(--ink); }
.paid-booking-card.fully-checked-in { border-color: rgba(41,48,82,.35); background: rgba(41,48,82,.08); }
.paid-booking-card.fully-checked-in > :not(.paid-actions) { opacity: .52; }
.paid-booking-card.fully-checked-in .checkin-progress.complete { color: var(--ink); }
.paid-guest small { color: var(--accent); font-size: var(--size-small); font-weight: 700; letter-spacing: .06em; }
.paid-guest h2 { margin: 3px 0; font-family: var(--font-display); font-size: var(--size-body); }
.paid-guest p { margin: 0; font-size: var(--size-small); opacity: .68; }
.paid-booking-card dl { display: grid; grid-template-columns: 1.8fr .65fr .8fr; gap: 14px; margin: 0; }
.paid-booking-card dt { font-size: var(--size-small); opacity: .62; }
.paid-booking-card dd { margin: 2px 0 0; font-size: var(--size-small); font-weight: 700; }
.checkin-progress small,
.checkin-progress strong,
.checkin-progress span { display: block; }
.checkin-progress small,
.checkin-progress span { font-size: var(--size-small); opacity: .68; }
.checkin-progress strong { font-family: var(--font-display); font-size: var(--size-title); line-height: 1.1; }
.checkin-progress.partial { color: var(--logo-orange); }
.checkin-progress.complete { color: var(--logo-green); }
.checkin-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid currentColor; color: var(--ink); text-align: left; }
.checkin-history > small { display: block; margin: 0 0 6px; font-size: var(--size-small); font-weight: 700; opacity: .72; }
.checkin-history ul { margin: 0; padding: 0; list-style: none; }
.checkin-history li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; font-size: var(--size-small); line-height: 1.35; }
.checkin-history li + li { margin-top: 5px; }
.checkin-history li strong { display: block; font-family: var(--font-body); font-size: var(--size-small); line-height: 1.35; white-space: nowrap; }
.checkin-history time { overflow-wrap: anywhere; text-align: right; }
.ticket-state.checkin-success .checkin-history,
.ticket-state.partial-checked .checkin-history,
.ticket-state.already-checked .checkin-history { border-color: var(--paper); color: var(--paper); }
.paid-actions { display: grid; gap: 7px; }
.paid-actions a,
.paid-actions button { display: block; width: 100%; min-height: 40px; padding: 8px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-size: var(--size-small); font-weight: 700; text-align: center; text-decoration: none; }
.paid-actions .primary-action { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.paid-actions button.primary-action:disabled,
.paid-actions button.primary-action:disabled:hover { border-color: rgba(41,48,82,.3); background: rgba(41,48,82,.16); color: rgba(41,48,82,.55); cursor: not-allowed; }
.paid-actions a:hover,
.paid-actions button:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }

.scanner-page { padding-top: 44px; }
.scanner-card { max-width: 560px; }
.scanner-card h1 { font-size: var(--size-display); }
.qr-reader { overflow: hidden; margin: 26px 0 18px; border: 1px solid var(--ink); background: rgba(41,48,82,.04); }
.qr-reader:empty { display: none; }
.qr-reader video { display: block; width: 100% !important; }
.qr-reader img { max-width: 100%; }
.scanner-card h1 span { color: var(--logo-green); }
.scanner-start span span { margin-top: 2px; }
.scanner-stop { margin: 6px auto 0 !important; }
.scanner-divider { position: relative; margin: 25px 0; border-top: 1px solid var(--ink); text-align: center; }
.scanner-divider span { position: relative; top: -14px; padding: 0 12px; background: var(--paper); font-size: var(--size-small); font-weight: 700; }
.file-scan-button { display: block; width: 100%; padding: 13px 16px; border: 1px solid var(--ink); cursor: pointer; font-size: var(--size-small); font-weight: 700; text-align: center; }
.file-scan-button:hover { border-color: var(--accent); color: var(--accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.manual-ticket { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; margin-top: 24px; text-align: left; }
.manual-ticket .field { margin: 0; }
.manual-ticket button { min-height: 46px; padding: 8px 14px; border: 0; background: var(--ink); color: var(--paper); font-size: var(--size-small); font-weight: 700; }
.scanner-message { min-height: 24px; margin: 16px 0 0 !important; font-size: var(--size-small); font-weight: 700; }
.scanner-message.success { color: var(--logo-green); }
.scanner-message.error { color: var(--accent); }
.flash-wrap { position: fixed; z-index: 20; top: 95px; right: 20px; }
.flash { padding: 11px 16px; background: var(--ink); color: var(--paper); }
.flash.error { background: var(--accent); }

@media (max-width: 1100px) {
  .promo-create,
  .promo-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-create button { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .site-header { min-height: 72px; padding: 14px 18px; }
  .site-header:has(.admin-nav) { display: block; }
  .site-header:has(.admin-nav) .brand-logo { margin-bottom: 12px; }
  main { padding-inline: 18px; }
  .hero { padding: 46px 0 36px; }
  .venue { position: static; margin-top: 28px; }
  .booking-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 36px 0 56px; }
  .event-info { min-width: 0; }
  .event-copy { overflow-wrap: anywhere; }
  .booking-card { padding: 26px 20px; }
  .notice { padding-bottom: 48px; }
  .ticket { grid-template-columns: 1fr; }
  .qr { border-top: 1px dashed var(--ink); border-left: 0; }
  .capacity-grid { grid-template-columns: 1fr; }
  .capacity-grid > a + a { border-top: 1px solid var(--ink); border-left: 0; }
  .admin-nav { width: 100%; max-width: none; justify-content: flex-start; gap: 14px; overflow-x: auto; }
  .backend-page .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; overflow: visible; }
  .backend-page .admin-nav a,
  .backend-page .admin-nav form,
  .backend-page .admin-nav button { min-width: 0; }
  .backend-page .admin-nav a,
  .backend-page .admin-nav button { width: 100%; white-space: normal; }
  .backend-page .admin-nav button { text-align: left; }
  .admin-nav a,
  .admin-nav button { padding-block: 3px; }
  .backend-shortcuts { grid-template-columns: 1fr; }
  .promo-admin-heading { display: block; }
  .promo-admin-heading > p { margin-top: 10px; }
  .promo-create { grid-template-columns: 1fr 1fr; }
  .promo-create button { grid-column: 1 / -1; }
  .promo-item { grid-template-columns: 1fr 1fr; }
  .promo-status,
  .promo-actions { margin-top: 4px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters input,
  .filters button { grid-column: 1 / -1; }
  .booking-list-wrap { overflow: visible; border: 0; background: transparent; }
  .booking-list-table,
  .booking-list-table tbody,
  .booking-list-table tr,
  .booking-list-table td { display: block; width: 100%; }
  .booking-list-table { table-layout: auto; }
  .booking-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .booking-list-table tbody { display: grid; gap: 14px; }
  .booking-list-table tr { border: 1px solid var(--ink); background: var(--paper); }
  .booking-list-table td { position: relative; min-height: 52px; padding: 12px 12px 12px 152px; border-bottom: 1px solid rgba(41,48,82,.35); }
  .booking-list-table td:last-child { border-bottom: 0; }
  .booking-list-table td::before { position: absolute; top: 12px; left: 12px; width: 124px; content: attr(data-label); opacity: .65; font-size: var(--size-small); font-weight: 700; line-height: 1.35; }
  .booking-list-table .empty { min-height: 0; padding: 28px 18px; text-align: center; }
  .booking-list-table .empty::before { content: none; }
  .date-tabs { grid-template-columns: 1fr 1fr; }
  .date-tabs a:nth-child(3) { border-left: 0; }
  .date-tabs a:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .checkin-summary { grid-template-columns: 1fr 1fr; }
  .checkin-summary > div:nth-child(3) { border-left: 0; }
  .checkin-summary > div:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .paid-booking-card { grid-template-columns: 1.4fr 1fr; }
  .paid-booking-card dl { grid-column: 1 / -1; grid-row: 2; }
  .paid-actions { grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
  .status-card { padding: 36px 20px; }
  footer { padding: 24px 18px; }
  .site-footer { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .footer-links { gap: 7px 16px; }
  .footer-responsibility { text-align: left; }
  .info-page { padding-top: 38px; padding-bottom: 58px; }
  .info-card { padding: 32px 22px; }
  .flash-wrap { right: 15px; left: 15px; }
  .flash { text-align: center; }
}

@media (max-width: 440px) {
  .site-header { padding-inline: 16px; }
  .brand-logo { width: 180px; }
  main { padding-inline: 16px; }
  .hero { padding: 42px 0 28px; }
  .eyebrow { line-height: 1.45; letter-spacing: .13em; }
  .eyebrow span { display: block; }
  .eyebrow span + span { margin-top: 2px; }
  .eyebrow span + span::before { content: none; }
  .hero h1 { margin-top: 20px; }
  .hero-zh { line-height: 1.25; letter-spacing: .04em; }
  .event-line { gap: 4px; margin-top: 28px; letter-spacing: .08em; }
  .venue { margin-top: 24px; }
  .booking-layout { gap: 38px; padding: 28px 0 48px; }
  .event-info > .section-number + p { margin-top: 20px; }
  .event-info dl { margin: 30px 0; }
  .event-info dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: start; gap: 8px; padding: 14px 0; }
  .event-info dt { margin: 0; white-space: nowrap; word-break: keep-all; letter-spacing: .02em; }
  .event-info dd { min-width: 0; font-size: var(--size-small); white-space: normal; overflow-wrap: anywhere; text-align: right; }
  .price-compare > div { padding: 16px 14px; }
  .price-compare small { letter-spacing: .07em; }
  .booking-card { min-width: 0; padding: 24px 18px; }
  .booking-card fieldset { margin: 24px 0 20px; }
  .date-option { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; min-height: 58px; padding: 10px 8px; }
  .date-day { min-width: 0; font-size: var(--size-small); line-height: 1.3; letter-spacing: -.025em; white-space: normal; overflow-wrap: anywhere; }
  .form-row { gap: 16px; }
  .promo-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
  .age-check { line-height: 1.45; }
  .pay-button { padding-inline: 14px; }
  .pay-button small { letter-spacing: .05em; }
  .promo-admin { padding: 20px 16px; }
  .promo-create,
  .promo-item { grid-template-columns: 1fr; }
  .promo-create button { grid-column: auto; }
  .promo-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-login { min-width: 0; overflow: hidden; }
  .admin-login h1 em { display: block; }
  .admin-login .section-number { letter-spacing: .12em; }
  .admin-main { padding-top: 38px; }
  .admin-title { display: block; }
  .admin-title .text-button { margin-top: 16px; }
  .list-heading { display: block; }
  .list-heading > span { display: block; margin-top: 5px; }
  .booking-list-table td { padding-left: 124px; }
  .booking-list-table td::before { width: 96px; }
  .date-tabs span { letter-spacing: -.01em; }
  .checkin-summary > div { padding: 15px; }
  .paid-booking-card { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .paid-booking-card dl { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; padding: 14px 0; border-top: 1px solid rgba(41,48,82,.35); border-bottom: 1px solid rgba(41,48,82,.35); }
  .paid-booking-card dl div { display: flex; justify-content: space-between; gap: 14px; }
  .checkin-history li { grid-template-columns: 1fr; }
  .checkin-history time { text-align: left; }
  .paid-actions { grid-column: auto; }
  .manual-ticket { grid-template-columns: 1fr; }
  .scanner-card { padding-inline: 18px; }
  .ticket-main dl { grid-template-columns: 1fr; }
  .notice { gap: 16px; }
  .notice strong { flex: 0 0 auto; margin-top: 0; }
  footer { line-height: 1.45; letter-spacing: .04em; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; }
  .info-card { padding: 26px 18px; }
  .info-card h1 { overflow-wrap: anywhere; }
  .refund-dates li { grid-template-columns: 1fr; gap: 2px; }
  .contact-details dl div { grid-template-columns: 1fr; gap: 4px; }
  .desktop-separator { display: none; }
  .mobile-break { display: inline; }
}

@media (max-width: 360px) {
  .booking-card { padding-inline: 12px; }
}

@media print {
  .site-header,
  footer,
  .text-button { display: none; }
  .center-page { padding: 0; }
  .status-card { border: 0; }
  .ticket { break-inside: avoid; }
}