/* ============================================================
   PPT马上做 · 手机端 APP 风格
   v2：皮肤系统（后台可切 5 套配色）+ 动效
   ============================================================ */
[hidden] { display: none !important; }
:root {
  /* 默认皮肤：医疗蓝（医护行业专业蓝 + 青蓝过渡） */
  --brand: #0f7bbe; --brand-bright: #2fa0de; --brand-deep: #0a5a8e; --brand-soft: #e4f3fb;
  --brand-soft2: #f1f8fc; --brand-line: #c2e1f2; --brand-rgb: 15,123,190; --ink-rgb: 21,42,58;
  --brand-grad: linear-gradient(135deg, #0f7bbe, #2fa0de);
  --bg: #f2f7fa; --card: #FFFFFF; --line: #e4edf3; --txt: #17293a; --txt2: #4e6377; --txt3: #8fa3b3;
  --gold: #E8930C; --red: #E14D5B; --r: 14px; --safe-b: env(safe-area-inset-bottom, 0px);
}
html[data-skin="blue"] {
  --brand: #2563EB; --brand-bright: #3B82F6; --brand-deep: #1D4ED8; --brand-soft: #E8F0FE;
  --brand-soft2: #F2F6FE; --brand-line: #C4D8FA; --brand-rgb: 37,99,235; --ink-rgb: 26,32,52;
  --brand-grad: linear-gradient(135deg, #3B82F6, #1D4ED8);
  --bg: #F2F5FA; --line: #E5E9F1; --txt: #1E2533; --txt2: #5B6474; --txt3: #9099AB;
}
html[data-skin="green"] {
  --brand: #0D9488; --brand-bright: #14B8A6; --brand-deep: #0F766E; --brand-soft: #E0F4F1;
  --brand-soft2: #F0F9F7; --brand-line: #B5E3DC; --brand-rgb: 13,148,136; --ink-rgb: 18,40,37;
  --brand-grad: linear-gradient(135deg, #14B8A6, #0F766E);
  --bg: #F1F6F5; --line: #E2EAE8; --txt: #1D2B29; --txt2: #5A6B68; --txt3: #91A19E;
}
html[data-skin="orange"] {
  --brand: #F55E00; --brand-bright: #FF7E33; --brand-deep: #C74A0A; --brand-soft: #FFEEE2;
  --brand-soft2: #FFF6EF; --brand-line: #FFD2B8; --brand-rgb: 245,94,0; --ink-rgb: 55,40,25;
  --brand-grad: linear-gradient(135deg, #FF7E33, #F04E00);
  --bg: #F7F4F1; --line: #EFE9E4; --txt: #2B2119; --txt2: #6B5F55; --txt3: #A0938A;
}
html[data-skin="tcm"] {
  --brand: #A4442C; --brand-bright: #C05F3C; --brand-deep: #7C2D12; --brand-soft: #F6EBDD;
  --brand-soft2: #FBF5EA; --brand-line: #E2CDB0; --brand-rgb: 164,68,44; --ink-rgb: 70,50,30;
  --brand-grad: linear-gradient(135deg, #B45A2E, #8C3A1F);
  --bg: #F6F1E5; --card: #FFFDF8; --line: #E8DFCC; --txt: #33261C; --txt2: #6E5D4F; --txt3: #A5947F;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--txt); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font-family: inherit; font-size: inherit; border: none; outline: none; }
button { cursor: pointer; }

/* ============ 页面框架 ============ */
#app { min-height: 100%; }
.page { min-height: 100vh; padding-bottom: calc(64px + var(--safe-b)); }
.page[hidden] { display: none; }

/* ============ 顶部绿色 APP 头 ============ */
.mhead { background: var(--brand-grad); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 14px;
  border-radius: 0 0 22px 22px; }
.mh-row { display: flex; align-items: center; gap: 9px; }
.mh-logo { width: 34px; height: 34px; border-radius: 9px; background: #fff; padding: 2px; }
.mh-brand b { display: block; font-size: 16.5px; letter-spacing: .5px; }
.mh-brand i { font-style: normal; font-size: 10.5px; opacity: .85; }
.mh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mh-mini { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 99px;
  padding: 5px 12px; font-size: 11.5px; color: #fff; }
.mh-login { background: #fff; color: var(--brand); font-weight: 700; font-size: 12px; border-radius: 99px; padding: 6px 14px; }
.m-search { margin-top: 12px; display: flex; gap: 8px; }
.ms-box { flex: 1; display: flex; align-items: center; height: 38px; border-radius: 99px; background: #fff; padding: 0 12px 0 8px; }
.ms-box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: none; outline: none; padding: 0 6px; font-size: 13.5px; color: var(--txt); }
.ms-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ms-box button { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); }
.ms-box button:active { opacity: .6; }
.ms-box svg { width: 20px; height: 20px; display: block; }
.m-search > button { flex: none; width: 46px; height: 38px; border-radius: 99px; background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 16px; }

/* ============ 播报条 ============ */
.m-bc { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 9px 14px;
  background: linear-gradient(90deg, var(--brand-soft2), #EFF6FF); border: 1px solid var(--brand-line); border-radius: 12px; overflow: hidden; }
.m-bc .ico { flex: none; font-size: 15px; }
.m-bc .win { flex: 1; height: 19px; overflow: hidden; min-width: 0; }
.m-bc .line { font-size: 12px; color: var(--txt); line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: bcIn .4s ease; }
.m-bc .line.out { animation: bcOut .3s ease forwards; }
@keyframes bcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bcOut { to { opacity: 0; transform: translateY(-10px); } }

/* ============ 通用卡片/区块 ============ */
.sec { margin: 14px 14px 0; }
.sec-h { display: flex; align-items: center; margin-bottom: 10px; }
.sec-h b { font-size: 15.5px; }
.sec-h .more { margin-left: auto; font-size: 12px; color: var(--txt3); }
.card { background: var(--card); border-radius: var(--r); box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); }

/* 数据四格 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 14px 0; }
.stat-it { background: var(--card); border-radius: 12px; padding: 10px 4px; text-align: center;
  box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); }
.stat-it b { display: block; font-size: 15.5px; color: var(--brand); }
.stat-it:nth-child(2) b { color: var(--gold); }
.stat-it span { font-size: 10px; color: var(--txt3); }

/* 分类宫格 */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-it { background: var(--card); border-radius: 12px; padding: 12px 4px 10px; text-align: center;
  box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); }
.cat-it .em { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; }
.cat-it b { font-size: 11.5px; display: block; }
.cat-it i { font-style: normal; font-size: 9.5px; color: var(--txt3); }
.c-em0 { background: var(--brand-soft); } .c-em1 { background: #FFF3E4; } .c-em2 { background: #E8F1FF; }
.c-em3 { background: #F3E8FF; } .c-em4 { background: #FDE8EE; } .c-em5 { background: #FFF9DC; }
.c-em6 { background: #E4F4FD; } .c-em7 { background: #EFFBEA; }

/* 横滑模板卡 */
.hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 8px; margin: 0 -14px; padding-left: 14px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.tcard { flex: none; width: 132px; background: var(--card); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(var(--ink-rgb),.07); }
.tcard .cov { aspect-ratio: var(--grid-ar, 16/9); background: var(--bg); position: relative; overflow: hidden; }
.tcard .cov img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tcard .cov .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--txt3); padding: 6px; text-align: center; }
.tcard .b { padding: 7px 9px 9px; }
.tcard .t { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .m { display: flex; align-items: center; margin-top: 4px; gap: 5px; }
.price { color: var(--red); font-weight: 700; font-size: 12.5px; }
.price i { font-style: normal; color: var(--brand); font-size: 11px; }
.badge { font-style: normal; font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 4px; }
.badge--trial { background: var(--brand-soft); color: var(--brand); }
.badge--vip { background: #FFF3E4; color: #B7791F; }
.badge--free { background: #EFF6FF; color: #2B6CB0; }

/* 竖排模板列表 */
.vlist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vlist .tcard { width: auto; }
.load-more { display: block; width: 60%; margin: 14px auto 4px; height: 36px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: var(--txt3); font-size: 12.5px; }

/* ============ 分类页 ============ */
.plist { margin: 12px 14px 0; }
.pl-it { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 9px; box-shadow: 0 4px 16px rgba(var(--ink-rgb),.05); }
.pl-it .em { font-size: 20px; }
.pl-it b { font-size: 14px; }
.pl-it .cnt { margin-left: auto; font-size: 11.5px; color: var(--txt3); background: var(--bg); border-radius: 99px; padding: 2px 10px; }
.pl-it .arr { color: var(--txt3); }

/* ============ 列表页 ============ */
.subnav { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 2px; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.pill { flex: none; font-size: 12px; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--txt3); border: 1px solid var(--line); }
.pill.on { background: var(--brand-grad); color: #fff; border-color: transparent; font-weight: 700; }

/* ============ 详情页 ============ */
.dt-head { background: var(--brand-grad); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 16px;
  border-radius: 0 0 22px 22px; }
.dt-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #fff; opacity: .92; }
.dt-cover { margin: 14px 14px 0; border-radius: var(--r); overflow: hidden; background: #fff;
  box-shadow: 0 6px 20px rgba(var(--ink-rgb),.08); }
.dt-cover img { width: 100%; }
.dt-cover .ph { padding: 46px 20px; text-align: center; color: var(--txt3); font-size: 12.5px; }
.dt-info { margin: 12px 14px 0; padding: 14px 16px; }
.dt-info h1 { font-size: 15.5px; line-height: 1.5; }
.dt-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.dt-meta .tag { font-style: normal; font-size: 10px; color: var(--txt3); background: var(--bg); border-radius: 4px; padding: 2px 7px; }
.dt-buyrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dt-price { font-size: 21px; color: var(--red); font-weight: 800; }
.dt-price i { font-style: normal; font-size: 12px; color: var(--txt3); font-weight: 400; margin-left: 6px; text-decoration: line-through; }
.btn-buy { flex: 1; height: 42px; border-radius: 99px; background: var(--brand-grad); color: #fff; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb),.35); }
.btn-buy.alt { background: linear-gradient(135deg, #F5A623, #E8930C); box-shadow: 0 6px 16px rgba(232,147,12,.3); }
.btn-fav { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--bg); font-size: 17px; color: var(--txt3); }
.btn-fav.on { background: #FFF7E8; color: var(--gold); }
.dt-ship { margin: 12px 14px 0; padding: 12px 14px; font-size: 12px; color: var(--txt3); line-height: 1.8; }
.dt-ship b { color: var(--brand); }
.dt-reviews { margin: 12px 14px 0; padding: 4px 16px 10px; }
.rv-it { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.rv-it:last-child { border-bottom: none; }
.rv-top { display: flex; align-items: center; gap: 7px; }
.rv-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-size: 12px; }
.rv-top b { font-size: 12.5px; }
.rv-stars { font-size: 10px; color: #F5A623; letter-spacing: 1px; }
.rv-top .dt { margin-left: auto; font-size: 10px; color: var(--txt3); }
.rv-tx { margin-top: 5px; font-size: 12.5px; color: var(--txt); }

/* ============ 代做页 ============ */
.mk-hero { background: var(--brand-grad); color: #fff; text-align: center; padding: calc(env(safe-area-inset-top, 0px) + 26px) 20px 24px;
  border-radius: 0 0 22px 22px; }
.mk-hero h1 { font-size: 19px; }
.mk-hero p { font-size: 12px; opacity: .88; margin-top: 5px; }
.mk-points { display: flex; gap: 8px; margin: 14px 14px 0; }
.mk-pt { flex: 1; background: var(--card); border-radius: 12px; text-align: center; padding: 12px 4px;
  box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); }
.mk-pt .em { font-size: 20px; }
.mk-pt b { display: block; font-size: 11.5px; margin-top: 4px; }
.mk-pt i { font-style: normal; font-size: 9.5px; color: var(--txt3); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mk-chip { font-size: 11.5px; background: var(--brand-soft); color: var(--brand-deep); border-radius: 99px; padding: 5px 11px; }
.mk-form { margin: 14px 14px 0; padding: 16px; }
.mk-form h3 { font-size: 14.5px; margin-bottom: 10px; }
.mk-form textarea, .mk-form input { width: 100%; background: var(--bg); border-radius: 10px; padding: 11px 13px;
  font-size: 13px; margin-bottom: 10px; color: var(--txt); }
.mk-form textarea { height: 84px; resize: none; }
.mk-orders { margin: 14px 14px 0; padding: 14px 16px; }
.mk-od { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.mk-od:last-child { border-bottom: none; }
.mk-od b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.mk-od .no { font-size: 10px; color: var(--txt3); }
.mk-od .est { margin-left: auto; color: var(--red); font-weight: 700; font-size: 12.5px; }
.mk-st { font-style: normal; font-size: 10px; border-radius: 4px; padding: 1px 6px; }
.mk-st--0 { background: #FFF3E4; color: #B7791F; } .mk-st--1 { background: #E8F1FF; color: #2B6CB0; }
.mk-st--2 { background: #FDE8EE; color: #D6455D; } .mk-st--3 { background: var(--brand-soft); color: var(--brand); }
.mk-st--4 { background: #EEE; color: #999; }

/* ============ 会员页 ============ */
.vip-head { background: linear-gradient(160deg, var(--brand-deep), var(--brand)); color: #F5DFAE; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 20px 22px; border-radius: 0 0 22px 22px; }
.vip-head .crown { font-size: 34px; }
.vip-head h1 { font-size: 18px; margin-top: 6px; color: #F7E8BE; }
.vip-head p { font-size: 11.5px; opacity: .8; margin-top: 4px; color: rgba(255,255,255,.75); }
.vip-card { margin: -12px 14px 0; position: relative; padding: 14px 16px; }
.vip-lv { display: flex; align-items: center; }
.vip-lv .lv { font-size: 14.5px; font-weight: 800; color: #B7791F; }
.vip-lv .exp { margin-left: auto; font-size: 11px; color: var(--txt3); }
.lv-list { margin: 12px 14px 0; }
.lv-it { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 13px;
  padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); }
.lv-it .info { flex: 1; min-width: 0; }
.lv-it .info b { font-size: 14px; }
.lv-it .info span { display: block; font-size: 11px; color: var(--txt3); margin-top: 2px; }
.lv-it .buy { flex: none; height: 34px; padding: 0 16px; border-radius: 99px; background: var(--brand-grad);
  color: #fff; font-weight: 700; font-size: 12px; }
.lv-it .buy.gold { background: linear-gradient(135deg, #F5A623, #E8930C); }
.vip-acts { display: flex; gap: 10px; margin: 4px 14px 0; }
.vip-acts button { flex: 1; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
  font-size: 13px; color: var(--txt); }

/* ============ 我的页（手机端独立设计：App 个人中心式） ============ */
/* 渐变头部 */
.mme-hero { position: relative; overflow: hidden; color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 24px) 18px 62px; }
.mme-hero-bg { position: absolute; inset: 0; background: linear-gradient(150deg, var(--brand-bright) 0%, var(--brand) 58%, var(--brand-deep) 100%); }
.mme-hero-bg::after { content: ''; position: absolute; right: -52px; top: -64px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.09); }
.mme-hero-bg::before { content: ''; position: absolute; right: 90px; top: 26px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.07); }
.mme-row { position: relative; display: flex; align-items: center; gap: 13px; }
.mme-ava { position: relative; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand);
  display: grid; place-items: center; font-size: 24px; font-weight: 800; flex: none; overflow: hidden;
  border: 3px solid rgba(255,255,255,.65); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.mme-ava img { width: 100%; height: 100%; object-fit: cover; }
.mme-ava-cam { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  color: #444; border: 1px solid var(--line); display: grid; place-items: center; font-size: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.mme-id { flex: 1; min-width: 0; }
.mme-id b { display: block; font-size: 17.5px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mme-badge { display: inline-block; margin-top: 5px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px; padding: 2px 10px; font-size: 10.5px; font-weight: 700; }
.mme-badge--vip { background: linear-gradient(120deg, #FCD34D, #F59E0B); border-color: #FCD34D; color: #78350F; }
.mme-badge--plain { background: rgba(255,255,255,.18); }
.mme-uid { display: block; margin-top: 4px; font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mme-edit { flex: none; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: 99px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; }
.mme-edit--go { background: #fff; color: var(--brand); border: none; }
/* 数据四格：白卡上叠 */
.mme-stats { position: absolute; left: 14px; right: 14px; bottom: -34px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(23,58,42,.12); padding: 12px 0; }
.mme-stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.mme-stats a + a { border-left: 1px dashed var(--line); }
.mme-stats b { font-size: 16.5px; color: var(--txt); font-variant-numeric: tabular-nums; }
.mme-stats span { font-size: 10px; color: var(--txt3); }
.mme-stats a:active b { color: var(--brand); }
/* 会员横幅 */
.mme-vip { margin: 48px 14px 0; background: linear-gradient(125deg, var(--brand-deep), var(--brand)); border-radius: 14px; color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; box-shadow: 0 10px 22px -10px rgba(var(--brand-rgb),.5); }
.mme-vip--open { background: linear-gradient(125deg, #E9B23C, #D98F0E); box-shadow: 0 10px 22px -10px rgba(217,143,14,.5); }
.mme-vip-l { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mme-crown { font-size: 22px; }
.mme-vip-l b { display: block; font-size: 14.5px; }
.mme-vip-l span { font-size: 10.5px; opacity: .9; }
.mme-vip-l span b { display: inline; color: #FDE68A; font-size: 11px; }
.mme-vip--open .mme-vip-l span b { color: #fff; }
.mme-vip-btn { flex: none; background: #fff; color: var(--brand); border: none; border-radius: 99px; padding: 7px 16px;
  font-size: 12px; font-weight: 800; }
.mme-vip--open .mme-vip-btn { color: #B96E00; }
/* cells 列表 */
.me-cells { margin: 14px 14px 0; padding: 2px 16px; }
.me-cell { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--bg); font-size: 13.5px; }
.me-cell:last-child { border-bottom: none; }
.me-cell .em { font-size: 17px; }
.me-cell .arr { margin-left: auto; color: var(--txt3); }
.me-cell .n { margin-left: auto; font-size: 11.5px; color: var(--txt3); }
.me-logout { display: block; width: calc(100% - 28px); margin: 16px auto 0; height: 42px; border-radius: 99px;
  background: #fff; border: 1px solid #F3C9CE; color: var(--red); font-size: 13.5px; }
/* 推广中心弹层 */
.mme-promo-up p { font-size: 12.5px; line-height: 1.7; color: var(--txt2); margin: 0 0 10px; }
.mme-rate { background: var(--brand-soft2); border-radius: 10px; padding: 10px 12px !important; font-size: 12px !important; color: var(--brand) !important; font-weight: 600; }
.mme-promo-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--brand-soft2); border-radius: 12px; padding: 13px 0; margin-bottom: 12px; }
.mme-promo-stats div { text-align: center; }
.mme-promo-stats div + div { border-left: 1px dashed var(--line); }
.mme-promo-stats b { display: block; font-size: 16px; color: var(--brand); }
.mme-promo-stats span { font-size: 10px; color: var(--txt3); }
.mme-link-row { display: flex; gap: 8px; }
.mme-link-row input { flex: 1; min-width: 0; height: 40px; background: var(--bg); border-radius: 10px; padding: 0 12px; font-size: 11.5px; color: var(--txt2); border: none; }
.mme-comm-h { margin: 12px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--txt); }
.mme-comm { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--bg); font-size: 11.5px; color: var(--txt3); }
.mme-comm b { color: var(--brand); font-size: 13px; }

/* ============ 底部导航 ============ */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; height: calc(56px + var(--safe-b));
  padding-bottom: var(--safe-b); background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 10px; color: var(--txt3); font-weight: 600; }
.tab .tb-ico { font-size: 20px; filter: none; transition: .18s; }
.tab.on { color: var(--brand); font-weight: 700; }
.tab.on .tb-ico { transform: translateY(-1px) scale(1.1); }

/* ============ 浮层 ============ */
#toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%); z-index: 99;
  background: rgba(var(--ink-rgb),.88); color: #fff; font-size: 12.5px; padding: 9px 18px; border-radius: 99px;
  max-width: 82%; text-align: center; animation: tIn .25s ease; }
@keyframes tIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.modal-mask { position: fixed; inset: 0; z-index: 300; background: rgba(var(--ink-rgb),.5); display: flex;
  align-items: flex-end; justify-content: center; animation: mIn .22s ease; }
@keyframes mIn { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + var(--safe-b));
  max-height: 78vh; overflow-y: auto; animation: mUp .26s ease; }
@keyframes mUp { from { transform: translateY(40%); } to { transform: none; } }
.modal h3 { font-size: 15.5px; margin-bottom: 12px; text-align: center; }
.svc-ul { list-style:none; margin:6px 0 2px; padding:0; }
.svc-ul li { font-size:13px; line-height:1.95; color:#444; }
.modal .close { position: absolute; }
.dl-box { background: var(--bg); border-radius: 12px; padding: 13px; font-size: 12.5px; word-break: break-all; line-height: 1.7; }
.dl-box b { color: var(--brand); }
.copy-btn { width: 100%; height: 40px; margin-top: 12px; border-radius: 99px; background: var(--brand-grad);
  color: #fff; font-weight: 700; font-size: 13.5px; }
.open-btn { width: 100%; height: 40px; margin-top: 8px; border-radius: 99px; background: var(--brand-soft);
  color: var(--brand-deep); font-weight: 700; font-size: 13.5px; }
.foot-note { margin: 10px 14px 4px; text-align: center; font-size: 10.5px; color: var(--txt3); }
.empty { text-align: center; color: var(--txt3); font-size: 12.5px; padding: 26px 0; }
.loading { text-align: center; color: var(--txt3); font-size: 12.5px; padding: 34px 0; }

/* ============ 首页·代做主推 ============ */
.mk-big { margin: 12px 14px 0; display: flex; align-items: center; gap: 10px; padding: 16px;
  background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); border-radius: 16px; color: #fff;
  box-shadow: 0 8px 22px rgba(var(--brand-rgb),.35); position: relative; overflow: hidden; }
.mk-big::after { content: '🎨️'; position: absolute; right: -14px; bottom: -16px; font-size: 78px; opacity: .12; }
.mkb-l { flex: 1; min-width: 0; }
.mkb-t { font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.mkb-s { font-size: 11.5px; opacity: .92; margin-top: 3px; }
.mkb-s2 { font-size: 11px; opacity: .8; margin-top: 1px; }
.mkb-s2 b { color: #FFE9B8; font-size: 13px; }
.mkb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mkb-chips span { font-size: 10px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px; padding: 2px 8px; }
.mkb-btn { flex: none; background: #fff; color: var(--brand-deep); font-weight: 800; font-size: 13px;
  border-radius: 99px; padding: 10px 16px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.mk-row2 { display: flex; gap: 10px; margin: 10px 14px 0; }
.mk-sub { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px;
  background: var(--card); border-radius: 13px; box-shadow: 0 4px 16px rgba(var(--ink-rgb),.06); font-size: 15px; }
.mk-sub b { font-size: 12.5px; }
.mk-sub span { font-size: 10.5px; color: var(--txt3); }
.mk-cats { margin: 12px 14px 0; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.mk-cats .lab { flex: none; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft);
  border-radius: 99px; padding: 4px 10px; }
.mk-cats .chips { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mk-cats .chips::-webkit-scrollbar { display: none; }
.mk-cats .chips span { flex: none; font-size: 11px; color: var(--txt3); background: var(--bg); border-radius: 99px; padding: 4px 10px; }

/* ============ 扫一扫（扫电脑端登录码） ============ */
#scanLayer { position: fixed; inset: 0; z-index: 120; background: #0D1020; display: flex; align-items: center;
  justify-content: center; }
#scanVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: relative; width: 72vw; max-width: 300px; aspect-ratio: 1; border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(8,10,30,.55); }
.scan-frame::before, .scan-frame::after { content: ''; position: absolute; width: 34px; height: 34px;
  border: 3.5px solid #5B7CFA; }
.scan-frame::before { left: -3px; top: -3px; border-right: none; border-bottom: none; border-radius: 14px 0 0 0; }
.scan-frame::after { right: -3px; bottom: -3px; border-left: none; border-top: none; border-radius: 0 0 14px 0; }
.scan-tip { position: absolute; left: 0; right: 0; bottom: calc(120px + var(--safe-b)); text-align: center;
  color: rgba(255,255,255,.85); font-size: 13px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#scanClose { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(48px + var(--safe-b));
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 14px;
  border-radius: 99px; padding: 10px 30px; }

/* ============ 多角色 AI 客服（设计师/代做/会员）· 手机底部抽屉 ============ */
body.ag-open { overflow: hidden; }
.mkb-ask { margin-top: 8px; align-self: flex-start; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 99px; }
.mkb-ask:active { background: rgba(255,255,255,.34); }
.btn-ghost { height: 42px; border-radius: 99px; background: var(--brand-soft2); border: 1px solid var(--brand-line); color: var(--brand-deep);
  font-weight: 700; font-size: 14px; }

.ag-sheet { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; }
.ag-sheet[hidden] { display: none !important; }
.ag-s-mask { position: absolute; inset: 0; background: rgba(10,26,20,.42); backdrop-filter: blur(1px); animation: agFade .18s ease-out; }
@keyframes agFade { from { opacity: 0; } to { opacity: 1; } }
.ag-s-body { position: relative; width: 100%; max-height: 88vh; height: 88vh; background: var(--card);
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden;
  animation: agUp .24s cubic-bezier(.2,.9,.3,1); padding-bottom: var(--safe-b); }
@keyframes agUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ag-s-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand-grad); color: #fff; flex: none; }
.ag-s-ava { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 19px; flex: none; overflow: hidden; }
.ag-s-ava-img { width: 100%; height: 100%; object-fit: cover; }
/* 微信式行布局 */
.ag-s-r { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.ag-s-r--me { flex-direction: row-reverse; }
.ag-s-ava2 { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 15px; overflow: hidden; user-select: none; }
.ag-s-ava2 img { width: 100%; height: 100%; object-fit: cover; }
.ag-s-b { max-width: 80%; }
.ag-s-card { background: #fff; border: 1px solid var(--brand-line); text-align: center; }
.ag-s-qr { width: 150px; height: 150px; border-radius: 10px; display: block; margin: 0 auto 4px; }
.ag-s-qr-cap { font-size: 11.5px; color: var(--txt3); line-height: 1.6; padding-bottom: 4px; }
.ag-s-qr-cap b { color: var(--txt); }
.ag-s-paybtn { display: block; width: 100%; margin-top: 6px; padding: 9px 0; border: 0; border-radius: 9px; background: var(--brand-grad); color: #fff; font-size: 13.5px; font-weight: 800; }
.ag-s-paybtn:active { filter: brightness(.95); }
.ag-s-hi { flex: 1; min-width: 0; }
.ag-s-hi b { display: block; font-size: 15px; font-weight: 800; }
.ag-s-hi i { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-style: normal; opacity: .92; margin-top: 1px; }
.ag-s-hi i em { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-bright); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.26); }
.ag-s-x { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 14px; }
.ag-s-wx { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--brand-soft2); border-bottom: 1px solid var(--brand-line); flex: none; }
.ag-s-wx > div { flex: 1; min-width: 0; }
.ag-s-wx b { display: block; font-size: 12.5px; color: var(--brand-deep); }
.ag-s-wx span { display: block; font-size: 12px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-s-wx button { flex: none; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-deep); font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px; }
#agSWxId { color: var(--brand-deep) !important; font-weight: 700; text-decoration: underline dotted; }
.ag-s-msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 8px; background: var(--brand-soft2); }
.ag-s-b { max-width: 80%; padding: 9px 12px; border-radius: 13px; font-size: 14px; line-height: 1.62; word-break: break-word; }
.ag-s-b--ai { background: #fff; border: 1px solid var(--line); border-top-left-radius: 5px; color: var(--txt); }
.ag-s-b--me { background: var(--brand-grad); color: #fff; margin-left: auto; border-top-right-radius: 5px; }
/* 气泡内微信号：高亮可点复制 */
.ag-wx-tap { color: var(--brand-deep); background: var(--brand-soft); border-bottom: 1px dashed var(--brand-line2); padding: 0 3px; border-radius: 4px; font-weight: 700; }
.ag-wx-tap:active { background: var(--brand-soft); }
.ag-s-b .ag-wx-copy { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 7px 13px; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--brand-grad); border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgba(20,120,80,.18); -webkit-tap-highlight-color: transparent; }
.ag-s-b .ag-wx-copy b { font-weight: 800; letter-spacing: .3px; }
.ag-s-b .ag-wx-copy:active { transform: scale(.97); }
.ag-s-b .ag-wx-copy.done { background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; }
.ag-s-typing .ag-s-b { display: inline-flex; gap: 4px; align-items: center; padding: 11px 13px; }
.ag-s-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--txt3); animation: agBlink 1.1s infinite; }
.ag-s-typing span:nth-child(2) { animation-delay: .18s; }
.ag-s-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes agBlink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.ag-s-chips { display: flex; gap: 6px; padding: 6px 12px 8px; flex-wrap: nowrap; overflow-x: auto; background: var(--brand-soft2); border-top: 1px solid var(--line); flex: none; }
.ag-s-chips::-webkit-scrollbar { display: none; }
.ag-s-chips button { flex: none; border: 1px solid var(--line); background: #fff; color: var(--txt2); font-size: 12.5px; padding: 6px 11px; border-radius: 99px; }
.ag-s-in { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; border-top: 1px solid var(--line); flex: none; }
.ag-s-in input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 99px; padding: 0 14px; font-size: 14px; background: var(--brand-soft2); color: var(--txt); }
.ag-s-in button { flex: none; height: 40px; padding: 0 18px; border-radius: 99px; background: var(--brand-grad); color: #fff; font-size: 14px; font-weight: 800; }

/* ============================================================
   v2 动效层（页面切换 / 按压反馈 / 流光 / 微光）
   ============================================================ */
@keyframes mPageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page:not([hidden]) { animation: mPageIn .32s ease both; }

/* 卡片按压回弹 */
.card, .tcard { transition: transform .18s ease, box-shadow .18s ease; }
.card:active, .tcard:active { transform: scale(.97); }

/* 底部 Tab 激活弹跳 */
@keyframes tabBounce { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.tab.on .tb-ico { animation: tabBounce .35s ease; display: inline-block; }

/* 会员开通卡 */

/* 主按钮按压 */
.btn-buy:active, .open-btn:active, .mkb-btn:active { transform: scale(.96); }
.btn-buy { transition: transform .15s ease; }

/* Toast 弹入 */
#toast { transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.45,.64,1); }
#toast:not([hidden]) { animation: mToastIn .28s cubic-bezier(.34,1.45,.64,1) both; }
@keyframes mToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 骨架占位微光（封面加载前） */
.tcard .cov { background: linear-gradient(100deg, var(--brand-soft2) 30%, var(--brand-soft) 50%, var(--brand-soft2) 70%); background-size: 200% 100%; animation: mShimmer 1.6s linear infinite; }
@keyframes mShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 模态上滑 */
.modal-mask:not([hidden]) { animation: mMaskIn .2s ease both; }
@keyframes mMaskIn { from { opacity: 0; } to { opacity: 1; } }
.modal-mask:not([hidden]) .modal { animation: mPopIn .3s cubic-bezier(.34,1.45,.64,1) both; }
@keyframes mPopIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============ 详情页功能补齐（对齐 PC 端） ============ */
.dt-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.dt-btn { width: 100%; height: 42px; border: 0; border-radius: 12px; font-size: 14px; font-weight: 700; }
.dt-btn--vip { background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--brand-line); }
.dt-btn--quick { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px -8px var(--brand); }
.dt-btn:active { transform: scale(.97); }
.dt-pills { display: flex; gap: 8px; }
.dt-pill { flex: 1; text-align: center; font-size: 12px; padding: 8px 0; border-radius: 999px;
  background: var(--brand-soft2); color: var(--brand); border: 1px solid var(--brand-line); }
.dt-sn { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px;
  background: var(--brand-soft2); border: 1px dashed var(--brand-line); border-radius: 10px; padding: 8px 10px; }
.dt-sn-l { font-size: 12px; color: var(--txt2); }
.dt-sn-l b { color: var(--brand); font-size: 13px; letter-spacing: .5px; }
.dt-sn-copy { flex: none; border: 0; background: var(--brand); color: #fff; font-size: 11.5px; border-radius: 999px; padding: 6px 12px; }
.dt-sn-copy.copied { background: var(--brand-deep); }
.dt-trust ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dt-trust li { font-size: 12.5px; color: var(--txt2); line-height: 1.9; padding-left: 18px; position: relative; }
.dt-trust li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.dt-trust li b { color: var(--txt); }
.dt-sim { margin: 14px 16px 0; }
.dt-sim .sec-h { margin-bottom: 8px; }

/* 快速代做弹窗（手机紧凑版） */
.qm-based { font-size: 12px; color: var(--txt3); margin: -6px 0 10px; text-align: center; }
.qm-based b { color: var(--txt); }
.qm-form { display: flex; flex-direction: column; gap: 8px; }
.qm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qm-form input, .qm-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; background: var(--bg); outline: none; }
.qm-form input:focus, .qm-form textarea:focus { border-color: var(--brand); }
.qm-form textarea { resize: none; font-family: inherit; }
.qm-pricebar { margin-top: 10px; background: var(--brand-soft2); border: 1px dashed var(--brand-line); border-radius: 10px; padding: 10px 12px; }
.qm-p-l { display: flex; align-items: baseline; gap: 8px; }
.qm-now { font-size: 22px; font-weight: 700; color: var(--brand); }
.qm-old { font-style: normal; font-size: 12px; color: var(--txt3); text-decoration: line-through; }
.qm-tag { font-size: 11px; color: #fff; background: var(--brand); border-radius: 999px; padding: 1px 8px; }
.qm-pricebar small { display: block; font-size: 11px; color: var(--txt3); margin-top: 3px; }
.qm-wx { margin-top: 8px; font-size: 12px; color: var(--txt2); background: var(--bg); border-radius: 8px; padding: 7px 10px; }
.qm-wx code { color: var(--brand); font-weight: 700; }
.qm-fix { margin-top: 8px; font-size: 12px; color: var(--brand-deep); }
.qm-fix b { color: var(--brand); }
.qm-agree { display: flex; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--txt3); line-height: 1.6; }
.qm-agree input { flex: none; margin-top: 2px; }
.qm-agree b { color: var(--txt2); }
.qm-tip { font-size: 11px; color: var(--txt3); text-align: center; margin: 8px 0 0; line-height: 1.6; }

/* ============ 淘宝式详情页（主图比例后台可配 16:9/1:1/3:4） ============ */
#page-detail { padding-bottom: calc(66px + var(--safe-b)); }
.dt-hero { position: relative; background: #fff; }
.dt-hero .dt-back { position: absolute; top: 10px; left: 10px; z-index: 3; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(18,18,34,.42); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 19px; line-height: 1; text-decoration: none; backdrop-filter: blur(6px); }
.dt-cover { margin: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
.dt-cover img { width: 100%; aspect-ratio: var(--dt-ar, 16/9); object-fit: cover; display: block; }
.dt-cover .ph { padding: 46px 20px; text-align: center; color: var(--txt3); font-size: 12.5px; }
.dt-covtag { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 11px; color: #fff;
  background: rgba(18,18,34,.5); border-radius: 999px; padding: 4px 11px; backdrop-filter: blur(6px); }
.dt-priceline { display: flex; align-items: baseline; gap: 8px; }
.dt-viptag { font-size: 10.5px; color: #8a5b0b; background: linear-gradient(135deg, #FFE9B8, #FFD666);
  border-radius: 999px; padding: 2px 9px; font-weight: 700; }
.dt-info .dt-meta { margin-top: 6px; }
/* 吸底购买栏（淘宝式：收藏 / 客服 / 立即购买） */
.dt-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 4px;
  background: var(--card); border-top: 1px solid var(--line); padding: 8px 12px calc(8px + var(--safe-b));
  box-shadow: 0 -4px 18px rgba(var(--ink-rgb), .06); }
.dt-bar-it { flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: 0; font-size: 17px; line-height: 1.2; color: var(--txt2); padding: 0; }
.dt-bar-it span { font-size: 10px; color: var(--txt3); }
.dt-bar-it.on { color: var(--brand); }
.dt-bar-it.on span { color: var(--brand); }
.dt-bar-buy { flex: 1; height: 42px; border: 0; border-radius: 999px; background: var(--brand-grad);
  color: #fff; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 16px -8px var(--brand); }
.dt-bar-buy:active { transform: scale(.97); }

/* 视频课试看按钮 */
.dt-btn--demo { background: #fff; color: var(--brand); border: 1.5px solid var(--brand-line); }

/* ============================================================
   淘宝式商品详情弹层（移植自原始版 style.css）
   作用域：仅 #previewMask/#gateMask/#daizuoMask 内生效，不影响现有页面
   ============================================================ */
.tb-mask, #gateMask, #daizuoMask {
  --text:      #1a1a1a;
  --text-sub:  #6b7c93;
  --accent:    #d4af37;
  --accent2:   #4f8cff;
  --border:    #e5e8f0;
}
/* 弹层显隐用 .show 类（与现有 hidden 机制并存，选择器限定 ID 防冲突） */
#previewMask, #gateMask, #daizuoMask {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh;        /* 兜底：老浏览器 */
  height: 100dvh;       /* 动态视口高度：排除手机浏览器/系统底部栏，底部栏不再被截断 */
  background: rgba(0,0,0,.92);
  z-index: 200;
  display: none;
  flex-direction: column;
}
#previewMask.show, #gateMask.show, #daizuoMask.show { display: flex; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  flex-shrink: 0;
}
.modal-header h3 {
  font-size: 15px; font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}

.preview-body {
  flex: 1;
  overflow-y: auto;
  display: flex; justify-content: center;
  padding: 0 16px;
  background: #1a1a1a;
}
.preview-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.modal-footer {
  background: #fff;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.nav {
  display: flex; align-items: center; gap: 10px;
}
.nav button {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
}
.nav button:disabled { opacity: .3; cursor: not-allowed; }
.nav .counter { font-size: 13px; color: var(--text-sub); }

.btn-primary {
  background: linear-gradient(135deg, #0a1929, #1a2942);
  color: var(--accent);
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.btn-primary:active { transform: scale(.97); }

/* ===== 激活码弹窗 ===== */
.gate {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px 20px;
  margin-top: auto;
  animation: slideUp .3s cubic-bezier(.2,.9,.3,1.2);
  /* 手机键盘弹出/内容超高时允许内部滚动，弹窗永不被顶出屏幕 */
  max-height: 86%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.gate::-webkit-scrollbar { display: none; }
/* 静默换取链接的 loading 态 */
.gate-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0 10px; color: #555; font-size: 14px; }
.spinner { width: 18px; height: 18px; border: 2px solid #e5e7eb; border-top-color: #6366f1; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp { from { transform: translateY(40px); opacity:0; } }

.gate h3 {
  font-size: 18px; font-weight: 700;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.gate .sub { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; }

.code-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  font-family: "Courier New", monospace;
  outline: none;
  background: #fffbeb;
}
.code-input:focus { border-color: var(--accent2); background: #f0f7ff; }

.btn-block {
  width: 100%;
  background: linear-gradient(135deg, #0a1929, #1a2942);
  color: var(--accent);
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-block:active { transform: scale(.99); }

.qr-area {
  text-align: center;
  padding: 20px 0 0;
  border-top: 1px dashed var(--border);
  margin-top: 20px;
}
.qr-area p { font-size: 13px; color: var(--text-sub); margin-bottom: 12px; }
.qr-img {
  width: 140px; height: 140px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.qr-img img { width: 100%; height: 100%; display: block; }
.qr-tip { font-size: 12px; color: var(--accent); margin-top: 10px; font-weight: 600; }

.pan-result {
  display: none;
  background: linear-gradient(135deg, #fff8e7, #fffaf0);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.pan-result.show { display: block; }
.pan-result h4 {
  color: var(--text);
  font-size: 14px;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.pan-result h4 .ico { color: var(--accent); }
.pan-link {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--text);
  font-family: "Courier New", monospace;
  word-break: break-all;
  margin-bottom: 10px;
  border: 1px solid #f0e3b8;
}
.btn-copy {
  width: 100%;
  background: var(--brand);
  color: var(--accent);
  border: none;
  padding: 11px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-copy:active { transform: scale(.98); }
.btn-copy.copied { background: #22c55e; color: #fff; }

.use-guide {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 10px;
  line-height: 1.5;
}
.use-guide strong { color: var(--accent); }

.tb-mask { background:#f5f5f7 !important; }
/* 详情页顶部栏：返回（左）+ 关闭 X（右）。中间不放标题，避免与下方 tb-info 重复 */
.tb-topbar {
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  color:#fff; gap:10px;
}
.tb-back {
  height:34px; border-radius:17px;
  background:rgba(0,0,0,.42); color:#fff; border:none;
  font-size:22px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
.tb-back { width:auto; padding:0 14px 0 6px; gap:2px; }
.tb-back:active { background:rgba(0,0,0,.62); }
.tb-back .tb-back-ico { font-size:22px; line-height:1; margin-top:-3px; }
.tb-back .tb-back-txt { font-size:14px; font-weight:500; }
/* 右上角：会员中心胶囊（替代原 X 关闭按钮） */
.tb-vip-entry {
  height:32px; padding:0 14px; border-radius:16px; border:none; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; gap:4px; font-size:13px; font-weight:700; white-space:nowrap;
  background:linear-gradient(90deg,#ffd86b,#ff9d00); color:#5a3200;
  box-shadow:0 2px 8px rgba(0,0,0,.25); backdrop-filter:blur(6px);
}
.tb-vip-entry:active { transform:scale(.96); }
/* 滚动区 */
.tb-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(70px + var(--safe-b)); }
/* 主图轮播 */
.tb-gallery { position:relative; width:100%; background:#fff; }
.tb-gallery-main { width:100%; height:340px; overflow:hidden; }
.tb-gallery-main img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tb-gal-nav { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:44px; border:none; background:rgba(0,0,0,.25); color:#fff; font-size:22px; cursor:pointer; }
.tb-gal-nav.prev { left:0; border-radius:0 8px 8px 0; }
.tb-gal-nav.next { right:0; border-radius:8px 0 0 8px; }
.tb-gal-count { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.4); color:#fff; font-size:12px; padding:2px 10px; border-radius:20px; }
.tb-collect { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.4); color:#fff; font-size:13px; border:none; border-radius:20px; padding:5px 12px; cursor:pointer; }
/* 信息区 */
.tb-info { background:#fff; padding:14px 14px 12px; }
.tb-price-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.tb-price { color:var(--red); font-size:26px; font-weight:800; }
.tb-price.free { color:var(--red); }
.tb-price .tb-del { color:var(--txt3); font-size:15px; font-weight:500; margin-right:6px; }
.tb-price .tb-zero { color:var(--brand); font-weight:800; }
.tb-price:before { content:''; }
.tb-sold { font-size:12px; font-weight:700; color:#b8860b; padding:4px 12px; border-radius:999px; background:linear-gradient(90deg,#fff4e5,#fff1e0); border:1px solid #f6dfa8; }
.tb-title { font-size:16px; font-weight:600; color:#111; line-height:1.5; margin:0 0 10px; }
.tb-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tb-tag { background:var(--brand-soft); color:var(--brand); font-size:11px; padding:3px 8px; border-radius:4px; }
.tb-tag b { font-weight:600; }
/* 代做 */
.tb-daizuo { display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(90deg,var(--brand-soft2),#fff); margin:10px; padding:12px 14px; border-radius:10px; }
.tb-daizuo .dz-txt { flex:1; min-width:0; }
.tb-daizuo span { font-size:13px; color:var(--txt2); }
.tb-daizuo .dz-promo { font-size:12px; color:var(--brand); margin-top:4px; }
.tb-daizuo .dz-btn, .tb-daizuo button { flex-shrink:0; background:var(--brand-grad); color:#fff; border:none; border-radius:20px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.dz-hero { color:var(--brand); font-size:18px; font-weight:800; }
.hl2 { color:var(--brand); }
.dz-steps { margin-top:14px; font-size:12px; color:#999; }
/* 服务保障 */
.tb-svc { background:#fff; margin:10px 0; padding:6px 14px; }
.tb-svc-row { padding:9px 0; font-size:13px; color:#555; border-bottom:1px solid #f5f5f5; }
.tb-svc-row:last-child { border-bottom:none; }
.tb-svc-row .ico { margin-right:8px; }
/* 评价 */
.tb-reviews { background:#fff; margin:10px 0; padding:12px 14px; }
.tb-rev-head { display:flex; align-items:center; gap:10px; font-size:13px; color:#333; padding-bottom:10px; border-bottom:1px solid #f5f5f5; }
.tb-rev-head b { color:var(--brand); }
.tb-rev-head .hl { font-size:15px; }
.tb-rev-head button { margin-left:auto; border:none; background:none; color:#999; font-size:12px; cursor:pointer; }
.tb-rev-item { padding:12px 0; border-bottom:1px solid #f5f5f5; }
.tb-rev-item:last-child { border-bottom:none; }
.tb-rev-user { font-size:13px; color:#333; display:flex; align-items:center; gap:8px; }
.tb-rev-score { color:#ff9500; font-size:12px; }
.tb-rev-tag { background:var(--brand-soft); color:var(--brand); font-size:10px; padding:1px 6px; border-radius:3px; }
.tb-rev-text { font-size:13px; color:#555; margin-top:6px; }
.tb-rev-date { font-size:11px; color:#bbb; margin-top:5px; }
/* 详情长图 */
.tb-detail { background:#fff; margin-top:10px; padding-bottom:24px; }
.tb-detail-title { font-size:15px; font-weight:700; color:#333; padding:12px 14px; }
.tb-detail img { width:100%; display:block; }
/* 底部操作栏 */
/* 底部操作栏：淘宝式（左 首页/客服/收藏 图标 + 右 立即购买/开通会员 按钮） */
.tb-bar { position:fixed; left:0; right:0; bottom:0; z-index:210; display:flex; align-items:center; background:#fff; border-top:1px solid #eee; height:calc(56px + var(--safe-b)); padding-bottom:var(--safe-b); box-shadow:0 -2px 10px rgba(0,0,0,.06); }
.tb-acts { display:flex; align-items:center; flex:0 0 auto; }
.tb-bar-item { flex:0 0 auto; width:56px; padding:0 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; line-height:1.15; white-space:nowrap; color:#666; cursor:pointer; }
.tb-bar-item span { font-size:19px; margin-bottom:2px; line-height:1; }
.tb-bar-item:active { opacity:.6; }
.tb-btns { flex:1; display:flex; align-items:center; gap:8px; padding:0 8px 0 4px; }
/* 右侧按钮用 .tb-btns 作用域锁定，避免被下方 .tb-btn-cart 通用规则覆盖 flex/配色 */
.tb-btns .tb-btn-cart { flex:1; margin:0; background:var(--brand-grad); border:none; border-radius:24px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; height:44px; box-shadow:0 6px 16px rgba(var(--brand-rgb),.35); padding:0 6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-btns .tb-btn-buy { flex:1.15; margin:0; background:linear-gradient(90deg,#ffd86b,#ff9d00); border:none; border-radius:24px; color:#5a3200; font-size:13px; font-weight:700; cursor:pointer; height:44px; box-shadow:0 6px 16px rgba(232,147,12,.3); padding:0 6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 单独付费素材横幅（主图下方，聚划算式标签，文案后台可改） */
.tb-mustpay { display:none; margin:8px 12px 0; padding:7px 12px; border-radius:10px; background:linear-gradient(90deg,#fff3e0,#ffe3d6); border:1px solid #ffd0b0; color:#c2410c; font-size:13px; font-weight:700; text-align:center; letter-spacing:.5px; }
.tb-btns .tb-btn-cart:active, .tb-btns .tb-btn-buy:active { transform:scale(.97); }

/* ===== 独立搜索页 ===== */
.search-page {
  position:fixed; inset:0; z-index:150;
  margin:0 auto; max-width:480px;       /* 与首页 .app 同宽，桌面端也不被拉成"平铺大白页" */
  background:#f5f5f7;
  box-shadow:0 0 0 1px var(--border);
  display:none; flex-direction:column;
  overflow-y:auto;                    /* 关键：列表页必须能滚动，否则只能看到首屏几条 */
  -webkit-overflow-scrolling:touch;   /* iOS 惯性滚动 */
  overscroll-behavior:contain;        /* 防止滚动穿透到 body */
}
.search-page.show { display:flex; }
/* 列表页网格留出底部间距，避免最后一行贴边/被遮 */
#catPage .grid2, #searchPage .grid2 { padding:10px 10px 4px; }

/* ===== App 风格统一顶栏（所有二级页共用） ===== */
.app-bar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center;
  height:48px; padding:0 6px;
  background:#fff;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ab-back, .ab-home {
  width:40px; height:40px; border:none; background:transparent;
  color:var(--text); font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border-radius:50%;
}
.ab-back:active, .ab-home:active { background:#f2f3f5; }
.ab-title {
  flex:1; margin:0; text-align:center;
  font-size:16px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 4px;
}
.ab-home { font-size:20px; color:var(--accent2); }

/* 搜索框（独立行，不挤在顶栏里） */
.sp-search-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:#fff;
  border-bottom:1px solid var(--border);
}
.sp-search-bar .sp-ico { margin:0 6px 0 4px; color:#999; font-size:14px; }
.sp-search-bar input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:14px; color:var(--text); padding:0;
}
.sp-btn {
  background:linear-gradient(90deg,#ff5000,#ff2d2d); color:#fff;
  border:none; border-radius:18px; padding:7px 14px;
  font-size:14px; font-weight:600; cursor:pointer; flex-shrink:0;
}
.sp-more { display:block; width:calc(100% - 24px); margin:14px 12px; padding:11px; background:#fff; border:none; border-radius:10px; color:#ff5000; font-size:14px; font-weight:600; cursor:pointer; }

/* 面包屑（细灰字辅助提示，紧贴顶栏下） */
.sp-breadcrumb {
  display:flex; align-items:center; gap:4px;
  padding:7px 14px; font-size:12px; color:#999;
  background:#fafbfc; border-bottom:1px solid var(--border);
}
.sp-breadcrumb .sep { color:#c0c4cc; padding:0 2px; }
.sp-breadcrumb span:last-child { color:#555; font-weight:500; }

/* ===== 分类专属页 ===== */
.cat-page .cp-title { flex:1; font-size:16px; font-weight:700; color:#111; }
.cp-banner { position:relative; height:132px; overflow:hidden; flex-shrink:0; border-bottom:1px solid var(--border); }
.cp-banner img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* 底部渐隐，让 banner 与下面列表过渡自然 */
.cp-banner::after { content:''; position:absolute; left:0; right:0; bottom:0; height:22px; background:linear-gradient(180deg,rgba(245,245,247,0),rgba(245,245,247,.85)); pointer-events:none; }
.cp-banner-fallback {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,#0a1929,#1d3557 60%,#2b6cff);
  font-size:46px;
}
.tb-barrage {
  position:absolute; top:94px; right:0;   /* 下移到「返回 / ID 徽标」下方，避免相互压字 */
  z-index:3; pointer-events:none;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  max-width:100%;
}

/* ===== 激活码说明（4档） ===== */
.code-guide { margin:14px 0 2px; background:#f8f9fb; border:1px solid #eef0f4; border-radius:10px; padding:10px 12px; }
.cg-title { font-size:13px; font-weight:700; color:#333; margin-bottom:6px; }
.cg-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed #e8e8ee; }
.cg-row:last-of-type { border-bottom:none; }
.cg-ico { font-size:18px; flex-shrink:0; }
.cg-txt { flex:1; display:flex; flex-direction:column; min-width:0; }
.cg-txt b { font-size:13px; color:#111; }
.cg-txt span { font-size:11px; color:#888; margin-top:2px; }
/* ★ 用户定调：详情主图 PPT/Word 统一 3:4，从上到下裁剪 */
.tb-gallery-main { height: auto !important; aspect-ratio: 3 / 4; }
.tb-gallery-main img { object-position: top; }

/* ===== 详情补充规则（散段移植） ===== */
.tb-mask, #gateMask, #daizuoMask { --card: #ffffff; --shadow: 0 4px 20px rgba(0,0,0,.08); }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: rgba(255,255,255,.2); }
.hl2 { color:var(--brand); }
.barrage-layer {
  position:fixed;
  top:70px; right:12px;
  z-index:150;
  pointer-events:none;
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-end;
}
.barrage {
  background:rgba(10,25,41,.82);
  color:#fff;
  font-size:12px;
  padding:8px 14px;
  border-radius:20px;
  border:1px solid var(--accent);
  max-width:280px;
  opacity:0;
  transform:translateX(120%);
  transition:all .4s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.barrage.show { opacity:1; transform:translateX(0); }
.gate-quota {
  margin:10px 0 2px; padding:10px 12px;
  background:linear-gradient(120deg,#fffaf0,#fff); border:1px solid #f2e6c8; border-radius:10px;
  font-size:12px; color:#7a5c00; line-height:1.6;
}

/* =================================================
   详情页 · 资源货号（标题旁一键复制）
   ================================================= */
.tb-sn-row { display:flex; align-items:center; gap:6px; margin:6px 0 0; }
.tb-sn-label { font-size:11px; color:var(--text-sub); }
.tb-sn { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:var(--accent2,#4f8cff); letter-spacing:.5px; }
.tb-sn-copy {
  margin-left:auto; border:1px solid #cfe0ff; background:#f2f7ff; color:#2b6cff;
  font-size:11px; padding:3px 9px; border-radius:12px; cursor:pointer; white-space:nowrap;
}
.tb-sn-copy:active { background:#dceaff; }
.cg-buy {
  flex-shrink:0; border:none; border-radius:15px;
  padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg,#4f8cff,#6cb0ff); color:#fff;
}
.cg-buy:active { opacity:.85; }
.cg-buy-hot { background:linear-gradient(90deg,#ff6b6b,#ff9a6b); }
.tb-similar { margin:10px 12px 6px; padding:12px; background:var(--card); border-radius:14px; box-shadow:var(--shadow); }
.sim-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.sim-cell {
  background:#f7f9fc; border-radius:10px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
}
.sim-cell:active { transform:scale(.97); }
.sim-cell img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; display:block; background:#eef1f6; }
.sim-name {
  font-size:11px; color:#3a4356; padding:5px 6px 2px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:34px;
}
.sim-price { font-size:12px; font-weight:800; color:#ff5b3a; padding:0 6px 6px; }
.sim-price .free { font-style:normal; color:#1aad4b; }

/* AI客服卡片：复制引导 */
.ai-guide {
  margin-top:8px; padding:8px 10px;
  background:rgba(79,140,255,.08); border:1px dashed rgba(79,140,255,.35);
  border-radius:10px; font-size:11.5px; line-height:1.7; color:#5a6b85;
}

/* ===== 主图显示比例（后台「营销与展示」可配） =====
   rgrid-*  = 主页/列表页/相似推荐卡片主图
   rdetail-*= 详情页主图（淘宝式主图 + 简版封面都覆盖） */
body.rgrid-11 .grid2 .cell .thumb { aspect-ratio: 1/1; }
body.rgrid-11 .sim-cell img { aspect-ratio: 1/1; }
body.rgrid-34 .grid2 .cell .thumb { aspect-ratio: 3/4; }
body.rgrid-34 .sim-cell img { aspect-ratio: 3/4; }
body.rdetail-11 .tb-gallery-main,
body.rdetail-11 .detail-cover { height:auto; aspect-ratio: 1/1; }
body.rdetail-34 .tb-gallery-main,
body.rdetail-34 .detail-cover { height:auto; aspect-ratio: 3/4; }

/* ============ Batch6 ============ */
/* 写评价弹窗（此前 .gate-mask/.gate-card 无样式 → 弹窗不可见，点「评价」像跳回首页） */
.gate-mask { position: fixed; inset: 0; z-index: 400; background: rgba(8,16,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gate-card { background: #fff; color: #182233; border-radius: 16px; padding: 16px; width: 100%; max-width: 340px; max-height: 80vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }

/* 详情页「下载流程广告位」（评价与商品详情之间，后台可开关） */
.tb-ad { background: linear-gradient(135deg, #fff7ec, #ffefd6); border: 1px solid #ffd9a0; border-radius: 12px; margin: 10px 0; padding: 12px 14px; }
.tb-ad .tb-ad-title { font-size: 14px; font-weight: 800; color: #b25e00; margin-bottom: 6px; }
.tb-ad .tb-ad-body { font-size: 13px; color: #7a4a08; line-height: 1.9; }

/* 首页工作台入口：图片图标（后台可配图片 URL） */
.entry .icon img { width: 30px; height: 30px; object-fit: cover; border-radius: 8px; display: block; }

/* 详情页付费模板购买区（所有人都要付款，会员折扣价/原价） */
.buy-box { background: #fff8f0; border: 1px solid #ffd9a0; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.buy-box .buy-head { font-size: 14px; font-weight: 800; color: #b25e00; margin-bottom: 10px; }
.buy-box .buy-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed #f0d9b8; font-size: 13px; color: #5c4321; }
.buy-box .buy-row b { flex: 1; font-size: 16px; color: #d8261c; }
.buy-box .buy-row b.vip-p { color: #c07818; }
.buy-box .buy-row button { border: 0; background: linear-gradient(135deg, #ff9f2e, #ff7a00); color: #fff; font-weight: 700; border-radius: 18px; padding: 8px 14px; font-size: 13px; }
.buy-box .buy-row button.ghost { background: #fff; color: #ff7a00; border: 1.5px solid #ff9f2e; }
.buy-box .buy-alt { font-size: 12px; color: #8a6a3a; margin-top: 8px; }
.buy-box .buy-alt a { color: #0a66e8; }
.buy-box .buy-or { font-size: 11px; color: #b08a55; margin-top: 4px; text-align: center; }

/* 个人中心 · 下载记录：评价按钮独立一列（不再叠在商品行上） */
.me-dl-row { display: flex; align-items: stretch; gap: 8px; }
.me-dl-row .me-item { flex: 1; min-width: 0; }
.me-review-btn { border: 1.5px solid #f0c86a; background: #fffaef; color: #b07900; border-radius: 10px; width: 46px; font-size: 16px; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.me-review-btn i { font-style: normal; font-size: 11px; }

/* ===== 邮寄/会员价区（淘宝式价格行 + 底部栏三件套） ===== */
.tb-vip-cap { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:linear-gradient(90deg,#ff9d00,#ff6a00); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.tb-vip-cap.clickable { cursor:pointer; }
.tb-vip-cap.clickable:active { transform:scale(.96); }
.tb-price.strike { text-decoration:line-through; opacity:.75; }
.tb-btn-cart { flex:1.3; margin:0 6px 0 6px; background:linear-gradient(90deg,#ffd400,#ffb400); border:none; border-radius:24px; color:#5a3200; font-size:14px; font-weight:700; cursor:pointer; }
.tb-btn-cart:active { transform:scale(.97); }
@media (max-width:359px) { .tb-btn-cart, .tb-btn-buy { font-size:12px; } }

/* ===== PC 式发货助手卡片（tb-shipcard：货号+发货说明+AI聊天，移植自 PC 详情侧栏） ===== */
.tb-shipcard { margin:10px 0; padding:14px; background:#fff; border:1px solid #ffe3c8; border-radius:12px; display:flex; flex-direction:column; gap:9px; }
.tb-pills { display:flex; gap:8px; }
.tb-pill { flex:1; text-align:center; font-size:12px; font-weight:700; padding:8px 0; border-radius:20px; text-decoration:none; }
.tb-pill--make { background:var(--brand-grad); color:#fff; }
.tb-pill--bty { background:var(--brand-soft); color:var(--brand); }
.tb-sn2 { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#faf7f2; border-radius:10px; padding:8px 10px; }
.tb-sn2-l { font-size:13px; color:#5a4a33; }
.tb-sn2-l b { color:#1f1408; }
.tb-sn2-copy { border:none; background:var(--brand-grad); color:#fff; font-size:12px; font-weight:700; border-radius:20px; padding:8px 12px; cursor:pointer; white-space:nowrap; }
.tb-sn2-copy.copied { background:#22a35c; }
.tb-shipnote { background:#fffbe8; border:1px solid #ffe9a8; border-radius:10px; padding:8px 10px; font-size:12px; line-height:1.6; color:#8a6d1c; display:flex; flex-direction:column; }
.tb-shipnote b { color:#b8860b; margin-bottom:2px; }
.tb-chattabs { border:1px solid #efe7db; border-radius:12px; overflow:hidden; }
.tb-chat-h { display:flex; align-items:center; gap:6px; background:#f7f3ec; padding:7px 8px; }
.tb-ctab { flex-shrink:0; border:none; background:transparent; font-size:12.5px; color:#8a7c66; padding:5px 10px; border-radius:16px; cursor:pointer; }
.tb-ctab.on { background:#fff; color:#ff5000; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.tb-chat-status { margin-left:auto; font-size:11px; color:#22a35c; display:flex; align-items:center; gap:4px; }
.tb-chat-status em { width:7px; height:7px; border-radius:50%; background:#22a35c; display:inline-block; }
.tb-chatpane { display:none; }
.tb-chatpane.on { display:block; }
.tb-chatmsgs { height:230px; overflow-y:auto; padding:10px; background:#fff; display:flex; flex-direction:column; gap:8px; }
.tb-chatmsgs .ai-bubble { max-width:86%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.6; word-break:break-word; }
.tb-chatmsgs .ai-bubble a { color:#2b6bd8; }
.tb-chatmsgs .ai-bubble.ai-ai { align-self:flex-start; background:#f4f1ec; color:#3d3630; border-top-left-radius:4px; }
.tb-chatmsgs .ai-bubble.ai-me { align-self:flex-end; background:#ffe9d6; color:#7a3c00; border-top-right-radius:4px; }
.tb-chatmsgs .ai-copy { display:block; margin-top:6px; border:none; background:#ff5000; color:#fff; font-size:11.5px; font-weight:700; border-radius:14px; padding:5px 12px; cursor:pointer; }
.tb-chatmsgs .ai-typing span { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c9bfb2; margin-right:3px; animation:dzBlink 1.2s infinite; }
.tb-chatmsgs .ai-typing span:nth-child(2) { animation-delay:.2s; }
.tb-chatmsgs .ai-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes dzBlink { 0%,80%,100% { opacity:.3; } 40% { opacity:1; } }
.tb-chatcaps { display:flex; gap:8px; padding:8px 10px 0; }
.tb-cap { flex:1; border:1px solid #ffd2b8; background:#fff7f2; color:#ff5000; font-size:12px; font-weight:700; border-radius:16px; padding:7px 0; cursor:pointer; }
.tb-cap--bty { border-color:#f2dfae; background:#fffaf0; color:#b8860b; }
.tb-chatin { display:flex; gap:8px; padding:8px 10px 10px; }
.tb-chatin input { flex:1; min-width:0; border:1.5px solid #e8ddcf; border-radius:18px; padding:8px 12px; font-size:13px; outline:none; background:#fbf9f6; font-family:inherit; }
.tb-chatin input:focus { border-color:#ffb03a; }
.tb-chatin button { border:none; background:linear-gradient(90deg,#ffb03a,#ff8f0a); color:#fff; font-size:13px; font-weight:800; border-radius:18px; padding:8px 16px; cursor:pointer; }
.tb-desctx { margin:0; padding:12px; font-size:13px; line-height:1.8; color:#5a5248; background:#fff; }
.tb-desctx b { color:#ff5000; }
.tb-descqr { display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 12px 14px; }
.tb-descqr img { width:150px; height:150px; object-fit:contain; border:1px solid #eee; border-radius:8px; }
.tb-descqr span { font-size:12px; color:#8a7c66; }
.tb-kinderow { display:flex; }
.tb-kindbtn { flex:1; border:none; background:linear-gradient(90deg,#ffb03a,#ff8f0a); color:#fff; font-size:13.5px; font-weight:800; border-radius:20px; padding:10px 0; cursor:pointer; }
.tb-kindbtn:active { transform:scale(.98); }

/* ============================================================
   中医 APP 改版（20261103i）：宫格 / 热门课程 / 精品分享 / 收款码弹层
   ============================================================ */
/* 8 宫格（两行，对齐 PC 全部入口） */
.cat-grid--8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
.cat-grid--8 .cat-it { padding: 10px 2px; }
.cat-grid--8 .cat-it .em { font-size: 24px; }
.cat-grid--8 .cat-it b { font-size: 11.5px; display: block; margin-top: 4px; color: var(--txt, #3C2C1E); }
.cat-grid--8 .cat-it i { font-size: 9.5px; color: #A08D77; font-style: normal; }

/* 名师热门课程：2 列卡片 */
.hgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hgrid .tcard { margin: 0; width: auto; }
.sec-h .more2 { margin-left: auto; font-size: 12px; color: var(--brand, #9E3B32); font-weight: 600; }

/* 精品分享页 */
.mhead--sub { border-radius: 0 0 18px 18px; margin-bottom: 10px; }
.shop-tabs { display: flex; gap: 8px; padding: 12px 14px 4px; }
.shop-tab { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--brand-line, #E2CDAA);
  background: #FFFDF6; color: #6B5B4B; font-weight: 700; font-size: 13.5px; letter-spacing: 1px; }
.shop-tab.on { background: var(--brand-grad, linear-gradient(135deg,#B5544A,#7A2A24)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(158,59,50,.25); }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 14px 16px; }
.shop-card { background: #FFFDF6; border: 1px solid var(--brand-line, #E2CDAA); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(60,44,30,.06); }
.sc-img { aspect-ratio: 1 / 1; background: #F5EDE0; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-img .ph { display: flex; align-items: center; justify-content: center; height: 100%; color: #B6A48C; font-size: 12px; }
.sc-bd { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 4px; }
.sc-t { font-size: 13px; color: #3C2C1E; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-sub { font-size: 11px; color: #A08D77; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.sc-price { color: #B5544A; font-weight: 800; font-size: 15px; }
.sc-price i { font-style: normal; font-weight: 500; font-size: 10px; color: #A08D77; }
.sc-buy { border: none; background: var(--brand-grad, linear-gradient(135deg,#B5544A,#7A2A24)); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.sc-sales { font-size: 10px; color: #B6A48C; }

/* 弹层内输入框 / 付款元素（移动端统一） */
.modal .mi { width: 100%; height: 42px; background: #F7F1E5; border: 1px solid var(--brand-line, #E2CDAA);
  border-radius: 10px; padding: 0 13px; font-size: 14px; margin-bottom: 9px; box-sizing: border-box; color: #3C2C1E; }
.modal .mi:focus { outline: none; border-color: var(--brand, #9E3B32); }
.m-pay { text-align: center; font-size: 26px; font-weight: 800; color: #B5544A; margin: 4px 0 10px; }
.m-pay span { font-size: 12px; color: #A08D77; font-weight: 500; }
.m-no { text-align: center; font-size: 12px; color: #6B5B4B; background: #F7F1E5; border-radius: 8px; padding: 7px; margin: 8px 0; }
.m-no b { color: #9E3B32; }
.m-tip-s { font-size: 11.5px; color: #A08D77; line-height: 1.7; margin: 8px 0 0; text-align: center; }
.qr-tabs-m { display: flex; gap: 8px; margin-bottom: 10px; }
.qr-tabs-m button { flex: 1; height: 36px; border-radius: 999px; border: 1px solid var(--brand-line, #E2CDAA);
  background: #FFFDF6; color: #6B5B4B; font-size: 13px; font-weight: 700; }
.qr-tabs-m button.on { background: var(--brand-grad, linear-gradient(135deg,#B5544A,#7A2A24)); color: #fff; border-color: transparent; }
.qr-big { display: flex; justify-content: center; padding: 6px 0 2px; }
.qr-big img { width: 200px; height: 200px; object-fit: contain; border-radius: 12px; border: 1px solid var(--brand-line, #E2CDAA); background: #fff; }

/* 我的精品订单 */
.so-it { border: 1px solid var(--brand-line, #E2CDAA); border-radius: 12px; padding: 10px 12px; margin-top: 9px; background: #FFFDF6; }
.so-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.so-r b { font-size: 13.5px; color: #3C2C1E; }
.so-st { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; flex: none; }
.so-st--0 { background: #F1E7D2; color: #8A5A2B; }
.so-st--2 { background: #FFF3DC; color: #B7791F; }
.so-st--1 { background: #E8F3E8; color: #2F855A; }
.so-st--4 { background: #E8F0FB; color: #2B6CB0; }
.so-st--3 { background: #F0F0F0; color: #999; }
.so-r2 { display: flex; justify-content: space-between; font-size: 11.5px; color: #A08D77; margin-top: 5px; }

/* ============================================================
   发货助手聊天窗 3D 立体化（20261103k）：与卡片底色区分 + 立体层次
   ============================================================ */
.tb-chattabs {
  border: 1px solid #E2CDAA; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #FFFDF6 0%, #F8EFDD 100%);
  box-shadow: 0 4px 0 #D9C193, 0 12px 26px rgba(90, 60, 30, .18), inset 0 1px 0 #FFFFFF;
}
/* 标题栏：品牌红立体顶栏 */
.tb-chat-h {
  background: linear-gradient(180deg, #A8433A 0%, #8E332B 100%);
  padding: 9px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 5px rgba(90, 25, 18, .35), 0 2px 4px rgba(120, 50, 40, .3);
}
.tb-ctab { color: #F2D8C4; }
.tb-ctab.on { background: linear-gradient(180deg, #FFFDF6, #F5E9D2); color: #9E3B32; box-shadow: 0 2px 5px rgba(60, 20, 10, .35), inset 0 1px 0 #FFFFFF; }
.tb-chat-status { color: #FFD9A8; }
/* 消息区：凹陷画布 */
.tb-chatmsgs {
  background: linear-gradient(180deg, #FDFAF1 0%, #F6EDDA 100%);
  box-shadow: inset 0 3px 9px rgba(120, 85, 40, .14), inset 0 -1px 3px rgba(120, 85, 40, .08);
}
.tb-chatmsgs .ai-bubble.ai-ai { background: #FFFFFF; color: #3D3226; box-shadow: 0 2px 6px rgba(120, 85, 40, .16); border: 1px solid #F0E4CE; }
.tb-chatmsgs .ai-bubble.ai-me { background: linear-gradient(180deg, #B5544A, #9E3B32); color: #FFF6EC; box-shadow: 0 3px 8px rgba(140, 55, 45, .3); }
.tb-chatmsgs .ai-copy { background: linear-gradient(180deg, #B5544A, #8E332B); box-shadow: 0 2px 0 #6E241D; }
/* 输入区：立体发送按钮 */
.tb-chatin input { background: #FFFFFF; border-color: #E2CDAA; box-shadow: inset 0 2px 4px rgba(120, 85, 40, .08); }
.tb-chatin input:focus { border-color: #B5544A; }
.tb-chatin button {
  background: linear-gradient(180deg, #B5544A 0%, #8E332B 100%);
  box-shadow: 0 3px 0 #6E241D, 0 6px 12px rgba(130, 50, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tb-chatin button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6E241D; }
/* 胶囊按钮对齐中医主题色 */
.tb-cap { border-color: #E8C4BC; background: #FFF9F5; color: #9E3B32; box-shadow: 0 2px 0 #E8C4BC; }
.tb-cap:active { transform: translateY(1px); box-shadow: 0 1px 0 #E8C4BC; }
.tb-cap--bty { border-color: #E2CDAA; background: #FFFBF0; color: #A07A28; box-shadow: 0 2px 0 #E2CDAA; }
.tb-ctab.on { color: #9E3B32; }
.tb-desctx b { color: #9E3B32; }

/* 商城卡片「详情」按钮（20261103l） */
.sc-det { border: 1px solid var(--brand-line, #E2CDAA); background: #FFFDF6; color: #9E3B32;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 12px; margin-right: 6px; }