@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --primary: #22d3ee;
  --accent: #60a5fa;
  --violet: #8b5cf6;
  
  /* OKLCH Design System variables */
  --ok-bg: oklch(0.12 0.015 250);
  --ok-primary: oklch(0.78 0.16 195);
  --ok-accent: oklch(0.7 0.15 240);
  --ok-violet: oklch(0.65 0.18 290);
  --ok-border: oklch(0.9 0.02 240 / 0.12);
  --ok-glass-bg: oklch(0.14 0.02 245 / 0.75);
  --ok-glass-glow: oklch(0.85 0.03 240 / 0.08);
}

body { 
  font-family: "Inter", system-ui, sans-serif; 
  background: #06070a;
  color: #f1f5f9;
}

.title-font { 
  font-family: "Space Grotesk", sans-serif; 
  letter-spacing: -0.05em;
}

/* ====================== 高级玻璃态 ====================== */
.glass { 
  background: var(--ok-glass-bg);
  border: 1px solid var(--ok-border);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 20px 40px -15px oklch(0 0 0 / 0.7),
              inset 0 1px 0 var(--ok-glass-glow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass:hover {
  border-color: oklch(0.75 0.12 195 / 0.35);
  box-shadow: 0 20px 45px -10px oklch(0.75 0.12 195 / 0.05),
              inset 0 1px 0 oklch(1 1 1 / 0.12);
}

/* ====================== Tab 简洁低调版 ====================== */
.tab { 
  background: oklch(0.2 0.02 250 / 0.6);
  border: 1px solid oklch(0.3 0.03 250 / 0.5);
  color: #94a3b8;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
}

.tab-active { 
  background: linear-gradient(135deg, oklch(0.78 0.16 195 / 0.15) 0%, oklch(0.65 0.18 290 / 0.15) 100%);
  border: 1px solid oklch(0.78 0.16 195);
  color: #22d3ee;
  box-shadow: 0 0 20px oklch(0.78 0.16 195 / 0.25),
              inset 0 1px 0 oklch(1 1 1 / 0.1);
  transform: translateY(-1.5px);
  text-shadow: 0 0 8px oklch(0.78 0.16 195 / 0.5);
}

.tab:hover:not(.tab-active) {
  background: oklch(0.25 0.025 250 / 0.8);
  border-color: oklch(0.5 0.05 250 / 0.4);
  color: #f1f5f9;
}

/* 主面板、跨区、首次信号 Tab 统一尺寸 */
.main-tab, .cross-tab {
  padding: 12px 24px !important;
  font-size: 14.5px;
  min-height: 48px;
}

.first-tab { 
  padding: 10px 12px !important; 
  font-size: 13.8px; 
  min-height: 46px;
}

/* ====================== 左侧首次信号卡片 ====================== */
.first-card { 
  padding: 16px 20px;
  border-radius: 20px;
  border-left: 5px solid;
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.first-card.high { border-left-color: #22d3ee; }
.first-card.mid  { border-left-color: #60a5fa; }
.first-card.low  { border-left-color: #f59e0b; }

.first-card:hover {
  transform: translateX(10px) scale(1.03);
  box-shadow: 0 25px 50px -12px rgb(34 211 238 / 0.25);
}

/* ====================== 表格核心样式 ====================== */
#cross-table, #signal-table {
  width: 100%;
  border-collapse: collapse;
}

#cross-table th, #cross-table td,
#signal-table th, #signal-table td {
  padding: 18px 12px !important;
  text-align: center;
  white-space: nowrap;
  font-size: 14.8px;
}

#cross-table th, #signal-table th {
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.6px;
  padding: 20px 12px !important;
  background: rgba(15, 23, 42, 0.6);
}

#cross-table tbody tr,
#signal-table tbody tr.signal-row {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

#cross-table tbody tr:hover,
#signal-table tbody tr.signal-row:hover {
  background: oklch(0.78 0.16 195 / 0.08) !important;
  transform: scale(1.002) translateY(-1px);
  box-shadow: 0 10px 25px -10px oklch(0 0 0 / 0.3) !important;
}

/* 收藏行（Amber/Gold 柔和渐变磨砂） */
#signal-table tbody tr.signal-row.starred-row {
  background: oklch(0.82 0.13 75 / 0.06) !important;
}

#signal-table tbody tr.signal-row.starred-row td {
  color: oklch(0.85 0.1 75) !important;
}

#signal-table tbody tr.signal-row.starred-row:hover {
  background: oklch(0.82 0.13 75 / 0.1) !important;
  box-shadow: 0 10px 25px -10px oklch(0.82 0.13 75 / 0.15) !important;
}

/* ====================== 跑马灯 ====================== */
.marquee { 
  overflow: hidden; 
  white-space: nowrap; 
  background: linear-gradient(90deg, rgba(15,23,42,0.9), rgba(34,211,238,0.08));
  border: 1px solid rgba(34,211,238,0.2);
  border-radius: 9999px;
}

.marquee-content { 
  display: inline-flex; 
  align-items: center; 
  gap: 3rem; 
  animation: marquee 25s linear infinite; 
}

@keyframes marquee { 
  from { transform: translateX(0); } 
  to { transform: translateX(-50%); } 
}

/* ====================== 自定义滚动条 ====================== */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(#60a5fa, #93c5fd);
  border-radius: 9999px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

.font-mono {
  font-variant-numeric: tabular-nums;
}

/* ====================== 响应式微调 ====================== */
@media (max-width: 1280px) {
  table th, table td {
    font-size: 14px;
    padding: 16px 8px;
  }
}



/* ====================== 热力图柔和视觉 + 小红点 + 高亮动画 ====================== */
#heatmap > div > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#heatmap > div > div:hover {
  box-shadow: 0 0 22px rgba(163, 230, 53, 0.35) !important;
  transform: scale(1.08);
}

#heatmap .absolute.left-0.right-0 {
  background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.15), transparent);
  height: 1.5px;
}

.signal-row {
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ====================== 统一分页样式 ====================== */
.pagination-btn {
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.6);
  color: #cbd5e1;
  min-width: 40px;
}

.pagination-btn:hover:not(.active) {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

.pagination-btn.active {
  background: linear-gradient(90deg, #22d3ee, #60a5fa);
  color: black;
  border-color: #22d3ee;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

/* ====================== 全局搜索框样式 ====================== */
#global-search-input {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 340px;
}

#global-search-input:focus, #global-search-input-mobile:focus {
  border-color: oklch(0.78 0.16 195) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.16 195 / 0.2),
              0 0 20px oklch(0.78 0.16 195 / 0.15) !important;
}

/* ====================== 【移动端专属适配 - 不影响桌面端】 ====================== */
@media (max-width: 768px) {
  
  /* 整体容器更贴边，消除大片留白 */
  .glass {
    border-radius: 20px;
  }

  /* 主内容面板在手机上更紧凑 */
  .glass.rounded-3xl.p-8 {
    padding: 16px;
  }

  .glass.rounded-3xl.p-6 {
    padding: 14px;
  }

  /* Tab 按钮在移动端更紧凑 */
  .main-tab, .cross-tab {
    padding: 9px 16px !important;
    font-size: 13.2px;
    min-height: 42px;
  }

  /* 表格在移动端更紧凑 + 允许横向滚动 */
  #signal-table th,
  #signal-table td {
    padding: 11px 8px !important;
    font-size: 13px;
  }

  /* 搜索框在移动端全宽 */
  #global-search-input-mobile {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 移动端 Tab 横滑区域优化 */
  .overflow-x-auto.custom-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* 支撑阻力面板标题在移动端优化 */
  #panel-4 .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 8px;
  }
}