/* ==========================================================================
   宜宇 · 默认优化版主题（opt.css）—— 2026-09-23 op1
   设计稿：《宜宇_手机版_首页我的消息_重设计.html》（1:1）
   --------------------------------------------------------------------------
   【范围】只重绘三个页面，其余页面与底栏零改动：
     · 首页（.hm-home）：480px Hero → 搜索条 44 + 频道 chips 36 + 本周精选横幅 96
     · 我的：卡片式头 + 资产条四格 + 服务宫格 4×2 + 户外成就卡 + 红色退出
     （选择器用 me.vue 独有的 .pr-* 类，默认版 DOM 零改动）
     · 消息（.op-msg）：悬浮胶囊 → 页内分段；行高 66 / 头像 44；最近 / 更早分组
   【回滚】整份删除本文件 + 移除两处 <link> + 后台去掉 opt 选项即可，
           默认版 DOM 分支都在 v-if="isOpt" 里，不选 opt 就不渲染。
   【红线】无 emoji · 无渐变 · AA 对比度 · 触控 ≥44px（整行可点的行内元素除外）
   ========================================================================== */

/* ---------- 0. PC 端兜底：opt 是手机端主题，PC 上新增块一律不显形 ---------- */
@media (min-width: 1024px) {
  html[data-theme="opt"] .op-sticky,
  html[data-theme="opt"] .op-head,
  html[data-theme="opt"] .op-asset,
  html[data-theme="opt"] .op-grid,
  html[data-theme="opt"] .op-ach,
  html[data-theme="opt"] .op-logout,
  html[data-theme="opt"] .op-glabel { display: none !important; }
}

@media (max-width: 1023.98px) {

  /* ==========================================================================
     1. 设计令牌（沿用设计稿「清爽版」令牌，只在这三个页面容器内生效）
     ========================================================================== */
  html[data-theme="opt"][data-theme] .hm-home,
  html[data-theme="opt"][data-theme] .pr-hd,
  html[data-theme="opt"][data-theme] .pr-list,
  html[data-theme="opt"][data-theme] .op-asset,
  html[data-theme="opt"][data-theme] .op-grid,
  html[data-theme="opt"][data-theme] .op-ach,
  html[data-theme="opt"][data-theme] .op-msg {
    --opt-ink:   #1F2A24;
    --opt-ink2:  #4A5A51;
    --opt-ink3:  #64786D;
    --opt-ink4:  #8C9A92;
    --opt-line:  #E2EBE4;
    --opt-line2: #EDF2EE;
    --opt-soft:  #F4F8F5;
    --opt-g600:  #3F7D5C;
    --opt-g500:  #4C8F6B;
    --opt-g100:  #E7F1EA;
    --opt-g50:   #F2F8F4;
    --opt-a700:  #A9603A;
    --opt-a600:  #B96C43;
    --opt-a100:  #FBEDE2;
    --opt-a50:   #FDF6EF;
    --opt-danger:#C4453B;
    --opt-r:     16px;
    --opt-r3:    12px;
    --opt-r4:    8px;
    --opt-sh:    0 1px 2px rgba(31,42,36,.05);
    /* 让这三个容器里既有的 yq 组件跟着换主色（按钮 / 分段选中 / tag） */
    --brand-600: #3F7D5C;
    --brand-700: #356B4E;
  }

  html[data-theme="opt"][data-theme] .hm-home { background: #FAFCFA; }

  /* ==========================================================================
     2. 首页：隐藏被替代的默认块，放出新增块
     ========================================================================== */
  html[data-theme="opt"][data-theme] .hm-home .hero,
  html[data-theme="opt"][data-theme] .hm-home .f-hero,
  html[data-theme="opt"][data-theme] .hm-home .f-dock,
  html[data-theme="opt"][data-theme] .hm-home .f-chips-row,
  html[data-theme="opt"][data-theme] .f-hide-mobile { display: none !important; }

  /* ---- 2.1 搜索条 44（表单直提 /square?kw=，与顶栏搜索同一出口） ---- */
  /* 20260924p02：吸顶容器 —— 搜索条 + 找搭子 + 频道标签 一整块停在最上面。
     ★ .op-sticky 是 .hm-home 的直接子元素（sticky 只在父容器高度内生效），
       所以整页滚动期间都钉在顶栏下沿，不会滚过「本周精选横幅」就被顶走。 */
  html[data-theme="opt"][data-theme] .op-sticky {
    position: sticky;
    top: calc(var(--hd-h, 52px) + var(--safe-top, 0px));
    z-index: 30;
    padding: 10px 0 2px;
    background: #FAFCFA;
    /* 下沿压一条 1px 分隔线，滚动时边界不糊 */
    box-shadow: 0 1px 0 var(--opt-line2);
    /* [FIX-STICKY] 20261021op1 · Android WebView 的已知渲染问题：
       惯性滚动时 sticky 元素的位移由主线程重绘，偶发落后于画面 —— 视觉上就是搜索条
       「停在屏幕中间」不上不下，松手后才跳回顶部。will-change 把这块提前提升为
       独立合成层，交给合成器跟随滚动，不再掉队。
       只声明 will-change、不写实际 transform：避免创建新的包含块影响 sticky 吸附。 */
    will-change: transform;
  }
  html[data-theme="opt"][data-theme] .op-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0 14px;
    padding: 0 12px;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r3);
    color: var(--opt-ink4);
  }
  html[data-theme="opt"][data-theme] .op-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font: 13px/1 inherit;
    font-family: inherit;
    color: var(--opt-ink);
    /* [QS-REL] 2026-09-24 补两行缺失：appearance 不给，iOS 会强套圆角；
       cancel-button 不清，Chrome/Android 会多出一个原生叉号跟「找搭子」挤在一起 */
    -webkit-appearance: none; appearance: none;
  }
  html[data-theme="opt"][data-theme] .op-search input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
  }
  html[data-theme="opt"][data-theme] .op-search input::placeholder { color: var(--opt-ink4); }
  html[data-theme="opt"][data-theme] .op-search .op-search__go {
    flex: none;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 2px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--opt-g600);
    text-decoration: none;
  }

  /* ---- 2.2 频道 chips 36（横向滑动，替换六宫格的入口职能） ---- */
  html[data-theme="opt"][data-theme] .op-chips {
    display: flex;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[data-theme="opt"][data-theme] .op-chips::-webkit-scrollbar { display: none; }
  html[data-theme="opt"][data-theme] .op-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    background: var(--opt-soft);
    border: 1px solid var(--opt-line2);
    border-radius: 10px;
    font-size: 13px;
    color: var(--opt-ink2);
    text-decoration: none;
    white-space: nowrap;
  }
  html[data-theme="opt"][data-theme] .op-chip svg { width: 15px; height: 15px; color: var(--opt-g600); }
  html[data-theme="opt"][data-theme] .op-chip:first-child {
    background: var(--opt-g600);
    border-color: var(--opt-g600);
    color: #FFFFFF;
  }
  html[data-theme="opt"][data-theme] .op-chip:first-child svg { color: #FFFFFF; }

  /* ---- 2.3 本周精选横幅 96（数据 = Hero 运营位第一张，不新增接口） ---- */
  html[data-theme="opt"][data-theme] .op-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 96px;
    margin: 12px 14px 0;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r3);
    box-shadow: var(--opt-sh);
    text-decoration: none;
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .op-banner__img {
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: var(--opt-r4);
    overflow: hidden;
    background: var(--opt-soft);
  }
  html[data-theme="opt"][data-theme] .op-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html[data-theme="opt"][data-theme] .op-banner__c {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  html[data-theme="opt"][data-theme] .op-banner__r1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--opt-ink3);
  }
  html[data-theme="opt"][data-theme] .op-banner__tag {
    flex: none;
    font-style: normal;
    padding: 1px 7px;
    border-radius: var(--opt-r4);
    background: var(--opt-a50);
    border: 1px solid var(--opt-a100);
    color: var(--opt-a700);
    font-size: 11px;
    font-weight: 600;
  }
  html[data-theme="opt"][data-theme] .op-banner__t {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    color: var(--opt-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .op-banner__go {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    align-self: flex-end;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--opt-r4);
    background: var(--opt-a700);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
  }
  html[data-theme="opt"][data-theme] .op-banner__go svg { width: 12px; height: 12px; }

  /* ---- 2.3b 本周精选横幅 · 轮播容器（20260923cr1） ----
     以前只渲染 slides[0] 一张静态图；现在多条 Hero 运营位淡入轮播。
     外层容器吃掉原 op-banner 的 margin 与高度，内部每条绝对定位叠放，
     只有 .is-on 那张可见且可点（其余 pointer-events:none，防止隔着透明层误触）。 */
  html[data-theme="opt"][data-theme] .op-bwrap {
    position: relative;
    height: 96px;
    margin: 12px 14px 0;
  }
  html[data-theme="opt"][data-theme] .op-bwrap .op-banner {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    z-index: 1;
  }
  html[data-theme="opt"][data-theme] .op-bwrap .op-banner.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    z-index: 2;
  }
  /* 指示点压在左侧 80px 封面的底部 —— 右下角站着「去看看」按钮，不能抢它的位 */
  html[data-theme="opt"][data-theme] .op-bwrap__dots {
    position: absolute;
    left: 8px;
    width: 80px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  html[data-theme="opt"][data-theme] .op-bwrap__dots i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 2px rgba(0, 0, 0, .35);
    transition: width .25s ease, background .25s ease;
  }
  html[data-theme="opt"][data-theme] .op-bwrap__dots i.on {
    width: 12px;
    background: #FFFFFF;
  }

  /* ---- 2.4 图文卡按规范重绘（1px 描边 + 12 圆角 + 封面比例锁） ---- */
  html[data-theme="opt"][data-theme] .hm-home .yq-post {
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r3);
    box-shadow: none;
    background: #FFFFFF;
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .hm-home .yq-post__cover {
    container-type: inline-size;
    background: var(--opt-soft);
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .hm-home .yq-post__cover img {
    width: 100%;
    min-height: 75cqi;
    max-height: 133cqi;
    object-fit: cover;
    aspect-ratio: auto;
  }
  html[data-theme="opt"][data-theme] .hm-home .yq-water { gap: 12px; }

  /* ---- 2.4b 广场/个人页瀑布流图文卡：与首页同款细线描边（yz9）----
     opt 令牌只在 .hm-home 等容器内定义，广场页没有容器类 → 历史上回落成
     全局 .yq-post 的薄荷绿描边，与首页（--opt-line 细线）不一致。
     同特异性复刻首页规则；.hm-home 内卡片两条都命中但值相同 → 零变化。
     兜底值与第 1 节令牌一致，容器外也能正确解析。 */
  html[data-theme="opt"][data-theme] .yq-water .yq-post {
    border: 1px solid var(--opt-line, #E2EBE4);
    border-radius: var(--opt-r3, 12px);
    box-shadow: none;
    background: #FFFFFF;
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .yq-water .yq-post__cover {
    background: var(--opt-soft, #F4F8F5);
    overflow: hidden;
  }

  /* ==========================================================================
     3. 我的页（选择器用 me.vue 独有的 .pr-* 类 —— 默认版 DOM 零改动）
     ========================================================================== */
  /* ---- 3.1 卡片式头：头像 + 名称 + 编辑资料；原设置图标与三格让位 ---- */
  html[data-theme="opt"][data-theme] .pr-hd {
    margin: 12px 14px 0;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: var(--opt-sh);
  }
  html[data-theme="opt"][data-theme] .pr-hd__set { display: none; }
  html[data-theme="opt"][data-theme] .pr-hd__row .op-edit {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--opt-r4);
    background: var(--opt-soft);
    border: 1px solid var(--opt-line);
    color: var(--opt-ink2);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  html[data-theme="opt"][data-theme] .pr-hd__name { font-size: 17px; font-weight: 700; color: var(--opt-ink); }
  html[data-theme="opt"][data-theme] .pr-hd__sub { color: var(--opt-ink3); font-size: 12px; }
  /* pr-quick 是 .pr-hd 的直接子元素（不是 pr-hd__row 内的），
     原三格数据行在此主题下由 .op-asset 资产条接管。 */
  html[data-theme="opt"][data-theme] .pr-hd > .pr-quick { display: none; }

  /* ---- 3.2 资产条四格（积分 / 发布 / 收藏 / 已报名，全部真实数据） ---- */
  html[data-theme="opt"][data-theme] .op-asset {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 14px 0;
    padding: 12px 0;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: var(--opt-sh);
  }
  html[data-theme="opt"][data-theme] .op-asset__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    padding: 4px 0;
  }
  html[data-theme="opt"][data-theme] .op-asset__i b {
    font-size: 19px;
    font-weight: 700;
    color: var(--opt-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  html[data-theme="opt"][data-theme] .op-asset__i span { font-size: 11px; color: var(--opt-ink3); }

  /* ---- 3.3 我报名的活动：卡片化 ---- */
  html[data-theme="opt"][data-theme] .pr-list {
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: var(--opt-sh);
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .pr-item { height: 64px; }
  html[data-theme="opt"][data-theme] .pr-item__thumb,
  html[data-theme="opt"][data-theme] .pr-item__thumb img {
    width: 48px;
    height: 48px;
    border-radius: var(--opt-r4);
  }

  /* ---- 3.4 服务宫格 4×2（替代原来的 8 行列表） ---- */
  html[data-theme="opt"][data-theme] .op-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 12px 14px 0;
    padding: 8px 0 10px;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: var(--opt-sh);
  }
  html[data-theme="opt"][data-theme] .op-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    border-radius: var(--opt-r3);
    color: var(--opt-ink2);
    text-decoration: none;
    font-size: 11px;
    padding: 4px;
  }
  html[data-theme="opt"][data-theme] .op-grid a:active { background: var(--opt-soft); }
  html[data-theme="opt"][data-theme] .op-grid svg { width: 21px; height: 21px; color: var(--opt-g600); }

  /* ---- 3.5 户外成就卡（入口 → /badge） ---- */
  html[data-theme="opt"][data-theme] .op-ach {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 14px 0;
    padding: 13px 14px;
    background: var(--opt-g50);
    border: 1px solid var(--opt-g100);
    border-radius: var(--opt-r);
    text-decoration: none;
  }
  html[data-theme="opt"][data-theme] .op-ach__t { font-size: 14px; font-weight: 650; color: var(--opt-ink); }
  html[data-theme="opt"][data-theme] .op-ach__d { font-size: 11px; color: var(--opt-ink3); margin-top: 2px; }
  html[data-theme="opt"][data-theme] .op-ach__arr { margin-left: auto; color: var(--opt-ink4); flex: none; }

  /* ---- 3.6 默认版的「设置与更多」行列表在 opt 下由宫格替代 ---- */
  html[data-theme="opt"][data-theme] .pr-more { display: none; }

  /* ---- 3.7 退出登录（红色，单独一行） ---- */
  html[data-theme="opt"][data-theme] .op-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin: 14px 14px 0;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    color: var(--opt-danger);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
  }

  /* ==========================================================================
     4. 消息页（.op-msg 包装类由 msg.vue 在 opt 下挂上）
     ========================================================================== */
  html[data-theme="opt"][data-theme] .op-msg { background: #FAFCFA; }

  /* ---- 4.1 通知入口：白卡；有未读时整卡转暖色（设计稿的置顶提示条） ---- */
  html[data-theme="opt"][data-theme] .op-msg .ms-bell {
    margin: 12px 14px 0;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: none;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-bell.is-unread {
    background: var(--opt-a50);
    border-color: var(--opt-a100);
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-bell.is-unread .ms-bell__ico {
    background: var(--opt-a700);
    color: #FFFFFF;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-bell__ico { background: var(--opt-soft); color: var(--opt-ink2); }
  html[data-theme="opt"][data-theme] .op-msg .ms-bell__c b { color: var(--opt-ink); }

  /* ---- 4.2 页内分段（凹槽 + 白选中块），替代悬浮胶囊 ---- */
  html[data-theme="opt"][data-theme] .op-msg .ms-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 14px 0;
    padding: 4px;
    background: var(--opt-soft);
    border: 1px solid var(--opt-line2);
    border-radius: var(--opt-r3);
    position: static;   /* 不再悬浮吸顶 —— 陷进页面 */
    box-shadow: none;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-tabs__i {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--opt-ink3);
    text-decoration: none;
    background: none;
    box-shadow: none;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-tabs__i.is-on {
    background: #FFFFFF;
    color: var(--opt-g600);
    font-weight: 650;
    box-shadow: var(--opt-sh);
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-tabs__i i {
    font-style: normal;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--opt-g100);
    color: var(--opt-g600);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-tabs__i.is-on i { background: var(--opt-g600); color: #FFFFFF; }

  /* ---- 4.3 分组标签（最近 / 更早） ---- */
  html[data-theme="opt"][data-theme] .op-glabel {
    margin: 14px 16px 6px;
    font-size: 12px;
    color: var(--opt-ink3);
  }

  /* ---- 4.4 列表行：高 66 · 头像 44 · 未读小圆点 · 时间右对齐 ---- */
  html[data-theme="opt"][data-theme] .op-msg .yq-list {
    margin: 4px 14px 0;
    background: #FFFFFF;
    border: 1px solid var(--opt-line);
    border-radius: var(--opt-r);
    box-shadow: var(--opt-sh);
    overflow: hidden;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-th {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 66px;
    padding: 0 12px;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-th + .ms-th { border-top: 1px solid var(--opt-line2); }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__ava { width: 44px; height: 44px; flex: none; }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__ava .yq-ava { width: 44px; height: 44px; }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__dot {
    right: -2px;
    top: -2px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    border-width: 2px;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__nm { font-size: 14px; font-weight: 650; color: var(--opt-ink); }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__last { font-size: 12px; color: var(--opt-ink3); }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__last.is-unread { color: var(--opt-ink2); font-weight: 600; }
  html[data-theme="opt"][data-theme] .op-msg .ms-th__tm { font-size: 11px; color: var(--opt-ink4); }

  /* B2 · 活动卡「详情」药丸热区 22px → 46px（纯 CSS 增量，不动 DOM，删本段即回滚） */
  html[data-theme="opt"] .yq-post:has(.yq-ev__st) .yq-ev__go { position: relative; }
  html[data-theme="opt"] .yq-post:has(.yq-ev__st) .yq-ev__go::after { content: ''; position: absolute; inset: -12px; }

  /* ---- 20260924pb4 · 公告（/notice）挂 .op-msg 后的 opt 落点 ----
     设计稿没有单独出公告页，按消息页同一套令牌对齐：字色/行距/未读底/图标底座。
     纯增量 append，删除本段即回到默认版观感。 ---- */
  html[data-theme="opt"][data-theme] .op-msg .ms-act {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px var(--sp-4); font-size: 12px; color: var(--opt-ink3);
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-act b { color: var(--opt-g600); font-weight: 650; }
  html[data-theme="opt"][data-theme] .op-msg .ms-act__b {
    min-height: 32px; padding: 0 12px; border-radius: var(--opt-r4);
    border: 1px solid var(--opt-line); background: transparent;
    color: var(--opt-ink2); font-size: 12px; font-weight: 600;
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__i { padding: 12px var(--sp-4); border-bottom: 0; }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__i + .ms-note__i { border-top: 1px solid var(--opt-line2); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__i.is-unread { background: var(--opt-g50); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__ico {
    width: 36px; height: 36px; border-radius: var(--opt-r4);
    background: var(--opt-soft); color: var(--opt-ink2);
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__ico--interact { background: var(--opt-a50); color: var(--opt-a700); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__ico--system { background: var(--opt-g100); color: var(--opt-g600); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__ico--event { background: var(--opt-a50); color: var(--opt-a700); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__txt {
    font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--opt-ink);
  }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__tm { font-size: 11px; color: var(--opt-ink4); }
  html[data-theme="opt"][data-theme] .op-msg .ms-note__dot { background: var(--opt-g600); }

  /* ==========================================================================
     5. 首页 · 小红书风顶栏（20261021xz1）
     ------------------------------------------------------------------------
     落地对象：《宜宇_手机端_小红书风_设计稿》视图 1 的顶栏一行（用户截图 1:1）：
       柚子底座 30 · 「宜宇」15.5/700 · 搜索胶囊 33(flex) · 发布胶囊 33 · 行高 43
     ★ 只命中 .yq-hd--xhs。layout 里这个类只在「首页 + opt 皮肤 + 主站 zone」
       三条同时成立时挂上，其余页面/皮肤仍走原顶栏，一行没动。
     ★ 深苔绿 #2C6249 是设计稿的发布底色（与 chips 选中态共用）；它与既有
       --opt-g600(#3F7D5C) 并存 —— 这是新块专用色，不动全站令牌。
     ★ 回滚：删掉本节 → 顶栏立刻回到「居中站名 + 右侧发布」。
     ========================================================================== */
  html[data-theme="opt"][data-theme] .yq-hd--xhs {
    height: 43px;
    padding: 2px 12px 8px;
    gap: 7px;
    justify-content: flex-start;
    background: #FAFCFA;
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--opt-line2);
    /* 顶栏要贴在图/瀑布流上方，毛玻璃在纯白纸上只会发灰 —— 直接平铺纸色 */
    backdrop-filter: none;
    box-sizing: border-box;
  }
  /* 5.0 [BUG-01] 让位：layout 里 `.yq-hd__act`（老搜索/发布一组）现在**始终渲染**了
     （PC 端需要它），手机上这里必须把它和居中的品牌名一起藏掉，
     否则新三段胶囊与老两个图标会并排挤在一行。 */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__act,
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__title {
    display: none;
  }
  /* 5.1 柚子底座：30×30 圆角 9 的浅绿方块（复用 yz1 那颗 /kefu 入口，只换外观） */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__yz {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: #F1F6F2;
    overflow: visible;
  }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__yz svg { width: 24px; height: 24px; }
  /* 描边跟着设计稿的深苔绿走（SVG 上的 stroke 是表现属性，CSS 能压住） */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__yz svg *[stroke] { stroke: #2C6249; }

  /* 5.2 品牌字 */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__br {
    flex: none;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--opt-ink, #1F2A24);
  }

  /* 5.3 搜索胶囊（表单直提 /square?kw=，与瀑布流上方的旧搜索条同一出口） */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__s {
    flex: 1 1 auto;
    min-width: 0;
    height: 33px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid #E1E8E1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #93A098;
  }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__sico { flex: none; color: #66746C; }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__s input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font: 12px/1 inherit;
    font-family: inherit;
    color: var(--opt-ink, #1F2A24);
    -webkit-appearance: none; appearance: none;
  }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__s input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
  }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__s input::placeholder { color: #93A098; }

  /* 5.4 发布胶囊 */
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__pubx {
    flex: none;
    height: 33px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 0;
    border-radius: 999px;
    background: #2C6249;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
  }
  html[data-theme="opt"][data-theme] .yq-hd--xhs .yq-hd__pubx:active { background: #245139; }

  /* ==========================================================================
     6. 滚动吸顶收敛（20261021xz1 · 设计稿视图 2「滚动后」）
     ------------------------------------------------------------------------
     设计口径：搜索搬进顶栏后，吸顶只剩「顶栏(43) + 频道(27)」两层，
     合计 79px 冻在状态栏下；「最新 / 热门」随内容滚走，不再三层粘在顶部。
     ★ 上一版 .op-sticky 里还裹着 44px 搜索条（合计 ~112px），
       搜索进顶栏后那一层是重复入口 → 本版只留 chips。
     ★ will-change:transform 保留（20261021xy2 的 WebView 惯性滚动修复）。
     ========================================================================== */
  html[data-theme="opt"][data-theme] .op-sticky {
    top: calc(43px + var(--safe-top, 0px));
    padding: 0 0 9px;
    background: #FAFCFA;
    box-shadow: 0 1px 0 var(--opt-line2);
    will-change: transform;
  }
  html[data-theme="opt"][data-theme] .op-chips {
    margin: 0 12px;
    gap: 6px;
    padding: 0;
  }
  html[data-theme="opt"][data-theme] .op-chip {
    position: relative;
    height: 27px;
    padding: 0 10px;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid #E4EAE3;
    background: #FFFFFF;
    font-size: 11.8px;
    color: #44514A;
  }
  /* 视觉 27、热区 39：只上下外扩，左右不抢相邻 chip 的点击 */
  html[data-theme="opt"][data-theme] .op-chip::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -6px; bottom: -6px;
  }
  html[data-theme="opt"][data-theme] .op-chip svg { width: 12px; height: 12px; color: #5E7C69; }
  html[data-theme="opt"][data-theme] .op-chip:first-child {
    background: #2C6249;
    border-color: #2C6249;
    color: #FFFFFF;
    font-weight: 600;
  }
  html[data-theme="opt"][data-theme] .op-chip:first-child svg { color: #FFFFFF; }

  /* ==========================================================================
     7. 笔记详情 · 沉浸式（20261021xz3 · 设计稿视图 3 逐项对齐）
     ------------------------------------------------------------------------
     设计稿的一屏顺序：
       图（顶到状态栏；左上 30 圆返回 + 右上 1/N）→ 图下分页圆点
       → 作者行（ava 28 / 昵称 12 / 等级 / 关注 26 胶囊）
       → 标题 15.5 → 正文 13.4 → 话题 chip
       → 分隔 → 「评论 N · 按热度」→ 评论列表
       → 底部固定条（说点什么… + 点赞红 / 收藏 / 评论 / 分享）
     ★ 与上一版（xz2）的差别就是「照稿补齐」：让出顶栏、圆形返回、
       分页圆点、话题 chip、评论头、底栏四枚动作 —— 上一版只做了大图与作者前移。
     ★ 活动页 / 商品页不套（保留报名/兑换、价格区），只吃 7.1 的满宽图。
     ========================================================================== */

  /* 7.0 让出顶栏：整份文件已裹在 max-width:1023.98px 里，PC 布局零影响 */
  html[data-theme="opt"][data-theme] .yq-hd--immersive { display: none; }

  /* 7.1 图集：满宽出血 + 高 352（约 43% 屏高） */
  html[data-theme="opt"][data-theme] .pd-sec { position: relative; }
  html[data-theme="opt"][data-theme] .pd-gallery {
    margin: 0 calc(var(--sp-4, 16px) * -1);
    gap: 0;
  }
  html[data-theme="opt"][data-theme] .pd-gallery > img,
  html[data-theme="opt"][data-theme] .pd-gallery > .pd-gallery__ph {
    aspect-ratio: auto;
    height: min(352px, 43dvh);
    border-radius: 0;
    background: var(--opt-soft, #F4F8F5);
  }

  /* 7.2 顶部浮层：30px 圆形返回键 + 右侧 1/N（都压在图上看得到） */
  html[data-theme="opt"][data-theme] .nd-top {
    position: fixed;
    left: 0; right: 0;
    top: calc(8px + var(--safe-top, 0px));
    z-index: 61;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    pointer-events: none;
  }
  html[data-theme="opt"][data-theme] .nd-top > * { pointer-events: auto; }
  /* 滚过图集后隐掉（否则 30px 圆键正好压住正文首行）：只切可见性，不做位移动画。
     用 visibility 而不是 opacity - 后者仍然吃点击；过渡只挂 opacity。 */
  html[data-theme="opt"][data-theme] .nd-top {
    transition: opacity .16s linear;
  }
  html[data-theme="opt"][data-theme] .nd-top.is-off {
    opacity: 0;
    visibility: hidden;
  }
  html[data-theme="opt"][data-theme] .nd-back {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--opt-ink, #1F2A24);
    box-shadow: 0 1px 4px rgba(22, 32, 42, .14);
    text-decoration: none;
  }
  html[data-theme="opt"][data-theme] .nd-back:active { background: #FFFFFF; }
  html[data-theme="opt"][data-theme] .pd-cnt {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    min-width: 0;
    height: auto;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(22, 32, 42, .5);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  /* 7.3 图下分页圆点：当前页拉长成小胶囊 */
  html[data-theme="opt"][data-theme] .nd-dots {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 9px 0 2px;
  }
  html[data-theme="opt"][data-theme] .nd-dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: #D6E2DA;
    display: block;
    transition: width .16s ease, background .16s ease;
  }
  html[data-theme="opt"][data-theme] .nd-dots i.on {
    width: 14px;
    border-radius: 3px;
    background: var(--opt-g600, #3F7D5C);
  }

  /* 7.4 作者行（已在标题之前）：ava 28 / 昵称 12 / 关注 26 胶囊 */
  html[data-theme="opt"][data-theme] .sh-hd {
    gap: 7px;
    padding: 12px var(--sp-4) 0;
  }
  html[data-theme="opt"][data-theme] .sh-hd .yq-ava { width: 28px; height: 28px; }
  html[data-theme="opt"][data-theme] .sh-hd__n { font-size: 12px; font-weight: 620; color: var(--opt-ink, #1F2A24); }
  /* 设计稿作者行只有「头像 + 昵称 + 等级 + 关注」，副行（等级文字）让位 */
  html[data-theme="opt"][data-theme] .sh-hd__s { display: none; }
  /* 关注按钮：主站 `.yq-btn` 基础是「透明底 + 无字色 + 透明边框」，落到详情页就只剩
     两个绿字贴在浅底上 —— 用户反馈「不清晰」。设计稿视图 3 的 `.nd__fo` 是**实心深色胶囊**
     （稿里写 #2F4E6B 深蓝灰），这里映射到主站品牌深绿 #2C6249（与顶栏「+ 发布」胶囊同色，
     白字对比 ≈7.4:1 过 AA）。盒子按稿保持 26 高，热区用 ::after 外扩到 44 —— 视觉不变、
     手指够得着（红线：触控 ≥44，只扩命中不改盒子）。 */
  html[data-theme="opt"][data-theme] .sh-hd__follow {
    position: relative;
    z-index: 1; /* 让 ::after 撑出去的下半截能压在下面 .sh-t 之上（否则命中被标题吃掉） */
    height: 26px; padding: 0 13px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    color: #FFFFFF;
    background: #2C6249;
    border: 1px solid #2C6249;
    box-shadow: 0 1px 2px rgba(22, 32, 42, .10);
    text-decoration: none;
  }
  html[data-theme="opt"][data-theme] .sh-hd__follow::after {
    content: '';
    position: absolute;
    left: -6px; right: -6px; top: -9px; bottom: -9px;
    border-radius: 999px;
  }
  html[data-theme="opt"][data-theme] .sh-hd__follow:active {
    background: #245240;
    border-color: #245240;
    transform: none;
  }
  /* 已关注 / 互相关注：回到描边态，但描边必须看得见 ——
     原 `.sh-hd__follow.is-on` 是 --bg-sunken 底 + --text-third 字，
     在 opt 的浅灰底上几乎融掉。 */
  html[data-theme="opt"][data-theme] .sh-hd__follow.is-on,
  html[data-theme="opt"][data-theme] .sh-hd__follow.is-on:active {
    color: var(--opt-ink3, #64786D);
    background: #FFFFFF;
    border: 1px solid var(--opt-line, #E2EBE4);
    box-shadow: none;
  }
  /* 「编辑资料」（自己看自己，走 yq-btn--ghost）：主站给的是 --brand-50/100 薄荷浅底，
     在 opt 里偏亮；换成 opt 的浅绿底 + 深绿字，和上面那颗同一套语言。 */
  html[data-theme="opt"][data-theme] .sh-hd__follow.yq-btn--ghost {
    color: var(--opt-g600, #3F7D5C);
    background: var(--opt-g50, #F2F8F4);
    border: 1px solid var(--opt-g100, #E7F1EA);
    box-shadow: none;
  }

  /* 7.5 标题 / 正文 / 话题 / 评论头 */
  html[data-theme="opt"][data-theme] .sh-t { padding: 11px var(--sp-4) 0; }
  html[data-theme="opt"][data-theme] .sh-t h1 {
    font-size: 15.5px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--opt-ink, #1F2A24);
    margin: 0 0 8px;
  }
  /* 设计稿标题下面没有「时间 / 浏览 / 版块」这行 meta，交给话题与正文 */
  html[data-theme="opt"][data-theme] .sh-t__meta { display: none; }
  html[data-theme="opt"][data-theme] .sh-body {
    padding: 0 var(--sp-4);
    font-size: 13.4px;
    line-height: 1.85;
    color: var(--opt-ink2, #4A5A51);
  }
  html[data-theme="opt"][data-theme] .sh-body p { margin: 0 0 8px; }

  html[data-theme="opt"][data-theme] .nd-tg {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px var(--sp-4) 0;
  }
  html[data-theme="opt"][data-theme] .nd-tg a {
    font-size: 11px;
    color: var(--opt-g600, #3F7D5C);
    background: var(--opt-g50, #F2F8F4);
    border: 1px solid var(--opt-g100, #E7F1EA);
    padding: 3px 8px;
    border-radius: 6px;
    text-decoration: none;
  }

  html[data-theme="opt"][data-theme] .nd-cmh {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 10px;
    padding: 0 var(--sp-4);
    font-size: 11.5px;
    color: var(--opt-ink3, #64786D);
  }
  html[data-theme="opt"][data-theme] .nd-cmh b {
    color: var(--opt-ink, #1F2A24);
    font-size: 11.5px;
    font-weight: 650;
  }
  /* 评论区的老标题（竖条 + 「N 条」）让位给 .nd-cmh；只命中含评论列表的那一段 */
  html[data-theme="opt"][data-theme] .yq-main > section:has(.cm-list) .yq-sec-hd { display: none; }
  html[data-theme="opt"][data-theme] .yq-main > section:has(.cm-list) { padding-top: 0 !important; }

  /* 7.6 评论列表：紧凑一行（头像 24 / 名 11 / 正文 12.4 / 脚注 10） */
  html[data-theme="opt"][data-theme] .cm-list {
    padding: 0 var(--sp-4) var(--sp-4);
    gap: 12px;
  }
  html[data-theme="opt"][data-theme] .cm-item { gap: 8px; }
  html[data-theme="opt"][data-theme] .cm-list .yq-ava { width: 24px; height: 24px; }
  html[data-theme="opt"][data-theme] .cm-item__hd { gap: 6px; }
  html[data-theme="opt"][data-theme] .cm-item__n { font-size: 11px; font-weight: 600; color: var(--opt-ink3, #64786D); }
  html[data-theme="opt"][data-theme] .cm-item__body { margin-top: 2px; font-size: 12.4px; line-height: 1.62; color: var(--opt-ink2, #4A5A51); }
  html[data-theme="opt"][data-theme] .cm-item__t { font-size: 10px; color: var(--opt-ink4, #8C9A92); }
  html[data-theme="opt"][data-theme] .cm-item__sub { margin-top: 3px; font-size: 10px; color: var(--opt-ink4, #8C9A92); }
  html[data-theme="opt"][data-theme] .cm-item__sub button { font-size: 10px; color: var(--opt-ink4, #8C9A92); }

  /* 7.7 段间距按设计稿收口：原站 `.yq-main > section` 统一吃 20px 下边距，
     图/作者/标题/正文之间被撑成 20+，设计稿只有 8-12px → 这里逐段归零。 */
  html[data-theme="opt"][data-theme] .yq-main > .pd-sec,
  html[data-theme="opt"][data-theme] .yq-main > .sh-hd,
  html[data-theme="opt"][data-theme] .yq-main > .sh-t,
  html[data-theme="opt"][data-theme] .yq-main > .sh-body { margin-bottom: 0; }
  html[data-theme="opt"][data-theme] .nd-tg { margin-bottom: 2px; }
  /* 评论前那条分隔线（设计稿 .nd__sep）+ 与正文拉开 14px */
  html[data-theme="opt"][data-theme] .yq-main > section:has(.cm-list) {
    margin-top: 14px;
    border-top: 1px solid var(--opt-line2, #EDF2EE);
  }

  /* 7.8 底部固定条：说点什么… + 四枚动作（设计稿 52 高、白底、无阴影） */
  html[data-theme="opt"][data-theme] .cm-bar {
    height: 52px;
    padding: 0 14px;
    gap: 9px;
    background: #FFFFFF;
    border-top: 1px solid var(--opt-line2, #EDF2EE);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-theme="opt"][data-theme] .cm-bar__in {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--opt-soft, #F4F8F5);
    font-size: 11.5px;
  }
  html[data-theme="opt"][data-theme] .cm-bar__in:focus { background: #FFFFFF; border: 1px solid var(--opt-line, #E2EBE4); }
  html[data-theme="opt"][data-theme] .cm-bar__send {
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px;
    font-size: 11.5px;
  }
  html[data-theme="opt"][data-theme] .nd-act {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
  }
  html[data-theme="opt"][data-theme] .nd-act__i {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--opt-ink3, #64786D);
    font-size: 10px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
  }
  html[data-theme="opt"][data-theme] .nd-act__i svg { width: 17px; height: 17px; }
  html[data-theme="opt"][data-theme] .nd-act__i b { font-weight: 500; }
  /* 点赞数用热度红（设计稿原话），未点赞空心、点过实心 */
  html[data-theme="opt"][data-theme] .nd-act__lk,
  html[data-theme="opt"][data-theme] .nd-act__lk.is-on { color: var(--opt-danger, #C4453B); }
  html[data-theme="opt"][data-theme] .nd-act__lk svg { fill: none; stroke: currentColor; }
  html[data-theme="opt"][data-theme] .nd-act__lk.is-on svg { fill: currentColor; }
  html[data-theme="opt"][data-theme] .nd-act__i.is-on:not(.nd-act__lk) { color: var(--opt-ink, #1F2A24); }
  /* 底栏已经有四枚动作时，正文下面那条 .dy-act 让位（活动/商品页没有 nd-act，照旧保留） */
  html[data-theme="opt"][data-theme] .yq-main:has(.nd-act) .dy-act { display: none; }

  /* ==========================================================================
     8. 广场 Hero 边框统一（20261021xz1 · 承接 20261014 工单「hero边框也要改」）
     ------------------------------------------------------------------------
     .hsq（HeroSquare 视频卡）的主描边是全局薄荷绿 var(--mint-300,#74e3da)，
     与 yz9 修过的瀑布流卡片（--opt-line #E2EBE4 细线）不是一套色 ——
     广场首屏「video 卡 → 图文卡」上下相邻时色差明显。
     这里只改描边颜色，圆角/尺寸/暗色变体一律不动（首页 Hero 在 opt 下本就隐藏）。
     回滚：删本段即可。 */
  html[data-theme="opt"][data-theme] .hsq {
    border-color: var(--opt-line, #E2EBE4);
  }
}