/* =========================================================
   theme.css —— 换肤层
   只在原主题之上覆盖颜色和形状，不动布局，所以不会把页面改坏
   主色/副色来自 site.config.js（--x-accent / --x-accent2）
   ========================================================= */
:root {
  --x-accent: #38bdf8;
  --x-accent2: #8b5cf6;
  --x-bg: #0b0f14;
  --x-bg-soft: #111821;
  --x-card: #151d27;
  --x-card-hover: #1b2532;
  --x-line: #223040;
  --x-text: #e6edf5;
  --x-dim: #93a4b8;
  --x-radius: 16px;
}

/* ---------- 底色 ---------- */
body.io-grey-mode,
body {
  background: var(--x-bg) !important;
  color: var(--x-text);
}

.page-container,
.content-body,
.main {
  background: transparent !important;
}

/* ---------- 左栏 ---------- */
.sidebar-nav,
.sidebar-nav-inner {
  background: var(--x-bg-soft) !important;
  border-right: 1px solid var(--x-line);
}

.sidebar-item > a,
.sidebar-menu a {
  border-radius: 10px;
  color: var(--x-text);
}

.sidebar-item > a:hover,
.sidebar-menu a:hover,
.sidebar-item.active > a {
  background: rgba(56, 189, 248, .12);
  color: var(--x-accent);
}

.x-logo-text {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--x-text);
  font-size: 17px;
  line-height: 40px;
  white-space: nowrap;
}

/* 原站的 logo 图片一律隐藏（换成文字 logo 了）
   用 html body 提权，否则会被主题的 .io-grey-mode .logo-dark{display:inline!important} 压过去 */
html body .sidebar-logo img,
html body .navbar-brand img,
html body .logo img,
html body img.logo-dark,
html body img.logo-light {
  display: none !important;
}
.logo-collapsed .x-logo-text {
  font-size: 20px;
  color: var(--x-accent);
}

/* ---------- 头图：把原站那张星空 iframe 换成纯 CSS 渐变 ---------- */
.header-big {
  background: radial-gradient(1200px 400px at 50% -10%, rgba(56, 189, 248, .28), transparent 60%),
              radial-gradient(900px 380px at 80% 10%, rgba(139, 92, 246, .22), transparent 65%),
              linear-gradient(180deg, #0e1620, var(--x-bg)) !important;
  border: 1px solid var(--x-line);
  border-radius: 22px;
  overflow: hidden;
}
.header-big .canvas-bg,
.header-big iframe {
  display: none !important;
}

.big-title h2 {
  color: var(--x-text);
  letter-spacing: 4px !important;
  font-weight: 800;
}

/* ---------- 搜索框 ---------- */
.s-search input[type="text"],
#search input[type="text"] {
  background: var(--x-card) !important;
  border: 1px solid var(--x-line) !important;
  color: var(--x-text) !important;
  border-radius: 14px !important;
  height: 54px;
  padding: 0 22px;
}
.s-search input[type="text"]:focus,
#search input[type="text"]:focus {
  border-color: var(--x-accent) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.s-type-list label {
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--x-dim);
}
.s-type-list label.active,
.s-type-list label:hover {
  color: var(--x-accent);
  background: rgba(56, 189, 248, .12);
}

/* ---------- 分类标签 ---------- */
.nav-tabs .nav-link,
.tabs .nav-link,
a.tab,
.tab-item {
  border-radius: 999px;
  color: var(--x-dim);
}
.nav-tabs .nav-link.active,
.tabs .nav-link.active,
a.tab.active,
.tab-item.active {
  background: var(--x-accent) !important;
  color: #04121c !important;
  font-weight: 700;
}

/* ---------- 卡片 ---------- */
.url-card,
a.card.no-c {
  background: var(--x-card) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: var(--x-radius) !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.url-card:hover,
a.card.no-c:hover {
  background: var(--x-card-hover) !important;
  border-color: rgba(56, 189, 248, .55) !important;
  transform: translateY(-2px);
}
.url-card .t-text,
.url-card .card-body,
a.card.no-c .t-text {
  color: var(--x-text) !important;
}
.url-card .t-text .text-secondary,
.url-card small,
a.card.no-c small {
  color: var(--x-dim) !important;
}
.url-card img,
a.card.no-c img {
  border-radius: 10px;
}

/* ---------- 分类标题 ---------- */
.tab-title,
.category-title,
h4.text-gray,
.content-body h4 {
  color: var(--x-text) !important;
  font-weight: 700;
}

/* ---------- 页脚 ---------- */
.main-footer {
  background: transparent !important;
  border-top: 1px solid var(--x-line);
}
.footer-text {
  color: var(--x-dim) !important;
}
.footer-text a {
  color: var(--x-accent) !important;
}
.x-icp {
  color: var(--x-dim);
  margin-left: 8px;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #223040;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #2c3e52; }

/* ---------- 顺手把原站的圆角浮动按钮统一一下 ---------- */
#footer-tools .btn {
  background: var(--x-card) !important;
  border: 1px solid var(--x-line) !important;
  color: var(--x-text) !important;
}
#footer-tools .btn:hover {
  border-color: var(--x-accent) !important;
  color: var(--x-accent) !important;
}

/* 顶部那个原站 LOGO 直接整块不显示（手机端另说） */
html body .navbar-brand { display: none !important; }

/* 头图别留那么大空白 */
html body .header-big {
  height: auto !important;
  min-height: 0 !important;
  padding: 34px 0 18px !important;
}
html body .header-big .s-search { padding-bottom: 0 !important; }

/* 分类小标签（.nav-pills 那种）选中态也用主色 */
html body .nav-pills .nav-link,
html body .slider_menu .nav-link {
  border-radius: 999px;
  color: var(--x-dim);
}
html body .nav-pills .nav-link.active,
html body .slider_menu .nav-link.active {
  background: var(--x-accent) !important;
  color: #04121c !important;
  font-weight: 700;
}
html body .nav-pills .nav-link:hover,
html body .slider_menu .nav-link:hover {
  color: var(--x-accent);
}