/* 映射：05A 功能面板、06 节点系统；视觉值由 styles.css 全局 token 所有。 */
.frame-breakdown-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  width: 100%;
  background: var(--color-surface-panel);
  color: var(--color-text-primary);
  text-align: left;
  font-size: var(--font-body-size);
}
.frame-breakdown-card header, .frame-breakdown-dialog > header, .frame-breakdown-transport, .frame-breakdown-setting, .frame-breakdown-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.frame-breakdown-card header svg { width: var(--icon-control-size); height: var(--icon-control-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); }
.frame-breakdown-card p, .frame-breakdown-dialog p { margin: 0; color: var(--color-text-muted); font-size: var(--font-control-size); line-height: var(--font-body-line); overflow-wrap: anywhere; }
.frame-breakdown-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: var(--font-control-size); }
.frame-breakdown-dimensions { display: flex; gap: var(--space-2); }
.frame-breakdown-dimensions span { flex: 1; text-align: center; padding: var(--space-1); border-radius: var(--radius-sm); color: var(--color-text-muted); background: var(--color-control-bg); font-size: var(--font-control-size); }
.frame-breakdown-dimensions .is-selected { color: var(--color-text-primary); background: var(--color-surface-active); }
.frame-breakdown-card button, .frame-breakdown-dialog button, .frame-breakdown-dialog select {
  min-height: var(--control-height-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-control-bg);
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--font-control-size);
  cursor: pointer;
}
.frame-breakdown-card button:hover, .frame-breakdown-dialog button:hover, .frame-breakdown-dialog select:hover { background: var(--color-control-hover); }
.frame-breakdown-card button:focus-visible, .frame-breakdown-dialog :is(button, select, input):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.frame-breakdown-dialog button:disabled, .frame-breakdown-dialog select:disabled { opacity: 0.5; cursor: default; }
.frame-breakdown-dialog button.is-primary { background: var(--color-action-primary); color: var(--color-action-primary-ink); }
.frame-breakdown-dialog button.is-primary:hover { background: var(--color-action-primary-hover); }
.frame-breakdown-card progress, .frame-breakdown-dialog progress { width: 100%; height: var(--space-2); accent-color: var(--color-running); }
.frame-breakdown-dialog [hidden] { display: none; }
.frame-breakdown-dialog [data-breakdown-smart] { display: grid; gap: var(--space-2); min-width: 0; }
.frame-breakdown-dialog [data-breakdown-smart][hidden] { display: none; }
.frame-breakdown-dialog [data-breakdown-model] { min-width: 0; max-width: 65%; }
.frame-breakdown-report { display: grid; gap: var(--space-3); margin-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-4); }
.frame-breakdown-report h3 { margin: 0; font-size: var(--font-body-size); }
.frame-breakdown-report details { padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.frame-breakdown-report summary { cursor: pointer; overflow-wrap: anywhere; font-size: var(--font-body-size); }
.frame-breakdown-report details > :not(summary) { margin-top: var(--space-2); }
.frame-breakdown-report dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); font-size: var(--font-control-size); }
.frame-breakdown-report dt { color: var(--color-text-muted); }
.frame-breakdown-report dd { margin: 0; overflow-wrap: anywhere; }
.frame-breakdown-dialog {
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-family-ui);
  overflow: auto;
}
.frame-breakdown-dialog::backdrop { background: var(--color-overlay-backdrop); }
.frame-breakdown-dialog > header { justify-content: space-between; margin-bottom: var(--space-4); }
.frame-breakdown-dialog h2 { margin: 0 0 var(--space-1); font-size: var(--font-panel-title-size); line-height: var(--font-panel-title-line); }
.frame-breakdown-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--space-5); }
.frame-breakdown-viewer { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.frame-breakdown-viewer video { width: 100%; max-height: 52dvh; object-fit: contain; border-radius: var(--radius-md); background: var(--color-surface-overlay-inner); }
.frame-breakdown-transport { flex-wrap: wrap; justify-content: center; }
.frame-breakdown-transport label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-control-size); color: var(--color-text-secondary); white-space: nowrap; }
.frame-breakdown-transport output { font-size: var(--font-control-size); font-variant-numeric: tabular-nums; }
.frame-breakdown-options { display: grid; align-content: start; gap: var(--space-3); }
.frame-breakdown-options fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.frame-breakdown-options legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--font-body-size); }
.frame-breakdown-choices { display: grid; gap: var(--space-2); }
.frame-breakdown-choices label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: var(--font-body-size); }
.frame-breakdown-choices label:has(input:checked) { background: var(--color-surface-active); }
.frame-breakdown-choices input { width: var(--space-4); height: var(--space-4); min-height: 0; margin: 0; flex: 0 0 var(--space-4); padding: 0; accent-color: var(--color-action-primary); }
.frame-breakdown-choices span { flex: 1; min-width: 0; }
.frame-breakdown-choices small { display: block; color: var(--color-text-secondary); font-size: var(--font-control-size); line-height: var(--font-body-line); }
.frame-breakdown-setting { justify-content: space-between; font-size: var(--font-control-size); white-space: nowrap; }
.frame-breakdown-setting select, .frame-breakdown-transport select { width: auto; min-width: 120px; flex: 0 0 auto; }
.frame-breakdown-actions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .frame-breakdown-layout { grid-template-columns: minmax(0, 1fr); }
  .frame-breakdown-dialog { padding: var(--space-3); }
  .frame-breakdown-viewer video { max-height: 35dvh; }
}