@tailwind base;
@tailwind components;
@tailwind utilities;


/* 自定义样式文件: status-grid */
#poolGridContainer {
    position: relative; /* 仅用于定位内部的Canvas */
}
#poolGridContainer canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* [核心UI修复] 为 Font Awesome 的 fa-spin 类，注入旋转动画 */
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* ***base*** */

.glass-card {
    background: rgba(255, 255, 255, 0.95); /* High opacity white for light theme */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08); /* Light gray border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.bg-gradient {
    background: #ffffff; /* Clean white background */
}
/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.8); /* bg-gray-100 with opacity */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.6); /* gray-500 for light theme */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(75, 85, 99, 0.8); /* gray-600 for light theme */
}
/* Basic modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Global modal content styling for light theme consistency */
.modal .w-full[style*="background-color: rgba(70, 50, 150"],
.modal .w-full[style*="background-color: rgba(80, 60, 160"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #374151 !important; /* gray-700 */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Global modal text color fixes */
.modal .text-gray-100, .modal h2.text-gray-100, .modal h3.text-gray-100 {
    color: #1f2937 !important; /* gray-800 */
    font-weight: 600 !important;
}

.modal .text-gray-200, .modal .text-gray-300 {
    color: #6b7280 !important; /* gray-500 */
}

.modal .text-gray-300:hover {
    color: #374151 !important; /* gray-700 */
}

/* Global modal button styling */
.modal .bg-violet-600, .modal button.bg-violet-600 {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
    color: #ffffff !important;
}

.modal .bg-violet-600:hover, .modal button.bg-violet-600:hover {
    background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Global modal blue button styling */
.modal .bg-blue-500, .modal button.bg-blue-500,
.modal .bg-blue-600, .modal button.bg-blue-600,
.modal .bg-blue-700, .modal button.bg-blue-700 {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
    color: #ffffff !important;
}

.modal .bg-blue-500:hover, .modal button.bg-blue-500:hover,
.modal .bg-blue-600:hover, .modal button.bg-blue-600:hover,
.modal .bg-blue-700:hover, .modal button.bg-blue-700:hover {
    background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Global modal red button styling */
.modal .bg-red-500, .modal button.bg-red-500,
.modal .bg-red-600, .modal button.bg-red-600,
.modal .bg-red-700, .modal button.bg-red-700 {
    background-color: #f87171 !important; /* red-400 - bright light red */
    color: #ffffff !important;
}

.modal .bg-red-500:hover, .modal button.bg-red-500:hover,
.modal .bg-red-600:hover, .modal button.bg-red-600:hover,
.modal .bg-red-700:hover, .modal button.bg-red-700:hover {
    background-color: #ef4444 !important; /* red-500 - darker bright light red */
}

/* Global modal gray button styling */
.modal .bg-gray-500, .modal button.bg-gray-500,
.modal .bg-gray-600, .modal button.bg-gray-600,
.modal .bg-gray-700, .modal button.bg-gray-700 {
    background-color: #e5e7eb !important; /* gray-200 - light gray */
    color: #374151 !important; /* gray-700 - dark text for contrast */
}

.modal .bg-gray-500:hover, .modal button.bg-gray-500:hover,
.modal .bg-gray-600:hover, .modal button.bg-gray-600:hover,
.modal .bg-gray-700:hover, .modal button.bg-gray-700:hover {
    background-color: #d1d5db !important; /* gray-300 - darker light gray */
    color: #374151 !important; /* gray-700 - dark text for contrast */
}

/* Comprehensive button contrast fixes */
/* Ensure all dark background buttons have white text */
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900,
.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
.bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
.bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900,
.bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-900,
.bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-slate-500, .bg-slate-600, .bg-slate-700, .bg-slate-800, .bg-slate-900 {
    color: #ffffff !important;
}

/* Ensure all light background buttons have dark text */
.bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
.bg-white, .bg-transparent {
    color: #374151 !important; /* gray-700 */
}

/* Fix button children text inheritance */
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *, .bg-blue-800 *, .bg-blue-900 *,
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *, .bg-red-800 *, .bg-red-900 *,
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *, .bg-green-800 *, .bg-green-900 *,
.bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 *, .bg-purple-800 *, .bg-purple-900 *,
.bg-violet-500 *, .bg-violet-600 *, .bg-violet-700 *, .bg-violet-800 *, .bg-violet-900 *,
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *, .bg-sky-800 *, .bg-sky-900 *,
.bg-teal-500 *, .bg-teal-600 *, .bg-teal-700 *, .bg-teal-800 *, .bg-teal-900 *,
.bg-gray-700 *, .bg-gray-800 *, .bg-gray-900 *,
.bg-slate-500 *, .bg-slate-600 *, .bg-slate-700 *, .bg-slate-800 *, .bg-slate-900 * {
    color: inherit !important;
}

/* Global form element styling for consistency */
select, input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], input[type="datetime-local"],
textarea, .form-input, .form-select {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #374151 !important; /* gray-700 */
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.375rem !important; /* rounded-md */
}

select:focus, input:focus, textarea:focus,
.form-input:focus, .form-select:focus {
    border-color: #3b82f6 !important; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Fix dropdown option styling */
select option {
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #374151 !important; /* gray-700 */
    padding: 8px !important;
}

/* Fix pagination controls globally */
.pagination-button, .pagination a, .pagination button {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #374151 !important; /* gray-700 */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease-in-out !important;
}

.pagination-button:hover, .pagination a:hover, .pagination button:hover {
    background-color: rgba(229, 231, 235, 1) !important; /* gray-200 */
    border-color: rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px) !important;
}

.pagination-button.active, .pagination a.active, .pagination button.active {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
    color: #ffffff !important;
    border-color: #2563eb !important; /* blue-600 - darker light blue */
    font-weight: 600 !important;
}
/* Loading spinner */
.loading-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Notification */
.notification {
    position: fixed;
    bottom: 5rem; /* Adjusted from bottom-20 */
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem; /* px-5 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: rgba(34, 197, 94, 0.95); /* green-500 for success */
    color: white;
    font-weight: 500; /* font-medium */
    z-index: 1000; /* Increased z-index */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.notification.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.notification.error {
      background-color: rgba(239, 68, 68, 0.95); /* red-500 for error */
}
/* Scroll buttons */
.scroll-buttons {
    position: fixed;
    right: 1.25rem; /* right-5 */
    bottom: 5rem; /* bottom-20 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* gap-2 */
    z-index: 10;
}
.scroll-button {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    background-color: #3b82f6; /* blue-500 - light blue */
    color: white;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.scroll-button:hover {
    background-color: #2563eb; /* blue-600 - darker light blue */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

/* Global overrides for light theme consistency */
.text-gray-200, .text-gray-300, .text-gray-400 {
    color: #6b7280 !important; /* gray-500 for better contrast */
}

/* Navigation and header improvements */
.bg-primary-600, .bg-primary-700 {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.text-primary-600, .text-primary-700 {
    color: #3b82f6 !important; /* blue-500 - light blue */
}

.border-primary-500, .focus\\:border-primary-500 {
    border-color: #3b82f6 !important; /* blue-500 */
}

.ring-primary-200, .focus\\:ring-primary-200 {
    --tw-ring-color: rgba(59, 130, 246, 0.2) !important; /* blue-500 with opacity */
}

/* Global purple to blue conversion */
.bg-violet-50, .bg-violet-100, .bg-violet-200, .bg-violet-300, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900 {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.text-violet-50, .text-violet-100, .text-violet-200, .text-violet-300, .text-violet-400, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900 {
    color: #3b82f6 !important; /* blue-500 - light blue */
}

.border-violet-50, .border-violet-100, .border-violet-200, .border-violet-300, .border-violet-400, .border-violet-500, .border-violet-600, .border-violet-700, .border-violet-800, .border-violet-900 {
    border-color: #3b82f6 !important; /* blue-500 - light blue */
}

/* Global button color overrides */
/* Blue buttons to light blue */
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
button.bg-blue-500, button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900 {
    background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.bg-blue-500:hover, .bg-blue-600:hover, .bg-blue-700:hover, .bg-blue-800:hover, .bg-blue-900:hover,
button.bg-blue-500:hover, button.bg-blue-600:hover, button.bg-blue-700:hover, button.bg-blue-800:hover, button.bg-blue-900:hover,
.hover\\:bg-blue-600:hover, .hover\\:bg-blue-700:hover, .hover\\:bg-blue-800:hover {
    background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Red buttons to bright light red */
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
button.bg-red-500, button.bg-red-600, button.bg-red-700, button.bg-red-800, button.bg-red-900 {
    background-color: #f87171 !important; /* red-400 - bright light red */
}

.bg-red-500:hover, .bg-red-600:hover, .bg-red-700:hover, .bg-red-800:hover, .bg-red-900:hover,
button.bg-red-500:hover, button.bg-red-600:hover, button.bg-red-700:hover, button.bg-red-800:hover, button.bg-red-900:hover,
.hover\\:bg-red-600:hover, .hover\\:bg-red-700:hover, .hover\\:bg-red-800:hover {
    background-color: #ef4444 !important; /* red-500 - darker bright light red */
}

/* Gray buttons to light gray */
.bg-gray-500, .bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900,
button.bg-gray-500, button.bg-gray-600, button.bg-gray-700, button.bg-gray-800, button.bg-gray-900 {
    background-color: #e5e7eb !important; /* gray-200 - light gray */
    color: #374151 !important; /* gray-700 - dark text for contrast */
}

.bg-gray-500:hover, .bg-gray-600:hover, .bg-gray-700:hover, .bg-gray-800:hover, .bg-gray-900:hover,
button.bg-gray-500:hover, button.bg-gray-600:hover, button.bg-gray-700:hover, button.bg-gray-800:hover, button.bg-gray-900:hover,
.hover\\:bg-gray-600:hover, .hover\\:bg-gray-700:hover, .hover\\:bg-gray-800:hover {
    background-color: #d1d5db !important; /* gray-300 - darker light gray */
    color: #374151 !important; /* gray-700 - dark text for contrast */
}

/* Ensure all text has proper contrast in light theme */
.text-white {
    color: #374151 !important; /* gray-700 for better contrast on light backgrounds */
}

/* Fix dark button text - ensure white text on dark backgrounds */
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900,
.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
.bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900 {
    color: #ffffff !important;
}

/* Ensure buttons with dark backgrounds have white text */
button.bg-blue-500, button.bg-blue-600, button.bg-blue-700,
button.bg-red-500, button.bg-red-600, button.bg-red-700,
button.bg-green-500, button.bg-green-600, button.bg-green-700,
button.bg-sky-500, button.bg-sky-600, button.bg-sky-700,
.btn-primary, .btn-danger, .btn-success, .btn-info {
    color: #ffffff !important;
}

/* Override any nested text color rules for dark buttons */
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *,
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *,
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *,
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 * {
    color: inherit !important;
}


/* auth.html specific styles */
.auth-glass-card { /* Renamed to avoid conflict if base.html has .glass-card */
    background: rgba(255, 255, 255, 0.95); /* High opacity white for light theme */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.auth-bg-gradient { /* Renamed to avoid conflict if base.html has .bg-gradient */
      background: #f8fafc; /* Light gray background for auth page */
}
/* .input-icon class removed, using direct Tailwind classes now */
/* Keep button ripple effect if needed, or remove if base provides similar */
.auth-button { /* Renamed to avoid conflict */
    position: relative;
    overflow: hidden;
}
.auth-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}
.auth-button:active:after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* ***keys_status.html specific styles*** */
/* ************************************** */
.key-content {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out,
    padding 0.3s ease-in-out; /* Added padding transition */
  overflow: hidden; /* Keep hidden initially and during collapse */
}
.key-content.collapsed {
  max-height: 0 !important; /* Use important to override inline style during transition */
  opacity: 0;
  padding-top: 0 !important; /* Collapse padding */
  padding-bottom: 0 !important; /* Collapse padding */
  /* overflow: hidden; */ /* Already set above */
}
.toggle-icon {
  transition: transform 0.3s ease;
}
.toggle-icon.collapsed {
  transform: rotate(-90deg);
}
/* Copy status styling is handled by base.html's notification */

/* 现代数据统计样式 */
.stats-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .stats-dashboard {
    grid-template-columns: 1fr 1fr;
  }
}

/* 统计卡片样式 */
.stats-card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.stats-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

.stats-card-header {
  background-color: rgba(249, 250, 251, 0.95);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  gap: 0.5rem; /* Add gap between items */
}

.stats-card-title {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #374151; /* gray-700 for light theme */
  text-shadow: none;
}

.stats-card-title i {
  margin-right: 0.5rem;
  color: #6b7280; /* gray-500 for light theme */
}

.stats-card-header h2 {
  color: #374151; /* gray-700 for light theme */
}

/* =================================================================== */
/* [核心重构] 统计项样式 V3.2 - 最终精调版 */
/* =================================================================== */
/* --- 网格容器 --- */
.stats-grid {
  display: grid;
  gap: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem !important;
}
/* --- 统计项容器 (stat-item) --- */
.stat-item {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 0.5rem;
  overflow: hidden; 
  transition: transform 0.3s ease-in-out;
  min-height: 110px;
  background-color: transparent !important;
}
/* --- 底部1/3的透明色块 (::before) --- */
.stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
  background-color: currentColor;
  opacity: 0.25;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
/* --- 悬浮动画效果 --- */
.stat-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.stat-item:hover::before {
  opacity: 0.25;
}
/* --- 核心数字 (stat-value) --- */
.stat-value {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", "Inter", "Roboto", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: currentColor; 
  opacity: 0.85;

}
/* --- 描述标签 (stat-label) --- */
.stat-label {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b5563; 
}
/* --- 右侧图标 (stat-icon) --- */
.stat-icon {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0.75rem;
  height: 30%;
  align-content: center;
  display: flex;
  align-items: center;
  
  font-size: 1.5rem;
  opacity: 0.9; 
  transform: rotate(0deg);
  transition: all 0.3s ease-in-out;
  color: white; 
}
.stat-item:hover .stat-icon {
  opacity: 1;
  transform: scale(1.1);
}
/* --- 主题颜色定义 --- */
.stat-primary { color: #459CEB; }
.stat-success { color: #49C65B; }
.stat-danger { color: #E81307; }
.stat-warning { color: #FCCC54; }
.stat-info { color: #06b6d4; }
.stat-info-rpm { color: #4EAAF6; font-size: 2.5rem; font-weight: 600;}
.stat-info-rph { color: #1F92F2; font-size: 2.5rem; font-weight: 600;}
.stat-info-rpd { color: #0D78D2; font-size: 2.5rem; font-weight: 600;}
.stat-info-rp30d { color: #0B5CA1; font-size: 2.5rem; font-weight: 600;}


/* --- 代码清理 --- */
.stat-item.stat-primary,
.stat-item.stat-success,
.stat-item.stat-danger,
.stat-item.stat-warning,
.stat-item.stat-info {
  background-color: transparent !important;
}


/* 响应式调整 */
@media (max-width: 640px) {
  .stats-dashboard {
    gap: 1rem;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .stat-item {
    padding: 0.5rem;
  }
  .stat-value {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.625rem;
  }
  .stats-card-header {
    padding: 0.5rem 0.75rem;
  } /* Adjust header padding */
  .key-content ul {
    grid-template-columns: 1fr;
  } /* Stack keys vertically on small screens */
}
/* Tailwind Toggle Switch Helper CSS */
.toggle-checkbox:checked {
  @apply: right-0 border-blue-600;
  right: 0;
  border-color: #2563eb;
}
.toggle-checkbox:checked + .toggle-label {
  @apply: bg-blue-600;
  background-color: #2563eb;
}

/* Pagination Controls */
#validPaginationControls,
#invalidPaginationControls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem; /* mt-4 */
  gap: 0.5rem; /* space-x-2 */
}

/* Ensure list items are flex for alignment */
#validKeys li,
#invalidKeys li {
  display: flex;
  align-items: flex-start; /* Align checkbox with top of content */
  gap: 0.75rem; /* gap-3 */
}
/* Ensure grid layout for key lists */
#validKeys,
#invalidKeys {
  display: grid;
  grid-template-columns: 1fr; /* Default single column */
  gap: 0.75rem; /* gap-3 */
}
@media (min-width: 768px) {
  /* md breakpoint */
  #validKeys,
  #invalidKeys {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Two columns on medium screens and up */
  }
}

/* 修改密钥列表背景和卡片样式 */
.key-content {
  background-color: rgba(249, 250, 251, 0.8) !important;
}

#validKeys li,
#invalidKeys li {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  padding-left: 2.5rem; /* 为自定义复选框留出空间 */
}

#validKeys li:hover,
#invalidKeys li:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  background-color: rgba(249, 250, 251, 0.95);
}

#validKeys li.selected,
#invalidKeys li.selected {
  background-color: rgba(239, 246, 255, 0.95);
  border-color: rgba(59, 130, 246, 0.3);
}

/* 隐藏原生复选框 */
.key-checkbox {
  display: none;
}

/* 自定义复选框样式 */
#validKeys li::before,
#invalidKeys li::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  border: 2px solid rgba(156, 163, 175, 0.7); /* gray-400 */
  border-radius: 0.375rem; /* 6px */
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease-in-out;
}

#validKeys li.selected::before,
#invalidKeys li.selected::before {
  background-color: #3b82f6; /* blue-500 */
  border-color: #2563eb; /* blue-600 */
}

/* 自定义复选框对勾样式 */
#validKeys li.selected::after,
#invalidKeys li.selected::after {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: calc(0.75rem + 0.3rem); /* 调整对勾位置 */
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  color: white;
  font-size: 0.8rem;
}

.key-text {
  color: #374151 !important; /* gray-700 for light theme */
  text-shadow: none;
  font-weight: 500;
}

/* 模态框背景色调整 - comprehensive modal styling */
#apiCallDetailsModal .bg-white,
#keyUsageDetailsModal .bg-white,
#resultModal .bg-white,
#resetModal .bg-white,
#verifyModal .bg-white,
.modal .bg-white {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #374151 !important; /* gray-700 */
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 模态框标题颜色 */
#apiCallDetailsModalTitle,
#keyUsageDetailsModalTitle,
#resultModalTitle,
#resetModalTitle,
#verifyModalTitle {
  color: #1f2937 !important; /* gray-800 */
  text-shadow: none;
  font-weight: 600;
}

/* 密钥使用详情模态框头部特定样式 */
#keyUsageDetailsModal .bg-white > div.border-b {
  /* 针对头部区域的下边框 */
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}

/* 模态框消息文本颜色 */
#apiCallDetailsContent,
#keyUsageDetailsContent,
#resultModalMessage,
#resetModalMessage,
#verifyModalMessage {
  color: #374151 !important; /* gray-700 */
}

/* 特定调整操作结果模态框的消息区域样式 */
#resultModalMessage {
  background-color: rgba(255, 255, 255, 0.95) !important; /* 浅色背景 */
  border-color: rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
  color: #374151 !important; /* 深色文本 */
}

/* 批量验证结果中普通信息列表 (如成功密钥列表) 的浅色主题样式 */
#resultModalMessage ul[class*="bg-gray-50"] {
  /* 针对特定灰色背景色的ul */
  background-color: rgba(249, 250, 251, 0.95) !important; /* 浅灰色背景 */
  border-color: rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
}

#resultModalMessage ul[class*="bg-gray-50"] li {
  color: #374151 !important; /* 深色文本 */
}

/* 批量验证结果中失败列表的浅色主题样式 */
#resultModalMessage ul[class*="bg-red-50"] {
  /* 针对特定背景色的ul */
  background-color: rgba(254, 242, 242, 0.95) !important; /* 浅红色背景 */
  border-color: rgba(239, 68, 68, 0.2) !important; /* 浅红色边框 */
}

/* 失败列表中的密钥文本 (如 AIza...lJ6E) */
#resultModalMessage ul[class*="bg-red-50"] li span.font-mono {
  color: #dc2626 !important; /* 深红色文本 */
}

/* 失败列表中的 "收起/展开" 按钮 - 协调的红色主题设计 */
#resultModalMessage ul[class*="bg-red-50"] li button[class*="bg-red-200"] {
  background-color: #dc2626 !important; /* 深红色按钮背景，与外框协调 */
  color: #ffffff !important; /* 白色按钮文本 */
  border: 1px solid #b91c1c !important; /* 更深的红色边框 */
  box-shadow: none !important;
  font-weight: 500 !important; /* 增强文字粗细以提高可读性 */
}
#resultModalMessage
  ul[class*="bg-red-50"]
  li
  button[class*="bg-red-200"]:hover {
  background-color: #b91c1c !important; /* 悬停时更深的红色背景 */
  color: #ffffff !important; /* 悬停时白色按钮文本 */
  transform: translateY(-1px) !important; /* 轻微上移效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* 悬停阴影效果 */
}

/* 失败列表中的错误详情框 - 与红色主题协调的样式 */
#resultModalMessage ul[class*="bg-red-50"] li div[id^="error-details-"] {
  background-color: rgba(254, 242, 242, 0.8) !important; /* 更浅的红色背景，与外框协调 */
  border-color: rgba(248, 113, 113, 0.3) !important; /* 浅红色边框 */
  color: #7f1d1d !important; /* 深红色文本，确保良好对比度 */
  font-weight: 500 !important; /* 增强文字粗细以提高可读性 */
  line-height: 1.5 !important; /* 改善行高以提高可读性 */
}

/* 密钥使用详情模态框内表格表头样式 */
#keyUsageDetailsModal #keyUsageDetailsContent table th {
  background-color: rgba(243, 244, 246, 0.95) !important; /* 浅灰色背景 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
  color: #374151 !important; /* 深色文字 */
  text-shadow: none; /* 移除文本阴影 */
}

/* 密钥使用详情模态框表格单元格样式已移除，使用默认颜色与API调用详情保持一致 */

/* 按钮文本颜色 */
.stats-card button {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 表单控件背景 */
.form-input,
.form-select {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #374151 !important; /* gray-700 */
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* 标签文字颜色 */
.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: #374151 !important; /* dark gray for light theme */
  text-shadow: none;
}

/* 调整全局背景色，使之与白色背景更加协调 */
.glass-card {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 分页控件样式增强 */
.pagination-button {
  background-color: rgba(255, 255, 255, 0.9);
  color: #374151; /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-shadow: none;
}

.pagination-button.active {
  background-color: #3b82f6; /* blue-500 */
  color: white;
  border-color: #2563eb; /* blue-600 */
}

/* 状态标签增强 */
.inline-flex.items-center.px-2\.5.py-0\.5.rounded-full {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 按钮颜色增强 */
button.bg-success-600,
button.bg-blue-600,
button.bg-slate-500,
button.bg-purple-600,
button.bg-primary-700,
button.bg-teal-600 {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 复选框文本样式 */
input[type="checkbox"] + label {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 底部版权栏文本颜色修正 */
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-200,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-300,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-400,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-500,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-600,
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-700 {
  color: #1f2937 !important; /* 使用更深的灰色提高对比度 */
  text-shadow: none !important;
}

/* 导航链接悬停样式 - 优化以避免遮挡内容 */
.nav-link {
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1; /* 确保不会遮挡重要内容 */
}

.nav-link:hover {
  background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
  transform: scale(1.02); /* 使用缩放代替向上移动 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 导航按钮容器样式 - 为悬停效果预留空间 */
.nav-buttons-container {
  padding-top: 0.5rem; /* 为悬停效果预留上方空间 */
  padding-bottom: 0.75rem; /* 为悬停效果预留下方空间 */
}

/* 主导航按钮的优化悬停效果 */
.main-nav-btn:hover {
  transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important; /* 蓝色阴影 */
}

/* Active navigation tab */
.bg-violet-600 {
  background-color: #3b82f6 !important; /* blue-500 */
  color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
  border: 1px solid #2563eb !important; /* blue-600 */
}

.bg-violet-600:hover {
  background-color: #2563eb !important; /* blue-600 */
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Fix page title gradient */
.text-transparent.bg-clip-text.bg-gradient-to-r.from-violet-400.to-pink-400 {
  background: none !important;
  color: #1f2937 !important; /* gray-800 */
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Fix refresh button */
.bg-white.bg-opacity-20 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #3b82f6 !important; /* blue-500 */
}

.bg-white.bg-opacity-20:hover {
  background-color: rgba(255, 255, 255, 1) !important;
}

/* Fix batch actions area purple background */
#validBatchActions, #invalidBatchActions {
  background-color: rgba(249, 250, 251, 0.95) !important; /* light gray */
  border-color: rgba(0, 0, 0, 0.08) !important;
}

#validBatchActions .text-gray-200, #invalidBatchActions .text-gray-200 {
  color: #374151 !important; /* dark gray */
}

/* Fix primary button colors */
.bg-primary-600, .bg-primary-700, .bg-primary-800 {
  background-color: #3b82f6 !important; /* blue-500 */
}

.bg-primary-600:hover, .bg-primary-700:hover, .bg-primary-800:hover {
  background-color: #2563eb !important; /* blue-600 */
}

/* Fix text-primary colors */
.text-primary-600 {
  color: #3b82f6 !important; /* blue-500 */
}

/* Fix form input focus colors */
.focus\\:ring-primary-500:focus {
  --tw-ring-color: rgba(59, 130, 246, 0.2) !important;
}

.focus\\:border-primary-500:focus {
  border-color: #3b82f6 !important;
}

/* 新增：密钥列表内按钮背景和悬停颜色调整 */
/* 验证按钮 (绿色) */
#validKeys li button.bg-success-600,
#invalidKeys li button.bg-success-600 {
  background-color: rgba(22, 163, 74, 0.65) !important;
  border: 1px solid rgba(22, 163, 74, 0.85);
}
#validKeys li button.bg-success-600:hover,
#invalidKeys li button.bg-success-600:hover {
  background-color: rgba(21, 128, 61, 0.75) !important;
  border-color: rgba(21, 128, 61, 0.95);
}

/* 重置按钮 (加深灰色底，白色文字) */
#validKeys li button.bg-gray-500,
#invalidKeys li button.bg-gray-500 {
  background-color: #6b7280 !important; /* gray-500 - 加深的灰色底 */
  border: 1px solid #4b5563 !important; /* gray-600 */
  color: #ffffff !important; /* white - 白色文字 */
}
#validKeys li button.bg-gray-500:hover,
#invalidKeys li button.bg-gray-500:hover {
  background-color: #4b5563 !important; /* gray-600 - 更深的灰色 */
  border-color: #374151 !important; /* gray-700 */
  color: #ffffff !important; /* white - 白色文字 */
}

/* 复制按钮 (蓝色底色，白色文字) */
#validKeys li button.bg-blue-500,
#invalidKeys li button.bg-blue-500 {
  background-color: #3b82f6 !important; /* blue-500 - 蓝色底 */
  border: 1px solid #2563eb !important; /* blue-600 */
  color: #ffffff !important; /* Keep white text as specified in HTML */
}
#validKeys li button.bg-blue-500:hover,
#invalidKeys li button.bg-blue-500:hover {
  background-color: #2563eb !important; /* blue-600 - 深蓝色hover */
  border-color: #1d4ed8 !important; /* blue-700 */
  color: #ffffff !important; /* Keep white text on hover */
}

/* 详情按钮 (改为蓝色) */
#validKeys li button.bg-purple-600,
#invalidKeys li button.bg-purple-600 {
  background-color: rgba(59, 130, 246, 0.8) !important; /* blue-500 */
  border: 1px solid rgba(59, 130, 246, 0.9);
}
#validKeys li button.bg-purple-600:hover,
#invalidKeys li button.bg-purple-600:hover {
  background-color: rgba(37, 99, 235, 0.9) !important; /* blue-600 */
  border-color: rgba(37, 99, 235, 1);
}

/* 删除按钮 (鲜艳浅红色) - HTML中使用 bg-red-800 */
#validKeys li button.bg-red-800,
#invalidKeys li button.bg-red-800 {
  background-color: #f87171 !important; /* red-400 - bright light red */
  border: 1px solid #ef4444 !important; /* red-500 */
  color: #ffffff !important; /* Ensure white text */
}

#validKeys li button.bg-red-800:hover,
#invalidKeys li button.bg-red-800:hover {
  background-color: #ef4444 !important; /* red-500 - darker bright light red */
  border-color: #dc2626 !important; /* red-600 */
}

/* Comprehensive purple to light theme conversion */
[style*="background-color: rgba(80, 60, 160"],
[style*="background-color: rgba(70, 50, 150"],
[style*="background-color: rgba(120, 100, 200"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
}

/* Fix modal button colors - specific overrides for keys_status.html */
/* Blue buttons in modals */
.bg-blue-600, button.bg-blue-600,
.bg-blue-700, button.bg-blue-700 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.bg-blue-600:hover, button.bg-blue-600:hover,
.bg-blue-700:hover, button.bg-blue-700:hover,
.hover\\:bg-blue-700:hover, .hover\\:bg-blue-800:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Red buttons in modals */
.bg-red-700, button.bg-red-700,
.bg-red-800, button.bg-red-800 {
  background-color: #f87171 !important; /* red-400 - bright light red */
}

.bg-red-700:hover, button.bg-red-700:hover,
.bg-red-800:hover, button.bg-red-800:hover,
.hover\\:bg-red-800:hover {
  background-color: #ef4444 !important; /* red-500 - darker bright light red */
}

/* Primary buttons in modals */
.bg-primary-700, button.bg-primary-700,
.bg-primary-800, button.bg-primary-800 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.bg-primary-700:hover, button.bg-primary-700:hover,
.bg-primary-800:hover, button.bg-primary-800:hover,
.hover\\:bg-primary-800:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Teal buttons in modals (for verify button) */
.bg-teal-700, button.bg-teal-700,
.bg-teal-800, button.bg-teal-800 {
  background-color: #3b82f6 !important; /* blue-500 - light blue (change teal to light blue) */
}

.bg-teal-700:hover, button.bg-teal-700:hover,
.bg-teal-800:hover, button.bg-teal-800:hover,
.hover\\:bg-teal-800:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Global slate/gray button color overrides - only for modal buttons */
/* Modal slate buttons should be light gray with dark text */
.modal .bg-slate-500, .modal button.bg-slate-500,
.modal .bg-slate-600, .modal button.bg-slate-600,
.modal .bg-slate-700, .modal button.bg-slate-700 {
  background-color: #e5e7eb !important; /* gray-200 - light gray */
  color: #374151 !important; /* gray-700 - dark text for contrast */
}

.modal .bg-slate-500:hover, .modal button.bg-slate-500:hover,
.modal .bg-slate-600:hover, .modal button.bg-slate-600:hover,
.modal .bg-slate-700:hover, .modal button.bg-slate-700:hover,
.modal .hover\\:bg-slate-600:hover, .modal .hover\\:bg-slate-700:hover {
  background-color: #d1d5db !important; /* gray-300 - darker light gray */
  color: #374151 !important; /* gray-700 - dark text for contrast */
}

/* Fix any remaining button text color issues */
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800,
.bg-green-500, .bg-green-600, .bg-green-700,
.bg-sky-500, .bg-sky-600, .bg-sky-700,
.bg-purple-500, .bg-purple-600, .bg-purple-700,
.bg-primary-700, .bg-primary-800,
.bg-teal-700, .bg-teal-800 {
  color: #ffffff !important;
}

/* Ensure button children inherit white text */
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *,
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *, .bg-red-800 *,
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *,
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *,
.bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 * {
  color: inherit !important;
}

/* Fix key action buttons styling */
#validKeys li button, #invalidKeys li button {
  font-size: 0.75rem !important; /* text-xs */
  padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
  border-radius: 0.375rem !important; /* rounded-md */
  font-weight: 500 !important; /* font-medium */
  transition: all 0.2s ease-in-out !important;
  border: 1px solid transparent !important;
}

/* Verify button (green) */
#validKeys li button.bg-green-600,
#invalidKeys li button.bg-green-600 {
  background-color: #16a34a !important; /* green-600 */
  color: #ffffff !important;
  border-color: #15803d !important; /* green-700 */
}

#validKeys li button.bg-green-600:hover,
#invalidKeys li button.bg-green-600:hover {
  background-color: #15803d !important; /* green-700 */
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Details button (light blue) */
#validKeys li button.bg-blue-600,
#invalidKeys li button.bg-blue-600 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
  color: #ffffff !important;
  border-color: #2563eb !important; /* blue-600 */
}

#validKeys li button.bg-blue-600:hover,
#invalidKeys li button.bg-blue-600:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Disable/Enable button (yellow/orange) */
#validKeys li button.bg-yellow-500,
#invalidKeys li button.bg-yellow-500,
#validKeys li button.bg-orange-500,
#invalidKeys li button.bg-orange-500 {
  background-color: #f59e0b !important; /* amber-500 */
  color: #ffffff !important;
  border-color: #d97706 !important; /* amber-600 */
}

#validKeys li button.bg-yellow-500:hover,
#invalidKeys li button.bg-yellow-500:hover,
#validKeys li button.bg-orange-500:hover,
#invalidKeys li button.bg-orange-500:hover {
  background-color: #d97706 !important; /* amber-600 */
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Fix pagination dropdown styling */
.pagination-controls select {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #374151 !important; /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 0.375rem !important; /* rounded-md */
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important; /* text-sm */
}

.pagination-controls select:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Fix pagination text */
.pagination-controls span, .pagination-controls label {
  color: #374151 !important; /* gray-700 */
  font-weight: 500 !important;
}

/* Fix specific pagination elements by ID and class */
#validKeysPageSize, #invalidKeysPageSize,
#itemsPerPageSelect, #invalidItemsPerPageSelect {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #374151 !important; /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 0.375rem !important; /* rounded-md */
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important; /* text-sm */
}

#validKeysPageSize:focus, #invalidKeysPageSize:focus,
#itemsPerPageSelect:focus, #invalidItemsPerPageSelect:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Fix pagination container text */
.flex.items-center.gap-2 span {
  color: #374151 !important; /* gray-700 */
  font-weight: 500 !important;
}

/* Fix any remaining form elements */
select, input[type="text"], input[type="number"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #374151 !important; /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

select:focus, input[type="text"]:focus, input[type="number"]:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  outline: none !important;
}

/* Comprehensive button text color fixes for all button states */
button.bg-success-600, button.bg-success-700,
button.bg-blue-600, button.bg-blue-700,
button.bg-purple-600, button.bg-purple-700,
button.bg-red-800, button.bg-red-900,
button.bg-teal-600, button.bg-teal-700,
button.bg-primary-700, button.bg-primary-800 {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Slate buttons in modals use dark text on light background */
.modal button.bg-slate-500, .modal button.bg-slate-600, .modal button.bg-slate-700 {
  color: #374151 !important; /* gray-700 - dark text for contrast */
  font-weight: 500 !important;
}

/* Ensure button children (icons and text) inherit color */
button.bg-success-600 *, button.bg-success-700 *,
button.bg-blue-600 *, button.bg-blue-700 *,
button.bg-purple-600 *, button.bg-purple-700 *,
button.bg-red-800 *, button.bg-red-900 *,
button.bg-teal-600 *, button.bg-teal-700 *,
button.bg-primary-700 *, button.bg-primary-800 *,
button.bg-slate-500 *, button.bg-slate-600 *, button.bg-slate-700 * {
  color: inherit !important;
}

/* Fix specific button text visibility issues */
.stats-card button, .key-content button {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

/* Fix specific label text visibility issues */
label[for="selectAllValid"],
label[for="selectAllInvalid"],
label[for="failCountThreshold"],
label[for="keySearchInput"],
label[for="itemsPerPageSelect"],
label[for="invalidFailCountThreshold"],
label[for="invalidKeySearchInput"],
label[for="invalidItemsPerPageSelect"] {
  color: #1f2937 !important; /* gray-800 for maximum contrast */
  font-weight: 600 !important; /* font-semibold for better visibility */
  text-shadow: none !important;
}

/* Fix pagination and control text */
.pagination-controls span,
.pagination-controls label,
.stats-card-header span {
  color: #1f2937 !important; /* gray-800 */
  font-weight: 500 !important;
  text-shadow: none !important;
}
#validKeys li button.bg-red-800:hover,
#invalidKeys li button.bg-red-800:hover {
  background-color: rgba(153, 27, 27, 0.75) !important; /* Based on red-800 */
  border-color: rgba(153, 27, 27, 0.95);
}

/* 新增：密钥列表内状态标签颜色调整 */
/* 有效标签 (绿色) - 改为更好的对比度 */
#validKeys li span.bg-success-50.text-success-600,
#invalidKeys li span.bg-success-50.text-success-600 {
  background-color: rgba(34, 197, 94, 0.15) !important; /* green-500 with low opacity */
  color: #16a34a !important; /* green-600 for better contrast on light background */
  border: 1px solid rgba(22, 163, 74, 0.3) !important; /* green-600 border */
  font-weight: 600 !important; /* Make text bolder for better readability */
  text-shadow: none !important; /* Remove any text shadow */
}

/* 失败计数标签 (黄色) - 改为更好的对比度 */
#validKeys li span.bg-amber-50.text-amber-600,
#invalidKeys li span.bg-amber-50.text-amber-600 {
  background-color: rgba(251, 191, 36, 0.15) !important; /* amber-400 with low opacity */
  color: #d97706 !important; /* amber-600 for better contrast on light background */
  border: 1px solid rgba(217, 119, 6, 0.3) !important; /* amber-600 border */
  position: absolute; /* 移动到右下角 */
  bottom: 0.75rem; /* 配合li的p-3内边距 */
  right: 0.75rem;
  z-index: 5; /* 确保在其他元素之上 */
  font-weight: 600 !important; /* Make text bolder for better readability */
  text-shadow: none !important; /* Remove any text shadow */
}

/* 无效标签 (红色) - for invalidKeys list */
#invalidKeys li span.bg-danger-50.text-danger-600 {
  background-color: rgba(239, 68, 68, 0.08) !important; /* 更浅的背景色 */
  color: #f87171 !important; /* 更浅的红色文字 */
  border: 1px solid rgba(239, 68, 68, 0.15); /* 更浅的边框 */
  font-weight: 600 !important; /* 加粗字体 */
}

/* Remove border from the last row's cells in API Call Details Modal table */
#apiCallDetailsContent table tr:last-child td {
  border-bottom: none !important;
}

/* Restore success/failure status colors and icon colors within the API call details table */
#apiCallDetailsContent table td span[class*="text-success"],
#apiCallDetailsContent table td span[class*="success"] {
  color: #6ee7b7 !important; /* Theme success green */
}
#apiCallDetailsContent table td span[class*="text-success"] i,
#apiCallDetailsContent table td span[class*="success"] i {
  color: #6ee7b7 !important;
}

#apiCallDetailsContent table td span[class*="text-danger"],
#apiCallDetailsContent table td span[class*="failure"],
#apiCallDetailsContent table td span[class*="danger"] {
  color: #fca5b3 !important; /* Theme failure red */
}
#apiCallDetailsContent table td span[class*="text-danger"] i,
#apiCallDetailsContent table td span[class*="failure"] i,
#apiCallDetailsContent table td span[class*="danger"] i {
  color: #fca5b3 !important;
}
/* End of API Call Details Modal Specific Styling Adjustments */

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-width: 200px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
}

.dropdown-item:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.dropdown-item:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.dropdown-item i {
  width: 1rem;
  text-align: center;
}

.dropdown-toggle {
  position: relative;
}

/* config_editor.html specific styles */
/* Animations (already in base.html, but keep fade-in class usage) */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
/* Modal specific styles (already in base.html) */
.array-container {
  max-height: 300px;
  overflow-y: auto;
  padding: 1rem; /* p-4 consistency */
  margin-bottom: 0.5rem; /* mb-2 consistency */
  background-color: rgba(255, 255, 255, 0.95) !important; /* light theme */
  border: 1px solid rgba(0, 0, 0, 0.12) !important; /* light gray border */
  color: #374151 !important; /* gray-700 for light theme */
  border-radius: 0.5rem; /* rounded-lg consistency */
}
#API_KEYS_container {
  /* Keep specific ID styling if needed */
  max-height: 300px;
  overflow-y: auto;
}
.config-section {
  display: none;
  /* theming: new background and border for sections */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1.5rem; /* p-6 */
  margin-bottom: 1.5rem; /* mb-6 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
}
.config-section.active {
  display: block;
  animation: fadeIn 0.3s ease forwards; /* Use base animation */
}
.provider-config {
  display: none;
}
.provider-config.active {
  display: block;
}
/* Tailwind Toggle Switch Helper CSS */
.toggle-checkbox:checked {
  @apply: right-0 border-blue-600; /* theming: changed to blue for light theme */
  right: 0;
  border-color: #2563eb; /* theming: blue-600 */
}
.toggle-checkbox:checked + .toggle-label {
  @apply: bg-blue-600; /* theming: changed to blue for light theme */
  background-color: #2563eb; /* theming: blue-600 */
}
.toggle-label {
  /* theming: style for unchecked state */
  background-color: rgba(156, 163, 175, 0.3); /* gray-400 */
}
/* 统一通知样式为黑色半透明，确保与 keys_status 一致 */
.notification {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
}

/* Theming for input fields - 修复边框重影问题 */
.form-input-themed {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important; /* 为独立输入框提供边框 */
  color: #374151 !important; /* gray-700 */
  outline: none !important; /* 移除默认outline */
  box-shadow: none !important; /* 移除默认box-shadow */
  transition: border-color 0.15s ease-in-out !important;
}
.form-input-themed::placeholder {
  color: #9ca3af !important; /* gray-400 */
}
.form-input-themed:focus {
  border-color: #3b82f6 !important; /* focus时改变边框颜色 */
  box-shadow: none !important; /* 移除focus阴影，只保留边框变化 */
  outline: none !important; /* 确保没有outline */
}

/* 对于在包装器内的输入框，移除边框 */
.flex.items-center .form-input-themed,
.array-container .form-input-themed {
  border: none !important; /* 在包装器内的输入框移除边框 */
}

.flex.items-center .form-input-themed:focus,
.array-container .form-input-themed:focus {
  border: none !important; /* 确保focus时也没有边框 */
}

/* Theming for select fields - 改进下拉框样式 */
.form-select-themed {
  background-color: rgba(255, 255, 255, 0.95) !important; /* 白色背景 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important; /* 灰色边框 */
  color: #374151 !important; /* gray-700 文字颜色 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; /* 灰色箭头 */
  appearance: none !important;
  padding: 0.6rem 2.5rem 0.6rem 0.8rem !important; /* 调整内边距 */
  background-repeat: no-repeat !important;
  background-position: right 0.6rem center !important;
  background-size: 1.5em 1.5em !important;
  border-radius: 0.5rem !important; /* 圆角 */
  font-weight: 500 !important; /* 半粗体 */
  height: auto !important; /* 自动高度 */
  box-shadow: none !important; /* 移除阴影 */
  cursor: pointer !important;
}

.form-select-themed:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
  outline: none !important;
}

.form-select-themed option {
  background-color: rgba(
    255,
    255,
    255,
    0.98
  ) !important; /* white background */
  color: #374151 !important; /* gray-700 */
  padding: 8px !important;
}

/* 日志级别样式 - 浅色主题统一设计 */
#LOG_LEVEL {
  font-weight: 600 !important;
}

/* 统一的日志级别选项样式 - 使用浅色主题 */
#LOG_LEVEL option[value="DEBUG"] {
  background-color: rgba(255, 255, 255, 0.98) !important; /* 白色背景 */
  color: #374151 !important; /* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="INFO"] {
  background-color: rgba(
    249,
    250,
    251,
    0.98
  ) !important; /* gray-50 浅灰背景 */
  color: #374151 !important; /* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="WARNING"] {
  background-color: rgba(
    243,
    244,
    246,
    0.98
  ) !important; /* gray-100 稍深灰背景 */
  color: #374151 !important; /* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="ERROR"] {
  background-color: rgba(
    229,
    231,
    235,
    0.98
  ) !important; /* gray-200 中灰背景 */
  color: #374151 !important; /* gray-700 深灰色文字 */
}

#LOG_LEVEL option[value="CRITICAL"] {
  background-color: rgba(
    209,
    213,
    219,
    0.98
  ) !important; /* gray-300 深灰背景 */
  color: #374151 !important; /* gray-700 深灰色文字 */
}

/* 思考模型预算映射样式 */
.map-item {
  background-color: rgba(60, 40, 130, 0.2) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
}

.map-item:hover {
  background-color: rgba(60, 40, 130, 0.3) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
}

.map-key-input {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important; /* gray-700 */
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
}

.map-value-input {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important; /* gray-700 */
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}

.map-value-input:focus {
  background-color: rgba(255, 255, 255, 1) !important;
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
  outline: none !important;
}

/* 警告文字样式 */
.warning-text {
  color: #f87171 !important; /* red-400 */
  font-weight: 600 !important;
  background-color: rgba(248, 113, 113, 0.15) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  border-left: 3px solid #ef4444 !important; /* red-500 */
  display: flex !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.warning-text i {
  margin-right: 0.5rem !important;
  color: #ef4444 !important; /* red-500 */
}

/* 令牌生成按钮样式 */
.generate-btn {
  background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
  color: #3b82f6 !important; /* blue-500 */
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-left: none !important;
  transition: all 0.2s ease !important;
}

.generate-btn:hover {
  background-color: rgba(
    59,
    130,
    246,
    0.2
  ) !important; /* blue-500 more opaque */
  color: #1d4ed8 !important; /* blue-700 */
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3) !important;
}

.generate-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* 导航链接悬停样式 - 优化以避免遮挡内容 */
.nav-link {
  transition: all 0.2s ease-in-out;
  position: relative;
  z-index: 1; /* 确保不会遮挡重要内容 */
}

.nav-link:hover {
  background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
  transform: scale(1.02); /* 使用缩放代替向上移动 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
}

/* 导航按钮容器样式 - 为悬停效果预留空间 */
.nav-buttons-container {
  padding-top: 0.5rem; /* 为悬停效果预留上方空间 */
  padding-bottom: 0.75rem; /* 为悬停效果预留下方空间 */
}

/* 主导航按钮的优化悬停效果 */
.main-nav-btn:hover {
  transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important; /* 蓝色阴影 */
}

/* 操作按钮的优化悬停效果 */
.action-btn {
  position: relative;
  z-index: 1;
}

.action-btn:hover {
  transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
}

.action-btn:hover#saveBtn {
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important; /* 蓝色阴影 */
}

.action-btn:hover#resetBtn {
  box-shadow: 0 8px 20px rgba(107, 114, 128, 0.4) !important; /* 灰色阴影 */
}

/* 刷新按钮样式 - 与监控面板页面保持一致 */
.bg-white.bg-opacity-20 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #3b82f6 !important; /* blue-500 - 与监控面板一致 */
}

.bg-white.bg-opacity-20:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #2563eb !important; /* blue-600 - 悬停时稍深 */
}

/* General label and small text theming for light theme */
label {
  color: #374151 !important; /* Dark gray for labels in light theme */
  font-weight: 600; /* semibold */
}
small {
  color: #6b7280 !important; /* Medium gray for small text */
}

/* Override all violet/purple buttons to light blue */
.bg-violet-600,
button.bg-violet-600 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.bg-violet-600:hover,
button.bg-violet-600:hover,
.hover\\:bg-violet-700:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Override blue buttons to light blue */
.bg-blue-600,
button.bg-blue-600 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
}

.bg-blue-600:hover,
button.bg-blue-600:hover,
.hover\\:bg-blue-700:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
}

/* Override red buttons to bright light red */
.bg-red-600,
button.bg-red-600,
.bg-red-700,
button.bg-red-700,
.bg-red-800,
button.bg-red-800 {
  background-color: #f87171 !important; /* red-400 - bright light red */
}

.bg-red-600:hover,
button.bg-red-600:hover,
.bg-red-700:hover,
button.bg-red-700:hover,
.bg-red-800:hover,
button.bg-red-800:hover,
.hover\\:bg-red-700:hover,
.hover\\:bg-red-800:hover {
  background-color: #ef4444 !important; /* red-500 - darker bright light red */
}

/* Update section headings */
.config-section h2 {
  color: #1f2937 !important; /* gray-800 */
  border-color: #d1d5db !important; /* gray-300 */
}

.config-section h2 i {
  color: #3b82f6 !important; /* blue-500 */
}

/* Update tab button active state - 增强选中态样式，提高优先级 */
button.tab-btn.active {
  background-color: #3b82f6 !important; /* blue-500 */
  color: #ffffff !important; /* 确保白色文字 */
  box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
    0 2px 6px -1px rgba(59, 130, 246, 0.2) !important; /* 蓝色阴影 */
  transform: translateY(-2px) !important; /* 更明显的上移效果 */
  border: 2px solid #2563eb !important; /* blue-600 边框 */
  font-weight: 600 !important; /* 加粗字体 */
}

/* Ensure inactive tabs have proper styling - 增强未选中态样式，提高优先级 */
button.tab-btn:not(.active) {
  background-color: #f8fafc !important; /* slate-50 更浅的背景 */
  color: #64748b !important; /* slate-500 更明显的灰色文字 */
  border: 2px solid #e2e8f0 !important; /* slate-200 边框 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important; /* 轻微阴影 */
  font-weight: 500 !important; /* 中等字体粗细 */
}

button.tab-btn:not(.active):hover {
  background-color: #f1f5f9 !important; /* slate-100 */
  color: #475569 !important; /* slate-600 更深的文字颜色 */
  transform: translateY(-1px) !important;
  border-color: #cbd5e1 !important; /* slate-300 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Add transition for smooth state changes - 提高优先级 */
button.tab-btn {
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  /* 确保基础样式不被Tailwind覆盖 */
  padding: 0.5rem 1.25rem !important; /* px-5 py-2 */
  border-radius: 9999px !important; /* rounded-full */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
}

/* 额外的高优先级规则确保样式生效 */
.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn.active {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
    0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-2px) !important;
  font-weight: 600 !important;
}

.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn:not(.active) {
  background-color: #f8fafc !important;
  color: #64748b !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  font-weight: 500 !important;
  transform: none !important;
}

/* Fix all modal backgrounds - comprehensive override */
.modal .w-full[style*="background-color: rgba(70, 50, 150"],
.modal .w-full.max-w-lg[style*="background-color: rgba(70, 50, 150"],
.modal .w-full.max-w-md[style*="background-color: rgba(70, 50, 150"] {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #374151 !important; /* gray-700 */
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Fix modal titles */
.modal h2.text-gray-800 {
  color: #1f2937 !important; /* gray-800 */
  font-weight: 600 !important;
}

/* Fix modal close buttons */
.modal .text-gray-300 {
  color: #6b7280 !important; /* gray-500 */
}

.modal .text-gray-300:hover {
  color: #374151 !important; /* gray-700 */
}

/* Fix modal body text */
.modal p,
.modal label,
.modal span {
  color: #374151 !important; /* gray-700 */
}

/* Fix modal textarea and input styling */
.modal textarea,
.modal input {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #374151 !important; /* gray-700 */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.modal textarea:focus,
.modal input:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Fix modal button styling */
.modal .bg-violet-600,
.modal button.bg-violet-600 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
  color: #ffffff !important;
  border: 1px solid #2563eb !important; /* blue-600 */
}

.modal .bg-violet-600:hover,
.modal button.bg-violet-600:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal blue button styling */
.modal .bg-blue-500,
.modal button.bg-blue-500,
.modal .bg-blue-600,
.modal button.bg-blue-600,
.modal .bg-blue-700,
.modal button.bg-blue-700 {
  background-color: #3b82f6 !important; /* blue-500 - light blue */
  color: #ffffff !important;
  border: 1px solid #2563eb !important; /* blue-600 */
}

.modal .bg-blue-500:hover,
.modal button.bg-blue-500:hover,
.modal .bg-blue-600:hover,
.modal button.bg-blue-600:hover,
.modal .bg-blue-700:hover,
.modal button.bg-blue-700:hover {
  background-color: #2563eb !important; /* blue-600 - darker light blue */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal cancel/secondary buttons */
.modal .bg-gray-500,
.modal button.bg-gray-500,
.modal .bg-gray-600,
.modal button.bg-gray-600 {
  background-color: #e5e7eb !important; /* gray-200 - light gray */
  color: #374151 !important; /* gray-700 - dark text for contrast */
  border: 1px solid #d1d5db !important; /* gray-300 */
}

.modal .bg-gray-500:hover,
.modal button.bg-gray-500:hover,
.modal .bg-gray-600:hover,
.modal button.bg-gray-600:hover {
  background-color: #d1d5db !important; /* gray-300 - darker light gray */
  color: #374151 !important; /* gray-700 - dark text for contrast */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix modal red/danger buttons */
.modal .bg-red-500,
.modal button.bg-red-500,
.modal .bg-red-600,
.modal button.bg-red-600,
.modal .bg-red-700,
.modal button.bg-red-700 {
  background-color: #f87171 !important; /* red-400 - bright light red */
  color: #ffffff !important;
  border: 1px solid #ef4444 !important; /* red-500 */
}

.modal .bg-red-500:hover,
.modal button.bg-red-500:hover,
.modal .bg-red-600:hover,
.modal button.bg-red-600:hover,
.modal .bg-red-700:hover,
.modal button.bg-red-700:hover {
  background-color: #ef4444 !important; /* red-500 - darker bright light red */
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Fix all container backgrounds with purple */
[style*="background-color: rgba(255, 255, 255, 0.05)"],
[style*="background-color: rgba(80, 60, 160"],
[style*="background-color: rgba(70, 50, 150"],
[style*="background-color: rgba(60, 40, 130"],
[style*="background-color: rgba(120, 100, 200"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
}

/* Fix map item styling */
.map-item {
  background-color: rgba(249, 250, 251, 0.8) !important; /* gray-50 */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
}

.map-item:hover {
  background-color: rgba(243, 244, 246, 1) !important; /* gray-100 */
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Update model helper buttons */
.model-helper-trigger-btn {
  color: #3b82f6 !important; /* blue-500 */
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.model-helper-trigger-btn:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: #1d4ed8 !important; /* blue-700 */
}

/* Comprehensive button text color fixes */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.bg-red-800,
.bg-green-500,
.bg-green-600,
.bg-green-700,
.bg-sky-500,
.bg-sky-600,
.bg-sky-700,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-violet-500,
.bg-violet-600,
.bg-violet-700 {
  color: #ffffff !important;
}

/* Ensure button children inherit white text */
.bg-blue-500 *,
.bg-blue-600 *,
.bg-blue-700 *,
.bg-red-500 *,
.bg-red-600 *,
.bg-red-700 *,
.bg-red-800 *,
.bg-green-500 *,
.bg-green-600 *,
.bg-green-700 *,
.bg-sky-500 *,
.bg-sky-600 *,
.bg-sky-700 *,
.bg-purple-500 *,
.bg-purple-600 *,
.bg-purple-700 *,
.bg-violet-500 *,
.bg-violet-600 *,
.bg-violet-700 * {
  color: inherit !important;
}

/* Fix page title gradient - comprehensive override */
h1.text-transparent,
.text-transparent.bg-clip-text,
.bg-gradient-to-r.from-violet-400.to-pink-400 {
  background: none !important;
  color: #1f2937 !important; /* gray-800 - consistent with other pages */
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
  font-weight: 800 !important; /* font-extrabold */
}

/* Fix all gradient buttons to use solid blue */
.bg-gradient-to-r.from-violet-500.to-pink-500,
.bg-gradient-to-r.from-gray-600.to-gray-700 {
  background: none !important;
}

/* Ensure all violet/purple colors are converted to blue theme */
.text-violet-300,
.text-violet-400,
.text-violet-100 {
  color: #3b82f6 !important; /* blue-500 */
}

.border-violet-300,
.border-violet-400 {
  border-color: rgba(
    59,
    130,
    246,
    0.3
  ) !important; /* blue-500 with opacity */
}

.hover\\:text-violet-400:hover,
.hover\\:text-violet-100:hover {
  color: #2563eb !important; /* blue-600 */
}

.hover\\:bg-violet-700:hover {
  background-color: #2563eb !important; /* blue-600 */
}

/* Fix focus states for form elements */
.focus-within\\:border-violet-400:focus-within,
.focus-within\\:ring-violet-400:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
}

/* Fix focus-within border color for auth token wrapper */
.focus-within\\:border-blue-500:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
}

/* More specific selector for auth token wrapper */
div.flex.items-center.flex-grow.border.rounded-md.focus-within\\:border-blue-500:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
}

/* Even more specific selector targeting the exact auth token wrapper */
.mb-6
  .flex.items-center
  div.flex.items-center.flex-grow.border.rounded-md:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
}

/* Fix primary color focus states - convert purple to blue */
.focus\\:border-primary-500:focus,
.focus\\:border-primary-600:focus {
  border-color: #3b82f6 !important; /* blue-500 */
}

.focus\\:ring-primary-200:focus,
.focus\\:ring-primary-300:focus {
  --tw-ring-color: rgba(
    59,
    130,
    246,
    0.2
  ) !important; /* blue-500 with opacity */
}

/* Fix select element styling */
.form-select-themed {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important; /* gray-700 */
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-select-themed:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
  outline: none !important;
}

/* Override any remaining primary colors */
.text-primary-600,
.text-primary-500 {
  color: #3b82f6 !important; /* blue-500 */
}

.bg-primary-600,
.bg-primary-500 {
  background-color: #3b82f6 !important; /* blue-500 */
}

.bg-primary-700:hover,
.hover\\:bg-primary-700:hover {
  background-color: #2563eb !important; /* blue-600 */
}

/* Fix dynamic input wrapper focus states - convert violet to blue */
.focus-within\\:border-violet-400:focus-within,
.focus-within\\:ring-violet-400:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
}

/* Ensure all array input wrappers use blue theme */
.array-container .flex.items-center.flex-grow.rounded-md {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.array-container .flex.items-center.flex-grow.rounded-md:focus-within {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: none !important; /* 移除focus阴影 */
}


/* Filename: web/static/css/output.css */
/* 按钮的“默认公民”外观 (inactive) */
.tab-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}
/* 按钮在被悬停时的外观 */
.tab-btn:hover {
    background-color: #f1f5f9 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}
/* 按钮被授予 .active “荣誉勋章”后的外观 */
.tab-btn.active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4), 0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-2px) !important;
}