/* =========================================================
   supOS-Free Mockup Kit（改造方案 v3 · P4a）
   高保真产品界面模拟组件库，两页复用，纯 CSS（沿用 tokens.css）。
   组件：.mw 窗口壳 / .msb 侧栏 / .mtb 工具栏 / .mtable 表格 /
        .mkpi KPI 卡 / .mchart 图表 / .mdetail 详情字段 / .mtl 时间线 /
        .mform 表单 / .mphone 手机壳
   约定：组件内字号 10.5–13px；表格列数由 style="--mt-cols: ..." 指定；
   入场 stagger 仅 transform/opacity，reduced-motion 直出终态。
   ========================================================= */

/* ---------- .mw 窗口壳 ---------- */
.mw {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
}
.mw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
}
.mw-dots { display: inline-flex; gap: 5px; flex: none; }
.mw-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line-strong); }
.mw-dots i:nth-child(1) { background: rgba(217, 75, 75, 0.65); }
.mw-dots i:nth-child(2) { background: rgba(217, 135, 25, 0.65); }
.mw-dots i:nth-child(3) { background: rgba(31, 157, 102, 0.65); }
.mw-title { font-size: 12.5px; font-weight: 650; color: var(--color-text); white-space: nowrap; }
.mw-url {
  flex: 1;
  min-width: 0;
  margin-inline: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  font-size: 11px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-env {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--color-success);
  background: rgba(31, 157, 102, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mw-env::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}
.mw-body { display: grid; grid-template-columns: 168px 1fr; min-height: 0; }
.mw-main {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

/* ---------- .msb 应用侧栏 ---------- */
.msb {
  border-right: 1px solid var(--color-line);
  background: #fbfcfe;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msb-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
}
.msb-logo i {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, #4d84f0, var(--color-primary));
  color: #fff;
  font-size: 11px;
  font-style: normal;
  display: grid;
  place-items: center;
  flex: none;
}
.msb-group {
  margin: 8px 8px 3px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}
.msb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.msb-item svg { width: 14px; height: 14px; flex: none; opacity: 0.75; }
.msb-item .msb-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 650;
  color: var(--color-warning);
  background: rgba(217, 135, 25, 0.12);
  border-radius: 999px;
  padding: 1px 7px;
}
.msb-item.on {
  background: rgba(40, 100, 240, 0.09);
  color: var(--color-primary);
  font-weight: 650;
}
.msb-item.on svg { opacity: 1; }
.msb-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 4px;
  border-top: 1px solid var(--color-line);
}
.msb-user i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-primary));
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  display: grid;
  place-items: center;
  flex: none;
}
.msb-user b { font-size: 12px; display: block; line-height: 1.3; }
.msb-user span { font-size: 10.5px; color: var(--color-text-tertiary); display: block; line-height: 1.3; }

/* ---------- .mtb 工具栏 ---------- */
.mtb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mtb-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-right: 4px; }
.mtb-search,
.mtb-filter,
.mtb-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 10px;
  border-radius: 5px;
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.mtb-search svg { width: 12px; height: 12px; }
.mtb-search { min-width: 132px; }
.mtb-filter::after { content: "▾"; font-size: 9px; margin-left: 2px; }
.mtb-btn {
  margin-left: auto;
  height: 30px;
  padding-inline: 14px;
  border-radius: 5px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mtb-btn.ghost {
  margin-left: 0;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
}

/* ---------- .mtable 数据表格 ---------- */
.mtable-scroll { overflow-x: auto; }
.mtable {
  display: grid;
  min-width: 620px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.mtable.mt-nowrap { min-width: 0; }
.mt-head,
.mt-row {
  display: grid;
  grid-template-columns: var(--mt-cols, repeat(4, 1fr));
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}
.mt-head {
  background: var(--color-bg-soft);
  font-size: 11px;
  font-weight: 650;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-line);
}
.mt-head .mt-sort::after {
  content: "▲";
  font-size: 8px;
  margin-left: 4px;
  color: var(--color-primary);
}
.mt-row { border-bottom: 1px solid var(--color-line); background: #fff; }
.mt-row:nth-child(even) { background: #fafcff; }
.mt-row:last-child { border-bottom: 0; }
@media (hover: hover) {
  .mt-row:hover { background: rgba(40, 100, 240, 0.04); }
}
.mt-row b { font-weight: 650; }
.mt-row .mt-num { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11.5px; }
.mt-row .mt-dim { color: var(--color-text-tertiary); }
.mt-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 12px;
  background: #fff;
  font-size: 11.5px;
  color: var(--color-text-secondary);
}
.mt-pager span {
  min-width: 24px;
  height: 24px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}
.mt-pager span.on {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 650;
}
.mt-pager .mt-total { margin-right: auto; color: var(--color-text-tertiary); }

/* 行入场 stagger（data-play 容器进视口播一次） */
html.js [data-play] .mtable .mt-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out-standard), transform 0.35s var(--ease-out-standard);
}
html.js [data-play].is-inview .mtable .mt-row { opacity: 1; transform: none; }
html.js [data-play] .mtable .mt-row:nth-child(2) { transition-delay: 0.05s; }
html.js [data-play] .mtable .mt-row:nth-child(3) { transition-delay: 0.1s; }
html.js [data-play] .mtable .mt-row:nth-child(4) { transition-delay: 0.15s; }
html.js [data-play] .mtable .mt-row:nth-child(5) { transition-delay: 0.2s; }
html.js [data-play] .mtable .mt-row:nth-child(6) { transition-delay: 0.25s; }
html.js [data-play] .mtable .mt-row:nth-child(7) { transition-delay: 0.3s; }
html.js [data-play] .mtable .mt-row:nth-child(8) { transition-delay: 0.35s; }
html.js [data-play] .mtable .mt-row:nth-child(9) { transition-delay: 0.4s; }
html.js [data-play] .mtable .mt-row:nth-child(10) { transition-delay: 0.45s; }

/* 状态徽章补充（页面已有 .chip ok/warn/info/muted） */
.chip.danger { background: rgba(217, 75, 75, 0.12); color: var(--color-danger); }

/* ---------- .mkpi KPI 卡 ---------- */
.mkpi {
  border: 1px solid var(--color-line);
  border-radius: 7px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff, #fafcff);
  display: grid;
  gap: 3px;
  align-content: start;
  position: relative;
}
.mkpi-l { font-size: 11px; color: var(--color-text-tertiary); }
.mkpi-v { font-size: 20px; font-weight: 700; color: var(--color-text); }
.mkpi-v small { font-size: 11px; color: var(--color-text-tertiary); font-weight: 500; }
.mkpi-trend { font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; gap: 3px; }
.mkpi-trend.up { color: var(--color-success); }
.mkpi-trend.down { color: var(--color-danger); }
.mkpi-spark {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 56px;
  height: 22px;
}
.mkpi-spark path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mkpi-spark.up path { stroke: var(--color-success); }
.mkpi-spark.down path { stroke: var(--color-danger); }
.mkpi-spark.flat path { stroke: var(--color-primary); }

/* ---------- .mchart 图表卡 ---------- */
.mchart {
  border: 1px solid var(--color-line);
  border-radius: 7px;
  padding: 12px 14px 14px;
  background: #fff;
  min-width: 0;
}
.mchart-title {
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mchart-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 500; color: var(--color-text-tertiary); }
.mchart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.mchart svg { width: 100%; height: auto; display: block; }
.mchart .mc-grid line { stroke: var(--color-line); stroke-width: 1; }
.mchart .mc-ylab text,
.mchart .mc-xlab text { font-size: 9.5px; fill: var(--color-text-tertiary); }
.mchart .mc-ylab text { text-anchor: end; }
.mchart .mc-xlab text { text-anchor: middle; }
.mchart .mc-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.mchart .mc-val text { font-size: 9.5px; fill: var(--color-text-secondary); text-anchor: middle; font-weight: 650; }
/* tab 面板进入时柱体生长（仅 transform） */
.ftab-panel.is-entering .mchart .mc-bar { animation: mc-grow 0.6s var(--ease-out-standard) both; }
@keyframes mc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- .mdetail 详情字段网格 ---------- */
.mdetail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}
.mdetail.md-2 { grid-template-columns: repeat(2, 1fr); }
.md-field { display: grid; gap: 1px; min-width: 0; }
.md-field .md-l { font-size: 10.5px; color: var(--color-text-tertiary); }
.md-field .md-v { font-size: 12.5px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- .mtl 操作时间线 ---------- */
.mtl { display: grid; gap: 0; }
.mtl-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  padding-bottom: 12px;
}
.mtl-item:last-child { padding-bottom: 0; }
.mtl-item::before {
  content: "";
  grid-column: 1;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 4px;
  box-shadow: 0 0 0 3px rgba(40, 100, 240, 0.12);
}
.mtl-item::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 16px;
  bottom: -2px;
  width: 1.5px;
  background: var(--color-line);
}
.mtl-item:last-child::after { display: none; }
.mtl-item.done::before { background: var(--color-success); box-shadow: 0 0 0 3px rgba(31, 157, 102, 0.12); }
.mtl-item.todo::before { background: #fff; border: 2px solid var(--color-line-strong); box-shadow: none; }
.mtl-c { display: grid; gap: 1px; }
.mtl-c b { font-size: 12px; font-weight: 650; }
.mtl-c span { font-size: 10.5px; color: var(--color-text-tertiary); }

/* ---------- .mform 表单 ---------- */
.mform { display: grid; gap: 12px; }
.mform-sec {
  font-size: 11px;
  font-weight: 650;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 6px;
}
.mf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.mf-row { display: grid; gap: 4px; }
.mf-row label { font-size: 11px; color: var(--color-text-secondary); font-weight: 550; }
.mf-row label .mf-req { color: var(--color-danger); margin-left: 2px; }
.mf-input {
  height: 32px;
  padding-inline: 10px;
  border-radius: 5px;
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 12px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.mf-input.filled { background: #fbfcfe; font-weight: 600; }
.mf-input .mt-dim { color: var(--color-text-tertiary); font-weight: 400; }
.mf-actions { display: flex; justify-content: flex-end; gap: 8px; }
.mf-btn {
  height: 30px;
  padding-inline: 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
}
.mf-btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- .mphone 手机壳内容件 ---------- */
.mphone-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 650;
  color: var(--color-text);
}
.mphone-status .mps-icons { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mphone-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.mphone-top .mpt-sub { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--color-text-tertiary); }
.mphone-tabs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line);
  padding-top: 7px;
}
.mphone-tabs span {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--color-text-tertiary);
}
.mphone-tabs span svg { width: 15px; height: 15px; }
.mphone-tabs span.on { color: var(--color-primary); font-weight: 650; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .mw-body { grid-template-columns: 1fr; }
  .msb { display: none; } /* 平板/手机隐藏侧栏，只留主区 */
  .mdetail { grid-template-columns: repeat(2, 1fr); }
  .mt-hide-md { display: none; }
}
@media (max-width: 767px) {
  .mdetail,
  .mdetail.md-2 { grid-template-columns: 1fr 1fr; }
  .mf-grid { grid-template-columns: 1fr; }
  .mt-hide-sm { display: none; }
}

/* ---------- 减少动态：直出终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-play] .mtable .mt-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ftab-panel.is-entering .mchart .mc-bar { animation: none; }
}