/* ==========================================================================
   微联 · 高级化层  premium.css
   --------------------------------------------------------------------------
   建立：2026-10-03
   定位：叠在 clara.css 之后，只做「质感与一致性」，不改信息架构、不加新功能。

   三条原则
     1) 不引入新配色 —— 沿用 v5 小红书 token（品牌红 #FF2442 · Light-only）
     2) 只解决三类问题：栅格不统一 / 质感偏平 / 廉价细节
     3) 完全可回滚 —— 删掉各页 <link> 引用即恢复原样
   ========================================================================== */

/* ==========================================================================
   ① 栅格统一
   --------------------------------------------------------------------------
   问题：各页内容列宽度混用 760 / 900 / 960 / 1060 / 1280 五种值，
         且与页面标题（1280）不同宽，视觉上"标题一行、内容缩一半"。
   方案：全站内容基线统一 1200px，标题与内容共用同一列。
   ========================================================================== */
:root {
  --content-w: none;        /* ★ 全站唯一内容宽度（2026-10-04 放开为满屏，对齐小红书） */
  --col-narrow: 880px;      /* 表单类页面主动收窄时的唯一取值 */
  --gutter: 32px;

  /* 阴影阶梯：原有 --shadow-card 只有 1px/4% 几乎看不见，页面因此发平 */
  --shadow-s: 0 1px 2px rgba(17, 17, 17, .04), 0 2px 8px rgba(17, 17, 17, .03);
  --shadow-m: 0 2px 6px rgba(17, 17, 17, .05), 0 12px 28px -10px rgba(17, 17, 17, .12);
  --shadow-l: 0 4px 12px rgba(17, 17, 17, .06), 0 24px 48px -16px rgba(17, 17, 17, .18);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

.page-head { max-width: var(--content-w); }
.page-head h1 { font-size: 38px; font-weight: 500; letter-spacing: -.01em; line-height: 1.18; }
.page-head .sub { font-size: 13.5px; line-height: 1.6; }

/* 页面内容列：取代原来的内联 max-width（原为 760/900/960/1060/1280 五种值） */
.content-col { max-width: var(--content-w); }

/* 按页面语义给宽度 —— 表单类页面过宽会让"标签…数值"之间空一大片。
   只收窄，不改结构。 */
body[data-page="settings"] .page-head,
body[data-page="settings"] .content-col,
body[data-page="settings"] > .main-footer,
body[data-page="settings"] .footer { max-width: none; }   /* 2026-10-04：设置页改两栏分组，放开宽度 */

body[data-page="member"] .page-head,
body[data-page="member"] .content-col,
body[data-page="member"] .footer { max-width: 1060px; }

body[data-page="wallet"] .page-head,
body[data-page="wallet"] .content-col,
body[data-page="wallet"] .footer { max-width: 1100px; }

/* 首页等页面把瀑布流/频道条直接放在 .main 下（无内容列包裹），
   宽屏下会撑到比标题列更宽 —— 一并对齐到同一列。 */
.main > .waterfall,
.main > .channel-bar,
.main > .topbar {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}

/* 页脚贴底：短内容页不再"内容浮在半空 + 下方大片空白" */
.main:has(> .footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0;
}
.main:has(> .footer) > * { flex: 0 0 auto; width: 100%; }
.main:has(> .footer) > .footer { margin-top: auto; }

.footer {
  max-width: var(--content-w);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 0 34px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .01em;
}

/* ==========================================================================
   ② 排版质感
   ========================================================================== */

/* 数字一律等宽对齐：金额、计数、日期不再参差 */
.wf-like, .num, .row .s.num, .balance-num, .member-price,
.bounty, .reward-amount, .val, .stat, [class*="count"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* eyebrow：原来每页都是「品牌红 + 全大写英文」，重复 18 次显得像模板。
   改为中性灰小字，品牌红只留给真正的强调点。 */
.page-head .eyebrow {
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* 页面内小节标题（Account Security — 账号安全 这类）同样中性化 */
.main > div > .eyebrow,
.card-title .eyebrow {
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==========================================================================
   ③ 头像质感
   --------------------------------------------------------------------------
   问题：全站头像都是 JS 生成的纯色圆点（8 个粉彩色块循环），
         在动态、评论、会话、热帖里反复出现 —— 最"廉价"的一处。
   方案：不依赖 JS 改数据，用伪元素叠加「顶部高光 + 人形剪影 + 内描边」，
         让色块变成"设计过的默认头像"。仅作用于 div，img 真头像不受影响。
   ========================================================================== */
div.wf-avatar, div.avatar {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .05), 0 1px 3px rgba(17, 17, 17, .08);
}
div.wf-avatar::after, div.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* 人形剪影（白色 52%） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff' fill-opacity='.52'%3E%3Ccircle cx='12' cy='9.2' r='3.9'/%3E%3Cpath d='M4.2 21.5c0-4.3 3.5-7.8 7.8-7.8s7.8 3.5 7.8 7.8z'/%3E%3C/g%3E%3C/svg%3E"),
                    /* 顶部光泽 */
                    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 46%, rgba(17, 17, 17, .07) 100%);
  background-size: 70% 70%, 100% 100%;
  background-position: center 58%, center;
  background-repeat: no-repeat, no-repeat;
}
/* 高分辨率下更锐利 */
@media (min-resolution: 2dppx) {
  div.wf-avatar::after, div.avatar::after { background-size: 72% 72%, 100% 100%; }
}

/* ==========================================================================
   ④ 卡片与容器：给"平"的地方加层次
   ========================================================================== */
.card, .wf-item {
  box-shadow: var(--shadow-s);
  transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out),
              border-color .28s var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-m); }
.wf-item:hover { box-shadow: var(--shadow-l); transform: translateY(-4px); }

.wf-cover { overflow: hidden; }
.wf-cover img { transition: transform .5s var(--ease-out); }
.wf-item:hover .wf-cover img { transform: scale(1.035); }

/* 卡片内标题与正文的层级拉开 */
.card-title { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.row .t { font-weight: 550; letter-spacing: -.005em; }
.row { padding: 15px 2px; }
.row .s { line-height: 1.5; }

/* ==========================================================================
   ⑤ 图标一致性
   --------------------------------------------------------------------------
   问题：同一颗"心"，照片墙是红色实心、发现/搜索是灰色细描边，语义混乱。
   方案：统一描边宽度；hover 与"已赞"状态统一为品牌红实心。
   ========================================================================== */
.wf-like svg, .like svg, [class*="like"] svg {
  stroke-width: 1.8;
  transition: stroke .18s var(--ease-out), fill .18s var(--ease-out),
              transform .18s var(--ease-out);
}
[class*="like"]:hover svg { transform: scale(1.12); }
.wf-like svg[fill]:not([fill="none"]),
.like svg[fill]:not([fill="none"]) { stroke: var(--brand); }

/* ==========================================================================
   ⑥ 按钮与表单：统一高度与命中区
   ========================================================================== */
.btn { min-height: 38px; padding-left: 20px; padding-right: 20px; letter-spacing: .01em; }
.btn-ghost { border-color: #E6E6E6; }
.btn-primary, .btn-publish {
  box-shadow: 0 4px 14px -6px rgba(255, 36, 66, .55);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .12s var(--ease-out);
}
.btn-primary:active, .btn-publish:active { transform: translateY(1px); }

.search-box { transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out); }
.search-box:hover { background: #F0F0F0; }

/* 焦点态：键盘可达 + 统一品牌红 */
:focus-visible { outline: 2px solid rgba(255, 36, 66, .55); outline-offset: 2px; border-radius: 8px; }

/* 标签：去掉数据里带进来的 emoji 造成的参差（保留文字，收紧节奏） */
.tag { padding: 4px 11px; line-height: 1.7; }

/* ==========================================================================
   ⑦ 侧边栏
   ========================================================================== */
.nav-item { transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.nav-item.active { box-shadow: 0 2px 10px -4px rgba(17, 17, 17, .35); }
.logo { letter-spacing: .01em; }
.wallet-strip { transition: box-shadow .2s var(--ease-out); }
.wallet-strip:hover { box-shadow: var(--shadow-s); }

/* ==========================================================================
   ⑧ IM 会话
   ========================================================================== */
.im-wrap { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-s); }
.conv-pane { border-right: 1px solid var(--border); }
.conv { transition: background .16s var(--ease-out); }
.conv:hover { background: #F7F7F7; }
.msg .bubble, .msg-bubble { box-shadow: 0 1px 2px rgba(17, 17, 17, .05); }

/* ==========================================================================
   ⑨ 滚动条与选中
   ========================================================================== */
::selection { background: rgba(255, 36, 66, .14); }
::-webkit-scrollbar-thumb { background: #D8D8D8; }
::-webkit-scrollbar-thumb:hover { background: #BFBFBF; }

/* ==========================================================================
   ⑩ 减弱动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   ⑪ 精修二轮 —— 收掉"看起来像半成品"的细节
   --------------------------------------------------------------------------
   第一轮解决栅格与质感；这一轮把仍然存在的多套规则收敛成一套。
   仍然只做一致性，不改信息架构。
   ========================================================================== */

/* ---------- 1. 默认头像统一到品牌色系 ----------
   问题：代码里写死了 8 种粉彩色（紫 #CECBF6 / 绿 #C0DD97 / 蓝 #B5D4F4 / 桃 #F5C4B3 …），
         与红黑品牌冲突，且在动态 / 会话 / 评论 / 热帖里反复出现。
   做法：用不透明的 background-image 盖住内联 background-color —— 一行业务 JS 都不用改。 */
div.wf-avatar, div.avatar {
  background-image: linear-gradient(135deg, #FFDEE5 0%, #FFC6D3 100%);
}
.wf-item:nth-child(3n+2) div.wf-avatar,
.conv:nth-child(3n+2) div.avatar,
.msg:nth-child(3n+2) div.avatar { background-image: linear-gradient(135deg, #FFE8D8 0%, #FFD1B4 100%); }
.wf-item:nth-child(3n+3) div.wf-avatar,
.conv:nth-child(3n+3) div.avatar,
.msg:nth-child(3n+3) div.avatar { background-image: linear-gradient(135deg, #F8EADE 0%, #ECD6C0 100%); }
/* 自己发的消息本就不显示头像（原来靠内联 transparent），别被上面的渐变破坏 */
.msg.me div.avatar { background-image: none; }
/* 真头像 <img> 不受影响 */
img.avatar, img.wf-avatar { background-image: none; }
/* 零钱明细的单字图标：统一浅品牌底 + 品牌红字 + 圆角 */
body[data-page="wallet"] div.avatar {
  background-image: none !important;
  background-color: #FFF1F4 !important;
  color: var(--brand) !important;
  border-radius: 12px !important;
}

/* ---------- 2. Tab 三套规则收敛成一套 ----------
   改造前：发现页=黑胶囊 / 搜索页=文字+红下划线 / 悬赏页=黑粗体+红下划线。
   统一为胶囊，与频道条同一套语言。 */
.tabs { gap: 4px; border-bottom: 1px solid var(--hair); }
.tabs .tab {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease-out);
}
.tabs .tab:hover { background: transparent; color: var(--ink); }
.tabs .tab.active {
  background: transparent;
  border-bottom-color: #1677FF;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- 3. 城市筛选：激活态与频道胶囊统一（原来是红底） ---------- */
.content-col > .tag {
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 18px;
  font-size: 13.5px;
  color: var(--ink-muted);
  transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.content-col > .tag:hover { background: #F7F7F7; color: var(--ink); }
.content-col > .tag.red {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #fff;
  font-weight: 600;
}

/* ---------- 4. 榜单奖牌：红 / 灰 / 棕 三种随意色 → 金 / 银 / 铜 ---------- */
.cover-tag[style*="B8B8B8"] { background: #9AA1A9 !important; }   /* No.2 银 */
.cover-tag[style*="BA7517"] { background: #B07A4E !important; }   /* No.3 铜 */

/* ---------- 5. IM 特殊气泡：两团高饱和橙红 → 品牌红 + 微币金 ---------- */
.msgcard.red { background: linear-gradient(135deg, #FF3D5C, #FF2442) !important; }
.msgcard.orange {
  background: linear-gradient(135deg, #FFD466, #FFB92E) !important;
  color: #4A3200 !important;
}
.msgcard.orange .mc-s { color: #6B4A00; opacity: .9; }

/* ---------- 6. 悬赏行：接单按钮垂直居中（每行高度不同，防止看上去错位） ---------- */
.row { align-items: center; }
.row > .btn, .row > button, .row > .tag { align-self: center; }

/* ---------- 7. 关注 / 已关注 按钮宽度不同 → 统一最小宽度，右边缘对齐 ---------- */
.grid3 .btn, .grid3 button { min-width: 84px; }

/* ---------- 8. 发布页：左卡片被右栏拉高、底部留 155px 空白 → 各自按内容高度 ---------- */
.content-col[style*="grid-template-columns"] { align-items: start; }

/* ---------- 9. 照片墙榜单行：缩略图偏小、右侧空一大片 → 加大主体 ---------- */
body[data-page="wall"] .row .photo,
body[data-page="wall"] .row img { border-radius: 0 !important; }
body[data-page="wall"] .row > .num:first-child { font-size: 22px !important; }

/* ---------- 10. 搜索框：搜索页那条 2px 黑粗边 → 与全站浅灰描边一致 ---------- */
.search-box[style] { box-shadow: none !important; border-color: var(--border) !important; font-weight: 400 !important; }

/* ---------- 11. 封面兜底 ----------
   真实数据里图片可能缺失或签名过期，加载失败时原来会留一块空白灰。
   用 ::after 铺一层浅底 + 图片图标，img 加载成功后被完全盖住。 */
.wf-cover { position: relative; }
.wf-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #F5F5F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8C8C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 15.5l5-4 4 3 3.5-2.5L21 16'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}
.wf-cover img { position: relative; z-index: 1; }

/* ==========================================================================
   微联 · 质感层 v6（2026-10-04 追加）
   --------------------------------------------------------------------------
   本次解决：① 全站交互态缺失（hover / focus / active 全靠浏览器默认）
            ② 空态是裸文字，缺插画
            ③ 加载态不统一（只有照片墙有骨架屏）
            ④ 选中色还是旧的品牌红
            ⑤ 笔记详情页重写后的整页样式
   全部为「叠加层」，不改任何既有选择器的既有取值，删掉本段即完全回滚。
   ========================================================================== */

/* ---------- ① 选中色 / 焦点环 / 滚动条 ---------- */
::selection { background: rgba(22, 119, 255, .20); color: var(--ink); }

:focus-visible {
  outline: 2px solid rgba(22, 119, 255, .75);
  outline-offset: 2px;
  border-radius: 0;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, .30);
}
button:focus-visible, a:focus-visible { outline: 2px solid rgba(22, 119, 255, .75); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: #D8D3C8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #D8D3C8;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #BFB7A6; background-clip: content-box; }

/* ---------- ② 统一交互态：卡片抬升 / 描边转金 ---------- */
.wf-item, .card, .circle-card, .hot-post, .ls-card, .sk-card, .set-group, .msgcard,
.row, .conv, .hot-tag, .city-tag, .tag, .btn, .tool-btn, .wall-sort-btn {
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out), background-color .28s var(--ease-out),
              color .28s var(--ease-out), opacity .28s var(--ease-out);
}

.wf-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.card:hover, .circle-card:hover, .hot-post:hover, .ls-card:hover { border-color: rgba(22, 119, 255, .35); box-shadow: var(--shadow-m); }
.circle-card:hover .circle-cover img, .hot-post:hover .hot-thumbs img { transform: scale(1.04); }
.circle-cover img, .hot-thumbs img { transition: transform .5s var(--ease-out); }
.wf-item:hover .wf-cover img { transform: scale(1.045); }
.wf-cover img { transition: transform .5s var(--ease-out); }

.row:hover { background: rgba(22, 119, 255, .045); }
.conv:hover { background: rgba(22, 119, 255, .05); }

.btn:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
.btn:active, .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-s); }
.btn-ghost:hover { border-color: rgba(22, 119, 255, .55); color: var(--gold-deep, #1677FF); }

.tag:hover, .hot-tag:hover, .city-tag:hover { border-color: rgba(22, 119, 255, .5); }
.tool-btn:hover { background: rgba(22, 119, 255, .10); color: var(--gold-deep, #1677FF); }
.tool-btn.on { color: var(--gold-deep, #1677FF); }
.tool-btn.on svg { fill: currentColor; }

/* 侧边栏导航：hover 淡金底，当前项保持 ---------- */
.nav-item:hover:not(.active) { background: rgba(22, 119, 255, .07); }

/* 说明：这里曾给所有封面图加「淡入动画」，实测在 headless 截图里
   带 CSS animation 的图片会整片拍成空白（合成层纹理没落盘），
   风险大于收益，已移除；只保留 hover 缩放，避免"一格一格跳出来"的观感问题。 */

/* ---------- ③ 空态插画（全站统一） ---------- */
.empty-art {
  width: 132px; height: 132px; margin: 0 auto 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%234C9AFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.85'%3E%3Crect x='18' y='26' width='84' height='66'/%3E%3Cpath d='M18 74l20-16 15 11 13-10 16 13'/%3E%3Ccircle cx='42' cy='45' r='6'/%3E%3Cpath d='M14 104h92' stroke='%23E3DED3'/%3E%3C/g%3E%3Cg stroke='%231677FF' stroke-width='1.6' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M88 92l14 14M102 92l-14 14'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.empty-art.sm {
  width: 92px; height: 92px; margin-bottom: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%234C9AFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.85'%3E%3Cpath d='M22 30h76v46H60l-16 14V76H22z'/%3E%3Cpath d='M44 53h1M60 53h1M76 53h1' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}
.empty-title { font-size: 15px; font-weight: 600; color: var(--ink); text-align: center; }
.empty-title.sm { font-size: 13.5px; font-weight: 500; }
.empty-sub { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 6px; line-height: 1.7; }
.empty-wrap { padding: 56px 20px; text-align: center; }
.empty-wrap .btn { margin-top: 20px; display: inline-block; }

/* ---------- ④ 统一骨架屏（列表/详情通用） ---------- */
.sk-w30 { width: 30%; } .sk-w40 { width: 40%; } .sk-w50 { width: 50%; }
.sk-w60 { width: 60%; } .sk-w70 { width: 70%; } .sk-w90 { width: 90%; }
.sk-sm { height: 9px !important; }
.sk-line { margin-bottom: 12px; }
.sk-spin {
  width: 15px; height: 15px; display: inline-block; vertical-align: -2px;
  border: 1.6px solid rgba(22, 119, 255, .25);
  border-top-color: var(--gold-deep, #1677FF);
  border-radius: 50%;
  animation: sk-rotate .8s linear infinite;
}
@keyframes sk-rotate { to { transform: rotate(360deg); } }

/* ---------- ⑤ 轻提示（取代阻塞式 alert） ---------- */
.clara-toast {
  position: fixed; left: 50%; bottom: 46px; z-index: 9999;
  transform: translate(-50%, 12px);
  background: #161616; color: #FAF9F6;
  font-size: 13px; letter-spacing: .02em;
  padding: 11px 22px; border: 1px solid rgba(76, 154, 255, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.clara-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- ⑤-b 站内弹层（取代阻塞式 prompt / confirm） ----------
   2026-10-04：站内原来用原生 prompt()，会阻塞页面且样式无法统一。
   这里给 ClaraUI（assets/js/clara-ui.js）配套一套墨金样式。 */
.cl-mask {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(20, 20, 20, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cl-fade .18s ease both;
}
@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
.cl-modal {
  background: #fff; width: min(460px, 100%);
  max-height: 84vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -24px rgba(20, 20, 20, .45);
  animation: cl-rise .22s var(--ease-out) both;
}
@keyframes cl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cl-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--hair);
}
.cl-modal-title { flex: 1; font-size: 15.5px; font-weight: 600; letter-spacing: .02em; }
.cl-modal-close {
  border: 0; background: none; color: var(--ink-3); font-size: 14px;
  cursor: pointer; padding: 4px 8px; font-family: inherit; line-height: 1;
}
.cl-modal-close:hover { color: var(--ink); }
.cl-modal-body { padding: 20px; overflow-y: auto; }
.cl-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--hair); background: #FCFBF8;
}
.cl-field { display: block; margin-bottom: 16px; }
.cl-field > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; letter-spacing: .04em; }
.cl-input {
  width: 100%; height: 44px; border: 1px solid var(--hair); background: #fff;
  padding: 0 14px; font-size: 14.5px; color: var(--ink); outline: none;
  font-family: inherit; border-radius: 0;
  transition: border-color .18s, box-shadow .18s;
}
.cl-input:focus { border-color: var(--gold-deep, #1677FF); box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); }
.cl-textarea { height: auto; padding: 12px 14px; line-height: 1.75; resize: vertical; }
.cl-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); font-style: normal; line-height: 1.7; }
.cl-note { font-size: 12px; color: var(--ink-3); line-height: 1.8; }
.cl-text { font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.cl-err {
  margin-top: 14px; padding: 10px 14px; font-size: 13px; line-height: 1.6;
  background: rgba(156, 59, 46, .07); border-left: 2px solid #9C3B2E; color: #8A2F24;
}
.cl-empty { padding: 34px 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.cl-list { display: flex; flex-direction: column; }
.cl-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 4px; border: 0; border-bottom: 1px solid var(--hair);
  background: none; font-family: inherit; cursor: pointer;
  transition: background-color .18s;
}
.cl-item:last-child { border-bottom: 0; }
.cl-item:hover { background: #FBF9F4; }
.cl-item-main { flex: 1; min-width: 0; }
.cl-item-main b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.cl-item-main em { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); font-style: normal; }
.cl-item-tag { flex: none; font-size: 11.5px; color: var(--gold-deep, #1677FF); }

/* ==========================================================================
   ⑥ 笔记详情页（2026-10-04 由「写死演示数据」改为真实数据渲染）
   布局：左媒体 58% / 右正文 42%，整块高度贴合视口，右栏内部滚动（同小红书网页版）
   ========================================================================== */
.note-shell {
  display: flex;
  margin: 16px auto 0;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  min-height: 560px;
}
.note-shell[hidden] { display: none; }

.note-media {
  width: 58%; min-width: 0; flex: none;
  background: #0E0E0E;
  display: flex; flex-direction: column;
  position: relative;
}
.note-stage { flex: 1; position: relative; min-height: 0; }
.note-stage-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.note-img, .note-video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
.note-video { width: 100%; }

.note-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: rgba(250, 249, 246, .62); font-size: 13px; letter-spacing: .04em;
}
.note-loading .sk-spin { border-color: rgba(76, 154, 255, .25); border-top-color: #4C9AFF; }

.note-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .24s var(--ease-out), background-color .24s var(--ease-out);
}
.note-stage:hover .note-nav { opacity: 1; }
.note-nav:hover { background: rgba(22, 119, 255, .8); border-color: transparent; }
.note-nav-prev { left: 14px; }
.note-nav-next { right: 14px; }

.note-counter, .note-orig {
  position: absolute; top: 14px; z-index: 3;
  font-size: 11.5px; letter-spacing: .08em; color: #fff;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 4px 12px; backdrop-filter: blur(6px);
}
.note-counter { right: 14px; }
.note-orig { left: 14px; cursor: pointer; background: rgba(22, 119, 255, .82); border-color: transparent; }
.note-orig:hover { background: rgba(76, 154, 255, .95); }

.note-thumbs {
  flex: none; display: flex; gap: 8px; align-items: center;
  padding: 12px 14px; background: #0A0A0A;
  overflow-x: auto; scrollbar-width: none;
}
.note-thumbs::-webkit-scrollbar { display: none; }
.note-thumb {
  flex: none; width: 56px; height: 56px; border-radius: 0;
  background: #1A1A1A center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .14);
  position: relative; cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease-out), opacity .2s var(--ease-out);
  opacity: .62;
}
.note-thumb:hover { opacity: .9; }
.note-thumb.on { border-color: #4C9AFF; opacity: 1; }
.note-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; background: rgba(0, 0, 0, .35);
}

.note-side { width: 42%; min-width: 0; flex: none; display: flex; flex-direction: column; background: #fff; }

.note-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 18px 26px; border-bottom: 1px solid var(--hair);
}
.note-author-av { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 50%; }
.note-author-ph { background: #EFE7D6; }
.note-author-txt { flex: 1; min-width: 0; }
.note-author-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.note-author-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.note-author-btns { display: flex; gap: 8px; flex: none; }

.note-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 24px; }

.note-title { font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -.005em; }
.note-lead { font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--ink); }
.note-p { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.note-lead + .note-p { margin-top: 16px; }

.note-meta { margin-top: 20px; font-size: 11.5px; color: var(--ink-3); line-height: 1.8; }
.note-stats {
  margin-top: 14px; display: flex; gap: 26px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.note-stats span { font-size: 12px; color: var(--ink-3); }
.note-stats b { font-size: 15px; font-weight: 600; color: var(--ink); margin-right: 4px; }

.note-cmts { margin-top: 22px; }
.note-cmts-head { font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 18px; }
.note-cmt { display: flex; gap: 12px; margin-bottom: 20px; }
.note-cmt-av { width: 32px; height: 32px; flex: none; object-fit: cover; border-radius: 50%; }
.note-cmt-ph { background: #EFE7D6; }
.note-cmt-main { flex: 1; min-width: 0; }
.note-cmt-name { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.note-cmt-text { font-size: 14px; margin-top: 4px; line-height: 1.7; word-break: break-word; }
.note-cmt-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.vip-tag.sm { font-size: 9px; padding: 0 4px; }

.note-empty { padding: 34px 0 26px; text-align: center; }

.note-actions {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-top: 1px solid var(--hair); background: #fff;
}
.note-input {
  flex: 1; min-width: 0; height: 40px; border: none; outline: none;
  background: #F5F5F5; border-radius: 0 !important;
  padding: 0 18px; font-size: 13.5px;
}
.note-tool {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 10px; font-size: 12.5px; color: var(--ink-2);
}
.note-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.note-missing {
  width: 100%; margin: 16px auto 0; padding: 78px 20px; text-align: center; background: #fff;
  box-shadow: var(--shadow-card);
}
.note-missing[hidden] { display: none; }
.note-missing .btn { margin-top: 22px; display: inline-block; }

/* 笔记页窄屏：改为上下堆叠，取消固定高度 */
@media (max-width: 900px) {
  .note-shell { flex-direction: column; height: auto !important; }
  .note-media { width: 100%; }
  .note-stage { height: 58vh; min-height: 320px; }
  .note-side { width: 100%; }
  .note-scroll { overflow: visible; }
  .note-nav { opacity: 1; }
}

/* ==========================================================================
   ⑦ 各页零散修正
   ========================================================================== */
/* 侧边栏钱包条：未登录/无会员时不再残留写死的「周卡」 */
.wallet-strip .vip-tag:empty { display: none; }

/* 钱包页：1100px 定宽在 1920 屏上右边空 300px，与其余页面（满幅）不一致 → 放开 */
body[data-page="wallet"] .page-head,
body[data-page="wallet"] .content-col,
body[data-page="wallet"] > .main-footer,
body[data-page="wallet"] .footer { max-width: none; }

/* 键盘焦点环：div 卡片补上（2026-10-04 让照片墙/卡片可 Tab 聚焦后，必须有可见焦点） */
[tabindex="0"]:focus-visible,
[tabindex="-1"]:focus-visible,
.wf-item:focus-visible,
.hot-post:focus-visible,
.note-thumb:focus-visible,
.conv:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(22, 119, 255, .85);
  outline-offset: 2px;
}

/* 跳过导航（键盘 / 读屏用户不用逐个 Tab 过 13 个侧边栏项）
   仅获得焦点时出现，不影响视觉。 */
.cl-skip {
  position: fixed; left: 12px; top: -64px; z-index: 9999;
  padding: 10px 20px; background: #161616; color: #FAF9F6;
  font-size: 13px; letter-spacing: .06em; text-decoration: none;
  border: 1px solid rgba(76, 154, 255, .5);
  transition: top .18s var(--ease-out);
}
.cl-skip:focus { top: 12px; }

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   ⑧ 窄屏「行被挤扁」修复（2026-10-04）
   实测（390px 设备模拟，自动扫描 .row > .grow 可用宽度）：
     · 悬赏列表 5 行只剩 76px → 「周末游艇出海，缺会拍照的一起」被折成一列 4 个字
     · 钱包「会员」行 92px、设置「登录设备管理」行 104px
   原因：行里同时有 金额标签 + 正文 + 按钮/数值，正文拿不到宽度。
   处理：窄屏允许换行，并保证正文至少占 56%；尾部元素换行后仍靠右对齐。
   悬赏列表额外用两行栅格（金额 + 查看一行，标题说明整行）。
   ========================================================================== */
@media (max-width: 760px) {
  .row { flex-wrap: wrap; }
  .row > .grow { min-width: 56%; }
  .row > .btn,
  .row > .val,
  .row > .tag:last-child { margin-left: auto; }

  #taskList .row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
  }
  #taskList .row > .tag { grid-column: 1; grid-row: 1; width: auto !important; }
  #taskList .row > .btn { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  #taskList .row > .grow { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

  /* 钱包「会员」行：标签与入口一行，档位说明整行 */
  #memberCard .row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
  }
  #memberCard .row > .tag:first-child { grid-column: 1; grid-row: 1; }
  #memberCard .row > .tag:last-child { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  #memberCard .row > .grow { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
}

/* ==========================================================================
   ⑨ 文字对比度（2026-10-04）
   新增 audit_contrast.mjs 逐页量「文字色 vs 实际背景色」的 WCAG 对比度，
   实测发现全站三级文字（时间戳 / 说明 / 页脚 / eyebrow）用的灰太浅：
     · clara.css 里 --ink-3 被三个 :root 块分别定义成 #9A9A9A / #A09DA6 / #9C9C9E，
       最后生效的是 #9C9C9E —— 白底上只有 2.6:1（低于 3:1，连"大字"标准都不到）
     · 下载页「下载安装包」按钮是白字压金底（2.4–3.35:1），
       而发布页「发表」、登录页「登 录」都是金字深字（≈8:1）—— 既不好读也不一致
   处理：三级灰统一到 #8A8A8A（3.54:1，跨过 3:1 且仍明显弱于正文），
        下载页按钮改成与发布/登录一致的深字。
   说明：金底金字本身是品牌色（#1677FF on white = 3.07:1），属于品牌约束，未改。
   ========================================================================== */
:root {
  --ink-3: #8A8A8A;
  --ink-dim: #8A8A8A;
}
.dl-btn:not(.off) { color: #FFFFFF !important; }
.copy-btn:hover { color: #FFFFFF !important; }

/* 照片墙整页空态 / 失败态（2026-10-04）：网格换成居中插画，不再是空白）
   注意：.wall-all 平时是 5 列瀑布流，空态时必须改单列，否则插画与文字会被拆到不同列。 */
.wall-state {
  column-count: 1 !important;
  display: block;
  padding: 68px 20px 56px;
  text-align: center;
}
.wall-state .btn { margin-top: 22px; }

/* 照片墙卡片上的点赞按钮（2026-10-04）
   原来是只读的 <span>，现在改成 <button>，需要清掉按钮默认样式并给出选中态。 */
.wf-like {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px;
  margin-left: 8px;                 /* 别贴着昵称：截图里原来是「whmt88888❤ 488」 */
  transition: color .18s var(--ease-out), transform .18s var(--ease-out);
}
.wf-like:hover { color: var(--ink); }
.wf-like:active { transform: scale(.94); }
.wf-like.on { color: var(--gold-deep, #1677FF); font-weight: 600; }
.wf-like:focus-visible { outline: 2px solid rgba(22, 119, 255, .85); outline-offset: 2px; }

/* 圈子广场卡片：后端没有圈子数据、也没有圈子详情页，它们只是策展展示，
   不该"看起来能点"。撤掉我之前加的 hover 描边转金 + 封面放大（2026-10-04）。 */
.circle-card { cursor: default; }
.circle-card:hover { border-color: var(--hair); box-shadow: none; }
.circle-card:hover .circle-cover img { transform: none; }

/* 个人主页资料卡：窄屏把操作按钮排整行换到第二行
   （把 setAccountNo 的破坏性 BUG 修好、按钮回来之后，390px 下会被撑破 +79px ——
    之前不溢出只是因为这些按钮一直被那个 BUG 销毁着。） */
@media (max-width: 760px) {
  /* 窄屏直接改纵向排列：头像是 108px + 资料块 + 按钮排，横排一定放不下（实测溢出 +79px） */
  #profileRow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  #profileRow > .avatar { flex: none; }
  #profileRow > div:nth-child(2) { flex: none; width: 100%; }
  #profileRow > div:last-child {
    flex: none; width: 100%; flex-wrap: wrap;
    justify-content: flex-start; gap: 10px;
  }
  #profileRow > div:last-child > .btn,
  #profileRow > div:last-child > span > .btn { white-space: nowrap; flex: none; padding-left: 18px; padding-right: 18px; }
  #profileRow > div:last-child > span { display: inline-flex; gap: 10px; }
}

/* 个人主页封面昵称：原来 left:34px，被上提的资料卡头像（108px 宽，x 345–453）整块压住
   —— 实测重叠 108×34px。≥761px 时让到头像右侧（内联样式优先，故用 !important）。
   移动端实测纵向重叠为 0，不动。 */
@media (min-width: 761px) {
  #coverName { left: 189px !important; }
}

/* 钱包流水骨架 / 空态 */
.ledger-sk { padding: 18px 0 6px; }
.ledger-empty { padding: 40px 0 30px; text-align: center; }

/* 消息页会话列表骨架（2026-10-04） */
.conv-sk { padding: 6px 0; }
.conv-sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sk-av {
  width: 44px; height: 44px; flex: none; display: block;
  background: linear-gradient(90deg, #F2EFE8 25%, #E9E4DA 37%, #F2EFE8 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease infinite;
}
.sk-lines { flex: 1; min-width: 0; }
.sk-lines .sk-line { display: block; }

/* 消息页右侧空态：垂直居中 */
.chat-body .note-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 40px 20px; }

/* 满幅之后流水行中间会空出一大片：改成四列栅格，余额独立成列 */
#ledgerCard .row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 170px 130px;
  align-items: center;
  gap: 16px;
}
#ledgerCard .row > .grow { min-width: 0; }
.ledger-bal { font-size: 12.5px; color: var(--ink-3); text-align: right; white-space: nowrap; }
#ledgerCard .row > .val { text-align: right; white-space: nowrap; font-size: 14.5px; }
@media (max-width: 760px) {
  #ledgerCard .row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .ledger-bal { display: none; }
}

/* 会员中心：premium.css 把内容列限死 1060px，比"表单/详情页"基准窄一档，
   与发布页的 1240px 对齐（整站的宽度分级：内容/信息流页满幅；表单/详情页 1240px）。 */
body[data-page="member"] .page-head,
body[data-page="member"] .content-col,
body[data-page="member"] .footer { max-width: 1240px; }

/* 发布页与会员中心同为 1240px 分级，保持左右居中 */
body[data-page="publish"] .pub-layout { max-width: 1240px; }

/* 会员中心顶部金色条里的写死余额（真实数值由页面脚本覆盖，这里给出兜底外观） */
body[data-page="member"] .tag .num { font-variant-numeric: tabular-nums; }