/* =============================================================================
   电商 App 产品规划演示原型 · style.css
   内容：设计令牌 / 主题（浅色+暗黑）/ 页面框架 / 通用组件
   约定：移动端优先；桌面端居中展示手机壳 + 右侧产品备注面板
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  color-scheme: light;

  /* 品牌色（国内电商习惯：价格上涨用红、价格下降用绿） */
  --c-brand: #ff4d4f;
  --c-brand-2: #ff7a45;
  --c-accent: #7c5cff;
  --c-cyan: #3bc9ff;
  --c-success: #12b76a;
  --c-warn: #f79009;
  --c-danger: #e5484d;
  --grad-cta: linear-gradient(135deg, #ff7a45, #ff3b5c);
  --grad-brand: linear-gradient(135deg, #ff4d4f, #ff7a45);
  --grad-data: linear-gradient(135deg, #7c5cff, #3bc9ff);

  /* 中性色 */
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --surface-3: #f0f2f7;
  --text: #16181d;
  --text-2: #4b5563;
  --muted: #8a919e;
  --border: #e7e9ef;
  --line: #eff1f6;
  --mask: rgba(17, 20, 26, 0.42);
  --glass: rgba(255, 255, 255, 0.72);

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 18px 48px rgba(16, 24, 40, 0.18);

  /* 统一动效令牌（所有动效必须引用，不要写死时长/曲线）
     jelly：明显回弹，用于果冻开关 / 胶囊 / 按钮反馈
     fluid：长尾缓出，用于位移、展开、抽屉
     snap ：快速收尾带回弹，用于小元素落位
     line ：标准加速曲线，用于进度条等「不该有弹性」的线性变化 */
  --ease-jelly: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.4);
  --ease-line: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --dur-page: 600ms;

  /* 尺寸 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --bar-h: 52px;
  --tab-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dev-w: 390px;
  --dev-h: 844px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1013;
  --surface: #171a20;
  --surface-2: #1d2027;
  --surface-3: #23272f;
  --text: #edeff4;
  --text-2: #c3c9d4;
  --muted: #8b93a1;
  --border: #282c35;
  --line: #22252c;
  --mask: rgba(0, 0, 0, 0.62);
  --glass: rgba(23, 26, 32, 0.75);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, 0.62);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
s { color: var(--muted); }
::selection { background: rgba(255, 77, 79, 0.22); }

/* 焦点可见（无障碍：键盘操作必须看得见焦点） */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 隐藏滚动条但保留滚动能力 */
.scroll::-webkit-scrollbar, .hscroll::-webkit-scrollbar { width: 0; height: 0; }
.scroll, .hscroll { scrollbar-width: none; }

/* ---------- 3. 舞台布局：手机壳 + 侧栏 ---------- */
.stage { min-height: 100%; }

.device {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg);
}

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* 手机内容主体 */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 8px);
  scroll-behavior: smooth;
}

/* 全局浮层：粒子 / Toast / 抽屉（挂在手机屏幕内，桌面端不会溢出手机） */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
#fx-canvas { width: 100%; height: 100%; pointer-events: none; }

/* 侧栏：移动端隐藏，桌面端显示 */
.side-col, .notes-panel { display: none; }

/* ---------- 4. 顶部栏 ---------- */
.topbar {
  flex: 0 0 auto;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  position: relative;
  z-index: 30;
  transition: background var(--dur-base) var(--ease-fluid),
              border-color var(--dur-base) var(--ease-fluid),
              box-shadow var(--dur-base) var(--ease-fluid),
              backdrop-filter var(--dur-base) var(--ease-fluid);
}
.topbar.is-glass {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.06);
}

.icon-btn {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-2);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-snap), background var(--dur-fast);
}
.icon-btn:active { transform: scale(0.9); background: var(--surface-3); }
.icon-btn svg { width: 20px; height: 20px; }

.searchbar {
  flex: 1 1 auto;
  height: 34px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 13px;
  transition: transform var(--dur-base) var(--ease-jelly), background var(--dur-base);
}
.searchbar:active { transform: scale(0.98); }
.searchbar svg { width: 16px; height: 16px; }

.logo {
  font-weight: 800;
  letter-spacing: -0.4px;
  font-size: 17px;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-sub { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: 0.5px; }

/* ---------- 5. 底部 Tab（胶囊指示器见 fluid.css） ---------- */
.tabbar {
  flex: 0 0 auto;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
  z-index: 40;
}
.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  position: relative;
  z-index: 2;
  transition: color var(--dur-base) var(--ease-fluid), transform var(--dur-fast) var(--ease-snap);
}
.tab svg { width: 21px; height: 21px; transition: transform var(--dur-base) var(--ease-jelly); }
.tab:active svg { transform: scale(0.86); }
.tab.is-active { color: #fff; }
.tab.is-active svg { transform: translateY(-1px) scale(1.06); }
.tab .badge { position: absolute; top: 8px; margin-left: 22px; }

/* 数字角标（果冻弹跳见 jelly.css） */
.badge {
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 59, 92, 0.4);
  transform-origin: center;
}
.badge.is-dot { min-width: 8px; height: 8px; padding: 0; }

/* ---------- 6. 区块与排版 ---------- */
.section { margin: 10px 12px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 2px 10px;
}
.section-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.section-title small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.link-more { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.link-more svg { width: 13px; height: 13px; }

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 14px;
}
.card + .card { margin-top: 10px; }
.card-flat { background: var(--surface-2); box-shadow: none; border: 1px solid var(--border); }

h1.page-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
h2.block-title { font-size: 15px; font-weight: 800; }
h3.mini-title { font-size: 13px; font-weight: 700; }

.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.sm { font-size: 12px; }
.xs { font-size: 11px; }
.bold { font-weight: 700; }
.price { color: var(--c-brand); font-weight: 800; font-variant-numeric: tabular-nums; }
.price i { font-size: 12px; font-style: normal; font-weight: 700; }
.rise { color: var(--c-brand); }
.fall { color: var(--c-success); }
.tnum { font-variant-numeric: tabular-nums; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ellipsis3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 7. 布局工具类 ---------- */
.flex { display: flex; }
.col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.hidden { display: none !important; }
.relative { position: relative; }

/* 横向滚动容器（分类金刚区 / 秒杀 / 推荐） */
.hscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 12px 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---------- 8. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
  transition: transform var(--dur-fast) var(--ease-snap),
              border-radius var(--dur-base) var(--ease-jelly),
              box-shadow var(--dur-base) var(--ease-fluid),
              background var(--dur-base);
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.96); border-radius: 38% 62% 58% 42% / 52% 48% 56% 44%; }
.btn-primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 59, 92, 0.28);
}
.btn-accent { background: var(--grad-data); color: #fff; box-shadow: 0 6px 18px rgba(124, 92, 255, 0.26); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-dark { background: var(--text); color: var(--bg); }
.btn-block { width: 100%; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 48px; font-size: 15px; }
.btn[disabled], .btn.is-disabled {
  opacity: 0.5; pointer-events: none; filter: saturate(0.5);
}

/* 悬浮操作条（详情页加购 / 结算页提交） */
.actionbar {
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  z-index: 35;
}

/* ---------- 9. 商品卡 ---------- */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-fluid), box-shadow var(--dur-base);
}
.pcard:active { transform: scale(0.98); }
.pcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-3);
  overflow: hidden;
}
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.pcard-tag {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.pcard-tag.tag-plain { background: rgba(0, 0, 0, 0.55); }
.pcard-body { padding: 8px 9px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.pcard-title { font-size: 13px; font-weight: 600; line-height: 1.35; min-height: 35px; }
.pcard-meta { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--muted); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.pcard-price { font-size: 15px; }
.pcard-price s { font-size: 10px; margin-left: 3px; }

/* 收藏按钮（爱心粒子触发点） */
.fav-btn {
  position: absolute; right: 5px; top: 5px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  color: var(--text-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-snap), color var(--dur-base);
}
.fav-btn svg { width: 15px; height: 15px; }
.fav-btn:active { transform: scale(0.84); }
.fav-btn.is-on { color: var(--c-brand); }
.fav-btn.is-on svg { fill: currentColor; }
[data-theme="dark"] .fav-btn { background: rgba(0, 0, 0, 0.5); }

/* 列表形态（购物车 / 订单 / 收藏复用） */
.prow { display: flex; gap: 10px; padding: 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.prow-media { width: 84px; height: 84px; flex: 0 0 auto; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); }
.prow-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. 列表单元格 / 表单行 ---------- */
.cell {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.cell:active { background: var(--surface-3); }
.cell + .cell { border-top: 1px solid var(--line); }
.cell-icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text-2);
}
.cell-icon svg { width: 16px; height: 16px; }
.cell-main { flex: 1 1 auto; min-width: 0; }
.cell-title { font-size: 14px; font-weight: 600; }
.cell-desc { font-size: 11px; color: var(--muted); }
.cell-extra { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.cell-extra svg { width: 14px; height: 14px; }
.cell-group { margin: 10px 12px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.cell-group > .cell:first-child { border-top: 0; }

/* ---------- 个人中心入口分组（第三轮） ----------
   分组标题放在 .cell-group 外面：cell-group 有 overflow:hidden 和圆角，
   标题塞进去会被裁掉或者把首行 cell 的圆角破坏掉。 */
.entry-group { margin: 14px 12px 0; }
.entry-group > .group-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 0 4px 8px; letter-spacing: .2px;
}
.entry-group > .cell-group { margin: 0; }
.entry-group:last-child { margin-bottom: 12px; }

.field {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
}
.field + .field { border-top: 1px solid var(--line); }
.field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.field-input {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.field-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
  outline: none;
}
.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1 1 0; }

/* 块级表单输入：抽屉与页面内联表单共用。
   .field-input 是紧凑行内高度（38px），.input 用于块级 / textarea，
   两者不要互相复用，否则 textarea 会被 38px 压成一条缝。 */
.input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
  outline: none;
}
textarea.input { resize: vertical; line-height: 1.55; }
.input.is-bad { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.12); }
.input.is-ok { border-color: var(--c-success); }

/* 协议勾选（注册页）。不用原生 checkbox：各内核下它的尺寸、圆角、
   选中色差异很大，在一套手调的视觉里会显得「脏」，所以自己画一个。 */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 0;
  text-align: left;
  cursor: pointer;
}
.agree-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-fluid),
              border-color var(--dur-fast) var(--ease-fluid),
              color var(--dur-fast) var(--ease-fluid);
}
.agree-box svg { width: 12px; height: 12px; }
.agree.is-on .agree-box { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.agree.is-bad .agree-box { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.14); }
.agree-text { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.agree-text b { color: var(--c-accent); font-weight: 600; }

/* 底部抽屉里的输入区（CHECKBOX 行） */
.check-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.check-row + .check-row { border-top: 1px solid var(--line); }

/* ---------- 11. 统计 / 数据卡 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.stat-label { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.stat-value { font-size: 21px; font-weight: 800; letter-spacing: -0.6px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-foot { font-size: 11px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }

/* ---------- 12. 标签 / 角标 / 胶囊 ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.pill-brand { background: rgba(255, 77, 79, 0.12); color: var(--c-brand); }
.pill-accent { background: rgba(124, 92, 255, 0.14); color: var(--c-accent); }
.pill-success { background: rgba(18, 183, 106, 0.14); color: var(--c-success); }
.pill-warn { background: rgba(247, 144, 9, 0.15); color: var(--c-warn); }

/* 分段控件 / 筛选 chips */
.segmented { display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 30px;
  padding: 0 13px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-base), background var(--dur-base),
              border-radius var(--dur-slow) var(--ease-jelly), box-shadow var(--dur-base);
}
.chip.is-active { background: rgba(255, 77, 79, 0.12); color: var(--c-brand); }
.chip svg { width: 13px; height: 13px; }

/* 排序条 */
.sortbar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.sort-item {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; color: var(--text-2); font-weight: 600;
  transition: color var(--dur-base);
}
.sort-item.is-active { color: var(--c-brand); font-weight: 800; }
.sort-item svg { width: 12px; height: 12px; transition: transform var(--dur-base) var(--ease-jelly); }
.sort-item.is-desc svg { transform: rotate(180deg); }

/* ---------- 13. 面包屑 / 页面头 ---------- */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); padding: 0 2px; }
.crumb svg { width: 11px; height: 11px; }

.page-head { padding: 14px 12px 4px; }
.page-head .desc { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- 14. 侧栏（桌面端） ---------- */
@media (min-width: 1024px) {
  body { background:
      radial-gradient(1100px 620px at 12% -10%, rgba(124, 92, 255, 0.10), transparent 60%),
      radial-gradient(900px 520px at 92% 0%, rgba(255, 122, 69, 0.10), transparent 60%),
      var(--bg); }

  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dev-w) minmax(0, 400px);
    gap: 26px;
    align-items: start;
    padding: 24px 26px;
    max-width: 1560px;
    margin: 0 auto;
  }

  .device {
    width: var(--dev-w);
    height: min(var(--dev-h), calc(100dvh - 48px));
    padding: 12px;
    border-radius: 46px;
    background: linear-gradient(160deg, #2b2f38, #14161b 60%);
    box-shadow: 0 40px 90px rgba(16, 24, 40, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
  }
  .device::before {
    content: "";
    position: absolute; left: 50%; top: 20px;
    transform: translateX(-50%);
    width: 106px; height: 24px;
    border-radius: var(--r-pill);
    background: #0a0b0e;
    z-index: 5;
  }
  .device-screen {
    border-radius: 34px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .topbar { padding-top: 16px; height: calc(var(--bar-h) + 16px); }
  /* 桌面端手机壳顶栏更高（含刘海留白），Toast 的起始位置同步下移 */
  .toast-stack { top: calc(var(--bar-h) + 26px); }

  .side-col, .notes-panel {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

/* ---------- 15. 侧栏内容样式 ---------- */
.side-brand { display: flex; align-items: center; gap: 10px; }
.side-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--grad-cta);
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 17px;
  box-shadow: 0 8px 20px rgba(255, 59, 92, 0.3);
}
.side-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; }
.side-sub { font-size: 12px; color: var(--muted); }

.side-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  transition: transform var(--dur-fast) var(--ease-snap), border-color var(--dur-base), color var(--dur-base);
}
.side-nav a:hover { transform: translateY(-2px); border-color: var(--c-accent); color: var(--text); }
.side-nav a.is-current { border-color: var(--c-brand); color: var(--c-brand); background: rgba(255, 77, 79, 0.06); }
.side-nav .idx { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

.feature-list { display: flex; flex-direction: column; gap: 8px; }
.feature-item { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); }
.feature-item .dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto;
  background: var(--grad-data);
}
.kv { display: grid; grid-template-columns: 88px 1fr; gap: 6px 10px; font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- 16. 产品备注面板（右侧） ---------- */
.notes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-2);
}
.notes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.notes-head h2 { font-size: 15px; font-weight: 800; color: var(--text); }
.notes-tag { font-size: 10px; }
.notes-block { padding: 11px 0; border-bottom: 1px dashed var(--border); }
.notes-block:last-child { border-bottom: 0; }
.notes-block h3 {
  font-size: 12px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.notes-block h3 .n {
  width: 16px; height: 16px; border-radius: 5px;
  background: var(--surface-3); color: var(--muted);
  font-size: 10px; display: grid; place-items: center; flex: 0 0 auto;
}
.notes-block ul { display: flex; flex-direction: column; gap: 4px; }
.notes-block li { position: relative; padding-left: 12px; }
.notes-block li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); opacity: 0.7;
}
.notes-block p { margin: 0; }
.notes-block .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.notes-block .flow span {
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--surface-3); font-size: 11px; color: var(--text-2);
}
.notes-block .flow i { color: var(--muted); font-style: normal; font-size: 10px; }
.prio { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.prio span { padding: 2px 7px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; }
.prio .p0 { background: rgba(229, 72, 77, 0.14); color: var(--c-danger); }
.prio .p1 { background: rgba(247, 144, 9, 0.16); color: var(--c-warn); }
.prio .p2 { background: var(--surface-3); color: var(--muted); }

/* ---------- 17. 抽屉 / 模态（结构层） ---------- */
.drawer-mask {
  position: absolute; inset: 0;
  background: var(--mask);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--dur-base) var(--ease-fluid);
}
.drawer-mask.is-in { opacity: 1; }

.drawer {
  position: absolute;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 2;
  box-shadow: var(--shadow-3);
}
.drawer-right {
  top: 0; right: 0; bottom: 0;
  width: min(88%, 380px);
  border-radius: 22px 0 0 22px;
  transform: translateX(102%);
  transition: transform var(--dur-slow) var(--ease-jelly);
}
.drawer-right.is-in { transform: translateX(0); }
.drawer-bottom {
  left: 0; right: 0; bottom: 0;
  max-height: 84%;
  border-radius: 22px 22px 0 0;
  transform: translateY(102%);
  transition: transform var(--dur-slow) var(--ease-jelly);
}
.drawer-bottom.is-in { transform: translateY(0); }
.drawer.is-drag { transition: none; }

.drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  position: relative;
}
.drawer-head h2 { font-size: 15px; font-weight: 800; flex: 1 1 auto; }
.drawer-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border);
}
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 16px; }
.drawer-foot {
  flex: 0 0 auto;
  padding: 10px 16px calc(12px + var(--safe-b));
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}

.modal {
  position: absolute; left: 50%; top: 50%;
  width: min(84%, 320px);
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 18px 16px 14px;
  pointer-events: auto;
  z-index: 3;
  transition: transform var(--dur-base) var(--ease-jelly), opacity var(--dur-base);
}
.modal.is-in { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ---------- 18. Toast ---------- */
.toast-stack {
  position: absolute;
  left: 0; right: 0;
  /* 从顶栏下方开始，避免 Toast 盖住顶栏（曾出现：引导 Toast 恰好挡住它指向的「?」按钮） */
  top: calc(var(--bar-h) + 10px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 14px;
  z-index: 80;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(24, 27, 33, 0.94);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  will-change: transform, opacity;
}
[data-theme="dark"] .toast { background: rgba(48, 53, 62, 0.96); }
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; }
.toast-close { color: rgba(255, 255, 255, 0.6); display: grid; place-items: center; }
.toast-body { min-width: 0; }

/* ---------- 19. 加载条 / 骨架屏占位 / 空状态 ---------- */
.loadbar {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
}
.loadbar.is-on { opacity: 1; }
.loadbar i {
  display: block; height: 100%; width: 0;
  background: var(--grad-cta);
  box-shadow: 0 0 10px rgba(255, 59, 92, 0.6);
  /* 进度条是线性推进，用标准曲线而不是回弹曲线 */
  transition: width var(--dur-base) var(--ease-line);
}

.skeleton { background: var(--surface-3); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.sk-card { background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 42px 24px;
  text-align: center;
  color: var(--muted);
}
/* 空态独立容器（第三轮）：[hidden] 必须显式写，否则会被上面的 display 覆盖 */
.list-empty { display: block; }
.list-empty[hidden] { display: none; }
.empty svg { width: 96px; height: 96px; }
.empty h2 { font-size: 15px; font-weight: 800; color: var(--text); }
.empty p { font-size: 12px; max-width: 240px; }

/* ---------- 20. 内容页排版（about / prd） ---------- */
.doc { padding: 4px 14px 20px; }
.doc h2 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; letter-spacing: -0.3px; }
.doc h3 { font-size: 14px; font-weight: 800; margin: 16px 0 6px; }
.doc p { font-size: 13px; color: var(--text-2); margin: 8px 0; }
.doc ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.doc li { font-size: 13px; color: var(--text-2); padding-left: 14px; position: relative; }
.doc li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--grad-cta);
}
/* ---------- 目录（第三轮：给 about 长文加锚点导航） ---------- */
.toc {
  margin: 10px 14px 0; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2);
}
.toc-title { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .2px; margin-bottom: 8px; }
.toc ol { display: flex; flex-direction: column; gap: 7px; counter-reset: toc; }
.toc li { font-size: 13px; line-height: 1.5; }
.toc a { display: flex; gap: 6px; align-items: baseline; color: var(--text-2); }
.toc a:active { color: var(--c-brand); }
.toc a::before { counter-increment: toc; content: counter(toc) "."; flex: 0 0 auto; font-size: 11px; color: var(--muted); }
/* 锚点跳转时给标题留出上边距，否则 h2 会贴在滚动容器顶部 */
.doc h2 { scroll-margin-top: 14px; }

.doc table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0; }
.doc th, .doc td { padding: 8px 9px; text-align: left; border-bottom: 1px solid var(--line); }
.doc th { background: var(--surface-2); font-weight: 700; color: var(--text); }
.doc code {
  background: var(--surface-3); padding: 1px 5px; border-radius: 5px;
  font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.doc blockquote {
  margin: 10px 0; padding: 10px 12px;
  border-left: 3px solid var(--c-brand);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------- 21. 深色模式细节修正 ---------- */
[data-theme="dark"] .pcard { background: var(--surface); }
[data-theme="dark"] .tab.is-active { color: #fff; }
[data-theme="dark"] img { filter: brightness(0.94); }

/* ---------- 22. 响应式断点 ---------- */
/* 平板：768px 左右，内容加宽但仍是手机形态 */
@media (min-width: 768px) and (max-width: 1023px) {
  .device { max-width: 520px; margin: 0 auto; box-shadow: var(--shadow-2); }
  .grid-2 { gap: 14px; }
}

/* ---------- 23. 页面级小组件补充 ---------- */
/* 无障碍跳转链接：默认移出视口，键盘聚焦时出现 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-2);
}
.skip-link:focus { left: 12px; }

/* 分类页左侧一级类目（点击时伴随流体圆角形变） */
.cat-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 2px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  position: relative;
  transition: background var(--dur-base) var(--ease-fluid),
              color var(--dur-base),
              border-radius var(--dur-slow) var(--ease-jelly);
}
.cat-item svg { width: 16px; height: 16px; }
.cat-item:active { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
.cat-item.is-active { background: var(--surface); color: var(--c-brand); box-shadow: var(--shadow-1); }
.cat-item.is-active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--grad-cta);
}

/* chips 里的删除小按钮（搜索历史） */
.chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transition: background var(--dur-fast);
}
.chip-del:active { background: var(--surface); }

/* Banner 轮播项 */
.banner-slide { position: relative; display: block; }
.banner-slide.is-active { animation: pageIn var(--dur-slow) var(--ease-fluid) both; }

/* 详情页操作条上的收藏按钮（选中态变红并填充爱心） */
.btn[data-fav].is-on { color: var(--c-brand); border-color: var(--c-brand); background: rgba(255, 77, 79, 0.08); }
.btn[data-fav].is-on svg { fill: currentColor; }

/* ---------- 24. 响应式断点（超宽屏） ---------- */
@media (min-width: 1440px) {
  :root { --dev-w: 400px; }
  .stage { grid-template-columns: minmax(0, 1fr) var(--dev-w) minmax(0, 440px); gap: 34px; padding: 28px 34px; }
}

/* =============================================================================
   25. 评价 / 积分 / 券包 / 售后 组件（第三批页面）
   ========================================================================== */

/* --- 星级 --- */
.star-row { display: inline-flex; align-items: center; gap: 1px; color: var(--border); }
.star-row svg { fill: currentColor; stroke: none; }
.star-row span.is-on { color: #ff9500; }
.star-row.is-lg span svg { width: 18px; height: 18px; }

/* --- 评分分布 --- */
.rv-dist { display: flex; flex-direction: column; gap: 6px; }
.rv-dist-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.rv-dist-row .lv { flex: 0 0 30px; }
.rv-dist-row .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rv-dist-row .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb020, #ff7a45);
  transition: width var(--dur-slow) var(--ease-fluid); }
.rv-dist-row .pc { flex: 0 0 34px; text-align: right; }

/* --- 评价条目 --- */
.rv-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rv-item:last-child { border-bottom: 0; }
.rv-head { display: flex; align-items: center; gap: 8px; }
.rv-head .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-2); }
.rv-body { font-size: 13px; line-height: 1.62; color: var(--text); margin-top: 8px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rv-media { display: flex; gap: 6px; margin-top: 8px; }
.rv-media span { width: 62px; height: 62px; border-radius: 8px; overflow: hidden; display: block;
  border: 1px solid var(--border); }
.rv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-media .more { display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--surface-2); }
.rv-append, .rv-reply { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.6; }
.rv-append { background: rgba(255, 122, 69, 0.08); color: var(--text-2); }
.rv-reply { background: var(--surface-2); color: var(--text-2); }
.rv-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--muted); }

/* --- 时间轴（订单状态 / 物流 / 售后流程） --- */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-node { position: relative; padding: 0 0 14px; }
.tl-node:last-child { padding-bottom: 0; }
.tl-node::before { content: ''; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border); }
.tl-node.is-done::before { background: var(--c-brand); border-color: var(--c-brand); }
.tl-node.is-current::before { background: var(--surface); border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(255, 77, 79, .16); }
.tl-node .t { font-size: 13px; font-weight: 600; }
.tl-node.is-todo .t, .tl-node.is-todo .d { color: var(--muted); font-weight: 400; }
.tl-node .d { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* --- 积分 --- */
.pt-hero { background: var(--grad-cta); color: #fff; border-radius: var(--r-lg); padding: 16px; position: relative; overflow: hidden; }
.pt-hero .num { font-size: 32px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.pt-hero .sub { font-size: 11px; opacity: .86; }
.pt-hero .glow { position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); }
.pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pt-grid > div { background: rgba(255, 255, 255, .16); border-radius: 10px; padding: 8px; text-align: center; }
.pt-log-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pt-log-row:last-child { border-bottom: 0; }
.pt-log-row .amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.pt-log-row .amt.is-earn { color: var(--c-brand); }
.pt-log-row .amt.is-spend { color: var(--muted); }
.pt-task { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pt-task:last-child { border-bottom: 0; }
.pt-good { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.pt-good .dot { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; margin-bottom: 6px; }

/* --- 券卡（领券中心） --- */
.cc-card { display: flex; gap: 12px; align-items: stretch; padding: 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
.cc-card::before { content: ''; position: absolute; left: 76px; top: 0; bottom: 0; border-left: 1px dashed var(--border); }
.cc-card.is-taken { opacity: .6; }
.cc-card .val { flex: 0 0 68px; text-align: center; display: flex; flex-direction: column; justify-content: center; color: var(--c-brand); }
.cc-card .val b { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.cc-card .bar { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.cc-card .bar i { display: block; height: 100%; background: var(--grad-cta); }

/* --- 设置分组 --- */
.set-group-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .6px;
  margin: 14px 2px 6px; }

/* --- 搜索高亮与相关搜索 --- */
mark { background: rgba(255, 77, 79, .16); color: var(--c-brand); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.kw-reco { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-reco .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.search-summary .n { color: var(--c-brand); font-weight: 800; font-variant-numeric: tabular-nums; }
.did-you-mean { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- 个人信息 --- */
.pf-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pf-row:last-child { border-bottom: 0; }
.pf-row .lbl { flex: 0 0 76px; font-size: 13px; color: var(--text-2); }
.pf-row .val { flex: 1; font-size: 13px; text-align: right; color: var(--text); }
.pf-avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-cta); color: #fff; font-size: 24px; font-weight: 800; }


/* =============================================================================
   25.5 账户中心 / 搜索增强 / 评价与券包（第二轮补全）
   ========================================================================== */

/* --- 搜索结果摘要与关键词高亮 --- */
.search-summary { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; }
.search-summary .ss-main { font-size:13px; line-height:1.55; min-width:0; }
.kw-reco { color:var(--c-brand); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
mark { background:rgba(255,77,79,.15); color:var(--c-brand); border-radius:3px;
  padding:0 1px; font-weight:700; font-style:normal; }

/* --- 搜索热榜 --- */
.rk-row { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text);
  font:inherit; font-size:13px; text-align:left; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-fluid); }
.rk-row:last-child { border-bottom:0; }
.rk-row:active { background:var(--surface-2); }
.rk-no { width:20px; height:20px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center;
  font-size:11px; font-weight:800; background:var(--surface-2); color:var(--muted); }
.rk-no.is-top { background:var(--grad-cta); color:#fff; }
.rk-word { font-weight:600; }
.rk-up { color:#ff4d4f; font-size:10px; }
.rk-down { color:#12b76a; font-size:10px; }
.rk-flat { color:var(--muted); font-size:10px; }
.rk-num { font-size:11px; color:var(--muted); }

/* --- 搜索历史分组 --- */
.his-group { display:flex; align-items:flex-start; gap:8px; }
.his-label { flex:0 0 auto; font-size:11px; color:var(--muted); padding-top:5px; }

/* --- 星级 / 评价摘要 / 评分分布 --- */
.star-row { display:inline-flex; gap:1px; color:#f7b733; vertical-align:middle; }
.star-row span { display:inline-flex; opacity:.26; }
.star-row span.is-on { opacity:1; }
.rv-sum { display:flex; gap:14px; align-items:center; }
.rv-score { flex:0 0 auto; text-align:center; min-width:92px; }
.rv-score b { display:block; font-size:30px; font-weight:900; letter-spacing:-1.2px; line-height:1.05; }
.rv-bars { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.rv-bar-row { display:flex; align-items:center; gap:6px; font-size:10px; }
.rv-bar { flex:1; height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.rv-bar i { display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#ffb020,#ff7a45);
  transition:width var(--dur-slow) var(--ease-fluid); }
.rv-reply { background:var(--surface-2); border-radius:10px; padding:7px 9px; }
.rv-media { display:flex; gap:6px; margin-top:6px; }
.rv-media i { width:40px; height:40px; border-radius:8px; display:block;
  background:linear-gradient(135deg,var(--surface-2),var(--border)); }

/* --- 订单 / 券包统计卡 --- */
.os-card { background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:10px 8px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.os-card b { font-size:16px; font-weight:900; letter-spacing:-.4px; }
.order-stat { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }

/* --- 商品卡角标（搜索结果 / 推荐位） --- */
.pcard-badge { position:absolute; left:6px; bottom:6px; z-index:3; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:99px; color:#fff; background:rgba(12,14,20,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }