/* ============================================================
   design-tokens.css · 省大拿设计令牌（唯一设计真源）
   版本: v1.0 · 2026-08-27（用户拍板）
   文档真源: docs/省大拿4Tab界面设计优化记录.md（第十二章）

   铁律:
   1. 所有新开发/改版的 UI 一律引用 --sd-* 令牌, 禁止硬编码色值/圆角/间距/字号
   2. 品牌红 #FA2C19 为唯一主色; 橙色 --sd-color-secondary 仅限促销标签,
      全屏占比 ≤20%, 禁止用作大面积背景
   3. shared.css 的 --primary / --radius-* / --fs-* 为历史兼容层;
      改版期逐步把旧组件迁移到 --sd-*, 两套并存期间禁止同一语义双写
   4. 字号铁律: 最小 12px（--sd-font-size-min）, 历史 --fs-* 若 <12px 在改版中修正
   5. 暗色模式沿用现有机制（html.dark 覆盖）, 暗色令牌体系二期完善
   ============================================================ */

:root {
  /* ── 1. 品牌色（铁律） ───────────────────────────── */
  --sd-color-primary: #FA2C19;         /* 品牌红 · 主色 */
  --sd-color-primary-dark: #D81B06;    /* 品牌红深色 · 按下态 */
  --sd-color-primary-light: #FFF1EF;   /* 品牌红浅底 · 标签底色 */
  --sd-color-secondary: #FF6B35;       /* 橙色 · 仅促销标签（≤20%） */
  --sd-color-secondary-light: #FFF3EC; /* 橙色浅底 · 促销标签底 */

  /* ── 2. 功能色 ───────────────────────────────────── */
  --sd-color-success: #07C160;         /* 成功 / 已支付 */
  --sd-color-success-light: #E8F9F0;
  --sd-color-warning: #FF976A;         /* 警告 / 优惠 */
  --sd-color-warning-light: #FFF3EC;
  --sd-color-danger: #EE0A24;          /* 危险 / 删除 / 错误 */
  --sd-color-danger-light: #FEECEE;
  --sd-color-info: #2D8CF0;            /* 信息 / 链接 / 信任 */
  --sd-color-info-light: #EAF3FE;

  /* ── 3. 中性色（黑 / 白 / 灰） ───────────────────── */
  --sd-color-text-primary: #1A1A1A;    /* 主要文字 */
  --sd-color-text-secondary: #666666;  /* 辅助文字 */
  --sd-color-text-placeholder: #999999;/* 占位文字 */
  --sd-color-text-inverse: #FFFFFF;    /* 主色底上的文字 */
  --sd-color-bg-page: #F5F6FA;         /* 页面背景 */
  --sd-color-bg-card: #FFFFFF;         /* 卡片背景 */
  --sd-color-bg-mask: rgba(0, 0, 0, .5); /* 遮罩 */
  --sd-color-border: #E5E5E5;          /* 分割线 / 边框 */
  --sd-color-border-strong: #D0D0D0;   /* 强边框 / 选中描边 */

  /* ── 4. 圆角 ─────────────────────────────────────── */
  --sd-radius-card: 12px;              /* 大卡片 */
  --sd-radius-btn: 8px;                /* 小按钮 / 输入框 */
  --sd-radius-tag: 4px;                /* 小标签 / 徽标 */
  --sd-radius-pill: 999px;             /* 胶囊 / 头像 */

  /* ── 5. 字体 ─────────────────────────────────────── */
  --sd-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", Arial, sans-serif;
  --sd-font-size-min: 12px;            /* 铁律: 最小字号 */
  --sd-font-size-xs: 12px;             /* 辅助文字 */
  --sd-font-size-sm: 13px;             /* 次要文字 */
  --sd-font-size-md: 15px;             /* 正文 */
  --sd-font-size-lg: 17px;             /* 卡片标题 */
  --sd-font-size-xl: 20px;             /* 页面标题 */
  --sd-font-weight-bold: 600;

  /* ── 6. 间距 / 尺寸 ──────────────────────────────── */
  --sd-space-page: 16px;               /* 页面左右边距 */
  --sd-space-xs: 4px;
  --sd-space-sm: 8px;
  --sd-space-md: 12px;
  --sd-space-lg: 16px;
  --sd-space-xl: 24px;
  --sd-height-tabbar: 56px;            /* 底部 Tab（含安全区） */
  --sd-height-header: 44px;            /* 顶部导航 */
  --sd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sd-content-max: 480px;             /* 桌面端内容区最大宽（v2.13 统一口径；bezel 黑边为装饰不计入） */

  /* ── 7. 阴影 ─────────────────────────────────────── */
  --sd-shadow-card: 0 1px 4px rgba(0, 0, 0, .06);    /* 卡片 */
  --sd-shadow-float: 0 -2px 12px rgba(0, 0, 0, .08); /* 底部面板浮起 */
}

/* ── 8. 兼容层：shared.css 历史变量 → 新令牌（M1 接入） ──
   规则：只映射「值等价」变量，防旧组件全站视觉跳动（字号/阴影/背景微差会全局变样）。
   值与语义与令牌不同的历史变量（--bg #f5f5f5≠#F5F6FA / --border #eee≠#E5E5E5 /
   --warn / --surface / --hover / --fs-base 14px≠md 15px / --fs-secondary / --fs-md /
   --fs-lg 18≠17 / --fs-amt* / --shadow-* / --radius-lg / --font-sans 栈不同）→
   保持 shared.css 原值，随改版逐步迁移到 --sd-*，迁移后删除对应历史变量（禁双写）。
   暗色模式：shared.css 的 html.dark 覆盖块在其后加载，硬编码覆盖本层映射（--card/--text/
   --primary-light 等），暗色行为不变。 */
:root {
  --primary: var(--sd-color-primary);          /* #fa2c19 ✅ 同值 */
  --primary-light: var(--sd-color-primary-light); /* #fff1ef ✅ 同值 */
  --card: var(--sd-color-bg-card);             /* #fff ✅ 同值 */
  --text: var(--sd-color-text-primary);        /* #1a1a1a ✅ 同值 */
  --success: var(--sd-color-success);          /* #07c160 ✅ 同值 */
  --radius-sm: var(--sd-radius-btn);           /* 8px ✅ 同值 */
  --radius-md: var(--sd-radius-card);          /* 12px ✅ 同值 */
  --radius-pill: var(--sd-radius-pill);        /* 999px ✅ 同值 */
  --fs-xs: var(--sd-font-size-min);            /* 12px ✅ 同值 */
  --fs-sm: var(--sd-font-size-sm);             /* 13px ✅ 同值 */
  --fs-xl: var(--sd-font-size-xl);             /* 20px ✅ 同值 */
}

/* 省大拿 · 共享设计 Token（v4.1 · 2026-08-06）
   统一 :root 变量 + 暗色模式 + 基础重置 + 焦点环。 */

:root {
  --primary: #fa2c19;
  --primary-light: #fff1ef;
  --brand-alipay: #1677ff;   /* 支付宝品牌蓝（支付按钮/支付宝入口） */
  --brand-wechat: #07c160;   /* 微信品牌绿（微信支付按钮/微信入口） */
  --bg: #f5f5f5;
  --card: #fff;
  --text: #1a1a1a;
  --text-2: #666;
  --success: #07c160;
  --warn: #ad6800;
  --border: #eee;
  --surface: #fafafa;
  --hover: #f0f0f0;
  /* 2026-08-10 全站字体体系 Token（中英文混排栈 + 字号梯度） */
  /* 2026-08-10 全站字体体系 Token（中英文混排栈 + 字号梯度）
     2026-08-13：显式补充 emoji 字体栈，确保 ¥/🉑/✅/📦 等 emoji 与中文同字体优先级渲染，
     避免跨平台 fallback 不一致导致「不协调」（用户反馈）。emoji 字体放在中文后、sans-serif 前，
     浏览器按字符逐一匹配：中文→中文字体、emoji→emoji 字体、半角符号→fallback sans。 */
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --fs-4xs: 8px;    /* 极微：版权/ICP 底部小字 */
  --fs-3xs: 10px;   /* 极微：状态条/页脚微字 */
  --fs-2xs: 11px;   /* 微：提示/错误/协议/角标微字 */
  --fs-xs: 12px;    /* 辅助：版权/ICP/时间戳/角标 */
  --fs-sm: 13px;    /* 次级：券chip/子页签/支付提示 */
  --fs-base: 14px;  /* 基础：按钮/热词/导航/输入框 */
  --fs-secondary: 15px; /* 次要正文：列表描述/按钮次要字号 */
  --fs-md: 16px;    /* 正文：对话气泡/列表/卡片 */
  --fs-h3: 17px;    /* 卡片标题/H3 */
  --fs-lg: 18px;    /* 强调：欢迎语首行/卡片标题 */
  --fs-xl: 20px;    /* 区块标题 */
  --fs-2xl: 24px;   /* 页面标题/弹窗标题 */
  --fs-3xl: 28px;   /* 大数字：支付金额/会员价 */
  --fs-amt: 32px;   /* 金额大字：会员价/应付金额 */
  --fs-amt-lg: 36px; /* 特大金额：支付弹窗主金额 */
  --fs-emoji: 48px; /* 空状态 emoji 尺寸 */
  /* 2026-08-10 视觉 Token：阴影层级 + 圆角体系（卡片/悬浮/弹层） */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ≥768px 平板：正文 +1px（阅读距离增大） */
@media (min-width: 768px) {
  :root { --fs-md: 17px; --fs-base: 15px; --fs-sm: 14px; }
}
/* ≥1200px 桌面：正文 +2px */
@media (min-width: 1200px) {
  :root { --fs-md: 18px; --fs-base: 16px; --fs-lg: 20px; }
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --card: #2d2d2d;
  --text: #e4e4e4;
  --text-2: #a0a0a0;
  --border: #404040;
  --primary-light: #3d1a14;
  --surface: #242424;
  --hover: #383838;
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .header { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .tabbar { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .drawer { background: var(--card); }
[data-theme="dark"] .drawer .menu-item { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .chat .bubble.bot { background: #383838; color: var(--text); }
[data-theme="dark"] .wrap { background: var(--card); }
[data-theme="dark"] .g-item { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .item { border-color: var(--border); }
[data-theme="dark"] .summary { background: var(--card); border-color: var(--border); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .chip { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .field select { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .empty { color: var(--text-2); }
[data-theme="dark"] .loading { color: var(--text-2); }

* { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; }
a, button, [onclick], [role="button"] { touch-action: manipulation; }

body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
}
/* 数字/单号/金额等宽对齐（2026-08-10 字体体系） */
.num, .mono, .no, .amt, [class*="-id"], [class*="-no"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ui-components.css — 省大拿统一 UI 原子组件样式（配合 /js/ui-components.js）
   设计原则：仅描述结构样式，颜色全部走 shared 设计 Token（var(--primary) 等），
   暗色模式自动适配；不写死色值，保证全站一致的视觉语言。
   版本：v12（2026-08-12 对话视觉压缩：气泡/按钮/头像/输入栏全面收紧，迁移硬编码字号到 Token） */

/* 返回键：SVG 箭头 + 可选文案，统一 34x34 命中区 */
.ui-back {
  display: inline-flex; align-items: center; gap: 2px;
  height: 44px; min-width: 44px; padding: 0 6px;
  border: none; background: transparent; color: var(--text, #222);
  font-size: 16px; cursor: pointer; border-radius: 8px;
}
.ui-back:hover { background: var(--hover, rgba(0,0,0,.06)); }
.ui-back svg { display: block; }
.ui-back__label { font-size: 15px; margin-left: 2px; }

/* 别名：历史遗留的 .back / .back-btn / .dd-back 统一收敛到同一套视觉，
   不改变任何点击行为（onclick / href 原样保留），仅统一尺寸·形状·命中区。
   color:inherit 让箭头跟随所在头部文字色，明暗主题下都不会不可见。 */
.back, .back-btn, .dd-back {
  display: inline-flex; align-items: center; gap: 2px;
  height: 44px; min-width: 44px; padding: 0 6px;
  border: none; background: transparent; color: inherit;
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 8px;
  text-decoration: none;
}
.back:hover, .back-btn:hover, .dd-back:hover { background: rgba(127,127,127,.15); }
.back svg, .back-btn svg, .dd-back svg { display: block; }

/* 通用按钮：三种变体（primary / ghost / text） */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border: none; border-radius: 10px;
  font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.ui-btn:active { opacity: .85; }
.ui-btn--primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(250,44,25,.18); }
.ui-btn--ghost { background: var(--primary-light); color: var(--primary); }
.ui-btn--text { background: transparent; color: var(--primary); padding: 0 8px; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 统一输入框：搜索框 / 对话输入框共用，消除尺寸不一 */
.ui-input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 22px;
  font-size: 16px; background: var(--card); color: var(--text);
}
.ui-input:focus { outline: none; border-color: var(--primary); }

/* 轻提示 Toast */
.ui-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 20px);
  background: rgba(0,0,0,.82); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-size: 14px; opacity: 0; transition: all .3s;
  z-index: 9999; max-width: 80%; text-align: center;
}
.ui-toast--show { opacity: 1; transform: translate(-50%, 0); }

/* 空状态 */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--text-2); }
.ui-empty__icon { font-size: 40px; }
.ui-empty__text { font-size: 15px; }

/* 标签徽章 */
.ui-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.ui-badge--movie { background: #fff0e6; color: #ff6a00; }
.ui-badge--dana { background: var(--primary-light); color: var(--primary); }
.ui-badge--default { background: var(--surface); color: var(--text-2); }

/* P0-2 页脚合规基线（d17 G-1 / P0-2）：统一 ≥12px、加深文字提升可读性。
   注：报告原建议 #bbb 实际对比度低于现状 #999（更看不清，属笔误），故采用 #888 作改善；
   严格 WCAG 2.1 AA(4.5:1) 需 #767676，如要彻底合规可调。!important 用于压制既有内联 style 覆盖。
   仅作用于页脚容器及其后代，不影响页面其他区域。 */
.site-footer, .footer-bar, .footer, .agreement,
.site-footer *, .footer-bar *, .footer *, .agreement * {
  font-size: 12px !important;
}
.site-footer, .footer-bar, .footer, .agreement {
  color: #767676 !important;
  line-height: 1.8 !important;
}
.site-footer a, .footer-bar a, .footer a, .agreement a {
  color: #767676 !important; text-decoration: none;
}
.site-footer .sep, .footer-bar .sep, .footer .sep, .agreement .sep {
  color: #8c8c8c !important;
}

/* === d17 阶段收口（2026-08-07）：共享原子工具类
   触发：站点级组件化根基已建，把高频样式收敛到此处供各页直接 class 引用，
   新页面 / 新功能避免每页重写。以下规则全部走 shared 设计 Token，
   暗色模式自动适配；不写死色值。 === */

/* P1-3 横向滚动 chip 行（电影票 step / date 等小 chip）
   -webkit-overflow-scrolling 保证 iOS 惯性滚动；隐藏滚动条避免视觉噪音。 */
.chip-scroll {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* P1-10 统一输入框基类（与 .ui-input 互补；方形 44px / 10px 圆角，
   适合查询 / 表单场景；.ui-input 保留圆胶囊形用于搜索 / 对话）。 */
.app-input-base {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; background: var(--card); color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.app-input-base:focus { outline: none; border-color: var(--primary); }

/* P1-12 统一输入框容器组件：首页搜索条(.input-bar) / AI智选对话框(.chat-input)
   共用同一套高度·间距·按钮尺寸，一处改全站同步。仅管 flex 布局与内部元素对齐，
   背景 / 边框由各自上下文（吸底条自带白底+顶边 / chat-card 内条）决定，
   避免破坏两页既有布局结构。 */
.sd-inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.sd-inputbar > .app-input-base { flex: 1; min-width: 0; }
.sd-inputbar .mic,
.sd-inputbar .clear {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
}

/* P1-5 统一 Header 基线（opt-in；新页面可直接 class="app-header"）。
   position:sticky top:0 解决 U-4/U-5 旧页面（fxzb-movie 等）顶栏不吸顶的 bug。 */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--card); border-bottom: 1px solid var(--border);
  min-height: 48px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px;
}

/* P1-5 标题栏子元素：标题 / 副标题 / 返回键对齐（UI.header() 工厂配套样式） */
.app-header__t { flex: 1; min-width: 0; }
.app-header__title { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header__sub { font-size: 12px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header .ui-back { flex-shrink: 0; }

/* P1-5 旧页面 header 统一基线（双类选择器提升优先级，压过各页单类差异；只针对
   button.back，避开 fxzb-movie 选座流程的 span.back 特殊返回）：
   z-index 对齐 50（orders=10 / 多数=20）、返回键去边框与文字残留 → 全站 34px SVG。 */
.header.header, .topbar.topbar { z-index: 50; }
.header.header button.back, .topbar.topbar button.back {
  border: none; padding: 0; font-size: 0; font-weight: 400;
  background: #f5f5f5; color: var(--text);
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.header.header button.back svg, .topbar.topbar button.back svg { display: block; }

/* P1-11 Logo 暗色模式：透明红 glyph → brightness(0) invert(1) 转白，
   透明像素保留透明。匹配报告方案 A「浅色自动融合 / 深色反色」。
   用 src*= 兜底绝对/相对路径都能命中。 */
[data-theme="dark"] img[src*="logo.png"] {
  filter: brightness(0) invert(1);
}

/* === 2026-08-09 统一热词胶囊 .cat-pill（全站唯一视觉来源）
   消除历史分叉：首页 #llHomeChat（ll-chat.css 灰版）与本地生活（内联红版）原各写一套，
   现统一收敛到此。视觉 = 品牌红 #fa2c19 字 + #ffd9cf 浅红边 + 999px 圆角 + 13px，
   与 search-view.css 的 .quick-tags .tag / .pf-pill 同款品牌语言。
   旧灰版样式已从 ll-chat.css / local-life index.html 删除，勿再写回。 */
.cat-pills {
  display: flex; flex-wrap: nowrap; gap: 5px; padding: 2px 0;  /* 2026-08-09 19:03：左右 padding 0 让热词胶囊贴 sd-bottombar 白底边（"铺满"） */
  flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cat-pills::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0; background: #fff;
  border: 1px solid #ffd9cf; color: #d41b06;
  padding: 6px 11px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .12s ease;
}
.cat-pill:active { background: #ffe9e3; border-color: #ffc4b3; transform: scale(.96); }

/* === 2026-08-09 对话卡片组件（AI 省钱管家 · 首页/本地生活共用，全站唯一视觉来源）
   收敛自 ll-chat.css #llHomeChat 前缀版 与 local-life/index.html 内联版（两处原本逐行一致，
   仅前缀不同 = 复制分叉）。现统一为无前缀公共类；ll-chat.css 与 local-life 内联的
   同名副本已删除，勿再写回。 */

/* 子导航 pills（AI省钱管家/大牌点餐/洗车/京东服务+） */
.sub-pills { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 0; margin-bottom: 0; border-bottom: none; -webkit-overflow-scrolling: touch; align-items: center; }
.sub-pills::-webkit-scrollbar { display: none; }
.sub-pill { flex-shrink: 0; padding: 5px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #f5f5f5; color: #666; cursor: pointer; white-space: nowrap; border: none; }
.sub-pill.on { background: var(--primary); color: #fff; }

/* 对话头部（新对话 / 我的订单等操作位，右对齐） */
.chat-head { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 2px; gap: 8px; }
.chat-head button, .chat-head .my-order { padding: 5px 11px; font-size: var(--fs-sm) !important; border: 1px solid var(--primary); background: #fff; color: var(--primary); border-radius: 8px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.my-order { font-size: var(--fs-sm) !important; color: var(--primary); text-decoration: none; background: #fff; border: 1px solid var(--primary); padding: 4px 10px; border-radius: 12px; white-space: nowrap; }

/* 对话流：消息行 / 头像 / 气泡（2026-08-12 压缩版：更小字号/内边距/圆角，提升信息密度） */
.chatlog { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.msg-row { display: flex; gap: 4px; align-items: flex-start; }
.msg-row .avatar { width: 26px; height: 26px; border-radius: 50%; background: #e8f0fe; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); line-height: 1; }
.bubble { max-width: 84%; padding: 6px 10px; border-radius: 10px; box-shadow: var(--shadow-sm); font-size: var(--fs-sm) !important; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bubble.bot { background: #f2f3f5; color: var(--text); align-self: flex-start; border-bottom-left-radius: 2px; }
.bubble.me { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }

/* 对话内操作按钮（actions 行）2026-08-12 压缩版：更小更轻，不抢正文 */
.actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin: 0 0 4px 2px; }
.actions-row button { padding: 5px 11px !important; font-size: var(--fs-sm) !important; border-radius: 14px; background: #fff; color: var(--primary); border: 1px solid var(--primary); cursor: pointer; line-height: 1.4; font-weight: 500; transition: background .15s, color .15s, transform .1s; }
.actions-row button:hover { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.actions-row button:active { transform: scale(0.96); background: var(--primary); color: #fff; }
.actions-row button.primary { background: var(--primary); color: #fff; }
.actions-row button.primary:hover { background: #fff; color: var(--primary); }
.actions-row .act-rec { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; margin: 2px 4px 0 0; font-size: var(--fs-xs) !important; font-weight: 600; color: #fff; background: linear-gradient(135deg, #ff5a3c, #fa2c19); border: none; border-radius: 14px; cursor: pointer; vertical-align: middle; box-shadow: 0 1px 4px rgba(250, 44, 25, .2); }
.actions-row .act-rec:active { opacity: .85; }
.actions-row .act-rec .rec-tag { font-size: var(--fs-xs) !important; font-weight: 700; color: var(--primary); background: #fff; border-radius: 6px; padding: 1px 6px; }

/* 支付弹层（#payMask 首页 / .mask 本地生活 兼容；z-index 9999 压过 tabbar 98） */
#payMask, .mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: none; align-items: center; justify-content: center; z-index: 9999; }
#payMask.show, .mask.show { display: flex; }
.paybox { background: #fff; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg); padding-bottom: calc(22px + env(safe-area-inset-bottom)); width: 300px; text-align: center; }
.paybox h3 { font-size: 16px; margin-bottom: 4px; }
.paybox .amt { font-size: 28px; font-weight: 800; color: var(--primary); margin: 6px 0; }
.paybox .sub { font-size: 13px; color: var(--gray, #8a9099); margin-bottom: 12px; }
.paybox .qr { width: 200px; height: 200px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.paybox .qr canvas { width: 100% !important; height: 100% !important; }
.paybox .tip { font-size: 13px; color: var(--gray, #8a9099); }
.paybox .close { margin-top: 12px; background: #fff; color: var(--primary); border: 1px solid var(--primary); border-radius: 8px; padding: 8px 20px; cursor: pointer; }

/* 优惠券 chip（支付弹层内抵扣） */
.coupon-chip { display: inline-block; margin: 4px 4px 0 0; padding: 6px 12px; font-size: 13px; border: 1px solid var(--primary); color: var(--primary); background: #fff; border-radius: 14px; cursor: pointer; }
.coupon-chip:active { transform: scale(.96); }
.coupon-chip.used { opacity: .45; pointer-events: none; }

/* 打字动画（2026-08-10 合源：原 local-life 内联副本已删，统一公共版） */
.typing { display: flex; gap: 4px; padding: 4px 0; }
.typing span { width: 7px; height: 7px; background: #ccc; border-radius: 50%; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ===== 订阅模块（2026-08-10 优化：品牌红/类化/动效，member.js + bundle 双源共用） ===== */
/* 2026-08-10 v12：卡片改 flex column + gap 统一节奏，解决文案被拉散 */
.sub-plan { position: relative; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; border-radius: 12px; padding: 8px 12px; margin: 4px 0; cursor: pointer; border: 1px solid #ececec; background: #fff; transition: border-color .2s, box-shadow .2s, transform .15s; }
.sub-plan.on { border-color: var(--primary); border-width: 2px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(250,44,25,.18); transform: scale(1.015); background: linear-gradient(180deg,#fff8f6 0%,#fff 30%); }
.sub-plan.on::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 3px; background: linear-gradient(135deg,#ff5a3c,var(--primary)); border-radius: 0 0 3px 3px; }
.sub-plan.disabled { opacity: .5; cursor: not-allowed; }
.sub-plan:active { transform: scale(.99); }
.sub-plan__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin: 0; min-height: 20px; }
.sub-plan__name { font-size: 16px; font-weight: 700; color: #333; line-height: 1.2; }
.sub-plan__term { font-size:12px; color: #767676; margin-left: 6px; line-height: 1.3; }
.sub-plan__price { font-size: 22px; font-weight: 800; line-height: 1; white-space: nowrap; }
.sub-plan__orig { font-size: 12px; color: #767676; text-decoration: line-through; margin-left: 4px; line-height: 1.1; }
.sub-plan__meta { font-size: 12px; color: #666; margin: 0; line-height: 1.25; }
.sub-plan__desc { font-size:12px; color: #767676; margin: 0; line-height: 1.25; }
/* perks 区块：紧凑间距，避免占满卡片垂直空间 */
.sub-plan__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5px; margin: 1px 0 0 0; padding: 2px 0 0 0; border-top: 1px solid #f5f5f5; }
.sub-plan__perk { display: flex; align-items: center; gap: 3px; font-size:12px; color: #444; line-height: 1.3; }
.sub-tag { position: absolute; top: -9px; right: 10px; font-size: 12px; font-weight: 600; color: #fff; padding: 2px 9px; border-radius: 10px; }
.sub-tag--red { background: var(--primary); }
.sub-tag--gold { background: #c9a227; }
.sub-tag--blue { background: #3da9fc; }
.sub-tag--gray { background: #bbb; }
.sub-cta { display: block; width: 100%; margin-top: 6px; padding: 9px 0; border: none; border-radius: 12px; background: linear-gradient(135deg,#ff5a3c,var(--primary)); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(250,44,25,.25); transition: opacity .15s, transform .1s; }
.sub-cta:active { transform: scale(.97); opacity: .92; }
.sub-cta:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.sub-note { font-size:12px; color: #767676; text-align: center; margin-top: 5px; line-height: 1.35; }
.sub-amount { text-align: center; margin: 4px 0 12px; }
.sub-amount__label { font-size: 13px; color: #666; }
.sub-amount__num { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.sub-amount__sub { font-size: 12px; color: #767676; }
.sub-steps { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.sub-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; line-height: 1.5; }
.sub-step .n { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sub-uid { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; background: #fafafa; border: 1px solid #eee; border-radius: 10px; }
.sub-uid__label { font-size:12px; color: #767676; }
.sub-uid__val { font-size: 14px; font-weight: 700; color: #333; letter-spacing: .5px; word-break: break-all; }
.sub-uid__copy { border: none; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.sub-uid__copy:active { opacity: .85; }

.sub-trust { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; padding: 4px 9px; background: linear-gradient(135deg,#f7fdf9,#f0f9f5); border-radius: 8px; border: 1px solid #e6f5ec; font-size:12px; color: #07c160; font-weight: 600; }
.sub-trust__item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }

/* === 从 index.html 内联迁移 (2026-08-11) === */

/* 提示条 */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:12px 22px;border-radius:22px;font-size:14px;font-weight:600;z-index:10005;max-width:86%;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.toast.show{opacity:1}
.toast.error{background:#e63946;color:#fff;box-shadow:0 4px 16px rgba(230,57,70,.4)}

/* 动画 */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes vipShine{0%,70%{left:-30%}100%{left:130%}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 遮罩+侧边菜单 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;display:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.overlay.show{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:78%;max-width:320px;background:#fff;z-index:101;transform:translateX(100%);transition:transform .25s;padding:20px;overflow-y:auto}
.drawer.show{transform:none}
.drawer h3{font-size:16px;margin-bottom:14px}
.drawer-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:none;background:#f5f5f5;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666}
.drawer-close:active{background:#e0e0e0}
.drawer .menu-item{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;cursor:pointer;display:flex;gap:10px;align-items:center}
.drawer .menu-item .mi-t{font-size:14px;font-weight:600;line-height:1.3}
.drawer .menu-item .mi-s{font-size:12px;color:#767676;margin-top:2px;line-height:1.3}
.drawer .menu-item .ico{font-size:18px}

/* 状态条 */
.status-bar{display:none;padding:6px 14px;font-size:12px;cursor:pointer;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,#fff7e6,#fff1e6);color:#ad4e00;border-bottom:1px solid #ffe0b3}
.status-bar.show{display:flex}
.status-bar.expired{background:linear-gradient(90deg,#fff1f0,#fff2e8);color:#cf1322}
.status-bar.vip{background:linear-gradient(90deg,#fffbe6,#fff7cc);color:#ad6800}
.status-bar .up-btn{background:#fa541c;color:#fff;border:none;border-radius:12px;padding:3px 12px;font-size:12px;white-space:nowrap}

/* 通知横幅 */
.announce-bar{display:none;align-items:center;gap:10px;padding:7px 12px;font-size:12px;cursor:pointer;position:relative;flex-shrink:0;animation:slideDown .3s ease}
.announce-bar.show{display:flex}
.announce-bar .ab-text{flex:1;line-height:1.4}
.announce-bar .ab-link{white-space:nowrap;font-weight:600;font-size:12px;text-decoration:none;padding:4px 10px;border-radius:12px}
.announce-bar .ab-close{background:none;border:none;font-size:16px;cursor:pointer;padding:2px 6px;opacity:.6}

/* 邀请横幅 */
.invite-banner{display:none;position:relative;margin:10px 12px 0;padding:14px 16px;background:linear-gradient(135deg,#eef4ff,#e3edff);border:1px solid #bcd2ff;border-radius:14px}
.invite-banner.show{display:block}
.invite-banner .ib-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;color:#5a7aa0;cursor:pointer;line-height:1;padding:2px 6px}
.invite-banner .ib-title{font-size:15px;font-weight:700;color:#1743a0;padding-right:22px}
.invite-banner .ib-sub{font-size:12px;color:#3b5ba5;margin-top:4px;line-height:1.5}
.invite-banner .ib-actions{display:flex;gap:10px;margin-top:12px}
.invite-banner .ib-cta{flex:1;background:linear-gradient(135deg,#4285f4,#185fa5);color:#fff;border:none;border-radius:10px;padding:10px;font-size:14px;font-weight:600;cursor:pointer}
.invite-banner .ib-ghost{background:#fff;color:#1743a0;border:1px solid #bcd2ff;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer}

/* 骨架屏 */
.skeleton-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px}
.sk-row{display:flex;gap:10px}
.sk-img{width:80px;height:80px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;flex-shrink:0}
.sk-info{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.sk-line{height:14px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.sk-line.w60{width:60%}.sk-line.w80{width:80%}.sk-line.w40{width:40%}.sk-line.w30{width:30%}
.sk-price{height:20px;width:35%;border-radius:4px;margin-top:2px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.sk-text{font-size:13px;color:#aaa;text-align:center;padding:8px 0 4px}

/* 系统功能卡片 */
.sys-card{background:#fff;border-radius:14px;padding:8px;border:1px solid #eef0f3;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.sys-card .big{font-size:24px;font-weight:700;color:#fa2c19;margin:6px 0}
.sys-card .code-box{background:#fff7e6;border:1px dashed #fa8c16;border-radius:8px;padding:12px;text-align:center;margin:10px 0}
.sys-card .code-box .code{font-size:22px;font-weight:700;letter-spacing:3px;color:#d4380d}
.sys-card .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.sys-card .row:last-child{border-bottom:none}
.sys-card .row .v{font-weight:600}
.sys-card .cta{display:block;width:100%;margin-top:12px;padding:11px;border:none;background:#fa2c19;color:#fff;border-radius:8px;font-size:14px;font-weight:600}
.sys-card .tip{font-size:12px;color:#767676;margin-top:8px;line-height:1.5}

/* === sd-sidebar Web Component (2026-08-11) === */
.sd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10003;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sd-overlay.show{opacity:1;pointer-events:auto}
.sd-drawer{position:fixed;top:0;right:0;bottom:0;width:78%;max-width:320px;background:#fff;z-index:10004;transform:translateX(100%);transition:transform .25s;padding:20px 18px 16px;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.12)}
.sd-drawer.show{transform:none}
.sd-drawer h3{font-size:16px;font-weight:700;color:#1a1a1a;margin:0 0 14px;padding-right:40px}
.sd-drawer-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;background:#f5f5f5;border-radius:50%;font-size:16px;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.sd-drawer-close:hover{background:#ebebeb}
.sd-divider{border:none;border-top:1px solid #f0f0f0;margin:10px 0}
.sd-menu-item{padding:11px 0;border-bottom:1px solid #f5f5f5;font-size:14px;cursor:pointer;display:flex;gap:10px;align-items:center}
.sd-menu-item:last-of-type{border-bottom:none}
.sd-menu-item .ico{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.sd-menu-item .mi-t{font-size:14px;font-weight:600;line-height:1.3;color:#1a1a1a}
.sd-menu-item .mi-s{font-size:12px;color:#767676;margin-top:2px;line-height:1.3}
.sd-menu-item:active{background:#fafafa}
.sd-drawer-footer{margin-top:20px;padding-top:14px;border-top:1px solid #f0f0f0;font-size:12px;color:#aaa;text-align:center}

/* === sd-pay Web Component (2026-08-11) === */
.sd-pay-panel{position:fixed;inset:0;z-index:10005;align-items:center;justify-content:center;padding:16px;flex-direction:column;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sd-pay-panel>*{position:relative;z-index:1}
.sd-pay-amount{background:#fff;border-radius:18px;padding:18px 20px;width:100%;max-width:380px;box-sizing:border-box}
.sd-pay-body{background:#fff;border-radius:18px;padding:18px 20px;width:100%;max-width:380px;margin-top:10px;box-sizing:border-box}
.sd-pay-qr{background:#fff;border-radius:18px;padding:14px 20px;width:100%;max-width:380px;margin-top:10px;box-sizing:border-box}
.sd-pay-status{width:100%;max-width:380px;margin-bottom:6px}
.sd-pw-btn{flex:1;padding:12px 6px;border:2px solid #ddd;border-radius:12px;background:#fff;color:#333;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.sd-pw-btn.active.sd-pw-btn--ali{border-color:#1677ff;background:#f0f7ff}
.sd-pw-btn.active.sd-pw-btn--wx{border-color:#07c160;background:#f0fdf4}
.sd-pw-sub{font-size:12px;font-weight:400;opacity:.7;display:block;margin-top:2px}
.sd-pay-do{display:block;width:100%;padding:14px 0;border:none;border-radius:12px;background:#1677ff;color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(22,119,255,.3);transition:opacity .2s}
.sd-pay-ghost{background:none;border:none;color:#999;font-size:12px;cursor:pointer;text-decoration:underline;padding:4px 0}

/* ===== 搜优惠板块共享视图样式 =====
   供 SPA 首页 #spaSearch 搜优惠 tab 使用。
   2026-08-13 清理：仅保留活样式——平台下拉 .pf-*（search-view.js 模板）；
   .product-card/.compare-card/.share-box/.error-box 供 classic 链路
   （price-history.js 历史价弹窗 / member.js / identity.js / search.js）复用。
   输入条/热词/结果列表已抽为共享组件（<sd-inputbar>/<sd-hotwords>/<sd-prod-list>，Shadow DOM 自带样式），
   本文件不再包含其样式；旧 .quick-tags/.local-cats/.qt-head/.search-header/.platform-bar/.chat/.redpacket-section 均为死代码已删。
*/

/* 平台选择 pill（2026-08-13 紧凑化：与 sd-hotwords 视觉层级更清晰，整体高度从 ~52px → ~38px）
   红色品牌态，明确"这是可点的筛选按钮" */
.pf-row { display: flex; align-items: center; padding: 6px 12px 2px; flex-shrink: 0; }
.pf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1.5px solid #ffd9cf; background: #fff; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fa2c19; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pf-pill:active { transform: scale(.97); }

/* 2026-08-13：搜优惠输入区统一壳（与省钱管家 sd-chat 宿主一致：#f5f6fa 灰底，白输入条浮在上面对比清晰）
   去 border-top（sd-inputbar 组件自带 border-top）；inputbar 直接挂本容器下（与 sd-chat shadow 同构） */
/* 2026-08-13：搜优惠输入区统一壳（与省钱管家 sd-chat 宿主一致：#f5f6fa 灰底，白输入条浮在上面对比清晰）
   去 border-top（sd-inputbar 组件自带 border-top）；inputbar 直接挂本容器下（与 sd-chat shadow 同构）
   2026-08-13 13:39 多重撑满兜底：Web Component 在 flex column 父容器中默认 width:auto+内容驱动，单纯 width:100% 不够稳。
   align-items:stretch 兜底宿主、min-width:100% 兜底 inputbar（双保险不被压缩） */
#searchInputMount { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; background: #f5f6fa; width: 100%; position: relative; }
/* 🎁 2026-08-13 13:21/13:39 多保险：min-width:100% 比 width:100% 更稳（防 Web Component 被默认 min-width:auto 压缩到内容宽）；
   !important 压过任何运行时覆盖（如组件 :host width 失效）。 */
#searchInputMount sd-inputbar { min-width: 100% !important; width: 100% !important; display: flex !important; box-sizing: border-box; flex-shrink: 0; }

/* 平台下拉面板（2026-08-13 v2：fixed 居中 + 跟随手机壳宽度）
   桌面：max-width:380px 匹配 sd-app 手机壳内容宽（390px），panel 居中在手机壳内而非横跨整个灰色背景区
   手机：calc(100vw - 32px) ≈ 屏幕宽 - 32px */
.pf-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; z-index: 9998; }
.pf-overlay.show { display: block; }
.pf-wrap { position: static; height: 0; }
.pf-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 8px)); width: calc(100vw - 32px); max-width: 380px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 14px; padding: 12px 14px 14px; box-shadow: 0 12px 36px rgba(0,0,0,.22); opacity: 0; transition: transform .18s ease, opacity .18s ease; max-height: calc(100vh - 80px); overflow-y: auto; pointer-events: none; -webkit-overflow-scrolling: touch; }
.pf-panel.show { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.pf-panel .pf-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
.pf-panel .pf-head span { font-size: 15px; font-weight: 600; color: #333; }
.pf-panel .pf-head .pf-close { background: none; border: none; font-size: 20px; color: #999; padding: 4px; cursor: pointer; }
.pf-panel .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow-y: auto; padding-bottom: 4px; }
.pf-opt { text-align: center; padding: 11px 0; border: 1.5px solid #f0f0f0; background: #fafafa; border-radius: 12px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; }
.pf-opt.on { background: #fff4ec; border-color: #ff6b35; color: #ff6b35; }

/* === classic 链路复用（price-history.js 历史价弹窗 / member.js / identity.js / search.js）=== */
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}
.product-card:active{box-shadow:var(--shadow-md)}
.product-card .rank{display:inline-block;background:var(--primary);color:#fff;width:22px;height:22px;line-height:22px;text-align:center;border-radius:6px;font-size:var(--fs-xs,12px);margin-bottom:8px}
.product-card .p-main{display:flex;gap:10px}
.product-card img{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#f0f0f0}
.product-card .p-info{flex:1;min-width:0}
.product-card .p-title{font-size:var(--fs-sm,13px);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .p-price{display:flex;align-items:baseline;gap:6px}
.product-card .now{color:var(--primary);font-size:var(--fs-lg,18px);font-weight:700}
.product-card .now small{font-size:var(--fs-xs,12px);font-weight:400}
.product-card .was{color:var(--text-2);font-size:var(--fs-xs,12px);text-decoration:line-through}
.product-card .save{color:var(--success);font-size:var(--fs-xs,12px)}
.product-card .tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.product-card .hist{margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-2xs,11px);color:#ff6a00}
.product-card .hist-low{font-weight:600}
.product-card .hist-tip{color:#767676}
.product-card .tag{background:var(--primary-light);color:var(--primary);font-size:var(--fs-xs,12px);padding:2px 6px;border-radius:4px}
.product-card .commission{font-size:var(--fs-2xs,11px);color:#ff9800;margin-top:6px}
.product-card .sales{font-size:var(--fs-2xs,11px);color:var(--text-2);margin-top:2px}
.product-card .actions{display:flex;gap:8px;margin-top:10px}
.product-card .btn{flex:1;text-align:center;padding:7px 0;border-radius:8px;font-size:var(--fs-sm,13px);font-weight:500;cursor:pointer;border:none}
.btn-copy-link{background:var(--primary-light);color:var(--primary)}
.btn-copy-text{background:var(--primary);color:#fff}
.product-card .btn:active{opacity:.85;transform:scale(.97)}
.product-card .btn:disabled{opacity:.5;pointer-events:none}

.compare-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;white-space:pre-wrap;font-size:var(--fs-sm,13px);line-height:1.7}
.share-box{background:#fffbe6;border:1px solid #ffe58f;border-radius:12px;padding:12px;margin-top:10px}
.share-box .label{font-size:var(--fs-xs,12px);color:#ad8b00;font-weight:600;margin-bottom:6px}
.share-box .content{font-size:var(--fs-sm,13px);line-height:1.6;white-space:pre-wrap}
.share-box .btn-copy-share{margin-top:8px;width:100%;background:#faad14;color:#fff;border:none;padding:8px 0;border-radius:8px;font-size:var(--fs-sm,13px);cursor:pointer}
.error-box{background:#f5f7fa;border:1px solid #e5e7eb;border-radius:12px;padding:12px;color:#666;font-size:var(--fs-sm,13px);line-height:1.6}

/* === 2026-08-13 剩余打磨：搜索历史提示 + 相关推荐（SPA 搜优惠 tab）===
   13:34 最近搜索改浮层：absolute 定位在输入条上方，不占文档流——输入条永远贴底 52px，
   与省钱管家（快捷卡 + 输入条）装配位置/底部框大小完全一致 */
.hist-wrap{position:absolute;left:0;right:0;bottom:52px;z-index:50;padding:8px 14px 10px;background:#fff;border-top:1px solid #f0f0f0;border-radius:12px 12px 0 0;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
.hist-t{font-size:var(--fs-2xs,11px);color:#999;margin-bottom:5px}
.hist-c{display:flex;flex-wrap:wrap;gap:6px}
.hist-chip{background:#f5f6fa;border:1px solid #eee;border-radius:14px;padding:4px 10px;font-size:var(--fs-xs,12px);color:#444;cursor:pointer;font-family:inherit}
.hist-chip:active{transform:scale(.96);background:#fff4ec;border-color:#ffd9cf}
.hist-clear{background:none;border:none;font-size:var(--fs-2xs,11px);color:#bbb;margin-top:6px;padding:2px 0;cursor:pointer;font-family:inherit}

/* 相关推荐（结果区顶部，搜了 X 还想看） */
.reco{padding:8px 2px 2px}
.reco .reco-t{font-size:var(--fs-2xs,11px);color:#999;margin-bottom:5px}
.reco .reco-c{display:flex;flex-wrap:wrap;gap:6px}
.reco-chip{background:#fff4ec;border:1px solid #ffd9cf;border-radius:14px;padding:4px 10px;font-size:var(--fs-xs,12px);color:#fa2c19;cursor:pointer;font-family:inherit}
.reco-chip:active{transform:scale(.96);background:#ffe9df}

/* 🎁 2026-08-15 营销平移：相似推荐商品卡 + 分享文案（原 list-view.js 能力，SPA 搜优惠补齐） */
.spa-sim{margin-top:14px;border-top:1px dashed #eee;padding-top:10px}
.spa-sim-head{font-size:var(--fs-sm,13px);font-weight:600;color:#333;margin-bottom:8px}
.spa-sim-cards{display:block;margin:0 -4px}
.spa-sim-cards sd-prod-card{margin-bottom:8px}
.spa-share-btn{display:block;width:100%;margin-top:10px;padding:10px;border:1.5px solid #fa2c19;background:#fff;color:#fa2c19;border-radius:12px;font-size:var(--fs-sm,13px);font-weight:600;cursor:pointer;font-family:inherit}
.spa-share-btn:active{background:#fff1ec;transform:scale(.98)}

/* ===== index-page.css：从 index.html 迁移的页面级样式 ===== */

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 会员胶囊已由 <sd-header> 组件内部渲染，无页级样式依赖 */

/* 优惠券频道底部弹层 */
.rp-modal { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; justify-content: flex-end; }
.rp-modal.show { display: flex; }
.rp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.rp-modal-sheet { position: relative; background: #fff7e6; border-radius: 20px 20px 0 0; max-height: 94vh; display: flex; flex-direction: column; animation: rpSlideUp 0.25s ease; }
@keyframes rpSlideUp { from { transform: translateY(100%); } to { transform: none; } }
.rp-modal-header { padding: 18px 16px 14px; border-bottom: 1px solid #ffe7ba; display: flex; justify-content: space-between; align-items: flex-start; background: linear-gradient(135deg,#fff7e6,#fff1e0); border-radius: 20px 20px 0 0; }
.rp-modal-title { font-size: 17px; font-weight: 800; color: #d46b08; }
.rp-modal-subtitle { font-size: 12px; color: #767676; margin-top: 4px; }
.rp-modal-close { width: 44px; height: 44px; border: none; background: rgba(0,0,0,0.06); border-radius: 50%; font-size: 18px; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-modal-body { flex: 1; overflow-y: auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.rp-channel { margin-bottom: 18px; }
.rp-channel-name { font-size: 15px; font-weight: 700; color: #ad4e00; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.rp-card { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); align-items: stretch; }
.rp-card img { width: 90px; height: 90px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f5f5f5; }
.rp-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rp-card-title { font-size: 14px; line-height: 1.45; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.rp-card-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.rp-card-now { font-size: 20px; font-weight: 800; color: #fa2c19; }
.rp-card-was { font-size: 12px; color: #767676; text-decoration: line-through; }
.rp-card-coupon { font-size:12px; background: #fff0f0; color: #fa2c19; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.rp-card-btn { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.rp-card-btn button { background: linear-gradient(135deg,#ff5a3c,#fa2c19); color: #fff; border: none; border-radius: 22px; padding: 11px 16px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(250,44,25,.22); min-width: 84px; }
.rp-empty { text-align: center; padding: 40px 20px; }
.rp-empty-ico { font-size: 48px; margin-bottom: 10px; }
.rp-empty-title { font-size: 16px; font-weight: 700; color: #d46b08; margin-bottom: 6px; }
.rp-empty-tip { font-size: 13px; color: #999; }
.rp-reload { margin-top: 14px; background: #fa2c19; color: #fff; border: none; padding: 10px 22px; border-radius: 20px; font-size: 14px; cursor: pointer; }
.rp-tip { text-align: center; padding: 14px 10px; color: #767676; font-size:12px; line-height: 1.6; }

.env-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #d46b08; color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 12px; z-index: 999;
}

/* ===== 公告条 ===== */
.announce-bar { border-radius: 0; margin: 0; }
#announceBar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; cursor: default; transition: all .3s ease; }
.ab-text { flex: 1; }
.ab-link { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size:12px; text-decoration: none; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.ab-close { background: none; border: none; font-size: 18px; cursor: pointer; padding: 0 4px; opacity: 0.6; }
.ab-close:hover { opacity: 1; }

/* ===== 邀请横幅 ===== */
#inviteBanner { display: none; }

/* ===== 状态栏 ===== */
.status-bar { display: none; }
#statusBar { display: none; }

/* ===== 优惠列表视图 ===== */
.lv-header { position: sticky; top: 0; background: var(--primary); color: #fff; padding: 14px 16px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; z-index: 2; }
.lv-title { flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-close { background: rgba(255,255,255,.22); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.lv-sub { background: #fff; padding: 8px 16px; font-size: 13px; color: #888; border-bottom: 1px solid var(--border); }
.lv-sort { display: flex; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 51px; z-index: 1; }
.lv-chip { padding: 5px 12px; border-radius: 14px; background: #f3f3f3; font-size: 13px; color: #666; cursor: pointer; }
.lv-chip.active { background: var(--primary); color: #fff; }
.lv-list { padding: 8px 12px; }
.lv-item { background: #fff; border-radius: 10px; padding: 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: stretch; }
.lv-img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f0f0f0; align-self: center; }
.lv-info { flex: 1; min-width: 0; }
.lv-name { font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-price { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lv-now { color: var(--primary); font-size: 18px; font-weight: 700; }
.lv-was { color: var(--text-2); font-size: 12px; text-decoration: line-through; }
.lv-save { color: #ff6a00; font-size: 12px; }
.lv-save-badge { background: #e8f8e8; color: #07c160; font-size:12px; padding: 1px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.lv-hot-badge { background: #fff0e8; color: #fa2c19; font-size:12px; padding: 1px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.lv-social { font-size:12px; color: #bbb; margin-top: 4px; }
.lv-meta { font-size:12px; color: #999; margin-top: 4px; line-height: 1.5; }
.lv-tag { display: inline-block; background: var(--primary-light); color: var(--primary); font-size:12px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.lv-low { display: inline-block; background: #fff0e8; color: var(--primary); font-size:12px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.lv-hist { display: inline-flex; align-items: center; gap: 3px; background: #f6ffed; color: #52c41a; font-size:12px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; cursor: pointer; border: 1px solid #d9f7be; }
.lv-hist-low { background: #fff0e8; color: var(--primary); border-color: #ffcc99; }
.lv-hist-new { display: inline-block; background: #f0f5ff; color: #2f54eb; font-size:12px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
/* 历史价弹窗 */
.hist-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hist-card { background: #fff; border-radius: 14px; width: 100%; max-width: 340px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.hist-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 600; color: #333; }
.hist-close { background: none; border: none; font-size: 18px; color: #999; cursor: pointer; padding: 0 4px; }
.hist-body { padding: 16px; }
.hist-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.hist-cur { font-size: 26px; font-weight: 700; color: var(--primary); }
.hist-trend { font-size: 12px; }
.hist-stats { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: #666; margin-top: 10px; }
.hist-note { font-size:12px; color: #bbb; margin-top: 10px; line-height: 1.5; }
.lv-act { display: flex; align-items: center; flex: none; }
.lv-btn { background: var(--primary); color: #fff; border: none; border-radius: 18px; padding: 8px 14px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.lv-btn.lv-ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.lv-share { position: sticky; bottom: 0; background: #fff; padding: 12px; border-top: 1px solid var(--border); z-index: 5; }
.lv-share button { width: 100%; background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); border-radius: 20px; padding: 10px; font-size: 13px; cursor: pointer; }
.lv-footer { font-size:12px; color: #888; padding: 16px; text-align: center; line-height: 1.6; }
.lv-similar { margin: 12px; margin-bottom: 10px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); border-left: 3px solid var(--primary); }
.lv-sim-head { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 10px; }
.lv-sim-list { display: flex; flex-direction: column; gap: 10px; }
.lv-ver { color: #fa541c; font-weight: 600; }
.lv-more { text-align: center; padding: 12px 0 4px; }
.lv-more .lv-btn { min-width: 160px; }
.lv-empty { text-align: center; padding: 46px 20px 20px; }
.lv-empty-ico { font-size: 44px; margin-bottom: 10px; }
.lv-empty-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 8px; }
.lv-empty-tip { font-size: 13px; color: #999; margin-bottom: 20px; }
.lv-cross { display: flex; flex-direction: column; gap: 10px; max-width: 280px; margin: 0 auto; }
.lv-cross-btn { display: block; padding: 12px 16px; border: 1px solid var(--border); background: #fff; border-radius: 12px; font-size: 14px; color: #333; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.lv-cross-btn:active { background: #f7f8fa; }

/* TabBar 底边距补偿 */
body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

/* ===== Toast ===== */
.toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 10001; padding: 10px 22px; border-radius: 20px; font-size: 14px; color: #fff; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.toast.show { opacity: 1; }

/* ===== 注册/登录弹窗 ===== */
.reg-modal { position: fixed; inset: 0; z-index: 10003; display: none; align-items: center; justify-content: center; padding: 16px; }
.reg-modal.show { display: flex; }
.reg-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.reg-modal-sheet { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 400px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.12); overflow: hidden; animation: regZoom .22s ease; }
@keyframes regZoom { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reg-modal-headrow { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 18px 0; flex-shrink: 0; }
.reg-modal-title { font-size: 18px; font-weight: 800; color: #1a1a1a; letter-spacing: .4px; }
.reg-modal-subtitle { font-size: 12px; color: #888; margin-top: 3px; line-height: 1.4; }
.reg-modal-close { width: 44px; height: 44px; border: none; background: #f5f5f5; border-radius: 50%; color: #555; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.reg-modal-close:hover { background: #ebebeb; }
.reg-modal-body { padding: 12px 18px 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.reg-tabs { display: flex; gap: 4px; background: #f5f5f5; border-radius: 10px; padding: 3px; margin: 12px 18px 0; }
.reg-tab { flex: 1; padding: 8px 0; border: none; border-radius: 7px; background: transparent; color: #666; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.reg-tab.active { background: #fff; color: #fa2c19; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.reg-tip { font-size: 12px; color: #666; line-height: 1.55; margin: 12px 0 10px; padding: 8px 12px; background: #fff8f6; border-radius: 8px; border-left: 3px solid #fa2c19; }
.reg-field { margin-bottom: 10px; }
.reg-field label { display: block; font-size: 12px; color: #333; margin-bottom: 5px; font-weight: 600; }
.reg-field input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #d9d9d9; border-radius: 10px; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; background: #fff; }
.reg-field input:focus { border-color: #fa2c19; box-shadow: 0 0 0 2px rgba(250,44,25,.1); }
.reg-field input.err { border-color: #fa541c; background: #fff7f6; }
.reg-field-err { font-size:12px; color: #fa541c; margin-top: 3px; min-height: 15px; line-height: 1.4; }
.reg-field-row { display: flex; gap: 8px; align-items: stretch; }
.reg-field-row input { flex: 1; }
.reg-send-btn { padding: 0 12px; border: 1px solid #fa2c19; background: #fff; color: #fa2c19; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.reg-send-btn:active { background: #fa2c19; color: #fff; }
.reg-send-btn:disabled { border-color: #ccc; color: #999; cursor: not-allowed; background: #fafafa; }
.reg-actions { display: flex; gap: 8px; margin-top: 14px; }
.reg-btn { flex: 1; padding: 11px 0; border-radius: 10px; border: none; font-size: 15px; cursor: pointer; font-weight: 700; transition: background .15s, opacity .15s; }
.reg-btn.primary { background: linear-gradient(135deg,#ff5a3c,#fa2c19); color: #fff; box-shadow: 0 2px 8px rgba(250,44,25,.25); }
.reg-btn.primary:active { opacity: .92; }
.reg-btn.primary.loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.reg-btn.ghost { background: #f5f5f5; color: #555; }
.reg-btn.ghost:active { background: #ebebeb; }
.reg-protocol { font-size:12px; color: #888; text-align: center; margin-top: 12px; line-height: 1.6; }
.reg-protocol a { color: #fa2c19; text-decoration: none; }
.reg-protocol a:hover { text-decoration: underline; }
.reg-wechat-row { margin-bottom: 4px; }
.reg-wechat-btn { width: 100%; padding: 12px 0; border: 1px solid #07c160; background: #fff; color: #07c160; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s; }
.reg-wechat-btn:active { background: #eafaf1; }
.reg-wechat-btn .wx-ico { font-size: 17px; }
.reg-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: #bbb; font-size: 12px; }
.reg-divider::before, .reg-divider::after { content: ''; flex: 1; height: 1px; background: #ececec; }

/* 首页 AI 对话样式已外置到 /css/ai-chat.css */