/* 大盘云图 · 浅色低饱和热力版 */
.mc-page { display: flex; flex-direction: column; gap: 9px; height: auto; min-height: 0; color: #1f2329; }
.mc-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 2px 2px 4px; }
.mc-eyebrow { font-size: 10px; letter-spacing: 1.4px; color: #1677ff; font-weight: 600; }
.mc-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mc-title-row h1 { margin: 2px 0 0; font-size: 22px; line-height: 1.2; color: #1f2329; }
.mc-sub { color: #8a8f98; font-size: 11.5px; white-space: nowrap; }
.mc-actions { display: flex; gap: 8px; }
.mc-btn { height: 30px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #374151; font-size: 12px; cursor: pointer; }
.mc-btn:hover { border-color: #a8ccff; color: #1677ff; }
.mc-layout { display: flex; gap: 10px; flex: 0 0 auto; height: auto; min-height: 0; align-items: stretch; }
.mc-side { width: 188px; flex: 0 0 188px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: auto; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.03); }
.mc-side-head { font-size: 13px; font-weight: 700; color: #1f2329; padding-bottom: 7px; border-bottom: 1px solid #f1f2f4; }
.mc-scope-list { display: flex; flex-direction: column; gap: 2px; }
.mc-scope { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: #374151; font-size: 12.5px; text-align: left; cursor: pointer; }
.mc-scope:hover { background: #f8fafc; color: #1677ff; }
.mc-scope.on { background: #eff6ff; color: #1677ff; font-weight: 600; }
.mc-scope small { font-size: 9px; color: #9ca3af; background: #f1f5f9; border-radius: 3px; padding: 1px 3px; }
.mc-field { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; border-top: 1px solid #f1f2f4; }
.mc-field label { font-size: 11px; color: #8a8f98; }
.mc-field select { height: 30px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #1f2329; font-size: 12px; padding: 0 7px; outline: none; }
.mc-field select:focus { border-color: #a8ccff; }
.mc-stat { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; color: #6b7280; }
.mc-stat b { font-size: 17px; color: #1f2329; font-variant-numeric: tabular-nums; }
.mc-stat b.up, .mc-sector-item b.up { color: #c24141; }
.mc-stat b.down, .mc-sector-item b.down { color: #3f7f58; }
.mc-tips { padding-top: 8px; border-top: 1px solid #f1f2f4; color: #8a8f98; font-size: 10.5px; line-height: 1.8; }
.mc-tips b { display: block; color: #6b7280; font-size: 11px; margin-bottom: 2px; }
.mc-tips p { margin: 0; }
.mc-sector-nav { padding-top: 8px; border-top: 1px solid #f1f2f4; }
.mc-sector-title { display: flex; justify-content: space-between; font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 3px; }
.mc-sector-title small { color: #9ca3af; font-weight: 400; }
.mc-sector-item { display: flex; justify-content: space-between; gap: 6px; width: 100%; padding: 5px 4px; border: 0; border-radius: 4px; background: transparent; color: #4b5563; font-size: 11px; cursor: pointer; text-align: left; }
.mc-sector-item:hover { background: #f8fafc; }
.mc-sector-item.on { background: #eff6ff; color: #1677ff; }
.mc-sector-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid #dfe7ef; border-radius: 10px; background: linear-gradient(145deg, #D8E1E8 0%, #CCD7DF 100%); overflow: hidden; position: relative; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.mc-chart { flex: none; width: 100%; min-height: 360px; background: transparent; }
.mc-map-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-top: 1px solid #e5edf5; background: rgba(255,255,255,.55); color: #7b8794; font-size: 10.5px; }
.mc-map-note button { border: 0; background: transparent; color: #1677ff; font-size: 10.5px; cursor: pointer; padding: 0 2px; }
.mc-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.76); color: #6b7280; font-size: 13px; }
.mc-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 9px; color: #8a8f98; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.mc-timeline { display: flex; align-items: center; gap: 4px; color: #9ca3af; font-size: 10px; flex-wrap: wrap; }
.mc-footer-label { margin-right: 4px; white-space: nowrap; }
.mc-time-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 0 7px; border: 1px solid #e5e7eb; border-radius: 4px; background: #f8fafc; color: #64748b; font-size: 10px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.mc-time-chip:hover { background: #eff6ff; border-color: #a8ccff; color: #1677ff; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,119,255,.13); }
.mc-time-chip.active { background: #1677ff; border-color: #1677ff; color: #fff; font-weight: 600; }
.mc-legend { display: flex; align-items: center; gap: 3px; }
.mc-legend-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 5px; border-radius: 4px; font-size: 9px; text-align: center; font-weight: 600; }
.mc-fullscreen { position: fixed; inset: 0; z-index: 3000; background: #f7f7f7; padding: 12px; height: auto; min-height: 0; }

/* 市场情绪：大盘情绪/大盘云图横向子页 */
.mp-page { min-height: calc(100vh - 90px); }
.mp-header { padding: 0 2px 4px; text-align: left; align-items: flex-start; justify-content: flex-start; }
.mp-header > div { width: 100%; }
.mp-eyebrow { font-size: 10px; letter-spacing: 1.4px; color: #1677ff; font-weight: 600; }
.mp-header .page-title { margin: 2px 0 3px; }
.mp-eyebrow + .page-title { margin-top: 2px; }
.mp-tabs > .el-tabs__header { margin-bottom: 10px; }
.mp-tabs .el-tabs__item { height: 38px; line-height: 38px; font-size: 13px; }
.mp-body .page-header { display: none !important; }
.mp-body .mc-header .mc-title-wrap { display: none; }
.mp-body .mc-header { justify-content: flex-end; padding: 0 0 2px; }
.mp-body .mc-page { height: auto; min-height: 0; }
.mp-body .mc-layout { height: auto; min-height: 0; flex: 0 0 auto; align-items: stretch; }
.mp-body .mc-main { height: auto; }
.mp-body .mc-chart { height: calc(100vh - 340px); min-height: 360px; flex: none; }
.mp-body .mc-side { height: auto; max-height: calc(100vh - 340px); }
.mp-body .sentiment-page { padding-top: 0; }
@media (max-width: 1100px) {
  .mc-side { width: 164px; flex-basis: 164px; }
  .mc-sub { display: none; }
}

.mc-fullscreen .mc-layout { height: calc(100vh - 96px); min-height: 0; }
.mc-fullscreen .mc-main { height: calc(100vh - 96px); }
.mc-fullscreen .mc-chart { height: calc(100vh - 140px); min-height: 360px; }
.mc-fullscreen .mc-side { max-height: calc(100vh - 96px); }

/* 大盘情绪 · 个股榜单 */
.rank-card { padding: 10px 12px 12px; }
.rank-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rank-card-head .chart-title { margin: 0; }
.rank-meta { color: #8a8f98; font-size: 10.5px; }
.rank-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; min-height: 0; }
.rank-panel { position: relative; z-index: 1; border: 1px solid #e6ebf2; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.065); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; }
.rank-panel:hover { z-index: 2; transform: translateY(-4px); border-color: #d7e4f3; box-shadow: 0 16px 36px rgba(15,23,42,.14); }
.rank-panel-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 8px 8px; background: #fff; border-bottom: 1px solid #eef0f3; text-align: center; }
.rank-panel-head b { font-size: 13px; color: #1f2329; }
.rank-panel-head b::after { content: ""; display: block; width: 24px; height: 2px; margin: 4px auto 0; background: #1677ff; border-radius: 2px; }
.rank-panel-head span { font-size: 9.5px; color: #9ca3af; }
.rank-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; padding: 3px 9px; border: 0; border-bottom: 1px solid #f5f6f7; background: transparent; text-align: left; cursor: pointer; font-family: inherit; }
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: #f6f9ff; }
.rank-no { width: 18px; color: #9ca3af; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.rank-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #1f2329; font-size: 11.5px; }
.rank-name small { margin-left: 4px; color: #9ca3af; font-family: monospace; font-size: 9.5px; }
.rank-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 58px; }
.rank-right b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rank-right small { font-size: 9.5px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.rank-right b.up, .rank-right small.up { color: #c24141; }
.rank-right b.down, .rank-right small.down { color: #3f7f58; }
@media (max-width: 1100px) {
  .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 大盘情绪：给榜单留出首屏空间 */
.sentiment-page .chart-body { height: 250px; }

.rank-row-main { margin-top: 12px; flex: none; height: calc(100vh - 465px); min-height: 360px; display: flex; }
.sentiment-page { display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 0; overflow: hidden; }
.rank-row-main .rank-card { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.rank-row-main .rank-grid { flex: 1; min-height: 0; height: 100%; }
.rank-row-main .rank-panel { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.rank-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #d4dce6 transparent; }
.rank-body::-webkit-scrollbar { width: 5px; }
.rank-body::-webkit-scrollbar-track { background: transparent; }
.rank-body::-webkit-scrollbar-thumb { background: #d4dce6; border-radius: 99px; }
.rank-body::-webkit-scrollbar-thumb:hover { background: #b8c4d2; }