/* ==========================================================================
   37313 · Components（UI 母版 v1）
   职责：可复用组件。页面不得重复定义这些结构。
   组件：Score 分项 / Reason 列表 / Metric 指标 / DataTable 数据表 /
        Fact 事实对 / RiskLabel 风险标签 / StateTag 状态标签 / Card 卡面
   ========================================================================== */

/* ---------- Card：唯一卡面，圆角 10，细边框，无阴影 ---------- */
.m-card{
  background:var(--m-surface);
  border:1px solid var(--m-line);
  border-radius:var(--radius);
}
.m-card-2{ background:var(--m-surface-2); }

/* ---------- Score：Opportunity Score 展示（固定格式 82 / 100）----------
   颜色规则：默认白；明确优质绿；明显风险变化红。不做彩虹区间。 */
.m-score{
  font:700 38px/1 var(--mono);
  letter-spacing:-.06em;
  color:var(--m-text);
  font-variant-numeric:tabular-nums;
}
.m-score small{ font-size:13px; color:var(--m-muted); letter-spacing:0; margin-left:2px; }
.m-score.is-good{ color:var(--m-good); }
.m-score.is-bad{ color:var(--m-bad); }

/* Score 分项条（点击后解释扣分原因用） */
.m-dims{ margin-top:16px; }
.m-dim{ display:grid; grid-template-columns:96px 1fr 64px; align-items:center; gap:10px; padding:5px 0; }
.m-dim-label{ font-size:12px; color:var(--m-soft); }
.m-dim-track{ height:6px; background:#27313b; border-radius:6px; overflow:hidden; }
.m-dim-fill{ display:block; height:100%; background:var(--m-brand); }
.m-dim-fill.is-risk{ background:var(--m-bad); }
.m-dim-fill.is-na{ background:#3a4652; }
.m-dim-val{ font:550 12px var(--mono); text-align:right; color:var(--m-soft); }
.m-dim-val.is-na{ color:var(--m-muted); }

/* ---------- Reason：为什么重要 / 提醒 ---------- */
.m-reasons{ }
.m-reason{
  display:flex; gap:10px;
  padding:11px 0;
  border-top:1px solid var(--m-line-soft);
  font-size:13px;
}
.m-reason:first-child{ border-top:0; }
.m-reason i{
  width:7px; height:7px; margin-top:7px; border-radius:50%;
  background:var(--m-brand); flex:0 0 auto;
}
.m-reason.is-warn i{ background:var(--m-warn); }
.m-reason.is-bad i{ background:var(--m-bad); }
.m-reason small{ display:block; color:var(--m-muted); font-size:11px; margin-top:2px; }

/* ---------- Metric：数字 + 说明 ---------- */
.m-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.m-metric{ padding:0 0 0 14px; border-left:1px solid var(--m-line-soft); }
.m-metric:first-child{ padding-left:0; border-left:0; }
.m-metric strong{
  display:block; font:650 17px/1.25 var(--mono);
  font-variant-numeric:tabular-nums; color:var(--m-text);
}
.m-metric span{ font-size:11px; color:var(--m-muted); }

/* ---------- Fact：标签 / 值 两列对 ---------- */
.m-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.m-fact span{ display:block; color:var(--m-muted); font-size:11px; }
.m-fact b{ font:550 13px var(--mono); color:var(--m-text); }
.m-fact b.is-na{ color:var(--m-muted); font-weight:400; }

/* ---------- RiskLabel：Low / Medium / High（禁止写成「无风险/保本/稳赚」）---------- */
.m-risk{ font-weight:650; font-size:12px; letter-spacing:.02em; }
.m-risk.low{ color:var(--m-good); }
.m-risk.medium{ color:var(--m-warn); }
.m-risk.high{ color:var(--m-bad); }
.m-risk.unknown{ color:var(--m-muted); font-weight:400; }

/* ---------- StateTag：数据状态标签（未核实 / 数据不足 / 待接入）----------
   母版规则 6：正常项目最多 1–2 个状态提示，能用文字与位置表达的就不做 Badge。 */
.m-tag{
  display:inline-block; padding:1px 7px; border-radius:4px;
  font-size:11px; line-height:1.7; border:1px solid var(--m-line);
  color:var(--m-muted); white-space:nowrap;
}
.m-tag.warn{ color:var(--m-warn); border-color:rgba(231,183,93,.4); background:var(--m-warn-soft); }
.m-tag.bad{ color:var(--m-bad); border-color:rgba(239,109,120,.4); background:var(--m-bad-soft); }
.m-tag.good{ color:var(--m-good); border-color:rgba(88,207,146,.4); background:var(--m-good-soft); }
.m-tag.plain{ color:var(--m-muted); border-color:transparent; background:transparent; padding-left:0; }

/* ---------- DataTable：全站唯一数据表样式，数字右对齐等宽 ---------- */
.m-table{ width:100%; border-collapse:collapse; font-size:13px; }
.m-table th{
  text-align:left; font-weight:500; color:var(--m-muted); font-size:11px;
  padding:0 0 10px; border-bottom:1px solid var(--m-line); white-space:nowrap;
}
.m-table td{
  padding:12px 0; border-bottom:1px solid var(--m-line-soft);
  vertical-align:middle;
}
/* 列间距统一由相邻单元格的左边距提供：
   若像旧写法那样「非数字列只给右 padding、数字列只给左 padding」，
   当右对齐列紧邻左对齐列时两侧 padding 同时为 0，表头文字会粘在一起。 */
.m-table th + th, .m-table td + td{ padding-left:22px; }
.m-table th.num, .m-table td.num{ text-align:right; }
.m-table th:last-child, .m-table td:last-child{ padding-right:3px; }
.m-table tr:last-child td{ border-bottom:0; }
.m-table .t-main{ font-weight:650; color:var(--m-text); }
.m-table .t-sub{ display:block; color:var(--m-muted); font-size:11px; font-weight:400; margin-top:1px; }
.m-table a{ color:inherit; }
.m-table tbody tr:hover{ background:rgba(255,255,255,.015); }

/* 宽表兜底：数据区不被压窄，需要横向滚动时只滚表格本身 */
.m-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- MiniBar：表达真实比例（数据完整度等），不使用装饰性渐变 ---------- */
.m-minibar{
  display:inline-block; vertical-align:middle;
  width:56px; height:5px; border-radius:4px;
  background:#27313b; overflow:hidden; margin-right:8px;
}
.m-minibar i{ display:block; height:100%; background:var(--m-brand); }

/* ---------- 数据来源与更新时间（母版：不得因移动端空间不足而隐藏）---------- */
.m-datasrc{
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--m-line-soft);
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--m-muted); font-size:11px;
}
.m-datasrc b{ color:var(--m-soft); font-weight:500; font-family:var(--mono); }

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .m-metrics{ grid-template-columns:1fr 1fr; gap:16px 0; }
  .m-metric:nth-child(odd){ padding-left:0; border-left:0; }
  .m-dim{ grid-template-columns:80px 1fr 58px; }
}
@media (max-width:620px){
  .m-facts{ grid-template-columns:1fr 1fr; gap:12px 16px; }
  .m-table th, .m-table td{ padding-right:10px; }
}