/* ============================================================
   馈赠金营销平台 · Design Tokens
   视觉语言提炼自 设计风格参考/ (Bitget Wallet)

   执行要点（从参考图提炼）：
   1. 页面底不是纯灰，而是上下各一层极淡的青晕，卡片靠底色浮起
   2. 卡片纯白 + 大圆角 + 近乎无阴影；只有「浮层」才投影
   3. 图标是圆角方块（--r-ic），墨底青字，不是圆形
   4. 数字用超大字重 + 等宽，标签用 12px 弱灰，对比拉满
   ============================================================ */
:root {
  /* 底色 / 表面 */
  --bg:          #E8EBED;
  --page:        #F6F8F9;
  --surface:     #FFFFFF;
  --surface-2:   #EFF2F4;
  --surface-3:   #E4E8EB;

  /* 页面青晕（顶 / 底） */
  --wash-1:      #E6FAFD;
  --wash-2:      #EAF9FB;

  /* 主色：高饱和青 */
  --primary:     #3DD9E9;
  --primary-600: #12C3D8;
  --primary-700: #0A8B9E;
  --primary-ink: #04222A;
  --primary-50:  #E4FAFD;

  /* 深墨 */
  --ink:         #17191C;
  --ink-deep:    #22262A;   /* 深色卡片 / logo 渐变的浅端 */
  --ink-2:       #6A7178;
  --ink-3:       #9BA1A8;
  --ink-4:       #C7CCD1;

  /* 语义色 + 对应浅底 / 深字 */
  --up:          #16C784;
  --up-50:       #E4F7EF;
  --up-700:      #0E9E68;
  --down:        #F6465D;
  --down-50:     #FDE8EB;
  --down-700:    #C42539;
  --warn:        #F5A623;
  --warn-50:     #FFF6E5;
  --warn-700:    #8A6100;
  /* 锁定态：石板蓝灰。不用紫 —— 靛紫是 AI 产品的默认配色，见 CLAUDE.md 2.5 ④ */
  --lock:        #5B7A99;
  --lock-50:     #EDF2F6;
  --lock-700:    #3D5771;

  /* 深底之上的文字 / 图标 */
  --on-dark:     #FFFFFF;

  /* 第三方品牌色：外部既定常量，不属于本设计系统，只允许在分享渠道图标上用 */
  --brand-wechat:    #07C160;
  --brand-qq:        #12B7F5;
  --brand-weibo:     #E6162D;
  --brand-whatsapp:  #25D366;
  --brand-facebook:  #1877F2;
  --brand-instagram: #E4405F;
  --brand-line:      #06C755;
  --brand-kakao:     #FEE500;
  --brand-kakao-ink: #191919;   /* Kakao 是亮黄底，字要用深色 */
  --brand-x:         #0F1419;

  /* 墨底卡片渐变（.card.dark）：青调深墨，比中性的 --ink 更贴主色 */
  --card-dark-1: #0C1F26;   /* 深端 */
  --card-dark-2: #1B4049;   /* 浅端 */

  /* 头像默认渐变（暖橙，与青色主调形成对冲） */
  --avatar-1:    #3A424E;
  --avatar-2:    #232932;

  /* RGB 分量：用于半透明层（遮罩 / 毛玻璃 / 阴影） */
  --ink-rgb:     23,25,28;
  --page-rgb:    246,248,249;
  --surface-rgb: 255,255,255;
  --primary-rgb: 61,217,233;

  /* 形态 */
  --r-card:  20px;
  --r-box:   14px;
  --r-ic:    11px;   /* 圆角方块图标 */
  --r-pill:  999px;

  --sp: 18px;
  --appbar-h: 70px;   /* .appbar 实际高度（头像 40 + 上下 padding 30）。二级吸顶的 top 靠它算 */

  /* 卡片压在底色上，几乎不投影；浮层才投影 */
  --shadow-card: 0 1px 2px rgba(var(--ink-rgb),.04), 0 10px 30px -14px rgba(var(--ink-rgb),.14);
  --shadow-nav:  0 8px 32px -8px rgba(var(--ink-rgb),.18), 0 2px 8px rgba(var(--ink-rgb),.04);

  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
/* 表单元素默认不继承字体，会掉回 Arial —— 统一收口，别再逐个选择器手写 font-family */
button, input, select, textarea { font-family: inherit; }
body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 手机容器：桌面上居中成一台机器，移动端全屏 */
#phone {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  position: relative;
  /* 必须是 clip，不能是 hidden：overflow-x:hidden 会把 overflow-y 隐式变成 auto，
     于是 #phone 成了「永不滚动的滚动容器」，把子元素的 position:sticky 全部废掉
     （.appbar 的吸顶、.footbar 原来的吸底都是这么坏的）。clip 只裁切、不建滚动容器。 */
  overflow-x: clip;
  box-shadow: 0 0 60px rgba(var(--ink-rgb),.10);

  /* 上下两层青晕，中段留白 —— 卡片靠这层底色浮起来 */
  background:
    radial-gradient(150% 40% at 50% -6%, var(--wash-1) 0%, transparent 55%),
    var(--page);
  background-attachment: fixed, scroll;
}
@media (min-width: 460px) {
  body { padding: 24px 0; align-items: flex-start; }
  #phone { min-height: calc(100vh - 48px); border-radius: 28px; overflow: hidden; }
}

#view { padding-bottom: 108px; }

/* ---------- 排版 ---------- */
h1,h2,h3,h4 { margin: 0; font-weight: 700; }
.t-xl   { font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
.t-lg   { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.t-md   { font-size: 16px; font-weight: 600; }
.t-sm   { font-size: 14px; }
.t-xs   { font-size: 12px; }
.muted  { color: var(--ink-2); }
.dim    { color: var(--ink-3); }
.on-dark-2 { color: var(--on-dark); opacity: .6; }
.on-dark-3 { color: var(--on-dark); opacity: .4; }
.up     { color: var(--up); }
.down   { color: var(--down); }
.strike { text-decoration: line-through; color: var(--ink-3); }
.mono   { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.right  { text-align: right; }
.grow   { flex: 1; }
.nowrap { white-space: nowrap; }
.ell    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.link { color: var(--primary-700); cursor: pointer; font-weight: 600; }

/* ---------- 图片占位（U.img / U.thumb 输出的 <img class="ph">） ----------
   picsum 按请求尺寸返回原图，不加约束它就按自身像素铺开，撑破图位、压住旁边的文字。
   所以占位图一律：填满所属图位 + 等比裁切 + 继承容器圆角。
   图位容器（.shop-logo / .prod-img / .mini-img …）负责 overflow:hidden 裁掉溢出部分。 */
.ph {
  display: block; width: 100%; height: 100%;
  object-fit: cover;                 /* 等比填满，不拉伸变形 */
  border-radius: inherit;
  background: var(--surface-2);      /* 图没加载出来时不至于露出空洞 */
}
/* 所有图位容器统一裁切：没有它，占位图会溢出圆角、压到相邻文字上 */
.avatar, .shop-logo, .shop-thumb .img, .goods-row .img, .dt-img,
.prod-img, .mini-img, .d-img, .rv-img, .gallery > div { overflow: hidden; }

/* ---------- 线性图标（icons.js 输出） ---------- */
/* svg 随父级 font-size 缩放、随 currentColor 变色 —— 可无缝顶替 emoji */
.svg-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; }
/* 实心态（收藏已选中等）。SVG 内联写了 fill="none"，但那是表现属性，CSS 能盖过它 */
.svg-ic.fill { fill: currentColor; }
.iconbtn.faved { color: var(--warn); }
/* 圆形币种 / 内容图标容器：参考图里币种是圆形彩标 */
.coin {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--surface-2); color: var(--ink);
}
.coin.sm { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }

/* ---------- 顶栏 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(var(--page-rgb),.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 14px var(--sp) 10px;
  display: flex; align-items: center; gap: 12px;
}
.appbar.solid { background: rgba(var(--surface-rgb),.88); }
/* 悬浮顶栏（商品详情）：透明无底，只浮一个返回键在大图上。
   必须 fixed 而不是 absolute —— absolute 会跟着页面滚走，滑到详情中段就没有返回入口；
   也不能让它回到文档流（sticky），否则会把下面的大图顶下去。
   和 #tabbar / .footbar 一样居中约束到手机框宽度。 */
.appbar.float {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.appbar .title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; letter-spacing: -.2px; }
.appbar .title.left { text-align: left; }

.iconbtn {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-pill);
  border: none; background: var(--surface);
  color: var(--ink); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: transform .14s;
}
.iconbtn.ghost { background: transparent; box-shadow: none; }
.iconbtn:active { transform: scale(.94); }

.avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--avatar-1), var(--avatar-2));
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  position: relative; cursor: pointer;
}
/* 默认头像：邮箱首字母（U.letter 生成）。字号由调用方按头像直径给，这里只管字形 */
.avatar .ltr {
  color: var(--on-dark); font-weight: 700; line-height: 1;
  letter-spacing: 0; user-select: none;
}
.avatar .dot { position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--down); border: 2px solid var(--page); }

.searchbar {
  flex: 1; height: 46px; border-radius: var(--r-pill);
  background: var(--surface-2);
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
  color: var(--ink-3); font-size: 15px;
}
.searchbar input {
  border: none; background: transparent; outline: none;
  flex: 1; font-size: 15px; font-family: var(--font); color: var(--ink);
}

/* ---------- 页面块 ---------- */
.pad { padding: 0 var(--sp); }
.section { padding: 0 var(--sp); margin-top: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head .t-lg { font-size: 19px; }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 16px;
  border: 1px solid rgba(var(--ink-rgb),.05);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.03);
}
.card.flat { background: var(--surface-2); }
/* 墨底渐变卡片：资产 hero / 邀请码 / 商家中心 / 返还说明。次级文字用 .on-dark-2 */
.card.dark { background: linear-gradient(150deg, var(--card-dark-1), var(--card-dark-2)); color: var(--on-dark); border-color: transparent; }
.card.dark .shop-logo { background: rgba(var(--surface-rgb), .12); }
.card.dark .tag { background: rgba(var(--primary-rgb), .18); color: var(--primary); }
.card + .card { margin-top: 12px; }

/* 列表行 */
.list { background: var(--surface); border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(var(--ink-rgb),.05); box-shadow: 0 1px 2px rgba(var(--ink-rgb),.03); }
.li {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer;
  border-bottom: 1px solid var(--surface-2);
  transition: background .12s;
}
.li:last-child { border-bottom: none; }
.li:active { background: var(--surface-2); }
/* 右箭头：列表行之外（如「我的」页头像行）也用它，所以不再限定在 .li 里 */
.chev { color: var(--ink-4); font-size: 18px; }
/* ---------- 消息中心 ---------- */
/* 铃铛未读角标（「我的」页顶栏）。原来是内联 style 手搓的小红点，收成类。 */
.iconbtn.noti-btn { position: relative; overflow: visible; }
.noti-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--down); color: var(--on-dark);
  font-size: 10px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--page);
}

.li.noti { align-items: flex-start; padding: 14px 16px; }
.li.noti .li-ic { margin-top: 2px; }
/* 未读：左侧一道主色竖条 + 极浅底。比在角落点个小红点更容易扫到 */
.li.noti.unread { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary-600); }
.li.noti.unread .t-md { font-weight: 700; }
.li.noti .chev { align-self: center; }

/* 消息类型图标配色：沿用语义色的「浅底 + 深字」三件套 */
.noti-ic.cyan { background: var(--primary-50); color: var(--primary-700); }
.noti-ic.up   { background: var(--up-50);      color: var(--up-700); }
.noti-ic.warn { background: var(--warn-50);    color: var(--warn-700); }
.noti-ic.lock { background: var(--lock-50);    color: var(--lock-700); }

/* chip 上的未读计数 */
.chip .chip-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px;
  border-radius: var(--r-pill); background: var(--down); color: var(--on-dark);
  font-size: 10px; font-weight: 800; font-style: normal;
}
.chip.on .chip-dot { background: var(--on-dark); color: var(--ink); }

/* 列表行系统图标：圆角方块 + 浅底墨字（区别于 .coin 的圆形币标） */
.li-ic {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-ic);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--surface-2); color: var(--ink);
}
.li.static { cursor: default; }
.li.static:active { background: transparent; }
.li.on { background: var(--primary-50); }        /* 选中行（站点 / 语言选择器） */
.li.on .t-md { color: var(--primary-700); font-weight: 700; }

/* 键值行 */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; }
.kv .k { color: var(--ink-2); flex: 0 0 auto; }
.kv .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- pill 快捷入口 ---------- */
.pills {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px var(--sp) 8px;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 18px 0 14px;
  border-radius: var(--r-pill); background: var(--surface-2); border: none;
  font-size: 14px; font-weight: 600; color: var(--ink); font-family: var(--font);
  cursor: pointer; transition: transform .14s, background .14s;
}
.pill:active { transform: scale(.97); background: var(--surface-3); }
.pill .ic {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink); background: none;
}

/* 筛选 chip */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--sp); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--surface); border: none; font-size: 13px; font-weight: 600;
  color: var(--ink-2); font-family: var(--font); cursor: pointer;
  transition: background .14s, color .14s;
}
.chip.on { background: var(--ink); color: var(--on-dark); }

/* 广场筛选展开按钮 */
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: none; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.filter-btn.on { background: var(--ink); color: var(--on-dark); }
.filter-btn .fb-dot {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--primary-600); color: var(--on-dark);
  font-size: 10px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.filter-btn.on .fb-dot { background: var(--primary); color: var(--ink); }
.filter-btn .fb-arrow { font-size: 12px; transition: transform .18s; line-height: 1; }
.filter-btn .fb-arrow.up { transform: rotate(180deg); }

/* ---------- 按钮 ---------- */
.btn {
  width: 100%; height: 54px; border: none; border-radius: var(--r-pill);
  font-size: 17px; font-weight: 700; font-family: var(--font);
  white-space: nowrap;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .14s, opacity .14s;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .42; pointer-events: none; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-dark    { background: var(--ink); color: var(--on-dark); }
.btn-ghost   { background: var(--surface-2); color: var(--ink); }
.btn-line    { background: transparent; color: var(--ink); border: 1.5px solid var(--surface-3); }
.btn-danger  { background: var(--down-50); color: var(--down); }
.btn-sm { height: 40px; font-size: 14px; width: auto; padding: 0 18px; }
.btn-xs { height: 32px; font-size: 13px; width: auto; padding: 0 14px; border-radius: var(--r-pill); }
/* 行内小按钮配 .grow：只准撑开，不准压缩。
   .grow 是 flex:1（basis 0），会无视内容宽度平分空间，把「申请平台介入」这类长标签挤到
   放不下——按钮高度是写死的，文字一折行就溢出。改成 basis auto + 不收缩，宽度从内容起算。 */
.btn-sm.grow, .btn-xs.grow { flex: 1 0 auto; }

/* 底部固定操作条 */
/* 底部吸底操作条。
   注意：不能用 position:sticky —— #phone 带 overflow-y:auto 却没有约束高度，
   会成为一个「永不滚动的 sticky 容器」，导致 sticky 永远不触发。
   所以和 #tabbar 一样用 fixed + 居中约束到手机框宽度。 */
.footbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  z-index: 15;
  padding: 12px var(--sp) calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--page) 62%, rgba(var(--page-rgb),0));
}

/* ---------- 表单 ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; background: var(--surface); border: 1.5px solid transparent;
  border-radius: var(--r-box); padding: 15px 16px;
  font-size: 15px; font-family: var(--font); color: var(--ink); outline: none;
  transition: border-color .14s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary-600); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.textarea { min-height: 90px; resize: vertical; }
/* 自增高文本域：随内容长高，到 max-height 后内部滚动（高度由 U.autoGrow 逐字算）。
   手柄拖拽和自动算高会互相打架，所以关掉 resize。 */
.textarea.auto { resize: none; overflow-y: auto; max-height: 320px; }
.select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.field .hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.field .err  { font-size: 12px; color: var(--down); margin-top: 6px; }

.input-amt { display: flex; align-items: center; background: var(--surface); border-radius: var(--r-box); padding: 0 16px; }
.input-amt input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 26px; font-weight: 800; letter-spacing: -.5px; padding: 16px 0; font-family: var(--font); font-variant-numeric: tabular-nums; }
/* 后缀（￥ / USDT / × 实付）永不折行。
   input 是 flex:1 且默认 min-width:auto —— 它拒绝缩到内容宽度以下，
   于是把挤压全转嫁给后缀，「× 实付」这种长后缀就被压成两行。
   解法：input 加 min-width:0 让它肯让位；后缀禁收缩 + 禁折行。 */
.input-amt .suffix {
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  flex: 0 0 auto; white-space: nowrap; margin-left: 10px;
}

/* 上传占位 */
.upload {
  border: 1.5px dashed var(--ink-4); border-radius: var(--r-box);
  background: var(--surface); padding: 22px; text-align: center;
  color: var(--ink-3); font-size: 13px; cursor: pointer;
}
.upload.filled { border-style: solid; border-color: var(--primary-600); color: var(--ink); background: var(--primary-50); }

/* 支付截图九宫格（最多 9 张）：缩略图 + 右上角删除，未满时末尾跟一个「加号」格。
   .ro 只读态（订单详情 / 商家审核）隐藏删除按钮。 */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shot {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--r-box); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; overflow: hidden;
}
.shot .x {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: rgba(var(--ink-rgb), .62); color: var(--on-dark);
  border: none; cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.shot .n {                      /* 左下角序号：商家核对时好指认「第 3 张」 */
  position: absolute; left: 6px; bottom: 4px;
  font-size: 10px; font-weight: 700; color: var(--ink-3);
}
.shot.add {
  border: 1.5px dashed var(--ink-4); background: var(--surface);
  color: var(--ink-3); cursor: pointer;
  flex-direction: column; gap: 2px; font-size: 20px;
}
.shot.add:active { border-color: var(--primary-600); background: var(--primary-50); }
.shot.add span { font-size: 10px; }
.shots.ro .x { display: none; }

/* 分段选择 */
.seg { display: flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 4px; }
.seg button {
  flex: 1; height: 38px; border: none; background: transparent; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--ink-2); font-family: var(--font); cursor: pointer;
  transition: background .16s, color .16s;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

/* 单选卡 */
.optcard {
  border: 1.5px solid var(--surface-3); border-radius: var(--r-box);
  padding: 14px 16px; background: var(--surface); cursor: pointer; margin-bottom: 10px;
  transition: border-color .14s, background .14s;
}
.optcard.on { border-color: var(--primary-600); background: var(--primary-50); }

/* 数量步进 */
.stepper { display: flex; align-items: center; gap: 0; background: var(--surface-2); border-radius: var(--r-pill); }
.stepper button { width: 38px; height: 38px; border: none; background: transparent; font-size: 20px; color: var(--ink); cursor: pointer; }
.stepper .n { width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 徽标 ---------- */
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 8px; font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
}
.tag.cyan { background: var(--primary-50); color: var(--primary-700); }
.tag.lock { background: var(--lock-50); color: var(--lock-700); }
.tag.up   { background: var(--up-50);   color: var(--up-700); }
.tag.down { background: var(--down-50); color: var(--down); }
.tag.warn { background: var(--warn-50); color: var(--warn-700); }
.tag.dark { background: var(--ink); color: var(--on-dark); }

/* ---------- 资产 ---------- */
.balance-hero { padding: 4px var(--sp) 0; }
.balance-hero .num { font-size: 44px; font-weight: 800; letter-spacing: -1.8px; font-variant-numeric: tabular-nums; }
.balance-hero .num .dec { font-size: 24px; color: var(--ink-3); letter-spacing: -.6px; }

.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.asset-box { background: var(--surface); border-radius: var(--r-card); padding: 16px; }
.asset-box .lbl { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.asset-box .val { font-size: 21px; font-weight: 800; margin-top: 7px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.asset-box.hi { background: linear-gradient(150deg, var(--ink), var(--ink-deep)); color: var(--on-dark); }
.asset-box.hi .lbl { color: rgba(var(--surface-rgb),.62); }
.asset-box.hi .val { color: var(--primary); }

.statdot { width: 7px; height: 7px; border-radius: 50%; }
.statdot.lock { background: var(--lock); }
.statdot.rel  { background: var(--primary-600); }
.statdot.avail{ background: var(--up); }

/* 释放进度 */
.bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary-600); border-radius: var(--r-pill); }

/* ---------- 商品 / 商家卡片 ---------- */
.shop-card { background: var(--surface); border-radius: var(--r-card); padding: 17px; margin-bottom: 12px; cursor: pointer; }
.shop-logo {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.shop-thumbs { display: flex; gap: 8px; margin-top: 13px; }
.shop-thumb { flex: 1; background: var(--surface-2); border-radius: 13px; padding: 10px; }
.shop-thumb .img { aspect-ratio: 1 / 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 27px; }

/* 「好物」页的商品行：左图 + 右侧名称 / 所属平台 / 返还 */
.goods-row {
  display: flex; gap: 12px; padding: 12px;
  background: var(--surface); border-radius: var(--r-card);
  margin-bottom: 10px; cursor: pointer;
  border: 1px solid rgba(var(--ink-rgb),.05);
  transition: transform .12s;
}
.goods-row:active { transform: scale(.99); }
.goods-row .img {
  width: 92px; height: 92px; flex: 0 0 92px; border-radius: var(--r-box);
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.goods-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.goods-row .nm {
  font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.goods-row .plat { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.prod-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 56px; }
.price { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
/* 馈赠金徽标：所有商品展示位统一用它（由 UI.price 生成）。
   曾经和 .mini-gift 并存两份几乎一样的定义，已合并到这里。 */
.gift-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-50); color: var(--primary-700);
  border-radius: 9px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}
.gift-badge svg.svg-ic { font-size: 13px; opacity: .85; }

/* ---------- 搜索 ---------- */
.searchbar.tappable { cursor: pointer; }
.searchbar .clear {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--ink-4); color: var(--on-dark); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 20px;
}
.searchbar .cancel {
  border: none; background: transparent; color: var(--ink-2);
  font-size: 15px; font-family: var(--font); cursor: pointer; padding: 0 0 0 4px; flex: 0 0 auto;
}
mark { background: transparent; color: var(--primary-700); font-weight: 800; padding: 0; }

.hist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-chip {
  height: 32px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--surface); border: none; font-size: 13px; color: var(--ink-2);
  font-family: var(--font); cursor: pointer; display: flex; align-items: center;
}
.hist-chip:active { background: var(--surface-3); }
.hot-rank {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--ink-3);
}
.hot-rank.top { background: var(--ink); color: var(--primary); }

.res-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; border-bottom: 1px solid var(--surface-2);
}
.res-row:last-child { border-bottom: none; }
.res-row:active { background: var(--surface-2); }

/* 分类精选 · 横向滚动 */
.hscroll {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 var(--sp) 4px; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.hscroll::-webkit-scrollbar { display: none; }
.mini-card {
  flex: 0 0 152px; scroll-snap-align: start;
  background: var(--surface); border-radius: var(--r-card);
  overflow: hidden; cursor: pointer; transition: transform .14s;
}
.mini-card:active { transform: scale(.98); }
.mini-img {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 44px; position: relative;
}
.mini-cat {
  position: absolute; left: 8px; top: 8px;
  background: rgba(var(--ink-rgb),.72); color: var(--on-dark);
  border-radius: 8px; padding: 3px 8px; font-size: 10px; font-weight: 700;
}
.mini-body { padding: 11px 12px 13px; }

/* ---------- 商品图文详情 ---------- */
.detail-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--surface-2); margin-bottom: 4px; }
.detail-tabs button {
  border: none; background: none; padding: 12px 0 11px; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s;
}
.detail-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

.detail-wrap { position: relative; max-height: 520px; overflow: hidden; }
.detail-wrap.open { max-height: none; }
/* 小号折叠：店铺介绍这类短文本用，限高与渐隐都更矮。
   .sm 和 .open 同优先级（都是两个类），.sm 写在后面会压住 .open，
   所以展开态必须显式写 .sm.open，否则点了展开也不动。 */
.detail-wrap.sm { max-height: 86px; }
.detail-wrap.sm.open { max-height: none; }
.detail-wrap.sm .detail-fade { height: 54px; }
.detail-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to top, var(--surface) 32%, rgba(var(--surface-rgb),0));
  display: flex; align-items: flex-end; justify-content: center;
}
.detail-wrap.open .detail-fade { display: none; }
.detail-more {
  border: 1.5px solid var(--surface-3); background: var(--surface);
  border-radius: var(--r-pill); height: 38px; padding: 0 20px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
}

.d-h {
  font-size: 15px; font-weight: 700; margin: 20px 0 9px;
  display: flex; align-items: center; gap: 8px;
}
.d-h:first-child { margin-top: 4px; }
.d-h::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--primary-600); }
.d-p { font-size: 14px; color: var(--ink-2); line-height: 1.85; margin: 0 0 10px; }
/* 商品详情编辑器（商家发布页）：图文块按顺序混排，每块下面挂一排 ↑ ↓ 🗑 操作 */
.dt-block { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--surface-2); }
.dt-block:last-child { border-bottom: none; }
.dt-img { border-radius: var(--r-box); aspect-ratio: 4 / 3; background: var(--surface-2); }

/* 详情插图：4:3 框。原来写死 180px 高，等于把商家传的竖向长图裁成一条窄带。 */
.d-img {
  border-radius: var(--r-box); aspect-ratio: 4 / 3; margin: 12px 0 7px;
  display: flex; align-items: center; justify-content: center; font-size: 64px;
}
.d-cap { font-size: 12px; color: var(--ink-3); text-align: center; margin-bottom: 14px; }
.d-list { margin: 4px 0 10px; padding-left: 18px; }
.d-list li { font-size: 14px; color: var(--ink-2); line-height: 1.9; }

/* ---------- 评价 ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--warn); line-height: 1; }
.stars .s { font-size: 13px; }
.stars .s.off { color: var(--ink-4); }
.stars.lg .s { font-size: 17px; }

.rate-hero { display: flex; gap: 20px; align-items: center; padding: 4px 0 14px; }
.rate-score { text-align: center; flex: 0 0 auto; }
.rate-score .n { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rate-bars { flex: 1; min-width: 0; }
.rate-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rate-bar-row .lb { font-size: 11px; color: var(--ink-3); width: 26px; flex: 0 0 26px; }
.rate-bar-row .bar { flex: 1; height: 5px; }
.rate-bar-row .bar > i { background: var(--warn); }
.rate-bar-row .ct { font-size: 11px; color: var(--ink-3); width: 20px; text-align: right; flex: 0 0 20px; }

.rv-card { padding: 16px 0; border-bottom: 1px solid var(--surface-2); }
.rv-card:last-child { border-bottom: none; }
.rv-text { font-size: 14px; color: var(--ink); line-height: 1.75; margin-top: 9px; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-imgs { display: flex; gap: 8px; margin-top: 11px; }
.rv-img {
  width: 74px; height: 74px; border-radius: 12px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.rv-reply {
  background: var(--surface-2); border-radius: 13px;
  padding: 11px 13px; margin-top: 12px;
  font-size: 13px; color: var(--ink-2); line-height: 1.7;
}
.rv-reply b { color: var(--ink); }

.star-pick { display: flex; gap: 10px; justify-content: center; margin: 6px 0 4px; }
.star-pick .s { font-size: 34px; cursor: pointer; color: var(--ink-4); line-height: 1; transition: transform .12s, color .12s; }
.star-pick .s.on { color: var(--warn); }
/* 选中的星要填实 —— pickStar 只切 .on，不重渲染，所以填充态由 CSS 管 */
.star-pick .s.on .svg-ic { fill: currentColor; }
.star-pick .s:active { transform: scale(1.15); }

.tag-pick {
  height: 32px; padding: 0 13px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1.5px solid transparent;
  font-size: 13px; color: var(--ink-2); font-family: var(--font); cursor: pointer;
  transition: background .14s, border-color .14s;
}
.tag-pick.on { background: var(--primary-50); border-color: var(--primary-600); color: var(--primary-700); font-weight: 600; }

.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
/* 商品图一律 1:1 —— 上传规格是 1200×1200，好店 / 好物 / 订单 / 商品卡 / 详情轮播
   共用同一张主图，比例不统一就会各裁各的（宽条位只剩中间一条带）。 */
.gallery > div { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 88px; }
.dots { display: flex; gap: 5px; justify-content: center; margin-top: -22px; position: relative; z-index: 2; }
.dots i { width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(var(--ink-rgb),.22); transition: width .2s; }
.dots i.on { width: 18px; background: var(--ink); }

/* ---------- 订单 ---------- */
.order-card { background: var(--surface); border-radius: var(--r-card); padding: 17px; margin-bottom: 12px; }
.timeline { position: relative; padding-left: 24px; }
.timeline .node { position: relative; padding-bottom: 20px; }
.timeline .node:last-child { padding-bottom: 0; }
.timeline .node::before {
  content: ''; position: absolute; left: -24px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4);
}
.timeline .node.done::before { background: var(--primary-600); }
.timeline .node::after {
  content: ''; position: absolute; left: -20px; top: 18px; bottom: 2px;
  width: 2px; background: var(--surface-3);
}
.timeline .node:last-child::after { display: none; }

/* ---------- 空态 ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty .ic { font-size: 44px; opacity: .5; }
.empty .tx { margin-top: 12px; font-size: 14px; }

/* ---------- 底部导航（悬浮胶囊） ---------- */
#tabbar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 398px;
  height: 66px; border-radius: var(--r-pill);
  background: rgba(var(--surface-rgb),.82);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-nav);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 30;
}
#tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; font-family: var(--font);
  color: var(--ink-3); font-size: 10.5px; font-weight: 500; letter-spacing: .2px;
  transition: color .14s;
}
#tabbar .tab .ic {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--ink-3); background: none;
  transition: color .16s, transform .16s;
}
#tabbar .tab.on { color: var(--ink); }
#tabbar .tab.on .ic { color: var(--ink); transform: translateY(-1px); }
#tabbar.hidden { display: none; }

/* ---------- Sheet / 弹窗 ---------- */
#sheet-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.mask {
  position: absolute; inset: 0; background: rgba(var(--ink-rgb),.45);
  opacity: 0; transition: opacity .22s; pointer-events: auto;
}
.mask.in { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%,100%);
  width: 100%; max-width: 430px;
  background: var(--page); border-radius: 28px 28px 0 0;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  transition: transform .26s cubic-bezier(.32,.72,0,1); pointer-events: auto;
  max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-nav);
}
.sheet.in { transform: translate(-50%,0); }
.sheet .grab { width: 38px; height: 4px; border-radius: var(--r-pill); background: var(--ink-4); margin: 6px auto 14px; }
.sheet .sheet-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 18px; letter-spacing: -.2px; }

.dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.96);
  width: calc(100% - 64px); max-width: 340px;
  background: var(--surface); border-radius: var(--r-card); padding: 24px 20px 18px;
  opacity: 0; transition: all .2s; pointer-events: auto; text-align: center;
  box-shadow: var(--shadow-nav);
}
.dialog.in { transform: translate(-50%,-50%) scale(1); opacity: 1; }

/* 弹窗头图：圆角方块 + 线性图标（第 3 条视觉要点）。danger 弹窗转粉红警示配色 */
.dlg-ic {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: var(--r-box);
  background: var(--surface-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.dlg-ic.danger { background: var(--down-50);    color: var(--down); }
.dlg-ic.ok     { background: var(--up-50);      color: var(--up-700); }
.dlg-ic.warn   { background: var(--warn-50);    color: var(--warn-700); }
.dlg-ic.info   { background: var(--primary-50); color: var(--primary-700); }

/* 2FA 输入 */
.otp { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.otp input {
  width: 42px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
  border: 1.5px solid var(--surface-3); border-radius: 13px; outline: none; font-family: var(--font);
  background: var(--surface); color: var(--ink);
  transition: border-color .14s;
}
.otp input:focus { border-color: var(--primary-600); }

/* ---------- Toast ---------- */
#toast-root { position: fixed; top: 22px; left: 0; right: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink); color: var(--on-dark); padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; max-width: 84%; text-align: center;
  animation: tin .24s ease; box-shadow: var(--shadow-nav);
}
.toast.err { background: var(--down); }
@keyframes tin { from { opacity: 0; transform: translateY(-14px); } }

/* ---------- 系统模拟按钮 ---------- */
#devbtn {
  position: fixed; right: 16px; bottom: 96px; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--ink); color: var(--primary); font-size: 17px; cursor: pointer;
  box-shadow: var(--shadow-nav); opacity: .82;
}
@media (min-width: 460px) { #devbtn { right: calc(50% - 215px + 16px); } }

/* ---------- FEAT-A01 登录 / 注册 ---------- */
.auth { padding: 0 var(--sp) 32px; }
.auth-brand { text-align: center; padding: 56px 0 36px; }
.auth-logo {
  width: 76px; height: 76px; margin: 0 auto; border-radius: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  background: linear-gradient(150deg, var(--ink), var(--ink-deep));
  box-shadow: var(--shadow-nav);
}
.auth-or {
  position: relative; text-align: center; margin: 20px 0 14px;
}
.auth-or::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--surface-3);
}
.auth-or span {
  position: relative; background: var(--page); padding: 0 12px;
  font-size: 12px; color: var(--ink-3);
}

/* 风险提示条 */
.notice {
  background: var(--warn-50); border-radius: var(--r-box); padding: 12px 14px;
  font-size: 12px; line-height: 1.6; color: var(--warn-700);
}
.notice.danger { background: var(--down-50); color: var(--down-700); }
.notice.info { background: var(--primary-50); color: var(--primary-700); }

/* ---------- 降低动效（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==== 构建追加：Bitget 布局组件 ==== */
.op-row { display: flex; padding: 18px var(--sp) 6px; gap: 2px; }
.op-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px 2px; padding: 14px var(--sp) 8px; }
.op { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font-family: var(--font); padding: 0; }
.op .ic { width: 50px; height: 50px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 23px; transition: transform .14s, background .14s; }
.op:active .ic { transform: scale(.92); background: var(--surface-3); }
.op .lbl { font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* 分享海报：商品图 + 介绍 + 二维码。二维码是真码，扫了直达详情页 */
.poster {
  background: var(--surface); border-radius: var(--r-card);
  border: 1px solid var(--surface-3); overflow: hidden; text-align: left;
}
.poster-img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.poster-body { padding: 14px; }
.poster-intro { font-size: 12px; color: var(--ink-2); line-height: 1.6; margin-top: 8px; }
.poster-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--surface-2);
}
/* 二维码容器：白底 + 内边距，扫码识别率靠这圈白边 */
.qr {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: var(--r-ic); background: var(--on-dark);
  border: 1px solid var(--surface-3); padding: 3px; overflow: hidden;
}
.qr .qr-img { width: 100%; height: 100%; display: block; }

/* 分享面板：四列宫格，格子复用 .op（圆形图标 + 下方文字） */
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; }
.op .ic.wechat    { background: var(--brand-wechat);    color: var(--on-dark); }
.op .ic.moments   { background: var(--brand-wechat);    color: var(--on-dark); }
.op .ic.qq        { background: var(--brand-qq);        color: var(--on-dark); }
.op .ic.weibo     { background: var(--brand-weibo);     color: var(--on-dark); }
.op .ic.whatsapp  { background: var(--brand-whatsapp);  color: var(--on-dark); }
.op .ic.facebook  { background: var(--brand-facebook);  color: var(--on-dark); }
.op .ic.instagram { background: var(--brand-instagram); color: var(--on-dark); }
.op .ic.line      { background: var(--brand-line);      color: var(--on-dark); }
.op .ic.x         { background: var(--brand-x);         color: var(--on-dark); }
.op .ic.kakao     { background: var(--brand-kakao);     color: var(--brand-kakao-ink); }
/* 举报是反向操作：粉红底红字，和上面几个分享操作明确区分开 */
.op .ic.report    { background: var(--down-50);         color: var(--down); }
.bal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px var(--sp) 0; }
.bal-head .num { font-size: 40px; font-weight: 800; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.bal-head .num .cur { font-size: 26px; font-weight: 700; margin-right: 2px; }
.bal-head .num .dec { font-size: 22px; color: var(--ink-3); }
.fcards { display: flex; gap: 10px; overflow-x: auto; padding: 6px var(--sp) 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.fcards::-webkit-scrollbar { display: none; }
.fcard { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; border-radius: var(--r-box); padding: 14px 15px 15px; cursor: pointer; background: var(--surface); border: 1px solid rgba(var(--ink-rgb),.06); box-shadow: 0 1px 2px rgba(var(--ink-rgb),.03); transition: transform .14s; }
.fcard:active { transform: scale(.98); }
.fcard .fc-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 22px; background: var(--primary-50); color: var(--primary-700); }
.fcard .fc-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.fcard .fc-s { font-size: 12px; margin-top: 3px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.op .ic svg, .fcard .fc-ic svg, #tabbar .tab .ic svg { stroke-width: 2; }
.shop-card { border: 1px solid rgba(var(--ink-rgb),.05); box-shadow: 0 1px 2px rgba(var(--ink-rgb),.03); }
.order-card { border: 1px solid rgba(var(--ink-rgb),.05); box-shadow: 0 1px 2px rgba(var(--ink-rgb),.03); }

/* ==== 按钮体系精修：简约高级大气 ==== */
.chip { border: 1px solid var(--surface-3); display: inline-flex; align-items: center; gap: 6px; }
.chip.on { border-color: var(--ink); }
.chip .svg-ic { font-size: 16px; opacity: .9; }
.btn { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.btn-line { border-width: 1px; }
.btn-sm { font-size: 13.5px; font-weight: 600; }
.btn-xs { font-weight: 600; }
.seg button { font-weight: 600; }
.filter-btn { border: 1px solid var(--surface-3); }
.filter-btn.on { border-color: var(--ink); }

/* 吸顶头：把顶栏和它下面那条控件栏当一个整体粘在顶部
   （好物页 = 搜索栏 + 品类栏；活动页 = 标题栏 + 订单/交易分段）。
   整体粘比两个各自 sticky 更稳 —— 不用手算第二层的 top 偏移。 */
.stickhead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(var(--page-rgb), .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-bottom: 10px;
}
.stickhead .appbar {                 /* 里层不再单独粘，也不重复毛玻璃 */
  position: static; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* 二级吸顶（好店页）：顶栏粘在 0，类目栏粘在顶栏底下。
   顶栏是 sticky 而非同一个容器（中间隔着快捷入口、馈赠金卡、分类精选），
   所以类目栏得自己算 top —— 用 --appbar-h，别写死数字。 */
.chipbar.substick {
  position: sticky; top: var(--appbar-h); z-index: 19;
  padding-top: 10px; padding-bottom: 10px;
  background: rgba(var(--page-rgb), .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* 品类横滚 + 右侧常驻筛选按钮。
   关键：按钮不盖在 chips 上 —— chips 在一个更窄的容器里滚，右侧给按钮留出空位。
   容器右缘用 mask 做透明→不透明渐变，边界上的 chip 被裁切并淡出，
   用户一眼就知道右边还有东西可滚（盖死它反而什么提示都没有）。 */
.chipbar { position: relative; display: flex; align-items: center; }
.chipbar .chips {
  flex: 1; min-width: 0;
  padding-right: 44px;                       /* 滚到底时最后一个 chip 能完全走出渐隐区 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}
/* chip 间距与内边距收紧：让第 6 个品类的边界落在容器中段，而不是正好卡在边缘上，
   保证初始视图里下一个品类稳定露出 ~40%，用户看得出还能往右滚。 */
.chipbar .chips { gap: 6px; }
.chipbar .chip { padding: 0 13px; }
.chipbar .chipbar-fade {
  flex: 0 0 auto; display: flex; align-items: center;
  padding-right: var(--sp);
}

/* ==== 底部导航中间突出 FAB（存/取）==== */
#tabbar { overflow: visible; }
.tab-fab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: var(--font); padding: 0; }
.tab-fab .fab-ic { width: 54px; height: 54px; border-radius: var(--r-pill); background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-size: 25px; margin-top: -30px; border: 4px solid var(--page); box-shadow: 0 8px 18px -4px rgba(16,198,183,.5); transition: transform .14s; }
.tab-fab:active .fab-ic { transform: scale(.93); }
.tab-fab .fab-lbl { font-size: 10.5px; color: var(--ink); font-weight: 600; letter-spacing: .2px; }
.tab-fab .fab-ic svg { stroke-width: 2.2; }

/* ==== 馈赠金结构化分解 ==== */
.gift-bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; background: var(--surface-2); }
.gift-bar > i { display: block; height: 100%; min-width: 4px; border-radius: 2px; }
.gift-stat { flex: 1; min-width: 0; }
.gift-stat .lbl { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
.gift-stat .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.gift-stat .val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 5px; letter-spacing: -.3px; }

/* ==== 全局币种下拉选择器 ==== */
.select-trigger {
  width: 100%; height: 54px; border: 1px solid var(--surface-3); background: var(--surface);
  border-radius: var(--r-box); padding: 0 12px 0 10px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font); cursor: pointer; transition: border-color .14s;
}
.select-trigger:active { border-color: var(--primary-600); }
.select-trigger .t-md { text-align: left; }
.select-trigger .sel-chev { color: var(--ink-3); font-size: 18px; display: flex; flex: 0 0 auto; }

/* ==== 筛选弹层（分组 chip，主流筛选面板）==== */
.fgroup { margin-bottom: 22px; }
.fgroup-t { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.fchips { display: flex; flex-wrap: wrap; gap: 10px; }
.fchip { height: 38px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid transparent; font-size: 13px; font-weight: 500; color: var(--ink); font-family: var(--font); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.fchip.on { background: var(--primary-50); border-color: var(--primary-600); color: var(--primary-700); font-weight: 600; }
/* 平台子项：隶属于「第三方平台店铺」，不是平级维度。
   左侧竖线 + 缩进，让层级一眼可见；选了别的经营类型就整块收起。 */
.plat-sub {
  margin: 12px 0 0 4px; padding: 12px 0 2px 14px;
  border-left: 2px solid var(--primary-50);
}