/* 我的数据看板 */

/* 拖拽画布要用满侧边栏之外的全部宽度 —— shell.css 给 <main> 设了 1180px
   的通用阅读宽度(其他页面是表单/表格,窄一点更好读),但这里 .mb-grid 的
   拖拽范围直接取 grid.clientWidth,main 一限宽,卡片就只能在左边一小块
   活动,拖到右侧超出 1180px 的地方会被拖拽逻辑的边界钳制卡住。 */
body.spx-shell main.mb-main { max-width: none; }

/* shell.css 把 main 和 .site-footer 的 max-width 都锁在 1180px、margin 清零，
   main 在这页放开成 none 后，页脚还卡在 1180px 且没有上边距，宽屏下页脚比画布
   窄一截，且贴着最后一排卡片底部只剩 main 的 20px padding，观感上像是被卡片
   顶到了。这里只在本页把页脚也放开、补回一点呼吸空间，不影响其他页。 */
body.spx-shell .site-footer.mb-footer { max-width: none; margin-top: 24px; }

:root {
  /* 复用站点全局强调色(style.css --accent),避免这里另起一个色号导致
     跟其他页面的蓝色对不上。 */
  --mb-accent: var(--accent, #185FA5);
  --mb-accent-rgb: 24, 95, 165;
}

.mb-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mb-hint {
  font-size: 12px;
  color: var(--txt2, #8a929c);
  margin: 0;
}
.mb-reset-btn {
  flex: none;
  font-size: 12px;
  color: var(--txt2, #8a929c);
  background: var(--bg, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}
.mb-reset-btn:hover { border-color: var(--mb-accent); color: var(--mb-accent); }

.mb-add-wrap { position: relative; flex: none; }
.mb-add-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--mb-accent);
  background: rgba(var(--mb-accent-rgb), .08);
  border: 1px solid rgba(var(--mb-accent-rgb), .25);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.mb-add-btn:hover { background: rgba(var(--mb-accent-rgb), .16); }
.mb-add-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 190px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 31, 36, .16);
  padding: 6px;
}
.mb-add-pop[hidden] { display: none; }
.mb-add-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt2, #8a929c);
  padding: 8px 10px 3px;
}
.mb-add-label:first-child { padding-top: 3px; }
.mb-add-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--txt, #24292f);
}
.mb-add-item:hover { background: var(--bg2, #f6f8fa); }
.mb-add-full {
  font-size: 12px;
  color: var(--txt2, #8a929c);
  padding: 10px 8px;
  text-align: center;
  line-height: 1.6;
}

/* 自由拖拽画布:JS 给 .mb-grid 加 mb-canvas-mode 后,卡片改为绝对定位,
   可以自由拖动摆放(横向/纵向比对);高度由 JS 按内容动态写入 style.height。
   窄屏(<=760px)不开启画布,退回原来的堆叠布局。 */
.mb-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
}
.mb-grid.mb-canvas-mode .mb-card {
  position: absolute;
  width: 420px;
  /* 默认统一高度:不设的话卡片会随内容无限长高(行业排行 20 行能撑出
     1200px+),跟下方卡片重叠;超出部分在卡片内滚动,跟手动 resize 后的
     行为一致。用户拖右下角改过大小的,JS 会写内联样式覆盖这里。 */
  height: 420px;
  min-width: 300px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: left 120ms ease-out, top 120ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}
.mb-grid.mb-canvas-mode .mb-card.dragging,
.mb-grid.mb-canvas-mode .mb-card.resizing { transition: none; }
/* 多股对比卡片比普通行情卡片大一圈,方便同时看清多条曲线 */
.mb-grid.mb-canvas-mode .mb-card.mb-compare-card {
  width: 760px;
  height: 460px;
  min-height: 460px;
}
/* 按卡片内容天然高度设更贴合的默认值,避免统一 420 造成留白/参差:
   指数速览只有 6 个小 tile、排行/摘要类内容也短于图表卡。用户手动 resize
   过的,JS 会写内联样式覆盖这里。 */
.mb-grid.mb-canvas-mode .mb-card.mb-indices-card { height: 300px; }
.mb-grid.mb-canvas-mode .mb-card.mb-rank-card,
.mb-grid.mb-canvas-mode .mb-card.mb-review-card,
.mb-grid.mb-canvas-mode .mb-card.mb-hotsector-card { height: 360px; }
.mb-grid.mb-canvas-mode .mb-card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mb-grid.mb-canvas-mode .mb-chart { flex: 1; min-height: 100px; }
.mb-grid.mb-canvas-mode .mb-rank-body { flex: 1; min-height: 0; max-height: none; }
.mb-grid.mb-canvas-mode .mb-review-body,
.mb-grid.mb-canvas-mode .mb-indices-grid { flex: 1; min-height: 0; overflow-y: auto; }

@media (max-width: 760px) {
  .mb-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .mb-grid.mb-canvas-mode { height: auto !important; }
  .mb-grid.mb-canvas-mode .mb-card {
    position: static !important; width: auto !important; height: auto !important;
  }
  /* 只隐藏依赖精细指针的拖拽/缩放(触屏体验差);切换股票、删卡、添加、重置
     在堆叠布局下依然可用,保留 —— 否则手机用户只能看死默认布局。
     用 !important:桌面加载后缩到窄屏时 mb-canvas-mode 类会残留(JS 不在
     resize 时重跑),画布模式的 .mb-resize-handle{display:block} 在源码里更靠
     后、同特异性会盖过普通规则,响应式隐藏这里用 !important 稳压(只作用于
     窄屏媒体查询内,桌面画布模式不受影响)。 */
  .mb-drag-handle, .mb-resize-handle { display: none !important; }
  /* 没了拖拽把手的 margin-left:auto 占位,把删除按钮推到右侧对齐 */
  .mb-card-close { margin-left: auto; }
}

.mb-card {
  position: relative;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(27, 31, 36, .06), 0 1px 2px rgba(27, 31, 36, .04);
  transition: box-shadow 160ms ease-out, border-color 160ms ease-out;
}
.mb-grid.mb-canvas-mode .mb-card:hover {
  box-shadow: 0 6px 16px rgba(27, 31, 36, .08), 0 2px 6px rgba(27, 31, 36, .05);
  border-color: #c4cdd6;
}
.mb-grid.mb-canvas-mode .mb-card.dragging {
  box-shadow: 0 14px 32px rgba(27, 31, 36, .20);
  border-color: var(--mb-accent);
  transform: scale(1.01);
}
.mb-grid.mb-canvas-mode .mb-card.resizing {
  box-shadow: 0 14px 32px rgba(27, 31, 36, .20);
  border-color: var(--mb-accent);
}

.mb-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border, #eaeef2);
}
.mb-card-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mb-name { font-size: 16px; font-weight: 700; color: var(--txt, #24292f); letter-spacing: -.01em; }
.mb-name--empty { color: var(--txt2, #8a929c); font-weight: 600; }
.mb-code { font-size: 12px; color: var(--txt2, #8a929c); font-variant-numeric: tabular-nums; }
.mb-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--bg2, #f6f8fa);
  color: var(--txt2, #8a929c);
}
.mb-tag--index { background: rgba(var(--mb-accent-rgb), .10); color: var(--mb-accent); }
.mb-tag--stock { background: var(--bg2, #f6f8fa); color: var(--txt2, #8a929c); }

.mb-switch-btn {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--mb-accent);
  background: rgba(var(--mb-accent-rgb), .08);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.mb-switch-btn:hover { background: rgba(var(--mb-accent-rgb), .16); }
/* 空槽位已经有卡片正中的"+ 选择股票或指数"入口,头部这个按钮就不用重复出现了 */
.mb-card--empty .mb-switch-btn { display: none; }

.mb-card-close {
  flex: none;
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--txt2, #8a929c);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.mb-card-close:hover { background: rgba(229, 72, 77, .12); color: #e5484d; }

.mb-drag-handle {
  margin-left: auto;
  flex: none;
  font-size: 15px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--txt2, #8a929c);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.mb-drag-handle:hover { background: var(--bg2, #f6f8fa); color: var(--mb-accent); }
.mb-card.dragging .mb-drag-handle { cursor: grabbing; }

/* 卡片右下角调整大小的把手,仅画布模式下显示 */
.mb-resize-handle {
  display: none;
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 6;
}
.mb-grid.mb-canvas-mode .mb-resize-handle { display: block; }
.mb-resize-handle::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--txt2, #8a929c);
  border-bottom: 2px solid var(--txt2, #8a929c);
  opacity: .4;
  transition: opacity 120ms ease-out;
}
.mb-card:hover .mb-resize-handle::before,
.mb-card.resizing .mb-resize-handle::before { opacity: .9; }

/* 布局保存被服务端拒绝时的提示条 */
.mb-save-error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  font-size: 13px;
  color: #fff;
  background: #e5484d;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 6px 20px rgba(27, 31, 36, .2);
}

/* 拖动时的对齐吸附参考线 */
.mb-guide {
  position: absolute;
  background: var(--mb-accent);
  pointer-events: none;
  z-index: 5;
}
.mb-guide.v { width: 1px; top: 0; bottom: 0; }
.mb-guide.h { height: 1px; left: 0; right: 0; }

/* 卡片全部删光后的空画布提示 */
.mb-empty-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  font-size: 13px;
  color: var(--txt2, #8a929c);
  text-align: center;
}
.mb-grid.mb-canvas-mode .mb-empty-canvas {
  position: absolute;
  inset: 0;
}

/* ── 行情卡片:报价 / 图表 ──────────────────────────────────────────── */

.mb-quote {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 4px;
}
.mb-close {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--txt, #24292f);
}
.mb-chg-chip {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 6px;
}
.mb-chg-chip.mb-up   { color: var(--up, #cf222e); background: rgba(207, 34, 46, .10); }
.mb-chg-chip.mb-down { color: var(--down, #1a7f37); background: rgba(26, 127, 55, .10); }
.mb-chg-chip.mb-flat { color: var(--txt2, #8a929c); background: var(--bg2, #f6f8fa); }
.mb-up   { color: var(--up, #cf222e); }
.mb-down { color: var(--down, #1a7f37); }
.mb-flat { color: var(--txt2, #8a929c); }

.mb-meta { font-size: 12px; color: var(--txt2, #8a929c); margin-bottom: 8px; }

.mb-chart { width: 100%; height: 234px; }

.mb-loading, .mb-error {
  font-size: 13px;
  color: var(--txt2, #8a929c);
  padding: 30px 0;
  text-align: center;
}
.mb-loading { animation: mb-pulse 1.2s ease-in-out infinite; }
@keyframes mb-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.mb-error { color: #e5484d; }

/* 未选择股票的空槽位 */
.mb-empty-slot {
  padding: 40px 0;
  text-align: center;
}
.mb-empty-slot p { margin: 0 0 12px; font-size: 13px; color: var(--txt2, #8a929c); }
.mb-empty-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--mb-accent);
  background: rgba(var(--mb-accent-rgb), .08);
  border: 1px dashed rgba(var(--mb-accent-rgb), .35);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.mb-empty-btn:hover { background: rgba(var(--mb-accent-rgb), .16); }

/* ── 多股对比卡片:选中股票的色块标签 + 大图表 ────────────────────────── */

.mb-compare-count { font-size: 11px; color: var(--txt2, #8a929c); font-variant-numeric: tabular-nums; }

.mb-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}
.mb-compare-chips:empty { margin: 0; }
.mb-cmp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt, #24292f);
  background: var(--bg2, #f6f8fa);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
}
.mb-cmp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cmp-color, #8a929c);
}
.mb-cmp-remove {
  flex: none;
  font-size: 11px;
  line-height: 1;
  color: var(--txt2, #8a929c);
  background: none;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.mb-cmp-remove:hover { background: rgba(229, 72, 77, .14); color: #e5484d; }

.mb-compare-chart { height: 380px; }
.mb-grid.mb-canvas-mode .mb-compare-card .mb-chart { flex: 1; min-height: 200px; }

/* ── 每日复盘摘要卡 ────────────────────────────────────────────────── */

.mb-review-title { font-size: 15px; font-weight: 700; color: var(--txt, #24292f); margin: 8px 0 10px; }
.dr-idx-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dr-idx-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  background: var(--bg2, #f6f8fa);
  border-radius: 8px;
  padding: 6px 10px;
}
.dr-idx-name { color: var(--txt2, #8a929c); }
.dr-idx-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--txt, #24292f); }
.mb-review-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mb-accent);
  text-decoration: none;
}
.mb-review-link:hover { text-decoration: underline; }

/* ── AI热门板块战绩卡(复用排行榜的 rk-row/rk-group-label 列表样式) ──── */

.mb-hs-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
}
.mb-hs-tag--win { background: rgba(207, 34, 46, .1); color: #cf222e; }
.mb-hs-tag--lose { background: rgba(26, 127, 55, .1); color: #1a7f37; }

/* ── 指数速览卡 ────────────────────────────────────────────────────── */

.mb-indices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.mb-ix-tile {
  background: var(--bg2, #f6f8fa);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.mb-ix-name { font-size: 12px; color: var(--txt2, #8a929c); margin-bottom: 6px; }
.mb-ix-val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mb-ix-chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 520px) {
  .mb-indices-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 搜索切换弹层 ──────────────────────────────────────────────────── */

.mb-search-pop {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 52px;
  z-index: 20;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 31, 36, .16);
  padding: 10px;
}
.mb-search-pop[hidden] { display: none; }
.mb-search-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.mb-search-input:focus {
  border-color: var(--mb-accent);
  box-shadow: 0 0 0 3px rgba(var(--mb-accent-rgb), .12);
}
.mb-search-results { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.mb-search-hint {
  font-size: 12px;
  color: var(--txt2, #8a929c);
  padding: 10px 4px;
  text-align: center;
}
.mb-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  font: inherit;
}
.mb-search-item:hover { background: var(--bg2, #f6f8fa); }
.mb-search-item-name { font-size: 13px; font-weight: 600; color: var(--txt, #24292f); }
.mb-search-item-code {
  font-size: 12px; color: var(--txt2, #8a929c);
  font-variant-numeric: tabular-nums; margin-right: auto;
}

/* ── 板块涨幅排行榜(4 张分类小卡片) ────────────────────────────── */
.mb-rank-date { font-size: 11px; color: var(--txt2, #8a929c); font-variant-numeric: tabular-nums; }
.mb-rank-body {
  max-height: 340px;
  overflow-y: auto;
  margin-top: 4px;
}

.rk-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt, #24292f);
  margin: 12px 0 4px;
}
.rk-group-label:first-child { margin-top: 0; }

.rk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--border, #eaeef2);
  border-radius: 6px;
  transition: background-color 120ms ease-out;
}
.rk-row:hover { background: var(--bg2, #f6f8fa); }
.rk-row:last-child { border-bottom: none; }
.rk-no {
  flex: none; width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px; font-size: 12px; font-weight: 700;
  background: var(--bg2, #f6f8fa); color: var(--txt2, #8a929c);
}
/* 金/银/铜色,故意跟上面 rk-up(涨,红)/rk-down(跌,绿)区分开,
   避免"第一名"徽章跟涨跌颜色语义混在一起。 */
.rk-no.top1 { background: #c9971f; color: #fff; }
.rk-no.top2 { background: #92a0ac; color: #fff; }
.rk-no.top3 { background: #ad7846; color: #fff; }
.rk-name { flex: 1; min-width: 0; font-size: 14px; }
.rk-sub { font-size: 11px; color: var(--txt2, #8a929c); margin-top: 2px; }
.rk-pct { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-up { color: #cf222e; }     /* A股:红涨 */
.rk-down { color: #1a7f37; }   /* 绿跌 */
.rk-flat { color: var(--txt2, #8a929c); }
.rk-hot {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(229,72,77,.1); color: #e5484d; margin-left: 6px;
}
.rk-note { font-size: 12px; color: var(--txt2, #8a929c); margin-top: 10px; line-height: 1.7; }
.rk-src {
  font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 6px;
  background: var(--bg2, #f0f2f5); color: var(--txt2, #8a929c);
}

@media (prefers-reduced-motion: reduce) {
  .mb-card, .mb-grid.mb-canvas-mode .mb-card, .rk-row { transition: none; }
  .mb-loading { animation: none; }
}