.index-funding-history-summary {
  position: absolute;
  z-index: 8;
  top: 84px;
  left: 154px;
  width: min(760px, calc(100% - 174px));
  min-height: 58px;
  padding: 8px 11px;
  border: 2px solid rgba(111, 101, 222, .58);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(235, 240, 255, .24));
  box-shadow: 0 8px 22px rgba(31, 47, 84, .1);
  -webkit-backdrop-filter: blur(1px) saturate(108%);
  backdrop-filter: blur(1px) saturate(108%);
  color: #344054;
  font-variant-numeric: tabular-nums;
  isolation: isolate;
  overflow: hidden;
}

@property --funding-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.index-funding-history-summary::before {
  position: absolute;
  z-index: 0;
  inset: -2px;
  padding: 2px;
  border-radius: 11px;
  background: conic-gradient(
    from var(--funding-border-angle),
    transparent 0deg 210deg,
    rgba(86, 71, 222, .18) 225deg,
    #6559ed 252deg,
    #f59e0b 278deg,
    rgba(245, 158, 11, .2) 300deg,
    transparent 324deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fundingBorderTravel 3.2s linear infinite;
  content: '';
  pointer-events: none;
}

.index-funding-history-summary > * { position: relative; z-index: 1; }

@keyframes fundingBorderTravel {
  to { --funding-border-angle: 360deg; }
}

.index-funding-history-summary[hidden] { display: none !important; }
.index-funding-history-summary[data-state="active"] { border-color: rgba(18, 161, 92, .62); }
.index-funding-history-summary[data-state="zero"] { border-color: rgba(111, 101, 222, .58); }
.index-funding-history-summary[data-state="unavailable"] { border-color: rgba(245, 158, 11, .7); }

.index-funding-history-summary > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.index-funding-history-summary > header strong {
  color: #5146d8;
  font-size: 12px;
}

.funding-history-close {
  display: grid;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(102, 112, 133, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: #596579;
  font: 800 18px/1 Arial, sans-serif;
  cursor: pointer;
}

.funding-history-close:hover {
  border-color: #6559ed;
  background: #fff;
  color: #5146d8;
}

.funding-history-close:focus-visible {
  outline: 3px solid rgba(91, 85, 231, .25);
  outline-offset: 2px;
}

.funding-history-state {
  padding: 2px 7px;
  border-radius: 99px;
  color: #475467;
  background: rgba(234, 236, 244, .76);
  font-size: 10px;
  font-weight: 750;
}

.index-funding-history-summary[data-state="active"] .funding-history-state {
  color: #067647;
  background: rgba(220, 250, 230, .76);
}

.funding-history-summary {
  margin: 4px 0 7px;
  color: #344054;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.funding-run-extremes {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  vertical-align: middle;
}

.funding-run-extreme {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.funding-run-extreme b {
  font: 800 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.funding-run-high {
  border-color: rgba(240, 68, 56, .32);
  color: #b54708;
  background: rgba(255, 238, 235, .88);
}
.funding-run-high b { color: #e62e3a; }

.funding-run-low {
  border-color: rgba(21, 112, 239, .28);
  color: #175cd3;
  background: rgba(239, 248, 255, .9);
}
.funding-run-low b { color: #0876d1; }

.funding-history-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.funding-history-event {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(208, 213, 221, .72);
  border-radius: 7px;
  background: rgba(255, 255, 255, .48);
}

.funding-event-label {
  display: block;
  margin-bottom: 5px;
  color: #6941c6;
  font-size: 10px;
}

.funding-event-price-note {
  display: inline;
  margin-left: 7px;
  color: #b54708;
  font-size: 8px;
  font-weight: 650;
}

.funding-history-event:last-child .funding-event-label { color: #667085; }

.funding-event-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.funding-event-facts span,
.funding-event-facts small,
.funding-event-facts b { display: block; }
.funding-event-facts small { color: #98a2b3; font-size: 9px; }
.funding-event-facts b {
  margin-top: 2px;
  overflow: hidden;
  color: #344054;
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funding-history-empty { color: #667085; font-size: 10px; }
.index-funding-history-summary > footer {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 9px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .index-funding-history-summary {
    top: 144px;
    left: 120px;
    width: calc(100% - 134px);
  }
  .funding-event-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funding-run-extremes { margin-left: 5px; }
}

@media (max-width: 560px) {
  .index-funding-history-summary {
    top: 143px;
    left: 102px;
    width: calc(100% - 111px);
    max-height: 162px;
    overflow: auto;
    padding: 7px 8px;
  }
  .funding-history-events { grid-template-columns: 1fr; }
  .funding-history-summary { font-size: 10px; }
  .funding-run-extremes { display: flex; margin: 5px 0 0; }
  .funding-event-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .index-funding-history-summary > footer { display: none; }
}

/* 指数行情四指标：未选中也保留清晰分区，选中态使用各自主题色。 */
.index-page .index-chart-card .metric-tabs {
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(174, 190, 217, .78);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(233, 238, 250, .86), rgba(247, 249, 253, .9));
  box-shadow: 0 7px 20px rgba(32, 51, 88, .1);
  overflow: visible;
}

.index-page .index-chart-card .metric-tabs > button {
  position: relative;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 2px 7px rgba(31, 46, 78, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
}

.index-page .index-chart-card .metric-tabs > button:nth-child(1) {
  border-color: rgba(86, 100, 224, .28);
  background: linear-gradient(135deg, #f0f1ff, #e5e9ff);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(2) {
  border-color: rgba(139, 92, 246, .25);
  background: linear-gradient(135deg, #f6f0ff, #eee6ff);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(3) {
  border-color: rgba(14, 165, 164, .25);
  background: linear-gradient(135deg, #eafbf8, #dff6f2);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(4) {
  border-color: rgba(217, 119, 6, .34);
  background: linear-gradient(135deg, #fff8dd, #ffefbd);
}

.index-page .index-chart-card .metric-tabs > button:nth-child(1) > i,
.index-page .index-chart-card .metric-tabs > button:nth-child(1) strong { color: #5146d8; }
.index-page .index-chart-card .metric-tabs > button:nth-child(2) > i,
.index-page .index-chart-card .metric-tabs > button:nth-child(2) strong { color: #7c3aed; }
.index-page .index-chart-card .metric-tabs > button:nth-child(3) > i,
.index-page .index-chart-card .metric-tabs > button:nth-child(3) strong { color: #087f7d; }
.index-page .index-chart-card .metric-tabs > button:nth-child(4) > i,
.index-page .index-chart-card .metric-tabs > button:nth-child(4) strong { color: #b45309; }
.index-page .index-chart-card .metric-tabs > button small { color: #667085; }

.index-page .index-chart-card .metric-tabs > button:hover {
  z-index: 2;
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72), 0 7px 15px rgba(31, 46, 78, .14);
}

.index-page .index-chart-card .metric-tabs > button:nth-child(1).active {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #6458ef, #466ee8);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .3), inset 0 -3px rgba(29, 22, 125, .24);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(2).active {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #7c3aed, #a34ee8);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .28), inset 0 -3px rgba(67, 22, 121, .22);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(3).active {
  border-color: #078b87;
  background: linear-gradient(135deg, #07958f, #12aaa1);
  box-shadow: 0 8px 20px rgba(7, 149, 143, .27), inset 0 -3px rgba(4, 79, 76, .22);
}
.index-page .index-chart-card .metric-tabs > button:nth-child(4).active {
  border-color: #d97706;
  background: linear-gradient(135deg, #e78a05, #f5ad19);
  box-shadow: 0 8px 22px rgba(217, 119, 6, .34), inset 0 -3px rgba(126, 65, 3, .22);
}

.index-page .index-chart-card .metric-tabs > button.active > i,
.index-page .index-chart-card .metric-tabs > button.active strong { color: #fff; }
.index-page .index-chart-card .metric-tabs > button.active small { color: rgba(255, 255, 255, .84); }

@media (prefers-reduced-motion: reduce) {
  .index-funding-history-summary::before { animation: none; }
  .index-page .index-chart-card .metric-tabs > button { transition: none; }
}

@media (max-width: 560px) {
  .index-page .index-chart-card .metric-tabs { gap: 3px; padding: 4px; }
  .index-page .index-chart-card .metric-tabs > button { border-radius: 7px; }
}