/* 长鑫家庭日 H5 公共样式（移动端 750 设计稿基准） */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #cfe6ff 0%, #eaf3ff 40%, #dcefff 100%);
  color: #23324a; min-height: 100vh;
}
.page { max-width: 750px; margin: 0 auto; padding-bottom: 40px; }

/* 顶部主视觉 */
.hero { width: 100%; display: block; margin-bottom: 20px; }
.hero img { width: 100%; display: block; }
.logo { position: absolute; left: 16px; top: 14px; height: 30px; }

/* 卡片 */
.card {
  background: #fff; border-radius: 10px; margin: 14px 16px;
  padding: 18px 16px; box-shadow: 0 6px 20px rgba(30, 90, 180, .08);
}
.card-title { font-size: 18px; font-weight: 800; color: #1a6df0; display: flex; align-items: center; gap: 8px; }
.card-title .ic { width: 34px; height: 34px; }

/* 左图标 + 右内容 的卡片（活动预约规则 / 开放项目） */
.card-icon { display: flex; align-items: flex-start; gap: 12px; }
.card-icon .ic { width: 40px; height: 40px; flex-shrink: 0; }
.card-icon .card-body { flex: 1; min-width: 0; }

/* 表单 */
.field { display: flex; align-items: center; gap: 8px; background: #f1f4f8; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 16px; }
.field input, .field select { flex: 1; min-width: 0; border: none; background: transparent; width: 100%; font-size: 16px; outline: none; color: #23324a; }
.field label { flex-shrink: 0; min-width: 5em; color: #5a6b85; }

/* 按钮：全局标准样式（纯蓝、圆角 10px、字号 16px、紧凑高度）；宽度默认通栏，各页可自行覆盖 */
.btn {
  display: block; width: 100%; border: none; cursor: pointer;
  background: #1a6df0; color: #fff;
  font-size: 16px; font-weight: 800; padding: 6px 14px; border-radius: 10px;
  box-shadow: 0 8px 18px rgba(26, 109, 240, .3);
  text-align: center; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; }
/* 登录页“一键进入”与结果页“继续预约”：沿用 .btn 标准外观，仅宽度按设计稿为屏宽 80% 居中 */
#loginBtn, #continueBtn { width: 80%; margin: 0 auto; }
/* 结果页“继续预约”：在标准高度基础上增加一半（约 33px → 50px） */
#continueBtn { padding: 14px 14px; }
.btn-ghost { background: #fff; color: #1a6df0; border: 2px solid #1a6df0; box-shadow: none; }
.btn-danger { background: #fde2e2; color: #e23b3b; box-shadow: none; }

/* 首页菜单 */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.menu-item { background: #eaf1fb; border-radius: 10px; overflow: hidden; position: relative; }
.menu-item img { width: 100%; display: block; }
.menu-item.full { grid-column: 1 / -1; }
.menu-item.disabled { filter: grayscale(.3); opacity: .85; }
.menu-item .soon { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.35); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }

/* 开放项目列表：独立卡片，脱离 card-icon 弹性容器，宽度占满 */
#projList { width: 100%; }

/* 项目卡：图标贴左，下方内容与卡片标题左对齐 */
.proj { border: 1px solid #eef2f8; border-radius: 10px; padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; }
.proj-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.proj-head img { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.proj-name { font-size: 18px; font-weight: 800; color: #1a6df0; }
.proj .tags { margin-left: 54px; }
.proj .proj-desc { margin-left: 54px; }
.tags { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.tag { background: #eef4ff; color: #4a6da0; font-size: 13px; padding: 3px 10px; border-radius: 12px; }
/* 标签在标题下方（位于 proj-head 内的标题列中），与标题左对齐，不再缩进；须写在 .tags 基础规则之后以赢过层叠 */
.proj-head .tags { margin: 4px 0 0; }
.proj-desc { color: #6b7a92; font-size: 14px; margin-top: 5px; margin-bottom: 10px; }
/* 预约按钮：紧凑高度（约原来 2/3）、无阴影；最小宽度 6em，避免“已预约”比“点击预约”明显窄 */
.proj .btn { width: auto; min-width: 6em; align-self: flex-end; margin-top: 2px; padding: 3px 18px; font-size: 15px; box-shadow: none; }

/* 进度点 */
.steps { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.steps i { width: 10px; height: 10px; border-radius: 50%; background: #c7d6ee; display: block; }
.steps i.on { background: #1a6df0; }

/* 顶部返回栏 */
.navbar { display: flex; align-items: center; height: 52px; padding: 0 12px; margin-bottom: 10px; }
.navbar .back { display: flex; align-items: center; width: 40px; }
.navbar .back img { width: 22px; height: 22px; display: block; }
.navbar .nav-title { flex: 1; text-align: center; font-weight: 800; font-size: 17px; margin-right: 40px; }

/* 时段网格：场次标题用蓝色竖条装饰，与其它页标题风格统一 */
.period { font-weight: 800; color: #334; margin: 12px 4px 8px; position: relative; padding-left: 10px; }
.period::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 14px; border-radius: 2px; background: #1a6df0; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { background: #f6f9ff; border: 1px solid #e6eefb; border-radius: 12px; padding: 12px 6px; text-align: center; cursor: pointer; }
.slot .t { font-weight: 800; font-size: 15px; color: #23324a; }
.slot .r { font-size: 12px; color: #16a34a; margin-top: 4px; }
.slot.sel { border-color: #1a6df0; box-shadow: 0 0 0 2px #1a6df0 inset; }
.slot.off { background: #f0f0f0; color: #bbb; cursor: not-allowed; }
.slot.off .r { color: #c98a8a; }

/* 结果页 */
/* “放大二维码”按钮：沿用 .btn 外观但去掉蓝色投影 */
#zoomBtn { box-shadow: none; }
.qr-box { text-align: center; }
.qr-frame { display: inline-block; flex: none; padding: 12px; background: #fff; border: 1px solid #eef2f8; border-radius: 10px; }
.qr-frame canvas, .qr-frame img, .qr-frame svg { display: block; width: 155px; height: 155px; }
/* 已核销 / 已取消：二维码模糊失效（含放大后的二维码） */
.qr-blur svg, .qr-blur canvas, .qr-blur img { filter: blur(7px); -webkit-filter: blur(7px); pointer-events: none; }
.info-row { display: flex; align-items: center; gap: 8px; color: #5a6b85; font-size: 15px; margin: 8px 0; white-space: nowrap; }
.info-row img { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* 预约确认页（book Step3）：每行下方虚线分隔，线与文字之间加 padding */
#confirmBody .info-row { margin: 0; padding: 12px 0; border-bottom: 1px dashed #c9d6e8; }
.btn-row { display: flex; gap: 12px; margin: 18px 0 0; }
.btn-row .btn { flex: 1; }

/* 弹框 (vant 风格) */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 999; }
.mask.show { display: flex; }
.dialog { background: #fff; border-radius: 16px; width: 82%; max-width: 320px; overflow: hidden; }
.dialog .d-body { padding: 22px 18px; text-align: center; font-size: 16px; color: #23324a; }
.dialog .d-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.dialog .d-actions { display: flex; border-top: 1px solid #f0f2f6; }
.dialog .d-actions button { flex: 1; border: none; background: #fff; padding: 13px; font-size: 16px; }
.dialog .d-actions .primary { color: #1a6df0; font-weight: 700; }

/* toast */
.toast { position: fixed; left: 50%; top: 45%; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; z-index: 1000; display: none; max-width: 80%; text-align: center; }
.toast.show { display: block; }

/* SOS 悬浮 */
.sos { position: fixed; right: 16px; bottom: 90px; background: #ff5a5f; color: #fff; border-radius: 20px; padding: 10px 14px; font-weight: 800; font-size: 13px; box-shadow: 0 6px 16px rgba(255,90,95,.4); text-decoration: none; }

/* 全局说明文字：小字号 + 灰色（各页“每个工号对应…”类提示统一样式） */
.e-sub { color: #7b8aa0; font-size: 13px; }

/* 我的预约入口 */
.entry { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.entry img { width: 46px; height: 46px; }
.entry .e-title { font-weight: 800; color: #1a6df0; font-size: 17px; }
.entry .e-sub { color: #7b8aa0; font-size: 13px; }
.entry .arrow { width: 14px; height: auto; margin-left: auto; }

.rule { list-style: none; padding: 0; margin: 8px 0 0; }
.rule li { display: flex; align-items: flex-start; gap: 8px; color: #445; font-size: 13px; line-height: 1.9; }
.rule .num { flex-shrink: 0; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: #1a6df0; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.empty { text-align: center; color: #9aa8bd; padding: 40px 0; }