/* 深色科技风主题覆盖样式 - 参考 x.ai */

/* 容器层级 */
.container {
  position: relative;
  z-index: 1;
}

/* 侧边栏深色样式 */
.sidebar {
  border-right: 1px solid var(--border);
  background: rgba(20, 20, 30, 0.7);
  backdrop-filter: blur(20px);
}

.sidebar::before {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(124, 92, 255, 0.15) 0%,
    transparent 70%
  );
}

.brand .logo {
  background: var(--primary-gradient);
  box-shadow: var(--glow);
}

.brand h1 {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(124, 92, 255, 0.5));
}

/* Header 深色样式 */
.header {
  border-bottom: 1px solid var(--border);
  background: rgba(20, 20, 30, 0.8);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.search {
  background: var(--soft);
  border: 1px solid var(--border);
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* 按钮深色样式 */
.btn {
  border: 1px solid var(--border);
  background: var(--soft);
  color: var(--text);
}

.btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 15px var(--accent-glow);
}

.btn.primary {
  background: var(--primary-gradient);
  border-color: transparent;
  box-shadow: var(--glow);
}

.btn.primary:hover {
  box-shadow: 0 0 30px var(--accent-glow);
}

/* 子导航深色样式 */
.subnav {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.segment {
  background: var(--soft);
  border: 1px solid var(--border);
}

.segment button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.2);
}

/* Panel 深色玻璃效果 */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

.panel h2 {
  color: var(--text);
}

.panel .desc {
  color: var(--text-secondary);
}

/* KPI 卡片深色样式 */
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
}

.kpi:hover {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

.kpi h3 {
  color: var(--text-secondary);
}

.kpi .num {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.5));
}

/* 表格深色样式 */
.table {
  color: var(--text);
}

.table th {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.table td {
  border-bottom: 1px solid var(--border-subtle);
}

.table tbody tr:hover {
  background: rgba(124, 92, 255, 0.05);
}

/* Badge 深色样式 */
.badge {
  background: var(--soft);
  border: 1px solid var(--border);
  color: var(--text);
}

.badge.good {
  background: rgba(0, 212, 170, 0.15);
  border-color: var(--good);
  color: var(--good);
  box-shadow: 0 0 10px rgba(0, 212, 170, 0.2);
}

.badge.warn {
  background: rgba(255, 179, 71, 0.15);
  border-color: var(--warn);
  color: var(--warn);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.2);
}

.badge.bad {
  background: rgba(255, 107, 157, 0.15);
  border-color: var(--bad);
  color: var(--bad);
  box-shadow: 0 0 10px rgba(255, 107, 157, 0.2);
}

/* Chart 深色样式 */
.chart {
  border: 1px dashed var(--border);
  color: var(--muted);
  background: rgba(124, 92, 255, 0.02);
}

/* Footer 深色样式 */
.footer {
  border-top: 1px solid var(--border-subtle);
  color: var(--muted);
  background: rgba(10, 10, 15, 0.5);
}