/* ===========================================================================
   OASIS V3 候选版 · 会员端
   依赖 /v3/tokens.css。业务 DOM 由 /app.js 生成，本文件负责全部呈现。
   排版原则：业务中文正体、展示标题运动斜体、行高 >= 1.04、中文无负字距。
   =========================================================================== */

html {
  min-height: 100%;
  color-scheme: dark;
  background: #16161a;
}

body.member-v3 {
  min-height: 100%;
  background: #16161a;
  color: var(--ink-1);
}

.member-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-page);
}

@media (min-width: 480px) {
  .member-shell {
    box-shadow: 0 0 0 1px var(--line-soft), 0 24px 80px rgba(0, 0, 0, 0.6);
  }
}

.poster {
  min-height: 100vh;
  background: var(--surface-page);
}

.poster-view {
  min-height: 100vh;
  padding-bottom: calc(var(--sp-16) + 24px + env(safe-area-inset-bottom));
}

#bookingTab {
  padding-bottom: calc(42vh + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- 登录态 */
.poster-login {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  padding: var(--sp-16) var(--sp-5) var(--sp-16);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), var(--surface-page) 88%),
    url("/assets/gym-hero.png") center top / cover;
}

.poster-login-panel > .u-tick {
  width: 72px;
  margin-bottom: var(--sp-4);
}

.poster-login-panel > span {
  color: var(--brand);
}

.poster-login h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-display);
}

.poster-login h1 em {
  color: var(--brand);
  font-style: normal;
}

.poster-login p {
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.toast {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.toast.error {
  color: var(--alert);
}

/* ============================================================== 首屏海报 */
.poster-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: var(--sp-10) var(--sp-5) var(--sp-6);
}

.poster-hero-media {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1) 30%, var(--surface-page) 96%),
    var(--poster-hero-image, url("/assets/gym-hero.png")) center 30% / cover;
}

.poster-hero-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.poster-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.poster-brand {
  font-size: var(--fs-body);
  letter-spacing: var(--ls-en-tight);
}

.poster-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.poster-number {
  position: absolute;
  top: 96px;
  right: var(--sp-5);
  color: var(--brand);
  writing-mode: vertical-rl;
}

.poster-copy {
  padding-top: var(--sp-8);
}

.poster-copy-tick {
  width: 88px;
  margin-bottom: var(--sp-3);
}

.poster-copy small {
  display: inline-block;
  padding: 5px 8px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-style: normal;
  letter-spacing: var(--ls-en-tight);
}

.poster-copy h1 {
  max-width: 6em;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-display-lg);
}

.poster-copy h1 em {
  color: var(--brand);
  font-style: inherit;
}

/* V3 首页融合规则：沿用 Claude V2 的字号与安全行高，只把展示性中文大标题
   恢复为 V1 的运动斜体；正文、业务数据和卡片信息继续保持正体。 */
#homeTab .poster-copy h1,
#homeTab .poster-gallery-preview-head strong,
#homeTab .poster-block-head h2,
#homeTab .poster-footer-cta h2 {
  font-synthesis-style: auto;
  font-style: italic;
  letter-spacing: var(--ls-cn);
  line-height: var(--lh-title);
}

.poster-copy p {
  max-width: 24ch;
  margin-top: var(--sp-4);
  color: var(--ink-2);
  font-size: var(--fs-caption);
}

/* ============================================================== 今日训练 */
.poster-today {
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
}

.poster-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  color: var(--ink-3);
}

.poster-section-label b {
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en-tight);
}

.poster-section-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.poster-section-action b {
  color: var(--brand);
}

.poster-section-action:hover {
  border-color: var(--brand-line);
  color: var(--ink-1);
}

/* V3「今日训练」确认色：标题和独立操作条使用标准荧光黄，说明文字保持灰色。 */
#homeScheduleFeatured .poster-empty-state strong {
  color: var(--brand);
}

.poster-today .poster-section-action {
  color: var(--brand);
}

.poster-today .poster-section-action:hover {
  color: var(--brand);
}

/* 今日主课程卡 */
.poster-class {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.poster-class time {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.poster-class h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-class p {
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.poster-go {
  align-self: stretch;
  min-width: 78px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 1.3;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.poster-schedule-more {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.poster-schedule-more:empty {
  display: none;
}

.poster-home-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 90px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.poster-home-session.is-featured {
  min-height: 110px;
  border-color: var(--brand-line);
}

.poster-home-session.is-compact {
  min-height: 90px;
}

.poster-home-session-copy {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
}

.poster-home-session.is-featured .poster-home-session-copy {
  padding-block: var(--sp-4);
}

.poster-home-session time {
  display: block;
  color: var(--brand);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.poster-home-session h3 {
  margin-top: var(--sp-2);
  color: var(--ink-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-home-session.is-featured h3 {
  font-size: var(--fs-h3);
}

.poster-home-session.is-compact h3 {
  margin-top: 7px;
}

.poster-home-session p {
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.poster-home-session.is-compact p {
  margin-top: 6px;
}

.poster-home-session-action {
  display: grid;
  align-self: stretch;
  min-width: 76px;
  min-height: var(--tap-min);
  padding: var(--sp-2);
  border-left: 1px solid var(--brand-line);
  place-content: center;
  background: var(--surface-raised);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 1.25;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.poster-home-session.is-featured .poster-home-session-action {
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-home-session:hover .poster-home-session-action,
.poster-home-session:focus-visible .poster-home-session-action {
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-home-session:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ============================================================ 训练动态入口 */
.poster-gallery-preview {
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-sunken);
}

.poster-gallery-preview.compact {
  padding: 0;
  border-top: 0;
  background: transparent;
}

.poster-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
}

.poster-gallery-preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.poster-gallery-preview-head small {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-gallery-preview-head strong {
  display: block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-gallery-preview-head > span:last-child {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: right;
}

.poster-gallery-strip {
  position: relative;
  isolation: isolate;
  display: block;
  height: 168px;
}

.poster-gallery-strip::before,
.poster-gallery-strip::after {
  content: "";
  position: absolute;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.poster-gallery-strip::before {
  z-index: -2;
  inset: 12px 0 -8px 18px;
  transform: rotate(1.6deg);
}

.poster-gallery-strip::after {
  z-index: -1;
  inset: 6px 7px -4px 10px;
  transform: rotate(-1deg);
}

.poster-gallery-strip figure {
  position: absolute;
  inset: 0 14px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.poster-gallery-strip figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================= 区块 */
.poster-block {
  padding: var(--sp-8) var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

.poster-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.poster-block-head .u-tick {
  width: 56px;
  margin-bottom: var(--sp-3);
}

.poster-block-head small {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--brand);
}

.poster-block-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.poster-block-head h2 {
  font-size: var(--fs-h2);
}

.poster-block-head > span {
  flex: 0 0 auto;
  max-width: 108px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  text-align: right;
}

.poster-block-head > span b {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- 快速预约 */
.poster-booking-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.poster-booking-shortcut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 104px;
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
  color: var(--ink-1);
  text-align: left;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.poster-booking-shortcut-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  pointer-events: none;
}

.poster-booking-shortcut:nth-child(2) .poster-booking-shortcut-media {
  object-position: 50% 68%;
}

.poster-booking-shortcut::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 9, 8, 0.94) 0%, rgba(9, 9, 8, 0.74) 58%, rgba(9, 9, 8, 0.5) 100%);
  pointer-events: none;
}

.poster-booking-shortcut > :not(.poster-booking-shortcut-media) {
  position: relative;
  z-index: 2;
}

.poster-booking-shortcut:hover,
.poster-booking-shortcut:focus-visible {
  border-color: var(--brand-line);
}

.poster-booking-shortcut span {
  min-width: 0;
}

.poster-booking-shortcut small {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.poster-booking-shortcut strong {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
  white-space: nowrap;
}

.poster-booking-shortcut b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  color: var(--brand);
}

/* --------------------------------------------------------------- 教练 */
.poster-coach-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
}

.poster-coach-track::-webkit-scrollbar,
.poster-venue-track::-webkit-scrollbar,
.training-feed-dates::-webkit-scrollbar {
  display: none;
}

.poster-coach-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 100%;
  min-height: 208px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--brand-dim), transparent 46%), var(--surface-panel);
  color: var(--ink-1);
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.poster-coach-mark {
  position: absolute;
  top: -8px;
  right: 0;
  color: rgba(217, 255, 69, 0.07);
  font-size: 150px;
  font-weight: var(--fw-black);
  line-height: 1;
}

.poster-coach-index {
  position: relative;
  display: block;
  color: var(--brand);
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-coach-card h3 {
  position: relative;
  margin-top: var(--sp-10);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-coach-card p {
  position: relative;
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.poster-coach-card time {
  position: relative;
  display: block;
  margin-top: var(--sp-4);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.poster-coach-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
}

.poster-coach-dot,
.poster-venue-dot {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
}

.poster-coach-dot::before,
.poster-venue-dot::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--line-strong);
  transition: background var(--dur) var(--ease);
}

.poster-coach-dot.is-active::before,
.poster-venue-dot.active::before {
  background: var(--brand);
}

/* ------------------------------------------------------------- 会员权益 */
.poster-membership {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-membership-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid rgba(13, 15, 8, 0.3);
}

.poster-membership-detail {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(13, 15, 8, 0.3);
  font-size: calc(var(--fs-caption) + 2px);
  font-weight: var(--fw-bold);
}

.poster-membership-stats,
.poster-mine-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.poster-membership-stat {
  min-width: 0;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid rgba(13, 15, 8, 0.24);
  text-align: center;
}

.poster-membership-stat:last-child,
.poster-mine-stat:last-child {
  border-right: 0;
}

.poster-membership-stat strong {
  display: block;
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1;
}

.poster-membership-stat span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.poster-membership-stat:not(:last-child) span {
  white-space: nowrap;
}

.poster-membership button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - var(--sp-6));
  min-height: var(--control-h);
  margin: 0 var(--sp-3) var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--ink-on-brand);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

/* --------------------------------------------------------------- 场馆 */
.poster-venue-card {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

.poster-venue-carousel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--surface-sunken);
}

.poster-venue-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.poster-venue-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

.poster-venue-pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  transform: translateX(-50%);
}

.poster-venue-copy {
  padding: var(--sp-4);
}

.poster-venue-copy small {
  display: block;
  color: var(--brand);
}

.poster-venue-copy h3 {
  margin: var(--sp-2) 0;
  font-size: var(--fs-h3);
}

.poster-venue-copy p {
  max-width: none;
  color: var(--ink-2);
  font-size: var(--fs-caption);
}

.poster-venue-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.poster-venue-action span:first-child {
  color: var(--ink-3);
}

.poster-venue-action a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--brand);
  text-decoration: none;
}

/* ------------------------------------------------------------ 页尾行动 */
.poster-footer-cta {
  padding: var(--sp-12) var(--sp-5);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-footer-cta .u-tick {
  width: 88px;
  margin-bottom: var(--sp-4);
  background-image: repeating-linear-gradient(115deg, var(--ink-on-brand) 0 3px, transparent 3px 7px);
}

.poster-footer-cta span {
  display: block;
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-footer-cta h2 {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: var(--fs-display);
}

.poster-footer-cta button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 var(--sp-5);
  background: var(--ink-on-brand);
  color: var(--brand);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
}

/* ============================================================= 子页面头 */
.poster-subpage {
  padding: var(--sp-10) var(--sp-5) calc(var(--sp-16) + 40px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(217, 255, 69, 0.1), transparent 60%),
    var(--surface-page);
}

.poster-page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}

.poster-page-brand {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-en-tight);
}

.poster-page-index {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.poster-page-tick {
  width: 72px;
  margin-bottom: var(--sp-3);
}

.poster-page-kicker {
  display: block;
  color: var(--brand);
}

.poster-page-title {
  margin: var(--sp-3) 0;
  font-synthesis-style: auto;
  font-size: var(--fs-h1);
  font-style: italic;
  letter-spacing: var(--ls-cn);
}

.poster-page-intro {
  min-height: 20px;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.poster-page-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.poster-page-logout {
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------ 课程切换 */
.poster-course-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-6);
  padding: var(--sp-1);
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

.course-tab {
  min-height: var(--control-h);
  color: var(--ink-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.course-tab.active {
  background: var(--brand);
  color: var(--ink-on-brand);
  font-weight: var(--fw-black);
}

.poster-dates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-4);
}

.poster-date {
  display: grid;
  gap: var(--sp-1);
  place-items: center;
  min-height: 64px;
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.poster-date b {
  color: var(--ink-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.poster-date.active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-date.active b {
  color: var(--ink-on-brand);
}

.poster-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.poster-filters select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 0 var(--sp-6) 0 var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

/* ------------------------------------------------------------ 团课卡片 */
.poster-booking-list {
  display: grid;
  gap: var(--sp-2);
}

.poster-booking-card {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

.poster-booking-card.featured {
  border-color: var(--brand-line);
  background:
    linear-gradient(105deg, rgba(12, 12, 10, 0.97), rgba(12, 12, 10, 0.78)),
    url("/assets/gym-hero.png") right center / cover;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.poster-booking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.poster-booking-head time {
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.poster-booking-head b {
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-tight);
}

.poster-booking-card h3 {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-booking-card p {
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

/* 紧凑场次 */
.poster-class-compact {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  min-height: var(--control-h);
  padding: 0;
  color: inherit;
  text-align: left;
}

.poster-class-compact time {
  color: var(--brand);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.poster-class-compact h3 {
  margin: 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
}

.poster-class-compact p {
  margin-top: var(--sp-1);
}

.poster-class-compact b {
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

/* 训练位 */
.poster-seats-label {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-tight);
}

.poster-seat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.poster-seat {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: var(--control-h-sm);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.poster-seat.occupied,
.poster-seat.cancelled {
  background: var(--surface-sunken);
  color: var(--ink-4);
  text-decoration: line-through;
}

.poster-seat.mine,
.poster-seat.selected {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

/* 主操作 */
.poster-book-action,
.poster-private-book {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-3);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

.poster-book-action:disabled,
.poster-private-book:disabled {
  background: var(--surface-raised);
  color: var(--ink-4);
}

.poster-cancel {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--sp-3);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.poster-cancel:hover {
  border-color: var(--alert);
  color: var(--alert);
}

/* ------------------------------------------------------------ 私教预约 */
.poster-private-head {
  position: relative;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

.poster-private-head .u-tick {
  width: 64px;
  margin-bottom: var(--sp-3);
}

.poster-private-head small {
  display: block;
  color: var(--brand);
}

.poster-private-head h2 {
  margin-top: var(--sp-3);
  font-synthesis-style: auto;
  font-size: var(--fs-h2);
  font-style: italic;
  letter-spacing: var(--ls-cn);
  line-height: var(--lh-title);
}

.poster-private-head > span {
  position: absolute;
  right: 0;
  bottom: var(--sp-1);
  padding-bottom: var(--sp-1);
  color: var(--ink-4);
  font-size: var(--fs-micro);
  white-space: nowrap;
}

.poster-private-coach-track {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-2);
  overflow-x: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.poster-private-coach-track.is-single {
  display: grid;
  grid-template-columns: 1fr;
}

.poster-private-coach-track.is-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: visible;
  scroll-snap-type: none;
}

.poster-private-coach-track.is-scroll {
  overflow-x: auto;
}

.poster-private-coach-track.is-scroll .poster-private-coach {
  flex-basis: calc(50% - var(--sp-3));
}

.poster-private-coach-track::-webkit-scrollbar {
  display: none;
}

.poster-private-coach {
  position: relative;
  isolation: isolate;
  flex: 0 0 calc(50% - var(--sp-2));
  min-height: 128px;
  overflow: hidden;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--ink-1);
  text-align: left;
  scroll-snap-align: start;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.poster-private-coach::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 4px;
  background: transparent;
}

.poster-private-coach.is-active {
  border-color: var(--brand);
  background: var(--surface-raised);
}

.poster-private-coach.is-active::before {
  background: var(--brand);
}

.poster-private-coach-index {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en-tight);
  white-space: nowrap;
}

.poster-private-coach-mark {
  position: absolute;
  z-index: -1;
  top: -8px;
  right: var(--sp-1);
  color: var(--line-soft);
  font-size: 80px;
  font-weight: var(--fw-black);
  line-height: 1;
}

.poster-private-coach strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: var(--sp-4);
  font-synthesis-style: auto;
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: var(--lh-title);
}

.poster-private-coach p {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  min-height: calc(var(--fs-caption) * var(--lh-snug));
  margin-top: var(--sp-1);
  overflow: hidden;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.poster-private-coach time {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-tight);
  white-space: nowrap;
}

.poster-private-coach-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  border-bottom: 1px solid var(--line-soft);
}

.poster-private-coach-nav[hidden] {
  display: none;
}

.poster-private-coach-nav > span:first-child {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-tight);
}

.poster-private-coach-arrows {
  display: grid;
  grid-template-columns: repeat(2, var(--tap-min));
}

.poster-private-coach-arrows button {
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-left: 1px solid var(--line-soft);
  color: var(--brand);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
}

.poster-private-coach-arrows button:disabled {
  color: var(--ink-4);
  cursor: default;
  opacity: 0.45;
}

.poster-private-type-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

.poster-private-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.poster-private-step span {
  color: var(--brand);
  font-size: var(--fs-micro);
}

.poster-private-step strong {
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.poster-private-type-options {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.poster-private-type-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: calc(var(--tap-min) + var(--sp-2));
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-2);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.poster-private-type-name {
  display: grid;
  grid-template-columns: var(--sp-6) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.poster-private-type-index {
  color: var(--ink-4);
  font-weight: var(--fw-bold);
}

.poster-private-type-name strong {
  overflow: hidden;
  color: inherit;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-private-type-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-3);
}

.poster-private-type-meta b {
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.poster-private-type-check {
  width: var(--sp-4);
  opacity: 0;
  font-size: var(--fs-body-lg);
  font-style: normal;
  font-weight: var(--fw-black);
  line-height: 1;
  text-align: center;
}

.poster-private-type-choice.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-private-type-choice.is-active .poster-private-type-index,
.poster-private-type-choice.is-active .poster-private-type-meta {
  color: var(--ink-on-brand);
}

.poster-private-type-choice.is-active .poster-private-type-check {
  opacity: 1;
}

.poster-private-time-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  background: var(--surface-panel);
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

.poster-private-time-step span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.poster-private-time-step small {
  color: var(--ink-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.poster-private-time-step strong {
  color: var(--brand);
  font-size: var(--fs-body);
}

.poster-slot-panel {
  margin-top: var(--sp-5);
}

.poster-slot-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en-tight);
}

.poster-time-choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}

.slot {
  min-height: 52px;
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
}

.slot small {
  display: block;
  margin-top: 2px;
  color: var(--ink-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

.slot.selected {
  border-color: var(--brand);
  background: var(--brand-dim);
  color: var(--brand);
}

.poster-private-confirm {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--brand-line);
  background: var(--surface-panel);
}

.poster-private-confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.poster-private-confirm p {
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.poster-private-confirm button {
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-3);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

.poster-private-confirm button:disabled {
  background: var(--surface-raised);
  color: var(--ink-4);
}

/* ================================================================ 我的 */
.poster-mine-hero {
  margin: var(--sp-6) 0 var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-member-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.poster-member-line small,
.poster-member-line span {
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-member-line span {
  opacity: 0.68;
}

.poster-mine-hero h2 {
  margin: var(--sp-6) 0 var(--sp-1);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-mine-hero p {
  font-size: calc(var(--fs-caption) + 2px);
  font-weight: var(--fw-bold);
}

.poster-mine-stats {
  margin-top: var(--sp-5);
  border-top: 1px solid rgba(13, 15, 8, 0.3);
}

.poster-mine-stat {
  padding: var(--sp-4) var(--sp-3) 0;
  border-right: 1px solid rgba(13, 15, 8, 0.24);
  text-align: center;
}

.poster-mine-stat strong {
  display: block;
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1;
}

.poster-mine-stat span {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.poster-mine-stat:not(:last-child) span {
  white-space: nowrap;
}

.poster-mine-records-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--sp-4);
  padding: 0 var(--sp-4);
  background: var(--ink-on-brand);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.poster-membership-notice {
  margin-top: calc(var(--sp-3) * -1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--brand) 56%, transparent);
  background: var(--surface-panel);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
}

.poster-mine-section {
  margin-top: var(--sp-8);
}

.poster-mine-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-mine-section-head span:last-child {
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: var(--ls-cn);
}

.poster-next-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 90px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-panel);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.poster-next-booking.is-featured {
  min-height: 110px;
  border-color: var(--brand-line);
}

.poster-next-copy {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
}

.poster-next-booking.is-featured .poster-next-copy {
  padding-block: var(--sp-4);
}

.poster-next-booking time {
  display: block;
  color: var(--brand);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.poster-next-booking h3 {
  margin-top: var(--sp-2);
  color: var(--ink-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-next-booking.is-featured h3 {
  font-size: var(--fs-h3);
}

.poster-next-booking p {
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.poster-next-list {
  display: grid;
  gap: var(--sp-2);
}

.poster-next-item:has(.poster-mine-section-head) {
  margin-top: var(--sp-3);
}

.poster-next-item:first-child {
  margin-top: 0;
}

.poster-next-action {
  display: grid;
  align-self: stretch;
  min-width: 76px;
  min-height: var(--tap-min);
  padding: var(--sp-2);
  border-left: 1px solid var(--brand-line);
  place-content: center;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 1.25;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.poster-next-action:hover,
.poster-next-action:focus-visible {
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-next-action.is-cancel-armed {
  background: var(--surface-raised);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.poster-next-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}

.poster-next-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--sp-3);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.poster-next-all:hover,
.poster-next-all:focus-visible {
  border-color: var(--brand-line);
}

.poster-next-all:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.poster-training-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.poster-summary-card {
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

.poster-summary-card span {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.poster-summary-card strong {
  display: block;
  margin-top: var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.poster-summary-card p {
  margin-top: var(--sp-2);
  color: var(--ink-4);
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
}

.poster-history {
  display: grid;
}

.poster-history-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.poster-history-item time {
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-snug);
}

.poster-history-item strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.poster-history-item span {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.poster-history-item > b {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.poster-history-item .poster-cancel {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--sp-3);
}

.poster-bookings-summary-action {
  width: 100%;
  min-height: 112px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--ink-1);
  text-align: left;
}

.poster-bookings-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--brand);
  font-size: var(--fs-micro);
  font-style: italic;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
}

.poster-bookings-summary-head span:last-child {
  font-style: normal;
  letter-spacing: var(--ls-cn);
}

.poster-bookings-summary-metric {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.poster-bookings-summary-metric strong {
  color: var(--brand);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
}

.poster-bookings-summary-metric span,
.poster-bookings-summary-metric small {
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.poster-bookings-summary-metric small {
  margin-left: auto;
}

.poster-bookings-view .poster-page-title {
  margin-bottom: var(--sp-6);
}

.poster-bookings-page-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: var(--sp-4);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-bookings-page-summary span,
.poster-bookings-page-summary small {
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

.poster-bookings-page-summary strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: 0.9;
}

.poster-bookings-page-summary small {
  margin-top: var(--sp-1);
  opacity: 0.72;
}

.poster-bookings-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: var(--sp-5) 0 var(--sp-2);
  border: 1px solid var(--line);
  background: var(--line);
}

.poster-bookings-filters button {
  min-height: 44px;
  padding: 0 var(--sp-1);
  background: var(--surface-panel);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.poster-bookings-filters button.active {
  background: var(--brand);
  color: var(--ink-on-brand);
}

.poster-bookings-history {
  min-height: 180px;
}

.poster-bookings-more {
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-4);
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

/* ============================================================== 空态 */
.poster-empty-state {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  place-items: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  text-align: center;
}

/* 空态用顶部一条荧光绿斜刻度做标记，而不是整块斜纹底 */
.poster-empty-state::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background-image: repeating-linear-gradient(115deg, var(--brand) 0 3px, transparent 3px 7px);
}

.poster-empty-state strong {
  color: var(--ink-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.poster-empty-state p {
  max-width: 30ch;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

/* ========================================================== 训练动态页 */
.training-feed-view {
  padding: var(--sp-10) var(--sp-4) calc(var(--sp-16) + 56px + env(safe-area-inset-bottom));
  background: var(--surface-page);
}

.poster-gallery-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-3);
}

.poster-gallery-back {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--brand);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
}

.poster-gallery-title {
  margin-top: var(--sp-6);
}

.poster-gallery-title .u-tick {
  width: 72px;
  margin-bottom: var(--sp-3);
}

.poster-gallery-title small {
  display: block;
  color: var(--brand);
}

.poster-gallery-title h1 {
  margin: var(--sp-3) 0;
  font-size: var(--fs-h1);
}

.poster-gallery-title p {
  max-width: 36ch;
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.training-feed-dates {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  margin: var(--sp-5) calc(var(--sp-4) * -1) var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-1);
  scrollbar-width: none;
}

.training-feed-date {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.training-feed-date.active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.training-feed-post {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface-panel);
}

.training-feed-author {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.training-feed-author strong {
  display: block;
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.training-feed-author time {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

.training-feed-photo-stack {
  position: relative;
  isolation: isolate;
  height: 344px;
  min-height: 220px;
  max-height: 520px;
  margin: 0 var(--sp-2) var(--sp-5) 0;
  transition: height var(--dur) var(--ease);
}

.training-feed-photo-stack::before,
.training-feed-photo-stack::after {
  content: "";
  position: absolute;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.training-feed-photo-stack::before {
  z-index: -2;
  inset: 14px -9px -11px 15px;
  transform: rotate(1.5deg);
}

.training-feed-photo-stack::after {
  z-index: -1;
  inset: 7px -4px -6px 8px;
  transform: rotate(-1deg);
}

.training-feed-photo-button {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  width: 100%;
  padding: 0;
  background: var(--surface-sunken);
}

.training-feed-photo-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.training-feed-photo-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: var(--tap-min);
  border: 1px solid var(--brand-line);
  background: rgba(8, 8, 8, 0.76);
  color: var(--brand);
  font-size: var(--fs-h4);
  transform: translateY(-50%);
}

.training-feed-photo-nav.prev {
  left: var(--sp-2);
}

.training-feed-photo-nav.next {
  right: var(--sp-2);
}

.training-feed-counter {
  position: absolute;
  z-index: 3;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 5px 8px;
  background: rgba(8, 8, 8, 0.82);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.training-feed-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.training-feed-actions button {
  min-height: var(--control-h);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.training-feed-actions button.active {
  border-color: var(--brand);
  color: var(--brand);
}

.training-feed-like-line {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
}

.training-feed-like-line strong {
  color: var(--brand);
}

.training-feed-comments {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.training-comment {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-2);
}

.training-comment-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--surface-raised);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.training-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.training-comment-head strong {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.training-comment-head time {
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.training-comment p {
  margin-top: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.training-comment-tools {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-1);
}

.training-comment-tools button {
  min-height: var(--control-h-sm);
  padding: 0;
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.training-comment-tools span {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

.training-replies {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--brand);
  background: var(--surface-raised);
}

.training-reply {
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.training-reply strong {
  color: var(--brand);
}

.training-comments-all {
  width: 100%;
  min-height: var(--control-h);
  margin-top: var(--sp-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.training-comment-form {
  position: sticky;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 18;
  margin: var(--sp-4) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1);
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
  background: rgba(17, 17, 16, 0.96);
  backdrop-filter: blur(14px);
}

.training-replying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.training-replying button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--surface-raised);
  color: var(--brand);
}

.training-comment-compose {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: var(--sp-2);
}

.training-comment-compose input {
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  outline: none;
  background: var(--surface-raised);
  color: var(--ink-1);
  font-size: var(--fs-body);
}

.training-comment-compose input::placeholder {
  color: var(--ink-4);
}

.training-comment-compose input:focus {
  border-color: var(--brand);
}

.training-comment-compose button {
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
}

/* ============================================================ 底部导航 */
.mobile-nav {
  position: fixed;
  z-index: 50;
  right: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 430px);
  min-height: calc(68px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(8, 8, 7, 0.94);
  transform: translateX(50%);
  backdrop-filter: blur(16px);
}

.app-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  transition: color var(--dur) var(--ease);
}

.app-tab.active {
  color: var(--brand);
  font-weight: var(--fw-black);
}

.app-tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 3px;
  background: var(--brand);
  transform: translateX(-50%);
}

.member-cancel-confirm {
  position: fixed;
  z-index: 80;
  inset: 0;
}

.member-cancel-confirm[hidden] {
  display: none;
}

.member-cancel-confirm-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.member-cancel-confirm-panel {
  position: absolute;
  right: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 398px);
  padding: var(--sp-5);
  border: 1px solid var(--brand-line);
  background: var(--surface-panel);
  color: var(--ink-1);
  transform: translateX(50%);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.member-cancel-confirm-panel small {
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.member-cancel-confirm-panel h2 {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.member-cancel-confirm-panel p {
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-caption);
}

.member-cancel-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.member-cancel-confirm-actions button {
  min-height: 52px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

.member-cancel-confirm-actions [data-cancel-confirm-accept] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
}

.member-cancel-confirm-actions button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.member-install-prompt {
  position: fixed;
  z-index: 90;
  inset: 0;
}

.member-install-prompt[hidden] {
  display: none;
}

.member-install-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.member-install-panel {
  position: absolute;
  right: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 398px);
  max-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
  padding: var(--sp-5);
  overflow-y: auto;
  border: 1px solid var(--brand-line);
  background: var(--surface-panel);
  color: var(--ink-1);
  transform: translateX(50%);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.member-install-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  color: var(--ink-3);
  font-size: 24px;
  line-height: 1;
}

.member-install-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-right: 44px;
}

.member-install-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid var(--brand-line);
  object-fit: cover;
}

.member-install-head div {
  min-width: 0;
}

.member-install-head small,
.member-install-head strong {
  display: block;
}

.member-install-head small {
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
}

.member-install-head strong {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
}

.member-install-tick {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--sp-5);
}

.member-install-panel h2 {
  max-width: 100%;
  margin-top: var(--sp-3);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: var(--fw-black);
  line-height: var(--lh-title);
}

.member-install-panel > p {
  max-width: 310px;
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

.member-install-steps {
  display: grid;
  gap: 1px;
  margin-top: var(--sp-5);
  counter-reset: install-step;
  border: 1px solid var(--line);
  background: var(--line);
}

.member-install-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--surface-raised);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  counter-increment: install-step;
}

.member-install-steps li::before {
  content: "0" counter(install-step);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
}

.member-install-status {
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
  background: var(--surface-raised);
  color: var(--ink-2) !important;
}

.member-install-actions {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.member-install-primary {
  min-height: 52px;
  padding: 0 var(--sp-4);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
}

.member-install-later {
  min-height: var(--tap-min);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.member-install-close:focus-visible,
.member-install-actions button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.poster-install-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-left-color: var(--brand);
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  text-align: left;
}

.poster-install-entry span {
  display: grid;
  gap: 3px;
}

.poster-install-entry small {
  color: var(--brand);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
}

.poster-install-entry strong {
  color: var(--ink-2);
  font-size: var(--fs-caption);
  letter-spacing: 0;
}

.poster-install-entry b {
  color: var(--brand);
  font-size: var(--fs-h4);
}

.poster-install-entry[hidden] {
  display: none;
}

.member-action-feedback {
  position: fixed;
  z-index: 70;
  right: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 398px);
  padding: var(--sp-4);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  transform: translateX(50%);
}

/* ============================================================== 窄屏 */
@media (max-width: 370px) {
  .poster-copy h1 {
    font-size: var(--fs-display);
  }

  .poster-filters {
    grid-template-columns: 1fr;
  }

  .poster-time-choices {
    grid-template-columns: repeat(3, 1fr);
  }

  .poster-booking-shortcut {
    padding-inline: var(--sp-2);
  }
}

/* ------------------------------------------------------------- 游客登录指引 */
.poster-guest-guide {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--brand-line);
  background: var(--panel);
}

.poster-guest-guide small {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--brand);
}

.poster-guest-guide h3 {
  margin: var(--sp-2) 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-style: italic;
}

.poster-guest-guide p {
  margin: 0 0 var(--sp-2);
  font-size: calc(var(--fs-caption) + 1px);
}

.poster-guest-guide ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--sp-2);
}

.poster-guest-guide li {
  font-size: calc(var(--fs-caption) + 1px);
  line-height: 1.6;
  color: var(--ink-2);
}

.poster-guest-bind {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.poster-guest-bind label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--ink-2);
}

.poster-guest-bind-row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}

.poster-guest-bind-row input {
  flex: 1;
  min-width: 0;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line-strong);
  background: var(--panel-sunken);
  color: var(--ink-1);
  font-size: var(--fs-caption);
  border-radius: 0;
}

.poster-guest-bind-row button {
  flex: none;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.poster-guest-bind-row button:disabled {
  opacity: 0.6;
}

.poster-guest-bind p {
  min-height: 1.4em;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--brand);
}

@media (max-width: 430px) {
  .poster-guest-bind-row {
    flex-direction: column;
  }
  .poster-guest-bind-row input {
    min-height: 44px;
  }
}