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

:root {
  --xm-bg: #ffffff;
  --xm-dot: rgba(148, 163, 184, 0.34);
  --xm-panel: rgba(255, 255, 255, 0.96);
  --xm-panel-soft: rgba(248, 250, 252, 0.88);
  --xm-line: #d9e4f1;
  --xm-line-strong: #c7d5e8;
  --xm-text: #0f172a;
  --xm-sub: #64748b;
  --xm-blue: #0052ff;
  --xm-blue-soft: rgba(0, 82, 255, 0.08);
  --xm-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  --xm-shadow-hover: 0 16px 38px rgba(15, 23, 42, 0.1);
  --xm-radius-lg: 18px;
  --xm-radius: 14px;
  --xm-radius-sm: 10px;
  --xm-font-heading: "Hanken Grotesk", "Inter", "Microsoft YaHei", sans-serif;
  --xm-font-body: "Inter", "Microsoft YaHei", "PingFang SC", sans-serif;
  --xm-font-label: "JetBrains Mono", "Microsoft YaHei", monospace;
}

body.xm-unified-theme {
  position: relative;
  background-color: var(--xm-bg) !important;
  background-image: radial-gradient(circle at 1px 1px, var(--xm-dot) 1.15px, transparent 1.2px) !important;
  background-size: 20px 20px !important;
  color: var(--xm-text) !important;
  font-family: var(--xm-font-body) !important;
}

body.xm-unified-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(0, 82, 255, 0.055), transparent 18%),
    radial-gradient(circle at 82% 12%, rgba(115, 27, 229, 0.045), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.94) 36%, rgba(255, 255, 255, 0.98) 100%);
  pointer-events: none;
  z-index: 0;
}

body.xm-unified-theme > * {
  position: relative;
  z-index: 1;
}

body.xm-unified-theme .wrap,
body.xm-unified-theme .page {
  max-width: 1680px !important;
  margin: 0 auto !important;
  padding: 22px 22px 30px !important;
}

body.xm-unified-theme,
body.xm-unified-theme p,
body.xm-unified-theme td,
body.xm-unified-theme .selection,
body.xm-unified-theme .sub,
body.xm-unified-theme .hint,
body.xm-unified-theme .meta,
body.xm-unified-theme .status,
body.xm-unified-theme .footer-note,
body.xm-unified-theme .foot {
  color: var(--xm-sub) !important;
}

body.xm-unified-theme h1,
body.xm-unified-theme h2,
body.xm-unified-theme h3 {
  color: var(--xm-text) !important;
}

body.xm-unified-theme .hero {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}

body.xm-unified-theme .hero h1,
body.xm-unified-theme .hero .panel h2,
body.xm-unified-theme .hero .panel h3 {
  font-family: var(--xm-font-heading) !important;
  letter-spacing: -0.03em !important;
}

body.xm-unified-theme .hero h1 {
  margin: 0 !important;
  font-size: clamp(32px, 3.4vw, 52px) !important;
  line-height: 1.04 !important;
}

body.xm-unified-theme .hero p,
body.xm-unified-theme .hero .meta,
body.xm-unified-theme .eyebrow,
body.xm-unified-theme .k-label,
body.xm-unified-theme .k-desc,
body.xm-unified-theme .hint,
body.xm-unified-theme th,
body.xm-unified-theme label,
body.xm-unified-theme .toolbar,
body.xm-unified-theme .tab,
body.xm-unified-theme .tab-btn,
body.xm-unified-theme .btn,
body.xm-unified-theme .chip,
body.xm-unified-theme .pill,
body.xm-unified-theme .matrix-tab,
body.xm-unified-theme .filter-item label,
body.xm-unified-theme .selection,
body.xm-unified-theme .status,
body.xm-unified-theme .footer-note,
body.xm-unified-theme .foot,
body.xm-unified-theme .k-title,
body.xm-unified-theme .k-badge {
  font-family: var(--xm-font-label) !important;
}

body.xm-unified-theme .eyebrow {
  color: var(--xm-sub) !important;
  letter-spacing: 0.12em !important;
}

body.xm-unified-theme .bilingual-title,
body.xm-unified-theme .title-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

body.xm-unified-theme .bilingual-title {
  gap: 8px !important;
  line-height: 1.04 !important;
}

body.xm-unified-theme .bilingual-title .en-label,
body.xm-unified-theme .title-stack .title-en {
  order: 1;
  display: block;
  color: var(--xm-text) !important;
  font-family: var(--xm-font-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

body.xm-unified-theme .bilingual-title .en-label {
  font-size: 1em !important;
}

body.xm-unified-theme .bilingual-title .cn-label,
body.xm-unified-theme .title-stack .title-cn {
  order: 2;
  display: block;
  color: var(--xm-sub) !important;
  font-family: var(--xm-font-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

body.xm-unified-theme .bilingual-title .cn-label {
  font-size: 15px !important;
}

body.xm-unified-theme .title-stack {
  gap: 5px !important;
  line-height: 1.08 !important;
}

body.xm-unified-theme .title-stack .title-en {
  font-size: 1em !important;
}

body.xm-unified-theme .title-stack .title-cn {
  font-size: 11px !important;
}

body.xm-unified-theme .section {
  margin-top: 18px !important;
}

body.xm-unified-theme .section-title {
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  color: var(--xm-text) !important;
  font-family: var(--xm-font-label) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: 0.02em !important;
}

body.xm-unified-theme .section-title::before {
  content: "" !important;
  width: 4px !important;
  min-width: 4px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: var(--xm-blue) !important;
  margin-top: 2px !important;
}

body.xm-unified-theme .card,
body.xm-unified-theme .panel,
body.xm-unified-theme .insight-card,
body.xm-unified-theme .summary-card,
body.xm-unified-theme .download-card,
body.xm-unified-theme .modal-card,
body.xm-unified-theme .filter-bar,
body.xm-unified-theme .main-conclusion,
body.xm-unified-theme .lead > .panel,
body.xm-unified-theme .table-wrap,
body.xm-unified-theme .problem-box,
body.xm-unified-theme .problem-label,
body.xm-unified-theme .quadrant-note,
body.xm-unified-theme .selection {
  background: var(--xm-panel);
  border: 1px solid var(--xm-line) !important;
  border-radius: var(--xm-radius-lg) !important;
  box-shadow: var(--xm-shadow) !important;
  backdrop-filter: blur(8px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease;
}

body.xm-unified-theme .card:hover,
body.xm-unified-theme .download-card:hover,
body.xm-unified-theme .summary-card:hover,
body.xm-unified-theme .problem-box:hover,
body.xm-unified-theme .table-wrap:hover {
  transform: translateY(-3px);
  border-color: var(--xm-line-strong) !important;
  box-shadow: var(--xm-shadow-hover) !important;
}

body.xm-unified-theme .kpi .card,
body.xm-unified-theme .metric,
body.xm-unified-theme .ev,
body.xm-unified-theme .signal-item,
body.xm-unified-theme .rep-chip,
body.xm-unified-theme .tag,
body.xm-unified-theme .pill,
body.xm-unified-theme .chip,
body.xm-unified-theme .selection,
body.xm-unified-theme .action {
  border-radius: var(--xm-radius) !important;
}

body.xm-unified-theme .kpi,
body.xm-unified-theme .grid-2,
body.xm-unified-theme .grid-3,
body.xm-unified-theme .cards,
body.xm-unified-theme .cards2,
body.xm-unified-theme .cards3,
body.xm-unified-theme .actions,
body.xm-unified-theme .matrix-top-row,
body.xm-unified-theme .matrix-bottom-row,
body.xm-unified-theme .recruit-three,
body.xm-unified-theme .region-contribution-grid,
body.xm-unified-theme .recruit-source-layout {
  gap: 14px !important;
}

body.xm-unified-theme .kpi .card,
body.xm-unified-theme .panel,
body.xm-unified-theme .download-card,
body.xm-unified-theme .filter-bar {
  padding: 18px 20px !important;
}

body.xm-unified-theme .k-value,
body.xm-unified-theme .metric-value,
body.xm-unified-theme .signal-item .num,
body.xm-unified-theme .ev .v {
  color: var(--xm-text) !important;
  letter-spacing: -0.02em !important;
}

body.xm-unified-theme .k-title,
body.xm-unified-theme .card-head h2,
body.xm-unified-theme .panel h2,
body.xm-unified-theme .panel h3 {
  color: var(--xm-text) !important;
}

body.xm-unified-theme .tabs,
body.xm-unified-theme .tabbar,
body.xm-unified-theme .matrix-tabs {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid var(--xm-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.xm-unified-theme .tab,
body.xm-unified-theme .tab-btn,
body.xm-unified-theme .matrix-tab,
body.xm-unified-theme .btn,
body.xm-unified-theme button,
body.xm-unified-theme select,
body.xm-unified-theme input,
body.xm-unified-theme .controls a,
body.xm-unified-theme .download-btn {
  border-radius: 12px !important;
  border: 1px solid var(--xm-line) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--xm-text) !important;
  box-shadow: none !important;
}

body.xm-unified-theme .tab.active,
body.xm-unified-theme .tab-btn.active,
body.xm-unified-theme .matrix-tab.active,
body.xm-unified-theme button.primary,
body.xm-unified-theme .btn.primary,
body.xm-unified-theme .download-btn {
  background: var(--xm-blue) !important;
  border-color: var(--xm-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0, 82, 255, 0.18) !important;
}

body.xm-unified-theme .download-btn:hover,
body.xm-unified-theme .btn.primary:hover,
body.xm-unified-theme button.primary:hover {
  transform: translateY(-2px);
}

body.xm-unified-theme .card-icon,
body.xm-unified-theme .k-icon,
body.xm-unified-theme .region-rank {
  background: var(--xm-blue-soft) !important;
  color: var(--xm-blue) !important;
}

body.xm-unified-theme table {
  width: 100%;
  border-collapse: collapse;
  color: var(--xm-text) !important;
}

body.xm-unified-theme th {
  background: rgba(248, 250, 252, 0.92) !important;
  color: var(--xm-sub) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--xm-line) !important;
}

body.xm-unified-theme td {
  color: var(--xm-text) !important;
  border-bottom: 1px solid rgba(217, 228, 241, 0.9) !important;
}

body.xm-unified-theme tbody tr:hover {
  background: rgba(0, 82, 255, 0.035) !important;
}

body.xm-unified-theme .insight-card,
body.xm-unified-theme .signal-item,
body.xm-unified-theme .selection,
body.xm-unified-theme .problem-box,
body.xm-unified-theme .quadrant-note,
body.xm-unified-theme .action {
  background: var(--xm-panel-soft) !important;
}

body.xm-unified-theme .foot,
body.xm-unified-theme .hint,
body.xm-unified-theme .meta,
body.xm-unified-theme .sub,
body.xm-unified-theme .region-note {
  font-size: 12px !important;
  line-height: 1.7 !important;
}

@media (max-width: 1180px) {
  body.xm-unified-theme .wrap,
  body.xm-unified-theme .page {
    padding: 18px 16px 24px !important;
  }

  body.xm-unified-theme .section-title {
    font-size: 24px !important;
  }

  body.xm-unified-theme .section-title::before {
    height: 34px !important;
  }
}
