/* ================================================================
 * F501 风格套装 · 组件造型层
 * ================================================================
 * 后台「DIY 装修 → 风格套装」把 8 个选择写进 settings.ui.kit，
 * h5.js 只负责把它们写成 <html data-card="…" data-btn="…" …>，
 * 具体长什么样**全部**在这一层，JS 里没有任何 if（P-23 / §20）。
 *
 * 三条铁规矩：
 *  ① **默认档一律不写规则**。card=float / btn=pill / chip=soft / tabbar=float /
 *     head=immersive / item=big / radius=std / density=comfy 就等于「没装修过」，
 *     观感与升级前逐像素一致（P-55 缺省 == 显式默认）。
 *  ② 所有颜色/圆角都从既有令牌派生，**不出现新的 #hex**（§20.9 红线）。
 *     唯一例外是底栏那几条半透明白 —— 那是玻璃质感本身，不是品牌色。
 *  ③ 变量统一 `--k-` 前缀。**不能复用 --r-md / --card-bg**：后台调色盘会把
 *     theme.radius 写成 :root 的 inline style，inline 优先级压过样式表，
 *     data-radius 就会被静默吃掉（踩过同类：改了不生效最难查）。
 *
 * 加载顺序：base.css → h5.css → ui-presets.css → **ui-kit.css**（必须最后）
 * 这样同特异性的皮肤段（html[data-ui="x"]）会被造型层正确覆盖。
 * ================================================================ */

/* ---------------- 公共变量：默认值 = 现状 ---------------- */
:root {
  /* F505 发布端相册删除按钮的半透明遮罩：真值集中在令牌层，
     admin.css 的组件只写 var(--k-album-mask)，不写死半透明颜色。 */
  --k-album-mask: rgba(0, 0, 0, .55);
  /* 卡片 */
  --k-card-bg: var(--card-bg, #fff);
  --k-card-radius: 14px;
  --k-card-radius-sm: 12px;
  --k-card-shadow: var(--shadow-1);
  --k-card-border: 0 solid transparent;
  --k-card-pad-y: 0px;
  /* 按钮 */
  --k-btn-radius: var(--r-full);
  --k-btn-border: 0 solid transparent;
  /* 标签 */
  --k-chip-radius: 999px;
  --k-chip-bg: var(--c-surface-2);
  --k-chip-border: 1px solid var(--c-line);
  --k-chip-fg: var(--c-text-2);
  /* 间距（密度） */
  --k-gap: 0px;
  --k-pad: 0px;
  /* 玻璃档在各皮肤下的实际底色（浅底用白玻璃、深底用薄雾） */
  --k-glass: rgba(255, 255, 255, 0.62);
}

html[data-ui="aurora"] { --k-glass: rgba(255, 255, 255, 0.10); }
html[data-ui="obsidian"] { --k-glass: rgba(255, 255, 255, 0.07); }
html[data-ui="brutal"] { --k-glass: rgba(255, 246, 230, 0.72); }

/* ================================================================
 * ① 卡片造型（5 种）
 * ================================================================
 * ⚠️ 作用域是「**组件类型**」，不是「具体功能」。
 * 下面这一串类名不是「当前有几个功能就写几个」，而是把全站所有
 * 「一块底 + 上面有字」的容器按**类型**收进来了：
 *   信息流卡（ad/gb）· 面板卡（card-panel/detail-card/rank-card）
 *   商户卡（merchant-cell/shop-block）· 数据卡（stat-row）
 *   入口块（nav-icon）· 提示条（notice-bar/headline-bar）
 *   弹层（sheet/dialog）· 吸底条（fixed-bar）· 二级页容器（fs-page）
 *
 * 以后新增页面/功能时：**只要复用上面任意一个类名，就自动继承造型，零改动**。
 * 真发明了新品类（§20.7 准入流程），只需在下面这个列表里补一个类名 —— 加一行，不是加一段。
 * 守门器 tools/audit-kit.js 会扫出「长得像卡片但没进列表」的新类，防止悄悄漏掉。
 */

/* 造型作用的卡片集合。.ad-card.list 自带 flex，圆角另给，别被覆盖掉。 */
html[data-card] .ad-card,
html[data-card] .gb-card,
html[data-card] .card-panel,
html[data-card] .cp-card,
html[data-card] .detail-card,
html[data-card] .rank-card,
html[data-card] .merchant-cell,
html[data-card] .shop-block,
html[data-card] .stat-row,
html[data-card] .nav-icon,
html[data-card] .notice-bar,
html[data-card] .headline-bar,
html[data-card] .sheet,
html[data-card] .fixed-bar,
html[data-card] .fs-page { transition: background .18s, border-color .18s, box-shadow .18s; }

html[data-card="outline"] .ad-card,
html[data-card="outline"] .gb-card,
html[data-card="outline"] .card-panel,
html[data-card="outline"] .cp-card,
html[data-card="outline"] .detail-card,
html[data-card="outline"] .rank-card,
html[data-card="outline"] .merchant-cell,
html[data-card="outline"] .shop-block,
html[data-card="outline"] .stat-row,
html[data-card="outline"] .nav-icon,
html[data-card="outline"] .notice-bar,
html[data-card="outline"] .headline-bar,
html[data-card="outline"] .sheet,
html[data-card="outline"] .sa-card,
html[data-card="outline"] .pickup-card,
html[data-card="outline"] .pb-card,
html[data-card="outline"] .verify-card,
html[data-card="outline"] .notice-block,
html[data-card="outline"] .sh-card,
html[data-card="outline"] .sh-my-card,
html[data-card="outline"] .jb-card,
html[data-card="outline"] .jb-block,
html[data-card="outline"] .jb-my-card,
html[data-card="outline"] .pl-card,
html[data-card="outline"] .mk-promo-panel,
html[data-card="outline"] .fixed-bar {
  background: transparent;
  border: 1px solid var(--c-line);
  box-shadow: none;
}

html[data-card="glass"] .ad-card,
html[data-card="glass"] .gb-card,
html[data-card="glass"] .card-panel,
html[data-card="glass"] .cp-card,
html[data-card="glass"] .detail-card,
html[data-card="glass"] .rank-card,
html[data-card="glass"] .merchant-cell,
html[data-card="glass"] .shop-block,
html[data-card="glass"] .stat-row,
html[data-card="glass"] .nav-icon,
html[data-card="glass"] .notice-bar,
html[data-card="glass"] .headline-bar,
html[data-card="glass"] .sa-card,
html[data-card="glass"] .pickup-card,
html[data-card="glass"] .pb-card,
html[data-card="glass"] .verify-card,
html[data-card="glass"] .notice-block,
html[data-card="glass"] .sh-card,
html[data-card="glass"] .sh-my-card,
html[data-card="glass"] .jb-card,
html[data-card="glass"] .jb-block,
html[data-card="glass"] .jb-my-card,
html[data-card="glass"] .pl-card,
html[data-card="glass"] .mk-promo-panel {
  background: var(--k-glass);
  border: 1px solid var(--c-line);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* 玻璃档的例外：弹层必须不透明（P-23 红线，§20.9）—— 下面压着图和彩色卡，
 * 半透明会让正文叠在图上，一个字都看不清。所以 .sheet 不进 glass，只进 outline。
 * .fixed-bar 同理（吸底条下面永远滚着内容）。 */

/* 实色块：用 --c-surface（各皮肤已定义的「不透明表面色」）。
 * 不用 --card-bg —— aurora 的 --card-bg 是半透明的，实色档要的就是不透明。 */
html[data-card="solid"] .ad-card,
html[data-card="solid"] .gb-card,
html[data-card="solid"] .card-panel,
html[data-card="solid"] .cp-card,
html[data-card="solid"] .detail-card,
html[data-card="solid"] .rank-card,
html[data-card="solid"] .merchant-cell,
html[data-card="solid"] .shop-block,
html[data-card="solid"] .stat-row,
html[data-card="solid"] .nav-icon,
html[data-card="solid"] .notice-bar,
html[data-card="solid"] .headline-bar,
html[data-card="solid"] .sheet,
html[data-card="solid"] .sa-card,
html[data-card="solid"] .pickup-card,
html[data-card="solid"] .pb-card,
html[data-card="solid"] .verify-card,
html[data-card="solid"] .notice-block,
html[data-card="solid"] .sh-card,
html[data-card="solid"] .sh-my-card,
html[data-card="solid"] .jb-card,
html[data-card="solid"] .jb-block,
html[data-card="solid"] .jb-my-card,
html[data-card="solid"] .pl-card,
html[data-card="solid"] .mk-promo-panel,
html[data-card="solid"] .fixed-bar {
  background: var(--c-surface, #fff);
  box-shadow: var(--shadow-2);
}

html[data-card="flat"] .ad-card,
html[data-card="flat"] .gb-card,
html[data-card="flat"] .card-panel,
html[data-card="flat"] .cp-card,
html[data-card="flat"] .detail-card,
html[data-card="flat"] .rank-card,
html[data-card="flat"] .merchant-cell,
html[data-card="flat"] .shop-block,
html[data-card="flat"] .stat-row,
html[data-card="flat"] .nav-icon,
html[data-card="flat"] .notice-bar,
html[data-card="flat"] .headline-bar,
html[data-card="flat"] .sa-card,
html[data-card="flat"] .pickup-card,
html[data-card="flat"] .pb-card,
html[data-card="flat"] .verify-card,
html[data-card="flat"] .notice-block,
html[data-card="flat"] .sh-card,
html[data-card="flat"] .sh-my-card,
html[data-card="flat"] .jb-card,
html[data-card="flat"] .jb-block,
html[data-card="flat"] .jb-my-card,
html[data-card="flat"] .pl-card,
html[data-card="flat"] .mk-promo-panel,
html[data-card="flat"] .fixed-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 无边框档的副作用处理：去掉壳之后，列表之间要有一条发丝线保住边界，
 * 否则一屏文字糊成一片（§20 边界要求）。 */
html[data-card="flat"] .card-panel > * + *,
html[data-card="flat"] .detail-card > * + * {
  border-top: 1px solid var(--c-line);
}

/* ================================================================
 * ② 按钮造型（4 种）
 * ================================================================ */

html[data-btn="round"] .btn,
html[data-btn="round"] .btn-xs,
html[data-btn="round"] .btn-sm,
html[data-btn="round"] .fab {
  border-radius: 12px;
}

/* 直角硬边：0 圆角 + 一条能看见的边。只用描边不加粗，避免 brutal 皮肤叠成 4px 黑框 */
html[data-btn="sharp"] .btn,
html[data-btn="sharp"] .btn-xs,
html[data-btn="sharp"] .btn-sm {
  border-radius: 0;
  border: 1.5px solid var(--c-line);
}
html[data-btn="sharp"] .btn-primary {
  border-color: var(--c-primary-solid, var(--c-primary));
}
html[data-btn="sharp"] .fab { border-radius: 0; }

/* 幽灵描边：透明底 + 主色边，主按钮不再铺满渐变（次要操作多时更清爽） */
html[data-btn="ghost"] .btn-primary {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-ink, var(--c-primary));
  box-shadow: none;
}
html[data-btn="ghost"] .btn-primary:hover {
  background: var(--c-primary-soft);
  box-shadow: none;
}
html[data-btn="ghost"] .fab {
  background: var(--c-surface, #fff);
  color: var(--c-primary-ink, var(--c-primary));
  border: 1.5px solid var(--c-primary);
  box-shadow: var(--shadow-1);
}

/* ================================================================
 * ③ 标签造型（4 种）
 * ================================================================ */

html[data-chip="line"] .tag-chip,
html[data-chip="line"] .pick-chip {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}
html[data-chip="line"] .tag-chip.on,
html[data-chip="line"] .pick-chip.on {
  background: transparent;
  border-color: var(--c-primary-solid, var(--c-primary));
  color: var(--c-primary-ink, var(--c-primary));
  font-weight: 600;
}

/* 实心色块：非选中给浅色实底（比软胶囊更「实」），选中整块填主色 */
html[data-chip="block"] .tag-chip,
html[data-chip="block"] .pick-chip {
  background: var(--c-fill, #f2f3f5);
  border-color: transparent;
  color: var(--c-text);
}
html[data-chip="block"] .tag-chip.on,
html[data-chip="block"] .pick-chip.on {
  background: var(--c-primary-solid, var(--c-primary));
  border-color: var(--c-primary-solid, var(--c-primary));
  color: #fff;
}

/* 下划线：去掉壳，只留一条底线。适合「一整排标签」像标签页那样排 */
html[data-chip="under"] .tag-chip,
html[data-chip="under"] .pick-chip {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--c-text-2);
  box-shadow: inset 0 -2px 0 transparent;
}
html[data-chip="under"] .tag-chip.on,
html[data-chip="under"] .pick-chip.on {
  background: transparent;
  color: var(--c-primary-ink, var(--c-primary));
  box-shadow: inset 0 -2px 0 var(--c-primary);
}
html[data-chip="under"] .q-chips { gap: 14px; }

/* ================================================================
 * ④ 底部菜单造型（4 种）
 * ================================================================
 * ⚠️ P-86：图标盒子 40×32 在任何造型下都不许变 —— 这里只改容器，
 * 一条 .tab-icon 的尺寸/内边距都不碰。改完必须跑 tools/audit-navbar.js。
 */

/* bar 贴底条：贴屏幕底、通栏、方角。safe-area 仍然只加在 padding-bottom，
 * 不加进 height（加进 height 会把格子压扁，和悬浮态的几何就对不上了）。 */
html[data-tabbar="bar"] .tabbar {
  bottom: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-surface, #fff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -6px 20px rgba(20, 20, 40, 0.08);
}
/* 贴底后内容区要让出一条底栏的高度，否则最后一张卡被压住 */
html[data-tabbar="bar"] .view { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

html[data-tabbar="outline"] .tabbar {
  background: transparent;
  border: 1.5px solid var(--c-line);
  box-shadow: none;
}

html[data-tabbar="plain"] .tabbar {
  background: var(--c-surface, #fff);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ================================================================
 * ⑤ 页头造型（4 种）
 * ================================================================
 * immersive = 默认（各皮肤自己的顶栏：渐变/白底/米黄），不写规则。
 * 其余三种必须压过皮肤段：ui-kit.css 最后加载，同特异性后者赢。
 */

/* 白底标题：去掉渐变和光斑，回到「一根线 + 深字」 */
html[data-head="plain"] .topbar {
  background: var(--c-surface, #fff);
  color: var(--c-text);
  box-shadow: none;
  border-bottom: 1px solid var(--c-line);
}
html[data-head="plain"] .topbar::before,
html[data-head="plain"] .topbar::after { display: none; }
html[data-head="plain"] .topbar .city,
html[data-head="plain"] .topbar .topbar-slogan { color: var(--c-text); }
html[data-head="plain"] .topbar .search-box { background: var(--c-fill); }
html[data-head="plain"] .topbar .search-box input { color: var(--c-text); }
html[data-head="plain"] .topbar .search-box input::placeholder { color: var(--c-text-3); }
html[data-head="plain"] .points-pill {
  background: var(--c-fill);
  color: var(--c-text);
  box-shadow: none;
  border: 1px solid var(--c-line);
}

/* 大标题：加高 + 字号放大。只动高度和字号，不动图标尺寸 */
html[data-head="large"] .page-head,
html[data-head="large"] .fs-head { padding-top: 18px; padding-bottom: 18px; }
html[data-head="large"] .page-head .ttl,
html[data-head="large"] .fs-head .ttl { font-size: 19px; letter-spacing: -0.3px; }
html[data-head="large"] .topbar { padding-bottom: 16px; }

/* 居中极简：标题真正居中。用 grid 三列而不是「flex + 绝对定位」——
 * 绝对定位要求父级 position:relative，但 .page-head 本身是 sticky，
 * 再加 relative 会在某些浏览器里让吸附位置漂移；grid 不碰定位，最稳。 */
html[data-head="center"] .page-head,
html[data-head="center"] .fs-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  background: transparent;
  border-bottom: 0;
  gap: 0;
}
html[data-head="center"] .page-head .ttl,
html[data-head="center"] .fs-head .ttl {
  text-align: center;
  padding: 0;
  grid-column: 2;
}
html[data-head="center"] .page-head .back { grid-column: 1; }
html[data-head="center"] .fs-head .x { grid-column: 3; margin-left: 0; justify-self: end; }

/* ================================================================
 * ⑥ 商品 / 广告卡（3 种）
 * ================================================================
 * 用「只改已有元素」的方式实现，不新增 DOM、不改模板结构 ——
 * 首页信息流是 Vue 直接铺的，改包裹层会连带动画延迟和曝光上报（F488）。
 */

/* 左图右文：复用 .ad-card.list 的几何，但让全局档位也能生效 */
html[data-item="row"] .ad-card:not(.list) {
  display: flex;
  align-items: stretch;
  margin-bottom: 10px;
  border-radius: var(--k-card-radius-sm);
}
html[data-item="row"] .ad-card:not(.list) .ad-cover {
  width: 118px;
  height: auto;
  min-height: 92px;
  flex: 0 0 118px;
}
html[data-item="row"] .ad-card:not(.list) .ad-cover img { height: 100%; }
html[data-item="row"] .ad-card:not(.list) .ad-body {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
}
html[data-item="row"] .ad-card:not(.list) .ad-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[data-item="row"] .ad-card:not(.list) .cover-tags-left { left: 6px; bottom: 6px; }
html[data-item="row"] .ad-card:not(.list) .ad-badge,
html[data-item="row"] .ad-card:not(.list) .ad-free-flag { font-size: 9.5px; padding: 1px 5px; }
html[data-item="row"] .ad-card:not(.list) .ad-top-badge { display: none; }

/* 紧凑卡：图矮一档、标题一行，一屏能多看两张。
 * 图高 152 → 112 是 26%，再压图片就糊了（原图多在 750 宽，112 已是 3 倍屏下限）。 */
html[data-item="compact"] .ad-card:not(.list) .ad-cover { height: 112px; }
html[data-item="compact"] .ad-card:not(.list) .ad-title { font-size: 13.5px; }
html[data-item="compact"] .ad-card:not(.list) .ad-sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[data-item="compact"] .ad-card:not(.list) { margin-bottom: 9px; }
html[data-item="compact"] .gb-cover { height: 84px; }

/* ================================================================
 * ⑦ 圆角档（4 种）
 * ================================================================
 * 只改 --k-* ，不改 --r-*：后台调色盘的 theme.radius 会写成 :root 的
 * inline style，inline 压样式表 —— 改 --r-* 会被它吃掉。
 */
html[data-radius="sharp"] {
  --k-card-radius: 0px;
  --k-card-radius-sm: 0px;
  --k-btn-radius: 0px;
  --k-chip-radius: 0px;
  --k-tab-radius: 0px;
}
html[data-radius="small"] {
  --k-card-radius: 10px;
  --k-card-radius-sm: 8px;
  --k-btn-radius: 8px;
  --k-chip-radius: 8px;
  --k-tab-radius: 14px;
}
html[data-radius="big"] {
  --k-card-radius: 26px;
  --k-card-radius-sm: 22px;
  --k-btn-radius: 999px;
  --k-chip-radius: 999px;
  --k-tab-radius: 30px;
}

/* 圆角档还要压住皮肤段里写死的那些：皮肤的选择器是 html[data-ui="x"] .tabbar
 * （特异性 0,2,1），这里同特异性但后加载，所以能赢。 */
html[data-radius="sharp"] .tabbar,
html[data-radius="sharp"] .banner,
html[data-radius="sharp"] .ad-cover,
html[data-radius="sharp"] .gb-cover,
html[data-radius="sharp"] .nav-icon { border-radius: 0; }

html[data-radius="small"] .tabbar { border-radius: 14px; }
html[data-radius="small"] .banner,
html[data-radius="small"] .ad-cover,
html[data-radius="small"] .gb-cover { border-radius: 8px; }
html[data-radius="small"] .nav-icon { border-radius: 10px; }

html[data-radius="big"] .tabbar { border-radius: 30px; }
html[data-radius="big"] .banner,
html[data-radius="big"] .ad-cover,
html[data-radius="big"] .gb-cover { border-radius: 20px; }
html[data-radius="big"] .nav-icon { border-radius: 18px; }

/* ================================================================
 * ================================================================ */
html[data-density="compact"] .ad-body { padding: 10px 12px; }
html[data-density="compact"] .gb-body { padding: 7px 9px 9px; }
html[data-density="compact"] .card-panel { margin-top: 9px; }
html[data-density="compact"] .sheet-body { padding: 0 16px 16px; }
html[data-density="compact"] .log-row { padding: 9px 12px; }
html[data-density="compact"] .sec-title { margin-bottom: 8px; }
html[data-density="compact"] .tag-chip { padding: 5px 11px; }

/* ================================================================
 * ⑧ F552 效果档（2026 趋势质感）
 * ================================================================
 * 前面 7 段管「形状」（圆角/描边/排布），这一段管「质感」。
 * 新档全部追加在白名单尾部，默认档仍是各组第一项 = 不写规则 = 现状。
 *
 * 三条规矩沿用段首，另外补三条效果档自己的：
 *  ④ 新增 --fx-* 令牌只放「质感本身的墨色与高光」（同 --k-glass 先例：
 *     那是玻璃/投影的材质色，不是品牌色）；品牌相关的全部从
 *     --c-primary* / --c-surface / --c-line / --shadow-* 现场派生。
 *  ⑤ 辉光用 color-mix 从主色调透明度；不支持 color-mix 的老内核
 *     自动落回前一条 fallback（少一圈光，不出错，布局不变）。
 *  ⑥ .sheet（弹层）不进任何半透明/渐变档 —— P-23 红线：弹层必须不透明。
 *     .fixed-bar 底色是实色，可以进。
 * ================================================================ */

:root {
  --fx-edge: rgba(24, 26, 38, 0.9);      /* 硬投影档的描边墨色 */
  --fx-hard: 5px 5px 0 rgba(24, 26, 38, 0.9);   /* 硬投影档的实心投影 */
  --fx-soft: 0 12px 26px rgba(24, 26, 38, 0.10); /* 软陶档的外影 */
  --fx-hi: rgba(255, 255, 255, 0.65);    /* 软陶/液态玻璃的顶部内高光 */
  --fx-lo: rgba(24, 26, 38, 0.08);       /* 软陶的底部内阴影 */
}
/* 暗色皮肤：实心黑投影在近黑底上看不见，改主色描边 + 深色浮影；
 * 内高光压暗 —— 白高光在暗底上是「洞」不是「鼓」 */
html[data-ui="aurora"], html[data-ui="obsidian"] {
  --fx-edge: var(--c-primary-solid, var(--c-primary));
  --fx-hard: 6px 6px 0 rgba(0, 0, 0, 0.5);
  --fx-soft: 0 14px 30px rgba(0, 0, 0, 0.45);
  --fx-hi: rgba(255, 255, 255, 0.10);
  --fx-lo: rgba(0, 0, 0, 0.35);
}
/* brutal：墨色对齐皮肤自己的硬投影色（#16130d 的 rgba 化），语言不打架 */
html[data-ui="brutal"] {
  --fx-edge: rgba(22, 19, 13, 0.92);
  --fx-hard: 5px 5px 0 rgba(22, 19, 13, 0.92);
}

/* ---------------- 卡片 · 极光晕染（Aurora 渐变） ----------------
 * 实色面 + 主色光从顶部晕开（background-color 兜底保证不透明，
 * 渐变只是叠在上面的一层色，弹层 .sheet 不进本档）。 */
html[data-card="aurora"] .ad-card,
html[data-card="aurora"] .gb-card,
html[data-card="aurora"] .card-panel,
html[data-card="aurora"] .cp-card,
html[data-card="aurora"] .detail-card,
html[data-card="aurora"] .rank-card,
html[data-card="aurora"] .merchant-cell,
html[data-card="aurora"] .shop-block,
html[data-card="aurora"] .stat-row,
html[data-card="aurora"] .nav-icon,
html[data-card="aurora"] .notice-bar,
html[data-card="aurora"] .headline-bar,
html[data-card="aurora"] .sa-card,
html[data-card="aurora"] .pickup-card,
html[data-card="aurora"] .pb-card,
html[data-card="aurora"] .verify-card,
html[data-card="aurora"] .notice-block,
html[data-card="aurora"] .sh-card,
html[data-card="aurora"] .sh-my-card,
html[data-card="aurora"] .jb-card,
html[data-card="aurora"] .jb-block,
html[data-card="aurora"] .jb-my-card,
html[data-card="aurora"] .pl-card,
html[data-card="aurora"] .mk-promo-panel,
html[data-card="aurora"] .fixed-bar {
  background-color: var(--c-surface, #fff);
  background-image:
    radial-gradient(92% 62% at 50% 100%, var(--c-primary-soft) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(58% 38% at 88% 100%, var(--c-primary-2, var(--c-primary)) 0%, rgba(0, 0, 0, 0) 62%);
  background-repeat: no-repeat;
  box-shadow: var(--shadow-1);
  box-shadow: var(--shadow-1), 0 10px 30px color-mix(in srgb, var(--c-primary) 13%, transparent);
}

/* ---------------- 卡片 · 硬投影（新粗野主义 2.0） ---------------- */
html[data-card="neo"] .ad-card,
html[data-card="neo"] .gb-card,
html[data-card="neo"] .card-panel,
html[data-card="neo"] .cp-card,
html[data-card="neo"] .detail-card,
html[data-card="neo"] .rank-card,
html[data-card="neo"] .merchant-cell,
html[data-card="neo"] .shop-block,
html[data-card="neo"] .stat-row,
html[data-card="neo"] .nav-icon,
html[data-card="neo"] .notice-bar,
html[data-card="neo"] .headline-bar,
html[data-card="neo"] .sa-card,
html[data-card="neo"] .pickup-card,
html[data-card="neo"] .pb-card,
html[data-card="neo"] .verify-card,
html[data-card="neo"] .notice-block,
html[data-card="neo"] .sh-card,
html[data-card="neo"] .sh-my-card,
html[data-card="neo"] .jb-card,
html[data-card="neo"] .jb-block,
html[data-card="neo"] .jb-my-card,
html[data-card="neo"] .pl-card,
html[data-card="neo"] .mk-promo-panel,
html[data-card="neo"] .fixed-bar {
  background: var(--c-surface, #fff);
  border: 2px solid var(--fx-edge);
  box-shadow: var(--fx-hard);
}

/* ---------------- 卡片 · 软陶浮凸（Claymorphism） ----------------
 * 外层一片软影 + 顶部内高光 + 底部内阴影 = 「鼓起来」的感觉；
 * 不动描边（皮肤自己的描边语言保留）。 */
html[data-card="clay"] .ad-card,
html[data-card="clay"] .gb-card,
html[data-card="clay"] .card-panel,
html[data-card="clay"] .cp-card,
html[data-card="clay"] .detail-card,
html[data-card="clay"] .rank-card,
html[data-card="clay"] .merchant-cell,
html[data-card="clay"] .shop-block,
html[data-card="clay"] .stat-row,
html[data-card="clay"] .nav-icon,
html[data-card="clay"] .notice-bar,
html[data-card="clay"] .headline-bar,
html[data-card="clay"] .sa-card,
html[data-card="clay"] .pickup-card,
html[data-card="clay"] .pb-card,
html[data-card="clay"] .verify-card,
html[data-card="clay"] .notice-block,
html[data-card="clay"] .sh-card,
html[data-card="clay"] .sh-my-card,
html[data-card="clay"] .jb-card,
html[data-card="clay"] .jb-block,
html[data-card="clay"] .jb-my-card,
html[data-card="clay"] .pl-card,
html[data-card="clay"] .mk-promo-panel,
html[data-card="clay"] .fixed-bar {
  background: var(--c-surface, #fff);
  box-shadow: var(--fx-soft), inset 0 2px 8px var(--fx-hi), inset 0 -4px 10px var(--fx-lo);
}

/* ---------------- 按钮 · 玻璃（液态玻璃质感） ---------------- */
html[data-btn="glass"] .btn,
html[data-btn="glass"] .btn-xs,
html[data-btn="glass"] .btn-sm,
html[data-btn="glass"] .fab {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
/* 非主按钮：雾玻璃面 + 细描边 */
html[data-btn="glass"] .btn:not(.btn-primary),
html[data-btn="glass"] .btn-xs,
html[data-btn="glass"] .btn-sm,
html[data-btn="glass"] .fab {
  background: var(--k-glass);
  border: 1px solid var(--c-line);
}
/* 主按钮：主色玻璃（色相不丢，半透出质感）。写在前一段后面，同特异性后者赢 */
html[data-btn="glass"] .btn-primary {
  background: color-mix(in srgb, var(--c-primary) 88%, transparent);
  border: 1px solid var(--c-line);
}

/* ---------------- 按钮 · 辉光 ---------------- */
html[data-btn="glow"] .btn-primary,
html[data-btn="glow"] .fab {
  box-shadow: var(--shadow-1);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-primary) 38%, transparent);
}

/* ---------------- 标签 · 玻璃 / 选中发光 ---------------- */
html[data-chip="glass"] .tag-chip,
html[data-chip="glass"] .pick-chip {
  background: var(--k-glass);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
html[data-chip="glow"] .tag-chip.on,
html[data-chip="glow"] .pick-chip.on {
  box-shadow: var(--shadow-1);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--c-primary) 45%, transparent);
}

/* ---------------- 底部菜单 · 液态玻璃 / 选中光晕 ----------------
 * P-86：只动容器材质，图标盒 40×32 / 高度 / 圆角一律不碰；
 * 选中光晕加在图标盒上，box-shadow 不占布局，audit-navbar 会复核几何。 */
html[data-tabbar="liquid"] .tabbar {
  background: var(--k-glass);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--c-line);
  box-shadow: inset 0 1px 0 var(--fx-hi), var(--shadow-2);
}
html[data-tabbar="glow"] .tab.active .tab-icon {
  box-shadow: var(--shadow-1);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--c-primary) 45%, transparent);
}

/* ---------------- 页头 · 玻璃顶栏 ----------------
 * 材质 = 白底标题档（plain）的排版 + 毛面半透。 */
html[data-head="glass"] .topbar {
  background: var(--k-glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  color: var(--c-text);
  box-shadow: none;
  border-bottom: 1px solid var(--c-line);
}
html[data-head="glass"] .topbar::before,
html[data-head="glass"] .topbar::after { display: none; }
html[data-head="glass"] .topbar .city,
html[data-head="glass"] .topbar .topbar-slogan { color: var(--c-text); }
html[data-head="glass"] .topbar .search-box { background: var(--c-fill); }
html[data-head="glass"] .topbar .search-box input { color: var(--c-text); }
html[data-head="glass"] .topbar .search-box input::placeholder { color: var(--c-text-3); }
html[data-head="glass"] .points-pill {
  background: var(--c-fill);
  color: var(--c-text);
  box-shadow: none;
  border: 1px solid var(--c-line);
}

/* ---------------- 商品/广告卡 · 双列便当（Bento） ----------------
 * 容器无关：连续排队的 .ad-card 兄弟自动两两成行（inline-block），
 * 中间隔着其他区块（banner/标题/置顶位）就自然断开，符合「便当分格」的直觉。
 * 与 row/compact 档同一哲学：只改卡片自身，不挑容器。
 * 「左图右文」档（.list）自己就是横排，不参与两列。 */
html[data-item="bento"] .ad-card:not(.list) {
  display: inline-block;
  /* 卡自带 margin 14px 是页边距（.app-shell 无水平 padding）。
   * 左 14 + 卡宽 + 左 14 + 卡宽 = 100% - 14 → 行尾自然留出 14px 右页边距，
   * 列间距 = 页边距 = 14，三边对称不折行。 */
  width: calc(50% - 21px);
  margin: 0 0 12px 14px;
  vertical-align: top;
}
html[data-item="bento"] .ad-card:not(.list) .ad-cover { height: 132px; }
html[data-item="bento"] .ad-card:not(.list) .ad-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
 * F548 装修块造型墨色（h5.css 的 .db-* 引用；P-21 色值只定义在这一处令牌层）
 * scrim = 图片上文字保护渐变的收口色 / dot = 轮播圆点 / numbg = 数字角标底
 * ========================================================================== */
:root {
  --db-scrim: rgba(0, 0, 0, .55);
  --db-dot: rgba(255, 255, 255, .5);
  --db-numbg: rgba(0, 0, 0, .4);
}