/* DE 仪表盘（设计 §8.2）：网格 + 卡片 + 8 种图形的基础样式。 */
.de-dash { margin-bottom: 14px; }
.de-dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.de-dash-title { font-weight: 700; font-size: 15px; }
.de-dash-scope { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted, #888); }
.de-dash-asof { font-size: 11px; color: var(--text-muted, #888); }
.de-dash-warn { background: #fff7e6; border: 1px solid #ffd591; color: #ad6800;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; margin-bottom: 8px; }

.de-dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.de-dash-card { background: var(--bg-card, #fff); border-radius: 12px; padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); min-height: 96px; }
.de-dash-sm { grid-column: span 1; }
.de-dash-md { grid-column: span 2; }
.de-dash-lg { grid-column: span 3; }
.de-dash-card-title { font-size: 12px; font-weight: 600; color: var(--text-muted, #666);
  display: flex; justify-content: space-between; align-items: center; }
.de-dash-go { font-size: 11px; color: var(--primary, #7c5cff); cursor: pointer; }
.de-dash-value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.de-dash-delta { font-size: 12px; margin-top: 2px; }
.de-dash-delta-good { color: var(--green, #16a34a); }
.de-dash-delta-bad { color: #dc2626; }
.de-dash-delta-flat { color: var(--text-muted, #888); }
.de-dash-empty-hint { font-size: 12px; color: var(--text-muted, #888); padding: 12px 0; }
.de-dash-skeleton { background: linear-gradient(90deg, #f3f3f6 25%, #ececf2 37%, #f3f3f6 63%);
  background-size: 400% 100%; animation: de-dash-shimmer 1.2s ease infinite; }
@keyframes de-dash-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.de-dash-error, .de-dash-empty { font-size: 13px; color: var(--text-muted, #888); padding: 10px 0; }
.de-dash-retry { margin-left: 8px; font-size: 12px; cursor: pointer; }

.de-dash-progress { position: relative; width: 64px; height: 64px; margin-top: 6px; }
.de-dash-ring { width: 64px; height: 64px; }
.de-dash-ring-bg { fill: none; stroke: var(--bg-secondary, #eee); stroke-width: 6; }
.de-dash-ring-fg { fill: none; stroke: var(--primary, #7c5cff); stroke-width: 6; stroke-linecap: round; }
.de-dash-ring-label { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; }

.de-dash-list { margin-top: 6px; }
.de-dash-row { display: flex; gap: 8px; align-items: center; font-size: 12px;
  padding: 4px 0; border-bottom: 1px dashed var(--border, #eee); cursor: pointer; }
.de-dash-row-label { flex: 1; font-weight: 600; }
.de-dash-row-note { color: var(--text-muted, #888); }
.de-dash-row-value { font-weight: 700; }

.de-dash-heat { margin-top: 6px; }
.de-dash-heat-row { display: flex; gap: 4px; margin-bottom: 4px; }
.de-dash-heat-cell { flex: 1; text-align: center; font-size: 11px; padding: 5px 0;
  border-radius: 4px; background: rgba(124,92,255,.06); }
.de-dash-heat-head { font-weight: 600; color: var(--text-muted, #666); background: transparent; }

.de-dash-timeline { margin-top: 6px; }
.de-dash-event { display: flex; gap: 8px; font-size: 12px; padding: 3px 0; }
.de-dash-event-time { width: 44px; color: var(--text-muted, #888); }
.de-dash-event-title { flex: 1; }
.de-dash-event-status { color: var(--primary, #7c5cff); }

@media (max-width: 720px) {
  .de-dash-grid { grid-template-columns: 1fr; }
  .de-dash-sm, .de-dash-md, .de-dash-lg { grid-column: span 1; }
}