/* R59 展会/快闪活动H5 v1 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5;
  padding-bottom: calc(8.75rem + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
button, input { font: inherit; }
a { color: var(--primary); }

.glass-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; backdrop-filter: blur(8px);
}

.section { padding: 2rem 1.25rem; max-width: 960px; margin: 0 auto; }
.section__title { font-size: 1.15rem; font-weight: 800; margin: 0 0 1rem; color: var(--primary); }
.section__sub { font-size: .85rem; color: var(--text-muted); text-align: center; }

.persona-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; justify-content: center; }
.persona-btn {
  border: 1px solid var(--border); background: rgba(0,0,0,.2); color: var(--text);
  padding: .35rem .65rem; border-radius: 999px; font-size: .72rem; cursor: pointer;
}
.persona-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.theme-panel {
  position: fixed; right: .75rem; top: 50%; transform: translateY(-50%);
  z-index: 800; display: flex; flex-direction: column; gap: .4rem;
}
.theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.theme-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.theme-appearance-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; font-size: .9rem;
}

.hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, var(--bg) 100%);
}
.hero__content { position: relative; z-index: 2; padding: 2rem 1.25rem; width: 100%; max-width: 720px; margin: 0 auto; text-align: center; }
.hero__subtitle { font-size: .85rem; letter-spacing: .2em; color: var(--secondary); margin: 0 0 .5rem; }
.hero__title { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; margin: 0 0 1rem; line-height: 1.2; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; font-size: .82rem; color: var(--text-muted); }
.hero__scroll { margin-top: 2rem; font-size: .75rem; color: var(--text-muted); }
.scroll-arrow {
  width: 20px; height: 20px; border-right: 2px solid var(--secondary); border-bottom: 2px solid var(--secondary);
  transform: rotate(45deg); margin: .5rem auto 0; animation: bounce 1.5s infinite;
}
@keyframes bounce { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(6px); } }

.countdown-section { text-align: center; }
.countdown-grid { display: flex; justify-content: center; align-items: flex-start; gap: .35rem; flex-wrap: wrap; }
.countdown-item { min-width: 56px; }
.countdown-num {
  display: block; font-size: 2rem; font-weight: 800; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .5rem .35rem;
}
.countdown-label { font-size: .68rem; color: var(--text-muted); margin-top: .25rem; display: block; }
.countdown-sep { font-size: 1.5rem; font-weight: 700; color: var(--secondary); padding-top: .5rem; }
.early-bird-badge { margin-top: 1rem; display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,107,107,.15); color: var(--accent); font-size: .8rem; }

.bento-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.bento-large { grid-column: 1 / -1; padding: 1.25rem; }
.bento-large h3 { margin: 0 0 .5rem; font-size: .95rem; }
.bento-large p { margin: 0; font-size: .85rem; color: var(--text-muted); }
.bento-stat { padding: 1rem; text-align: center; }
.stat-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: .72rem; color: var(--text-muted); }
.bento-gallery { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.bento-gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px; }
@media (min-width: 640px) {
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
  .bento-large { grid-column: span 2; }
  .bento-gallery { grid-column: span 2; }
}

.sticky-tabs { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .25rem; }
.tab-btn, .venue-tab {
  flex-shrink: 0; border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  padding: .45rem .85rem; border-radius: 999px; font-size: .78rem; cursor: pointer;
}
.tab-btn.active, .venue-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.timeline { display: flex; flex-direction: column; gap: .65rem; }
.timeline-item { padding: 0; overflow: hidden; }
.timeline-item__head {
  width: 100%; text-align: left; border: none; background: transparent; color: var(--text);
  padding: 1rem; cursor: pointer; display: flex; gap: .75rem; align-items: flex-start;
}
.timeline-time { font-weight: 800; color: var(--secondary); min-width: 3rem; font-size: .85rem; }
.timeline-title { font-size: .88rem; font-weight: 600; }
.timeline-item__body { padding: 0 1rem 1rem; font-size: .82rem; color: var(--text-muted); }

.filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filter-btn {
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  padding: .4rem .7rem; border-radius: 999px; font-size: .75rem; cursor: pointer;
}
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-btn em { font-style: normal; opacity: .7; margin-left: .2rem; }

.exhibitor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .exhibitor-grid { grid-template-columns: repeat(3, 1fr); } }
.exhibitor-card { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.exhibitor-card.featured { border-color: var(--secondary); box-shadow: 0 0 20px rgba(0,212,255,.15); }
.exhibitor-card__logo {
  width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
}
.exhibitor-card h3 { margin: 0; font-size: .9rem; }
.exhibitor-card__booth { margin: 0; font-size: .72rem; color: var(--secondary); }
.exhibitor-card__intro { margin: 0; font-size: .75rem; color: var(--text-muted); flex: 1; }

.ticket-scroll { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; scroll-snap-type: x mandatory; }
.ticket-card { min-width: 220px; scroll-snap-align: start; padding: 1rem; cursor: pointer; border: 2px solid transparent; }
.ticket-card.active { border-color: var(--primary); }
.ticket-card h3 { margin: 0 0 .5rem; font-size: .95rem; }
.ticket-price strong { font-size: 1.4rem; color: var(--primary); }
.ticket-price s { margin-left: .35rem; font-size: .8rem; color: var(--text-muted); }
.ticket-perks { margin: .5rem 0; padding-left: 1.1rem; font-size: .75rem; color: var(--text-muted); }
.ticket-left { margin: 0; font-size: .72rem; color: var(--secondary); }

.map-card { padding: 1rem; margin-bottom: 1rem; }
.map-address { font-size: .85rem; margin: 0 0 .75rem; }
.map-placeholder {
  height: 160px; border-radius: 12px; background: var(--bg-alt); border: 1px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: .75rem;
}
.map-placeholder span { font-size: 2rem; }
.nearby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.nearby-list li { padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .82rem; }
.nearby-type { font-size: .68rem; padding: .15rem .45rem; border-radius: 4px; background: var(--primary); color: #fff; }

.floating-cta {
  position: fixed; left: 0; right: 0;
  bottom: calc(4.75rem + env(safe-area-inset-bottom));
  z-index: 845; display: flex; gap: .5rem; padding: .5rem 1rem; pointer-events: none;
}
.floating-cta .cta-btn { pointer-events: auto; flex: 1; border: none; border-radius: 999px; padding: .75rem 1rem; font-weight: 700; cursor: pointer; font-size: .88rem; }
.cta-btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.cta-btn.share { flex: 0 0 auto; background: var(--card); color: var(--text); border: 1px solid var(--border); min-width: 4rem; }

.modal { position: fixed; inset: 0; z-index: 920; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal__box { position: relative; width: 100%; max-width: 400px; max-height: 85vh; overflow-y: auto; padding: 1.25rem; margin-bottom: env(safe-area-inset-bottom); }
@media (min-width: 640px) { .modal { align-items: center; } }

.form-steps { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: .72rem; color: var(--text-muted); }
.form-steps span.active { color: var(--primary); font-weight: 700; }
.form-field { margin-bottom: .75rem; }
.form-field label { display: block; font-size: .78rem; margin-bottom: .25rem; color: var(--text-muted); }
.form-field input { width: 100%; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); }

.btn { display: inline-block; text-align: center; border-radius: 10px; padding: .65rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; border: none; }
.btn-block { display: block; width: 100%; margin-top: .5rem; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-sm { padding: .4rem .65rem; font-size: .78rem; }

.ticket-success { text-align: center; padding: 1rem 0; }
.ticket-success__icon { font-size: 2.5rem; }
.ticket-no { font-family: monospace; color: var(--secondary); font-size: .85rem; }

.poster-preview { text-align: center; padding: 1.5rem 1rem; border-radius: 12px; background: var(--bg-alt); margin-bottom: 1rem; }
.poster-preview h3 { margin: 0 0 .5rem; color: var(--primary); }
.poster-foot { font-size: .72rem; color: var(--text-muted); }
#poster-qr { display: flex; justify-content: center; margin: 1rem 0; }

.detail-panel__head { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.exhibitor-logo {
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;
}
.detail-booth { font-size: .78rem; color: var(--secondary); }
.detail-panel__body { font-size: .88rem; color: var(--text-muted); }
.detail-speaker { font-size: .88rem; }
.detail-meta { font-size: .82rem; color: var(--text-muted); }

.expo-toast {
  position: fixed; left: 50%; bottom: calc(9.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(0,0,0,.85); color: #fff; padding: .55rem 1rem; border-radius: 999px;
  font-size: .82rem; z-index: 930; opacity: 0; pointer-events: none; transition: .25s;
}
.expo-toast--show { opacity: 1; }

.share-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.share-card { max-width: 360px; width: 100%; padding: 1.5rem; text-align: center; }
.share-card__stats { display: flex; justify-content: space-around; margin: 1rem 0; font-size: .85rem; color: var(--text-muted); }

[data-appearance="light"] .hero__overlay { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, var(--bg) 100%); }
[data-appearance="light"] .persona-btn { background: rgba(255,255,255,.8); }

.contact-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  padding: .45rem .75rem calc(.45rem + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
}
.contact-footer__btns {
  display: flex; flex-wrap: nowrap; gap: .35rem; justify-content: center;
  max-width: 420px; margin: 0 auto;
}
.contact-footer__cta,
.contact-footer__btn {
  flex: 1; min-width: 0; padding: .45rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.25;
}
.contact-footer__cta {
  background: #c41e1e; color: #fff !important; border: 1px solid #c41e1e;
}
.contact-footer__btn {
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); cursor: pointer;
}
.contact-footer__brand {
  text-align: center; font-size: .62rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.35;
}
html.has-contact-footer .zw-root .zw-fab {
  bottom: calc(5.75rem + env(safe-area-inset-bottom));
}