/* ═══════════════════════════════════════════════════════════════
   设备主页皮肤 v2.0 · 1:1 复刻 client-v2.html（Airbnb 规范）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。不修改任何现有样式文件（index.html 仅加 1 行 link）。
   回滚：删除本文件 + 删除 index.html 中对应的 1 行 link。共 2 步。
   机制：加载于所有既有样式之后，靠"同权重后者生效"覆盖旧值。
        故本文件严禁使用 !important，严禁新增页面跳转过渡。
   范围：设备主页 + 其搜索子页/结果子页 + 共用底导航/提示条/登录浮层。
        不含：商品详情页、圈子、回收、客服、我的（这些页面的选择器不在本文件出现）。
   v2 结构（设备页）：沉浸头图 16:9 → 悬浮搜索 pill → 播报 → 分类分屏（5 列×2 行）
                    → 官方精选（横滑轮换）+ 2 列网格；吸顶栏为独立层不参与滚动。
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── §0 设计令牌 ───────────────────────── */
:root{
  /* 中性层：全站唯一灰阶（白 + 5 档灰） */
  --canvas:#FFFFFF;
  --surface-soft:#F7F7F7;
  --surface-strong:#F2F2F2;
  --surface-sunken:#EDEDED;   /* 下沉面：凹陷容器底（分段控件轨道等），比 surface-soft 更暗一档 */
  --hairline:#DDDDDD;
  --hairline-soft:#EBEBEB;
  --ink:#222222;
  --body:#3F3F3F;
  --muted:#6A6A6A;
  --muted-soft:#929292;
  --on-theme:#FFFFFF;
  /* 主题层：本阶段全站统一橙红；各页底导选中色由 .bottom-nav[data-theme] 覆盖 */
  --theme:#FF5C39;
  --theme-active:#E04A2E;
  --theme-soft:#FFF1EE;
  /* 底导：默认（设备页）橙红；其余四页由 .bottom-nav[data-theme] 覆盖选中色 */
  --tab-on:#FF5C39;
  --tab-off:#6E7278;
  /* 圆角 5 档（原 14 档） */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-full:9999px;
  /* 字阶 7 档（原 16 档） */
  --t-title:20px;
  --t-subtitle:16px;
  --t-body:14px;
  --t-caption:13px;
  --t-micro:12px;
  --t-tiny:11px;
  --t-price:18px;
  /* 唯一阴影层 */
  --elev:0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.10);
  /* 仅用于按压与状态切换；严禁用于页面跳转 */
  --ease:120ms ease-out;
  /* 中文优先字体栈（修补：原字体栈无中文项，中文可能落到宋体） */
  --font-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,"Helvetica Neue",Roboto,sans-serif;
}

/* ─────────────── §1 全局底 / 底导航 / 全局提示条 ─────────────── */
body{ font-family:var(--font-cjk); background:#E9E9E9; }   /* 手机壳外留白：与 client-v2 一致，区分显示区/非显示区 */
.app-container{ background:var(--canvas); }
.view-stack{ background:var(--canvas); }

/* §1.1 滚动条统一隐藏（全站客户端）：与 client-v2 的 .scroll 一致，
   避免 Windows 下出现 15px 滚动条（移动端外壳一律无滚动条）。
   已隐藏的（设备页 .nearby-container/.category-grid、.lightbox、.viewer-scroll）不重复列出；
   .auth-card（登录浮层弹窗）保留滚动条。
   2026-09-27 新增 .chat-input-field / .comment-input-field：
     客服聊天输入框是 `<textarea>`（max-height:120px），多行时会溢出并出现竖向滚动条
     （实测 scrollHeight 272 > clientHeight 120）；评论详情页输入框是单行 `<input>`（overflow-y:clip）
     本无滚动条，一并列入作为保险与形制统一。 */
.recycle-scroll,
.circle-scroll,
.comment-detail-scroll,
.msg-scroll,
.chat-messages-scroll,
.info-scroll,
.history-results,
.forward-list,
.goods-scroll,
.sub-content,
.detail-scroll,
.review-panel-scroll,
.emoji-grid,
.chat-input-field,
.comment-input-field,
#page-profile{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.recycle-scroll::-webkit-scrollbar,
.circle-scroll::-webkit-scrollbar,
.comment-detail-scroll::-webkit-scrollbar,
.msg-scroll::-webkit-scrollbar,
.chat-messages-scroll::-webkit-scrollbar,
.info-scroll::-webkit-scrollbar,
.history-results::-webkit-scrollbar,
.forward-list::-webkit-scrollbar,
.goods-scroll::-webkit-scrollbar,
.sub-content::-webkit-scrollbar,
.detail-scroll::-webkit-scrollbar,
.review-panel-scroll::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar,
.chat-input-field::-webkit-scrollbar,
.comment-input-field::-webkit-scrollbar,
#page-profile::-webkit-scrollbar{
  display:none;
}

/* 底导航（全站共用组件：此段生效会影响其他页，属预期；选中色随当前主页，见 docs/page-transition-spec.md） */
.bottom-nav{
  background:var(--canvas);
  border-top:1px solid rgba(0,0,0,.06);
  transition:none;                     /* 原 background/border-color 过渡无意义 */
}
/* 每页不同选中色：由 navigation.js 的 syncBottomNav() 写入 data-theme */
.bottom-nav[data-theme="raw"]     { --tab-on:#2F6BFF; }   /* 回收：蓝 */
.bottom-nav[data-theme="circle"]  { --tab-on:#5B5BD6; }   /* 公示：紫 */
.bottom-nav[data-theme="messages"]{ --tab-on:#0E9F94; }   /* 客服：绿 */
.bottom-nav[data-theme="profile"] { --tab-on:#C13515; }   /* 我的：棕红 */
.nav-item{ transition:transform 100ms ease-out; }
.nav-item:active{ transform:scale(.92); opacity:.8; }
.nav-icon-wrapper{ width:24px; height:24px; margin-bottom:2px; }
.nav-icon{ width:24px; height:24px; stroke-width:2px; transition:stroke var(--ease), stroke-width var(--ease); }
.nav-label{
  font-size:var(--t-caption);
  font-weight:600;
  letter-spacing:.3px;
  color:var(--tab-off);
  transition:color var(--ease);
}
.nav-item.active .nav-label{ color:var(--tab-on); font-weight:600; }
.nav-item:not(.active) .nav-icon{ fill:none; stroke:var(--tab-off); }
.nav-item.active .nav-icon{ fill:none; stroke:var(--tab-on); stroke-width:2.4px; filter:none; }
.nav-item:not(.active) .nav-icon .dot{ fill:var(--tab-off); }
.nav-item.active .nav-icon .dot{ fill:var(--tab-on); }

/* 全局提示条（全站共用组件） */
.toast{
  padding:14px 24px;
  border-radius:var(--r-md);
  font-size:var(--t-body);
  font-weight:500;
  line-height:1.43;
  text-align:center;
  max-width:78%;
}

/* ────────────── §2 设备页容器 + 沉浸式头图（v2） ────────────── */
/* 注：不设 position——必须保留 .page 的 position:absolute（全站页面层叠架构），
   absolute 本身即为定位包含块，吸顶栏/定位浮窗的 absolute 定位不受影响 */
#page-nearby{ background:var(--canvas); color:var(--ink); overflow:hidden; }
#page-nearby .nearby-container{
  flex:1;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--canvas);
}
#page-nearby .nearby-container::-webkit-scrollbar{ display:none; }

/* 头图：16:9；轮播切换改用淡入淡出，滚动时由 JS 写 opacity 渐隐 */
#page-nearby .hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  /* ★2026-10-24：没有 banner 图片时即深色渐变占位板块；
     有图时图片覆盖本层，加载/失败期间也不会闪白。 */
  background:linear-gradient(135deg,#2B313C 0%,#15191F 100%);
  overflow:hidden;
  flex-shrink:0;
  touch-action:pan-y;                 /* 横向手势交给 JS，纵向仍可滚页 */
}
#page-nearby .hero-media{
  position:absolute; inset:0;
  transition:transform 320ms cubic-bezier(.25,.46,.45,.94);
}
#page-nearby .hero-media.dragging{ transition:none; }   /* 拖动中完全跟手 */
/* 覆盖原横向位移轨道：改为层叠淡入淡出 */
#page-nearby .banner-track{ position:absolute; inset:0; display:block; width:auto; height:auto; transition:none; }
#page-nearby .banner-item{
  position:absolute; inset:0; flex:none;
  opacity:0;
  transition:opacity 420ms ease;
  background:transparent;
  color:var(--muted);
}
#page-nearby .banner-item.is-on{ opacity:1; }
#page-nearby .banner-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 头图内顶栏：定位徽章（白胶囊）+ 登录/头像 */
#page-nearby .hero-bar{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0;
}
#page-nearby .hero-loc{
  height:30px; padding:0 12px 0 10px; border-radius:var(--r-full);
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  border:none;
  display:flex; align-items:center; gap:5px;
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-nearby .hero-loc:active{ transform:scale(.95); }
#page-nearby .hero-loc svg{
  width:14px; height:14px; fill:none; stroke:var(--theme); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
#page-nearby .hero-loc b{ font-size:12.5px; font-weight:600; letter-spacing:.2px; color:var(--ink); }
#page-nearby .hero-right{ display:flex; align-items:center; gap:8px; }
/* 头图上的登录：白胶囊（原橙红实心在白底头图上不可用） */
#page-nearby .hero-right .login-btn{
  width:auto; min-width:0; height:30px; padding:0 15px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border-radius:var(--r-full);
  font-size:var(--t-caption);
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  display:flex; align-items:center;
  transition:transform 100ms ease-out;
}
#page-nearby .hero-right .login-btn:active{ transform:scale(.95); }
#page-nearby .hero-right .login-btn.hidden{ display:none; }   /* 优先级需高于上方 display:flex，否则已登录时不隐藏 */
/* ⚠ 2026-10-03：`.hero-right .user-avatar` 与 `.hero-right .user-name` 两条规则已删除 ——
   这两个元素（头图内头像 / 昵称胶囊）按用户裁定**从 DOM 移除**（头像移吸顶栏、昵称改语言胶囊），
   规则已无匹配元素（死样式）。回收页/公示页的 `#page-raw .user-name`、`#page-circle .circle-header-name`
   是**另外的规则**，未受影响。 */

/* ─────────── §2b 语言入口（2026-10-03 用户裁定） ───────────
   设备页头图右上角：原 `.user-name` 昵称胶囊 → **语言胶囊**（圆形国旗 + 「语言」）。
   位置/高度/圆角/底色/阴影/字号全部沿用原 `.user-name` 与左侧 `.hero-loc` 的口径，
   仅把「文字」换成「圆形国旗 18 + 文字 语言」。 */
#page-nearby .hero-right .hero-lang{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  border:none; border-radius:var(--r-full);
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  color:var(--ink);
  font-size:12.5px; font-weight:600; letter-spacing:.2px;
  font-family:inherit;
  flex-shrink:0;
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-nearby .hero-right .hero-lang:active{ transform:scale(.95); }
#page-nearby .hero-right .hero-lang-flag{
  display:block;
  width:18px; height:18px; flex-shrink:0;
  border-radius:50%; object-fit:cover;
}
/* 吸顶栏右侧：原 `.np-avatar` 30×30 圆头像 → **圆形国旗**（尺寸/位置不变） */
#page-nearby .np-flag{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%; overflow:hidden;
  background:var(--surface-strong);
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-nearby .np-flag:active{ transform:scale(.95); }
#page-nearby .np-flag img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ─────────── §3 悬浮搜索 pill + 滚动播报（v2） ─────────── */
#page-nearby .search-wrap{ position:relative; z-index:3; margin:-26px 16px 0; flex-shrink:0; }
#page-nearby .search-bar{
  height:52px;
  background:var(--canvas);
  border:none;
  border-radius:var(--r-full);
  box-shadow:var(--elev);
  display:flex;
  align-items:center;
  padding:0 8px 0 18px;
  gap:10px;
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-nearby .search-bar:active{ transform:scale(.985); }
#page-nearby .search-bar svg{
  width:19px;
  height:19px;
  flex-shrink:0;
  fill:none;
  stroke:var(--ink);
  stroke-width:2.2;
}
#page-nearby .search-bar input{
  flex:1;
  border:none;
  background:none;
  outline:none;
  font-size:var(--t-body);
  color:var(--ink);
  cursor:pointer;
}
#page-nearby .search-bar input::placeholder{ color:var(--muted); }
/* 主题色圆钮（须写在 .search-bar svg 之后：同权重后者生效） */
#page-nearby .search-tune{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--theme);
  display:flex; align-items:center; justify-content:center;
}
#page-nearby .search-tune svg{ width:20px; height:20px; fill:#fff; stroke:none; }

#page-nearby .notice-bar{
  height:20px;
  margin:14px 0 0;
  padding:0 16px;
  gap:8px;
  background:none;
  border-radius:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
#page-nearby .notice-icon svg{ width:15px; height:15px; flex-shrink:0; fill:var(--theme); }
#page-nearby .notice-text{ flex:1; overflow:hidden; white-space:nowrap; position:relative; }
#page-nearby .notice-text-inner{
  display:inline-block;
  padding-left:100%;
  animation:nearby-marquee 16s linear infinite;
  font-size:12.5px;
  color:var(--muted);
  line-height:20px;
}
/* ★2026-10-25：没有播报内容时停掉跑马灯（板块保留、不空转动画） */
#page-nearby .notice-text-inner:empty{ animation:none; padding-left:0; }

/* ────── §4 分类分屏：每屏 5 列 × 2 行，整屏吸附翻页（v2） ────── */
#page-nearby .category-section{
  display:block;
  margin:18px 0 0;
  padding:0;
  background:none;
  border-radius:0;
  flex-shrink:0;
}
#page-nearby .category-grid{
  display:flex;
  gap:0;
  grid-template-columns:none;        /* 覆盖原 6 列网格 */
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  transition:height 320ms cubic-bezier(.25,.46,.45,.94);   /* 高度由 JS 按该屏行数写入 */
}
#page-nearby .category-grid::-webkit-scrollbar{ display:none; }
#page-nearby .cats-page{
  flex:0 0 100%;
  width:100%;
  box-sizing:border-box;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px 4px;                      /* 行距 18px 与 JS 的 CAT_ROW_GAP 严格联动 */
  padding:2px 16px 0;                /* 上边距 2px 与 JS 的 CAT_PAD_TOP 严格联动 */
  align-content:start;               /* 关键：行按内容定高，不被拉伸（否则 1 行的屏会被撑成 2 行高，JS 量高失真） */
}
#page-nearby .category-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-nearby .category-item:active{ transform:scale(.94); }
/* 正方形图片展示区：无圆角、无底色 → 透明底素材可正常透出 */
#page-nearby .cat-icon{
  width:56px;
  height:56px;
  border-radius:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--ease);
}
/* 图片：透明底支持（不裁切、不加白底）+ 未选中"半彩微褪" */
#page-nearby .cat-icon img{
  width:100%;
  height:100%;
  border-radius:0;
  object-fit:contain;                  /* 透明底图标不裁边 */
  background:none;                     /* 关键：去掉白底，透明区域才能透出 */
  opacity:.58;                         /* 未选中：约 58% 不透明度（微泛白褪色） */
  filter:saturate(.55);                /* 未选中：饱和度降至约一半，颜色淡仍可辨原色 */
  transition:opacity var(--ease), filter var(--ease);
}
#page-nearby .cat-name{
  font-size:var(--t-tiny);
  line-height:1.25;
  color:var(--muted);
  text-align:center;
  white-space:nowrap;
  max-width:100%;                      /* 限制在格子内，防外语长名撑破版面 */
  overflow:hidden;
  text-overflow:ellipsis;              /* 过长用省略号收尾（不可换行，否则撑高格子） */
  transition:color var(--ease);
}
/* 选中：全彩 + 轻微放大（色彩浓淡 + 尺寸双重区分，且不引入任何底色，透明底完整保留） */
#page-nearby .category-item.selected .cat-icon{
  background:none;
  box-shadow:none;
  transform:scale(1.06);
}
#page-nearby .category-item.selected .cat-icon img{
  opacity:1;
  filter:none;
}
#page-nearby .category-item.selected .cat-name{ color:var(--ink); font-weight:600; }
/* 指示点：沿用轮播圆点造型，配色改深灰 / 主题色（白色在浅底上看不见） */
#page-nearby .cats-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
#page-nearby .cats-dot{
  width:6px; height:6px; border-radius:var(--r-full);
  background:var(--hairline);
  transition:width 200ms ease, background 200ms ease;
}
#page-nearby .cats-dot.is-on{ width:18px; background:var(--theme); }

/* ────── §4b 分类单页：不显示翻页指示点（2026-10-09 用户要求） ──────
   只有一页（无第二页可左右滑）时，指示点是**误导性控件**（会让人以为还能滑）→ 隐去；
   其占位的 18px（margin-top 12 + 点高 6）随之收回 → 分类图底到商品区 44 → 26px。
   ⚠️ 本段是**纯追加覆盖层**：多页时选择器不命中，版式与历史**一字不差**
      （这正是"有第二页就恢复到现在有光标的状态"的保证方式：多页路径根本没被改）。
   ⚠️ 判据由 JS 写类（`nearby.js` buildCategories 的 `is-single`，判据 = **页数**不是分类数），
      CSS 只认类，不自己算 —— 避免"多少格算一页"出现第二个真相源。
      回滚 = 删掉本段（无需动上面 .cats-dots / .cats-dot 任何一行）。 */
#page-nearby .category-section.is-single .cats-dots{ display:none; }

/* ───────── §5 商品流：官方精选（横滑轮换）+ 2 列网格（v2） ───────── */
#page-nearby .product-section{ padding:26px 16px 0; }
#page-nearby .sec{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
#page-nearby .sec h2{
  font-size:var(--t-title); font-weight:600; letter-spacing:-.4px; color:var(--ink);
}
#page-nearby .sec em{ font-size:var(--t-micro); font-style:normal; color:var(--muted-soft); }
/* 「查看全部」按钮：橙红主题色胶囊（原「共 3 件」灰字位置）；视觉高 28px，负外边距把触控区撑到 44px 而不改变标题行高 */
#page-nearby .sec-more{
  display:inline-flex; align-items:center; gap:1px;
  height:28px; padding:0 10px; margin:-8px -2px;
  background:var(--theme-soft);
  border:none; border-radius:var(--r-full);
  color:var(--theme);
  font-size:var(--t-caption); font-weight:600;
  white-space:nowrap; cursor:pointer;
  transition:opacity var(--ease);
}
#page-nearby .sec-more:active{ opacity:.72; }
#page-nearby .sec-more svg{
  width:12px; height:12px; fill:none;
  stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
#page-nearby .feat-wrap{
  position:relative; overflow:hidden; margin-bottom:22px;
  touch-action:pan-y;                /* 横向手势交给 JS，纵向仍可滚页 */
}
#page-nearby .feat-track{
  display:flex; gap:16px;
  transition:transform 440ms cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
#page-nearby .feat-track.no-anim{ transition:none; }   /* 无痕归零 / 拖动跟手：瞬时定位，不产生反向动画 */
#page-nearby .feat-slide{ flex:0 0 auto; width:249px; }  /* 正方形主图（= 原大卡高度 398×10/16≈249） */
#page-nearby .feed-sep{ height:1px; background:var(--hairline-soft); margin:0 0 26px; }

#page-nearby .product-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 16px;
}
/* 去卡面：白底页面上再叠白卡必然显脏，改"图片圆角 + 间距"分区
   注：类名与商品详情页"为你推荐"、我的页"收藏商品"共用，此处仅限设备页生效 */
#page-nearby .product-card{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:9px;
  transition:transform 100ms ease-out;
  cursor:pointer;
}
#page-nearby .product-card:active{ transform:scale(.97); }
#page-nearby .product-image{
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--surface-strong);
  /* 模板 .card-media 无描边（原 1px 为自加兜底，按模板还原） */
}
#page-nearby .product-badge{
  position:absolute;
  top:8px;
  left:8px;
  height:23px;
  padding:0 9px;
  display:flex;
  align-items:center;
  background:var(--theme);
  color:#fff;
  font-size:var(--t-tiny);
  font-weight:600;
  letter-spacing:.2px;
  border-radius:var(--r-full);
  box-shadow:0 2px 6px rgba(255,92,57,.28);
}
/* 标题→价格行间距：模板由 .card{gap:9px} 承担，本页由 .product-info 承担 → 6 → 9px */
#page-nearby .product-info{ padding:0; display:flex; flex-direction:column; gap:9px; }
#page-nearby .product-title{
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  line-height:1.42;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#page-nearby .product-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
#page-nearby .price{
  font-size:17px;
  font-weight:700;
  color:var(--theme);
  font-variant-numeric:tabular-nums;   /* 数字等宽，多个价格竖排对齐 */
  letter-spacing:-.2px;
  line-height:normal;                  /* 1.25 → normal（照模板） */
}
#page-nearby .price-symbol{ font-size:var(--t-micro); font-weight:600; margin-right:1px; }
#page-nearby .meta-text{ font-size:var(--t-tiny); color:var(--muted-soft); white-space:nowrap; }  /* 主动降级，把注意力让给价格 */
#page-nearby .end-tip{
  text-align:center;
  padding:30px 0 34px;
  font-size:var(--t-micro);
  color:var(--muted-soft);
  letter-spacing:.6px;
}

/* ─────────── 吸顶栏（v2 新增；独立一层，不参与滚动） ─────────── */
#page-nearby .np-stuck{
  position:absolute; top:0; left:0; right:0; z-index:250;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline-soft);
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 10px;
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms ease;
}
#page-nearby.is-stuck .np-stuck{ opacity:1; pointer-events:auto; }
#page-nearby .np-stuck-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* 白底顶栏上的定位徽章：白底 → 浅灰底 */
#page-nearby .np-loc{
  height:30px; padding:0 12px 0 10px; border-radius:var(--r-full);
  background:var(--surface-soft);
  border:none;
  display:flex; align-items:center; gap:5px;
  cursor:pointer;
}
#page-nearby .np-loc svg{
  width:14px; height:14px; fill:none; stroke:var(--theme); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
#page-nearby .np-loc b{ font-size:12.5px; font-weight:600; color:var(--ink); }
/* 白底顶栏上的登录：白底白按钮不可见 → 墨黑描边 */
#page-nearby .np-login{
  height:30px; padding:0 15px; border-radius:var(--r-full);
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  font-size:var(--t-caption);
  font-weight:600;
  display:flex; align-items:center;
  cursor:pointer;
}
/* ⚠ 2026-10-03：`#page-nearby .np-avatar`（30×30 圆头像）两条规则已删除 ——
   `#npStuckAvatar` 按用户裁定**从 DOM 移除**（改为 `#npStuckFlag` 圆形国旗，
   样式见 §2b），规则已无匹配元素（死样式）。 */
#page-nearby .np-stuck-search{
  margin-top:12px;
  height:42px;
  border-radius:var(--r-full);
  background:var(--surface-soft);
  display:flex; align-items:center; gap:10px;
  padding:0 16px;
  transform:translateY(10px);
  opacity:0;
  transition:transform 280ms cubic-bezier(.25,.46,.45,.94), opacity 280ms ease;
  cursor:pointer;
}
#page-nearby.is-stuck .np-stuck-search{ transform:translateY(0); opacity:1; }
#page-nearby .np-stuck-search svg{
  width:18px; height:18px; flex-shrink:0;
  fill:none; stroke:var(--muted); stroke-width:2.2;
}
#page-nearby .np-stuck-search span{ font-size:var(--t-body); color:var(--muted); }

/* ────── 位置切换浮窗（v2 新增；浮层保留动画；无输入框 → 点空白关闭合规） ────── */
#page-nearby .loc-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition:opacity 200ms ease;
}
#page-nearby .loc-mask.is-on{ opacity:1; pointer-events:auto; }
#page-nearby .loc-pop{
  position:absolute; left:50%; top:44%;
  width:266px;
  transform:translate(-50%,-50%) scale(.96);
  padding:24px 20px 18px;
  background:var(--canvas);
  border-radius:var(--r-lg);
  box-shadow:var(--elev);
  z-index:301;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
#page-nearby .loc-pop.is-on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
#page-nearby .loc-pop-tx{ font-size:15px; font-weight:500; line-height:1.5; color:var(--ink); }
#page-nearby .loc-pop-btn{
  margin-top:20px; width:100%; height:44px;
  border:none;
  border-radius:var(--r-sm);
  background:var(--theme);
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

/* ───────────── §6 搜索子页 / 搜索结果子页（可整段剔除） ───────────── */
/* 注：本段只改视觉值，严禁新增任何 transition——子页显隐靠"无过渡的 opacity"实现，
   见 docs/page-transition-spec.md 标准 2 / 标准 3 */
#page-nearby .subpage-full{ background:var(--canvas); }
#page-nearby .sub-header{
  background:var(--canvas);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  border-bottom:1px solid var(--hairline-soft);
}
#page-nearby .sub-back svg{ stroke:var(--ink); stroke-width:2.25; }
/* ⚠️ 2026-10-09：`.sub-title`（官方精选页的居中标题）**已删除** ——
   该页顶栏改为与搜索结果页完全同构，标题放进只读框里（用户 2026-10-09 要求）。
   删掉的原因：它是全站**唯一**使用处，留着就是死 CSS。 */
#page-nearby .sub-search-bar{
  height:46px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-full);
  padding:0 8px 0 16px;
  gap:8px;
}
#page-nearby .sub-search-bar input{ font-size:var(--t-body); color:var(--ink); }
#page-nearby .sub-search-bar.readonly input{ color:var(--muted); }
#page-nearby .sub-search-bar button{
  height:34px;
  padding:0 16px;
  border-radius:var(--r-full);
  background:var(--theme);
  color:var(--on-theme);
  font-size:var(--t-caption);
  font-weight:600;
}
#page-nearby .sub-content{ padding:16px; }
#page-nearby .sp-tag-title{
  font-size:var(--t-micro);
  font-weight:600;
  color:var(--muted-soft);
  letter-spacing:.3px;
}
#page-nearby .sp-tag{
  padding:8px 16px;
  background:var(--surface-soft);
  border-radius:var(--r-full);
  font-size:var(--t-caption);
  color:var(--ink);
}
#page-nearby .sp-tag:active{ background:var(--surface-strong); }
#page-nearby .result-content{ padding:12px 16px; }
#page-nearby .result-content .product-grid{ gap:16px; }

/* ───────── §7 全站共用浮层：登录卡 + 语言选择浮窗（如需剔除，删掉本段即可） ─────────
   注：两者都是 #appContainer 的直接子元素，**没有页面前缀可用**，故以类选择器书写；
       类名全站唯一、不跨页污染（同 nearby.css / lang.css 自身的书写方式）。
       浮层动画保留；两者都不得引入"点击空白关闭"
       （登录卡＝AGENTS 第 10 条：含输入框；语言浮窗＝强制选择，唯一出口是选中语言）。
       中文输入遮罩与密码显隐按钮的结构/类名由 ime-guard.js 与业务脚本负责，此处不涉及。 */

/* ── 7.0 登录卡的页面主题注入（每页登录卡保持原样式，只换彩色为各自导航色）──
   背景：#authOverlay 是 #appContainer 的直接子元素、**不在任何 .page 内**，
        故此前从未声明 --theme → 一直继承 :root 的橙红 #FF5C39，
        导致「除设备页外，其余 4 页的登录卡都是橙红」。
   机制：卡内 *全部* 彩色（提交按钮底/按下态、`《用户协议》`字色、去注册·去登录字色、
        两个勾选框 accent-color）都只消费 --theme / --theme-active 两枚令牌，
        故在此按页面重定义这两枚令牌即可一次性全部对齐 —— 无需逐个元素改。
   值来源：与各页皮肤逐值相同（nearby 用 :root 默认故不列）。
   打标：由业务脚本在“打开卡片那一刻”写入 data-theme（复用底导全站唯一注入点
        navigation.js 的 syncBottomNav 所写的 bottomNav[data-theme]，不另建映射表）。
   ⚠ 刻意不声明 --theme-soft：卡内目前无任何元素消费它，避免新增无用令牌。
   ⚠ 值必须与各页皮肤保持一致（页面改色时需同步此处）。 */
.auth-overlay[data-theme="raw"]{      --theme:#2F6BFF; --theme-active:#1E52D6; }
.auth-overlay[data-theme="circle"]{   --theme:#5B5BD6; --theme-active:#4646B8; }
.auth-overlay[data-theme="messages"]{ --theme:#0E9F94; --theme-active:#0A7C73; }
.auth-overlay[data-theme="profile"]{  --theme:#C13515; --theme-active:#A52A0F; }
/* data-theme 缺失或为 nearby 时走 :root 默认（橙红 #FF5C39 / #E04A2E）—— 设备页行为不变 */

/* ── 7.1 登录卡 ── */
.auth-card{
  width:320px;
  background:var(--canvas);
  border-radius:var(--r-lg);
  padding:26px 22px 22px;
  box-shadow:var(--elev);
}
.auth-title{
  font-size:var(--t-title);
  font-weight:700;
  color:var(--ink);
  margin-bottom:18px;
  letter-spacing:0;
}
.auth-input-group{ margin-bottom:12px; }
.auth-input{
  height:48px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  padding:0 14px;
  font-size:var(--t-body);
  color:var(--ink);
  transition:border-color var(--ease);
}
.auth-input::placeholder{ color:var(--muted-soft); }
.auth-input:focus{ border-color:var(--ink); background:var(--canvas); }  /* 规范：聚焦用墨黑，不用品牌色、无光晕 */
/* 验证码板块：按用户要求样式原样保留（仅确认沿用同一套令牌，不改变观感） */
.captcha-row{ margin-bottom:4px; }   /* 保持原间距（不被上方 .auth-input-group 覆盖） */
.captcha-canvas-wrap{ height:48px; border:1px solid var(--hairline); border-radius:var(--r-sm); }
.auth-check-row{ font-size:var(--t-micro); color:var(--muted); }
.auth-check-row input[type="checkbox"]{ accent-color:var(--theme); }
.auth-check-row .link-text{ color:var(--theme); cursor:pointer; }
.auth-check-row .link-text:focus-visible{ outline:2px solid var(--theme); outline-offset:2px; border-radius:2px; }
/* 「忘记密码？」引导行（2026-10-08 新增，用户要求）：
   位置＝用户协议勾选行**下方**、**卡片左对齐**；彩色＝`var(--theme)`（跟随该页登录卡主题色，
   由 §7.0 的逐页 data-theme 注入）。点击行为见 `shared/forgot-password.js`。
   ⚠️ 它是 `div` 而非 `label`：不与勾选框联动（点它不应勾选协议）。 */
.auth-forgot{
  font-size:var(--t-micro);
  font-weight:600;
  color:var(--theme);
  cursor:pointer;
  margin:0 0 10px;
}
.auth-forgot:active{ opacity:.7; }
.auth-btn{
  height:48px;
  background:var(--theme);
  color:var(--on-theme);
  border-radius:var(--r-sm);
  font-size:var(--t-subtitle);
  font-weight:600;
  letter-spacing:0;
  transition:background var(--ease);
}
.auth-btn:active{ background:var(--theme-active); opacity:1; }
.auth-switch{ font-size:var(--t-caption); color:var(--muted); }
.auth-switch span{ color:var(--theme); }
/* 关闭键：32px 圆形图标按钮（与全站 .hd-icon 同族）；
   图标色由 CSS 覆盖 JS 内联的 stroke="#888"（SVG 表现属性优先级最低） */
.auth-close{
  top:12px; right:12px;
  width:32px; height:32px;
  border-radius:var(--r-full);
}
.auth-close svg line{ stroke:var(--muted); }
.auth-close:active{ background:var(--surface-soft); }
/* 密码显隐眼睛：只统一颜色与按压态（结构/语义由业务脚本负责，默认闭眼＝掩码，不可颠倒） */
.password-wrapper .toggle-password{ border-radius:var(--r-full); }
.password-wrapper .toggle-password:active{ background:var(--surface-soft); }
.password-wrapper .toggle-password svg path,
.password-wrapper .toggle-password svg line,
.password-wrapper .toggle-password svg circle{ stroke:var(--muted-soft); }

/* ── 7.3 忘记密码 · 说明浮窗（`#forgotPwdOverlay`，2026-10-08 新增）──
   由登录卡里的「忘记密码？」打开（`shared/forgot-password.js`）。
   背景：本浮窗是 `#appContainer` 的直接子元素、**不在任何 `.page` 内** → 取不到页面
        `--theme`，故与 §7.0 登录卡**同一机制**：打开那一刻由 JS 把底导的 `data-theme`
        抄到 `.forgot-overlay` 上，此处按页面重定义彩色（值**与 §7.0 逐值相同**，页面改色时两处要同步）。
   ⚠️ 彩色只有两处消费令牌：说明正文 `.forgot-body` 与主按钮 `.forgot-btn`（其按下态用 --theme-active）
      —— 即用户要求「浮窗的彩色部分颜色（如文字、按钮等）都要和当前页面底部导航栏标签的颜色一致」。
   ⚠️ 规格与全站浮层同族：遮罩 rgba(0,0,0,.42)、卡片 --r-lg + --elev、主按钮高 44 + --r-sm；
      与 `.auth-overlay` 同为 z-index 500（两浮层**不并存**：进浮窗前登录卡已关）。 */
.forgot-overlay[data-theme="raw"]{      --theme:#2F6BFF; --theme-active:#1E52D6; }
.forgot-overlay[data-theme="circle"]{   --theme:#5B5BD6; --theme-active:#4646B8; }
.forgot-overlay[data-theme="messages"]{ --theme:#0E9F94; --theme-active:#0A7C73; }
.forgot-overlay[data-theme="profile"]{  --theme:#C13515; --theme-active:#A52A0F; }
/* data-theme 缺失或为 nearby 时走 :root 默认（橙红 #FF5C39 / #E04A2E）—— 设备页行为与登录卡一致 */
.forgot-overlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.42); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px 16px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s;
}
.forgot-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.forgot-dialog{
  width:100%; max-width:360px; background:var(--canvas);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--elev);
}
/* 演示截图：按卡片宽等比铺满（原图 500×357），圆角与输入框同族 */
.forgot-img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); }
.forgot-body{ margin-top:14px; font-size:var(--t-body); line-height:1.7; color:var(--theme); }
.forgot-actions{ margin-top:16px; }
.forgot-btn{
  width:100%; height:44px; border:none; border-radius:var(--r-sm);
  background:var(--theme); color:var(--on-theme);
  font-size:var(--t-body); font-weight:600; cursor:pointer;
}
.forgot-btn:active{ background:var(--theme-active); }

/* ── 7.2 语言选择浮窗（强制选择，无关闭按钮） ── */
.lang-picker-card{
  width:320px;
  background:var(--canvas);
  border-radius:var(--r-lg);
  padding:26px 20px 20px;
  box-shadow:var(--elev);
}
.lang-picker-title{
  font-size:var(--t-title);
  font-weight:700;
  color:var(--ink);
  text-align:center;
  letter-spacing:0;
}
.lang-picker-subtitle{
  margin-top:6px;
  font-size:var(--t-micro);
  color:var(--muted-soft);
  text-align:center;
  letter-spacing:0;
}
.lang-picker-options{ margin-top:20px; gap:8px; }
.lang-picker-option{
  display:flex; align-items:center; justify-content:space-between;
  height:48px; padding:0 16px;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  background:var(--canvas);
  color:var(--ink);
  font-size:var(--t-body);
  font-weight:400;
}
.lang-picker-option:active{ background:var(--surface-soft); }
/* 当前语言：橙红（契合页面主色调）+ 右侧橙红对勾
   （对勾用纯 CSS 绘制，不依赖字体图标、不改 HTML，避免 FA 未加载时丢失） */
.lang-picker-option.current{
  border-color:var(--theme);
  background:var(--theme-soft);
  color:var(--theme);
  font-weight:600;
}
.lang-picker-option.current::after{
  content:'';
  width:6px; height:11px;
  border-right:2px solid var(--theme);
  border-bottom:2px solid var(--theme);
  transform:rotate(45deg) translate(-2px,-2px);
  flex-shrink:0;
}
/* ── 7.4 用户协议浮窗（2026-10-20 新增）──
   由登录卡里《用户协议》打开（`shared/user-agreement.js`）。
   背景：本浮窗与 `.auth-overlay` 同为 `#appContainer` 的直接子元素、**不在任何 `.page` 内**
        → 取不到页面 `--theme`，故与 §7.0 登录卡**同一机制**：打开那一刻由 JS 把登录卡的
        `data-theme` 抄到 `.agreement-overlay` 上，此处按页面重定义彩色
        （值**与 §7.0 逐值相同**，页面改色时两处要同步）。
   ⚠️ 层级 600：**高于**登录卡 500（登录卡打开期间保持可见），低于语言选择 800 / 灯箱 1000。
   ⚠️ 关闭出口只有「我已知晓」：本段不绑背景点击，浮窗内 ESC 由 JS 吞掉。
   ⚠️ 彩色只有两处消费令牌：主按钮 `.agreement-btn`（按下态用 --theme-active）与链接色沿用 §7.1。 */
.agreement-overlay[data-theme="raw"]{      --theme:#2F6BFF; --theme-active:#1E52D6; }
.agreement-overlay[data-theme="circle"]{   --theme:#5B5BD6; --theme-active:#4646B8; }
.agreement-overlay[data-theme="messages"]{ --theme:#0E9F94; --theme-active:#0A7C73; }
.agreement-overlay[data-theme="profile"]{  --theme:#C13515; --theme-active:#A52A0F; }
/* data-theme 缺失或为 nearby 时走 :root 默认（橙红 #FF5C39 / #E04A2E）—— 设备页行为与登录卡一致 */
.agreement-overlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.5); z-index:600;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s;
}
.agreement-overlay.show{ opacity:1; visibility:visible; pointer-events:auto; }
.agreement-dialog{
  /* ⚠️ 宽度必须按**手机内容列**（430px）约束，不能按视口：
     本浮层是 position:fixed 铺满视口，横屏 / 桌面下写 520px 会溢出手机框。
     390 = 430 − 左右各 20；比登录卡（320）宽，又留足边界间距（用户 2026-10-20 拍板 20px）。
     与 App 端 `maxWidth: 390` + 外层 `padding: horizontal 20` 逐值等价。 */
  width:100%; max-width:390px; max-height:82vh;
  background:var(--canvas); border-radius:var(--r-lg); box-shadow:var(--elev);
  display:flex; flex-direction:column; overflow:hidden;
}
.agreement-title{
  flex:0 0 auto; padding:18px 20px 12px;
  font-size:var(--t-subtitle); font-weight:700; color:var(--ink); text-align:center;
  border-bottom:1px solid var(--hairline-soft);
}
/* 正文：唯一滚动容器。`overscroll-behavior:contain` 防滚动穿透到登录卡后面的页面 */
.agreement-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 20px; font-size:var(--t-body); line-height:1.75; color:var(--body);
  white-space:pre-wrap; word-break:break-word;
  -webkit-overflow-scrolling:touch;
  /* 用户 2026-10-20 要求：隐藏滚动条（仍可正常触摸滑动 / 滚轮滚动）。
     与 `.viewer-scroll`（circle.css:123）同一写法，不另造一套。 */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.agreement-body::-webkit-scrollbar{ width:0; height:0; display:none; }
.agreement-footer{
  flex:0 0 auto; padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--hairline-soft); background:var(--canvas);
}
.agreement-hint{ padding:8px 0; text-align:center; font-size:var(--t-micro); color:var(--muted-soft); }
.agreement-btn{
  width:100%; height:48px; border:none; border-radius:var(--r-sm);
  background:var(--theme); color:var(--on-theme);
  font-size:var(--t-body); font-weight:600; cursor:pointer;
}
.agreement-btn:active{ background:var(--theme-active); }
.agreement-hint[hidden], .agreement-btn[hidden]{ display:none; }