:root {
  --night: #07080f;
  --panel: #0e1120;
  --panel-2: #131731;
  --line: rgba(255, 255, 255, 0.09);
  --ink: #f5f6fc;
  --ink-dim: #9ba1b8;
  --ink-faint: #5c6278;
  --pink: #ff2e7e;
  --pink-soft: rgba(255, 46, 126, 0.16);
  --cyan: #35f0e0;
  --cyan-soft: rgba(53, 240, 224, 0.14);
  --amber: #ffc247;
  --amber-soft: rgba(255, 194, 71, 0.15);
  --font-display: "Bebas Neue", "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: min(1px, 0.1333333333vw);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--night); scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 28rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3rem solid rgba(53, 240, 224, 0.72); outline-offset: 3rem; }
p, h1, h2, h3 { margin: 0; }

.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900rem 620rem at 88% -8%, rgba(255, 46, 126, 0.22), transparent 62%),
    radial-gradient(820rem 640rem at -12% 34%, rgba(53, 240, 224, 0.13), transparent 60%),
    radial-gradient(700rem 520rem at 70% 96%, rgba(255, 194, 71, 0.1), transparent 60%),
    var(--night);
}
.bg-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.016) 0 2rem, transparent 2rem 7rem);
  mix-blend-mode: overlay;
}
.h5-shell { position: relative; z-index: 1; width: min(100%, 750rem); min-height: 100vh; margin: 0 auto; }
.page-body { position: relative; z-index: 1; }
.page-view { width: 100%; }
.t-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.t-dim { color: var(--ink-dim); }
.t-faint { color: var(--ink-faint); }
.t-pink { color: var(--pink); }
.t-cyan { color: var(--cyan); }
.t-amber { color: var(--amber); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  color: var(--cyan);
  font-size: 22rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  width: 34rem;
  height: 2rem;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.eyebrow::after { background: linear-gradient(90deg, var(--cyan), transparent); }
.neon-pink {
  color: #ffd9e8;
  text-shadow: 0 0 14rem rgba(255, 46, 126, 0.9), 0 0 46rem rgba(255, 46, 126, 0.55), 0 0 90rem rgba(255, 46, 126, 0.35);
}
.outline-text { color: transparent; -webkit-text-stroke: 2rem rgba(245, 246, 252, 0.34); }

/* Navigation mirrors the custom Mini Program navigation bar. */
.nav {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 50;
  width: min(100%, 750rem);
  height: 128rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(7, 8, 15, 0.92), rgba(7, 8, 15, 0.78));
  border-bottom: 1rem solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14rem);
  -webkit-backdrop-filter: blur(14rem);
}
.nav-inner { position: relative; display: flex; align-items: center; height: 88rem; margin-top: 40rem; padding: 0 24rem; }
.nav-left { display: flex; align-items: center; justify-content: center; width: 72rem; height: 72rem; padding: 0; background: transparent; }
.nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rem;
  height: 56rem;
  border: 2rem solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.2s, background 0.2s;
}
.nav-left:active .nav-back { transform: scale(0.9); background: rgba(255, 255, 255, 0.14); }
.nav-back-arrow { margin-top: -6rem; color: var(--ink); font-size: 40rem; font-weight: 300; line-height: 1; }
.nav-title {
  position: absolute;
  left: 50%;
  color: var(--ink);
  font-size: 30rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  transform: translateX(-50%);
}
.home-nav-spacer, .detail-nav-spacer { height: 128rem; }

/* Home hero. */
.bulb-strip { display: flex; justify-content: space-between; padding: 18rem 26rem; }
.bulb-strip .bulb {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12rem rgba(255, 194, 71, 0.9), 0 0 26rem rgba(255, 194, 71, 0.5);
  animation: bulb-chase 1.2s ease-in-out infinite;
}
.bulb-strip .bulb:nth-child(3n) { background: var(--pink); box-shadow: 0 0 12rem rgba(255, 46, 126, 0.9), 0 0 26rem rgba(255, 46, 126, 0.5); animation-delay: 0.4s; }
.bulb-strip .bulb:nth-child(3n + 1) { background: var(--cyan); box-shadow: 0 0 12rem rgba(53, 240, 224, 0.9), 0 0 26rem rgba(53, 240, 224, 0.5); animation-delay: 0.8s; }
@keyframes bulb-chase { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

.hero { position: relative; padding: 30rem 40rem 10rem; overflow: hidden; }
.orb { position: absolute; z-index: 0; opacity: 0.5; font-size: 52rem; filter: drop-shadow(0 0 24rem rgba(255, 46, 126, 0.6)); animation: orb-float 7s ease-in-out infinite; }
.orb-a { top: 60rem; right: 46rem; }
.orb-b { top: 380rem; left: 26rem; font-size: 44rem; filter: drop-shadow(0 0 24rem rgba(53, 240, 224, 0.6)); animation-delay: 2.2s; }
.orb-c { top: 200rem; right: 180rem; font-size: 38rem; filter: drop-shadow(0 0 24rem rgba(255, 194, 71, 0.6)); animation-delay: 4s; }
@keyframes orb-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-34rem) rotate(8deg); } }
.hero-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; gap: 16rem; margin-bottom: 34rem; }
.hero-collab { color: var(--ink-dim); font-size: 26rem; font-weight: 500; letter-spacing: 0.22em; }
.hero-x { color: var(--amber); font-size: 34rem; text-shadow: 0 0 18rem rgba(255, 194, 71, 0.8); }
.hero-poster { position: relative; z-index: 1; }
.hero-year { margin-bottom: 6rem; font-size: 78rem; line-height: 1; letter-spacing: 0.06em; transform: translateX(-4rem); }
.hero-title { margin: 0 0 26rem -6rem; line-height: 0.92; }
.hero-line { display: block; font-size: 190rem; letter-spacing: 0.01em; }
.hero-line-2 { margin-left: 96rem; color: #d8fffb; text-shadow: 0 0 12rem rgba(53, 240, 224, 0.85), 0 0 44rem rgba(53, 240, 224, 0.5), 0 0 90rem rgba(53, 240, 224, 0.3); }
.hero-cn { display: flex; align-items: baseline; gap: 18rem; margin-bottom: 44rem; }
.hero-cn-main { color: var(--ink); font-size: 40rem; font-weight: 700; letter-spacing: 0.14em; }
.hero-cn-sub { padding: 6rem 16rem; border: 2rem solid rgba(255, 194, 71, 0.45); border-radius: 8rem; background: var(--amber-soft); color: var(--amber); font-size: 24rem; letter-spacing: 0.2em; white-space: nowrap; }

.ticket { position: relative; overflow: hidden; border: 2rem solid var(--line); border-radius: 24rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); }
.ticket::before, .pass::before { position: absolute; top: 0; right: 0; left: 0; height: 6rem; content: ""; background: linear-gradient(90deg, var(--pink), var(--amber), var(--cyan)); }
.punch { position: absolute; top: 50%; width: 36rem; height: 36rem; border: 2rem solid var(--line); border-radius: 50%; background: var(--night); transform: translateY(-50%); }
.punch.left { left: -20rem; }
.punch.right { right: -20rem; }
.hero-ticket { padding: 38rem 44rem; }
.ticket-row { display: flex; align-items: flex-start; gap: 22rem; padding: 18rem 0; }
.ticket-ico { font-size: 40rem; line-height: 1.3; }
.ticket-k { margin-bottom: 8rem; color: var(--ink-faint); font-size: 22rem; letter-spacing: 0.26em; }
.ticket-v { color: var(--ink); font-size: 29rem; font-weight: 600; line-height: 1.5; }
.ticket-divider, .guide-divider { height: 2rem; margin: 0 -10rem; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); }

.marquee { overflow: hidden; padding: 16rem 0; border-top: 2rem solid var(--line); border-bottom: 2rem solid var(--line); background: rgba(255, 255, 255, 0.02); white-space: nowrap; }
.marquee-track { display: inline-block; color: var(--ink-dim); font-family: var(--font-display); font-size: 26rem; letter-spacing: 0.28em; animation: marquee 22s linear infinite; }
.marquee-track .hl-p { color: var(--pink); }
.marquee-track .hl-c { color: var(--cyan); }
.marquee-track .hl-a { color: var(--amber); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.section { padding: 64rem 40rem 0; }
.section-venue, .section-guide { padding-top: 48rem; }
.reveal { opacity: 0; transform: translateY(36rem); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

.venue-gallery { display: flex; flex-direction: column; gap: 20rem; margin-top: 28rem; }
.venue-img-wrap, .guide-photo-wrap, .guide-map-wrap { display: block; width: 100%; padding: 0; color: inherit; text-align: inherit; }
.venue-img-wrap { position: relative; overflow: hidden; border: 2rem solid var(--line); border-radius: 20rem; background: transparent; }
.venue-img { display: block; width: 100%; object-fit: cover; }
.venue-img-main, .venue-img-main .venue-img { height: 420rem; }
.venue-img-wide, .venue-img-wide .venue-img { height: 320rem; }
.venue-img-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 30rem 28rem; background: linear-gradient(to top, rgba(7, 8, 15, 0.82) 0%, rgba(7, 8, 15, 0.2) 50%, transparent 100%); }
.venue-img-overlay-bottom { background: linear-gradient(to top, rgba(7, 8, 15, 0.78) 0%, transparent 60%); }
.venue-img-label { margin-bottom: 8rem; color: #fff; font-size: 52rem; letter-spacing: 0.12em; text-shadow: 0 0 20rem rgba(255, 46, 126, 0.7), 0 0 50rem rgba(255, 46, 126, 0.4); }
.venue-img-sub { color: rgba(255, 255, 255, 0.85); font-size: 24rem; letter-spacing: 0.1em; }
.image-trigger:active { transform: scale(0.98); transition: transform 0.15s; }

.manifesto { margin-top: 30rem; }
.manifesto-lead { margin-bottom: 18rem; color: var(--ink-dim); font-size: 30rem; line-height: 1.7; }
.manifesto-big { margin-bottom: 26rem; color: var(--ink); font-size: 96rem; line-height: 1.05; text-shadow: 0 0 40rem rgba(255, 46, 126, 0.35); }
.manifesto-body { margin-bottom: 18rem; color: var(--ink-dim); font-size: 28rem; line-height: 1.85; }
.manifesto-body .hl { border-bottom: 3rem solid rgba(53, 240, 224, 0.5); color: var(--cyan); font-weight: 600; }

.hl-list { display: flex; flex-direction: column; gap: 20rem; margin-top: 30rem; }
.hl-item { position: relative; display: flex; align-items: center; gap: 24rem; overflow: hidden; padding: 30rem 28rem 30rem 30rem; border: 2rem solid var(--line); border-radius: 20rem; background: rgba(255, 255, 255, 0.035); transition: transform 0.25s, border-color 0.25s; }
.hl-item:active { transform: scale(0.98); }
.hl-no { flex: 0 0 74rem; min-width: 74rem; color: transparent; font-size: 44rem; -webkit-text-stroke: 2rem rgba(245, 246, 252, 0.3); }
.hl-icon { flex: 0 0 auto; font-size: 46rem; }
.hl-body { min-width: 0; flex: 1; }
.hl-title { margin-bottom: 6rem; color: var(--ink); font-size: 30rem; font-weight: 700; letter-spacing: 0.04em; }
.hl-desc { color: var(--ink-dim); font-size: 23rem; line-height: 1.55; }
.hl-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 6rem; }
.hl-pink { background: linear-gradient(to bottom, var(--pink), transparent); box-shadow: 0 0 18rem rgba(255, 46, 126, 0.7); }
.hl-cyan { background: linear-gradient(to bottom, var(--cyan), transparent); box-shadow: 0 0 18rem rgba(53, 240, 224, 0.7); }
.hl-amber { background: linear-gradient(to bottom, var(--amber), transparent); box-shadow: 0 0 18rem rgba(255, 194, 71, 0.7); }

.steps { position: relative; margin-top: 34rem; padding-left: 34rem; }
.steps::before { position: absolute; top: 14rem; bottom: 14rem; left: 8rem; width: 2rem; content: ""; background: linear-gradient(to bottom, var(--pink), var(--amber), var(--cyan)); opacity: 0.6; }
.step { position: relative; padding: 0 0 44rem 26rem; }
.step:last-child { padding-bottom: 6rem; }
.step-dot { position: absolute; top: 10rem; left: -33rem; width: 16rem; height: 16rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 16rem rgba(255, 194, 71, 0.9); }
.step-no { margin-bottom: 8rem; color: var(--cyan); font-size: 24rem; letter-spacing: 0.3em; }
.step-title { margin-bottom: 6rem; color: var(--ink); font-size: 32rem; font-weight: 700; }
.step-desc { color: var(--ink-dim); font-size: 24rem; line-height: 1.6; }
.guide-card { margin-top: 30rem; padding: 32rem 30rem; border: 2rem solid var(--line); border-radius: 20rem; background: rgba(255, 255, 255, 0.04); }
.guide-row { display: flex; align-items: flex-start; gap: 20rem; padding: 16rem 0; }
.guide-ico { font-size: 38rem; line-height: 1.3; }
.guide-info { min-width: 0; flex: 1; }
.guide-k { margin-bottom: 6rem; color: var(--ink-faint); font-size: 22rem; letter-spacing: 0.22em; }
.guide-v { color: var(--ink); font-size: 28rem; font-weight: 600; line-height: 1.5; }
.guide-v-sub { margin-top: 4rem; color: var(--ink-dim); font-size: 23rem; }
.guide-divider { margin: 0 -6rem; }
.guide-photo-wrap { position: relative; height: 340rem; margin-top: 28rem; overflow: hidden; border: 2rem solid var(--line); border-radius: 18rem; background: transparent; }
.guide-photo { display: block; width: 100%; height: 340rem; object-fit: cover; }
.guide-photo-tag { position: absolute; right: 0; bottom: 0; left: 0; padding: 16rem 24rem; color: rgba(255, 255, 255, 0.85); font-size: 22rem; letter-spacing: 0.08em; background: linear-gradient(to top, rgba(7, 8, 15, 0.8), transparent); }
.guide-map-wrap { position: relative; margin-top: 24rem; overflow: hidden; border: 2rem solid rgba(53, 240, 224, 0.3); border-radius: 18rem; background: transparent; box-shadow: 0 0 30rem rgba(53, 240, 224, 0.08); }
.guide-map { display: block; width: 100%; }
.guide-map-hint { position: absolute; right: 0; bottom: 0; left: 0; padding: 14rem 24rem; color: var(--cyan); font-size: 21rem; letter-spacing: 0.08em; text-align: center; background: linear-gradient(to top, rgba(7, 8, 15, 0.75), transparent); }
.steps-note { margin-top: 26rem; padding: 22rem 26rem; border-left: 6rem solid var(--pink); border-radius: 0 16rem 16rem 0; background: var(--pink-soft); color: #ffd9e8; font-size: 24rem; line-height: 1.7; }

.hosts { padding-bottom: 20rem; }
.host-row { display: flex; align-items: baseline; gap: 24rem; padding: 14rem 0; }
.host-k { flex: 0 0 130rem; min-width: 130rem; color: var(--ink-faint); font-size: 22rem; letter-spacing: 0.24em; }
.host-v { color: var(--ink-dim); font-size: 27rem; font-weight: 500; }
.host-slogan { margin-top: 30rem; color: var(--amber); font-size: 25rem; letter-spacing: 0.18em; text-align: center; text-shadow: 0 0 20rem rgba(255, 194, 71, 0.45); }
.home-bottom-spacer { height: 200rem; }

/* Shared actions and the home fixed action bar. */
.btn-primary {
  position: relative;
  display: block;
  width: 100%;
  min-height: 104rem;
  padding: 0 28rem;
  overflow: hidden;
  border-radius: 56rem;
  background: linear-gradient(100deg, var(--pink), #ff6ba6 55%, var(--amber));
  box-shadow: 0 10rem 40rem rgba(255, 46, 126, 0.45), inset 0 2rem 0 rgba(255, 255, 255, 0.35);
  color: #1a0210;
  font-size: 32rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 104rem;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-primary::after { position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; content: ""; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: shine 2.8s ease-in-out infinite; }
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4rem 18rem rgba(255, 46, 126, 0.4); }
.btn-primary:disabled { opacity: 0.55; cursor: wait; }
@keyframes shine { 0% { left: -80%; } 55%, 100% { left: 130%; } }
.btn-ghost { display: block; width: 100%; height: 96rem; margin-top: 20rem; border: 2rem solid rgba(53, 240, 224, 0.4); border-radius: 52rem; background: rgba(53, 240, 224, 0.06); color: var(--cyan); font-size: 28rem; font-weight: 600; letter-spacing: 0.08em; line-height: 92rem; text-align: center; transition: transform 0.2s, background 0.2s; }
.btn-ghost:active { transform: scale(0.97); background: rgba(53, 240, 224, 0.14); }
.cta-bar { position: fixed; bottom: 0; left: 50%; z-index: 40; width: min(100%, 750rem); padding: 18rem 36rem calc(20rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: linear-gradient(to top, rgba(7, 8, 15, 0.98) 62%, rgba(7, 8, 15, 0)); }
.cta-bar .btn-primary { animation: cta-pulse 2s ease-in-out 3; }
.cta-note { display: flex; align-items: center; justify-content: center; gap: 12rem; margin-bottom: 14rem; color: var(--ink-dim); font-size: 22rem; letter-spacing: 0.14em; }
.cta-dot { width: 12rem; height: 12rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14rem rgba(255, 46, 126, 0.9); animation: neon-breathe 1.6s ease-in-out infinite; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 10rem 40rem rgba(255, 46, 126, 0.45), inset 0 2rem 0 rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 10rem 60rem rgba(255, 46, 126, 0.75), 0 0 80rem rgba(255, 46, 126, 0.3), inset 0 2rem 0 rgba(255, 255, 255, 0.35); } }
@keyframes neon-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.4; } 94% { opacity: 1; } 97% { opacity: 0.6; } 98% { opacity: 1; } }
.flicker { animation: flicker 4s linear infinite; }

/* First visit prompt. */
.guide-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 32rem; background: rgba(7, 8, 15, 0.88); animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.guide-modal { width: 580rem; max-width: 100%; padding: 48rem 40rem 40rem; border: 2rem solid rgba(53, 240, 224, 0.3); border-radius: 28rem; background: linear-gradient(165deg, var(--panel-2), var(--panel)); box-shadow: 0 0 80rem rgba(53, 240, 224, 0.15); text-align: center; }
.guide-modal-emoji { margin-bottom: 20rem; font-size: 72rem; }
.guide-modal-title { margin-bottom: 16rem; color: var(--ink); font-size: 36rem; font-weight: 800; letter-spacing: 0.08em; }
.guide-modal-body { margin-bottom: 32rem; color: var(--ink-dim); font-size: 26rem; line-height: 1.8; }
.guide-modal-body .hl { color: var(--cyan); font-weight: 600; }
.guide-modal-btn { width: 100%; height: 88rem; border-radius: 44rem; background: linear-gradient(100deg, var(--pink), #ff6ba6 55%, var(--amber)); box-shadow: 0 8rem 30rem rgba(255, 46, 126, 0.4); color: #1a0210; font-size: 30rem; font-weight: 700; letter-spacing: 0.1em; line-height: 88rem; }
.guide-modal-btn:active { transform: scale(0.97); }
.guide-modal-skip { margin-top: 20rem; padding: 0; background: transparent; color: var(--ink-faint); font-size: 22rem; letter-spacing: 0.08em; }

/* Signup page. */
.form-hero { padding: 26rem 40rem 34rem; }
.form-hero-title { color: var(--ink); font-size: 76rem; line-height: 1; text-shadow: 0 0 34rem rgba(53, 240, 224, 0.25); }
.form-hero-sub { margin-top: 14rem; color: var(--ink-dim); font-size: 24rem; letter-spacing: 0.1em; }
.form-card { margin: 0 32rem; padding: 44rem 36rem 40rem; border: 2rem solid var(--line); border-radius: 28rem; background: linear-gradient(165deg, rgba(19, 23, 49, 0.92), rgba(14, 17, 32, 0.96)); box-shadow: 0 24rem 80rem rgba(0, 0, 0, 0.5); }
.field { min-width: 0; margin: 0 0 34rem; padding: 0; border: 0; }
.field-label { display: flex; align-items: center; gap: 10rem; margin-bottom: 14rem; padding: 0; color: var(--ink); font-size: 26rem; font-weight: 600; letter-spacing: 0.06em; }
.field-label .req { color: var(--pink); font-size: 24rem; }
.field-label-en { margin-left: 6rem; color: var(--ink-faint); font-size: 20rem; letter-spacing: 0.26em; }
.field-input { display: block; width: 100%; height: 96rem; padding: 0 28rem; border: 2rem solid var(--line); border-radius: 18rem; outline: 0; background: rgba(255, 255, 255, 0.045); color: var(--ink); font-size: 30rem; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.field-input::placeholder { color: var(--ink-faint); opacity: 1; }
.field-input.focus { border-color: rgba(53, 240, 224, 0.65); background: rgba(53, 240, 224, 0.05); box-shadow: 0 0 0 4rem rgba(53, 240, 224, 0.12), 0 0 30rem rgba(53, 240, 224, 0.1); }
.field-input.error { border-color: rgba(255, 46, 126, 0.75); box-shadow: 0 0 0 4rem rgba(255, 46, 126, 0.14); animation: shake 0.35s; }
textarea.field-input { height: auto; min-height: 170rem; padding: 24rem 28rem; line-height: 1.6; resize: vertical; }
.field-tip { display: flex; align-items: center; gap: 6rem; margin: 10rem 0 0; color: var(--pink); font-size: 22rem; }
.field-tip::before { content: "⚠"; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8rem); } 75% { transform: translateX(8rem); } }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18rem; }
.chip { position: relative; min-height: 156rem; padding: 26rem 20rem; overflow: hidden; border: 2rem solid var(--line); border-radius: 18rem; background: rgba(255, 255, 255, 0.045); color: var(--ink); text-align: left; transition: all 0.25s; }
.chip-emoji, .chip-title, .chip-sub { display: block; }
.chip-emoji { margin-bottom: 10rem; font-size: 38rem; }
.chip-title { color: var(--ink); font-size: 28rem; font-weight: 600; }
.chip-sub { margin-top: 6rem; color: var(--ink-dim); font-size: 21rem; }
.chip.on { border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 0 30rem rgba(255, 46, 126, 0.22); transform: translateY(-2rem); }
.chip.on .chip-title { color: #ffd9e8; }
.chip.on::after { position: absolute; top: 12rem; right: 16rem; content: "✓"; color: var(--pink); font-size: 24rem; font-weight: 700; }
.chip:active { transform: scale(0.97); }
.note-field { animation: note-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes note-in { from { opacity: 0; transform: translateY(-16rem); } to { opacity: 1; transform: translateY(0); } }
.privacy { margin: 6rem 0 20rem; color: var(--ink-faint); font-size: 22rem; line-height: 1.7; }
.privacy-consent { display: flex; align-items: flex-start; gap: 14rem; margin: 0 0 30rem; color: var(--ink-dim); font-size: 22rem; line-height: 1.6; }
.privacy-checkbox { width: 28rem; height: 28rem; margin: 2rem 0 0; flex: 0 0 auto; accent-color: var(--cyan); }
.privacy-link { color: var(--cyan); text-decoration: underline; }
.privacy-error { margin: -16rem 0 24rem; }
.form-server-error { min-height: 0; margin: -12rem 0 22rem; color: var(--pink); font-size: 23rem; line-height: 1.55; }
.form-server-error:empty { display: none; }
.submit-btn { border: 0; }
.safe-bottom { height: calc(40rem + env(safe-area-inset-bottom)); }

/* Success and invitation page. */
.page-success { overflow: hidden; }
.confetti-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.confetti { position: fixed; bottom: -40rem; z-index: 5; width: 14rem; height: 26rem; border-radius: 4rem; animation: float-up 4.2s ease-in infinite; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1100rem) rotate(540deg); } }
.succ-head { padding: 30rem 40rem 10rem; text-align: center; }
.succ-badge { position: relative; display: flex; align-items: center; justify-content: center; width: 120rem; height: 120rem; margin: 0 auto 26rem; border-radius: 50%; background: linear-gradient(140deg, var(--pink), #ff6ba6); box-shadow: 0 0 50rem rgba(255, 46, 126, 0.6); animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.succ-check { margin-top: -6rem; color: #fff; font-size: 62rem; font-weight: 800; }
.succ-ring { position: absolute; inset: -14rem; border: 3rem solid rgba(255, 46, 126, 0.55); border-radius: 50%; animation: ring-out 1.8s ease-out infinite; }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ring-out { from { opacity: 1; transform: scale(0.8); } to { opacity: 0; transform: scale(1.5); } }
.succ-title { color: var(--ink); font-size: 88rem; line-height: 1; text-shadow: 0 0 36rem rgba(53, 240, 224, 0.3); }
.succ-sub { margin-top: 14rem; color: var(--ink-dim); font-size: 25rem; letter-spacing: 0.14em; }
.pass { position: relative; overflow: hidden; margin: 40rem 36rem 0; padding: 36rem 40rem 30rem; border: 2rem solid rgba(255, 194, 71, 0.35); border-radius: 24rem; background: linear-gradient(150deg, #1a1030, #101322 60%); box-shadow: 0 20rem 60rem rgba(0, 0, 0, 0.5), 0 0 40rem rgba(255, 194, 71, 0.08); }
.pass-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16rem; margin-bottom: 20rem; }
.pass-brand { color: var(--ink-dim); font-size: 28rem; letter-spacing: 0.18em; }
.pass-seat { color: var(--amber); font-size: 56rem; line-height: 1; text-shadow: 0 0 24rem rgba(255, 194, 71, 0.55); white-space: nowrap; }
.pass-seat-total { color: var(--ink-faint); font-size: 26rem; }
.pass-name { color: var(--ink); font-size: 44rem; font-weight: 800; letter-spacing: 0.08em; }
.pass-meta { margin-top: 8rem; color: var(--ink-dim); font-size: 25rem; }
.pass-tags { display: flex; flex-wrap: wrap; gap: 12rem; margin-top: 22rem; }
.pass-tag { padding: 6rem 14rem; border: 2rem solid rgba(53, 240, 224, 0.35); border-radius: 8rem; background: var(--cyan-soft); color: var(--cyan); font-size: 21rem; letter-spacing: 0.06em; }
.pass-barcode { height: 56rem; margin-top: 26rem; border-radius: 4rem; background: repeating-linear-gradient(90deg, rgba(245, 246, 252, 0.85) 0 4rem, transparent 4rem 9rem, rgba(245, 246, 252, 0.85) 9rem 11rem, transparent 11rem 18rem, rgba(245, 246, 252, 0.85) 18rem 24rem, transparent 24rem 30rem); opacity: 0.7; }
.qr-card { margin: 36rem 36rem 0; padding: 40rem 36rem 36rem; border: 2rem solid var(--line); border-radius: 28rem; background: rgba(255, 255, 255, 0.04); text-align: center; }
.qr-title { margin-bottom: 28rem; color: var(--ink); font-size: 34rem; font-weight: 800; letter-spacing: 0.16em; }
.qr-frame { position: relative; display: block; width: 440rem; max-width: 100%; margin: 0 auto; padding: 22rem; border-radius: 20rem; background: #fff; box-shadow: 0 0 60rem rgba(53, 240, 224, 0.18); }
.qr-img { display: block; width: 396rem; max-width: 100%; height: auto; aspect-ratio: 1; }
.qr-corner { position: absolute; width: 44rem; height: 44rem; border: 6rem solid var(--cyan); }
.qr-tl { top: -14rem; left: -14rem; border-right: 0; border-bottom: 0; border-radius: 12rem 0 0; }
.qr-tr { top: -14rem; right: -14rem; border-bottom: 0; border-left: 0; border-radius: 0 12rem 0 0; }
.qr-bl { bottom: -14rem; left: -14rem; border-top: 0; border-right: 0; border-radius: 0 0 0 12rem; }
.qr-br { right: -14rem; bottom: -14rem; border-top: 0; border-left: 0; border-radius: 0 0 12rem; }
.qr-steps { margin-top: 28rem; padding: 24rem 26rem; border: 2rem dashed rgba(53, 240, 224, 0.3); border-radius: 16rem; background: rgba(53, 240, 224, 0.06); text-align: left; }
.qr-step { display: flex; align-items: flex-start; gap: 14rem; padding: 10rem 0; }
.qr-step-no { flex: 0 0 36rem; min-width: 36rem; color: var(--cyan); font-size: 28rem; font-weight: 700; line-height: 1.6; }
.qr-step-txt { color: var(--ink-dim); font-size: 24rem; line-height: 1.6; }
.qr-hint { margin-top: 26rem; color: var(--ink-dim); font-size: 23rem; letter-spacing: 0.1em; }
.qr-unlock { display: flex; flex-wrap: wrap; justify-content: center; gap: 14rem 26rem; margin-top: 22rem; padding-top: 24rem; border-top: 2rem dashed var(--line); }
.qr-unlock-item { color: var(--ink-dim); font-size: 22rem; }
.succ-actions { margin: 44rem 36rem 0; }
.succ-reminder { display: flex; align-items: center; justify-content: center; gap: 12rem; margin: 40rem 40rem 0; color: var(--amber); font-size: 24rem; letter-spacing: 0.08em; text-align: center; }
.succ-reminder-ico { font-size: 30rem; }

/* Image viewer and compact status feedback. */
.image-preview { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24rem; padding: 42rem; background: rgba(0, 0, 0, 0.94); }
.image-preview img { display: block; max-width: 100%; max-height: calc(100vh - 160rem); object-fit: contain; }
.image-preview-close { position: fixed; top: 30rem; right: 30rem; width: 64rem; height: 64rem; border: 2rem solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: white; font-size: 50rem; line-height: 50rem; }
.image-preview p { margin: 0; color: var(--ink-dim); font-size: 22rem; text-align: center; }
.toast { position: fixed; bottom: calc(154rem + env(safe-area-inset-bottom)); left: 50%; z-index: 150; width: min(620rem, calc(100% - 64rem)); padding: 20rem 26rem; border: 2rem solid rgba(255, 46, 126, 0.45); border-radius: 18rem; background: rgba(19, 23, 49, 0.97); box-shadow: 0 16rem 46rem rgba(0, 0, 0, 0.4); color: var(--ink); font-size: 25rem; line-height: 1.5; text-align: center; transform: translateX(-50%); }

/* Privacy page keeps the original Mini Program document layout. */
.privacy-document .privacy-shell { position: relative; z-index: 1; width: min(100%, 750rem); min-height: 100vh; margin: 0 auto; }
.privacy-nav { position: fixed; top: 0; left: 50%; z-index: 50; display: flex; align-items: center; width: min(100%, 750rem); height: 128rem; transform: translateX(-50%); border-bottom: 1rem solid rgba(255, 255, 255, 0.06); background: linear-gradient(to bottom, rgba(7, 8, 15, 0.92), rgba(7, 8, 15, 0.78)); backdrop-filter: blur(14rem); }
.privacy-nav .nav-left { margin-top: 40rem; margin-left: 24rem; text-decoration: none; }
.privacy-nav .nav-title { top: 70rem; }
.privacy-content { padding: 156rem 32rem 56rem; }
.privacy-card { padding: 42rem 36rem; border: 2rem solid var(--line); border-radius: 28rem; background: linear-gradient(165deg, rgba(19, 23, 49, 0.92), rgba(14, 17, 32, 0.96)); box-shadow: 0 24rem 80rem rgba(0, 0, 0, 0.5); }
.privacy-title { margin: 20rem 0 42rem; color: var(--ink); font-size: 62rem; line-height: 1.05; }
.privacy-version { margin-top: -24rem; color: var(--ink-faint); font-size: 22rem; }
.privacy-section { margin-top: 32rem; }
.privacy-heading { padding-left: 18rem; border-left: 5rem solid var(--cyan); color: var(--ink); font-size: 30rem; font-weight: 600; }
.privacy-copy { margin-top: 16rem; color: var(--ink-dim); font-size: 27rem; line-height: 1.85; }

@media (max-width: 360px) {
  .hero-line { font-size: 176rem; }
  .hero-line-2 { margin-left: 78rem; }
  .hero-cn { align-items: flex-start; flex-direction: column; gap: 12rem; }
  .hero-cn-sub { font-size: 22rem; }
  .chip-grid { gap: 14rem; }
  .chip { padding: 22rem 16rem; }
  .chip-sub { font-size: 19rem; }
  .pass-top { align-items: flex-start; flex-direction: column; }
  .pass-seat { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}