/* ==========================================================================
   H5 视觉基础层（公众号内嵌页统一入口）
   --------------------------------------------------------------------------
   为什么要这一层：
   改造前 19 个 H5 页各写一套 <style>，同一件事（重置、字体栈、容器宽度、
   卡片圆角、按钮、空态）被抄了 19 遍，且实际沉淀出三套互不兼容的视觉：
     · 深蓝渐变（会员中心、客服）
     · 橙红渐变（游戏中心、签到、抽奖）
     · 浅灰卡片（卡券、充值、投票、表单）
   结果是"加一个新玩法就要重新画一遍界面"，换个主色要改十几个文件。

   这层的定位是**可覆盖的主题变量 + 通用组件**，不强制统一外观：
     · 页面用 class="h5 h5-dark" 或 "h5 h5-light" 声明底色风格；
     · 想换主色，只改 style="--h5-accent:#ff4d6d" 一个变量；
     · 组件（卡片/按钮/标签/空态/授权引导）直接复用，不用重写。
   存量页面按"先引用、后瘦身"迁移，引用时已有内联样式仍然后定义优先，
   所以迁移第一步不改任何像素。
   ========================================================================== */

:root {
    /* ---- 底色与文字 ---- */
    --h5-bg: linear-gradient(165deg, #4b6cb7 0%, #2a3f6e 45%, #182848 100%);
    --h5-bg-light: #f3f4f8;
    --h5-fg: #ffffff;
    --h5-fg-light: #222222;

    /* ---- 表面（卡片、输入框） ---- */
    --h5-card: rgba(255, 255, 255, .13);
    --h5-card-light: #ffffff;
    --h5-line: rgba(255, 255, 255, .09);
    --h5-line-light: #e8e8ee;

    /* ---- 强调色与语义色 ---- */
    --h5-accent: #07c160;
    --h5-accent-2: #3c3489;
    --h5-ok: #7ee787;
    --h5-warn: #ffc107;
    --h5-danger: #ff5722;

    /* ---- 形状与节奏 ---- */
    --h5-radius: 14px;
    --h5-radius-sm: 8px;
    --h5-gap: 13px;
    --h5-max-width: 480px;
    --h5-pad: 16px 14px 46px;

    /* ---- 字号 ---- */
    --h5-fs-title: 17px;
    --h5-fs-body: 13px;
    --h5-fs-sub: 12px;
    --h5-fs-mini: 10px;

    --h5-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

/* ---- 重置（与存量页面逐字一致，替换时不会改变任何像素） ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* 只清排版元素的默认间距，不用 * 通配：
   `body.h5 *` 的优先级高于 `.h5-card`，会把组件自己的 padding 一起清掉 */
body.h5 h1, body.h5 h2, body.h5 h3, body.h5 h4, body.h5 h5, body.h5 h6,
body.h5 p, body.h5 ul, body.h5 ol, body.h5 dl, body.h5 figure {
    margin: 0;
    padding: 0;
}

body.h5 img {
    max-width: 100%;
    display: block;
}

body.h5 {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    font-family: var(--h5-font);
    font-size: var(--h5-fs-body);
    line-height: 1.6;
}

/* ---- 两套底色 ---- */
body.h5-dark {
    background: var(--h5-bg);
    color: var(--h5-fg);
    min-height: 100vh;
}

body.h5-light {
    background: var(--h5-bg-light);
    color: var(--h5-fg-light);
    padding: var(--h5-pad);
}

/* ---- 容器 ---- */
.h5-wrap {
    max-width: var(--h5-max-width);
    margin: 0 auto;
    padding: var(--h5-pad);
}

/* ---- 卡片 ---- */
.h5-card {
    border-radius: var(--h5-radius);
    padding: 14px;
    margin-top: var(--h5-gap);
}

.h5-dark .h5-card {
    background: var(--h5-card);
}

.h5-light .h5-card {
    background: var(--h5-card-light);
    border: 1px solid var(--h5-line-light);
}

/* ---- 行（列表项） ---- */
.h5-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
}

.h5-dark .h5-row {
    border-bottom: 1px solid var(--h5-line);
}

.h5-light .h5-row {
    border-bottom: 1px solid var(--h5-line-light);
}

.h5-row:last-child {
    border-bottom: 0;
}

/* ---- 按钮 ---- */
.h5-btn {
    display: inline-block;
    border: 0;
    border-radius: 24px;
    padding: 11px 30px;
    font-size: 14px;
    font-family: inherit;
    background: var(--h5-accent);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}

.h5-btn:active {
    opacity: .82;
}

.h5-btn[disabled], .h5-btn.is-off {
    background: #bbbbbb;
    cursor: not-allowed;
}

.h5-btn--ghost {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

/* ---- 标签 ---- */
.h5-tag {
    display: inline-block;
    font-size: var(--h5-fs-mini);
    padding: 2px 7px;
    border-radius: 9px;
    background: rgba(128, 128, 128, .18);
}

.h5-tag--ok {
    background: rgba(126, 231, 135, .24);
    color: #2e7d32;
}

.h5-tag--wait {
    background: rgba(255, 193, 7, .24);
    color: #8a6d00;
}

.h5-tag--off {
    background: rgba(255, 87, 34, .18);
    color: #c2410c;
}

/* ---- 空态 ---- */
.h5-empty {
    text-align: center;
    font-size: var(--h5-fs-sub);
    opacity: .6;
    padding: 22px 0;
}

/* ---- 授权引导（所有需要 openid 的页面共用） ---- */
.h5-gate {
    text-align: center;
    padding: 70px 22px;
}

.h5-gate__ico {
    font-size: 52px;
    margin-bottom: 16px;
}

.h5-gate__title {
    font-size: var(--h5-fs-title);
    font-weight: 600;
    margin: 0 0 10px;
}

.h5-gate__desc {
    font-size: var(--h5-fs-body);
    opacity: .75;
    line-height: 1.8;
    margin: 0;
}

.h5-gate__hint {
    margin-top: 22px;
    font-size: 11px;
    opacity: .5;
    line-height: 1.7;
}

/* ---- 页头 ---- */
.h5-head {
    display: flex;
    align-items: center;
    padding: 6px 2px 18px;
}

.h5-head__title {
    font-size: 18px;
    font-weight: 600;
}

.h5-head__action {
    margin-left: auto;
    font-size: var(--h5-fs-sub);
    opacity: .78;
    text-decoration: none;
    color: inherit;
}

/* ---- 底部提示 ---- */
.h5-foot {
    text-align: center;
    font-size: var(--h5-fs-mini);
    opacity: .45;
    margin-top: 22px;
    line-height: 1.8;
}

/* ---- 大数字（积分、余额） ---- */
.h5-num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.h5-num--lg {
    font-size: 46px;
}