/* ═══════════════════════════════════════════════════════════════
   回收页皮肤 v1.0 · 1:1 复刻 client-v2.html 的回收页（#p-raw）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中对应 1 行 link。
   机制：加载于所有既有样式之后，靠"同权重后者生效"覆盖旧值；严禁 !important。
   依赖：复用 skin-nearby.css 声明的 :root 令牌（本文件置于其后加载）。
   范围：仅 #page-raw（回收页）。不触碰设备页/详情/公示/客服/我的。
   ───────────────────────────────────────────────────────────────
   保留的原类名（不得改名，JS 依赖）：
     #recycleInquiryList（app.js 点击委托容器）、.recycle-inquiry-card（命中目标）、
     data-recycle-type（传参）、.recycle-announce-card + data-ann-role（后台公告填充）、
     rawLoginBtn / rawUserAvatar / rawUserName（登录态同步）
   结构说明（2026-09-26 更新）：12 个卡片 DOM 一字未改，仍为
     .recycle-inquiry-card > .recycle-inquiry-main > (.recycle-inquiry-icon + .recycle-inquiry-name)
                            + .recycle-inquiry-action
     本版用 CSS 网格重排三者位置：.recycle-inquiry-main 设 display:contents「透传」，
     使 图标 / 名称 / 引导文案 成为卡片网格的直接子项，
     引导文案因此得以固定位进「图片内部下方居中」（无需移动 DOM、零误删风险）。
     图标为「有图隐藏 / 缺图兜底」：有图时完全隐藏图标、仅显示图片；
     缺图时退回居中大图标（保底不出现空格子）。
     .recycle-inquiry-action 由 v2 的 display:none 恢复为「浅主题底胶囊」。
   ═══════════════════════════════════════════════════════════════ */

/* 主题色：本页为蓝色（v2 回收页主题）。
   注：仅作用于 #page-raw 内部元素；底导选中色由 .bottom-nav[data-theme="raw"] 独立控制 */
#page-raw{ --theme:#2F6BFF; --theme-active:#1E52D6; --theme-soft:#EEF4FF; }

/* ─────────────── §1 页面底 + 顶栏（54px，照 v2 .hd） ─────────────── */
#page-raw{ background:var(--canvas); color:var(--ink); }
#page-raw .recycle-page{ background:var(--canvas); }
#page-raw .recycle-header{
  flex-shrink:0;
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--canvas);
}
#page-raw .recycle-title{
  font-size:var(--t-title);
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
}
#page-raw .right-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* 登录：墨黑描边胶囊（v2 .btn-login） */
#page-raw .login-btn{
  width:auto; min-width:0; height:32px; padding:0 15px;
  background:none;
  border:1px solid var(--ink);
  border-radius:var(--r-full);
  color:var(--ink);
  font-size:var(--t-caption);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition:transform 100ms ease-out;
}
#page-raw .login-btn:active{ transform:scale(.95); }
/* 优先级需高于上方 display:flex，否则已登录时不隐藏 */
#page-raw .login-btn.hidden{ display:none; }
/* 已登录：头栏只显示用户名，不显示头像（与设备页一致；app.js 同步置 none，此处双保险） */
#page-raw .user-avatar{ display:none; }
#page-raw .user-name{
  height:32px; padding:0 15px 2px; box-sizing:border-box;
  border:1px solid var(--ink);
  border-radius:var(--r-full);
  background:none;
  color:var(--ink);
  font-size:var(--t-caption);
  font-weight:600;
  display:flex; align-items:center;
  /* ⚠ 2026-10-03 光学居中修正（用户真机反馈「偏左下方」，像素实测）：
     中文墨迹在字体盒内**天然偏低** —— 32px 胶囊里墨迹上留白 11px、下留白 9px
     （文字墨迹中心比胶囊中心低 1.0px）。
     治法：行高 32→30 + 底部 2px 内边距（border-box，胶囊总高仍 32）
     → 文字整体上移 1px；该写法同时兼容 display:block（app.js 改写）与 display:flex。
     ⚠ 不补偿水平方向：实测偏左 0.65px 属 CJK 字形在字身框内的天然左右不对称，
       补偿值会随昵称字符变化而失效。 */
  line-height:30px;
  max-width:150px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ─────────────────────── §2 滚动容器 ─────────────────────── */
#page-raw .recycle-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 16px calc(17px + env(safe-area-inset-bottom,0px));
  background:var(--canvas);
}

/* ─────── §3 业务公告卡（沿用原 class 与 data-ann-role，外观照 v2 .ann） ─────── */
#page-raw .recycle-announce-card{
  margin-bottom:0;
  padding:18px;
  border:none;
  border-radius:var(--r-lg);
  background:var(--theme-soft);
}
#page-raw .recycle-announce-header{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
#page-raw .recycle-announce-header svg{ width:15px; height:15px; flex-shrink:0; stroke:var(--theme); }
#page-raw .recycle-announce-title{
  font-size:var(--t-micro); font-weight:600; color:var(--theme); letter-spacing:.3px;
}
#page-raw .recycle-announce-highlight{
  font-size:17px; font-weight:600; line-height:1.4;
  color:var(--ink); letter-spacing:-.2px; margin-bottom:0;
}
#page-raw .recycle-announce-detail{
  margin:8px 0 0; font-size:var(--t-caption); line-height:1.62; color:var(--body);
}
#page-raw .recycle-announce-cta{
  margin-top:12px; font-size:var(--t-caption); font-weight:600; line-height:1.6; color:var(--theme);
}

/* ───────────────── §4 区块标题 + 分组标题 ───────────────── */
#page-raw .recycle-sec{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:26px 0 14px;
}
#page-raw .recycle-sec h2{
  font-size:var(--t-title); font-weight:600; letter-spacing:-.4px; color:var(--ink);
}
#page-raw .recycle-sec em{ font-size:var(--t-micro); font-style:normal; color:var(--muted); }
#page-raw .recycle-grp{
  position:relative;
  font-size:var(--t-micro); font-weight:600; color:var(--muted);
  letter-spacing:.4px; margin:22px 0 10px;
  padding-left:10px;
}
/* 分组标记：3×11px 主题色小竖条（本页唯一的主题色锚点，强化分组扫读） */
#page-raw .recycle-grp::before{
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:11px;
  background:var(--theme);
  border-radius:2px;
}
/* 紧贴区块标题的首个分组不再另加顶部间距（v2：.sec + .grp） */
#page-raw .recycle-inquiry-list > .recycle-grp:first-child{ margin-top:2px; }

/* ─────── §5 询价宫格（3 列方形图；图片为主、图标为辅） ───────
   降级保护：不支持 display:contents 的旧浏览器退回原纵向 flex 排布
   （引导胶囊会落到名称下方），功能与可点性不受影响。 */
#page-raw .recycle-inquiry-list{ display:block; }   /* 覆盖 base.css 的竖排 flex */
#page-raw .recycle-icat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 12px;
}
#page-raw .recycle-icat-grid:last-child{ margin-bottom:17px; }   /* 原 34px；用户要求底部留白减半 */

#page-raw .recycle-inquiry-card{
  position:relative;
  width:100%;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"tile" "name";
  row-gap:9px;
  align-items:start;
  text-align:center;
  cursor:pointer;
  transition:transform 100ms ease-out;
}
#page-raw .recycle-inquiry-card:active{ transform:scale(.94); }

/* 中间块「透传」：使 图标 / 名称 / 引导文案 直接成为卡片网格项（DOM 未动） */
#page-raw .recycle-inquiry-main{ display:contents; }

/* 方形图块：1:1；**直接白底呈现，无底色 / 无描边 / 无圆角裁切**（2026-09-28 用户确认）。
   背景：原样式写了 `background:--surface-strong` + `inset 描边` + `border-radius:14px`，
   但图片是 `position:absolute;inset:0;100%×100%` 完全覆盖，且 12 张素材四角均纯白
   → 三者实际都不可见；App 端因 `BoxDecoration.border` 会挤压子元素而暴露成"灰边框"，
   为双端彻底一致，此处同步去除（`overflow:hidden` 保留，无圆角时不产生裁切效果）。 */
#page-raw .recycle-inquiry-icon{
  grid-area:tile;
  position:relative;
  width:100%; height:auto;
  aspect-ratio:1/1;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--theme);
}
/* 真图：铺满图块、不裁切（object-fit:contain 保证方形图块的规整） */
#page-raw .recycle-inquiry-icon img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}

/* ── 图标仅在缺图态显示 ──
   有图：完全隐藏图标，仅显示图片（用户拍板：图片为主，不叠任何图标）
   缺图：退回居中大图标（沿用改造前的兜底观感，保底不出现空格子） */
#page-raw .recycle-inquiry-icon:not(.no-img) svg,
#page-raw .recycle-inquiry-icon:not(.no-img) i{
  display:none;
}

/* 缺图态：浅主题底 + 居中图标 30px（34→30 不再抢戏） */
#page-raw .recycle-inquiry-icon.no-img{ background:var(--theme-soft); }
#page-raw .recycle-inquiry-icon.no-img img{ display:none; }
#page-raw .recycle-inquiry-icon.no-img svg,
#page-raw .recycle-inquiry-icon.no-img i{
  position:static;
  width:auto; height:auto;
  background:none; box-shadow:none;
  font-size:30px;
}
#page-raw .recycle-inquiry-icon.no-img svg{ width:30px; height:30px; padding:0; }

/* 名称：居中方块下方（11.5px 魔法值 → 令牌 --t-micro 12px） */
#page-raw .recycle-inquiry-name{
  grid-area:name;
  justify-self:stretch;
  min-width:0;
  font-size:var(--t-micro);
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
  text-align:center;
  padding:0;                          /* 覆盖 base.css 的 padding-right:8px */
  white-space:normal;
}

/* 引导胶囊：落在「图片内部下方」居中
   配色必须「跨背景成立」——图片多为白底，缺图态图块又是浅主题底，
   故取「白底 + 主题描边 + 深主题字」：白图/照片/缺图态三种背景都清晰可辨。
   可读性：深主题字 #1E52D6 on #FFF = 6.49:1（优于实心主题底+白字的 4.5:1） */
#page-raw .recycle-inquiry-action{
  grid-area:tile;
  align-self:end; justify-self:center;
  position:relative; z-index:3;
  display:inline-flex; align-items:center; gap:3px;
  margin:0 0 8px;
  padding:4px 9px;
  max-width:calc(100% - 10px);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(47,107,255,.32);
  border-radius:var(--r-full);
  color:var(--theme-active);
  font-size:var(--t-tiny);
  font-weight:600;
  line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
/* 小屏/长文案（km/vi/en）自动省略，右侧箭头不被挤掉 */
#page-raw .recycle-inquiry-action > span:first-child{
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#page-raw .recycle-inquiry-arrow{
  font-size:var(--t-micro);
  line-height:1;
  opacity:.6;
  flex-shrink:0;
}