/* ==========================================================================
   宜宇闲置 · 独立皮肤（idle.css）
   --------------------------------------------------------------------------
   只在 <html data-zone="idle"> 下加载。目标：进去就相当于另一个系统。
   与主站（户外绿）、优选（薄荷）同属一套薄荷家族：
     闲置 = 薄荷 —— 「循环再出发」的干净与可信。
            ★ 2026-09-20：应「商城/闲置/图文/公益统一用新颜色」改为薄荷，色阶与 mall.css 同值。
   做法（与 mall.css 同构）：
     1) 覆盖主站设计变量（主色 → 薄荷）
     2) 独立 chrome：il-hd 顶栏 + il-tb 底部栏（中央隆起 = 发布 CTA）
     3) 关掉主站 fab / 主 tabbar
   页面内容自身的 zl-* 样式在 app2026.css，颜色全部走变量，自动继承薄荷。

   ★ 2026-09-20 换肤（用户反馈「屎黄色不好看、不高级」）
     旧配色的问题有两处，都是「暖黄堆叠」造成的廉价感：
       a) --grad-brand 是一段 琥珀→棕 的渐变（顶栏 + 发布按钮都在用）
       b) --accent-* 也是同一族琥珀，且 --il-bg 是暖米底
     三样叠在一起 = 满屏土黄。
     新配色把「主色」与「点缀色」彻底分开：
       主色  = 薄荷（干净、可信，与全站新配色一致）
       点缀  = 雾青（小面积、有功能语义，只用在闲鱼导流条）
       底色  = 冷调中性灰（去黄，让商品图自己出彩）
     ⚠️ 别再往这里加暖黄/香槟金 —— 用户明确否掉了黄系。
     ⚠️ 主色已统一为薄荷，别再改回墨靛/琥珀。
   ========================================================================== */

/* ---------- 1. 变量覆写：品牌色 → 墨靛 ---------- */
html[data-zone="idle"] {
  /* 品牌色阶：色相 H232 (墨靛)，S/L 与主站绿同档位，三套色阶明度/饱和完全一致。
     这一族是「主体色」—— 顶栏、发布按钮、选中态、链接都取自它。 */
  /* 20260924p0：按《宜宇_闲置频道_四tab_设计稿》改为苔绿系
     （设计稿 --g600 #3F7D5C / --g500 #4C8F6B / --g100 #E7F1EA / --g50 #F2F8F4），
     旧的亮薄荷 #1fbe66/#12a054 与设计稿完全对不上 */
  --brand-50: #f2f8f4;
  --brand-100: #e7f1ea;
  --brand-200: #cfe3d6;
  --brand-300: #a9cdb6;
  --brand-400: #7fb895;
  --brand-500: #4c8f6b;
  --brand-600: #3f7d5c;
  --brand-700: #35684d;
  --brand-800: #2c5640;
  --brand-900: #234533;

  /* 点缀色阶：雾青 H180 —— 与主站绿拉开色相，与墨靛同属冷调。
     只允许小面积使用（闲鱼导流条、状态标签）。 */
  --accent-50:  #eefaf9;
  --accent-100: #d3f2ef;
  --accent-200: #a9e6e1;
  --accent-300: #74d3cd;
  --accent-400: #43b9b3;
  --accent-500: #229b96;
  --accent-600: #167c79;
  --accent-700: #146360;
  --accent-800: #13504e;
  --accent-900: #123f3e;

  /* 中性灰：刻意去黄。旧版 --il-bg:#fbf7f0 的暖米底是「土」的第二来源。 */
  /* 20260924p0：对齐设计稿 --ink/--line/--bg */
  --il-ink:    #1f2a24;
  --il-ink-2:  #4a5a51;
  --il-ink-3:  #8c9a92;
  --il-line:   #e4eae6;
  --il-bg:     #fafcfa;   /* 设计稿品牌底白 */

  --bg-base:    var(--il-bg);
  --bg-raise-2: #ffffff;
  --border-1:   var(--il-line);
  --text-primary: var(--il-ink);
  --text-second:  var(--il-ink-2);
  --text-third:   var(--il-ink-3);

  /* 20260924p0：设计稿裁决「0 渐变」→ 主色一律纯苔绿 */
  --grad-brand:      linear-gradient(128deg, #3f7d5c 0%, #3f7d5c 52%, #3f7d5c 100%);
  --grad-brand-soft: linear-gradient(128deg, rgba(63,125,92,.14), rgba(63,125,92,.08));

  /* 主色阴影也要跟着换 —— 旧值写死了琥珀 rgba，换色不换影 = 按钮发光发黄 */
  --sh-brand: 0 6px 18px rgba(63,125,92,.26);
}

/* 20260924p0：闲置是「独立浅色皮肤」，不再跟随暗色主题 ——
   旧版暗色覆盖把文字变浅、body 却被 idle2.css 钉在白底上，
   结果就是用户截图的「白底完全看不见内容」。
   皮肤变量恒取上面的设计稿浅色值，暗色模式下闲置区也保持原样。 */

html[data-zone="idle"] body.is-idle { background: var(--il-bg); }

/* ---------- 2. 关掉主站 chrome ---------- */
html[data-zone="idle"] .yq-tb,
html[data-zone="idle"] .yq-fab,
html[data-zone="idle"] .yq-hd { display: none !important; }

/* 主站 main 的下内边距为闲置底栏让位（含隆起 CTA） */
html[data-zone="idle"] .yq-main {
  padding-top: 0;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   3. 闲置顶栏 il-hd
   ========================================================================== */
.il-hd {
  position: sticky; top: 0; z-index: 40;
  background: var(--grad-brand);
  padding-top: env(safe-area-inset-top, 0px);
  /* 顶栏只在底部投一层很浅的影：旧版 rgba(180,83,9,.2) 是琥珀影，会泛黄 */
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 14px rgba(11, 100, 56, .20);
}
.il-hd__bar {
  display: flex; align-items: center; gap: 9px;
  height: 52px;
  padding: 0 var(--sp-3);
  max-width: var(--page-max, 680px);
  margin: 0 auto;
}
.il-hd__ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.il-hd__ico:active { background: rgba(255,255,255,.28); }

.il-hd__brand {
  display: inline-flex; align-items: baseline; gap: 3px;
  flex: 0 0 auto;
  text-decoration: none;
  padding-right: 2px;
}
.il-hd__mark {
  font-size: 17px; font-weight: 800; letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.il-hd__sub {
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.20);
  padding: 1px 5px; border-radius: 5px;
}

.il-hd__search {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--il-ink-3);
  font-size: 12.5px;
}
.il-hd__search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font-size: 12.5px; color: var(--il-ink);
  -webkit-appearance: none; appearance: none;
}
.il-hd__search input::placeholder { color: var(--il-ink-3); }
.il-hd__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.il-hd__clr {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--il-ink-3); color: #fff;
  font-size: 12px; line-height: 1; text-decoration: none; font-style: normal;
}
/* 发布按钮（右侧主动作）：比普通圆钮更醒目 —— 白底墨靛字 */
.il-hd__ico--pub {
  background: #fff;
  color: var(--brand-600);
  box-shadow: 0 2px 8px rgba(11, 100, 56, .24);
}
.il-hd__ico--pub:active { background: var(--brand-50); }

/* ==========================================================================
   4. 闲置底部栏 il-tb（中央隆起 = 发布）
   ========================================================================== */
.il-tb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--il-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.il-tb__row {
  display: flex; align-items: flex-end; justify-content: space-around;
  height: 62px;
  max-width: var(--page-max, 680px);
  margin: 0 auto;
  padding: 0 4px;
}

.il-tb__i {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  height: 100%;
  text-decoration: none;
  color: var(--il-ink-3);
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
}
.il-tb__i.is-on { color: var(--brand-500); font-weight: 700; }
.il-tb__ico { position: relative; display: inline-flex; }
.il-tb__dot {
  position: absolute; top: -4px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; line-height: 1;
}

/* 中央隆起发布钮 */
.il-tb__pub {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px;
  height: 100%;
  text-decoration: none;
  color: var(--il-ink-3);
  font-size: 10px;
}
.il-tb__pub__btn {
  width: 50px; height: 50px;
  margin-top: -22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  box-shadow: 0 6px 18px rgba(63,125,92,.32), 0 0 0 4px rgba(255,255,255,.96);
}
.il-tb__pub.is-on .il-tb__pub__t { color: var(--brand-500); font-weight: 700; }

/* ---------- 闲鱼导流条（详情页）----------
   用 --accent-* 系列：这是模块识别色（路线C 里降级为点缀色），
   小面积、有功能语义 —— 正好符合 accent 的使用边界。
   大面积仍是墨靛主色，所以这里只是「一个提示条」，不抢主视觉。 */
.zl-xy {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg, 12px);
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
}
.zl-xy__ico {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-full, 999px);
  background: var(--accent-500);
  color: #fff;
}
.zl-xy__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zl-xy__b b {
  font-size: 13px; font-weight: 700;
  color: var(--accent-700);
  line-height: 1.3;
}
.zl-xy__b span {
  font-size: 11px;
  color: var(--il-ink-3, #949db0);
  line-height: 1.4;
}
.zl-xy__go {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--r-full, 999px);
  background: var(--accent-500);
  color: #fff;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease-out, ease);
}
.zl-xy__go:active { transform: scale(.94); }

/* 深色主题：浅色底改深色，文字提亮 */
html[data-theme="dark"] .zl-xy {
  background: rgba(34, 155, 150, .12);
  border-color: rgba(34, 155, 150, .28);
}
html[data-theme="dark"] .zl-xy__b b { color: var(--accent-300); }

/* 手机窄屏：文案收紧，避免换行挤压 */
@media (max-width: 360px) {
  .zl-xy__b span { display: none; }
}

/* ==========================================================================
   5. 会话页「闲鱼上下文」标记
   --------------------------------------------------------------------------
   ⚠️ 样式不在这里 —— /chat 是主站 zone（不是 idle），加载的是 app2026.css。
      ct-idle__ctx / ct-note / ct-bar--off 都写在 app2026.css 的「闲置会话上下文」节。
      放这里会静默不生效（只在闲鱼模块内可见）。
   ========================================================================== */