/* 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}