/* --- CSS 变量 --- */
:root {
	/* --- 亮色主题 (默认) --- */
	--primary-color: #5a88ff;
	/* 主要颜色 (蓝色) */
	--secondary-color: #677987;
	/* 次要颜色 (灰色) */
	--success-color: #2ecc71;
	/* 成功颜色 (绿色) */
	--danger-color: #e74c3c;
	/* 危险颜色 (红色) */
	--warning-color: #f39c12;
	/* 警告颜色 (橙色) */
	--info-color: #3498db;
	/* 信息颜色 (亮蓝) - 复用新CSS中的颜色 */
	--background-color: #ffffff;
	/* 背景色 (白色) */
	--text-color: #333333;
	/* 主要文本颜色 (深灰) */
	--light-text-color: #ffffff;
	/* 浅色文本 (用于深色背景) */
	--border-color: #e0e0e0;
	/* 边框颜色 (浅灰) */
	--header-bg-color: #ffffff;
	/* 页头背景 */
	--input-bg-color: #ffffff;
	/* 输入框背景 */
	--input-text-color: #333333;
	/* 输入框文字 */
	--card-bg-color: #ffffff;
	/* 卡片背景 */
	--card-header-bg-color: #f8f9fa;
	/* 卡片头部背景 */
	--dropdown-bg-color: #ffffff;
	/* 下拉菜单背景 */
	--shadow-color: rgba(0, 0, 0, 0.1);
	/* 阴影 */
	--focus-shadow-color: rgba(90, 136, 255, 0.2);
	/* 聚焦阴影 */
	--alert-bg-default: #f8f9fa;
	/* 默认消息背景 */
	--alert-border-default: #e0e0e0;
	/* 默认消息边框 */

	--hover-primary-color: #4a78e0;
	/* 主要颜色悬停 */
	--hover-secondary-color: #556470;
	/* 次要颜色悬停 */
	--hover-success-color: #27ae60;
	/* 成功颜色悬停 */
	--hover-danger-color: #c0392b;
	/* 危险颜色悬停 */

	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--header-height: 70px;
	/* 顶栏高度 */
	--border-radius: 5px;
	/* 圆角 */
	--card-border-radius: 8px;
	/* 卡片圆角 (来自新CSS) */

	--footer-bg-color: #fff;

	--glass-background-color: rgba(236, 242, 255, 0.6);

	--base-background-blur: 20px;
	--background-blur-coefficient: 1;

	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}

	/* 滚动条轨道样式 */

	::-webkit-scrollbar-track {
		background: var(--header-bg-color); /* 轨道颜色 */
		transition: all 0.3s ease;
	}

	/* 滚动条滑块样式 */

	::-webkit-scrollbar-thumb {
		background: var(--secondary-color); /* 滑块颜色 */
		transition: all 0.3s ease;
	}

	/* 滑块在悬停时的颜色 */

	::-webkit-scrollbar-thumb:hover {
		background: var(--hover-secondary-color); /* 悬停时滑块颜色 */
		transition: all 0.3s ease;
	}
}


/* --- 暗色主题变量 (通过 JS 添加 .dark-mode 类到 html 来激活) --- */
html.dark-mode {
	--primary-color: #5a88ff;
	--secondary-color: #a9b4bd;
	--success-color: #2ecc71;
	/* 绿色在暗色下通常还行 */
	--danger-color: #e74c3c;
	/* 红色在暗色下通常还行 */
	--warning-color: #f39c12;
	/* 橙色在暗色下通常还行 */
	--info-color: #5dade2;
	/* 亮蓝色暗模式下稍亮 */
	--background-color: #101314;
	--text-color: #f0f0f0;
	--light-text-color: #ffffff;
	--border-color: #3a3f44;
	--header-bg-color: #101314;
	--input-bg-color: #1f2327;
	--input-text-color: #f0f0f0;
	--card-bg-color: #1a1d20;
	/* 卡片背景 (暗) */
	--card-header-bg-color: #2a2f33;
	/* 卡片头部背景 (暗) */
	--dropdown-bg-color: #2a2f33;
	/* 下拉菜单背景 (暗) */
	--shadow-color: rgba(0, 0, 0, 0.4);
	--focus-shadow-color: rgba(90, 136, 255, 0.3);
	--alert-bg-default: #2a2f33;
	--alert-border-default: #3a3f44;

	--hover-primary-color: #6a98ff;
	--hover-secondary-color: #c0cad3;
	--hover-success-color: #58d68d;
	--hover-danger-color: #ec7063;

	--glass-background-color: rgba(56, 57, 61, 0.6);
	--base-background-blur: 15px;

	--footer-bg-color: #212121;
}


html.dark-mode body {
	background: var(--background-color) url('/random_bg?styles=dark') center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --- 基本重置和全局样式 --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family), serif;
	line-height: 1.6;
	color: var(--text-color);
	padding-top: var(--header-height);
	transition: background-color 0.3s ease, color 0.3s ease, backdrop-filter 2s ease;
	min-height: 100vh;
	/* 确保body至少和视口一样高 */
	display: flex;
	/* 使用 Flex 布局实现粘性页脚 */
	flex-direction: column;
	/* 背景图 */
	background: var(--background-color) url('/random_bg?styles=light') center;
	backdrop-filter: blur(calc(var(--base-background-blur) * var(--background-blur-coefficient)));
	background-repeat: no-repeat;
	background-size: cover;
}

body:has(.main-header:hover,.main-footer:hover) {
	--background-blur-coefficient: 0.65;
}

/* --- 容器 --- */
.container {
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* --- 顶栏样式 --- */
.main-header {
	background-color: var(--header-bg-color);
	height: var(--header-height);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 2px 5px var(--shadow-color);
	border-bottom: 1px solid var(--border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	/*/ / backdrop-filter: blur(64 px) saturate(0.8);*/
	/*/ / background-color: rgba(var(--background-color), 0.7);*/
	/*	backdrop-filter: blur(24px) saturate(1.2) brightness(1.1);*/
	/*	background-color: var(--glass-background-color);*/
	/*	background-image: url("/static/noise.webp");*/
}

.main-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.logo a {
	text-decoration: none;
	color: var(--primary-color);
	font-size: 1.8em;
	font-weight: bold;
	display: flex;
	align-items: center;
	transition: color 0.3s ease;
}

.logo a:hover {
	color: var(--hover-primary-color);
	text-decoration: none;
}

.logo-img {
	height: 40px;
	width: auto;
	margin-right: 10px;
	vertical-align: middle;
}

/* 导航样式 */

.navbar-nav {
	margin-left: auto;
}

.main-header .container {
	justify-content: space-between;
}

.navbar-nav ul {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	align-items: center;
}

.navbar-nav .nav-item {
	margin-left: 25px;
    margin-bottom: 0;
}

.navbar-nav .nav-item a,
.navbar-nav .nav-item .btn-link-style {
	color: var(--secondary-color);
	font-weight: 500;
	text-decoration: none;
	padding: 5px 0;
	position: relative;
	transition: color 0.3s ease;
}

.navbar-nav .nav-item a:hover,
.navbar-nav .nav-item .btn-link-style:hover,
.navbar-nav .nav-item a.active {
	color: var(--primary-color);
}

.theme-toggle-button {
    width: 42px;
}


.nav-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto;
}


/* 导航下划线 */
.navbar-nav .nav-item a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.navbar-nav .nav-item a:hover::after,
.navbar-nav .nav-item a.active::after {
	width: 100%;
}

/* 退出按钮 */
.btn-link-style {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--secondary-color);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.3s ease;
	display: inline;
	vertical-align: baseline;
}

.btn-link-style:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

/* 页头控制按钮 */
.header-controls {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

/* 图标按钮 */
.btn-icon {
	background: none;
	border: 1px solid transparent;
	color: var(--secondary-color);
	padding: 8px 10px;
	font-size: 1.2em;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
	border-radius: var(--border-radius);
	margin-left: 10px;
}

.btn-icon:hover {
	color: var(--primary-color);
	background-color: rgba(90, 136, 255, 0.1);
	border-color: transparent;
}

body.dark-mode .btn-icon:hover {
	background-color: rgba(90, 136, 255, 0.2);
}

/* 移动菜单按钮 */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.8em;
	color: var(--secondary-color);
	cursor: pointer;
	transition: color 0.3s ease;
	margin-left: 10px;
}

/* --- Django 消息样式 --- */
.messages-container {
	padding-top: 20px;
	padding-bottom: 0;
}

.alert {
	padding: 15px 20px;
	margin-bottom: 15px;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	color: var(--text-color);
	background-color: var(--alert-bg-default);
	border-color: var(--alert-border-default);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 亮色消息 */
.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

/* 使用了 info 变量中的颜色 */
.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.alert-error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

/* 暗色消息 */
body.dark-mode .alert {
	color: var(--text-color);
	background-color: var(--alert-bg-default);
	border-color: var(--alert-border-default);
}

body.dark-mode .alert-success {
	color: #c3e6cb;
	background-color: #1f3c2a;
	border-color: #2a5038;
}

body.dark-mode .alert-info {
	color: #bee5eb;
	background-color: #1b3e45;
	border-color: #2d6a76;
}

body.dark-mode .alert-warning {
	color: #ffeeba;
	background-color: #4d401c;
	border-color: #7a6c36;
}

body.dark-mode .alert-error {
	color: #f5c6cb;
	background-color: #582128;
	border-color: #8a3c45;
}

/* --- 主要内容区域 --- */
main {
	flex: 1;
	min-height: calc(100vh - var(--header-height));
}

.content-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* --- 基本元素样式 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-color);
	margin-bottom: 0.8em;
	line-height: 1.3;
	font-weight: 600;
	transition: color 0.3s ease;
}

h1 {
	font-size: 2.5em;
	color: var(--primary-color);
}

h2 {
	font-size: 2em;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.3em;
	margin-bottom: 1em;
	transition: border-color 0.3s ease;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.2em;
}

p {
	margin-bottom: 1.2em;
	color: var(--secondary-color);
	transition: color 0.3s ease;
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
	color: var(--hover-primary-color);
	text-decoration: underline;
}

ul,
ol {
	margin-bottom: 1.2em;
	padding-left: 25px;
}

ul li,
ol li {
	margin-bottom: 0.5em;
	color: var(--secondary-color);
	transition: color 0.3s ease;
}

/* --- 按钮样式 --- */
.btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 1em;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	white-space: nowrap;
}

/* 亮色按钮 */
.btn {
	background-color: var(--secondary-color);
	color: var(--light-text-color);
	border-color: var(--secondary-color);
}

.btn:hover {
	background-color: var(--hover-secondary-color);
	border-color: var(--hover-secondary-color);
	color: var(--light-text-color);
	text-decoration: none;
	box-shadow: 0 2px 5px var(--shadow-color);
}

.btn-primary {
	background-color: var(--primary-color);
	color: var(--light-text-color);
	border-color: var(--primary-color);
}

.btn-primary:hover {
	background-color: var(--hover-primary-color);
	border-color: var(--hover-primary-color);
	color: var(--light-text-color);
	text-decoration: none;
}

.btn-secondary {
	background-color: transparent;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-secondary:hover {
	background-color: var(--primary-color);
	color: var(--light-text-color);
	border-color: var(--primary-color);
	text-decoration: none;
}

/* 新增按钮类型 (亮色) */
.btn-success {
	background-color: var(--success-color);
	color: var(--light-text-color);
	border-color: var(--success-color);
}

.btn-success:hover {
	background-color: var(--hover-success-color);
	border-color: var(--hover-success-color);
	color: var(--light-text-color);
}

.btn-danger {
	background-color: var(--danger-color);
	color: var(--light-text-color);
	border-color: var(--danger-color);
}

.btn-danger:hover {
	background-color: var(--hover-danger-color);
	border-color: var(--hover-danger-color);
	color: var(--light-text-color);
}

/* 暗色按钮 */
body.dark-mode .btn {
	background-color: var(--secondary-color);
	color: var(--background-color);
	border-color: var(--secondary-color);
}

body.dark-mode .btn:hover {
	background-color: var(--hover-secondary-color);
	border-color: var(--hover-secondary-color);
	color: var(--background-color);
	box-shadow: 0 2px 5px var(--shadow-color);
}

body.dark-mode .btn-primary {
	background-color: var(--primary-color);
	color: var(--light-text-color);
	border-color: var(--primary-color);
}

body.dark-mode .btn-primary:hover {
	background-color: var(--hover-primary-color);
	border-color: var(--hover-primary-color);
	color: var(--light-text-color);
}

body.dark-mode .btn-secondary {
	background-color: transparent;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

body.dark-mode .btn-secondary:hover {
	background-color: var(--primary-color);
	color: var(--light-text-color);
	border-color: var(--primary-color);
}

/* 新增按钮类型 (暗色) */
body.dark-mode .btn-success {
	background-color: var(--success-color);
	color: var(--light-text-color);
	border-color: var(--success-color);
}

/* 文字颜色可能需要调整，如果绿色太亮 */
body.dark-mode .btn-success:hover {
	background-color: var(--hover-success-color);
	border-color: var(--hover-success-color);
	color: var(--light-text-color);
}

body.dark-mode .btn-danger {
	background-color: var(--danger-color);
	color: var(--light-text-color);
	border-color: var(--danger-color);
}

body.dark-mode .btn-danger:hover {
	background-color: var(--hover-danger-color);
	border-color: var(--hover-danger-color);
	color: var(--light-text-color);
}

/* 按钮组 */
.button-group {
	margin-top: 20px;
	margin-bottom: 20px;
}

.button-group .btn {
	margin-right: 10px;
	margin-bottom: 10px;
}

/* --- 表单样式 --- */
.form-group {
	margin-bottom: 1.5em;
}

.form-group label {
	display: block;
	margin-bottom: 0.5em;
	font-weight: 500;
	color: var(--text-color);
	transition: color 0.3s ease;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 1em;
	font-family: var(--font-family);
	background-color: var(--input-bg-color);
	color: var(--input-text-color);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
	margin-bottom: 0.8em;
	/* 添加一些底部间距 */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px var(--focus-shadow-color);
}

textarea {
	resize: vertical;
	min-height: 80px;
}

/* Django 表单错误列表 */
ul.errorlist {
	color: var(--danger-color);
	padding-left: 20px;
	margin-bottom: 0.8em;
	list-style: disc;
	font-size: 0.9em;
}

body.dark-mode ul.errorlist {
	color: var(--danger-color);
}

/* 颜色在暗色下通常也适用 */
/* Django 表单帮助文本 */
.form-text {
	color: var(--secondary-color);
	font-size: 0.9em;
	margin-top: -0.5em;
	/* 稍微向上移动一点 */
	margin-bottom: 0.8em;
	display: block;
}

/* --- 卡片组件 --- */
.card {
	border-radius: var(--card-border-radius);
	box-shadow: 0 2px 5px var(--shadow-color);
	margin-bottom: 20px;
	border: 1px solid var(--border-color);
	/* 添加边框以便在暗色模式下区分 */
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

	background-color: var(--card-bg-color);
	/*background-image: none;*/

	/*/ / backdrop-filter: blur(px) saturate(0.8);*/
	/*/ / background-color: rgba(var(--background-color), 0.7);*/
	/*	backdrop-filter: blur(24px) saturate(1.2) brightness(1.1);*/
	/*	background-color: var(--glass-background-color);*/
	/*	background-image: url("/static/noise.webp");*/
}

.card-header {
	background-color: var(--card-header-bg-color);
	padding: 15px 20px;
	border-bottom: 1px solid var(--border-color);
	border-top-left-radius: var(--card-border-radius);
	border-top-right-radius: var(--card-border-radius);
	font-weight: 600;
	/* 让头部文字加粗 */
	color: var(--text-color);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.card-body {
	padding: 20px;
}


/* 纯色卡片 */
.classic-card {
	background-color: var(--card-bg-color);
	background-image: none;
}


/* --- 下拉菜单组件 --- */
/* 下拉菜单容器 */
.dropdown {
	position: relative; /* 为绝对定位的子元素提供定位上下文 */
	display: inline-block; /* 使容器根据内容调整宽度，并能与其他内联元素同行 */
}

/* 下拉菜单本身 */
.dropdown-menu {
	position: absolute;
	top: 100%; /* 定位在触发元素的正下方 */
	right: 0; /* 右侧与父容器右侧对齐 */
	left: auto; /* 确保 right 生效 */
	background-color: var(--dropdown-bg-color);
	min-width: 160px;
	box-shadow: 0 8px 16px var(--shadow-color);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	/* display: none; */ /* 不再使用 display 控制显隐 */
	visibility: hidden;  /* 初始状态：隐藏，但保留空间，允许过渡 */
	opacity: 0;          /* 初始状态：完全透明 */
	z-index: 1001;       /* 确保在其他元素之上 (比 header 高一点) */
	padding: 5px 0;      /* 上下内边距 */
	margin-top: 8px;     /* 与触发元素增加一点间距，并用于过渡效果 */
	/* 为显隐添加过渡效果 */
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out, margin-top 0.2s ease-out, transform 0.2s ease-out;
	transform: translateY(-5px); /* 可选：初始状态稍微向上移动一点 */
	flex-direction: column;
}

/* --- 核心逻辑：悬停显示 --- */
/* 当鼠标悬停在 .dropdown 容器上时（包括按钮和已显示的菜单） */
.dropdown:hover .dropdown-menu {
	visibility: visible; /* 使其可见 */
	opacity: 1;          /* 完全不透明 */
	margin-top: 5px;     /* 恢复或设置显示时的间距 */
	transform: translateY(0); /* 可选：恢复到正常垂直位置 */
}
/* --- 核心逻辑结束 --- */


/* 下拉菜单项 */
.dropdown-item {
	display: block; /* 确保项目是块级元素，占据整行 */
	padding: 8px 15px;
	color: var(--text-color);
	text-decoration: none;
	white-space: nowrap; /* 防止文本换行 */
	clear: both; /* 理论上对块级链接不需要，但保留无害 */
	font-weight: 400;
	transition: background-color 0.2s ease, color 0.2s ease;
	/* 添加按钮重置样式，如果内部有 button 的话 */
	background: none;
	border: none;
	width: 100%; /* 让按钮填满 */
	text-align: left; /* 文本左对齐 */
	cursor: pointer; /* 手型光标 */
}

/* 菜单项悬停效果 */
.dropdown-item:hover {
	background-color: rgba(90, 136, 255, 0.1); /* 使用主色的浅色悬停 */
	color: var(--primary-color);
	text-decoration: none;
}

/* 暗黑模式下的菜单项悬停效果 */
body.dark-mode .dropdown-item:hover {
	background-color: rgba(90, 136, 255, 0.2);
}

/* 如果 dropdown-item 是一个按钮，确保它看起来像链接 */
.dropdown-menu form {
    margin: 0; /* 清除表单可能带来的外边距 */
    padding: 0; /* 清除表单可能带来的内边距 */
}
.dropdown-menu form .dropdown-item {
    /* 继承 .dropdown-item 的样式 */
    box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
}

/* --- 栅格系统 (新增基础版) --- */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

.col,
.col-md-6

/* Add more .col-* as needed */
	{
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* Example: Medium screens and up, 50% width */
@media (min-width: 768px) {
	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Add rules for .col-md-4, .col-md-8 etc. if you need them */
}

/* --- 工具类 --- */
.text-center {
	text-align: center;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mt-4 {
	margin-top: 2rem !important;
}

.mt-3 {
	margin-top: 1rem !important;
}

.ml-2 {
	margin-left: 0.5rem !important;
}

.w-100 {
	width: 100% !important;
}

.justify-content-center {
	justify-content: center !important;
}

/* 添加新的工具类 */
.d-flex {
	display: flex !important;
}

.align-items-center {
	align-items: center !important;
}

.icon-spacing {
	margin-right: 0.5rem;
}

/* 添加动画效果 */
.fade-in {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 卡片悬停效果 */
.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px var(--shadow-color);
}

/* 按钮悬停效果增强 */
.btn {
	transition: all 0.3s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

/* --- 应用特定样式 (新增 - 服务器状态示例) --- */
.status-online {
	color: var(--success-color);
	font-weight: bold;
}

.status-offline {
	color: var(--danger-color);
	font-weight: bold;
}

.status-unknown {
	color: var(--warning-color);
	font-weight: bold;
}

.player-list {
	margin-top: 10px;
	font-size: 0.9em;
	color: var(--secondary-color);
}

.player-list ul {
	list-style-type: none;
	padding-left: 15px;
	margin-top: 5px;
}

.player-list li {
	padding: 2px 0;
}

.whitelist-status {
	padding: 5px 10px;
	border-radius: var(--border-radius);
	display: inline-block;
	margin-top: 5px;
	font-size: 0.9em;
}

.whitelist-status.success {
	background-color: rgba(46, 204, 113, 0.1);
	color: var(--success-color);
	border: 1px solid rgba(46, 204, 113, 0.3);
}

.whitelist-status.warning {
	background-color: rgba(243, 156, 18, 0.1);
	color: var(--warning-color);
	border: 1px solid rgba(243, 156, 18, 0.3);
}

body.dark-mode .whitelist-status.success {
	background-color: rgba(46, 204, 113, 0.2);
	border-color: rgba(46, 204, 113, 0.5);
}

body.dark-mode .whitelist-status.warning {
	background-color: rgba(243, 156, 18, 0.2);
	border-color: rgba(243, 156, 18, 0.5);
}

/* --- 底栏样式 --- */
.main-footer {
	color: var(--secondary-color);
	padding: 10px 0;
	text-align: center;
	border-top: 1px solid var(--border-color);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	margin-top: auto;
	/* 配合 body Flex 布局，推到底部 */

	background-color: var(--footer-bg-color);

	font-size: 16px;

	/*/ / backdrop-filter: blur(64 px) saturate(0.8);*/
	/*/ / background-color: rgba(var(--background-color), 0.7);*/
	/*	backdrop-filter: blur(24px) saturate(1.2) brightness(1.1);*/
	/*	background-color: var(--glass-background-color);*/
	/*	background-image: url("/static/noise.webp");*/
}

.main-footer p {
	margin-bottom: 0.5em;
	color: var(--secondary-color);
	transition: color 0.3s ease;
}

.main-footer a {
	color: var(--secondary-color);
	text-decoration: underline;
	transition: color 0.3s ease;
	padding-left: 10px;
}

.main-footer img {
	display: inline-block;
	height: 1em;
}

.main-footer a:hover {
	color: var(--primary-color);
	text-decoration: none;
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
	:root {
		--header-height: 60px;
	}

	body {
		padding-top: var(--header-height);
	}

	.main-header {
		height: var(--header-height);
	}

	.main-header .container {
		width: 100%;
		/* 保持内容在容器内 */
	}

	.logo a {
		font-size: 1.5em;
	}

	.logo-img {
		height: 30px;
		margin-right: 8px;
	}

	/* 移动端导航 */
	.main-nav {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		width: 100%;
		background-color: var(--header-bg-color);
		box-shadow: 0 2px 5px var(--shadow-color);
		border-top: 1px solid var(--border-color);
		z-index: 999;
	}

	.main-nav.nav-open {
		display: block;
	}

	.navbar-nav ul {
		flex-direction: column;
		width: 100%;
		padding: 0;
	}

	.navbar-nav .nav-item {
		margin-left: 0;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid var(--border-color);
	}

	.navbar-nav .nav-item:last-child {
		border-bottom: none;
	}

	.navbar-nav .nav-item a,
	.navbar-nav .nav-item .btn-link-style {
		display: block;
		padding: 15px;
		width: 100%;
	}

	.navbar-nav .nav-item a::after {
		display: none;
	}

	.navbar-nav .nav-item form {
		display: block;
		width: 100%;
	}

	/* 页头控制按钮 */
	.header-controls {
		display: flex;
		margin-left: auto;
	}

	.mobile-menu-toggle {
		display: block;
	}

	/* 显示移动菜单按钮 */

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.6em;
	}

	.container {
		width: 95%;
	}

	/* 重置栅格系统列宽 */
	.col,
	.col-md-6

	/* Add other .col-md-* here */
		{
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 调整消息容器内边距 */
	.messages-container {
		padding-top: 15px;
	}
}