/* ============================================================================
   简约蓝 · 卡片主题  theme-dark.css
   ----------------------------------------------------------------------------
   暗色模式。三态切换（跟随系统 / 亮色 / 暗色）由 js/theme.js 负责，
   它把最终结果写到 <html data-wh="light|dark">，本文件只处理 dark 分支。

   色值取自 ikam.cn 的 theme-mode.css（--jan-* 变量），这里改名为 --wh-*，
   并统一收在 html[data-wh="dark"] 作用域内 —— 用私有属性而不是原站的
   data-theme，是为了不和站点上其它配色插件（例如 theme_palette 用的
   html[data-theme]）互相打架。

   只写「变色」，不写尺寸：布局完全由 theme.css 决定，两套皮肤共用一套骨架。
   ============================================================================ */

html[data-wh="dark"] {
	--wh-body-bg: #171a1f;
	--wh-surface: #22262d;
	--wh-surface-muted: #2b3038;
	--wh-text: #e7eaee;
	--wh-text-muted: #aeb7c2;
	--wh-border: #414955;
	--wh-link: #8db7eb;
	--wh-input: #1d2127;
	--wh-input-border: #4d5866;
	--wh-code: #1b1f25;
	--wh-nav-bg: #111418;
	--wh-shadow: rgba(0, 0, 0, .35);
	color-scheme: dark;
}

/* ---------- 底色与文字 ---------- */
html[data-wh="dark"] body {
	color: var(--wh-text);
	background-color: var(--wh-body-bg);
	/* 底纹图保留（theme.css 里 background-image 走 --wh-body-bg-img）：
	   multiply 让浅色涂鸦纹理乘上深色底，图案隐约可见、不刺眼。 */
	background-blend-mode: multiply;
}
html[data-wh="dark"] a,
html[data-wh="dark"] a:link,
html[data-wh="dark"] a:visited { color: var(--wh-link); }
html[data-wh="dark"] a:hover { color: #a8cbf5; }
html[data-wh="dark"] a.btn { color: #fff; }
html[data-wh="dark"] .text-grey,
html[data-wh="dark"] .text-gray,
html[data-wh="dark"] .text-muted,
html[data-wh="dark"] .blockquote-footer { color: var(--wh-text-muted) !important; }

/* ---------- 卡片 ---------- */
html[data-wh="dark"] .card,
html[data-wh="dark"] .modal-content,
html[data-wh="dark"] .dropdown-menu,
html[data-wh="dark"] .list-group-item,
html[data-wh="dark"] .bg-white {
	color: var(--wh-text);
	background-color: var(--wh-surface) !important;
	box-shadow: 0 1px 3px var(--wh-shadow);
}
html[data-wh="dark"] .card-header,
html[data-wh="dark"] .card-footer,
html[data-wh="dark"] .bg-light,
html[data-wh="dark"] .breadcrumb,
html[data-wh="dark"] .input-group-text {
	color: var(--wh-text);
	background-color: var(--wh-surface-muted) !important;
	border-color: var(--wh-border);
}
/* 黑底白字兜底（2026-10-12）：开启背景图后，ws_hifi_theme_bg_style() 会给
   .card>.card-header 和选中的切换页签输出一条浅色渐变 background-image ——
   那是亮色皮肤专属的，暗色只覆盖 background-color 压不住 background-image，
   浅灰渐变（92% 不透明）直接盖在头部上 → 卡片头部文字看不清。
   这里统一清掉背景图；头部底色/文字色由上面 surface-muted + --wh-text 接管。
   注：内联 <style>（bg_style）在本文件之后输出，故必须带 !important。 */
html[data-wh="dark"] .card-header,
html[data-wh="dark"] .card-header-tabs > .nav-item > .nav-link.active {
	background-image: none !important;
}
html[data-wh="dark"] .breadcrumb:hover { background-color: #333a43 !important; }
html[data-wh="dark"] .card-header:after { background-color: var(--wh-text-muted); }
html[data-wh="dark"] .card.card-threadlist:after { background-color: var(--wh-surface); }

/* ---------- 表单 / 表格 / 代码 ---------- */
html[data-wh="dark"] .form-control,
html[data-wh="dark"] .custom-select,
html[data-wh="dark"] .page-link {
	color: var(--wh-text);
	background-color: var(--wh-input);
	border-color: var(--wh-input-border);
}
html[data-wh="dark"] .form-control::placeholder { color: var(--wh-text-muted); }
html[data-wh="dark"] .form-control:disabled,
html[data-wh="dark"] .form-control[readonly] { background-color: var(--wh-surface-muted); }
html[data-wh="dark"] .table,
html[data-wh="dark"] .table th,
html[data-wh="dark"] .table td,
html[data-wh="dark"] hr { color: var(--wh-text); border-color: var(--wh-border); }
html[data-wh="dark"] pre,
html[data-wh="dark"] code,
html[data-wh="dark"] .message blockquote {
	color: var(--wh-text);
	background-color: var(--wh-code);
}
html[data-wh="dark"] .progress { background-color: var(--wh-surface-muted) !important; }
html[data-wh="dark"] .progress-bar { background-color: #3569a8; }

/* ---------- 按钮 ---------- */
html[data-wh="dark"] .btn-primary,
html[data-wh="dark"] .btn-secondary,
html[data-wh="dark"] .btn-success,
html[data-wh="dark"] .btn-danger,
html[data-wh="dark"] .btn-info,
html[data-wh="dark"] .btn-dark { color: #fff !important; }
html[data-wh="dark"] .btn-primary { background-color: #252a30; border-color: #3b424b; }
html[data-wh="dark"] .btn-primary:hover,
html[data-wh="dark"] .btn-primary:focus,
html[data-wh="dark"] .btn-primary:active { background-color: #333a43; border-color: #4a535e; }
html[data-wh="dark"] .btn-secondary { background-color: rgba(0, 0, 0, .32); border-color: transparent; }
html[data-wh="dark"] .btn-light { color: var(--wh-text) !important; background-color: var(--wh-surface-muted) !important; border-color: var(--wh-border) !important; }
html[data-wh="dark"] .btn-light:hover,
html[data-wh="dark"] .btn-light:focus,
html[data-wh="dark"] .btn-light:active { background-color: #353c46 !important; border-color: var(--wh-border) !important; }
html[data-wh="dark"] .btn-warning,
html[data-wh="dark"] .btn-light { color: #212529 !important; }
html[data-wh="dark"] .btn-outline-primary { color: #9cc7c0; border-color: #52736d; }
html[data-wh="dark"] .btn-outline-primary:hover,
html[data-wh="dark"] .btn-outline-primary:focus,
html[data-wh="dark"] .btn-outline-primary:active { color: #fff !important; background-color: #333a43; border-color: #4a535e; }
html[data-wh="dark"] .btn-outline-secondary { color: var(--wh-text-muted); border-color: var(--wh-border); }
html[data-wh="dark"] .btn-outline-secondary:hover,
html[data-wh="dark"] .btn-outline-secondary:focus { color: var(--wh-text); background-color: #333a43; border-color: var(--wh-border); }
html[data-wh="dark"] .btn-outline-danger { color: #e0a0a8; border-color: #8d4b55; }

/* ---------- 列表 / 分隔线 / 小标签 ---------- */
html[data-wh="dark"] .thread,
html[data-wh="dark"] .post,
html[data-wh="dark"] .jan-hr { border-color: var(--wh-border) !important; }
html[data-wh="dark"] .thread:hover { background-color: rgba(255, 255, 255, .04); border-left-color: #5a6570; }
html[data-wh="dark"] .badge,
html[data-wh="dark"] .label { color: var(--wh-text) !important; background-color: var(--wh-surface-muted); border-color: var(--wh-border); }
html[data-wh="dark"] .comment-o { background: #3b424b; color: #dfe5ec; }
html[data-wh="dark"] .ratc { border-bottom-color: var(--wh-border); }
html[data-wh="dark"] .blockquote { background-color: var(--wh-surface-muted); }
html[data-wh="dark"] #taghot li a,
html[data-wh="dark"] #tag li a { color: #c4cbd3 !important; background-color: #2b3036 !important; border: 1px solid #414952; border-radius: 3px; }
html[data-wh="dark"] #taghot li a:hover,
html[data-wh="dark"] #tag li a:hover { color: #e7f3f0 !important; background-color: #3a414a !important; border-color: #5a6570; }
html[data-wh="dark"] .wh-re-list li + li { border-top-color: var(--wh-border); }
html[data-wh="dark"] .wh-re-list li .wh-re-idx { background: #333a43; color: var(--wh-text-muted); }
html[data-wh="dark"] .wh-re-list li .wh-re-body a { color: var(--wh-text); }
html[data-wh="dark"] .wh-re-list li .wh-re-body a:hover { color: var(--wh-link); }
html[data-wh="dark"] .wh-re-list li .wh-re-meta { color: var(--wh-text-muted); }
/* 帖子页左列「相关推荐」卡（▶ 图标 + 单行标题 + 右侧日期） */
html[data-wh="dark"] .wh-relate-main .card-title b { color: var(--wh-text); }
html[data-wh="dark"] .wh-relate-main .card-title:after { background: var(--wh-text-muted); }
html[data-wh="dark"] .wh-relate-main .wh-relate-grid li { border-bottom-color: var(--wh-border); }
html[data-wh="dark"] .wh-relate-main .wh-relate-grid li:before { color: var(--wh-text-muted); }
html[data-wh="dark"] .wh-relate-main .wh-relate-grid a { color: var(--wh-text); }
html[data-wh="dark"] .wh-relate-main .wh-relate-grid a:hover { color: var(--wh-link); }
html[data-wh="dark"] .wh-relate-main .wh-relate-date { color: var(--wh-text-muted); }
html[data-wh="dark"] .alert-light,
html[data-wh="dark"] .alert-secondary { color: var(--wh-text); background-color: var(--wh-surface-muted); border-color: var(--wh-border); }

/* ---------- 顶栏 / 页脚 ---------- */
html[data-wh="dark"] #header.navbar-dark.bg-dark { background-color: var(--wh-nav-bg) !important; }
/* 页脚与顶栏同色（--wh-nav-bg 在暗色下是 #111418），theme.css 里的
   「#footer.bg-dark + !important」必须同样带 !important 才压得住。 */
html[data-wh="dark"] #footer.bg-dark { background-color: var(--wh-nav-bg) !important; }
html[data-wh="dark"] #footer a,
html[data-wh="dark"] #footer a.text-muted,
html[data-wh="dark"] #footer .text-muted { color: rgba(255, 255, 255, .62) !important; }
html[data-wh="dark"] #footer a:hover,
html[data-wh="dark"] #footer a.text-muted:hover { color: #fff !important; }
html[data-wh="dark"] .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(231,234,238,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-wh="dark"] .nav-link.active,
html[data-wh="dark"] .dropdown-toggle { color: var(--wh-text) !important; }
/* 切换栏（nav-tabs）选中态：不换背景，文字变链接色 + 底部短横线。
   specificity 高于上一条，压掉它给 .nav-link.active 的 --wh-text。 */
html[data-wh="dark"] .nav-tabs > .nav-item > .nav-link { color: var(--wh-text-muted); background: transparent; }
html[data-wh="dark"] .nav-tabs > .nav-item > .nav-link:hover,
html[data-wh="dark"] .nav-tabs > .nav-item > .nav-link.active { color: var(--wh-link, #7fa8dc) !important; background: transparent !important; }
html[data-wh="dark"] .nav-tabs > .nav-item > .nav-link::after { background: var(--wh-link, #7fa8dc); }

/* ---------- 签到面板（iqismart_com_sign）---------- */
html[data-wh="dark"] .mibbs_con .mibbs_signpanel { background-color: #252a30 !important; background-image: none !important; }
html[data-wh="dark"] .mibbs_con .mibbs_signpanel .font { color: #e5f3f0; }
html[data-wh="dark"] .mibbs_con .mibbs_signpanel .fblock { color: var(--wh-text-muted); background-color: var(--wh-surface-muted); }
html[data-wh="dark"] .mibbs_con .mibbs_signpanel .fblock .all,
html[data-wh="dark"] .mibbs_con .mibbs_signpanel .fblock .line { background-image: none !important; border-color: var(--wh-border); }

/* ---------- 首页顶部搜索卡：暗色下压掉亮色渐变/自定义底图，交给卡片底色 ---------- */
html[data-wh="dark"] .wh-search-card { background-image: none !important; }

/* ---------- 图文卡片列表（暗色）---------- */
html[data-wh="dark"] li.wh-card {
	background-color: var(--wh-surface) !important;
	box-shadow: 0 1px 3px var(--wh-shadow);
}
html[data-wh="dark"] li.wh-card:hover { box-shadow: 1px 1px 8px 3px rgba(0, 0, 0, .55); }
html[data-wh="dark"] .wh-card-img { background-color: var(--wh-surface-muted); }
html[data-wh="dark"] .wh-card-title,
html[data-wh="dark"] .wh-card-meta { color: var(--wh-text); }
html[data-wh="dark"] .wh-card-meta .username { color: var(--wh-text) !important; }
html[data-wh="dark"] .wh-card-meta .date { color: var(--wh-text-muted); }
html[data-wh="dark"] .wh-card-meta a { color: var(--wh-text); }
html[data-wh="dark"] .wh-card-meta a:hover { color: var(--wh-link); }
html[data-wh="dark"] .wh-card-img img { opacity: .88; filter: brightness(.88) saturate(.9); }

/* ---------- 右侧排行列表（zaesky_threadrank：总排行 / 周排行 / 版块热门）----------
   「版块热门」（forum_mod_after + thread_user_after 两处）的标题链接带内联
   style="color:#343a40"（亮色模式的深灰字），暗色下内联样式优先级最高 →
   深底深字看不清。这里带 !important 压过内联样式，颜色对齐总排行的链接色。 */
html[data-wh="dark"] .card .site-top .site-list-ul li a {
	color: var(--wh-link) !important;
}
html[data-wh="dark"] .card .site-top .site-list-ul li a:hover {
	color: #a8cbf5 !important;
}

/* ---------- 图片柔和化（暗底上不刺眼）---------- */
html[data-wh="dark"] .message img { filter: brightness(.78) saturate(.88); }
html[data-wh="dark"] .avatar-1,
html[data-wh="dark"] .avatar-3,
html[data-wh="dark"] .avatar-4,
html[data-wh="dark"] .avatar-5 { opacity: .84; filter: brightness(.86) saturate(.9); }
html[data-wh="dark"] .card-forum-info .logo-5 { opacity: .82; filter: brightness(.82) saturate(.9); }
html[data-wh="dark"] .card-thread .media { background-blend-mode: multiply; background-color: rgba(17, 20, 24, .72); }

/* ---------- 表情 / 代码块 / 弹层 ---------- */
html[data-wh="dark"] .emotion { color: var(--wh-text-muted); }
html[data-wh="dark"] .qqFace { background-color: var(--wh-surface) !important; border-color: var(--wh-border) !important; box-shadow: 0 2px 8px var(--wh-shadow); }
html[data-wh="dark"] .qqFace table td img { opacity: .82; filter: brightness(.9) saturate(.9); border-color: var(--wh-border); }
html[data-wh="dark"] .message [style*="background-color"],
html[data-wh="dark"] .message [style*="background:"] { background-color: var(--wh-surface) !important; }
html[data-wh="dark"] .message [style*="color: #0f1115"],
html[data-wh="dark"] .message [style*="color:#0f1115"],
html[data-wh="dark"] .message [style*="color: #343541"],
html[data-wh="dark"] .message [style*="color:#343541"] { color: var(--wh-text) !important; }
html[data-wh="dark"] .message .md-code-block,
html[data-wh="dark"] .message .md-code-block-light { color: var(--wh-text) !important; background: var(--wh-code) !important; border-color: var(--wh-border) !important; }
html[data-wh="dark"] .input-group input[readonly] { color: var(--wh-text) !important; background-color: var(--wh-input) !important; }

/* ---------- 主题切换按钮 / 回到顶部 ---------- */
html[data-wh="dark"] .theme-toggle { color: var(--wh-text-muted); }
html[data-wh="dark"] .theme-toggle:hover,
html[data-wh="dark"] .theme-toggle:focus { color: var(--wh-text); }
html[data-wh="dark"] .wh-back-top { background: rgba(255, 255, 255, .14); }
html[data-wh="dark"] .read_full_screen { color: var(--wh-text-muted); }

/* 跟随系统时的过渡更柔和；但不要在切换瞬间给全站加 transition（会卡） */
html[data-wh] { transition: background-color .2s ease, color .2s ease; }

/* 文字列表行首的版块小方块 */
html[data-wh="dark"] .wh-sq-name { color: var(--wh-text-muted) !important; }
html[data-wh="dark"] .wh-sq-name:hover { color: var(--wh-link-hover) !important; }