/* 这里是UI式设计设置页面，白色底+一丢丢蓝色渐变 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 配置颜色 */
:root {
  --hui:#8497ad;          /* 次要文字 */
  --wen:#233248;          /* 主要文字 */
  --jin2:#2f7df0;         /* 主蓝 */
  --lan-shen:#1f6ae0;
  --lv:#18a058;
  --hong:#ef4444;
  --bg:#eef4fb;           /* 页面底色，浅蓝灰，不刺眼 */
  --ka:#ffffff;           /* 卡片表面 */
  --ka2:#f4f8fe;          /* 次一级的表面 */
  --bian:#dbe6f4;         /* 浅蓝边框 */
  --jianbian:linear-gradient(135deg,#5aa8f9 0%,#2f7df0 100%);
  --ying:0 2px 12px rgba(47,125,240,.08);

  /* R角，全站都吃这两个数，别各处自己写 */
  --yuan:16px;            /* 大卡片 */
  --yuan-xiao:11px;       /* 输入框、按钮、小卡 */

  /* 金色系，会员卡从蓝往金过渡要用 */
  --jin:#d4a93a;
  --jin-an:#8a6a20;       /* 暗金，钻石卡上的点缀字色 */
  --jin-qian:#f0d28c;     /* 浅金，黑卡上的字 */

  /* 五个会员等级的卡面，会员卡只许吃这几个token，不准自己另配 */
  --dj0:#ffffff;                                                                     /* 普通：纯白 */
  --dj1:linear-gradient(132deg,#2f7df0 0%,#5aa8f9 36%,#d8b45a 76%,#c49b2e 100%);     /* 黄金：蓝渐变金 */
  --dj2:linear-gradient(132deg,#ffffff 0%,#e6f1ff 46%,#a6cbff 100%);                 /* 钻石：白渐变蓝，卡上有高光 */
  --dj3:repeating-linear-gradient(118deg,#2f7df0 0 20px,#5599f4 20px 34px,#d8b45a 34px 44px,#c49b2e 44px 58px,#3f86f2 58px 78px); /* 白金：蓝金条纹干涉 */
  --dj4:linear-gradient(132deg,#070709 0%,#1c1c21 52%,#6e551f 100%);                 /* 黑卡：黑渐变金 */
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 底上铺两团淡蓝淡金，液态玻璃压上去才透得出层次 */
  background:
    radial-gradient(1100px 480px at -8% -8%, rgba(90,168,249,.20), transparent 60%),
    radial-gradient(900px 440px at 108% 4%, rgba(212,169,58,.20), transparent 58%),
    linear-gradient(180deg,#eef4fb 0%,#e7effa 100%);
  background-attachment: fixed;
  color: var(--wen);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* 手机样式 */
.souji { max-width: 480px; margin: 0 auto; padding: 20px 16px 80px; }

.logo_qu { text-align: center; padding: 26px 0 18px; }
.logo_qu .tubiao {
  width: 56px; height: 56px; margin: 0 auto 10px;
  background: var(--jianbian); color: #fff; font-size: 28px; line-height: 56px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(47,125,240,.28);
}
.logo_qu h1 { font-size: 20px; letter-spacing: 2px; color: var(--wen); }
.logo_qu p { color: var(--hui); font-size: 13px; margin-top: 4px; }

/* 卡片：液态玻璃，半透白+模糊+顶部一道高光，R角 */
.heka {
  position: relative;
  background: rgba(255,255,255,.70);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--yuan);
  box-shadow: 0 8px 26px rgba(47,125,240,.09), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 18px;
  margin-bottom: 14px;
}
.heka_h3 { font-size: 14px; color:#5a6b80; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }

/* 表单 */
.biao_dan_xiang { margin-bottom: 14px; }
.biao_dan_xiang label { display: block; font-size: 13px; color: #6b7d93; margin-bottom: 6px; }

.srk {
  width: 100%; padding: 12px 14px;
  border-radius: var(--yuan-xiao); border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--wen); font-size: 15px; outline: none;
  box-shadow: inset 0 1px 2px rgba(47,125,240,.05);
}
.srk:focus { border-color: var(--jin2); background: #fff; box-shadow: 0 0 0 3px rgba(47,125,240,.1); }
.srk:disabled { opacity: .45; }
.srk::placeholder { color: #aab8c9; }
textarea.srk { resize: none; }

.srk_zu { position: relative; }
.srk_zu .anniu_xiao {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  padding: 7px 12px; font-size: 13px;
}

/* 主按钮，蓝色渐变就用在这 */
.anniu {
  display: block; width: 100%; padding: 13px;
  border-radius: var(--yuan-xiao); border: 0; cursor: pointer;
  background: var(--jianbian); background-size: 140% 140%;
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 16px rgba(47,125,240,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.anniu:active { filter: brightness(.95); box-shadow: 0 2px 6px rgba(47,125,240,.2); }
.anniu[disabled] { opacity: .45; box-shadow: none; }

.anniu_hui { background: #fff; color: #3d5168; border: 1px solid #d3e0f2; box-shadow: none; font-weight: 500; }
.anniu_hui:active { background: var(--ka2); }
.anniu_hong { background: linear-gradient(135deg,#f76a6a,#e83838); }
.anniu_lv { background: linear-gradient(135deg,#34c075,#13a052); box-shadow: 0 4px 12px rgba(24,160,88,.25); }
.anniu_lan { background: var(--jianbian); }

.anniu_xiao {
  display: inline-block; padding: 7px 14px; border: 0; border-radius: var(--yuan-xiao);
  background: var(--jianbian); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.anniu_xiao.hui { background: #fff; color: #3d5168; border: 1px solid #d3e0f2; }
.anniu_xiao.hong { background: var(--hong); }

/* 底下那行小字链接，别动 */
.qita_lj { text-align: center; color: var(--hui); font-size: 13px; margin-top: 14px; }
.qita_lj a { color: var(--jin2); }
.qita_lj span { margin: 0 8px; opacity: .4; }

/* 登录页的切换标签，外面一圈R角，切换块裁在里面 */
.qie_kuang { border-radius: var(--yuan-xiao); overflow: hidden; }
.qie_an { background: #fff; }
.qie_xz { background: var(--jianbian) !important; color: #fff !important; font-weight: 700; }

/* 提示条 */
.tishi {
  padding: 11px 14px; margin-bottom: 12px;
  font-size: 14px; border-left: 3px solid;
  border-radius: var(--yuan-xiao);
}
.tishi-chenggong { background: #e9f8f0; border-left-color: var(--lv); color: #157a44; }
.tishi-cuowu { background: #fdeeee; border-left-color: var(--hong); color: #c63030; }
.tishi-tishi { background: #e9f2fe; border-left-color: var(--jin2); color: #2266c4; }

/* 余额那块，蓝色渐变的玻璃头牌 */
.yue_qia {
  background: var(--jianbian);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--yuan);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(47,125,240,.28), inset 0 1px 0 rgba(255,255,255,.35);
  padding: 22px;
  color: #fff;
}
.yue_qia .yue_biaoqian { color: rgba(255,255,255,.9); font-size: 13px; }
.yue_qia .yue_shuzi { font-size: 36px; font-weight: 800; color: #fff; margin: 6px 0 2px; }
.yue_qia .yue_shuzi small { font-size: 16px; font-weight: 400; color: rgba(255,255,255,.8); margin-right: 4px; }
.yue_qia .yue_dibu { color: rgba(255,255,255,.85); font-size: 13px; display: flex; justify-content: space-between; }
.yue_qia .yue_dibu a { color: #fff; }

/* 首页会员卡，R角银行卡片，卡面按会员等级换肤，点整张卡跳我的 */
.huiyuanka {
  position: relative;
  display: block; text-decoration: none; color: #fff;
  background: var(--jianbian);
  border-radius: var(--yuan);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 10px 26px rgba(47,125,240,.28), inset 0 1px 0 rgba(255,255,255,.35);
  padding: 18px; margin-bottom: 12px;
}
.huiyuanka:active { filter: brightness(.96); }
/* 卡面装饰层都垫在内容下面 */
.huiyuanka::before, .huiyuanka::after { content: ''; position: absolute; pointer-events: none; }
.hyk_shang, .hyk_xia { position: relative; z-index: 1; }
.hyk_shang { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hyk_zuo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hyk_touxiang {
  width: 44px; height: 44px; flex-shrink: 0; overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
}
.hyk_touxiang img { width: 100%; height: 100%; object-fit: cover; }
.hyk_moren { font-size: 20px; color: rgba(255,255,255,.9); }
.hyk_mingzi {
  font-size: 16px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hyk_dengji_biao {
  flex-shrink: 0; font-size: 12px; color: #fff; padding: 3px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.6);
}
.hyk_xia { display: flex; margin-top: 18px; }
.hyk_yu { flex: 1; min-width: 0; }
.hyk_zhe { flex: 1; min-width: 0; text-align: right; }
.hyk_xiaozi { font-size: 12px; color: rgba(255,255,255,.85); }
.hyk_shuzi { font-size: 26px; font-weight: 800; color: #fff; margin-top: 2px; }
.hyk_shuzi small { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.85); margin-right: 2px; }
.hyk_zhekou { font-size: 20px; font-weight: 800; color: #fff; margin-top: 2px; }

/* ===== 普通会员：纯白卡，没有渐变，字用深色 ===== */
.hyk_dj0 {
  background: var(--dj0);
  border-color: #e4edf8;
  box-shadow: 0 10px 24px rgba(30,60,110,.10), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--wen);
}
.hyk_dj0 .hyk_mingzi, .hyk_dj0 .hyk_shuzi, .hyk_dj0 .hyk_zhekou { color: var(--wen); }
.hyk_dj0 .hyk_xiaozi, .hyk_dj0 .hyk_shuzi small { color: var(--hui); }
.hyk_dj0 .hyk_dengji_biao { color: var(--hui); background: rgba(47,125,240,.07); border-color: #d8e6fa; }
.hyk_dj0 .hyk_touxiang { background: #f2f7ff; border-color: #dbe7f8; }
.hyk_dj0 .hyk_moren { color: var(--hui); }

/* ===== 黄金会员：蓝色渐变金色，白字 ===== */
.hyk_dj1 {
  background: var(--dj1);
  box-shadow: 0 12px 28px rgba(154,123,46,.30), inset 0 1px 0 rgba(255,255,255,.40);
}
.hyk_dj1::before {
  /* 卡面一层淡淡的金光，斜着扫过去 */
  inset: 0;
  background: radial-gradient(120% 90% at 85% -20%, rgba(255,240,200,.5), transparent 55%);
}

/* ===== 钻石会员：白渐变蓝+一道高光，字是深色配暗金 ===== */
.hyk_dj2 {
  background: var(--dj2);
  color: #1f3c5c;
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(80,130,200,.28), inset 0 1px 0 #fff;
}
.hyk_dj2 .hyk_mingzi, .hyk_dj2 .hyk_shuzi, .hyk_dj2 .hyk_zhekou { color: #1f3c5c; }
.hyk_dj2 .hyk_xiaozi, .hyk_dj2 .hyk_shuzi small { color: #5d7596; }
.hyk_dj2 .hyk_zhekou { color: var(--jin-an); }
.hyk_dj2 .hyk_dengji_biao {
  color: var(--jin-an); background: rgba(212,169,58,.14);
  border-color: rgba(184,146,46,.45);
}
.hyk_dj2 .hyk_touxiang { background: rgba(255,255,255,.65); border-color: rgba(154,170,200,.6); }
.hyk_dj2 .hyk_moren { color: #7f93ad; }
.hyk_dj2::before {
  /* 玻璃高光斜条 */
  top: -70%; left: -25%; width: 55%; height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg);
}

/* ===== 白金会员：蓝金条纹干涉，白字，再来一道柔光 ===== */
.hyk_dj3 {
  background: var(--dj3);
  box-shadow: 0 12px 28px rgba(70,120,210,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.hyk_dj3::before {
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(255,240,200,.28) 62%, rgba(255,255,255,0) 100%);
}
.hyk_dj3 .hyk_dengji_biao {
  color: #fff6dd; background: rgba(212,169,58,.35); border-color: rgba(255,232,170,.65);
}

/* ===== 黑卡：黑渐变金，金字，卡边一圈毛玻璃金边 ===== */
.hyk_dj4 {
  background: var(--dj4);
  color: var(--jin-qian);
  border-color: rgba(232,200,116,.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(232,200,116,.4),
    inset 0 0 22px rgba(232,200,116,.12);
}
.hyk_dj4 .hyk_mingzi, .hyk_dj4 .hyk_shuzi, .hyk_dj4 .hyk_zhekou { color: var(--jin-qian); }
.hyk_dj4 .hyk_xiaozi, .hyk_dj4 .hyk_shuzi small { color: rgba(240,210,140,.68); }
.hyk_dj4 .hyk_dengji_biao {
  color: var(--jin-qian); background: rgba(232,200,116,.14);
  border-color: rgba(232,200,116,.5);
}
.hyk_dj4 .hyk_touxiang { background: rgba(232,200,116,.12); border-color: rgba(232,200,116,.45); }
.hyk_dj4 .hyk_moren { color: var(--jin-qian); }
/* 毛边玻璃：卡缘一圈虚虚的金光+顶边冷光 */
.hyk_dj4::before {
  inset: 0; border-radius: var(--yuan);
  box-shadow: inset 0 0 26px rgba(232,200,116,.28), inset 0 2px 10px rgba(255,255,255,.16);
}
.hyk_dj4::after {
  top: -60%; right: -20%; width: 55%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(232,200,116,.14), transparent);
  transform: rotate(18deg);
}

.biaoqian { display: inline-block; padding: 2px 9px; font-size: 12px; border-radius: 7px; }
.biaoqian-jin { background: #e9f2fe; color: var(--jin2); border: 1px solid #c7dffc; }
.biaoqian-hui { background: #f2f6fb; color: #73869c; border: 1px solid #e1e9f4; }
.biaoqian-hong { background: #fdeeee; color: #e23b3b; border: 1px solid #f8c9c9; }
.biaoqian-lv { background: #e9f8f0; color: #138a4b; border: 1px solid #c4ecd4; }
/* 高速客服的金标，跟普通蓝绿标签区分开，商家一眼能看着 */
.biaoqian-kefu { background: linear-gradient(135deg,#ffce5c,#f5a623); color: #5a3a00; border: none; font-weight: 700; }

.caidan_wang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caidan_xiang {
  background: var(--ka); border: 1px solid #e4edf8;
  box-shadow: 0 1px 6px rgba(47,125,240,.05);
  padding: 22px 14px; text-align: center; color: var(--wen);
}
.caidan_xiang .cd_tb { font-size: 28px; }
.caidan_xiang .cd_mz { margin-top: 8px; font-size: 14px; }
.caidan_xiang:active { background: var(--ka2); }

/* 流水那一区域 */
.jilu_xiang {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 2px; border-bottom: 1px solid var(--bian);
}
.jilu_xiang:last-child { border-bottom: 0; }
.jilu_xiang .jl_mz { font-size: 14px; }
.jilu_xiang .jl_bz { color:var(--hui); font-size: 12px; margin-top: 2px; }
.jilu_xiang .jl_jine { font-weight: 700; white-space: nowrap; margin-left: 12px; }
.jl_jine.jia { color: var(--lv); }
.jl_jine.jian { color: var(--hong); }
.kong { text-align: center; color: var(--hui); padding: 30px 0; font-size: 13px; }

/* 扫码，摄像头那块就该是黑的，R角收一下 */
#saoma_kuang { width: 100%; overflow: hidden; background: #0d1420; border-radius: var(--yuan); }
#saoma_kuang video { width: 100% !important; }
#saoma_kuang canvas { display: none; }

/* 二维码,默认白底（background:）这个后面改颜色不要改成奇奇怪怪的颜色 */
.erweima_qu { text-align: center; }
.erweima_bai { display: inline-block; background: #fff; padding: 12px; line-height: 0; border: 1px solid var(--bian); border-radius: var(--yuan-xiao); }
.erweima_bai img, .erweima_bai canvas { display: block; }
.uuid_wenzi { margin-top: 12px; font-family: Consolas, monospace; font-size: 13px; color: var(--hui); word-break: break-all; }

/* 付款选项 */
.fukuan_xuan { display: flex; gap: 10px; align-items: center; padding: 14px;
  border: 1px solid var(--bian); border-radius: var(--yuan-xiao); margin-bottom: 8px;
  cursor: pointer; background: rgba(255,255,255,.78); }
.fukuan_xuan.xuanzhong { border-color: var(--jin2); background: #f2f7ff; }
.fukuan_xuan .fx_yuan { width: 16px; height: 16px; border: 2px solid #aebccf; border-radius: 50%; flex: none; position: relative; }
.fukuan_xuan input { display: none; }
.fukuan_xuan input:checked + .fx_yuan { border-color: var(--jin2); }
.fukuan_xuan input:checked + .fx_yuan::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--jianbian);
}
.fukuan_xuan .fx_neirong { flex: 1; }
.fukuan_xuan .fx_jiage { font-weight: 700; color: var(--jin2); }
.zidingyi_qu { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.zidingyi_qu .srk { max-width: 160px; }

.tc_xiang {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--bian);
}

/* 之前首页顶部用的，现在没了，先留着 */
.shouye_ding {
  height: 46px; background: #fff; border-bottom: 1px solid var(--bian);
  display: flex; align-items: center; padding: 0 14px;
}
.gonggao_tiao { background: #fff8e8; color: #a87b1c; border: 1px solid #f2e2b8; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.lao_ban_qia { border: 1px dashed #bcd0ea; padding: 14px; color: #7b8ca1; }

/* 后台那几页 */
.houtai_shen { background: #f0f4f9; color: #22324a; }
.daohang { background: var(--jianbian); box-shadow: 0 2px 10px rgba(47,125,240,.2); }
.daohang_nei { max-width: 1150px; margin: 0 auto; padding: 0 18px; height: 54px;
  display: flex; align-items: center; justify-content: space-between; }
.daohang .logo { color: #fff; font-weight: 800; letter-spacing: 1px; }
.daohang_lj a { color: rgba(255,255,255,.78); font-size: 14px; margin-left: 22px; }
.daohang_lj a:hover, .daohang_lj a.dangqian { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }
.daohang_lj a.tuichu_lj { color: #ffe0e0; }

.houtai_zhuti { max-width: 1150px; margin: 0 auto; padding: 22px 18px 50px; }

.ht_ka { background: #fff; padding: 20px; margin-bottom: 16px;
  border: 1px solid #e4edf8; border-radius: var(--yuan);
  box-shadow: 0 2px 10px rgba(47,125,240,.06); }
.ht_ka h3 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--jin2); padding-left: 10px; }

.ht_srk {
  padding: 9px 12px; border: 1px solid #ccd9ea; border-radius: var(--yuan-xiao);
  font-size: 14px; outline: none; background: #fff; color: #22324a;
}
.ht_srk:focus { border-color: var(--jin2); box-shadow: 0 0 0 3px rgba(47,125,240,.1); }

.ht_anniu {
  padding: 9px 18px; border: 0; border-radius: var(--yuan-xiao); cursor: pointer;
  background: var(--jianbian); color: #fff; font-weight: 700; font-size: 14px;
}
.ht_anniu.hui { background: #e8eef7; color: #4a5a70; }
.ht_anniu.hong { background: var(--hong); }
.ht_anniu.lv { background: var(--lv); }

/* 后台的表 */
.ht_biao { width: 100%; border-collapse: collapse; font-size: 14px; }
.ht_biao th { text-align: left; color: #73869c; font-weight: 500; font-size: 13px;
  padding: 10px 12px; border-bottom: 2px solid #e4edf8; white-space: nowrap; }
.ht_biao td { padding: 12px 12px; border-bottom: 1px solid #eef3fa; }
.ht_biao tr:hover td { background: #f7faff; }
.ht_biao .num { font-family: Consolas, monospace; }
.jine_hao { font-weight: 700; color: var(--jin2); }

.ht_biaoqian { display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 7px; }
.ht_bq_jin { background: #e9f2fe; color: #1f6ae0; border: 1px solid #c7dffc; }
.ht_bq_hui { background: #f2f6fb; color: #73869c; border: 1px solid #e1e9f4; }
.ht_bq_hong { background: #fdeeee; color: #c63030; border: 1px solid #f8c9c9; }
.ht_bq_lv { background: #e9f8f0; color: #138a4b; border: 1px solid #c4ecd4; }

.sousuo_qu { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sousuo_qu .ht_srk { min-width: 220px; }

.caozuo_lj { font-size: 13px; color: var(--jin2); margin-right: 12px; white-space: nowrap; }
.caozuo_lj.shanchu { color: #e23b3b; }

.xinxi_wang { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; margin-bottom: 16px; }
.xinxi_xiang { background: var(--ka2); padding: 12px 14px; border: 1px solid #e4edf8; }
.xinxi_xiang .xx_biao { color: var(--hui); font-size: 12px; }
.xinxi_xiang .xx_zhi { font-size: 16px; font-weight: 700; margin-top: 2px; }

.fenye { text-align: center; margin-top: 18px; }
.fenye a, .fenye span {
  display: inline-block; padding: 6px 13px; margin: 0 3px;
  background: #fff; border: 1px solid #d3e0f2; font-size: 13px; color: #4a5a70;
}
.fenye span.dangqian { background: var(--jianbian); border-color: var(--jin2); color: #fff; font-weight: 700; }

.tongji_wang { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; margin-bottom: 18px; }
.tongji_xiang { background: #fff; padding: 18px; border: 1px solid #e4edf8; box-shadow: 0 2px 10px rgba(47,125,240,.05); }
.tongji_xiang .tj_biao { color: var(--hui); font-size: 13px; }
.tongji_xiang .tj_shu { font-size: 26px; font-weight: 800; margin-top: 4px; color: #22324a; }

/* 后台里提示条换浅色的 */
.ht_ka .tishi-chenggong { background: #e9f8f0; border-left: 3px solid var(--lv); color: #157a44; }
.ht_ka .tishi-cuowu { background: #fdeeee; border-left: 3px solid var(--hong); color: #c63030; }
.ht_ka .tishi-tishi { background: #e9f2fe; border-left: 3px solid var(--jin2); color: #2266c4; }

/* 后台登录 */
.dengl_wa { max-width: 380px; margin: 80px auto; padding: 0 16px; }
.dengl_wa .heka { background: #fff; }

/* 手机上表格左右滑 */
@media (max-width: 640px) {
  .ht_biao { display: block; overflow-x: auto; white-space: nowrap; }
  .daohang_lj a { margin-left: 14px; font-size: 13px; }
}

/* 底部tab栏，手机端贴着底，顶上两个R角加玻璃 */
.dibu_tab {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  max-width: 480px; margin: 0 auto;
  height: 58px; background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-top: 1px solid rgba(255,255,255,.9);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 18px rgba(47,125,240,.10);
  display: flex;
}
.tab_xiang {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; color: #94a5bb;
}
.tab_xiang.xz { color: var(--jin2); font-weight: 700; }
.tab_tb { position: relative; font-size: 20px; line-height: 22px; }
.tab_jiao {
  position: absolute; top: -6px; right: -14px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: var(--hong); color: #fff; font-size: 10px; line-height: 16px;
  text-align: center;
}

/* 聊天气泡 */
.qipao {
  max-width: 74%; padding: 9px 12px; font-size: 14px; line-height: 1.6;
  word-break: break-all;
  box-shadow: 0 1px 4px rgba(47,125,240,.08);
}
.qipao_wo { background: var(--jianbian); color: #fff; }
.qipao_ta { background: #fff; color: var(--wen); border: 1px solid #dbe6f4; }
/* 商家收到的高速客服消息：金底深棕字，跟普通白气泡区分 */
.qipao_kefu { background: #fff3da; color: #7a4d0e; border: 1px solid #f2c879; box-shadow: 0 1px 6px rgba(245,166,35,.18); }
.qipao_kefu_biao { font-size: 10px; font-weight: 700; margin-bottom: 3px; opacity: .85; }
/* 消息列表里高速客服会话整行置顶高亮，左边粗金条 */
.kefu_hang { background: #fff8e8; border-left: 3px solid #f5a623 !important; }
.liao_shuru {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  max-width: 480px; margin: 0 auto;
  display: flex; gap: 8px; padding: 10px 12px;
  background: #fff; border-top: 1px solid #dce7f5;
}

/* 我的页头像 */
.touxiang_kuang {
  width: 58px; height: 58px; background: var(--ka2); border: 1px solid #d3e0f2;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0; color: var(--hui);
}

/* 成长进度条 */
.jindu_tiao { height: 8px; background: #e5eef9; border-radius: 6px; overflow: hidden; }
.jindu_li { height: 100%; background: var(--jianbian); }

/* 我的订单上面的状态切换 */
.dingdan_tab {
  display: flex; background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.85); border-radius: var(--yuan);
  box-shadow: var(--ying); margin-bottom: 12px; overflow: hidden;
}
.dt_xiang {
  flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #8497ad;
}
.dt_xiang.dt_xz { color: var(--jin2); font-weight: 700; box-shadow: inset 0 -2px 0 var(--jin2); }

/* 页面顶部统一返回条，sticky钉在顶上，往下滑也能看见返回 */
.fanhui_tiao {
  position: sticky; top: 0; z-index: 900;
  display: block; box-sizing: border-box; width: 100%;
  padding: 11px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--yuan-xiao);
  color: var(--jin2);
  font-size: 13px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(47,125,240,.08);
}
.fanhui_tiao:active { background: var(--ka2); }

/* 系统消息折叠块 */
.xitong_xx > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: #5a6b80; font-weight: 700;
  user-select: none;
}
.xitong_xx > summary::-webkit-details-marker { display: none; }
.xitong_xx .xx_you { display: flex; align-items: center; gap: 8px; }
.xitong_xx .xx_jiantou { color: var(--hui); font-size: 11px; transition: transform .2s; display: inline-block; }
.xitong_xx[open] .xx_jiantou { transform: rotate(180deg); }
.xitong_xx .xx_neirong { margin-top: 4px; }
.xitong_xx .xx_neirong > div:last-child { border-bottom: none !important; }

/* ===== 首页三专栏：三个功能按钮 ===== */
.gongneng_san {
  display: flex; padding: 14px 4px;
}
.gn_an {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--wen); gap: 6px;
}
.gn_tb {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(47,125,240,.18);
}
.gn_mz { font-size: 14px; font-weight: 700; }
.gn_xz { font-size: 11px; color: var(--hui); }
.gn_an:active .gn_tb { opacity: .8; }

/* ===== 首页广告轮播 ===== */
.lunbo_wa { padding: 0 12px; margin-bottom: 12px; }
.lunbo {
  position: relative; width: 100%; padding-bottom: 45%;
  background: var(--ka2); overflow: hidden;
  border: 1px solid rgba(255,255,255,.85); border-radius: var(--yuan);
  box-shadow: 0 8px 22px rgba(47,125,240,.12);
}
.lunbo_ye {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.lunbo_ye.xz { opacity: 1; pointer-events: auto; z-index: 2; }
.lunbo_ye img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lunbo_moren {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 2px;
  background: var(--jianbian);
}
.lunbo_moren div:first-child { font-size: 38px; }
.lunbo_dian {
  position: absolute; bottom: 8px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.ld_xiang {
  width: 6px; height: 6px; background: rgba(255,255,255,.55); cursor: pointer;
  border-radius: 5px; transition: width .25s;
}
.ld_xiang.xz { background: #fff; width: 16px; }

/* ===== 首页最近评价 ===== */
.pj_hang { padding: 12px 0; border-bottom: 1px solid var(--bian); }
.pj_hang:last-child { border-bottom: none; padding-bottom: 0; }
.pj_tou { display: flex; align-items: center; gap: 10px; }
.pj_tx_tu {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
  background: var(--ka2); border: 1px solid #dce7f5; flex-shrink: 0;
}
.pj_tx_mo {
  display: flex; align-items: center; justify-content: center;
  color: var(--hui); font-size: 17px;
}
.pj_xinxi { flex: 1; min-width: 0; }
.pj_ming { font-size: 13px; font-weight: 700; }
.pj_dian { font-size: 12px; color: var(--hui); margin-top: 2px; }
.pj_dian a { color: var(--hui); text-decoration: none; }
.pj_xing { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.pj_nr {
  font-size: 13px; color: var(--wen); line-height: 1.7;
  margin-top: 8px; padding-left: 46px; word-break: break-all;
}

/* ===== 活动页：签到栏 ===== */
.qiandao_ka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--jianbian) !important; border: none !important; color: #fff;
}
.qd_zuo { flex: 1; min-width: 0; }
.qd_biaoti { font-size: 18px; font-weight: 800; }
.qd_shuo { font-size: 12px; opacity: .9; margin-top: 6px; line-height: 1.6; }
.qd_shuo b { color: #ffe9a8; }
.qd_shuju { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; opacity: .92; }
.qd_shuju b { font-size: 14px; }
.qd_an {
  flex-shrink: 0; width: 84px; padding: 28px 0;
  background: #fff; color: var(--jin2); border: none;
  border-radius: var(--yuan-xiao);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.08);
  font-size: 17px; font-weight: 800; cursor: pointer;
}
.qd_an:disabled { color: #9ab; background: rgba(255,255,255,.35); color: #fff; }
.qd_an:active:not(:disabled) { background: #eaf3ff; }

/* ===== 活动页：折扣表 ===== */
.zk_biao { display: flex; flex-direction: column; }
.zk_hang {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--bian); font-size: 14px;
}
.zk_hang:last-child { border-bottom: none; }
.zk_hang.wo { background: var(--ka2); border-radius: 9px; margin: 0 -8px; padding-left: 12px; padding-right: 12px; }
.zk_dian { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.zk_ming { flex: 1; }
.zk_hang.wo .zk_ming { font-weight: 700; color: var(--jin2); }
.zk_zhe { font-weight: 700; color: #d2691e; }

/* ===== 活动页：活动商家 + 积分商城双入口 ===== */
.rukou_lie { display: flex; gap: 10px; align-items: stretch; }
.rukou_ka { margin-bottom: 12px; }
.rk_zuo { flex: 1; min-width: 0; padding: 12px; }
.rk_you {
  width: 132px; flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-decoration: none; color: var(--wen);
  background: linear-gradient(160deg, #fff6e6, #ffe9c2) !important;
  border: 1px solid #f3d7a3 !important; border-radius: var(--yuan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  text-align: center; padding: 14px 8px;
}
.rk_tou {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.rk_biaoti { font-size: 14px; font-weight: 700; }
.rk_gd { font-size: 12px; color: var(--hui); text-decoration: none; }
.rk_sj_hang {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--bian); text-decoration: none; color: var(--wen);
}
.rk_sj_hang:last-child { border-bottom: none; }
.rk_sj_hang img, .rk_sj_mo {
  width: 28px; height: 28px; object-fit: cover; flex-shrink: 0;
  border-radius: 8px;
  background: var(--ka2); border: 1px solid #dce7f5;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--hui);
}
.rk_sj_ming { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk_sj_shu { font-size: 11px; color: var(--hui); flex-shrink: 0; }
.rk_tb { font-size: 34px; line-height: 1; }
.rk_you_zi { margin-top: 10px; }
.rk_you .rk_biaoti { color: #b06a12; }
.rk_shuo { font-size: 11px; color: #8a6523; margin-top: 6px; line-height: 1.7; }

/* ===== 积分商城 ===== */
.jifen_tou {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--jianbian) !important; border: none !important; color: #fff;
}
.jifen_wang {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.jifen_ka {
  position: relative; border: 1px solid #dce7f5;
  border-radius: var(--yuan-xiao);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  padding: 14px 10px; text-align: center;
  overflow: hidden;
}
.jifen_ka.dangqian { border: 2px solid var(--jin2); padding: 13px 9px; background: #eef5ff; }
.jf_dj { font-size: 15px; font-weight: 800; }
.jf_zk { font-size: 12px; color: var(--hui); margin-top: 4px; }
.jf_jia { font-size: 13px; color: #d2691e; margin: 10px 0; }
.jf_jia b { font-size: 20px; }
.jf_bq {
  position: absolute; top: 0; right: 0;
  border-radius: 0 var(--yuan-xiao) 0 8px;
  background: var(--jianbian); color: #fff; font-size: 10px; padding: 2px 6px;
}

/* 积分商城四档卡片，顶条按等级配色（1黄金 2钻石 3白金 4黑卡） */
.jifen_ka::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--jianbian);
}
.jifen_ka.jf_dj1::before { background: var(--dj1); }
.jifen_ka.jf_dj2::before { background: var(--dj2); border-bottom: 1px solid #cdddf5; }
.jifen_ka.jf_dj3::before { background: var(--dj3); }
.jifen_ka.jf_dj4::before { background: var(--dj4); }
/* 黑卡那档整张卡加深，字改金色 */
.jifen_ka.jf_dj4 {
  background: #181820; border-color: rgba(232,200,116,.45);
  box-shadow: inset 0 0 18px rgba(232,200,116,.10), 0 8px 18px rgba(0,0,0,.18);
}
.jifen_ka.jf_dj4 .jf_dj { color: var(--jin-qian); }
.jifen_ka.jf_dj4 .jf_zk { color: rgba(240,210,140,.65); }
.jifen_ka.jf_dj4 .jf_jia, .jifen_ka.jf_dj4 .jf_jia b { color: var(--jin-qian); }

/* ===== 我的页：功能一行一行 ===== */
.heka .wode_hang:first-child { border-top: none; }
.wode_hang {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-top: 1px solid #edf2f9;
  text-decoration: none; color: var(--wen);
}
.wode_hang:active { background: var(--ka2); }
.wh_tb {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.wh_mz { flex: 1; font-size: 15px; }
.wh_biao { font-size: 12px; color: var(--hong); }
.wh_xz { font-size: 12px; color: var(--hui); }
.wh_jt { color: #b6c4d6; font-size: 15px; }

@media (max-width: 360px) {
  .gn_mz { font-size: 13px; }
  .rk_you { width: 116px; }
}