/* demo-run.css —— 一键演示面板 / 对比态（2026-11-04） */

.demo-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface, #fff);
  border: 1px solid var(--color-border, #e3e6ee);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(20, 32, 60, .16);
  z-index: 10050;  /* 高于右栏(z-guide=10000)，低于引导气泡(10100) */
  overflow: hidden;
  font-size: 12.5px;
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--color-border, #e3e6ee);
  font-size: 13px;
}
.dp-head b { font-weight: 600; }
.dp-x {
  border: 0; background: transparent; cursor: pointer; font-size: 16px;
  line-height: 1; color: var(--color-text-tertiary, #8a8f9c);
}
.dp-body { padding: 10px 12px; overflow-y: auto; }
.dp-foot { padding: 0 12px 12px; }

.dp-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-border, #eef0f5);
}
.dp-row:last-child { border-bottom: 0; }
.dp-st { color: var(--color-text-tertiary, #8a8f9c); font-weight: 700; }
.dp-lb { color: var(--color-text-primary, #1b1f2a); }
.dp-ms { color: var(--color-text-tertiary, #8a8f9c); font-variant-numeric: tabular-nums; }
.dp-row.st-run .dp-st { color: #1F4FD8; }
.dp-row.st-ok .dp-st { color: #17663a; }
.dp-row.st-fail .dp-st { color: #8a1f1f; }
.dp-row.st-fail .dp-lb { color: #8a1f1f; }
.dp-note {
  grid-column: 2 / 4;
  margin-top: 3px;
  color: var(--color-text-tertiary, #6b7280);
  font-size: 11.5px;
  line-height: 1.5;
  word-break: break-all;
}
.dp-sum { margin-top: 8px; font-size: 12px; color: var(--color-text-secondary, #4b5563); }
.dp-actions { display: flex; gap: 8px; margin-top: 8px; }
.dp-loading { color: var(--color-text-tertiary, #8a8f9c); padding: 8px 0; }

/* 对比态 */
.dp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-col { border: 1px solid var(--color-border, #e3e6ee); border-radius: 6px; padding: 10px; }
.dp-col-gw { border-color: #b9c8f0; background: #f7f9ff; }
.dp-col-h { font-size: 11.5px; color: var(--color-text-tertiary, #8a8f9c); margin-bottom: 6px; }
.dp-big { font-size: 26px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.dp-muted { font-size: 11.5px; color: var(--color-text-tertiary, #8a8f9c); line-height: 1.6; }
.dp-kv { font-size: 11.5px; color: var(--color-text-secondary, #4b5563); margin-top: 4px; line-height: 1.5; }
.dp-kv.dp-warn { color: #8a5a00; }
.dp-kv.dp-ok { color: #17663a; }
.dp-note-line { margin-top: 10px; font-size: 11.5px; color: var(--color-text-tertiary, #8a8f9c); }

/* 空状态里的两个入口按钮 */
.es-actions { display: flex; gap: 10px; justify-content: center; margin: 4px 0 14px; }
.es-actions .btn { min-width: 132px; }

@media (max-width: 520px) {
  .demo-panel { right: 8px; left: 8px; width: auto; bottom: 8px; max-height: 60vh; }
  .dp-cmp { grid-template-columns: 1fr; }
}