/* ============================================================================
   上班人导航 · 复刻版视觉增强 enhance.css
   ----------------------------------------------------------------------------
   原则：纯增量。只叠加阴影 / 圆角 / 过渡 / 微交互 / 无障碍与性能样式，
        不改变原主题的栅格布局、尺寸与主色基调（主题色 var(--theme-color)）。
   适用：全站 23217 个页面统一挂载。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------------------- */
:root {
  --sb-ease: cubic-bezier(.22, .61, .36, 1);
  --sb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sb-radius: 14px;
  --sb-radius-sm: 10px;
  --sb-radius-xs: 8px;
  --sb-ring: 0 0 0 3px rgba(var(--theme-color-rgb, 252, 124, 60), .20);
  --sb-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
  --sb-shadow-2: 0 8px 20px -6px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  --sb-shadow-3: 0 18px 40px -12px rgba(16, 24, 40, .20), 0 4px 12px rgba(16, 24, 40, .08);
  --sb-line: rgba(16, 24, 40, .07);
}

/* ---------------------------------------------------------------------------
   2. 基础质感：字体渲染 / 选中色 / 滚动条
   ------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .22);
  color: inherit;
}

/* 细窄滚动条（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, .16);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .30); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, .22) transparent; }

/* 键盘可达性：仅键盘聚焦时显示焦点环 */
:focus-visible {
  outline: 2px solid var(--theme-color, #fc7c3c);
  outline-offset: 2px;
  border-radius: 6px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------
   3. 站点卡片：骨架屏 + 图标淡入 + 微交互
   ------------------------------------------------------------------------- */
/* 3.1 图标加载骨架（微光扫过），图片就绪后自动停止 */
.sites-item .item-image {
  position: relative;
  background: var(--muted-bg-a-color, #f1f3f6);
}
.sites-item .item-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .72) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 220% 100%;
  /* 有限次播放：约 4 秒后自动收尾并停止。
     避免长列表页成百上千个离屏元素长期跑动画持续占用 CPU。
     图片就绪时会提前隐藏（见下方 .sb-ready / :has 规则）。 */
  animation: sb-shimmer 1.25s var(--sb-ease) 3,
             sb-shimmer-off .3s linear 3.8s forwards;
  pointer-events: none;
  transition: opacity .3s;
}
.sites-item .item-image:has(> img.is-ready)::after { opacity: 0; animation: none; }
/* 不支持 :has 的浏览器由 JS 兜底 */
.sites-item .item-image.sb-ready::after { opacity: 0; animation: none; }

@keyframes sb-shimmer-off { to { opacity: 0; } }

@keyframes sb-shimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* 3.2 图标淡入
   只对「脚本运行时尚未加载完成」的图标置为透明（.is-pending）；
   已加载完成的图标、以及脚本未生效的降级场景都保持可见，不会出现图标消失。 */
.sites-item .item-media img.sites-icon {
  transition: opacity .35s var(--sb-ease-out), transform .4s var(--sb-ease);
}
.sites-item .item-media img.sites-icon.is-pending { opacity: 0; }
.sites-item .item-media img.sites-icon.is-ready { opacity: 1; }

/* 3.3 卡片悬浮：加强层次 + 图标轻微放大 + 标题染色 */
.sites-item {
  transition: box-shadow .34s var(--sb-ease),
              transform .34s var(--sb-ease),
              background-color .34s var(--sb-ease) !important;
}
@media (hover: hover) {
  .sites-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -12px rgba(16, 24, 40, .28),
                0 3px 8px -4px rgba(16, 24, 40, .10) !important;
  }
  .sites-item:hover .item-media img.sites-icon { transform: scale(1.08); }
  .sites-item:hover .item-title b { color: var(--theme-color, #fc7c3c); }
}
.sites-item .item-title b { transition: color .24s var(--sb-ease); }

/* 3.4「直达」按钮：悬停位移 + 主题色 */
.sites-item .sites-tags .togo {
  transition: transform .24s var(--sb-ease), color .24s var(--sb-ease);
}
@media (hover: hover) {
  .sites-item:hover .sites-tags .togo { color: var(--theme-color, #fc7c3c) !important; }
  .sites-item:hover .sites-tags .togo:hover { transform: translateX(3px) scale(1.06); }
}

/* 3.5 键盘可达：卡片聚焦时同样高亮 */
.sites-item .sites-body:focus-visible {
  outline: 2px solid var(--theme-color, #fc7c3c);
  outline-offset: 3px;
  border-radius: var(--sb-radius-sm);
}

/* ---------------------------------------------------------------------------
   4. 分类 Tab：胶囊底 + 滑动下划线 + 面板淡入
   ------------------------------------------------------------------------- */
.io-slider-tab .slider-li.tab-item {
  border-radius: 999px;
  transition: opacity .25s var(--sb-ease), background-color .25s var(--sb-ease), color .25s var(--sb-ease);
}
@media (hover: hover) {
  .io-slider-tab .slider-li.tab-item:hover { background: rgba(var(--theme-color-rgb, 252, 124, 60), .10); opacity: 1; }
}
.io-slider-tab .slider-li.tab-item.active {
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .14);
  color: var(--theme-color, #fc7c3c);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-color-rgb, 252, 124, 60), .22);
}
@keyframes sb-underline {
  from { transform: scaleX(.2); opacity: 0; }
  to   { transform: scaleX(1);  opacity: 1; }
}

/* 面板切换淡入 */
.tab-content > .tab-pane.active { animation: sb-fade-up .34s var(--sb-ease-out); }
@keyframes sb-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 按需注入的面板：数据尚未就绪时给个占位与转圈，避免大片空白。
   正常情况下面板数据已预取，注入是同步的，这个转圈不会出现。 */
.tab-pane[data-pane-pending].active { min-height: 200px; }
.tab-pane[data-pane-pending].active::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 70px auto;
  border-radius: 50%;
  border: 2px solid rgba(var(--theme-color-rgb, 252, 124, 60), .22);
  border-top-color: var(--theme-color, #fc7c3c);
  animation: sb-spin .7s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   5. 顶部导航：滚动后浮起阴影
   ------------------------------------------------------------------------- */
.sb-scrolled .header-nav,
.header-nav.sb-stuck {
  box-shadow: 0 6px 22px -14px rgba(16, 24, 40, .45);
}

/* 导航文字 hover 主题色 */
.header-nav a { transition: color .22s var(--sb-ease); }
@media (hover: hover) {
  .header-nav a:hover { color: var(--theme-color, #fc7c3c); }
}

/* ---------------------------------------------------------------------------
   6. 左侧分类侧栏：当前项指示条
   ------------------------------------------------------------------------- */
.aside-body .aside-item { border-radius: var(--sb-radius-xs); }
.aside-body .aside-item > .aside-btn { transition: background-color .22s var(--sb-ease), color .22s var(--sb-ease); }
@media (hover: hover) {
  .aside-body .aside-item > .aside-btn:hover { background: rgba(var(--theme-color-rgb, 252, 124, 60), .10); color: var(--theme-color, #fc7c3c); }
}
.aside-body .aside-item.open > .aside-btn { color: var(--theme-color, #fc7c3c); }

/* ---------------------------------------------------------------------------
   7. 顶部 Banner 大搜索框：聚焦光环 + 按钮反馈
   ------------------------------------------------------------------------- */
/* 可视「搜索框」其实是 .search-key 输入框本身（50px 高、圆角、带底色），
   因此焦点光环直接落在输入框上；原样式带 box-shadow:none !important，需同级别覆盖。 */
.big-search .search-form .search-key {
  transition: box-shadow .28s var(--sb-ease), background-color .28s var(--sb-ease);
}
.big-search .search-form .search-key:focus {
  box-shadow: 0 0 0 4px rgba(var(--theme-color-rgb, 252, 124, 60), .20),
              0 12px 28px -16px rgba(16, 24, 40, .45) !important;
}
.big-search .search-submit-btn {
  transition: filter .22s var(--sb-ease), transform .18s var(--sb-ease);
}
.big-search .search-submit-btn:hover { filter: brightness(1.06); }
.big-search .search-submit-btn:active { transform: scale(.94); }

/* 搜索引擎分组 / 词条：胶囊与高亮 */
.search-list-menu .search-menu {
  border-radius: 999px;
  transition: color .22s var(--sb-ease), background-color .22s var(--sb-ease), opacity .22s var(--sb-ease);
}
@media (hover: hover) {
  .search-list-menu .search-menu:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
}
.search-list-group .search-term {
  border-radius: 999px;
  padding-left: 10px;
  padding-right: 10px;
  transition: color .2s var(--sb-ease), background-color .2s var(--sb-ease);
}
@media (hover: hover) {
  .search-list-group .search-term:hover { background: rgba(var(--theme-color-rgb, 252, 124, 60), .14); }
}

/* ---------------------------------------------------------------------------
   8. 离线搜索浮层：键盘选中态 + 命中高亮
   ------------------------------------------------------------------------- */
/* 8.0 结果项结构修正：.sb-search-item 内实际为 .sb-search-main + .sb-go 两个链接，
       这里补齐主链接的弹性布局（原样式只作用于外层容器，导致图标与文字错位） */
.sb-search-item { padding: 8px 10px; }
.sb-search-item .sb-search-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sb-search-item .sb-search-main img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  background: #f1f3f6;
  flex: 0 0 auto;
}
.sb-search-item .sb-search-main .sb-search-info { min-width: 0; flex: 1 1 auto; }
.sb-search-info b,
.sb-search-info span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-search-item .sb-go {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 18px;
  color: #8a9098;
  border: 1px solid #e3e7ec;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--sb-ease), color .2s var(--sb-ease),
              background-color .2s var(--sb-ease), border-color .2s var(--sb-ease);
}
.sb-search-item.sb-active .sb-go,
.sb-search-item:hover .sb-go { opacity: 1; }
.sb-search-item .sb-go:hover {
  color: #fff;
  background: var(--theme-color, #fc7c3c);
  border-color: var(--theme-color, #fc7c3c);
}

.sb-search-list { scroll-behavior: smooth; }
.sb-search-item.sb-active,
.sb-search-item:hover {
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .10);
  box-shadow: inset 3px 0 0 0 var(--theme-color, #fc7c3c);
}
.sb-search-item mark {
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .22);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
.sb-search-kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #868e96;
  background: #f1f3f6;
  border: 1px solid #e3e7ec;
  border-bottom-width: 2px;
  border-radius: 5px;
}
.sb-search-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid #eef0f3;
  font-size: 12px;
  color: #9aa0a6;
  background: #fafbfc;
}
.sb-search-item img { transition: transform .2s var(--sb-ease); }
.sb-search-item:hover img { transform: scale(1.06); }
.sb-search-body::-webkit-scrollbar { width: 8px; }

/* 9. 回到顶部：渐变 + 弹性进入 + 悬停反馈
   位置与右侧工具栏（#footer-tools：right:10px / 按钮 40px）对齐 */
.sb-backtop {
  right: 10px !important;
  bottom: 36px !important;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 60%),
              var(--theme-color, #fc7c3c) !important;
  box-shadow: 0 10px 26px -10px rgba(var(--theme-color-rgb, 252, 124, 60), .75), 0 2px 8px rgba(16, 24, 40, .12) !important;
  transition: opacity .3s var(--sb-ease), visibility .3s var(--sb-ease), transform .3s var(--sb-ease-out), box-shadow .3s var(--sb-ease) !important;
}
.sb-backtop.show { opacity: 1; visibility: visible; transform: none; }
.sb-backtop:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 16px 34px -10px rgba(var(--theme-color-rgb, 252, 124, 60), .85), 0 4px 12px rgba(16, 24, 40, .16) !important;
}
.sb-backtop:active { transform: translateY(-1px) scale(.98) !important; }

/* ---------------------------------------------------------------------------
   10. 页脚：分隔线与链接反馈
   ------------------------------------------------------------------------- */
.footer, .footer-mini {
  border-top: 1px solid var(--sb-line);
}
.footer a { transition: color .22s var(--sb-ease), opacity .22s var(--sb-ease); }

/* ---------------------------------------------------------------------------
   11. 通用小件：按钮 / 徽标 / 分页
   ------------------------------------------------------------------------- */
.btn { transition: transform .2s var(--sb-ease), box-shadow .2s var(--sb-ease), filter .2s var(--sb-ease); }
.btn:active { transform: scale(.975); }

/* 「加载更多」分页按钮 */
.ajax-more, .btn-more, .load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), color .22s var(--sb-ease);
}
@media (hover: hover) {
  .ajax-more:hover, .btn-more:hover, .load-more:hover {
    color: var(--theme-color, #fc7c3c) !important;
    transform: translateY(-1px);
  }
}

/* 数字分页 */
.pagination a, .page-numbers {
  transition: background-color .2s var(--sb-ease), color .2s var(--sb-ease), transform .2s var(--sb-ease);
}
.pagination a:hover, .page-numbers:hover { transform: translateY(-1px); }

/* 图片统一圆角与渲染质量（不改变既有尺寸） */
.sites-item .item-media img { image-rendering: -webkit-optimize-contrast; }

/* ---------------------------------------------------------------------------
   12. 暗色模式（.io-black-mode）适配
   ------------------------------------------------------------------------- */
.io-black-mode ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: content-box; }
.io-black-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); background-clip: content-box; }
.io-black-mode { scrollbar-color: rgba(255, 255, 255, .22) transparent; }

.io-black-mode .sites-item .item-image { background: rgba(255, 255, 255, .06); }
.io-black-mode .sites-item .item-image::after {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .10) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 220% 100%;
}

.io-black-mode .sb-search-panel { background: #232527; }
.io-black-mode .sb-search-head { border-bottom-color: rgba(255, 255, 255, .08); }
.io-black-mode .sb-search-input { color: #e8eaed; }
.io-black-mode .sb-search-item:hover,
.io-black-mode .sb-search-item.sb-active { background: rgba(var(--theme-color-rgb, 252, 124, 60), .16); }
.io-black-mode .sb-search-info b { color: #e8eaed; }
.io-black-mode .sb-search-info span { color: #9aa0a6; }
.io-black-mode .sb-search-foot { background: #1e2022; border-top-color: rgba(255, 255, 255, .08); }
.io-black-mode .sb-search-kbd { background: #2c2e31; border-color: rgba(255, 255, 255, .1); color: #9aa0a6; }
.io-black-mode .sb-search-item .sb-search-main img { background: rgba(255, 255, 255, .08); }
.io-black-mode .sb-search-item .sb-go { color: #9aa0a6; border-color: rgba(255, 255, 255, .14); }

.io-black-mode .big-search .search-form:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--theme-color-rgb, 252, 124, 60), .25), 0 10px 26px -12px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------------------
   13. 无障碍：尊重系统「减少动态效果」
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sites-item:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   14. 打印：隐藏交互浮层
   ------------------------------------------------------------------------- */
@media print {
  .sb-backtop, .sb-search-overlay, .aside-body, .mobile-nav { display: none !important; }
}

/* ---------------------------------------------------------------------------
   15. 右侧工具栏：夜间模式按钮 + 主题色切换器
   ------------------------------------------------------------------------- */
/* 15.1 工具按钮尺寸对齐（#footer-tools 内既有 btn-tools 为 40×40） */
#footer-tools .btn-tools { transition: color .22s var(--sb-ease), background-color .22s var(--sb-ease); }
html:not(.io-black-mode) #footer-tools .btn-tools:hover {
  color: var(--theme-color, #fc7c3c);
}

/* 15.2 夜间模式按钮：状态高亮 + 图标切换（内联 SVG，不依赖图标字体） */
.switch-dark-mode { position: relative; }
.switch-dark-mode.is-night {
  color: #fff !important;
  background: linear-gradient(140deg, #4a5568, #2d3748) !important;
}
.switch-dark-mode .sb-mode-ico { display: block; width: 18px; height: 18px; margin: auto; line-height: 0; }
.switch-dark-mode .sb-mode-ico svg { width: 18px; height: 18px; display: block; }
.switch-dark-mode .sb-i-sun { display: none; }
.switch-dark-mode.is-night .sb-i-moon { display: none; }
.switch-dark-mode.is-night .sb-i-sun { display: block; }

/* 15.3 主题色按钮 */
.sb-accent-btn .sb-accent-dot {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  border-radius: 50%;
  background: var(--theme-color, #fc7c3c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(16, 24, 40, .08);
  transition: transform .22s var(--sb-ease);
}
.sb-accent-btn:hover .sb-accent-dot { transform: scale(1.14); }
.sb-accent-btn.is-open { color: var(--theme-color, #fc7c3c); }

/* 15.4 调色面板：相对工具栏定位，从左侧展开 */
.sb-accent-pop {
  position: absolute;
  right: 52px;
  bottom: 0;
  width: 244px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px) scale(.98);
  transform-origin: right bottom;
  /* 关闭时：先淡出，再延迟 .2s 隐藏（visibility 用 0s 过渡，不做插值，避免状态滞留） */
  transition: opacity .2s var(--sb-ease), visibility 0s .2s, transform .24s var(--sb-ease-out);
  z-index: 5;
}
.sb-accent-pop.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* 打开时：visibility 立即生效，不等待 */
  transition: opacity .2s var(--sb-ease), visibility 0s 0s, transform .24s var(--sb-ease-out);
}

.sb-accent-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #868e96;
  margin-bottom: 10px;
}
.sb-accent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sb-sw {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .10);
  transition: transform .18s var(--sb-ease), box-shadow .18s var(--sb-ease);
}
.sb-sw:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .10), 0 4px 10px -3px rgba(16, 24, 40, .35); }
.sb-sw[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(16, 24, 40, .35);
}
.sb-sw:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.sb-accent-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sb-line);
}
.sb-accent-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #868e96;
  cursor: pointer;
  user-select: none;
}
.sb-accent-custom input[type="color"] {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.sb-accent-reset {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  color: #868e96;
  background: none;
  border: 1px solid #e3e7ec;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s var(--sb-ease), border-color .2s var(--sb-ease);
}
.sb-accent-reset:hover { color: var(--theme-color, #fc7c3c); border-color: currentColor; }

/* 15.5 暗色模式下的面板配色 */
.io-black-mode .sb-accent-pop { background: #232527; border-color: rgba(255, 255, 255, .09); }
.io-black-mode .sb-accent-head { color: #9aa0a6; }
.io-black-mode .sb-accent-foot { border-top-color: rgba(255, 255, 255, .09); }
.io-black-mode .sb-accent-custom { color: #9aa0a6; }
.io-black-mode .sb-accent-custom input[type="color"] { border-color: rgba(255, 255, 255, .16); }
.io-black-mode .sb-accent-reset { color: #9aa0a6; border-color: rgba(255, 255, 255, .16); }
.io-black-mode .sb-sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* 15.6 离线时天气组件取不到数据，隐藏空壳按钮（原站依赖外部脚本） */
#footer-tools .btn-weather.sb-empty { display: none !important; }

/* ---------------------------------------------------------------------------
   16. 窄屏抽屉（分类侧栏 / 汉堡菜单）：遮罩 + 层次
   两个抽屉的开关按钮原站本来就有（右侧工具栏「显示侧栏」、抽屉内「收起」、
   汉堡按钮，都走 data-toggle-div 机制，见 app.js），这里只补原主题没有的
   遮罩、点击遮罩收起与滚动锁。
   ------------------------------------------------------------------------- */
.sb-drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, .44);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--sb-ease), visibility 0s .24s;
  z-index: 98;
}
.sb-drawer-mask.show { opacity: 1; visibility: visible; transition: opacity .24s var(--sb-ease), visibility 0s 0s; }

html.sb-drawer-open { overflow: hidden; }

@media (max-width: 767.98px) {
  .sb-accent-pop { width: 220px; right: 48px; }

  /* 抽屉打开时压掉正文模糊，避免叠两层 backdrop-filter 卡顿 */
  html.sb-drawer-open .aside-body { backdrop-filter: none; }

  /* 抽屉本体在窄屏下的层次与圆角，避免贴边生硬。
     opacity 必须 !important：原主题有一条
       .have-banner:not(.full-container) .aside-body{opacity:0}
     特异性 (0,3,0) 高于 .aside-body.show 的 (0,2,0)。桌面端之所以可见，
     是因为 app.js 写的是内联 style.opacity；窄屏分支不走那条路，
     不强制提权就会「抽屉滑到位了却整块透明」。 */
  .aside-body.show {
    opacity: 1 !important;
    border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    box-shadow: var(--sb-shadow-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-drawer-mask { transition: none !important; }
}

/* ============================================================================
   侧栏排行榜「日榜/周榜/月榜」离线切换
   ----------------------------------------------------------------------------
   三档内容已由 _scrape/bake_rankings_tabs.py 静态烘焙进页面，
   每档一个 [data-sb-pane] 兄弟面板，非当前档位加 .sb-off 隐藏。
   必须 !important：主题的 `.row-a,.posts-row{display:flex}` 与 `.hide{display:none}`
   特异性相同（0,1,0），谁在后谁赢，不能依赖 .hide。
   ========================================================================== */
[data-sb-pane].sb-off {
  display: none !important;
}