.recorder { max-width: 1600px; margin: 0 auto; }
body:has(.recorder) .main-content { min-width: 0; width: 100%; }
body:has(.recorder) .sidebar { flex-shrink: 0; }
.recorder-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.recorder-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 24px; }
.recorder-filters label { display: grid; gap: 8px; font-weight: 600; min-width: 220px; }
.recorder-filters select { max-width: 100%; }
.recorder-muted { color: #64748b; font-size: 13px; line-height: 1.6; }
.recorder-message { padding: 18px; background: #edf2f7; border-radius: 8px; margin-bottom: 20px; }
.recorder-warning { background: #fff4d6; color: #774d00; }
.recorder-error { background: #fff0f0; color: #a12424; }
.recorder-scroll { overflow-x: auto; }
.recorder-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.recorder-table th { color: #64748b; background: #f8fafc; font-size: 12px; font-weight: 600; }
.recorder-table td, .recorder-table th { padding: 16px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.recorder-table td { min-width: 110px; }
.recorder-table td:first-child { min-width: 200px; }
.recorder-table small { display: block; color: #64748b; margin-top: 5px; }
.recorder-pill { display: inline-block; border-radius: 6px; padding: 4px 8px; background: #edf2f7; font-size: 12px; margin: 3px 4px 3px 0; }
.recorder-pill.warn { background: #fff0cc; color: #805600; }
.recorder-pill.danger { background: #fee2e2; color: #9b1c1c; }
.recorder-profile + .recorder-profile { border-top: 1px solid #e2e8f0; margin-top: 12px; padding-top: 12px; }
.recorder-explanation { margin-bottom: 16px; max-width: 950px; }
.recorder-method { margin-top: 20px; font-size: 13px; line-height: 1.7; color: #475569; }
.recorder-method summary { cursor: pointer; font-weight: 600; }
.recorder-method p { margin-top: 10px; }
.recorder-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; }
.recorder button:disabled { opacity: .5; cursor: default; }
.recorder dialog { margin: auto; padding: 24px; border: 0; border-radius: 12px; max-width: 850px; width: calc(100% - 32px); max-height: 85vh; overflow: auto; color: #2d3748; }
.recorder dialog::backdrop { background: rgb(15 23 42 / 55%); }
.recorder dl { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 12px 20px; margin-top: 24px; }
.recorder dt { color: #64748b; }
.recorder dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.recorder [hidden] { display: none !important; }
.recorder-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.recorder-form-grid label { display: grid; gap: 7px; font-weight: 600; }
.recorder-form-grid input { width: 100%; box-sizing: border-box; }
.recorder-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .recorder .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .recorder-heading { align-items: start; } .recorder-filters label { min-width: 0; width: 100%; } .recorder dl, .recorder-form-grid { grid-template-columns: 1fr; gap: 6px; } .recorder-form-actions { grid-column: 1; } .recorder dd { margin-bottom: 12px; } }
@media (max-width: 760px) {
    body:has(.recorder) .container { display: block; }
    body:has(.recorder) .sidebar { position: static; width: 100%; height: auto; display: flex; overflow-x: auto; padding: 8px; border-bottom: 1px solid #e2e8f0; }
    body:has(.recorder) .sidebar .menu-section { display: none; }
    body:has(.recorder) .sidebar .nav-item { white-space: nowrap; padding: 10px 12px; }
    body:has(.recorder) .main-content { padding: 16px; }
    .recorder .card { padding: 16px; }
}