/* 全局样式 */
  body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
  }
  
  .footer {
      margin-top: auto;
  }
  
  /* 图表容器 */
  .chart-container {
      position: relative;
      height: 200px;
      width: 100%;
  }
  
  /* 卡片样式 */
  .card {
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      margin-bottom: 1.5rem;
  }
  
  .card-header {
      background-color: rgba(0, 0, 0, 0.03);
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  /* 进度条样式 */
  .progress {
      height: 0.75rem;
  }
  
  /* 表格样式 */
  .table th {
      font-weight: 600;
  }
  
  /* Modal centering and light theme transparency */
  .modal-dialog {
      display: flex;
      align-items: center;
      min-height: calc(100% - 1rem); /* Adjust as needed */
  }
  
  .modal-content {
      background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white for light theme */
      /* backdrop-filter: blur(5px); /* Optional: adds a blur effect to content behind modal */
  }
  
  
  /* 响应式调整 */
  @media (max-width: 768px) {
      .chart-container {
          height: 150px;
      }
  
      /* 移动端隐藏表格，显示卡片 */
      .table-responsive {
          display: none !important;
      }
  
      .mobile-card-container {
          display: block !important;
      }
  
      /* 移动端隐藏桌面端按钮 */
      .desktop-only {
          display: none !important;
      }
  
      /* 移动端导航栏优化 */
      .navbar-brand {
          font-size: 1rem;
          margin-right: 0.5rem;
      }
  
      .container {
          padding-left: 10px;
          padding-right: 10px;
      }
  
      /* 移动端导航栏按钮组优化 */
      .navbar .d-flex {
          gap: 0.25rem;
          flex-wrap: wrap;
      }
  
      .navbar .btn-sm {
          padding: 0.25rem 0.5rem;
          font-size: 0.75rem;
          min-width: auto;
          border-width: 1px;
      }
  
      .navbar .nav-link {
          font-size: 0.8rem;
          padding: 0.25rem 0.5rem;
          margin: 0;
      }
  
      /* 移动端导航栏下拉菜单优化 - 精简版 */
      .dropdown-menu {
          font-size: 0.875rem;
          min-width: 150px;
          z-index: 10000 !important; /* 统一使用最高层级 */
          position: absolute !important; /* 使用absolute定位确保正确显示 */
          /* 移除position: fixed，让Bootstrap自动处理定位 */
      }
  
      /* 确保导航栏有合适的层级但不创建层叠上下文 */
      .navbar {
          position: relative;
          z-index: 1000; /* 给导航栏一个中等层级 */
      }
  
      .navbar .dropdown-item {
          padding: 0.5rem 1rem;
          font-size: 0.875rem;
      }
  
      .navbar .dropdown-item i {
          width: 1.2rem;
      }
  
      /* 移动端管理区域标题行优化 */
      .admin-header-row {
          display: flex;
          flex-direction: column;
          gap: 0.75rem; /* 减少移动端间隔 */
      }
  
      .admin-header-title h2 {
          font-size: 1.5rem;
          margin-bottom: 0;
      }
  
      .admin-header-content {
          display: flex;
          flex-direction: column;
          gap: 0.5rem; /* 减少移动端间隔 */
      }
  
      .admin-settings-form {
          order: 2; /* 设置表单在移动端显示在按钮组下方 */
      }
  
      .admin-actions-group {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          order: 1; /* 按钮组在移动端显示在上方 */
      }
  
      .settings-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
      }
  
      .settings-group .form-label {
          font-size: 0.875rem;
          margin-bottom: 0;
          font-weight: 500;
      }
  
      .settings-group .input-group {
          max-width: 250px;
      }
  
      /* 超小屏幕优化 (小于400px) */
      @media (max-width: 400px) {
          .navbar-brand {
              font-size: 0.9rem;
          }
  
          .navbar .btn-sm {
              padding: 0.2rem 0.4rem;
              font-size: 0.7rem;
          }
  
          .navbar .nav-link {
              font-size: 0.75rem;
              padding: 0.2rem 0.4rem;
          }
  
          .container {
              padding-left: 8px;
              padding-right: 8px;
          }
      }
  
      /* 移动端按钮优化 */
      .btn-sm {
          padding: 0.375rem 0.75rem;
          font-size: 0.875rem;
      }
  }
  
  /* 桌面端隐藏卡片容器和移动端菜单 */
  @media (min-width: 769px) {
      .mobile-card-container {
          display: none !important;
      }
  
      .mobile-only {
          display: none !important;
      }
  }
  
      /* 桌面端管理区域标题行样式 */
      .admin-header-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 0.75rem; /* 减少桌面端间隔 */
      }
  
      .admin-header-title {
          flex: 0 0 auto;
      }
  
      .admin-header-content {
          display: flex;
          align-items: center;
          gap: 1rem;
          flex: 1 1 auto;
          justify-content: flex-end;
      }
  
      .admin-settings-form {
          order: 1;
          margin-right: auto; /* 推送到左侧 */
      }
  
      .admin-actions-group {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          order: 2;
      }
  
      .settings-group {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 0.5rem;
      }
  
      .settings-group .form-label {
          margin-bottom: 0;
          white-space: nowrap;
          font-size: 0.875rem;
      }
  }
  
  /* 单一卡片布局样式 */
  .card.shadow-sm {
      border: none;
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1) !important;
  }
  
  .card-title {
      color: var(--bs-primary);
      font-weight: 600;
  }
  
  .card-title i {
      color: var(--bs-primary);
  }
  
  /* 分隔线样式 */
  hr.my-4 {
      border-color: var(--bs-border-color-translucent);
      opacity: 0.5;
  }
  
  /* 暗色主题下的单一卡片样式 */
  [data-bs-theme="dark"] .card.shadow-sm {
      background-color: var(--bs-dark);
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3) !important;
  }
  
  [data-bs-theme="dark"] .card-title {
      color: #86b7fe;
  }
  
  [data-bs-theme="dark"] .card-title i {
      color: #86b7fe;
  }
  
  /* VPS监控面板标题 - 蓝色加粗 */
  .navbar-brand {
      color: var(--bs-primary) !important;
      font-weight: 600 !important;
  }
  [data-bs-theme="dark"] .navbar-brand {
      color: #86b7fe !important;
  }
  
  /* 导航栏主题跟随 - 精简版 */
  [data-bs-theme="light"] .navbar { background-color: #f8f9fa !important; }
  [data-bs-theme="dark"] .navbar { background-color: #212529 !important; }
  
  /* 导航栏文字主题跟随 */
  [data-bs-theme="light"] .navbar .nav-link, [data-bs-theme="light"] .navbar a { color: #212529 !important; }
  [data-bs-theme="dark"] .navbar .nav-link, [data-bs-theme="dark"] .navbar a { color: #ffffff !important; }
  
  /* 导航栏按钮主题跟随 */
  [data-bs-theme="light"] .navbar .btn-outline-light { border-color: #212529 !important; color: #212529 !important; }
  [data-bs-theme="dark"] .navbar .btn-outline-light { border-color: #ffffff !important; color: #ffffff !important; }
  
  /* 导航栏图标主题跟随 */
  [data-bs-theme="light"] .navbar i { color: #212529 !important; }
  [data-bs-theme="dark"] .navbar i { color: #ffffff !important; }
  
  /* 底部版权信息 - 主题跟随调大 */
  .footer .text-muted { font-size: 0.95rem !important; font-weight: 500; }
  .footer a.text-muted { font-size: 1.1rem !important; }
  .footer .text-muted { color: #212529 !important; }
  [data-bs-theme="dark"] .footer .text-muted { color: #ffffff !important; }
  
  [data-bs-theme="dark"] hr.my-4 {
      border-color: rgba(255, 255, 255, 0.2);
  }
  
  /* 固定底部页脚样式 */
  body {
      padding-bottom: 60px; /* 为固定页脚留出空间 */
  }
  
  .footer.fixed-bottom {
      height: 35px;
      background-color: var(--bs-light) !important;
      border-top: 1px solid var(--bs-border-color);
      display: flex;
      align-items: center;
  }
  
  /* 暗色主题下的页脚 */
  [data-bs-theme="dark"] .footer.fixed-bottom {
      background-color: var(--bs-dark) !important;
      border-top-color: var(--bs-border-color);
  }
  
  /* 移动端卡片样式 */
  .mobile-card-container {
      display: none; /* 默认隐藏，通过媒体查询控制 */
      position: relative;
      z-index: 0; /* 降低容器层级，确保下拉菜单在上方 */
  }
  
  .mobile-server-card, .mobile-site-card {
      background: var(--bs-card-bg, #fff);
      border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      overflow: hidden;
      transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
      position: relative;
      z-index: 0; /* 降低卡片层级，确保下拉菜单在上方 */
  }
  
  @media (max-width: 768px) {
      .mobile-server-card:hover, .mobile-site-card:hover {
          box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
      }
  }
  
  .mobile-card-header {
      padding: 0.75rem;
      background-color: var(--bs-card-cap-bg, rgba(0,0,0,.03));
      border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 0; /* 降低卡片头部层级，确保下拉菜单在上方 */
  }
  
  .mobile-card-header-left {
      flex: 0 0 auto;
  }
  
  .mobile-card-header-right {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      font-size: 0.875rem;
  }
  
  .mobile-card-footer {
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
      font-size: 0.875rem;
      color: var(--bs-secondary);
  }
  
  @media (max-width: 768px) {
      .mobile-card-header:hover {
          background-color: var(--bs-card-cap-bg, rgba(0,0,0,.05));
      }
  }
  
  .mobile-card-title {
      font-weight: 600;
      margin: 0;
      font-size: 1rem;
      line-height: 1.3;
  }
  
  .mobile-card-status {
      flex-shrink: 0;
  }
  
  .mobile-card-body {
      padding: 0.75rem;
  }
  
  .mobile-card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
  }
  
  .mobile-card-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }
  
  /* 两列布局样式 */
  .mobile-card-two-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
  }
  
  .mobile-card-two-columns:last-child {
      border-bottom: none;
      padding-bottom: 0.25rem;
  }
  
  .mobile-card-column-item {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      min-height: 2rem;
      justify-content: center;
  }
  
  .mobile-card-column-item .mobile-card-label {
      font-size: 0.7rem;
      margin-bottom: 0;
      color: var(--bs-secondary-color, #6c757d);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.02em;
  }
  
  .mobile-card-column-item .mobile-card-value {
      font-size: 0.85rem;
      font-weight: 600;
      text-align: left;
      max-width: 100%;
      word-break: break-word;
      line-height: 1.2;
  }
  
  /* 移动端单行样式优化 */
  @media (max-width: 768px) {
      .mobile-card-row {
          padding: 0.5rem 0;
          min-height: 2rem;
          align-items: center;
      }
  
      .mobile-card-label {
          font-weight: 500;
          font-size: 0.875rem;
      }
  
      .mobile-card-value {
          font-weight: 600;
          font-size: 0.875rem;
          word-break: break-word;
      }
  }
  
  .mobile-card-label {
      font-weight: 500;
      color: var(--bs-secondary-color, #6c757d);
      font-size: 0.875rem;
  }
  
  .mobile-card-value {
      text-align: right;
      flex-shrink: 0;
      max-width: 60%;
  }
  
  
  
  /* 移动端进度条优化 */
  @media (max-width: 768px) {
      .progress {
          height: 1rem;
          margin-top: 0.25rem;
          border-radius: 0.5rem;
      }
  
      .progress span {
          font-size: 0.75rem;
          line-height: 1rem;
      }
  }
  
  /* 移动端状态徽章优化 */
  @media (max-width: 768px) {
      .badge {
          font-size: 0.75rem;
          padding: 0.35em 0.65em;
          border-radius: 0.375rem;
      }
  }
  
  /* 移动端历史记录条优化 */
  @media (max-width: 768px) {
      .mobile-history-container .history-bar-container {
          height: 1.5rem;
          border-radius: 0.25rem;
          overflow: hidden;
          display: flex;
          width: 100%;
          gap: 1px;
      }
  
      .mobile-history-container .history-bar {
          flex: 1;
          min-width: 0;
          border-radius: 1px;
          height: 100%;
      }
  }
  
  /* 移动端历史记录条优化 */
  .mobile-history-container {
      margin-top: 0.5rem;
  }
  
  .mobile-history-label {
      font-size: 0.75rem;
      color: var(--bs-secondary-color, #6c757d);
      margin-bottom: 0.25rem;
  }
  
  
  
  /* 移动端按钮优化 */
  @media (max-width: 768px) {
      .mobile-card-body .btn-sm {
          padding: 0.5rem 0.75rem;
          font-size: 0.8rem;
          border-radius: 0.375rem;
          transition: all 0.15s ease-in-out;
      }
  
      .mobile-card-body .d-flex.gap-2 {
          gap: 0.5rem !important;
      }
  
      .mobile-card-body .btn i {
          font-size: 0.875rem;
      }
  
      /* 移动端触摸反馈 */
      .mobile-card-header:active {
          background-color: var(--bs-card-cap-bg, rgba(0,0,0,.08)) !important;
      }
  
      .mobile-card-body .btn:active {
          opacity: 0.8;
      }
  
      /* 移动端容器标题优化 */
      .container h2 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
      }
  
      /* 移动端卡片标题层次优化 */
      .mobile-card-title {
          font-size: 1rem;
          line-height: 1.3;
          font-weight: 600;
      }
  
      /* 移动端管理页面按钮优化 */
      .admin-actions-group .btn {
          font-size: 0.875rem;
          padding: 0.5rem 0.75rem;
          border-radius: 0.375rem;
          transition: all 0.2s ease-in-out;
      }
  
      .admin-actions-group .btn:active {
          transform: scale(0.95);
      }
  
      .admin-actions-group .dropdown-toggle {
          min-width: auto;
      }
  
  
  
      /* 移动端卡片间距优化 */
      .mobile-server-card, .mobile-site-card {
          margin-bottom: 1rem;
      }
  
      .mobile-card-body {
          padding: 0.75rem;
      }
  
      .mobile-card-row {
          padding: 0.375rem 0;
          border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
      }
  
      .mobile-card-row:last-child {
          border-bottom: none;
      }
  }
  
  /* 自定义浅绿色进度条 */
  .bg-light-green {
      background-color: #90ee90 !important; /* LightGreen */
  }
  
  /* Custom styles for non-disruptive alerts in admin page */
  #serverAlert, #siteAlert, #telegramSettingsAlert {
      position: fixed !important; /* Use !important to override Bootstrap if necessary */
      top: 70px; /* Below navbar */
      left: 50%;
      transform: translateX(-50%);
      z-index: 1055; /* Higher than Bootstrap modals (1050) */
      padding: 0.75rem 1.25rem;
      /* margin-bottom: 1rem; /* Not needed for fixed */
      border: 1px solid transparent;
      border-radius: 0.25rem;
      min-width: 300px; /* Minimum width */
      max-width: 90%; /* Max width */
      text-align: center;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
      /* Ensure d-none works to hide them, !important might be needed if Bootstrap's .alert.d-none is too specific */
  }
  
  #serverAlert.d-none, #siteAlert.d-none, #telegramSettingsAlert.d-none {
      display: none !important;
  }
  
  /* Semi-transparent backgrounds for different alert types */
  /* Light Theme Overrides for fixed alerts */
  #serverAlert.alert-success, #siteAlert.alert-success, #telegramSettingsAlert.alert-success {
      color: #0f5132; /* Bootstrap success text color */
      background-color: rgba(209, 231, 221, 0.95) !important; /* Semi-transparent success, !important for specificity */
      border-color: rgba(190, 221, 208, 0.95) !important;
  }
  
  #serverAlert.alert-danger, #siteAlert.alert-danger, #telegramSettingsAlert.alert-danger {
      color: #842029; /* Bootstrap danger text color */
      background-color: rgba(248, 215, 218, 0.95) !important; /* Semi-transparent danger */
      border-color: rgba(245, 198, 203, 0.95) !important;
  }
  
  #serverAlert.alert-warning, #siteAlert.alert-warning, #telegramSettingsAlert.alert-warning { /* For siteAlert if it uses warning */
      color: #664d03; /* Bootstrap warning text color */
      background-color: rgba(255, 243, 205, 0.95) !important; /* Semi-transparent warning */
      border-color: rgba(255, 238, 186, 0.95) !important;
  }
  
  
      [data-bs-theme="dark"] {
          body {
              background-color: #121212; /* 深色背景 */
              color: #e0e0e0; /* 浅色文字 */
          }
  
          .card {
              background-color: #1e1e1e; /* 卡片深色背景 */
              border: 1px solid #333;
              color: #e0e0e0; /* 卡片内文字颜色 */
          }
  
          .card-header {
              background-color: #2a2a2a;
              border-bottom: 1px solid #333;
              color: #f5f5f5;
          }
  
          .table {
              color: #e0e0e0; /* 表格文字颜色 */
          }
  
          .table th, .table td {
              border-color: #333; /* 表格边框颜色 */
          }
  
          .table-striped > tbody > tr:nth-of-type(odd) > * {
               background-color: rgba(255, 255, 255, 0.05); /* 深色模式下的条纹 */
               color: #e0e0e0;
          }
  
          .table-hover > tbody > tr:hover > * {
              background-color: rgba(255, 255, 255, 0.075); /* 深色模式下的悬停 */
              color: #f0f0f0;
          }
  
          .modal-content {
              background-color: rgba(30, 30, 30, 0.9); /* Semi-transparent dark grey for dark theme */
              color: #e0e0e0;
              /* backdrop-filter: blur(5px); /* Optional: adds a blur effect to content behind modal */
          }
  
          .modal-header {
              border-bottom-color: #333;
          }
  
          .modal-footer {
              border-top-color: #333;
          }
  
          .form-control {
              background-color: #2a2a2a;
              color: #e0e0e0;
              border-color: #333;
          }
  
          .form-control:focus {
              background-color: #2a2a2a;
              color: #e0e0e0;
              border-color: #555;
              box-shadow: 0 0 0 0.25rem rgba(100, 100, 100, 0.25);
          }
  
          .btn-outline-secondary {
               color: #adb5bd;
               border-color: #6c757d;
          }
          .btn-outline-secondary:hover {
               color: #fff;
               background-color: #6c757d;
               border-color: #6c757d;
          }
  
          .navbar {
              background-color: #1e1e1e !important; /* 确保覆盖 Bootstrap 默认 */
          }
  
          /* 暗色主题移动端卡片样式 */
          .mobile-server-card, .mobile-site-card {
              background: var(--bs-dark, #212529);
              border-color: var(--bs-border-color, #495057);
          }
  
          .mobile-card-header {
              background-color: rgba(255, 255, 255, 0.05);
              border-bottom-color: var(--bs-border-color, #495057);
          }
  
          .mobile-card-title {
              color: #ffffff !important;
          }
  
          .mobile-card-label {
              color: #ced4da !important;
          }
  
          .mobile-card-value {
              color: #ffffff !important;
          }
  
  
  
          .mobile-card-row {
              border-bottom-color: rgba(255, 255, 255, 0.08);
          }
  
          .mobile-card-two-columns {
              border-bottom-color: rgba(255, 255, 255, 0.08);
          }
  
          .mobile-card-column-item .mobile-card-label {
              color: #ced4da !important;
          }
  
          .mobile-card-column-item .mobile-card-value {
              color: #ffffff !important;
          }
  
          .mobile-history-label {
              color: #ced4da !important;
          }
  
          /* 暗色主题下的空状态和错误状态文字 */
          .mobile-card-container .text-muted {
              color: #ced4da !important;
          }
  
          .mobile-card-container .text-danger {
              color: #ff6b6b !important;
          }
  
          .mobile-card-container h6 {
              color: #ffffff !important;
          }
  
          .mobile-card-container small {
              color: #adb5bd !important;
          }
  
          /* 暗色主题下的移动端按钮优化 */
          .mobile-card-body .btn-outline-primary {
              color: #6ea8fe !important;
              border-color: #6ea8fe !important;
          }
  
          .mobile-card-body .btn-outline-primary:hover {
              color: #000 !important;
              background-color: #6ea8fe !important;
              border-color: #6ea8fe !important;
          }
  
          .mobile-card-body .btn-outline-info {
              color: #6edff6 !important;
              border-color: #6edff6 !important;
          }
  
          .mobile-card-body .btn-outline-info:hover {
              color: #000 !important;
              background-color: #6edff6 !important;
              border-color: #6edff6 !important;
          }
  
          .mobile-card-body .btn-outline-danger {
              color: #ea868f !important;
              border-color: #ea868f !important;
          }
  
          .mobile-card-body .btn-outline-danger:hover {
              color: #000 !important;
              background-color: #ea868f !important;
              border-color: #ea868f !important;
          }
  
          /* 暗色主题下的Badge徽章优化 */
          .mobile-card-header .badge.bg-success {
              background-color: #198754 !important;
              color: #ffffff !important;
          }
  
          .mobile-card-header .badge.bg-danger {
              background-color: #dc3545 !important;
              color: #ffffff !important;
          }
  
          .mobile-card-header .badge.bg-warning {
              background-color: #ffc107 !important;
              color: #000000 !important;
          }
  
          .mobile-card-header .badge.bg-secondary {
              background-color: #6c757d !important;
              color: #ffffff !important;
          }
  
          .mobile-card-header .badge.bg-primary {
              background-color: #0d6efd !important;
              color: #ffffff !important;
          }
  
          /* 暗色主题下的移动端容器标题优化 */
          .container h2 {
              color: #ffffff !important;
          }
  
          /* 暗色主题下的移动端加载状态优化 */
          .mobile-card-container .spinner-border {
              color: #6ea8fe !important;
          }
  
          .mobile-card-container .mt-2 {
              color: #ced4da !important;
          }
  
          /* 暗色主题下的导航栏按钮优化 */
          .navbar .btn-outline-light {
              color: #f8f9fa !important;
              border-color: #f8f9fa !important;
          }
  
          .navbar .btn-outline-light:hover {
              color: #000 !important;
              background-color: #f8f9fa !important;
              border-color: #f8f9fa !important;
          }
  
          .navbar .nav-link {
              color: #f8f9fa !important;
          }
  
          .navbar .nav-link:hover {
              color: #e9ecef !important;
          }
          .navbar-light .navbar-nav .nav-link {
               color: #ccc;
          }
          .navbar-light .navbar-nav .nav-link:hover {
               color: #fff;
          }
          .navbar-light .navbar-brand {
               color: #fff;
          }
           .footer {
              background-color: #1e1e1e !important;
              color: #cccccc; /* 修复夜间模式页脚文本颜色 */
          }
          a {
              color: #8ab4f8; /* 示例链接颜色 */
          }
          a:hover {
              color: #a9c9fc;
          }
  
          /* Dark Theme Overrides for fixed alerts */
          [data-bs-theme="dark"] #serverAlert.alert-success,
          [data-bs-theme="dark"] #siteAlert.alert-success,
          [data-bs-theme="dark"] #telegramSettingsAlert.alert-success {
              color: #75b798; /* Lighter green text for dark theme */
              background-color: rgba(40, 167, 69, 0.85) !important; /* Darker semi-transparent success */
              border-color: rgba(34, 139, 57, 0.85) !important;
          }
  
          [data-bs-theme="dark"] #serverAlert.alert-danger,
          [data-bs-theme="dark"] #siteAlert.alert-danger,
          [data-bs-theme="dark"] #telegramSettingsAlert.alert-danger {
              color: #ea868f; /* Lighter red text for dark theme */
              background-color: rgba(220, 53, 69, 0.85) !important; /* Darker semi-transparent danger */
              border-color: rgba(187, 45, 59, 0.85) !important;
          }
  
          [data-bs-theme="dark"] #serverAlert.alert-warning,
          [data-bs-theme="dark"] #siteAlert.alert-warning,
          [data-bs-theme="dark"] #telegramSettingsAlert.alert-warning {
              color: #ffd373; /* Lighter yellow text for dark theme */
              background-color: rgba(255, 193, 7, 0.85) !important; /* Darker semi-transparent warning */
              border-color: rgba(217, 164, 6, 0.85) !important;
          }
      }
  
  /* 拖拽排序样式 */
  .server-row-draggable, .site-row-draggable {
      transition: all 0.2s ease;
  }
  .server-row-draggable:hover, .site-row-draggable:hover {
      background-color: rgba(0, 123, 255, 0.1) !important;
  }
  .server-row-draggable.drag-over-top, .site-row-draggable.drag-over-top {
      border-top: 3px solid #007bff !important;
      background-color: rgba(0, 123, 255, 0.1) !important;
  }
  .server-row-draggable.drag-over-bottom, .site-row-draggable.drag-over-bottom {
      border-bottom: 3px solid #007bff !important;
      background-color: rgba(0, 123, 255, 0.1) !important;
  }
  .server-row-draggable[draggable="true"], .site-row-draggable[draggable="true"] {
      cursor: grab;
  }
  .server-row-draggable[draggable="true"]:active, .site-row-draggable[draggable="true"]:active {
      cursor: grabbing;
  }
  
  /* 暗色主题下的拖拽样式 */
  [data-bs-theme="dark"] .server-row-draggable:hover,
  [data-bs-theme="dark"] .site-row-draggable:hover {
      background-color: rgba(13, 110, 253, 0.2) !important;
  }
  [data-bs-theme="dark"] .server-row-draggable.drag-over-top,
  [data-bs-theme="dark"] .site-row-draggable.drag-over-top {
      border-top: 3px solid #0d6efd !important;
      background-color: rgba(13, 110, 253, 0.2) !important;
  }
  [data-bs-theme="dark"] .server-row-draggable.drag-over-bottom,
  [data-bs-theme="dark"] .site-row-draggable.drag-over-bottom {
      border-bottom: 3px solid #0d6efd !important;
      background-color: rgba(13, 110, 253, 0.2) !important;
  }
  
  /* ==================== 自定义背景和透明度控制系统 ==================== */
  
  /* CSS变量定义 */
  :root {
      --custom-background-url: '';
      --page-opacity: 0.8;
      --text-contrast-light: rgba(0, 0, 0, 0.87);
      --text-contrast-dark: rgba(255, 255, 255, 0.87);
      --background-overlay-light: rgba(255, 255, 255, 0.9);
      --background-overlay-dark: rgba(18, 18, 18, 0.9);
  }
  
  /* 背景图片显示 */
  body.custom-background-enabled::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: var(--custom-background-url);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      z-index: -1;
      opacity: 1;
  }
  
  /* 启用自定义背景时的页面元素透明度调整 */
  body.custom-background-enabled .navbar {
      background-color: rgba(248, 249, 250, var(--page-opacity)) !important;
      /* 移除导航栏的backdrop-filter，避免影响下拉菜单层级 */
      /* backdrop-filter: blur(10px); */
      /* -webkit-backdrop-filter: blur(10px); */
  }
  
  body.custom-background-enabled .card {
      background-color: rgba(255, 255, 255, var(--page-opacity)) !important;
      /* 移除大卡片的backdrop-filter，避免创建层叠上下文影响下拉菜单 */
      /* backdrop-filter: blur(5px); */
      /* -webkit-backdrop-filter: blur(5px); */
      border: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  body.custom-background-enabled .card-header {
      background-color: rgba(0, 0, 0, calc(0.03 * var(--page-opacity))) !important;
      border-bottom: 1px solid rgba(0, 0, 0, calc(0.125 * var(--page-opacity)));
  }
  
  body.custom-background-enabled .modal-content {
      background-color: rgba(255, 255, 255, var(--page-opacity)) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  }
  
  body.custom-background-enabled .footer {
      background-color: rgba(248, 249, 250, var(--page-opacity)) !important;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
  }
  
  /* 表格透明度调整 - 避免与卡片背景叠加 */
  body.custom-background-enabled .table {
      background-color: transparent !important;
  }
  
  body.custom-background-enabled .table th {
      background-color: transparent !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
  }
  
  body.custom-background-enabled .table td {
      background-color: transparent !important;
  }
  
  /* 输入框完全透明化 - 方案A */
  body.custom-background-enabled .form-control {
      background-color: transparent !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
  }
  
  body.custom-background-enabled .form-control:focus {
      background-color: transparent !important;
      border: 1px solid rgba(13, 110, 253, 0.6) !important;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
  }
  
  /* 按钮透明度调整 */
  body.custom-background-enabled .btn {
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
  }
  
  /* 滑块完全透明化 - 完整重置 */
  body.custom-background-enabled .form-range {
      -webkit-appearance: none !important;
      appearance: none !important;
      background: transparent !important;
      outline: none !important;
  }
  
  /* WebKit浏览器 (Chrome, Safari) */
  body.custom-background-enabled .form-range::-webkit-slider-track {
      -webkit-appearance: none !important;
      appearance: none !important;
      background: transparent !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
      outline: none !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
  }
  
  body.custom-background-enabled .form-range::-webkit-slider-runnable-track {
      -webkit-appearance: none !important;
      background: transparent !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
  }
  
  /* Firefox */
  body.custom-background-enabled .form-range::-moz-range-track {
      background: transparent !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
      outline: none !important;
  }
  
  body.custom-background-enabled .form-range::-moz-range-progress {
      background: transparent !important;
      height: 6px !important;
      border-radius: 3px !important;
  }
  
  /* 滑块按钮 - 垂直居中对齐 */
  body.custom-background-enabled .form-range::-webkit-slider-thumb {
      -webkit-appearance: none !important;
      appearance: none !important;
      background-color: rgba(13, 110, 253, 0.8) !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      margin-top: -7px !important;
      box-sizing: border-box !important;
  }
  
  body.custom-background-enabled .form-range::-moz-range-thumb {
      background-color: rgba(13, 110, 253, 0.8) !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      box-shadow: none !important;
      margin-top: -8px !important;
      box-sizing: border-box !important;
  }
  
  /* 下拉菜单透明度调整 - 确保最高层级显示 */
  body.custom-background-enabled .dropdown-menu {
      background-color: rgba(255, 255, 255, var(--page-opacity)) !important;
      /* 移除backdrop-filter避免创建层叠上下文，确保z-index正常工作 */
      /* backdrop-filter: blur(5px); */
      /* -webkit-backdrop-filter: blur(5px); */
  }
  
  /* 移动端卡片透明度调整 - 移除backdrop-filter避免创建层叠上下文 */
  body.custom-background-enabled .mobile-server-card,
  body.custom-background-enabled .mobile-site-card {
      background-color: rgba(255, 255, 255, var(--page-opacity)) !important;
      /* backdrop-filter: blur(5px); 注释掉以避免创建层叠上下文遮挡下拉菜单 */
      /* -webkit-backdrop-filter: blur(5px); */
  }
  
  body.custom-background-enabled .mobile-card-header {
      background-color: rgba(0, 0, 0, calc(0.03 * var(--page-opacity))) !important;
  }
  
  /* 表格条纹和悬停效果 - 轻微背景色，不叠加透明度 */
  body.custom-background-enabled .table-striped > tbody > tr:nth-of-type(odd) > * {
      background-color: rgba(0, 0, 0, 0.02) !important;
  }
  
  body.custom-background-enabled .table-hover > tbody > tr:hover > * {
      background-color: rgba(0, 0, 0, 0.04) !important;
  }
  
  /* 暗色主题下的自定义背景样式 */
  [data-bs-theme="dark"] body.custom-background-enabled .navbar {
      background-color: rgba(30, 30, 30, var(--page-opacity)) !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .card {
      background-color: rgba(30, 30, 30, var(--page-opacity)) !important;
      border-color: rgba(51, 51, 51, var(--page-opacity));
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .card-header {
      background-color: rgba(42, 42, 42, var(--page-opacity)) !important;
      border-bottom-color: rgba(51, 51, 51, var(--page-opacity));
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .modal-content {
      background-color: rgba(30, 30, 30, var(--page-opacity)) !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .footer {
      background-color: rgba(30, 30, 30, var(--page-opacity)) !important;
  }
  
  /* 暗色主题下的表格透明度调整 - 避免与卡片背景叠加 */
  [data-bs-theme="dark"] body.custom-background-enabled .table {
      background-color: transparent !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .table th {
      background-color: transparent !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .table td {
      background-color: transparent !important;
  }
  
  /* 暗色主题下的输入框完全透明化 - 方案A */
  [data-bs-theme="dark"] body.custom-background-enabled .form-control {
      background-color: transparent !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: rgba(255, 255, 255, 0.9) !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .form-control:focus {
      background-color: transparent !important;
      border: 1px solid rgba(13, 110, 253, 0.6) !important;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
  }
  
  /* 暗色主题下的下拉菜单透明度调整 - 移除backdrop-filter */
  [data-bs-theme="dark"] body.custom-background-enabled .dropdown-menu {
      background-color: rgba(30, 30, 30, var(--page-opacity)) !important;
      /* 移除backdrop-filter避免创建层叠上下文，确保z-index正常工作 */
      /* backdrop-filter: blur(5px); */
      /* -webkit-backdrop-filter: blur(5px); */
  }
  
  /* 暗色主题下的滑块完全透明化 - 完整重置 */
  [data-bs-theme="dark"] body.custom-background-enabled .form-range {
      -webkit-appearance: none !important;
      appearance: none !important;
      background: transparent !important;
      outline: none !important;
  }
  
  /* WebKit浏览器 (Chrome, Safari) - 暗色主题 */
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-webkit-slider-track {
      -webkit-appearance: none !important;
      appearance: none !important;
      background: transparent !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
      outline: none !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-webkit-slider-runnable-track {
      -webkit-appearance: none !important;
      background: transparent !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
  }
  
  /* Firefox - 暗色主题 */
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-moz-range-track {
      background: transparent !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      height: 6px !important;
      border-radius: 3px !important;
      box-shadow: none !important;
      outline: none !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-moz-range-progress {
      background: transparent !important;
      height: 6px !important;
      border-radius: 3px !important;
  }
  
  /* 滑块按钮 - 暗色主题 - 垂直居中对齐 */
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-webkit-slider-thumb {
      -webkit-appearance: none !important;
      appearance: none !important;
      background-color: rgba(13, 110, 253, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      margin-top: -7px !important;
      box-sizing: border-box !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .form-range::-moz-range-thumb {
      background-color: rgba(13, 110, 253, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      box-shadow: none !important;
      margin-top: -8px !important;
      box-sizing: border-box !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .mobile-server-card,
  [data-bs-theme="dark"] body.custom-background-enabled .mobile-site-card {
      background-color: rgba(33, 37, 41, var(--page-opacity)) !important;
      border-color: rgba(73, 80, 87, var(--page-opacity));
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .mobile-card-header {
      background-color: rgba(255, 255, 255, calc(0.05 * var(--page-opacity))) !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .table-striped > tbody > tr:nth-of-type(odd) > * {
      background-color: rgba(255, 255, 255, 0.03) !important;
  }
  
  [data-bs-theme="dark"] body.custom-background-enabled .table-hover > tbody > tr:hover > * {
      background-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  
  
  
  
  /* 警告框透明度调整 */
  body.custom-background-enabled #serverAlert,
  body.custom-background-enabled #siteAlert,
  body.custom-background-enabled #telegramSettingsAlert,
  body.custom-background-enabled #backgroundSettingsAlert {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }
  
  /* ==================== 文字描边渲染系统 ==================== */
  
  /* 文字加粗系统 - 精简版 */
  p, div, span:not(.badge), td, th, .btn, button, a:not(.navbar-brand),
  .form-control, .form-select, .form-check-label, input, textarea,
  .card-header, .card-title, .card-body, .modal-content, .modal-title, .dropdown-menu,
  .progress span, .alert, .breadcrumb, .list-group-item {
      font-weight: 500;
  }
  
  /* 统一Toast弹窗系统 */
  .toast-container {
      position: fixed;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000; /* 确保在所有元素之上，包括模态框 */
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .unified-toast {
      pointer-events: auto;
      min-width: 120px;
      max-width: 90vw;
      padding: 16px 50px 16px 24px;
      margin-bottom: 12px;
      border-radius: 12px;
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      font-weight: 500;
      font-size: 15px;
      position: relative;
      display: inline-flex;
      align-items: center;
      animation: toastIn 0.3s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .unified-toast.hiding {
      animation: toastOut 0.3s ease;
      opacity: 0;
  }
  
  .unified-toast.success {
      background: linear-gradient(135deg,
          rgba(34, 197, 94, calc(0.7 * var(--page-opacity, 0.8))),
          rgba(22, 163, 74, calc(0.7 * var(--page-opacity, 0.8))));
      color: white;
      border-color: rgba(34, 197, 94, calc(0.4 * var(--page-opacity, 0.8)));
  }
  
  .unified-toast.danger {
      background: linear-gradient(135deg,
          rgba(239, 68, 68, calc(0.7 * var(--page-opacity, 0.8))),
          rgba(220, 38, 38, calc(0.7 * var(--page-opacity, 0.8))));
      color: white;
      border-color: rgba(239, 68, 68, calc(0.4 * var(--page-opacity, 0.8)));
  }
  
  .unified-toast.warning {
      background: linear-gradient(135deg,
          rgba(245, 158, 11, calc(0.7 * var(--page-opacity, 0.8))),
          rgba(217, 119, 6, calc(0.7 * var(--page-opacity, 0.8))));
      color: white;
      border-color: rgba(245, 158, 11, calc(0.4 * var(--page-opacity, 0.8)));
  }
  
  .unified-toast.info {
      background: linear-gradient(135deg,
          rgba(59, 130, 246, calc(0.7 * var(--page-opacity, 0.8))),
          rgba(37, 99, 235, calc(0.7 * var(--page-opacity, 0.8))));
      color: white;
      border-color: rgba(59, 130, 246, calc(0.4 * var(--page-opacity, 0.8)));
  }
  
  .toast-icon {
      margin-right: 8px;
      font-size: 16px;
      flex-shrink: 0;
  }
  
  .toast-content {
      flex: 1;
      line-height: 1.4;
  }
  
  .toast-close {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
      cursor: pointer;
      padding: 6px;
      border-radius: 50%;
      width: 28px;
      height: 28px;
  }
  
  .toast-close:hover {
      background: rgba(255, 255, 255, 0.2);
  }
  
  .toast-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 0 0 12px 12px;
      animation: progressBar 5s linear;
  }
  
  @keyframes toastIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes toastOut {
      from { opacity: 1; }
      to { opacity: 0; }
  }
  
  @keyframes progressBar {
      from { width: 100%; }
      to { width: 0%; }
  }
  
  [data-bs-theme="dark"] .unified-toast {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.1);
  }
  
  /* 自定义导航栏高度 */
  .navbar {
      --bs-navbar-padding-y: 0.375rem;
      min-height: 50px;
      height: 50px;
  }
  
  .navbar-brand {
      padding-top: 0.3125rem;
      padding-bottom: 0.3125rem;
      line-height: 1.25;
  }