.recorded-config { --rc-line: var(--line, var(--border, #53606d)); --rc-muted: var(--muted, var(--text-dim, #9ba9b5)); color: inherit; font: inherit; margin-top: 20px; min-width: 0; }
.recorded-config h3 { font-size: 16px; margin: 0 0 8px; }
.recorded-config p { font-size: 13px; line-height: 1.6; margin: 8px 0 16px; color: var(--rc-muted); }
.rc-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
.rc-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; flex: 1 1 160px; min-width: 0; }
.recorded-config input, .recorded-config select, .recorded-config button { font: inherit; font-size: 13px; color: inherit; background: var(--panel, #19212b); border: 1px solid var(--rc-line); border-radius: 4px; padding: 8px; min-width: 0; max-width: 100%; }
.recorded-config button { cursor: pointer; }
.recorded-config :is(input,select,button,summary):focus-visible { outline: 2px solid var(--accent, #45a5a0); outline-offset: 3px; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-row { border-top: 1px solid var(--rc-line); }
.rc-row > summary { cursor: pointer; display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr); gap: 6px 16px; padding: 14px 4px; font-size: 13px; }
.rc-name::before { content: "▸"; margin-right: 8px; }
.rc-row[open] .rc-name::before { content: "▾"; }
.rc-row strong { font-size: 13px; overflow-wrap: anywhere; }
.rc-status, .rc-time { color: var(--rc-muted); font-size: 12px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rc-detail { padding: 0 8px 16px; }
.rc-table-wrap { overflow-x: auto; }
.recorded-config table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 12px; }
.recorded-config th, .recorded-config td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rc-line); vertical-align: top; }
.rc-quality { margin-top: 20px; padding: 12px; border: 1px solid var(--rc-line); font-size: 12px; }
.rc-quality summary { cursor: pointer; }
.recorded-config .rc-warning { color: var(--sev-warning, #deac5c); }
@media (max-width: 600px) {
  .rc-row > summary { grid-template-columns: minmax(0, 1fr); }
  .rc-controls label { flex-basis: 100%; }
}