:root {
  --sidebar-width: 240px;
  --topbar-height: 60px;
  
  /* Bootstrap兼容变量 */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  
  /* 统一四色方案 */
  /* 主色 - 绿色系 */
  --color-primary: #20a53a;
  --color-primary-dark: #166534;
  --color-primary-light: #86efac;
  --color-primary-bg: rgba(32, 165, 58, 0.1);
  
  /* 错误色 - 红色系 */
  --color-error: #dc2626;
  --color-error-dark: #991b1b;
  --color-error-light: #fca5a5;
  --color-error-bg: rgba(220, 38, 38, 0.1);
  
  /* 次色 - 灰蓝色系 */
  --color-secondary: #64748b;
  --color-secondary-dark: #475569;
  --color-secondary-light: #94a3b8;
  --color-secondary-bg: rgba(100, 116, 139, 0.1);
  
  /* 中性色 - 灰色系 */
  --color-neutral: #f1f5f9;
  --color-neutral-dark: #e2e8f0;
  --color-neutral-light: #f8fafc;
  --color-neutral-bg: rgba(241, 245, 249, 0.1);
  
  /* 背景和文本 */
  --dark-bg: #0a0e1a;
  --dark-card: #111827;
  --dark-border: #1f2937;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  
  /* 移除渐变，使用纯色 */
}

/* 通用 */
body {
  background: var(--dark-bg);
  color: var(--text-primary);
  position: relative;
  overflow-x: hidden;
}

/* 科技感背景动画 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-neutral-light);
  z-index: -1;
  animation: techPulse 8s ease-in-out infinite;
}

@keyframes techPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.view { 
  animation: fadeIn .25s ease-in;
  position: relative;
  z-index: 1;
}

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

.btn-gradient {
  background: var(--color-primary);
  border: none;
  color: white;
  transition: all 0.3s ease;
}
.btn-gradient:hover { 
  background: var(--color-primary-dark);
  color: white;
}
.btn-gradient:active { transform: scale(0.98); }

.btn-google {
  background: var(--color-neutral-light);
  color: var(--text-primary);
  border: 1px solid var(--color-neutral-dark);
}
.btn-google:hover { background: var(--color-neutral); }

.cf-box {
  border: 1px dashed var(--text-secondary);
  border-radius: .5rem;
  color: var(--text-secondary);
  padding: .75rem;
  text-align: center;
}

/* 登录卡片 */
.login-card { max-width: 520px; border-radius: 1rem; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}

/* 应用布局 */
.app-layout { 
  display: grid; 
  grid-template-columns: var(--sidebar-width) 1fr; 
  grid-template-rows: var(--topbar-height) 1fr; 
  min-height: 100vh; 
}

.sidebar { 
  grid-row: 1 / span 2; 
  grid-column: 1; 
  background: var(--color-neutral);
  border-right: 1px solid var(--dark-border); 
  display: flex; 
  flex-direction: column;
  backdrop-filter: blur(10px);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

.topbar { 
  grid-row: 1; 
  grid-column: 2; 
  height: var(--topbar-height); 
  background: var(--color-neutral);
  border-bottom: 1px solid var(--dark-border); 
  position: sticky; 
  top: 0; 
  z-index: 20; 
  display: flex; 
  align-items: center; 
  padding: 0 1rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.content { grid-row: 2; grid-column: 2; padding: 1rem; }

.menu .menu-item {
  display: block; 
  padding: .75rem 1rem; 
  margin: .25rem .5rem; 
  border-radius: .5rem; 
  color: var(--text-secondary); 
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.menu .menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transition: left 0.3s ease;
  z-index: -1;
}

.menu .menu-item.active { 
  background: var(--color-primary); 
  color: white;
  transform: translateX(5px);
}

.menu .menu-item:hover { 
  background: var(--color-primary-light); 
  color: var(--text-primary);
  transform: translateX(5px);
}

.menu .menu-item.active::before, .menu .menu-item:hover::before {
  left: 0;
}

.sidebar .brand { height: var(--topbar-height); border-bottom: 1px solid #1f2937; }
.sidebar .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); }

.topbar .page-title { font-size: 1rem; }
.btn-icon { 
  background: transparent; 
  border: 1px solid var(--dark-border); 
  color: var(--text-secondary); 
  border-radius: .5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transition: left 0.3s ease;
  z-index: -1;
  opacity: 0.1;
}

.btn-icon:hover { 
  background: var(--dark-card);
  color: var(--text-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.btn-icon:hover::before {
  left: 0;
}
.notif-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--color-error); border-radius: 50%; border: 1px solid var(--dark-bg); }
.search-box { 
  display: flex; 
  align-items: center; 
  background: var(--color-neutral);
  border: 1px solid var(--dark-border); 
  border-radius: .5rem; 
  padding: .25rem .5rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.search-box i { 
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.search-box:focus-within i {
  color: var(--color-primary);
}

.search-box .form-control { 
  background: transparent; 
  border: none; 
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.search-box .form-control:focus { 
  box-shadow: none;
  color: var(--text-primary);
}

.search-box .form-control::placeholder {
  color: var(--text-secondary);
}

/* 通用表单控件暗色主题样式 */
.form-control {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  color: var(--text-primary);
}

.form-control:focus {
  background: var(--dark-card);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-control::placeholder {
  color: var(--text-secondary);
}

.input-group-text {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  color: var(--text-secondary);
}

.form-select {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  color: var(--text-primary);
}

.form-select:focus {
  background: var(--dark-card);
  border-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.form-check-input {
  background-color: var(--dark-card);
  border: 1px solid var(--dark-border);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* 按钮暗色主题样式 */
.btn-outline-secondary {
  border-color: var(--dark-border);
  color: var(--text-secondary);
}

.btn-outline-secondary:hover {
  background: var(--dark-card);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-outline-danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-outline-danger:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}

.btn-outline-success {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-success:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-outline-warning {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-outline-warning:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-secondary {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
  color: var(--dark-bg);
}

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

.btn-success {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-success:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
}

.btn-danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}

.btn-danger:hover {
  background: var(--color-error-dark);
  border-color: var(--color-error-dark);
  color: #ffffff;
}

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

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

/* 下拉菜单暗色主题样式 */
.dropdown-menu {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--dark-bg);
  color: var(--text-primary);
}

.dropdown-item.active {
  background: var(--color-primary);
  color: #ffffff;
}

.dropdown-divider {
  border-color: var(--dark-border);
}

/* 导航标签暗色主题样式 */
.nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-color: var(--dark-border);
}

.nav-tabs .nav-link.active {
  color: var(--text-primary);
  background: var(--dark-card);
  border-color: var(--dark-border) var(--dark-border) var(--dark-card);
}

.nav-pills .nav-link {
  color: var(--text-secondary);
}

.nav-pills .nav-link:hover {
  color: var(--text-primary);
  background: var(--dark-bg);
}

.nav-pills .nav-link.active {
  background: var(--color-primary);
  color: #ffffff;
}

/* 统计卡片 */
.stat-card { 
  background: var(--color-neutral);
  border: 1px solid var(--dark-border);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* 移除统计卡片悬停特效 */

.stat-value { 
  font-size: 1.25rem; 
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.stat-label { 
  color: var(--text-secondary);
}

/* 表格 */
.card { 
  background: var(--color-neutral);
  border: 1px solid var(--dark-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

/* 优化的卡片悬停效果 - 确保视觉稳定性 */
.card:hover,
.stat-card:hover,
.card-glow:hover,
.tech-glow:hover {
  transform: none !important;
  border: inherit !important;
  outline: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  opacity: inherit !important;
  /* 美观的悬停效果，无位移 */
}

/* 亮色模式下的卡片悬停效果 */
body.theme-light .card:hover,
body.theme-light .stat-card:hover,
body.theme-light .card-glow:hover,
body.theme-light .tech-glow:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 移除所有可能的黑色边框悬停效果 */
*:hover,
*:focus {
  outline: none !important;
}

/* 移除默认的focus样式，但保持可访问性 */
.card:focus,
.stat-card:focus,
.tech-glow:focus,
.card-glow:focus {
  outline: none !important;
  box-shadow: none !important;
  border: inherit !important;
}

/* 全局定位约束 - 确保元素位置稳定 */
.card,
.stat-card,
.tech-glow,
.card-glow,
.server-row,
.website-row,
.table tbody tr {
  position: relative;
  box-sizing: border-box;
}

/* 防止悬停时的布局偏移 */
.card,
.stat-card,
.tech-glow,
.card-glow {
  will-change: background-color, box-shadow;
}

.server-row,
.website-row,
.table tbody tr {
  will-change: background-color, box-shadow;
}

/* 确保统计卡片的伪元素不会造成遮挡 */
.stat-card::before,
.stat-card::after,
.tech-glow::before,
.tech-glow::after,
.card-glow::before,
.card-glow::after {
  pointer-events: none !important;
  z-index: -1 !important;
}

.stat-card:hover::before,
.stat-card:hover::after,
.tech-glow:hover::before,
.tech-glow:hover::after,
.card-glow:hover::before,
.card-glow:hover::after {
  opacity: 0 !important;
  display: none !important;
}

/* 服务器页面表格特殊处理 - 确保不受悬停效果影响 */
[data-page="servers"] .table,
[data-page="servers"] table {
  position: relative;
  z-index: 1;
  backdrop-filter: none !important;
}

/* 暗色模式下的服务器页面 */
body:not(.theme-light) [data-page="servers"] .table,
body:not(.theme-light) [data-page="servers"] table,
body:not(.theme-light) [data-page="servers"] .card {
  background: var(--dark-card) !important;
}

/* 亮色模式下的服务器页面 */
body.theme-light [data-page="servers"] .table,
body.theme-light [data-page="servers"] table,
body.theme-light [data-page="servers"] .card {
  background: #ffffff !important;
}

[data-page="servers"] .stat-card:hover,
[data-page="servers"] .tech-glow:hover,
[data-page="servers"] .card-glow:hover {
  background: inherit !important;
  backdrop-filter: none !important;
  border: inherit !important;
  outline: none !important;
  box-shadow: inherit !important;
}

[data-page="servers"] .stat-card:hover::after,
[data-page="servers"] .tech-glow:hover::after,
[data-page="servers"] .card-glow:hover::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 表格暗色主题样式 - 增强优先级 */
.table,
table {
  background: var(--dark-card) !important;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--dark-border);
}

.table thead th,
table thead th { 
  color: var(--text-primary) !important; 
  font-weight: 600;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
  border-bottom: 2px solid var(--dark-border) !important;
  border-right: 1px solid rgba(31, 41, 55, 0.3) !important;
  position: relative;
  padding: 0.75rem;
}

.table thead th:last-child,
table thead th:last-child {
  border-right: none !important;
}

.table thead th::after,
table thead th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
}

.table tbody td,
table tbody td { 
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(31, 41, 55, 0.3) !important;
  border-right: 1px solid rgba(31, 41, 55, 0.2) !important;
  padding: 0.75rem;
  background: var(--dark-card) !important;
}

.table tbody td:last-child,
table tbody td:last-child {
  border-right: none !important;
}

.table tbody tr,
table tbody tr {
  transition: all 0.3s ease;
  background: var(--dark-card) !important;
}

/* 优化表格行悬停效果 */
.table-row-hover:hover { 
  background-color: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-1px);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
.status-dot { 
  display: inline-block; 
  width: .6rem; 
  height: .6rem; 
  border-radius: 50%; 
  margin-right: .4rem;
  position: relative;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.3;
  animation: statusGlow 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes statusGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
.usage { 
  position: relative; 
  height: .75rem; 
  background: var(--color-neutral);
  border-radius: .5rem; 
  overflow: hidden;
  border: 1px solid var(--dark-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.usage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-neutral);
  animation: usageShimmer 2s ease-in-out infinite;
}

@keyframes usageShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.usage span { 
  position: absolute; 
  right: .5rem; 
  top: -1.6rem; 
  font-size: .75rem; 
  color: var(--text-secondary);
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}

.usage-bar { 
  height: 100%;
  background: var(--color-primary);
  position: relative;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* 时间线 */
.timeline { display: grid; gap: .75rem; }
.timeline-item { display: grid; grid-template-columns: 120px 1fr; align-items: center; }
.timeline .time { color: var(--text-secondary); }

/* 终端 */
.terminal-modal { 
  background: var(--dark-card); 
  color: var(--color-primary);
  border: 1px solid var(--dark-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.terminal-body { 
  background: var(--color-neutral);
  border-radius: .5rem; 
  min-height: 50vh; 
  padding: .75rem; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  border: 1px solid var(--color-primary-bg);
  box-shadow: inset 0 0 20px var(--color-primary-bg);
}

.terminal-input .prompt { 
  color: var(--color-primary); 
  margin-right: .5rem;
  text-shadow: 0 0 10px var(--color-primary-bg);
}

.terminal-input input { 
  background: var(--dark-bg); 
  color: var(--color-primary); 
  border: 1px solid var(--dark-border);
  text-shadow: 0 0 5px var(--color-primary-bg);
}

.terminal-input input:focus {
  background: var(--dark-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-bg);
}

.terminal-input input::placeholder {
  color: var(--text-secondary);
}

.terminal-line { 
  white-space: pre-wrap;
  color: var(--color-primary);
}

/* 向导 */
.provider-card, .plan-card {
  background: var(--color-neutral);
  border: 1px solid var(--dark-border); 
  color: var(--text-primary); 
  border-radius: .75rem; 
  padding: .75rem; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: .5rem; 
  cursor: pointer; 
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}

.provider-card::before, .plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.provider-card:hover, .plan-card:hover { 
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.provider-card:hover::before, .plan-card:hover::before {
  left: 0;
  opacity: 0.1;
}

.provider-card.selected, .plan-card.selected { 
  border-color: var(--color-primary); 
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  background: var(--color-neutral);
}

/* 新建服务器表单样式 */
#wizardModal .modal-dialog {
  max-width: 1200px;
}

#wizardModal .form-control, #wizardModal .form-select {
  border-radius: 8px;
  border: 1px solid var(--dark-border);
  transition: all 0.3s ease;
}

#wizardModal .form-control:focus, #wizardModal .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

#wizardModal .card.bg-light {
  background-color: rgba(59, 130, 246, 0.05) !important;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

/* 浅色主题下的表单样式 */
body.theme-light #wizardModal .form-control, 
body.theme-light #wizardModal .form-select {
  background-color: #ffffff;
  border-color: #d1d5db;
  color: #374151;
}

body.theme-light #wizardModal .card.bg-light {
  background-color: #f8fafc !important;
  border-color: #e2e8f0;
}

/* 暗色主题下的新建服务器弹窗样式 */
body:not(.theme-light) #wizardModal .modal-content {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
}

body:not(.theme-light) #wizardModal .modal-header {
  background-color: var(--dark-card);
  border-bottom-color: var(--dark-border);
}

body:not(.theme-light) #wizardModal .modal-body {
  background-color: var(--dark-card);
}

body:not(.theme-light) #wizardModal .modal-footer {
  background-color: var(--dark-card);
  border-top-color: var(--dark-border);
}

body:not(.theme-light) #wizardModal .card.bg-light {
  background-color: rgba(17, 24, 39, 0.6) !important;
  border-color: var(--dark-border);
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .form-control, 
body:not(.theme-light) #wizardModal .form-select {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .form-control:focus, 
body:not(.theme-light) #wizardModal .form-select:focus {
  background-color: var(--dark-card);
  border-color: var(--color-primary);
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .form-control::placeholder {
  color: var(--text-secondary);
}

body:not(.theme-light) #wizardModal .form-label {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .form-check-label {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .modal-title {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal h6 {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .text-muted {
  color: var(--text-secondary) !important;
}

body:not(.theme-light) #wizardModal .fw-semibold {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .fw-bold {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .text-primary {
  color: var(--color-primary) !important;
}

body:not(.theme-light) #wizardModal .card-title {
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .provider-card,
body:not(.theme-light) #wizardModal .plan-card {
  background: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .provider-card.selected,
body:not(.theme-light) #wizardModal .plan-card.selected {
  border-color: var(--color-primary);
  background: var(--color-neutral);
}

body:not(.theme-light) #wizardModal .form-check-input {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
}

body:not(.theme-light) #wizardModal .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

body:not(.theme-light) #wizardModal .form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

body:not(.theme-light) #wizardModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

body:not(.theme-light) #wizardModal hr {
  border-color: var(--dark-border);
}

body:not(.theme-light) #wizardModal .btn-outline-secondary {
  background-color: transparent;
  border-color: var(--dark-border);
  color: var(--text-secondary);
}

body:not(.theme-light) #wizardModal .btn-outline-secondary:hover {
  background-color: var(--dark-border);
  border-color: var(--dark-border);
  color: var(--text-primary);
}

body:not(.theme-light) #wizardModal .btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

body:not(.theme-light) #wizardModal .btn-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.provider-card img { 
  width: 24px; 
  height: 24px; 
  filter: invert(84%);
  transition: filter 0.3s ease;
}

.provider-card:hover img, .plan-card:hover img {
  filter: invert(84%) drop-shadow(0 0 5px rgba(59, 130, 246, 0.5));
}

/* 交互动画 */
.card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.btn:hover { filter: brightness(1.05); }

/* 表单错误抖动 */
.shake { animation: shake .25s linear; }
@keyframes shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }

/* 表单错误样式 */
.form-control.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 .1rem rgba(239,68,68,.2); }
.input-group-text.invalid { border-color: #ef4444; color: #ef4444; }

/* 响应式 */
@media (max-width: 1024px) {
  .timeline-item { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -260px; top: 0; bottom: 0; width: var(--sidebar-width); transition: left .25s ease; z-index: 999; }
  .sidebar.open { left: 0; }
  .topbar { grid-column: 1; }
  .content { grid-column: 1; }
}

/* 亮色主题覆盖 */
body.theme-light { background: #f5f7fb; color: #111827; }
/* 亮色主题下的sidebar和topbar */
body.theme-light .sidebar { background: #ffffff; border-right-color: #e5e7eb; }
body.theme-light .topbar { background: #ffffff; border-bottom-color: #e5e7eb; }

/* 暗色主题下的sidebar和topbar */
body:not(.theme-light) .sidebar { 
  background: var(--dark-card); 
  border-right-color: var(--dark-border); 
}
body:not(.theme-light) .topbar { 
  background: var(--dark-card); 
  border-bottom-color: var(--dark-border); 
}

/* 暗色主题下的搜索框和其他UI元素 */
body:not(.theme-light) .search-box { 
  background: var(--dark-card); 
  border-color: var(--dark-border); 
}
body:not(.theme-light) .btn-google:hover { 
  background: var(--dark-card); 
}

/* 暗色模式下的进度条样式修复 */
body:not(.theme-light) .progress {
  background-color: var(--dark-border) !important;
  border-radius: 4px;
}

body:not(.theme-light) .progress-bar {
  background-color: var(--color-primary) !important;
}

body:not(.theme-light) .progress-bar.bg-success {
  background-color: var(--color-success) !important;
}

body:not(.theme-light) .progress-bar.bg-warning {
  background-color: var(--color-warning) !important;
}

body:not(.theme-light) .progress-bar.bg-info {
  background-color: var(--color-info) !important;
}

/* 暗色模式下的IP地址容器样式修复 */
body:not(.theme-light) .ip-container {
  background: transparent !important;
}

body:not(.theme-light) .ip-text {
  background: transparent !important;
  color: var(--text-primary) !important;
}
body.theme-light .menu .menu-item { color: #334155; }
body.theme-light .menu .menu-item.active { background: var(--color-primary); color: white; }
body.theme-light .menu .menu-item:hover { background: var(--color-primary-light); color: #111827; }
body.theme-light .btn-icon { border-color: #cbd5e1; color: #374151; }
body.theme-light .btn-icon:hover { background: #f3f4f6; }
body.theme-light .search-box { background: #ffffff; border-color: #cbd5e1; }
body.theme-light .search-box i { color: #64748b; }
body.theme-light .search-box .form-control { color: #111827; }
body.theme-light .form-control { 
  background: #ffffff; 
  border-color: #d1d5db; 
  color: #111827; 
}
body.theme-light .form-control:focus { 
  background: #ffffff; 
  border-color: var(--color-primary); 
  color: #111827; 
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
body.theme-light .form-control::placeholder { color: #6b7280; }
body.theme-light .input-group-text { 
  background: #f9fafb; 
  border-color: #d1d5db; 
  color: #6b7280; 
}
body.theme-light .form-select { 
  background: #ffffff; 
  border-color: #d1d5db; 
  color: #111827; 
}
body.theme-light .form-select:focus { 
  background: #ffffff; 
  border-color: var(--color-primary); 
  color: #111827; 
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
body.theme-light .form-check-input { 
  background-color: #ffffff; 
  border-color: #d1d5db; 
}
body.theme-light .form-check-input:checked { 
  background-color: var(--color-primary); 
  border-color: var(--color-primary); 
}
body.theme-light .form-check-input:focus { 
  border-color: var(--color-primary); 
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
body.theme-light .btn-outline-secondary { 
  border-color: #9ca3af !important; 
  color: #374151 !important; 
  font-weight: 500;
}
body.theme-light .btn-outline-secondary:hover { 
  background: #f3f4f6 !important; 
  border-color: var(--color-primary) !important; 
  color: #111827 !important; 
}
body.theme-light .btn-outline-secondary.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
body.theme-light .btn-outline-primary { 
  border-color: var(--color-primary); 
  color: var(--color-primary); 
}
body.theme-light .btn-outline-primary:hover { 
  background: var(--color-primary); 
  border-color: var(--color-primary); 
  color: #ffffff; 
}
body.theme-light .btn-primary { 
  background: var(--color-primary); 
  border-color: var(--color-primary); 
  color: #ffffff; 
}
body.theme-light .btn-primary:hover { 
  background: var(--color-primary); 
  border-color: var(--color-primary); 
  color: #ffffff; 
}
body.theme-light .btn-secondary { 
  background: #6b7280; 
  border-color: #6b7280; 
  color: #ffffff; 
}
body.theme-light .btn-secondary:hover { 
  background: #4b5563; 
  border-color: #4b5563; 
  color: #ffffff; 
}
body.theme-light .btn-dark { 
  background: #1f2937; 
  border-color: #1f2937; 
  color: #ffffff; 
}
body.theme-light .btn-dark:hover { 
  background: #111827; 
  border-color: #111827; 
  color: #ffffff; 
}
body.theme-light .dropdown-menu { 
  background: #ffffff; 
  border: 1px solid #e5e7eb; 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); 
}
body.theme-light .dropdown-item { 
  color: #111827; 
}
body.theme-light .dropdown-item:hover, 
body.theme-light .dropdown-item:focus { 
  background: #f9fafb; 
  color: #111827; 
}
body.theme-light .dropdown-item.active { 
  background: var(--color-primary); 
  color: #ffffff; 
}
body.theme-light .dropdown-divider { 
  border-color: #e5e7eb; 
}
body.theme-light .nav-tabs .nav-link { 
  color: #6b7280; 
  border-color: transparent; 
}
body.theme-light .nav-tabs .nav-link:hover { 
  color: #111827; 
  border-color: #e5e7eb; 
}
body.theme-light .nav-tabs .nav-link.active { 
  color: #111827; 
  background: #ffffff; 
  border-color: #e5e7eb #e5e7eb #ffffff; 
}
body.theme-light .nav-pills .nav-link { 
  color: #6b7280; 
}
body.theme-light .nav-pills .nav-link:hover { 
  color: #111827; 
  background: #f9fafb; 
}
body.theme-light .nav-pills .nav-link.active { 
  background: var(--color-primary); 
  color: #ffffff; 
}
body.theme-light .stat-value { 
  color: #111827; 
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.2); 
}
body.theme-light .text-glow { 
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3); 
}

/* 浅色主题卡片头部文字样式 */
body.theme-light .card-header .fw-semibold,
body.theme-light .card-header span {
  color: #1f2937 !important;
}

body.theme-light .card-header .text-glow {
  color: #1f2937 !important;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* 浅色主题IP文字样式 */
body.theme-light .ip-text {
  color: #374151 !important;
  text-shadow: 0 0 3px rgba(59, 130, 246, 0.2);
  font-weight: 500;
}

/* 浅色主题text-muted样式 */
body.theme-light .text-muted {
  color: #6b7280 !important;
}

body.theme-light .small.text-muted {
  color: #9ca3af !important;
}
body.theme-light .stat-card { 
  background: #ffffff !important; 
  border: 1px solid #e5e7eb !important; 
  color: #111827 !important;
}
/* 移除亮色主题统计卡片悬停特效 */
body.theme-light .card { background: #ffffff; border-color: #e5e7eb; }
/* 浅色主题表格样式 - 增强优先级 */
body.theme-light .table,
body.theme-light table { 
  background: #ffffff !important; 
  border-color: #e5e7eb !important; 
}
body.theme-light .table thead th,
body.theme-light table thead th { 
  color: #374151 !important; 
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
  border-bottom-color: #e5e7eb !important;
  border-right-color: rgba(229, 231, 235, 0.5) !important;
}
body.theme-light .table tbody td,
body.theme-light table tbody td { 
  color: #1f2937 !important; 
  background: #ffffff !important;
  border-bottom-color: rgba(229, 231, 235, 0.5) !important;
  border-right-color: rgba(229, 231, 235, 0.3) !important;
}
body.theme-light .table tbody tr,
body.theme-light table tbody tr { 
  background: #ffffff !important; 
}
/* 亮色主题表格行悬停效果 */
body.theme-light .table-row-hover:hover { 
  background-color: rgba(37, 99, 235, 0.06) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-1px);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
body.theme-light .usage { background: #e5e7eb; }
body.theme-light .timeline .time { color: #6b7280; }

/* 顶栏主题切换图标：日/月双图标样式 */
.theme-icon-sun, .theme-icon-moon { opacity: .6; transition: opacity .2s ease, color .2s ease; }
body.theme-light .theme-icon-sun { opacity: 1; color: #f59e0b; }
body.theme-light .theme-icon-moon { opacity: .5; color: #64748b; }
body:not(.theme-light) .theme-icon-sun { opacity: .5; color: #64748b; }
body:not(.theme-light) .theme-icon-moon { opacity: 1; color: #e5e7eb; }

/* Topbar layout adjustments */
.topbar-actions {
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Servers toolbar layout adjustments */
.servers-toolbar .search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.servers-toolbar .new-server-btn {
  white-space: nowrap;
  min-width: 130px;
  flex-shrink: 0;
}
.servers-toolbar .input-group {
  max-width: 480px;
  width: 100%;
}
.servers-toolbar .filter-group { flex-wrap: wrap; }
@media (min-width: 768px) {
  .servers-toolbar { flex-wrap: nowrap; }
  .servers-toolbar .search-wrap { flex-wrap: nowrap; }
}
@media (max-width: 767.98px) {
  .servers-toolbar { flex-direction: column; align-items: stretch; }
  .servers-toolbar .search-wrap { width: 100%; }
  .servers-toolbar .filter-group { width: 100%; }
}

/* 使用网格布局，进一步避免工具栏元素错位 */
.servers-toolbar { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
.servers-toolbar .filter-group { justify-content: flex-end; }
@media (max-width: 767.98px) {
  .servers-toolbar { grid-template-columns: 1fr; }
  .servers-toolbar .filter-group { justify-content: flex-start; }
}

/* 终端样式 */
.terminal-cursor {
  animation: blink 1s infinite;
  color: var(--color-primary);
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 服务器名称编辑样式 */
.server-name {
  cursor: pointer;
  transition: color 0.2s ease;
}

.server-name:hover {
  text-decoration: none !important;
  color: inherit !important;
  transition: none !important;
}

/* 面板按钮样式 */
.panel-btn {
  transition: all 0.2s ease;
}

.panel-btn:hover {
  transform: none !important;
  box-shadow: inherit !important;
  transition: none !important;
}

/* 服务器名称编辑容器样式 */
.server-name-container {
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.server-name-container .edit-btn {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.2s ease;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.server-name-container:hover .edit-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-10px) !important;
  transition: none !important;
}

.server-name-container .server-name {
  cursor: default;
  transition: none !important;
}

.server-name-container:hover .server-name {
  color: inherit !important;
  transition: none !important;
}

/* IP地址复制按钮样式 */
.copy-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-5px);
  position: relative;
  overflow: hidden;
}

.copy-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transition: left 0.3s ease;
  z-index: -1;
}

.copy-btn:hover {
  background-color: var(--color-primary);
  color: white;
  transform: scale(1.05) translateX(0);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.copy-btn:hover::before {
  left: 0;
}

.ip-container {
  min-width: 200px;
}

.ip-container .mb-1 {
  margin-bottom: 0.015rem !important;
}

.ip-container .d-flex:hover .copy-btn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.ip-text {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.2);
}

/* text-muted 暗色主题样式 */
.text-muted {
  color: var(--text-secondary) !important;
}

.small.text-muted {
  color: rgba(156, 163, 175, 0.9) !important;
}

/* 科技感增强效果 */
/* 数据流动画 */
@keyframes dataFlow {
  0% { transform: translateX(-100%) scaleX(0); }
  50% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(100%) scaleX(0); }
}

/* 全局科技感增强 - 修复悬停遮挡问题 */
.tech-glow {
  position: relative;
}

.tech-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.tech-glow:hover::after {
  opacity: 0;
  /* 移除遮挡效果，保持透明 */
}

/* 增强按钮科技感 */
.btn-gradient {
  position: relative;
  overflow: hidden;
}

.btn-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-neutral);
  transition: left 0.5s ease;
}

.btn-gradient:hover::before {
  left: 100%;
}

/* 卡片边框发光效果 */
.card-glow {
  position: relative;
}

.card-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--color-primary);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-glow:hover::before {
  opacity: 0 !important;
  transition: none !important;
}

/* 文字发光效果 */
.text-glow {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* 卡片头部文字样式 */
.card-header .fw-semibold,
.card-header span {
  color: var(--text-primary) !important;
}

.card-header .text-glow {
  color: var(--text-primary) !important;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* 脉冲动画 */
.pulse-slow {
  animation: pulseSlow 3s ease-in-out infinite;
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* 浮动动画 */
.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 旋转发光边框 */
.rotating-border {
  position: relative;
  overflow: hidden;
}

.rotating-border::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, var(--color-primary), transparent);
  animation: rotate 4s linear infinite;
  z-index: -1;
}

.rotating-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--dark-card);
  border-radius: inherit;
  z-index: -1;
}

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

/* 网站标签样式 */
.website-tags {
  position: relative;
}

.website-tags .badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.website-tags:hover .tag-edit-btn {
  opacity: 1;
  visibility: visible;
}

.tag-edit-btn {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}

.tag-edit-btn:hover {
  background: var(--color-accent);
  transform: scale(1.1);
}

/* 深色主题下的网站标签 */
body.theme-dark .website-tags .badge.bg-light {
  background-color: var(--dark-border) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--dark-border);
}

body.theme-dark .website-tags .badge.bg-light:hover {
  background-color: var(--dark-card) !important;
  color: var(--text-primary) !important;
}

/* 浅色主题下的网站标签 */
body.theme-light .website-tags .badge.bg-light {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6;
}

body.theme-light .website-tags .badge.bg-light:hover {
  background-color: #e9ecef !important;
  color: #495057 !important;
}

/* 新建网站模态框样式 */
.deployment-option {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
}

.deployment-option:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.deployment-option.selected {
  border-color: var(--primary-color);
  background-color: rgba(0, 123, 255, 0.05);
}

.deployment-option .form-check-input {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: scale(1.2);
}

.deployment-option .card-body {
  padding: 1.5rem;
}

.deployment-option i {
  transition: color 0.3s ease;
}

.deployment-option:hover i,
.deployment-option.selected i {
  color: var(--primary-color) !important;
}

/* 深色主题下的部署选项 */
body.theme-dark .deployment-option {
  background-color: var(--dark-card);
  border-color: var(--dark-border);
}

body.theme-dark .deployment-option:hover {
  border-color: var(--primary-color);
  background-color: var(--dark-hover);
}

body.theme-dark .deployment-option.selected {
  border-color: var(--primary-color);
  background-color: rgba(0, 123, 255, 0.1);
}

/* 模态框内的表单样式 */
#newWebsiteModal .form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

#newWebsiteModal .form-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

#newWebsiteModal h6 {
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
}

/* 网站标签输入区域 */
#websiteTags .badge {
  position: relative;
  padding-right: 2rem;
}

#websiteTags .badge .remove-tag {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
}

#websiteTags .badge .remove-tag:hover {
  opacity: 1;
}

/* Bootstrap颜色类四色方案覆盖 */
/* 主色 - 用于主要操作 */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.btn-primary { 
  background-color: var(--color-primary); 
  border-color: var(--color-primary); 
}
.btn-primary:hover { 
  background-color: var(--color-primary-dark); 
  border-color: var(--color-primary-dark); 
}

/* 次色 - 用于次要信息 */
.bg-secondary { background-color: var(--color-secondary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.btn-secondary { 
  background-color: var(--color-secondary); 
  border-color: var(--color-secondary); 
}
.btn-secondary:hover { 
  background-color: var(--color-secondary-dark); 
  border-color: var(--color-secondary-dark); 
}

/* 成功状态 - 使用绿色 */
.bg-success { background-color: var(--color-primary) !important; }
.text-success { color: var(--color-primary) !important; }
.border-success { border-color: var(--color-primary) !important; }
.btn-success { 
  background-color: var(--color-primary); 
  border-color: var(--color-primary); 
}
.btn-success:hover { 
  background-color: var(--color-primary-dark); 
  border-color: var(--color-primary-dark); 
}

/* 错误状态 - 使用红色 */
.bg-danger { background-color: var(--color-error) !important; }
.text-danger { color: var(--color-error) !important; }
.border-danger { border-color: var(--color-error) !important; }
.btn-danger { 
  background-color: var(--color-error); 
  border-color: var(--color-error); 
}
.btn-danger:hover { 
  background-color: var(--color-error-dark); 
  border-color: var(--color-error-dark); 
}

/* 中性色 - 用于信息状态 */
.bg-info { background-color: var(--color-primary-light) !important; }
.text-info { color: var(--color-primary-light) !important; }
.border-info { border-color: var(--color-primary-light) !important; }

/* 警告状态使用次色 */
.bg-warning { background-color: var(--color-secondary-light) !important; }
.text-warning { color: var(--color-secondary-light) !important; }
.border-warning { border-color: var(--color-secondary-light) !important; }

/* 浅色背景使用中性色 */
.bg-light { 
  background-color: var(--color-neutral-bg) !important; 
  color: var(--text-secondary) !important;
}
.text-light { color: var(--color-neutral-light) !important; }
.border-light { border-color: var(--color-neutral) !important; }

/* 优化表格设计 */
.table th {
  background-color: var(--color-neutral);
  border-bottom: 2px solid var(--color-neutral-dark);
  font-weight: 600;
  color: var(--color-secondary-dark);
}

/* 状态列特殊样式 - 绿色填充白字 */
.table td.status-cell {
  background-color: var(--color-primary) !important;
  color: white !important;
  font-weight: 600;
  border-radius: 6px;
  margin: 4px;
  padding: 8px 12px !important;
}

.table td.status-cell .status-dot {
  background-color: white !important;
  margin-right: 6px;
}

/* 停止状态使用红色 */
.table tr[data-status="stopped"] td.status-cell {
  background-color: var(--color-error) !important;
}

/* 移除停止状态悬停特效 */

/* 服务器名称列 - 浅绿色边框 */
.table td.server-name {
  border-left: 3px solid var(--color-primary-light);
  background-color: var(--color-primary-bg);
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* IP地址列 - 灰色背景 */
.table td.ip-cell {
  background-color: var(--color-neutral);
  color: var(--color-secondary-dark);
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9em;
}

/* 资源使用率列 - 简洁边框样式 */
.table td.usage-cell {
  border: 1px solid var(--color-neutral-dark);
  background-color: var(--color-neutral-light);
}

.table td.usage-cell .usage-bar {
  border-radius: 3px;
  height: 6px;
}

/* 操作列 - 无特殊背景 */
.table td.action-cell {
  background-color: transparent;
}

/* 移除表格行悬停特效 */

/* 深色保持原样 */
.bg-dark { background-color: var(--dark-card) !important; }
.text-dark { color: var(--text-primary) !important; }

/* 全局移除所有div元素的悬停效果 - 最高优先级 */
div:hover,
div.card:hover,
div.stat-card:hover,
div.server-item:hover,
div.server-card:hover,
div.info-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
  border-color: inherit !important;
  background-color: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  opacity: inherit !important;
  transition: none !important;
  animation: none !important;
}

/* WCAG AA标准暗色模式颜色对比度修复 */
@media (prefers-color-scheme: dark) {
  /* 确保主要文本对比度 >= 4.5:1 */
  div, .card, .stat-card, .server-item, .info-card {
    color: #f1f5f9 !important; /* 对比度 15.8:1 vs #0a0e1a */
    background-color: #1e293b !important; /* 深色背景 */
  }
  
  /* 次要文本对比度 >= 4.5:1 */
  .text-secondary, .text-muted, small {
    color: #cbd5e1 !important; /* 对比度 9.2:1 vs #0a0e1a */
  }
  
  /* 卡片背景确保足够对比度 */
  .card, .stat-card {
    background-color: #1e293b !important;
    border-color: #334155 !important; /* 对比度 3.8:1 */
  }
  
  /* 按钮文本确保高对比度 */
  .btn, button {
    color: #ffffff !important; /* 对比度 21:1 */
  }
  
  /* 链接颜色确保可访问性 */
  a, .link {
    color: #60a5fa !important; /* 对比度 6.2:1 vs #0a0e1a */
  }
}

/* 强制暗色模式样式 - 覆盖系统偏好 */
body:not(.theme-light) div,
body:not(.theme-light) .card,
body:not(.theme-light) .stat-card,
body:not(.theme-light) .server-item,
body:not(.theme-light) .info-card {
  color: #f1f5f9 !important;
  background-color: #1e293b !important;
}

body:not(.theme-light) .text-secondary,
body:not(.theme-light) .text-muted,
body:not(.theme-light) small {
  color: #cbd5e1 !important;
}

/* 特定div元素的明确暗色模式样式规则 */
@media (prefers-color-scheme: dark) {
  /* 统计卡片容器 */
  .row.g-3.mb-3 > .col-12.col-md-3 > .card.stat-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }
  
  /* 服务器列表卡片 */
  .card.tech-glow.card-glow {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }
  
  /* 服务器名称容器 */
  .server-name-container {
    color: #f1f5f9 !important;
    background-color: transparent !important;
  }
  
  /* IP地址容器 */
  .ip-container {
    color: #f1f5f9 !important;
    background-color: transparent !important;
  }
  
  /* 卡片主体 */
  .card-body {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
  }
}

/* 强制暗色模式样式 - 针对特定div元素 */
body:not(.theme-light) .row.g-3.mb-3 > .col-12.col-md-3 > .card.stat-card,
body:not(.theme-light) .card.tech-glow.card-glow {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body:not(.theme-light) .server-name-container,
body:not(.theme-light) .ip-container,
body:not(.theme-light) .card-body {
  color: #f1f5f9 !important;
  background-color: transparent !important;
}

/* 确保所有div子元素继承正确的颜色 */
body:not(.theme-light) div div,
body:not(.theme-light) .card div,
body:not(.theme-light) .stat-card div {
  color: inherit !important;
}

/* 响应式设计 - 移动端优化 */
@media (max-width: 768px) {
  .card.stat-card,
  .card.tech-glow {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    margin-bottom: 1rem;
  }
  
  body.theme-light .card.stat-card,
  body.theme-light .card.tech-glow {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
  }
}

/* 跨浏览器兼容性和防止布局偏移 */
* {
  box-sizing: border-box;
}

/* 防止闪烁和布局偏移 */
.card, .stat-card, div {
  will-change: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

/* 仅针对特定元素移除悬停过渡效果 - 不影响选中效果 */
.card, .card::before, .card::after,
.stat-card, .stat-card::before, .stat-card::after,
.server-name, .server-name::before, .server-name::after,
.panel-btn, .panel-btn::before, .panel-btn::after,
.server-name-container, .server-name-container::before, .server-name-container::after {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* 确保在Safari中正确显示 */
@supports (-webkit-appearance: none) {
  .card, .stat-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* 确保在Firefox中正确显示 */
@-moz-document url-prefix() {
  .card, .stat-card {
    background-clip: padding-box;
  }
}

/* 确保在Edge中正确显示 */
@supports (-ms-ime-align: auto) {
  .card, .stat-card {
    background-attachment: scroll;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .card, .stat-card {
    border-width: 2px !important;
    border-style: solid !important;
  }
  
  body:not(.theme-light) .card,
  body:not(.theme-light) .stat-card {
    border-color: #ffffff !important;
    color: #ffffff !important;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .card, .stat-card, .server-name, .panel-btn, .server-name-container {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 文本选中效果 - 确保在所有模式下都清晰可见 */
::selection {
  background-color: #3b82f6 !important; /* 蓝色选中背景 */
  color: #ffffff !important; /* 白色文字 */
  text-shadow: none !important;
}

::-moz-selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* 暗色模式下的选中效果 */
body:not(.theme-light) ::selection {
  background-color: #60a5fa !important; /* 更亮的蓝色 */
  color: #000000 !important; /* 黑色文字确保对比度 */
}

body:not(.theme-light) ::-moz-selection {
  background-color: #60a5fa !important;
  color: #000000 !important;
}

/* 亮色模式下的选中效果 */
body.theme-light ::selection {
  background-color: #2563eb !important; /* 深蓝色 */
  color: #ffffff !important;
}

body.theme-light ::-moz-selection {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* 表格行选中效果 */
.table tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  cursor: pointer;
}

body.theme-light .table tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

/* 服务器列表选中效果 */
.server-row {
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.server-row:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), inset 3px 0 0 var(--bs-primary) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.server-row.selected {
    background-color: rgba(13, 110, 253, 0.1) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 0 0 1px rgba(13, 110, 253, 0.2);
}

.server-row.selected:hover {
    background-color: rgba(13, 110, 253, 0.15) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 0 0 1px rgba(13, 110, 253, 0.3);
}

/* 暗色模式下的选中效果 */
[data-bs-theme="dark"] .server-row:hover {
    background-color: var(--bs-gray-800) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

[data-bs-theme="dark"] .server-row.selected {
    background-color: rgba(13, 110, 253, 0.2) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 0 0 1px rgba(13, 110, 253, 0.3);
}

[data-bs-theme="dark"] .server-row.selected:hover {
    background-color: rgba(13, 110, 253, 0.25) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 0 0 1px rgba(13, 110, 253, 0.4);
}

/* 复选框样式优化 */
.server-checkbox {
    transform: scale(1.1);
    cursor: pointer;
}

.server-checkbox:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* 全选复选框样式 */
#selectAllServers {
    transform: scale(1.1);
    cursor: pointer;
}

/* 批量操作栏样式 */
.batch-operations {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bs-light);
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    animation: slideIn 0.3s ease;
}

[data-bs-theme="dark"] .batch-operations {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-700);
}

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

/* 选中计数徽章样式 */
#selectedCount {
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* 批量操作按钮样式 */
.batch-operations .btn {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
}

.batch-operations .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ==================== 网站列表选中效果样式 ==================== */

/* 方案选择器 - 通过body class控制 */
/* 默认使用方案A (Material Design) */

/* 网站行基础样式 */
.website-row {
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    margin: 2px 0;
    overflow: hidden;
}

/* ==================== 方案A: Material Design风格 ==================== */
/* 基于Google Material Design 3.0规范 */

/* 涟漪效果基础 */
.website-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, transparent 1%, rgba(var(--bs-primary-rgb), 0.1) 1%);
    background-size: 15000%;
    transition: background-size 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.website-row:active::before {
    background-size: 100%;
    transition: background-size 0s;
}

/* Material Design 悬停效果 - 仅在未选中时显示 */
.website-row:hover:not(.selected) {
    background-color: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Material Design 选中效果 */
.website-row.selected {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    box-shadow: 
        0 2px 8px rgba(var(--bs-primary-rgb), 0.24),
        0 1px 3px rgba(0, 0, 0, 0.12),
        inset 4px 0 0 var(--bs-primary);
    color: #212529 !important;
    transform: translateY(-1px);
    z-index: 2;
}

/* Material Design 选中行的悬停效果 */
.website-row.selected:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.16) !important;
    box-shadow: 
        0 4px 12px rgba(var(--bs-primary-rgb), 0.32),
        0 2px 4px rgba(0, 0, 0, 0.16),
        inset 4px 0 0 var(--bs-primary);
    color: #212529 !important;
    transform: translateY(-2px);
}

/* ==================== 方案B: Apple HIG风格 ==================== */
/* 基于Apple Human Interface Guidelines */

body.apple-style .website-row {
    transition: all 0.2s ease-out;
    border-radius: 12px;
    margin: 1px 0;
    backdrop-filter: blur(10px);
}

/* Apple风格悬停效果 */
body.apple-style .website-row:hover:not(.selected) {
    background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transform: scale(1.005);
}

/* Apple风格选中效果 */
body.apple-style .website-row.selected {
    background: linear-gradient(135deg, 
        rgba(var(--bs-primary-rgb), 0.15) 0%, 
        rgba(var(--bs-primary-rgb), 0.1) 100%) !important;
    box-shadow: 
        0 3px 15px rgba(var(--bs-primary-rgb), 0.25),
        0 1px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    color: #212529 !important;
    transform: scale(1.01);
}

/* Apple风格选中行悬停效果 */
body.apple-style .website-row.selected:hover {
    background: linear-gradient(135deg, 
        rgba(var(--bs-primary-rgb), 0.2) 0%, 
        rgba(var(--bs-primary-rgb), 0.15) 100%) !important;
    box-shadow: 
        0 5px 20px rgba(var(--bs-primary-rgb), 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.015);
}

/* ==================== 方案C: 现代极简风格 ==================== */
/* 基于现代极简设计理念，注重功能性和清晰度 */

body.minimal-style .website-row {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 6px;
    margin: 0;
    border-left: 3px solid transparent;
}

/* 极简风格悬停效果 */
body.minimal-style .website-row:hover:not(.selected) {
    background-color: rgba(var(--bs-primary-rgb), 0.03) !important;
    border-left-color: rgba(var(--bs-primary-rgb), 0.3);
    transform: translateX(4px);
}

/* 极简风格选中效果 */
body.minimal-style .website-row.selected {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    border-left-color: var(--bs-primary);
    color: #212529 !important;
    position: relative;
    transform: translateX(6px);
}

/* 极简风格选中指示器 */
body.minimal-style .website-row.selected::after {
    content: '✓';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-primary);
    font-weight: bold;
    font-size: 14px;
    opacity: 0.8;
}

/* 极简风格选中行悬停效果 */
body.minimal-style .website-row.selected:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    border-left-color: var(--bs-primary);
    transform: translateX(8px);
}

body.minimal-style .website-row.selected:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* ==================== 暗色模式支持 ==================== */

/* Material Design 暗色模式 */
[data-bs-theme="dark"] .website-row:hover:not(.selected) {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .website-row.selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    box-shadow: 
        0 2px 8px rgba(var(--bs-primary-rgb), 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 4px 0 0 var(--bs-primary);
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .website-row.selected:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.25) !important;
    box-shadow: 
        0 4px 12px rgba(var(--bs-primary-rgb), 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 4px 0 0 var(--bs-primary);
    color: #f8f9fa !important;
}

/* Apple HIG 暗色模式 */
[data-bs-theme="dark"] body.apple-style .website-row:hover:not(.selected) {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] body.apple-style .website-row.selected {
    background: linear-gradient(135deg, 
        rgba(var(--bs-primary-rgb), 0.25) 0%, 
        rgba(var(--bs-primary-rgb), 0.2) 100%) !important;
    box-shadow: 
        0 3px 15px rgba(var(--bs-primary-rgb), 0.4),
        0 1px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.5);
    color: #f8f9fa !important;
}

/* 极简风格 暗色模式 */
[data-bs-theme="dark"] body.minimal-style .website-row:hover:not(.selected) {
    background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
    border-left-color: rgba(var(--bs-primary-rgb), 0.5);
}

[data-bs-theme="dark"] body.minimal-style .website-row.selected {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: #f8f9fa !important;
}

/* ==================== 方案切换器样式 ==================== */
.style-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .style-selector {
    background: rgba(33, 37, 41, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.style-selector select {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.style-selector select:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* 网站复选框样式优化 */
.website-checkbox {
    transform: scale(1.05);
    cursor: pointer;
    margin-right: 0.5rem;
    accent-color: var(--bs-primary);
}

.website-checkbox:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.website-checkbox:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* 网站全选复选框样式 */
#selectAllWebsites {
    transform: scale(1.05);
    cursor: pointer;
    accent-color: var(--bs-primary);
}

#selectAllWebsites:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* 网站选中计数徽章样式 */
#selectedWebsiteCount {
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 500;
    min-width: 80px;
    text-align: center;
}

/* 网站表格布局稳定性 */
.websites-table {
    table-layout: fixed;
    width: 100%;
}

.websites-table th:first-child,
.websites-table td:first-child {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}

.websites-table th:nth-child(2),
.websites-table td:nth-child(2) {
    width: 25%;
    min-width: 200px;
}

.websites-table th:nth-child(3),
.websites-table td:nth-child(3) {
    width: 15%;
    text-align: center;
}

.websites-table th:nth-child(4),
.websites-table td:nth-child(4) {
    width: 20%;
    text-align: center;
}

.websites-table th:nth-child(5),
.websites-table td:nth-child(5) {
    width: 15%;
    text-align: center;
}

.websites-table th:last-child,
.websites-table td:last-child {
    width: 25%;
    text-align: center;
}

/* 防止内容溢出 */
.websites-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.websites-table td:first-child,
.websites-table td:last-child {
    white-space: normal;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .website-row.selected {
        background-color: rgba(13, 110, 253, 0.2) !important;
        border-left-width: 4px;
        box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.4);
    }
    
    .website-row:hover:not(.selected) {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-left-width: 4px;
    }
    
    [data-bs-theme="dark"] .website-row.selected {
        background-color: rgba(13, 110, 253, 0.3) !important;
        box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.5);
    }
    
    [data-bs-theme="dark"] .website-row:hover:not(.selected) {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .website-row {
        transition: none;
    }
    
    .website-checkbox,
    #selectAllWebsites {
        transition: none;
    }
}

/* 键盘导航支持 */
.website-row:focus-within {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* 确保按钮在行内不被悬停效果影响 */
.website-row .btn,
.website-row .dropdown-toggle {
    position: relative;
    z-index: 1;
}

.website-row .btn:hover,
.website-row .dropdown-toggle:hover {
    z-index: 2;
}

/* 移动端响应式优化 */
@media (max-width: 768px) {
    /* 移动端表格列宽调整 */
    .websites-table th:first-child,
    .websites-table td:first-child {
        width: 35px;
    }
    
    .websites-table th:nth-child(2),
    .websites-table td:nth-child(2) {
        width: 40%;
        min-width: 150px;
    }
    
    .websites-table th:nth-child(3),
    .websites-table td:nth-child(3) {
        width: 20%;
    }
    
    .websites-table th:nth-child(4),
    .websites-table td:nth-child(4) {
        display: none; /* 移动端隐藏服务器列 */
    }
    
    .websites-table th:nth-child(5),
    .websites-table td:nth-child(5) {
        width: 20%;
    }
    
    .websites-table th:last-child,
    .websites-table td:last-child {
        width: 20%;
    }
    
    /* 移动端批量操作栏优化 */
    .batch-operations {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .batch-operations .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* 移动端复选框优化 */
    .website-checkbox,
    #selectAllWebsites {
        transform: scale(1.2);
        margin: 0.25rem;
    }
    
    /* 移动端选中效果优化 */
    .website-row.selected {
        border-left-width: 4px;
    }
    
    .website-row:hover:not(.selected) {
        border-left-width: 4px;
    }
}

@media (max-width: 576px) {
    /* 超小屏幕优化 */
    .websites-table th:nth-child(5),
    .websites-table td:nth-child(5) {
        display: none; /* 超小屏幕隐藏SSL列 */
    }
    
    .websites-table th:last-child,
    .websites-table td:last-child {
        width: 30%;
    }
    
    /* 超小屏幕批量操作 */
    .batch-operations .btn {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    #selectedWebsiteCount {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .website-row {
        cursor: default;
    }
    
    /* 触摸设备上禁用悬停效果，但不影响方案样式 */
    .website-row:hover:not(.selected) {
        transform: none;
        box-shadow: none;
    }
    
    /* 触摸设备上的选中效果更明显 */
    .website-row.selected {
        transform: none;
    }
    
    /* Material Design 触摸优化 - 移除!important以允许方案切换 */
    .website-row.selected {
        background-color: rgba(13, 110, 253, 0.15);
        box-shadow: inset 4px 0 0 #0d6efd;
    }
    
    /* Apple HIG 触摸优化 - 移除!important以允许方案切换 */
    body.apple-style .website-row.selected {
        background: linear-gradient(135deg, 
            rgba(13, 110, 253, 0.2) 0%, 
            rgba(13, 110, 253, 0.15) 100%);
        border: 1px solid rgba(13, 110, 253, 0.4);
        border-radius: 8px;
    }
    
    /* 现代极简 触摸优化 - 移除!important以允许方案切换 */
    body.minimal-style .website-row.selected {
        background-color: rgba(13, 110, 253, 0.12);
        border-left: 4px solid #0d6efd;
    }
    
    [data-bs-theme="dark"] .website-row.selected {
        background-color: rgba(13, 110, 253, 0.25);
    }
}

/* 打印样式优化 */
@media print {
    .batch-operations,
    .website-checkbox,
    #selectAllWebsites,
    .website-row .btn {
        display: none !important;
    }
    
    .website-row.selected {
        background-color: #f0f0f0 !important;
        border-left: 3px solid #000 !important;
        box-shadow: none !important;
    }
    
    .websites-table th:first-child,
    .websites-table td:first-child {
        display: none;
    }
}

/* 输入框选中效果 */
input:focus, textarea:focus, select:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  border-color: #3b82f6 !important;
}

body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
  outline-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* 按钮焦点效果 */
button:focus, .btn:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

body.theme-light button:focus,
body.theme-light .btn:focus {
  outline-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
}

/* 链接选中效果 */
a::selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

a::-moz-selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 卡片内容选中效果 */
.card ::selection,
.stat-card ::selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

.card ::-moz-selection,
.stat-card ::-moz-selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 表格内容选中效果 */
.table ::selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

.table ::-moz-selection {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 确保选中效果不被其他样式覆盖 */
* {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 但是按钮和某些交互元素应该保持不可选中 */
button, .btn, input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 服务器名称应该可以选中 */
.server-name, .server-name * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* IP地址应该可以选中 */
.ip-container, .ip-container * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}