/* ==========================================================================
   闲置频道 v2（20260923id2）· 按《宜宇_闲置频道_四tab_设计稿》落地
   --------------------------------------------------------------------------
   全部 id2- 前缀 —— 与 v1 的 zl-*/yx-*/il-* 并存，删掉本文件即回滚。

   配色裁决（设计稿 13:55）：
     --m-bg #FAFCFA（旧暖白已废）/ --m-line #E4EAE6（旧暖褐已废）
     / --m-soft #F3F7F4（旧米黄已废）
     橙 --a700 只许 3 处：折扣章 / 交易 CTA / 求购标；
     底部栏选中 · 分段 · 分类图标 · 排序 · 筛选全选一律回苔绿 --g600。
   0 渐变 · 阴影两档 · 触控 ≥44px（小按钮用伪元素外扩，视觉尺寸不动）
   ========================================================================== */

html[data-zone="idle"] {
  --id2-bg: #FAFCFA;
  --id2-card: #FFFFFF;
  --id2-soft: #F3F7F4;
  --id2-line: #E4EAE6;
  --id2-line2: #EDF2EE;
  --id2-ink: #1F2A24;
  --id2-ink2: #4A5A51;
  --id2-ink3: #64786D;
  --id2-ink4: #8C9A92;
  --id2-g600: #3F7D5C;
  --id2-g100: #E7F1EA;
  --id2-g50: #F2F8F4;
  --id2-a700: #A9603A;
  --id2-b600: #357197;   /* 置换标（设计稿 --b600） */
  --id2-b50: #EFF6FA;
  --id2-a100: #FBEDE2;
  --id2-a50: #FDF6EF;
  --id2-o600: #8C5024;
  --id2-r: 16px;
  --id2-r3: 12px;
  --id2-r4: 8px;
  --id2-sh: 0 1px 2px rgba(31,42,36,.05);
  --id2-sh2: 0 2px 8px rgba(31,42,36,.06);
}
html[data-zone="idle"] body { background: var(--id2-bg); }

.id2-card { background: var(--id2-card); border: 1px solid var(--id2-line);
  border-radius: var(--id2-r); box-shadow: var(--id2-sh); }

/* ---------- 商品分类 10 宫格 ---------- */
.id2-cathd { display: flex; align-items: center; padding: 12px 12px 6px;
  font-size: 13px; font-weight: 650; color: var(--id2-ink); }
.id2-cathd__sp { flex: 1; }
.id2-cathd__all { font-size: 11px; color: var(--id2-g600); font-weight: 650;
  text-decoration: none; border: 0; background: none; font-family: inherit; cursor: pointer; }
.id2-cathd__all.on { color: var(--id2-ink3); font-weight: 500; }

.id2-catgrid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 4px 8px; }
.id2-cat { border: 0; background: none; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 9px 0; cursor: pointer; font-family: inherit; color: var(--id2-ink2);
  font-size: 11px; border-radius: 10px; text-decoration: none; transition: .16s; }
.id2-cat .box { width: 44px; height: 44px; border-radius: 14px; background: var(--id2-soft);
  border: 1px solid var(--id2-line); display: flex; align-items: center; justify-content: center;
  color: var(--id2-g600); }
.id2-cat .box svg { width: 22px; height: 22px; }
.id2-cat.on .box { background: var(--id2-g600); border-color: var(--id2-g600); color: #fff; }
.id2-cat.on { color: var(--id2-g600); font-weight: 650; }

/* ---------- 卡片：交易方式 ---------- */
.id2-deals { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.id2-deal { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px;
  border-radius: var(--id2-r4); background: var(--id2-soft); border: 1px solid var(--id2-line);
  font-size: 11px; color: var(--id2-ink2); }
.zl-c__ago { font-size: 11px; color: var(--id2-ink3); }

/* ---------- 消息页 ---------- */
.id2-todo { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 10px 12px;
  background: var(--id2-a50); border: 1px solid var(--id2-a100); border-radius: var(--id2-r3);
  text-decoration: none; }
.id2-todo svg { color: var(--id2-g600); flex: none; }
.id2-todo__t { font-size: 12px; font-weight: 650; color: var(--id2-o600); }
.id2-todo__d { font-size: 11px; color: var(--id2-ink2); margin-top: 2px; }

.id2-seg { display: flex; gap: 4px; padding: 4px; margin: 10px 14px 0; background: var(--id2-soft);
  border-radius: 12px; border: 1px solid var(--id2-line); }
.id2-seg__i { flex: 1; height: 36px; border: 0; background: none; border-radius: 9px; font-size: 13px;
  color: var(--id2-ink3); cursor: pointer; font-family: inherit; display: flex; align-items: center;
  justify-content: center; gap: 4px; transition: .16s; }
.id2-seg__i.on { background: var(--id2-card); color: var(--id2-g600); font-weight: 650; box-shadow: var(--id2-sh); }
.id2-n { font-size: 11px; font-variant-numeric: tabular-nums; }

.id2-list { padding: 10px 14px 0; }
.id2-thread { display: flex; align-items: flex-start; gap: 10px; padding: 12px;
  background: var(--id2-card); border: 1px solid var(--id2-line); border-radius: var(--id2-r3);
  margin-bottom: 8px; text-decoration: none; }
.id2-av { width: 44px; height: 44px; border-radius: 50%; flex: none; background-size: cover;
  background-position: center; background-color: var(--id2-soft); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.id2-av--sys { background: var(--id2-g50); border: 1px solid var(--id2-g100); color: var(--id2-g600); }
.id2-thread__bd { flex: 1; min-width: 0; }
.id2-thread__hd { display: flex; align-items: center; gap: 6px; }
.id2-thread__nm { font-size: 13px; font-weight: 650; color: var(--id2-ink); }
.id2-thread__tm { margin-left: auto; font-size: 11px; color: var(--id2-ink3); flex: none; }
.id2-thread__last { font-size: 12px; color: var(--id2-ink3); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id2-thread__it { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 4px 7px;
  background: var(--id2-soft); border-radius: var(--id2-r4); max-width: 100%; }
.id2-thread__itn { flex: 1; min-width: 0; font-size: 11px; color: var(--id2-ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id2-thread__it .id2-price { font-size: 11.5px; flex: none; }
.id2-thread__th { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none;
  background: var(--id2-soft); }

.id2-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--id2-r4); font-size: 11px; font-weight: 650;
  background: var(--id2-g50); border: 1px solid var(--id2-g100); color: var(--id2-g600); }
.id2-tag.a { background: var(--id2-a50); border-color: var(--id2-a100); color: var(--id2-a700); }

.id2-note2 { margin: 10px 14px 0; font-size: 11.5px; line-height: 1.8; color: var(--id2-ink3); }

/* ---------- 空态 ---------- */
.id2-empty { padding: 10vh 24px; text-align: center; }
.id2-empty__t { font-size: 15px; font-weight: 650; color: var(--id2-ink); }
.id2-empty__d { margin-top: 6px; font-size: 12.5px; line-height: 1.8; color: var(--id2-ink3); }
.id2-empty2 { padding: 16px 14px 18px; font-size: 12.5px; color: var(--id2-ink3); text-align: center; }

/* ---------- 社区：三种诉求入口 ---------- */
.id2-ask3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 14px 4px; }
.id2-ask { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 4px;
  border: 1px solid var(--id2-line); border-radius: var(--id2-r3); background: var(--id2-soft);
  text-decoration: none; }
.id2-ask__ico { width: 34px; height: 34px; border-radius: 50%; background: var(--id2-card);
  border: 1px solid var(--id2-line); color: var(--id2-g600);
  display: flex; align-items: center; justify-content: center; }
.id2-ask__t { font-size: 13px; font-weight: 650; color: var(--id2-ink); }
.id2-ask__d { font-size: 11px; color: var(--id2-ink3); }

/* ---------- 我的闲置 ---------- */
.id2-me { display: flex; align-items: center; gap: 12px; padding: 14px; }
.id2-me__av { width: 52px; height: 52px; border-radius: 50%; flex: none; background-size: cover;
  background-position: center; background-color: var(--id2-soft); }
.id2-me__bd { flex: 1; min-width: 0; }
.id2-me__nm { font-size: 16px; font-weight: 700; color: var(--id2-ink); }
.id2-me__sub { margin-top: 4px; font-size: 11.5px; color: var(--id2-ink3); }
.id2-me__sub b { color: var(--id2-ink2); }
.id2-me__edit { font-size: 12px; color: var(--id2-g600); font-weight: 650; text-decoration: none; flex: none; }

.id2-stat4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--id2-line2); }
.id2-stat4 .g { padding: 11px 4px; text-align: center; border-right: 1px solid var(--id2-line2); }
.id2-stat4 .g:last-child { border-right: 0; }
.id2-stat4 b { display: block; font-size: 18px; font-weight: 800; color: var(--id2-ink);
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.id2-stat4 span { font-size: 11px; color: var(--id2-ink3); }

.id2-ch { display: flex; align-items: center; padding: 12px 14px 0; }
.id2-ch__t { font-size: 13.5px; font-weight: 650; color: var(--id2-ink); }
.id2-ch__sp { flex: 1; }
.id2-ch__more { font-size: 11px; color: var(--id2-g600); font-weight: 650; text-decoration: none; }

.id2-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 0; }
.id2-chip { height: 30px; padding: 0 11px; border-radius: var(--id2-r4); background: var(--id2-soft);
  border: 1px solid var(--id2-line); color: var(--id2-ink3); font-size: 12px; cursor: pointer;
  font-family: inherit; flex: none; white-space: nowrap; transition: .16s; }
.id2-chip.on { background: var(--id2-g600); color: #fff; border-color: var(--id2-g600); font-weight: 650; }

.id2-manage { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--id2-line2); }
.id2-manage__th { width: 56px; height: 56px; border-radius: 10px; flex: none; background-size: cover;
  background-position: center; background-color: var(--id2-soft); }
.id2-manage__bd { flex: 1; min-width: 0; }
.id2-manage__t { display: block; font-size: 13px; font-weight: 650; color: var(--id2-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.id2-manage__num { display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-size: 11px; color: var(--id2-ink3); }
.id2-price { font-size: 13px; font-weight: 700; color: var(--id2-ink); font-variant-numeric: tabular-nums; }
.id2-price i { font-style: normal; font-size: 11px; }
.id2-manage__ops { display: flex; gap: 6px; margin-top: 8px; }

.id2-btn-xs { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--id2-line);
  background: var(--id2-soft); color: var(--id2-ink2); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; cursor: pointer; font-family: inherit;
  text-decoration: none; position: relative; }
.id2-btn-xs::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px; }
.id2-btn-xs.dis { opacity: .55; }

.id2-toast { margin: 10px 14px 0; font-size: 12.5px; color: var(--id2-g600); text-align: center; }

.id2-row { display: flex; align-items: center; gap: 10px; padding: 13px 14px; text-decoration: none; }
.id2-row svg { color: var(--id2-ink3); flex: none; }
.id2-row__t { flex: 1; font-size: 13px; color: var(--id2-ink); }
.id2-row__n { margin-left: 6px; font-size: 11px; color: var(--id2-ink3); font-variant-numeric: tabular-nums; }
.id2-ol { height: 1px; background: var(--id2-line2); margin: 0 14px; }

/* ---------- 四 tab 底部栏（去掉中间凸起后的等分修正） ----------
   旧 .il-tb__row 高 62px + align-items:flex-end 是为了给中央隆起让位；
   四 tab 等高后回 52px 居中（设计稿 ① 底部栏规格）。                     */
.il-tb__row--four { height: 52px; align-items: center; }
.il-tb__row--four .il-tb__i { flex: 1; }

/* 详情页 / 发布页是全屏层级，不带底栏 —— 让位的 84px 下内边距要一并收回 */
html[data-zone="idle"] .yq-app--idle-full .yq-main {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 深色微调 ---------- */
html[data-theme="dark"][data-zone="idle"] body { background: #12180F; }
html[data-theme="dark"] .id2-card,
html[data-theme="dark"] .id2-chip,
html[data-theme="dark"] .id2-deal,
html[data-theme="dark"] .id2-ask,


/* ==========================================================================
   闲置社区（/idle/community）· 1:1 对齐设计稿视图 2（20260924cm1）
   --------------------------------------------------------------------------
   本页自带顶栏（设计稿 bar：标题 + 搜索 + 发帖），所以 layout 的 IdleHeader
   在社区页让位（default.vue 的 cmSelfHd），.yq-main 的上内边距一并归零。
   规格全部照抄设计稿 CSS：bar 44 / seg 34 / post r3+12 / pgrid 1:1 r6 gap4
   / 色标 h22 r4 fs11 w650。
   ========================================================================== */
html[data-zone="idle"] .yq-app--cm-self .yq-main { padding-top: 0; }

.id2-cm { display: flex; flex-direction: column; min-height: 100%; background: var(--id2-bg); }
.id2-cscr { flex: 1; }

/* ---------- 顶栏 ---------- */
.id2-cbar { height: 44px; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--id2-card); border-bottom: 1px solid var(--id2-line2); }
.id2-cbar__tt { font-size: 16px; font-weight: 650; letter-spacing: .5px; color: var(--id2-ink); }
.id2-sp { flex: 1; }
.id2-icbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--id2-ink2); cursor: pointer; border-radius: 12px; padding: 0; }
.id2-icbtn:active { background: var(--id2-soft); }

/* ---------- 基础原子（设计稿 .ic / .row / .t* / .w* / .c3 / .num） ---------- */
.id2-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.id2-ic.s { width: 16px; height: 16px; }
.id2-ic.l { width: 24px; height: 24px; }
.id2-ic.xs { width: 14px; height: 14px; }
.id2-row { display: flex; align-items: center; gap: 8px; }
.id2-t11 { font-size: 11px; }
.id2-t12 { font-size: 12px; }
.id2-t13 { font-size: 13px; }
.id2-t14 { font-size: 14px; }
.c3 { color: var(--id2-ink3); }
.w65 { font-weight: 650; }
.w6 { font-weight: 600; }
.id2-num { font-variant-numeric: tabular-nums; }
.id2-pad { padding: 10px 14px 0; }

/* ---------- 五分段（设计稿 .seg） ---------- */
.id2-seg { display: flex; gap: 4px; padding: 4px; margin: 10px 14px 0;
  background: var(--id2-soft); border-radius: 12px; border: 1px solid var(--id2-line2); }
.id2-seg button { flex: 1; height: 34px; border: 0; background: none; border-radius: 9px;
  font-size: 13px; color: var(--id2-ink3); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .15s, color .15s; padding: 0; }
.id2-seg button.on { background: var(--id2-card); color: var(--id2-g600); font-weight: 650;
  box-shadow: var(--id2-sh); }

/* ---------- 本周话题（设计稿 .topiccc） ---------- */
.id2-topiccc { border: 1px solid var(--id2-g100); background: var(--id2-g50);
  border-radius: var(--id2-r3); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.id2-topiccc__bd { flex: 1; min-width: 0; }

/* ---------- 帖子卡（设计稿 .post） ---------- */
.id2-post { background: var(--id2-card); border: 1px solid var(--id2-line);
  border-radius: var(--id2-r3); padding: 12px; }
.id2-av32 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--id2-soft); flex: none; }
.id2-post__au { flex: 1; min-width: 0; }
.id2-post__ti { font-size: 14px; font-weight: 650; margin-top: 9px; line-height: 1.5;
  color: var(--id2-ink); }
.id2-pbody { font-size: 13px; line-height: 1.65; color: var(--id2-ink2); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.id2-post__ft { display: flex; align-items: center; gap: 8px; margin-top: 11px; }

/* ---------- 九宫格（设计稿 .pgrid：1:1 / r6 / gap4） ---------- */
.id2-pgrid { display: grid; gap: 4px; margin-top: 9px; }
.id2-pgrid.g2 { grid-template-columns: 1fr 1fr; }
.id2-pgrid.g3 { grid-template-columns: repeat(3, 1fr); }
.id2-pgrid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px;
  display: block; background: var(--id2-soft); }

/* ---------- 三型色标（设计稿：求购橙 / 免费送绿 / 置换蓝，沿用站内既有色） ---------- */
.id2-req, .id2-free, .id2-swap { display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 7px; border-radius: var(--id2-r4); color: #fff;
  font-size: 11px; font-weight: 650; flex: none; }
.id2-req { background: var(--id2-a700); }
.id2-free { background: var(--id2-g600); }
.id2-swap { background: var(--id2-b600); }
.id2-tag-n { display: inline-block; background: var(--id2-soft); border: 1px solid var(--id2-line);
  color: var(--id2-ink3); border-radius: var(--id2-r4); padding: 1px 7px; font-size: 11px;
  font-weight: 600; flex: none; }

/* ---------- 置换对比（设计稿：我有 → 想换） ---------- */
.id2-swap-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.id2-swap__side { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.id2-swap__side img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none;
  background: var(--id2-soft); }
.id2-swap__tx { min-width: 0; }
.id2-swap__tx div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 按钮（设计稿 .btn / .xs / .a / .gh / .blk） ---------- */
.id2-btn { height: 44px; border-radius: var(--id2-r3); border: 1px solid var(--id2-line);
  background: var(--id2-card); color: var(--id2-ink); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font-family: inherit; padding: 0 14px; text-decoration: none; }
.id2-btn.xs { height: 28px; font-size: 12px; border-radius: 6px; padding: 0 10px; }
.id2-btn.sm { height: 36px; font-size: 13px; border-radius: var(--id2-r4); }
.id2-btn.a { background: var(--id2-a700); color: #fff; border-color: var(--id2-a700); }
.id2-btn.gh { background: var(--id2-soft); border-color: transparent; color: var(--id2-ink2); }
.id2-btn.blk { width: 100%; }

/* ---------- chip（求购的预算 / 成色 / 同城） ---------- */
.id2-chip.sm { height: 24px; font-size: 11px; }

/* ---------- 互动（赞 / 评 / 清单） ---------- */
.id2-act { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none;
  padding: 0; color: var(--id2-ink3); font-size: 11px; cursor: pointer; font-family: inherit; }
.id2-act:active { opacity: .6; }

/* ---------- 骨架 / 空态 ---------- */
.id2-skel { background: var(--id2-soft); border-color: var(--id2-line2);
  animation: id2-pulse 1.2s ease-in-out infinite; }
@keyframes id2-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.id2-empty { padding: 48px 24px; text-align: center; color: var(--id2-ink3); }
.id2-empty svg { color: var(--id2-ink4); margin-bottom: 10px; }
.id2-empty__t { font-size: 14px; font-weight: 650; color: var(--id2-ink2); margin-bottom: 6px; }
.id2-empty__d { font-size: 12.5px; line-height: 1.7; }

html[data-theme="dark"] .id2-seg button.on { background: #2C3A2F; }
html[data-theme="dark"] .id2-btn.gh { background: #12180F; }


/* ---------- 发社区帖（/idle/post，20260924cm1） ---------- */
.id2-fld { margin-bottom: 12px; }
.id2-fld__k { display: block; font-size: 12px; color: var(--id2-ink3); margin-bottom: 6px; font-weight: 600; }
.id2-fld__k em { font-style: normal; font-weight: 400; color: var(--id2-ink4); margin-left: 5px; }
.id2-fld__pair { display: flex; align-items: center; gap: 8px; }
.id2-fld__pair .id2-in { flex: 1; min-width: 0; }
.id2-in { width: 100%; height: 42px; border: 1px solid var(--id2-line); border-radius: var(--id2-r4);
  background: var(--id2-card); color: var(--id2-ink); font-size: 14px; padding: 0 11px;
  font-family: inherit; box-sizing: border-box; }
.id2-in:focus { outline: 0; border-color: var(--id2-g600); }
.id2-ta { width: 100%; border: 1px solid var(--id2-line); border-radius: var(--id2-r4);
  background: var(--id2-card); color: var(--id2-ink); font-size: 14px; line-height: 1.6;
  padding: 10px 11px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.id2-ta:focus { outline: 0; border-color: var(--id2-g600); }
.id2-sw2 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--id2-ink2);
  margin-bottom: 12px; cursor: pointer; }
.id2-sw2 input { width: 17px; height: 17px; accent-color: var(--id2-g600); }
.id2-ups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.id2-up { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  background: var(--id2-soft); }
.id2-up img { width: 100%; height: 100%; object-fit: cover; display: block; }
.id2-up__x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.id2-up--add { border: 1px dashed var(--id2-line); background: var(--id2-soft);
  color: var(--id2-ink3); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; cursor: pointer; font-family: inherit; }
.id2-err { font-size: 12.5px; color: var(--id2-a700); background: var(--id2-a50);
  border: 1px solid var(--id2-a100); border-radius: var(--id2-r4); padding: 8px 11px;
  margin-bottom: 10px; }
.id2-btn[disabled] { opacity: .6; cursor: default; }