/* Cycle dashboard aligned with the clean, data-first one-glance workspace. */
body.cycle-page,
body.cycle-page > .layout,
body.cycle-page .main-area,
body.cycle-page .main-area > .content {
  background: #fff !important;
  background-image: none !important;
}

body.cycle-page .main-area > .content {
  width: min(1480px, calc(100% - 40px)) !important;
  margin-inline: auto;
}

body.cycle-page .cycle-wrap {
  position: relative;
  padding: 0 4px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.cycle-page .cycle-hover-line {
  display: none;
  position: absolute;
  z-index: 30;
  width: 0;
  border-left: 1px dashed rgba(71, 85, 105, .72);
  pointer-events: none;
}

body.cycle-page .cycle-hover-line.show { display: block; }

body.cycle-page .cycle-hover-card {
  display: none;
  position: fixed;
  z-index: 1200;
  width: min(620px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 24px));
  overflow: auto;
  padding: 8px;
  border: 1px solid #d9e3ef;
  border-radius: 12px;
  background: rgba(246, 249, 253, .985);
  box-shadow: 0 22px 60px rgba(15, 35, 58, .22), 0 2px 8px rgba(15, 35, 58, .08);
  color: #536171;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

body.cycle-page .cycle-hover-card.show { display: block; }

body.cycle-page .hover-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 6px;
}

body.cycle-page .hover-card-date {
  color: #1e2f45;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}

body.cycle-page .hover-card-date small { font-size: 12px; font-weight: 700; }

body.cycle-page .hover-card-caption {
  margin-top: 2px;
  color: #8a9aad;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

body.cycle-page .hover-index-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
  background: #fff;
}

body.cycle-page .hover-index-pill span { color: #7a8ca1; font-size: 9px; font-weight: 700; }
body.cycle-page .hover-index-pill strong { font-size: 13px; }

body.cycle-page .hover-section {
  --tone: #64748b;
  --soft: #f8fafc;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #e1e9f2;
  border-left: 3px solid var(--tone);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 55, 85, .04);
}

body.cycle-page .hover-section + .hover-section { margin-top: 4px; }
body.cycle-page .hover-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  margin-top: 4px;
}
body.cycle-page .hover-section-grid .hover-section { margin: 0; }
body.cycle-page .hover-section-span { grid-column: 1 / -1; }

body.cycle-page .tone-blue { --tone:#2563eb; --soft:#eff6ff; }
body.cycle-page .tone-red { --tone:#e5484d; --soft:#fff1f2; }
body.cycle-page .tone-violet { --tone:#7c3aed; --soft:#f5f3ff; }
body.cycle-page .tone-cyan { --tone:#0891b2; --soft:#ecfeff; }
body.cycle-page .tone-amber { --tone:#d97706; --soft:#fff7ed; }
body.cycle-page .tone-green { --tone:#059669; --soft:#ecfdf5; }
body.cycle-page .tone-money { --tone:#ca8a04; --soft:#fefce8; }

body.cycle-page .hover-section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  color: #26384d;
  font-size: 11px;
  font-weight: 850;
}

body.cycle-page .hover-section-title i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 4px var(--soft);
}

body.cycle-page .hover-section-title small {
  margin-left: auto;
  color: #93a1b2;
  font-size: 9px;
  font-weight: 650;
}

body.cycle-page .hover-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

body.cycle-page .hover-metrics.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.cycle-page .hover-metric {
  min-width: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--soft);
}
body.cycle-page .hover-metric > span {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: #7c8da1;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.cycle-page .hover-metric > strong {
  display: block;
  overflow: hidden;
  color: #25364a;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.cycle-page .leader-list { display: flex; flex-wrap: wrap; gap: 3px; }
body.cycle-page .leader-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid #fee2e2;
  border-radius: 7px;
  background: var(--soft);
  white-space: nowrap;
}
body.cycle-page .leader-name { color: #36485d; font-weight: 750; }
body.cycle-page .leader-chip b { color: #e5484d; font-size: 12px; }
body.cycle-page .leader-chip em { font-style: normal; }
body.cycle-page .hover-focus-value {
  overflow: hidden;
  color: #34465b;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.cycle-page .hover-focus-value b {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--tone);
  font-size: 10px;
}
body.cycle-page .hover-focus-value + .hover-metrics { margin-top: 5px; }
body.cycle-page .cycle-hover-card .up { color: #ef4444; }
body.cycle-page .cycle-hover-card .down { color: #12a150; }
body.cycle-page .cycle-hover-card .muted { color: #9aa7b5; }

@media (max-width: 640px) {
  body.cycle-page .cycle-hover-card { padding: 10px; }
  body.cycle-page .hover-section-grid { grid-template-columns: 1fr; }
  body.cycle-page .hover-section-span { grid-column: auto; }
  body.cycle-page .hover-metrics.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.cycle-page .cycle-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0 24px;
  border-bottom: 1px solid #dbe5f0;
}

body.cycle-page .board-page-kicker {
  display: block;
  margin-bottom: 7px;
  color: #2b66f6;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .15em;
}

body.cycle-page .cycle-title {
  margin: 0 !important;
  color: #0b1f38 !important;
  font-size: clamp(28px, 2.1vw, 34px) !important;
  font-weight: 820 !important;
  letter-spacing: -.04em !important;
  line-height: 1.18 !important;
}

body.cycle-page .cycle-title::before { display: none !important; }

body.cycle-page .board-page-copy p {
  max-width: 680px;
  margin: 8px 0 0;
  color: #5f7287;
  font-size: 14px;
  line-height: 1.7;
}

body.cycle-page .control-row {
  gap: 12px !important;
  margin: 18px 0 16px !important;
  padding: 14px 16px !important;
  border: 1px solid #e0e8f1 !important;
  border-radius: 12px;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(25, 55, 90, .055) !important;
}

body.cycle-page .control-row .field {
  color: #536a82 !important;
  font-weight: 650;
}

/* 排除 checkbox：「缩放开关」那个 34×18 的自绘胶囊也是 input，
   被这条拉成 34×40 后成了一个白色竖块，看不出是开关。 */
body.cycle-page .control-row :is(input:not([type="checkbox"]), select, .btn, .range-btn) {
  height: 40px !important;
  border-radius: 9px !important;
}

body.cycle-page .control-row :is(input, select, .range-btn) {
  border-color: #d7e2ed !important;
  color: #102a43 !important;
  background: #f8fafc !important;
}

body.cycle-page .control-row :is(input, select, .range-btn):focus-visible,
body.cycle-page .control-row .btn:focus-visible {
  outline: 3px solid rgba(43, 102, 246, .18);
  outline-offset: 2px;
}

body.cycle-page .control-row .btn {
  background: #2367c9 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body.cycle-page .control-row .btn.secondary {
  color: #2b5c96 !important;
  border: 1px solid #cdddef !important;
  background: #edf4ff !important;
}

body.cycle-page .control-row .btn:hover {
  box-shadow: 0 8px 18px rgba(35, 103, 201, .18) !important;
  transform: translateY(-1px);
}

body.cycle-page .control-row .btn:active,
body.cycle-page .range-btn:active { transform: translateY(1px); }

body.cycle-page .range-btn.active {
  border-color: #a9c5ec !important;
  color: #2367c9 !important;
  background: #edf4ff !important;
}

body.cycle-page .main-chart-panel,
body.cycle-page .chart-card,
body.cycle-page .trend-rank {
  border: 1px solid #e0e8f1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(25, 55, 90, .055) !important;
}

body.cycle-page :is(.main-chart-panel, .chart-card) {
  color: #283e55 !important;
  background: #fff !important;
}

body.cycle-page .main-chart-panel { padding: 18px 20px 2px; }

body.cycle-page .cycle-wrap #mainChart {
  height: 330px !important;
  min-height: 0 !important;
}

body.cycle-page .chart-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}

body.cycle-page .chart-panel-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.cycle-page .section-index {
  display: grid;
  width: 30px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  color: #2b66f6;
  background: #edf4ff;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

body.cycle-page .chart-title {
  margin: 0;
  color: #102a43;
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -.01em;
}

body.cycle-page .legend-line {
  height: auto;
  color: #71849a;
}

body.cycle-page .legend-dot {
  width: 15px;
  height: 3px;
  border-radius: 3px;
  background: #e8202a;
}

body.cycle-page .chart-stack {
  gap: 12px;
  margin-top: 12px;
}

/* 连板龙头周期比其他模块高得多：40+ 条龙头线的名称靠 labelLayout 的 shiftY
   上移错开，340px 里挪不开——大量 4~5 板龙头的终点都落在 46%~61% 这一小段上，
   纵向没空间就只能继续压盖（早先靠 hideOverlap 把它们抹掉，等于图白画）。 */
body.cycle-page #leaderCycleChart { height: 560px; }

body.cycle-page .chart-card { padding: 18px 20px 14px; }
body.cycle-page .module-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 8px;
}

body.cycle-page .module-copy { min-width: 0; }
body.cycle-page .module-title {
  color: #102a43;
  font-size: 16px;
  font-weight: 780;
  line-height: 26px;
  text-align: left;
}
body.cycle-page .module-sub {
  margin-top: 3px;
  color: #71849a !important;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}
body.cycle-page .trend-grid { gap: 16px; }

body.cycle-page .latest-card {
  margin: 12px 0 6px;
  border-color: #e3eaf2 !important;
  border-radius: 9px;
  color: #3f5871 !important;
  background: #f4f7fb !important;
}

body.cycle-page .latest-card b { color: #102a43 !important; }

body.cycle-page .trend-rank {
  padding: 14px;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body.cycle-page .rank-title,
body.cycle-page .rank-name,
body.cycle-page .relay-name { color: #102a43 !important; }
body.cycle-page .rank-meta,
body.cycle-page .relay-meta { color: #536a82 !important; }
body.cycle-page .rank-item { border-bottom-color: #e3eaf2 !important; }
body.cycle-page .rank-no {
  border: 1px solid #d3e0f6;
  color: #2b66f6 !important;
  background: #edf4ff !important;
}
body.cycle-page .rank-score { color: #e8202a; font-variant-numeric: tabular-nums; }

body.cycle-page .relay-track {
  border: 1px solid #e3eaf2;
  background: #f8fafc !important;
}

body.cycle-page .relay-bar {
  background: linear-gradient(90deg, #76a7e8, #2b66f6) !important;
}

body.cycle-page .switch { color: #536a82 !important; font-weight: 650; }
body.cycle-page .switch input { background: #cbd8e6 !important; }
body.cycle-page .switch input::after { background: #fff !important; }
body.cycle-page .switch input:checked { background: #2b66f6 !important; }

body.cycle-page .data-note {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid #e2e9f1;
  color: #8495a8 !important;
}

body.cycle-page .loading:has(> span) {
  gap: 8px;
  color: transparent;
}

body.cycle-page .loading span {
  display: block;
  width: 24%;
  height: 170px;
  border-radius: 10px;
  background: linear-gradient(90deg, #edf2f7 25%, #f8fafc 50%, #edf2f7 75%);
  background-size: 200% 100%;
  animation: cycle-shimmer 1.3s linear infinite;
}

body.cycle-page .loading span:nth-child(2) { height: 250px; }
body.cycle-page .loading span:nth-child(3) { height: 210px; }

@keyframes cycle-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  body.cycle-page .loading span { animation: none; }
  body.cycle-page .control-row .btn { transition: none; }
}

@media (max-width: 880px) {
  body.cycle-page .main-area > .content { width: calc(100% - 24px) !important; }
  body.cycle-page .cycle-head { align-items: flex-start; }
}

@media (max-width: 560px) {
  body.cycle-page .cycle-wrap #mainChart { height: 300px !important; }
  body.cycle-page .cycle-wrap { padding-inline: 0 !important; }
  body.cycle-page .cycle-head { display: block; padding-top: 8px; }
  body.cycle-page .control-row { padding: 12px !important; }
  body.cycle-page .control-row .field { width: 100%; justify-content: space-between; }
  body.cycle-page .control-row .field :is(input, select) { flex: 1; min-width: 0 !important; }
  body.cycle-page .quick-range { width: 100%; }
  body.cycle-page .range-btn { flex: 1; }
  body.cycle-page .main-chart-panel,
  body.cycle-page .chart-card { padding-inline: 12px; }
  body.cycle-page .chart-panel-head { align-items: flex-start; }
  body.cycle-page #leaderCycleChart { height: 460px; }
}