@import url('https://fonts.loli.net/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');
/* ==========================================================================
   仿微博社区 · 全站样式
   1. 设计令牌 / 暗色主题     4. 卡片与通用组件
   2. 基础重置                5. 发帖框
   3. PC 顶栏与三栏布局       6. 帖子卡片 / 图片九宫格
                              7. 个人主页 8. 消息中心 9. 移动端
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --brand:#5980a6;              /* 主色，后台可改，layout 里会覆盖 */
  --brand-weak:#eef6ff;
  --link:#416180;               /* 话题 / @ 的颜色 */
  --blue:#5980a6;

  --bg:#f2f2f3;
  --card:#ffffff;
  --line:rgba(29,31,32,.16);
  --line-soft:rgba(29,31,32,.08);
  --hover:rgba(29,31,32,.04);

  --txt:#1d1f20;
  --txt-2:#5d5d60;
  --txt-3:#98989b;

  --ctrl-line:#b7b7ba;          /* 勾选框未选中时的描边，比 --line 深一点才看得见 */
  --ctrl-line-hover:#7a7a7d;

  --radius:0;
  --radius-lg:0;
  --shadow:none;

  --w-left:190px;
  --w-mid:640px;
  --w-right:280px;
  --gap:10px;
  --top-h:54px;
  /* 模拟登录横幅的高度。默认 0 —— 没有横幅时下面那些 calc 全都等于原样，
     不用给每处布局都写一遍「有没有横幅」的分支 */
  --imp-h:0px;

  --danger:#f5222d;
  --ok:#52c41a;
}

/*
 * 毛玻璃的底色。**不能直接用 --card**：那是不透明的，透不出背后的东西。
 * 半透明程度是权衡出来的 —— 太透文字读不清，太实就没有「玻璃」的意思了。
 */
:root{ --glass:rgba(255,255,255,.72); }

[data-theme="dark"]{
  --glass:rgba(27,28,32,.74);
  --brand-weak:#3a2612;
  --ctrl-line:#41434c;
  --ctrl-line-hover:#565964;
  --bg:#101114;
  --card:#1b1c20;
  --line:#2a2b31;
  --line-soft:#232429;
  --hover:#24252b;
  --txt:#e6e6e8;
  --txt-2:#8b8c93;
  --txt-3:#5f6068;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.6 "Barlow",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei","Noto Sans SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;border:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
/*
 * 只给读屏软件和爬虫的文字。
 *
 * 不用 display:none 也不用 visibility:hidden —— 那两种读屏软件也读不到，
 * 等于白写。这是一段**真实存在、只是不占版面**的内容：
 * 裁成 1px 再 clip 掉是无障碍领域用了十几年的标准写法。
 */
.wb-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ico{flex:none;vertical-align:middle}
.rot-270{transform:rotate(-90deg)}
.rot-90{transform:rotate(90deg)}
[hidden]{display:none !important}
::selection{background:var(--brand);color:#fff}

/* ---------- 勾选框 / 单选框 ----------
   原来只设了 accent-color，等于把外观交给浏览器画：Chrome 选中态会自带一圈深灰外框，
   跟站点主色对不上，各家浏览器长得也不一样。这里全部自己画。
   形状不变 —— 方的还是方的、圆的还是圆的，只统一配色。 */
input[type=checkbox],
input[type=radio]{
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;position:relative;
  width:16px;height:16px;flex:none;margin:0;
  border:1px solid var(--ctrl-line);
  background:var(--card);
  cursor:pointer;
  transition:background .12s,border-color .12s;
}
input[type=checkbox]{border-radius:3px}
input[type=radio]{border-radius:50%}

input[type=checkbox]:not(:disabled):hover,
input[type=radio]:not(:disabled):hover{border-color:var(--ctrl-line-hover)}

input[type=checkbox]:checked,
input[type=radio]:checked{background:var(--brand);border-color:var(--brand)}
input[type=checkbox]:checked:hover,
input[type=radio]:checked:hover{border-color:var(--brand);filter:brightness(1.06)}

/* 对勾用两条边框拼出来，不额外引图标资源 */
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4.5px;top:1.5px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
input[type=radio]:checked::after{
  content:"";position:absolute;left:50%;top:50%;
  width:6px;height:6px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);
}

input[type=checkbox]:disabled,
input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 细滚动条，靠近微博的观感 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:4px}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}

/* ---------- 3. 顶栏 ---------- */
.wb-top{
  position:fixed;top:var(--imp-h);left:0;right:0;height:var(--top-h);z-index:100;
  background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.wb-top-inner{
  max-width:calc(var(--w-left) + var(--w-mid) + var(--w-right) + var(--gap)*2 + 120px);
  height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;
}

.wb-logo{display:flex;align-items:center;gap:8px;flex:none}
.wb-logo img{height:30px;width:auto}
.wb-logo-mark{
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.wb-logo-text{font-size:19px;font-weight:700;letter-spacing:.5px}

.wb-search{
  flex:none;width:230px;height:34px;border-radius:17px;background:var(--bg);
  display:flex;align-items:center;gap:6px;padding:0 12px;color:var(--txt-3);
  border:1px solid transparent;transition:.15s;
}
.wb-search:focus-within{background:var(--card);border-color:var(--brand)}
/*
 * 输入框必须显式给 color。不给的话它会继承 .wb-search 上那个 --txt-3（#b7b7bd）——
 * 那是留给放大镜图标的灰度，用户**打进去的字**跟着变成浅灰就没法看了。
 * 站里别的搜索框（主页内搜索、媒体库、屏蔽设置）都显式设过，只有顶部这个漏了。
 */
.wb-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:13px;color:var(--txt);
}
/* 占位符比正文淡一档就够，不跟正文一样黑 —— 一样黑会被当成「已经填了内容」。
   原来用的是 --txt-3，在浅色背景上几乎看不清 */
.wb-search input::placeholder{color:var(--txt-2)}

/*
 * ⚠ 不再居中。
 *
 * 原来是 flex:1 + justify-content:center，五个图标浮在顶栏正中。
 * 现在左移贴着站名（留 22px，紧挨着会像是站名的一部分），
 * margin-right:auto 把后面的搜索框和工具组全顶到右边 ——
 * 中间那段空白落在图标菜单和搜索框之间，这是「左移」的必然结果。
 */
.wb-nav{flex:none;margin-left:22px;margin-right:auto;display:flex;align-items:center;gap:6px}
/*
 * 图标 + 文字的胶囊。
 *
 * 原来是一格 64px 宽、跟顶栏等高的纯图标，选中态靠底部一条 3px 横条。
 * 光图标认不出「热门」和「发现」的区别 —— 那条横条又要求这一格必须
 * 顶天立地，于是它跟旁边的搜索框、圆钮怎么摆都不在一条线上。
 *
 * 现在是 34px 高的胶囊，选中态换成淡色底 —— 跟搜索框、圆钮同一档高度，
 * 一排下来对得齐。
 */
.wb-nav-item{
  position:relative;height:34px;padding:0 11px;border-radius:17px;
  display:flex;align-items:center;gap:6px;
  font-size:14px;color:var(--txt-2);white-space:nowrap;transition:.15s;
}
.wb-nav-item:hover{color:var(--txt);background:var(--hover)}
.wb-nav-item.is-active{color:var(--brand);background:var(--brand-weak);font-weight:500}
.wb-nav-item .ico{flex:none}

/*
 * ⚠ 窄一点的桌面上把文字收起来，只留图标。
 *
 * 导航项是站长在后台自己配的，**条数没有上限** —— 他加到八九项，
 * 加上搜索框和右边那一组，1200px 的屏就摆不下了，
 * 而 flex 挤不动的时候是直接溢出，不是自己换行。
 * 收起文字之后每项从八十来像素缩回三十几，够撑到很窄。
 */
@media (max-width:1280px){
  .wb-nav-item{padding:0 9px}
  .wb-nav-item > span{display:none}
}
/* 红点。微博的做法是「挂在图标右上角、只压住一个角」，
   之前 16px + 2px 描边 = 20px，又居中偏下，整个盖住了图标。 */
.wb-badge{
  position:absolute;top:7px;right:11px;
  /* 尺寸取「个位数时接近正圆，两位数以上自然撑成胶囊」*/
  min-width:13px;height:15px;padding:0 2px;
  background:#ff3b30;color:#fff;border-radius:9px;
  font-size:10px;font-style:normal;font-weight:500;
  line-height:15px;text-align:center;letter-spacing:0;
  border:1.5px solid var(--card);box-sizing:content-box;
  pointer-events:none;
}
.wb-badge.is-hide{display:none}

.wb-top-tools{flex:none;display:flex;align-items:center;gap:12px}
.wb-tool{
  width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--txt-2);
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.wb-tool:hover{color:var(--brand)}
.ico-sun{display:none}
[data-theme="dark"] .ico-moon{display:none}
[data-theme="dark"] .ico-sun{display:block}
.wb-tool-menu{position:relative}

/*
 * 右上角那张脸 —— 账号菜单的按钮。
 *
 * 原来这个位置是个齿轮，头像挂在中间图标菜单的末尾。两个都是「我的账号」，
 * 分在两处，用户先点哪个全靠猜。合成一个之后规矩很直白：
 * 右上角那张脸，点开就是跟我有关的所有事。
 *
 * ⚠ 比旁边的 .wb-tool 略**小**（34 → 32）。
 *
 * 一开始按「图片比线条图标视觉轻」的老经验放到了 36，实际摆出来偏大 ——
 * 站上的头像是满幅的彩色照片，不是线稿，同样直径下它的分量本来就重。
 * 32 配 34 的圆钮看着才是一组，36 会显得头像想抢戏。
 */
.wb-top-me{
  width:32px;height:32px;border-radius:50%;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);overflow:hidden;transition:border-color .15s;
}
.wb-top-me img{width:100%;height:100%;object-fit:cover;display:block}
.wb-top-me:hover{border-color:var(--brand)}

/*
 * 消息挪进工具组之后，得跟旁边的夜间模式长一路 —— 同样是 34px 的圆钮。
 * 它原来是 .wb-nav-item（宽格子、靠底部一条横线表示选中），
 * 那套样式摆进这一组里会突兀：又宽又没底色，像漏掉了什么。
 */
.wb-top-msg{position:relative}
.wb-top-msg.is-active{color:var(--brand)}
/*
 * ⚠ 红点的坐标要重给。
 * .wb-badge 默认的 top/right 是按 .wb-nav-item 那个宽格子调的，
 * 直接套到 34px 的圆钮上会飘到图标外面去。
 */
.wb-top-msg .wb-badge{top:-1px;right:-1px}

/* ---------- 顶栏 / 抽屉里的音乐按钮 ---------- */
/*
 * 放歌时音符换成**三根跳动的竖条**（均衡器）。
 *
 * ⚠ 为什么不是让音符转圈：转圈画的是「这个按钮在忙」，跟音乐没有语义关系 ——
 * 而且它跟全站的加载指示（.wb-video-spinner 那个圈）撞语义，
 * 用户第一眼会以为在缓冲。跳动条画的是**声波**，一眼就是「有声音在响」，
 * 也是 Spotify / Apple Music / YouTube Music 的通用符号，不用学。
 *
 * 音符和跳动条两个都在 DOM 里，靠 body.wb-music-on 换哪个露面 ——
 * 跟夜间模式的月亮/太阳同一套。不用 JS 换：这个按钮在 #wb-page 里，
 * 换页时会被整块替换，而歌还在放；JS 改过的 DOM 会被换回去，纯 CSS 不会。
 */
.wb-eq{display:none;align-items:flex-end;gap:2.5px;height:19px;line-height:0}
.wb-eq i{
  width:3px;border-radius:1.5px;background:var(--brand);
  transform-origin:center;animation:wb-eq-bar .85s ease-in-out infinite;
}
/* 中间那根高一点 —— 三根等高看着像进度条，不像声波 */
.wb-eq i:nth-child(1){height:10px}
.wb-eq i:nth-child(2){height:16px;animation-delay:.28s}
.wb-eq i:nth-child(3){height:10px;animation-delay:.55s}
@keyframes wb-eq-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

body.wb-music-on [data-play-all] .ico{display:none}
body.wb-music-on [data-play-all] .wb-eq{display:flex}

/*
 * ⚠ 开了「减弱动态效果」就整个不动 —— 退回「静态点亮」那一版：
 * 音符照旧、按钮点亮。
 *
 * 不是把跳动条冻住：冻在某一帧的三根高低条看着像坏了，
 * 而「按钮亮着」是个完整、说得通的状态。
 * 这类设置多半是因为持续动画让人不适（前庭功能、偏头痛），
 * 给个静止但仍然清楚的样子，比给个残缺的动画好。
 */
@media (prefers-reduced-motion:reduce){
  body.wb-music-on [data-play-all] .ico{display:inline}
  body.wb-music-on [data-play-all] .wb-eq{display:none}
  body.wb-music-on [data-play-all]{background:var(--brand);color:#fff}
}

.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:32px;padding:0 16px;border-radius:16px;font-size:13px;font-weight:500;
  transition:.15s;white-space:nowrap;cursor:pointer;border:1px solid transparent;
}
.wb-btn-primary{background:var(--brand);color:#fff}
.wb-btn-primary:hover{filter:brightness(1.06)}
.wb-btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none}
.wb-btn-ghost{border-color:var(--line);color:var(--txt-2)}
.wb-btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.wb-btn-post{padding:0 14px}

/* 下拉菜单 */
.wb-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;min-width:132px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 6px 24px rgba(0,0,0,.12);padding:5px;display:none;
}
.wb-dropdown.is-open{display:block}
/* 每一条都带图标，所以改成 flex —— 原来是 block，图标会和文字挤在一起 */
.wb-dropdown>a,.wb-dropdown>button{
  display:flex;align-items:center;gap:8px;
  width:100%;text-align:left;padding:8px 12px;border-radius:var(--radius);
  font-size:13px;color:var(--txt);white-space:nowrap;
}
/* 图标比文字淡一档：它是识别用的，不该和文字抢注意力。
   高亮的两条（进入后台、退出登录）例外，图标跟着那一条的颜色走 */
.wb-dropdown>a>.ico{flex:0 0 auto;color:var(--txt-3)}
.wb-dropdown>a.is-admin>.ico,.wb-dropdown>a.is-danger>.ico{color:inherit}
.wb-dropdown>a:hover,.wb-dropdown>button:hover{background:var(--hover)}
.wb-dropdown .is-danger{color:var(--danger)}
/*
 * 「进入后台」只有管理员看得到，跟上面几条「我的xx」不是一类东西，
 * 用一条分隔线和主色把它区分开 —— 免得站长在一串个人菜单里找不到入口
 */
.wb-dropdown .is-admin{
  display:flex;align-items:center;gap:6px;
  margin-top:4px;padding-top:9px;
  border-top:1px solid var(--line-soft);color:var(--brand);
}
.wb-dropdown .is-admin svg{flex:none}

/* ---------- 三栏 ---------- */
.wb-main{
  max-width:calc(var(--w-left) + var(--w-mid) + var(--w-right) + var(--gap)*2);
  margin:0 auto;padding:calc(var(--top-h) + var(--imp-h) + var(--gap)) 0 40px;
  display:grid;grid-template-columns:var(--w-left) var(--w-mid) var(--w-right);gap:var(--gap);
  align-items:start;
}
.wb-col-left,.wb-col-right{position:sticky;top:calc(var(--top-h) + var(--imp-h) + var(--gap))}
.wb-col-left{max-height:calc(100vh - var(--top-h) - var(--imp-h) - 20px);overflow-y:auto;padding-bottom:10px}
.wb-col-right{max-height:calc(100vh - var(--top-h) - var(--imp-h) - 20px);overflow-y:auto}
.wb-col-left::-webkit-scrollbar,.wb-col-right::-webkit-scrollbar{width:0}

/* 左栏。每块都是独立白卡，和右栏一致；卡片内边距在这里给，
   .wb-card 本身不带 padding（信息流卡片要自己控制） */
.wb-side-card{padding:10px}
.wb-side-title{font-size:20px;font-weight:600;padding:6px 10px 10px}
.wb-side-menu{display:flex;flex-direction:column;gap:2px}
.wb-side-item{
  display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;
  border-radius:var(--radius-lg);color:var(--txt-2);font-size:14px;transition:.15s;
}
.wb-side-item:hover{background:var(--hover);color:var(--txt)}
.wb-side-item.is-active{color:var(--brand);font-weight:600;background:var(--brand-weak)}
.wb-side-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-side-badge{
  min-width:17px;height:17px;padding:0 5px;background:#ff3b30;color:#fff;border-radius:9px;
  font-size:11px;font-style:normal;line-height:17px;text-align:center;
}
/* 菜单项右边那个不刺眼的数字（勋章枚数之类）。跟 .wb-side-badge 的红点不是一回事：
   那个是「有未读，快来看」，这个只是个静态计数 */
.wb-side-num{
  flex:none;font-style:normal;font-size:12px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}
/*
 * 「去对面那一栏」。
 *
 * 样式上刻意比菜单项弱一档 —— 它不是这一栏的内容，是个出口。
 * 做成同样重的一项，用户扫菜单时会把它当成第七个功能。
 */
.wb-side-cross{
  display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 12px;
  border-top:1px solid var(--line-soft);
  color:var(--txt-3);font-size:13px;transition:.15s;
}
.wb-side-cross:hover{color:var(--brand)}
.wb-side-cross svg{transform:rotate(-90deg)}

/* ---------- 我的勋章：还没拿到的那一列 ---------- */
.wb-badge-todo{list-style:none;margin:0;padding:4px 16px 14px}
.wb-badge-todo li{display:flex;align-items:center;gap:10px;padding:7px 0}
.wb-badge-todo span{
  flex:1;min-width:0;font-size:13px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 未获得：调淡，不变灰 —— 变灰看着像「这枚作废了」，而它只是还没拿到 */
.wb-badge-chip.is-locked{flex:none;opacity:.45}
.wb-side-badge.is-hide{display:none}
.wb-side-group{margin-top:20px}
.wb-side-group-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 10px 8px;font-size:13px;color:var(--txt-3);
}
.wb-side-manage{font-size:12px;color:var(--brand);border:1px solid var(--brand);border-radius:9px;padding:0 7px}
.wb-side-sub{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border-radius:var(--radius-lg);font-size:13px;color:var(--txt-2);transition:.15s;
}
.wb-side-sub:hover{background:var(--hover);color:var(--txt)}
.wb-side-sub.is-active{color:var(--brand);font-weight:600}
.wb-side-sub span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-side-sub em{font-style:normal;font-size:12px;color:var(--txt-3)}
.wb-dot{width:5px;height:5px;border-radius:50%;background:var(--txt-3);flex:none}
.wb-side-sub.is-active .wb-dot{background:var(--brand)}

/* ---------- 4. 卡片 ---------- */
.wb-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:var(--gap);
}
.wb-card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);
}
.wb-card-hd h2,.wb-card-hd h3{font-size:15px;font-weight:600}
.wb-card-act{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--txt-2)}
.wb-card-act:hover{color:var(--brand)}
.wb-card-more{
  display:flex;align-items:center;justify-content:center;gap:3px;
  height:40px;font-size:13px;color:var(--txt-2);border-top:1px solid var(--line-soft);
}
.wb-card-more:hover{color:var(--brand)}
.wb-icon-btn{
  width:26px;height:26px;border-radius:50%;color:var(--txt-3);
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.wb-icon-btn:hover{background:var(--hover);color:var(--txt-2)}

/* 空态 */
.wb-empty{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:70px 20px;text-align:center;color:var(--txt-3);margin-bottom:var(--gap);
}
.wb-empty svg{margin:0 auto 14px}
.wb-empty p{font-size:14px}
/* 补充说明比主文案更淡、更窄 —— 它是给需要的人看的，不该跟主文案抢 */
.wb-empty-tip{
  max-width:300px;margin:6px auto 0;
  font-size:12.5px;line-height:1.7;opacity:.72;
}
/* 出路按钮。空态最重要的不是「这儿没东西」，是「接下来去哪」 */
.wb-empty-go{
  display:inline-block;margin-top:16px;
  height:32px;line-height:32px;padding:0 18px;border-radius:16px;
  background:var(--brand);color:#fff;font-size:13.5px;text-decoration:none;
}
.wb-empty-go:hover{filter:brightness(1.05)}

/* 热搜榜 */
.wb-rank-list{padding:4px 0}
.wb-rank-item{display:flex;align-items:center;gap:8px;padding:7px 16px;transition:.15s}
.wb-rank-item:hover{background:var(--hover)}
/*
 * 序号照微博分档：前三名实心色块（红/橙/黄），第四名起浅底灰字。
 * 原来只是给数字换个颜色，斜体细字在一列里几乎看不出名次差别 ——
 * 榜单的第一眼信息就是「谁在前面」，这个层次必须做出来。
 */
.wb-rank-no{
  flex:none;width:17px;height:17px;line-height:17px;text-align:center;
  font-size:11px;font-weight:600;font-style:normal;border-radius:3px;
  color:var(--txt-3);background:var(--line-soft);
}
.wb-rank-no.n1{color:#fff;background:#f5222d}
.wb-rank-no.n2{color:#fff;background:#fa8c16}
.wb-rank-no.n3{color:#fff;background:#faad14}
/* 置顶不占序号，给一个「顶」标 —— 原来是个孤零零的「·」，
   既看不出什么意思，还让 1、2、3 从第四行才开始，像是榜单缺了前几名 */
.wb-rank-no.is-pin{
  color:#fff;background:var(--brand);font-size:10px;letter-spacing:-.5px;
}
.wb-rank-key{
  flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-rank-item:hover .wb-rank-key{color:var(--brand)}
.wb-rank-hot{font-style:normal;font-size:12px;color:var(--txt-3);flex:none}
.wb-tag{
  font-style:normal;font-size:10px;line-height:14px;padding:0 3px;border-radius:2px;
  color:#fff;background:#ff9800;flex:none;
}
.wb-tag.t-新{background:#ff3c3c}.wb-tag.t-热{background:#ff7300}
.wb-tag.t-沸{background:#e83a3a}.wb-tag.t-荐{background:#3a94e5}

/* 推荐关注 */
.wb-user-row{display:flex;align-items:center;gap:10px;padding:10px 16px}
.wb-user-row:hover{background:var(--hover)}
.wb-user-avatar{position:relative;flex:none}
.wb-user-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.wb-user-meta{flex:1;min-width:0}
.wb-user-name{
  display:block;font-size:13.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-user-name:hover{color:var(--brand)}
.wb-user-bio{
  font-size:12px;color:var(--txt-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-btn-follow{
  flex:none;height:26px;padding:0 10px;border-radius:13px;font-size:12px;
  color:var(--brand);border:1px solid var(--brand);background:none;
}
.wb-btn-follow:hover{background:var(--brand);color:#fff}
.wb-btn-follow.is-on{color:var(--txt-2);border-color:var(--line)}
.wb-btn-follow.is-on:hover{background:none;color:var(--danger);border-color:var(--danger)}

/* 认证标 */
/*
 * 认证徽章。
 *
 * **整块是一个 SVG**（花边圆 + 白勾），不再是"CSS 画个圆 + 里面塞个 check"——
 * 那种做法在 15px 上对勾细得像头发丝，而且圆和勾在不同缩放下对不齐。
 *
 * 底下垫一个白色的圆（::before）当描边：徽章压在头像上，没有这一圈
 * 就跟头像的边糊在一起。用垫圆而不是 border，是因为花边轮廓不是正圆，
 * border 会描出一个跟图形对不上的圈。
 */
.wb-v{
  position:absolute;right:-3px;bottom:-3px;
  display:flex;align-items:center;justify-content:center;
  line-height:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.wb-v::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* 撑满整框：图标里的圆是 r=9.7（占 81%），剩下的 19% 就是描边环，
     跟微博一样（它是把外圈画在 SVG 里，我们用 ::before，好处是能跟 var(--card)
     一起进暗色模式）。⚠ 这条成立的前提是 .wb-v 的盒子 == svg 尺寸。 */
  width:100%;height:100%;border-radius:50%;background:var(--card);
}
.wb-v svg{position:relative}
.wb-v.v1{color:#ff8200}
.wb-v.v2{color:#3a94e5}

/*
 * ⚠ **头像不能被拉伸。**
 *
 * .wb-avatar 是 position:relative，徽章按它的 bottom 定位。而通知列表那种
 * `display:flex` 的行默认 align-items:stretch —— 头像那一格会被拉到整行高，
 * 徽章于是掉到**整行的底部**，跑到时间戳旁边去了。
 *
 * 站长看到的就是「消息列表里时间左边冒出来一个橙点，有的有有的没有」——
 * 有的其实就是"这个人认证过"。
 *
 * flex:none 只管主轴（不许伸缩宽度），拦不住交叉轴的拉伸，得 align-self。
 */
.wb-avatar{align-self:flex-start}

/* 话题云 */
.wb-topic-cloud{display:flex;flex-wrap:wrap;gap:7px;padding:14px 16px}
.wb-topic-cloud a{
  font-size:12.5px;color:var(--link);background:var(--bg);
  padding:4px 9px;border-radius:12px;transition:.15s;
}
.wb-topic-cloud a:hover{background:var(--brand);color:#fff}

/* 页脚 */
.wb-foot{padding:6px 16px 20px;font-size:12px;color:var(--txt-3);line-height:2}
.wb-foot a:hover{color:var(--brand)}
.wb-foot span{margin:0 6px;opacity:.5}
.wb-foot-copy{margin-top:6px}
/* 站长自填的那一段：里面是别人写的 HTML，把上面几条后代选择器还原回默认，
   否则人家的 <span> 会莫名其妙变淡、被撑开 */
.wb-foot-extra{margin-top:8px}
.wb-foot-extra span{margin:0;opacity:1}

/* ---------- 5. 发帖框 ---------- */
.wb-composer{padding:14px 16px 0;position:relative}

.wb-composer-box{
  border:1px solid transparent;border-radius:var(--radius-lg);background:var(--bg);
  padding:10px 12px;transition:.15s;
}
.wb-composer.is-focus .wb-composer-box{background:var(--card);border-color:var(--brand)}
.wb-composer-input{
  width:100%;border:0;background:none;outline:none;resize:none;
  font-size:15px;line-height:1.65;min-height:56px;max-height:280px;
}
.wb-composer-input::placeholder{color:var(--txt-3)}
/*
 * 提示句 + 字数，一起贴在输入框的右下角（字数在最右，跟微博一个位置）。
 * 提示句可长可短、还可能是空的，所以让它去挤，字数那一格不许被压。
 */
.wb-composer-hint{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:4px}
.wb-composer-hint .wb-composer-tip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-composer-hint .wb-counter{flex:none}
.wb-composer-tip{font-size:12px;color:var(--txt-3)}

/* 上传预览九宫格 */
.wb-composer-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.wb-composer-preview figure{
  position:relative;margin:0;padding-top:100%;border-radius:var(--radius);
  overflow:hidden;background:var(--line-soft);
}
.wb-composer-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-composer-preview .del{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
}
.wb-composer-preview .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--brand);transition:width .2s}

.wb-composer-bar{
  display:flex;align-items:center;gap:10px;padding:9px 0 12px;flex-wrap:wrap;
}

/*
 * 底栏保持**一行**。这一段是按实测预算来的，不是凑出来的。
 *
 * ────────────────────────────────────────────
 *  640px 中栏，可用 608px，钱花在哪
 * ────────────────────────────────────────────
 *
 *     7 个工具按钮 292 ＋ 发送 72 ＋ 间距 26
 *     ────────────────────────────────────
 *     剩给版块 + 可见范围                 218
 *
 * 两个选择器的自然宽（实测）：2字 80、4字 104、5字 116、8字 152。
 * 原来两边都不封顶，「8 字版块 + 粉丝可见」= 256，超 38px 就换行 ——
 * 也就是说**能不能放下取决于站长把版块叫什么名字**，这是个定时炸弹。
 *
 * 现在两边各封死 4 个字：
 *
 *     104 ＋ 6 ＋ 104 = 214  ≤ 218      整行 598 ≤ 608，余 10px
 *
 * 关键不在余 10px，在于**这 214 是个常数** —— 版块名再长也只占 104，
 * 可见范围最长的「粉丝可见」正好 4 字。任何数据都撑不破它。
 *
 * 排除过两条路，记下来免得再走一遍：
 *   · 藏掉工具按钮的文字只留图标 —— 实测单个 40→38，七个才省 14px；
 *     padding 才是大头，不是文字。
 *   · 把工具按钮内边距 9→4 压到 30px 宽 —— 能腾出 70px，但实际看
 *     太挤了，站长否了。工具栏维持原样。
 *
 * 全局 .wb-select 本来就有 max-width:150px；这里收到 104。
 */
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-bar{flex-wrap:nowrap}
}
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-tools{flex:0 0 auto}
}
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-right{flex-wrap:nowrap;min-width:0}
}
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-meta{min-width:0}
}
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-meta > .wb-select{max-width:104px}
}
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-composer-submit{flex:0 0 auto}
}
/* 版块是唯一能让步的：万一以后这行又多了点什么，先压它，别顶掉「发送」 */
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-select.is-elastic{flex:0 1 auto;min-width:76px}
}
/* 超过 4 个字出省略号，title 里留全名给悬停看 */
@media (min-width:1025px){
body.wb-app .wb-composer:not(.is-full) .wb-select-btn > span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
}

.wb-composer-tools{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
/*
 * 版块 / 可见范围 / 发送 是一组，一起换行。
 *
 * 原来它们是 .wb-composer-bar 的三个平级 flex 项、靠 order 排位。宽度不够
 * 触发 wrap 时，「发送」会单独掉到第二行**左边**，版块和可见范围还留在第一行 ——
 * 那个错位就是这么来的。包成一组之后要么整体在第一行，
 * 要么整体换到第二行并靠右，中间不会拆开。
 *
 * margin-left:auto 负责把这一组推到最右；flex-wrap 让它在极窄时
 * 内部也能再折一次，而不是把整行撑破
 */
.wb-composer-right{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  margin-left:auto;flex-wrap:wrap;justify-content:flex-end;
}
/* 附件列表和投票卡片是整条的预览，各占一整行，不在按钮行里 */
.wb-composer-files:not([hidden]),
.wb-composer-poll:not([hidden]){display:flex}
.wb-composer-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.wb-composer-submit{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* ---- 工具条的「更多」 ---- */
.wb-cmore{position:relative;flex:none}
/* 菜单里是「图标 + 名字 + 一句说明」的竖排条目，比一排小图标好认 */
.wb-cmore-menu{left:0;right:auto;min-width:170px}
.wb-cmore-menu > button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:var(--radius);
  font-size:13px;color:var(--txt);text-align:left;
}
.wb-cmore-menu > button:hover{background:var(--hover);color:var(--brand)}
.wb-cmore-menu > button svg{flex:none;color:var(--txt-3)}
.wb-cmore-menu > button:hover svg{color:var(--brand)}
.wb-cmore-menu > button b{font-weight:400}
.wb-cmore-menu > button em{
  margin-left:auto;font-style:normal;font-size:11.5px;color:var(--txt-3);
}
.wb-ctool{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:3px 9px;border-radius:var(--radius);color:var(--txt-2);
  font-size:11px;transition:.15s;flex:none;
}
.wb-ctool:hover{color:var(--brand);background:var(--hover)}
.wb-ctool.is-on{color:var(--brand);background:var(--brand-weak)}

/* 自定义下拉选择器。
   原生 <select> 的 option 列表是操作系统画的，改不了配色 ——
   Windows 上会出现蓝底白字的高亮，暗色模式下更是白底黑字很突兀。
   所以这里用按钮 + 面板自己实现，值放在隐藏 input 里。 */
.wb-select{position:relative;flex:none;max-width:150px}
.wb-select-btn{
  display:inline-flex;align-items:center;gap:5px;width:100%;
  height:28px;padding:0 8px;border-radius:14px;
  background:var(--bg);color:var(--txt-2);font-size:12px;
  border:1px solid transparent;transition:.15s;
}
.wb-select-btn:hover{color:var(--brand);background:var(--hover)}
.wb-select.is-open .wb-select-btn{color:var(--brand);border-color:var(--brand);background:var(--card)}
.wb-select-btn > span{
  flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-select-caret{flex:none;opacity:.55;transition:transform .15s}
.wb-select.is-open .wb-select-caret{transform:rotate(180deg);opacity:1}

/* 用 fixed 而不是 absolute：这个下拉会出现在编辑弹层里，
   而弹层是 overflow:auto 的滚动容器，absolute 的菜单会被它裁掉 ——
   实测有一半选项在框外，鼠标点下去打到的是遮罩。
   坐标由 JS 在打开时按按钮位置算（见 openSelect），
   效果就是微博那种「浮在框外」的下拉。 */
.wb-select-menu{
  position:fixed;z-index:340;
  width:max-content;min-width:140px;max-width:230px;max-height:260px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 8px 28px rgba(0,0,0,.14);padding:5px;
}
/*
 * 下拉面板的小标题。选项本身单看是有歧义的 ——「不选择版块」不选了会怎样？
 * 「公开」是对谁公开？加一行标题比给每个选项都补说明省地方，也不打断扫读。
 * sticky 是因为版块多了面板会滚，标题跟着滚走就白加了。
 */
.wb-select-title{
  position:sticky;top:-5px;z-index:1;
  margin:-5px -5px 4px;padding:9px 12px 7px;
  background:var(--card);border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--txt-2);
}
.wb-select-option{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:var(--radius);
  font-size:13px;color:var(--txt);text-align:left;transition:.12s;
}
.wb-select-option:hover{background:var(--hover)}
.wb-select-option > span{flex:none}
.wb-select-option em{
  font-style:normal;font-size:11.5px;color:var(--txt-3);
  margin-left:auto;padding-left:10px;white-space:nowrap;
}
.wb-select-tick{flex:none;margin-left:auto;color:var(--brand);opacity:0}
.wb-select-option em + .wb-select-tick{margin-left:6px}
.wb-select-option.is-on{color:var(--brand);font-weight:500}
.wb-select-option.is-on .wb-select-tick{opacity:1}

.wb-counter{font-size:12px;color:var(--txt-3);min-width:24px;text-align:right}
.wb-counter.is-warn{color:var(--brand)}
.wb-counter.is-over{color:var(--danger)}
.wb-btn-send{height:32px;padding:0 22px;font-weight:600}

/* 表情面板：全站只渲染一份，用 fixed 定位到触发按钮旁边，
   这样发帖框、评论框、私信框可以共用同一个面板 */
.wb-emoji-pop{
  position:fixed;z-index:320;width:340px;max-width:calc(100vw - 24px);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(0,0,0,.16);overflow:hidden;
}
.wb-emoji-tabs{display:flex;align-items:center;border-bottom:1px solid var(--line-soft)}
.wb-emoji-tabs button{
  flex:1;height:34px;font-size:12px;color:var(--txt-2);border-bottom:2px solid transparent;
}
.wb-emoji-tabs button.is-active{color:var(--brand);border-bottom-color:var(--brand)}
.wb-emoji-close{flex:0 0 32px !important;color:var(--txt-3)}
.wb-emoji-close:hover{color:var(--txt)}
.wb-emoji-grid{display:none;grid-template-columns:repeat(10,1fr);gap:2px;padding:8px;max-height:200px;overflow-y:auto}
.wb-emoji-grid.is-active{display:grid}
.wb-emoji-grid button{
  height:29px;border-radius:var(--radius);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.wb-emoji-grid button:hover{background:var(--hover)}

/* 话题 / @ 联想：挂在发帖框下沿，不遮住正在输入的内容 */
.wb-suggest{
  position:absolute;left:16px;right:16px;top:calc(100% - 6px);z-index:55;
  max-height:230px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 8px 30px rgba(0,0,0,.14);padding:5px;
}
.wb-suggest button{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;
  border-radius:var(--radius);text-align:left;font-size:13px;
}
.wb-suggest button:hover,.wb-suggest button.is-cur{background:var(--hover)}
.wb-suggest img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.wb-suggest em{margin-left:auto;font-style:normal;font-size:11px;color:var(--txt-3)}

/* 筛选 Tab */
.wb-feedtabs{display:flex;align-items:center;gap:2px;padding:0 12px;height:44px}
.wb-feedtabs a{
  padding:0 12px;height:44px;line-height:44px;font-size:14px;color:var(--txt-2);
  position:relative;transition:.15s;
}
.wb-feedtabs a:hover{color:var(--txt)}
.wb-feedtabs a.is-active{color:var(--brand);font-weight:600}
.wb-feedtabs a.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--brand);
}
.wb-feedtabs-spacer{flex:1}
.wb-feedtabs-alt{font-size:12.5px !important;color:var(--txt-3) !important}

/* 版块头 */
.wb-board-hd{padding:16px}
.wb-board-hd h1{font-size:18px;font-weight:600}
.wb-board-hd p{color:var(--txt-2);font-size:13px;margin-top:5px}
.wb-board-count{font-size:12px;color:var(--txt-3)}

/* ---------- 6. 帖子卡片 ---------- */
.wb-post{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:var(--gap);padding:14px 16px 0;
}
.wb-post-hd{display:flex;align-items:flex-start;gap:10px}
.wb-avatar{position:relative;flex:none}
.wb-avatar img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--line-soft)}
.wb-post-meta{flex:1;min-width:0;padding-top:1px}
.wb-post-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wb-post-name a{font-size:14.5px;font-weight:600;line-height:1.3}
.wb-post-name a:hover{color:var(--brand)}
/* ---------- 置顶帖 ---------- */
/*
 * 置顶要看得出来，但**不能压过内容本身**。
 *
 * 参考各家社媒的做法：不用实心底色（那会让这一条像广告位，而且深色模式下
 * 一整块彩色特别刺眼），而是**从顶部淡淡渗下来一层品牌色**，
 * 到卡片一半就化没了 —— 视线扫过去知道它不一样，但读正文时它不碍事。
 *
 * 用 ::before 铺而不是直接给卡片设 background：卡片本身的白底还得留着，
 * 而且渐变叠在白底上才是「浅浅一层」，直接换底色就没有层次了。
 */
.wb-post.is-pinned{position:relative}
.wb-post.is-pinned::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;
  pointer-events:none;   /* 它盖在内容上层之外，绝不能挡住点击 */
  border-radius:inherit;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--brand) 7%, transparent),
    transparent);
}
/*
 * color-mix 老浏览器不认。退回一个极淡的中性灰 —— 宁可看不出置顶，
 * 也不能因为整段声明失效而露出别的样式
 */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .wb-post.is-pinned::before{
    background:linear-gradient(to bottom, rgba(127,127,127,.06), transparent);
  }
}
/*
 * 深色模式下品牌色叠在深底上会发闷，稍微提一点透明度。
 * 不提的话那层渐变基本看不见，等于白做。
 */
:root[data-theme="dark"] .wb-post.is-pinned::before{
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--brand) 12%, transparent), transparent);
}

.wb-flag{
  font-style:normal;font-size:10.5px;line-height:15px;padding:0 4px;border-radius:2px;
  color:var(--brand);background:var(--brand-weak);display:inline-flex;align-items:center;gap:2px;
}
.wb-flag.is-plain{color:var(--txt-3);background:var(--line-soft)}
.wb-post-sub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt-3);margin-top:3px}
.wb-post-sub a:hover{color:var(--brand)}
/*
 * ⚠ position:relative 不是可有可无 —— 少了它「更多」的下拉菜单会跑到屏幕外。
 *
 * 菜单是 position:absolute，要靠**最近的定位祖先**定位。这里不给的话，
 * 它会一路往上找到 <body>，于是菜单被摆到整个页面的坐标系里去 ——
 * 用户看到的是「点了那个按钮什么都没发生」。
 *
 * 最坑的是**置顶帖是好的**：.wb-post.is-pinned 为了画那道角标带了
 * position:relative，菜单正好贴着卡片。于是现象成了
 *「置顶的能点开、非置顶的点不开」，看着像跟置顶有关，其实毫无关系。
 */
.wb-post-tool{position:relative;flex:none;display:flex;align-items:center;gap:6px}

/*
 * 阅读数徽标。微博是「数字块 + 推广按钮」拼成的一个长条，推广那半边是广告业务，
 * 这里不做，所以边框收成完整的一块，右边不再留切口。
 * 字号压到 11/10px，是因为它要跟旁边 16px 的「更多」箭头同排，
 * 再大就会把作者名那一行的视觉重心带偏。
 */
/*
 * 版块标签。跟旁边的阅读数是**一对**，所以高度、圆角、字号都跟它走，
 * 只是不带边框、用主色 —— 阅读数是个静态数字，这个是能点的。
 *
 * ⚠ 名字长度是站长的自由（他站上就有个二十字的版块名），
 * 所以必须限宽 + 省略号，全名留在 title 里。不限的话它会把
 * 昵称那一行整个顶歪。
 */
.wb-post-board{
  flex:none;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:2px 8px;border-radius:10px;
  background:var(--brand-weak);color:var(--brand);
  font-size:12px;line-height:1.5;transition:.15s;
}
.wb-post-board:hover{background:var(--brand);color:#fff}
.wb-post-views{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:44px;padding:2px 6px;border:1px solid var(--line);border-radius:var(--radius);
  line-height:1.15;color:var(--txt-2);cursor:default;user-select:none;
}
.wb-post-views b{font-size:11px;font-weight:600;color:var(--txt)}
.wb-post-views i{font-size:10px;font-style:normal;transform:scale(.92)}
/* 只有自己看得见时，加一道虚线边框做区分 —— 不然作者会以为这个数字是公开的 */
.wb-post-views.is-private{border-style:dashed;border-color:var(--ctrl-line)}
[data-theme="dark"] .wb-post-views{border-color:rgba(255,255,255,.14)}

/* ---- 个人主页数据摘要 ---- */
.wb-profile-data{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.wb-profile-data span{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:var(--brand-weak);color:var(--brand);font-size:12.5px;
}
.wb-profile-data i{font-style:normal;opacity:.85}
.wb-profile-data b{font-size:13px;font-weight:600}
.wb-profile-data em{
  display:inline-flex;align-items:center;gap:3px;
  font-style:normal;font-size:12px;color:var(--txt-3);cursor:default;
}
[data-theme="dark"] .wb-profile-data span{background:rgba(255,130,0,.14)}

/* ---- 主页内搜索 ---- */
.wb-pf-count{display:inline-flex;align-items:center;gap:8px}
.wb-pf-count b{color:var(--brand);font-weight:600}
.wb-pf-clear{
  display:inline-flex;align-items:center;gap:2px;color:var(--txt-2);font-size:12px;
}
.wb-pf-clear:hover{color:var(--brand)}

.wb-pf-search{
  position:relative;display:flex;align-items:center;gap:5px;
  height:30px;padding:0 4px 0 9px;border-radius:999px;
  background:var(--hover);border:1px solid transparent;transition:border-color .15s,background .15s;
}
.wb-pf-search:focus-within,.wb-pf-search.is-on{background:var(--card);border-color:var(--brand)}
.wb-pf-search>svg{flex:none;color:var(--txt-3)}
.wb-pf-search input[type="search"]{
  width:132px;border:0;background:none;outline:none;font-size:13px;color:var(--txt);
}
.wb-pf-search input[type="search"]::placeholder{color:var(--txt-3)}
.wb-pf-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.wb-pf-more{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:0;border-radius:50%;background:none;
  color:var(--txt-2);cursor:pointer;
}
.wb-pf-more:hover{background:var(--line-soft);color:var(--txt)}

.wb-pf-panel{min-width:286px;padding:12px}
.wb-pf-row{display:flex;gap:10px;margin-bottom:10px;font-size:13px}
.wb-pf-row>label{flex:none;width:32px;padding-top:5px;color:var(--txt-2)}
.wb-pf-types{display:flex;flex-wrap:wrap;gap:6px}
.wb-pf-types .wb-chip{
  padding:4px 10px;border:1px solid var(--ctrl-line);border-radius:999px;
  font-size:12.5px;color:var(--txt-2);cursor:pointer;user-select:none;
}
.wb-pf-types .wb-chip:hover{border-color:var(--ctrl-line-hover);color:var(--txt)}
.wb-pf-types .wb-chip.is-on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand)}
.wb-pf-types .wb-chip input{position:absolute;opacity:0;pointer-events:none}
.wb-pf-dates{display:flex;align-items:center;gap:6px;color:var(--txt-2)}
.wb-pf-dates input{
  width:118px;padding:5px 7px;border:1px solid var(--ctrl-line);border-radius:var(--radius);
  background:var(--card);color:var(--txt);font-size:12.5px;
}
.wb-pf-act{display:flex;align-items:center;justify-content:space-between;padding-top:2px}
.wb-pf-act a{font-size:12.5px;color:var(--txt-2)}
.wb-pf-act a:hover{color:var(--brand)}

/* ---- 移动端 ---- */
.wb-m-profile-data{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:2px 0 10px;
}
.wb-m-profile-data span{
  display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border-radius:999px;
  background:var(--brand-weak);color:var(--brand);font-size:12px;
}
.wb-m-profile-data i{font-style:normal;opacity:.85}
.wb-m-profile-data b{font-weight:600}
.wb-m-profile-data em{
  display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:11.5px;color:var(--txt-3);
}
[data-theme="dark"] .wb-m-profile-data span{background:rgba(255,130,0,.14)}



.wb-post-body{padding:9px 0 0 0}
.wb-post-text{font-size:15px;line-height:1.72;word-break:break-word;white-space:normal}
.wb-post-text.is-fold{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
/*
 * 话题 / @ / 链接的颜色。
 *
 * 不能挂在 .wb-post-text 下面 —— TextFormatter 的输出还会出现在评论、
 * 楼中楼、转发引用块里，限定容器的结果是同一个 #话题# 在帖子里是蓝的、
 * 在评论里是黑的，看着根本不像能点。这三个类本身就代表「这是个链接」，
 * 颜色就该跟着类走。
 */
a.wb-topic,a.wb-at,a.wb-link{color:var(--link)}
a.wb-topic:hover,a.wb-at:hover,a.wb-link:hover{text-decoration:underline}
.wb-link .ico{display:inline-block;margin-right:2px;vertical-align:-2px}
.wb-emoji{font-size:17px;vertical-align:-2px}
.wb-unfold{color:var(--link);font-size:13.5px;padding:3px 0;display:inline-flex;align-items:center;gap:2px}

/* 转发引用块 */
.wb-quote{
  margin-top:10px;padding:11px 12px;background:var(--bg);border-radius:var(--radius);
}
/* 原帖没了的占位：仍是一块灰底，跟正常引用块一样占位，
   这样一眼能看出「这里本来有内容」，而不是转发者少写了一句 */
.wb-quote.is-gone{
  display:flex;align-items:center;gap:7px;
  color:var(--txt-3);font-size:13.5px;
}
.wb-quote.is-gone svg{flex:none;opacity:.7}
.wb-quote-text{font-size:14px;line-height:1.7;word-break:break-word}
/* 引用块里的原帖也折叠。比主帖少一行：它是背景信息，不是这一页的主角，
   而且转发块本来就该看着比正文轻 —— 6 行的灰块会把转发者自己的话压下去 */
.wb-quote-text.is-fold{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.wb-quote-unfold{font-size:13px;margin-top:2px}
.wb-quote-text .wb-at{color:var(--link);font-weight:500}
.wb-quote-act{display:flex;gap:22px;margin-top:9px;font-size:12.5px;color:var(--txt-3)}
.wb-quote-act a,.wb-quote-act button{display:inline-flex;align-items:center;gap:4px;color:inherit}
.wb-quote-act a:hover,.wb-quote-act button:hover{color:var(--brand)}
.wb-quote .wb-images{margin-top:9px}

/* 图片九宫格 */
/*
 * ════════════════════════════════════════════════════════════════
 *  尺寸对标 X（站长 2026-09-02 定的，推翻了之前那次缩小）
 * ════════════════════════════════════════════════════════════════
 *
 * 之前单图是 240×240 上限，理由是「微博的单图只占卡片 26%」。
 * 站长的反馈：**不点开根本看不清，体验不好**。他要求推翻。
 *
 * 实测 x.com/home（2026-09-02，登录态，视口 1536，卡片 599、媒体列 517）：
 *   776×900  →  440×510
 *   668×900  →  378×510
 *   836×900  →  474×510
 *   704×571  →  517×419   ← 横图先撞到宽
 *
 * 规则干净得很：**宽上限 = 媒体列满宽，高上限 = 510px，保持比例、不裁**。
 * 我们的媒体列是 608（比 X 还宽），所以直接用同一条规则，
 * 单图从 240×180 变成最大 608×510 —— 线性尺寸约 2.5 倍。
 *
 * ⚠ 为什么高上限跟 X 一样取 510 而不按我们的视口放大：
 * 那个数不是为了「好看」，是为了**一屏里还能看见下一条动态**。
 * 一张图把整个视口占满，人就失去了「这是信息流」的感觉，
 * 变成一次只能看一条。510 在 900 高的视口里占 57%，正好留出上下文。
 */
.wb-images{display:grid;gap:4px;margin-top:10px}

/*
 * ⚠ 多图也跟着放大到**满媒体列**，不再是 340 / 400 那种小方块。
 *
 * 不放大的话会出现一种很怪的落差：一张图很大，两张图突然缩到一半以下。
 * 用户会以为「多发一张图会被压缩」，于是干脆只发一张。
 */
.wb-images.c1{grid-template-columns:1fr}
.wb-images.c2{grid-template-columns:repeat(2,1fr)}
.wb-images.c3{grid-template-columns:repeat(3,1fr)}
/* 转发引用块里的缩略图不跟着放 —— 那儿是「原帖长什么样」的示意，不是主角 */
.wb-images.is-small{max-width:320px}

.wb-image{
  position:relative;padding-top:100%;overflow:hidden;border-radius:var(--radius);
  background:var(--line-soft);cursor:zoom-in;
}
.wb-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.2s}
.wb-image:hover img{filter:brightness(.94)}
/* 动图角标。第一帧是静止画面的动图看着跟普通图一模一样，
   没有这个标，用户根本不知道它会动，也就不会点开 */
.wb-image-gif{
  position:absolute;left:6px;bottom:6px;z-index:1;
  padding:1px 5px;border-radius:3px;
  background:rgba(0,0,0,.6);color:#fff;
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.5px;line-height:1.5;
  pointer-events:none;
}
/* 转发引用块里的缩略图更小，角标跟着缩 */
.wb-images.is-small .wb-image-gif{left:4px;bottom:4px;padding:0 4px;font-size:9.5px}

/* ---- 单图：X 那一套（满宽 + 限高 + 不裁） ---- */
/*
 * ⚠ 仍然**不裁**（object-fit:contain）。
 *
 * 这一条跟 X 不同，是有意的：论坛里发的多是截图、价目表、聊天记录，
 * 裁掉边角就看不全了；X 上多是随手拍，裁一点无所谓。
 * 限高不裁的代价只是竖图会窄一些，而内容是完整的。
 */
/*
 * ⚠ 单图用 flex 不用 grid。
 *
 * 网格项在 1fr 轨道里默认 stretch，容器会被撑到满宽（608）而图只有 440 ——
 * 试过 justify-items:start，**没用**（实测容器仍是 608）。
 * 而那个容器是 <button>：图片两侧各 84px 看不见却点得着的死热区，
 * 用户点在空白处，画廊莫名其妙弹出来。
 *
 * flex 行容器里的项按内容定宽，天然就是我们要的。反正单图也用不上网格。
 */
.wb-images.is-single{display:flex;max-width:100%}
.wb-images.is-single .wb-image{
  padding-top:0;max-height:510px;background:none;
  display:flex;
}
.wb-images.is-single .wb-image img{
  position:static;width:auto;height:auto;max-width:100%;max-height:510px;
  object-fit:contain;border-radius:var(--radius);
}
/*
 * 超长图（高是宽的 2 倍以上）：裁成 3:4、从顶部对齐、右下角标「长图」。
 *
 * ⚠ 这里**故意不照抄 X**。X 只限高，一张 579×1199 在它那儿是 246 宽的一条竖缝 ——
 * 而论坛里的长图多半是长截图，那种宽度上的字根本没法读。
 * 裁成 3:4 之后有 382 宽，顶部那段（长截图的关键信息通常在最上面）能看清，
 * 角标告诉用户「点开还有」。
 */
.wb-images.is-single .wb-image.is-tall{
  max-height:none;padding-top:0;height:510px;width:382px;max-width:100%;
}
.wb-images.is-single .wb-image.is-tall img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:top center;
}
.wb-images.is-single .wb-image.is-tall::after{
  content:"长图";position:absolute;right:6px;bottom:6px;
  padding:1px 6px;border-radius:3px;font-size:11px;line-height:16px;
  background:rgba(0,0,0,.5);color:#fff;
}

/* ---------- 视频播放器 ---------- */
/* 微博的做法：容器占满卡片宽度、固定 16:9，视频用 contain 居中，
   竖屏视频两侧留黑边而不是把卡片撑成长条 */
.wb-video{
  position:relative;width:100%;margin-top:10px;
  aspect-ratio:16/9;max-height:480px;
  background:#000;border-radius:var(--radius);overflow:hidden;
  user-select:none;
}
.wb-video-el{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.wb-video-blank{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);background:linear-gradient(135deg,#2a2a2e,#3a3a40);
}

/* 起始状态：大播放键 + 时长角标 */
.wb-video-start{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.wb-video-start:hover{background:rgba(0,0,0,.08)}
.wb-video.is-started .wb-video-start{display:none}
.wb-video-badge{
  position:absolute;right:8px;bottom:8px;
  font-size:11.5px;color:#fff;background:rgba(0,0,0,.6);
  padding:1px 6px;border-radius:9px;pointer-events:none;
}
.wb-video.is-started .wb-video-badge{display:none}

/* 缓冲转圈 */
.wb-video-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wb-video-spinner i{
  width:34px;height:34px;border-radius:50%;display:block;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:wb-spin .8s linear infinite;
}
@keyframes wb-spin{to{transform:rotate(360deg)}}

/* 控制条：播放中悬停才显示，暂停时常驻 */
.wb-video-ctrl{
  position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,transparent);
  opacity:0;transform:translateY(6px);transition:.18s;pointer-events:none;
}
.wb-video.is-started .wb-video-ctrl{pointer-events:auto}
.wb-video.is-started:hover .wb-video-ctrl,
.wb-video.is-started.is-paused .wb-video-ctrl,
.wb-video.is-seeking .wb-video-ctrl{opacity:1;transform:none}

/* 进度条 */
.wb-video-seek{
  position:relative;height:14px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px;
}
.wb-video-seek::before{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.3);transition:height .15s;
}
.wb-video-seek i{position:absolute;left:0;height:3px;border-radius:2px;transition:height .15s}
.wb-video-seek .buffered{background:rgba(255,255,255,.45);width:0}
.wb-video-seek .played{background:var(--brand);width:0}
.wb-video-seek .handle{
  position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;
  margin-left:-5.5px;left:0;opacity:0;transition:opacity .15s;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.wb-video-seek:hover::before,.wb-video-seek:hover i{height:5px}
.wb-video-seek:hover .handle,.wb-video.is-seeking .handle{opacity:1}

/* 按钮行 */
.wb-video-row{display:flex;align-items:center;gap:2px;color:#fff}
.wb-video-gap{flex:1}
.wb-video-btn{
  width:30px;height:30px;border-radius:var(--radius);color:#fff;opacity:.92;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;flex:none;
}
.wb-video-btn:hover{background:rgba(255,255,255,.18);opacity:1}
.wb-video-btn.is-text{width:auto;padding:0 8px;font-size:12.5px}
.wb-video-time{font-size:12px;opacity:.9;margin-left:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-video-time b{font-weight:400}

/* 播放/暂停、全屏、静音的图标互斥显示 */
.ic-pause,.ic-exitfs,.ic-muted{display:none}
.wb-video.is-playing .ic-play{display:none}
.wb-video.is-playing .ic-pause{display:block}
.wb-video.is-full .ic-fs{display:none}
.wb-video.is-full .ic-exitfs{display:block}
.wb-video.is-muted .ic-vol{display:none}
.wb-video.is-muted .ic-muted{display:block}

/* 倍速菜单 */
.wb-video-pop{position:relative;display:flex;align-items:center;flex:none}
.wb-video-menu{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);border-radius:var(--radius-lg);padding:4px;min-width:76px;
  backdrop-filter:blur(6px);
}
.wb-video-menu button{
  display:block;width:100%;padding:6px 10px;border-radius:var(--radius);
  font-size:12.5px;color:#fff;opacity:.85;text-align:center;white-space:nowrap;
}
.wb-video-menu button:hover{background:rgba(255,255,255,.18);opacity:1}
.wb-video-menu button.is-on{color:var(--brand);opacity:1}

/* 音量滑块：悬停才展开，不占常驻宽度 */
.wb-video-slider{
  width:0;overflow:hidden;transition:width .18s;display:flex;align-items:center;
}
.wb-video-vol:hover .wb-video-slider,
.wb-video-vol:focus-within .wb-video-slider{width:62px}
.wb-video-slider input{
  width:56px;margin:0 3px;height:3px;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.35);border-radius:2px;outline:none;cursor:pointer;
}
.wb-video-slider input::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;
}
.wb-video-slider input::-moz-range-thumb{
  width:10px;height:10px;border:0;border-radius:50%;background:#fff;cursor:pointer;
}

/* 全屏时铺满屏幕，比例交给浏览器 */
.wb-video:fullscreen{aspect-ratio:auto;max-height:none;border-radius:0}
.wb-video:fullscreen .wb-video-el{height:100vh}
.wb-video:fullscreen .wb-video-ctrl{padding:26px 20px 14px}

/* 转发引用块里的视频略小一些 */
.wb-quote .wb-video{max-height:340px}

/* 操作栏：三等分，与微博一致 */
.wb-post-act{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:12px;border-top:1px solid var(--line-soft);
}
.wb-act{
  display:flex;align-items:center;justify-content:center;gap:6px;height:40px;
  font-size:13px;color:var(--txt-2);transition:.15s;
}
.wb-act:hover{color:var(--brand)}
.wb-act .ico{transition:transform .15s}
.wb-act:active .ico{transform:scale(.85)}
.wb-like.is-on{color:var(--brand)}
.wb-like.is-on .ico{fill:currentColor}
@keyframes wb-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.wb-like.is-anim .ico{animation:wb-pop .32s ease}

/* ══════════ 列表卡片里就地展开的评论区（仿微博） ══════════
   实测微博 2026-09-02：点操作条上的「评论」，卡片内就地展开
   输入框 → 按热度/按时间 → 前几条 → 查看全部 N 条评论 ›，再点一次收起。 */

/* ⚠ 展开时那个「评论」要亮起来。
   不给状态的话，一屏开了三个评论区之后，人分不清哪个是从哪张卡片点开的 ——
   而收起来只能靠再点一次同一个按钮。 */
.wb-act.is-on{color:var(--brand)}

/* ⚠ 底色要跟卡片正文**分开**。
   一样的白底会让这块读起来像是帖子内容的一部分 ——
   而它其实是别人说的话。微博也是给了一层浅灰。 */
.wb-icm{
  margin-top:-1px;border-top:1px solid var(--line-soft);
  /* ⚠ 兜底色用中性灰（127,127,127）而不是黑 —— 深色模式下
     再叠一层黑等于什么都没发生，这块就跟卡片糊成一片了。
     全站其他地方（.wb-audio 等）用的也是这个值。 */
  background:var(--bg-soft,rgba(127,127,127,.05));
  border-radius:0 0 12px 12px;
}
/* 就地展开这块里的评论框不用再画分隔线 —— 上面已经有卡片操作条那条了，
   两条挨在一起会出现一道 2px 的粗边 */
.wb-icm .wb-comment-form{border-bottom:0;padding-bottom:6px}

.wb-icm-hd{display:flex;align-items:center;gap:16px;padding:2px 16px 8px}
.wb-icm-hd button{
  font-size:13px;color:var(--txt-3);background:none;border:0;padding:0;cursor:pointer;
}
.wb-icm-hd button:hover{color:var(--txt-2)}
.wb-icm-hd button.is-active{color:var(--brand);font-weight:600}

.wb-icm-list:not(:empty){padding-bottom:4px}

.wb-icm-load,
.wb-icm-none{padding:14px 16px;font-size:13px;color:var(--txt-3);text-align:center}

/* 「查看全部 N 条评论 ›」—— 整行可点，热区别做成一个小箭头 */
.wb-icm-all{
  display:flex;align-items:center;gap:4px;
  padding:11px 16px;font-size:13.5px;color:var(--txt-2);
  border-top:1px solid var(--line-soft);
}
.wb-icm-all:hover{color:var(--brand)}
.wb-icm-all b{font-weight:600}
/* icon('chevron') 是朝下的，这里要朝右 */
.wb-icm-all .ico{transform:rotate(-90deg);margin-left:-1px}

/* 加载更多 */
.wb-loadmore{text-align:center;padding:6px 0 20px}
.wb-loadmore button{
  height:34px;padding:0 24px;border-radius:17px;background:var(--card);
  color:var(--txt-2);font-size:13px;box-shadow:var(--shadow);
}
.wb-loadmore button:hover{color:var(--brand)}
.wb-loadmore.is-loading button{color:var(--txt-3);pointer-events:none}

/* ---------- 7. 个人主页 ---------- */
.wb-profile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:var(--gap);overflow:hidden}
.wb-cover{
  position:relative;height:240px;background:linear-gradient(120deg,#ffd9a8,#ffb26b 55%,#ff9248);
  background-size:cover;background-position:center;
}
.wb-cover .wb-back{
  position:absolute;top:14px;left:14px;height:30px;padding:0 12px 0 8px;border-radius:15px;
  background:rgba(0,0,0,.3);color:#fff;display:inline-flex;align-items:center;gap:2px;font-size:13px;
  backdrop-filter:blur(4px);
}
.wb-cover-edit{
  position:absolute;right:14px;bottom:14px;height:28px;padding:0 12px;border-radius:14px;
  background:rgba(0,0,0,.3);color:#fff;font-size:12px;display:inline-flex;align-items:center;gap:4px;
}
/*
 * 访问量：封面右上角，跟左上角的「返回」左右对称、同一款胶囊。
 *
 * **底色不能省。**封面是用户自己传的图，可能是纯白的雪景 ——
 * 白字直接压上去就没了。半透明黑底 + 一点模糊，在任何图上都读得出来。
 */
.wb-cover-pv{
  position:absolute;top:14px;right:14px;height:30px;padding:0 13px;border-radius:15px;
  background:rgba(0,0,0,.3);color:#fff;font-size:13px;
  display:inline-flex;align-items:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* 不支持 backdrop-filter 的老浏览器：底色压深一点，保证读得出来 */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .wb-cover-pv{background:rgba(0,0,0,.45)}
}
.wb-profile-hd{padding:0 20px 16px;position:relative}
.wb-profile-avatar{
  position:relative;width:110px;height:110px;margin-top:-56px;border-radius:50%;
  border:4px solid var(--card);background:var(--card);
}
.wb-profile-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/*
 * ⚠ **这里不能写 width/height。**
 *
 * 描边环是 ::before 撑满整框、被图标里 81% 的圆压出来的一圈。盒子写死 22px
 * 而图标只有 14px 时，环就按 22px 画 —— 白边宽到 4.4px，像给角标套了个圈。
 * 尺寸改由图标自己定（见 pc/profile.php 里的 icon 大小）。
 *
 * 内缩 5px 是照微博量的：它主页头像 100px、角标 20px，右下各内缩 5px。
 * 我们头像 110px，同比例就是 22px 和 5px。
 */
.wb-profile-avatar .wb-v{right:5px;bottom:5px}
.wb-profile-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.wb-profile-name{display:flex;align-items:center;gap:7px;margin-top:10px}
.wb-profile-name .n{font-size:21px;font-weight:600}
.wb-profile-act{display:flex;gap:8px;padding-bottom:4px}
.wb-stats{display:flex;gap:22px;margin-top:10px}
.wb-stats a,.wb-stats span{display:flex;align-items:baseline;gap:4px;font-size:13px;color:var(--txt-2)}
.wb-stats b{font-size:16px;font-weight:600;color:var(--txt)}
.wb-stats a:hover b,.wb-stats a:hover{color:var(--brand)}
.wb-profile-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wb-profile-tags i{
  font-style:normal;font-size:12px;color:var(--brand);background:var(--brand-weak);
  padding:3px 9px;border-radius:11px;
}
.wb-profile-info{margin-top:11px;font-size:13.5px;color:var(--txt-2);line-height:1.9}
.wb-profile-info div{display:flex;align-items:center;gap:6px}
/*
 * 简介里的 @ 和主页上的网址，都跟正文里的 @ 用同一个色（--link）——
 * 同一个东西在两个地方长不一样，用户会以为是两种东西。
 * align-items 从 center 放成 flex-start：简介现在可能换行，
 * 居中会让图标飘到第二行中间去
 */
.wb-profile-info div{align-items:flex-start}
.wb-profile-info svg{flex:none;margin-top:5px}
.wb-profile-info .wb-at{color:var(--link)}
.wb-profile-site{color:var(--link);word-break:break-all}
.wb-profile-site:hover{text-decoration:underline}

.wb-profile-tabs{display:flex;border-top:1px solid var(--line-soft)}
.wb-profile-tabs a{
  flex:1;text-align:center;height:46px;line-height:46px;font-size:14.5px;
  color:var(--txt-2);position:relative;
}
.wb-profile-tabs a:hover{color:var(--txt)}
.wb-profile-tabs a.is-active{color:var(--brand);font-weight:600}
.wb-profile-tabs a.is-active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:28px;height:3px;border-radius:2px;background:var(--brand);
}
.wb-profile-filter{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;font-size:13px;color:var(--txt-2);
}

/* 用户列表页 */
.wb-userlist .wb-user-row{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.wb-userlist .wb-user-row:last-child{border-bottom:0}
.wb-userlist .wb-user-avatar img{width:50px;height:50px}
.wb-userlist .wb-user-name{font-size:15px}

/* ---------- 8. 消息中心 ---------- */
.wb-msg-tabs{display:flex;gap:4px;padding:0 12px;height:46px;align-items:center}
.wb-msg-tabs a{padding:0 12px;height:46px;line-height:46px;font-size:14px;color:var(--txt-2);position:relative}
.wb-msg-tabs a.is-active{color:var(--brand);font-weight:600}
.wb-msg-tabs a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--brand)}
.wb-msg-tabs .wb-msg-readall{margin-left:auto;font-size:12.5px;color:var(--txt-3)}
.wb-msg-tabs .wb-msg-readall:hover{color:var(--brand)}

/*
 * ⚠ .wb-notice 是**消息通知列表条目**的类，别拿它去命名別的东西。
 * 公告通栏曾经占过这个名字，结果每一条通知都继承了
 * position:fixed;top:0 —— 整个消息列表被钉到了页面顶上，
 * 而消息页看着只是“空的”，一点报错都没有。通栏现在叫 .wb-annbar。
 */
.wb-notice{display:flex;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-soft);transition:.15s}
.wb-notice:last-child{border-bottom:0}
.wb-notice:hover{background:var(--hover)}
.wb-notice.is-unread{background:var(--brand-weak)}
.wb-notice .wb-avatar img{width:40px;height:40px}
.wb-notice-body{flex:1;min-width:0}
.wb-notice-line{font-size:14px;line-height:1.6}
.wb-notice-line a{font-weight:600}
.wb-notice-line a:hover{color:var(--brand)}
.wb-notice-line em{font-style:normal;color:var(--txt-2)}
/* 裁剪必须放在内层元素上：-webkit-line-clamp 遇到 padding-bottom 会把下一行
   漏在内边距里，看起来像「切了一半的字」 */
.wb-notice-quote{
  display:block;margin-top:7px;padding:8px 10px;background:var(--bg);
  border-radius:var(--radius);font-size:13px;color:var(--txt-2);line-height:1.6;
}
.wb-notice-quote span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.wb-notice-time{font-size:12px;color:var(--txt-3);margin-top:6px}
.wb-notice-act{flex:none;align-self:center}

/* 私信 */
.wb-conv{display:flex;gap:11px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.wb-conv:hover{background:var(--hover)}
.wb-conv.is-active{background:var(--brand-weak)}
.wb-conv img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.wb-conv-main{flex:1;min-width:0}
.wb-conv-name{font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.wb-conv-name em{font-style:normal;font-size:11.5px;color:var(--txt-3);font-weight:400}
.wb-conv-last{font-size:12.5px;color:var(--txt-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-conv-unread{
  min-width:18px;height:18px;padding:0 5px;background:#ff3b30;color:#fff;border-radius:9px;
  font-size:11px;line-height:18px;text-align:center;flex:none;
}

.wb-chat{display:flex;flex-direction:column;height:calc(100vh - var(--top-h) - var(--imp-h) - 30px)}
.wb-chat-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.wb-chat-hd img{width:34px;height:34px;border-radius:50%}
/*
 * 窄屏：这一页不走布局那条通用顶栏（控制器传 narrowNav=false），
 * .wb-chat-hd 自己吸顶当顶栏用 —— 它比通用那条多一个对方头像。
 * 高度也要重算：没有宽屏顶栏，能用的就是整个视口。
 */
@media (max-width:1024px){
  body.wb-app .wb-chat{height:calc(100dvh - var(--imp-h))}
  body.wb-app .wb-chat-hd{position:sticky;top:0;z-index:60;background:var(--card)}
}
.wb-chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.wb-bubble{display:flex;gap:9px;max-width:76%}
.wb-bubble img{width:34px;height:34px;border-radius:50%;flex:none}
.wb-bubble-txt{
  padding:9px 12px;border-radius:4px 12px 12px 12px;background:var(--bg);
  font-size:14px;line-height:1.6;word-break:break-word;
}
.wb-bubble.is-mine{align-self:flex-end;flex-direction:row-reverse}
.wb-bubble.is-mine .wb-bubble-txt{background:var(--brand);color:#fff;border-radius:12px 4px 12px 12px}
.wb-bubble-time{font-size:11px;color:var(--txt-3);text-align:center;margin:2px 0}
.wb-chat-ft{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft)}
.wb-chat-ft .wb-ctool{height:40px;padding:0 8px;justify-content:center}
.wb-chat-ft textarea{
  flex:1;border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px 12px;
  resize:none;outline:none;background:var(--bg);font-size:14px;min-height:40px;max-height:120px;
}
.wb-chat-ft textarea:focus{border-color:var(--brand);background:var(--card)}

/* ---------- 评论 ---------- */
.wb-comment-hd{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.wb-comment-hd a{font-size:13.5px;color:var(--txt-2)}
.wb-comment-hd a.is-active{color:var(--brand);font-weight:600}
.wb-comment-hd span{margin-left:auto;font-size:12.5px;color:var(--txt-3)}
.wb-comment-form{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.wb-comment-form img{width:36px;height:36px;border-radius:50%;flex:none}
/* position:relative 是给联想面板当锚点的 —— .wb-suggest 是 absolute，
   不给它一个定位祖先，面板会跑到页面最外层去 */
.wb-comment-form .box{flex:1;position:relative}
/* 基础的 .wb-suggest 那对 left/right:16px 是照发帖框的内边距调的；
   评论框的 .box 本身就已经是输入区的宽度了，再缩 16px 会两边各凹一块 */
.wb-comment-form .wb-suggest{left:0;right:0}
@media (max-width:1024px){
body.wb-app .wb-comment-form .wb-suggest{left:0;right:0}
}
.wb-comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px 12px;
  resize:none;outline:none;background:var(--bg);font-size:14px;min-height:38px;
}
.wb-comment-form textarea:focus{border-color:var(--brand);background:var(--card)}
/* ⚠ 不用 space-between —— 右边那一簇靠自己的 margin-left:auto 贴右。
   space-between 的问题在换行的那一刻：第二行只剩一个项时它按 flex-start 排，
   于是「评论」孤零零掉到左下角。auto 边距换行后照样管用。 */
.wb-comment-form .act{display:flex;align-items:center;gap:10px;margin-top:8px}
/* 计数器 + 取消 + 评论 是**一簇**，放不下时整簇一起换行、仍然靠右 */
.wb-cact{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.wb-comment-tools{display:flex;align-items:center;gap:2px}
.wb-comment-tools .wb-ctool{padding:4px 7px}
.wb-comment-guest{font-size:13px;color:var(--txt-3)}
.wb-comment-guest a{color:var(--brand)}

/* 评论配图。会员专属那个按钮不置灰——灰掉像是坏了，得让人想点 */
/* 会员专属的按钮：跟全站会员标识同一套金色，不置灰——
   灰掉像是坏了，得让人想点一下才知道能买 */
.wb-comment-tools .wb-ctool.is-vip{color:#c8961e;position:relative;overflow:visible}
.wb-comment-tools .wb-ctool.is-vip:hover{color:#a87a12;background:rgba(200,150,30,.1)}
[data-theme="dark"] .wb-comment-tools .wb-ctool.is-vip{color:#e8c264}
/* 右上角那枚角标。压在图标边角上、稍微出界一点，才像「贴上去的」而不是挤在里面 */
.wb-ctool-vip{
  position:absolute;top:1px;right:1px;
  font-size:10px;line-height:1;font-style:normal;
  pointer-events:none;text-shadow:0 0 2px var(--card),0 0 2px var(--card);
}
.wb-cimg-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wb-cimg-preview figure{
  position:relative;margin:0;width:76px;height:76px;border-radius:var(--radius);
  overflow:hidden;background:var(--line-soft);
}
.wb-cimg-preview img{width:100%;height:100%;object-fit:cover}
.wb-cimg-preview .del{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
}

/*
 * 评论里已发出来的图。微博的做法是**一枚小方图**，点开才看大图——
 * 评论区本来就是快速你来我往的地方，缩略图一大，一屏就看不下几条了。
 * 所以这里不走九宫格，固定 120px 见方，多张就横着排、放不下换行。
 */
.wb-cimgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.wb-cimgs .wb-image{
  /* 基础 .wb-image 是「padding-top:100% 撑出方框 + 图绝对定位」那一套，
     按父容器宽度算比例。评论图要的是固定 120 见方，两条都得归零，
     不然 padding 会照着中栏宽度撑出好几百像素高 */
  width:120px;height:120px;padding-top:0;flex:none;
  border-radius:var(--radius);overflow:hidden;
  background:var(--line-soft);display:block;cursor:zoom-in;
}
.wb-cimgs .wb-image img{
  position:static;inset:auto;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .2s;
}
.wb-cimgs .wb-image:hover img{transform:scale(1.03)}
/* 楼中楼更窄，图再跟着 120 就把那块灰底撑满了 */
.wb-subcomment .wb-cimgs .wb-image{width:84px;height:84px}

.wb-comment{display:flex;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.wb-comment:last-child{border-bottom:0}
.wb-comment img.ava{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover}
.wb-comment-main{flex:1;min-width:0}
.wb-comment-name{font-size:13.5px;font-weight:600}
.wb-comment-name:hover{color:var(--brand)}
.wb-comment-text{font-size:14px;line-height:1.7;margin-top:2px;word-break:break-word}
/*
 * ⚠ 这一行必须 **flex-wrap + 子项 flex:none + nowrap**，三样一个不能少。
 *
 * 只写 display:flex 的话，空间不够时 flex 子项会被**压得比文字还窄**，
 * 于是「回复」被拆成上下两行的「回」「复」，「置顶」「删除」同理 ——
 * 整行变成一排竖着的单字，而且行高翻倍。
 *
 * 手机上特别容易触发：屏幕窄，而这一行最多要装
 * 时间 / 楼层 / IP 属地 / 回复 / 赞 / 置顶 / 删除 七项，
 * 而 IP 属地可能是 Mozambique 这种很长的国名。
 *
 * 正确的降级是**整项换行**，不是把每一项压扁。
 */
.wb-comment-ft{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;
  margin-top:6px;font-size:12.5px;color:var(--txt-3);
}
.wb-comment-ft > *{flex:none;white-space:nowrap}

/*
 * 手机上把间隙收一档：七项 × 16px 在 375px 宽屏上
 * 光间隔就吃掉 96px，本来不用换行的也被挤换行了。
 */
@media (max-width:768px){
  .wb-comment-ft{gap:6px 13px}
  .wb-subcomment .wb-comment-ft{gap:5px 11px}
}
.wb-comment-ft button{color:inherit;display:inline-flex;align-items:center;gap:3px}
.wb-comment-ft button:hover{color:var(--brand)}
.wb-comment-ft .wb-like.is-on{color:var(--brand)}
.wb-subcomments{margin-top:9px;padding:4px 10px;background:var(--bg);border-radius:var(--radius)}
/*
 * 楼中楼现在每条都带自己的操作行（时间/回复/赞），所以条与条之间要分开 ——
 * 以前只有一行纯文字，挤在一起还看得下去，加了按钮再不分隔就糊成一片。
 */
.wb-subcomment{padding:7px 0;border-bottom:1px solid var(--line)}
.wb-subcomment:last-of-type{border-bottom:0}
.wb-subcomment-text{font-size:13px;line-height:1.75;color:var(--txt)}
.wb-subcomment-text a{color:var(--link);font-weight:500}
/* 子评论的操作行比主楼的再收一点：间距小一档、颜色更淡，主次才分得开 */
.wb-subcomment .wb-comment-ft{gap:5px 14px;margin-top:2px;font-size:12px}

.wb-subcomment-more{
  display:inline-flex;align-items:center;gap:3px;
  margin:6px 0 4px;padding:0;border:0;background:none;
  font-size:12.5px;color:var(--link);cursor:pointer;
}
.wb-subcomment-more:hover{opacity:.75}
.wb-subcomment-more b{font-weight:600}
.wb-subcomment-more[hidden]{display:none}

/* ---------- 登录页 ---------- */
.wb-auth{max-width:400px;margin:0 auto;background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:32px 32px 28px}
.wb-auth h2{font-size:20px;text-align:center;margin-bottom:6px}
.wb-auth .sub{text-align:center;color:var(--txt-3);font-size:13px;margin-bottom:22px}
.wb-field{margin-bottom:14px}
.wb-field label{display:block;font-size:13px;color:var(--txt-2);margin-bottom:6px}
/* 用 :not() 排掉勾选框 —— 否则 width:100%;height:40px 会把复选框撑成一个巨大的方块 */
.wb-field input:not([type=checkbox]):not([type=radio]),
.wb-field textarea,.wb-field select{
  width:100%;height:40px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--bg);font-size:14px;
}
.wb-field textarea{height:auto;padding:9px 12px;resize:vertical;min-height:76px}
.wb-field input:not([type=checkbox]):not([type=radio]):focus,.wb-field textarea:focus{border-color:var(--brand);background:var(--card)}
.wb-auth .wb-btn{width:100%;height:40px;border-radius:var(--radius-lg);font-size:15px;margin-top:6px}
.wb-auth-alt{text-align:center;font-size:13px;color:var(--txt-3);margin-top:16px}

/* ---------- 社交登录 ---------- */
/*
 * 登录页底部那一排。用品牌色描边的文字按钮，不放各家 Logo ——
 * 这是要卖出去的源码，把 QQ / 微信的商标图打包进去是个授权问题。
 * 每个按钮的品牌色由内联的 --sc 变量给，所以这里只写结构。
 */
.wb-social{margin-top:20px}
/* 「其他登录方式」两边各一条线。用伪元素而不是三个盒子，
   文字长度变了也不用改宽度 */
.wb-social-hd{display:flex;align-items:center;gap:10px;color:var(--txt-3);font-size:12.5px}
.wb-social-hd::before,.wb-social-hd::after{content:"";flex:1;height:1px;background:var(--line)}
.wb-social-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wb-social-btn{
  flex:1 1 calc(50% - 4px);min-width:0;height:38px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--sc,#888);border-radius:var(--radius-lg);
  color:var(--sc,#888);font-size:13.5px;background:transparent;
  transition:background .15s,color .15s;
}
.wb-social-btn em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-social-btn:hover{background:var(--sc,#888);color:#fff}
/* 只有一个登录方式时不要拉成半行宽的孤零零一块 */
.wb-social-btns > .wb-social-btn:only-child{flex:1 1 100%}
.wb-social-tip{margin-top:10px;font-size:12px;line-height:1.7;color:var(--txt-3);text-align:center}

/* 「账号安全」里的绑定管理 */
.wb-social-list{display:flex;flex-direction:column;gap:10px}
.wb-social-row{display:flex;align-items:center;gap:10px}
/* 品牌色只用在这个小标签上，整行都染色会让设置页变成调色板 */
.wb-social-tag{
  flex:0 0 auto;min-width:54px;height:26px;padding:0 10px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sc,#888);color:#fff;font-size:12.5px;font-weight:600;
}
.wb-social-who{flex:1;min-width:0;font-size:13px;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-social-who i{font-style:normal;color:var(--txt-3);font-size:12px;margin-left:6px}
.wb-social-row .wb-btn{flex:0 0 auto;height:28px;padding:0 14px;font-size:12.5px}
/* 提示里的警示态：没设密码就解绑会把自己锁在门外，这条得看得见 */
.wb-set-tip.is-warn{color:var(--danger,#e6432e)}

@media (max-width:768px){
  /* 手机上一行两个太挤，尤其「Facebook」「microsoft」这种长名字 */
  .wb-social-btn{flex:1 1 100%}
}

.wb-auth-alt a{color:var(--brand)}
.wb-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-2);cursor:pointer}
.wb-check > span{flex:1;min-width:0;line-height:1.6}

/*
 * 输入框下面的一行说明（目前是邀请码那条，站长自己填的）。
 *
 * 用 --txt-2 而不是更淡的 --txt-3：--txt-3 是给「选填」这类可有可无的
 * 附注用的，而这一段是没有邀请码的访客**唯一的出路** —— 看不见它，
 * 这个人就只能关掉页面。里面的链接再用主色顶上去。
 */
.wb-field-tip{margin:7px 2px 0;font-size:12px;line-height:1.7;color:var(--txt-2)}
.wb-field-tip a{color:var(--brand)}
.wb-field-tip a:hover{text-decoration:underline}
/* 站长填的是自由 HTML，可能贴一条长链接进来；不换行的话会把表单撑宽 */
.wb-invite-tip{overflow-wrap:anywhere}

/* ---------- 弹层 / 提示 ---------- */
/*
 * 轻提示的层级必须压过所有弹层。
 *
 * 原来是 300，比弹窗（350）和看图器（400）都低 —— 在弹窗里做任何操作，
 * 提示都会被弹窗盖掉一半甚至完全看不见，用户只知道点了没反应。
 * 它是全站的即时反馈，理应站在最上面，所以给到 500。
 */
.wb-toast{
  position:fixed;left:50%;top:80px;transform:translateX(-50%);z-index:500;
  background:rgba(0,0,0,.82);color:#fff;padding:9px 18px;border-radius:var(--radius-lg);
  font-size:13.5px;animation:wb-fade .2s ease;
}
/* 注意：这个关键帧带 translate(-50%) 是为了配合轻提示的 left:50% 居中，
   只能用在 .wb-toast 上。别的元素要淡入请用下面的 wb-slide-in。 */
@keyframes wb-fade{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 新发布的卡片插入信息流时的淡入，不含任何水平位移 */
@keyframes wb-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.wb-viewer{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
/*
 * ⚠ touch-action 必须交出横向。
 *
 * 不写的话浏览器会把横向的手势判成「页面滚动 / 双指缩放」，
 * 在 pointermove 里 preventDefault 已经晚了 —— 手势一旦被浏览器接管，
 * 后面的 pointer 事件直接不再派发，表现是「手机上怎么划都不换图」。
 * 留下 pan-y：竖着划还是页面滚动，那是用户想退出这张图的常规动作。
 */
.wb-viewer img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.wb-viewer img{max-width:88vw;max-height:88vh;object-fit:contain}
.wb-viewer-close{position:absolute;top:20px;right:24px;color:#fff;opacity:.8}
.wb-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;opacity:.6;padding:20px}
.wb-viewer-nav:hover{opacity:1}
.wb-viewer-nav.prev{left:14px}
.wb-viewer-nav.next{right:14px;transform:translateY(-50%) rotate(180deg)}
.wb-viewer-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;opacity:.7;font-size:13px}

.wb-modal{position:fixed;inset:0;z-index:350;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.wb-modal-panel{width:460px;max-width:92vw;background:var(--card);border-radius:var(--radius-lg);overflow:hidden}
.wb-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.wb-modal-hd h2,.wb-modal-hd h3{font-size:16px;font-weight:600}
.wb-modal-bd{padding:14px 16px}
.wb-modal-bd textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);padding:9px 12px;
  resize:none;outline:none;background:var(--bg);font-size:14px;min-height:70px;
}
.wb-modal-bd textarea:focus{border-color:var(--brand);background:var(--card)}
.wb-quote.is-static{margin-top:12px;font-size:13px;color:var(--txt-2)}
.wb-modal-ft{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-soft)}

/* 错误页 */
.wb-error{text-align:center;padding:80px 20px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.wb-error h1{font-size:56px;color:var(--brand);font-weight:700}
.wb-error p{color:var(--txt-2);margin:10px 0 22px}

/* ==========================================================================
   9. 移动端（对标 m.weibo.cn）—— 独立信息架构，不是 PC 的等比缩小
   ========================================================================== */
/* 移动端整体下推：横幅是 fixed 的，不留白就会盖住第一屏 */
@media (max-width:1024px){
body.wb-app.has-imp{padding-top:var(--imp-h)}
}
@media (max-width:1024px){
body.wb-app{
  /*
   * --brand-m 由 layout 从后台设置注进来（见 site.php）。
   * 这里的 #ff8200 是**兜底**：设置里被清空、或者这段 CSS 被单独拿去用时的落点，
   * 要跟 Setting::DEFAULTS['theme_color_m'] 保持一致，否则「没设过」的站
   * 首屏会先闪一下另一个颜色。
   *
   * --link 是「话题 / @」的颜色，跟主色是两回事。移动端原来单独覆盖成偏蓝的
   * #3a94e5（当初对标微博留下的）—— 主色换成橙之后，一屏橙色调里
   * 蹦出蓝色的 #话题# 和 @某人，两端的配色逻辑也对不上。
   * 现在不再覆盖，跟桌面端同一个值（#eb7350）。
   */
  --bg:#f4f4f4;--brand:var(--brand-m,#ff8200);
  padding-bottom:calc(env(safe-area-inset-bottom) + 6px);
}
}
@media (max-width:1024px){
[data-theme="dark"] body.wb-app{--bg:#0f0f11}
}

.wb-m-top{
  position:sticky;top:var(--imp-h);z-index:60;background:var(--card);
  border-bottom:1px solid var(--line);
}
.wb-m-bar{display:flex;align-items:center;gap:10px;padding:8px 12px}
/* 站名占左上角。改之前这儿是头像 + 一条横贯的搜索框，
   移动端首页一个字的品牌都没有 —— 而这是拿去卖的源码 */
.wb-m-brand{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  font-size:16px;font-weight:600;color:var(--txt);
}
/*
 * ⚠ 省略号挂在**文字那个 span** 上，不在 <a> 上。
 *
 * 有了圆标之后 <a> 是个 flex 容器 —— overflow/text-overflow 对
 * flex 容器不起作用，站名长的站会直接把右边那几个图标顶出去。
 */
.wb-m-brand-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 圆标：桌面端是 32×32，顶栏矮所以收到 24 —— 图标跟着 22→16 */
.wb-m-brand-mark{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
/*
 * ⚠ 自定义 logo 要**同时限高和限宽**。
 *
 * 只限高的话，一张很扁的横版 logo（很多站的 logo 就是长条）
 * 会把右边「发布 / 搜索 / 消息 / 头像」整排顶出屏幕 ——
 * 而那几个是这一页仅有的操作入口。
 */
.wb-m-brand img{max-height:24px;max-width:132px;width:auto;object-fit:contain;display:block}

/*
 * 顶栏最右那个头像 —— 账号抽屉的唯一入口，根页面和内页都在这个位置。
 * 全局 reset 已经把 button 的背景边框清掉了，这里只管尺寸和裁圆。
 */
.wb-m-me{
  flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.wb-m-me img{width:100%;height:100%;object-fit:cover;display:block}
.wb-m-me.is-guest{background:var(--bg);color:var(--txt-3)}
/* 顶栏的图标组。**不叫 wb-m-act** —— 卡片的操作条曾经占着那个名字，
   而它是 42px 高、带上边框的横条，泄漏过来会把这里的 <a> 撑到 41px，
   未读红点按 <a> 顶边定位，就飘到图标上方去了。
   （卡片合并之后那条改叫 wb-post-act，但这个名字不必改回去 —— 
     wb-m-act 已经作为「别再用这个名字」的记号留在测试里。） */
.wb-m-topact{display:flex;align-items:center;gap:12px;color:var(--txt-2);position:relative}
/* 夜间模式那个是 <button>，跟旁边两个 <a> 一样按图标对齐即可
   （全局 reset 已经把 button 的背景、边框、内边距清掉了） */
.wb-m-topact > a,
.wb-m-topact > button{position:relative;display:flex}
/* 基础规则的 top/right 是按 PC 导航 64px 的宽度调的，
   移动端图标只有 22px，直接套会正好盖在图标中间，所以这里单独给负偏移 */
.wb-m-topact .wb-badge{top:-6px;right:-8px}

.wb-m-tabs{display:flex;gap:2px;overflow-x:auto;padding:0 8px;scrollbar-width:none}
.wb-m-tabs::-webkit-scrollbar{display:none}
.wb-m-tabs a{
  flex:none;padding:0 11px;height:40px;line-height:40px;font-size:15px;color:var(--txt-2);
  position:relative;white-space:nowrap;
}
.wb-m-tabs a.is-active{color:var(--txt);font-weight:600}
.wb-m-tabs a.is-active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:5px;
  width:18px;height:3px;border-radius:2px;background:var(--brand);
}

/* 触屏没有 hover，控制条改成「播放后常显、点画面收起」 */
@media (max-width:1024px){
body.wb-app .wb-video.is-started .wb-video-ctrl{opacity:1;transform:none}
}
@media (max-width:1024px){
body.wb-app .wb-video.is-started.is-hidectrl .wb-video-ctrl{opacity:0;transform:translateY(6px)}
}
@media (max-width:1024px){
body.wb-app .wb-video-btn{width:34px;height:34px}
}
@media (max-width:1024px){
body.wb-app .wb-video-vol{display:none}   /* 手机音量交给系统音量键 */
}

/* 移动端浮动发布按钮 */
.wb-m-fab{
  position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:70;
  width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  /*
   * ⚠ 阴影用中性黑，别写死某个颜色。
   *
   * 这里原来是 rgba(58,148,229,.4) —— 一圈**蓝色**光晕，是主色还是蓝色那会儿
   * 留下的。主色早就改成橙色（而且站长在后台还能再改），于是橙按钮底下
   * 一直挂着一圈蓝边。写死颜色的阴影只对某一套配色成立，中性黑对所有配色都成立。
   */
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
@media (max-width:1024px){
body.wb-app.no-tabbar .wb-m-fab{bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* 移动端底部 TabBar（后台可关） */
.wb-m-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;height:calc(52px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--card);border-top:1px solid var(--line);display:flex;
}
.wb-m-tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10.5px;color:var(--txt-3);position:relative;
}
.wb-m-tabbar a.is-active{color:var(--brand)}
.wb-m-tabbar .wb-badge{top:2px;right:calc(50% - 21px)}

/* 移动端个人页 */
.wb-m-profile{background:var(--card)}
/*
 * 没传封面时的默认底。**跟着主色走**，别写死颜色 ——
 * 桌面端那张用户卡的封面早就是 linear-gradient(135deg, var(--brand), #ffb066)，
 * 这里当初写死了旧的移动端蓝，主色一换，没传封面的用户在手机上
 * 就会顶着一条跟全站不搭的蓝横幅，而站长在后台怎么调主色都不动。
 */
.wb-m-profile-cover{height:150px;background:linear-gradient(120deg,var(--brand),#ffb066);background-size:cover;background-position:center;position:relative}
.wb-m-profile-nav{
  position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;color:#fff;
}
.wb-m-profile-navr{display:flex;align-items:center;gap:6px}
/* 白色图标压在封面图上，深浅封面都得看得见 —— 所以给一点半透明底 */
.wb-m-profile-more{
  width:30px;height:30px;border:0;padding:0;border-radius:50%;
  background:rgba(0,0,0,.28);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.wb-m-profile-navr .wb-tool-menu{position:relative}
.wb-m-profile-pv{
  /* 右下角。左下角是头像挂出来的位置，放那儿会被头像压住 —— 试过 */
  position:absolute;right:12px;bottom:10px;height:26px;padding:0 11px;border-radius:13px;
  background:rgba(0,0,0,.3);color:#fff;font-size:12px;
  display:inline-flex;align-items:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.wb-m-profile-bd{padding:0 14px 14px;position:relative}
.wb-m-profile-bd .ava{width:72px;height:72px;border-radius:50%;border:3px solid var(--card);margin-top:-36px;position:relative}
.wb-m-profile-bd .ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/*
 * ⚠ 认证徽章要往里收，不能贴在方框的角上。
 *
 * .ava 是个 72×72 的**方块**加 border-radius:50%。.wb-v 的基准是
 * right:-3px / bottom:-3px —— 那是方框的右下角，而方角在圆**外面**：
 * 圆在 45° 方向比方角内缩 r×(1−1/√2) ≈ 0.29r，72px 的头像就是十来个像素。
 * 于是徽章悬在角落的空处，看着像是「往右飘出去了」。
 *
 * 3px 让徽章的外角正好落在圆弧上。头像越大要收得越多 ——
 * 宽屏那份（.wb-profile-avatar）早就是这么处理的，用的是 5px。
 */
.wb-m-profile-bd .ava .wb-v{right:3px;bottom:3px}
.wb-m-profile-name{display:flex;align-items:center;gap:6px;margin-top:8px}
.wb-m-profile-name .n{font-size:18px;font-weight:600}
.wb-m-profile-bio{font-size:13px;color:var(--txt-2);margin-top:5px;line-height:1.6}
.wb-m-profile-bio .wb-at{color:var(--link)}
.wb-m-profile-site{
  display:flex;align-items:center;gap:4px;margin-top:4px;font-size:13px;color:var(--link);
}
.wb-m-profile-site svg{flex:none}
.wb-m-profile-stat{display:flex;align-items:center;gap:22px;margin-top:12px}
.wb-m-profile-stat a{text-align:left}
.wb-m-profile-stat b{display:block;font-size:16px;font-weight:600}
.wb-m-profile-stat span{font-size:12px;color:var(--txt-3)}
.wb-m-profile-stat .act{margin-left:auto}
.wb-m-profile-tabs{display:flex;background:var(--card);border-top:1px solid var(--line-soft);margin-top:4px}
.wb-m-profile-tabs a{flex:1;text-align:center;height:42px;line-height:42px;font-size:14px;color:var(--txt-2);position:relative}
.wb-m-profile-tabs a.is-active{color:var(--brand);font-weight:600}
.wb-m-profile-tabs a.is-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:4px;width:20px;height:3px;border-radius:2px;background:var(--brand)}

/* 移动端消息页 */
/*
 * ════════════════════════════════════════════════════════════════
 *  .wb-m-* 这个前缀现在是什么意思
 * ════════════════════════════════════════════════════════════════
 *
 * 它曾经的意思是「移动端模板专用」—— 那时全站有 pc/ 和 mobile/ 两套模板，
 * 服务端按 UA 挑一套，这些类只会出现在移动那套里。
 *
 * 改成自适应之后含义变了：**只在窄屏露面的构件**。HTML 里一直都在，
 * 由 app.css 末尾那两段媒体查询决定谁显示（1024/1025 这条线）。
 *
 * 没有把它整体改名成 wb-narrow-*，是因为那要动三十多个类名、
 * 一百多条规则，还有模板、JS 和测试 —— 换来的只是名字好听一点，
 * 而每一处都是可能改漏的地方。这段说明比那次重命名便宜也可靠。
 *
 * ⚠ 但**名副其实这件事还是要守**：搜索落地页那一组（原来叫 wb-m-sl-*）
 * 合并模板之后宽屏也在用，前缀就成了错的，已经改叫 wb-sl-*。
 * 以后再有这种「窄屏专属变成两端共用」的，也照这样把 m 去掉。
 */
.wb-m-nav{
  /*
   * ⚠ top 吃 --imp-h，不能写死 0。
   *
   * 顶上挂了横幅（站点公告 / 身份切换）时，那条是 fixed 的。
   * 写 0 的话一滚动这条顶栏就钻到横幅底下 **整条看不见** ——
   * 而它里面装的是返回键和页面标题，盖掉之后在手机上就退不回上一页。
   * 没挂横幅时 --imp-h 本来就是 0px，写这一笔不花代价。
   *（落地页的窄屏顶栏和 .wb-m-top 早就是这么写的，只是漏了这两处。）
   */
  position:sticky;top:var(--imp-h);z-index:60;height:46px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
}
.wb-m-nav h1,.wb-m-nav .wb-m-nav-t{font-size:16px;font-weight:600}
.wb-m-nav-back{flex:none;display:flex;color:var(--txt-2)}
/*
 * ⚠ 内页标题用绝对定位居中，不能靠 flex 撑。
 * 左边是 22px 的箭头，右边是 30px 的头像（还可能加上页面自己的按钮）——
 * 两头不等宽，flex:1 + text-align:center 会让标题肉眼可见地偏左。
 */
/*
 * ⚠ 这里**不能**再写一条 .wb-m-nav{position:relative}。
 *
 * 顶栏在上面已经声明过 position:sticky 了。同权重的选择器后来居上 ——
 * 补一条 relative 就把吸顶顶掉了，而且不报错、页面照常渲染。
 *
 * 后果是「个人中心」「每日签到」「账号设置」这些带标签条的页面：
 * 标签条是 sticky（top: --imp-h + 46px、z-index 30），顶栏是 z-index 60，
 * 顶栏一旦不吸顶就跟着内容往上走，标签条停在原位、被顶栏盖掉小半行 ——
 * 看着像「公告条把文字挡住了」，其实跟公告条没关系。
 *
 * 而这条 relative 本来就是多余的：sticky 不是 static，
 * 它自己就是绝对定位子元素的包含块，标题照样以它为基准居中。
 */
.wb-m-nav-t{
  position:absolute;left:50%;transform:translateX(-50%);max-width:56%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-m-nav-r{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--txt-2)}
.wb-m-nav-r > a,.wb-m-nav-r > button{display:flex}
/* ---------- 窄屏账号抽屉 ---------- */
/*
 * 从**右边**推进来 —— 触发点（顶栏最右那个头像）在右边，出现方向就该在右边。
 * 另一个原因是 iOS Safari 从屏幕左缘往右划是浏览器后退：左侧抽屉哪天想加
 * 边缘滑动就会跟系统手势打架，而那种冲突修不好。
 *
 * z-index 站在 220/215：底栏和顶栏都是 60，图片查看器 400 —— 抽屉要压住前者，
 * 但不能压住查看器（查看器打开时抽屉不可能开着，真撞上也是查看器该在上面）。
 *
 * 宽度 320：里面是 4 列网格，减掉两边 14px 内边距和 3 条 8px 间距，
 * 每格 61px —— 放得下一个 21px 图标加两到四个 11px 的字。
 * 再窄就得降成 3 列，一屏就少三个入口。
 */
.wb-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:220;
  /*
   * 毛玻璃。backdrop-filter 模糊的是**背后已经画好的内容**，配上半透明底色，
   * 底下的颜色就会透上来给面板染色 —— 橙色的红包卡、悬浮键从下面经过时，
   * 面板会泛出一点暖调，这是它跟「一块灰玻璃」的区别。
   *
   * ⚠ saturate 不能省。只 blur 的话透上来的颜色会发灰、看着脏；
   * saturate(180%) 把它重新提饱和，才有「玻璃」的通透感（苹果那套的一半功劳在这儿）。
   *
   * -webkit- 前缀留着：新版 Chromium 已经不需要，但 iOS 15 以下只认带前缀的，
   * 而 iOS 正是最容易看到这个效果的地方。
   */
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  /*
   * ⚠ visibility 不能省。
   * 光靠 transform 挪出屏幕的话，抽屉收着的时候还在无障碍树里、Tab 键能走进去 ——
   * 焦点跑到一个看不见的菜单里，屏幕上什么反应都没有。
   * 它必须跟 transform 一起过渡，否则会立刻生效、把滑出去的动画切掉。
   */
  transform:translateX(100%);visibility:hidden;
  transition:transform .22s ease,visibility .22s ease;
}
body.wb-drawer-open .wb-drawer{transform:none;visibility:visible;box-shadow:-6px 0 26px rgba(0,0,0,.16)}
/*
 * ⚠ 不支持 backdrop-filter 时必须退回不透明底。
 *
 * 不退的话半透明就是**纯半透明** —— 底下那一页的文字会直接透过来跟菜单叠在一起，
 * 整个抽屉没法读。这是个「要么全有要么全无」的效果，没有中间态。
 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wb-drawer{background:var(--card)}
}

.wb-drawer-scrim{
  /*
   * 比别处的遮罩淡（.42 → .24）：抽屉是靠透背后的东西吃颜色的，
   * 遮罩压得太黑，透上来的就只剩一片灰，毛玻璃等于白做。
   */
  position:fixed;inset:0;z-index:215;background:rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
}
body.wb-drawer-open .wb-drawer-scrim{opacity:1;visibility:visible}
/* 抽屉开着时锁住背景 —— 不然手指在菜单上滑，滚的是底下那一页 */
body.wb-drawer-open{overflow:hidden}
/* 宽屏用不上：那边的账号入口是顶栏头像的下拉菜单 */
@media (min-width:1025px){ .wb-drawer,.wb-drawer-scrim{display:none} }
@media (prefers-reduced-motion:reduce){ .wb-drawer,.wb-drawer-scrim{transition:none} }

/*
 * 顶上那排小圆钮。「设一次就不动」的开关放这儿 ——
 * 夜间模式原来是菜单里的一整行，跟「我的收藏」一样大，
 * 而它的使用频率差着一个数量级。
 */
.wb-drawer-top{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px 2px}
.wb-drawer-ico{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--txt-2);
}
.wb-drawer-ico:active{background:var(--hover)}

/* ---- 用户卡 ---- */
.wb-drawer-hd{display:flex;align-items:center;gap:11px;padding:6px 14px 12px}
.wb-drawer-ava{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden}
.wb-drawer-ava img{width:100%;height:100%;object-fit:cover;display:block}
.wb-drawer-id{flex:1;min-width:0}
.wb-drawer-name{display:flex;align-items:center;gap:5px;min-width:0;font-size:15.5px;font-weight:600}
.wb-drawer-name > a{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-drawer-uname{margin-top:2px;font-size:12px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「主页」那个小按钮 —— 瓜奇把它摆在用户卡右上，点头像和点它都能去，两条路都留着 */
.wb-drawer-home{
  flex:none;padding:5px 11px;border:1px solid var(--line);border-radius:14px;
  font-size:12.5px;color:var(--txt-2);
}
.wb-drawer-home:active{background:var(--hover)}

/* 三个数。竖线分隔，跟瓜奇那行一样 */
.wb-drawer-stats{display:flex;padding:0 14px 12px}
.wb-drawer-stats a{
  flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:4px;
  font-size:11.5px;color:var(--txt-3);
}
.wb-drawer-stats a + a{border-left:1px solid var(--line-soft)}
.wb-drawer-stats b{font-size:15px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}

/* ---- 签到横幅 ---- */
/*
 * 整行、带底色，是这个抽屉里最显眼的一块。它是唯一一个「每天来一次」的动作，
 * 而它在手机上原来一个入口都没有。签过之后底色转成中性 —— 已经完成的事情
 * 不该继续用高饱和的颜色喊人。
 */
.wb-drawer-ci{
  display:flex;align-items:center;gap:8px;margin:0 14px 12px;
  height:44px;padding:0 12px;border-radius:10px;
  background:var(--brand-weak);color:var(--brand);font-size:13.5px;
}
.wb-drawer-ci b{font-weight:600}
.wb-drawer-ci em{font-style:normal;font-size:12px;opacity:.75}
.wb-drawer-ci .ico{flex:none}
.wb-drawer-ci-arrow{margin-left:auto;flex:none;opacity:.6}
.wb-drawer-ci.is-done{background:var(--bg);color:var(--txt-2)}
.wb-drawer-ci.is-done b{color:var(--txt)}

/* ---- 数值卡 ---- */
/*
 * auto-fit：两个都在就并排，只开一个就占满整行 —— 模板里不用判。
 */
.wb-drawer-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;
  margin:0 14px 12px;
}
.wb-drawer-cards a{
  display:block;padding:10px 12px;border-radius:10px;background:var(--bg);
}
.wb-drawer-cards a:active{background:var(--hover)}
.wb-drawer-cards span{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--txt-3)}
.wb-drawer-cards span .ico{opacity:.7}
.wb-drawer-cards b{
  display:block;margin-top:3px;font-size:17px;font-weight:600;color:var(--txt);
  font-variant-numeric:tabular-nums;
}

/* ---- 入口网格 ---- */
/*
 * 4 列。一列的菜单一屏只塞得下五六行，而这些入口有八九个 ——
 * 网格能一屏看全，用户不用滚。关掉的功能整格消失，网格自己折行，不留空洞。
 */
.wb-drawer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 14px 14px;
}
.wb-drawer-grid a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:64px;padding:8px 2px;border-radius:8px;background:var(--bg);
  font-size:11px;color:var(--txt-2);line-height:1.3;text-align:center;
}
.wb-drawer-grid a:active{background:var(--hover)}
.wb-drawer-grid .ico{color:var(--txt-2)}
.wb-drawer-grid span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 底部 ---- */
/*
 * ⚠ 不要 margin-top:auto。
 *
 * 试过把这两条钉在抽屉最底下 —— 结果是关掉几个功能的站（比如没开会员、
 * 没配勋章），网格只剩五六格，网格和底部之间空出两百多像素的白，
 * 看着像内容没加载出来。让它紧跟网格，下面空着反而是正常的菜单样子。
 */
.wb-drawer-ft{border-top:1px solid var(--line-soft);padding:6px 0}
.wb-drawer-ft a{
  display:flex;align-items:center;gap:11px;height:44px;padding:0 14px;
  font-size:14.5px;color:var(--txt);
}
.wb-drawer-ft a:active{background:var(--hover)}
.wb-drawer-ft .ico{flex:none;color:var(--txt-3)}
.wb-drawer-ft .is-danger,.wb-drawer-ft .is-danger .ico{color:var(--danger)}

/* ---- 游客 ---- */
.wb-drawer-guest{padding:6px 14px 20px}
.wb-drawer-guest-t{font-size:17px;font-weight:600}
.wb-drawer-guest-s{margin-top:5px;font-size:13px;color:var(--txt-3);line-height:1.6}
.wb-drawer-guest-btns{display:flex;gap:8px;margin-top:16px}
.wb-drawer-guest-btns .wb-btn{flex:1;justify-content:center}

.wb-m-msgnav{display:flex;background:var(--card);padding:14px 0;margin-bottom:8px}
.wb-m-msgnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--txt-2);position:relative}
.wb-m-msgnav .ic{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);
}
.wb-m-msgnav .wb-badge{top:-2px;right:calc(50% - 24px)}

/* 移动端发帖页 */

/* 移动端发帖框：
   1) 版块/可见范围整行上移（order:-1 + 100% 宽），不再和图标按钮抢位置
   2) 工具按钮只留图标，文字标签隐藏 */
@media (max-width:1024px){
body.wb-app .wb-composer{padding:12px 12px 0;border-radius:0}
}
@media (max-width:1024px){
body.wb-app .wb-composer-bar{gap:0;padding:0 0 10px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-meta{
  order:-1;width:100%;padding:8px 0;margin-bottom:2px;
  border-bottom:1px solid var(--line-soft);
}
}
@media (max-width:1024px){
body.wb-app .wb-select{max-width:none;flex:1 1 0;height:30px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-tools{flex:1 1 auto;gap:2px;padding-top:6px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-submit{order:3;flex:none;gap:8px;padding-top:6px}
}
@media (max-width:1024px){
body.wb-app .wb-ctool{padding:6px 9px}
}
@media (max-width:1024px){
body.wb-app .wb-ctool span{display:none}
}
@media (max-width:1024px){
body.wb-app .wb-btn-send{padding:0 20px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-tip{font-size:11px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-preview{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
body.wb-app .wb-suggest{left:12px;right:12px}
}

/* 移动端表情面板做成底部弹层，跟着输入法习惯走 */
@media (max-width:1024px){
body.wb-app .wb-emoji-pop{
  left:0 !important;right:0;bottom:0 !important;top:auto !important;
  width:100%;max-width:none;border-radius:12px 12px 0 0;border-bottom:0;
  padding-bottom:env(safe-area-inset-bottom);
}
}
@media (max-width:1024px){
body.wb-app .wb-emoji-grid{grid-template-columns:repeat(8,1fr);max-height:44vh}
}
@media (max-width:1024px){
body.wb-app .wb-emoji-grid button{height:36px;font-size:22px}
}
@media (max-width:1024px){
body.wb-app .wb-comment-tools .wb-ctool{padding:5px 8px}
}
@media (max-width:1024px){
body.wb-app .wb-cimgs .wb-image{width:96px;height:96px}
}
@media (max-width:1024px){
body.wb-app .wb-subcomment .wb-cimgs .wb-image{width:72px;height:72px}
}
@media (max-width:1024px){
body.wb-app .wb-cimg-preview figure{width:64px;height:64px}
}

/* 移动端的次级页面（话题 / 搜索 / 关注列表 / 编辑资料）
   直接复用 PC 主体结构，这里只做宽度与间距的适配 */

/* ---------- 移动端搜索页 ---------- */
/*
 * 顶栏本身就是输入框（对标 m.weibo.cn）。返回箭头 + 一条占满剩余宽度的圆角框，
 * 关键词一直摆在眼前、随时能改 —— 原来这里只是「搜索」两个字，
 * 搜不到东西就只能按返回重来。
 */
.wb-m-searchnav{gap:8px;padding:0 10px}
.wb-m-searchnav-back{flex:0 0 auto;display:flex;align-items:center;color:var(--txt)}
.wb-m-searchbox{
  flex:1 1 auto;min-width:0;height:32px;border-radius:16px;background:var(--bg);
  display:flex;align-items:center;gap:6px;padding:0 10px;
}
.wb-m-searchbox-ico{flex:0 0 auto;display:flex;color:var(--txt-3)}
.wb-m-searchbox input[type=search]{
  flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;
  /* 字色跟正文一样深：这是用户打进去的内容，不是提示语 */
  color:var(--txt);font-size:14px;
}
.wb-m-searchbox input::placeholder{color:var(--txt-3)}
/* iOS 自带的清除叉跟我们这个会并排出现两个，关掉原生的 */
.wb-m-searchbox input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.wb-m-searchbox-clear{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--txt-3);color:#fff;cursor:pointer;
}

/*
 * 结果页 Tab 行：关键词已经在顶栏输入框里了，这儿再挂一句
 * 「「xxx」的搜索结果」纯属重复 —— 而且 400px 宽根本放不下，
 * 会挤到 Tab 上把整行撑乱（这就是这次要修的那个错位）。
 */

/* 落地页：搜索历史 + 热搜榜 */
.wb-searchland{padding:8px 0 20px}
/*
 * 搜索落地页（历史 + 热搜）。合并模板之后**宽屏也用它**，
 * 所以宽屏要把卡片的圆角补回来 —— 窄屏是满宽直角，那是列表页的样子。
 */
.wb-sl-sec{background:var(--card);margin-bottom:8px;padding:12px 14px 14px}
@media (min-width:1025px){
  .wb-sl-sec{border-radius:var(--radius-lg);margin-bottom:10px}
}
.wb-sl-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wb-sl-hd h3{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--txt)}
.wb-sl-hd h3 .ico{color:var(--txt-3)}
.wb-sl-clear,.wb-sl-more{
  display:flex;align-items:center;gap:3px;border:0;background:none;padding:0;
  font-size:12.5px;color:var(--txt-3);cursor:pointer;
}
.wb-sl-tags{display:flex;flex-wrap:wrap;gap:8px}
/*
 * 历史词做成一个整块的圆角标签，删除叉在标签内部右侧。
 * 高度给到 30px：这是要用手指点的，太小会点到旁边那一个
 */
.wb-sl-tag{
  display:inline-flex;align-items:center;max-width:100%;height:30px;
  border-radius:15px;background:var(--bg);overflow:hidden;
}
.wb-sl-tag a{
  min-width:0;padding:0 4px 0 12px;font-size:13px;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:30px;
}
.wb-sl-tag button{
  flex:0 0 auto;width:24px;height:30px;border:0;background:none;padding:0;
  color:var(--txt-3);font-size:15px;line-height:1;cursor:pointer;
}
.wb-sl-tag button:active{color:var(--txt)}
/* 榜单直接用挂件那份行样式，这里只去掉挂件外壳留下的内边距 */
.wb-searchland .wb-rank-list{padding:0}


/* 移动端登录 */
/*
 * 登录 / 注册页外面那层壳。
 *
 * 宽屏留一段顶部空隙让表单卡片浮在中间；窄屏改成贴边的内边距，
 * 并且把卡片的阴影和底色去掉 —— 手机上一屏就这一个表单，
 * 再套一层卡片只是白白缩窄了输入框。
 */
.wb-authwrap{padding-top:40px}
@media (max-width:1024px){
  .wb-authwrap{padding:24px 18px}
  .wb-authwrap .wb-auth{box-shadow:none;padding:0;background:none}
}

/* ==========================================================================
   10. 积分 / 等级 / 勋章
   ========================================================================== */

/* 等级小标签：颜色由 --lv 变量注入，后台改配置即时生效 */
.wb-lv{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  height:16px;padding:0 5px;border-radius:8px;font-style:normal;
  font-size:10.5px;font-weight:600;line-height:16px;letter-spacing:.2px;
  color:var(--lv,#9aa0a6);background:color-mix(in srgb, var(--lv,#9aa0a6) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--lv,#9aa0a6) 32%, transparent);
}
.wb-lv em{font-style:normal;font-weight:400;opacity:.9}
.wb-lv.is-lg{height:24px;padding:0 10px;border-radius:12px;font-size:13px;gap:5px}

/*
 * 「AI」标识。跟 .wb-lv 同一套形状（16px 胶囊、10.5px 字），
 * 只是颜色固定不跟主题色走。
 *
 * ⚠ 故意**不用**主题色。
 * 主题色是站长挑的，站里最显眼的按钮都用它 —— 拿它做 AI 标识，
 * 在橙色主题的站上会跟会员标识、@提及、话题链接糊成一片同色小块，
 * 一眼扫过去分不出哪个是「这是机器写的」。
 *
 * 蓝紫是各家给 AI 的通用色（微软 Copilot、Google Gemini、
 * 微博的 AI 评论都在这个色区），不用学就认得。
 */
.wb-ai{
  display:inline-flex;align-items:center;flex:none;
  height:16px;padding:0 5px;border-radius:8px;font-style:normal;
  font-size:10.5px;font-weight:700;line-height:16px;letter-spacing:.4px;
  color:#6a4de0;background:rgba(106,77,224,.12);border:1px solid rgba(106,77,224,.3);
}
/*
 * 夜间要提亮。#6a4de0 压在深底上几乎看不见 ——
 * 而看不见的合规标识等于没有。
 */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .wb-ai{
    color:#a894ff;background:rgba(168,148,255,.16);border-color:rgba(168,148,255,.34);
  }
}
html[data-theme="dark"] .wb-ai{
  color:#a894ff;background:rgba(168,148,255,.16);border-color:rgba(168,148,255,.34);
}
/*
 * 楼中楼那一行的字更小，标识跟着小一号。
 * ⚠ 这一行是连排文字，不是 flex —— 用 inline-block 而不是 inline-flex，
 * 让它跟着基线走，否则会比左右的昵称高出一截。
 */
.wb-ai.is-sm{
  display:inline-block;height:15px;line-height:14px;padding:0 4px;
  font-size:10px;border-radius:7px;vertical-align:1px;
}

/* 勋章胶囊 */
.wb-badge-chip{
  display:inline-flex;align-items:center;gap:4px;font-style:normal;
  height:24px;padding:0 9px 0 6px;border-radius:12px;font-size:12px;
  color:var(--bc,#ff8200);background:color-mix(in srgb, var(--bc,#ff8200) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bc,#ff8200) 28%, transparent);
}
.wb-badge-chip span{font-size:13px;line-height:1}

/* ---------- 积分页：挑佩戴哪几枚 ---------- */
/*
 * 未选中的故意调淡（不是变灰）—— 变灰看着像「这枚失效了」，
 * 而它只是没挂上；降不透明度能保住勋章自己的颜色，一眼就分得出
 * 「选上了 / 没选」，又不会让人以为勋章本身出了问题。
 */
.wb-badge-pick-tip{
  margin:0;padding:0 16px;font-size:12.5px;line-height:1.75;color:var(--txt-3);
}
.wb-badge-pick-tip b{color:var(--txt-2);font-weight:600}

.wb-gamify-badges.is-pickable .wb-badge-chip{
  position:relative;cursor:pointer;opacity:.5;transition:.15s;
  padding-right:9px;
}
.wb-gamify-badges.is-pickable .wb-badge-chip:hover{opacity:.8}
.wb-gamify-badges.is-pickable .wb-badge-chip.is-worn{
  opacity:1;
  /* 选中用加深的描边，不用阴影 —— 一排十几枚都带阴影会很脏 */
  border-color:var(--bc,#ff8200);
  background:color-mix(in srgb, var(--bc,#ff8200) 20%, transparent);
  padding-right:22px;
}
.wb-gamify-badges.is-pickable .wb-badge-chip:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
/*
 * ⚠ 触屏上把热区拉到 40px。
 *
 * 勋章片本来是 24px 高的展示用小标签，而这一屏里它是**要手指去点的** ——
 * 24px 在手机上是点不准的（常见的最小可点尺寸是 44px），而点偏了的后果
 * 是挂上一枚他没想要的勋章，他得再点一下取消。
 * 只提 is-pickable 那一组：主页、排行榜上的勋章片不可点，拉大只会白占地方。
 */
@media (max-width:1024px){
  .wb-gamify-badges.is-pickable{gap:8px}
  .wb-gamify-badges.is-pickable .wb-badge-chip{
    height:40px;border-radius:20px;padding-left:12px;font-size:13.5px;
  }
  .wb-gamify-badges.is-pickable .wb-badge-chip.is-worn{padding-right:30px}
  .wb-gamify-badges.is-pickable .wb-badge-ord{width:17px;height:17px;font-size:10.5px;right:8px}
}
/* 位次：只在选中时占地，否则没选的那些旁边会多出一块空白 */
.wb-badge-ord{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:none;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:var(--bc,#ff8200);color:#fff;
  font-size:9.5px;font-style:normal;font-weight:700;line-height:1;
}
.wb-gamify-badges.is-pickable .wb-badge-chip.is-worn .wb-badge-ord{display:flex}
/* 主页那一区的勋章：图片形态跟 emoji 占一样的位置 */
.wb-badge-chip .wb-badge-img{width:15px;height:15px;object-fit:contain;display:block}

/*
 * 昵称旁边那一小排勋章。
 *
 * ⚠ 只有图标、没有名字、没有底色 —— 这一行上已经有昵称、等级、会员标识、
 * 认证角标、置顶角标，每样都想占点颜色的话，那一行会变成一条彩带，
 * 而昵称（唯一真正要认的东西）反而看不见了。勋章在这儿的作用是
 *「一眼看出这人有点来头」，认得出是哪一枚是主页那一区的事。
 */
.wb-badge-row{display:inline-flex;align-items:center;gap:3px;flex:none;vertical-align:middle}
.wb-badge-mini{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;font-style:normal;font-size:13px;line-height:1;
  color:var(--bc,#ff8200);cursor:default;
}
.wb-badge-mini .wb-badge-img{width:14px;height:14px;object-fit:contain;display:block}

/* 个人主页的等级 / 积分 / 勋章区块 */
.wb-gamify{padding:14px 16px}
.wb-gamify-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wb-gamify-lv{display:flex;align-items:center;gap:9px}
.wb-gamify-lv span{font-size:12.5px;color:var(--txt-3)}
.wb-gamify-point{display:flex;align-items:baseline;gap:4px}
.wb-gamify-point b{font-size:19px;font-weight:600;color:var(--brand)}
.wb-gamify-point span{font-size:12.5px;color:var(--txt-3)}
.wb-gamify-bar{height:6px;border-radius:3px;background:var(--bg);margin-top:11px;overflow:hidden}
.wb-gamify-bar i{display:block;height:100%;border-radius:3px;transition:width .4s}
.wb-gamify-tip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt-3);margin-top:7px}
.wb-gamify-tip b{color:var(--txt-2)}
.wb-gamify-tip a{margin-left:auto;color:var(--brand)}
.wb-gamify-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.wb-gamify-none{font-size:12.5px;color:var(--txt-3)}

/* 排行榜 */
.wb-ranklist .wb-rank-row{
  display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-soft);
}
.wb-ranklist .wb-rank-row:last-child{border-bottom:0}
.wb-ranklist .wb-rank-row:hover{background:var(--hover)}
.wb-ranklist .wb-rank-no{width:22px;font-size:15px}
.wb-ranklist .wb-user-avatar img{width:42px;height:42px}
.wb-rank-name{display:flex;align-items:center;gap:6px}
.wb-rank-name a{font-size:14px;font-weight:500}
.wb-rank-name a:hover{color:var(--brand)}
.wb-rank-value{text-align:right;flex:none;min-width:64px}
.wb-rank-value b{display:block;font-size:16px;font-weight:600;color:var(--brand)}
.wb-rank-value span{font-size:11.5px;color:var(--txt-3)}

/* 勋章墙 */
.wb-badge-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
.wb-badge-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 12px;text-align:center;
  opacity:.5;filter:grayscale(1);transition:.2s;
}
.wb-badge-card.is-owned{
  opacity:1;filter:none;border-color:color-mix(in srgb, var(--bc,#ff8200) 40%, transparent);
  background:color-mix(in srgb, var(--bc,#ff8200) 6%, transparent);
}
.wb-badge-card .ic{font-size:30px;line-height:1;display:block;margin-bottom:8px}
.wb-badge-card b{font-size:13.5px;display:block}
.wb-badge-card p{font-size:11.5px;color:var(--txt-3);margin-top:4px;line-height:1.5;min-height:2.2em}
.wb-badge-card em{
  font-style:normal;font-size:11px;display:inline-block;margin-top:7px;padding:2px 8px;border-radius:9px;
  background:var(--bg);color:var(--txt-3);
}
.wb-badge-card.is-owned em{background:var(--bc,#ff8200);color:#fff}

/* 我的积分页 */
.wb-points-hd{padding:18px 16px 16px}
.wb-points-sum{display:flex;gap:34px}
.wb-points-sum b{display:block;font-size:24px;font-weight:600}
.wb-points-sum span{font-size:12.5px;color:var(--txt-3)}
.wb-rule-list{padding:4px 0}
.wb-rule{display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:13.5px}
.wb-rule:hover{background:var(--hover)}
.wb-rule > span{flex:1;min-width:0}
.wb-rule > span i{font-style:normal;font-size:11.5px;color:var(--txt-3);margin-left:8px}
.wb-rule em{font-style:normal;font-weight:600;color:var(--ok);min-width:44px;text-align:right}
.wb-rule em.is-minus{color:var(--danger)}
.wb-rule > i{font-style:normal;font-size:11.5px;color:var(--txt-3);min-width:120px;text-align:right}
.wb-log > i{min-width:70px}

/* ==========================================================================
   11. 广告位
   ========================================================================== */
.wb-ads{margin-bottom:var(--gap)}
.wb-ad{
  position:relative;display:block;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.wb-ad + .wb-ad{margin-top:8px}
.wb-ad-image img{width:100%;display:block}
.wb-ad-title{
  display:block;padding:9px 12px;font-size:13px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-ad-text{padding:13px 14px}
.wb-ad-text b{display:block;font-size:14px;font-weight:500}
.wb-ad-text span{display:block;font-size:12.5px;color:var(--txt-3);margin-top:4px;line-height:1.5}
.wb-ad-html{padding:10px}
.wb-ad-flag{
  position:absolute;right:6px;bottom:6px;font-style:normal;font-size:10px;line-height:15px;
  padding:0 5px;border-radius:3px;background:rgba(0,0,0,.42);color:#fff;pointer-events:none;
}
.wb-ad-image:hover .wb-ad-title{color:var(--brand)}
.wb-ads-pc-feed .wb-ad,.wb-ads-post-detail .wb-ad{margin-bottom:var(--gap)}
@media (max-width:1024px){
body.wb-app .wb-ads{margin:0 0 8px}
}
@media (max-width:1024px){
body.wb-app .wb-ad{border-radius:0;box-shadow:none;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
}

/* 窄屏 */
@media (max-width: 500px){
  .wb-badge-wall{grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
  .wb-points-sum{gap:20px}
  .wb-points-sum b{font-size:20px}
  .wb-rule > i{display:none}
}

/* ==========================================================================
   12. 举报弹窗 / 返回顶部 / 发帖框视频
   ========================================================================== */

/* ---------- 举报 ---------- */
.wb-report-tip{font-size:13px;color:var(--txt-2);margin-bottom:12px}
.wb-report-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.wb-report-reason{position:relative;cursor:pointer}
.wb-report-reason input{position:absolute;opacity:0;pointer-events:none}
.wb-report-reason span{
  display:flex;align-items:center;justify-content:center;height:34px;padding:0 6px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  font-size:13px;color:var(--txt-2);transition:.15s;text-align:center;
}
.wb-report-reason:hover span{border-color:var(--brand);color:var(--brand)}
.wb-report-reason input:checked + span{
  border-color:var(--brand);background:var(--brand-weak);color:var(--brand);font-weight:500;
}
.wb-report-note{font-size:12px;color:var(--txt-3)}

/* ---------- 返回顶部 ---------- */
.wb-totop{
  position:fixed;right:calc((100vw - (var(--w-left) + var(--w-mid) + var(--w-right) + var(--gap)*2)) / 2 - 60px);
  bottom:80px;z-index:80;
  width:46px;height:46px;border-radius:50%;
  background:var(--card);color:var(--txt-2);
  border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:.15s;animation:wb-slide-in .2s ease;
}
.wb-totop:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.wb-totop .ico{transform:rotate(180deg);margin-bottom:-3px}
.wb-totop em{font-style:normal;font-size:10px;line-height:1;opacity:.75}

/* 屏幕不够宽时贴到视口右侧，别压在中栏上 */
@media (max-width: 1420px){
  .wb-totop{right:16px}
}

/*
 * ⚠ 窄屏不出现。
 *
 * 手机的右下角一共就那么大，本来要挤三个悬浮件：发布键、这个返回顶部、
 * 音乐球。而返回顶部在手机上是三个里最不值的一个 ——
 * 底部标签栏一直在，点一下当前那个 tab 就回顶了，是所有 App 的通用手势；
 * 而它自己还要占掉一格、把音乐球往上顶。
 *
 * 宽屏保留：那儿没有标签栏，页面也长得多。
 */
@media (max-width:1024px){
body.wb-app .wb-totop{display:none}
}

/* ---------- 发帖框里的视频 ---------- */
.wb-composer-video{
  position:relative;margin-top:10px;border-radius:var(--radius-lg);
  overflow:hidden;background:#000;
}
.wb-composer-video video{width:100%;max-height:280px;display:block;background:#000}
.wb-composer-video-meta{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bg);font-size:12.5px;color:var(--txt-2);
}
.wb-composer-video-meta > span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);
}
.wb-composer-video-meta em{font-style:normal;color:var(--txt-3);flex:none}
.wb-composer-video-del{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  font-size:12px;color:var(--txt-3);transition:.15s;
}
.wb-composer-video-del:hover{color:var(--danger)}
.wb-composer-video-bar{
  position:absolute;left:0;right:0;bottom:38px;height:3px;background:rgba(255,255,255,.25);overflow:hidden;
}
.wb-composer-video-bar i{
  display:block;height:100%;width:40%;background:var(--brand);border-radius:2px;
  animation:wb-indeterminate 1.1s ease-in-out infinite;
}
@keyframes wb-indeterminate{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* ---------- 帖子里的视频卡片 ---------- */
.wb-video-cover.is-blank{
  padding-top:0;height:200px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);background:linear-gradient(135deg,#2a2a2e,#3a3a40);
}
.wb-video-bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:18px 10px 8px;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.wb-video-bar span{font-size:11.5px;color:#fff;opacity:.9}
.wb-video-bar .wb-video-time{margin-left:auto}
.wb-video[data-playing] .wb-video-bar,
.wb-video[data-playing] .wb-video-play{display:none}

@media (max-width: 500px){
  .wb-report-reasons{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 图形验证码 ---------- */
.wb-captcha-row{display:flex;gap:10px;align-items:stretch}
.wb-captcha-row input{flex:1;min-width:0}
.wb-captcha-img{
  width:120px;height:40px;flex:none;border-radius:var(--radius-lg);
  border:1px solid var(--line);cursor:pointer;background:var(--bg);object-fit:cover;
}
.wb-captcha-img:hover{border-color:var(--brand)}

/* 表单里「选填」这类补充说明 */
.wb-field-opt{
  font-style:normal;font-size:11.5px;color:var(--txt-3);font-weight:400;margin-left:6px;
}

/* ==================================================================
   设置中心（对标 weibo.com/set/index）
   标签右对齐窄列 + 控件宽列，说明文字挂在控件下面
   ================================================================== */
.wb-set{padding:0}
.wb-set-panel{display:none;padding:20px 26px 26px}
.wb-set-panel.is-on{display:block}
.wb-set-hd{font-size:17px;font-weight:600;padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:22px}
.wb-set-sub{
  font-size:15px;font-weight:600;margin:30px 0 18px;
  padding-top:20px;border-top:1px solid var(--line-soft);
}
.wb-set-sub span{font-weight:400;color:var(--txt-3);font-size:13px}

.wb-set-row{display:flex;gap:16px;margin-bottom:18px}
.wb-set-row > label{
  flex:none;width:78px;padding-top:10px;text-align:right;
  font-size:13.5px;color:var(--txt-2);line-height:1.4;
}
.wb-set-row > div{flex:1;min-width:0;max-width:560px}
.wb-set-row input:not([type=checkbox]):not([type=radio]),
.wb-set-row textarea{
  width:100%;height:40px;border:1px solid transparent;border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--bg);font-size:14px;color:var(--txt);
  transition:.15s;
}
.wb-set-row textarea{height:auto;padding:10px 12px;min-height:76px;resize:vertical;line-height:1.6}
.wb-set-row input:not([type=checkbox]):not([type=radio]):focus,.wb-set-row textarea:focus{border-color:var(--brand);background:var(--card)}
/* 昵称旁边那个问号：规则太长，塞进表单会把版面撑散，点开看更合适 */
.wb-set-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:4px;vertical-align:1px;
  border:1px solid var(--ctrl-line);border-radius:50%;background:none;
  font-size:10px;line-height:1;color:var(--txt-3);cursor:pointer;
}
.wb-set-help:hover{border-color:var(--brand);color:var(--brand)}
input[readonly]{background:var(--hover);cursor:pointer}
[data-notice-body] p{margin:0 0 8px;line-height:1.75}
[data-notice-body] p:last-child{margin-bottom:0}
[data-notice-body] b{color:var(--brand)}

.wb-set-tip{font-size:12.5px;color:var(--txt-3);margin-top:7px;line-height:1.7}
.wb-set-tip b{color:var(--txt-2);font-weight:600}
/* 改名剩余次数要比普通说明显眼一档；用完了用警示色 */
.wb-set-tip b.is-num{color:var(--brand)}
.wb-set-tip b.is-off{color:var(--danger)}
.wb-set-foot{display:flex;align-items:center;gap:10px;margin-top:22px;padding-left:94px}
.wb-set-radios{display:flex;align-items:center;gap:22px;padding-top:10px}
.wb-radio{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.wb-btn-danger{background:var(--danger);color:#fff}
.wb-btn-danger:hover{filter:brightness(1.06)}
.wb-btn-sm{height:28px;padding:0 13px;font-size:12.5px}

/* 头像：微博是居中大圆 + 下面一行小字按钮 */
.wb-set-avatar{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.wb-set-avatar img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.wb-set-avatar-btn{font-size:13px;color:var(--brand);cursor:pointer}
.wb-set-cover{
  width:240px;height:72px;border-radius:var(--radius-lg);margin-bottom:9px;
  background:linear-gradient(120deg,#ffd9a8,#ff9248) center/cover;
}

/* ---------- 账号安全：状态行 ---------- */
.wb-sec-list{border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden}
.wb-sec-item{
  display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--line-soft);font-size:14px;
}
.wb-sec-item:last-child{border-bottom:none}
.wb-sec-ic{
  width:17px;height:17px;flex:none;border-radius:50%;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.wb-sec-ic.ok{background:#52c41a}
.wb-sec-ic.warn{background:#faad14}
.wb-sec-name{width:76px;flex:none;font-weight:500}
.wb-sec-val{flex:1;min-width:0;color:var(--txt-3);font-size:13px}
.wb-sec-act{flex:none;font-size:13px;color:var(--brand);cursor:pointer;padding:2px 4px}
.wb-sec-act:hover{text-decoration:underline}
.wb-sec-fold{padding:22px 18px 6px;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.wb-sec-fold .wb-set-row > label{width:74px}
.wb-sec-fold .wb-set-foot{padding-left:90px;margin-top:18px}
.wb-sec-lead{font-size:13.5px;color:var(--txt-2);line-height:1.8;margin-bottom:18px}

/* ---------- 两步验证 ---------- */
.wb-tfa{display:flex;gap:22px;align-items:flex-start}
.wb-tfa-qr{
  flex:none;width:180px;height:180px;border-radius:var(--radius-lg);background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.wb-tfa-qr svg{display:block;width:100%;height:100%}
.wb-tfa-loading{font-size:12.5px;color:var(--txt-3)}
.wb-tfa-steps{flex:1;min-width:0;font-size:13.5px;line-height:1.9}
.wb-tfa-steps > p{margin-bottom:4px}
.wb-tfa-steps b{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:11px;margin-right:6px;vertical-align:1px;
}
.wb-tfa-secret{
  display:inline-block;margin:2px 0 10px;padding:7px 12px;border-radius:var(--radius);
  background:var(--card);border:1px dashed var(--line);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;letter-spacing:1.2px;
  user-select:all;word-break:break-all;
}
.wb-tfa-verify{display:flex;gap:10px;margin-top:6px}
.wb-tfa-verify input{
  width:150px;height:36px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--card);
  font-size:16px;letter-spacing:4px;text-align:center;
}
.wb-tfa-verify input:focus{border-color:var(--brand)}
.wb-tfa-verify .wb-btn{height:36px}

.wb-tfa-codes{margin-top:20px;padding:18px;border-radius:var(--radius-lg);background:var(--brand-weak);border:1px solid var(--brand)}
.wb-tfa-codes h4{font-size:14px;font-weight:600;margin-bottom:6px}
.wb-tfa-codes ul{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin:14px 0 4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:1px;
}
.wb-tfa-codes li{background:var(--card);border-radius:var(--radius);padding:7px 12px;text-align:center;user-select:all}
.wb-tfa-codes .wb-set-foot{padding-left:0}

/* ---------- 屏蔽设置 ---------- */
.wb-block-add{margin-bottom:6px}
.wb-block-search{position:relative;display:flex;gap:10px;max-width:560px}
.wb-block-search input{
  flex:1;min-width:0;height:40px;border:1px solid transparent;border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--bg);font-size:14px;color:var(--txt);
}
.wb-block-search input:focus{border-color:var(--brand);background:var(--card)}
.wb-block-search .wb-btn{flex:none;height:40px;padding:0 30px;border-radius:var(--radius-lg)}
.wb-block-suggest{
  position:absolute;top:44px;left:0;right:110px;z-index:40;max-height:264px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.wb-block-suggest button{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;
  font-size:13.5px;text-align:left;cursor:pointer;
}
.wb-block-suggest button:hover,.wb-block-suggest button.is-on{background:var(--hover)}
.wb-block-suggest img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.wb-block-suggest em{color:var(--txt-3);font-size:12px;margin-left:auto;flex:none}

.wb-block-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 2px;border-bottom:1px solid var(--line-soft);
}
.wb-block-item:last-child{border-bottom:none}
.wb-block-item > a img{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block}
.wb-block-info{flex:1;min-width:0}
.wb-block-name{font-size:14px;font-weight:500;color:var(--txt)}
.wb-block-name:hover{color:var(--brand)}
.wb-block-scope{font-size:12.5px;color:var(--txt-3);margin-top:4px}
.wb-block-empty{padding:44px 0;text-align:center;color:var(--txt-3);font-size:13.5px}

.wb-scope-pop{
  position:absolute;top:calc(100% - 8px);right:0;z-index:50;width:340px;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 6px 22px rgba(0,0,0,.12);
}
.wb-scope-pop .wb-check{display:flex;align-items:flex-start;padding:7px 0}
.wb-scope-pop .wb-check b{display:block;font-size:13.5px;color:var(--txt);font-weight:500}
.wb-scope-pop .wb-check em{display:block;font-size:12px;color:var(--txt-3);margin-top:2px;line-height:1.6}
.wb-scope-pop input[type=checkbox]{margin-top:2px}
.wb-scope-pop-ft{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* ---------- 登录页的两步验证 ---------- */
.wb-2fa-step{text-align:center}
.wb-2fa-step h3{font-size:16px;font-weight:600;margin-bottom:8px}
.wb-2fa-step > p{font-size:13px;color:var(--txt-2);line-height:1.8;margin-bottom:18px}
.wb-2fa-step input{
  width:100%;height:46px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--bg);
  font-size:20px;letter-spacing:8px;text-align:center;
}
.wb-2fa-step input:focus{border-color:var(--brand);background:var(--card)}
.wb-2fa-alt{margin-top:14px;font-size:12.5px;color:var(--txt-3);line-height:1.8}
.wb-2fa-alt a{color:var(--brand);cursor:pointer}

/* ---------- 移动端 ---------- */
.wb-m-settabs{
  display:flex;background:var(--card);border-bottom:1px solid var(--line);
  /*
   * 顶栏是 sticky 且高 46px，这里要正好接在它下沿，否则滚动时会压掉 2px。
   * 还要加上 --imp-h：顶栏本身已经为公告横幅让过位了，
   * 这里不跟着让的话标签条会钻到顶栏底下。
   */
  position:sticky;top:calc(var(--imp-h) + 46px);z-index:30;
}
/*
 * ⚠ 横滑而不是挤在一行。
 *
 * 这条条当初只服务设置页的四个面板，四项平分刚好。现在它还要担
 * 「个人中心」那一栏 —— 站长把会员和收益都开了的话是六项再加一个
 * 「账号设置」= 七项，375px 下平分下来每项 53px，而「积分与等级」
 * 五个字就要 70px —— 必然挤坏。
 *
 * flex:1 0 auto = 项少时拉开填满（跟以前一样），项多时不压缩、溢出去横滑。
 * 跟首页频道条（.wb-m-tabs）是同一个做法。
 */
.wb-m-settabs{overflow-x:auto;scrollbar-width:none}
.wb-m-settabs::-webkit-scrollbar{display:none}
.wb-m-settab{
  flex:1 0 auto;text-align:center;padding:12px 14px;font-size:14px;color:var(--txt-2);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.wb-m-settab.is-active{color:var(--brand);border-bottom-color:var(--brand);font-weight:500}

@media (max-width:768px){
  .wb-set-panel{padding:14px 14px 22px}
  .wb-set-hd{display:none}
  .wb-set-row{display:block}
  .wb-set-row > label{width:auto;text-align:left;padding:0 0 7px;display:block}
  .wb-set-row > div{max-width:none}
  .wb-set-foot{padding-left:0}
  .wb-set-foot .wb-btn{flex:1;height:40px;border-radius:var(--radius-lg)}
  .wb-sec-fold .wb-set-foot{padding-left:0}
  .wb-set-sub{margin-top:22px}

  .wb-tfa{flex-direction:column;align-items:center}
  .wb-tfa-steps{width:100%}
  .wb-tfa-verify input{flex:1;width:auto}
  .wb-tfa-codes ul{grid-template-columns:1fr}

  .wb-sec-name{width:auto;flex:none}
  /* 值靠右显示、过长省略；纯说明性的那行（is-hint）窄屏直接不显示，
     否则会把右边的「修改 / 开启」挤出屏幕 */
  .wb-sec-val{text-align:right;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wb-sec-val.is-hint{display:none}

  .wb-block-search{max-width:none}
  .wb-block-search .wb-btn{padding:0 20px}
  .wb-block-suggest{right:0}
  .wb-scope-pop{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    border-radius:14px 14px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .wb-block-item .wb-btn-sm{padding:0 9px}
}

/* ==================================================================
   链接卡片（对标 X 的 Card）
   量的是 x.com 上的真实卡片：圆角 16px、边框 0.8px、正文 15px，
   小图卡的图占 25% 宽、正方形，文字区内边距 12px
   ================================================================== */
.wb-card-link{
  display:flex;margin-top:10px;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;
  color:inherit;transition:background .15s;
}
.wb-card-link:hover{background:var(--hover)}

.wb-card-link-media{
  flex:none;width:130px;align-self:stretch;background:var(--bg);
  border-right:1px solid var(--line);
}
.wb-card-link-media img{width:100%;height:100%;object-fit:cover;display:block}

.wb-card-link-body{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:12px 14px;
}
.wb-card-link-host{font-size:13px;color:var(--txt-3);line-height:1.5}
.wb-card-link-title{
  font-size:15px;color:var(--txt);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.wb-card-link-desc{
  font-size:14px;color:var(--txt-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 大图卡：图在上、2:1，文字在下 —— 对方页面声明 summary_large_image 才用 */
.wb-card-link.is-large{flex-direction:column}
.wb-card-link.is-large .wb-card-link-media{
  width:100%;aspect-ratio:2/1;border-right:none;border-bottom:1px solid var(--line);
}
.wb-card-link.is-large .wb-card-link-body{padding:10px 14px 12px}
.wb-card-link.is-large .wb-card-link-title{-webkit-line-clamp:2}
.wb-card-link.is-large .wb-card-link-desc{-webkit-line-clamp:1}

/* 转发引用块里的卡片要收窄一点，跟嵌套层级对上 */
.wb-post-origin .wb-card-link{border-radius:12px}
.wb-post-origin .wb-card-link-media{width:104px}

@media (max-width:768px){
  .wb-card-link{border-radius:12px}
  .wb-card-link-media{width:104px}
  .wb-card-link-body{padding:10px 12px}
  .wb-card-link-title{font-size:14.5px}
  .wb-card-link-desc{font-size:13px;-webkit-line-clamp:1}
}

/* ==================================================================
   邮箱绑定 / 验证码
   ================================================================== */
.wb-mail-state{display:flex;align-items:center;gap:9px;min-height:40px}
.wb-mail-addr{font-size:14px;color:var(--txt)}
.wb-mail-addr.is-empty{color:var(--txt-3)}
.wb-mail-tag{
  font-size:11.5px;padding:1px 7px;border-radius:9px;font-style:normal;line-height:1.7;
}
.wb-mail-tag.ok{background:#e8f8e4;color:#3a9c1e}
.wb-mail-tag.warn{background:#fff4e0;color:#c17d0a}
[data-theme="dark"] .wb-mail-tag.ok{background:#1d2f18;color:#68c246}
[data-theme="dark"] .wb-mail-tag.warn{background:#33280f;color:#dda441}
.wb-mail-form{margin-top:10px;padding:14px;background:var(--bg);border-radius:var(--radius-lg)}
.wb-mail-form .wb-code-row + .wb-code-row{margin-top:10px}

/* 输入框 + 右边一个按钮，注册页和设置页共用 */
.wb-code-row{display:flex;gap:9px}
.wb-code-row input{
  flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--card);font-size:14px;color:var(--txt);
}
.wb-code-row input:focus{border-color:var(--brand)}
.wb-code-row .wb-btn{
  /* width:auto 不能省：登录/注册页有一条 .wb-auth .wb-btn{width:100%}，
     不覆盖掉的话按钮会把整行占满，输入框被挤成几十像素 */
  flex:none;width:auto;height:40px;border-radius:var(--radius-lg);padding:0 14px;
  font-size:13px;white-space:nowrap;margin-top:0;
}
.wb-code-row .wb-btn:disabled{opacity:.5;cursor:not-allowed}
.wb-field .wb-code-row input{background:var(--bg)}

/* ==================================================================
   登录 / 找回密码
   ================================================================== */
.wb-auth-wrap{padding-top:40px}
.wb-auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wb-auth-forgot{font-size:13px;color:var(--txt-3)}
.wb-auth-forgot:hover{color:var(--brand)}
.wb-auth-note{
  padding:11px 13px;margin-bottom:18px;border-radius:var(--radius-lg);
  background:#fff4e0;color:#a2650a;font-size:13px;line-height:1.7;
}
[data-theme="dark"] .wb-auth-note{background:#33280f;color:#d9a441}

.wb-forgot-done{text-align:center;padding:8px 0 4px}
.wb-forgot-ic{
  width:58px;height:58px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);
}
.wb-forgot-ic.is-warn{background:#fff4e0;color:#e0a33a}
[data-theme="dark"] .wb-forgot-ic.is-warn{background:#33280f}
.wb-forgot-done h3{font-size:16px;font-weight:600;margin-bottom:8px}
.wb-forgot-done > p{font-size:13.5px;color:var(--txt-2);line-height:1.9;margin-bottom:16px}
.wb-forgot-done .wb-btn{width:100%;height:40px;border-radius:var(--radius-lg);font-size:15px}
.wb-forgot-contact{
  padding:12px;margin-bottom:14px;border-radius:var(--radius-lg);
  background:var(--bg);font-size:13.5px;color:var(--txt-2);
}
.wb-forgot-contact b{display:block;margin-top:5px;font-size:15px;color:var(--txt);user-select:all}
.wb-forgot-done .wb-set-tip{text-align:left;margin-bottom:14px}

/* ==================================================================
   首页高级搜索（对标微博 weibo.com 的「高级搜索」面板）
   ================================================================== */
.wb-adv-toggle{
  display:inline-flex;align-items:center;gap:4px;
  height:28px;padding:0 10px;margin-right:6px;border-radius:14px;
  font-size:13px;color:var(--txt-2);cursor:pointer;transition:.15s;
}
.wb-adv-toggle:hover{background:var(--hover);color:var(--brand)}
.wb-adv-toggle.is-on{color:var(--brand);background:var(--brand-weak)}
.wb-adv-arrow{transition:transform .18s}
.wb-adv-toggle.is-open .wb-adv-arrow{transform:rotate(180deg)}

.wb-adv{padding:16px 20px 18px;margin-top:-4px}
.wb-adv-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.wb-adv-row:last-child{margin-bottom:0}
.wb-adv-row > label{
  flex:none;width:48px;padding-top:8px;text-align:right;
  font-size:13.5px;color:var(--txt-2);
}
.wb-adv-row > div{flex:1;min-width:0}

.wb-adv-checks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:8px}
.wb-adv-checks .wb-check{color:var(--txt);font-size:13.5px}
.wb-adv-all{font-size:12.5px;color:var(--txt-3);margin-left:2px}
.wb-adv-all:hover{color:var(--brand)}

.wb-adv input[type=text]{
  width:100%;height:36px;border:1px solid transparent;border-radius:var(--radius-lg);
  padding:0 12px;outline:none;background:var(--bg);font-size:14px;color:var(--txt);
}
.wb-adv input[type=text]:focus{border-color:var(--brand);background:var(--card)}

.wb-adv-dates{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:1px}
.wb-adv-dates input[type=date]{
  height:36px;border:1px solid transparent;border-radius:var(--radius-lg);
  padding:0 10px;outline:none;background:var(--bg);font-size:13.5px;color:var(--txt);
  font-family:inherit;
}
.wb-adv-dates input[type=date]:focus{border-color:var(--brand);background:var(--card)}
.wb-adv-dates > span{font-size:13px;color:var(--txt-3)}
.wb-adv-gap{flex:1}
.wb-adv-dates .wb-btn{height:34px}

@media (max-width:768px){
  .wb-adv{padding:14px}
  .wb-adv-row{display:block}
  .wb-adv-row > label{width:auto;text-align:left;display:block;padding:0 0 6px}
  .wb-adv-checks{padding-top:0;gap:8px 14px}
  .wb-adv-dates{padding-top:0}
  .wb-adv-dates input[type=date]{flex:1;min-width:0}
  .wb-adv-gap{display:none}
  .wb-adv-dates .wb-btn{flex:1;height:38px}
}

/* 移动端页脚：主要是给「电脑版」一个固定的出口 */
.wb-m-foot{
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  text-align:center;font-size:12.5px;color:var(--txt-3);line-height:2;
}
.wb-m-foot a{color:var(--txt-2)}
.wb-m-foot span{margin:0 6px}
@media (max-width:1024px){
body.wb-app:not(.no-tabbar) .wb-m-foot{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
/* 同上，站长自填的一段不该被页脚自己的间距规则改形 */
.wb-m-foot-extra{margin-top:8px}
.wb-m-foot-extra span{margin:0}

/* ---------- 已编辑标记 ---------- */
.wb-edited{
  font-style:normal;color:var(--txt-3);
  border:1px solid var(--line);border-radius:3px;
  padding:0 4px;margin-left:6px;font-size:11px;line-height:1.6;
}

/* ---------- 编辑弹层 ---------- */
.wb-editbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.wb-editbox-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.wb-editbox-panel{
  position:relative;width:100%;max-width:600px;max-height:88vh;overflow-y:auto;
  background:var(--card);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.2);
  padding:16px 20px 14px;
}
.wb-editbox-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);
}
.wb-editbox-hd h3{font-size:16px;font-weight:600}
.wb-editbox-tip{font-size:12.5px;color:var(--txt-3);line-height:1.7;margin-top:2px}

/* 弹层里装的是发帖框本体，去掉它作为独立卡片时的外壳 */
.wb-composer.is-edit{padding:0;background:none;border:none;box-shadow:none}
.wb-composer.is-edit .wb-composer-input{min-height:110px}
.wb-composer.is-edit .wb-composer-hint{min-height:0}

/*
 * ⚠ 工具行在弹层里必须**无条件**收着，不能跟着屏幕宽度走。
 *
 * 上面那几条压宽度的规则全都关在 @media (min-width:1025px) 里 ——
 * 因为内联发帖框只有在宽屏三栏下才挤。但弹层是 max-width:600px 的，
 * **屏幕再宽它也只有 560px 可用**，比中栏还窄。于是在 1025px 以下的窗口里
 * 那些规则不生效，工具行直接顶穿：先是版块名把行撑开，
 * 然后 .wb-editbox-panel 的 overflow 冒出一条横向滚动条，「完成」被推出画面。
 *
 * 触发它的是一个叫「新增版块新增版块新增版块新增版块」的版块 —— 名字多长
 * 是站长的自由，模板不该假设它短。
 */
.wb-composer.is-edit .wb-composer-right{flex-wrap:nowrap;min-width:0}
.wb-composer.is-edit .wb-composer-meta{min-width:0}
.wb-composer.is-edit .wb-composer-meta > .wb-select{max-width:104px}
.wb-composer.is-edit .wb-select.is-elastic{flex:0 1 auto;min-width:76px}
.wb-composer.is-edit .wb-composer-submit{flex:0 0 auto}
/* 超出的版块名出省略号，全名留在 title 里给悬停看 */
.wb-composer.is-edit .wb-select-btn > span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/*
 * 工具按钮在弹层里也只留图标，跟全屏发帖框一个道理：
 * 七个按钮带上文字要占 292px，而弹层的工具行总共只有 560px ——
 * 加上版块、可见范围、字数、「完成」，实测要 607px，差着 47px。
 * 而相机、表情、话题、@ 这些本来就是通用符号，不需要注解。
 */
.wb-composer.is-edit .wb-ctool span{display:none}
.wb-composer.is-edit .wb-ctool{padding-left:7px;padding-right:7px}
/*
 * 「@好友」这个按钮在弹层里收掉。
 *
 * 只留图标之后行还是会满：可见范围从「公开」换成「粉丝可见」就多两个字，
 * 加上一个长版块名，「完成」又被顶到边上。工具行是这一行里唯一还能让的。
 *
 * 挑 @ 而不是别的，是因为它**是唯一一个不点也照样能用的** ——
 * 正文里直接打一个 @ 就会弹出好友列表，跟点这个按钮走的是同一条路，
 * 输入框下面那行提示写的也正是「支持 #话题# 和 @好友」。
 * 换成表情或图片就真的少了一条路。
 */
.wb-composer.is-edit .wb-ctool[data-insert="at"]{display:none}

/*
 * 可见范围也得压一压 —— 它是「公开 / 粉丝可见 / 仅自己」，
 * 最长的比最短的宽出两个字，而站长恰恰是在选了「粉丝可见」时撞上溢出的。
 * 只压版块不压它，等于只修了一半。
 */
.wb-composer.is-edit .wb-composer-meta > .wb-select:last-child{max-width:98px}
/* 兜底：万一以后又多出一个控件，宁可它自己挤，也不要整个弹层横着滚 */
.wb-editbox-panel{overflow-x:hidden}

/*
 * 「更多」菜单改用 fixed 定位（坐标由 app.js 的 placeSelect 算）。
 *
 * 原来是 position:absolute，挂在工具行上 —— 而弹层面板是 overflow:auto 的，
 * 菜单一展开就被面板底边裁掉，只露出半行「附件」。版块那个下拉早就因为
 * 同样的原因改成 fixed 了（见 placeSelect 的注释），这里跟上。
 */
.wb-dropdown.is-fixed{position:fixed;top:0;left:0;right:auto}

@media (max-width:768px){
  .wb-editbox{padding:0;align-items:flex-end}
  .wb-editbox-panel{max-width:none;border-radius:14px 14px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .wb-editbox textarea{min-height:120px;font-size:16px}   /* 16px 以下 iOS 会自动放大页面 */
  .wb-editbox-ft .wb-btn{flex:1;height:38px}
  .wb-editbox-count{flex:none}
}


/* ---------- 会员标识（会员特权②） ----------
   三种形态各自的样式。底色只给文字形态 ——
   图片和 emoji 本身就是彩色的，再垫一层金色渐变会糊成一团。 */
.wb-vip{
  display:inline-flex;align-items:center;flex:none;
  font-style:normal;line-height:1;text-decoration:none;
}
/* 文字：金色胶囊 */
.wb-vip.is-text{
  height:16px;padding:0 6px;border-radius:8px;
  font-size:11px;font-weight:600;
  color:#8a5a00;background:linear-gradient(135deg,#ffe08a,#ffc44d);
}
[data-theme="dark"] .wb-vip.is-text{color:#3a2600;background:linear-gradient(135deg,#e8c264,#d9a441)}
/* emoji：裸放，只调大小 */
.wb-vip.is-emoji{font-size:15px;background:none;padding:0;height:auto}
/* 图片：按行高缩放 */
.wb-vip.is-image{background:none;padding:0;height:auto}
.wb-vip.is-image img{height:16px;width:auto;display:block}

/* ---------- 会员介绍页 ---------- */
.wb-vip-hero{
  padding:26px 24px;border-radius:var(--radius-lg);margin-bottom:14px;
  background:linear-gradient(135deg,#3a3226,#221c14);color:#f5e2b8;
}
.wb-vip-hero h1{font-size:22px;font-weight:600;margin-bottom:8px;color:#ffd98a}
.wb-vip-hero p{font-size:13.5px;line-height:1.9;color:#cbb89a}
.wb-vip-state{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:7px 14px;border-radius:18px;background:rgba(255,255,255,.12);font-size:13px;
}

.wb-vip-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.wb-vip-plan{
  padding:18px 14px;text-align:center;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--card);transition:.15s;
}
.wb-vip-plan:hover{border-color:var(--brand)}
.wb-vip-plan h3{font-size:15px;font-weight:600;margin-bottom:10px}
.wb-vip-plan .price{font-size:26px;font-weight:600;color:var(--brand);line-height:1.2}
.wb-vip-plan .price em{font-size:14px;font-style:normal;margin-right:1px}
.wb-vip-plan .origin{font-size:12.5px;color:var(--txt-3);text-decoration:line-through;margin-top:4px}
.wb-vip-plan .days{font-size:12.5px;color:var(--txt-2);margin-top:8px}

.wb-vip-rights{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wb-vip-right{
  display:flex;gap:10px;padding:13px 14px;border-radius:var(--radius-lg);background:var(--bg);
}
.wb-vip-right .ic{
  flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);
}
.wb-vip-right b{display:block;font-size:13.5px;margin-bottom:3px}
.wb-vip-right span{font-size:12.5px;color:var(--txt-2);line-height:1.7}

.wb-vip-buy{
  margin-top:16px;padding:14px;border-radius:var(--radius-lg);
  background:var(--brand-weak);font-size:13.5px;color:var(--txt-2);line-height:1.9;text-align:center;
}
.wb-vip-buy b{color:var(--txt);font-size:15px;display:block;margin-top:4px;user-select:all}

@media (max-width:768px){
  .wb-vip-plans{grid-template-columns:1fr;gap:10px}
  .wb-vip-rights{grid-template-columns:1fr}
  .wb-vip-hero{padding:20px 16px}
}

.wb-vip:hover{filter:brightness(1.08)}

/* 通用提示弹窗：关闭在右上，正文居左，按钮靠右下 */
.wb-tipbox{position:relative;padding:20px 22px 16px}
.wb-tipbox-x{position:absolute;top:10px;right:10px}
.wb-tipbox-bd{padding-right:26px}          /* 给右上角的关闭按钮让位，别被标题压住 */
.wb-tipbox-bd h3{font-size:16px;font-weight:600;color:var(--txt);line-height:1.5}
.wb-tipbox-bd p{margin-top:8px;font-size:14px;line-height:1.75;color:var(--txt-2)}
.wb-tipbox-ft{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:20px}
.wb-tipbox-ft .wb-btn{height:32px;padding:0 16px}
@media (max-width:768px){
  .wb-tipbox{padding:18px 16px 14px}
  .wb-tipbox-ft{margin-top:16px}
}

/* ---------- 会员套餐选择 / 收银台 / 订单 ---------- */
.wb-vip-plan{position:relative;cursor:pointer;display:block}
.wb-vip-plan input{position:absolute;opacity:0;pointer-events:none}
.wb-vip-plan.is-on{border-color:var(--brand);background:var(--brand-weak)}

.wb-vip-pay{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.wb-vip-pay-row{display:flex;align-items:flex-start;gap:14px}
.wb-vip-pay-row > label{flex:none;width:64px;font-size:13px;color:var(--txt-2);line-height:34px}
.wb-vip-ways{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.wb-vip-way{
  display:inline-flex;align-items:baseline;gap:6px;cursor:pointer;
  padding:0 14px;height:34px;line-height:34px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);transition:.15s;
}
.wb-vip-way input{position:absolute;opacity:0;pointer-events:none}
.wb-vip-way span{font-size:13.5px;color:var(--txt)}
.wb-vip-way em{font-size:12px;color:var(--txt-3);font-style:normal}
.wb-vip-way:hover{border-color:var(--brand)}
.wb-vip-way.is-on{border-color:var(--brand);background:var(--brand-weak)}
.wb-vip-submit{width:100%;height:40px;margin-top:16px;font-size:15px;border-radius:var(--radius-lg)}
.wb-vip-note{margin-top:10px;font-size:12.5px;color:var(--txt-3);line-height:1.8}
.wb-vip-note a{color:var(--brand)}

.wb-cashier{padding:24px}
.wb-cashier-hd{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.wb-cashier-hd h1{font-size:16px;font-weight:500;color:var(--txt-2)}
.wb-cashier-amount{margin-top:8px;font-size:32px;font-weight:500;color:var(--txt)}
.wb-cashier-amount em{font-size:18px;font-style:normal;margin-right:2px}
.wb-cashier-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;padding:16px 0;margin:0}
.wb-cashier-meta > div{display:flex;gap:8px;font-size:13px}
.wb-cashier-meta dt{flex:none;color:var(--txt-3)}
.wb-cashier-meta dd{margin:0;color:var(--txt-2);word-break:break-all}

.wb-cashier-qr{text-align:center;padding:8px 0 4px}
.wb-cashier-qr .qr{
  display:inline-block;padding:12px;background:#fff;   /* 二维码必须白底，暗色主题下不能跟着变 */
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.wb-cashier-qr .tip{margin-top:12px;font-size:13px;color:var(--txt-2)}
.wb-cashier-qr .tip b{color:var(--brand)}
.wb-cashier-jump{text-align:center;padding:14px 0}
.wb-cashier-jump .tip{margin-top:10px;font-size:13px;color:var(--txt-3)}
.wb-cashier-frame{width:100%;height:1px;border:0;visibility:hidden}
.wb-cashier-done,.wb-cashier-dead{text-align:center;padding:20px 0}
.wb-cashier-done .ic{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff}
.wb-cashier-done b,.wb-cashier-dead b{display:block;margin-top:12px;font-size:16px}
.wb-cashier-done p,.wb-cashier-dead p{margin-top:6px;font-size:13px;color:var(--txt-2);line-height:1.8}
.wb-cashier-done a{color:var(--brand)}
.wb-cashier-dead .wb-btn{margin-top:14px}
.wb-cashier-ft{display:flex;align-items:center;gap:9px;padding-top:16px;margin-top:4px;border-top:1px solid var(--line-soft)}
.wb-cashier-hint{margin-left:auto;font-size:12.5px;color:var(--txt-3)}

.wb-order{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.wb-order:last-child{border-bottom:0}
.wb-order-main{flex:1;min-width:0}
.wb-order-main b{display:block;font-size:14px;font-weight:500}
.wb-order-main .no,.wb-order-main .time{font-size:12px;color:var(--txt-3);margin-right:10px}
.wb-order-amount{flex:none;font-size:15px;font-weight:500}
.wb-order-status{flex:none;width:72px;text-align:center;font-size:12.5px;color:var(--txt-3)}
.wb-order-status.is-s1{color:var(--ok)}
.wb-order-act{flex:none;display:flex;gap:8px}
.wb-order-act .wb-btn{height:30px;padding:0 12px;font-size:13px}

@media (max-width:768px){
  .wb-vip-pay-row{flex-direction:column;gap:8px}
  .wb-vip-pay-row > label{line-height:1.6;width:auto}
  .wb-cashier{padding:18px 14px}
  .wb-cashier-meta{grid-template-columns:1fr}
  .wb-order{flex-wrap:wrap}
  .wb-order-main{flex-basis:100%}
  .wb-order-act{margin-left:auto}
}

/* ---------- 长文：信息流里的卡片 ---------- */
/*
 * 整张卡片是一个 <a>，点哪儿都算数 —— 不是「卡片里放一个『阅读全文』链接」。
 * 手机桌面的新闻小组件都是这么干的，逼人去瞄准一行小字没道理。
 */
.wb-artcard{
  display:block;margin-top:10px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card);color:inherit;text-decoration:none;
  transition:border-color .15s;
}
.wb-artcard:hover{border-color:var(--brand)}

.wb-artcard-cover{display:block;background:var(--bg);position:relative;overflow:hidden}
.wb-artcard-cover img{width:100%;height:100%;object-fit:cover;display:block}
/*
 * 没封面时给一块占位，不是把封面区收掉 —— 收掉的话同一条信息流里
 * 会出现两种高度完全不同的长文卡片，滚起来像排版坏了。
 */
.wb-artcard-cover.is-blank{
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);background:var(--brand-weak);
}

.wb-artcard-bd{display:block;padding:12px 14px}
.wb-artcard-title{
  display:block;font-size:16px;font-weight:600;line-height:1.45;color:var(--txt);
  /* 标题最多两行 —— 60 字的标题在窄屏能撑到四行，那时候摘要就被挤没了 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wb-artcard-sum{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:5px;font-style:normal;font-size:13.5px;line-height:1.6;color:var(--txt-2);
}
.wb-artcard-meta{
  display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--txt-3);
}

/* ── 大卡片：封面通栏 ── */
/*
 * ⚠ 用 aspect-ratio 而不是写死高度。
 * 写死高度的话，同一张卡在 640px 的中栏和 375px 的手机上比例完全不同 ——
 * 封面是按 5:2 裁的（编辑器里就是这么提示的），显示时也得是 5:2，
 * 否则站长精心裁的图两头会被 object-fit 咬掉。
 */
.wb-artcard.is-big .wb-artcard-cover{width:100%;aspect-ratio:5/2}

/* ── 小卡片：左图右文 ── */
.wb-artcard.is-mini{display:flex;align-items:stretch}
.wb-artcard.is-mini .wb-artcard-cover{flex:none;width:120px;aspect-ratio:1/1}
.wb-artcard.is-mini .wb-artcard-bd{flex:1;min-width:0;padding:10px 12px}
.wb-artcard.is-mini .wb-artcard-title{font-size:15px;-webkit-line-clamp:2}
.wb-artcard.is-mini .wb-artcard-sum{-webkit-line-clamp:2}
/* 小卡片没封面时，那块占位就没必要了 —— 一个 120px 的空方块比不放更难看 */
.wb-artcard.is-mini.no-cover .wb-artcard-cover{display:none}

/*
 * ⚠ 窄屏下小卡片退化成上下堆叠。
 *
 * 375px 宽还坚持左图右文的话：图占 120，剩 240 给文字，减去内边距还剩 216 ——
 * 16px 的标题一行只能放 13 个字，两行封顶等于标题基本必被截断，
 * 摘要更是挤成两个字一行。这不是「窄一点」，是读不了。
 */
@media (max-width:520px){
  .wb-artcard.is-mini{display:block}
  .wb-artcard.is-mini .wb-artcard-cover{width:100%;aspect-ratio:5/2}
  .wb-artcard.is-mini.no-cover .wb-artcard-cover{display:flex}
}

/* ---------- 长文：阅读页 ---------- */
.wb-article{padding:0;overflow:hidden}
/*
 * 封面通栏、不 lazy —— 它在首屏，是这一页的主视觉。
 * 加 lazy 只会让它晚一拍出来，白白制造一次跳版。
 */
.wb-article-cover{width:100%;aspect-ratio:5/2;background:var(--bg)}
.wb-article-cover img{width:100%;height:100%;object-fit:cover;display:block}

.wb-article-hd{padding:22px 22px 0}
.wb-article-title{
  margin:0;font-size:26px;line-height:1.4;font-weight:700;color:var(--txt);
  word-break:break-word;
}
.wb-article-by{display:flex;align-items:center;gap:10px;margin-top:14px}
.wb-article-by .ava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.wb-article-by .ava img{width:100%;height:100%;object-fit:cover;display:block}
.wb-article-byi{min-width:0}
.wb-article-byi a{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.wb-article-byi em{display:block;font-style:normal;font-size:12.5px;color:var(--txt-3);margin-top:1px}

/*
 * 作者的导语。用左边一条竖线跟正文区分开 ——
 * 它是作者的旁白（「写了三天」「求转发」），不是文章的一部分。
 */
.wb-article-lead{
  margin:18px 22px 0;padding:2px 0 2px 12px;
  border-left:3px solid var(--brand-weak);
  font-size:14px;line-height:1.7;color:var(--txt-2);
}

/* ---------- 长文：正文排版 ---------- */
/*
 * ⚠ 这是全站唯一一处「长时间连续阅读」的版面，所以行高、段距、字号
 * 都比信息流宽松一档：信息流是扫，这里是读。
 */
.wb-article-body{
  padding:20px 22px 24px;
  font-size:16.5px;line-height:1.85;color:var(--txt);word-break:break-word;
}
.wb-article-body > :first-child{margin-top:0}
.wb-article-body p{margin:0 0 1.05em}
/*
 * 正文里的标题从 h2 起（Markdown 渲染器保证的）。
 * 上边距明显大于下边距 —— 标题属于它下面那段，离上一段远一点，
 * 读者才能一眼看出这里换了话题。
 */
.wb-article-body h2{font-size:21px;font-weight:700;line-height:1.45;margin:1.8em 0 .6em}
.wb-article-body h3{font-size:18px;font-weight:600;line-height:1.5;margin:1.6em 0 .5em}
.wb-article-body h4{font-size:16.5px;font-weight:600;line-height:1.5;margin:1.4em 0 .45em}
/*
 * ⚠ 列表符号要**显式要回来**。
 * 全站 reset 里有 `ol,ul{list-style:none}` —— 那是给导航、菜单、
 * 信息流那些「拿列表当容器用」的地方设的，全站九成的 ul 都不该有小圆点。
 * 但正文里的列表是**真列表**，没有序号的「1.2.3.」就只是三行并排的字，
 * 读者看不出它们是一组、更看不出有先后。
 */
.wb-article-body ul,.wb-article-body ol{margin:0 0 1.05em;padding-left:1.6em}
.wb-article-body ul{list-style:disc}
.wb-article-body ol{list-style:decimal}
.wb-article-body li{list-style:inherit}
/* 嵌套时换个符号，否则两层看着一样深 */
.wb-article-body ul ul{list-style:circle}
.wb-article-body li{margin:.32em 0}
.wb-article-body blockquote{
  margin:0 0 1.05em;padding:.5em 0 .5em 1em;
  border-left:3px solid var(--line);color:var(--txt-2);
}
.wb-article-body blockquote > :last-child{margin-bottom:0}
.wb-article-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.wb-article-body a{color:var(--link);word-break:break-all}
.wb-article-body img{max-width:100%;height:auto;border-radius:var(--radius);display:block;margin:1.2em auto}
.wb-article-body code{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  font-size:.88em;background:var(--line-soft);padding:.12em .4em;border-radius:3px;
}
.wb-article-body pre{
  margin:0 0 1.05em;padding:14px 16px;border-radius:var(--radius);
  background:var(--line-soft);overflow-x:auto;
}
.wb-article-body pre code{background:none;padding:0;font-size:13px;line-height:1.7}

/*
 * ⚠ 宽表格必须在自己的容器里横向滚，不能让它撑破页面。
 * 六列的表格在 375px 上放不下是必然的；不给它自己的滚动条，
 * 横向滚的就是整个页面 —— 那时候连正文都跟着左右晃。
 */
.wb-a-tablewrap{overflow-x:auto;margin:0 0 1.05em;-webkit-overflow-scrolling:touch}
.wb-a-tablewrap table{border-collapse:collapse;width:max-content;min-width:100%;font-size:14.5px}
.wb-a-tablewrap th,.wb-a-tablewrap td{
  border:1px solid var(--line);padding:8px 12px;text-align:left;line-height:1.6;
}
.wb-a-tablewrap th{background:var(--bg);font-weight:600;white-space:nowrap}

@media (max-width:1024px){
  .wb-article-hd{padding:16px 14px 0}
  .wb-article-title{font-size:21px}
  .wb-article-lead{margin:14px 14px 0}
  .wb-article-body{padding:16px 14px 20px;font-size:16px;line-height:1.8}
  .wb-article-body h2{font-size:19px}
  .wb-article-body h3{font-size:17px}
}


/* 文章页的作者操作：编辑正文 / 改导语 / 删除 */
.wb-article-own{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.wb-article-own a,.wb-article-own button{
  display:flex;align-items:center;gap:4px;
  padding:6px 9px;border:0;border-radius:var(--radius);
  background:transparent;color:var(--txt-3);font-size:13px;cursor:pointer;
}
.wb-article-own a:hover{background:var(--line-soft);color:var(--brand)}
.wb-article-own button:hover{background:var(--line-soft);color:var(--txt)}
/*
 * 窄屏只留图标。三个词加图标要占 190px —— 375px 减去头像和作者信息，
 * 剩下的宽度放不下，会把「45 字 · 约 1 分钟」那行挤成两行。
 */
@media (max-width:640px){
  .wb-article-own a span,.wb-article-own button span{display:none}
  .wb-article-own a,.wb-article-own button{padding:7px;font-size:0}
}

/*
 * 整页写作时藏掉全局顶栏。
 *
 * ⚠ 跟 is-compose 分开，因为那个还带 overflow:hidden 和 100dvh ——
 * 发帖页是固定一屏，长文编辑器要能一直往下滚。
 * 只借「藏顶栏」这一件事。
 */
body.wb-app.no-top .wb-top{display:none}
body.wb-app.no-top .wb-main{padding-top:0}

/* ---------- 长文编辑器 ---------- */
.wb-aed{max-width:820px;margin:0 auto;padding-bottom:60px;position:relative}

/* ---------- 专属页眉（partials/navbar_editor.php） ---------- */
/*
 * ⚠ 这条页眉里**一个橙色主按钮都不许有**。
 *
 * 原来这一页是 hideTop（整条全站顶栏藏掉），理由是撞车：顶栏右上角那个
 * 橙色「+ 发布」跟编辑器右上角的橙色「下一步」上下只差 58px、左右几乎对齐。
 * 主按钮沉到底栏之后撞车才消失，页眉才能回来 —— 在这儿加回任何
 * .wb-btn-primary，等于在同一个像素位置把坑重挖一遍。
 */
.wb-aednav .wb-top-inner{gap:12px}
/*
 * ⚠ 点击目标至少 36px 高。
 *
 * 体检量出来这个返回键在手机上只有 **20×20** —— 那是图标本身的尺寸，
 * 没有内边距。Apple 建议 44、Google 建议 48dp，20 意味着手指点不准，
 * 而它是这一页主要的退出口：点不中的人会以为页面卡住，
 * 然后按浏览器返回 —— 那条路会撞上「有未保存内容」的拦截。
 */
.wb-aednav-back{
  display:flex;align-items:center;gap:5px;color:var(--txt-2);font-size:14px;flex:none;
  min-height:36px;padding:0 6px;
}
.wb-aednav-back:hover{color:var(--brand)}
.wb-aednav-div{width:1px;height:16px;background:var(--line);flex:none}
.wb-aednav-name{font-size:14px;color:var(--txt);font-weight:600;flex:none}
/* 右边只有两样：保存状态、头像（站长 2026-09-02 定的）*/
.wb-aednav-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.wb-aed-state{font-size:12.5px;color:var(--txt-3);min-width:64px;text-align:right}

/* 草稿 / 已发布的状态牌。已发布的用主色，它是个链接 */
.wb-aed-badge{
  /* 同上：已发布那个是链接（点去看线上），22px 高够不准 */
  flex:none;display:inline-flex;align-items:center;
  min-height:32px;padding:0 9px;border-radius:16px;
  font-size:11.5px;line-height:1;
  background:var(--line-soft);color:var(--txt-3);
}
.wb-aed-badge.is-live{background:var(--brand-weak);color:var(--brand)}
.wb-aed-badge.is-live:hover{background:var(--brand);color:#fff}

/* ---------- 底部固定操作条（对标知乎，实测 52px） ---------- */
/*
 * ⚠ 主操作在这儿，不在右上角 —— 见上面那段撞车的注释。
 *
 * ⚠ fixed 不是 sticky：sticky 要靠祖先的滚动容器，而 .wb-aed 是
 * 普通文档流里的块，滚到底之后它会跟着走上去，最需要它的那一刻反而没了。
 */
.wb-aed-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:52px;display:flex;align-items:center;gap:14px;
  padding:0 20px;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -1px 6px rgba(0,0,0,.05);
}
/* 内容跟正文对齐，别贴着屏幕两边 */
.wb-aed-bar > *{position:relative}
@media (min-width:861px){
  .wb-aed-bar{padding:0 calc(50% - 410px)}
}
.wb-aed-set{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  min-height:32px;padding:0 12px;border-radius:16px;
  border:1px solid var(--line);background:transparent;
  color:var(--txt-2);font-size:13px;cursor:pointer;
}
.wb-aed-set:hover{border-color:var(--brand);color:var(--brand)}
/*
 * 箭头指的是**这一下会往哪走**：
 *   平时      ⌄ 往下（滚到发布设置）
 *   已经在那儿 ⌃ 往上（回到顶部）
 * 光换文字不换箭头的话，两个状态一眼分不出来。
 */
.wb-aed-set .ico{transition:transform .18s}
.wb-aed-set.is-up .ico{transform:rotate(180deg)}

.wb-aed-words{font-size:12.5px;color:var(--txt-3);font-variant-numeric:tabular-nums;flex:none}

/*
 * 「未设特色图」那句提示。
 * 说的是**会发生什么**，不是「你还没设置」—— 后者是在指责，
 * 而且不告诉他不设的后果。
 */
.wb-aed-tip{
  display:inline-flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;
  font-size:12px;color:var(--txt-3);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.wb-aed-tip .ico{flex:none;opacity:.7}

/* 「预览」和主按钮贴右 —— 靠这一条，不靠某个可能被隐藏的元素撑开 */
.wb-aed-preview{flex:none;margin-left:auto}
.wb-aed-bar .wb-btn-primary{flex:none}

.wb-aed-paper{background:var(--card);border-radius:var(--radius-lg);overflow:hidden}
/*
 * ⚠ 给底栏让出位置。
 * 底栏是 fixed 的，不占文档流 —— 不留这段的话，正文最后几行
 * 和特色图会被它压在底下，而那正是「特色图在正文之后」的落点。
 */
.wb-aed{padding-bottom:96px}


/* ---- 封面：发布设置里的一个小方块（对标知乎） ---- */
/*
 * ⚠ 它现在是**设置区里的一行**，不是正文上方那条整幅横幅。
 *
 * 三个位置的账（详见 article_edit.php 里那段注释）：
 *   最上面 → 820px 宽的 5:2 是 328px，一打开编辑器首屏几乎全被它占掉；
 *   正文下面 → 首屏还给正文了，但它既不属于内容也不属于设置；
 *   发布设置里 → 它本来就是一项发布设置，跟版块、可见范围同类。
 *
 * ⚠ 预览框收成 190×120，**但真实比例仍然是 5:2** ——
 * 裁图、信息流卡片、阅读页都按 5:2，站长裁一次到处都对得上。
 * 这里只是不让设置区里的一行比正文还抢眼。
 */
.wb-aed-cover{
  position:relative;width:190px;height:120px;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;background:var(--bg);
}
.wb-aed-cover.is-empty{
  background:transparent;
  border:1px dashed var(--line-2,var(--line));
}
.wb-aed-cover.is-empty:hover{border-color:var(--brand);background:var(--brand-weak)}
.wb-aed-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wb-aed-coverhint{
  display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--txt-3);text-align:center;padding:0 10px;
}
.wb-aed-cover.is-empty .wb-aed-coverhint{display:flex}
.wb-aed-coverhint .ico{display:none}   /* 方块里放不下图标又放文字，留文字 */
.wb-aed-coverhint b{font-size:13.5px;font-weight:400;color:var(--txt-2)}
.wb-aed-coverhint em{font-style:normal;font-size:11.5px;line-height:1.5}
.wb-aed-cover:hover .wb-aed-coverhint{color:var(--brand)}
.wb-aed-coverdel{
  display:none;position:absolute;top:6px;right:6px;
  width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);color:#fff;
}
.wb-aed-cover:not(.is-empty):hover .wb-aed-coverdel{display:flex}

/* ---- 标题 / 摘要 ---- */
/*
 * ⚠ 标题是 textarea 不是 input。
 * 60 字的中文标题在窄屏要换两三行，input 是单行的、只能横向滚 ——
 * 写到一半看不见开头，改个错字得来回拖。
 */
.wb-aed-title,.wb-aed-sum{
  display:block;width:100%;border:0;outline:0;resize:none;background:transparent;
  color:var(--txt);font-family:inherit;
}
.wb-aed-title{
  padding:22px 22px 10px;font-size:26px;font-weight:700;line-height:1.4;
  field-sizing:content;min-height:1.4em;
}
.wb-aed-sum{
  padding:0 22px 16px;font-size:14px;line-height:1.7;color:var(--txt-2);
  field-sizing:content;
}
.wb-aed-title::placeholder{color:var(--txt-3);font-weight:700}
.wb-aed-sum::placeholder{color:var(--txt-3)}

/* ---- 工具条 ---- */
/*
 * ⚠ 也 sticky，贴在顶栏下面。
 * 写到第三屏还得滚回去点「加粗」的话，这条工具条等于没有。
 *
 * 每个按钮**图标在上、中文标签在下**（学瓜奇）。纯图标的话，
 * 「¶」「Tt」这类要猜，而猜错的代价是排版乱了还不知道怎么撤。
 */
.wb-aed-tools{
  /* 叠在顶栏下面：横幅高度 + 顶栏那 53px */
  position:sticky;top:calc(var(--imp-h) + 53px);z-index:15;
  display:flex;align-items:center;gap:1px;flex-wrap:wrap;
  padding:6px 14px;background:var(--card);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.wb-aed-tool{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:46px;padding:5px 4px;border:0;border-radius:var(--radius);
  background:transparent;color:var(--txt-2);cursor:pointer;
}
.wb-aed-tool span{font-size:11px;line-height:1;white-space:nowrap}
.wb-aed-tool:hover{background:var(--line-soft);color:var(--txt)}
.wb-aed-tool:active{transform:scale(.94)}
.wb-aed-sep{width:1px;height:22px;background:var(--line);margin:0 5px;flex:none}

/* ---- 正文 ---- */
/*
 * ⚠ 正文的排版跟阅读页**保持一致**（对照 .wb-article-body）。
 * 编辑时和发布后长得不一样的话，用户按编辑器里的样子调好版，
 * 发出去发现是另一个东西 —— 那预览和排版功能就都成了负资产。
 */
.wb-aed-body{
  /* ⚠ relative 是给占位符当定位参照的，见下面那条 ::before */
  position:relative;
  padding:20px 22px 60px;min-height:420px;outline:0;
  font-size:16.5px;line-height:1.85;color:var(--txt);word-break:break-word;
}
/*
 * ⚠ 占位符不能只判 :empty。
 *
 * JS 在空文档里会先塞一个 `<p><br></p>` —— 不塞的话第一次敲字，
 * 浏览器直接往根上写裸文本节点，后面点「标题」时 formatBlock 找不到
 * 块级容器，什么也不会发生。
 *
 * 于是 :empty 永远不成立，占位符**一次都没显示过**：用户打开编辑器
 * 看到的是一大片纯白，连「这儿是正文」都没说。
 * 实际点开才发现的 —— 单看 CSS 和单看 JS 都是对的，是两边合起来错了。
 */
/*
 * ⚠ 占位符必须**绝对定位**，不能留在文档流里。
 *
 * ::before 的内容是行内的，而它前面紧跟着一个块级的 <p> ——
 * 行内内容会被包进一个匿名块盒，排在那个 <p> 的**上面**。
 * 结果就是：提示语在第一行，光标在第二行，中间空一截，
 * 看着像编辑器自己先敲了个回车。
 *
 * 拿出文档流覆盖上去就对齐了。
 *
 * ⚠ 用 padding:inherit 而不是写死 20px/22px —— 窄屏那套是
 * 16px/14px，写死的话手机上提示语会偏出去几像素。
 * inherit 让它永远跟着正文的内边距走。
 */
.wb-aed-body:empty::before,
.wb-aed-body:has(> p:only-child:empty)::before,
.wb-aed-body:has(> p:only-child > br:only-child)::before{
  content:attr(data-placeholder);
  position:absolute;top:0;left:0;right:0;
  padding:inherit;
  color:var(--txt-3);pointer-events:none;
}
.wb-aed-body > :first-child{margin-top:0}
.wb-aed-body p{margin:0 0 1.05em}
.wb-aed-body h2{font-size:21px;font-weight:700;line-height:1.45;margin:1.8em 0 .6em}
.wb-aed-body h3{font-size:18px;font-weight:600;line-height:1.5;margin:1.6em 0 .5em}
.wb-aed-body ul,.wb-aed-body ol{margin:0 0 1.05em;padding-left:1.6em}
.wb-aed-body ul{list-style:disc}
.wb-aed-body ol{list-style:decimal}
.wb-aed-body li{margin:.32em 0;list-style:inherit}
.wb-aed-body blockquote{
  margin:0 0 1.05em;padding:.5em 0 .5em 1em;
  border-left:3px solid var(--line);color:var(--txt-2);
}
.wb-aed-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.wb-aed-body a{color:var(--link)}
.wb-aed-body img{max-width:100%;height:auto;border-radius:var(--radius);display:block;margin:1.2em auto}
.wb-aed-body code{
  font-size:.88em;background:var(--line-soft);padding:.12em .4em;border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.wb-aed-body pre{
  margin:0 0 1.05em;padding:14px 16px;border-radius:var(--radius);
  background:var(--line-soft);overflow-x:auto;
}
.wb-aed-body pre code{background:none;padding:0;font-size:13px;line-height:1.7}
/* 编辑器里的表格要看得见格子，否则不知道光标在哪一格 */
.wb-aed-body table{border-collapse:collapse;width:100%;margin:0 0 1.05em;font-size:14.5px}
.wb-aed-body th,.wb-aed-body td{border:1px solid var(--line);padding:8px 12px;min-width:60px}
.wb-aed-body th{background:var(--bg);font-weight:600}

/* ---- 预览 ---- */
/*
 * ⚠ 用绝对定位盖在编辑区上，不用 position:fixed。
 * fixed 在 iOS 上跟软键盘和地址栏收缩打架，滚动会卡住 ——
 * 而预览恰恰是要滚着看的。
 */
.wb-aed-pv{
  /*
   * ⚠ z-index 必须**低于顶栏**（顶栏是 20，这里 18）。
   *
   * 第一版写的是 30，结果预览层把顶栏一起盖住了 —— 屏幕上只剩预览内容，
   * 「预览」按钮、「下一步」、返回链接**一个都看不见**。
   * 点开预览就出不去了，只能刷新页面或者按浏览器返回，
   * 而刷新意味着用户以为自己刚写的东西没了。
   *
   * 这个是自己点开预览才发现的：单看 CSS，「absolute + inset:0 盖住编辑区」
   * 完全说得通 —— 漏掉的是「顶栏也在这个容器里」。
   *
   * padding-top 给顶栏让位，否则预览的封面和标题会藏在顶栏后面。
   */
  position:absolute;inset:0;z-index:18;background:var(--bg);
  overflow-y:auto;padding:54px 0 60px;
}
.wb-aed-pvcover{width:100%;aspect-ratio:5/2;background:var(--bg)}
.wb-aed-pvcover img{width:100%;height:100%;object-fit:cover;display:block}
.wb-aed-pv .wb-article-title{padding:22px 22px 0;margin:0}
.wb-aed-pv .wb-article-body{padding:16px 22px 24px}

/* ---- 发布设置 ---- */
/* ---------- 发布设置：正文下面摊开的一区（对标知乎） ---------- */
/*
 * ⚠ 不是弹层，也不是第二屏 —— 是页面的一部分。
 *
 * 它经历过两版：整屏覆盖（微博式两步）、从底栏升起的面板。
 * 两版共同的毛病是**有开合状态**：用户得先知道「还有一层东西」
 * 才会去点开，而里面六项里有五项他多半想看一眼。
 *
 * 摊开在正文下面之后，「写完往下滚」就顺路看见了 ——
 * 而那本来就是发布前会做的动作。知乎是这么做的。
 */
.wb-aed-pub{margin-top:14px}
.wb-aed-pubbox{
  background:var(--card);border-radius:var(--radius-lg);
  padding:22px 26px 24px;
}
.wb-aed-pubbox h3{margin:0 0 20px;font-size:17px;font-weight:600}

/*
 * ⚠ 标签在左、控件在右的两列（知乎那样），不是标签压在控件上面。
 *
 * 六行设置堆成上下结构会很长，用户滚过去只看见一串标题；
 * 两列之后标签成了一条可以纵向扫的索引，找「版块」不用逐行读。
 */
.wb-aed-f{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  align-items:start;column-gap:16px;row-gap:6px;margin-bottom:18px;
}
.wb-aed-f > span{
  font-size:13.5px;color:var(--txt-2);line-height:32px;
  grid-column:1;
}
/* 说明文字跟控件对齐（第二列），不缩回标签那一列 */
.wb-aed-f > em{grid-column:2}
.wb-aed-f > textarea,.wb-aed-f > select,.wb-aed-f > div{grid-column:2;min-width:0}

.wb-aed-f textarea,.wb-aed-f select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--txt);font-size:14px;font-family:inherit;
  outline:0;resize:none;
}
.wb-aed-f textarea:focus,.wb-aed-f select:focus{border-color:var(--brand)}
.wb-aed-f em{
  display:block;margin-top:6px;font-style:normal;
  font-size:12px;line-height:1.6;color:var(--txt-3);
}
.wb-aed-pubact{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
/* 转回草稿：靠左、弱化 —— 罕用且要想一下的动作，不跟「保存」抢注意力 */
.wb-aed-unpub{margin-right:auto;color:var(--txt-3)}
.wb-aed-unpub:hover{color:var(--danger,#e5484d)}

@media (max-width:1024px){
  /*
   * ⚠ 窄屏上底栏和页眉都装不下全部内容，得按「丢了最不心疼」的顺序收。
   *
   * 历史教训（留着）：这块原来管的是那条 sticky 顶栏 —— 一篇已发布的
   * 文章顶栏有七样，加起来 503px，在 375px 上横向溢出 128px，
   * 最右边的「保存修改」整个跑到屏幕外，**手机上写完的文章根本存不了**。
   * 那是阻断级的，而 CSS 里每一条单看都对。
   *
   * 现在东西分到了页眉和底栏两处，压力小了，但规矩不变：
   * **动作按钮一个都不许收**（预览、发布设置、主按钮），
   * 收的只能是参考信息。
   */
  /* 页眉：站名文字、「我的文章」四个字、分隔线、篇名 —— 都是标识不是动作 */
  .wb-aednav .wb-logo-text{display:none}
  .wb-aednav-back span{display:none}
  .wb-aednav-div{display:none}
  .wb-aednav-name{display:none}
  .wb-aednav .wb-top-inner{gap:10px;padding:0 12px}
  .wb-aed-badge{
    /* 「已发布 · 看线上」在窄屏只留「已发布」，点击照旧 */
    max-width:52px;overflow:hidden;white-space:nowrap;padding:2px 6px;
  }
  /*
   * 保存状态挤到 min-width:64px 会把头像顶出去，改成能压缩、能省略。
   * 「已保存」被压成「已保…」也没关系 —— 用户瞄的是「有没有在动」，
   * 而「未保存 / 保存中…」这两个要紧的本来就短。
   */
  .wb-aed-state{
    min-width:0;flex:0 1 auto;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
  }

  /*
   * 底栏：字数和那句特色图提示先收。
   *
   * ⚠ 提示这一句在窄屏是真的放不下（「未设特色图，将自动用正文第一张图」
   * 一行 16 个字 ≈ 192px，而 375px 上底栏总共才 335px 可用，
   * 还要装发布设置 + 预览 + 发布）。收掉它不等于不提示 ——
   * 特色图那一块本身就在正文正下方，窄屏滚到底一眼就看得见，
   * 反倒是宽屏因为正文长才更需要这句话。
   */
  .wb-aed-bar{gap:10px;padding:0 12px}
  .wb-aed-words{display:none}
  .wb-aed-tip{display:none}
  .wb-aed-bar .wb-btn{flex:none;padding-left:13px;padding-right:13px}

  /*
   * 窄屏：发布设置那一区改回**上下结构**。
   * 96px 的标签列在 375px 上会把控件挤到 200px 出头，
   * 「不选版块」这种四个字的下拉都显得局促。
   */
  .wb-aed-pubbox{padding:16px 14px 18px;border-radius:0}
  .wb-aed-f{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .wb-aed-f > span{line-height:1.6;margin-bottom:2px}
  .wb-aed-f > em,
  .wb-aed-f > textarea,.wb-aed-f > select,.wb-aed-f > div{grid-column:1}

  .wb-aed-paper{border-radius:0}
  .wb-aed-title{padding:16px 14px 8px;font-size:21px}
  .wb-aed-sum{padding:0 14px 12px}
  /*
   * 窄屏工具条横向滚，不换行。
   * 16 个按钮在 375px 上换行要占三行，正文就没剩多少了 ——
   * 而工具条是 sticky 的，那三行会一直杵在那儿。
   */
  .wb-aed-tools{
    flex-wrap:nowrap;overflow-x:auto;padding:5px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /*
     * ⚠ 右边缘做一道渐隐，暗示「还能往右滑」。
     *
     * 16 个按钮在 375px 上只露得出 8 个 —— 引用、代码、分割线、表格、
     * 链接、图片**全在屏幕外**，而横滑条被我隐藏了（scrollbar-width:none），
     * 页面上没有任何东西说明右边还有内容。
     * 用户会以为这个编辑器只有八个功能。
     *
     * 用 mask 而不是叠一层渐变 div：不占 DOM，也不会挡住按钮的点击。
     */
    -webkit-mask:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .wb-aed-tools::-webkit-scrollbar{display:none}
  .wb-aed-tool{min-width:42px}
  /*
   * ⚠ 正文区要**吃掉剩下的整屏**。
   *
   * 原来是 min-height:300px —— 375×812 上正文只到 543，下面留 269px 灰色
   * （整整三分之一屏）。而点那片灰**光标不会进正文**（命中的是外层容器），
   * 手机上想接着写只能去戳最后一行文字，戳不准就什么也没发生。
   *
   * 减去的是顶栏 51 + 封面空态 72 + 标题一行 + 工具条 —— 用 vh 减一个
   * 保守的常数，不够精确但只会偏大（多出来的部分照样是可点的正文区），
   * 而偏大不会有任何坏处：本来就该能一直往下写。
   */
  .wb-aed-body{
    padding:16px 14px 60px;font-size:16px;
    min-height:calc(100dvh - 240px);
  }
  .wb-aed-pv .wb-article-title{padding:16px 14px 0;font-size:21px}
  .wb-aed-pv .wb-article-body{padding:14px}
}

/* ---------- 我的文章 ---------- */
.wb-amine{padding:0}
.wb-amine-hd{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
.wb-amine-tabs{display:flex;gap:18px;flex:1;min-width:0}
.wb-amine-tabs a{
  position:relative;padding:6px 0;font-size:15px;color:var(--txt-2);white-space:nowrap;
}
.wb-amine-tabs a.is-active{color:var(--txt);font-weight:600}
.wb-amine-tabs a.is-active::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:1px;background:var(--brand);
}
.wb-amine-hd .wb-btn{flex:none;display:flex;align-items:center;gap:4px}

.wb-amine-deny{
  display:flex;align-items:center;gap:7px;
  padding:11px 16px;background:var(--brand-weak);color:var(--brand);
  font-size:13.5px;line-height:1.6;
}

.wb-amine-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line-soft);
}
.wb-amine-row:last-of-type{border-bottom:0}
.wb-amine-main{display:flex;gap:12px;flex:1;min-width:0;color:inherit}
.wb-amine-cover{
  flex:none;width:84px;aspect-ratio:5/2;border-radius:var(--radius);
  overflow:hidden;background:var(--bg);
}
.wb-amine-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wb-amine-txt{display:block;flex:1;min-width:0}
.wb-amine-txt b{
  display:block;font-size:15px;font-weight:600;line-height:1.5;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-amine-txt em{
  display:block;margin-top:3px;font-style:normal;font-size:13px;line-height:1.5;
  color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-amine-txt i{
  display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--txt-3);
}
.wb-amine-main:hover .wb-amine-txt b{color:var(--brand)}

.wb-amine-act{display:flex;gap:4px;flex:none}
.wb-amine-act a,.wb-amine-act button{
  display:flex;align-items:center;justify-content:center;gap:4px;
  /* 列表里每行两个操作，34×30 在手机上挨得太近，容易点成隔壁那个 */
  min-height:36px;min-width:36px;
  padding:6px 9px;border:0;border-radius:var(--radius);
  background:transparent;color:var(--txt-3);font-size:13px;cursor:pointer;
}
.wb-amine-act a:hover{background:var(--line-soft);color:var(--txt)}
.wb-amine-act button:hover{background:var(--line-soft);color:var(--danger,#e5484d)}

/*
 * ⚠ 窄屏把操作按钮的文字收掉，只留图标。
 * 「编辑」「删除」两个词加上图标要占 130px —— 375px 减去封面 84 和内边距，
 * 留给标题的就剩一百出头，一行放不下五个字。
 */
@media (max-width:520px){
  .wb-amine-row{padding:12px 14px;gap:10px}
  .wb-amine-cover{width:68px}
  .wb-amine-act a span,.wb-amine-act button span{display:none}
  .wb-amine-act a,.wb-amine-act button{
    padding:7px;font-size:0;
  }
}

/* ---------- /compose 顶部的「动态 | 文章」 ---------- */
/*
 * 只在全屏发帖页出现。悬浮发布键不加这一层 ——
 * 那是最高频入口，点一下直接开始写才对。
 */
.wb-cf-seg{
  display:flex;align-items:center;gap:2px;
  margin:10px auto 0;padding:2px;width:max-content;
  border-radius:999px;background:var(--line-soft);
}
.wb-cf-seg span,.wb-cf-seg a{
  padding:5px 18px;border-radius:999px;font-size:14px;
  color:var(--txt-2);line-height:1.5;
}
.wb-cf-seg .is-active{background:var(--card);color:var(--txt);font-weight:500}
.wb-cf-seg a:hover{color:var(--brand)}

/* ---------- 投票 ---------- */
.wb-poll{
  margin-top:10px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--bg);
}
.wb-poll-hd{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.wb-poll-tag{
  flex:none;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;
  border-radius:4px;background:var(--brand);color:#fff;font-size:11.5px;
}
.wb-poll-hd h4{font-size:15px;font-weight:500;line-height:1.5;color:var(--txt)}
.wb-poll-body{display:flex;flex-direction:column;gap:8px}

/* 未投票：可点的选项 */
.wb-poll-opt{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
  font-size:14px;color:var(--txt);cursor:pointer;transition:.15s;
}
.wb-poll-opt:hover{border-color:var(--brand)}
.wb-poll-opt.is-on{border-color:var(--brand);background:var(--brand-weak)}
.wb-poll-tick{
  flex:none;width:15px;height:15px;border:1px solid var(--ctrl-line);border-radius:50%;
  background:var(--card);position:relative;transition:.15s;
}
.wb-poll-tick.is-multi{border-radius:3px}
.wb-poll-opt.is-on .wb-poll-tick{background:var(--brand);border-color:var(--brand)}
.wb-poll-opt.is-on .wb-poll-tick::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:3px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.wb-poll-opt.is-on .wb-poll-tick:not(.is-multi)::after{
  left:50%;top:50%;width:5px;height:5px;border:0;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}

/* 已投票 / 已结束：结果条 */
.wb-poll-row{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--card);border:1px solid var(--line);
}
.wb-poll-bar{
  position:absolute;left:0;top:0;bottom:0;background:var(--brand-weak);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.wb-poll-row.is-top .wb-poll-bar{background:color-mix(in srgb, var(--brand) 22%, transparent)}
.wb-poll-row.is-mine{border-color:var(--brand)}
.wb-poll-row-in{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:9px 12px;font-size:14px;
}
.wb-poll-row-in .t{display:flex;align-items:center;gap:5px;min-width:0;word-break:break-word}
.wb-poll-me{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:14px;height:14px;border-radius:50%;background:var(--brand);color:#fff;
}
.wb-poll-row-in .n{flex:none;font-size:13px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.wb-poll-row-in .n em{font-style:normal;color:var(--txt-3);margin-left:6px;font-size:12px}

.wb-poll-act{display:flex;align-items:center;gap:10px;margin-top:12px}
.wb-poll-submit{height:32px;padding:0 20px}
.wb-poll-peek{font-size:13px;color:var(--brand);cursor:pointer}
.wb-poll-peek:hover{text-decoration:underline}
.wb-poll-deny{font-size:13px;color:var(--txt-3)}
.wb-poll-ft{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--txt-3);
}
.wb-poll-ft .is-ended{color:var(--txt-3)}
.wb-poll.is-ended .wb-poll-tag{background:var(--txt-3)}

/* 发帖框里的投票摘要条 */
.wb-composer-poll{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;
  border:1px dashed var(--brand);border-radius:var(--radius-lg);
  background:var(--brand-weak);font-size:13px;
}
.wb-composer-poll b{font-weight:500;color:var(--txt)}
.wb-composer-poll span{flex:1;min-width:0;color:var(--txt-3);font-size:12px}
.wb-composer-poll button{flex:none;font-size:12.5px;color:var(--brand);cursor:pointer}
.wb-composer-poll button:hover{text-decoration:underline}
.wb-composer-poll [data-poll-drop]{display:inline-flex;color:var(--txt-3)}
.wb-composer-poll [data-poll-drop]:hover{color:var(--danger)}
/*
 * 只读的那三块（编辑时已有的投票 / 红包 / 隐藏内容）。
 *
 * 样式要跟能编辑的 chip **一眼分得开**：实线灰框 + 灰底，
 * 而不是主色虚线框。虚线加主色在这套界面里一直表示「这是你刚加的、
 * 还能改」，用在改不了的东西上，人会去找那个不存在的「修改」按钮。
 */
.wb-composer-poll.is-locked{
  border-style:solid;border-color:var(--line);background:var(--bg);
}
.wb-composer-poll.is-locked svg{color:var(--txt-3)}
.wb-composer-poll.is-locked b{color:var(--txt-2)}

/* 发起投票的弹窗 */
/* ---------- 热搜完整榜单页 ---------- */
.wb-hotpage-hd{
  display:flex;align-items:baseline;gap:12px;padding:16px 18px 12px;
}
.wb-hotpage-hd h1{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:600;color:var(--txt)}
.wb-hotpage-hd h1 svg{color:#f5222d}
.wb-hotpage-hd span{font-size:12.5px;color:var(--txt-3)}

/* 分类切换。横排而不是照微博放左栏：我们中栏本来就窄，
   再分一个纵向导航出去，榜单就只剩一条缝了 */
.wb-hotcats{
  display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 14px;
  border-bottom:1px solid var(--line-soft);
}
.wb-hotcats a{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:15px;font-size:13px;
  color:var(--txt-2);background:var(--bg);transition:.15s;
}
.wb-hotcats a:hover{color:var(--brand)}
.wb-hotcats a.is-on{color:#fff;background:var(--brand)}
.wb-hotcats em{font-style:normal;font-size:11px;opacity:.65}

.wb-hotrank{padding:6px 0 10px}
.wb-hotrank-item{
  display:flex;align-items:center;gap:12px;padding:11px 18px;transition:.12s;
}
.wb-hotrank-item:hover{background:var(--bg)}
.wb-hotrank-item .wb-rank-no{width:20px;height:20px;line-height:20px;font-size:12px}
.wb-hotrank-key{flex:1;min-width:0;display:flex;align-items:center;gap:7px}
.wb-hotrank-key b{
  font-size:14.5px;font-weight:400;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-hotrank-item:hover .wb-hotrank-key b{color:var(--brand)}
/* 前三名加粗：榜单第一眼要能看出谁在头部 */
.wb-hotrank-item:nth-child(-n+3) .wb-hotrank-key b{font-weight:500}
.wb-hotrank-hot{
  flex:none;font-style:normal;font-size:12.5px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}

@media (max-width:1024px){
body.wb-app .wb-hotpage-hd{padding:14px 14px 10px}
}
@media (max-width:1024px){
body.wb-app .wb-hotcats{padding:0 12px 12px}
}
@media (max-width:1024px){
body.wb-app .wb-hotrank-item{padding:10px 14px;gap:10px}
}

/* ---------- 模拟登录横幅 ---------- */
/*
 * 管理员切过去看两眼很容易忘了自己还在别人账号里，之后点的每个赞、
 * 发的每条评论都记在人家头上。所以这条要够扎眼、要常驻、退出按钮要一直在手边。
 */
body.has-imp{--imp-h:36px}
/* ==================== 站点公告 ==================== */
/*
 * 三个出口共用一套配色，级别名跟 Announcement::LEVELS 的键一一对应。
 * 对不上的话后台选了「重要（红）」前台还是蓝的，而且不报错。
 */

/* ---------- 顶部通栏 ---------- */
/*
 * ⚠ 跟身份切换那条横幅共用 --imp-h 的让位机制。
 * 两条同时出现时高度要**相加** —— 只让一条的位的话，第二条会盖住顶栏，
 * 而顶栏是 fixed 的，盖住了就点不到（has-imp2 就是干这个的）。
 */
body.has-imp2{--imp-h:72px}
.wb-annbar{
  position:fixed;left:0;right:0;z-index:110;
  height:36px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 44px 0 16px;
  font-size:13px;line-height:1.4;
  border-bottom:1px solid rgba(0,0,0,.06);
}
/* 单独出现时贴顶；跟身份横幅同时出现时排在它下面 */
.wb-annbar{top:0}
body.has-imp2 .wb-annbar{top:36px}

/*
 * 配色：浅底 + 同色系深字，不用饱和底色配白字。
 *
 * 公告栏是**常驻在顶上**的，一整块饱和红横在那儿，
 * 看两眼就变成干扰 —— 而干扰的下场是被心理屏蔽，
 * 真有要紧事的那一次也一样没人看。
 * 浅底色能跟顶栏接得上，又靠字色把级别区分开。
 */
.wb-annbar.is-info  {background:#e8eefc;color:#2a4a9e}
.wb-annbar.is-warn  {background:#fdf0e0;color:#96530f}
.wb-annbar.is-danger{background:#fbe8e8;color:#9f2c2c}

[data-theme="dark"] .wb-annbar{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .wb-annbar.is-info  {background:#1b2540;color:#a9c2f5}
[data-theme="dark"] .wb-annbar.is-warn  {background:#2e2114;color:#f0be84}
[data-theme="dark"] .wb-annbar.is-danger{background:#2e1919;color:#f0a3a3}

.wb-annbar svg{flex:none;opacity:.85}
/* 标题过长时省略，不许换行 —— 通栏是定高的，换行会把字挤出去 */
.wb-annbar b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*
 * 标题里允许写 HTML，所以要防一手：站长粘了个 &lt;div&gt; 进来的话，
 * 它会把 36px 的通栏撑成两行、把整个顶栏顶下去。强制行内之后
 * 最差也只是样式不如预期，不会撑坏布局。
 */
.wb-annbar b *{display:inline;vertical-align:baseline;margin:0;padding:0}
/* 图片不藏起来（藏了站长会以为自己写错了），按行高压住就行 */
.wb-annbar b img{height:1em;width:auto;vertical-align:-.15em}
/* 标题里的链接跟着级别色走，只靠下划线区分 —— 再换个颜色就三种色挤在一行里了 */
.wb-annbar b a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* 侧栏列表里同理：标题写了 HTML 也不能把那一行撑开 */
.wb-ann-list a *,.wb-ann-list button *{display:inline;vertical-align:baseline;margin:0;padding:0}
.wb-ann-list img{height:1em;width:auto;vertical-align:-.15em}
/*
 * 按钮用 currentColor 描边而不是填色：浅底上再放一块色块，
 * 两块浅色挤在一起反而看不出哪个是可点的。
 */
.wb-annbar-more{
  flex:none;padding:2px 11px;border-radius:12px;cursor:pointer;
  border:1px solid currentColor;color:inherit;background:transparent;
  font-size:12.5px;opacity:.85;transition:.15s;
}
.wb-annbar-more:hover{opacity:1;background:rgba(0,0,0,.05)}
[data-theme="dark"] .wb-annbar-more:hover{background:rgba(255,255,255,.1)}
/* 关闭键钉在右边，不参与居中 —— 参与的话标题会被它挤得偏左 */
.wb-annbar-x{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:flex;padding:5px;border-radius:50%;color:inherit;opacity:.55;cursor:pointer;
}
.wb-annbar-x:hover{opacity:1;background:rgba(0,0,0,.07)}
[data-theme="dark"] .wb-annbar-x:hover{background:rgba(255,255,255,.12)}

/* ---------- 进站弹窗 ---------- */
.wb-npop{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px}
.wb-npop[hidden]{display:none}
.wb-npop-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.wb-npop-panel{
  position:relative;width:100%;max-width:440px;max-height:80vh;overflow-y:auto;
  background:var(--card);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.22);
  padding:20px 22px 16px;
}
.wb-npop-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--brand)}
.wb-npop-hd h3{font-size:16.5px;font-weight:600;color:var(--txt)}
.wb-npop-body{font-size:14px;line-height:1.85;color:var(--txt-2);word-break:break-word}
.wb-npop-body p{margin:0 0 8px}
.wb-npop-body a{color:var(--brand)}
.wb-npop-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ---------- 侧栏列表 ---------- */
.wb-ann-list{list-style:none;margin:0;padding:2px 0}
.wb-ann-list li{display:flex;align-items:center;gap:8px;padding:6px 0}
.wb-ann-list a,.wb-ann-list button{
  flex:1;min-width:0;text-align:left;font-size:13.5px;color:var(--txt-2);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-ann-list a:hover,.wb-ann-list button:hover{color:var(--brand)}
/* 级别只用一个小圆点 —— 侧栏本来就窄，每条套个色块会很吵 */
.wb-ann-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#1d4ed8}
.wb-ann-dot.is-warn{background:#c2410c}
.wb-ann-dot.is-danger{background:#b91c1c}


.wb-imp{
  /* 跟顶栏一样用 fixed：顶栏是 fixed 的，横幅如果用 sticky，
     滚动时两者会叠在一起打架 */
  position:fixed;top:0;left:0;right:0;z-index:110;
  height:var(--imp-h);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 16px;background:#c2410c;color:#fff;
  font-size:13px;line-height:1.4;text-align:center;
}
.wb-imp b{font-weight:600}
.wb-imp svg{flex:none}
.wb-imp-out{
  flex:none;padding:3px 12px;border-radius:12px;
  background:rgba(255,255,255,.2);color:#fff;font-weight:500;
  border:1px solid rgba(255,255,255,.45);transition:.15s;
}
.wb-imp-out:hover{background:#fff;color:#c2410c}

/* ---------- 附件 ---------- */
/* 帖子里的附件：一行一个。附件靠文件名和体积认，没有画面可看 */
.wb-files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.wb-file{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  transition:.15s;min-width:0;
}
.wb-file:hover{border-color:var(--brand);background:var(--card)}
.wb-file-ext{
  flex:none;width:38px;height:38px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-weak);color:var(--brand);
  font-size:10.5px;font-weight:700;font-style:normal;letter-spacing:.3px;
}
.wb-file-main{flex:1;min-width:0}
.wb-file-main b{
  display:block;font-size:13.5px;font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-file-main em{display:block;margin-top:2px;font-size:12px;font-style:normal;color:var(--txt-3)}
/* 箭头转向下：这是「下载」不是「进入」，方向本身就是提示 */
.wb-file-dl{flex:none;color:var(--txt-3);display:flex;transition:.15s}
.wb-file:hover .wb-file-dl{color:var(--brand)}

/* 发帖框里已选的附件 */
.wb-composer-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wb-fchip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:5px 8px 5px 6px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);font-size:12.5px;
}
.wb-fchip i{
  flex:none;padding:1px 5px;border-radius:3px;font-style:normal;
  background:var(--brand-weak);color:var(--brand);font-size:10px;font-weight:700;line-height:15px;
}
.wb-fchip b{
  font-weight:500;color:var(--txt);max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-fchip em{font-style:normal;color:var(--txt-3);font-size:11.5px}
.wb-fchip button{
  flex:none;width:16px;height:16px;border-radius:50%;line-height:14px;
  color:var(--txt-3);font-size:14px;
}
.wb-fchip button:hover{background:var(--danger);color:#fff}

@media (max-width:1024px){
body.wb-app .wb-file{padding:8px 10px}
}
@media (max-width:1024px){
body.wb-app .wb-file-ext{width:34px;height:34px}
}
@media (max-width:1024px){
body.wb-app .wb-fchip b{max-width:130px}
}

/* ---------- 媒体选择器（仿子比） ---------- */
.wb-mediabox{width:680px;max-width:calc(100vw - 32px)}
/* tab 直接放在标题栏位置：这个弹窗里「切到哪个来源」比标题重要得多 */
.wb-media-tabs{display:flex;gap:22px}
.wb-media-tabs button{
  position:relative;padding:2px 0 6px;font-size:15px;color:var(--txt-3);font-weight:500;
}
.wb-media-tabs button.is-on{color:var(--txt);font-weight:600}
.wb-media-tabs button.is-on::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:22px;height:2.5px;border-radius:2px;background:var(--brand);
}
.wb-media-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wb-media-search{
  flex:1;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:17px;background:var(--bg);color:var(--txt-3);
}
.wb-media-search:focus-within{border-color:var(--brand);background:var(--card)}
.wb-media-search input{
  flex:1;min-width:0;border:0;outline:0;background:none;font-size:13.5px;color:var(--txt);
}
.wb-media-bar .wb-btn{flex:none;height:34px;border-radius:17px;gap:4px}

.wb-media-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  /* 固定高度而不是自适应：内容多少都不该让弹窗一会儿高一会儿矮 */
  height:46vh;min-height:240px;overflow:auto;padding-right:2px;
  /* align-content 必须显式写 start。grid 默认是 stretch，容器又是固定高度，
     只有一行内容时那一行会被拉开填满整个容器 —— 方格变成竖长条，
     里面 object-fit:cover 的图跟着被拉变形。图多时铺满几行看不出来，
     只有一两个文件时一眼就露馅 */
  align-content:start;
}
.wb-media-cell{
  position:relative;padding-top:100%;border-radius:var(--radius);overflow:hidden;
  background:var(--line-soft);cursor:pointer;display:block;
}
.wb-media-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-media-cell::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  border:2px solid transparent;transition:.15s;
}
.wb-media-cell:hover::after{border-color:var(--line)}
.wb-media-cell.is-on::after{border-color:var(--brand)}
/* 选中打勾：右上角一个实心圆，未选中时不占视觉 */
.wb-media-tick{
  position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);
  opacity:0;transition:.15s;
}
.wb-media-cell:hover .wb-media-tick{opacity:1}
.wb-media-cell.is-on .wb-media-tick{
  opacity:1;border-color:var(--brand);background:var(--brand);
}
.wb-media-cell.is-on .wb-media-tick::after{
  content:'';position:absolute;left:5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
/* 删除按钮只在悬停时露出：它是不可逆操作，不该一直摆在眼前 */
.wb-media-del{
  position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:15px;line-height:17px;text-align:center;
  font-style:normal;opacity:0;transition:.15s;
}
.wb-media-cell:hover .wb-media-del{opacity:1}
.wb-media-del:hover{background:var(--danger)}
.wb-media-badge{
  position:absolute;left:5px;bottom:5px;padding:1px 5px;border-radius:3px;
  background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-style:normal;line-height:15px;
}
/* 没抓到封面的视频：至少把格式写出来，别是一块认不出的灰方块 */
.wb-media-vico{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--txt-3);letter-spacing:.5px;
}
.wb-media-rowpic .wb-media-vico{position:static;font-size:11px}
/*
 * 视频形态：卡片，一行铺几个由宽度决定。
 *
 * 跟图片网格的区别不在「一行几个」，而在**给的是文件名、时长、体积，
 * 不是一张裁过的缩略图** —— 选视频时认的是这些，不是画面。
 * 早先做成一行一个，横向白白空掉大半，视频一多就得滚半天。
 */
.wb-media-grid.is-list{grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:8px}
.wb-media-row{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:8px 32px 8px 8px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:var(--card);
  text-align:left;cursor:pointer;transition:.15s;min-width:0;
}
.wb-media-row:hover{border-color:var(--line);background:var(--bg)}
.wb-media-row.is-on{border-color:var(--brand);background:var(--brand-weak)}
.wb-media-rowpic{
  flex:none;width:52px;height:36px;border-radius:4px;overflow:hidden;
  background:var(--line-soft);display:flex;align-items:center;justify-content:center;
}
.wb-media-rowpic img{width:100%;height:100%;object-fit:cover;display:block}
.wb-media-rowmain{flex:1;min-width:0}
.wb-media-rowmain b{
  display:block;font-size:13.5px;font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-media-rowmain em{
  display:block;margin-top:3px;font-size:12px;font-style:normal;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}
/* 勾选圈钉在最右，始终可见 —— 它是这一行的主操作 */
.wb-media-row .wb-media-tick{top:50%;right:12px;transform:translateY(-50%);opacity:1;
  border-color:var(--line);background:transparent}
.wb-media-row.is-on .wb-media-tick{border-color:var(--brand);background:var(--brand)}
.wb-media-row.is-on .wb-media-tick::after{
  content:'';position:absolute;left:5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
/* 删除压在缩略图左上角，跟右侧的勾选圈彻底分开 —— 一个左一个右，
   点哪个都不会误伤。悬停才露出：它是不可逆操作，不该一直摆在眼前 */
.wb-media-row .wb-media-del{
  top:6px;left:6px;right:auto;width:17px;height:17px;line-height:15px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;opacity:0;
}
.wb-media-row:hover .wb-media-del{opacity:1}
.wb-media-row .wb-media-del:hover{background:var(--danger)}

.wb-media-empty{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  height:100%;min-height:180px;color:var(--txt-3);font-size:13.5px;
}
.wb-media-more{text-align:center;padding-top:10px}
.wb-media-more button{font-size:13px;color:var(--link)}
.wb-media-more button:hover{text-decoration:underline}
.wb-media-count{font-size:12.5px;color:var(--txt-3)}

.wb-media-url textarea{min-height:150px;font-size:13.5px;line-height:1.8}
.wb-media-tip{
  margin-bottom:10px;padding:9px 12px;border-radius:var(--radius);
  background:var(--bg);font-size:12.5px;line-height:1.8;color:var(--txt-3);
}
.wb-media-tip b{color:var(--txt-2)}

@media (max-width:820px){
  .wb-mediabox{width:100%}
  .wb-media-grid{grid-template-columns:repeat(4,1fr)}
}

/* 移动端：跟投票弹窗一样从底部升起，够得着拇指 */
@media (max-width:1024px){
body.wb-app .wb-modal-panel.wb-mediabox{
  width:100%;max-width:100%;border-radius:14px 14px 0 0;
  position:fixed;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
}
}
@media (max-width:1024px){
body.wb-app .wb-mediabox .wb-modal-bd{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:1024px){
body.wb-app .wb-media-grid{grid-template-columns:repeat(3,1fr);height:auto;min-height:180px;overflow:visible}
}
@media (max-width:1024px){
body.wb-app .wb-media-grid.is-list{grid-template-columns:1fr}
}

.wb-pollbox{width:520px}
.wb-pollbox .wb-modal-bd{max-height:60vh;overflow:auto}
.wb-pollf{display:flex;gap:14px;margin-bottom:16px}
.wb-pollf:last-child{margin-bottom:0}
.wb-pollf > label{flex:none;width:64px;padding-top:9px;font-size:13px;color:var(--txt-2)}
.wb-pollf-main{flex:1;min-width:0;position:relative}
.wb-pollf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:5px}
.wb-pollf-tip{margin-top:7px;font-size:12px;color:var(--txt-3)}
.wb-pollf-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--txt-2)}
.wb-pollf-inline input{width:56px;height:30px;text-align:center}
/*
 * ⚠ 用**排除式**，不要按类型点名。
 *
 * 原来写的是 input[type=text] —— 于是发红包弹窗里的「总额 / 个数」
 * （type=number）一条规则都没命中，直接掉回浏览器默认样式：
 * 白底、1.6px inset 灰边、零圆角，跟旁边的「祝福语」摆在一起像两个站。
 *
 * 这跟当初统一全站输入框时踩的是同一个坑：点名有几种类型，
 * 就总有第 N+1 种被漏掉，而漏掉的表现是「掉回默认」，不是「没样式」——
 * 后者显眼，前者看着像是故意设计的。
 */
.wb-pollf-main > input:not([type=checkbox]):not([type=radio]):not([type=file]),
.wb-poll-optrow input{
  height:36px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--bg);font-size:14px;outline:none;
}
/*
 * ⚠ **外观和宽度分开写。**
 *
 * 外观（背景/边框/圆角/高度）是排除式的 —— 那正是这次要修的：
 * 按 type 点名总会漏掉第 N+1 种，漏掉的会掉回浏览器默认样式。
 *
 * 而宽度天生就该按类型分：文本框满宽、数字框只要塞得下几位数。
 * 混在一条规则里的话，想给数字框单独设宽就得跟那三个 :not() 拼特异性
 * （(0,4,1) 对 (0,2,1)，怎么写都输）—— 那种补丁下一个人根本看不懂。
 */
.wb-pollf-main > input[type=text],
.wb-poll-optrow input{width:100%;padding:0 52px 0 12px}
/* 右边那 52px 是留给字数计数器的；数字框没有计数器，也不需要占满一行 ——
   「10」后面跟着 400px 空白，右边那句「积分，最多 5000」会被挤到下一行 */
.wb-pollf-main > input[type=number]{width:120px;padding:0 12px}
.wb-pollf-main > input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.wb-poll-optrow input:focus{border-color:var(--brand);background:var(--card)}
.wb-pollf-main > em,
.wb-poll-optrow em{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:11.5px;font-style:normal;color:var(--txt-3);pointer-events:none;
}
.wb-pollf-main > em{top:18px}
.wb-poll-opts{display:flex;flex-direction:column;gap:8px}
.wb-poll-optrow{position:relative;display:flex;align-items:center}
.wb-poll-optrow input{padding-right:74px}
.wb-poll-optrow em{right:32px}
.wb-poll-optrow button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;color:var(--txt-3);font-size:16px;line-height:1;
}
.wb-poll-optrow button:hover{background:var(--hover);color:var(--danger)}
.wb-poll-add{
  display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:34px;margin-top:8px;
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  font-size:13px;color:var(--txt-2);cursor:pointer;transition:.15s;
}
.wb-poll-add:hover{border-color:var(--brand);color:var(--brand)}
.wb-poll-durs{display:flex;flex-wrap:wrap;gap:7px}
.wb-poll-durs button{
  height:30px;padding:0 13px;border:1px solid var(--line);border-radius:15px;
  background:var(--card);font-size:13px;color:var(--txt-2);cursor:pointer;transition:.15s;
}
.wb-poll-durs button:hover{border-color:var(--brand);color:var(--brand)}
.wb-poll-durs button.is-on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand)}
.wb-pollf input[type=datetime-local]{
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg);font-size:13px;outline:none;
}
.wb-poll-err{flex:1;font-size:12.5px;color:var(--danger)}

/* 开关（发起投票弹窗里的「支持多选」） */
.wb-switch{display:inline-flex;align-items:center;cursor:pointer}
.wb-switch input{position:absolute;opacity:0;pointer-events:none}
.wb-switch i{
  width:38px;height:21px;border-radius:11px;background:var(--ctrl-line);
  position:relative;transition:.2s;display:block;
}
.wb-switch i::after{
  content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.wb-switch input:checked + i{background:var(--brand)}
.wb-switch input:checked + i::after{transform:translateX(17px)}

@media (max-width:768px){
  .wb-pollbox{width:100%}
  .wb-pollf{flex-direction:column;gap:6px}
  .wb-pollf > label{width:auto;padding-top:0}
  .wb-poll{padding:12px}
}

/* 投票 · 移动端。
   手机上宽度只有 PC 的一半，几处要单独收紧：
   标签和标题挤在一行会折行，票数和百分比会被文字挤没，
   弹窗要占满屏而不是居中一个小方块 */
@media (max-width:1024px){
body.wb-app .wb-poll{padding:12px 13px;margin-top:9px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-hd{gap:6px;margin-bottom:10px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-hd h4{font-size:14.5px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-tag{height:19px;padding:0 6px;font-size:11px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-body{gap:7px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-opt,
body.wb-app .wb-poll-row-in{padding:9px 11px;font-size:13.5px}
}
/* 票数那一栏不许被压缩掉，否则百分比会消失 */
@media (max-width:1024px){
body.wb-app .wb-poll-row-in .n{font-size:12px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-row-in .n em{margin-left:4px;font-size:11px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-act{gap:8px;margin-top:10px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-submit{flex:1;height:34px;padding:0}
}
@media (max-width:1024px){
body.wb-app .wb-poll-peek{flex:none;font-size:12.5px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-ft{gap:8px;margin-top:9px;font-size:11.5px}
}

/* 发起投票的弹窗：手机上贴底全宽，像原生的动作面板 */
@media (max-width:1024px){
body.wb-app .wb-modal-panel.wb-pollbox{
  width:100%;max-width:100%;border-radius:14px 14px 0 0;
  position:fixed;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
}
}
@media (max-width:1024px){
body.wb-app .wb-pollbox .wb-modal-bd{flex:1;max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:1024px){
body.wb-app .wb-pollbox .wb-modal-ft{flex-wrap:wrap;gap:8px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-err{flex-basis:100%;order:-1}
}
@media (max-width:1024px){
body.wb-app .wb-pollbox .wb-notice-act{width:100%;display:flex;gap:9px}
}
@media (max-width:1024px){
body.wb-app .wb-pollbox .wb-notice-act .wb-btn{flex:1;height:38px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-durs button{height:32px;padding:0 12px}
}
/* 输入框统一 16px：小于这个尺寸时 iOS Safari 会自动放大整个页面 */
@media (max-width:1024px){
body.wb-app .wb-pollf-main > input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.wb-app .wb-poll-optrow input{font-size:16px;height:40px}
}
@media (max-width:1024px){
body.wb-app .wb-poll-add{height:38px}
}

/* 发帖框里的投票摘要条 */
@media (max-width:1024px){
body.wb-app .wb-composer-poll{padding:8px 10px;font-size:12.5px}
}
@media (max-width:1024px){
body.wb-app .wb-composer-poll span{display:none}   /* 手机上放不下副标题，只留标题和两个按钮 */
}

/* ---------- 侧栏挂件 ---------- */
/* 挂件外壳复用 .wb-card，这里只补挂件特有的部分 */
.wb-widget{position:relative}
.wb-col-left .wb-widget{padding:10px}
.wb-col-left .wb-widget .wb-card-hd{padding:4px 10px 8px;border-bottom:0}
.wb-col-left .wb-widget .wb-card-hd h2,
.wb-col-left .wb-widget .wb-card-hd h3{font-size:13px;color:var(--txt-3);font-weight:400}
/* 挂件里的「管理」「换一批」这类角落按钮，统一钉在右上角 */
.wb-widget-manage,.wb-widget-act{
  position:absolute;right:12px;top:10px;
  font-size:12px;color:var(--brand);cursor:pointer;
}
.wb-widget-manage{border:1px solid var(--brand);border-radius:9px;padding:0 7px;line-height:16px}
.wb-widget-act{display:inline-flex;align-items:center;gap:3px;color:var(--txt-3);top:14px}
.wb-widget-act:hover{color:var(--brand)}
/* 内容容器的类名不能和外壳的类型修饰类（wb-w-text）撞上，
   否则「自定义文本」挂件的外壳也会吃到这条内边距 */
.wb-widget-text{padding:0 14px 14px;font-size:13px;color:var(--txt-2);line-height:1.8}
.wb-widget-links{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 14px 14px}
.wb-widget-links a,.wb-widget-links span{font-size:13px;color:var(--txt-2)}
.wb-widget-links a:hover{color:var(--brand)}
.wb-col-left .wb-widget-text,.wb-col-left .wb-widget-links{padding:0 10px 6px}
/* 导航菜单挂件不要外壳内边距，它自己的项已经带了 */
.wb-w-nav{padding:10px}
.wb-w-ad{padding:0;background:none;box-shadow:none}

/* ---------- 登录 / 个人卡片挂件 ---------- */
/* 未登录：参考微博未登录首页那块暖色引导卡 */
.wb-uc-guest{
  padding:24px 18px 20px;text-align:center;border-radius:var(--radius);
  background:linear-gradient(160deg,#fff6ea 0%,#ffe9d2 100%);
}
[data-theme="dark"] .wb-uc-guest{background:linear-gradient(160deg,#3a2a17 0%,#2a1d10 100%)}
.wb-uc-slogan{
  font-size:19px;font-weight:600;line-height:1.5;color:var(--brand);
  margin-bottom:16px;letter-spacing:.5px;
}
.wb-uc-login{width:100%;height:38px;border-radius:19px;font-size:15px}
.wb-uc-tip{margin-top:10px;font-size:12px;color:var(--txt-3)}

/* 已登录：封面 + 头像 + 数据 + 签到 */
/* ---------- 悬浮名片（仿微博） ---------- */
/* 跟着鼠标飘在页面之上，所以是 fixed；层级要压过弹窗以外的一切 */
.wb-hc{
  position:fixed;z-index:900;width:280px;
  background:var(--card);border-radius:var(--radius-lg);
  box-shadow:0 6px 26px rgba(0,0,0,.16);overflow:hidden;
  animation:hcIn .16s ease-out;
}
@keyframes hcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
[data-theme="dark"] .wb-hc{box-shadow:0 6px 26px rgba(0,0,0,.5)}

/* 微博的做法：昵称和认证说明直接压在封面图上，不另占一块白底 */
.wb-hc-cover{
  display:block;position:relative;padding:16px 16px 14px;text-align:center;
  background:linear-gradient(135deg,var(--brand) 0%,#ffb066 100%) center/cover;
}
/* 封面是用户随便传的图，白字压上去可能糊成一片，垫一层由浅入深的遮罩 */
.wb-hc-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.42) 100%);
}
.wb-hc-cover > *{position:relative;z-index:1}
.wb-hc-ava{
  display:block;position:relative;width:60px;height:60px;margin:0 auto;
  border-radius:50%;border:2px solid rgba(255,255,255,.9);background:var(--card);
}
.wb-hc-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.wb-hc-ava .wb-v{position:absolute;right:-2px;bottom:-2px}
.wb-hc-name{
  display:flex;align-items:center;justify-content:center;gap:5px;margin-top:9px;
}
.wb-hc-name b{
  font-size:15.5px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-hc-sub{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.3);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wb-hc-stats{display:flex;padding:12px 6px 0}
/* min-width:0 —— 同 .wb-uc-stats，flex 项默认 min-width:auto，
   一个放不下的长数字会把整张悬浮卡撑宽 */
.wb-hc-stats a{
  flex:1;min-width:0;text-align:center;font-size:12px;color:var(--txt-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wb-hc-stats b{
  display:block;font-size:15px;color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* 看自己时多一列积分，字号跟着收一档 */
.wb-hc-stats.c4 a{font-size:11.5px}
.wb-hc-stats.c4 b{font-size:14px}
.wb-hc-stats a:hover,.wb-hc-stats a:hover b{color:var(--brand)}
.wb-hc-act{display:flex;gap:8px;padding:12px 14px 14px}
.wb-hc-act .wb-btn{flex:1;height:34px;border-radius:17px;font-size:13.5px;justify-content:center}

.wb-uc{position:relative;padding-bottom:14px}
.wb-uc-cover{
  display:block;height:68px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(135deg,var(--brand) 0%,#ffb066 100%) center/cover;
}
.wb-uc-ava{
  display:block;position:relative;width:56px;height:56px;margin:-28px auto 0;
  border-radius:50%;border:3px solid var(--card);background:var(--card);
}
.wb-uc-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.wb-uc-ava .wb-v{position:absolute;right:-1px;bottom:-1px}
/*
 * ⚠ 三列网格，不是 flex 居中。
 *
 * flex + justify-content:center 居中的是**整行**，而行里除了名字
 * 还挂着会员标和等级标 —— 名字就被挤得偏左（实测 18px），
 * 而头像是 margin:auto 真居中的，两者差一点就看得出来。
 *
 * 两侧都是 1fr，所以无论徽章多宽，中间那一列永远在中线上。
 * minmax(0,1fr) 不能省 —— 1fr 的最小尺寸默认是 auto，
 * 名字长的时候两侧不肯缩，整行会把卡片撑宽。
 */
.wb-uc-name{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;margin-top:8px;padding:0 14px;
}
.wb-uc-name > a{
  grid-column:2;justify-self:center;
  font-size:15px;font-weight:600;color:var(--txt);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 徽章挂在名字右边，靠左对齐 —— 离名字近才看得出是它的 */
.wb-uc-tags{
  grid-column:3;justify-self:start;
  display:flex;align-items:center;gap:5px;padding-left:5px;
}
/* 一个徽章都没时别留那 5px，否则名字又会被推偏 */
.wb-uc-tags:empty{padding-left:0}
.wb-uc-bio{
  margin-top:5px;padding:0 16px;font-size:12.5px;color:var(--txt-3);text-align:center;
  line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wb-uc-bio .wb-at{color:var(--link)}
.wb-uc-site{
  display:flex;align-items:center;justify-content:center;gap:4px;
  margin-top:4px;font-size:12.5px;
}
.wb-uc-site a{color:var(--link);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-uc-site svg{flex:none;color:var(--txt-3)}
.wb-uc-stats{display:flex;margin-top:14px;padding:0 6px}
/*
 * min-width:0 是关键：flex 项默认 min-width:auto，一个放不下的长数字会把
 * 整行撑宽、把卡片挤破。加上它之后列宽严格按 1:1 分，超出的靠下面的字号降级消化
 */
.wb-uc-stats a{flex:1;min-width:0;text-align:center}
.wb-uc-stats b{
  display:block;font-size:15px;color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/*
 * 字号不做「按长度降级」。
 *
 * 一开始加了 is-long 类按字符串长度降字号，实测之后发现是多余的：
 * num_tight 的最长输出是 5 个字符（9999万 / 99.9亿），在 15px 下量出来 51px，
 * 而四列时每列有 67px —— 从来不会溢出。为一个不会发生的情况留两套字号，
 * 只会让「为什么这个数字比那个小」变成一个没人说得清的问题。
 *
 * 真正必要的是上面那个 min-width:0 和这里的 nowrap
 */
.wb-uc-stats.c4 b{font-size:14px}
.wb-uc-stats span{
  display:block;font-size:12px;color:var(--txt-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 积分名字可能被站长改成「鸡腿」「金币」这种更长的词，四列时收一点 */
.wb-uc-stats.c4 span{font-size:11.5px}
.wb-uc-stats a:hover b,.wb-uc-stats a:hover span{color:var(--brand)}
.wb-uc-ci{padding:12px 14px 0}
.wb-uc-cibtn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:100%;height:34px;border-radius:17px;font-size:13.5px;
}
.wb-uc-cibtn.is-done{border:1px solid var(--line);color:var(--txt-3);background:var(--bg)}

/*
 * 作者卡片上「关注 / 私信」那一对按钮。
 *
 * 这个类之前**完全没有样式** —— 默认 display:block，两个 inline-flex 的按钮
 * 就按自身内容宽度左对齐排开（「+ 关注」72px、「私信」60px），右边空一大块，
 * 看着就是歪的。自己帖子那条分支用的是 .wb-uc-cibtn（有 width:100%），
 * 所以只有看别人的帖子时才露出来，很容易漏掉。
 *
 * 写法照悬浮卡的 .wb-hc-act 抄 —— 同一种「一排按钮」在两处长得不一样没有道理。
 */
.wb-uc-act{display:flex;gap:8px}
.wb-uc-act .wb-btn{
  flex:1;min-width:0;height:34px;border-radius:17px;
  font-size:13.5px;justify-content:center;
}

/* ---------- 签到页 ---------- */
.wb-ci{padding:0;overflow:hidden}
.wb-ci-hero{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:linear-gradient(120deg,#fff3d6 0%,#ffe6c0 100%);
}
[data-theme="dark"] .wb-ci-hero{background:linear-gradient(120deg,#3d3117 0%,#2e2412 100%)}
.wb-ci-hero.is-done{background:linear-gradient(120deg,#eaf7ec 0%,#dcf0e0 100%)}
[data-theme="dark"] .wb-ci-hero.is-done{background:linear-gradient(120deg,#1d3322 0%,#16281a 100%)}
.wb-ci-hero-l{flex:1;min-width:0}
.wb-ci-hero h1{font-size:19px;font-weight:600;color:var(--txt)}
.wb-ci-hero p{margin-top:5px;font-size:13px;color:var(--txt-2)}
.wb-ci-hero p b{color:var(--brand);font-size:15px;margin:0 2px}
.wb-ci-btns{display:flex;align-items:center;gap:9px;flex:none}
.wb-ci-btn{
  display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 18px;
  border-radius:19px;font-size:14px;color:#fff;cursor:pointer;transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.wb-ci-btn em{font-style:normal;font-weight:600}
.wb-ci-btn.is-fixed{background:#3aab5e}
.wb-ci-btn.is-lucky{background:var(--brand)}
.wb-ci-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.wb-ci-btn:disabled{opacity:.6;cursor:default;transform:none}
.wb-ci-or{color:var(--txt-3);font-size:13px}
.wb-ci-got{display:flex;align-items:baseline;gap:5px;flex:none;font-size:13px;color:var(--txt-2)}
.wb-ci-got b{font-size:26px;font-weight:600;color:#3aab5e;font-variant-numeric:tabular-nums}

.wb-ci-stats{display:flex;border-bottom:1px solid var(--line-soft)}
.wb-ci-stats > div{flex:1;padding:11px 8px;text-align:center;border-right:1px solid var(--line-soft)}
.wb-ci-stats > div:last-child{border-right:0}
.wb-ci-stats b{display:block;font-size:19px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.wb-ci-stats span{font-size:12px;color:var(--txt-3)}

.wb-ci-cal{padding:14px 20px}
.wb-ci-cal-hd{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.wb-ci-cal-hd b{font-size:15px;font-weight:500}
.wb-ci-nav{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;
  border-radius:50%;color:var(--txt-3)}
.wb-ci-nav:hover{background:var(--hover);color:var(--brand)}
.wb-ci-nav.is-off{opacity:.3;cursor:default}
.rot-180{transform:rotate(180deg)}
.wb-ci-week,.wb-ci-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wb-ci-week span{text-align:center;font-size:12px;color:var(--txt-3);padding-bottom:4px}
/*
 * ⚠ 日历格子**不能用 aspect-ratio:1**。
 *
 * 正方形听着理所当然，但这是七列网格：中栏 600px 宽时每格就是 80px 高，
 * 六行下来光日历就 480px —— 一整屏都在看空格子，而这一页真正要给的信息
 *（今天签没签、连了几天、能领多少）全被挤到屏幕外。
 *
 * 改成定高 34px：一眼还是能看出「这是个月历」，六行只占 240px。
 * 日期本身只有一两个字符，方不方并不传达任何东西。
 */
.wb-ci-day{
  display:flex;align-items:center;justify-content:center;height:34px;
  border-radius:8px;font-size:13px;font-style:normal;color:var(--txt-2);background:var(--bg);
}
.wb-ci-day.is-pad{background:none}
.wb-ci-day.is-on{background:var(--brand);color:#fff;font-weight:500}
.wb-ci-day.is-today{outline:2px solid var(--brand);outline-offset:-2px}
.wb-ci-day.is-today:not(.is-on){color:var(--brand);font-weight:600}

.wb-ci-bonus{padding:0 20px 16px}
.wb-ci-bonus h3{font-size:14px;font-weight:500;color:var(--txt-2);margin-bottom:10px}
.wb-ci-bonus-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wb-ci-bonus-item{
  padding:6px 2px;text-align:center;border-radius:8px;background:var(--bg);
  border:1px solid transparent;
}
.wb-ci-bonus-item span{display:block;font-size:11px;color:var(--txt-3)}
.wb-ci-bonus-item b{font-size:14px;color:var(--txt-2)}
.wb-ci-bonus-item.is-past{background:var(--brand-weak)}
.wb-ci-bonus-item.is-past b{color:var(--brand)}
.wb-ci-bonus-item.is-now{border-color:var(--brand);background:var(--brand-weak)}
.wb-ci-bonus-item.is-now b{color:var(--brand);font-weight:600}
.wb-ci-tip{margin-top:9px;font-size:12px;color:var(--txt-3)}

.wb-ci-board{margin-top:12px}
.wb-ci-list{padding:2px 0 8px}
.wb-ci-list li{display:flex;align-items:center;gap:10px;padding:7px 20px}
.wb-ci-list li:hover{background:var(--hover)}
.wb-ci-no{
  flex:none;width:20px;text-align:center;font-size:13px;color:var(--txt-3);
  font-style:italic;font-variant-numeric:tabular-nums;
}
.wb-ci-no.n1{color:#f5222d;font-weight:700}
.wb-ci-no.n2{color:#fa8c16;font-weight:600}
.wb-ci-no.n3{color:#faad14;font-weight:600}
.wb-ci-ava{flex:none;width:30px;height:30px}
.wb-ci-ava img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.wb-ci-name{flex:1;min-width:0;font-size:13.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-ci-name:hover{color:var(--brand)}
.wb-ci-luck{
  flex:none;font-style:normal;font-size:11px;padding:1px 6px;border-radius:8px;
  background:var(--brand-weak);color:var(--brand);
}
.wb-ci-streak{flex:none;font-style:normal;font-size:11.5px;color:var(--txt-3)}
.wb-ci-pt{flex:none;font-size:14px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}

@media (max-width:768px){
  .wb-ci-hero{flex-direction:column;align-items:stretch;gap:12px;padding:18px 16px}
  .wb-ci-btns{justify-content:center}
  .wb-ci-btn{flex:1;justify-content:center;padding:0 10px}
  .wb-ci-stats{flex-wrap:wrap}
  .wb-ci-stats > div{flex:0 0 50%;border-bottom:1px solid var(--line-soft)}
  .wb-ci-stats > div:nth-child(2n){border-right:0}
  .wb-ci-cal,.wb-ci-bonus{padding-left:14px;padding-right:14px}
  .wb-ci-bonus-row{grid-template-columns:repeat(4,1fr)}
}

/* ---------------- 自助注销 ---------------- */
/*
 * 用危险色整块隔开。这类不可撤销的操作和「改密码」混在一起排版，
 * 用户会当成普通设置项随手点开
 */
.wb-set-sub.is-danger{color:var(--danger)}
.wb-set-danger{
  padding:14px 16px;border:1px solid var(--danger);border-radius:var(--radius-lg);
  background:rgba(245,34,45,.04);
}
.wb-set-danger p{font-size:13px;line-height:1.8;color:var(--txt-2);margin:0 0 10px}
.wb-set-danger p b{color:var(--txt)}
[data-theme="dark"] .wb-set-danger{background:rgba(245,34,45,.09)}

.wb-btn-danger:disabled{opacity:.6;cursor:not-allowed}

.wb-del-panel{position:relative;width:min(420px,92vw);padding:22px 24px 18px}
.wb-del-x{position:absolute;top:10px;right:10px}
.wb-del-panel h3{font-size:17px;margin-bottom:10px}
.wb-del-panel .warn{font-size:13px;line-height:1.75;color:var(--danger);margin-bottom:16px}
.wb-del-panel label{display:block;font-size:13px;color:var(--txt-2);margin:12px 0 6px}
.wb-del-panel label b{color:var(--danger)}
.wb-del-panel input{
  width:100%;height:38px;padding:0 12px;font-size:14px;color:var(--txt);
  background:var(--card);border:1px solid var(--ctrl-line);border-radius:var(--radius);
}
.wb-del-panel input:focus{border-color:var(--brand);outline:none}
.wb-del-panel .wb-set-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding:0}

/* ---------------- 站点统计挂件 ---------------- */
/*
 * 一行一项而不是宫格：项目数量由站长勾选决定（3～6 项都可能），
 * 宫格在 4 项、5 项时会留一个尴尬的空位
 */
.wb-stats-list{padding:4px 16px 12px}
.wb-stat-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;font-size:13px;
}
.wb-stat-row + .wb-stat-row{border-top:1px solid var(--line-soft)}
.wb-stat-row .k{display:inline-flex;align-items:center;gap:6px;color:var(--txt-2)}
.wb-stat-row .k svg{flex:none;color:var(--txt-3)}
.wb-stat-row .v{display:inline-flex;align-items:baseline;gap:4px}
.wb-stat-row .v b{font-size:14px;font-weight:600;color:var(--txt)}
.wb-stat-row .v .u{font-style:normal;font-size:12px;color:var(--txt-3)}
/* 今日新增用主色标出来 —— 总数是静态的，今日数才是「这站还活着」的信号 */
.wb-stat-row .v .up{
  font-style:normal;font-size:11.5px;font-weight:600;color:var(--brand);
  padding:1px 5px;border-radius:9px;background:var(--brand-weak);
}
[data-theme="dark"] .wb-stat-row .v .up{background:rgba(255,130,0,.14)}

/* ---------------- 欢迎新成员挂件 ---------------- */
.wb-newu-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;padding:12px 12px 14px;
}
.wb-newu-grid.is-tight{gap:8px 6px}
.wb-newu{
  display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;
}
.wb-newu .ava{position:relative;display:block;width:44px;height:44px}
.wb-newu .ava img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  background:var(--bg);transition:transform .15s;
}
.wb-newu:hover .ava img{transform:scale(1.06)}
.wb-newu .wb-v{position:absolute;right:-1px;bottom:-1px}
/*
 * 昵称一行截断。宫格宽度固定，两行会把行高撑得参差不齐；
 * 完整昵称在 title 和悬浮卡里都有，截断不丢信息
 */
.wb-newu em{
  max-width:100%;font-style:normal;font-size:12px;color:var(--txt-2);
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-newu:hover em{color:var(--brand)}

/* ---------------- 我的邀请 ---------------- */
.wb-inv-hd{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;margin-bottom:14px;
  background:var(--brand-weak);border-radius:var(--radius-lg);
}
.wb-inv-hd b{font-size:15px;color:var(--txt)}
.wb-inv-hd b span{color:var(--brand)}
.wb-inv-hd p{margin-top:4px;font-size:12.5px;color:var(--txt-2);line-height:1.6}
.wb-inv-hd .wb-btn{flex:none;height:34px;padding:0 18px;border-radius:17px}
.wb-inv-hd .wb-btn:disabled{opacity:.5;cursor:not-allowed}
[data-theme="dark"] .wb-inv-hd{background:rgba(255,130,0,.12)}

.wb-inv-row{
  display:flex;align-items:center;gap:12px;padding:11px 4px;
  border-bottom:1px solid var(--line-soft);font-size:13px;
}
.wb-inv-row:last-child{border-bottom:0}
/* 码要看着像「可以点的东西」—— 用户十有八九是要复制它发给别人 */
.wb-inv-row code{
  padding:4px 10px;border-radius:var(--radius);
  background:var(--bg);border:1px solid var(--line);
  font-family:Consolas,Monaco,monospace;font-size:13.5px;letter-spacing:1px;
  cursor:pointer;user-select:all;
}
.wb-inv-row code:hover{border-color:var(--brand);color:var(--brand)}
.wb-inv-state{
  font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:9px;
  color:var(--ok);background:rgba(82,196,26,.12);
}
/* 用完 / 过期 / 停用都是「不能再用了」，统一成中性灰，不必分三种颜色吓人 */
.wb-inv-row.is-used .wb-inv-state,
.wb-inv-row.is-expired .wb-inv-state,
.wb-inv-row.is-off .wb-inv-state{color:var(--txt-3);background:var(--hover)}
.wb-inv-row.is-used code,
.wb-inv-row.is-expired code,
.wb-inv-row.is-off code{color:var(--txt-3);text-decoration:line-through}
.wb-inv-meta{color:var(--txt-3);font-size:12px}
.wb-inv-link{
  margin-left:auto;flex:none;font-size:12.5px;color:var(--brand);
  background:none;border:0;cursor:pointer;padding:0;
}
.wb-inv-link:hover{text-decoration:underline}
.wb-inv-empty{padding:28px 0;text-align:center;color:var(--txt-3);font-size:13px}

/* ---------- 隐藏内容 ---------- */
/*
 * 列表和详情两副面孔，尺寸差得很远，这是刻意的。
 *
 * 参考站（WPCOM）是博客文章页，820px 宽、一页一两个块，
 * 做成 240px 高的居中大卡片很合适。我们中栏只有 600px，
 * 一屏能滚过好几条带隐藏内容的帖子 —— 照那个尺寸做，一条占半屏。
 */

/* 列表里：一条 34px 的锁条，整条可点，点了进详情。
   这里不放购买按钮 —— 人还没读完就让他掏钱是本末倒置 */
.wb-hide.is-slim{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  height:34px;padding:0 12px;border-radius:var(--radius-lg);
  background:var(--brand-weak);color:var(--brand);font-size:13px;
}
.wb-hide.is-slim > .ico{flex:0 0 auto}
.wb-hide.is-slim b{font-weight:600}
.wb-hide.is-slim i{font-style:normal;color:var(--txt-3);font-size:12px}
.wb-hide.is-slim span{
  margin-left:auto;display:flex;align-items:center;gap:2px;
  font-size:12.5px;color:var(--brand);opacity:.8;
}
.wb-hide.is-slim:hover{background:var(--brand);color:#fff}
.wb-hide.is-slim:hover i,.wb-hide.is-slim:hover span{color:#fff;opacity:.9}

/*
 * 详情页：一张卡片，但压到 110px 上下，不做参考站那种整屏排场。
 * 底色用极淡的品牌色斜向渐变 —— 站里其它地方是纯扁平的，
 * 这里稍微给一点「这块不一样」的暗示，但不能做成花哨的插画背景。
 */
.wb-hide.is-locked{
  margin-top:12px;padding:14px 16px;border-radius:var(--radius-lg);
  border:1px solid var(--brand-weak);
  background:linear-gradient(135deg,var(--brand-weak) 0%,var(--bg) 70%);
}
.wb-hide-hd{display:flex;align-items:flex-start;gap:10px}
.wb-hide-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;
}
.wb-hide-say{flex:1;min-width:0}
.wb-hide-say b{display:block;font-size:14.5px;font-weight:600;color:var(--txt);line-height:1.5}
.wb-hide-say em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--txt-3)}

/*
 * ⚠ 按钮是 .wb-hide-hd 这一行的**第三个 flex 子项**，不是浮动上来的。
 *
 * 原来写的是 float:right + margin-top:-34px，硬把它拉到标题那一行 ——
 * 视觉上是对的，但 .wb-hide-say em（「含 1 个附件」那行）是个占满整行的
 * 块级盒子，命中测试时压在浮动按钮上面：**按钮看得见、点不着**。
 * 站长报的就是「点这个登录按钮没反应」。
 *
 * 浮动配负边距做「同一行右侧」本来就是个绕路的写法，而父级已经是 flex 了 ——
 * 直接当个子项排进去，既不会被谁盖住，也不用算那个 -34px。
 */
.wb-hide-act{flex:0 0 auto;margin-left:auto}
.wb-hide-btn{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;
  border:0;border-radius:16px;background:var(--brand);color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.wb-hide-btn:hover{filter:brightness(1.06)}
.wb-hide-btn em{
  font-style:normal;font-weight:600;padding-left:8px;
  border-left:1px solid rgba(255,255,255,.35);
}
/* 余额不够时按钮不置灰 —— 点了会告诉他差多少，比一个点不动的灰按钮清楚。
   只是降一点饱和度，暗示「这个可能不顺利」 */
.wb-hide-btn.is-short{background:var(--txt-3)}

.wb-hide-foot{
  clear:both;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--txt-3);line-height:1.7;
}
.wb-hide-foot b{color:var(--txt-2)}
.wb-hide-foot b.is-short{color:var(--danger)}
.wb-hide-foot a{color:var(--brand)}
.wb-hide-foot span{color:var(--txt-3)}

/* 已解锁：一条细顶栏 + 正常内容。
   内容本身是主角，标识只要能认出来就行，不做整块强调框 */
.wb-hide.is-open{margin-top:12px}
.wb-hide-bar{
  display:flex;align-items:center;gap:5px;margin-bottom:6px;
  font-size:12px;color:var(--brand);
}
.wb-hide-bar span{font-weight:600}
.wb-hide-bar em{font-style:normal;color:var(--txt-3);font-weight:400}
.wb-hide-text{
  font-size:15px;line-height:1.75;word-break:break-word;
  padding-left:10px;border-left:2px solid var(--brand-weak);
}

@media (max-width:768px){
  /* 手机上按钮换到下面占满整行：34px 高的行里再塞一个按钮，
     两边都会挤得没法点 */
  .wb-hide-act{float:none;margin:10px 0 0}
  .wb-hide-btn{width:100%;justify-content:center;height:34px}
  .wb-hide.is-locked{padding:12px 14px}
}


/* 付费购买：支付方式就地摊开一行，不另做弹窗 ——
   这块卡片本来就只有一百来像素，为选一个支付方式弹个框比摊开还重 */
.wb-hide-ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;clear:both}
.wb-hide-ways button{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card);cursor:pointer;line-height:1.3;
}
.wb-hide-ways button:hover{border-color:var(--brand)}
.wb-hide-ways b{font-size:13px;color:var(--txt)}
.wb-hide-ways em{font-style:normal;font-size:11px;color:var(--txt-3)}

/* ---------- 我的收益 ---------- */
.wb-inc-note{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;margin-top:12px;font-size:13px;line-height:1.75;color:var(--txt-2)}
.wb-inc-note > .ico{flex:0 0 auto;margin-top:2px;color:var(--brand)}
.wb-inc-note b{color:var(--txt)}
.wb-inc-note a{color:var(--brand)}
/* 「关于提现」是说明不是提示，别用主色抢注意力 */
.wb-inc-note.is-plain > .ico{color:var(--txt-3)}
.wb-inc-tip{padding:14px 16px;margin-top:12px;font-size:13px;line-height:1.8;color:var(--txt-2)}
.wb-inc-tip a{color:var(--brand)}

.wb-inc-list{padding:4px 0}
.wb-inc-list li{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);
}
.wb-inc-list li:last-child{border-bottom:0}
.wb-inc-main{flex:1;min-width:0}
.wb-inc-main b{font-size:14px;color:var(--txt)}
.wb-inc-main a{margin-left:8px;font-size:12.5px;color:var(--brand)}
.wb-inc-main span{margin-left:8px;font-size:12.5px;color:var(--txt-3)}
.wb-inc-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--txt-3)}
.wb-inc-meta code{font-size:11px;color:var(--txt-3)}
/* 金额右对齐并给一个固定的最小宽度：一列数字不对齐的话，
   扫一眼看不出哪笔多哪笔少 */
.wb-inc-amt{flex:0 0 auto;min-width:96px;text-align:right;font-size:15px;font-weight:600}
.wb-inc-amt.is-in{color:var(--ok,#52c41a)}
.wb-inc-amt.is-out{color:var(--danger)}
.wb-inc-amt em{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--txt-3)}

@media (max-width:768px){
  .wb-inc-list li{flex-wrap:wrap;gap:6px}
  .wb-inc-meta{flex-direction:row;gap:8px;align-items:center}
  .wb-inc-amt{min-width:0;margin-left:auto}
}

/* ---------- 编辑框里的隐藏内容面板 ---------- */
.wb-composer-hide{
  margin-top:10px;padding:12px;border-radius:var(--radius-lg);
  background:var(--bg);border:1px dashed var(--line);
}
.wb-chide-hd{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt-2)}
.wb-chide-hd b{color:var(--txt)}
.wb-chide-hd span{flex:1;min-width:0;font-size:12px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-chide-hd button{border:0;background:none;padding:2px;color:var(--txt-3);cursor:pointer;display:flex}
.wb-chide-hd button:hover{color:var(--danger)}

.wb-chide-modes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.wb-chide-modes button{
  height:28px;padding:0 12px;border-radius:14px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--txt-2);
}
.wb-chide-modes button.is-on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand);font-weight:600}

.wb-chide-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.wb-chide-price label{font-size:12.5px;color:var(--txt-2)}
.wb-chide-price input{
  width:96px;height:30px;padding:0 10px;font-size:13px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--txt);outline:none;
}
.wb-chide-price input:focus{border-color:var(--brand)}
.wb-chide-price em{font-style:normal;font-size:12px;color:var(--txt-3)}

.wb-chide-text{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 10px;font-size:14px;line-height:1.7;resize:vertical;
  background:var(--card);color:var(--txt);outline:none;
}
.wb-chide-text:focus{border-color:var(--brand)}
.wb-chide-addfile{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  border:1px dashed var(--line);background:none;border-radius:var(--radius);
  padding:5px 10px;font-size:12.5px;color:var(--txt-2);cursor:pointer;
}
.wb-chide-addfile:hover{border-color:var(--brand);color:var(--brand)}
.wb-chide-tip{margin-top:8px;font-size:12px;line-height:1.7;color:var(--txt-3)}

/* ---------- 添加到桌面 ---------- */
/* 贴在底部而不是顶部：移动端顶部是页眉和搜索，插一条进去会把内容顶下去；
   底部是「可以忽略」的位置，正好配这种非必要的建议 */
.wb-pwa-bar{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:900;
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  transform:translateY(140%);transition:transform .32s cubic-bezier(.2,.9,.3,1);
}
.wb-pwa-bar.is-in{transform:none}
.wb-pwa-bar img{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.wb-pwa-bar div{flex:1;min-width:0}
.wb-pwa-bar b{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.wb-pwa-bar span{
  display:block;margin-top:2px;font-size:12px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-pwa-bar button[data-pwa-go]{
  flex:0 0 auto;height:32px;padding:0 16px;border:0;border-radius:16px;cursor:pointer;
  background:var(--brand);color:#fff;font-size:13px;font-weight:500;
}
.wb-pwa-bar button.x{
  flex:0 0 auto;width:24px;height:24px;border:0;border-radius:12px;cursor:pointer;
  background:none;color:var(--txt-3);font-size:19px;line-height:1;
}
/* 移动端底部有导航栏，得让开 */
.wb-mobile .wb-pwa-bar{bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 10px)}
@media (min-width:768px){
  .wb-pwa-bar{left:auto;right:20px;bottom:20px;width:340px}
}

/* 转发块里那个原帖时间。放在操作行最左边，把三个计数推到右边 ——
   跟微博一个排法：左边是「这是什么时候的」，右边是「能对它做什么」 */
.wb-quote-time{
  margin-right:auto;font-size:12.5px;color:var(--txt-3);text-decoration:none;
}
.wb-quote-time:hover{color:var(--brand)}
/* 移动端转发块没有操作行，时间自己单独占一行 */
.wb-mobile .wb-quote-time{display:block;margin-top:8px}
/* 转发块里的红包气泡比外面窄一点：quote 本身有内边距，
   再放个 264px 的会顶到边上 */
.wb-quote .wb-rp{width:240px}

/* 编辑框里的音频预览：只是一行「已选 xxx.mp3」，不放播放器 —— 
   用户还在写字，旁边跳出个能出声的东西很吵 */
.wb-composer-audio{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding:9px 12px;border-radius:10px;
  background:var(--bg-soft,rgba(127,127,127,.07));border:1px solid var(--line-soft);
}
.wb-composer-audio > i{flex:0 0 auto;color:var(--brand);line-height:0}
/* 网易云的歌把左边那个音符换成封面。给死尺寸是必须的 ——
   网易云回来的原图是 200px 见方，不约束的话会把整条撑开 */
.wb-composer-audio > img{
  flex:0 0 auto;width:32px;height:32px;border-radius:6px;object-fit:cover;
  background:var(--line-soft);
}
.wb-composer-audio > div{flex:1;min-width:0}
.wb-composer-audio b{
  display:block;font-size:13.5px;font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-composer-audio em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--txt-3)}
.wb-composer-audio-del{
  flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--txt-3);display:flex;align-items:center;justify-content:center;
}
.wb-composer-audio-del:hover{background:var(--line-soft);color:var(--danger)}

/* ---------- 音频播放器 ---------- */
/*
 * 做成**一条**而不是一块。音频没有画面，占一整块 16:9 纯属浪费，
 * 而且一屏里混着几条音频时，条状比方块好扫得多 —— 参照音乐 App 的单曲条。
 *
 * 配色用主题色的浅底 + 主题色进度，不用视频那套纯黑：
 * 黑框在信息流里是「这儿有个画面」的信号，音频没有画面，
 * 用黑框只会让人以为视频加载失败了。
 */
.wb-audio{
  position:relative;display:flex;align-items:center;gap:12px;
  margin-top:10px;padding:11px 14px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 9%, transparent),
    color-mix(in srgb, var(--brand) 4%, transparent));
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  user-select:none;
}
/* color-mix 老浏览器不认，退回一个中性底，不至于变成透明白板 */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .wb-audio{background:var(--bg-soft,rgba(127,127,127,.07));border-color:var(--line)}
}

/* 封面。播放时缓慢转起来 —— 唱片是音乐播放器最省事也最通用的语言，
   一眼就知道「这个在响」。没封面时那块渐变底本身就是占位 */
.wb-audio-cover{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:10px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;
  /* 底色不写死在这儿 —— 没封面时由 [data-disc] 那一组按站长选的转盘样式给 */
}
.wb-audio-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s;
}
.wb-audio.is-playing .wb-audio-cover img{animation:wb-audio-spin 12s linear infinite}
@keyframes wb-audio-spin{to{transform:rotate(360deg)}}
/* 转起来之后方角会露出底色，圆的才转得好看 */
.wb-audio.is-playing .wb-audio-cover{border-radius:50%}
.wb-audio-cover > i{line-height:0;opacity:.9}

/* 播放键压在封面上。整条里唯一的实心色块，视线第一个落点；
   压在封面上而不是并排放，是为了把宽度留给歌名 */
.wb-audio-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:rgba(0,0,0,.32);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,opacity .2s;
}
.wb-audio-play:hover{background:rgba(0,0,0,.5)}
/* 播放中把蒙层淡下去，让封面露出来转 —— 鼠标移上去再显出暂停键 */
.wb-audio.is-playing .wb-audio-play{background:rgba(0,0,0,.12);opacity:.35}
.wb-audio.is-playing:hover .wb-audio-play{background:rgba(0,0,0,.45);opacity:1}
/* 播放键里三个图标只显示一个，靠外层的状态类切 */
.wb-audio-play i{display:none;line-height:0}
.wb-audio .wb-audio-ico-play{display:block}
.wb-audio.is-playing .wb-audio-ico-play{display:none}
.wb-audio.is-playing .wb-audio-ico-pause{display:block}
.wb-audio.is-wait .wb-audio-ico-play,
.wb-audio.is-wait .wb-audio-ico-pause{display:none}
.wb-audio.is-wait .wb-audio-ico-wait{
  display:block;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:wb-spin .7s linear infinite;
}

.wb-audio-main{flex:1;min-width:0}
.wb-audio-artist{
  margin:-3px 0 6px;font-size:12px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ---------- 网易云音乐 ---------- */
/*
 * 直接用官方播放器，**外面不套我们的卡片**（原因见 post_netease.php）。
 * 所以这儿只剩摆位置的活：撑满一行、切个圆角跟周围的卡片对齐。
 *
 * 不给背景色、不加边框 —— 播放器自己是浅灰底带边框的，
 * 再套一层只会变成「框里的框」。
 */
.wb-netease{
  display:block;width:100%;height:86px;border:0;
  margin-top:10px;border-radius:var(--radius-lg);
  overflow:hidden;   /* Safari 上 iframe 的方角会戳出圆角 */
}
/* 站长关掉之后剩的那一行。做得很轻 —— 它只是交代「这儿本来有首歌」 */
.wb-netease-off{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;padding:8px 12px;border-radius:var(--radius-lg);
  background:var(--bg-soft,rgba(127,127,127,.07));
  color:var(--txt-3);font-size:13px;
}
.wb-netease-off svg{flex:0 0 auto}
.wb-netease-off span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-audio-top{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.wb-audio-name{
  flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-audio-time{
  flex:0 0 auto;font-size:11.5px;color:var(--txt-3);
  font-variant-numeric:tabular-nums;   /* 数字等宽，秒数跳动时进度不会左右抖 */
}
.wb-audio-time em{font-style:normal}

/* 进度条。外层给 14px 的高度是为了**点击区域** —— 只让人点中 3px 的线太苛刻 */
.wb-audio-seek{
  position:relative;height:14px;display:flex;align-items:center;cursor:pointer;
}
.wb-audio-seek::before{
  content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;
  background:color-mix(in srgb, var(--brand) 16%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .wb-audio-seek::before{background:var(--line)}
}
/* 已缓冲：比已播放淡一档，让人知道「拖到这儿是不用等的」 */
.wb-audio-buf{
  position:absolute;left:0;width:0;height:4px;border-radius:2px;
  background:color-mix(in srgb, var(--brand) 28%, transparent);
  transition:width .3s linear;
}
.wb-audio-played{
  position:absolute;left:0;width:0;height:4px;border-radius:2px;
  background:var(--brand);
}
.wb-audio-dot{
  position:absolute;left:0;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2.5px solid var(--brand);
  transform:translateX(-50%);
  opacity:0;transition:opacity .15s;
}
.wb-audio:hover .wb-audio-dot,
.wb-audio.is-seeking .wb-audio-dot{opacity:1}

/* 倍速/静音那一组搬到全局播放器上去了（见 .wb-fp-*）——
   同一个开关不该在每张卡片上各有一个入口 */

/* ---------- 侧栏播放器（挂件）---------- */
/*
 * 它是**启动器**，不是第二个控制台 —— 平时就摆在侧栏，点一下开始放。
 * 所以只有四样：上一个 / 播放暂停 / 下一个 / 进度条。
 *
 * 跟悬浮播放器共用同一套皮肤变量的写法（--w-*），但**各写各的布局**：
 * 侧栏只有 280px 宽得竖着排，悬浮那个是浮层横着更省地方。
 * 硬凑一套 class 的话两边都会被对方的约束绑住。
 */
/* ---------- 没有封面时的转盘样式 ---------- */
/*
 * 不是每首歌都有内嵌封面（外链音频基本都没有，老 mp3 也常常没有）。
 * 那时候占位的东西就是用户唯一看得到的「唱片」，值得画好看一点。
 *
 * 四种样式，站长在后台挑一种，挂在 <html data-disc="…"> 上。
 * **全部纯 CSS 画**：这个项目是零构建的，加一张图就多一个要随主题色
 * 跟着变的资源；用渐变和边框画，换主题色自动就跟上了。
 *
 * 只在**没有封面**时生效（.is-blank 由 JS 按有没有 cover 打上）——
 * 有封面就该显示封面，那是这首歌自己的脸。
 */

/* 共同的底：撑满容器、居中、里面的图标用白色 */
.wb-fp-art.is-blank,
.wb-fp-cover.is-blank,
.wb-audio-cover.is-blank{
  position:relative;overflow:hidden;color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* ── ① 渐变音符（默认）──
   主题色到橘红的斜向渐变 + 一个音符。最朴素，也最不会出错 */
[data-disc="gradient"] .is-blank{
  background:linear-gradient(135deg,var(--brand),#ff5a3c);
}

/* ── ② 黑胶唱片 ──
   同心圆纹路用 repeating-radial-gradient 画，中心一块主题色的标签。
   转起来的时候纹路会跟着走，是四种里最像「在放唱片」的一个 */
[data-disc="vinyl"] .is-blank{
  background:
    /* 中心标签 */
    radial-gradient(circle at 50% 50%,
      var(--brand) 0 22%, transparent 22.5%),
    /* 唱针纹路 */
    repeating-radial-gradient(circle at 50% 50%,
      #2a2a2e 0 2px, #17171a 2px 4px),
    #17171a;
}
/* 正中间那个小孔。有它才像唱片，没有就只是一堆圆圈 */
[data-disc="vinyl"] .is-blank::after{
  content:"";position:absolute;left:50%;top:50%;
  width:12%;height:12%;margin:-6% 0 0 -6%;
  border-radius:50%;background:var(--card);
}
/* 黑胶上不放音符 —— 唱片中间本来就是标签，压个图标反而乱 */
[data-disc="vinyl"] .is-blank > i{display:none}

/* ── ③ 声波律动 ──
   三根柱子随播放跳动。停下时柱子也停 —— 这样「在放没在放」不看别处就知道 */
[data-disc="wave"] .is-blank{
  background:linear-gradient(160deg,#2b2f42,#161926);
}
[data-disc="wave"] .is-blank > i{display:none}
[data-disc="wave"] .is-blank::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44%;height:40%;
  /* 三根柱子用重复渐变画，高度靠 background-size 在动画里变 */
  background:
    linear-gradient(var(--brand),var(--brand)) 0    50% / 22% 40% no-repeat,
    linear-gradient(var(--brand),var(--brand)) 50%  50% / 22% 80% no-repeat,
    linear-gradient(var(--brand),var(--brand)) 100% 50% / 22% 55% no-repeat;
}
.is-playing [data-disc="wave"] .is-blank::before,
[data-disc="wave"] .is-playing .is-blank::before{
  animation:wb-disc-wave .9s ease-in-out infinite alternate;
}
@keyframes wb-disc-wave{
  from{
    background-size:22% 30%, 22% 85%, 22% 45%;
  }
  to{
    background-size:22% 80%, 22% 35%, 22% 90%;
  }
}

/* ── ④ 极简描边 ──
   浅底 + 主题色描边和音符。适合浅色、克制的站点风格 */
[data-disc="line"] .is-blank{
  background:var(--card);
  box-shadow:inset 0 0 0 2px var(--brand);
  color:var(--brand);
}
[data-disc="line"] .is-blank::after{
  content:"";position:absolute;inset:14%;
  border-radius:50%;border:1px solid var(--brand);opacity:.35;
}

/*
 * 转起来的时候方角会露出底色，圆的才转得好看 —— 帖子卡片上那个封面
 * 平时是圆角矩形，播放时变正圆，这几种样式都跟着走。
 */
.wb-audio.is-playing .wb-audio-cover.is-blank{border-radius:50%}

/* ---------- 全局播放器：右下角悬浮球 + 面板 ---------- */
/*
 * 做成 overlay 而不是顶部条：它不参与任何布局计算，出错也只影响它自己。
 * （顶部条要改 6~7 处 calc(var(--top-h) + …)，而且它会出现和消失，
 * 等于给全站布局多加一个会变的量。）
 *
 * PC 放在「回到顶部」上方那一列；移动端摞在发布按钮上方 ——
 * 而且只有在放歌时才出现，平时那一列还是只有一个发布按钮。
 */
.wb-fp{
  position:fixed;right:20px;bottom:20px;z-index:85;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}

/* ---- 折叠态：一个圆钮 ---- */
.wb-fp-ball{
  position:relative;width:52px;height:52px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:var(--card);
  box-shadow:0 4px 16px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.wb-fp-ball:hover{transform:scale(1.06)}
.wb-fp-ball:active{transform:scale(.96)}

/*
 * 进度环。用 conic-gradient 画，JS 只改一个 --p 变量 ——
 * 不展开面板也知道「在放、放到哪儿了」，多数时候根本不用点开。
 */
.wb-fp-ring{
  position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--brand) var(--p,0%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  pointer-events:none;
}
/* 老浏览器不认 mask，环会变成一个实心扇形 —— 那太丑，干脆不画 */
@supports not ((-webkit-mask: radial-gradient(#000,#000)) or (mask: radial-gradient(#000,#000))){
  .wb-fp-ring{display:none}
}

.wb-fp-art{
  width:44px;height:44px;border-radius:50%;overflow:hidden;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.wb-fp-art img{width:100%;height:100%;object-fit:cover;display:block}
/* 放歌时唱片转起来 —— 跟帖子卡片上的封面是同一套语言 */
.wb-fp.is-playing .wb-fp-art{animation:wb-audio-spin 12s linear infinite}

/* 中间那层状态标记。暂停时常显，放歌时透明（让封面转），hover 才浮出来 */
.wb-fp-ball-state{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(0,0,0,.42);color:#fff;
  display:flex;align-items:center;justify-content:center;line-height:0;
  transition:opacity .2s;
}
.wb-fp.is-playing .wb-fp-ball-state{opacity:0}
.wb-fp.is-playing .wb-fp-ball:hover .wb-fp-ball-state{opacity:1}
/*
 * 三角 / 暂停符跟着状态换 —— 原来这里只有一个写死的三角，放歌时把鼠标
 * 移到球上，浮出来的是个「播放」图标，而此时面板上明明是暂停符。
 *
 * 只用类选择器切，不写 `.wb-fp-ball-state > i`：那是 (0,1,1)，会把
 * (0,1,0) 的显示规则压掉，跟上面 wb-p-play 那处踩过的是同一个坑。
 */
.wb-fp-ball-play,.wb-fp-ball-pause{line-height:0}
.wb-fp-ball-play{display:flex}
.wb-fp-ball-pause{display:none}
.wb-fp.is-playing .wb-fp-ball-play{display:none}
.wb-fp.is-playing .wb-fp-ball-pause{display:flex}

/* ---------- 播放器皮肤 ---------- */
/*
 * 三套：简约白 / 毛玻璃 / 深色，站长在后台选。
 *
 * 做法是**把颜色抽成一组变量**，皮肤只负责改变量值，控件本身的样式一份。
 * 三套各写一遍布局的话，以后调一个间距要改三处，迟早对不齐。
 *
 * ────────────────────────────────────────────────
 *  比例参考的是真东西，不是拍脑袋
 * ────────────────────────────────────────────────
 * 扒了网易云自己的外链播放器 CSS 和 APlayer（handsome 用的那套）：
 *   进度条高   网易云 2px   APlayer 3px   —— 原来写的 4px 偏粗，改 3px
 *   时间字号   网易云 11px                —— 原来 11.5px，改 11px
 *   缓冲条色   APlayer #d3d3e0（**去饱和的灰紫**，不是品牌色的浅版）
 *              —— 原来用品牌色 28%，跟已播放那条太像，分不出哪条是哪条
 */

.wb-fp-panel{
  /* 皮肤变量的默认值 = 简约白 */
  --p-bg:var(--card);
  --p-line:var(--line);
  --p-txt:var(--txt);
  --p-txt2:var(--txt-2);
  --p-txt3:var(--txt-3);
  --p-track:var(--line);
  --p-buf:rgba(140,140,160,.45);   /* 去饱和，跟已播放那条拉开 */
  --p-hover:var(--line-soft);
  --p-shadow:0 10px 34px rgba(0,0,0,.14);

  position:relative;
  width:300px;padding:16px;
  border-radius:16px;              /* 12 → 16，跟悬浮球的圆形更协调 */
  background:var(--p-bg);
  border:1px solid var(--p-line);
  box-shadow:var(--p-shadow);
  color:var(--p-txt);
  overflow:hidden;                 /* 让毛玻璃那层背景不越界 */
  order:-1;
}

/* 背景层：只有毛玻璃皮肤用得上，别的皮肤直接不显示 */
.wb-fp-bg{display:none}

/* ── 毛玻璃 ── */
/*
 * 招牌效果：**把当前这首歌的封面糊在后面**，每首歌颜色都不一样。
 * 网易云和 Apple Music 的「正在播放」页就是这么做的。
 */
.wb-fp[data-skin="glass"] .wb-fp-panel{
  --p-bg:rgba(24,24,28,.58);
  --p-line:rgba(255,255,255,.14);
  --p-txt:#fff;
  --p-txt2:rgba(255,255,255,.82);
  --p-txt3:rgba(255,255,255,.55);
  --p-track:rgba(255,255,255,.22);
  --p-buf:rgba(255,255,255,.38);
  --p-hover:rgba(255,255,255,.14);
  --p-shadow:0 14px 44px rgba(0,0,0,.34);

  -webkit-backdrop-filter:blur(30px) saturate(170%);
          backdrop-filter:blur(30px) saturate(170%);
}
.wb-fp[data-skin="glass"] .wb-fp-bg{
  display:block;position:absolute;inset:0;z-index:-1;
  /*
   * 放大 1.4 倍：模糊会让边缘露出没糊到的硬边，放大才盖得住。
   * 所以它必须是独立的一层 —— 直接给面板设背景再模糊，会把文字一起糊掉。
   *
   * **兜底渐变是这一层的第二个背景，不是另铺一层。**
   * 第一版把它做成了 ::before 无条件铺在下面（opacity:.9），而封面层只有
   * .62 不透明 —— 于是橙色从封面底下透上来 38%，**每首歌都被染成橙调**，
   * 切歌看着「颜色没变」。
   *
   * 写成同一层的两个背景就没这个问题：有封面时 cover 铺满，把渐变整个盖住；
   * 没封面时第一层是 none，渐变自然露出来。
   */
  background:
    var(--cover, none) center / cover no-repeat,
    linear-gradient(150deg,var(--brand),#1c1c22 78%);
  transform:scale(1.4);
  filter:blur(28px) saturate(180%);
  opacity:.62;
}
/*
 * 老浏览器不认 backdrop-filter（Firefox 早期版本、部分安卓 WebView）。
 * 不兜底的话半透明黑直接贴在页面上，后面的文字透上来，整块糊成一片看不清。
 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .wb-fp[data-skin="glass"] .wb-fp-panel{--p-bg:rgba(24,24,28,.94)}
}

/* ── 深色 ── */
/* 不跟封面走，始终一个色。适合不想让界面「一首歌一个样」的站 */
.wb-fp[data-skin="dark"] .wb-fp-panel{
  --p-bg:#1f2026;
  --p-line:rgba(255,255,255,.10);
  --p-txt:#fff;
  --p-txt2:rgba(255,255,255,.80);
  --p-txt3:rgba(255,255,255,.50);
  --p-track:rgba(255,255,255,.18);
  --p-buf:rgba(255,255,255,.34);
  --p-hover:rgba(255,255,255,.12);
  --p-shadow:0 12px 38px rgba(0,0,0,.4);
}

/* ── 控件跟着变量走 ── */

.wb-fp-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.wb-fp-cover{
  flex:0 0 auto;width:52px;height:52px;border-radius:10px;overflow:hidden;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.wb-fp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wb-fp-meta{flex:1;min-width:0}
.wb-fp-meta b{
  display:block;font-size:14.5px;font-weight:500;color:var(--p-txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-fp-meta em{
  display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--p-txt3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 关闭键平时很淡 —— 它是这个面板里最不该被误点的东西 */
.wb-fp-close{opacity:.45;transition:opacity .15s}
.wb-fp-panel:hover .wb-fp-close{opacity:.8}
.wb-fp-close:hover{opacity:1}

/* 进度。外层 14px 是点击区域，真正的线只有 3px（照 APlayer 的数） */
.wb-fp-seek{position:relative;height:14px;display:flex;align-items:center;cursor:pointer}
.wb-fp-seek::before{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:var(--p-track);
}
.wb-fp-buf{
  position:absolute;left:0;width:0;height:3px;border-radius:2px;
  background:var(--p-buf);transition:width .3s linear;
}
.wb-fp-played{position:absolute;left:0;width:0;height:3px;border-radius:2px;background:var(--brand)}
.wb-fp-dot{
  position:absolute;left:0;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2.5px solid var(--brand);transform:translateX(-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  opacity:0;transition:opacity .15s;
}
.wb-fp-panel:hover .wb-fp-dot,.wb-fp.is-seeking .wb-fp-dot{opacity:1}

.wb-fp-time{
  display:flex;justify-content:space-between;
  margin:3px 0 12px;font-size:11px;color:var(--p-txt3);
  font-variant-numeric:tabular-nums;
}
.wb-fp-time em{font-style:normal}

/*
 * 第一行：五个键左右对称，主键落在正中间。
 * 用 space-between 而不是 center + margin —— 前者不管加减控件都对称，
 * 后者每改一次都要重新配那几个 margin。
 */
.wb-fp-ctrl{display:flex;align-items:center;justify-content:space-between;gap:2px}
/* 第二行：倍速 + 音量，调好一次就不动的东西 */
.wb-fp-ctrl2{display:flex;align-items:center;gap:6px;margin-top:8px}
.wb-fp-gap{flex:1}
.wb-fp-btn{
  /*
   * **flex:none 是这行里最要紧的一句。**
   * 少了它，一排放不下时 flex 会去压每个孩子；小键有 min-width 兜着，
   * 而主键只写了 width —— 于是只有它被压扁，40×40 的圆变成椭圆。
   * 站长看到的就是「调完音量播放键变形了」。
   */
  flex:none;
  min-width:30px;height:30px;padding:0 5px;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--p-txt2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-variant-numeric:tabular-nums;
  transition:background .15s,color .15s,transform .12s;
}
.wb-fp-btn:hover{background:var(--p-hover);color:var(--p-txt)}
.wb-fp-btn:active{transform:scale(.92)}
/* 主键 36 → 40：它是这一排里唯一该被一眼看到的 */
.wb-fp-btn.is-main{
  width:40px;height:40px;border-radius:50%;
  background:var(--brand);color:#fff;margin:0 5px;
  box-shadow:0 3px 12px color-mix(in srgb, var(--brand) 45%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .wb-fp-btn.is-main{box-shadow:0 3px 12px rgba(0,0,0,.25)}
}
.wb-fp-btn.is-main:hover{background:var(--brand);filter:brightness(1.08)}
.wb-fp-btn .is-flip{transform:scaleX(-1)}
.wb-fp-btn i{line-height:0}

/*
 * 主键里三个图标只显示一个。
 *
 * **别用 `.wb-fp-btn.is-main i{display:none}` 这种通配去藏。**
 * 那条是 (0,2,1)（两个类 + 一个元素），而显示那条 `.wb-fp .wb-p-play`
 * 只有 (0,2,0) —— 永远被压住，**暂停时那个按钮里一个图标都没有**。
 *
 * 播放中之所以看着正常，纯属巧合：`.wb-fp.is-playing .wb-p-pause` 是
 * (0,3,0)，刚好赢过那条通配。所以这个 bug 只在暂停时才露出来。
 *
 * 改成藏和显用**同一层选择器**，谁在后面谁生效，不用去数优先级。
 */
.wb-fp .wb-p-play{display:flex}
.wb-fp .wb-p-pause,.wb-fp .wb-p-wait{display:none}
.wb-fp.is-playing .wb-p-play{display:none}
.wb-fp.is-playing .wb-p-pause{display:flex}
.wb-fp.is-wait .wb-p-play,.wb-fp.is-wait .wb-p-pause{display:none}
.wb-fp.is-wait .wb-p-wait{
  display:block;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:wb-spin .7s linear infinite;
}
/*
 * 顺序 / 随机两个图标同理，藏和显写在同一层选择器上 ——
 * 上面主键那段注释里说的坑，这里不能再踩一遍。
 */
.wb-fp .wb-p-order{display:flex}
.wb-fp .wb-p-shuffle{display:none}
.wb-fp.is-shuffle .wb-p-order{display:none}
.wb-fp.is-shuffle .wb-p-shuffle{display:flex}
/* 随机开着的时候按钮亮起来 —— 不然两个图标长得像，看不出当前是哪档 */
.wb-fp.is-shuffle [data-player-mode]{color:var(--brand)}
.wb-fp .wb-p-vol{display:flex}
.wb-fp .wb-p-mute{display:none}
.wb-fp.is-muted .wb-p-vol{display:none}
.wb-fp.is-muted .wb-p-mute{display:flex}
.wb-fp.is-muted [data-player-mute]{color:var(--danger)}

/*
 * 音量：靠右，固定 86px。
 *
 * 一度让它 flex:1 占满第二行 —— 结果**视觉权重整个反了**：音量是"调一次
 * 基本不动"的控件，却成了面板上最宽的元素，比真正要一直看的进度条还抢眼。
 *
 * 也不再用「悬停才展开」那个老写法：除了会把整排挤扁（主键压成椭圆），
 * **触屏上根本没有 hover，手机端等于一直没有音量控制**。
 */
.wb-fp-vol{margin-left:auto;display:flex;align-items:center;gap:4px}

/*
 * ───── 滑杆整个自绘 ─────
 *
 * 不能靠 accent-color：它**只管已填充那一段**，未填充的槽色由浏览器按
 * color-scheme 定，我们控制不了 —— 毛玻璃皮肤底子偏亮，浏览器却给深灰，
 * 于是面板上横着一条突兀的黑杠。
 *
 * 自绘之后槽色走 --p-line，跟进度条**同一个 token**：三套皮肤自动跟随，
 * 而且两根条子看起来终于像是一套东西了。
 *
 * ⚠ ::-webkit-* 和 ::-moz-* **绝对不能写进同一个选择器列表**。
 *   浏览器碰到不认识的伪元素会把整条规则作废 —— 合着写的结果是两边
 *   都不生效，而且不报错，非常难查。所以下面是分开的两组。
 */
.wb-fp-vol-bar{
  -webkit-appearance:none;appearance:none;
  flex:none;width:86px;height:14px;margin:0;padding:0;
  background:none;cursor:pointer;
}
.wb-fp-vol-bar:focus{outline:none}
.wb-fp-vol-bar:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}

/* webkit / blink：槽没有「已填充」的概念，用渐变自己切一刀，--v 由 JS 写 */
.wb-fp-vol-bar::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,
    var(--brand) 0 var(--v,100%), var(--p-line) var(--v,100%) 100%);
}
.wb-fp-vol-bar::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:10px;height:10px;margin-top:-3.5px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  opacity:0;transition:opacity .15s;
}
/* 平时只有一根细线，动它的时候才出现圆点 —— 跟进度条上那个 dot 一个规矩 */
.wb-fp-vol:hover .wb-fp-vol-bar::-webkit-slider-thumb,
.wb-fp-vol-bar:focus-visible::-webkit-slider-thumb{opacity:1}
/* 静音时整条褪成灰的，比只把喇叭图标变红更一眼 */
.wb-fp.is-muted .wb-fp-vol-bar::-webkit-slider-runnable-track{background:var(--p-line)}

/* firefox：它有原生的 ::-moz-range-progress，不需要上面那套渐变 */
.wb-fp-vol-bar::-moz-range-track{height:3px;border:0;border-radius:2px;background:var(--p-line)}
.wb-fp-vol-bar::-moz-range-progress{height:3px;border-radius:2px;background:var(--brand)}
.wb-fp-vol-bar::-moz-range-thumb{
  width:10px;height:10px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  opacity:0;transition:opacity .15s;
}
.wb-fp-vol:hover .wb-fp-vol-bar::-moz-range-thumb,
.wb-fp-vol-bar:focus-visible::-moz-range-thumb{opacity:1}
.wb-fp.is-muted .wb-fp-vol-bar::-moz-range-progress{background:var(--p-line)}

/* 定时关闭：开着的时候亮起来，并把剩余分钟写在图标后面 */
.wb-fp-timer.is-on{color:var(--brand)}
.wb-fp-timer b{font-size:11px;font-weight:600;margin-left:3px;font-variant-numeric:tabular-nums}

/* 播放列表 */
.wb-fp-list{
  list-style:none;margin:12px -6px -4px;padding:10px 0 0;
  border-top:1px solid var(--p-line);
  max-height:190px;overflow-y:auto;
}
.wb-fp-list li{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;
  color:var(--p-txt2);transition:background .15s;
}
.wb-fp-list li:hover{background:var(--p-hover)}
.wb-fp-list li.is-on{background:var(--p-hover);color:var(--brand)}
.wb-fp-list i{
  flex:0 0 auto;width:16px;font-style:normal;font-size:11px;
  color:var(--p-txt3);text-align:center;font-variant-numeric:tabular-nums;
}
.wb-fp-list li.is-on i{color:var(--brand)}
.wb-fp-list b{flex:1;min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-fp-list em{
  flex:0 0 auto;max-width:70px;font-style:normal;font-size:11.5px;color:var(--p-txt3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-fp-list span{flex:0 0 auto;font-size:11px;color:var(--p-txt3);font-variant-numeric:tabular-nums}
/* 深色皮肤下滚动条也得跟着淡下去，不然是一条突兀的亮边 */
.wb-fp[data-skin="glass"] .wb-fp-list::-webkit-scrollbar,
.wb-fp[data-skin="dark"] .wb-fp-list::-webkit-scrollbar{width:4px}
.wb-fp[data-skin="glass"] .wb-fp-list::-webkit-scrollbar-thumb,
.wb-fp[data-skin="dark"] .wb-fp-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);border-radius:2px;
}

/* ---- 移动端 ---- */
/*
 * 右下角本来就有发布按钮（bottom:72px）和底部标签栏，所以往上摞一层。
 * 面板宽度改成跟屏幕走，300px 在小屏上会顶到左边缘。
 */
/*
 * 偏移只在窄屏成立：底部标签栏和发布按钮只有窄屏才有。
 * 这里原来特意写的是 body 上的布局类而不是媒体查询，理由是「本站按设备发两套布局」——
 * 那个前提已经不成立了（改成一套模板 + 断点）。现在断点和标签栏出现的条件
 * 是同一个，用 @media 正好对得上。
 */
/*
 * 窄屏右下角自底向上只剩两个：
 *
 *   发布键    72 ~ 122   （50px，常驻）
 *   音乐球   132 ~ 184   （52px，放着音乐时才在）
 *
 * 中间留 10px。返回顶部在窄屏已经不出现了（说明见它自己那一节），
 * 所以不再需要「它一露面音乐球就让一层」那套联动 —— 连同 body.has-totop
 * 一起撤了，留着就是一个没人消费的类。
 *
 * 曾经这两个都写死在 132/136，注释里都写着「摞在发布按钮上方」，
 * 谁也不知道对方也在那儿 —— 一边滚动一边放歌就撞在一起，重叠 40px。
 */
@media (max-width:1024px){
body.wb-app .wb-fp{
  right:16px;
  bottom:calc(132px + env(safe-area-inset-bottom));
}
}
/* 面板 300px 在小屏上会顶到左边缘 */
@media (max-width:520px){
  .wb-fp-panel{width:min(300px, calc(100vw - 32px))}
}

/* 转发块里的缩小版：去掉倍速和静音，只留最核心的播放和进度 */
.wb-quote .wb-audio{padding:9px 11px;gap:10px}
/* 缩的是**封面**，不是播放键 —— 播放键现在是压在封面上的一层蒙层，
   给它写死宽高只会让它跟封面对不齐 */
.wb-quote .wb-audio-cover{width:42px;height:42px}

@media (max-width:520px){
  .wb-audio{gap:10px;padding:10px 11px}
}

/* ---------- 平台嵌入视频 ---------- */
/*
 * 尺寸和圆角完全跟本站视频（.wb-video）一致 —— 信息流里两种视频
 * 混在一起时，不该一眼看出「这条是外站的」而在版式上先跳一下。
 * 区别只在右上角那个平台角标，那是必要的信息。
 */
.wb-embed{
  position:relative;width:100%;margin-top:10px;
  aspect-ratio:16/9;max-height:480px;
  background:#0d0d0f;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;user-select:none;
}
.wb-embed-cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:filter .2s;
}
.wb-embed:hover .wb-embed-cover{filter:brightness(.86)}
/* 没抓到封面时那块深色底本身就是占位，不另画一张灰图 —— 
   灰图只会让人以为是加载失败 */

.wb-embed-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.wb-embed:hover .wb-embed-play{background:var(--brand);transform:translate(-50%,-50%) scale(1.06)}
/* 三角形用边框拼，不引图标 —— 播放键是全站唯一一个纯几何的形状 */
.wb-embed-play i{
  display:block;margin-left:4px;
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.wb-embed-tag{
  position:absolute;right:10px;top:10px;
  padding:2px 8px;border-radius:4px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:11.5px;line-height:1.6;
  backdrop-filter:saturate(1.4) blur(2px);
}
/* 角标是个链接：播放器出不来画时，这是用户唯一的出路，得点得着 */
a.wb-embed-tag{text-decoration:none;transition:background .15s}
a.wb-embed-tag:hover{background:var(--brand);color:#fff}
/* 点开之后：封面和播放键退场，**角标留着** ——
   正是播放器加载出问题的时候，那个「去平台看」的入口最有用 */
.wb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wb-embed.is-on .wb-embed-cover,
.wb-embed.is-on .wb-embed-play{display:none}
/* 播放器盖住整块之后角标会被压在底下，抬上来并淡一点，不挡播放器的控件 */
.wb-embed.is-on .wb-embed-tag{z-index:2;opacity:.55}
.wb-embed.is-on .wb-embed-tag:hover{opacity:1}
.wb-embed.is-on{cursor:default}

/* 转发引用块里的缩小版 */
.wb-quote .wb-embed{max-height:260px}
.wb-quote .wb-embed-play{width:46px;height:46px}
.wb-quote .wb-embed-play i{border-width:8px 0 8px 13px}

/* ---------- 上传进度 ---------- */
/* 传一个几十兆的视频时，界面上必须有个东西在动 ——
   没有的话用户不知道是在传还是卡死了，只能去点关闭 */
.wb-media-prog{margin:0 0 12px;padding:11px 13px;border-radius:9px;background:var(--bg-soft,rgba(127,127,127,.06))}
.wb-media-prog-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font-size:12.5px}
.wb-media-prog-hd b{
  flex:1;min-width:0;font-weight:500;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-media-prog-hd span{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--brand);font-weight:600}
.wb-media-prog-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.wb-media-prog-bar i{
  display:block;height:100%;width:0;border-radius:3px;
  background:var(--brand);transition:width .18s linear;
}
/* 进度到 100% 之后服务端还要存盘写库，这一段没有百分比可报 ——
   用一道流动的斜纹告诉用户「还在处理，别关」 */
.wb-media-prog.is-wait .wb-media-prog-bar i{
  width:100% !important;
  background:repeating-linear-gradient(45deg,
    var(--brand) 0 8px, rgba(255,255,255,.45) 8px 16px);
  background-size:22px 100%;
  animation:wb-prog-move .7s linear infinite;
}
@keyframes wb-prog-move{to{background-position:22px 0}}

/* ---------- 待发内容 + 草稿 ---------- */
/*
 * 待发卡片刻意做得**比真卡片轻**：没有头像、没有操作栏、底色是浅灰。
 * 它得让人一眼看出「这条还没发出去」，而不是混在时间线里以为已经发了。
 */
.wb-pending{
  padding:14px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--bg-soft, rgba(127,127,127,.05));
  animation:wb-slide-in .3s ease;
}
.wb-pending-hd{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-3)}
.wb-pending-hd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 转着的小点 —— 比一句「发送中」更快被看见 */
.wb-pending-dot{
  flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--brand);border-top-color:transparent;
  animation:wb-spin .7s linear infinite;
}
@keyframes wb-spin{to{transform:rotate(360deg)}}
.wb-pending-hd em{flex:0 0 auto;display:flex;gap:6px;font-style:normal}
.wb-pending-hd button{
  border:0;background:none;padding:0 2px;cursor:pointer;
  font-size:12.5px;color:var(--brand);
}
.wb-pending-hd button[data-pending-drop]{color:var(--txt-3)}
.wb-pending-text{
  margin-top:8px;font-size:15px;line-height:1.7;color:var(--txt-2);
  white-space:pre-wrap;word-break:break-word;
}
.wb-pending-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wb-pending-imgs img{width:74px;height:74px;object-fit:cover;border-radius:6px;opacity:.75}
.wb-pending-extra{margin-top:6px;font-size:12px;color:var(--txt-3)}
/* 失败：停掉转圈，换成红点，整块加一道左边框 —— 它现在需要你处理 */
.wb-pending.is-failed{border-left:3px solid var(--danger);padding-left:13px}
.wb-pending.is-failed .wb-pending-hd{color:var(--danger)}
.wb-pending.is-failed .wb-pending-dot{
  border-color:var(--danger);border-top-color:var(--danger);animation:none;
}

/* 「已恢复上次没发完的内容」。必须明说 ——
   悄悄塞回来的话，用户会以为自己上次发出去了却又躺在框里 */
.wb-draft-bar{
  display:flex;align-items:center;gap:8px;
  margin:-4px 0 10px;padding:7px 11px;border-radius:8px;
  background:rgba(250,157,59,.12);color:var(--txt-2);font-size:12.5px;
}
.wb-draft-bar span{flex:1;min-width:0}
.wb-draft-bar button{
  border:0;background:none;padding:0;cursor:pointer;
  font-size:12.5px;color:var(--txt-3);text-decoration:underline;
}

/* ---------- 红包 ---------- */
/*
 * 红包是全站唯一用红色的地方，刻意的：站里主色是橙，红包一出来就跳出来。
 * 但只在红包自己这一块用，不往外扩散。
 */
/*
 * 气泡照微信红包的比例做：**264px 宽，不占满整行**。
 * 红包在微信里从来不是一条横幅，是一个能捏在手里的小方块 ——
 * 撑满 600px 的 feed 宽度会让它看着像通栏广告，反而没人想点。
 * 窄下来之后它才像「一个红包」，而不是「一条公告」。
 */
.wb-rp{
  display:block;width:264px;max-width:100%;margin-top:10px;
  border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  /* 微信那套：卡片是橙的，信封是红的 —— 不是整块红。
     整块红会跟站里的「危险/删除」撞语义，也太重；
     橙底红封是「有个红包在这儿」，红底才是拆开之后那一下 */
  background:#fa9d3b;color:#fff;
  transition:filter .15s;
}
.wb-rp:hover{filter:brightness(1.04)}
.wb-rp:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 已领 / 已抢光 / 已过期：整块褪成淡橙。
   不是加个「已结束」标签了事 —— 一屏里混着好几个红包时，
   靠颜色一眼分出「还能抢」和「没了」，比逐个读文字快得多 */
.wb-rp.is-cold{background:#f7d3a8;color:#a97440}
.wb-rp.is-cold:hover{filter:none}

.wb-rp-main{display:flex;align-items:center;gap:11px;padding:13px 14px}
/* 用「福」字而不是抽象图标：中文用户对这个字的识别是瞬间的，
   任何画出来的信封图标都要慢半拍 */
.wb-rp-ico{
  flex:0 0 auto;width:38px;height:44px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  background:#e8412f;color:#ffd76a;
  font-style:normal;font-size:20px;font-weight:700;line-height:1;
  box-shadow:0 2px 6px rgba(200,50,30,.28);
}
.wb-rp.is-cold .wb-rp-ico{background:#e8b98d;color:#fff8ef;box-shadow:none}
.wb-rp-say{flex:1;min-width:0}
.wb-rp-say b{display:block;font-size:14.5px;font-weight:600;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-rp-say span{display:block;margin-top:3px;font-size:12px;opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 底部那条「拼手气红包」——微信红包底下写「微信红包」的位置。
   类型是补充信息，压在这儿既交代清楚了，又不跟祝福语抢主位 */
.wb-rp-foot{
  padding:6px 14px;font-size:11.5px;
  border-top:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);
}
.wb-rp.is-cold .wb-rp-foot{border-top-color:rgba(169,116,64,.2);color:rgba(169,116,64,.85)}

/*
 * 发红包弹窗里还在用的两样：类型切换按钮 + 「每份多少」那行汇总。
 *
 * 其余的（.wb-composer-rp 那整块内联面板、.wb-crp-hd、.wb-crp-row）已经删了 ——
 * 红包改成跟投票一样在弹窗里填，编辑框里只留一条 chip，那些类没有任何地方再用。
 */
.wb-crp-types{display:flex;gap:6px}
.wb-crp-types button{
  height:28px;padding:0 14px;border-radius:14px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--txt-2);
}
.wb-crp-types button.is-on{border-color:#e02020;background:#fdecec;color:#e02020;font-weight:600}
.wb-crp-sum{margin-top:10px;font-size:12.5px;color:var(--txt-2)}
.wb-crp-sum .is-bad{font-style:normal;color:var(--danger)}

/* 拆红包弹窗 */
/*
 * 拆红包弹窗。
 *
 * 配色统一走这三个变量 —— 封面和结果页共用，改一处两边一起变。
 * 原来两边各写各的渐变（封面 #e94a3f→#c62f27，结果 #e94a3f→#d3372c），
 * 拆开之后红色会「跳」一下，像换了个弹窗。
 */
.wb-rpmodal{
  --rp-red:#f1544a;        /* 主红 */
  --rp-red-2:#e2413a;      /* 封口那一块，压深一点让弧线看得出来 */
  --rp-gold:#f7dcac;       /* 文字金 */
  --rp-coin:#f0d9a8;       /* 開 那枚金币 */
}
.wb-rpbox{
  width:320px;max-width:86vw;padding:0;overflow:visible;
  border-radius:20px;position:relative;background:transparent;box-shadow:none;
}
/*
 * ⚠ 关闭按钮在**红包外面的下方**。
 * 微信就是这么放的：封面上只该有一个可点的东西 —— 那个「開」。
 * 右上角挂个 ✕ 会跟它抢注意力，而拆红包这件事上，
 * 误点关闭比误点打开难受得多。
 */
.wb-rpbox-x{
  position:absolute;right:12px;top:12px;z-index:3;
  width:30px;height:30px;border-radius:50%;cursor:pointer;flex:none;
  border:0;background:rgba(0,0,0,.14);color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.wb-rpbox-x:hover{background:rgba(0,0,0,.24);color:#fff}

.wb-rpbox-res{display:none}
.wb-rpbox.is-revealed .wb-rpbox-cover{display:none}
.wb-rpbox.is-revealed .wb-rpbox-res{display:block}
/* 翻到结果那面之后，圆角和白底要回来 —— 封面是整块红，结果是白卡片 */
.wb-rpbox.is-revealed{
  background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}

/* ---------- 封面 ---------- */
/*
 * 竖长的一张红纸：上半截是「谁的红包 + 祝福语」，下半截是封口，
 * 「開」压在两者的交界上。比例照微信，大约 3:4。
 */
.wb-rpbox-cover{
  background:var(--rp-red);color:var(--rp-gold);
  text-align:center;border-radius:20px;overflow:hidden;
  position:relative;padding:52px 24px 0;height:426px;
}
/* 头像和「谁的红包」同一行 —— 这只是一句说明，不该占掉一整块 */
.wb-rpbox-from{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;opacity:.92;
}
.wb-rpbox-from b{font-weight:500}
/* 方头像（圆角），跟微信一致；圆头像在这个尺寸上会显得太「社交」 */
.wb-rpbox-ava{width:26px;height:26px;border-radius:6px;object-fit:cover;border:0}
.wb-rpbox-bless{
  margin-top:26px;font-size:26px;font-weight:600;line-height:1.45;
  letter-spacing:1px;
}
.wb-rpbox-msg{margin-top:22px;font-size:14px;opacity:.9}
.wb-rpbox-msg a{color:#fff;text-decoration:underline}

/*
 * 封口。一道向上凸的弧，用一个超宽的椭圆做 ——
 * 比切 SVG 省事，缩放也不会失真（结果页那道撕口用的是同一招）。
 */
.wb-rpbox-flap{
  /*
   * ⚠ 148px 不是随手定的：**弧的最高点要正好穿过金币的中心**。
   *
   * 金币离底 96px、半径 52px，中心就在离底 148px 处；而弧的最高点
   * 就在这个盒子的顶边 —— 两个数一样，弧线才从圆心穿过去。
   * 第一版给了 190px，弧线从金币**上方 42px** 划过，看着就是「圆圈没坐在封口上」。
   */
  position:absolute;left:-20%;right:-20%;bottom:0;height:148px;
  background:var(--rp-red-2);border-radius:50% 50% 0 0 / 34% 34% 0 0;
  pointer-events:none;
}
/* 那枚金币，压在弧线上，是整个封面唯一的重心 */
.wb-rpbox-open{
  position:absolute;left:50%;transform:translateX(-50%);bottom:96px;
  width:104px;height:104px;border:0;border-radius:50%;
  background:var(--rp-coin);
  color:#3d2b1a;font-size:38px;font-weight:600;cursor:pointer;
  font-family:"Songti SC","SimSun",serif;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .12s;
}
.wb-rpbox-open:hover{filter:brightness(1.04)}
.wb-rpbox-open:active{transform:translateX(-50%) scale(.94)}
.wb-rpbox-open:disabled{cursor:default}
/* 点下去到出结果之间转一圈：请求快的时候这一下也保证了「拆」的动作被看见，
   否则金额瞬间蹦出来，人会以为没点中 */
.wb-rpbox-open.is-spin{animation:wb-rp-spin .5s linear infinite}
@keyframes wb-rp-spin{
  from{transform:translateX(-50%) rotateY(0)}
  to{transform:translateX(-50%) rotateY(360deg)}
}
/* 没得抢的时候（没登录 / 抢完了）不显示金币，那块交给 msg */
.wb-rpbox-open[hidden]{display:none}


/* ---------- 结果 ---------- */
/* 红头下沿是个弧 —— 红包纸被撕开之后的那道口子。
   用一个溢出的椭圆做，比切 SVG 省事，缩放也不会失真 */
.wb-rpbox-hero{
  /* ⚠ 跟封面同一个红。原来这里是另一套渐变（#e94a3f→#d3372c），
     拆开的瞬间红色会「跳」一下，像换了个弹窗 */
  background:var(--rp-red);
  color:#fff;text-align:center;padding:34px 22px 14px;position:relative;
  margin-bottom:26px;
}
.wb-rpbox-hero::after{
  content:'';position:absolute;left:-12%;right:-12%;bottom:-26px;height:54px;
  border-radius:50%;background:var(--rp-red);
}
.wb-rpbox-ava2{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.5);
}
.wb-rpbox-from2{margin-top:8px;font-size:13.5px;opacity:.92}
.wb-rpbox-from2 b{font-weight:600}
.wb-rpbox-from2 i{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:9px;
  background:rgba(255,255,255,.2);font-style:normal;font-size:11px;vertical-align:1px;
}
/* 弧形是 ::after，画在内容之后。祝福语不抬 z-index 的话，
   结果面一短就会被那个椭圆盖掉半截 */
.wb-rpbox-wish{position:relative;z-index:1;margin-top:10px;font-size:15px;opacity:.95}
.wb-rpbox-got{position:relative;z-index:1;margin-top:18px}
/* 「16 积分」排成一行、数字压倒性地大，「已存入账户」另起一行 ——
   跟微信「16.00 元 / 已存入零钱」一个读法 */
.wb-rpbox-got b{font-size:46px;font-weight:700;line-height:1.1;color:#ffe08a}
.wb-rpbox-got span{margin-left:5px;font-size:14px;color:#ffe08a;opacity:.9}
/* 刚抢到的时候放一下动画；回头再点开看就不必再演一遍 */
.wb-rpbox-got.is-new b{animation:wb-rp-pop .45s cubic-bezier(.2,1.4,.5,1)}
@keyframes wb-rp-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.wb-rpbox-store{
  display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px;
  font-size:12px;color:rgba(255,255,255,.9);text-decoration:none;
}
.wb-rpbox-store:hover{color:#ffe08a}
.wb-rpbox-store b{display:inline;font-size:13px;color:inherit}
.wb-rpbox-miss{position:relative;z-index:1;margin-top:20px;font-size:14.5px;opacity:.92}
.wb-rpbox-miss a{color:#ffe08a;text-decoration:underline}

.wb-rpbox-bd{background:var(--card);padding:2px 16px 16px;max-height:40vh;overflow-y:auto}
.wb-rpbox-stat{font-size:12.5px;color:var(--txt-3);padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.wb-rpbox-list li{display:flex;align-items:center;gap:10px;padding:9px 0}
.wb-rpbox-list img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.wb-rpbox-list div{flex:1;min-width:0}
.wb-rpbox-list b{display:block;font-size:13.5px;font-weight:400;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-rpbox-list time{font-size:11.5px;color:var(--txt-3)}
.wb-rpbox-list span{flex:0 0 auto;font-size:13.5px;color:var(--txt)}
.wb-rpbox-list li.is-me b{color:#e02020;font-weight:600}
/* 手气最佳。只有拼手气红包**领完之后**才会出现 —— 见 RedPacket::luckyShareId() */
.wb-rpbox-lucky{
  display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;
  background:#fff4d6;color:#c8860d;font-style:normal;font-size:11px;font-weight:600;
  vertical-align:1px;
}
.wb-rpbox-tip{margin-top:10px;font-size:11.5px;color:var(--txt-3);line-height:1.7}

/* 移动端主页的「加入 / 最后活跃」那一行 */
.wb-m-profile-time{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:6px;font-size:12px;color:var(--txt-3);
}
.wb-m-profile-time > .ico{flex:0 0 auto}
.wb-m-profile-time span{opacity:.5}

/* ---------------- 公开的管理记录 ---------------- */
.wb-logs-hd{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.wb-logs-hd h2{font-size:17px;font-weight:600;margin-bottom:6px}
.wb-logs-hd p{font-size:13px;color:var(--txt-3);line-height:1.7}
.wb-log-list{list-style:none;margin:0;padding:0}
/*
 * 四栏：对象 | 动作 | 管理员 | 时间。动作那一栏占满剩下的宽度 ——
 * 它是这一行里唯一长度不定的东西，也是真正要读的那部分。
 */
.wb-log{
  display:grid;grid-template-columns:170px 1fr 90px 132px;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line-soft,var(--line));
  font-size:13px;align-items:start;
}
.wb-log:last-child{border-bottom:0}
.wb-log-obj a{color:var(--brand)}
.wb-log-dim{color:var(--txt-3)}
.wb-log-act p{line-height:1.75;color:var(--txt)}
/* 理由比动作重一点：它才是用户来这个页面要找的东西 */
.wb-log-reason{color:var(--txt-2);font-weight:500}
.wb-log-by,.wb-log-at{color:var(--txt-3);font-size:12px}
.wb-log-at{font-variant-numeric:tabular-nums;text-align:right}
.wb-log-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;font-size:13px}
.wb-log-pager a{color:var(--brand)}
.wb-log-pager span{color:var(--txt-3)}
/*
 * 窄屏一栏放不下四列，改成堆叠：对象和时间一行，动作占满，管理员跟在后面。
 * 硬压成四列的结果是每一列都只剩两三个字，谁也读不了。
 */
@media (max-width:720px){
  .wb-log{grid-template-columns:1fr auto;gap:6px 10px}
  .wb-log-act{grid-column:1/-1}
  .wb-log-by{grid-column:1}
  .wb-log-at{grid-column:2}
}

/* 后台管理记录：理由那一行 */

/* ---------------- 认证申请页 ---------------- */
.wb-vf-hd{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.wb-vf-hd h2{font-size:17px;font-weight:600;margin-bottom:6px}
.wb-vf-hd p{font-size:13px;color:var(--txt-3);line-height:1.7}
/* 状态条：一眼看出现在处于哪一态，颜色是唯一的区分手段 */
.wb-vf-state{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:14px}
.wb-vf-state b{font-weight:600}
.wb-vf-state span{font-size:12px;color:var(--txt-3)}
.wb-vf-state.is-wait{background:rgba(255,152,0,.07);color:var(--brand)}
.wb-vf-state.is-ok{background:rgba(76,175,80,.09);color:#2e7d32}
.wb-vf-state.is-bad{background:rgba(244,67,54,.07);color:var(--danger)}
.wb-vf-reason{padding:0 18px 14px;font-size:13px;color:var(--txt-2);line-height:1.8}
.wb-vf-note{padding:14px 18px;font-size:13px;color:var(--txt-2)}
/* 待办清单：做完的划掉，剩下的才是他要动手的 */
.wb-vf-todo{list-style:none;margin:0;padding:6px 18px 4px}
.wb-vf-todo li{padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--line-soft,var(--line))}
.wb-vf-todo li:last-child{border-bottom:0}
.wb-vf-todo li::before{
  content:'';position:absolute;left:0;top:16px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--line);
}
.wb-vf-todo li.is-done::before{background:#4caf50;border-color:#4caf50}
.wb-vf-todo li.is-done b{color:var(--txt-3);text-decoration:line-through}
.wb-vf-todo b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.wb-vf-todo p{font-size:13px;color:var(--txt-3);line-height:1.8}
.wb-vf-todo .wb-btn{margin-top:8px}
/* 验证文件那一块：长串要能一眼看全、点一下就复制 */
.wb-vf-file{margin:8px 0;padding:10px 12px;background:var(--bg);border-radius:8px;font-size:12px}
.wb-vf-file label{display:block;color:var(--txt-3);margin:6px 0 3px}
.wb-vf-file label:first-child{margin-top:0}
.wb-vf-file code{
  display:block;padding:7px 9px;background:var(--card);border:1px solid var(--line);
  border-radius:6px;word-break:break-all;cursor:pointer;font-size:12px;line-height:1.6;
}
.wb-vf-file code:hover{border-color:var(--brand)}
.wb-vf-file a{display:block;margin-top:3px;color:var(--brand);word-break:break-all}
/* 表单 */
.wb-vf-form{padding:14px 18px 18px}
.wb-vf-row{margin-bottom:14px}
.wb-vf-row>label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.wb-vf-row input[type=text],.wb-vf-row textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);font-size:13px;outline:none;
}
.wb-vf-row input:focus,.wb-vf-row textarea:focus{border-color:var(--brand)}
.wb-vf-row em{display:block;margin-top:5px;font-size:12px;color:var(--txt-3);font-style:normal}
.wb-vf-types{display:flex;gap:8px;flex-wrap:wrap}
.wb-vf-pick{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--line);
  border-radius:20px;cursor:pointer;font-size:13px}
.wb-vf-pick:has(input:checked){border-color:var(--brand);color:var(--brand);background:rgba(255,152,0,.06)}
.wb-vf-proof{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.wb-vf-img{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden}
.wb-vf-img img{width:100%;height:100%;object-fit:cover}
.wb-vf-img button{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;line-height:1;font-size:13px;
}
.wb-vf-fee{padding:10px 12px;background:rgba(255,152,0,.07);border-radius:8px;font-size:13px;margin-bottom:14px}
.wb-vf-foot{padding:0 18px 18px;display:flex;gap:10px}
.wb-vf-todo+.wb-vf-foot{padding-top:6px}

/* ---------------- 屏蔽范围弹窗（主页的「加入黑名单」） ---------------- */
/*
 * 三个勾选默认全勾 —— 从主页点「加入黑名单」的人要的就是拉黑，
 * 让他一个个勾是把一个常见动作变成三步。
 */
.wb-bb{width:360px;padding:20px}
.wb-bb h3{font-size:16px;font-weight:600;text-align:center;margin-bottom:10px}
.wb-bb>p{font-size:13px;color:var(--txt-3);line-height:1.7;margin-bottom:14px}
.wb-bb>p b{color:var(--txt-2)}
.wb-bb label{
  display:flex;align-items:center;gap:9px;padding:9px 2px;
  font-size:14px;cursor:pointer;
}
.wb-bb input[type=checkbox]{
  width:17px;height:17px;flex:none;accent-color:var(--brand);cursor:pointer;margin:0;
}
.wb-bb-foot{display:flex;gap:10px;margin-top:16px}
.wb-bb-foot .wb-btn{flex:1;justify-content:center;height:36px;font-size:14px}

/* ════════════════ 时钟挂件 ════════════════ */
/*
 * 六套皮肤共用同一批钩子名，CSS 按 .wb-ck-<皮肤> 分开。
 * 数字一律 tabular-nums —— 不然 1 比 8 窄，秒一跳整行就左右抖。
 */
.wb-ck{font-variant-numeric:tabular-nums}
.wb-ck .wb-ck-date{font-size:12px;color:var(--txt-3);letter-spacing:.06em;text-align:center}

/* ── 翻页钟：亮色跟随主题，夜间保留经典黑底白字 ── */
/*
 * 原来它无论主题都是一块黑砖，放进浅色侧栏像补丁。现在亮色走站点的
 * --card/--txt/--line，只留「格子 + 中缝」这个形态。
 *
 * 差异全部走变量，动画和结构只写一份 —— 写两套 keyframes 的话，
 * 以后改动画节奏得记着改两个地方，而这种"记着"迟早会忘。
 */
.wb-ck-tile{
  --f-bg:#f0f1f4; --f-fg:var(--txt); --f-seam:rgba(0,0,0,.10);
  --f-edge:1px solid var(--line); --f-shadow:0 1px 2px rgba(0,0,0,.06);
  /* 翻下来那一下：浅色上要压暗，深色上要提亮 —— 方向是反的 */
  --f-lift:.93;
}
.wb-ck-tile{
  position:relative;width:36px;height:50px;border-radius:5px;
  background:var(--f-bg);border:var(--f-edge);box-shadow:var(--f-shadow);
  font:600 28px/50px "DIN Alternate","Bahnschrift",Menlo,monospace;
  color:var(--f-fg);text-align:center;overflow:hidden;
}
[data-theme="dark"] .wb-ck-tile{
  --f-bg:#26282e; --f-fg:#f2f3f5; --f-seam:rgba(0,0,0,.6);
  --f-edge:0; --f-shadow:0 2px 5px rgba(0,0,0,.45); --f-lift:1.35;
}
.wb-ck-tile::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--f-seam)}
.wb-ck-tile.is-flip{animation:wb-ck-flip .32s ease-out}
@keyframes wb-ck-flip{
  0%{transform:perspective(200px) rotateX(-42deg);filter:brightness(var(--f-lift))}
  100%{transform:none;filter:none}
}
.wb-ck-row{display:flex;gap:3px;align-items:center;justify-content:center}
.wb-ck-sep{font-style:normal;color:var(--txt-3);font:600 20px/1 monospace;padding:0 3px}
.wb-ck.wb-ck-flip{padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:11px}
[data-theme="dark"] .wb-ck.wb-ck-flip{background:#16171b}

/* ── 极简 ── */
.wb-ck.wb-ck-minimal{padding:24px 18px;text-align:center}
.wb-ck-big{
  font:600 46px/1 "DIN Alternate","Bahnschrift","Helvetica Neue",-apple-system,sans-serif;
  letter-spacing:-.01em;
}
.wb-ck-big small{font-size:20px;font-weight:500;opacity:.35;margin-left:6px}
.wb-ck-minimal .wb-ck-date{margin-top:10px;letter-spacing:.1em}

/* ── 台历 ── */
.wb-ck-top{
  background:var(--brand);color:#fff;padding:8px 14px;font-size:12.5px;
  display:flex;justify-content:space-between;
}
.wb-ck-top b{font-weight:600;letter-spacing:.04em}
.wb-ck-body{padding:14px;display:flex;align-items:center;gap:14px}
.wb-ck-day{font:600 52px/1 "DIN Alternate","Bahnschrift",sans-serif}
.wb-ck-side{flex:1;border-left:1px solid var(--line);padding-left:14px}
.wb-ck-desk .wb-ck-time{font:500 26px/1 "DIN Alternate","Bahnschrift",monospace}
.wb-ck-week{margin-top:6px;font-size:12px;color:var(--txt-3)}

/* ── 点阵 LED ── */
.wb-ck.wb-ck-led{
  padding:20px 14px;background:#0d1117;text-align:center;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:4px 4px;
}
.wb-ck-led>.wb-ck-led,.wb-ck-led .wb-ck-date{color:#3f7f5a;letter-spacing:.14em;font-family:Menlo,monospace;margin-top:9px}
.wb-ck-ledtime{
  font:600 40px/1 "DIN Alternate",Menlo,monospace;
  color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,.55);letter-spacing:.04em;
}
.wb-ck-led i{font-style:normal;animation:wb-ck-blink 1s steps(1) infinite}
@keyframes wb-ck-blink{50%{opacity:.25}}

/* ── 液晶闹钟 ── */
/*
 * 奶油白的液晶面 + 超粗黑字。**不做「未点亮的段」那层灰影** ——
 * 它能让屏更像实物，但在网页侧栏里只会让数字看着不干净。
 *
 * **铺满整个挂件，四周不留任何边距。**原来留了 10px，结果挂件卡片的白底
 * 在液晶屏外面绕了一圈，像给它套了个相框 —— 一块屏应该**就是这张卡片本身**，
 * 而不是"卡片里摆着的一个小物件"。
 *
 * 圆角**得自己画**：外面那张 .wb-card 只是 border-radius，没有 overflow:hidden，
 * 不裁孩子 —— 铺满之后方角会从卡片的圆角里戳出来。
 * 用同一个 var(--radius)，卡片圆角一改这儿自动跟上。
 *
 * 奶油白比纯白暖，跟深色的粗数字一起是老式桌面钟的味道；纯白会显得
 * 像张空白卡片，那块"屏"就不存在了。
 */
.wb-ck.wb-ck-lcd{
  padding:16px 16px 14px;
  border-radius:var(--radius);
  /*
   * 上白下奶油的斜向渐变。**从左上到右下**（160deg）而不是纯垂直 ——
   * 垂直渐变在一块矮而宽的面板上几乎看不出来，斜的才有"一块有厚度的
   * 亚克力面板"那个感觉。
   *
   * 顶部给到接近纯白，底部才落到奶油色：只差一点点，但足够让面板
   * 跟旁边的纯白卡片区分开，又不会脏。
   */
  background:linear-gradient(160deg,#ffffff 0%,#fdfbf6 45%,#f7f2e8 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
  font-family:"DIN Alternate","Bahnschrift",Menlo,monospace;color:#2a2620;
}
/*
 * 深色主题下**照样是奶油白** —— 它是一块"实物屏"，屏本身不会因为
 * 房间关灯就变黑。旁边的卡片暗下去，它反而更像一台摆在桌上的钟。
 * （不想要这个效果的站长换成「极简」或「翻页钟」那两套跟随主题的皮肤。）
 */
.wb-ck-lcdtop{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:#8a8071;letter-spacing:.1em;margin-bottom:2px;
}
.wb-ck-lcdmain{
  text-align:center;font:700 56px/1 "DIN Alternate","Bahnschrift",Menlo,monospace;
  letter-spacing:.02em;
}
.wb-ck-lcdmain i{font-style:normal;animation:wb-ck-blink 1s steps(1) infinite}
.wb-ck-lcdmain em{
  font-style:normal;font-size:17px;font-weight:600;margin-left:5px;
  vertical-align:top;position:relative;top:5px;color:#6b6154;
}
.wb-ck-lcdfoot{display:flex;margin-top:9px;border-top:1px solid rgba(90,70,40,.14);padding-top:7px}
.wb-ck-cell{flex:1;text-align:center;font-size:12px;line-height:1.35}
.wb-ck-cell+.wb-ck-cell{border-left:1px solid rgba(90,70,40,.14)}
.wb-ck-cell b{display:block;font-size:16px;font-weight:700}
.wb-ck-cell span{font-size:9.5px;color:#8a8071;letter-spacing:.06em}

/* ── 圆形表盘 ── */
.wb-ck.wb-ck-dial{padding:16px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.wb-ck-dial svg{width:158px;height:158px;display:block}
.wb-ck-face{fill:var(--card)}
.wb-ck-ring{fill:none;stroke:var(--line);stroke-width:1.6}
.wb-ck-tick{stroke:var(--txt-3);stroke-width:.8;opacity:.55}
.wb-ck-tick.is-big{stroke:var(--txt);stroke-width:2;opacity:.85;stroke-linecap:round}
/* 三根针粗细依次递减，是「哪根重要」最直接的表达 */
.wb-ck-hh{stroke:var(--txt);stroke-width:4.2;stroke-linecap:round}
.wb-ck-mh{stroke:var(--txt);stroke-width:2.8;stroke-linecap:round}
.wb-ck-sh{stroke:var(--brand);stroke-width:1.2;stroke-linecap:round}
.wb-ck-cap{fill:var(--card);stroke:var(--brand);stroke-width:1.6}
.wb-ck-num{fill:var(--txt-3);font:600 7px/1 -apple-system,sans-serif;text-anchor:middle;dominant-baseline:central}
.wb-ck-dial .wb-ck-time{font:600 15px/1 "DIN Alternate","Bahnschrift",monospace;color:var(--txt)}

/* ---------------- 评论管理三件套 ---------------- */
/*
 * 置顶的那条：一条浅浅的左边线 + 一个角标。
 * **不加底色** —— 评论区一整块变色会盖过内容本身，
 * 而置顶只是"这条排在前面"，不该抢过它说了什么。
 */
.wb-comment.is-top{border-left:2px solid var(--brand);padding-left:12px}
.wb-comment.is-top .wb-comment-name::after{
  content:'置顶';margin-left:6px;padding:0 5px;border-radius:4px;
  background:var(--brand-weak);color:var(--brand);font-size:11px;font-weight:500;
}
/* 不能评论时替代输入框的那一条 */
.wb-comment-off{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:12px 16px 4px;padding:14px;border-radius:10px;
  background:var(--bg);color:var(--txt-3);font-size:13px;
}
.wb-comment-off svg{opacity:.6}
/*
 * 作者自己看到的那一条：不是"你被拦住了"，是"你设了什么" ——
 * 所以用主题色而不是灰底，读起来是提示不是限制。
 */
.wb-comment-off.is-mine{
  background:var(--brand-weak);color:var(--brand);
  justify-content:flex-start;text-align:left;padding:10px 14px;
}
.wb-comment-off.is-mine svg{opacity:1;flex:none}

/* 「谁可以评论」选择框 */
.wb-cmode{width:340px;padding:20px}
.wb-cmode h3{font-size:16px;font-weight:600;text-align:center;margin-bottom:14px}
.wb-cmode-item{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;cursor:pointer}
.wb-cmode-item input{width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.wb-cmode-item b{display:block;font-size:14px;font-weight:500}
.wb-cmode-item em{display:block;margin-top:3px;font-size:12px;color:var(--txt-3);font-style:normal;line-height:1.6}
.wb-cmode-item em i{font-style:normal;color:var(--txt-2)}
.wb-cmode-foot{display:flex;gap:10px;margin-top:16px}
.wb-cmode-foot .wb-btn{flex:1;justify-content:center;height:36px;font-size:14px}

/* ---------------- 移动端下拉刷新 ---------------- */
/*
 * ⚠ **这一行是整个功能的前提。**
 *
 * Chrome 安卓自带一个整页刷新的下拉手势。不禁掉的话，用户拉一下会
 * 两个一起触发：自己写的这套刚开始动，浏览器就把整页白屏重载了 ——
 * 表现是"下拉刷新看起来能用，但每次都会闪一下整页"，
 * 而且在桌面浏览器上完全复现不出来。
 *
 * 只禁纵向：横向留着，不然某些浏览器的侧滑返回会一起没了。
 */
@media (max-width:1024px){
body.wb-app{overscroll-behavior-y:contain}
}

.wb-ptr{
  position:absolute;left:0;right:0;top:0;
  height:46px;margin-top:-46px;          /* 平时藏在视口上面，靠 translate 拉下来 */
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;color:var(--txt-3);pointer-events:none;z-index:5;
}
.wb-ptr-spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--brand);
  /* 平时不转：一个一直在转的圈会让人以为页面卡着 */
  transition:transform .2s;
}
/* 拉过阈值时把圈转半圈，给一个"到了"的反馈 —— 光换文字太弱，
   手指还压在屏幕上时人是看不清字的 */
.wb-ptr.is-ready .wb-ptr-spin{transform:rotate(180deg)}
.wb-ptr.is-busy .wb-ptr-spin{animation:wb-ptr-turn .7s linear infinite;transform:none}
@keyframes wb-ptr-turn{to{transform:rotate(360deg)}}

/* 跟着系统的「减少动效」走：晕动症的人看不了这个转圈 */
@media (prefers-reduced-motion:reduce){
  .wb-ptr.is-busy .wb-ptr-spin{animation:none;border-top-color:var(--brand)}
}

/* 程序署名。字号最小、颜色最淡 —— 它是「这站用什么做的」，
   不是站点信息的一部分，跟版权号并排会显得像在冒充站点自己的东西 */
.wb-foot-by{margin-top:8px;font-size:11px;color:var(--txt-3)}
.wb-foot-by a{color:var(--txt-3)}
.wb-foot-by a:hover{color:var(--brand)}
.wb-m-foot-by{margin-top:6px;font-size:11px;color:var(--txt-3)}
.wb-m-foot-by a{color:var(--txt-3)}

/* ---------------- 移动端全屏发帖页 ---------------- */
/*
 * 版式对标微博和 X：顶栏（返回 / 头像 / 发送）→ 正文撑满 → 工具条沉底。
 *
 * 只在 .is-full 下生效，PC 的发帖框和编辑弹层一行都不受影响 ——
 * 三种模式共用同一份模板，样式上必须严格隔离，否则改一处崩两处。
 */
/*
 * ⚠ 全屏发帖页：**这一页由发帖框自己占满视口，别的一概不出现。**
 *
 * 这几条原来关在窄屏那段媒体查询里（那时它只有移动端能进），而且发帖框
 * 是直接挂在 #wb-page 底下的。自适应之后两件事都变了：
 *
 *   · 页面统一进 .wb-main > .wb-col-* 里，那两层各带内边距 ——
 *     发帖框还是 100dvh 高，于是被顶下去，**底部那条工具条掉出视口**。
 *     站长看到的就是「移动端发帖框底部的工具条没有了」。
 *   · 宽窗口也能进这一页了（书签、别人分享的链接），所以不能再关在窄屏里。
 *
 * 所以这里把外面那几层全部压平：不留内边距、不占高度，纯粹当个通道。
 */
body.wb-app.is-compose{overflow:hidden;padding-bottom:0}
/* 顶栏也不要：全屏发帖页自己有一条（返回 / 头像 / 发送） */
body.wb-app.is-compose .wb-top{display:none}
/*
 * ⚠ 键盘高度要减在**这一层**，不能减在 .wb-composer.is-full 上。
 *
 * 真栓过：之前写在 .wb-composer.is-full{height:calc(100dvh - var(--kb))}，
 * 而后面为了修「切换条把工具栏挤出屏幕」又加了一条
 *   .wb-cf > .wb-composer.is-full{flex:1;height:auto}
 * 它是三个类、权重更高 —— height 被改成 auto，
 * **--kb 从那一刻起彻底失效了**，而两边看着都很合理。
 * 实测：手动把 --kb 设成 300px，页面尺寸纹丝不动。
 *
 * 减在最外层就不会再有这个问题：下面每一层都是 height:100%，
 * 以后再往中间插多少层都跟着缩。
 *
 * 配合的 --kb 由 app.js 写在 documentElement 上 —— CSS 变量只往下继承，
 * 写在发帖框那个子元素上的话，这个祖先根本读不到。
 */
body.wb-app.is-compose #wb-page{
  height:100vh;
  height:calc(100dvh - var(--kb, 0px));
  overflow:hidden;
}
body.wb-app.is-compose .wb-main{padding:0;gap:0;max-width:none;height:100%}
body.wb-app.is-compose .wb-col-mid,
body.wb-app.is-compose .wb-col-bare{padding:0;height:100%;min-width:0}
/*
 * ⚠ 这里用 flex 竖排，不能让 .wb-composer.is-full 自己去撑 100dvh。
 *
 * 真栽过：顶上加了「动态 | 文章」那条切换之后，**底部整条工具条
 * （表情/图片/视频/话题/@）被挤出屏幕**。
 *
 * 原因是 is-full 的高度写死成 calc(100dvh - --kb)，它不知道自己上面
 * 还多了个兄弟 —— 切换条 34px + 一整屏 = 超出一屏 34px，
 * 而超出去的正好是最底下那排按钮。页面看着完全正常，
 * 只是发帖时没有任何工具可用了。
 *
 * 改成父容器占满、子项 flex:1 自己算：以后再往这儿加东西也不会重演。
 */
.wb-cf{
  height:100%;background:var(--card);
  display:flex;flex-direction:column;min-height:0;
}
.wb-cf > .wb-composer.is-full{flex:1;min-height:0;height:auto}
.wb-composer.is-full{
  display:flex;flex-direction:column;
  /* ⚠ 这里**不写 height** —— 高度由父容器给（.wb-cf 是 flex 竖排，
     这里 flex:1），键盘避让则减在最外层 #wb-page 上。
     以前在这里写 calc(100dvh - var(--kb))，被后面权重更高的
     `.wb-cf > .wb-composer.is-full{height:auto}` 默默盖掉，白写了很久。 */
  /* 基础的 .wb-composer 有 padding:12px，选择器权重跟这条一样，
     靠后面覆盖不稳 —— 下面那条用 body.wb-app 提一级，明确压过去 */
  margin:0;padding:0;border:0;border-radius:0;background:var(--card);
}
@media (max-width:1024px){
body.wb-app .wb-composer.is-full{padding:0;margin:0;border-radius:0}
}
.wb-composer.is-full .wb-composer-box{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:transparent;border:0;border-radius:0;padding:14px 16px 0;overflow-y:auto;
}
/* 正文撑满剩余空间 —— 全屏页里一个只有三行高的输入框看着像没加载完 */
.wb-composer.is-full .wb-composer-input{
  flex:1;min-height:120px;font-size:16px;line-height:1.7;
}

/* ---- 顶栏 ---- */
.wb-cf-top{
  flex:none;display:flex;align-items:center;gap:12px;
  height:52px;padding:0 12px;border-bottom:1px solid var(--line-soft);
}
.wb-cf-back{
  width:36px;height:36px;border:0;background:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--txt-2);
}
/* 头像居中 —— 微博就是这么放的：它不是功能，是「你以谁的身份在发」 */
.wb-cf-ava{width:30px;height:30px;border-radius:50%;object-fit:cover;margin:0 auto}
.wb-cf-send{flex:none;height:32px;padding:0 18px;border-radius:16px;font-size:14px}

/* ---- 底部工具条 ---- */
/*
 * ⚠ 这里是原来那个「错位」的根源。
 *
 * 原来七个工具按钮和「版块 / 可见范围 / 发送」挤在同一行，375px 塞不下，
 * 换行之后那一组因为 margin-left:auto 缩进了 40px，发送又掉到第三行。
 *
 * 全屏之后拆成上下两层：**上层是版块和可见范围，下层是工具按钮**。
 * 各占一整行，谁也不挤谁，而且顺序也对 —— 「发给谁看」是发之前要确认的，
 * 「加张图」是正在写的时候用的。
 */
.wb-composer.is-full .wb-composer-bar{
  flex:none;flex-direction:column;align-items:stretch;gap:0;
  padding:0;border-top:1px solid var(--line-soft);background:var(--card);
  /* home 键那条横杠 */
  padding-bottom:env(safe-area-inset-bottom);
}
/* 键盘弹起时去掉那道安全区内边距：home 横杠已经被键盘盖住了，
   再留着就是工具栏和键盘中间凭空多一条缝。kb-open 由 app.js 打 */
.wb-composer.is-full.kb-open .wb-composer-bar{padding-bottom:0}
.wb-composer.is-full .wb-composer-right{
  margin:0;order:-1;justify-content:flex-start;
  padding:10px 14px;border-bottom:1px solid var(--line-soft);
}
/*
 * ⚠ min-width:0 是必须的。
 *
 * flex 子项的最小宽度默认是**内容宽度**（min-width:auto）——「claude code
 * 综合讨论区」这种长名字撑得比容器还宽，两个选择器加起来 440 > 375，
 * 整条工具栏被顶出屏幕。加了它才允许收缩，配合下面的省略号截断。
 */
/*
 * ⚠ 纵向 flex 里也要 min-width:0。
 *
 * bar 是 flex-direction:column + align-items:stretch，按说两个子项就该等于
 * 容器的 375。但 flex 子项的**最小尺寸默认是内容尺寸**，工具条里十个按钮
 * 加起来 454，于是它把自己撑到 454、连带 bar 的另一个子项也跟着 stretch 到 454。
 *
 * 表现是「整条工具栏比屏幕宽，右边几个按钮看不见」，而 body 本身不横滚，
 * 所以也划不过去 —— 那几个功能就等于没了。
 * **光有 min-width:0 还不够。**工具条是 flex:1 1 auto，而 auto 的意思是
 *「基准宽度取内容宽度」—— 454px 成了它的起点，flex-shrink 只从这个起点
 * 往回收，收不到 375 以下。flex-basis:0 把起点归零，它才会跟着容器走，
 * 超出的部分交给它自己的 overflow-x:auto 横滑。
 * ⚠ 而且 **flex-basis 在这里没用** —— bar 是 flex-direction:column，
 * flex-basis 管的是**主轴**也就是高度；横向尺寸归 align-items:stretch 管，
 * 而 stretch 拗不过子项内容的最小宽度。
 * 真正管用的是 max-width:100% —— 明确封住上限，超出交给 overflow-x 横滑。
 */
.wb-composer.is-full .wb-composer-bar > *{min-width:0;max-width:100%}
.wb-composer.is-full .wb-select{min-width:0}
.wb-composer.is-full .wb-select > span,
.wb-composer.is-full .wb-select > b{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.wb-composer.is-full .wb-composer-meta{flex-wrap:wrap;gap:8px;width:100%}
/*
 * ⚠ 工具条可横滑，但**必须给出「还能滑」的提示**。
 *
 * 11 个按钮 × 42px 在 375px 屏上要溢出 123px，
 * 发红包 / 写文章 / 隐藏内容 三个直接在屏外。
 * overflow-x:auto 虽然能滑，但一排图标齐平切断在屏幕边上，
 * 看着就是**显示不全**，没人会想到去滑它 ——
 * 站长报的「工具栏显示不全」就是这个。
 *
 * 用 mask 而不是多套一层做渐隐：不动 DOM，
 * 而且 mask 跟的是滚动容器的可视区，滑动时渐隐会留在右边不动。
 */
.wb-composer.is-full .wb-composer-tools{
  padding:6px 8px;overflow-x:auto;scrollbar-width:none;
}
.wb-composer.is-full .wb-composer-tools.has-more{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
}
.wb-composer.is-full .wb-composer-tools::-webkit-scrollbar{display:none}
/* 工具按钮在全屏里只留图标 —— 七个按钮带文字在 375px 上要横滚，
   而这些图标（相机、表情、话题、@）本来就是通用符号，不需要注解 */
.wb-composer.is-full .wb-ctool span{display:none}
.wb-composer.is-full .wb-ctool{width:42px;height:42px;flex:none}

/* 字数环和提示挂在工具条右边，不再自己占一行 */
.wb-composer.is-full .wb-composer-hint{padding:0 16px 8px}

/* ==================== 落地页 ==================== */
/*
 * SaaS 产品页那一套骨架：**每一块自己铺满整屏**，里面再收进一个固定宽度。
 *
 * 所以 is-bare 这一层必须把宽度和内边距全放开（普通页面靠它居中，
 * 落地页靠里面的 .wb-lp-in 居中）。只留顶部那点 padding 给固定导航让位。
 */
.wb-main.is-bare{
  max-width:none;
  grid-template-columns:minmax(0,1fr);
  padding:calc(var(--top-h) + var(--imp-h)) 0 0;
}
.wb-col-bare{min-width:0}
/*
 * 1160 = 顶栏内容的宽度（.wb-top-inner 是 1200 减两边各 20 内边距），
 * 这样 logo 跟大标题、页脚跟正文的左边缘都是**对齐**的。
 * 差几十像素在别的页面看不出来，在一页只有几大块的落地页上很显眼。
 */
.wb-lp-in{max-width:1160px;margin:0 auto;padding:0 20px}
.wb-top-landing .wb-top-inner{max-width:1200px;gap:20px}

/* ---- 顶部：站名、几条链接、登录注册 ---- */
.wb-lnav{display:flex;align-items:center;gap:22px;margin-left:12px;flex:1 1 auto}
.wb-lnav a{font-size:14px;color:var(--txt-2);transition:.15s}
.wb-lnav a:hover{color:var(--brand)}
.wb-top-landing .wb-top-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* ---- 第一屏 ---- */
.wb-lp-hero{position:relative;overflow:hidden;padding:74px 0 0}
/* 文字整块居中，截图在下面 —— 左右分栏那版把视线拉向两边，主张反而不突出 */
.wb-lp-hero-in{position:relative;z-index:1;text-align:center}

/*
 * 背景：一团主色光晕 + 一张淡网格，**两层都是 CSS 画的**。
 *
 * 不用图片，因为这一页是跟着源码发出去的 —— 多一张背景图就多一个
 * 站长换主题色之后对不上的东西。两层都吃 --brand：
 * 他在后台把主色改成蓝的，这一屏跟着变蓝。
 *
 * color-mix 老浏览器不认，那时整条 background-image 声明作废，
 * 结果是没有光晕也没有网格 —— 干净地退回纯色底，不会露出难看的东西。
 */
.wb-lp-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(58% 46% at 50% 2%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 72%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  /* 网格往四周淡出，不然底边会出现一条突兀的横切线 */
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%);
}
.wb-lp-end .wb-lp-in{position:relative;z-index:1}

.wb-lp-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px 5px 9px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  font-size:12.5px;color:var(--txt-2);box-shadow:var(--shadow);
}
/* 前面那个小圆点用主色 —— 一个字都不用写，就说明「这是个标签，不是句子」 */
.wb-lp-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--brand)}

.wb-lp-hero h1{
  margin-top:20px;font-size:50px;line-height:1.16;font-weight:700;letter-spacing:-1.2px;
}
/* 居中的段落必须收窄：一行太长的话，眼睛从行尾回到下一行行首会找不准 */
.wb-lp-sub{margin:20px auto 0;max-width:30em;font-size:16.5px;line-height:1.85;color:var(--txt-2)}
.wb-lp-cta{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.wb-btn-lg{height:46px;padding:0 28px;border-radius:23px;font-size:15px}
.wb-lp-note{
  display:flex;align-items:center;justify-content:center;gap:5px;margin-top:14px;
  font-size:12.5px;color:var(--txt-3);
}
.wb-lp-note svg{flex:none}

/* flex-wrap 是给自定义数字兜底的：站长能填四个、说明也能写长，
   不许换行的话 390px 上就会顶出横向滚动条 */
.wb-lp-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 56px;margin:34px 0 0}
.wb-lp-stats dt{font-size:27px;font-weight:700;line-height:1.1;letter-spacing:-.5px}
/*
 * ⚠ dl / dd / figure / blockquote 的**浏览器默认外边距要自己清**。
 * 站里的 reset 只写了 `h1,h2,h3,h4,p{margin:0}`，这几个标签不在里面：
 * dd 默认有 margin-inline-start:40px，结果数字和它的说明对不齐，
 * 而看着又不像坏了，只像「设计就是这样」。
 */
.wb-lp-stats dd{margin:5px 0 0;font-size:12.5px;color:var(--txt-2)}

/* ---- 截图：文字下面，可以左右滑 ---- */
/*
 * 用**原生横向滚动 + scroll-snap**，不是 JS 控制的 transform：
 *   · 触屏和触控板天生就能滑，一行代码不用写
 *   · 键盘、读屏、浏览器的「查找」都还能正常用
 *   · JS 没加载出来时它仍然是一条能滑的图带，不是一堆叠在一起的图
 * 两侧箭头和底下的圆点只是锦上添花（app.js 的 initShots）。
 */
.wb-lp-shots{position:relative;margin-top:52px;--slide:min(880px, 84vw)}
.wb-lp-track{
  display:flex;gap:22px;
  overflow-x:auto;overscroll-behavior-x:contain;
  /*
   * ⚠ **不要在这儿写 scroll-behavior:smooth。**
   *
   * 它和 mandatory 吸附凑在一起时，程序发起的滚动会被吸附引擎中途取消，
   * 表现是箭头点了一下没反应（实测过：CSS 里写了 smooth 时
   * scrollTo 到第二张，等一秒回来读还是 0）。
   * 需要动画的地方由 JS 在 scrollTo 里显式要 —— 手指划动本来就有惯性，
   * 不需要 CSS 插一手。
   */
  scroll-snap-type:x mandatory;
  /* 上下留出影子的地方，不留的话 box-shadow 会被滚动容器裁掉 */
  padding:14px 0 26px;
  scrollbar-width:none;
}
.wb-lp-track::-webkit-scrollbar{display:none}
/*
 * 鼠标能按住拖（见 app.js 的 initShots）。
 *
 * cursor 是唯一的提示 —— 不给的话没人会想到去拖。拖动过程中换成
 * grabbing，并且**整条禁掉选中和图片拖拽**：不禁的话拖两下会选中一片，
 * 或者把图片本身拖出去变成一个幽灵缩略图。
 */
.wb-lp-track{cursor:grab}
.wb-lp-track.is-dragging{cursor:grabbing;user-select:none}
.wb-lp-track img{-webkit-user-drag:none;user-select:none}
/*
 * 每一张都比容器窄一点，**故意让下一张露出一个边** ——
 * 不露边的话它看着就是一张静止的图，没人知道还能往右滑。
 * 左右各留一段内边距把第一张推到居中。
 */
/*
 * ⚠ 两侧留白必须**正好等于「把一张推到居中」的距离**，不能随手写个 8%。
 *
 * scroll-snap-align:center 是按「卡片中点对上容器中点」算吸附位的。
 * 留白不够时，最后一张的吸附位会**超出最大滚动距离** —— 而 mandatory
 * 吸附又必须落在某个吸附位上，结果是整条图带一动不动，
 * 箭头点了没反应、手指划了会弹回去。第一版就是这么坏的：
 * 留 8%（122px）而实际需要 (1528-880)/2 = 324px。
 *
 * 所以宽度只写一次，存进 --slide，留白照它算 —— 两个数永远对得上。
 *
 * ⚠ --slide 里**不能用百分比**，只能用 vw 这种不看容器的单位。
 * 用百分比会绕成一个环：flex-basis 的百分比按 track 的**内容盒**算，
 * 而内容盒正好被上面这条 padding 减掉了 —— 于是留白按 880 算、
 * 卡片却只有 739 宽，两边又对不上，最后一张照样滑不到。
 */
.wb-lp-slide{flex:0 0 var(--slide);scroll-snap-align:center}
.wb-lp-shots.is-multi .wb-lp-track{padding-inline:calc((100% - var(--slide)) / 2)}

/* 窗口框（三个圆点 + 地址条）**真截图和 CSS 示意图共用**，换成真图时版式不会跳 */
.wb-lp-win{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.05);
}
.wb-lp-win-bar{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  background:var(--hover);border-bottom:1px solid var(--line);
}
.wb-lp-win-bar i{width:9px;height:9px;border-radius:50%;background:var(--ctrl-line)}
.wb-lp-win-bar span{
  flex:1 1 auto;margin-left:8px;padding:2px 10px;border-radius:9px;
  background:var(--card);border:1px solid var(--line);
  font-size:11px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/*
 * 固定 16:10 裁切。
 *
 * 几张截图的比例多半不一致，不定死的话每滑一张整页高度都要跳一下 ——
 * 那是滑动体验里最难受的一种抖动。后台的说明里写了按 16:10 截。
 */
/*
 * 比例不是 16:10 的图，裁**顶部**那一块。
 *
 * 这一栏放的是界面截图 —— 顶上是导航栏和第一屏，最能认出「这是什么页面」；
 * 裁中间会得到一条不知所云的中段。想让某一部分一定露出来，
 * 自己先按 16:10 截好再传。
 */
.wb-lp-win-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* 左右两个箭头。只有多张时模板才渲染 */
.wb-lp-arrow{
  position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);color:var(--txt-2);
  box-shadow:0 4px 16px rgba(0,0,0,.12);transition:.15s;
}
.wb-lp-arrow:hover{color:var(--brand);border-color:var(--brand)}
.wb-lp-arrow.is-prev{left:16px}
.wb-lp-arrow.is-next{right:16px}
/* 滑到头就把那一侧的箭头收起来 —— 留着一个点了没反应的按钮不如没有 */
.wb-lp-arrow[disabled]{opacity:0;pointer-events:none}

.wb-lp-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
.wb-lp-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ctrl-line);transition:.2s;
}
.wb-lp-dots button.is-on{width:22px;border-radius:4px;background:var(--brand)}

/* 没上传截图时的三栏示意图。纯 CSS，一张图片都没有 */
.wb-lp-mock{
  position:relative;
  display:grid;grid-template-columns:56px minmax(0,1fr) 74px;gap:8px;
  padding:12px;background:var(--bg);aspect-ratio:16/10;overflow:hidden;
}
/*
 * 底边淡出：卡片流正好在框底被切成半张，看着像**没画完**
 * 而不是「截图裁到这儿」。压一层往下渐隐，那道切口就成了
 * 「下面还有，只是没截进来」。
 */
.wb-lp-mock::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(transparent, var(--bg));
}
.wb-lp-mock i,.wb-lp-mock u,.wb-lp-mock b,.wb-lp-mock span{display:block;border-radius:3px}
.wb-lp-mock-l i{height:7px;margin-bottom:9px;background:var(--line)}
.wb-lp-mock-l i:nth-child(1){background:var(--brand);opacity:.55;width:80%}
.wb-lp-mock-l i:nth-child(3){width:70%}
.wb-lp-mock-l i:nth-child(5){width:60%}
.wb-lp-mock-m{display:flex;flex-direction:column;gap:8px}
.wb-lp-mock-card{
  padding:10px;border-radius:6px;background:var(--card);border:1px solid var(--line);
}
.wb-lp-mock-card span{width:26px;height:26px;border-radius:50%;background:var(--line);margin-bottom:8px}
.wb-lp-mock-card i{height:6px;background:var(--line-soft);margin-bottom:5px}
.wb-lp-mock-card i.s{width:62%}
.wb-lp-mock-card b{height:52px;border-radius:5px;margin-top:8px;background:var(--line-soft)}
.wb-lp-mock-r u{height:44px;border-radius:6px;background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.wb-lp-mock-r u.s{height:64px}

/* ---- 亮点 ---- */
.wb-lp-sec{padding:76px 0;border-top:1px solid var(--line)}
/* 一深一浅交替，滚动时每一块的边界都很清楚 */
.wb-lp-sec.is-alt{background:var(--card)}
.wb-lp-hd{text-align:center;margin-bottom:40px}
.wb-lp-hd h2{font-size:30px;font-weight:700;letter-spacing:-.5px}
.wb-lp-hd p{margin-top:12px;font-size:14.5px;color:var(--txt-2)}

/*
 * 亮点固定四列，不用 auto-fit。
 *
 * auto-fit + minmax(300px) 在 1120px 的内容宽里算出来是三列 ——
 * 四条亮点就变成「三个 + 一个孤儿」，最后那条看着像补上去的。
 * 亮点是**定好四条**的东西（见 landingHighlights 的注释），
 * 列数就该跟着条数写死，而不是让浏览器按宽度猜。
 */
.wb-lp-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1024px){.wb-lp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wb-lp-feats{grid-template-columns:minmax(0,1fr)}}
.wb-lp-feat{
  padding:26px 24px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;transition:.18s;
}
.wb-lp-sec.is-alt .wb-lp-feat{background:var(--bg)}
.wb-lp-feat:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 10px 30px -12px rgba(0,0,0,.16)}
.wb-lp-feat-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background:var(--brand-weak);color:var(--brand);margin-bottom:16px;
}
.wb-lp-feat b{display:block;font-size:16px;font-weight:600;margin-bottom:9px}
.wb-lp-feat p{font-size:13.5px;line-height:1.85;color:var(--txt-2)}

/* ---- 全部功能：分组的纯文字清单 ---- */
/*
 * 跟上面的亮点是**两种东西**，样式上也要一眼分得开。
 *
 * 亮点是卡片（有边框、有图标、有留白），负责被看见；
 * 这一份是清单，价值全在密度 —— 买家看完亮点心里那句「那 XX 有没有」，
 * 要能在这儿一扫就找到。所以不给卡片、不给图标、行距压紧，
 * 靠分组标题和一条主色竖线断开。
 *
 * DUX 一百多项分六组、JustNews 七十条，都是纯文字，一张图都没有 ——
 * 给清单配图标反而看不快，眼睛会去逐个认图标而不是扫文字。
 */
/*
 * ⚠ 这里用的是**多栏（columns）**，不是 grid。
 *
 * grid 会把同一行的格子拉成一样高：「内容与发布」15 条、「逛法与发现」6 条，
 * 于是短的那两组下面各空出半屏，第二行的三组被推到很远的地方才开始 ——
 * 看着就是一堆大小不一的窟窿。分组条数天生不齐，这个洞用 grid 补不上。
 *
 * 多栏是**按内容流**排的：一组填满就接着填下一组，栏与栏之间自动配平，
 * 中间不会留空。阅读顺序也对 —— 一栏从上读到底再看下一栏，本来就是读清单的方式。
 *
 * break-inside:avoid 是关键：不加的话一个分组会被拦腰截断，
 * 组名留在上一栏顶上、条目跑到下一栏，比空窟窿还难认。
 */
.wb-lp-list{columns:3;column-gap:34px}
@media (max-width:1024px){.wb-lp-list{columns:2}}
@media (max-width:600px){.wb-lp-list{columns:1}}
.wb-lp-lgrp{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:28px;
}
.wb-lp-lgrp h3{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;margin-bottom:12px;
  padding-left:10px;border-left:3px solid var(--brand);line-height:1.2;
}
/* 条数摆在组名旁边：一组有几项是买家真正在数的东西 */
.wb-lp-lgrp h3 span{
  font-size:12px;font-weight:500;color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}
.wb-lp-lgrp ul{list-style:none;margin:0;padding:0}
.wb-lp-lgrp li{
  position:relative;padding-left:15px;
  font-size:13.5px;line-height:1.95;color:var(--txt-2);
}
/*
 * 前面那个点用 ::before 画，不用 list-style —— 中文条目里有「/」「+」
 * 这类符号，浏览器默认的 disc 跟中文字号对不齐，会高半行。
 */
.wb-lp-lgrp li::before{
  content:"";position:absolute;left:2px;top:.86em;
  width:4px;height:4px;border-radius:50%;background:var(--line);
}

/* ---- 结尾 ---- */
.wb-lp-end{
  position:relative;overflow:hidden;
  padding:84px 0;text-align:center;border-top:1px solid var(--line);
  background:var(--card);
}
.wb-lp-end h2{font-size:30px;font-weight:700;letter-spacing:-.5px}
.wb-lp-end p{margin:14px 0 28px;font-size:15px;color:var(--txt-2)}

.wb-col-bare .wb-foot{margin:0;padding:28px 0 34px;text-align:center;border-top:1px solid var(--line)}

/*
 * 窄屏。
 *
 * 移动端那套模板另说（站长说落地页移动端暂不考虑），
 * 但这一页本身得先能缩下来 —— 它是最可能被从微信、QQ 里点开的一页。
 */
@media (max-width:900px){
  .wb-lp-hero{padding:48px 0 0}
  .wb-lp-hero h1{font-size:32px;letter-spacing:-.5px}
  .wb-lp-sub{font-size:15px}
  .wb-lp-stats{gap:34px}
  .wb-lp-stats dt{font-size:23px}
  .wb-lp-shots{margin-top:36px}
  /* 窄屏只改这一个变量，留白跟着自己算 */
  .wb-lp-shots{--slide:88vw}
  /* 窄屏上箭头会压在图上，滑动本来就更顺手，直接不要 */
  .wb-lp-arrow{display:none}
  .wb-lp-sec,.wb-lp-end{padding:52px 0}
  .wb-lp-hd h2,.wb-lp-end h2{font-size:24px}
  .wb-lnav{display:none}   /* 顶部先保证站名和登录注册放得下 */
}

/* ---- 窄屏：这一页得自己留一条顶栏 ---- */
/*
 * ⚠ 主断点那一段把顶栏整条藏了（body.wb-app .wb-top{display:none}），
 * 因为社区页在窄屏是由 .wb-m-nav 接手的。落地页走的是 is-bare 骨架，
 * 没有那一条 —— 藏掉就是**整页没有顶栏**。
 *
 * 后果不是不好看，是断路。「登录」在这一页上只出现在顶栏里：
 * 第一屏那两个按钮出厂虽然是「立即加入 / 我有账号」，但文案和地址
 * 站长都能改，一改成「购买源码」，站里的老用户在手机上就再也进不来了 ——
 * 一页四千像素高的销售页，从头到尾找不到登录入口。
 *
 * 多写一个 .wb-top-landing 是为了压过上面那条：它在源码里排在这段之后，
 * 同特异性写法会被它吃掉。断点用 1024 而不是这一节惯用的 900，
 * 因为要盖的那条是 1024 —— 写 900 的话 901~1024 之间（平板竖屏）顶栏照样没了。
 */
@media (max-width:1024px){
  body.wb-app .wb-top.wb-top-landing{
    /*
     * 跟着社区那条窄栏走：sticky 占流内空间，正文就不用再留 padding
     * （窄屏的 .wb-main 顶部内边距是 0，留了也没处扣）。
     * top 吃 --imp-h 而不是写死 0：没挂公告时它本来就是 0px，
     * 挂了公告那条横幅是 fixed 的，写 0 会让顶栏钻到横幅底下。
     */
    display:block;position:sticky;top:var(--imp-h);height:46px;
  }
  .wb-top-landing .wb-top-inner{padding:0 12px;gap:10px}
  /* 46px 的条里放不下 logo + 两个按钮 + 几条链接，链接让位（页脚里还有一份） */
  .wb-top-landing .wb-lnav{display:none}
  /*
   * ⚠ 链接一藏，登录/注册就得自己顶到最右去。
   *
   * 宽屏时是 .wb-lnav 的 flex:1 1 auto 把它们撑到右边的；窄屏把链接
   * display:none 之后那股撑力也跟着没了，两个按钮会缩回去贴着站名 ——
   * 看着像一行没排完的东西，而且右半条整片空着。
   */
  .wb-top-landing .wb-top-act{margin-left:auto}
  .wb-top-landing .wb-logo img{height:26px}
  .wb-top-landing .wb-logo-mark{width:28px;height:28px}
  .wb-top-landing .wb-logo-text{font-size:16.5px}
  /* 按钮缩一档：默认那档在 390px 上会把站名挤到只剩两个字 */
  .wb-top-landing .wb-top-act{gap:6px}
  .wb-top-landing .wb-top-act .wb-btn{height:30px;padding:0 14px;font-size:13px;border-radius:15px}
}

/* ==================== 自适应主断点 ==================== */
/*
 * ════════════════════════════════════════════════════════════════
 *  一套 HTML，两种形态
 * ════════════════════════════════════════════════════════════════
 *
 * 原来是服务端按 UA 发两套模板（body.wb-pc / body.wb-m），页面一渲染出来
 * 形态就定死了。死穴是**判断只发生在服务端**：桌面窗口拉窄、平板转屏、
 * 微信里分屏，全都不会变 —— 三栏被硬挤在 400px 里。
 *
 * 现在两种形态的 HTML **同时输出**，由这两段决定谁露面：
 *
 *     ≤ 1024px   窄屏：窄条顶栏 + 底部标签栏 + 悬浮发布键，三栏叠成一列
 *     ≥ 1025px   宽屏：整条顶栏 + 三栏，窄屏那几个构件全部藏起来
 *
 * 1024 这个数是**平板归窄屏**定下来的：iPad 横屏正好 1024，落在窄屏这边，
 * 跟它原来按 UA 走移动版的结果一致。
 *
 * ⚠ 两段是互斥的，改一段就要想另一段 —— 尤其是「隐藏」那几条：
 * 漏一个就会出现两条顶栏叠在一起，或者宽屏底部莫名多一条标签栏。
 */

/* ---------- 窄屏（含平板） ---------- */
@media (max-width:1024px){

  /* 宽屏那条整栏顶栏收起来，窄条顶栏接手 */
  body.wb-app .wb-top{display:none}
  /*
   * ⚠ 但**编辑器那条页眉例外** —— 窄屏也要留着。
   *
   * 「窄条顶栏接手」这句话在写文章页不成立：那一页是 $bare 的，
   * 布局根本不渲染窄条顶栏（layouts/site.php 里 `!$bare` 那个条件）。
   * 不例外的话，手机上这一页**一条页眉都没有** ——
   * 保存状态、返回、篇名全部消失，实测量到高度就是 0。
   *
   * 它本来就是为窄屏也能用而设计的：站名文字、「我的文章」四个字、
   * 分隔线、篇名在 1024 以下都收掉了，只剩图标和头像。
   */
  body.wb-app .wb-top.wb-aednav{display:block}
  /*
   * ⚠ 留出它的高度。
   *
   * .wb-top 是 fixed 的，不占文档流。宽屏那条的高度由 .wb-main 的
   * padding-top 让出来，而窄屏这一段本来假定「顶栏已经藏了」，
   * 所以把那段内边距收成了 0 —— 页眉一露面，正文就整个钻到它底下，
   * 标题输入框的上半截被盖住，点得到但看不全。
   */
  body.wb-app .wb-top.wb-aednav ~ .wb-main{padding-top:var(--top-h)}

  /*
   * 三栏叠成一列，左右两栏**沉到正文下面**而不是隐藏。
   *
   * 隐藏最省事，但那样窄屏就永远看不到侧栏挂件、版块列表和页脚 ——
   * 页脚里还挂着备案号，那是必须露出来的东西。Reddit 就是下沉的做法。
   *
   * 顺序：正文 → 右栏（热搜、推荐这些「还能看点什么」）→ 左栏（版块导航）。
   * 左栏排最后，是因为窄屏顶部的频道条本来就能到版块，它在这儿是兜底不是主路。
   */
  body.wb-app .wb-main{
    display:flex;flex-direction:column;gap:10px;
    /*
     * ⚠ align-items 必须写回 stretch。
     *
     * 宽屏那条是 align-items:start（三栏各自贴顶，不互相拉高）。
     * 叠成一列之后它还在生效，结果每一栏都按内容宽度收缩 ——
     * 表现是左栏只有 317px 宽、右边空一块，看着像没写样式。
     */
    align-items:stretch;
    max-width:none;
    /*
     * 顶部不留内边距：窄屏顶栏是 sticky、占流内空间，
     * 而顶部工具条的高度 body.has-imp 已经让过位了。
     * 底部要留出标签栏和发布键的位置。
     */
    padding:0 0 calc(96px + env(safe-area-inset-bottom));
  }
  /*
   * ⚠ 这一条要把全屏发帖页**排除在外**。
   *
   * 它和上面那条 body.wb-app.is-compose .wb-main{padding:0} 权重一样高（都是三个类），
   * 而它排在后面 —— 于是把那条盖掉，发帖页底部多出 32px。
   * 表现就是站长截图里那样：**工具条那一排图标被切掉一半**。
   *
   * 发帖页自己就是满屏布局，底下没有标签栏也没有发布键，
   * 本来就不需要这个避让。
   */
  body.wb-app.no-tabbar:not(.is-compose) .wb-main{padding-bottom:32px}

  /*
   * ---- 一对通用工具类：.wb-wide-only / .wb-narrow-only ----
   *
   * 有些块**两种形态各有一份**，谁也替代不了谁：首页宽屏是内联发布框、
   * 窄屏是悬浮键进全屏页；广告位和挂件区后台本来就是分宽窄两套配的。
   * 这种情况两份都输出，各自只在对应宽度露面（另一半在宽屏段里藏）。
   *
   * ⚠ 用之前先想清楚是不是真的「两份都要」。能靠同一段 HTML 换样式解决的
   * 就不该用它 —— 每用一次，页面里就多一份用不上的 DOM。
   */
  .wb-wide-only{display:none}

  body.wb-app .wb-col-mid  {order:1}

  /*
   * 中栏接管原来 .wb-m-page 那层壳的样式。
   *
   * 移动模板里，每个页面都把内容包在一个 <div class="wb-m-page"> 里，
   * 由它负责「卡片满宽、去圆角、上下留一点」。一套模板之后那层壳没有了 ——
   * 窄屏的中栏本身就是它，样式接过来即可。
   *
   * .wb-m-page 那几条已经跟着 mobile/ 目录一起删了，这儿是它唯一的去处。
   */
  body.wb-app .wb-col-mid{padding:8px 0 16px}
  body.wb-app .wb-col-mid .wb-card{margin-bottom:8px;border-radius:0}
  body.wb-app .wb-col-mid .wb-feedtabs{overflow-x:auto;scrollbar-width:none}
  body.wb-app .wb-col-mid .wb-feedtabs::-webkit-scrollbar{display:none}
  body.wb-app .wb-col-mid .wb-feedtabs a{white-space:nowrap}
  body.wb-app .wb-col-right{order:2}
  body.wb-app .wb-col-left {order:3}

  /*
   * 左右栏在宽屏是 sticky + 限高滚动的，叠成一列之后这两条都得撤掉 ——
   * 不撤的话它们会各自粘在视口上，内部还各带一条滚动条。
   */
  body.wb-app .wb-col-left,
  body.wb-app .wb-col-right{
    position:static;max-height:none;overflow:visible;width:auto;padding-bottom:0;
  }
}

/* ---------- 宽屏 ---------- */
@media (min-width:1025px){
  /*
   * 窄屏专属构件在宽屏一律不出现。
   *
   * ⚠ 这是「两套 HTML 同时输出」的代价，也是最容易漏的地方：
   * 新加一个窄屏构件却忘了写进这里，宽屏就会莫名多出一条东西，
   * 而且多半在页面底部 —— 不滚到底看不见，最难发现。
   */
  .wb-m-nav,
  .wb-m-tabbar,
  .wb-m-fab,
  /* 消息页的四宫格、设置页的横向标签条：宽屏时左栏就有，这儿再来一排是重复 */
  .wb-m-msgnav,
  .wb-m-settabs,
  /* 首页的搜索顶栏 + 频道条：宽屏有整条导航栏和筛选条，这套是窄屏专用 */
  .wb-m-top,
  .wb-narrow-only{display:none}
}

/* ---------- 帖子卡片：窄屏形态 ---------- */
/*
 * 卡片原来有两份模板（partials/post_card.php 和 partials/mobile/post_card.php），
 * View::partial() 按 UA 挑一份。合并成一份之后，两版的差别落到这一段里。
 *
 * ⚠ 合并时**以宽屏那份为准**，因为它是功能超集：可见范围标记、阅读数、
 * 复制链接、置顶、评论设置、转发块里原帖的三个计数 —— 这些窄屏那份都没有，
 * 手机上够不着。反过来窄屏独有的只有一个 data-tap（整卡可点），
 * 已经搬进合并后的模板。
 *
 * 下面这些数值是从原来那份移动卡片一条条搬过来的，不是重新拍的。
 */
@media (max-width:1024px){

  /* 窄屏是满宽直角、卡片之间靠 8px 间隔分开，不是圆角浮块 */
  body.wb-app .wb-post{padding:12px 12px 0}

  body.wb-app .wb-post-hd{align-items:center;gap:9px}
  body.wb-app .wb-post-hd .wb-avatar img{width:38px;height:38px}
  body.wb-app .wb-post-meta{flex:1;min-width:0}
  body.wb-app .wb-post-name{font-size:14.5px;font-weight:500;gap:4px}
  body.wb-app .wb-post-sub{font-size:11.5px;margin-top:1px}

  body.wb-app .wb-post-text{font-size:15px;line-height:1.66;margin-top:9px}

  /*
   * 图片在窄屏铺满。
   *
   * ⚠ 单图原来在这儿留 70%，理由是「竖图铺满整屏会把正文顶出视口」——
   * 那是**限宽**的写法。宽屏那边 2026-09-02 已经改成对标 X 的
   * 「满宽 + 限高 510」，限高本来就把「占满整屏」挡住了，
   * 再限宽只会让手机上的图比桌面还小一圈 —— 而手机才是最看不清的那一端。
   *
   * 这里只把高上限按视口收一档：510 在 780 高的手机上占 65%，偏满；
   * 56vh 留出下面小半屏，人还能看见「这是一条信息流」。
   */
  body.wb-app .wb-post .wb-images{margin-top:9px;max-width:100%}
  body.wb-app .wb-post .wb-images.is-single .wb-image,
  body.wb-app .wb-post .wb-images.is-single .wb-image img{max-height:56vh}
  /* 长图那一档也跟着收，比例不变（3:4） */
  body.wb-app .wb-post .wb-images.is-single .wb-image.is-tall{
    height:56vh;width:42vh;max-height:none;
  }
  body.wb-app .wb-post .wb-video{max-width:100%;border-radius:var(--radius)}
  body.wb-app .wb-post .wb-quote{margin-top:9px}

  /* 底部那条操作栏 */
  body.wb-app .wb-post-act{
    margin-top:10px;border-top:1px solid var(--line-soft);
    height:42px;color:var(--txt-2);font-size:13px;
  }
  /*
   * align-self:stretch 是**可点区域**的关键。
   *
   * 这一条 42px 高，但 align-items 是 center —— 交叉轴居中而不是拉伸，
   * 于是每个按钮只有**文字那么高（21px）**。看上去是一条 42px 的操作栏，
   * 实际能点中的只有中间那一半，上下各 10px 是死区。
   *
   * 转发 / 评论 / 赞是全站被点得最多的三个按钮，而这是手机。
   * 拉满之后视觉一点没变（按钮自己还是居中），变的只有手指能不能点中。
   */
  body.wb-app .wb-post-act > .wb-act{
    flex:1;align-self:stretch;
    display:flex;align-items:center;justify-content:center;gap:5px;
  }

  /*
   * 头部右上角那组（阅读数 + 更多菜单）。
   *
   * 窄屏时阅读数收起来 —— 那一行本来就挤（昵称 + 等级 + 会员 + 置顶角标），
   * 再塞一个方块，昵称会被压到只剩两三个字。它在详情页和宽屏都还在。
   */
  body.wb-app .wb-post-views{display:none}
  body.wb-app .wb-post-tool .wb-icon-btn{color:var(--txt-3)}
}

/* ---------- 登录方式切换（密码 / 邮箱验证码）---------- */
/*
 * 两个按钮的分段控件。不用下拉是因为只有两项 ——
 * 下拉要点两下才知道有什么，而这里的第二项本身就是个卖点，
 * 应该一眼看见。
 */
.wb-auth-tabs{
  display:flex;gap:4px;margin:0 0 18px;padding:3px;
  background:var(--bg);border-radius:9px;
}
.wb-auth-tabs button{
  flex:1;padding:8px 6px;border:0;border-radius:7px;cursor:pointer;
  background:none;color:var(--txt-3);font-size:13.5px;line-height:1.4;
  transition:background .15s,color .15s;
}
.wb-auth-tabs button.is-on{background:var(--card);color:var(--txt);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.wb-auth-tabs button:not(.is-on):hover{color:var(--txt-2)}
/* 登录表单里的一句补充说明（比如「没注册过会自动建号」） */
.wb-auth-note{margin:-6px 0 14px;font-size:12.5px;line-height:1.6;color:var(--txt-3)}

/* ---------- 就地快速回复（评论表单被搬到某条评论下面时）---------- */
/*
 * ⚠ 搬过去之后要**看得出它属于这一楼**，不能跟原来长得一样。
 *
 * 原样照搬的话，页面上会出现两个视觉权重相同的评论框（一个在顶部、
 * 一个在评论中间），而用户分不清自己写的字会发到哪儿去。
 * 缩进 + 浅底 + 去掉分隔线，一眼就看出是这一楼里的东西。
 */
.wb-comment-form.is-reply{
  margin:8px 0 4px;padding:10px 12px;
  border-bottom:0;border-radius:var(--radius);
  background:var(--bg);
}
/* 头像小一号：它是配角，主角是上面那条被回复的评论 */
.wb-comment-form.is-reply img{width:28px;height:28px}
.wb-comment-form.is-reply textarea{min-height:38px;font-size:14px}
/*
 * ⚠ 取消键要 margin-left:auto，不能只给 margin-right。
 *
 * 底部那一行是 justify-content:space-between，而现在有四个子项
 *（工具图标组 / 字数 / 取消回复 / 评论）—— space-between 把它们均分，
 * 于是「取消回复」**被甩到了正中间**，孤零零地浮在那儿
 *（实测：x=484，而「评论」在 804）。
 *
 * auto 边距会先把剩余空间吃掉，space-between 就不起作用了 ——
 * 两个按钮因此贴在一起靠右，跟普通表单的习惯一致。
 */
/*
 * 现在靠右是 .wb-cact 的事（margin-left:auto），这里只剩一件：把 gap 归零。
 *
 * ⚠ .wb-btn 是 inline-flex 且 gap:5px —— 那个 gap 是给「图标 + 文字」
 * 这种按钮留的。而这个按钮的内容是「取消」加一个 <span>回复</span>
 *（窄屏要单独藏掉「回复」两字，所以必须包一层），
 * 于是裸文本和 span 成了**两个 flex 项**，中间被塞进 5px ——
 * 显示出来就是「取消 回复」，看着像两个词。
 */
.wb-reply-cancel{margin-right:0;column-gap:0}

/*
 * ⚠ 就地回复时底部行要允许换行。
 *
 * 回复框比顶部那个窄（它在评论里，左边还要缩进），
 * 而它比普通状态多一个「取消回复」。实测 375px 屏上：
 * 工具组 146 + 取消 86 + 评论 60 = 292，而表单只有 297 ——
 * 差一点就放不下，而 nowrap 下的后果是**「评论」按钮被挤出表单外**。
 * 换行至少是排得下的，而溢出是直接点不到。
 */
.wb-comment-form.is-reply .act{flex-wrap:wrap;row-gap:8px}

/*
 * ⚠ 窄屏下把「取消回复」缩成「取消」，并收紧间距。
 *
 * 375px 屏上底部只有 235px 可用，而三组加间隙要 275px ——
 * 不收的话「评论」会被挤到第二行靠左站着，看着像排版坏了。
 *
 * flex-wrap 留着当兵底：字体再大一级、或者以后又加了按钮时，
 * 换行总比溢出到框外强 —— 溢出是直接点不到。
 */
@media (max-width:768px){
  .wb-comment-form.is-reply .wb-cancel-word{display:none}
  .wb-comment-form.is-reply .act{column-gap:6px}
  /*
   * ⚠ 实测（375px 屏，2026-09-02）：
   *   详情页的回复框  可用 235 / 需要 229 —— 只剩 6px
   *   列表里就地展开  可用 211 / 需要 229 —— **不够，换行**
   *
   * 上一版只把「取消回复」缩成「取消」，省出 40px 刚好够详情页用；
   * 就地展开那块比详情页又窄 24px，于是原样复发。
   * 6px 的余量不叫修好了，叫碰巧 —— 换个字体、系统字号大一档就又破。
   *
   * 所以这一版一起收三处：表单左右内边距、工具按钮、两个按钮的内边距，
   * 把需要的宽度从 229 压到 190 上下 —— 二十多像素的余量才经得起晃。
   * 就算真放不下，.wb-cact 那一簇是整体换行且靠右的（见上面），
   * 是个正常的两行布局，不是断掉的一行半。
   */
  .wb-comment-form.is-reply{padding-left:8px;padding-right:8px}
  .wb-comment-form.is-reply .wb-comment-tools{gap:0}
  .wb-comment-form.is-reply .wb-comment-tools .wb-ctool{padding-left:5px;padding-right:5px}
  .wb-comment-form.is-reply .wb-cact{gap:6px}
  .wb-comment-form.is-reply .wb-btn{padding-left:12px;padding-right:12px}
}

/* 落位点平时不占任何高度 —— 空的时候连 margin 都不该有 */
.wb-reply-slot:empty{display:none}


/* ==========================================================================
   99. 中国站长 · 蓝图皮肤（2026-09-03 按交付清单实装，追加层，升级程序时需保留）
   原则：全站唯一彩色=钢蓝色阶；方角；发丝线；卡片无阴影；主按钮是唯一实心蓝块
   accent 100–900: #eef6ff #d6ebff #b5d9fd #94bce3 #749dc4 #597ea3 #416180 #2c455d #1d2d3d
   ========================================================================== */

/* ---- 标题与数字字体 ---- */
.wb-hd,.wb-btn,.wb-card-hd h2,.wb-card-hd h3,.wb-feedtabs a{
  font-family:"Barlow Condensed","PingFang SC","Microsoft YaHei",sans-serif;font-weight:600;
}
.wb-post-sub,.wb-post-views,.wb-rank-hot,.wb-side-sub em,time{
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* ---- 蓝图四角定位标（背景渐变画角，不改模板 HTML） ---- */
.wb-card,.wb-feed{position:relative}
.wb-card::after,.wb-feed::after{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  --ck:rgba(29,31,32,.55);
  background-image:
    linear-gradient(var(--ck),var(--ck)),linear-gradient(var(--ck),var(--ck)),
    linear-gradient(var(--ck),var(--ck)),linear-gradient(var(--ck),var(--ck)),
    linear-gradient(var(--ck),var(--ck)),linear-gradient(var(--ck),var(--ck)),
    linear-gradient(var(--ck),var(--ck)),linear-gradient(var(--ck),var(--ck));
  background-size:1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px;
  background-position:
    left 5px top 0,left 0 top 5px,
    right 5px top 0,right 0 top 5px,
    left 5px bottom 0,left 0 bottom 5px,
    right 5px bottom 0,right 0 bottom 5px;
  background-repeat:no-repeat;
}
[data-theme="dark"] .wb-card::after,[data-theme="dark"] .wb-feed::after{--ck:rgba(230,230,232,.4)}

/* ---- 卡片：发丝框、方角、无阴影 ---- */
.wb-card{border:1px solid var(--line);border-radius:0;box-shadow:none}

/* ---- 帖子流：整条流一个框，单条之间只留发丝分隔 ---- */
.wb-feed{background:var(--card);border:1px solid var(--line)}
.wb-feed .wb-post{border-radius:0;box-shadow:none;margin-bottom:0;border-bottom:1px solid var(--line-soft)}
.wb-feed .wb-post:last-child{border-bottom:0}

/* ---- 顶栏 ---- */
:root{--top-h:56px}
.wb-top{box-shadow:none;border-bottom:1px solid var(--line)}
.wb-nav-item.is-active{
  color:var(--brand);background:none;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--brand);
}
.wb-search{border-radius:0;background:#e9e9ea;border:1px solid var(--line)}
.wb-search:focus-within{background:var(--card);border-color:var(--brand)}
[data-theme="dark"] .wb-search{background:var(--bg)}

/* ---- 按钮 ---- */
.wb-btn{border-radius:0}
.wb-btn-primary:hover{filter:none;background:#597ea3}
.wb-btn-primary:active{background:#416180}
.wb-btn-ghost{border-color:var(--ctrl-line)}

/* ---- 头像与圆形元素全部方角 ---- */
.wb-avatar img,.wb-top-me,.wb-logo-mark{border-radius:0}
.wb-notice .wb-avatar img{border-radius:0}

/* ---- 标签 ---- */
.wb-post-board{border-radius:0;background:#eef6ff;color:#2c455d}
.wb-post-board:hover{background:var(--brand);color:#fff}
.wb-lv{border-radius:0}
.wb-vip{
  border-radius:0;background:#1d2d3d;color:#b5d9fd;letter-spacing:.1em;
  font-family:"Barlow Condensed","PingFang SC",sans-serif;
}
.wb-topic-cloud a{border-radius:0}

/* ---- 版块页头：深钢蓝底 ---- */
.wb-card.wb-board-hd{background:#1d2d3d;border-color:#1d2d3d;color:#f2f2f3}
.wb-board-hd h1{color:#f2f2f3}
.wb-board-hd p{color:#b5d9fd}
.wb-board-hd .wb-board-count{color:#94bce3}
.wb-card.wb-board-hd::after{--ck:rgba(242,242,243,.6)}

/* ---- 下拉菜单：方角但保留阴影（浮层需要分离感） ---- */
.wb-dropdown{border-radius:0;box-shadow:0 3px 10px rgba(43,43,45,.16)}

/* ---- 移动端 ---- */
.wb-m-tabbar{border-top:1px solid var(--line)}
.wb-m-fab{border-radius:0;width:52px;height:52px}

/* ---- 登录/注册：左品牌板 + 右表单 分栏 ---- */
.wb-auth-split{display:flex;align-items:stretch;margin-top:40px;padding-top:0;border:1px solid var(--line);background:var(--card);position:relative}
.wb-auth-brand{
  flex:0 0 42%;min-height:540px;padding:44px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  background-color:#1d2d3d;color:#f2f2f3;
  background-image:
    repeating-linear-gradient(0deg,rgba(148,188,227,.08) 0,rgba(148,188,227,.08) 1px,transparent 1px,transparent 40px),
    repeating-linear-gradient(90deg,rgba(148,188,227,.08) 0,rgba(148,188,227,.08) 1px,transparent 1px,transparent 40px);
}
.wb-auth-brand img{height:34px;width:auto}
.wb-auth-brand-ft p{margin:0}
.wb-auth-slogan{color:#b5d9fd;font-size:15px}
.wb-auth-en{color:#94bce3;font-size:12px;letter-spacing:.2em;margin-top:4px;
  font-family:"Barlow Condensed","PingFang SC",sans-serif}
.wb-auth-main{flex:1;display:flex;align-items:center;justify-content:center;background:#f2f2f3;padding:40px 24px}
[data-theme="dark"] .wb-auth-main{background:var(--bg)}
.wb-auth-main .wb-auth{box-shadow:none;background:none}
@media (max-width:1024px){
  .wb-auth-brand{display:none}
  .wb-auth-split{border:0;background:none;margin-top:0}
  .wb-auth-split::after{content:none}
}

/* ---- 双色调图片工具类（封面/运营图用，不自动作用于用户上传内容） ---- */
.duotone{position:relative;overflow:hidden;border:1px solid var(--line)}
.duotone img{filter:grayscale(1);display:block}
.duotone::after{content:"";position:absolute;inset:0;background:#5980a6;mix-blend-mode:color;pointer-events:none}