/* ============================================================
   AI 主题换肤  themes.css  v1.1
   4 套配色来自《AI交流网站界面与配色设计建议.html》：
     dark 深空靛蓝 / light 洁净白紫 / sunny 阳光活力 / mono 极简墨黑
   另有「默认模板」选项：移除 data-theme，还原网站原始外观。
   通过 html[data-theme=xxx] 作用域隔离，不影响后台及其它插件。
   ============================================================ */

/* ------------------------------------------------------------
   布局级修复（不依赖 data-theme）
   #header 必须建立高于正文的层叠上下文，否则导航栏里的
   主题下拉面板会被下方内容盖住（默认模板模式下也要生效）。
   ------------------------------------------------------------ */
#header.navbar,
header.navbar {
	position: relative;
	z-index: 1050;
}

/* 切换主题时给全局过渡（避免生硬突变） */
html.theme-anim body,
html.theme-anim .navbar,
html.theme-anim .card,
html.theme-anim .btn,
html.theme-anim a,
html.theme-anim .plugin_list {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* ============================================================
   1. dark 深空靛蓝（暗色 · 推荐默认）
   ------------------------------------------------------------ */
html[data-theme="dark"] {
	--tp-bg1: #0b1120;            /* --bg */
	--tp-bg2: #0f1729;            /* --bg-soft */
	--tp-surface: #141d33;        /* --card */
	--tp-surface2: #182341;       /* --card-hover */
	--tp-border: #22304d;         /* --border */
	--tp-text: #e7edf7;           /* --text */
	--tp-muted: #92a1bf;          /* --text-soft */
	--tp-primary: #7c8cff;        /* --primary */
	--tp-primary2: #92a0ff;       /* --primary-strong */
	--tp-hover: rgba(124,140,255,.14); /* --primary-soft */
	--tp-accent: #24d3ee;         /* --accent */
	--tp-navbg: #0d1426;          /* --nav */
	--tp-navtext: #a9b4cc;
	--tp-navhover: #24d3ee;
	--tp-radius: 12px;
	--tp-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ============================================================
   2. light 洁净白紫（浅色）
   ------------------------------------------------------------ */
html[data-theme="light"] {
	--tp-bg1: #f5f6fb;
	--tp-bg2: #eef0f8;
	--tp-surface: #ffffff;
	--tp-surface2: #f8f9ff;
	--tp-border: #e3e6f0;
	--tp-text: #1c2333;
	--tp-muted: #67718c;
	--tp-primary: #6e5bd6;
	--tp-primary2: #5a47c4;
	--tp-hover: #efeafc;
	--tp-accent: #0a9e98;
	--tp-navbg: #6e5bd6;          /* 导航用主色：网站 logo/图标为白色，纯白导航会导致 logo 消失 */
	--tp-navtext: rgba(255,255,255,.88);
	--tp-navhover: #ffffff;
	--tp-radius: 12px;
	--tp-shadow: 0 8px 24px rgba(110,91,214,.12);
}

/* ============================================================
   3. sunny 阳光活力（暖色浅底）
   ------------------------------------------------------------ */
html[data-theme="sunny"] {
	--tp-bg1: #fff6ef;
	--tp-bg2: #ffece0;
	--tp-surface: #ffffff;
	--tp-surface2: #fffaf5;
	--tp-border: #f2e0d3;
	--tp-text: #332416;
	--tp-muted: #8d7a66;
	--tp-primary: #f25f33;
	--tp-primary2: #dd4f25;
	--tp-hover: #ffe9df;
	--tp-accent: #8b5cf6;
	--tp-navbg: #f25f33;
	--tp-navtext: rgba(255,255,255,.92);
	--tp-navhover: #ffffff;
	--tp-radius: 12px;
	--tp-shadow: 0 8px 24px rgba(242,95,51,.14);
}

/* ============================================================
   4. mono 极简墨黑（浅色）
   ------------------------------------------------------------ */
html[data-theme="mono"] {
	--tp-bg1: #fafaf8;
	--tp-bg2: #f1f1ec;
	--tp-surface: #ffffff;
	--tp-surface2: #f7f7f4;
	--tp-border: #e9e7e0;
	--tp-text: #191917;
	--tp-muted: #75736b;
	--tp-primary: #161615;
	--tp-primary2: #000000;
	--tp-hover: #ecebe5;
	--tp-accent: #a8862e;
	--tp-navbg: #161615;
	--tp-navtext: rgba(255,255,255,.85);
	--tp-navhover: #ffffff;
	--tp-radius: 12px;
	--tp-shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* ============================================================
   基础作用域：把 CSS 变量应用到默认模板组件
   （选「默认模板」时 data-theme 被移除，以下全部不生效 → 原始外观）
   ============================================================ */
html[data-theme] body {
	background: linear-gradient(160deg, var(--tp-bg1) 0%, var(--tp-bg2) 100%) fixed no-repeat;
	background-color: var(--tp-bg1);
	color: var(--tp-text);
}

/* 顶部柔和光晕装饰（轻量，不干扰阅读） */
html[data-theme] body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(1200px 500px at 12% -8%, var(--tp-primary), transparent 60%),
		radial-gradient(900px 420px at 88% -12%, var(--tp-accent), transparent 60%);
	opacity: .18;
	filter: blur(2px);
}

/* 让内容站到光晕之上（#header 的层级修复已在顶部无条件生效） */
html[data-theme] #body,
html[data-theme] footer,
html[data-theme] main {
	position: relative;
	z-index: 1;
}

/* 导航栏 */
html[data-theme] #header.navbar,
html[data-theme] header.navbar {
	background: var(--tp-navbg) !important;
	box-shadow: 0 2px 14px rgba(0,0,0,.2);
}
html[data-theme] #header a.nav-link,
html[data-theme] #header .navbar-brand {
	color: var(--tp-navtext);
}
html[data-theme] #header a.nav-link:hover {
	color: var(--tp-navhover);
}

/* 卡片 */
html[data-theme] .card {
	background: var(--tp-surface);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	box-shadow: var(--tp-shadow);
	color: var(--tp-text);
}
html[data-theme] .card-header,
html[data-theme] .card-footer {
	background: var(--tp-surface2);
	border-color: var(--tp-border);
	color: var(--tp-text);
}

/* 通用文字 */
html[data-theme] body,
html[data-theme] .card h1,
html[data-theme] .card h2,
html[data-theme] .card h3,
html[data-theme] .card h4,
html[data-theme] .text-grey {
	color: inherit;
}
html[data-theme] .text-muted {
	color: var(--tp-muted) !important;
}
html[data-theme] a {
	color: var(--tp-accent);
}
html[data-theme] a:hover {
	color: var(--tp-accent);
	text-decoration: none;
}

/* 主按钮 */
html[data-theme] .btn-primary {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary2));
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	border-radius: 10px;
}
html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus {
	background: linear-gradient(135deg, var(--tp-primary2), var(--tp-primary));
	box-shadow: 0 4px 18px var(--tp-hover);
	color: #fff;
}

/* 分页 */
html[data-theme] .pagination .page-item.active .page-link {
	background: var(--tp-primary);
	border-color: var(--tp-primary);
}
html[data-theme] .pagination .page-link {
	background: var(--tp-surface2);
	border-color: var(--tp-border);
	color: var(--tp-text);
}

/* ============================================================
   ws_theme_pic 图文列表卡片美化（开启图文列表时自动接管）
   ============================================================ */
html[data-theme] ul.cols li.plugin_list {
	background: var(--tp-surface);
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius) !important;
	overflow: hidden;
	box-shadow: var(--tp-shadow);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
html[data-theme] ul.cols li.plugin_list:hover {
	transform: translateY(-4px);
	border-color: var(--tp-primary) !important;
	box-shadow: 0 12px 32px var(--tp-hover);
}
html[data-theme] .img_wap {
	border-radius: var(--tp-radius);
	overflow: hidden;
	height: 0;
}
html[data-theme] li.plugin_list a > p {
	color: var(--tp-text) !important;
}
html[data-theme] li.plugin_list span.username,
html[data-theme] li.plugin_list span.date {
	color: var(--tp-muted) !important;
}

/* ============================================================
   面包屑 breadcrumb 背景 + 文字（版块列表 / 帖子详情 / 各处）
   ============================================================ */
html[data-theme] .breadcrumb {
	background: var(--tp-surface) !important;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	padding: .6rem 1rem;
}
html[data-theme] .breadcrumb-item + .breadcrumb-item::before {
	color: var(--tp-muted);
}
html[data-theme] .breadcrumb-item a {
	color: var(--tp-muted);
}
html[data-theme] .breadcrumb-item a:hover {
	color: var(--tp-accent);
}
html[data-theme] .breadcrumb-item.active {
	color: var(--tp-text);
}

/* ============================================================
   右侧「版块热门」列表（zaesky_threadrank 内联深色文字需 !important）
   版块列表(forum_mod_after) 与 帖子详情(thread_user_after) 共用 .site-list-ul
   ============================================================ */
html[data-theme] .site-top .site-list-ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
html[data-theme] .site-top .site-list-ul li {
	padding: .45rem 0;
	border-bottom: 1px dashed var(--tp-border);
	line-height: 1.4;
}
html[data-theme] .site-top .site-list-ul li:last-child {
	border-bottom: none;
}
html[data-theme] .site-top .site-list-ul li a {
	color: var(--tp-text) !important;      /* 覆盖内联 #343a40 */
	font-size: 13px !important;
	display: inline;
}
html[data-theme] .site-top .site-list-ul li a:hover {
	color: var(--tp-accent) !important;
}
html[data-theme] .site-top .site-list-ul .top_span_red {
	color: var(--tp-primary) !important;
	font-weight: 700;
	margin-right: .5rem;
}
html[data-theme] .site-top .site-list-ul .top_span_gray {
	color: var(--tp-muted);
	margin-right: .5rem;
}

/* ============================================================
   个人中心左侧菜单  #my_aside
   ============================================================ */
html[data-theme] #my_aside .card {
	background: var(--tp-surface);
	border-color: var(--tp-border);
}
html[data-theme] #my_aside .card .card-body {
	color: var(--tp-text);
}
html[data-theme] #my_aside .list-group-item {
	background: var(--tp-surface2);
	border-color: var(--tp-border);
	color: var(--tp-text);
}
html[data-theme] #my_aside .list-group-item:hover {
	background: var(--tp-hover);
	color: var(--tp-accent);
}
html[data-theme] #my_aside .list-group-item.active,
html[data-theme] #my_aside .list-group-item-action.active {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary2));
	border-color: transparent;
	color: #fff !important;
}
/* 个人中心移动端顶部横向菜单 */
html[data-theme] #my_mobile_nav .btn {
	background: var(--tp-surface2);
	border-color: var(--tp-border);
	color: var(--tp-text);
}

/* ============================================================
   通用文字清晰化：深灰/浅灰文字在暗色下看不清，统一接管
   ============================================================ */
html[data-theme] .text-dark {
	color: var(--tp-text) !important;
}
html[data-theme] .text-secondary {
	color: var(--tp-muted) !important;
}
/* 语义色：暗色下用亮红，浅色主题下用深红，保证可读 */
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .text-danger * {
	color: #ff7a90 !important;
}
html[data-theme="light"] .text-danger,
html[data-theme="sunny"] .text-danger,
html[data-theme="mono"] .text-danger,
html[data-theme="light"] .text-danger *,
html[data-theme="sunny"] .text-danger *,
html[data-theme="mono"] .text-danger * {
	color: #d93036 !important;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5,
html[data-theme] .card-title,
html[data-theme] .card-header .card-title {
	color: var(--tp-text);
}
html[data-theme] .card-text,
html[data-theme] .thread-content,
html[data-theme] .thread-content p {
	color: var(--tp-text);
}
html[data-theme] .list-group-item {
	background: var(--tp-surface2);
	border-color: var(--tp-border);
	color: var(--tp-text);
}
html[data-theme] .list-unstyled .media,
html[data-theme] .threadlist > li {
	color: var(--tp-text);
}

/* ============================================================
   主题切换器 UI（不依赖 data-theme，「默认模板」模式下也可用）
   ============================================================ */
.tp-switch {
	position: relative;
	margin-left: .5rem;
}
.tp-switch > a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #c9cede;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: .3rem .6rem;
	cursor: pointer;
	transition: all .2s ease;
}
html[data-theme] .tp-switch > a {
	color: var(--tp-navtext, #c9cede);
}
.tp-switch > a:hover {
	border-color: rgba(124,140,255,.45);
	color: #ffffff;
}
html[data-theme] .tp-switch > a:hover {
	color: var(--tp-navhover, #fff);
}
.tp-switch > a .tp-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: conic-gradient(from 180deg, #7c8cff, #6e5bd6, #f25f33, #161615, #7c8cff);
	border: 2px solid rgba(255,255,255,.35);
	flex: none;
}

.tp-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 230px;
	background: var(--tp-surface, #141d33);
	border: 1px solid var(--tp-border, #22304d);
	border-radius: 14px;
	padding: 10px;
	box-shadow: var(--tp-shadow, 0 8px 24px rgba(0,0,0,.35));
	display: none;
	z-index: 2000;          /* 位于 #header(z:1050) 层叠上下文内，压过一切内部元素 */
}
.tp-panel.tp-open {
	display: block;
}
html[data-theme="light"] .tp-panel,
html[data-theme="sunny"] .tp-panel,
html[data-theme="mono"] .tp-panel {
	color: var(--tp-text);
}
.tp-panel-title {
	font-size: 12px;
	opacity: .7;
	margin: 4px 6px 8px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--tp-muted, #92a1bf);
}
.tp-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	color: var(--tp-text, #e7edf7);
	transition: background .2s ease;
}
html[data-theme="light"] .tp-opt,
html[data-theme="sunny"] .tp-opt,
html[data-theme="mono"] .tp-opt {
	color: var(--tp-text);
}
html[data-theme="dark"] .tp-opt { color: var(--tp-text); }
.tp-opt:hover {
	background: var(--tp-hover, rgba(124,140,255,.14));
}
html[data-theme="dark"] .tp-opt:hover { background: var(--tp-hover); }
.tp-opt.tp-active {
	background: var(--tp-hover, rgba(124,140,255,.14));
	outline: 1px solid var(--tp-primary, #7c8cff);
}
.tp-opt .tp-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(127,127,127,.45);   /* 白色系色卡在浅色面板上也要可见 */
	flex: none;
}
.tp-opt .tp-label {
	flex: 1;
}
.tp-opt .tp-check {
	color: var(--tp-accent, #24d3ee);
	font-weight: 700;
	opacity: 0;
}
html[data-theme="light"] .tp-opt .tp-check,
html[data-theme="sunny"] .tp-opt .tp-check,
html[data-theme="mono"] .tp-opt .tp-check {
	color: var(--tp-accent);
}
.tp-opt.tp-active .tp-check {
	opacity: 1;
}