/* =============================================================================
 * 比价宝 · 设计系统
 *
 * 视觉方向：深空蓝底 + 电光青渐变 + 玻璃拟态卡片。
 * 三条原则：
 *   1. 价格是主角——大字号、等宽数字、高对比色，一眼看清；
 *   2. 明/暗双主题 + 三档字号，覆盖不同光线环境与不同年龄的用户；
 *   3. 所有可点区域 >= 44px，满足触控与无障碍的最低要求。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 设计令牌
 * ------------------------------------------------------------------------ */

:root {
  /* 品牌渐变：电光青 -> 靛蓝，用于主按钮、强调与进度 */
  --accent-1: #22D3EE;
  --accent-2: #6366F1;
  --accent-grad: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);

  /* 价格用玫红：明暗主题下都有足够对比度，同时保留"促销"的语义 */
  --price: #FF5C7C;
  --up: #FF5C7C;
  --down: #34D399;
  --warn: #FBBF24;

  --radius-sm: .5rem;
  --radius: .875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --tap: 2.75rem;              /* 最小可点尺寸 44px */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 字号档位：视力不佳的用户可在「我的」里切换，整个界面按比例放大 */
:root[data-font="normal"] { --fs: 15px; }
:root[data-font="large"]  { --fs: 16.5px; }
:root[data-font="huge"]   { --fs: 18px; }

:root[data-theme="dark"] {
  /* 原生控件跟随主题。这里会用到 <input type="time">（通知设置的免打扰时段），
     不声明 color-scheme 时它弹出的是**浅色**时间选择器，深色页面里非常突兀。 */
  color-scheme: dark;
  --bg: #070B14;
  --bg-outer: #04060C;
  --glass: rgba(255, 255, 255, .045);
  --glass-strong: rgba(255, 255, 255, .075);
  --solid: #0E1526;
  --solid-2: #131B30;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .18);
  --text: #E9EEF9;
  --text-2: #9AA7BF;
  --text-3: #64708A;
  --accent-soft: rgba(34, 211, 238, .14);
  --price-soft: rgba(255, 92, 124, .14);
  --shadow: 0 10px 34px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --glow-a: rgba(34, 211, 238, .22);
  --glow-b: rgba(99, 102, 241, .20);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FC;
  --bg-outer: #E6EBF5;
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;
  --solid: #FFFFFF;
  --solid-2: #F7F9FD;
  --border: #E6EBF5;
  --border-strong: #CFD8E8;
  --text: #0E1729;
  --text-2: #566380;
  --text-3: #8B97AE;
  --accent-soft: rgba(34, 211, 238, .14);
  --price-soft: rgba(224, 52, 79, .10);
  --shadow: 0 8px 28px rgba(16, 32, 64, .10);
  --shadow-sm: 0 2px 8px rgba(16, 32, 64, .07);
  --glow-a: rgba(34, 211, 238, .30);
  --glow-b: rgba(99, 102, 241, .22);
  --price: #E0344F;
  --up: #E0344F;
}

/* ---------------------------------------------------------------------------
 * 2. 基础
 * ------------------------------------------------------------------------ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: var(--fs); }

body {
  margin: 0;
  background: var(--bg-outer);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 价格、销量等数字统一等宽，列表上下对齐更整齐 */
.num, .price, .rating-score, .offer-price, .chart-stat b, .hero-stat b, .detail-price-box .big {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* textarea 与 button/input/select 一样默认不继承颜色，漏掉它会出现
   "深色皮肤下输入框是黑字"的问题（后台公告表单实测踩到过） */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

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

.hidden { display: none !important; }
.muted { color: var(--text-3); }

/* ---------------------------------------------------------------------------
 * 3. 外壳布局
 * ------------------------------------------------------------------------ */

.phone {
  position: relative;
  max-width: 30rem;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, .28);
}

.app-main {
  position: relative;
  min-height: 100vh;
  padding-bottom: 5.5rem;
}

/* 详情页有固定底部操作栏，需要更大的底部留白 */
.app-main.has-bottom-bar { padding-bottom: 6.5rem; }

/* 顶部极光：科技感的主要来源，纯 CSS 实现，无图片依赖 */
.aurora {
  position: absolute;
  inset: -6rem -2rem auto -2rem;
  height: 22rem;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 34%, var(--glow-a) 0%, transparent 70%),
    radial-gradient(42% 50% at 80% 22%, var(--glow-b) 0%, transparent 72%);
  filter: blur(18px);
  z-index: 0;
}

/* 离线提示条 */
.offline-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: .55rem 1rem;
  background: var(--warn);
  color: #3A2A00;
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 4. 通用组件
 * ------------------------------------------------------------------------ */

.section {
  position: relative;
  margin: .7rem .75rem 0;
  padding: 1.05rem 1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .85rem;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.section-title .hint { font-size: .78rem; font-weight: 400; color: var(--text-3); }

/* 主按钮 */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--accent-grad);
  color: #04121A;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 .4rem 1.1rem rgba(34, 211, 238, .28);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}

:root[data-theme="light"] .btn-primary { color: #052A33; }
.btn-primary:not(:disabled):active { transform: scale(.975); box-shadow: 0 .2rem .6rem rgba(34, 211, 238, .24); }
.btn-primary:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }

/* 胶囊筛选项 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .3rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: .84rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}

.chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
  font-weight: 700;
}

/* 小标签 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: .1rem .42rem;
  border-radius: var(--radius-sm);
  background: var(--price-soft);
  color: var(--price);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tag.plain {
  background: var(--glass-strong);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 500;
}

/* 输入框 */
.input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 .9rem;
  background: var(--solid-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 价格排版 */
.price { color: var(--price); font-weight: 800; letter-spacing: -.01em; }
.price .cur { font-size: .76em; font-weight: 700; }
.price .num { font-size: 1.42em; }
.price .dec { font-size: .76em; font-weight: 700; }

/* 空态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 3.4rem 1.6rem;
  color: var(--text-3);
  font-size: .9rem;
  line-height: 1.75;
  text-align: center;
}

.empty .big { font-size: 2.6rem; line-height: 1; opacity: .5; }

/* 骨架屏 */
.skeleton { display: flex; flex-direction: column; gap: .65rem; padding: .75rem; }

.sk-card {
  height: 7.4rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--glass) 20%, var(--glass-strong) 40%, var(--glass) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.35s linear infinite;
}

@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } }

/* Toast */
.toast-wrap {
  position: fixed;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: 18rem;
  padding: .7rem 1.05rem;
  border-radius: var(--radius);
  background: rgba(12, 18, 32, .95);
  border: 1px solid var(--border-strong);
  color: #F2F6FF;
  font-size: .9rem;
  line-height: 1.55;
  text-align: left;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  animation: pop .2s var(--ease);
}

.toast .ti { flex: 0 0 auto; font-size: 1rem; }
.toast.ok  { border-color: rgba(52, 211, 153, .55); }
.toast.err { border-color: rgba(255, 92, 124, .6); }

@keyframes pop { from { opacity: 0; transform: translateY(.5rem) scale(.96); } to { opacity: 1; transform: none; } }

/* 顶部导航栏（详情页等非 Tab 页面） */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 3rem;
  padding: 0 .35rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.3rem;
  transition: background .16s var(--ease);
}

.nav-btn:active { background: var(--glass-strong); }

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部 Tab */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  width: 100%;
  max-width: 30rem;
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 50;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 3.3rem;
  padding: .4rem 0 .45rem;
  font-size: .7rem;
  color: var(--text-3);
  transition: color .16s var(--ease);
}

.tab .ic { font-size: 1.25rem; line-height: 1.2; opacity: .75; }
.tab.active { color: var(--accent-1); font-weight: 800; }
.tab.active .ic { opacity: 1; }

/* ---------------------------------------------------------------------------
 * 5. 首页
 * ------------------------------------------------------------------------ */

.hero { position: relative; padding: 1.1rem 1rem 1.35rem; overflow: hidden; }

.hero-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  z-index: 1;
}

.logo {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo small {
  display: block;
  margin-top: .1rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .02em;
  -webkit-text-fill-color: var(--text-3);
}

.hero-user {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.1rem;
  padding: .25rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: .76rem;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
}

.searchbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 1;
  transition: border-color .16s var(--ease);
}

.searchbar:active { border-color: var(--accent-1); }
.searchbar .icon { font-size: 1rem; opacity: .8; }

/* 首页数据概览：先让用户相信"这个工具确实有用" */
.hero-stats { position: relative; display: flex; gap: .5rem; margin-top: .85rem; z-index: 1; }

.hero-stat {
  flex: 1;
  padding: .6rem .5rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
  text-align: center;
}

.hero-stat b { display: block; font-size: 1.08rem; font-weight: 800; }
.hero-stat span { font-size: .68rem; color: var(--text-3); }

.cat-grid {
  display: flex;
  gap: .6rem;
  padding: .9rem .75rem .2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-grid::-webkit-scrollbar { display: none; }

.cat-item {
  flex: 0 0 auto;
  min-width: 4.9rem;
  padding: .85rem .6rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease);
}

.cat-item:active { transform: scale(.96); border-color: var(--accent-1); }
.cat-item .ic { display: block; margin-bottom: .3rem; font-size: 1.45rem; }
.cat-item .nm { font-size: .76rem; color: var(--text-2); }

.hot-wrap { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem .75rem .2rem; }

/* ---------------------------------------------------------------------------
 * 6. 商品卡片
 * ------------------------------------------------------------------------ */

.card-list { display: flex; flex-direction: column; gap: .7rem; padding: .8rem .75rem 0; }

.p-card {
  display: flex;
  gap: .85rem;
  padding: .85rem;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease);
  animation: rise .3s var(--ease) both;
}

.p-card:active { transform: scale(.985); border-color: var(--accent-1); }

@keyframes rise { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

.p-thumb {
  position: relative;
  flex: 0 0 5.6rem;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--solid-2);
  border: 1px solid var(--border);
}

.p-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.p-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .4rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.42;
}

.p-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.p-meta { margin-bottom: .45rem; font-size: .74rem; color: var(--text-3); }

.p-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
}

.p-listprice { margin-left: .35rem; font-size: .74rem; color: var(--text-3); text-decoration: line-through; }

.fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: -.35rem -.35rem -.35rem 0;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-3);
  transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}

.fav-btn:active { transform: scale(.88); }
.fav-btn.on { color: var(--price); background: var(--price-soft); }

/* ---------------------------------------------------------------------------
 * 7. 搜索页
 * ------------------------------------------------------------------------ */

.search-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .7rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.search-header .back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-left: -.4rem;
  border-radius: 50%;
  font-size: 1.35rem;
  color: var(--text-2);
}

.search-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 2.5rem;
  padding: 0 .9rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
}

.search-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .95rem; }
.search-input input::placeholder { color: var(--text-3); }

.btn-search { min-height: var(--tap); padding: 0 .35rem; font-size: .92rem; font-weight: 800; color: var(--accent-1); }

.filter-bar {
  position: sticky;
  top: 3.7rem;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: .55rem .85rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .84rem;
  color: var(--text-2);
}

.filter-bar .item { display: inline-flex; align-items: center; gap: .2rem; min-height: 1.9rem; cursor: pointer; }
.filter-bar .item.active { color: var(--accent-1); font-weight: 800; }
.filter-bar .item .arrow { font-size: .62rem; opacity: .75; }

.chip-row { display: flex; gap: .5rem; padding: .6rem .75rem; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
 * 8. 商品详情
 * ------------------------------------------------------------------------ */

.detail-hero-card {
  position: relative;
  margin: .7rem .75rem 0;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, var(--accent-soft), transparent 46%),
    var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.detail-hero { display: flex; gap: 1rem; }
.detail-hero .p-thumb { flex: 0 0 6.6rem; width: 6.6rem; height: 6.6rem; }

.detail-price-box { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.detail-price-box .label { font-size: .76rem; color: var(--text-3); }

.detail-price-box .big {
  margin: .1rem 0 .25rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--price);
}

.detail-price-box .big small { margin-right: .1rem; font-size: .55em; font-weight: 700; }
.detail-price-box .sub { font-size: .76rem; color: var(--text-3); }

.detail-title { margin-top: .9rem; font-size: 1.02rem; font-weight: 800; line-height: 1.45; }

.attr-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }

.attr {
  padding: .22rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: .76rem;
  color: var(--text-2);
}

/* 比价行 */
.offer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
}

.offer:last-child { border-bottom: 0; }

.offer.lowest {
  position: relative;
  margin: 0 -1rem;
  padding: .8rem 1rem;
  background: linear-gradient(90deg, var(--accent-soft), transparent 85%);
  border-bottom-color: transparent;
}

.offer.lowest::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  bottom: .55rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-grad);
}

.plat { flex: 0 0 3.6rem; text-align: center; }

.plat-badge {
  display: block;
  padding: .18rem 0;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  /* 部分平台品牌色本身很深（如抖音 #25292e），在暗色背景上会糊成一片，
     统一加一层极淡的内描边保证在任何主题下都能看清 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.offer-main { flex: 1; min-width: 0; }

.offer-shop {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-sub { margin-top: .2rem; font-size: .72rem; line-height: 1.5; color: var(--text-3); }
.offer-price { flex: 0 0 auto; text-align: right; }

.offer-price .now { font-size: 1.16rem; font-weight: 800; color: var(--price); }
.offer-price .now small { font-size: .62em; font-weight: 700; }
.offer-price .old { font-size: .72rem; color: var(--text-3); text-decoration: line-through; }
.offer-price .save { font-size: .7rem; font-weight: 700; color: var(--down); }

.lowest-flag {
  flex: 0 0 auto;
  padding: .05rem .4rem;
  border-radius: var(--radius-sm);
  background: var(--accent-grad);
  color: #04121A;
  font-size: .66rem;
  font-weight: 800;
}

.conf-medium { color: var(--warn); }

/* 价格曲线 */
.chart svg { display: block; width: 100%; height: 8.6rem; overflow: visible; }

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .55rem;
  font-size: .74rem;
  color: var(--text-3);
}

.chart-legend .dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .2rem; border-radius: 50%; }

.chart-stat {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin-top: .7rem;
  font-size: .78rem;
  color: var(--text-2);
}

.chart-stat b { font-weight: 800; color: var(--text); }

/* 评价口碑 */
.rating-row { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .9rem; }

.rating-score { font-size: 2.05rem; font-weight: 800; line-height: 1; color: var(--warn); }
.rating-score small { margin-left: .1rem; font-size: .4em; font-weight: 600; color: var(--text-3); }
.rating-meta { font-size: .78rem; line-height: 1.7; color: var(--text-3); }

.review-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }

.rtag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-2);
}

.rtag.pos { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); color: var(--down); }
.rtag.neg { background: rgba(255, 92, 124, .12); border-color: rgba(255, 92, 124, .3); color: var(--price); }
.rtag .cnt { font-size: .9em; opacity: .72; }

.ai-summary {
  padding: .8rem .9rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);
  border: 1px solid var(--border);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--text-2);
}

.ai-summary b { display: block; margin-bottom: .3rem; font-size: .8rem; color: var(--accent-1); }

/* 底部操作条 */
.bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  max-width: 30rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 55;
}

.bar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  flex: 0 0 3.4rem;
  min-height: var(--tap);
  font-size: .68rem;
  color: var(--text-2);
  cursor: pointer;
}

.bar-icon .ic { font-size: 1.15rem; line-height: 1.2; color: var(--text-3); transition: color .16s var(--ease); }
.bar-icon.on, .bar-icon.on .ic { color: var(--price); }

.bar-cta {
  flex: 1;
  min-height: 2.9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-grad);
  color: #04121A;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 .35rem 1rem rgba(34, 211, 238, .3);
  transition: transform .16s var(--ease);
}

:root[data-theme="light"] .bar-cta { color: #052A33; }
.bar-cta:active { transform: scale(.98); }

/* 缺货时的主按钮：明确是"不可用"，不要做成还能点的高亮按钮 ——
   点了必然失败的按钮比一个灰按钮更让人恼火。 */
.bar-cta.is-disabled,
.bar-cta.is-disabled:active {
  background: var(--glass-strong);
  border: 1px solid var(--border);
  color: var(--text-3);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* 缺货徽标：替掉价格位置。用中性灰而不是红色 —— 缺货是正常状态，
   红色会让人以为出了故障。 */
.oos-badge {
  display: inline-flex;
  align-items: center;
  padding: .1rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-2);
}

/* 详情页底部的「信息有误」入口。
   做得克制：它不该和购买按钮抢注意力，但用户发现数据不对时要找得到 ——
   所以给一行可点的浅色条，而不是一个和主操作同级的按钮。 */
.feedback-entry {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .4rem .9rem 1.4rem;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--glass);
  color: var(--text-3);
  font-size: .8rem;
  line-height: 1.5;
  cursor: pointer;
}

.feedback-entry span { flex: 1; }
.feedback-entry:active { background: var(--glass-strong); }

/* ---------------------------------------------------------------------------
 * 9. 收藏
 * ------------------------------------------------------------------------ */

.fav-card {
  display: flex;
  gap: .85rem;
  padding: .85rem;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.fav-body { flex: 1; min-width: 0; }

.price-change { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; font-size: .76rem; color: var(--text-3); }
.price-change .up { color: var(--up); font-weight: 700; }
.price-change .down { color: var(--down); font-weight: 700; }

.history-hint {
  display: inline-block;
  margin-left: .35rem;
  padding: .06rem .38rem;
  border-radius: var(--radius-sm);
  background: rgba(52, 211, 153, .14);
  border: 1px solid rgba(52, 211, 153, .3);
  color: var(--down);
  font-size: .68rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 10. 我的
 * ------------------------------------------------------------------------ */

.me-header { position: relative; padding: 1.5rem 1.1rem 1.7rem; overflow: hidden; }

.me-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 .5rem 1.5rem rgba(34, 211, 238, .28);
}

.me-name { position: relative; font-size: 1.24rem; font-weight: 800; letter-spacing: .01em; }
.me-sub { position: relative; margin-top: .2rem; font-size: .82rem; color: var(--text-3); }

.me-list {
  position: relative;
  margin: .7rem .75rem;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  overflow: hidden;
  z-index: 1;
}

.me-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  cursor: pointer;
  transition: background .16s var(--ease);
}

.me-item:last-child { border-bottom: 0; }
.me-item:active { background: var(--glass-strong); }
.me-item .left { display: flex; align-items: center; gap: .7rem; }
.me-item .ic { width: 1.4rem; text-align: center; font-size: 1.05rem; }
.me-item .value { font-size: .82rem; color: var(--text-3); }

/* 分段控件（主题 / 字号切换） */
.seg {
  display: inline-flex;
  padding: .15rem;
  border-radius: var(--radius-pill);
  background: var(--solid-2);
  border: 1px solid var(--border);
}

.seg span {
  min-width: 2.8rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  color: var(--text-3);
  text-align: center;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.seg span.active { background: var(--accent-grad); color: #04121A; font-weight: 800; }

/* ---------------------------------------------------------------------------
 * 11. 浮层
 * ------------------------------------------------------------------------ */

.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 6, 12, .62);
  backdrop-filter: blur(3px);
  animation: fade .18s var(--ease);
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet-panel {
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.15rem 1.1rem calc(1.15rem + env(safe-area-inset-bottom));
  background: var(--solid);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -1rem 3rem rgba(0, 0, 0, .34);
  animation: slide-up .24s var(--ease);
}

@keyframes slide-up { from { transform: translateY(2rem); opacity: .6; } to { transform: none; opacity: 1; } }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1.06rem;
  font-weight: 800;
}

.sheet-head .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-right: -.5rem;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 1.15rem;
}

.sheet-head .close:active { background: var(--glass-strong); }

.tabs { display: flex; gap: 1.4rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--border); }

.tab-item {
  padding-bottom: .6rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: .95rem;
  color: var(--text-2);
  cursor: pointer;
}

.tab-item.active { border-color: var(--accent-1); color: var(--accent-1); font-weight: 800; }

.field { margin-bottom: .95rem; }
.field label { display: block; margin-bottom: .4rem; font-size: .82rem; color: var(--text-2); }

.input-group { display: flex; gap: .6rem; }
.input-group .input { flex: 1; }

.btn-code {
  flex: 0 0 7.4rem;
  min-height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid var(--accent-1);
  color: var(--accent-1);
  font-size: .84rem;
  font-weight: 700;
  transition: background .16s var(--ease);
}

.btn-code:not(:disabled):active { background: var(--accent-soft); }
.btn-code:disabled { border-color: var(--border); color: var(--text-3); cursor: not-allowed; }

.dev-hint {
  margin-top: .8rem;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .32);
  color: var(--warn);
  font-size: .78rem;
  line-height: 1.6;
}

.sheet-note { margin-top: .9rem; font-size: .74rem; line-height: 1.7; color: var(--text-3); text-align: center; }

.filter-group { margin-bottom: 1.2rem; }
.filter-group h4 { margin: 0 0 .65rem; font-size: .9rem; font-weight: 800; }
.filter-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-options .chip { min-height: 2.2rem; padding: .35rem .9rem; font-size: .86rem; }

.price-range { display: flex; align-items: center; gap: .5rem; }
.price-range .input { min-height: 2.6rem; text-align: center; }

/* 弹层底部操作条吸底。
   筛选面板加了品牌/店铺/有货三组之后内容会超过一屏（85vh 上限），
   「查看结果」跟着内容滚出可视区，用户选完品牌却找不到确定按钮 ——
   这属于"功能加了反而更难用"。吸底后无论内容多长按钮都在原地。 */
.sheet-actions {
  display: flex;
  gap: .6rem;
  margin-top: .4rem;
  position: sticky;
  bottom: 0;
  padding: .7rem 0 .1rem;
  background: linear-gradient(to top, var(--solid) 62%, rgba(0, 0, 0, 0));
}

.sheet-actions .btn {
  flex: 1;
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  font-size: .98rem;
  font-weight: 800;
}

.btn-reset { background: var(--glass-strong); border: 1px solid var(--border); color: var(--text-2); }
.btn-apply { background: var(--accent-grad); color: #04121A; }
/* 破坏性确认（取消收藏 / 删除分组 / 清理失效）：同一个形状换成警示色，
   位置与尺寸不变，用户不会因为按钮变红而误判"哪个是主操作" */
.btn-apply.danger {
  background: linear-gradient(135deg, #FF5C7C 0%, #F43F5E 100%);
  color: #fff;
}
:root[data-theme="light"] .btn-apply { color: #052A33; }
:root[data-theme="light"] .btn-apply.danger { color: #fff; }

/* 数据来源与合规说明 */
.data-note {
  margin: 1rem .9rem .5rem;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--text-3);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 12. 响应式与无障碍
 * ------------------------------------------------------------------------ */

@media (min-width: 31rem) {
  .phone { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* 尊重系统的"减少动效"设置，避免眩晕 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =============================================================================
 * 消息中心（S8 降价提醒的到达端）
 *
 * 设计取舍：
 *   未读用左侧竖色条 + 标题前的小圆点双重标记，而不是只靠"背景色浅一点"——
 *   同一个页面里深浅差异在户外强光下几乎看不出来，而竖条与圆点是形状差异。
 *   整条消息都可点击，点击区域是 44px 以上的行高，符合移动端触控尺寸。
 * ========================================================================== */

.nav-btn-text {
  width: auto;
  padding: 0 .7rem;
  font-size: .82rem;
  color: var(--accent-1);
}

.msg-list { padding: .6rem .8rem 2rem; display: flex; flex-direction: column; gap: .6rem; }

.msg-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.msg-item:active { transform: scale(.99); }
.msg-item.unread { border-color: var(--accent-soft); }
.msg-item.unread::before {
  content: '';
  position: absolute;
  left: 0; top: .9rem; bottom: .9rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-grad);
}

.msg-ic {
  flex: 0 0 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-1);
}

.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: .9rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .35rem; }
.msg-text {
  font-size: .8rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: .2rem;
  /* 列表里最多两行。公告正文可以写到 1000 字，不截断的话一条消息
     就能把整个列表撑满，后面的消息全被挤到屏幕外。完整内容看详情页。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------------- 消息详情 ---------------- */

.msg-detail-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}

.msg-detail-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-1);
}

.msg-detail-type { font-size: .82rem; font-weight: 700; color: var(--accent-1); }
.msg-detail-time { margin-left: auto; font-size: .74rem; color: var(--text-3); }

.msg-detail-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: .6rem;
}

.msg-detail-text {
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.8;
  /* 公告是多段手写文字，换行必须保留（正文在服务端已转义，这里只控制排版） */
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-time { font-size: .72rem; color: var(--text-3); margin-top: .35rem; }
.msg-arrow { color: var(--text-3); align-self: center; display: flex; }

.msg-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--up);
  display: inline-block;
}

.dot-badge {
  display: inline-block;
  min-width: 1.15rem;
  height: 1.15rem;
  line-height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--up);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  margin-right: .35rem;
  vertical-align: middle;
}

.list-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1rem 0 2.5rem;
  font-size: .82rem;
}

.btn-ghost {
  height: 2.1rem;
  padding: 0 .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: .82rem;
}
/* =============================================================================
 * 浏览历史 · 账号与安全
 *
 * 两页共用「我的」页的列表样式（me-item / me-list），只补几处差异：
 *   - 删除按钮做成右上角小叉：滑动删除在移动端更时髦，但无键盘用户很难触发，
 *     而且容易误删。显式按钮的可达性与可控性都更好。
 *   - 危险操作（注销）用红色文字，与普通设置项区分开。
 * ========================================================================== */

.row-del {
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}

.row-del:hover, .row-del:active { background: var(--surface-2); color: var(--up); }

.fav-card { position: relative; }

.hist-platforms {
  font-size: .72rem;
  color: var(--text-3);
  margin-left: .5rem;
}

.local-tip {
  margin: .9rem .8rem 0;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-1);
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}

.sec-title {
  margin: 1.1rem 1rem .35rem;
  font-size: .78rem;
  color: var(--text-3);
  letter-spacing: .04em;
}

.sec-note {
  margin: .45rem 1rem 0;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--text-3);
}

.sec-value { color: var(--text-2); font-size: .84rem; }

.btn-mini {
  min-height: 1.9rem;
  padding: 0 .6rem;
  margin-left: .45rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  font-size: .74rem;
}

.btn-mini.ghost { border-color: var(--border); color: var(--text-3); }
.btn-mini:active { background: var(--surface-2); }

.me-item.danger .left { color: var(--up); }
.me-item.disabled { opacity: .55; }

.danger-banner {
  margin: 1rem .8rem 0;
  padding: .85rem .9rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 92, 124, .35);
  background: rgba(255, 92, 124, .08);
  font-size: .78rem;
  line-height: 1.65;
  color: var(--text-2);
}

.danger-banner b { display: block; color: var(--up); font-size: .88rem; margin-bottom: .25rem; }
.danger-banner .btn-primary { margin-top: .7rem; }

.btn-primary.danger {
  background: linear-gradient(135deg, #FF5C7C 0%, #F43F5E 100%);
  box-shadow: 0 4px 14px rgba(255, 92, 124, .28);
  color: #fff;
}

/* 登录浮层：验证码 / 密码两个 Tab 用更轻的样式，避免和手机号/邮箱切换抢视觉 */
.method-tabs { margin-bottom: .2rem; }
.method-tabs .tab-item { font-size: .82rem; }
/* 带删除按钮的历史卡片：标题右侧留出空间，避免长标题被 ✕ 压到 */
.fav-card.has-del .p-title { padding-right: 1.5rem; }
/* =============================================================================
 * 降价榜（底部导航第二个 Tab）
 *
 * 卡片的信息层级是按"用户最先想知道什么"排的：
 *   现价 + 降了多少 → 原价与降幅百分比 → 覆盖平台数
 * 降幅用绿色徽标（--down 在本项目里代表"跌"，与收藏页的涨跌箭头同一套语义），
 * 全站只用一个颜色表示"便宜了"，用户不需要重新学。
 * ========================================================================== */

.deals-bar { justify-content: space-between; }

.deals-summary {
  margin: 0 .8rem .2rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-1);
  font-size: .78rem;
  line-height: 1.5;
}

.deals-summary b { font-size: .95rem; font-weight: 800; }

.deal-sort {
  display: flex;
  gap: .9rem;
  padding: .5rem 1rem .1rem;
  font-size: .78rem;
  color: var(--text-3);
}

.deal-sort-item { cursor: pointer; }
.deal-sort-item.active { color: var(--accent-1); font-weight: 700; }

.deal-list { padding: .7rem .8rem 2rem; display: flex; flex-direction: column; gap: .7rem; }

.deal-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.deal-top { display: flex; gap: .75rem; padding: .85rem .9rem .6rem; cursor: pointer; }
.deal-info { flex: 1; min-width: 0; }

.deal-meta {
  font-size: .74rem;
  color: var(--text-3);
  line-height: 1.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-meta b { color: var(--down); font-weight: 700; }

.deal-badge {
  display: inline-flex;
  align-items: center;
  height: 1.35rem;
  padding: 0 .5rem;
  margin-left: .45rem;
  border-radius: 999px;
  background: rgba(52, 211, 153, .16);
  color: var(--down);
  font-size: .72rem;
  font-weight: 800;
  vertical-align: middle;
}

.deal-badge.low { background: var(--accent-soft); color: var(--accent-1); }

.deal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .9rem .7rem;
  border-top: 1px solid var(--border);
}

.deal-watch {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: .76rem;
  cursor: pointer;
}

.deal-watch.on { border-color: rgba(52, 211, 153, .5); color: var(--down); }
.deal-watch:active { background: var(--surface-2); }

.deal-go {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  color: var(--accent-1);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.deal-foot {
  padding: 0 1rem 2.5rem;
  font-size: .72rem;
  color: var(--text-3);
  text-align: center;
}
/* 头部两个动作按钮（筛选 + 搜索）并排 */
.deal-head-acts { display: inline-flex; align-items: center; }

/* 迷你走势图：贴右边，下面一行小字标"30 天"，避免用户误以为是别的时间范围 */
.deal-spark {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding-left: .3rem;
}

.deal-spark span { font-size: .62rem; color: var(--text-3); }
.spark { display: block; }

/* 已筛选提示行 */
.deal-filter-line {
  margin: 0 .8rem .3rem;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .74rem;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.deal-filter-clear { color: var(--accent-1); font-weight: 700; cursor: pointer; }

/* "我关注的"顶部的聚合结论 */
.deal-save-bar {
  margin: .5rem .8rem .2rem;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: rgba(52, 211, 153, .12);
  color: var(--text-2);
  font-size: .78rem;
}

.deal-save-bar b { color: var(--down); font-size: 1rem; font-weight: 800; }

/* 筛选面板：分块 + 可换行的 chip，窄屏不会挤出横向滚动条 */
.filter-block { margin-bottom: 1.1rem; }
.filter-label { font-size: .78rem; color: var(--text-3); margin-bottom: .5rem; }
.filter-chips { flex-wrap: wrap; padding: 0; overflow: visible; }
.filter-actions { display: flex; gap: .7rem; margin-top: 1.4rem; }
.filter-actions .btn-ghost { flex: 0 0 6rem; height: 2.7rem; }
.filter-actions .btn-primary { flex: 1; }

/* 盯降价按钮在有的目标价时文字会长一些，允许换行而不是溢出 */
.deal-watch { max-width: 62%; line-height: 1.2; }
/* 「查看全部」入口：放在区块标题右侧，用强调色，一眼能看到 */
.see-all {
  float: right;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent-1);
  cursor: pointer;
}

.see-all:active { opacity: .7; }
/* =============================================================================
 * 横向滚动容器 + 左右箭头
 *
 * 用途：一排内容放不下时（平台筛选、类目 chip 等），给一个明确的滑动入口。
 *
 * 三个设计取舍：
 *   1. 箭头**浮在内容上方**而不是占一列宽度。占列会让容器变窄，
 *      本来就放不下的内容更放不下，还挤压了 chip 的可读宽度。
 *   2. 箭头底衬一层与背景同色的渐变，让边缘的 chip 有一个自然的"淡出"，
 *      而不是被一个圆圈硬生生压住。
 *   3. 滑到头时对应箭头隐藏（见 JS 的 updateChipsArrows）。留着它只会让人点了没反应。
 * ========================================================================== */

.h-scroll { position: relative; }

.h-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--solid);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow);
  transition: opacity .18s, color .18s;
}

.h-arrow:hover { color: var(--accent-1); border-color: var(--accent-1); }
.h-arrow:active { transform: translateY(-50%) scale(.94); }
.h-arrow.hidden { opacity: 0; pointer-events: none; }

.h-arrow.left { left: .15rem; }
.h-arrow.right { right: .15rem; }

/* 箭头贴着边缘时，两侧留一点内边距，避免 chip 被圆圈压住 */
.h-scroll .h-arrow.left:not(.hidden) ~ .chip-row,
.h-scroll .chip-row { padding-left: .75rem; padding-right: .75rem; }

/* 桌面端箭头更有用（没有触摸滑动），手机上稍微收小一点不抢注意力 */
@media (max-width: 26rem) {
  .h-arrow { width: 1.5rem; height: 1.5rem; }
}
/* =============================================================================
 * 详情页的几个空态
 *
 * 真实数据刚采进来的时候，评价统计和历史价格都是空的。空数据必须**说清楚
 * 是"没有"还是"还没采到"**——展示"0.0/5 好评率 0.0%"会让人以为这商品
 * 评价极差，而真实含义只是我们还没拿到它的评价数据。
 * ========================================================================== */

.review-empty {
  padding: 1.3rem 1rem;
  text-align: center;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--text-2);
}

.review-empty .ic {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
  color: var(--text-3);
}

.review-empty span { font-size: .74rem; color: var(--text-3); }

.chart-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--text-2);
}

.chart-empty .ic {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
  color: var(--text-3);
}

.chart-empty .t { font-weight: 700; color: var(--text); }
.chart-empty .s { font-size: .76rem; color: var(--text-3); }

/* 报价行整行可点：给一个轻微的可点反馈，并让它看起来是能点的 */
.offer[role="button"] { cursor: pointer; transition: background .15s; }
.offer[role="button"]:active { background: var(--surface-2); }
/* =============================================================================
 * 搜索联想面板
 *
 * 面板插在搜索头部与筛选栏之间，用 absolute 定位盖在内容上方而不是把内容推下去——
 * 推下去会让列表跳动，而联想是"打字过程中"的临时状态，不该改变布局。
 * ========================================================================== */

/*
 * 注意：这里**不要**给 .search-header 加 position/z-index。
 * 它原本是 position: sticky; z-index: 45（吸顶搜索栏），
 * 后来我在这个文件末尾又写了一遍 .search-header { position: relative; z-index: 3 }，
 * 因为 CSS 后者覆盖前者，直接把吸顶效果和层级一起搞坏了 ——
 * 表现是搜索框滚到下面就消失了，联想面板还会钻到别的元素底下。
 * 面板是它的子元素，用 top: 100% 定位即可，不需要改父元素的定位方式。
 */
.suggest-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--solid);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  padding: .5rem 0 .7rem;
}

.suggest-panel.hidden { display: none; }

.suggest-block { padding: .3rem 0 .5rem; }

.suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem 1rem .2rem;
  font-size: .74rem;
  color: var(--text-3);
}

.suggest-clear { color: var(--accent-1); cursor: pointer; }

.suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .3rem 1rem;
}

.suggest-chip {
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .8rem;
  cursor: pointer;
}

.suggest-chip:active { background: var(--accent-soft); color: var(--accent-1); }
/* 前三名热词给一点强调，和榜单的语义一致 */
.suggest-chip.top { color: var(--accent-1); font-weight: 700; }

.suggest-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1rem;
  font-size: .86rem;
  color: var(--text);
  cursor: pointer;
}

.suggest-item:active { background: var(--surface-2); }
.suggest-item .ic { color: var(--text-3); display: flex; }
.suggest-item .w { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suggest-empty {
  padding: 1rem;
  text-align: center;
  font-size: .8rem;
  color: var(--text-3);
}

/* 搜索关键词高亮。用 <mark> 而不是 <b>：语义正确（这是"匹配到的内容"），
   而且浏览器默认样式就是背景高亮，只是我们要盖掉它的黄色 */
mark {
  background: transparent;
  color: var(--accent-1);
  font-weight: 700;
}

/* =============================================================================
 * 收藏夹分组与批量管理（FAV-03 / FAV-04 / FAV-07）
 *
 * 交互层级刻意做成"两层"：
 *   第一层 = 分组 Tab + 管理入口（日常浏览用，不打扰）
 *   第二层 = 编辑模式（多选 + 批量操作，只在点「管理」后出现）
 * 收藏页最高频的动作是"看价格有没有降"，批量管理是低频动作，
 * 所以它不能常驻占用视觉资源。
 * ========================================================================== */

/* 导航栏上的文字按钮：图标按钮是 44px 圆，文字按钮要自己撑开宽度 */
.nav-btn.text {
  width: auto;
  min-width: var(--tap);
  padding: 0 .7rem;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent-1);
}

.fav-groups { margin-top: .2rem; }

.fav-tools {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .1rem .8rem .35rem;
}

.fav-total {
  margin-left: auto;
  font-size: .74rem;
  color: var(--text-3);
  white-space: nowrap;
}

.fav-total b { color: var(--up); }

/* 分组 Tab 上的数量角标：用同色系低对比，避免和价格抢注意力 */
.chip .cnt {
  margin-left: .1rem;
  padding: 0 .32rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.chip.active .cnt {
  background: rgba(34, 211, 238, .18);
  border-color: rgba(34, 211, 238, .35);
  color: var(--accent-1);
}

/* 编辑模式：卡片整块变选择器 */
.fav-card.picking { cursor: pointer; }
.fav-card.picking:active { background: var(--surface-2); }
.fav-card.picked {
  border-color: var(--accent-1);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--glass));
}

.fav-tick {
  position: absolute;
  left: .55rem;
  top: .55rem;
  z-index: 3;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.6px solid var(--border-strong);
  background: var(--solid);
  pointer-events: none;
}

/* 勾选态用伪元素画勾，避免为了一个勾再引一张图或一段 SVG */
.fav-tick.on {
  border-color: transparent;
  background: var(--accent-grad);
  box-shadow: 0 .15rem .5rem rgba(34, 211, 238, .35);
}

.fav-tick.on::after {
  content: '';
  position: absolute;
  left: .38rem;
  top: .18rem;
  width: .34rem;
  height: .62rem;
  border: solid #04121A;
  border-width: 0 .16rem .16rem 0;
  transform: rotate(42deg);
}

/* 已失效：整体降饱和 + 明确标签，让用户一眼区分"便宜了"和"买不到了" */
.fav-card.invalid { opacity: .72; }
.fav-card.invalid .p-thumb img { filter: grayscale(1); }

.fav-invalid-tag {
  display: inline-block;
  margin-top: .2rem;
  padding: .1rem .42rem;
  border-radius: var(--radius-sm);
  background: var(--price-soft);
  border: 1px solid rgba(255, 92, 124, .3);
  color: var(--up);
  font-size: .7rem;
  font-weight: 700;
}

/* 底部批量操作条：停在 Tab 栏上方，不与导航重叠 */
.fav-edit-bar {
  position: fixed;
  left: 50%;
  bottom: calc(3.3rem + env(safe-area-inset-bottom) + .5rem);
  transform: translateX(-50%);
  z-index: 46;
  display: flex;
  align-items: center;
  gap: .45rem;
  width: calc(100% - 1.6rem);
  max-width: 28.4rem;
  padding: .5rem .6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fav-sel-all {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--tap);
  padding: 0 .35rem 0 .15rem;
  font-size: .82rem;
  color: var(--text-2);
  cursor: pointer;
}

.fav-sel-all .box {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: .32rem;
  border: 1.6px solid var(--border-strong);
  background: var(--solid);
}

.fav-sel-all .box.on {
  border-color: transparent;
  background: var(--accent-grad);
}

.fav-sel-count {
  font-size: .8rem;
  color: var(--text-3);
  white-space: nowrap;
}

.fav-sel-count b { color: var(--accent-1); font-size: .9rem; }

/* 编辑模式下给固定操作条让出高度，否则最后一排卡片永远被它压住 */
.fav-edit-spacer { height: 4.2rem; }

.fav-edit-bar .btn-mini { margin-left: 0; min-height: 2.2rem; font-size: .8rem; }
/* 批量操作按钮靠右：左侧留给"全选 / 已选 N"，视线从左到右是"选 → 做" */
.fav-edit-bar .btn-mini:first-of-type { margin-left: auto; }
.fav-edit-bar .btn-mini:disabled { opacity: .45; cursor: not-allowed; }

.btn-mini.danger {
  border-color: rgba(255, 92, 124, .45);
  color: var(--up);
}

.btn-mini.danger:active { background: var(--price-soft); }

/* 分组选择 / 管理列表 */
.fav-group-picker { display: flex; flex-direction: column; gap: .3rem; }

.fav-group-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: var(--tap);
  padding: .35rem .7rem;
  border-radius: var(--radius);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  cursor: pointer;
}

.fav-group-row:active { background: var(--surface-2); }
.fav-group-row .ic { display: flex; color: var(--accent-1); }
.fav-group-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-group-row .value { display: flex; color: var(--text-3); }

.fav-group-cnt {
  font-size: .74rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.fav-row-act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--text-3);
  cursor: pointer;
}

.fav-row-act:hover, .fav-row-act:active { background: var(--surface-2); color: var(--accent-1); }
.fav-row-act.danger:hover, .fav-row-act.danger:active { color: var(--up); }

.fav-new-group { display: flex; gap: .5rem; align-items: stretch; }
.fav-new-group .input { flex: 1; }
.fav-new-group .btn-primary { width: auto; flex: 0 0 auto; padding: 0 1rem; min-height: var(--tap); }

/* ---------------------------------------------------------------------------
 * 轻提示条（FAV-05：收藏后顺手开降价提醒）
 *
 * 放在 Tab 栏正上方，和底部操作条同一位置语言；出现/消失都带位移淡入，
 * 让用户能看出它是"主动冒出来"而不是页面的一部分。
 * ------------------------------------------------------------------------ */

.hint-bar {
  position: fixed;
  left: 50%;
  bottom: calc(3.3rem + env(safe-area-inset-bottom) + .5rem);
  transform: translateX(-50%) translateY(0);
  z-index: 47;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: calc(100% - 1.6rem);
  max-width: 28.4rem;
  padding: .5rem .5rem .5rem .85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--solid) 94%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: hint-in .26s var(--ease);
}

.hint-bar.hidden { display: none; }

/* 详情页：让开底部的「收藏 / 降价提醒 / 去购买」操作栏 */
.hint-bar.above-cta { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }

@keyframes hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(.7rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hint-bar { animation: none; }
}

.hint-bar .ic { display: flex; color: var(--accent-1); flex: 0 0 auto; }
.hint-bar .t {
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text-2);
}

.hint-bar .t b { color: var(--text); }

.hint-bar .act {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 .95rem;
  border-radius: var(--radius-pill);
  background: var(--accent-grad);
  color: #04121A;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.hint-bar .act:active { transform: scale(.97); }

.hint-bar .close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--text-3);
  font-size: .95rem;
  cursor: pointer;
}

.hint-bar .close:active { background: var(--surface-2); }

/* =============================================================================
 * 通知设置页（MSG-03）
 *
 * 开关（.switch）是本轮新增的通用控件。之前全站只有「分段控件」（.seg），
 * 那适合"二选一/三选一"的并列选项；而"开启/关闭某个功能"用分段控件会让人
 * 误以为是在切换视图，所以补一个语义正确的开关。
 * ========================================================================== */

.np-group {
  margin: .8rem .8rem 0;
  padding: .35rem .85rem;
  border-radius: var(--radius-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.np-group-title {
  padding: .7rem 0 .35rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--text-3);
}

.np-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: var(--tap);
  padding: .55rem 0;
  border-top: 1px solid var(--border);
}

.np-group-title + .np-row { border-top: 0; }
.np-row-off { opacity: .6; }

.np-label { flex: 1; min-width: 0; }
.np-label .t {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  color: var(--text);
}

.np-label .s {
  margin-top: .15rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--text-3);
}

.np-tag {
  padding: .02rem .35rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  border: 1px solid var(--border);
  font-size: .64rem;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
}

/* 开关：44px 的可点区域 + 视觉上 46x28 的胶囊，兼顾触控与观感 */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}

.switch::after {
  content: '';
  position: absolute;
  top: .16rem;
  left: .16rem;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform .18s var(--ease), background .18s var(--ease);
}

.switch.on {
  background: var(--accent-grad);
  border-color: transparent;
}

.switch.on::after {
  transform: translateX(1.12rem);
  background: #04121A;
}

.switch.disabled { cursor: not-allowed; }

.np-quiet {
  display: flex;
  gap: .6rem;
  padding: 0 0 .6rem;
}

.np-time { flex: 1; min-width: 0; }
.np-time span {
  display: block;
  margin-bottom: .25rem;
  font-size: .72rem;
  color: var(--text-3);
}

.np-time .input {
  min-height: 2.6rem;
  font-variant-numeric: tabular-nums;
}

.np-note {
  padding: .1rem 0 .65rem;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--text-3);
}

.np-note.np-sys { padding-top: .5rem; border-top: 1px dashed var(--border); }

.np-caps { padding: .1rem 0 .2rem; overflow-x: auto; }

.np-actions { margin: 1.1rem .8rem 0; }

.np-reset {
  margin-top: .9rem;
  padding: .6rem;
  text-align: center;
  font-size: .82rem;
  color: var(--text-3);
  border-radius: var(--radius);
  cursor: pointer;
}

.np-reset:active { background: var(--surface-2); color: var(--text-2); }

/* =============================================================================
 * 合规：协议正文页、关于我们、登录页同意勾选（AUTH-04）
 *
 * 协议正文刻意用"阅读优先"的排版：正文 16px、行高 1.85、段落间距充足。
 * 这不是装饰 —— 一份读不下去的协议，法律上很难说用户"充分知悉"。
 * ========================================================================== */

.legal-doc {
  padding: 1.1rem 1.1rem 2rem;
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text-2);
}

.legal-head { margin-bottom: 1.1rem; }

.legal-head h1 {
  margin: 0 0 .35rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

.legal-meta {
  font-size: .76rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.legal-doc h3 {
  margin: 1.6rem 0 .5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.legal-doc h4 {
  margin: 1.2rem 0 .4rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}

.legal-doc p { margin: 0 0 .75rem; }
.legal-doc b { color: var(--text); }
.legal-doc ul, .legal-doc ol { margin: 0 0 .8rem; padding-left: 1.15rem; }
.legal-doc li { margin-bottom: .3rem; }
.legal-doc a { color: var(--accent-1); text-decoration: none; }

/* 表格：协议里有"信息 / 用途 / 是否可拒绝"这类对照，用表格读起来最快。
   窄屏下允许横向滚动，而不是把三列压成一列看不懂的碎片 */
.md-table { margin: 0 0 .9rem; overflow-x: auto; }
.md-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.md-table th, .md-table td {
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.md-table th { background: var(--glass-strong); color: var(--text); font-weight: 700; white-space: nowrap; }

.legal-foot {
  margin-top: 1.6rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--border);
  font-size: .74rem;
  color: var(--text-3);
}

/* 关于我们 */
.about-hero {
  padding: 1.4rem 1.1rem 1.2rem;
  text-align: center;
}

.about-logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-ver { margin-top: .25rem; font-size: .78rem; color: var(--text-3); }
.about-group { margin-top: .8rem; }

.about-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .5rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-3);
}

.np-group-title + .about-link { border-top: 0; }
.about-link:active { color: var(--accent-1); }
.about-link .t { flex: 1; min-width: 0; color: var(--text); font-size: .9rem; }
.about-link .v { font-size: .76rem; color: var(--text-3); white-space: nowrap; }

.about-text {
  padding: .2rem 0 .55rem;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text-2);
}

.about-text b { color: var(--text); }

.about-kv {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem 0;
  border-top: 1px solid var(--border);
  font-size: .84rem;
}

.np-group-title + .about-kv { border-top: 0; }
.about-kv span { flex: 0 0 5.5rem; color: var(--text-3); font-size: .78rem; }
.about-kv b { font-weight: 600; color: var(--text); word-break: break-all; }

/* 登录浮层的同意勾选（AUTH-04） */
.agree-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .2rem 0 .9rem;
  cursor: pointer;
}

.agree-box {
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .1rem;
  border-radius: .32rem;
  border: 1.6px solid var(--border-strong);
  background: var(--glass-strong);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}

.agree-box.on {
  border-color: transparent;
  background: var(--accent-grad);
}

.agree-box.on::after {
  content: '';
  position: absolute;
  left: .36rem;
  top: .14rem;
  width: .28rem;
  height: .52rem;
  border: solid #04121A;
  border-width: 0 .15rem .15rem 0;
  transform: rotate(42deg);
}

/* 未勾选就提交时抖一下：比只弹一个 toast 更容易让人定位到该点哪里 */
.agree-box.shake { animation: agree-shake .42s var(--ease); }

@keyframes agree-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-.22rem); }
  45% { transform: translateX(.22rem); }
  70% { transform: translateX(-.12rem); }
}

@media (prefers-reduced-motion: reduce) {
  .agree-box.shake { animation: none; }
}

.agree-text {
  font-size: .76rem;
  line-height: 1.6;
  color: var(--text-3);
}

.agree-text a { color: var(--accent-1); text-decoration: none; }
.agree-text .dim { color: var(--text-3); opacity: .85; }

/* 「记住我」比同意勾选低一级：它不影响能否提交，只是时长选择 */
.remember-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: -.4rem 0 .9rem;
  cursor: pointer;
}

.login-extra {
  display: flex;
  justify-content: center;
  margin-top: .7rem;
}

.login-extra .link {
  padding: .35rem .6rem;
  font-size: .82rem;
  color: var(--accent-1);
  cursor: pointer;
}

/* 登录设备列表 */
.session-list { display: flex; flex-direction: column; gap: .4rem; }

.session-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border-radius: var(--radius);
  background: var(--glass-strong);
  border: 1px solid var(--border);
}

.session-row .ic { display: flex; color: var(--accent-1); flex: 0 0 auto; }
.session-row .info { flex: 1; min-width: 0; }

.session-row .d {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  color: var(--text);
}

.session-row .m {
  margin-top: .12rem;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-3);
  word-break: break-all;
}

.session-row .btn-mini { margin-left: 0; flex: 0 0 auto; }

/* 详情页「价格参考」：一行一个可核对的指标，右侧是值。
   刻意不用图表/进度条，因为数据积累期只有一两天，画出来会误导。 */
.insight-list {
  padding: .2rem .95rem .3rem;
}

.insight-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}

.insight-row:last-child { border-bottom: 0; }
.insight-row span { color: var(--text-3); flex: 0 0 auto; }
.insight-row b {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * 商品对比与「现在买合适吗」
 *
 * 对比表用**横向滚动**而不是卡片网格：手机屏宽下 4 列并排每列不到 90px，
 * 放不下任何有意义的信息。第一列固定为维度名，后面每列一件商品。
 * ========================================================================== */

/* 搜索工具栏右侧的对比入口 */
.filter-bar .item.right { margin-left: auto; }

.cmp-entry, .cmp-done {
  display: inline-flex;
  align-items: center;
  padding: .1rem .55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  cursor: pointer;
}

.cmp-entry.on {
  border-color: var(--accent-1);
  background: var(--accent-soft);
  color: var(--accent-1);
  font-weight: 700;
}

.cmp-done { border-color: transparent; color: var(--accent-1); font-weight: 700; }

/* 选择模式下的底部浮出条 */
.cmp-bar {
  position: fixed;
  left: 50%;
  bottom: calc(3.3rem + env(safe-area-inset-bottom) + .5rem);
  transform: translateX(-50%);
  z-index: 46;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: calc(100% - 1.6rem);
  max-width: 28.4rem;
  padding: .5rem .6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.cmp-bar .cnt { font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.cmp-bar .cnt b { color: var(--accent-1); font-size: .92rem; }
.cmp-bar .spacer { flex: 1; }
.cmp-bar .btn-mini { margin-left: 0; min-height: 2.2rem; }
.cmp-bar .btn-mini:disabled { opacity: .45; cursor: not-allowed; }
.cmp-bar .cmp-go {
  width: auto;
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: 0 1rem;
  font-size: .82rem;
}
.cmp-bar .cmp-go:disabled { opacity: .45; cursor: not-allowed; }

/* 对比表 */
.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .6rem .8rem 0;
}

.cmp-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8rem;
}

/* 第一列（维度名）在横滑时固定住，否则滑到第 3 件就不知道这一行是什么了 */
.cmp-table th.dim, .cmp-table td.dim {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 5.2rem;
  background: var(--bg);
  border-right: 1px solid var(--border);
  text-align: left;
  color: var(--text-3);
  font-weight: 500;
  font-size: .74rem;
}

.cmp-table thead th {
  vertical-align: top;
  padding: .3rem .5rem .6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 500;
}

.cmp-table thead th.dim { background: var(--bg); }

.cmp-table tbody th.dim,
.cmp-table tbody td {
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.cmp-table tbody td { min-width: 8.2rem; color: var(--text-2); }
/* 该维度的最优值：加个底色，扫一眼就知道哪件赢 */
.cmp-table tbody td.best {
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: var(--text);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.cmp-thumb { width: 3.4rem; height: 3.4rem; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; }
.cmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-title {
  margin-top: .35rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.cmp-del {
  display: inline-block;
  margin-top: .3rem;
  font-size: .7rem;
  color: var(--text-3);
  cursor: pointer;
}
.cmp-del:active { color: var(--up); }

.cmp-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem .9rem 0;
}
.cmp-actions .spacer { flex: 1; }

/* 「现在买合适吗」 */
.advice {
  margin: .2rem .95rem .6rem;
  padding: .8rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--glass-strong);
}

.advice .head { display: flex; align-items: center; gap: .7rem; }
.advice .label { font-size: .92rem; font-weight: 700; color: var(--text); }

.advice .score { text-align: center; flex: 0 0 auto; }
.advice .score b { display: block; font-size: 1.3rem; line-height: 1.1; }
.advice .score small { font-size: .64rem; color: var(--text-3); }

.advice .reasons {
  margin: .55rem 0 0;
  padding-left: 1.05rem;
  font-size: .76rem;
  line-height: 1.75;
  color: var(--text-2);
}

/* 分档配色：便宜/适中/偏高/数据不足，四档一眼可分。
   不用红色表示"贵"——红色在本项目里代表价格本身，复用会让语义打架。 */
.advice.low  { border-color: rgba(52, 211, 153, .45); }
.advice.low .label, .advice.low .score b { color: var(--down); }
.advice.fair { border-color: rgba(34, 211, 238, .40); }
.advice.fair .label, .advice.fair .score b { color: var(--accent-1); }
.advice.high { border-color: rgba(251, 191, 36, .45); }
.advice.high .label, .advice.high .score b { color: var(--warn); }
.advice.flat .label { color: var(--text-2); }
.advice.insufficient { background: transparent; border-style: dashed; }
.advice.insufficient .t { font-size: .85rem; color: var(--text-2); }
.advice.insufficient .s { margin-top: .25rem; font-size: .74rem; line-height: 1.7; color: var(--text-3); }

/* 对比表里直接显示结论时的着色 */
.cmp-table td.adv-low { color: var(--down); font-weight: 700; }
.cmp-table td.adv-fair { color: var(--accent-1); }
.cmp-table td.adv-high { color: var(--warn); }
.cmp-table td.adv-flat { color: var(--text-2); }
.cmp-table td small { display: block; font-size: .68rem; opacity: .75; }
.cmp-table td.muted { color: var(--text-3); }

/* 版本更新条：与轻提示条同一套外观，但独立存在、不随路由切换消失。
   用强调色的左边框区分于普通提示条，让它看起来是"系统状态"而不是"一次性提示"。 */
.update-bar { border-color: rgba(99, 102, 241, .55); }
.update-bar .ic { color: var(--accent-2); }

/* =============================================================================
 * 「同款多店价差」的展示
 *
 * 比价产品最该被看见的一句话就是"同一件东西哪里更便宜"。
 * 之前详情页只是把报价按价格排好、让用户自己去比；搜索卡片更是完全没提。
 * ========================================================================== */

.deal-note {
  margin: .1rem .9rem .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid rgba(34, 211, 238, .28);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text);
}

.deal-note b { color: var(--down); font-size: 1rem; }
.deal-note.muted {
  background: transparent;
  border-style: dashed;
  border-color: var(--border);
  color: var(--text-3);
  font-size: .78rem;
}

/* 搜索卡片上的价差标签：用"省钱"的绿色，与降价的语义保持一致 */
.tag.save {
  background: rgba(52, 211, 153, .14);
  border: 1px solid rgba(52, 211, 153, .32);
  color: var(--down);
  font-weight: 700;
}

/* =============================================================================
 * 商品图查看器（点详情页主图打开）
 *
 * 全屏深色底：商品图有白底也有彩色底，只有纯深色底能让两种图都看清边界。
 * ========================================================================== */

.gallery-mask {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 12, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pop .18s var(--ease);
}

.gallery-mask .g-img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #fff;
}

.gallery-mask .g-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F2F6FF;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}

.gallery-mask .g-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F2F6FF;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}

.gallery-mask .g-nav:active { background: rgba(255, 255, 255, .22); }
.gallery-mask .g-nav.left { left: .8rem; }
.gallery-mask .g-nav.right { right: .8rem; }

.gallery-mask .g-tip {
  position: absolute;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: .78rem;
  color: rgba(233, 238, 249, .7);
  white-space: nowrap;
}

/* 详情页主图可点：给一个明确的"能点"暗示 + 多图数量角标 */
.detail-thumb { position: relative; cursor: zoom-in; }

.thumb-badge {
  position: absolute;
  right: .2rem;
  bottom: .2rem;
  padding: 0 .3rem;
  border-radius: var(--radius-sm);
  background: rgba(4, 6, 12, .72);
  color: #E9EEF9;
  font-size: .62rem;
  line-height: 1.5;
  pointer-events: none;
}