/* RECATOOLS — Matrix Calculator look (indigo math family) */
.mx-wrap { padding: 1.25rem; }
.mx-sizes { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.mx-size { padding: .4rem .9rem; font-size: .85rem; font-weight: 600; color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; cursor: pointer; }
.mx-size.is-active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.mx-inputs { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.mx-inputs > div { display: flex; flex-direction: column; gap: .4rem; }
.mx-inputs label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9b968d; }
.mx-grid { display: grid; gap: .4rem; }
.mx-cell { width: 56px; padding: .5rem; text-align: center; border: 1px solid #ebebeb; border-radius: 8px; font-size: 1rem; font-family: ui-monospace, Menlo, monospace; }
.mx-cell:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.mx-result { margin-top: 1.5rem; }
.mx-block { margin-top: 1.25rem; }
.mx-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6366f1; margin: 0 0 .7rem; }
.mx-cards { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.mx-card { flex: 1; min-width: 130px; padding: .7rem .9rem; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px; display: flex; flex-direction: column; gap: .2rem; }
.mx-card-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #9b968d; font-weight: 700; }
.mx-card-v { font-size: 1.1rem; font-family: ui-monospace, Menlo, monospace; color: #4338ca; word-break: break-word; }
.mx-mats { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.mx-mat { display: flex; flex-direction: column; gap: .4rem; }
.mx-mat-l { font-size: .78rem; font-weight: 600; color: #6b6760; }
.mx-matrix { display: inline-grid; grid-template-rows: repeat(var(--n), auto); gap: 0; padding: .35rem .7rem; border-left: 2px solid #1a1814; border-right: 2px solid #1a1814; border-radius: 4px; }
.mx-mrow { display: grid; grid-template-columns: repeat(var(--n), minmax(2.2rem, 1fr)); gap: .3rem .9rem; }
.mx-mrow span { font-family: ui-monospace, Menlo, monospace; font-size: .95rem; text-align: right; color: #1a1814; }
.mx-singular { padding: .6rem .8rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; color: #92400e; font-size: .85rem; max-width: 240px; }
@media (max-width: 520px) { .mx-cell { width: 46px; } }