:root {
  /* v297 近黑·微绿底：底子回到接近纯黑（比黑多一层苔绿色相与渐变），
     彩色（品牌绿/奶油 logo/白字）做主角——黑得有层次，而不是全站刷绿 */
  --bw: 1px;
  --bg: #0a0d0b;
  --card: #141816;
  --card2: #191f1c;
  --bar-bg: #101412;
  --img-bg: #1f2622;
  --text: #e8e6e3;
  --text2: #9aa39d;
  --text3: #828d86;
  --text-soft: #c9c7c2;
  --gold: var(--brand);
  --gold2: #52e89e;
  --gold-dark: var(--brand-dark);
  --brand: var(--brand);
  --brand-hi: var(--brand-hi);
  --brand-dark: var(--brand-dark);
  --brand-rgb: 46,214,138;
  --gold-bg: #16281f;
  --gold-line: #2a4d3a;
  --gold-card: #12291e;
  --on-gold: #07301d;
  --line: #2a322e;
  --danger: #ff5c5c;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --topbar-h: 148px;
  --layui-color-primary: var(--brand);
  --layui-color-primary-light: rgba(var(--brand-rgb),.15);
  --layui-color-primary-dark: var(--brand-dark);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
/* overflow-x:clip 才不创建滚动容器——hidden 会击穿后代全部 position:sticky
   （顶栏/类目条/板块条曾因此全部钉不住）；clip 不支持的老内核回退 hidden（维持原状） */
html, body { overflow-x: hidden; overflow-x: clip; }
/* iPad Safari webapp：显式声明 window 级滚动（惯用 touch 滚动），确保 Safari 把滚动识别为
   「用户滚动」→ 工具栏正常弹复（pdd 页滚动后工具不复现的修复方向；clip 保留为 sticky 服务） */
body { -webkit-overflow-scrolling: touch; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #0d110f; color: var(--text); }
/* 安卓统一字体：OEM 中文字体（MiSans/鸿蒙黑体等）比苹方笔画粗、字面大，观感"字大框厚"。
   Android UA 时注入 Noto Sans SC（思源黑体）webfont（unicode-range 切片按需加载，典型页面 100-200KB），
   iOS/Windows 不注入不下载，观感维持原样。font css 由页面内联脚本按 UA 注入 */
html.android body { font-family: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
/* 表单控件不默认继承字体，安卓下按钮会退回系统字造成混排 */
button, input, select, textarea { font-family: inherit; }
/* 页宽两侧留白的品牌氛围光：莫兰迪灰绿雾（顶部 sage 光斑 + 右下奶油余晖）——提亮到
   「呼吸感可见」档（9-12%），不再 4.5% 的隐形死黑 */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 6% -8%, rgba(114,154,147,.12), transparent 62%),
    radial-gradient(1100px 700px at 102% 108%, rgba(114,154,147,.09), transparent 65%); }
a { text-decoration: none; color: inherit; }
img { -webkit-user-select: none; max-width: 100%; opacity: 0; transition: opacity .18s ease; }
img.img-in { opacity: 1; }
/* 静默换内容：列表已有内容时重绘免图片淡入（全体重走 opacity 0→1 的淡入波＝「整页刷新」观感） */
.no-img-fade img { opacity: 1 !important; transition: none !important; }

/* 内容区：近黑渐变 + 微弱苔绿光晕——底子比纯黑多一分空气，彩色（绿/奶油）作主角 */
.app { max-width: 520px; margin: 0 auto;
  background:
    radial-gradient(760px 560px at 8% -6%, rgba(114,154,147,.10), transparent 62%),
    radial-gradient(900px 640px at 96% 104%, rgba(114,154,147,.06), transparent 65%),
    linear-gradient(180deg, #101412 0%, #0c100e 60%, #0a0d0b 100%);
  min-height: 100dvh; min-height: 100vh; position: relative; }

.topbar { position: sticky; top: 0; z-index: 30;
  background:
    radial-gradient(640px 420px at 12% 0%, rgba(114,154,147,.14), transparent 70%),
    linear-gradient(180deg, #121715 0%, #101412 100%);
  padding: calc(14px + env(safe-area-inset-top) + var(--pwa-extra, 0px)) 14px 0; }
/* 顶部 logo 区柔和光晕（不抢戏，只衬出奶油 logo） */
.topbar .logo img { filter: drop-shadow(0 0 16px rgba(114,154,147,.22)); }
/* PWA 全屏模式（iOS 添加到主屏幕）下顶栏避开灵动岛/状态栏；
   --topbar-h 是 catbar/boardbar 的 sticky 基准，须同步加安全区 */
:root { --pwa-top: env(safe-area-inset-top, 0px); --topbar-h: calc(148px + var(--pwa-top)); }
/* iOS standalone 下 env(safe-area-inset-top) 返回不足值（灵动岛机型缺 20~30px）。
   补偿必须【只给 iOS】：-webkit-touch-callout 是 WebKit 独有属性，安卓 Chrome
   不支持 → @supports 探测天然区分平台。此前裸用 display-mode: standalone
   会误伤安卓 PWA（同样 standalone）导致安卓顶部虚胖 32px */
@media all and (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    :root { --pwa-extra: 32px; --topbar-h: calc(148px + var(--pwa-top) + 32px); }

  }
}
/* 顶栏首行 = logo + 搜索框 同行：搜索框 flex:1 拿满剩余空间；tab 导航保持独立行 */
.brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.searchbar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0; position: relative; }
.sugg-box { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius-lg); z-index: 50; max-height: 280px; overflow-y: auto; box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
/* 热词/历史面板为浮层（锚定 .searchbar，盖在 nav/内容之上）：不占布局——
   打开、打字换联想词、收起都不推挤下方内容；此前在文档流里随打字移除导致页面跳动 */
#searchHistory { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.sugg-item { padding: 11px 14px; font-size: 14px; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.sugg-item.on, .sugg-item:active { background: var(--card2); color: var(--text); }
.sugg-src { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-left: 12px; }
.hl { color: var(--gold); font-style: normal; font-weight: 600; }
.searchbar input { flex: 1; background: var(--card2); border: var(--bw) solid var(--line); color: var(--text); border-radius: var(--radius-md); padding: 7px 12px; font-size: 13px; outline: none; font-family: inherit; min-width: 0; -webkit-appearance: none; appearance: none; }
.searchbar input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--card2) inset; -webkit-text-fill-color: #e8e6e3; caret-color: #e8e6e3; }
.searchbar input:focus { border-color: var(--gold); }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar button, .cmt-form button, .buybar .buy-btn { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--on-gold); border: 0; border-radius: 8px; font-weight: 600; }
.searchbar button { flex-shrink: 0; padding: 7px 13px; font-size: 13px; }
.cmt-form button { width: 100%; padding: 9px 0; font-size: 14px; }
.searchbar button:active, .cmt-form button:active, .buybar .buy-btn:active { transform: scale(.96); }
.search-clear { flex-shrink: 0; color: var(--text3); font-size: 15px; padding: 8px 4px; cursor: pointer; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.search-clear:active { color: var(--gold); }
.logo { display: flex; align-items: center; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; }
/* 页首 logo 豁免全局 img 懒加载淡入（opacity:0→img-in 是刷新闪烁根因）；
   aspect-ratio 预留宽度，冷缓存加载期不回流 */
/* 页首 logo 豁免全局 img 懒加载淡入（opacity:0→img-in 是刷新闪烁根因）；
   aspect-ratio 预留宽度，冷缓存加载期不回流。同行布局下高度降档给小屏让位 */
.logo img { height: clamp(36px, 9vw, 48px); width: auto; display: block; border-radius: 5px; aspect-ratio: 660 / 179; opacity: 1; transition: none; }
.logo-img { width: 36px; height: 36px; margin-right: 10px; display: block; flex-shrink: 0; }
.logo span { color: var(--gold); margin-left: 2px; text-shadow: 0 0 16px rgba(var(--brand-rgb),.35); }
.logo-text { display: block; white-space: nowrap; }
.logo .sub { display: block; font-style: normal; font-size: 11px; color: var(--text2); font-weight: 400; letter-spacing: 3px; margin-top: 3px; }
/* 添加到桌面（底部唤醒胶囊）：低频一次性引导从顶部黄金位移到底部左下——不挤主动线 */
.addhome { position: fixed; left: 14px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 35; font-size: 11.5px; color: var(--gold); border: var(--bw) solid rgba(var(--brand-rgb),.4); border-radius: 16px; padding: 7px 13px; background: rgba(19,19,22,.88); backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.addhome:active { background: rgba(var(--brand-rgb),.18); transform: scale(.97); }
.addhome:hover { border-color: var(--gold); }
/* 分段式胶囊导航（立体静态 + 滑块）：轨道槽内阴影=凹槽；激活胶囊是独立滑块，
   切换时 transform 平滑滑到新 tab（渐变背景无法过渡，分体滑块才丝滑）。
   文字 z-1 浮在滑块上，滑块 pointer-events:none 不挡点击 */
.nav { display: flex; gap: 2px; background: var(--card2); border: var(--bw) solid var(--line); border-radius: 12px; padding: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; box-shadow: inset 0 2px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.04); position: relative; }
.tab { flex: 1 1 0; min-width: max-content; text-align: center; color: var(--text2); font-size: 13px; font-weight: 500; padding: 7px 2px; border-radius: 9px; white-space: nowrap; transition: color .2s; position: relative; z-index: 1; cursor: pointer; }
.tab.active { color: var(--on-gold); font-weight: 600; }
.tab-pill { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: linear-gradient(180deg, var(--brand-hi), var(--gold-dark)); box-shadow: 0 2px 8px rgba(var(--brand-rgb),.4), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .2s cubic-bezier(.22,.8,.24,1), width .2s cubic-bezier(.22,.8,.24,1); pointer-events: none; z-index: 0; }
.nav::-webkit-scrollbar { display: none; }

/* 省钱横幅（v2 本页账单入口）：左＝件数+单件最高，右＝合计大数字+看账单；点击开本页省钱账单抽屉。
   背景：sage→cream 莫兰迪斜渐变（浅色只做底/徽标/氛围的铁律）——旧 gold-card 暗底在暗主题下不够亮眼 */
.savebanner { margin: 10px 10px 0; background: linear-gradient(135deg, rgba(114,154,147,.32), rgba(251,254,229,.12)); border: var(--bw) solid rgba(114,154,147,.65); border-radius: var(--radius-md); padding: 9px 14px; display: flex; align-items: center; gap: 10px; height: 54px; box-sizing: border-box; overflow: hidden; visibility: hidden; margin-top: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transition: max-height .5s cubic-bezier(.22,.61,.36,1), padding .5s cubic-bezier(.22,.61,.36,1), margin-top .5s cubic-bezier(.22,.61,.36,1), border-width .5s cubic-bezier(.22,.61,.36,1); cursor: pointer; box-shadow: inset 0 0 18px rgba(114,154,147,.12); }
.savebanner.show { visibility: visible; max-height: 54px; padding-top: 9px; padding-bottom: 9px; border-width: 1px; margin-top: 10px; }
.savebanner:active { transform: scale(.99); }
.savebanner .sb-icon { font-size: 16px; color: var(--brand-hi); font-weight: 700; line-height: 1; flex-shrink: 0; }
.savebanner .sb-main { flex: 1; min-width: 0; font-size: 12px; color: var(--text2); line-height: 1.4; }
.savebanner .sb-main b { color: var(--text); font-weight: 700; }
.savebanner .sb-main em { display: block; font-style: normal; font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savebanner .sb-total { flex-shrink: 0; text-align: right; }
.savebanner .sb-total b { display: block; color: var(--brand-hi); font-size: 17px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.savebanner .sb-total i { font-style: normal; font-size: 10px; color: var(--text2); }
/* 本页省钱账单抽屉：顶部紧凑一行式说明（无大数字大留白），面板微渐变收边 */
.save-bill-sheet { background: var(--card2); border-top: var(--bw) solid rgba(114,154,147,.5); }
.save-bill-sheet .save-bill-head { padding: 10px 16px 4px; }
.save-bill-sheet .save-bill-head span { color: var(--gold); }
/* 说明语单行：件数+合计+单件最高，nowrap 确保手机端不折成多行（行首错位观感），超宽省略兜底 */
.save-bill-cap { padding: 0 16px 10px; font-size: 12px; color: var(--text2); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-bill-cap b { color: var(--gold); font-weight: 700; }
/* 账单行紧凑化：行高/左右留白收窄、分隔线细 */
.save-bill-sheet .save-list { padding: 2px 8px 14px; overflow-y: auto; }
.save-bill-sheet .save-row { padding: 9px 14px; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.05); }
.save-bill-sheet .save-row .t { font-size: 12.5px; }
.save-bill-sheet .save-row .p { font-size: 12.5px; color: var(--gold); }

/* 三条 bar（淘好价分类/板块条、京东分类条）统一「连续工具条」：全宽 bar-bg 不透明、
   零 margin、背靠背接顶栏——卡片式 margin 会把列表图从缝隙透出/尺寸不齐（用户报障）。
   与 brandcats/priceslider 同体系：条=背景连续区，chips 居中，激活绿框保留 */
.catbar { position: sticky; top: var(--topbar-h); z-index: 9; background: var(--bar-bg); display: flex; gap: 6px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: var(--bw) solid var(--line); }
.catbar::-webkit-scrollbar { display: none; }
/* 板块条堆叠在类目条之下（淘好价两 bar 同显）：--catbar-h 由 syncTopbarH 实测驱动，
   类目条不可见时为 0px，板块条直接贴顶栏之下 */
.boardbar { position: sticky; top: calc(var(--topbar-h) + var(--catbar-h, 0px)); z-index: 9; background: var(--bar-bg); display: flex; gap: 6px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: var(--bw) solid var(--line); }
.boardbar::-webkit-scrollbar { display: none; }
/* 京东类目条：与 catbar/boardbar 同构同款连续条；京东分类点选绿框已补（.bcat.on） */
.jdcatbar { position: sticky; top: var(--topbar-h); z-index: 9; background: var(--bar-bg); display: flex; gap: 6px; padding: 4px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: var(--bw) solid var(--line); }
.jdcatbar::-webkit-scrollbar { display: none; }
.jdcatbar .bcat { cursor: pointer; }

.cat, .board, .bcat, .scat { flex-shrink: 0; color: var(--text2); background: var(--card); border-radius: var(--radius-sm); white-space: nowrap; transition: background .15s, color .15s, transform .1s; }
/* 触摸反馈统一补齐：所有可点元素 :active 必有可见响应 */
.cat:active, .cat.pressing, .board:active, .board.pressing, .bcat:active, .bcat.pressing, .scat:active, .scat.pressing { background: var(--card2); color: var(--text-soft); transform: scale(.95); }
.tab:active { opacity: .6; }
.sort:active { color: var(--text-soft); opacity: .7; }
.detail .thumbs img:active { opacity: .6; }
.brandcell:active { transform: scale(.97); }
.rel-card:active { transform: scale(.97); }
.cat, .bcat, .scat, .board { font-size: 12px; padding: 5px 10px; }
.cat.on, .board.active, .bcat.on, .bcat.active, .scat.active { background: rgba(var(--brand-rgb),.18); color: var(--brand-hi); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.5); }

.sortbar { display: flex; gap: 16px; padding: 9px 12px; overflow-x: auto; scrollbar-width: none; background: var(--bar-bg); border-bottom: var(--bw) solid var(--line); }
.sortbar::-webkit-scrollbar { display: none; }
.sort { flex-shrink: 0; font-size: 13px; color: var(--text2); white-space: nowrap; }
.sort.active { color: var(--text); font-weight: 600; }

.list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; align-content: start; } /* 行不拉伸：骨架期 140vh 容器会把少数行均分拉高成巨卡（align-content 默认 stretch 实锤） */
.list.flat { display: block; }
.list.flat .brandcats { margin: -10px -10px 4px; }
.list.flat .brandgrid { padding: 0; }
.list.flat .branditems { padding: 0; }
.card { background: var(--card); border-radius: 12px; overflow: hidden; border: var(--bw) solid var(--line); transition: transform .12s, border-color .12s, box-shadow .12s; display: block; box-shadow: inset 0 1px 0 rgba(251,254,229,.06), 0 2px 4px rgba(0,0,0,.22); }
.card:active { transform: scale(.96); border-color: rgba(var(--brand-rgb),.55); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
/* 卡片图片按压变暗——内容型按压反馈（视觉确认"点到了这块"） */
.thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .08s; pointer-events: none; z-index: 2; }
.card:active .thumb::after, .card.pressing .thumb::after { opacity: 1; }
.card.pressing { transform: scale(.96); border-color: rgba(var(--brand-rgb),.55); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.thumb { position: relative; aspect-ratio: 1 / 1; background: var(--img-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 死图终态：上游 404 的下架商品图，展示克制的"暂无图片"占位而非黑框 */
.thumb.nopic { background: linear-gradient(160deg, #1d1d21, #17171a); }
.thumb.nopic::before { content: ''; position: absolute; left: 50%; top: 42%; width: 44px; height: 36px; transform: translate(-50%, -50%); opacity: .5;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Crect x='2' y='2' width='44' height='36' rx='6' fill='none' stroke='%238f8f96' stroke-width='3'/%3E%3Ccircle cx='15' cy='14' r='4.5' fill='%238f8f96'/%3E%3Cpath d='M6 34 L20 20 L30 30 L36 24 L46 34 Z' fill='%238f8f96'/%3E%3C/svg%3E"); }
.thumb.nopic::after { content: '暂无图片'; position: absolute; left: 0; right: 0; top: 62%; text-align: center; color: var(--text3); font-size: 11px; letter-spacing: 1px; }
.thumb.nopic .save-tag { z-index: 3; }
.save-tag { position: absolute; left: 6px; top: 6px; background: rgba(15,15,17,.82); color: var(--text-soft); font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 4px; }
.save-tag.save-big { background: rgba(114,154,147,.9); color: #12352c; font-weight: 700; }
/* 历史低价角标（F2 延伸）：右上角，与左上省钱角标对称；品牌绿底深字强提示 */
.low-tag { position: absolute; right: 6px; top: 6px; z-index: 3; background: rgba(var(--brand-rgb),.92); color: #07301d; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 4px; }
/* 详情页价格走势（F2 延伸）：卡片容器 + SVG 折线（无图表库依赖） */
.price-chart { margin: 12px 12px 4px; background: var(--card); border: var(--bw) solid var(--line); border-radius: 12px; padding: 12px 14px 8px; }
.price-chart h3 { font-size: 13px; color: var(--text); margin: 0 0 8px; }
.price-chart .pc-days { font-size: 11px; color: var(--text3); font-weight: 400; margin-left: 6px; }
.price-chart .pc-range { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-top: 2px; }
/* 平台徽标（原 layui-badge 自建版） */
.plat-badge { display: inline-block; padding: 0 5px; font-size: 10px; line-height: 15px; background: #ff5722; color: #fff; border-radius: 3px; white-space: nowrap; }
/* 自绘双柄价格滑条（layui 去依赖）：手柄立体质感与 tab 胶囊同语言 */
.range-slider { position: relative; height: 28px; touch-action: none; }
.range-slider .rs-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: #2a2a30; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.range-slider .rs-fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(var(--brand-rgb),.55), var(--brand)); border-radius: 2px; }
.range-slider .rs-handle { position: absolute; top: 50%; width: 16px; height: 16px; border: 2.5px solid var(--brand); background: transparent; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(251,254,229,.28); cursor: grab; box-sizing: border-box; }
.range-slider .rs-handle::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: rgba(251,254,229,.6); }
.range-slider .rs-handle:active { cursor: grabbing; border-color: var(--brand-hi); box-shadow: 0 1px 6px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(251,254,229,.5); transform: translate(-50%, -50%) scale(1.12); }
.info { padding: 8px 10px 10px; }
.title { font-size: 13px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
/* 价格+原价+券 恒一行：nowrap 约束（券不折行）；原价可收缩截断，放不下时让位 */
.pricerow { margin-top: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.pricerow .end { white-space: nowrap; flex-shrink: 0; }
.pricerow .ori { flex-shrink: 1; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pricerow .coupon { flex-shrink: 0; white-space: nowrap; }
.end { color: var(--gold); font-size: 20px; font-weight: 800; }
.end em { font-style: normal; font-size: 12px; }
.ori { color: var(--text3); font-size: 11px; text-decoration: line-through; }
.coupon { color: var(--gold); border: var(--bw) solid var(--gold-line); background: var(--gold-bg); font-size: 11px; padding: 1px 5px; border-radius: var(--radius-sm); }
.meta { margin-top: 5px; font-size: 11px; color: var(--text3); display: flex; justify-content: space-between; align-items: center; }
.list .empty { grid-column: 1 / -1; width: 100%; }
.card .sold { font-size: 10px; color: var(--gold); opacity: .85; }

.skeleton { background: var(--card); border-radius: var(--radius-md); overflow: hidden; border: var(--bw) solid var(--line); opacity: 0; transition: opacity .15s; }
.list.skel-live .skeleton, .brands-list.skel-live .skeleton { opacity: 1; animation: sk-pop .38s ease backwards; }
.list.skel-live .skeleton:nth-child(3n+2) { animation-delay: .06s; }
.list.skel-live .skeleton:nth-child(3n+3) { animation-delay: .12s; }
/* 骨架期 #list 强制明显超屏（140vh、可滚）：Safari 对「近一屏不可滚」页面按 app 渲染
   （无工具栏——pdd 慢加载恰踩中，用户判定为 bug 而非特性）。
   超屏页面被 Safari 正常判定为可滚网页，工具栏常驻；否则任何 tab 骨架期稍长都会触发 */ 
#list:empty, #list:not(:has(.card)):not(:has(.empty)) { min-height: 140vh; }
@keyframes sk-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.skeleton .sk-img { aspect-ratio: 1/1; position: relative; }
.sk-pic-icon { position: absolute; left: 50%; top: 50%; width: 26px; height: 22px; transform: translate(-50%, -50%); border-radius: 4px; background: rgba(var(--brand-rgb),.08); border: var(--bw) solid rgba(var(--brand-rgb),.22); }
.skeleton .sk-line { height: 13px; border-radius: 4px; margin: 8px 10px 0; }
.skeleton .sk-line.w70 { width: 70%; } .skeleton .sk-line.w40 { width: 40%; margin-bottom: 12px; }
.sk-row { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 10px; margin-top: 6px; }
.sk-price { width: 52px; height: 17px; margin: 0; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.18); }
.sk-tag { width: 34px; height: 15px; border-radius: 4px; }
.sk { background: linear-gradient(100deg, var(--sk-a) 32%, var(--sk-b) 48%, var(--sk-c) 58%, var(--sk-a) 72%); background-size: 300% 100%; animation: sk 1.5s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* 骨架色随皮肤：暗皮肤=暗块绿光 shimmer（现状），daylight=奶油米色系暖 shimmer */
:root { --sk-a: #1e1e23; --sk-b: #2e2e36; --sk-c: #24312b; }
/* 入场节奏：缓出保留、时长压到 .35s——慢滑是仪式感，再拖就成了「切换缓慢」 */
@keyframes listin { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.page-in { animation: pageIn .35s cubic-bezier(.22,.61,.36,1); }
.list-anim { animation: listin .35s cubic-bezier(.22,.61,.36,1); }
/* 返回恢复场景禁一切入场动画（防"卡片往上飞"残影） */
.no-anim, .no-anim * { animation: none !important; }
.card-in { animation: listin .35s cubic-bezier(.22,.61,.36,1) both; }

.detail { position: relative; padding: 0 0 108px; } /* 悬浮 buybar（离底10px+高~65px）+余量 */
/* 详情页顶栏：logo 行（继续逛深度回归的入口，回主页零 JS <a>/）——safe-area 顶部由本行承担 */
.detail-top { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px) + var(--pwa-extra, 0px)) 14px 6px;
  margin: 8px 12px 0; border-radius: 16px; }
.detail-top .dt-logo { display: block; flex-shrink: 0; }
.detail-top .dt-search { margin: 0; flex: 1; min-width: 0; }
.detail-top img { height: clamp(40px, 10.5vw, 56px); width: auto; display: block; border-radius: 5px; aspect-ratio: 660 / 179; opacity: 1; transition: none; }
/* 详情页头部：sticky 圆角卡片头（所有皮肤统一形态）——默认皮肤给雾面底兜底 */
.detail-top {
  background: rgba(19,22,20,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.detail-top:active img { opacity: .82; }
@media (min-width: 768px) { .detail-top { max-width: 720px; margin: 8px auto 0; } }
.detail #detailView, #detailView { overflow-y: auto; height: 100dvh; height: 100vh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* PC 返回钮：独立悬浮圆钮（fixed 右上）——原整条 sticky 横幅会在图片上压出一条带（用户报障） */
.detail .hero .close-x { position: absolute; top: 10px; right: 10px; z-index: 10; }
.detail .hero .close-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(18,18,20,.78); border: var(--bw) solid var(--line); color: var(--text); backdrop-filter: blur(6px); cursor: pointer; transition: background .15s, transform .15s; }
.detail .hero .close-x:hover { background: #2f2f34; color: var(--text); }
.detail .hero .close-x:active { transform: scale(.94); }
.topbar .logo { cursor: pointer; }
.detail .hero { overflow: hidden; position: relative; aspect-ratio: 1 / 1; background: var(--img-bg); margin: 12px 12px 0; border-radius: 16px; }
/* 详情死图终态：与列表卡片同一套"暂无图片"占位 */
.detail .hero.nopic { background: linear-gradient(160deg, #1d1d21, #17171a); }
.detail .hero.nopic::before { content: ''; position: absolute; left: 50%; top: 44%; width: 88px; height: 72px; transform: translate(-50%, -50%); opacity: .45;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Crect x='2' y='2' width='44' height='36' rx='6' fill='none' stroke='%238f8f96' stroke-width='3'/%3E%3Ccircle cx='15' cy='14' r='4.5' fill='%238f8f96'/%3E%3Cpath d='M6 34 L20 20 L30 30 L36 24 L46 34 Z' fill='%238f8f96'/%3E%3C/svg%3E"); }
.detail .hero.nopic::after { content: '该商品的图片已失效'; position: absolute; left: 0; right: 0; top: 66%; text-align: center; color: var(--text3); font-size: 12px; letter-spacing: 1px; }
.detail .hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; max-width: 100%; background: var(--img-bg); display: block; will-change: transform; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(15,15,17,.6); border: var(--bw) solid var(--gold-line); color: var(--gold); font-size: 15px; display: flex; align-items: center; justify-content: center; z-index: 5; cursor: pointer; }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }
.hero-arrow:active { transform: translateY(-50%) scale(.96); }
.detail .thumbs { display: flex; gap: 6px; padding: 8px 10px; margin: 10px 12px 0; background: var(--card); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.detail .thumbs img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; flex-shrink: 0; border: 2px solid transparent; background: var(--img-bg); opacity: 0; }
.detail .thumbs.ready img { transition: opacity .22s ease; opacity: 1; }
.detail .thumbs img.on { border-color: var(--gold); }
.detail .body { background: var(--card); padding: 14px; margin-top: 8px; }
.detail .title { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--text); }
.detail .prices { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.detail .prices .end { color: var(--gold); font-size: 34px; font-weight: 800; } /* 34px：数字字面高度与右侧胶囊齐平 */
.detail .prices .end em { font-style: normal; font-size: 17px; }
.detail .prices .ori { color: var(--text3); font-size: 14px; text-decoration: line-through; }
.detail .savebig { display: inline-block; color: var(--text-soft); font-size: 14px; font-weight: 600; margin-top: 2px; }
.detail .tag.coupontip { color: var(--gold); background: var(--gold-bg); border-color: var(--gold-line); } /* 券 chip：胶囊行首，金调区分普通胶囊 */
.detail .tags { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.detail .tags::-webkit-scrollbar { display: none; }
.detail .tag { flex-shrink: 0; white-space: nowrap; }
.detail .tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--card2); color: var(--text2); }
.detail .tag.shop-link { color: var(--text-soft); border: var(--bw) solid var(--line); display: inline-flex; align-items: center; gap: 2px; }
.detail .tag.shop-link:active { background: var(--card2); }
.vote { display: flex; gap: 10px; margin-bottom: 12px; }
.vote-btn { flex: 1; text-align: center; font-size: 14px; padding: 8px 0; border-radius: 8px; border: var(--bw) solid var(--line); background: var(--card2); color: var(--text2); }
.vote-btn em { font-style: normal; font-weight: 600; }
.vote-btn.vv.on { background: #16261a; color: #7fd08a; border-color: #2c5a38; }
.vote-btn.nv.on { background: #2a1512; color: #ff7a6e; border-color: #5a2c24; }
.vote-btn:active { transform: scale(.96); }
.detail .guide { margin-top: 6px; }
.detail .guide h3 { font-size: 14px; color: var(--gold); margin-bottom: 8px; }
.detail .guide .guide-box { background: var(--gold-card); border: 1px dashed var(--gold-line); border-radius: var(--radius-sm); padding: 10px; font-size: 14px; line-height: 1.7; color: var(--text-soft); word-break: break-all; overflow-wrap: break-word; max-width: none; } /* 豁免 688 行弹层 340px 限宽——正文推荐理由占满内容区 */
.detail .desc { font-size: 13px; color: var(--text2); line-height: 1.7; margin-top: 12px; word-break: break-all; overflow-wrap: break-word; }
.detail .related { position: relative; margin-top: 8px; background: var(--card); padding: 12px 14px; }
.detail .related h3 { font-size: 15px; margin-bottom: 10px; color: var(--text); }
.related-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.related-scroll::-webkit-scrollbar { display: none; }
.rel-card { flex-shrink: 0; width: 132px; }
.rel-card .rel-pic { width: 132px; height: 132px; border-radius: var(--radius-md); background: var(--img-bg); overflow: hidden; }
.rel-card .rel-pic img { width: 132px; height: 132px; object-fit: cover; display: block; }
.rel-card .rel-pic.nopic::after { content: '暂无图片'; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text3); font-size: 12px; }
.rel-card .t { font-size: 12px; line-height: 1.4; margin-top: 6px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card .p { color: var(--gold); font-weight: 800; font-size: 15px; margin-top: 4px; }

.comments { margin-top: 8px; background: var(--card); padding: 12px 14px; }
.comments h3 { font-size: 15px; margin-bottom: 10px; color: var(--text); }
.cmt-count { font-size: 12px; color: var(--text2); font-weight: 400; }
.cmt-form input, .cmt-form textarea { width: 100%; border: var(--bw) solid var(--line); background: var(--card2); color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; margin-bottom: 8px; font-family: inherit; outline: none; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.cmt-form input:focus, .cmt-form textarea:focus { border-color: var(--gold); }
.cmt-list { margin-top: 12px; }
.cmt-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 16px 0; }
.cmt { padding: 10px 0; border-bottom: var(--bw) solid var(--line); }
.cmt:last-child { border-bottom: 0; }
.cmt-head { display: flex; justify-content: space-between; font-size: 12px; }
.cmt-head b { color: var(--text); }
.cmt-head span { color: var(--text3); }
.cmt-body { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-top: 5px; word-break: break-all; }

/* 底部购买条：悬浮弧角卡（呼应详情页顶部圆角卡形态），不再通栏贴底 */
.buybar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); max-width: 496px; background: var(--bar-bg); border: var(--bw) solid var(--line); border-radius: 18px; padding: 10px 14px; display: flex; gap: 10px; z-index: 20; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.buybar a { flex: 1; text-align: center; padding: 13px 0; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: 1px; }
/* 拟物立体键：上亮下暗 inset + 外投影；按压时下沉收影（单键态也有按键质感） */
.buybar a, .buybar .buy-disabled { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.16); }
.buybar a:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 5px rgba(0,0,0,.14); }
.buybar .coupon-btn { background: var(--card2); color: var(--gold); border: var(--bw) solid var(--gold-line); }
.buybar .buy-btn { color: var(--on-gold); border-radius: 12px; } /* 共享规则给 8px，弧角卡内统一 12px */
/* 单键禁用态（手慢了）：浅浮雕凹感，不再是硬编码灰平底 */
.buybar .buy-disabled { flex: 1; display: block; text-align: center; padding: 13px 0; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: 1px; background: linear-gradient(180deg, var(--card2), var(--card)); color: var(--text3); border: var(--bw) solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.10); }
html[data-skin="daylight"] .buybar .buy-disabled { background: linear-gradient(180deg, #EFEBDC, #E6E0CD); color: #8B958D; border-color: rgba(58,74,66,.20); }

.loadmore { text-align: center; color: var(--text2); padding: 14px 0 24px; font-size: 13px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 24px; }
.pager-btn { background: var(--card2); border: var(--bw) solid var(--line); color: var(--text-soft); border-radius: 8px; padding: 8px 18px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.pager-btn:active { transform: scale(.96); }
.pager-btn[disabled] { opacity: .35; }
.pager-num { font-size: 13px; color: var(--text2); }

.loading { position: fixed; left: 50%; top: 45%; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(var(--brand-rgb),.15); border-top-color: var(--gold); animation: spin .7s cubic-bezier(.6,.2,.4,.8) infinite; z-index: 40; display: none; }
@keyframes spin { 0% { transform: translate(-50%,-50%) rotate(0); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }

.backtop { position: fixed; right: 16px; bottom: 90px; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-card); border: var(--bw) solid var(--gold-line); color: var(--gold); display: flex; align-items: center; justify-content: center; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; transition: transform .15s, border-color .15s; }
.backtop:active { transform: scale(.96); }
#freshBanner { position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 60; background: var(--gold); color: var(--on-gold); font-size: 13px; font-weight: 600; padding: 9px 22px; border-radius: 8px; cursor: pointer; animation: freshIn .25s ease; white-space: nowrap; }
#freshBanner:active { transform: translateX(-50%) scale(.96); }
@keyframes freshIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 价格区间条钉在全部已钉条之下（--barstack-h = 顶栏+类目/板块/京东类目条实测高，
   syncTopbarH 驱动）；排序条不钉，滚动时从滑条下方穿过 */
.priceslider { position: sticky; top: var(--barstack-h, var(--topbar-h)); z-index: 9; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bar-bg); border-bottom: var(--bw) solid var(--line); }
.ps-label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.ps-val { font-size: 12px; color: var(--gold); white-space: nowrap; }
.priceslider .layui-slider { background: var(--line); }
.priceslider .layui-slider-bar { background: var(--gold); }
.priceslider .layui-slider-wrap-btn { border-color: var(--gold); }

.brandcats { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; background: var(--bar-bg); }
.brandcats::-webkit-scrollbar { display: none; }
.bcat em { font-style: normal; font-size: 11px; color: var(--gold); margin-left: 3px; }
.brandgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
.brandcell { min-width: 0; background: var(--card); border-radius: var(--radius-md); padding: 12px 6px 8px; text-align: center; border: var(--bw) solid var(--line); transition: transform .12s, border-color .12s; }
.brandcell:active { transform: scale(.96); }
.brandcell .bimg { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: var(--img-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.brandcell .bimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brandcell .bimg.noimg img { display: none; }
.brandcell .bfall { display: none; font-size: 22px; font-weight: 600; color: var(--text2); }
.brandcell .bimg.noimg .bfall { display: block; }
.brandcell .bn { font-size: 11px; color: var(--text2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brandcell .bcount { font-size: 11px; color: var(--gold); margin-top: 2px; }
.todaybrand { position: relative; margin: 10px; border-radius: var(--radius-md); overflow: hidden; min-height: 90px; border: var(--bw) solid var(--gold-line); background: var(--gold-card); }
.todaybrand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.88), rgba(10,10,12,.3)); }
.tb-inner { position: relative; padding: 14px; }
.tb-tag { display: inline-block; font-size: 11px; color: var(--text2); background: transparent; border: var(--bw) solid var(--line); border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.tb-name { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 7px; }
.tb-title { font-size: 12px; color: var(--text2); margin-top: 3px; }
.tb-go { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--gold2); border: var(--bw) solid var(--gold-line); border-radius: var(--radius-sm); padding: 3px 10px; }
.hotstrip { margin: 0 10px 4px; }
.hot-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 4px 0 8px; }
.hot-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hot-scroll::-webkit-scrollbar { display: none; }
.hotcell { flex-shrink: 0; width: 64px; text-align: center; position: relative; }
.hotcell img { width: 48px; height: 48px; border-radius: 50%; background: var(--img-bg); object-fit: contain; display: block; margin: 0 auto; }
.hot-rank { position: absolute; top: -2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card2); color: var(--text); font-size: 11px; font-weight: 700; line-height: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.hot-name { font-size: 11px; color: var(--text2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsort { display: flex; gap: 14px; padding: 8px 14px; background: var(--card); margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.bsort::-webkit-scrollbar { display: none; }
.bsort-item { flex-shrink: 0; font-size: 12px; color: var(--text2); }
.bsort-item.on { color: var(--gold); font-weight: 600; }
.brandhead { background: var(--card); padding: 10px 14px 12px; margin-bottom: 10px; }
.bh-back { font-size: 13px; color: var(--text); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 4px; }
.bh-main { display: flex; gap: 10px; align-items: center; }
.bh-main img { width: 52px; height: 52px; border-radius: 50%; background: var(--img-bg); object-fit: contain; flex-shrink: 0; }
.bh-name { font-size: 17px; font-weight: 600; color: var(--text); }
.bh-plain { font-size: 12px; color: var(--text2); margin-top: 3px; }
.bh-guide { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--card2); font-size: 13px; line-height: 1.9; color: var(--text2); }
.branditems { padding: 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 品牌视图子块永远占满整行：flat 被竞态摘除时兜底，避免落进卡片网格被摊开 */
.list > .brandcats, .list > .brandgrid, .list > .brandhead, .list > .bsort, .list > .branditems { grid-column: 1 / -1; }

.sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; }
.sheet { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; background: var(--card); border: var(--bw) solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); animation: up .2s ease; }
@keyframes up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.sheet-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.sheet-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 55vh; overflow-y: auto; }

.layui-icon { font-size: inherit; }
.layui-badge { background: var(--gold-bg); color: var(--gold); border-radius: var(--radius-sm); }

.guide-layer { background: var(--card) !important; border: var(--bw) solid var(--gold-line) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; }
.guide-layer .layui-layer-btn { border-top: var(--bw) solid var(--line); padding: 10px 16px 14px; }
.guide-layer .layui-layer-btn0 { background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important; border-color: var(--gold) !important; color: var(--on-gold) !important; border-radius: var(--radius-md) !important; font-weight: 700; }
.guide-layer .layui-layer-content { padding: 20px 18px 8px; color: var(--text); }
.guide-layer .layui-layer-title { background: transparent !important; color: var(--text) !important; border-bottom: none !important; }

.end, .ori, .rel-card .p, .pager-num, .ps-val, .brandcell .bcount { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

@media (min-width: 768px) {
  /* 线报桌面适配：双列卡片流（宽卡在桌面单列太稀）+ 安全约束 */
  .list.flat #note { display: none; }
  #list.flat.wire-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 14px; max-width: 1080px; margin: 0 auto; overflow-x: clip; }
  #list.flat.wire-grid .wire-card { margin: 0; width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; }
  #list.flat.wire-grid .wire-t { font-size: 14px; }
  #list.flat.wire-grid .wire-strip { max-width: 100%; }
  .app { max-width: 1080px; }
  /* 桌面：导航左聚拢，胶囊放宽（悬停微亮沿用） */
  .nav { justify-content: flex-start; gap: 4px; }
  .tab { flex: 0 0 auto; padding: 9px 18px; }
  .tab:hover:not(.active) { color: var(--text-soft); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .list { grid-template-columns: repeat(3, 1fr); }
  .branditems { grid-template-columns: repeat(3, 1fr); }
  .brandgrid { grid-template-columns: repeat(8, 1fr); }
  .sheet-cats { grid-template-columns: repeat(4, 1fr); }
  .detail .hero, .detail .thumbs, .detail .body, .detail #nextCard, .detail .related, .detail .comments { max-width: 720px; margin-left: auto; margin-right: auto; }
  .cmp-drawer { left: 0; right: 0; max-width: 720px; margin: 0 auto; }
  .detail .hero img { max-width: 100%; }
  .detail .thumbs { padding: 8px 12px; }
  .card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb),.55); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
  .card:active { transform: scale(.96); }
  .brandcell:hover { transform: translateY(-2px); border-color: var(--gold-line); }
  .brandcell:active { transform: scale(.96); }
  .cat:hover, .board:hover, .bcat:hover, .scat:hover { color: var(--gold); }
  .pager-btn:hover { border-color: var(--gold); }
  .sugg-item:hover { background: var(--gold-bg); color: var(--gold); }
  .rel-card:hover { opacity: .92; }
  .searchbar button:hover, .cmt-form button:hover, .buybar .buy-btn:hover { opacity: .9; }
  .backtop:hover { border-color: var(--gold); }
}

@media (min-width: 1200px) {
  .list { grid-template-columns: repeat(4, 1fr); }
  .brandgrid { grid-template-columns: repeat(10, 1fr); }
}

/* ===================== 淘宝线报连续信息流 ===================== */
#list.flat.wire-grid { display:block; max-width:920px; margin:0 auto; padding:12px 16px 28px; overflow-x:clip; }
#list .wire-msg { min-width:0; margin:0; padding:0; }
.wire-divider { display:flex; align-items:center; gap:10px; height:34px; color:var(--text3); font-size:11px; }
.wire-divider:before,.wire-divider:after { content:""; height:1px; flex:1; background:var(--line); }
.wire-divider span { flex:0 0 auto; }
.wire-msg-meta { display:flex; align-items:center; min-width:0; gap:7px; padding:0 8px 5px; }
.wire-source { display:inline-flex; min-width:0; }
.wire-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); font-weight:500; }
.wire-badge svg { width:16px; height:16px; display:block; }
.wire-u { font-size:10px; padding:2px 6px; border-radius:5px; font-weight:600; }
.u-stock { background:#3a1512; color:#ff7a6e; }
.u-bug { background:#12291e; color:var(--brand); }
.u-coupon { background:#16261a; color:#7fd08a; }
.wire-time { margin-left:auto; color:var(--text3); font-size:10px; white-space:nowrap; }
.wire-bubble { min-width:0; background:var(--card); border:var(--bw) solid var(--line); border-radius:4px 14px 14px 14px; padding:11px 12px 10px; }
.wire-main { display:grid; grid-template-columns:76px minmax(0,1fr); gap:11px; min-width:0; align-items:center; }
.wire-thumb { width:76px; height:76px; border-radius:9px; background:var(--img-bg); position:relative; overflow:hidden; border:var(--bw) solid var(--line); }
.wire-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wire-thumb-empty { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:var(--text3); font-size:11px; }
.wire-pic-n { position:absolute; right:3px; bottom:3px; background:rgba(15,15,17,.85); color:var(--text-soft); font-size:10px; border-radius:4px; padding:2px 5px; }
.wire-body { min-width:0; display:flex; flex-direction:column; }
.wire-t { font-size:14px; line-height:1.55; color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; margin:0 0 7px; }
/* 京东线报卡：文案当标题易拖长——限两行，信息密度对齐淘宝素材卡 */
.wire-msg.jd .wire-t { -webkit-line-clamp:2; }
/* 多平台人工选品卡：短标题限两行，与素材卡密度一致 */
.choice-msg .wire-t { -webkit-line-clamp:2; }
.wire-row { display:flex; align-items:baseline; gap:7px; min-width:0; }
.wire-label { color:var(--text3); font-size:11px; }
.wire-price { color:var(--brand); font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.wire-strip { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; min-width:0; max-width:100%; margin-top:10px; padding:1px 0 3px; }
.wire-strip::-webkit-scrollbar { display:none; }
.wire-cell { flex:0 0 68px; width:68px; height:68px; border-radius:8px; background:var(--img-bg); position:relative; overflow:hidden; border:var(--bw) solid var(--line); }
.wire-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.wire-cell-p { position:absolute; left:3px; bottom:3px; background:rgba(15,15,17,.85); color:var(--brand); font-size:10px; border-radius:4px; padding:1px 4px; }
.wire-actions { display:flex; align-items:center; gap:10px; min-width:0; margin-top:9px; padding-top:9px; border-top:var(--bw) solid var(--line); }
.wire-status { color:var(--text3); font-size:11px; }
.wire-buy { margin-left:auto; flex:0 0 auto; padding:7px 13px; border-radius:7px; background:var(--brand); color:#07301d; font-size:12px; font-weight:600; white-space:nowrap; }
.wire-buy:active { opacity:.85; }
/* 多按钮卡（京东线报）：只有首个按钮吃 margin-left:auto，其余紧随其后 */
.wire-buy ~ .wire-buy { margin-left:0; }
.wire-buy.alt { background:#26262b; color:#c9c7c2; }
.wire-buy.cp { background:rgba(225,37,27,.16); color:#ff7a6e; }
.wire-new-pill { position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--topbar-h) + 46px); z-index:40; background:var(--brand); color:#07301d; font-size:12px; font-weight:600; padding:7px 16px; border-radius:16px; box-shadow:0 4px 14px rgba(0,0,0,.4); pointer-events:auto; }
.wire-retry { text-align:center; color:#9a9a9f; padding:60px 0; font-size:14px; cursor:pointer; }
@media (min-width:768px) {
  #list.flat.wire-grid { max-width:820px; padding:16px 20px 36px; }
  .wire-bubble { padding:13px 15px 11px; }
  .wire-main { grid-template-columns:96px minmax(0,1fr); gap:13px; }
  .wire-thumb { width:96px; height:96px; }
  .wire-cell { flex-basis:76px; width:76px; height:76px; }
}
@media (max-width:359px) {
  #list.flat.wire-grid { padding-left:10px; padding-right:10px; }
  .wire-main { grid-template-columns:64px minmax(0,1fr); gap:9px; }
  .wire-thumb { width:64px; height:64px; }
  .wire-t { font-size:13px; }
  .wire-cell { flex-basis:60px; width:60px; height:60px; }
}

/* 超窄屏（<320px 老设备）与横屏：线报卡安全收缩 */
@media (max-width: 359px) {
  .wire-thumb { width: 64px; height: 64px; }
  .wire-t { font-size: 12.5px; }
  .wire-price { font-size: 16px; }
  .wire-cell { width: 84px; height: 84px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .wire-new-pill { top: 70px; }
}

/* 素材商品流：弱边界、信息优先、单条商品不再依赖旧聊天字段 */
.material-msg { margin-bottom: 10px !important; }
.material-bubble { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.wire-summary { color: var(--text2); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: -2px 0 7px; }
.wire-original { color: var(--text3); font-size: 11px; text-decoration: line-through; }
.wire-coupon-tag { color: var(--gold); background: var(--gold-bg); border: var(--bw) solid var(--gold-line); border-radius: 4px; padding: 2px 5px; font-size: 10px; white-space: nowrap; }
.wire-materials { display: flex; gap: 7px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-top: 11px; padding: 1px 0 3px; }
.wire-materials::-webkit-scrollbar { display: none; }
.wire-material { appearance: none; border: 0; padding: 0; width: 72px; height: 72px; flex: 0 0 72px; border-radius: 8px; overflow: hidden; background: var(--img-bg); cursor: zoom-in; }
.wire-material img { width: 100%; height: 100%; object-fit: cover; display: block; border: var(--bw) solid var(--line); border-radius: 8px; }
.wire-material:active { transform: scale(.96); opacity: .8; }
.wire-preview-layer { position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; height: 100vh !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(0,0,0,.92) !important; }
.wire-preview-layer .layui-layer-content { height: 100%; padding: 0 !important; overflow: hidden; background: transparent; }
.wire-preview-box { width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; background: transparent; padding: 34px 18px; touch-action: pan-y; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
.wire-preview-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; opacity: 1; }
.wire-preview-x { position: absolute; right: 14px; top: 14px; z-index: 5; width: 40px; height: 40px; padding: 0; border: var(--bw) solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(20,20,26,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.4); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, background .15s ease; }
.wire-preview-x svg { width: 19px; height: 19px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.wire-preview-x:hover { background: rgba(40,40,48,.72); }
.wire-preview-x:active { transform: scale(.92); }
@media (max-width: 767px) {
  .wire-preview-x { right: calc(env(safe-area-inset-right, 0px) + 12px); top: calc(env(safe-area-inset-top, 0px) + 12px); width: 38px; height: 38px; }
}
.wire-preview-box img { border-radius: 16px; box-shadow: 0 10px 44px rgba(0,0,0,.5); }
@media (max-width: 767px) {
  .wire-preview-box img { border-radius: 12px; }
}
.wire-preview-arrow { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 38px; height: 54px; border: 0; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 38px; line-height: 42px; cursor: pointer; }
.wire-preview-arrow.prev { left: 10px; }
.wire-preview-arrow.next { right: 10px; }
.wire-preview-arrow:active { background: rgba(var(--brand-rgb),.45); }
.wire-preview-count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 5; color: #fff; background: rgba(0,0,0,.5); border-radius: 12px; padding: 3px 10px; font-size: 12px; }
@media (max-width: 767px) { .wire-preview-arrow { display: none !important; } .wire-preview-fallback { padding: 24px 10px; } }
.wire-preview-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 1; }
.wire-preview-fallback { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.88); }
.wire-preview-fallback img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1; }
.wire-preview-layer .layui-layer-close { display: none; }
.wire-preview-fallback { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 34px 18px; background: rgba(0,0,0,.92); touch-action: none; overscroll-behavior: contain; }
.wire-preview-box { overflow: hidden; }
.wire-preview-box img { will-change: transform, opacity; transition: transform 280ms cubic-bezier(.22,.8,.24,1), opacity 180ms ease; }
.wire-preview-box img.wire-gallery-dragging { transition: none; }
.wire-preview-box img.wire-gallery-in-next { animation: wireGalleryInNext 300ms cubic-bezier(.22,.8,.24,1); }
.wire-preview-box img.wire-gallery-in-prev { animation: wireGalleryInPrev 300ms cubic-bezier(.22,.8,.24,1); }
@keyframes wireGalleryInNext { from { opacity: .35; transform: translate3d(26px,0,0) scale(.97); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes wireGalleryInPrev { from { opacity: .35; transform: translate3d(-26px,0,0) scale(.97); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@media (min-width: 768px) {
  #list.flat.wire-grid { display: block; max-width: 820px; }
  .material-msg { margin-bottom: 12px !important; }
  .wire-material { width: 82px; height: 82px; flex-basis: 82px; }
}

/* 窄屏：胶囊 13px 已是最紧形态，仅收窄顶栏边距防挤出 */
@media (max-width:382px){
  .nav { gap:2px; }
  .topbar { padding-left:10px; padding-right:10px; }
}

/* 底部声明与备案区 */
.site-foot { padding: 26px 16px calc(34px + env(safe-area-inset-bottom)); text-align: center; color: var(--text3); font-size: 11px; line-height: 1.9; }
.site-foot p { margin: 0; }
.site-foot a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(143,143,150,.6); padding-bottom: 1px; }
.site-foot a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.site-foot .sf-brand { color: var(--text2); font-weight: 600; margin-bottom: 2px; letter-spacing: .5px; }

/* AI 购买攻略卡 */
.ai-guide { background: var(--card); border-top: var(--bw) solid var(--line); padding: 16px 12px; }
.detail .ai-guide { max-width: 720px; margin: 0 auto; }
@media (min-width: 768px) { .ai-guide { max-width: 720px; margin: 0 auto; } }
.ai-guide h3 { margin: 0 0 12px; }
.ai-guide { text-align: center; }
.ai-guide .gh-article, .ai-guide .guide-box { text-align: left; }
.ai-guide h3.kw-pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #F6F2E4; background: linear-gradient(180deg, #4E7A6F, #3B5F56); border-radius: 999px; padding: 5px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(78,122,111,.30); }
.ai-guide h3::before { content: '✦ '; opacity: .8; }
.ai-guide .gc-t { margin: 10px 0 2px; color: var(--text-soft); font-weight: 700; font-size: 13px; }
.ai-guide p { margin: 4px 0; font-size: 13px; line-height: 1.9; color: var(--text2); overflow-wrap: anywhere; }

/* 实报专用加载骨架：细长聊天流形态 */
.wire-skel { padding: 14px 16px; }
.wire-skel-row { display: flex; gap: 12px; margin-bottom: 22px; }
.wire-skel-row .sk-dot { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.wire-skel-lines { flex: 1; min-width: 0; }
.wire-skel-lines .sk-line { height: 13px; border-radius: 4px; }
@media (max-width: 430px){ .wire-skel-row { margin-bottom: 18px; } }

/* 价格区间滑条（itemlist/pdd/jd 共用）：端点刻度 + 数值胶囊 + 手柄精修 */
.priceslider .ps-label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.priceslider .ps-end { font-size: 10px; color: var(--text2); white-space: nowrap; }
/* 数值胶囊：文案已紧凑（¥0~¥460 无空格），min-width 装最长「¥500~¥500」即可，不再挤让滑条 */
.ps-val { font-size: 11.5px; color: var(--gold); border: var(--bw) solid var(--line); border-radius: 999px; padding: 2px 8px; min-width: 72px; text-align: center; white-space: nowrap; }
/* 拖拽防抖铁律：layui 滑条每次 touchmove 实时回调 change 并重读 offsetWidth 换算值，
   ps-val 文本变宽（「不限」↔「¥0~¥460」）会挤压 flex:1 的滑条 → 同一指位映射到新值 → 文本再变 → 末端振荡横跳。
   chip 固定 min-width 装下最长文案，「价格区间」标签窄屏也给滑条让位 */
@media (max-width: 480px) { .priceslider { gap: 8px; } .priceslider .ps-end { display: none; } }

/* 券chip 相对价格行垂直居中：baseline 对齐下 10px chip 的盒模型（边框+内边距）
   会把它坠得比大号价格低，视觉上不齐（用户报障） */
.wire-row .wire-coupon-tag { align-self: center; line-height: 1; }

/* 顶部加载进度条：搜索/翻页在途时点亮（不确定进度动画） */
#loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity .2s; background: rgba(18, 18, 20, .6); overflow: hidden; }
#loadbar::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--brand), transparent); }
#loadbar.loadbar-on { opacity: 1; }
#loadbar.loadbar-on::before { animation: lb-slide 1.1s linear infinite; }
@keyframes lb-slide { from { left: -40%; } to { left: 100%; } }

/* 搜索态（body.searching 由 applySearchChrome 统一同步）强制隐藏各 tab 分类条，
   防止搜索结果页残留浏览型导航（未来新增的分类条自动被覆盖） */
body.searching #catbar, body.searching #jdcatbar, body.searching #brandcats { display: none !important; }

/* 搜索框：清空 X 定位到输入框内部右缘；取消改胶囊与搜索按钮同构 */
.search-input-wrap { display: flex; flex: 1; position: relative; min-width: 0; }
.search-input-wrap input { padding-right: 36px; }
.searchbar .search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px; }

/* ===== 沉浸体验批（v185）：特性经 html.ff-micro / html.ff-cv 门控，全部 transform/opacity 合成层动画 ===== */
@media (prefers-reduced-motion: reduce) {
  .ff-micro *, .ff-micro *::before, .ff-micro *::after { animation: none !important; transition: none !important; }
}
/* 卡片按压缩放 + 历史低价角标弹入（微反馈） */
.ff-micro .card, .ff-micro .buy-btn, .ff-micro .coupon-btn { transition: transform .09s ease; }
.ff-micro .card:active { transform: scale(.98); }
.ff-micro .buy-btn:active, .ff-micro .coupon-btn:active { transform: scale(.97); }
.ff-micro .low-tag { animation: lowPop .32s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes lowPop { from { transform: scale(.6); opacity: 0; } }
/* 长列表跳过屏外渲染（滚动帧率）；预估高度防滚动条跳动 */
.ff-cv .card { content-visibility: auto; contain-intrinsic-size: auto 300px; }
.ff-cv .wire-msg { content-visibility: auto; contain-intrinsic-size: auto 240px; }
/* 实报新卡直播感：入场一次（.fresh 由 JS 按 wire_id 去重投放） */
.ff-micro .wire-msg.fresh { animation: wireArrive .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes wireArrive { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* 引导弹窗（添加到桌面等）：原硬编码旧品牌绿 #2ed68a/#2a4d3a 不随皮肤变——全量走 token */
.guide-box { background: var(--card); border: var(--bw) solid var(--gold-line); border-radius: 12px; padding: 20px 18px; max-width: 340px; width: 100%; color: var(--text); }
.guide-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.guide-title { font-size: 16px; font-weight: 700; color: var(--gold); }
.guide-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 2; color: var(--text-soft); }
.guide-btn { margin-top: 14px; width: 100%; padding: 9px 0; border-radius: 12px; border: var(--bw) solid var(--gold-line); background: var(--card2); color: var(--gold); font-size: 13px; font-family: inherit; }
.guide-btn:active { transform: scale(.97); }

/* 品牌化空态：圆形省字标呼吸（emblem 图形自带圈与底板，容器只管尺寸与呼吸） */
.eb-glyph { width: 62px; height: 62px; display: inline-flex; animation: ebBreathe 2.4s ease-in-out infinite; }
.eb-glyph img { width: 100%; height: 100%; display: block; border-radius: 50%; opacity: 1; }
@keyframes ebBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* 价格叙事条：把数据说成人话 */
.price-story { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.price-story.good { background: rgba(var(--brand-rgb),.12); color: #7ee2b1; }
.price-story.mid { background: rgba(255,255,255,.06); color: var(--text2); }
.price-story.high { background: rgba(255,176,32,.10); color: #ffcf7d; }
/* 继续逛：详情页下一件大卡 */
.next-card { display: flex; gap: 12px; align-items: center; margin: 8px 0 0; padding: 12px 14px; background: var(--card); border: 0; }
.ff-micro .next-card:active { transform: scale(.985); }
.next-card img { width: 86px; height: 86px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.next-card .nc-info { flex: 1; min-width: 0; text-align: left; }
.next-card .nc-k { font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 3px; }
.next-card .nc-t { font-size: 13.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.next-card .nc-p { font-size: 16px; font-weight: 700; color: var(--gold); }
.next-card .nc-go { flex-shrink: 0; font-size: 20px; color: var(--text2); }
/* 比价抽屉/省钱明细：底部浮层（浮层军规），与文档流零纠缠 */
/* 分享+比价右对齐同排组：永远同一行，装不下整组一起降行 */
.prices .pricing-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prices .cmp-btn { align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 15px; background: rgba(var(--brand-rgb),.08); border: var(--bw) solid var(--gold-line); color: var(--gold); font-size: 12px; font-weight: 600; }
.ff-micro .cmp-btn:active { transform: scale(.97); }
.cmp-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 59; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cmp-mask.show { opacity: 1; pointer-events: auto; }
.cmp-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card); border: var(--bw) solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; transform: translateY(105%); transition: transform .26s cubic-bezier(.22,.61,.36,1); max-height: 72vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.cmp-drawer.open { transform: translateY(0); }
.cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.cmp-close { width: 28px; height: 28px; padding: 0; border: 0; appearance: none; -webkit-appearance: none; border-radius: 50%; background: var(--card2); color: var(--text2); display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.cmp-body { overflow-x: auto; display: flex; gap: 10px; padding: 4px 14px 16px; scrollbar-width: none; }
.cmp-body::-webkit-scrollbar { display: none; }
.detail .related-scroll { scrollbar-width: none; }
.detail .related-scroll::-webkit-scrollbar { display: none; }
.cmp-drawer { overscroll-behavior: contain; }
.cmp-drawer.shr-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 分享抽屉内滚兜底：小屏矮视口也能看到全部 */
.cmp-drawer .cmp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.save-list { display: block; }
.save-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: var(--bw) solid rgba(255,255,255,.06); text-decoration: none; }
/* 斑马纹：隔行覆一层品牌色淡底（daylight=晨雾绿，与顶部标题同色相；暗皮肤=品牌绿） */
.save-row:nth-child(even) { background: rgba(var(--brand-rgb),.06); }
.save-row:nth-child(even):active { background: rgba(var(--brand-rgb),.10); }
.save-row:active { background: rgba(255,255,255,.04); }
.save-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13.5px; }
.save-row .p { flex-shrink: 0; color: var(--brand); font-size: 13px; font-weight: 700; }
.sheet-lock { overflow: hidden !important; }
.cmp-strip { position: relative; }
.hnav-btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: var(--bw) solid var(--line); background: rgba(18,18,20,.78); color: var(--text); backdrop-filter: blur(6px); cursor: pointer; align-items: center; justify-content: center; padding: 0; transition: opacity .15s, background .15s; }
.hnav-btn:hover { background: #2f2f34; }
.hnav-btn.left { left: 8px; }
.hnav-btn.right { right: 8px; }
.hnav-btn.off { opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .hnav-btn { display: flex; } }
.cmp-card { flex: 0 0 118px; background: var(--card2); border: var(--bw) solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; }
.cmp-card img { width: 118px; height: 118px; object-fit: cover; display: block; }
.cmp-card .t { font-size: 12px; color: var(--text); padding: 6px 8px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; }
.cmp-card .p { font-size: 13px; font-weight: 700; color: var(--gold); padding: 2px 8px 4px; }
.cmp-card .low { font-size: 11px; color: var(--brand); padding: 0 8px 8px; }
.cmp-empty { padding: 26px 16px 30px; text-align: center; color: var(--text2); font-size: 13px; width: 100%; }
/* 猜你喜欢·板块好货徽标（秒杀/聚划算/淘抢购） */
.deal-tag { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; line-height: 1.4; vertical-align: 1px; }
.dt-ss { background: rgba(255,120,60,.14); color: #ff9c6b; }
.dt-js { background: rgba(var(--brand-rgb),.12); color: #6fe0a5; }
.dt-tq { background: rgba(255,176,32,.12); color: #ffcf7d; }
/* 预告卡开场时间徽标：跟随皮肤 token（morandi 下自动灰绿系） */
.dt-pv { background: rgba(var(--brand-rgb),.14); color: var(--brand-hi); }
/* 实报按天存档 */
.warch-day { text-align: center; color: var(--text3); font-size: 12px; letter-spacing: 2px; padding: 26px 0 10px; }
.warch-more { display: block; width: calc(100% - 28px); margin: 16px auto 6px; padding: 11px 0; border-radius: 10px; background: var(--card2); border: var(--bw) solid var(--line); color: var(--text2); font-size: 13.5px; cursor: pointer; }
.warch-more:active { transform: scale(.98); }
.warch-end { text-align: center; color: var(--text3); font-size: 12px; padding: 18px 0 6px; }
/* 省钱计数器胶囊已下线（与本页省钱横幅职责重叠，2026-08-31 用户裁定）——sqzdm_seen 记录保留喂猜你喜欢 */

/* ===== 高级灰渐变批（#729A93→#FBFEE5，v214）：低饱和莫兰迪点缀层 =====
   用法铁律：浅色只做底/徽标/氛围，不做暗底文字色；品牌绿金仍是主色不退位 */
:root { --sage: #729A93; --cream: #FBFEE5; }

/* ② 低价徽标：全网低价（比价首卡）/历史低价（卡片角标）——小面积高亮，暗底极醒目 */
.cmp-card .low { color: #12352c; background: linear-gradient(135deg, var(--sage), var(--cream)); border-radius: 6px; padding: 1px 7px; display: inline-block; font-weight: 700; margin: 0 8px 8px; }
.low-tag { background: linear-gradient(135deg, var(--sage), var(--cream)); color: #12352c; }

/* ③ 板块好货徽标统一灰绿系（板块区分靠文字） */
.deal-tag { background: linear-gradient(135deg, var(--sage), var(--cream)); color: #12352c; font-weight: 600; }

/* ⑤ 空态「省」字圈：sage 描边字 + 渐变底 */
.empty-brand .eb-glyph { border-color: rgba(114,154,147,.55); color: var(--sage); background: linear-gradient(160deg, rgba(114,154,147,.16), rgba(251,254,229,.08)); }

/* ===== 皮肤层：data-skin 重映射品牌 token =====
   默认（无 data-skin）= 品牌绿金；morandi = 高级灰全站化。
   切换：<html data-skin> 由 head 内联脚本按 localStorage(sqzdm_skin)/?skin= 设置 */
html[data-skin="morandi"] {
  --brand: #8aa9a2;
  --brand-hi: #a3c0ba;
  --brand-dark: #5f8781;
  --brand-rgb: 114,154,147;
  --gold: #c9c39a;
  --gold-dark: #9a9166;
  --on-gold: #2c2a1e;
  --gold-bg: #1d231f;
  --gold-line: rgba(114,154,147,.35);
  --gold-card: #1b211e;
}

/* ===== daylight：奶油暖白「明早晨光」版（预览·2026-09-02 用户裁定方向）=====
   底=你给的 #FBFEE5 系奶油白；字=深墨绿；绿金作点缀——活泼靠亮度而非暗调 */
html[data-skin="daylight"] {
  --bg: #F6F2E4;
  --card: #FBFAF3;
  --card2: #F1EDDF;
  --bar-bg: #F6F2E4;
  --img-bg: #EFEBDD;
  --text: #3C4A42;
  --text2: #7A857D;
  --text3: #97A29A;
  --text-soft: #59655E;
  --brand: #729A93;
  --brand-hi: #4E7A6F;
  --brand-dark: #5F8781;
  --brand-rgb: 114,154,147;
  --gold: #A8A27E;
  --gold-dark: #8C8055;
  --gold2: #4E7A6F;
  --on-gold: #2C3A34;
  --gold-bg: #EFEADB;
  --gold-line: #D8D0BA;
  --gold-card: #F3EFE0;
  --line: #DCD5C2;
  --danger: #C05243;
  --sun-glow: rgba(114,154,147,.10);
}

/* ===== daylight 覆盖：整底微降一档 + 顶栏改深墨绿 header（奶油 logo 亮起来）===== */
/* body 底层（PC 宽屏两侧露出的"墙壁"）：顶部一块 100vh 晨雾绿→奶油渐变（与 topbar
   绿段溶入暖白同构、色相呼应），往下溶入乳黄；不按文档高度拉长、不用 fixed（iOS 差） */
html[data-skin="daylight"] body {
  background:
    linear-gradient(180deg, #DFE6DB 0%, #E9E8DA 52%, #F0EDDF 86%, #E8E2D0 100%) top / 100% 100vh no-repeat,
    #E8E2D0;
}
/* 骨架 shimmer 奶油化：米色块 + 暖高光扫过，价格条/图标走品牌色（随皮肤） */
html[data-skin="daylight"] { --sk-a: #EAE4D3; --sk-b: #F7F3E6; --sk-c: #E2DCC9; }
html[data-skin="daylight"] .app {
  background:
    radial-gradient(760px 560px at 8% -6%, rgba(114,154,147,.12), transparent 62%),
    radial-gradient(900px 640px at 96% 104%, rgba(168,162,126,.08), transparent 65%),
    linear-gradient(180deg, #F2EEDE 0%, #EDE7D6 60%, #E8E2D0 100%);
}
/* 顶栏：晨雾鼠尾草绿只留 logo 区一小段，经加色阶长过渡溶进暖白（相邻明度、无切块感） */
html[data-skin="daylight"] .topbar,
html[data-skin="daylight"] .detail-top {
  background:
    radial-gradient(640px 420px at 12% 0%, rgba(255,252,238,.16), transparent 70%),
    radial-gradient(880px 520px at 92% 8%, rgba(168,162,126,.10), transparent 66%),
    linear-gradient(180deg, #86A092 0%, #8AA397 28%, #C0CCB9 54%, #E4E0CD 74%, #F2EEDE 88%, #F2EEDE 100%);
}
/* detail-top 是悬浮圆角卡（压在商品图上）：绿占大头、底缘微过渡，logo 有背板可依 */
html[data-skin="daylight"] .detail-top {
  background:
    radial-gradient(560px 320px at 10% 0%, rgba(255,252,238,.16), transparent 70%),
    linear-gradient(180deg, #86A092 0%, #84A091 55%, #C4CFC0 88%, #E9E4D2 100%);
}
/* 绿→暖白过渡带上的 logo/搜索适配（浅底深字，绿段奶油段通吃） */
html[data-skin="daylight"] .detail-top img { filter: drop-shadow(0 1px 8px rgba(0,0,0,.18)); }
html[data-skin="daylight"] .searchbar input { background: rgba(251,250,243,.65); border-color: rgba(58,74,66,.15); color: #3C4A42; }
html[data-skin="daylight"] .searchbar input::placeholder { color: rgba(60,74,66,.52); }
html[data-skin="daylight"] .searchbar input:focus { border-color: var(--brand-hi); }
html[data-skin="daylight"] .searchbar button { background: linear-gradient(135deg, #7FB0A5, #729A93); color: #1F2B26; }
html[data-skin="daylight"] .search-clear { color: rgba(60,74,66,.55); }
/* .nav 落暖白区：轻雾透明（不再白块）——tab 未选墨绿字 */
html[data-skin="daylight"] .nav { background: rgba(251,250,243,.30); border-color: rgba(58,74,66,.10); box-shadow: none; }
html[data-skin="daylight"] .tab { color: rgba(60,74,66,.55); }
/* daylight .tab 覆盖(0,2,1)压过基础 .tab.active(0,2,0)——选中字色必须显式回深墨绿 */
html[data-skin="daylight"] .tab.active { color: #233129; }
/* tab 浮标：daylight 下 --brand-hi/--gold-dark 都是深色，深字贴深底发糊——改亮渐变+淡光晕 */
html[data-skin="daylight"] .tab-pill { background: linear-gradient(180deg, #93BBAE, #A8A27E); box-shadow: 0 2px 6px rgba(114,154,147,.32), inset 0 1px 0 rgba(255,255,255,.40); }
html[data-skin="daylight"] .logo img { filter: drop-shadow(0 1px 8px rgba(0,0,0,.18)); }
/* 卡片顶缘高光在浅色下改为阴影（depth 感） */
html[data-skin="daylight"] .card { box-shadow: 0 1px 3px rgba(92,84,64,.10), 0 2px 6px rgba(92,84,64,.06); }
/* dark-mode 控件亮屏正确渲染 */
html[data-skin="daylight"] { color-scheme: light; }
html[data-skin="daylight"] .low-tag { background: linear-gradient(135deg, #7FA396, #5B7F73); color: #F6F2E4; box-shadow: inset 0 0 0 1px rgba(251,250,243,.30); }
html[data-skin="daylight"] .hnav-btn { background: rgba(255,255,255,.78); color: #3C4A42; }
html[data-skin="daylight"] .hnav-btn:hover { background: #FFFFFF; }
html[data-skin="daylight"] .detail-down-alert { background: rgba(192,82,67,.10); color: #B0493C; border-color: rgba(192,82,67,.30); }
html[data-skin="daylight"] .sb-icon, html[data-skin="daylight"] .savebanner .sb-total b { color: #4E7A6F; }
html[data-skin="daylight"] .savebanner { border-color: rgba(114,154,147,.45); }
/* 滑窗左右边线：daylight 下 --line 深绿太重，调成淡墨绿发丝线（0.35 太透看不见，加深到 0.6） */
html[data-skin="daylight"] .sheet, html[data-skin="daylight"] .cmp-drawer { border-color: rgba(58,74,66,.6); }
/* 底部购买条：daylight 统一晨雾绿（呼应 detail-top 变体），券钮白雾底墨绿字 */
html[data-skin="daylight"] .buybar { background: linear-gradient(180deg, #86A092 0%, #84A091 55%, #C4CFC0 100%); border-color: rgba(58,74,66,.35); box-shadow: 0 6px 18px rgba(58,74,66,.22); }
html[data-skin="daylight"] .buybar .coupon-btn { background: rgba(251,250,243,.72); color: #35594F; border-color: rgba(58,74,66,.22); }
html[data-skin="daylight"] .buybar .buy-btn { background: linear-gradient(180deg, #588878 0%, #4E7A6F 45%, #3B5F56 100%); color: #F6F2E4; text-shadow: 0 -1px 0 rgba(0,0,0,.25); }
/* 瀑布流角标 daylight 增强：深底浅字——浅色商品图上不再糊成一片 */
html[data-skin="daylight"] .save-tag { background: rgba(28,35,31,.88); color: #F2EEDE; box-shadow: inset 0 0 0 1px rgba(251,250,243,.25); }
html[data-skin="daylight"] .save-tag.save-big { background: linear-gradient(135deg, #4E7A6F, #3B5F56); color: #F2EEDE; box-shadow: inset 0 0 0 1px rgba(251,250,243,.35); }
html[data-skin="daylight"] .deal-tag { background: linear-gradient(135deg, #4E7A6F, #3B5F56); color: #F2EEDE; box-shadow: inset 0 0 0 1px rgba(251,250,243,.30); }
html[data-skin="daylight"] .dt-pv { background: rgba(78,122,111,.18); color: #35594F; box-shadow: inset 0 0 0 1px rgba(59,95,86,.35); }
/* PC 返回钮：daylight 下 --text 变深墨绿，箭头在深底上隐形——圆钮改奶油箭头 + 浅描边 */
html[data-skin="daylight"] .detail .hero .close-x { background: rgba(30,38,34,.86); border-color: rgba(251,250,243,.30); color: #F2EEDE; }
html[data-skin="daylight"] .detail .hero .close-x:hover { background: #3E4C44; color: #FFFFFF; }

/* 空态/实报的口号小字：不再叠 opacity 透明度（浅底上发灰模糊），两套皮肤各给明确色 */
.motto-line { display: block; margin-top: 6px; font-size: 11px; color: #94A09A; }
html[data-skin="daylight"] .motto-line { color: #47574E; font-weight: 500; }

/* 历史低价角标照片可读性补强：深起渐变 + 暗色发丝环 */
.low-tag { background: linear-gradient(135deg, #67938b, var(--cream)); box-shadow: inset 0 0 0 1px rgba(11,17,15,.25); }

/* 详情页「手慢了」提示条：lookup 无数据（权威下架）但缓存正展示时插入详情顶部告警；
   不整页推倒缓存——价格走势/叙事等子图依赖缓存渲染，且呆账品有提示即可 */
.detail-down-alert { background: rgba(255,92,92,.12); color: #ff8f8f; border: var(--bw) solid rgba(255,92,92,.35); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin: 8px 12px 0; line-height: 1.5; }


/* ===== AI 攻略三层成品（服务端拼装 html 直渲，详情页/预览共用）===== */
.gh-article { font-size: 13.5px; line-height: 1.85; color: var(--text-soft); }
.gh-article h2 { font-size: 14px; margin: 16px 0 6px; color: var(--gold); font-weight: 700; }
.gh-article p { margin: 6px 0; }
.gh-article b { color: var(--text); font-weight: 600; }
.gh-article b { background: rgba(var(--brand-rgb),.10); padding: 1px 4px; border-radius: 3px; } // 重点=品牌色底高亮（视觉轻于加粗黑字）
.gh-article ul { padding-left: 18px; margin: 6px 0; }
.gh-article .gh-anchor { background: rgba(var(--brand-rgb),.08); border-left: 3px solid var(--brand); padding: 6px 10px; margin: 8px 0; border-radius: 0 8px 8px 0; }
.gh-card { border: var(--bw) solid var(--line); border-radius: 10px; padding: 8px; margin: 10px 0; max-width: 380px; background: var(--card2); }
.gh-card a { display: flex; gap: 10px; text-decoration: none; width: 100%; align-items: center; }
.gh-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--img-bg); }
.gh-card .ghi { min-width: 0; flex: 1; }
.gh-card .ght { font-size: 12px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-card .ghp { font-size: 14px; font-weight: 700; color: var(--gold); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gh-detail { padding: 2px; }

/* 推荐理由=商品锚定五段（材质/规格/避坑/价格/总结，AI 生成商品专属）*/
.gy-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--gold-line); font-size: 13px; line-height: 1.6; }
.gy-row:last-child { border-bottom: 0; }
.gy-row i { flex-shrink: 0; font-style: normal; font-size: 11px; color: var(--on-gold); background: rgba(var(--brand-rgb),.16); border-radius: 5px; padding: 2px 7px; height: fit-content; white-space: nowrap; margin-top: 1px; }
.gy-row span { color: var(--text-soft); min-width: 0; }

/* 推荐理由=AI 小作文（80~150 字提炼，不分点）*/
.gy-text { font-size: 13.5px; line-height: 1.9; color: var(--text-soft); padding: 2px 0; }

/* 小作文 hashtag：站内搜索聚合链接 */
.gy-text .gy-tag { color: var(--brand-hi); text-decoration: none; font-weight: 600; }
.gy-text .gy-tag:active { opacity: .7; }


/* ===== 攻略排版优化：折叠渐变 + 段落呼吸感 ===== */
.gh-article { font-size: 13.5px; line-height: 2; color: var(--text-soft); }
.gh-article h2 { font-size: 15px; margin: 22px 0 10px; padding: 8px 0 8px 12px; border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb),.06); border-radius: 0 8px 8px 0; color: var(--text); font-weight: 700; }
.gh-article h3 { font-size: 13px; margin: 14px 0 6px; color: var(--brand-hi); font-weight: 600; }
.gh-article p { margin: 10px 0; }
.gh-article ul { padding-left: 18px; margin: 8px 0; }
.gh-article ul li { margin: 6px 0; }
.gh-article b { color: var(--text); }

/* 折叠态：默认显示 ~500px，渐变遮罩 + 展开钮 */
.gh-collapse { position: relative; max-height: 500px; overflow: hidden; }
.gh-collapse::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--card)); pointer-events: none; }
.gh-collapse.gh-open { max-height: none; overflow: visible; }
.gh-collapse.gh-open::after { display: none; }
.gh-toggle { display: block; width: 100%; padding: 12px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--brand-hi); background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; margin-top: 4px; }
.gh-toggle:active { opacity: .7; }

/* ===== 分享：详情页顶栏按钮 + 分享面板/海报（阶段一：无微信SDK，默认卡片+海报路线） ===== */
/* 分享圆钮（价格行尾，比价钮旁）：素面小圆钮，弱化存在感 */
/* 分享胶囊（价格行，紧随原价）：与比价钮同形态成对——比价=理性金、分享=中性沙 */
.prices .price-share { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 8px; padding: 5px 11px; border-radius: 15px; background: var(--gold-bg); border: var(--bw) solid var(--gold-line); color: var(--text2); font-size: 12px; font-weight: 600; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: color .15s; }
.prices .price-share:active { transform: scale(.96); color: var(--gold); }

.shr-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.shr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 16px 14px; }
.shr-act { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 6px 11px; border: 0; border-radius: 14px; background: var(--card2); color: var(--text); font-size: 12.5px; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.shr-act:active { transform: scale(.96); opacity: .85; }
.shr-act .ico { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; }
.shr-poster-box { padding: 2px 16px 4px; text-align: center; }
.shr-poster-box img { width: auto; max-width: 100%; max-height: 46vh; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.22); display: block; margin: 0 auto; background: #fff; } /* 手机端适配：高度按视口封顶保整张可见（宽自动等比） */
.shr-poster-box a.dl { display: inline-block; margin-top: 10px; padding: 8px 18px; border-radius: 20px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
/* 头部吸顶（抽屉内滚时标题+关闭钮常驻）+ 关闭钮圆形造型 */
.shr-drawer .shr-head { position: sticky; top: 0; z-index: 2; background: var(--card); border-radius: 16px 16px 0 0; }
.shr-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--card2); color: var(--text2); -webkit-tap-highlight-color: transparent; cursor: pointer; }
.shr-close:active { transform: scale(.9); color: var(--text); }
.shr-hint { font-size: 12px; color: var(--text3); padding: 6px 16px 16px; text-align: center; line-height: 1.7; }