/**
 * layout-h5.css — H5 用户端专用（设计稿 H5-01…H5-05）。
 *
 * H5 与后台是两套壳：H5 无 shell.js / 无 sidebar / 无 topbar，
 * 页面直接是一条 .h5-page（480 居中、安全区内距，规则在 responsive.css），
 * 主要在微信 WebView 里打开。这里只放 H5 独有排布，通用件照旧复用：
 *   .btn / .btn-primary / .btn-secondary（components-form）、
 *   .tag / .tag-vip / .tag-success…（components-data）、
 *   .h5-card / .h5-info-list / .h5-table-no / .h5-seat-no（responsive.css）。
 *
 * 收在这里的：
 *   1. .h5-nav 顶栏（primary-500，返回/标题/分享）+ .h5-statusbar 状态栏假条
 *   2. 结果页：座位卡、双按钮行、同订单成员卡（连坐/分开）、Tip、同桌 chips、活动信息折叠卡
 *   3. 人员选择卡、查询首页 Hero + 查询卡 + 历史、封面
 *   4. 状态集（未分配/未发布/订单变更/骨架/离线）
 *   5. 座位图画布：复用后台 .rt 环形圆桌组件的同一套结构（红线：H5 与后台渲染同一份），
 *      仅尺寸走 H5 变量缩小；不印他人姓名。
 *
 * 色值一律 var(--color-*)（清单 2.4）。字面色只在稿件专用、无对应语义令牌处就地 allow-color。
 */

/* ============ 通用壳：状态栏 + 顶栏导航 ============ */

/**
 * 手机状态栏假条（时间 + 信号/wifi/电量）。真机上是系统绘制，这里只为还原稿件、
 * 让顶栏视觉完整。高度含安全区：primary 底的顶栏要顶到刘海下沿。
 */
.h5-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 14px var(--space-5) 0;
  color: var(--color-text-inverse);
}
/* 假状态栏(18:22 + 信号/wifi/电池图标)现全部改成 hidden 空 div——真机上叠在
   系统状态栏下,极其难看。display:flex 会压过 UA [hidden]，硬兜底一下。
   参考 [[display-overrides-hidden-attribute]] */
.h5-statusbar[hidden] { display: none; }
.h5-statusbar-time { font-family: var(--font-num); font-size: var(--text-body-2); font-weight: var(--weight-semibold); }
.h5-statusbar-icons { display: flex; align-items: center; gap: 5px; }
.h5-statusbar-icons svg { width: 15px; height: 15px; }

/* 顶栏导航条：返回箭头 + 居中标题 + 右侧分享（可禁用）。默认 primary-500 底、白字 */
.h5-nav {
  position: sticky;
  top: 0;
  z-index: 16;
  flex-shrink: 0;
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
}
.h5-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 53px;
  padding: 0 var(--space-4);
}
.h5-nav-bar svg { width: 24px; height: 24px; flex-shrink: 0; }
.h5-nav-title { font-size: var(--text-title-2); font-weight: var(--weight-semibold); }
.h5-nav-bar { position: relative; }
.h5-nav-title { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.h5-nav-share { width: 19px; height: 19px; }
.h5-nav-share.is-disabled { opacity: 0.4; pointer-events: none; }

/* ============ 通用页身：卡片竖排容器 ============ */

/* 结果页 / 人员选择等：卡片竖排，16 内距。底部若有 actionbar，留出空隙靠它自己的内距 */
.h5-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}
.h5-seat-page { background: var(--color-bg-page); }
.h5-seat-page .h5-page { min-height: 100vh; min-height: 100dvh; }
.h5-map-page { overflow:hidden; }
.h5-map-page .h5-page { height:100vh; height:100dvh; overflow:hidden; }

/* 区块小标题（成员卡「本订单共 3 人」这类卡内头）*/
.h5-cardhead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.h5-cardhead > svg { width: 17px; height: 17px; color: var(--color-text-tertiary); flex-shrink: 0; }
.h5-cardhead-t { flex: 1; min-width: 0; font-size: var(--text-body-1); font-weight: var(--weight-semibold); color: var(--color-text-primary); }

/* ============ 结果页：座位卡（稿件 Ww2fb Seat Card）============ */

/* 桌号巨字 72 / 座位号 48 用 responsive.css 的 .h5-table-no / .h5-seat-no（降档只改那四个变量）*/
.h5-seatcard { display: flex; flex-direction: column; gap: var(--space-3); }
.h5-seatcard-who { display: flex; align-items: center; gap: var(--space-2); }
.h5-seatcard-name { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:var(--radius-s); background:var(--color-primary-500); font-size:var(--text-body-1); font-weight:var(--weight-semibold); color:var(--color-text-inverse); }
.h5-seatcard-zone { font-size:20px; line-height:28px; font-weight:var(--weight-bold); color:var(--color-primary-700); }

/* 桌号 / 座位号行：巨字 + 后缀「号桌」「号位」基线对齐 */
.h5-numrow { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2); }
.h5-numrow-unit { font-size: var(--text-title-2); font-weight: var(--weight-semibold); color: var(--color-text-secondary); padding-bottom: 8px; }
.h5-row-no { font-family:var(--font-num); font-size:32px; line-height:1; font-weight:var(--weight-semibold); color:var(--color-text-primary); }
.h5-numrow.is-row .h5-numrow-unit { font-size:var(--text-body-1); padding-bottom:2px; }

.h5-seatcard-divider { height: 1px; background: var(--color-border); }

/* 座位卡内信息行图标（入场时间 / 签到台 / 餐标）*/
.h5-info-row > svg { width: 15px; height: 15px; color: var(--color-text-tertiary); flex-shrink: 0; }

/* ============ 双按钮行（查看座位图 / 到座引导）============ */

.h5-btnrow { display: flex; gap: var(--space-3); }
.h5-btnrow .btn { flex: 1; height: var(--h5-btn-h); font-size: var(--text-body-1); gap: var(--space-2); }
.h5-btnrow .btn > svg { width: 18px; height: 18px; }

/* ============ 同订单成员卡（连坐 success / 分开 warning）============ */

/* 汇总条：连坐用 primary-50 底 circle-check，分开用 warning-bg 底 scissors */
.h5-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-primary-50);
  margin-bottom: var(--space-3);
}
.h5-summary.is-split { background: var(--color-warning-bg); }
.h5-summary > svg { width: 16px; height: 16px; color: var(--color-primary-500); flex-shrink: 0; }
.h5-summary.is-split > svg { color: var(--color-warning-700); }
.h5-summary-t { font-size: var(--text-body-2); color: var(--color-text-primary); }
.h5-summary.is-split .h5-summary-t { color: var(--color-warning-700); }

/* 成员列表：一人一行（头像 + 姓名 + 角色标注 + 座位）。同行人姓名脱敏、待补录转灰 */
.h5-members { display: flex; flex-direction: column; }
.h5-member { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.h5-member + .h5-member { border-top: 1px solid var(--color-neutral-100); }
.h5-member-av {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-50);
  color: var(--color-primary-500);
  font-size: var(--text-body-2); font-weight: var(--weight-semibold);
}
.h5-member-av.is-vip { background: var(--color-vip-bg); color: var(--color-vip-500); }
.h5-member-av.is-todo { background: var(--color-neutral-100); color: var(--color-text-disabled); }
.h5-member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h5-member-name { font-size: var(--text-body-2); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.h5-member.is-todo .h5-member-name { color: var(--color-text-tertiary); }
.h5-member-role { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.h5-member-seat { flex-shrink: 0; font-family: var(--font-num); font-size: var(--text-body-2); font-weight: var(--weight-semibold); color: var(--color-primary-500); }
.h5-member-seat.is-todo { color: var(--color-text-disabled); }

/* 分开态：成员按桌分组，组头一颗色点 + 桌名 + 人数 */
.h5-grouphead { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); }
.h5-grouphead + .h5-member { border-top: 0; }
.h5-groupdot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary-300); flex-shrink: 0; }
.h5-groupdot.is-other { background: var(--color-warning-500); }
.h5-groupname { flex: 1; min-width: 0; font-size: var(--text-body-2); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.h5-groupsub { font-size: var(--text-caption); color: var(--color-text-tertiary); }

/* 分开态提示块（warning-bg triangle-alert + 说明 + 查看两个位置按钮）*/
.h5-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-warning-bg);
}
.h5-notice-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.h5-notice-row > svg { width: 15px; height: 15px; color: var(--color-warning-500); flex-shrink: 0; margin-top: 1px; }
.h5-notice-t { font-size: var(--text-caption); line-height: 1.6; color: var(--color-warning-700); }

/* ============ Tip 条 + 同桌 chips + 活动信息折叠卡（结果页下半）============ */

/* Tip 条：同行人可保存本页转发 + 保存图片按钮（neutral-100 底）*/
.h5-tip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-neutral-100);
}
.h5-tip > svg { width: 15px; height: 15px; color: var(--color-text-tertiary); flex-shrink: 0; }
.h5-tip-t { flex: 1; min-width: 0; font-size: var(--text-caption); line-height: 1.6; color: var(--color-text-secondary); }
.h5-tip-btn {
  flex-shrink: 0; height: 28px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-full);
  background: var(--color-primary-500); color: var(--color-text-inverse);
  font-family: inherit; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  cursor: pointer;
}
.h5-poster-overlay { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.62); }
.h5-poster-dialog { width:min(100%,420px); max-height:calc(100dvh - 32px); overflow:auto; padding:14px; border-radius:12px; background:#fff; box-shadow:0 14px 45px rgba(0,0,0,.25); }
.h5-poster-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:16px; }
.h5-poster-close { border:0; background:none; color:var(--color-text-tertiary); cursor:pointer; }
.h5-poster-image img { display:block; width:100%; height:auto; border-radius:8px; }
.h5-poster-tip { margin:10px 0; text-align:center; color:var(--color-text-tertiary); font-size:12px; }
.h5-poster-actions { display:flex; gap:8px; }
.h5-poster-actions .btn { flex:1; }

/* 同桌展示：脱敏姓名胶囊。红线：默认由后台「展示同桌姓名」开关控制，关时整卡不渲染 */
.h5-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.h5-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-neutral-100); color: var(--color-text-secondary);
  font-size: var(--text-caption);
}
.h5-chip.is-me { background: var(--color-primary-50); color: var(--color-primary-500); font-weight: var(--weight-semibold); }

/* 活动信息折叠卡：卡头可点收放 */
.h5-collapse-head { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.h5-collapse-head > svg:first-child { width: 17px; height: 17px; color: var(--color-text-tertiary); flex-shrink: 0; }
.h5-collapse-t { flex: 1; min-width: 0; font-size: var(--text-body-1); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.h5-collapse-chevron { width: 18px; height: 18px; color: var(--color-text-tertiary); flex-shrink: 0; transition: transform var(--duration-fast); }
.h5-collapse.is-open .h5-collapse-chevron { transform: rotate(180deg); }
.h5-collapse-body { margin-top: var(--space-3); }
.h5-collapse:not(.is-open) .h5-collapse-body { display: none; }
.h5-info-list .h5-info-row dd { white-space: nowrap; min-width: 0; font-size:12px; }

/* 页脚说明（请凭本页面信息入场…）*/
.h5-footnote { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-caption); line-height: 1.7; color: var(--color-text-tertiary); }

/* ============ 查询首页（稿件 WcLMf）============ */

/* Hero：primary-500 渐变，240 高。查询卡负 margin 上移压住 Hero 下沿 */
.h5-hero {
  position: relative;
  min-height: 200px;
  padding: var(--space-6) var(--space-5) var(--space-10);
  background: linear-gradient(160deg, var(--color-primary-500), var(--color-primary-700));
  color: var(--color-text-inverse);
}
.h5-hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-on-dark-fill); color: var(--color-text-inverse);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  margin-bottom: var(--space-3);
}
.h5-hero-title { font-size: var(--text-title-1); font-weight: var(--weight-semibold); line-height: 1.3; margin-bottom: var(--space-2); }
.h5-hero-venue { font-size: var(--text-body-2); color: var(--color-on-dark-1); }

/* 查询卡：上移压 Hero */
.h5-querycard { margin: -32px var(--space-4) 0; position: relative; }
.h5-querycard-title { font-size: var(--text-title-2); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.h5-querycard-hint { font-size: var(--text-body-2); color: var(--color-text-tertiary); margin-bottom: var(--space-4); }

/* 手机号输入框：primary-500 2px 描边、+86 前缀、竖分隔、清除按钮 */
.h5-phone {
  display: flex; align-items: center; gap: var(--space-3);
  height: 52px; padding: 0 var(--space-4);
  border: 2px solid var(--color-primary-500); border-radius: var(--radius-m);
  margin-bottom: var(--space-4);
}
.h5-phone-prefix { font-size: var(--text-body-1); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
/* 中间竖分隔条(原设计里 +86 与输入框之间那一竖线)去掉,只留外框
   ——用户反馈内框视觉多余。保留 DOM 空元素方便未来切回 */
.h5-phone-div { display: none; }
.h5-phone input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  /* 消掉 iOS/微信 WebView 的默认聚焦框、点击高亮、系统外观:
     · -webkit-appearance:none  去掉默认圆角与内描边(iOS 尤甚)
     · tap-highlight-color:transparent  去掉点击瞬间的蓝色矩形闪
     · box-shadow:none  某些浏览器 focus 加内阴影当聚焦提示,一并压下 */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  font-family: var(--font-num); font-size: var(--text-title-2);
  color: var(--color-text-primary);
  /* letter-spacing 不再给差值:
     此前 input 是 1px、placeholder 是 normal,开始输入时从 0 → 1px 突变,
     视觉上就是「抖一下」。两者统一 normal,占位符消失/字符出现前后位置不变 */
  letter-spacing: normal;
}
.h5-phone input:focus { outline: none; box-shadow: none; }
.h5-phone input::placeholder { color: var(--color-text-disabled); letter-spacing: normal; }
.h5-phone-clear { border: 0; background: none; padding: 0; color: var(--color-text-disabled); cursor: pointer; display: inline-flex; flex-shrink: 0; }
.h5-phone-clear svg { width: 20px; height: 20px; }

.h5-querycard .btn-primary { height: var(--h5-btn-h); font-size: var(--text-body-1); }

/* 无短信验证码提示（红线：H5 无短信档，凭手机号即可查）*/
.h5-nosms { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.h5-nosms > svg { width: 15px; height: 15px; color: var(--color-success-500); flex-shrink: 0; }
.h5-nosms-t { font-size: var(--text-caption); color: var(--color-text-tertiary); }

/* 最近查询：标题行 + 清空，历史卡（脱敏手机号 152****9055）*/
.h5-history { padding: var(--space-6) var(--space-4) 0; }
.h5-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.h5-history-title { font-size: var(--text-body-2); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.h5-history-clear { border: 0; background: none; padding: 0; color: var(--color-text-tertiary); font-family: inherit; font-size: var(--text-caption); cursor: pointer; }
.h5-histcard { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-l); background: var(--color-bg-card); box-shadow: var(--shadow-1); }
.h5-histcard + .h5-histcard { margin-top: var(--space-2); }
.h5-histcard-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--color-primary-500); display: flex; align-items: center; justify-content: center; }
.h5-histcard-av svg { width: 20px; height: 20px; }
.h5-histcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h5-histcard-phone { font-family: var(--font-num); font-size: var(--text-body-2); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.h5-histcard-sub { font-size: var(--text-caption); color: var(--color-text-tertiary); }
.h5-histcard > svg { width: 18px; height: 18px; color: var(--color-text-disabled); flex-shrink: 0; }

/* ============ 封面（稿件 pUCaH）============ */

/* 整屏 primary-900 底 + 封面图 + scrim 渐变压底，内容竖排靠底 */
.h5-cover {
  position: relative;
  /* 同 .h5-page:优先 100dvh 让键盘弹起时不抖,不支持时回退 100vh */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--color-primary-900);
  color: var(--color-text-inverse);
  overflow: hidden;
}
/* 封面图占位（真机换活动主视觉）。scrim 从透明到 primary-900，让底部文字压得住 */
.h5-cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, var(--color-primary-900) 90%);
}
.h5-cover-body { position: relative; margin-top: auto; padding: 0 var(--space-6) var(--space-8); }
.h5-cover-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-on-dark-fill); color: var(--color-text-inverse);
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}
.h5-cover-title { font-size: 32px; font-weight: var(--weight-semibold); line-height: 1.25; white-space: pre-line; margin-bottom: var(--space-5); }
.h5-cover-meta { display: flex; flex-direction: column; gap: var(--space-3); }
.h5-cover-metarow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-2); color: var(--color-on-dark-1); }
.h5-cover-metarow > svg { width: 16px; height: 16px; color: var(--color-on-dark-2); flex-shrink: 0; }
/* 底部加载器：三点 + 主办方 */
.h5-cover-foot { position: relative; padding: 0 var(--space-6) var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.h5-loader { display: flex; gap: 6px; }
.h5-loader span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-on-dark-3); }
.h5-cover-org { font-size: var(--text-caption); color: var(--color-on-dark-3); }

/* ============ 人员选择（稿件 psX4c）============ */

/* 说明头（该手机号下有 3 位参会人 + 副说明）*/
.h5-selecthead { padding: var(--space-5) var(--space-1) var(--space-1); }
.h5-selecthead-t { font-size: var(--text-title-2); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.h5-selecthead-sub { font-size: var(--text-body-2); color: var(--color-text-tertiary); }

/* 人员卡：头像 + 姓名 + 席别 tag + 座位（或「座位安排中」）+ chevron。整卡可点 */
.h5-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.h5-person-av { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--text-body-1); font-weight: var(--weight-semibold); background: var(--color-primary-50); color: var(--color-primary-500); }
.h5-person-av.is-vip { background: var(--color-vip-bg); color: var(--color-vip-500); }
.h5-person-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.h5-person-r1 { display: flex; align-items: center; gap: var(--space-2); }
.h5-person-name { font-size: var(--text-body-1); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.h5-person-seat { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-2); color: var(--color-text-secondary); }
.h5-person-seat > svg { width: 14px; height: 14px; color: var(--color-text-tertiary); flex-shrink: 0; }
.h5-person-seat.is-pending { color: var(--color-warning-700); }
.h5-person-seat.is-pending > svg { color: var(--color-warning-500); }
.h5-person > .h5-chevron { width: 20px; height: 20px; color: var(--color-text-disabled); flex-shrink: 0; }

/* 隐私说明块（neutral-100 底，仅显示脱敏姓名…）*/
.h5-privacy { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-neutral-100); }
.h5-privacy > svg { width: 15px; height: 15px; color: var(--color-text-tertiary); flex-shrink: 0; margin-top: 2px; }
.h5-privacy-t { font-size: var(--text-caption); line-height: 1.7; color: var(--color-text-secondary); }

/* ============ 状态集（稿件 wJy7T：未分配/未发布/订单变更/骨架/离线）============ */

/* 居中大图标状态卡（未分配 primary-50 / 未发布 info-bg / 订单变更 warning-bg 圆图标）*/
.h5-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: 38px var(--space-6) var(--space-8); }
.h5-state-icon { width: 64px; height: 64px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.h5-state-icon svg { width: 28px; height: 28px; }
.h5-state-icon.is-pending { background: var(--color-primary-50); color: var(--color-primary-500); }
.h5-state-icon.is-unpub { background: var(--color-info-bg); color: var(--color-info-500); }
.h5-state-icon.is-changed { background: var(--color-warning-bg); color: var(--color-warning-700); }
.h5-state-title { font-size: var(--text-title-1); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.h5-state-desc { font-size: var(--text-body-2); line-height: 1.7; color: var(--color-text-tertiary); }
.h5-state .btn { height: var(--h5-btn-h); gap: var(--space-2); }
/* 订单变更态底部 info note（红线：不展示历史座位号）*/
.h5-state-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-neutral-100); }
.h5-state-note > svg { width: 14px; height: 14px; color: var(--color-text-disabled); flex-shrink: 0; margin-top: 2px; }
.h5-state-note-t { font-size: 11px; line-height: 1.6; color: var(--color-text-tertiary); text-align: left; }

/* 骨架态：neutral-100 块，1.2s 循环微光 */
.h5-skel { border-radius: var(--radius-s); background: var(--color-neutral-100); animation: h5-skel-pulse 1.2s ease-in-out infinite; }
@keyframes h5-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 离线条（neutral-200 底，cloud-off + 更新时间 + 重试）*/
.h5-offline { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-4); background: var(--color-neutral-200); }
.h5-offline > svg { width: 14px; height: 14px; color: var(--color-text-secondary); flex-shrink: 0; }
.h5-offline-t { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.h5-offline-retry { margin-left: auto; border: 0; background: none; padding: 0; color: var(--color-primary-500); font-family: inherit; font-size: var(--text-caption); font-weight: var(--weight-semibold); cursor: pointer; }
/*
 * `display:flex` 会压过浏览器默认样式表里的 [hidden]{display:none}，所以要显式兜一条
 * —— 同 .field[hidden]（components-form.css:105）。
 *
 * 缺这一条的表现：`h5-seat.js:241` 把 `offline-bar.hidden = true` 写对了也没用，
 * 于是**每个打开结果页的参会人都常亮「离线数据」**，包括刚刚在线查成功的那一次。
 * 后果不是难看：它在告诉人「你看到的桌号可能是旧的」，而桌号其实是新的 ——
 * 真到了换座那天，参会人会不信页面上的新座位。
 */
.h5-offline[hidden] { display: none; }

/* ============ 座位图（稿件 T4IpZi）============ */

/**
 * H5 座位图复用后台的 .rt 环形圆桌组件（红线：座位图抽成一个组件、H5 与后台渲染同一份）。
 * .rt / .rt-top / .rt-label / .rt-seats / .rt-seat 及其 :nth-child 角度全在 layout-assign.css，
 * 这里只在 .h5-map 作用域内把尺寸缩到 H5 档（后台 148 桌 → H5 84 桌），结构与角度定义不重写。
 *
 * 面朝舞台视角（红线）：画布顶部即舞台。整图不印他人姓名（红线）。
 */
.h5-mapwrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding-top:40px; }
.h5-seat-status-legend { position:fixed; top:53px; left:50%; z-index:15; width:min(100%,480px); height:40px; display:flex; align-items:center; justify-content:center; gap:20px; transform:translateX(-50%); border-bottom:1px solid var(--color-border); background:var(--color-neutral-0); color:var(--color-text-secondary); font-size:12px; }
.h5-seat-status-legend span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.h5-seat-status-legend i { width:16px; height:16px; border:1.5px solid var(--color-primary-400); border-radius:3px; background:transparent; box-sizing:border-box; }
.h5-seat-status-legend i.is-assigned { background:var(--color-primary-400); border-color:var(--color-primary-500); }
.h5-seat-status-legend i.is-locked { background:var(--color-danger-500); border-color:var(--color-danger-500); }

/* 图例悬浮胶囊（顶栏右下角，半透明白底）*/
.h5-legend-btn {
  position: absolute; top: 8px; right: var(--space-4); z-index: 3;
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-on-dark-fill); color: var(--color-text-inverse);
  font-size: 11px; font-weight: var(--weight-medium); cursor: pointer;
}
.h5-legend-btn svg { width: 12px; height: 12px; }

/*
 * 图例浮层（点「图例」展开）。
 * 座位圆点只有颜色没有文字（红线：不印他人姓名），不给一份色卡的话
 * 参会人分不清蓝点橙点谁是谁。
 */
.h5-legend-panel {
  position: absolute; top: 40px; right: var(--space-4); z-index: 4;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--color-neutral-0); box-shadow: var(--shadow-2);
}
.h5-legend-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); color: var(--color-text-secondary);
  white-space: nowrap;
}
.h5-legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); }
/* 四档颜色与 seatmap.css 的 .seat--* 一一对应，改一边要改另一边 */
.h5-legend-dot.is-mine { background: var(--color-primary-400); border: 2px solid var(--color-primary-500); }
.h5-legend-dot.is-peer { background: var(--color-warning-500); border: 2px solid var(--color-warning-700); }
.h5-legend-dot.is-taken { background: var(--color-primary-100); border: 1px solid var(--color-primary-400); }
.h5-legend-dot.is-free { background: var(--color-neutral-0); border: 1px solid var(--color-border); }
/* 不可用 = blocked + locked 合并一档，配色对齐 seatmap.css 里那两条 */
.h5-legend-dot.is-off { background: var(--color-neutral-100); border: 1px dashed var(--color-text-tertiary); }

/* 画布：可滚，绝对定位摆桌 */
.h5-map { position:relative; flex:1; min-height:0; overflow:auto; box-sizing:border-box; background:var(--color-bg-page); touch-action:none; overscroll-behavior:contain; }
/* 高度由 JS 按真实画布比例覆盖（见 pages/h5-map.js）；这里的值只是稿件的兜底 */
.h5-map-stagewrap { position:relative; width:375px; height:660px; margin:0 auto; padding-bottom:140px; box-sizing:content-box; }

/* 舞台条（顶部，底部两角大圆）——面朝舞台：它必须在画布最上方 */
.h5-stage {
  position: absolute; left: 88px; top: 20px; width: 199px; height: 42px;
  border-radius: 6px 6px 20px 20px;
  background: var(--color-primary-800); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-body-2); font-weight: var(--weight-semibold); letter-spacing: 4px;
}

/* 分区块（VIP 近舞台 / A 区）*/
.h5-zone { position: absolute; border-radius: var(--radius-l); }
.h5-zone-label { position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: var(--weight-semibold); }
.h5-zone.is-vip { left: 16px; top: 78px; width: 343px; height: 132px; background: var(--color-vip-bg); border: 1px solid #ebd9a0; } /* allow-color: VIP 区浅金描边，稿件字面值，无对应令牌 */
.h5-zone.is-vip .h5-zone-label { color: var(--color-vip-500); }
.h5-zone.is-a { left: 16px; top: 226px; width: 343px; height: 298px; background: var(--color-primary-50); border: 1px solid var(--color-primary-100); }
.h5-zone.is-a .h5-zone-label { color: var(--color-primary-300); }

/* H5 档圆桌尺寸缩放：后台 148/100/半径52/座26 → H5 84/48/半径30/座9 */
.h5-map .rt { width: 84px; height: 84px; }
.h5-map .rt-top { left: 18px; top: 18px; width: 48px; height: 48px; }
.h5-map .rt-label { top: 30px; left: 18px; width: 48px; }
.h5-map .rt-no { font-family: var(--font-num); font-size: var(--text-body-2); color: var(--color-text-disabled); }
.h5-map .rt-seat {
  width: 9px; height: 9px; font-size: 0;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-30px) rotate(calc(-1 * var(--a)));
  background: var(--color-neutral-0); border-color: var(--color-neutral-300);
}
/* 我的桌高亮（光晕 + primary 描边 + 大号桌号）*/
.h5-map .rt.is-mine .rt-top { background: var(--color-primary-50); border: 1.5px solid var(--color-primary-400); }
.h5-map .rt.is-mine .rt-no { font-size: var(--text-title-2); font-weight: var(--weight-semibold); color: var(--color-primary-500); }
.h5-map .rt.is-mine .rt-seat { background: var(--color-primary-100); border-color: var(--color-primary-300); }
.h5-rt-halo { position: absolute; left: 2px; top: 2px; width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--color-primary-wash); }
/* 我的座位：放大实心 primary，白描边 */
.h5-map .rt-seat.is-me { width: 12px; height: 12px; background: var(--color-primary-500); border: 2px solid var(--color-neutral-0); box-shadow: var(--shadow-1); }

/* 我在这里气泡 */
.h5-mypin { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.h5-mypin-bubble { display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-500); color: var(--color-text-inverse); font-size: var(--text-caption); font-weight: var(--weight-semibold); box-shadow: var(--shadow-2); white-space: nowrap; }
.h5-mypin-bubble svg { width: 12px; height: 12px; }
.h5-mypin-tail { width: 10px; height: 6px; background: var(--color-primary-500); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.h5-mypin.is-below { flex-direction: column-reverse; }
.h5-mypin.is-below .h5-mypin-tail { transform: rotate(180deg); }
/*
 * 同 .h5-offline[hidden]：display:flex 会压过默认的 [hidden]{display:none}。
 *
 * `h5-map.js:164` 在找不到 `.seat--mine` 时 `pin.hidden = true`，正是「本人座位不在
 * 这张图里」的分支。缺兜底时气泡照样画出来，而且因为 position:absolute 没有落点，
 * 会停在画布左上角指着一个**别人的座位**说「您在这里」—— 比不显示危险得多。
 */
.h5-mypin[hidden] { display: none; }

/* 设施标记（入口 success / 签到台 info / 洗手间 neutral）*/
.h5-marker { position: absolute; display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-semibold); }
.h5-marker svg { width: 13px; height: 13px; }
.h5-marker.is-entry { background: var(--color-success-bg); color: var(--color-success-500); }
.h5-marker.is-checkin { background: var(--color-info-bg); color: var(--color-info-500); }
.h5-marker.is-wc { background: var(--color-neutral-100); color: var(--color-text-tertiary); }

/* 指南针（面向舞台）*/
.h5-compass { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-text-disabled); }
.h5-compass svg { width:16px; height:16px; transform-origin:center; transition:transform .16s ease; }
.h5-compass-t { font-size: 9px; }

/* 缩放条 + 定位按钮（钉右下）*/
.h5-zoom { position:fixed; right:var(--space-4); bottom:calc(112px + env(safe-area-inset-bottom)); display:inline-flex; border-radius:var(--radius-m); background:var(--color-neutral-0); box-shadow:var(--shadow-2); overflow:hidden; z-index:12; }
.h5-zoom button { width: 38px; height: 38px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); }
.h5-zoom button + button { border-left: 1px solid var(--color-border); }
.h5-zoom button svg { width: 17px; height: 17px; }
.h5-locate { position:fixed; right:calc(var(--space-4) + 76px + var(--space-2)); bottom:calc(112px + env(safe-area-inset-bottom)); width:38px; height:38px; border-radius:var(--radius-full); border:0; background:var(--color-primary-500); color:var(--color-text-inverse); box-shadow:var(--shadow-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; z-index:12; }
.h5-locate svg { width: 18px; height: 18px; }

/* 底部座位文案条 + 到座引导按钮 */
.h5-mapbar { position:fixed; left:0; right:0; bottom:0; z-index:11; display:flex; align-items:center; gap:var(--space-3); min-height:88px; padding:14px var(--space-4) calc(14px + env(safe-area-inset-bottom)); background:var(--color-neutral-0); border-top:1px solid var(--color-border); box-shadow:var(--shadow-2); }
.h5-mapbar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.h5-mapbar-main { font-size: var(--text-body-1); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.h5-mapbar-sub { font-size: 11px; color: var(--color-text-tertiary); }
.h5-mapbar .btn { flex-shrink: 0; height: 42px; gap: var(--space-2); }