/* ============================================================================
   职场百宝箱 · 复刻版视觉增强 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; }
}

/* ---------------------------------------------------------------------------
   16. 2026 视觉重做：安静的工具工作台
   ---------------------------------------------------------------------------
   只覆盖增强层，不改主题栅格和页面数据。重点是统一层级、留白和交互反馈，
   让首页、详情页和信息页共享同一套视觉语言。
   ------------------------------------------------------------------------- */
:root {
  --sb-page-bg: #f3f6fa;
  --sb-ink: #172238;
  --sb-muted-ink: #718096;
  --sb-surface: rgba(255, 255, 255, .86);
  --sb-surface-solid: #fff;
  --sb-border-soft: rgba(38, 53, 76, .10);
  --sb-shadow-soft: 0 12px 34px -22px rgba(20, 35, 58, .42);
  --sb-shadow-card: 0 18px 40px -26px rgba(20, 35, 58, .38);
  --sb-radius-lg: 24px;
  --sb-radius-md: 18px;
  --sb-radius-sm: 12px;
}

html, body { background: var(--sb-page-bg); color: var(--sb-ink); }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--theme-color-rgb, 252, 124, 60), .06), transparent 30rem),
    var(--sb-page-bg);
}

/* Header: a floating navigation rail */
.main-header.header-fixed { background: transparent !important; box-shadow: none !important; }
.main-header .header-nav {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 12px;
}
.main-header .header-nav > .container-header {
  width: calc(100% - 28px);
  max-width: 1440px;
  min-height: 62px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: var(--sb-radius-md);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 38px -24px rgba(20, 35, 58, .52), 0 2px 8px rgba(20, 35, 58, .06);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.main-header .navbar-logo img { max-height: 36px; width: auto; }
.main-header .navbar-header > li > a,
.main-header .navbar-menu > li > a {
  border-radius: 10px;
  transition: background-color .22s var(--sb-ease), color .22s var(--sb-ease), transform .22s var(--sb-ease);
}
.main-header .navbar-header > li > a:hover,
.main-header .navbar-menu > li > a:hover {
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .09);
  transform: translateY(-1px);
}
.main-header .navbar-header > li.current-menu-item > a,
.main-header .navbar-header > li.current_page_item > a { color: var(--theme-color) !important; }

/* Home hero: make the search area the visual anchor */
.header-banner.bg-gradual {
  overflow: hidden;
  border-radius: 0 0 34px 34px;
  background:
    radial-gradient(circle at 12% 14%, rgba(var(--theme-color-rgb, 252, 124, 60), .36), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(117, 184, 255, .34), transparent 31%),
    linear-gradient(135deg, #13243b 0%, #1c3857 54%, #263a65 100%) !important;
  box-shadow: 0 20px 50px -34px rgba(16, 31, 54, .82);
}
.header-banner .search-container {
  padding-top: 42px;
  padding-bottom: 38px;
}
.big-search {
  --big-search-height: 260px !important;
  --big-mobile-height: 188px !important;
  max-width: 980px;
}
.big-search .search-list-menu { gap: 8px; }
.big-search .search-list-menu .search-menu {
  color: rgba(255, 255, 255, .70);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 8px 14px;
  transition: color .22s var(--sb-ease), background-color .22s var(--sb-ease), transform .22s var(--sb-ease);
}
.big-search .search-list-menu .search-menu:hover,
.big-search .search-list-menu .search-menu.active {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}
.big-search .search-form {
  min-height: 62px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 42px -24px rgba(0, 0, 0, .66);
}
.big-search .search-form .search-key {
  min-height: 48px;
  padding-left: 16px;
  font-size: 16px;
  color: var(--sb-ink);
  background: transparent;
}
.big-search .search-submit-btn {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 14px;
  color: #fff !important;
  background: var(--theme-color) !important;
  box-shadow: 0 10px 22px -13px rgba(var(--theme-color-rgb, 252, 124, 60), .95);
}
.big-search .search-list-group .search-term {
  color: rgba(255, 255, 255, .70);
  border-radius: 999px;
  padding: 5px 9px;
}
.big-search .search-list-group .search-term.active,
.big-search .search-list-group .search-term:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* Main workspace */
.content-wrap { padding-top: 10px; padding-bottom: 34px; }
.content-card {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.content-card .io-slider-tab {
  min-height: 40px;
  margin-bottom: 12px !important;
  padding: 0 2px;
}
.content-card .tab-title {
  color: var(--sb-ink) !important;
  font-weight: 800;
  letter-spacing: .01em;
}
.content-card .tab-title .site-tag { color: var(--theme-color); }
.content-card .tab-more { color: var(--sb-muted-ink); }
.content-card .tab-content { padding: 0; }
.content-card .tab-pane > .row { margin: -5px; }
.content-card .sites-item {
  margin: 5px;
  border: 1px solid rgba(38, 53, 76, .07);
  border-radius: var(--sb-radius-sm);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 20px -18px rgba(20, 35, 58, .50);
}
.content-card .sites-item:hover {
  border-color: rgba(var(--theme-color-rgb, 252, 124, 60), .30);
  background: var(--sb-surface-solid);
}
.content-card .sites-item .item-title b { color: var(--sb-ink); }
.content-card .sites-item .line1.text-muted { color: var(--sb-muted-ink) !important; }

/* Aside: quiet navigation panel with a clear active state */
.ioui-aside { padding-bottom: 24px; }
.aside-card {
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: var(--sb-shadow-card) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.aside-body .aside-ul { padding: 10px !important; }
.aside-body .aside-item > .aside-btn {
  min-height: 42px;
  padding: 9px 12px !important;
  border-radius: var(--sb-radius-sm) !important;
  color: var(--sb-muted-ink);
  font-weight: 650;
}
.aside-body .aside-item > .aside-btn:hover,
.aside-body .aside-item.open > .aside-btn {
  color: var(--theme-color) !important;
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .10) !important;
}

/* Information, article and detail pages inherit the same surface system */
.content-layout > .panel.card,
.content-layout > .site-content.card,
.content-layout > .article.card {
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow-card);
}
.content-layout > .panel.card .card-body,
.content-layout > .site-content.card .card-body { padding: clamp(18px, 3vw, 34px); }
.content-layout .panel-header { border-bottom: 1px solid var(--sb-border-soft); }
.content-layout .panel-header h1,
.content-layout .site-name { color: var(--sb-ink); letter-spacing: -.02em; }
.content-layout .panel-body h2,
.content-layout .panel-body h3 { color: var(--sb-ink); margin-top: 1.5em; }
.content-layout .panel-body p,
.content-layout .panel-body li { color: var(--sb-muted-ink); line-height: 1.85; }
.content-layout .panel-body a:not(.btn) { color: var(--theme-color); text-underline-offset: 3px; }
.contact-form {
  max-width: 700px;
  margin-top: 24px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .045);
}
.contact-form .form-control {
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-sm);
  background: rgba(255, 255, 255, .82);
}

/* Footer */
.main-footer {
  margin-top: 34px;
  border-top: 0 !important;
  color: rgba(255, 255, 255, .72);
  background: #14243a !important;
}
.main-footer .footer { border-top: 0; }
.main-footer .footer a { color: rgba(255, 255, 255, .78); }
.main-footer .footer a:hover { color: #fff; }
.main-footer .footer-copyright { color: rgba(255, 255, 255, .55); }

/* Dark mode */
.io-black-mode,
.io-black-mode body { background: #0d1728; color: #e7edf7; }
.io-black-mode body { background: radial-gradient(circle at 15% 0%, rgba(var(--theme-color-rgb, 252, 124, 60), .12), transparent 30rem), #0d1728; }
.io-black-mode .main-header .header-nav > .container-header,
.io-black-mode .content-card,
.io-black-mode .aside-card,
.io-black-mode .content-layout > .panel.card,
.io-black-mode .content-layout > .site-content.card { background: rgba(20, 33, 53, .88); border-color: rgba(255, 255, 255, .09); }
.io-black-mode .main-header .navbar-header > li > a,
.io-black-mode .main-header .navbar-menu > li > a,
.io-black-mode .content-card .tab-title,
.io-black-mode .content-layout .panel-header h1,
.io-black-mode .content-layout .site-name,
.io-black-mode .content-layout .panel-body h2,
.io-black-mode .content-layout .panel-body h3 { color: #e7edf7 !important; }
.io-black-mode .content-card .sites-item { background: rgba(30, 46, 70, .76); border-color: rgba(255, 255, 255, .08); }
.io-black-mode .content-card .sites-item .item-title b { color: #e7edf7; }
.io-black-mode .content-card .sites-item .line1.text-muted,
.io-black-mode .content-layout .panel-body p,
.io-black-mode .content-layout .panel-body li { color: #aab7ca !important; }
.io-black-mode .contact-form { background: rgba(var(--theme-color-rgb, 252, 124, 60), .09); border-color: rgba(255, 255, 255, .10); }
.io-black-mode .contact-form .form-control { color: #e7edf7; background: rgba(8, 17, 30, .48); border-color: rgba(255, 255, 255, .12); }

@media (max-width: 767px) {
  .main-header .header-nav { padding-top: 8px; }
  .main-header .header-nav > .container-header { width: calc(100% - 16px); min-height: 54px; padding: 0 10px; border-radius: 15px; }
  .main-header .navbar-logo { margin-right: 8px !important; }
  .main-header .navbar-logo img { max-width: 148px; max-height: 30px; }
  .header-banner.bg-gradual { border-radius: 0 0 24px 24px; }
  .header-banner .search-container { padding-top: 28px; padding-bottom: 24px; }
  .big-search .search-list-menu .search-menu { padding: 6px 10px; font-size: 13px; }
  .big-search .search-form { min-height: 54px; border-radius: 15px; }
  .big-search .search-form .search-key { min-height: 40px; font-size: 15px; }
  .big-search .search-submit-btn { width: 40px; height: 40px; line-height: 40px; border-radius: 11px; }
  .content-wrap { padding-top: 4px; }
  .content-card { padding: 12px; margin-bottom: 14px; border-radius: var(--sb-radius-md); }
  .content-card .io-slider-tab { margin-bottom: 8px !important; }
  .content-card .sites-item { border-radius: 11px; }
  .content-layout > .panel.card .card-body,
  .content-layout > .site-content.card .card-body { padding: 18px 16px; }
  .main-footer { margin-top: 20px; }
}

/* ---------------------------------------------------------------------------
   17. 细节打磨：标题、图标和阅读节奏
   ------------------------------------------------------------------------- */
.header-banner.bg-gradual {
  position: relative;
  isolation: isolate;
}
.header-banner.bg-gradual::before,
.header-banner.bg-gradual::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}
.header-banner.bg-gradual::before { top: -210px; left: 8%; box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 70px rgba(255, 255, 255, .018); }
.header-banner.bg-gradual::after { right: -120px; bottom: -250px; box-shadow: 0 0 0 28px rgba(var(--theme-color-rgb, 252, 124, 60), .08), 0 0 0 64px rgba(var(--theme-color-rgb, 252, 124, 60), .045); }
.header-banner .search-container { position: relative; z-index: 1; }

/* Header active state: a small, consistent signal instead of a heavy block */
.main-header .navbar-header > li.current-menu-item > a,
.main-header .navbar-header > li.current_page_item > a { position: relative; }
.main-header .navbar-header > li.current-menu-item > a::after,
.main-header .navbar-header > li.current_page_item > a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 3px;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--theme-color);
  opacity: .85;
}

/* Category heading and tab rail */
.content-card .io-slider-tab .tab-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.content-card .io-slider-tab .tab-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 22px;
  border-radius: 999px;
  background: var(--theme-color);
  box-shadow: 0 6px 14px -7px rgba(var(--theme-color-rgb, 252, 124, 60), .95);
}
.content-card .slider-tab {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(38, 53, 76, .045);
}
.content-card .slider-li.tab-item { padding: 6px 11px; }
.content-card .slider-li.tab-item.active { box-shadow: 0 3px 10px -7px rgba(var(--theme-color-rgb, 252, 124, 60), .95), inset 0 0 0 1px rgba(var(--theme-color-rgb, 252, 124, 60), .22); }

/* Site cards: a little more depth without changing the grid */
.content-card .sites-item { overflow: hidden; }
.content-card .sites-item .item-media { position: relative; }
.content-card .sites-item .item-media::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .08);
  opacity: 0;
  transform: scale(.75);
  transition: opacity .28s var(--sb-ease), transform .34s var(--sb-ease);
  pointer-events: none;
}
.content-card .sites-item:hover .item-media::before { opacity: 1; transform: scale(1); }
.content-card .sites-item .item-media img { position: relative; z-index: 1; }
.content-card .sites-item .sites-tags .togo {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 9px;
  transition: background-color .22s var(--sb-ease), color .22s var(--sb-ease), transform .22s var(--sb-ease);
}
.content-card .sites-item:hover .sites-tags .togo { background: rgba(var(--theme-color-rgb, 252, 124, 60), .10); }

/* Keep the category rail useful while browsing long pages */
@media (min-width: 992px) {
  .ioui-aside .aside-card { position: sticky; top: 88px; max-height: calc(100vh - 112px); }
  .aside-body .aside-ul { max-height: calc(100vh - 136px); }
}

/* Long-form reading rhythm on standalone pages */
body:not(.home) .content-wrap { max-width: 1360px; margin-right: auto; margin-left: auto; }
body:not(.home) .content-layout > .panel.card .panel-body.single,
body:not(.home) .content-layout > .panel.card .panel-body.mt-2 { max-width: 900px; margin-right: auto; margin-left: auto; }
.content-layout .panel-body.single img { border-radius: var(--sb-radius-sm); }
.content-layout .panel-body.single blockquote {
  margin: 1.5rem 0;
  padding: 14px 18px;
  border-left: 3px solid var(--theme-color);
  border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .06);
  color: var(--sb-muted-ink);
}
.content-layout .panel-body.single code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(38, 53, 76, .08);
}
.content-layout .site-go .btn,
.content-layout .panel-body .btn { border-radius: 999px; }
.content-layout .site-go .btn.vc-theme { box-shadow: 0 12px 22px -15px rgba(var(--theme-color-rgb, 252, 124, 60), .95); }

.io-black-mode .content-card .slider-tab { background: rgba(255, 255, 255, .07); }
.io-black-mode .content-layout .panel-body.single blockquote { background: rgba(var(--theme-color-rgb, 252, 124, 60), .10); color: #aab7ca; }
.io-black-mode .content-layout .panel-body.single code { background: rgba(255, 255, 255, .09); }

@media (max-width: 767px) {
  .header-banner.bg-gradual::before { left: -180px; }
  .header-banner.bg-gradual::after { right: -250px; }
  .content-card .io-slider-tab .tab-title::before { width: 5px; height: 18px; }
  .content-card .slider-tab { margin-top: 8px; max-width: 100%; overflow-x: auto; }
  body:not(.home) .content-wrap { width: 100%; }
}

/* ---------------------------------------------------------------------------
   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-mode-ico .sb-i-sun { display: none !important; }
.switch-dark-mode.is-night .sb-mode-ico .sb-i-moon { display: none !important; }
.switch-dark-mode.is-night .sb-mode-ico .sb-i-sun { display: block !important; }

/* 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;
}

/* ============================================================================
   18. 分类 Tab 与工具栏图标对齐
   ----------------------------------------------------------------------------
   胶囊内部使用 flex 让文字始终落在按钮的视觉中心；右侧工具栏统一为
   40px 方形按钮，并为内联 SVG 保留稳定的绘制盒，避免图标字体基线造成偏移。
   ============================================================================ */
.content-card .io-slider-tab {
  display: flex;
  align-items: center;
}
.content-card .slider-tab {
  display: flex;
  align-items: center;
  min-height: 36px;
}
.content-card .slider-li.tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  line-height: 1.2;
  white-space: nowrap;
}

#footer-tools {
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#footer-tools .btn-tools:not(.go-up) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}
#footer-tools .go-up {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center;
}
#footer-tools .btn-tools svg,
#footer-tools .btn-tools i,
.sb-backtop svg,
.sb-backtop i {
  display: block;
  width: 19px;
  height: 19px;
  margin: 0;
  line-height: 1;
}
#footer-tools .sb-accent-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
}
#footer-tools .sb-accent-dot svg { width: 20px; height: 20px; }
#footer-tools .sb-accent-btn:hover .sb-accent-dot { transform: none; }

.sb-backtop {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-backtop svg { width: 19px; height: 19px; }

/* ============================================================================
   19. 侧栏可读性：修正夜间模式下的浅色玻璃层与低对比文字
   ============================================================================ */
.ioui-aside .aside-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 247, 251, .96)) !important;
  border-color: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 18px 40px -24px rgba(20, 35, 58, .48) !important;
  color: #30445f;
}
.ioui-aside .aside-btn,
.ioui-aside .aside-btn span {
  opacity: 1 !important;
}
.ioui-aside .aside-item > .aside-btn {
  color: #30445f !important;
  font-weight: 750;
}
.ioui-aside .aside-sub .aside-btn {
  color: #5b6b82 !important;
  background: transparent !important;
  font-weight: 600;
}
.ioui-aside .aside-sub .aside-btn:hover,
.ioui-aside .aside-item > .aside-btn:hover,
.ioui-aside .aside-item.open > .aside-btn {
  color: var(--theme-color, #fc7c3c) !important;
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .13) !important;
}

.io-black-mode .ioui-aside .aside-card {
  background: linear-gradient(180deg, rgba(24, 42, 67, .98), rgba(15, 29, 49, .98)) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, .72) !important;
}
.io-black-mode .ioui-aside .aside-item > .aside-btn {
  color: #e7edf7 !important;
}
.io-black-mode .ioui-aside .aside-sub .aside-btn {
  color: #b9c7da !important;
}
.io-black-mode .ioui-aside .aside-sub .aside-btn:hover,
.io-black-mode .ioui-aside .aside-item > .aside-btn:hover,
.io-black-mode .ioui-aside .aside-item.open > .aside-btn {
  color: #fff !important;
  background: rgba(var(--theme-color-rgb, 252, 124, 60), .22) !important;
}