/* ==========================================================================
   H5 移动端样式 —— 对齐旧站（React + Tailwind 构建）的视觉语言
   纯手写 CSS：零构建、零依赖、无 node_modules。

   设计基准（全部取自旧站线上构建的**实测计算值**，非猜测）：
     应用外壳   max-width 430px 居中，带外阴影
     页面底色   #FAF8F5（暖白）
     品牌红     #C81623
     Hero 渐变  #B91C1C → #C81623 → #DC2626，内边距 76px 24px 54px
     赛事封面   渐变 #C81623 → #991B1B，高 176px
     卡片       白底 / 圆角 10px / 1px 红边 rgba(200,22,35,.4) / 轻阴影
     区块标题   17px、font-weight 900，前置 3px 红竖条
     底栏       56px、白 95% + 背景模糊、上边浅阴影
     字体       PingFang SC / Microsoft YaHei / Hiragino Sans GB

   ⚠️ 本文件保留全部历史类名（h5-* / qr-* / ma-*），
      共 67 个类被 50+ 个视图引用，改名会导致其它页面样式丢失。
   ========================================================================== */

:root {
    --brand: #C81623;
    --brand-900: #B91C1C;
    --brand-700: #991B1B;
    --brand-600: #DC2626;
    --brand-grad: linear-gradient(135deg, #B91C1C 0%, #C81623 50%, #DC2626 100%);
    --brand-cover: linear-gradient(135deg, #C81623 0%, #991B1B 100%);
    --brand-soft: #FDECEC;
    --brand-border: rgba(200, 22, 35, .4);
    --brand-tint: rgba(200, 22, 35, .06);
    --text: #241E1C;
    --text-sub: #6B6460;
    --text-muted: #9A938E;
    --border: #EFEAE4;
    --bg: #FAF8F5;
    --card: #ffffff;
    --ok: #16a34a;
    --warn: #d97706;
    --danger: #dc2626;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 16px;
    --tab-h: 56px;
    --top-h: 48px;
    --app-max: 430px;
    --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
            ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

.h5-body {
    background: #ffffff;
    color: var(--text);
    font: 15px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

.h5-app {
    max-width: var(--app-max);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    box-shadow: 0 25px 50px -12px rgba(107, 114, 128, .3);
    position: relative;
}

/* ---------- 顶栏（子页面；首页用 $noTop 隐藏） ---------- */
.h5-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--top-h);
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.h5-title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}
.h5-back-ghost { pointer-events: none; }

/* ---------- 内容区 ---------- */
.h5-main {
    flex: 1;
    padding: 12px 12px calc(var(--tab-h) + 20px);
}
/* 通栏页（首页 Hero 要顶到边） */
.h5-main--flush { padding: 0 0 calc(var(--tab-h) + 16px); }

/* ---------- tabbar ---------- */
.h5-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--app-max);
    margin: 0 auto;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid #F3F0EC;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
    z-index: 40;
}
.h5-tab {
    /* ⚠️ 必须相对定位：高亮指示条是 ::before + absolute，
       否则会相对 .h5-tabbar（fixed）定位，永远落在底栏正中 */
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
}
.h5-tab.is-active { color: var(--brand); font-weight: 700; }
/* 旧站底栏：当前项上方有一条 32×3px 的红色圆角指示条 */
.h5-tab.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand);
}
.h5-tab-ico { width: 22px; height: 22px; line-height: 0; }
.h5-tab-ico svg { width: 22px; height: 22px; display: block; }
.h5-tab-txt { font-size: 10px; line-height: 1.2; font-weight: 600; }

/* ---------- 卡片 / 区块 ---------- */
.h5-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.h5-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.h5-card-title { font-size: 15px; font-weight: 700; margin: 0; }

/* 区块标题（旧站：17px/900 + 3px 红竖条） */
.h5-section-title {
    font-size: 17px;
    font-weight: 900;
    color: #111827;
    margin: 4px 2px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.h5-section-title::before {
    content: '';
    width: 3px;
    height: 17px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}
.h5-muted { color: var(--text-muted); font-size: 12px; }
.h5-sub { color: var(--text-sub); font-size: 13px; }
.h5-hint { color: var(--text-sub); font-size: 12px; margin: 6px 0 0; }

/* ---------- 按钮 ---------- */
.h5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 18px;
    border-radius: 21px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.h5-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(200, 22, 35, .22);
}
.h5-btn-primary:active { background: var(--brand-900); }
.h5-btn-block { display: flex; width: 100%; }
.h5-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 16px; }
.h5-btn-danger { color: var(--danger); border-color: #f5c2c2; }
.h5-btn[disabled], .h5-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- 表单 ---------- */
.h5-field { margin-bottom: 12px; }
.h5-label { display: block; font-size: 13px; color: var(--text-sub); margin-bottom: 6px; }
.h5-input, .h5-textarea, .h5-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 15px;
    color: var(--text);
    font-family: inherit;
}
.h5-textarea { min-height: 96px; resize: vertical; }
.h5-input:focus, .h5-textarea:focus, .h5-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
.h5-field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* ---------- 列表 ---------- */
.h5-list { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.h5-row {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.h5-row:last-child { border-bottom: 0; }
.h5-row-main { flex: 1; min-width: 0; }
.h5-row-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.h5-row-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.h5-row-side { text-align: right; font-size: 13px; color: var(--text-sub); flex-shrink: 0; }
.h5-thumb {
    width: 84px;
    height: 62px;
    border-radius: 8px;
    object-fit: cover;
    background: #F2EFEA;
    flex-shrink: 0;
}

/* ---------- 标签 / 状态 ---------- */
.h5-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--brand-soft);
    color: var(--brand);
}
.h5-tag-ok { background: #e7f8ee; color: var(--ok); }
.h5-tag-warn { background: #fdf3e3; color: var(--warn); }
.h5-tag-muted { background: #f1f2f4; color: var(--text-sub); }

/* 徽章（旧站配色：已结束=琥珀、进行中=白玻璃、报名中=品牌红） */
.h5-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 23px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.h5-badge-end { background: #FBBF24; color: #7C2D12; }
.h5-badge-live { background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.h5-badge-soon { background: var(--brand); color: #fff; }
.h5-badge-soft { background: var(--brand-soft); color: var(--brand); }
.h5-badge-gray { background: #F1F2F4; color: var(--text-sub); }
/* 「进行中」徽章内的火焰图标（赛事列表，旧站 mobile.events.tsx:219-222） */
.h5-badge svg { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; margin-right: 3px; }

/* ---------- 空态 / 加载 ---------- */
.h5-empty { text-align: center; color: var(--text-muted); padding: 36px 12px; font-size: 14px; }
.h5-empty-ico { font-size: 34px; display: block; margin-bottom: 8px; }
.h5-loading { text-align: center; color: var(--text-muted); padding: 24px; font-size: 13px; }

/* ---------- 栅格 ---------- */
.h5-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h5-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h5-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.h5-quick {
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px 4px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}
.h5-quick-ico { font-size: 22px; display: block; margin-bottom: 4px; }

/* ---------- Hero（首页通栏渐变） ---------- */
.h5-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--brand-grad);
    padding: 76px 24px 54px;
}
/* 右上角柔光斑（旧站的装饰效果） */
.h5-hero::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.h5-hero::before {
    content: '';
    position: absolute;
    left: -50px;
    bottom: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.h5-hero-inner { position: relative; z-index: 1; }
.h5-hero-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    font-size: 26px;
    font-weight: 900;
    color: var(--brand);
    flex-shrink: 0;
}
.h5-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-hero h1, .h5-hero h2 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .5px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.h5-hero p {
    margin: 0;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .88);
    position: relative;
    z-index: 1;
}

/* 首页快捷入口（上叠到 Hero 上） */
.h5-quick-wrap { padding: 0 16px; margin-top: -38px; margin-bottom: 12px; position: relative; z-index: 10; }
.h5-quick-card {
    display: flex;
    background: #fff;
    border-radius: 14px;
    padding: 14px 6px 12px;
    box-shadow: 0 8px 24px rgba(124, 45, 18, .10);
}
.h5-quick-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.h5-quick-item:active { opacity: .7; }
.h5-quick-ico2 {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qc-bg, #FEF3E7);
    color: var(--qc-fg, var(--brand));
}
.h5-quick-ico2 svg { width: 22px; height: 22px; display: block; }

/* 公告条 */
.h5-notice {
    margin: 0 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px 12px;
    text-decoration: none;
    color: inherit;
}
.h5-notice-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.h5-notice-ico svg { width: 18px; height: 18px; display: block; }
.h5-notice-body { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
/* 静态省略显示（不用跑马灯）：文字立刻可见，不会一开始就跑到屏外 */
.h5-notice-text {
    display: block;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-notice-arrow { color: var(--text-muted); flex-shrink: 0; display: flex; }
.h5-notice-arrow svg { width: 16px; height: 16px; }

/* ---------- 区块包装（旧站 px-4 + mb-6） ---------- */
.h5-sec { margin-bottom: 24px; }
.h5-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 14px;
}
.h5-sec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    color: #111827;
}
.h5-sec-title .h5-sec-bar {
    width: 3px;
    height: 17px;
    border-radius: 2px;
    background: var(--brand);
    flex-shrink: 0;
}
.h5-sec-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: var(--text-sub);
    text-decoration: none;
}
.h5-sec-more svg { width: 14px; height: 14px; }

/* ---------- 赛事卡（轮播） ---------- */
.h5-match-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.h5-match-list::-webkit-scrollbar { display: none; }
.h5-match-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--brand-border);
    box-shadow: 0 6px 18px rgba(153, 27, 27, .07);
    text-decoration: none;
    color: inherit;
    display: block;
}
.h5-match-card:active { transform: scale(.98); }
.h5-match-cover {
    position: relative;
    height: 176px;
    background-color: #991B1B;
    background-image: var(--brand-cover);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #fff;
}
.h5-match-cover.has-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 遮罩不能太黑，否则底下的现场照片就看不见了（旧站照片是能看清的） */
    background: linear-gradient(180deg, rgba(153, 27, 27, .34) 0%, rgba(153, 27, 27, .66) 100%);
}
.h5-match-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.h5-match-teams {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
}
.h5-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.h5-team-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 2px solid rgba(255, 255, 255, .55);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}
.h5-team-name {
    font-size: 13px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-match-score {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    flex-shrink: 0;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
}
.h5-match-foot { padding: 12px 14px 14px; }
.h5-match-foot h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.h5-match-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap; }
.h5-match-meta span { display: inline-flex; align-items: center; gap: 3px; }
.h5-match-meta svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- 活动卡 ---------- */
.h5-act-card {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.h5-act-card:active { background: #FDFCFA; }
.h5-act-thumb {
    width: 88px;
    height: 88px;
    border-radius: 8px;
    object-fit: cover;
    background: #F2EFEA;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #C9C2BB;
}
.h5-act-main { flex: 1; min-width: 0; }
.h5-act-main h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-act-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-sub); margin-bottom: 8px; }
.h5-act-meta span { display: inline-flex; align-items: center; gap: 3px; }
.h5-act-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.h5-act-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.h5-act-arrow { color: #CFC8C1; flex-shrink: 0; display: flex; }
.h5-act-arrow svg { width: 18px; height: 18px; }

/* ---------- 合作伙伴（旧站一行 5 个，logo 44px） ---------- */
.h5-partner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 16px; }
.h5-partner-cell {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 4px 6px;
    text-align: center;
    text-decoration: none;
    color: var(--text-sub);
    font-size: 10px;
    overflow: hidden;
}
.h5-partner-cell img {
    width: 100%;
    height: 34px;
    object-fit: contain;
    display: block;
    margin-bottom: 4px;
}
.h5-partner-cell .h5-partner-ph {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #C9C2BB;
    margin-bottom: 4px;
}
.h5-partner-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 旧版横向伙伴条（保留兼容） */
.h5-partner-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.h5-partner-item {
    flex-shrink: 0;
    width: 92px;
    text-align: center;
    text-decoration: none;
    color: var(--text-sub);
    font-size: 11px;
}
.h5-partner-item img { width: 92px; height: 46px; object-fit: contain; background: #fff; border-radius: 8px; }

/* 旧版滚动公告（保留兼容） */
.h5-marquee {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 9px 12px; margin: 0 16px 12px; overflow: hidden;
}
.h5-marquee-tag { background: var(--brand); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 11px; flex-shrink: 0; }
.h5-marquee-body { flex: 1; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--text); }
.h5-marquee-text { display: inline-block; padding-left: 100%; animation: h5m 22s linear infinite; }
@keyframes h5m { to { transform: translateX(-100%); } }

/* 旧版赛事卡（保留兼容） */
.h5-evt-card {
    display: block; text-decoration: none; color: inherit; background: #fff;
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.h5-evt-cover { width: 100%; height: 132px; object-fit: cover; background: #F2EFEA; display: block; }
.h5-evt-body { padding: 10px 12px; }
.h5-evt-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }

/* ---------- 文章 / 正文 ---------- */
.h5-article { padding: 4px 2px; }
.h5-article h1 { font-size: 20px; font-weight: 800; margin: 0 0 8px; line-height: 1.35; }
.h5-article-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.h5-article-body { font-size: 15px; line-height: 1.8; word-break: break-word; }
.h5-article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.h5-pre {
    background: #F7F5F2; border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; font-size: 12px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}

/* ---------- 金额 / 数字 ---------- */
.h5-price { color: var(--brand); font-weight: 700; }
.h5-num { font-size: 22px; font-weight: 700; }
.h5-stat { text-align: center; padding: 10px 4px; }
.h5-stat-num { font-size: 20px; font-weight: 700; display: block; color: var(--brand); }

/* ---------- 底部操作条 ---------- */
.h5-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: var(--app-max);
    margin: 0 auto;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 35;
}
.h5-actionbar .h5-btn { flex-shrink: 0; }
.h5-actionbar .h5-actionbar-main { flex: 1; }

/* ---------- toast ---------- */
.h5-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    max-width: 78%;
    text-align: center;
    z-index: 999;
}

/* ---------- 扫码支付二维码弹层 ---------- */
.qr-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.qr-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 16px 14px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.qr-title { font-size: 17px; font-weight: 700; }
.qr-amount { font-size: 24px; font-weight: 700; color: var(--brand); margin-top: 4px; }
.qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 216px;
    margin: 12px 0 8px;
}
.qr-box canvas { border-radius: 6px; }
.qr-fallback { color: var(--text-muted); font-size: 13px; line-height: 1.6; padding: 40px 8px; }
.qr-tip { color: var(--text-sub); font-size: 13px; line-height: 1.5; }
.qr-url {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-all;
    max-height: 46px;
    overflow: hidden;
}
.qr-actions { display: flex; gap: 8px; margin-top: 14px; }
.qr-btn {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}
.qr-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.qr-btn-plain { color: var(--text-muted); }

/* ---------- 移动管理台（/mobile/admin） ---------- */
.ma-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ma-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    text-decoration: none;
    color: var(--text);
}
.ma-entry:active { background: var(--brand-soft); }
.ma-entry-ico { font-size: 22px; line-height: 1; }
.ma-entry-t { font-size: 13px; font-weight: 600; }
.ma-entry-d { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.ma-group {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding-left: 2px;
}
.ma-group:first-child { margin-top: 4px; }

.ma-result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.7;
}
.ma-ok { background: #e7f8ee; color: #14663a; }
.ma-bad { background: #fdeaea; color: #a01c1c; }
.ma-line { font-size: 13px; line-height: 1.7; padding: 2px 0; }

/* ==========================================================================
   子页面「红色渐变页头」（旧站实测：红底 + 返回 + 标题 + 副标题）
   ========================================================================== */
.h5-topbar--grad {
    height: auto;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--brand-grad);
    border-bottom: 0;
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* 旧站返回键：36×36 圆角方块（白色 20% 底）+ 箭头图标 */
.h5-topbar--grad .h5-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.h5-topbar--grad .h5-back svg { width: 18px; height: 18px; display: block; }
.h5-head-main { flex: 1; min-width: 0; text-align: left; }
.h5-topbar--grad .h5-title {
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    line-height: 1.25;
}
.h5-head-sub {
    margin: 1px 0 0;
    font-size: 10px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.3;
}

/* 资料头（「我的」页顶部，通栏渐变） */
.h5-profile {
    background: var(--brand-grad);
    /* 上面没有页头（noTop），顶部留出状态栏空间 —— 实测旧站为 32px 20px 64px */
    padding: 32px 20px 64px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* 旧站资料头头像为 64×64（w-16 h-16），比通用 .h5-avatar 大一档 */
.h5-profile .h5-avatar { width: 64px; height: 64px; font-size: 26px; }
.h5-profile::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.h5-profile-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.h5-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.h5-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-profile-info { flex: 1; min-width: 0; }
.h5-profile-name { margin: 0; font-size: 19px; font-weight: 800; }
.h5-profile-sub { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, .85); }
.h5-profile-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    background: #fff;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

/* 上叠容器（让卡片压在渐变头下沿） */
.h5-overlap { padding: 0 16px; margin-top: -38px; position: relative; z-index: 10; }

/* 白卡区块（我的页各功能卡） */
.h5-block {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin: 0 16px 12px;
    overflow: hidden;
}
.h5-block-row { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: inherit; }
.h5-block-ico {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.h5-block-ico svg { width: 20px; height: 20px; display: block; }
.h5-block-main { flex: 1; min-width: 0; }
.h5-block-t { display: block; margin: 0; font-size: 15px; font-weight: 700; }
.h5-block-d { display: block; margin: 3px 0 0; font-size: 12px; color: var(--text-muted); }
.h5-block-btn {
    flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 15px;
    border: 1px solid var(--brand-border); background: #fff; color: var(--brand);
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px;
    text-decoration: none; cursor: pointer; font-family: inherit;
}
.h5-block-btn svg { width: 13px; height: 13px; display: block; }
.h5-block-divider { height: 1px; background: var(--border); margin: 0 14px; }

/* 积分卡 */
.h5-points-num { display: inline-flex; align-items: baseline; gap: 4px; }
.h5-points-num b { font-size: 24px; font-weight: 900; color: var(--brand); line-height: 1; }
.h5-points-num span { font-size: 13px; color: var(--text-sub); }

/* 签到 7 天进度 */
.h5-checkin-days { display: flex; gap: 6px; padding: 2px 14px 4px; }
.h5-checkin-day {
    flex: 1; height: 36px; border-radius: 9px; background: #F5F2EE; color: var(--text-muted);
    font-size: 13px; font-weight: 700; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1;
}
.h5-checkin-day.is-done { background: var(--brand-soft); color: var(--brand); }
.h5-checkin-day.is-goal { background: var(--brand); color: #fff; }
.h5-checkin-day small { font-size: 9px; margin-top: 2px; }
.h5-block-note { margin: 0; padding: 8px 14px 13px; font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* 分组标题 + 双行单元格（服务 / 工具 / 其他） */
.h5-group-title {
    /* 实测旧站：10px/700 + padding 12px 16px 4px（无外边距，左缘与卡片对齐） */
    margin: 0; padding: 12px 16px 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    color: var(--text-muted);
}
.h5-cells {
    background: #fff; border-radius: 14px; border: 1px solid var(--border);
    margin: 0 16px 4px; overflow: hidden;
}
.h5-cell {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px;
    text-decoration: none; color: inherit; border-bottom: 1px solid var(--border);
}
.h5-cell:last-child { border-bottom: 0; }
.h5-cell-ico {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
}
.h5-cell-ico svg { width: 18px; height: 18px; display: block; }
.h5-cell-main { flex: 1; min-width: 0; }
/* ⚠️ 必须 display:block：模板里这两行用的是 <span>（行内元素），
   否则主标题与副标题会挤在同一行 —— 旧站是上下两行 */
.h5-cell-t { display: block; margin: 0; font-size: 15px; font-weight: 600; }
.h5-cell-d { display: block; margin: 3px 0 0; font-size: 11px; color: var(--text-muted); }
.h5-cell-arrow { color: #CFC8C1; flex-shrink: 0; display: flex; }
.h5-cell-arrow svg { width: 17px; height: 17px; display: block; }

/* ==========================================================================
   列表页渐变页头（含搜索框）—— 旧站赛事/商城/活动等列表页共用
   ========================================================================== */
.h5-phead {
    position: relative;
    overflow: hidden;
    background: var(--brand-grad);
    padding: 20px 20px 36px;
    color: #fff;
}
.h5-phead::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -24px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.h5-phead-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.h5-phead-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.h5-phead-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(251, 191, 36, .2);
    border: 1px solid rgba(252, 211, 77, .3);
    color: #FCD34D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.h5-phead-ico svg { width: 22px; height: 22px; display: block; }
.h5-phead-t { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.2; }
.h5-phead-d { margin: 2px 0 0; font-size: 10px; color: rgba(255, 255, 255, .6); }
.h5-phead-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.h5-phead-btn svg { width: 18px; height: 18px; display: block; }
.h5-search {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .95);
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 8px 24px rgba(153, 27, 27, .18);
}
.h5-search > svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.h5-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    color: var(--text);
}
.h5-search input::placeholder { color: #9CA3AF; }
/* 搜索框「清除」按钮（赛事列表）：有值时显示，纯文字按钮（旧站 mobile.events.tsx:145） */
.h5-search-clear {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
    border: 0; background: transparent; padding: 0 2px; cursor: pointer;
    color: var(--brand); font-size: 12px; font-weight: 700; font-family: inherit;
}
.h5-search-clear svg { width: 14px; height: 14px; display: block; }
.h5-search-clear[hidden] { display: none; }

/* 分段筛选（白底圆角容器 + 内嵌按钮） */
.h5-seg-wrap { padding: 0 16px; margin-top: -20px; position: relative; z-index: 10; }
.h5-seg {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(254, 226, 226, .8);
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(153, 27, 27, .05);
    overflow-x: auto;
    scrollbar-width: none;
}
.h5-seg::-webkit-scrollbar { display: none; }
.h5-seg-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.h5-seg-btn.is-on { background: var(--brand-grad); color: #fff; }

/* 列表容器（卡间距 16px） */
.h5-listwrap { padding: 16px 16px 0; }
.h5-listwrap > * + * { margin-top: 16px; }

/* 赛事大卡 */
.h5-evcard {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(153, 27, 27, .05);
}
.h5-evcover {
    position: relative;
    height: 150px;
    background-color: var(--brand-700);
    background-image: var(--brand-cover);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: #fff;
}
.h5-evcover.has-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(153, 27, 27, .42) 0%, rgba(153, 27, 27, .74) 100%);
}
.h5-evcover > * { position: relative; z-index: 2; }
.h5-ev-top {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 56px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.h5-ev-name {
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-ev-share {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.h5-ev-share svg { width: 15px; height: 15px; display: block; }
.h5-evteams { flex: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 10px; }
.h5-evinfo { padding: 12px 16px 14px; }
.h5-evinfo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 9px;
}
.h5-evinfo-row > span { display: inline-flex; align-items: center; gap: 4px; }
.h5-evinfo-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.h5-evnav {
    margin-left: auto;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-sub);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}
.h5-evnav svg { width: 12px; height: 12px; }
.h5-evcbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    border-radius: 12px;
    border: 0;
    background: var(--brand-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
}
.h5-evcbtn svg { width: 15px; height: 15px; }
.h5-evcbtn.is-done { background: #F5F2EE; color: var(--text-sub); }
/* 已购票（本人有 paid 票务订单）：绿色描边，对应旧站 emerald-50 / emerald-700 */
.h5-evcbtn.is-owned { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
/* 进行中赛事：绿色渐变，对应旧站 emerald→teal（mobile.events.tsx:307-309） */
.h5-evcbtn.is-live { background: linear-gradient(135deg, #10B981, #14B8A6); color: #fff; }

/* ==========================================================================
   登录 / 会员引导抽屉（H5.loginGate / H5.memberGate 动态创建）
   版式与 activity-info.php 的 .act-sheet 一致，宽度跟随应用外壳 --app-max
   ========================================================================== */
.h5-gate-mask {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(0, 0, 0, .45);
    display: flex; align-items: flex-end; justify-content: center;
}
.h5-gate-sheet {
    width: 100%; max-width: var(--app-max); background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 86%; overflow: auto;
    animation: h5GateUp .22s ease-out;
}
@keyframes h5GateUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.h5-gate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0 12px; }
.h5-gate-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.h5-gate-close {
    width: 30px; height: 30px; border: 0; border-radius: 50%; background: #F3F1EE;
    color: var(--text-muted); font-size: 14px; line-height: 1; flex-shrink: 0;
    cursor: pointer; font-family: inherit;
}
.h5-gate-body {
    background: #FAF8F5; border-radius: 12px; padding: 14px;
    font-size: 13px; line-height: 1.7; color: var(--text-sub);
}
.h5-gate-body.is-warn { background: #FFFBEB; color: #92400E; }
.h5-gate-muted { border: 0; color: var(--text-muted); font-weight: 400; }
.h5-gate-sheet > .h5-btn:last-child { margin-bottom: 8px; }

/* ==========================================================================
   分类 chips（商城）：横向滚动，选中为白底胶囊，图标在上文字在下
   ========================================================================== */
.h5-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: none;
    align-items: center;
}
.h5-chips::-webkit-scrollbar { display: none; }
.h5-chips-wrap { position: relative; z-index: 10; margin-top: -24px; }
.h5-chip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 14px;
    border-radius: 16px;
    border: 1px solid rgba(254, 226, 226, .7);
    background: rgba(255, 255, 255, .75);
    color: var(--text-sub);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
}
.h5-chip svg { width: 15px; height: 15px; display: block; }
.h5-chip.is-on { background: #fff; color: var(--brand); box-shadow: 0 4px 12px rgba(153, 27, 27, .10); }

/* ---------- 商品卡（2 列网格） ---------- */
.h5-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h5-pcard {
    position: relative;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(153, 27, 27, .05);
    text-decoration: none;
    color: inherit;
    display: block;
}
.h5-pcard-cover {
    height: 128px;
    background: #F3F1EE;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.h5-pcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-pcard-stock {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-sub);
    background: rgba(255, 255, 255, .8);
    border-radius: 999px;
    padding: 1px 6px;
}
.h5-pcard-body { padding: 12px; }
.h5-pcard-t {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    min-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.h5-pcard-price { display: flex; align-items: center; justify-content: space-between; }
.h5-pcard-price-l { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.h5-pcard-price b { font-size: 16px; font-weight: 900; color: #C81623; }
.h5-pcard-price s { font-size: 10px; color: var(--text-muted); }
.h5-pcard-add {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: #F3F1EE;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.h5-pcard-add svg { width: 16px; height: 16px; }
.h5-pcard-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #FFF7ED;
    font-size: 9px;
}
.h5-pcard-tag {
    font-weight: 700;
    color: #D97706;
    background: #FFFBEB;
    border-radius: 999px;
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.h5-pcard-tag svg { width: 10px; height: 10px; }
.h5-pcard-gift { color: var(--text-muted); }
.h5-pcard-gift strong { color: #D97706; font-weight: 700; }

/* ---------- 活动横卡（图左 + 信息右，列表页用） ---------- */
.h5-acard {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(153, 27, 27, .05);
    padding: 10px;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
}
.h5-acard-thumb {
    width: 104px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    background: #F3F1EE;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #C9C2BB;
}
.h5-acard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h5-acard-top { display: flex; align-items: flex-start; gap: 6px; }
.h5-acard-top h3 {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h5-acard-share {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}
.h5-acard-share svg { width: 13px; height: 13px; }
.h5-acard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--text-sub);
    margin: 7px 0 0;
    align-items: center;
}
.h5-acard-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.h5-acard-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.h5-acard-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--text-muted); }
.h5-acard-foot > span { display: inline-flex; align-items: center; gap: 3px; }
.h5-acard-foot svg { width: 12px; height: 12px; }

/* ---------- 分页提示条 ---------- */
.h5-pager { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 16px 20px; }

/* ---------- 活动列表页新增（广告条 / 远征置顶 / 已报名角标 / 卡片按钮区 / 分页按钮）----------
   全部是**新增类**，不改 .h5-acard / .h5-badge / .h5-pager 既有规则，其它页面零影响 */
.h5-adbar {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #B91C1C, #C81623 55%, #DC2626);
    text-decoration: none;
    color: #fff;
}
.h5-adbar img { display: block; width: 100%; height: auto; }
.h5-adbar.is-plain { padding: 14px; }
.h5-adbar-txt { font-size: 13px; font-weight: 800; }
.h5-adbar-tag {
    position: absolute; right: 6px; bottom: 6px;
    font-size: 9px; line-height: 1; padding: 3px 5px; border-radius: 4px;
    background: rgba(0, 0, 0, .35); color: #fff;
}
/* 远征项目 · 置顶推荐 */
.ac-top { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 2px; }
.ac-top-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.ac-top-title { position: relative; padding-left: 9px; font-size: 14px; font-weight: 900; color: var(--text); }
.ac-top-title::before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
    border-radius: 2px; background: var(--brand);
}
.ac-top-sub { font-size: 10px; color: var(--text-muted); }
.ac-top-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border); }
.ac-top-main { flex: 1; min-width: 0; }
.ac-top-row { display: flex; align-items: center; gap: 6px; }
.ac-exp-tag { flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 4px; padding: 1px 5px; }
.ac-top-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-top-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 10px; color: var(--text-muted); }
.ac-top-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.ac-top-meta svg { width: 11px; height: 11px; }
.ac-exp-go {
    flex-shrink: 0; font-size: 12px; font-weight: 800; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #C81623, #DC2626); border-radius: 999px; padding: 6px 12px;
}
/* 缩略图容器 + 已报名绿色对勾角标 */
.h5-acard-thumbwrap { position: relative; flex-shrink: 0; display: flex; }
.h5-acard-check {
    position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; border-radius: 50%;
    background: #059669; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.h5-acard-check svg { width: 10px; height: 10px; }
/* 地点改用 CSS 单行省略（不再在 PHP 侧截断，DOM 里保留完整地址） */
.h5-acard-loc { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 卡片右侧：分享按钮 + 状态按钮区 */
.h5-acard-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; flex-shrink: 0; }
.h5-acard-cta { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.h5-acard-cta.is-go { color: #fff; background: linear-gradient(135deg, #C81623, #DC2626); box-shadow: 0 2px 6px rgba(200, 22, 35, .25); }
.h5-acard-cta.is-signed { color: #059669; background: #ECFDF5; border: 1px solid #A7F3D0; }
.h5-acard-cta.is-live { color: #059669; background: #ECFDF5; border: 1px solid #A7F3D0; }
.h5-acard-cta.is-end { color: #9A938E; background: #F4F1EE; border: 1px solid #E7E2DC; }
/* 分页按钮组（上一页 / 页码 / 下一页） */
.h5-pager-btns { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 16px 22px; }
.h5-pager-btn {
    min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff; color: var(--text-sub);
    font-size: 12px; font-weight: 700; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.h5-pager-btn.is-on { background: linear-gradient(135deg, #C81623, #DC2626); border-color: transparent; color: #fff; }
.h5-pager-btn[disabled] { opacity: .45; cursor: not-allowed; }
.h5-empty-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ==========================================================================
   页头变体 / 列表页辅助组件（捐赠、现场素材、球迷社区、购物车）
   ========================================================================== */
/* 浅色页头（捐赠页：白底 + 图标 + 标题，不是红色渐变） */
.h5-phead--light {
    background: #fff;
    color: var(--text);
    padding: 14px 20px 8px;
    overflow: visible;
}
.h5-phead--light::after { display: none; }
.h5-phead--light .h5-phead-t { color: var(--text); font-size: 16px; font-weight: 800; }
.h5-phead--light .h5-phead-row { margin-bottom: 12px; }
.h5-phead-ico--green {
    width: 36px; height: 36px; border-radius: 10px;
    background: #ECFDF5; color: #059669; border-color: transparent;
}
/* 灰色搜索（捐赠/现场素材） */
.h5-search--gray {
    background: #F3F4F6;
    box-shadow: none;
    border-radius: 12px;
    padding: 8px 12px;
}
.h5-search--round { border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: none; padding: 8px 14px; }
/* 灰色分段（捐赠页，选中为白底 + 翠绿字） */
.h5-seg--gray {
    background: #F3F4F6;
    border: 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 2px;
    gap: 0;
}
.h5-seg--gray .h5-seg-btn { flex: 1; text-align: center; border-radius: 10px; color: #6B7280; }
.h5-seg--gray .h5-seg-btn.is-on { background: #fff; color: #047857; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
/* 圆形 chips（现场素材 / 球迷社区） */
.h5-chips-round { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 4px; scrollbar-width: none; }
.h5-chips-round::-webkit-scrollbar { display: none; }
.h5-chip-round {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #fff;
    color: var(--text-sub);
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
}
.h5-chip-round.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.h5-chip-round--md { font-size: 12px; padding: 6px 14px; }
/* 紧凑页头（现场素材：44px） */
.h5-phead--compact { padding: 10px 20px 12px; }
.h5-phead--compact .h5-phead-row { margin-bottom: 0; align-items: center; }
.h5-phead-back {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-decoration: none;
}
.h5-phead-back svg { width: 18px; height: 18px; display: block; }
.h5-phead-right {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(251, 191, 36, .2); border: 1px solid rgba(252, 211, 77, .3);
    color: #FCD34D;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.h5-phead-right svg { width: 18px; height: 18px; display: block; }
/* 空态（圆圈 / 大 emoji 两种） */
.h5-emptybox { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 16px; }
.h5-emptybox--tight { padding: 40px 16px; }
.h5-emptybox-emoji { font-size: 60px; line-height: 1; margin-bottom: 16px; }
.h5-emptybox-circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.h5-emptybox-circle svg { width: 34px; height: 34px; display: block; }
.h5-emptybox-t { font-size: 14px; font-weight: 700; color: #6B7280; margin: 0; }
.h5-emptybox-d { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.h5-emptybox-act { margin-top: 20px; }
/* 橙色胶囊按钮（购物车空态「去逛逛」） */
.h5-pill-orange {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 32px; border-radius: 999px;
    background: #F97316; color: #fff; font-size: 14px; font-weight: 500;
    text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
/* 球迷社区：发言入口 */
.h5-postbox {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: #fff; border: 1px solid #FEE2E2; border-radius: 16px;
    padding: 12px; box-shadow: 0 1px 2px rgba(153, 27, 27, .05);
    cursor: pointer; font-family: inherit; text-decoration: none; color: var(--text);
}
.h5-postbox-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: #FEF2F2; color: var(--brand);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.h5-postbox-ico svg { width: 18px; height: 18px; display: block; }
/* ⚠️ 尾部箭头是 flex 的「直接子元素」，必须显式给尺寸；
   否则 SVG 无尺寸约束会自撑满容器，把整张卡撜成巨块、文字被迫竖排（已踩）。 */
.h5-postbox > svg { width: 16px; height: 16px; flex-shrink: 0; color: #CFC8C1; display: block; }
.h5-postbox-t {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 白色 sticky 页头（购物车） */
.h5-topbar2 { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--border); }
.h5-topbar2-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.h5-topbar2 .h5-title { font-size: 16px; font-weight: 700; }
.h5-topbar2-count { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.h5-topbar2 .h5-back { color: var(--text); }
/* 底部固定操作条（现场素材） */
.h5-bar2 {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    max-width: var(--app-max); margin: 0 auto;
    background: #fff; border-top: 1px solid var(--border);
    padding: 10px 16px 12px; z-index: 35;
}
.h5-bar2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h5-bar2-l { font-size: 11px; color: var(--text-sub); }
.h5-bar2-l b { color: var(--text-muted); font-weight: 700; }

/* ---------- 资讯 / 公告卡（通知公告、新闻资讯共用） ---------- */
.h5-ncard {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(153, 27, 27, .04);
    padding: 16px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.h5-ncard-share {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #F3F4F6;
    border: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.h5-ncard-share svg { width: 14px; height: 14px; display: block; }
.h5-ncard-row { display: flex; align-items: flex-start; gap: 12px; }
.h5-ncard-thumb {
    width: 72px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: #F3F1EE;
    flex-shrink: 0;
}
.h5-ncard-t {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    padding-right: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.h5-ncard-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 10px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.h5-ncard-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.h5-ncard-meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.h5-ncard-x {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 空态白卡（登录引导 / 暂无内容） ---------- */
.h5-emptycard {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.h5-emptycard-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF2F2;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.h5-emptycard-circle svg { width: 26px; height: 26px; display: block; }
.h5-emptycard-t { font-size: 14px; font-weight: 700; color: #4B5563; margin: 0; }
/* 渐变胶囊按钮（旧站登录引导的「去登录」） */
.h5-btn-grad {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C81623, #DC2626);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.h5-btn-grad svg { width: 14px; height: 14px; }

/* ==========================================================================
   可编辑单元格（编辑资料页）—— 点按行内变输入框
   ========================================================================== */
.h5-cell-in {
    width: 100%; border: 0; background: transparent; outline: none;
    padding: 0; margin: 3px 0 0; text-align: right;
    font-size: 12px; font-weight: 700; color: var(--brand);
    font-family: inherit;
}
.h5-cell-in::placeholder { color: #C9C2BB; font-weight: 400; }
.h5-cell[data-edit] { cursor: pointer; }
.h5-cell[data-edit] .h5-cell-d { text-align: right; }

/* 底部保存条：必须悬浮在 tabbar **之上**（两者都是 fixed bottom:0，否则会盖住底栏） */
.h5-savebar {
    position: fixed; left: 50%; z-index: 60;
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: 430px;
    transform: translateX(-50%) translateY(160%);
    padding: 12px 20px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    transition: transform .22s ease;
}
.h5-savebar.is-on { transform: translateX(-50%) translateY(0); }

/* 密码面板 */
.h5-pwdpanel { display: none; }
.h5-pwdpanel.is-on { display: block; }
/* 资料卡（编辑资料页顶部） */
.h5-pfcard { display: flex; align-items: center; gap: 12px; }
.h5-pfcard .h5-avatar {
    width: 48px; height: 48px; font-size: 20px; box-shadow: none;
    background: var(--brand-grad); color: #fff;
}
.h5-pfmain { flex: 1; min-width: 0; }
.h5-pfname { margin: 0; font-size: 16px; font-weight: 800; }
.h5-pfsub { margin: 3px 0 0; font-size: 11px; color: var(--text-muted); }
/* 积分卡（我的积分页） */
.h5-points {
    position: relative; overflow: hidden;
    margin: 4px 16px 0; padding: 20px;
    border-radius: 16px; background: var(--brand-grad); color: #fff;
}
.h5-points::after {
    content: ''; position: absolute; right: -34px; top: -34px;
    width: 128px; height: 128px; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
.h5-points-num { position: relative; z-index: 1; font-size: 34px; font-weight: 900; line-height: 1.1; }
.h5-points-lab { position: relative; z-index: 1; margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, .82); }
.h5-points-foot {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .22); font-size: 11px;
}
.h5-points-foot a { color: #fff; font-weight: 800; text-decoration: none; }
.h5-points-delta { flex-shrink: 0; font-size: 15px; font-weight: 900; }
.h5-points-delta--plus { color: #16A34A; }
.h5-points-delta--minus { color: #C81623; }
/* 订单/票务/报名/捐赠卡片（会员中心列表页共用） */
.h5-ocard {
    margin: 0 16px 12px; background: #fff;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.h5-ocard-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.h5-ocard-no {
    flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-ocard-body { display: flex; gap: 10px; padding: 12px 14px; }
.h5-ocard-thumb {
    width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
    object-fit: cover; background: #F6F3EF;
}
.h5-ocard-main { flex: 1; min-width: 0; }
.h5-ocard-t {
    margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h5-ocard-meta { margin: 4px 0 0; font-size: 11px; color: var(--text-muted); }
.h5-ocard-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 14px 12px;
}
.h5-ocard-price { font-size: 16px; font-weight: 900; color: var(--brand); }
.h5-ocard-acts { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.h5-ocard-code {
    margin: 0 14px 12px; padding: 8px 10px; border-radius: 8px;
    background: var(--brand-soft); font-size: 11px; color: #8A2B32;
}
/* ==========================================================================
   登录 / 注册（对齐旧站）
   ========================================================================== */
/* 红色渐变页头之后的品牌延续块：白色圆形 Logo + 口号 */
.h5-auth-hero {
    display: flex; flex-direction: column; align-items: center;
    /* 通栏：抵消 .h5-main 的内边距，才能与上面的渐变页头无缝相接 */
    margin: -12px -12px 0;
    padding: 18px 12px 48px;
    background: linear-gradient(180deg, #DC2626 0%, #EF4444 100%);
    color: #fff;
}
.h5-auth-logo {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 8px;
}
.h5-auth-slogan { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .9); }
.h5-auth-body { padding: 0 20px; margin-top: -30px; }
.h5-auth-plain { padding: 4px 16px 0; }
.h5-auth-card {
    background: #fff; border-radius: 16px; padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    border: 1px solid var(--border); margin: 0;
}
.h5-auth-alt { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--text-sub); }
.h5-auth-alt a { color: var(--brand); font-weight: 700; text-decoration: none; }
.h5-auth-tip { margin: 14px 0 0; text-align: center; font-size: 10px; color: #C9C2BB; }
.h5-auth-tip a { color: var(--text-muted); text-decoration: none; }
.h5-code-row { display: flex; gap: 8px; align-items: center; }
.h5-btn-code {
    height: 44px; flex-shrink: 0; min-width: 104px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand); font-weight: 700;
}
.h5-btn-code[disabled] { opacity: .5; }

/* 白色吸顶页头（注册/素材等页） */
.h5-topbar--light {
    background: #fff !important; background-image: none !important;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
}
.h5-topbar--light .h5-back { background: #F1F2F4; color: var(--text); }
.h5-topbar--light .h5-title { color: var(--text); font-size: 14px; }
.h5-topbar--light .h5-head-sub { color: var(--text-muted); }
/* ==========================================================================
   会费续缴页（/mobile/renew）
   ========================================================================== */
.h5-feehero {
    position: relative; overflow: hidden;
    margin: 4px 16px 0; padding: 18px;
    border-radius: 16px; background: var(--brand-grad); color: #fff;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.h5-feehero::after {
    content: ''; position: absolute; right: -30px; top: -34px;
    width: 118px; height: 118px; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.h5-feehero-ico {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.h5-feehero-main { position: relative; z-index: 1; flex: 1; min-width: 0; }
.h5-feehero-y { margin: 0; font-size: 11px; color: rgba(255, 255, 255, .7); }
.h5-feehero-lv { margin: 2px 0 0; font-size: 16px; font-weight: 800; }
.h5-feehero-yrs {
    position: relative; z-index: 1; width: 100%; margin: 6px 0 0;
    font-size: 10px; color: rgba(255, 255, 255, .7);
}
.h5-feenotice {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 12px 16px 0; padding: 10px 12px;
    border-radius: 12px; background: #FFFBEB; border: 1px solid #FEF3C7;
}
.h5-feenotice span { flex-shrink: 0; font-size: 13px; line-height: 1.3; }
.h5-feenotice p { margin: 0; font-size: 10px; line-height: 1.5; color: #B45309; }
.h5-feegrid {
    display: grid; grid-template-columns: 1fr 1fr;
    margin: 12px 16px 0; background: #fff;
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.h5-feegrid > div { padding: 14px; text-align: center; }
.h5-feegrid > div + div { border-left: 1px solid var(--border); }
.h5-feegrid b { display: block; font-size: 19px; font-weight: 900; color: var(--brand); }
.h5-feegrid span { display: block; margin-top: 3px; font-size: 10px; color: var(--text-muted); }
.h5-feeamt { flex-shrink: 0; margin-left: 8px; font-size: 14px; font-weight: 900; color: var(--brand); }

/* ==========================================================================
   登录页补充件（密码明暗切换 / 忘记密码 / 认领 / 提示块）
   ========================================================================== */
.h5-pwrow { display: flex; align-items: center; gap: 8px; }
.h5-pweye {
    flex-shrink: 0; width: 40px; height: 40px; border: 0; background: transparent;
    font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}
.h5-forgot {
    display: block; width: 100%; margin: 2px 0 12px; padding: 0;
    border: 0; background: transparent; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--brand); cursor: pointer;
    font-family: inherit;
}
.h5-auth-claim { color: #D97706 !important; font-weight: 700 !important; }
.h5-auth-tips {
    margin: 14px 4px 0; padding: 12px 14px;
    border-radius: 12px; background: #FFFBEB; border: 1px solid #FEF3C7;
}
.h5-auth-tips p { margin: 0; font-size: 11px; line-height: 1.7; color: #B45309; }
/* ⚠️ 模板里给 .h5-cell 加了 hidden 属性隐藏「会费续缴」行，
   但 .h5-cell 自身的 display:flex 会覆盖 UA 的 [hidden]{display:none}，
   导致未登录时该行仍然可见（副标题显示占位符「—」）。这里强制生效。 */
.h5-cell[hidden], .h5-block[hidden], .h5-tab[hidden] { display: none !important; }
/* ==========================================================================
   老会员二次认证（/mobile/claim）
   ========================================================================== */
.h5-claim-hero {
    padding: 44px 16px 32px;
    background: linear-gradient(135deg, #D3222A 0%, #B91C22 50%, #8B0A1A 100%);
    color: #fff;
}
.h5-claim-hero-top { display: flex; align-items: center; gap: 10px; }
.h5-claim-back {
    width: 34px; height: 34px; flex-shrink: 0; border: 0;
    border-radius: 10px; background: rgba(255, 255, 255, .18); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.h5-claim-back svg { width: 18px; height: 18px; display: block; }
.h5-claim-hero-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; }
.h5-claim-hero-d { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.h5-claim-hero-d b { color: #FCD34D; }
.h5-claim-body { padding: 0 16px; margin-top: -16px; }
.h5-claim-card {
    background: #fff; border-radius: 16px; border: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05); padding: 16px;
}
.h5-claim-steps { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 16px; }
.h5-claim-step {
    padding: 4px 8px; border-radius: 8px;
    background: #F3F4F6; color: var(--text-muted); font-weight: 600;
}
.h5-claim-step.is-on { background: var(--brand-soft); color: var(--brand); }
.h5-claim-step-arrow { color: #D1D5DB; }
.h5-claim-tip {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #F9FAFB;
}
.h5-claim-tip span { flex-shrink: 0; font-size: 13px; }
.h5-claim-tip p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-muted); }
.h5-claim-upload {
    position: relative; height: 150px; border-radius: 12px;
    border: 1px dashed #D9D2CB; background: #FCFBF9;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer;
}
.h5-claim-upload img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-claim-upload-ph { text-align: center; color: var(--text-muted); }
.h5-claim-upload-ph span { font-size: 26px; }
.h5-claim-upload-ph p { margin: 6px 0 0; font-size: 12px; }
.h5-label-note { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.h5-req { color: #EF4444; }
.h5-field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h5-field-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ==========================================================================
   入会 / 升级页（app/views/site/h5/join.php）本次 UI 对齐 —— **全部为新增类**，
   不改动上面任何既有类（.h5-card / .h5-btn / .h5-field / .h5-field-3col …）的定义。
   ========================================================================== */
/* hidden 属性对设置了 display 的元素不生效（作者样式会盖掉 UA 的 [hidden]{display:none}）：
   入会页的三个弹层都是 display:flex，必须显式声明（与 .h5-cell[hidden] 同理） */
#claim-mask[hidden], #ok-mask[hidden], .h5-jn-tip-mask[hidden] { display: none !important; }

/* ---- 步骤进度条（旧站 StepsHeader：完成打勾、当前高亮；最多 5 步，窄屏可换行） ---- */
.h5-jn-steps {
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 8px 10px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.h5-jn-step {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 700; color: #9CA3AF; background: #F3F4F6;
}
.h5-jn-step.is-on { color: #fff; background: var(--brand); }
.h5-jn-step.is-done { color: #16A34A; background: #E7F8EE; }
.h5-jn-step-line { width: 12px; height: 2px; border-radius: 2px; background: #E5E7EB; }

/* ---- 身份证照片标签行 + 「上传说明」链接 ---- */
.h5-jn-labelrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.h5-jn-tiplink {
    padding: 0; border: 0; background: none; font-family: inherit;
    font-size: 11px; color: var(--brand); text-decoration: underline dotted;
    text-underline-offset: 2px; cursor: pointer;
}

/* ---- 省 / 市 / 区县三列（三列窄，字号压到 12px 免得名字被截断） ---- */
.h5-jn-region .h5-select { font-size: 12px; padding: 10px 6px; }

/* ---- 扩展信息折叠头 ---- */
.h5-jn-exthead { display: flex; align-items: center; gap: 8px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.h5-jn-exthead .h5-card-title { margin: 0; }
.h5-jn-extchev {
    display: inline-block; color: var(--text-muted); font-size: 12px; line-height: 1;
    transition: transform .2s ease;
}
.h5-jn-extchev.is-open { transform: rotate(180deg); }

/* ---- 证件照上传（旧站 84×112 证件照框） ---- */
.h5-jn-avatar-img {
    width: 84px; height: 112px; flex-shrink: 0; border-radius: 10px;
    object-fit: cover; border: 2px solid var(--brand-soft); background: #F2EFEA;
}
.h5-jn-avatar-add {
    width: 100%; height: 112px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    border: 2px dashed var(--brand-border); border-radius: 10px;
    background: var(--brand-tint); color: var(--brand);
    font-family: inherit; cursor: pointer;
}
.h5-jn-avatar-add-ico { font-size: 22px; line-height: 1; }
.h5-jn-avatar-add-t { font-size: 12px; font-weight: 700; }

/* ---- 身份证照片「上传说明」弹窗（旧站 1240-1270） ---- */
.h5-jn-tip-mask {
    position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 0 28px;
}
.h5-jn-tip { width: 100%; max-width: 340px; background: #fff; border-radius: 16px; padding: 18px; }
.h5-jn-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.h5-jn-tip-t { margin: 0; font-size: 15px; font-weight: 800; color: #1F2937; }
.h5-jn-tip-x {
    width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 50%;
    background: #F3F4F6; color: #9CA3AF; font-size: 12px; cursor: pointer;
}
.h5-jn-tip-ul { margin: 0; padding-left: 18px; }
.h5-jn-tip-ul li { font-size: 12px; line-height: 1.9; color: #4B5563; }
.h5-jn-tip-ul li b { color: #1F2937; }
.h5-jn-tip-note {
    margin-top: 12px; padding: 10px 12px; border-radius: 10px;
    background: #EFF6FF; border: 1px solid #DBEAFE;
}
.h5-jn-tip-note p { margin: 0; font-size: 11px; line-height: 1.8; color: #2563EB; }
.h5-jn-tip-note-t { font-weight: 800; color: #1D4ED8 !important; margin-bottom: 2px !important; }

/* ---- 入会资格考试 + 阅读入会须知（join.php 的提交前闸门，本次新增类） ----
   ⚠️ 覆盖层用 position:fixed，必须显式 [hidden]{display:none!important}
      （作者样式的 display 会盖掉 UA 的 [hidden]） */
.h5-jn-flow { position: fixed; inset: 0; z-index: 80; background: #F5F6F8; }
.h5-jn-flow[hidden] { display: none !important; }
.h5-jn-quizflow { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.h5-jn-termsflow { display: flex; flex-direction: column; }
.h5-jn-flowhead {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
    height: 48px; padding: 0 12px; background: #fff; border-bottom: 1px solid #F0F1F3;
}
.h5-jn-flowback {
    width: 30px; height: 30px; border: 0; background: transparent; font-size: 22px;
    line-height: 1; color: #374151; cursor: pointer;
}
.h5-jn-flowtitle { font-size: 15px; font-weight: 700; color: #1F2937; }
.h5-jn-qico {
    width: 32px; height: 32px; border-radius: 9px; background: #FEF3C7; color: #B45309;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.h5-jn-qbarwrap { height: 6px; border-radius: 999px; background: #F1F2F4; margin-top: 10px; overflow: hidden; }
.h5-jn-qbar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F59E0B, #FBBF24); transition: width .18s; }
.h5-jn-qcard { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.h5-jn-qhead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.h5-jn-qnum {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #FEE2E2; color: #C81623;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.h5-jn-qtext { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; color: #1F2937; font-weight: 600; }
.h5-jn-qpts { flex-shrink: 0; font-size: 11px; color: #9CA3AF; }
.h5-jn-qopt {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: 1px solid #E9EAEC; background: #FCFCFD; border-radius: 9px; padding: 9px 10px;
    margin-top: 7px; font-size: 12.5px; color: #374151; cursor: pointer;
}
.h5-jn-qopt.is-sel { border-color: #C81623; background: #FFF5F5; color: #C81623; font-weight: 700; }
.h5-jn-qol {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #F1F2F4; color: #6B7280;
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
}
.h5-jn-qopt.is-sel .h5-jn-qol { background: #C81623; color: #fff; }
.h5-jn-qot { flex: 1; min-width: 0; }
.h5-jn-qres {
    width: 54px; height: 54px; border-radius: 50%; margin: 4px auto 8px;
    display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
}
.h5-jn-qres.is-pass { background: #E7F8EE; color: #16A34A; }
.h5-jn-qres.is-fail { background: #FEF2F2; color: #DC2626; }
.h5-jn-qrest { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.h5-jn-qrest.is-pass { color: #16A34A; }
.h5-jn-qrest.is-fail { color: #DC2626; }
.h5-jn-qdet { border-top: 1px solid #F3F4F6; padding: 10px 0; }
.h5-jn-qdet:first-of-type { border-top: 0; }
.h5-jn-qdeth { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #1F2937; }
.h5-jn-qdeth > span:first-child { flex: 1; min-width: 0; line-height: 1.6; }
.h5-jn-qdetp { flex-shrink: 0; font-weight: 800; font-size: 12px; }
.h5-jn-qdetp.is-pass { color: #16A34A; }
.h5-jn-qdetp.is-fail { color: #DC2626; }
.h5-jn-qdeto { font-size: 12px; line-height: 1.9; color: #6B7280; padding-left: 4px; }
.h5-jn-qdeto.is-right { color: #16A34A; font-weight: 700; }
.h5-jn-qdeto.is-wrong { color: #DC2626; text-decoration: line-through; }
.h5-jn-termscroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 0; }
.h5-jn-termtext { font-size: 12.5px; line-height: 1.9; color: #4B5563; white-space: pre-wrap; margin-top: 6px; }
.h5-jn-termfoot {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #fff; border-top: 1px solid #F0F1F3;
}
.h5-jn-termfoot .h5-btn[disabled] { opacity: .5; }

/* ---- 实名核验按钮（旧站 mobile.join.tsx:1043-1078） + 必填星号 ---- */
.h5-jn-verify { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.h5-jn-verifybtn {
    border: 1px solid #C81623; background: #fff; color: #C81623; border-radius: 8px;
    padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.h5-jn-verifybtn[disabled] { opacity: .6; }
.h5-jn-verifybtn.is-ok { border-color: #16A34A; color: #16A34A; }
.h5-jn-verifybtn.is-fail { border-color: #DC2626; color: #DC2626; }
.h5-req { color: #DC2626; margin-left: 3px; }

/* ==========================================================================
   物资管理页（app/views/site/h5/materials.php）本次 UI 对齐 —— 同样是**新增类**
   ========================================================================== */
/* ---- 页头右侧：领用人姓名徽标 + 「设置领用人」（布局红色页头没有右侧槽位，
        与 .h5-pd-headcart 同一「fixed + max-width 居中」做法贴住页头右缘） ---- */
.h5-mt-headtools {
    position: fixed; left: 0; right: 0; top: 10px; z-index: 31;
    max-width: var(--app-max); margin: 0 auto; padding: 0 20px;
    height: 36px; display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; pointer-events: none;
}
.h5-mt-who {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 3px;
    max-width: 96px; height: 22px; padding: 0 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .22); color: #fff; font-size: 10px; font-weight: 700;
}
.h5-mt-who svg { width: 12px; height: 12px; flex-shrink: 0; display: block; }
.h5-mt-who i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-mt-tool {
    pointer-events: auto; width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.h5-mt-tool svg { width: 18px; height: 18px; display: block; }

/* ---- 统计 4 张卡（旧站：物品总数 / 可领用 / 已借出 / 损坏，按明细物品状态统计） ---- */
.h5-mt-stats { display: flex; }
.h5-mt-stat { flex: 1; min-width: 0; }
.h5-mt-stat.is-total .h5-stat-num { color: #2563EB; }
.h5-mt-stat.is-ok .h5-stat-num { color: #16A34A; }
.h5-mt-stat.is-borrowed .h5-stat-num { color: #D97706; }
.h5-mt-stat.is-damaged .h5-stat-num { color: #DC2626; }
.h5-mt-sumline {
    display: flex; gap: 14px; margin: -4px 0 10px; padding: 0 4px;
    font-size: 11px; color: var(--text-muted);
}
.h5-mt-sumline b { color: var(--text-sub); }

/* ---- 物资卡片 + 卡内物品明细（编号 + 状态标签） ---- */
.h5-mt-list { display: block; }
.h5-mt-card {
    margin-bottom: 10px; background: var(--card); border-radius: var(--radius);
    border: 1px solid var(--border); overflow: hidden;
}
.h5-mt-head { padding: 12px 14px; }
.h5-mt-head-main { min-width: 0; }
.h5-mt-name { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.h5-mt-meta {
    margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-muted);
}
.h5-mt-stock { font-weight: 700; color: var(--text-sub); }
.h5-mt-avail { color: #16A34A; }
.h5-mt-cat {
    padding: 1px 8px; border-radius: 999px; background: var(--brand-soft);
    color: var(--brand); font-size: 10px; font-weight: 700;
}
.h5-mt-items { border-top: 1px solid #F6F3EF; }
.h5-mt-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-bottom: 1px solid #F9F7F4; font-size: 12px;
}
.h5-mt-item:last-child { border-bottom: 0; }
.h5-mt-item--none { color: var(--text-muted); font-size: 11px; }
.h5-mt-ico { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.h5-mt-ico svg { width: 13px; height: 13px; display: block; }
.h5-mt-code {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-sub);
}
.h5-mt-st { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.h5-mt-st.is-ok { background: #E7F8EE; color: #16A34A; }
.h5-mt-st.is-borrowed { background: #FDF3E3; color: #D97706; }
.h5-mt-st.is-damaged { background: #FDECEC; color: #DC2626; }
.h5-mt-st.is-scrapped { background: #F1F2F4; color: var(--text-sub); }

/* ---- 空态副提示（「请在后台先添加物资分类和目录」） ---- */
.h5-mt-empty-ico { display: block; color: #D1D5DB; margin-bottom: 8px; }
.h5-mt-empty-ico svg { width: 40px; height: 40px; display: block; margin: 0 auto; }
.h5-mt-empty-d { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* ---- 仓库位置：默认折叠（旧站页面上不展示该列表） ---- */
.h5-mt-wh { padding: 0; }
.h5-mt-wh-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 700; color: var(--text-sub);
}
.h5-mt-wh-sum::-webkit-details-marker { display: none; }
.h5-mt-wh-chev { display: inline-flex; color: var(--text-muted); transition: transform .2s ease; }
.h5-mt-wh-chev svg { width: 14px; height: 14px; display: block; }
.h5-mt-wh[open] .h5-mt-wh-chev { transform: rotate(180deg); }
.h5-mt-wh-list { padding: 0 14px 12px; }

/* ---- 「设置领用人」弹层 ---- */
.h5-mt-me-mask {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center; padding: 0 28px;
}
.h5-mt-me-mask[hidden] { display: none !important; }
.h5-mt-me { width: 100%; max-width: 340px; background: #fff; border-radius: 16px; padding: 18px; }
.h5-mt-me-t { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: #1F2937; }
.h5-mt-me-t svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; color: var(--brand); }
.h5-mt-me-d { margin: 0 0 6px; font-size: 13px; color: #374151; }
.h5-mt-me-d b { color: var(--brand); }
.h5-mt-me-tip { margin: 0 0 14px; font-size: 11px; line-height: 1.8; color: #6B7280; }
.h5-mt-me-btns { display: flex; gap: 8px; }
.h5-claim-foot-note {
    margin: 12px 0 0; font-size: 11px; line-height: 1.6;
    color: var(--text-muted); text-align: center;
}
.h5-claim-backstep { margin: 10px 0 0; text-align: center; }
.h5-claim-backstep button {
    border: 0; background: transparent; color: var(--brand);
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.h5-claim-join { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--text-sub); }
.h5-claim-join a { color: var(--brand); font-weight: 700; text-decoration: none; }

/* ==========================================================================
   首页对齐补充（2026-09-29）——旧站 mobile.home 的视觉细节
   ========================================================================== */
/* 赛事卡：状态徽章与票价角标恒定显示（旧站赛事卡徽章恒为琥珀色） */
.h5-badge-amber { background: #FBBF24; color: #7C2D12; }
.h5-badge-price { background: rgba(0, 0, 0, .42); color: #fff; }
.h5-match-price { position: absolute; top: 12px; right: 12px; z-index: 2; }
/* 比分中央的 VS 徽章 + LIVE 提示 */
.h5-match-vs {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    background: #FBBF24; color: #7C2D12; font-size: 16px; font-weight: 900; line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.h5-match-live {
    display: flex; align-items: center; gap: 4px; justify-content: center;
    margin-top: 5px; font-size: 9px; font-weight: 700; color: #FCD34D; white-space: nowrap;
}
.h5-match-live i {
    width: 6px; height: 6px; border-radius: 50%; background: #FBBF24;
    animation: h5LivePulse 1.2s ease-in-out infinite;
}
@keyframes h5LivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* 公告空态文案弱化 */
.h5-notice-text.is-empty { color: var(--text-muted); }
/* 区块空态：白卡 */
.h5-empty-card {
    margin: 0 16px; padding: 28px 12px; background: #fff; border-radius: 12px;
    text-align: center; font-size: 13px; color: var(--text-muted);
}
/* 底部浮层（合作伙伴图文介绍） */
.h5-sheet-mask {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center;
}
.h5-sheet-mask[hidden] { display: none; }
.h5-sheet {
    position: relative; width: 100%; max-width: 640px; max-height: 78vh;
    background: #fff; border-radius: 16px 16px 0 0; padding: 18px 16px 24px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: h5SheetUp .22s ease-out;
}
@keyframes h5SheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.h5-sheet-close {
    position: absolute; top: 10px; right: 12px; width: 30px; height: 30px;
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.h5-sheet-head { display: flex; align-items: center; gap: 10px; padding-right: 34px; }
.h5-sheet-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; }
.h5-sheet-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.h5-sheet-body { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--text-sub); word-break: break-word; }
.h5-sheet-body img { max-width: 100%; height: auto; border-radius: 8px; }
select.h5-input { appearance: none; -webkit-appearance: none; background-image: none; }

/* ==========================================================================
   首页对齐旧站（2026-09-29）
   Hero 居中版式 + 星形装饰 / 公告跑马灯 / 赛事轮播控件 / 广告位（卡片+弹窗）
   ========================================================================== */

/* Hero：旧站居中大字 + 五角星/光芒装饰，没有圆形站徽 */
.h5-hero { text-align: center; }
.h5-hero-text { position: relative; z-index: 1; }
.h5-hero h1, .h5-hero h2 { font-size: 26px; text-align: center; }
.h5-hero-bigstar {
    position: absolute; top: -32px; right: -32px; width: 176px; height: 176px;
    fill: #fff; opacity: .10; pointer-events: none;
}
.h5-hero-ray {
    position: absolute; width: 1px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0));
}
.h5-hero-mini { position: absolute; fill: #FCD34D; pointer-events: none; }
.h5-hero-slogan { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.h5-hero-slogan p { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .3em; color: #FDE68A; }
.h5-hero-line { display: block; width: 32px; height: 1px; background: linear-gradient(to right, rgba(252, 211, 77, 0), rgba(252, 211, 77, .7)); }
.h5-hero-line.is-right { background: linear-gradient(to left, rgba(252, 211, 77, 0), rgba(252, 211, 77, .7)); }

/* 公告跑马灯：只有单份内容宽于容器才滚动（内容重复一份做到无缝） */
.h5-notice-text.is-scroll { display: inline-flex; animation: h5-notice-run 22s linear infinite; }
.h5-notice-text.is-scroll > span { padding-right: 40px; }
@keyframes h5-notice-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 赛事轮播：track 用 translateX 切换，配左右箭头 + 指示点 */
.h5-evt-carousel { position: relative; }
.h5-evt-carousel .h5-match-list {
    overflow: hidden;
    scroll-snap-type: none;
    transition: transform .35s ease;
}
.h5-evt-carousel .h5-match-card { flex: 0 0 calc(100% - 32px); scroll-snap-align: none; }
.h5-car-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0;
    background: rgba(0, 0, 0, .30); color: #fff;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.h5-car-arrow svg { width: 18px; height: 18px; }
.h5-car-arrow.is-prev { left: 8px; }
.h5-car-arrow.is-next { right: 8px; }
.h5-car-arrow:active { transform: translateY(-50%) scale(.9); }
.h5-car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.h5-car-dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px;
    background: #E5E1DC; transition: all .2s;
}
.h5-car-dot.is-on { width: 20px; background: var(--brand); box-shadow: 0 1px 3px rgba(153, 27, 27, .25); }

/* 首页推荐广告（信息流卡片） */
.h5-adcard-wrap { padding: 0 16px; margin-bottom: 16px; }
.h5-adcard {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    text-decoration: none; color: inherit;
}
.h5-adcard:active { transform: scale(.99); }
.h5-adcard img { width: 80px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.h5-adcard-main { flex: 1; min-width: 0; }
.h5-adcard-t { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-adcard-more { margin: 4px 0 0; font-size: 11px; font-weight: 500; color: var(--brand); }

/* 首页弹窗广告：全屏海报铺满（object-cover）+ 右上角关闭 */
.h5-adpop { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; align-items: center; justify-content: center; }
.h5-adpop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-adpop-x {
    position: absolute; right: 12px; top: max(12px, env(safe-area-inset-top));
    width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 1;
}

/* ==========================================================================
   球迷社区（/mobile/highlights 与 /mobile/content 共用 · 旧站 MobileHighlights）
   集锦横幅广告 / 集锦横排卡片 / 社区帖子横排卡片 / 发帖弹窗
   ========================================================================== */

/* ⚠️ 下面这些容器自带 display:flex|block，`hidden` 属性会被作者样式覆盖，
   因此必须显式声明 [hidden] 规则（与 .h5-sheet-mask[hidden] 同理） */
.h5-hl-list[hidden], .h5-hl-empty[hidden], .h5-hl-head[hidden],
.h5-hl-card[hidden], .h5-ct-card[hidden] { display: none; }

/* 集锦顶部广告（highlights_top · Banner） */
.h5-hl-ad {
    position: relative; display: block; margin-bottom: 12px;
    background: #fff; border: 1px solid #FEE2E2; border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(153, 27, 27, .05); text-decoration: none; color: inherit;
}
.h5-hl-ad img { width: 100%; max-height: 120px; object-fit: cover; display: block; }
.h5-hl-ad-tag {
    position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 9px; font-weight: 700;
}

/* 集锦卡片（旧站：左 130×110 缩略图 + 右文） */
.h5-hl-list { display: flex; flex-direction: column; gap: 12px; }
.h5-hl-card {
    display: flex; background: #fff; border: 1px solid rgba(220, 38, 38, .16);
    border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 4px 14px rgba(127, 29, 29, .05);
}
.h5-hl-card:active { transform: scale(.98); }
.h5-hl-thumb {
    position: relative; width: 130px; height: 110px; flex-shrink: 0;
    background: linear-gradient(135deg, #FEE2E2, #FFF1F2); overflow: hidden;
}
.h5-hl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-hl-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(200, 22, 35, .3); }
.h5-hl-thumb-ph svg { width: 32px; height: 32px; display: block; }
.h5-hl-share {
    position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #6B7280;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.h5-hl-share svg { width: 12px; height: 12px; display: block; }
.h5-hl-main { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.h5-hl-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.h5-hl-date { font-size: 10px; color: #9CA3AF; }
.h5-hl-title {
    margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #1F2937; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.h5-hl-x {
    margin: 0; font-size: 11px; color: #9CA3AF; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h5-hl-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 10px; color: #9CA3AF; }
.h5-hl-meta > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.h5-hl-meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.h5-hl-author { margin-left: auto; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 「全部」TAB 下的「社区交流」区块标题 */
.h5-hl-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 2px; }
.h5-hl-head-bar { width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #DC2626, #C81623); }
.h5-hl-head-t { font-size: 14px; font-weight: 900; color: #1F2937; }
.h5-hl-head-d { font-size: 10px; color: #9CA3AF; }

/* 空态容器（相机圆底 + 两行文案；与 h5-emptybox 同版式，另给 .h5-hl-* 命名以便控制显隐） */
.h5-hl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; }

/* 社区帖子卡片（旧站 CommunityFeed：左 130×110 缩略图 + 作者行 / 标题 / 摘要 / 统计） */
.h5-ct-list { display: flex; flex-direction: column; gap: 12px; }
.h5-ct-card {
    display: flex; background: #fff; border: 1px solid rgba(220, 38, 38, .16);
    border-radius: 10px; overflow: hidden; cursor: pointer;
    box-shadow: 0 4px 14px rgba(127, 29, 29, .05);
}
.h5-ct-card:active { transform: scale(.98); }
.h5-ct-thumb {
    position: relative; width: 130px; height: 110px; flex-shrink: 0;
    background: linear-gradient(135deg, #FEE2E2, #FFF1F2); overflow: hidden;
}
.h5-ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-ct-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(200, 22, 35, .3); }
.h5-ct-thumb-ph svg { width: 30px; height: 30px; display: block; }
.h5-ct-imgn {
    position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 9px; font-weight: 700;
}
.h5-ct-main { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.h5-ct-aurow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.h5-ct-av {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: #FEF2F2; color: #C81623; font-size: 9px; font-weight: 900;
    display: inline-flex; align-items: center; justify-content: center;
}
.h5-ct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-ct-au { font-size: 10px; font-weight: 700; color: #6B7280; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-ct-date { margin-left: auto; flex-shrink: 0; font-size: 10px; color: #9CA3AF; }
.h5-ct-t {
    margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #1F2937; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h5-ct-x {
    margin: 0; font-size: 11px; color: #9CA3AF; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h5-ct-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 10px; color: #9CA3AF; }
.h5-ct-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.h5-ct-meta svg { width: 11px; height: 11px; flex-shrink: 0; }

/* 发帖弹窗（沿用 .h5-sheet-mask / .h5-sheet 底部浮层） */
.h5-cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h5-cmp-cancel { border: 0; background: transparent; color: #9CA3AF; font-size: 13px; font-weight: 600; padding: 4px 8px; font-family: inherit; cursor: pointer; }
.h5-cmp-title { margin: 0; font-size: 15px; font-weight: 800; color: #1F2937; }
.h5-cmp-pub {
    border: 0; border-radius: 10px; padding: 6px 16px; cursor: pointer; font-family: inherit;
    background: linear-gradient(90deg, #C81623, #DC2626); color: #fff; font-size: 12px; font-weight: 700;
}
.h5-cmp-pub[disabled] { opacity: .5; }
.h5-cmp-label { display: block; margin: 14px 0 6px; font-size: 10px; font-weight: 700; color: #9CA3AF; }
.h5-cmp-label span { font-weight: 400; }
.h5-cmp-ta {
    width: 100%; min-height: 96px; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid #E5E7EB; border-radius: 12px; font-size: 14px; font-family: inherit;
    outline: none; resize: none;
}
.h5-cmp-urlrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.h5-cmp-url {
    flex: 1; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 10px;
    border: 1px solid #E5E7EB; border-radius: 10px; font-size: 12px; font-family: inherit; outline: none;
}
.h5-cmp-add {
    flex-shrink: 0; height: 34px; padding: 0 12px; cursor: pointer; font-family: inherit;
    border: 1px solid #FECACA; border-radius: 10px; background: #fff;
    color: #C81623; font-size: 12px; font-weight: 700;
}
.h5-cmp-add[disabled] { color: #D1D5DB; border-color: #E5E7EB; }
.h5-cmp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.h5-cmp-grid:empty { display: none; }
.h5-cmp-item { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F3F4F6; }
.h5-cmp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-cmp-del {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%; background: #EF4444; color: #fff;
    font-size: 13px; line-height: 1; cursor: pointer;
}

/* ==========================================================================
   我的订单（/mobile/orders）+ 商品详情（/mobile/shop-detail）UI 对齐
   ⚠️ 本段**只新增类**：不修改上面任何既有 .h5-card / .h5-btn / .h5-ocard /
      .h5-badge / .h5-seg / .h5-sheet 等被多页复用的类定义，避免波及其它页面。
   ========================================================================== */

/* ---- 状态徽章补充（旧站：配送中=紫、已核销/自提=绿） ---- */
.h5-badge-purple { background: #F3E8FF; color: #7E22CE; }
.h5-badge-green  { background: #DCFCE7; color: #15803D; }

/* ---- 我的订单：状态筛选 tab 外壳（内部复用 .h5-seg / .h5-seg-btn，不覆盖其定义） ---- */
.h5-ordtabs { padding: 0 4px 8px; }

/* ---- 我的订单：加载态（旧站进页面先红色转圈，不再先闪空态） ---- */
.h5-ordspin-wrap { display: flex; justify-content: center; padding: 64px 0; }
.h5-ordspin {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--brand); border-top-color: transparent;
    animation: h5OrdSpin .7s linear infinite;
}
@keyframes h5OrdSpin { to { transform: rotate(360deg); } }

/* ---- 我的订单：卡片内新增行（商品明细 / 自提徽章 / 核销码 / 备注 / 点击提示） ---- */
.h5-ocard-pick {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    padding: 1px 6px; border-radius: 999px;
    background: #DCFCE7; color: #15803D; font-size: 10px; font-weight: 700;
}
.h5-oitems { padding: 12px 0 2px; }
.h5-oitem { display: flex; gap: 10px; padding: 0 14px; }
.h5-oitem + .h5-oitem { margin-top: 10px; }
.h5-oitem-thumb {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #FFF1F2, #FEE2E2);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.h5-oitem-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-oitem-main { flex: 1; min-width: 0; }
.h5-oitem-t {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-oitem-m { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
.h5-oitem-price { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--brand); }
.h5-ocode { margin: 10px 14px 0; padding: 8px 10px; border-radius: 10px; background: #ECFDF3; border: 1px solid #BBF7D0; }
.h5-ocode.is-done { background: #F9FAFB; border-color: #E5E7EB; }
.h5-ocode-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h5-ocode-lab { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #15803D; }
.h5-ocode.is-done .h5-ocode-lab { color: var(--text-sub); }
.h5-ocode-right { display: inline-flex; align-items: center; gap: 8px; }
.h5-ocode-val {
    font-family: Consolas, Menlo, monospace; font-size: 14px; font-weight: 800;
    letter-spacing: 2px; color: #15803D;
}
.h5-ocode-time { font-size: 10px; color: var(--text-muted); }
.h5-ocode-copy {
    border: 0; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700;
    background: #DCFCE7; color: #15803D; font-family: inherit; cursor: pointer;
}
.h5-ocard-remark { margin: 8px 14px 0; font-size: 11px; color: var(--text-muted); }
.h5-ocard-tap { margin-top: -4px; padding: 0 14px 12px; text-align: right; font-size: 9px; color: #D6D0C9; }
/* 卡头左侧组（订单号 + 自提徽章）：.h5-ocard-head 是 space-between，
   三个直接子元素会把「自提」挤到中间，故左侧包一层 */
.h5-ocard-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.h5-ocard-time { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); }

/* ---- 我的订单：订单详情弹层（底部抽屉，掩层复用 .h5-sheet-mask） ---- */
.h5-od-sheet {
    position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 20px 20px 0 0; animation: h5SheetUp .22s ease-out;
}
.h5-od-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
    padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid var(--border);
}
.h5-od-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.h5-od-x {
    width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 50%;
    background: #F1F2F4; color: var(--text-sub); font-size: 16px; line-height: 1;
    font-family: inherit; cursor: pointer;
}
.h5-od-body { padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.h5-od-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h5-od-time { font-size: 10px; color: var(--text-muted); }
.h5-od-box { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #F9FAFB; }
.h5-od-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 0; font-size: 12px; color: #4B5563;
}
.h5-od-row > span:first-child { flex-shrink: 0; color: var(--text-muted); }
.h5-od-row > span:last-child { text-align: right; word-break: break-all; }
.h5-od-money { font-size: 14px; font-weight: 800; color: var(--brand); }
.h5-od-store {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding: 10px 12px; border-radius: 12px;
    background: #FFF5F5; border: 1px solid #FEE2E2;
}
.h5-od-store-main { min-width: 0; }
.h5-od-store-t { margin: 0; font-size: 12px; font-weight: 700; color: var(--text); }
.h5-od-store-a { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #6B7280; word-break: break-all; }
.h5-od-store-m { margin: 3px 0 0; font-size: 10px; color: var(--text-muted); }
.h5-od-nav {
    flex-shrink: 0; border: 0; border-radius: 999px; padding: 6px 12px;
    background: #FEF2F2; color: var(--brand); font-size: 11px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.h5-od-vcode {
    margin-top: 12px; padding: 14px; border-radius: 12px; text-align: center;
    background: #ECFDF3; border: 1px solid #BBF7D0;
}
.h5-od-vcode.is-done { background: #F9FAFB; border-color: #E5E7EB; }
.h5-od-vcode-t { margin: 0; font-size: 12px; color: #15803D; }
.h5-od-vcode.is-done .h5-od-vcode-t { font-size: 14px; font-weight: 700; color: #4B5563; }
.h5-od-vcode-qr {
    display: inline-block; margin: 10px auto 0; padding: 10px;
    background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
/* ⚠️ 类里的 display 会盖掉 HTML hidden 属性的 UA 样式，需显式补回 */
.h5-od-vcode-qr[hidden] { display: none; }
.h5-od-vcode-ph {
    width: 176px; height: 176px; margin: 10px auto 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 12px; font-size: 10px; color: #D1D5DB;
}
.h5-od-vcode-ph[hidden] { display: none; }
.h5-od-vcode-qr img { width: 176px; height: 176px; display: block; }
.h5-od-vcode-qr-tip { margin: 6px 0 0; font-size: 9px; color: var(--text-muted); }
.h5-od-vcode-num {
    margin: 12px 0 0; font-family: Consolas, Menlo, monospace;
    font-size: 26px; font-weight: 900; letter-spacing: 6px; color: #15803D;
}
.h5-od-copy {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    border: 0; border-radius: 999px; padding: 8px 18px;
    background: #16A34A; color: #fff; font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.h5-od-items-t { margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: #6B7280; }
.h5-od-item { display: flex; gap: 10px; align-items: center; }
.h5-od-item + .h5-od-item { margin-top: 8px; }
.h5-od-item-thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #FFF1F2, #FEE2E2);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.h5-od-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-od-item-main { flex: 1; min-width: 0; }
.h5-od-item-t {
    margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-od-item-m { margin: 2px 0 0; font-size: 10px; color: var(--text-muted); }
.h5-od-item-price { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--brand); }
.h5-od-refund {
    width: 100%; margin-top: 16px; padding: 12px; border-radius: 12px;
    border: 2px solid #FECACA; background: #FEF2F2; color: #DC2626;
    font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.h5-od-refund[disabled] { opacity: .55; }
.h5-od-close {
    width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 12px;
    background: #F1F2F4; color: #4B5563; font-size: 14px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}

/* ==========================================================================
   商品详情（/mobile/shop-detail）：主图轮播 / 价格区 / 信息行组 / 规格弹窗 / 底栏
   ========================================================================== */

/* ---- 主图轮播（横向 snap + 圆点 + 计数 + 可点缩略图） ---- */
.h5-pd-gallery { position: relative; background: #F3F4F6; }
.h5-pd-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h5-pd-track::-webkit-scrollbar { display: none; }
.h5-pd-slide { width: 100%; flex-shrink: 0; scroll-snap-align: center; aspect-ratio: 1 / 1; background: #000; }
.h5-pd-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-pd-ph {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #F3F4F6, #E5E7EB); color: #9CA3AF; font-size: 56px;
}
.h5-pd-ph span { margin-top: 8px; font-size: 13px; }
.h5-pd-dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; gap: 6px; align-items: center; justify-content: center;
}
.h5-pd-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .5); cursor: pointer;
}
.h5-pd-dot.is-on { background: #fff; }
.h5-pd-count {
    margin-left: 4px; padding: 1px 6px; border-radius: 999px;
    background: rgba(0, 0, 0, .4); color: #fff; font-size: 10px;
}
.h5-pd-thumbs {
    display: flex; gap: 8px; padding: 8px 16px; overflow-x: auto;
    background: #fff; scrollbar-width: none;
}
.h5-pd-thumbs::-webkit-scrollbar { display: none; }
.h5-pd-thumb {
    flex-shrink: 0; width: 56px; height: 56px; padding: 0; cursor: pointer;
    border: 2px solid #E5E7EB; border-radius: 10px; overflow: hidden; background: #F3F4F6;
}
.h5-pd-thumb.is-on { border-color: #F97316; }
.h5-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 价格区 ---- */
.h5-pd-price-block {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, #FFF7ED, #FFF1F2 55%, #fff);
}
.h5-pd-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.h5-pd-price-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.h5-pd-yen { font-size: 14px; font-weight: 700; color: #F97316; }
.h5-pd-price { font-size: 26px; line-height: 1; font-weight: 800; color: #F97316; }
.h5-pd-price-old { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.h5-pd-member {
    padding: 1px 6px; border-radius: 4px; background: var(--brand);
    color: #fff; font-size: 10px; font-weight: 700;
}
.h5-pd-stock { flex-shrink: 0; font-size: 10px; color: var(--text-muted); }
.h5-pd-promos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.h5-pd-promo {
    padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9);
    border: 1px solid #FED7AA; color: #EA580C; font-size: 10px; font-weight: 600;
}

/* ---- 名称 / 分类 / 品牌 / 标签 / 卖点 ---- */
.h5-pd-nameblock { padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--border); }
.h5-pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.h5-pd-tag { padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; background: #F3F4F6; color: #4B5563; }
.h5-pd-tag--cat { background: #FFF7ED; color: #EA580C; }
.h5-pd-tag--hot { background: #FEF2F2; color: #DC2626; font-weight: 700; }
.h5-pd-tag--new { background: #ECFDF3; color: #16A34A; font-weight: 700; }
.h5-pd-tag--other { background: #F5F3FF; color: #7E22CE; font-weight: 700; }
.h5-pd-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--text); }
.h5-pd-sub { margin: 6px 0 0; font-size: 12px; color: var(--text-sub); }

/* ---- 信息行组（已选 / 取货 / 自提点 / 发货 / 权限 / 权益 / 版本 / 保障 / 数量 / 编码 / 缺货） ---- */
.h5-pd-info { margin-top: 8px; background: #fff; }
.h5-pd-info-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border-top: 1px solid #F3F4F6;
}
/* ⚠️ 用子选择器：自提点/发货/权限/版本行是由 #pd-stores / #pd-perm / #pd-version
   容器注入的，若只写 :first-child，注入行会因其容器是首个子元素而被误判为「首行」→ 丢掉分隔线 */
.h5-pd-info > .h5-pd-info-row:first-child { border-top: 0; }
.h5-pd-info-k { width: 40px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.h5-pd-info-v { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.h5-pd-info-v.is-ph { color: var(--text-muted); }
/* 信息行里的整行按钮（已选规格）：独立成类，避免与 .h5-pd-info-row 的 padding/border 打架 */
.h5-pd-specrow {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 16px; border: 0; border-top: 1px solid #F3F4F6;
    background: transparent; font-family: inherit; text-align: left; cursor: pointer;
}
.h5-pd-info > .h5-pd-specrow:first-child { border-top: 0; }
.h5-pd-qtyrow {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid #F3F4F6;
}
.h5-pd-qtyrow .h5-qty { flex: 1; justify-content: flex-end; }
.h5-pd-arrow { flex-shrink: 0; color: #D1D5DB; font-size: 16px; line-height: 1; }
.h5-pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.h5-pd-chip { padding: 2px 8px; border-radius: 6px; background: #F3F4F6; color: #374151; font-size: 12px; font-weight: 500; }
.h5-pd-bene { display: flex; flex-wrap: wrap; gap: 6px; }
.h5-pd-bene > span { padding: 2px 8px; border-radius: 6px; background: #FFFBEB; color: #B45309; font-size: 12px; font-weight: 500; }
.h5-pd-note { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.h5-pd-warn { font-size: 11px; font-weight: 700; color: #D97706; }
.h5-pd-warn-d { margin-top: 2px; font-size: 10px; color: #D97706; }
.h5-pd-danger { font-size: 13px; font-weight: 500; color: #EF4444; }
.h5-pd-store { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.h5-pd-store + .h5-pd-store { margin-top: 10px; }
.h5-pd-store-main { min-width: 0; }
.h5-pd-store-t { font-size: 12px; font-weight: 700; color: var(--text); }
.h5-pd-store-a { margin-top: 3px; font-size: 11px; line-height: 1.4; color: #6B7280; }
.h5-pd-store-m { margin-top: 2px; font-size: 10px; color: var(--text-muted); }
.h5-pd-nav {
    flex-shrink: 0; border: 0; border-radius: 999px; padding: 6px 12px;
    background: #FEF2F2; color: var(--brand); font-size: 11px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}

/* ---- 数量步进（页面内 / 规格弹窗共用） ---- */
.h5-qty { display: inline-flex; align-items: center; gap: 12px; }
.h5-qty-btn {
    width: 28px; height: 28px; padding: 0; border: 1px solid #D1D5DB; border-radius: 50%;
    background: #fff; color: #4B5563; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer;
}
.h5-qty-btn[disabled] { opacity: .3; }
.h5-qty-val { min-width: 24px; text-align: center; font-size: 16px; font-weight: 700; color: var(--text); }

/* ---- 商品描述（富文本 + 展开/收起） ---- */
.h5-pd-descblock { margin-top: 8px; background: #fff; padding: 12px 16px; }
.h5-pd-desc-t { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #1F2937; }
.h5-pd-desc { font-size: 14px; line-height: 1.75; color: #4B5563; word-break: break-word; }
.h5-pd-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.h5-pd-desc.is-clip { max-height: 128px; overflow: hidden; }
.h5-pd-more {
    margin-top: 8px; padding: 0; border: 0; background: transparent;
    color: #F97316; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}

/* ---- 规格弹窗（底部抽屉，掩层复用 .h5-sheet-mask） ---- */
.h5-pd-sheet {
    position: relative; width: 100%; max-width: 640px; max-height: 82vh;
    display: flex; flex-direction: column; background: #fff;
    border-radius: 20px 20px 0 0; animation: h5SheetUp .22s ease-out;
}
.h5-pd-sheet-head { display: flex; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.h5-pd-sheet-img {
    width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
    background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.h5-pd-sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-pd-sheet-main { flex: 1; min-width: 0; }
.h5-pd-sheet-main p { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--text-sub); }
.h5-pd-sheet-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.h5-pd-sheet-x {
    flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent;
    color: var(--text-muted); font-size: 18px; line-height: 1; font-family: inherit; cursor: pointer;
}
.h5-pd-sheet-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.h5-pd-group { margin-top: 12px; }
.h5-pd-group:first-child { margin-top: 0; }
.h5-pd-group-t { margin: 0 0 8px; font-size: 12px; color: var(--text-sub); }
.h5-pd-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.h5-pd-opts.has-img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.h5-pd-opt {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
    border: 2px solid #E5E7EB; border-radius: 10px; background: #fff; font-family: inherit; text-align: left;
}
.h5-pd-opt.is-on { border-color: var(--brand); background: #FFF7F6; }
.h5-pd-opt img { width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.h5-pd-opt span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; color: #374151; }
.h5-pd-opt.is-on span { color: var(--brand); font-weight: 700; }
.h5-pd-sheet-qty {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 14px; color: var(--text-sub);
}
.h5-pd-sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.h5-pd-confirm {
    width: 100%; height: 44px; border: 0; border-radius: 999px;
    background: var(--brand); color: #fff; font-size: 14px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.h5-pd-confirm[disabled] { opacity: .4; }
.h5-pd-sheet-hint { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--text-muted); }

/* ---- 底部操作栏（购物车角标 / 分享 / 加购 / 立即购买） ---- */
.h5-pd-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-width: 640px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--border);
}
.h5-pd-bar-ico {
    position: relative; flex-shrink: 0; width: 44px; height: 44px; padding: 0;
    border: 0; background: transparent; color: #4B5563; font-size: 22px; line-height: 1;
    font-family: inherit; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
}
.h5-pd-bar-badge {
    position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: #EF4444; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.h5-pd-cart, .h5-pd-buy {
    flex: 1; height: 44px; border-radius: 12px;
    font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.h5-pd-cart { border: 1px solid #F97316; background: #fff; color: #F97316; }
.h5-pd-buy { border: 1px solid #F97316; background: #F97316; color: #fff; }
.h5-pd-cart[disabled], .h5-pd-buy[disabled] { opacity: .4; cursor: not-allowed; }
/* 页头右侧购物车入口（旧站 MobilePageHeader 的 right 槽位）：
   布局的红色页头没有右侧槽位，这里用与 .h5-tabbar 相同的「fixed + max-width 居中」
   贴住页头右缘 —— top/左右内边距与 .h5-topbar--grad 的 padding（10px 20px）对齐，
   页头是 sticky 吸顶的，图标固定后位置始终一致。 */
.h5-pd-headcart {
    position: fixed; left: 0; right: 0; top: 10px; z-index: 31;
    max-width: var(--app-max); margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: flex-end; pointer-events: none;
}
.h5-pd-headcart a {
    position: relative; pointer-events: auto; width: 36px; height: 36px;
    border-radius: 10px; background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; text-decoration: none;
}

/* ---- 商品不存在/已下架 空态（旧站 😕 页面内空态，不再落桌面版 404） ---- */
.h5-pd-notfound {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 72px 16px; text-align: center;
}
.h5-pd-notfound-emoji { font-size: 60px; line-height: 1; margin-bottom: 16px; }
.h5-pd-notfound-t { margin: 0 0 16px; font-size: 14px; color: #6B7280; }
.h5-pd-notfound a { color: #F97316; font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   「我的」+「我参与的活动」UI 对齐补充（2026-09-29）
   ⚠️ 本段**只新增类 / 只新增修饰符选择器**：不修改上面任何被多页复用的
      .h5-cell / .h5-badge / .h5-block / .h5-ocard / .h5-emptycard / .h5-checkin-day
      等既有类定义，避免波及其它页面。
   ========================================================================== */

/* hidden 属性对 inline-flex 元素不生效（作者样式会盖掉 UA 的 [hidden]{display:none}），
   与既有 .h5-cell[hidden] 同理，这里显式声明。
   ⚠️ .h5-profile-btn 也是 inline-flex：登录后必须能隐藏「登录」按钮、显示「编辑资料」。 */
.h5-badge[hidden], .h5-streak[hidden], .h5-profile-level[hidden], .h5-profile-btn[hidden] { display: none !important; }

/* ---- 「我的」资料头：等级徽标 / 「ID: … · 已陪伴 N 天」/「会员有效期至 …」 ---- */
.h5-profile-level {
    display: inline-block; margin-top: 6px; padding: 2px 8px;
    border-radius: 6px; background: #FBBF24; color: #991B1B;
    font-size: 9px; font-weight: 900; line-height: 1.45;
}
.h5-profile-line { margin: 4px 0 0; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.h5-profile-line.is-tight { margin-top: 2px; }

/* ---- 签到卡「连续 N 天」琥珀色火焰徽标 ---- */
.h5-streak {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    border: 1px solid #FDE68A; background: #FFFBEB; color: #D97706;
    font-size: 10px; font-weight: 700; line-height: 1.4;
}
.h5-streak svg { width: 12px; height: 12px; display: block; }
.h5-streak b { font-weight: 900; }

/* ---- 「消息通知」未读角标（红底白字、≥100 显示 99+） ---- */
.h5-badge-red {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--brand); color: #fff; font-size: 9px; font-weight: 900;
    justify-content: center;
}

/* ---- 签到周期格：今天（未签）红框 + 品牌色文字 ---- */
.h5-checkin-day.is-today { background: #FEF2F2; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
/* 已签格内的对勾图标尺寸（旧站 lucide 14px；.h5-checkin-day 仅本页使用） */
.h5-checkin-day svg { width: 14px; height: 14px; display: block; }

/* ---- 「我参与的活动」页头右侧琥珀色图标框（旧站 MobilePageHeader icon） ----
   ⚠️ 布局的红色页头没有右侧槽位，这里用与底部 tabbar 相同的「fixed + max-width 居中」
   方式贴住页头右缘：top/右内边距与 .h5-topbar--grad 的 padding（10px 20px）对齐，
   滚动时页头是吸顶的，图标一起固定，位置始终一致。 */
.h5-headfix {
    position: fixed; left: 0; right: 0; top: 10px; z-index: 31;
    max-width: var(--app-max); margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: flex-end; pointer-events: none;
}
.h5-headfix-ico {
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(252, 211, 77, .2); border: 1px solid rgba(252, 211, 77, .3);
    color: #FCD34D; display: flex; align-items: center; justify-content: center;
}
.h5-headfix-ico svg { width: 18px; height: 18px; display: block; }

/* ---- 「我参与的活动」卡片（旧站：左 96×96 封面 + 右文，整卡可点进详情） ---- */
.h5-ma-card {
    display: flex; gap: 12px; margin: 0 0 12px; padding: 12px;
    background: #fff; border: 1px solid #F1F2F4; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer; transition: transform .12s ease;
}
.h5-ma-card:active { transform: scale(.98); }
.h5-ma-thumb {
    position: relative; width: 96px; height: 96px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #FEE2E2, #FFF1F2);
}
.h5-ma-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-ma-thumb-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(200, 22, 35, .4);
}
.h5-ma-thumb-ph svg { width: 32px; height: 32px; display: block; }
/* 左上角「已报名」绿勾角标 */
.h5-ma-check {
    position: absolute; top: 4px; left: 4px; width: 20px; height: 20px;
    border-radius: 50%; background: #10B981; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
}
.h5-ma-check svg { width: 12px; height: 12px; display: block; }
.h5-ma-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h5-ma-title {
    margin: 0 0 4px; font-size: 13px; font-weight: 900; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-ma-meta {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    margin: 0 0 4px; font-size: 10px; font-weight: 500; color: #6B7280;
}
.h5-ma-ico { display: inline-flex; flex-shrink: 0; color: var(--brand); }
.h5-ma-ico svg { width: 12px; height: 12px; display: block; }
.h5-ma-venue { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-ma-chip { flex-shrink: 0; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 900; line-height: 1.4; }
.h5-ma-chip--open { background: #FEF3C7; color: #B45309; }
.h5-ma-chip--live { background: #D1FAE5; color: #047857; }
.h5-ma-chip--soon { background: #FEE2E2; color: var(--brand); }
.h5-ma-chip--end  { background: #F3F4F6; color: #9CA3AF; }
.h5-ma-num { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; color: #9CA3AF; }
.h5-ma-num svg { width: 10px; height: 10px; display: block; }
.h5-ma-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 8px;
}
.h5-ma-signer {
    display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: 9px; color: #9CA3AF;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-ma-signer svg { width: 10px; height: 10px; flex-shrink: 0; }
.h5-ma-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.h5-ma-cancel {
    padding: 4px 8px; border: 1px solid #E5E7EB; border-radius: 999px;
    background: #fff; color: #9CA3AF; font-size: 9px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.h5-ma-cancel[disabled] { opacity: .5; }
.h5-ma-tip {
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 9px; font-weight: 700; color: #D1D5DB;
}
.h5-ma-detail { display: inline-flex; align-items: center; gap: 2px; color: var(--brand); font-size: 10px; font-weight: 700; }
.h5-ma-detail svg { width: 12px; height: 12px; display: block; }

/* ---- 「我参与的活动」加载骨架（旧站 loading：两张灰脉冲卡） ---- */
.h5-ma-skel-card {
    display: flex; gap: 12px; margin-bottom: 12px; padding: 12px;
    background: #fff; border-radius: 10px;
    animation: h5MaPulse 1.6s ease-in-out infinite;
}
.h5-ma-skel-thumb { width: 96px; height: 96px; flex-shrink: 0; border-radius: 12px; background: #E5E7EB; }
.h5-ma-skel-lines { flex: 1; min-width: 0; padding: 8px 0; }
.h5-ma-skel-lines i { display: block; height: 12px; border-radius: 4px; background: #E5E7EB; margin-bottom: 8px; }
.h5-ma-skel-lines i:nth-child(1) { width: 75%; }
.h5-ma-skel-lines i:nth-child(2) { width: 50%; }
.h5-ma-skel-lines i:nth-child(3) { width: 66%; }
@keyframes h5MaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- 空态副文案（旧站「去协会活动页报名你感兴趣的活动吧」） ---- */
.h5-emptycard-d { margin: 4px 0 0; font-size: 12px; color: #9CA3AF; }

/* ==========================================================================
   文章详情（/mobile/article-detail）—— 对齐旧站 mobile.article-detail.tsx
   全部为**新增类**（.h5-art-*）：不改 .h5-card / .h5-btn / .h5-block / .h5-emptycard
   以及旧的 .h5-article / .h5-article-body（被其它页面引用的定义保持原样）。
   ========================================================================== */
/* ① 封面区：整幅封面（h-56）+ 底部黑色渐变遮罩；无封面时品牌红渐变占位 */
/* .h5-art-page 抵消 .h5-main 的 12px 内边距，使封面 / 正文卡通栏（旧站无左右留白） */
.h5-art-page { margin: -12px -12px 0; }
.h5-art-cover { position: relative; flex-shrink: 0; background: #FEF2F2; }
.h5-art-cover img { width: 100%; height: 224px; object-fit: cover; display: block; }
.h5-art-cover--ph {
    position: relative; height: 160px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #B91C1C 0%, #C81623 50%, #DC2626 100%);
}
.h5-art-cover-star {
    position: absolute; right: -32px; bottom: -32px;
    width: 144px; height: 144px; opacity: .1; fill: #fff;
}
.h5-art-cover-ico { display: block; color: rgba(255, 255, 255, .25); }
.h5-art-cover-ico svg { width: 56px; height: 56px; display: block; }
.h5-art-shade {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
}

/* ② 正文卡（上移压住封面 + 顶部圆角） */
.h5-art-card {
    position: relative; z-index: 10; margin-top: -16px;
    background: #fff; border-radius: 20px 20px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.h5-art-pad { padding: 20px 20px 16px; }
.h5-art-cat {
    display: inline-block; padding: 4px 10px; margin-bottom: 12px;
    background: #FEF2F2; color: #C81623; font-size: 10px; font-weight: 900; border-radius: 8px;
}
.h5-art-title { margin: 0 0 12px; font-size: 18px; font-weight: 900; line-height: 1.35; color: #111827; }
.h5-art-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding-bottom: 16px; border-bottom: 1px solid #F3F4F6;
    font-size: 11px; color: #9CA3AF;
}
.h5-art-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.h5-art-meta svg { width: 14px; height: 14px; color: #C81623; flex-shrink: 0; display: block; }

/* ③ 正文：富文本 h2/h3/引用/列表/图片；纯文本段落保留换行 */
.h5-art-body { padding: 0 20px 24px; font-size: 14px; line-height: 1.9; color: #374151; word-break: break-word; }
.h5-art-body p { margin: 10px 0; }
.h5-art-body h2 { margin: 18px 0 10px; font-size: 17px; font-weight: 800; line-height: 1.4; color: #111827; }
.h5-art-body h3 { margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: #1F2937; }
.h5-art-body blockquote {
    margin: 14px 0; padding: 10px 14px;
    border-left: 3px solid #C81623; background: #FEF2F2;
    color: #991B1B; font-weight: 600; border-radius: 0 10px 10px 0;
}
.h5-art-body ul, .h5-art-body ol { margin: 10px 0; padding-left: 20px; }
.h5-art-body li { margin: 5px 0; }
.h5-art-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.h5-art-text { margin: 10px 0; white-space: pre-wrap; }

/* ④ 底部互动栏：点赞 / 评论 两个等宽按钮（已赞 = 实心红底 + 白色填充心形） */
.h5-art-bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid #F3F4F6; }
.h5-art-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 0; border: 0; border-radius: 12px;
    background: #FEF2F2; color: #C81623; font-size: 12px; font-weight: 800;
    font-family: inherit; cursor: pointer; transition: transform .15s ease;
}
.h5-art-btn:active { transform: scale(.95); }
.h5-art-btn svg { width: 16px; height: 16px; display: block; }
.h5-art-btn--muted { background: #F3F4F6; color: #6B7280; }
.h5-art-btn.is-liked { background: linear-gradient(90deg, #C81623, #DC2626); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.h5-art-btn.is-liked svg { fill: #fff; }
.h5-art-btn[disabled] { opacity: .6; }

/* ⑤ 相关阅读（最多 3 篇：左缩略图 + 标题 + 浏览数·日期 + 右箭头） */
.h5-art-rel { padding: 0 20px 24px; }
.h5-art-rel[hidden] { display: none; }
.h5-art-rel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.h5-art-rel-bar { width: 4px; height: 14px; border-radius: 999px; background: linear-gradient(180deg, #C81623, #DC2626); }
.h5-art-rel-t { margin: 0; font-size: 14px; font-weight: 900; color: #111827; }
.h5-art-rel-list { display: flex; flex-direction: column; gap: 10px; }
.h5-art-rel-card {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px; border: 0; border-radius: 12px; background: #F9FAFB;
    text-align: left; font-family: inherit; cursor: pointer; transition: transform .15s ease;
}
.h5-art-rel-card:active { transform: scale(.98); }
.h5-art-rel-thumb {
    width: 64px; height: 48px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FEE2E2, #FFF1F2); color: rgba(200, 22, 35, .4);
}
.h5-art-rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h5-art-rel-thumb svg { width: 20px; height: 20px; display: block; }
.h5-art-rel-main { flex: 1; min-width: 0; display: block; }
.h5-art-rel-title {
    display: block; font-size: 12px; font-weight: 800; color: #1F2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-art-rel-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; color: #9CA3AF; }
.h5-art-rel-meta svg { width: 10px; height: 10px; flex-shrink: 0; display: block; }
.h5-art-rel-go { flex-shrink: 0; display: block; color: #D1D5DB; }
.h5-art-rel-go svg { width: 14px; height: 14px; display: block; }

/* 页头右上分享入口（.h5-topbar--grad 内，与返回键同款 36×36 白色 20% 圆角方块，
   由 article.php 视图脚本注入 —— 控制器未提供页头 right 槽） */
.h5-art-share {
    width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.h5-art-share svg { width: 18px; height: 18px; display: block; }

/* ==========================================================================
   球迷社区 · highlights_top 广告位 Banner 规格（旧站 AdSlot variant="banner"）
   仅新增修饰类 .h5-hl-ad--img / --ph 与内部类，不动既有 .h5-hl-ad / .h5-hl-ad-tag。
   旧站：圆角 16px、整条 96px（h-24）；有图整幅出图（保留 .h5-hl-ad-tag「推广」角标），
   无图时红渐变条 + 「广告」胶囊（旧站 banner 的无图形态）。
   ========================================================================== */
.h5-hl-ad--img, .h5-hl-ad--ph { border-radius: 16px; }
.h5-hl-ad--img img { height: 96px; max-height: 96px; }
.h5-hl-ad--ph { border: 0; }
.h5-hl-ad-ph {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 96px; padding: 0 20px;
    background: linear-gradient(90deg, #C81623, #DC2626);
}
.h5-hl-ad-ph-t {
    flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h5-hl-ad-pill {
    flex-shrink: 0; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px; font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   赛事详情（/mobile/match-detail）· 已购票信息 / 赛事打卡 / 购票门槛
   --------------------------------------------------------------------------
   全部为**新增类**（.md-buy-* / .md-ck-* / .md-lock-* / .md-fam-*），不改页面内联
   <style> 里已有的 .md-vs / .md-tier / .md-tr / .md-qty / .md-bar。
   打卡卡片视觉与 activity-info.php 的 .act-ck* 一致（同一套旧站样式，只是换前缀，
   避免依赖只在活动详情页输出的内联样式）。
   ========================================================================== */

/* ③ 购票门槛：锁住表单（不让用户白填一整张表单），文案卡与引导按钮仍可点 */
.md-locked { pointer-events: none; opacity: .55; filter: grayscale(.2); }
.md-lock-tip { background: #FFFBEB; border: 1px solid #FDE68A; }
.md-lock-tip strong { color: #92400E; font-size: 14px; }
.md-fam-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.md-fam-row:last-child { border-bottom: 0; }
.md-fam-note { margin: 6px 0 0; font-size: 11px; color: var(--text-muted); }
.md-fam-note.is-bad { color: var(--danger); }
.md-fam-note.is-ok { color: #059669; font-weight: 600; }

/* ② 已购票信息卡片（旧站 1538-1707：绿底卡片 + 分段明细） */
.md-buy {
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border: 2px solid #BBF7D0;
}
.md-buy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-buy-title { margin: 0; font-size: 14px; font-weight: 800; color: #15803D; }
.md-buy-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.md-buy-tag.is-on { background: #DCFCE7; color: #15803D; }
.md-buy-tag.is-off { background: #F1F2F4; color: var(--text-sub); }
.md-buy-sec { padding: 12px 0; border-top: 1px solid #DCFCE7; }
.md-buy-head + .md-buy-sec { border-top: 0; }
.md-buy-sec-t { margin: 0 0 6px; font-size: 11px; font-weight: 800; color: #15803D; }
.md-buy-sub { margin: 8px 0 2px; font-size: 10px; color: var(--text-muted); }
.md-buy-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 12px; }
.md-buy-row > span { color: var(--text-muted); }
.md-buy-row > b { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }
.md-buy-row--fam > b { font-weight: 400; }
.md-buy-sum {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed #BBF7D0;
    font-size: 12px; font-weight: 800; color: #15803D;
}
.md-buy-sum > b { color: var(--brand); font-size: 14px; }
.md-buy-pay { margin: 6px 0 0; font-size: 11px; color: var(--text-sub); }
.md-buy-points { margin-left: 6px; color: #B45309; font-weight: 600; }
.md-buy-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.md-buy-note { margin: 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.9; color: #15803D; }
.md-buy-more { margin-top: 10px; color: #15803D; border-color: #BBF7D0; background: #fff; }
.md-buy-done {
    background: linear-gradient(90deg, #16A34A, #10B981); border-color: #16A34A;
    color: #fff; font-weight: 800; text-align: center;
}

/* ① 赛事打卡（购票后显示；视觉同 activity-info.php 的 .act-ck*） */
.md-ck { background: #fff; border: 2px dashed #F3C6C9; border-radius: var(--radius); padding: 16px 14px; margin-top: 14px; }
.md-ck-tabs { display: flex; background: #F4F1EE; border-radius: 12px; padding: 3px; margin: 10px 0 14px; }
.md-ck-tab {
    flex: 1; padding: 8px 0; border: 0; background: transparent; border-radius: 10px;
    font-size: 12px; font-weight: 700; color: var(--text-sub); font-family: inherit; cursor: pointer;
}
.md-ck-tab.is-on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.md-ck-msg {
    margin-top: 10px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px;
    padding: 9px 11px; font-size: 11px; line-height: 1.6; color: #B45309;
}
.md-ck-auto { margin-top: 10px; background: #FFFBEB; border: 1px solid #FEF3C7; border-radius: 10px; padding: 10px 11px; }
.md-ck-auto-row { display: flex; align-items: center; justify-content: space-between; }
.md-ck-auto-t { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #B45309; }
.md-ck-auto-d { margin: 6px 0 0; font-size: 10px; line-height: 1.6; color: #B45309; }
.md-ck-auto-s { margin-top: 7px; background: rgba(255, 255, 255, .75); border-radius: 8px; padding: 7px 9px; font-size: 10px; color: #B45309; }
.md-ck-qr { display: flex; justify-content: center; margin-bottom: 12px; }
.md-ck-qr-box {
    background: #fff; border: 1px solid #F1EDE8; border-radius: 16px; padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05); min-height: 188px; min-width: 188px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--text-muted);
}
.md-ck-code { text-align: center; margin-bottom: 14px; }
.md-ck-code-v { margin: 4px 0 0; font-size: 22px; font-weight: 900; letter-spacing: .32em; color: var(--brand); }
.md-ck-ok {
    background: linear-gradient(135deg, #10B981, #14B8A6); border-radius: var(--radius);
    padding: 22px 16px; text-align: center; color: #fff; margin-top: 14px;
}
.md-ck-ok-ico {
    width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900;
}
.md-ck-ok-pill {
    display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 14px;
    font-size: 12px; font-weight: 800;
}
.md-ck-off {
    background: #F3F1EE; border-radius: var(--radius); padding: 20px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--text-sub); margin-top: 14px;
}

/* ==========================================================================
   远征报名 · 费用与附加服务（expedition-register.php）
   —— **只新增类**，不修改 .h5-card / .h5-btn / .h5-field / .h5-actionbar 等既有复用类。
   类名统一前缀 .exp-，避免与其它页面冲突。
   ========================================================================== */
.exp-hidden { display: none !important; }

/* 开关行（交通 / 住宿 / 餐饮） */
.exp-switch {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; margin-bottom: 10px;
    border: 2px solid var(--border); border-radius: var(--radius); background: #F9FAFB;
    cursor: pointer; font-family: inherit; text-align: left;
}
.exp-switch.is-on { border-color: var(--brand); background: var(--brand-soft); }
.exp-switch--flat { border: 0; border-radius: 0; background: transparent; margin-bottom: 0; }
.exp-switch-ico {
    width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: #E8EEFB; font-size: 16px;
}
.exp-switch-main { flex: 1; min-width: 0; }
.exp-switch-t { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.exp-switch-d { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.exp-switch-state { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--brand); }
.exp-switch-price { flex-shrink: 0; font-size: 14px; font-weight: 900; color: var(--brand); }

/* 可折叠区块体 */
.exp-body { padding-top: 4px; }
.exp-body--inset { padding: 8px 0 0; }
.exp-note { margin: 0 0 8px; font-size: 11px; color: var(--text-muted); }
.exp-warn { color: #B45309; margin: 8px 0 0; }

/* 单程 / 往返 分段切换 */
.exp-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #F1F2F4; margin-bottom: 10px; }
.exp-seg-btn {
    flex: 1; padding: 7px 0; border: 0; border-radius: 8px; background: transparent;
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.exp-seg-btn.is-on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* 单选卡片（交通方式 / 单间·标间） */
.exp-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exp-pick {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px;
    border: 2px solid var(--border); border-radius: var(--radius); background: #fff;
    cursor: pointer; font-family: inherit; text-align: left;
}
.exp-pick.is-on { border-color: var(--brand); background: var(--brand-soft); }
.exp-pick--tall { align-items: center; text-align: center; }
.exp-pick-name { font-size: 13px; font-weight: 700; color: var(--text); }
.exp-pick-price { font-size: 13px; font-weight: 900; color: var(--brand); }
.exp-pick-sub { font-size: 10px; color: var(--text-muted); }

/* 人数步进器（0.5 步进） */
.exp-step-wrap { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.exp-step-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-sub); }
.exp-step { display: flex; align-items: center; gap: 8px; }
.exp-step-btn {
    width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; font-family: inherit; font-size: 17px; font-weight: 700; color: var(--text-sub); cursor: pointer;
}
.exp-step-input {
    flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--border);
    border-radius: 8px; font-family: inherit; font-size: 14px; text-align: center; color: var(--text);
}

/* 附加服务条目 */
.exp-block { margin-bottom: 8px; border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.exp-fee {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
    border: 2px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer;
}
.exp-fee--required { border-color: #A7F3D0; background: #ECFDF5; cursor: default; }
.exp-fee--optional.is-on { border-color: var(--brand); background: var(--brand-soft); }
.exp-fee-check { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--brand); }
.exp-fee-main { flex: 1; min-width: 0; }
.exp-fee-t { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.exp-fee-d { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.exp-fee--required .exp-fee-d { color: #047857; }
.exp-fee-amount { flex-shrink: 0; font-size: 14px; font-weight: 900; color: var(--brand); }

/* 费用明细 */
.exp-lines { display: flex; flex-direction: column; gap: 6px; }
.exp-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.exp-line-label { color: var(--text-sub); }
.exp-line-amount { flex-shrink: 0; font-weight: 700; color: var(--text); }
.exp-line-amount--muted { color: var(--text-muted); font-weight: 600; }
.exp-line-amount--total { font-size: 17px; font-weight: 900; color: var(--brand); }
.exp-line--sub { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); }
.exp-line--total { padding-top: 8px; border-top: 1px solid var(--border); }
.exp-line--empty { justify-content: center; padding: 8px 0; color: var(--text-muted); }

/* 底部支付栏：压在 tabbar **之上**（tabbar 高 --tab-h、z-index 40） */
.exp-paybar {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    max-width: var(--app-max); margin: 0 auto; z-index: 39;
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0, 0, 0, .05);
}
.exp-paybar-sum { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.exp-paybar-label { font-size: 11px; color: var(--text-muted); }
.exp-paybar-total { font-size: 19px; font-weight: 900; color: var(--brand); }
.exp-paybar-sub { display: block; width: 100%; font-size: 10px; color: var(--text-muted); }
.exp-paybar .h5-btn { flex-shrink: 0; }
.exp-paybar-gap { height: 56px; }

/* 报名成功态 */
.exp-ok { text-align: center; padding: 10px 0 14px; }
.exp-ok-ico { font-size: 38px; line-height: 1; }
.exp-ok-t { margin: 8px 0 4px; font-size: 17px; font-weight: 900; color: var(--text); }
.exp-ok-d { margin: 0; font-size: 12px; color: var(--text-muted); }
.exp-ok-card { padding: 10px 12px; border-radius: var(--radius); background: #F9FAFB; }
.exp-ok-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; }
.exp-actions { display: flex; gap: 10px; margin-top: 12px; }
.exp-action-btn { flex: 1; text-decoration: none; }

/* ==========================================================================
   H5 商城列表：排序弹层 + 积分兑换筛选（mobile.shop#0 / #1）
   —— **全部为新增类**，不改动任何既有类定义
   ========================================================================== */

/* 页头排序按钮上的「当前不是默认排序」小圆点 */
.h5-sort-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: 50%; background: #FBBF24; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* 排序弹层（底部弹出；hidden 属性优先，加 is-open 才显示） */
.h5-sortmask {
    display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0, 0, 0, .45); z-index: 60;
    align-items: flex-end; justify-content: center;
}
.h5-sortmask.is-open { display: flex; }
.h5-sortsheet {
    width: 100%; max-width: var(--app-max); background: #fff;
    border-radius: 16px 16px 0 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .14);
}
.h5-sortsheet-h {
    padding: 2px 0 10px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.h5-sortitem {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 13px 6px; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; text-align: left; font-size: 14px; color: var(--text);
}
.h5-sortitem:last-of-type { border-bottom: 0; }
.h5-sortitem.is-on { color: var(--brand); font-weight: 700; }
.h5-sortitem-ck { margin-left: auto; color: var(--brand); font-weight: 700; display: none; }
.h5-sortitem.is-on .h5-sortitem-ck { display: inline; }

/* 「积分兑换」筛选（选中态琥珀色，与旧版一致；优先级高于 .h5-chip.is-on 的白底） */
.h5-chips .h5-chip-points.is-on {
    background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .25);
}
.h5-chips .h5-chip-points.is-on svg { fill: #fff; }

/* ==========================================================================
   隐私设置页（/mobile/privacy 的「账户与数据」「权限管理」）+ 通用正文块
   —— 纯新增类，不改上面任何既有类定义
   ========================================================================== */
/* 分组小标题（页面已在 .h5-main 里有 12px 内边距，这里不再加左右外边距，
   否则会比同页 .h5-card 多出一截缩进） */
.pv-title {
    margin: 0; padding: 0 2px 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--text-muted);
}
.pv-cells {
    background: #fff; border-radius: 14px; border: 1px solid var(--border);
    overflow: hidden; margin: 0 0 12px;
}
/* 行整体可点（开关只是行内的展示控件，点击行/开关都触发同一动作） */
.pv-row { cursor: pointer; }
.pv-row:active { background: #FAF8F5; }
/* 开关：40×20 胶囊 + 16px 圆点（尺寸/配色与旧站 Tailwind 写法一致：w-10 h-5 / 红-500 / 灰-300） */
.pv-switch {
    flex-shrink: 0; position: relative; display: inline-block;
    width: 40px; height: 20px; border-radius: 999px; background: #D1D5DB;
    transition: background .2s ease; cursor: pointer;
}
.pv-switch.is-on { background: var(--brand); }
.pv-switch.is-busy { opacity: .55; }
.pv-switch-dot {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .2s ease;
}
.pv-switch.is-on .pv-switch-dot { left: 22px; }
/* 正文卡片标题（红盾牌 / 灰盾牌） */
.pv-h4 {
    display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
    font-size: 14px; font-weight: 700; color: #1F2937;
}
.pv-h4-ico { display: inline-flex; }
.pv-h4-ico svg { width: 16px; height: 16px; display: block; }
.pv-h4-ico.is-red { color: var(--brand); }
.pv-h4-ico.is-gray { color: #9CA3AF; }
/* 后台配置正文：保留换行的普通段落（旧站是 whitespace-pre-wrap 的正文，不是 <pre> 代码块） */
.h5-textblock {
    white-space: pre-wrap; word-break: break-word;
    font-size: 12px; line-height: 1.9; color: var(--text-sub);
}
.h5-textblock--flow { white-space: normal; }
.h5-textblock--flow p { margin: 0 0 8px; }
.h5-textblock--flow p:last-child { margin-bottom: 0; }
.h5-textblock b { color: #374151; }
/* 积分卡外层由 <a> 改为 <div>（内层「去兑换」仍是链接），补一个手型光标 */
.h5-block-row--link { cursor: pointer; }

/* ==========================================================================
   【追加块】NFC 相关样式（会员卡贴卡扫描 / 活动点名）
   --------------------------------------------------------------------------
   只新增类，不改动上面任何既有类；使用方：
     · app/views/site/h5/nfc-info.php         （页头扫描按钮、空态、会员卡头、错误态）
     · app/views/site/h5/activity-checkin.php （大红 NFC 按钮、手输卡号行、重置按钮）
   ⚠️ .h5-topbar-act 挂在布局的 .h5-topbar 里（顶部栏是 flex，加在 .h5-head-main 之后
      自然靠右），避免改 app/views/layouts/h5.php 的公共页头。
   ========================================================================== */

/* 页头右侧动作按钮（红底页头里的小方块，与 .h5-back 同尺寸） */
.h5-topbar-act {
    width: 36px; height: 36px; flex-shrink: 0; padding: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.h5-topbar-act svg { width: 19px; height: 19px; display: block; }
.h5-topbar-act:active { transform: scale(.95); }
.h5-topbar-act[disabled] { opacity: .5; pointer-events: none; }
.h5-topbar-act.is-busy { animation: h5NfcPulse 1.2s ease-in-out infinite; }

@keyframes h5NfcPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* 大红「NFC 扫码点名」按钮（旧站 mobile.activity-checkin.tsx:302-311） */
.h5-nfc-btn {
    width: 100%; height: 52px; padding: 0 16px;
    border: 0; border-radius: 16px; cursor: pointer;
    background: linear-gradient(90deg, #B91C1C, #DC2626);
    color: #fff; font-size: 15px; font-weight: 800; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .25);
}
.h5-nfc-btn svg { width: 20px; height: 20px; display: block; }
.h5-nfc-btn:active { transform: scale(.98); }
.h5-nfc-btn[disabled] { opacity: .55; pointer-events: none; box-shadow: none; }
.h5-nfc-btn.is-busy {
    background: linear-gradient(90deg, #991B1B, #B91C1C);
    animation: h5NfcPulse 1.2s ease-in-out infinite;
}

/* 手输卡号兜底行（NFC 不可用 / 权限被拒 / iPhone 桌面浏览器） */
.h5-nfc-acts { display: flex; gap: 8px; margin-top: 10px; }
.h5-nfc-acts .h5-input { flex: 1; min-width: 0; }
.h5-nfc-acts .h5-btn { flex-shrink: 0; }
.h5-nfc-tip { margin: 8px 0 0; font-size: 12px; color: var(--text-sub); line-height: 1.6; }

/* 空态：虚线扫描框 + 居中按钮组 */
.h5-scanbox {
    width: 84px; height: 84px; margin: 0 auto 14px;
    border: 2px dashed #F3C9CD; border-radius: 24px; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.h5-scanbox svg { width: 36px; height: 36px; display: block; color: var(--brand); }
.h5-empty-acts { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 会员卡头（红渐变 + 姓名首字方块 + 等级徽标，对齐旧站 mobile.nfc-info.tsx:284-302） */
.h5-nfc-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; margin-bottom: 12px; border-radius: var(--radius);
    background: linear-gradient(135deg, #B91C1C, #C81623 55%, #DC2626);
    color: #fff; position: relative; overflow: hidden;
}
.h5-nfc-head-avatar {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px;
    font-size: 20px; font-weight: 900;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center;
}
.h5-nfc-head-main { flex: 1; min-width: 0; }
.h5-nfc-head-name { margin: 0; font-size: 18px; font-weight: 900; }
.h5-nfc-head-no { margin: 3px 0 0; font-size: 11px; color: rgba(255, 255, 255, .78); }
.h5-nfc-head-level {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    background: rgba(252, 211, 77, .92); color: #7C2D12;
}

/* 三宫格统计（积分 / 远征次数 / 公益·排练） */
.h5-nfc-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.h5-nfc-stat > div { padding: 10px 4px; border-radius: 12px; background: #F9FAFB; text-align: center; }
.h5-nfc-stat-num { display: block; font-size: 18px; font-weight: 900; color: #111827; }
.h5-nfc-stat-lbl { display: block; margin-top: 2px; font-size: 10px; color: var(--text-muted); }

/* 键值行（会员卡信息 / 分组统计行）
   ⚠️ 这两个页面原来用 .md-tr，但 .md-tr 只定义在别的页面模板的内联 style 里，
      在本页并不存在（等于没有样式，左右两端粘在一起），这里补一组真正生效的类。 */
.h5-kv {
    display: flex; gap: 10px; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.h5-kv:last-child { border-bottom: 0; }
.h5-kv-k { flex: 1; min-width: 0; color: var(--text-sub); }
.h5-kv-v { font-weight: 500; color: var(--text); text-align: right; word-break: break-all; }
.h5-kv-v a { color: var(--brand); font-weight: 700; text-decoration: none; margin-left: 8px; }

/* 读卡/查卡失败态 */
.h5-nfc-err { text-align: center; padding: 36px 12px; }
.h5-nfc-err-t { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text-sub); }
.h5-nfc-err-d { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ==========================================================================
   【追加块】三页收口（mobile.activity-checkin / mobile.match-detail / mobile.my-events）
   --------------------------------------------------------------------------
   ⚠️ 纯追加：不动上面任何既有选择器。
   ⚠️ 页头右侧插槽：布局 h5.php 没有右侧位置，统一由 H5.headRight() 往 .h5-topbar
      追加一个 .h5-head-right 容器（.h5-head-main 是 flex:1，容器自然靠右）。
   ========================================================================== */

/* ---------- 页头右侧插槽（0. 通用） ---------- */
.h5-head-right {
    flex-shrink: 0; margin-left: auto; padding-right: 4px;
    display: flex; align-items: center; gap: 6px;
}
/* 页头右侧小图标框（琥珀色 = 旧站 mobile.my-events 的票务图标框） */
.h5-head-ico {
    width: 36px; height: 36px; flex-shrink: 0; padding: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .2); color: #fff;
}
.h5-head-ico svg { width: 19px; height: 19px; display: block; }
.h5-head-ico.is-amber { background: rgba(252, 211, 77, .95); color: #7C2D12; }
.h5-head-ico.is-plain { background: rgba(255, 255, 255, .2); }
.h5-head-ico:active { transform: scale(.95); }

/* ---------- 1. 活动点名（mobile.activity-checkin） ---------- */
.ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 12px; margin-top: 12px; }
.ac-stat {
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    padding: 10px 2px; text-align: center; cursor: pointer; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ac-stat.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px #FECACA; }
.ac-stat.is-off { border-color: #E5E7EB; background: #F9FAFB; cursor: default; }
.ac-stat-num { display: block; font-size: 18px; font-weight: 900; color: #111827; line-height: 1.1; }
.ac-stat-num small { font-size: 11px; font-weight: 400; color: #9CA3AF; margin-left: 1px; }
.ac-stat-num.is-green { color: #16A34A; }
.ac-stat-num.is-amber { color: #F59E0B; }
.ac-stat-num.is-muted { color: #D1D5DB; }
.ac-stat-num.is-brand { color: var(--brand); }
.ac-stat-lbl { display: block; margin-top: 3px; font-size: 10px; color: #9CA3AF; }
.ac-stat-lbl.is-off { color: #D1D5DB; }
.ac-stat-ico { display: block; font-size: 18px; line-height: 1.1; }

/* 姓名/电话点名：输入框 + 未点名人员下拉 */
.ac-input-row { position: relative; margin-top: 8px; }
.ac-inputs { display: flex; gap: 8px; }
.ac-inputs .h5-input { flex: 1; min-width: 0; }
.ac-sign {
    flex-shrink: 0; min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
    background: #111827; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}
.ac-sign[disabled] { opacity: .5; }
.ac-picker {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 30;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16); max-height: 224px; overflow-y: auto;
}
.ac-picker-item {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; font-size: 14px; text-align: left; font-family: inherit;
    background: none; border: 0; border-bottom: 1px solid #F5F5F5; cursor: pointer;
}
.ac-picker-item:last-child { border-bottom: 0; }
.ac-picker-item:active { background: #FEF2F2; }
.ac-picker-empty { padding: 12px; font-size: 12px; color: #9CA3AF; }
.ac-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; border: 2px solid #F87171; }
.ac-picker-plus { font-size: 10px; color: #F97316; }
.ac-picker-group { margin-left: auto; font-size: 10px; color: #9CA3AF; }

/* 名单（组长置顶 / 未到红色 / 已点名绿色） */
.ac-rows { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 4px; }
.ac-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: #fff;
    transition: transform .12s ease;
}
.ac-row.is-miss { background: rgba(254, 242, 242, .72); border-color: #FECACA; }
.ac-row.is-ok { background: #F0FDF4; border-color: #BBF7D0; }
.ac-row.is-click { cursor: pointer; }
.ac-row.is-click:active { transform: scale(.99); }
.ac-row-ico {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
}
.ac-row-ico.is-ok { background: #DCFCE7; color: #16A34A; }
.ac-row-ico.is-miss { background: #FEE2E2; color: #DC2626; }
.ac-row-main { flex: 1; min-width: 0; }
.ac-row-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: #111827; }
.ac-row-t.is-off { color: #6B7280; }
.ac-row-sub { margin: 3px 0 0; font-size: 11px; color: #9CA3AF; }
.ac-tag-leader { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: #CFFAFE; color: #0E7490; font-weight: 700; }
.ac-tag-group { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: #F3F4F6; color: #6B7280; }
.ac-tag-baby { font-size: 10px; color: #F97316; }
.ac-miss-txt { flex-shrink: 0; margin-right: 8px; font-size: 12px; font-weight: 900; color: #DC2626; }
.ac-tel {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background: #fff; border: 1px solid #F3F4F6; color: #4B5563; text-decoration: none;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ac-tel:active { transform: scale(.95); }
.ac-chev { flex-shrink: 0; font-size: 15px; color: #FCA5A5; }
.ac-chev.is-ok { color: #86EFAC; }
.ac-sum { padding: 8px 12px 0; text-align: center; font-size: 11px; color: #9CA3AF; }
.ac-sum b { color: var(--brand); }

/* 点名记录 / 重新点名：底部弹层 */
.ac-sheet-mask {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5);
    display: flex; align-items: flex-end; justify-content: center;
}
.ac-sheet {
    width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ac-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 18px 12px; border-bottom: 1px solid #F3F4F6; flex-shrink: 0;
}
.ac-sheet-title { margin: 0; font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.ac-sheet-x {
    width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
    background: #F3F4F6; color: #6B7280; font-size: 13px; line-height: 1;
}
.ac-sheet-body { flex: 1; overflow-y: auto; }
.ac-sheet-state { padding: 44px 12px; text-align: center; font-size: 13px; color: #9CA3AF; }
.ac-log { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid #F9FAFB; }
.ac-log-ico {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; font-weight: 900;
    background: #ECFDF5; color: #10B981; display: flex; align-items: center; justify-content: center;
}
.ac-log-main { flex: 1; min-width: 0; }
.ac-log-t { margin: 0; font-size: 13px; font-weight: 700; color: #111827; }
.ac-log-t span { margin-left: 4px; font-size: 10px; font-weight: 400; color: #F97316; }
.ac-log-d { margin: 2px 0 0; font-size: 11px; color: #9CA3AF; }
.ac-log-time { flex-shrink: 0; font-size: 11px; color: #9CA3AF; }

/* ---------- 2. 赛事详情（mobile.match-detail）追加 ---------- */
.md-sec-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer;
}
.md-chev { flex-shrink: 0; font-size: 12px; color: #9CA3AF; }
.md-loc { flex: 1; min-width: 0; }
.md-addr { display: block; margin-top: 2px; font-size: 11px; color: #9CA3AF; line-height: 1.5; }
.md-nav {
    flex-shrink: 0; padding: 6px 12px; border-radius: 999px; text-decoration: none;
    background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800;
}
.md-desc { margin: 10px 0 0; font-size: 13px; color: #4B5563; background: #F9FAFB; border-radius: 12px; padding: 12px; white-space: pre-wrap; line-height: 1.75; }
.md-desc-more {
    margin: 6px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--brand); font-size: 12px; font-weight: 700; font-family: inherit;
}
.md-tier-plan { margin-top: 3px; font-size: 11px; color: #9CA3AF; }
.md-tier-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; margin-left: 10px; }
.md-tier-pts { font-size: 11px; font-weight: 700; color: #D97706; }
.md-tier-free { font-size: 13px; font-weight: 700; color: #9CA3AF; }

/* 交通行：备注 / 售完 / 自费 / 选座状态条 */
.md-trf-remark { display: block; margin-top: 2px; font-size: 9px; color: #9CA3AF; }
.md-trf-sold { padding: 4px 9px; border-radius: 999px; background: #FEF2F2; color: #EF4444; font-size: 10px; font-weight: 700; }
.md-trf-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.md-trf-sc {
    width: 100%; margin-top: 6px; padding: 6px 9px; text-align: left; cursor: pointer;
    border: 1px solid #FDE68A; border-radius: 10px; background: #FFFBEB; color: #B45309;
    font-size: 10px; font-family: inherit;
}
.md-trf-sc.is-full { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.md-seatbar {
    margin-top: 8px; padding: 7px 10px; border-radius: 10px; cursor: pointer;
    border: 1px dashed #FDE68A; background: #FFFBEB; color: #B45309; font-size: 11px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.md-seatbar.is-full { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.md-seatbar-edit { flex-shrink: 0; font-weight: 800; }

/* 家属行：核验标记 / 年龄票种 / 拍照识别 */
.md-fam-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.md-fam-name { font-size: 11px; font-weight: 700; color: #2563EB; }
.md-fam-ok { font-size: 10px; font-weight: 700; color: #059669; }
.md-fam-age { font-size: 10px; font-weight: 700; color: var(--brand); }
.md-fam-bad { font-size: 10px; color: #EF4444; }
.md-fam-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.md-fam-name-row .h5-input { flex: 1; min-width: 0; }
.md-fam-ocr {
    flex-shrink: 0; padding: 9px 12px; border-radius: 10px; cursor: pointer;
    background: #EFF6FF; color: #2563EB; font-size: 12px; font-weight: 700;
}
.md-fam-ocr input { display: none; }
.md-fam-note { margin: 4px 0 0; font-size: 10px; color: #9CA3AF; }
.md-fam-note.is-bad { color: #EF4444; }
.md-fam-note.is-ok { color: #059669; }
.h5-input.is-verified { border-color: #6EE7B7; background: #ECFDF5; }

/* 其它用费勾选项 */
.md-other-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font-family: inherit; text-align: left;
    border: 1px solid #F3F4F6; border-radius: 12px; background: #FAFAFA;
}
.md-other-item.is-on { border-color: #9CA3AF; background: #F3F4F6; }
.md-other-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.md-other-box {
    width: 18px; height: 18px; flex-shrink: 0; border: 2px solid #D1D5DB; border-radius: 5px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
}
.md-other-item.is-on .md-other-box { background: var(--brand); border-color: var(--brand); }
.md-other-req { margin-left: 4px; font-size: 9px; color: #EF4444; }
.md-other-amt { flex-shrink: 0; font-size: 12px; font-weight: 800; color: #4B5563; }

/* 底部栏：费用明细行 / 禁用按钮 */
.md-bar-detail { margin: 2px 0 0; font-size: 10px; color: #9CA3AF; }
.md-bar .h5-btn[disabled] { opacity: .55; pointer-events: none; }

/* 购票须知勾选 */
.md-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.md-agree-box {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; padding: 0; cursor: pointer;
    border: 2px solid #D1D5DB; border-radius: 6px; background: #fff; color: #fff;
    font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.md-agree-box.is-on { background: var(--brand); border-color: var(--brand); }
.md-agree-txt { font-size: 11px; color: #6B7280; line-height: 1.7; }
.md-agree-txt a { color: var(--brand); text-decoration: underline; }
.md-terms {
    padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
    color: var(--brand); font-size: 11px; text-decoration: underline;
}
.md-agree-notice {
    margin-top: 6px; padding: 10px; border-radius: 10px; background: #F9FAFB;
    max-height: 96px; overflow-y: auto; font-size: 10px; color: #9CA3AF; line-height: 1.75;
    white-space: pre-wrap;
}

/* 赛事不存在空态 */
.md-empty { padding: 64px 24px; text-align: center; }
.md-empty-ico { font-size: 40px; display: block; margin-bottom: 10px; opacity: .45; }
.md-empty-t { margin: 0; font-size: 14px; color: #6B7280; }
.md-empty-a { display: inline-block; margin-top: 14px; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none; }

/* ---------- 3. 大巴选座面板（H5.busSeatPicker，旧站 bus-seat-picker.tsx） ---------- */
.h5-seat-mask {
    position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .4);
    display: flex; align-items: flex-end; justify-content: center;
}
.h5-seat-sheet {
    width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.h5-seat-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 12px; border-bottom: 1px solid #F3F4F6; }
.h5-seat-title { font-size: 14px; font-weight: 800; color: #111827; }
.h5-seat-cfg { padding: 2px 8px; border-radius: 999px; background: #F3F4F6; color: #9CA3AF; font-size: 10px; }
.h5-seat-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #9CA3AF; font-size: 14px; cursor: pointer; }
.h5-seat-bar { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid #F9FAFB; }
.h5-seat-bar-t { flex: 1; font-size: 12px; color: #6B7280; }
.h5-seat-bar-n { font-size: 12px; font-weight: 800; color: #B45309; white-space: nowrap; }
.h5-seat-bar-n.is-ok { color: #059669; }
.h5-seat-picked { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px; }
.h5-seat-picked:not(:empty) { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #F9FAFB; }
.h5-seat-chip {
    padding: 3px 8px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; font-family: inherit;
}
.h5-seat-chip--clr { background: #fff; border: 1px solid var(--border); color: #9CA3AF; }
.h5-seat-buses { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 4px; }
.h5-seat-bus {
    padding: 4px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--border); background: #fff; color: #4B5563; font-size: 12px;
}
.h5-seat-bus.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.h5-seat-body { flex: 1; overflow-y: auto; padding: 8px 18px 4px; }
.h5-seat-empty { padding: 32px 8px; text-align: center; font-size: 12px; color: #EF4444; }
.h5-seat-gridbox { padding: 14px; border-radius: 16px; background: #F9FAFB; }
.h5-seat-gridhead { display: flex; justify-content: space-between; padding: 0 4px 10px; font-size: 10px; color: #D1D5DB; }
.h5-seat-row { display: flex; align-items: center; margin-bottom: 8px; }
.h5-seat-gap { flex: 1; }
.h5-seat {
    width: 36px; height: 36px; margin-right: 8px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--border); background: #fff; color: #4B5563;
    font-size: 11px; font-weight: 700; font-family: inherit;
}
.h5-seat.is-sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.h5-seat.is-taken { background: #E5E7EB; border-color: #E5E7EB; color: #9CA3AF; text-decoration: line-through; cursor: not-allowed; }
.h5-seat-legend { display: flex; gap: 14px; justify-content: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #E5E7EB; }
.h5-seat-legend span { font-size: 10px; color: #9CA3AF; }
.h5-seat-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; background: #fff; border: 1px solid var(--border); vertical-align: -2px; }
.h5-seat-legend span.is-on::before { background: var(--brand); border-color: var(--brand); }
.h5-seat-legend span.is-taken::before { background: #E5E7EB; border-color: #E5E7EB; }
.h5-seat-hint { margin: 6px 0 0; text-align: center; font-size: 11px; color: #B45309; }
.h5-seat-sheet > .h5-btn { margin: 8px 18px 0; width: calc(100% - 36px); }

/* ---------- 4. 分享面板（H5.sharePanel，旧站 match-detail.tsx:1818-1858） ---------- */
.h5-share-mask {
    position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .5);
    display: flex; align-items: flex-end; justify-content: center;
}
.h5-share-sheet {
    width: 100%; max-width: 420px; padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
}
.h5-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.h5-share-head span { font-size: 15px; font-weight: 800; color: #111827; }
.h5-share-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #F3F4F6; color: #9CA3AF; font-size: 13px; cursor: pointer; }
.h5-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.h5-share-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 0; border: 0; border-radius: 12px; background: none; cursor: pointer;
    font-size: 12px; color: #4B5563; font-family: inherit;
}
.h5-share-item:active { background: #F9FAFB; }
.h5-share-ico {
    width: 48px; height: 48px; border-radius: 50%; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}
.h5-share-ico.is-wx { background: #ECFDF5; color: #059669; }
.h5-share-ico.is-moments { background: #EFF6FF; color: #2563EB; }
.h5-share-ico.is-copy { background: #F3F4F6; color: #4B5563; }
.h5-share-url { margin: 0; padding: 10px; border-radius: 10px; background: #F9FAFB; font-size: 11px; color: #6B7280; word-break: break-all; }

/* ---------- 5. 我的票务（mobile.my-events）追加 ---------- */
.me-tabs-wrap { padding: 2px 16px 12px; }
.me-logo { width: 36px; height: 36px; border-radius: 10px; background: rgba(252, 211, 77, .95); color: #7C2D12; display: flex; align-items: center; justify-content: center; }
.me-logo svg { width: 19px; height: 19px; display: block; }



/* ==========================================================================
   §H5 按页专属段 —— 第 1 步「内联样式回收」（2026-10-01）
   来源：app/views/site/h5/*.php 的原内联 <style>（已删除）与 style="…"（已改类）。
   ⚠️ 本段整体位于 h5.css **末尾**，确保不被前面规则覆盖；
      改这些类之前，先确认它只服务来源页（同名类已按值去重）。
   内联块 8 个，规则合计 325 条（跨文件重复去重 22 条）
   style= 改类 191 处，新增/变体类 166 个
   JS 模板内改动 74 处
   串页防护：.md-tr → .ai-md-tr / .ci-md-tr（按页前缀化，同步改 markup）
   保留内联 display:none 15 处（JS 用 inline display 切换，见决策点 1）
   保留动态值 8 处（PHP/JS 插值）
   ========================================================================== */

/* ---------- 慈善商城/慈善项目（charity.php） ---------- */
.dc-tabs { display:flex; gap:6px; background:rgba(200,22,35,.08); border-radius:14px; padding:4px; margin-bottom:12px; }
.dc-tab { flex:1; padding:8px 4px; border:0; background:transparent; font-size:13px; font-weight:700;
          color:#9ca3af; border-radius:11px; cursor:pointer; }
.dc-tab.is-on { background:#fff; color:var(--brand); box-shadow:0 1px 3px rgba(16,24,40,.08); }
.dc-pane { display:none; }
.dc-pane.is-on { display:block; }
.dc-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; }
.dc-chip { flex:0 0 auto; padding:6px 14px; border-radius:999px; background:#fff; color:#6b7280;
           font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dc-chip.is-on { background:#ef4444; color:#fff; }
.dc-card { display:flex; gap:10px; background:#fff; border-radius:12px; padding:10px;
           margin-bottom:10px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.dc-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.dc-thumb { width:88px; height:88px; border-radius:10px; overflow:hidden; flex:0 0 auto; position:relative;
            background:linear-gradient(135deg,#ffe4e6,#fff1f2); display:flex; align-items:center;
            justify-content:center; font-size:26px; text-decoration:none; }
.dc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dc-signed { position:absolute; left:4px; top:4px; width:20px; height:20px; border-radius:50%;
             background:#10b981; color:#fff; font-size:12px; line-height:20px; text-align:center;
             font-weight:900; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.dc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.dc-title { font-size:14px; font-weight:800; color:#111827; line-height:1.35; text-decoration:none; }
.dc-badge { flex:0 0 auto; padding:2px 7px; border-radius:999px; font-size:9px; font-weight:900; }
.dc-b-live { background:#e7f8ee; color:#16a34a; }
.dc-b-open { background:#fee2e2; color:#dc2626; }
.dc-b-soon { background:#fef3c7; color:#b45309; }
.dc-b-end  { background:#f1f2f4; color:#6b7280; }
.dc-b-gray { background:#f1f2f4; color:#6b7280; }
.dc-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px;
           font-size:11px; color:#6b7280; }
.dc-nav { border:0; background:#fff1f2; color:var(--brand); font-size:11px; font-weight:800;
          padding:5px 9px; border-radius:999px; cursor:pointer; }
.dc-prog { margin-top:auto; }
.dc-prog-txt { display:flex; align-items:center; justify-content:space-between;
               font-size:10px; color:#9ca3af; font-weight:600; margin-bottom:4px; }
.dc-prog-pct { color:var(--brand); font-weight:900; }
.dc-bar { height:6px; background:#f1f2f4; border-radius:999px; overflow:hidden; }
.dc-bar i { display:block; height:100%; border-radius:999px;
            background:linear-gradient(90deg,#fb7185,#C81623); }
.dc-act { margin-top:8px; }
.dc-btn { display:flex; align-items:center; justify-content:center; gap:4px; width:100%;
          padding:7px 0; border-radius:9px; font-size:11px; font-weight:900;
          text-decoration:none; border:0; }
.dc-btn-go { background:linear-gradient(90deg,#f43f5e,#C81623); color:#fff; }
.dc-btn-signed { background:#e7f8ee; color:#16a34a; border:1px solid #bbf7d0; }
.dc-btn-end { background:#f1f2f4; color:#9ca3af; }
.dc-btn-live { background:#10b981; color:#fff; }
.dc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dc-prod { background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
           box-shadow:0 1px 2px rgba(16,24,40,.05); }
.dc-prod-img { height:112px; position:relative; display:flex; align-items:center; justify-content:center;
               background:linear-gradient(135deg,#fffbeb,#ffedd5); font-size:30px; }
.dc-prod-img img { width:100%; height:100%; object-fit:cover; display:block; }
.dc-tag { position:absolute; top:6px; padding:2px 6px; border-radius:6px; font-size:9px; font-weight:900; }
.dc-tag-cat { left:6px; background:rgba(0,0,0,.34); color:#fff; }
.dc-tag-sold { right:6px; background:#6b7280; color:#fff; }
.dc-tag-wait { right:6px; background:#fbbf24; color:#991B1B; }
.dc-prod-body { padding:9px 10px 10px; display:flex; flex-direction:column; flex:1 1 auto; }
.dc-prod-name { font-size:12px; font-weight:900; color:#1f2937; line-height:1.35; min-height:32px; }
.dc-prod-note { font-size:9px; color:#9ca3af; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-prod-price { display:flex; align-items:baseline; gap:3px; margin-top:6px; }
.dc-prod-price b { font-size:16px; color:#f43f5e; font-weight:900; }
.dc-prod-price span { font-size:9px; color:#9ca3af; }
.dc-prod-rest { font-size:9px; color:#9ca3af; margin-left:auto; }
.dc-prod-btn { margin-top:8px; width:100%; padding:8px 0; border:0; border-radius:10px; font-size:11px;
               font-weight:900; color:#fff; background:linear-gradient(90deg,#f43f5e,#C81623); cursor:pointer; }
.dc-prod-btn[disabled] { background:#f1f2f4; color:#9ca3af; }
.dc-search { display:flex; align-items:center; gap:8px; background:#f1f2f4; border-radius:10px;
             padding:8px 12px; margin-bottom:10px; }
.dc-search input { flex:1 1 auto; border:0; background:transparent; font-size:14px; outline:none; }
.dc-search button { border:0; background:transparent; color:#9ca3af; font-size:12px; font-weight:700; cursor:pointer; }
.dc-sum { background:#fff1f2; border:1px solid #ffe4e6; border-radius:12px; padding:10px 12px; font-size:12px; color:#6b7280; }
.dc-sum div { display:flex; justify-content:space-between; padding:2px 0; }
.dc-sum .dc-sum-total { border-top:1px solid #ffe4e6; margin-top:4px; padding-top:6px; }
.dc-sum .dc-sum-total b { font-size:17px; color:#e11d48; font-weight:900; }
.dc-qty { display:flex; align-items:center; gap:10px; }
.dc-qty button { width:32px; height:32px; border-radius:8px; border:0; background:#f1f2f4; font-size:16px; cursor:pointer; }
.dc-qty span { min-width:28px; text-align:center; font-size:16px; font-weight:800; }
.dc-mask { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; display:flex;
           align-items:center; justify-content:center; padding:18px; overflow:auto; }
.dc-sheet { background:#fff; border-radius:16px; width:100%; max-width:360px; padding:20px; text-align:center; }
.dc-choice { display:block; width:100%; margin-bottom:10px; padding:11px; border:2px solid #e8eaed;
             border-radius:12px; background:#fff; font-size:14px; cursor:pointer; }
.dc-cert { background:linear-gradient(180deg,#fffbeb,#fff7ed); border-radius:12px; padding:6px; }
.dc-cert-inner { border:3px double rgba(217,119,6,.6); border-radius:10px; background:#FFFDF8;
                 padding:18px 16px; text-align:center; position:relative; }
.dc-cert-seal { width:32px; height:32px; border-radius:50%; background:#C81623; color:#fff;
                display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }
.dc-cert-title { font-size:19px; font-weight:900; color:#991B1B; letter-spacing:.28em; margin:8px 0 2px; }
.dc-cert-en { font-size:9px; color:#9ca3af; letter-spacing:.16em; }
.dc-cert-line { height:1px; background:linear-gradient(90deg,transparent,#fbbf24,transparent); margin:12px 0; }
.dc-cert-no { font-size:9px; color:#6b7280; font-family:Consolas,Menlo,monospace; word-break:break-all; }
.dc-mine-row { display:flex; align-items:center; gap:10px; }
.dc-mine-card { display:flex; align-items:center; gap:10px; cursor:pointer; }
.dc-line { display:flex; align-items:center; justify-content:space-between; font-size:12px; padding:4px 0; }
.dc-line span:first-child { color:#9ca3af; }
.dc-line span:last-child { color:#374151; font-weight:700; }
.dc-pay { width:100%; padding:12px 0; border:0; border-radius:12px; font-size:14px; font-weight:900;
          color:#fff; background:linear-gradient(90deg,#f43f5e,#C81623); cursor:pointer; }
.dc-pay[disabled] { opacity:.6; }
.dc-ad { display:block; border-radius:12px; overflow:hidden; margin-bottom:12px; text-decoration:none; }
.dc-ad img { width:100%; display:block; }
.dc-ad p { margin:0; padding:10px 12px; background:#fff; font-size:13px; color:#374151; }
.dc-pane-charity-tag                           { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.dc-pane-charity-box                           { display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;flex-wrap:wrap }
.dc-pane-charity-head                          { text-align:center;font-size:10px;margin:4px 0 12px }
.dc-order-box                                  { display:none;align-items:flex-end;padding:0 }
.dc-order-box-panel                            { background:#fff;border-radius:18px 18px 0 0;width:100%;max-width:640px;margin:0 auto; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:92vh;overflow-y:auto }
.h5-muted--tight                               { margin:2px 0 0 }
.dc-o-close-head                               { text-align:center;margin:10px 0 }
.h5-badge--lg                                  { font-size:12px;padding:5px 14px }
.dc-o-status-box                               { margin:0 0 12px;background:#faf8f5 }
.h5-row-title--sm                              { font-size:13px }
.dc-o-qty-amt                                  { color:#f43f5e;font-size:15px }
.dc-o-amount-box                               { margin:0 0 12px;background:#faf8f5 }
.dc-donate-modal-box                           { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80 }
.dc-donate-modal-box2                          { position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:#fff; border-radius:14px 14px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); max-height:92vh;overflow-y:auto }
.dc-dm-close-box                               { margin:0 0 12px;background:#faf8f5 }
.dc-dm-pname-amt                               { color:#f43f5e;font-size:15px }
.dc-dm-msg-box                                 { display:flex;gap:10px }
.h5-btn--pick                                  { cursor:pointer }
.dc-dm-submit-head                             { text-align:center;font-size:11px;margin:8px 0 0 }
.dc-thanks-ico                                 { font-size:40px }
.dc-thanks-ttl                                 { margin:8px 0;font-size:17px }
.h5-muted--mb                                  { margin:0 0 12px }
.dc-thanks-box                                 { background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:10px;margin-bottom:14px }
.dc-thanks-amt                                 { font-size:13px;font-weight:700;color:#c2410c }
.dc-thanks-box-xs                              { font-size:11px;color:#ea580c;margin-top:3px }
.dc-display-box                                { text-align:left }
.dc-display-head                               { text-align:center;margin-bottom:12px }
.dc-display-ico                                { font-size:28px }
.dc-display-ttl                                { margin:6px 0 2px;font-size:16px }
.dc-display-txt                                { margin:0 }
.dc-dimage-file-box                            { display:flex;gap:8px;align-items:center;margin-top:8px }
.dc-dimage-prev-ico                            { width:40px;height:40px;border-radius:50%;object-fit:cover;display:none }
.dc-dskip-btn                                  { margin-top:8px;border:0;color:#9ca3af;background:transparent }
.dc-cert-box                                   { display:none;align-items:flex-start;padding-top:24px }
.dc-cert-box-panel                             { width:100%;max-width:340px }
.dc-cert-inner-txt                             { font-size:11px;color:#6b7280;margin:0 }
.dc-cert-inner-ttl                             { font-size:17px;font-weight:900;color:#111827;margin:4px 0 8px }
.dc-cert-name-txt                              { font-size:11px;color:#4b5563;line-height:1.9;margin:0 }
.dc-cert-proj-amt                              { color:#991B1B }
.dc-cert-amt                                   { color:#e11d48;font-size:14px }
.dc-cert-amt-foot                              { display:flex;align-items:flex-end;justify-content:space-between;gap:8px }
.dc-cert-amt-box                               { text-align:left }
.dc-cert-amt-box-xs                            { font-size:9px;color:#9ca3af }
.dc-cert-no-box                                { font-size:9px;color:#9ca3af;margin-top:4px }
.dc-cert-qr-ico                                { width:58px;height:58px;display:none }
.dc-cert-qr-box                                { margin-top:10px }
.dc-cert-qr-tag                                { width:24px;height:24px;font-size:11px }
.dc-cert-qr-tag-xs                             { font-size:11px;font-weight:700;color:#374151;margin-left:4px }
.dc-cert-tpl-box                               { display:none;background:#fff;border-radius:10px;padding:14px;text-align:left }
.dc-cert-tpl-box-row                           { display:flex;gap:10px;margin-top:14px }
.h5-btn--ghost-light                           { flex:1;background:rgba(255,255,255,.9) }
.h5-btn--flex                                  { flex:1 }
.dc-cert-again-btn                             { margin-top:8px;background:rgba(255,255,255,.9) }
.dc-cert-again-tag                             { font-size:13px;font-weight:700;color:#374151 }
.dc-cert-again-foot                            { display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px }
.dc-cert-again-box                             { color:#6b7280 }
.dc-cert-qr2-ico                               { width:58px;height:58px;display:none }
.dc-cert-qr2-box                               { width:46px;height:46px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;' + 'justify-content:center;background:linear-gradient(135deg,#fffbeb,#ffedd5);font-size:22px }
.h5-row-title--md                              { font-size:14px }
.dc-cert-qr2-box2                              { flex:0 0 auto;text-align:right }
.dc-cert-qr2-amt                               { font-size:9px;color:#f43f5e;font-weight:700;margin-top:4px }
.h5-btn--gold                                  { background:linear-gradient(90deg,#fbbf24,#fb923c);color:#991B1B;font-weight:900 }

/* ---------- 活动详情（activity-info.php） ---------- */
/* 信息行（与 match-detail.php 的 .md-tr 同一定义；h5.css 里没有这个类） */
.ai-md-tr { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); }
.ai-md-tr:last-child { border-bottom:0; }

/* 封面：无图时红渐变 + 图标兜底（旧站同款） */
.act-cover { position:relative; height:200px; border-radius:var(--radius); overflow:hidden; margin-bottom:12px;
             background:linear-gradient(135deg,#B91C1C 0%,#C81623 50%,#DC2626 100%); }
.act-cover > img { width:100%; height:100%; object-fit:cover; display:block; }
.act-cover-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:56px; opacity:.28; }
.act-cover::after { content:''; position:absolute; inset:0;
                    background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 55%,rgba(0,0,0,.22)); }
.act-cover-badge { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2; }
.act-share { position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border:0; border-radius:50%;
             background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; justify-content:center; }
.act-share svg { width:16px; height:16px; display:block; }

/* 富文本正文基础样式 */
.act-rich { font-size:13px; line-height:1.9; color:var(--text-sub); word-break:break-word; }
.act-rich img { max-width:100%; height:auto; border-radius:8px; }
.act-rich p { margin:0 0 8px; }
.act-rich a { color:var(--brand); }
.act-rich table { max-width:100%; }

/* 名额进度条 */
.act-progress { width:100%; height:6px; background:#EFEAE4; border-radius:999px; overflow:hidden; }
.act-progress > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#C81623,#FBBF24); }

/* 底部报名栏：位于 tabbar 之上（旧站报名栏在底部导航上方） */
.act-bar { position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
           max-width:var(--app-max); margin:0 auto; background:rgba(255,255,255,.97);
           -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
           border-top:1px solid var(--border); padding:10px 14px; z-index:35; }

/* 底部弹窗（报名 / 登录引导 / 会员专属） */
.act-mask { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; }
/* ⚠️ 作者样式的 display:flex 会盖掉 UA 的 [hidden]{display:none}，必须显式补一条 */
.act-mask[hidden] { display:none; }
.act-sheet { width:100%; max-width:var(--app-max); background:#fff; border-radius:20px 20px 0 0;
             padding:0 18px calc(18px + env(safe-area-inset-bottom,0px)); max-height:86%; overflow:auto; }
.act-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 0 12px; }
.act-sheet-title { margin:0; font-size:16px; font-weight:800; }
.act-sheet-sub { margin:2px 0 0; font-size:11px; color:var(--text-muted); }
.act-close { width:30px; height:30px; border:0; border-radius:50%; background:#F3F1EE; color:var(--text-muted);
             font-size:14px; line-height:1; flex-shrink:0; }
.act-gate-body { background:#FAF8F5; border-radius:12px; padding:14px; font-size:13px; line-height:1.7; color:var(--text-sub); }

/* 签到卡片 */
.act-ck { background:#fff; border:2px dashed #F3C6C9; border-radius:var(--radius); padding:16px 14px; margin-top:14px; }
.act-ck-tabs { display:flex; background:#F4F1EE; border-radius:12px; padding:3px; margin:10px 0 14px; }
.act-ck-tab { flex:1; padding:8px 0; border:0; background:transparent; border-radius:10px; font-size:12px; font-weight:700;
              color:var(--text-sub); font-family:inherit; cursor:pointer; }
.act-ck-tab.is-on { background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.act-ck-msg { margin-top:10px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px;
              padding:9px 11px; font-size:11px; line-height:1.6; color:#92400E; }
.act-auto { margin-top:10px; background:#FFFBEB; border:1px solid #FEF3C7; border-radius:10px; padding:10px 11px; }
.act-auto-row { display:flex; align-items:center; justify-content:space-between; }
.act-auto-t { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#B45309; }
.act-auto-d { margin:6px 0 0; font-size:10px; line-height:1.6; color:#B45309; }
.act-auto-s { margin-top:7px; background:rgba(255,255,255,.75); border-radius:8px; padding:7px 9px; font-size:10px; color:#B45309; }
.act-qr { display:flex; justify-content:center; margin-bottom:12px; }
.act-qr-box { background:#fff; border:1px solid #F1EDE8; border-radius:16px; padding:10px;
              box-shadow:0 4px 14px rgba(0,0,0,.06); min-width:168px; min-height:168px;
              display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-muted); text-align:center; }
.act-code { text-align:center; margin-bottom:14px; }
.act-code-v { margin:4px 0 0; font-size:22px; font-weight:900; letter-spacing:.32em; color:var(--brand); }
.act-ck-ok { background:linear-gradient(135deg,#10B981,#14B8A6); border-radius:var(--radius); padding:22px 16px;
             text-align:center; color:#fff; margin-top:14px; }
.act-ck-ok-ico { width:52px; height:52px; margin:0 auto 10px; border-radius:50%; border:2px solid rgba(255,255,255,.45);
                 background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:24px; }
.act-ck-ok-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.22);
                  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 14px; font-size:12px; font-weight:800; }
.act-ck-off { background:#F3F1EE; border-radius:var(--radius); padding:20px; text-align:center;
              margin-top:14px; font-size:13px; font-weight:700; color:var(--text-sub); }
.ai-btn-share-ttl                              { margin:0 0 10px;font-size:17px;font-weight:800;line-height:1.4 }
.h5-list--bare                                 { background:transparent }
.h5-sub--label                                 { width:56px;flex-shrink:0 }
.ai-btn-share-tag                              { flex:1;font-weight:700 }
.h5-muted--noshrink                            { flex-shrink:0 }
.h5-btn--noshrink                              { flex-shrink:0 }
.ai-btn-nav-box                                { border-bottom:0;display:block }
.ai-btn-nav-foot                               { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px }
.ai-btn-nav-tag                                { font-size:12px;font-weight:900;color:var(--brand) }
.h5-section-title--tight                       { margin:0 0 8px }
.ai-act-pbar-txt                               { margin:0;font-size:13px;line-height:1.9;color:var(--text-sub);white-space:pre-wrap;word-break:break-word }
.ai-act-pbar-txt-reset                         { margin:0 }
.ai-act-pbar-tag                               { flex:1;font-size:14px }
.ai-act-checkin-box                            { display:flex;gap:10px }
.ai-btn-checkin-jump-box                       { height:72px }
.h5-btn--bold                                  { font-weight:800 }
.ai-sg-submit-box                              { height:8px }
.ai-act-gate-login-btn                         { margin-top:14px;font-weight:800 }
.ai-act-gate-login-btn-mt                      { margin-top:8px;color:var(--brand);border-color:#F3C6C9 }
.ai-act-gate-login-btn3                        { margin-top:8px;border:0;color:var(--text-muted) }
.ai-act-gate-login-box                         { height:8px }
.ai-act-gate-member-box                        { background:#FFFBEB;color:#92400E }
.ai-act-gate-member-btn                        { margin-top:14px;font-weight:800 }
.ai-act-gate-member-btn-mt                     { margin-top:8px;border:0;color:var(--text-muted) }
.ai-act-gate-member-box2                       { height:8px }
.h5-btn--ok                                    { background:#ECFDF5;border-color:#A7F3D0;color:#059669;font-weight:800 }
.h5-btn--ended                                 { background:#F4F1EE;border-color:#E7E2DC;color:#9A938E;font-weight:800 }
.h5-btn--live                                  { background:#10B981;border-color:#10B981;color:#fff;font-weight:800 }
.h5-btn--closed                                { background:#EDE9E4;border-color:#E2DCD5;color:#9A938E;font-weight:800 }
.ai-btn-signup-ttl                             { margin:0;font-size:16px;font-weight:900 }
.ai-btn-signup-txt                             { margin:6px 0 10px;font-size:11px;color:rgba(255,255,255,.85) }
.ai-btn-signup-box                             { display:flex;align-items:center;justify-content:center;gap:6px;color:#9A938E;font-size:12px }
.ai-btn-signup-box-row                         { display:flex;align-items:center;justify-content:center;gap:6px }
.ai-btn-signup-ttl2                            { font-size:15px;font-weight:900 }
.h5-badge--warn                                { background:#FFFBEB;color:#B45309;border:1px solid #FDE68A }
.ai-btn-signup-txt-center                      { margin:6px 0 0;text-align:center;font-size:10px;color:#9A938E }
.ai-btn-signup-txt3                            { margin:0 0 10px;text-align:center;font-size:10px;color:#9A938E }
.ai-ck-msg-lbl                                 { display:flex;align-items:center;gap:5px;cursor:pointer }
.ai-ck-auto-input                              { width:14px;height:14px;accent-color:#F59E0B }
.ai-ck-auto-tag                                { font-size:10px;color:#B45309 }
.ai-ck-auto-s-txt                              { margin:10px 0 0;text-align:center;font-size:9px;color:#9A938E }
.ai-ck-qr-tip-txt                              { margin:8px 0 0;text-align:center;font-size:9px;color:#B45309 }
.ai-ck-qr-tip-txt-xs                           { margin:0;font-size:10px;color:#9A938E }
.ai-ck-code-txt                                { margin:0;font-size:10px;font-weight:700;color:#F59E0B }
.ai-btn-show-txt                               { margin:10px 0 0;text-align:center;font-size:9px;color:#9A938E }

/* ---------- 慈善项目详情（charity-info.php） ---------- */
/* 信息行（与 activity-info.php / match-detail.php 的 .md-tr 同一定义；h5.css 里没有这个类） */
.ci-md-tr { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); }
.ci-md-tr:last-child { border-bottom:0; }

/* 签到卡片（与 activity-info.php:124-150 同一套样式，逐条照抄，只改前缀无关的语义） */
.act-ck-tab { flex:1; padding:8px 0; border:0; background:transparent; border-radius:10px; font-size:12px; font-weight:700;
              color:var(--text-sub); font-family:inherit; cursor:pointer; }
.act-ck-msg { margin-top:10px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px;
              padding:9px 11px; font-size:11px; line-height:1.6; color:#92400E; }
.act-qr-box { background:#fff; border:1px solid #F1EDE8; border-radius:16px; padding:10px;
              box-shadow:0 4px 14px rgba(0,0,0,.06); min-width:168px; min-height:168px;
              display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-muted); text-align:center; }
.act-ck-ok { background:linear-gradient(135deg,#10B981,#14B8A6); border-radius:var(--radius); padding:22px 16px;
             text-align:center; color:#fff; margin-top:14px; }
.act-ck-ok-ico { width:52px; height:52px; margin:0 auto 10px; border-radius:50%; border:2px solid rgba(255,255,255,.45);
                 background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:24px; }
.act-ck-ok-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.22);
                  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 14px; font-size:12px; font-weight:800; }
.act-ck-off { background:#F3F1EE; border-radius:var(--radius); padding:20px; text-align:center;
              margin-top:14px; font-size:13px; font-weight:700; color:var(--text-sub); }
.act-ck-gate { background:#FAF8F5; border:1px solid var(--border); border-radius:var(--radius);
               padding:16px; margin-top:14px; text-align:center; font-size:12px; line-height:1.8; color:var(--text-sub); }

/* 已报名提示条 */
.ci-signed { background:#ECFDF5; border:1px solid #A7F3D0; border-radius:12px; padding:11px 13px;
             font-size:13px; font-weight:700; color:#059669; margin-bottom:12px; }

/* 封面：无图时红渐变 + 爱心图标兜底（与 activity-info.php 同款） */
.act-cover { position:relative; height:200px; border-radius:var(--radius); overflow:hidden; margin-bottom:12px;
             background:linear-gradient(135deg,#B91C1C 0%,#C81623 50%,#DC2626 100%); }
.act-cover::after { content:''; position:absolute; inset:0;
                    background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 55%,rgba(0,0,0,.22)); }
.act-share { position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border:0; border-radius:50%;
             background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; justify-content:center; }

/* 名额进度条 */

/* 富文本正文基础样式 */

/* 非开放报名态（进行中 / 已结束） */
.ci-closed { background:#F3F1EE; border-radius:12px; padding:14px; text-align:center;
             font-size:14px; font-weight:800; color:var(--text-sub); }
.ci-btn-share-ttl                              { margin:0 0 10px;font-size:17px;font-weight:800;line-height:1.4 }
.ci-btn-share-tag                              { flex:1;font-weight:700 }
.ci-btn-share-box                              { flex-shrink:0;color:var(--brand);font-size:12px;font-weight:700;text-decoration:none }
.ci-btn-share-box2                             { border-bottom:0;display:block }
.ci-btn-share-foot                             { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px }
.ci-btn-share-tag2                             { font-size:12px;font-weight:900;color:var(--brand) }
.ci-pbar-txt                                   { margin:0;font-size:13px;line-height:1.9;color:var(--text-sub);white-space:pre-wrap;word-break:break-word }
.ci-pbar-txt-reset                             { margin:0 }
.ci-chk-root-btn                               { margin-top:10px }
.ci-chk-root-ttl                               { margin:0;font-size:16px;font-weight:900 }
.ci-chk-root-txt                               { margin:6px 0 10px;font-size:11px;color:rgba(255,255,255,.85) }
.ci-chk-root-box                               { display:flex;align-items:center;justify-content:center;gap:6px;color:#9A938E;font-size:12px }
.ci-chk-root-box-row                           { display:flex;align-items:center;justify-content:center;gap:6px }
.ci-chk-root-ttl2                              { font-size:15px;font-weight:900 }
.ci-chk-root-txt-center                        { margin:6px 0 0;text-align:center;font-size:10px;color:#9A938E }
.ci-chk-root-txt3                              { margin:0 0 10px;text-align:center;font-size:10px;color:#9A938E }
.ci-ck-msg-lbl                                 { display:flex;align-items:center;gap:5px;cursor:pointer }
.ci-ck-auto-input                              { width:14px;height:14px;accent-color:#F59E0B }
.ci-ck-auto-tag                                { font-size:10px;color:#B45309 }
.ci-ck-auto-s-txt                              { margin:10px 0 0;text-align:center;font-size:9px;color:#9A938E }
.ci-ck-qr-tip-txt                              { margin:8px 0 0;text-align:center;font-size:9px;color:#B45309 }
.ci-ck-qr-tip-txt-xs                           { margin:0;font-size:10px;color:#9A938E }
.ci-ck-code-txt                                { margin:0;font-size:10px;font-weight:700;color:#F59E0B }
.ci-btn-show-txt                               { margin:10px 0 0;text-align:center;font-size:9px;color:#9A938E }

/* ---------- 资讯/文章详情（article.php） ---------- */
.h5-cmt { padding: 4px 20px 20px; border-top: 1px solid #F3F4F6; }
.h5-cmt-head { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.h5-cmt-bar { width: 4px; height: 14px; border-radius: 999px; background: linear-gradient(180deg, #C81623, #DC2626); }
.h5-cmt-t { margin: 0; font-size: 14px; font-weight: 900; color: #111827; }
.h5-cmt-num { color: #9CA3AF; font-weight: 700; }
.h5-cmt-list { display: flex; flex-direction: column; gap: 12px; }
.h5-cmt-state { margin: 0; padding: 16px 0; text-align: center; font-size: 12px; color: #9CA3AF; }
.h5-cmt-retry { border: 0; background: transparent; padding: 0 2px; color: #C81623; font-size: 12px; font-weight: 700; }
.h5-cmt-item { display: flex; gap: 10px; }
.h5-cmt-avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex-shrink: 0; display: block; }
.h5-cmt-avatar--ph { display: flex; align-items: center; justify-content: center; background: #FEF2F2; color: #C81623; font-size: 11px; font-weight: 900; }
.h5-cmt-main { flex: 1; min-width: 0; }
.h5-cmt-row { display: flex; align-items: center; gap: 8px; }
.h5-cmt-name { font-size: 11px; font-weight: 800; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-cmt-time { flex-shrink: 0; font-size: 10px; color: #9CA3AF; }
.h5-cmt-text { margin: 2px 0 0; font-size: 13px; line-height: 1.65; color: #374151; white-space: pre-wrap; word-break: break-word; }
.h5-cmt-more { display: block; width: 100%; margin: 12px 0 0; padding: 10px; border: 1px solid #F3F4F6; border-radius: 12px; background: #FAFAFA; color: #C81623; font-size: 12px; font-weight: 800; }
.h5-cmt-more[hidden] { display: none; }
.h5-cmt-more[disabled] { opacity: .6; }
.h5-cmt-end { margin: 12px 0 0; text-align: center; font-size: 11px; color: #D1D5DB; }
.h5-cmt-end[hidden] { display: none; }
.h5-cmt-btn-off { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 12px; background: #F9FAFB; color: #D1D5DB; font-size: 12px; font-weight: 800; }
.h5-cmt-btn-off svg { width: 16px; height: 16px; display: block; }
.h5-cmt-mask { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.h5-cmt-mask[hidden] { display: none; }
.h5-cmt-mask-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.h5-cmt-sheet { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; background: #fff; border-radius: 16px 16px 0 0; }
.h5-cmt-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.h5-cmt-sheet-t { margin: 0; font-size: 14px; font-weight: 800; color: #1F2937; }
.h5-cmt-x { border: 0; background: transparent; padding: 4px 8px; font-size: 20px; line-height: 1; color: #9CA3AF; }
.h5-cmt-input { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 12px; font-family: inherit; font-size: 14px; color: #374151; outline: none; resize: none; }
.h5-cmt-input:focus { border-color: #C81623; }
.h5-cmt-len { margin: 6px 2px 0; text-align: right; font-size: 10px; color: #9CA3AF; }
.h5-cmt-submit { display: block; width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #C81623, #DC2626); color: #fff; font-size: 14px; font-weight: 800; }
.h5-cmt-submit[disabled] { opacity: .5; }

/* ---------- 我的捐赠（my-donations.php） ---------- */
.md-stat { background:linear-gradient(90deg,#fef2f2,#fff1f2); border:1px solid #fee2e2; border-radius:14px;
           padding:14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.md-stat-t { font-size:10px; font-weight:700; color:#f87171; }
.md-stat-v { font-size:24px; font-weight:800; color:#ef4444; margin-top:2px; }
.md-stat-ico { width:44px; height:44px; border-radius:50%; background:#fee2e2; display:flex;
               align-items:center; justify-content:center; font-size:20px; }
.md-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; }
.md-crown { display:inline-flex; align-items:center; gap:2px; font-size:9px; color:#d97706; }
.md-mask { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:flex;
           align-items:flex-end; justify-content:center; }
.md-sheet { background:#fff; border-radius:20px 20px 0 0; width:100%; max-width:640px;
            max-height:90vh; overflow-y:auto; padding:0 0 calc(16px + env(safe-area-inset-bottom,0px)); }
.md-sheet-head { position:sticky; top:0; background:#fff; display:flex; align-items:center;
                 justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid #f1f2f4; }
.md-sheet-title { font-size:16px; font-weight:800; margin:0; }
.md-x { width:30px; height:30px; border-radius:50%; border:0; background:#f1f2f4; color:#6b7280;
        font-size:15px; line-height:1; cursor:pointer; }
.md-row { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:#4b5563; padding:3px 0; }
.md-row span:first-child { color:#9ca3af; flex-shrink:0; }
.md-row span:last-child { text-align:right; word-break:break-all; }
.md-box { background:#f9fafb; border-radius:12px; padding:10px 12px; margin-top:12px; }
.md-cert { background:linear-gradient(135deg,#7f1d1d,#b91c1c,#dc2626); border-radius:16px; padding:5px;
           margin-top:14px; position:relative; }
.md-cert-inner { border:1px solid rgba(252,211,77,.6); border-radius:12px; padding:14px; text-align:center; color:#fff; }
.md-cert-title { font-size:17px; font-weight:800; color:#fde68a; letter-spacing:.28em; margin:2px 0 0; }
.md-cert-en { font-size:9px; color:rgba(255,255,255,.6); letter-spacing:.18em; }
.md-cert-name { font-size:19px; font-weight:800; color:#fde68a; margin:8px 0 0; }
.md-cert-foot { display:flex; align-items:flex-end; justify-content:space-between; margin-top:12px; }
.md-cert-no { font-size:9px; font-family:Consolas,Menlo,monospace; color:rgba(255,255,255,.8); }
.md-cert-qr { width:56px; height:56px; background:#fff; border-radius:6px; padding:2px; }
.md-acts { display:flex; gap:10px; margin-top:14px; }
.md-btn { flex:1; height:44px; border-radius:12px; border:1px solid #e8eaed; background:#fff;
          color:#4b5563; font-size:14px; font-weight:700; cursor:pointer; }
.md-btn-primary { background:#c62828; border-color:#c62828; color:#fff; }
.md-btn-gold { background:linear-gradient(90deg,#fbbf24,#f59e0b); border:0; color:#7c2d12; }
.md-btn[disabled] { opacity:.6; }
.h5-ocard--clickable                           { cursor:pointer }
.mdn-md-root-box                               { text-align:right;flex-shrink:0 }
.mdn-md-root-box2                              { justify-content:flex-end;margin-top:4px }
.h5-ocard-foot--between                        { justify-content:space-between;align-items:center }
.mdn-md-close-box                              { padding:14px 16px 0 }
.mdn-md-close-foot                             { display:flex;align-items:center;justify-content:space-between }
.mdn-md-close-tag                              { font-size:22px;font-weight:900;color:#dc2626 }
.mdn-md-close-tag2                             { font-family:Consolas,Menlo,monospace }
.mdn-md-close-box2                             { border-top:1px solid #eef0f3;margin-top:4px;padding-top:6px }
.mdn-md-close-box-big                          { font-size:22px }
.mdn-md-close-txt                              { font-size:11px;color:rgba(255,255,255,.85);margin:10px 0 0 }
.mdn-md-close-txt-xs                           { font-size:11px;color:rgba(255,255,255,.85);margin:8px 0 0 }
.mdn-md-close-txt2                             { font-size:13px;font-weight:700;color:#fde68a;margin:4px 0 0 }
.mdn-md-close-txt3                             { font-size:10px;color:rgba(255,255,255,.7);margin:8px 0 0;line-height:1.6 }
.mdn-md-close-box3                             { text-align:left }
.mdn-md-close-box4                             { font-size:8px;color:rgba(255,255,255,.6) }
.mdn-md-qr-ph-box                              { display:flex;align-items:center;justify-content:center;' + 'font-size:8px;color:#9ca3af }

/* ---------- 物资领用（materials.php） ---------- */
/* 顶部 Tab（物资目录 / 借出记录）：纯 SSR 链接，切换即重新渲染对应内容块 */
.mt2-tabs { display:flex; background:#F4F1EE; border-radius:12px; padding:3px; margin-bottom:10px; }
.mt2-tab { flex:1; text-align:center; padding:9px 0; border-radius:10px; font-size:13px; font-weight:700;
           color:var(--text-sub); text-decoration:none; }
.mt2-tab.is-on { background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(0,0,0,.06); }

/* 行内动作按钮（领用 / 报损） */
.mt2-acts { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:8px; }
.mt2-btn { border:0; border-radius:8px; padding:4px 10px; font-size:10px; font-weight:700; color:#fff;
           font-family:inherit; cursor:pointer; white-space:nowrap; }
.mt2-btn-claim { background:#F97316; }
.mt2-btn-damage { background:#F3F1EE; color:#9A938E; }
.mt2-btn[disabled] { opacity:.55; }

/* 借出记录行 */
.mt2-brow { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); }
.mt2-brow:last-child { border-bottom:0; }
.mt2-brow-main { flex:1; min-width:0; }
.mt2-brow-t { margin:0; font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.mt2-brow-t .h5-mt-code { flex:0 1 auto; max-width:62%; }
.mt2-brow-d { margin:4px 0 0; font-size:11px; line-height:1.75; color:var(--text-muted); word-break:break-all; }
.mt2-tag { flex-shrink:0; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.mt2-tag.is-active { background:#FDF3E3; color:#D97706; }
.mt2-tag.is-done { background:#E7F8EE; color:#16A34A; }
.mt2-tag.is-plain { background:#F1F2F4; color:var(--text-sub); }
.mt2-sum { font-size:11px; color:var(--text-muted); margin:0 0 6px; }

/* 底部弹层（领用 / 报损） */
.mt2-mask { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); display:flex;
            align-items:flex-end; justify-content:center; }
.mt2-mask[hidden] { display:none; }
.mt2-sheet { width:100%; max-width:var(--app-max); background:#fff; border-radius:20px 20px 0 0;
             max-height:88%; overflow:auto; padding:0 18px calc(18px + env(safe-area-inset-bottom,0px)); }
.mt2-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:16px 0 10px; }
.mt2-sheet-title { margin:0; font-size:16px; font-weight:800; }
.mt2-x { width:30px; height:30px; border:0; border-radius:50%; background:#F3F1EE; color:var(--text-muted);
         font-size:14px; line-height:1; flex-shrink:0; }
.mt2-note { background:#FFFBEB; border:1px solid #FDE68A; border-radius:12px; padding:10px 12px;
            font-size:12px; line-height:1.75; color:#92400E; margin-bottom:12px; }
.mt2-note.is-danger { background:#FEF2F2; border-color:#FECACA; color:#B91C1C; }
.mt2-note b { display:block; font-size:13px; margin-bottom:2px; }
.mt2-sheet-btns { display:flex; gap:10px; margin-top:14px; }
.mt2-sheet-btns .h5-btn { flex:1; }
.mt2-mt-me-box                                 { padding:12px 14px 6px }
.mt2-mt-me-box-row                             { display:flex;gap:10px;padding-bottom:6px }
.mt2-mt-me-box3                                { display:flex;gap:8px;align-items:center }
.h5-btn--lg                                    { height:44px;border-radius:10px }
.h5-mt-head--top                               { display:flex;align-items:flex-start }
.mt2-m-list-foot                               { margin-left:auto }
.mt2-m-list-tag                                { flex:1 }
.h5-mt-meta--end                               { margin-left:auto }

/* ---------- 电子票（eticket.php） ---------- */
/* 票券风卡片（旧站 mobile.eticket.tsx:163-255）：渐变票面 + 齿孔分隔 + 底部四格 */
.et-ticket {
    margin: 0 0 12px; background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(153, 27, 27, .08);
}
.et-head { padding: 16px; color: #fff; background: linear-gradient(135deg, #DC2626 0%, #EF4444 55%, #FB7185 100%); }
.et-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.et-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); white-space: nowrap; }
.et-chip-ok { background: #34D399; }
.et-chip-gray { background: rgba(255, 255, 255, .3); }
.et-teams { display: flex; align-items: flex-start; justify-content: space-between; }
.et-team { flex: 1; min-width: 0; text-align: center; }
.et-team-logo {
    width: 48px; height: 48px; margin: 0 auto 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .22); overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900;
}
.et-team-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.et-team-name { font-size: 11px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.et-vs { flex-shrink: 0; padding: 0 6px; margin-top: 12px; font-size: 18px; font-weight: 900; font-style: italic; color: rgba(255, 255, 255, .88); }
.et-title { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 800; }
.et-meta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 10px; color: rgba(255, 255, 255, .9); }
.et-valid { margin: 8px 0 0; text-align: center; font-size: 10px; color: rgba(255, 255, 255, .9); }
.et-valid-bad { color: #FDE68A; font-weight: 700; }
.et-body { padding: 14px 16px; }
.et-cred { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.et-cred-k { font-size: 10px; color: var(--text-muted); }
.et-cred-v {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: 2px; color: var(--text); cursor: pointer;
}
.et-cred-v small { font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.et-qrwrap { margin-top: 10px; padding: 14px; border-radius: 12px; background: #F7F7F8; display: flex; flex-direction: column; align-items: center; }
.et-qrbox {
    width: 176px; height: 176px; background: #fff; border: 2px solid var(--border); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.et-qrbox canvas { display: block; }
.et-qrph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #C9C2BB; font-size: 10px; text-align: center; }
.et-qriko { font-size: 34px; line-height: 1; }
.et-qrtip { margin: 8px 0 0; font-size: 10px; color: var(--text-muted); text-align: center; }
.et-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FEF3C7; }
.et-tip p { margin: 0; font-size: 11px; line-height: 1.6; color: #B45309; }
.et-perf { position: relative; height: 12px; background: #fff; }
.et-perf i { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bg); }
.et-perf i:first-child { left: -8px; }
.et-perf i:last-child { right: -8px; }
.et-perf span { position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dashed var(--border); }
.et-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 16px; }
.et-grid-k { margin: 0 0 2px; font-size: 10px; color: var(--text-muted); }
.et-grid-v { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); word-break: break-word; }
.et-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.et-row:last-child { border-bottom: 0; }
.et-row-k { color: var(--text-sub); flex-shrink: 0; }
.et-row-v { font-weight: 700; text-align: right; word-break: break-word; }
.et-fee { display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding: 4px 0; color: var(--text-sub); }
.et-fee b { color: var(--text); }
.et-total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.et-total-k { font-size: 14px; font-weight: 800; }
.et-total-v { font-size: 18px; font-weight: 900; color: var(--brand); }
.et-note { margin: 0 0 12px; padding: 12px; border-radius: 14px; background: #FFFBEB; border: 1px solid #FEF3C7; }
.et-note-t { margin: 0 0 6px; font-size: 11px; font-weight: 800; color: #92400E; }
.et-note ul { margin: 0; padding-left: 16px; font-size: 11px; line-height: 1.8; color: #B45309; }
.et-fam { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.et-fam-t { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--text-sub); }
.et-fam-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.et-fam-id { color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.et-back { margin-top: 16px; }
.et-qr-head                                    { text-align:center;padding:0 0 20px }
.et-qr-head-center                             { text-align:center }

/* ---------- 设置（settings.php） ---------- */
.h5-mask{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:24px}
.h5-mpanel{background:#fff;border-radius:16px;width:100%;max-width:360px;max-height:86vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.h5-mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f2f2f2}
.h5-mhead h3{margin:0;font-size:14px;font-weight:800;color:#1f2937}
.h5-mx{border:0;background:transparent;font-size:16px;color:#9ca3af;cursor:pointer;line-height:1}
.h5-mbody{padding:16px 18px 18px}
.h5-drop{border:2px dashed #e5e7eb;border-radius:12px;background:#fafafa;color:#6b7280;
  padding:20px 12px;text-align:center;font-size:13px;font-weight:700;cursor:pointer}
.h5-drop.is-ok{border-color:#a7f3d0;background:#ecfdf5;color:#059669}
.h5-drop.is-busy{opacity:.6}
.h5-ocrbox{margin-top:12px;padding:10px 12px;border-radius:12px;background:#ecfdf5;border:1px solid #d1fae5}
.h5-ocrbox-t{margin:0 0 6px;font-size:10px;font-weight:800;color:#059669}
.h5-ocrbox-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:2}
.h5-ocrbox-row span{color:#9ca3af}
.h5-ocrbox-row b{color:#1f2937}
.h5-cell-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:999px;background:#f3f4f6;color:#6b7280}
.h5-cell-badge.is-ok{background:#ecfdf5;color:#059669}
.h5-input--readonly                            { background:#f7f7f7;color:#9a9a9a }
.set-ph-new-box                                { display:flex;gap:8px }
.h5-btn--send                                  { height:44px;border-radius:10px;flex-shrink:0;min-width:104px }
.set-ph-save-head                              { text-align:center }
.set-id-img-ico                                { margin-top:8px;max-width:100%;max-height:128px;object-fit:contain;border-radius:10px;border:1px solid #eee }
.set-pw-save-head                              { text-align:center }
.set-pw-save-box                               { display:flex;gap:10px }
.set-pw-save-btn                               { flex:1;height:46px;border-radius:12px }

/* §H5 按页专属段 结束 */