/* ==========================================================================
   新版外壳：左侧图标 dock、顶栏搜索、⌘K 面板、移动端上下导航、更多探索面板
   依赖 obsidian.css 的 token 与 .ob-* 基础组件。
   ========================================================================== */

/* ---------- 布局骨架 ----------
   空间口径（2026-10-13 定）：**不设宽度上限**——缩放或拉宽窗口时两侧间隙保持不变，
   多出来的宽度全部交给正文去填（正文列是 grid 的 minmax(0,1fr)，自己会吸收）。
   左侧间隙 = .ob-main 的左内边距（--ob-margin）；右侧原本也有同样一份视口留白，
   现在取消了：那份宽度并进右栏（--ob-rail-w 已含它），右栏贴到视口右缘，
   所以整页是 [侧栏][32][正文][32][右栏，右缘贴视口] —— 右侧不再有空白带。 */
.ob-main {
  min-height: calc(100vh - 60px);
  padding: 20px var(--ob-margin) 40px;
}
/* 有右栏的版式（首页/讨论室/两栏页）把右侧页面留白收到 3px：原来的 32px 里，
   29px 并进了右栏（--ob-rail-w 272 = 240 + 32），只留 3px 当作右栏与视口边缘之间的气口，
   否则卡片右缘会和窗口边缘贴死。
   用 :has 限定，单列页面（通知/搜索/发帖/公约…）保留原来的 32px 右侧留白，否则正文会顶到视口右缘。 */
.ob-main:has(.ob-page-rail),
.ob-main:has(.page-layout),
.ob-main:has(.ob-page-room) { padding-right: 3px; }
/* 页面级容器不再限宽：整块宽度由 .ob-main 的 padding 决定（限宽会让超宽屏下间隙变大，与上面的口径相反） */
.ob-page { margin: 0 auto; }
/* PC：内容 + 右栏 */
.ob-page-rail { display: grid; grid-template-columns: minmax(0, 1fr) var(--ob-rail-w); gap: var(--ob-gutter); align-items: start; }
/* 讨论室：消息流 + 右栏三卡（右栏宽度与间隙同首页，保持一致） */
.ob-page-room { display: grid; grid-template-columns: minmax(0, 1fr) var(--ob-rail-w); gap: var(--ob-gutter); align-items: start; }

/* 右栏：首页与讨论室共用，桌面端跟随滚动 */
.ob-rail { display: flex; flex-direction: column; gap: 14px; }

.ob-foot { padding: 26px var(--ob-margin) 34px; border-top: 1px solid var(--ob-line); }
.ob-foot-inner { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ob-foot-links { display: flex; gap: 16px; font-size: 12px; color: var(--ob-text-3); }
.ob-foot-links a:hover { color: var(--ob-text-2); }
/* 页脚也带一枚蛋标：与顶栏、dock 同一个小标志，页面上下两头收得住 */
.ob-foot-brand { display: inline-flex; align-items: center; gap: 7px; }
.ob-foot-brand svg { flex: none; opacity: .75; }

/* ---------- 左侧导航栏 ----------
   对齐设计样例的菜单栏：整高竖栏（不是悬浮胶囊）= 品牌头（含收展钮）+ 发起讨论 +
   导航清单 + 底部工具与用户条。默认展开 240px、可收起成 72px 图标栏，
   状态挂在 <html class="ob-side-min">（见 shell_head.ejs 的内联脚本与 shell.js）。
   正文让位靠 body 的 padding-left（--ob-side-cur）：它与这里的 width 读同一个变量，
   同一组时长与曲线（--ob-side-dur / --ob-side-ease），收起/展开时整块像一体收合。

   收展要顺滑，靠三件事一起动，缺一件就会在某一帧硬跳：
   ① 宽度与正文让位（下面 .ob-side 与 obsidian.css 的 .ob-body）；
   ② 「会消失的东西」一律不切 display：display 是离散属性，切换那一帧内容会整块跳出。
      标签/品牌/用户条文字改成 max-width 收放 + 淡出 + 轻微左移，跟着宽度一起收；
   ③ 图标位置也参与过渡：条目与用户条的 padding、头部内边距、各处 gap 都写进 transition，
      图标是从贴左「滑」到居中，而不是在某个宽度阈值上瞬移。
   所有的图标—文字间距都用父级 gap（gap 可过渡），别改成标签自己的 padding——
   max-width: 0 收不掉 padding，收起来时会把图标顶偏。 */
.ob-side {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: var(--ob-side-cur);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ob-surface-1);
  border-right: 1px solid var(--ob-line);
  transition: width var(--ob-side-dur) var(--ob-side-ease);
  user-select: none;
}
/* 标签：收放靠 max-width，不切 display。
   展开时故意晚 50ms 起步（宽度先走一步），收起时立刻跟上，不然会拖在宽度后面。 */
.ob-side-label {
  min-width: 0; max-width: 220px; overflow: hidden; white-space: nowrap;
  opacity: 1; transform: translateX(0);
  transition: max-width var(--ob-side-dur) var(--ob-side-ease),
              opacity .24s ease,
              transform var(--ob-side-dur) var(--ob-side-ease);
  transition-delay: 50ms;
}
html.ob-side-min .ob-side-label {
  max-width: 0; opacity: 0; transform: translateX(-8px);
  transition-delay: 0s;
}

/* 头部：品牌（回首页）+ 收展钮。收起时头部内边距一起过渡，
   收展钮从贴右滑到正中（19 = (72 - 34) / 2），不是瞬间换位 */
.ob-side-head {
  flex: none; display: flex; align-items: center; overflow: hidden;
  /* 高度与顶栏同源（--ob-top-h）：侧栏头是固定的、顶栏是 sticky 的，
     两者等高 + 同一条下边框，拼起来才是贯穿整宽的「一条」顶栏 */
  height: var(--ob-top-h); padding: 0 12px; border-bottom: 1px solid var(--ob-line);
  transition: padding var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-head { padding: 0 19px; }
/* 品牌头：蛋标 + 站名，点了直接回首页（href="/"）。
   按用户要求不做任何点击/悬停效果：没有悬停底色、没有描边、按下也不缩放——
   视觉上就是站名本身，只是它正好可以点。 */
.ob-side-brand {
  flex: 1; min-width: 0; max-width: 210px;
  display: flex; align-items: center; gap: 10px; overflow: hidden;
  height: 38px; padding: 0 8px; opacity: 1;
  transition: max-width var(--ob-side-dur) var(--ob-side-ease),
              opacity .24s ease,
              padding var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-brand { max-width: 0; opacity: 0; padding: 0; }
/* 蛋标：与页脚、移动端抽屉尾部同一枚；亮色主题在 obsidian-light.css 里染成蛋黄淡底 */
.ob-side-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .30);
}
/* 品牌字标不换行：动画中容器还窄着时，允许换行会把「鸡蛋社区」挤成竖排 */
.ob-side-brand-txt { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ob-side-brand-txt b { font-size: 14px; font-weight: 700; color: var(--ob-text); letter-spacing: .01em; line-height: 1.3; white-space: nowrap; }
.ob-side-brand-txt em { font-style: normal; font-family: var(--ob-mono); font-size: 9px; letter-spacing: .14em; color: var(--ob-text-3); white-space: nowrap; }

/* 收展钮：两枚图标重叠交叉淡入淡出 + 轻微旋转，而不是在切换那一刻直接换图 */
.ob-side-toggle {
  position: relative; flex: none; margin-left: auto;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--ob-radius-md);
  background: transparent; color: var(--ob-text-3); cursor: pointer;
  transition: background-color .18s, color .18s, transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.ob-side-toggle:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ob-side-toggle:active { transform: scale(.92); }
.ob-side-toggle > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .22s ease, transform .34s var(--ob-side-ease);
}
.ob-side-toggle-open { opacity: 1; transform: rotate(0deg) scale(1); }
html.ob-side-min .ob-side-toggle-open { opacity: 0; transform: rotate(-45deg) scale(.78); }
.ob-side-toggle-min { opacity: 0; transform: rotate(45deg) scale(.78); }
html.ob-side-min .ob-side-toggle-min { opacity: 1; transform: rotate(0deg) scale(1); }

/* 发起讨论：侧栏里唯一的实心按钮 */
.ob-side-cta {
  flex: none; padding: 12px; overflow: hidden;
  transition: padding var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-cta { padding: 12px 18px; }
.ob-side-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: var(--ob-radius-md); overflow: hidden;
  background: var(--ob-text); color: var(--ob-surface-0);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(255, 255, 255, .18);
  transition: background-color .18s, transform .18s cubic-bezier(.34, 1.4, .64, 1),
              gap var(--ob-side-dur) var(--ob-side-ease);
}
.ob-side-new:hover { background: #fff; color: var(--ob-surface-0); }
.ob-side-new:active { transform: scale(.97); }
html.ob-side-min .ob-side-new { gap: 0; }

/* 导航清单：条目高 38、图标固定在 20px 槽位。
   收起时 padding 加到 16（52 - 20 = 32 两等分）把图标推到正中，图标就是这么「滑」过去的；
   overflow-x 必须显式 hidden：只写 overflow-y:auto 时另一轴会按规范变成 auto，
   动画中内容比容器宽就冒出一条横向滚动条。 */
.ob-side-nav {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 2px;
  /* 导航区不显示滚动条（条目多于一屏时仍然能滚，滚轮/触控板/键盘都照旧）：
     侧栏是应用式导航，一条常驻的滚动条压在窄栏里很扎眼；
     scrollbar-width / -ms-overflow-style 给 Firefox 与旧 Edge，下面那条给 WebKit。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ob-side-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ob-side-item {
  display: flex; align-items: center; gap: 11px; flex: none;
  height: 38px; padding: 0 10px; border-radius: var(--ob-radius-md); overflow: hidden;
  border: 1px solid transparent; color: var(--ob-text-3);
  font-size: 13.5px; font-weight: 500;
  transition: background-color .18s, color .18s, border-color .18s,
              gap var(--ob-side-dur) var(--ob-side-ease),
              padding var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-item { gap: 0; padding: 0 16px; }
.ob-side-item:hover { background: rgba(255, 255, 255, .07); color: var(--ob-text); }
.ob-side-item.is-active {
  background: rgba(255, 255, 255, .13); color: var(--ob-text);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ob-side-item.is-disabled { color: var(--ob-text-3); cursor: not-allowed; }
.ob-side-item.is-disabled:hover { background: transparent; }
.ob-side-ic { flex: none; width: 20px; display: flex; align-items: center; justify-content: center; position: relative; }
.ob-side-tail { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

/* 分隔线与分组标题：收起时一起收掉（标题还得收高度，否则会在导航里留一条空行） */
.ob-side-sep {
  flex: none; height: 1px; margin: 8px 6px; background: rgba(255, 255, 255, .10);
  transition: margin var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-sep { margin: 6px 12px; }
.ob-side-group {
  flex: none; max-height: 24px; overflow: hidden; padding: 4px 10px 2px;
  font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ob-text-3);
  transition: max-height var(--ob-side-dur) var(--ob-side-ease),
              padding var(--ob-side-dur) var(--ob-side-ease),
              opacity .24s ease;
}
html.ob-side-min .ob-side-group { max-height: 0; padding-top: 0; padding-bottom: 0; }

/* 未读：展开时是右端红底角标（在 .ob-side-tail 里，跟着标签一起淡出），
   收起时是图标右上角一枚红点——红点是弹出式的，不用 display 硬切 */
.ob-side-badge {
  font-style: normal; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9999px;
  background: var(--ob-err); color: #fff; font-family: var(--ob-mono); font-size: 10px;
  line-height: 17px; text-align: center;
}
.ob-side-ping {
  position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 9999px;
  background: var(--ob-err); opacity: 0; transform: scale(.5);
  transition: opacity .22s ease, transform .32s cubic-bezier(.34, 1.4, .64, 1);
}
html.ob-side-min .ob-side-ping { opacity: 1; transform: scale(1); }

/* 右端标识：READY（绿点带光晕）/ 筹备中（灰色等宽小字，设计稿里 v2.1 那种写法） */
.ob-side-ready {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ob-mono); font-size: 10px; letter-spacing: .06em; color: var(--ob-live);
}
.ob-side-ready i {
  width: 6px; height: 6px; border-radius: 9999px; background: var(--ob-live);
  box-shadow: 0 0 6px var(--ob-live-line);
}
.ob-side-note { font-style: normal; font-family: var(--ob-mono); font-size: 10px; color: var(--ob-text-3); }

/* 底部：主题 / 退出两个工具钮 + 当前用户条（对齐设计样例的底部用户区）。
   收起时两个钮不改成上下排（flex-direction 是离散属性，改了就硬跳），
   只把 gap 收到 4，两个圆钮并排缩到 24px 见方。 */
.ob-side-foot {
  flex: none; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  padding: 10px; border-top: 1px solid var(--ob-line);
}
.ob-side-tools { display: flex; gap: 8px; transition: gap var(--ob-side-dur) var(--ob-side-ease); }
html.ob-side-min .ob-side-tools { gap: 4px; }
.ob-side-logout { display: flex; flex: 1; min-width: 0; }
.ob-side-tool {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0; overflow: hidden;
  border: 1px solid var(--ob-line); border-radius: var(--ob-radius-md);
  background: transparent; color: var(--ob-text-3); font-size: 12.5px; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s,
              gap var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-tool { gap: 0; }
.ob-side-tool:hover { background: rgba(255, 255, 255, .07); color: var(--ob-text); border-color: var(--ob-line-strong); }
/* 用户条：收起时 padding 补到 10（10 + 10 = 20 = (72 - 32) / 2），头像正好居中 */
.ob-side-me {
  display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: var(--ob-radius-md);
  border: 1px solid transparent;
  transition: background-color .18s, border-color .18s,
              gap var(--ob-side-dur) var(--ob-side-ease),
              padding var(--ob-side-dur) var(--ob-side-ease);
}
html.ob-side-min .ob-side-me { gap: 0; padding: 5px 10px; }
.ob-side-me:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .10); }
/* 头像统一 32px：外壳里比 avatar-s(26) 略大一号，和 34 高的工具钮对齐 */
.ob-side-ava { position: relative; flex: none; display: flex; }
.ob-side-ava .avatar { width: 32px; height: 32px; font-size: 13px; }
.ob-side-online {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 9999px;
  background: var(--ob-live); box-shadow: 0 0 0 2px var(--ob-surface-1);
}
/* 用户名/等级两行：和标签同一套收放（模板上挂了 .ob-side-label） */
.ob-side-me-txt { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ob-side-me-txt b {
  font-size: 13px; font-weight: 600; color: var(--ob-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob-side-me-txt em {
  font-style: normal; font-family: var(--ob-mono); font-size: 10.5px; color: var(--ob-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 系统开了「减少动态效果」时，收展直接换值，不做任何过渡 */
@media (prefers-reduced-motion: reduce) {
  .ob-side, .ob-side *, .ob-side-toggle > span, .ob-body { transition: none; }
}

/* ---------- 顶栏 ----------
   侧边栏改了整高竖栏后，顶栏就是它右侧的一条横条：不再需要负外边距去「铺满左端」，
   站名也搬进了侧栏的品牌头，这里只剩搜索这一件事。
   **常驻**：sticky 钉在视口顶部，页面往下滚时搜索框不跟着滚走（侧栏品牌头本来就是 fixed，
   两处等高 + 同一条下边框，滚动时整条顶栏是稳定的一条线）。
   底色必须是不透明的（--ob-surface-0，设了背景图时是 80% + 模糊，见 obsidian.css 的
   html.has-page-bg .ob-top），否则正文会从这条横条底下透出来。
   z-index 取 55：压住正文里的浮层（下拉菜单 20~30），又在侧栏 60、移动端抽屉 70/71、
   toast 90、弹窗 95 之下——顶栏不该盖住这些。 */
.ob-top {
  position: sticky; top: 0; z-index: 55;
  height: var(--ob-top-h); display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 0 var(--ob-margin);
  border-bottom: 1px solid var(--ob-line); background: var(--ob-surface-0);
}
/* 顶栏搜索：真实输入框（点进去就输、回车即搜），不弹浮层。
   底色浮到 surface-2 + 强描边，聚焦时给一圈主题色光环。 */
.ob-top-search {
  display: flex; align-items: center; gap: 9px;
  width: min(620px, 62vw); height: 40px; padding: 0 6px 0 13px;
  background: var(--ob-surface-2); border: 1px solid var(--ob-line-strong); border-radius: var(--ob-radius-md);
  color: var(--ob-text-3); text-align: left;
  transition: border-color .18s, box-shadow .18s;
}
.ob-top-search:hover { border-color: var(--ob-text-3); }
.ob-top-search:focus-within {
  border-color: var(--ob-accent-deep, var(--ob-text-3));
  box-shadow: 0 0 0 3px var(--ob-accent-bg, rgba(139, 144, 154, .18));
}
.ob-top-search > svg { flex: none; color: var(--ob-text-2); }
.ob-top-search-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  color: var(--ob-text); font: inherit; font-size: 13.5px;
}
.ob-top-search-input::placeholder { color: var(--ob-text-3); }
.ob-top-search-input:focus { outline: none; }
/* 输入框右侧的提交钮：让「这里能直接搜」一眼看出来 */
.ob-top-search-go {
  flex: none; height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--ob-radius-sm);
  background: var(--ob-text); color: var(--ob-surface-0);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: opacity .18s, transform .18s;
}
.ob-top-search-go:hover { opacity: .88; }
.ob-top-search-go:active { transform: scale(.96); }
.ob-kbd {
  font-family: var(--ob-mono); font-size: 10.5px; letter-spacing: .02em;
  padding: 2px 5px; border: 1px solid var(--ob-line); border-radius: 4px; color: var(--ob-text-3);
}
/* 顶栏常驻后，页内锚点会被压在它底下（/t/xx#reply-12、/dan/xx#item-3、#rate、#comments）：
   给这些锚点目标留出顶栏高度 + 12px 气口。老壳的同一份规则写在 style.css，
   新壳页面不引它，所以在这里再声明一遍。 */
.ob-body [id^="reply-"],
.ob-body [id^="item-"],
.ob-body [id^="reward-"],
.ob-body #comment,
.ob-body #comments,
.ob-body #rate { scroll-margin-top: calc(var(--ob-top-h) + 12px); }

/* ---------- 移动端顶栏 ---------- */
.ob-mtop { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 1rem 10px; }
.ob-mtop-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-mtop-title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-mtop-right { display: flex; align-items: center; gap: 7px; }

/* ---------- 移动端底部导航 ---------- */
.ob-mtab {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  align-items: center; justify-content: space-around;
  background: color-mix(in srgb, var(--ob-surface-1) 92%, transparent);
  border-top: 1px solid var(--ob-line); backdrop-filter: blur(12px);
}
.ob-mtab-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 56px; padding: 6px 0; color: var(--ob-text-3); font-size: 10.5px;
}
.ob-mtab-item.active { color: var(--ob-text); }
.ob-mtab-ic { position: relative; display: block; }
.ob-mtab-badge {
  position: absolute; top: -3px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 9999px; background: var(--ob-err); color: #fff; font-style: normal;
  font-family: var(--ob-mono); font-size: 10px; line-height: 15px; text-align: center;
}
/* 中央发起按钮：抬出底栏，成为唯一的实心圆 */
.ob-mtab-new {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-top: -20px; border-radius: 9999px;
  background: var(--ob-text); color: var(--ob-surface-0);
  border: 4px solid var(--ob-surface-0);
}

/* ---------- 底部抽屉（矩阵）---------- */
.ob-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 70; }
.ob-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--ob-surface-2); border-top: 1px solid var(--ob-line-strong);
  border-radius: var(--ob-radius-xl) var(--ob-radius-xl) 0 0;
  max-height: 70vh; overflow-y: auto;
}
.ob-sheet-grip { width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 9999px; background: var(--ob-line-strong); }
.ob-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ob-sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ob-sheet-grid a, .ob-sheet-grid span {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-radius);
  background: var(--ob-surface-1); color: var(--ob-text-2); font-size: 13.5px;
}
.ob-sheet-grid .is-disabled { color: #5d6068; }
.ob-sheet-grid em { font-style: normal; font-family: var(--ob-mono); font-size: 10px; color: var(--ob-text-3); }
/* 抽屉尾部的退出登录 + 站名（移动端没有侧边栏，站名收在这里） */
.ob-sheet-logout { margin-top: 10px; }
.ob-sheet-logout button {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px;
  border: 1px solid var(--ob-line); border-radius: var(--ob-radius);
  background: var(--ob-surface-1); color: var(--ob-text-2); font: inherit; font-size: 13.5px; cursor: pointer;
}
.ob-sheet-logout button:hover { border-color: var(--ob-line-strong); color: var(--ob-text); }
.ob-sheet-brand {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ob-line); color: var(--ob-text-3); font-size: 12.5px; font-weight: 600;
}
.ob-sheet-brand svg { color: var(--ob-accent-deep, currentColor); }
.ob-sheet-brand em {
  font-style: normal; font-family: var(--ob-mono); font-size: 9.5px; letter-spacing: .12em; margin-left: 6px;
}

/* ---------- 响应式：≤900px 收起侧边栏，改用移动端导航 ---------- */
@media (max-width: 900px) {
  .ob-body { padding-left: 0; padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .ob-side, .ob-top { display: none; }
  .ob-mtop { display: flex; }
  .ob-mtab { display: flex; }
  .ob-main { padding: 4px 1rem 24px; }
  .ob-page-rail, .ob-page-room { grid-template-columns: minmax(0, 1fr); }
  .ob-foot { padding-bottom: calc(34px + 58px + env(safe-area-inset-bottom)); }
}