/* ============ 共振选股页 ============ */
:root {
  --resonance-grid-bg: linear-gradient(135deg, #eef2f7, #f8fafc);
  --resonance-card-bg: rgba(255, 255, 255, .86);
  --resonance-card-border: rgba(31, 41, 55, .12);
  --resonance-card-hover: rgba(255, 255, 255, .98);
  --resonance-card-hover-border: rgba(43, 108, 255, .22);
  --resonance-card-text: var(--text, #303846);
}

html[data-theme='dark'] {
  --resonance-grid-bg: linear-gradient(135deg, #1a1f2e, #252b3d);
  --resonance-card-bg: rgba(255, 255, 255, .05);
  --resonance-card-border: rgba(255, 255, 255, .08);
  --resonance-card-hover: rgba(255, 255, 255, .1);
  --resonance-card-hover-border: rgba(255, 255, 255, .18);
  --resonance-card-text: #c8cdd8;
}

.resonance-page {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 16px 0 40px;
}
.resonance-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 0 4px;
}
.resonance-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--brand);
  margin: 0;
  letter-spacing: .5px;
}
/* 量化排名日期导航：复用共振页 .date-nav 的胶囊样式，保持视觉一致 */
.ranking-controls .date-nav {
  background: var(--surface);
  border-radius: 12px;
  padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.ranking-controls .date-nav .field__input {
  background: var(--bg);
  color: var(--text);
}

/* 4x3 卡片网格 */
.resonance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--resonance-grid-bg);
  border-radius: 14px;
  padding: 20px 16px;
}
@media (max-width: 520px) {
  .resonance-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 10px; }
}

/* 单张因子卡片 */
.resonance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 90px;
  border-radius: 12px;
  border: 2px solid var(--resonance-card-border);
  background: var(--resonance-card-bg);
  color: var(--resonance-card-text);
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.resonance-card:hover {
  background: var(--resonance-card-hover);
  border-color: var(--resonance-card-hover-border);
}
.resonance-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, var(--factor-glow, rgba(86, 151, 255, .13)), transparent 58%);
  pointer-events: none;
}
.resonance-card--wind { --factor-color: #59c7ff; --factor-glow: rgba(89,199,255,.2); }
.resonance-card--star { --factor-color: #ffc857; --factor-glow: rgba(255,200,87,.2); }
.resonance-card--bolt { --factor-color: #ffca5c; --factor-glow: rgba(255,202,92,.2); }
.resonance-card--target { --factor-color: #ff6d8d; --factor-glow: rgba(255,109,141,.18); }
.resonance-card--flame { --factor-color: #ff784f; --factor-glow: rgba(255,120,79,.2); }
.resonance-card--layers { --factor-color: #a995ff; --factor-glow: rgba(169,149,255,.2); }
.resonance-card--bars { --factor-color: #49d6a3; --factor-glow: rgba(73,214,163,.2); }
.resonance-card--book { --factor-color: #7db5ff; --factor-glow: rgba(125,181,255,.2); }
.resonance-card--trend { --factor-color: #51d2c2; --factor-glow: rgba(81,210,194,.2); }
.resonance-card--radar { --factor-color: #c28cff; --factor-glow: rgba(194,140,255,.2); }
.resonance-card--core { --factor-color: #ff9f68; --factor-glow: rgba(255,159,104,.2); }
.resonance-card--wave { --factor-color: #6ee0e8; --factor-glow: rgba(110,224,232,.2); }
.resonance-card.is-selected {
  background: linear-gradient(135deg, #2b6cff, #1a4ed8);
  border-color: #5a9bff;
  color: #fff;
  box-shadow: 0 4px 16px rgba(43,108,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-1px);
}
.resonance-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--factor-color, #8eb7ff);
  background: color-mix(in srgb, var(--factor-color, #8eb7ff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--factor-color, #8eb7ff) 42%, transparent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--factor-color, #8eb7ff) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .18s ease, color .18s ease, background .18s ease;
}
.resonance-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resonance-card:hover .resonance-card__icon { transform: translateY(-2px) rotate(-3deg); }
.resonance-card.is-selected .resonance-card__icon { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.resonance-card.is-selected .resonance-card__icon svg { filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.resonance-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-width: 24px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 7px;
  border-radius: 0 10px 0 10px;
  background: var(--up);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.resonance-card.is-selected .resonance-card__badge {
  background: #ffd700;
  color: #333;
}
.resonance-card__name {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 4px;
}

/* 免责声明 */
.resonance-disclaimer {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-weak);
  margin: 16px 0 20px;
  line-height: 1.5;
}

/* 底部操作栏：左侧共振数量 + 右侧按钮（参照原站布局） */
.resonance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px;
}

/* 共振股票数量（独立文字提示） */
.resonance-count {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.resonance-count__num {
  color: #f5a623;
  font-weight: 800;
  font-size: 18px;
  margin: 0 2px;
}
/* 共振估算股票数量（高亮显示） */
.resonance-count__stock {
  color: #e74c3c;
  font-weight: 800;
  font-size: 20px;
  margin: 0 3px;
}
.resonance-count__pending {
  color: var(--text-weak);
  font-size: 12px;
  font-weight: 400;
}

/* 立即查看按钮 */
.resonance-view-btn {
  display: inline-block;   /* 改为 inline-block，不再独占整行 */
  width: auto;
  min-width: 140px;
  padding: 0 32px;
  margin: 0;              /* 去掉居中 margin */
  height: 48px;
  border-radius: 24px;
  border: none;
  background: linear-gradient(135deg, #2b6cff, #1a4ed8);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(43,108,255,.35);
  transition: all .18s;
  flex-shrink: 0;
}
.resonance-view-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(43,108,255,.45);
}
.resonance-view-btn:disabled {
  background: var(--surface-2);
  box-shadow: none;
  color: var(--text-weak);
  cursor: not-allowed;
}
/* 加载中态：降低透明度 + 禁止悬浮效果 */
.resonance-view-btn.is-loading {
  opacity: .75;
  cursor: wait;
  background: linear-gradient(135deg, #1a5ae8, #154bc4);
  animation: resonance-pulse 1s ease-in-out infinite;
}
@keyframes resonance-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(43,108,255,.35); }
  50% { box-shadow: 0 4px 24px rgba(43,108,255,.55); }
}