body { font-family: system-ui, Arial, sans-serif; margin: 20px; }
h1 { margin-bottom: 10px; }
.controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.alpha-key input { width: 9ch; text-transform: uppercase; }
.actions button { margin-right: 8px; }

.grids { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-wrap h2 { margin: 8px 0; }

.grid .row { display: grid; grid-template-columns: repeat(13, 2rem); gap: 2px; }
.grid .row.header { font-weight: bold; }
.cell.hdr { background: #f3f3f3; text-align: center; padding: 4px 0; border: 1px solid #ddd; }
.grid input.cell { width: 2rem; height: 2rem; text-align: center; border: 1px solid #ccc; }
.grid-readonly input.cell { background: #fafafa; }

.routing-table { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; }
.rt-line { display: flex; align-items: center; gap: 6px; }
.rt-lbl { width: 3.5rem; text-align: right; color: #666; }
.rt-src { width: 4rem; }
.rt-dst { width: 2.5rem; text-transform: uppercase; }