/* ===== 原料行情中心（G2）：首页原料卡里的铜、锡最新价，和点开的行情中心（汇总条、行情卡、走势图、受影响订单）=====
   只由 material.js 用；颜色只用 app.css / theme.css 里已有的变量（红涨绿跌：--red 涨、--green 跌）；间距 4/8/12/16/24；字号 ≥ 13px。
   在 theme.css 之后加载，原来的 .mat-* 规则（清单、发布门、三组页签）原样继续用。 */

/* —— 首页卡片：铜、锡两行最新价 —— */
.mc-minis { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mc-mini { width: calc(100% + 16px); margin: 0 -8px; border: 0; border-radius: var(--r-ctl); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: "text spark" "chg spark" "meta meta"; align-items: center; column-gap: 12px; padding: 4px 8px; }
.mc-mini:hover { background: var(--line-soft); }
.mc-mini-text { grid-area: text; color: var(--ink-2); font-size: 15px; }
.mc-mini-name { color: var(--ink); font-size: 17px; font-weight: 650; }
.mc-mini-price { color: var(--ink); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mc-mini-unit { color: var(--ink-3); font-size: 13px; }
.mc-mini-chg { grid-area: chg; color: var(--ink-3); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-mini .mc-spark { grid-area: spark; height: 28px; }
.mc-mini-meta { grid-area: meta; color: var(--ink-3); font-size: 13px; }
.mc-mini.up .mc-mini-price, .mc-mini.up .mc-mini-chg { color: var(--red); }
.mc-mini.down .mc-mini-price, .mc-mini.down .mc-mini-chg { color: var(--green); }

/* —— 小走势线（行情卡、首页卡片共用）：涨红跌绿，只画形状 —— */
.mc-spark { display: block; width: 100%; height: 36px; overflow: visible; }
.mc-spark polyline { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mc-spark polygon { fill: var(--ink-3); fill-opacity: .08; stroke: none; }
.mc-spark.up polyline { stroke: var(--red); }
.mc-spark.up polygon { fill: var(--red); }
.mc-spark.down polyline { stroke: var(--green); }
.mc-spark.down polygon { fill: var(--green); }

/* —— 行情中心弹窗 —— */
.modal.mat-modal { width: min(1120px, 100%); max-height: min(92vh, 1000px); }
.mat-modal .modal-body { display: grid; gap: 16px; --mc-fill: #F5F7FA; }
.mat-modal .modal-body > * { min-width: 0; }

/* 顶部汇总一行 */
.mc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mc-tile { display: grid; gap: 4px; align-content: start; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--mc-fill); box-shadow: inset 0 0 0 1px var(--line-soft); }
.mc-tile-label { color: var(--ink-3); font-size: 13px; }
.mc-tile-value { color: var(--ink); font-size: 28px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mc-tile-value small { color: var(--ink-3); font-size: 14px; font-weight: 400; }
.mc-tile.up .mc-tile-value { color: var(--red); }
.mc-tile.warn .mc-tile-value { color: var(--orange); }
.mc-tile-sub { color: var(--ink-3); font-size: 13px; }

/* 数据日期 + 情景切换 + 品类 */
.mc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mc-asof { color: var(--ink-2); font-size: 14px; }
.mc-asof b { color: var(--ink); font-weight: 650; }
.mc-asof-note { color: var(--ink-3); font-size: 13px; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-chip { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.mc-chip:hover { border-color: var(--ink-3); }
.mc-chip.on { border-color: var(--ink); background: var(--ink); color: #FFFFFF; font-weight: 600; }

/* 行情卡 */
.mc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mc-card { display: grid; gap: 4px; align-content: start; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #FFFFFF; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.mc-card:hover { border-color: var(--ink-3); box-shadow: var(--edge-shadow); }
.mc-card.on { border-color: var(--carbon); box-shadow: 0 0 0 3px var(--carbon-wash); }
.mc-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mc-name { font-size: 17px; font-weight: 650; }
.mc-code { color: var(--ink-3); font-size: 13px; }
.mc-badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.mc-card .mc-badge { margin-left: auto; }
.mc-badge.real { background: var(--carbon-wash); color: var(--carbon); }
.mc-badge.demo { background: #FFF1DF; color: #9A5516; }
.mc-price { color: var(--ink); font-size: 26px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mc-price small { margin-left: 4px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.mc-chg { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-3); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-card.up .mc-price, .mc-card.up .mc-chg { color: var(--red); }
.mc-card.down .mc-price, .mc-card.down .mc-chg { color: var(--green); }
.mc-foot { min-height: 2.8em; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.mc-demo-note { color: var(--ink-3); font-size: 13px; }

/* 走势图 + 受影响订单 */
.mc-split { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mc-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #FFFFFF; }
.mc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.mc-panel-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 16px; font-weight: 650; }
.mc-ranges .mat-seg-btn { padding: 4px 12px; }
.mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.mc-stat { display: grid; gap: 4px; align-content: start; }
.mc-stat span { color: var(--ink-3); font-size: 13px; }
.mc-stat b { color: var(--ink); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mc-stat em { color: var(--ink-3); font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }
.mc-stat.up b, .mc-stat.up em { color: var(--red); }
.mc-stat.down b, .mc-stat.down em { color: var(--green); }
.mc-legend { margin-top: 8px; color: var(--ink-3); font-size: 13px; }

/* 原生 SVG 走势图：实线真实、虚线演示；鼠标移上去看每一天（纯 CSS，不用脚本） */
.mc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mc-gl { stroke: var(--line-soft); stroke-width: 1; }
.mc-axis { fill: var(--ink-3); font-size: 15px; font-variant-numeric: tabular-nums; }
.mc-area { fill: var(--carbon); fill-opacity: .06; stroke: none; }
.mc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-line.real { stroke: var(--carbon); }
.mc-line.demo { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.mc-mark { fill: #FFFFFF; stroke: var(--ink-2); stroke-width: 1.5; }
.mc-hilo { fill: var(--ink-2); font-size: 15px; font-weight: 600; paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; font-variant-numeric: tabular-nums; }
.mc-lastline { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.mc-lastdot { fill: var(--ink); stroke: #FFFFFF; stroke-width: 2; }
.mc-lastdot.up { fill: var(--red); }
.mc-lastdot.down { fill: var(--green); }
.mc-hit { fill: #000000; fill-opacity: 0; }
.mc-cross, .mc-dot, .mc-tt { opacity: 0; pointer-events: none; }
.mc-cross { stroke: var(--ink-3); stroke-width: 1; }
.mc-dot { fill: var(--carbon); stroke: #FFFFFF; stroke-width: 2; }
.mc-tt { fill: var(--ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #FFFFFF; stroke-width: 5px; }
.mc-pt:hover .mc-cross, .mc-pt:hover .mc-dot, .mc-pt:hover .mc-tt { opacity: 1; }
.mc-chart:has(.mc-pt:hover) .mc-unit { opacity: 0; }       /* 看某一天的读数时，右上角的单位让位 */
.mc-chart.narrow .mc-axis, .mc-chart.narrow .mc-hilo { font-size: 13px; }
.mc-chart.narrow .mc-tt { font-size: 13px; }

/* 受影响订单（某一种原料） */
.mc-basis { margin-bottom: 8px; color: var(--ink-3); font-size: 13px; }
.mc-impact-sum { margin-bottom: 12px; color: var(--ink-2); font-size: 15px; }
.mc-impact-sum b { color: var(--ink); font-size: 18px; font-weight: 650; }
.mc-empty { margin-bottom: 8px; padding: 12px; border-radius: var(--r-ctl); background: var(--mc-fill); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.mc-orders { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.mc-order { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--mc-fill); }
.mc-order-main { display: grid; gap: 4px; min-width: 0; }
.mc-order-main strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mc-order-sub { overflow: hidden; color: var(--ink-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mc-order-money { display: grid; flex: none; justify-items: end; gap: 4px; }
.mc-order-money b { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mc-order-money .tag { padding: 4px 8px; font-size: 13px; }
.mc-more, .mc-pending { color: var(--ink-3); font-size: 13px; }
.mc-pending { margin-top: 8px; color: var(--orange); }

/* 下面的完整清单（原来的三组 + 发布门） */
.mc-all .mat-modal-head { margin-bottom: 12px; font-size: 15px; }
.mat-split { color: var(--ink-3); font-size: 13px; font-weight: 400; }

@media (max-width: 900px) {
  .mc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .mc-strip, .mc-grid { gap: 8px; }
  .mc-tile { padding: 12px; }
  .mc-tile-value { font-size: 24px; }
  .mc-card { padding: 12px; }
  .mc-price { font-size: 22px; }
  .mc-card .mc-badge { margin-left: 0; }
  .mc-panel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mc-card { transition: none; } }