:root {
    --bs-primary-rgb: 52, 103, 214;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from fireworks */
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* 优化字体栈 */
    font-size: 1rem; /* 增加基础字体大小 */
    line-height: 1.6; /* 改善行高 */
    background: #ffffff; /* 纯白色背景 */
    color: var(--bs-body-color);
}

/* 移除动画，不再需要渐变动画 */
/* @keyframes gradientAnimator {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
} */

.navbar {
    background: rgba(255, 255, 255, 0.98) !important; /* 提高透明度 */
    backdrop-filter: blur(15px) saturate(180%); /* 增强模糊效果 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* 优化边框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 添加阴影 */
}
.navbar-brand,
.navbar-nav .nav-link {
    color: #1a1a1a !important; /* 更深的文字颜色 */
    font-weight: 600; /* 增加字重 */
    text-shadow: none; /* 移除文字阴影 */
    transition: color 0.3s ease; /* 添加过渡效果 */
}
.navbar-brand .bi-heart-pulse {
    color: #dc3545; /* 红色心跳图标 */
    font-size: 1.3em; /* 增大图标尺寸 */
    margin-right: 8px; /* 增加间距 */
}
.navbar-brand-text-colorful {
    background: linear-gradient(45deg, #dc3545, #fd7e14, #198754, #0d6efd); /* 优化渐变色彩 */
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 4s ease infinite;
    font-weight: bold;
    font-size: 1.1em; /* 增大品牌文字 */
}
@keyframes textGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.navbar-toggler {
    border-color: rgba(255,255,255,0.3);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2' width='10' height='12' rx='1' ry='1' fill='%232c3e50'/%3E%3Crect x='3.5' y='2.5' width='9' height='2' fill='%233498db'/%3E%3Crect x='3.5' y='5' width='9' height='2.5' fill='%2334495e'/%3E%3Crect x='3.5' y='8' width='9' height='2.5' fill='%2327ae60'/%3E%3Crect x='3.5' y='11' width='9' height='2.5' fill='%23e74c3c'/%3E%3Ccircle cx='5' cy='3.5' r='0.7' fill='%23f1c40f'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='2s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='5' cy='6.5' r='0.7' fill='%232ecc71'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='1.5s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='5' cy='9.5' r='0.7' fill='%23e74c3c'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='1.8s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='5' cy='12.5' r='0.7' fill='%239b59b6'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='1.2s' repeatCount='indefinite' /%3E%3C/circle%3E%3Cpolyline points='7,4 8,3 9,3.5 10,2.8 11,4' fill='none' stroke='%233498db' stroke-width='0.7'/%3E%3Cpolyline points='7,7 8,5.5 9,6.5 10,6 11,7' fill='none' stroke='%232ecc71' stroke-width='0.7'/%3E%3Cpolyline points='7,10 8,8.5 9,9 10,8.5 11,10' fill='none' stroke='%23f39c12' stroke-width='0.7'/%3E%3Cpolyline points='7,13 8,11.5 9,12.5 10,11.7 11,13' fill='none' stroke='%23e74c3c' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* 优化导航栏按钮样式 - 使按钮更加清晰和彩色 */
.navbar .btn-outline-light {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.9)) !important;
    border: 2px solid rgba(13, 110, 253, 0.3) !important;
    color: #495057 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.8rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.navbar .btn-outline-light:hover {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3) !important;
}

/* 刷新按钮的彩色图标效果 */
#refreshDataBtn i.bi-arrow-clockwise {
    color: #28a745 !important;
    font-size: 1.1em !important;
    text-shadow: 0 1px 2px rgba(40, 167, 69, 0.3) !important;
    animation: refreshIconGlow 2s ease-in-out infinite alternate !important;
}

#refreshDataBtn:hover i.bi-arrow-clockwise {
    color: #fff !important;
    animation: refreshRotate 0.5s ease-in-out !important;
}

@keyframes refreshIconGlow {
    0% { text-shadow: 0 0 5px rgba(40, 167, 69, 0.3); }
    100% { text-shadow: 0 0 10px rgba(40, 167, 69, 0.6), 0 0 15px rgba(40, 167, 69, 0.4); }
}

@keyframes refreshRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 主题切换按钮的彩色图标效果 */
#themeToggler i.bi-moon-stars-fill {
    color: #6f42c1 !important;
    font-size: 1.1em !important;
    text-shadow: 0 1px 2px rgba(111, 66, 193, 0.3) !important;
    animation: themeIconGlow 3s ease-in-out infinite alternate !important;
}

#themeToggler i.bi-sun-fill {
    color: #fd7e14 !important;
    font-size: 1.1em !important;
    text-shadow: 0 1px 2px rgba(253, 126, 20, 0.3) !important;
    animation: sunIconGlow 2s ease-in-out infinite alternate !important;
}

#themeToggler:hover i {
    color: #fff !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease !important;
}

@keyframes themeIconGlow {
    0% { text-shadow: 0 0 5px rgba(111, 66, 193, 0.3); }
    100% { text-shadow: 0 0 10px rgba(111, 66, 193, 0.6), 0 0 15px rgba(111, 66, 193, 0.4); }
}

@keyframes sunIconGlow {
    0% { text-shadow: 0 0 5px rgba(253, 126, 20, 0.3); }
    100% { text-shadow: 0 0 10px rgba(253, 126, 20, 0.6), 0 0 15px rgba(253, 126, 20, 0.4); }
}

/* 按钮文字样式优化 */
.navbar .btn-outline-light span {
    color: #495057 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.navbar .btn-outline-light:hover span {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* 加载状态的优化 */
#refreshDataBtn.loading {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(32, 134, 107, 0.1)) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
}

#refreshDataBtn .spinner-border-sm {
    color: #28a745 !important;
    width: 1rem !important;
    height: 1rem !important;
}

.footer {
    margin-top: auto;
    background: rgba(248, 249, 250, 0.95) !important; /* 浅色半透明背景 */
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important; /* 清晰边框 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    padding: 1.5rem 0; /* 增加内边距 */
}
.footer .text-muted {
    color: #6c757d !important; /* 中性灰色 */
    opacity: 0.8;
    font-size: 0.9rem; /* 稍大字体 */
}


.card {
    border: 1px solid rgba(0, 0, 0, 0.1); /* 清晰的边框 */
    background-color: rgba(255, 255, 255, 0.95); /* 提高卡片背景透明度 */
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-radius: 12px; /* 增加圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 增强阴影效果 */
    transition: box-shadow 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
}
.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* 悬停效果 */
    transform: translateY(-2px); /* 轻微上升效果 */
}
.card-header {
    font-weight: 600; /* 增加字重 */
    font-size: 1.1rem; /* 增大字体 */
    background-color: rgba(248, 249, 250, 0.8); /* 浅灰色背景 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px 12px 0 0; /* 匹配卡片圆角 */
    padding: 1rem 1.25rem; /* 增加内边距 */
}

/* 优化标题样式 */
h2, h5.card-title {
    color: #1a1a1a; /* 深色标题 */
    font-weight: 700; /* 增加字重 */
    margin-bottom: 1rem; /* 增加底部间距 */
    text-shadow: none; /* 移除阴影 */
}
h5.card-title {
    font-size: 1.2rem; /* 增大卡片标题 */
    display: flex;
    align-items: center;
    gap: 8px; /* 图标与文字间距 */
}

/* 彩色图标效果 - 为所有图标添加颜色 */
h5.card-title i.bi-hdd-stack {
    color: #0d6efd !important; /* 蓝色服务器图标 */
    font-size: 1.3em; /* 增大图标 */
    text-shadow: 0 1px 2px rgba(13, 110, 253, 0.3) !important;
}

h5.card-title i.bi-globe2 {
    color: #20c997 !important; /* 青绿色网站图标 */
    font-size: 1.3em; /* 增大图标 */
    text-shadow: 0 1px 2px rgba(32, 201, 151, 0.3) !important;
}

h2 i.bi-hdd-network-fill {
    color: #6f42c1 !important; /* 紫色网络图标 */
    text-shadow: 0 1px 2px rgba(111, 66, 193, 0.3) !important;
}

h2 i.bi-broadcast-pin {
    color: #fd7e14 !important; /* 橙色广播图标 */
    text-shadow: 0 1px 2px rgba(253, 126, 20, 0.3) !important;
}

/* 表格标题图标的彩色效果 */
.table thead th i.bi-arrow-up-circle {
    color: #dc3545 !important; /* 红色上传图标 */
}

.table thead th i.bi-arrow-down-circle {
    color: #198754 !important; /* 绿色下载图标 */
}

.table thead th i.bi-cloud-arrow-up {
    color: #fd7e14 !important; /* 橙色云上传图标 */
}

.table thead th i.bi-cloud-arrow-down {
    color: #0dcaf0 !important; /* 青色云下载图标 */
}

.table {
    --bs-table-bg: rgba(var(--bs-body-bg-rgb), 0.7);
    --bs-table-striped-bg: rgba(var(--bs-secondary-bg-rgb), 0.6);
    --bs-table-hover-bg: rgba(var(--bs-secondary-bg-rgb), 0.8);
}
.table thead th {
    background-color: rgba(var(--bs-tertiary-bg-rgb), 0.75);
}

/* General text color adjustments if needed for readability against gradient */
h2, h5.card-title {
    color: var(--bs-emphasis-color);
    text-shadow: 0 0 5px rgba(var(--bs-body-bg-rgb), 0.3);
}


.progress { 
    height: 26px; /* 增加高度 */
    font-size: 0.8em; /* 增大字体 */
    position: relative; 
    background-color: #f8f9fa; /* 浅灰背景 */
    border-radius: 6px; /* 圆角 */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* 内阴影 */
    overflow: hidden;
}
.progress-bar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: width .6s ease;
    border-radius: 6px; /* 圆角 */
    position: relative;
    overflow: hidden;
}
.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.15) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.15) 75%);
    background-size: 20px 20px;
    animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}
.progress span {
    position: absolute; 
    width: 100%; 
    text-align: center; 
    line-height: 26px; /* 匹配新高度 */
    font-weight: 700; /* 增加字重 */
    color: #1a1a1a; /* 深色文字 */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* 白色阴影提高可读性 */
    z-index: 2;
}

/* 优化按钮样式 */
.btn {
    border-radius: 6px; /* 圆角 */
    font-weight: 600; /* 增加字重 */
    padding: 0.5rem 1rem; /* 增加内边距 */
    transition: all 0.3s ease; /* 过渡效果 */
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}
.btn:hover {
    transform: translateY(-1px); /* 轻微上升 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 增强阴影 */
}
.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
}
.btn-success {
    background: linear-gradient(135deg, #198754, #157347) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #dc3545, #bb2d3b) !important;
}
.btn-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
    color: #000 !important;
}

/* 优化详情项样式 */
.detail-item { 
    background-color: rgba(255, 255, 255, 0.95); /* 白色背景 */
    padding: 1rem; /* 增加内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 阴影 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 淡边框 */
    transition: box-shadow 0.3s ease; /* 过渡效果 */
}
.detail-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停阴影 */
}
.detail-item strong { 
    display: block; 
    margin-bottom: 0.5rem; /* 增加间距 */
    font-weight: 600; /* 增加字重 */
    color: #495057; /* 深色文字 */
    font-size: 0.85rem; /* 稍小字体 */
    text-transform: uppercase; /* 大写 */
    letter-spacing: 0.5px; /* 字母间距 */
}

.history-bar-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    height: 25px;
    gap: 1px;
    padding: 2px 0;
    min-width: 200px;
    overflow: hidden;
}
.history-bar {
    flex-shrink: 0;
    width: 6px;
    height: 100%;
    border-radius: 1px;
    transition: background-color 0.3s ease;
}
.history-bar:hover { transform: scaleY(1.1); }
.history-bar-up { background-color: var(--bs-success); }
.history-bar-down {
    background-image: linear-gradient(to bottom, var(--bs-danger), #a3232e);
}
.history-bar-timeout { background-color: var(--bs-warning); }
.history-bar-error { background-color: var(--bs-danger); }
.history-bar-pending { background-color: var(--bs-secondary-bg); }

.admin-table th, .admin-table td { font-size: 0.875rem; vertical-align: middle; }
.admin-table .btn-group-sm .btn, .admin-table .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.75rem; }
.admin-table .form-control-sm { font-size: 0.8rem; }

.badge.bg-success { background-color: var(--bs-success) !important; }
.badge.bg-danger { background-color: var(--bs-danger) !important; }
.badge.bg-warning { background-color: var(--bs-warning) !important; color: #000 !important; }
.badge.bg-info { background-color: var(--bs-info) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; }
.badge.bg-dark { background-color: var(--bs-dark) !important; }

.uptime-progress {
    height: 18px;
    font-size: 0.7em;
    position: relative;
    background-color: rgba(var(--bs-tertiary-bg-rgb), 0.7);
    border-radius: .25rem;
    overflow: hidden;
}
.uptime-progress .progress-bar {
    transition: width .6s ease, background .3s ease;
}
.uptime-progress .progress-bar.bg-success {
    background-image: linear-gradient(45deg, #28a745, #218838);
}
.uptime-progress .progress-bar.bg-warning {
    background-image: linear-gradient(45deg, #ffc107, #e0a800);
}
.uptime-progress .progress-bar.bg-danger {
    background-image: linear-gradient(45deg, #dc3545, #c82333);
}
.uptime-progress .uptime-progress-label {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 18px;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-shadow: 0 0 2px rgba(var(--bs-body-bg-rgb), 0.5);
}
[data-bs-theme="dark"] .uptime-progress {
    background-color: rgba(68, 68, 68, 0.7);
}
[data-bs-theme="dark"] .uptime-progress .uptime-progress-label {
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
}
.uptime-progress:has(> .progress-bar.bg-warning) .uptime-progress-label {
    color: #000 !important;
}

.response-time-progress {
    height: 18px;
    font-size: 0.7em;
    position: relative;
    background-color: rgba(var(--bs-tertiary-bg-rgb), 0.7);
    border-radius: .25rem;
    overflow: hidden;
    min-width: 70px;
}
.response-time-progress .progress-bar {
    transition: width .6s ease, background .3s ease;
}
.response-time-progress .progress-bar.bg-success {
    background-image: linear-gradient(45deg, #198754, #157347);
}
.response-time-progress .progress-bar.bg-warning {
    background-image: linear-gradient(45deg, #ffc107, #e0a800);
}
.response-time-progress .progress-bar.bg-danger {
    background-image: linear-gradient(45deg, #dc3545, #c82333);
}
.response-time-progress .response-time-label {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 18px;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-shadow: 0 0 2px rgba(var(--bs-body-bg-rgb), 0.5);
}
.response-time-progress .response-time-label.text-dark {
    color: #000 !important;
}

[data-bs-theme="dark"] .response-time-progress {
    background-color: rgba(68, 68, 68, 0.7);
}
[data-bs-theme="dark"] .response-time-progress .response-time-label {
     text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

/* 深色主题的导航栏按钮优化 */
[data-bs-theme="dark"] body {
    background: #000000 !important; /* 纯黑色背景 */
    color: #e9ecef;
}

[data-bs-theme="dark"] .navbar {
    background: rgba(0, 0, 0, 0.95) !important; /* 纯黑色导航栏 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* 更明显的边框 */
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1) !important; /* 白色阴影 */
}

[data-bs-theme="dark"] .navbar .btn-outline-light {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.9), rgba(52, 58, 64, 0.8)) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* 更明显的边框 */
    color: #f8f9fa !important; /* 更明亮的文字 */
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .navbar .btn-outline-light:hover {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.5) !important; /* 更强的阴影 */
}

[data-bs-theme="dark"] .navbar .btn-outline-light span {
    color: #f8f9fa !important; /* 更明亮的文字 */
}

[data-bs-theme="dark"] .navbar .btn-outline-light:hover span {
    color: #fff !important;
}

[data-bs-theme="dark"] .navbar-brand .bi-heart-pulse {
    color: #dc3545 !important; /* 保持红色心跳图标 */
    text-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important; /* 添加发光效果 */
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar-nav .nav-link {
    color: #f8f9fa !important; /* 更明亮的文字 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 深色主题下的导航栏图标增强 */
[data-bs-theme="dark"] .navbar-nav .nav-link i.bi-person-circle,
[data-bs-theme="dark"] .navbar-nav .nav-link i.bi-person-badge {
    color: #66d9ff !important; /* 更亮的蓝色 */
    text-shadow: 0 0 8px rgba(102, 217, 255, 0.4) !important;
}

[data-bs-theme="dark"] .navbar-nav .nav-link i.bi-house-door {
    color: #51cf66 !important; /* 更亮的绿色 */
    text-shadow: 0 0 8px rgba(81, 207, 102, 0.4) !important;
}

[data-bs-theme="dark"] #refreshDataBtn i.bi-arrow-clockwise {
    color: #51cf66 !important; /* 更亮的绿色 */
    text-shadow: 0 0 8px rgba(81, 207, 102, 0.4) !important;
}

[data-bs-theme="dark"] #themeToggler i.bi-moon-stars-fill {
    color: #9775fa !important; /* 更亮的紫色 */
    text-shadow: 0 0 8px rgba(151, 117, 250, 0.4) !important;
}

[data-bs-theme="dark"] #themeToggler i.bi-sun-fill {
    color: #ffd43b !important; /* 更亮的橙色 */
    text-shadow: 0 0 8px rgba(255, 212, 59, 0.4) !important;
}

/* 深色主题下的卡片和容器优化 */
[data-bs-theme="dark"] .footer {
    background: rgba(0, 0, 0, 0.9) !important; /* 黑色底部 */
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important; /* 明显边框 */
}

[data-bs-theme="dark"] .footer .text-muted {
    color: #adb5bd !important; /* 更明亮的灰色 */
    opacity: 1;
}

[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h5.card-title {
    color: #f8f9fa !important; /* 明亮的标题 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 深色主题下的彩色图标增强 */
[data-bs-theme="dark"] h5.card-title i.bi-hdd-stack {
    color: #66d9ff !important; /* 更亮的蓝色 */
    text-shadow: 0 0 8px rgba(102, 217, 255, 0.4) !important;
}

[data-bs-theme="dark"] h5.card-title i.bi-globe2 {
    color: #51cf66 !important; /* 更亮的绿色 */
    text-shadow: 0 0 8px rgba(81, 207, 102, 0.4) !important;
}

[data-bs-theme="dark"] h2 i.bi-hdd-network-fill {
    color: #9775fa !important; /* 更亮的紫色 */
    text-shadow: 0 0 8px rgba(151, 117, 250, 0.4) !important;
}

[data-bs-theme="dark"] h2 i.bi-broadcast-pin {
    color: #ffd43b !important; /* 更亮的橙色 */
    text-shadow: 0 0 8px rgba(255, 212, 59, 0.4) !important;
}

[data-bs-theme="dark"] .card {
    background-color: rgba(18, 18, 18, 0.95) !important; /* 深黑色卡片 */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 明显边框 */
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05) !important; /* 白色阴影 */
}

[data-bs-theme="dark"] .card-header {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.9), rgba(52, 58, 64, 0.8)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: rgba(18, 18, 18, 0.9);
    --bs-table-striped-bg: rgba(33, 37, 41, 0.7);
    --bs-table-hover-bg: rgba(52, 58, 64, 0.8);
    color: #f8f9fa !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .table thead th {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.9), rgba(52, 58, 64, 0.8)) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .table tbody td {
    color: #e9ecef !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { 
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03); 
}

/* 深色主题下的表格图标增强 */
[data-bs-theme="dark"] .table thead th i.bi-arrow-up-circle {
    color: #ff6b6b !important; /* 更亮的红色 */
    text-shadow: 0 0 5px rgba(255, 107, 107, 0.4) !important;
}

[data-bs-theme="dark"] .table thead th i.bi-arrow-down-circle {
    color: #51cf66 !important; /* 更亮的绿色 */
    text-shadow: 0 0 5px rgba(81, 207, 102, 0.4) !important;
}

[data-bs-theme="dark"] .table thead th i.bi-cloud-arrow-up {
    color: #ffd43b !important; /* 更亮的橙色 */
    text-shadow: 0 0 5px rgba(255, 212, 59, 0.4) !important;
}

[data-bs-theme="dark"] .table thead th i.bi-cloud-arrow-down {
    color: #22d3ee !important; /* 更亮的青色 */
    text-shadow: 0 0 5px rgba(34, 211, 238, 0.4) !important;
}

[data-bs-theme="dark"] .progress { 
    background-color: #1a1a1a !important; /* 深黑色背景 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .progress span { 
    color: #f8f9fa !important; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); 
    font-weight: 700;
}

[data-bs-theme="dark"] .server-details-content { 
    background-color: rgba(10, 10, 10, 0.95) !important; /* 深黑色背景 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .detail-item { 
    background-color: rgba(28, 28, 28, 0.95) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .detail-item strong { 
    color: #adb5bd !important; 
}

/* 深色主题下的模态框优化 */
[data-bs-theme="dark"] .modal-content { 
    background-color: #1a1a1a !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .modal-header { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.9), rgba(52, 58, 64, 0.8)) !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .modal-header .btn-close { 
    filter: invert(1) grayscale(100%) brightness(200%); 
}

[data-bs-theme="dark"] .modal-footer { 
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(18, 18, 18, 0.9) !important;
}

/* 深色主题下的表单优化 */
[data-bs-theme="dark"] .form-control { 
    background-color: #1a1a1a !important; 
    color: #f8f9fa !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

[data-bs-theme="dark"] .form-control:focus { 
    background-color: #1a1a1a !important; 
    color: #f8f9fa !important; 
    border-color: #66d9ff !important; 
    box-shadow: 0 0 0 0.25rem rgba(102, 217, 255, 0.25) !important;
}

[data-bs-theme="dark"] .form-label, 
[data-bs-theme="dark"] .form-check-label { 
    color: #adb5bd !important; 
}

[data-bs-theme="dark"] .input-group-text { 
    background-color: #2a2a2a !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important; 
    color: #adb5bd !important; 
}

/* 深色主题下的按钮和徽章优化 */
[data-bs-theme="dark"] .btn-outline-light { 
    color: #adb5bd !important; 
    border-color: rgba(255, 255, 255, 0.3) !important; 
}

[data-bs-theme="dark"] .btn-outline-light:hover { 
    color: #000 !important; 
    background-color: #f8f9fa !important; 
    border-color: #f8f9fa !important; 
}

[data-bs-theme="dark"] .btn-outline-secondary { 
    color: #adb5bd !important; 
    border-color: rgba(255, 255, 255, 0.3) !important; 
}

[data-bs-theme="dark"] .btn-outline-secondary:hover { 
    background-color: #495057 !important; 
    border-color: #495057 !important; 
    color: #fff !important; 
}

[data-bs-theme="dark"] .btn-primary { 
    background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3) !important;
}

[data-bs-theme="dark"] .history-bar-pending { 
    background-color: #495057 !important; 
}

/* 深色主题下的进度条优化 */
[data-bs-theme="dark"] .uptime-progress {
    background-color: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .uptime-progress .uptime-progress-label {
    color: #f8f9fa !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 700;
}

[data-bs-theme="dark"] .response-time-progress {
    background-color: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .response-time-progress .response-time-label {
    color: #f8f9fa !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 700;
}

/* 深色主题下的品牌文字渐变色增强 */
[data-bs-theme="dark"] .navbar-brand-text-colorful {
    background: linear-gradient(45deg, #ff6b6b, #ffd43b, #51cf66, #66d9ff, #9775fa, #ff8cc8) !important; /* 更亮的渐变色 */
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: textGradientDark 3s ease infinite !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    filter: brightness(1.3) saturate(1.4) !important; /* 增加亮度和饱和度 */
}

@keyframes textGradientDark {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}