/* ==================== Client通用样式文件 ==================== */
/* 整合了：tech-theme.css, pagination.css, table-fixes.css, select-arrow-fix.css */

/* ==================== Vue.js v-cloak 指令样式 ==================== */
[v-cloak] {
  display: none;
}

/* ==================== Select下拉菜单箭头修复 ==================== */
/* 为所有select元素添加自定义下拉箭头 */
.select-modern {
  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='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem !important;
}

/* 确保箭头在focus状态下也可见 */
.select-modern:focus {
  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='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* 为其他可能的select类名也添加箭头，但排除 .select-field（它有自己的样式） */
select[class*="select"]:not(.select-field) {
  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='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem !important;
}

select[class*="select"]:not(.select-field):focus {
  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='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* 确保appearance-none不会影响我们的自定义箭头 */
.select-modern,
select[class*="select"]:not(.select-field) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 为Firefox添加特殊处理 */
@-moz-document url-prefix() {
  .select-modern,
  select[class*="select"]:not(.select-field) {
    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='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem !important;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .select-modern,
  select[class*="select"]:not(.select-field) {
    background-size: 1.25em 1.25em;
    padding-right: 2.25rem !important;
  }
}

/* ==================== 表格操作列溢出修复 ==================== */
/* 确保表格容器正确处理溢出 */
.table-responsive {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
}

/* 修复表格最小宽度设置 */
.table-min-width {
  min-width: 1000px !important;
  width: 100%;
  table-layout: auto;
}

/* 确保操作列有足够的宽度且不溢出 */
.table-min-width th:last-child,
.table-min-width td:last-child {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  white-space: nowrap;
  text-align: center;
  position: sticky;
  right: 0;
  background: white;
  z-index: 10;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

/* 操作列内容样式 */
.action-menu-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-width: 80px;
}

.action-menu-container button {
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 确保下拉菜单正确定位 */
.action-dropdown {
  position: fixed !important;
  z-index: 2147483647 !important;
  min-width: 140px !important;
  max-width: 200px !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .table-min-width {
    min-width: 900px !important;
  }
  
  .table-min-width th:last-child,
  .table-min-width td:last-child {
    width: 100px !important;
    min-width: 100px !important;
  }
}

@media (max-width: 768px) {
  .table-min-width {
    min-width: 800px !important;
  }
  
  .table-min-width th:last-child,
  .table-min-width td:last-child {
    width: 80px !important;
    min-width: 80px !important;
  }
  
  .action-menu-container button {
    padding: 6px 8px;
  }
}

/* 确保表格行内容不溢出 */
.table-min-width td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 特定列的宽度控制 */
.table-min-width th:nth-child(1), /* 复选框列 */
.table-min-width td:nth-child(1) {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

.table-min-width th:nth-child(2), /* ID列 */
.table-min-width td:nth-child(2) {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

/* 确保表格头部也应用相同的宽度控制 */
.table-min-width thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 20;
}

/* 修复滚动条样式 */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ==================== 分页组件样式 ==================== */
/* 统一的分页组件样式 */
.pagination-modern {
  @apply bg-gradient-to-r from-secondary-50 to-primary-50 border-t border-secondary-100;
}

.page-btn-modern {
  @apply px-4 py-2 rounded-xl border border-secondary-200 bg-white text-secondary-700 hover:bg-primary-50 hover:border-primary-300 transition-all duration-300 font-medium;
}

.page-btn-active {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white border-primary-500 shadow-glow;
}

/* 分页容器样式 */
.pagination-container {
  @apply px-6 py-4 flex items-center justify-between;
}

/* 分页信息文本样式 */
.pagination-info {
  @apply text-sm text-secondary-700;
}

.pagination-info strong {
  @apply font-semibold text-secondary-900;
}

/* 分页按钮组样式 */
.pagination-buttons {
  @apply flex space-x-2;
}

/* 分页按钮基础样式 */
.pagination-btn {
  @apply px-4 py-2 rounded-xl border border-secondary-200 bg-white text-secondary-700 hover:bg-primary-50 hover:border-primary-300 transition-all duration-300 font-medium;
}

/* 分页按钮禁用状态 */
.pagination-btn:disabled {
  @apply opacity-50 cursor-not-allowed hover:bg-white hover:border-secondary-200;
}

/* 分页按钮激活状态 */
.pagination-btn.active {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white border-primary-500 shadow-glow;
}

/* 分页省略号样式 */
.pagination-ellipsis {
  @apply bg-white text-secondary-400 cursor-default;
}

/* 响应式分页样式 */
@media (max-width: 640px) {
  .pagination-container {
    @apply flex-col space-y-4;
  }
  
  .pagination-info {
    @apply text-center;
  }
  
  .pagination-buttons {
    @apply justify-center;
  }
  
  .pagination-btn {
    @apply px-3 py-1.5 text-sm;
  }
}

/* 深色模式支持 */
.dark .pagination-modern {
  @apply bg-gradient-to-r from-secondary-800 to-primary-800 border-secondary-700;
}

.dark .page-btn-modern {
  @apply bg-secondary-800 border-secondary-600 text-secondary-200 hover:bg-primary-800 hover:border-primary-400;
}

.dark .page-btn-active {
  @apply bg-gradient-to-r from-primary-600 to-primary-700 text-white border-primary-600;
}

.dark .pagination-info {
  @apply text-secondary-300;
}

.dark .pagination-info strong {
  @apply text-secondary-100;
}

/* 彩色主题下的分页按钮 */
.theme-color .page-btn-modern {
  border-color: rgba(99, 102, 241, 0.2) !important;
}

.theme-color .page-btn-modern:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.5), rgba(250, 245, 255, 0.5), rgba(253, 242, 248, 0.5)) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

.theme-color .page-btn-active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2) !important;
}

/* ==================== 主色变量（温暖风默认） ==================== */
/* 供 .buy-btn 等主色按钮使用，无 data-theme 或 warm 时生效 */
:root {
  --accent: #c46f54;
  --accent-hover: #b8644b;
  --cta: #c46f54;
  --cta-hover: #b8644b;
}

html.dark {
  --accent: rgb(217, 119, 87);
  --accent-hover: rgb(200, 100, 70);
  --cta: rgb(217, 119, 87);
  --cta-hover: rgb(200, 100, 70);
}

/* ==================== 主色按钮 .buy-btn ==================== */
/* 主色调：温暖风 #c46f54 / 暗色 rgb(217,119,87)，科技风用 --cta 蓝。用字面量 fallback 避免变量未生效时变黑 */
.buy-btn,
#app .buy-btn,
button.buy-btn,
#app button.buy-btn {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cta, #c46f54) !important;
  background-color: var(--cta, #c46f54) !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  color: #fff !important;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}

.buy-btn:hover,
#app .buy-btn:hover,
button.buy-btn:hover,
#app button.buy-btn:hover {
  background: var(--cta-hover, #b8644b) !important;
  background-color: var(--cta-hover, #b8644b) !important;
  background-image: none !important;
  transform: translateY(-1px);
}

html.dark .buy-btn,
html.dark #app .buy-btn,
html.dark button.buy-btn {
  background: var(--cta, rgb(217, 119, 87)) !important;
  background-color: var(--cta, rgb(217, 119, 87)) !important;
}

html.dark .buy-btn:hover,
html.dark #app .buy-btn:hover,
html.dark button.buy-btn:hover {
  background: var(--cta-hover, rgb(200, 100, 70)) !important;
  background-color: var(--cta-hover, rgb(200, 100, 70)) !important;
}

/* ==================== 通知模态框等通用按钮（与主题变量一致） ==================== */
/* 确保通知列表中的「标记已读」「查看详情」等按钮与背景区分明显 */
.btn-claude-primary {
  background: var(--cta, #c46f54);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-claude-primary:hover {
  background: var(--cta-hover, #b36248);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.18);
}

.btn-claude-secondary {
  background: var(--panel, #f9f6f1);
  color: var(--text, #1a1411);
  border: 1px solid var(--panel-border, #e8e0d6);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn-claude-secondary:hover {
  border-color: var(--accent, #c46f54);
  background: var(--input-bg, #f5f0eb);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.dark .btn-claude-secondary {
  color: var(--text);
}

/* ==================== 科技风主题样式 ==================== */
/* 使用 data-theme="tech" 属性来激活科技风主题 */
/* 与原有主题完全隔离，不影响原有功能 */

/* 全局强制覆盖 - 最高优先级 */
html[data-theme="tech"] {
  /* 强制覆盖所有可能的颜色继承 */
  --override-text: var(--text);
  --override-bg: var(--bg);
  --override-panel: var(--panel);
}

/* 主题1: 科技风（tech） */
html[data-theme="tech"] {
  /* Light 模式 - 深色科技风 */
  --bg: #0b1021;
  --panel: rgba(255,255,255,0.04);
  --panel-border: rgba(255,255,255,0.08);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --input-bg: rgba(255,255,255,0.04);
  --input-focus-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.08);
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-secondary: #3b82f6;
  --cta: #3b82f6;
  --cta-hover: #2563eb;
  --shadow: 0 25px 80px rgba(0,0,0,0.35);
  --glow: 0 10px 30px rgba(59,130,246,0.25);
  --gradient-from: rgba(59,130,246,0.18);
  --gradient-to: rgba(59,130,246,0.14);
}

html[data-theme="tech"].dark {
  /* Dark 模式 - 更深的科技风 */
  --bg: #000000;
  --panel: rgba(255,255,255,0.02);
  --panel-border: rgba(255,255,255,0.05);
  --text: #f9fafb;
  --muted: #d1d5db;
  --input-bg: rgba(255,255,255,0.02);
  --input-focus-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.05);
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-secondary: #3b82f6;
  --cta: #3b82f6;
  --cta-hover: #60a5fa;
  --shadow: 0 25px 80px rgba(0,0,0,0.5);
  --glow: 0 10px 30px rgba(59,130,246,0.4);
  --gradient-from: rgba(59,130,246,0.3);
  --gradient-to: rgba(59,130,246,0.25);
}

/* 强制主题模式 */
html[data-theme="tech"] {
  color-scheme: light !important;
  forced-color-adjust: none !important;
}

html[data-theme="tech"].dark {
  color-scheme: dark !important;
  forced-color-adjust: none !important;
}

/* 科技风特殊背景 */
html[data-theme="tech"] body {
  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15), transparent 25%),
              radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.15), transparent 25%),
              var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html[data-theme="tech"].dark body {
  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.25), transparent 25%),
              radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.25), transparent 25%),
              var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 通用样式 - 强制覆盖所有元素 */
html[data-theme="tech"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 强制覆盖所有元素，确保使用 CSS 变量 */
html[data-theme="tech"] * {
  forced-color-adjust: none !important;
}

html[data-theme="tech"] input,
html[data-theme="tech"] select,
html[data-theme="tech"] textarea,
html[data-theme="tech"] button {
  forced-color-adjust: none !important;
}

html[data-theme="tech"]:not(.dark) input,
html[data-theme="tech"]:not(.dark) select,
html[data-theme="tech"]:not(.dark) textarea,
html[data-theme="tech"]:not(.dark) button {
  color-scheme: light !important;
}

html[data-theme="tech"].dark input,
html[data-theme="tech"].dark select,
html[data-theme="tech"].dark textarea,
html[data-theme="tech"].dark button {
  color-scheme: dark !important;
}

/* 特殊元素样式调整 */
html[data-theme="tech"] select option {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* Glass 效果 */
html[data-theme="tech"] .glass,
html[data-theme="tech"] .card-claude,
html[data-theme="tech"] .stats-card-claude,
html[data-theme="tech"] .bg-white {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Tab 按钮 */
html[data-theme="tech"] .tab-btn {
  border: 1px solid var(--panel-border) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  transition: all 0.18s ease !important;
}

html[data-theme="tech"] .tab-btn.active {
  border-color: var(--accent) !important;
  background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to)) !important;
  color: #ffffff !important;
  box-shadow: var(--glow) !important;
}

/* 输入框 */
html[data-theme="tech"] .input,
html[data-theme="tech"] .input-claude,
html[data-theme="tech"] input,
html[data-theme="tech"] select,
html[data-theme="tech"] textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

html[data-theme="tech"] .input:focus,
html[data-theme="tech"] .input-claude:focus,
html[data-theme="tech"] input:focus,
html[data-theme="tech"] select:focus,
html[data-theme="tech"] textarea:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 0 !important;
  background: var(--input-focus-bg) !important;
  border-color: var(--accent) !important;
}

/* 按钮 */
html[data-theme="tech"] .btn,
html[data-theme="tech"] .btn-claude-primary,
html[data-theme="tech"] .btn-primary {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  transition: all .15s ease !important;
  background: var(--cta) !important;
  color: #fff !important;
}

html[data-theme="tech"] .btn:hover,
html[data-theme="tech"] .btn-claude-primary:hover,
html[data-theme="tech"] .btn-primary:hover {
  background: var(--cta-hover) !important;
  transform: translateY(-1px) !important;
}

/* 主色按钮在科技风下也使用主题主色，强制背景避免被 button 默认样式覆盖 */
html[data-theme="tech"] .buy-btn {
  background: var(--cta) !important;
  background-color: var(--cta) !important;
  background-image: none !important;
  color: #fff !important;
}

html[data-theme="tech"] .buy-btn:hover {
  background: var(--cta-hover) !important;
  background-color: var(--cta-hover) !important;
  background-image: none !important;
}

/* Pill 标签 - 科技风下使用蓝色系，与主题一致 */
html[data-theme="tech"] .pill {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

html[data-theme="tech"].dark .pill {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  color: #93c5fd !important;
}

html[data-theme="tech"] .btn-ghost,
html[data-theme="tech"] .btn-claude-secondary,
html[data-theme="tech"] .btn-secondary {
  border-color: var(--panel-border) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
}

html[data-theme="tech"] .btn-ghost:hover,
html[data-theme="tech"] .btn-claude-secondary:hover,
html[data-theme="tech"] .btn-secondary:hover {
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

/* 表格 */
html[data-theme="tech"] .table-head,
html[data-theme="tech"] thead th {
  color: var(--muted) !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

html[data-theme="tech"] tbody tr {
  border-bottom: 1px solid var(--panel-border) !important;
}

html[data-theme="tech"] tbody tr:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

/* Badge */
html[data-theme="tech"] .badge {
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

html[data-theme="tech"] .badge-success,
html[data-theme="tech"] .badge-claude-success {
  background: rgba(71, 199, 118, 0.16) !important;
  color: #47c776 !important;
}

html[data-theme="tech"].dark .badge-success,
html[data-theme="tech"].dark .badge-claude-success {
  background: rgba(71, 199, 118, 0.25) !important;
  color: #6ee7b7 !important;
}

html[data-theme="tech"] .badge-warn,
html[data-theme="tech"] .badge-claude-warning {
  background: rgba(251, 191, 36, 0.16) !important;
  color: #f59e0b !important;
}

html[data-theme="tech"].dark .badge-warn,
html[data-theme="tech"].dark .badge-claude-warning {
  background: rgba(251, 191, 36, 0.25) !important;
  color: #fcd34d !important;
}

html[data-theme="tech"] .badge-error,
html[data-theme="tech"] .badge-claude-error {
  background: rgba(226, 76, 69, 0.16) !important;
  color: #e24c45 !important;
}

html[data-theme="tech"].dark .badge-error,
html[data-theme="tech"].dark .badge-claude-error {
  background: rgba(226, 76, 69, 0.25) !important;
  color: #fca5a5 !important;
}

html[data-theme="tech"] .badge-info,
html[data-theme="tech"] .badge-claude-info {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #ffffff !important;
}

html[data-theme="tech"].dark .badge-info,
html[data-theme="tech"].dark .badge-claude-info {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #ffffff !important;
}

/* Modal - 覆盖所有可能的模态框背景 */
html[data-theme="tech"] .modal,
html[data-theme="tech"] .modal-overlay,
html[data-theme="tech"] [class*="bg-opacity"],
html[data-theme="tech"] .bg-black,
html[data-theme="tech"] .bg-opacity-50,
html[data-theme="tech"] .bg-opacity-75,
html[data-theme="tech"] .bg-opacity-90,
html[data-theme="tech"] .fixed.inset-0[class*="bg"],
html[data-theme="tech"] div[class*="bg-black"][class*="bg-opacity"],
html[data-theme="tech"] .fixed.inset-0.bg-black {
  background: rgb(6, 8, 20) !important;
  background-color: rgb(6, 8, 20) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="tech"].dark .modal,
html[data-theme="tech"].dark .modal-overlay,
html[data-theme="tech"].dark [class*="bg-opacity"],
html[data-theme="tech"].dark .bg-black,
html[data-theme="tech"].dark .bg-opacity-50,
html[data-theme="tech"].dark .bg-opacity-75,
html[data-theme="tech"].dark .bg-opacity-90,
html[data-theme="tech"].dark .fixed.inset-0[class*="bg"],
html[data-theme="tech"].dark div[class*="bg-black"][class*="bg-opacity"],
html[data-theme="tech"].dark .fixed.inset-0.bg-black {
  background: rgb(0, 0, 0) !important;
  background-color: rgb(0, 0, 0) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="tech"] .modal-content,
html[data-theme="tech"] .modal-claude {
  background: rgba(11, 16, 33, 0.98) !important;
  background-color: rgba(11, 16, 33, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="tech"].dark .modal-content,
html[data-theme="tech"].dark .modal-claude {
  background: rgba(0, 0, 0, 0.98) !important;
  background-color: rgba(0, 0, 0, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* 模态框通用结构：标题固定，滚动条从标题下开始 */
.modal-body-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 文本颜色 */
html[data-theme="tech"] .text-white,
html[data-theme="tech"] h1,
html[data-theme="tech"] h2,
html[data-theme="tech"] h3,
html[data-theme="tech"] h4,
html[data-theme="tech"] h5,
html[data-theme="tech"] h6 {
  color: var(--text) !important;
}

html[data-theme="tech"] .text-slate-300,
html[data-theme="tech"] .text-slate-400,
html[data-theme="tech"] .text-gray-500,
html[data-theme="tech"] .text-gray-600 {
  color: var(--muted) !important;
}

html[data-theme="tech"] .text-indigo-200,
html[data-theme="tech"] .text-blue-400,
html[data-theme="tech"] a {
  color: #ffffff !important;
}

html[data-theme="tech"] a:hover {
  color: #e5e7eb !important;
}

html[data-theme="tech"].dark a:hover {
  color: #f9fafb !important;
}

/* 强制覆盖所有元素 */
html[data-theme="tech"] * {
  forced-color-adjust: none !important;
}

/* 滚动条 */
html[data-theme="tech"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="tech"] ::-webkit-scrollbar-track {
  background: var(--input-bg);
}

html[data-theme="tech"] ::-webkit-scrollbar-thumb {
  background: var(--input-border);
  border-radius: 4px;
}

html[data-theme="tech"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* 侧边栏样式 */
html[data-theme="tech"] #sidebar,
html[data-theme="tech"] #mini-sidebar {
  background: var(--panel) !important;
  border-right-color: var(--panel-border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html[data-theme="tech"] #sidebar *,
html[data-theme="tech"] #mini-sidebar * {
  color: inherit !important;
}

html[data-theme="tech"] #sidebar .sidebar-tab-item.active,
html[data-theme="tech"] #sidebar .sidebar-tab-item.active .nav-text,
html[data-theme="tech"] #sidebar .sidebar-tab-item.active i {
  color: #ffffff !important;
}

html[data-theme="tech"].dark #sidebar .sidebar-tab-item.active,
html[data-theme="tech"].dark #sidebar .sidebar-tab-item.active .nav-text,
html[data-theme="tech"].dark #sidebar .sidebar-tab-item.active i {
  color: #ffffff !important;
}

/* 头部导航样式 */
html[data-theme="tech"] header,
html[data-theme="tech"] .topbar-wrap {
  background: var(--panel) !important;
  border-bottom-color: var(--panel-border) !important;
  color: var(--text) !important;
}

/* 确保顶栏背景色覆盖内联样式 */
html[data-theme="tech"] .topbar-wrap[style*="background"] {
  background: var(--panel) !important;
}

html[data-theme="tech"].dark .topbar-wrap[style*="background"] {
  background: var(--panel) !important;
}

html[data-theme="tech"] .topbar {
  background: transparent !important;
}

html[data-theme="tech"] header *,
html[data-theme="tech"] .topbar *,
html[data-theme="tech"] .topbar-wrap * {
  color: inherit !important;
}

html[data-theme="tech"] .topbar .logo {
  color: var(--text) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--text) !important;
  background-clip: unset !important;
}

html[data-theme="tech"] .topbar .logo::after {
  background: linear-gradient(90deg, var(--accent), rgba(59, 130, 246, 0.5)) !important;
}

html[data-theme="tech"] .topbar .nav-link {
  color: var(--text) !important;
}

html[data-theme="tech"] .topbar .nav-link:hover {
  background: var(--input-bg) !important;
  color: var(--accent) !important;
}

html[data-theme="tech"] .topbar .nav-dropdown-trigger {
  color: var(--text) !important;
}

html[data-theme="tech"] .topbar .nav-dropdown-trigger:hover {
  background: var(--input-bg) !important;
  color: var(--accent) !important;
}

html[data-theme="tech"] .topbar .nav-dropdown-menu,
html[data-theme="tech"] .nav-dropdown-menu,
html[data-theme="tech"] .nav-dropdown-menu.show,
html[data-theme="tech"] [class*="nav-dropdown-menu"] {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="tech"].dark .topbar .nav-dropdown-menu,
html[data-theme="tech"].dark .nav-dropdown-menu,
html[data-theme="tech"].dark .nav-dropdown-menu.show,
html[data-theme="tech"].dark [class*="nav-dropdown-menu"] {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="tech"] .topbar .nav-dropdown-item {
  color: var(--text) !important;
}

html[data-theme="tech"] .topbar .nav-dropdown-item:hover {
  background: var(--input-bg) !important;
  color: var(--accent) !important;
}

html[data-theme="tech"] .topbar .ghost-btn,
html[data-theme="tech"] .topbar .solid-btn {
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--text) !important;
}

html[data-theme="tech"] .topbar .solid-btn {
  background: var(--cta) !important;
  color: #fff !important;
  box-shadow: var(--glow) !important;
}

html[data-theme="tech"] .topbar .solid-btn:hover {
  background: var(--cta-hover) !important;
}

html[data-theme="tech"] .topbar .ghost-btn:hover {
  background: var(--input-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-theme="tech"] .user-menu-button {
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
}

html[data-theme="tech"] .user-menu-button:hover {
  background: var(--input-bg) !important;
}

html[data-theme="tech"] .user-name {
  color: var(--text) !important;
}

html[data-theme="tech"] .user-menu-arrow {
  color: var(--muted) !important;
}

html[data-theme="tech"] .user-dropdown-menu,
html[data-theme="tech"] .user-dropdown-menu.show,
html[data-theme="tech"] #user-dropdown-menu,
html[data-theme="tech"] #user-dropdown-menu.show,
html[data-theme="tech"] #notification-dropdown,
html[data-theme="tech"] #notification-dropdown.show,
html[data-theme="tech"] [class*="user-dropdown-menu"],
html[data-theme="tech"] [class*="notification-dropdown"],
html[data-theme="tech"] [id*="user-dropdown-menu"],
html[data-theme="tech"] [id*="notification-dropdown"] {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html[data-theme="tech"].dark .user-dropdown-menu,
html[data-theme="tech"].dark .user-dropdown-menu.show,
html[data-theme="tech"].dark #user-dropdown-menu,
html[data-theme="tech"].dark #user-dropdown-menu.show,
html[data-theme="tech"].dark #notification-dropdown,
html[data-theme="tech"].dark #notification-dropdown.show,
html[data-theme="tech"].dark [class*="user-dropdown-menu"],
html[data-theme="tech"].dark [class*="notification-dropdown"],
html[data-theme="tech"].dark [id*="user-dropdown-menu"],
html[data-theme="tech"].dark [id*="notification-dropdown"] {
  background: #1f2937 !important;
  border: 1px solid rgba(55, 65, 81, 0.8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html[data-theme="tech"] .user-dropdown-item {
  color: var(--text) !important;
}

html[data-theme="tech"] .user-dropdown-item:hover {
  background: var(--input-bg) !important;
  color: var(--accent) !important;
}

html[data-theme="tech"] .mobile-menu-button {
  color: var(--text) !important;
}

html[data-theme="tech"] .mobile-sidebar {
  background: var(--panel) !important;
  border-right-color: var(--panel-border) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html[data-theme="tech"] .mobile-sidebar * {
  color: var(--text) !important;
}

html[data-theme="tech"] .mobile-sidebar-overlay {
  background: rgb(6, 8, 20) !important;
}

html[data-theme="tech"].dark .mobile-sidebar-overlay {
  background: rgb(0, 0, 0) !important;
}

/* Footer 样式 */
html[data-theme="tech"] footer {
  background: var(--panel) !important;
  border-top: 1px solid var(--panel-border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* 确保footer背景色覆盖内联样式 */
html[data-theme="tech"] footer[style*="background"] {
  background: var(--panel) !important;
}

html[data-theme="tech"] footer * {
  color: inherit !important;
}

html[data-theme="tech"] .footer-title {
  color: var(--text) !important;
  font-weight: 800 !important;
}

html[data-theme="tech"] .footer-link {
  color: var(--muted) !important;
  font-weight: 600 !important;
}

html[data-theme="tech"] .footer-link:hover {
  color: var(--accent) !important;
}

html[data-theme="tech"] .card-desc,
html[data-theme="tech"] footer .card-desc {
  color: var(--muted) !important;
}

html[data-theme="tech"] .footer-grid {
  color: var(--text) !important;
}