.mx-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mx-editor, #mx-result, #mx-steps { min-width: 0; }
.mx-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.mx-controls .qr-field { flex: 1 1 110px; min-width: 0; }
.mx-scroll { max-width: 100%; overflow-x: auto; margin: 10px 0; }
.mx-grid { display: grid; gap: 6px; width: max-content; padding: 4px; }
.mx-cell { margin: 0; }
.mx-cell input[type=text] { width: 76px; min-height: 44px; margin: 0; }
.mx-matrix { width: max-content; min-width: 0; border-left: 2px solid var(--brand); border-right: 2px solid var(--brand); border-collapse: collapse; }
.mx-matrix td { padding: 8px 12px; text-align: right; white-space: nowrap; }
.mx-matrix .mx-divider { border-left: 2px solid var(--line); }
.mx-step { margin: 16px 0; }
.mx-step p, #mx-expression, #mx-error, #mx-status { overflow-wrap: anywhere; }
#mx-step-details { margin-top: 20px; }
@media (max-width: 700px) { .mx-editors { grid-template-columns: minmax(0, 1fr); } }