.admin-page [data-panel-content="recorder-status"] { width: 100%; max-width: 1320px; }
.admin-page .recorder-admin-card { margin-bottom: 18px; padding: 22px 24px; box-shadow: none; }
.recorder-admin-heading, .recorder-admin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.recorder-admin-heading h2 { margin: 0; font-size: 18px; }
.recorder-admin-heading p { margin: 6px 0 0; font-size: 12px; }
.admin-page .recorder-admin-card button, .recorder-admin-notice button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--admin-line-strong); border-radius: 9px; background: var(--admin-paper); color: var(--admin-ink-soft); font: 600 12px/1.5 var(--body); cursor: pointer; }
.admin-page .recorder-admin-card button.primary-button, .recorder-admin-notice button { background: var(--admin-purple-dark); border-color: var(--admin-purple-dark); color: var(--admin-paper); }
.recorder-admin-card button:disabled { opacity: .5; cursor: not-allowed; }
.recorder-admin-card :is(button,input,select):focus-visible, .recorder-admin-notice button:focus-visible { outline: 2px solid var(--admin-purple); outline-offset: 2px; }
.recorder-admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 22px 0; }
.recorder-admin-fields label { display: grid; gap: 8px; min-width: 0; font-size: 13px; }
.recorder-admin-fields small, .recorder-admin-actions > span { font-size: 12px; color: var(--admin-muted); }
.recorder-admin-fields .recorder-enable { display: flex; align-items: center; gap: 8px; }
.recorder-admin-fields .recorder-enable input { width: auto; }
.recorder-admin-card :is(input:not([type="checkbox"]),select) { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--admin-line-strong); border-radius: 9px; padding: 9px 12px; background: var(--admin-paper); color: var(--admin-ink); }
.recorder-admin-card fieldset { min-width: 0; margin: 0 0 20px; padding: 16px; border: 1px solid var(--admin-line); border-radius: 10px; }
.recorder-admin-card legend { padding: 0 6px; font-weight: 600; }
.recorder-admin-card fieldset p { margin: 12px 0 0; font-size: 12px; }
.recorder-mapping-row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(160px,2fr) auto; gap: 6px 10px; margin-bottom: 16px; align-items: end; }
.recorder-mapping-row label { display: grid; gap: 6px; min-width: 0; font-size: 12px; }
.admin-page .recorder-mapping-row :is(input,select), .admin-page .recorder-mapping-row > button { min-height: 44px; }
.recorder-mapping-row > button { grid-column: 3; grid-row: 1; }
.recorder-mapping-row > .recorder-mapping-hint { grid-column: 2; grid-row: 2; margin: 0; line-height: 1.6; }
.recorder-source-summary, .recorder-imports { display: grid; gap: 12px; margin-top: 18px; }
.recorder-source-row, .recorder-import-row { padding: 14px 16px; border: 1px solid var(--admin-line); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.recorder-source-row > div, .recorder-import-row > div { min-width: 0; display: grid; gap: 6px; }
.recorder-source-row strong, .recorder-import-row strong { overflow-wrap: anywhere; font-size: 13px; }
.recorder-source-row span, .recorder-import-row span { color: var(--admin-muted); font-size: 12px; }
.recorder-admin-feedback { padding: 12px; border-radius: 9px; color: var(--admin-red); background: var(--admin-red-soft); }
.recorder-admin-notice { width: min(430px,calc(100vw - 40px)); padding: 26px; border: 1px solid var(--admin-line); border-radius: 18px; background: var(--admin-paper); color: var(--admin-ink); }
.recorder-admin-notice::backdrop { background: rgba(25,17,31,.5); }
.recorder-admin-notice h2 { margin-top: 0; font-size: 18px; }
.recorder-admin-notice p { margin: 18px 0; line-height: 1.7; white-space: pre-line; }
.recorder-demo-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; margin-top: 18px; }
.recorder-demo-status strong { font-size: 15px; }
.recorder-demo-status span { color: var(--admin-purple-dark); font-variant-numeric: tabular-nums; font-size: 13px; }
.recorder-demo-hint { margin: 10px 0 18px; color: var(--admin-muted); font-size: 12px; }
.recorder-demo-actions, .recorder-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.recorder-notice-actions { justify-content: flex-end; }
.recorder-admin-notice [data-recorder-notice-close] { background: var(--admin-paper); color: var(--admin-ink-soft); border-color: var(--admin-line-strong); }
.recorder-config-file { display: grid; gap: 8px; margin-top: 20px; max-width: 540px; font-size: 13px; }
.recorder-config-hint, [data-recorder-config-status] { font-size: 12px; line-height: 1.6; color: var(--admin-muted); }
.recorder-config-preview { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--admin-line); }
.recorder-config-preview[hidden], .recorder-config-confirmation[hidden] { display: none; }
.recorder-config-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 24px; margin: 0 0 20px; }
.recorder-config-details > div { min-width: 0; }
.recorder-config-details dt { color: var(--admin-muted); font-size: 12px; }
.recorder-config-details dd { margin: 5px 0 0; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.recorder-config-rooms { display: grid; gap: 10px; max-height: 440px; overflow-y: auto; }
.recorder-config-room { min-width: 0; padding: 14px; border: 1px solid var(--admin-line); border-radius: 9px; }
.recorder-config-room h3 { margin: 0 0 7px; font-size: 14px; overflow-wrap: anywhere; }
.recorder-config-room p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.recorder-config-diff, .recorder-config-warnings { margin: 16px 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.recorder-config-diff p { margin: 4px 0; }
.recorder-config-warnings { padding-left: 20px; color: var(--admin-muted); }
.recorder-config-confirmation { padding: 14px; margin-bottom: 20px; border: 1px solid var(--admin-line); border-radius: 10px; font-size: 13px; line-height: 1.7; }
.recorder-config-confirmation p { margin: 0 0 8px; color: var(--admin-muted); }
.recorder-config-confirmation label { display: flex; align-items: flex-start; gap: 8px; }
.recorder-config-confirmation input { flex: none; width: auto; margin-top: 5px; }
.recorder-mapping-row small { color: var(--admin-muted); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width:620px) { .recorder-config-details { grid-template-columns: minmax(0,1fr); } .recorder-config-rooms { max-height: none; overflow: visible; } }
@media (max-width:1024px), (pointer:coarse) { .admin-page .recorder-mapping-row :is(input,select), .admin-page .recorder-mapping-row > button { min-height: 48px; } }
@media (max-width:620px) {
  .admin-page .recorder-admin-card { padding: 18px 16px; }
  .recorder-admin-fields { grid-template-columns: minmax(0,1fr); }
  .recorder-mapping-row { grid-template-columns: minmax(0,1fr); row-gap: 10px; }
  .recorder-mapping-row > .recorder-mapping-hint { grid-column: 1; grid-row: 3; }
  .recorder-mapping-row > button { grid-column: 1; grid-row: auto; order: 1; justify-self: end; }
}