/* ==========================================================================
   宜宇 app · 主样式
   风格：小红书式信息流布局 + 清新绿主色（自设计）
   特点：卡片水瀑、圆角克制、留白充足、无 emoji
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root,
[data-theme="light"] {
  /* 主色：青柠绿 → 林间绿 */
  --brand-50:  #eefdf3;
  --brand-100: #d5f9e2;
  --brand-200: #aef0c8;
  --brand-300: #7ce4a8;
  --brand-400: #45d183;
  --brand-500: #1fbe66;
  --brand-600: #12a054;
  --brand-700: #0d7f43;
  --brand-800: #0b6438;
  --brand-900: #08512e;

  /* 辅助色 */
  --accent-xhs:   #ff2e4d;   /* 小红书红，用于点赞激活 */
  --accent-lime:  #7be89a;
  --accent-gold:  #f5a623;
  --accent-blue:  #2f80ed;

  /* 渐变 */
  --grad-brand:      linear-gradient(128deg, #45d183 0%, #1fbe66 52%, #12a054 100%);
  --grad-brand-soft: linear-gradient(128deg, rgba(69,209,131,.16), rgba(31,190,102,.10));
  --grad-warm:       linear-gradient(128deg, #ffb26b 0%, #f5a623 100%);
  /* ★ 2026-09-20 新品牌薄荷色（新 logo 同款：浅薄荷 → 青 → 淡蓝绿）
     用于：hero 卡片描边、广场图文卡边框、行动点渐变。
     改色只改这里，别在散落的规则里写死色值。 */
  --mint-50:  #f2fffa;
  --mint-100: #c9ffdf;
  --mint-200: #a3f2d8;
  --mint-300: #74e3da;
  --mint-400: #5bedc6;
  --mint-500: #33d9ac;
  --mint-600: #1fb98c;
  --mint-700: #149270;
  --grad-mint:      linear-gradient(128deg, #c9ffdf 0%, #5bedc6 52%, #74e3da 100%);
  --grad-mint-soft: linear-gradient(128deg, rgba(201,255,223,.30), rgba(116,227,218,.18));


  /* 背景层次 */
  --bg-base:    #f6faf7;
  --bg-raise:   #ffffff;
  --bg-raise-2: #f2f8f4;
  --bg-sunken:  #eaf3ed;
  --bg-glass:   rgba(255,255,255,.78);

  /* 文字 */
  --text-primary: #17211b;
  --text-second:  #5d6b63;
  --text-third:   #93a29a;
  --text-invert:  #ffffff;

  /* 描边 */
  --border-1: #bfecdf;
  --border-2: #8fddc9;
  --line:        #bfecdf;
  --line-strong: #8fddc9;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* 圆角 */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 26px; --r-full: 999px;

  /* 字号 */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 25px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(23,33,27,.04);
  --sh-2: 0 2px 10px rgba(23,33,27,.06);
  --sh-3: 0 8px 26px rgba(23,33,27,.10);
  --sh-brand: 0 6px 18px rgba(31,190,102,.28);

  /* 动效 */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);

  /* 尺寸 */
  --hd-h: 52px;
  --tb-h: 58px;
  --page-max: 680px;

  /* 安全区 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  /* 层级 */
  --z-base: 1; --z-sticky: 20; --z-hd: 60; --z-mask: 90;
  --z-drawer: 100; --z-modal: 110; --z-toast: 200;
}

[data-theme="dark"] {
  --bg-base:    #0c0f0d;
  --bg-raise:   #151917;
  --bg-raise-2: #1b211e;
  --bg-sunken:  #0a0d0b;
  --bg-glass:   rgba(21,25,23,.80);

  --text-primary: #f2f5f3;
  --text-second:  #a8b5ad;
  --text-third:   #71807a;

  --border-1: #1f3a33;
  --border-2: #2a5044;
  --line:        #1f3a33;
  --line-strong: #2a5044;

  --brand-50:  #0d2016;
  --brand-100: #0f2b1d;
  --grad-brand-soft: linear-gradient(128deg, rgba(69,209,131,.14), rgba(31,190,102,.06));

  --sh-1: 0 1px 2px rgba(0,0,0,.34);
  --sh-2: 0 2px 10px rgba(0,0,0,.40);
  --sh-3: 0 8px 26px rgba(0,0,0,.52);
  --sh-brand: 0 6px 18px rgba(31,190,102,.22);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* 20260924p0 · sticky 根因修复：overflow-x:hidden 一旦落在 body 上，
   body 就成为滚动容器（overflow-y 计算为 auto），其内所有 position:sticky
   （顶栏 .yq-hd / 群头 .rm-top / 消息页签 .ms-tabs）全部失效 ——
   表现就是「搜索栏/群名/用户名被内容顶下去」。裁剪职责移交给 html，
   body 只用 overflow-x:clip（不产生滚动容器，sticky 照常工作）。 */
html { overflow-x: hidden; }

.yq-body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--text-primary);
  background: var(--bg-base);
  overflow-x: clip; /* 20260924p0：原 hidden 会杀死全站 sticky，见 html 规则处注释 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .26s var(--ease-out), color .26s var(--ease-out);
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--text-third); }
h1,h2,h3,h4,p,figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 应用骨架 ---------- */
.yq-app {
  min-height: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
  background: var(--bg-base);
  padding-bottom: calc(var(--tb-h) + var(--safe-bot) + 8px);
}

.yq-main { min-height: 60vh; }

/* ---------- 4. 顶栏 ---------- */
.yq-hd {
  position: sticky; top: 0; z-index: var(--z-hd);
  height: calc(var(--hd-h) + var(--safe-top));
  padding: var(--safe-top) var(--sp-4) 0;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.yq-hd.is-scrolled { border-bottom-color: var(--border-1); }

.yq-hd__brand { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.yq-logo { display: flex; align-items: center; }
.yq-logo__txt {
  font-size: var(--fs-lg); font-weight: 800;
  letter-spacing: .04em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.yq-hd__title { font-size: var(--fs-lg); font-weight: 700; margin: 0; flex: 1; }
.yq-hd__back {
  width: 34px; height: 34px; margin-left: -6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: var(--text-primary);
}
.yq-hd__act { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.yq-ico-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: var(--text-second);
  transition: background-color .18s, color .18s;
}
.yq-ico-btn:active { background: var(--bg-sunken); }

/* 主题图标显隐 */
[data-theme="light"] .yq-ico-moon { display: none; }
[data-theme="dark"]  .yq-ico-sun  { display: none; }

/* ---------- 5. 底部标签栏 ---------- */
.yq-tb {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; z-index: var(--z-hd);
  width: 100%; max-width: var(--page-max);
  height: calc(var(--tb-h) + var(--safe-bot));
  padding-bottom: var(--safe-bot);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--border-1);
}
.yq-tb__i {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--text-third);
  transition: color .18s var(--ease-out);
  position: relative;
}
.yq-tb__i.is-on { color: var(--brand-600); }
.yq-tb__i.is-on .yq-tb__ico { transform: translateY(-1px) scale(1.04); }
.yq-tb__ico { display: flex; transition: transform .22s var(--ease-out); }
.yq-tb__t { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.yq-tb__i.is-on .yq-tb__t { font-weight: 700; }

/* ---------- 6. 发布按钮 ---------- */
.yq-fab {
  position: fixed; right: max(calc((100vw - var(--page-max)) / 2 + 16px), 16px);
  bottom: calc(var(--tb-h) + var(--safe-bot) + 18px);
  z-index: calc(var(--z-hd) + 1);
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: #fff; background: var(--grad-brand);
  box-shadow: var(--sh-brand);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.yq-fab:active { transform: scale(.93); }
.yq-fab.is-hide { opacity: 0; pointer-events: none; transform: scale(.8); }

/* 页面自带底部操作条（发布 .fm-bar / 详情 .cm-bar / 聊天 .ct-bar）时，
   悬浮发布按钮会压住这些按钮的右端（实测压住「立即报名」「发布」）。
   用 :has() 直接按结构判定，不依赖 page 键（show/publish 的 page 是空串）。 */
body:has(.fm-bar) .yq-fab,
body:has(.cm-bar) .yq-fab,
body:has(.ct-bar) .yq-fab { display: none; }

/* ---------- 7. 抽屉 / 搜索 ---------- */
.yq-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.yq-drawer__panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--page-max);
  background: var(--bg-raise);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: var(--safe-bot);
  box-shadow: var(--sh-3);
  animation: yqUp .28s var(--ease-out);
}
@keyframes yqUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.yq-drawer__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.yq-drawer__title { font-size: var(--fs-lg); font-weight: 700; }
.yq-drawer__body { padding: var(--sp-2) var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); }

.disc-entry {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-raise-2);
  border: 1px solid var(--border-1);
  transition: transform .16s var(--ease-out), background-color .16s;
}
.disc-entry:active { transform: scale(.985); background: var(--bg-sunken); }
.disc-entry__ico {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: #fff;
}
.disc-entry__ico--share { background: var(--grad-brand); }
.disc-entry__ico--event { background: linear-gradient(128deg,#5aa9f8,#2f80ed); }
.disc-entry__ico--ai    { background: linear-gradient(128deg,#8b6bf5,#6b46e0); }
.disc-entry__c { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.disc-entry__c b { font-size: var(--fs-md); font-weight: 700; }
.disc-entry__c i { font-size: var(--fs-xs); color: var(--text-third); font-style: normal; }
.disc-entry__btn {
  flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 700;
  color: var(--brand-700); padding: 4px 10px;
  border-radius: var(--r-full); background: var(--brand-50);
}

.yq-search {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--bg-base);
  padding-top: var(--safe-top);
}
.yq-search__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--page-max); margin: 0 auto;
}
.yq-search-in {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-3);
  background: var(--bg-raise-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  color: var(--text-third);
}
.yq-search-in:focus-within { border-color: var(--brand-300); background: var(--bg-raise); }
.yq-search-in input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: var(--fs-md); color: var(--text-primary);
  appearance: none; -webkit-appearance: none;
}
.yq-search-in input::-webkit-search-cancel-button { display: none; }
.yq-search__cancel { font-size: var(--fs-md); color: var(--text-second); padding: 4px; }

/* 侧边栏 */
.yq-side { position: fixed; inset: 0; z-index: var(--z-drawer); }
.yq-side__mask { position: absolute; inset: 0; background: rgba(0,0,0,.34); width: 100%; }
.yq-side__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 74%; max-width: 300px;
  background: var(--bg-raise);
  box-shadow: var(--sh-3);
  animation: yqLeft .26s var(--ease-out);
  padding-top: var(--safe-top);
  overflow-y: auto;
}
@keyframes yqLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.yq-side__hd { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.yq-side__me { display: flex; align-items: center; gap: var(--sp-3); }
.yq-side__meinfo { display: flex; flex-direction: column; }
.yq-side__meinfo b { font-size: var(--fs-lg); font-weight: 700; }
.yq-side__meinfo i { font-size: var(--fs-xs); color: var(--text-third); font-style: normal; }
.yq-side__login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 var(--sp-5);
  border-radius: var(--r-full); color: #fff;
  background: var(--grad-brand); font-weight: 700;
  box-shadow: var(--sh-brand);
}
.yq-side__nav { padding: var(--sp-2) var(--sp-2) var(--sp-5); display: grid; }
.yq-side__nav a {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--text-primary);
}
.yq-side__nav a:active { background: var(--bg-sunken); }

.yq-mask { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(0,0,0,.32); }

/* ---------- 8. 通用组件 ---------- */
.yq-wrap { padding: 0 var(--sp-4); }

.yq-ava {
  width: 36px; height: 36px; border-radius: var(--r-full);
  object-fit: cover; flex: 0 0 auto; background: var(--bg-sunken);
}
.yq-ava--txt {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.yq-ava--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.yq-ava--lg { width: 60px; height: 60px; font-size: var(--fs-xl); }

/* 按钮 */
.yq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: 700;
  border: 1px solid transparent;
  transition: transform .16s var(--ease-out), opacity .16s, background-color .16s;
  white-space: nowrap;
}
.yq-btn:active { transform: scale(.97); }
.yq-btn--primary { color: #fff; background: var(--grad-brand); box-shadow: var(--sh-brand); }
.yq-btn--ghost { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.yq-btn--line { color: var(--text-primary); background: var(--bg-raise); border-color: var(--border-2); }
.yq-btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.yq-btn--block { width: 100%; }
.yq-btn[disabled], .yq-btn.is-off { opacity: .5; pointer-events: none; }
.yq-btn__ico { display: flex; }

/* 徽标 / 标签 */
.yq-tag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--bg-sunken); color: var(--text-second);
}
.yq-tag--brand { background: var(--brand-50); color: var(--brand-700); }
.yq-tag--warn  { background: #fff4e5; color: #b46a00; }
.yq-tag--hot   { background: #ffecef; color: #d4243f; }
.yq-tag--gold  { background: #fff8e1; color: #a67c00; }
[data-theme="dark"] .yq-tag--warn { background: #3a2a10; color: #f0b352; }
[data-theme="dark"] .yq-tag--hot  { background: #3d1720; color: #ff7089; }
[data-theme="dark"] .yq-tag--gold { background: #38300f; color: #e8c65a; }

.yq-pill {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-second); background: var(--bg-raise-2);
  border: 1px solid var(--border-1);
  transition: all .18s var(--ease-out);
  white-space: nowrap;
}
.yq-pill.is-on { color: #fff; background: var(--grad-brand); border-color: transparent; }

/* 空态 */
.yq-empty {
  padding: var(--sp-8) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center; color: var(--text-third);
}
.yq-empty__ico {
  width: 76px; height: 76px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--brand-500);
}
.yq-empty__t { font-size: var(--fs-md); font-weight: 700; color: var(--text-second); }
.yq-empty__d { font-size: var(--fs-sm); max-width: 260px; line-height: 1.7; }

/* 骨架屏 */
.yq-skel {
  background: linear-gradient(90deg, var(--bg-raise-2) 25%, var(--bg-sunken) 37%, var(--bg-raise-2) 63%);
  background-size: 400% 100%;
  animation: yqShim 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes yqShim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 加载 */
.yq-loading { display: flex; justify-content: center; padding: var(--sp-5); }
.yq-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-2); border-top-color: var(--brand-500);
  animation: yqSpin .7s linear infinite;
}
@keyframes yqSpin { to { transform: rotate(360deg); } }

/* Toast */
.yq-toast {
  position: fixed; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: var(--z-toast);
  max-width: 78vw; padding: 10px 18px;
  border-radius: var(--r-md);
  background: rgba(20,26,22,.90); color: #fff;
  font-size: var(--fs-sm); line-height: 1.6; text-align: center;
  animation: yqToastIn .22s var(--ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@keyframes yqToastIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }

/* 回到顶部 */
.yq-totop {
  position: fixed; right: max(calc((100vw - var(--page-max)) / 2 + 16px), 16px);
  bottom: calc(var(--tb-h) + var(--safe-bot) + 78px);
  z-index: calc(var(--z-hd) - 1);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--bg-glass); color: var(--text-second);
  border: 1px solid var(--border-1);
  box-shadow: var(--sh-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .24s, transform .24s;
}
.yq-totop.is-on { opacity: 1; pointer-events: auto; }

/* 分段控件 */
.yq-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-raise-2); border-radius: var(--r-full);
  border: 1px solid var(--border-1);
}
.yq-seg__i {
  height: 30px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-second);
  transition: all .18s var(--ease-out);
}
.yq-seg__i.is-on { background: var(--bg-raise); color: var(--text-primary); box-shadow: var(--sh-1); }

/* ---------- 9. 内容卡片 ---------- */
.yq-card {
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  overflow: hidden;
  transition: transform .18s var(--ease-out);
}
.yq-card:active { transform: scale(.988); }

/* 水瀑流（小红书式双列） */
.yq-water {
  column-count: 2;
  column-gap: var(--sp-3);
  padding: 0 var(--sp-4);
  /* ⚠️ 卡片是 <a class="yq-post">，盒宽由列宽决定。
     不加 min-width:0 时，卡片里的内容（作者名过长、排序长词等）能把
     网格项撑出列宽 → 两列互相重叠，看起来就是「文字叠在一起」。
     和 .yq-toolbar__chips 的 min-width:0 是同一类问题。 */
  min-width: 0;
}
.yq-water > * {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  display: block;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 560px) { .yq-water { column-count: 3; } }

/* 封面卡片 */
.yq-post {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise-2);
  /* 与广场 hero（.hsq）同款薄荷绿描边 —— 2026-09-20 统一 */
  border: 1px solid var(--mint-300, #74e3da);
}
[data-theme='dark'] .yq-post { border-color: var(--mint-700, #149270); }
.yq-post__cover {
  position: relative;
  width: 100%; display: block;
  background: var(--bg-sunken);
  /* 小红书原生瀑布流：卡片高度随原图比例变化，形成错落感。
     --ph-ratio 由 JS 在图片加载后写入（= 真实宽高比）；
     加载前用 3/4 兜底，避免高度塌陷导致的布局抖动（CLS）。 */
  aspect-ratio: var(--ph-ratio, 3 / 4);
  overflow: hidden;
}
.yq-post__cover.is-loaded {
  /* 图片已就位：高度改由图片自身尺寸决定，真正实现"按原图比例" */
  aspect-ratio: auto;
}

/* 无图卡（文字笔记）：封面槽不再强制 3:4，
   高度完全交给 .yq-note 自身（--note-lines 驱动），
   否则固定比例会把文字压扁或裁掉 —— 这是「文字卡和照片卡不像一套」的根源之一。 */
.yq-post.is-note .yq-post__cover {
  aspect-ratio: auto;
  background: transparent;
}
.yq-post__cover img {
  width: 100%; height: auto; display: block;
  object-fit: contain;
  object-position: center;
}
/* ------------------------------------------------------------------
   小红书「文字笔记」卡 —— 无图内容的正确形态
   与照片卡共用同一骨架（.yq-post 提供圆角/描边/阴影），
   这里只负责「内容区」的视觉。全部采用低饱和、与品牌绿同族或相邻的
   纸感底色，避免出现和照片卡完全两套观感（用户反馈的「上下不一样」）。
   ------------------------------------------------------------------ */
.yq-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 高度由文本行数驱动（--note-lines: 3~7），与照片卡形成自然错落 */
  min-height: calc(104px + var(--note-lines, 4) * 21px);
  padding: 13px 12px 11px;
  overflow: hidden;
  background: #f1f6f2;
  color: #24402f;
}
/* 纸感斜纹：极低对比，只为避免大面积纯色显得"半成品" */
.yq-note::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -18deg,
    rgba(31, 110, 70, .035) 0 10px,
    rgba(31, 110, 70, 0) 10px 20px
  );
}
/* 顶部细色条：与照片卡顶部图形成"同构"的第一眼信息 */
.yq-note::after {
  content: '';
  position: absolute; left: 12px; right: 12px; top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31, 190, 102, .6), rgba(31, 190, 102, 0));
}
.yq-note__tag {
  position: relative;
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #1c6b45;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(31, 190, 102, .22);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yq-note__t {
  position: relative;
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: .002em;
  color: #1f3a2c;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.yq-note__ft {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: rgba(31, 58, 44, .46);
}
.yq-note__ft svg { flex: 0 0 auto; }

/* 六套纸感底色：同为低饱和、与品牌绿相邻的色系，保证整片瀑布流观感统一 */
.yq-note--t1 { background: #f7f3ea; }
.yq-note--t2 { background: #eff3f7; }
.yq-note--t3 { background: #f7eff2; }
.yq-note--t4 { background: #f2f5ea; }
.yq-note--t5 { background: #f2f0f7; }
.yq-note--t1::after { background: linear-gradient(90deg, rgba(176,138,66,.5), rgba(176,138,66,0)); }
.yq-note--t2::after { background: linear-gradient(90deg, rgba(84,126,170,.45), rgba(84,126,170,0)); }
.yq-note--t3::after { background: linear-gradient(90deg, rgba(178,104,132,.45), rgba(178,104,132,0)); }
.yq-note--t4::after { background: linear-gradient(90deg, rgba(126,158,74,.5), rgba(126,158,74,0)); }
.yq-note--t5::after { background: linear-gradient(90deg, rgba(122,108,178,.45), rgba(122,108,178,0)); }
.yq-note--t1 .yq-note__t { color: #4a3a1e; }
.yq-note--t2 .yq-note__t { color: #23384f; }
.yq-note--t3 .yq-note__t { color: #4a2733; }
.yq-note--t4 .yq-note__t { color: #38431f; }
.yq-note--t5 .yq-note__t { color: #332c4c; }
.yq-note--t1 .yq-note__tag { color: #7a5c22; border-color: rgba(176,138,66,.26); }
.yq-note--t2 .yq-note__tag { color: #33556f; border-color: rgba(84,126,170,.26); }
.yq-note--t3 .yq-note__tag { color: #7a3d52; border-color: rgba(178,104,132,.26); }
.yq-note--t4 .yq-note__tag { color: #4d6329; border-color: rgba(126,158,74,.26); }
.yq-note--t5 .yq-note__tag { color: #4a4076; border-color: rgba(122,108,178,.26); }

[data-theme="dark"] .yq-note { background: #16281f; }
[data-theme="dark"] .yq-note__t { color: #e2f0e8; }
[data-theme="dark"] .yq-note__tag { color: #a8e0c1; background: rgba(255,255,255,.08); border-color: rgba(168,224,193,.22); }
[data-theme="dark"] .yq-note--t1 { background: #2a2118; } [data-theme="dark"] .yq-note--t1 .yq-note__t { color: #f0dfc4; }
[data-theme="dark"] .yq-note--t2 { background: #17222e; } [data-theme="dark"] .yq-note--t2 .yq-note__t { color: #d3e2f2; }
[data-theme="dark"] .yq-note--t3 { background: #291c22; } [data-theme="dark"] .yq-note--t3 .yq-note__t { color: #f0d5de; }
[data-theme="dark"] .yq-note--t4 { background: #1f2616; } [data-theme="dark"] .yq-note--t4 .yq-note__t { color: #e0edcb; }
[data-theme="dark"] .yq-note--t5 { background: #1f1b2b; } [data-theme="dark"] .yq-note--t5 .yq-note__t { color: #dcd6f0; }

.yq-post__body { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.yq-post__t {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.yq-post__foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-2);
}
.yq-post__nm {
  flex: 1; min-width: 0;
  font-size: 11.5px; color: var(--text-third);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yq-post__zan {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--text-third); flex: 0 0 auto;
}
.yq-post__zan svg { width: 13px; height: 13px; }
.yq-post__badge {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  display: inline-flex; align-items: center; gap: 3px;
  height: 21px; padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(18,160,84,.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.yq-post__badge--top { background: rgba(212,36,63,.92); }
.yq-post__imgs {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 10px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.42);
}

/* 横向列表卡片 */
.yq-row {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  transition: transform .18s var(--ease-out);
}
.yq-row:active { transform: scale(.99); }
.yq-row__thumb {
  flex: 0 0 104px; width: 104px; height: 78px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-400);
}
.yq-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.yq-row__c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yq-row__t {
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yq-row__d {
  margin-top: 2px; font-size: var(--fs-xs); color: var(--text-third);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yq-row__m {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 11px; color: var(--text-third);
}
.yq-row__m span { display: inline-flex; align-items: center; gap: 3px; }
.yq-row__m svg { width: 12px; height: 12px; }

.yq-list { display: grid; gap: var(--sp-3); padding: 0 var(--sp-4); }

/* 区块标题 */
.yq-sec-hd {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
}
.yq-sec-hd__t { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.yq-sec-hd__bar {
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--grad-brand);
}
.yq-sec-hd__more {
  margin-left: auto; font-size: var(--fs-sm); color: var(--text-third);
  display: inline-flex; align-items: center; gap: 2px;
}

/* 横向滚动条 */
.yq-hscroll {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; padding: 0 var(--sp-4) var(--sp-1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.yq-hscroll::-webkit-scrollbar { display: none; }
.yq-hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* 标签滚动条 */
.yq-chips {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; padding: var(--sp-2) var(--sp-4);
  scrollbar-width: none;
}
.yq-chips::-webkit-scrollbar { display: none; }

/* ---------- 10. 首页 Hero：置顶宣传位（无边框全宽、自动播放） ----------
   视觉参考：小红书/抖音首屏「精选」——满宽出血、底部渐隐、标题压在图上。
   比例：手机 4:5 视觉冲击强；≥560px 转 16:9，避免桌面端过高。
   ⚠️ 高度必须由 CSS 定死（aspect-ratio + max-height），不能让图片撑开，
      否则不同比例的原图会让 hero 高度跳动。
   ⚠️ 文字块整体贴底排列（badge → 标题 → 摘要 → 底部行），
      不要用绝对定位放 badge，否则窄高屏会和标题叠在一起。 */
.hero {
  position: relative;
  width: 100%;
  margin: 0 0 var(--sp-4);
  aspect-ratio: 4 / 5;
  /* ★ 2026-09-20 iOS 修正：hero 在 iPhone 上「展示不全」（底部标题/按钮被切）。
     根因是 vh —— iOS Safari 的 1vh = 「工具栏收起后」的**大**视口高度，
     比用户眼前那块可视区大一截，于是 58vh 会超出可用空间。
     svh = 小视口（工具栏可见时的真实高度），才等于「眼前这块」。
     依次声明三条：不认 svh 的浏览器忽略后两条，落回 vh，行为与旧版一致。 */
  max-height: 58vh;
  max-height: 58svh;
  /* 再把「顶栏 + 底栏 + 安全区」一起减掉：hero 永远不把站内 chrome 挤出屏幕。
     140px ≈ 顶栏 52 + 底栏 60 + 上下留白。 */
  max-height: min(58svh, calc(100svh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  background: #07100b;
  border-radius: 0 0 var(--r-lg, 14px) var(--r-lg, 14px);
  isolation: isolate;
}
@media (min-width: 560px) {
  .hero {
    aspect-ratio: 16 / 9;
    max-height: 46vh;
    width: calc(100% - var(--sp-4) * 2);
    margin: 0 var(--sp-4) var(--sp-4);
    border-radius: var(--r-lg, 14px);
  }
}

/* 不再依赖百分比高度：.hero 的高度可能是 aspect-ratio 推出来的，
   iOS 上「百分比高度 + aspect-ratio 父级」解析时机不稳，
   一旦解析成 auto，五个 slide 会集体塌成 0 高（= hero 空白）。
   改成 inset:0 后，高度怎么来的都不影响铺满。 */
.hero__track { position: absolute; inset: 0; }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s var(--ease-in-out);
  pointer-events: none;
}
.hero__slide.is-on { opacity: 1; pointer-events: auto; }

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  transition: transform 6.4s linear;
}
.hero__slide.is-on .hero__media { transform: scale(1); }

.hero__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #0b1f14 0%, #06110b 100%);
  color: rgba(124,228,168,.30);
}

/* 遮罩：顶部为胶囊留一层薄暗，底部为文字铺足够深的渐变。
   ⚠️ 中间段必须保持较暗，否则亮天空/雪景会让白字完全看不清。 */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4,10,7,.62) 0%,
      rgba(4,10,7,.14) 14%,
      rgba(4,10,7,.00) 26%),
    linear-gradient(0deg,
      rgba(4,10,7,.96) 0%,
      rgba(4,10,7,.88) 14%,
      rgba(4,10,7,.60) 30%,
      rgba(4,10,7,.18) 48%,
      rgba(4,10,7,.00) 62%);
  pointer-events: none;
}

.hero__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: 7px;
  color: #fff;
}
/* 顶部行：板块胶囊 + 发布时间 —— 作为 body 第一个子元素**正常流**排列，
   与标题同处一个底部对齐的纵向栈，天然不可能重叠。 */
.hero__top {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 2px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  background: rgba(31,190,102,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__time {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__t {
  font-size: 19px; font-weight: 800; line-height: 1.32;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero__d {
  font-size: var(--fs-xs); line-height: 1.55;
  color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 底部行：互动数据在左，CTA 在右 —— 手机拇指区 */
.hero__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: 2px;
}
.hero__meta {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 11px; color: rgba(255,255,255,.72);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 4px; }
.hero__meta svg { width: 12px; height: 12px; }
.hero__cta { display: flex; gap: var(--sp-2); margin-top: 2px; }
.hero__btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 var(--sp-4);
  margin-left: auto;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 700;
  color: #fff; background: var(--grad-brand);
  box-shadow: 0 6px 20px rgba(31,190,102,.40);
  white-space: nowrap;
}
.hero__btn--ghost {
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none;
}

/* Hero 进度指示 */
.hero__dots {
  position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + 4px);
  display: flex; flex-direction: column; gap: 6px; z-index: 3;
}
.hero__dot {
  width: 3px; height: 14px; border-radius: 2px;
  background: rgba(255,255,255,.34);
  transition: all .30s var(--ease-out);
}
.hero__dot.is-on { background: #fff; height: 24px; }

/* 自动播放进度条 */
.hero__prog {
  position: absolute; left: 0; top: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #7be89a, #1fbe66);
  z-index: 4;
  box-shadow: 0 0 8px rgba(31,190,102,.7);
}


/* ---------- 11. 活动 ---------- */
.ev-card {
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.ev-card__cover { position: relative; aspect-ratio: 16 / 9; background: var(--bg-sunken); }
.ev-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.ev-card__cover--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--brand-500);
}
.ev-card__c { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.ev-card__t { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
.ev-card__meta {
  margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-third);
}
.ev-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.ev-card__meta svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ev-card__foot {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
  display: flex; align-items: center; gap: var(--sp-3);
}
.ev-card__join { margin-left: auto; }

.ev-status {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
}
.ev-status--open { background: var(--brand-50); color: var(--brand-700); }
.ev-status--soon { background: #fff4e5; color: #b46a00; }
.ev-status--live { background: #ffecef; color: #d4243f; }
.ev-status--ended { background: var(--bg-sunken); color: var(--text-third); }
.ev-status--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: yqPulseDot 1.4s ease-in-out infinite;
}
[data-theme="dark"] .ev-status--soon { background: #3a2a10; color: #f0b352; }
[data-theme="dark"] .ev-status--live { background: #3d1720; color: #ff7089; }
@keyframes yqPulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .38; transform: scale(.78); } }

/* 活动详情信息块 */
.ev-info {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
}
.ev-info__row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ev-info__ico {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-600);
}
.ev-info__c { flex: 1; min-width: 0; }
.ev-info__k { font-size: var(--fs-xs); color: var(--text-third); }
.ev-info__v { font-size: var(--fs-sm); font-weight: 600; word-break: break-word; }

.ev-members { display: flex; align-items: center; }
.ev-members__i {
  width: 30px; height: 30px; border-radius: 50%;
  margin-left: -8px; border: 2px solid var(--bg-raise);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; overflow: hidden;
}
.ev-members__i:first-child { margin-left: 0; }
.ev-members__i img { width: 100%; height: 100%; object-fit: cover; }
.ev-members__n { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--text-third); }

/* ---------- 12. 商城（得物风） ---------- */
.mall-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3); padding: 0 var(--sp-4);
}
@media (min-width: 560px) { .mall-grid { grid-template-columns: repeat(3, 1fr); } }

.pd-card {
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.pd-card__img { position: relative; aspect-ratio: 1; background: var(--bg-sunken); }
.pd-card__img img { width: 100%; height: 100%; object-fit: cover; }
.pd-card__img--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--brand-400);
}
.pd-card__body { padding: var(--sp-3); }
.pd-card__t {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}
.pd-card__price {
  margin-top: 6px;
  display: flex; align-items: baseline; gap: 4px;
  font-size: var(--fs-lg); font-weight: 800; color: var(--accent-xhs);
}
.pd-card__price i { font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.pd-card__price em { font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.pd-card__sub {
  margin-top: 2px; font-size: 11px; color: var(--text-third);
  display: flex; align-items: center; justify-content: space-between;
}

/* 商品详情 */
.pd-gallery {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pd-gallery::-webkit-scrollbar { display: none; }
.pd-gallery > img,
.pd-gallery > .pd-gallery__ph {
  flex: 0 0 100%; width: 100%; aspect-ratio: 1;
  object-fit: cover; scroll-snap-align: center;
  border-radius: var(--r-md); background: var(--bg-sunken);
}
.pd-gallery__ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft); color: var(--brand-400);
}
.pd-info {
  padding: var(--sp-4);
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
}
.pd-info__price {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 27px; font-weight: 800; color: var(--accent-xhs);
}
.pd-info__price i { font-size: var(--fs-md); font-style: normal; }
.pd-info__t { margin-top: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; }
.pd-info__m {
  margin-top: var(--sp-3); display: flex; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-third);
}

.pd-spec { margin-top: var(--sp-3); }
.pd-spec__k { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-2); }
.pd-spec__v { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.pd-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tb-h) + var(--safe-bot));
  width: 100%; max-width: var(--page-max);
  padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-3);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-1);
  z-index: calc(var(--z-hd) - 1);
}

/* ---------- 13. 详情页 ---------- */
.sh-hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.sh-hd__c { flex: 1; min-width: 0; }
.sh-hd__n { font-size: var(--fs-sm); font-weight: 700; }
.sh-hd__s { font-size: var(--fs-xs); color: var(--text-third); }
.sh-hd__follow { flex: 0 0 auto; }

.sh-t { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.sh-t h1 { font-size: var(--fs-xl); font-weight: 800; line-height: 1.42; }
.sh-t__meta {
  margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-third); flex-wrap: wrap;
}
.sh-t__meta span { display: inline-flex; align-items: center; gap: 4px; }

.sh-body {
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  font-size: var(--fs-md); line-height: 1.82;
  color: var(--text-primary);
  word-break: break-word;
}
.sh-body img {
  width: 100%; height: auto;
  border-radius: var(--r-sm);
  margin: var(--sp-3) 0;
}
.sh-body p { margin: 0 0 var(--sp-3); }
.sh-body a { color: var(--brand-600); word-break: break-all; }
.sh-body h1, .sh-body h2, .sh-body h3 {
  font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-4) 0 var(--sp-2);
}
.sh-body ul, .sh-body ol { padding-left: 1.3em; margin: 0 0 var(--sp-3); }
.sh-body ul { list-style: disc; }
.sh-body ol { list-style: decimal; }
.sh-body li { margin-bottom: 4px; }
.sh-body table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.sh-body td, .sh-body th { border: 1px solid var(--border-2); padding: 6px 8px; }
.sh-body blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--brand-400);
  background: var(--bg-raise-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-second);
}
.sh-body video { width: 100%; border-radius: var(--r-sm); margin: var(--sp-3) 0; }

.sh-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }

/* 互动条 */
.dy-act {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.dy-act__i {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--text-second);
  transition: color .18s, transform .18s var(--ease-out);
}
.dy-act__i:active { transform: scale(.94); }
/*
 * 【图标清晰度，2026-09-19】
 * 用户反馈「点赞收藏很模糊提升清晰度」。三个成因叠加：
 *   ① 尺寸只有 19px —— 手绘心形/五角星在这个尺寸下笔画互相挤压，
 *      曲线边缘出现明显锯齿。提到 21px 显著改善，同时不破坏版面节奏。
 *   ② 圆角线帽在缩小时会被抗锯齿"吃掉"半像素，导致线条两端发虚。
 *      保持 round 但把 stroke-width 从 2 降到 1.7（见模板），
 *      小尺寸下细一点反而更锐利，这是图标设计的通用做法。
 *   ③ 缺少几何精度光栅化指令，浏览器默认用速度优先的算法画曲线。
 *      shape-rendering: geometricPrecision 让它为曲线边缘多花点算力。
 *
 * 注意：CSS 的 `svg { width }` 会覆盖 HTML 上的 width 属性，
 * 所以尺寸必须在这里改（模板里写 width="22" 是不生效的）。
 */
.dy-act__i svg {
  width: 21px; height: 21px;
  flex: 0 0 auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
  /* 高分屏下按设备像素比采样，避免 1px 描边被抹成 0.5px 的灰线 */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.dy-act__i.is-on { color: var(--accent-xhs); }
.dy-act__i.is-on svg { fill: currentColor; }
.dy-act__i.is-fav { color: var(--accent-gold); }
.dy-act__i.is-fav svg { fill: currentColor; }
/* 互动数字也提一下可读性（原来继承 var(--fs-sm)，在 21px 图标旁偏小） */
.dy-act__i > span { font-size: var(--fs-sm); font-weight: 600; }
.dy-act__sp { flex: 1; }

/* 评论 */
.cm-list { padding: 0 var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); }
.cm-item { display: flex; gap: var(--sp-3); }
.cm-item__c { flex: 1; min-width: 0; }
.cm-item__hd { display: flex; align-items: center; gap: var(--sp-2); }
.cm-item__n { font-size: var(--fs-sm); font-weight: 700; }
.cm-item__t { font-size: var(--fs-xs); color: var(--text-third); }
.cm-item__body { margin-top: 3px; font-size: var(--fs-sm); line-height: 1.72; word-break: break-word; }
.cm-item__sub {
  margin-top: 5px; display: flex; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-third);
}
.cm-item__sub button { color: var(--text-third); font-size: var(--fs-xs); }
.cm-child {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--bg-raise-2); border-radius: var(--r-sm);
  display: grid; gap: var(--sp-3);
}

/* ---------- 13.1 详情页底栏（报名 / 评论输入） ----------
   ⚠️ 与 .fm-bar 同一个坑：bottom:0 + z-index:60 与底部导航完全同级，
   导航在 DOM 中靠后绘制 → 「立即报名」按钮被整条盖住（用户反馈：没有报名按钮）。
   修正：停在导航上方 + 层级高于导航。 */
.cm-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tb-h) + var(--safe-bot));
  width: 100%; max-width: var(--page-max);
  padding: var(--sp-2) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-1);
  box-shadow: 0 -6px 20px rgba(23,33,27,.07);
  z-index: calc(var(--z-hd) + 1);
}
.cm-bar-spacer { height: calc(var(--tb-h) + 76px + var(--safe-bot)); }
.cm-bar__in {
  flex: 1; height: 38px; padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border-1);
  background: var(--bg-raise-2);
  font-size: var(--fs-sm); outline: 0;
}
.cm-bar__in:focus { border-color: var(--brand-300); background: var(--bg-raise); }

/* ---------- 14. 个人中心 ---------- */
.pr-hd {
  position: relative;
  padding: calc(var(--sp-6)) var(--sp-4) var(--sp-5);
  background: var(--grad-brand-soft);
}
.pr-hd__row { display: flex; align-items: center; gap: var(--sp-4); }
.pr-hd__info { flex: 1; min-width: 0; }
.pr-hd__name { font-size: var(--fs-xl); font-weight: 800; }
.pr-hd__sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-second); }
.pr-hd__edit {
  flex: 0 0 auto;
  height: 32px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  background: var(--bg-raise); color: var(--text-primary);
  border: 1px solid var(--border-2);
}

.pr-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-5);
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  padding: var(--sp-4) 0;
}
.pr-stats__i { text-align: center; position: relative; }
.pr-stats__i + .pr-stats__i::before {
  content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 1px;
  background: var(--border-1);
}
.pr-stats__n { font-size: var(--fs-xl); font-weight: 800; }
.pr-stats__k { margin-top: 1px; font-size: var(--fs-xs); color: var(--text-third); }

.pr-list {
  margin-top: var(--sp-4);
  background: var(--bg-raise);
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.pr-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  transition: background-color .16s;
}
.pr-item + .pr-item { border-top: 1px solid var(--border-1); }
.pr-item:active { background: var(--bg-raise-2); }
.pr-item__ico {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-600);
}
.pr-item__t { flex: 1; font-size: var(--fs-md); }
.pr-item__v { font-size: var(--fs-sm); color: var(--text-third); }
.pr-item__arrow { color: var(--text-third); display: flex; transform: rotate(180deg); }

.pr-guest {
  padding: var(--sp-8) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center;
}
.pr-guest__logo {
  font-size: 32px; font-weight: 900; letter-spacing: .06em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pr-guest__d { font-size: var(--fs-sm); color: var(--text-third); max-width: 260px; line-height: 1.8; }

/* ---------- 15. AI 助手 ---------- */
.ai-fab {
  position: fixed; right: max(calc((100vw - var(--page-max)) / 2 + 16px), 16px);
  bottom: calc(var(--tb-h) + var(--safe-bot) + 18px);
  z-index: calc(var(--z-hd) + 1);
  width: 50px; height: 50px;
  display: none; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: #fff;
  background: linear-gradient(128deg, #8b6bf5, #6b46e0);
  box-shadow: 0 6px 20px rgba(107,70,224,.36);
}
.ai-fab.is-on { display: flex; }

.ai-panel {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--page-max);
  height: 78vh; z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  background: var(--bg-base);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
  animation: yqUp .30s var(--ease-out);
}
.ai-panel__hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border-1);
}
.ai-panel__ava {
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(128deg, #8b6bf5, #6b46e0);
}
.ai-panel__t { font-size: var(--fs-md); font-weight: 700; }
.ai-panel__s { font-size: 11px; color: var(--text-third); }
.ai-panel__x { margin-left: auto; }

.ai-msgs {
  flex: 1; overflow-y: auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ai-msg { display: flex; gap: var(--sp-2); max-width: 92%; }
.ai-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.ai-msg__ava {
  flex: 0 0 auto; width: 28px; height: 28px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.ai-msg--ai .ai-msg__ava { background: linear-gradient(128deg, #8b6bf5, #6b46e0); }
.ai-msg--user .ai-msg__ava { background: var(--grad-brand); }
.ai-msg__b {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.76;
  white-space: pre-wrap; word-break: break-word;
}
.ai-msg--ai .ai-msg__b {
  background: var(--bg-raise); border: 1px solid var(--border-1);
  border-top-left-radius: var(--r-xs);
}
.ai-msg--user .ai-msg__b {
  background: var(--grad-brand); color: #fff;
  border-top-right-radius: var(--r-xs);
}
.ai-msg--typing .ai-msg__b { display: flex; gap: 4px; padding: var(--sp-4); }
.ai-msg--typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-third);
  animation: yqAiDot 1.2s ease-in-out infinite;
}
.ai-msg--typing i:nth-child(2) { animation-delay: .18s; }
.ai-msg--typing i:nth-child(3) { animation-delay: .36s; }
@keyframes yqAiDot { 0%,60%,100% { opacity: .30; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.ai-quick { padding: 0 var(--sp-4) var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ai-in {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bot));
  border-top: 1px solid var(--border-1);
  background: var(--bg-raise);
}
.ai-in__ta {
  flex: 1; min-height: 40px; max-height: 110px;
  padding: 10px var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-1);
  background: var(--bg-raise-2);
  font-size: var(--fs-sm); line-height: 1.6;
  resize: none; outline: 0;
}
.ai-in__ta:focus { border-color: #a98bf7; background: var(--bg-raise); }
.ai-in__send {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: #fff;
  background: linear-gradient(128deg, #8b6bf5, #6b46e0);
}
.ai-in__send[disabled] { opacity: .45; }

/* AI 表单确认卡 */
.ai-form {
  margin-top: var(--sp-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise);
}
.ai-form__hd {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--bg-raise-2); color: var(--text-second);
}
.ai-form__row {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.ai-form__row + .ai-form__row { border-top: 1px solid var(--border-1); }
.ai-form__k { flex: 0 0 64px; color: var(--text-third); }
.ai-form__v { flex: 1; font-weight: 600; word-break: break-word; }
.ai-form__ft { padding: var(--sp-3); }

/* ---------- 16. 表单 ---------- */
.fm { padding: 0 var(--sp-4); display: grid; gap: var(--sp-4); }
.fm-item { display: grid; gap: var(--sp-2); }
.fm-item__k { font-size: var(--fs-sm); font-weight: 700; }
.fm-item__k em { color: var(--accent-xhs); font-style: normal; margin-left: 3px; }
.fm-item__h { font-size: var(--fs-xs); color: var(--text-third); }
.fm-in, .fm-ta {
  width: 100%; padding: 11px var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
  background: var(--bg-raise);
  font-size: var(--fs-md); outline: 0;
  transition: border-color .18s;
}
.fm-in:focus, .fm-ta:focus { border-color: var(--brand-400); }
.fm-ta { min-height: 110px; resize: vertical; line-height: 1.7; }
/* ---------- 16.1 表单底栏（发布按钮条） ----------
   ⚠️ 曾经与 .yq-tb（底部导航）同为 position:fixed + bottom:0 + z-index:60，
   而 tabbar 在 DOM 中排在 <main> 之后 → 后绘制的导航把整条按钮盖住，
   表现为「发布页根本没有发布按钮」。
   正确做法：按钮条停在导航**上方**，且层级高于导航。 */
.fm-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tb-h) + var(--safe-bot));
  width: 100%; max-width: var(--page-max);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-1);
  box-shadow: 0 -6px 20px rgba(23,33,27,.07);
  z-index: calc(var(--z-hd) + 1);
}
/* 发布页同理：底部按钮条占位高度 = 导航 58 + 按钮条约 64 */
.fm-bar ~ * { }
.fm-bar-spacer { height: calc(var(--tb-h) + 74px + var(--safe-bot)); }

/* ---------- 17. 页脚 ---------- */
.yq-ft {
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs); color: var(--text-third);
  line-height: 1.9;
}
.yq-ft a { color: var(--brand-600); }

/* ---------- 18. 响应式 / 动效偏好 ---------- */
@media (max-width: 360px) {
  :root { --sp-4: 14px; }
  .yq-water { column-count: 2; column-gap: 10px; }
  .yq-row__thumb { flex-basis: 92px; width: 92px; height: 70px; }
  .hero__t { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media { transform: none !important; }
}

/* ---------- 公益轻量入口条（首页底部） ---------- */
.welfare-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-raise-2);
  border-color: var(--border-1);
}
.welfare-bar__ico {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.welfare-bar__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.welfare-bar__c b { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.welfare-bar__c i { font-size: var(--fs-xs); font-style: normal; color: var(--text-third); }
.welfare-bar__arrow { flex: 0 0 auto; color: var(--text-third); }

/* 活动缩略图 */
.yq-row__thumb--ev {
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}

/* ---------- 底部导航未读角标 ---------- */
.yq-tb__i .yq-tb__ico { position: relative; }
.yq-tb__dot {
  position: absolute; top: -4px; left: 50%; margin-left: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full);
  background: #f5453c; color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-base);
}


/* ==================================================================
   10. 活动瀑布流卡片（与 card_post 共用 .yq-post 骨架）
   —— 「活动」不再用列表样式，和广场/首页保持同一套瀑布流语言。
   ================================================================== */
.yq-post.is-ended .yq-post__cover img { filter: saturate(.55) brightness(.94); }
.yq-post.is-ended .yq-post__t { color: var(--text-third); }

.yq-ev__st { background: rgba(18,160,84,.94); }
.yq-ev__st--ended { background: rgba(120,126,132,.92); }
.yq-ev__st--soon  { background: rgba(214,148,58,.94); }
.yq-ev__st--full  { background: rgba(212,36,63,.94); }

.yq-ev__fee {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  display: inline-flex; align-items: center;
  height: 21px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  background: rgba(22,28,34,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.yq-ev__fee--free { background: rgba(18,160,84,.9); }

.yq-ev__meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--text-third);
}
.yq-ev__meta > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.yq-ev__meta svg { width: 12px; height: 12px; flex: 0 0 auto; }

.yq-ev__join {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--text-third);
  min-width: 0;
}
.yq-ev__join svg { width: 13px; height: 13px; flex: 0 0 auto; }
.yq-ev__go {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  color: var(--brand-700);
  background: var(--grad-brand-soft);
}
[data-theme="dark"] .yq-ev__go { color: var(--brand-300); }

/* 活动页顶部：与全站区块头同一套规范，不再用一次性 inline 样式 */
.yq-herobar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) var(--sp-4) 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--grad-brand-soft);
  border: 1px solid transparent;
}
.yq-herobar__ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--grad-brand);
  color: #fff;
}
.yq-herobar__c { flex: 1 1 auto; min-width: 0; }
.yq-herobar__t { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.yq-herobar__s { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-second); }

/* 地图入口条（活动页内），与其它页面的入口条一致 */
.yq-linkbar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-4) var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
}
.yq-linkbar__ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.yq-linkbar__c { flex: 1 1 auto; min-width: 0; }
.yq-linkbar__t { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.yq-linkbar__s { margin-top: 1px; font-size: var(--fs-xs); color: var(--text-third); }
.yq-linkbar__a { flex: 0 0 auto; color: var(--text-third); }


/* ==================================================================
   11. 图文编辑器（小红书式九宫格）
   ================================================================== */
.pe { margin-top: 6px; }

.pe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pe.is-drag .pe__grid { opacity: .96; }

/* 单元格：1:1 预览，和发布后的小红书九宫格一致 */
.pe-i {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--border-1);
}
.pe-i__ph {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pe-i__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pe-i__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0,0,0,.14);
}
.pe-i__bar > i {
  display: block; height: 100%;
  background: var(--grad-brand);
  transition: width .18s var(--ease-out);
}
.pe-i__cover {
  position: absolute; left: 5px; bottom: 5px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 10px; font-weight: 700;
  color: #fff;
  background: rgba(18,160,84,.94);
}
.pe-i__x {
  position: absolute; right: 4px; top: 4px;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border: none; border-radius: var(--r-full);
  background: rgba(18,20,22,.62);
  color: #fff;
  cursor: pointer;
}
.pe-i__x:active { transform: scale(.9); }
.pe-i.is-fail .pe-i__ph { background: rgba(212,36,63,.08); }
.pe-i__fail {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: #d4243f;
}
.pe-i__ops {
  display: flex;
  border-top: 1px solid var(--border-1);
}
.pe-i__ops button {
  flex: 1 1 50%;
  display: grid; place-items: center;
  height: 24px;
  border: none;
  background: var(--bg-raise);
  color: var(--text-third);
  cursor: pointer;
}
.pe-i__ops button:first-child { border-right: 1px solid var(--border-1); }
.pe-i__ops button:active { background: var(--bg-sunken); color: var(--brand-600); }

.pe-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text-third);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out);
}
.pe-add:active, .pe-add:hover { border-color: var(--brand-400); color: var(--brand-600); }

.pe__tip {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-third);
  line-height: 1.6;
}

/* 视频块 */
.pe__vwrap { margin-top: 12px; }
.pe-vadd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px var(--sp-4);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--text-second);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
}
.pe-vadd em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-third); }
.pe-vadd:active { border-color: var(--brand-400); color: var(--brand-600); }

.pe-v {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--bg-raise);
}
.pe-v__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-sunken);
}
.pe-v__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-v__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.14); }
.pe-v__bar > i { display: block; height: 100%; background: var(--grad-brand); transition: width .18s var(--ease-out); }
.pe-v__c { flex: 1 1 auto; min-width: 0; }
.pe-v__t { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.pe-v__s { margin-top: 2px; font-size: 11.5px; color: var(--text-third); }
.pe-v__x {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: none; border-radius: var(--r-full);
  background: var(--bg-sunken);
  color: var(--text-third);
  cursor: pointer;
}

/* 超限申请面板 */
.tk {
  margin: var(--sp-4) var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid rgba(212,148,58,.32);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(253,243,231,.9), rgba(248,232,213,.65));
}
.tk__hd { display: flex; align-items: center; gap: 8px; }
.tk__ico {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-full);
  background: rgba(214,148,58,.18);
  color: #a9701c;
}
.tk__t { font-size: var(--fs-md); font-weight: 700; color: #6b4a15; }
.tk__d { margin: 8px 0 12px; font-size: var(--fs-xs); line-height: 1.7; color: #7a5a26; }
.tk .fm-in, .tk .fm-ta { background: rgba(255,255,255,.86); margin-bottom: var(--sp-2); }
.tk.is-done { opacity: .72; }
[data-theme="dark"] .tk { background: linear-gradient(158deg, #2b2114, #241b10); border-color: rgba(214,148,58,.3); }
[data-theme="dark"] .tk__t { color: #f0d9b8; }
[data-theme="dark"] .tk__d { color: #d9c3a0; }


/* ==================================================================
   12. 详情页九宫格 / 视频
   ================================================================== */
.yq-grid {
  display: grid;
  gap: 4px;
  margin: var(--sp-3) 0;
}
.yq-grid--3 { grid-template-columns: repeat(3, 1fr); }
.yq-grid--2 { grid-template-columns: repeat(2, 1fr); }
.yq-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
  background: var(--bg-sunken);
  margin: 0 !important;
}
/* 正文里的视频：与图片同宽，圆角统一 */
.yq-content video, .yq-detail video, article video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--r-md);
  background: #000;
  display: block;
  margin: var(--sp-3) 0;
}


/* ==================================================================
   13. 全站统一版式组件
   —— 目的：首页/广场/活动/我的，每一块都用同一套「白卡 + 圆角 + 描边」
      语言。历史问题是每个页面各自用 inline style 拼积木，
      导致上半部分和下半部分看起来像两个人做的。
   ================================================================== */

/* ---------- 13.1 工具条（板块筛选 + 排序）---------- */
.yq-toolbar {
  margin: var(--sp-3) var(--sp-4) 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.yq-toolbar__row { display: flex; align-items: center; }
.yq-toolbar__row--sub {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  gap: var(--sp-3);
}
.yq-toolbar__chips {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.yq-toolbar__chips::-webkit-scrollbar { display: none; }
.yq-toolbar__n {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-third);
  padding-right: var(--sp-2);
}
.yq-toolbar__kw {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-second);
}
.yq-toolbar__kw b { color: var(--brand-600); }
.yq-toolbar__kw a { margin-left: auto; color: var(--text-third); }

/* 板块胶囊：比 .yq-pill 更轻，无边框，靠底色区分，和卡片融为一体 */
.yq-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-second);
  background: var(--bg-sunken);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.yq-chip__n { font-size: 10.5px; opacity: .55; font-weight: 700; }
.yq-chip.is-on {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--sh-brand, var(--sh-1));
}
.yq-chip.is-on .yq-chip__n { opacity: .8; }

/* ---------- 13.2 数据概览卡（首页）---------- */
.yq-statcard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.yq-statcard__i {
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  position: relative;
}
.yq-statcard__i + .yq-statcard__i::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 26px;
  background: var(--line);
}
.yq-statcard__n {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.yq-statcard__k {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-third);
}

/* ---------- 13.3 功能宫格（首页快捷入口）---------- */
.yq-entries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: var(--sp-3) 6px;
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.yq-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) 0;
  border-radius: var(--r-md);
  transition: background .16s var(--ease-out);
}
.yq-entry:active { background: var(--bg-sunken); }
.yq-entry__ico {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--grad-brand-soft);
  color: var(--brand-600);
}
.yq-entry__t {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.yq-entry__s {
  font-size: 10px;
  color: var(--text-third);
  line-height: 1.2;
}

/* ---------- 13.4 统一区块间距 ---------- */
.yq-main > section { margin-bottom: var(--sp-5); }
.yq-main > section:last-of-type { margin-bottom: 0; }
/* 瀑布流内的卡片不继承 section 的下边距，避免列内出现大空洞 */
.yq-water > section { margin: 0; }

/* 瀑布流里的加载指示器（无限滚动）不再占一整列 */
.yq-water .yq-loading { break-inside: avoid; }


/* ==================================================================
   14. 个人中心（紧凑版）+ 设置中心
   —— 「我的」原本头部过高、下面压 5 行入口，导致「我的活动」必须下滑；
      这里把资料头压扁并把三个关键入口提到首屏，另外补上设置项。
   ================================================================== */

/* ---------- 14.1 紧凑资料头 ---------- */
.pr-hd--slim {
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
}
.pr-hd--slim .pr-hd__name { font-size: var(--fs-lg); font-weight: 800; }
.pr-hd__sub {
  margin-top: 3px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: var(--fs-xs); color: var(--text-second);
}
.pr-hd__score { font-weight: 700; color: var(--brand-700); }
[data-theme="dark"] .pr-hd__score { color: var(--brand-300); }
.pr-hd__dot { opacity: .45; }

.pr-hd__set {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.7);
  color: var(--text-second);
  border: 1px solid var(--border-1);
}
.pr-hd__set:active { background: #fff; color: var(--brand-600); }

/* 三个入口：首屏可见、可点、带真实计数 */
.pr-quick {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-4);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.pr-quick__i {
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  position: relative;
  transition: background .16s var(--ease-out);
}
.pr-quick__i:active { background: var(--bg-sunken); }
.pr-quick__i + .pr-quick__i::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 26px;
  background: var(--line);
}
.pr-quick__i b {
  display: block;
  font-size: 20px; font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pr-quick__i span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-third); }
.pr-quick__i.is-on b { color: var(--brand-600); }

/* 内容锚点：切 tab 后浏览器会把这里滚进视口，避免「点了像没反应」 */
#meBody { scroll-margin-top: calc(var(--hd-h) + 8px); }

/* 带缩略图的入口行（我的活动 / 我的收藏） */
.pr-item__thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg-sunken);
  color: var(--brand-500);
}
.pr-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-item__c { flex: 1 1 auto; min-width: 0; }
.pr-item__t {
  display: block;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-item__m {
  margin-top: 5px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-third);
}
.pr-item + .pr-item { border-top: 1px solid var(--line); }

/* ---------- 14.2 设置中心 ---------- */
.set-title {
  margin: var(--sp-5) var(--sp-4) var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-third);
}
.set-group {
  margin: 0 var(--sp-4);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.set-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
button.set-row { cursor: pointer; }
button.set-row:active { background: var(--bg-sunken); }
.set-row__ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-600);
}
.set-row__c { flex: 1 1 auto; min-width: 0; }
.set-row__t { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.set-row__s { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-third); line-height: 1.5; }
.set-row__v {
  flex: 0 0 auto;
  max-width: 46%;
  font-size: var(--fs-xs);
  color: var(--text-third);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-row__arrow { flex: 0 0 auto; color: var(--text-third); display: flex; }

/* 开关 */
.sw {
  flex: 0 0 auto;
  position: relative;
  width: 46px; height: 27px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--bg-sunken);
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.sw::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,30,24,.22);
  transition: left .2s var(--ease-out);
}
.sw.is-on { background: var(--grad-brand); border-color: transparent; }
.sw.is-on::after { left: calc(100% - 23px); }

/* 退出登录 */
.yq-btn--danger {
  background: rgba(212,36,63,.08);
  color: #d4243f;
  border: 1px solid rgba(212,36,63,.22);
}
.yq-btn--danger:active { background: rgba(212,36,63,.14); }
[data-theme="dark"] .yq-btn--danger { background: rgba(212,36,63,.14); color: #ff7b93; }

/* ---------- 14.3 意见反馈面板 ---------- */
.fb { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; background: rgba(12,18,15,.42); }
.fb__panel {
  width: 100%; max-width: var(--page-max);
  background: var(--bg-raise);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
  animation: yqUp .26s var(--ease-out);
  padding-bottom: calc(var(--sp-4) + var(--safe-bot));
}
.fb__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.fb__t { font-size: var(--fs-lg); font-weight: 700; }
.fb__body { padding: 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.fb__kinds { display: flex; flex-wrap: wrap; gap: 6px; }


/* ==================================================================
   15. 首页重排（速达区 + 横滑活动 + 单一主信息流）
   —— 重排前页面上有三个视觉语言完全一致的瀑布流区块
      （近期活动 / 大家在聊 / 最新分享），中间还插了宫格和标签，
      加上标签内容被公益寻亲词污染，整页就是「一屏接一屏的卡片墙」。
      这里把层级从 8 块压到 5 块：标签置顶进速达区、
      活动改横滑、三个瀑布流合并为一个。
   ================================================================== */

/* ---------- 15.1 速达区（话题 + 宫格 + 体量，合成一张卡）---------- */
.hm-dock {
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.hm-dock__hd {
  display: flex; align-items: center;
  padding: var(--sp-3) var(--sp-4) 0;
}
.hm-dock__t {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.hm-dock__all {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-third);
}

/* 标签条：卡片内不再重复左右内边距（.yq-chips 自带 --sp-4） */
.hm-dock__tags {
  padding: var(--sp-2) var(--sp-4) 2px;
}

/* 20260921hb1-chips：热门话题横滑修复。
   .yq-pill 只有 white-space:nowrap，没有 flex:0 0 auto —— 在 flex 容器里
   会被压缩（默认 flex-shrink:1），于是文字被挤出胶囊、且撑不出横向滚动。
   横滑三件套：子项不收缩 + 容器 touch 惯性 + 允许横向手势。 */
.hm-dock__tags > * { flex: 0 0 auto; }
.hm-dock__tags {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.hm-dock__tags::-webkit-scrollbar { display: none; }

/* 话题胶囊：# 前缀 + 数据热度加强 */
.hm-tag i {
  font-style: normal;
  font-weight: 800;
  color: var(--brand-500);
  margin-right: 2px;
  opacity: .85;
}
.hm-tag.is-hot {
  background: var(--grad-brand-soft);
  border-color: var(--brand-200);
  color: var(--brand-700);
  font-weight: 700;
}
.hm-tag.is-hot i { color: var(--brand-600); opacity: 1; }
[data-theme="dark"] .hm-tag.is-hot { color: var(--brand-300); border-color: var(--brand-800); }

/* 宫格：在卡内，去掉独立卡片的底色/描边。
   6 项 → 3 列 × 2 行（11px 侧栏留白下每格约 205px，够放主标题 + 副标题）；
   早先是 4 列 × 1 行，加到 6 项后会挤成两行且第一行 4 个第二行 2 个，很别扭。 */
.hm-dock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 4px;
  padding: var(--sp-3) 8px var(--sp-2);
}
.hm-dock__grid .yq-entry {
  padding: 9px 0;
  gap: 6px;
}

/* 体量：一行小字，替代原先占一整条的大数字卡 */
.hm-dock__stats {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--line);
  margin-top: 0;
  font-size: var(--fs-xs);
  color: var(--text-third);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hm-dock__stats i { font-style: normal; margin: 0 6px; opacity: .5; }

/* ---------- 15.2 近期活动：横向滑动卡 ---------- */
.hm-ev {
  width: 218px;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease-out);
}
.hm-ev:active { transform: scale(.985); }

.hm-ev__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  overflow: hidden;
}
.hm-ev__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-ev__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--brand-500);
}
.hm-ev__st {
  position: absolute; left: 8px; top: 8px;
  height: 20px; padding: 0 8px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  background: rgba(18,160,84,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hm-ev__st--ended  { background: rgba(93,107,99,.86); }
.hm-ev__st--soon   { background: rgba(224,147,42,.92); }
.hm-ev__st--full   { background: rgba(31,120,190,.9); }

.hm-ev__b {
  display: grid; gap: 6px;
  padding: 10px 12px 12px;
}
.hm-ev__t {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.hm-ev__m {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-third);
}
.hm-ev__m span { display: inline-flex; align-items: center; gap: 3px; }
.hm-ev__m svg { flex: 0 0 auto; opacity: .8; }

/* 「全部活动」尾卡 */
.hm-ev--more {
  width: 96px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--bg-raise-2);
  border-style: dashed;
  box-shadow: none;
}
.hm-ev__more-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--bg-raise);
  color: var(--brand-600);
  border: 1px solid var(--border-1);
}
.hm-ev__more-t { font-size: var(--fs-xs); font-weight: 700; color: var(--text-second); }

/* ---------- 15.3 主信息流工具条：让分栏控件占满整行、右对齐计数 ---------- */
.yq-main > section > .yq-toolbar .yq-toolbar__row { gap: var(--sp-2); }
/* ================= 49. 发布器 · 小红书式（2026-09-20） ================= */
.pub { padding: 0 var(--sp-4); display: block; }
.pub-media { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-3); }
.pub-media .pe { margin-top: 0; }
.pub-title { margin-top: var(--sp-3); }
.pub-title input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary);
  padding: var(--sp-2) 0;
}
.pub-title input::placeholder { color: var(--text-third); font-weight: 600; }
.pub-body textarea {
  width: 100%; border: 0; outline: 0; background: transparent; resize: vertical;
  font-size: var(--fs-md); line-height: 1.75; color: var(--text-primary);
  min-height: 140px; padding: var(--sp-2) 0;
}
.pub-body textarea::placeholder { color: var(--text-third); }

/* 话题胶囊 */
.pub-topics { margin: var(--sp-2) 0 0; }
.pub-topics__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pub-topics__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--brand-700);
  font-size: var(--fs-sm); font-weight: 600;
}
.pub-topics__chip button {
  border: 0; background: transparent; color: var(--text-third);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 0 0 2px;
}
.pub-topics__chip button:hover { color: var(--accent-xhs); }

/* 工具行 */
.pub-tools {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-1);
}
.pub-tools__i {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-second); font-size: var(--fs-sm); font-weight: 600;
  padding: 6px 10px; margin-left: -10px; border-radius: var(--r-full);
}
.pub-tools__i:active { background: var(--bg-sunken); }
.pub-tools__i i {
  font-style: normal; font-weight: 800; color: var(--brand-600); font-size: 15px;
}
.pub-tools__i svg { color: var(--brand-600); }

/* 话题输入 + 热门推荐 */
.pub-topic-add { padding: var(--sp-2) 0 var(--sp-3); }
.pub-topic-add input {
  width: 100%; padding: 10px var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--border-1); background: var(--bg-raise);
  font-size: var(--fs-sm); outline: 0;
}
.pub-topic-add input:focus { border-color: var(--brand-400); }
.pub-topic-add__hot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pub-topic-add__hot[hidden] { display: none; }
.pub-topic-add__h {
  border: 0; cursor: pointer; padding: 5px 12px; border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--text-second);
  font-size: var(--fs-xs); font-weight: 600;
}
.pub-topic-add__h:active { color: var(--brand-700); }

/* 活动字段（卡片式） */
.pub-rows {
  display: grid; gap: 0; margin-top: var(--sp-3);
  background: var(--bg-raise); border-radius: var(--r-md);
  border: 1px solid var(--border-1); overflow: hidden;
}
.pub-row {
  display: grid; grid-template-columns: 76px 1fr; align-items: center;
  gap: var(--sp-3); padding: 12px var(--sp-4);
}
.pub-row + .pub-row { border-top: 1px solid var(--border-1); }
.pub-row__k { font-size: var(--fs-sm); font-weight: 600; color: var(--text-second); }
.pub-row input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-size: var(--fs-md); color: var(--text-primary);
}
.pub-row--2col { display: grid; grid-template-columns: 76px 1fr 1fr; }
.pub-row--2col > span { display: grid; gap: 4px; }
.pub-row--2col .pub-row__k { display: none; }
@media (max-width: 400px) {
  .pub-row--2col { grid-template-columns: 76px 1fr; }
  .pub-row--2col > span:last-child { grid-column: 2; }
}

/* 发布到（板块） */
.pub-sec {
  display: grid; grid-template-columns: 76px 1fr; align-items: center;
  gap: var(--sp-3); padding: var(--sp-3) 0;
}
.pub-sec__k { font-size: var(--fs-sm); font-weight: 600; color: var(--text-second); }
.pub-sec__v { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 底部发布条：存草稿 + 大发布按钮 */
.pub-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tb-h) + var(--safe-bot));
  width: 100%; max-width: var(--page-max);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-1);
  box-shadow: 0 -6px 20px rgba(23,33,27,.07);
  z-index: calc(var(--z-hd) + 1);
}
.pub-bar__draft {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--text-second); font-size: var(--fs-sm); font-weight: 600;
  padding: 10px 4px;
}
.pub-bar__go {
  flex: 1; border: 0; cursor: pointer;
  padding: 13px 0; border-radius: var(--r-full);
  background: linear-gradient(128deg, var(--brand-500), var(--brand-600));
  color: #fff; font-size: var(--fs-md); font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 6px 16px rgba(31,190,102,.32);
  transition: transform .12s, box-shadow .12s;
}
.pub-bar__go:active { transform: scale(.98); box-shadow: 0 3px 10px rgba(31,190,102,.28); }
.pub-bar__go[disabled] { opacity: .6; }

/* ================= 50. 正文话题链接（双端共用） ================= */
.yq-topic {
  color: var(--brand-600); font-weight: 600;
  text-decoration: none;
}
.yq-topic:active { color: var(--brand-700); }

/* ================= 51. 消息中心 tabs（私信 / 闲鱼） ================= */
.ms-tabs {
  display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2);
  position: sticky; top: var(--hd-h, 54px); background: var(--bg-base); z-index: 5;
}
.ms-tabs__i {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-second);
  background: var(--bg-raise-2); text-decoration: none;
}
.ms-tabs__i.is-on { background: var(--brand-600); color: #fff; }
.ms-tabs__i i {
  font-style: normal; font-size: var(--fs-xs); font-weight: 700;
  background: rgba(0,0,0,.08); border-radius: var(--r-full); padding: 1px 7px;
}
.ms-tabs__i.is-on i { background: rgba(255,255,255,.22); color: #fff; }

/* ================= 52. 会话内商品卡片（闲鱼私聊） ================= */
.ct-idle {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-3) var(--sp-4) 0; padding: var(--sp-3);
  background: var(--bg-raise); border: 1px solid var(--border-1);
  border-radius: var(--r-md); text-decoration: none; color: inherit;
}
.ct-idle__p {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--bg-sunken) center/cover no-repeat;
}
.ct-idle__c { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ct-idle__t {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-idle__m { display: flex; align-items: baseline; gap: 4px; font-size: var(--fs-sm); }
.ct-idle__m i { color: var(--accent-xhs); font-style: normal; font-size: var(--fs-xs); }
.ct-idle__m b { color: var(--accent-xhs); font-weight: 800; }
.ct-idle__m em {
  font-style: normal; font-size: var(--fs-xs); color: var(--text-third);
  border: 1px solid var(--border-1); border-radius: 4px; padding: 0 4px;
}
.ct-idle__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-xs); color: var(--text-third);
}

/* ================= 53. 话题页 ================= */
.tp-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background:
    radial-gradient(120px 70px at 88% -10%, var(--brand-100), transparent),
    var(--bg-raise);
  border-bottom: 1px solid var(--border-1);
}
.tp-head__ic {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-600); color: #fff;
  font-size: 30px; font-weight: 800; font-family: Georgia, serif;
}
.tp-head__c { flex: 1; min-width: 0; }
.tp-head__t { margin: 0; font-size: var(--fs-xl); font-weight: 800; color: var(--text-primary); }
.tp-head__s { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-third); }

.tp-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  padding: var(--sp-4);
}
.tp-c {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-raise); border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--border-1);
}
.tp-c__p {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--bg-sunken) center/cover no-repeat;
}
.tp-c__v {
  position: absolute; right: 8px; top: 8px; width: 22px; height: 22px;
  border-radius: var(--r-full); background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tp-c__t {
  padding: 9px var(--sp-3) 4px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-primary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em;
}
.tp-c__ft {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-3) 10px; font-size: var(--fs-xs); color: var(--text-third);
}
.tp-c__a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tp-c__a .yq-ava--xs { width: 16px; height: 16px; border-radius: 50%; }
.tp-c__z { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.tp-more { padding: 0 var(--sp-4) var(--sp-5); }

.tp-cloud {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
.tp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--bg-raise); border: 1px solid var(--border-1);
  color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
}
.tp-pill i {
  font-style: normal; font-size: var(--fs-xs); color: var(--text-third); font-weight: 600;
}
.tp-pill.is-hot { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }


/* ===== 20260920sq1 · 广场「筛选」弹层 + PWA 顶部安全区 ===== */
.yq-fbtn { flex: none; margin-left: 8px; cursor: pointer; user-select: none; }
.yq-fmask {
  position: fixed; inset: 0; z-index: 78; background: rgba(15, 23, 32, .42);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.yq-fmask.is-open { opacity: 1; pointer-events: auto; }
.yq-fpop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 79;
  background: #fff; border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 34px rgba(15, 23, 32, .16);
  padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(106%); transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}
.yq-fpop.is-open { transform: translateY(0); }
.yq-fpop__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 2px; font-size: 15px; font-weight: 700; color: #0f1720;
}
.yq-fpop__x {
  border: 0; background: #f2f5f6; color: #5a6b78; font-size: 12.5px;
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
}
.yq-fpop__t {
  font-size: 11.5px; color: #93a2ad; margin: 12px 0 8px;
  font-weight: 600; letter-spacing: .4px;
}
.yq-fpop .yq-toolbar__chips { max-height: 32vh; }
/* PWA 独立窗口：头部避开状态栏（APK 内 env()=0 且原生已做 fitsSystemWindows，不受影响） */
@media (display-mode: standalone) { .yq-hd { padding-top: env(safe-area-inset-top); } }

/* 20260920sq2 · 未开放入口置灰 */
.yq-linkbar--soon { opacity: .55; }

/* ---------- 20260920top1 · 小红书式克制顶栏 + 活动页工具行 ---------- */
/* 顶栏居中页名：绝对定位居中，左右留给 返回/图标，互不挤压 */
.yq-hd__title--c {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + var(--hd-h) / 2);
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-primary);
}
/* 首页：居中站名保留品牌渐变字 */
.yq-hd__title--c.yq-hd__title--brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 活动页工具行：一行轻 chips（可横滑），替代原来的 5 张入口大卡 */
.yq-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
  overflow-x: auto;
  /* gesture.css 全局 pan-y 会禁掉原生横滚，这里必须单独放行 pan-x */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  /* gesture.css 全局 pan-y 会禁掉原生横滚，这里必须单独放行 pan-x */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.yq-tools::-webkit-scrollbar { display: none; }
.yq-tools__i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: var(--bg-raise);
  border: 1px solid var(--border-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-second);
}
.yq-tools__i:active { background: var(--bg-sunken); }
.yq-tools__i.is-soon { opacity: .5; }
/* 活动页工具条右侧「发起活动」按钮顶到右边 */
.yq-toolbar__row .yq-btn { margin-left: auto; }

/* 首页 hm-dock 卡内的工具行：去掉外层横向 padding，与卡内其他行对齐 */
.hm-dock .yq-tools { padding: var(--sp-2) 0 0; }

/* ===== 广场标签页导航（20260920sq2 · 两步路式大标签）===== */
.yq-sqbar { display: flex; align-items: center; gap: var(--sp-3); }
.yq-sqtabs {
  display: flex; align-items: baseline; gap: var(--sp-5);
  flex: 1; min-width: 0; overflow-x: auto; touch-action: pan-x;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 2px 2px 0;
}
.yq-sqtabs::-webkit-scrollbar { display: none; }
.yq-sqtab {
  position: relative; flex: 0 0 auto;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.25;
  color: var(--text-second); text-decoration: none;
  padding: 4px 1px 10px;
  transition: color .15s ease;
}
.yq-sqtab.is-on {
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--text-primary); letter-spacing: -.01em;
}
.yq-sqtab__u {
  position: absolute; left: 15%; bottom: 1px; width: 70%; height: 6px;
  color: var(--brand-500); display: none; pointer-events: none;
}
.yq-sqtab.is-on .yq-sqtab__u { display: block; }
.yq-sqaux { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
@media (max-width: 350px) { .yq-sqtabs { gap: var(--sp-4); } }

/* ---- 主底栏中央隆起「卖闲置」（20260921fs1）—— 镜像 idle.css 的 .il-tb__pub ----
   咸鱼五槽位底栏：首页 · 咸鱼社区 · [卖闲置] · 消息 · 我的。
   渐变不用 var(--grad-brand)（那是 idle.css 的 zone 变量，主站没定义），
   直接用全站薄荷渐变兜底。 */
.yq-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(--text-third, #93a29a);
  font-size: 10px;
}
.yq-tb__pub__btn {
  width: 50px; height: 50px;
  margin-top: -22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-mint, linear-gradient(128deg, #c9ffdf 0%, #5bedc6 52%, #74e3da 100%));
  box-shadow: 0 6px 18px rgba(31, 190, 102, .38), 0 0 0 4px rgba(255,255,255,.96);
}
html[data-theme="dark"] .yq-tb__pub__btn {
  box-shadow: 0 6px 18px rgba(31, 190, 102, .38), 0 0 0 4px rgba(24,29,38,.96);
}
.yq-tb__pub.is-on .yq-tb__pub__t { color: var(--mint-600, #1fb98c); font-weight: 700; }

/* 20260921tag1（P0）: 首页热门话题横滑修复。
   gesture.css 在 html[data-yq-gesture] body 上全局声明 touch-action:pan-y
   （注释原话「横向交给 JS 独占」），而 .yq-chips 没有单独放行 —— 浏览器
   touch-action 取祖先交集，于是触摸端这个容器**完全不能横向滚动**，
   标签被裁在卡片里看不全（用户反馈「不能左右滑动 / 溢出 UI」）。
   补三件套：容器放行 pan-x + iOS 惯性 + 子项不收缩。 */
.yq-chips, .hm-dock__tags {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* ★ 必须是 pan-x pan-y，不能只写 pan-x：
     纯 pan-x 会禁掉纵向原生滚动，手指落在标签条上就滚不动整页
     （hb1 那版 .hm-dock__tags 用的就是 pan-x pan-y，保持一致）。 */
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.yq-chips > *, .hm-dock__tags > * { flex: 0 0 auto; }
.yq-chips::-webkit-scrollbar, .hm-dock__tags::-webkit-scrollbar { display: none; }

/* ===== [PUB-REL] 20260924ui8 · 发布入口迁入顶栏胶囊（工单 11:2x P0）=====
   纯增量 append，删除本段即完整回滚（本段未删除/覆盖任何旧选择器）。
   病根：右下悬浮 .yq-fab 与底栏第 5 槽「我的」水平偏差 2px、垂直净距 18px，
        一次落点同时覆盖「发布」与「我的」（红线 6）。
   类名偏离设计稿：稿中 .yq-pill 与既有筛选胶囊 .yq-pill（30px / bg-raise-2 /
   .is-on 渐变）重名，直接采用会污染全站筛选条 → 改名 .yq-hd__pub。 */
.yq-hd__pub {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; padding: 0 13px;
  border: 0; border-radius: var(--r-full);
  background: var(--brand-700); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; flex: none;
  transition: background-color .16s var(--ease-out);
}
/* 触控补齐到 44x44（红线 6 双口径）：视觉尺寸不变，仅伪元素外扩 */
.yq-hd__pub::before { content: ''; position: absolute; inset: -4px 0; }
/* 按压只换底色不缩放（顶栏元素缩放会错位） */
.yq-hd__pub:active { background: var(--brand-800); }
/* 未登录：降为描边态但不隐藏（隐藏会让用户永远发现不了发布） */
.yq-hd__pub.is-guest {
  background: transparent; color: var(--brand-700);
  border: 1px solid var(--brand-700); font-weight: 600;
}
.yq-hd__pub.is-guest::before { content: ''; position: absolute; inset: -5px 0; }
.yq-hd__pub svg { width: 15px; height: 15px; flex: none; }
/* 发布已迁顶栏，右下悬浮钮停用（元素保留：pc.js 仍按 DOM 取用） */
.yq-fab { display: none; }


/* ===== [PUB-REL] 20260924pb1 · 发布抽屉重排版 + 发布页图文区基线 =====
   依据：ui设计/宜宇_发布入口与图文编辑器_重排版.html（视图 3 抽屉 / 视图 4 发布页 / 落地补丁 3·4）
   纯增量 append，删除本段即完整回滚。
   类名回避：稿中 .yq-pill 与既有筛选胶囊重名（app.css L428）→ 顶栏入口沿用线上 .yq-hd__pub；
             新增 .pub-hero / .pub-grid / .pub-gi 上线前已 grep 全站 0 冲突。
   ---- 抽屉：主卡 + 2x2 网格（原三条等权重竖排，用户要读完三段才知道点哪） ---- */
.yq-drawer__body { display: block; }

.pub-hero {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 10px; padding: 13px;
  border-radius: var(--r-md);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  transition: background-color .16s var(--ease-out);
}
.pub-hero:active { background: var(--bg-sunken); }
.pub-hero__i {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--brand-700); color: #fff;
}
.pub-hero__c { flex: 1 1 auto; min-width: 0; }
.pub-hero__c b { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); }
.pub-hero__c i {
  display: block; margin-top: 2px; font-size: var(--fs-xs);
  font-style: normal; color: var(--text-third); line-height: 1.5;
}
.pub-hero__ar { flex: 0 0 auto; color: var(--brand-700); }
.pub-hero__ar svg { display: block; }

.pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pub-gi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 92px; padding: 0 6px;
  border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--border-1);
  font-size: 12.5px; color: var(--text-second); text-align: center;
  transition: background-color .16s var(--ease-out);
}
.pub-gi:active { background: var(--bg-raise); }
.pub-gi i { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--text-third); }
.pub-gi__i {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bg-raise); border: 1px solid var(--border-1);
  color: var(--g600, #3F7D5C);
}
.pub-gi--ai .pub-gi__i { color: var(--a700, #A9603A); }

/* ---- 发布页图文区：与标题/正文同一 16px 基线 ----
   旧规则 margin:0 -16px + padding:0 12px 做出血，图文区 12px 而正文 16px，同一屏两套基线。 */
.pub-media { margin: 0; padding: 0; }

/* 0 张：通栏大加号（publish.js 在 items.length === 0 时加 .pe-add--big） */
.pe-add--big {
  grid-column: 1 / -1;
  aspect-ratio: auto; width: 100%; height: 150px; gap: 7px;
  font-size: 13.5px; color: var(--text-second);
  border-width: 1px; border-style: dashed; border-color: var(--border-2);
}
.pe-add--big i { font-style: normal; font-size: 11.5px; color: var(--text-third); }
.pe-add--big svg { width: 26px; height: 26px; }

/* 删除键热区补到 44x44：.pe-i 的 overflow:hidden 会裁掉外扩热区，
   改由 .pe-i__ph / .pe-i__ops 自己裁剪圆角（视觉不变） */
.pe-i { overflow: visible; }
.pe-i__ph { border-radius: inherit; }
.pe-i__ops { border-radius: 0 0 var(--r-sm) var(--r-sm); overflow: hidden; }
.pe-i__x::before { content: ''; position: absolute; inset: -13px; }


/* =========================================================================
   [PUB-REL] 20260924pb2 · 1:1 复核（顶栏胶囊 / 发布抽屉 / 发布页）
   依据：ui设计/宜宇_发布入口与图文编辑器_重排版.html
        · v2 「.pill 组件规范」表 + 落地补丁 1（视觉 36 / 触控 44 / 圆角 999 / padding 0 13）
        · v3 视图（主卡 .pub-hero + 2x2 .grid2/.gi）取稿内 style 精确数值
        · v4 视图（.pe 与标题同 16px 基线 / .addbox.big 150px / 计数文案 / 删除键外扩）
   本段只覆盖 pb1/ui8 两段里的偏离值，删除本段即完整回到 pb1 状态。
   ========================================================================= */

/* ---- 顶栏发布胶囊：稿 .pill 规范 ---- */
.yq-hd__act { padding-right: 8px; }                       /* 补丁 1：右侧留 8px */
.yq-hd__pub { background: var(--brand-500, #1fbe66); }    /* 稿 --br #1FBE66；pb1 误用 brand-700 #0d7f43 */
.yq-hd__pub::before { inset: -4px -2px; }                 /* 稿：左右各外扩 2px 补足 44 宽 */
.yq-hd__pub:active { background: var(--brand-600, #12a054); }  /* 稿 --br-d #12A054，只换底色不缩放 */
.yq-hd__pub.is-guest {                                    /* 稿 .dis：描边灰，不隐藏 */
  background: transparent; color: var(--text-third, #93a29a);
  border: 1px solid var(--border-1); font-weight: 600;
}
.yq-hd__pub.is-guest::before { inset: -5px -2px; }

/* ---- 发布抽屉：稿 v3 sheet 结构（grip 36x4 + 标题 14/650） ---- */
.yq-drawer__grip {
  display: block; width: 36px; height: 4px; border-radius: 999px;
  background: var(--border-1); margin: 6px auto 10px;
}
.yq-drawer__hd { padding: 0 16px 10px; }
.yq-drawer__title { font-size: 14px; font-weight: 650; }
/* 稿 sheet 本体无左右内边距，主卡 margin 0 12px、网格 padding 0 12px 14px 自行控制 */
.yq-drawer__body { padding: 0 0 var(--sp-5); }

/* ---- 主卡（稿 .pub-hero：12 圆角 / g50 底 / g100 描边） ---- */
.pub-hero {
  margin: 0 12px 10px;
  border-radius: 12px;
  background: var(--g50, #F2F8F4); border: 1px solid var(--g100, #E7F1EA);
}
.pub-hero__i {
  border-radius: 12px;
  background: var(--brand-500, #1fbe66); color: #fff;
}
.pub-hero__i svg { width: 24px; height: 24px; stroke-width: 2.1; }
.pub-hero__c b { font-size: 14.5px; font-weight: 700; }
.pub-hero__c i { font-size: 11.5px; }
.pub-hero__ar { color: var(--g600, #3F7D5C); }
.pub-hero__ar svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ---- 2x2 网格（稿 .grid2 / .gi / .gi__i） ---- */
.pub-grid { padding: 0 12px 14px; }
.pub-gi {
  border-radius: 12px;
  background: var(--soft-idle, #F4F8F5); border: 1px solid var(--line2-idle, #EDF2EE);
  color: var(--ink2-idle, #4A5A51);
}
.pub-gi i { font-size: 11px; color: var(--ink4-idle, #8C9A92); }
.pub-gi__i { border: 1px solid var(--line-idle, #E2EBE4); }
.pub-gi__i svg { stroke-width: 1.8; }
.pub-gi--ai .pub-gi__i {                                  /* 稿 .gi.ai：暖橙底 */
  background: var(--a50, #FDF6EF); border-color: var(--a100, #FBEDE2);
  color: var(--a700, #A9603A);
}

/* 稿是明色稿，上述字面量按稿固定；暗色下给等价落点（不动明色精确值） */
html[data-theme="dark"] .pub-hero { background: var(--bg-sunken); border-color: var(--border-1); }
html[data-theme="dark"] .pub-hero__ar { color: var(--brand-500, #1fbe66); }
html[data-theme="dark"] .pub-gi { background: var(--bg-sunken); border-color: var(--border-1); color: var(--text-second); }
html[data-theme="dark"] .pub-gi i { color: var(--text-third); }
html[data-theme="dark"] .pub-gi__i { background: var(--bg-raise); border-color: var(--border-1); }
html[data-theme="dark"] .pub-gi--ai .pub-gi__i {
  background: rgba(169, 96, 58, .14); border-color: rgba(169, 96, 58, .38);
}

/* ---- 发布页：稿 v4 .pl-title 19/800、.pl-body 13.5/1.7 ---- */
.pub-title input { font-size: 19px; }
.pub-body textarea { font-size: 13.5px; line-height: 1.7; }


/* ===== 20260924pb4 · 公告页（/notice）顶栏 / 底栏做减法 =====
   用户要求：公告页去掉顶栏搜索放大镜、去掉底栏「消息」入口。
   纯增量 append，删除本段即完整回滚（未删除/覆盖任何旧选择器）。 */
.yq-app--notice .yq-hd__act .yq-ico-btn[aria-label="搜索"] { display: none; }
.yq-app--notice .yq-tb__i[data-tab="msg"] { display: none; }
/* 少一个槽位就把 5 列改 4 列，否则底栏会空出一格 */
@media (max-width: 1023.98px) {
  .yq-app--notice .yq-tb { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   [QS-REL] 2026-09-24 页内搜索框统一：开始
   —— 依据《宜宇_页内搜索框统一_设计稿.html》v1 规格表 + v5 落地补丁。
   用意：站里原本四套互不相干的实现（op-search 44 / ym-hd__search 34 /
   il-hd__search 34 / ms-search 36），收成一个组件两种形态。
   ★ 必须写在通用样式表：写进 opt.css 就会随主题整片消失（这是现状的病根）。
   【回滚】删掉本段即可，未删除或覆盖任何旧选择器。
   ========================================================================== */

/* ---- 形态甲 · 页内型：44 高，圆角 12，左右 14，白底 1px 边 ---- */
.yq-qsearch{
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  height:44px; margin:10px 14px 0; padding:0 12px;
  background:var(--bg-raise); border:1px solid var(--border-1);
  border-radius:12px; color:var(--text-third);
}
/* 聚焦只转边框色，不加阴影不放大 —— 搜索框是常驻元素，聚焦抖动会让整页跟着跳 */
.yq-qsearch:focus-within{ border-color:var(--brand-500); }
.yq-qsearch input{
  flex:1; min-width:0; height:100%;
  border:0; outline:0; background:none;
  font:13px/1 inherit; font-family:inherit; color:var(--text-primary);
  -webkit-appearance:none; appearance:none;
}
.yq-qsearch input::placeholder{ color:var(--text-third); }
/* ★ 现状缺失这行：type=search 时 Chrome/Android 自带一个样式不可控的原生叉号 */
.yq-qsearch input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.yq-qsearch__ico{ flex:none; color:var(--text-third); }
.yq-qsearch__go{
  flex:none; display:flex; align-items:center; height:44px;
  padding:0 2px 0 10px; font-size:13px; font-weight:600;
  color:var(--mint-600,#1fb98c); text-decoration:none;
}
/* × 做成 22 小圆点而不是 44 大按钮：它贴在框最右侧，整条 44 的框已是热区，
   再撑一个透明大按钮会盖住输入框末尾的文字 */
.yq-qsearch__clr{
  flex:none; width:22px; height:22px; padding:0; border:0;
  border-radius:50%; background:var(--bg-sunken); color:var(--text-second);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; cursor:pointer; text-decoration:none;
}

/* ---- 形态乙 · 栏内型：34 视觉 / 44 触控（商城 · 闲置顶栏用） ---- */
.yq-qsearch--bar{
  flex:1 1 auto; min-width:0;
  height:34px; margin:0; padding:0 12px;
  border-radius:var(--r-full); background:var(--bg-sunken);
  position:relative;
}
/* 上下各撑 5px 凑满 44 触控；不动视觉高度，52 顶栏不会被撑高 */
.yq-qsearch--bar::before{ content:''; position:absolute; inset:-5px 0; }
.yq-qsearch--bar input{ font-size:12.5px; }

/* ---- 吸顶型（备用）：容器本身 sticky，内层走页内型 ---- */
.yq-qsearch--sticky{
  position:sticky; top:var(--hd-h,0px); z-index:6;
  margin:0; padding:8px 14px; background:var(--bg-base);
  border:0; border-bottom:1px solid var(--border-1); border-radius:0;
  height:auto;
}
.yq-qsearch--sticky .yq-qsearch{ margin:0; }

/* ---- 无结果态：关键词留在框里 + 回显原词 + 给一条退路 ---- */
.yq-qempty{ padding:26px 16px 30px; text-align:center; color:var(--text-second); font-size:13px; }
.yq-qempty b{ display:block; color:var(--text-primary); font-size:13.5px; font-weight:650; margin-bottom:5px; }
.yq-qempty__act{
  display:inline-flex; align-items:center; height:36px; padding:0 14px; margin-top:12px;
  border:0; border-radius:var(--r-full); background:var(--bg-sunken);
  color:var(--mint-600,#1fb98c); font-size:12.5px; font-weight:650;
  cursor:pointer; text-decoration:none;
}

/* ---- P2：站中站（商城 / 闲置）顶栏搜索框，只补 44 触控，视觉一个像素都不动 ----
   它们现在能用也没坏，本轮不追求像素级统一，只修「34 低于触控下限」这一条。 */
.ym-hd__search, .il-hd__search{ position:relative; }
.ym-hd__search::before, .il-hd__search::before{ content:''; position:absolute; inset:-5px 0; }

/* [QS-REL] 结束 ========================================================== */


/* ===== [EV-STICK] 20260924pb7 · 活动页搜索框吸顶 =====
   用户：活动页面的搜索框没有固定。
   口径与消息页 .ms-stick 完全一致 —— top 用「顶栏高度 + 安全区」，
   z-index 用 --z-sticky（顶栏 --z-hd 仍在其上），背景必须不透明否则卡片会透上来。
   纯增量 append，删除本段即完整回滚（未删除/覆盖任何旧选择器）。 */
.ev-stick {
  position: sticky;
  top: calc(var(--hd-h, 54px) + var(--safe-top, 0px));
  z-index: var(--z-sticky, 20);
  background: var(--bg-base);
  padding: 8px 0;
}
/* .yq-qsearch 自带 margin:10px 14px 0；吸顶容器内由外层给上下留白，左右沿用 14 */
.ev-stick .yq-qsearch { margin: 0 14px; }

/* [YZ-REL] 20261008yz1 · 首页顶栏「小柚子」智能体入口（仅首页 hdIsHome 时渲染） */
.yq-hd__yz {
  width: 32px; height: 32px; flex: none; margin-left: -4px; position: relative;
  display: flex; align-items: center; justify-content: center; color: #3F7D5C;
}
.yq-hd__yz::after { content: ""; position: absolute; inset: -6px; }  /* 触控热区扩到 44 */
.yq-hd__yz svg { width: 32px; height: 32px; display: block; }

/* ==========================================================================
   20261021xz8 · BUG-01 · PC 端顶栏回归修复
   --------------------------------------------------------------------------
   opt 皮肤的「小红书风」首页顶栏三段（.yq-hd__br 品牌字 / .yq-hd__s 搜索胶囊 /
   .yq-hd__pubx 发布胶囊）现在与「居中品牌名 + .yq-hd__act」同时存在于 DOM 里
   （layouts/default.vue 用各自独立的 v-if 分流，见那边的 [BUG-01] 注释）。
   手机端的显现 / 让位写在 opt.css（整份裹在 max-width:1023.98px 里），
   PC 端没有 opt.css，三个元素会以浏览器原生样式露出来 ——
   方框 input + 黑字「+ 发布」，就是用户报的那个 BUG。
   所以这里在桌面断点把三段彻底藏掉；PC 顶栏回到「柚子 + 居中宜宇 + 搜索/发布图标」。

   ★ 三个类名是 20261021xz1 新增的，只有 opt 首页顶栏会用到，不波及其它页面。
   ★ 阈值与 opt.css / pc.css 一致（1023.98 / 1024），不留半像素缝。
   ========================================================================== */
@media (min-width: 1024px) {
  .yq-hd__br,
  .yq-hd__s,
  .yq-hd__pubx { display: none; }
}


/* ============================================================================
 * 20261025tb0 · 详情页无底栏
 * ----------------------------------------------------------------------------
 * /show 不再渲染 .yq-tb / .yq-lbtb（layout 里 hdNoTab 控制），这里把 --tb-h 归零，
 * 于是 .cm-bar 的 bottom: calc(var(--tb-h) + var(--safe-bot)) 自动变成贴底，
 * .cm-bar-spacer 也同步缩短 —— 评论区最后一条不会被输入栏压住。
 * 只影响挂了 .yq-app--notb 的页面，其它页面 --tb-h 仍是 58px。
 * ========================================================================== */
.yq-app--notb { --tb-h: 0px; }
/* 20261025evc1 · 贴底而不是"浮在安全区上方"：bottom:0 + 下内边距补偿，
   否则 iPhone（safe-area 34px）上会看到输入条下面空一条白带。 */
.yq-app--notb .cm-bar {
  bottom: 0;
  height: auto;
  min-height: 52px;
  padding-bottom: calc(var(--sp-2) + var(--safe-bot));
  box-shadow: 0 -4px 16px rgba(23, 33, 27, .06);
}