.qr-toolbar, .qr-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qr-toolbar { margin: 16px 0; }
.qr-actions { justify-content: flex-start; }
#qc-rules { min-width: 0; }
#qc-rules h3 { margin: 0; font-size: 16px; }
#qc-rules .tbl { background: var(--bg-surface); }
.qr-dialog { width: min(740px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--gray-200); border-radius: var(--radius); color: var(--gray-900); }
.qr-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.qr-dialog .modal-h, .qr-dialog .modal-f { flex: none; }
.qr-dialog form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.qr-dialog .modal-b { overflow-y: auto; min-height: 0; }
#qc-rules .filter-bar { margin-bottom: 16px; }
.qr-dialog::backdrop { background: var(--modal-backdrop); }
.qr-dialog fieldset, #quality-rule-selection fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qr-dialog .modal-f { flex-wrap: wrap; }
.qr-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.qr-dialog details { border-bottom: 1px solid var(--gray-200); padding: 12px 0; }
.qr-dialog summary { cursor: pointer; }
.qr-choice { display: flex; gap: 8px; align-items: start; margin: 8px 0; overflow-wrap: anywhere; font-size: 12px; }
.qr-choice input { flex: none; margin-top: 3px; }
#qr-error { color: var(--danger); min-height: 20px; margin: 12px 0; }
#quality-rule-selection legend { font-size: 12px; }
#qr-review { border-top: 1px solid var(--gray-200); padding-top: 12px; }
#qc-report .card, #qc-run .card, #qc-ready .card { border-radius: var(--radius); box-shadow: var(--shadow); }
#qc-report .desc, #qc-run .desc { margin: 16px 0; }
[data-quality-export] { margin-top: 12px; }
#qc-ready h3 { font-size: 16px; margin: 20px 0 12px; }
#qc-ready .form-grid { margin-bottom: 20px; }
#qc-ready .tbl { background: var(--bg-surface); }
#qc-ready [role="status"] > p { margin: 12px 0 16px; }
#qc-ready .empty-state { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (max-width: 640px) {
  .qr-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  #qc-rules .filter-bar { flex-wrap: wrap; }
  #qc-rules .filter-bar .field { width: 100%; }
}