/* ================================================================
 * 整套 UI 方案（后台「首页装修 → UI 方案」一键切换）
 * ================================================================
 * 不是换配色，是换整套气质：留白、圆角、阴影、边框、顶栏、底导航全都跟着变。
 * 配色（主色/辅助色）仍然由「主题公告」里的调色板控制，两者叠加生效。
 *
 *   ① minimal  极简留白   —— 白底细线、小圆角、零阴影，iOS 原生那股干净劲
 *   ② aurora   霓虹玻璃   —— 深色底 + 毛玻璃卡片 + 发光边，今年最主流的质感
 *   ③ brutal   潮牌撞色   —— 米黄底、粗黑描边、硬阴影、直角，年轻化冲击力强
 *   ④ luxe     鎏金雅致   —— 2026 高级浅色：暖白底、发丝线、金色点缀，安静贵气
 *   ⑤ obsidian 曜石深邃   —— 2026 高级深色：近黑底、冷色微光、细线大留白
 *
 * 用法：<html data-ui="aurora">，由 h5.js 根据 home.uiPreset 写入
 * ⚠️ 新增主题时：这里加一段 + admin.js UI_PRESETS 加一条 + admin.css 加 .pv-xxx
 *    预览卡即可；ui-audit.js / s7.js 会从本文件自动发现主题，不用改它们（P-45）。
 * ================================================================ */

/* ---------- 公共：允许主题覆盖的小挂件 ---------- */
.tab-icon .ico { display: block; }
html[data-ui] .tab { color: var(--c-text-3); }

/* ================= ① minimal 极简留白 ================= */
html[data-ui="minimal"] {
  --c-bg: #fbfbfd;
  --body-bg: #fbfbfd;
  --card-bg: #fff;
  --c-fill: #f4f4f7;
  --c-line: #ececf0;
  --c-text-3: #6e6e77;
  --tint-bg: #fff8ed;
  --tint-line: #ffe3bd;
  --tint-fg: #8a4b00;
  --chip-bg: #f2f3f5;
  --chip-fg: #5f6068;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --shadow-1: 0 1px 2px rgba(16, 16, 30, 0.04);
  --shadow-2: 0 1px 3px rgba(16, 16, 30, 0.05);
/* 渐变仍由后台配色决定 */
}

/* 顶栏：白底 + 深色字，去掉光斑和渐变 */
html[data-ui="minimal"] .topbar {
  background: var(--card-bg, #fff);
  color: var(--c-text);
  box-shadow: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 12px;
}
html[data-ui="minimal"] .topbar::before,
html[data-ui="minimal"] .topbar::after { display: none; }
html[data-ui="minimal"] .search-box {
  background: var(--c-fill, #f4f4f7);
  border: 1px solid transparent;
  box-shadow: none;
}
html[data-ui="minimal"] .search-box input { color: var(--c-text); }
html[data-ui="minimal"] .search-box input::placeholder { color: var(--c-text-3); }
html[data-ui="minimal"] .city,
html[data-ui="minimal"] .topbar-slogan { color: var(--c-text); }
html[data-ui="minimal"] .points-pill {
  background: var(--c-fill, #f4f4f7);
  color: var(--c-text);
  box-shadow: none;
  border: 1px solid var(--c-line);
}
html[data-ui="minimal"] .banner,
html[data-ui="minimal"] .ad-cover,
html[data-ui="minimal"] .gb-cover { border-radius: 10px; }
html[data-ui="minimal"] .nav-icon {
  background: var(--c-fill, #f4f4f7);
  box-shadow: none;
  border-radius: 12px;
}
html[data-ui="minimal"] .sec-title { font-weight: 600; letter-spacing: -0.2px; }
/* 底导航：半透明白玻璃胶囊（悬浮形态由 h5.css 的 .tabbar 统一给，这里只改质感） */
html[data-ui="minimal"] .tabbar {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 16, 30, 0.07);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(16, 16, 30, 0.08);
}
html[data-ui="minimal"] .tab.active .tab-icon {
  background: transparent;
  box-shadow: none;
  transform: none;
}
/* 未选中 tab 走 --c-text-3（2026-11-06 P0 起统一）：
 * 以前这里给 minimal / brutal 各补一条 #6e6e78 硬编码，因为 --c-sub(#9a9aa0) 在浅底只有 2.8:1。
 * 现在 --c-sub 已并入 --c-text-3（五套全部 ≥4.5:1，最低 brutal 4.79），补丁删掉，
 * 少两处跟皮肤脱钩的写死值。 */
html[data-ui="minimal"] .tab.active { color: var(--c-primary-ink); }
html[data-ui="minimal"] .tab.active .tab-icon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-primary);
}
html[data-ui="minimal"] .tab-icon { position: relative; }

/* ================= ② aurora 霓虹玻璃（默认） ================= */
html[data-ui="aurora"] {
  --c-bg: #0d0b18;
  --body-bg: #0d0b18;
  --card-bg: rgba(255, 255, 255, 0.055);
  --c-fill: rgba(255, 255, 255, 0.08);
  /* 0.10 在深底上几乎看不见，「边框像丢了」；0.16 是能分辨又不抢眼的程度 */
  --c-line: rgba(255, 255, 255, 0.16);
  --c-text: #f2f2f7;
  --c-text-3: rgba(242, 242, 247, 0.60);
  /* 之前漏了这条：--c-text-2 一直吃 :root 的 #6b6b70，19 处正文在深底上都是深灰，
     用户说的「深色背景搭配深灰色字体」就是指这个，不是单个组件写错。 */
  --c-text-2: rgba(242, 242, 247, 0.80);
  /* 深色底上的「提示条 / 胶囊」：底色改成半透明白，文字给暖白，
     不能再用浅黄底 + 白字（那是 1.05:1，肉眼看不见）。 */
  --tint-bg: rgba(255, 210, 140, 0.12);
  --tint-line: rgba(255, 210, 140, 0.28);
  --tint-fg: #ffd9a3;
  /* 深底上的状态文字要亮：浅底那套深色 ink 放在深色主题上会反过来看不见 */
  --c-primary-ink: #ffb08a;
  --c-success-ink: #6ee7a8;
  --c-danger-ink: #ff9b90;
  /* 浅底那套 #b54708 放在近黑底只有 3.22:1（P0 实测），小字直接看不见。
     #f59e0b 在 aurora 卡面 8.14:1，和 --c-danger-ink 一眼能分开（暖橙 vs 珊瑚红）。 */
  --c-warning-ink: #f59e0b;
  /* 浅色系的「软底」在深色主题下必须也压成半透明，
     否则 .tag/.rel-r 这些就是浅粉底 + 亮橙字（1.2:1，几乎看不见） */
  --c-primary-soft: rgba(255, 122, 69, 0.20);
  --c-violet-soft: rgba(124, 92, 255, 0.22);
  --chip-bg: rgba(255, 255, 255, 0.10);
  --chip-fg: rgba(255, 255, 255, 0.78);
  /* 深色主题下的「表面色」：卡片、吸底条、输入框、价格块一律压深，
     否则白底 + 浅字 = 1.1:1（详情页 ¥39 划线价、活动说明、入驻表单都栽在这） */
  --c-surface: #191630;
  --c-surface-2: rgba(255, 255, 255, 0.05);
  --c-input-bg: rgba(255, 255, 255, 0.07);
  --c-input-line: rgba(255, 255, 255, 0.20);
  --c-input-ph: rgba(242, 242, 247, 0.42);
  --c-price-bg1: rgba(255, 122, 69, 0.20);
  --c-price-bg2: rgba(255, 122, 69, 0.06);
  --c-btn-off-bg: rgba(255, 255, 255, 0.10);
  --c-btn-off-fg: rgba(242, 242, 247, 0.72);
  --tag-green-bg: rgba(18, 183, 106, 0.18);
  --tag-red-bg: rgba(240, 68, 56, 0.18);
  --tag-blue-bg: rgba(91, 141, 239, 0.18);
  --c-star: #ffc94d;
  --c-on-soft: #ffb08a;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 26px;
  --shadow-1: 0 8px 28px rgba(0, 0, 0, 0.34);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.42);
}

/* 整页底噪：两团极光 */
html[data-ui="aurora"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 380px at 12% -6%, rgba(255, 90, 46, 0.20), transparent 62%),
    radial-gradient(560px 420px at 96% 8%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(460px 360px at 50% 104%, rgba(78, 205, 196, 0.14), transparent 62%);
}
html[data-ui="aurora"] .app-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 顶栏：深色玻璃 + 霓虹描边 */
html[data-ui="aurora"] .topbar {
  background: rgba(20, 17, 34, 0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.34);
}
html[data-ui="aurora"] .topbar::before { opacity: 0.55; }
html[data-ui="aurora"] .topbar::after {
  background: radial-gradient(circle, rgba(124, 92, 255, 0.4) 0%, rgba(124, 92, 255, 0) 70%);
}
html[data-ui="aurora"] .search-box {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
html[data-ui="aurora"] .search-box input { color: #fff; }
html[data-ui="aurora"] .search-box input::placeholder { color: rgba(255, 255, 255, 0.48); }
html[data-ui="aurora"] .city,
html[data-ui="aurora"] .topbar-slogan { color: rgba(255, 255, 255, 0.92); }
html[data-ui="aurora"] .points-pill {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
}

/* 卡片：毛玻璃 + 发光边 */
html[data-ui="aurora"] .ad-card,
html[data-ui="aurora"] .gb-card,
html[data-ui="aurora"] .nav-icon,
html[data-ui="aurora"] .notice-bar,
html[data-ui="aurora"] .headline-bar,
html[data-ui="aurora"] .feed-top-inner {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.30);
}
html[data-ui="aurora"] .ad-card:active,
html[data-ui="aurora"] .gb-card:active {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}
html[data-ui="aurora"] .sec-title { color: #fff; font-weight: 600; }
html[data-ui="aurora"] .tag-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
}
html[data-ui="aurora"] .tag-chip.on {
  background: var(--g-brand);
  border-color: transparent;
  color: #fff;
}
/* 分类选择标签（商家入驻 / 发布广告）：和 tag-chip 同一套玻璃胶囊 */
html[data-ui="aurora"] .pick-chip {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
}
html[data-ui="aurora"] .pick-chip.on {
  background: var(--g-brand);
  border-color: transparent;
  color: #fff;
}
/* 文字层次：深色底下正文要保持足够亮度 */
html[data-ui="aurora"] .ad-sub,
html[data-ui="aurora"] .gb-meta { color: var(--c-text-3); }
html[data-ui="aurora"] .ad-title,
html[data-ui="aurora"] .gb-title { color: #fff; }

/* 底导航：悬浮玻璃 + 激活胶囊 */
html[data-ui="aurora"] .tabbar {
  background: rgba(22, 19, 38, 0.82);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-ui="aurora"] .tab.active .tab-icon {
  background: var(--g-brand);
  box-shadow: 0 0 18px rgba(255, 90, 46, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4);
}
html[data-ui="aurora"] .tab.active { color: #fff; }
/* 悬浮客服按钮也跟着玻璃化 */
html[data-ui="aurora"] .fab {
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ================= ③ brutal 潮牌撞色 ================= */
html[data-ui="brutal"] {
  --c-bg: #fff6e6;
  --body-bg: #fff6e6;
  --card-bg: #fffdf7;
  --c-fill: #ffefd0;
  --c-line: #16130d;
  --c-text: #16130d;
  --c-text-3: #786c58;
  --tint-bg: #ffefd0;
  --tint-line: #16130d;
  --tint-fg: #7a3f00;
  --chip-bg: #ffefd0;
  --chip-fg: #5a5245;
  /* 米黄底的表面色：纯白会和整体发灰的底色打架，用暖白 */
  --c-surface: #fffdf7;
  --c-surface-2: #fff9ec;
  --c-input-bg: #fffdf7;
  --c-input-line: #cbbfa4;
  --c-input-ph: #8b8070;
  --c-price-bg1: #ffefd0;
  --c-price-bg2: #fffdf7;
  --c-btn-off-bg: #efe3c8;
  --c-btn-off-fg: #5a5245;
  --tag-green-bg: #e2f5e6;
  --tag-red-bg: #ffe4d9;
  --tag-blue-bg: #e6eeff;
  --c-star: #8f5200;
  --c-on-soft: #a83000;
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --shadow-1: 3px 3px 0 #16130d;
  --shadow-2: 5px 5px 0 #16130d;
/* 渐变仍由后台配色决定 */
}

/* 顶栏：撞色黄底 + 粗黑下边框 */
html[data-ui="brutal"] .topbar {
  background: #ffd400;
  color: #16130d;
  box-shadow: 0 4px 0 #16130d;
  border-bottom: 3px solid #16130d;
  padding-bottom: 13px;
}
html[data-ui="brutal"] .topbar::before,
html[data-ui="brutal"] .topbar::after { display: none; }
html[data-ui="brutal"] .city,
html[data-ui="brutal"] .topbar-slogan { color: #16130d; font-weight: 800; }
html[data-ui="brutal"] .search-box {
  background: #fffdf7;
  border: 2.5px solid #16130d;
  box-shadow: 3px 3px 0 #16130d;
  border-radius: 8px;
}
html[data-ui="brutal"] .search-box input { color: #16130d; font-weight: 600; }
html[data-ui="brutal"] .points-pill {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  border: 2.5px solid #16130d;
  box-shadow: 3px 3px 0 #16130d;
  font-weight: 800;
  border-radius: 8px;
}
/* 卡片：粗黑边 + 硬阴影 */
html[data-ui="brutal"] .ad-card,
html[data-ui="brutal"] .gb-card,
html[data-ui="brutal"] .nav-icon,
html[data-ui="brutal"] .notice-bar,
html[data-ui="brutal"] .headline-bar,
html[data-ui="brutal"] .feed-top-inner {
  border: 2.5px solid #16130d;
  box-shadow: 4px 4px 0 #16130d;
  border-radius: 10px;
}
html[data-ui="brutal"] .ad-card:active,
html[data-ui="brutal"] .gb-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .sec-title { font-weight: 900; letter-spacing: -0.5px; color: #16130d; }
html[data-ui="brutal"] .tag-chip {
  background: #fffdf7;
  border: 2px solid #16130d;
  color: #16130d;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .tag-chip.on {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  border-color: #16130d;
}
/* 分类选择标签：粗黑边小印章，选中态压深一档 */
html[data-ui="brutal"] .pick-chip {
  background: #fff;
  border: 2px solid #16130d;
  color: #16130d;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .pick-chip.on {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  border-color: #16130d;
}
/* 米黄底上主题橙只有 2.9:1，选中态压深一档才看得清 */
html[data-ui="brutal"] .sort-row button.on { color: #c2340a; }
html[data-ui="brutal"] .sort-row button.on::after { background: #c2340a; }
html[data-ui="brutal"] .banner { border: 2.5px solid #16130d; border-radius: 10px; }
/* 底导航：米黄半透 + 粗黑描边 + 硬投影（仍是悬浮胶囊，只是长得凶） */
html[data-ui="brutal"] .tabbar {
  background: rgba(255, 253, 247, 0.9);
  border: 2.5px solid #16130d;
  border-radius: 16px;
  box-shadow: 5px 5px 0 #16130d;
  height: 58px;
}
html[data-ui="brutal"] .tab { font-weight: 700; }
html[data-ui="brutal"] .tab.active { color: var(--c-primary-ink, #d8410f); font-weight: 900; }
html[data-ui="brutal"] .tab.active .tab-icon {
  background: #ffd400;
  border: 2.5px solid #16130d;
  box-shadow: 2px 2px 0 #16130d;
  border-radius: 8px;
}
html[data-ui="brutal"] .fab {
  background: var(--c-primary-solid, #c2340a);
  border: 2.5px solid #16130d;
  box-shadow: 3px 3px 0 #16130d;
  border-radius: 10px;
  animation: none;
}

/* ================= ④ luxe 鎏金雅致（2026 高级浅色） ================= */
html[data-ui="luxe"] {
  --c-bg: #f7f5f0;
  --body-bg: #f7f5f0;
  --card-bg: #fff;
  --c-fill: #f3f0e9;
  --c-line: #e7e2d6;
  --c-text: #1c1913;
  --c-text-2: #57534a;
  --c-text-3: #6e695c;
  --tint-bg: #f7f1e3;
  --tint-line: #e5d9b8;
  --tint-fg: #7a5a10;
  --chip-bg: #f3f0e9;
  --chip-fg: #5d594e;
  --c-surface: #fff;
  --c-surface-2: #faf8f3;
  --c-input-bg: #fff;
  --c-input-line: #ddd6c6;
  --c-input-ph: #a49c8a;
  --c-price-bg1: #faf4e7;
  --c-price-bg2: #fff;
  --c-btn-off-bg: #ede9dd;
  --c-btn-off-fg: #6e695c;
  --tag-green-bg: #e6f3e6;
  --tag-red-bg: #f9e8e4;
  --tag-blue-bg: #e9eff8;
  /* 评分星当小字用（<13px 要 4.5:1）：#a07414 在白底只有 4.2:1，压深到 5.5:1 */
  --c-star: #8a6210;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(46, 38, 18, 0.04), 0 6px 18px rgba(46, 38, 18, 0.05);
  --shadow-2: 0 2px 6px rgba(46, 38, 18, 0.05), 0 14px 36px rgba(46, 38, 18, 0.08);
}

/* 顶栏：暖白玻璃 + 发丝线，底边一线极淡的金 */
html[data-ui="luxe"] .topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 rgba(190, 164, 96, 0.18);
  padding-bottom: 12px;
}
html[data-ui="luxe"] .topbar::before,
html[data-ui="luxe"] .topbar::after { display: none; }
html[data-ui="luxe"] .search-box {
  background: var(--c-fill);
  border: 1px solid var(--c-line);
  box-shadow: none;
}
html[data-ui="luxe"] .search-box input { color: var(--c-text); }
html[data-ui="luxe"] .search-box input::placeholder { color: var(--c-input-ph); }
html[data-ui="luxe"] .city,
html[data-ui="luxe"] .topbar-slogan { color: var(--c-text); }
html[data-ui="luxe"] .points-pill {
  background: var(--c-fill);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  box-shadow: none;
}
html[data-ui="luxe"] .banner,
html[data-ui="luxe"] .ad-cover,
html[data-ui="luxe"] .gb-cover { border-radius: 12px; }
html[data-ui="luxe"] .nav-icon {
  background: var(--c-fill);
  box-shadow: none;
  border-radius: 12px;
}
html[data-ui="luxe"] .sec-title { font-weight: 700; letter-spacing: -0.2px; }

/* 底导航：贴底 + 发丝线，激活图标透明、底下一条金色细条 */
html[data-ui="luxe"] .tabbar {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(190, 164, 96, 0.34);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(46, 38, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-ui="luxe"] .tab.active { color: var(--c-primary-ink); }
html[data-ui="luxe"] .tab-icon { position: relative; }
html[data-ui="luxe"] .tab.active .tab-icon {
  background: transparent;
  box-shadow: none;
  transform: none;
}
html[data-ui="luxe"] .tab.active .tab-icon::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--g-brand);
}
html[data-ui="luxe"] .fab { box-shadow: var(--shadow-2); }

/* ================= ⑤ obsidian 曜石深邃（2026 高级深色） ================= */
html[data-ui="obsidian"] {
  --c-bg: #0a0c12;
  --body-bg: #0a0c12;
  --card-bg: rgba(255, 255, 255, 0.045);
  --c-fill: rgba(255, 255, 255, 0.07);
  --c-line: rgba(255, 255, 255, 0.13);
  --c-text: #eef1f6;
  --c-text-2: rgba(238, 241, 246, 0.8);
  --c-text-3: rgba(238, 241, 246, 0.62);
  --tint-bg: rgba(255, 213, 128, 0.1);
  --tint-line: rgba(255, 213, 128, 0.24);
  --tint-fg: #ffd98f;
  --c-primary-ink: #ffc9a3;
  --c-success-ink: #6ee7a8;
  --c-danger-ink: #ff9b90;
  /* 同 aurora：浅底的 #b54708 在 #141821 上只有 3.27:1，换 #f59e0b（8.27:1） */
  --c-warning-ink: #f59e0b;
  --c-primary-soft: rgba(255, 122, 69, 0.2);
  --c-violet-soft: rgba(124, 92, 255, 0.22);
  --chip-bg: rgba(255, 255, 255, 0.09);
  --chip-fg: rgba(255, 255, 255, 0.8);
  --c-surface: #141821;
  --c-surface-2: rgba(255, 255, 255, 0.05);
  --c-input-bg: rgba(255, 255, 255, 0.06);
  --c-input-line: rgba(255, 255, 255, 0.18);
  --c-input-ph: rgba(238, 241, 246, 0.45);
  --c-price-bg1: rgba(255, 122, 69, 0.18);
  --c-price-bg2: rgba(255, 122, 69, 0.05);
  --c-btn-off-bg: rgba(255, 255, 255, 0.09);
  --c-btn-off-fg: rgba(238, 241, 246, 0.72);
  --tag-green-bg: rgba(18, 183, 106, 0.16);
  --tag-red-bg: rgba(240, 68, 56, 0.16);
  --tag-blue-bg: rgba(91, 141, 239, 0.16);
  --c-star: #ffc94d;
  --c-on-soft: #ffc9a3;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 14px 44px rgba(0, 0, 0, 0.58);
}

/* 整页微光：一团极淡的冷色顶光，克制、不抢内容（与 aurora 的彩色极光区分） */
html[data-ui="obsidian"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 50% -12%, rgba(126, 148, 200, 0.09), transparent 62%),
    radial-gradient(520px 380px at 94% 4%, rgba(124, 92, 255, 0.05), transparent 60%);
}
html[data-ui="obsidian"] .app-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 顶栏：近黑玻璃 + 发丝线 */
html[data-ui="obsidian"] .topbar {
  background: rgba(11, 13, 19, 0.8);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
html[data-ui="obsidian"] .search-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
html[data-ui="obsidian"] .search-box input { color: #fff; }
html[data-ui="obsidian"] .search-box input::placeholder { color: rgba(238, 241, 246, 0.45); }
html[data-ui="obsidian"] .city,
html[data-ui="obsidian"] .topbar-slogan { color: rgba(238, 241, 246, 0.92); }
html[data-ui="obsidian"] .points-pill {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

/* 卡片：哑光深玻璃（比 aurora 克制：blur 低、边更细） */
html[data-ui="obsidian"] .ad-card,
html[data-ui="obsidian"] .gb-card,
html[data-ui="obsidian"] .nav-icon,
html[data-ui="obsidian"] .notice-bar,
html[data-ui="obsidian"] .headline-bar,
html[data-ui="obsidian"] .feed-top-inner {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
html[data-ui="obsidian"] .sec-title { color: #fff; font-weight: 700; }
html[data-ui="obsidian"] .tag-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(238, 241, 246, 0.75);
}
html[data-ui="obsidian"] .tag-chip.on {
  background: var(--g-brand);
  border-color: transparent;
  color: #fff;
}
html[data-ui="obsidian"] .pick-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(238, 241, 246, 0.75);
}
html[data-ui="obsidian"] .pick-chip.on {
  background: var(--g-brand);
  border-color: transparent;
  color: #fff;
}
/* 文字层次：对齐 aurora 的深底补丁清单（P-35：同类一起改，一处都不能少） */
html[data-ui="obsidian"] .nav-item,
html[data-ui="obsidian"] .nav-grid,
html[data-ui="obsidian"] .nav-label { color: rgba(238, 241, 246, 0.86); }
html[data-ui="obsidian"] .ad-sub,
html[data-ui="obsidian"] .gb-meta { color: var(--c-text-3); }
html[data-ui="obsidian"] .ad-title,
html[data-ui="obsidian"] .gb-title { color: #fff; }
html[data-ui="obsidian"] .gb-price s { color: rgba(238, 241, 246, 0.62); }
/* 价格是渐变填充文字（background-clip:text），深底上必须强制反白 */
html[data-ui="obsidian"] .gb-price b,
html[data-ui="obsidian"] .gb-price strong {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
html[data-ui="obsidian"] .headline-item { color: rgba(238, 241, 246, 0.82); }
html[data-ui="obsidian"] .notice-bar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--tint-line);
}
html[data-ui="obsidian"] .sec-more { color: rgba(238, 241, 246, 0.6); }
html[data-ui="obsidian"] .banner-dot { background: rgba(255, 255, 255, 0.4); }
html[data-ui="obsidian"] .banner-dot.on { background: #fff; width: 16px; }

/* 底导航：贴底黑玻璃 + 渐变细条，和 aurora 的悬浮胶囊区分开 */
html[data-ui="obsidian"] .tabbar {
  background: rgba(12, 15, 22, 0.86);
  backdrop-filter: blur(30px) saturate(130%);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-ui="obsidian"] .tab.active { color: var(--c-primary-ink); }
html[data-ui="obsidian"] .tab-icon { position: relative; }
html[data-ui="obsidian"] .tab.active .tab-icon {
  background: transparent;
  box-shadow: none;
  transform: none;
}
html[data-ui="obsidian"] .tab.active .tab-icon::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--g-brand);
  box-shadow: 0 0 10px rgba(255, 122, 69, 0.5);
}
html[data-ui="obsidian"] .fab { border: 1px solid rgba(255, 255, 255, 0.16); }

/* ================= 底导航图标：三种风格 ================= */
/* line 细线 / fill 实底 / duo 双色（默认）
 * ⚠️ fill 不能写 `stroke-width: 0`（P-86）：icons.js 里排队、购物车、趋势这几个图标的
 * 实心路径只是局部（一个三角、一条车斗线），线稿一关就只剩一个色块 ——
 * 实测「排队」变成单个三角，根本认不出是什么。实心靠「色块层铺满 + 线稿收细」实现，
 * 线稿永远保留，图标才不会被配置项弄成看不懂的形状。 */
html[data-tabicon="line"] .tab.active .tab-icon { background: transparent !important; box-shadow: none !important; }
html[data-tabicon="line"] .tab.active .tab-icon .ico { stroke-width: 2.2; }
html[data-tabicon="fill"] .tab.active .tab-icon .ico { stroke-width: 1.5; }
html[data-tabicon="fill"] .tab.active .tab-icon .ico path:first-child { opacity: 1; }
html[data-tabicon="duo"] .tab.active .tab-icon .ico { stroke-width: 2.1; }

/* 激活项胶囊底（后台可关）
 * ⚠️ 这里绝对不能加 padding：.tab-icon 是固定 40×32 的 border-box，
 * 内边距只会把里面的 SVG 压扁（24px 压成 15×24，带描边的 brutal 只剩 11×24），
 * 而且选中 / 未选中盒子尺寸一变，切 tab 时整条底栏就在抖（P-86）。 */
html[data-tabpill="on"] .tab.active .tab-icon {
  border-radius: 12px;
}
html[data-tabpill="off"] .tab.active .tab-icon {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 选中态只换颜色/底色，图标本身不位移、不缩放。
 * 一位移就是「点哪个 tab，哪个图标跳一下」，连续切页看着整条底栏在抖（P-86）。 */
.tab-icon .ico { transition: none; }

/* ================= 排队返奖 & 商家主页 通用组件 ================= */
.qe-card {
  margin: 0 14px 12px;
  background: var(--card-bg, #fff);
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--c-line);
}
html[data-ui="aurora"] .qe-card { border-color: rgba(255, 255, 255, 0.09); }
html[data-ui="brutal"] .qe-card { border: 2.5px solid #16130d; box-shadow: 4px 4px 0 #16130d; }

.qe-head { display: flex; gap: 12px; padding: 13px; align-items: center; }
.qe-cover {
  width: 76px; height: 76px; border-radius: 14px; flex: none;
  object-fit: cover; background: var(--c-fill);
}
.qe-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.qe-sub { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }
.qe-mode {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; margin-right: 6px;
  background: var(--g-brand); color: #fff;
}
html[data-ui="brutal"] .qe-mode { background: var(--c-primary-solid, #c2340a); border: 1.5px solid #16130d; }

.qe-progress {
  height: 8px; border-radius: 999px; background: var(--c-fill);
  overflow: hidden; margin: 8px 0 6px;
}
.qe-progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--g-brand);
  transition: width 0.6s cubic-bezier(.22, 1, .36, 1);
}
html[data-ui="brutal"] .qe-progress { border: 2px solid #16130d; height: 10px; }
html[data-ui="brutal"] .qe-progress > i { background: #ff4d00; }

.qe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 18px; border-radius: 999px; border: 0;
  background: var(--g-brand); color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-brand);
  transition: transform 0.16s;
}
.qe-btn:active { transform: scale(0.95); }
.qe-btn[disabled] { opacity: 0.5; box-shadow: none; }
html[data-ui="brutal"] .qe-btn {
  background: var(--c-primary-solid, #c2340a); border: 2.5px solid #16130d; box-shadow: 3px 3px 0 #16130d; border-radius: 10px;
}
html[data-ui="minimal"] .qe-btn { box-shadow: none; }

.qe-prize-row { display: flex; gap: 10px; padding: 0 13px 13px; flex-wrap: wrap; }
.qe-prize {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 10px; background: var(--c-fill); font-size: 12px;
}
.qe-prize img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }

/* 商家主页 */
.shop-banner { position: relative; width: 100%; height: 168px; overflow: hidden; }
.shop-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.42) 100%);
}
.shop-avatar {
  width: 62px; height: 62px; border-radius: 16px; border: 3px solid var(--card-bg, #fff);
  background: var(--card-bg, #fff); object-fit: cover; flex: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.shop-name { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.shop-meta { font-size: 12px; color: var(--c-text-3); margin-top: 4px; line-height: 1.6; }
.shop-sec { margin: 0 14px 14px; }
.shop-sec-title {
  font-size: 15px; font-weight: 700; margin: 16px 14px 10px;
  display: flex; align-items: center; gap: 6px;
}
.shop-sec-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--g-brand);
}
html[data-ui="brutal"] .shop-sec-title::before { background: #ff4d00; }
.shop-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px; }
.shop-album img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
/* F505 相册分组切换：复用 .chip，选中只换颜色不改几何（P-86）；颜色全走语义变量（P-23） */
.shop-album-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 8px; scrollbar-width: none; }
.shop-album-chips::-webkit-scrollbar { display: none; }
.shop-album-chips .chip { white-space: nowrap; }
.shop-album-note { padding: 0 14px 8px; font-size: 12px; line-height: 1.6; color: var(--c-text-2); }
.shop-case {
  background: var(--card-bg, #fff); border-radius: var(--r-lg, 16px); padding: 12px;
  margin: 0 14px 10px; box-shadow: var(--shadow-1); border: 1px solid var(--c-line);
}
html[data-ui="brutal"] .shop-case { border: 2.5px solid #16130d; box-shadow: 3px 3px 0 #16130d; }
.shop-case-title { font-size: 14.5px; font-weight: 700; }
.shop-case-desc { font-size: 12.5px; color: var(--c-text-3); margin-top: 5px; line-height: 1.65; }
.shop-case-imgs { display: flex; gap: 6px; margin-top: 9px; overflow-x: auto; }
.shop-case-imgs img { width: 84px; height: 84px; border-radius: 9px; object-fit: cover; flex: none; }
.shop-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--c-fill); color: var(--c-text); margin: 0 6px 6px 0;
}
html[data-ui="brutal"] .shop-chip { border: 1.5px solid #16130d; background: #ffefd0; font-weight: 700; }

/* ---- aurora 深色下的对比度补丁：小字在深色底上要更亮才看得清 ---- */
html[data-ui="aurora"] .nav-item,
html[data-ui="aurora"] .nav-grid,
html[data-ui="aurora"] .nav-label { color: rgba(255, 255, 255, 0.86); }
html[data-ui="aurora"] .gb-title { color: #fff; }
html[data-ui="aurora"] .gb-meta,
html[data-ui="aurora"] .gb-price s { color: rgba(255, 255, 255, 0.62); }
/* 价格用的是渐变填充文字（background-clip:text），深色底上要强制反白 */
html[data-ui="aurora"] .gb-price b,
html[data-ui="aurora"] .gb-price strong {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
html[data-ui="aurora"] .headline-item { color: rgba(255, 255, 255, 0.82); }
/* 公告条的文字色交给 --tint-fg，这里只管底和边（之前误把文字刷白，白字配浅黄底看不见） */
html[data-ui="aurora"] .notice-bar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--tint-line);
}
html[data-ui="aurora"] .sec-more { color: rgba(255, 255, 255, 0.6); }
html[data-ui="aurora"] .banner-dot { background: rgba(255, 255, 255, 0.4); }
html[data-ui="aurora"] .banner-dot.on { background: #fff; width: 16px; }

/* ---- brutal 补充：按钮/胶囊/顶栏也要硬朗，否则混进圆润元素风格就散 ---- */
html[data-ui="brutal"] .topbar { box-shadow: 0 5px 0 #16130d; }
html[data-ui="brutal"] .btn,
html[data-ui="brutal"] .points-pill,
html[data-ui="brutal"] .fab {
  border-radius: 9px !important;
  border: 2.5px solid #16130d !important;
  box-shadow: 3px 3px 0 #16130d !important;
  font-weight: 800;
}
/* 亮橙底压白字只有 3.33:1，小字认不出（P-71 对比度审计报过）；
 * 压深一档到 #d63c00 是 4.66:1，色相不变，还是那个橙。 */
html[data-ui="brutal"] .btn-primary { background: #d63c00; color: #fff; }
html[data-ui="brutal"] .btn-line { background: #fffdf7; color: #16130d; }
html[data-ui="brutal"] .ad-card,
html[data-ui="brutal"] .gb-card,
html[data-ui="brutal"] .qe-card,
html[data-ui="brutal"] .card-panel { border-radius: 10px !important; }
html[data-ui="brutal"] .tag-chip { border-radius: 6px !important; }
html[data-ui="brutal"] .ad-cover,
html[data-ui="brutal"] .gb-cover,
html[data-ui="brutal"] .banner { border-radius: 8px !important; }
/* 顶栏里的控件也要跟着硬朗，否则上半屏是圆润风、下半屏是潮牌风，看着割裂 */
html[data-ui="brutal"] .topbar input,
html[data-ui="brutal"] .topbar button,
html[data-ui="brutal"] .topbar a,
html[data-ui="brutal"] .topbar .search-box {
  border: 2.5px solid #16130d !important;
  box-shadow: 2px 2px 0 #16130d !important;
  border-radius: 8px !important;
}

/* ================================================================
 * 积分商城：头图 / 商品卡 / 活动徽标 / 评价
 * 三套 UI 各给一套说法，不是只改默认那套。
 * ================================================================ */

/* ① minimal：白底细线，头图不能变成一块黑 */
html[data-ui="minimal"] .mall-hero {
  background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0 0 14px 14px;
}
html[data-ui="minimal"] .mall-hero::after { display: none; }
html[data-ui="minimal"] .mall-kicker { color: var(--c-text-3); opacity: 1; }
html[data-ui="minimal"] .mall-sub { color: var(--c-text-2); opacity: 1; }
html[data-ui="minimal"] .mall-bal {
  background: var(--c-fill);
  border: 1px solid var(--c-line);
  backdrop-filter: none;
}
html[data-ui="minimal"] .mall-bal-k { color: var(--c-text-3); opacity: 1; }
html[data-ui="minimal"] .mall-more {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  color: var(--c-primary-ink, #c2340a);
}
html[data-ui="minimal"] .shop-item,
html[data-ui="minimal"] .shop-item.in-act {
  box-shadow: none;
  border: 1px solid var(--c-line);
}
html[data-ui="minimal"] .shop-item.in-act { border-color: var(--c-primary, #ff5a2e); }
html[data-ui="minimal"] .shop-act-bar {
  background: var(--c-primary-soft, #fff1ec);
  color: var(--c-on-soft, #c2340a);
  border-top: 1px solid var(--c-line);
}

/* ② aurora：深玻璃 + 发光边，头图要透出霓虹 */
html[data-ui="aurora"] .mall-hero {
  background:
    radial-gradient(120% 100% at 85% -10%, rgba(255, 138, 61, 0.42) 0%, rgba(255, 138, 61, 0) 62%),
    linear-gradient(150deg, rgba(38, 26, 44, 0.96) 0%, rgba(28, 18, 26, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 22px 22px;
}
html[data-ui="aurora"] .mall-bal {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-ui="aurora"] .mall-more {
  background: rgba(255, 255, 255, 0.14);
  color: #ffd9c7;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
html[data-ui="aurora"] .shop-item {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}
html[data-ui="aurora"] .shop-item.in-act {
  border-color: rgba(255, 138, 61, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.24), 0 6px 24px rgba(255, 90, 46, 0.18);
}
html[data-ui="aurora"] .shop-act-bar {
  background: linear-gradient(120deg, rgba(255, 138, 61, 0.22), rgba(255, 77, 31, 0.10));
  color: #ffb08a;
  border-top-color: rgba(255, 138, 61, 0.28);
}
html[data-ui="aurora"] .item-act {
  background: rgba(255, 138, 61, 0.1);
  border-color: rgba(255, 138, 61, 0.42);
}
html[data-ui="aurora"] .act-go {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 138, 61, 0.5);
}
html[data-ui="aurora"] .rv-star { color: rgba(255, 255, 255, 0.18); }

/* ③ brutal：粗黑描边 + 硬阴影 + 直角，头图也要「贴纸感」 */
html[data-ui="brutal"] .mall-hero {
  background: linear-gradient(135deg, #ffd9a8 0%, #ffb877 100%);
  color: #16130d;
  border-radius: 0;
  border-bottom: 3px solid #16130d;
}
html[data-ui="brutal"] .mall-hero::after { display: none; }
html[data-ui="brutal"] .mall-kicker { color: #16130d; opacity: 0.6; }
html[data-ui="brutal"] .mall-sub { color: #16130d; opacity: 0.8; }
html[data-ui="brutal"] .mall-bal {
  background: #fff;
  border: 2.5px solid #16130d;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #16130d;
  padding: 12px 14px;
  backdrop-filter: none;
}
html[data-ui="brutal"] .mall-more {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  border: 2px solid #16130d;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .shop-item {
  border: 2.5px solid #16130d;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #16130d;
}
html[data-ui="brutal"] .shop-item.in-act { border-color: #16130d; }
html[data-ui="brutal"] .shop-act-bar {
  background: var(--c-primary-soft, #ffe9d6);
  color: #16130d;
  border-top: 2px solid #16130d;
  font-weight: 700;
}
html[data-ui="brutal"] .chip-act {
  border: 2px solid #16130d;
  box-shadow: 2px 2px 0 #16130d;
  border-radius: 8px;
  color: #16130d;
}
html[data-ui="brutal"] .chip-act.on {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
}
html[data-ui="brutal"] .item-act {
  border: 2.5px solid #16130d;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #16130d;
}
html[data-ui="brutal"] .act-go {
  border: 2px solid #16130d;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #16130d;
  color: #16130d;
}
html[data-ui="brutal"] .rv-star { color: #ddd6c8; }
html[data-ui="brutal"] .rv-star.on { color: #f0a000; }
html[data-ui="brutal"] .rv-text {
  border: 2.5px solid #16130d;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #16130d;
}

/* ── 规则列表（排队活动 / 广告团购 / 商城兑换共用）─────────────────
   h5.css 给的是结构和默认色；minimal 直接继承默认，不重复写一遍。
   aurora（深底发光）和 brutal（米黄+黑边）各自给质感，文字颜色必须亮/深得
   够对比度 —— 规则是让人**读懂**的，不是装饰。 */
html[data-ui="aurora"] .rule-item {
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--c-primary, #ff5a2e);
}
html[data-ui="aurora"] .rule-k { color: #ffffff; }
html[data-ui="aurora"] .rule-d { color: rgba(242, 242, 247, 0.88); }
html[data-ui="aurora"] .rule-lead { color: rgba(242, 242, 247, 0.88); }

html[data-ui="brutal"] .rule-item {
  padding: 9px 11px;
  background: #fff9ec;
  border: 2.5px solid #16130d;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .rule-k { color: #16130d; }
html[data-ui="brutal"] .rule-d { color: #3a342a; }
html[data-ui="brutal"] .rule-lead { color: #3a342a; }

/* ================= 搜索筛选 chips（三套主题各一段，P-23） =================
 * 搜索结果是「大分类 + 标签」两层筛选（P-48）：chip 是这里唯一的高频交互控件，
 * 三套主题的圆角/描边/阴影差异最大，必须分开写，不能只改默认那套。
 * 结果卡里的 .s-cat（大分类）和 .s-tag（标签）同理 —— 大分类走语义字色，标签走各自的贴纸样式。 */

/* ① minimal：纸白 + 细线 + 小圆角，选中态淡底，不用阴影 */
html[data-ui="minimal"] .sf-chip {
  background: var(--card-bg, #fff);
  border: 1px solid var(--c-line, #ececf0);
  border-radius: 10px;
  box-shadow: none;
}
html[data-ui="minimal"] .sf-chip.on {
  background: var(--c-primary-soft);
  border-color: transparent;
  color: var(--c-on-soft);
}
html[data-ui="minimal"] .s-cat {
  color: var(--c-text);
  font-weight: 600;
}
html[data-ui="minimal"] .s-tag {
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  border-radius: 4px;
}

/* ② aurora：毛玻璃底 + 发光边，选中态整块点亮（深底上不能用淡底深字） */
html[data-ui="aurora"] .sf-chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--c-line, rgba(255, 255, 255, 0.16));
  color: var(--c-text-2);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
html[data-ui="aurora"] .sf-chip.on {
  background: var(--c-primary);
  border-color: transparent;
  color: #16130d;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 4px 16px rgba(255, 90, 46, 0.32);
}
html[data-ui="aurora"] .s-cat {
  color: var(--c-text);
  font-weight: 700;
}
html[data-ui="aurora"] .s-tag {
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-text);
}

/* ③ brutal：粗黑描边 + 硬阴影 + 直角，点下去像按下实体按钮 */
html[data-ui="brutal"] .sf-chip {
  background: var(--card-bg, #fffdf7);
  border: 2px solid #16130d;
  border-radius: 2px;
  color: var(--c-text);
  font-weight: 700;
  box-shadow: 2px 2px 0 #16130d;
}
html[data-ui="brutal"] .sf-chip.on {
  background: var(--c-accent, #ffb020);
  color: #16130d;
  border-color: #16130d;
}
html[data-ui="brutal"] .sf-chip:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
/* 标签做成「小印章」：白底黑框。原来整块黄底，一条结果挂 3 个标签会糊成一片 */
html[data-ui="brutal"] .s-cat {
  color: #16130d;
  font-weight: 800;
}
html[data-ui="brutal"] .s-tag {
  background: var(--card-bg, #fffdf7);
  color: #16130d;
  border: 1.5px solid #16130d;
  border-radius: 0;
  font-weight: 800;
}

/* ================================================================
 * ④⑤ luxe / obsidian：商城 · 规则 · 搜索（P-23：新主题和现有三套
 * 同一张清单逐项对齐，一处都不能少）
 * ================================================================ */

/* —— 商城：头图 / 余额条 / 商品卡 —— */
html[data-ui="luxe"] .mall-hero {
  background: linear-gradient(180deg, #fff 0%, #f7f5f0 100%);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0 0 16px 16px;
}
html[data-ui="luxe"] .mall-hero::after { display: none; }
html[data-ui="luxe"] .mall-kicker { color: var(--c-text-3); opacity: 1; }
html[data-ui="luxe"] .mall-sub { color: var(--c-text-2); opacity: 1; }
html[data-ui="luxe"] .mall-bal {
  background: var(--c-fill);
  border: 1px solid var(--c-line);
  backdrop-filter: none;
}
html[data-ui="luxe"] .mall-bal-k { color: var(--c-text-3); opacity: 1; }
html[data-ui="luxe"] .mall-more {
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-primary-ink, #c2340a);
}
html[data-ui="luxe"] .shop-item,
html[data-ui="luxe"] .shop-item.in-act {
  box-shadow: var(--shadow-1);
  border: 1px solid var(--c-line);
}
html[data-ui="luxe"] .shop-item.in-act { border-color: var(--c-primary, #ff5a2e); }
html[data-ui="luxe"] .shop-act-bar {
  background: var(--c-primary-soft, #fff1ec);
  color: var(--c-on-soft, #8a2a0c);
  border-top: 1px solid var(--c-line);
}

html[data-ui="obsidian"] .mall-hero {
  background:
    radial-gradient(120% 100% at 85% -10%, rgba(255, 200, 120, 0.1) 0%, rgba(255, 200, 120, 0) 60%),
    linear-gradient(150deg, #131720 0%, #0b0e15 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 20px 20px;
}
html[data-ui="obsidian"] .mall-bal {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-ui="obsidian"] .mall-more {
  background: rgba(255, 255, 255, 0.12);
  color: #ffd9c7;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
html[data-ui="obsidian"] .shop-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-ui="obsidian"] .shop-item.in-act {
  border-color: rgba(255, 138, 61, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.2), 0 8px 26px rgba(255, 90, 46, 0.14);
}
html[data-ui="obsidian"] .shop-act-bar {
  background: rgba(255, 138, 61, 0.14);
  color: #ffb08a;
  border-top-color: rgba(255, 138, 61, 0.22);
}
html[data-ui="obsidian"] .item-act {
  background: rgba(255, 138, 61, 0.08);
  border-color: rgba(255, 138, 61, 0.4);
}
html[data-ui="obsidian"] .act-go {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 138, 61, 0.45);
}
html[data-ui="obsidian"] .rv-star { color: rgba(255, 255, 255, 0.18); }

/* —— 规则列表：规则是让人「读懂」的，对比度必须够 —— */
html[data-ui="luxe"] .rule-item {
  padding: 9px 11px;
  background: #fbf8f1;
  border-left: 2px solid var(--c-primary, #c2340a);
  border-radius: 8px;
}
html[data-ui="luxe"] .rule-k { color: var(--c-text); }
html[data-ui="luxe"] .rule-d { color: var(--c-text-2); }
html[data-ui="luxe"] .rule-lead { color: var(--c-text-2); }

html[data-ui="obsidian"] .rule-item {
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--c-primary, #ff5a2e);
}
html[data-ui="obsidian"] .rule-k { color: #ffffff; }
html[data-ui="obsidian"] .rule-d { color: rgba(238, 241, 246, 0.86); }
html[data-ui="obsidian"] .rule-lead { color: rgba(238, 241, 246, 0.86); }

/* —— 搜索 chips / 结果卡标签 —— */
html[data-ui="luxe"] .sf-chip {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: none;
}
html[data-ui="luxe"] .sf-chip.on {
  background: var(--c-primary-soft);
  border-color: transparent;
  color: var(--c-on-soft);
}
html[data-ui="luxe"] .s-cat { color: var(--c-text); font-weight: 600; }
html[data-ui="luxe"] .s-tag {
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  border-radius: 4px;
}

html[data-ui="obsidian"] .sf-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-text-2);
  border-radius: 999px;
}
html[data-ui="obsidian"] .sf-chip.on {
  background: var(--c-primary);
  border-color: transparent;
  color: #10131a;
  font-weight: 700;
}
html[data-ui="obsidian"] .s-cat { color: var(--c-text); font-weight: 700; }
html[data-ui="obsidian"] .s-tag {
  background: rgba(255, 255, 255, 0.13);
  color: var(--c-text);
}

/* F503：实色底反白字。颜色属「皮肤差异」写在 ui-presets.css（audit-ui-regress
   白名单段），几何仍只在 h5.css 一处；与全站 8 处实色按钮的白字口径一致。 */
.sh-op.primary { color: #fff; }

/* ===== F503 集市标题左标签 · 五套皮肤（P-23：复杂徽标每套各写一段）=====
   只覆盖底色 / 描边 / 圆角；尺寸、内边距、行高、外边距一律留在 h5.css 一处，
   保证选中与未选中的几何完全一致（P-86）。 */
html[data-ui="minimal"] .sh-title-tag {
  background: var(--c-primary-soft); color: var(--c-on-soft);
  border-color: var(--c-line); border-radius: 3px;
}
html[data-ui="minimal"] .sh-title-tag.minor { background: var(--chip-bg); color: var(--chip-fg); }

html[data-ui="aurora"] .sh-title-tag {
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
html[data-ui="aurora"] .sh-title-tag.minor {
  background: rgba(255, 255, 255, 0.08); color: var(--c-text-2);
}

html[data-ui="brutal"] .sh-title-tag {
  background: var(--c-primary-solid); color: #fff;
  border-color: var(--c-text); border-radius: 0;
}
html[data-ui="brutal"] .sh-title-tag.minor {
  background: var(--chip-bg); color: var(--chip-fg); border-color: var(--c-line);
}

html[data-ui="luxe"] .sh-title-tag {
  background: var(--c-primary-soft); color: var(--c-on-soft); border-color: var(--c-line);
}
html[data-ui="luxe"] .sh-title-tag.minor { background: var(--chip-bg); color: var(--chip-fg); }

html[data-ui="obsidian"] .sh-title-tag {
  background: rgba(255, 255, 255, 0.10); color: var(--c-text);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-ui="obsidian"] .sh-title-tag.minor {
  background: rgba(255, 255, 255, 0.05); color: var(--c-text-2);
}

/* F507 营销标（标题前效果标）· 五套皮肤：只换底色/描边，几何留在 h5.css 一处（P-86） */
html[data-ui="minimal"] .sh-title-tag.promo {
  background: var(--c-primary-solid); color: var(--c-white); border-color: var(--c-primary-solid);
}
html[data-ui="aurora"] .sh-title-tag.promo {
  background: var(--c-primary-solid); color: var(--c-white);
  border-color: var(--c-primary-solid);
}
html[data-ui="brutal"] .sh-title-tag.promo {
  background: var(--c-text); color: var(--c-bg);
  border-color: var(--c-text); border-radius: 0;
}
html[data-ui="luxe"] .sh-title-tag.promo {
  background: var(--c-primary-solid); color: var(--c-white); border-color: var(--c-primary-solid);
}
html[data-ui="obsidian"] .sh-title-tag.promo {
  background: var(--c-primary-solid); color: var(--c-white); border-color: var(--c-primary-solid);
}