.ont-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.ont-record-list { display: grid; gap: 8px; }
.ont-record { border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); padding: 11px; display: grid; gap: 10px; }
.ont-record > div:first-child { display: grid; gap: 3px; }
.ont-record > div:first-child span { color: var(--color-text-muted); font-size: 12px; }
.ont-record dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ont-record dl div { display: grid; gap: 2px; }
.ont-record dt { color: var(--color-text-muted); font-size: 11px; }
.ont-record dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.ont-identity.online, .connection-status.connected { color: var(--color-success); }
.ont-identity.offline, .ont-customer.long-offline, .badge.alert, .connection-status.disconnected, .connection-status.error { color: var(--color-danger); }

.connection-status { min-height: 38px; display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); padding: 0 10px; font-size: 13px; font-weight: 700; }
.connection-status.pairing { color: var(--color-warning); }
.toggle-list, .recipient-options { display: grid; gap: 8px; margin: 14px 0 0; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); }
.toggle-list legend, .recipient-options legend { padding: 0 5px; color: var(--color-text-muted); font-size: 12px; font-weight: 700; }
.toggle-list label, .recipient-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.recipient-options label span { display: grid; gap: 2px; }
.recipient-options small { color: var(--color-text-muted); }

.gateway-panel { display: grid; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-subtle); padding: 12px; }
.detail-dialog .gateway-panel form { display: block; flex: none; }
.pairing-code { display: grid; gap: 4px; padding: 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface); }
.pairing-code span, .pairing-code small { color: var(--color-text-muted); font-size: 12px; }
.pairing-code strong { color: var(--color-text-strong); font-size: 24px; letter-spacing: 0; }

form[data-form="router-create"] .form-grid { gap: 10px 12px; padding-top: 14px; }
form[data-form="router-create"] .form-field:first-child { grid-column: 1 / -1; }